@poveste/app 0.5.3 → 0.6.0

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

@@ -1,5 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
 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 = StoryVariantGrid_vue_vue_type_script_setup_true_lang_default;
+var StoryVariantGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantGrid_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-15980005"]]);
 //#endregion
 export { StoryVariantGrid_default as default };

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

@@ -1,12 +1,15 @@
 import { useStoryStore } from "../../stores/story.js";
+import { assignSlots, trimSlots } from "../../util/grid-slots.js";
 import StoryVariantGridItem_default from "./StoryVariantGridItem.js";
 import { useResizeObserver } from "@poveste/vendors/vue-use";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeStyle, onMounted, openBlock, ref, renderList, unref, watch } from "@poveste/vendors/vue";
+import { Fragment, computed, createBlock, 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" };
-var margin = 16;
 var gap = 16;
+var overscanRows = 2;
+var initialCount = 10;
+var TRIM_DELAY = 2e3;
 var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryVariantGrid",
 	setup(__props) {
@@ -18,41 +21,26 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			if (typeof layoutWidth === "number") return `${layoutWidth}px`;
 			return layoutWidth;
 		});
-		const itemWidth = ref(16);
 		const maxItemHeight = ref(0);
-		const maxCount = ref(10);
-		const countPerRow = ref(0);
-		const visibleRows = ref(0);
 		const el = ref(null);
+		const scrollTop = ref(0);
+		const viewportHeight = ref(0);
+		const variants = computed(() => storyStore.currentStory.variants);
 		useResizeObserver(el, () => {
-			updateMaxCount();
+			updateWindow();
 			updateSize();
 		});
