@poveste/app 0.1.2 → 0.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan"
@@ -15,10 +15,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "files": [
-    "dist",
-    "src"
-  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -27,12 +23,16 @@
     "./*": "./*"
   },
   "types": "./src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
   "dependencies": {
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
-    "@poveste/vendors": "^0.1.2",
-    "@poveste/controls": "^0.1.2",
-    "@poveste/shared": "^0.1.2"
+    "@poveste/controls": "^0.2.0",
+    "@poveste/shared": "^0.2.0",
+    "@poveste/vendors": "^0.2.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.15",

package/src/app/App.vue

@@ -9,17 +9,22 @@ import type { StoryFile, Tree } from './types'
 import { useTitle } from '@vueuse/core'
 import { onUpdate, files as rawFiles, tree as rawTree } from 'virtual:$poveste-stories'
 import { computed, onMounted, ref, watch } from 'vue'
+import AppActions from './components/app/AppActions.vue'
 import AppHeader from './components/app/AppHeader.vue'
 import Breadcrumb from './components/app/Breadcrumb.vue'
 import InitialLoading from './components/app/InitialLoading.vue'
+import TopBar from './components/app/TopBar.vue'
 import BaseSplitPane from './components/base/BaseSplitPane.vue'
 import CommandPromptsModal from './components/command/CommandPromptsModal.vue'
+import LayoutModal from './components/layout/LayoutModal.vue'
 import SearchModal from './components/search/SearchModal.vue'
 import GenericMountStory from './components/story/GenericMountStory.vue'
 import StoryList from './components/tree/StoryList.vue'
 import { useCommandStore } from './stores/command'
+import { useLayoutStore } from './stores/layout'
 import { useStoryStore } from './stores/story'
 import { povesteConfig } from './util/config'
+import { toggleDark } from './util/dark'
 import { onKeyboardShortcut } from './util/keyboard'
 import { mapFile } from './util/mapping'
 import { isMobile } from './util/responsive'
@@ -61,10 +66,9 @@ useTitle(computed(() => {
   return povesteConfig.theme.title
 }))
 
-// Search
-
 const loadSearch = ref(false)
 const isSearchOpen = ref(false)
+const isLayoutOpen = ref(false)
 
 watch(isSearchOpen, (value) => {
   if (value) {
@@ -77,6 +81,16 @@ onKeyboardShortcut(['ctrl+k', 'meta+k'], (event) => {
   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 && !rawFiles.length) {
@@ -92,81 +106,110 @@ onMounted(() => {
 })
 
 const commandStore = useCommandStore()
+const layoutStore = useLayoutStore()
 </script>
 
 <template>
-  <div
-    v-if="storyStore.currentStory"
-    class="poveste-app htw-hidden"
-  >
-    <GenericMountStory
-      :key="storyStore.currentStory.id"
-      :story="storyStore.currentStory"
-    />
-  </div>
-
-  <div
-    class="htw-h-screen htw-bg-white dark:htw-bg-gray-700 dark:htw-text-gray-100"
-    :style="{
-      // Prevent flash of content
-      opacity: mounted ? 1 : 0,
-    }"
-  >
+  <div class="poveste-app-root ptw-h-full">
     <div
-      v-if="isMobile"
-      class="htw-h-full htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-800"
+      v-if="storyStore.currentStory"
+      class="poveste-app ptw-hidden"
     >
-      <AppHeader @search="isSearchOpen = true" />
-      <Breadcrumb
-        :tree="tree"
-        :stories="stories"
+      <GenericMountStory
+        :key="storyStore.currentStory.id"
+        :story="storyStore.currentStory"
       />
-      <RouterView class="htw-grow" />
     </div>
 
-    <BaseSplitPane
-      v-else
-      save-id="main-horiz"
-      :min="5"
-      :max="50"
-      :default-split="15"
-      class="htw-h-full"
+    <div
+      class="ptw-h-screen ptw-bg-gray-100 dark:ptw-bg-gray-750 dark:ptw-text-gray-100"
+      :style="{
+        // Prevent flash of content
+        opacity: mounted ? 1 : 0,
+      }"
     >
-      <template #first>
-        <div class="htw-flex htw-flex-col htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 __poveste-pane-shadow-from-right">
-          <AppHeader
-            class="htw-flex-none"
+      <div
+        v-if="isMobile"
+        class="ptw-h-full ptw-flex ptw-flex-col ptw-divide-y ptw-divide-gray-100 dark:ptw-divide-gray-800"
+      >
+        <div class="ptw-flex ptw-items-center ptw-gap-2 ptw-pr-4">
+          <AppHeader class="ptw-flex-1" />
+          <AppActions
+            class="ptw-flex-none"
+            @layout="isLayoutOpen = true"
             @search="isSearchOpen = true"
           />
-          <StoryList
-            :tree="tree"
-            :stories="stories"
-            class="htw-flex-1"
-          />
         </div>
-      </template>
-
-      <template #last>
-        <RouterView />
-      </template>
-    </BaseSplitPane>
-
-    <SearchModal
-      v-if="loadSearch"
-      :shown="isSearchOpen"
-      @close="isSearchOpen = false"
-    />
-
-    <CommandPromptsModal
-      v-if="__POVESTE_DEV__"
-      :shown="commandStore.showPromptsModal"
-      @close="commandStore.showPromptsModal = false"
-    />
-  </div>
+        <Breadcrumb
+          :tree="tree"
+          :stories="stories"
+        />
+        <RouterView class="ptw-grow" />
+      </div>
+
+      <BaseSplitPane
+        v-else-if="layoutStore.settings.storyListVisible"
+        save-id="main-horiz"
+        :min="5"
+        :max="50"
+        :default-split="15"
+        class="ptw-h-full"
+      >
+        <template #first>
+          <div class="ptw-flex ptw-flex-col ptw-h-full ptw-bg-gray-100 dark:ptw-bg-gray-750 __poveste-pane-shadow-from-right">
+            <AppHeader class="ptw-flex-none" />
+            <StoryList
+              :tree="tree"
+              :stories="stories"
+              class="ptw-flex-1"
+            />
+          </div>
+        </template>
+
+        <template #last>
+          <div class="ptw-flex ptw-flex-col ptw-h-full">
+            <TopBar
+              @layout="isLayoutOpen = true"
+              @search="isSearchOpen = true"
+            />
+            <RouterView class="ptw-flex-1 ptw-min-h-0" />
+          </div>
+        </template>
+      </BaseSplitPane>
+      <div
+        v-else
+        class="ptw-h-full ptw-flex ptw-flex-col"
+      >
+        <TopBar
+          @layout="isLayoutOpen = true"
+          @search="isSearchOpen = true"
+        />
+        <RouterView class="ptw-flex-1 ptw-min-h-0" />
+      </div>
+
+      <LayoutModal
+        v-if="!isMobile"
+        :shown="isLayoutOpen"
+        @close="isLayoutOpen = false"
+      />
+
+      <SearchModal
+        v-if="loadSearch"
+        :shown="isSearchOpen"
+        @close="isSearchOpen = false"
+      />
 
-  <transition name="__poveste-fade">
-    <InitialLoading
-      v-if="loading"
-    />
-  </transition>
+      <CommandPromptsModal
+        v-if="__POVESTE_DEV__"
+        :shown="commandStore.showPromptsModal"
+        @close="commandStore.showPromptsModal = false"
+      />
+    </div>
+
+    <transition name="__poveste-fade">
+      <InitialLoading
+        v-if="loading"
+      />
+    </transition>
+  </div>
 </template>

package/src/app/components/HomeView.vue

@@ -34,13 +34,13 @@ const stats = computed(() => {
 </script>
 
 <template>
-  <div class="poveste-home-view htw-flex md:htw-flex-col htw-gap-12 htw-items-center htw-justify-center htw-h-full">
+  <div class="poveste-home-view ptw-flex md:ptw-flex-col ptw-gap-12 ptw-items-center ptw-justify-center ptw-h-full">
     <img
       :src="logoUrl"
       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"
     >
-    <div 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">
+    <div 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">
       <HomeCounter
         title="Stories"
         icon="carbon:cube"

package/src/app/components/app/AppActions.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { povesteConfig } from '../../util/config'
+import { isDark, toggleDark } from '../../util/dark'
+import { isMobile } from '../../util/responsive'
+import { makeTooltip } from '../../util/tooltip'
+import TopBarChip from './TopBarChip.vue'
+import TopBarChipItem from './TopBarChipItem.vue'
+
+defineEmits({
+  search: () => true,
+  layout: () => true,
+})
+
+const themeIcon = computed(() => {
+  return isDark.value ? 'carbon:moon' : 'carbon:sun'
+})
+</script>
+
+<template>
+  <TopBarChip>
+    <TopBarChipItem
+      v-if="!isMobile"
+      v-tooltip="makeTooltip('Layout', ({ isMac }) => isMac ? 'meta+shift+l' : 'ctrl+shift+l')"
+      aria-label="Open layout customization"
+      data-test-id="layout-btn"
+      @click="$emit('layout')"
+    >
+      <Icon
+        icon="carbon:panel-expansion"
+        class="ptw-w-4 ptw-h-4"
+      />
+    </TopBarChipItem>
+
+    <TopBarChipItem
+      v-tooltip="makeTooltip('Search', ({ isMac }) => isMac ? 'meta+k' : 'ctrl+k')"
+      data-test-id="search-btn"
+      @click="$emit('search')"
+    >
+      <Icon
+        icon="carbon:search"
+        class="ptw-w-4 ptw-h-4"
+      />
+    </TopBarChipItem>
+
+    <TopBarChipItem
+      v-if="!povesteConfig.theme.hideColorSchemeSwitch"
+      v-tooltip="makeTooltip('Toggle dark mode', ({ isMac }) => isMac ? 'meta+shift+d' : 'ctrl+shift+d')"
+      @click="toggleDark()"
+    >
+      <Icon
+        :icon="themeIcon"
+        class="ptw-w-4 ptw-h-4"
+      />
+    </TopBarChipItem>
+  </TopBarChip>
+</template>

package/src/app/components/app/AppHeader.vue

@@ -1,63 +1,20 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
 import { povesteConfig } from '../../util/config'
-import { isDark, toggleDark } from '../../util/dark'
-import { onKeyboardShortcut } from '../../util/keyboard'
-import { makeTooltip } from '../../util/tooltip'
 import AppLogo from './AppLogo.vue'
-
-defineEmits({
-  search: () => true,
-})
-
-const themeIcon = computed(() => {
-  return isDark.value ? 'carbon:moon' : 'carbon:sun'
-})
-
-onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
-  event.preventDefault()
-  toggleDark()
-})
 </script>
 
 <template>
   <div
-    class="poveste-app-header htw-px-4 htw-h-16 htw-flex htw-items-center htw-gap-2"
+    class="poveste-app-header ptw-px-4 ptw-h-14 ptw-flex ptw-items-center ptw-gap-2"
   >
-    <div class="htw-py-3 sm:htw-py-4 htw-flex-1 htw-h-full htw-flex htw-items-center htw-pr-2">
+    <div class="ptw-py-3 sm:ptw-py-4 ptw-flex-1 ptw-h-full ptw-flex ptw-items-center ptw-pr-2">
       <a
         :href="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"
       >
         <AppLogo
-          class="htw-max-w-full htw-max-h-full"
-        />
-      </a>
-    </div>
-    <div class="htw-ml-auto htw-flex-none htw-flex">
-      <a
-        v-tooltip="makeTooltip('Search', ({ isMac }) => isMac ? 'meta+k' : 'ctrl+k')"
-        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"
-        @click="$emit('search')"
-      >
-        <Icon
-          icon="carbon:search"
-          class="htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
-        />
-      </a>
-
-      <a
-        v-if="!povesteConfig.theme.hideColorSchemeSwitch"
-        v-tooltip="makeTooltip('Toggle dark mode', ({ isMac }) => isMac ? 'meta+shift+d' : 'ctrl+shift+d')"
-        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"
-        @click="toggleDark()"
-      >
-        <Icon
-          :icon="themeIcon"
-          class="htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
+          class="ptw-max-w-full ptw-max-h-full"
         />
       </a>
     </div>

package/src/app/components/app/Breadcrumb.vue

@@ -37,7 +37,7 @@ watch(story, () => {
 <template>
   <div class="poveste-breadcrumb">
     <a
-      class="htw-px-6 htw-h-12 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-flex htw-gap-2 htw-flex-wrap htw-w-full htw-items-center"
+      class="ptw-px-6 ptw-h-12 hover:ptw-text-primary-500 dark:hover:ptw-text-primary-400 ptw-cursor-pointer ptw-flex ptw-gap-2 ptw-flex-wrap ptw-w-full ptw-items-center"
       @click="openMenu"
     >
       <template v-if="story">
@@ -48,21 +48,21 @@ watch(story, () => {
           <span>
             {{ file }}
           </span>
-          <span class="htw-opacity-40">
+          <span class="ptw-opacity-40">
             /
           </span>
         </template>
-        <span class="htw-flex htw-items-center htw-gap-2">
+        <span class="ptw-flex ptw-items-center ptw-gap-2">
           <Icon
             :icon="story.icon ?? 'carbon:cube'"
-            class="htw-w-5 htw-h-5 htw-flex-none"
+            class="ptw-w-5 ptw-h-5 ptw-flex-none"
             :class="{
-              'htw-text-primary-500': !story.iconColor,
+              'ptw-text-primary-500': !story.iconColor,
               'bind-icon-color': story.iconColor,
             }"
           />
           {{ story.title }}
-          <span class="htw-opacity-40 htw-text-sm">
+          <span class="ptw-opacity-40 ptw-text-sm">
             {{ story.variants.length }}
           </span>
         </span>
@@ -73,7 +73,7 @@ watch(story, () => {
 
       <Icon
         icon="carbon:chevron-sort"
-        class="htw-w-5 htw-h-5 htw-shrink-0 htw-ml-auto"
+        class="ptw-w-5 ptw-h-5 ptw-shrink-0 ptw-ml-auto"
       />
     </a>
   </div>
@@ -86,7 +86,7 @@ watch(story, () => {
     <StoryList
       :tree="tree"
       :stories="stories"
-      class="htw-flex-1 htw-overflow-y-scroll"
+      class="ptw-flex-1 ptw-overflow-y-scroll"
     />
   </MobileOverlay>
 </template>

package/src/app/components/app/HomeCounter.vue

@@ -18,19 +18,19 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="htw-p-2 htw-flex htw-items-center htw-gap-x-2">
+  <div class="ptw-p-2 ptw-flex ptw-items-center ptw-gap-x-2">
     <Icon
       :icon="props.icon"
-      class="htw-text-2xl htw-text-gray-700 dark:htw-text-gray-300 htw-flex-none"
+      class="ptw-text-2xl ptw-text-gray-700 dark:ptw-text-gray-300 ptw-flex-none"
     />
-    <div class="htw-flex htw-flex-col htw-leading-none">
+    <div class="ptw-flex ptw-flex-col ptw-leading-none">
       <span
-        class="htw-text-primary-500 htw-min-w-[80px] htw-font-bold"
+        class="ptw-text-primary-500 ptw-min-w-[80px] ptw-font-bold"
       >
         {{ count }}
       </span>
       <span
-        class="htw-text-sm htw-text-gray-900 dark:htw-text-gray-100"
+        class="ptw-text-sm ptw-text-gray-900 dark:ptw-text-gray-100"
       >
         {{ title }}
       </span>

package/src/app/components/app/InitialLoading.vue

@@ -17,11 +17,11 @@ if (import.meta.hot) {
 </script>
 
 <template>
-  <div class="poveste-initial-loading htw-fixed htw-inset-0 htw-bg-white dark:htw-bg-gray-700 htw-flex htw-flex-col htw-gap-6 htw-items-center htw-justify-center">
+  <div class="poveste-initial-loading ptw-fixed ptw-inset-0 ptw-bg-white dark:ptw-bg-gray-700 ptw-flex ptw-flex-col ptw-gap-6 ptw-items-center ptw-justify-center">
     <transition name="__poveste-fade">
       <div
         v-if="progress.total > 0"
-        class="htw-grid htw-gap-2"
+        class="ptw-grid ptw-gap-2"
         :style="{
           gridTemplateColumns: `repeat(${Math.min(Math.ceil(Math.sqrt(progress.total)), maxCols)}, minmax(0, 1fr))`,
         }"
@@ -29,12 +29,12 @@ if (import.meta.hot) {
         <div
           v-for="n in progress.total"
           :key="n"
-          class="htw-bg-primary-500/10 htw-rounded-full"
+          class="ptw-bg-primary-500/10 ptw-rounded-full"
         >
           <div
-            class="htw-w-3 htw-h-3 htw-bg-primary-500 htw-rounded-full htw-duration-150 htw-ease-out"
+            class="ptw-w-3 ptw-h-3 ptw-bg-primary-500 ptw-rounded-full ptw-duration-150 ptw-ease-out"
             :class="{
-              'htw-transition-transform htw-scale-0': n >= progress.loaded,
+              'ptw-transition-transform ptw-scale-0': n >= progress.loaded,
             }"
           />
         </div>

package/src/app/components/app/MobileOverlay.vue

@@ -13,17 +13,17 @@ const emit = defineEmits<{ (e: 'close'): void }>()
   <transition name="__poveste-fade-bottom">
     <div
       v-if="opened"
-      class="poveste-mobile-overlay htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col"
+      class="poveste-mobile-overlay ptw-absolute ptw-z-10 ptw-bg-white dark:ptw-bg-gray-700 ptw-w-screen ptw-h-screen ptw-inset-0 ptw-overflow-hidden ptw-flex ptw-flex-col"
     >
-      <div class="htw-p-4 htw-h-16 htw-flex htw-border-b htw-border-gray-100 dark:htw-border-gray-800 htw-items-center htw-place-content-between">
-        <span class="htw-text-gray-500">{{ title }}</span>
+      <div class="ptw-p-4 ptw-h-16 ptw-flex ptw-border-b ptw-border-gray-100 dark:ptw-border-gray-800 ptw-items-center ptw-place-content-between">
+        <span class="ptw-text-gray-500">{{ title }}</span>
         <a
-          class="htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer"
+          class="ptw-p-1 hover:ptw-text-primary-500 dark:hover:ptw-text-primary-400 ptw-cursor-pointer"
           @click="emit('close')"
         >
           <Icon
             icon="carbon:close"
-            class="htw-w-8 htw-h-8 htw-shrink-0"
+            class="ptw-w-8 ptw-h-8 ptw-shrink-0"
           />
         </a>
       </div>

package/src/app/components/app/TopBar.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { useStoryStore } from '../../stores/story'
+import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
+import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
+import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
+import ToolbarResponsiveSize from '../toolbar/ToolbarResponsiveSize.vue'
+import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
+import ToolbarTitle from '../toolbar/ToolbarTitle.vue'
+import AppActions from './AppActions.vue'
+import TopBarChip from './TopBarChip.vue'
+
+defineEmits({
+  search: () => true,
+  layout: () => true,
+})
+
+const storyStore = useStoryStore()
+</script>
+
+<template>
+  <div class="poveste-top-bar ptw-flex-none ptw-grid ptw-grid-cols-[1fr_auto_1fr] ptw-items-center ptw-h-14 ptw-px-4 ptw-gap-3">
+    <AppActions
+      class="ptw-justify-self-start"
+      @layout="$emit('layout')"
+      @search="$emit('search')"
+    />
+
+    <TopBarChip
+      v-if="storyStore.currentStory || storyStore.currentVariant"
+      class="ptw-px-6 ptw-py-1.5 ptw-max-w-full"
+    >
+      <ToolbarTitle
+        :variant="storyStore.currentVariant ?? undefined"
+        :story="storyStore.currentStory ?? undefined"
+      />
+    </TopBarChip>
+    <span v-else />
+
+    <TopBarChip
+      v-if="storyStore.currentStory && !storyStore.currentStory.docsOnly"
+      class="ptw-justify-self-end"
+    >
+      <ToolbarResponsiveSize
+        v-if="storyStore.currentVariant && !storyStore.currentVariant.responsiveDisabled"
+      />
+      <ToolbarBackground />
+      <ToolbarTextDirection />
+      <ToolbarNewTab
+        v-if="storyStore.currentVariant"
+        :variant="storyStore.currentVariant"
+        :story="storyStore.currentStory"
+      />
+      <DevOnlyToolbarOpenInEditor
+        v-if="__POVESTE_DEV__"
+        :file="storyStore.currentStory.file?.filePath"
+        tooltip="Edit story in editor"
+      />
+    </TopBarChip>
+  </div>
+</template>

package/src/app/components/app/TopBarChip.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="poveste-top-bar-chip ptw-flex ptw-items-center ptw-bg-gradient-to-b ptw-from-white/85 ptw-to-white/60 dark:ptw-from-gray-800/65 dark:ptw-to-gray-800/40 ptw-backdrop-blur-md ptw-border ptw-border-white/60 dark:ptw-border-white/15 ptw-rounded-lg ptw-overflow-hidden ptw-shadow-md">
+    <slot />
+  </div>
+</template>

package/src/app/components/app/TopBarChipItem.vue

@@ -0,0 +1,7 @@
+<template>
+  <a
+    class="poveste-top-bar-chip-item ptw-flex ptw-items-center ptw-gap-1 ptw-px-2.5 ptw-py-1.5 hover:ptw-bg-white/50 active:ptw-bg-white/70 dark:hover:ptw-bg-white/10 dark:active:ptw-bg-white/15 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"
+  >
+    <slot />
+  </a>
+</template>

package/src/app/components/base/BaseButton.vue

@@ -22,10 +22,10 @@ const comp = computed(() => {
 <template>
   <component
     :is="comp"
-    class="poveste-base-button htw-rounded htw-cursor-pointer"
+    class="poveste-base-button ptw-rounded ptw-cursor-pointer"
     :class="{
-      'htw-bg-primary-200 dark:htw-bg-primary-800 hover:htw-bg-primary-300 dark:hover:htw-bg-primary-700': color === 'primary' || !color,
-      'htw-bg-grey-100 dark:htw-bg-grey-900 hover:htw-bg-grey-200 dark:hover:htw-bg-grey-800': color === 'grey',
+      'ptw-bg-primary-200 dark:ptw-bg-primary-800 hover:ptw-bg-primary-300 dark:hover:ptw-bg-primary-700': color === 'primary' || !color,
+      'ptw-bg-grey-100 dark:ptw-bg-grey-900 hover:ptw-bg-grey-200 dark:hover:ptw-bg-grey-800': color === 'grey',
     }"
   >
     <slot />