@poveste/app 0.1.2 → 0.2.0

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

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

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

@@ -1,8 +1,8 @@
-import { defineComponent, computed, resolveDirective, withDirectives, createElementBlock, openBlock, createVNode, unref } from "@poveste/vendors/vue";
+import { defineComponent, computed, resolveDirective, withDirectives, createBlock, openBlock, withCtx, createVNode, unref } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 import { getSandboxUrl } from "../../util/sandbox.js";
+import TopBarChipItem from "../app/TopBarChipItem.vue.js";
 "use strict";
-const _hoisted_1 = ["href"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ToolbarNewTab",
   props: {
@@ -16,16 +16,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
-      return withDirectives((openBlock(), createElementBlock("a", {
+      return withDirectives((openBlock(), createBlock(TopBarChipItem, {
         href: sandboxUrl.value,
         target: "_blank",
-        class: "poveste-toolbar-new-tab 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"
-      }, [
-        createVNode(unref(Icon), {
-          icon: "carbon:launch",
-          class: "htw-w-4 htw-h-4"
-        })
-      ], 8, _hoisted_1)), [
+        class: "poveste-toolbar-new-tab"
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Icon), {
+            icon: "carbon:launch",
+            class: "ptw-w-4 ptw-h-4"
+          })
+        ]),
+        _: 1
+      }, 8, ["href"])), [
         [_directive_tooltip, "Open variant in new tab"]
       ]);
     };

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

@@ -5,10 +5,10 @@ import { povesteConfig } from "../../util/config.js";
 import "../base/BaseCheckbox.vue.js";
 import _sfc_main$1 from "../base/BaseCheckbox.vue2.js";
 "use strict";
-const _hoisted_1 = { class: "htw-flex htw-flex-col htw-items-stretch" };
-const _hoisted_2 = { class: "htw-flex htw-items-center htw-gap-2 htw-px-4 htw-py-3" };
+const _hoisted_1 = { class: "ptw-flex ptw-flex-col ptw-items-stretch" };
+const _hoisted_2 = { class: "ptw-flex ptw-items-center ptw-gap-2 ptw-px-4 ptw-py-3" };
 const _hoisted_3 = ["onClick"];
-const _hoisted_4 = { class: "htw-ml-auto htw-opacity-70 htw-flex htw-gap-1" };
+const _hoisted_4 = { class: "ptw-ml-auto ptw-opacity-70 ptw-flex ptw-gap-1" };
 const _hoisted_5 = { key: 0 };
 const _hoisted_6 = { key: 0 };
 const _hoisted_7 = { key: 1 };
@@ -25,7 +25,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         placement: "bottom-end",
         skidding: 6,
         disabled: !unref(povesteConfig).responsivePresets?.length,
-        class: "poveste-toolbar-responsive-size htw-h-full htw-flex-none"
+        class: "poveste-toolbar-responsive-size ptw-flex-none"
       }, {
         popper: withCtx(({ hide }) => [
           createElementVNode("div", _hoisted_1, [
@@ -42,7 +42,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(settings).responsiveWidth = $event),
                 type: "number",
-                class: "htw-bg-transparent htw-border htw-border-gray-200 dark:htw-border-gray-850 htw-rounded htw-w-20 htw-opacity-50 focus:htw-opacity-100 htw-flex-1 htw-min-w-0",
+                class: "ptw-bg-transparent ptw-border ptw-border-gray-200 dark:ptw-border-gray-850 ptw-rounded ptw-w-20 ptw-opacity-50 focus:ptw-opacity-100 ptw-flex-1 ptw-min-w-0",
                 step: "16",
                 placeholder: "Auto"
               }, null, 512), [
@@ -54,11 +54,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ],
                 [_directive_tooltip, "Responsive width (px)"]
               ]),
-              _cache[4] || (_cache[4] = createElementVNode("span", { class: "htw-opacity-50" }, "×", -1)),
+              _cache[4] || (_cache[4] = createElementVNode("span", { class: "ptw-opacity-50" }, "×", -1)),
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(settings).responsiveHeight = $event),
                 type: "number",
