@poveste/app 0.5.3 → 0.6.1

package/dist/app/style/font.css

@@ -0,0 +1,78 @@
+/*
+ * Upstream's sheet with the woff fallback dropped — every browser the app
+ * runs in takes the woff2, so shipping both put ~160K of never-fetched files
+ * in each book. Copied rather than imported because the package pairs the two
+ * formats in every `src`; `font.spec.ts` fails if a bump moves the subsets.
+ *
+ * Regenerate: node packages/poveste-app/scripts/font.mjs
+ */
+
+/* noto-sans-display-cyrillic-ext-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-cyrillic-ext-400-normal.woff2') format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* noto-sans-display-cyrillic-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-cyrillic-400-normal.woff2') format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* noto-sans-display-greek-ext-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-greek-ext-400-normal.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* noto-sans-display-greek-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-greek-400-normal.woff2') format('woff2');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* noto-sans-display-vietnamese-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-vietnamese-400-normal.woff2') format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* noto-sans-display-latin-ext-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-latin-ext-400-normal.woff2') format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* noto-sans-display-latin-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-latin-400-normal.woff2') format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}

package/dist/app/style/main.pcss

@@ -1,4 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');
+/* The app face (Noto Sans Display) is imported by the bundle entries, not here:
+   this file is compiled by the postcss CLI into dist/style.css, which rebases
+   font URLs relative to the *source* and ships a path into node_modules. Vite
+   processes the entries and hashes the files into the book (#219). */
 @import 'floating-vue/dist/style.css';
 @import '@poveste/controls/dist/index.es.css';
 

package/dist/app/style/sandbox.css

@@ -1,4 +1,7 @@
 @import '@poveste/controls/dist/index.es.css';
+/* Same self-hosted face as the app chrome (#219), so `html { font-family }`
+   below resolves the same way in a realm that has no app stylesheet. */
+@import './font.css';
 
 /* Lets the toolbar's preview background show through. Not `!important`: this
    file is wrapped in `@layer poveste-defaults` so consumer rules outrank it,

package/dist/bundle-main-dev.js

@@ -1,4 +1,5 @@
 import { mountMainApp } from './app/index'
+import './app/style/font.css'
 import './app/style/main.pcss'
 
 mountMainApp()

package/dist/bundle-main.js

@@ -1,6 +1,9 @@
 /* eslint-disable perfectionist/sort-imports -- global styles must load before app bundle */
 import 'virtual:$poveste-global-styles'
 import { mountMainApp } from './bundled/index.js'
+// Self-hosted app face, here rather than in main.pcss so Vite hashes the font
+// files into the book instead of postcss shipping a node_modules path (#219).
+import './app/style/font.css'
 import './style.css'
 import './bundled/app.css'
 

package/dist/bundled/app.css

