@poveste/app 0.13.0 → 0.13.1

package/dist/bundled/App.vue_vue_type_script_setup_true_lang.js

@@ -18,7 +18,7 @@ import SearchModal_default from "./components/search/SearchModal.js";
 import GenericMountStory_default from "./components/story/GenericMountStory.js";
 import { mapFile } from "./util/mapping.js";
 import { useTitle } from "@poveste/vendors/vue-use";
-import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeStyle, onMounted, openBlock, ref, resolveComponent, toDisplayString, unref, watch, withCtx } from "@poveste/vendors/vue";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, resolveComponent, toDisplayString, unref, watch, withCtx } from "@poveste/vendors/vue";
 import { files, onUpdate, tree } from "virtual:$poveste-stories";
 //#region src/app/App.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-app-root h-full" };
@@ -26,22 +26,17 @@ var _hoisted_2 = {
 	key: 0,
 	class: "poveste-app hidden"
 };
-var _hoisted_3 = {
-	key: 0,
-	class: "h-full flex flex-col divide-y divide-gray-100 dark:divide-gray-800"
-};
-var _hoisted_4 = { class: "flex items-center gap-2 pr-4" };
-var _hoisted_5 = { class: "grow flex flex-col min-h-0" };
-var _hoisted_6 = {
-	key: 0,
+var _hoisted_3 = { class: "flex items-center gap-2 pr-4" };
+var _hoisted_4 = {
+	key: 1,
 	class: "sr-only"
 };
-var _hoisted_7 = { class: "flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right" };
-var _hoisted_8 = {
+var _hoisted_5 = { class: "flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right" };
+var _hoisted_6 = {
 	"aria-label": "Stories",
 	class: "flex-1 flex flex-col min-h-0"
 };
-var _hoisted_9 = { class: "flex flex-col h-full" };
+var _hoisted_7 = { class: "flex flex-col h-full" };
 var App_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "PovesteApp",
 	setup(__props) {
@@ -114,48 +109,45 @@ var App_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
 					class: "h-screen bg-gray-100 dark:bg-gray-750 dark:text-gray-100",
 					style: normalizeStyle({ opacity: mounted.value ? 1 : 0 })
 				}, [
-					unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_3, [
-						createElementVNode("div", _hoisted_4, [createVNode(AppHeader_default, { class: "flex-1" }), createVNode(AppActions_default, {
-							class: "flex-none",
-							onLayout: _cache[0] || (_cache[0] = ($event) => isLayoutOpen.value = true),
-							onSearch: _cache[1] || (_cache[1] = ($event) => isSearchOpen.value = true)
-						})]),
-						createVNode(Breadcrumb_default, {
-							tree: tree$1.value,
-							stories: stories.value
-						}, null, 8, ["tree", "stories"]),
-						createElementVNode("main", _hoisted_5, [createVNode(_component_RouterView, { class: "grow" })])
-					])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [!storyListVisible.value ? (openBlock(), createElementBlock("header", _hoisted_6, [createElementVNode("h1", null, toDisplayString(unref(povesteConfig).theme?.title ?? "Poveste"), 1)])) : createCommentVNode("", true), createVNode(BaseSplitPane_default, {
+					createElementVNode("div", { class: normalizeClass(["h-full flex flex-col", { "divide-y divide-gray-100 dark:divide-gray-800": unref(isMobile) }]) }, [unref(isMobile) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", _hoisted_3, [createVNode(AppHeader_default, { class: "flex-1" }), createVNode(AppActions_default, {
+						class: "flex-none",
+						onLayout: _cache[0] || (_cache[0] = ($event) => isLayoutOpen.value = true),
+						onSearch: _cache[1] || (_cache[1] = ($event) => isSearchOpen.value = true)
+					})]), createVNode(Breadcrumb_default, {
+						tree: tree$1.value,
+						stories: stories.value
+					}, null, 8, ["tree", "stories"])], 64)) : !storyListVisible.value ? (openBlock(), createElementBlock("header", _hoisted_4, [createElementVNode("h1", null, toDisplayString(unref(povesteConfig).theme?.title ?? "Poveste"), 1)])) : createCommentVNode("", true), createVNode(BaseSplitPane_default, {
 						"save-id": "main-horiz",
 						min: 5,
 						max: 50,
 						"default-split": 15,
-						"show-first": storyListVisible.value,
-						class: "h-full"
+						"show-first": !unref(isMobile) && storyListVisible.value,
+						class: "flex-1 min-h-0"
 					}, {
-						first: withCtx(() => [createElementVNode("div", _hoisted_7, [createVNode(AppHeader_default, { class: "flex-none" }), createElementVNode("nav", _hoisted_8, [createVNode(StoryList_default, {
+						first: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(AppHeader_default, { class: "flex-none" }), createElementVNode("nav", _hoisted_6, [createVNode(StoryList_default, {
 							tree: tree$1.value,
 							stories: stories.value,
 							class: "flex-1"
 						}, null, 8, ["tree", "stories"])])])]),
-						last: withCtx(() => [createElementVNode("main", _hoisted_9, [createVNode(TopBar_default, {
+						last: withCtx(() => [createElementVNode("main", _hoisted_7, [!unref(isMobile) ? (openBlock(), createBlock(TopBar_default, {
+							key: 0,
 							onLayout: _cache[2] || (_cache[2] = ($event) => isLayoutOpen.value = true),
 							onSearch: _cache[3] || (_cache[3] = ($event) => isSearchOpen.value = true)
-						}), createVNode(_component_RouterView, { class: "flex-1 min-h-0" })])]),
+						})) : createCommentVNode("", true), createVNode(_component_RouterView, { class: "flex-1 min-h-0" })])]),
 						_: 1
-					}, 8, ["show-first"])], 64)),
+					}, 8, ["show-first"])], 2),
 					!unref(isMobile) ? (openBlock(), createBlock(LayoutModal_default, {
-						key: 2,
+						key: 0,
 						shown: isLayoutOpen.value,
 						onClose: _cache[4] || (_cache[4] = ($event) => isLayoutOpen.value = false)
 					}, null, 8, ["shown"])) : createCommentVNode("", true),
 					loadSearch.value ? (openBlock(), createBlock(SearchModal_default, {
-						key: 3,
+						key: 1,
 						shown: isSearchOpen.value,
 						onClose: _cache[5] || (_cache[5] = ($event) => isSearchOpen.value = false)
 					}, null, 8, ["shown"])) : createCommentVNode("", true),
 					_ctx.__POVESTE_DEV__ ? (openBlock(), createBlock(CommandPromptsModal_default, {
-						key: 4,
+						key: 2,
 						shown: unref(commandStore).showPromptsModal,
 						onClose: _cache[6] || (_cache[6] = ($event) => unref(commandStore).showPromptsModal = false)
 					}, null, 8, ["shown"])) : createCommentVNode("", true)

