@poveste/app 0.14.0 → 0.16.0

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

@@ -1,18 +1,15 @@
 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 { onClickOutside, useLiveAnnouncer, useStorage, useTimeoutFn } from "@poveste/vendors/vue-use";
+import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, nextTick, normalizeClass, onMounted, openBlock, ref, unref, vModelText, withCtx, withDirectives, withKeys } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 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 = {
-	key: 1,
-	class: "flex items-center gap-2"
-};
-var _hoisted_3 = { class: "flex-1 truncate" };
-var _hoisted_4 = { class: "flex gap-2 items-center" };
-var _hoisted_5 = { class: "flex-1 truncate" };
+var _hoisted_2 = ["disabled"];
+var _hoisted_3 = ["disabled"];
+var _hoisted_4 = ["disabled"];
 var DEFAULT_ID = "default";
 var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StatePresets",
@@ -50,6 +47,7 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		});
 		const input = ref();
 		const select = ref();
+		const picker = ref();
 		const canEdit = computed(() => selectedOption.value !== DEFAULT_ID);
 		const isEditing = ref(false);
 		async function createPreset() {
@@ -71,6 +69,7 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			}
 		});
 		const savedNotif = ref(false);
+		const { polite } = useLiveAnnouncer();
 		const savedTimeout = useTimeoutFn(() => {
 			savedNotif.value = false;
 		}, 1e3);
@@ -81,6 +80,7 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			preset.state = toPresetState(props.variant.state, omitKeys);
 			savedNotif.value = true;
 			savedTimeout.start();
+			polite("Preset saved");
 		}
 		function deletePreset(id) {
 			if (!confirm("Are you sure you want to delete this preset?")) return;
@@ -93,64 +93,108 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			await nextTick();
 			input.value?.select();
 		}
