@poveste/app 0.1.3 → 0.2.1

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

@@ -278,19 +278,19 @@ const {
 
 <template>
   <div
-    class="poveste-search-pane htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500"
+    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"
     @click="focused = true"
   >
     <Icon
       icon="carbon:search"
-      class="flex-none htw-w-4 htw-h-4"
+      class="flex-none ptw-w-4 ptw-h-4"
     />
 
     <input
       ref="input"
       v-model="searchInputText"
       placeholder="Search for stories, variants..."
-      class="htw-bg-transparent htw-w-full htw-flex-1 htw-pl-0 htw-pr-6 htw-py-4 htw-outline-none"
+      class="ptw-bg-transparent ptw-w-full ptw-flex-1 ptw-pl-0 ptw-pr-6 ptw-py-4 ptw-outline-none"
       @keydown.down.prevent="selectNext()"
       @keydown.up.prevent="selectPrevious()"
       @keydown.escape="close()"
@@ -306,7 +306,7 @@ const {
 
   <div
     v-else-if="results.length"
-    class="htw-max-h-[400px] htw-overflow-y-auto htw-rounded-b-lg"
+    class="ptw-max-h-[400px] ptw-overflow-y-auto ptw-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 htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden">
+  <div class="poveste-story-responsive-preview ptw-w-full ptw-h-full ptw-flex-1 ptw-rounded-lg ptw-relative ptw-overflow-hidden">
     <div
       v-if="isResponsiveEnabled"
-      class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded-r-lg htw-border-l-2 htw-border-gray-500/10 dark:htw-border-gray-700/30 htw-overflow-hidden"
+      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"
     >
       <HatchedPattern
-        class="htw-w-full htw-h-full htw-text-black/[1%] dark:htw-text-white/[1%]"
+        class="ptw-w-full ptw-h-full ptw-text-black/[1%] dark:ptw-text-white/[1%]"
       />
     </div>
 
     <div
       ref="previewWrapper"
-      class="htw-h-full htw-overflow-auto htw-relative"
+      class="ptw-h-full ptw-overflow-auto ptw-relative"
     >
       <div
-        class="htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700 htw-rounded-lg htw-relative"
+        class="ptw-overflow-hidden ptw-bg-white dark:ptw-bg-gray-700 ptw-rounded-lg ptw-relative"
         :class="isResponsiveEnabled ? {
-          'htw-w-fit': !!finalWidth,
-          'htw-h-fit': !!finalHeight,
-          'htw-h-full': !finalHeight,
-        } : 'htw-h-full'"
+          'ptw-w-fit': !!finalWidth,
+          'ptw-h-fit': !!finalHeight,
+          'ptw-h-full': !finalHeight,
+        } : 'ptw-h-full'"
       >
         <div
-          class="bind-preview-bg htw-rounded-lg htw-h-full"
+          class="bind-preview-bg ptw-rounded-lg ptw-h-full"
           data-test-id="responsive-preview-bg"
         >
           <CheckerboardPattern
             v-if="settings.checkerboard"
-            class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20"
+            class="ptw-absolute ptw-inset-0 ptw-w-full ptw-h-full ptw-text-gray-500/20"
           />
-          <div class="htw-p-8 htw-h-full htw-relative">
-            <div class="htw-w-full htw-h-full htw-relative">
-              <div class="htw-absolute htw-inset-0" />
+          <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" />
 
               <slot
                 :is-responsive-enabled="isResponsiveEnabled"
@@ -165,14 +165,14 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
             </div>
 
             <!-- Markers -->