-                class: "htw-bg-transparent htw-border htw-border-gray-200 dark:htw-border-gray-850 htw-rounded htw-w-20 htw-opacity-50 focus:htw-opacity-100 htw-flex-1 htw-min-w-0",
+                class: "ptw-bg-transparent ptw-border ptw-border-gray-200 dark:ptw-border-gray-850 ptw-rounded ptw-w-20 ptw-opacity-50 focus:ptw-opacity-100 ptw-flex-1 ptw-min-w-0",
                 step: "16",
                 placeholder: "Auto"
               }, null, 512), [
@@ -74,8 +74,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(povesteConfig).responsivePresets, (preset, index) => {
               return openBlock(), createElementBlock("button", {
                 key: index,
-                class: normalizeClass(["htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-gap-4", [
-                  unref(settings).responsiveWidth === preset.width && unref(settings).responsiveHeight === preset.height ? "htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "htw-bg-transparent hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+                class: normalizeClass(["ptw-px-4 ptw-py-3 ptw-cursor-pointer ptw-text-left ptw-flex ptw-gap-4", [
+                  unref(settings).responsiveWidth === preset.width && unref(settings).responsiveHeight === preset.height ? "ptw-bg-primary-500 hover:ptw-bg-primary-600 ptw-text-white dark:ptw-text-black" : "ptw-bg-transparent hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-700"
                 ]]),
                 onClick: ($event) => {
                   unref(settings).responsiveWidth = preset.width;
@@ -101,17 +101,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         default: withCtx(() => [
           withDirectives((openBlock(), createElementBlock("div", {
-            class: normalizeClass(["htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group", {
-              "htw-cursor-pointer hover:htw-text-primary-500": unref(povesteConfig).responsivePresets?.length
+            class: normalizeClass(["ptw-flex ptw-items-center ptw-gap-1 ptw-px-2.5 ptw-py-1.5 ptw-text-gray-900 dark:ptw-text-gray-100 ptw-transition-colors ptw-group", {
+              "hover:ptw-bg-white/50 dark:hover:ptw-bg-white/10 hover:ptw-text-primary-500 dark:hover:ptw-text-primary-400 ptw-cursor-pointer": unref(povesteConfig).responsivePresets?.length
             }])
           }, [
             createVNode(unref(Icon), {
               icon: "carbon:devices",
-              class: "htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+              class: "ptw-w-4 ptw-h-4"
             }),
             createVNode(unref(Icon), {
-              icon: "carbon:caret-down",
-              class: "htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+              icon: "carbon:chevron-down",
+              class: "ptw-w-3 ptw-h-3 ptw-opacity-40 group-hover:ptw-opacity-70"
             })
           ], 2)), [
             [_directive_tooltip, "Responsive sizes"]

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

@@ -1,6 +1,7 @@
-import { defineComponent, resolveDirective, withDirectives, createElementBlock, openBlock, unref, createVNode } from "@poveste/vendors/vue";
+import { defineComponent, resolveDirective, withDirectives, openBlock, createBlock, unref, withCtx, createVNode } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
+import TopBarChipItem from "../app/TopBarChipItem.vue.js";
 "use strict";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ToolbarTextDirection",
@@ -8,15 +9,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const settings = usePreviewSettingsStore().currentSettings;
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
-      return withDirectives((openBlock(), createElementBlock("a", {
-        class: "poveste-toolbar-text-direction 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",
+      return withDirectives((openBlock(), createBlock(TopBarChipItem, {
+        class: "poveste-toolbar-text-direction",
         onClick: _cache[0] || (_cache[0] = ($event) => unref(settings).textDirection = unref(settings).textDirection === "ltr" ? "rtl" : "ltr")
-      }, [
-        createVNode(unref(Icon), {
-          icon: unref(settings).textDirection === "ltr" ? "fluent:text-paragraph-direction-right-16-regular" : "fluent:text-paragraph-direction-left-16-regular",
-          class: "htw-w-4 htw-h-4"
-        }, null, 8, ["icon"])
-      ])), [
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Icon), {
+            icon: unref(settings).textDirection === "ltr" ? "fluent:text-paragraph-direction-right-16-regular" : "fluent:text-paragraph-direction-left-16-regular",
+            class: "ptw-w-4 ptw-h-4"
+          }, null, 8, ["icon"])
+        ]),
+        _: 1
+      })), [
         [_directive_tooltip, `Switch to text direction ${unref(settings).textDirection === "ltr" ? "Right to Left" : "Left to Right"}`]
       ]);
     };

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

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

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

@@ -1,22 +1,45 @@
-import { defineComponent, createElementBlock, openBlock, createVNode, createElementVNode, unref, normalizeClass, toDisplayString } from "@poveste/vendors/vue";
+import { defineComponent, useCssVars, computed, createElementBlock, openBlock, createVNode, createElementVNode, unref, normalizeClass, createCommentVNode, toDisplayString } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 "use strict";
-const _hoisted_1 = { class: "poveste-toolbar-title htw-flex htw-items-center htw-gap-1 htw-text-gray-500 htw-flex-1 htw-truncate htw-min-w-0" };
+const _hoisted_1 = { class: "poveste-toolbar-title ptw-flex ptw-items-center ptw-gap-2 ptw-min-w-0" };
+const _hoisted_2 = { class: "ptw-flex ptw-flex-col ptw-justify-center ptw-min-w-0 ptw-leading-tight ptw-text-center ptw-h-[2.25rem]" };
+const _hoisted_3 = { class: "ptw-truncate ptw-text-sm ptw-font-medium ptw-text-gray-900 dark:ptw-text-gray-100" };
+const _hoisted_4 = {
+  key: 0,
+  class: "ptw-truncate ptw-text-xs ptw-text-gray-500 dark:ptw-text-gray-400"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ToolbarTitle",
   props: {
-    variant: {}
+    variant: {},
+    story: {}
   },
   setup(__props) {
+    useCssVars((_ctx) => ({
+      "b13fe2b2": iconColor.value
+    }));
+    const props = __props;
+    const icon = computed(() => props.variant?.icon ?? props.story?.icon ?? "carbon:cube");
+    const iconColor = computed(() => props.variant?.iconColor ?? props.story?.iconColor);
+    const title = computed(() => props.variant?.title ?? props.story?.title ?? "");
+    const subtitle = computed(() => {
+      if (props.variant && props.story && props.story.title !== props.variant.title) {
+        return props.story.title;
+      }
+      return void 0;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(unref(Icon), {
-          icon: __props.variant.icon ?? "carbon:cube",
-          class: normalizeClass(["htw-w-4 htw-h-4 htw-opacity-50", [
-            __props.variant.iconColor ? "bind-icon-color" : "htw-text-gray-500"
+          icon: icon.value,
+          class: normalizeClass(["ptw-w-4 ptw-h-4 ptw-flex-none", [
+            iconColor.value ? "bind-icon-color" : "ptw-text-gray-500 dark:ptw-text-gray-400"
           ]])
         }, null, 8, ["icon", "class"]),
-        createElementVNode("span", null, toDisplayString(__props.variant.title), 1)
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("span", _hoisted_3, toDisplayString(title.value), 1),
+          subtitle.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(subtitle.value), 1)) : createCommentVNode("", true)
+        ])
       ]);
     };
   }

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

@@ -6,9 +6,9 @@ import StoryListItem from "./StoryListItem.vue.js";
 "use strict";
 const _hoisted_1 = {
   "data-test-id": "story-group",
-  class: "poveste-story-group htw-my-2 first:htw-mt-0 last:htw-mb-0 htw-group"
+  class: "poveste-story-group ptw-my-2 first:ptw-mt-0 last:ptw-mb-0 ptw-group"
 };
-const _hoisted_2 = { class: "htw-truncate" };
+const _hoisted_2 = { class: "ptw-truncate" };
 const _hoisted_3 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StoryGroup",
@@ -28,11 +28,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         __props.group.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          _cache[0] || (_cache[0] = createElementVNode("div", { class: "htw-h-[1px] htw-bg-gray-500/10 htw-mx-6 htw-mb-2 group-first:htw-hidden" }, null, -1)),
+          _cache[0] || (_cache[0] = createElementVNode("div", { class: "ptw-h-[1px] ptw-bg-gray-500/10 ptw-mx-6 ptw-mb-2 group-first:ptw-hidden" }, null, -1)),
           createElementVNode("div", {
             role: "button",
             tabindex: "0",
-            class: "htw-px-0.5 htw-py-2 md:htw-py-1.5 htw-mx-1 htw-rounded-sm hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900 htw-cursor-pointer htw-select-none htw-flex htw-items-center htw-gap-2 htw-min-w-0 htw-opacity-50 hover:htw-opacity-100",
+            class: "ptw-px-0.5 ptw-py-2 md:ptw-py-1.5 ptw-mx-1 ptw-rounded-sm hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-900 ptw-cursor-pointer ptw-select-none ptw-flex ptw-items-center ptw-gap-2 ptw-min-w-0 ptw-opacity-50 hover:ptw-opacity-100",
             onClick: toggleOpen,
             onKeyup: [
               withKeys(toggleOpen, ["enter"]),
@@ -41,7 +41,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, [
             createVNode(unref(Icon), {
               icon: isFolderOpen.value ? "ri:subtract-line" : "ri:add-line",
-              class: "htw-w-4 htw-h-4 htw-ml-4 htw-rounded-sm htw-border htw-border-gray-500/40"
+              class: "ptw-w-4 ptw-h-4 ptw-ml-4 ptw-rounded-sm ptw-border ptw-border-gray-500/40"
             }, null, 8, ["icon"]),
             createElementVNode("span", _hoisted_2, toDisplayString(__props.group.title), 1)
           ], 32)

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

@@ -4,7 +4,7 @@ import StoryListFolder from "./StoryListFolder.vue.js";
 import StoryListItem from "./StoryListItem.vue.js";
 import _sfc_main$1 from "./StoryGroup.vue2.js";
 "use strict";
-const _hoisted_1 = { class: "poveste-story-list htw-overflow-y-auto" };
+const _hoisted_1 = { class: "poveste-story-list ptw-overflow-y-auto" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StoryList",
   props: {

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

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

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

@@ -7,9 +7,9 @@ const _hoisted_1 = {
   "data-test-id": "story-list-folder",
   class: "poveste-story-list-folder"
 };
-const _hoisted_2 = { class: "bind-tree-padding htw-flex htw-items-center htw-gap-2 htw-min-w-0" };
-const _hoisted_3 = { class: "htw-flex htw-flex-none htw-items-center htw-opacity-30 [.poveste-story-list-folder-button:hover_&]:htw-opacity-100 htw-ml-4 htw-w-4 htw-h-4 htw-rounded-sm htw-border htw-border-gray-500/40" };
-const _hoisted_4 = { class: "htw-truncate" };
+const _hoisted_2 = { class: "bind-tree-padding ptw-flex ptw-items-center ptw-gap-2 ptw-min-w-0" };
+const _hoisted_3 = { class: "ptw-flex ptw-flex-none ptw-items-center ptw-opacity-30 [.poveste-story-list-folder-button:hover_&]:ptw-opacity-100 ptw-ml-4 ptw-w-4 ptw-h-4 ptw-rounded-sm ptw-border ptw-border-gray-500/40" };
+const _hoisted_4 = { class: "ptw-truncate" };
 const _hoisted_5 = { key: 0 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StoryListFolder",
@@ -21,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v8d8133ee": folderPadding.value
+      "v32f93782": folderPadding.value
     }));
     const props = __props;
     const folderStore = useFolderStore();
@@ -39,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           role: "button",
           tabindex: "0",
-          class: "poveste-story-list-folder-button htw-px-0.5 htw-py-2 md:htw-py-1.5 htw-mx-1 htw-rounded-sm hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900 htw-cursor-pointer htw-select-none htw-flex",
+          class: "poveste-story-list-folder-button ptw-px-0.5 ptw-py-2 md:ptw-py-1.5 ptw-mx-1 ptw-rounded-sm hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-900 ptw-cursor-pointer ptw-select-none ptw-flex",
           onClick: toggleOpen,
           onKeyup: [
             withKeys(toggleOpen, ["enter"]),
@@ -50,8 +50,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("span", _hoisted_3, [
               createVNode(unref(Icon), {
                 icon: "carbon:caret-right",
-                class: normalizeClass(["htw-w-full htw-h-full htw-transition-transform htw-duration-150", {
-                  "htw-rotate-90": isFolderOpen.value
+                class: normalizeClass(["ptw-w-full ptw-h-full ptw-transition-transform ptw-duration-150", {
+                  "ptw-rotate-90": isFolderOpen.value
                 }])
               }, null, 8, ["class"])
             ]),

package/dist/bundled/components/tree/StoryListItem.vue.js

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

package/dist/bundled/components/tree/StoryListItem.vue2.js

@@ -4,11 +4,11 @@ import { useRoute } from "@poveste/vendors/vue-router";
 import { useScrollOnActive } from "../../util/scroll.js";
 import BaseListItemLink from "../base/BaseListItemLink.vue.js";
 "use strict";
-const _hoisted_1 = { class: "bind-tree-margin htw-flex htw-items-center htw-gap-2 htw-pl-4 htw-min-w-0" };
-const _hoisted_2 = { class: "htw-truncate" };
+const _hoisted_1 = { class: "bind-tree-margin ptw-flex ptw-items-center ptw-gap-2 ptw-pl-4 ptw-min-w-0" };
+const _hoisted_2 = { class: "ptw-truncate" };
 const _hoisted_3 = {
   key: 0,
-  class: "htw-opacity-40 htw-text-sm"
+  class: "ptw-opacity-40 ptw-text-sm"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StoryListItem",
@@ -18,8 +18,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v2411f6f6": filePadding.value,
-      "b2034f9c": _ctx.story.iconColor
+      "v09275fa8": filePadding.value,
+      "v8627d038": _ctx.story.iconColor
     }));
     const props = __props;
     const filePadding = computed(() => {
@@ -43,14 +43,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               storyId: __props.story.id
             }
           },
-          class: "htw-pl-0.5 htw-pr-2 htw-py-2 md:htw-py-1.5 htw-mx-1 htw-rounded-sm"
+          class: "ptw-pl-0.5 ptw-pr-2 ptw-py-2 md:ptw-py-1.5 ptw-mx-1 ptw-rounded-sm"
         }, {
           default: withCtx(({ active }) => [
             createElementVNode("span", _hoisted_1, [
               createVNode(unref(Icon), {
                 icon: __props.story.icon ?? "carbon:cube",
-                class: normalizeClass(["htw-w-5 htw-h-5 sm:htw-w-4 sm:htw-h-4 htw-flex-none", {
-                  "htw-text-primary-500": !active && !__props.story.iconColor,
+                class: normalizeClass(["ptw-w-5 ptw-h-5 sm:ptw-w-4 sm:ptw-h-4 ptw-flex-none", {
+                  "ptw-text-primary-500": !active && !__props.story.iconColor,
                   "bind-icon-color": !active && __props.story.iconColor
                 }])
               }, null, 8, ["icon", "class"]),

package/dist/bundled/index.js

@@ -11,6 +11,9 @@ async function mountMainApp() {
   const app = createApp(_sfc_main);
   app.use(createPinia());
   app.use(FloatingVue, {
+    // Anchor poppers inside the chrome scope so the @scope-wrapped chrome CSS
+    // reaches them. The default <body> teleport target is outside the scope.
+    container: ".poveste-app-root",
     overflowPadding: 4,
     arrowPadding: 8,
     themes: {

package/dist/bundled/sandbox.js

@@ -1,22 +1,41 @@
 import { applyState } from "@poveste/shared";
+import { usePreferredDark } from "@poveste/vendors/vue-use";
 import { createPinia } from "@poveste/vendors/pinia";
 import { files } from "virtual:$poveste-stories";
-import { ref, createApp, h, computed, watch, onMounted } from "@poveste/vendors/vue";
+import { ref, computed, watch, createApp, h, onMounted } from "@poveste/vendors/vue";
 import { parseQuery } from "@poveste/vendors/vue-router";
 import "./components/story/GenericMountStory.vue.js";
 import "./components/story/GenericRenderStory.vue.js";
 import { setupPluginApi } from "./plugin.js";
+import { resolvePreviewDark } from "./util/color-scheme.js";
 import { povesteConfig } from "./util/config.js";
-import { SANDBOX_READY, STATE_SYNC, PREVIEW_SETTINGS_SYNC } from "./util/const.js";
+import { SANDBOX_READY, STATE_SYNC, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT } from "./util/const.js";
 import { isDark } from "./util/dark.js";
 import { mapFile } from "./util/mapping.js";
-import { applyPreviewSettings } from "./util/preview-settings.js";
+import { loadStoredPreviewSettings, applyPreviewSettings, receivedSettings } from "./util/preview-settings.js";
 import { toRawDeep } from "./util/state.js";
 import _sfc_main from "./components/story/GenericMountStory.vue2.js";
 import _sfc_main$1 from "./components/story/GenericRenderStory.vue2.js";
 "use strict";
 const query = parseQuery(window.location.search);
 const file = ref(mapFile(files.find((f) => f.id === query.storyId)));
+const storedSettings = loadStoredPreviewSettings();
+if (storedSettings) {
+  applyPreviewSettings(storedSettings);
+}
+const prefersDark = usePreferredDark();
+const previewDark = computed(() => resolvePreviewDark(receivedSettings.colorScheme, prefersDark.value, isDark.value));
+watch(previewDark, (value) => {
+  if (value) {
+    document.documentElement.classList.add(povesteConfig.sandboxDarkClass);
+    document.documentElement.classList.add(povesteConfig.theme.darkClass);
+  } else {
+    document.documentElement.classList.remove(povesteConfig.sandboxDarkClass);
+    document.documentElement.classList.remove(povesteConfig.theme.darkClass);
+  }
+}, {
+  immediate: true
+});
 const app = createApp({
   name: "SandboxApp",
   setup() {
@@ -55,7 +74,7 @@ const app = createApp({
   },
   render() {
     return [
-      h("div", { class: "htw-sandbox-hidden" }, [
+      h("div", { class: "ptw-sandbox-hidden" }, [
         h(_sfc_main, {
           key: file.value.story.id,
           story: file.value.story
@@ -71,17 +90,24 @@ const app = createApp({
 });
 app.use(createPinia());
 app.mount("#app");
-watch(isDark, (value) => {
-  if (value) {
-    document.documentElement.classList.add(povesteConfig.sandboxDarkClass);
-    document.documentElement.classList.add(povesteConfig.theme.darkClass);
-  } else {
-    document.documentElement.classList.remove(povesteConfig.sandboxDarkClass);
-    document.documentElement.classList.remove(povesteConfig.theme.darkClass);
-  }
-}, {
-  immediate: true
-});
+document.body.classList.add("__poveste-render-story", "__poveste-render-custom-controls");
+let pendingFrame = null;
+let lastReportedHeight = -1;
+function reportHeight() {
+  pendingFrame = null;
+  const renderRoot = document.querySelector(".__poveste-render-story");
+  const h2 = renderRoot ? Math.ceil(renderRoot.getBoundingClientRect().height) : Math.ceil(document.body.scrollHeight);
+  if (h2 === lastReportedHeight) return;
+  lastReportedHeight = h2;
+  window.parent?.postMessage({ type: SANDBOX_HEIGHT, h: h2 }, window.location.origin);
+}
+function scheduleReport() {
+  if (pendingFrame !== null) return;
+  pendingFrame = requestAnimationFrame(reportHeight);
+}
+const ro = new ResizeObserver(scheduleReport);
+ro.observe(document.body);
+requestAnimationFrame(scheduleReport);
 if (import.meta.hot) {
   /* @__PURE__ */ setupPluginApi();
 }