-		function stopEditing() {
+		async function stopEditing(refocus = false) {
+			if (!isEditing.value) return;
 			isEditing.value = false;
+			if (refocus) {
+				await nextTick();
+				picker.value?.focus();
+			}
 		}
-		onClickOutside(select, stopEditing);
+		onClickOutside(select, () => stopEditing());
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createElementVNode("div", {
 					ref_key: "select",
 					ref: select,
 					class: "flex-1 min-w-0"
-				}, [createVNode(BaseSelect_default, {
+				}, [isEditing.value ? withDirectives((openBlock(), createElementBlock("input", {
+					key: 0,
+					ref_key: "input",
+					ref: input,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => editingLabel.value = $event),
+					type: "text",
+					"aria-label": "Preset name",
+					class: "text-inherit bg-transparent w-full px-2 h-[27px] -my-1 border border-solid border-primary-500 rounded-sm outline-none",
+					onKeydown: [_cache[1] || (_cache[1] = withKeys(($event) => stopEditing(true), ["enter"])), _cache[2] || (_cache[2] = withKeys(($event) => stopEditing(true), ["escape"]))]
+				}, null, 544)), [[vModelText, editingLabel.value]]) : (openBlock(), createBlock(BaseSelect_default, {
+					key: 1,
+					ref_key: "picker",
+					ref: picker,
 					modelValue: unref(selectedOption),
 					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(selectedOption) ? selectedOption.value = $event : null),
+					label: "Preset",
 					options: presetsOptions.value,
 					onDblclick: _cache[4] || (_cache[4] = ($event) => startEditing()),
-					onKeydown: [_cache[5] || (_cache[5] = withKeys(($event) => stopEditing(), ["enter"])), _cache[6] || (_cache[6] = withKeys(($event) => stopEditing(), ["escape"]))],
-					onSelect: _cache[7] || (_cache[7] = (id) => applyPreset(id))
-				}, {
-					default: withCtx(({ label }) => [isEditing.value ? withDirectives((openBlock(), createElementBlock("input", {
-						key: 0,
-						ref_key: "input",
-						ref: input,
-						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => editingLabel.value = $event),
-						type: "text",
-						class: "text-inherit bg-transparent w-full h-full outline-none",
-						onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop", "prevent"]))
-					}, null, 512)), [[vModelText, editingLabel.value]]) : (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(label), 1), canEdit.value ? withDirectives((openBlock(), createBlock(unref(Icon), {
-						key: 0,
+					onSelect: _cache[5] || (_cache[5] = (id) => applyPreset(id))
+				}, null, 8, ["modelValue", "options"]))], 512),
+				createVNode(unref(HstTooltip), { content: canEdit.value ? "Rename this preset" : null }, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						"data-testid": "preset-rename",
+						"aria-label": "Rename preset",
+						disabled: !canEdit.value,
+						class: normalizeClass(["flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canEdit.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
+						onClick: _cache[6] || (_cache[6] = ($event) => startEditing())
+					}, [createVNode(unref(Icon), {
 						icon: "carbon:edit",
-						class: "flex-none cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100",
-						onClick: _cache[2] || (_cache[2] = withModifiers(($event) => startEditing(), ["stop"]))
-					}, null, 512)), [[_directive_tooltip, "Rename this preset"]]) : createCommentVNode("", true)]))]),
-					option: withCtx(({ label, value }) => [createElementVNode("div", _hoisted_4, [createElementVNode("span", _hoisted_5, toDisplayString(label), 1), value !== DEFAULT_ID ? withDirectives((openBlock(), createBlock(unref(Icon), {
-						key: 0,
+						class: "w-4 h-4"
+					})], 10, _hoisted_2)]),
+					_: 1
+				}, 8, ["content"]),
+				createVNode(unref(HstTooltip), { content: canEdit.value ? "Delete this preset" : null }, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						"data-testid": "preset-delete",
+						"aria-label": "Delete preset",
+						disabled: !canEdit.value,
+						class: normalizeClass(["flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canEdit.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
+						onClick: _cache[7] || (_cache[7] = ($event) => deletePreset(unref(selectedOption)))
+					}, [createVNode(unref(Icon), {
 						icon: "carbon:trash-can",
-						class: "flex-none cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100",
-						onClick: withModifiers(($event) => deletePreset(value), ["stop"])
-					}, null, 8, ["onClick"])), [[_directive_tooltip, "Delete this preset"]]) : createCommentVNode("", true)])]),
+						class: "w-4 h-4"
+					})], 10, _hoisted_3)]),
+					_: 1
+				}, 8, ["content"]),
+				createVNode(unref(HstTooltip), { content: savedNotif.value ? "Saved!" : canEdit.value ? "Save to preset" : null }, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						"data-testid": "preset-save",
+						"aria-label": "Save to preset",
+						disabled: !canEdit.value,
+						class: normalizeClass(["flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canEdit.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
+						onClick: _cache[8] || (_cache[8] = ($event) => savePreset())
+					}, [createVNode(unref(Icon), {
+						icon: savedNotif.value ? "carbon:checkmark" : "carbon:save",
+						class: "w-4 h-4"
+					}, null, 8, ["icon"])], 10, _hoisted_4)]),
+					_: 1
+				}, 8, ["content"]),
+				createVNode(unref(HstTooltip), { content: "Create new preset" }, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						"data-testid": "preset-create",
+						"aria-label": "Create new preset",
+						class: "flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100",
+						onClick: _cache[9] || (_cache[9] = ($event) => createPreset())
+					}, [createVNode(unref(Icon), {
+						icon: "carbon:add-alt",
+						class: "w-4 h-4"
+					})])]),
+					_: 1
+				}),
+				createVNode(unref(HstTooltip), { content: "Reset to initial state" }, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						"aria-label": "Reset to initial state",
+						class: "flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100",
+						onClick: _cache[10] || (_cache[10] = ($event) => resetState())
+					}, [createVNode(unref(Icon), {
+						icon: "carbon:reset",
+						class: "w-4 h-4"
+					})])]),
 					_: 1
