@poveste/app 0.13.1 → 0.15.0

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) => ({ "v0cb511a0": unref(settings).backgroundColor }));
+		useCssVars((_ctx) => ({ "v538c65b8": unref(settings).backgroundColor }));
 		const props = __props;
 		const settings = usePreviewSettingsStore().currentSettings;
 		const resizing = ref(false);
@@ -42,18 +42,29 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		}
 		const previewWrapper = ref();
 		function useDragger(el, value, min, max, axis) {
+			function wrapperSize() {
+				const wrapper = previewWrapper.value;
+				if (!wrapper) return null;
+				return axis === "x" ? wrapper.clientWidth : wrapper.clientHeight;
+			}
+			function startFrom() {
+				if (value.value !== null) return value.value;
+				const size = wrapperSize();
+				if (size === null) return min;
+				return size - (axis === "x" ? 67 : 70);
+			}
 			function onMouseDown(event) {
 				event.preventDefault();
 				event.stopPropagation();
 				const start = axis === "x" ? event.clientX : event.clientY;
-				const startValue = value.value ?? (axis === "x" ? previewWrapper.value.clientWidth - 67 : previewWrapper.value.clientHeight - 70);
+				const startValue = startFrom();
 				resizing.value = true;
 				const removeListeners = [addWindowListener("mousemove", onMouseMove), addWindowListener("mouseup", onMouseUp)];
 				function onMouseMove(event) {
-					const snapTarget = axis === "x" ? previewWrapper.value.clientWidth : previewWrapper.value.clientHeight;
+					const snapTarget = wrapperSize();
 					const delta = (axis === "x" ? event.clientX : event.clientY) - start;
 					value.value = Math.max(min, Math.min(max, startValue + delta));
-					if (Math.abs(value.value - (snapTarget - 67)) < 16) value.value = null;
+					if (snapTarget !== null && Math.abs(value.value - (snapTarget - 67)) < 16) value.value = null;
 				}
 				function onMouseUp() {
 					removeListeners.forEach((fn) => fn());
@@ -64,8 +75,10 @@ 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 startValue = value.value;
+				const [touch] = event.touches;
+				if (!touch) return;
+				const start = axis === "x" ? touch.clientX : touch.clientY;
+				const startValue = startFrom();
 				resizing.value = true;
 				const removeListeners = [
 					addWindowListener("touchmove", onTouchMove),
@@ -73,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() {
@@ -130,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-380b627d></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-380b627d></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/StoryVariantGrid.js

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

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

@@ -2,7 +2,7 @@ import { useStoryStore } from "../../stores/story.js";
 import { assignSlots, trimSlots } from "../../util/grid-slots.js";
 import StoryVariantGridItem_default from "./StoryVariantGridItem.js";
 import { useDebounceFn, useResizeObserver } from "@poveste/vendors/vue-use";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, unref, watch } from "@poveste/vendors/vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, unref, watch } from "@poveste/vendors/vue";
 //#region src/app/components/story/StoryVariantGrid.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-story-variant-grid flex flex-col items-stretch h-full __poveste-pane-shadow-from-right" };
 var _hoisted_2 = { class: "flex w-0 flex-1 mx-4" };
@@ -17,17 +17,18 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	setup(__props) {
 		const storyStore = useStoryStore();
 		const gridTemplateWidth = computed(() => {
-			if (storyStore.currentStory.layout.type !== "grid") return;
-			const layoutWidth = storyStore.currentStory.layout.width;
+			const layout = storyStore.currentStory?.layout;
+			if (layout?.type !== "grid") return;
+			const layoutWidth = layout.width;
 			if (!layoutWidth) return "200px";
 			if (typeof layoutWidth === "number") return `${layoutWidth}px`;
 			return layoutWidth;
 		});
 		const maxItemHeight = ref(0);
-		const el = ref(null);
+		const el = ref();
 		const scrollTop = ref(0);
 		const viewportHeight = ref(0);
-		const variants = computed(() => storyStore.currentStory.variants);
+		const variants = computed(() => storyStore.currentStory?.variants ?? []);
 		useResizeObserver(el, () => {
 			updateWindow();
 			updateSize();
@@ -60,14 +61,16 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				updateWindow();
 			}
 		}
-		const gridEl = ref(null);
+		const gridEl = ref();
 		const gridColumnWidth = ref(1);
 		const viewWidth = ref(1);
 		function updateSize() {
 			if (!el.value) return;
 			viewWidth.value = el.value.clientWidth;
 			if (!gridEl.value) return;
-			if (gridTemplateWidth.value.endsWith("%")) gridColumnWidth.value = viewWidth.value * Number.parseInt(gridTemplateWidth.value) / 100 - gap;
+			const templateWidth = gridTemplateWidth.value;
+			if (!templateWidth) return;
+			if (templateWidth.endsWith("%")) gridColumnWidth.value = viewWidth.value * Number.parseInt(templateWidth) / 100 - gap;
 			else gridColumnWidth.value = Number.parseInt(gridTemplateWidth.value);
 		}
 		onMounted(() => {
@@ -105,7 +108,9 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			}, TRIM_DELAY);
 		}
 		watch(visibleVariants, (visible) => {
-			slots.value = assignSlots(slots.value, storyStore.currentStory.id, visible);
+			const story = storyStore.currentStory;
+			if (!story) return;
+			slots.value = assignSlots(slots.value, story.id, visible);
 			scheduleTrim();
 		}, { immediate: true });
 		onBeforeUnmount(() => {
@@ -143,7 +148,7 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					gridTemplateColumns: `repeat(${columnCount.value}, ${gridColumnWidth.value}px)`,
 					transform: offsetY.value ? `translateY(${offsetY.value}px)` : void 0
 				})
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(slots.value, (slot, index) => {
+			}, [unref(storyStore).currentStory ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(slots.value, (slot, index) => {
 				return openBlock(), createBlock(StoryVariantGridItem_default, {
 					key: index,
 					variant: slot.variant,
@@ -158,7 +163,7 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"story",
 					"style"
 				]);
-			}), 128))], 4)], 4)])], 544)]);
+			}), 128)) : createCommentVNode("", true)], 4)], 4)])], 544)]);
 		};
 	}
 });

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

