@poveste/app 0.12.3 → 0.13.1

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

@@ -6,8 +6,8 @@ import { getContrastColor } from "../../util/preview-settings.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import ToolbarNewTab_default from "../toolbar/ToolbarNewTab.js";
 import GenericRenderStory_default from "./GenericRenderStory.js";
-import { getSourceCode } from "../../util/docs.js";
 import { useCurrentVariantRoute } from "../../util/variant.js";
+import { getSourceCode } from "../../util/docs.js";
 import CheckerboardPattern_default from "../misc/CheckerboardPattern.js";
 import StoryVariantSinglePreviewRemote_default from "./StoryVariantSinglePreviewRemote.js";
 import { useResizeObserver } from "@poveste/vendors/vue-use";

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-db50bc8f"]]);
+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

@@ -1,74 +1,59 @@
 import { isMobile } from "../../util/responsive.js";
 import { useStoryStore } from "../../stores/story.js";
 import BaseSplitPane_default from "../base/BaseSplitPane.js";
+import { autoSelectsVariant } from "../../util/variant.js";
 import StoryVariantListItem_default from "./StoryVariantListItem.js";
 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: "poveste-story-variant-single p-2 h-full __poveste-pane-shadow-from-right"
-};
+var _hoisted_1 = { class: "h-full overflow-y-auto" };
 var _hoisted_2 = {
-	key: 0,
-	class: "divide-y divide-gray-100 dark:divide-gray-800 h-full flex flex-col"
-};
-var _hoisted_3 = {
-	key: 0,
-	class: "p-2 h-full"
-};
-var _hoisted_4 = { class: "h-full overflow-y-auto" };
-var _hoisted_5 = {
-	key: 0,
-	class: "p-2 h-full __poveste-pane-shadow-from-right"
+	key: 1,
+	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) => ({ "dd8d1ad8": 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);
+		const variant = computed(() => storyStore.currentVariant ?? null);
+		const showsPreview = computed(() => !!variant.value || autoSelectsVariant(storyStore.currentStory));
 		return (_ctx, _cache) => {
-			return hasSingleVariant.value && variant.value ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(StoryVariantSingleView_default, {
-				variant: variant.value,
-				story: unref(storyStore).currentStory
-			}, null, 8, ["variant", "story"])])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("a", {
-				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"
-			})]), unref(storyStore).currentVariant ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(StoryVariantSingleView_default, {
-				variant: unref(storyStore).currentVariant,
-				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
+				"default-split": 17,
+				"show-first": !unref(isMobile) && !hasSingleVariant.value
 			}, {
-				first: withCtx(() => [createElementVNode("div", _hoisted_4, [(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(() => [unref(storyStore).currentVariant ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(StoryVariantSingleView_default, {
-					variant: unref(storyStore).currentVariant,
+				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
-			}))], 64));
+			}, 8, ["show-first"]);
 		};
 	}
 });

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

@@ -5,7 +5,7 @@ import { getContrastColor } from "../../util/preview-settings.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import GenericRenderStory_default from "./GenericRenderStory.js";
 import StoryResponsivePreview_default from "./StoryResponsivePreview.js";
-import { computed, createBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref, withCtx } from "@poveste/vendors/vue";
+import { computed, createBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref, watch, withCtx } from "@poveste/vendors/vue";
 //#region src/app/components/story/StoryVariantSinglePreviewNative.vue?vue&type=script&setup=true&lang.ts
 var StoryVariantSinglePreviewNative_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryVariantSinglePreviewNative",
