@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/virtualizer/behaviour.js

@@ -0,0 +1,315 @@
+// Virtualizer component behaviour: serializable model, server first window, and the browser driver that
+// runs the engine (createVirtualizerState + createScrollView) once the visitor scrolls. Semantics follow
+// react-aria/src/virtualizer/Virtualizer.tsx and react-aria-components/src/Virtualizer.tsx (React Spectrum,
+// Apache-2.0, © Adobe): layout + layoutOptions, persisted keys, item measurement, load more.
+// Resume: the model is plain signals + JSON + resumable functions; engine instances live only in the browser
+// (one driver per scroller element, in a lazily created WeakMap).
+import { computed, createRoot, effect, untrack } from "@rivetjs/reactivity";
+import { direction as directionOf } from "../bidi/index.js";
+import { createCollection, loaderNode } from "./collection.js";
+import { createScrollView, getScrollLeft, layoutInfoToStyle, measureItem, setScrollLeft } from "./dom.js";
+import { Rect } from "./rect.js";
+import { Size } from "./size.js";
+import { createVirtualizerState } from "./state.js";
+import { Virtualizer } from "./virtualizer-core.js";
+/** Key of the loader sentinel node the component appends when `isLoading` / `onLoadMore` are given. */
+export const LOADER_KEY = "rv-virtualizer-loader";
+const read = (value) => (typeof value === "function" ? value() : value);
+function collectionOf(model) {
+    const loading = model.isLoading === undefined && !model.onLoadMore ? null : !!read(model.isLoading ?? false);
+    return createCollection(read(model.items), model.collection, loading === null ? [] : [loaderNode(LOADER_KEY, loading)]);
+}
+const persistedOf = (model) => {
+    const keys = new Set(model.persistedKeys);
+    const focused = model.focusedKey();
+    if (focused != null)
+        keys.add(focused);
+    return keys;
+};
+const sameStyle = (a, b) => {
+    const ka = Object.keys(a).filter((k) => a[k] != null), kb = Object.keys(b).filter((k) => b[k] != null);
+    return ka.length === kb.length && ka.every((k) => a[k] === b[k]);
+};
+/** Views of the engine as JSON; unchanged views keep their previous object (resumed rows stay adopted). */
+export function projectViews(views, dir, previous, parent = null) {
+    const out = [];
+    for (const view of views) {
+        const li = view.layoutInfo;
+        if (!li)
+            continue;
+        const node = view.content;
+        const children = projectViews(view.children, dir, previous, li);
+        const next = {
+            key: li.key,
+            type: li.type,
+            item: (node?.value ?? null),
+            index: node?.index ?? 0,
+            level: node?.level ?? 0,
+            parentKey: li.parentKey,
+            x: li.rect.x,
+            y: li.rect.y,
+            width: li.rect.width,
+            height: li.rect.height,
+            estimated: li.estimatedSize,
+            style: layoutInfoToStyle(li, dir, parent),
+            children,
+        };
+        const old = previous.get(li.key);
+        const same = old &&
+            old.type === next.type &&
+            old.item === next.item &&
+            old.index === next.index &&
+            old.level === next.level &&
+            old.parentKey === next.parentKey &&
+            old.x === next.x &&
+            old.y === next.y &&
+            old.width === next.width &&
+            old.height === next.height &&
+            old.estimated === next.estimated &&
+            sameStyle(old.style, next.style) &&
+            old.children.length === children.length &&
+            old.children.every((c, i) => c === children[i]);
+        out.push(same ? old : next);
+    }
+    return out;
+}
+const flatten = (views, into = new Map()) => {
+    for (const view of views) {
+        into.set(view.key, view);
+        flatten(view.children, into);
+    }
+    return into;
+};
+const sizeOfContent = (size) => ({ width: size.width, height: size.height });
+/** First window for the server render (and client-rendered mounts): the engine at `initialSize`, scrolled to 0. */
+export function initialWindow(model) {
+    return untrack(() => {
+        const collection = collectionOf(model);
+        const layout = model.layout();
+        const virtualizer = new Virtualizer({
+            collection,
+            layout,
+            delegate: { setVisibleRect() { }, renderView: (_type, content) => content, invalidate() { } },
+        });
+        const { width, height } = model.initialSize;
+        const views = virtualizer.render({
+            layout,
+            collection,
+            persistedKeys: new Set(model.persistedKeys),
+            visibleRect: new Rect(0, 0, width, height),
+            size: new Size(width, height),
+            invalidationContext: model.layoutOptions != null ? { layoutOptions: model.layoutOptions } : {},
+            isScrolling: false,
+            layoutOptions: model.layoutOptions,
+        });
+        return { views: projectViews(views, model.dir, new Map()), contentSize: sizeOfContent(virtualizer.contentSize) };
+    });
+}
+let drivers;
+const viewElement = (root, key) => {
+    for (const el of root.querySelectorAll("[data-rv-view]"))
+        if (el.dataset.rvView === String(key))
+            return el;
+    return null;
+};
+/** The browser driver of `model` (created on first use: engine, scroll view, measurement). */
+export function driverOf(model, element) {
+    const el = (element ?? (typeof document === "undefined" ? null : document.getElementById(model.id)));
+    if (!el)
+        return null;
+    drivers ??= new WeakMap();
+    const existing = drivers.get(el);
+    if (existing)
+        return existing;
+    const dir = () => model.dir ?? directionOf(el);
+    const collection = computed(() => collectionOf(model));
+    const layout = untrack(() => model.layout());
+    let state;
+    const scrollView = createScrollView(el, {
+        contentSize: () => untrack(() => state?.contentSize() ?? new Size(model.contentSize().width, model.contentSize().height)),
+        onVisibleRectChange: (rect) => state?.setVisibleRect(rect),
+        onScrollStart: () => {
+            state?.startScrolling();
+            model.isScrolling.set(true);
+        },
+        onScrollEnd: () => {
+            state?.endScrolling();
+            model.isScrolling.set(false);
+        },
+        direction: dir,
+    });
+    state = createVirtualizerState({
+        layout,
+        collection,
+        renderView: (_type, content) => content,
+        onVisibleRectChange(rect) {
+            setScrollLeft(el, dir(), rect.x);
+            el.scrollTop = rect.y;
+        },
+        persistedKeys: () => persistedOf(model),
+        layoutOptions: model.layoutOptions,
+        initialVisibleRect: new Rect(getScrollLeft(el, dir()), el.scrollTop, el.clientWidth, el.clientHeight),
+    });
+    const driver = { state, scrollView, loadingMore: false, lastItems: undefined };
+    drivers.set(el, driver);
+    scrollView.updateSize();
+    // Project engine views into the model (the rows' For), then measure estimated views once rendered.
+    let observer = null;
+    const observed = new WeakSet();
+    const measureQueue = new Set();
+    let scheduled = false;
+    const measure = () => {
+        scheduled = false;
+        for (const key of measureQueue) {
+            const element = viewElement(el, key);
+            if (element)
+                measureItem(state.virtualizer, key, element);
+        }
+        measureQueue.clear();
+    };
+    const schedule = (key) => {
+        measureQueue.add(key);
+        if (!scheduled) {
+            scheduled = true;
+            queueMicrotask(measure);
+        }
+    };
+    if (model.shouldObserveItemSize && typeof ResizeObserver !== "undefined") {
+        observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const key = entry.target.parentElement?.closest("[data-rv-view]")?.dataset.rvView;
+                const view = key == null ? undefined : [...flatten(untrack(model.views)).values()].find((v) => String(v.key) === key);
+                if (view)
+                    schedule(view.key);
+            }
+        });
+    }
+    computedEffect(() => {
+        const views = state.visibleViews();
+        const contentSize = state.contentSize();
+        untrack(() => {
+            const previous = flatten(model.views());
+            // Rows leaving the window read their last descriptor (viewOf); on a resumed page no row accessor ran
+            // before this first projection, so the replaced (server) views seed that cache.
+            remember(model, previous);
+            const next = projectViews(views, model.dir, previous);
+            model.views.set(next);
+            const size = model.contentSize();
+            if (size.width !== contentSize.width || size.height !== contentSize.height)
+                model.contentSize.set(sizeOfContent(contentSize));
+            const visit = (list) => {
+                for (const view of list) {
+                    if (view.estimated)
+                        schedule(view.key);
+                    visit(view.children);
+                }
+            };
+            visit(next);
+            if (observer)
+                queueMicrotask(() => {
+                    for (const element of el.querySelectorAll("[data-rv-view]"))
+                        for (const child of element.children)
+                            if (!observed.has(child))
+                                (observed.add(child), observer.observe(child));
+                });
+        });
+    });
+    return driver;
+}
+// The driver's projection effect: detached from any component owner (the driver outlives region re-creation).
+function computedEffect(fn) {
+    createRoot(() => effect(fn));
+}
+/** Rows of the model: the server window, or (browser) the driver's projection; reads `items` for reactivity. */
+export function visibleViews(model) {
+    if (typeof model.items === "function")
+        model.items();
+    if (typeof model.isLoading === "function")
+        model.isLoading();
+    if (typeof document !== "undefined")
+        untrack(() => driverOf(model));
+    return model.views();
+}
+/** Keys of `views`: the rows' `For` items. Keys keep their identity across windows, so resumed server rows are
+ * adopted and kept (a `For` re-creates an adopted row whose item changed; view descriptors change on every move). */
+export const viewKeys = (views) => views.map((view) => view.key);
+let indexes;
+let last;
+const seenOf = (model) => {
+    let seen = (last ??= new WeakMap()).get(model);
+    if (!seen)
+        last.set(model, (seen = new Map()));
+    return seen;
+};
+// The views a projection replaces: rows removed by it still find their descriptor.
+function remember(model, views) {
+    const seen = seenOf(model);
+    for (const [key, view] of views)
+        seen.set(key, view);
+}
+/** The view with `key` in `views` (a row's descriptor); a row being removed keeps its last descriptor. */
+export function viewOf(model, views, key) {
+    let index = (indexes ??= new WeakMap()).get(views);
+    if (!index)
+        indexes.set(views, (index = new Map(views.map((view) => [view.key, view]))));
+    const seen = seenOf(model);
+    const view = index.get(key);
+    if (!view)
+        return seen.get(key);
+    seen.set(key, view);
+    return view;
+}
+/** Scroll handler of the scroller: drive the engine, load more near the end, then the caller's `onScroll`. */
+export function virtualizerScroll(model, event) {
+    const el = event.currentTarget;
+    const driver = driverOf(model, el);
+    if (!driver)
+        return;
+    driver.scrollView.onScroll(event);
+    loadMore(model, driver, el);
+    model.onScroll?.(event);
+}
+function loadMore(model, driver, el) {
+    if (!model.onLoadMore)
+        return;
+    const items = untrack(() => read(model.items));
+    const loading = untrack(() => !!read(model.isLoading ?? false));
+    // A finished load (new items or loading flag reset) re-arms the trigger.
+    if (items !== driver.lastItems || loading)
+        driver.loadingMore = loading;
+    driver.lastItems = items;
+    if (driver.loadingMore)
+        return;
+    if (el.scrollHeight - el.scrollTop - el.clientHeight < el.clientHeight * model.loadMoreOffset) {
+        driver.loadingMore = true;
+        model.onLoadMore();
+    }
+}
+/** focusin: the focused view stays rendered (persisted) while scrolled out of view. */
+export function virtualizerFocusIn(model, event) {
+    const key = event.target?.closest?.("[data-rv-view]")?.dataset.rvView;
+    if (key == null)
+        return;
+    const view = [...flatten(untrack(model.views)).values()].find((v) => String(v.key) === key);
+    if (view && untrack(model.focusedKey) !== view.key)
+        model.focusedKey.set(view.key);
+    driverOf(model, event.currentTarget);
+}
+/** Style of the content element (size of the scrollable content; no pointer events while scrolling). */
+export function contentStyle(model) {
+    const { width, height } = model.contentSize();
+    return {
+        position: "relative",
+        width: Number.isFinite(width) && width > 0 ? width + "px" : undefined,
+        height: Number.isFinite(height) ? height + "px" : undefined,
+        "pointer-events": model.isScrolling() ? "none" : undefined,
+    };
+}
+/** Style of the scroller: overflow per scroll direction, padding reset (padding is done by the layout). */
+export function scrollerStyle(scrollDirection) {
+    return scrollDirection === "horizontal"
+        ? { padding: "0", "overflow-x": "auto", "overflow-y": "hidden" }
+        : scrollDirection === "vertical"
+            ? { padding: "0", "overflow-y": "auto", "overflow-x": "hidden" }
+            : { padding: "0", overflow: "auto" };
+}

