@poveste/app 0.2.0 → 0.3.0

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

@@ -122,39 +122,39 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
 </script>
 
 <template>
-  <div class="poveste-story-responsive-preview ptw-w-full ptw-h-full ptw-flex-1 ptw-rounded-lg ptw-relative ptw-overflow-hidden">
+  <div class="poveste-story-responsive-preview w-full h-full flex-1 rounded-lg relative overflow-hidden">
     <div
       v-if="isResponsiveEnabled"
-      class="ptw-absolute ptw-inset-0 ptw-w-full ptw-h-full ptw-bg-gray-100 dark:ptw-bg-gray-750 ptw-rounded-r-lg ptw-border-l-2 ptw-border-gray-500/10 dark:ptw-border-gray-700/30 ptw-overflow-hidden"
+      class="absolute inset-0 w-full h-full bg-gray-100 dark:bg-gray-750 rounded-r-lg border-l-2 border-gray-500/10 dark:border-gray-700/30 overflow-hidden"
     >
       <HatchedPattern
-        class="ptw-w-full ptw-h-full ptw-text-black/[1%] dark:ptw-text-white/[1%]"
+        class="w-full h-full text-black/[1%] dark:text-white/[1%]"
       />
     </div>
 
     <div
       ref="previewWrapper"
-      class="ptw-h-full ptw-overflow-auto ptw-relative"
+      class="h-full overflow-auto relative"
     >
       <div
-        class="ptw-overflow-hidden ptw-bg-white dark:ptw-bg-gray-700 ptw-rounded-lg ptw-relative"
+        class="overflow-hidden bg-white dark:bg-gray-700 rounded-lg relative"
         :class="isResponsiveEnabled ? {
-          'ptw-w-fit': !!finalWidth,
-          'ptw-h-fit': !!finalHeight,
-          'ptw-h-full': !finalHeight,
-        } : 'ptw-h-full'"
+          'w-fit': !!finalWidth,
+          'h-fit': !!finalHeight,
+          'h-full': !finalHeight,
+        } : 'h-full'"
       >
         <div
-          class="bind-preview-bg ptw-rounded-lg ptw-h-full"
+          class="bind-preview-bg rounded-lg h-full"
           data-test-id="responsive-preview-bg"
         >
           <CheckerboardPattern
             v-if="settings.checkerboard"
-            class="ptw-absolute ptw-inset-0 ptw-w-full ptw-h-full ptw-text-gray-500/20"
+            class="absolute inset-0 w-full h-full text-gray-500/20"
           />
-          <div class="ptw-p-8 ptw-h-full ptw-relative">
-            <div class="ptw-w-full ptw-h-full ptw-relative">
-              <div class="ptw-absolute ptw-inset-0" />
+          <div class="p-8 h-full relative">
+            <div class="w-full h-full relative">
+              <div class="absolute inset-0" />
 
               <slot
                 :is-responsive-enabled="isResponsiveEnabled"
@@ -165,14 +165,14 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
             </div>
 
             <!-- Markers -->
-            <div class="ptw-absolute ptw-top-5 ptw-left-8 ptw-h-2 ptw-w-px ptw-bg-gray-400/25" />
-            <div class="ptw-absolute ptw-top-5 ptw-right-8 ptw-h-2 ptw-w-px ptw-bg-gray-400/25" />
-            <div class="ptw-absolute ptw-bottom-5 ptw-left-8 ptw-h-2 ptw-w-px ptw-bg-gray-400/25" />
-            <div class="ptw-absolute ptw-bottom-5 ptw-right-8 ptw-h-2 ptw-w-px ptw-bg-gray-400/25" />
-            <div class="ptw-absolute ptw-left-5 ptw-top-8 ptw-w-2 ptw-h-px ptw-bg-gray-400/25" />
-            <div class="ptw-absolute ptw-left-5 ptw-bottom-8 ptw-w-2 ptw-h-px ptw-bg-gray-400/25" />
-            <div class="ptw-absolute ptw-right-5 ptw-top-8 ptw-w-2 ptw-h-px ptw-bg-gray-400/25" />
-            <div class="ptw-absolute ptw-right-5 ptw-bottom-8 ptw-w-2 ptw-h-px ptw-bg-gray-400/25" />
+            <div class="absolute top-5 left-8 h-2 w-px bg-gray-400/25" />
+            <div class="absolute top-5 right-8 h-2 w-px bg-gray-400/25" />
+            <div class="absolute bottom-5 left-8 h-2 w-px bg-gray-400/25" />
+            <div class="absolute bottom-5 right-8 h-2 w-px bg-gray-400/25" />
+            <div class="absolute left-5 top-8 w-2 h-px bg-gray-400/25" />
+            <div class="absolute left-5 bottom-8 w-2 h-px bg-gray-400/25" />
+            <div class="absolute right-5 top-8 w-2 h-px bg-gray-400/25" />
+            <div class="absolute right-5 bottom-8 w-2 h-px bg-gray-400/25" />
           </div>
 
           <!-- Resize Dragger -->
