@poveste/app 0.13.0 → 0.14.0

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.js

@@ -1,7 +1,5 @@
-import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
 import ToolbarBackground_vue_vue_type_script_setup_true_lang_default from "./ToolbarBackground.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                                  */
 //#region src/app/components/toolbar/ToolbarBackground.vue
-var ToolbarBackground_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ToolbarBackground_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ed785ad4"]]);
+var ToolbarBackground_default = ToolbarBackground_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { ToolbarBackground_default as default };

package/dist/bundled/components/toolbar/ToolbarBackground.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, normalizeStyle, openBlock, renderList, resolveComponent, resolveDirective, toDisplayString, unref, useCssVars, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, resolveComponent, resolveDirective, toDisplayString, unref, withCtx, withDirectives } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/toolbar/ToolbarBackground.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors group" };
@@ -22,10 +22,6 @@ var _hoisted_8 = { key: 0 };
 var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ToolbarBackground",
 	setup(__props) {
-		useCssVars((_ctx) => ({
-			"ca113a48": unref(settings).backgroundColor,
-			"v0083f4ef": _ctx.contrastColor
-		}));
 		const previewSettings = usePreviewSettingsStore();
 		const settings = previewSettings.currentSettings;
 		const colorSchemeOptions = [
@@ -46,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/highlighter.js

@@ -18,7 +18,7 @@ var highlighterPromise;
 function getHighlighter() {
 	highlighterPromise ??= createHighlighterCore({
 		langs: [import("shiki/langs/html.mjs"), import("shiki/langs/jsx.mjs")],
-		themes: [import("shiki/themes/github-light.mjs"), import("shiki/themes/github-dark.mjs")],
+		themes: [import("shiki/themes/github-light-high-contrast.mjs"), import("shiki/themes/github-dark.mjs")],
 		engine: createOnigurumaEngine(import("shiki/wasm"))
 	}).catch((e) => {
 		highlighterPromise = void 0;

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,8 +45,12 @@ function mapVariant(variant, existingVariant) {
 			_hPropState: {},
 			_hPropDefs: {}
 		}),
-		setupApp: null,
-		slots: () => ({}),
+		setupApp: void 0,
+		slots: () => ({
+			default: void 0,
+			controls: void 0,
+			source: void 0
+		}),
 		previewReady: false
 	};
 	return result;

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/dist/style.css

@@ -1625,6 +1625,9 @@
         background-color: color-mix(in oklab, var(--color-primary-500) 25%, transparent);
       }
     }
+    .bg-primary-700 {
+      background-color: var(--color-primary-700);
+    }
     .bg-transparent {
       background-color: transparent;
     }
@@ -1861,8 +1864,8 @@
     .text-primary-500 {
       color: var(--color-primary-500);
     }
-    .text-primary-600 {
-      color: var(--color-primary-600);
+    .text-primary-700 {
+      color: var(--color-primary-700);
     }
     .text-primary-800 {
       color: var(--color-primary-800);
@@ -2130,6 +2133,9 @@
       .hover\:bg-primary-600:hover {
         background-color: var(--color-primary-600);
       }
+      .hover\:bg-primary-800:hover {
+        background-color: var(--color-primary-800);
+      }
       .hover\:bg-white\/50:hover {
         background-color: color-mix(in srgb, #fff 50%, transparent);
       }
@@ -2288,6 +2294,9 @@
     .dark\:bg-primary-400:where(.ptw-dark, .ptw-dark *) {
       background-color: var(--color-primary-400);
     }
+    .dark\:bg-primary-500:where(.ptw-dark, .ptw-dark *) {
+      background-color: var(--color-primary-500);
+    }
     .dark\:bg-primary-600:where(.ptw-dark, .ptw-dark *) {
       background-color: var(--color-primary-600);
     }
@@ -2385,6 +2394,9 @@
       .dark\:hover\:bg-gray-800:where(.ptw-dark, .ptw-dark *):hover {
         background-color: var(--color-gray-800);
       }
+      .dark\:hover\:bg-primary-600:where(.ptw-dark, .ptw-dark *):hover {
+        background-color: var(--color-primary-600);
+      }
       .dark\:hover\:bg-primary-700:where(.ptw-dark, .ptw-dark *):hover {
         background-color: var(--color-primary-700);
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.13.0",
+  "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.0",
-    "@poveste/shared": "^0.13.0",
-    "@poveste/vendors": "^0.13.0",
+    "@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,11 +66,13 @@
     "tailwindcss": "^4.3.3",
     "typescript": "5.6.3",
     "vite": "^8.2.0",
-    "vitest": "^4.1.10",
-    "vue": "^3.5.26"
+    "vitest": "^5.0.0",
+    "vue": "^3.5.26",
+    "vue-tsc": "^2.1.10"
   },
   "scripts": {
     "build": "pnpm run icons && rimraf dist && vite build && pnpm run build:css && node ./scripts/copy.mjs",
+    "typecheck": "vue-tsc --noEmit",
     "build:css": "postcss src/app/style/main.pcss -o ./dist/style.css",
     "icons": "node ./scripts/icons.mjs",
     "test": "vitest run",

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
 }, []))
 
@@ -141,52 +144,55 @@ const storyListVisible = computed(() => !!layoutStore.settings.storyListVisible)
       }"
     >
       <div
-        v-if="isMobile"
-        class="h-full flex flex-col divide-y divide-gray-100 dark:divide-gray-800"
+        class="h-full flex flex-col"
+        :class="{ 'divide-y divide-gray-100 dark:divide-gray-800': isMobile }"
       >
-        <div class="flex items-center gap-2 pr-4">
-          <AppHeader class="flex-1" />
-          <AppActions
-            class="flex-none"
-            @layout="isLayoutOpen = true"
-            @search="isSearchOpen = true"
+        <!--
+          The mobile chrome is a sibling of `main`, not a child: `AppHeader`
+          carries the page's banner and its only `h1`, and a `header` inside
+          `main` is neither (#310).
+        -->
+        <template v-if="isMobile">
+          <div class="flex items-center gap-2 pr-4">
+            <AppHeader class="flex-1" />
+            <AppActions
+              class="flex-none"
+              @layout="isLayoutOpen = true"
+              @search="isSearchOpen = true"
+            />
+          </div>
+          <Breadcrumb
+            :tree="tree"
+            :stories="stories"
           />
-        </div>
-        <Breadcrumb
-          :tree="tree"
-          :stories="stories"
-        />
-        <main class="grow flex flex-col min-h-0">
-          <RouterView class="grow" />
-        </main>
-      </div>
+        </template>
 
-      <template v-else>
         <!--
           With the story list hidden `AppHeader` goes with it, taking the page's
           only `h1` and its banner. A heading has to exist in every layout, and
           it has to sit inside a landmark, so this stands in for it (#310).
         -->
         <header
-          v-if="!storyListVisible"
+          v-else-if="!storyListVisible"
           class="sr-only"
         >
           <h1>{{ povesteConfig.theme?.title ?? 'Poveste' }}</h1>
         </header>
 
         <!--
-          One split pane whether or not the story list is showing. Two branches
-          each carrying their own `RouterView` moved the whole view in the tree
-          when the list was toggled, cold-booting the sandbox under it — the same
-          remount #328 removed from sidebar clicks (#596).
+          One split pane for every layout, mobile included. Each chrome used to
+          be a branch carrying its own `RouterView`, so switching between them
+          moved the routed view in the tree and cold-booted the sandbox under
+          it. The settings toggles were #596; `isMobile` is a live media query,
+          so this one fired on a window resize (#600).
         -->
         <BaseSplitPane
           save-id="main-horiz"
           :min="5"
           :max="50"
           :default-split="15"
-          :show-first="storyListVisible"
-          class="h-full"
+          :show-first="!isMobile && storyListVisible"
+          class="flex-1 min-h-0"
         >
           <template #first>
             <div class="flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right">
@@ -207,6 +213,7 @@ const storyListVisible = computed(() => !!layoutStore.settings.storyListVisible)
           <template #last>
             <main class="flex flex-col h-full">
               <TopBar
+                v-if="!isMobile"
                 @layout="isLayoutOpen = true"
                 @search="isSearchOpen = true"
               />
@@ -214,7 +221,7 @@ const storyListVisible = computed(() => !!layoutStore.settings.storyListVisible)
             </main>
           </template>
         </BaseSplitPane>
-      </template>
+      </div>
 
       <LayoutModal
         v-if="!isMobile"

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>