package/virtualizer/collection.d.ts

@@ -0,0 +1,103 @@
+import type { Key } from "../collections/index.js";
+export interface Node<T> {
+    /** The type of item this node represents (`item`, `section`, `header`, `loader`, `separator`, …). */
+    type: string;
+    /** A unique key for the node. */
+    key: Key;
+    /** The object value the node was created from. */
+    value: T | null;
+    /** The level of depth this node is at in the hierarchy. */
+    level: number;
+    /** Whether this item has children, even if not loaded yet. */
+    hasChildNodes: boolean;
+    /** The loaded children of this node (prefer `collection.getChildren(node.key)`). */
+    childNodes: Iterable<Node<T>>;
+    /** Rendered contents marker; layouts only test it for truthiness (headers). */
+    rendered: unknown;
+    /** A string value for this node, used for features like typeahead. */
+    textValue: string;
+    /** An accessibility label for this node. */
+    "aria-label"?: string;
+    /** The index of this node within its parent. */
+    index: number;
+    /** The key of the parent node. */
+    parentKey?: Key | null;
+    /** The key of the node before this node. */
+    prevKey?: Key | null;
+    /** The key of the node after this node. */
+    nextKey?: Key | null;
+    /** The first child key of this node. */
+    firstChildKey?: Key | null;
+    /** The last child key of this node. */
+    lastChildKey?: Key | null;
+    /** Additional properties specific to a particular node type (loaders: `isLoading`; columns: widths). */
+    props?: any;
+}
+/** A readonly sequential collection of unique keyed items (iterates the top-level nodes). */
+export interface Collection<T> extends Iterable<T> {
+    /** The number of items (and sections) in the collection. */
+    readonly size: number;
+    /** Iterate over all keys in the collection. */
+    getKeys(): Iterable<Key>;
+    /** Get an item by its key. */
+    getItem(key: Key): T | null;
+    /** Get an item by the index of its key. */
+    at(idx: number): T | null;
+    /** Get the key that comes before the given key in the collection. */
+    getKeyBefore(key: Key): Key | null;
+    /** Get the key that comes after the given key in the collection. */
+    getKeyAfter(key: Key): Key | null;
+    /** Get the first key in the collection. */
+    getFirstKey(): Key | null;
+    /** Get the last key in the collection. */
+    getLastKey(): Key | null;
+    /** Iterate over the child items of the given key. */
+    getChildren?(key: Key): Iterable<T>;
+    /** Returns a string representation of the item's contents. */
+    getTextValue?(key: Key): string;
+}
+/** Collection over nodes: sections are flattened into the key map, `size` counts items and sections. */
+export declare class ListCollection<T> implements Collection<Node<T>> {
+    private keyMap;
+    private iterable;
+    private firstKey;
+    private lastKey;
+    private _size;
+    constructor(nodes: Iterable<Node<T>>);
+    [Symbol.iterator](): IterableIterator<Node<T>>;
+    get size(): number;
+    getKeys(): IterableIterator<Key>;
+    getKeyBefore(key: Key): Key | null;
+    getKeyAfter(key: Key): Key | null;
+    getFirstKey(): Key | null;
+    getLastKey(): Key | null;
+    getItem(key: Key): Node<T> | null;
+    at(idx: number): Node<T> | null;
+    getChildren(key: Key): Iterable<Node<T>>;
+    getTextValue(key: Key): string;
+}
+export interface CollectionOptions<T> {
+    /** Item key (default: `item.key ?? item.id`, or the item itself for strings / numbers). */
+    getKey?: (item: T, index: number) => Key;
+    /** Node type (default: `item.type ?? "item"`). Sections (`"section"`) hold `getChildren(item)` nodes. */
+    getType?: (item: T) => string;
+    /** Children of a section (default `item.children`). */
+    getChildren?: (item: T) => Iterable<T> | null | undefined;
+    /** Typeahead text (default `item.textValue ?? item.label ?? String(item)`). */
+    getTextValue?: (item: T) => string;
+    /** Extra node props (default `item.props ?? {}`; columns read `width` / `minWidth` / `maxWidth` there). */
+    getProps?: (item: T) => any;
+}
+/** Default key of an item: `key`, else `id`, else the primitive itself. */
+export declare function itemKey(item: unknown, index: number): Key;
+/** Nodes of `items` (sections recurse into their children; `level` / `parentKey` / `index` set). */
+export declare function buildNodes<T>(items: Iterable<T>, options?: CollectionOptions<T>, parentKey?: Key | null, level?: number): Node<T>[];
+/** A loader sentinel node ("load more"), rendered after the items; `isLoading` reserves the loader size. */
+export declare function loaderNode<T>(key: Key, isLoading: boolean, parentKey?: Key | null): Node<T>;
+/** A collection from plain items (see `CollectionOptions`); `extra` nodes (e.g. a loader) are appended. */
+export declare function createCollection<T>(items: Iterable<T>, options?: CollectionOptions<T>, extra?: Node<T>[]): ListCollection<T>;
+/** Children of `node` (`collection.getChildren` when available, else `node.childNodes`). */
+export declare function getChildNodes<T>(node: Node<T>, collection: Collection<Node<T>>): Iterable<Node<T>>;
+export declare function getFirstItem<T>(iterable: Iterable<T>): T | undefined;
+export declare function getNthItem<T>(iterable: Iterable<T>, index: number): T | undefined;
+export declare function getLastItem<T>(iterable: Iterable<T>): T | undefined;

