@poveste/app 0.1.0

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

@@ -0,0 +1,207 @@
+import { defineComponent, useCssVars, unref, ref, onUnmounted, computed, createElementBlock, openBlock, createCommentVNode, createElementVNode, createVNode, normalizeClass, createBlock, createStaticVNode, renderSlot, Fragment, withDirectives } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import { useEventListener } from "@poveste/vendors/vue-use";
+import { VTooltip } from "@poveste/vendors/floating-vue";
+import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
+import CheckerboardPattern from "../misc/CheckerboardPattern.vue.js";
+import HatchedPattern from "../misc/HatchedPattern.vue.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-story-responsive-preview htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden" };
+const _hoisted_2 = {
+  key: 0,
+  class: "htw-absolute htw-inset-0 htw-w-full htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded-r-lg htw-border-l-2 htw-border-gray-500/10 dark:htw-border-gray-700/30 htw-overflow-hidden"
+};
+const _hoisted_3 = {
+  class: "bind-preview-bg htw-rounded-lg htw-h-full",
+  "data-test-id": "responsive-preview-bg"
+};
+const _hoisted_4 = { class: "htw-p-8 htw-h-full htw-relative" };
+const _hoisted_5 = { class: "htw-w-full htw-h-full htw-relative" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "StoryResponsivePreview",
+  props: {
+    variant: {}
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v5f6f4ee9": 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(event2) {
+          const snapTarget = axis === "x" ? previewWrapper.value.clientWidth : previewWrapper.value.clientHeight;
+          const delta = (axis === "x" ? event2.clientX : event2.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(event2) {
+          const delta = (axis === "x" ? event2.touches[0].clientX : event2.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, { class: "htw-w-full htw-h-full htw-text-black/[1%] dark:htw-text-white/[1%]" })
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          ref_key: "previewWrapper",
+          ref: previewWrapper,
+          class: "htw-h-full htw-overflow-auto htw-relative"
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(["htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700 htw-rounded-lg htw-relative", isResponsiveEnabled.value ? {
+              "htw-w-fit": !!finalWidth.value,
+              "htw-h-fit": !!finalHeight.value,
+              "htw-h-full": !finalHeight.value
+            } : "htw-h-full"])
+          }, [
+            createElementVNode("div", _hoisted_3, [
+              unref(settings).checkerboard ? (openBlock(), createBlock(CheckerboardPattern, {
+                key: 0,
+                class: "htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20"
+              })) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_4, [
+                createElementVNode("div", _hoisted_5, [
+                  _cache[0] || (_cache[0] = createElementVNode("div", { class: "htw-absolute htw-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="htw-absolute htw-top-5 htw-left-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-top-5 htw-right-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-bottom-5 htw-left-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-bottom-5 htw-right-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-left-5 htw-top-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-left-5 htw-bottom-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-right-5 htw-top-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-right-5 htw-bottom-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-18122333></div>', 8))
+              ]),
+              isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                withDirectives((openBlock(), createElementBlock("div", {
+                  ref_key: "horizontalDragger",
+                  ref: horizontalDragger,
+                  class: "htw-absolute htw-w-4 htw-top-0 htw-bottom-4 htw-right-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ew-resize htw-group hover:htw-text-primary-500"
+                }, [
+                  createVNode(unref(Icon), {
+                    icon: "mdi:drag-vertical-variant",
+                    class: "htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
+                  })
+                ])), [
+                  [
+                    unref(VTooltip),
+                    sizeTooltip.value,
+                    void 0,
+                    { right: true }
+                  ]
+                ]),
+                withDirectives((openBlock(), createElementBlock("div", {
+                  ref_key: "verticalDragger",
+                  ref: verticalDragger,
+                  class: "htw-absolute htw-h-4 htw-left-0 htw-right-4 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ns-resize htw-group hover:htw-text-primary-500"
+                }, [
+                  createVNode(unref(Icon), {
+                    icon: "mdi:drag-horizontal-variant",
+                    class: "htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
+                  })
+                ])), [
+                  [
+                    unref(VTooltip),
+                    sizeTooltip.value,
+                    void 0,
+                    { bottom: true }
+                  ]
+                ]),
+                withDirectives(createElementVNode("div", {
+                  ref_key: "cornerDragger",
+                  ref: cornerDragger,
+                  class: "htw-absolute htw-w-4 htw-h-4 htw-right-0 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-nwse-resize htw-group hover:htw-text-primary-500"
+                }, null, 512), [
+                  [
+                    unref(VTooltip),
+                    sizeTooltip.value,
+                    void 0,
+                    { bottom: true }
+                  ]
+                ])
+              ], 64)) : createCommentVNode("", true)
+            ])
+          ], 2)
+        ], 512)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,5 @@
+import _sfc_main from "./StoryVariantGrid.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,146 @@
+import { defineComponent, computed, ref, watch, onMounted, createElementBlock, openBlock, createCommentVNode, createElementVNode, unref, createVNode, createBlock, normalizeStyle, Fragment, renderList } from "@poveste/vendors/vue";
+import { useResizeObserver } from "@poveste/vendors/vue-use";
+import { useStoryStore } from "../../stores/story.js";
+import { isMobile } from "../../util/responsive.js";
+import "../toolbar/DevOnlyToolbarOpenInEditor.vue.js";
+import ToolbarBackground from "../toolbar/ToolbarBackground.vue.js";
+import "../toolbar/ToolbarTextDirection.vue.js";
+import StoryVariantGridItem from "./StoryVariantGridItem.vue.js";
+import _sfc_main$1 from "../toolbar/ToolbarTextDirection.vue2.js";
+import _sfc_main$2 from "../toolbar/DevOnlyToolbarOpenInEditor.vue2.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right" };
+const _hoisted_2 = {
+  key: 0,
+  class: "htw-flex-none htw-flex htw-items-center htw-justify-end htw-h-8 htw-mx-2 htw-mt-1"
+};
+const _hoisted_3 = { class: "htw-flex htw-w-0 htw-flex-1 htw-mx-4" };
+const margin = 16;
+const gap = 16;
+const _sfc_main = /* @__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, [
+        !unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(ToolbarBackground),
+          createVNode(_sfc_main$1),
+          _ctx.__HISTOIRE_DEV__ ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 0,
+            file: unref(storyStore).currentStory.file?.filePath,
+            tooltip: "Edit story in editor"
+          }, null, 8, ["file"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          ref_key: "el",
+          ref: el,
+          class: "htw-overflow-y-auto htw-flex htw-flex-1",
+          onScroll: _cache[0] || (_cache[0] = ($event) => updateMaxCount())
+        }, [
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", {
+              class: "htw-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: "htw-grid htw-gap-4 htw-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, {
+                    key: index,
+                    variant,
+                    story: unref(storyStore).currentStory,
+                    onResize: onItemResize
+                  }, null, 8, ["variant", "story"]);
+                }), 128))
+              ], 4)
+            ], 4)
+          ])
+        ], 544)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,8 @@
+import _sfc_main from "./StoryVariantGridItem.vue2.js";
+/* empty css                          */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+"use strict";
+const StoryVariantGridItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2cc73400"]]);
+export {
+  StoryVariantGridItem as default
+};

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

