@poveste/plugin-vue 0.15.0 → 0.16.1

package/README.md

@@ -1,6 +1,6 @@
 # Poveste + Vue 3
 
-Requires `vue@^3.5.26`.
+Requires `vue@^3.5.43`.
 
 ```bash
 pnpm add -D poveste @poveste/plugin-vue

package/components.d.ts

@@ -18,6 +18,8 @@ import type {
   HstTextarea,
   HstSelect,
   HstRadio,
+  HstColor,
+  HstDate,
   HstJson,
   HstColorShades,
   HstTokenList,
@@ -229,6 +231,8 @@ declare module 'vue' {
     HstTextarea: typeof HstTextarea
     HstSelect: typeof HstSelect
     HstRadio: typeof HstRadio
+    HstColor: typeof HstColor
+    HstDate: typeof HstDate
     HstJson: typeof HstJson
     HstColorShades: typeof HstColorShades
     HstTokenList: typeof HstTokenList

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

@@ -12,6 +12,10 @@ var c = t({
 		targetVariantId: {
 			type: String,
 			default: null
+		},
+		syncState: {
+			type: Boolean,
+			default: !0
 		}
 	},
 	setup(t) {
@@ -20,6 +24,7 @@ var c = t({
 			slotName: "default",
 			currentVariant: null,
 			targetVariantId: t.targetVariantId,
+			syncState: t.syncState,
 			externalState: null,
 			nextVariantIndex: { value: 0 }
 		}), l = null;

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

@@ -1,10 +1,11 @@
-import { useRenderContext as e } from "./render-context.js";
-import { useInstance as t } from "./util.js";
-import n from "./Variant.js";
-import { cloneVNode as r, computed as i, defineComponent as a, h as o, isRef as s, provide as c, reactive as l, useAttrs as u } from "vue";
-import { omitInheritStoryProps as d } from "@poveste/shared";
+import { implicitStateContext as e, storyContext as t } from "./context.js";
+import { useRenderContext as n } from "./render-context.js";
+import { isWritableBinding as r, useInstance as i } from "./util.js";
+import a from "./Variant.js";
+import { cloneVNode as o, computed as s, defineComponent as c, h as l, isRef as u, reactive as d, useAttrs as f } from "vue";
+import { omitInheritStoryProps as p } from "@poveste/shared";
 //#region src/client/app/Story.ts
-var f = a({
+var m = c({
 	name: "Story",
 	__povesteType: "story",
 	inheritAttrs: !1,
@@ -18,95 +19,95 @@ var f = a({
 			default: void 0
 		}
 	},
-	setup(n) {
-		let a = t("Story"), o = u(), f = e(), p = i(() => o.story);
-		c("story", p);
-		let m = a.parent, h = l({});
-		Object.defineProperty(h, "$data", {
+	setup(a) {
+		let c = i("Story"), l = f(), m = n(), h = s(() => l.story);
+		t.provide(h);
+		let g = c.parent, _ = d({});
+		Object.defineProperty(_, "$data", {
 			enumerable: !0,
 			configurable: !0,
-			get: () => m.data,
+			get: () => g.data,
 			set: (e) => {
-				Object.assign(m.data, e);
+				Object.assign(g.data, e);
 			}
 		});
-		function g(e, t) {
+		function v(e, t) {
 			let n = e[t];
-			typeof n == "function" || n?.__file || typeof n?.render == "function" || typeof n?.setup == "function" || Object.defineProperty(h, t, {
+			typeof n == "function" || n?.__file || typeof n?.render == "function" || typeof n?.setup == "function" || r(n) && Object.defineProperty(_, t, {
 				enumerable: !0,
 				configurable: !0,
 				get: () => {
 					let n = e[t];
-					return s(n) ? n.value : n;
+					return u(n) ? n.value : n;
 				},
 				set: (n) => {
 					let r = e[t];
-					s(r) ? r.value = n : r && typeof r == "object" && n && typeof n == "object" ? Object.assign(r, n) : e[t] = n;
+					u(r) ? r.value = n : r && typeof r == "object" && n && typeof n == "object" ? Object.assign(r, n) : e[t] = n;
 				}
 			});
 		}
-		for (let e in m.exposed) g(m.exposed, e);
-		for (let e in m.devtoolsRawSetupState) g(m.devtoolsRawSetupState, e);
-		for (let e in m.data) g(m.data, e);
-		c("implicitState", () => h);
-		function _() {
-			n.meta && (o.story.meta || (o.story.meta = {}), Object.assign(o.story.meta, n.meta)), Object.assign(o.story, { slots: () => a.slots });
+		for (let e in g.exposed) v(g.exposed, e);
+		for (let e in g.devtoolsRawSetupState) v(g.devtoolsRawSetupState, e);
+		for (let e in g.data) v(g.data, e);
+		e.provide(() => _);
+		function y() {
+			a.meta && (l.story.meta || (l.story.meta = {}), Object.assign(l.story.meta, a.meta)), Object.assign(l.story, { slots: () => c.slots });
 		}
 		return {
-			renderContext: f,
-			story: p,
-			renderMountStory: y,
-			renderPreviewStory: x,
-			updateStory: _
+			renderContext: m,
+			story: h,
+			renderMountStory: x,
+			renderPreviewStory: C,
+			updateStory: y
 		};
-		function v(e) {
+		function b(e) {
 			let t = {};
-			for (let n in a.attrs) e.props?.[n] === void 0 && (t[n] = a.attrs[n]);
-			for (let n in o.story) !d.includes(n) && e.props?.[n] === void 0 && (t[n] = Reflect.get(o.story, n));
+			for (let n in c.attrs) e.props?.[n] === void 0 && (t[n] = c.attrs[n]);
+			for (let n in l.story) !p.includes(n) && e.props?.[n] === void 0 && (t[n] = Reflect.get(l.story, n));
 			return t;
 		}
-		function y() {
-			let e = 0, t = f?.targetVariantId, i = t ? o.story.variants.findIndex((e) => e.id === t) : -1, s = (t) => {
-				let a = [];
-				for (let c of t) {
-					if (c.type?.__povesteType === "variant") {
-						let t = o.story.variants[e];
-						if (e++, !t || i !== -1 && e - 1 !== i) continue;
-						let s = { variant: t };
-						c.key ?? (s.key = t.id), !c.props?.initState && !c.props?.["init-state"] && (s.initState = n.initState), Object.assign(s, v(c)), a.push(r(c, s));
+		function x() {
+			let e = 0, t = m?.targetVariantId, n = t ? l.story.variants.findIndex((e) => e.id === t) : -1, r = (t) => {
+				let i = [];
+				for (let s of t) {
+					if (s.type?.__povesteType === "variant") {
+						let t = l.story.variants[e];
+						if (e++, !t || n !== -1 && e - 1 !== n) continue;
+						let r = { variant: t };
+						s.key ?? (r.key = t.id), !s.props?.initState && !s.props?.["init-state"] && (r.initState = a.initState), Object.assign(r, b(s)), i.push(o(s, r));
 						continue;
 					}
-					Array.isArray(c.children) && (c.children = s(c.children)), a.push(c);
+					Array.isArray(s.children) && (s.children = r(s.children)), i.push(s);
 				}
-				return a;
+				return i;
 			};
-			return s(a.slots.default?.() ?? []);
+			return r(c.slots.default?.() ?? []);
 		}
-		function b(e) {
+		function S(e) {
 			let t = 0;
-			for (let n of e) n?.type?.__povesteType === "variant" ? t++ : Array.isArray(n?.children) && (t += b(n.children));
+			for (let n of e) n?.type?.__povesteType === "variant" ? t++ : Array.isArray(n?.children) && (t += S(n.children));
 			return t;
 		}
-		function x(e) {
+		function C(e) {
 			e.nextVariantIndex.value = 0;
 			let t = { state: e.externalState }, n = [];
-			e.slotName === "controls" && n.push(...a.slots.controls?.(t) ?? []), (e.slotName === "default" || o.story.meta?.hasVariantChildComponents) && n.push(...a.slots.default?.(t) ?? []);
-			let i = e.currentVariant;
-			if (e.slotName === "default" && i && b(n) === o.story.variants.length) {
-				let t = o.story.variants.findIndex((e) => e.id === i.id);
+			e.slotName === "controls" && n.push(...c.slots.controls?.(t) ?? []), (e.slotName === "default" || l.story.meta?.hasVariantChildComponents) && n.push(...c.slots.default?.(t) ?? []);
+			let r = e.currentVariant;
+			if (e.slotName === "default" && r && S(n) === l.story.variants.length) {
+				let t = l.story.variants.findIndex((e) => e.id === r.id);
 				if (t !== -1) {
-					let i = 0, a = !1, o = (e) => {
+					let r = 0, i = !1, a = (e) => {
 						let n = [];
 						for (let s of e) {
 							if (s?.type?.__povesteType === "variant") {
-								i === t && (n.push(r(s, v(s))), a = !0), i++;
+								r === t && (n.push(o(s, b(s))), i = !0), r++;
 								continue;
 							}
-							Array.isArray(s?.children) && s.children.length && (s.children = o(s.children)), n.push(s);
+							Array.isArray(s?.children) && s.children.length && (s.children = a(s.children)), n.push(s);
 						}
 						return n;
-					}, s = o(n);
-					if (a) return e.nextVariantIndex.value = t, s;
+					}, s = a(n);
+					if (i) return e.nextVariantIndex.value = t, s;
 				}
 			}
 			return n;
@@ -115,7 +116,7 @@ var f = a({
 	render() {
 		this.updateStory();
 		let [e] = this.story.variants;
-		if (e?.id === "_default") return o(n, {
+		if (e?.id === "_default") return l(a, {
 			variant: e,
 			...this.initState ? { initState: this.initState } : {},
 			implicit: !0,
@@ -126,4 +127,4 @@ var f = a({
 	}
 });
 //#endregion
-export { f as default };
+export { m as default };

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

@@ -1,10 +1,11 @@
-import { useRenderContext as e } from "./render-context.js";
-import { syncStateBundledAndExternal as t, toRawDeep as n, useInstance as r } from "./util.js";
-import { syncVariantAutoProps as i } from "./auto-props.js";
-import { computed as a, defineComponent as o, inject as s, onBeforeUnmount as c, useAttrs as l } from "vue";
-import { applyState as u, autoPropsStateKeys as d } from "@poveste/shared";
+import { implicitStateContext as e, storyContext as t } from "./context.js";
+import { useRenderContext as n } from "./render-context.js";
+import { syncStateBundledAndExternal as r, toRawDeep as i, useInstance as a } from "./util.js";
+import { syncVariantAutoProps as o } from "./auto-props.js";
+import { computed as s, defineComponent as c, onBeforeUnmount as l, useAttrs as u } from "vue";
+import { applyState as d, autoPropsStateKeys as f } from "@poveste/shared";
 //#region src/client/app/Variant.ts
-var f = o({
+var p = c({
 	name: "Variant",
 	__povesteType: "variant",
 	props: {
@@ -37,50 +38,50 @@ var f = o({
 			default: !1
 		}
 	},
-	async setup(o) {
-		let f = l(), p = r("Variant"), m = s("story"), h = s("implicitState"), g = e(), _, v, y = null, b;
-		c(() => {
-			y?.stop(), b?.stop();
+	async setup(c) {
+		let p = u(), m = a("Variant"), h = t.injectOptional(), g = e.injectOptional(), _ = n(), v, y, b = null, x;
+		l(() => {
+			b?.stop(), x?.stop();
 		});
-		let x = a(() => f.variant);
-		if (g?.mode !== "render" && typeof o.initState == "function" && x.value) {
-			let e = await o.initState();
-			u(x.value.state, n(e));
+		let S = s(() => p.variant);
+		if (_?.mode !== "render" && typeof c.initState == "function" && S.value) {
+			let e = await c.initState();
+			d(S.value.state, i(e));
 		}
-		g?.mode !== "render" && x.value && h && (b = t(x.value.state, h(), d));
-		function S(e) {
+		_?.mode !== "render" && _?.syncState !== !1 && S.value && g && (x = r(S.value.state, g(), f));
+		function C(e) {
 			Object.assign(e, {
-				slots: () => p.slots,
-				source: o.source,
-				responsiveDisabled: o.responsiveDisabled,
-				autoPropsDisabled: o.autoPropsDisabled,
-				setupApp: o.setupApp,
-				meta: o.meta,
+				slots: () => m.slots,
+				source: c.source,
+				responsiveDisabled: c.responsiveDisabled,
+				autoPropsDisabled: c.autoPropsDisabled,
+				setupApp: c.setupApp,
+				meta: c.meta,
 				configReady: !0
 			});
-			let t = m?.value;
-			t && !o.implicit && !t.meta?.hasVariantChildComponents && (t.meta ||= {}, Object.assign(t.meta, { hasVariantChildComponents: !0 }));
+			let t = h?.value;
+			t && !c.implicit && !t.meta?.hasVariantChildComponents && (t.meta ||= {}, Object.assign(t.meta, { hasVariantChildComponents: !0 }));
 		}
-		function C() {
-			return f.variant ? f.variant : g?.mode === "render" ? (v || (v = m?.value?.variants[g.nextVariantIndex.value], g.nextVariantIndex.value++), v) : null;
+		function w() {
+			return p.variant ? p.variant : _?.mode === "render" ? (y || (y = h?.value?.variants[_.nextVariantIndex.value], _.nextVariantIndex.value++), y) : null;
 		}
-		function w(e, t) {
-			if (t.slotName === "controls") return p.slots.controls?.({ state: t.externalState }) ?? null;
+		function T(e, t) {
+			if (t.slotName === "controls") return m.slots.controls?.({ state: t.externalState }) ?? null;
 			if (t.slotName !== "default") return null;
-			let n = p.slots.default?.({ state: t.externalState }) ?? null;
-			return n && !e.autoPropsDisabled && (_ = i(e, n, t.externalState, _)), n;
+			let n = m.slots.default?.({ state: t.externalState }) ?? null;
+			return n && !e.autoPropsDisabled && (v = o(e, n, t.externalState, v)), n;
 		}
-		function T(e) {
-			if (!h) return;
-			let n = g?.mode === "render" && g.currentVariant?.id === e.id;
-			n && !y ? y = t(e.state, h(), d) : !n && y && (y.stop(), y = null);
+		function E(e) {
+			if (!g) return;
+			let t = _?.mode === "render" && _.currentVariant?.id === e.id;
+			t && !b ? b = r(e.state, g(), f) : !t && b && (b.stop(), b = null);
 		}
-		return x.value && S(x.value), {
-			renderContext: g,
-			renderVariantSlot: w,
-			resolveVariant: C,
-			syncRenderVariantState: T,
-			updateVariant: S
+		return S.value && C(S.value), {
+			renderContext: _,
+			renderVariantSlot: T,
+			resolveVariant: w,
+			syncRenderVariantState: E,
+			updateVariant: C
 		};
 	},
 	render() {
@@ -92,4 +93,4 @@ var f = o({
 	}
 });
 //#endregion
-export { f as default };
+export { p as default };

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

@@ -0,0 +1,5 @@
+import { createContext as e } from "../context.js";
+//#region src/client/app/context.ts
+var t = e("poveste-app-story", "<Story>"), n = e("poveste-app-implicit-state", "<Story>");
+//#endregion
+export { n as implicitStateContext, t as storyContext };

package/dist/bundled/client/app/global-components.js

@@ -25,7 +25,7 @@ function m(e) {
 			function _() {
 				g.value.forEach((e, t) => {
 					let n = f.value?.querySelector(`[renderslotid="${t}"]`), r = o.value?.querySelector(`[slotid="${t}"]`);
-					if (!(!n || !r)) {
+					if (n && r) {
 						for (; r.lastChild;) r.removeChild(r.lastChild);
 						r.appendChild(n);
 					}

package/dist/bundled/client/app/render-context.js

@@ -1,11 +1,11 @@
-import { inject as e, provide as t } from "vue";
+import { createContext as e } from "../context.js";
 //#region src/client/app/render-context.ts
-var n = Symbol("poveste-preview-render-context");
-function r(e) {
-	t(n, e);
+var t = e("poveste-preview-render-context", "<Story>");
+function n(e) {
+	t.provide(e);
 }
-function i() {
-	return e(n, null);
+function r() {
+	return t.injectOptional();
 }
 //#endregion
-export { r as provideRenderContext, i as useRenderContext };
+export { n as provideRenderContext, r as useRenderContext };

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

@@ -1,76 +1,81 @@
 import { isRef as e, unref as t, watch as n } from "@poveste/vendors/vue";
-import { getCurrentInstance as r, isRef as i, unref as a, watch as o } from "vue";
-import { applyState as s, createStateBaseline as c } from "@poveste/shared";
+import { getCurrentInstance as r, isReadonly as i, isRef as a, markRaw as o, unref as s, watch as c } from "vue";
+import { applyState as l, createStateBaseline as u, isMarkedRaw as d, isPlainObject as f } from "@poveste/shared";
 //#region src/client/app/util.ts
-var l = (e) => typeof e == "object" && !!e;
-function u(e, t = /* @__PURE__ */ new WeakMap()) {
-	let n = i(e) ? a(e) : e;
+var p = (e) => typeof e == "object" && !!e;
+function m(e, t = /* @__PURE__ */ new WeakMap()) {
+	let n = a(e) ? s(e) : e;
 	if (typeof n == "symbol") return n.toString();
-	if (!l(n)) return n;
+	if (!p(n) || d(n)) return n;
 	if (t.has(n)) return t.get(n);
+	if (!Array.isArray(n) && !f(n)) return o(n);
 	if (Array.isArray(n)) {
 		let e = [];
-		return t.set(n, e), e.push(...n.map((e) => u(e, t))), e;
+		return t.set(n, e), e.push(...n.map((e) => m(e, t))), e;
 	}
 	{
 		let e = {};
-		return t.set(n, e), d(n, e, t), e;
+		return t.set(n, e), h(n, e, t), e;
 	}
 }
-function d(e, t, n = /* @__PURE__ */ new WeakMap()) {
+function h(e, t, n = /* @__PURE__ */ new WeakMap()) {
 	Object.keys(e).forEach((r) => {
-		t[r] = u(e[r], n);
+		t[r] = m(e[r], n);
 	});
 }
-function f(n, r = /* @__PURE__ */ new WeakMap()) {
+function g(n, r = /* @__PURE__ */ new WeakMap()) {
 	let i = e(n) ? t(n) : n;
 	if (typeof i == "symbol") return i.toString();
-	if (!l(i)) return i;
+	if (!p(i) || d(i)) return i;
 	if (r.has(i)) return r.get(i);
+	if (!Array.isArray(i) && !f(i)) return o(i);
 	if (Array.isArray(i)) {
 		let e = [];
-		return r.set(i, e), e.push(...i.map((e) => f(e, r))), e;
+		return r.set(i, e), e.push(...i.map((e) => g(e, r))), e;
 	}
 	{
 		let e = {};
-		return r.set(i, e), p(i, e, r), e;
+		return r.set(i, e), _(i, e, r), e;
 	}
 }
-function p(e, t, n = /* @__PURE__ */ new WeakMap()) {
+function _(e, t, n = /* @__PURE__ */ new WeakMap()) {
 	Object.keys(e).forEach((r) => {
-		t[r] = u(e[r], n);
+		t[r] = g(e[r], n);
 	});
 }
-function m(e, t) {
+function v(e, t) {
 	if (!t.length) return e;
 	let n = { ...e };
 	for (let e of t) delete n[e];
 	return n;
 }
-function h(e, t, r = []) {
-	let i = c(), a = n(() => e, (e) => {
+function y(e, t, r = []) {
+	let i = u(), a = n(() => e, (e) => {
 		if (e == null) return;
-		let n = i.take(m(f(e), r));
-		n && s(t, n);
+		let n = i.take(v(g(e), r));
+		n && l(t, n);
 	}, {
 		deep: !0,
 		immediate: !0
-	}), l = o(() => t, (t) => {
+	}), o = c(() => t, (t) => {
 		if (t == null) return;
-		let n = i.take(m(u(t), r));
-		n && s(e, n);
+		let n = i.take(v(m(t), r));
+		n && l(e, n);
 	}, {
 		deep: !0,
 		immediate: !0
 	});
 	return { stop() {
-		a(), l();
+		a(), o();
 	} };
 }
-function g(e) {
+function b(e) {
+	return !(a(e) && i(e));
+}
+function x(e) {
 	let t = r();
 	if (!t) throw Error(`[poveste] <${e}> can only be set up inside a component`);
 	return t;
 }
 //#endregion
-export { f as _toRawDeep, h as syncStateBundledAndExternal, u as toRawDeep, g as useInstance };
+export { g as _toRawDeep, b as isWritableBinding, y as syncStateBundledAndExternal, m as toRawDeep, x as useInstance };

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,40 +39,40 @@ var a = t({
 			default: void 0
 		}
 	},
-	setup(e) {
-		let t = n("hstStoryFile"), a = e.id ?? t?.id, o = e.title ?? t?.fileName;
-		if (!a || o === void 0) throw Error("[poveste] a <Story> collected outside a story file needs an `id` and a `title`");
-		let s = {
-			id: a,
-			title: o,
-			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)?.(s), i("story", s), i("addVariant", (e) => {
-			s.variants.push(e);
-		}), r(() => {
-			s.variants.length || s.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: s };
+		}), { 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,24 +25,19 @@ var n = e({
 			default: void 0
 		}
 	},
-	setup(e) {
-		let n = t("story");
-		function r() {
-			if (!n) throw Error("[poveste] a <Variant> with no `id` has to be inside a <Story>");
-			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 };