@poveste/app 0.2.1 → 0.3.1

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>

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

@@ -13,46 +13,46 @@ const settings = usePreviewSettingsStore().currentSettings
     placement="bottom-end"
     :skidding="6"
     :disabled="!povesteConfig.responsivePresets?.length"
-    class="poveste-toolbar-responsive-size ptw-flex-none"
+    class="poveste-toolbar-responsive-size flex-none"
   >
     <div
       v-tooltip="'Responsive sizes'"
-      class="ptw-flex ptw-items-center ptw-gap-1 ptw-px-2.5 ptw-py-1.5 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 text-gray-900 dark:text-gray-100 transition-colors group"
       :class="{
-        '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': povesteConfig.responsivePresets?.length,
+        'hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer': povesteConfig.responsivePresets?.length,
       }"
     >
       <Icon
         icon="carbon:devices"
-        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 #popper="{ hide }">
-      <div class="ptw-flex ptw-flex-col ptw-items-stretch">
+      <div class="flex flex-col items-stretch">
         <BaseCheckbox v-model="settings.rotate">
           Rotate
         </BaseCheckbox>
 
-        <div class="ptw-flex ptw-items-center ptw-gap-2 ptw-px-4 ptw-py-3">
+        <div class="flex items-center gap-2 px-4 py-3">
           <input
             v-model.number="settings.responsiveWidth"
             v-tooltip="'Responsive width (px)'"
             type="number"
-            class="ptw-bg-transparent ptw-border ptw-border-gray-200 dark:ptw-border-gray-850 ptw-rounded ptw-w-20 ptw-opacity-50 focus:ptw-opacity-100 ptw-flex-1 ptw-min-w-0"
+            class="bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0"
             step="16"
             placeholder="Auto"
           >
-          <span class="ptw-opacity-50">×</span>
+          <span class="opacity-50">×</span>
           <input
             v-model.number="settings.responsiveHeight"
             v-tooltip="'Responsive height (px)'"
             type="number"
-            class="ptw-bg-transparent ptw-border ptw-border-gray-200 dark:ptw-border-gray-850 ptw-rounded ptw-w-20 ptw-opacity-50 focus:ptw-opacity-100 ptw-flex-1 ptw-min-w-0"
+            class="bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0"
             step="16"
             placeholder="Auto"
           >
@@ -61,16 +61,16 @@ const settings = usePreviewSettingsStore().currentSettings
         <button
           v-for="(preset, index) in povesteConfig.responsivePresets"
           :key="index"
-          class="ptw-px-4 ptw-py-3 ptw-cursor-pointer ptw-text-left ptw-flex ptw-gap-4"
+          class="px-4 py-3 cursor-pointer text-left flex gap-4"
           :class="[
             settings.responsiveWidth === preset.width && settings.responsiveHeight === preset.height
-              ? '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.responsiveWidth = preset.width;settings.responsiveHeight = preset.height;hide()"
         >
           {{ preset.label }}
-          <span class="ptw-ml-auto ptw-opacity-70 ptw-flex ptw-gap-1">
+          <span class="ml-auto opacity-70 flex gap-1">
             <span v-if="preset.width">{{ preset.width }}<span v-if="!preset.height">px</span></span>
             <span v-if="preset.width && preset.height">x</span>
             <span v-if="preset.height">{{ preset.height }}<span v-if="!preset.width">px</span></span>

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

@@ -14,7 +14,7 @@ const settings = usePreviewSettingsStore().currentSettings
   >
     <Icon
       :icon="settings.textDirection === 'ltr' ? 'fluent:text-paragraph-direction-right-16-regular' : 'fluent:text-paragraph-direction-left-16-regular'"
-      class="ptw-w-4 ptw-h-4"
+      class="w-4 h-4"
     />
   </TopBarChipItem>
 </template>

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