-		function updateMaxCount() {
-			if (!maxItemHeight.value) return;
-			const width = el.value.clientWidth - margin * 2;
-			const height = el.value.clientHeight;
-			const scrollTop = el.value.scrollTop;
-			countPerRow.value = Math.floor((width + gap) / (itemWidth.value + gap));
-			visibleRows.value = Math.ceil((height + scrollTop + gap) / (maxItemHeight.value + gap));
-			const newMaxCount = countPerRow.value * visibleRows.value;
-			if (maxCount.value < newMaxCount) maxCount.value = newMaxCount;
-			if (storyStore.currentVariant) {
-				const index = storyStore.currentStory.variants.indexOf(storyStore.currentVariant);
-				if (index + 1 > maxCount.value) maxCount.value = index + 1;
-			}
+		function updateWindow() {
+			if (!el.value) return;
+			scrollTop.value = el.value.scrollTop;
+			viewportHeight.value = el.value.clientHeight;
 		}
-		function onItemResize(w, h) {
-			itemWidth.value = w;
+		function onItemResize(_w, h) {
 			if (maxItemHeight.value < h) {
 				maxItemHeight.value = h;
-				updateMaxCount();
+				updateWindow();
 			}
 		}
-		watch(() => storyStore.currentVariant, () => {
-			maxItemHeight.value = 0;
-			updateMaxCount();
-		});
 		const gridEl = ref(null);
 		const gridColumnWidth = ref(1);
 		const viewWidth = ref(1);
@@ -65,32 +53,91 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		}
 		onMounted(() => {
 			updateSize();
+			updateWindow();
 		});
 		useResizeObserver(gridEl, () => {
 			updateSize();
 		});
-		const columnCount = computed(() => Math.min(storyStore.currentStory.variants.length, Math.floor((viewWidth.value + gap) / (gridColumnWidth.value + gap))));
+		const columnCount = computed(() => Math.max(1, Math.min(variants.value.length, Math.floor((viewWidth.value + gap) / (gridColumnWidth.value + gap)))));
+		const rowHeight = computed(() => maxItemHeight.value + gap);
+		const measured = computed(() => maxItemHeight.value > 0);
+		const rowCount = computed(() => Math.ceil(variants.value.length / columnCount.value));
+		const startIndex = computed(() => {
+			if (!measured.value) return 0;
+			const firstRow = Math.floor(scrollTop.value / rowHeight.value) - overscanRows;
+			return Math.max(0, firstRow) * columnCount.value;
+		});
+		const endIndex = computed(() => {
+			if (!measured.value) return Math.min(variants.value.length, initialCount);
+			const lastRow = Math.ceil((scrollTop.value + viewportHeight.value) / rowHeight.value) + overscanRows;
+			return Math.min(variants.value.length, Math.max(lastRow, 1) * columnCount.value);
+		});
+		const visibleVariants = computed(() => variants.value.slice(startIndex.value, endIndex.value));
+		const slots = ref([]);
+		let trimTimer;
+		function scheduleTrim() {
+			clearTimeout(trimTimer);
+			trimTimer = setTimeout(() => {
+				if (!measured.value) {
+					scheduleTrim();
+					return;
+				}
+				slots.value = trimSlots(slots.value);
+			}, TRIM_DELAY);
+		}
+		watch(visibleVariants, (visible) => {
+			slots.value = assignSlots(slots.value, storyStore.currentStory.id, visible);
+			scheduleTrim();
+		}, { immediate: true });
+		onBeforeUnmount(() => {
+			clearTimeout(trimTimer);
+		});
+		const totalHeight = computed(() => measured.value ? rowCount.value * rowHeight.value - gap : void 0);
+		const offsetY = computed(() => measured.value ? startIndex.value / columnCount.value * rowHeight.value : 0);
+		watch(() => storyStore.currentVariant, (variant) => {
+			maxItemHeight.value = 0;
+			updateWindow();
+			if (!variant || !el.value || !measured.value) return;
+			const index = variants.value.indexOf(variant);
+			if (index === -1) return;
+			const top = Math.floor(index / columnCount.value) * rowHeight.value;
+			if (top < scrollTop.value || top + rowHeight.value > scrollTop.value + viewportHeight.value) {
+				el.value.scrollTop = top;
+				updateWindow();
+			}
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
 				ref_key: "el",
 				ref: el,
 				class: "overflow-y-auto flex flex-1",
-				onScroll: _cache[0] || (_cache[0] = ($event) => updateMaxCount())
+				onScroll: _cache[0] || (_cache[0] = ($event) => updateWindow())
 			}, [createElementVNode("div", _hoisted_2, [createElementVNode("div", {
 				class: "m-auto",
-				style: normalizeStyle({ minHeight: `${unref(storyStore).currentStory.variants.length / countPerRow.value * (maxItemHeight.value + gap) - gap}px` })
+				style: normalizeStyle({ minHeight: totalHeight.value != null ? `${totalHeight.value}px` : void 0 })
 			}, [createElementVNode("div", {
 				ref_key: "gridEl",
 				ref: gridEl,
-				class: "grid gap-4 my-4",
-				style: normalizeStyle({ gridTemplateColumns: `repeat(${columnCount.value}, ${gridColumnWidth.value}px)` })
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants.slice(0, maxCount.value), (variant, index) => {
+				class: "poveste-story-variant-grid-cells grid gap-4 my-4",
+				style: normalizeStyle({
+					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) => {
 				return openBlock(), createBlock(StoryVariantGridItem_default, {
 					key: index,
-					variant,
+					variant: slot.variant,
 					story: unref(storyStore).currentStory,
+					style: normalizeStyle({
+						order: slot.order,
+						display: slot.visible ? void 0 : "none"
+					}),
 					onResize: onItemResize
-				}, null, 8, ["variant", "story"]);
+				}, null, 8, [
+					"variant",
+					"story",
+					"style"
+				]);
 			}), 128))], 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-74c04c7c"]]);
+var StoryVariantGridItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a394f172"]]);
 //#endregion
 export { StoryVariantGridItem_default as default };

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

@@ -11,7 +11,7 @@ import { useCurrentVariantRoute } from "../../util/variant.js";
 import CheckerboardPattern_default from "../misc/CheckerboardPattern.js";
 import StoryVariantSinglePreviewRemote_default from "./StoryVariantSinglePreviewRemote.js";
 import { useResizeObserver } from "@poveste/vendors/vue-use";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, resolveComponent, resolveDirective, toDisplayString, toRefs, unref, useCssVars, withCtx, withDirectives, withModifiers } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, resolveComponent, resolveDirective, toDisplayString, toRefs, unref, useCssVars, watch, withCtx, withDirectives, withModifiers } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 import { useRouter } from "@poveste/vendors/vue-router";
 import { HstCopyIcon } from "@poveste/controls";
@@ -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) => ({
-			"v2e50e6e6": unref(variant).iconColor,
-			"v7d5058c5": unref(settings).backgroundColor
+			"v68878cb8": unref(variant).iconColor,
+			"v5a063a9a": unref(settings).backgroundColor
 		}));
 		const props = __props;
 		const emit = __emit;
@@ -43,6 +43,10 @@ var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		const { isActive, targetRoute } = useCurrentVariantRoute(variant);
 		const storyStore = useStoryStore();
 		storyStore.setPreviewReady(props.variant, false);
+		watch(() => props.variant, (next, previous) => {
+			if (previous) storyStore.setPreviewReady(previous, false);
+			storyStore.setPreviewReady(next, false);
+		});
 		function onReady() {
 			storyStore.setPreviewReady(props.variant, true);
 		}
@@ -52,11 +56,14 @@ var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		}
 		const el = ref();
 		const { autoScroll } = useScrollOnActive(isActive, el);