@@ -16,7 +16,10 @@ var StoryVariantSinglePreviewNative_vue_vue_type_script_setup_true_lang_default
 	setup(__props) {
 		const props = __props;
 		const storyStore = useStoryStore();
-		storyStore.setPreviewReady(props.variant, false);
+		watch(() => props.variant, (variant, previous) => {
+			if (previous) storyStore.setPreviewReady(previous, false);
+			storyStore.setPreviewReady(variant, false);
+		}, { immediate: true });
 		function onReady() {
 			storyStore.setPreviewReady(props.variant, true);
 		}

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

@@ -83,6 +83,7 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 					updateVariantState(event.data.state);
 					break;
 				case EVENT_SEND:
+					if (!fromCurrentOccupant(event.data)) break;
 					logEvent(event.data.event);
 					break;
 				case SANDBOX_READY:
@@ -134,6 +135,7 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 		const isIframeLoaded = ref(false);
 		let retargets = 0;
 		let servedStory = props.story;
+		let servedVariant = props.variant;
 		let stopTrackKeyboard;
 		let unmounted = false;
 		function reload(url) {
@@ -150,6 +152,8 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 		}
 		watch(sandboxUrl, (url) => {
 			bridge = createStateBridge(postState);
+			if (servedVariant && servedVariant !== props.variant) storyStore.setPreviewReady(servedVariant, false);
+			servedVariant = props.variant;
 			storyStore.setPreviewReady(props.variant, false);
 			const reuse = props.story.layout?.isolate !== true && servedStory.layout?.isolate !== true;
 			const target = iframe.value?.contentWindow;

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

@@ -1,28 +1,38 @@
+import { autoSelectsVariant } from "../../util/variant.js";
 import StoryVariantSinglePreviewRemote_default from "./StoryVariantSinglePreviewRemote.js";
 import StoryVariantSinglePreviewNative_default from "./StoryVariantSinglePreviewNative.js";
-import { createBlock, createElementBlock, defineComponent, openBlock } from "@poveste/vendors/vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, shallowRef, watchEffect } from "@poveste/vendors/vue";
 //#region src/app/components/story/StoryVariantSingleView.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	class: "poveste-story-variant-single-view h-full flex flex-col",
-	"data-testid": "story-variant-single-view"
-};
 var StoryVariantSingleView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryVariantSingleView",
 	props: {
-		variant: {},
-		story: {}
+		story: {},
+		variant: {}
 	},
 	setup(__props) {
+		const props = __props;
+		const shown = shallowRef(null);
+		watchEffect(() => {
+			const story = props.story;
+			if (story && props.variant) shown.value = {
+				story,
+				variant: props.variant
+			};
+			else if (shown.value && shown.value.story !== story && !autoSelectsVariant(story)) shown.value = null;
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [__props.story.layout?.iframe === false ? (openBlock(), createBlock(StoryVariantSinglePreviewNative_default, {
+			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?.type === "single" && shown.value.story.layout.iframe === false ? (openBlock(), createBlock(StoryVariantSinglePreviewNative_default, {
 				key: 0,
-				story: __props.story,
-				variant: __props.variant
+				story: shown.value.story,
+				variant: shown.value.variant
 			}, null, 8, ["story", "variant"])) : (openBlock(), createBlock(StoryVariantSinglePreviewRemote_default, {
 				key: 1,
-				story: __props.story,
-				variant: __props.variant
-			}, null, 8, ["story", "variant"]))]);
+				story: shown.value.story,
+				variant: shown.value.variant
+			}, null, 8, ["story", "variant"]))], 64)) : createCommentVNode("", true)], 2);
 		};
 	}
 });

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

@@ -3,6 +3,7 @@ import { useStoryStore } from "../../stores/story.js";
 import BaseSplitPane_default from "../base/BaseSplitPane.js";
 import { useLayoutStore } from "../../stores/layout.js";
 import BaseEmpty_default from "../base/BaseEmpty.js";
+import { autoSelectsVariant } from "../../util/variant.js";
 import StoryDocs_default from "../panel/StoryDocs.js";
 import StorySidePanel_default from "../panel/StorySidePanel.js";
 import StoryViewer_default from "./StoryViewer.js";
