@poveste/app 0.2.0 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan"
@@ -30,31 +30,34 @@
   "dependencies": {
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
-    "@poveste/controls": "^0.2.0",
-    "@poveste/shared": "^0.2.0",
-    "@poveste/vendors": "^0.2.0"
+    "@poveste/controls": "^0.3.0",
+    "@poveste/shared": "^0.3.0",
+    "@poveste/vendors": "^0.3.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/typography": "^0.5.15",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.10.1",
     "@vitejs/plugin-vue": "^5.2.1",
-    "autoprefixer": "^10.4.20",
     "chokidar": "^4.0.1",
     "concurrently": "^9.1.0",
     "fs-extra": "^11.2.0",
     "globby": "^14.0.2",
     "pathe": "^1.1.2",
     "postcss": "^8.4.49",
-    "postcss-import": "^16.1.0",
-    "tailwindcss": "^3.4.16",
+    "postcss-cli": "^11.0.1",
+    "tailwindcss": "^4.3.3",
     "typescript": "5.6.3",
-    "vite": "^7.3.0",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10",
     "vue": "^3.5.26"
   },
   "scripts": {
     "build": "rimraf dist && vite build && pnpm run build:css && node ./scripts/copy.mjs",
-    "build:css": "tailwindcss -i src/app/style/main.pcss -o ./dist/style.css -c tailwind.config.cjs --postcss postcss.config.cjs",
+    "build:css": "postcss src/app/style/main.pcss -o ./dist/style.css",
+    "test": "vitest run",
+    "test:dev": "vitest",
     "watch": "concurrently \"vite build --watch\" \"pnpm run build:css --watch\" \"node ./scripts/watchAndCopy.mjs\""
   }
 }

package/src/__tests__/postcss-scope-wrapper.spec.ts

