@poveste/controls 0.5.3 → 0.6.0

package/dist/components/json/serialize.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `JSON.stringify` for values that were never promised to be JSON.
+ *
+ * State reaches this control straight out of a story's own scope, so it holds
+ * whatever a `<script setup>` holds: a function, a DOM node, an object that
+ * refers back to itself. `JSON.stringify` throws on the cycle, and it throws
+ * from inside a lifecycle hook — which takes the rest of that flush with it, so
+ * the panel and the toolbar beside it never mount. A marker in the editor is
+ * the smaller loss, and it is what the story events pane already does.
+ *
+ * Nodes and windows are named rather than walked. Both are cyclic, so the guard
+ * below would terminate on them, but only after walking a few thousand
+ * properties of `window` on every keystroke.
+ */
+export declare function stringifyState(value: unknown, space?: number): string;

package/dist/index.es.css

@@ -1,2 +1,2 @@
-.bind-col-size{grid-template-columns:repeat(auto-fill, minmax(var(--poveste-col-size), 1fr))}.__poveste-json-code[data-v-8570567f] .cm-editor{min-width:280px;height:100%}.v-popper{line-height:0}.v-popper--theme-dropdown .v-popper__inner:where(.ptw-dark,.ptw-dark *){border-color:var(--color-gray-850,#1f1f21);background-color:var(--color-gray-700,var(--color-zinc-700));color:var(--color-gray-100,var(--color-zinc-100))}.v-popper--theme-dropdown .v-popper__arrow-inner:where(.ptw-dark,.ptw-dark *){border-color:var(--color-gray-700,var(--color-zinc-700))}.v-popper--theme-dropdown .v-popper__arrow-outer:where(.ptw-dark,.ptw-dark *){border-color:var(--color-gray-850,#1f1f21)}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transition:transform .15s cubic-bezier(0,1,.5,1);transform:none}.v-popper__popper:focus-visible{outline:none}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}.range-input::-webkit-slider-thumb{height:calc(var(--spacing,.25rem) * 3);width:calc(var(--spacing,.25rem) * 3);appearance:none;border-style:var(--tw-border-style);--tw-border-style:solid;border:1px solid #00000040;border-radius:2147483647px}@supports (color:color-mix(in lab, red, red)){.range-input::-webkit-slider-thumb{border-color:color-mix(in oklab, var(--color-black,#000) 25%, transparent)}}.range-input::-webkit-slider-thumb{background-color:var(--color-white,#fff)}.range-input::-webkit-slider-thumb:where(.ptw-dark,.ptw-dark *){border-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.range-input::-webkit-slider-thumb:where(.ptw-dark,.ptw-dark *){border-color:color-mix(in oklab, var(--color-white,#fff) 25%, transparent)}}.range-input::-webkit-slider-thumb:where(.ptw-dark,.ptw-dark *){background-color:var(--color-gray-700,var(--color-zinc-700))}.range-input:hover::-webkit-slider-thumb{border-color:var(--color-primary-500,var(--color-emerald-500))!important;background-color:var(--color-primary-500,var(--color-emerald-500))!important}.range-input::-moz-range-thumb{height:calc(var(--spacing,.25rem) * 3);width:calc(var(--spacing,.25rem) * 3);appearance:none;border-style:var(--tw-border-style);--tw-border-style:solid;border:1px solid #00000040;border-radius:2147483647px}@supports (color:color-mix(in lab, red, red)){.range-input::-moz-range-thumb{border-color:color-mix(in oklab, var(--color-black,#000) 25%, transparent)}}.range-input::-moz-range-thumb{background-color:var(--color-white,#fff)}.range-input::-moz-range-thumb:where(.ptw-dark,.ptw-dark *){border-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.range-input::-moz-range-thumb:where(.ptw-dark,.ptw-dark *){border-color:color-mix(in oklab, var(--color-white,#fff) 25%, transparent)}}.range-input::-moz-range-thumb:where(.ptw-dark,.ptw-dark *){background-color:var(--color-gray-700,var(--color-zinc-700))}.range-input:hover::-moz-range-thumb{border-color:var(--color-primary-500,var(--color-emerald-500))!important;background-color:var(--color-primary-500,var(--color-emerald-500))!important}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
+.bind-col-size{grid-template-columns:repeat(auto-fill, minmax(var(--poveste-col-size), 1fr))}.__poveste-json-code[data-v-e4c89a1b] .cm-editor{min-width:280px;height:100%}.v-popper{line-height:0}.v-popper--theme-dropdown .v-popper__inner:where(.ptw-dark,.ptw-dark *){border-color:var(--color-gray-850,#1f1f21);background-color:var(--color-gray-700,var(--color-zinc-700));color:var(--color-gray-100,var(--color-zinc-100))}.v-popper--theme-dropdown .v-popper__arrow-inner:where(.ptw-dark,.ptw-dark *){border-color:var(--color-gray-700,var(--color-zinc-700))}.v-popper--theme-dropdown .v-popper__arrow-outer:where(.ptw-dark,.ptw-dark *){border-color:var(--color-gray-850,#1f1f21)}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transition:transform .15s cubic-bezier(0,1,.5,1);transform:none}.v-popper__popper:focus-visible{outline:none}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}.range-input::-webkit-slider-thumb{height:calc(var(--spacing,.25rem) * 3);width:calc(var(--spacing,.25rem) * 3);appearance:none;border-style:var(--tw-border-style);--tw-border-style:solid;border:1px solid #00000040;border-radius:2147483647px}@supports (color:color-mix(in lab, red, red)){.range-input::-webkit-slider-thumb{border-color:color-mix(in oklab, var(--color-black,#000) 25%, transparent)}}.range-input::-webkit-slider-thumb{background-color:var(--color-white,#fff)}.range-input::-webkit-slider-thumb:where(.ptw-dark,.ptw-dark *){border-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.range-input::-webkit-slider-thumb:where(.ptw-dark,.ptw-dark *){border-color:color-mix(in oklab, var(--color-white,#fff) 25%, transparent)}}.range-input::-webkit-slider-thumb:where(.ptw-dark,.ptw-dark *){background-color:var(--color-gray-700,var(--color-zinc-700))}.range-input:hover::-webkit-slider-thumb{border-color:var(--color-primary-500,var(--color-emerald-500))!important;background-color:var(--color-primary-500,var(--color-emerald-500))!important}.range-input::-moz-range-thumb{height:calc(var(--spacing,.25rem) * 3);width:calc(var(--spacing,.25rem) * 3);appearance:none;border-style:var(--tw-border-style);--tw-border-style:solid;border:1px solid #00000040;border-radius:2147483647px}@supports (color:color-mix(in lab, red, red)){.range-input::-moz-range-thumb{border-color:color-mix(in oklab, var(--color-black,#000) 25%, transparent)}}.range-input::-moz-range-thumb{background-color:var(--color-white,#fff)}.range-input::-moz-range-thumb:where(.ptw-dark,.ptw-dark *){border-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.range-input::-moz-range-thumb:where(.ptw-dark,.ptw-dark *){border-color:color-mix(in oklab, var(--color-white,#fff) 25%, transparent)}}.range-input::-moz-range-thumb:where(.ptw-dark,.ptw-dark *){background-color:var(--color-gray-700,var(--color-zinc-700))}.range-input:hover::-moz-range-thumb{border-color:var(--color-primary-500,var(--color-emerald-500))!important;background-color:var(--color-primary-500,var(--color-emerald-500))!important}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
 /*$vite$:1*/

package/dist/index.es.js

@@ -12836,8 +12836,22 @@ var mh = [
 ]), Nh = h(!1);
 window.__pvt_controls_dark || (window.__pvt_controls_dark = []), window.__pvt_controls_dark.push(Nh), window.__pvt_controls_dark_ready?.();
 //#endregion
+//#region src/components/json/serialize.ts
+function Ph(e, t) {
+	let n = [];
+	return JSON.stringify(e, function(e, t) {
+		if (typeof t == "function") return "[Function]";
+		if (typeof t == "bigint") return t.toString();
+		if (typeof t != "object" || !t) return t;
+		if (typeof Node < "u" && t instanceof Node) return "[Node]";
+		if (typeof Window < "u" && t instanceof Window) return "[Window]";
+		for (; n.length > 0 && n[n.length - 1] !== this;) n.pop();
+		return n.includes(t) ? "[Circular]" : (n.push(t), t);
+	}, t);
+}
+//#endregion
 //#region src/components/json/HstJson.vue
-var Ph = /*#__PURE__*/ ((e, t) => {
+var Fh = /*#__PURE__*/ ((e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
@@ -12850,10 +12864,10 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 	},
 	emits: { "update:modelValue": (e) => !0 },
 	setup(e, { emit: t }) {
-		let i = e, o = t, s, c = h(""), p = h(!1), g = h(), v = {
+		let i = e, o = t, s, c, p = h(""), g = h(!1), v = h(), y = {
 			light: [W.baseTheme({}), Od(jd)],
 			dark: [jh, Od(Mh)]
-		}, y = new Rt(), x = [
+		}, x = new Rt(), te = [
 			cl(),
 			_c(),
 			uc(),
@@ -12867,50 +12881,52 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 				...th
 			]),
 			W.updateListener.of((e) => {
-				c.value = e.view.state.doc.toString();
+				p.value = e.view.state.doc.toString();
 			}),
-			y.of(v.light)
+			x.of(y.light)
 		];
 		return f(() => {
-			s = new W({
-				doc: JSON.stringify(i.modelValue, null, 2),
-				extensions: x,
-				parent: g.value
+			c = Ph(i.modelValue, 2), s = new W({
+				doc: c,
+				extensions: te,
+				parent: v.value
 			}), ee(() => {
-				s.dispatch({ effects: [y.reconfigure(v[Nh.value ? "dark" : "light"])] });
+				s.dispatch({ effects: [x.reconfigure(y[Nh.value ? "dark" : "light"])] });
 			});
 		}), S(() => i.modelValue, () => {
 			let e;
 			try {
-				e = JSON.stringify(JSON.parse(c.value)) === JSON.stringify(i.modelValue);
+				e = Ph(JSON.parse(p.value)) === Ph(i.modelValue);
 			} catch {
 				e = !1;
 			}
-			e || s.dispatch({ changes: [{
+			e || (c = Ph(i.modelValue, 2), s.dispatch({ changes: [{
 				from: 0,
 				to: s.state.doc.length,
-				insert: JSON.stringify(i.modelValue, null, 2)
-			}] });
-		}, { deep: !0 }), S(() => c.value, () => {
-			p.value = !1;
-			try {
-				o("update:modelValue", JSON.parse(c.value));
-			} catch {
-				p.value = !0;
+				insert: c
+			}] }));
+		}, { deep: !0 }), S(() => p.value, () => {
+			if (p.value !== c) {
+				g.value = !1;
+				try {
+					o("update:modelValue", JSON.parse(p.value));
+				} catch {
+					g.value = !0;
+				}
 			}
 		}), (t, i) => (m(), n(ue, {
 			title: e.title,
 			class: u(["poveste-json cursor-text", t.$attrs.class]),
 			style: d(t.$attrs.style)
 		}, {
-			actions: C(() => [p.value ? w((m(), n(b(ie), {
+			actions: C(() => [g.value ? w((m(), n(b(ie), {
 				key: 0,
 				icon: "carbon:warning-alt",
 				class: "text-orange-500"
 			}, null, 512)), [[b(T), "JSON error"]]) : r("", !0), _(t.$slots, "actions", {}, void 0, !0)]),
 			default: C(() => [a("div", l({
 				ref_key: "editorElement",
-				ref: g,
+				ref: v,
 				class: "__poveste-json-code w-full border border-solid border-black/25 dark:border-white/25 focus-within:border-primary-500 dark:focus-within:border-primary-500 rounded-sm box-border overflow-auto resize-y min-h-32 h-48 relative"
 			}, {
 				...t.$attrs,
@@ -12924,7 +12940,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 			"style"
 		]));
 	}
-}), [["__scopeId", "data-v-8570567f"]]), Fh = /* @__PURE__ */ c({
+}), [["__scopeId", "data-v-e4c89a1b"]]), Ih = /* @__PURE__ */ c({
 	name: "HstNumber",
 	inheritAttrs: !1,
 	props: {
@@ -12987,13 +13003,13 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 			"style"
 		]));
 	}
-}), Ih = { class: "-my-1" }, Lh = [
+}), Lh = { class: "-my-1" }, Rh = [
 	"id",
 	"name",
 	"value",
 	"checked",
 	"onChange"
-], Rh = ["for", "onKeydown"], zh = /* @__PURE__ */ c({
+], zh = ["for", "onKeydown"], Bh = /* @__PURE__ */ c({
 	name: "HstRadio",
 	props: {
 		title: {},
@@ -13014,7 +13030,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 			style: d(t.$attrs.style)
 		}, {
 			actions: C(() => [_(t.$slots, "actions")]),
-			default: C(() => [a("div", Ih, [(m(!0), i(e, null, g(f.value, (t, n) => (m(), i(e, { key: n }, [a("input", {
+			default: C(() => [a("div", Lh, [(m(!0), i(e, null, g(f.value, (t, n) => (m(), i(e, { key: n }, [a("input", {
 				id: `${n}-radio_${r.title}`,
 				type: "radio",
 				name: `${n}-radio_${r.title}`,
@@ -13022,7 +13038,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 				checked: n === r.modelValue,
 				class: "hidden!",
 				onChange: (e) => p(n)
-			}, null, 40, Lh), a("label", {
+			}, null, 40, Rh), a("label", {
 				tabindex: "0",
 				for: `${n}-radio_${r.title}`,
 				class: "cursor-pointer flex items-center relative py-1 group",
@@ -13039,7 +13055,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 					{ "delay-150": r.modelValue === n },
 					r.modelValue === n ? "fill-primary-500" : "fill-transparent scale-0"
 				]])
-			}, null, 2)], 2)), o(" " + y(t), 1)], 40, Rh)], 64))), 128))])]),
+			}, null, 2)], 2)), o(" " + y(t), 1)], 40, zh)], 64))), 128))])]),
 			_: 3
 		}, 8, [
 			"title",
@@ -13047,7 +13063,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 			"style"
 		]));
 	}