@@ -180,27 +180,27 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
             <div
               ref="horizontalDragger"
               v-tooltip.right="sizeTooltip"
-              class="ptw-absolute ptw-w-4 ptw-top-0 ptw-bottom-4 ptw-right-0 hover:ptw-bg-primary-500/30 ptw-flex ptw-items-center ptw-justify-center ptw-cursor-ew-resize ptw-group hover:ptw-text-primary-500"
+              class="absolute w-4 top-0 bottom-4 right-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ew-resize group hover:text-primary-500"
             >
               <Icon
                 icon="mdi:drag-vertical-variant"
-                class="ptw-w-4 ptw-h-4 ptw-opacity-20 group-hover:ptw-opacity-90"
+                class="w-4 h-4 opacity-20 group-hover:opacity-90"
               />
             </div>
             <div
               ref="verticalDragger"
               v-tooltip.bottom="sizeTooltip"
-              class="ptw-absolute ptw-h-4 ptw-left-0 ptw-right-4 ptw-bottom-0 hover:ptw-bg-primary-500/30 ptw-flex ptw-items-center ptw-justify-center ptw-cursor-ns-resize ptw-group hover:ptw-text-primary-500"
+              class="absolute h-4 left-0 right-4 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ns-resize group hover:text-primary-500"
             >
               <Icon
                 icon="mdi:drag-horizontal-variant"
-                class="ptw-w-4 ptw-h-4 ptw-opacity-20 group-hover:ptw-opacity-90"
+                class="w-4 h-4 opacity-20 group-hover:opacity-90"
               />
             </div>
             <div
               ref="cornerDragger"
               v-tooltip.bottom="sizeTooltip"
-              class="ptw-absolute ptw-w-4 ptw-h-4 ptw-right-0 ptw-bottom-0 hover:ptw-bg-primary-500/30 ptw-flex ptw-items-center ptw-justify-center ptw-cursor-nwse-resize ptw-group hover:ptw-text-primary-500"
+              class="absolute w-4 h-4 right-0 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-nwse-resize group hover:text-primary-500"
             />
           </template>
         </div>

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

@@ -115,22 +115,22 @@ const columnCount = computed(() => Math.min(storyStore.currentStory.variants.len
 </script>
 
 <template>
-  <div class="poveste-story-variant-grid ptw-flex ptw-flex-col ptw-items-stretch ptw-h-full __poveste-pane-shadow-from-right">
+  <div class="poveste-story-variant-grid flex flex-col items-stretch h-full __poveste-pane-shadow-from-right">
     <div
       ref="el"
-      class="ptw-overflow-y-auto ptw-flex ptw-flex-1"
+      class="overflow-y-auto flex flex-1"
       @scroll="updateMaxCount()"
     >
-      <div class="ptw-flex ptw-w-0 ptw-flex-1 ptw-mx-4">
+      <div class="flex w-0 flex-1 mx-4">
         <div
-          class="ptw-m-auto"
+          class="m-auto"
           :style="{
             minHeight: `${(storyStore.currentStory.variants.length / countPerRow) * (maxItemHeight + gap) - gap}px`,
           }"
         >
           <div
             ref="gridEl"
-            class="ptw-grid ptw-gap-4 ptw-my-4"
+            class="grid gap-4 my-4"
             :style="{
               gridTemplateColumns: `repeat(${columnCount}, ${gridColumnWidth}px)`,
             }"

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

@@ -7,6 +7,7 @@ import { useResizeObserver } from '@vueuse/core'
 import { computed, ref, toRefs } from 'vue'
 import { useRouter } from 'vue-router'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import { useStoryStore } from '../../stores/story'
 import { usePreviewDark } from '../../util/color-scheme'
 import { povesteConfig } from '../../util/config'
 import { getSourceCode } from '../../util/docs'
