@poveste/app 0.1.2 → 0.2.0

package/dist/bundled/components/panel/StoryEvents.vue2.js

@@ -31,7 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             createVNode(unref(Icon), {
               icon: "carbon:event-schedule",
-              class: "htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
+              class: "ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
             }),
             _cache[0] || (_cache[0] = createTextVNode(" No event fired ", -1))
           ]),

package/dist/bundled/components/panel/StorySidePanel.vue2.js

@@ -1,5 +1,6 @@
-import { defineComponent, computed, createBlock, unref, openBlock, withCtx, createElementVNode, createVNode, resolveDynamicComponent } from "@poveste/vendors/vue";
+import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, createBlock, unref, withCtx, createVNode, resolveDynamicComponent } from "@poveste/vendors/vue";
 import { useRoute } from "@poveste/vendors/vue-router";
+import { useLayoutStore } from "../../stores/layout.js";
 import { useStoryStore } from "../../stores/story.js";
 import BaseEmpty from "../base/BaseEmpty.vue.js";
 import BaseSplitPane from "../base/BaseSplitPane.vue.js";
@@ -13,11 +14,17 @@ import _sfc_main$2 from "./StoryEvents.vue2.js";
 import _sfc_main$3 from "./StoryDocs.vue2.js";
 import _sfc_main$4 from "./PaneTabs.vue2.js";
 "use strict";
-const _hoisted_1 = { class: "htw-flex htw-flex-col htw-h-full" };
+const _hoisted_1 = { class: "ptw-h-full ptw-w-full ptw-p-2" };
+const _hoisted_2 = { class: "ptw-h-full ptw-w-full ptw-rounded-lg ptw-border ptw-border-gray-200 dark:ptw-border-gray-700 ptw-overflow-hidden ptw-bg-white dark:ptw-bg-gray-700" };
+const _hoisted_3 = { class: "ptw-flex ptw-flex-col ptw-h-full" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StorySidePanel",
   setup(__props) {
     const storyStore = useStoryStore();
+    const layoutStore = useLayoutStore();
+    const innerOrientation = computed(
+      () => layoutStore.settings.storyOptionsPlacement === "bottom" ? "landscape" : "portrait"
+    );
     const route = useRoute();
     const panelContentComponent = computed(() => {
       switch (route.query.tab) {
@@ -30,51 +37,55 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return !unref(storyStore).currentVariant ? (openBlock(), createBlock(BaseEmpty, {
-        key: 0,
-        class: "poveste-story-side-panel poveste-selection"
-      }, {
-        default: withCtx(() => [..._cache[0] || (_cache[0] = [
-          createElementVNode("span", null, "Select a variant", -1)
-        ])]),
-        _: 1
-      })) : !unref(storyStore).currentVariant.configReady || !unref(storyStore).currentVariant.previewReady ? (openBlock(), createBlock(BaseEmpty, {
-        key: 1,
-        class: "poveste-story-side-panel poveste-loading"
-      }, {
-        default: withCtx(() => [..._cache[1] || (_cache[1] = [
-          createElementVNode("span", null, "Loading...", -1)
-        ])]),
-        _: 1
-      })) : (openBlock(), createBlock(BaseSplitPane, {
-        key: 2,
-        "save-id": "story-sidepane",
-        orientation: "portrait",
-        class: "poveste-story-side-panel poveste-loaded htw-h-full",
-        "data-test-id": "story-side-panel"
-      }, {
-        first: withCtx(() => [
-          createElementVNode("div", _hoisted_1, [
-            createVNode(_sfc_main$4, {
-              story: unref(storyStore).currentStory,
-              variant: unref(storyStore).currentVariant
-            }, null, 8, ["story", "variant"]),
-            (openBlock(), createBlock(resolveDynamicComponent(panelContentComponent.value), {
-              story: unref(storyStore).currentStory,
-              variant: unref(storyStore).currentVariant,
-              class: "htw-h-full htw-overflow-auto"
-            }, null, 8, ["story", "variant"]))
-          ])
-        ]),
-        last: withCtx(() => [
-          createVNode(StorySourceCode, {
-            story: unref(storyStore).currentStory,
-            variant: unref(storyStore).currentVariant,
-            class: "htw-h-full"
-          }, null, 8, ["story", "variant"])
-        ]),
-        _: 1
-      }));
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          !unref(storyStore).currentVariant ? (openBlock(), createBlock(BaseEmpty, {
+            key: 0,
+            class: "poveste-story-side-panel poveste-selection"
+          }, {
+            default: withCtx(() => [..._cache[0] || (_cache[0] = [
+              createElementVNode("span", null, "Select a variant", -1)
+            ])]),
+            _: 1
+          })) : !unref(storyStore).currentVariant.configReady || !unref(storyStore).currentVariant.previewReady ? (openBlock(), createBlock(BaseEmpty, {
+            key: 1,
+            class: "poveste-story-side-panel poveste-loading"
+          }, {
+            default: withCtx(() => [..._cache[1] || (_cache[1] = [
+              createElementVNode("span", null, "Loading...", -1)
+            ])]),
+            _: 1
+          })) : (openBlock(), createBlock(BaseSplitPane, {
+            key: 2,
+            "save-id": `story-sidepane-${innerOrientation.value}`,
+            orientation: innerOrientation.value,
+            class: "poveste-story-side-panel poveste-loaded ptw-h-full",
+            "data-test-id": "story-side-panel"
+          }, {
+            first: withCtx(() => [
+              createElementVNode("div", _hoisted_3, [
+                createVNode(_sfc_main$4, {
+                  story: unref(storyStore).currentStory,
+                  variant: unref(storyStore).currentVariant
+                }, null, 8, ["story", "variant"]),
+                (openBlock(), createBlock(resolveDynamicComponent(panelContentComponent.value), {
+                  story: unref(storyStore).currentStory,
+                  variant: unref(storyStore).currentVariant,
+                  class: "ptw-h-full ptw-overflow-auto"
+                }, null, 8, ["story", "variant"]))
+              ])
+            ]),
+            last: withCtx(() => [
+              createVNode(StorySourceCode, {
+                story: unref(storyStore).currentStory,
+                variant: unref(storyStore).currentVariant,
+                class: "ptw-h-full"
+              }, null, 8, ["story", "variant"])
+            ]),
+            _: 1
+          }, 8, ["save-id", "orientation"]))
+        ])
+      ]);
     };
   }
 });