-}), Bh = { class: "cursor-pointer w-full outline-none px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal" }, Vh = { class: "flex-1 truncate" }, Hh = { class: "flex flex-col bg-gray-50 dark:bg-gray-700" }, Uh = ["onClick"], Wh = /* @__PURE__ */ c({
+}), Vh = { class: "cursor-pointer w-full outline-none px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal" }, Hh = { class: "flex-1 truncate" }, Uh = { class: "flex flex-col bg-gray-50 dark:bg-gray-700" }, Wh = ["onClick"], Gh = /* @__PURE__ */ c({
 	name: "CustomSelect",
 	props: {
 		modelValue: {},
@@ -13063,7 +13079,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 			"auto-size": "",
 			"auto-boundary-max-size": ""
 		}, {
-			popper: C(({ hide: n }) => [a("div", Hh, [(m(!0), i(e, null, g(f.value, ([e, r]) => (m(), i("div", l({ ref_for: !0 }, {
+			popper: C(({ hide: n }) => [a("div", Uh, [(m(!0), i(e, null, g(f.value, ([e, r]) => (m(), i("div", l({ ref_for: !0 }, {
 				...t.$attrs,
 				class: null,
 				style: null
@@ -13071,15 +13087,15 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 				key: r,
 				class: ["px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700", { "bg-primary-200 dark:bg-primary-800": u.modelValue === e }],
 				onClick: (t) => h(e, n)
-			}), y(r), 17, Uh))), 128))])]),
-			default: C(() => [a("div", Bh, [a("div", Vh, [_(t.$slots, "default", { label: p.value }, () => [o(y(p.value), 1)])]), s(b(ie), {
+			}), y(r), 17, Wh))), 128))])]),
+			default: C(() => [a("div", Vh, [a("div", Hh, [_(t.$slots, "default", { label: p.value }, () => [o(y(p.value), 1)])]), s(b(ie), {
 				icon: "carbon:chevron-sort",
 				class: "w-4 h-4 flex-none ml-auto"
 			})])]),
 			_: 3
 		}));
 	}
-}), Gh = /* @__PURE__ */ c({
+}), Kh = /* @__PURE__ */ c({
 	name: "HstSelect",
 	props: {
 		title: {},
@@ -13095,7 +13111,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 			style: d(t.$attrs.style)
 		}, {
 			actions: C(() => [_(t.$slots, "actions")]),
-			default: C(() => [s(Wh, {
+			default: C(() => [s(Gh, {
 				options: e.options,
 				"model-value": e.modelValue,
 				"onUpdate:modelValue": i[0] ||= (e) => r("update:modelValue", e)
@@ -13107,7 +13123,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 			"style"
 		]));
 	}
-}), Kh = { class: "relative w-full flex items-center" }, qh = /* @__PURE__ */ c({
+}), qh = { class: "relative w-full flex items-center" }, Jh = /* @__PURE__ */ c({
 	name: "HstSlider",
 	inheritAttrs: !1,
 	props: {
@@ -13129,7 +13145,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 			title: e.title,
 			style: d(t.$attrs.style)
 		}, {
-			default: C(() => [a("div", Kh, [
+			default: C(() => [a("div", qh, [
 				o[3] ||= a("div", { class: "absolute inset-0 flex items-center" }, [a("div", { class: "border border-black/25 dark:border-white/25 h-1 w-full rounded-full" })], -1),
 				w(a("input", l({
 					ref_key: "input",
@@ -13170,7 +13186,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 			"style"
 		]));
 	}
-}), Jh = ["value"], Yh = /* @__PURE__ */ c({
+}), Yh = ["value"], Xh = /* @__PURE__ */ c({
 	name: "HstText",
 	props: {
 		title: {},
@@ -13198,7 +13214,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 				value: e.modelValue,
 				class: "text-inherit bg-transparent w-full outline-none px-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm",
 				onInput: o[0] ||= (e) => r("update:modelValue", e.target.value)
-			}), null, 16, Jh)]),
+			}), null, 16, Yh)]),
 			_: 3
 		}, 8, [
 			"title",
@@ -13206,7 +13222,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 			"style"
 		]));
 	}
-}), Xh = ["value"], Zh = /* @__PURE__ */ c({
+}), Zh = ["value"], Qh = /* @__PURE__ */ c({
 	name: "HstTextarea",
 	inheritAttrs: !1,
 	props: {
@@ -13234,7 +13250,7 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 				value: e.modelValue,
 				class: "text-inherit bg-transparent w-full outline-none px-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm box-border resize-y min-h-[26px]",
 				onInput: o[0] ||= (e) => r("update:modelValue", e.target.value)
-			}), null, 16, Xh)]),
+			}), null, 16, Zh)]),
 			_: 3
 		}, 8, [
 			"title",
@@ -13242,23 +13258,23 @@ var Ph = /*#__PURE__*/ ((e, t) => {
 			"style"
 		]));
 	}