@@ -37,13 +38,12 @@ const emit = defineEmits({
 const { variant } = toRefs(props)
 const { isActive, targetRoute } = useCurrentVariantRoute(variant)
 
-Object.assign(props.variant, {
-  previewReady: false,
-})
+const storyStore = useStoryStore()
+
+storyStore.setPreviewReady(props.variant, false)
+
 function onReady() {
-  Object.assign(props.variant, {
-    previewReady: true,
-  })
+  storyStore.setPreviewReady(props.variant, true)
 }
 
 const router = useRouter()
@@ -84,32 +84,32 @@ const useIframe = computed(() => {
 <template>
   <div
     ref="el"
-    class="poveste-story-variant-grid-item ptw-cursor-default ptw-flex ptw-flex-col ptw-gap-y-1 ptw-group"
+    class="poveste-story-variant-grid-item cursor-default flex flex-col gap-y-1 group"
   >
     <!-- Header -->
-    <div class="ptw-flex-none ptw-flex ptw-items-center">
+    <div class="flex-none flex items-center">
       <RouterLink
         v-tooltip="variant.title"
         :to="targetRoute"
-        class="ptw-rounded ptw-w-max ptw-px-2 ptw-py-0.5 ptw-min-w-16 ptw-cursor-pointer ptw-flex ptw-items-center ptw-gap-1 ptw-flex-shrink"
+        class="rounded w-max px-2 py-0.5 min-w-16 cursor-pointer flex items-center gap-1 flex-shrink"
         :class="{
-          'hover:ptw-bg-gray-200 ptw-text-gray-500 dark:hover:ptw-bg-gray-800': !isActive,
-          'ptw-bg-primary-200 hover:ptw-bg-primary-300 ptw-text-primary-800 dark:ptw-bg-primary-700 dark:hover:ptw-bg-primary-800 dark:ptw-text-primary-200': isActive,
+          'hover:bg-gray-200 text-gray-500 dark:hover:bg-gray-800': !isActive,
+          'bg-primary-200 hover:bg-primary-300 text-primary-800 dark:bg-primary-700 dark:hover:bg-primary-800 dark:text-primary-200': isActive,
         }"
       >
         <Icon
           :icon="variant.icon ?? 'carbon:cube'"
-          class="ptw-w-4 ptw-h-4 ptw-opacity-50"
+          class="w-4 h-4 opacity-50"
           :class="{
-            'ptw-text-gray-500': !isActive && !variant.iconColor,
+            'text-gray-500': !isActive && !variant.iconColor,
             'bind-icon-color': !isActive && variant.iconColor,
           }"
         />
-        <span class="ptw-truncate ptw-flex-1">{{ variant.title }}</span>
+        <span class="truncate flex-1">{{ variant.title }}</span>
       </RouterLink>
 
       <!-- Toolbar -->
-      <div class="ptw-flex-none ptw-ml-auto ptw-hidden group-hover:ptw-flex ptw-items-center">
+      <div class="flex-none ml-auto hidden group-hover:flex items-center">
         <HstCopyIcon
           :content="() => getSourceCode(story, variant)"
         />
@@ -122,27 +122,27 @@ const useIframe = computed(() => {
 
     <!-- Body -->
     <div
-      class="ptw-border ptw-bg-white dark:ptw-bg-gray-700 ptw-rounded ptw-flex-1 ptw-p-4 ptw-relative"
+      class="border bg-white dark:bg-gray-700 rounded flex-1 p-4 relative"
       :class="{
-        'ptw-border-gray-100 dark:ptw-border-gray-800': !isActive,
-        'ptw-border-primary-200 dark:ptw-border-primary-900': isActive,
+        'border-gray-100 dark:border-gray-800': !isActive,
+        'border-primary-200 dark:border-primary-900': isActive,
       }"
       data-test-id="sandbox-render"
       @click.stop="selectVariant()"
       @keyup="selectVariant()"
     >
       <div
-        class="ptw-absolute ptw-inset-0 ptw-rounded bind-preview-bg"
+        class="absolute inset-0 rounded bind-preview-bg"
         data-test-id="responsive-preview-bg"
       />
 
       <CheckerboardPattern
         v-if="settings.checkerboard"
-        class="ptw-absolute ptw-inset-0 ptw-w-full ptw-h-full ptw-text-gray-500/20"
+        class="absolute inset-0 w-full h-full text-gray-500/20"
       />
 
       <div
-        class="ptw-relative ptw-h-full"
+        class="relative h-full"
         :style="{
           '--poveste-contrast-color': contrastColor,
           // Deprecated alias — keep so stories referencing `var(--histoire-contrast-color)` still work.

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

@@ -30,17 +30,17 @@ useScrollOnActive(isActive, el)
       v-slot="{ active }"
       :to="targetRoute"
       :is-active="isActive"
-      class="ptw-px-2 ptw-py-2 md:ptw-py-1.5 ptw-m-1 ptw-rounded-sm ptw-flex ptw-items-center ptw-gap-2"
+      class="px-2 py-2 md:py-1.5 m-1 rounded-sm flex items-center gap-2"
     >
       <Icon
         :icon="variant.icon ?? 'carbon:cube'"
-        class="ptw-w-5 ptw-h-5 sm:ptw-w-4 sm:ptw-h-4 ptw-flex-none"
+        class="w-5 h-5 sm:w-4 sm:h-4 flex-none"
         :class="{
-          'ptw-text-gray-500': !active && !variant.iconColor,
+          'text-gray-500': !active && !variant.iconColor,
           'bind-icon-color': !active && variant.iconColor,
         }"
       />
-      <span class="ptw-truncate">{{ variant.title }}</span>
+      <span class="truncate">{{ variant.title }}</span>
     </BaseListItemLink>
   </div>
 </template>

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

@@ -21,7 +21,7 @@ const variant = computed(() => storyStore.currentVariant)
 <template>
   <div
     v-if="hasSingleVariant && variant"
-    class="poveste-story-variant-single ptw-p-2 ptw-h-full __poveste-pane-shadow-from-right"
+    class="poveste-story-variant-single p-2 h-full __poveste-pane-shadow-from-right"
   >
     <StoryVariantSingleView
       :variant="variant"
@@ -31,18 +31,18 @@ const variant = computed(() => storyStore.currentVariant)
   <template v-else>
     <div
       v-if="isMobile"
-      class="ptw-divide-y ptw-divide-gray-100 dark:ptw-divide-gray-800 ptw-h-full ptw-flex ptw-flex-col"
+      class="divide-y divide-gray-100 dark:divide-gray-800 h-full flex flex-col"
     >
       <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 ptw-flex-none"
+        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 flex-none"
         @click="$emit('openVariantMenu')"
       >
         <template v-if="variant">
           <Icon
             :icon="variant.icon ?? 'carbon:cube'"
-            class="ptw-w-5 ptw-h-5 ptw-flex-none"
+            class="w-5 h-5 flex-none"
             :class="{
-              'ptw-text-gray-500': !variant.iconColor,
+              'text-gray-500': !variant.iconColor,
               'bind-icon-color': variant.iconColor,
             }"
           />
@@ -54,12 +54,12 @@ const variant = computed(() => storyStore.currentVariant)
 
         <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
         v-if="storyStore.currentVariant"
-        class="ptw-p-2 ptw-h-full"
+        class="p-2 h-full"
       >
         <StoryVariantSingleView
           :variant="storyStore.currentVariant"
@@ -75,7 +75,7 @@ const variant = computed(() => storyStore.currentVariant)
       :default-split="17"
     >
       <template #first>
-        <div class="ptw-h-full ptw-overflow-y-auto">
+        <div class="h-full overflow-y-auto">
           <StoryVariantListItem
             v-for="(v, index) of storyStore.currentStory.variants"
             :key="index"
@@ -86,7 +86,7 @@ const variant = computed(() => storyStore.currentVariant)
       <template #last>
         <div
           v-if="storyStore.currentVariant"
-          class="ptw-p-2 ptw-h-full __poveste-pane-shadow-from-right"
+          class="p-2 h-full __poveste-pane-shadow-from-right"
         >
           <StoryVariantSingleView
             :variant="storyStore.currentVariant"

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

@@ -2,6 +2,7 @@
 import type { Story, Variant } from '../../types'
 import { computed } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import { useStoryStore } from '../../stores/story'
 import { usePreviewDark } from '../../util/color-scheme'
 import { povesteConfig } from '../../util/config'
 import { getContrastColor } from '../../util/preview-settings'
@@ -13,14 +14,12 @@ const props = defineProps<{
   variant: Variant
 }>()
 
-Object.assign(props.variant, {
-  previewReady: false,
-})
+const storyStore = useStoryStore()
+
+storyStore.setPreviewReady(props.variant, false)
 
 function onReady() {
-  Object.assign(props.variant, {
-    previewReady: true,
-  })
+  storyStore.setPreviewReady(props.variant, true)
 }
 
 const settings = usePreviewSettingsStore().currentSettings
@@ -50,14 +49,14 @@ const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastC
           'color': autoApplyContrastColor ? contrastColor : undefined,
         },
       ]"