@@ -20,19 +20,19 @@ const subtitle = computed(() => {
 </script>
 
 <template>
-  <div class="poveste-toolbar-title ptw-flex ptw-items-center ptw-gap-2 ptw-min-w-0">
+  <div class="poveste-toolbar-title flex items-center gap-2 min-w-0">
     <Icon
       :icon="icon"
-      class="ptw-w-4 ptw-h-4 ptw-flex-none"
+      class="w-4 h-4 flex-none"
       :class="[
-        iconColor ? 'bind-icon-color' : 'ptw-text-gray-500 dark:ptw-text-gray-400',
+        iconColor ? 'bind-icon-color' : 'text-gray-500 dark:text-gray-400',
       ]"
     />
-    <div class="ptw-flex ptw-flex-col ptw-justify-center ptw-min-w-0 ptw-leading-tight ptw-text-center ptw-h-[2.25rem]">
-      <span class="ptw-truncate ptw-text-sm ptw-font-medium ptw-text-gray-900 dark:ptw-text-gray-100">{{ title }}</span>
+    <div class="flex flex-col justify-center min-w-0 leading-tight text-center h-[2.25rem]">
+      <span class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">{{ title }}</span>
       <span
         v-if="subtitle"
-        class="ptw-truncate ptw-text-xs ptw-text-gray-500 dark:ptw-text-gray-400"
+        class="truncate text-xs text-gray-500 dark:text-gray-400"
       >{{ subtitle }}</span>
     </div>
   </div>

package/src/app/components/tree/StoryGroup.vue

@@ -27,23 +27,23 @@ function toggleOpen() {
 <template>
   <div
     data-test-id="story-group"
-    class="poveste-story-group ptw-my-2 first:ptw-mt-0 last:ptw-mb-0 ptw-group"
+    class="poveste-story-group my-2 first:mt-0 last:mb-0 group"
   >
     <template v-if="group.title">
-      <div class="ptw-h-[1px] ptw-bg-gray-500/10 ptw-mx-6 ptw-mb-2 group-first:ptw-hidden" />
+      <div class="h-[1px] bg-gray-500/10 mx-6 mb-2 group-first:hidden" />
       <div
         role="button"
         tabindex="0"
-        class="ptw-px-0.5 ptw-py-2 md:ptw-py-1.5 ptw-mx-1 ptw-rounded-sm hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-900 ptw-cursor-pointer ptw-select-none ptw-flex ptw-items-center ptw-gap-2 ptw-min-w-0 ptw-opacity-50 hover:ptw-opacity-100"
+        class="px-0.5 py-2 md:py-1.5 mx-1 rounded-sm hover:bg-primary-100 dark:hover:bg-primary-900 cursor-pointer select-none flex items-center gap-2 min-w-0 opacity-50 hover:opacity-100"
         @click="toggleOpen"
         @keyup.enter="toggleOpen"
         @keyup.space="toggleOpen"
       >
         <Icon
           :icon="isFolderOpen ? 'ri:subtract-line' : 'ri:add-line'"
-          class="ptw-w-4 ptw-h-4 ptw-ml-4 ptw-rounded-sm ptw-border ptw-border-gray-500/40"
+          class="w-4 h-4 ml-4 rounded-sm border border-gray-500/40"
         />
-        <span class="ptw-truncate">{{ group.title }}</span>
+        <span class="truncate">{{ group.title }}</span>
       </div>
     </template>
 

package/src/app/components/tree/StoryList.vue

@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="poveste-story-list ptw-overflow-y-auto">
+  <div class="poveste-story-list overflow-y-auto">
     <template
       v-for="element of tree"
       :key="element.title"

package/src/app/components/tree/StoryListFolder.vue

@@ -37,22 +37,22 @@ const folderPadding = computed(() => {
     <div
       role="button"
       tabindex="0"
-      class="poveste-story-list-folder-button ptw-px-0.5 ptw-py-2 md:ptw-py-1.5 ptw-mx-1 ptw-rounded-sm hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-900 ptw-cursor-pointer ptw-select-none ptw-flex"
+      class="poveste-story-list-folder-button px-0.5 py-2 md:py-1.5 mx-1 rounded-sm hover:bg-primary-100 dark:hover:bg-primary-900 cursor-pointer select-none flex"
       @click="toggleOpen"
       @keyup.enter="toggleOpen"
       @keyup.space="toggleOpen"
     >
-      <span class="bind-tree-padding ptw-flex ptw-items-center ptw-gap-2 ptw-min-w-0">
-        <span class="ptw-flex ptw-flex-none ptw-items-center ptw-opacity-30 [.poveste-story-list-folder-button:hover_&]:ptw-opacity-100 ptw-ml-4 ptw-w-4 ptw-h-4 ptw-rounded-sm ptw-border ptw-border-gray-500/40">
+      <span class="bind-tree-padding flex items-center gap-2 min-w-0">
+        <span class="flex flex-none items-center opacity-30 [.poveste-story-list-folder-button:hover_&]:opacity-100 ml-4 w-4 h-4 rounded-sm border border-gray-500/40">
           <Icon
             icon="carbon:caret-right"
-            class="ptw-w-full ptw-h-full ptw-transition-transform ptw-duration-150"
+            class="w-full h-full transition-transform duration-150"
             :class="{
-              'ptw-rotate-90': isFolderOpen,
+              'rotate-90': isFolderOpen,
             }"
           />
         </span>
-        <span class="ptw-truncate">{{ folder.title }}</span>
+        <span class="truncate">{{ folder.title }}</span>
       </span>
     </div>
 

package/src/app/components/tree/StoryListItem.vue

@@ -37,23 +37,23 @@ useScrollOnActive(isActive, el)
           storyId: story.id,
         },
       }"
-      class="ptw-pl-0.5 ptw-pr-2 ptw-py-2 md:ptw-py-1.5 ptw-mx-1 ptw-rounded-sm"
+      class="pl-0.5 pr-2 py-2 md:py-1.5 mx-1 rounded-sm"
     >
-      <span class="bind-tree-margin ptw-flex ptw-items-center ptw-gap-2 ptw-pl-4 ptw-min-w-0">
+      <span class="bind-tree-margin flex items-center gap-2 pl-4 min-w-0">
         <Icon
           :icon="story.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-primary-500': !active && !story.iconColor,
+            'text-primary-500': !active && !story.iconColor,
             'bind-icon-color': !active && story.iconColor,
           }"
         />