-				}, 8, ["modelValue", "options"])], 512),
-				withDirectives(createVNode(unref(Icon), {
-					"data-testid": "preset-save",
-					icon: savedNotif.value ? "carbon:checkmark" : "carbon:save",
-					class: normalizeClass(["cursor-pointer w-4 h-4 hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100", [canEdit.value ? "opacity-50 hover:opacity-100" : "opacity-25 pointer-events-none"]]),
-					onClick: _cache[8] || (_cache[8] = ($event) => savePreset())
-				}, null, 8, ["icon", "class"]), [[_directive_tooltip, savedNotif.value ? "Saved!" : canEdit.value ? "Save to preset" : null]]),
-				withDirectives(createVNode(unref(Icon), {
-					"data-testid": "preset-create",
-					icon: "carbon:add-alt",
-					class: "cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100",
-					onClick: _cache[9] || (_cache[9] = ($event) => createPreset())
-				}, null, 512), [[_directive_tooltip, "Create new preset"]]),
-				withDirectives(createVNode(unref(Icon), {
-					icon: "carbon:reset",
-					class: "cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100",
-					onClick: _cache[10] || (_cache[10] = ($event) => resetState())
-				}, null, 512), [[_directive_tooltip, "Reset to initial state"]])
+				})
 			]);
 		};
 	}

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

