@poveste/app 0.1.3 → 0.2.0

package/dist/app/style/floating.pcss

@@ -5,17 +5,17 @@
 }
 
 .v-popper--theme-dropdown {
-  .htw-dark & {
+  .ptw-dark & {
     .v-popper__inner {
-      @apply htw-bg-gray-700 htw-border-gray-850 htw-text-gray-100;
+      @apply ptw-bg-gray-700 ptw-border-gray-850 ptw-text-gray-100;
     }
 
     .v-popper__arrow-inner {
-      @apply htw-border-gray-700;
+      @apply ptw-border-gray-700;
     }
 
     .v-popper__arrow-outer {
-      @apply htw-border-gray-850;
+      @apply ptw-border-gray-850;
     }
   }
 

package/dist/app/style/main.pcss

@@ -73,7 +73,7 @@ button {
     background: transparent !important;
   }
 
-  .htw-prose {
+  .ptw-prose {
     h1, h2, h3, h4 {
       &:not(:hover) {
         .header-anchor[aria-hidden="true"] {
@@ -93,7 +93,7 @@ button {
     background-repeat: no-repeat;
     background-position: right;
 
-    .htw-dark & {
+    .ptw-dark & {
       background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
     }
   }

package/dist/app/style/sandbox.css

@@ -14,7 +14,7 @@ html {
   font-family: 'Noto Sans Display', system-ui, sans-serif;
 }
 
-.htw-sandbox-hidden {
+.ptw-sandbox-hidden {
   display: none;
 }
 

package/dist/bundle-main.js

@@ -1,3 +1,5 @@
+/* eslint-disable perfectionist/sort-imports -- global styles must load before app bundle */
+import 'virtual:$poveste-global-styles'
 import { mountMainApp } from './bundled/index.js'
 import './style.css'
 import './bundled/app.css'

package/dist/bundled/App.vue2.js

@@ -1,36 +1,51 @@
-import { defineComponent, ref, computed, watch, onMounted, resolveComponent, createElementBlock, openBlock, Fragment, createCommentVNode, createElementVNode, createVNode, unref, createBlock, normalizeStyle, withCtx, Transition } from "@poveste/vendors/vue";
+import { defineComponent, ref, computed, watch, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, createVNode, unref, createBlock, normalizeStyle, withCtx, Transition } from "@poveste/vendors/vue";
 import { useTitle } from "@poveste/vendors/vue-use";
 import { files, tree, onUpdate } from "virtual:$poveste-stories";
+import "./components/app/AppActions.vue.js";
 import "./components/app/AppHeader.vue.js";
 import Breadcrumb from "./components/app/Breadcrumb.vue.js";
 import "./components/app/InitialLoading.vue.js";
+import "./components/app/TopBar.vue.js";
 import BaseSplitPane from "./components/base/BaseSplitPane.vue.js";
 import "./components/command/CommandPromptsModal.vue.js";
+import "./components/layout/LayoutModal.vue.js";
 import "./components/search/SearchModal.vue.js";
 import "./components/story/GenericMountStory.vue.js";
 import "./components/tree/StoryList.vue.js";
 import { useCommandStore } from "./stores/command.js";
+import { useLayoutStore } from "./stores/layout.js";
 import { useStoryStore } from "./stores/story.js";
 import { povesteConfig } from "./util/config.js";
+import { toggleDark } from "./util/dark.js";
 import { onKeyboardShortcut } from "./util/keyboard.js";
 import { mapFile } from "./util/mapping.js";
 import { isMobile } from "./util/responsive.js";
 import _sfc_main$1 from "./components/story/GenericMountStory.vue2.js";
 import _sfc_main$2 from "./components/app/AppHeader.vue2.js";
-import _sfc_main$3 from "./components/tree/StoryList.vue2.js";
-import _sfc_main$4 from "./components/search/SearchModal.vue2.js";
-import _sfc_main$5 from "./components/command/CommandPromptsModal.vue2.js";
-import _sfc_main$6 from "./components/app/InitialLoading.vue2.js";
+import _sfc_main$3 from "./components/app/AppActions.vue2.js";
+import _sfc_main$4 from "./components/app/TopBar.vue2.js";
+import _sfc_main$5 from "./components/tree/StoryList.vue2.js";
+import _sfc_main$6 from "./components/layout/LayoutModal.vue2.js";
+import _sfc_main$7 from "./components/search/SearchModal.vue2.js";
+import _sfc_main$8 from "./components/command/CommandPromptsModal.vue2.js";
+import _sfc_main$9 from "./components/app/InitialLoading.vue2.js";
 "use strict";
-const _hoisted_1 = {
+const _hoisted_1 = { class: "poveste-app-root ptw-h-full" };
+const _hoisted_2 = {
   key: 0,
-  class: "poveste-app htw-hidden"
+  class: "poveste-app ptw-hidden"
 };
-const _hoisted_2 = {
+const _hoisted_3 = {
   key: 0,
-  class: "htw-h-full htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-800"
+  class: "ptw-h-full ptw-flex ptw-flex-col ptw-divide-y ptw-divide-gray-100 dark:ptw-divide-gray-800"
+};
+const _hoisted_4 = { class: "ptw-flex ptw-items-center ptw-gap-2 ptw-pr-4" };
+const _hoisted_5 = { class: "ptw-flex ptw-flex-col ptw-h-full ptw-bg-gray-100 dark:ptw-bg-gray-750 __poveste-pane-shadow-from-right" };
+const _hoisted_6 = { class: "ptw-flex ptw-flex-col ptw-h-full" };
+const _hoisted_7 = {
+  key: 2,
+  class: "ptw-h-full ptw-flex ptw-flex-col"
 };
-const _hoisted_3 = { class: "htw-flex htw-flex-col htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 __poveste-pane-shadow-from-right" };
 const __default__ = {
   name: "PovesteApp"
 };
@@ -69,6 +84,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }));
     const loadSearch = ref(false);
     const isSearchOpen = ref(false);
+    const isLayoutOpen = ref(false);
     watch(isSearchOpen, (value) => {
       if (value) {
         loadSearch.value = true;
@@ -78,6 +94,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       isSearchOpen.value = true;
       event.preventDefault();
     });
+    onKeyboardShortcut(["ctrl+shift+l", "meta+shift+l"], (event) => {
+      isLayoutOpen.value = !isLayoutOpen.value;
+      event.preventDefault();
+    });
+    onKeyboardShortcut(["ctrl+shift+d", "meta+shift+d"], (event) => {
+      event.preventDefault();
+      toggleDark();
+    });
     const loading = ref(false);
     if (import.meta.hot && !files.length) {
       loading.value = true;
@@ -90,75 +114,95 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       mounted.value = true;
     });
     const commandStore = useCommandStore();
+    const layoutStore = useLayoutStore();
     return (_ctx, _cache) => {
       const _component_RouterView = resolveComponent("RouterView");
-      return openBlock(), createElementBlock(Fragment, null, [
-        unref(storyStore).currentStory ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        unref(storyStore).currentStory ? (openBlock(), createElementBlock("div", _hoisted_2, [
           (openBlock(), createBlock(_sfc_main$1, {
             key: unref(storyStore).currentStory.id,
             story: unref(storyStore).currentStory
           }, null, 8, ["story"]))
         ])) : createCommentVNode("", true),
         createElementVNode("div", {
-          class: "htw-h-screen htw-bg-white dark:htw-bg-gray-700 dark:htw-text-gray-100",
+          class: "ptw-h-screen ptw-bg-gray-100 dark:ptw-bg-gray-750 dark:ptw-text-gray-100",
           style: normalizeStyle({
             // Prevent flash of content
             opacity: mounted.value ? 1 : 0
           })
         }, [
-          unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2, [
-            createVNode(_sfc_main$2, {
-              onSearch: _cache[0] || (_cache[0] = ($event) => isSearchOpen.value = true)
-            }),
+          unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, [
+              createVNode(_sfc_main$2, { class: "ptw-flex-1" }),
+              createVNode(_sfc_main$3, {
+                class: "ptw-flex-none",
+                onLayout: _cache[0] || (_cache[0] = ($event) => isLayoutOpen.value = true),
+                onSearch: _cache[1] || (_cache[1] = ($event) => isSearchOpen.value = true)
+              })
+            ]),
             createVNode(Breadcrumb, {
               tree: tree$1.value,
               stories: stories.value
             }, null, 8, ["tree", "stories"]),
-            createVNode(_component_RouterView, { class: "htw-grow" })
-          ])) : (openBlock(), createBlock(BaseSplitPane, {
+            createVNode(_component_RouterView, { class: "ptw-grow" })
+          ])) : unref(layoutStore).settings.storyListVisible ? (openBlock(), createBlock(BaseSplitPane, {
             key: 1,
             "save-id": "main-horiz",
             min: 5,
             max: 50,
             "default-split": 15,
-            class: "htw-h-full"
+            class: "ptw-h-full"
           }, {
             first: withCtx(() => [
-              createElementVNode("div", _hoisted_3, [
-                createVNode(_sfc_main$2, {
-                  class: "htw-flex-none",
-                  onSearch: _cache[1] || (_cache[1] = ($event) => isSearchOpen.value = true)
-                }),
-                createVNode(_sfc_main$3, {
+              createElementVNode("div", _hoisted_5, [
+                createVNode(_sfc_main$2, { class: "ptw-flex-none" }),
+                createVNode(_sfc_main$5, {
                   tree: tree$1.value,
                   stories: stories.value,
-                  class: "htw-flex-1"
+                  class: "ptw-flex-1"
                 }, null, 8, ["tree", "stories"])
               ])
             ]),
             last: withCtx(() => [
-              createVNode(_component_RouterView)
+              createElementVNode("div", _hoisted_6, [
+                createVNode(_sfc_main$4, {
+                  onLayout: _cache[2] || (_cache[2] = ($event) => isLayoutOpen.value = true),
+                  onSearch: _cache[3] || (_cache[3] = ($event) => isSearchOpen.value = true)
+                }),
+                createVNode(_component_RouterView, { class: "ptw-flex-1 ptw-min-h-0" })
+              ])
             ]),
             _: 1
-          })),
-          loadSearch.value ? (openBlock(), createBlock(_sfc_main$4, {
-            key: 2,
+          })) : (openBlock(), createElementBlock("div", _hoisted_7, [
+            createVNode(_sfc_main$4, {
+              onLayout: _cache[4] || (_cache[4] = ($event) => isLayoutOpen.value = true),
+              onSearch: _cache[5] || (_cache[5] = ($event) => isSearchOpen.value = true)
+            }),
+            createVNode(_component_RouterView, { class: "ptw-flex-1 ptw-min-h-0" })
+          ])),
+          !unref(isMobile) ? (openBlock(), createBlock(_sfc_main$6, {
+            key: 3,
+            shown: isLayoutOpen.value,
+            onClose: _cache[6] || (_cache[6] = ($event) => isLayoutOpen.value = false)
+          }, null, 8, ["shown"])) : createCommentVNode("", true),
+          loadSearch.value ? (openBlock(), createBlock(_sfc_main$7, {
+            key: 4,
             shown: isSearchOpen.value,
-            onClose: _cache[2] || (_cache[2] = ($event) => isSearchOpen.value = false)
+            onClose: _cache[7] || (_cache[7] = ($event) => isSearchOpen.value = false)
           }, null, 8, ["shown"])) : createCommentVNode("", true),
-          _ctx.__POVESTE_DEV__ ? (openBlock(), createBlock(_sfc_main$5, {
-            key: 3,
+          _ctx.__POVESTE_DEV__ ? (openBlock(), createBlock(_sfc_main$8, {
+            key: 5,
             shown: unref(commandStore).showPromptsModal,
-            onClose: _cache[3] || (_cache[3] = ($event) => unref(commandStore).showPromptsModal = false)
+            onClose: _cache[8] || (_cache[8] = ($event) => unref(commandStore).showPromptsModal = false)
           }, null, 8, ["shown"])) : createCommentVNode("", true)
         ], 4),
         createVNode(Transition, { name: "__poveste-fade" }, {
           default: withCtx(() => [
-            loading.value ? (openBlock(), createBlock(_sfc_main$6, { key: 0 })) : createCommentVNode("", true)
+            loading.value ? (openBlock(), createBlock(_sfc_main$9, { key: 0 })) : createCommentVNode("", true)
           ]),
           _: 1
         })
-      ], 64);
+      ]);
     };
   }
 });

package/dist/bundled/app.css

@@ -1,52 +1,63 @@
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-tree-margin[data-v-a12ff9e7] {
-  margin-left: var(--v2411f6f6);
+.bind-tree-margin[data-v-8b5cda46] {
+  margin-left: var(--v09275fa8);
 }
-.bind-icon-color[data-v-a12ff9e7] {
-  color: var(--b2034f9c);
+.bind-icon-color[data-v-8b5cda46] {
+  color: var(--v8627d038);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-tree-padding[data-v-18510a3c] {
-  padding-left: var(--v8d8133ee);
+.bind-tree-padding[data-v-5a91a083] {
+  padding-left: var(--v32f93782);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-79fbe0df] {
-  color: var(--v2ff034b2);
+.bind-icon-color[data-v-b1aa3e2c] {
+  color: var(--v3db71ace);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.landscape > div > .dragger[data-v-6c89c62e] {
+.bind-preview-bg[data-v-dcd1e9e2] {
+  background-color: var(--v2708c2ed);
+  color: var(--v4a6df57e);
+}
+}
+@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
+.bind-icon-color[data-v-ced59894] {
+  color: var(--b13fe2b2);
+}
+}
+@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
+.landscape > div > .dragger[data-v-02634f87] {
   width: .625rem;
 }
-.portrait > div > .dragger[data-v-6c89c62e] {
+.portrait > div > .dragger[data-v-02634f87] {
   height: .625rem;
 }
-.landscape > div > .dragger.dragger-offset-before[data-v-6c89c62e] {
+.landscape > div > .dragger.dragger-offset-before[data-v-02634f87] {
   right: 0;
 }
-.portrait > div > .dragger.dragger-offset-before[data-v-6c89c62e] {
+.portrait > div > .dragger.dragger-offset-before[data-v-02634f87] {
   bottom: 0;
 }
-.landscape > div > .dragger.dragger-offset-center[data-v-6c89c62e] {
+.landscape > div > .dragger.dragger-offset-center[data-v-02634f87] {
   right: -.3125rem;
 }
-.portrait > div > .dragger.dragger-offset-center[data-v-6c89c62e] {
+.portrait > div > .dragger.dragger-offset-center[data-v-02634f87] {
   bottom: -.3125rem;
 }
-.landscape > div > .dragger.dragger-offset-after[data-v-6c89c62e] {
+.landscape > div > .dragger.dragger-offset-after[data-v-02634f87] {
   right: -.625rem;
 }
-.portrait > div > .dragger.dragger-offset-after[data-v-6c89c62e] {
+.portrait > div > .dragger.dragger-offset-after[data-v-02634f87] {
   bottom: -.625rem;
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.htw-base-empty[data-v-1adb09aa]:not(.no-animation) {
-  animation: htw-base-empty-1adb09aa .15s .2s both;
+.ptw-base-empty[data-v-176506c5]:not(.no-animation) {
+  animation: ptw-base-empty-176506c5 .15s .2s both;
 }
-@keyframes htw-base-empty-1adb09aa {
+@keyframes ptw-base-empty-176506c5 {
 0% {
     opacity: 0;
 }
@@ -56,52 +67,46 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.__poveste-code-placeholder[data-v-82d96c7f] {
+.__poveste-code-placeholder[data-v-5ee6b7f7] {
   color: inherit;
   font-size: inherit;
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-preview-bg[data-v-26d08825] {
-  background-color: var(--v57972cd3);
-  color: var(--v07febf58);
+.__poveste-hatched-pattern[data-v-c1be54fa] {
+  background: repeating-linear-gradient(135deg,
+  transparent 0px,
+  transparent 32px,
+  currentColor 32px,
+  currentColor 64px);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-a3dc7302] {
-  color: var(--v70ef7b9c);
-}
-.bind-preview-bg[data-v-a3dc7302] {
-  background-color: var(--v960da962);
+.bind-preview-bg[data-v-996dc779] {
+  background-color: var(--v2ebc4fb8);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-e7e8e2de] {
-  color: var(--v6ef859d8);
-}
+.bind-icon-color[data-v-42097cb5] {
+  color: var(--v087cd7b6);
 }
-@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.__poveste-hatched-pattern[data-v-c1be54fa] {
-  background: repeating-linear-gradient(135deg,
-  transparent 0px,
-  transparent 32px,
-  currentColor 32px,
-  currentColor 64px);
+.bind-preview-bg[data-v-42097cb5] {
+  background-color: var(--v6d9d16a6);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-preview-bg[data-v-275bf3ef] {
-  background-color: var(--v30eb5fc0);
+.bind-icon-color[data-v-363b3d4f] {
+  color: var(--v3223e976);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-b675426a] {
-  color: var(--v5162df32);
+.bind-icon-color[data-v-ca14569e] {
+  color: var(--fcfb0a0c);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-1d298079] {
-  color: var(--v4009a800);
+.bind-icon-color[data-v-14c2dacd] {
+  color: var(--e0c29708);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
@@ -110,7 +115,7 @@ img.colorize-black[data-v-f632abed] {
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-0c821aae] {
-  color: var(--v12a213a0);
+.bind-icon-color[data-v-81e4dd33] {
+  color: var(--dacfd852);
 }
 }

package/dist/bundled/components/HomeView.vue2.js

@@ -5,9 +5,9 @@ import { customLogos, povesteConfig } from "../util/config.js";
 import "./app/HomeCounter.vue.js";
 import _sfc_main$1 from "./app/HomeCounter.vue2.js";
 "use strict";
-const _hoisted_1 = { class: "poveste-home-view htw-flex md:htw-flex-col htw-gap-12 htw-items-center htw-justify-center htw-h-full" };
+const _hoisted_1 = { class: "poveste-home-view ptw-flex md:ptw-flex-col ptw-gap-12 ptw-items-center ptw-justify-center ptw-h-full" };
 const _hoisted_2 = ["src"];
-const _hoisted_3 = { class: "htw-flex !md:htw-flex-col htw-flex-wrap htw-justify-evenly htw-gap-2 htw-px-4 htw-py-2 htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded htw-border htw-border-gray-500/30" };
+const _hoisted_3 = { class: "ptw-flex !md:ptw-flex-col ptw-flex-wrap ptw-justify-evenly ptw-gap-2 ptw-px-4 ptw-py-2 ptw-bg-gray-100 dark:ptw-bg-gray-750 ptw-rounded ptw-border ptw-border-gray-500/30" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "HomeView",
   setup(__props) {
@@ -38,7 +38,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("img", {
           src: logoUrl.value,
           alt: "Logo",
-          class: "htw-w-64 htw-h-64 htw-opacity-25 htw-mb-8 htw-hidden md:htw-block"
+          class: "ptw-w-64 ptw-h-64 ptw-opacity-25 ptw-mb-8 ptw-hidden md:ptw-block"
         }, null, 8, _hoisted_2),
         createElementVNode("div", _hoisted_3, [
           createVNode(_sfc_main$1, {

package/dist/bundled/components/app/AppActions.vue.js

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

package/dist/bundled/components/app/AppActions.vue2.js

@@ -0,0 +1,76 @@
+import { defineComponent, computed, resolveDirective, createBlock, openBlock, withCtx, withDirectives, createCommentVNode, unref, createVNode } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import { povesteConfig } from "../../util/config.js";
+import { isDark, toggleDark } from "../../util/dark.js";
+import { isMobile } from "../../util/responsive.js";
+import { makeTooltip } from "../../util/tooltip.js";
+import TopBarChip from "./TopBarChip.vue.js";
+import TopBarChipItem from "./TopBarChipItem.vue.js";
+"use strict";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AppActions",
+  emits: {
+    search: () => true,
+    layout: () => true
+  },
+  setup(__props) {
+    const themeIcon = computed(() => {
+      return isDark.value ? "carbon:moon" : "carbon:sun";
+    });
+    return (_ctx, _cache) => {
+      const _directive_tooltip = resolveDirective("tooltip");
+      return openBlock(), createBlock(TopBarChip, null, {
+        default: withCtx(() => [
+          !unref(isMobile) ? withDirectives((openBlock(), createBlock(TopBarChipItem, {
+            key: 0,
+            "aria-label": "Open layout customization",
+            "data-test-id": "layout-btn",
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("layout"))
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(Icon), {
+                icon: "carbon:panel-expansion",
+                class: "ptw-w-4 ptw-h-4"
+              })
+            ]),
+            _: 1
+          })), [
+            [_directive_tooltip, unref(makeTooltip)("Layout", ({ isMac }) => isMac ? "meta+shift+l" : "ctrl+shift+l")]
+          ]) : createCommentVNode("", true),
+          withDirectives((openBlock(), createBlock(TopBarChipItem, {
+            "data-test-id": "search-btn",
+            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("search"))
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(Icon), {
+                icon: "carbon:search",
+                class: "ptw-w-4 ptw-h-4"
+              })
+            ]),
+            _: 1
+          })), [
+            [_directive_tooltip, unref(makeTooltip)("Search", ({ isMac }) => isMac ? "meta+k" : "ctrl+k")]
+          ]),
+          !unref(povesteConfig).theme.hideColorSchemeSwitch ? withDirectives((openBlock(), createBlock(TopBarChipItem, {
+            key: 1,
+            onClick: _cache[2] || (_cache[2] = ($event) => unref(toggleDark)())
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(Icon), {
+                icon: themeIcon.value,
+                class: "ptw-w-4 ptw-h-4"
+              }, null, 8, ["icon"])
+            ]),
+            _: 1
+          })), [
+            [_directive_tooltip, unref(makeTooltip)("Toggle dark mode", ({ isMac }) => isMac ? "meta+shift+d" : "ctrl+shift+d")]
+          ]) : createCommentVNode("", true)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/app/AppHeader.vue2.js

@@ -1,66 +1,24 @@
-import { defineComponent, computed, resolveDirective, createElementBlock, openBlock, createElementVNode, unref, createVNode, withDirectives, createCommentVNode } from "@poveste/vendors/vue";
-import { Icon } from "@poveste/vendors/iconify";
+import { defineComponent, createElementBlock, openBlock, createElementVNode, unref, createVNode } from "@poveste/vendors/vue";
 import { povesteConfig } from "../../util/config.js";
-import { isDark, toggleDark } from "../../util/dark.js";
-import { onKeyboardShortcut } from "../../util/keyboard.js";
-import { makeTooltip } from "../../util/tooltip.js";
 import "./AppLogo.vue.js";
 import _sfc_main$1 from "./AppLogo.vue2.js";
 "use strict";
-const _hoisted_1 = { class: "poveste-app-header htw-px-4 htw-h-16 htw-flex htw-items-center htw-gap-2" };
-const _hoisted_2 = { class: "htw-py-3 sm:htw-py-4 htw-flex-1 htw-h-full htw-flex htw-items-center htw-pr-2" };
+const _hoisted_1 = { class: "poveste-app-header ptw-px-4 ptw-h-14 ptw-flex ptw-items-center ptw-gap-2" };
+const _hoisted_2 = { class: "ptw-py-3 sm:ptw-py-4 ptw-flex-1 ptw-h-full ptw-flex ptw-items-center ptw-pr-2" };
 const _hoisted_3 = ["href"];
-const _hoisted_4 = { class: "htw-ml-auto htw-flex-none htw-flex" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "AppHeader",
-  emits: {
-    search: () => true
-  },
   setup(__props) {
-    const themeIcon = computed(() => {
-      return isDark.value ? "carbon:moon" : "carbon:sun";
-    });
-    onKeyboardShortcut(["ctrl+shift+d", "meta+shift+d"], (event) => {
-      event.preventDefault();
-      toggleDark();
-    });
     return (_ctx, _cache) => {
-      const _directive_tooltip = resolveDirective("tooltip");
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
           createElementVNode("a", {
             href: unref(povesteConfig).theme?.logoHref,
             target: "_blank",
-            class: "htw-w-full htw-h-full htw-flex htw-items-center"
+            class: "ptw-w-full ptw-h-full ptw-flex ptw-items-center"
           }, [
-            createVNode(_sfc_main$1, { class: "htw-max-w-full htw-max-h-full" })
+            createVNode(_sfc_main$1, { class: "ptw-max-w-full ptw-max-h-full" })
           ], 8, _hoisted_3)
-        ]),
-        createElementVNode("div", _hoisted_4, [
-          withDirectives((openBlock(), createElementBlock("a", {
-            class: "htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100",
-            "data-test-id": "search-btn",
-            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("search"))
-          }, [
-            createVNode(unref(Icon), {
-              icon: "carbon:search",
-              class: "htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
-            })
-          ])), [
-            [_directive_tooltip, unref(makeTooltip)("Search", ({ isMac }) => isMac ? "meta+k" : "ctrl+k")]
-          ]),
-          !unref(povesteConfig).theme.hideColorSchemeSwitch ? withDirectives((openBlock(), createElementBlock("a", {
-            key: 0,
-            class: "htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100",
-            onClick: _cache[1] || (_cache[1] = ($event) => unref(toggleDark)())
-          }, [
-            createVNode(unref(Icon), {
-              icon: themeIcon.value,
-              class: "htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
-            }, null, 8, ["icon"])
-          ])), [
-            [_directive_tooltip, unref(makeTooltip)("Toggle dark mode", ({ isMac }) => isMac ? "meta+shift+d" : "ctrl+shift+d")]
-          ]) : createCommentVNode("", true)
         ])
       ]);
     };

package/dist/bundled/components/app/Breadcrumb.vue.js

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