-            <div class="htw-absolute htw-top-5 htw-left-8 htw-h-2 htw-w-px htw-bg-gray-400/25" />
-            <div class="htw-absolute htw-top-5 htw-right-8 htw-h-2 htw-w-px htw-bg-gray-400/25" />
-            <div class="htw-absolute htw-bottom-5 htw-left-8 htw-h-2 htw-w-px htw-bg-gray-400/25" />
-            <div class="htw-absolute htw-bottom-5 htw-right-8 htw-h-2 htw-w-px htw-bg-gray-400/25" />
-            <div class="htw-absolute htw-left-5 htw-top-8 htw-w-2 htw-h-px htw-bg-gray-400/25" />
-            <div class="htw-absolute htw-left-5 htw-bottom-8 htw-w-2 htw-h-px htw-bg-gray-400/25" />
-            <div class="htw-absolute htw-right-5 htw-top-8 htw-w-2 htw-h-px htw-bg-gray-400/25" />
-            <div class="htw-absolute htw-right-5 htw-bottom-8 htw-w-2 htw-h-px htw-bg-gray-400/25" />
+            <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>
 
           <!-- Resize Dragger -->
@@ -180,27 +180,27 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
             <div
               ref="horizontalDragger"
               v-tooltip.right="sizeTooltip"
-              class="htw-absolute htw-w-4 htw-top-0 htw-bottom-4 htw-right-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ew-resize htw-group hover:htw-text-primary-500"
+              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"
             >
               <Icon
                 icon="mdi:drag-vertical-variant"
-                class="htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
+                class="ptw-w-4 ptw-h-4 ptw-opacity-20 group-hover:ptw-opacity-90"
               />
             </div>
             <div
               ref="verticalDragger"
               v-tooltip.bottom="sizeTooltip"
-              class="htw-absolute htw-h-4 htw-left-0 htw-right-4 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ns-resize htw-group hover:htw-text-primary-500"
+              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"
             >
               <Icon
                 icon="mdi:drag-horizontal-variant"
-                class="htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
+                class="ptw-w-4 ptw-h-4 ptw-opacity-20 group-hover:ptw-opacity-90"
               />
             </div>
             <div
               ref="cornerDragger"
               v-tooltip.bottom="sizeTooltip"
-              class="htw-absolute htw-w-4 htw-h-4 htw-right-0 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-nwse-resize htw-group hover:htw-text-primary-500"
+              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"
             />
           </template>
         </div>

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

@@ -2,10 +2,6 @@
 import { useResizeObserver } from '@vueuse/core'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useStoryStore } from '../../stores/story'
-import { isMobile } from '../../util/responsive'
-import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
-import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
-import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
 import StoryVariantGridItem from './StoryVariantGridItem.vue'
 
 const storyStore = useStoryStore()
@@ -119,37 +115,22 @@ const columnCount = computed(() => Math.min(storyStore.currentStory.variants.len
 </script>
 
 <template>
-  <div class="poveste-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __poveste-pane-shadow-from-right">
-    <!-- Toolbar -->
-    <div
-      v-if="!isMobile"
-      class="htw-flex-none htw-flex htw-items-center htw-justify-end htw-h-8 htw-mx-2 htw-mt-1"
-    >
-      <ToolbarBackground />
-      <ToolbarTextDirection />
-
-      <DevOnlyToolbarOpenInEditor
-        v-if="__POVESTE_DEV__"
-        :file="storyStore.currentStory.file?.filePath"
-        tooltip="Edit story in editor"
-      />
-    </div>
-
+  <div class="poveste-story-variant-grid ptw-flex ptw-flex-col ptw-items-stretch ptw-h-full __poveste-pane-shadow-from-right">
     <div
       ref="el"
-      class="htw-overflow-y-auto htw-flex htw-flex-1"
+      class="ptw-overflow-y-auto ptw-flex ptw-flex-1"
       @scroll="updateMaxCount()"
     >
-      <div class="htw-flex htw-w-0 htw-flex-1 htw-mx-4">
+      <div class="ptw-flex ptw-w-0 ptw-flex-1 ptw-mx-4">
         <div
-          class="htw-m-auto"
+          class="ptw-m-auto"
           :style="{
             minHeight: `${(storyStore.currentStory.variants.length / countPerRow) * (maxItemHeight + gap) - gap}px`,
           }"
         >
           <div
             ref="gridEl"
-            class="htw-grid htw-gap-4 htw-my-4"
+            class="ptw-grid ptw-gap-4 ptw-my-4"
             :style="{
               gridTemplateColumns: `repeat(${columnCount}, ${gridColumnWidth}px)`,
             }"

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