@@ -1,4 +1,5 @@
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, resolveComponent, toDisplayString, withCtx } from "@poveste/vendors/vue";
+import BaseDropdown_default from "../base/BaseDropdown.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, withCtx } from "@poveste/vendors/vue";
 //#region src/app/components/panel/StoryEvent.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -23,13 +24,12 @@ var StoryEvent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			}
 		});
 		return (_ctx, _cache) => {
-			const _component_VDropdown = resolveComponent("VDropdown");
-			return openBlock(), createBlock(_component_VDropdown, {
+			return openBlock(), createBlock(BaseDropdown_default, {
+				side: "right",
 				class: "poveste-story-event group",
-				placement: "right",
 				"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)]),
+				default: withCtx(({ open }) => [createElementVNode("button", { class: normalizeClass(["group-hover:bg-primary-100 dark:group-hover:bg-primary-700 cursor-pointer py-2 px-4 w-full text-left flex items-baseline gap-1 leading-normal", [open ? "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": open }) }, 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)])]),
 				_: 1
 			});

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

@@ -21,7 +21,7 @@ var StorySidePanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		const innerOrientation = computed(() => layoutStore.settings.storyOptionsPlacement === "bottom" ? "landscape" : "portrait");
 		const route = useRoute();
 		const panelContentComponent = computed(() => {
-			switch (route.query.tab) {
+			switch (route.query["tab"]) {
 				case "docs": return StoryDocs_default;
 				case "events": return StoryEvents_default;
 				default: return StoryControls_default;
@@ -43,6 +43,7 @@ var StorySidePanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			})) : (openBlock(), createBlock(BaseSplitPane_default, {
 				key: 2,
 				"save-id": `story-sidepane-${innerOrientation.value}`,
+				label: "Resize the controls panel",
 				orientation: innerOrientation.value,
 				class: "poveste-story-side-panel poveste-loaded h-full",
 				"data-testid": "story-side-panel"

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

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

@@ -1,11 +1,11 @@
 import { isDark } from "../../util/dark.js";
 import BaseEmpty_default from "../base/BaseEmpty.js";
 import { getHighlighter } from "../../util/highlighter.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeClass, onMounted, openBlock, ref, resolveDirective, shallowRef, toDisplayString, unref, watch, watchEffect, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeClass, onMounted, openBlock, ref, shallowRef, toDisplayString, unref, watch, watchEffect, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstCopyIcon, HstTooltip } from "@poveste/controls";
 import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
 import { unindent } from "@poveste/shared";
-import { HstCopyIcon } from "@poveste/controls";
 //#region src/app/components/panel/StorySourceCode.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-story-source-code bg-gray-50 dark:bg-gray-750 h-full overflow-hidden flex flex-col" };
 var _hoisted_2 = {
@@ -52,7 +52,7 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				} else dynamicSourceCode.value = await generateSourceCodeFn.value(props.variant);
 			} catch (e) {
 				console.error(e);
-				error.value = e.message;
+				error.value = e instanceof Error ? e.message : String(e);
 			}
 			if (!dynamicSourceCode.value) displayedSource.value = "static";
 		}, {
@@ -86,30 +86,35 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		});
 		const scroller = ref();
 		function onScroll(event) {
-			if (sourceHtml.value) lastScroll = event.target.scrollTop;
+			if (sourceHtml.value && event.target instanceof HTMLElement) lastScroll = event.target.scrollTop;
 		}
 		watch(sourceHtml, async () => {
 			await nextTick();
 			if (scroller.value) scroller.value.scrollTop = lastScroll;
 		});
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
 			return openBlock(), createElementBlock("div", _hoisted_1, [!error.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
 				_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-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-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",
-					class: "w-4 h-4 flex-none"
-				}), createElementVNode("span", { class: normalizeClass(["transition-opacity duration-300", { "opacity-0": displayedSource.value !== "static" }]) }, " Static ", 2)], 2)), [[_directive_tooltip, !staticSourceCode.value ? "Static source code is not available" : displayedSource.value !== "static" ? "Switch to static source" : null]])]),
+				createElementVNode("div", _hoisted_3, [createVNode(unref(HstTooltip), { content: !dynamicSourceCode.value ? "Dynamic source code is not available" : displayedSource.value !== "dynamic" ? "Switch to dynamic source" : null }, {
+					default: withCtx(() => [createElementVNode("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-800 dark:text-primary-400", dynamicSourceCode.value ? "cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50" : displayedSource.value !== "dynamic" && "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)]),
+					_: 1
+				}, 8, ["content"]), createVNode(unref(HstTooltip), { content: !staticSourceCode.value ? "Static source code is not available" : displayedSource.value !== "static" ? "Switch to static source" : null }, {
+					default: withCtx(() => [createElementVNode("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-800 dark:text-primary-400", staticSourceCode.value ? "cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50" : displayedSource.value !== "static" && "opacity-50"]]),
+						onClick: _cache[1] || (_cache[1] = ($event) => staticSourceCode.value && (displayedSource.value = "static"))
+					}, [createVNode(unref(Icon), {
+						icon: "carbon:document",
+						class: "w-4 h-4 flex-none"
+					}), createElementVNode("span", { class: normalizeClass(["transition-opacity duration-300", { "opacity-0": displayedSource.value !== "static" }]) }, " Static ", 2)], 2)]),
+					_: 1
+				}, 8, ["content"])]),
 				createVNode(unref(HstCopyIcon), {
 					content: displayedSourceCode.value,
 					class: "flex-none"
@@ -126,6 +131,7 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				ref: scroller,
 				class: "__poveste-code-placeholder w-full h-full p-4 outline-none bg-transparent resize-none m-0",
 				value: displayedSourceCode.value,
+				"aria-label": "Source code",
 				readonly: "",
 				"data-testid": "story-source-code",
 				onScroll

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

@@ -18,7 +18,8 @@ var SearchItemContent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 	setup(__props) {
 		const defaultIcons = {
 			story: "carbon:cube",
-			variant: "carbon:cube"
+			variant: "carbon:cube",
+			command: "carbon:chevron-right"
 		};
 		const kindLabels = {
 			story: "Story",

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

@@ -103,8 +103,7 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 						break;
 					}
 					case "variant": {
-						const [storyId] = idMapData.id.split(":");
-						const story = storyStore.getStoryById(storyId);
+						const story = storyStore.getStoryById(idMapData.id.replace(/:.*$/s, ""));
 						const variant = storyStore.getVariantById(idMapData.id);
 						if (!story || !variant) continue;
 						list.push(variantResultFactory(story, variant, rank));

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-d3057f34"]]);
+var StoryResponsivePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a99edb14"]]);
 //#endregion
 export { StoryResponsivePreview_default as default };

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

@@ -2,9 +2,9 @@ import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 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 { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createVNode, defineComponent, normalizeClass, onUnmounted, openBlock, ref, renderSlot, unref, useCssVars, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
-import { VTooltip } from "@poveste/vendors/floating-vue";
+import { HstTooltip } from "@poveste/controls";
 //#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 = {
@@ -12,7 +12,7 @@ var _hoisted_2 = {
 	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 = ["data-testid"];
-var _hoisted_4 = { class: "w-full h-full relative" };
+var _hoisted_4 = { class: "w-full flex-1 relative grid" };
 var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryResponsivePreview",
 	props: {
@@ -23,7 +23,7 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		}
 	},
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v372ee944": unref(settings).backgroundColor }));
+		useCssVars((_ctx) => ({ "v4ce71e65": unref(settings).backgroundColor }));
 		const props = __props;
 		const settings = usePreviewSettingsStore().currentSettings;
 		const resizing = ref(false);
@@ -75,7 +75,9 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 			function onTouchStart(event) {
 				event.preventDefault();
 				event.stopPropagation();
-				const start = axis === "x" ? event.touches[0].clientX : event.touches[0].clientY;
+				const [touch] = event.touches;
+				if (!touch) return;
+				const start = axis === "x" ? touch.clientX : touch.clientY;
 				const startValue = startFrom();
 				resizing.value = true;
 				const removeListeners = [
@@ -84,7 +86,9 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 					addWindowListener("touchcancel", onTouchEnd)
 				];
 				function onTouchMove(event) {
-					const delta = (axis === "x" ? event.touches[0].clientX : event.touches[0].clientY) - start;
+					const [touch] = event.touches;
+					if (!touch) return;
+					const delta = (axis === "x" ? touch.clientX : touch.clientY) - start;
 					value.value = Math.max(min, Math.min(max, startValue + delta));
 				}
 				function onTouchEnd() {
@@ -131,53 +135,56 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 				} : "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" : ""]),
+				class: normalizeClass(["rounded-lg min-h-full relative flex flex-col", __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", {
+			})) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(["flex-1 relative flex flex-col", __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-d3057f34></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-d3057f34></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-d3057f34></div>", 8))], 64)) : createCommentVNode("", true)], 2)], 10, _hoisted_3), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-				withDirectives((openBlock(), createElementBlock("div", {
-					ref_key: "horizontalDragger",
-					ref: horizontalDragger,
-					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 }
-				]])
+			}, 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-a99edb14></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div>", 8))], 64)) : createCommentVNode("", true)], 2)], 10, _hoisted_3), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+				createVNode(unref(HstTooltip), {
+					content: sizeTooltip.value,
+					side: "right"
+				}, {
+					default: withCtx(() => [createElementVNode("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"
+					})], 512)]),
+					_: 1
+				}, 8, ["content"]),
+				createVNode(unref(HstTooltip), {
+					content: sizeTooltip.value,
+					side: "bottom"
+				}, {
+					default: withCtx(() => [createElementVNode("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"
+					})], 512)]),
+					_: 1
+				}, 8, ["content"]),
+				createVNode(unref(HstTooltip), {
+					content: sizeTooltip.value,
+					side: "bottom"
+				}, {
+					default: withCtx(() => [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)]),
+					_: 1
+				}, 8, ["content"])
 			], 64)) : createCommentVNode("", true)], 2)], 512)]);
 		};
 	}

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

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

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

