@poveste/app 0.13.1 → 0.14.0

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/StoryView.vue_vue_type_script_setup_true_lang.js

@@ -27,7 +27,8 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const router = useRouter();
 		const route = useRoute();
 		watch(() => storyStore.currentVariant, (value) => {
-			if (value) storyStore.currentStory.lastSelectedVariant = value;
+			const story = storyStore.currentStory;
+			if (value && story) story.lastSelectedVariant = value;
 		}, { immediate: true });
 		watch(() => [storyStore.currentStory, storyStore.currentVariant], () => {
 			if (!storyStore.currentVariant && autoSelectsVariant(storyStore.currentStory)) setVariant((storyStore.currentStory.lastSelectedVariant ?? storyStore.currentStory.variants[0]).id);
@@ -41,7 +42,7 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				}
 			});
 		}
-		const docsOnlyScroller = ref(null);
+		const docsOnlyScroller = ref();
 		function scrollDocsToTop() {
 			docsOnlyScroller.value?.scrollTo(0, 0);
 		}

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

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

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

@@ -9,7 +9,7 @@ var _hoisted_1 = { class: "poveste-story-viewer bg-gray-50 h-full dark:bg-gray-7
 var StoryViewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryViewer",
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v4fc4017e": variant.value?.iconColor }));
+		useCssVars((_ctx) => ({ "v96d17610": variant.value?.iconColor }));
 		const storyStore = useStoryStore();
 		const variant = computed(() => storyStore.currentVariant);
 		const isMenuOpened = ref(false);
@@ -20,7 +20,7 @@ var StoryViewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			isMenuOpened.value = false;
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1, [unref(storyStore).currentStory.layout.type === "grid" ? (openBlock(), createBlock(StoryVariantGrid_default, { key: 0 })) : unref(storyStore).currentStory.layout.type === "single" ? (openBlock(), createBlock(StoryVariantSingle_default, {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1, [unref(storyStore).currentStory?.layout?.type === "grid" ? (openBlock(), createBlock(StoryVariantGrid_default, { key: 0 })) : unref(storyStore).currentStory?.layout?.type === "single" ? (openBlock(), createBlock(StoryVariantSingle_default, {
 				key: 1,
 				onOpenVariantMenu: _cache[0] || (_cache[0] = ($event) => isMenuOpened.value = true)
 			})) : createCommentVNode("", true)]), createVNode(MobileOverlay_default, {
@@ -28,7 +28,7 @@ var StoryViewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				opened: isMenuOpened.value,
 				onClose: closeMenu
 			}, {
-				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants, (v, index) => {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory?.variants ?? [], (v, index) => {
 					return openBlock(), createBlock(StoryVariantListItem_default, {
 						key: index,
 						variant: v

package/dist/bundled/components/toolbar/ToolbarBackground.vue_vue_type_script_setup_true_lang.js

@@ -42,7 +42,7 @@ var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			}
 		];
 		const showColorScheme = !povesteConfig.theme.hideColorSchemeSwitch;
-		const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets.length;
+		const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets?.length;
 		return (_ctx, _cache) => {
 			const _component_VDropdown = resolveComponent("VDropdown");
 			const _directive_tooltip = resolveDirective("tooltip");

package/dist/bundled/components/toolbar/ToolbarResponsiveSize.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { povesteConfig } from "../../util/config.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import BaseCheckbox_default from "../base/BaseCheckbox.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, resolveComponent, resolveDirective, toDisplayString, unref, vModelText, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, normalizeClass, openBlock, renderList, resolveComponent, resolveDirective, toDisplayString, unref, vModelText, withCtx, withDirectives } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/toolbar/ToolbarResponsiveSize.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-col items-stretch" };
@@ -17,6 +17,17 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 	__name: "ToolbarResponsiveSize",
 	setup(__props) {
 		const settings = usePreviewSettingsStore().currentSettings;
+		function autoWhenEmpty(key) {
+			return computed({
+				get: () => settings[key],
+				set: (value) => {
+					const parsed = typeof value === "number" ? value : Number.parseFloat(value ?? "");
+					settings[key] = Number.isFinite(parsed) ? parsed : null;
+				}
+			});
+		}
+		const responsiveWidth = autoWhenEmpty("responsiveWidth");
+		const responsiveHeight = autoWhenEmpty("responsiveHeight");
 		return (_ctx, _cache) => {
 			const _component_VDropdown = resolveComponent("VDropdown");
 			const _directive_tooltip = resolveDirective("tooltip");
@@ -36,30 +47,20 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 					}, 8, ["modelValue"]),
 					createElementVNode("div", _hoisted_2, [
 						withDirectives(createElementVNode("input", {
-							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(settings).responsiveWidth = $event),
+							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(responsiveWidth) ? responsiveWidth.value = $event : null),
 							type: "number",
 							class: "bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0",
 							step: "16",
 							placeholder: "Auto"
-						}, null, 512), [[
-							vModelText,
-							unref(settings).responsiveWidth,
-							void 0,
-							{ number: true }
-						], [_directive_tooltip, "Responsive width (px)"]]),
+						}, null, 512), [[vModelText, unref(responsiveWidth)], [_directive_tooltip, "Responsive width (px)"]]),
 						_cache[4] || (_cache[4] = createElementVNode("span", { class: "opacity-50" }, "×", -1)),
 						withDirectives(createElementVNode("input", {
-							"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(settings).responsiveHeight = $event),
+							"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(responsiveHeight) ? responsiveHeight.value = $event : null),
 							type: "number",
 							class: "bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0",
 							step: "16",
 							placeholder: "Auto"
-						}, null, 512), [[
-							vModelText,
-							unref(settings).responsiveHeight,
-							void 0,
-							{ number: true }
-						], [_directive_tooltip, "Responsive height (px)"]])
+						}, null, 512), [[vModelText, unref(responsiveHeight)], [_directive_tooltip, "Responsive height (px)"]])
 					]),
 					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(povesteConfig).responsivePresets, (preset, index) => {
 						return openBlock(), createElementBlock("button", {
@@ -67,7 +68,7 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 							class: normalizeClass(["px-4 py-3 cursor-pointer text-left flex gap-4", [unref(settings).responsiveWidth === preset.width && unref(settings).responsiveHeight === preset.height ? "bg-primary-500 hover:bg-primary-600 text-white dark:text-black" : "bg-transparent hover:bg-primary-100 dark:hover:bg-primary-700"]]),
 							onClick: ($event) => {
 								unref(settings).responsiveWidth = preset.width;
-								unref(settings).responsiveHeight = preset.height;
+								unref(settings).responsiveHeight = preset.height ?? null;
 								hide();
 							}
 						}, [createTextVNode(toDisplayString(preset.label) + " ", 1), createElementVNode("span", _hoisted_4, [

package/dist/bundled/plugin.js

@@ -1,9 +1,10 @@
 import { router } from "./router.js";
 //#region src/app/plugin.ts
 function setupPluginApi() {
-	if (!import.meta.hot) return;
+	const hot = import.meta.hot;
+	if (!hot) return;
 	const listeners = {};
-	import.meta.hot.on("poveste:dev-event-result", ({ event, result }) => {
+	hot.on("poveste:dev-event-result", ({ event, result }) => {
 		const set = listeners[event];
 		if (set) for (const listener of set) listener(result);
 	});
@@ -21,7 +22,7 @@ function setupPluginApi() {
 	window.__HST_PLUGIN_API__ = {
 		sendEvent: (event, payload) => {
 			return new Promise((resolve) => {
-				import.meta.hot.send(`poveste:dev-event`, {
+				hot.send(`poveste:dev-event`, {
 					event,
 					payload
 				});

package/dist/bundled/sandbox.js

@@ -38,8 +38,8 @@ if (storedSettings) applyPreviewSettings(storedSettings);
 if (window.parent && window.parent !== window) window.parent.postMessage({ type: PREVIEW_SETTINGS_REQUEST }, window.location.origin);
 function reportUncaught(error) {
 	reportStoryError(error, {
-		storyId: storyId.value,
-		variantId: variantId.value
+		storyId: storyId.value ?? void 0,
+		variantId: variantId.value ?? void 0
 	});
 }
 window.addEventListener("error", (event) => {

package/dist/bundled/stores/folder.js

@@ -29,7 +29,7 @@ var useFolderStore = defineStore("folder", () => {
 	}
 	const storyStore = useStoryStore();
 	watch(() => storyStore.currentStory, (story) => {
-		if (story) openFileFolders(story.file.path);
+		if (story?.file) openFileFolders(story.file.path);
 	});
 	return {
 		isFolderOpened,

package/dist/bundled/util/commands.js

@@ -2,20 +2,31 @@ import { router } from "../router.js";
 import { useStoryStore } from "../stores/story.js";
 import { openInEditor } from "./open-in-editor.js";
 //#region src/app/util/commands.ts
+/**
+* The path "Open file in editor" should open, or undefined when there is none.
+*
+* `Story.file` is optional, and `let file: string` used to be assigned
+* `story.file?.filePath` in both branches — so a story without a file produced
+* `file: undefined`, and `openInEditor` sent
+* `__open-in-editor?file=undefined` to the dev server: a request to open a file
+* literally named "undefined", with nothing said in the UI (#667).
+*
+* A docs-only story prefers its markdown, falling back to the component file
+* when the story has both.
+*/
+function editableFilePath(story) {
+	const file = story?.file;
+	if (!file) return void 0;
+	return story?.docsOnly ? file.docsFilePath ?? file.filePath : file.filePath;
+}
 var builtinCommands = [{
 	id: "builtin:open-in-editor",
 	label: "Open file in editor",
 	icon: "carbon:script-reference",
-	showIf: ({ route }) => route.name === "story" && !!useStoryStore().currentStory,
-	getParams: () => {
-		const story = useStoryStore().currentStory;
-		let file;
-		if (story.docsOnly) file = story.file?.docsFilePath ?? story.file?.filePath;
-		else file = story.file?.filePath;
-		return { file };
-	},
+	showIf: ({ route }) => route.name === "story" && !!editableFilePath(useStoryStore().currentStory),
+	getParams: () => ({ file: editableFilePath(useStoryStore().currentStory) }),
 	clientAction: ({ file }) => {
-		openInEditor(file);
+		if (file) openInEditor(file);
 	}
 }, {
 	id: "builtin:poveste-docs",

package/dist/bundled/util/docs.js

@@ -7,7 +7,8 @@ async function getSourceCode(story, variant) {
 		const source = variant.slots?.().source()[0].children;
 		if (source) return unindent(source);
 	} else {
-		const clientPlugin = clientSupportPlugins[story.file?.supportPluginId];
+		const supportPluginId = story.file?.supportPluginId;
+		const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
 		if (clientPlugin) return (await clientPlugin()).generateSourceCode(variant);
 	}
 	const sourceLoader = story.file?.source;

package/dist/bundled/util/grid-slots.js

@@ -11,7 +11,7 @@ function assignSlots(slots, storyId, visible) {
 	const next = slots.map((slot) => slot.storyId === storyId && position.has(slot.variant.id) ? {
 		...slot,
 		visible: true,
-		order: position.get(slot.variant.id)
+		order: position.get(slot.variant.id) ?? 0
 	} : {
 		...slot,
 		visible: false,

package/dist/bundled/util/icons.generated.js

@@ -6,7 +6,6 @@ var iconCollections = [
 			"add-alt": { "body": "<path fill=\"currentColor\" d=\"M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16S9.4 4 16 4m0-2C8.3 2 2 8.3 2 16s6.3 14 14 14s14-6.3 14-14S23.7 2 16 2\"/><path fill=\"currentColor\" d=\"M24 15h-7V8h-2v7H8v2h7v7h2v-7h7z\"/>" },
 			"area": { "body": "<path fill=\"currentColor\" d=\"M27 22.142V9.858A3.992 3.992 0 1 0 22.142 5H9.858A3.992 3.992 0 1 0 5 9.858v12.284A3.992 3.992 0 1 0 9.858 27h12.284A3.992 3.992 0 1 0 27 22.142M26 4a2 2 0 1 1-2 2a2 2 0 0 1 2-2M4 6a2 2 0 1 1 2 2a2 2 0 0 1-2-2m2 22a2 2 0 1 1 2-2a2 2 0 0 1-2 2m16.142-3H9.858A4 4 0 0 0 7 22.142V9.858A4 4 0 0 0 9.858 7h12.284A4 4 0 0 0 25 9.858v12.284A3.99 3.99 0 0 0 22.142 25M26 28a2 2 0 1 1 2-2a2.003 2.003 0 0 1-2 2\"/>" },
 			"audio-console": { "body": "<path fill=\"currentColor\" d=\"M28 14.005h-1v-12h-2v12h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v10h2v-10h1a2.003 2.003 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4h-4v-2h4Zm-10-12h-1v-4h-2v4h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v18h2v-18h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4h-4v-2h4Zm-10 10H7v-18H5v18H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v4h2v-4h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4H4v-2h4Z\"/>" },
-			"bring-forward": { "body": "<path fill=\"currentColor\" d=\"M12 15h-2v-3a2 2 0 0 1 2-2h3v2h-3Zm3 15h-3a2 2 0 0 1-2-2v-3h2v3h3Zm3-2h4v2h-4zm10 2h-3v-2h3v-3h2v3a2 2 0 0 1-2 2M10 18h2v4h-2zm18 0h2v4h-2zm2-3h-2v-3h-3v-2h3a2 2 0 0 1 2 2Zm-12-5h4v2h-4z\"/><path fill=\"currentColor\" d=\"M8 22H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4h-2V4H4v16h4Z\"/>" },
 			"caret-down": { "body": "<path fill=\"currentColor\" d=\"m24 12l-8 10l-8-10z\"/>" },
 			"caret-right": { "body": "<path fill=\"currentColor\" d=\"m12 8l10 8l-10 8z\"/>" },
 			"checkbox": { "body": "<path fill=\"currentColor\" d=\"M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M6 26V6h20v20Z\"/>" },

package/dist/bundled/util/keyboard.js

@@ -88,6 +88,7 @@ function isMatchingShortcut(shortcut) {
 function isMatchingCombination(combination) {
 	const splitted = combination.split("+").map((key) => key.trim());
 	const targetKey = splitted.pop();
+	if (!targetKey) return false;
 	for (const mod in modifiers) if (splitted.includes(mod) !== modifiers[mod].pressed) return false;
 	return pressedKeys.has(targetKey);
 }

package/dist/bundled/util/mapping.js

@@ -45,7 +45,7 @@ function mapVariant(variant, existingVariant) {
 			_hPropState: {},
 			_hPropDefs: {}
 		}),
-		setupApp: null,
+		setupApp: void 0,
 		slots: () => ({
 			default: void 0,
 			controls: void 0,

package/dist/bundled/util/preview-settings.js

@@ -24,7 +24,7 @@ function applyPreviewSettings(settings) {
 	if (povesteConfig.autoApplyContrastColor) document.documentElement.style.color = contrastColor;
 }
 function getContrastColor(setting) {
-	return povesteConfig.backgroundPresets.find((preset) => preset.color === setting.backgroundColor)?.contrastColor ?? "unset";
+	return povesteConfig.backgroundPresets?.find((preset) => preset.color === setting.backgroundColor)?.contrastColor ?? "unset";
 }
 //#endregion
 export { PREVIEW_SETTINGS_STORAGE_KEY, applyPreviewSettings, getContrastColor, loadStoredPreviewSettings, receivedSettings };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan",
@@ -38,9 +38,9 @@
     "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
   },
   "dependencies": {
-    "@poveste/controls": "^0.13.1",
-    "@poveste/shared": "^0.13.1",
-    "@poveste/vendors": "^0.13.1",
+    "@poveste/controls": "^0.14.0",
+    "@poveste/shared": "^0.14.0",
+    "@poveste/vendors": "^0.14.0",
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0"
   },
@@ -66,7 +66,7 @@
     "tailwindcss": "^4.3.3",
     "typescript": "5.6.3",
     "vite": "^8.2.0",
-    "vitest": "^4.1.10",
+    "vitest": "^5.0.0",
     "vue": "^3.5.26",
     "vue-tsc": "^2.1.10"
   },

package/src/app/App.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import type { StoryFile, Tree } from './types'
+import type { Story, StoryFile, Tree } from './types'
 import { useTitle } from '@vueuse/core'
 import { onUpdate, files as rawFiles, tree as rawTree } from 'virtual:$poveste-stories'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -41,8 +41,11 @@ onUpdate((newFiles: StoryFile[], newTree: Tree) => {
   tree.value = newTree
 })
 
-const stories = computed(() => files.value.reduce((acc, file) => {
-  acc.push(file.story)
+// The accumulator needs a type: `[]` alone infers `never[]`, so the push was an
+// error about the seed rather than about the story. A file whose story has not
+// been collected yet contributes nothing.
+const stories = computed(() => files.value.reduce<Story[]>((acc, file) => {
+  if (file.story) acc.push(file.story)
   return acc
 }, []))
 

package/src/app/components/HomeView.vue

@@ -5,7 +5,7 @@ import { useStoryStore } from '../stores/story'
 import { customLogos, povesteConfig } from '../util/config'
 import HomeCounter from './app/HomeCounter.vue'
 
-const logoUrl = computed(() => povesteConfig.theme?.logo?.square ? customLogos.square : PovesteLogo)
+const logoUrl = computed(() => povesteConfig.theme?.logo?.square ? customLogos?.square ?? PovesteLogo : PovesteLogo)
 const storyStore = useStoryStore()
 
 const stats = computed(() => {

package/src/app/components/app/AppLogo.vue

@@ -6,11 +6,15 @@ import PovesteLogoLight from '../../assets/poveste-text.svg'
 import { customLogos, povesteConfig } from '../../util/config'
 import { isDark } from '../../util/dark'
 
+// `theme.logo` is what the config asked for; `customLogos` is the resolved URL
+// map from the virtual module. Two objects, so a check on one narrows nothing
+// about the other — and falling back to the bundled logo beats rendering an
+// `<img>` with no `src` if they ever disagree.
 const logoUrl = computed(() => {
   if (isDark.value) {
-    return povesteConfig.theme.logo?.dark ? customLogos.dark : PovesteLogoDark
+    return povesteConfig.theme.logo?.dark ? customLogos?.dark ?? PovesteLogoDark : PovesteLogoDark
   }
-  return povesteConfig.theme.logo?.light ? customLogos.light : PovesteLogoLight
+  return povesteConfig.theme.logo?.light ? customLogos?.light ?? PovesteLogoLight : PovesteLogoLight
 })
 
 const altText = computed(() => `${povesteConfig.theme.title} logo`)

package/src/app/components/app/Breadcrumb.vue

@@ -16,7 +16,8 @@ const storyStore = useStoryStore()
 const story = computed(() => storyStore.currentStory)
 
 const folders = computed(() => {
-  return story.value.file.path.slice(0, -1)
+  // No story, or a story with no file behind it, means no trail to draw.
+  return story.value?.file?.path.slice(0, -1) ?? []
 })
 
 const isMenuOpened = ref(false)

package/src/app/components/app/TopBar.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { useStoryStore } from '../../stores/story'
 import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
 import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
@@ -15,6 +16,10 @@ defineEmits({
 })
 
 const storyStore = useStoryStore()
+
+// Named once so the `v-if` and the binding below read the same value; a story
+// without a file has nothing to open.
+const editableFile = computed(() => storyStore.currentStory?.file?.filePath)
 </script>
 
 <template>
@@ -51,8 +56,8 @@ const storyStore = useStoryStore()
         :story="storyStore.currentStory"
       />
       <DevOnlyToolbarOpenInEditor
-        v-if="__POVESTE_DEV__"
-        :file="storyStore.currentStory.file?.filePath"
+        v-if="__POVESTE_DEV__ && editableFile"
+        :file="editableFile"
         tooltip="Edit story in editor"
       />
     </TopBarChip>

package/src/app/components/base/BaseCheckbox.vue

@@ -28,7 +28,7 @@ const progress = computed(() => props.modelValue ? 1 : 0)
 const dashoffset = computed(() => (1 - progress.value) * dasharray.value)
 
 watch(path, () => {
-  dasharray.value = path.value.getTotalLength?.() ?? 21.21
+  dasharray.value = path.value?.getTotalLength?.() ?? 21.21
 })
 </script>
 

package/src/app/components/base/BaseOverflowMenu.vue

@@ -49,15 +49,21 @@ const ChildWrapper = {
     const state = reactive({ width: 0, index: props.index })
 
     useResizeObserver(el, (entries) => {
+      // The observer only fires for an element it is observing, so this is
+      // never null here — but `children` is keyed by the element, and an
+      // undefined key would silently make a second entry for the same child.
+      const element = el.value
+      if (!element) return
       const width = entries[0].contentRect.width
-      if (!children.value.has(el.value)) {
-        children.value.set(el.value, state)
+      if (!children.value.has(element)) {
+        children.value.set(element, state)
       }
       state.width = width
     })
 
     onBeforeUnmount(() => {
-      children.value.delete(el.value)
+      const element = el.value
+      if (element) children.value.delete(element)
     })
 
     const visible = computed(() => visibleChildrenCount.value > state.index)