@tensor_1/react 2.10.0 → 2.12.0

package/dist/index.d.cts

@@ -1,9 +1,9 @@
 import * as react from 'react';
-import { RefObject, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, AriaAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, HTMLAttributes, AnchorHTMLAttributes, TdHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes } from 'react';
+import { RefObject, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, CSSProperties, HTMLAttributes, AnchorHTMLAttributes, TdHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes } from 'react';
 
 declare function cx(...args: (string | false | null | undefined | 0)[]): string;
 
-declare function useDialog(open: boolean, onClose?: () => void): React.RefObject<HTMLDialogElement>;
+declare function useDialog(open: boolean): React.RefObject<HTMLDialogElement>;
 
 /**
  * uix table engine — framework-agnostic, dependency-free logic for data grids.
@@ -114,11 +114,6 @@ interface UseTableResult<T> {
     pinned: ReadonlySet<string>;
     /** header select-all tri-state over the current derived rows. */
     selectAll: SelectAllState;
-    /**
-     * Screen-reader status text reflecting the latest change — "Sorted by {field}, {dir}",
-     * "{n} results" (filter/search), "{n} selected". Pass to `<TableWrap announcement>` (UIX-A11Y-2).
-     */
-    announcement: string;
     /** cycle a column's sort; pass additive (⇧-click) to keep it as a secondary key. */
     toggleSort: (field: string, additive?: boolean) => void;
     setSort: (keys: SortKey[]) => void;
@@ -145,6 +140,30 @@ interface UseTableResult<T> {
  */
 declare function useTable<T extends Row>(data: readonly T[], options?: UseTableOptions): UseTableResult<T>;
 
+interface UseVirtualRowsOptions {
+    /** Fixed rendered row height in pixels. */
+    rowHeight: number;
+    /** Rows rendered beyond each viewport edge. Default: 6. */
+    overscan?: number;
+    /** Render all rows at or below this count. Default: 100. */
+    threshold?: number;
+}
+interface UseVirtualRowsResult<T> {
+    /** Attach to the scrolling TableWrap. */
+    containerRef: RefObject<HTMLDivElement>;
+    rows: readonly T[];
+    startIndex: number;
+    padTop: number;
+    padBottom: number;
+    totalHeight: number;
+    virtualized: boolean;
+}
+/**
+ * Owns scroll/resize observation and exposes the small visible row window.
+ * Consumers render padTop/padBottom spacer rows inside their existing tbody.
+ */
+declare function useVirtualRows<T>(rows: readonly T[], { rowHeight, overscan, threshold }: UseVirtualRowsOptions): UseVirtualRowsResult<T>;
+
 /**
  * uix overlay positioning — framework-agnostic, dependency-free anchored placement.
  *
@@ -246,19 +265,8 @@ interface InputGroupProps {
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
     className?: string;
-    /** Injected by `<Field>` when it wraps the group; forwarded onto the child control. */
-    id?: string;
-    'aria-describedby'?: string;
-    'aria-invalid'?: AriaAttributes['aria-invalid'];
-    'aria-required'?: AriaAttributes['aria-required'];
 }
-/**
- * Icon-adorned wrapper for a child `<Input>`. The control is passed as `children`, so
- * `<Field>`'s injected `id`/`aria-*` land on this wrapper — they're forwarded onto the
- * single child element (the child's own props win) so label/message association survives
- * the extra div (UIX-A11Y-3).
- */
-declare function InputGroup({ children, leadingIcon, trailingIcon, className, id, 'aria-describedby': describedBy, 'aria-invalid': invalid, 'aria-required': required, }: InputGroupProps): react.JSX.Element;
+declare function InputGroup({ children, leadingIcon, trailingIcon, className }: InputGroupProps): react.JSX.Element;
 
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     invalid?: boolean;
@@ -283,10 +291,8 @@ declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttri
 interface RadioGroupProps {
     children: ReactNode;
     className?: string;
-    /** Group name; when set the group renders as fieldset/legend so it's announced with each radio. */
-    label?: ReactNode;
 }
-declare function RadioGroup({ children, className, label }: RadioGroupProps): react.JSX.Element;
+declare function RadioGroup({ children, className }: RadioGroupProps): react.JSX.Element;
 
 interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     label?: ReactNode;
