foldkit 0.78.0 → 0.79.0

package/dist/ui/virtualList/index.d.ts

@@ -68,8 +68,26 @@ export declare const update: (model: Model, message: Message) => readonly [Model
  *
  *  Should be called after the container has rendered. If the container is not
  *  yet in the DOM the Command silently no-ops (the model still transitions
- *  through `ScrollingToIndex` → `Idle` via the version-matched completion). */
+ *  through `ScrollingToIndex` → `Idle` via the version-matched completion).
+ *
+ *  Assumes uniform row heights: target scroll position is computed as
+ *  `index * model.rowHeightPx`. For variable-height rows, use
+ *  `scrollToIndexVariable`. */
 export declare const scrollToIndex: (model: Model, index: number) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
+/** Variable-height counterpart of `scrollToIndex`. Walks the heights of items
+ *  before `index` to compute the target `scrollTop`. Use this when rendering
+ *  the list with `itemToRowHeightPx`; use `scrollToIndex` for uniform heights.
+ *
+ *  Out-of-range indices clamp to the corresponding edge: negative or zero
+ *  scrolls to the top, indices past the end scroll past the last row.
+ *
+ *  Note: when restoring `initialScrollTop` on the first measurement of a
+ *  variable-height list, the runtime falls back to uniform-height math (using
+ *  `model.rowHeightPx`) because items aren't reachable from the `update`
+ *  function. Consumers who need an accurate initial scroll on a
+ *  variable-height list should call `scrollToIndexVariable` after the first
+ *  `MeasuredContainer` arrives. */
+export declare const scrollToIndexVariable: <Item>(model: Model, items: ReadonlyArray<Item>, itemToRowHeightPx: (item: Item, index: number) => number, index: number) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
 /** Slice of the data array that the view should render, plus the spacer
  *  heights that keep the scrollbar physically correct. The first row in the
  *  slice corresponds to data index `startIndex`. */