package/dist/bundled/app.css

@@ -17,12 +17,6 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-preview-bg[data-v-ed785ad4] {
-  background-color: var(--ca113a48);
-  color: var(--v0083f4ef);
-}
-}
-@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
 .bind-icon-color[data-v-14aa93ef] {
   color: var(--b5fb8c94);
 }
@@ -93,7 +87,7 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.__poveste-code-placeholder[data-v-3d88bdb3] {
+.__poveste-code-placeholder[data-v-6de9e107] {
   color: inherit;
   font-size: inherit;
 }
@@ -134,8 +128,8 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-6805a444] {
-  color: var(--v72c6d646);
+.bind-icon-color[data-v-6b31fb1b] {
+  color: var(--v0fc28fe3);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {

package/dist/bundled/components/base/BaseListItemLink.js

@@ -10,16 +10,19 @@ var _hoisted_1 = [
 ];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_RouterLink = resolveComponent("RouterLink");
-	return openBlock(), createBlock(_component_RouterLink, mergeProps({ class: "poveste-base-list-item-link" }, _ctx.$attrs, { custom: "" }), {
+	return openBlock(), createBlock(_component_RouterLink, mergeProps({
+		to: _ctx.to,
+		class: "poveste-base-list-item-link"
+	}, _ctx.$attrs, { custom: "" }), {
 		default: withCtx(({ isActive: linkIsActive, href, navigate }) => [createElementVNode("a", {
 			href,
 			"aria-current": (_ctx.isActive != null ? _ctx.isActive : linkIsActive) ? "page" : void 0,
-			class: normalizeClass(["flex items-center gap-2 text-gray-900 dark:text-gray-100", [_ctx.$attrs.class, (_ctx.isActive != null ? _ctx.isActive : linkIsActive) ? "active bg-primary-500 hover:bg-primary-600 text-white dark:text-black" : "hover:bg-primary-100 dark:hover:bg-primary-900"]]),
+			class: normalizeClass(["flex items-center gap-2 text-gray-900 dark:text-gray-100", [_ctx.$attrs.class, (_ctx.isActive != null ? _ctx.isActive : linkIsActive) ? "active bg-primary-700 hover:bg-primary-800 dark:bg-primary-500 dark:hover:bg-primary-600 text-white dark:text-black" : "hover:bg-primary-100 dark:hover:bg-primary-900"]]),
 			onClick: ($event) => _ctx.handleNavigate($event, navigate),
 			onKeyup: [withKeys(($event) => _ctx.handleNavigate($event, navigate), ["enter"]), withKeys(($event) => _ctx.handleNavigate($event, navigate), ["space"])]
 		}, [renderSlot(_ctx.$slots, "default", { active: _ctx.isActive != null ? _ctx.isActive : linkIsActive })], 42, _hoisted_1)]),
 		_: 3
-	}, 16);
+	}, 16, ["to"]);
 }
 var BaseListItemLink_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseListItemLink_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion

package/dist/bundled/components/base/BaseListItemLink.vue_vue_type_script_lang.js

@@ -2,10 +2,16 @@ import { defineComponent } from "@poveste/vendors/vue";
 //#region src/app/components/base/BaseListItemLink.vue?vue&type=script&lang.ts
 var BaseListItemLink_vue_vue_type_script_lang_default = defineComponent({
 	inheritAttrs: false,
-	props: { isActive: {
-		type: Boolean,
-		default: void 0
-	} },
+	props: {
+		to: {
+			type: [String, Object],
+			required: true
+		},
+		isActive: {
+			type: Boolean,
+			default: void 0
+		}
+	},
 	emits: { navigate: () => true },
 	setup(props, { emit }) {
 		function handleNavigate(event, navigate) {

package/dist/bundled/components/base/BaseOverflowTab.js

@@ -9,17 +9,20 @@ var _hoisted_2 = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_router_link = resolveComponent("router-link");
-	return openBlock(), createBlock(_component_router_link, mergeProps({ class: "poveste-base-overflow-tab" }, _ctx.$attrs, { custom: "" }), {
+	return openBlock(), createBlock(_component_router_link, mergeProps({
+		to: _ctx.to,
+		class: "poveste-base-overflow-tab"
+	}, _ctx.$attrs, { custom: "" }), {
 		default: withCtx(({ isActive, isExactActive, href, navigate }) => [createElementVNode("a", mergeProps(_ctx.$attrs, {
 			href,
-			class: ["px-4 h-10 min-w-[150px] inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative text-gray-900 dark:text-gray-100", { "text-primary-500 dark:text-primary-400": _ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive }],
+			class: ["px-4 h-10 min-w-[150px] inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative text-gray-900 dark:text-gray-100", { "text-primary-700 dark:text-primary-400": _ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive }],
 			onClick: navigate
 		}), [renderSlot(_ctx.$slots, "default"), createVNode(Transition, { name: "__poveste-scale-y" }, {
 			default: withCtx(() => [(_ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive) ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true)]),
 			_: 2
 		}, 1024)], 16, _hoisted_1)]),
 		_: 3
-	}, 16);
+	}, 16, ["to"]);
 }
 var BaseOverflowTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseOverflowTab_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion

package/dist/bundled/components/base/BaseOverflowTab.vue_vue_type_script_lang.js

@@ -3,6 +3,10 @@ import { defineComponent } from "@poveste/vendors/vue";
 var BaseOverflowTab_vue_vue_type_script_lang_default = defineComponent({
 	inheritAttrs: false,
 	props: {
+		to: {
+			type: [String, Object],
+			required: true
+		},
 		exact: {
 			type: Boolean,
 			default: false

package/dist/bundled/components/base/BaseTab.js

@@ -9,17 +9,20 @@ var _hoisted_2 = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_router_link = resolveComponent("router-link");
-	return openBlock(), createBlock(_component_router_link, mergeProps({ class: "poveste-base-tab" }, _ctx.$attrs, { custom: "" }), {
+	return openBlock(), createBlock(_component_router_link, mergeProps({
+		to: _ctx.to,
+		class: "poveste-base-tab"
+	}, _ctx.$attrs, { custom: "" }), {
 		default: withCtx(({ isActive, isExactActive, href, navigate }) => [createElementVNode("a", mergeProps(_ctx.$attrs, {
 			href,
-			class: ["px-4 h-full inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative text-gray-900 dark:text-gray-100", { "text-primary-500 dark:text-primary-400": _ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive }],
+			class: ["px-4 h-full inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative text-gray-900 dark:text-gray-100", { "text-primary-700 dark:text-primary-400": _ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive }],
 			onClick: navigate
 		}), [renderSlot(_ctx.$slots, "default"), createVNode(Transition, { name: "__poveste-scale-x" }, {
 			default: withCtx(() => [(_ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive) ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true)]),
 			_: 2
 		}, 1024)], 16, _hoisted_1)]),
 		_: 3
-	}, 16);
+	}, 16, ["to"]);
 }
 var BaseTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseTab_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion

package/dist/bundled/components/base/BaseTab.vue_vue_type_script_lang.js

@@ -3,6 +3,10 @@ import { defineComponent } from "@poveste/vendors/vue";
 var BaseTab_vue_vue_type_script_lang_default = defineComponent({
 	inheritAttrs: false,
 	props: {
+		to: {
+			type: [String, Object],
+			required: true
+		},
 		exact: {
 			type: Boolean,
 			default: false

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

@@ -43,7 +43,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 							}
 						},
 						matched: _ctx.$route.query.tab === "docs",
-						class: normalizeClass({ "opacity-50": !unref(renderedDoc) })
+						class: normalizeClass({ "opacity-70": !unref(renderedDoc) })
 					}, {
 						default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" Docs ", -1)])]),
 						_: 1
@@ -61,7 +61,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 							}
 						},
 						matched: _ctx.$route.query.tab === "events",
-						class: normalizeClass({ "opacity-50": !hasEvents.value })
+						class: normalizeClass({ "opacity-70": !hasEvents.value })
 					}, {
 						default: withCtx(() => [_cache[5] || (_cache[5] = createTextVNode(" Events ", -1)), unref(eventsStore).unseen ? (openBlock(), createBlock(BaseTag_default, { key: 0 }, {
 							default: withCtx(() => [createTextVNode(toDisplayString(unref(eventsStore).unseen <= 99 ? unref(eventsStore).unseen : "99+"), 1)]),
@@ -97,7 +97,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 							}
 						},
 						matched: _ctx.$route.query.tab === "docs",
-						class: normalizeClass({ "opacity-50": !unref(renderedDoc) })
+						class: normalizeClass({ "opacity-70": !unref(renderedDoc) })
 					}, {
 						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode(" Docs ", -1)])]),
 						_: 1
