From c413e27768a5e7c6503012d9d2d90298ad021cce Mon Sep 17 00:00:00 2001
From: Piotr Oleszczyk <piotr@oleszczyk.eu>
Date: Fri, 27 Feb 2026 16:37:00 +0100
Subject: [PATCH] fix: suppress state_referenced_locally warnings in
 ProductForm

Wrap all prop-derived $state initializers with untrack() to explicitly
signal that one-time capture from the product prop is intentional.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/ProductForm.svelte     | 55 ++++++++++---------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/frontend/src/lib/components/ProductForm.svelte b/frontend/src/lib/components/ProductForm.svelte
index ab17872..2967b50 100644
--- a/frontend/src/lib/components/ProductForm.svelte
+++ b/frontend/src/lib/components/ProductForm.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import type { Product } from '$lib/types';
 	import type { IngredientFunction, InteractionScope } from '$lib/types';
 	import { Button } from '$lib/components/ui/button';
@@ -59,30 +60,30 @@
 
 	// ── Select reactive state ─────────────────────────────────────────────────
 
-	let category = $state(product?.category ?? '');
-	let recommendedTime = $state(product?.recommended_time ?? '');
-	let leaveOn = $state(product?.leave_on != null ? String(product.leave_on) : 'true');
-	let texture = $state(product?.texture ?? '');
-	let absorptionSpeed = $state(product?.absorption_speed ?? '');
-	let priceTier = $state(product?.price_tier ?? '');
+	let category = $state(untrack(() => product?.category ?? ''));
+	let recommendedTime = $state(untrack(() => product?.recommended_time ?? ''));
+	let leaveOn = $state(untrack(() => (product?.leave_on != null ? String(product.leave_on) : 'true')));
+	let texture = $state(untrack(() => product?.texture ?? ''));
+	let absorptionSpeed = $state(untrack(() => product?.absorption_speed ?? ''));
+	let priceTier = $state(untrack(() => product?.price_tier ?? ''));
 	let fragranceFree = $state(
-		product?.fragrance_free != null ? String(product.fragrance_free) : ''
+		untrack(() => (product?.fragrance_free != null ? String(product.fragrance_free) : ''))
 	);
 	let essentialOilsFree = $state(
-		product?.essential_oils_free != null ? String(product.essential_oils_free) : ''
+		untrack(() => (product?.essential_oils_free != null ? String(product.essential_oils_free) : ''))
 	);
 	let alcoholDenatFree = $state(
-		product?.alcohol_denat_free != null ? String(product.alcohol_denat_free) : ''
+		untrack(() => (product?.alcohol_denat_free != null ? String(product.alcohol_denat_free) : ''))
 	);
 	let pregnancySafe = $state(
-		product?.pregnancy_safe != null ? String(product.pregnancy_safe) : ''
+		untrack(() => (product?.pregnancy_safe != null ? String(product.pregnancy_safe) : ''))
 	);
 	let personalRepurchaseIntent = $state(
-		product?.personal_repurchase_intent != null ? String(product.personal_repurchase_intent) : ''
+		untrack(() => (product?.personal_repurchase_intent != null ? String(product.personal_repurchase_intent) : ''))
 	);
 
 	// context rules tristate
-	const cr = product?.context_rules;
+	const cr = untrack(() => product?.context_rules);
 	let ctxAfterShaving = $state(
 		cr?.safe_after_shaving != null ? String(cr.safe_after_shaving) : ''
 	);
@@ -97,7 +98,7 @@
 
 	// ── Effect profile ────────────────────────────────────────────────────────
 
-	const ep = product?.product_effect_profile;
+	const ep = untrack(() => product?.product_effect_profile);
 	let effectValues = $state({
 		hydration_immediate: ep?.hydration_immediate ?? 0,
 		hydration_long_term: ep?.hydration_long_term ?? 0,
@@ -125,13 +126,15 @@
 	};
 
 	let actives: ActiveRow[] = $state(
-		product?.actives?.map((a) => ({
-			name: a.name,
-			percent: a.percent != null ? String(a.percent) : '',
-			functions: [...(a.functions ?? [])] as IngredientFunction[],
-			strength_level: a.strength_level != null ? String(a.strength_level) : '',
-			irritation_potential: a.irritation_potential != null ? String(a.irritation_potential) : ''
-		})) ?? []
+		untrack(() =>
+			product?.actives?.map((a) => ({
+				name: a.name,
+				percent: a.percent != null ? String(a.percent) : '',
+				functions: [...(a.functions ?? [])] as IngredientFunction[],
+				strength_level: a.strength_level != null ? String(a.strength_level) : '',
+				irritation_potential: a.irritation_potential != null ? String(a.irritation_potential) : ''
+			})) ?? []
+		)
 	);
 
 	function addActive() {
@@ -171,11 +174,13 @@
 	type IncompatibleRow = { target: string; scope: string; reason: string };
 
 	let incompatibleWith: IncompatibleRow[] = $state(
-		product?.incompatible_with?.map((i) => ({
-			target: i.target,
-			scope: i.scope,
-			reason: i.reason ?? ''
-		})) ?? []
+		untrack(() =>
+			product?.incompatible_with?.map((i) => ({
+				target: i.target,
+				scope: i.scope,
+				reason: i.reason ?? ''
+			})) ?? []
+		)
 	);
 
 	function addIncompatible() {