@poveste/app 0.14.0 → 0.16.0

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

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

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

@@ -16,7 +16,7 @@ var StoryVariantSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	__name: "StoryVariantSingle",
 	emits: { openVariantMenu: () => true },
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v0fc28fe3": variant.value?.iconColor }));
+		useCssVars((_ctx) => ({ "v3bcafcf8": variant.value?.iconColor }));
 		const storyStore = useStoryStore();
 		const hasSingleVariant = computed(() => storyStore.currentStory?.variants.length === 1);
 		const variant = computed(() => storyStore.currentVariant ?? null);
@@ -24,6 +24,7 @@ var StoryVariantSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(BaseSplitPane_default, {
 				"save-id": "story-single-main-split",
+				label: "Resize the variant list",
 				min: 5,
 				max: 40,
 				"default-split": 17,

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({
@@ -69,6 +72,7 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			}, null, 8, ["story"])], 512)) : (openBlock(), createBlock(BaseSplitPane_default, {
 				key: 1,
 				"save-id": `story-main-${placement.value}`,
+				label: "Resize the preview",
 				orientation: splitOrientation.value,
 				min: 30,
 				max: 95,

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

@@ -1,7 +1,8 @@
 import TopBarChipItem_default from "../app/TopBarChipItem.js";
 import { openInEditor } from "../../util/open-in-editor.js";
-import { createBlock, createVNode, defineComponent, openBlock, resolveDirective, unref, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { createBlock, createVNode, defineComponent, openBlock, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue?vue&type=script&setup=true&lang.ts
 var DevOnlyToolbarOpenInEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "DevOnlyToolbarOpenInEditor",
@@ -11,19 +12,21 @@ var DevOnlyToolbarOpenInEditor_vue_vue_type_script_setup_true_lang_default = /*@
 	},
 	setup(__props) {
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
-			return withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
-				"aria-label": "Open story in editor",
-				target: "_blank",
-				class: "poveste-toolbar-open-in-editor",
-				onClick: _cache[0] || (_cache[0] = ($event) => unref(openInEditor)(__props.file))
-			}, {
-				default: withCtx(() => [createVNode(unref(Icon), {
-					icon: "carbon:script-reference",
-					class: "w-4 h-4"
+			return openBlock(), createBlock(unref(HstTooltip), { content: __props.tooltip }, {
+				default: withCtx(() => [createVNode(TopBarChipItem_default, {
+					"aria-label": "Open story in editor",
+					target: "_blank",
+					class: "poveste-toolbar-open-in-editor",
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(openInEditor)(__props.file))
+				}, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: "carbon:script-reference",
+						class: "w-4 h-4"
+					})]),
+					_: 1
 				})]),
 				_: 1
-			})), [[_directive_tooltip, __props.tooltip]]);
+			}, 8, ["content"]);
 		};
 	}
 });

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

@@ -1,10 +1,14 @@
 import { povesteConfig } from "../../util/config.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import BaseCheckbox_default from "../base/BaseCheckbox.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, resolveComponent, resolveDirective, toDisplayString, unref, withCtx, withDirectives } from "@poveste/vendors/vue";
+import BaseDropdown_default from "../base/BaseDropdown.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/toolbar/ToolbarBackground.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors group" };
+var _hoisted_1 = {
+	class: "flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors group",
+	"aria-label": "Preview appearance"
+};
 var _hoisted_2 = {
 	class: "flex flex-col items-stretch",
 	"data-testid": "background-popper"
@@ -44,23 +48,16 @@ var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const showColorScheme = !povesteConfig.theme.hideColorSchemeSwitch;
 		const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets?.length;
 		return (_ctx, _cache) => {
-			const _component_VDropdown = resolveComponent("VDropdown");
-			const _directive_tooltip = resolveDirective("tooltip");
-			return unref(showDropdown) ? (openBlock(), createBlock(_component_VDropdown, {
+			return unref(showDropdown) ? (openBlock(), createBlock(BaseDropdown_default, {
 				key: 0,
-				placement: "bottom-end",
-				skidding: 6,
+				side: "bottom",
+				align: "end",
+				"align-offset": 6,
+				tooltip: "Preview appearance",
 				class: "poveste-toolbar-background flex-none",
 				"data-testid": "toolbar-background"
 			}, {
-				default: withCtx(({ shown }) => [withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(Icon), {
-					icon: "carbon:color-palette",
-					class: "w-4 h-4"
-				}), createVNode(unref(Icon), {
-					icon: "carbon:chevron-down",
-					class: "w-3 h-3 opacity-40 group-hover:opacity-70"
-				})])), [[_directive_tooltip, shown ? "" : "Preview appearance"]])]),
-				popper: withCtx(({ hide }) => [createElementVNode("div", _hoisted_2, [
+				popper: withCtx(({ close }) => [createElementVNode("div", _hoisted_2, [
 					showColorScheme ? (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(), createElementBlock(Fragment, null, renderList(colorSchemeOptions, (option) => {
 						return createElementVNode("button", {
 							key: option.value,
@@ -85,7 +82,7 @@ var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 							class: normalizeClass(["px-4 py-3 cursor-pointer text-left flex items-baseline gap-4", [unref(settings).backgroundColor === option.color ? "bg-primary-500 hover:bg-primary-600 text-white dark:text-black" : "bg-transparent hover:bg-primary-100 dark:hover:bg-primary-700"]]),
 							onClick: ($event) => {
 								unref(previewSettings).setBackgroundColor(option.color);
-								hide();
+								close();
 							}
 						}, [createElementVNode("span", _hoisted_6, toDisplayString(option.label), 1), option.color !== "$checkerboard" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_7, toDisplayString(option.color), 1), createElementVNode("div", {
 							class: "w-4 h-4 rounded-full border border-black/20 dark:border-white/20 flex items-center justify-center text-xs",
@@ -96,6 +93,13 @@ var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						}, [option.contrastColor ? (openBlock(), createElementBlock("span", _hoisted_8, "a")) : createCommentVNode("", true)], 4)], 64)) : createCommentVNode("", true)], 10, _hoisted_5);
 					}), 128))
 				])]),
+				default: withCtx(() => [createElementVNode("button", _hoisted_1, [createVNode(unref(Icon), {
+					icon: "carbon:color-palette",
+					class: "w-4 h-4"
+				}), createVNode(unref(Icon), {
+					icon: "carbon:chevron-down",
+					class: "w-3 h-3 opacity-40 group-hover:opacity-70"
+				})])]),
 				_: 1
 			})) : createCommentVNode("", true);
 		};

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

@@ -1,7 +1,8 @@
 import TopBarChipItem_default from "../app/TopBarChipItem.js";
 import { getSandboxUrl } from "../../util/sandbox.js";
-import { computed, createBlock, createVNode, defineComponent, openBlock, resolveDirective, unref, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { computed, createBlock, createVNode, defineComponent, openBlock, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/toolbar/ToolbarNewTab.vue?vue&type=script&setup=true&lang.ts
 var ToolbarNewTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ToolbarNewTab",
@@ -15,19 +16,21 @@ var ToolbarNewTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			return getSandboxUrl(props.story, props.variant);
 		});
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
-			return withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
-				href: sandboxUrl.value,
-				target: "_blank",
-				"aria-label": "Open variant in new tab",
-				class: "poveste-toolbar-new-tab"
-			}, {
-				default: withCtx(() => [createVNode(unref(Icon), {
-					icon: "carbon:launch",
-					class: "w-4 h-4"
-				})]),
+			return openBlock(), createBlock(unref(HstTooltip), { content: "Open variant in new tab" }, {
+				default: withCtx(() => [createVNode(TopBarChipItem_default, {
+					href: sandboxUrl.value,
+					target: "_blank",
+					"aria-label": "Open variant in new tab",
+					class: "poveste-toolbar-new-tab"
+				}, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: "carbon:launch",
+						class: "w-4 h-4"
+					})]),
+					_: 1
+				}, 8, ["href"])]),
 				_: 1
-			}, 8, ["href"])), [[_directive_tooltip, "Open variant in new tab"]]);
+			});
 		};
 	}
 });

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

@@ -1,8 +1,10 @@
 import { povesteConfig } from "../../util/config.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import BaseCheckbox_default from "../base/BaseCheckbox.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, normalizeClass, openBlock, renderList, resolveComponent, resolveDirective, toDisplayString, unref, vModelText, withCtx, withDirectives } from "@poveste/vendors/vue";
+import BaseDropdown_default from "../base/BaseDropdown.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, normalizeClass, openBlock, renderList, toDisplayString, unref, vModelText, withCtx, withDirectives } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/toolbar/ToolbarResponsiveSize.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-col items-stretch" };
 var _hoisted_2 = { class: "flex items-center gap-2 px-4 py-3" };
@@ -29,15 +31,15 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 		const responsiveWidth = autoWhenEmpty("responsiveWidth");
 		const responsiveHeight = autoWhenEmpty("responsiveHeight");
 		return (_ctx, _cache) => {
-			const _component_VDropdown = resolveComponent("VDropdown");
-			const _directive_tooltip = resolveDirective("tooltip");
-			return openBlock(), createBlock(_component_VDropdown, {
-				placement: "bottom-end",
-				skidding: 6,
+			return openBlock(), createBlock(BaseDropdown_default, {
+				side: "bottom",
+				align: "end",
+				"align-offset": 6,
 				disabled: !unref(povesteConfig).responsivePresets?.length,
+				tooltip: "Responsive sizes",
 				class: "poveste-toolbar-responsive-size flex-none"
 			}, {
-				popper: withCtx(({ hide }) => [createElementVNode("div", _hoisted_1, [
+				popper: withCtx(({ close }) => [createElementVNode("div", _hoisted_1, [
 					createVNode(BaseCheckbox_default, {
 						modelValue: unref(settings).rotate,
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(settings).rotate = $event)
@@ -46,21 +48,27 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 						_: 1
 					}, 8, ["modelValue"]),
 					createElementVNode("div", _hoisted_2, [
-						withDirectives(createElementVNode("input", {
-							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(responsiveWidth) ? responsiveWidth.value = $event : null),
-							type: "number",
-							class: "bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0",
-							step: "16",
-							placeholder: "Auto"
-						}, null, 512), [[vModelText, unref(responsiveWidth)], [_directive_tooltip, "Responsive width (px)"]]),
+						createVNode(unref(HstTooltip), { content: "Responsive width (px)" }, {
+							default: withCtx(() => [withDirectives(createElementVNode("input", {
+								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(responsiveWidth) ? responsiveWidth.value = $event : null),
+								type: "number",
+								class: "bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0",
+								step: "16",
+								placeholder: "Auto"
+							}, null, 512), [[vModelText, unref(responsiveWidth)]])]),
+							_: 1
+						}),
 						_cache[4] || (_cache[4] = createElementVNode("span", { class: "opacity-50" }, "×", -1)),
-						withDirectives(createElementVNode("input", {
-							"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(responsiveHeight) ? responsiveHeight.value = $event : null),
-							type: "number",
-							class: "bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0",
-							step: "16",
-							placeholder: "Auto"
-						}, null, 512), [[vModelText, unref(responsiveHeight)], [_directive_tooltip, "Responsive height (px)"]])
+						createVNode(unref(HstTooltip), { content: "Responsive height (px)" }, {
+							default: withCtx(() => [withDirectives(createElementVNode("input", {
+								"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(responsiveHeight) ? responsiveHeight.value = $event : null),
+								type: "number",
+								class: "bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0",
+								step: "16",
+								placeholder: "Auto"
+							}, null, 512), [[vModelText, unref(responsiveHeight)]])]),
+							_: 1
+						})
 					]),
 					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(povesteConfig).responsivePresets, (preset, index) => {
 						return openBlock(), createElementBlock("button", {
@@ -69,7 +77,7 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 							onClick: ($event) => {
 								unref(settings).responsiveWidth = preset.width;
 								unref(settings).responsiveHeight = preset.height ?? null;
-								hide();
+								close();
 							}
 						}, [createTextVNode(toDisplayString(preset.label) + " ", 1), createElementVNode("span", _hoisted_4, [
 							preset.width ? (openBlock(), createElementBlock("span", _hoisted_5, [createTextVNode(toDisplayString(preset.width), 1), !preset.height ? (openBlock(), createElementBlock("span", _hoisted_6, "px")) : createCommentVNode("", true)])) : createCommentVNode("", true),
@@ -78,13 +86,16 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 						])], 10, _hoisted_3);
 					}), 128))
 				])]),
-				default: withCtx(() => [withDirectives((openBlock(), createElementBlock("div", { class: normalizeClass(["flex items-center gap-1 px-2.5 py-1.5 text-gray-900 dark:text-gray-100 transition-colors group", { "hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer": unref(povesteConfig).responsivePresets?.length }]) }, [createVNode(unref(Icon), {
+				default: withCtx(() => [createElementVNode("button", {
+					class: normalizeClass(["flex items-center gap-1 px-2.5 py-1.5 text-gray-900 dark:text-gray-100 transition-colors group", { "hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer": unref(povesteConfig).responsivePresets?.length }]),
+					"aria-label": "Responsive sizes"
+				}, [createVNode(unref(Icon), {
 					icon: "carbon:devices",
 					class: "w-4 h-4"
 				}), createVNode(unref(Icon), {
 					icon: "carbon:chevron-down",
 					class: "w-3 h-3 opacity-40 group-hover:opacity-70"
-				})], 2)), [[_directive_tooltip, "Responsive sizes"]])]),
+				})], 2)]),
 				_: 1
 			}, 8, ["disabled"]);
 		};

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

@@ -1,25 +1,28 @@
 import TopBarChipItem_default from "../app/TopBarChipItem.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
-import { createBlock, createVNode, defineComponent, openBlock, resolveDirective, unref, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { createBlock, createVNode, defineComponent, openBlock, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/toolbar/ToolbarTextDirection.vue?vue&type=script&setup=true&lang.ts
 var ToolbarTextDirection_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ToolbarTextDirection",
 	setup(__props) {
 		const settings = usePreviewSettingsStore().currentSettings;
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
-			return withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
-				"aria-label": "Toggle text direction",
-				class: "poveste-toolbar-text-direction",
-				onClick: _cache[0] || (_cache[0] = ($event) => unref(settings).textDirection = unref(settings).textDirection === "ltr" ? "rtl" : "ltr")
-			}, {
-				default: withCtx(() => [createVNode(unref(Icon), {
-					icon: unref(settings).textDirection === "ltr" ? "fluent:text-paragraph-direction-right-16-regular" : "fluent:text-paragraph-direction-left-16-regular",
-					class: "w-4 h-4"
-				}, null, 8, ["icon"])]),
+			return openBlock(), createBlock(unref(HstTooltip), { content: `Switch to text direction ${unref(settings).textDirection === "ltr" ? "Right to Left" : "Left to Right"}` }, {
+				default: withCtx(() => [createVNode(TopBarChipItem_default, {
+					"aria-label": "Toggle text direction",
+					class: "poveste-toolbar-text-direction",
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(settings).textDirection = unref(settings).textDirection === "ltr" ? "rtl" : "ltr")
+				}, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: unref(settings).textDirection === "ltr" ? "fluent:text-paragraph-direction-right-16-regular" : "fluent:text-paragraph-direction-left-16-regular",
+						class: "w-4 h-4"
+					}, null, 8, ["icon"])]),
+					_: 1
+				})]),
 				_: 1
-			})), [[_directive_tooltip, `Switch to text direction ${unref(settings).textDirection === "ltr" ? "Right to Left" : "Left to Right"}`]]);
+			}, 8, ["content"]);
 		};
 	}
 });

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

@@ -4,7 +4,6 @@ import "./plugin.js";
 import { iconCollections } from "./util/icons.generated.js";
 import { createApp } from "@poveste/vendors/vue";
 import { addCollection } from "@poveste/vendors/iconify";
-import FloatingVue from "@poveste/vendors/floating-vue";
 import { createPinia } from "@poveste/vendors/pinia";
 import "virtual:$poveste-theme";
 //#region src/app/index.ts
@@ -12,18 +11,6 @@ async function mountMainApp() {
 	for (const collection of iconCollections) addCollection(collection);
 	const app = createApp(App_default);
 	app.use(createPinia());
-	app.use(FloatingVue, {
-		container: ".poveste-app-root",
-		overflowPadding: 4,
-		arrowPadding: 8,
-		themes: {
-			tooltip: { distance: 8 },
-			dropdown: {
-				computeTransformOrigin: true,
-				distance: 8
-			}
-		}
-	});
 	app.use(router);
 	app.mount("#app");
 	if (import.meta.hot) import.meta.hot.send("poveste:mount", {});

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);
@@ -102,7 +103,8 @@ var app = createApp({
 		return [h("div", { class: "__poveste-sandbox-hidden" }, [h(GenericMountStory_default, {
 			key: file.value.story.id,
 			story: file.value.story,
-			targetVariantId: variantId.value
+			targetVariantId: variantId.value,
+			syncState: false
 		})]), this.story && this.variant ? h(GenericRenderStory_default, {
 			key: `${this.story.id}/${this.variant.id}`,
 			story: this.story,

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) {