@@ -11,14 +11,14 @@ 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";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, resolveComponent, resolveDirective, toDisplayString, toRefs, unref, useCssVars, watch, withCtx, withDirectives, withModifiers } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, resolveComponent, toDisplayString, toRefs, unref, useCssVars, watch, withCtx, withModifiers } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstCopyIcon, HstTooltip } from "@poveste/controls";
 import { useRouter } from "@poveste/vendors/vue-router";
-import { HstCopyIcon } from "@poveste/controls";
 //#region src/app/components/story/StoryVariantGridItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex-none flex items-center" };
 var _hoisted_2 = { class: "truncate flex-1" };
-var _hoisted_3 = { class: "flex-none ml-auto hidden group-hover:flex items-center" };
+var _hoisted_3 = { class: "flex-none ml-auto hidden group-hover:flex group-focus-within:flex items-center" };
 var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryVariantGridItem",
 	props: {
@@ -34,8 +34,8 @@ var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 	emits: { resize: (_width, _height) => true },
 	setup(__props, { emit: __emit }) {
 		useCssVars((_ctx) => ({
-			"v68878cb8": unref(variant).iconColor,
-			"v5a063a9a": unref(settings).backgroundColor
+			"v1061c03c": unref(variant).iconColor,
+			"v2d8b4c49": unref(settings).backgroundColor
 		}));
 		const props = __props;
 		const emit = __emit;
@@ -76,27 +76,29 @@ var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		});
 		return (_ctx, _cache) => {
 			const _component_RouterLink = resolveComponent("RouterLink");
-			const _directive_tooltip = resolveDirective("tooltip");
 			return openBlock(), createElementBlock("div", {
 				ref_key: "el",
 				ref: el,
 				class: "poveste-story-variant-grid-item cursor-default flex flex-col gap-y-1 group"
-			}, [createElementVNode("div", _hoisted_1, [withDirectives((openBlock(), createBlock(_component_RouterLink, {
-				to: unref(targetRoute),
-				class: normalizeClass(["rounded w-max px-2 py-0.5 min-w-16 cursor-pointer flex items-center gap-1 flex-shrink", {
-					"hover:bg-gray-200 text-gray-500 dark:hover:bg-gray-800": !unref(isActive),
-					"bg-primary-200 hover:bg-primary-300 text-primary-800 dark:bg-primary-700 dark:hover:bg-primary-800 dark:text-primary-200": unref(isActive)
-				}])
-			}, {
-				default: withCtx(() => [createVNode(unref(Icon), {
-					icon: unref(variant).icon ?? "carbon:cube",
-					class: normalizeClass(["w-4 h-4 opacity-50", {
-						"text-gray-500": !unref(isActive) && !unref(variant).iconColor,
-						"bind-icon-color": !unref(isActive) && unref(variant).iconColor
+			}, [createElementVNode("div", _hoisted_1, [createVNode(unref(HstTooltip), { content: unref(variant).title }, {
+				default: withCtx(() => [createVNode(_component_RouterLink, {
+					to: unref(targetRoute),
+					class: normalizeClass(["rounded w-max px-2 py-0.5 min-w-16 cursor-pointer flex items-center gap-1 flex-shrink", {
+						"hover:bg-gray-200 text-gray-500 dark:hover:bg-gray-800": !unref(isActive),
+						"bg-primary-200 hover:bg-primary-300 text-primary-800 dark:bg-primary-700 dark:hover:bg-primary-800 dark:text-primary-200": unref(isActive)
 					}])
-				}, null, 8, ["icon", "class"]), createElementVNode("span", _hoisted_2, toDisplayString(unref(variant).title), 1)]),
+				}, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: unref(variant).icon ?? "carbon:cube",
+						class: normalizeClass(["w-4 h-4 opacity-50", {
+							"text-gray-500": !unref(isActive) && !unref(variant).iconColor,
+							"bind-icon-color": !unref(isActive) && unref(variant).iconColor
+						}])
+					}, null, 8, ["icon", "class"]), createElementVNode("span", _hoisted_2, toDisplayString(unref(variant).title), 1)]),
+					_: 1
+				}, 8, ["to", "class"])]),
 				_: 1
-			}, 8, ["to", "class"])), [[_directive_tooltip, unref(variant).title]]), createElementVNode("div", _hoisted_3, [createVNode(unref(HstCopyIcon), { content: () => unref(getSourceCode)(__props.story, unref(variant)) }, null, 8, ["content"]), createVNode(ToolbarNewTab_default, {
+			}, 8, ["content"]), createElementVNode("div", _hoisted_3, [createVNode(unref(HstCopyIcon), { content: () => unref(getSourceCode)(__props.story, unref(variant)) }, null, 8, ["content"]), createVNode(ToolbarNewTab_default, {
 				variant: unref(variant),
 				story: __props.story
 			}, null, 8, ["variant", "story"])])]), createElementVNode("div", {