@poveste/app 0.14.0 → 0.15.0

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

@@ -1,18 +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 = {
-	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 +46,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 +68,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 +79,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,10 +92,15 @@ 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, [
@@ -104,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[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,
-						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,
-						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), {
+					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",
-					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"]]),
+					"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())
-				}, null, 8, ["icon", "class"]), [[_directive_tooltip, savedNotif.value ? "Saved!" : canEdit.value ? "Save to preset" : null]]),
-				withDirectives(createVNode(unref(Icon), {
+				}, [createVNode(unref(Icon), {
+					icon: savedNotif.value ? "carbon:checkmark" : "carbon:save",
+					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",
-					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",
+					"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())
-				}, 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",
+				}, [createVNode(unref(Icon), {
+					icon: "carbon:add-alt",
+					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())
-				}, null, 512), [[_directive_tooltip, "Reset to initial state"]])
+				}, [createVNode(unref(Icon), {
+					icon: "carbon:reset",
+					class: "w-4 h-4"
+				})])), [[_directive_tooltip, "Reset to initial state"]])
 			]);
 		};
 	}

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;

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

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

@@ -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,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();
@@ -98,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",
@@ -126,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

@@ -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-13932615"]]);
 //#endregion
 export { StoryResponsivePreview_default as default };

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

@@ -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) => ({ "v538c65b8": 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() {
@@ -141,7 +145,7 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 				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 }, [
+			}, 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-13932615></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-13932615></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,

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

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

@@ -18,7 +18,7 @@ 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
+			"v2b77a04a": unref(variant).iconColor,
+			"v8dc7fba0": unref(settings).backgroundColor
 		}));
 		const props = __props;
 		const emit = __emit;

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

@@ -8,6 +8,7 @@ import { createStateBridge } from "../../util/state-bridge.js";
 import { toRawDeep } from "../../util/state.js";
 import { useEventsStore } from "../../stores/events.js";
 import { firstReportedHeight } from "../../util/grid-cell-height.js";
+import { createRenderTracker } from "../../util/render-tracker.js";
 import StoryResponsivePreview_default from "./StoryResponsivePreview.js";
 import { useEventListener } from "@poveste/vendors/vue-use";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, toDisplayString, toRaw, unref, watch, withCtx } from "@poveste/vendors/vue";
@@ -49,9 +50,7 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 		const settings = usePreviewSettingsStore().currentSettings;
 		const errorStore = useStoryErrorStore();
 		const storyError = computed(() => errorStore.forVariant(props.story.id, props.variant.id));