@@ -27,10 +27,14 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const router = useRouter();
 		const route = useRoute();
 		watch(() => storyStore.currentVariant, (value) => {
-			if (value) storyStore.currentStory.lastSelectedVariant = value;
+			const story = storyStore.currentStory;
+			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({
@@ -41,7 +45,7 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				}
 			});
 		}
-		const docsOnlyScroller = ref(null);
+		const docsOnlyScroller = ref();
 		function scrollDocsToTop() {
 			docsOnlyScroller.value?.scrollTo(0, 0);
 		}

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

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

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

@@ -9,7 +9,7 @@ var _hoisted_1 = { class: "poveste-story-viewer bg-gray-50 h-full dark:bg-gray-7
 var StoryViewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryViewer",
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v4fc4017e": variant.value?.iconColor }));
+		useCssVars((_ctx) => ({ "v96d17610": variant.value?.iconColor }));
 		const storyStore = useStoryStore();
 		const variant = computed(() => storyStore.currentVariant);
 		const isMenuOpened = ref(false);
@@ -20,7 +20,7 @@ var StoryViewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			isMenuOpened.value = false;
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1, [unref(storyStore).currentStory.layout.type === "grid" ? (openBlock(), createBlock(StoryVariantGrid_default, { key: 0 })) : unref(storyStore).currentStory.layout.type === "single" ? (openBlock(), createBlock(StoryVariantSingle_default, {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1, [unref(storyStore).currentStory?.layout?.type === "grid" ? (openBlock(), createBlock(StoryVariantGrid_default, { key: 0 })) : unref(storyStore).currentStory?.layout?.type === "single" ? (openBlock(), createBlock(StoryVariantSingle_default, {
 				key: 1,
 				onOpenVariantMenu: _cache[0] || (_cache[0] = ($event) => isMenuOpened.value = true)
 			})) : createCommentVNode("", true)]), createVNode(MobileOverlay_default, {
@@ -28,7 +28,7 @@ var StoryViewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				opened: isMenuOpened.value,
 				onClose: closeMenu
 			}, {
-				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants, (v, index) => {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory?.variants ?? [], (v, index) => {
 					return openBlock(), createBlock(StoryVariantListItem_default, {
 						key: index,
 						variant: v

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

@@ -42,7 +42,7 @@ var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			}
 		];
 		const showColorScheme = !povesteConfig.theme.hideColorSchemeSwitch;
-		const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets.length;
+		const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets?.length;
 		return (_ctx, _cache) => {
 			const _component_VDropdown = resolveComponent("VDropdown");
 			const _directive_tooltip = resolveDirective("tooltip");

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

@@ -1,7 +1,7 @@
 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, openBlock, renderList, resolveComponent, resolveDirective, toDisplayString, unref, vModelText, withCtx, withDirectives } from "@poveste/vendors/vue";
+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 { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/toolbar/ToolbarResponsiveSize.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-col items-stretch" };
@@ -17,6 +17,17 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 	__name: "ToolbarResponsiveSize",
 	setup(__props) {
 		const settings = usePreviewSettingsStore().currentSettings;
+		function autoWhenEmpty(key) {
+			return computed({
+				get: () => settings[key],
+				set: (value) => {
+					const parsed = typeof value === "number" ? value : Number.parseFloat(value ?? "");
+					settings[key] = Number.isFinite(parsed) ? parsed : null;
+				}
+			});
+		}
+		const responsiveWidth = autoWhenEmpty("responsiveWidth");
+		const responsiveHeight = autoWhenEmpty("responsiveHeight");
 		return (_ctx, _cache) => {
 			const _component_VDropdown = resolveComponent("VDropdown");
 			const _directive_tooltip = resolveDirective("tooltip");
@@ -36,30 +47,20 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 					}, 8, ["modelValue"]),
 					createElementVNode("div", _hoisted_2, [
 						withDirectives(createElementVNode("input", {
-							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(settings).responsiveWidth = $event),
+							"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(settings).responsiveWidth,
-							void 0,
-							{ number: true }
-						], [_directive_tooltip, "Responsive width (px)"]]),
+						}, null, 512), [[vModelText, unref(responsiveWidth)], [_directive_tooltip, "Responsive width (px)"]]),
 						_cache[4] || (_cache[4] = createElementVNode("span", { class: "opacity-50" }, "×", -1)),
 						withDirectives(createElementVNode("input", {
-							"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(settings).responsiveHeight = $event),
+							"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(settings).responsiveHeight,
-							void 0,
-							{ number: true }
-						], [_directive_tooltip, "Responsive height (px)"]])
+						}, null, 512), [[vModelText, unref(responsiveHeight)], [_directive_tooltip, "Responsive height (px)"]])
 					]),
 					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(povesteConfig).responsivePresets, (preset, index) => {
 						return openBlock(), createElementBlock("button", {
@@ -67,7 +68,7 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 							class: normalizeClass(["px-4 py-3 cursor-pointer text-left flex gap-4", [unref(settings).responsiveWidth === preset.width && unref(settings).responsiveHeight === preset.height ? "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(settings).responsiveWidth = preset.width;
-								unref(settings).responsiveHeight = preset.height;
+								unref(settings).responsiveHeight = preset.height ?? null;
 								hide();
 							}
 						}, [createTextVNode(toDisplayString(preset.label) + " ", 1), createElementVNode("span", _hoisted_4, [

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

@@ -1,9 +1,10 @@
 import { router } from "./router.js";
 //#region src/app/plugin.ts
 function setupPluginApi() {
-	if (!import.meta.hot) return;
+	const hot = import.meta.hot;
+	if (!hot) return;
 	const listeners = {};
-	import.meta.hot.on("poveste:dev-event-result", ({ event, result }) => {
+	hot.on("poveste:dev-event-result", ({ event, result }) => {
 		const set = listeners[event];
 		if (set) for (const listener of set) listener(result);
 	});
@@ -21,7 +22,7 @@ function setupPluginApi() {
 	window.__HST_PLUGIN_API__ = {
 		sendEvent: (event, payload) => {
 			return new Promise((resolve) => {
-				import.meta.hot.send(`poveste:dev-event`, {
+				hot.send(`poveste:dev-event`, {
 					event,
 					payload
 				});

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;
@@ -38,8 +38,8 @@ if (storedSettings) applyPreviewSettings(storedSettings);
 if (window.parent && window.parent !== window) window.parent.postMessage({ type: PREVIEW_SETTINGS_REQUEST }, window.location.origin);
 function reportUncaught(error) {
 	reportStoryError(error, {
-		storyId: storyId.value,
-		variantId: variantId.value
+		storyId: storyId.value ?? void 0,
+		variantId: variantId.value ?? void 0
 	});
 }
 window.addEventListener("error", (event) => {
@@ -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/folder.js

@@ -29,7 +29,7 @@ var useFolderStore = defineStore("folder", () => {
 	}
 	const storyStore = useStoryStore();
 	watch(() => storyStore.currentStory, (story) => {
-		if (story) openFileFolders(story.file.path);
+		if (story?.file) openFileFolders(story.file.path);
 	});
 	return {
 		isFolderOpened,

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();