@@ -0,0 +1,65 @@
+import postcss from 'postcss'
+import { describe, expect, it } from 'vitest'
+// @ts-expect-error — plain CJS postcss plugin, no types.
+import scopeWrapper from '../../postcss-scope-wrapper.cjs'
+
+const OPTS = { from: ':root', to: '.__poveste-render-story:not(.__poveste-render-custom-controls)' }
+
+function run(css: string) {
+  return postcss([scopeWrapper(OPTS)]).process(css, { from: undefined }).css
+}
+
+describe('postcss-scope-wrapper', () => {
+  it('wraps the stylesheet in the configured scope', () => {
+    expect(run('.a { color: red }')).toContain('@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls))')
+  })
+
+  it('leaves @import at the top level', () => {
+    // @import is only valid before other rules; moving it inside @scope drops it.
+    const out = run('@import "x.css";\n.a { color: red }')
+
+    expect(out.indexOf('@import')).toBeLessThan(out.indexOf('@scope'))
+  })
+
+  /*
+   * The three selectors below all mean "the app's root container" once this
+   * stylesheet is wrapped. `body` is included for the same reason as `html`:
+   * poveste re-wraps the output a second time rooted at `.poveste-app-root`, so
+   * both sit above the effective scoping root and can never be matched. Leaving
+   * `body` out is #102 — the whole UI rendered one size too large.
+   */
+  it.each(['html', ':root', 'body'])('rewrites a root-ish `%s` selector to :scope', (selector) => {
+    expect(run(`${selector} { font-size: .875rem }`)).toContain(':scope {')
+  })
+
+  it('rewrites root-ish selectors inside a selector list, leaving the rest alone', () => {
+    const out = run('html, body, #app { height: 100% }')
+
+    expect(out).toContain(':scope,')
+    expect(out).toContain('#app')
+    expect(out).not.toMatch(/(?<![\w.\-#])body\s*[,{]/)
+  })
+
+  it('rewrites nested rules, not just top-level ones', () => {
+    // Tailwind v4 emits `@layer base { … }` as a real cascade layer, so the
+    // rules that style the scoping root sit one level down.
+    const out = run('@layer base { body { font-size: .875rem } }')
+
+    expect(out).toContain(':scope {')
+    expect(out).not.toMatch(/(?<![\w.\-#])body\s*\{/)
+  })
+
+  it('rewrites root-ish selectors inside media queries', () => {
+    // The 640px override is where #102 actually bit.
+    const out = run('@media (min-width: 640px) { body { font-size: .875rem } }')
+
+    expect(out).toContain(':scope {')
+  })
+
+  it('leaves ordinary selectors untouched', () => {
+    const out = run('.poveste-story-list { color: red }')
+
+    expect(out).toContain('.poveste-story-list')
+    expect(out).not.toContain(':scope {')
+  })
+})

package/src/app/App.vue

@@ -110,10 +110,10 @@ const layoutStore = useLayoutStore()
 </script>
 
 <template>
-  <div class="poveste-app-root ptw-h-full">
+  <div class="poveste-app-root h-full">
     <div
       v-if="storyStore.currentStory"
-      class="poveste-app ptw-hidden"
+      class="poveste-app hidden"
     >
       <GenericMountStory
         :key="storyStore.currentStory.id"
@@ -122,7 +122,7 @@ const layoutStore = useLayoutStore()
     </div>
 
     <div
-      class="ptw-h-screen ptw-bg-gray-100 dark:ptw-bg-gray-750 dark:ptw-text-gray-100"
+      class="h-screen bg-gray-100 dark:bg-gray-750 dark:text-gray-100"
       :style="{
         // Prevent flash of content
         opacity: mounted ? 1 : 0,
@@ -130,12 +130,12 @@ const layoutStore = useLayoutStore()
     >
       <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"
+        class="h-full flex flex-col divide-y divide-gray-100 dark:divide-gray-800"
       >
-        <div class="ptw-flex ptw-items-center ptw-gap-2 ptw-pr-4">
-          <AppHeader class="ptw-flex-1" />
+        <div class="flex items-center gap-2 pr-4">
+          <AppHeader class="flex-1" />
           <AppActions
-            class="ptw-flex-none"
+            class="flex-none"
             @layout="isLayoutOpen = true"
             @search="isSearchOpen = true"
           />
@@ -144,7 +144,7 @@ const layoutStore = useLayoutStore()
           :tree="tree"
           :stories="stories"
         />
-        <RouterView class="ptw-grow" />
+        <RouterView class="grow" />
       </div>
 
       <BaseSplitPane
@@ -153,38 +153,38 @@ const layoutStore = useLayoutStore()
         :min="5"
         :max="50"
         :default-split="15"
-        class="ptw-h-full"
+        class="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" />
+          <div class="flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right">
+            <AppHeader class="flex-none" />
             <StoryList
               :tree="tree"
               :stories="stories"
-              class="ptw-flex-1"
+              class="flex-1"
             />
           </div>
         </template>
 
         <template #last>
-          <div class="ptw-flex ptw-flex-col ptw-h-full">
+          <div class="flex flex-col h-full">
             <TopBar
               @layout="isLayoutOpen = true"
               @search="isSearchOpen = true"
             />
-            <RouterView class="ptw-flex-1 ptw-min-h-0" />
+            <RouterView class="flex-1 min-h-0" />
           </div>
         </template>
       </BaseSplitPane>
       <div
         v-else
-        class="ptw-h-full ptw-flex ptw-flex-col"
+        class="h-full flex flex-col"
       >
         <TopBar
           @layout="isLayoutOpen = true"
           @search="isSearchOpen = true"
         />
-        <RouterView class="ptw-flex-1 ptw-min-h-0" />
+        <RouterView class="flex-1 min-h-0" />
       </div>
 
       <LayoutModal

package/src/app/components/HomeView.vue

@@ -34,13 +34,13 @@ const stats = computed(() => {
 </script>
 
 <template>
-  <div class="poveste-home-view ptw-flex md:ptw-flex-col ptw-gap-12 ptw-items-center ptw-justify-center ptw-h-full">
+  <div class="poveste-home-view flex md:flex-col gap-12 items-center justify-center h-full">
     <img
       :src="logoUrl"
       alt="Logo"
-      class="ptw-w-64 ptw-h-64 ptw-opacity-25 ptw-mb-8 ptw-hidden md:ptw-block"
+      class="w-64 h-64 opacity-25 mb-8 hidden md:block"
     >
-    <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">
+    <div class="flex !md:flex-col flex-wrap justify-evenly gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-750 rounded border border-gray-500/30">
       <HomeCounter
         title="Stories"
         icon="carbon:cube"

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

@@ -29,7 +29,7 @@ const themeIcon = computed(() => {
     >
       <Icon
         icon="carbon:panel-expansion"
-        class="ptw-w-4 ptw-h-4"
+        class="w-4 h-4"
       />
     </TopBarChipItem>
 
@@ -40,7 +40,7 @@ const themeIcon = computed(() => {
     >
       <Icon
         icon="carbon:search"
-        class="ptw-w-4 ptw-h-4"
+        class="w-4 h-4"
       />
     </TopBarChipItem>
 
@@ -51,7 +51,7 @@ const themeIcon = computed(() => {
     >
       <Icon
         :icon="themeIcon"
-        class="ptw-w-4 ptw-h-4"
+        class="w-4 h-4"
       />
     </TopBarChipItem>
   </TopBarChip>

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

@@ -5,16 +5,16 @@ import AppLogo from './AppLogo.vue'
 
 <template>
   <div
-    class="poveste-app-header ptw-px-4 ptw-h-14 ptw-flex ptw-items-center ptw-gap-2"
+    class="poveste-app-header px-4 h-14 flex items-center gap-2"
   >
-    <div class="ptw-py-3 sm:ptw-py-4 ptw-flex-1 ptw-h-full ptw-flex ptw-items-center ptw-pr-2">
+    <div class="py-3 sm:py-4 flex-1 h-full flex items-center pr-2">
       <a
         :href="povesteConfig.theme?.logoHref"
         target="_blank"
-        class="ptw-w-full ptw-h-full ptw-flex ptw-items-center"
+        class="w-full h-full flex items-center"
       >
         <AppLogo
-          class="ptw-max-w-full ptw-max-h-full"
+          class="max-w-full 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="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"
+      class="px-6 h-12 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer flex gap-2 flex-wrap w-full items-center"
       @click="openMenu"
     >
       <template v-if="story">
@@ -48,21 +48,21 @@ watch(story, () => {
           <span>
             {{ file }}
           </span>
-          <span class="ptw-opacity-40">
+          <span class="opacity-40">
             /
           </span>
         </template>
-        <span class="ptw-flex ptw-items-center ptw-gap-2">
+        <span class="flex items-center gap-2">
           <Icon
             :icon="story.icon ?? 'carbon:cube'"
-            class="ptw-w-5 ptw-h-5 ptw-flex-none"
+            class="w-5 h-5 flex-none"
             :class="{
-              'ptw-text-primary-500': !story.iconColor,
+              'text-primary-500': !story.iconColor,
               'bind-icon-color': story.iconColor,
             }"
           />
           {{ story.title }}
-          <span class="ptw-opacity-40 ptw-text-sm">
+          <span class="opacity-40 text-sm">
             {{ story.variants.length }}
           </span>
         </span>
@@ -73,7 +73,7 @@ watch(story, () => {
 
       <Icon
         icon="carbon:chevron-sort"
-        class="ptw-w-5 ptw-h-5 ptw-shrink-0 ptw-ml-auto"
+        class="w-5 h-5 shrink-0 ml-auto"
       />
     </a>
   </div>
@@ -86,7 +86,7 @@ watch(story, () => {
     <StoryList
       :tree="tree"
       :stories="stories"
-      class="ptw-flex-1 ptw-overflow-y-scroll"
+      class="flex-1 overflow-y-scroll"
     />
   </MobileOverlay>
 </template>

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

@@ -18,19 +18,19 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="ptw-p-2 ptw-flex ptw-items-center ptw-gap-x-2">
+  <div class="p-2 flex items-center gap-x-2">
     <Icon
       :icon="props.icon"
-      class="ptw-text-2xl ptw-text-gray-700 dark:ptw-text-gray-300 ptw-flex-none"
+      class="text-2xl text-gray-700 dark:text-gray-300 flex-none"
     />
-    <div class="ptw-flex ptw-flex-col ptw-leading-none">
+    <div class="flex flex-col leading-none">
       <span
-        class="ptw-text-primary-500 ptw-min-w-[80px] ptw-font-bold"
+        class="text-primary-500 min-w-[80px] font-bold"
       >
         {{ count }}
       </span>
       <span
-        class="ptw-text-sm ptw-text-gray-900 dark:ptw-text-gray-100"
+        class="text-sm text-gray-900 dark: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 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">
+  <div class="poveste-initial-loading fixed inset-0 bg-white dark:bg-gray-700 flex flex-col gap-6 items-center justify-center">
     <transition name="__poveste-fade">
       <div
         v-if="progress.total > 0"
-        class="ptw-grid ptw-gap-2"
+        class="grid 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="ptw-bg-primary-500/10 ptw-rounded-full"
+          class="bg-primary-500/10 rounded-full"
         >
           <div
-            class="ptw-w-3 ptw-h-3 ptw-bg-primary-500 ptw-rounded-full ptw-duration-150 ptw-ease-out"
+            class="w-3 h-3 bg-primary-500 rounded-full duration-150 ease-out"
             :class="{
-              'ptw-transition-transform ptw-scale-0': n >= progress.loaded,
+              'transition-transform 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 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"
+      class="poveste-mobile-overlay absolute z-10 bg-white dark:bg-gray-700 w-screen h-screen inset-0 overflow-hidden flex flex-col"
     >
-      <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>
+      <div class="p-4 h-16 flex border-b border-gray-100 dark:border-gray-800 items-center place-content-between">
+        <span class="text-gray-500">{{ title }}</span>
         <a
-          class="ptw-p-1 hover:ptw-text-primary-500 dark:hover:ptw-text-primary-400 ptw-cursor-pointer"
+          class="p-1 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer"
           @click="emit('close')"
         >
           <Icon
             icon="carbon:close"
-            class="ptw-w-8 ptw-h-8 ptw-shrink-0"
+            class="w-8 h-8 shrink-0"
           />
         </a>
       </div>

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

@@ -18,16 +18,16 @@ 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">
+  <div class="poveste-top-bar flex-none grid grid-cols-[1fr_auto_1fr] items-center h-14 px-4 gap-3">
     <AppActions
-      class="ptw-justify-self-start"
+      class="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"
+      class="px-6 py-1.5 max-w-full"
     >
       <ToolbarTitle
         :variant="storyStore.currentVariant ?? undefined"
@@ -38,7 +38,7 @@ const storyStore = useStoryStore()
 
     <TopBarChip
       v-if="storyStore.currentStory && !storyStore.currentStory.docsOnly"
-      class="ptw-justify-self-end"
+      class="justify-self-end"
     >
       <ToolbarResponsiveSize
         v-if="storyStore.currentVariant && !storyStore.currentVariant.responsiveDisabled"

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

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

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

@@ -1,6 +1,6 @@
 <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"
+    class="poveste-top-bar-chip-item flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 active:bg-white/70 dark:hover:bg-white/10 dark:active:bg-white/15 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors"
   >
     <slot />
   </a>

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

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

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

@@ -34,35 +34,35 @@ watch(path, () => {
   <div
     role="checkbox"
     tabindex="0"
-    class="poveste-base-checkbox ptw-flex ptw-items-center ptw-gap-2 ptw-select-none ptw-px-4 ptw-py-3 ptw-cursor-pointer hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-700"
+    class="poveste-base-checkbox flex items-center gap-2 select-none px-4 py-3 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700"
     @click="toggle()"
     @keydown.enter.prevent="toggle()"
     @keydown.space.prevent="toggle()"
   >
-    <div class="ptw-text-white ptw-w-[16px] ptw-h-[16px] ptw-relative">
+    <div class="text-white w-[16px] h-[16px] relative">
       <div
-        class="ptw-border group-active:ptw-bg-gray-500/20 ptw-rounded-sm ptw-box-border ptw-absolute ptw-inset-0 ptw-transition-border ptw-duration-150 ptw-ease-out"
+        class="border group-active:bg-gray-500/20 rounded-sm box-border absolute inset-0 transition-border duration-150 ease-out"
         :class="[
           modelValue
-            ? 'ptw-border-primary-500 ptw-border-8'
-            : 'ptw-border-black/25 dark:ptw-border-white/25 ptw-delay-150',
+            ? 'border-primary-500 border-8'
+            : 'border-black/25 dark:border-white/25 delay-150',
         ]"
       />
       <svg
         width="16"
         height="16"
         viewBox="0 0 24 24"
-        class="ptw-relative ptw-z-10"
+        class="relative z-10"
       >
         <path
           ref="path"
           d="m 4 12 l 5 5 l 10 -10"
           fill="none"
-          class="ptw-stroke-white ptw-stroke-2 ptw-duration-200 ptw-ease-in-out"
+          class="stroke-white stroke-2 duration-200 ease-in-out"
           :class="[
-            animationEnabled ? 'ptw-transition-all' : 'ptw-transition-none',
+            animationEnabled ? 'transition-all' : 'transition-none',
             {
-              'ptw-delay-150': modelValue,
+              'delay-150': modelValue,
             },
           ]"
           :stroke-dasharray="dasharray"

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

@@ -28,7 +28,7 @@ const action = () => copy(props.content)
       delay: 0,
     }"
     icon="carbon:copy-file"
-    class="poveste-base-copy-icon ptw-w-4 ptw-h-4 ptw-opacity-50 hover:ptw-opacity-100 hover:ptw-text-primary-500 ptw-cursor-pointer"
+    class="poveste-base-copy-icon w-4 h-4 opacity-50 hover:opacity-100 hover:text-primary-500 cursor-pointer"
     @click="action()"
   />
 </template>

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

@@ -1,15 +1,15 @@
 <template>
-  <div class="poveste-base-empty ptw-base-empty ptw-flex ptw-flex-col ptw-items-center ptw-justify-center ptw-space-y-4 ptw-py-12 ptw-h-full ptw-text-center ptw-text-gray-400  ptw-text-lg">
+  <div class="poveste-base-empty base-empty flex flex-col items-center justify-center space-y-4 py-12 h-full text-center text-gray-400  text-lg">
     <slot />
   </div>
 </template>
 
 <style scoped>
-.ptw-base-empty:not(.no-animation) {
-  animation: ptw-base-empty .15s .2s both;
+.base-empty:not(.no-animation) {
+  animation: base-empty .15s .2s both;
 }
 
-@keyframes ptw-base-empty {
+@keyframes base-empty {
   0% {
     opacity: 0;
   }

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

@@ -10,7 +10,7 @@ const formatted = computed(() => props.shortcut.split('+').map(k => formatKey(k.
 </script>
 
 <template>
-  <span class="poveste-base-keyboard-shortcut ptw-border ptw-border-current ptw-opacity-50 ptw-px-1 ptw-rounded-sm">
+  <span class="poveste-base-keyboard-shortcut border border-current opacity-50 px-1 rounded-sm">
     {{ formatted }}
   </span>
 </template>

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

@@ -14,12 +14,12 @@ function handleNavigate() {
 
 <template>
   <a
-    class="poveste-base-list-item ptw-flex ptw-items-center ptw-gap-2 ptw-text-gray-900 dark:ptw-text-gray-100"
+    class="poveste-base-list-item flex items-center gap-2 text-gray-900 dark:text-gray-100"
     :class="[
       $attrs.class,
       isActive
-        ? 'active ptw-bg-primary-500 hover:ptw-bg-primary-600 ptw-text-white dark:ptw-text-black'
-        : 'hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-900',
+        ? 'active bg-primary-500 hover:bg-primary-600 text-white dark:text-black'
+        : 'hover:bg-primary-100 dark:hover:bg-primary-900',
     ]"
     @click="handleNavigate()"
     @keyup.enter="handleNavigate()"

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

@@ -37,12 +37,12 @@ export default defineComponent({
   >
     <a
       :href="href"
-      class="ptw-flex ptw-items-center ptw-gap-2 ptw-text-gray-900 dark:ptw-text-gray-100"
+      class="flex items-center gap-2 text-gray-900 dark:text-gray-100"
       :class="[
         $attrs.class,
         (isActive != null ? isActive : linkIsActive)
-          ? 'active ptw-bg-primary-500 hover:ptw-bg-primary-600 ptw-text-white dark:ptw-text-black'
-          : 'hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-900',
+          ? 'active bg-primary-500 hover:bg-primary-600 text-white dark:text-black'
+          : 'hover:bg-primary-100 dark:hover:bg-primary-900',
       ]"
       @click="handleNavigate($event, navigate)"
       @keyup.enter="handleNavigate($event, navigate)"

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

@@ -86,7 +86,7 @@ function ChildrenSlice(props, { slots }) {
 <template>
   <div
     ref="el"
-    class="poveste-base-overflow-menu ptw-flex ptw-overflow-hidden ptw-relative"
+    class="poveste-base-overflow-menu flex overflow-hidden relative"
   >
     <ChildrenRender>
       <slot />
@@ -97,16 +97,16 @@ function ChildrenSlice(props, { slots }) {
     >
       <div
         role="button"
-        class="ptw-cursor-pointer hover:ptw-bg-primary-50 dark:hover:ptw-bg-primary-900 ptw-w-8 ptw-h-full ptw-flex ptw-items-center ptw-justify-center ptw-absolute ptw-top-0 ptw-right-0"
+        class="cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900 w-8 h-full flex items-center justify-center absolute top-0 right-0"
       >
         <Icon
           icon="carbon:caret-down"
-          class="ptw-w-4 ptw-h-4 ptw-opacity-50 group-hover:ptw-opacity-100"
+          class="w-4 h-4 opacity-50 group-hover:opacity-100"
         />
       </div>
 
       <template #popper>
-        <div class="ptw-flex ptw-flex-col ptw-items-stretch">
+        <div class="flex flex-col items-stretch">
           <ChildrenSlice
             :start="visibleChildrenCount"
           >