@poveste/app 0.1.3 → 0.2.0

package/src/app/components/story/StoryView.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useLayoutStore } from '../../stores/layout'
 import { useStoryStore } from '../../stores/story'
 
 import { isMobile } from '../../util/responsive'
@@ -12,6 +13,15 @@ import StorySidePanel from '../panel/StorySidePanel.vue'
 import StoryViewer from './StoryViewer.vue'
 
 const storyStore = useStoryStore()
+const layoutStore = useLayoutStore()
+
+const effectiveStoryOptionsVisible = computed(() =>
+  storyStore.currentStory?.meta?.storyOptions ?? layoutStore.settings.storyOptionsVisible,
+)
+
+const placement = computed(() => layoutStore.settings.storyOptionsPlacement)
+const splitOrientation = computed(() => placement.value === 'bottom' ? 'portrait' : 'landscape')
+const splitDefaultSplit = computed(() => placement.value === 'bottom' ? 60 : 75)
 
 const router = useRouter()
 const route = useRoute()
@@ -67,36 +77,41 @@ function scrollDocsToTop() {
   >
     <Icon
       icon="carbon:software-resource-resource"
-      class="htw-w-16 htw-h-16 htw-opacity-50"
+      class="ptw-w-16 ptw-h-16 ptw-opacity-50"
     />
   </BaseEmpty>
 
   <div
     v-else
-    class="poveste-story-view poveste-with-story htw-h-full"
+    class="poveste-story-view poveste-with-story ptw-h-full"
   >
     <div
       v-if="storyStore.currentStory.docsOnly"
       ref="docsOnlyScroller"
-      class="htw-h-full htw-overflow-auto"
+      class="ptw-h-full ptw-overflow-auto"
     >
       <StoryDocs
         :story="storyStore.currentStory"
         standalone
-        class="md:htw-p-12 htw-w-full md:htw-max-w-[600px] lg:htw-max-w-[800px] xl:htw-max-w-[900px]"
+        class="md:ptw-p-12 ptw-w-full md:ptw-max-w-[600px] lg:ptw-max-w-[800px] xl:ptw-max-w-[900px]"
         @scroll-top="scrollDocsToTop()"
       />
     </div>
     <template v-else-if="isMobile">
       <StoryViewer />
     </template>
+    <template v-else-if="!effectiveStoryOptionsVisible">
+      <StoryViewer />
+    </template>
     <BaseSplitPane
       v-else
-      save-id="story-main"
+      :save-id="`story-main-${placement}`"
+      :orientation="splitOrientation"
       :min="30"
       :max="95"
-      :default-split="75"
-      class="htw-h-full"
+      :default-split="splitDefaultSplit"
+      :show-divider="false"
+      class="ptw-h-full"
     >
       <template #first>
         <StoryViewer />

package/src/app/components/story/StoryViewer.vue

@@ -22,7 +22,7 @@ watch(variant, () => {
 </script>
 
 <template>
-  <div class="poveste-story-viewer htw-bg-gray-50 htw-h-full dark:htw-bg-gray-750">
+  <div class="poveste-story-viewer ptw-bg-gray-50 ptw-h-full dark:ptw-bg-gray-750">
     <StoryVariantGrid
       v-if="storyStore.currentStory.layout.type === 'grid'"
     />

package/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
 import { openInEditor } from '../../util/open-in-editor.js'
+import TopBarChipItem from '../app/TopBarChipItem.vue'
 
 defineProps<{
   file: string
@@ -9,15 +10,15 @@ defineProps<{
 </script>
 
 <template>
-  <a
+  <TopBarChipItem
     v-tooltip="tooltip"
     target="_blank"
-    class="poveste-toolbar-open-in-editor htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+    class="poveste-toolbar-open-in-editor"
     @click="openInEditor(file)"
   >
     <Icon
       icon="carbon:script-reference"
-      class="htw-w-4 htw-h-4"
+      class="ptw-w-4 ptw-h-4"
     />
-  </a>
+  </TopBarChipItem>
 </template>

package/src/app/components/toolbar/ToolbarBackground.vue

@@ -1,44 +1,81 @@
 <script lang="ts" setup>
+import type { SandboxColorScheme } from '../../types'
 import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { povesteConfig } from '../../util/config'
-import { getContrastColor } from '../../util/preview-settings'
 import BaseCheckbox from '../base/BaseCheckbox.vue'
 
-const settings = usePreviewSettingsStore().currentSettings
+const previewSettings = usePreviewSettingsStore()
+const settings = previewSettings.currentSettings
 
-const contrastColor = computed(() => getContrastColor(settings))
+const colorSchemeOptions: { value: SandboxColorScheme, label: string, icon: string }[] = [
+  { value: 'auto', label: 'System', icon: 'carbon:screen' },
+  { value: 'light', label: 'Light', icon: 'carbon:sun' },
+  { value: 'dark', label: 'Dark', icon: 'carbon:moon' },
+]
+
+// A book that hides the app color scheme switch doesn't want the preview one
+// either — it keeps whatever `theme.defaultColorScheme` says.
+const showColorScheme = !povesteConfig.theme.hideColorSchemeSwitch
+const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets.length
 </script>
 
 <template>
   <VDropdown
-    v-if="povesteConfig.backgroundPresets.length"
+    v-if="showDropdown"
     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"
   >
-    <div
-      v-tooltip="'Background color'"
-      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"
-    >
+    <!-- The tooltip would sit on top of the first row of the dropdown, so drop
+    it while the dropdown is open. -->
+    <template #default="{ shown }">
       <div
-        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"
+        v-tooltip="shown ? '' : 'Preview appearance'"
+        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"
       >
-        <span v-if="contrastColor">a</span>
+        <Icon
+          icon="carbon:color-palette"
+          class="ptw-w-4 ptw-h-4"
+        />
+        <Icon
+          icon="carbon:chevron-down"
+          class="ptw-w-3 ptw-h-3 ptw-opacity-40 group-hover:ptw-opacity-70"
+        />
       </div>
-      <Icon
-        icon="carbon:caret-down"
-        class="htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
-      />
-    </div>
+    </template>
 
     <template #popper="{ hide }">
       <div
-        class="htw-flex htw-flex-col htw-items-stretch"
+        class="ptw-flex ptw-flex-col ptw-items-stretch"
         data-test-id="background-popper"
       >
+        <div
+          v-if="showColorScheme"
+          class="ptw-flex ptw-items-stretch ptw-gap-1 ptw-px-2 ptw-pt-2"
+          data-test-id="sandbox-color-scheme"
+        >
+          <button
+            v-for="option in colorSchemeOptions"
+            :key="option.value"
+            :data-test-id="`sandbox-color-scheme-${option.value}`"
+            class="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"
+            :class="[
+              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',
+            ]"
+            @click="settings.colorScheme = option.value"
+          >
+            <Icon
+              :icon="option.icon"
+              class="ptw-w-4 ptw-h-4"
+            />
+            <span>{{ option.label }}</span>
+          </button>
+        </div>
+
         <BaseCheckbox v-model="settings.checkerboard">
           Checkerboard
         </BaseCheckbox>
@@ -46,19 +83,19 @@ const contrastColor = computed(() => getContrastColor(settings))
         <button
           v-for="(option, index) in povesteConfig.backgroundPresets"
           :key="index"
-          class="htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-items-baseline htw-gap-4"
+          class="ptw-px-4 ptw-py-3 ptw-cursor-pointer ptw-text-left ptw-flex ptw-items-baseline ptw-gap-4"
           :class="[
             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',
+              ? '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',
           ]"
-          @click="settings.backgroundColor = option.color;hide()"
+          @click="previewSettings.setBackgroundColor(option.color);hide()"
         >
-          <span class="htw-mr-auto">{{ option.label }}</span>
+          <span class="ptw-mr-auto">{{ option.label }}</span>
           <template v-if="option.color !== '$checkerboard'">
-            <span class="htw-ml-auto htw-opacity-70">{{ option.color }}</span>
+            <span class="ptw-ml-auto ptw-opacity-70">{{ option.color }}</span>
             <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="{
                 backgroundColor: option.color,
                 color: option.contrastColor,

package/src/app/components/toolbar/ToolbarNewTab.vue

@@ -3,6 +3,7 @@ import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
 import { computed } from 'vue'
 import { getSandboxUrl } from '../../util/sandbox'
+import TopBarChipItem from '../app/TopBarChipItem.vue'
 
 const props = defineProps<{
   variant: Variant
@@ -15,15 +16,15 @@ const sandboxUrl = computed(() => {
 </script>
 
 <template>
-  <a
+  <TopBarChipItem
     v-tooltip="'Open variant in new tab'"
     :href="sandboxUrl"
     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"
+    class="poveste-toolbar-new-tab"
   >
     <Icon
       icon="carbon:launch"
-      class="htw-w-4 htw-h-4"
+      class="ptw-w-4 ptw-h-4"
     />
-  </a>
+  </TopBarChipItem>
 </template>

package/src/app/components/toolbar/ToolbarResponsiveSize.vue

@@ -13,46 +13,46 @@ const settings = usePreviewSettingsStore().currentSettings
     placement="bottom-end"
     :skidding="6"
     :disabled="!povesteConfig.responsivePresets?.length"
-    class="poveste-toolbar-responsive-size htw-h-full htw-flex-none"
+    class="poveste-toolbar-responsive-size ptw-flex-none"
   >
     <div
       v-tooltip="'Responsive sizes'"
-      class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group"
+      class="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"
       :class="{
-        'htw-cursor-pointer hover:htw-text-primary-500': povesteConfig.responsivePresets?.length,
+        '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': povesteConfig.responsivePresets?.length,
       }"
     >
       <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"
       />
       <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"
       />
     </div>
 
     <template #popper="{ hide }">
-      <div class="htw-flex htw-flex-col htw-items-stretch">
+      <div class="ptw-flex ptw-flex-col ptw-items-stretch">
         <BaseCheckbox v-model="settings.rotate">
           Rotate
         </BaseCheckbox>
 
-        <div class="htw-flex htw-items-center htw-gap-2 htw-px-4 htw-py-3">
+        <div class="ptw-flex ptw-items-center ptw-gap-2 ptw-px-4 ptw-py-3">
           <input
             v-model.number="settings.responsiveWidth"
             v-tooltip="'Responsive width (px)'"
             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"
           >
-          <span class="htw-opacity-50">×</span>
+          <span class="ptw-opacity-50">×</span>
           <input
             v-model.number="settings.responsiveHeight"
             v-tooltip="'Responsive height (px)'"
             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"
           >
@@ -61,16 +61,16 @@ const settings = usePreviewSettingsStore().currentSettings
         <button
           v-for="(preset, index) in povesteConfig.responsivePresets"
           :key="index"
-          class="htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-gap-4"
+          class="ptw-px-4 ptw-py-3 ptw-cursor-pointer ptw-text-left ptw-flex ptw-gap-4"
           :class="[
             settings.responsiveWidth === preset.width && 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',
+              ? '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',
           ]"
           @click="settings.responsiveWidth = preset.width;settings.responsiveHeight = preset.height;hide()"
         >
           {{ preset.label }}
-          <span class="htw-ml-auto htw-opacity-70 htw-flex htw-gap-1">
+          <span class="ptw-ml-auto ptw-opacity-70 ptw-flex ptw-gap-1">
             <span v-if="preset.width">{{ preset.width }}<span v-if="!preset.height">px</span></span>
             <span v-if="preset.width && preset.height">x</span>
             <span v-if="preset.height">{{ preset.height }}<span v-if="!preset.width">px</span></span>

package/src/app/components/toolbar/ToolbarTextDirection.vue

@@ -1,19 +1,20 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import TopBarChipItem from '../app/TopBarChipItem.vue'
 
 const settings = usePreviewSettingsStore().currentSettings
 </script>
 
 <template>
-  <a
+  <TopBarChipItem
     v-tooltip="`Switch to text direction ${settings.textDirection === 'ltr' ? 'Right to Left' : 'Left to Right'}`"
-    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"
+    class="poveste-toolbar-text-direction"
     @click="settings.textDirection = settings.textDirection === 'ltr' ? 'rtl' : 'ltr'"
   >
     <Icon
       :icon="settings.textDirection === 'ltr' ? 'fluent:text-paragraph-direction-right-16-regular' : 'fluent:text-paragraph-direction-left-16-regular'"
-      class="htw-w-4 htw-h-4"
+      class="ptw-w-4 ptw-h-4"
     />
-  </a>
+  </TopBarChipItem>
 </template>

package/src/app/components/toolbar/ToolbarTitle.vue

@@ -1,21 +1,45 @@
 <script lang="ts" setup>
-import type { Variant } from '../../types'
+import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
 
-defineProps<{
-  variant: Variant
+const props = defineProps<{
+  variant?: Variant
+  story?: Story
 }>()
+
+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 undefined
+})
 </script>
 
 <template>
-  <div 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">
+  <div class="poveste-toolbar-title ptw-flex ptw-items-center ptw-gap-2 ptw-min-w-0">
     <Icon
-      :icon="variant.icon ?? 'carbon:cube'"
-      class="htw-w-4 htw-h-4 htw-opacity-50"
+      :icon="icon"
+      class="ptw-w-4 ptw-h-4 ptw-flex-none"
       :class="[
-        variant.iconColor ? 'bind-icon-color' : 'htw-text-gray-500',
+        iconColor ? 'bind-icon-color' : 'ptw-text-gray-500 dark:ptw-text-gray-400',
       ]"
     />
-    <span>{{ variant.title }}</span>
+    <div class="ptw-flex ptw-flex-col ptw-justify-center ptw-min-w-0 ptw-leading-tight ptw-text-center ptw-h-[2.25rem]">
+      <span class="ptw-truncate ptw-text-sm ptw-font-medium ptw-text-gray-900 dark:ptw-text-gray-100">{{ title }}</span>
+      <span
+        v-if="subtitle"
+        class="ptw-truncate ptw-text-xs ptw-text-gray-500 dark:ptw-text-gray-400"
+      >{{ subtitle }}</span>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.bind-icon-color {
+  color: v-bind('iconColor');
+}
+</style>

package/src/app/components/tree/StoryGroup.vue

@@ -27,23 +27,23 @@ function toggleOpen() {
 <template>
   <div
     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"
   >
     <template v-if="group.title">
-      <div class="htw-h-[1px] htw-bg-gray-500/10 htw-mx-6 htw-mb-2 group-first:htw-hidden" />
+      <div class="ptw-h-[1px] ptw-bg-gray-500/10 ptw-mx-6 ptw-mb-2 group-first:ptw-hidden" />
       <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"
         @click="toggleOpen"
         @keyup.enter="toggleOpen"
         @keyup.space="toggleOpen"
       >
         <Icon
           :icon="isFolderOpen ? '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"
         />
-        <span class="htw-truncate">{{ group.title }}</span>
+        <span class="ptw-truncate">{{ group.title }}</span>
       </div>
     </template>
 

package/src/app/components/tree/StoryList.vue

@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="poveste-story-list htw-overflow-y-auto">
+  <div class="poveste-story-list ptw-overflow-y-auto">
     <template
       v-for="element of tree"
       :key="element.title"

package/src/app/components/tree/StoryListFolder.vue

@@ -37,22 +37,22 @@ const folderPadding = computed(() => {
     <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"
       @click="toggleOpen"
       @keyup.enter="toggleOpen"
       @keyup.space="toggleOpen"
     >
-      <span class="bind-tree-padding htw-flex htw-items-center htw-gap-2 htw-min-w-0">
-        <span 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">
+      <span class="bind-tree-padding ptw-flex ptw-items-center ptw-gap-2 ptw-min-w-0">
+        <span 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">
           <Icon
             icon="carbon:caret-right"
-            class="htw-w-full htw-h-full htw-transition-transform htw-duration-150"
+            class="ptw-w-full ptw-h-full ptw-transition-transform ptw-duration-150"
             :class="{
-              'htw-rotate-90': isFolderOpen,
+              'ptw-rotate-90': isFolderOpen,
             }"
           />
         </span>
-        <span class="htw-truncate">{{ folder.title }}</span>
+        <span class="ptw-truncate">{{ folder.title }}</span>
       </span>
     </div>
 

package/src/app/components/tree/StoryListItem.vue

@@ -37,23 +37,23 @@ useScrollOnActive(isActive, el)
           storyId: 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"
     >
-      <span class="bind-tree-margin htw-flex htw-items-center htw-gap-2 htw-pl-4 htw-min-w-0">
+      <span class="bind-tree-margin ptw-flex ptw-items-center ptw-gap-2 ptw-pl-4 ptw-min-w-0">
         <Icon
           :icon="story.icon ?? 'carbon:cube'"
-          class="htw-w-5 htw-h-5 sm:htw-w-4 sm:htw-h-4 htw-flex-none"
+          class="ptw-w-5 ptw-h-5 sm:ptw-w-4 sm:ptw-h-4 ptw-flex-none"
           :class="{
-            'htw-text-primary-500': !active && !story.iconColor,
+            'ptw-text-primary-500': !active && !story.iconColor,
             'bind-icon-color': !active && story.iconColor,
           }"
         />
-        <span class="htw-truncate">{{ story.title }}</span>
+        <span class="ptw-truncate">{{ story.title }}</span>
       </span>
 
       <span
         v-if="!story.docsOnly"
-        class="htw-opacity-40 htw-text-sm"
+        class="ptw-opacity-40 ptw-text-sm"
       >
         {{ story.variants.length }}
       </span>

package/src/app/index.ts

@@ -10,6 +10,9 @@ export async function mountMainApp() {
   const app = createApp(App)
   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: {