@poveste/app 0.13.1 → 0.15.0

package/dist/bundled/components/command/PromptText.vue_vue_type_script_setup_true_lang.js

@@ -20,7 +20,7 @@ var PromptText_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const props = __props;
 		const emit = __emit;
 		const model = computed({
-			get: () => props.modelValue,
+			get: () => props.modelValue ?? "",
 			set: (value) => emit("update:modelValue", value)
 		});
 		const input = ref();

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

@@ -1,7 +1,12 @@
-import { computed, createBlock, createCommentVNode, createVNode, defineComponent, normalizeClass, openBlock, resolveDirective, resolveDynamicComponent, unref, withCtx, withDirectives, withModifiers } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, resolveDirective, resolveDynamicComponent, unref, withDirectives } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 import { HstCheckbox, HstJson, HstNumber, HstText } from "@poveste/controls";
 //#region src/app/components/panel/ControlsComponentPropItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "flex items-end hover:bg-primary-100 dark:hover:bg-primary-800"
+};
+var _hoisted_2 = ["aria-label", "disabled"];
 var ControlsComponentPropItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ControlsComponentPropItem",
 	props: {
@@ -34,25 +39,26 @@ var ControlsComponentPropItem_vue_vue_type_script_setup_true_lang_default = /*@_
 		const canReset = computed(() => props.variant.state?._hPropState?.[props.component.index] && props.definition.name in props.variant.state._hPropState[props.component.index]);
 		return (_ctx, _cache) => {
 			const _directive_tooltip = resolveDirective("tooltip");
-			return comp.value ? (openBlock(), createBlock(resolveDynamicComponent(comp.value), {
-				key: 0,
+			return comp.value ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(), createBlock(resolveDynamicComponent(comp.value), {
 				modelValue: model.value,
-				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
 				placeholder: model.value === void 0 ? __props.definition?.default : null,
-				class: "poveste-controls-component-prop-item",
+				class: "poveste-controls-component-prop-item grow min-w-0",
 				title: `${__props.definition.name}${canReset.value ? " *" : ""}`
-			}, {
-				actions: withCtx(() => [withDirectives(createVNode(unref(Icon), {
-					icon: "carbon:erase",
-					class: normalizeClass(["cursor-pointer w-4 h-4 hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100", [canReset.value ? "opacity-50 hover:opacity-100" : "opacity-25 pointer-events-none"]]),
-					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => reset(), ["stop"]))
-				}, null, 8, ["class"]), [[_directive_tooltip, "Remove override"]])]),
-				_: 1
-			}, 8, [
+			}, null, 8, [
 				"modelValue",
 				"placeholder",
 				"title"
-			])) : createCommentVNode("", true);
+			])), withDirectives((openBlock(), createElementBlock("button", {
+				type: "button",
+				"aria-label": `Remove override of ${__props.definition.name}`,
+				disabled: !canReset.value,
+				class: normalizeClass(["flex-none flex mr-2 mb-[10px] p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canReset.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
+				onClick: _cache[1] || (_cache[1] = ($event) => reset())
+			}, [createVNode(unref(Icon), {
+				icon: "carbon:erase",
+				class: "w-4 h-4"
+			})], 10, _hoisted_2)), [[_directive_tooltip, "Remove override"]])])) : createCommentVNode("", true);
 		};
 	}
 });

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

@@ -29,7 +29,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								tab: ""
 							}
 						},
-						matched: !_ctx.$route.query.tab
+						matched: !_ctx.$route.query["tab"]
 					}, {
 						default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Controls ", -1)])]),
 						_: 1
@@ -42,7 +42,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								tab: "docs"
 							}
 						},
-						matched: _ctx.$route.query.tab === "docs",
+						matched: _ctx.$route.query["tab"] === "docs",
 						class: normalizeClass({ "opacity-70": !unref(renderedDoc) })
 					}, {
 						default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" Docs ", -1)])]),
@@ -60,7 +60,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								tab: "events"
 							}
 						},
-						matched: _ctx.$route.query.tab === "events",
+						matched: _ctx.$route.query["tab"] === "events",
 						class: normalizeClass({ "opacity-70": !hasEvents.value })
 					}, {
 						default: withCtx(() => [_cache[5] || (_cache[5] = createTextVNode(" Events ", -1)), unref(eventsStore).unseen ? (openBlock(), createBlock(BaseTag_default, { key: 0 }, {
@@ -83,7 +83,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								tab: ""
 							}
 						},
-						matched: !_ctx.$route.query.tab
+						matched: !_ctx.$route.query["tab"]
 					}, {
 						default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode(" Controls ", -1)])]),
 						_: 1
@@ -96,7 +96,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								tab: "docs"
 							}
 						},
-						matched: _ctx.$route.query.tab === "docs",
+						matched: _ctx.$route.query["tab"] === "docs",
 						class: normalizeClass({ "opacity-70": !unref(renderedDoc) })
 					}, {
 						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode(" Docs ", -1)])]),
@@ -114,7 +114,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								tab: "events"
 							}
 						},
-						matched: _ctx.$route.query.tab === "events",
+						matched: _ctx.$route.query["tab"] === "events",
 						class: normalizeClass({ "opacity-70": !hasEvents.value })
 					}, {
 						default: withCtx(() => [_cache[2] || (_cache[2] = createTextVNode(" Events ", -1)), unref(eventsStore).unseen ? (openBlock(), createBlock(BaseTag_default, { key: 0 }, {

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

@@ -1,19 +1,14 @@
 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, resolveDirective, unref, vModelText, withDirectives, withKeys } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 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"];
-var _hoisted_3 = {
-	key: 1,
-	class: "flex items-center gap-2"
-};
-var _hoisted_4 = { class: "flex-1 truncate" };
-var _hoisted_5 = { class: "flex gap-2 items-center" };
-var _hoisted_6 = { 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",
@@ -41,13 +36,17 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		}
 		function applyPreset(id) {
 			if (id === DEFAULT_ID) resetState();
-			else if (presetStates.value.has(id)) applyState(props.variant.state, clone(toRawDeep(presetStates.value.get(id).state)));
+			else {
+				const preset = presetStates.value.get(id);
+				if (preset) applyState(props.variant.state, clone(toRawDeep(preset.state)));
+			}
 		}
 		onMounted(() => {
 			if (selectedOption.value !== DEFAULT_ID) applyPreset(selectedOption.value);
 		});
 		const input = ref();
 		const select = ref();
+		const picker = ref();
 		const canEdit = computed(() => selectedOption.value !== DEFAULT_ID);
 		const isEditing = ref(false);
 		async function createPreset() {
@@ -59,18 +58,28 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			selectedOption.value = id;
 			isEditing.value = true;
 			await nextTick();
-			input.value.select();
+			input.value?.select();
 		}
+		const editingLabel = computed({
+			get: () => presetStates.value.get(selectedOption.value)?.label ?? "",
+			set: (value) => {
+				const preset = presetStates.value.get(selectedOption.value);
+				if (preset) preset.label = value;
+			}
+		});
 		const savedNotif = ref(false);
+		const { polite } = useLiveAnnouncer();
 		const savedTimeout = useTimeoutFn(() => {
 			savedNotif.value = false;
 		}, 1e3);
 		async function savePreset() {
 			if (!canEdit.value) return;
 			const preset = presetStates.value.get(selectedOption.value);
+			if (!preset) return;
 			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;
@@ -81,12 +90,17 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			if (!canEdit.value) return;
 			isEditing.value = true;
 			await nextTick();
-			input.value.select();
+			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, [
@@ -94,53 +108,78 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					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[2] || (_cache[2] = ($event) => isRef(selectedOption) ? selectedOption.value = $event : null),
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(selectedOption) ? selectedOption.value = $event : null),
+					label: "Preset",
 					options: presetsOptions.value,
-					onDblclick: _cache[3] || (_cache[3] = ($event) => startEditing()),
-					onKeydown: [_cache[4] || (_cache[4] = withKeys(($event) => stopEditing(), ["enter"])), _cache[5] || (_cache[5] = withKeys(($event) => stopEditing(), ["escape"]))],
-					onSelect: _cache[6] || (_cache[6] = (id) => applyPreset(id))
-				}, {
-					default: withCtx(({ label }) => [isEditing.value ? withDirectives((openBlock(), createElementBlock("input", {
-						key: 0,
-						ref_key: "input",
-						ref: input,
-						"onUpdate:modelValue": ($event) => unref(presetStates).get(unref(selectedOption)).label = $event,
-						type: "text",
-						class: "text-inherit bg-transparent w-full h-full outline-none",
-						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop", "prevent"]))
-					}, null, 8, _hoisted_2)), [[vModelText, unref(presetStates).get(unref(selectedOption)).label]]) : (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("span", _hoisted_4, toDisplayString(label), 1), canEdit.value ? withDirectives((openBlock(), createBlock(unref(Icon), {
-						key: 0,
-						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[1] || (_cache[1] = withModifiers(($event) => startEditing(), ["stop"]))
-					}, null, 512)), [[_directive_tooltip, "Rename this preset"]]) : createCommentVNode("", true)]))]),
-					option: withCtx(({ label, value }) => [createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(label), 1), value !== DEFAULT_ID ? withDirectives((openBlock(), createBlock(unref(Icon), {
-						key: 0,
-						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)])]),
-					_: 1
-				}, 8, ["modelValue", "options"])], 512),
-				withDirectives(createVNode(unref(Icon), {
+					onDblclick: _cache[4] || (_cache[4] = ($event) => startEditing()),
+					onSelect: _cache[5] || (_cache[5] = (id) => applyPreset(id))
+				}, null, 8, ["modelValue", "options"]))], 512),
+				withDirectives((openBlock(), createElementBlock("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: "w-4 h-4"
+				})], 10, _hoisted_2)), [[_directive_tooltip, canEdit.value ? "Rename this preset" : null]]),
+				withDirectives((openBlock(), createElementBlock("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: "w-4 h-4"
+				})], 10, _hoisted_3)), [[_directive_tooltip, canEdit.value ? "Delete this preset" : null]]),
+				withDirectives((openBlock(), createElementBlock("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: 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[7] || (_cache[7] = ($event) => savePreset())
-				}, null, 8, ["icon", "class"]), [[_directive_tooltip, savedNotif.value ? "Saved!" : canEdit.value ? "Save to preset" : null]]),
-				withDirectives(createVNode(unref(Icon), {
+					class: "w-4 h-4"
+				}, null, 8, ["icon"])], 10, _hoisted_4)), [[_directive_tooltip, savedNotif.value ? "Saved!" : canEdit.value ? "Save to preset" : null]]),
+				withDirectives((openBlock(), createElementBlock("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: "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[8] || (_cache[8] = ($event) => createPreset())
-				}, null, 512), [[_directive_tooltip, "Create new preset"]]),
-				withDirectives(createVNode(unref(Icon), {
+					class: "w-4 h-4"
+				})])), [[_directive_tooltip, "Create new preset"]]),
+				withDirectives((openBlock(), createElementBlock("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: "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) => resetState())
-				}, null, 512), [[_directive_tooltip, "Reset to initial state"]])
+					class: "w-4 h-4"
+				})])), [[_directive_tooltip, "Reset to initial state"]])
 			]);
 		};
 	}

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

@@ -31,7 +31,7 @@ var StoryControls_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		watch(() => props.variant, () => {
 			ready.value = false;
 		});
-		const hasCustomControls = computed(() => props.variant.slots().controls || props.story.slots().controls);
+		const hasCustomControls = computed(() => props.variant.slots?.().controls || props.story.slots?.().controls);
 		const hasInitState = computed(() => Object.entries(props.variant.state || {}).some(([key]) => !key.startsWith("_h")));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [

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

@@ -10,7 +10,9 @@ var _hoisted_1 = ["innerHTML"];
 function useStoryDoc(story) {
 	const renderedDoc = ref("");
 	watchEffect(async () => {
-		const mdKey = story.value.file.filePath.replace(/\.(\w*)$/, ".md");
+		const filePath = story.value?.file?.filePath;
+		if (!filePath) return;
+		const mdKey = filePath.replace(/\.(\w*)$/, ".md");
 		if (markdownFiles[mdKey]) {
 			const md = await markdownFiles[mdKey]();
 			renderedDoc.value = md.html;

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

@@ -14,7 +14,11 @@ var StoryEvent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const formattedArgument = computed(() => {
 			switch (typeof props.event.argument) {
 				case "string": return `"${props.event.argument}"`;
-				case "object": return `{ ${Object.keys(props.event.argument).map((key) => `${key}: ${props.event.argument[key]}`).join(", ")} }`;
+				case "object": {
+					const argument = props.event.argument;
+					if (!argument) return "null";
+					return `{ ${Object.keys(argument).map((key) => `${key}: ${argument[key]}`).join(", ")} }`;
+				}
 				default: return props.event.argument;
 			}
 		});

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

@@ -16,7 +16,8 @@ var StoryEvents_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		async function resetUnseen() {
 			if (eventsStore.unseen > 0) eventsStore.unseen = 0;
 			await nextTick();
-			eventsElement.value.scrollTo({ top: eventsElement.value.scrollHeight });
+			const events = eventsElement.value;
+			events?.scrollTo({ top: events.scrollHeight });
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {

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

@@ -7,7 +7,7 @@ import PaneTabs_default from "./PaneTabs.js";
 import StoryControls_default from "./StoryControls.js";
 import StoryEvents_default from "./StoryEvents.js";
 import StorySourceCode_default from "./StorySourceCode.js";
-import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, resolveDynamicComponent, unref, withCtx } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, resolveDynamicComponent, unref, withCtx } from "@poveste/vendors/vue";
 import { useRoute } from "@poveste/vendors/vue-router";
 //#region src/app/components/panel/StorySidePanel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "h-full w-full p-2" };
@@ -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;
@@ -47,19 +47,21 @@ var StorySidePanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				class: "poveste-story-side-panel poveste-loaded h-full",
 				"data-testid": "story-side-panel"
 			}, {
-				first: withCtx(() => [createElementVNode("div", _hoisted_3, [createVNode(PaneTabs_default, {
+				first: withCtx(() => [createElementVNode("div", _hoisted_3, [unref(storyStore).currentStory ? (openBlock(), createBlock(PaneTabs_default, {
+					key: 0,
 					story: unref(storyStore).currentStory,
 					variant: unref(storyStore).currentVariant
-				}, null, 8, ["story", "variant"]), (openBlock(), createBlock(resolveDynamicComponent(panelContentComponent.value), {
+				}, null, 8, ["story", "variant"])) : createCommentVNode("", true), (openBlock(), createBlock(resolveDynamicComponent(panelContentComponent.value), {
 					story: unref(storyStore).currentStory,
 					variant: unref(storyStore).currentVariant,
 					class: "h-full overflow-auto"
 				}, null, 8, ["story", "variant"]))])]),
-				last: withCtx(() => [createVNode(StorySourceCode_default, {
+				last: withCtx(() => [unref(storyStore).currentStory ? (openBlock(), createBlock(StorySourceCode_default, {
+					key: 0,
 					story: unref(storyStore).currentStory,
 					variant: unref(storyStore).currentVariant,
 					class: "h-full"
-				}, null, 8, ["story", "variant"])]),
+				}, null, 8, ["story", "variant"])) : createCommentVNode("", true)]),
 				_: 1
 			}, 8, ["save-id", "orientation"]))])]);
 		};

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

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

@@ -27,9 +27,10 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	},
 	setup(__props) {
 		const props = __props;
-		const generateSourceCodeFn = ref(null);
+		const generateSourceCodeFn = shallowRef(null);
 		watchEffect(async () => {
-			const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId];
+			const supportPluginId = props.story.file?.supportPluginId;
+			const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
 			if (clientPlugin) {
 				const pluginModule = await clientPlugin();
 				generateSourceCodeFn.value = markRaw(pluginModule.generateSourceCode);
@@ -51,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";
 		}, {
@@ -85,7 +86,7 @@ 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();
@@ -97,13 +98,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-800 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" : 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)), [[_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"]]),
+					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",
@@ -125,6 +126,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

@@ -50,7 +50,7 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		watch(() => props.shown, (value) => {
 			if (value) requestAnimationFrame(() => {
 				focused.value = true;
-				input.value.select();
+				input.value?.select();
 			});
 		});
 		const searchInputText = ref("");
@@ -95,14 +95,17 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				const idMapData = titleIdMap[document.item.id];
 				if (!idMapData) continue;
 				switch (idMapData.kind) {
-					case "story":
-						list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank));
+					case "story": {
+						const story = storyStore.getStoryById(idMapData.id);
+						if (!story) continue;
+						list.push(storyResultFactory(story, rank));
 						rank++;
 						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));
 						rank++;
 						break;
@@ -121,9 +124,13 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					const idMapData = docIdMap[document.item.id];
 					if (!idMapData) continue;
 					switch (idMapData.kind) {
-						case "story":
-							list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank, "docs"));
+						case "story": {
+							const story = storyStore.getStoryById(idMapData.id);
+							if (!story) continue;
+							list.push(storyResultFactory(story, rank, "docs"));
 							rank++;
+							break;
+						}
 					}
 				}
 				docsResults.value = list;
@@ -141,7 +148,7 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					params: { storyId: story.id },
 					query: { ...type === "docs" ? { tab: "docs" } : {} }
 				},
-				path: story.file.path.slice(0, -1),
+				path: story.file?.path.slice(0, -1) ?? [],
 				icon: story.icon,
 				iconColor: story.iconColor
 			};
@@ -160,7 +167,7 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 						...type === "docs" ? { tab: "docs" } : {}
 					}
 				},
-				path: [...story.file.path ?? [], story.title],
+				path: [...story.file?.path ?? [], story.title],
 				icon: variant.icon,
 				iconColor: variant.iconColor
 			};

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

@@ -8,7 +8,8 @@ var GenericMountStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const props = __props;
 		const mountComponent = ref(null);
 		watchEffect(async () => {
-			const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId];
+			const supportPluginId = props.story.file?.supportPluginId;
+			const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
 			if (clientPlugin) {
 				const pluginModule = await clientPlugin();
 				mountComponent.value = markRaw(pluginModule.MountStory);

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

@@ -8,7 +8,8 @@ var GenericRenderStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		const props = __props;
 		const mountComponent = ref(null);
 		watchEffect(async () => {
-			const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId];
+			const supportPluginId = props.story.file?.supportPluginId;
+			const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
 			if (clientPlugin) try {
 				const pluginModule = await clientPlugin();
 				mountComponent.value = markRaw(pluginModule.RenderStory);

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