@poveste/plugin-vue 0.14.0 → 0.16.0

package/dist/bundled/client/codegen.js

@@ -3,7 +3,7 @@ import { createAutoBuildingObject as o, indent as s, serializeJs as c, voidEleme
 import { camelCase as u, pascalCase as d } from "change-case";
 //#region src/client/codegen.ts
 async function f(e) {
-	let t = e.slots().default?.({ state: e.state ?? {} }) ?? [], n = Array.isArray(t) ? t : [t], r = [];
+	let t = e.slots?.().default?.({ state: e.state ?? {} }) ?? [], n = Array.isArray(t) ? t : [t], r = [];
 	for (let t in n) {
 		let i = n[t];
 		r.push(...(await p(i, e.state?._hPropState?.[t])).lines);
@@ -18,24 +18,24 @@ async function p(c, d = null) {
 	let f = [];
 	if (typeof c.type == "object" || typeof c.type == "string") {
 		c.type?.__asyncLoader && !c.type.__asyncResolved && await c.type.__asyncLoader();
-		let e = [], h = !1, v = ["key"];
-		function y(t, n, r = null) {
+		let e = [], g = !1, y = ["key"];
+		function b(t, n, r = null) {
 			let i = "";
 			for (let e in n.modifiers) n.modifiers[e] && (i += `.${e}`);
 			let a = "";
 			n.arg && (a = `:${n.arg}`), r &&= r.replace(/^\$(?:setup|props|data)\./g, "");
-			let o = r ? [r] : g(n.value), s = [], c = `v-${t}${a}${i}="`;
-			o.length > 1 ? (s.push(`${c}${o[0]}`), s.push(...o.slice(1, o.length - 1)), s.push(`${o[o.length - 1]}"`), h = !0) : s.push(`${c}${o[0] ?? ""}"`), e.push(s);
+			let o = r ? [r] : _(n.value), s = [], c = `v-${t}${a}${i}="`;
+			o.length > 1 ? (s.push(`${c}${o[0]}`), s.push(...o.slice(1, o.length - 1)), s.push(`${o[o.length - 1]}"`), g = !0) : s.push(`${c}${o[0] ?? ""}"`), e.push(s);
 		}
 		if (c.dirs) {
 			for (let e of c.dirs) if (e.dir === a || e.dir === i || e.dir === r || e.dir === t || e.dir === n) {
-				let t = [`onUpdate:${e.arg ?? "modelValue"}`, `onUpdate:${u(e.arg ?? "modelValue")}`].find((e) => c.props[e]), n = c.props[t], r = null;
-				if (n) {
-					v.push(t);
+				let t = [`onUpdate:${e.arg ?? "modelValue"}`, `onUpdate:${u(e.arg ?? "modelValue")}`].find((e) => c.props?.[e]), n = t ? c.props?.[t] : void 0, r = null;
+				if (t && n) {
+					y.push(t);
 					let e = n.toString(), i = /\(\$event\) => (.*?) = \$event/.exec(e);
-					i && (r = i[1]);
+					i && (r = i[1] ?? null);
 				}
-				y("model", e, r);
+				b("model", e, r);
 			} else if (e.instance._ || e.instance.$) {
 				let t = e.instance.$ ?? e.instance._, n;
 				for (let r of [t.directives, t.appContext.directives]) {
@@ -51,99 +51,118 @@ async function p(c, d = null) {
 						break;
 					}
 				}
-				n && y(n, e);
+				n && b(n, e);
 			}
 		}
-		function b(t, n) {
+		function x(t, n) {
 			if (typeof n != "string" || c.dynamicProps?.includes(t)) {
 				let r = ":";
 				t.startsWith("on") && (r = "@");
-				let i = r === "@" ? `${t[2].toLowerCase()}${t.slice(3)}` : t, a = [`onUpdate:${t}`, `onUpdate:${u(t)}`].find((e) => c.dynamicProps?.includes(e) || c.props && e in c.props);
+				let i = r === "@" ? `${t.charAt(2).toLowerCase()}${t.slice(3)}` : t, a = [`onUpdate:${t}`, `onUpdate:${u(t)}`].find((e) => c.dynamicProps?.includes(e) || c.props && e in c.props);
 				if (r === ":" && a) {
-					v.push(a);
-					let e = c.props[a].toString(), r, i = /\(\$event\) => (.*?) = \$event/.exec(e);
-					i && (r = i[1]);
-					let o = `${t === "modelValue" ? "model" : t}Modifiers`, s = c.props[o] ?? {};
-					v.push(o), y("model", {
+					y.push(a);
+					let e = c.props?.[a], r = String(e), i = null, o = /\(\$event\) => (.*?) = \$event/.exec(r);
+					o && (i = o[1] ?? null);
+					let s = `${t === "modelValue" ? "model" : t}Modifiers`, l = c.props?.[s] ?? {};
+					y.push(s), b("model", {
 						arg: t === "modelValue" ? null : t,
-						modifiers: s,
+						modifiers: l,
 						value: n
-					}, r);
+					}, i);
 					return;
 				}
 				if (n === void 0) return;
 				let o;
-				if (typeof n == "string" && n.startsWith("{{") && n.endsWith("}}")) o = _(n.substring(2, n.length - 2).trim()).split("\n");
+				if (typeof n == "string" && n.startsWith("{{") && n.endsWith("}}")) o = v(n.substring(2, n.length - 2).trim()).split("\n");
 				else if (typeof n == "function") {
-					let e = _(n.toString().replace(/'/g, "\\'").replace(/"/g, "'")), t = /function (\S+)\(/.exec(e);
-					t ? o = [t[1]] : (e.startsWith("($event) => ") && (e = e.substring(12)), o = e.split("\n"));
-				} else o = g(n);
-				if (o.length > 1) {
-					h = !0;
-					let t = [`${r}${i}="${o[0]}`];
-					t.push(...o.slice(1, o.length - 1)), t.push(`${o[o.length - 1]}"`), e.push(t);
-				} else e.push([`${r}${i}="${o[0]}"`]);
-			} else c.type?.props?.[t]?.type === Boolean ? e.push([t]) : e.push([`${t}="${n}"`]);
+					let e = v(n.toString()), t = /function (\S+)\(/.exec(e)?.[1];
+					t ? o = [t] : (e.startsWith("($event) => ") && (e = e.substring(12)), o = e.split("\n"));
+				} else o = _(n);
+				let { quote: s, lines: l } = m(o);
+				if (l.length > 1) {
+					g = !0;
+					let t = [`${r}${i}=${s}${l[0]}`];
+					t.push(...l.slice(1, l.length - 1)), t.push(`${l[l.length - 1]}${s}`), e.push(t);
+				} else e.push([`${r}${i}=${s}${l[0]}${s}`]);
+			} else if (c.type?.props?.[t]?.type === Boolean) e.push([t]);
+			else {
+				let r = m([String(n)]);
+				e.push([`${t}=${r.quote}${r.lines[0]}${r.quote}`]);
+			}
 		}
 		for (let e in c.props) {
-			if (v.includes(e) || d && e in d) continue;
+			if (y.includes(e) || d && e in d) continue;
 			let t = c.props[e];
-			b(e, t);
+			x(e, t);
 		}
-		if (d) for (let e in d) b(e, d[e]);
-		e.length > 1 && (h = !0);
-		let x = m(c), S = !1, C = [];
-		if (typeof c.children == "string") x === "pre" ? C.push(c.children) : C.push(...c.children.split("\n")), S = !0;
+		if (d) for (let e in d) x(e, d[e]);
+		e.length > 1 && (g = !0);
+		let S = h(c), C = !1, w = [];
+		if (typeof c.children == "string") S === "pre" ? w.push(c.children) : w.push(...c.children.split("\n")), C = !0;
 		else if (Array.isArray(c.children)) {
 			let e;
 			for (let t of c.children) {
 				let n = await p(t);
 				if (n.isText) {
 					e === void 0 && (e = !0);
-					let t = n.lines[0];
-					!C.length || /^\s/.test(t) ? C.push(t.trim()) : C[C.length - 1] += t;
-				} else e === void 0 && (e = !1), C.push(...n.lines);
+					let t = n.lines[0] ?? "";
+					!w.length || /^\s/.test(t) ? w.push(t.trim()) : w[w.length - 1] += t;
+				} else e === void 0 && (e = !1), w.push(...n.lines);
 			}
-			e !== void 0 && (S = e);
+			e !== void 0 && (C = e);
 		}
 		if (c.children && typeof c.children == "object" && !Array.isArray(c.children)) {
 			for (let e in c.children) if (typeof c.children[e] == "function") {
-				let t = o((e) => `{{ ${e} }}`, (e, t) => {
-					if (t === "__v_isRef") return () => !1;
-				}), n = c.children[e](t.proxy), r = [];
+				let t = o((e) => `{{ ${e} }}`, (e, t) => t === "__v_isRef" ? () => !1 : null), n = c.children[e](t.proxy), r = [];
 				for (let e of n) r.push(...(await p(e)).lines);
 				let i = Object.keys(t.cache);
-				i.length ? (C.push(`<template #${e}="{ ${i.join(", ")} }">`), C.push(...s(r)), C.push("</template>")) : e === "default" ? C.push(...r) : (C.push(`<template #${e}>`), C.push(...s(r)), C.push("</template>"));
+				i.length ? (w.push(`<template #${e}="{ ${i.join(", ")} }">`), w.push(...s(r)), w.push("</template>")) : e === "default" ? w.push(...r) : (w.push(`<template #${e}>`), w.push(...s(r)), w.push("</template>"));
 			}
 		}
-		let w = [`<${x}`];
-		if (h) {
-			for (let t of e) w.push(...s(t));
-			C.length > 0 && w.push(">");
-		} else e.length === 1 && (w[0] += ` ${e[0]}`), C.length > 0 && (w[0] += ">");
-		let T = l.includes(x.toLowerCase());
-		C.length > 0 ? C.length === 1 && w.length === 1 && !e.length && S ? f.push(`${w[0]}${C[0]}</${x}>`) : (f.push(...w), f.push(...s(C)), f.push(`</${x}>`)) : w.length > 1 ? (f.push(...w), f.push(T ? ">" : "/>")) : f.push(`${w[0]}${T ? "" : " /"}>`);
+		let T = [`<${S}`];
+		if (g) {
+			for (let t of e) T.push(...s(t));
+			w.length > 0 && T.push(">");
+		} else e.length === 1 && (T[0] += ` ${e[0]}`), w.length > 0 && (T[0] += ">");
+		let E = l.includes(S.toLowerCase());
+		w.length > 0 ? w.length === 1 && T.length === 1 && !e.length && C ? f.push(`${T[0]}${w[0]}</${S}>`) : (f.push(...T), f.push(...s(w)), f.push(`</${S}>`)) : T.length > 1 ? (f.push(...T), f.push(E ? ">" : "/>")) : f.push(`${T[0]}${E ? "" : " /"}>`);
 	} else if (c?.shapeFlag & 16) for (let e of c.children) f.push(...(await p(e)).lines);
 	return { lines: f };
 }
 function m(e) {
+	let t = e.join("\n"), n = (t.match(/"/g) ?? []).length, r = (t.match(/'/g) ?? []).length;
+	return n === 0 ? {
+		quote: "\"",
+		lines: e
+	} : r === 0 ? {
+		quote: "'",
+		lines: e
+	} : r <= n ? {
+		quote: "'",
+		lines: e.map((e) => e.replace(/'/g, "&#39;"))
+	} : {
+		quote: "\"",
+		lines: e.map((e) => e.replace(/"/g, "&quot;"))
+	};
+}
+function h(e) {
 	if (typeof e.type == "string") return e.type;
 	if (e.type?.__asyncResolved) {
 		let t = e.type?.__asyncResolved;
-		return t.name ?? h(t.__file);
+		return t.name ?? g(t.__file);
 	}
-	return e.type?.name ? e.type.name : e.type?.__file ? h(e.type.__file) : "Anonymous";
-}
-function h(e) {
-	let t = /([^/]+)\.vue$/.exec(e);
-	return t ? d(t[1]) : "Anonymous";
+	return e.type?.name ? e.type.name : e.type?.__file ? g(e.type.__file) : "Anonymous";
 }
 function g(e) {
-	let t = !!e?.__autoBuildingObject, n = c(e);
-	return t ? [_(n.__autoBuildingObjectGetKey)] : _(n).split("\n");
+	let t = /([^/]+)\.vue$/.exec(e)?.[1];
+	return t ? d(t) : "Anonymous";
 }
 function _(e) {
+	let t = !!e?.__autoBuildingObject, n = c(e);
+	return t ? [v(n.__autoBuildingObjectGetKey)] : v(n).split("\n");
+}
+function v(e) {
 	return e.replace(/\$setup\./g, "");
 }
 //#endregion
-export { f as generateSourceCode, m as getTagName };
+export { m as delimitAttr, f as generateSourceCode, h as getTagName };

package/dist/bundled/client/context.js

@@ -0,0 +1,20 @@
+import { inject as e, provide as t } from "vue";
+//#region src/client/context.ts
+function n(n, r) {
+	let i = Symbol.for(n);
+	return {
+		provide(e) {
+			t(i, e);
+		},
+		inject(t) {
+			let n = e(i, null);
+			if (n === null) throw Error(`[poveste] a ${t} has to be inside a ${r}`);
+			return n;
+		},
+		injectOptional() {
+			return e(i, null);
+		}
+	};
+}
+//#endregion
+export { n as createContext };

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

@@ -1,7 +1,8 @@
-import { autoStubComponents as e } from "./stub.js";
-import { defineComponent as t, inject as n, onMounted as r, provide as i } from "vue";
+import { addStoryContext as e, addVariantContext as t, serverStoryContext as n, storyFileContext as r } from "./context.js";
+import { autoStubComponents as i } from "./stub.js";
+import { defineComponent as a, onMounted as o } from "vue";
 //#region src/client/server/Story.ts
-var a = t({
+var s = a({
 	name: "PovesteStory",
 	inheritAttrs: !1,
 	props: {
@@ -38,38 +39,40 @@ var a = t({
 			default: void 0
 		}
 	},
-	setup(e) {
-		let t = n("hstStoryFile"), a = {
-			id: e.id ?? t?.id,
-			title: e.title ?? t?.fileName,
-			group: e.group,
-			layout: e.layout,
-			icon: e.icon,
-			iconColor: e.iconColor,
-			docsOnly: e.docsOnly,
-			meta: e.meta,
+	setup(i) {
+		let a = r.injectOptional(), s = i.id ?? a?.id, c = i.title ?? a?.fileName;
+		if (!s || c === void 0) throw Error("[poveste] a <Story> collected outside a story file needs an `id` and a `title`");
+		let l = {
+			id: s,
+			title: c,
+			group: i.group,
+			layout: i.layout,
+			icon: i.icon,
+			iconColor: i.iconColor,
+			docsOnly: i.docsOnly,
+			meta: i.meta,
 			variants: []
 		};
-		return n("addStory", null)?.(a), i("story", a), i("addVariant", (e) => {
-			a.variants.push(e);
-		}), r(() => {
-			a.variants.length || a.variants.push({
+		return e.injectOptional()?.(l), n.provide(l), t.provide((e) => {
+			l.variants.push(e);
+		}), o(() => {
+			l.variants.length || l.variants.push({
 				id: "_default",
 				title: "default"
 			});
-		}), { story: a };
+		}), { story: l };
 	},
 	render() {
-		let t = !1;
+		let e = !1;
 		try {
-			let n = this.$slots.default?.({ get state() {
-				return t = !0, {};
+			let t = this.$slots.default?.({ get state() {
+				return e = !0, {};
 			} });
-			return Array.isArray(n) && e(n), n;
-		} catch (e) {
-			return t || console.error(e), null;
+			return Array.isArray(t) && i(t), t;
+		} catch (t) {
+			return e || console.error(t), null;
 		}
 	}
 });
 //#endregion
-export { a as default };
+export { s as default };

package/dist/bundled/client/server/Variant.js

@@ -1,6 +1,7 @@
-import { defineComponent as e, inject as t } from "vue";
+import { addVariantContext as e, serverStoryContext as t } from "./context.js";
+import { defineComponent as n } from "vue";
 //#region src/client/server/Variant.ts
-var n = e({
+var r = n({
 	name: "PovesteVariant",
 	props: {
 		title: {
@@ -24,23 +25,19 @@ var n = e({
 			default: void 0
 		}
 	},
-	setup(e) {
-		let n = t("story");
-		function r() {
-			return `${n.id}-${n.variants.length}`;
-		}
-		let i = {
-			id: e.id ?? r(),
-			title: e.title,
-			icon: e.icon,
-			iconColor: e.iconColor,
-			meta: e.meta
-		};
-		t("addVariant")(i);
+	setup(n) {
+		let r = t.inject("<Variant>");
+		e.inject("<Variant>")({
+			id: n.id ?? `${r.id}-${r.variants.length}`,
+			title: n.title,
+			icon: n.icon,
+			iconColor: n.iconColor,
+			meta: n.meta
+		});
 	},
 	render() {
 		return null;
 	}
 });
 //#endregion
-export { n as default };
+export { r as default };

package/dist/bundled/client/server/context.js

@@ -0,0 +1,5 @@
+import { createContext as e } from "../context.js";
+//#region src/client/server/context.ts
+var t = e("poveste-server-story-file", "story file"), n = e("poveste-server-add-story", "story file"), r = e("poveste-server-story", "<Story>"), i = e("poveste-server-add-variant", "<Story>");
+//#endregion
+export { n as addStoryContext, i as addVariantContext, r as serverStoryContext, t as storyFileContext };

package/dist/bundled/client/server/run.js

@@ -1,44 +1,44 @@
 import { VUE_SETUP_HOOK_NAMES as e } from "../../setup-hooks.js";
-import t from "./Story.js";
-import n from "./Variant.js";
-import { createApp as r, h as i } from "vue";
-import { getSetupHook as a } from "@poveste/shared";
-import * as o from "virtual:$poveste-generated-global-setup";
-import * as s from "virtual:$poveste-setup";
+import { addStoryContext as t, storyFileContext as n } from "./context.js";
+import r from "./Story.js";
+import i from "./Variant.js";
+import { createApp as a, h as o } from "vue";
+import { getSetupHook as s } from "@poveste/shared";
+import * as c from "virtual:$poveste-generated-global-setup";
+import * as l from "virtual:$poveste-setup";
 //#region src/client/server/run.ts
-async function c({ file: c, storyData: l, el: u }) {
-	let { default: d } = await import(/* @vite-ignore */
+async function u({ file: u, storyData: d, el: f }) {
+	let { default: p } = await import(/* @vite-ignore */
 		/* @vite-ignore */
-		c.moduleId
-	), f = r({
-		provide: {
-			addStory(e) {
-				l.push(e);
-			},
-			hstStoryFile: c
+		u.moduleId
+	), m = a({
+		setup() {
+			t.provide((e) => {
+				d.push(e);
+			}), n.provide(u);
 		},
 		render() {
-			return i(d);
+			return o(p);
 		}
 	});
-	f.component("Story", t), f.component("Variant", n);
-	let p = {
-		app: f,
-		story: null,
-		variant: null,
+	m.component("Story", r), m.component("Variant", i);
+	let h = {
+		app: m,
+		story: void 0,
+		variant: void 0,
 		addWrapper: () => {}
-	}, m = a(o, e);
-	m && await m(p);
-	let h = a(s, e);
-	if (h && await h(p), f.mount(u), d.doc) {
+	}, g = s(c, e);
+	g && await g(h);
+	let _ = s(l, e);
+	if (_ && await _(h), m.mount(f), p.doc) {
 		let e = document.createElement("div");
-		e.innerHTML = d.doc;
+		e.innerHTML = p.doc;
 		let t = e.textContent;
-		l.forEach((e) => {
+		d.forEach((e) => {
 			e.docsText = t;
 		});
 	}
-	f.unmount();
+	m.unmount();
 }
 //#endregion
-export { c as run };
+export { u as run };

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

@@ -7,10 +7,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     targetVariantId: {
         type: StringConstructor;
-        default: any;
+        default: null;
+    };
+    syncState: {
+        type: BooleanConstructor;
+        default: boolean;
     };
 }>, {
-    el: import("vue").Ref<HTMLDivElement, HTMLDivElement>;
+    el: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     story: {
         type: _PropType<Story>;
@@ -18,9 +22,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     targetVariantId: {
         type: StringConstructor;
-        default: any;
+        default: null;
+    };
+    syncState: {
+        type: BooleanConstructor;
+        default: boolean;
     };
 }>> & Readonly<{}>, {
+    syncState: boolean;
     targetVariantId: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
 }>, {
-    sandbox: import("vue").Ref<HTMLDivElement, HTMLDivElement>;
+    sandbox: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     ready: () => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -1,33 +1,36 @@
 import type { Story } from '@poveste/shared';
 import type { PropType, VNode } from 'vue';
+import type { PreviewRenderContext } from './render-context.js';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     initState: {
         type: PropType<() => any | Promise<any>>;
-        default: any;
+        default: undefined;
     };
     meta: {
         type: PropType<Story["meta"]>;
-        default: any;
+        default: undefined;
     };
 }>, {
-    renderContext: import("./render-context.js").PreviewRenderContext;
+    renderContext: PreviewRenderContext | null;
     story: import("vue").ComputedRef<Story>;
     renderMountStory: () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>[];
-    renderPreviewStory: () => any[];
+    renderPreviewStory: (context: PreviewRenderContext) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
     updateStory: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     initState: {
         type: PropType<() => any | Promise<any>>;
-        default: any;
+        default: undefined;
     };
     meta: {
         type: PropType<Story["meta"]>;
-        default: any;
+        default: undefined;
     };
 }>> & Readonly<{}>, {
-    meta: import("poveste").StoryMeta;
+    meta: import("poveste").StoryMeta | undefined;
     initState: () => any | Promise<any>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,13 +1,14 @@
 import type { Variant } from '@poveste/shared';
 import type { PropType } from 'vue';
+import type { PreviewRenderContext } from './render-context.js';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     initState: {
         type: PropType<() => any | Promise<any>>;
-        default: any;
+        default: undefined;
     };
     source: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     responsiveDisabled: {
         type: BooleanConstructor;
@@ -19,32 +20,32 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     setupApp: {
         type: FunctionConstructor;
-        default: any;
+        default: undefined;
     };
     meta: {
         type: PropType<Variant["meta"]>;
-        default: any;
+        default: undefined;
     };
     implicit: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>, {
-    renderContext: import("./render-context.js").PreviewRenderContext;
-    renderVariantSlot: (variant: Variant) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    renderContext: PreviewRenderContext | null;
+    renderVariantSlot: (variant: Variant, context: PreviewRenderContext) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
-    }>[];
-    resolveVariant: () => Variant;
+    }>[] | null;
+    resolveVariant: () => Variant | null | undefined;
     syncRenderVariantState: (variant: Variant) => void;
     updateVariant: (variant: Variant) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     initState: {
         type: PropType<() => any | Promise<any>>;
-        default: any;
+        default: undefined;
     };
     source: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     responsiveDisabled: {
         type: BooleanConstructor;
@@ -56,18 +57,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     setupApp: {
         type: FunctionConstructor;
-        default: any;
+        default: undefined;
     };
     meta: {
         type: PropType<Variant["meta"]>;
-        default: any;
+        default: undefined;
     };
     implicit: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    meta: any;
+    meta: import("poveste").VariantMeta | undefined;
     initState: () => any | Promise<any>;
     source: string;
     responsiveDisabled: boolean;

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

@@ -0,0 +1,9 @@
+import type { ComputedRef } from 'vue';
+/** The story a variant belongs to. Read with `?.` throughout. */
+export declare const storyContext: import("../context.js").Context<ComputedRef<any>>;
+/**
+ * The story's implicit state, absent when the story has none. A variant skips
+ * its state sync rather than failing, which is behaviour rather than an
+ * oversight — this is the type saying so.
+ */
+export declare const implicitStateContext: import("../context.js").Context<() => any>;

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

@@ -9,10 +9,25 @@ export interface PreviewRenderContext {
      * app realm, where the story view needs all of them mounted.
      */
     targetVariantId?: string | null;
+    /**
+     * Whether this mount pass owns the live state sync for its variants.
+     *
+     * False in a sandbox realm, where the render tree beside it already syncs the
+     * same `variant.state` against the same story's bindings. Two syncs over one
+     * state is two deep watchers walking the whole graph on every edit, and a
+     * story holding a large one pays for both: #964 measured the sandbox running
+     * three syncs where the app realm runs one.
+     *
+     * The app realm keeps it. Its mount pass is the only thing that fills
+     * `variant.state` there — with no controls slot nothing renders, so nothing
+     * else would — and that is what the controls panel builds from.
+     */
+    syncState?: boolean;
     externalState: Variant['state'] | null;
     nextVariantIndex: {
         value: number;
     };
 }
 export declare function provideRenderContext(value: PreviewRenderContext): void;
-export declare function useRenderContext(): PreviewRenderContext;
+/** Null outside a preview, which several call sites read with `?.`. */
+export declare function useRenderContext(): PreviewRenderContext | null;