fix: @debug does not work with proxied-state (#13690)

* fix: @debug must use $state.snapshot() on value

* changeset

* add test

---------

Co-authored-by: Dominic Gannaway <[email protected]>

Author: adiguba

.changeset/sharp-tigers-notice.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: @debug does not work with proxied-state

packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js

@@ -9,9 +9,15 @@ import * as b from '../../../../utils/builders.js';
  */
 export function DebugTag(node, context) {
 	const object = b.object(
-		node.identifiers.map((identifier) =>
-			b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier)))
-		)
+		node.identifiers.map((identifier) => {
+			const visited = b.call('$.snapshot', /** @type {Expression} */ (context.visit(identifier)));
+
+			return b.prop(
+				'init',
+				identifier,
+				context.state.analysis.runes ? visited : b.call('$.untrack', b.thunk(visited))
+			);
+		})
 	);
 
 	const call = b.call('console.log', object);

packages/svelte/tests/runtime-runes/samples/debug-tag-object/_config.js

@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target, logs }) {
+		const b1 = target.querySelector('button');
+		b1?.click();
+		flushSync();
+		b1?.click();
+		flushSync();
+
+		assert.deepEqual(logs, [
+			{ count: { current: 0 } },
+			{ count: { current: 1 } },
+			{ count: { current: 2 } }
+		]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/debug-tag-object/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	let count = $state({ current: 0 });
+</script>
+
+{@debug count}
+
+<button onclick={()=> count.current++}>+</button>