@@ -115,7 +115,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 							}
 						},
 						matched: _ctx.$route.query.tab === "events",
-						class: normalizeClass({ "opacity-50": !hasEvents.value })
+						class: normalizeClass({ "opacity-70": !hasEvents.value })
 					}, {
 						default: withCtx(() => [_cache[2] || (_cache[2] = createTextVNode(" Events ", -1)), unref(eventsStore).unseen ? (openBlock(), createBlock(BaseTag_default, { key: 0 }, {
 							default: withCtx(() => [createTextVNode(toDisplayString(unref(eventsStore).unseen <= 99 ? unref(eventsStore).unseen : "99+"), 1)]),

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-6de9e107"]]);
 //#endregion
 export { StorySourceCode_default as default };

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

@@ -77,7 +77,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 +97,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/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

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 = [

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

@@ -46,7 +46,11 @@ function mapVariant(variant, existingVariant) {
 			_hPropDefs: {}
 		}),
 		setupApp: null,
-		slots: () => ({}),
+		slots: () => ({
+			default: void 0,
+			controls: void 0,
+			source: void 0
+		}),
 		previewReady: false
 	};
 	return result;

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.13.1",
   "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.13.1",
+    "@poveste/shared": "^0.13.1",
+    "@poveste/vendors": "^0.13.1",
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0"
   },
@@ -67,10 +67,12 @@
     "typescript": "5.6.3",
     "vite": "^8.2.0",
     "vitest": "^4.1.10",
-    "vue": "^3.5.26"
+    "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

@@ -141,52 +141,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 +210,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 +218,7 @@ const storyListVisible = computed(() => !!layoutStore.settings.storyListVisible)
             </main>
           </template>
         </BaseSplitPane>
-      </template>
+      </div>
 
       <LayoutModal
         v-if="!isMobile"

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

@@ -1,10 +1,20 @@
 <script lang="ts">
+import type { PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    // Declared rather than passed through `$attrs`: with
+    // `inheritAttrs: false` the checker cannot see it there, and
+    // router-link requires it.
+    to: {
+      type: [String, Object] as PropType<RouteLocationRaw>,
+      required: true,
+    },
+
     isActive: {
       type: Boolean,
       default: undefined,
@@ -31,6 +41,7 @@ export default defineComponent({
 <template>
   <RouterLink
     v-slot="{ isActive: linkIsActive, href, navigate }"
+    :to="to"
     class="poveste-base-list-item-link"
     v-bind="$attrs"
     custom
@@ -42,7 +53,7 @@ export default defineComponent({
       :class="[
         $attrs.class,
         (isActive != null ? isActive : linkIsActive)
-          ? 'active bg-primary-500 hover:bg-primary-600 text-white dark:text-black'
+          ? 'active bg-primary-700 hover:bg-primary-800 dark:bg-primary-500 dark:hover:bg-primary-600 text-white dark:text-black'
           : 'hover:bg-primary-100 dark:hover:bg-primary-900',
       ]"
       @click="handleNavigate($event, navigate)"

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

@@ -1,10 +1,20 @@
 <script lang="ts">
+import type { PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    // Declared rather than passed through `$attrs`: with
+    // `inheritAttrs: false` the checker cannot see it there, and
+    // router-link requires it.
+    to: {
+      type: [String, Object] as PropType<RouteLocationRaw>,
+      required: true,
+    },
+
     exact: {
       type: Boolean,
       default: false,
@@ -21,6 +31,7 @@ export default defineComponent({
 <template>
   <router-link
     v-slot="{ isActive, isExactActive, href, navigate }"
+    :to="to"
     class="poveste-base-overflow-tab"
     v-bind="$attrs"
     custom
@@ -30,7 +41,7 @@ export default defineComponent({
       :href="href"
       class="px-4 h-10 min-w-[150px] inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative text-gray-900 dark:text-gray-100"
       :class="{
-        'text-primary-500 dark:text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
+        'text-primary-700 dark:text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
       }"
       @click="navigate"
     >

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

@@ -1,10 +1,20 @@
 <script lang="ts">
+import type { PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    // Declared rather than passed through `$attrs`: with
+    // `inheritAttrs: false` the checker cannot see it there, and
+    // router-link requires it.
+    to: {
+      type: [String, Object] as PropType<RouteLocationRaw>,
+      required: true,
+    },
+
     exact: {
       type: Boolean,
       default: false,
@@ -21,6 +31,7 @@ export default defineComponent({
 <template>
   <router-link
     v-slot="{ isActive, isExactActive, href, navigate }"
+    :to="to"
     class="poveste-base-tab"
     v-bind="$attrs"
     custom
@@ -30,7 +41,7 @@ export default defineComponent({
       :href="href"
       class="px-4 h-full inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative text-gray-900 dark:text-gray-100"
       :class="{
-        'text-primary-500 dark:text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
+        'text-primary-700 dark:text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
       }"
       @click="navigate"
     >

package/src/app/components/command/CommandPrompts.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { ClientCommand } from '@poveste/shared'
+import type { Component } from 'vue'
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import { executeCommand, getCommandContext } from '../../util/commands.js'
 import BaseButton from '../base/BaseButton.vue'
@@ -67,8 +68,15 @@ onMounted(() => {
       {{ command.label }}
     </div>
 
+    <!--
+      `promptTypes[prompt.type]` resolves to the component whose `prompt` prop
+      is that member of the union, but nothing states the correlation and the
+      checker cannot infer it. Splitting this into `v-if` branches per type is
+      what makes it checkable; that is a refactor of untested UI, so it waits
+      for coverage rather than riding along with the type gate (#441).
+    -->
     <component
-      :is="promptTypes[prompt.type]"
+      :is="promptTypes[prompt.type] as Component"
       v-for="(prompt, index) of command.prompts"
       :key="prompt.field"
       ref="promptComps"

package/src/app/components/panel/PaneTabs.vue

@@ -33,7 +33,7 @@ const hasEvents = computed(() => eventsStore.events.length)
       :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
       :matched="$route.query.tab === 'docs'"
       :class="{
-        'opacity-50': !renderedDoc,
+        'opacity-70': !renderedDoc,
       }"
     >
       Docs
@@ -42,7 +42,7 @@ const hasEvents = computed(() => eventsStore.events.length)
       :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
       :matched="$route.query.tab === 'events'"
       :class="{
-        'opacity-50': !hasEvents,
+        'opacity-70': !hasEvents,
       }"
     >
       Events
@@ -62,7 +62,7 @@ const hasEvents = computed(() => eventsStore.events.length)
         :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
         :matched="$route.query.tab === 'docs'"
         :class="{
-          'opacity-50': !renderedDoc,
+          'opacity-70': !renderedDoc,
         }"
       >
         Docs
@@ -71,7 +71,7 @@ const hasEvents = computed(() => eventsStore.events.length)
         :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
         :matched="$route.query.tab === 'events'"
         :class="{
-          'opacity-50': !hasEvents,
+          'opacity-70': !hasEvents,
         }"
       >
         Events

package/src/app/components/panel/StorySourceCode.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Highlighter } from 'shiki'
+import type { HighlighterCore } from 'shiki/core'
 import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
 import { HstCopyIcon } from '@poveste/controls'
@@ -25,7 +25,7 @@ watchEffect(async () => {
   }
 })
 
-const highlighter = shallowRef<Highlighter>()
+const highlighter = shallowRef<HighlighterCore>()
 
 const dynamicSourceCode = ref('')
 const error = ref<string>(null)
@@ -103,7 +103,7 @@ onMounted(async () => {
 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',
     })
   : '')
 
@@ -152,7 +152,7 @@ watch(sourceHtml, async () => {
           v-tooltip="!dynamicSourceCode ? 'Dynamic source code is not available' : displayedSource !== 'dynamic' ? 'Switch to dynamic source' : null"
           class="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"
           :class="[
-            displayedSource !== 'dynamic' ? 'max-w-6 opacity-70' : 'max-w-[82px] text-primary-600 dark:text-primary-400',
+            displayedSource !== 'dynamic' ? 'max-w-6 opacity-70' : 'max-w-[82px] text-primary-800 dark:text-primary-400',
             dynamicSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : 'opacity-50',
           ]"
           @click="dynamicSourceCode && (displayedSource = 'dynamic')"
@@ -174,7 +174,7 @@ watch(sourceHtml, async () => {
           v-tooltip="!staticSourceCode ? 'Static source code is not available' : displayedSource !== 'static' ? 'Switch to static source' : null"
           class="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"
           :class="[
-            displayedSource !== 'static' ? 'max-w-6 opacity-70' : 'max-w-[63px] text-primary-600 dark:text-primary-400',
+            displayedSource !== 'static' ? 'max-w-6 opacity-70' : 'max-w-[63px] text-primary-800 dark:text-primary-400',
             staticSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : 'opacity-50',
           ]"
           @click="staticSourceCode && (displayedSource = 'static')"

package/src/app/components/story/StoryVariantSingle.vue

@@ -27,59 +27,19 @@ const showsPreview = computed(() => !!variant.value || autoSelectsVariant(storyS
 </script>
 
 <template>
-  <div
-    v-if="isMobile"
-    class="divide-y divide-gray-100 dark:divide-gray-800 h-full flex flex-col"
-  >
-    <a
-      v-if="!hasSingleVariant || !variant"
-      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"
-      @click="$emit('openVariantMenu')"
-    >
-      <template v-if="variant">
-        <Icon
-          :icon="variant.icon ?? 'carbon:cube'"
-          class="w-5 h-5 flex-none"
-          :class="{
-            'text-gray-500': !variant.iconColor,
-            'bind-icon-color': variant.iconColor,
-          }"
-        />
-        {{ variant.title }}
-      </template>
-      <template v-else>
-        Select a variant...
-      </template>
-
-      <Icon
-        icon="carbon:chevron-sort"
-        class="w-5 h-5 shrink-0 ml-auto"
-      />
-    </a>
-    <div
-      v-if="showsPreview"
-      class="poveste-story-variant-single p-2 h-full __poveste-pane-shadow-from-right"
-    >
-      <StoryVariantSingleView
-        :variant="variant"
-        :story="storyStore.currentStory"
-      />
-    </div>
-  </div>
-
   <!--
-    One split pane whether or not there is a list to put in it. A story with a
-    single variant hides the first pane instead of taking a different branch, so
-    the preview stays at one position in the tree and survives the move between
-    a one-variant story and a many-variant one (#328).
+    One split pane for every layout. The variant list, the mobile picker row and
+    the bare single-variant view used to be three branches each carrying their
+    own `StoryVariantSingleView`, so moving between them rebuilt the preview and
+    cold-booted its sandbox. `isMobile` is a live media query, so that happened
+    on a window resize (#600); the single/many-variant half was #328.
   -->
   <BaseSplitPane
-    v-else
     save-id="story-single-main-split"
     :min="5"
     :max="40"
     :default-split="17"
-    :show-first="!hasSingleVariant"
+    :show-first="!isMobile && !hasSingleVariant"
   >
     <template #first>
       <div class="h-full overflow-y-auto">
@@ -92,13 +52,45 @@ const showsPreview = computed(() => !!variant.value || autoSelectsVariant(storyS
     </template>
     <template #last>
       <div
-        v-if="showsPreview"
-        class="poveste-story-variant-single p-2 h-full __poveste-pane-shadow-from-right"
+        class="h-full flex flex-col"
+        :class="{ 'divide-y divide-gray-100 dark:divide-gray-800': isMobile }"
       >
-        <StoryVariantSingleView
-          :variant="variant"
-          :story="storyStore.currentStory"
-        />
+        <!-- Mobile has no room for the list beside the preview, so the variant
+             it is showing opens a full-screen overlay instead. -->
+        <a
+          v-if="isMobile && (!hasSingleVariant || !variant)"
+          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"
+          @click="$emit('openVariantMenu')"
+        >
+          <template v-if="variant">
+            <Icon
+              :icon="variant.icon ?? 'carbon:cube'"
+              class="w-5 h-5 flex-none"
+              :class="{
+                'text-gray-500': !variant.iconColor,
+                'bind-icon-color': variant.iconColor,
+              }"
+            />
+            {{ variant.title }}
+          </template>
+          <template v-else>
+            Select a variant...
+          </template>
+
+          <Icon
+            icon="carbon:chevron-sort"
+            class="w-5 h-5 shrink-0 ml-auto"
+          />
+        </a>
+        <div
+          v-if="showsPreview"
+          class="poveste-story-variant-single p-2 h-full __poveste-pane-shadow-from-right"
+        >
+          <StoryVariantSingleView
+            :variant="variant"
+            :story="storyStore.currentStory"
+          />
+        </div>
       </div>
     </template>
   </BaseSplitPane>

package/src/app/components/story/StoryVariantSingleView.vue

@@ -60,7 +60,7 @@ watchEffect(() => {
     -->
     <template v-if="shown">
       <StoryVariantSinglePreviewNative
-        v-if="shown.story.layout?.iframe === false"
+        v-if="shown.story.layout?.type === 'single' && shown.story.layout.iframe === false"
         :story="shown.story"
         :variant="shown.variant"
       />

package/src/app/components/toolbar/ToolbarBackground.vue

@@ -109,10 +109,3 @@ const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets.length
     </template>
   </VDropdown>
 </template>
-
-<style scoped>
-.bind-preview-bg {
-  background-color: v-bind('settings.backgroundColor');
-  color: v-bind('contrastColor');
-}
-</style>

package/src/app/components/tree/StoryGroup.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Story, TreeGroup } from '../../types'
+import type { Story, TreeFolder, TreeGroup, TreeLeaf } from '../../types'
 import { Icon } from '@iconify/vue'
 import { computed } from 'vue'
 import { useFolderStore } from '../../stores/folder'

package/src/app/util/highlighter.ts

@@ -23,8 +23,16 @@ export function getHighlighter(): Promise<HighlighterCore> {
       import('shiki/langs/html.mjs'),
       import('shiki/langs/jsx.mjs'),
     ],
+    /*
+     * `github-light-high-contrast`, not `github-light`. The plain one paints
+     * keywords at 4.38:1 on the pane background, variables at 3.34 and tag
+     * names at 4.43 — three of its twelve token colours miss AA (#533). This is
+     * GitHub's own accessible build of the same theme, so code keeps reading the
+     * way it did, and the colours are maintained upstream rather than darkened
+     * by hand here.
+     */
     themes: [
-      import('shiki/themes/github-light.mjs'),
+      import('shiki/themes/github-light-high-contrast.mjs'),
       import('shiki/themes/github-dark.mjs'),
     ],
     engine: createOnigurumaEngine(import('shiki/wasm')),

package/src/app/util/mapping.ts

@@ -71,7 +71,11 @@ export function mapVariant(variant: Variant, existingVariant?: Variant): Variant
         _hPropDefs: {},
       }),
       setupApp: null,
-      slots: () => ({}),
+      // The three keys `Variant` declares, absent rather than missing: a
+      // variant created here defines no slots, and consumers read them
+      // with `||`. `Story.slots` is `() => any`, which is why the same
+      // literal above needs nothing.
+      slots: () => ({ default: undefined, controls: undefined, source: undefined }),
       previewReady: false,
     }
   }