@poveste/app 0.13.0 → 0.14.0

package/dist/bundled/components/panel/StatePresets.vue_vue_type_script_setup_true_lang.js

@@ -6,14 +6,13 @@ import { Icon } from "@poveste/vendors/iconify";
 import { applyState, clone } from "@poveste/shared";
 //#region src/app/components/panel/StatePresets.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-state-presets flex gap-2 w-full items-center" };
-var _hoisted_2 = ["onUpdate:modelValue"];
-var _hoisted_3 = {
+var _hoisted_2 = {
 	key: 1,
 	class: "flex items-center gap-2"
 };
-var _hoisted_4 = { class: "flex-1 truncate" };
-var _hoisted_5 = { class: "flex gap-2 items-center" };
-var _hoisted_6 = { class: "flex-1 truncate" };
+var _hoisted_3 = { class: "flex-1 truncate" };
+var _hoisted_4 = { class: "flex gap-2 items-center" };
+var _hoisted_5 = { class: "flex-1 truncate" };
 var DEFAULT_ID = "default";
 var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StatePresets",
@@ -41,7 +40,10 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		}
 		function applyPreset(id) {
 			if (id === DEFAULT_ID) resetState();
-			else if (presetStates.value.has(id)) applyState(props.variant.state, clone(toRawDeep(presetStates.value.get(id).state)));
+			else {
+				const preset = presetStates.value.get(id);
+				if (preset) applyState(props.variant.state, clone(toRawDeep(preset.state)));
+			}
 		}
 		onMounted(() => {
 			if (selectedOption.value !== DEFAULT_ID) applyPreset(selectedOption.value);
@@ -59,8 +61,15 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			selectedOption.value = id;
 			isEditing.value = true;
 			await nextTick();
-			input.value.select();
+			input.value?.select();
 		}
+		const editingLabel = computed({
+			get: () => presetStates.value.get(selectedOption.value)?.label ?? "",
+			set: (value) => {
+				const preset = presetStates.value.get(selectedOption.value);
+				if (preset) preset.label = value;
+			}
+		});
 		const savedNotif = ref(false);
 		const savedTimeout = useTimeoutFn(() => {
 			savedNotif.value = false;
@@ -68,6 +77,7 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		async function savePreset() {
 			if (!canEdit.value) return;
 			const preset = presetStates.value.get(selectedOption.value);
+			if (!preset) return;
 			preset.state = toPresetState(props.variant.state, omitKeys);
 			savedNotif.value = true;
 			savedTimeout.start();
@@ -81,7 +91,7 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			if (!canEdit.value) return;
 			isEditing.value = true;
 			await nextTick();
-			input.value.select();
+			input.value?.select();
 		}
 		function stopEditing() {
 			isEditing.value = false;
@@ -96,27 +106,27 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					class: "flex-1 min-w-0"
 				}, [createVNode(BaseSelect_default, {
 					modelValue: unref(selectedOption),
-					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(selectedOption) ? selectedOption.value = $event : null),
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(selectedOption) ? selectedOption.value = $event : null),
 					options: presetsOptions.value,
-					onDblclick: _cache[3] || (_cache[3] = ($event) => startEditing()),
-					onKeydown: [_cache[4] || (_cache[4] = withKeys(($event) => stopEditing(), ["enter"])), _cache[5] || (_cache[5] = withKeys(($event) => stopEditing(), ["escape"]))],
-					onSelect: _cache[6] || (_cache[6] = (id) => applyPreset(id))
+					onDblclick: _cache[4] || (_cache[4] = ($event) => startEditing()),
+					onKeydown: [_cache[5] || (_cache[5] = withKeys(($event) => stopEditing(), ["enter"])), _cache[6] || (_cache[6] = withKeys(($event) => stopEditing(), ["escape"]))],
+					onSelect: _cache[7] || (_cache[7] = (id) => applyPreset(id))
 				}, {
 					default: withCtx(({ label }) => [isEditing.value ? withDirectives((openBlock(), createElementBlock("input", {
 						key: 0,
 						ref_key: "input",
 						ref: input,
-						"onUpdate:modelValue": ($event) => unref(presetStates).get(unref(selectedOption)).label = $event,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => editingLabel.value = $event),
 						type: "text",
 						class: "text-inherit bg-transparent w-full h-full outline-none",
-						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop", "prevent"]))
-					}, null, 8, _hoisted_2)), [[vModelText, unref(presetStates).get(unref(selectedOption)).label]]) : (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("span", _hoisted_4, toDisplayString(label), 1), canEdit.value ? withDirectives((openBlock(), createBlock(unref(Icon), {
+						onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop", "prevent"]))
+					}, null, 512)), [[vModelText, editingLabel.value]]) : (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(label), 1), canEdit.value ? withDirectives((openBlock(), createBlock(unref(Icon), {
 						key: 0,
 						icon: "carbon:edit",
 						class: "flex-none cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100",
-						onClick: _cache[1] || (_cache[1] = withModifiers(($event) => startEditing(), ["stop"]))
+						onClick: _cache[2] || (_cache[2] = withModifiers(($event) => startEditing(), ["stop"]))
 					}, null, 512)), [[_directive_tooltip, "Rename this preset"]]) : createCommentVNode("", true)]))]),
-					option: withCtx(({ label, value }) => [createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(label), 1), value !== DEFAULT_ID ? withDirectives((openBlock(), createBlock(unref(Icon), {
+					option: withCtx(({ label, value }) => [createElementVNode("div", _hoisted_4, [createElementVNode("span", _hoisted_5, toDisplayString(label), 1), value !== DEFAULT_ID ? withDirectives((openBlock(), createBlock(unref(Icon), {
 						key: 0,
 						icon: "carbon:trash-can",
 						class: "flex-none cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100",
@@ -128,18 +138,18 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					"data-testid": "preset-save",
 					icon: savedNotif.value ? "carbon:checkmark" : "carbon:save",
 					class: normalizeClass(["cursor-pointer w-4 h-4 hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100", [canEdit.value ? "opacity-50 hover:opacity-100" : "opacity-25 pointer-events-none"]]),
-					onClick: _cache[7] || (_cache[7] = ($event) => savePreset())
+					onClick: _cache[8] || (_cache[8] = ($event) => savePreset())
 				}, null, 8, ["icon", "class"]), [[_directive_tooltip, savedNotif.value ? "Saved!" : canEdit.value ? "Save to preset" : null]]),
 				withDirectives(createVNode(unref(Icon), {
 					"data-testid": "preset-create",
 					icon: "carbon:add-alt",
 					class: "cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100",
-					onClick: _cache[8] || (_cache[8] = ($event) => createPreset())
+					onClick: _cache[9] || (_cache[9] = ($event) => createPreset())
 				}, null, 512), [[_directive_tooltip, "Create new preset"]]),
 				withDirectives(createVNode(unref(Icon), {
 					icon: "carbon:reset",
 					class: "cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100",
-					onClick: _cache[9] || (_cache[9] = ($event) => resetState())
+					onClick: _cache[10] || (_cache[10] = ($event) => resetState())
 				}, null, 512), [[_directive_tooltip, "Reset to initial state"]])
 			]);
 		};

package/dist/bundled/components/panel/StoryControls.vue_vue_type_script_setup_true_lang.js

@@ -31,7 +31,7 @@ var StoryControls_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		watch(() => props.variant, () => {
 			ready.value = false;
 		});
-		const hasCustomControls = computed(() => props.variant.slots().controls || props.story.slots().controls);
+		const hasCustomControls = computed(() => props.variant.slots?.().controls || props.story.slots?.().controls);
 		const hasInitState = computed(() => Object.entries(props.variant.state || {}).some(([key]) => !key.startsWith("_h")));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [

package/dist/bundled/components/panel/StoryDocs.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,9 @@ var _hoisted_1 = ["innerHTML"];
 function useStoryDoc(story) {
 	const renderedDoc = ref("");
 	watchEffect(async () => {
-		const mdKey = story.value.file.filePath.replace(/\.(\w*)$/, ".md");
+		const filePath = story.value?.file?.filePath;
+		if (!filePath) return;
+		const mdKey = filePath.replace(/\.(\w*)$/, ".md");
 		if (markdownFiles[mdKey]) {
 			const md = await markdownFiles[mdKey]();
 			renderedDoc.value = md.html;

package/dist/bundled/components/panel/StoryEvent.vue_vue_type_script_setup_true_lang.js

@@ -14,7 +14,11 @@ var StoryEvent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const formattedArgument = computed(() => {
 			switch (typeof props.event.argument) {
 				case "string": return `"${props.event.argument}"`;
-				case "object": return `{ ${Object.keys(props.event.argument).map((key) => `${key}: ${props.event.argument[key]}`).join(", ")} }`;
+				case "object": {
+					const argument = props.event.argument;
+					if (!argument) return "null";
+					return `{ ${Object.keys(argument).map((key) => `${key}: ${argument[key]}`).join(", ")} }`;
+				}
 				default: return props.event.argument;
 			}
 		});

package/dist/bundled/components/panel/StoryEvents.vue_vue_type_script_setup_true_lang.js

@@ -16,7 +16,8 @@ var StoryEvents_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		async function resetUnseen() {
 			if (eventsStore.unseen > 0) eventsStore.unseen = 0;
 			await nextTick();
-			eventsElement.value.scrollTo({ top: eventsElement.value.scrollHeight });
+			const events = eventsElement.value;
+			events?.scrollTo({ top: events.scrollHeight });
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {

package/dist/bundled/components/panel/StorySidePanel.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import PaneTabs_default from "./PaneTabs.js";
 import StoryControls_default from "./StoryControls.js";
 import StoryEvents_default from "./StoryEvents.js";
 import StorySourceCode_default from "./StorySourceCode.js";
-import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, resolveDynamicComponent, unref, withCtx } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, resolveDynamicComponent, unref, withCtx } from "@poveste/vendors/vue";
 import { useRoute } from "@poveste/vendors/vue-router";
 //#region src/app/components/panel/StorySidePanel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "h-full w-full p-2" };
@@ -47,19 +47,21 @@ var StorySidePanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				class: "poveste-story-side-panel poveste-loaded h-full",
 				"data-testid": "story-side-panel"
 			}, {
-				first: withCtx(() => [createElementVNode("div", _hoisted_3, [createVNode(PaneTabs_default, {
+				first: withCtx(() => [createElementVNode("div", _hoisted_3, [unref(storyStore).currentStory ? (openBlock(), createBlock(PaneTabs_default, {
+					key: 0,
 					story: unref(storyStore).currentStory,
 					variant: unref(storyStore).currentVariant
-				}, null, 8, ["story", "variant"]), (openBlock(), createBlock(resolveDynamicComponent(panelContentComponent.value), {
+				}, null, 8, ["story", "variant"])) : createCommentVNode("", true), (openBlock(), createBlock(resolveDynamicComponent(panelContentComponent.value), {
 					story: unref(storyStore).currentStory,
 					variant: unref(storyStore).currentVariant,
 					class: "h-full overflow-auto"
 				}, null, 8, ["story", "variant"]))])]),
-				last: withCtx(() => [createVNode(StorySourceCode_default, {
+				last: withCtx(() => [unref(storyStore).currentStory ? (openBlock(), createBlock(StorySourceCode_default, {
+					key: 0,
 					story: unref(storyStore).currentStory,
 					variant: unref(storyStore).currentVariant,
 					class: "h-full"
-				}, null, 8, ["story", "variant"])]),
+				}, null, 8, ["story", "variant"])) : createCommentVNode("", true)]),
 				_: 1
 			}, 8, ["save-id", "orientation"]))])]);
 		};

package/dist/bundled/components/panel/StorySourceCode.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StorySourceCode_vue_vue_type_script_setup_true_lang_default from "./StorySourceCode.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                */
 //#region src/app/components/panel/StorySourceCode.vue
-var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3d88bdb3"]]);
+var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ec6c2034"]]);
 //#endregion
 export { StorySourceCode_default as default };

package/dist/bundled/components/panel/StorySourceCode.vue_vue_type_script_setup_true_lang.js

@@ -27,9 +27,10 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	},
 	setup(__props) {
 		const props = __props;
-		const generateSourceCodeFn = ref(null);
+		const generateSourceCodeFn = shallowRef(null);
 		watchEffect(async () => {
-			const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId];
+			const supportPluginId = props.story.file?.supportPluginId;
+			const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
 			if (clientPlugin) {
 				const pluginModule = await clientPlugin();
 				generateSourceCodeFn.value = markRaw(pluginModule.generateSourceCode);
@@ -77,7 +78,7 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		});
 		const sourceHtml = computed(() => displayedSourceCode.value ? highlighter.value?.codeToHtml(displayedSourceCode.value, {
 			lang: "html",
-			theme: isDark.value ? "github-dark" : "github-light"
+			theme: isDark.value ? "github-dark" : "github-light-high-contrast"
 		}) : "");
 		let lastScroll = 0;
 		watch(() => props.variant, () => {
@@ -97,13 +98,13 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				_cache[2] || (_cache[2] = createElementVNode("div", { class: "text-gray-900 dark:text-gray-100" }, " Source ", -1)),
 				_cache[3] || (_cache[3] = createElementVNode("div", { class: "flex-1" }, null, -1)),
 				createElementVNode("div", _hoisted_3, [withDirectives((openBlock(), createElementBlock("button", {
-					class: normalizeClass(["flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-l transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden", [displayedSource.value !== "dynamic" ? "max-w-6 opacity-70" : "max-w-[82px] text-primary-600 dark:text-primary-400", dynamicSourceCode.value ? "cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50" : "opacity-50"]]),
+					class: normalizeClass(["flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-l transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden", [displayedSource.value !== "dynamic" ? "max-w-6 opacity-70" : "max-w-[82px] text-primary-800 dark:text-primary-400", dynamicSourceCode.value ? "cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50" : "opacity-50"]]),
 					onClick: _cache[0] || (_cache[0] = ($event) => dynamicSourceCode.value && (displayedSource.value = "dynamic"))
 				}, [createVNode(unref(Icon), {
 					icon: "carbon:flash",
 					class: "w-4 h-4 flex-none"
 				}), createElementVNode("span", { class: normalizeClass(["transition-opacity duration-300", { "opacity-0": displayedSource.value !== "dynamic" }]) }, " Dynamic ", 2)], 2)), [[_directive_tooltip, !dynamicSourceCode.value ? "Dynamic source code is not available" : displayedSource.value !== "dynamic" ? "Switch to dynamic source" : null]]), withDirectives((openBlock(), createElementBlock("button", {
-					class: normalizeClass(["flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-r transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden", [displayedSource.value !== "static" ? "max-w-6 opacity-70" : "max-w-[63px] text-primary-600 dark:text-primary-400", staticSourceCode.value ? "cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50" : "opacity-50"]]),
+					class: normalizeClass(["flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-r transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden", [displayedSource.value !== "static" ? "max-w-6 opacity-70" : "max-w-[63px] text-primary-800 dark:text-primary-400", staticSourceCode.value ? "cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50" : "opacity-50"]]),
 					onClick: _cache[1] || (_cache[1] = ($event) => staticSourceCode.value && (displayedSource.value = "static"))
 				}, [createVNode(unref(Icon), {
 					icon: "carbon:document",

package/dist/bundled/components/search/SearchPane.vue_vue_type_script_setup_true_lang.js

@@ -50,7 +50,7 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		watch(() => props.shown, (value) => {
 			if (value) requestAnimationFrame(() => {
 				focused.value = true;
-				input.value.select();
+				input.value?.select();
 			});
 		});
 		const searchInputText = ref("");
@@ -95,14 +95,18 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				const idMapData = titleIdMap[document.item.id];
 				if (!idMapData) continue;
 				switch (idMapData.kind) {
-					case "story":
-						list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank));
+					case "story": {
+						const story = storyStore.getStoryById(idMapData.id);
+						if (!story) continue;
+						list.push(storyResultFactory(story, rank));
 						rank++;
 						break;
+					}
 					case "variant": {
 						const [storyId] = idMapData.id.split(":");
 						const story = storyStore.getStoryById(storyId);
 						const variant = storyStore.getVariantById(idMapData.id);
+						if (!story || !variant) continue;
 						list.push(variantResultFactory(story, variant, rank));
 						rank++;
 						break;
@@ -121,9 +125,13 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					const idMapData = docIdMap[document.item.id];
 					if (!idMapData) continue;
 					switch (idMapData.kind) {
-						case "story":
-							list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank, "docs"));
+						case "story": {
+							const story = storyStore.getStoryById(idMapData.id);
+							if (!story) continue;
+							list.push(storyResultFactory(story, rank, "docs"));
 							rank++;
+							break;
+						}
 					}
 				}
 				docsResults.value = list;
@@ -141,7 +149,7 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					params: { storyId: story.id },
 					query: { ...type === "docs" ? { tab: "docs" } : {} }
 				},
-				path: story.file.path.slice(0, -1),
+				path: story.file?.path.slice(0, -1) ?? [],
 				icon: story.icon,
 				iconColor: story.iconColor
 			};
@@ -160,7 +168,7 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 						...type === "docs" ? { tab: "docs" } : {}
 					}
 				},
-				path: [...story.file.path ?? [], story.title],
+				path: [...story.file?.path ?? [], story.title],
 				icon: variant.icon,
 				iconColor: variant.iconColor
 			};

package/dist/bundled/components/story/GenericMountStory.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,8 @@ var GenericMountStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const props = __props;
 		const mountComponent = ref(null);
 		watchEffect(async () => {
-			const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId];
+			const supportPluginId = props.story.file?.supportPluginId;
+			const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
 			if (clientPlugin) {
 				const pluginModule = await clientPlugin();
 				mountComponent.value = markRaw(pluginModule.MountStory);

package/dist/bundled/components/story/GenericRenderStory.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,8 @@ var GenericRenderStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		const props = __props;
 		const mountComponent = ref(null);
 		watchEffect(async () => {
-			const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId];
+			const supportPluginId = props.story.file?.supportPluginId;
+			const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
 			if (clientPlugin) try {
 				const pluginModule = await clientPlugin();
 				mountComponent.value = markRaw(pluginModule.RenderStory);

package/dist/bundled/components/story/StoryResponsivePreview.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default from "./StoryResponsivePreview.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                       */
 //#region src/app/components/story/StoryResponsivePreview.vue
-var StoryResponsivePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-380b627d"]]);
+var StoryResponsivePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d3057f34"]]);
 //#endregion
 export { StoryResponsivePreview_default as default };

package/dist/bundled/components/story/StoryResponsivePreview.vue_vue_type_script_setup_true_lang.js

@@ -23,7 +23,7 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		}
 	},
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v0cb511a0": unref(settings).backgroundColor }));
+		useCssVars((_ctx) => ({ "v372ee944": unref(settings).backgroundColor }));
 		const props = __props;
 		const settings = usePreviewSettingsStore().currentSettings;
 		const resizing = ref(false);
@@ -42,18 +42,29 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		}
 		const previewWrapper = ref();
 		function useDragger(el, value, min, max, axis) {
+			function wrapperSize() {
+				const wrapper = previewWrapper.value;
+				if (!wrapper) return null;
+				return axis === "x" ? wrapper.clientWidth : wrapper.clientHeight;
+			}
+			function startFrom() {
+				if (value.value !== null) return value.value;
+				const size = wrapperSize();
+				if (size === null) return min;
+				return size - (axis === "x" ? 67 : 70);
+			}
 			function onMouseDown(event) {
 				event.preventDefault();
 				event.stopPropagation();
 				const start = axis === "x" ? event.clientX : event.clientY;
-				const startValue = value.value ?? (axis === "x" ? previewWrapper.value.clientWidth - 67 : previewWrapper.value.clientHeight - 70);
+				const startValue = startFrom();
 				resizing.value = true;
 				const removeListeners = [addWindowListener("mousemove", onMouseMove), addWindowListener("mouseup", onMouseUp)];
 				function onMouseMove(event) {
-					const snapTarget = axis === "x" ? previewWrapper.value.clientWidth : previewWrapper.value.clientHeight;
+					const snapTarget = wrapperSize();
 					const delta = (axis === "x" ? event.clientX : event.clientY) - start;
 					value.value = Math.max(min, Math.min(max, startValue + delta));
-					if (Math.abs(value.value - (snapTarget - 67)) < 16) value.value = null;
+					if (snapTarget !== null && Math.abs(value.value - (snapTarget - 67)) < 16) value.value = null;
 				}
 				function onMouseUp() {
 					removeListeners.forEach((fn) => fn());
@@ -65,7 +76,7 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 				event.preventDefault();
 				event.stopPropagation();
 				const start = axis === "x" ? event.touches[0].clientX : event.touches[0].clientY;
-				const startValue = value.value;
+				const startValue = startFrom();
 				resizing.value = true;
 				const removeListeners = [
 					addWindowListener("touchmove", onTouchMove),
@@ -130,7 +141,7 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 				finalWidth: finalWidth.value,
 				finalHeight: finalHeight.value,
 				resizing: resizing.value
-			}, void 0, true)]), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[1] || (_cache[1] = createStaticVNode("<div class=\"absolute top-5 left-8 h-2 w-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-380b627d></div>", 8))], 64)) : createCommentVNode("", true)], 2)], 10, _hoisted_3), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+			}, void 0, true)]), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[1] || (_cache[1] = createStaticVNode("<div class=\"absolute top-5 left-8 h-2 w-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-d3057f34></div>", 8))], 64)) : createCommentVNode("", true)], 2)], 10, _hoisted_3), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
 				withDirectives((openBlock(), createElementBlock("div", {
 					ref_key: "horizontalDragger",
 					ref: horizontalDragger,

package/dist/bundled/components/story/StoryVariantGrid.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryVariantGrid_vue_vue_type_script_setup_true_lang_default from "./StoryVariantGrid.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                 */
 //#region src/app/components/story/StoryVariantGrid.vue
-var StoryVariantGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantGrid_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5f7bc1e1"]]);
+var StoryVariantGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantGrid_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a753c25f"]]);
 //#endregion
 export { StoryVariantGrid_default as default };

package/dist/bundled/components/story/StoryVariantGrid.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { useStoryStore } from "../../stores/story.js";
 import { assignSlots, trimSlots } from "../../util/grid-slots.js";
 import StoryVariantGridItem_default from "./StoryVariantGridItem.js";
 import { useDebounceFn, useResizeObserver } from "@poveste/vendors/vue-use";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, unref, watch } from "@poveste/vendors/vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, unref, watch } from "@poveste/vendors/vue";
 //#region src/app/components/story/StoryVariantGrid.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-story-variant-grid flex flex-col items-stretch h-full __poveste-pane-shadow-from-right" };
 var _hoisted_2 = { class: "flex w-0 flex-1 mx-4" };
@@ -17,17 +17,18 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	setup(__props) {
 		const storyStore = useStoryStore();
 		const gridTemplateWidth = computed(() => {
-			if (storyStore.currentStory.layout.type !== "grid") return;
-			const layoutWidth = storyStore.currentStory.layout.width;
+			const layout = storyStore.currentStory?.layout;
+			if (layout?.type !== "grid") return;
+			const layoutWidth = layout.width;
 			if (!layoutWidth) return "200px";
 			if (typeof layoutWidth === "number") return `${layoutWidth}px`;
 			return layoutWidth;
 		});
 		const maxItemHeight = ref(0);
-		const el = ref(null);
+		const el = ref();
 		const scrollTop = ref(0);
 		const viewportHeight = ref(0);
-		const variants = computed(() => storyStore.currentStory.variants);
+		const variants = computed(() => storyStore.currentStory?.variants ?? []);
 		useResizeObserver(el, () => {
 			updateWindow();
 			updateSize();
@@ -60,14 +61,16 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				updateWindow();
 			}
 		}
-		const gridEl = ref(null);
+		const gridEl = ref();
 		const gridColumnWidth = ref(1);
 		const viewWidth = ref(1);
 		function updateSize() {
 			if (!el.value) return;
 			viewWidth.value = el.value.clientWidth;
 			if (!gridEl.value) return;
-			if (gridTemplateWidth.value.endsWith("%")) gridColumnWidth.value = viewWidth.value * Number.parseInt(gridTemplateWidth.value) / 100 - gap;
+			const templateWidth = gridTemplateWidth.value;
+			if (!templateWidth) return;
+			if (templateWidth.endsWith("%")) gridColumnWidth.value = viewWidth.value * Number.parseInt(templateWidth) / 100 - gap;
 			else gridColumnWidth.value = Number.parseInt(gridTemplateWidth.value);
 		}
 		onMounted(() => {
@@ -105,7 +108,9 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			}, TRIM_DELAY);
 		}
 		watch(visibleVariants, (visible) => {
-			slots.value = assignSlots(slots.value, storyStore.currentStory.id, visible);
+			const story = storyStore.currentStory;
+			if (!story) return;
+			slots.value = assignSlots(slots.value, story.id, visible);
 			scheduleTrim();
 		}, { immediate: true });
 		onBeforeUnmount(() => {
@@ -143,7 +148,7 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					gridTemplateColumns: `repeat(${columnCount.value}, ${gridColumnWidth.value}px)`,
 					transform: offsetY.value ? `translateY(${offsetY.value}px)` : void 0
 				})
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(slots.value, (slot, index) => {
+			}, [unref(storyStore).currentStory ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(slots.value, (slot, index) => {
 				return openBlock(), createBlock(StoryVariantGridItem_default, {
 					key: index,
 					variant: slot.variant,
@@ -158,7 +163,7 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"story",
 					"style"
 				]);
-			}), 128))], 4)], 4)])], 544)]);
+			}), 128)) : createCommentVNode("", true)], 4)], 4)])], 544)]);
 		};
 	}
 });

