@poveste/app 0.2.1 → 0.3.1

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

@@ -3,20 +3,20 @@ import type { ClientCommand } from '@poveste/shared'
 import type { SearchResult, SearchResultType, Story, Variant } from '../../types'
 import type { SearchData } from './types'
 import { Icon } from '@iconify/vue'
-import { useDebounce, useFocus } from '@vueuse/core'
+import { refDebounced, useFocus } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { registeredCommands } from 'virtual:$poveste-commands'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { useCommandStore } from '../../stores/command.js'
 import { useStoryStore } from '../../stores/story'
 import { builtinCommands, getCommandContext } from '../../util/commands.js'
+import { onKeyboardShortcut } from '../../util/keyboard.js'
 import { useSelection } from '../../util/select.js'
 import BaseEmpty from '../base/BaseEmpty.vue'
 import { onUpdate, searchData } from './search-title-data'
 import SearchItem from './SearchItem.vue'
 
-const DocSearchData = () => import('./search-docs-data')
-
 const props = defineProps({
   shown: {
     type: Boolean,
@@ -28,6 +28,8 @@ const emit = defineEmits({
   close: () => true,
 })
 
+const DocSearchData = () => import('./search-docs-data')
+
 function close() {
   emit('close')
 }
@@ -51,7 +53,7 @@ watch(() => props.shown, (value) => {
 // Index
 
 const searchInputText = ref('')
-const rateLimitedSearch = useDebounce(searchInputText, 50)
+const rateLimitedSearch = refDebounced(searchInputText, 50)
 
 const storyStore = useStoryStore()
 
@@ -111,11 +113,13 @@ loadDocSearchIndex()
 
 // Search
 
-const titleResults = ref<SearchResult[]>([])
+const MAX_RESULTS = 50
+
+const titleResults = shallowRef<SearchResult[]>([])
 
 watch(rateLimitedSearch, async (value) => {
   const list: SearchResult[] = []
-  const result = titleSearchIndex.search(value)
+  const result = titleSearchIndex.search(value, { limit: MAX_RESULTS })
   let rank = 0
 
   for (const document of result) {
@@ -141,12 +145,12 @@ watch(rateLimitedSearch, async (value) => {
   titleResults.value = list
 })
 
-const docsResults = ref<SearchResult[]>([])
+const docsResults = shallowRef<SearchResult[]>([])
 
 async function searchOnDocField(query: string) {
   if (docSearchIndex) {
     const list: SearchResult[] = []
-    const result = docSearchIndex.search(query)
+    const result = docSearchIndex.search(query, { limit: MAX_RESULTS })
     let rank = 0
 
     for (const document of result) {
@@ -224,7 +228,7 @@ const allCommands = [
 const commandResults = computed(() => {
   if (__POVESTE_DEV__) {
     const commandCtx = getCommandContext()
-    const searchText = searchInputText.value.toLowerCase()
+    const searchText = rateLimitedSearch.value.toLowerCase()
     return allCommands
       .filter(command => !command.showIf || command.showIf(commandCtx))
       .filter(command => command.label.toLowerCase().includes(searchText) || command.searchText?.toLowerCase().includes(searchText))
@@ -250,8 +254,8 @@ function commandResultFactory(command: ClientCommand, rank: number): SearchResul
 
 // Results
 
-const results = computed(() => {
-  const list = [
+const results = computed<SearchResult[]>(() => {
+  const list: SearchResult[] = [
     ...commandResults.value,
     ...titleResults.value,
   ]
@@ -264,7 +268,7 @@ const results = computed(() => {
       list.push(r)
     }
   }
-  return list
+  return list.slice(0, MAX_RESULTS)
 })
 
 // Selection
@@ -274,23 +278,43 @@ const {
   selectNext,
   selectPrevious,
 } = useSelection(results)
+
+// Activation
+
+const router = useRouter()
+
+onKeyboardShortcut(['enter'], () => {
+  const result = results.value[selectedIndex.value]
+
+  if (!result) {
+    return
+  }
+
+  if ('route' in result) {
+    router.push(result.route)
+  }
+  if ('onActivate' in result) {
+    result.onActivate()
+  }
+  close()
+})
 </script>
 
 <template>
   <div
-    class="poveste-search-pane ptw-flex ptw-items-center ptw-gap-4 ptw-pl-6 ptw-border ptw-border-transparent focus-visible:ptw-border-primary-500"
+    class="poveste-search-pane flex items-center gap-4 pl-6 border border-transparent focus-visible:border-primary-500"
     @click="focused = true"
   >
     <Icon
       icon="carbon:search"
-      class="flex-none ptw-w-4 ptw-h-4"
+      class="flex-none w-4 h-4"
     />
 
     <input
       ref="input"
       v-model="searchInputText"
       placeholder="Search for stories, variants..."
-      class="ptw-bg-transparent ptw-w-full ptw-flex-1 ptw-pl-0 ptw-pr-6 ptw-py-4 ptw-outline-none"
+      class="bg-transparent w-full flex-1 pl-0 pr-6 py-4 outline-none"
       @keydown.down.prevent="selectNext()"
       @keydown.up.prevent="selectPrevious()"
       @keydown.escape="close()"
@@ -306,7 +330,7 @@ const {
 
   <div
     v-else-if="results.length"
-    class="ptw-max-h-[400px] ptw-overflow-y-auto ptw-rounded-b-lg"
+    class="max-h-[400px] overflow-y-auto rounded-b-lg"
   >
     <SearchItem
       v-for="(result, index) of results"

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 />