@poveste/app 0.1.2 → 0.2.0

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

@@ -2,7 +2,7 @@ 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-a3dc7302"]]);
+const StoryVariantGridItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-42097cb5"]]);
 export {
   StoryVariantGridItem as default
 };

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

@@ -4,8 +4,8 @@ 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 { usePreviewDark } from "../../util/color-scheme.js";
 import { povesteConfig } 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";
@@ -13,12 +13,14 @@ import { useCurrentVariantRoute } from "../../util/variant.js";
 import CheckerboardPattern from "../misc/CheckerboardPattern.vue.js";
 import "../toolbar/ToolbarNewTab.vue.js";
 import "./GenericRenderStory.vue.js";
+import "./StoryVariantSinglePreviewRemote.vue.js";
 import _sfc_main$1 from "../toolbar/ToolbarNewTab.vue2.js";
-import _sfc_main$2 from "./GenericRenderStory.vue2.js";
+import _sfc_main$2 from "./StoryVariantSinglePreviewRemote.vue2.js";
+import _sfc_main$3 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 _hoisted_1 = { class: "ptw-flex-none ptw-flex ptw-items-center" };
+const _hoisted_2 = { class: "ptw-truncate ptw-flex-1" };
+const _hoisted_3 = { class: "ptw-flex-none ptw-ml-auto ptw-hidden group-hover:ptw-flex ptw-items-center" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StoryVariantGridItem",
   props: {
@@ -36,8 +38,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v70ef7b9c": unref(variant).iconColor,
-      "v960da962": unref(settings).backgroundColor
+      "v087cd7b6": unref(variant).iconColor,
+      "v6d9d16a6": unref(settings).backgroundColor
     }));
     const props = __props;
     const emit = __emit;
@@ -66,29 +68,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     const settings = usePreviewSettingsStore().currentSettings;
+    const previewDark = usePreviewDark(settings);
     const contrastColor = computed(() => getContrastColor(settings));
     const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastColor);
