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

package/collections/server-on.d.ts

@@ -0,0 +1,28 @@
+import { type Context } from "@rivetjs/reactivity";
+/**
+ * Server: true while a field probes which of its slotted parts render (`probeSlots`; synchronous, module state). Parts
+ * check it first: a hideable part that consumes a slot id (`Text` description / errorMessage, `ComboBoxValue`) marks it
+ * (`probeSlot`) and renders nothing; Label / Input / FieldError, the ui wrappers and nested field owners return `null`
+ * at once (their subtrees hold no slot of this field). Browser: the constant `false`.
+ */
+export declare let slotProbing: boolean;
+/**
+ * Rivet (server): run the field's `content` once with `values` (its context providers) and `slotProbing` on, before the
+ * field renders the element whose `aria-describedby` names its parts (RA `useSlotId` drops a missing part after
+ * hydration; a resumed page never re-renders). The parts that render mark their slot ids, so the owner writes
+ * `slotIdRef(id, false)`. Isolation: untracked, unrecorded (no resume regions / ids), inside a throwaway root disposed
+ * at the end (nothing the probe creates stays owned), effects inert (`_wrapEffects`: created, never run); a throw is
+ * swallowed (the real render reports it). Field children therefore render twice on the server: keep them pure. Pass
+ * the same providers as the real render (a part reading a missing context throws). Popover content is not probed
+ * (its contexts are cleared there). Browser: a no-op.
+ */
+export declare function probeSlots(values: readonly (readonly [Context<any>, unknown])[], content: unknown): void;
+/** Server: reactive ids (`idSignal`) are registered per render id scope (`utils/id.ts`). Browser: the constant `false`. */
+export declare const idScoping = true;
+/**
+ * Server: the `idSignal` registry of the current render (`withIdScope`: the router opens one per request), or undefined
+ * outside any scope (process-wide `rvs` ids: `utils/id.ts` keeps its module map). Id strings restart per scope, so
+ * concurrent streaming renders share them; one registry per scope keeps a `mergeIds` of request B from changing request
+ * A's ids. Held weakly by the scope object: dropped with the render.
+ */
+export declare function scopedIdUpdaters(): Map<string, unknown> | undefined;

package/collections/server-on.jsx

