@poveste/app 0.2.0 → 0.3.0

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

@@ -0,0 +1,95 @@
+import { isMobile } from "../../util/responsive.js";
+import { useStoryStore } from "../../stores/story.js";
+import BaseSplitPane_default from "../base/BaseSplitPane.js";
+import { useLayoutStore } from "../../stores/layout.js";
+import BaseEmpty_default from "../base/BaseEmpty.js";
+import StoryDocs_default from "../panel/StoryDocs.js";
+import StorySidePanel_default from "../panel/StorySidePanel.js";
+import StoryViewer_default from "./StoryViewer.js";
+import { computed, createBlock, createElementBlock, createVNode, defineComponent, openBlock, ref, unref, watch, withCtx } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import { useRoute, useRouter } from "@poveste/vendors/vue-router";
+//#region src/app/components/story/StoryView.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "poveste-story-view poveste-with-story h-full"
+};
+var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryView",
+	setup(__props) {
+		const storyStore = useStoryStore();
+		const layoutStore = useLayoutStore();
+		const effectiveStoryOptionsVisible = computed(() => storyStore.currentStory?.meta?.storyOptions ?? layoutStore.settings.storyOptionsVisible);
+		const placement = computed(() => layoutStore.settings.storyOptionsPlacement);
+		const splitOrientation = computed(() => placement.value === "bottom" ? "portrait" : "landscape");
+		const splitDefaultSplit = computed(() => placement.value === "bottom" ? 60 : 75);
+		const router = useRouter();
+		const route = useRoute();
+		watch(() => storyStore.currentVariant, (value) => {
+			if (value) storyStore.currentStory.lastSelectedVariant = value;
+		}, { immediate: true });
+		watch(() => [storyStore.currentStory, storyStore.currentVariant], () => {
+			if (!storyStore.currentVariant) {
+				if (storyStore.currentStory?.lastSelectedVariant) {
+					setVariant(storyStore.currentStory.lastSelectedVariant.id);
+					return;
+				}
+				if (storyStore.currentStory?.variants.length === 1) setVariant(storyStore.currentStory.variants[0].id);
+			}
+		}, { immediate: true });
+		function setVariant(variantId) {
+			router.replace({
+				...route,
+				query: {
+					...route.query,
+					variantId
+				}
+			});
+		}
+		const docsOnlyScroller = ref(null);
+		function scrollDocsToTop() {
+			docsOnlyScroller.value?.scrollTo(0, 0);
+		}
+		return (_ctx, _cache) => {
+			return !unref(storyStore).currentStory ? (openBlock(), createBlock(BaseEmpty_default, {
+				key: 0,
+				class: "poveste-story-view poveste-no-story"
+			}, {
+				default: withCtx(() => [createVNode(unref(Icon), {
+					icon: "carbon:software-resource-resource",
+					class: "w-16 h-16 opacity-50"
+				})]),
+				_: 1
+			})) : (openBlock(), createElementBlock("div", _hoisted_1, [unref(storyStore).currentStory.docsOnly ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "docsOnlyScroller",
+				ref: docsOnlyScroller,
+				class: "h-full overflow-auto"
+			}, [createVNode(StoryDocs_default, {
+				story: unref(storyStore).currentStory,
+				standalone: "",
+				class: "md:p-12 w-full md:max-w-[600px] lg:max-w-[800px] xl:max-w-[900px]",
+				onScrollTop: _cache[0] || (_cache[0] = ($event) => scrollDocsToTop())
+			}, null, 8, ["story"])], 512)) : unref(isMobile) ? (openBlock(), createBlock(StoryViewer_default, { key: 1 })) : !effectiveStoryOptionsVisible.value ? (openBlock(), createBlock(StoryViewer_default, { key: 2 })) : (openBlock(), createBlock(BaseSplitPane_default, {
+				key: 3,
+				"save-id": `story-main-${placement.value}`,
+				orientation: splitOrientation.value,
+				min: 30,
+				max: 95,
+				"default-split": splitDefaultSplit.value,
+				"show-divider": false,
+				class: "h-full"
+			}, {
+				first: withCtx(() => [createVNode(StoryViewer_default)]),
+				last: withCtx(() => [createVNode(StorySidePanel_default)]),
+				_: 1
+			}, 8, [
+				"save-id",
+				"orientation",
+				"default-split"
+			]))]));
+		};
+	}
+});
+//#endregion
+export { StoryView_vue_vue_type_script_setup_true_lang_default as default };

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

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

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

