@poveste/app 0.6.0 → 0.7.0

package/dist/bundled/app.css

@@ -124,7 +124,7 @@
 /* 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[data-v-15980005] {
+.poveste-story-variant-grid-cells[data-v-5f7bc1e1] {
   reading-flow: grid-order;
 }
 }

package/dist/bundled/components/story/StoryVariantGrid.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryVariantGrid_vue_vue_type_script_setup_true_lang_default from "./StoryVariantGrid.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                 */
 //#region src/app/components/story/StoryVariantGrid.vue
-var StoryVariantGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantGrid_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-15980005"]]);
+var StoryVariantGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantGrid_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5f7bc1e1"]]);
 //#endregion
 export { StoryVariantGrid_default as default };

package/dist/bundled/components/story/StoryVariantGrid.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useStoryStore } from "../../stores/story.js";
 import { assignSlots, trimSlots } from "../../util/grid-slots.js";
 import StoryVariantGridItem_default from "./StoryVariantGridItem.js";
-import { useResizeObserver } from "@poveste/vendors/vue-use";
+import { useDebounceFn, useResizeObserver } from "@poveste/vendors/vue-use";
 import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, unref, watch } from "@poveste/vendors/vue";
 //#region src/app/components/story/StoryVariantGrid.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-story-variant-grid flex flex-col items-stretch h-full __poveste-pane-shadow-from-right" };
@@ -9,6 +9,8 @@ var _hoisted_2 = { class: "flex w-0 flex-1 mx-4" };
 var gap = 16;
 var overscanRows = 2;
 var initialCount = 10;
+var FAST_PX_PER_MS = 8;
+var FAST_REFRESH_MS = 150;
 var TRIM_DELAY = 2e3;
 var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryVariantGrid",
@@ -35,6 +37,23 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			scrollTop.value = el.value.scrollTop;
 			viewportHeight.value = el.value.clientHeight;
 		}
+		let lastScrollTop = 0;
+		let lastScrollTime = 0;
+		let lastWindowUpdate = 0;
+		const settleWindow = useDebounceFn(updateWindow, 120);
+		function onScroll() {
+			const now = performance.now();
+			const top = el.value?.scrollTop ?? 0;
+			const dt = now - lastScrollTime;
+			const velocity = dt > 0 ? Math.abs(top - lastScrollTop) / dt : 0;
+			lastScrollTop = top;
+			lastScrollTime = now;
+			if (velocity <= FAST_PX_PER_MS || now - lastWindowUpdate >= FAST_REFRESH_MS) {
+				updateWindow();
+				lastWindowUpdate = now;
+			}
+			settleWindow();
+		}
 		function onItemResize(_w, h) {
 			if (maxItemHeight.value < h) {
 				maxItemHeight.value = h;
@@ -91,6 +110,7 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		}, { immediate: true });
 		onBeforeUnmount(() => {
 			clearTimeout(trimTimer);
+			settleWindow.cancel();
 		});
 		const totalHeight = computed(() => measured.value ? rowCount.value * rowHeight.value - gap : void 0);
 		const offsetY = computed(() => measured.value ? startIndex.value / columnCount.value * rowHeight.value : 0);
@@ -111,7 +131,7 @@ var StoryVariantGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				ref_key: "el",
 				ref: el,
 				class: "overflow-y-auto flex flex-1",
-				onScroll: _cache[0] || (_cache[0] = ($event) => updateWindow())
+				onScroll: _cache[0] || (_cache[0] = ($event) => onScroll())
 			}, [createElementVNode("div", _hoisted_2, [createElementVNode("div", {
 				class: "m-auto",
 				style: normalizeStyle({ minHeight: totalHeight.value != null ? `${totalHeight.value}px` : void 0 })

package/package.json

@@ -1,17 +1,23 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan"
   },
   "license": "MIT",
+  "homepage": "https://poveste.dev",
   "repository": {
     "url": "https://github.com/poveste-dev/poveste.git",
     "type": "git",
     "directory": "packages/poveste-app"
   },
+  "bugs": "https://github.com/poveste-dev/poveste/issues",
+  "keywords": [
+    "poveste",
+    "ui"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -27,13 +33,16 @@
     "dist",
     "src"
   ],
+  "engines": {
+    "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+  },
   "dependencies": {
     "@fontsource/noto-sans-display": "^5.3.0",
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
-    "@poveste/controls": "^0.6.0",
-    "@poveste/shared": "^0.6.0",
-    "@poveste/vendors": "^0.6.0"
+    "@poveste/controls": "^0.7.0",
+    "@poveste/vendors": "^0.7.0",
+    "@poveste/shared": "^0.7.0"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.25",

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Slot } from '../../util/grid-slots'
-import { useResizeObserver } from '@vueuse/core'
+import { useDebounceFn, useResizeObserver } from '@vueuse/core'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useStoryStore } from '../../stores/story'
 import { assignSlots, trimSlots } from '../../util/grid-slots'
@@ -55,6 +55,43 @@ function updateWindow() {
   viewportHeight.value = el.value.clientHeight
 }
 
+// A window shift retargets a row of sandbox iframes, and each retarget re-renders
+// a story — fine while reading, ruinous while flicking a 1000-cell grid, which
+// would render every row it flies past (#283). So the window follows a slow
+// scroll promptly but skips most events during a fast flick. It is not frozen
+// solid though: a bounded refresh keeps it tracking the scroller so a sustained
+// fast drag still shows cells instead of a blank band, and the final window
+// lands on settle. Resize/mount call `updateWindow` directly — not the churn path.
+//
+// The threshold sits above an ordinary mouse-wheel notch (a few px/ms) so plain
+// reading takes the prompt path; only a genuine fling defers.
+const FAST_PX_PER_MS = 8
+// Cap on how long the window may lag the scroller during a fast flick: at most
+// one retarget per this interval, versus one per row on the prompt path.
+const FAST_REFRESH_MS = 150
+let lastScrollTop = 0
+let lastScrollTime = 0
+let lastWindowUpdate = 0
+
+// Lands the final window shortly after scrolling stops, whatever the speed was —
+// this is what fills the tail of a fast scroll back in.
+const settleWindow = useDebounceFn(updateWindow, 120)
+
+function onScroll() {
+  const now = performance.now()
+  const top = el.value?.scrollTop ?? 0
+  const dt = now - lastScrollTime
+  const velocity = dt > 0 ? Math.abs(top - lastScrollTop) / dt : 0
+  lastScrollTop = top
+  lastScrollTime = now
+
+  if (velocity <= FAST_PX_PER_MS || now - lastWindowUpdate >= FAST_REFRESH_MS) {
+    updateWindow()
+    lastWindowUpdate = now
+  }
+  settleWindow()
+}
+
 // 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) {
@@ -153,6 +190,8 @@ watch(visibleVariants, (visible) => {
 
 onBeforeUnmount(() => {
   clearTimeout(trimTimer)
+  // Drop any settle still pending, so it cannot fire updateWindow after teardown.
+  settleWindow.cancel()
 })
 
 // The spacer holds the full scroll extent; the grid is translated into place
@@ -185,7 +224,7 @@ watch(() => storyStore.currentVariant, (variant) => {
     <div
       ref="el"
       class="overflow-y-auto flex flex-1"
-      @scroll="updateWindow()"
+      @scroll="onScroll()"
     >
       <div class="flex w-0 flex-1 mx-4">
         <div