@@ -0,0 +1,76 @@
+// Server half of the field slot probe: the default resolution of the cdk `#server` import and of
+// `@rivetjs/cdk/slot-probe` (package.json). `.tsx`: server-compiled with its importers (one `slotProbing` instance).
+// Browsers resolve `./server-off.ts` (`slotProbing` is the constant `false`, `probeSlots` a no-op), so DOM bundles fold
+// every probe branch away: 0 bytes.
+import { _wrapEffects, createRoot, provide, untrack } from "@rivetjs/reactivity";
+import { _rUnrecorded } from "@rivetjs/runtime/resume-format";
+import { _idScope } from "@rivetjs/runtime/id";
+import { _probeTree } from "./components.jsx";
+/**
+ * Server: true while a field probes which of its slotted parts render (`probeSlots`; synchronous, module state). Parts
+ * check it first: a hideable part that consumes a slot id (`Text` description / errorMessage, `ComboBoxValue`) marks it
+ * (`probeSlot`) and renders nothing; Label / Input / FieldError, the ui wrappers and nested field owners return `null`
+ * at once (their subtrees hold no slot of this field). Browser: the constant `false`.
+ */
+export let slotProbing = false;
+/**
+ * Rivet (server): run the field's `content` once with `values` (its context providers) and `slotProbing` on, before the
+ * field renders the element whose `aria-describedby` names its parts (RA `useSlotId` drops a missing part after
+ * hydration; a resumed page never re-renders). The parts that render mark their slot ids, so the owner writes
+ * `slotIdRef(id, false)`. Isolation: untracked, unrecorded (no resume regions / ids), inside a throwaway root disposed
+ * at the end (nothing the probe creates stays owned), effects inert (`_wrapEffects`: created, never run); a throw is
+ * swallowed (the real render reports it). Field children therefore render twice on the server: keep them pure. Pass
+ * the same providers as the real render (a part reading a missing context throws). Popover content is not probed
+ * (its contexts are cleared there). Browser: a no-op.
+ */
+export function probeSlots(values, content) {
+    const previous = slotProbing;
+    slotProbing = true;
+    // Effects the probed children create are inert (their run is a no-op; server effects run once, in the real render).
+    const wrap = _wrapEffects(inert);
+    try {
+        _rUnrecorded(() => untrack(() => createRoot((dispose) => {
+            try {
+                provideAll(values, 0, content);
+            }
+            catch {
+                // A part that throws without the real render's surroundings: nothing more is marked; the real render that
+                // follows reports a genuine error.
+            }
+            finally {
+                dispose();
+            }
+        })));
+    }
+    finally {
+        _wrapEffects(wrap);
+        slotProbing = previous;
+    }
+}
+const noop = () => { };
+const inert = () => noop;
+/** Provides `values` from `i` on (nested `provide`s), then walks the content. */
+function provideAll(values, i, content) {
+    if (i < values.length)
+        provide(values[i][0], values[i][1], () => provideAll(values, i + 1, content));
+    else
+        _probeTree(content);
+}
+/** Server: reactive ids (`idSignal`) are registered per render id scope (`utils/id.ts`). Browser: the constant `false`. */
+export const idScoping = true;
+const scopedIds = new WeakMap();
+/**
+ * Server: the `idSignal` registry of the current render (`withIdScope`: the router opens one per request), or undefined
+ * outside any scope (process-wide `rvs` ids: `utils/id.ts` keeps its module map). Id strings restart per scope, so
+ * concurrent streaming renders share them; one registry per scope keeps a `mergeIds` of request B from changing request
+ * A's ids. Held weakly by the scope object: dropped with the render.
+ */
+export function scopedIdUpdaters() {
+    const scope = _idScope();
+    if (!scope)
+        return undefined;
+    let map = scopedIds.get(scope);
+    if (!map)
+        scopedIds.set(scope, (map = new Map()));
+    return map;
+}

package/collections/table.d.ts

