@poveste/app 0.2.1 → 0.3.1

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

@@ -7,13 +7,13 @@ import { computed, nextTick, onMounted, ref } from 'vue'
 import { toRawDeep } from '../../util/state'
 import BaseSelect from '../base/BaseSelect.vue'
 
-const DEFAULT_ID = 'default'
-
 const props = defineProps<{
   story: Story
   variant: Variant
 }>()
 
+const DEFAULT_ID = 'default'
+
 const saveId = computed(() => `${props.story.id}:${props.variant.id}`)
 
 const omitKeys = ['_hPropDefs']
@@ -64,7 +64,7 @@ const canEdit = computed(() => selectedOption.value !== DEFAULT_ID)
 const isEditing = ref(false)
 
 async function createPreset() {
-  const id = (new Date()).getTime().toString()
+  const id = Date.now().toString()
 
   presetStates.value.set(id, { state: clone(omit(toRawDeep(props.variant.state), omitKeys)), label: 'New preset' })
   selectedOption.value = id
@@ -118,10 +118,10 @@ onClickOutside(select, stopEditing)
 </script>
 
 <template>
-  <div class="poveste-state-presets ptw-flex ptw-gap-2 ptw-w-full ptw-items-center">
+  <div class="poveste-state-presets flex gap-2 w-full items-center">
     <div
       ref="select"
-      class="ptw-flex-1 ptw-min-w-0"
+      class="flex-1 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="ptw-text-inherit ptw-bg-transparent ptw-w-full ptw-h-full ptw-outline-none"
+            class="text-inherit bg-transparent w-full h-full outline-none"
             @click.stop.prevent
           >
 
           <div
             v-else
-            class="ptw-flex ptw-items-center ptw-gap-2"
+            class="flex items-center gap-2"
           >
-            <span class="ptw-flex-1 ptw-truncate">
+            <span class="flex-1 truncate">
               {{ label }}
             </span>
             <Icon
               v-if="canEdit"
               v-tooltip="'Rename this preset'"
               icon="carbon:edit"
-              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"
+              class="flex-none cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
               @click.stop="startEditing()"
             />
           </div>
         </template>
 
         <template #option="{ label, value }">
-          <div class="ptw-flex ptw-gap-2 ptw-items-center">
+          <div class="flex gap-2 items-center">
             <span
-              class="ptw-flex-1 ptw-truncate"
+              class="flex-1 truncate"
             >{{ label }}</span>
             <Icon
               v-if="value !== DEFAULT_ID"
               v-tooltip="'Delete this preset'"
               icon="carbon:trash-can"
-              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"
+              class="flex-none cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark: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="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="cursor-pointer w-4 h-4 hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
       :class="[
-        canEdit ? 'ptw-opacity-50 hover:ptw-opacity-100' : 'ptw-opacity-25 ptw-pointer-events-none',
+        canEdit ? 'opacity-50 hover:opacity-100' : 'opacity-25 pointer-events-none',
       ]"
       @click="savePreset()"
     />
     <Icon
       v-tooltip="'Create new preset'"
       icon="carbon:add-alt"
-      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"
+      class="cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
       @click="createPreset()"
     />
     <Icon
       v-tooltip="'Reset to initial state'"
       icon="carbon:reset"
-      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"
+      class="cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
       @click="resetState()"
     />
   </div>

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

@@ -32,18 +32,17 @@ const hasCustomControls = computed(() => props.variant.slots().controls || props
 
 const hasInitState = computed(() => Object
   .entries(props.variant.state || {})
-  .filter(([key]) => !key.startsWith('_h'))
-  .length > 0)
+  .some(([key]) => !key.startsWith('_h')))
 </script>
 
 <template>
   <div
     data-test-id="story-controls"
-    class="poveste-story-controls ptw-flex ptw-flex-col ptw-divide-y ptw-divide-gray-100 dark:ptw-divide-gray-750"
+    class="poveste-story-controls flex flex-col divide-y divide-gray-100 dark:divide-gray-750"
   >
     <!-- Toolbar -->
     <div