package/dist/bundled/components/panel/StorySourceCode.vue.js

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

package/dist/bundled/components/panel/StorySourceCode.vue2.js

@@ -7,15 +7,15 @@ import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
 import { isDark } from "../../util/dark.js";
 import BaseEmpty from "../base/BaseEmpty.vue.js";
 "use strict";
-const _hoisted_1 = { class: "poveste-story-source-code htw-bg-gray-50 dark:htw-bg-gray-750 htw-h-full htw-overflow-hidden htw-flex htw-flex-col" };
+const _hoisted_1 = { class: "poveste-story-source-code ptw-bg-gray-50 dark:ptw-bg-gray-750 ptw-h-full ptw-overflow-hidden ptw-flex ptw-flex-col" };
 const _hoisted_2 = {
   key: 0,
-  class: "htw-h-10 htw-flex-none htw-border-b htw-border-solid htw-border-gray-500/5 htw-px-4 htw-flex htw-items-center htw-gap-2"
+  class: "ptw-h-10 ptw-flex-none ptw-border-b ptw-border-solid ptw-border-gray-500/5 ptw-px-4 ptw-flex ptw-items-center ptw-gap-2"
 };
-const _hoisted_3 = { class: "htw-flex htw-flex-none htw-gap-px htw-h-full htw-py-2" };
+const _hoisted_3 = { class: "ptw-flex ptw-flex-none ptw-gap-px ptw-h-full ptw-py-2" };
 const _hoisted_4 = {
   key: 1,
-  class: "htw-text-red-500 htw-h-full htw-p-2 htw-overflow-auto htw-font-mono htw-text-sm"
+  class: "ptw-text-red-500 ptw-h-full ptw-p-2 ptw-overflow-auto ptw-font-mono ptw-text-sm"
 };
 const _hoisted_5 = ["value"];
 const _hoisted_6 = ["innerHTML"];