+    const useIframe = computed(() => {
+      const layout = props.story.layout;
+      if (layout?.type === "grid" && layout.iframeGrid !== void 0) {
+        return layout.iframeGrid;
+      }
+      return povesteConfig.isolateStyles !== false;
+    });
     return (_ctx, _cache) => {
       const _component_RouterLink = resolveComponent("RouterLink");
       const _directive_tooltip = resolveDirective("tooltip");
       return openBlock(), createElementBlock("div", {
         ref_key: "el",
         ref: el,
-        class: "poveste-story-variant-grid-item htw-cursor-default htw-flex htw-flex-col htw-gap-y-1 htw-group"
+        class: "poveste-story-variant-grid-item ptw-cursor-default ptw-flex ptw-flex-col ptw-gap-y-1 ptw-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)
+            class: normalizeClass(["ptw-rounded ptw-w-max ptw-px-2 ptw-py-0.5 ptw-min-w-16 ptw-cursor-pointer ptw-flex ptw-items-center ptw-gap-1 ptw-flex-shrink", {
+              "hover:ptw-bg-gray-200 ptw-text-gray-500 dark:hover:ptw-bg-gray-800": !unref(isActive),
+              "ptw-bg-primary-200 hover:ptw-bg-primary-300 ptw-text-primary-800 dark:ptw-bg-primary-700 dark:hover:ptw-bg-primary-800 dark:ptw-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,
+                class: normalizeClass(["ptw-w-4 ptw-h-4 ptw-opacity-50", {
+                  "ptw-text-gray-500": !unref(isActive) && !unref(variant).iconColor,
                   "bind-icon-color": !unref(isActive) && unref(variant).iconColor
                 }])
               }, null, 8, ["icon", "class"]),
@@ -109,24 +119,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         ]),
         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)
+          class: normalizeClass(["ptw-border ptw-bg-white dark:ptw-bg-gray-700 ptw-rounded ptw-flex-1 ptw-p-4 ptw-relative", {
+            "ptw-border-gray-100 dark:ptw-border-gray-800": !unref(isActive),
+            "ptw-border-primary-200 dark:ptw-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",
+            class: "ptw-absolute ptw-inset-0 ptw-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"
+            class: "ptw-absolute ptw-inset-0 ptw-w-full ptw-h-full ptw-text-gray-500/20"
           })) : createCommentVNode("", true),
           createElementVNode("div", {
-            class: "htw-relative htw-h-full",
+            class: "ptw-relative ptw-h-full",
             style: normalizeStyle({
               "--poveste-contrast-color": contrastColor.value,
               // Deprecated alias — keep so stories referencing `var(--histoire-contrast-color)` still work.
@@ -134,13 +144,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "color": autoApplyContrastColor.value ? contrastColor.value : void 0
             })
           }, [
-            (openBlock(), createBlock(_sfc_main$2, {
+            useIframe.value ? (openBlock(), createBlock(_sfc_main$2, {
+              key: `iframe-${__props.story.id}-${unref(variant).id}`,
+              story: __props.story,
+              variant: unref(variant),
+              "auto-height": ""
+            }, null, 8, ["story", "variant"])) : (openBlock(), createBlock(_sfc_main$3, {
               key: `${__props.story.id}-${unref(variant).id}`,
               variant: unref(variant),
               story: __props.story,
               dir: unref(settings).textDirection,
               class: normalizeClass({
-                [unref(povesteConfig).theme.darkClass]: unref(isDark)
+                [unref(povesteConfig).theme.darkClass]: unref(previewDark)
               }),
               onReady
             }, null, 8, ["variant", "story", "dir", "class"]))

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

@@ -2,7 +2,7 @@ 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-e7e8e2de"]]);
+const StoryVariantListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-363b3d4f"]]);
 export {
   StoryVariantListItem as default
 };

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

@@ -4,7 +4,7 @@ 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 _hoisted_1 = { class: "ptw-truncate" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StoryVariantListItem",
   props: {
@@ -15,7 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v6ef859d8": unref(variant).iconColor
+      "v3223e976": unref(variant).iconColor
     }));
     const props = __props;
     const { variant } = toRefs(props);
@@ -32,13 +32,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         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"
+          class: "ptw-px-2 ptw-py-2 md:ptw-py-1.5 ptw-m-1 ptw-rounded-sm ptw-flex ptw-items-center ptw-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,
+              class: normalizeClass(["ptw-w-5 ptw-h-5 sm:ptw-w-4 sm:ptw-h-4 ptw-flex-none", {
+                "ptw-text-gray-500": !active && !unref(variant).iconColor,
                 "bind-icon-color": !active && unref(variant).iconColor
               }])
             }, null, 8, ["icon", "class"]),

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

@@ -2,7 +2,7 @@ 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-b675426a"]]);
+const StoryVariantSingle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ca14569e"]]);
 export {
   StoryVariantSingle as default
 };

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

@@ -9,20 +9,20 @@ import _sfc_main$1 from "./StoryVariantSingleView.vue2.js";
 "use strict";
 const _hoisted_1 = {
   key: 0,
-  class: "poveste-story-variant-single htw-p-2 htw-h-full __poveste-pane-shadow-from-right"
+  class: "poveste-story-variant-single ptw-p-2 ptw-h-full __poveste-pane-shadow-from-right"
 };
 const _hoisted_2 = {
   key: 0,
-  class: "htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-800 htw-h-full htw-flex htw-flex-col"
+  class: "ptw-divide-y ptw-divide-gray-100 dark:ptw-divide-gray-800 ptw-h-full ptw-flex ptw-flex-col"
 };
 const _hoisted_3 = {
   key: 0,
-  class: "htw-p-2 htw-h-full"
+  class: "ptw-p-2 ptw-h-full"
 };
-const _hoisted_4 = { class: "htw-h-full htw-overflow-y-auto" };
+const _hoisted_4 = { class: "ptw-h-full ptw-overflow-y-auto" };
 const _hoisted_5 = {
   key: 0,
-  class: "htw-p-2 htw-h-full __poveste-pane-shadow-from-right"
+  class: "ptw-p-2 ptw-h-full __poveste-pane-shadow-from-right"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StoryVariantSingle",
@@ -31,7 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v5162df32": variant.value?.iconColor
+      "fcfb0a0c": variant.value?.iconColor
     }));
     const storyStore = useStoryStore();
     const hasSingleVariant = computed(() => storyStore.currentStory?.variants.length === 1);
@@ -45,14 +45,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
         unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2, [
           createElementVNode("a", {
-            class: "htw-px-6 htw-h-12 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-flex htw-gap-2 htw-flex-wrap htw-w-full htw-items-center htw-flex-none",
+            class: "ptw-px-6 ptw-h-12 hover:ptw-text-primary-500 dark:hover:ptw-text-primary-400 ptw-cursor-pointer ptw-flex ptw-gap-2 ptw-flex-wrap ptw-w-full ptw-items-center ptw-flex-none",
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("openVariantMenu"))
           }, [
             variant.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
               createVNode(unref(Icon), {
                 icon: variant.value.icon ?? "carbon:cube",
-                class: normalizeClass(["htw-w-5 htw-h-5 htw-flex-none", {
-                  "htw-text-gray-500": !variant.value.iconColor,
+                class: normalizeClass(["ptw-w-5 ptw-h-5 ptw-flex-none", {
+                  "ptw-text-gray-500": !variant.value.iconColor,
                   "bind-icon-color": variant.value.iconColor
                 }])
               }, null, 8, ["icon", "class"]),
@@ -62,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ], 64)),
             createVNode(unref(Icon), {
               icon: "carbon:chevron-sort",
-              class: "htw-w-5 htw-h-5 htw-shrink-0 htw-ml-auto"
+              class: "ptw-w-5 ptw-h-5 ptw-shrink-0 ptw-ml-auto"
             })
           ]),
           unref(storyStore).currentVariant ? (openBlock(), createElementBlock("div", _hoisted_3, [

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

@@ -1,7 +1,7 @@
 import { defineComponent, computed, createBlock, openBlock, withCtx, createElementVNode, normalizeStyle, unref, normalizeClass } from "@poveste/vendors/vue";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
+import { usePreviewDark } from "../../util/color-scheme.js";
 import { povesteConfig } from "../../util/config.js";
-import { isDark } from "../../util/dark.js";
 import { getContrastColor } from "../../util/preview-settings.js";
 import "./GenericRenderStory.vue.js";
 import StoryResponsivePreview from "./StoryResponsivePreview.vue.js";
@@ -24,6 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     }
     const settings = usePreviewSettingsStore().currentSettings;
+    const previewDark = usePreviewDark(settings);
     const contrastColor = computed(() => getContrastColor(settings));
     const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastColor);
     return (_ctx, _cache) => {
@@ -45,17 +46,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "color": autoApplyContrastColor.value ? contrastColor.value : void 0
               }
             ]),