-      class="ptw-relative"
+      class="relative"
       data-test-id="sandbox-render"
     >
       <GenericRenderStory
         :key="`${story.id}-${variant.id}`"
         :variant="variant"
         :story="story"
-        class="ptw-h-full"
+        class="h-full"
         :class="{
           [povesteConfig.sandboxDarkClass]: previewDark, // @TODO remove
           [povesteConfig.theme.darkClass]: previewDark,

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

@@ -6,6 +6,7 @@ import { useEventListener } from '@vueuse/core'
 import { computed, onBeforeUnmount, ref, toRaw, watch } from 'vue'
 import { useEventsStore } from '../../stores/events'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import { useStoryStore } from '../../stores/story'
 import { EVENT_SEND, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from '../../util/const'
 import { trackWindow } from '../../util/keyboard'
 import { getSandboxUrl } from '../../util/sandbox'
@@ -33,6 +34,11 @@ function syncState() {
   }
 }
 
+// The host end of the bridge, and the same flag as `plugin-vue`'s state sync
+// with the same #95 caveat: `synced` may only be set when the write below will
+// actually provoke the watcher. `applyState` reports that now. Setting it
+// unconditionally means an apply that changes nothing leaves it set, and the
+// next real edit is skipped instead — a control that does nothing.
 let synced = false
 
 watch(() => props.variant.state, () => {
@@ -46,9 +52,9 @@ watch(() => props.variant.state, () => {
   immediate: true,
 })
 
-Object.assign(props.variant, {
-  previewReady: false,
-})
+const storyStore = useStoryStore()
+
+storyStore.setPreviewReady(props.variant, false)
 
 const reportedHeight = ref<number | null>(null)
 
@@ -76,8 +82,7 @@ useEventListener(window, 'message', (event) => {
 })
 
 function updateVariantState(state: any) {
-  synced = true
-  applyState(props.variant.state, state)
+  synced = applyState(props.variant.state, state)
 }
 
 function logEvent(event: HstEvent) {
@@ -86,9 +91,7 @@ function logEvent(event: HstEvent) {
 }
 
 function setPreviewReady() {
-  Object.assign(props.variant, {
-    previewReady: true,
-  })
+  storyStore.setPreviewReady(props.variant, true)
 }
 
 const sandboxUrl = computed(() => {
@@ -102,9 +105,7 @@ let unmounted = false
 
 watch(sandboxUrl, () => {
   isIframeLoaded.value = false
-  Object.assign(props.variant, {
-    previewReady: false,
-  })
+  storyStore.setPreviewReady(props.variant, false)
   stopTrackKeyboard?.()
   stopTrackKeyboard = undefined
 })
@@ -157,10 +158,10 @@ function onIframeLoad() {
     <iframe
       ref="iframe"
       :src="sandboxUrl"
-      class="ptw-w-full ptw-h-full ptw-relative"
+      class="w-full h-full relative"
       :class="{
-        'ptw-invisible': !isIframeLoaded,
-        'ptw-pointer-events-none': resizing,
+        'invisible': !isIframeLoaded,
+        'pointer-events-none': resizing,
       }"
       :style="isResponsiveEnabled ? {
         width: finalWidth ? `${finalWidth}px` : null,

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

@@ -11,7 +11,7 @@ defineProps<{
 
 <template>
   <div
-    class="poveste-story-variant-single-view ptw-h-full ptw-flex ptw-flex-col"
+    class="poveste-story-variant-single-view h-full flex flex-col"
     data-test-id="story-variant-single-view"
   >
     <StoryVariantSinglePreviewNative

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

@@ -77,23 +77,23 @@ function scrollDocsToTop() {
   >
     <Icon
       icon="carbon:software-resource-resource"
-      class="ptw-w-16 ptw-h-16 ptw-opacity-50"
+      class="w-16 h-16 opacity-50"
     />
   </BaseEmpty>
 
   <div
     v-else
-    class="poveste-story-view poveste-with-story ptw-h-full"
+    class="poveste-story-view poveste-with-story h-full"
   >
     <div
       v-if="storyStore.currentStory.docsOnly"
       ref="docsOnlyScroller"
-      class="ptw-h-full ptw-overflow-auto"
+      class="h-full overflow-auto"
     >
       <StoryDocs
         :story="storyStore.currentStory"
         standalone
-        class="md:ptw-p-12 ptw-w-full md:ptw-max-w-[600px] lg:ptw-max-w-[800px] xl:ptw-max-w-[900px]"
+        class="md:p-12 w-full md:max-w-[600px] lg:max-w-[800px] xl:max-w-[900px]"
         @scroll-top="scrollDocsToTop()"
       />
     </div>
@@ -111,7 +111,7 @@ function scrollDocsToTop() {
       :max="95"
       :default-split="splitDefaultSplit"
       :show-divider="false"
-      class="ptw-h-full"
+      class="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 ptw-bg-gray-50 ptw-h-full dark:ptw-bg-gray-750">
+  <div class="poveste-story-viewer bg-gray-50 h-full dark:bg-gray-750">
     <StoryVariantGrid
       v-if="storyStore.currentStory.layout.type === 'grid'"
     />

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

@@ -18,7 +18,7 @@ defineProps<{
   >
     <Icon
       icon="carbon:script-reference"
-      class="ptw-w-4 ptw-h-4"
+      class="w-4 h-4"
     />
   </TopBarChipItem>
 </template>

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

@@ -25,7 +25,7 @@ const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets.length
     v-if="showDropdown"
     placement="bottom-end"
     :skidding="6"
-    class="poveste-toolbar-background ptw-flex-none"
+    class="poveste-toolbar-background flex-none"
     data-test-id="toolbar-background"
   >
     <!-- The tooltip would sit on top of the first row of the dropdown, so drop
@@ -33,44 +33,44 @@ const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets.length
     <template #default="{ shown }">
       <div
         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"
+        class="flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors group"
       >
         <Icon
           icon="carbon:color-palette"
-          class="ptw-w-4 ptw-h-4"
+          class="w-4 h-4"
         />
         <Icon
           icon="carbon:chevron-down"
-          class="ptw-w-3 ptw-h-3 ptw-opacity-40 group-hover:ptw-opacity-70"
+          class="w-3 h-3 opacity-40 group-hover:opacity-70"
         />
       </div>
     </template>
 
     <template #popper="{ hide }">
       <div
-        class="ptw-flex ptw-flex-col ptw-items-stretch"
+        class="flex flex-col 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"
+          class="flex items-stretch gap-1 px-2 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="flex-1 px-3 py-1.5 rounded flex items-center justify-center gap-1.5 cursor-pointer 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',
+                ? 'bg-primary-500 hover:bg-primary-600 text-white dark:text-black'
+                : 'bg-transparent hover:bg-primary-100 dark:hover:bg-primary-700',
             ]"
             @click="settings.colorScheme = option.value"
           >
             <Icon
               :icon="option.icon"
-              class="ptw-w-4 ptw-h-4"
+              class="w-4 h-4"
             />
             <span>{{ option.label }}</span>
           </button>
@@ -83,19 +83,19 @@ const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets.length
         <button
           v-for="(option, index) in povesteConfig.backgroundPresets"
           :key="index"
-          class="ptw-px-4 ptw-py-3 ptw-cursor-pointer ptw-text-left ptw-flex ptw-items-baseline ptw-gap-4"
+          class="px-4 py-3 cursor-pointer text-left flex items-baseline gap-4"
           :class="[
             settings.backgroundColor === option.color
-              ? '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',
+              ? 'bg-primary-500 hover:bg-primary-600 text-white dark:text-black'
+              : 'bg-transparent hover:bg-primary-100 dark:hover:bg-primary-700',
           ]"
           @click="previewSettings.setBackgroundColor(option.color);hide()"
         >
-          <span class="ptw-mr-auto">{{ option.label }}</span>
+          <span class="mr-auto">{{ option.label }}</span>
           <template v-if="option.color !== '$checkerboard'">
-            <span class="ptw-ml-auto ptw-opacity-70">{{ option.color }}</span>
+            <span class="ml-auto opacity-70">{{ option.color }}</span>
             <div
-              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"
+              class="w-4 h-4 rounded-full border border-black/20 dark:border-white/20 flex items-center justify-center text-xs"
               :style="{
                 backgroundColor: option.color,
                 color: option.contrastColor,

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

@@ -24,7 +24,7 @@ const sandboxUrl = computed(() => {
   >
     <Icon
       icon="carbon:launch"
-      class="ptw-w-4 ptw-h-4"
+      class="w-4 h-4"
     />
   </TopBarChipItem>
 </template>