@poveste/app 0.2.1 → 0.3.0

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

@@ -28,9 +28,9 @@ export default defineComponent({
     <a
       v-bind="$attrs"
       :href="href"
-      class="ptw-px-4 ptw-h-10 ptw-min-w-[150px] ptw-inline-flex ptw-items-center hover:ptw-bg-primary-50 dark:hover:ptw-bg-primary-900 ptw-relative ptw-text-gray-900 dark:ptw-text-gray-100"
+      class="px-4 h-10 min-w-[150px] inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative text-gray-900 dark:text-gray-100"
       :class="{
-        'ptw-text-primary-500 dark:ptw-text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
+        'text-primary-500 dark:text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
       }"
       @click="navigate"
     >
@@ -39,7 +39,7 @@ export default defineComponent({
       <transition name="__poveste-scale-y">
         <div
           v-if="matched != null ? matched : (exact && isExactActive) || (!exact && isActive)"
-          class="ptw-absolute ptw-top-0 ptw-left-0 ptw-h-full ptw-w-[2px] ptw-bg-primary-500 dark:ptw-bg-primary-400"
+          class="absolute top-0 left-0 h-full w-[2px] bg-primary-500 dark:bg-primary-400"
         />
       </transition>
     </a>

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

@@ -37,27 +37,27 @@ function selectValue(value: string, hide: () => void) {
     auto-boundary-max-size
   >
     <div
-      class="ptw-cursor-pointer ptw-w-full ptw-outline-none ptw-px-2 ptw-h-[27px] -ptw-my-1 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 hover:ptw-border-primary-500 dark:hover:ptw-border-primary-500 ptw-rounded-sm ptw-flex ptw-gap-2 ptw-items-center ptw-leading-normal"
+      class="cursor-pointer w-full outline-none px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal"
     >
-      <div class="ptw-flex-1 ptw-truncate">
+      <div class="flex-1 truncate">
         <slot :label="selectedLabel">
           {{ selectedLabel }}
         </slot>
       </div>
       <Icon
         icon="carbon:chevron-sort"
-        class="ptw-w-4 ptw-h-4 ptw-flex-none ptw-ml-auto"
+        class="w-4 h-4 flex-none ml-auto"
       />
     </div>
     <template #popper="{ hide }">
-      <div class="ptw-flex ptw-flex-col ptw-bg-gray-50 dark:ptw-bg-gray-700">
+      <div class="flex flex-col bg-gray-50 dark:bg-gray-700">
         <div
           v-for="(label, value) in formattedOptions"
           v-bind="{ ...$attrs, class: null, style: null }"
           :key="label"
-          class="ptw-px-2 ptw-py-1 ptw-cursor-pointer hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-700"
+          class="px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700"
           :class="{
-            'ptw-bg-primary-200 dark:ptw-bg-primary-800': props.modelValue === value,
+            'bg-primary-200 dark:bg-primary-800': props.modelValue === value,
           }"
           @click="selectValue(value, hide)"
         >

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

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { computed, onUnmounted, ref, watch } from 'vue'
 
-const SAVE_PREFIX = '__poveste'
-
 const props = defineProps({
   orientation: {
     type: String,
@@ -56,6 +54,8 @@ const emit = defineEmits({
   'update:split': (_value: number) => true,
 })
 
+const SAVE_PREFIX = '__poveste'
+
 const currentSplit = ref(props.defaultSplit)
 
 watch(() => props.split, (value) => {
@@ -170,42 +170,42 @@ onUnmounted(() => {
 <template>
   <div
     ref="el"
-    class="poveste-base-split-pane ptw-flex ptw-h-full ptw-isolate ptw-overflow-auto"
+    class="poveste-base-split-pane flex h-full isolate overflow-auto"
     :class="{
-      'ptw-flex-col': orientation === 'portrait',
-      'ptw-cursor-ew-resize': dragging && orientation === 'landscape',
-      'ptw-cursor-ns-resize': dragging && orientation === 'portrait',
+      'flex-col': orientation === 'portrait',
+      'cursor-ew-resize': dragging && orientation === 'landscape',
+      'cursor-ns-resize': dragging && orientation === 'portrait',
       [orientation]: true,
     }"
   >
     <div
-      class="ptw-relative ptw-top-0 ptw-left-0 ptw-z-20"
+      class="relative top-0 left-0 z-20"
       :class="{
-        'ptw-pointer-events-none': dragging,
-        'ptw-border-r ptw-border-gray-300/30 dark:ptw-border-gray-800': orientation === 'landscape' && showDivider,
-        'ptw-flex-none': fixed,
+        'pointer-events-none': dragging,
+        'border-r border-gray-300/30 dark:border-gray-800': orientation === 'landscape' && showDivider,
+        'flex-none': fixed,
       }"
       :style="leftStyle"
     >
       <slot name="first" />
 
       <div
-        class="dragger ptw-absolute ptw-z-100 hover:ptw-bg-primary-500/50 ptw-transition-colors ptw-duration-150 ptw-delay-150"
+        class="dragger absolute z-100 hover:bg-primary-500/50 transition-colors duration-150 delay-150"
         :class="{
-          'ptw-top-0 ptw-bottom-0 ptw-cursor-ew-resize': orientation === 'landscape',
-          'ptw-left-0 ptw-right-0 ptw-cursor-ns-resize': orientation === 'portrait',
+          'top-0 bottom-0 cursor-ew-resize': orientation === 'landscape',
+          'left-0 right-0 cursor-ns-resize': orientation === 'portrait',
           [`dragger-offset-${draggerOffset}`]: true,
-          'ptw-bg-primary-500/25': dragging,
+          'bg-primary-500/25': dragging,
         }"
         @mousedown.prevent="dragStart"
       />
     </div>
     <div
-      class="ptw-relative ptw-bottom-0 ptw-right-0"
+      class="relative bottom-0 right-0"
       :class="{
-        'ptw-pointer-events-none': dragging,
-        'ptw-border-t ptw-border-gray-300/30 dark:ptw-border-gray-800': orientation === 'portrait' && showDivider,
-        'ptw-flex-1': fixed,
+        'pointer-events-none': dragging,
+        'border-t border-gray-300/30 dark:border-gray-800': orientation === 'portrait' && showDivider,
+        'flex-1': fixed,
       }"
       :style="rightStyle"
     >

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

@@ -28,9 +28,9 @@ export default defineComponent({
     <a
       v-bind="$attrs"
       :href="href"
-      class="ptw-px-4 ptw-h-full ptw-inline-flex ptw-items-center hover:ptw-bg-primary-50 dark:hover:ptw-bg-primary-900 ptw-relative ptw-text-gray-900 dark:ptw-text-gray-100"
+      class="px-4 h-full inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative text-gray-900 dark:text-gray-100"
       :class="{
-        'ptw-text-primary-500 dark:ptw-text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
+        'text-primary-500 dark:text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
       }"
       @click="navigate"
     >
@@ -39,7 +39,7 @@ export default defineComponent({
       <transition name="__poveste-scale-x">
         <div
           v-if="matched != null ? matched : (exact && isExactActive) || (!exact && isActive)"
-          class="ptw-absolute ptw-bottom-0 ptw-left-0 ptw-w-full ptw-h-[2px] ptw-bg-primary-500 dark:ptw-bg-primary-400"
+          class="absolute bottom-0 left-0 w-full h-[2px] bg-primary-500 dark:bg-primary-400"
         />
       </transition>
     </a>

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

@@ -1,5 +1,5 @@
 <template>
-  <span class="poveste-base-tag ptw-text-center ptw-text-xs ptw-mx-1 ptw-px-0.5 ptw-h-4 ptw-uppercase ptw-min-w-4 ptw-rounded-full ptw-bg-primary-500 ptw-text-white dark:ptw-text-black">
+  <span class="poveste-base-tag text-center text-xs mx-1 px-0.5 h-4 uppercase min-w-4 rounded-full bg-primary-500 text-white dark:text-black">
     <slot />
   </span>
 </template>

package/src/app/components/command/CommandPrompts.vue

@@ -59,11 +59,11 @@ onMounted(() => {
 
 <template>
   <form
-    class="poveste-command-prompts ptw-flex ptw-flex-col"
+    class="poveste-command-prompts flex flex-col"
     @submit.prevent="submit()"
     @keyup.escape="$emit('close')"
   >
-    <div class="ptw-p-4 ptw-opacity-70">
+    <div class="p-4 opacity-70">
       {{ command.label }}
     </div>
 
@@ -76,14 +76,14 @@ onMounted(() => {
       :prompt="prompt"
       :answers="answers"
       :index="index"
-      class="hover:ptw-bg-gray-500/10 focus-within:ptw-bg-gray-500/5"
+      class="hover:bg-gray-500/10 focus-within:bg-gray-500/5"
       @next="focusPrompt(index + 1)"
     />
 
-    <div class="ptw-flex ptw-justify-end ptw-gap-2 ptw-p-2">
+    <div class="flex justify-end gap-2 p-2">
       <BaseButton
         type="submit"
-        class="ptw-px-4 ptw-py-2 ptw-flex ptw-items-start ptw-gap-2"
+        class="px-4 py-2 flex items-start gap-2"
       >
         <BaseKeyboardShortcut
           shortcut="Enter"

package/src/app/components/command/CommandPromptsModal.vue

@@ -2,8 +2,6 @@
 import { defineAsyncComponent } from 'vue'
 import { useCommandStore } from '../../stores/command.js'
 
-const CommandPrompts = defineAsyncComponent(() => import('./CommandPrompts.vue'))
-
 defineProps({
   shown: {
     type: Boolean,
@@ -15,6 +13,8 @@ const emit = defineEmits({
   close: () => true,
 })
 
+const CommandPrompts = defineAsyncComponent(() => import('./CommandPrompts.vue'))
+
 function close() {
   emit('close')
 }
@@ -25,13 +25,13 @@ const commandStore = useCommandStore()
 <template>
   <div
     v-if="shown"
-    class="poveste-command-prompts-modal ptw-fixed ptw-inset-0 ptw-bg-white/80 dark:ptw-bg-gray-900/80 ptw-z-20"
+    class="poveste-command-prompts-modal fixed inset-0 bg-white/80 dark:bg-gray-900/80 z-20"
   >
     <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-max-h-[80vh] ptw-overflow-y-auto ptw-scroll-smooth 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] max-h-[80vh] overflow-y-auto scroll-smooth shadow-xl border border-gray-200 dark:border-gray-750 rounded-lg relative divide-y divide-gray-200 dark:divide-gray-850">
       <CommandPrompts
         :command="commandStore.selectedCommand"
         @close="close()"

package/src/app/components/command/PromptSelect.vue

@@ -84,36 +84,36 @@ function selectIndex(index: number) {
 </script>
 
 <template>
-  <div class="poveste-prompt-select ptw-relative ptw-group">
+  <div class="poveste-prompt-select relative group">
     <input
       v-model="model"
       :required="prompt.required"
       tabindex="-1"
-      class="ptw-absolute ptw-inset-0 ptw-opacity-0 ptw-pointer-events-none"
+      class="absolute inset-0 opacity-0 pointer-events-none"
     >
-    <label class="ptw-flex ptw-flex-col ptw-gap-2 ptw-p-2">
-      <span class="ptw-px-2 ptw-flex">
+    <label class="flex flex-col gap-2 p-2">
+      <span class="px-2 flex">
         <span>{{ prompt.label }}</span>
         <span
           v-if="prompt.required"
-          class="ptw-opacity-70"
+          class="opacity-70"
         >*</span>
 
-        <span class="ptw-opacity-40 ptw-text-sm ptw-ml-auto ptw-invisible group-focus-within:ptw-visible">
+        <span class="opacity-40 text-sm ml-auto invisible group-focus-within:visible">
           Press <BaseKeyboardShortcut shortcut="Space" /> to select
         </span>
       </span>
       <input
         ref="input"
         v-model="search"
-        class="ptw-bg-transparent ptw-w-full ptw-p-2 ptw-border ptw-border-gray-500/50 focus:ptw-border-primary-500/50 ptw-rounded ptw-outline-none"
+        class="bg-transparent w-full p-2 border border-gray-500/50 focus:border-primary-500/50 rounded outline-none"
         @keydown.down.prevent="selectNext()"
         @keydown.up.prevent="selectPrevious()"
         @keydown.space.prevent="selectIndex(selectedIndex)"
       >
     </label>
 
-    <div class="ptw-overflow-auto max-h-[300px] ptw-mb-2">
+    <div class="overflow-auto max-h-[300px] mb-2">
       <button
         v-for="(option, index) of formattedOptions"
         :key="option.value"
@@ -121,20 +121,20 @@ function selectIndex(index: number) {
         tabindex="-1"
         :class="[
           model === option.value
-            ? 'ptw-bg-primary-500/20'
+            ? 'bg-primary-500/20'
             : index === selectedIndex
-              ? 'ptw-bg-primary-500/10'
-              : 'ptw-bg-transparent',
+              ? 'bg-primary-500/10'
+              : 'bg-transparent',
         ]"
-        class="ptw-w-full ptw-text-left ptw-px-4 ptw-py-2 hover:ptw-bg-primary-500/10 ptw-flex ptw-items-center"
+        class="w-full text-left px-4 py-2 hover:bg-primary-500/10 flex items-center"
         @click="model = option.value"
       >
-        <span class="ptw-flex-1">{{ option.label }}</span>
+        <span class="flex-1">{{ option.label }}</span>
 
         <Icon
           v-if="model === option.value"
           icon="carbon:checkmark"
-          class="ptw-w-4 ptw-h-4 ptw-text-primary-500"
+          class="w-4 h-4 text-primary-500"
         />
       </button>
     </div>

package/src/app/components/command/PromptText.vue

@@ -46,18 +46,18 @@ watch(defaultValue, (value) => {
 
 <template>
   <div class="poveste-prompt-text">
-    <label class="ptw-flex ptw-flex-col ptw-gap-2 ptw-p-2">
-      <span class="ptw-px-2">
+    <label class="flex flex-col gap-2 p-2">
+      <span class="px-2">
         <span>{{ prompt.label }}</span>
         <span
           v-if="prompt.required"
-          class="ptw-opacity-70"
+          class="opacity-70"
         >*</span>
       </span>
       <input
         ref="input"
         v-model="model"
-        class="ptw-bg-transparent ptw-w-full ptw-p-2 ptw-border ptw-border-gray-500/50 focus:ptw-border-primary-500/50 ptw-rounded ptw-outline-none"
+        class="bg-transparent w-full p-2 border border-gray-500/50 focus:border-primary-500/50 rounded outline-none"
         :required="prompt.required"
       >
     </label>

package/src/app/components/layout/LayoutItem.vue

@@ -17,18 +17,18 @@ defineEmits<{
 <template>
   <BaseListItem
     :is-active="isActive"
-    class="ptw-px-6 ptw-py-4 ptw-gap-4"
+    class="px-6 py-4 gap-4"
     @navigate="$emit('click')"
   >
     <Icon
-      class="ptw-w-4 ptw-h-4 ptw-flex-none"
+      class="w-4 h-4 flex-none"
       :icon="icon"
       aria-hidden="true"
     />
-    <span class="ptw-flex-1">{{ title }}</span>
+    <span class="flex-1">{{ title }}</span>
     <Icon
       v-if="stateIcon"
-      class="ptw-w-4 ptw-h-4 ptw-flex-none ptw-opacity-70"
+      class="w-4 h-4 flex-none opacity-70"
       :icon="stateIcon"
       aria-hidden="true"
     />

package/src/app/components/layout/LayoutItemGroup.vue

@@ -9,7 +9,7 @@ defineProps<{
     <div
       role="heading"
       aria-level="3"
-      class="ptw-px-6 ptw-pt-3 ptw-pb-1 ptw-text-xs ptw-uppercase ptw-tracking-wide ptw-opacity-50"
+      class="px-6 pt-3 pb-1 text-xs uppercase tracking-wide opacity-50"
     >
       {{ title }}
     </div>

package/src/app/components/layout/LayoutModal.vue

@@ -28,28 +28,28 @@ onKeyboardShortcut(['escape'], () => {
 <template>
   <div
     v-show="shown"
-    class="poveste-layout-modal ptw-fixed ptw-inset-0 ptw-bg-white/80 dark:ptw-bg-gray-900/80 ptw-z-20"
+    class="poveste-layout-modal fixed inset-0 bg-white/80 dark:bg-gray-900/80 z-20"
     data-test-id="layout-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="ptw-flex ptw-items-center ptw-px-6 ptw-py-3 ptw-text-gray-900 dark:ptw-text-gray-100">
-        <h2 class="ptw-flex-1 ptw-text-sm ptw-font-medium ptw-m-0">
+    <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">
+      <div class="flex items-center px-6 py-3 text-gray-900 dark:text-gray-100">
+        <h2 class="flex-1 text-sm font-medium m-0">
           Customize Layout
         </h2>
         <button
           type="button"
-          class="ptw-flex ptw-items-center ptw-justify-center ptw-p-1 ptw-bg-transparent ptw-border-0 ptw-text-gray-500 dark:ptw-text-gray-400 hover:ptw-text-primary-500 dark:hover:ptw-text-primary-400 ptw-cursor-pointer"
+          class="flex items-center justify-center p-1 bg-transparent border-0 text-gray-500 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer"
           aria-label="Close layout customization"
           data-test-id="layout-modal-close"
           @click="close()"
         >
           <Icon
             icon="carbon:close"
-            class="ptw-w-5 ptw-h-5"
+            class="w-5 h-5"
             aria-hidden="true"
           />
         </button>

package/src/app/components/layout/LayoutPane.vue

@@ -7,7 +7,7 @@ const settings = useLayoutStore().settings
 </script>
 
 <template>
-  <div class="ptw-py-2">
+  <div class="py-2">
     <LayoutItemGroup title="Visibility">
       <LayoutItem
         title="Story List"

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

@@ -62,9 +62,9 @@ const canReset = computed(() => props.variant.state?._hPropState?.[props.compone
       <Icon
         v-tooltip="'Remove override'"
         icon="carbon:erase"
-        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="[
-          canReset ? 'ptw-opacity-50 hover:ptw-opacity-100' : 'ptw-opacity-25 ptw-pointer-events-none',
+          canReset ? 'opacity-50 hover:opacity-100' : 'opacity-25 pointer-events-none',
         ]"
         @click.stop="reset()"
       />

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

@@ -12,14 +12,14 @@ defineProps<{
 
 <template>
   <div class="poveste-controls-component-props">
-    <div class="ptw-font-mono ptw-p-2 ptw-flex ptw-items-center ptw-gap-1">
+    <div class="font-mono p-2 flex items-center gap-1">
       <Icon
         v-tooltip="'Auto-detected props'"
         icon="carbon:flash"
-        class="ptw-w-4 ptw-h-4 ptw-text-primary-500 ptw-flex-none"
+        class="w-4 h-4 text-primary-500 flex-none"
       />
       <div>
-        <span class="ptw-opacity-30">&lt;</span>{{ definition.name }}<span class="ptw-opacity-30">&gt;</span>
+        <span class="opacity-30">&lt;</span>{{ definition.name }}<span class="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="ptw-p-2 ptw-flex ptw-items-center ptw-gap-1">
+    <div class="p-2 flex items-center gap-1">
       <Icon
         v-tooltip="'Auto-detected state'"
         icon="carbon:data-vis-1"
-        class="ptw-w-4 ptw-h-4 ptw-text-primary-500 ptw-flex-none"
+        class="w-4 h-4 text-primary-500 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 ptw-h-10 ptw-flex-none ptw-border-b ptw-border-gray-100 dark:ptw-border-gray-750">
+  <BaseOverflowMenu class="poveste-pane-tabs h-10 flex-none border-b border-gray-100 dark: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="{
-        'ptw-opacity-50': !renderedDoc,
+        '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="{
-        'ptw-opacity-50': !hasEvents,
+        '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="{
-          'ptw-opacity-50': !hasEvents,
+          'opacity-50': !hasEvents,
         }"
       >
         Events

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>