@@ -0,0 +1,114 @@
+import { GridCollection, type GridNode, type IGridCollection } from "./grid.js";
+import type { CollectionElement, Key, LinkDOMProps, LoadingState, Node, Rendered, SelectionMode, SortDescriptor, SortDirection } from "./types.js";
+export interface ITableCollection<T> extends IGridCollection<T> {
+    /** A list of header row nodes in the table (one per tier of nested columns). */
+    headerRows: GridNode<T>[];
+    /** A list of (leaf) column nodes in the table. */
+    columns: GridNode<T>[];
+    /** Column keys that serve as the row header. */
+    rowHeaderColumnKeys: Set<Key>;
+    /** The node that makes up the header of the table. */
+    head?: GridNode<T>;
+    /** The node that makes up the body of the table. */
+    body: GridNode<T>;
+}
+export interface TableCollectionOptions {
+    showSelectionCheckboxes?: boolean | undefined;
+    showDragButtons?: boolean | undefined;
+}
+export declare const ROW_HEADER_COLUMN_KEY = "row-header-column-$selection";
+export declare const ROW_HEADER_COLUMN_KEY_DRAG = "row-header-column-$drag";
+/** @private Build the header rows from (leaf) columns and their ancestors. */
+export declare function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode<T>[]): GridNode<T>[];
+export declare class TableCollection<T> extends GridCollection<T> implements ITableCollection<T> {
+    headerRows: GridNode<T>[];
+    columns: GridNode<T>[];
+    rowHeaderColumnKeys: Set<Key>;
+    body: GridNode<T>;
+    _size: number;
+    constructor(nodes: Iterable<GridNode<T>>, _prev?: ITableCollection<T> | null, opts?: TableCollectionOptions);
+    [Symbol.iterator](): IterableIterator<GridNode<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): GridNode<T> | null;
+    at(idx: number): GridNode<T> | null;
+    getChildren(key: Key): Iterable<GridNode<T>>;
+    getTextValue(key: Key): string;
+}
+/** Builder context shared by TableHeader / Column / Row (react-stately `CollectionBuilderContext`). */
+export interface TableBuilderContext<T> {
+    showSelectionCheckboxes: boolean;
+    showDragButtons: boolean;
+    selectionMode: SelectionMode;
+    columns: Node<T>[];
+}
+/** Context for building a table collection (`useTableState`'s memoized context). */
+export declare function tableBuilderContext<T>(options?: {
+    showSelectionCheckboxes?: boolean;
+    showDragButtons?: boolean;
+    selectionMode?: SelectionMode;
+}): TableBuilderContext<T>;
+export type ColumnStaticSize = number | `${number}` | `${number}%`;
+export type ColumnDynamicSize = `${number}fr`;
+export type ColumnSize = ColumnStaticSize | ColumnDynamicSize;
+export interface ColumnProps<T> {
+    key?: Key | undefined;
+    title?: Rendered;
+    children?: Rendered | CollectionElement<T> | CollectionElement<T>[];
+    childColumns?: T[] | undefined;
+    width?: ColumnSize | null | undefined;
+    minWidth?: ColumnStaticSize | null | undefined;
+    maxWidth?: ColumnStaticSize | null | undefined;
+    defaultWidth?: ColumnSize | null | undefined;
+    allowsResizing?: boolean | undefined;
+    allowsSorting?: boolean | undefined;
+    isRowHeader?: boolean | undefined;
+    textValue?: string | undefined;
+    "aria-label"?: string | undefined;
+    [prop: string]: unknown;
+}
+export interface TableHeaderProps<T> {
+    key?: Key | undefined;
+    columns?: readonly T[] | undefined;
+    children: CollectionElement<T> | CollectionElement<T>[] | ((item: T) => CollectionElement<T>);
+}
+export interface TableBodyProps<T> {
+    key?: Key | undefined;
+    children: CollectionElement<T> | CollectionElement<T>[] | ((item: T) => CollectionElement<T>);
+    items?: Iterable<T> | undefined;
+    loadingState?: LoadingState | undefined;
+    onLoadMore?: (() => unknown) | undefined;
+}
+export interface RowProps<T> extends LinkDOMProps {
+    key?: Key | undefined;
+    UNSTABLE_childItems?: Iterable<T> | undefined;
+    children: CollectionElement<T> | CollectionElement<T>[] | ((columnKey: Key) => CollectionElement<T>);
+    textValue?: string | undefined;
+    "aria-label"?: string | undefined;
+    [prop: string]: unknown;
+}
+export interface CellProps {
+    key?: Key | undefined;
+    children?: Rendered;
+    textValue?: string | undefined;
+    colSpan?: number | undefined;
+    "aria-label"?: string | undefined;
+    [prop: string]: unknown;
+}
+export declare const TableHeader: <T>(props: TableHeaderProps<T>) => CollectionElement<T, TableHeaderProps<T>>;
+export declare const TableBody: <T>(props: TableBodyProps<T>) => CollectionElement<T, TableBodyProps<T>>;
+export declare const Column: <T>(props: ColumnProps<T>) => CollectionElement<T, ColumnProps<T>>;
+export declare const Row: <T>(props: RowProps<T>) => CollectionElement<T, RowProps<T>>;
+export declare const Cell: (props: CellProps) => CollectionElement<unknown, CellProps>;
+export declare const OPPOSITE_SORT_DIRECTION: Readonly<Record<SortDirection, SortDirection>>;
+/**
+ * The descriptor `useTableState().sort(columnKey, direction?)` passes to `onSortChange`: the given
+ * direction, else the opposite of the current one for the same column, else ascending.
+ */
+export declare function nextSortDescriptor(current: SortDescriptor | null | undefined, column: Key, direction?: SortDirection): SortDescriptor;
+/** `aria-sort` value of a column under `descriptor` ("none" for sortable, unsorted columns). */
+export declare function ariaSort(descriptor: SortDescriptor | null | undefined, column: Key, allowsSorting?: boolean): "ascending" | "descending" | "none" | undefined;

