@poveste/app 0.2.1 → 0.3.0

package/dist/bundled/components/search/SearchItemContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import BaseIcon_default from "../base/BaseIcon.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+//#region src/app/components/search/SearchItemContent.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex-1" };
+var _hoisted_2 = { class: "flex" };
+var _hoisted_3 = { class: "ml-auto opacity-40" };
+var _hoisted_4 = {
+	key: 0,
+	class: "flex items-center gap-0.5 opacity-60"
+};
+var SearchItemContent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SearchItemContent",
+	props: {
+		result: {},
+		selected: { type: Boolean }
+	},
+	setup(__props) {
+		const defaultIcons = {
+			story: "carbon:cube",
+			variant: "carbon:cube"
+		};
+		const kindLabels = {
+			story: "Story",
+			variant: "Variant",
+			command: "Command"
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(BaseIcon_default, {
+				icon: __props.result.icon ?? defaultIcons[__props.result.kind],
+				class: normalizeClass(["w-4 h-4", [!__props.selected ? [__props.result.iconColor ? "bind-icon-color" : {
+					"text-primary-500": __props.result.kind === "story",
+					"text-gray-500": __props.result.kind === "variant"
+				}] : [], { "colorize-black": __props.selected }]])
+			}, null, 8, ["icon", "class"]), createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createTextVNode(toDisplayString(__props.result.title) + " ", 1), createElementVNode("span", _hoisted_3, toDisplayString(kindLabels[__props.result.kind]), 1)]), __props.result.path?.length ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.result.path, (p, index) => {
+				return openBlock(), createElementBlock("div", {
+					key: index,
+					class: "flex items-center gap-0.5"
+				}, [index > 0 ? (openBlock(), createBlock(unref(Icon), {
+					key: 0,
+					icon: "carbon:chevron-right",
+					class: "w-4 h-4 mt-0.5 opacity-50"
+				})) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(p), 1)]);
+			}), 128))])) : createCommentVNode("", true)])], 64);
+		};
+	}
+});
+//#endregion
+export { SearchItemContent_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/search/SearchLoading.js

@@ -0,0 +1,5 @@
+import SearchLoading_vue_vue_type_script_setup_true_lang_default from "./SearchLoading.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/search/SearchLoading.vue
+var SearchLoading_default = SearchLoading_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SearchLoading_default as default };

package/dist/bundled/components/search/SearchLoading.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,17 @@
+import { createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, unref } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+//#region src/app/components/search/SearchLoading.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "poveste-search-loading flex items-center gap-4 pl-6 border border-transparent focus-visible:border-primary-500 h-[51px] opacity-30" };
+var SearchLoading_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SearchLoading",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(Icon), {
+				icon: "carbon:search",
+				class: "flex-none w-4 h-4"
+			}), _cache[0] || (_cache[0] = createTextVNode(" Loading... ", -1))]);
+		};
+	}
+});
+//#endregion
+export { SearchLoading_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/search/SearchModal.js

@@ -0,0 +1,5 @@
+import SearchModal_vue_vue_type_script_setup_true_lang_default from "./SearchModal.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/search/SearchModal.vue
+var SearchModal_default = SearchModal_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SearchModal_default as default };

package/dist/bundled/components/search/SearchModal.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import SearchLoading_default from "./SearchLoading.js";
+import { createElementBlock, createElementVNode, createVNode, defineAsyncComponent, defineComponent, openBlock, unref, vShow, withDirectives } from "@poveste/vendors/vue";
+//#region src/app/components/search/SearchModal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "poveste-search-modal fixed inset-0 bg-white/80 dark:bg-gray-900/80 z-20",
+	"data-test-id": "search-modal"
+};
+var _hoisted_2 = { class: "bg-white dark:bg-gray-900 md:mt-16 md:mx-auto w-screen max-w-[512px] shadow-xl border border-gray-200 dark:border-gray-750 rounded-lg relative divide-y divide-gray-200 dark:divide-gray-850" };
+var SearchModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SearchModal",
+	props: { shown: {
+		type: Boolean,
+		default: false
+	} },
+	emits: { close: () => true },
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const SearchPane = defineAsyncComponent({
+			loader: () => import("./SearchPane.js"),
+			loadingComponent: SearchLoading_default,
+			delay: 0
+		});
+		function close() {
+			emit("close");
+		}
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
+				class: "absolute inset-0",
+				onClick: _cache[0] || (_cache[0] = ($event) => close())
+			}), createElementVNode("div", _hoisted_2, [createVNode(unref(SearchPane), {
+				shown: __props.shown,
+				onClose: _cache[1] || (_cache[1] = ($event) => close())
+			}, null, 8, ["shown"])])], 512)), [[vShow, __props.shown]]);
+		};
+	}
+});
+//#endregion
+export { SearchModal_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/search/SearchPane.js

@@ -0,0 +1,5 @@
+import SearchPane_vue_vue_type_script_setup_true_lang_default from "./SearchPane.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/search/SearchPane.vue
+var SearchPane_default = SearchPane_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SearchPane_default as default };