package/dist/bundled/components/story/StoryVariantSingle.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryVariantSingle_vue_vue_type_script_setup_true_lang_default from "./StoryVariantSingle.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                   */
 //#region src/app/components/story/StoryVariantSingle.vue
-var StoryVariantSingle_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantSingle_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-6805a444"]]);
+var StoryVariantSingle_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantSingle_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-6b31fb1b"]]);
 //#endregion
 export { StoryVariantSingle_default as default };

package/dist/bundled/components/story/StoryVariantSingle.vue_vue_type_script_setup_true_lang.js

@@ -7,65 +7,53 @@ import StoryVariantSingleView_default from "./StoryVariantSingleView.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, useCssVars, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/story/StoryVariantSingle.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	key: 0,
-	class: "divide-y divide-gray-100 dark:divide-gray-800 h-full flex flex-col"
-};
+var _hoisted_1 = { class: "h-full overflow-y-auto" };
 var _hoisted_2 = {
 	key: 1,
 	class: "poveste-story-variant-single p-2 h-full __poveste-pane-shadow-from-right"
 };
-var _hoisted_3 = { class: "h-full overflow-y-auto" };
-var _hoisted_4 = {
-	key: 0,
-	class: "poveste-story-variant-single p-2 h-full __poveste-pane-shadow-from-right"
-};
 var StoryVariantSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryVariantSingle",
 	emits: { openVariantMenu: () => true },
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v72c6d646": variant.value?.iconColor }));
+		useCssVars((_ctx) => ({ "v0fc28fe3": variant.value?.iconColor }));
 		const storyStore = useStoryStore();
 		const hasSingleVariant = computed(() => storyStore.currentStory?.variants.length === 1);
 		const variant = computed(() => storyStore.currentVariant ?? null);
 		const showsPreview = computed(() => !!variant.value || autoSelectsVariant(storyStore.currentStory));
 		return (_ctx, _cache) => {
-			return unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_1, [!hasSingleVariant.value || !variant.value ? (openBlock(), createElementBlock("a", {
-				key: 0,
-				class: "px-6 h-12 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer flex gap-2 flex-wrap w-full items-center flex-none",
-				onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("openVariantMenu"))
-			}, [variant.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(Icon), {
-				icon: variant.value.icon ?? "carbon:cube",
-				class: normalizeClass(["w-5 h-5 flex-none", {
-					"text-gray-500": !variant.value.iconColor,
-					"bind-icon-color": variant.value.iconColor
-				}])
-			}, null, 8, ["icon", "class"]), createTextVNode(" " + toDisplayString(variant.value.title), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(" Select a variant... ")], 64)), createVNode(unref(Icon), {
-				icon: "carbon:chevron-sort",
-				class: "w-5 h-5 shrink-0 ml-auto"
-			})])) : createCommentVNode("", true), showsPreview.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(StoryVariantSingleView_default, {
-				variant: variant.value,
-				story: unref(storyStore).currentStory
-			}, null, 8, ["variant", "story"])])) : createCommentVNode("", true)])) : (openBlock(), createBlock(BaseSplitPane_default, {
-				key: 1,
+			return openBlock(), createBlock(BaseSplitPane_default, {
 				"save-id": "story-single-main-split",
 				min: 5,
 				max: 40,
 				"default-split": 17,
-				"show-first": !hasSingleVariant.value
+				"show-first": !unref(isMobile) && !hasSingleVariant.value
 			}, {
-				first: withCtx(() => [createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory?.variants ?? [], (v, index) => {
+				first: withCtx(() => [createElementVNode("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory?.variants ?? [], (v, index) => {
 					return openBlock(), createBlock(StoryVariantListItem_default, {
 						key: index,
 						variant: v
 					}, null, 8, ["variant"]);
 				}), 128))])]),
-				last: withCtx(() => [showsPreview.value ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(StoryVariantSingleView_default, {
+				last: withCtx(() => [createElementVNode("div", { class: normalizeClass(["h-full flex flex-col", { "divide-y divide-gray-100 dark:divide-gray-800": unref(isMobile) }]) }, [unref(isMobile) && (!hasSingleVariant.value || !variant.value) ? (openBlock(), createElementBlock("a", {
+					key: 0,
+					class: "px-6 h-12 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer flex gap-2 flex-wrap w-full items-center flex-none",
+					onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("openVariantMenu"))
+				}, [variant.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(Icon), {
+					icon: variant.value.icon ?? "carbon:cube",
+					class: normalizeClass(["w-5 h-5 flex-none", {
+						"text-gray-500": !variant.value.iconColor,
+						"bind-icon-color": variant.value.iconColor
+					}])
+				}, null, 8, ["icon", "class"]), createTextVNode(" " + toDisplayString(variant.value.title), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(" Select a variant... ")], 64)), createVNode(unref(Icon), {
+					icon: "carbon:chevron-sort",
+					class: "w-5 h-5 shrink-0 ml-auto"
+				})])) : createCommentVNode("", true), showsPreview.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(StoryVariantSingleView_default, {
 					variant: variant.value,
 					story: unref(storyStore).currentStory
-				}, null, 8, ["variant", "story"])])) : createCommentVNode("", true)]),
+				}, null, 8, ["variant", "story"])])) : createCommentVNode("", true)], 2)]),
 				_: 1
-			}, 8, ["show-first"]));
+			}, 8, ["show-first"]);
 		};
 	}
 });

package/dist/bundled/components/story/StoryVariantSingleView.vue_vue_type_script_setup_true_lang.js

@@ -24,7 +24,7 @@ var StoryVariantSingleView_vue_vue_type_script_setup_true_lang_default = /*@__PU
 			return openBlock(), createElementBlock("div", {
 				class: normalizeClass(["poveste-story-variant-single-view h-full flex flex-col", { invisible: !__props.variant }]),
 				"data-testid": "story-variant-single-view"
-			}, [shown.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [shown.value.story.layout?.iframe === false ? (openBlock(), createBlock(StoryVariantSinglePreviewNative_default, {
+			}, [shown.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [shown.value.story.layout?.type === "single" && shown.value.story.layout.iframe === false ? (openBlock(), createBlock(StoryVariantSinglePreviewNative_default, {
 				key: 0,
 				story: shown.value.story,
 				variant: shown.value.variant