@poveste/app 0.2.1 → 0.3.1

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

@@ -0,0 +1,99 @@
+import { useStoryStore } from "../../stores/story.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";
+//#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 StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryVariantGrid",
+	setup(__props) {
+		const storyStore = useStoryStore();
+		const gridTemplateWidth = computed(() => {
+			if (storyStore.currentStory.layout.type !== "grid") return;
+			const layoutWidth = storyStore.currentStory.layout.width;
+			if (!layoutWidth) return "200px";
+			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);
+		useResizeObserver(el, () => {
+			updateMaxCount();
+			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 onItemResize(w, h) {
+			itemWidth.value = w;
+			if (maxItemHeight.value < h) {
+				maxItemHeight.value = h;
+				updateMaxCount();
+			}
+		}
+		watch(() => storyStore.currentVariant, () => {
+			maxItemHeight.value = 0;
+			updateMaxCount();
+		});
+		const gridEl = ref(null);
+		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;
+			else gridColumnWidth.value = Number.parseInt(gridTemplateWidth.value);
+		}
+		onMounted(() => {
+			updateSize();
+		});
+		useResizeObserver(gridEl, () => {
+			updateSize();
+		});
+		const columnCount = computed(() => Math.min(storyStore.currentStory.variants.length, Math.floor((viewWidth.value + gap) / (gridColumnWidth.value + gap))));
+		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())
+			}, [createElementVNode("div", _hoisted_2, [createElementVNode("div", {
+				class: "m-auto",
+				style: normalizeStyle({ minHeight: `${unref(storyStore).currentStory.variants.length / countPerRow.value * (maxItemHeight.value + gap) - gap}px` })
+			}, [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) => {
+				return openBlock(), createBlock(StoryVariantGridItem_default, {
+					key: index,
+					variant,
+					story: unref(storyStore).currentStory,
+					onResize: onItemResize
+				}, null, 8, ["variant", "story"]);
+			}), 128))], 4)], 4)])], 544)]);
+		};
+	}
+});
+//#endregion
+export { StoryVariantGrid_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+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-270b4ce8"]]);
+//#endregion
+export { StoryVariantGridItem_default as default };

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

@@ -0,0 +1,142 @@
+import { povesteConfig } from "../../util/config.js";
+import { useStoryStore } from "../../stores/story.js";
+import { useScrollOnActive } from "../../util/scroll.js";
+import { usePreviewDark } from "../../util/color-scheme.js";
+import { getContrastColor } from "../../util/preview-settings.js";
+import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
+import ToolbarNewTab_default from "../toolbar/ToolbarNewTab.js";
+import GenericRenderStory_default from "./GenericRenderStory.js";
+import { getSourceCode } from "../../util/docs.js";
+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 { Icon } from "@poveste/vendors/iconify";
+import { useRouter } from "@poveste/vendors/vue-router";
+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 StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryVariantGridItem",
+	props: {
+		variant: {
+			type: Object,
+			required: true
+		},
+		story: {
+			type: Object,
+			required: true
+		}
+	},
+	emits: { resize: (_width, _height) => true },
+	setup(__props, { emit: __emit }) {
+		useCssVars((_ctx) => ({
+			"v0884d9dc": unref(variant).iconColor,
+			"v233de319": unref(settings).backgroundColor
+		}));
+		const props = __props;
+		const emit = __emit;
+		const { variant } = toRefs(props);
+		const { isActive, targetRoute } = useCurrentVariantRoute(variant);
+		const storyStore = useStoryStore();
+		storyStore.setPreviewReady(props.variant, false);
+		function onReady() {
+			storyStore.setPreviewReady(props.variant, true);
+		}
+		const router = useRouter();
+		function selectVariant() {
+			router.push(targetRoute.value);
+		}
+		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();
+			}
+		});
+		const settings = usePreviewSettingsStore().currentSettings;
+		const previewDark = usePreviewDark(settings);
+		const contrastColor = computed(() => getContrastColor(settings));
+		const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastColor);
+		const useIframe = computed(() => {
+			const layout = props.story.layout;
+			if (layout?.type === "grid" && layout.iframeGrid !== void 0) return layout.iframeGrid;
+			return povesteConfig.isolateStyles !== false;
+		});
+		return (_ctx, _cache) => {
+			const _component_RouterLink = resolveComponent("RouterLink");
+			const _directive_tooltip = resolveDirective("tooltip");
+			return openBlock(), createElementBlock("div", {
+				ref_key: "el",
+				ref: el,
+				class: "poveste-story-variant-grid-item cursor-default flex flex-col gap-y-1 group"
+			}, [createElementVNode("div", _hoisted_1, [withDirectives((openBlock(), createBlock(_component_RouterLink, {
+				to: unref(targetRoute),
+				class: normalizeClass(["rounded w-max px-2 py-0.5 min-w-16 cursor-pointer flex items-center gap-1 flex-shrink", {
+					"hover:bg-gray-200 text-gray-500 dark:hover:bg-gray-800": !unref(isActive),
+					"bg-primary-200 hover:bg-primary-300 text-primary-800 dark:bg-primary-700 dark:hover:bg-primary-800 dark:text-primary-200": unref(isActive)
+				}])
+			}, {
+				default: withCtx(() => [createVNode(unref(Icon), {
+					icon: unref(variant).icon ?? "carbon:cube",
+					class: normalizeClass(["w-4 h-4 opacity-50", {
+						"text-gray-500": !unref(isActive) && !unref(variant).iconColor,
+						"bind-icon-color": !unref(isActive) && unref(variant).iconColor
+					}])
+				}, null, 8, ["icon", "class"]), createElementVNode("span", _hoisted_2, toDisplayString(unref(variant).title), 1)]),
+				_: 1
+			}, 8, ["to", "class"])), [[_directive_tooltip, unref(variant).title]]), createElementVNode("div", _hoisted_3, [createVNode(unref(HstCopyIcon), { content: () => unref(getSourceCode)(__props.story, unref(variant)) }, null, 8, ["content"]), createVNode(ToolbarNewTab_default, {
+				variant: unref(variant),
+				story: __props.story
+			}, null, 8, ["variant", "story"])])]), createElementVNode("div", {
+				class: normalizeClass(["border bg-white dark:bg-gray-700 rounded flex-1 p-4 relative", {
+					"border-gray-100 dark:border-gray-800": !unref(isActive),
+					"border-primary-200 dark:border-primary-900": unref(isActive)
+				}]),
+				"data-test-id": "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"
+				}, null, -1)),
+				unref(settings).checkerboard ? (openBlock(), createBlock(CheckerboardPattern_default, {
+					key: 0,
+					class: "absolute inset-0 w-full h-full text-gray-500/20"
+				})) : createCommentVNode("", true),
+				createElementVNode("div", {
+					class: "relative h-full",
+					style: normalizeStyle({
+						"--poveste-contrast-color": contrastColor.value,
+						"--histoire-contrast-color": contrastColor.value,
+						"color": autoApplyContrastColor.value ? contrastColor.value : void 0
+					})
+				}, [useIframe.value ? (openBlock(), createBlock(StoryVariantSinglePreviewRemote_default, {
+					key: `iframe-${__props.story.id}-${unref(variant).id}`,
+					story: __props.story,
+					variant: unref(variant),
+					"auto-height": ""
+				}, null, 8, ["story", "variant"])) : (openBlock(), createBlock(GenericRenderStory_default, {
+					key: `${__props.story.id}-${unref(variant).id}`,
+					variant: unref(variant),
+					story: __props.story,
+					dir: unref(settings).textDirection,
+					class: normalizeClass({ [unref(povesteConfig).theme.darkClass]: unref(previewDark) }),
+					onReady
+				}, null, 8, [
+					"variant",
+					"story",
+					"dir",
+					"class"
+				]))], 4)
+			], 34)], 512);
+		};
+	}
+});
+//#endregion
+export { StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+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"]]);
+//#endregion
+export { StoryVariantListItem_default as default };

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

@@ -0,0 +1,44 @@
+import { useScrollOnActive } from "../../util/scroll.js";
+import BaseListItemLink_default from "../base/BaseListItemLink.js";
+import { useCurrentVariantRoute } from "../../util/variant.js";
+import { createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, toRefs, unref, useCssVars, withCtx } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+//#region src/app/components/story/StoryVariantListItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "truncate" };
+var StoryVariantListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryVariantListItem",
+	props: { variant: {
+		type: Object,
+		required: true
+	} },
+	setup(__props) {
+		useCssVars((_ctx) => ({ "v25a47cf6": unref(variant).iconColor }));
+		const { variant } = toRefs(__props);
+		const { isActive, targetRoute } = useCurrentVariantRoute(variant);
+		const el = ref();
+		useScrollOnActive(isActive, el);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "el",
+				ref: el,
+				class: "poveste-story-variant-list-item",
+				"data-test-id": "story-variant-list-item"
+			}, [createVNode(BaseListItemLink_default, {
+				to: unref(targetRoute),
+				"is-active": unref(isActive),
+				class: "px-2 py-2 md:py-1.5 m-1 rounded-sm flex items-center gap-2"
+			}, {
+				default: withCtx(({ active }) => [createVNode(unref(Icon), {
+					icon: unref(variant).icon ?? "carbon:cube",
+					class: normalizeClass(["w-5 h-5 sm:w-4 sm:h-4 flex-none", {
+						"text-gray-500": !active && !unref(variant).iconColor,
+						"bind-icon-color": !active && unref(variant).iconColor
+					}])
+				}, null, 8, ["icon", "class"]), createElementVNode("span", _hoisted_1, toDisplayString(unref(variant).title), 1)]),
+				_: 1
+			}, 8, ["to", "is-active"])], 512);
+		};
+	}
+});
+//#endregion
+export { StoryVariantListItem_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+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-db50bc8f"]]);
+//#endregion
+export { StoryVariantSingle_default as default };

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

@@ -0,0 +1,76 @@
+import { isMobile } from "../../util/responsive.js";
+import { useStoryStore } from "../../stores/story.js";
+import BaseSplitPane_default from "../base/BaseSplitPane.js";
+import StoryVariantListItem_default from "./StoryVariantListItem.js";
+import StoryVariantSingleView_default from "./StoryVariantSingleView.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, useCssVars, withCtx } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+//#region src/app/components/story/StoryVariantSingle.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "poveste-story-variant-single p-2 h-full __poveste-pane-shadow-from-right"
+};
+var _hoisted_2 = {
+	key: 0,
+	class: "divide-y divide-gray-100 dark:divide-gray-800 h-full flex flex-col"
+};
+var _hoisted_3 = {
+	key: 0,
+	class: "p-2 h-full"
+};
+var _hoisted_4 = { class: "h-full overflow-y-auto" };
+var _hoisted_5 = {
+	key: 0,
+	class: "p-2 h-full __poveste-pane-shadow-from-right"
+};
+var StoryVariantSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryVariantSingle",
+	emits: { openVariantMenu: () => true },
+	setup(__props) {
+		useCssVars((_ctx) => ({ "dd8d1ad8": variant.value?.iconColor }));
+		const storyStore = useStoryStore();
+		const hasSingleVariant = computed(() => storyStore.currentStory?.variants.length === 1);
+		const variant = computed(() => storyStore.currentVariant);
+		return (_ctx, _cache) => {
+			return hasSingleVariant.value && variant.value ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(StoryVariantSingleView_default, {
+				variant: variant.value,
+				story: unref(storyStore).currentStory
+			}, null, 8, ["variant", "story"])])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("a", {
+				class: "px-6 h-12 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer flex gap-2 flex-wrap w-full items-center flex-none",
+				onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("openVariantMenu"))
+			}, [variant.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(Icon), {
+				icon: variant.value.icon ?? "carbon:cube",
+				class: normalizeClass(["w-5 h-5 flex-none", {
+					"text-gray-500": !variant.value.iconColor,
+					"bind-icon-color": variant.value.iconColor
+				}])
+			}, null, 8, ["icon", "class"]), createTextVNode(" " + toDisplayString(variant.value.title), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(" Select a variant... ")], 64)), createVNode(unref(Icon), {
+				icon: "carbon:chevron-sort",
+				class: "w-5 h-5 shrink-0 ml-auto"
+			})]), unref(storyStore).currentVariant ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(StoryVariantSingleView_default, {
+				variant: unref(storyStore).currentVariant,
+				story: unref(storyStore).currentStory
+			}, null, 8, ["variant", "story"])])) : createCommentVNode("", true)])) : (openBlock(), createBlock(BaseSplitPane_default, {
+				key: 1,
+				"save-id": "story-single-main-split",
+				min: 5,
+				max: 40,
+				"default-split": 17
+			}, {
+				first: withCtx(() => [createElementVNode("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants, (v, index) => {
+					return openBlock(), createBlock(StoryVariantListItem_default, {
+						key: index,
+						variant: v
+					}, null, 8, ["variant"]);
+				}), 128))])]),
+				last: withCtx(() => [unref(storyStore).currentVariant ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(StoryVariantSingleView_default, {
+					variant: unref(storyStore).currentVariant,
+					story: unref(storyStore).currentStory
+				}, null, 8, ["variant", "story"])])) : createCommentVNode("", true)]),
+				_: 1
+			}))], 64));
+		};
+	}
+});
+//#endregion
+export { StoryVariantSingle_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,5 @@
+import StoryVariantSinglePreviewNative_vue_vue_type_script_setup_true_lang_default from "./StoryVariantSinglePreviewNative.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/story/StoryVariantSinglePreviewNative.vue
+var StoryVariantSinglePreviewNative_default = StoryVariantSinglePreviewNative_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { StoryVariantSinglePreviewNative_default as default };

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

@@ -0,0 +1,68 @@
+import { povesteConfig } from "../../util/config.js";
+import { useStoryStore } from "../../stores/story.js";
+import { usePreviewDark } from "../../util/color-scheme.js";
+import { getContrastColor } from "../../util/preview-settings.js";
+import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
+import GenericRenderStory_default from "./GenericRenderStory.js";
+import StoryResponsivePreview_default from "./StoryResponsivePreview.js";
+import { computed, createBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref, withCtx } from "@poveste/vendors/vue";
+//#region src/app/components/story/StoryVariantSinglePreviewNative.vue?vue&type=script&setup=true&lang.ts
+var StoryVariantSinglePreviewNative_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryVariantSinglePreviewNative",
+	props: {
+		story: {},
+		variant: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const storyStore = useStoryStore();
+		storyStore.setPreviewReady(props.variant, false);
+		function onReady() {
+			storyStore.setPreviewReady(props.variant, true);
+		}
+		const settings = usePreviewSettingsStore().currentSettings;
+		const previewDark = usePreviewDark(settings);
+		const contrastColor = computed(() => getContrastColor(settings));
+		const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastColor);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(StoryResponsivePreview_default, {
+				class: "poveste-story-variant-single-preview-native",
+				variant: __props.variant
+			}, {
+				default: withCtx(({ isResponsiveEnabled, finalWidth, finalHeight }) => [createElementVNode("div", {
+					style: normalizeStyle([isResponsiveEnabled ? {
+						width: finalWidth ? `${finalWidth}px` : "100%",
+						height: finalHeight ? `${finalHeight}px` : "100%"
+					} : {
+						width: "100%",
+						height: "100%"
+					}, {
+						"--poveste-contrast-color": contrastColor.value,
+						"--histoire-contrast-color": contrastColor.value,
+						"color": autoApplyContrastColor.value ? contrastColor.value : void 0
+					}]),
+					class: "relative",
+					"data-test-id": "sandbox-render"
+				}, [(openBlock(), createBlock(GenericRenderStory_default, {
+					key: `${__props.story.id}-${__props.variant.id}`,
+					variant: __props.variant,
+					story: __props.story,
+					class: normalizeClass(["h-full", {
+						[unref(povesteConfig).sandboxDarkClass]: unref(previewDark),
+						[unref(povesteConfig).theme.darkClass]: unref(previewDark)
+					}]),
+					dir: unref(settings).textDirection,
+					onReady
+				}, null, 8, [
+					"variant",
+					"story",
+					"class",
+					"dir"
+				]))], 4)]),
+				_: 1
+			}, 8, ["variant"]);
+		};
+	}
+});
+//#endregion
+export { StoryVariantSinglePreviewNative_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,5 @@
+import StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default from "./StoryVariantSinglePreviewRemote.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/story/StoryVariantSinglePreviewRemote.vue
+var StoryVariantSinglePreviewRemote_default = StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { StoryVariantSinglePreviewRemote_default as default };

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

@@ -0,0 +1,134 @@
+import { EVENT_SEND, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, 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 { toRawDeep } from "../../util/state.js";
+import { useEventsStore } from "../../stores/events.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 StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryVariantSinglePreviewRemote",
+	props: {
+		story: {},
+		variant: {},
+		autoHeight: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const settings = usePreviewSettingsStore().currentSettings;
+		const iframe = ref();
+		function syncState() {
+			if (iframe.value && props.variant.previewReady) iframe.value.contentWindow.postMessage({
+				type: STATE_SYNC,
+				state: toRawDeep(props.variant.state, true)
+			});
+		}
+		let synced = false;
+		watch(() => props.variant.state, () => {
+			if (synced) {
+				synced = false;
+				return;
+			}
+			syncState();
+		}, {
+			deep: true,
+			immediate: true
+		});
+		const storyStore = useStoryStore();
+		storyStore.setPreviewReady(props.variant, false);
+		const reportedHeight = ref(null);
+		useEventListener(window, "message", (event) => {
+			if (event.source !== iframe.value?.contentWindow) return;
+			switch (event.data?.type) {
+				case STATE_SYNC:
+					updateVariantState(event.data.state);
+					break;
+				case EVENT_SEND:
+					logEvent(event.data.event);
+					break;
+				case SANDBOX_READY:
+					setPreviewReady();
+					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;
+				}
+			}
+		});
+		function updateVariantState(state) {
+			synced = applyState(props.variant.state, state);
+		}
+		function logEvent(event) {
+			useEventsStore().addEvent(event);
+		}
+		function setPreviewReady() {
+			storyStore.setPreviewReady(props.variant, true);
+		}
+		const sandboxUrl = computed(() => {
+			return getSandboxUrl(props.story, props.variant);
+		});
+		const isIframeLoaded = ref(false);
+		let stopTrackKeyboard;
+		let unmounted = false;
+		watch(sandboxUrl, () => {
+			isIframeLoaded.value = false;
+			storyStore.setPreviewReady(props.variant, false);
+			stopTrackKeyboard?.();
+			stopTrackKeyboard = void 0;
+		});
+		onBeforeUnmount(() => {
+			unmounted = true;
+			stopTrackKeyboard?.();
+		});
+		function syncSettings() {
+			if (iframe.value) iframe.value.contentWindow.postMessage({
+				type: PREVIEW_SETTINGS_SYNC,
+				settings: toRaw(settings)
+			});
+		}
+		watch(() => settings, () => {
+			syncSettings();
+		}, {
+			deep: true,
+			immediate: true
+		});
+		function onIframeLoad() {
+			if (unmounted) return;
+			isIframeLoaded.value = true;
+			syncState();
+			syncSettings();
+			stopTrackKeyboard?.();
+			if (iframe.value?.contentWindow) stopTrackKeyboard = trackWindow(iframe.value.contentWindow);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(StoryResponsivePreview_default, {
+				class: "poveste-story-variant-single-preview-remote",
+				variant: __props.variant
+			}, {
+				default: withCtx(({ isResponsiveEnabled, finalWidth, finalHeight, resizing }) => [createElementVNode("iframe", {
+					ref_key: "iframe",
+					ref: iframe,
+					src: sandboxUrl.value,
+					class: normalizeClass(["w-full h-full relative", {
+						"invisible": !isIframeLoaded.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",
+					onLoad: _cache[0] || (_cache[0] = ($event) => onIframeLoad())
+				}, null, 46, _hoisted_1)]),
+				_: 1
+			}, 8, ["variant"]);
+		};
+	}
+});
+//#endregion
+export { StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,5 @@
+import StoryVariantSingleView_vue_vue_type_script_setup_true_lang_default from "./StoryVariantSingleView.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/story/StoryVariantSingleView.vue
+var StoryVariantSingleView_default = StoryVariantSingleView_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { StoryVariantSingleView_default as default };

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

@@ -0,0 +1,30 @@
+import StoryVariantSinglePreviewRemote_default from "./StoryVariantSinglePreviewRemote.js";
+import StoryVariantSinglePreviewNative_default from "./StoryVariantSinglePreviewNative.js";
+import { createBlock, createElementBlock, defineComponent, openBlock } from "@poveste/vendors/vue";
+//#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"
+};
+var StoryVariantSingleView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryVariantSingleView",
+	props: {
+		variant: {},
+		story: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [__props.story.layout?.iframe === false ? (openBlock(), createBlock(StoryVariantSinglePreviewNative_default, {
+				key: 0,
+				story: __props.story,
+				variant: __props.variant
+			}, null, 8, ["story", "variant"])) : (openBlock(), createBlock(StoryVariantSinglePreviewRemote_default, {
+				key: 1,
+				story: __props.story,
+				variant: __props.variant
+			}, null, 8, ["story", "variant"]))]);
+		};
+	}
+});
+//#endregion
+export { StoryVariantSingleView_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,5 @@
+import StoryView_vue_vue_type_script_setup_true_lang_default from "./StoryView.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/story/StoryView.vue
+var StoryView_default = StoryView_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { StoryView_default as default };