package/dist/bundled/components/search/SearchPane.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,229 @@
+import { onKeyboardShortcut } from "../../util/keyboard.js";
+import { useStoryStore } from "../../stores/story.js";
+import { builtinCommands, getCommandContext } from "../../util/commands.js";
+import { useCommandStore } from "../../stores/command.js";
+import { useSelection } from "../../util/select.js";
+import BaseEmpty_default from "../base/BaseEmpty.js";
+import { onUpdate, searchData } from "./search-title-data.js";
+import SearchItem_default from "./SearchItem.js";
+import { refDebounced, useFocus } from "@poveste/vendors/vue-use";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, shallowRef, unref, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import { useRouter } from "@poveste/vendors/vue-router";
+import Fuse from "fuse.js";
+import { registeredCommands } from "virtual:$poveste-commands";
+//#region src/app/components/search/SearchPane.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "max-h-[400px] overflow-y-auto rounded-b-lg"
+};
+var MAX_RESULTS = 50;
+var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SearchPane",
+	props: { shown: {
+		type: Boolean,
+		default: false
+	} },
+	emits: { close: () => true },
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const DocSearchData = () => import("./search-docs-data.js");
+		function close() {
+			emit("close");
+		}
+		const input = ref();
+		const { focused } = useFocus(input, { initialValue: true });
+		watch(() => props.shown, (value) => {
+			if (value) requestAnimationFrame(() => {
+				focused.value = true;
+				input.value.select();
+			});
+		});
+		const searchInputText = ref("");
+		const rateLimitedSearch = refDebounced(searchInputText, 50);
+		const storyStore = useStoryStore();
+		let titleSearchIndex;
+		let titleIdMap;
+		function createIndex() {
+			return new Fuse([], { keys: ["text"] });
+		}
+		async function loadSearchIndex(data) {
+			titleSearchIndex = createIndex();
+			for (const document of data.index) titleSearchIndex.add(document);
+			titleIdMap = data.idMap;
+		}
+		loadSearchIndex(searchData);
+		onUpdate((searchData) => {
+			loadSearchIndex(searchData);
+		});
+		let docSearchIndex;
+		let docIdMap;
+		async function loadDocSearchIndex() {
+			async function load(data) {
+				docSearchIndex = createIndex();
+				for (const document of data.index) docSearchIndex.add(document);
+				docIdMap = data.idMap;
+				if (rateLimitedSearch.value) await searchOnDocField(rateLimitedSearch.value);
+			}
+			const searchDataModule = await DocSearchData();
+			await load(searchDataModule.searchData);
+			searchDataModule.onUpdate((searchData) => {
+				load(searchData);
+			});
+		}
+		loadDocSearchIndex();
+		const titleResults = shallowRef([]);
+		watch(rateLimitedSearch, async (value) => {
+			const list = [];
+			const result = titleSearchIndex.search(value, { limit: MAX_RESULTS });
+			let rank = 0;
+			for (const document of result) {
+				const idMapData = titleIdMap[document.item.id];
+				if (!idMapData) continue;
+				switch (idMapData.kind) {
+					case "story":
+						list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank));
+						rank++;
+						break;
+					case "variant": {
+						const [storyId] = idMapData.id.split(":");
+						const story = storyStore.getStoryById(storyId);
+						const variant = storyStore.getVariantById(idMapData.id);
+						list.push(variantResultFactory(story, variant, rank));
+						rank++;
+						break;
+					}
+				}
+			}
+			titleResults.value = list;
+		});
+		const docsResults = shallowRef([]);
+		async function searchOnDocField(query) {
+			if (docSearchIndex) {
+				const list = [];
+				const result = docSearchIndex.search(query, { limit: MAX_RESULTS });
+				let rank = 0;
+				for (const document of result) {
+					const idMapData = docIdMap[document.item.id];
+					if (!idMapData) continue;
+					switch (idMapData.kind) {
+						case "story":
+							list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank, "docs"));
+							rank++;
+					}
+				}
+				docsResults.value = list;
+			}
+		}
+		watch(rateLimitedSearch, searchOnDocField);
+		function storyResultFactory(story, rank, type = "title") {
+			return {
+				kind: "story",
+				rank,
+				id: `story:${story.id}`,
+				title: story.title,
+				route: {
+					name: "story",
+					params: { storyId: story.id },
+					query: { ...type === "docs" ? { tab: "docs" } : {} }
+				},
+				path: story.file.path.slice(0, -1),
+				icon: story.icon,
+				iconColor: story.iconColor
+			};
+		}
+		function variantResultFactory(story, variant, rank, type = "title") {
+			return {
+				kind: "variant",
+				rank,
+				id: `variant:${story.id}:${variant.id}`,
+				title: variant.title,
+				route: {
+					name: "story",
+					params: { storyId: story.id },
+					query: {
+						variantId: variant.id,
+						...type === "docs" ? { tab: "docs" } : {}
+					}
+				},
+				path: [...story.file.path ?? [], story.title],
+				icon: variant.icon,
+				iconColor: variant.iconColor
+			};
+		}
+		const allCommands = [...builtinCommands, ...registeredCommands];
+		const commandResults = computed(() => {
+			if (__POVESTE_DEV__) {
+				const commandCtx = getCommandContext();
+				const searchText = rateLimitedSearch.value.toLowerCase();
+				return allCommands.filter((command) => !command.showIf || command.showIf(commandCtx)).filter((command) => command.label.toLowerCase().includes(searchText) || command.searchText?.toLowerCase().includes(searchText)).map((command) => commandResultFactory(command, 0));
+			}
+			return [];
+		});
+		const commandStore = useCommandStore();
+		function commandResultFactory(command, rank) {
+			return {
+				kind: "command",
+				rank,
+				id: `_command:${command.id}`,
+				title: command.label,
+				icon: command.icon ?? "carbon:chevron-right",
+				onActivate: () => {
+					commandStore.activateCommand(command);
+				}
+			};
+		}
+		const results = computed(() => {
+			const list = [...commandResults.value, ...titleResults.value];
+			const seen = {};
+			for (const r of titleResults.value) seen[r.id] = true;
+			for (const r of docsResults.value) if (!seen[r.id]) list.push(r);
+			return list.slice(0, MAX_RESULTS);
+		});
+		const { selectedIndex, selectNext, selectPrevious } = useSelection(results);
+		const router = useRouter();
+		onKeyboardShortcut(["enter"], () => {
+			const result = results.value[selectedIndex.value];
+			if (!result) return;
+			if ("route" in result) router.push(result.route);
+			if ("onActivate" in result) result.onActivate();
+			close();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", {
+				class: "poveste-search-pane flex items-center gap-4 pl-6 border border-transparent focus-visible:border-primary-500",
+				onClick: _cache[4] || (_cache[4] = ($event) => focused.value = true)
+			}, [createVNode(unref(Icon), {
+				icon: "carbon:search",
+				class: "flex-none w-4 h-4"
+			}), withDirectives(createElementVNode("input", {
+				ref_key: "input",
+				ref: input,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchInputText.value = $event),
+				placeholder: "Search for stories, variants...",
+				class: "bg-transparent w-full flex-1 pl-0 pr-6 py-4 outline-none",
+				onKeydown: [
+					_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => unref(selectNext)(), ["prevent"]), ["down"])),
+					_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(selectPrevious)(), ["prevent"]), ["up"])),
+					_cache[3] || (_cache[3] = withKeys(($event) => close(), ["escape"]))
+				]
+			}, null, 544), [[vModelText, searchInputText.value]])]), unref(rateLimitedSearch) && !results.value.length ? (openBlock(), createBlock(BaseEmpty_default, {
+				key: 0,
+				class: "no-animation"
+			}, {
+				default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode(" No results ", -1)])]),
+				_: 1
+			})) : results.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(results.value, (result, index) => {
+				return openBlock(), createBlock(SearchItem_default, {
+					key: result.id,
+					result,
+					selected: index === unref(selectedIndex),
+					onClose: _cache[5] || (_cache[5] = ($event) => close())
+				}, null, 8, ["result", "selected"]);
+			}), 128))])) : createCommentVNode("", true)], 64);
+		};
+	}
+});
+//#endregion
+export { SearchPane_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/search/search-docs-data.js

@@ -1,11 +1,9 @@
-import { searchData as searchData$1, onUpdate as onUpdate$1 } from "virtual:$poveste-search-docs-data";
 import { markRaw } from "@poveste/vendors/vue";
-"use strict";
-const searchData = markRaw(searchData$1);
+import { onUpdate as onUpdate$1, searchData as searchData$1 } from "virtual:$poveste-search-docs-data";
+//#region src/app/components/search/search-docs-data.ts
+var searchData = markRaw(searchData$1);
 function onUpdate(cb) {
-  onUpdate$1(cb);
+	onUpdate$1(cb);
 }
-export {
-  onUpdate,
-  searchData
-};
+//#endregion
+export { onUpdate, searchData };

package/dist/bundled/components/search/search-title-data.js

@@ -1,11 +1,9 @@
-import { searchData as searchData$1, onUpdate as onUpdate$1 } from "virtual:$poveste-search-title-data";
 import { markRaw } from "@poveste/vendors/vue";
-"use strict";
-const searchData = markRaw(searchData$1);
-function onUpdate(cb) {
-  onUpdate$1(cb);
+import { onUpdate, searchData } from "virtual:$poveste-search-title-data";
+//#region src/app/components/search/search-title-data.ts
+var searchData$1 = markRaw(searchData);
+function onUpdate$1(cb) {
+	onUpdate(cb);
 }
-export {
-  onUpdate,
-  searchData
-};
+//#endregion
+export { onUpdate$1 as onUpdate, searchData$1 as searchData };

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

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

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

@@ -0,0 +1,27 @@
+import { createBlock, createCommentVNode, defineComponent, markRaw, mergeProps, openBlock, ref, resolveDynamicComponent, watchEffect } from "@poveste/vendors/vue";
+import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
+var GenericMountStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "GenericMountStory",
+	props: { story: {} },
+	setup(__props) {
+		const props = __props;
+		const mountComponent = ref(null);
+		watchEffect(async () => {
+			const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId];
+			if (clientPlugin) {
+				const pluginModule = await clientPlugin();
+				mountComponent.value = markRaw(pluginModule.MountStory);
+			}
+		});
+		return (_ctx, _cache) => {
+			return mountComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(mountComponent.value), mergeProps({
+				key: 0,
+				class: "poveste-generic-mount-story histoire-generic-mount-story",
+				story: __props.story
+			}, _ctx.$attrs), null, 16, ["story"])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { GenericMountStory_vue_vue_type_script_setup_true_lang_default as default };

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

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

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

@@ -0,0 +1,30 @@
+import { createBlock, createCommentVNode, defineComponent, markRaw, mergeProps, openBlock, ref, resolveDynamicComponent, watchEffect } from "@poveste/vendors/vue";
+import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
+var GenericRenderStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "GenericRenderStory",
+	props: { story: {} },
+	setup(__props) {
+		const props = __props;
+		const mountComponent = ref(null);
+		watchEffect(async () => {
+			const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId];
+			if (clientPlugin) try {
+				const pluginModule = await clientPlugin();
+				mountComponent.value = markRaw(pluginModule.RenderStory);
+			} catch (e) {
+				console.error(e);
+				throw e;
+			}
+		});
+		return (_ctx, _cache) => {
+			return mountComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(mountComponent.value), mergeProps({
+				key: 0,
+				class: "poveste-generic-render-story __poveste-render-story histoire-generic-render-story __histoire-render-story",
+				story: __props.story
+			}, _ctx.$attrs), null, 16, ["story"])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { GenericRenderStory_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default from "./StoryResponsivePreview.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                       */
+//#region src/app/components/story/StoryResponsivePreview.vue
+var StoryResponsivePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ad57bd5e"]]);
+//#endregion
+export { StoryResponsivePreview_default as default };

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

@@ -0,0 +1,170 @@
+import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
+import CheckerboardPattern_default from "../misc/CheckerboardPattern.js";
+import HatchedPattern_default from "../misc/HatchedPattern.js";
+import { useEventListener } from "@poveste/vendors/vue-use";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createVNode, defineComponent, normalizeClass, onUnmounted, openBlock, ref, renderSlot, unref, useCssVars, withDirectives } from "@poveste/vendors/vue";
+import { VTooltip } from "@poveste/vendors/floating-vue";
+import { Icon } from "@poveste/vendors/iconify";
+//#region src/app/components/story/StoryResponsivePreview.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "poveste-story-responsive-preview w-full h-full flex-1 rounded-lg relative overflow-hidden" };
+var _hoisted_2 = {
+	key: 0,
+	class: "absolute inset-0 w-full h-full bg-gray-100 dark:bg-gray-750 rounded-r-lg border-l-2 border-gray-500/10 dark:border-gray-700/30 overflow-hidden"
+};
+var _hoisted_3 = {
+	class: "bind-preview-bg rounded-lg h-full",
+	"data-test-id": "responsive-preview-bg"
+};
+var _hoisted_4 = { class: "p-8 h-full relative" };
+var _hoisted_5 = { class: "w-full h-full relative" };
+var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryResponsivePreview",
+	props: { variant: {} },
+	setup(__props) {
+		useCssVars((_ctx) => ({ "v46972017": unref(settings).backgroundColor }));
+		const props = __props;
+		const settings = usePreviewSettingsStore().currentSettings;
+		const resizing = ref(false);
+		const onUnmountedCleanupFns = [];
+		onUnmounted(() => {
+			onUnmountedCleanupFns.forEach((fn) => fn());
+		});
+		function addWindowListener(event, listener) {
+			window.addEventListener(event, listener);
+			const removeListener = () => window.removeEventListener(event, listener);
+			onUnmountedCleanupFns.push(removeListener);
+			return () => {
+				removeListener();
+				onUnmountedCleanupFns.splice(onUnmountedCleanupFns.indexOf(removeListener), 1);
+			};
+		}
+		function useDragger(el, value, min, max, axis) {
+			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);
+				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 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;
+				}
+				function onMouseUp() {
+					removeListeners.forEach((fn) => fn());
+					resizing.value = false;
+				}
+			}
+			useEventListener(el, "mousedown", onMouseDown);
+			function onTouchStart(event) {
+				event.preventDefault();
+				event.stopPropagation();
+				const start = axis === "x" ? event.touches[0].clientX : event.touches[0].clientY;
+				const startValue = value.value;
+				resizing.value = true;
+				const removeListeners = [
+					addWindowListener("touchmove", onTouchMove),
+					addWindowListener("touchend", onTouchEnd),
+					addWindowListener("touchcancel", onTouchEnd)
+				];
+				function onTouchMove(event) {
+					const delta = (axis === "x" ? event.touches[0].clientX : event.touches[0].clientY) - start;
+					value.value = Math.max(min, Math.min(max, startValue + delta));
+				}
+				function onTouchEnd() {
+					removeListeners.forEach((fn) => fn());
+					resizing.value = false;
+				}
+			}
+			useEventListener(el, "touchstart", onTouchStart);
+		}
+		const responsiveWidth = computed({
+			get: () => settings[settings.rotate ? "responsiveHeight" : "responsiveWidth"],
+			set: (value) => {
+				settings[settings.rotate ? "responsiveHeight" : "responsiveWidth"] = value;
+			}
+		});
+		const responsiveHeight = computed({
+			get: () => settings[settings.rotate ? "responsiveWidth" : "responsiveHeight"],
+			set: (value) => {
+				settings[settings.rotate ? "responsiveWidth" : "responsiveHeight"] = value;
+			}
+		});
+		const horizontalDragger = ref();
+		const verticalDragger = ref();
+		const cornerDragger = ref();
+		const previewWrapper = ref();
+		useDragger(horizontalDragger, responsiveWidth, 32, 2e4, "x");
+		useDragger(verticalDragger, responsiveHeight, 32, 2e4, "y");
+		useDragger(cornerDragger, responsiveWidth, 32, 2e4, "x");
+		useDragger(cornerDragger, responsiveHeight, 32, 2e4, "y");
+		const finalWidth = computed(() => settings.rotate ? settings.responsiveHeight : settings.responsiveWidth);
+		const finalHeight = computed(() => settings.rotate ? settings.responsiveWidth : settings.responsiveHeight);
+		const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled);
+		const sizeTooltip = computed(() => `${responsiveWidth.value ?? "Auto"} × ${responsiveHeight.value ?? "Auto"}`);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [isResponsiveEnabled.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(HatchedPattern_default, { class: "w-full h-full text-black/[1%] dark:text-white/[1%]" })])) : createCommentVNode("", true), createElementVNode("div", {
+				ref_key: "previewWrapper",
+				ref: previewWrapper,
+				class: "h-full overflow-auto relative"
+			}, [createElementVNode("div", { class: normalizeClass(["overflow-hidden bg-white dark:bg-gray-700 rounded-lg relative", isResponsiveEnabled.value ? {
+				"w-fit": !!finalWidth.value,
+				"h-fit": !!finalHeight.value,
+				"h-full": !finalHeight.value
+			} : "h-full"]) }, [createElementVNode("div", _hoisted_3, [
+				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", _hoisted_4, [createElementVNode("div", _hoisted_5, [_cache[0] || (_cache[0] = createElementVNode("div", { class: "absolute inset-0" }, null, -1)), renderSlot(_ctx.$slots, "default", {
+					isResponsiveEnabled: isResponsiveEnabled.value,
+					finalWidth: finalWidth.value,
+					finalHeight: finalHeight.value,
+					resizing: resizing.value
+				}, void 0, true)]), _cache[1] || (_cache[1] = createStaticVNode("<div class=\"absolute top-5 left-8 h-2 w-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-ad57bd5e></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-ad57bd5e></div>", 8))]),
+				isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+					withDirectives((openBlock(), createElementBlock("div", {
+						ref_key: "horizontalDragger",
+						ref: horizontalDragger,
+						class: "absolute w-4 top-0 bottom-4 right-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ew-resize group hover:text-primary-500"
+					}, [createVNode(unref(Icon), {
+						icon: "mdi:drag-vertical-variant",
+						class: "w-4 h-4 opacity-20 group-hover:opacity-90"
+					})])), [[
+						unref(VTooltip),
+						sizeTooltip.value,
+						void 0,
+						{ right: true }
+					]]),
+					withDirectives((openBlock(), createElementBlock("div", {
+						ref_key: "verticalDragger",
+						ref: verticalDragger,
+						class: "absolute h-4 left-0 right-4 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ns-resize group hover:text-primary-500"
+					}, [createVNode(unref(Icon), {
+						icon: "mdi:drag-horizontal-variant",
+						class: "w-4 h-4 opacity-20 group-hover:opacity-90"
+					})])), [[
+						unref(VTooltip),
+						sizeTooltip.value,
+						void 0,
+						{ bottom: true }
+					]]),
+					withDirectives(createElementVNode("div", {
+						ref_key: "cornerDragger",
+						ref: cornerDragger,
+						class: "absolute w-4 h-4 right-0 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-nwse-resize group hover:text-primary-500"
+					}, null, 512), [[
+						unref(VTooltip),
+						sizeTooltip.value,
+						void 0,
+						{ bottom: true }
+					]])
+				], 64)) : createCommentVNode("", true)
+			])], 2)], 512)]);
+		};
+	}
+});
+//#endregion
+export { StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default as default };

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

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