@poveste/app 0.5.3 → 0.6.1

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

@@ -9,9 +9,16 @@ import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
 import HatchedPattern from '../misc/HatchedPattern.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   variant: Variant
-}>()
+  /**
+   * Whether this preview is one a reader can size. False in a grid, where the
+   * cell is sized by the column and the story it renders (#257).
+   */
+  responsive?: boolean
+}>(), {
+  responsive: true,
+})
 
 const settings = usePreviewSettingsStore().currentSettings
 
@@ -116,7 +123,7 @@ const finalHeight = computed(() => settings.rotate ? settings.responsiveWidth :
 
 // Disabled responsive
 
-const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled)
+const isResponsiveEnabled = computed(() => props.responsive && !props.variant.responsiveDisabled)
 
 const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${responsiveHeight.value ?? 'Auto'}`)
 </script>
@@ -137,22 +144,47 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
       class="h-full overflow-auto relative"
     >
       <div
-        class="overflow-hidden bg-white dark:bg-gray-700 rounded-lg relative"
-        :class="isResponsiveEnabled ? {
-          'w-fit': !!finalWidth,
-          'h-fit': !!finalHeight,
-          'h-full': !finalHeight,
-        } : 'h-full'"
+        class="rounded-lg relative"
+        :class="[
+          // The surface, the reader's background, the checkerboard and the
+          // padding below are all skipped in a grid cell, where the item around
+          // this preview already paints and pads them — rendering them again
+          // stacked a second identical box inside the first and doubled the
+          // padding (#264). Gated on `responsive`, not `isResponsiveEnabled`:
+          // a single-view story with `responsiveDisabled` still needs its own
+          // chrome, it just loses the draggers.
+          responsive ? 'bg-white dark:bg-gray-700' : '',
+          isResponsiveEnabled ? {
+            'w-fit': !!finalWidth,
+            'h-fit': !!finalHeight,
+            'h-full': !finalHeight,
+          } : 'h-full',
+          // Sized to content, so nothing can overflow it and clipping keeps the
+          // corners. Sized by its container, a taller story overflows — and
+          // clipping there put the content past the fold out of reach entirely,
+          // since the scroll parent then sees nothing to scroll (#258).
+          isResponsiveEnabled && finalHeight ? 'overflow-hidden' : 'overflow-auto',
+        ]"
       >
+        <!-- `min-h-full`, not `h-full`: when this paints the reader's preview
+             background the box above it scrolls, so a story taller than the
+             preview would otherwise be shown against the bare box below the
+             first screenful. The checkerboard is measured against this for the
+             same reason — but the draggers are not, since they belong to the
+             visible box rather than to the story's full height. -->
         <div
-          class="bind-preview-bg rounded-lg h-full"
-          data-test-id="responsive-preview-bg"
+          class="rounded-lg min-h-full relative"
+          :class="responsive ? 'bind-preview-bg' : ''"
+          :data-testid="responsive ? 'responsive-preview-bg' : undefined"
         >
           <CheckerboardPattern
-            v-if="settings.checkerboard"
+            v-if="settings.checkerboard && responsive"
             class="absolute inset-0 w-full h-full text-gray-500/20"
           />
-          <div class="p-8 h-full relative">
+          <div
+            class="h-full relative"
+            :class="responsive ? 'p-8' : ''"
+          >
             <div class="w-full h-full relative">
               <div class="absolute inset-0" />
 
@@ -164,46 +196,49 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
               />
             </div>
 
-            <!-- Markers -->
-            <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" />
+            <!-- Markers: the ruler ticks for the size the draggers set, so they
+                 go wherever the draggers do (#257). -->
+            <template v-if="isResponsiveEnabled">
+              <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" />
+            </template>
           </div>
+        </div>
 
-          <!-- Resize Dragger -->
-          <template v-if="isResponsiveEnabled">
-            <div
-              ref="horizontalDragger"
-              v-tooltip.right="sizeTooltip"
-              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="w-4 h-4 opacity-20 group-hover:opacity-90"
-              />
-            </div>
-            <div
-              ref="verticalDragger"
-              v-tooltip.bottom="sizeTooltip"
-              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="w-4 h-4 opacity-20 group-hover:opacity-90"
-              />
-            </div>
-            <div
-              ref="cornerDragger"
-              v-tooltip.bottom="sizeTooltip"
-              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"
+        <!-- Resize Dragger -->
+        <template v-if="isResponsiveEnabled">
+          <div
+            ref="horizontalDragger"
+            v-tooltip.right="sizeTooltip"
+            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="w-4 h-4 opacity-20 group-hover:opacity-90"
             />
-          </template>
-        </div>
+          </div>
+          <div
+            ref="verticalDragger"
+            v-tooltip.bottom="sizeTooltip"
+            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="w-4 h-4 opacity-20 group-hover:opacity-90"
+            />
+          </div>
+          <div
+            ref="cornerDragger"
+            v-tooltip.bottom="sizeTooltip"
+            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>
     </div>
   </div>

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

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import type { Slot } from '../../util/grid-slots'
 import { useResizeObserver } from '@vueuse/core'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useStoryStore } from '../../stores/story'
+import { assignSlots, trimSlots } from '../../util/grid-slots'
 import StoryVariantGridItem from './StoryVariantGridItem.vue'
 
 const storyStore = useStoryStore()
@@ -24,65 +26,44 @@ const gridTemplateWidth = computed(() => {
   return layoutWidth
 })
 
-const margin = 16
 const gap = 16
 
-const itemWidth = ref(16)
+// Rows kept mounted on each side of the viewport, so a scroll does not expose a
+// blank band before the next update lands.
+const overscanRows = 2
+
+// What to render before any item has reported a height. One row would be enough
+// to measure with, but the row width is not known yet either.
+const initialCount = 10
+
 const maxItemHeight = ref(0)
-const maxCount = ref(10)
-const countPerRow = ref(0)
-const visibleRows = ref(0)
 
 const el = ref<HTMLDivElement>(null)
+const scrollTop = ref(0)
+const viewportHeight = ref(0)
+
+const variants = computed(() => storyStore.currentStory.variants)
 
 useResizeObserver(el, () => {
-  updateMaxCount()
+  updateWindow()
   updateSize()
 })
 
-function updateMaxCount() {
-  if (!maxItemHeight.value) return
-
-  const width = el.value!.clientWidth - margin * 2
-  const height = el.value!.clientHeight
-  const scrollTop = el.value!.scrollTop
-
-  // width = (countPerRow - 1) * gap + countPerRow * itemWidth.value
-
-  // W = (C - 1) * G + C * I
-  // W = C * G - G + C * I
-  // W + G = C * G + C * I
-  // W + G = C * (G + I)
-  // (W + G) / (G + I) = C
-
-  countPerRow.value = Math.floor((width + gap) / (itemWidth.value + gap))
-  visibleRows.value = Math.ceil((height + scrollTop + gap) / (maxItemHeight.value + gap))
-  const newMaxCount = countPerRow.value * visibleRows.value
-  if (maxCount.value < newMaxCount) {
-    maxCount.value = newMaxCount
-  }
-
-  if (storyStore.currentVariant) {
-    const index = storyStore.currentStory.variants.indexOf(storyStore.currentVariant)
-    if (index + 1 > maxCount.value) {
-      maxCount.value = index + 1
-    }
-  }
+function updateWindow() {
+  if (!el.value) return
+  scrollTop.value = el.value.scrollTop
+  viewportHeight.value = el.value.clientHeight
 }
 
-function onItemResize(w: number, h: number) {
-  itemWidth.value = w
+// The reported width is ignored: `columnCount` is what CSS lays out, so it is
+// the authority on how many items sit in a row.
+function onItemResize(_w: number, h: number) {
   if (maxItemHeight.value < h) {
     maxItemHeight.value = h
-    updateMaxCount()
+    updateWindow()
   }
 }
 
-watch(() => storyStore.currentVariant, () => {
-  maxItemHeight.value = 0 // Reset max height
-  updateMaxCount()
-})
-
 // Grid size
 
 const gridEl = ref<HTMLDivElement>(null)
@@ -105,13 +86,98 @@ function updateSize() {
 
 onMounted(() => {
   updateSize()
+  updateWindow()
 })
 
 useResizeObserver(gridEl, () => {
   updateSize()
 })
 
-const columnCount = computed(() => Math.min(storyStore.currentStory.variants.length, Math.floor((viewWidth.value + gap) / (gridColumnWidth.value + gap))))
+const columnCount = computed(() => Math.max(1, Math.min(variants.value.length, Math.floor((viewWidth.value + gap) / (gridColumnWidth.value + gap)))))
+
+// The window is derived from what is on screen — a start *and* an end — rather
+// than from a high-water mark of everything scrolled past. `columnCount` is what
+// CSS actually lays out, so the row maths uses it rather than a second count
+// derived from the measured item width.
+const rowHeight = computed(() => maxItemHeight.value + gap)
+const measured = computed(() => maxItemHeight.value > 0)
+const rowCount = computed(() => Math.ceil(variants.value.length / columnCount.value))
+
+const startIndex = computed(() => {
+  if (!measured.value) return 0
+  const firstRow = Math.floor(scrollTop.value / rowHeight.value) - overscanRows
+  return Math.max(0, firstRow) * columnCount.value
+})
+
+const endIndex = computed(() => {
+  if (!measured.value) return Math.min(variants.value.length, initialCount)
+  const lastRow = Math.ceil((scrollTop.value + viewportHeight.value) / rowHeight.value) + overscanRows
+  return Math.min(variants.value.length, Math.max(lastRow, 1) * columnCount.value)
+})
+
+const visibleVariants = computed(() => variants.value.slice(startIndex.value, endIndex.value))
+
+/*
+ * Cells are slots, not variants (#240). Keyed by variant, a cell that scrolls
+ * out of the window unmounts — and with it the sandbox realm it had booted —
+ * and a cell scrolling in boots a new one. Keyed by slot, the same component and
+ * the same iframe stay mounted and are handed the next variant to show, which
+ * the preview turns into a retarget rather than a new document. DOM order is
+ * slot order, so each cell carries its visual position as `order` for the grid
+ * to lay it out where the variant belongs; see `grid-slots` for the rules.
+ */
+const slots = ref<Slot[]>([])
+
+// Idle slots are let go once the window has stopped moving. Not before it is
+// measured: a story switch resets the measurement, which collapses the window
+// to its initial ten until the first cell reports, and trimming on that would
+// throw away the realms the re-grown window is about to ask for.
+const TRIM_DELAY = 2_000
+let trimTimer: ReturnType<typeof setTimeout> | undefined
+
+function scheduleTrim() {
+  clearTimeout(trimTimer)
+  trimTimer = setTimeout(() => {
+    if (!measured.value) {
+      scheduleTrim()
+      return
+    }
+    slots.value = trimSlots(slots.value)
+  }, TRIM_DELAY)
+}
+
+watch(visibleVariants, (visible) => {
+  slots.value = assignSlots(slots.value, storyStore.currentStory.id, visible)
+  scheduleTrim()
+}, { immediate: true })
+
+onBeforeUnmount(() => {
+  clearTimeout(trimTimer)
+})
+
+// The spacer holds the full scroll extent; the grid is translated into place
+// inside it. Before anything is measured there is nothing to reserve, and a
+// height derived from a zero row height would be `Infinitypx` — dropped by the
+// browser, which is what left the grid with no scroll extent at all.
+const totalHeight = computed(() => measured.value ? rowCount.value * rowHeight.value - gap : undefined)
+const offsetY = computed(() => measured.value ? (startIndex.value / columnCount.value) * rowHeight.value : 0)
+
+// Selecting a variant that is outside the window has to move the scroller,
+// since the item it would otherwise scroll to is not mounted.
+watch(() => storyStore.currentVariant, (variant) => {
+  maxItemHeight.value = 0 // Reset max height
+  updateWindow()
+
+  if (!variant || !el.value || !measured.value) return
+  const index = variants.value.indexOf(variant)
+  if (index === -1) return
+
+  const top = Math.floor(index / columnCount.value) * rowHeight.value
+  if (top < scrollTop.value || top + rowHeight.value > scrollTop.value + viewportHeight.value) {
+    el.value.scrollTop = top
+    updateWindow()
+  }
+})
 </script>
 
 <template>
@@ -119,27 +185,29 @@ const columnCount = computed(() => Math.min(storyStore.currentStory.variants.len
     <div
       ref="el"
       class="overflow-y-auto flex flex-1"
-      @scroll="updateMaxCount()"
+      @scroll="updateWindow()"
     >
       <div class="flex w-0 flex-1 mx-4">
         <div
           class="m-auto"
           :style="{
-            minHeight: `${(storyStore.currentStory.variants.length / countPerRow) * (maxItemHeight + gap) - gap}px`,
+            minHeight: totalHeight != null ? `${totalHeight}px` : undefined,
           }"
         >
           <div
             ref="gridEl"
-            class="grid gap-4 my-4"
+            class="poveste-story-variant-grid-cells grid gap-4 my-4"
             :style="{
               gridTemplateColumns: `repeat(${columnCount}, ${gridColumnWidth}px)`,
+              transform: offsetY ? `translateY(${offsetY}px)` : undefined,
             }"
           >
             <StoryVariantGridItem
-              v-for="(variant, index) of storyStore.currentStory.variants.slice(0, maxCount)"
+              v-for="(slot, index) of slots"
               :key="index"
-              :variant="variant"
+              :variant="slot.variant"
               :story="storyStore.currentStory"
+              :style="{ order: slot.order, display: slot.visible ? undefined : 'none' }"
               @resize="onItemResize"
             />
           </div>
@@ -148,3 +216,12 @@ const columnCount = computed(() => Math.min(storyStore.currentStory.variants.len
     </div>
   </div>
 </template>
+
+<style scoped>
+/* Cells are placed with `order`, so without this Tab and a screen reader walk
+   them in slot order — the order they were recycled in, not the screen's.
+   Chromium only for now; elsewhere the rule is ignored. */
+.poveste-story-variant-grid-cells {
+  reading-flow: grid-order;
+}
+</style>

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

@@ -4,7 +4,7 @@ import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
 import { HstCopyIcon } from '@poveste/controls'
 import { useResizeObserver } from '@vueuse/core'
-import { computed, ref, toRefs } from 'vue'
+import { computed, nextTick, ref, toRefs, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { useStoryStore } from '../../stores/story'
@@ -42,6 +42,16 @@ const storyStore = useStoryStore()
 
 storyStore.setPreviewReady(props.variant, false)
 
+// This cell is a slot (#240): it is handed other variants without being
+// recreated, so the setup-time reset above runs once. Neither the variant
+// leaving nor the one arriving is shown anywhere until something renders it
+// again, and a stale `previewReady` lets the size report below and the
+// preview's state sync run against a render that has not happened.
+watch(() => props.variant, (next, previous) => {
+  if (previous) storyStore.setPreviewReady(previous, false)
+  storyStore.setPreviewReady(next, false)
+})
+
 function onReady() {
   storyStore.setPreviewReady(props.variant, true)
 }
@@ -56,12 +66,25 @@ const el = ref<HTMLDivElement>()
 
 const { autoScroll } = useScrollOnActive(isActive, el)
 
-useResizeObserver(el, () => {
-  if (props.variant.previewReady) {
-    emit('resize', el.value!.clientWidth, el.value!.clientHeight)
-    if (isActive.value) {
-      autoScroll()
-    }
+function reportSize() {
+  if (!el.value || !props.variant.previewReady) return
+  emit('resize', el.value.clientWidth, el.value.clientHeight)
+  if (isActive.value) {
+    autoScroll()
+  }
+}
+
+useResizeObserver(el, reportSize)
+
+// The observer fires once on mount and then only on a real size change. The
+// sandbox reports ready about a second later, and the item often never changes
+// size again — so the one callback that did happen was skipped by the guard
+// above and the grid never learned any item's height. It then divided by a
+// zero row count, produced `Infinitypx` for its scroll spacer, and stayed stuck
+// at its initial ten items with the rest unreachable (#103).
+watch(() => props.variant.previewReady, (ready) => {
+  if (ready) {
+    nextTick(reportSize)
   }
 })
 
@@ -127,13 +150,13 @@ const useIframe = computed(() => {
         'border-gray-100 dark:border-gray-800': !isActive,
         'border-primary-200 dark:border-primary-900': isActive,
       }"
-      data-test-id="sandbox-render"
+      data-testid="sandbox-render"
       @click.stop="selectVariant()"
       @keyup="selectVariant()"
     >
       <div
         class="absolute inset-0 rounded bind-preview-bg"
-        data-test-id="responsive-preview-bg"
+        data-testid="responsive-preview-bg"
       />
 
       <CheckerboardPattern
@@ -150,12 +173,14 @@ const useIframe = computed(() => {
           'color': autoApplyContrastColor ? contrastColor : undefined,
         }"
       >
+        <!-- Not keyed by variant: the realm is reused and retargeted when
+             this cell is handed another variant (#240). -->
         <StoryVariantSinglePreviewRemote
           v-if="useIframe"
-          :key="`iframe-${story.id}-${variant.id}`"
           :story="story"
           :variant="variant"
           auto-height
+          :responsive="false"
         />
         <GenericRenderStory
           v-else

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

@@ -24,7 +24,7 @@ useScrollOnActive(isActive, el)
   <div
     ref="el"
     class="poveste-story-variant-list-item"
-    data-test-id="story-variant-list-item"
+    data-testid="story-variant-list-item"
   >
     <BaseListItemLink
       v-slot="{ active }"

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

@@ -50,7 +50,7 @@ const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastC
         },
       ]"
       class="relative"
-      data-test-id="sandbox-render"
+      data-testid="sandbox-render"
     >
       <GenericRenderStory
         :key="`${story.id}-${variant.id}`"