-}), Qh = oe, $h = fe, eg = ge, tg = ye, ng = Yh, rg = Fh, ig = qh, ag = Zh, og = Gh, sg = Ae, cg = Ue, lg = Ie, ug = Ce, dg = zh, fg = Ph, pg = Se, mg = {
-	HstButton: Qh,
-	HstButtonGroup: $h,
-	HstCheckbox: eg,
-	HstCheckboxList: tg,
-	HstText: ng,
-	HstNumber: rg,
-	HstSlider: ig,
-	HstTextarea: ag,
-	HstSelect: og,
-	HstRadio: dg,
-	HstJson: fg,
-	HstColorShades: sg,
-	HstTokenList: cg,
-	HstTokenGrid: lg,
-	HstCopyIcon: ug,
-	HstColorSelect: pg
+}), $h = oe, eg = fe, tg = ge, ng = ye, rg = Xh, ig = Ih, ag = Jh, og = Qh, sg = Kh, cg = Ae, lg = Ue, ug = Ie, dg = Ce, fg = Bh, pg = Fh, mg = Se, hg = {
+	HstButton: $h,
+	HstButtonGroup: eg,
+	HstCheckbox: tg,
+	HstCheckboxList: ng,
+	HstText: rg,
+	HstNumber: ig,
+	HstSlider: ag,
+	HstTextarea: og,
+	HstSelect: sg,
+	HstRadio: fg,
+	HstJson: pg,
+	HstColorShades: cg,
+	HstTokenList: lg,
+	HstTokenGrid: ug,
+	HstCopyIcon: dg,
+	HstColorSelect: mg
 };
 //#endregion
