@poveste/app 0.1.2 → 0.2.0

package/src/app/components/panel/ControlsComponentProps.vue

@@ -12,14 +12,14 @@ defineProps<{
 
 <template>
   <div class="poveste-controls-component-props">
-    <div class="htw-font-mono htw-p-2 htw-flex htw-items-center htw-gap-1">
+    <div class="ptw-font-mono ptw-p-2 ptw-flex ptw-items-center ptw-gap-1">
       <Icon
         v-tooltip="'Auto-detected props'"
         icon="carbon:flash"
-        class="htw-w-4 htw-h-4 htw-text-primary-500 htw-flex-none"
+        class="ptw-w-4 ptw-h-4 ptw-text-primary-500 ptw-flex-none"
       />
       <div>
-        <span class="htw-opacity-30">&lt;</span>{{ definition.name }}<span class="htw-opacity-30">&gt;</span>
+        <span class="ptw-opacity-30">&lt;</span>{{ definition.name }}<span class="ptw-opacity-30">&gt;</span>
       </div>
     </div>
 

package/src/app/components/panel/ControlsComponentState.vue

@@ -14,11 +14,11 @@ const stateKeys = computed(() => Object.keys(props.variant.state || {})
 
 <template>
   <div class="poveste-controls-component-init-state">
-    <div class="htw-p-2 htw-flex htw-items-center htw-gap-1">
+    <div class="ptw-p-2 ptw-flex ptw-items-center ptw-gap-1">
       <Icon
         v-tooltip="'Auto-detected state'"
         icon="carbon:data-vis-1"
-        class="htw-w-4 htw-h-4 htw-text-primary-500 htw-flex-none"
+        class="ptw-w-4 ptw-h-4 ptw-text-primary-500 ptw-flex-none"
       />
       <div>
         State

package/src/app/components/panel/PaneTabs.vue

@@ -22,7 +22,7 @@ const hasEvents = computed(() => eventsStore.events.length)
 </script>
 
 <template>
-  <BaseOverflowMenu class="poveste-pane-tabs htw-h-10 htw-flex-none htw-border-b htw-border-gray-100 dark:htw-border-gray-750">
+  <BaseOverflowMenu class="poveste-pane-tabs ptw-h-10 ptw-flex-none ptw-border-b ptw-border-gray-100 dark:ptw-border-gray-750">
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: '' } }"
       :matched="!$route.query.tab"
@@ -33,7 +33,7 @@ const hasEvents = computed(() => eventsStore.events.length)
       :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
       :matched="$route.query.tab === 'docs'"
       :class="{
-        'htw-opacity-50': !renderedDoc,
+        'ptw-opacity-50': !renderedDoc,
       }"
     >
       Docs
@@ -42,7 +42,7 @@ const hasEvents = computed(() => eventsStore.events.length)
       :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
       :matched="$route.query.tab === 'events'"
       :class="{
-        'htw-opacity-50': !hasEvents,
+        'ptw-opacity-50': !hasEvents,
       }"
     >
       Events
@@ -71,7 +71,7 @@ const hasEvents = computed(() => eventsStore.events.length)
         :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
         :matched="$route.query.tab === 'events'"
         :class="{
-          'htw-opacity-50': !hasEvents,
+          'ptw-opacity-50': !hasEvents,
         }"
       >
         Events

package/src/app/components/panel/StatePresets.vue

@@ -118,10 +118,10 @@ onClickOutside(select, stopEditing)
 </script>
 
 <template>
-  <div class="poveste-state-presets htw-flex htw-gap-2 htw-w-full htw-items-center">
+  <div class="poveste-state-presets ptw-flex ptw-gap-2 ptw-w-full ptw-items-center">
     <div
       ref="select"
-      class="htw-flex-1 htw-min-w-0"
+      class="ptw-flex-1 ptw-min-w-0"
     >
       <BaseSelect
         v-model="selectedOption"
@@ -137,37 +137,37 @@ onClickOutside(select, stopEditing)
             ref="input"
             v-model="presetStates.get(selectedOption).label"
             type="text"