-		watch(() => [props.story.id, props.variant.id], () => {
-			errorStore.clear(props.story.id, props.variant.id);
-		});
+		const render = createRenderTracker();
 		const iframe = ref();
 		function postState(changes) {
 			iframe.value?.contentWindow?.postMessage({
@@ -88,10 +87,12 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 					break;
 				case SANDBOX_READY:
 					if (!fromCurrentOccupant(event.data)) break;
+					if (render.wasClean()) errorStore.clear(props.story.id, props.variant.id);
 					setPreviewReady();
 					break;
 				case SANDBOX_ERROR:
 					if (!fromCurrentOccupant(event.data)) break;
+					render.threw();
 					errorStore.report({
 						message: event.data.message,
 						stack: event.data.stack,
@@ -139,6 +140,7 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 		let stopTrackKeyboard;
 		let unmounted = false;
 		function reload(url) {
+			render.begin();
 			retargets = 0;
 			retargeting.value = false;
 			clearTimeout(retargetTimer);
@@ -151,6 +153,7 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 			iframeSrc.value = url;
 		}
 		watch(sandboxUrl, (url) => {
+			render.begin();
 			bridge = createStateBridge(postState);
 			if (servedVariant && servedVariant !== props.variant) storyStore.setPreviewReady(servedVariant, false);
 			servedVariant = props.variant;
@@ -195,10 +198,10 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 		function previewStyle(isResponsiveEnabled, finalWidth, finalHeight) {
 			const style = {};
 			if (isResponsiveEnabled) {
-				if (finalWidth) style.width = `${finalWidth}px`;
-				if (finalHeight) style.height = `${finalHeight}px`;
+				if (finalWidth) style["width"] = `${finalWidth}px`;
+				if (finalHeight) style["height"] = `${finalHeight}px`;
 			}
-			if (props.autoHeight) style.height = `${Math.min(reportedHeight.value ?? placeholderHeight.value, MAX_AUTO_HEIGHT)}px`;
+			if (props.autoHeight) style["height"] = `${Math.min(reportedHeight.value ?? placeholderHeight.value, MAX_AUTO_HEIGHT)}px`;
 			return style;
 		}
 		function onIframeLoad() {

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

@@ -31,7 +31,10 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			if (value && story) story.lastSelectedVariant = value;
 		}, { immediate: true });
 		watch(() => [storyStore.currentStory, storyStore.currentVariant], () => {
-			if (!storyStore.currentVariant && autoSelectsVariant(storyStore.currentStory)) setVariant((storyStore.currentStory.lastSelectedVariant ?? storyStore.currentStory.variants[0]).id);
+			if (!storyStore.currentVariant && autoSelectsVariant(storyStore.currentStory)) {
+				const variant = storyStore.currentStory.lastSelectedVariant ?? storyStore.currentStory.variants[0];
+				if (variant) setVariant(variant.id);
+			}
 		}, { immediate: true });
 		function setVariant(variantId) {
 			router.replace({

package/dist/bundled/components/toolbar/ToolbarTitle.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import ToolbarTitle_vue_vue_type_script_setup_true_lang_default from "./ToolbarTitle.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                             */
 //#region src/app/components/toolbar/ToolbarTitle.vue
-var ToolbarTitle_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ToolbarTitle_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-14aa93ef"]]);
+var ToolbarTitle_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ToolbarTitle_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-30c06406"]]);
 //#endregion
 export { ToolbarTitle_default as default };

package/dist/bundled/components/toolbar/ToolbarTitle.vue_vue_type_script_setup_true_lang.js

@@ -15,7 +15,7 @@ var ToolbarTitle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		story: {}
 	},
 	setup(__props) {
-		useCssVars((_ctx) => ({ "b5fb8c94": iconColor.value }));
+		useCssVars((_ctx) => ({ "v5947d534": iconColor.value }));
 		const props = __props;
 		const icon = computed(() => props.variant?.icon ?? props.story?.icon ?? "carbon:cube");
 		const iconColor = computed(() => props.variant?.iconColor ?? props.story?.iconColor);

package/dist/bundled/components/tree/StoryGroup.vue_vue_type_script_setup_true_lang.js

@@ -46,11 +46,11 @@ var StoryGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					"path",
 					"folder",
 					"stories"
-				])) : (openBlock(), createBlock(StoryListItem_default, {
+				])) : __props.stories[element.index] ? (openBlock(), createBlock(StoryListItem_default, {
 					key: 1,
 					story: __props.stories[element.index],
 					depth: 0
-				}, null, 8, ["story"]))], 64);
+				}, null, 8, ["story"])) : createCommentVNode("", true)], 64);
 			}), 128))])) : createCommentVNode("", true)]);
 		};
 	}

package/dist/bundled/components/tree/StoryList.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import StoryListItem_default from "./StoryListItem.js";
 import StoryListFolder_default from "./StoryListFolder.js";
 import StoryGroup_default from "./StoryGroup.js";
-import { Fragment, createBlock, createElementBlock, defineComponent, openBlock, renderList } from "@poveste/vendors/vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, openBlock, renderList } from "@poveste/vendors/vue";
 //#region src/app/components/tree/StoryList.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-story-list overflow-y-auto" };
 var StoryList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -21,10 +21,10 @@ var StoryList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					key: 1,
 					folder: element,
 					stories: __props.stories
-				}, null, 8, ["folder", "stories"])) : (openBlock(), createBlock(StoryListItem_default, {
+				}, null, 8, ["folder", "stories"])) : __props.stories[element.index] ? (openBlock(), createBlock(StoryListItem_default, {
 					key: 2,
 					story: __props.stories[element.index]
-				}, null, 8, ["story"]))], 64);
+				}, null, 8, ["story"])) : createCommentVNode("", true)], 64);
 			}), 128))]);
 		};
 	}

package/dist/bundled/components/tree/StoryListFolder.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryListFolder_vue_vue_type_script_setup_true_lang_default from "./StoryListFolder.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                */
 //#region src/app/components/tree/StoryListFolder.vue
-var StoryListFolder_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryListFolder_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-11f8c91e"]]);
+var StoryListFolder_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryListFolder_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9702f44e"]]);
 //#endregion
 export { StoryListFolder_default as default };

package/dist/bundled/components/tree/StoryListFolder.vue_vue_type_script_setup_true_lang.js

@@ -20,7 +20,7 @@ var StoryListFolder_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		depth: { default: 0 }
 	},
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v047dbc51": folderPadding.value }));
+		useCssVars((_ctx) => ({ "v716b068e": folderPadding.value }));
 		const props = __props;
 		const folderStore = useFolderStore();
 		const folderPath = computed(() => [...props.path, props.folder.title]);
@@ -54,11 +54,11 @@ var StoryListFolder_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"folder",
 					"stories",
 					"depth"
-				])) : (openBlock(), createBlock(StoryListItem_default, {
+				])) : __props.stories[element.index] ? (openBlock(), createBlock(StoryListItem_default, {
 					key: 1,
 					story: __props.stories[element.index],
 					depth: __props.depth + 1
-				}, null, 8, ["story", "depth"]))], 64);
+				}, null, 8, ["story", "depth"])) : createCommentVNode("", true)], 64);
 			}), 128))])) : createCommentVNode("", true)]);
 		};
 	}