-            class: "htw-relative",
+            class: "ptw-relative",
             "data-test-id": "sandbox-render"
           }, [
             (openBlock(), createBlock(_sfc_main$1, {
               key: `${__props.story.id}-${__props.variant.id}`,
               variant: __props.variant,
               story: __props.story,
-              class: normalizeClass(["htw-h-full", {
-                [unref(povesteConfig).sandboxDarkClass]: unref(isDark),
+              class: normalizeClass(["ptw-h-full", {
+                [unref(povesteConfig).sandboxDarkClass]: unref(previewDark),
                 // @TODO remove
-                [unref(povesteConfig).theme.darkClass]: unref(isDark)
+                [unref(povesteConfig).theme.darkClass]: unref(previewDark)
               }]),
               dir: unref(settings).textDirection,
               onReady

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

@@ -1,9 +1,10 @@
-import { defineComponent, ref, watch, computed, createBlock, openBlock, withCtx, createElementVNode, normalizeStyle, normalizeClass, toRaw } from "@poveste/vendors/vue";
+import { defineComponent, ref, watch, computed, onBeforeUnmount, createBlock, openBlock, withCtx, createElementVNode, normalizeStyle, normalizeClass, toRaw } from "@poveste/vendors/vue";
 import { applyState } from "@poveste/shared";
 import { useEventListener } from "@poveste/vendors/vue-use";
 import { useEventsStore } from "../../stores/events.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
-import { SANDBOX_READY, EVENT_SEND, STATE_SYNC, PREVIEW_SETTINGS_SYNC } from "../../util/const.js";
+import { SANDBOX_HEIGHT, SANDBOX_READY, EVENT_SEND, STATE_SYNC, PREVIEW_SETTINGS_SYNC } from "../../util/const.js";
+import { trackWindow } from "../../util/keyboard.js";
 import { getSandboxUrl } from "../../util/sandbox.js";
 import { toRawDeep } from "../../util/state.js";
 import StoryResponsivePreview from "./StoryResponsivePreview.vue.js";
@@ -13,7 +14,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StoryVariantSinglePreviewRemote",
   props: {
     story: {},
-    variant: {}
+    variant: {},
+    autoHeight: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -41,8 +43,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     Object.assign(props.variant, {
       previewReady: false
     });
+    const reportedHeight = ref(null);
     useEventListener(window, "message", (event) => {
-      switch (event.data.type) {
+      if (event.source !== iframe.value?.contentWindow) return;
+      switch (event.data?.type) {
         case STATE_SYNC:
           updateVariantState(event.data.state);
           break;
@@ -52,6 +56,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         case SANDBOX_READY:
           setPreviewReady();
           break;
+        case SANDBOX_HEIGHT:
+          if (typeof event.data.h === "number") {
+            const next = Math.max(40, event.data.h);
+            if (next !== reportedHeight.value) reportedHeight.value = next;
+          }
+          break;
       }
     });
     function updateVariantState(state) {
@@ -71,11 +81,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return getSandboxUrl(props.story, props.variant);
     });
     const isIframeLoaded = ref(false);
+    let stopTrackKeyboard;
+    let unmounted = false;
     watch(sandboxUrl, () => {
       isIframeLoaded.value = false;
       Object.assign(props.variant, {
         previewReady: false
       });
+      stopTrackKeyboard?.();
+      stopTrackKeyboard = void 0;
+    });
+    onBeforeUnmount(() => {
+      unmounted = true;
+      stopTrackKeyboard?.();
     });
     function syncSettings() {
       if (iframe.value) {
@@ -92,9 +110,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       immediate: true
     });
     function onIframeLoad() {
+      if (unmounted) {
+        return;
+      }
       isIframeLoaded.value = true;
       syncState();
       syncSettings();
+      stopTrackKeyboard?.();
+      if (iframe.value?.contentWindow) {
+        stopTrackKeyboard = trackWindow(iframe.value.contentWindow);
+      }
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(StoryResponsivePreview, {
@@ -106,14 +131,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ref_key: "iframe",
             ref: iframe,
             src: sandboxUrl.value,
-            class: normalizeClass(["htw-w-full htw-h-full htw-relative", {
-              "htw-invisible": !isIframeLoaded.value,
-              "htw-pointer-events-none": resizing
+            class: normalizeClass(["ptw-w-full ptw-h-full ptw-relative", {
+              "ptw-invisible": !isIframeLoaded.value,
+              "ptw-pointer-events-none": resizing
             }]),
             style: normalizeStyle(isResponsiveEnabled ? {
               width: finalWidth ? `${finalWidth}px` : null,
               height: finalHeight ? `${finalHeight}px` : null
-            } : void 0),
+            } : props.autoHeight && reportedHeight.value ? { height: `${reportedHeight.value}px` } : void 0),
             "data-test-id": "preview-iframe",
             onLoad: _cache[0] || (_cache[0] = ($event) => onIframeLoad())
           }, null, 46, _hoisted_1)

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

@@ -1,29 +1,13 @@
-import { defineComponent, createElementBlock, openBlock, createCommentVNode, createBlock, unref, createVNode } from "@poveste/vendors/vue";
-import { isMobile } from "../../util/responsive.js";
-import "../toolbar/DevOnlyToolbarOpenInEditor.vue.js";
-import ToolbarBackground from "../toolbar/ToolbarBackground.vue.js";
-import "../toolbar/ToolbarNewTab.vue.js";
-import "../toolbar/ToolbarResponsiveSize.vue.js";
-import "../toolbar/ToolbarTextDirection.vue.js";
-import "../toolbar/ToolbarTitle.vue.js";
+import { defineComponent, createElementBlock, openBlock, createBlock } from "@poveste/vendors/vue";
 import "./StoryVariantSinglePreviewNative.vue.js";
 import "./StoryVariantSinglePreviewRemote.vue.js";
-import _sfc_main$1 from "../toolbar/ToolbarTitle.vue2.js";
-import _sfc_main$2 from "../toolbar/ToolbarResponsiveSize.vue2.js";
-import _sfc_main$3 from "../toolbar/ToolbarTextDirection.vue2.js";
-import _sfc_main$4 from "../toolbar/ToolbarNewTab.vue2.js";
-import _sfc_main$5 from "../toolbar/DevOnlyToolbarOpenInEditor.vue2.js";
-import _sfc_main$6 from "./StoryVariantSinglePreviewNative.vue2.js";
-import _sfc_main$7 from "./StoryVariantSinglePreviewRemote.vue2.js";
+import _sfc_main$1 from "./StoryVariantSinglePreviewNative.vue2.js";
+import _sfc_main$2 from "./StoryVariantSinglePreviewRemote.vue2.js";
 "use strict";
 const _hoisted_1 = {
-  class: "poveste-story-variant-single-view htw-h-full htw-flex htw-flex-col",
+  class: "poveste-story-variant-single-view ptw-h-full ptw-flex ptw-flex-col",
   "data-test-id": "story-variant-single-view"
 };
-const _hoisted_2 = {
-  key: 0,
-  class: "htw-flex-none htw-flex htw-items-center htw-h-8 -htw-mt-1"
-};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StoryVariantSingleView",
   props: {
@@ -33,27 +17,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        !unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createVNode(_sfc_main$1, { variant: __props.variant }, null, 8, ["variant"]),
-          !__props.variant.responsiveDisabled ? (openBlock(), createBlock(_sfc_main$2, { key: 0 })) : createCommentVNode("", true),
-          createVNode(ToolbarBackground),
-          createVNode(_sfc_main$3),
-          createVNode(_sfc_main$4, {
-            variant: __props.variant,
-            story: __props.story
-          }, null, 8, ["variant", "story"]),
-          _ctx.__POVESTE_DEV__ ? (openBlock(), createBlock(_sfc_main$5, {
-            key: 1,
-            file: __props.story.file?.filePath,
-            tooltip: "Edit story in editor"
-          }, null, 8, ["file"])) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true),
-        __props.story.layout?.iframe === false ? (openBlock(), createBlock(_sfc_main$6, {
-          key: 1,
+        __props.story.layout?.iframe === false ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
           story: __props.story,
           variant: __props.variant
-        }, null, 8, ["story", "variant"])) : (openBlock(), createBlock(_sfc_main$7, {
-          key: 2,
+        }, null, 8, ["story", "variant"])) : (openBlock(), createBlock(_sfc_main$2, {
+          key: 1,
           story: __props.story,
           variant: __props.variant
         }, null, 8, ["story", "variant"]))

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

@@ -1,6 +1,7 @@
-import { defineComponent, watch, ref, createBlock, createElementBlock, unref, openBlock, withCtx, createVNode } from "@poveste/vendors/vue";
+import { defineComponent, computed, watch, ref, createBlock, createElementBlock, unref, openBlock, withCtx, createVNode } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 import { useRouter, useRoute } from "@poveste/vendors/vue-router";
+import { useLayoutStore } from "../../stores/layout.js";
 import { useStoryStore } from "../../stores/story.js";
 import { isMobile } from "../../util/responsive.js";
 import BaseEmpty from "../base/BaseEmpty.vue.js";
@@ -13,12 +14,19 @@ import _sfc_main$2 from "../panel/StorySidePanel.vue2.js";
 "use strict";
 const _hoisted_1 = {
   key: 1,
-  class: "poveste-story-view poveste-with-story htw-h-full"
+  class: "poveste-story-view poveste-with-story ptw-h-full"
 };
 const _sfc_main = /* @__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) => {
@@ -62,7 +70,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(Icon), {
             icon: "carbon:software-resource-resource",
-            class: "htw-w-16 htw-h-16 htw-opacity-50"
+            class: "ptw-w-16 ptw-h-16 ptw-opacity-50"
           })
         ]),
         _: 1
@@ -71,21 +79,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           key: 0,
           ref_key: "docsOnlyScroller",
           ref: docsOnlyScroller,
-          class: "htw-h-full htw-overflow-auto"
+          class: "ptw-h-full ptw-overflow-auto"
         }, [
           createVNode(_sfc_main$1, {
             story: unref(storyStore).currentStory,
             standalone: "",
-            class: "md:htw-p-12 htw-w-full md:htw-max-w-[600px] lg:htw-max-w-[800px] xl:htw-max-w-[900px]",
+            class: "md:ptw-p-12 ptw-w-full md:ptw-max-w-[600px] lg:ptw-max-w-[800px] xl:ptw-max-w-[900px]",
             onScrollTop: _cache[0] || (_cache[0] = ($event) => scrollDocsToTop())
           }, null, 8, ["story"])
-        ], 512)) : unref(isMobile) ? (openBlock(), createBlock(StoryViewer, { key: 1 })) : (openBlock(), createBlock(BaseSplitPane, {
-          key: 2,
-          "save-id": "story-main",
+        ], 512)) : unref(isMobile) ? (openBlock(), createBlock(StoryViewer, { key: 1 })) : !effectiveStoryOptionsVisible.value ? (openBlock(), createBlock(StoryViewer, { key: 2 })) : (openBlock(), createBlock(BaseSplitPane, {
+          key: 3,
+          "save-id": `story-main-${placement.value}`,
+          orientation: splitOrientation.value,
           min: 30,
           max: 95,
-          "default-split": 75,
-          class: "htw-h-full"
+          "default-split": splitDefaultSplit.value,
+          "show-divider": false,
+          class: "ptw-h-full"
         }, {
           first: withCtx(() => [
             createVNode(StoryViewer)
@@ -94,7 +104,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$2)
           ]),
           _: 1
-        }))
+        }, 8, ["save-id", "orientation", "default-split"]))
       ]));
     };
   }

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

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

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

@@ -7,12 +7,12 @@ import StoryVariantSingle from "./StoryVariantSingle.vue.js";
 import _sfc_main$1 from "./StoryVariantGrid.vue2.js";
 import _sfc_main$2 from "../app/MobileOverlay.vue2.js";
 "use strict";
-const _hoisted_1 = { class: "poveste-story-viewer htw-bg-gray-50 htw-h-full dark:htw-bg-gray-750" };
+const _hoisted_1 = { class: "poveste-story-viewer ptw-bg-gray-50 ptw-h-full dark:ptw-bg-gray-750" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StoryViewer",
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v4009a800": variant.value?.iconColor
+      "e0c29708": variant.value?.iconColor
     }));
     const storyStore = useStoryStore();
     const variant = computed(() => storyStore.currentVariant);

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

@@ -1,6 +1,7 @@
-import { defineComponent, resolveDirective, withDirectives, createElementBlock, openBlock, unref, createVNode } from "@poveste/vendors/vue";
+import { defineComponent, resolveDirective, withDirectives, createBlock, openBlock, unref, withCtx, createVNode } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 import { openInEditor } from "../../util/open-in-editor.js";
+import TopBarChipItem from "../app/TopBarChipItem.vue.js";
 "use strict";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DevOnlyToolbarOpenInEditor",
@@ -11,16 +12,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
-      return withDirectives((openBlock(), createElementBlock("a", {
+      return withDirectives((openBlock(), createBlock(TopBarChipItem, {
         target: "_blank",
-        class: "poveste-toolbar-open-in-editor htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100",
+        class: "poveste-toolbar-open-in-editor",
         onClick: _cache[0] || (_cache[0] = ($event) => unref(openInEditor)(__props.file))
-      }, [
-        createVNode(unref(Icon), {
-          icon: "carbon:script-reference",
-          class: "htw-w-4 htw-h-4"
-        })
-      ])), [
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Icon), {
+            icon: "carbon:script-reference",
+            class: "ptw-w-4 ptw-h-4"
+          })
+        ]),
+        _: 1
+      })), [
         [_directive_tooltip, __props.tooltip]
       ]);
     };

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

@@ -2,7 +2,7 @@ import _sfc_main from "./ToolbarBackground.vue2.js";
 /* empty css                       */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 "use strict";
-const ToolbarBackground = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-26d08825"]]);
+const ToolbarBackground = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dcd1e9e2"]]);
 export {
   ToolbarBackground as default
 };