-            class="htw-text-inherit htw-bg-transparent htw-w-full htw-h-full htw-outline-none"
+            class="ptw-text-inherit ptw-bg-transparent ptw-w-full ptw-h-full ptw-outline-none"
             @click.stop.prevent
           >
 
           <div
             v-else
-            class="htw-flex htw-items-center htw-gap-2"
+            class="ptw-flex ptw-items-center ptw-gap-2"
           >
-            <span class="htw-flex-1 htw-truncate">
+            <span class="ptw-flex-1 ptw-truncate">
               {{ label }}
             </span>
             <Icon
               v-if="canEdit"
               v-tooltip="'Rename this preset'"
               icon="carbon:edit"
-              class="htw-flex-none htw-cursor-pointer htw-w-4 htw-h-4 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="ptw-flex-none ptw-cursor-pointer ptw-w-4 ptw-h-4 hover:ptw-text-primary-500 ptw-opacity-50 hover:ptw-opacity-100 dark:hover:ptw-text-primary-400 ptw-text-gray-900 dark:ptw-text-gray-100"
               @click.stop="startEditing()"
             />
           </div>
         </template>
 
         <template #option="{ label, value }">
-          <div class="htw-flex htw-gap-2 htw-items-center">
+          <div class="ptw-flex ptw-gap-2 ptw-items-center">
             <span
-              class="htw-flex-1 htw-truncate"
+              class="ptw-flex-1 ptw-truncate"
             >{{ label }}</span>
             <Icon
               v-if="value !== DEFAULT_ID"
               v-tooltip="'Delete this preset'"
               icon="carbon:trash-can"
-              class="htw-flex-none htw-cursor-pointer htw-w-4 htw-h-4 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="ptw-flex-none ptw-cursor-pointer ptw-w-4 ptw-h-4 hover:ptw-text-primary-500 ptw-opacity-50 hover:ptw-opacity-100 dark:hover:ptw-text-primary-400 ptw-text-gray-900 dark:ptw-text-gray-100"
               @click.stop="deletePreset(value)"
             />
           </div>
@@ -177,22 +177,22 @@ onClickOutside(select, stopEditing)
     <Icon
       v-tooltip="savedNotif ? 'Saved!' : canEdit ? 'Save to preset' : null"
       :icon="savedNotif ? 'carbon:checkmark' : 'carbon:save'"
-      class="htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+      class="ptw-cursor-pointer ptw-w-4 ptw-h-4 hover:ptw-text-primary-500 dark:hover:ptw-text-primary-400 ptw-text-gray-900 dark:ptw-text-gray-100"
       :class="[
-        canEdit ? 'htw-opacity-50 hover:htw-opacity-100' : 'htw-opacity-25 htw-pointer-events-none',
+        canEdit ? 'ptw-opacity-50 hover:ptw-opacity-100' : 'ptw-opacity-25 ptw-pointer-events-none',
       ]"
       @click="savePreset()"
     />
     <Icon
       v-tooltip="'Create new preset'"
       icon="carbon:add-alt"
-      class="htw-cursor-pointer htw-w-4 htw-h-4 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="ptw-cursor-pointer ptw-w-4 ptw-h-4 hover:ptw-text-primary-500 ptw-opacity-50 hover:ptw-opacity-100 dark:hover:ptw-text-primary-400 ptw-text-gray-900 dark:ptw-text-gray-100"
       @click="createPreset()"
     />
     <Icon
       v-tooltip="'Reset to initial state'"
       icon="carbon:reset"
-      class="htw-cursor-pointer htw-w-4 htw-h-4 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="ptw-cursor-pointer ptw-w-4 ptw-h-4 hover:ptw-text-primary-500 ptw-opacity-50 hover:ptw-opacity-100 dark:hover:ptw-text-primary-400 ptw-text-gray-900 dark:ptw-text-gray-100"
       @click="resetState()"
     />
   </div>

package/src/app/components/panel/StoryControls.vue