package/virtualizer/collection.js

@@ -0,0 +1,155 @@
+/** Collection over nodes: sections are flattened into the key map, `size` counts items and sections. */
+export class ListCollection {
+    keyMap = new Map();
+    iterable;
+    firstKey = null;
+    lastKey;
+    _size;
+    constructor(nodes) {
+        this.iterable = nodes;
+        const visit = (node) => {
+            this.keyMap.set(node.key, node);
+            if (node.childNodes && node.type === "section")
+                for (const child of node.childNodes)
+                    visit(child);
+        };
+        for (const node of nodes)
+            visit(node);
+        let last = null;
+        let index = 0;
+        let size = 0;
+        for (const [key, node] of this.keyMap) {
+            if (last) {
+                last.nextKey = key;
+                node.prevKey = last.key;
+            }
+            else {
+                this.firstKey = key;
+                node.prevKey = undefined;
+            }
+            if (node.type === "item")
+                node.index = index++;
+            // Only sections and items count, so loaders and separators don't influence the empty state.
+            if (node.type === "section" || node.type === "item")
+                size++;
+            last = node;
+            last.nextKey = undefined;
+        }
+        this._size = size;
+        this.lastKey = last?.key ?? null;
+    }
+    *[Symbol.iterator]() {
+        yield* this.iterable;
+    }
+    get size() {
+        return this._size;
+    }
+    getKeys() {
+        return this.keyMap.keys();
+    }
+    getKeyBefore(key) {
+        return this.keyMap.get(key)?.prevKey ?? null;
+    }
+    getKeyAfter(key) {
+        return this.keyMap.get(key)?.nextKey ?? null;
+    }
+    getFirstKey() {
+        return this.firstKey;
+    }
+    getLastKey() {
+        return this.lastKey;
+    }
+    getItem(key) {
+        return this.keyMap.get(key) ?? null;
+    }
+    at(idx) {
+        const keys = [...this.getKeys()];
+        return keys[idx] === undefined ? null : this.getItem(keys[idx]);
+    }
+    getChildren(key) {
+        return this.keyMap.get(key)?.childNodes || [];
+    }
+    getTextValue(key) {
+        return this.keyMap.get(key)?.textValue ?? "";
+    }
+}
+const field = (item, name) => (item != null && typeof item === "object" ? item[name] : undefined);
+/** Default key of an item: `key`, else `id`, else the primitive itself. */
+export function itemKey(item, index) {
+    if (item == null || typeof item !== "object")
+        return typeof item === "number" || typeof item === "string" ? item : index;
+    return field(item, "key") ?? field(item, "id") ?? index;
+}
+/** Nodes of `items` (sections recurse into their children; `level` / `parentKey` / `index` set). */
+export function buildNodes(items, options = {}, parentKey = null, level = 0) {
+    const nodes = [];
+    let index = 0;
+    for (const item of items) {
+        const key = options.getKey ? options.getKey(item, index) : itemKey(item, index);
+        const type = options.getType?.(item) ?? field(item, "type") ?? "item";
+        const children = type === "section" ? (options.getChildren?.(item) ?? field(item, "children")) : null;
+        const childNodes = children ? buildNodes(children, options, key, level + 1) : [];
+        const text = options.getTextValue?.(item) ?? field(item, "textValue") ?? field(item, "label") ?? (typeof item === "object" ? "" : String(item));
+        nodes.push({
+            type,
+            key,
+            value: item,
+            level,
+            hasChildNodes: childNodes.length > 0,
+            childNodes,
+            rendered: true,
+            textValue: String(text),
+            index: index++,
+            parentKey,
+            firstChildKey: childNodes[0]?.key ?? null,
+            lastChildKey: childNodes.at(-1)?.key ?? null,
+            props: options.getProps?.(item) ?? field(item, "props") ?? {},
+        });
+    }
+    return nodes;
+}
+/** A loader sentinel node ("load more"), rendered after the items; `isLoading` reserves the loader size. */
+export function loaderNode(key, isLoading, parentKey = null) {
+    return {
+        type: "loader",
+        key,
+        value: null,
+        level: 0,
+        hasChildNodes: false,
+        childNodes: [],
+        rendered: true,
+        textValue: "",
+        index: 0,
+        parentKey,
+        props: { isLoading },
+    };
+}
+/** A collection from plain items (see `CollectionOptions`); `extra` nodes (e.g. a loader) are appended. */
+export function createCollection(items, options = {}, extra = []) {
+    return new ListCollection([...buildNodes(items, options), ...extra]);
+}
+/** Children of `node` (`collection.getChildren` when available, else `node.childNodes`). */
+export function getChildNodes(node, collection) {
+    if (typeof collection.getChildren === "function")
+        return collection.getChildren(node.key);
+    return node.childNodes;
+}
+export function getFirstItem(iterable) {
+    return getNthItem(iterable, 0);
+}
+export function getNthItem(iterable, index) {
+    if (index < 0)
+        return undefined;
+    let i = 0;
+    for (const item of iterable) {
+        if (i === index)
+            return item;
+        i++;
+    }
+}
+export function getLastItem(iterable) {
+    let lastItem = undefined;
+    for (const value of iterable)
+        lastItem = value;
+    return lastItem;
+}

