@poveste/plugin-vue 0.5.3 → 0.6.1

package/dist/bundled/client/app/MountStory.js

@@ -4,15 +4,22 @@ import { reactive as s } from "vue";
 //#region src/client/app/MountStory.ts
 var c = t({
 	name: "MountStory",
-	props: { story: {
-		type: Object,
-		required: !0
-	} },
+	props: {
+		story: {
+			type: Object,
+			required: !0
+		},
+		targetVariantId: {
+			type: String,
+			default: null
+		}
+	},
 	setup(t) {
 		let n = a(), c = s({
 			mode: "mount",
 			slotName: "default",
 			currentVariant: null,
+			targetVariantId: t.targetVariantId,
 			externalState: null,
 			nextVariantIndex: { value: 0 }
 		}), l;
@@ -34,6 +41,8 @@ var c = t({
 			await u();
 		}), o(() => t.story.variants, () => {
 			l?.forceUpdate();
+		}), o(() => t.targetVariantId, (e) => {
+			c.targetVariantId = e;
 		}), i(() => {
 			d();
 		}), { el: n };

package/dist/bundled/client/app/Story.js

@@ -59,29 +59,46 @@ var f = i({
 			updateStory: _
 		};
 		function v() {
-			let e = 0, r = (a) => {
-				let s = [];
-				for (let c of a) {
-					if (c.type?.__povesteType === "variant") {
-						let r = o.story.variants[e];
-						if (e++, !r) continue;
-						let a = { variant: r };
-						!c.props?.initState && !c.props?.["init-state"] && (a.initState = t.initState);
-						for (let e in i.proxy.$attrs) c.props?.[e] === void 0 && (a[e] = i.proxy.$attrs[e]);
-						for (let e in o.story) !d.includes(e) && c.props?.[e] === void 0 && (a[e] = o.story[e]);
-						s.push(n(c, a));
+			let e = 0, r = f?.targetVariantId ? o.story.variants.findIndex((e) => e.id === f.targetVariantId) : -1, a = (s) => {
+				let c = [];
+				for (let l of s) {
+					if (l.type?.__povesteType === "variant") {
+						let a = o.story.variants[e];
+						if (e++, !a || r !== -1 && e - 1 !== r) continue;
+						let s = { variant: a };
+						l.key ?? (s.key = a.id), !l.props?.initState && !l.props?.["init-state"] && (s.initState = t.initState);
+						for (let e in i.proxy.$attrs) l.props?.[e] === void 0 && (s[e] = i.proxy.$attrs[e]);
+						for (let e in o.story) !d.includes(e) && l.props?.[e] === void 0 && (s[e] = o.story[e]);
+						c.push(n(l, s));
 						continue;
 					}
-					Array.isArray(c.children) && (c.children = r(c.children)), s.push(c);
+					Array.isArray(l.children) && (l.children = a(l.children)), c.push(l);
 				}
-				return s;
+				return c;
 			};
-			return r(i.proxy.$slots.default?.() ?? []);
+			return a(i.proxy.$slots.default?.() ?? []);
 		}
 		function y() {
 			f.nextVariantIndex.value = 0;
 			let e = { state: f.externalState }, t = [];
-			return f.slotName === "controls" && t.push(...i.proxy.$slots.controls?.(e) ?? []), (f.slotName === "default" || o.story.meta?.hasVariantChildComponents) && t.push(...i.proxy.$slots.default?.(e) ?? []), t;
+			if (f.slotName === "controls" && t.push(...i.proxy.$slots.controls?.(e) ?? []), (f.slotName === "default" || o.story.meta?.hasVariantChildComponents) && t.push(...i.proxy.$slots.default?.(e) ?? []), f.slotName === "default" && f.currentVariant && !o.story.meta?.hasVariantChildComponents) {
+				let e = o.story.variants.findIndex((e) => e.id === f.currentVariant.id);
+				if (e !== -1) {
+					let n = 0, r = !1, i = (t) => {
+						let a = [];
+						for (let o of t) {
+							if (o?.type?.__povesteType === "variant") {
+								n === e && (a.push(o), r = !0), n++;
+								continue;
+							}
+							Array.isArray(o?.children) && o.children.length && (o.children = i(o.children)), a.push(o);
+						}
+						return a;
+					}, a = i(t);
+					if (r) return f.nextVariantIndex.value = e, a;
+				}
+			}
+			return t;
 		}
 	},
 	render() {

package/dist/bundled/client/app/util.js

@@ -1,73 +1,65 @@
 import { isRef as e, unref as t, watch as n } from "@poveste/vendors/vue";
 import { isRef as r, unref as i, watch as a } from "vue";
-import { applyState as o } from "@poveste/shared";
+import { applyState as o, createStateBaseline as s } from "@poveste/shared";
 //#region src/client/app/util.ts
-var s = (e) => typeof e == "object" && !!e;
-function c(e, t = /* @__PURE__ */ new WeakMap()) {
+var c = (e) => typeof e == "object" && !!e;
+function l(e, t = /* @__PURE__ */ new WeakMap()) {
 	let n = r(e) ? i(e) : e;
 	if (typeof n == "symbol") return n.toString();
-	if (!s(n)) return n;
+	if (!c(n)) return n;
 	if (t.has(n)) return t.get(n);
 	if (Array.isArray(n)) {
 		let e = [];
-		return t.set(n, e), e.push(...n.map((e) => c(e, t))), e;
+		return t.set(n, e), e.push(...n.map((e) => l(e, t))), e;
 	}
 	{
 		let e = {};
-		return t.set(n, e), l(n, e, t), e;
+		return t.set(n, e), u(n, e, t), e;
 	}
 }
-function l(e, t, n = /* @__PURE__ */ new WeakMap()) {
+function u(e, t, n = /* @__PURE__ */ new WeakMap()) {
 	Object.keys(e).forEach((r) => {
-		t[r] = c(e[r], n);
+		t[r] = l(e[r], n);
 	});
 }
-function u(n, r = /* @__PURE__ */ new WeakMap()) {
+function d(n, r = /* @__PURE__ */ new WeakMap()) {
 	let i = e(n) ? t(n) : n;
 	if (typeof i == "symbol") return i.toString();
-	if (!s(i)) return i;
+	if (!c(i)) return i;
 	if (r.has(i)) return r.get(i);
 	if (Array.isArray(i)) {
 		let e = [];
-		return r.set(i, e), e.push(...i.map((e) => u(e, r))), e;
+		return r.set(i, e), e.push(...i.map((e) => d(e, r))), e;
 	}
 	{
 		let e = {};
-		return r.set(i, e), d(i, e, r), e;
+		return r.set(i, e), f(i, e, r), e;
 	}
 }
-function d(e, t, n = /* @__PURE__ */ new WeakMap()) {
+function f(e, t, n = /* @__PURE__ */ new WeakMap()) {
 	Object.keys(e).forEach((r) => {
-		t[r] = c(e[r], n);
+		t[r] = l(e[r], n);
 	});
 }
-function f(e, t) {
-	let r = !1, i = n(() => e, (e) => {
-		if (e != null) {
-			if (r) {
-				r = !1;
-				return;
-			}
-			r = o(t, u(e));
-		}
+function p(e, t) {
+	let r = s(), i = n(() => e, (e) => {
+		if (e == null) return;
+		let n = r.take(d(e));
+		n && o(t, n);
 	}, {
 		deep: !0,
 		immediate: !0
-	}), s = a(() => t, (t) => {
-		if (t != null) {
-			if (r) {
-				r = !1;
-				return;
-			}
-			r = o(e, c(t));
-		}
+	}), c = a(() => t, (t) => {
+		if (t == null) return;
+		let n = r.take(l(t));
+		n && o(e, n);
 	}, {
 		deep: !0,
 		immediate: !0
 	});
 	return { stop() {
-		i(), s();
+		i(), c();
 	} };
 }
 //#endregion
-export { u as _toRawDeep, f as syncStateBundledAndExternal, c as toRawDeep };
+export { d as _toRawDeep, p as syncStateBundledAndExternal, l as toRawDeep };

package/dist/client/app/MountStory.d.ts

@@ -5,6 +5,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: _PropType<Story>;
         required: true;
     };
+    targetVariantId: {
+        type: StringConstructor;
+        default: any;
+    };
 }>, {
     el: import("vue").Ref<HTMLDivElement, HTMLDivElement>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -12,5 +16,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: _PropType<Story>;
         required: true;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    targetVariantId: {
+        type: StringConstructor;
+        default: any;
+    };
+}>> & Readonly<{}>, {
+    targetVariantId: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/client/app/render-context.d.ts

@@ -3,6 +3,12 @@ export interface PreviewRenderContext {
     mode: 'mount' | 'render';
     slotName: string;
     currentVariant: Variant | null;
+    /**
+     * In a sandbox realm: the one variant this realm exists to serve, so the
+     * mount pass can skip every other variant's component (#197). Null in the
+     * app realm, where the story view needs all of them mounted.
+     */
+    targetVariantId?: string | null;
     externalState: Variant['state'] | null;
     nextVariantIndex: {
         value: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/plugin-vue",
   "type": "module",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "description": "Poveste plugin for Vue.js support",
   "author": {
     "name": "Sorin Gitlan"
@@ -44,16 +44,16 @@
   "types": "dist/index.node.d.ts",
   "peerDependencies": {
     "vue": "^3.5.26",
-    "poveste": "^0.5.3"
+    "poveste": "^0.6.1"
   },
   "dependencies": {
     "change-case": "^5.4.4",
     "globby": "^14.0.2",
     "launch-editor": "^2.9.1",
     "pathe": "^1.1.2",
-    "@poveste/controls": "^0.5.3",
-    "@poveste/shared": "^0.5.3",
-    "@poveste/vendors": "^0.5.3"
+    "@poveste/controls": "^0.6.1",
+    "@poveste/shared": "^0.6.1",
+    "@poveste/vendors": "^0.6.1"
   },
   "devDependencies": {
     "@types/node": "^22.10.1",
@@ -62,7 +62,7 @@
     "vite": "^8.2.0",
     "vitest": "^4.1.10",
     "vue": "^3.5.26",
-    "poveste": "0.5.3"
+    "poveste": "0.6.1"
   },
   "scripts": {
     "build": "rimraf dist && vite build && tsc -d -P tsconfig.build.json && pnpm run build:types",

package/src/client/app/MountStory.ts

@@ -21,6 +21,11 @@ export default _defineComponent({
       type: Object as _PropType<Story>,
       required: true,
     },
+
+    targetVariantId: {
+      type: String,
+      default: null,
+    },
   },
 
   setup(props) {
@@ -29,6 +34,7 @@ export default _defineComponent({
       mode: 'mount' as const,
       slotName: 'default',
       currentVariant: null,
+      targetVariantId: props.targetVariantId,
       externalState: null,
       nextVariantIndex: {
         value: 0,
@@ -66,6 +72,14 @@ export default _defineComponent({
       host?.forceUpdate()
     })
 
+    // A retargeted realm (#240) serves another variant of the same story: the
+    // mount pass has to run that variant's setup — its `initState` above all —
+    // which it skipped as a non-target. The context is reactive, so the story
+    // re-renders its mount pass on the change.
+    _watch(() => props.targetVariantId, (id) => {
+      renderContext.targetVariantId = id
+    })
+
     _onUnmounted(() => {
       unmountStory()
     })

package/src/client/app/Story.ts

@@ -115,6 +115,21 @@ export default defineComponent({
     function renderMountStory() {
       let index = 0
 
+      // A sandbox exists to serve one variant, but this pass used to mount a
+      // Variant component per <Variant> — 1000 setups, state syncs and
+      // auto-props walks per grid cell to render one button (#197). Skip the
+      // rest; variants resolve positionally, so `index` still advances past
+      // them. Variants that live in child components never reach this walk,
+      // so they mount as they always did.
+      //
+      // Not gated on `hasVariantChildComponents`: every explicit <Variant> sets
+      // that as it registers, so the gate held for the first render only and
+      // turned the re-render a retarget needs into a full mount of every
+      // sibling.
+      const targetIndex = renderContext?.targetVariantId
+        ? attrs.story.variants.findIndex(v => v.id === renderContext.targetVariantId)
+        : -1
+
       const applyAttrs = (vnodes: VNode[]) => {
         const result: VNode[] = []
 
@@ -128,10 +143,22 @@ export default defineComponent({
               continue
             }
 
+            if (targetIndex !== -1 && index - 1 !== targetIndex) {
+              continue
+            }
+
             const nextProps: any = {
               variant,
             }
 
+            // Keyed by variant: a retarget (#240) moves `targetIndex`, and an
+            // unkeyed walk would patch the old target's instance into the new
+            // one's props instead of mounting it — setup, and with it
+            // `initState`, has to run for the variant this realm now serves.
+            if (vnode.key == null) {
+              nextProps.key = variant.id
+            }
+
             if (!vnode.props?.initState && !vnode.props?.['init-state']) {
               nextProps.initState = props.initState
             }
@@ -182,6 +209,48 @@ export default defineComponent({
         children.push(...(vm.proxy.$slots.default?.(slotProps) ?? []))
       }
 
+      // Same story as the mount pass above: every Variant component here runs
+      // its full setup and then all but the current one render null (#197).
+      // Keep only the current one, and seed the positional index so it still
+      // resolves to the right variant data. Filtering only the default slot —
+      // the controls slot carries controls, and stories with variants in child
+      // components are invisible to a vnode walk.
+      if (
+        renderContext.slotName === 'default'
+        && renderContext.currentVariant
+        && !attrs.story.meta?.hasVariantChildComponents
+      ) {
+        const targetIndex = attrs.story.variants.findIndex(v => v.id === renderContext.currentVariant.id)
+        if (targetIndex !== -1) {
+          let seen = 0
+          let kept = false
+          const keepTargetVariant = (vnodes: VNode[]) => {
+            const result: VNode[] = []
+            for (const vnode of vnodes) {
+              // @ts-expect-error custom option
+              if (vnode?.type?.__povesteType === 'variant') {
+                if (seen === targetIndex) {
+                  result.push(vnode)
+                  kept = true
+                }
+                seen++
+                continue
+              }
+              if (Array.isArray(vnode?.children) && vnode.children.length) {
+                vnode.children = keepTargetVariant(vnode.children as VNode[])
+              }
+              result.push(vnode)
+            }
+            return result
+          }
+          const filtered = keepTargetVariant(children)
+          if (kept) {
+            renderContext.nextVariantIndex.value = targetIndex
+            return filtered
+          }
+        }
+      }
+
       return children
     }
   },

package/src/client/app/__tests__/state-sync.spec.ts

@@ -1,6 +1,6 @@
 import { nextTick as bundledNextTick, reactive as bundledReactive } from '@poveste/vendors/vue'
 import { describe, expect, it } from 'vitest'
-import { nextTick, reactive } from 'vue'
+import { nextTick, reactive, watch } from 'vue'
 import { syncStateBundledAndExternal } from '../util.js'
 
 // These run against both Vue copies for real: `@poveste/vendors/vue` is the one
@@ -139,6 +139,193 @@ describe('syncStateBundledAndExternal', () => {
     sync.stop()
   })
 
+  // The #96 regression, and the reason the `syncing` flag is gone rather than
+  // repaired. Both watchers mirrored the whole of their side, so the second one
+  // to fire carried its own edit *and* its copy of the key the first side had
+  // just changed — one edit stale, because the mirror had not reached it yet.
+  // Last writer won, and it won across every key rather than just its own.
+  it('keeps both edits when the two sides change in the same tick', async () => {
+    const { bundled, external, sync } = setup({ a: 0, b: 0 })
+    await settle()
+
+    external.a = 1
+    bundled.b = 1
+    await settle()
+
+    expect({ a: external.a, b: external.b }).toEqual({ a: 1, b: 1 })
+    expect({ a: bundled.a, b: bundled.b }).toEqual({ a: 1, b: 1 })
+
+    sync.stop()
+  })
+
+  it('keeps both edits when the two sides change in the same tick, bundled first', async () => {
+    // Which watcher happens to flush first decided who lost, so pin both orders.
+    const { bundled, external, sync } = setup({ a: 0, b: 0 })
+    await settle()
+
+    bundled.b = 1
+    external.a = 1
+    await settle()
+
+    expect({ a: external.a, b: external.b }).toEqual({ a: 1, b: 1 })
+    expect({ a: bundled.a, b: bundled.b }).toEqual({ a: 1, b: 1 })
+
+    sync.stop()
+  })
+
+  it('keeps both edits when they land in different keys of the same object', async () => {
+    // The nested form: two entries of one map, which whole-object mirroring
+    // could not separate even in principle.
+    const { bundled, external, sync } = setup({ items: { a: 0, b: 0 } })
+    await settle()
+
+    external.items.a = 1
+    bundled.items.b = 1
+    await settle()
+
+    expect(external.items).toEqual({ a: 1, b: 1 })
+    expect(bundled.items).toEqual({ a: 1, b: 1 })
+
+    sync.stop()
+  })
+
+  it('keeps a concurrent edit made while the other side is mid-flight', async () => {
+    // Not the same tick, and it passed before the fix too — kept because it
+    // pins the interleaving the flag was most delicate about: the far side edits
+    // after a mirror has landed but before its echo has been observed.
+    const { bundled, external, sync } = setup({ a: 0, b: 0 })
+    await settle()
+
+    external.a = 1
+    await nextTick()
+    bundled.b = 1
+    await settle()
+
+    expect({ a: external.a, b: external.b }).toEqual({ a: 1, b: 1 })
+    expect({ a: bundled.a, b: bundled.b }).toEqual({ a: 1, b: 1 })
+
+    sync.stop()
+  })
+
+  it('mirrors an edit made to a key the other side removed', async () => {
+    // A removal cannot cross, so the two sides disagree about that key from then
+    // on. The baseline must not mistake that standing disagreement for a change
+    // and start replaying it — nor let it mask the next real edit.
+    const { bundled, external, sync } = setup({ count: 0, gone: 1 })
+    await settle()
+
+    delete external.gone
+    await settle()
+
+    bundled.count = 5
+    await settle()
+    expect(external.count).toBe(5)
+
+    external.count = 6
+    await settle()
+    expect(bundled.count).toBe(6)
+
+    sync.stop()
+  })
+
+  it('does not let a mirrored array alias the baseline', async () => {
+    // An array always crosses whole — `applyState` assigns it rather than
+    // merging — so the receiving side ends up holding the very object the
+    // baseline recorded. Reactive writes go through to the raw target, so
+    // without a copy the next `push` lands in the baseline as well, and the sync
+    // reads the edit back as already agreed and drops it.
+    const { bundled, external, sync } = setup({ list: [1, 2] })
+    await settle()
+
+    external.list = [1, 2, 3]
+    await settle()
+    expect(bundled.list).toEqual([1, 2, 3])
+
+    bundled.list.push(4)
+    await settle()
+    expect(external.list).toEqual([1, 2, 3, 4])
+
+    sync.stop()
+  })
+
+  it('does not let a mirrored object alias the baseline', async () => {
+    // Same hazard by the other route into the wholesale branch: a key the far
+    // side does not have yet is assigned rather than merged.
+    const { bundled, external, sync } = setup({ count: 0 })
+    await settle()
+
+    external.added = { a: 1 }
+    await settle()
+    expect(bundled.added).toEqual({ a: 1 })
+
+    bundled.added.a = 2
+    await settle()
+    expect(external.added.a).toBe(2)
+
+    sync.stop()
+  })
+
+  it('mirrors a write the story makes in reaction to a control edit', async () => {
+    // The realistic form of #96, and the one a book actually hits: a story that
+    // derives one state key from another. Editing `a` in the controls panel is
+    // one edit, but the story answering it with `b` is a second, and it lands
+    // while the first is still in flight — so the two sides are changing at the
+    // same time without anyone having to do anything unusual.
+    //
+    // The story's watcher is installed before the sync here, and that ordering
+    // is the whole of it: Vue flushes by creation order, so the story's write
+    // lands before the sync watcher runs and rides in on the very firing the
+    // flag was waiting to discard. Install the sync first and the same code
+    // survived, which is why this never showed up as a reliable bug.
+    //
+    // Both orders occur. `Variant` attaches its sync in `setup()`, before the
+    // story mounts; `RenderStory` tears the sync down and re-attaches it when
+    // the variant changes, by which time the story's watchers are long since
+    // registered. A flag whose correctness turns on which of those you got is
+    // not correct, it is lucky.
+    const bundled = bundledReactive({ a: 0, b: 0 })
+    const external = reactive({ a: 0, b: 0 })
+
+    const stop = watch(() => external.a, (value) => {
+      external.b = value * 2
+    })
+    const sync = syncStateBundledAndExternal(bundled, external)
+    await settle()
+
+    bundled.a = 1
+    await settle()
+
+    expect(external.b).toBe(2)
+    expect(bundled.b).toBe(2)
+
+    stop()
+    sync.stop()
+  })
+
+  it('mirrors only what moved without taking the neighbouring keys with it', async () => {
+    // Sending less than the whole object is what stops the two sides clobbering
+    // each other, and it is only safe as far as `applyState` merges — one level,
+    // and never for an `_h` key, which it replaces outright for the sandbox's
+    // sake. Narrow past either and the subset lands *as* the object.
+    //
+    // Every Vue story carries `_hPropState`, so getting that wrong empties the
+    // auto-props of every story in the book rather than failing somewhere quiet.
+    const initial = { _hPropState: { a: 1, b: 2 }, deep: { inner: { x: 1, y: 2 } } }
+    const bundled = bundledReactive(structuredClone(initial))
+    const external = reactive(structuredClone(initial))
+    const sync = syncStateBundledAndExternal(bundled, external)
+    await settle()
+
+    external._hPropState.a = 9
+    external.deep.inner.x = 9
+    await settle()
+
+    expect(bundled._hPropState).toEqual({ a: 9, b: 2 })
+    expect(bundled.deep.inner).toEqual({ x: 9, y: 2 })
+
+    sync.stop()
+  })
+
   it('mirrors many edits in a row without falling behind', async () => {
     const { bundled, external, sync } = setup({ count: 0 })
     await settle()

package/src/client/app/render-context.ts

@@ -6,6 +6,12 @@ export interface PreviewRenderContext {
   mode: 'mount' | 'render'
   slotName: string
   currentVariant: Variant | null
+  /**
+   * In a sandbox realm: the one variant this realm exists to serve, so the
+   * mount pass can skip every other variant's component (#197). Null in the
+   * app realm, where the story view needs all of them mounted.
+   */
+  targetVariantId?: string | null
   externalState: Variant['state'] | null
   nextVariantIndex: {
     value: number

package/src/client/app/util.ts

@@ -1,4 +1,4 @@
-import { applyState } from '@poveste/shared'
+import { applyState, createStateBaseline } from '@poveste/shared'
 import {
   isRef as _isRef,
   unref as _unref,
@@ -90,33 +90,27 @@ function _toRawObject(obj: Record<any, any>, target: Record<any, any>, seen = ne
  * @param externalState Reactive state created with the external/user Vue
  */
 export function syncStateBundledAndExternal(bundledState, externalState) {
-  // `syncing` means "the next firing on the other side is the echo of a write I
-  // just made, ignore it". The subtlety, and the whole of #95, is that it is
-  // only safe to set when a firing is actually coming.
+  // Each side is asked only for what *it* changed, and that is all that crosses.
   //
-  // It used to be set unconditionally, on the assumption that every apply
-  // provokes exactly one counterpart firing. Nothing enforced that. A change
-  // `applyState` cannot express — a removed key is the simplest — provokes none,
-  // and the flag then sat set through the next genuine edit and swallowed it.
+  // Both watchers used to mirror the whole of their side. That works while the
+  // edits take turns, and coordinating the echoes needed a shared `syncing`
+  // boolean that had to be right about whether a firing was coming — the whole
+  // of #95. It stops working the moment both sides change in the same tick: the
+  // second watcher to fire carries not just its own edit but its stale copy of
+  // the other side's key, and writes the first edit back out from under it. The
+  // edit was not delayed, it was gone, from both sides (#96).
   //
-  // What held the assumption up in practice was an accident: `applyState`
-  // rebuilt every object it copied, so any state carrying an object or an array
-  // triggered the far side whether or not a value had moved. Vue stories always
-  // carry `_hPropState` and `_hPropDefs`, so in this plugin it never actually
-  // bit — which is exactly why the issue had no repro, and why making
-  // `applyState` skip no-op writes had to come with this change rather than
-  // before it.
-  //
-  // `applyState` now reports whether it wrote, and that is what the flag holds.
-  let syncing = false
+  // A baseline of the last agreed state answers both. It is what the far side is
+  // known to hold, so diffing against it yields this side's own edits and never
+  // the far side's — there is nothing stale left to send. And an echo diffs to
+  // nothing, so no flag is needed to recognise one; the boolean is gone, and
+  // with it the question of what happens when the alternation slips.
+  const baseline = createStateBaseline()
 
   const _stop = _watch(() => bundledState, (value) => {
     if (value == null) return
-    if (syncing) {
-      syncing = false
-      return
-    }
-    syncing = applyState(externalState, _toRawDeep(value))
+    const changes = baseline.take(_toRawDeep(value))
+    if (changes) applyState(externalState, changes)
   }, {
     deep: true,
     immediate: true,
@@ -124,11 +118,8 @@ export function syncStateBundledAndExternal(bundledState, externalState) {
 
   const stop = watch(() => externalState, (value) => {
     if (value == null) return
-    if (syncing) {
-      syncing = false
-      return
-    }
-    syncing = applyState(bundledState, toRawDeep(value))
+    const changes = baseline.take(toRawDeep(value))
+    if (changes) applyState(bundledState, changes)
   }, {
     deep: true,
     immediate: true,