@@ -305,25 +311,28 @@ interface FieldProps {
 }
 declare function Field({ label, hint, error, success, required, children, className, htmlFor }: FieldProps): react.JSX.Element;
 
-interface ModalProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
+interface ModalProps {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
 }
-declare function Modal({ open, onClose, title, children, footer, className, ...rest }: ModalProps): react.JSX.Element;
+declare function Modal({ open, onClose, title, children, footer, className, style }: ModalProps): react.JSX.Element;
 
-interface DrawerProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
+interface DrawerProps {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
+    className?: string;
 }
-declare function Drawer({ open, onClose, title, children, footer, className, ...rest }: DrawerProps): react.JSX.Element;
+declare function Drawer({ open, onClose, title, children, footer, className }: DrawerProps): react.JSX.Element;
 
-interface PeekProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
+interface PeekProps {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
@@ -332,25 +341,22 @@ interface PeekProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     onNavPrev?: () => void;
     onNavNext?: () => void;
     hint?: string;
+    className?: string;
 }
-declare function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className, onClick, ...rest }: PeekProps): react.JSX.Element;
+declare function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className }: PeekProps): react.JSX.Element;
 
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
-    /** Element for the title — pick a real heading to slot the card into the page outline (UIX-A11Y-4). Default `div` keeps legacy rendering. */
-    titleAs?: 'h2' | 'h3' | 'h4' | 'div';
     subtitle?: ReactNode;
     headerAction?: ReactNode;
     footer?: ReactNode;
     children?: ReactNode;
 }
-declare function Card({ title, titleAs: TitleTag, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
+declare function Card({ title, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
 
 interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     eyebrow?: ReactNode;
     title: ReactNode;
-    /** Heading level for the title — drop to `h2` when the page already owns an `h1` (UIX-A11Y-4). */
-    as?: 'h1' | 'h2';
     /** Supporting copy under the title. */
     subtitle?: ReactNode;
     /** Right-aligned action area (buttons, menus). */
@@ -360,7 +366,7 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  * Page header — eyebrow / title / subtitle + actions row, over `.uix-page-header`.
  * The hairline + breathing room below come from the component CSS.
  */
-declare function PageHeader({ eyebrow, title, subtitle, actions, as: TitleTag, className, ...props }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ eyebrow, title, subtitle, actions, className, ...props }: PageHeaderProps): react.JSX.Element;
 
 interface DetailLayoutProps extends HTMLAttributes<HTMLDivElement> {
     /** The narrow trailing column (record meta, side panels). */
@@ -447,18 +453,6 @@ interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
     disabled?: boolean;
 }
 declare function Tab({ value, children, disabled, className, onClick, ...props }: TabProps): react.JSX.Element;
-interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
-    /** The owning `<Tab>`'s value — the panel renders only while that tab is selected. */
-    value: string;
-    children?: ReactNode;
-}
-/**
- * The tabpanel paired with a `<Tab>` by `value` (UIX-A11Y-2): labelled by its tab,
- * `tabIndex 0` so Tab from the tablist lands in the content, rendered only while
- * selected. Place it as a direct child of `<Tabs>` — it is hoisted out of the tablist —
- * or anywhere the Tabs context reaches.
- */
-declare function TabPanel({ value, children, ...props }: TabPanelProps): react.JSX.Element | null;
 
 type ShellNav = 'full' | 'rail' | 'hidden';
 interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
@@ -476,13 +470,11 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
     onExitFocus?: () => void;
     /** Drop the content gutter so a genuinely wide table runs edge-to-edge. */
     mainBleed?: boolean;
-    /** id given to `<main>` and targeted by the skip link. Override on collision (UIX-A11Y-2). */
-    mainId?: string;
     sidebar?: ReactNode;
     topbar?: ReactNode;
     children?: ReactNode;
 }
-declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, mainId, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
+declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
 
 interface SidebarProps extends HTMLAttributes<HTMLElement> {
     collapsed?: boolean;
@@ -616,10 +608,8 @@ declare function Alert({ tone, title, icon, children, className, ...props }: Ale
 interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
     size?: 'md' | 'lg';
     accent?: boolean;
-    /** Announced loading text (default "Loading…"). */
-    label?: string;
 }
-declare function Spinner({ size, accent, label, className, ...props }: SpinnerProps): react.JSX.Element;
+declare function Spinner({ size, accent, className, ...props }: SpinnerProps): react.JSX.Element;
 
 type ToastTone = 'success' | 'danger' | 'info';
 interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
@@ -637,14 +627,9 @@ interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
 declare function Toaster({ children, className, ...props }: ToasterProps): react.JSX.Element;
 
 interface TableWrapProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Polite live-region text for table state changes — "Sorted by …", "N results",
-     * "N selected". Pass `useTable().announcement` straight through (UIX-A11Y-2).
-     */
-    announcement?: string;
     children?: ReactNode;
 }
-declare function TableWrap({ announcement, children, className, ...props }: TableWrapProps): react.JSX.Element;
+declare const TableWrap: react.ForwardRefExoticComponent<TableWrapProps & react.RefAttributes<HTMLDivElement>>;
 type TableDensity = 'compact' | 'standard' | 'comfortable';
 type SortDirection = 'ascending' | 'descending' | 'none';
 interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
@@ -693,11 +678,9 @@ interface RowActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 declare function RowAction({ children, className, type, ...props }: RowActionProps): react.JSX.Element;
 interface ExpandToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     expanded?: boolean;
-    /** id of the detail row this toggle controls → `aria-controls` (UIX-A11Y-2). */
-    controls?: string;
 }
 /** Chevron button that expands/collapses an inline detail row. */