-        <span class="ptw-truncate">{{ story.title }}</span>
+        <span class="truncate">{{ story.title }}</span>
       </span>
 
       <span
         v-if="!story.docsOnly"
-        class="ptw-opacity-40 ptw-text-sm"
+        class="opacity-40 text-sm"
       >
         {{ story.variants.length }}
       </span>

package/src/app/sandbox.ts

@@ -33,14 +33,36 @@ if (storedSettings) {
 const prefersDark = usePreferredDark()
 const previewDark = computed(() => resolvePreviewDark(receivedSettings.colorScheme, prefersDark.value, isDark.value))
 
+// `sandboxDarkClass` is poveste's own deprecated config option, superseded by
+// `theme.darkClass`. Still honoured on purpose: dropping it would silently stop
+// applying the class for anyone who set it. Removing the option is a breaking
+// config change and belongs to a major, not here.
+/*
+ * The class also has to land *inside* the story's `@scope` root, not only on
+ * `<html>` (#101).
+ *
+ * User CSS is wrapped in `@scope (.__poveste-render-story)`, and `<html>` sits
+ * above that root, so `@scope` cannot match it. A rule shaped like
+ * `.dark .foo { … }` — which is what Tailwind's `darkMode: 'class'` and most
+ * hand-written dark styling produce — is therefore inert, with no error and no
+ * warning to say so.
+ *
+ * Putting it on the scope root itself is *not* enough: a descendant combinator
+ * needs the ancestor to be matchable in scope too, and the root does not
+ * qualify. `#app` is strictly inside the root, which does.
+ *
+ * It stays on `<html>` as well, for user CSS that is not scope-wrapped and for
+ * anyone keying off `html.dark`.
+ */
+const darkClassTargets = [document.documentElement, document.querySelector('#app')]
+
 watch(previewDark, (value) => {
-  if (value) {
-    document.documentElement.classList.add(povesteConfig.sandboxDarkClass) // @TODO remove
-    document.documentElement.classList.add(povesteConfig.theme.darkClass)
-  }
-  else {
-    document.documentElement.classList.remove(povesteConfig.sandboxDarkClass) // @TODO remove
-    document.documentElement.classList.remove(povesteConfig.theme.darkClass)
+  for (const el of darkClassTargets) {
+    if (!el) continue
+
+    // eslint-disable-next-line ts/no-deprecated
+    el.classList.toggle(povesteConfig.sandboxDarkClass, value)
+    el.classList.toggle(povesteConfig.theme.darkClass, value)
   }
 }, {
   immediate: true,
@@ -53,6 +75,11 @@ const app = createApp({
     const story = computed(() => file.value.story)
     const variant = computed(() => story.value?.variants.find(v => v.id === query.variantId))
 
+    // `synced` is the sandbox end of the same flag the host holds, with the same
+    // #95 caveat: only set it when the apply will actually provoke the watcher
+    // below, which is what `applyState`'s return value reports. Set it
+    // unconditionally and an apply that changes nothing leaves it stuck, so the
+    // next edit the story makes never reaches the host.
     let synced = false
     let mounted = false
 
@@ -60,8 +87,7 @@ const app = createApp({
       // console.log('[sandbox] received message', event.data)
       if (event.data?.type === STATE_SYNC) {
         if (!mounted) return
-        synced = true
-        applyState(variant.value.state, event.data.state)
+        synced = applyState(variant.value.state, event.data.state)
       }
       else if (event.data?.type === PREVIEW_SETTINGS_SYNC) {
         applyPreviewSettings(event.data.settings)
@@ -93,7 +119,7 @@ const app = createApp({
 
   render() {
     return [
-      h('div', { class: 'ptw-sandbox-hidden' }, [
+      h('div', { class: '__poveste-sandbox-hidden' }, [
         h(GenericMountStory, {
           key: file.value.story.id,
           story: file.value.story,

package/src/app/stores/story.ts

@@ -36,6 +36,22 @@ export const useStoryStore = defineStore('story', () => {
     return maps.value.variants.get(idWithStoryId)
   }
 
+  /**
+   * Whether a variant's preview has finished mounting. The preview components
+   * report it and `StorySidePanel` waits on it, so it has to be reachable from
+   * both — and it stays a field on the variant rather than a map in here
+   * because it pairs with `configReady`, which the framework plugins write from
+   * inside the sandbox. The side panel reads the two together; splitting them
+   * across two owners would make that condition harder to follow, not easier.
+   *
+   * What does belong here is the write. This store owns the variant objects,
+   * so a component reaching into one of its own props to flip the flag was the
+   * part that needed to go.
+   */
+  function setPreviewReady(variant: Variant, value: boolean) {
+    variant.previewReady = value
+  }
+
   return {
     stories,
     setStories,
@@ -43,5 +59,6 @@ export const useStoryStore = defineStore('story', () => {
     currentVariant,
     getStoryById,
     getVariantById,
+    setPreviewReady,
   }
 })

package/src/app/style/floating.pcss

@@ -5,18 +5,24 @@
 }
 
 .v-popper--theme-dropdown {
-  .ptw-dark & {
-    .v-popper__inner {
-      @apply ptw-bg-gray-700 ptw-border-gray-850 ptw-text-gray-100;
-    }
+  /*
+   * Written with the `dark:` variant rather than a `.ptw-dark &` descendant
+   * rule. The chrome CSS is wrapped in `@scope`, and `.ptw-dark` sits on
+   * `<html>` — above the scope root — so a descendant rule keyed on it never
+   * matches and the dropdown silently falls back to floating-vue's stock light
+   * theme. `dark:` compiles to `&:where(.ptw-dark, .ptw-dark *)`, which puts the
+   * condition on the subject and survives the wrapper. See #101.
+   */
+  .v-popper__inner {
+    @apply dark:bg-gray-700 dark:border-gray-850 dark:text-gray-100;
+  }
 
-    .v-popper__arrow-inner {
-      @apply ptw-border-gray-700;
-    }
+  .v-popper__arrow-inner {
+    @apply dark:border-gray-700;
+  }
 
-    .v-popper__arrow-outer {
-      @apply ptw-border-gray-850;
-    }
+  .v-popper__arrow-outer {
+    @apply dark:border-gray-850;
   }
 
   &.v-popper__popper--show-from .v-popper__wrapper {