@@ -7,8 +7,8 @@ import { useResizeObserver } from '@vueuse/core'
 import { computed, ref, toRefs } from 'vue'
 import { useRouter } from 'vue-router'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import { usePreviewDark } from '../../util/color-scheme'
 import { povesteConfig } from '../../util/config'
-import { isDark } from '../../util/dark'
 import { getSourceCode } from '../../util/docs'
 import { getContrastColor } from '../../util/preview-settings'
 import { useScrollOnActive } from '../../util/scroll'
@@ -16,6 +16,7 @@ import { useCurrentVariantRoute } from '../../util/variant'
 import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
 import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
 import GenericRenderStory from './GenericRenderStory.vue'
+import StoryVariantSinglePreviewRemote from './StoryVariantSinglePreviewRemote.vue'
 
 const props = defineProps({
   variant: {
@@ -66,39 +67,49 @@ useResizeObserver(el, () => {
 
 const settings = usePreviewSettingsStore().currentSettings
 
+const previewDark = usePreviewDark(settings)
+
 const contrastColor = computed(() => getContrastColor(settings))
 const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastColor)
+
+const useIframe = computed(() => {
+  const layout = props.story.layout
+  if (layout?.type === 'grid' && layout.iframeGrid !== undefined) {
+    return layout.iframeGrid
+  }
+  return povesteConfig.isolateStyles !== false
+})
 </script>
 
 <template>
   <div
     ref="el"
-    class="poveste-story-variant-grid-item htw-cursor-default htw-flex htw-flex-col htw-gap-y-1 htw-group"
+    class="poveste-story-variant-grid-item ptw-cursor-default ptw-flex ptw-flex-col ptw-gap-y-1 ptw-group"
   >
     <!-- Header -->
-    <div class="htw-flex-none htw-flex htw-items-center">
+    <div class="ptw-flex-none ptw-flex ptw-items-center">
       <RouterLink
         v-tooltip="variant.title"
         :to="targetRoute"
-        class="htw-rounded htw-w-max htw-px-2 htw-py-0.5 htw-min-w-16 htw-cursor-pointer htw-flex htw-items-center htw-gap-1 htw-flex-shrink"
+        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="{
-          'hover:htw-bg-gray-200 htw-text-gray-500 dark:hover:htw-bg-gray-800': !isActive,
-          'htw-bg-primary-200 hover:htw-bg-primary-300 htw-text-primary-800 dark:htw-bg-primary-700 dark:hover:htw-bg-primary-800 dark:htw-text-primary-200': isActive,
+          '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,
         }"
       >
         <Icon
           :icon="variant.icon ?? 'carbon:cube'"
-          class="htw-w-4 htw-h-4 htw-opacity-50"
+          class="ptw-w-4 ptw-h-4 ptw-opacity-50"
           :class="{
-            'htw-text-gray-500': !isActive && !variant.iconColor,
+            'ptw-text-gray-500': !isActive && !variant.iconColor,
             'bind-icon-color': !isActive && variant.iconColor,
           }"
         />
-        <span class="htw-truncate htw-flex-1">{{ variant.title }}</span>
+        <span class="ptw-truncate ptw-flex-1">{{ variant.title }}</span>
       </RouterLink>
 
       <!-- Toolbar -->
-      <div class="htw-flex-none htw-ml-auto htw-hidden group-hover:htw-flex htw-items-center">
+      <div class="ptw-flex-none ptw-ml-auto ptw-hidden group-hover:ptw-flex ptw-items-center">
         <HstCopyIcon
           :content="() => getSourceCode(story, variant)"
         />
@@ -111,27 +122,27 @@ const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastC
 
     <!-- Body -->
     <div
-      class="htw-border htw-bg-white dark:htw-bg-gray-700 htw-rounded htw-flex-1 htw-p-4 htw-relative"
+      class="ptw-border ptw-bg-white dark:ptw-bg-gray-700 ptw-rounded ptw-flex-1 ptw-p-4 ptw-relative"
       :class="{
-        'htw-border-gray-100 dark:htw-border-gray-800': !isActive,
-        'htw-border-primary-200 dark:htw-border-primary-900': isActive,
+        'ptw-border-gray-100 dark:ptw-border-gray-800': !isActive,
+        'ptw-border-primary-200 dark:ptw-border-primary-900': isActive,
       }"
       data-test-id="sandbox-render"
       @click.stop="selectVariant()"
       @keyup="selectVariant()"
     >
       <div
-        class="htw-absolute htw-inset-0 htw-rounded bind-preview-bg"
+        class="ptw-absolute ptw-inset-0 ptw-rounded bind-preview-bg"
         data-test-id="responsive-preview-bg"
       />
 
       <CheckerboardPattern
         v-if="settings.checkerboard"
-        class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20"
+        class="ptw-absolute ptw-inset-0 ptw-w-full ptw-h-full ptw-text-gray-500/20"
       />
 
       <div
-        class="htw-relative htw-h-full"
+        class="ptw-relative ptw-h-full"
         :style="{
           '--poveste-contrast-color': contrastColor,
           // Deprecated alias — keep so stories referencing `var(--histoire-contrast-color)` still work.
@@ -139,13 +150,21 @@ const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastC
           'color': autoApplyContrastColor ? contrastColor : undefined,
         }"
       >