@@ -19,7 +20,7 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	setup(__props) {
 		const storyStore = useStoryStore();
 		const layoutStore = useLayoutStore();
-		const effectiveStoryOptionsVisible = computed(() => storyStore.currentStory?.meta?.storyOptions ?? layoutStore.settings.storyOptionsVisible);
+		const effectiveStoryOptionsVisible = computed(() => !!(storyStore.currentStory?.meta?.storyOptions ?? layoutStore.settings.storyOptionsVisible));
 		const placement = computed(() => layoutStore.settings.storyOptionsPlacement);
 		const splitOrientation = computed(() => placement.value === "bottom" ? "portrait" : "landscape");
 		const splitDefaultSplit = computed(() => placement.value === "bottom" ? 60 : 75);
@@ -29,13 +30,7 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			if (value) storyStore.currentStory.lastSelectedVariant = value;
 		}, { immediate: true });
 		watch(() => [storyStore.currentStory, storyStore.currentVariant], () => {
-			if (!storyStore.currentVariant) {
-				if (storyStore.currentStory?.lastSelectedVariant) {
-					setVariant(storyStore.currentStory.lastSelectedVariant.id);
-					return;
-				}
-				if (storyStore.currentStory?.variants.length === 1) setVariant(storyStore.currentStory.variants[0].id);
-			}
+			if (!storyStore.currentVariant && autoSelectsVariant(storyStore.currentStory)) setVariant((storyStore.currentStory.lastSelectedVariant ?? storyStore.currentStory.variants[0]).id);
 		}, { immediate: true });
 		function setVariant(variantId) {
 			router.replace({
@@ -70,14 +65,15 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				standalone: "",
 				class: "md:p-12 w-full md:max-w-[600px] lg:max-w-[800px] xl:max-w-[900px]",
 				onScrollTop: _cache[0] || (_cache[0] = ($event) => scrollDocsToTop())
-			}, null, 8, ["story"])], 512)) : unref(isMobile) ? (openBlock(), createBlock(StoryViewer_default, { key: 1 })) : !effectiveStoryOptionsVisible.value ? (openBlock(), createBlock(StoryViewer_default, { key: 2 })) : (openBlock(), createBlock(BaseSplitPane_default, {
-				key: 3,
+			}, null, 8, ["story"])], 512)) : (openBlock(), createBlock(BaseSplitPane_default, {
+				key: 1,
 				"save-id": `story-main-${placement.value}`,
 				orientation: splitOrientation.value,
 				min: 30,
 				max: 95,
 				"default-split": splitDefaultSplit.value,
 				"show-divider": false,
+				"show-last": !unref(isMobile) && effectiveStoryOptionsVisible.value,
 				class: "h-full"
 			}, {
 				first: withCtx(() => [createVNode(StoryViewer_default)]),
@@ -86,7 +82,8 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			}, 8, [
 				"save-id",
 				"orientation",
-				"default-split"
+				"default-split",
+				"show-last"
 			]))]));
 		};
 	}

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