-declare function ExpandToggle({ expanded, controls, className, type, ...props }: ExpandToggleProps): react.JSX.Element;
+declare function ExpandToggle({ expanded, className, type, ...props }: ExpandToggleProps): react.JSX.Element;
 /** Emphasised primary cell text. */
 declare function CellStrong({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
 /** Secondary line under a primary cell value (muted, meta size). */
@@ -739,10 +722,8 @@ interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
     max?: number;
     /** Continuous slide animation when the amount of work is unknown. */
     indeterminate?: boolean;
-    /** Accessible name — rendered as `aria-label` (an explicit `aria-label` prop wins). */
-    label?: string;
 }
-declare function Progress({ value, max, indeterminate, label, className, ...props }: ProgressProps): react.JSX.Element;
+declare function Progress({ value, max, indeterminate, className, ...props }: ProgressProps): react.JSX.Element;
 
 /** Fill color tone for the meter bar. Defaults to `success` (green). */
 type MeterTone = 'success' | 'warning' | 'danger' | 'attention' | 'overdue';
@@ -751,11 +732,9 @@ interface MeterProps extends HTMLAttributes<HTMLDivElement> {
     value?: number;
     /** Threshold tone applied via `data-tone` on the fill element. `success` is the implicit default (no attribute). */
     tone?: MeterTone;
-    /** Accessible name — rendered as `aria-label` (an explicit `aria-label` prop wins). */
-    label?: string;
 }
 /** Horizontal utilization / threshold bar backed by `.uix-meter`. */
-declare function Meter({ value, tone, label, className, ...props }: MeterProps): react.JSX.Element;
+declare function Meter({ value, tone, className, ...props }: MeterProps): react.JSX.Element;
 
 interface StatTrend {
     direction: 'up' | 'down';
@@ -785,9 +764,7 @@ interface TooltipProps extends HTMLAttributes<HTMLSpanElement> {
  * Tooltip whose bubble renders in the top layer via the native Popover API, so it
  * escapes any `overflow: hidden/scroll` ancestor that would clip the old CSS-only
  * `[data-uix-tip]` tooltip (UIX-FIX-02). Positioned by the shared overlay engine
- * (flip/shift), shown on hover and keyboard focus, dismissed on blur or Escape
- * (document-level, per WCAG 1.4.13), and hoverable: the bubble stays open while
- * the pointer is over it (UIX-A11Y-1).
+ * (flip/shift), shown on hover and keyboard focus, dismissed on blur or Escape.
  */
 declare function Tooltip({ label, placement, className, children, ...props }: TooltipProps): react.JSX.Element;
 
@@ -821,11 +798,9 @@ declare function Skeleton({ variant, width, height, className, style, ...props }
 interface LoadingStateProps extends HTMLAttributes<HTMLDivElement> {
     /** Number of skeleton rows to render. */
     rows?: number;
-    /** Announced loading text (default "Loading"). */
-    label?: string;
 }
 /** A stack of skeleton rows for list/section loading. `role="status"`. */
-declare function LoadingState({ rows, label, className, ...props }: LoadingStateProps): react.JSX.Element;
+declare function LoadingState({ rows, className, ...props }: LoadingStateProps): react.JSX.Element;
 
 interface LabelProps extends HTMLAttributes<HTMLSpanElement> {
     /** Any CSS color or a `--uix-chart-*` var; sets `--label-color`. */
@@ -865,11 +840,7 @@ declare function UserChip({ avatar, name, sub, className, children, ...props }:
 interface CommentsProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
-/**
- * Comment thread container over `.uix-comments`. role="log" is an implicit polite
- * live region: comments appended after initial render are announced, the initial
- * list is not (UIX-A11Y-3). Pass `role` to override.
- */
+/** Comment thread container over `.uix-comments`. */
 declare function Comments({ children, className, ...props }: CommentsProps): react.JSX.Element;
 interface CommentProps extends HTMLAttributes<HTMLDivElement> {
     /** Usually an `<Avatar />` (the grid reserves the leading column). */
@@ -883,8 +854,6 @@ declare function Comment({ avatar, author, meta, children, className, ...props }
 
 interface ComposerProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
-    /** Accessible name for the child `<textarea>`; applied as its `aria-label`. */
-    label?: string;
 }
 /**
  * Composer surface over `.uix-composer` — a single box that owns the
@@ -892,13 +861,8 @@ interface ComposerProps extends HTMLAttributes<HTMLDivElement> {
  * `<ComposerBar>` inside; the descendant `textarea` picks up the composer's
  * padding/typography automatically, so the input never reads as a second
  * nested box.
- *
- * A placeholder is not an accessible name, so the composer labels a bare child
- * `<textarea>` with `label` (default "Add a comment"); a textarea that brings its
- * own `aria-label`/`aria-labelledby` — or an `id` (likely tied to an external
- * `<label htmlFor>`) — is left untouched (UIX-A11Y-3).
  */
-declare function Composer({ children, className, label, ...props }: ComposerProps): react.JSX.Element;
+declare function Composer({ children, className, ...props }: ComposerProps): react.JSX.Element;
 interface ComposerBarProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
@@ -930,12 +894,12 @@ interface SegmentedOptionProps extends Omit<ButtonHTMLAttributes<HTMLButtonEleme
  */
 declare function SegmentedOption({ value, children, className, onClick, ...props }: SegmentedOptionProps): react.JSX.Element;
 
-interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
-/** Activity timeline container over `.uix-timeline`. Ordered list so AT reads entry count + sequence (UIX-A11Y-4). */
+/** Activity timeline container over `.uix-timeline`. */
 declare function Timeline({ children, className, ...props }: TimelineProps): react.JSX.Element;
-interface TimelineItemProps extends HTMLAttributes<HTMLLIElement> {
+interface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Custom rail node — an icon puck, an avatar, a tinted dot. Defaults to the
      * accent `.uix-timeline__node` dot. Supply this to make a heterogeneous feed
@@ -999,9 +963,7 @@ interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
  * ⌘K command palette surface over `.uix-cmdk`. Presentational: mount it inside a
- * Modal/Popover and wire search + keyboard selection in the consumer. The input is
- * a combobox over the listbox of `CommandItem`s; spreads override every default, so
- * consumers already passing their own roles/labels keep working.
+ * Modal/Popover and wire search + keyboard selection in the consumer.
  */
 declare function CommandPalette({ inputProps, children, className, ...props }: CommandPaletteProps): react.JSX.Element;
 interface CommandGroupProps {
@@ -1018,27 +980,17 @@ interface CommandItemProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 /** A single command row over `.uix-cmdk__item`. */
-declare function CommandItem({ icon, shortcut, active, children, className, id, ...props }: CommandItemProps): react.JSX.Element;
+declare function CommandItem({ icon, shortcut, active, children, className, ...props }: CommandItemProps): react.JSX.Element;
 
 interface InboxProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Which pane a narrow viewport (<700px) shows: 'list' (default, matches the old
-     * behaviour) or 'detail'. Consumers should render a Back control in the detail pane
-     * on narrow viewports to return to the list (UIX-A11Y-2).
-     */
-    view?: 'list' | 'detail';
     children?: ReactNode;
 }
 /** Two-pane inbox master-detail container backed by `.uix-inbox`. Place `<InboxList>` and `<InboxDetail>` as children. */
-declare function Inbox({ view, children, className, ...props }: InboxProps): react.JSX.Element;
+declare function Inbox({ children, className, ...props }: InboxProps): react.JSX.Element;
 interface InboxListProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
-/**
- * Left-pane item list. Place `<InboxItem>` children here. A keyboard listbox
- * (UIX-A11Y-2): the list is the single tab stop; ArrowUp/ArrowDown/Home/End move the
- * active option via `aria-activedescendant`, Enter/Space click it.
- */
+/** Left-pane item list. Place `<InboxItem>` children here. */
 declare function InboxList({ children, className, ...props }: InboxListProps): react.JSX.Element;
 interface InboxItemProps extends HTMLAttributes<HTMLDivElement> {
     /** Primary subject / title line. */
@@ -1054,7 +1006,7 @@ interface InboxItemProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 /** A single inbox row with subject, preview excerpt, optional leading slot, and unread/selected states. */
-declare function InboxItem({ subject, preview, leading, unread, selected, children, className, id, ...props }: InboxItemProps): react.JSX.Element;
+declare function InboxItem({ subject, preview, leading, unread, selected, children, className, ...props }: InboxItemProps): react.JSX.Element;
 interface InboxDetailProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
@@ -1062,39 +1014,25 @@ interface InboxDetailProps extends HTMLAttributes<HTMLDivElement> {
 declare function InboxDetail({ children, className, ...props }: InboxDetailProps): react.JSX.Element;
 
 interface KanbanProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Polite live-region text for keyboard moves (UIX-A11Y-2). `onMove` implementations
-     * should set it, e.g. "Card X moved to Doing, position 2 of 4".
-     */
-    announcement?: string;
     children?: ReactNode;
 }
-declare function Kanban({ announcement, children, className, ...props }: KanbanProps): react.JSX.Element;
+declare function Kanban({ children, className, ...props }: KanbanProps): react.JSX.Element;
 interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     count?: number;
     children?: ReactNode;
 }
 declare function KanbanColumn({ title, count, children, className, ...props }: KanbanColumnProps): react.JSX.Element;
-type KanbanMoveDirection = 'up' | 'down' | 'left' | 'right';
 interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     meta?: ReactNode;
-    /**
-     * Keyboard move contract (UIX-A11Y-2): when provided, Alt+Arrow on the focused card
-     * calls it — the same accelerator convention as NavFavourites row moves. Pair with
-     * the board-level `announcement` so SR users hear the result.
-     */
-    onMove?: (dir: KanbanMoveDirection) => void;
     children?: ReactNode;
 }
-declare function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...props }: KanbanCardProps): react.JSX.Element;
+declare function KanbanCard({ title, meta, children, className, ...props }: KanbanCardProps): react.JSX.Element;
 
 interface TreeNodeData {
     id: string;
     label: ReactNode;
-    /** Plain-text label for keyboard typeahead when `label` is not a string (UIX-A11Y-2). */
-    typeaheadLabel?: string;
     icon?: ReactNode;
     children?: TreeNodeData[];
 }
@@ -1143,10 +1081,6 @@ declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, se
 interface TreeLike<T> {
     id: string;
     children?: T[];
-    /** The display label — typeahead matches it only when it is a plain string (UIX-A11Y-2). */
-    label?: unknown;
-    /** Explicit typeahead text for nodes whose `label` is not a string (rich ReactNode labels). */
-    typeaheadLabel?: string;
 }
 interface FlatNode<T> {
     node: T;
@@ -1360,4 +1294,4 @@ interface StatusRowProps extends HTMLAttributes<HTMLDivElement> {
 /** Status row — indicator + name + trailing meta (`.uix-status-row`). */
 declare function StatusRow({ indicator, name, meta, className, ...props }: StatusRowProps): react.JSX.Element;
 
-export { Alert, type AlertProps, type AlertTone, type Align, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BulkBar, type BulkBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, CellStrong, CellSub, Checkbox, type CheckboxProps, type ColumnFilter, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, Composer, ComposerBar, type ComposerBarProps, type ComposerProps, ContentList, ContentListItem, type ContentListItemProps, type ContentListProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, EventRow, type EventRowProps, ExpandToggle, type ExpandToggleProps, FeaturedRundown, FeaturedRundownItem, type FeaturedRundownItemProps, type FeaturedRundownProps, FeaturedStage, type FeaturedStageProps, Field, type FieldProps, type FilterKind, type FilterOp, type FlatNode, Highlighted, type HighlightedProps, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanMoveDirection, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Mark, type MarkProps, Meter, type MeterProps, type MeterTone, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NewsLead, type NewsLeadProps, Note, type NoteProps, type NoteTone, NoticeQueue, type NoticeQueueProps, PageHeader, type PageHeaderProps, PageIntro, type PageIntroProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, type Placement, Popover, type PopoverProps, type PositionOptions, type PositionResult, type Primitive, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Rect, ResourceGrid, type ResourceGridProps, type Row, RowAction, type RowActionProps, RowActions, type RowActionsProps, SectionHead, type SectionHeadProps, type Segment, Segmented, SegmentedOption, type SegmentedOptionProps, type SegmentedProps, Select, type SelectAllState, type SelectProps, type ShellNav, type Side, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, type Size, Skeleton, type SkeletonProps, type SortDir, type SortDirection, type SortKey, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, StatLine, type StatLineItem, type StatLineProps, type StatProps, type StatTrend, StatusPill, type StatusPillProps, StatusRow, type StatusRowProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, TabPanel, type TabPanelProps, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeLike, type TreeNavAction, type TreeNodeData, type TreeNodeProps, type TreeProps, type UseAnchoredPositionOptions, type UseTableOptions, type UseTableResult, UserChip, type UserChipProps, type ViewState, type VirtualWindow, applyFilters, clampWidth, computePosition, cx, flattenTree, highlightSegments, matchFilter, mergePinned, multiSort, nextSortDir, parseView, reorder, searchRows, selectAllState, serializeView, shouldVirtualize, toggleId, togglePage, toggleSort, treeNav, useAnchoredPosition, useDialog, useTable, virtualWindow };
+export { Alert, type AlertProps, type AlertTone, type Align, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BulkBar, type BulkBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, CellStrong, CellSub, Checkbox, type CheckboxProps, type ColumnFilter, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, Composer, ComposerBar, type ComposerBarProps, type ComposerProps, ContentList, ContentListItem, type ContentListItemProps, type ContentListProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, EventRow, type EventRowProps, ExpandToggle, type ExpandToggleProps, FeaturedRundown, FeaturedRundownItem, type FeaturedRundownItemProps, type FeaturedRundownProps, FeaturedStage, type FeaturedStageProps, Field, type FieldProps, type FilterKind, type FilterOp, type FlatNode, Highlighted, type HighlightedProps, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Mark, type MarkProps, Meter, type MeterProps, type MeterTone, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NewsLead, type NewsLeadProps, Note, type NoteProps, type NoteTone, NoticeQueue, type NoticeQueueProps, PageHeader, type PageHeaderProps, PageIntro, type PageIntroProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, type Placement, Popover, type PopoverProps, type PositionOptions, type PositionResult, type Primitive, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Rect, ResourceGrid, type ResourceGridProps, type Row, RowAction, type RowActionProps, RowActions, type RowActionsProps, SectionHead, type SectionHeadProps, type Segment, Segmented, SegmentedOption, type SegmentedOptionProps, type SegmentedProps, Select, type SelectAllState, type SelectProps, type ShellNav, type Side, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, type Size, Skeleton, type SkeletonProps, type SortDir, type SortDirection, type SortKey, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, StatLine, type StatLineItem, type StatLineProps, type StatProps, type StatTrend, StatusPill, type StatusPillProps, StatusRow, type StatusRowProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeLike, type TreeNavAction, type TreeNodeData, type TreeNodeProps, type TreeProps, type UseAnchoredPositionOptions, type UseTableOptions, type UseTableResult, type UseVirtualRowsOptions, type UseVirtualRowsResult, UserChip, type UserChipProps, type ViewState, type VirtualWindow, applyFilters, clampWidth, computePosition, cx, flattenTree, highlightSegments, matchFilter, mergePinned, multiSort, nextSortDir, parseView, reorder, searchRows, selectAllState, serializeView, shouldVirtualize, toggleId, togglePage, toggleSort, treeNav, useAnchoredPosition, useDialog, useTable, useVirtualRows, virtualWindow };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { cx } from './cx.js';
 export { useDialog } from './hooks/useDialog.js';
 export { UseTableOptions, UseTableResult, useTable } from './hooks/useTable.js';
+export { UseVirtualRowsOptions, UseVirtualRowsResult, useVirtualRows } from './hooks/useVirtualRows.js';
 export { UseAnchoredPositionOptions, useAnchoredPosition } from './hooks/useAnchoredPosition.js';
 export { Align, Placement, PositionOptions, PositionResult, Rect, Side, Size, computePosition } from './overlay-position.js';
 export { Button, ButtonGroup, ButtonGroupProps, ButtonProps } from './components/Button.js';
@@ -19,7 +20,7 @@ export { PageHeader, PageHeaderProps } from './components/PageHeader.js';
 export { DetailLayout, DetailLayoutProps } from './components/DetailLayout.js';
 export { List, ListItem, ListItemProps, ListProps } from './components/List.js';
 export { DescriptionItem, DescriptionItemProps, DescriptionList, DescriptionListItem, DescriptionListProps } from './components/DescriptionList.js';
-export { Tab, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps } from './components/Tabs.js';
+export { Tab, TabProps, Tabs, TabsProps } from './components/Tabs.js';
 export { AppShell, AppShellProps, ShellNav } from './components/AppShell.js';
 export { NavGroup, NavGroupProps, NavItem, NavItemProps, Sidebar, SidebarProps, SidebarSection, SidebarSectionProps, SubNavItem, SubNavItemProps } from './components/Sidebar.js';
 export { StarButton, StarButtonProps } from './components/StarButton.js';
@@ -46,7 +47,7 @@ export { Note, NoteProps, NoteTone, Prose, ProseProps } from './components/Prose
 export { Popover, PopoverProps } from './components/Popover.js';
 export { CommandGroup, CommandGroupProps, CommandItem, CommandItemProps, CommandPalette, CommandPaletteProps } from './components/CommandPalette.js';
 export { Inbox, InboxDetail, InboxDetailProps, InboxItem, InboxItemProps, InboxList, InboxListProps, InboxProps } from './components/Inbox.js';
-export { Kanban, KanbanCard, KanbanCardProps, KanbanColumn, KanbanColumnProps, KanbanMoveDirection, KanbanProps } from './components/Kanban.js';
+export { Kanban, KanbanCard, KanbanCardProps, KanbanColumn, KanbanColumnProps, KanbanProps } from './components/Kanban.js';
 export { Tree, TreeNodeData, TreeNodeProps, TreeProps } from './components/Tree.js';
 export { FlatNode, TreeLike, TreeNavAction, flattenTree, treeNav } from './tree-model.js';
 export { ContentList, ContentListItem, ContentListItemProps, ContentListProps, EventRow, EventRowProps, FeaturedRundown, FeaturedRundownItem, FeaturedRundownItemProps, FeaturedRundownProps, FeaturedStage, FeaturedStageProps, NewsLead, NewsLeadProps, NoticeQueue, NoticeQueueProps, PageIntro, PageIntroProps, ResourceGrid, ResourceGridProps, SectionHead, SectionHeadProps, StatLine, StatLineItem, StatLineProps, StatusRow, StatusRowProps } from './components/EditorialHome.js';

package/dist/index.js

@@ -1,6 +1,7 @@
 import { cx } from "./cx.js";
 import { useDialog } from "./hooks/useDialog.js";
 import { useTable } from "./hooks/useTable.js";
+import { useVirtualRows } from "./hooks/useVirtualRows.js";
 import { useAnchoredPosition } from "./hooks/useAnchoredPosition.js";
 import { computePosition } from "./overlay-position.js";
 import { Button, ButtonGroup } from "./components/Button.js";
@@ -19,7 +20,7 @@ import { PageHeader } from "./components/PageHeader.js";
 import { DetailLayout } from "./components/DetailLayout.js";
 import { List, ListItem } from "./components/List.js";
 import { DescriptionList, DescriptionItem } from "./components/DescriptionList.js";
-import { Tabs, Tab, TabPanel } from "./components/Tabs.js";
+import { Tabs, Tab } from "./components/Tabs.js";
 import { AppShell } from "./components/AppShell.js";
 import { Sidebar, SidebarSection, NavItem, NavGroup, SubNavItem } from "./components/Sidebar.js";
 import { StarButton } from "./components/StarButton.js";
@@ -162,7 +163,6 @@ export {
   SubNavItem,
   Switch,
   Tab,
-  TabPanel,
   Table,
   TableWrap,
   Tabs,
@@ -183,5 +183,6 @@ export {
   treeNav,
   useAnchoredPosition,
   useDialog,
-  useTable
+  useTable,
+  useVirtualRows
 };

package/dist/table-engine.js

@@ -1,19 +1,20 @@
+const stringCollator = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
 function compare(a, b) {
   if (a == null && b == null) return 0;
   if (a == null) return -1;
   if (b == null) return 1;
   if (typeof a === "number" && typeof b === "number") return a - b;
-  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+  return stringCollator.compare(String(a), String(b));
 }
 function multiSort(rows, keys) {
   if (!keys.length) return rows.slice();
-  return rows.map((row, i) => ({ row, i })).sort((x, y) => {
+  return rows.slice().sort((a, b) => {
     for (const k of keys) {
-      const c = compare(x.row[k.field], y.row[k.field]);
+      const c = compare(a[k.field], b[k.field]);
       if (c !== 0) return k.dir === "ascending" ? c : -c;
     }
-    return x.i - y.i;
-  }).map((w) => w.row);
+    return 0;
+  });
 }
 function nextSortDir(current) {
   if (current === "ascending") return "descending";
@@ -213,7 +214,8 @@ function toggleId(set, id) {
   return next;
 }
 function selectAllState(selected, pageIds) {
-  const on = pageIds.filter((id) => selected.has(id)).length;
+  let on = 0;
+  for (const id of pageIds) if (selected.has(id)) on += 1;
   if (on === 0) return "none";
   return on === pageIds.length ? "all" : "some";
 }

package/dist/tree-model.d.ts

@@ -11,10 +11,6 @@
 interface TreeLike<T> {
     id: string;
     children?: T[];
-    /** The display label — typeahead matches it only when it is a plain string (UIX-A11Y-2). */
-    label?: unknown;
-    /** Explicit typeahead text for nodes whose `label` is not a string (rich ReactNode labels). */
-    typeaheadLabel?: string;
 }
 interface FlatNode<T> {
     node: T;

package/dist/tree-model.js

@@ -40,14 +40,6 @@ function treeNav(flat, currentId, key) {
     case " ":
       return cur.hasChildren ? { toggleId: cur.node.id, selectId: cur.node.id } : { selectId: cur.node.id };
     default:
-      if (key.length === 1) {
-        const q = key.toLowerCase();
-        for (let step = 1; step <= flat.length; step++) {
-          const f = flat[(idx + step) % flat.length];
-          const label = f.node.typeaheadLabel ?? (typeof f.node.label === "string" ? f.node.label : void 0);
-          if (label != null && label.toLowerCase().startsWith(q)) return { focusId: f.node.id };
-        }
-      }
       return {};
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/react",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",
@@ -26,22 +26,36 @@
       "types": "./dist/chart.d.ts",
       "import": "./dist/chart.js",
       "require": "./dist/chart.cjs"
+    },
+    "./chart/preset": {
+      "types": "./dist/chart-preset.d.ts",
+      "import": "./dist/chart-preset.js",
+      "require": "./dist/chart-preset.cjs"
     }
   },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "test": "node --test"
+    "test": "node --test",
+    "test:performance": "node scripts/table-performance.mjs",
+    "size": "node scripts/check-chart-preset-size.mjs"
   },
   "peerDependencies": {
+    "echarts": "^5.6.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "echarts": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "echarts": "^5.6.0",
+    "esbuild": "^0.27.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   }