+        <StoryVariantSinglePreviewRemote
+          v-if="useIframe"
+          :key="`iframe-${story.id}-${variant.id}`"
+          :story="story"
+          :variant="variant"
+          auto-height
+        />
         <GenericRenderStory
+          v-else
           :key="`${story.id}-${variant.id}`"
           :variant="variant"
           :story="story"
           :dir="settings.textDirection"
           :class="{
-            [povesteConfig.theme.darkClass]: isDark,
+            [povesteConfig.theme.darkClass]: previewDark,
           }"
           @ready="onReady"
         />

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

@@ -30,17 +30,17 @@ useScrollOnActive(isActive, el)
       v-slot="{ active }"
       :to="targetRoute"
       :is-active="isActive"
-      class="htw-px-2 htw-py-2 md:htw-py-1.5 htw-m-1 htw-rounded-sm htw-flex htw-items-center htw-gap-2"
+      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"
     >
       <Icon
         :icon="variant.icon ?? 'carbon:cube'"
-        class="htw-w-5 htw-h-5 sm:htw-w-4 sm:htw-h-4 htw-flex-none"
+        class="ptw-w-5 ptw-h-5 sm:ptw-w-4 sm:ptw-h-4 ptw-flex-none"
         :class="{
-          'htw-text-gray-500': !active && !variant.iconColor,
+          'ptw-text-gray-500': !active && !variant.iconColor,
           'bind-icon-color': !active && variant.iconColor,
         }"
       />
-      <span class="htw-truncate">{{ variant.title }}</span>
+      <span class="ptw-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 htw-p-2 htw-h-full __poveste-pane-shadow-from-right"
+    class="poveste-story-variant-single ptw-p-2 ptw-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="htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-800 htw-h-full htw-flex htw-flex-col"
+      class="ptw-divide-y ptw-divide-gray-100 dark:ptw-divide-gray-800 ptw-h-full ptw-flex ptw-flex-col"
     >
       <a
-        class="htw-px-6 htw-h-12 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-flex htw-gap-2 htw-flex-wrap htw-w-full htw-items-center htw-flex-none"
+        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"
         @click="$emit('openVariantMenu')"
       >
         <template v-if="variant">
           <Icon
             :icon="variant.icon ?? 'carbon:cube'"
-            class="htw-w-5 htw-h-5 htw-flex-none"
+            class="ptw-w-5 ptw-h-5 ptw-flex-none"
             :class="{