package/dist/bundled/components/tree/StoryListItem.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryListItem_vue_vue_type_script_setup_true_lang_default from "./StoryListItem.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                              */
 //#region src/app/components/tree/StoryListItem.vue
-var StoryListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryListItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-184d6cf3"]]);
+var StoryListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryListItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-83161585"]]);
 //#endregion
 export { StoryListItem_default as default };

package/dist/bundled/components/tree/StoryListItem.vue_vue_type_script_setup_true_lang.js

@@ -16,8 +16,8 @@ var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	},
 	setup(__props) {
 		useCssVars((_ctx) => ({
-			"v516f2a64": filePadding.value,
-			"v2fa7200a": _ctx.story.iconColor
+			"v0299061e": filePadding.value,
+			"v80ccd94c": _ctx.story.iconColor
 		}));
 		const props = __props;
 		const errorStore = useStoryErrorStore();
@@ -26,7 +26,7 @@ var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			return `${props.depth * 12}px`;
 		});
 		const route = useRoute();
-		const isActive = computed(() => route.params.storyId === props.story.id);
+		const isActive = computed(() => route.params["storyId"] === props.story.id);
 		const el = ref();
 		useScrollOnActive(isActive, el);
 		return (_ctx, _cache) => {

package/dist/bundled/sandbox.js

@@ -17,8 +17,8 @@ import { parseQuery } from "@poveste/vendors/vue-router";
 import { reportStoryError } from "@poveste/shared";
 //#region src/app/sandbox.ts
 var query = parseQuery(window.location.search);
-var storyId = ref(typeof query.storyId === "string" ? query.storyId : null);
-var variantId = ref(typeof query.variantId === "string" ? query.variantId : null);
+var storyId = ref(typeof query["storyId"] === "string" ? query["storyId"] : null);
+var variantId = ref(typeof query["variantId"] === "string" ? query["variantId"] : null);
 watchEffect(() => {
 	occupant.storyId = storyId.value;
 	occupant.variantId = variantId.value;
@@ -73,6 +73,7 @@ var app = createApp({
 		let bridge = createStateBridge(postState);
 		let mounted = false;
 		window.addEventListener("message", (event) => {
+			if (event.origin !== window.location.origin) return;
 			if (event.data?.type === "__poveste:state-sync") {
 				if (!mounted || !variant.value) return;
 				bridge.receive(variant.value.state, event.data.state);

package/dist/bundled/stores/story.js

@@ -7,8 +7,8 @@ var useStoryStore = defineStore("story", () => {
 	function setStories(value) {
 		stories.value = value;
 	}
-	const currentStory = computed(() => stories.value.find((s) => s.id === router.currentRoute.value.params.storyId));
-	const currentVariant = computed(() => currentStory.value?.variants.find((v) => v.id === router.currentRoute.value.query.variantId));
+	const currentStory = computed(() => stories.value.find((s) => s.id === router.currentRoute.value.params["storyId"]));
+	const currentVariant = computed(() => currentStory.value?.variants.find((v) => v.id === router.currentRoute.value.query["variantId"]));
 	const maps = computed(() => {
 		const storyMap = /* @__PURE__ */ new Map();
 		const variantMap = /* @__PURE__ */ new Map();

package/dist/bundled/util/commands.js

@@ -33,7 +33,7 @@ var builtinCommands = [{
 	label: "Open Poveste Documentation",
 	icon: "carbon:help",
 	clientAction: () => {
-		window.open("https://poveste.dev/guide/getting-started.html", "_blank");
+		window.open("https://poveste.dev/guide/getting-started", "_blank");
 	}
 }];
 function executeCommand(command, params) {

package/dist/bundled/util/dark.js

@@ -4,7 +4,7 @@ import { watch } from "@poveste/vendors/vue";
 //#region src/app/util/dark.ts
 var isDark = useDark({
 	valueDark: "ptw-dark",
-	initialValue: povesteConfig.theme.defaultColorScheme,
+	...povesteConfig.theme.defaultColorScheme ? { initialValue: povesteConfig.theme.defaultColorScheme } : {},
 	storageKey: "poveste-color-scheme",
 	storage: povesteConfig.theme.storeColorScheme ? localStorage : sessionStorage
 });

package/dist/bundled/util/events.js

@@ -19,7 +19,7 @@ async function logEvent(name, argument) {
 }
 function stringifyEvent(e) {
 	const obj = {};
-	for (const k in e) obj[k] = e[k];
+	for (const k in e) obj[k] = Reflect.get(e, k);
 	return JSON.stringify(obj, (k, v) => {
 		if (v instanceof Node) return "Node";
 		if (v instanceof Window) return "Window";