-      class="ptw-h-9 ptw-flex-none ptw-px-2 ptw-flex ptw-items-center"
+      class="h-9 flex-none px-2 flex items-center"
     >
       <StatePresets
         v-if="ready || !hasCustomControls"
@@ -59,7 +58,7 @@ const hasInitState = computed(() => Object
       slot-name="controls"
       :variant="variant"
       :story="story"
-      class="__poveste-render-custom-controls __histoire-render-custom-controls ptw-flex-none"
+      class="__poveste-render-custom-controls __histoire-render-custom-controls flex-none"
       @ready="ready = true"
     />
 
@@ -68,7 +67,7 @@ const hasInitState = computed(() => Object
       v-else-if="hasInitState"
     >
       <ControlsComponentState
-        class="ptw-flex-none ptw-my-2"
+        class="flex-none my-2"
         :variant="variant"
       />
     </div>
@@ -76,7 +75,7 @@ const hasInitState = computed(() => Object
     <BaseEmpty v-else-if="!variant.state?._hPropDefs?.length">
       <Icon
         icon="carbon:audio-console"
-        class="ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
+        class="w-8 h-8 opacity-50 mb-6"
       />
       <span>No controls available for this story</span>
     </BaseEmpty>
@@ -90,7 +89,7 @@ const hasInitState = computed(() => Object
         :key="index"
         :variant="variant"
         :definition="def"
-        class="ptw-flex-none ptw-my-2"
+        class="flex-none my-2"
       />
     </div>
   </div>

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

@@ -35,7 +35,7 @@ export function useStoryDoc(story: Ref<Story>) {
         try {
           comp = await comp()
         }
-        catch (e) {
+        catch {
           // Noop
           // Could be a class that requires `new com()`
         }
@@ -170,9 +170,9 @@ const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standal
   >
     <div
       v-if="__POVESTE_DEV__ && renderedDoc && filePath"
-      class="ptw-flex ptw-items-center ptw-gap-2 ptw-p-2"
+      class="flex items-center gap-2 p-2"
       :class="{
-        'ptw-pt-4': !standalone,
+        'pt-4': !standalone,
       }"
     >
       <DevOnlyToolbarOpenInEditor
@@ -187,14 +187,14 @@ const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standal
     >
       <Icon
         icon="carbon:document-unknown"
-        class="ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
+        class="w-8 h-8 opacity-50 mb-6"
       />
       No documentation available
     </BaseEmpty>
     <div
       v-else
       ref="renderedEl"
-      class="ptw-prose dark:ptw-prose-invert ptw-p-4 ptw-max-w-none"
+      class="prose dark:prose-invert p-4 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 ptw-group"
+    class="poveste-story-event group"
     placement="right"
     data-test-id="event-item"
   >
     <template #default="{ shown }">
       <div
-        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="group-hover:bg-primary-100 dark:group-hover:bg-primary-700 cursor-pointer py-2 px-4 flex items-baseline gap-1 leading-normal"
         :class="[
-          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',
+          shown ? 'bg-primary-50 dark:bg-primary-600' : 'group-odd:bg-gray-100/50 dark:group-odd:bg-gray-750/40',
         ]"
       >
         <span
           :class="{
-            'ptw-text-primary-500': shown,
+            'text-primary-500': shown,
           }"
         >
           {{ event.name }}
         </span>
         <span
           v-if="event.argument"
-          class="ptw-text-xs ptw-opacity-50 ptw-truncate"
+          class="text-xs opacity-50 truncate"
         >{{ formattedArgument }}</span>
       </div>
     </template>
 
     <template #popper>
-      <div class="ptw-overflow-auto ptw-max-w-[400px] ptw-max-h-[400px]">
-        <pre class="ptw-p-4">{{ event.argument }}</pre>
+      <div class="overflow-auto max-w-[400px] max-h-[400px]">
+        <pre class="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="ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
+        class="w-8 h-8 opacity-50 mb-6"
       />
       No event fired
     </BaseEmpty>

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

@@ -34,8 +34,8 @@ const panelContentComponent = computed(() => {
 </script>
 
 <template>
-  <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">
+  <div class="h-full w-full p-2">
+    <div class="h-full w-full rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-700">
       <BaseEmpty
         v-if="!storyStore.currentVariant"
         class="poveste-story-side-panel poveste-selection"
@@ -54,11 +54,11 @@ const panelContentComponent = computed(() => {
         v-else
         :save-id="`story-sidepane-${innerOrientation}`"
         :orientation="innerOrientation"
-        class="poveste-story-side-panel poveste-loaded ptw-h-full"
+        class="poveste-story-side-panel poveste-loaded h-full"
         data-test-id="story-side-panel"
       >
         <template #first>
-          <div class="ptw-flex ptw-flex-col ptw-h-full">
+          <div class="flex flex-col h-full">
             <PaneTabs
               :story="storyStore.currentStory"
               :variant="storyStore.currentVariant"
@@ -68,7 +68,7 @@ const panelContentComponent = computed(() => {
               :is="panelContentComponent"
               :story="storyStore.currentStory"
               :variant="storyStore.currentVariant"
-              class="ptw-h-full ptw-overflow-auto"
+              class="h-full overflow-auto"
             />
           </div>
         </template>
@@ -77,7 +77,7 @@ const panelContentComponent = computed(() => {
           <StorySourceCode
             :story="storyStore.currentStory"
             :variant="storyStore.currentVariant"
-            class="ptw-h-full"
+            class="h-full"
           />
         </template>
       </BaseSplitPane>

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

@@ -4,10 +4,10 @@ import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
 import { HstCopyIcon } from '@poveste/controls'
 import { unindent } from '@poveste/shared'
-import { createHighlighter } from 'shiki'
 import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
 import { computed, markRaw, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import { isDark } from '../../util/dark'
+import { getHighlighter } from '../../util/highlighter'
 import BaseEmpty from '../base/BaseEmpty.vue'
 
 const props = defineProps<{
@@ -87,23 +87,21 @@ const displayedSourceCode = computed(() => {
 // HTML render
 
 onMounted(async () => {
-  highlighter.value = await createHighlighter({
-    langs: [
-      'html',
-      'jsx',
-    ],
-    themes: [
-      'github-light',
-      'github-dark',
-    ],
-  })
+  try {
+    highlighter.value = await getHighlighter()
+  }
+  catch (e) {
+    // Leave `highlighter` unset so the pane falls back to the plain textarea
+    // rendering instead of showing nothing at all.
+    console.error(e)
+  }
 })
 
 const sourceHtml = computed(() => displayedSourceCode.value
   ? highlighter.value?.codeToHtml(displayedSourceCode.value, {
-    lang: 'html',
-    theme: isDark.value ? 'github-dark' : 'github-light',
-  })
+      lang: 'html',
+      theme: isDark.value ? 'github-dark' : 'github-light',
+    })
   : '')
 
 // Scrolling
@@ -133,32 +131,32 @@ watch(sourceHtml, async () => {
 
 <template>
   <div
-    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"
+    class="poveste-story-source-code bg-gray-50 dark:bg-gray-750 h-full overflow-hidden flex flex-col"
   >
     <!-- Toolbar -->
     <div
       v-if="!error"
-      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"
+      class="h-10 flex-none border-b border-solid border-gray-500/5 px-4 flex items-center gap-2"
     >
-      <div class="ptw-text-gray-900 dark:ptw-text-gray-100">
+      <div class="text-gray-900 dark:text-gray-100">
         Source
       </div>
-      <div class="ptw-flex-1" />
+      <div class="flex-1" />
 
       <!-- Display source modes -->
-      <div class="ptw-flex ptw-flex-none ptw-gap-px ptw-h-full ptw-py-2">
+      <div class="flex flex-none gap-px h-full py-2">
         <button
           v-tooltip="!dynamicSourceCode ? 'Dynamic source code is not available' : displayedSource !== 'dynamic' ? 'Switch to dynamic source' : null"
-          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="flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-l transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden"
           :class="[
-            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',
+            displayedSource !== 'dynamic' ? 'max-w-6 opacity-70' : 'max-w-[82px] text-primary-600 dark:text-primary-400',
+            dynamicSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : 'opacity-50',
           ]"
           @click="dynamicSourceCode && (displayedSource = 'dynamic')"
         >
           <Icon
             icon="carbon:flash"
-            class="ptw-w-4 ptw-h-4 ptw-flex-none"
+            class="w-4 h-4 flex-none"
           />
           <span
             class="transition-opacity duration-300"
@@ -171,16 +169,16 @@ watch(sourceHtml, async () => {
         </button>
         <button
           v-tooltip="!staticSourceCode ? 'Static source code is not available' : displayedSource !== 'static' ? 'Switch to static source' : null"
-          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="flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-r transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden"
           :class="[
-            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',
+            displayedSource !== 'static' ? 'max-w-6 opacity-70' : 'max-w-[63px] text-primary-600 dark:text-primary-400',
+            staticSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : 'opacity-50',
           ]"
           @click="staticSourceCode && (displayedSource = 'static')"
         >
           <Icon
             icon="carbon:document"
-            class="ptw-w-4 ptw-h-4 ptw-flex-none"
+            class="w-4 h-4 flex-none"
           />
           <span
             class="transition-opacity duration-300"
@@ -195,13 +193,13 @@ watch(sourceHtml, async () => {
 
       <HstCopyIcon
         :content="displayedSourceCode"
-        class="ptw-flex-none"
+        class="flex-none"
       />
     </div>
 
     <div
       v-if="error"
-      class="ptw-text-red-500 ptw-h-full ptw-p-2 ptw-overflow-auto ptw-font-mono ptw-text-sm"
+      class="text-red-500 h-full p-2 overflow-auto font-mono text-sm"
     >
       Error: {{ error }}
     </div>
@@ -209,7 +207,7 @@ watch(sourceHtml, async () => {
     <BaseEmpty v-else-if="!displayedSourceCode">
       <Icon
         icon="carbon:code-hide"
-        class="ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
+        class="w-8 h-8 opacity-50 mb-6"
       />
       <span>Not available</span>
     </BaseEmpty>
@@ -217,7 +215,7 @@ watch(sourceHtml, async () => {
     <textarea
       v-else-if="!sourceHtml"
       ref="scroller"
-      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"
+      class="__poveste-code-placeholder w-full h-full p-4 outline-none bg-transparent resize-none m-0"
       :value="displayedSourceCode"
       readonly
       data-test-id="story-source-code"
@@ -227,12 +225,12 @@ watch(sourceHtml, async () => {
     <div
       v-else
       ref="scroller"
-      class="ptw-w-full ptw-h-full ptw-overflow-auto"
+      class="w-full h-full overflow-auto"
       data-test-id="story-source-code"
       @scroll="onScroll"
     >
       <div
-        class="__poveste-code __histoire-code ptw-p-4 ptw-w-fit"
+        class="__poveste-code __histoire-code p-4 w-fit"
         v-html="sourceHtml"
       />
     </div>

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

@@ -2,8 +2,6 @@
 import type { PropType } from 'vue'
 import type { SearchResult } from '../../types'
 import { ref, toRefs } from 'vue'
-import { useRouter } from 'vue-router'
-import { onKeyboardShortcut } from '../../util/keyboard'
 import { useScrollOnActive } from '../../util/scroll'
 import BaseListItem from '../base/BaseListItem.vue'
 import BaseListItemLink from '../base/BaseListItemLink.vue'
@@ -30,17 +28,7 @@ const el = ref<HTMLDivElement>()
 const { selected } = toRefs(props)
 useScrollOnActive(selected, el)
 
-const router = useRouter()
-
-onKeyboardShortcut(['enter'], () => {
-  if (!props.selected) return
-  action()
-})
-
-function action(fromClick = false) {
-  if ('route' in props.result && !fromClick) {
-    router.push(props.result.route)
-  }
+function action() {
   if ('onActivate' in props.result) {
     props.result.onActivate()
   }
@@ -59,8 +47,8 @@ function action(fromClick = false) {
       v-if="'route' in result"
       :to="result.route"
       :is-active="selected"
-      class="ptw-px-6 ptw-py-4 ptw-gap-4"
-      @navigate="action(true)"
+      class="px-6 py-4 gap-4"
+      @navigate="action()"
     >
       <SearchItemContent
         :result="result"
@@ -71,8 +59,8 @@ function action(fromClick = false) {
     <BaseListItem
       v-if="'onActivate' in result"
       :is-active="selected"
-      class="ptw-px-6 ptw-py-4 ptw-gap-4"
-      @navigate="action(true)"
+      class="px-6 py-4 gap-4"
+      @navigate="action()"
     >
       <SearchItemContent
         :result="result"

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

@@ -23,14 +23,14 @@ const kindLabels = {
 <template>
   <BaseIcon
     :icon="result.icon ?? defaultIcons[result.kind]"
-    class="ptw-w-4 ptw-h-4"
+    class="w-4 h-4"
     :class="[
       !selected ? [
         result.iconColor
           ? 'bind-icon-color'
           : {
-            'ptw-text-primary-500': result.kind === 'story',
-            'ptw-text-gray-500': result.kind === 'variant',
+            'text-primary-500': result.kind === 'story',
+            'text-gray-500': result.kind === 'variant',
           },
       ] : [],
       {
@@ -38,27 +38,27 @@ const kindLabels = {
       },
     ]"
   />
-  <div class="ptw-flex-1">
-    <div class="ptw-flex">
+  <div class="flex-1">
+    <div class="flex">
       {{ result.title }}
-      <span class="ptw-ml-auto ptw-opacity-40">
+      <span class="ml-auto opacity-40">
         {{ kindLabels[result.kind] }}
       </span>
     </div>
 
     <div
       v-if="result.path?.length"
-      class="ptw-flex ptw-items-center ptw-gap-0.5 ptw-opacity-60"
+      class="flex items-center gap-0.5 opacity-60"
     >
       <div
         v-for="(p, index) of result.path"
         :key="index"
-        class="ptw-flex ptw-items-center ptw-gap-0.5"
+        class="flex items-center gap-0.5"
       >
         <Icon
           v-if="index > 0"
           icon="carbon:chevron-right"
-          class="ptw-w-4 ptw-h-4 ptw-mt-0.5 ptw-opacity-50"
+          class="w-4 h-4 mt-0.5 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 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"
+    class="poveste-search-loading flex items-center gap-4 pl-6 border border-transparent focus-visible:border-primary-500 h-[51px] opacity-30"
   >
     <Icon
       icon="carbon:search"
-      class="flex-none ptw-w-4 ptw-h-4"
+      class="flex-none w-4 h-4"
     />
 
     Loading...

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

@@ -2,12 +2,6 @@
 import { defineAsyncComponent } from 'vue'
 import SearchLoading from './SearchLoading.vue'
 
-const SearchPane = defineAsyncComponent({
-  loader: () => import('./SearchPane.vue'),
-  loadingComponent: SearchLoading,
-  delay: 0,
-})
-
 defineProps({
   shown: {
     type: Boolean,
@@ -19,6 +13,12 @@ const emit = defineEmits({
   close: () => true,
 })
 
+const SearchPane = defineAsyncComponent({
+  loader: () => import('./SearchPane.vue'),
+  loadingComponent: SearchLoading,
+  delay: 0,
+})
+
 function close() {
   emit('close')
 }
@@ -27,14 +27,14 @@ function close() {
 <template>
   <div
     v-show="shown"
-    class="poveste-search-modal ptw-fixed ptw-inset-0 ptw-bg-white/80 dark:ptw-bg-gray-900/80 ptw-z-20"
+    class="poveste-search-modal fixed inset-0 bg-white/80 dark:bg-gray-900/80 z-20"
     data-test-id="search-modal"
   >
     <div
-      class="ptw-absolute ptw-inset-0"
+      class="absolute inset-0"
       @click="close()"
     />
-    <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">
+    <div class="bg-white dark:bg-gray-900 md:mt-16 md:mx-auto w-screen max-w-[512px] shadow-xl border border-gray-200 dark:border-gray-750 rounded-lg relative divide-y divide-gray-200 dark:divide-gray-850">
       <SearchPane
         :shown="shown"
         @close="close()"