-              'htw-text-gray-500': !variant.iconColor,
+              'ptw-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="htw-w-5 htw-h-5 htw-shrink-0 htw-ml-auto"
+          class="ptw-w-5 ptw-h-5 ptw-shrink-0 ptw-ml-auto"
         />
       </a>
       <div
         v-if="storyStore.currentVariant"
-        class="htw-p-2 htw-h-full"
+        class="ptw-p-2 ptw-h-full"
       >
         <StoryVariantSingleView
           :variant="storyStore.currentVariant"
@@ -75,7 +75,7 @@ const variant = computed(() => storyStore.currentVariant)
       :default-split="17"
     >
       <template #first>
-        <div class="htw-h-full htw-overflow-y-auto">
+        <div class="ptw-h-full ptw-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="htw-p-2 htw-h-full __poveste-pane-shadow-from-right"
+          class="ptw-p-2 ptw-h-full __poveste-pane-shadow-from-right"
         >
           <StoryVariantSingleView
             :variant="storyStore.currentVariant"

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

@@ -2,8 +2,8 @@
 import type { Story, Variant } from '../../types'
 import { computed } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import { usePreviewDark } from '../../util/color-scheme'
 import { povesteConfig } from '../../util/config'
-import { isDark } from '../../util/dark'
 import { getContrastColor } from '../../util/preview-settings'
 import GenericRenderStory from './GenericRenderStory.vue'
 import StoryResponsivePreview from './StoryResponsivePreview.vue'
@@ -25,6 +25,8 @@ function onReady() {
 
 const settings = usePreviewSettingsStore().currentSettings
 
+const previewDark = usePreviewDark(settings)
+
 const contrastColor = computed(() => getContrastColor(settings))
 const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastColor)
 </script>
@@ -48,17 +50,17 @@ const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastC
           'color': autoApplyContrastColor ? contrastColor : undefined,
         },
       ]"
-      class="htw-relative"
+      class="ptw-relative"
       data-test-id="sandbox-render"
     >
       <GenericRenderStory
         :key="`${story.id}-${variant.id}`"
         :variant="variant"
         :story="story"
-        class="htw-h-full"
+        class="ptw-h-full"
         :class="{
-          [povesteConfig.sandboxDarkClass]: isDark, // @TODO remove
-          [povesteConfig.theme.darkClass]: isDark,
+          [povesteConfig.sandboxDarkClass]: previewDark, // @TODO remove
+          [povesteConfig.theme.darkClass]: previewDark,
         }"
         :dir="settings.textDirection"
         @ready="onReady"

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

@@ -3,10 +3,11 @@ import type { HstEvent } from '../../stores/events'
 import type { Story, Variant } from '../../types'
 import { applyState } from '@poveste/shared'
 import { useEventListener } from '@vueuse/core'
-import { computed, ref, toRaw, watch } from 'vue'
+import { computed, onBeforeUnmount, ref, toRaw, watch } from 'vue'
 import { useEventsStore } from '../../stores/events'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
-import { EVENT_SEND, PREVIEW_SETTINGS_SYNC, SANDBOX_READY, STATE_SYNC } from '../../util/const'
+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'
 import { toRawDeep } from '../../util/state'
 import StoryResponsivePreview from './StoryResponsivePreview.vue'
@@ -14,6 +15,7 @@ import StoryResponsivePreview from './StoryResponsivePreview.vue'
 const props = defineProps<{
   story: Story
   variant: Variant
+  autoHeight?: boolean
 }>()
 
 const settings = usePreviewSettingsStore().currentSettings
@@ -48,8 +50,13 @@ Object.assign(props.variant, {
   previewReady: false,
 })
 