-		useResizeObserver(el, () => {
-			if (props.variant.previewReady) {
-				emit("resize", el.value.clientWidth, el.value.clientHeight);
-				if (isActive.value) autoScroll();
-			}
+		function reportSize() {
+			if (!el.value || !props.variant.previewReady) return;
+			emit("resize", el.value.clientWidth, el.value.clientHeight);
+			if (isActive.value) autoScroll();
+		}
+		useResizeObserver(el, reportSize);
+		watch(() => props.variant.previewReady, (ready) => {
+			if (ready) nextTick(reportSize);
 		});
 		const settings = usePreviewSettingsStore().currentSettings;
 		const previewDark = usePreviewDark(settings);
@@ -97,13 +104,13 @@ var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 					"border-gray-100 dark:border-gray-800": !unref(isActive),
 					"border-primary-200 dark:border-primary-900": unref(isActive)
 				}]),
-				"data-test-id": "sandbox-render",
+				"data-testid": "sandbox-render",
 				onClick: _cache[0] || (_cache[0] = withModifiers(($event) => selectVariant(), ["stop"])),
 				onKeyup: _cache[1] || (_cache[1] = ($event) => selectVariant())
 			}, [
 				_cache[2] || (_cache[2] = createElementVNode("div", {
 					class: "absolute inset-0 rounded bind-preview-bg",
-					"data-test-id": "responsive-preview-bg"
+					"data-testid": "responsive-preview-bg"
 				}, null, -1)),
 				unref(settings).checkerboard ? (openBlock(), createBlock(CheckerboardPattern_default, {
 					key: 0,
@@ -117,10 +124,11 @@ var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 						"color": autoApplyContrastColor.value ? contrastColor.value : void 0
 					})
 				}, [useIframe.value ? (openBlock(), createBlock(StoryVariantSinglePreviewRemote_default, {
-					key: `iframe-${__props.story.id}-${unref(variant).id}`,
+					key: 0,
 					story: __props.story,
 					variant: unref(variant),
-					"auto-height": ""
+					"auto-height": "",
+					responsive: false
 				}, null, 8, ["story", "variant"])) : (openBlock(), createBlock(GenericRenderStory_default, {
 					key: `${__props.story.id}-${unref(variant).id}`,
 					variant: unref(variant),

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

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

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

@@ -12,7 +12,7 @@ var StoryVariantListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		required: true
 	} },
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v25a47cf6": unref(variant).iconColor }));
+		useCssVars((_ctx) => ({ "v97886b12": unref(variant).iconColor }));
 		const { variant } = toRefs(__props);
 		const { isActive, targetRoute } = useCurrentVariantRoute(variant);
 		const el = ref();
@@ -22,7 +22,7 @@ var StoryVariantListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 				ref_key: "el",
 				ref: el,
 				class: "poveste-story-variant-list-item",
-				"data-test-id": "story-variant-list-item"
+				"data-testid": "story-variant-list-item"
 			}, [createVNode(BaseListItemLink_default, {
 				to: unref(targetRoute),
 				"is-active": unref(isActive),

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

@@ -42,7 +42,7 @@ var StoryVariantSinglePreviewNative_vue_vue_type_script_setup_true_lang_default
 						"color": autoApplyContrastColor.value ? contrastColor.value : void 0
 					}]),
 					class: "relative",
-					"data-test-id": "sandbox-render"
+					"data-testid": "sandbox-render"
 				}, [(openBlock(), createBlock(GenericRenderStory_default, {
 					key: `${__props.story.id}-${__props.variant.id}`,
 					variant: __props.variant,

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

@@ -1,91 +1,148 @@
-import { EVENT_SEND, PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from "../../util/const.js";
+import { EVENT_SEND, PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, SANDBOX_RETARGET, STATE_SYNC } from "../../util/const.js";
 import { trackWindow } from "../../util/keyboard.js";
 import { useStoryStore } from "../../stores/story.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import { getSandboxUrl } from "../../util/sandbox.js";
+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 StoryResponsivePreview_default from "./StoryResponsivePreview.js";
 import { useEventListener } from "@poveste/vendors/vue-use";
 import { computed, createBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, toRaw, watch, withCtx } from "@poveste/vendors/vue";
-import { applyState } from "@poveste/shared";
 //#region src/app/components/story/StoryVariantSinglePreviewRemote.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src"];
+var MIN_HEIGHT = 40;
+var MAX_AUTO_HEIGHT = 400;
+var REUSE_LIMIT = 30;
+var RETARGET_TIMEOUT = 8e3;
 var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryVariantSinglePreviewRemote",
 	props: {
 		story: {},
 		variant: {},
-		autoHeight: { type: Boolean }
+		autoHeight: { type: Boolean },
+		responsive: {
+			type: Boolean,
+			default: true
+		}
 	},
 	setup(__props) {
 		const props = __props;
 		const settings = usePreviewSettingsStore().currentSettings;
 		const iframe = ref();
-		function syncState() {
-			if (iframe.value?.contentWindow && props.variant.previewReady) iframe.value.contentWindow.postMessage({
+		function postState(changes) {
+			iframe.value?.contentWindow?.postMessage({
 				type: STATE_SYNC,
-				state: toRawDeep(props.variant.state, true)
+				state: changes
 			});
 		}
-		let synced = false;
-		watch(() => props.variant.state, () => {
-			if (synced) {
-				synced = false;
-				return;
-			}
+		let bridge = createStateBridge(postState);
+		function syncState() {
+			if (!iframe.value?.contentWindow || !props.variant.previewReady) return;
+			bridge.send(toRawDeep(props.variant.state, true));
+		}
+		watch(() => props.variant.state, (state, previous) => {
+			if (state !== previous) return;
 			syncState();
-		}, {
-			deep: true,
-			immediate: true
-		});
+		}, { deep: true });
 		const storyStore = useStoryStore();
 		storyStore.setPreviewReady(props.variant, false);
 		const reportedHeight = ref(null);
+		const placeholderHeight = computed(() => firstReportedHeight.value?.storyId === props.story.id ? firstReportedHeight.value.height : MIN_HEIGHT);
+		function fromCurrentOccupant(data) {
+			return !data.variantId || data.variantId === props.variant.id && data.storyId === props.story.id;
+		}
 		useEventListener(window, "message", (event) => {
 			if (event.source !== iframe.value?.contentWindow) return;
 			switch (event.data?.type) {
 				case STATE_SYNC:
+					if (!fromCurrentOccupant(event.data)) break;
 					updateVariantState(event.data.state);
 					break;
 				case EVENT_SEND:
 					logEvent(event.data.event);
 					break;
 				case SANDBOX_READY:
+					if (!fromCurrentOccupant(event.data)) break;
 					setPreviewReady();
 					break;
 				case PREVIEW_SETTINGS_REQUEST:
 					syncSettings();
 					break;
-				case SANDBOX_HEIGHT: if (typeof event.data.h === "number") {
-					const next = Math.max(40, event.data.h);
-					if (next !== reportedHeight.value) reportedHeight.value = next;
-				}
+				case SANDBOX_HEIGHT:
+					if (!fromCurrentOccupant(event.data)) break;
+					if (typeof event.data.h === "number" && event.data.h >= MIN_HEIGHT) {
+						const next = event.data.h;
+						if (next !== reportedHeight.value) reportedHeight.value = next;
+						if (props.autoHeight && firstReportedHeight.value?.storyId !== props.story.id) firstReportedHeight.value = {
+							storyId: props.story.id,
+							height: next
+						};
+					}
 			}
 		});
 		function updateVariantState(state) {
-			synced = applyState(props.variant.state, state);
+			bridge.receive(props.variant.state, state);
 		}
 		function logEvent(event) {
 			useEventsStore().addEvent(event);
 		}
+		const retargeting = ref(false);
+		let retargetTimer;
 		function setPreviewReady() {
+			retargeting.value = false;
+			clearTimeout(retargetTimer);
 			storyStore.setPreviewReady(props.variant, true);
+			syncState();
 		}
 		const sandboxUrl = computed(() => {
 			return getSandboxUrl(props.story, props.variant);
 		});
+		const iframeSrc = ref(sandboxUrl.value);
 		const isIframeLoaded = ref(false);
+		let retargets = 0;
+		let servedStory = props.story;
 		let stopTrackKeyboard;
 		let unmounted = false;
-		watch(sandboxUrl, () => {
+		function reload(url) {
+			retargets = 0;
+			retargeting.value = false;
+			clearTimeout(retargetTimer);
 			isIframeLoaded.value = false;
-			storyStore.setPreviewReady(props.variant, false);
+			reportedHeight.value = null;
+			servedStory = props.story;
 			stopTrackKeyboard?.();
 			stopTrackKeyboard = void 0;
+			if (iframeSrc.value === url && iframe.value) iframe.value.src = url;
+			iframeSrc.value = url;
+		}
+		watch(sandboxUrl, (url) => {
+			bridge = createStateBridge(postState);
+			storyStore.setPreviewReady(props.variant, false);
+			const reuse = props.story.layout?.isolate !== true && servedStory.layout?.isolate !== true;
+			const target = iframe.value?.contentWindow;
+			if (reuse && isIframeLoaded.value && target && retargets < REUSE_LIMIT) {
+				if (servedStory.id !== props.story.id) reportedHeight.value = null;
+				servedStory = props.story;
+				retargets++;
+				retargeting.value = true;
+				target.postMessage({
+					type: SANDBOX_RETARGET,
+					storyId: props.story.id,
+					variantId: props.variant.id
+				}, window.location.origin);
+				clearTimeout(retargetTimer);
+				retargetTimer = setTimeout(() => {
+					if (retargeting.value && !unmounted) reload(url);
+				}, RETARGET_TIMEOUT);
+				return;
+			}
+			reload(url);
 		});
 		onBeforeUnmount(() => {
 			unmounted = true;
+			clearTimeout(retargetTimer);
 			stopTrackKeyboard?.();
 		});
 		function syncSettings() {
@@ -100,8 +157,18 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 			deep: true,
 			immediate: true
 		});
+		function previewStyle(isResponsiveEnabled, finalWidth, finalHeight) {
+			const style = {};
+			if (isResponsiveEnabled) {
+				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`;
+			return style;
+		}
 		function onIframeLoad() {
 			if (unmounted) return;
+			retargets = 0;
 			isIframeLoaded.value = true;
 			syncState();
 			syncSettings();
@@ -111,25 +178,23 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(StoryResponsivePreview_default, {
 				class: "poveste-story-variant-single-preview-remote",
-				variant: __props.variant
+				variant: __props.variant,
+				responsive: __props.responsive
 			}, {
 				default: withCtx(({ isResponsiveEnabled, finalWidth, finalHeight, resizing }) => [createElementVNode("iframe", {
 					ref_key: "iframe",
 					ref: iframe,
-					src: sandboxUrl.value,
+					src: iframeSrc.value,
 					class: normalizeClass(["w-full h-full relative", {
-						"invisible": !isIframeLoaded.value,
+						"invisible": !isIframeLoaded.value || retargeting.value,
 						"pointer-events-none": resizing
 					}]),
-					style: normalizeStyle(isResponsiveEnabled ? {
-						width: finalWidth ? `${finalWidth}px` : null,
-						height: finalHeight ? `${finalHeight}px` : null
-					} : props.autoHeight && reportedHeight.value ? { height: `${reportedHeight.value}px` } : void 0),
-					"data-test-id": "preview-iframe",
+					style: normalizeStyle(previewStyle(isResponsiveEnabled, finalWidth, finalHeight)),
+					"data-testid": "preview-iframe",
 					onLoad: _cache[0] || (_cache[0] = ($event) => onIframeLoad())
 				}, null, 46, _hoisted_1)]),
 				_: 1
-			}, 8, ["variant"]);
+			}, 8, ["variant", "responsive"]);
 		};
 	}
 });

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

@@ -4,7 +4,7 @@ import { createBlock, createElementBlock, defineComponent, openBlock } from "@po
 //#region src/app/components/story/StoryVariantSingleView.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	class: "poveste-story-variant-single-view h-full flex flex-col",
-	"data-test-id": "story-variant-single-view"
+	"data-testid": "story-variant-single-view"
 };
 var StoryVariantSingleView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryVariantSingleView",

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

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import ToolbarBackground_vue_vue_type_script_setup_true_lang_default from "./ToolbarBackground.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                  */
 //#region src/app/components/toolbar/ToolbarBackground.vue
-var ToolbarBackground_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ToolbarBackground_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d6bd6512"]]);
+var ToolbarBackground_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ToolbarBackground_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ed785ad4"]]);
 //#endregion
 export { ToolbarBackground_default as default };

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

@@ -7,14 +7,14 @@ import { Icon } from "@poveste/vendors/iconify";
 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_2 = {
 	class: "flex flex-col items-stretch",
-	"data-test-id": "background-popper"
+	"data-testid": "background-popper"
 };
 var _hoisted_3 = {
 	key: 0,
 	class: "flex items-stretch gap-1 px-2 pt-2",
-	"data-test-id": "sandbox-color-scheme"
+	"data-testid": "sandbox-color-scheme"
 };
-var _hoisted_4 = ["data-test-id", "onClick"];
+var _hoisted_4 = ["data-testid", "onClick"];
 var _hoisted_5 = ["onClick"];
 var _hoisted_6 = { class: "mr-auto" };
 var _hoisted_7 = { class: "ml-auto opacity-70" };
@@ -23,8 +23,8 @@ var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 	__name: "ToolbarBackground",
 	setup(__props) {
 		useCssVars((_ctx) => ({
-			"v37e53e34": unref(settings).backgroundColor,
-			"eaa47ed2": _ctx.contrastColor
+			"ca113a48": unref(settings).backgroundColor,
+			"v0083f4ef": _ctx.contrastColor
 		}));
 		const previewSettings = usePreviewSettingsStore();
 		const settings = previewSettings.currentSettings;
@@ -55,7 +55,7 @@ var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				placement: "bottom-end",
 				skidding: 6,
 				class: "poveste-toolbar-background flex-none",
-				"data-test-id": "toolbar-background"
+				"data-testid": "toolbar-background"
 			}, {
 				default: withCtx(({ shown }) => [withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(Icon), {
 					icon: "carbon:color-palette",
@@ -68,7 +68,7 @@ var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 					showColorScheme ? (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(), createElementBlock(Fragment, null, renderList(colorSchemeOptions, (option) => {
 						return createElementVNode("button", {
 							key: option.value,
-							"data-test-id": `sandbox-color-scheme-${option.value}`,
+							"data-testid": `sandbox-color-scheme-${option.value}`,
 							class: normalizeClass(["flex-1 px-3 py-1.5 rounded flex items-center justify-center gap-1.5 cursor-pointer text-sm", [unref(settings).colorScheme === option.value ? "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).colorScheme = option.value
 						}, [createVNode(unref(Icon), {

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

@@ -5,7 +5,7 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/tree/StoryGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
-	"data-test-id": "story-group",
+	"data-testid": "story-group",
 	class: "poveste-story-group my-2 first:mt-0 last:mb-0 group"
 };
 var _hoisted_2 = { class: "truncate" };

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-5f7ae1b5"]]);
+var StoryListFolder_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryListFolder_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-11f8c91e"]]);
 //#endregion
 export { StoryListFolder_default as default };

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

@@ -4,7 +4,7 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/tree/StoryListFolder.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
-	"data-test-id": "story-list-folder",
+	"data-testid": "story-list-folder",
 	class: "poveste-story-list-folder"
 };
 var _hoisted_2 = { class: "bind-tree-padding flex items-center gap-2 min-w-0" };
@@ -20,7 +20,7 @@ var StoryListFolder_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		depth: { default: 0 }
 	},
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v52a68e33": folderPadding.value }));
+		useCssVars((_ctx) => ({ "v047dbc51": folderPadding.value }));
 		const props = __props;
 		const folderStore = useFolderStore();
 		const folderPath = computed(() => [...props.path, props.folder.title]);

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-9b200828"]]);
+var StoryListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryListItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0fa5d0aa"]]);
 //#endregion
 export { StoryListItem_default as default };