-export { Qh as HstButton, $h as HstButtonGroup, eg as HstCheckbox, tg as HstCheckboxList, pg as HstColorSelect, sg as HstColorShades, ug as HstCopyIcon, fg as HstJson, rg as HstNumber, dg as HstRadio, og as HstSelect, ig as HstSlider, ng as HstText, ag as HstTextarea, lg as HstTokenGrid, cg as HstTokenList, mg as components };
+export { $h as HstButton, eg as HstButtonGroup, tg as HstCheckbox, ng as HstCheckboxList, mg as HstColorSelect, cg as HstColorShades, dg as HstCopyIcon, pg as HstJson, ig as HstNumber, fg as HstRadio, sg as HstSelect, ag as HstSlider, rg as HstText, og as HstTextarea, ug as HstTokenGrid, lg as HstTokenList, hg as components };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/controls",
   "type": "module",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Prebuilt controls components",
   "author": {
     "name": "Sorin Gitlan"
@@ -38,8 +38,8 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.35.0",
-    "@poveste/vendors": "^0.5.3",
-    "@poveste/shared": "^0.5.3"
+    "@poveste/vendors": "^0.6.0",
+    "@poveste/shared": "^0.6.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.3.3",

package/src/components/json/HstJson.vue

@@ -34,6 +34,7 @@ import { VTooltip as vTooltip } from 'floating-vue'
 import { onMounted, ref, watch, watchEffect } from 'vue'
 import { isDark } from '../../utils'
 import HstWrapper from '../HstWrapper.vue'
+import { stringifyState } from './serialize.js'
 
 const props = defineProps<{
   title?: string
@@ -45,6 +46,12 @@ const emit = defineEmits({
 })
 
 let editorView: EditorView
+// The document this control last rendered from `modelValue`. A change producing
+// exactly this is our own render, not an edit, and must not be written back:
+// `stringifyState` substitutes markers for what JSON cannot carry, so echoing
+// our own document replaces a cycle in the story's state with the string
+// `[Circular]`, and a function with `[Function]`.
+let renderedDoc: string | undefined
 const internalValue = ref('')
 const invalidValue = ref(false)
 const editorElement = ref<HTMLInputElement>()
@@ -76,8 +83,10 @@ const extensions = [
 ]
 
 onMounted(() => {
+  renderedDoc = stringifyState(props.modelValue, 2)
+
   editorView = new EditorView({
-    doc: JSON.stringify(props.modelValue, null, 2),
+    doc: renderedDoc,
     extensions,
     parent: editorElement.value,
   })
@@ -95,18 +104,25 @@ watch(() => props.modelValue, () => {
   let sameDocument
 
   try {
-    sameDocument = (JSON.stringify(JSON.parse(internalValue.value)) === JSON.stringify(props.modelValue))
+    sameDocument = (stringifyState(JSON.parse(internalValue.value)) === stringifyState(props.modelValue))
   }
   catch (e) {
     sameDocument = false
   }
 
   if (!sameDocument) {
-    editorView.dispatch({ changes: [{ from: 0, to: editorView.state.doc.length, insert: JSON.stringify(props.modelValue, null, 2) }] })
+    renderedDoc = stringifyState(props.modelValue, 2)
+    editorView.dispatch({ changes: [{ from: 0, to: editorView.state.doc.length, insert: renderedDoc }] })
   }
 }, { deep: true })
 
 watch(() => internalValue.value, () => {
+  // Our own render coming back round. The model already holds this, and parsing
+  // it would hand back the markers instead of the values they stand for.
+  if (internalValue.value === renderedDoc) {
+    return
+  }
+
   invalidValue.value = false
   try {
     emit('update:modelValue', JSON.parse(internalValue.value))

package/src/components/json/serialize.spec.ts

@@ -0,0 +1,85 @@
+import { EditorView } from '@codemirror/view'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import HstJson from './HstJson.vue'
+import { stringifyState } from './serialize.js'
+
+describe('stringifyState', () => {
+  it('matches JSON.stringify on values JSON can express', () => {
+    const value = { a: 1, b: 'two', c: [1, 2], d: { e: null }, f: true }
+    expect(stringifyState(value)).toBe(JSON.stringify(value))
+    expect(stringifyState(value, 2)).toBe(JSON.stringify(value, null, 2))
+  })
+
+  it('names a cycle instead of throwing', () => {
+    // The ComplexParameter story in the vue3 example holds exactly this, and
+    // once the state sync started delivering the story's own scope it reached
+    // the editor. `JSON.stringify` throws here, from a lifecycle hook, taking
+    // the rest of the flush — the panel and the toolbar — down with it.
+    const parent: any = { name: 'hello' }
+    const child: any = { parent }
+    parent.child = child
+
+    expect(JSON.parse(stringifyState(parent))).toEqual({
+      name: 'hello',
+      child: { parent: '[Circular]' },
+    })
+  })
+
+  it('names a function, which JSON.stringify drops silently', () => {
+    expect(JSON.parse(stringifyState({ action: () => {} }))).toEqual({ action: '[Function]' })
+  })
+
+  it('does not mistake a shared reference for a cycle', () => {
+    // The guard tracks ancestors, not everything seen. The same object twice as
+    // a sibling serialises fine and must not be blanked out.
+    const shared = { a: 1 }
+    expect(JSON.parse(stringifyState({ x: shared, y: shared }))).toEqual({ x: { a: 1 }, y: { a: 1 } })
+  })
+
+  it('names a node rather than walking it', () => {
+    const el = document.createElement('div')
+    expect(JSON.parse(stringifyState({ el }))).toEqual({ el: '[Node]' })
+  })
+
+  it('carries a bigint across as its digits', () => {
+    expect(JSON.parse(stringifyState({ n: 10n }))).toEqual({ n: '10' })
+  })
+})
+
+describe('hstJson round-trip', () => {
+  it('does not write its own markers back into the model', async () => {
+    // The markers stand for what JSON cannot carry. Parsing the rendered
+    // document and emitting it replaces the thing itself with its label — a
+    // cycle in the story's state becomes the string `[Circular]` — and it used
+    // to happen on mount, with nobody touching the editor.
+    const parent: any = { name: 'hello' }
+    parent.child = { parent }
+
+    const wrapper = mount(HstJson, { props: { modelValue: parent, title: 'Recursive' } })
+    await nextTick()
+
+    await wrapper.setProps({ modelValue: { ...parent, name: 'changed' } })
+    await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 50))
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('still reports a document the reader changed', async () => {
+    // The guard is keyed on the exact text this control last rendered, so it
+    // must not swallow anything else. Without this, suppressing the echo would
+    // quietly turn the editor read-only and the test above would still pass.
+    const wrapper = mount(HstJson, { props: { modelValue: { a: 1 }, title: 'Plain' } })
+    await nextTick()
+
+    const view = EditorView.findFromDOM(wrapper.find('.cm-content').element as HTMLElement)!
+    expect(view).toBeTruthy()
+
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: '{ "a": 2 }' } })
+    await nextTick()
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{ a: 2 }])
+  })
+})

package/src/components/json/serialize.ts

@@ -0,0 +1,54 @@
+/**
+ * `JSON.stringify` for values that were never promised to be JSON.
+ *
+ * State reaches this control straight out of a story's own scope, so it holds
+ * whatever a `<script setup>` holds: a function, a DOM node, an object that
+ * refers back to itself. `JSON.stringify` throws on the cycle, and it throws
+ * from inside a lifecycle hook — which takes the rest of that flush with it, so
+ * the panel and the toolbar beside it never mount. A marker in the editor is
+ * the smaller loss, and it is what the story events pane already does.
+ *
+ * Nodes and windows are named rather than walked. Both are cyclic, so the guard
+ * below would terminate on them, but only after walking a few thousand
+ * properties of `window` on every keystroke.
+ */
+export function stringifyState(value: unknown, space?: number) {
+  // Ancestors, not everything seen: the same object appearing twice as a
+  // sibling is a shared reference, not a cycle, and is perfectly serialisable.
+  // The replacer's `this` is the holder, which is what lets the stack unwind.
+  const ancestors: any[] = []
+
+  return JSON.stringify(value, function (this: any, _key, current) {
+    if (typeof current === 'function') {
+      return '[Function]'
+    }
+
+    if (typeof current === 'bigint') {
+      return current.toString()
+    }
+
+    if (current === null || typeof current !== 'object') {
+      return current
+    }
+
+    if (typeof Node !== 'undefined' && current instanceof Node) {
+      return '[Node]'
+    }
+
+    if (typeof Window !== 'undefined' && current instanceof Window) {
+      return '[Window]'
+    }
+
+    while (ancestors.length > 0 && ancestors[ancestors.length - 1] !== this) {
+      ancestors.pop()
+    }
+
+    if (ancestors.includes(current)) {
+      return '[Circular]'
+    }
+
+    ancestors.push(current)
+
+    return current
+  }, space)
+}