@@ -0,0 +1,153 @@
+import { defineComponent, useCssVars, unref, toRefs, ref, computed, resolveComponent, resolveDirective, createElementBlock, openBlock, createElementVNode, withDirectives, createBlock, normalizeClass, withCtx, createVNode, toDisplayString, withModifiers, createCommentVNode, normalizeStyle } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import { HstCopyIcon } from "@poveste/controls";
+import { useResizeObserver } from "@poveste/vendors/vue-use";
+import { useRouter } from "@poveste/vendors/vue-router";
+import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
+import { histoireConfig } from "../../util/config.js";
+import { isDark } from "../../util/dark.js";
+import { getSourceCode } from "../../util/docs.js";
+import { getContrastColor } from "../../util/preview-settings.js";
+import { useScrollOnActive } from "../../util/scroll.js";
+import { useCurrentVariantRoute } from "../../util/variant.js";
+import CheckerboardPattern from "../misc/CheckerboardPattern.vue.js";
+import "../toolbar/ToolbarNewTab.vue.js";
+import "./GenericRenderStory.vue.js";
+import _sfc_main$1 from "../toolbar/ToolbarNewTab.vue2.js";
+import _sfc_main$2 from "./GenericRenderStory.vue2.js";
+"use strict";
+const _hoisted_1 = { class: "htw-flex-none htw-flex htw-items-center" };
+const _hoisted_2 = { class: "htw-truncate htw-flex-1" };
+const _hoisted_3 = { class: "htw-flex-none htw-ml-auto htw-hidden group-hover:htw-flex htw-items-center" };
+const _sfc_main = /* @__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) => ({
+      "v2f48b1c5": unref(variant).iconColor,
+      "v19f135f4": unref(settings).backgroundColor
+    }));
+    const props = __props;
+    const emit = __emit;
+    const { variant } = toRefs(props);
+    const { isActive, targetRoute } = useCurrentVariantRoute(variant);
+    Object.assign(props.variant, {
+      previewReady: false
+    });
+    function onReady() {
+      Object.assign(props.variant, {
+        previewReady: 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 contrastColor = computed(() => getContrastColor(settings));
+    const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor);
+    return (_ctx, _cache) => {
+      const _component_RouterLink = resolveComponent("RouterLink");
+      const _directive_tooltip = resolveDirective("tooltip");
+      return openBlock(), createElementBlock("div", {
+        ref_key: "el",
+        ref: el,
+        class: "histoire-story-variant-grid-item htw-cursor-default htw-flex htw-flex-col htw-gap-y-1 htw-group"
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          withDirectives((openBlock(), createBlock(_component_RouterLink, {
+            to: unref(targetRoute),
+            class: normalizeClass(["htw-rounded htw-w-max htw-px-2 htw-py-0.5 htw-min-w-16 htw-cursor-pointer htw-flex htw-items-center htw-gap-1 htw-flex-shrink", {
+              "hover:htw-bg-gray-200 htw-text-gray-500 dark:hover:htw-bg-gray-800": !unref(isActive),
+              "htw-bg-primary-200 hover:htw-bg-primary-300 htw-text-primary-800 dark:htw-bg-primary-700 dark:hover:htw-bg-primary-800 dark:htw-text-primary-200": unref(isActive)
+            }])
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(Icon), {
+                icon: unref(variant).icon ?? "carbon:cube",
+                class: normalizeClass(["htw-w-4 htw-h-4 htw-opacity-50", {
+                  "htw-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(_sfc_main$1, {
+              variant: unref(variant),
+              story: __props.story
+            }, null, 8, ["variant", "story"])
+          ])
+        ]),
+        createElementVNode("div", {
+          class: normalizeClass(["htw-border htw-bg-white dark:htw-bg-gray-700 htw-rounded htw-flex-1 htw-p-4 htw-relative", {
+            "htw-border-gray-100 dark:htw-border-gray-800": !unref(isActive),
+            "htw-border-primary-200 dark:htw-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: "htw-absolute htw-inset-0 htw-rounded bind-preview-bg",
+            "data-test-id": "responsive-preview-bg"
+          }, null, -1)),
+          unref(settings).checkerboard ? (openBlock(), createBlock(CheckerboardPattern, {
+            key: 0,
+            class: "htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20"
+          })) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: "htw-relative htw-h-full",
+            style: normalizeStyle({
+              "--histoire-contrast-color": contrastColor.value,
+              "color": autoApplyContrastColor.value ? contrastColor.value : void 0
+            })
+          }, [
+            (openBlock(), createBlock(_sfc_main$2, {
+              key: `${__props.story.id}-${unref(variant).id}`,
+              variant: unref(variant),
+              story: __props.story,
+              dir: unref(settings).textDirection,
+              class: normalizeClass({
+                [unref(histoireConfig).theme.darkClass]: unref(isDark)
+              }),
+              onReady
+            }, null, 8, ["variant", "story", "dir", "class"]))
+          ], 4)
+        ], 34)
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,8 @@
+import _sfc_main from "./StoryVariantListItem.vue2.js";
+/* empty css                          */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+"use strict";
+const StoryVariantListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1b279b85"]]);
+export {
+  StoryVariantListItem as default
+};

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