@@ -0,0 +1,43 @@
+import { useStoryStore } from "../../stores/story.js";
+import MobileOverlay_default from "../app/MobileOverlay.js";
+import StoryVariantGrid_default from "./StoryVariantGrid.js";
+import StoryVariantListItem_default from "./StoryVariantListItem.js";
+import StoryVariantSingle_default from "./StoryVariantSingle.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, renderList, unref, useCssVars, watch, withCtx } from "@poveste/vendors/vue";
+//#region src/app/components/story/StoryViewer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "poveste-story-viewer bg-gray-50 h-full dark:bg-gray-750" };
+var StoryViewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryViewer",
+	setup(__props) {
+		useCssVars((_ctx) => ({ "v4fc4017e": variant.value?.iconColor }));
+		const storyStore = useStoryStore();
+		const variant = computed(() => storyStore.currentVariant);
+		const isMenuOpened = ref(false);
+		function closeMenu() {
+			isMenuOpened.value = false;
+		}
+		watch(variant, () => {
+			isMenuOpened.value = false;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1, [unref(storyStore).currentStory.layout.type === "grid" ? (openBlock(), createBlock(StoryVariantGrid_default, { key: 0 })) : unref(storyStore).currentStory.layout.type === "single" ? (openBlock(), createBlock(StoryVariantSingle_default, {
+				key: 1,
+				onOpenVariantMenu: _cache[0] || (_cache[0] = ($event) => isMenuOpened.value = true)
+			})) : createCommentVNode("", true)]), createVNode(MobileOverlay_default, {
+				title: "Select a variant",
+				opened: isMenuOpened.value,
+				onClose: closeMenu
+			}, {
+				default: withCtx(() => [(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))]),
+				_: 1
+			}, 8, ["opened"])], 64);
+		};
+	}
+});
+//#endregion
+export { StoryViewer_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,5 @@
+import DevOnlyToolbarOpenInEditor_vue_vue_type_script_setup_true_lang_default from "./DevOnlyToolbarOpenInEditor.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue
+var DevOnlyToolbarOpenInEditor_default = DevOnlyToolbarOpenInEditor_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DevOnlyToolbarOpenInEditor_default as default };

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

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

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

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

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