+const reportedHeight = ref<number | null>(null)
+
 useEventListener(window, 'message', (event) => {
-  switch (event.data.type) {
+  // With many grid iframes mounted, every sandbox postMessage hits every
+  // parent listener. Skip events that didn't originate from this iframe.
+  if (event.source !== iframe.value?.contentWindow) return
+  switch (event.data?.type) {
     case STATE_SYNC:
       updateVariantState(event.data.state)
       break
@@ -59,6 +66,12 @@ useEventListener(window, 'message', (event) => {
     case SANDBOX_READY:
       setPreviewReady()
       break
+    case SANDBOX_HEIGHT:
+      if (typeof event.data.h === 'number') {
+        const next = Math.max(40, event.data.h)
+        if (next !== reportedHeight.value) reportedHeight.value = next
+      }
+      break
   }
 })
 
@@ -84,11 +97,21 @@ const sandboxUrl = computed(() => {
 
 const isIframeLoaded = ref(false)
 
+let stopTrackKeyboard: (() => void) | undefined
+let unmounted = false
+
 watch(sandboxUrl, () => {
   isIframeLoaded.value = false
   Object.assign(props.variant, {
     previewReady: false,
   })
+  stopTrackKeyboard?.()
+  stopTrackKeyboard = undefined
+})
+
+onBeforeUnmount(() => {
+  unmounted = true
+  stopTrackKeyboard?.()
 })
 
 // Settings
@@ -112,9 +135,16 @@ watch(() => settings, () => {
 // Iframe load
 
 function onIframeLoad() {
+  if (unmounted) {
+    return
+  }
   isIframeLoaded.value = true
   syncState()
   syncSettings()
+  stopTrackKeyboard?.()
+  if (iframe.value?.contentWindow) {
+    stopTrackKeyboard = trackWindow(iframe.value.contentWindow)
+  }
 }
 </script>
 
@@ -127,15 +157,15 @@ function onIframeLoad() {
     <iframe
       ref="iframe"
       :src="sandboxUrl"
-      class="htw-w-full htw-h-full htw-relative"
+      class="ptw-w-full ptw-h-full ptw-relative"
       :class="{
-        'htw-invisible': !isIframeLoaded,
-        'htw-pointer-events-none': resizing,
+        'ptw-invisible': !isIframeLoaded,
+        'ptw-pointer-events-none': resizing,
       }"
       :style="isResponsiveEnabled ? {
         width: finalWidth ? `${finalWidth}px` : null,
         height: finalHeight ? `${finalHeight}px` : null,
-      } : undefined"
+      } : (props.autoHeight && reportedHeight ? { height: `${reportedHeight}px` } : undefined)"
       data-test-id="preview-iframe"
       @load="onIframeLoad()"
     />

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

@@ -1,12 +1,5 @@
 <script lang="ts" setup>
 import type { Story, Variant } from '../../types'
-import { isMobile } from '../../util/responsive'
-import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
-import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
-import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
-import ToolbarResponsiveSize from '../toolbar/ToolbarResponsiveSize.vue'
-import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
-import ToolbarTitle from '../toolbar/ToolbarTitle.vue'
 import StoryVariantSinglePreviewNative from './StoryVariantSinglePreviewNative.vue'
 import StoryVariantSinglePreviewRemote from './StoryVariantSinglePreviewRemote.vue'
 
@@ -18,35 +11,9 @@ defineProps<{
 
 <template>
   <div
-    class="poveste-story-variant-single-view htw-h-full htw-flex htw-flex-col"
+    class="poveste-story-variant-single-view ptw-h-full ptw-flex ptw-flex-col"
     data-test-id="story-variant-single-view"
   >
-    <!-- Toolbar -->
-    <div
-      v-if="!isMobile"
-      class="htw-flex-none htw-flex htw-items-center htw-h-8 -htw-mt-1"
-    >
-      <ToolbarTitle
-        :variant="variant"
-      />
-      <ToolbarResponsiveSize
-        v-if="!variant.responsiveDisabled"
-      />
-      <ToolbarBackground />
-      <ToolbarTextDirection />
-      <ToolbarNewTab
-        :variant="variant"
-        :story="story"
-      />
-
-      <DevOnlyToolbarOpenInEditor
-        v-if="__POVESTE_DEV__"
-        :file="story.file?.filePath"
-        tooltip="Edit story in editor"
-      />
-    </div>
-
-    <!-- Preview -->
     <StoryVariantSinglePreviewNative
       v-if="story.layout?.iframe === false"
       :story="story"