@@ -0,0 +1,55 @@
+import { defineComponent, useCssVars, unref, toRefs, ref, createElementBlock, openBlock, createVNode, withCtx, createElementVNode, normalizeClass, toDisplayString } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import { useScrollOnActive } from "../../util/scroll.js";
+import { useCurrentVariantRoute } from "../../util/variant.js";
+import BaseListItemLink from "../base/BaseListItemLink.vue.js";
+"use strict";
+const _hoisted_1 = { class: "htw-truncate" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "StoryVariantListItem",
+  props: {
+    variant: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "ab2181a2": unref(variant).iconColor
+    }));
+    const props = __props;
+    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: "histoire-story-variant-list-item",
+        "data-test-id": "story-variant-list-item"
+      }, [
+        createVNode(BaseListItemLink, {
+          to: unref(targetRoute),
+          "is-active": unref(isActive),
+          class: "htw-px-2 htw-py-2 md:htw-py-1.5 htw-m-1 htw-rounded-sm htw-flex htw-items-center htw-gap-2"
+        }, {
+          default: withCtx(({ active }) => [
+            createVNode(unref(Icon), {
+              icon: unref(variant).icon ?? "carbon:cube",
+              class: normalizeClass(["htw-w-5 htw-h-5 sm:htw-w-4 sm:htw-h-4 htw-flex-none", {
+                "htw-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);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,8 @@
+import _sfc_main from "./StoryVariantSingle.vue2.js";
+/* empty css                        */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+"use strict";
+const StoryVariantSingle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c2a43485"]]);
+export {
+  StoryVariantSingle as default
+};