@@ -39,11 +39,11 @@ const hasInitState = computed(() => Object
 <template>
   <div
     data-test-id="story-controls"
-    class="poveste-story-controls htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750"
+    class="poveste-story-controls ptw-flex ptw-flex-col ptw-divide-y ptw-divide-gray-100 dark:ptw-divide-gray-750"
   >
     <!-- Toolbar -->
     <div
-      class="htw-h-9 htw-flex-none htw-px-2 htw-flex htw-items-center"
+      class="ptw-h-9 ptw-flex-none ptw-px-2 ptw-flex ptw-items-center"
     >
       <StatePresets
         v-if="ready || !hasCustomControls"
@@ -59,7 +59,7 @@ const hasInitState = computed(() => Object
       slot-name="controls"
       :variant="variant"
       :story="story"
-      class="__poveste-render-custom-controls __histoire-render-custom-controls htw-flex-none"
+      class="__poveste-render-custom-controls __histoire-render-custom-controls ptw-flex-none"
       @ready="ready = true"
     />
 
@@ -68,7 +68,7 @@ const hasInitState = computed(() => Object
       v-else-if="hasInitState"
     >
       <ControlsComponentState
-        class="htw-flex-none htw-my-2"
+        class="ptw-flex-none ptw-my-2"
         :variant="variant"
       />
     </div>
@@ -76,7 +76,7 @@ const hasInitState = computed(() => Object
     <BaseEmpty v-else-if="!variant.state?._hPropDefs?.length">
       <Icon
         icon="carbon:audio-console"
-        class="htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
+        class="ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
       />
       <span>No controls available for this story</span>
     </BaseEmpty>
@@ -90,7 +90,7 @@ const hasInitState = computed(() => Object
         :key="index"
         :variant="variant"
         :definition="def"
-        class="htw-flex-none htw-my-2"
+        class="ptw-flex-none ptw-my-2"
       />
     </div>
   </div>

package/src/app/components/panel/StoryDocs.vue

@@ -170,9 +170,9 @@ const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standal
   >
     <div
       v-if="__POVESTE_DEV__ && renderedDoc && filePath"
-      class="htw-flex htw-items-center htw-gap-2 htw-p-2"
+      class="ptw-flex ptw-items-center ptw-gap-2 ptw-p-2"
       :class="{
-        'htw-pt-4': !standalone,
+        'ptw-pt-4': !standalone,
       }"
     >
       <DevOnlyToolbarOpenInEditor
@@ -187,14 +187,14 @@ const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standal
     >
       <Icon
         icon="carbon:document-unknown"
-        class="htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
+        class="ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
       />
       No documentation available
     </BaseEmpty>
     <div
       v-else
       ref="renderedEl"
-      class="htw-prose dark:htw-prose-invert htw-p-4 htw-max-w-none"
+      class="ptw-prose dark:ptw-prose-invert ptw-p-4 ptw-max-w-none"
       data-test-id="story-docs"
       v-html="renderedDoc"
     />

package/src/app/components/panel/StoryEvent.vue

@@ -20,34 +20,34 @@ const formattedArgument = computed(() => {
 
 <template>
   <VDropdown
-    class="poveste-story-event htw-group"
+    class="poveste-story-event ptw-group"
     placement="right"
     data-test-id="event-item"
   >
     <template #default="{ shown }">
       <div
-        class="group-hover:htw-bg-primary-100 dark:group-hover:htw-bg-primary-700 htw-cursor-pointer htw-py-2 htw-px-4 htw-flex htw-items-baseline htw-gap-1 htw-leading-normal"
+        class="group-hover:ptw-bg-primary-100 dark:group-hover:ptw-bg-primary-700 ptw-cursor-pointer ptw-py-2 ptw-px-4 ptw-flex ptw-items-baseline ptw-gap-1 ptw-leading-normal"
         :class="[
-          shown ? 'htw-bg-primary-50 dark:htw-bg-primary-600' : 'group-odd:htw-bg-gray-100/50 dark:group-odd:htw-bg-gray-750/40',
+          shown ? 'ptw-bg-primary-50 dark:ptw-bg-primary-600' : 'group-odd:ptw-bg-gray-100/50 dark:group-odd:ptw-bg-gray-750/40',
         ]"
       >
         <span
           :class="{
-            'htw-text-primary-500': shown,
+            'ptw-text-primary-500': shown,
           }"
         >
           {{ event.name }}
         </span>
         <span
           v-if="event.argument"
-          class="htw-text-xs htw-opacity-50 htw-truncate"
+          class="ptw-text-xs ptw-opacity-50 ptw-truncate"
         >{{ formattedArgument }}</span>
       </div>
     </template>
 
     <template #popper>
-      <div class="htw-overflow-auto htw-max-w-[400px] htw-max-h-[400px]">
-        <pre class="htw-p-4">{{ event.argument }}</pre>
+      <div class="ptw-overflow-auto ptw-max-w-[400px] ptw-max-h-[400px]">
+        <pre class="ptw-p-4">{{ event.argument }}</pre>
       </div>
     </template>
   </VDropdown>

package/src/app/components/panel/StoryEvents.vue

@@ -33,7 +33,7 @@ const eventsElement = ref<HTMLDivElement>()
     >
       <Icon
         icon="carbon:event-schedule"
-        class="htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
+        class="ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
       />
       No event fired
     </BaseEmpty>

package/src/app/components/panel/StorySidePanel.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { useLayoutStore } from '../../stores/layout'
 import { useStoryStore } from '../../stores/story'
 
 import BaseEmpty from '../base/BaseEmpty.vue'
@@ -12,6 +13,11 @@ import StoryEvents from './StoryEvents.vue'
 import StorySourceCode from './StorySourceCode.vue'
 
 const storyStore = useStoryStore()
+const layoutStore = useLayoutStore()
+
+const innerOrientation = computed(() =>
+  layoutStore.settings.storyOptionsPlacement === 'bottom' ? 'landscape' : 'portrait',
+)
 
 const route = useRoute()
 
@@ -28,49 +34,53 @@ const panelContentComponent = computed(() => {
 </script>
 
 <template>
-  <BaseEmpty
-    v-if="!storyStore.currentVariant"
-    class="poveste-story-side-panel poveste-selection"
-  >
-    <span>Select a variant</span>
-  </BaseEmpty>
+  <div class="ptw-h-full ptw-w-full ptw-p-2">
+    <div class="ptw-h-full ptw-w-full ptw-rounded-lg ptw-border ptw-border-gray-200 dark:ptw-border-gray-700 ptw-overflow-hidden ptw-bg-white dark:ptw-bg-gray-700">
+      <BaseEmpty
+        v-if="!storyStore.currentVariant"
+        class="poveste-story-side-panel poveste-selection"
+      >
+        <span>Select a variant</span>
+      </BaseEmpty>
 
-  <BaseEmpty
-    v-else-if="!storyStore.currentVariant.configReady || !storyStore.currentVariant.previewReady"
-    class="poveste-story-side-panel poveste-loading"
-  >
-    <span>Loading...</span>
-  </BaseEmpty>
+      <BaseEmpty
+        v-else-if="!storyStore.currentVariant.configReady || !storyStore.currentVariant.previewReady"
+        class="poveste-story-side-panel poveste-loading"
+      >
+        <span>Loading...</span>
+      </BaseEmpty>
 
-  <BaseSplitPane
-    v-else
-    save-id="story-sidepane"
-    orientation="portrait"
-    class="poveste-story-side-panel poveste-loaded htw-h-full"
-    data-test-id="story-side-panel"
-  >
-    <template #first>
-      <div class="htw-flex htw-flex-col htw-h-full">
-        <PaneTabs
-          :story="storyStore.currentStory"
-          :variant="storyStore.currentVariant"
-        />
+      <BaseSplitPane
+        v-else
+        :save-id="`story-sidepane-${innerOrientation}`"
+        :orientation="innerOrientation"
+        class="poveste-story-side-panel poveste-loaded ptw-h-full"
+        data-test-id="story-side-panel"
+      >
+        <template #first>
+          <div class="ptw-flex ptw-flex-col ptw-h-full">
+            <PaneTabs
+              :story="storyStore.currentStory"
+              :variant="storyStore.currentVariant"
+            />
 
-        <component
-          :is="panelContentComponent"
-          :story="storyStore.currentStory"
-          :variant="storyStore.currentVariant"
-          class="htw-h-full htw-overflow-auto"
-        />
-      </div>
-    </template>
+            <component
+              :is="panelContentComponent"
+              :story="storyStore.currentStory"
+              :variant="storyStore.currentVariant"
+              class="ptw-h-full ptw-overflow-auto"
+            />
+          </div>
+        </template>
 
-    <template #last>
-      <StorySourceCode
-        :story="storyStore.currentStory"
-        :variant="storyStore.currentVariant"
-        class="htw-h-full"
-      />
-    </template>
-  </BaseSplitPane>
+        <template #last>
+          <StorySourceCode
+            :story="storyStore.currentStory"
+            :variant="storyStore.currentVariant"
+            class="ptw-h-full"
+          />
+        </template>
+      </BaseSplitPane>
+    </div>
+  </div>
 </template>

package/src/app/components/panel/StorySourceCode.vue

@@ -133,32 +133,32 @@ watch(sourceHtml, async () => {
 
 <template>
   <div
-    class="poveste-story-source-code htw-bg-gray-50 dark:htw-bg-gray-750 htw-h-full htw-overflow-hidden htw-flex htw-flex-col"
+    class="poveste-story-source-code ptw-bg-gray-50 dark:ptw-bg-gray-750 ptw-h-full ptw-overflow-hidden ptw-flex ptw-flex-col"
   >
     <!-- Toolbar -->
     <div
       v-if="!error"
-      class="htw-h-10 htw-flex-none htw-border-b htw-border-solid htw-border-gray-500/5 htw-px-4 htw-flex htw-items-center htw-gap-2"
+      class="ptw-h-10 ptw-flex-none ptw-border-b ptw-border-solid ptw-border-gray-500/5 ptw-px-4 ptw-flex ptw-items-center ptw-gap-2"
     >
-      <div class="htw-text-gray-900 dark:htw-text-gray-100">
+      <div class="ptw-text-gray-900 dark:ptw-text-gray-100">
         Source
       </div>
-      <div class="htw-flex-1" />
+      <div class="ptw-flex-1" />
 
       <!-- Display source modes -->
-      <div class="htw-flex htw-flex-none htw-gap-px htw-h-full htw-py-2">
+      <div class="ptw-flex ptw-flex-none ptw-gap-px ptw-h-full ptw-py-2">
         <button
           v-tooltip="!dynamicSourceCode ? 'Dynamic source code is not available' : displayedSource !== 'dynamic' ? 'Switch to dynamic source' : null"
-          class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-1 htw-bg-gray-500/10 htw-rounded-l htw-transition-all htw-ease-[cubic-bezier(0,1,.6,1)] htw-duration-300 htw-overflow-hidden"
+          class="ptw-flex ptw-items-center ptw-gap-1 ptw-h-full ptw-px-1 ptw-bg-gray-500/10 ptw-rounded-l ptw-transition-all ptw-ease-[cubic-bezier(0,1,.6,1)] ptw-duration-300 ptw-overflow-hidden"
           :class="[
-            displayedSource !== 'dynamic' ? 'htw-max-w-6 htw-opacity-70' : 'htw-max-w-[82px] htw-text-primary-600 dark:htw-text-primary-400',
-            dynamicSourceCode ? 'htw-cursor-pointer hover:htw-bg-gray-500/30 active:htw-bg-gray-600/50' : 'htw-opacity-50',
+            displayedSource !== 'dynamic' ? 'ptw-max-w-6 ptw-opacity-70' : 'ptw-max-w-[82px] ptw-text-primary-600 dark:ptw-text-primary-400',
+            dynamicSourceCode ? 'ptw-cursor-pointer hover:ptw-bg-gray-500/30 active:ptw-bg-gray-600/50' : 'ptw-opacity-50',
           ]"
           @click="dynamicSourceCode && (displayedSource = 'dynamic')"
         >
           <Icon
             icon="carbon:flash"
-            class="htw-w-4 htw-h-4 htw-flex-none"
+            class="ptw-w-4 ptw-h-4 ptw-flex-none"
           />
           <span
             class="transition-opacity duration-300"
@@ -171,16 +171,16 @@ watch(sourceHtml, async () => {
         </button>
         <button
           v-tooltip="!staticSourceCode ? 'Static source code is not available' : displayedSource !== 'static' ? 'Switch to static source' : null"
-          class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-1 htw-bg-gray-500/10 htw-rounded-r htw-transition-all htw-ease-[cubic-bezier(0,1,.6,1)] htw-duration-300 htw-overflow-hidden"
+          class="ptw-flex ptw-items-center ptw-gap-1 ptw-h-full ptw-px-1 ptw-bg-gray-500/10 ptw-rounded-r ptw-transition-all ptw-ease-[cubic-bezier(0,1,.6,1)] ptw-duration-300 ptw-overflow-hidden"
           :class="[
-            displayedSource !== 'static' ? 'htw-max-w-6 htw-opacity-70' : 'htw-max-w-[63px] htw-text-primary-600 dark:htw-text-primary-400',
-            staticSourceCode ? 'htw-cursor-pointer hover:htw-bg-gray-500/30 active:htw-bg-gray-600/50' : 'htw-opacity-50',
+            displayedSource !== 'static' ? 'ptw-max-w-6 ptw-opacity-70' : 'ptw-max-w-[63px] ptw-text-primary-600 dark:ptw-text-primary-400',
+            staticSourceCode ? 'ptw-cursor-pointer hover:ptw-bg-gray-500/30 active:ptw-bg-gray-600/50' : 'ptw-opacity-50',
           ]"
           @click="staticSourceCode && (displayedSource = 'static')"
         >
           <Icon
             icon="carbon:document"
-            class="htw-w-4 htw-h-4 htw-flex-none"
+            class="ptw-w-4 ptw-h-4 ptw-flex-none"
           />
           <span
             class="transition-opacity duration-300"
@@ -195,13 +195,13 @@ watch(sourceHtml, async () => {
 
       <HstCopyIcon
         :content="displayedSourceCode"
-        class="htw-flex-none"
+        class="ptw-flex-none"
       />
     </div>
 
     <div
       v-if="error"
-      class="htw-text-red-500 htw-h-full htw-p-2 htw-overflow-auto htw-font-mono htw-text-sm"
+      class="ptw-text-red-500 ptw-h-full ptw-p-2 ptw-overflow-auto ptw-font-mono ptw-text-sm"
     >
       Error: {{ error }}
     </div>
@@ -209,7 +209,7 @@ watch(sourceHtml, async () => {
     <BaseEmpty v-else-if="!displayedSourceCode">
       <Icon
         icon="carbon:code-hide"
-        class="htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
+        class="ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
       />
       <span>Not available</span>
     </BaseEmpty>
@@ -217,7 +217,7 @@ watch(sourceHtml, async () => {
     <textarea
       v-else-if="!sourceHtml"
       ref="scroller"
-      class="__poveste-code-placeholder htw-w-full htw-h-full htw-p-4 htw-outline-none htw-bg-transparent htw-resize-none htw-m-0"
+      class="__poveste-code-placeholder ptw-w-full ptw-h-full ptw-p-4 ptw-outline-none ptw-bg-transparent ptw-resize-none ptw-m-0"
       :value="displayedSourceCode"
       readonly
       data-test-id="story-source-code"
@@ -227,12 +227,12 @@ watch(sourceHtml, async () => {
     <div
       v-else
       ref="scroller"
-      class="htw-w-full htw-h-full htw-overflow-auto"
+      class="ptw-w-full ptw-h-full ptw-overflow-auto"
       data-test-id="story-source-code"
       @scroll="onScroll"
     >
       <div
-        class="__poveste-code __histoire-code htw-p-4 htw-w-fit"
+        class="__poveste-code __histoire-code ptw-p-4 ptw-w-fit"
         v-html="sourceHtml"
       />
     </div>

package/src/app/components/search/SearchItem.vue

@@ -59,7 +59,7 @@ function action(fromClick = false) {
       v-if="'route' in result"
       :to="result.route"
       :is-active="selected"
-      class="htw-px-6 htw-py-4 htw-gap-4"
+      class="ptw-px-6 ptw-py-4 ptw-gap-4"
       @navigate="action(true)"
     >
       <SearchItemContent
@@ -71,7 +71,7 @@ function action(fromClick = false) {
     <BaseListItem
       v-if="'onActivate' in result"
       :is-active="selected"
-      class="htw-px-6 htw-py-4 htw-gap-4"
+      class="ptw-px-6 ptw-py-4 ptw-gap-4"
       @navigate="action(true)"
     >
       <SearchItemContent

package/src/app/components/search/SearchItemContent.vue

@@ -23,14 +23,14 @@ const kindLabels = {
 <template>
   <BaseIcon
     :icon="result.icon ?? defaultIcons[result.kind]"
-    class="htw-w-4 htw-h-4"
+    class="ptw-w-4 ptw-h-4"
     :class="[
       !selected ? [
         result.iconColor
           ? 'bind-icon-color'
           : {
-            'htw-text-primary-500': result.kind === 'story',
-            'htw-text-gray-500': result.kind === 'variant',
+            'ptw-text-primary-500': result.kind === 'story',
+            'ptw-text-gray-500': result.kind === 'variant',
           },
       ] : [],
       {
@@ -38,27 +38,27 @@ const kindLabels = {
       },
     ]"
   />
-  <div class="htw-flex-1">
-    <div class="htw-flex">
+  <div class="ptw-flex-1">
+    <div class="ptw-flex">
       {{ result.title }}
-      <span class="htw-ml-auto htw-opacity-40">
+      <span class="ptw-ml-auto ptw-opacity-40">
         {{ kindLabels[result.kind] }}
       </span>
     </div>
 
     <div
       v-if="result.path?.length"
-      class="htw-flex htw-items-center htw-gap-0.5 htw-opacity-60"
+      class="ptw-flex ptw-items-center ptw-gap-0.5 ptw-opacity-60"
     >
       <div
         v-for="(p, index) of result.path"
         :key="index"
-        class="htw-flex htw-items-center htw-gap-0.5"
+        class="ptw-flex ptw-items-center ptw-gap-0.5"
       >
         <Icon
           v-if="index > 0"
           icon="carbon:chevron-right"
-          class="htw-w-4 htw-h-4 htw-mt-0.5 htw-opacity-50"
+          class="ptw-w-4 ptw-h-4 ptw-mt-0.5 ptw-opacity-50"
         />
         <span>{{ p }}</span>
       </div>

package/src/app/components/search/SearchLoading.vue

@@ -4,11 +4,11 @@ import { Icon } from '@iconify/vue'
 
 <template>
   <div
-    class="poveste-search-loading htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500 htw-h-[51px] htw-opacity-30"
+    class="poveste-search-loading ptw-flex ptw-items-center ptw-gap-4 ptw-pl-6 ptw-border ptw-border-transparent focus-visible:ptw-border-primary-500 ptw-h-[51px] ptw-opacity-30"
   >
     <Icon
       icon="carbon:search"
-      class="flex-none htw-w-4 htw-h-4"
+      class="flex-none ptw-w-4 ptw-h-4"
     />
 
     Loading...

package/src/app/components/search/SearchModal.vue

@@ -27,14 +27,14 @@ function close() {
 <template>
   <div
     v-show="shown"
-    class="poveste-search-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-900/80 htw-z-20"
+    class="poveste-search-modal ptw-fixed ptw-inset-0 ptw-bg-white/80 dark:ptw-bg-gray-900/80 ptw-z-20"
     data-test-id="search-modal"
   >
     <div
-      class="htw-absolute htw-inset-0"
+      class="ptw-absolute ptw-inset-0"
       @click="close()"
     />
-    <div class="htw-bg-white dark:htw-bg-gray-900 md:htw-mt-16 md:htw-mx-auto htw-w-screen htw-max-w-[512px] htw-shadow-xl htw-border htw-border-gray-200 dark:htw-border-gray-750 htw-rounded-lg htw-relative htw-divide-y htw-divide-gray-200 dark:htw-divide-gray-850">
+    <div class="ptw-bg-white dark:ptw-bg-gray-900 md:ptw-mt-16 md:ptw-mx-auto ptw-w-screen ptw-max-w-[512px] ptw-shadow-xl ptw-border ptw-border-gray-200 dark:ptw-border-gray-750 ptw-rounded-lg ptw-relative ptw-divide-y ptw-divide-gray-200 dark:ptw-divide-gray-850">
       <SearchPane
         :shown="shown"
         @close="close()"