From 65a17a0bb72571803bc53abb8712c16c8c11721d Mon Sep 17 00:00:00 2001
From: "Arthur @Refzlund" <arthur@refzlund.com>
Date: Thu, 3 Jul 2025 09:50:13 +0200
Subject: [PATCH 1/3] issue story

---
 svelte-object/src/SvelteArray.svelte          | 34 +++++++------
 svelte-object/src/SvelteObject.svelte         | 42 ++++++++--------
 svelte-object/src/SvelteValue.svelte          |  2 +-
 .../overriding-states/Issue.stories.svelte    | 48 +++++++++++++++++++
 .../issues/overriding-states/README.mdx       |  1 +
 svelte-object/stories/tw.css                  |  1 +
 6 files changed, 87 insertions(+), 41 deletions(-)
 create mode 100644 svelte-object/stories/issues/overriding-states/Issue.stories.svelte
 create mode 100644 svelte-object/stories/issues/overriding-states/README.mdx
 create mode 100644 svelte-object/stories/tw.css

diff --git a/svelte-object/src/SvelteArray.svelte b/svelte-object/src/SvelteArray.svelte
index 1b6912f..98cdbed 100644
--- a/svelte-object/src/SvelteArray.svelte
+++ b/svelte-object/src/SvelteArray.svelte
@@ -1,23 +1,26 @@
-<script lang='ts'>
+<script lang='ts' module>
 	import type { ObjectProps } from './index.svelte'
-	import Object from './SvelteObject.svelte'
-	import { type Snippet } from 'svelte'
-
-	type T = $$Generic<unknown[]>
-	type TItem = T extends Array<infer F> ? F : never
 