package/collections/table.js

@@ -0,0 +1,439 @@
+// Ported from @react-stately/table (TableCollection.ts, TableHeader.ts, TableBody.ts, Column.ts, Row.ts,
+// Cell.ts, useTableState.ts sort logic), Apache-2.0, © Adobe.
+//
+// Data level only: the table collection (header rows incl. nested columns + placeholders, body rows,
+// cells, row-header columns, selection / drag columns), builder components and sort descriptors.
+import { countChildren, defineCollectionComponent, forEachChild } from "./builder.js";
+import { getFirstItem, getLastItem } from "./nodes.js";
+import { GridCollection } from "./grid.js";
+import { isSlot } from "@rivetjs/runtime/slot";
+// Deviation: react-stately randomises these keys at import time; Rivet keys must match between the
+// server render and the resumed client, so they are fixed strings.
+export const ROW_HEADER_COLUMN_KEY = "row-header-column-$selection";
+export const ROW_HEADER_COLUMN_KEY_DRAG = "row-header-column-$drag";
+/** @private Build the header rows from (leaf) columns and their ancestors. */
+export function buildHeaderRows(keyMap, columnNodes) {
+    if (columnNodes.length === 0)
+        return [];
+    const columns = [];
+    const seen = new Map();
+    for (const column of columnNodes) {
+        let parentKey = column.parentKey;
+        const col = [column];
+        while (parentKey != null) {
+            const parent = keyMap.get(parentKey);
+            if (!parent)
+                break;
+            // If we've already seen this parent, then it is shared with a previous column. If the current
+            // column is taller than the previous column, then we need to shift the parent in the previous
+            // column so it's level with the current column.
+            if (seen.has(parent)) {
+                parent.colSpan ??= 0;
+                parent.colSpan++;
+                parent.colspan = parent.colSpan;
+                const { column: prevColumn, index } = seen.get(parent);
+                if (index > col.length)
+                    break;
+                for (let i = index; i < col.length; i++)
+                    prevColumn.splice(i, 0, null);
+                // Adjust shifted indices.
+                for (let i = col.length; i < prevColumn.length; i++) {
+                    const c = prevColumn[i];
+                    if (c && seen.has(c))
+                        seen.get(c).index = i;
+                }
+            }
+            else {
+                parent.colSpan = 1;
+                parent.colspan = 1;
+                col.push(parent);
+                seen.set(parent, { column: col, index: col.length - 1 });
+            }
+            parentKey = parent.parentKey;
+        }
+        columns.push(col);
+        column.index = columns.length - 1;
+    }
+    const maxLength = Math.max(...columns.map((c) => c.length));
+    const headerRows = Array(maxLength)
+        .fill(0)
+        .map(() => []);
+    // Convert columns into rows.
+    let colIndex = 0;
+    for (const column of columns) {
+        let i = maxLength - 1;
+        for (const item of column) {
+            if (item) {
+                // Fill the space up until the current column with a placeholder.
+                const row = headerRows[i];
+                const rowLength = row.reduce((p, c) => p + (c.colSpan ?? 1), 0);
+                if (rowLength < colIndex) {
+                    const placeholder = {
+                        type: "placeholder",
+                        key: "placeholder-" + item.key,
+                        colspan: colIndex - rowLength,
+                        colSpan: colIndex - rowLength,
+                        index: rowLength,
+                        value: null,
+                        rendered: null,
+                        level: i,
+                        hasChildNodes: false,
+                        childNodes: [],
+                        textValue: "",
+                    };
+                    if (row.length > 0) {
+                        row[row.length - 1].nextKey = placeholder.key;
+                        placeholder.prevKey = row[row.length - 1].key;
+                    }
+                    row.push(placeholder);
+                }
+                if (row.length > 0) {
+                    row[row.length - 1].nextKey = item.key;
+                    item.prevKey = row[row.length - 1].key;
+                }
+                item.level = i;
+                item.colIndex = colIndex;
+                row.push(item);
+            }
+            i--;
+        }
+        colIndex++;
+    }
+    // Add placeholders at the end of each row that is shorter than the maximum.
+    let i = 0;
+    for (const row of headerRows) {
+        const rowLength = row.reduce((p, c) => p + (c.colSpan ?? 1), 0);
+        if (rowLength < columnNodes.length) {
+            const placeholder = {
+                type: "placeholder",
+                key: "placeholder-" + row[row.length - 1].key,
+                colSpan: columnNodes.length - rowLength,
+                colspan: columnNodes.length - rowLength,
+                index: rowLength,
+                value: null,
+                rendered: null,
+                level: i,
+                hasChildNodes: false,
+                childNodes: [],
+                textValue: "",
+                prevKey: row[row.length - 1].key,
+            };
+            row.push(placeholder);
+        }
+        i++;
+    }
+    return headerRows.map((childNodes, index) => ({
+        type: "headerrow",
+        key: "headerrow-" + index,
+        index,
+        value: null,
+        rendered: null,
+        level: 0,
+        hasChildNodes: true,
+        childNodes,
+        textValue: "",
+    }));
+}
+export class TableCollection extends GridCollection {
+    headerRows;
+    columns;
+    rowHeaderColumnKeys;
+    body;
+    _size = 0;
+    constructor(nodes, _prev, opts) {
+        const rowHeaderColumnKeys = new Set();
+        let body = null;
+        const columns = [];
+        // Add cell for selection checkboxes if needed.
+        if (opts?.showSelectionCheckboxes) {
+            columns.unshift({
+                type: "column",
+                key: ROW_HEADER_COLUMN_KEY,
+                value: null,
+                textValue: "",
+                level: 0,
+                index: opts?.showDragButtons ? 1 : 0,
+                hasChildNodes: false,
+                rendered: null,
+                childNodes: [],
+                props: { isSelectionCell: true },
+            });
+        }
+        // Add cell for drag buttons if needed.
+        if (opts?.showDragButtons) {
+            columns.unshift({
+                type: "column",
+                key: ROW_HEADER_COLUMN_KEY_DRAG,
+                value: null,
+                textValue: "",
+                level: 0,
+                index: 0,
+                hasChildNodes: false,
+                rendered: null,
+                childNodes: [],
+                props: { isDragButtonCell: true },
+            });
+        }
+        const rows = [];
+        const columnKeyMap = new Map();
+        const visit = (node) => {
+            switch (node.type) {
+                case "body":
+                    body = node;
+                    break;
+                case "column":
+                    columnKeyMap.set(node.key, node);
+                    if (!node.hasChildNodes) {
+                        columns.push(node);
+                        if (node.props.isRowHeader)
+                            rowHeaderColumnKeys.add(node.key);
+                    }
+                    break;
+                case "item":
+                    rows.push(node);
+                    return; // do not go into childNodes
+            }
+            for (const child of node.childNodes)
+                visit(child);
+        };
+        for (const node of nodes)
+            visit(node);
+        const headerRows = buildHeaderRows(columnKeyMap, columns);
+        rows.unshift(...headerRows); // upstream: headerRows.forEach((row, i) => rows.splice(i, 0, row)) — same order, one move
+        super({
+            columnCount: columns.length,
+            items: rows,
+            visitNode: (node) => {
+                node.column = columns[node.index];
+                return node;
+            },
+        });
+        this.columns = columns;
+        this.rowHeaderColumnKeys = rowHeaderColumnKeys;
+        this.body = body;
+        this.headerRows = headerRows;
+        this._size = [...body.childNodes].length;
+        // Default row header column to the first one.
+        if (this.rowHeaderColumnKeys.size === 0) {
+            const col = this.columns.find((column) => !column.props?.isDragButtonCell && !column.props?.isSelectionCell);
+            if (col)
+                this.rowHeaderColumnKeys.add(col.key);
+        }
+    }
+    *[Symbol.iterator]() {
+        yield* this.body.childNodes;
+    }
+    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 getFirstItem(this.body.childNodes)?.key ?? null;
+    }
+    getLastKey() {
+        return getLastItem(this.body.childNodes)?.key ?? null;
+    }
+    getItem(key) {
+        if (key === this.body.key)
+            return this.body;
+        return this.keyMap.get(key) ?? null;
+    }
+    at(idx) {
+        const keys = [...this.getKeys()];
+        return this.getItem(keys[idx]);
+    }
+    getChildren(key) {
+        if (key === this.body.key)
+            return this.body.childNodes;
+        const node = this.getItem(key);
+        if (node?.type === "item")
+            return [...node.childNodes].filter((n) => n.type === "cell");
+        return super.getChildren(key);
+    }
+    getTextValue(key) {
+        const row = this.getItem(key);
+        if (!row)
+            return "";
+        // If the row has a textValue, use that.
+        if (row.textValue)
+            return row.textValue;
+        // Otherwise combine the text of each of the row header columns.
+        const rowHeaderColumnKeys = this.rowHeaderColumnKeys;
+        if (rowHeaderColumnKeys) {
+            const text = [];
+            for (const cell of row.childNodes) {
+                const column = this.columns[cell.index];
+                if (column && rowHeaderColumnKeys.has(column.key) && cell.textValue)
+                    text.push(cell.textValue);
+                if (text.length === rowHeaderColumnKeys.size)
+                    break;
+            }
+            return text.join(" ");
+        }
+        return "";
+    }
+}
+/** Context for building a table collection (`useTableState`'s memoized context). */
+export function tableBuilderContext(options = {}) {
+    const selectionMode = options.selectionMode ?? "none";
+    return {
+        showSelectionCheckboxes: !!options.showSelectionCheckboxes && selectionMode !== "none",
+        showDragButtons: !!options.showDragButtons,
+        selectionMode,
+        columns: [],
+    };
+}
+export const TableHeader = /* @__PURE__ */ defineCollectionComponent(function* getCollectionNode(props, context) {
+    const { children, columns } = props;
+    // Clear columns so they aren't double added.
+    context.columns = [];
+    if (typeof children === "function" && !isSlot(children)) {
+        if (!columns)
+            throw new Error("props.children was a function but props.columns is missing");
+        for (const column of columns)
+            yield { type: "column", value: column, renderer: children };
+    }
+    else {
+        const list = [];
+        forEachChild(children, (column) => list.push({ type: "column", element: column }));
+        yield* list;
+    }
+});
+export const TableBody = /* @__PURE__ */ defineCollectionComponent(function* getCollectionNode(props) {
+    const { children, items } = props;
+    yield {
+        type: "body",
+        hasChildNodes: true,
+        props,
+        *childNodes() {
+            if (typeof children === "function" && !isSlot(children)) {
+                if (!items)
+                    throw new Error("props.children was a function but props.items is missing");
+                for (const item of items)
+                    yield { type: "item", value: item, renderer: children };
+            }
+            else {
+                const list = [];
+                forEachChild(children, (item) => list.push({ type: "item", element: item }));
+                yield* list;
+            }
+        },
+    };
+});
+export const Column = /* @__PURE__ */ defineCollectionComponent(function* getCollectionNode(props, context) {
+    const { title, children, childColumns } = props;
+    const rendered = title || children;
+    const textValue = props.textValue || (typeof rendered === "string" ? rendered : "") || props["aria-label"];
+    const fullNodes = yield {
+        type: "column",
+        hasChildNodes: !!childColumns || (!!title && countChildren(children) > 0),
+        rendered,
+        textValue,
+        props,
+        *childNodes() {
+            if (childColumns) {
+                for (const child of childColumns)
+                    yield { type: "column", value: child };
+            }
+            else if (title) {
+                const list = [];
+                forEachChild(children, (child) => list.push({ type: "column", element: child }));
+                yield* list;
+            }
+        },
+        shouldInvalidate(newContext) {
+            // If this is called, a cached version of this node is available, but the list of columns in
+            // the new context must stay up to date.
+            updateContext(newContext);
+            return false;
+        },
+    };
+    const updateContext = (ctx) => {
+        // Register leaf columns on the context so that Row can access them.
+        for (const node of fullNodes)
+            if (!node.hasChildNodes)
+                ctx.columns.push(node);
+    };
+    updateContext(context);
+});
+export const Row = /* @__PURE__ */ defineCollectionComponent(function* getCollectionNode(props, context) {
+    const { children, textValue, UNSTABLE_childItems } = props;
+    yield {
+        type: "item",
+        props,
+        textValue,
+        "aria-label": props["aria-label"],
+        hasChildNodes: true,
+        *childNodes() {
+            // Process cells first.
+            if (context.showDragButtons)
+                yield { type: "cell", key: "header-drag", props: { isDragButtonCell: true } };
+            if (context.showSelectionCheckboxes && context.selectionMode !== "none")
+                yield { type: "cell", key: "header", props: { isSelectionCell: true } };
+            if (typeof children === "function" && !isSlot(children)) {
+                for (const column of context.columns)
+                    yield { type: "cell", element: children(column.key), key: column.key };
+                if (UNSTABLE_childItems)
+                    for (const child of UNSTABLE_childItems)
+                        yield { type: "item", value: child };
+            }
+            else {
+                const cells = [];
+                const childRows = [];
+                let columnCount = 0;
+                forEachChild(children, (node) => {
+                    if (node.type === Row) {
+                        if (cells.length < context.columns.length)
+                            throw new Error("All of a Row's child Cells must be positioned before any child Rows.");
+                        childRows.push({ type: "item", element: node });
+                    }
+                    else {
+                        cells.push({ type: "cell", element: node });
+                        columnCount += node.props.colSpan ?? 1;
+                    }
+                });
+                if (columnCount !== context.columns.length) {
+                    throw new Error(`Cell count must match column count. Found ${columnCount} cells and ${context.columns.length} columns.`);
+                }
+                yield* cells;
+                yield* childRows;
+            }
+        },
+        shouldInvalidate(newContext) {
+            // Invalidate all rows if the columns changed.
+            return (newContext.columns.length !== context.columns.length ||
+                newContext.columns.some((c, i) => c.key !== context.columns[i].key) ||
+                newContext.showSelectionCheckboxes !== context.showSelectionCheckboxes ||
+                newContext.showDragButtons !== context.showDragButtons ||
+                newContext.selectionMode !== context.selectionMode);
+        },
+    };
+});
+export const Cell = /* @__PURE__ */ defineCollectionComponent(function* getCollectionNode(props) {
+    const { children } = props;
+    const textValue = props.textValue || (typeof children === "string" ? children : "") || props["aria-label"] || "";
+    yield { type: "cell", props, rendered: children, textValue, "aria-label": props["aria-label"], hasChildNodes: false };
+});
+// --- Sorting -----------------------------------------------------------------------------------
+export const OPPOSITE_SORT_DIRECTION = { ascending: "descending", descending: "ascending" };
+/**
+ * The descriptor `useTableState().sort(columnKey, direction?)` passes to `onSortChange`: the given
+ * direction, else the opposite of the current one for the same column, else ascending.
+ */
+export function nextSortDescriptor(current, column, direction) {
+    return { column, direction: direction ?? (current?.column === column ? OPPOSITE_SORT_DIRECTION[current.direction] : "ascending") };
+}
+/** `aria-sort` value of a column under `descriptor` ("none" for sortable, unsorted columns). */
+export function ariaSort(descriptor, column, allowsSorting = true) {
+    if (descriptor?.column === column)
+        return descriptor.direction;
+    return allowsSorting ? "none" : undefined;
+}