@@ -0,0 +1,109 @@
+import { povesteConfig } from "../../util/config.js";
+import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
+import BaseCheckbox_default from "../base/BaseCheckbox.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, resolveComponent, resolveDirective, toDisplayString, unref, useCssVars, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+//#region src/app/components/toolbar/ToolbarBackground.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors group" };
+var _hoisted_2 = {
+	class: "flex flex-col items-stretch",
+	"data-test-id": "background-popper"
+};
+var _hoisted_3 = {
+	key: 0,
+	class: "flex items-stretch gap-1 px-2 pt-2",
+	"data-test-id": "sandbox-color-scheme"
+};
+var _hoisted_4 = ["data-test-id", "onClick"];
+var _hoisted_5 = ["onClick"];
+var _hoisted_6 = { class: "mr-auto" };
+var _hoisted_7 = { class: "ml-auto opacity-70" };
+var _hoisted_8 = { key: 0 };
+var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ToolbarBackground",
+	setup(__props) {
+		useCssVars((_ctx) => ({
+			"v37e53e34": unref(settings).backgroundColor,
+			"eaa47ed2": _ctx.contrastColor
+		}));
+		const previewSettings = usePreviewSettingsStore();
+		const settings = previewSettings.currentSettings;
+		const colorSchemeOptions = [
+			{
+				value: "auto",
+				label: "System",
+				icon: "carbon:screen"
+			},
+			{
+				value: "light",
+				label: "Light",
+				icon: "carbon:sun"
+			},
+			{
+				value: "dark",
+				label: "Dark",
+				icon: "carbon:moon"
+			}
+		];
+		const showColorScheme = !povesteConfig.theme.hideColorSchemeSwitch;
+		const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets.length;
+		return (_ctx, _cache) => {
+			const _component_VDropdown = resolveComponent("VDropdown");
+			const _directive_tooltip = resolveDirective("tooltip");
+			return unref(showDropdown) ? (openBlock(), createBlock(_component_VDropdown, {
+				key: 0,
+				placement: "bottom-end",
+				skidding: 6,
+				class: "poveste-toolbar-background flex-none",
+				"data-test-id": "toolbar-background"
+			}, {
+				default: withCtx(({ shown }) => [withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(Icon), {
+					icon: "carbon:color-palette",
+					class: "w-4 h-4"
+				}), createVNode(unref(Icon), {
+					icon: "carbon:chevron-down",
+					class: "w-3 h-3 opacity-40 group-hover:opacity-70"
+				})])), [[_directive_tooltip, shown ? "" : "Preview appearance"]])]),
+				popper: withCtx(({ hide }) => [createElementVNode("div", _hoisted_2, [
+					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}`,
+							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), {
+							icon: option.icon,
+							class: "w-4 h-4"
+						}, null, 8, ["icon"]), createElementVNode("span", null, toDisplayString(option.label), 1)], 10, _hoisted_4);
+					}), 64))])) : createCommentVNode("", true),
+					createVNode(BaseCheckbox_default, {
+						modelValue: unref(settings).checkerboard,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(settings).checkerboard = $event)
+					}, {
+						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode(" Checkerboard ", -1)])]),
+						_: 1
+					}, 8, ["modelValue"]),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(povesteConfig).backgroundPresets, (option, index) => {
+						return openBlock(), createElementBlock("button", {
+							key: index,
+							class: normalizeClass(["px-4 py-3 cursor-pointer text-left flex items-baseline gap-4", [unref(settings).backgroundColor === option.color ? "bg-primary-500 hover:bg-primary-600 text-white dark:text-black" : "bg-transparent hover:bg-primary-100 dark:hover:bg-primary-700"]]),
+							onClick: ($event) => {
+								unref(previewSettings).setBackgroundColor(option.color);
+								hide();
+							}
+						}, [createElementVNode("span", _hoisted_6, toDisplayString(option.label), 1), option.color !== "$checkerboard" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_7, toDisplayString(option.color), 1), createElementVNode("div", {
+							class: "w-4 h-4 rounded-full border border-black/20 dark:border-white/20 flex items-center justify-center text-xs",
+							style: normalizeStyle({
+								backgroundColor: option.color,
+								color: option.contrastColor
+							})
+						}, [option.contrastColor ? (openBlock(), createElementBlock("span", _hoisted_8, "a")) : createCommentVNode("", true)], 4)], 64)) : createCommentVNode("", true)], 10, _hoisted_5);
+					}), 128))
+				])]),
+				_: 1
+			})) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { ToolbarBackground_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,5 @@
+import ToolbarNewTab_vue_vue_type_script_setup_true_lang_default from "./ToolbarNewTab.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/toolbar/ToolbarNewTab.vue
+var ToolbarNewTab_default = ToolbarNewTab_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ToolbarNewTab_default as default };

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

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

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

@@ -0,0 +1,5 @@
+import ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default from "./ToolbarResponsiveSize.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/toolbar/ToolbarResponsiveSize.vue
+var ToolbarResponsiveSize_default = ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ToolbarResponsiveSize_default as default };

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

@@ -0,0 +1,93 @@
+import { povesteConfig } from "../../util/config.js";
+import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
+import BaseCheckbox_default from "../base/BaseCheckbox.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, resolveComponent, resolveDirective, toDisplayString, unref, vModelText, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+//#region src/app/components/toolbar/ToolbarResponsiveSize.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col items-stretch" };
+var _hoisted_2 = { class: "flex items-center gap-2 px-4 py-3" };
+var _hoisted_3 = ["onClick"];
+var _hoisted_4 = { class: "ml-auto opacity-70 flex gap-1" };
+var _hoisted_5 = { key: 0 };
+var _hoisted_6 = { key: 0 };
+var _hoisted_7 = { key: 1 };
+var _hoisted_8 = { key: 2 };
+var _hoisted_9 = { key: 0 };
+var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ToolbarResponsiveSize",
+	setup(__props) {
+		const settings = usePreviewSettingsStore().currentSettings;
+		return (_ctx, _cache) => {
+			const _component_VDropdown = resolveComponent("VDropdown");
+			const _directive_tooltip = resolveDirective("tooltip");
+			return openBlock(), createBlock(_component_VDropdown, {
+				placement: "bottom-end",
+				skidding: 6,
+				disabled: !unref(povesteConfig).responsivePresets?.length,
+				class: "poveste-toolbar-responsive-size flex-none"
+			}, {
+				popper: withCtx(({ hide }) => [createElementVNode("div", _hoisted_1, [
+					createVNode(BaseCheckbox_default, {
+						modelValue: unref(settings).rotate,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(settings).rotate = $event)
+					}, {
+						default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Rotate ", -1)])]),
+						_: 1
+					}, 8, ["modelValue"]),
+					createElementVNode("div", _hoisted_2, [
+						withDirectives(createElementVNode("input", {
+							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(settings).responsiveWidth = $event),
+							type: "number",
+							class: "bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0",
+							step: "16",
+							placeholder: "Auto"
+						}, null, 512), [[
+							vModelText,
+							unref(settings).responsiveWidth,
+							void 0,
+							{ number: true }
+						], [_directive_tooltip, "Responsive width (px)"]]),
+						_cache[4] || (_cache[4] = createElementVNode("span", { class: "opacity-50" }, "×", -1)),
+						withDirectives(createElementVNode("input", {
+							"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(settings).responsiveHeight = $event),
+							type: "number",
+							class: "bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0",
+							step: "16",
+							placeholder: "Auto"
+						}, null, 512), [[
+							vModelText,
+							unref(settings).responsiveHeight,
+							void 0,
+							{ number: true }
+						], [_directive_tooltip, "Responsive height (px)"]])
+					]),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(povesteConfig).responsivePresets, (preset, index) => {
+						return openBlock(), createElementBlock("button", {
+							key: index,
+							class: normalizeClass(["px-4 py-3 cursor-pointer text-left flex gap-4", [unref(settings).responsiveWidth === preset.width && unref(settings).responsiveHeight === preset.height ? "bg-primary-500 hover:bg-primary-600 text-white dark:text-black" : "bg-transparent hover:bg-primary-100 dark:hover:bg-primary-700"]]),
+							onClick: ($event) => {
+								unref(settings).responsiveWidth = preset.width;
+								unref(settings).responsiveHeight = preset.height;
+								hide();
+							}
+						}, [createTextVNode(toDisplayString(preset.label) + " ", 1), createElementVNode("span", _hoisted_4, [
+							preset.width ? (openBlock(), createElementBlock("span", _hoisted_5, [createTextVNode(toDisplayString(preset.width), 1), !preset.height ? (openBlock(), createElementBlock("span", _hoisted_6, "px")) : createCommentVNode("", true)])) : createCommentVNode("", true),
+							preset.width && preset.height ? (openBlock(), createElementBlock("span", _hoisted_7, "x")) : createCommentVNode("", true),
+							preset.height ? (openBlock(), createElementBlock("span", _hoisted_8, [createTextVNode(toDisplayString(preset.height), 1), !preset.width ? (openBlock(), createElementBlock("span", _hoisted_9, "px")) : createCommentVNode("", true)])) : createCommentVNode("", true)
+						])], 10, _hoisted_3);
+					}), 128))
+				])]),
+				default: withCtx(() => [withDirectives((openBlock(), createElementBlock("div", { class: normalizeClass(["flex items-center gap-1 px-2.5 py-1.5 text-gray-900 dark:text-gray-100 transition-colors group", { "hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer": unref(povesteConfig).responsivePresets?.length }]) }, [createVNode(unref(Icon), {
+					icon: "carbon:devices",
+					class: "w-4 h-4"
+				}), createVNode(unref(Icon), {
+					icon: "carbon:chevron-down",
+					class: "w-3 h-3 opacity-40 group-hover:opacity-70"
+				})], 2)), [[_directive_tooltip, "Responsive sizes"]])]),
+				_: 1
+			}, 8, ["disabled"]);
+		};
+	}
+});
+//#endregion
+export { ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,5 @@
+import ToolbarTextDirection_vue_vue_type_script_setup_true_lang_default from "./ToolbarTextDirection.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/toolbar/ToolbarTextDirection.vue
+var ToolbarTextDirection_default = ToolbarTextDirection_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ToolbarTextDirection_default as default };

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, useCssVars } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+//#region src/app/components/toolbar/ToolbarTitle.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "poveste-toolbar-title flex items-center gap-2 min-w-0" };
+var _hoisted_2 = { class: "flex flex-col justify-center min-w-0 leading-tight text-center h-[2.25rem]" };
+var _hoisted_3 = { class: "truncate text-sm font-medium text-gray-900 dark:text-gray-100" };
+var _hoisted_4 = {
+	key: 0,
+	class: "truncate text-xs text-gray-500 dark:text-gray-400"
+};
+var ToolbarTitle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ToolbarTitle",
+	props: {
+		variant: {},
+		story: {}
+	},
+	setup(__props) {
+		useCssVars((_ctx) => ({ "b5fb8c94": iconColor.value }));
+		const props = __props;
+		const icon = computed(() => props.variant?.icon ?? props.story?.icon ?? "carbon:cube");
+		const iconColor = computed(() => props.variant?.iconColor ?? props.story?.iconColor);
+		const title = computed(() => props.variant?.title ?? props.story?.title ?? "");
+		const subtitle = computed(() => {
+			if (props.variant && props.story && props.story.title !== props.variant.title) return props.story.title;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(Icon), {
+				icon: icon.value,
+				class: normalizeClass(["w-4 h-4 flex-none", [iconColor.value ? "bind-icon-color" : "text-gray-500 dark:text-gray-400"]])
+			}, null, 8, ["icon", "class"]), createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(title.value), 1), subtitle.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(subtitle.value), 1)) : createCommentVNode("", true)])]);
+		};
+	}
+});
+//#endregion
+export { ToolbarTitle_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,5 @@
+import StoryGroup_vue_vue_type_script_setup_true_lang_default from "./StoryGroup.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/tree/StoryGroup.vue
+var StoryGroup_default = StoryGroup_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { StoryGroup_default as default };

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

@@ -0,0 +1,59 @@
+import { useFolderStore } from "../../stores/folder.js";
+import StoryListItem_default from "./StoryListItem.js";
+import StoryListFolder_default from "./StoryListFolder.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withKeys } from "@poveste/vendors/vue";
+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",
+	class: "poveste-story-group my-2 first:mt-0 last:mb-0 group"
+};
+var _hoisted_2 = { class: "truncate" };
+var _hoisted_3 = { key: 1 };
+var StoryGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryGroup",
+	props: {
+		path: { default: () => [] },
+		group: {},
+		stories: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const folderStore = useFolderStore();
+		const folderPath = computed(() => [...props.path, props.group.title]);
+		const isFolderOpen = computed(() => folderStore.isFolderOpened(folderPath.value, true));
+		function toggleOpen() {
+			folderStore.toggleFolder(folderPath.value, false);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [__props.group.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[0] || (_cache[0] = createElementVNode("div", { class: "h-[1px] bg-gray-500/10 mx-6 mb-2 group-first:hidden" }, null, -1)), createElementVNode("div", {
+				role: "button",
+				tabindex: "0",
+				class: "px-0.5 py-2 md:py-1.5 mx-1 rounded-sm hover:bg-primary-100 dark:hover:bg-primary-900 cursor-pointer select-none flex items-center gap-2 min-w-0 opacity-50 hover:opacity-100",
+				onClick: toggleOpen,
+				onKeyup: [withKeys(toggleOpen, ["enter"]), withKeys(toggleOpen, ["space"])]
+			}, [createVNode(unref(Icon), {
+				icon: isFolderOpen.value ? "ri:subtract-line" : "ri:add-line",
+				class: "w-4 h-4 ml-4 rounded-sm border border-gray-500/40"
+			}, null, 8, ["icon"]), createElementVNode("span", _hoisted_2, toDisplayString(__props.group.title), 1)], 32)], 64)) : createCommentVNode("", true), isFolderOpen.value ? (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.group.children, (element) => {
+				return openBlock(), createElementBlock(Fragment, { key: element.title }, [element.children ? (openBlock(), createBlock(StoryListFolder_default, {
+					key: 0,
+					path: folderPath.value,
+					folder: element,
+					stories: __props.stories,
+					depth: 0
+				}, null, 8, [
+					"path",
+					"folder",
+					"stories"
+				])) : (openBlock(), createBlock(StoryListItem_default, {
+					key: 1,
+					story: __props.stories[element.index],
+					depth: 0
+				}, null, 8, ["story"]))], 64);
+			}), 128))])) : createCommentVNode("", true)]);
+		};
+	}
+});
+//#endregion
+export { StoryGroup_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/tree/StoryList.js

@@ -0,0 +1,5 @@
+import StoryList_vue_vue_type_script_setup_true_lang_default from "./StoryList.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/tree/StoryList.vue
+var StoryList_default = StoryList_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { StoryList_default as default };

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

@@ -0,0 +1,33 @@
+import StoryListItem_default from "./StoryListItem.js";
+import StoryListFolder_default from "./StoryListFolder.js";
+import StoryGroup_default from "./StoryGroup.js";
+import { Fragment, createBlock, createElementBlock, defineComponent, openBlock, renderList } from "@poveste/vendors/vue";
+//#region src/app/components/tree/StoryList.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "poveste-story-list overflow-y-auto" };
+var StoryList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryList",
+	props: {
+		tree: {},
+		stories: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.tree, (element) => {
+				return openBlock(), createElementBlock(Fragment, { key: element.title }, [element.group ? (openBlock(), createBlock(StoryGroup_default, {
+					key: 0,
+					group: element,
+					stories: __props.stories
+				}, null, 8, ["group", "stories"])) : element.children ? (openBlock(), createBlock(StoryListFolder_default, {
+					key: 1,
+					folder: element,
+					stories: __props.stories
+				}, null, 8, ["folder", "stories"])) : (openBlock(), createBlock(StoryListItem_default, {
+					key: 2,
+					story: __props.stories[element.index]
+				}, null, 8, ["story"]))], 64);
+			}), 128))]);
+		};
+	}
+});
+//#endregion
+export { StoryList_vue_vue_type_script_setup_true_lang_default as default };

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

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