@kromatv/sdk 0.1.40-canary.0

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-columns.d.ts

@@ -0,0 +1,32 @@
+import type { ViewStyle } from 'react-native';
+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. */
+    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): ViewStyle;
+declare function breakpointMask(columns: readonly TableColumn[]): number;
+declare function drawn(column: TableColumn | undefined, step: number): boolean;
+export type { TableColumn, TableGrid };
+export { breakpointMask, columnBox, drawn, FILL, GridContext, NO_COLUMNS, useTableGrid };

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

@@ -0,0 +1,17 @@
+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;
+}
+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-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,14 @@
+import type { ReactNode } from 'react';
+import type { 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>;
+    children?: ReactNode;
+}
+declare function SortCell({ column, align, sort, box, pad, 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,65 @@
+import { type ReactNode } from 'react';
+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;
+    /** A DIRECT <Table.Header>, <Table.Body> or <Table.Row> child. */
+    children?: ReactNode;
+}
+declare function Root({ variant, label, columns, sort, onSortChange, multiple, required, 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/grid-row.d.ts

@@ -0,0 +1,25 @@
+import { type NodeHandle } from '@kroma/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,57 @@
+/** 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: the page on screen plus `overscan` either side, so the
+ *  row a press moves to already exists. The navigator can only reach a node
+ *  that is registered. */
+export declare function rowWindow(focused: 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-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;

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

@@ -0,0 +1,54 @@
+import { type ReactElement } from 'react';
+import { type ViewStyle } from 'react-native';
+interface VirtualGridProps<T> {
+    data: readonly T[];
+    /** The narrowest a tile may be. The grid fits as many as the room allows, the
+     *  way `auto-fill` does in CSS and `<Grid min>` does for a static grid. */
+    min?: number;
+    /** A fixed column count, for a design that demands one whatever the width.
+     *  Wins over `min`. */
+    columns?: number;
+    /** Tile height ÷ tile width (a 2:3 poster is 1.5), which with the measured
+     *  cell width is the row pitch. */
+    ratio?: number;
+    /** An explicit tile height in px, for tiles that are not `ratio`-shaped. Wins
+     *  over `ratio`; `rowGap` is added to it the same way. */
+    itemHeight?: number;
+    /** Between tiles in a row, and what the column maths removes. */
+    gap?: number;
+    /** Between rows. Defaults to `gap`. */
+    rowGap?: number;
+    /** Inset of the rows. Not of the viewport, which is what clips: padding there
+     *  would inset the clip and shave the rows. */
+    px?: number;
+    /** Room above the first row, for a focused tile's ring and scale: the strip
+     *  parks the top row at the content origin and the clip is flush there. */
+    pt?: number;
+    /** The box width to assume until the grid has measured its own: the design
+     *  width. Without one the first frame has no columns to draw. */
+    width?: number;
+    /** Given the tile's index and the pixel width of the cell it lands in, so a
+     *  tile can size its own artwork request to the column it is drawn at. */
+    renderItem: (item: T, index: number, width: number) => ReactElement;
+    /** Scrolls with the first row; needs `headerHeight` set alongside it. */
+    header?: ReactElement;
+    headerHeight?: number;
+    /** The viewport that clips. Defaults to filling its parent; give it a bounded
+     *  height either way, or nothing scrolls. */
+    style?: ViewStyle;
+    onEndReached?: () => void;
+    /** Opens the grid on this ROW (not item index) with focus, since the row is
+     *  not mounted yet for `autoFocus` to reach. Read once, on mount. */
+    initialIndex?: number;
+}
+/**
+ * A vertically scrolling grid of auto-filled tiles, rendering only the rows near
+ * the viewport.
+ *
+ * The strip is translated rather than scrolled, so nothing clips without this
+ * component's `clipStyles.column` box.
+ */
+declare function VirtualGrid<T>({ data, min, columns, ratio, itemHeight, gap, rowGap, px, pt, width, renderItem, header, headerHeight, style, onEndReached, initialIndex, }: Readonly<VirtualGridProps<T>>): import("react").JSX.Element;
+export type { GridRows } from './grid-rows';
+export type { VirtualGridProps };
+export { VirtualGrid };

package/types/ui/src/components/organisms/virtual/virtual-rail/edge-scroll.d.ts

@@ -0,0 +1,38 @@
+import type { ViewStyle } from 'react-native';
+interface EdgeScrollInput {
+    /** Where the row sits now, in px from the start (always ≥ 0). */
+    offset: number;
+    index: number;
+    /** Item pitch: the tile's own size plus the gap after it. */
+    itemSize: number;
+    viewport: number;
+    count: number;
+    /** Look-ahead to keep past the selection, in px. One tile reads best. */
+    margin: number;
+}
+/**
+ * The offset after the selection moved to `index`. Returns `offset` unchanged
+ * whenever the selection is comfortably inside the row, which is what makes
+ * the highlight, rather than the content, the thing that moves.
+ */
+declare function edgeScrollOffset({ offset, index, itemSize, viewport, count, margin, }: EdgeScrollInput): number;
+/** How far the row can travel: everything it holds, less what fits. The one
+ * definition the clamp bound and the snap bound both use, so they can't
+ * disagree and let an offset drift off the pitch grid. */
+declare function maxOffset(count: number, pitch: number, room: number): number;
+/**
+ * The horizontal padding a content style spends, in pixels. Percentages and
+ * other non-numeric lengths are ignored rather than guessed at, and longhands
+ * win over the shorthand, matching React Native's own precedence.
+ */
+declare function horizontalInset(style: ViewStyle | undefined): number;
+/**
+ * The pitch that fits whole tiles into the row: rounds `itemWidth` to the
+ * nearest whole count of columns and shares the viewport out between them, so
+ * the last tile is never sliced by the edge. Always a whole number of pixels:
+ * a fractional pitch puts tile boundaries on sub-pixels, which Chrome
+ * rounds independently into hairline seams.
+ */
+declare function fitPitch(itemWidth: number, viewport: number): number;
+export type { EdgeScrollInput };
+export { edgeScrollOffset, fitPitch, horizontalInset, maxOffset };

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

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

package/types/ui/src/components/organisms/virtual/virtual-rail/rail-edge.d.ts

@@ -0,0 +1,11 @@
+export declare function edgeWidth(row: number): number;
+/** One end of the row: the fade over the row's last tiles, plus the pointer's
+ *  paging control. Uses a plain `Pressable`, not `<Focusable>`, so the arrow is
+ *  never a stop in the D-pad's own path through the row. */
+export declare function RailEdge({ side, shown, arrow, onPress, width, }: Readonly<{
+    side: 'start' | 'end';
+    shown: boolean;
+    arrow: boolean;
+    onPress: () => void;
+    width: number;
+}>): import("react").JSX.Element;

package/types/ui/src/components/organisms/virtual/virtual-rail/use-key-grace.d.ts

@@ -0,0 +1,6 @@
+import { type RefObject } from 'react';
+declare const KEY_GRACE_MS = 400;
+/** When a direction key was last pressed, so a row can tell a keyed focus move
+ *  from one a wandering pointer caused. */
+declare function useKeyGrace(scoped: boolean): RefObject<number>;
+export { KEY_GRACE_MS, useKeyGrace };

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

@@ -0,0 +1,19 @@
+import { type ReactElement } from 'react';
+import { type ViewStyle } from 'react-native';
+interface VirtualRailProps<T> {
+    data: readonly T[];
+    /** Tile pitch in pixels: the tile's own width PLUS the gap after it, stretched
+     *  so a whole number of tiles fills the row. Tiles fill their cell. */
+    itemWidth: number;
+    renderItem: (item: T, index: number) => ReactElement;
+    gap?: number;
+    style?: ViewStyle;
+    contentStyle?: ViewStyle;
+    onEndReached?: () => void;
+    /** Look-ahead kept past the selection, in TILES, before the row starts moving. */
+    edgeMargin?: number;
+    arrows?: boolean;
+}
+declare function VirtualRail<T>({ data, itemWidth, renderItem, gap, style, contentStyle, onEndReached, edgeMargin, arrows, }: Readonly<VirtualRailProps<T>>): import("react").JSX.Element;
+export type { VirtualRailProps };
+export { VirtualRail };

package/types/ui/src/components/templates/index.d.ts

@@ -0,0 +1,2 @@
+export type { TvStageProps } from './tv-stage';
+export { TvStage } from './tv-stage';

package/types/ui/src/components/templates/tv-stage/index.d.ts

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

package/types/ui/src/components/templates/tv-stage/tv-stage.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+interface TvStageProps {
+    children: ReactNode;
+}
+declare function TvStage({ children }: Readonly<TvStageProps>): import("react").JSX.Element;
+export type { TvStageProps };
+export { TvStage };

package/types/ui/src/core/atomic/index.d.ts

@@ -0,0 +1,5 @@
+export type { RuleEntry } from './inject';
+export { injectRules } from './inject';
+export { mergeStatic, staticStyle } from './register';
+export type { StaticStates } from './static-style';
+export { isStaticStyle } from './static-style';

package/types/ui/src/core/atomic/inject.d.ts

@@ -0,0 +1,3 @@
+/** A rule and the priority group it belongs to; lower groups paint first. */
+export type RuleEntry = readonly [group: number, css: string];
+export declare function injectRules(entries: readonly RuleEntry[]): void;

package/types/ui/src/core/atomic/register.d.ts

@@ -0,0 +1,13 @@
+import { type StaticStates } from './static-style';
+/**
+ * A style the build compiled, made live: marked, frozen and registered with
+ * the renderer, which compiles it to the classes the build emitted and inserts
+ * nothing. What the build writes in place of a static declaration.
+ */
+export declare function staticStyle(values: Record<string, unknown>, states?: StaticStates): Record<string, unknown>;
+/**
+ * Static layers merged into one, last wins per property, as a recipe merges
+ * its cascade. Every layer has to be static: every rule the result needs is
+ * then already in the sheet, so the merge can be registered the same way.
+ */
+export declare function mergeStatic(layers: readonly object[]): Record<string, unknown>;

package/types/ui/src/core/atomic/static-style.d.ts

@@ -0,0 +1,8 @@
+import type { SvStateName } from '#ui/core/states';
+export type StaticStates = Partial<Record<SvStateName, Record<string, unknown>>>;
+export declare function isStaticStyle(value: unknown): value is Record<string, unknown>;
+/** The interaction-state layers a static recipe layer carries. */
+export declare function staticStates(style: Record<string, unknown>): StaticStates;
+/** Marks a style as already in the sheet. Non-enumerable, so a key walk, a
+ *  spread, `flatten` and the renderer's own compiler see only the longhands. */
+export declare function markStatic(style: Record<string, unknown>, states?: StaticStates): void;