@@ -82,10 +100,25 @@ export type VisibleWindow = Readonly<{
 /** Computes the visible slice of a data array given the current scroll
  *  position, container height, row height, and an overscan buffer.
  *
+ *  Assumes uniform row heights via `model.rowHeightPx`. For variable-height
+ *  rows, use `visibleWindowVariable`.
+ *
  *  Returns `Option.none()` when the container has not yet been measured;
  *  callers should render a placeholder (or `Html.empty`) and wait for the
  *  first `MeasuredContainer` message. */
 export declare const visibleWindow: (model: Model, itemCount: number, overscan: number) => Option.Option<VisibleWindow>;
+/** Variable-height counterpart of `visibleWindow`. Walks the heights of every
+ *  item to build a prefix-sum array, then locates the visible slice with two
+ *  linear searches.
+ *
+ *  Cost is O(N) per call, walking the whole `items` array once to build the
+ *  prefix sums. For lists in the 10k-item range, this comfortably fits inside
+ *  a 60Hz scroll budget. Larger lists or hotter scroll paths can layer a
+ *  prefix-sum cache invalidated when items change; that lives behind the same
+ *  return shape so consumers don't have to know.
+ *
+ *  Returns `Option.none()` when the container has not yet been measured. */
+export declare const visibleWindowVariable: <Item>(model: Model, items: ReadonlyArray<Item>, itemToRowHeightPx: (item: Item, index: number) => number, overscan: number) => Option.Option<VisibleWindow>;
 /** Schema describing the subscription dependencies for container scroll and
  *  resize tracking. */
 export declare const SubscriptionDeps: S.Struct<{
@@ -150,6 +183,14 @@ export type ViewConfig<Message, Item> = Readonly<{
     items: ReadonlyArray<Item>;
     itemToKey: (item: Item, index: number) => string;
     itemToView: (item: Item, index: number) => Html;
+    /** Optional per-item row height in pixels. When provided, the list renders
+     *  with variable-height rows: each row's wrapper takes the height returned
+     *  by this callback, and scroll math walks the items to compute the visible
+     *  slice and spacers. When absent, all rows use `model.rowHeightPx`. Use
+     *  this for tables with wrapping cells, taller detail rows, or any list
+     *  where rows differ. Prefer the uniform `rowHeightPx` path when row
+     *  heights are stable: it avoids the per-render walk over `items`. */
+    itemToRowHeightPx?: (item: Item, index: number) => number;
     /** Number of rows rendered above and below the visible viewport. Higher
      *  values smooth out fast scroll at the cost of mounting more DOM. Default
      *  is 5; react-window uses 1 and react-virtualized uses 3. Pick a value

package/dist/ui/virtualList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/virtualList/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/virtualList/index.ts"],"names":[],"mappings":"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"}

package/dist/ui/virtualList/index.js

@@ -1,4 +1,4 @@
-import { Array, Effect, Match as M, Number, Option, Schema as S, Stream, } from 'effect';
+import { Array, Effect, Match as M, Number, Option, Schema as S, Stream, pipe, } from 'effect';
 import * as Command from '../../command/index.js';
 import { createLazy, html, } from '../../html/index.js';
 import { m } from '../../message/index.js';
@@ -110,6 +110,16 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
         }
     },
 }));
+const buildScrollToIndex = (model, index, targetScrollTop) => {
+    const nextVersion = Number.increment(model.pendingScrollVersion);
+    return [
+        evo(model, {
+            pendingScrollVersion: () => nextVersion,
+            pendingScroll: () => ScrollingToIndex({ index, version: nextVersion }),
+        }),
+        [applyScroll(model.id, targetScrollTop, nextVersion)],
+    ];
+};
 /** Programmatically scrolls the container so the row at `index` is visible.
  *  Returns the next model and a Command that mutates `element.scrollTop`. The
  *  natural scroll event then flows back through `ScrolledContainer` and the
@@ -121,22 +131,42 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
  *
  *  Should be called after the container has rendered. If the container is not
  *  yet in the DOM the Command silently no-ops (the model still transitions
- *  through `ScrollingToIndex` → `Idle` via the version-matched completion). */
-export const scrollToIndex = (model, index) => {
-    const nextVersion = Number.increment(model.pendingScrollVersion);
-    const targetScrollTop = index * model.rowHeightPx;
-    return [
-        evo(model, {
-            pendingScrollVersion: () => nextVersion,
-            pendingScroll: () => ScrollingToIndex({ index, version: nextVersion }),
-        }),
-        [applyScroll(model.id, targetScrollTop, nextVersion)],
-    ];
+ *  through `ScrollingToIndex` → `Idle` via the version-matched completion).
+ *
+ *  Assumes uniform row heights: target scroll position is computed as
+ *  `index * model.rowHeightPx`. For variable-height rows, use
+ *  `scrollToIndexVariable`. */
+export const scrollToIndex = (model, index) => buildScrollToIndex(model, index, index * model.rowHeightPx);
+/** Variable-height counterpart of `scrollToIndex`. Walks the heights of items
+ *  before `index` to compute the target `scrollTop`. Use this when rendering
+ *  the list with `itemToRowHeightPx`; use `scrollToIndex` for uniform heights.
+ *
+ *  Out-of-range indices clamp to the corresponding edge: negative or zero
+ *  scrolls to the top, indices past the end scroll past the last row.
+ *
+ *  Note: when restoring `initialScrollTop` on the first measurement of a
+ *  variable-height list, the runtime falls back to uniform-height math (using
+ *  `model.rowHeightPx`) because items aren't reachable from the `update`
+ *  function. Consumers who need an accurate initial scroll on a
+ *  variable-height list should call `scrollToIndexVariable` after the first
+ *  `MeasuredContainer` arrives. */
+export const scrollToIndexVariable = (model, items, itemToRowHeightPx, index) => {
+    const cumulativeOffsets = prefixSum(items, itemToRowHeightPx);
+    const targetScrollTop = pipe(cumulativeOffsets, Array.get(Math.max(0, index)), Option.getOrElse(() => lastOrZero(cumulativeOffsets)));
+    return buildScrollToIndex(model, index, targetScrollTop);
 };
 const clampIndex = (index, itemCount) => Math.max(0, Math.min(index, itemCount));
+const prefixSum = (items, itemToRowHeightPx) => {
+    const heights = Array.map(items, itemToRowHeightPx);
+    return Array.scan(heights, 0, (cumulative, height) => cumulative + height);
+};
+const lastOrZero = (values) => pipe(values, Array.last, Option.getOrElse(() => 0));
 /** Computes the visible slice of a data array given the current scroll
  *  position, container height, row height, and an overscan buffer.
  *
+ *  Assumes uniform row heights via `model.rowHeightPx`. For variable-height
+ *  rows, use `visibleWindowVariable`.
+ *
  *  Returns `Option.none()` when the container has not yet been measured;
  *  callers should render a placeholder (or `Html.empty`) and wait for the
  *  first `MeasuredContainer` message. */
@@ -157,6 +187,41 @@ export const visibleWindow = (model, itemCount, overscan) => M.value(model.measu
         });
     },
 }));