package/virtualizer/dom.d.ts

@@ -0,0 +1,50 @@
+import type { StyleObject } from "@rivetjs/runtime/style";
+import type { Key } from "../collections/index.js";
+import type { LayoutInfo } from "./layout-info.js";
+import { Rect } from "./rect.js";
+import { Size } from "./size.js";
+import type { Direction } from "./types.js";
+export type RTLOffsetType = "negative" | "positive-descending" | "positive-ascending";
+/**
+ * How the browser reports `scrollLeft` of RTL elements (spec: negative; old Chrome: positive from the left;
+ * old WebKit/IE: positive from the right). Detected once by scrolling a probe element.
+ */
+export declare function getRTLOffsetType(recalculate?: boolean): RTLOffsetType;
+/** `scrollLeft` normalized to a distance from the inline start (RTL-safe). */
+export declare function getScrollLeft(node: Element, direction: Direction): number;
+/** Set `scrollLeft` from a distance from the inline start (RTL-safe). */
+export declare function setScrollLeft(node: Element, direction: Direction, scrollLeft: number): void;
+/**
+ * Absolute (or sticky) position style of a view, relative to its parent view. `dir` picks `left` / `right`;
+ * without `dir` the inline-start offset is the logical `inset-inline-start` (RTL without JS).
+ */
+export declare function layoutInfoToStyle(layoutInfo: LayoutInfo, dir?: Direction | null, parent?: LayoutInfo | null): StyleObject;
+/** Intrinsic size of a view element (its fixed height reset while measuring). */
+export declare function getSize(node: HTMLElement): Size;
+/** Whether `element` is rendered and visible (hidden virtualizers must not report 0 sizes). */
+export declare function isElementVisible(element: Element): boolean;
+/** useVirtualizerItem's measurement: report the view's measured size (only while visible). */
+export declare function measureItem(virtualizer: {
+    updateItemSize(key: Key, size: Size): void;
+}, key: Key, element: HTMLElement): void;
+export interface ScrollViewOptions {
+    /** Current content size (scroll position is clamped to it). */
+    contentSize(): Size;
+    onVisibleRectChange(rect: Rect): void;
+    onSizeChange?(size: Size): void;
+    onScrollStart?(): void;
+    onScrollEnd?(): void;
+    allowsWindowScrolling?: boolean;
+    /** Text direction of the scroller (scrollLeft normalization). */
+    direction(): Direction;
+}
+export interface ScrollView {
+    /** Handle a scroll event (of the scroller, an ancestor or the window). */
+    onScroll(event: Event): void;
+    /** Re-measure the scroller (resize observer / window resize / content size change). */
+    updateSize(): void;
+    readonly isScrolling: boolean;
+    dispose(): void;
+}
+/** useScrollView as a controller for `element`: visible rect from scroll position + size, scroll start / end (300 ms). */
+export declare function createScrollView(element: HTMLElement, options: ScrollViewOptions): ScrollView;