fix: widen ownership when sub state is assigned to new state

.changeset/weak-frogs-bow.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: widen ownership when sub state is assigned to new state

packages/svelte/src/internal/client/dev/ownership.js

@@ -127,8 +127,8 @@ export function add_owner(object, owner, global = false) {
 }
 
 /**
- * @param {import('#client').ProxyMetadata | null} from
- * @param {import('#client').ProxyMetadata} to
+ * @param {import('#client').ProxyMetadata<any> | null} from
+ * @param {import('#client').ProxyMetadata<any>} to
  */
 export function widen_ownership(from, to) {
 	if (to.owners === null) {

packages/svelte/src/internal/client/proxy.js

@@ -38,6 +38,9 @@ export function proxy(value, immutable = true, parent = null) {
 			// someone copied the state symbol using `Reflect.ownKeys(...)`
 			if (metadata.t === value || metadata.p === value) {
 				if (DEV) {
+					// Since original parent relationship gets lost, we need to copy over ancestor owners
+					// into current metadata. The object might still exist on both, so we need to widen it.
+					widen_ownership(metadata, metadata);
 					metadata.parent = parent;
 				}
 

packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-7/Child.svelte

@@ -0,0 +1,10 @@
+<script>
+	let { item } = $props();
+
+	function onclick() {
+		item.name = `${item.name} edited`
+	}
+</script>
+
+<div>{item?.name}</div>
+<button {onclick}>Then click here</button>

packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-7/_config.js

@@ -0,0 +1,41 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+/** @type {typeof console.warn} */
+let warn;
+
+/** @type {any[]} */
+let warnings = [];
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	before_test: () => {
+		warn = console.warn;
+
+		console.warn = (...args) => {
+			warnings.push(...args);
+		};
+	},
+
+	after_test: () => {
+		console.warn = warn;
+		warnings = [];
+	},
+
+	async test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		btn1.click();
+		await tick();
+
+		assert.deepEqual(warnings.length, 0);
+
+		btn2.click();
+		await tick();
+
+		assert.deepEqual(warnings.length, 1);
+	}
+});

packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-7/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import Child from './Child.svelte';
+
+	let items = $state([{ id: "test", name: "this is a test"}, { id:"test2", name: "this is a second test"}]);
+	let found = $state();
+
+	function onclick() {
+		found = items.find(c => c.id === 'test2');
+	}
+</script>
+
+<button {onclick}>First click here</button>
+<Child item={found} />