@@ -117,19 +117,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const _directive_tooltip = resolveDirective("tooltip");
       return openBlock(), createElementBlock("div", _hoisted_1, [
         !error.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          _cache[2] || (_cache[2] = createElementVNode("div", { class: "htw-text-gray-900 dark:htw-text-gray-100" }, " Source ", -1)),
-          _cache[3] || (_cache[3] = createElementVNode("div", { class: "htw-flex-1" }, null, -1)),
+          _cache[2] || (_cache[2] = createElementVNode("div", { class: "ptw-text-gray-900 dark:ptw-text-gray-100" }, " Source ", -1)),
+          _cache[3] || (_cache[3] = createElementVNode("div", { class: "ptw-flex-1" }, null, -1)),
           createElementVNode("div", _hoisted_3, [
             withDirectives((openBlock(), createElementBlock("button", {
-              class: normalizeClass(["htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-1 htw-bg-gray-500/10 htw-rounded-l htw-transition-all htw-ease-[cubic-bezier(0,1,.6,1)] htw-duration-300 htw-overflow-hidden", [
-                displayedSource.value !== "dynamic" ? "htw-max-w-6 htw-opacity-70" : "htw-max-w-[82px] htw-text-primary-600 dark:htw-text-primary-400",
-                dynamicSourceCode.value ? "htw-cursor-pointer hover:htw-bg-gray-500/30 active:htw-bg-gray-600/50" : "htw-opacity-50"
+              class: normalizeClass(["ptw-flex ptw-items-center ptw-gap-1 ptw-h-full ptw-px-1 ptw-bg-gray-500/10 ptw-rounded-l ptw-transition-all ptw-ease-[cubic-bezier(0,1,.6,1)] ptw-duration-300 ptw-overflow-hidden", [
+                displayedSource.value !== "dynamic" ? "ptw-max-w-6 ptw-opacity-70" : "ptw-max-w-[82px] ptw-text-primary-600 dark:ptw-text-primary-400",
+                dynamicSourceCode.value ? "ptw-cursor-pointer hover:ptw-bg-gray-500/30 active:ptw-bg-gray-600/50" : "ptw-opacity-50"
               ]]),
               onClick: _cache[0] || (_cache[0] = ($event) => dynamicSourceCode.value && (displayedSource.value = "dynamic"))
             }, [
               createVNode(unref(Icon), {
                 icon: "carbon:flash",
-                class: "htw-w-4 htw-h-4 htw-flex-none"
+                class: "ptw-w-4 ptw-h-4 ptw-flex-none"
               }),
               createElementVNode("span", {
                 class: normalizeClass(["transition-opacity duration-300", {
@@ -140,15 +140,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               [_directive_tooltip, !dynamicSourceCode.value ? "Dynamic source code is not available" : displayedSource.value !== "dynamic" ? "Switch to dynamic source" : null]
             ]),
             withDirectives((openBlock(), createElementBlock("button", {
-              class: normalizeClass(["htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-1 htw-bg-gray-500/10 htw-rounded-r htw-transition-all htw-ease-[cubic-bezier(0,1,.6,1)] htw-duration-300 htw-overflow-hidden", [
-                displayedSource.value !== "static" ? "htw-max-w-6 htw-opacity-70" : "htw-max-w-[63px] htw-text-primary-600 dark:htw-text-primary-400",
-                staticSourceCode.value ? "htw-cursor-pointer hover:htw-bg-gray-500/30 active:htw-bg-gray-600/50" : "htw-opacity-50"
+              class: normalizeClass(["ptw-flex ptw-items-center ptw-gap-1 ptw-h-full ptw-px-1 ptw-bg-gray-500/10 ptw-rounded-r ptw-transition-all ptw-ease-[cubic-bezier(0,1,.6,1)] ptw-duration-300 ptw-overflow-hidden", [
+                displayedSource.value !== "static" ? "ptw-max-w-6 ptw-opacity-70" : "ptw-max-w-[63px] ptw-text-primary-600 dark:ptw-text-primary-400",
+                staticSourceCode.value ? "ptw-cursor-pointer hover:ptw-bg-gray-500/30 active:ptw-bg-gray-600/50" : "ptw-opacity-50"
               ]]),
               onClick: _cache[1] || (_cache[1] = ($event) => staticSourceCode.value && (displayedSource.value = "static"))
             }, [
               createVNode(unref(Icon), {
                 icon: "carbon:document",
-                class: "htw-w-4 htw-h-4 htw-flex-none"
+                class: "ptw-w-4 ptw-h-4 ptw-flex-none"
               }),
               createElementVNode("span", {
                 class: normalizeClass(["transition-opacity duration-300", {
@@ -161,14 +161,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           createVNode(unref(HstCopyIcon), {
             content: displayedSourceCode.value,
-            class: "htw-flex-none"
+            class: "ptw-flex-none"
           }, null, 8, ["content"])
         ])) : createCommentVNode("", true),
         error.value ? (openBlock(), createElementBlock("div", _hoisted_4, " Error: " + toDisplayString(error.value), 1)) : !displayedSourceCode.value ? (openBlock(), createBlock(BaseEmpty, { key: 2 }, {
           default: withCtx(() => [
             createVNode(unref(Icon), {
               icon: "carbon:code-hide",
-              class: "htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
+              class: "ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
             }),
             _cache[4] || (_cache[4] = createElementVNode("span", null, "Not available", -1))
           ]),
@@ -177,7 +177,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           key: 3,
           ref_key: "scroller",
           ref: scroller,
-          class: "__poveste-code-placeholder htw-w-full htw-h-full htw-p-4 htw-outline-none htw-bg-transparent htw-resize-none htw-m-0",
+          class: "__poveste-code-placeholder ptw-w-full ptw-h-full ptw-p-4 ptw-outline-none ptw-bg-transparent ptw-resize-none ptw-m-0",
           value: displayedSourceCode.value,
           readonly: "",
           "data-test-id": "story-source-code",
@@ -186,12 +186,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           key: 4,
           ref_key: "scroller",
           ref: scroller,
-          class: "htw-w-full htw-h-full htw-overflow-auto",
+          class: "ptw-w-full ptw-h-full ptw-overflow-auto",
           "data-test-id": "story-source-code",
           onScroll
         }, [
           createElementVNode("div", {
-            class: "__poveste-code __histoire-code htw-p-4 htw-w-fit",
+            class: "__poveste-code __histoire-code ptw-p-4 ptw-w-fit",
             innerHTML: sourceHtml.value
           }, null, 8, _hoisted_6)
         ], 544))

package/dist/bundled/components/search/SearchItem.vue.js

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

package/dist/bundled/components/search/SearchItem.vue2.js

@@ -26,7 +26,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v12a213a0": __props.result.iconColor
+      "dacfd852": __props.result.iconColor
     }));
     const props = __props;
     const emit = __emit;
@@ -59,7 +59,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           key: 0,
           to: __props.result.route,
           "is-active": unref(selected),
-          class: "htw-px-6 htw-py-4 htw-gap-4",
+          class: "ptw-px-6 ptw-py-4 ptw-gap-4",
           onNavigate: _cache[0] || (_cache[0] = ($event) => action(true))
         }, {
           default: withCtx(() => [
@@ -73,7 +73,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "onActivate" in __props.result ? (openBlock(), createBlock(_sfc_main$2, {
           key: 1,
           "is-active": unref(selected),
-          class: "htw-px-6 htw-py-4 htw-gap-4",
+          class: "ptw-px-6 ptw-py-4 ptw-gap-4",
           onNavigate: _cache[1] || (_cache[1] = ($event) => action(true))
         }, {
           default: withCtx(() => [

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

@@ -2,12 +2,12 @@ import { defineComponent, createElementBlock, openBlock, Fragment, createVNode,
 import { Icon } from "@poveste/vendors/iconify";
 import BaseIcon from "../base/BaseIcon.vue.js";
 "use strict";
-const _hoisted_1 = { class: "htw-flex-1" };
-const _hoisted_2 = { class: "htw-flex" };
-const _hoisted_3 = { class: "htw-ml-auto htw-opacity-40" };
+const _hoisted_1 = { class: "ptw-flex-1" };
+const _hoisted_2 = { class: "ptw-flex" };
+const _hoisted_3 = { class: "ptw-ml-auto ptw-opacity-40" };
 const _hoisted_4 = {
   key: 0,
-  class: "htw-flex htw-items-center htw-gap-0.5 htw-opacity-60"
+  class: "ptw-flex ptw-items-center ptw-gap-0.5 ptw-opacity-60"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SearchItemContent",
@@ -29,11 +29,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(BaseIcon, {
           icon: __props.result.icon ?? defaultIcons[__props.result.kind],
-          class: normalizeClass(["htw-w-4 htw-h-4", [
+          class: normalizeClass(["ptw-w-4 ptw-h-4", [
             !__props.selected ? [
               __props.result.iconColor ? "bind-icon-color" : {
-                "htw-text-primary-500": __props.result.kind === "story",
-                "htw-text-gray-500": __props.result.kind === "variant"
+                "ptw-text-primary-500": __props.result.kind === "story",
+                "ptw-text-gray-500": __props.result.kind === "variant"
               }
             ] : [],
             {
@@ -50,12 +50,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.result.path, (p, index) => {
               return openBlock(), createElementBlock("div", {
                 key: index,
-                class: "htw-flex htw-items-center htw-gap-0.5"
+                class: "ptw-flex ptw-items-center ptw-gap-0.5"
               }, [
                 index > 0 ? (openBlock(), createBlock(unref(Icon), {
                   key: 0,
                   icon: "carbon:chevron-right",
-                  class: "htw-w-4 htw-h-4 htw-mt-0.5 htw-opacity-50"
+                  class: "ptw-w-4 ptw-h-4 ptw-mt-0.5 ptw-opacity-50"
                 })) : createCommentVNode("", true),
                 createElementVNode("span", null, toDisplayString(p), 1)
               ]);

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

@@ -1,7 +1,7 @@
 import { defineComponent, createElementBlock, openBlock, createVNode, createTextVNode, unref } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 "use strict";
-const _hoisted_1 = { class: "poveste-search-loading htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500 htw-h-[51px] htw-opacity-30" };
+const _hoisted_1 = { class: "poveste-search-loading ptw-flex ptw-items-center ptw-gap-4 ptw-pl-6 ptw-border ptw-border-transparent focus-visible:ptw-border-primary-500 ptw-h-[51px] ptw-opacity-30" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SearchLoading",
   setup(__props) {
@@ -9,7 +9,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(unref(Icon), {
           icon: "carbon:search",
-          class: "flex-none htw-w-4 htw-h-4"
+          class: "flex-none ptw-w-4 ptw-h-4"
         }),
         _cache[0] || (_cache[0] = createTextVNode(" Loading... ", -1))
       ]);

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

@@ -3,10 +3,10 @@ import "./SearchLoading.vue.js";
 import _sfc_main$1 from "./SearchLoading.vue2.js";
 "use strict";
 const _hoisted_1 = {
-  class: "poveste-search-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-900/80 htw-z-20",
+  class: "poveste-search-modal ptw-fixed ptw-inset-0 ptw-bg-white/80 dark:ptw-bg-gray-900/80 ptw-z-20",
   "data-test-id": "search-modal"
 };
-const _hoisted_2 = { class: "htw-bg-white dark:htw-bg-gray-900 md:htw-mt-16 md:htw-mx-auto htw-w-screen htw-max-w-[512px] htw-shadow-xl htw-border htw-border-gray-200 dark:htw-border-gray-750 htw-rounded-lg htw-relative htw-divide-y htw-divide-gray-200 dark:htw-divide-gray-850" };
+const _hoisted_2 = { class: "ptw-bg-white dark:ptw-bg-gray-900 md:ptw-mt-16 md:ptw-mx-auto ptw-w-screen ptw-max-w-[512px] ptw-shadow-xl ptw-border ptw-border-gray-200 dark:ptw-border-gray-750 ptw-rounded-lg ptw-relative ptw-divide-y ptw-divide-gray-200 dark:ptw-divide-gray-850" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SearchModal",
   props: {
@@ -31,7 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", {
-          class: "htw-absolute htw-inset-0",
+          class: "ptw-absolute ptw-inset-0",
           onClick: _cache[0] || (_cache[0] = ($event) => close())
         }),
         createElementVNode("div", _hoisted_2, [

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

@@ -13,7 +13,7 @@ import SearchItem from "./SearchItem.vue.js";
 "use strict";
 const _hoisted_1 = {
   key: 1,
-  class: "htw-max-h-[400px] htw-overflow-y-auto htw-rounded-b-lg"
+  class: "ptw-max-h-[400px] ptw-overflow-y-auto ptw-rounded-b-lg"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SearchPane",
@@ -223,19 +223,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("div", {
-          class: "poveste-search-pane htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500",
+          class: "poveste-search-pane ptw-flex ptw-items-center ptw-gap-4 ptw-pl-6 ptw-border ptw-border-transparent focus-visible:ptw-border-primary-500",
           onClick: _cache[4] || (_cache[4] = ($event) => focused.value = true)
         }, [
           createVNode(unref(Icon), {
             icon: "carbon:search",
-            class: "flex-none htw-w-4 htw-h-4"
+            class: "flex-none ptw-w-4 ptw-h-4"
           }),
           withDirectives(createElementVNode("input", {
             ref_key: "input",
             ref: input,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchInputText.value = $event),
             placeholder: "Search for stories, variants...",
-            class: "htw-bg-transparent htw-w-full htw-flex-1 htw-pl-0 htw-pr-6 htw-py-4 htw-outline-none",
+            class: "ptw-bg-transparent ptw-w-full ptw-flex-1 ptw-pl-0 ptw-pr-6 ptw-py-4 ptw-outline-none",
             onKeydown: [
               _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => unref(selectNext)(), ["prevent"]), ["down"])),
               _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(selectPrevious)(), ["prevent"]), ["up"])),

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

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

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

@@ -6,17 +6,17 @@ 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: "poveste-story-responsive-preview htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden" };
+const _hoisted_1 = { class: "poveste-story-responsive-preview ptw-w-full ptw-h-full ptw-flex-1 ptw-rounded-lg ptw-relative ptw-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"
+  class: "ptw-absolute ptw-inset-0 ptw-w-full ptw-h-full ptw-bg-gray-100 dark:ptw-bg-gray-750 ptw-rounded-r-lg ptw-border-l-2 ptw-border-gray-500/10 dark:ptw-border-gray-700/30 ptw-overflow-hidden"
 };
 const _hoisted_3 = {
-  class: "bind-preview-bg htw-rounded-lg htw-h-full",
+  class: "bind-preview-bg ptw-rounded-lg ptw-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 _hoisted_4 = { class: "ptw-p-8 ptw-h-full ptw-relative" };
+const _hoisted_5 = { class: "ptw-w-full ptw-h-full ptw-relative" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StoryResponsivePreview",
   props: {
@@ -24,7 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v30eb5fc0": unref(settings).backgroundColor
+      "v2ebc4fb8": unref(settings).backgroundColor
     }));
     const props = __props;
     const settings = usePreviewSettingsStore().currentSettings;
@@ -116,28 +116,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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%]" })
+          createVNode(HatchedPattern, { class: "ptw-w-full ptw-h-full ptw-text-black/[1%] dark:ptw-text-white/[1%]" })
         ])) : createCommentVNode("", true),
         createElementVNode("div", {
           ref_key: "previewWrapper",
           ref: previewWrapper,
-          class: "htw-h-full htw-overflow-auto htw-relative"
+          class: "ptw-h-full ptw-overflow-auto ptw-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"])
+            class: normalizeClass(["ptw-overflow-hidden ptw-bg-white dark:ptw-bg-gray-700 ptw-rounded-lg ptw-relative", isResponsiveEnabled.value ? {
+              "ptw-w-fit": !!finalWidth.value,
+              "ptw-h-fit": !!finalHeight.value,
+              "ptw-h-full": !finalHeight.value
+            } : "ptw-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"
+                class: "ptw-absolute ptw-inset-0 ptw-w-full ptw-h-full ptw-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)),
+                  _cache[0] || (_cache[0] = createElementVNode("div", { class: "ptw-absolute ptw-inset-0" }, null, -1)),
                   renderSlot(_ctx.$slots, "default", {
                     isResponsiveEnabled: isResponsiveEnabled.value,
                     finalWidth: finalWidth.value,
@@ -145,17 +145,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     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-275bf3ef></div><div class="htw-absolute htw-top-5 htw-right-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-275bf3ef></div><div class="htw-absolute htw-bottom-5 htw-left-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-275bf3ef></div><div class="htw-absolute htw-bottom-5 htw-right-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-275bf3ef></div><div class="htw-absolute htw-left-5 htw-top-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-275bf3ef></div><div class="htw-absolute htw-left-5 htw-bottom-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-275bf3ef></div><div class="htw-absolute htw-right-5 htw-top-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-275bf3ef></div><div class="htw-absolute htw-right-5 htw-bottom-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-275bf3ef></div>', 8))
+                _cache[1] || (_cache[1] = createStaticVNode('<div class="ptw-absolute ptw-top-5 ptw-left-8 ptw-h-2 ptw-w-px ptw-bg-gray-400/25" data-v-996dc779></div><div class="ptw-absolute ptw-top-5 ptw-right-8 ptw-h-2 ptw-w-px ptw-bg-gray-400/25" data-v-996dc779></div><div class="ptw-absolute ptw-bottom-5 ptw-left-8 ptw-h-2 ptw-w-px ptw-bg-gray-400/25" data-v-996dc779></div><div class="ptw-absolute ptw-bottom-5 ptw-right-8 ptw-h-2 ptw-w-px ptw-bg-gray-400/25" data-v-996dc779></div><div class="ptw-absolute ptw-left-5 ptw-top-8 ptw-w-2 ptw-h-px ptw-bg-gray-400/25" data-v-996dc779></div><div class="ptw-absolute ptw-left-5 ptw-bottom-8 ptw-w-2 ptw-h-px ptw-bg-gray-400/25" data-v-996dc779></div><div class="ptw-absolute ptw-right-5 ptw-top-8 ptw-w-2 ptw-h-px ptw-bg-gray-400/25" data-v-996dc779></div><div class="ptw-absolute ptw-right-5 ptw-bottom-8 ptw-w-2 ptw-h-px ptw-bg-gray-400/25" data-v-996dc779></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"
+                  class: "ptw-absolute ptw-w-4 ptw-top-0 ptw-bottom-4 ptw-right-0 hover:ptw-bg-primary-500/30 ptw-flex ptw-items-center ptw-justify-center ptw-cursor-ew-resize ptw-group hover:ptw-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"
+                    class: "ptw-w-4 ptw-h-4 ptw-opacity-20 group-hover:ptw-opacity-90"
                   })
                 ])), [
                   [
@@ -168,11 +168,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 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"
+                  class: "ptw-absolute ptw-h-4 ptw-left-0 ptw-right-4 ptw-bottom-0 hover:ptw-bg-primary-500/30 ptw-flex ptw-items-center ptw-justify-center ptw-cursor-ns-resize ptw-group hover:ptw-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"
+                    class: "ptw-w-4 ptw-h-4 ptw-opacity-20 group-hover:ptw-opacity-90"
                   })
                 ])), [
                   [
@@ -185,7 +185,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 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"
+                  class: "ptw-absolute ptw-w-4 ptw-h-4 ptw-right-0 ptw-bottom-0 hover:ptw-bg-primary-500/30 ptw-flex ptw-items-center ptw-justify-center ptw-cursor-nwse-resize ptw-group hover:ptw-text-primary-500"
                 }, null, 512), [
                   [
                     unref(VTooltip),

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

@@ -1,20 +1,10 @@
-import { defineComponent, computed, ref, watch, onMounted, createElementBlock, openBlock, createCommentVNode, createElementVNode, unref, createVNode, createBlock, normalizeStyle, Fragment, renderList } from "@poveste/vendors/vue";
+import { defineComponent, computed, ref, watch, onMounted, createElementBlock, openBlock, createElementVNode, normalizeStyle, unref, Fragment, renderList, createBlock } 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: "poveste-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __poveste-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 _hoisted_1 = { class: "poveste-story-variant-grid ptw-flex ptw-flex-col ptw-items-stretch ptw-h-full __poveste-pane-shadow-from-right" };
+const _hoisted_2 = { class: "ptw-flex ptw-w-0 ptw-flex-1 ptw-mx-4" };
 const margin = 16;
 const gap = 16;
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -95,24 +85,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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.__POVESTE_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",
+          class: "ptw-overflow-y-auto ptw-flex ptw-flex-1",
           onScroll: _cache[0] || (_cache[0] = ($event) => updateMaxCount())
         }, [
-          createElementVNode("div", _hoisted_3, [
+          createElementVNode("div", _hoisted_2, [
             createElementVNode("div", {
-              class: "htw-m-auto",
+              class: "ptw-m-auto",
               style: normalizeStyle({
                 minHeight: `${unref(storyStore).currentStory.variants.length / countPerRow.value * (maxItemHeight.value + gap) - gap}px`
               })
@@ -120,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createElementVNode("div", {
                 ref_key: "gridEl",
                 ref: gridEl,
-                class: "htw-grid htw-gap-4 htw-my-4",
+                class: "ptw-grid ptw-gap-4 ptw-my-4",
                 style: normalizeStyle({
                   gridTemplateColumns: `repeat(${columnCount.value}, ${gridColumnWidth.value}px)`
                 })