-	interface Props extends ObjectProps<T> {
-		item?: Snippet<[{ 
-			value: TItem
+	export interface ArrayProps<T extends unknown[]> extends ObjectProps<T> {
+		item?: Snippet<[props: { 
+			value: T[number]
 			index: Readonly<number>
 			attributes: Record<PropertyKey, unknown>
 		}]>
 	}
+</script>
+
+<script lang='ts'>
+	
+	import Object from './SvelteObject.svelte'
+	import { type Snippet } from 'svelte'
+
+	type T = $$Generic<unknown[]>	
 
 	let objectComponent: Object<T>
 
-	let v = $state([] as unknown[]) as T
 	let {
+		default: defaultvalue,
 		value = $bindable(),
 		
 		name = '',
@@ -26,13 +29,7 @@
 		modified = $bindable(false),
 		attributes = $bindable({}),
 		...rest
-	}: Props = $props()
-
-	v = value!
-	v ??= [] as unknown[] as T
-
-	// svelte-ignore state_referenced_locally
-	value = v
+	}: ArrayProps<T> = $props()
 
 	function push(...v: T[number][]) { 
 		return value?.push(...v)
@@ -55,6 +52,7 @@
 <Object
 	bind:this={objectComponent}
 	{name}
+	default={defaultvalue as T ?? []}
 	bind:value={value as T}
 	bind:modified
 	bind:attributes
@@ -69,7 +67,7 @@
 	{#if item && Array.isArray(value)}
 		{#each value as valueItem, i (typeof valueItem === 'object' ? valueItem : i)}
 			{@render item?.({ 
-				get value() { return valueItem as TItem },
+				get value() { return valueItem as T[number] },
 				set value(newValue) { value![i] = newValue },
 				get index() { return i },
 				get attributes() { return attributes },
diff --git a/svelte-object/src/SvelteObject.svelte b/svelte-object/src/SvelteObject.svelte
index 5247cce..08b4cb0 100644
--- a/svelte-object/src/SvelteObject.svelte
+++ b/svelte-object/src/SvelteObject.svelte
@@ -1,11 +1,12 @@
 <script lang='ts' module>
 
 	export interface Props<T extends Record<PropertyKey, unknown> | unknown[]> {
-		children?: Snippet<[{
+		children?: Snippet<[props: {
 			value: T
 			attributes: Record<PropertyKey, unknown> 
 		}]>
 		name?: string | number
+		default?: T
 		value?: T
 
 		/** What the unmodified object is */
@@ -42,12 +43,11 @@
 
 	type T = $$Generic<SvelteObjectGeneric>
 
-	let v = $state({}) as T | undefined
-	
 	let {
 		children: slot,
 		
 		name = '',
+		default: defaultvalue,
 		value = $bindable(),
 
 		origin,
@@ -58,18 +58,16 @@
 		onSubmit
 	}: Props<T> = $props()
 	
-	v = value
-	v ??= {} as T
-	
-	// svelte-ignore state_referenced_locally
-	value = v
+	$effect.pre(() => {
+		value ??= defaultvalue ?? {} as T
+	})
 
-	let object = getContext('svelte-object') as typeof self
+	let parent = getContext('svelte-object') as typeof self
 	
 	function createAttributeProxy(): { value: Record<PropertyKey, unknown> } {
 		/* eslint-disable-next-line svelte/prefer-writable-derived */
 		let target = $state({
-			...object?.attributes,
+			...parent?.attributes,
 			...attributes 
 		})
 
@@ -83,7 +81,7 @@
 
 		$effect.pre(() => {
 			target = {
-				...object?.attributes,
+				...parent?.attributes,
 				...attributes 
 			}
 		})
@@ -103,8 +101,8 @@
 			if(key === undefined || key === null || key === '')
 				return
 			value![key as keyof T] = newValue as T[keyof T]
-			if(object && name !== '')
-				object.setValue(name, value)
+			if(parent && name !== '')
+				parent.setValue(name, value)
 		},
 
 		addValidator(fn: typeof validate) {
@@ -131,15 +129,15 @@
 			}
 		}
 		else
-			object?.submit()
+			parent?.submit()
 	}
 
-	if(object && (name !== undefined && name !== null) && name !== '') {
-		if(object?.value?.[name]) {
-			value = object?.value[name] as T
+	if(parent && (name !== undefined && name !== null) && name !== '') {
+		if(parent?.value?.[name]) {
+			value = parent?.value[name] as T
 		}
 		else {
-			object.value![name] = value
+			parent.value![name] = value
 		}
 	}
 
@@ -157,8 +155,8 @@
 
 	const setValue = (v: T) => Object.assign(value!, v)
 	$effect.pre(() => {
-		if(object?.value) {
-			setValue(object.value[name] as T)
+		if(parent?.value) {
+			setValue(parent.value[name] as T)
 		}
 	})
 
@@ -181,8 +179,8 @@
 		return valid
 	}
 
-	object?.addValidator?.(validate)
-	onDestroy(() => object?.removeValidator?.(validate))
+	parent?.addValidator?.(validate)
+	onDestroy(() => parent?.removeValidator?.(validate))
 
 </script>
 
diff --git a/svelte-object/src/SvelteValue.svelte b/svelte-object/src/SvelteValue.svelte
index 61b1331..e3370db 100644
--- a/svelte-object/src/SvelteValue.svelte
+++ b/svelte-object/src/SvelteValue.svelte
@@ -23,7 +23,7 @@
 		onValidate
 	}: Props<T> & { 
 		onValidate?: (validationEvent: ValidationEvent<T>) => void
-		children?: Snippet<[{ 
+		children?: Snippet<[props: { 
 			value: Props<T>['value']
 			blurValidation: (element: HTMLElement) => { destroy: () => void }
 			submitOnEnter: (element: HTMLElement) => { destroy: () => void }
diff --git a/svelte-object/stories/issues/overriding-states/Issue.stories.svelte b/svelte-object/stories/issues/overriding-states/Issue.stories.svelte
new file mode 100644
index 0000000..183edef
--- /dev/null
+++ b/svelte-object/stories/issues/overriding-states/Issue.stories.svelte
@@ -0,0 +1,48 @@
+<script module>
+	import 'tailwindcss'
+	import { defineMeta } from '@storybook/addon-svelte-csf'
+
+	import I from '../../../src/index.svelte'
+
+	const { Story } = defineMeta({})
+
+	let value = $state({})
+
+</script>
+
+<Story name='Reproduction'>
+	{#snippet template()}
+		<div class='p-4 border border-gray-300 rounded max-w-72 flex flex-col gap-4'>
+			<I.Object bind:value>
+				{#snippet children(object)}
+					<I.Value name='value'>
+						{#snippet children(value)}
+							<input class='border rounded px-4 py-2' bind:value={value.value} />
+						{/snippet}
+					</I.Value>
+					<I.Array name='array' value={[ 'value' ]}>
+						{#snippet children(array)}
+							{#each array.value as item, i (i)}
+								<input class='border rounded px-4 py-2' bind:value={array.value[i]} />
+							{/each}
+							<button
+								class='border px-2 py-2 bg-sky-500 hover:bg-sky-600 rounded text-white cursor-pointer'
+								onclick={() => array.value.push('')}
+							>
+								Add
+							</button>
+						{/snippet}
+					</I.Array>
+					<pre class='whitespace-pre-wrap'><code>{JSON.stringify(object.value, null, '\t')}</code></pre>
+				{/snippet}
+
+			</I.Object>
+		</div>
+		<button
+			class='border px-2 py-2 bg-gray-500 hover:bg-gray-600 w-72 mt-4 rounded text-white cursor-pointer'
+			onclick={() => value = {  }}
+		>
+			Override value
+		</button>
+	{/snippet}
+</Story>
\ No newline at end of file
diff --git a/svelte-object/stories/issues/overriding-states/README.mdx b/svelte-object/stories/issues/overriding-states/README.mdx
new file mode 100644
index 0000000..61d5446
--- /dev/null
+++ b/svelte-object/stories/issues/overriding-states/README.mdx
@@ -0,0 +1 @@
+When overriding the top-object value reactants such as lower-level arrays and objects stop working.
\ No newline at end of file
diff --git a/svelte-object/stories/tw.css b/svelte-object/stories/tw.css
new file mode 100644
index 0000000..f173aa4
--- /dev/null
+++ b/svelte-object/stories/tw.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
\ No newline at end of file

From 5f4b76fdb4967a72c5beb8f6535a0c6c619e26cf Mon Sep 17 00:00:00 2001
From: "Arthur @Refzlund" <arthur@refzlund.com>
Date: Thu, 3 Jul 2025 10:11:41 +0200
Subject: [PATCH 2/3] Use prescriptors

---
 svelte-object/src/SvelteObject.svelte | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/svelte-object/src/SvelteObject.svelte b/svelte-object/src/SvelteObject.svelte
index 08b4cb0..fac294b 100644
--- a/svelte-object/src/SvelteObject.svelte
+++ b/svelte-object/src/SvelteObject.svelte
@@ -105,6 +105,16 @@
 				parent.setValue(name, value)
 		},
 
+		addPrescriptors(
+			name: PropertyKey,
+			getter: () => unknown,
+			setter: (value: unknown) => void,
+		) {
+
+		},
+		
+		prescriptors: Record<PropertyKey, { get: () => unknown, set: (value: unknown) => void }> = {},
+
 		addValidator(fn: typeof validate) {
 			validators.push(fn)
 		},

From e8b7007b799720d3d0a4c205f7b2407091ffc029 Mon Sep 17 00:00:00 2001
From: "Arthur @Refzlund" <arthur@refzlund.com>
Date: Thu, 3 Jul 2025 13:36:56 +0200
Subject: [PATCH 3/3] fix

---
 .changeset/tall-frogs-sleep.md        |  5 +++
 svelte-object/src/SvelteObject.svelte | 62 ++++++++++++++++-----------
 svelte-object/src/SvelteValue.svelte  | 13 +-----
 3 files changed, 42 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/tall-frogs-sleep.md

diff --git a/.changeset/tall-frogs-sleep.md b/.changeset/tall-frogs-sleep.md
new file mode 100644
index 0000000..5cc2bab
--- /dev/null
+++ b/.changeset/tall-frogs-sleep.md
@@ -0,0 +1,5 @@
+---
+"svelte-object": patch
+---
+
+fix: overriding parent values breaks reactivity
diff --git a/svelte-object/src/SvelteObject.svelte b/svelte-object/src/SvelteObject.svelte
index fac294b..2d5fed2 100644
--- a/svelte-object/src/SvelteObject.svelte
+++ b/svelte-object/src/SvelteObject.svelte
@@ -19,9 +19,15 @@
 		onSubmit?: (value: T) => void
 	}
 
+	type Prescriptor = { name: PropertyKey, get: () => unknown, set: (value: unknown) => void }
+
 	type SvelteObjectGeneric = Record<PropertyKey, unknown> | unknown[]
 	type SvelteObjectContext<T extends SvelteObjectGeneric = SvelteObjectGeneric> = {
-		setValue(key: string | number, newValue: unknown): void
+		addPrescriptor: (
+			name: Prescriptor['name'],
+			getter: Prescriptor['get'],
+			setter: Prescriptor['set']
+		) => void
 		addValidator(fn: (trigger?: ValidationType) => boolean): void
 		removeValidator(fn: (trigger?: ValidationType) => boolean): void
 		submit: () => void
@@ -96,25 +102,41 @@
 
 	let validators = [] as (typeof validate)[]
 
-	const self = {
-		setValue(key: string | number, newValue: unknown) {
-			if(key === undefined || key === null || key === '')
-				return
-			value![key as keyof T] = newValue as T[keyof T]
-			if(parent && name !== '')
-				parent.setValue(name, value)
-		},
+	const prescriptors: Prescriptor[] = $state([])
 
-		addPrescriptors(
+	$effect.pre(() => {
+		for(const prescriptor of prescriptors) {
+			$effect.pre(() => {
+				prescriptor.set(value?.[prescriptor.name])
+			})
+			$effect.pre(() => {
+				const itemValue = prescriptor.get()
+				value ??= {} as T
+				prescriptor.name
+				untrack(() => {
+					value ??= {} as T
+					value[prescriptor.name] = itemValue
+				})
+			})
+		}
+	})
+
+	const self = {
+		addPrescriptor(
 			name: PropertyKey,
 			getter: () => unknown,
 			setter: (value: unknown) => void,
 		) {
+			const prescriptor = { name, get: getter, set: setter }
 
-		},
-		
-		prescriptors: Record<PropertyKey, { get: () => unknown, set: (value: unknown) => void }> = {},
+			value ??= {} as T
+			value[prescriptor.name] = getter()
 
+			prescriptors.push(prescriptor)
+			return () => {
+				prescriptors.splice(prescriptors.indexOf(prescriptor), 1)
+			}
+		},
 		addValidator(fn: typeof validate) {
 			validators.push(fn)
 		},
@@ -143,12 +165,7 @@
 	}
 
 	if(parent && (name !== undefined && name !== null) && name !== '') {
-		if(parent?.value?.[name]) {
-			value = parent?.value[name] as T
-		}
-		else {
-			parent.value![name] = value
-		}
+		parent.addPrescriptor(name, () => value, v => value = v as T)
 	}
 
 	let checkingIsModified = false
@@ -163,13 +180,6 @@
 		}, 125)
 	}
 
-	const setValue = (v: T) => Object.assign(value!, v)
-	$effect.pre(() => {
-		if(parent?.value) {
-			setValue(parent.value[name] as T)
-		}
-	})
-
 	$effect(() => {
 		$state.snapshot(value)
 		$state.snapshot(origin)
diff --git a/svelte-object/src/SvelteValue.svelte b/svelte-object/src/SvelteValue.svelte
index e3370db..1670799 100644
--- a/svelte-object/src/SvelteValue.svelte
+++ b/svelte-object/src/SvelteValue.svelte
@@ -122,20 +122,10 @@
 	object?.addValidator(validate)
 	onDestroy(() => object?.removeValidator(validate))
 
-	const setValue = (v: T) => value = v
-
 	if(object && (name !== undefined && name !== null) && name !== '') {
-		const val = object.value![name!]
-		if(val !== undefined)
-			setValue(val)
+		object.addPrescriptor(name, () => value, v => value = v as T)
 	}
 	
-	$effect(() => {
-		if(object?.value && name !== '') {
-			setValue(object.value[name!])
-		}
-	})
-	
 	$effect.pre(() => {
 		value
 
@@ -146,7 +136,6 @@
 				warning = undefined
 			validate('change')
 		})
-		untrack(() => object?.setValue(name, value))
 	})
 	
 </script>