@@ -1,5 +1,6 @@
 import { isDark } from "./util/dark.js";
 import { PREVIEW_SETTINGS_REQUEST, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from "./util/const.js";
+import { occupant } from "./util/occupant.js";
 import { previewDarkClasses, resolvePreviewDark } from "./util/color-scheme.js";
 import { applyPreviewSettings, loadStoredPreviewSettings, receivedSettings } from "./util/preview-settings.js";
 import GenericMountStory_default from "./components/story/GenericMountStory.js";
@@ -9,7 +10,7 @@ import { createStateBridge } from "./util/state-bridge.js";
 import { toRawDeep } from "./util/state.js";
 import { isBenignResizeObserverEvent } from "./util/uncaught.js";
 import { usePreferredDark } from "@poveste/vendors/vue-use";
-import { computed, createApp, h, onMounted, ref, watch } from "@poveste/vendors/vue";
+import { computed, createApp, h, onMounted, ref, watch, watchEffect } from "@poveste/vendors/vue";
 import { createPinia } from "@poveste/vendors/pinia";
 import { files, onUpdate } from "virtual:$poveste-stories";
 import { parseQuery } from "@poveste/vendors/vue-router";
@@ -18,6 +19,10 @@ import { reportStoryError } from "@poveste/shared";
 var query = parseQuery(window.location.search);
 var storyId = ref(typeof query.storyId === "string" ? query.storyId : null);
 var variantId = ref(typeof query.variantId === "string" ? query.variantId : null);
+watchEffect(() => {
+	occupant.storyId = storyId.value;
+	occupant.variantId = variantId.value;
+});
 var file = ref(null);
 function resolveFile(list = files) {
 	const found = list.find((f) => f.id === storyId.value);

package/dist/bundled/util/events.js

@@ -1,4 +1,5 @@
 import { EVENT_SEND } from "./const.js";
+import { occupant } from "./occupant.js";
 //#region src/app/util/events.ts
 async function logEvent(name, argument) {
 	const event = {
@@ -7,7 +8,9 @@ async function logEvent(name, argument) {
 	};
 	if (location.href.includes("__sandbox")) window.parent?.postMessage({
 		type: EVENT_SEND,
-		event
+		event,
+		storyId: occupant.storyId,
+		variantId: occupant.variantId
 	});
 	else {
 		const { useEventsStore } = await import("../stores/events.js");

package/dist/bundled/util/highlighter.js

@@ -1,4 +1,5 @@
-import { createHighlighter } from "shiki";
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 //#region src/app/util/highlighter.ts
 /**
 * Shiki is meant to be used as a singleton: each instance carries its own WASM
@@ -9,10 +10,16 @@ import { createHighlighter } from "shiki";
 * The langs and themes are fixed, so one shared instance is always correct.
 */
 var highlighterPromise;
+/**
+* `shiki/core`, not `shiki`: the latter is the full-bundle entry and ships every
+* grammar and theme whatever the options ask for — 10 MB a book (#304). The
+* dynamic imports are the interface, not a lazy-loading choice.
+*/
 function getHighlighter() {
-	highlighterPromise ??= createHighlighter({
-		langs: ["html", "jsx"],
-		themes: ["github-light", "github-dark"]
+	highlighterPromise ??= createHighlighterCore({
+		langs: [import("shiki/langs/html.mjs"), import("shiki/langs/jsx.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;
 		throw e;

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/bundled/util/occupant.js

@@ -0,0 +1,16 @@
+//#region src/app/util/occupant.ts
+/**
+* What the sandbox realm is currently showing.
+*
+* The realm is reused: a `SANDBOX_RETARGET` hands it another story rather than
+* booting a new document, so a message can outlive the occupant that queued it.
+* Every message `sandbox.ts` posts already carries these ids for that reason;
+* this module exists so `logEvent` — which posts from wherever a story calls it,
+* not from `sandbox.ts` — can carry them too (#328).
+*/
+var occupant = {
+	storyId: null,
+	variantId: null
+};
+//#endregion
+export { occupant };

package/dist/bundled/util/variant.js

@@ -1,6 +1,17 @@
 import { computed } from "@poveste/vendors/vue";
 import { useRoute } from "@poveste/vendors/vue-router";
 //#region src/app/util/variant.ts
+/**
+* Whether opening this story will put a variant in the route by itself.
+*
+* `StoryView` resolves the variant one tick after the story, so anything that
+* has to tell "a variant is on its way" from "this story is waiting for the
+* reader to pick one" needs the same answer it will give — hence one predicate
+* rather than two copies of the condition (#328).
+*/
+function autoSelectsVariant(story) {
+	return !!story && (!!story.lastSelectedVariant || story.variants.length === 1);
+}
 function useCurrentVariantRoute(variant) {
 	const route = useRoute();
 	return {
@@ -15,4 +26,4 @@ function useCurrentVariantRoute(variant) {
 	};
 }
 //#endregion
-export { useCurrentVariantRoute };
+export { autoSelectsVariant, useCurrentVariantRoute };

package/dist/style.css

@@ -174,10 +174,6 @@
   .bind-col-size {
     grid-template-columns: repeat(auto-fill, minmax(var(--poveste-col-size), 1fr));
   }
-  .__poveste-json-code[data-v-e4c89a1b] .cm-editor {
-    min-width: 280px;
-    height: 100%;
-  }
   .v-popper {
     line-height: 0;
   }
@@ -278,6 +274,10 @@
     inherits: false;
     initial-value: solid;
   }
+  .__poveste-json-code[data-v-e4c89a1b] .cm-editor {
+    min-width: 280px;
+    height: 100%;
+  }
   .v-popper {
     line-height: 0;
   }
@@ -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);
       }