@kromatv/sdk 0.1.39-canary.3579809

package/types/ui/src/components/organisms/selection-bar/selection-bar-keys.d.ts

@@ -0,0 +1,9 @@
+import { type RefObject } from 'react';
+import type { View } from 'react-native';
+/**
+ * While `active`, Escape anywhere on the page clears the selection, unless a
+ * caret, a modal or a popup nearer the focus has claimed the key. When the bar
+ * leaves with the focus inside it, the focus goes back to the element it came
+ * from. Browser targets only; elsewhere the Clear part is the way out.
+ */
+export declare function useSelectionKeys(active: boolean, bar: RefObject<View | null>, onClear: () => void): void;

package/types/ui/src/components/organisms/selection-bar/selection-bar-parts.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { IconName } from '#ui/components/atoms/icon';
+type SelectionBarTone = 'default' | 'accent' | 'danger';
+/** How many are selected, in the caller's words. Its text is what a screen
+ *  reader hears each time the count moves, so it takes the finished sentence
+ *  rather than a number and a noun written side by side. */
+declare function Status({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+interface SelectionBarSelectAllProps {
+    /** The drawn words and the accessible name: say the number it reaches in
+     *  them, « Sélectionner les 40 titres », never in parentheses. */
+    label: string;
+    onPress: () => void;
+}
+/** Widens a selection made on one page, or among the rows a filter left, to
+ *  every row the set holds. Render it while part of the set is selected and
+ *  leave it out once all of it is: only the caller knows which rows the set
+ *  holds. */
+declare function SelectAll({ label, onPress }: Readonly<SelectionBarSelectAllProps>): import("react").JSX.Element;
+/** Empties the selection, which is also what takes the bar away. It draws a
+ *  glyph alone, so `label` is its name and its tooltip. */
+declare function Clear({ label }: Readonly<{
+    label: string;
+}>): import("react").JSX.Element;
+interface SelectionBarItemProps {
+    /** Also the menu row's words once the item has moved into the overflow menu. */
+    label: string;
+    icon?: IconName;
+    /** `accent` for the one action the rows were picked for, `danger` for the destructive one. */
+    tone?: SelectionBarTone;
+    onPress: () => void;
+    disabled?: boolean;
+    /** A spinner in the glyph's place; in the overflow menu the row is disabled instead. */
+    loading?: boolean;
+}
+/** One action on the selection, drawn as a button on the bar's control row. */
+declare function Item({ label, icon, tone, onPress, disabled, loading, }: Readonly<SelectionBarItemProps>): import("react").JSX.Element;
+export type { SelectionBarItemProps, SelectionBarSelectAllProps, SelectionBarTone };
+export { Clear, Item, SelectAll, Status };

package/types/ui/src/components/organisms/selection-bar/selection-bar.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from 'react';
+import { type ControlSize } from '#ui/lib/field-shell';
+import { Actions } from './selection-bar-actions';
+import { Clear, Item, SelectAll, Status } from './selection-bar-parts';
+type SelectionBarPlacement = 'floating' | 'inline';
+interface SelectionBarRootProps {
+    /** At 0 the bar leaves with its exit motion, still showing the last count. */
+    count: number;
+    /** Called by <SelectionBar.Clear> and by Escape. */
+    onClear: () => void;
+    label: string;
+    /** Defaults to `floating`: raised, centred, and sticky at the viewport's foot on the web. */
+    placement?: SelectionBarPlacement;
+    /** The shell every control on the bar stands at; defaults to the app's (`setEntryDefaults`). */
+    size?: ControlSize;
+    /** A direct Clear leads the bar and a direct Actions ends it; a direct Status is announced. */
+    children: ReactNode;
+}
+declare function Root({ count, onClear, label, placement, size, children, }: Readonly<SelectionBarRootProps>): import("react").JSX.Element;
+/**
+ * The bar that appears while rows are selected: how many, a way to widen the
+ * selection to the whole set, what can be done to it, and a way to drop it.
+ *
+ * ```tsx
+ * <SelectionBar.Root count={picked.size} onClear={clear} label="Sélection">
+ *   <SelectionBar.Clear label="Tout désélectionner" />
+ *   <SelectionBar.Status>4 titres sélectionnés</SelectionBar.Status>
+ *   <SelectionBar.SelectAll label="Sélectionner les 1 170 titres" onPress={selectAll} />
+ *   <SelectionBar.Actions label="Autres actions">
+ *     <SelectionBar.Item icon="radar" tone="accent" label="Suivre" onPress={follow} />
+ *     <SelectionBar.Item icon="radar-off" tone="danger" label="Ne plus suivre" onPress={drop} />
+ *   </SelectionBar.Actions>
+ * </SelectionBar.Root>
+ * ```
+ */
+declare const SelectionBar: {
+    Root: typeof Root;
+    Clear: typeof Clear;
+    Status: typeof Status;
+    SelectAll: typeof SelectAll;
+    Actions: typeof Actions;
+    Item: typeof Item;
+};
+export type { SelectionBarActionsProps } from './selection-bar-actions';
+export type { SelectionBarItemProps, SelectionBarSelectAllProps, SelectionBarTone, } from './selection-bar-parts';
+export type { SelectionBarPlacement, SelectionBarRootProps };
+export { SelectionBar };

package/types/ui/src/components/organisms/splash-backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export type { SplashBackdropProps, SplashCover } from './splash-backdrop';
+export { SplashBackdrop } from './splash-backdrop';

package/types/ui/src/components/organisms/splash-backdrop/splash-backdrop.d.ts

@@ -0,0 +1,22 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+interface SplashCover {
+    /** Full artwork URL, already resolved against the server. */
+    url: string;
+    /** Corner caption, e.g. "Alien: Earth · 2025". */
+    caption?: string;
+    /** Small overline before the caption, e.g. the localized "Film". */
+    eyebrow?: string;
+}
+interface SplashBackdropProps {
+    covers: readonly SplashCover[];
+    /** How long each cover holds before the next dissolve. */
+    holdMs?: number;
+    style?: StyleProp<ViewStyle>;
+}
+/** The universal sign-in splash: hosts fetch `/api/splash`, map it to covers
+ * and drop this behind their gate. It owns the rotation, the pre-decode of the
+ * next cover, the grade that keeps a form readable, the wheel rule and the
+ * caption; the host owns everything interactive above it. */
+declare function SplashBackdrop({ covers, holdMs, style }: Readonly<SplashBackdropProps>): import("react").JSX.Element | null;
+export type { SplashBackdropProps, SplashCover };
+export { SplashBackdrop };

package/types/ui/src/components/organisms/table/index.d.ts

@@ -0,0 +1 @@
+export * from './table';

package/types/ui/src/components/organisms/table/table-cell.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+interface TableCellProps {
+    /** A string is set in the table's own type, in the head's ink or the body's;
+     *  anything else is drawn as it was written. */
+    children?: ReactNode;
+}
+declare function Cell({ children }: Readonly<TableCellProps>): import("react").JSX.Element | null;
+export type { TableCellProps };
+export { Cell };

package/types/ui/src/components/organisms/table/table-column-seam.d.ts

@@ -0,0 +1,8 @@
+import type { ColumnResize } from './table-layout';
+interface ColumnSeamProps {
+    at: number;
+    label: string | undefined;
+    resize: ColumnResize;
+}
+declare function ColumnSeam({ at, label, resize }: Readonly<ColumnSeamProps>): import("react").JSX.Element;
+export { ColumnSeam };

package/types/ui/src/components/organisms/table/table-columns.d.ts

@@ -0,0 +1,35 @@
+import type { ViewStyle } from 'react-native';
+import { type StyleScope } from '#ui/core';
+import { type BreakpointName } from '#ui/core/tokens';
+interface TableColumn {
+    /** The name this column answers to in the Root's `sort`. Without one it is
+     *  not a sort control. */
+    column?: string;
+    /** Fixed px. A column stating one neither grows nor shrinks. */
+    width?: number;
+    /** Share of the width the fixed columns leave, defaulting to 1. */
+    flex?: number;
+    /** The px a `flex` column stops shrinking at, and the floor a resize stops
+     *  any column at. */
+    min?: number;
+    /** Drawn from this breakpoint up, and absent below it: not narrowed, not
+     *  clipped, and not read out. */
+    from?: BreakpointName;
+    /** Defaults to `start`. */
+    align?: 'start' | 'end';
+}
+interface TableGrid {
+    columns: readonly TableColumn[];
+    boxes: readonly ViewStyle[];
+    step: number;
+}
+declare const GridContext: import("react").Context<TableGrid | null>;
+declare function useTableGrid(): TableGrid | null;
+declare const NO_COLUMNS: readonly TableColumn[];
+declare const FILL: import("../../../core/types").AnyStyle;
+declare function columnBox(column: TableColumn, scope: StyleScope): ViewStyle;
+declare function breakpointMask(columns: readonly TableColumn[]): number;
+declare function drawn(column: TableColumn | undefined, step: number): boolean;
+declare function lastDrawn(columns: readonly TableColumn[], count: number, step: number): number;
+export type { TableColumn, TableGrid };
+export { breakpointMask, columnBox, drawn, FILL, GridContext, lastDrawn, NO_COLUMNS, useTableGrid };

package/types/ui/src/components/organisms/table/table-context.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+/** How a table meets the page: as a card of its own (`framed`), or as ruled
+ * rows flush with the column of text around it (`plain`). */
+type TableVariant = 'framed' | 'plain';
+interface Place {
+    variant: TableVariant;
+    head: boolean;
+    ruled: boolean;
+    at: number;
+    of: number;
+}
+interface TableSectionProps {
+    /** A DIRECT <Table.Row> child. */
+    children?: ReactNode;
+}
+declare const TableContext: import("react").Context<Place | null>, useTable: (part: string) => Place;
+export type { Place, TableSectionProps, TableVariant };
+export { TableContext, useTable };

package/types/ui/src/components/organisms/table/table-frame.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { TableVariant } from './table-context';
+interface FrameProps {
+    variant: TableVariant;
+    label?: string;
+    children: ReactNode;
+}
+declare function Frame({ variant, label, children }: Readonly<FrameProps>): import("react").JSX.Element;
+export { Frame };

package/types/ui/src/components/organisms/table/table-layout.d.ts

@@ -0,0 +1,26 @@
+import type { ViewStyle } from 'react-native';
+import { type ResizableStorage } from '#ui/components/organisms/resizable/resizable-store';
+import { type TableColumn } from './table-columns';
+interface ColumnResize {
+    seamAfter: (at: number) => boolean;
+    share: (at: number) => number;
+    measure: (at: number, width: number) => void;
+    begin: () => void;
+    drag: (at: number, delta: number, committed: boolean) => void;
+    reset: () => void;
+}
+interface ResizeOptions {
+    columns: readonly TableColumn[];
+    step: number;
+    resizable: boolean;
+    autoSaveId: string | undefined;
+    storage: ResizableStorage | null | undefined;
+}
+declare const ResizeContext: import("react").Context<ColumnResize | null>;
+declare function useColumnResize(): ColumnResize | null;
+declare function useColumnLayout({ columns, step, resizable, autoSaveId, storage }: ResizeOptions): {
+    boxes: readonly ViewStyle[] | null;
+    resize: ColumnResize | null;
+};
+export type { ColumnResize };
+export { ResizeContext, useColumnLayout, useColumnResize };

package/types/ui/src/components/organisms/table/table-place.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type Place } from './table-context';
+declare function parts(children: ReactNode): ReactElement[];
+declare function Placed({ items, places }: Readonly<{
+    items: ReactElement[];
+    places: Place[];
+}>): import("react").JSX.Element;
+export { Placed, parts };

package/types/ui/src/components/organisms/table/table-row.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+interface TableRowProps {
+    /** Render onto the one element the children name, so a row that goes
+     *  somewhere is a real link. The row keeps its `role="row"`. */
+    asChild?: boolean;
+    /** A DIRECT <Table.Cell> child per column. Under `asChild` it is instead the
+     *  one element the row renders as, whose own children are the cells. */
+    children?: ReactNode;
+}
+declare function Row({ asChild, children }: Readonly<TableRowProps>): import("react").JSX.Element;
+export type { TableRowProps };
+export { Row };

package/types/ui/src/components/organisms/table/table-sort-cell.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import type { TableColumn } from './table-columns';
+import { type TableSort } from './table-sort';
+interface SortCellProps {
+    column: string;
+    align?: NonNullable<TableColumn['align']>;
+    sort: TableSort;
+    box: StyleProp<ViewStyle>;
+    pad: StyleProp<ViewStyle>;
+    bleed: StyleProp<ViewStyle>;
+    seam: ReactNode;
+    onLayout: ((event: LayoutChangeEvent) => void) | undefined;
+    children?: ReactNode;
+}
+declare function SortCell({ column, align, sort, box, pad, bleed, seam, onLayout, children, }: Readonly<SortCellProps>): import("react").JSX.Element;
+export { SortCell };

package/types/ui/src/components/organisms/table/table-sort.d.ts

@@ -0,0 +1,38 @@
+type SortDirection = 'asc' | 'desc';
+/**
+ * One column of the sort, and which way it runs. The array's ORDER is the
+ * priority: the first entry orders the rows, the next breaks its ties.
+ */
+interface SortColumn {
+    column: string;
+    direction: SortDirection;
+}
+type SortState = SortDirection | 'none';
+interface SortPlace {
+    direction: SortDirection;
+    rank: number;
+}
+interface TableSort {
+    columns: readonly SortColumn[];
+    press: ((column: string) => void) | null;
+}
+declare const SortContext: import("react").Context<TableSort | null>;
+declare function useTableSort(): TableSort | null;
+declare const SORT_GLYPH: {
+    readonly none: 'arrows-sort';
+    readonly asc: 'arrow-narrow-up';
+    readonly desc: 'arrow-narrow-down';
+};
+declare function sortPlace(columns: readonly SortColumn[], column: string): SortPlace | null;
+interface SortRules {
+    multiple: boolean;
+    required: boolean;
+}
+declare function nextSort(columns: readonly SortColumn[], column: string, { multiple, required }: SortRules): readonly SortColumn[];
+/** React Native has no sort claim and no screen reader on those platforms reads
+ *  one, so the rank a heading DRAWS is what reaches assistive tech there. */
+declare function sortClaim(state: SortState): {
+    'aria-sort'?: string;
+};
+export type { SortColumn, SortDirection, TableSort };
+export { nextSort, SORT_GLYPH, SortContext, sortClaim, sortPlace, useTableSort };

package/types/ui/src/components/organisms/table/table.d.ts

@@ -0,0 +1,77 @@
+import { type ReactNode } from 'react';
+import type { ResizableStorage } from '#ui/components/organisms/resizable';
+import { Cell } from './table-cell';
+import { type TableColumn } from './table-columns';
+import { type TableSectionProps, type TableVariant } from './table-context';
+import { Row } from './table-row';
+import { type SortColumn } from './table-sort';
+interface TableRootProps {
+    /** Defaults to `framed`. */
+    variant?: TableVariant;
+    /** Names the table to assistive tech. Draws nothing. */
+    label?: string;
+    /** One entry per column, in the order the cells are written. Left out, every
+     *  cell takes an equal share. */
+    columns?: readonly TableColumn[];
+    /** The columns the rows are ordered by, first key first. The table never
+     *  reorders its own rows: they are the caller's. */
+    sort?: readonly SortColumn[];
+    /** Given, every heading whose column names one becomes the sort control. */
+    onSortChange?: (next: readonly SortColumn[], details: {
+        column: string;
+    }) => void;
+    /** A press adds its column to the sort as the last tiebreak instead of
+     *  replacing it. */
+    multiple?: boolean;
+    /** The sort can never be handed back empty: a press on the last column
+     *  sorting turns it around rather than dropping it. */
+    required?: boolean;
+    /** Every heading but the last carries a seam at its trailing edge that the
+     *  reader drags, or takes with the remote, to share the width out again.
+     *  Needs `columns`. Pressing a seam twice, or holding it, gives every
+     *  column back the width it was declared with. */
+    resizable?: boolean;
+    /** Keeps the dragged widths between visits under this key, one layout per
+     *  set of columns the window draws. */
+    autoSaveId?: string;
+    /** Where `autoSaveId` writes. Defaults to `localStorage`, which is null off
+     *  the web. */
+    storage?: ResizableStorage | null;
+    /** A DIRECT <Table.Header>, <Table.Body> or <Table.Row> child. */
+    children?: ReactNode;
+}
+declare function Root({ variant, label, columns, sort, onSortChange, multiple, required, resizable, autoSaveId, storage, children, }: Readonly<TableRootProps>): import("react").JSX.Element;
+declare function Header({ children }: Readonly<TableSectionProps>): import("react").JSX.Element;
+declare function Body({ children }: Readonly<TableSectionProps>): import("react").JSX.Element;
+/**
+ * Rows of the same shape.
+ *
+ * ```tsx
+ * <Table.Root label="Modules" columns={[{ column: 'id' }, { width: 90 }]}>
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.Cell>Module</Table.Cell>
+ *       <Table.Cell>Port</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>tv.kroma.torrents</Table.Cell>
+ *       <Table.Cell>41310</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table.Root>
+ * ```
+ */
+declare const Table: {
+    Root: typeof Root;
+    Header: typeof Header;
+    Body: typeof Body;
+    Row: typeof Row;
+    Cell: typeof Cell;
+};
+export type { TableCellProps } from './table-cell';
+export type { TableRowProps } from './table-row';
+export type { SortDirection } from './table-sort';
+export type { SortColumn, TableColumn, TableRootProps, TableSectionProps, TableVariant };
+export { Table };

package/types/ui/src/components/organisms/toast/index.d.ts

@@ -0,0 +1 @@
+export * from './toast';

package/types/ui/src/components/organisms/toast/toast-card.d.ts

@@ -0,0 +1,8 @@
+import type { ToastOptions } from './toast';
+declare function ToastCard({ entry, stay, from, onDone, }: Readonly<{
+    entry: ToastOptions;
+    stay: number;
+    from: number;
+    onDone: () => void;
+}>): import("react").JSX.Element;
+export { ToastCard };

package/types/ui/src/components/organisms/toast/toast.d.ts

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+import type { IconName } from '#ui/components/atoms/icon';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastOptions {
+    /** The line to read. Already translated - the kit does not know your catalog. */
+    message: string;
+    /** A quieter second line: who, or what for. */
+    detail?: string;
+    /** What sits in the leading well: a glyph by name, or a node - an <Avatar>,
+     *  say, when the notice is about a PERSON rather than an event.
+     *
+     *  The node half excludes bare strings on purpose. `ReactNode` admits them,
+     *  which swallowed `IconName` into it (every glyph name IS a string) and left
+     *  the union meaning nothing more than `ReactNode` - no autocomplete, and a
+     *  typo'd glyph name rendered as literal text in the well instead of failing
+     *  to compile. */
+    icon?: IconName | Exclude<ReactNode, string>;
+    /** Milliseconds on screen. Defaults to {@link DEFAULT_MS}. */
+    duration?: number;
+    /** `success` tints the well; `plain` is the default neutral. */
+    tone?: 'plain' | 'success' | 'accent';
+    /** Beats the <Toaster/>'s own, for the one notice that belongs somewhere
+     *  else. Read when the notice appears and kept: a notice never moves under
+     *  a viewer who is reading it. */
+    position?: ToastPosition;
+}
+/**
+ * Say something. No-op when no <Toaster/> is mounted, so a shell that has not
+ * opted in simply stays quiet instead of throwing at the call site.
+ */
+export declare function toast(options: ToastOptions): void;
+export interface ToasterProps {
+    /** Where notices sit unless one names its own. TVs read top-right, next to
+     * the status cluster they are usually about; phones and browsers expect the
+     * bottom. */
+    position?: ToastPosition;
+    /** Inset from the screen edge, in px. The edges can differ, which both form
+     * factors need: a television lines its notices up with the top bar's gutter
+     * but must clear the bar itself, and a phone's notch is not its home
+     * indicator (React Native reports neither, so a phone shell passes its own
+     * safe-area insets here, or mounts the host inside its safe frame). */
+    inset?: number | {
+        x?: number;
+        y?: number;
+        top?: number;
+        bottom?: number;
+    };
+}
+/**
+ * Mount once, as a child of the view that IS the screen: the host is a
+ * full-bleed layer over its parent, so it pins to the viewport in an app and
+ * stays inside the stage in the workbench, with no window portal either way.
+ */
+export declare function Toaster({ position, inset, }: Readonly<ToasterProps>): import("react").JSX.Element;

package/types/ui/src/components/organisms/virtual/clip.d.ts

@@ -0,0 +1,25 @@
+export declare const FOCUS_BLEED = 32;
+export declare const OVERSCAN = 2;
+export declare const clipStyles: import("../../../core/styles").Styles<{
+    readonly clip: {
+        readonly absolute: true;
+        readonly top: number;
+        readonly right: number;
+        readonly bottom: number;
+        readonly left: number;
+        readonly p: 32;
+        readonly overflow: "hidden";
+        readonly pointerEvents: "box-none";
+    };
+    readonly column: {
+        readonly absolute: true;
+        readonly top: 0;
+        readonly right: number;
+        readonly bottom: number;
+        readonly left: number;
+        readonly pr: 32;
+        readonly pb: 32;
+        readonly pl: 32;
+        readonly overflow: "hidden";
+    };
+}>;

package/types/ui/src/components/organisms/virtual/index.d.ts

@@ -0,0 +1,2 @@
+export * from './virtual-grid';
+export * from './virtual-rail';

package/types/ui/src/components/organisms/virtual/moving-strip.d.ts

@@ -0,0 +1,16 @@
+import type { ReactElement } from 'react';
+import type { ViewStyle } from 'react-native';
+type Axis = 'x' | 'y';
+interface MovingStripProps {
+    /** How far the strip has travelled, in px along `axis`. The content is
+     *  translated by the NEGATIVE of it, so a growing offset walks it out of view. */
+    offset: number;
+    axis: Axis;
+    /** Travel there with no transition. True while a gesture drives the strip, so
+     *  it tracks the input rather than chasing it. */
+    still?: boolean;
+    style?: ViewStyle;
+    children: ReactElement;
+}
+declare function MovingStrip({ offset, axis, still, style, children }: Readonly<MovingStripProps>): import("react").JSX.Element;
+export { MovingStrip };

package/types/ui/src/components/organisms/virtual/strip-motion.d.ts

@@ -0,0 +1,4 @@
+export declare const SETTLE_MS: 150;
+export declare const EASE_CSS: string;
+export declare const EASE_NATIVE: import("react-native").EasingFunction;
+export declare const FADE: import("../../../core/types").AnyStyle;

package/types/ui/src/components/organisms/virtual/virtual-grid/ahead-rows.d.ts

@@ -0,0 +1,4 @@
+import type { RowMetrics, RowWindow } from './grid-rows';
+/** Rows of tiles past the mounted window in the direction of travel, nearest
+ *  first: one page plus a row, never a header. */
+export declare function aheadRows(shown: RowWindow, down: boolean, metrics: RowMetrics): number[];

package/types/ui/src/components/organisms/virtual/virtual-grid/grid-row.d.ts

@@ -0,0 +1,25 @@
+import { type NodeHandle } from '@kromatv/spatial-nav/react';
+import { type ReactElement } from 'react';
+import { type ViewStyle } from 'react-native';
+interface GridRowProps<T> {
+    data: readonly T[];
+    /** Where in the data this row's first tile is. */
+    first: number;
+    columns: number;
+    /** This row's slot in the navigator, counting a header as row 0. The row's
+     *  place in the DATA, never in the mounted window: the navigator orders
+     *  siblings by the slot they declare, so a window-relative one would renumber
+     *  every row each time the window slid. */
+    row: number;
+    top: number;
+    style: ViewStyle;
+    renderCell: (item: T, index: number) => ReactElement;
+    onNode: (row: number, node: NodeHandle | null) => void;
+}
+declare function GridRowImpl<T>({ data, first, columns, row, top, style, renderCell, onNode, }: Readonly<GridRowProps<T>>): import("react").JSX.Element;
+/** One row of a `<VirtualGrid>`, positioned at its own offset down the strip.
+ *  Memoised on purpose: the grid re-renders on every focus move, and a row
+ *  whose tiles have not changed must not rebuild them. */
+declare const GridRow: typeof GridRowImpl;
+export type { GridRowProps };
+export { GridRow };

package/types/ui/src/components/organisms/virtual/virtual-grid/grid-rows.d.ts

@@ -0,0 +1,60 @@
+/** A windowed grid's rows, as its one outside caller sees them. */
+export interface GridRows {
+    /** Put the focus on a row, mounting it first where the window does not hold
+     *  it yet. */
+    focus: (row: number) => void;
+    /** The row the focus is on. */
+    focusedRow: number;
+}
+export interface RowSpec {
+    /** Rows of tiles, not counting a header. */
+    rows: number;
+    /** A row's height plus the gap after it. */
+    pitch: number;
+    /** The gap inside `pitch`. The bottom row on screen has none after it, so a
+     *  viewport holds one row more than its height divides into. */
+    gap: number;
+    header: boolean;
+    /** The header's own height, which need not be a row's. */
+    headerSize: number;
+    /** The height of the box that clips the strip. */
+    viewport: number;
+}
+export interface RowMetrics {
+    /** Rows in the list, header included. */
+    count: number;
+    headerRows: number;
+    pitch: number;
+    headerSize: number;
+    /** Whole rows the viewport shows, at least one. Also the page the strip
+     *  moves by, so a row that is on screen is a row a press can reach without
+     *  the list moving. */
+    visible: number;
+    /** Everything the strip holds, in px. */
+    height: number;
+}
+export interface RowWindow {
+    start: number;
+    end: number;
+}
+export declare function rowMetrics({ rows, pitch, gap, header, headerSize, viewport, }: RowSpec): RowMetrics;
+/** The top of a row, in px from the strip's origin. */
+export declare function rowTop(row: number, metrics: RowMetrics): number;
+/** The row parked at the top of the viewport while `focused` holds the focus.
+ *  Whole pages, so a press that stays on the page moves the ring and leaves the
+ *  tiles where they are. */
+export declare function pageRow(focused: number, metrics: RowMetrics): number;
+/** How far the strip has travelled while `focused` holds the focus. */
+export declare function stripOffset(focused: number, metrics: RowMetrics): number;
+/** The same offset for a FRACTIONAL row, which is where a wheel leaves the
+ *  strip mid-gesture. Read off the same page-aligned offsets, so letting go
+ *  glides on from where the wheel stopped instead of hauling the strip back
+ *  through a page. */
+export declare function freeOffset(fraction: number, metrics: RowMetrics): number;
+/** The rows to mount around `focused`, sliding one row per press so a held D-pad mounts a row at a time. */
+export declare function rowWindow(focused: number, metrics: RowMetrics, overscan: number): RowWindow;
+/** The rows to mount while the window trails the focus: the window around
+ *  `settled`, stretched over the page `focused` is on and the row either side
+ *  of it, so the row a press moves to exists before the trailing window has
+ *  caught up. */
+export declare function catchUpWindow(focused: number, settled: number, metrics: RowMetrics, overscan: number): RowWindow;

package/types/ui/src/components/organisms/virtual/virtual-grid/index.d.ts

@@ -0,0 +1 @@
+export * from './virtual-grid';

package/types/ui/src/components/organisms/virtual/virtual-grid/use-prefetch-rows.d.ts

@@ -0,0 +1,13 @@
+import type { RowMetrics, RowWindow } from './grid-rows';
+interface PrefetchRowsArgs<T> {
+    data: readonly T[];
+    art: ((item: T, width: number) => string | null) | undefined;
+    focusedRow: number;
+    shown: RowWindow;
+    metrics: RowMetrics;
+    columns: number;
+    cell: number;
+}
+/** Prefetches the artwork of the rows the focus is travelling towards. */
+export declare function usePrefetchRows<T>({ data, art, focusedRow, shown: { start, end }, metrics, columns, cell, }: Readonly<PrefetchRowsArgs<T>>): void;
+export {};

package/types/ui/src/components/organisms/virtual/virtual-grid/use-wheel-rows.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+import type { View } from 'react-native';
+import type { GridRows } from './grid-rows';
+/**
+ * Returns the fractional row index to render the strip at, or null when no
+ * gesture is running.
+ */
+export declare function useWheelScroll(viewport: RefObject<View | null>, rows: GridRows, lastRow: number, headerRows: number, rowPitch: number): number | null;