@@ -1,14 +1,14 @@
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-tree-margin[data-v-9b200828] {
-  margin-left: var(--v8be95bec);
+.bind-tree-margin[data-v-0fa5d0aa] {
+  margin-left: var(--v00f90f2e);
 }
-.bind-icon-color[data-v-9b200828] {
-  color: var(--c827ed74);
+.bind-icon-color[data-v-0fa5d0aa] {
+  color: var(--fbc82fb6);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-tree-padding[data-v-5f7ae1b5] {
-  padding-left: var(--v52a68e33);
+.bind-tree-padding[data-v-11f8c91e] {
+  padding-left: var(--v047dbc51);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
@@ -17,9 +17,9 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-preview-bg[data-v-d6bd6512] {
-  background-color: var(--v37e53e34);
-  color: var(--eaa47ed2);
+.bind-preview-bg[data-v-ed785ad4] {
+  background-color: var(--ca113a48);
+  color: var(--v0083f4ef);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
@@ -93,7 +93,7 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.__poveste-code-placeholder[data-v-d93a75df] {
+.__poveste-code-placeholder[data-v-61bf773e] {
   color: inherit;
   font-size: inherit;
 }
@@ -108,21 +108,29 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-preview-bg[data-v-ad57bd5e] {
-  background-color: var(--v46972017);
+.bind-preview-bg[data-v-fa6bb28c] {
+  background-color: var(--v6d3c2da2);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-74c04c7c] {
-  color: var(--v2e50e6e6);
+.bind-icon-color[data-v-a394f172] {
+  color: var(--v68878cb8);
 }
-.bind-preview-bg[data-v-74c04c7c] {
-  background-color: var(--v7d5058c5);
+.bind-preview-bg[data-v-a394f172] {
+  background-color: var(--v5a063a9a);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-37853789] {
-  color: var(--v25a47cf6);
+/* Cells are placed with `order`, so without this Tab and a screen reader walk
+   them in slot order — the order they were recycled in, not the screen's.
+   Chromium only for now; elsewhere the rule is ignored. */
+.poveste-story-variant-grid-cells[data-v-15980005] {
+  reading-flow: grid-order;
+}
+}
+@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
+.bind-icon-color[data-v-e5d28031] {
+  color: var(--v97886b12);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
@@ -141,8 +149,8 @@ img.colorize-black[data-v-f632abed] {
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-2c253023] {
-  color: var(--f1e8a8be);
+.bind-icon-color[data-v-f8cfc1bd] {
+  color: var(--v1c6fbe98);
 }
 }
 /*$vite$:1*/

package/dist/bundled/components/app/AppActions.vue_vue_type_script_setup_true_lang.js

@@ -24,7 +24,7 @@ var AppActions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					!unref(isMobile) ? withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
 						key: 0,
 						"aria-label": "Open layout customization",
-						"data-test-id": "layout-btn",
+						"data-testid": "layout-btn",
 						onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("layout"))
 					}, {
 						default: withCtx(() => [createVNode(unref(Icon), {
@@ -34,7 +34,7 @@ var AppActions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 						_: 1
 					})), [[_directive_tooltip, unref(makeTooltip)("Layout", ({ isMac }) => isMac ? "meta+shift+l" : "ctrl+shift+l")]]) : createCommentVNode("", true),
 					withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
-						"data-test-id": "search-btn",
+						"data-testid": "search-btn",
 						onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("search"))
 					}, {
 						default: withCtx(() => [createVNode(unref(Icon), {

package/dist/bundled/components/base/BaseSelect.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "@poveste/vendors/vue";
-import { Dropdown } from "@poveste/vendors/floating-vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { Dropdown } from "@poveste/vendors/floating-vue";
 //#region src/app/components/base/BaseSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "cursor-pointer w-full outline-none px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal" };
 var _hoisted_2 = { class: "flex-1 truncate" };

package/dist/bundled/components/layout/LayoutModal.vue_vue_type_script_setup_true_lang.js

@@ -5,7 +5,7 @@ import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/layout/LayoutModal.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	class: "poveste-layout-modal fixed inset-0 bg-white/80 dark:bg-gray-900/80 z-20",
-	"data-test-id": "layout-modal"
+	"data-testid": "layout-modal"
 };
 var _hoisted_2 = { class: "bg-white dark:bg-gray-900 md:mt-16 md:mx-auto w-screen max-w-[512px] shadow-xl border border-gray-200 dark:border-gray-750 rounded-lg relative divide-y divide-gray-200 dark:divide-gray-850" };
 var _hoisted_3 = { class: "flex items-center px-6 py-3 text-gray-900 dark:text-gray-100" };
@@ -33,7 +33,7 @@ var LayoutModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				type: "button",
 				class: "flex items-center justify-center p-1 bg-transparent border-0 text-gray-500 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer",
 				"aria-label": "Close layout customization",
-				"data-test-id": "layout-modal-close",
+				"data-testid": "layout-modal-close",
 				onClick: _cache[1] || (_cache[1] = ($event) => close())
 			}, [createVNode(unref(Icon), {
 				icon: "carbon:close",

package/dist/bundled/components/layout/LayoutPane.vue_vue_type_script_setup_true_lang.js

@@ -14,13 +14,13 @@ var LayoutPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					title: "Story List",
 					icon: "carbon:open-panel-filled-left",
 					"state-icon": unref(settings).storyListVisible ? "carbon:view" : "carbon:view-off",
-					"data-test-id": "layout-toggle-story-list",
+					"data-testid": "layout-toggle-story-list",
 					onClick: _cache[0] || (_cache[0] = ($event) => unref(settings).storyListVisible = !unref(settings).storyListVisible)
 				}, null, 8, ["state-icon"]), createVNode(LayoutItem_default, {
 					title: "Story Options",
 					icon: "carbon:open-panel-filled-right",
 					"state-icon": unref(settings).storyOptionsVisible ? "carbon:view" : "carbon:view-off",
-					"data-test-id": "layout-toggle-story-options",
+					"data-testid": "layout-toggle-story-options",
 					onClick: _cache[1] || (_cache[1] = ($event) => unref(settings).storyOptionsVisible = !unref(settings).storyOptionsVisible)
 				}, null, 8, ["state-icon"])]),
 				_: 1
@@ -29,13 +29,13 @@ var LayoutPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					title: "Right",
 					icon: "carbon:open-panel-filled-right",
 					"is-active": unref(settings).storyOptionsPlacement === "right",
-					"data-test-id": "layout-placement-right",
+					"data-testid": "layout-placement-right",
 					onClick: _cache[2] || (_cache[2] = ($event) => unref(settings).storyOptionsPlacement = "right")
 				}, null, 8, ["is-active"]), createVNode(LayoutItem_default, {
 					title: "Bottom",
 					icon: "carbon:open-panel-filled-bottom",
 					"is-active": unref(settings).storyOptionsPlacement === "bottom",
-					"data-test-id": "layout-placement-bottom",
+					"data-testid": "layout-placement-bottom",
 					onClick: _cache[3] || (_cache[3] = ($event) => unref(settings).storyOptionsPlacement = "bottom")
 				}, null, 8, ["is-active"])]),
 				_: 1

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

@@ -1,9 +1,9 @@
-import { toRawDeep } from "../../util/state.js";
+import { toPresetState, toRawDeep } from "../../util/state.js";
 import BaseSelect_default from "../base/BaseSelect.js";
 import { onClickOutside, useStorage, useTimeoutFn } from "@poveste/vendors/vue-use";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, nextTick, normalizeClass, onMounted, openBlock, ref, resolveDirective, toDisplayString, unref, vModelText, withCtx, withDirectives, withKeys, withModifiers } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
-import { applyState, clone, omit } from "@poveste/shared";
+import { applyState, clone } from "@poveste/shared";
 //#region src/app/components/panel/StatePresets.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-state-presets flex gap-2 w-full items-center" };
 var _hoisted_2 = ["onUpdate:modelValue"];
@@ -25,7 +25,7 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		const props = __props;
 		const saveId = computed(() => `${props.story.id}:${props.variant.id}`);
 		const omitKeys = ["_hPropDefs"];
-		const defaultState = clone(omit(toRawDeep(props.variant.state), omitKeys));
+		const defaultState = toPresetState(props.variant.state, omitKeys);
 		const selectedOption = useStorage(`_poveste-presets/${saveId.value}/selected`, DEFAULT_ID);
 		const presetStates = useStorage(`_poveste-presets/${saveId.value}/states`, /* @__PURE__ */ new Map());
 		const presetsOptions = computed(() => {
@@ -53,7 +53,7 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		async function createPreset() {
 			const id = Date.now().toString();
 			presetStates.value.set(id, {
-				state: clone(omit(toRawDeep(props.variant.state), omitKeys)),
+				state: toPresetState(props.variant.state, omitKeys),
 				label: "New preset"
 			});
 			selectedOption.value = id;
@@ -68,7 +68,7 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		async function savePreset() {
 			if (!canEdit.value) return;
 			const preset = presetStates.value.get(selectedOption.value);
-			preset.state = clone(omit(toRawDeep(props.variant.state), omitKeys));
+			preset.state = toPresetState(props.variant.state, omitKeys);
 			savedNotif.value = true;
 			savedTimeout.start();
 		}

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

@@ -7,7 +7,7 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/panel/StoryControls.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
-	"data-test-id": "story-controls",
+	"data-testid": "story-controls",
 	class: "poveste-story-controls flex flex-col divide-y divide-gray-100 dark:divide-gray-750"
 };
 var _hoisted_2 = { class: "h-9 flex-none px-2 flex items-center" };

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

@@ -120,7 +120,7 @@ var StoryDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				ref_key: "renderedEl",
 				ref: renderedEl,
 				class: "prose dark:prose-invert p-4 max-w-none",
-				"data-test-id": "story-docs",
+				"data-testid": "story-docs",
 				innerHTML: unref(renderedDoc)
 			}, null, 8, _hoisted_1))], 32);
 		};

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

@@ -23,7 +23,7 @@ var StoryEvent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			return openBlock(), createBlock(_component_VDropdown, {
 				class: "poveste-story-event group",
 				placement: "right",
-				"data-test-id": "event-item"
+				"data-testid": "event-item"
 			}, {
 				default: withCtx(({ shown }) => [createElementVNode("div", { class: normalizeClass(["group-hover:bg-primary-100 dark:group-hover:bg-primary-700 cursor-pointer py-2 px-4 flex items-baseline gap-1 leading-normal", [shown ? "bg-primary-50 dark:bg-primary-600" : "group-odd:bg-gray-100/50 dark:group-odd:bg-gray-750/40"]]) }, [createElementVNode("span", { class: normalizeClass({ "text-primary-500": shown }) }, toDisplayString(__props.event.name), 3), __props.event.argument ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(formattedArgument.value), 1)) : createCommentVNode("", true)], 2)]),
 				popper: withCtx(() => [createElementVNode("div", _hoisted_2, [createElementVNode("pre", _hoisted_3, toDisplayString(__props.event.argument), 1)])]),

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

@@ -45,7 +45,7 @@ var StorySidePanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				"save-id": `story-sidepane-${innerOrientation.value}`,
 				orientation: innerOrientation.value,
 				class: "poveste-story-side-panel poveste-loaded h-full",
-				"data-test-id": "story-side-panel"
+				"data-testid": "story-side-panel"
 			}, {
 				first: withCtx(() => [createElementVNode("div", _hoisted_3, [createVNode(PaneTabs_default, {
 					story: unref(storyStore).currentStory,

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-d93a75df"]]);
+var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-61bf773e"]]);
 //#endregion
 export { StorySourceCode_default as default };

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

@@ -126,14 +126,14 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				class: "__poveste-code-placeholder w-full h-full p-4 outline-none bg-transparent resize-none m-0",
 				value: displayedSourceCode.value,
 				readonly: "",
-				"data-test-id": "story-source-code",
+				"data-testid": "story-source-code",
 				onScroll
 			}, null, 40, _hoisted_5)) : (openBlock(), createElementBlock("div", {
 				key: 4,
 				ref_key: "scroller",
 				ref: scroller,
 				class: "w-full h-full overflow-auto",
-				"data-test-id": "story-source-code",
+				"data-testid": "story-source-code",
 				onScroll
 			}, [createElementVNode("div", {
 				class: "__poveste-code __histoire-code p-4 w-fit",

package/dist/bundled/components/search/SearchItem.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import SearchItem_vue_vue_type_script_setup_true_lang_default from "./SearchItem.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                           */
 //#region src/app/components/search/SearchItem.vue
-var SearchItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SearchItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2c253023"]]);
+var SearchItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SearchItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f8cfc1bd"]]);
 //#endregion
 export { SearchItem_default as default };

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

@@ -19,7 +19,7 @@ var SearchItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	},
 	emits: { close: () => true },
 	setup(__props, { emit: __emit }) {
-		useCssVars((_ctx) => ({ "f1e8a8be": __props.result.iconColor }));
+		useCssVars((_ctx) => ({ "v1c6fbe98": __props.result.iconColor }));
 		const props = __props;
 		const emit = __emit;
 		const el = ref();
@@ -34,7 +34,7 @@ var SearchItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				ref_key: "el",
 				ref: el,
 				class: "poveste-search-item",
-				"data-test-id": "search-item",
+				"data-testid": "search-item",
 				"data-selected": unref(selected) ? "" : void 0
 			}, ["route" in __props.result ? (openBlock(), createBlock(BaseListItemLink_default, {
 				key: 0,

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

@@ -3,7 +3,7 @@ import { createElementBlock, createElementVNode, createVNode, defineAsyncCompone
 //#region src/app/components/search/SearchModal.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	class: "poveste-search-modal fixed inset-0 bg-white/80 dark:bg-gray-900/80 z-20",
-	"data-test-id": "search-modal"
+	"data-testid": "search-modal"
 };
 var _hoisted_2 = { class: "bg-white dark:bg-gray-900 md:mt-16 md:mx-auto w-screen max-w-[512px] shadow-xl border border-gray-200 dark:border-gray-750 rounded-lg relative divide-y divide-gray-200 dark:divide-gray-850" };
 var SearchModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({

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

@@ -184,6 +184,7 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const { selectedIndex, selectNext, selectPrevious } = useSelection(results);
 		const router = useRouter();
 		onKeyboardShortcut(["enter"], () => {
+			if (!props.shown) return;
 			const result = results.value[selectedIndex.value];
 			if (!result) return;
 			if ("route" in result) router.push(result.route);

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

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

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

@@ -3,25 +3,27 @@ import CheckerboardPattern_default from "../misc/CheckerboardPattern.js";
 import HatchedPattern_default from "../misc/HatchedPattern.js";
 import { useEventListener } from "@poveste/vendors/vue-use";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createVNode, defineComponent, normalizeClass, onUnmounted, openBlock, ref, renderSlot, unref, useCssVars, withDirectives } from "@poveste/vendors/vue";
-import { VTooltip } from "@poveste/vendors/floating-vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { VTooltip } from "@poveste/vendors/floating-vue";
 //#region src/app/components/story/StoryResponsivePreview.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-story-responsive-preview w-full h-full flex-1 rounded-lg relative overflow-hidden" };
 var _hoisted_2 = {
 	key: 0,
 	class: "absolute inset-0 w-full h-full bg-gray-100 dark:bg-gray-750 rounded-r-lg border-l-2 border-gray-500/10 dark:border-gray-700/30 overflow-hidden"
 };
-var _hoisted_3 = {
-	class: "bind-preview-bg rounded-lg h-full",
-	"data-test-id": "responsive-preview-bg"
-};
-var _hoisted_4 = { class: "p-8 h-full relative" };
-var _hoisted_5 = { class: "w-full h-full relative" };
+var _hoisted_3 = ["data-testid"];
+var _hoisted_4 = { class: "w-full h-full relative" };
 var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryResponsivePreview",
-	props: { variant: {} },
+	props: {
+		variant: {},
+		responsive: {
+			type: Boolean,
+			default: true
+		}
+	},
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v46972017": unref(settings).backgroundColor }));
+		useCssVars((_ctx) => ({ "v6d3c2da2": unref(settings).backgroundColor }));
 		const props = __props;
 		const settings = usePreviewSettingsStore().currentSettings;
 		const resizing = ref(false);
@@ -102,67 +104,70 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		useDragger(cornerDragger, responsiveHeight, 32, 2e4, "y");
 		const finalWidth = computed(() => settings.rotate ? settings.responsiveHeight : settings.responsiveWidth);
 		const finalHeight = computed(() => settings.rotate ? settings.responsiveWidth : settings.responsiveHeight);
-		const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled);
+		const isResponsiveEnabled = computed(() => props.responsive && !props.variant.responsiveDisabled);
 		const sizeTooltip = computed(() => `${responsiveWidth.value ?? "Auto"} × ${responsiveHeight.value ?? "Auto"}`);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [isResponsiveEnabled.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(HatchedPattern_default, { class: "w-full h-full text-black/[1%] dark:text-white/[1%]" })])) : createCommentVNode("", true), createElementVNode("div", {
 				ref_key: "previewWrapper",
 				ref: previewWrapper,
 				class: "h-full overflow-auto relative"
-			}, [createElementVNode("div", { class: normalizeClass(["overflow-hidden bg-white dark:bg-gray-700 rounded-lg relative", isResponsiveEnabled.value ? {
-				"w-fit": !!finalWidth.value,
-				"h-fit": !!finalHeight.value,
-				"h-full": !finalHeight.value
-			} : "h-full"]) }, [createElementVNode("div", _hoisted_3, [
-				unref(settings).checkerboard ? (openBlock(), createBlock(CheckerboardPattern_default, {
-					key: 0,
-					class: "absolute inset-0 w-full h-full text-gray-500/20"
-				})) : createCommentVNode("", true),
-				createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [_cache[0] || (_cache[0] = createElementVNode("div", { class: "absolute inset-0" }, null, -1)), renderSlot(_ctx.$slots, "default", {
-					isResponsiveEnabled: isResponsiveEnabled.value,
-					finalWidth: finalWidth.value,
-					finalHeight: finalHeight.value,
-					resizing: resizing.value
-				}, void 0, true)]), _cache[1] || (_cache[1] = createStaticVNode("<div class=\"absolute top-5 left-8 h-2 w-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-ad57bd5e></div>", 8))]),
-				isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-					withDirectives((openBlock(), createElementBlock("div", {
-						ref_key: "horizontalDragger",
-						ref: horizontalDragger,
-						class: "absolute w-4 top-0 bottom-4 right-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ew-resize group hover:text-primary-500"
-					}, [createVNode(unref(Icon), {
-						icon: "mdi:drag-vertical-variant",
-						class: "w-4 h-4 opacity-20 group-hover:opacity-90"
-					})])), [[
-						unref(VTooltip),
-						sizeTooltip.value,
-						void 0,
-						{ right: true }
-					]]),
-					withDirectives((openBlock(), createElementBlock("div", {
-						ref_key: "verticalDragger",
-						ref: verticalDragger,
-						class: "absolute h-4 left-0 right-4 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ns-resize group hover:text-primary-500"
-					}, [createVNode(unref(Icon), {
-						icon: "mdi:drag-horizontal-variant",
-						class: "w-4 h-4 opacity-20 group-hover:opacity-90"
-					})])), [[
-						unref(VTooltip),
-						sizeTooltip.value,
-						void 0,
-						{ bottom: true }
-					]]),
-					withDirectives(createElementVNode("div", {
-						ref_key: "cornerDragger",
-						ref: cornerDragger,
-						class: "absolute w-4 h-4 right-0 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-nwse-resize group hover:text-primary-500"
-					}, null, 512), [[
-						unref(VTooltip),
-						sizeTooltip.value,
-						void 0,
-						{ bottom: true }
-					]])
-				], 64)) : createCommentVNode("", true)
-			])], 2)], 512)]);
+			}, [createElementVNode("div", { class: normalizeClass(["rounded-lg relative", [
+				__props.responsive ? "bg-white dark:bg-gray-700" : "",
+				isResponsiveEnabled.value ? {
+					"w-fit": !!finalWidth.value,
+					"h-fit": !!finalHeight.value,
+					"h-full": !finalHeight.value
+				} : "h-full",
+				isResponsiveEnabled.value && finalHeight.value ? "overflow-hidden" : "overflow-auto"
+			]]) }, [createElementVNode("div", {
+				class: normalizeClass(["rounded-lg min-h-full relative", __props.responsive ? "bind-preview-bg" : ""]),
+				"data-testid": __props.responsive ? "responsive-preview-bg" : void 0
+			}, [unref(settings).checkerboard && __props.responsive ? (openBlock(), createBlock(CheckerboardPattern_default, {
+				key: 0,
+				class: "absolute inset-0 w-full h-full text-gray-500/20"
+			})) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(["h-full relative", __props.responsive ? "p-8" : ""]) }, [createElementVNode("div", _hoisted_4, [_cache[0] || (_cache[0] = createElementVNode("div", { class: "absolute inset-0" }, null, -1)), renderSlot(_ctx.$slots, "default", {
+				isResponsiveEnabled: isResponsiveEnabled.value,
+				finalWidth: finalWidth.value,
+				finalHeight: finalHeight.value,
+				resizing: resizing.value
+			}, void 0, true)]), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[1] || (_cache[1] = createStaticVNode("<div class=\"absolute top-5 left-8 h-2 w-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-fa6bb28c></div>", 8))], 64)) : createCommentVNode("", true)], 2)], 10, _hoisted_3), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+				withDirectives((openBlock(), createElementBlock("div", {
+					ref_key: "horizontalDragger",
+					ref: horizontalDragger,
+					class: "absolute w-4 top-0 bottom-4 right-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ew-resize group hover:text-primary-500"
+				}, [createVNode(unref(Icon), {
+					icon: "mdi:drag-vertical-variant",
+					class: "w-4 h-4 opacity-20 group-hover:opacity-90"
+				})])), [[
+					unref(VTooltip),
+					sizeTooltip.value,
+					void 0,
+					{ right: true }
+				]]),
+				withDirectives((openBlock(), createElementBlock("div", {
+					ref_key: "verticalDragger",
+					ref: verticalDragger,
+					class: "absolute h-4 left-0 right-4 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ns-resize group hover:text-primary-500"
+				}, [createVNode(unref(Icon), {
+					icon: "mdi:drag-horizontal-variant",
+					class: "w-4 h-4 opacity-20 group-hover:opacity-90"
+				})])), [[
+					unref(VTooltip),
+					sizeTooltip.value,
+					void 0,
+					{ bottom: true }
+				]]),
+				withDirectives(createElementVNode("div", {
+					ref_key: "cornerDragger",
+					ref: cornerDragger,
+					class: "absolute w-4 h-4 right-0 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-nwse-resize group hover:text-primary-500"
+				}, null, 512), [[
+					unref(VTooltip),
+					sizeTooltip.value,
+					void 0,
+					{ bottom: true }
+				]])
+			], 64)) : createCommentVNode("", true)], 2)], 512)]);
 		};
 	}
 });