+/** Variable-height counterpart of `visibleWindow`. Walks the heights of every
+ *  item to build a prefix-sum array, then locates the visible slice with two
+ *  linear searches.
+ *
+ *  Cost is O(N) per call, walking the whole `items` array once to build the
+ *  prefix sums. For lists in the 10k-item range, this comfortably fits inside
+ *  a 60Hz scroll budget. Larger lists or hotter scroll paths can layer a
+ *  prefix-sum cache invalidated when items change; that lives behind the same
+ *  return shape so consumers don't have to know.
+ *
+ *  Returns `Option.none()` when the container has not yet been measured. */
+export const visibleWindowVariable = (model, items, itemToRowHeightPx, overscan) => M.value(model.measurement).pipe(M.withReturnType(), M.tagsExhaustive({
+    Unmeasured: () => Option.none(),
+    Measured: ({ containerHeight }) => {
+        const itemCount = items.length;
+        const cumulativeOffsets = prefixSum(items, itemToRowHeightPx);
+        const totalHeight = lastOrZero(cumulativeOffsets);
+        const firstVisibleIndex = pipe(cumulativeOffsets, Array.findFirstIndex(Number.greaterThan(model.scrollTop)), Option.match({
+            onNone: () => itemCount,
+            onSome: index => Math.max(0, index - 1),
+        }));
+        const lastVisibleIndex = pipe(cumulativeOffsets, Array.findFirstIndex(Number.greaterThanOrEqualTo(model.scrollTop + containerHeight)), Option.getOrElse(() => itemCount));
+        const startIndex = clampIndex(firstVisibleIndex - overscan, itemCount);
+        const endIndex = clampIndex(lastVisibleIndex + overscan, itemCount);
+        const topSpacerHeight = pipe(cumulativeOffsets, Array.get(startIndex), Option.getOrElse(() => 0));
+        const offsetAtEnd = pipe(cumulativeOffsets, Array.get(endIndex), Option.getOrElse(() => totalHeight));
+        const bottomSpacerHeight = totalHeight - offsetAtEnd;
+        return Option.some({
+            startIndex,
+            endIndex,
+            topSpacerHeight,
+            bottomSpacerHeight,
+        });
+    },
+}));
 // SUBSCRIPTION
 const containerElement = (id) => Option.fromNullable(document.getElementById(id));
 /** Schema describing the subscription dependencies for container scroll and
@@ -278,7 +343,7 @@ const DEFAULT_OVERSCAN = 5;
  *  count of currently mounted rows. */
 export const view = (config) => {
     const { AriaPosinset, AriaSetsize, Class, DataAttribute, Id, Role, Style, keyed, } = html();
-    const { model, items, itemToKey, itemToView, overscan = DEFAULT_OVERSCAN, rowElement = 'li', className, attributes = [], } = config;
+    const { model, items, itemToKey, itemToView, itemToRowHeightPx, overscan = DEFAULT_OVERSCAN, rowElement = 'li', className, attributes = [], } = config;
     const containerAttributes = [
         Id(model.id),
         Role('list'),
@@ -293,7 +358,13 @@ export const view = (config) => {
         ...attributes,
     ];
     const renderContainer = (children) => keyed('ul')(model.id, containerAttributes, children);
-    return Option.match(visibleWindow(model, items.length, overscan), {
+    const maybeWindow = itemToRowHeightPx !== undefined
+        ? visibleWindowVariable(model, items, itemToRowHeightPx, overscan)
+        : visibleWindow(model, items.length, overscan);
+    const rowHeightFor = (item, dataIndex) => itemToRowHeightPx !== undefined
+        ? itemToRowHeightPx(item, dataIndex)
+        : model.rowHeightPx;
+    return Option.match(maybeWindow, {
         onNone: () => renderContainer([]),
         onSome: ({ startIndex, endIndex, topSpacerHeight, bottomSpacerHeight }) => {
             const visibleItems = items.slice(startIndex, endIndex);
@@ -306,7 +377,10 @@ export const view = (config) => {
                     DataAttribute('virtual-list-item-index', String(dataIndex)),
                     AriaSetsize(items.length),
                     AriaPosinset(dataIndex + 1),
-                    Style({ height: `${model.rowHeightPx}px`, display: 'grid' }),
+                    Style({
+                        height: `${rowHeightFor(item, dataIndex)}px`,
+                        display: 'grid',
+                    }),
                 ], [itemToView(item, dataIndex)]);
             });
             return renderContainer([topSpacer, ...renderedRows, bottomSpacer]);

package/dist/ui/virtualList/public.d.ts

@@ -1,3 +1,3 @@
-export { init, update, scrollToIndex, view, lazy, subscriptions, visibleWindow, Model, Message, ScrolledContainer, MeasuredContainer, CompletedApplyScroll, SubscriptionDeps, } from './index.js';
+export { init, update, scrollToIndex, scrollToIndexVariable, view, lazy, subscriptions, visibleWindow, visibleWindowVariable, Model, Message, ScrolledContainer, MeasuredContainer, CompletedApplyScroll, SubscriptionDeps, } from './index.js';
 export type { InitConfig, ViewConfig, VisibleWindow } from './index.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/ui/virtualList/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/virtualList/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,aAAa,EACb,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/virtualList/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,aAAa,EACb,qBAAqB,EACrB,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}

package/dist/ui/virtualList/public.js

@@ -1 +1 @@
-export { init, update, scrollToIndex, view, lazy, subscriptions, visibleWindow, Model, Message, ScrolledContainer, MeasuredContainer, CompletedApplyScroll, SubscriptionDeps, } from './index.js';
+export { init, update, scrollToIndex, scrollToIndexVariable, view, lazy, subscriptions, visibleWindow, visibleWindowVariable, Model, Message, ScrolledContainer, MeasuredContainer, CompletedApplyScroll, SubscriptionDeps, } from './index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.78.0",
+  "version": "0.79.0",
   "description": "A frontend framework for TypeScript, built on Effect, using The Elm Architecture",
   "type": "module",
   "main": "./dist/index.js",