@tensor_1/react 2.4.0 → 2.6.0

package/dist/index.d.cts

@@ -1,10 +1,145 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, CSSProperties, HTMLAttributes, AnchorHTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import { 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): React.RefObject<HTMLDialogElement>;
 
+/**
+ * uix table engine — framework-agnostic, dependency-free logic for data grids.
+ *
+ * Pure functions only (no DOM, no React), so the same core drives the React
+ * wrappers, the vanilla styleguide, and any consumer. Everything here is
+ * deterministic and unit-tested (see table-engine.test.mjs). The React layer
+ * (useTable / Table subcomponents) composes these; products may also call them
+ * directly. Presentation stays in table.css via the --uix-* contract.
+ */
+type SortDir = 'ascending' | 'descending';
+interface SortKey {
+    /** row field to sort on */
+    field: string;
+    dir: SortDir;
+}
+type Primitive = string | number | boolean | null | undefined;
+type Row = Record<string, unknown>;
+/**
+ * Stable multi-column sort. `keys` are applied in priority order (first is
+ * primary). Returns a new array; the input is not mutated.
+ */
+declare function multiSort<T extends Row>(rows: readonly T[], keys: readonly SortKey[]): T[];
+/** Cycle a header's sort state: none → ascending → descending → none. */
+declare function nextSortDir(current: SortDir | 'none' | undefined): SortDir | 'none';
+/**
+ * Toggle a field within a multi-sort key list. Without shift, it replaces the
+ * list with just this field (cycling its direction); with shift, it adds/updates
+ * the field as a secondary key (removing it when it cycles back to none).
+ */
+declare function toggleSort(keys: readonly SortKey[], field: string, additive?: boolean): SortKey[];
+type FilterKind = 'enum' | 'text' | 'number' | 'date' | 'boolean';
+type FilterOp = 'isAnyOf' | 'isNoneOf' | 'contains' | 'equals' | 'startsWith' | 'eq' | 'lt' | 'gt' | 'between' | 'is';
+interface ColumnFilter {
+    field: string;
+    kind: FilterKind;
+    op: FilterOp;
+    /** value(s): a scalar, an array (enum / between), or [min,max] for between */
+    value: Primitive | Primitive[];
+}
+declare function matchFilter(row: Row, f: ColumnFilter): boolean;
+/** Keep rows that satisfy EVERY active filter (AND across columns). */
+declare function applyFilters<T extends Row>(rows: readonly T[], filters: readonly ColumnFilter[]): T[];
+/** Rows where any of `fields` (default: all string/number values) contains `query`. */
+declare function searchRows<T extends Row>(rows: readonly T[], query: string, fields?: readonly string[]): T[];
+interface Segment {
+    text: string;
+    match: boolean;
+}
+/** Split `text` into matched / unmatched segments for <mark> rendering (case-insensitive). */
+declare function highlightSegments(text: string, query: string): Segment[];
+interface ViewState {
+    sort?: SortKey[];
+    filters?: ColumnFilter[];
+    columns?: string[];
+    density?: 'compact' | 'standard' | 'comfortable';
+    q?: string;
+}
+/** Serialize a view to a compact, linkable query string (no leading '?'). */
+declare function serializeView(v: ViewState): string;
+/** Parse a query string (with or without leading '?') back into a ViewState. */
+declare function parseView(qs: string): ViewState;
+interface VirtualWindow {
+    start: number;
+    end: number;
+    padTop: number;
+    padBottom: number;
+    total: number;
+}
+/**
+ * Compute the visible row window for a fixed row height. Renders only
+ * [start, end) plus `overscan` rows on each side; padTop/padBottom are spacer
+ * heights (px) so the scrollbar stays correct. Below `threshold` rows, callers
+ * should skip virtualization (render all) — see shouldVirtualize.
+ */
+declare function virtualWindow(scrollTop: number, viewportH: number, rowH: number, count: number, overscan?: number): VirtualWindow;
+declare function shouldVirtualize(count: number, threshold?: number): boolean;
+/** Clamp a dragged column width to a sane minimum (and optional maximum). */
+declare function clampWidth(width: number, min?: number, max?: number): number;
+/** Move an item from index `from` to index `to`, returning a new array. */
+declare function reorder<T>(arr: readonly T[], from: number, to: number): T[];
+declare function toggleId(set: ReadonlySet<string>, id: string): Set<string>;
+type SelectAllState = 'none' | 'some' | 'all';
+declare function selectAllState(selected: ReadonlySet<string>, pageIds: readonly string[]): SelectAllState;
+/** Toggle every id on the current page on/off based on the header checkbox. */
+declare function togglePage(selected: ReadonlySet<string>, pageIds: readonly string[]): Set<string>;
+/** Pinned rows (kept present regardless of filter/sort) hoisted above the rest. */
+declare function mergePinned<T extends Row>(all: readonly T[], visible: readonly T[], pinnedIds: ReadonlySet<string>, idField?: string): T[];
+
+interface UseTableOptions {
+    /** row field used as the stable id (selection / pinning). Default: 'id'. */
+    idField?: string;
+    initialSort?: SortKey[];
+    initialFilters?: ColumnFilter[];
+    initialQuery?: string;
+    /** restrict full-text search to these fields (default: all values). */
+    searchFields?: readonly string[];
+    /** ids kept present + hoisted regardless of filter/sort. */
+    initialPinned?: Iterable<string>;
+}
+interface UseTableResult<T> {
+    /** derived view: filter → search → sort, then pinned rows hoisted to the top. */
+    rows: T[];
+    sort: SortKey[];
+    filters: ColumnFilter[];
+    query: string;
+    selected: ReadonlySet<string>;
+    pinned: ReadonlySet<string>;
+    /** header select-all tri-state over the current derived rows. */
+    selectAll: SelectAllState;
+    /** 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;
+    setFilters: (filters: ColumnFilter[]) => void;
+    setQuery: (query: string) => void;
+    isSelected: (id: string) => boolean;
+    toggleRow: (id: string) => void;
+    /** toggle every currently-visible row from the header checkbox. */
+    toggleAllRows: () => void;
+    clearSelection: () => void;
+    togglePin: (id: string) => void;
+    /** current state as a ViewState + its linkable query string. */
+    view: ViewState;
+    viewQueryString: string;
+    /** hydrate sort/filters/query from a saved-view query string. */
+    applyView: (queryString: string) => void;
+}
+/**
+ * Compose the framework-agnostic table-engine into React state: sorting, typed
+ * filtering, full-text search, page-scoped selection, pinning, and linkable saved
+ * views. Presentation stays in the `<Table>` primitives + table.css; this only owns
+ * the state and the derived row list. The vanilla styleguide (`guide/app.js`) runs
+ * the same engine functions, so both layers behave identically.
+ */
+declare function useTable<T extends Row>(data: readonly T[], options?: UseTableOptions): UseTableResult<T>;
+
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'link';
     size?: 'sm' | 'md' | 'lg';
@@ -219,13 +354,27 @@ interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
 }
 declare function Tab({ value, children, disabled, className, onClick, ...props }: TabProps): react.JSX.Element;
 
+type ShellNav = 'full' | 'rail' | 'hidden';
 interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
+    /** Sidebar width tier: 'full' (default) → 'rail' (icon only) → 'hidden' (0). */
+    nav?: ShellNav;
+    /** Back-compat alias for nav="rail". Ignored when `nav` is set. */
     collapsed?: boolean;
+    /**
+     * Immersive focus mode: hides the sidebar AND the topbar so a wide, many-column
+     * table uses the whole frame. Provide `onExitFocus` to enable Esc-to-exit and
+     * the floating exit control.
+     */
+    focus?: boolean;
+    /** Called when the user presses Esc (or the exit control) while in focus mode. */
+    onExitFocus?: () => void;
+    /** Drop the content gutter so a genuinely wide table runs edge-to-edge. */
+    mainBleed?: boolean;
     sidebar?: ReactNode;
     topbar?: ReactNode;
     children?: ReactNode;
 }
-declare function AppShell({ collapsed, 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;
@@ -387,16 +536,20 @@ interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
     density?: TableDensity;
     zebra?: boolean;
     pinnedCol?: boolean;
+    /** table-layout: fixed — required for reliable column widths + primary-column truncation */
+    fixed?: boolean;
     rowPeek?: boolean;
     v2?: boolean;
 }
-declare function Table({ density, zebra, pinnedCol, rowPeek, v2, className, children, ...props }: TableProps): react.JSX.Element;
+declare function Table({ density, zebra, pinnedCol, fixed, rowPeek, v2, className, children, ...props }: TableProps): react.JSX.Element;
 interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {
     sortable?: boolean;
     sortDirection?: SortDirection;
+    /** 1-based ordinal shown when this column is a secondary key in a multi-sort */
+    sortOrder?: number;
     onSort?: () => void;
 }
-declare function Th({ sortable, sortDirection, onSort, className, children, onClick, ...props }: ThProps): react.JSX.Element;
+declare function Th({ sortable, sortDirection, sortOrder, onSort, className, children, onClick, ...props }: ThProps): react.JSX.Element;
 interface TdProps extends TdHTMLAttributes<HTMLTableCellElement> {
     pinned?: boolean;
 }
@@ -406,6 +559,43 @@ interface TrProps extends HTMLAttributes<HTMLTableRowElement> {
     pinned?: boolean;
 }
 declare function Tr({ selected, pinned, className, children, ...props }: TrProps): react.JSX.Element;
+interface BulkBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** number of selected rows, rendered as "N selected" */
+    count?: number;
+    children?: ReactNode;
+}
+/** Contextual action bar shown above the table when ≥1 row is selected. */
+declare function BulkBar({ count, children, className, ...props }: BulkBarProps): react.JSX.Element;
+interface RowActionsProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    children?: ReactNode;
+}
+/** Trailing cell that holds the row's hover actions (kebab, quick actions). */
+declare function RowActions({ children, className, ...props }: RowActionsProps): react.JSX.Element;
+interface RowActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+}
+/** A single hover-revealed row action button (icon inside). */
+declare function RowAction({ children, className, type, ...props }: RowActionProps): react.JSX.Element;
+interface ExpandToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    expanded?: boolean;
+}
+/** Chevron button that expands/collapses an inline detail row. */
+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). */
+declare function CellSub({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
+interface MarkProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+/** A search-match highlight span. */
+declare function Mark({ children, className, ...props }: MarkProps): react.JSX.Element;
+interface HighlightedProps {
+    text: string;
+    query: string;
+}
+/** Render `text` with case-insensitive matches of `query` wrapped in <mark>. */
+declare function Highlighted({ text, query }: HighlightedProps): react.JSX.Element;
 
 interface PaginationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     page: number;
@@ -414,7 +604,7 @@ interface PaginationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange
 }
 declare function Pagination({ page, pageCount, onChange, className, ...props }: PaginationProps): react.JSX.Element;
 
-type PillTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'critical' | 'muted';
+type PillTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'critical' | 'muted' | 'attention' | 'overdue' | 'sla-ok' | 'sla-at-risk' | 'sla-breached' | 'p1' | 'p2' | 'p3' | 'p4' | 'p5';
 type PillTreatment = 'filled' | 'outline';
 interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {
     tone?: PillTone;
@@ -435,6 +625,17 @@ interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
 }
 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';
+interface MeterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Fill level 0–100. Clamped to this range. */
+    value?: number;
+    /** Threshold tone applied via `data-tone` on the fill element. `success` is the implicit default (no attribute). */
+    tone?: MeterTone;
+}
+/** Horizontal utilization / threshold bar backed by `.uix-meter`. */
+declare function Meter({ value, tone, className, ...props }: MeterProps): react.JSX.Element;
+
 interface StatTrend {
     direction: 'up' | 'down';
     label: ReactNode;
@@ -548,17 +749,65 @@ interface CommentProps extends HTMLAttributes<HTMLDivElement> {
 /** A single comment over `.uix-comment` (avatar column + body). */
 declare function Comment({ avatar, author, meta, children, className, ...props }: CommentProps): react.JSX.Element;
 
+interface ComposerProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/**
+ * Composer surface over `.uix-composer` — a single box that owns the
+ * `:focus-within` accent ring. Drop a borderless `<textarea>` and a
+ * `<ComposerBar>` inside; the descendant `textarea` picks up the composer's
+ * padding/typography automatically, so the input never reads as a second
+ * nested box.
+ */
+declare function Composer({ children, className, ...props }: ComposerProps): react.JSX.Element;
+interface ComposerBarProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Action footer for a `<Composer>` over `.uix-composer__bar` (top-bordered, right-aligned). */
+declare function ComposerBar({ children, className, ...props }: ComposerBarProps): react.JSX.Element;
+
+interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** The currently-selected option value. */
+    value?: string;
+    /** Fires with the option's value when a different option is chosen. */
+    onChange?: (value: string) => void;
+    children?: ReactNode;
+}
+/**
+ * Segmented single-select over `.uix-segmented` — the compact 2–3 way toggle
+ * (density, audience, view mode …) that reads as one pill with a lifted active
+ * segment. Selection state is shared with `<SegmentedOption>` via context, so
+ * the caller only wires `value` + `onChange` once.
+ */
+declare function Segmented({ value, onChange, children, className, ...props }: SegmentedProps): react.JSX.Element;
+interface SegmentedOptionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
+    value: string;
+    children?: ReactNode;
+}
+/**
+ * One option in a `<Segmented>`. Active state is derived from the parent's
+ * `value`; the pressed segment lifts to the surface via
+ * `.uix-segmented__option[aria-pressed="true"]`.
+ */
+declare function SegmentedOption({ value, children, className, onClick, ...props }: SegmentedOptionProps): react.JSX.Element;
+
 interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 /** Activity timeline container over `.uix-timeline`. */
 declare function Timeline({ children, className, ...props }: TimelineProps): react.JSX.Element;
 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
+     * (comments + audit events) read on one rail with per-row node semantics.
+     */
+    node?: ReactNode;
     meta?: ReactNode;
     children?: ReactNode;
 }
 /** A timeline entry over `.uix-timeline__item` (node + connecting line + body). */
-declare function TimelineItem({ meta, children, className, ...props }: TimelineItemProps): react.JSX.Element;
+declare function TimelineItem({ node, meta, children, className, ...props }: TimelineItemProps): react.JSX.Element;
 
 interface ProseProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
@@ -617,6 +866,37 @@ interface CommandItemProps extends HTMLAttributes<HTMLDivElement> {
 /** A single command row over `.uix-cmdk__item`. */
 declare function CommandItem({ icon, shortcut, active, children, className, ...props }: CommandItemProps): react.JSX.Element;
 
+interface InboxProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Two-pane inbox master-detail container backed by `.uix-inbox`. Place `<InboxList>` and `<InboxDetail>` as children. */
+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. */
+declare function InboxList({ children, className, ...props }: InboxListProps): react.JSX.Element;
+interface InboxItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Primary subject / title line. */
+    subject?: ReactNode;
+    /** Secondary preview excerpt (truncated). */
+    preview?: ReactNode;
+    /** Leading slot — avatar, icon, or priority indicator. */
+    leading?: ReactNode;
+    /** When true sets `data-unread` → bolds the subject line. */
+    unread?: boolean;
+    /** When true sets `aria-selected` → renders the accent left-border stripe. */
+    selected?: boolean;
+    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, ...props }: InboxItemProps): react.JSX.Element;
+interface InboxDetailProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Right-pane detail area — renders the full content of the selected item. */
+declare function InboxDetail({ children, className, ...props }: InboxDetailProps): react.JSX.Element;
+
 interface KanbanProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
@@ -658,4 +938,4 @@ interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' |
 }
 declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }: TreeProps): react.JSX.Element;
 
-export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, 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, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, Note, type NoteProps, type NoteTone, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Popover, type PopoverProps, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectProps, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDirection, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, type StatProps, type StatTrend, StatusPill, type StatusPillProps, 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 TreeNodeData, type TreeNodeProps, type TreeProps, UserChip, type UserChipProps, cx, useDialog };
+export { Alert, type AlertProps, type AlertTone, 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, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, ExpandToggle, type ExpandToggleProps, Field, type FieldProps, type FilterKind, type FilterOp, 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, Note, type NoteProps, type NoteTone, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Popover, type PopoverProps, type Primitive, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Row, RowAction, type RowActionProps, RowActions, type RowActionsProps, type Segment, Segmented, SegmentedOption, type SegmentedOptionProps, type SegmentedProps, Select, type SelectAllState, type SelectProps, type ShellNav, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDir, type SortDirection, type SortKey, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, type StatProps, type StatTrend, StatusPill, type StatusPillProps, 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 TreeNodeData, type TreeNodeProps, type TreeProps, type UseTableOptions, type UseTableResult, UserChip, type UserChipProps, type ViewState, type VirtualWindow, applyFilters, clampWidth, cx, highlightSegments, matchFilter, mergePinned, multiSort, nextSortDir, parseView, reorder, searchRows, selectAllState, serializeView, shouldVirtualize, toggleId, togglePage, toggleSort, useDialog, useTable, virtualWindow };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { cx } from './cx.js';
 export { useDialog } from './hooks/useDialog.js';
+export { UseTableOptions, UseTableResult, useTable } from './hooks/useTable.js';
 export { Button, ButtonGroup, ButtonGroupProps, ButtonProps } from './components/Button.js';
 export { Input, InputGroup, InputGroupProps, InputProps } from './components/Input.js';
 export { Textarea, TextareaProps } from './components/Textarea.js';
@@ -17,27 +18,32 @@ 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, TabProps, Tabs, TabsProps } from './components/Tabs.js';
-export { AppShell, AppShellProps } from './components/AppShell.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';
 export { NavFavouriteItem, NavFavourites, NavFavouritesLabels, NavFavouritesProps } from './components/NavFavourites.js';
 export { Alert, AlertProps, AlertTone } from './components/Alert.js';
 export { Spinner, SpinnerProps } from './components/Spinner.js';
 export { Toast, ToastProps, ToastTone, Toaster, ToasterProps } from './components/Toast.js';
-export { SortDirection, Table, TableDensity, TableProps, TableWrap, TableWrapProps, Td, TdProps, Th, ThProps, Tr, TrProps } from './components/Table.js';
+export { BulkBar, BulkBarProps, CellStrong, CellSub, ExpandToggle, ExpandToggleProps, Highlighted, HighlightedProps, Mark, MarkProps, RowAction, RowActionProps, RowActions, RowActionsProps, SortDirection, Table, TableDensity, TableProps, TableWrap, TableWrapProps, Td, TdProps, Th, ThProps, Tr, TrProps } from './components/Table.js';
+export { ColumnFilter, FilterKind, FilterOp, Primitive, Row, Segment, SelectAllState, SortDir, SortKey, ViewState, VirtualWindow, applyFilters, clampWidth, highlightSegments, matchFilter, mergePinned, multiSort, nextSortDir, parseView, reorder, searchRows, selectAllState, serializeView, shouldVirtualize, toggleId, togglePage, toggleSort, virtualWindow } from './table-engine.js';
 export { Pagination, PaginationProps } from './components/Pagination.js';
 export { PillTone, PillTreatment, StatusPill, StatusPillProps } from './components/StatusPill.js';
 export { Progress, ProgressProps } from './components/Progress.js';
+export { Meter, MeterProps, MeterTone } from './components/Meter.js';
 export { Stat, StatProps, StatTrend } from './components/Stat.js';
 export { Tooltip, TooltipProps } from './components/Tooltip.js';
 export { EmptyState, EmptyStateProps, ErrorState, ErrorStateProps, LoadingState, LoadingStateProps, Skeleton, SkeletonProps } from './components/States.js';
 export { Label, LabelProps } from './components/Label.js';
 export { Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, UserChip, UserChipProps } from './components/Avatar.js';
 export { Comment, CommentProps, Comments, CommentsProps } from './components/Comments.js';
+export { Composer, ComposerBar, ComposerBarProps, ComposerProps } from './components/Composer.js';
+export { Segmented, SegmentedOption, SegmentedOptionProps, SegmentedProps } from './components/Segmented.js';
 export { Timeline, TimelineItem, TimelineItemProps, TimelineProps } from './components/Timeline.js';
 export { Note, NoteProps, NoteTone, Prose, ProseProps } from './components/Prose.js';
 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, KanbanProps } from './components/Kanban.js';
 export { Tree, TreeNodeData, TreeNodeProps, TreeProps } from './components/Tree.js';
 import 'react';

package/dist/index.js

@@ -1,5 +1,6 @@
 import { cx } from "./cx.js";
 import { useDialog } from "./hooks/useDialog.js";
+import { useTable } from "./hooks/useTable.js";
 import { Button, ButtonGroup } from "./components/Button.js";
 import { Input, InputGroup } from "./components/Input.js";
 import { Textarea } from "./components/Textarea.js";
@@ -24,20 +25,39 @@ import { NavFavourites } from "./components/NavFavourites.js";
 import { Alert } from "./components/Alert.js";
 import { Spinner } from "./components/Spinner.js";
 import { Toast, Toaster } from "./components/Toast.js";
-import { TableWrap, Table, Th, Td, Tr } from "./components/Table.js";
+import {
+  TableWrap,
+  Table,
+  Th,
+  Td,
+  Tr,
+  BulkBar,
+  RowActions,
+  RowAction,
+  ExpandToggle,
+  CellStrong,
+  CellSub,
+  Mark,
+  Highlighted
+} from "./components/Table.js";
+export * from "./table-engine.js";
 import { Pagination } from "./components/Pagination.js";
 import { StatusPill } from "./components/StatusPill.js";
 import { Progress } from "./components/Progress.js";
+import { Meter } from "./components/Meter.js";
 import { Stat } from "./components/Stat.js";
 import { Tooltip } from "./components/Tooltip.js";
 import { EmptyState, ErrorState, Skeleton, LoadingState } from "./components/States.js";
 import { Label } from "./components/Label.js";
 import { Avatar, AvatarGroup, UserChip } from "./components/Avatar.js";
 import { Comments, Comment } from "./components/Comments.js";
+import { Composer, ComposerBar } from "./components/Composer.js";
+import { Segmented, SegmentedOption } from "./components/Segmented.js";
 import { Timeline, TimelineItem } from "./components/Timeline.js";
 import { Prose, Note } from "./components/Prose.js";
 import { Popover } from "./components/Popover.js";
 import { CommandPalette, CommandGroup, CommandItem } from "./components/CommandPalette.js";
+import { Inbox, InboxList, InboxItem, InboxDetail } from "./components/Inbox.js";
 import { Kanban, KanbanColumn, KanbanCard } from "./components/Kanban.js";
 import { Tree } from "./components/Tree.js";
 export {
@@ -45,22 +65,33 @@ export {
   AppShell,
   Avatar,
   AvatarGroup,
+  BulkBar,
   Button,
   ButtonGroup,
   Card,
+  CellStrong,
+  CellSub,
   Checkbox,
   CommandGroup,
   CommandItem,
   CommandPalette,
   Comment,
   Comments,
+  Composer,
+  ComposerBar,
   DescriptionItem,
   DescriptionList,
   DetailLayout,
   Drawer,
   EmptyState,
   ErrorState,
+  ExpandToggle,
   Field,
+  Highlighted,
+  Inbox,
+  InboxDetail,
+  InboxItem,
+  InboxList,
   Input,
   InputGroup,
   Kanban,
@@ -70,6 +101,8 @@ export {
   List,
   ListItem,
   LoadingState,
+  Mark,
+  Meter,
   Modal,
   NavFavourites,
   NavGroup,
@@ -83,6 +116,10 @@ export {
   Prose,
   Radio,
   RadioGroup,
+  RowAction,
+  RowActions,
+  Segmented,
+  SegmentedOption,
   Select,
   Sidebar,
   SidebarSection,
@@ -109,5 +146,6 @@ export {
   Tree,
   UserChip,
   cx,
-  useDialog
+  useDialog,
+  useTable
 };

package/dist/table-engine.d.ts

@@ -0,0 +1,89 @@
+/**
+ * uix table engine — framework-agnostic, dependency-free logic for data grids.
+ *
+ * Pure functions only (no DOM, no React), so the same core drives the React
+ * wrappers, the vanilla styleguide, and any consumer. Everything here is
+ * deterministic and unit-tested (see table-engine.test.mjs). The React layer
+ * (useTable / Table subcomponents) composes these; products may also call them
+ * directly. Presentation stays in table.css via the --uix-* contract.
+ */
+type SortDir = 'ascending' | 'descending';
+interface SortKey {
+    /** row field to sort on */
+    field: string;
+    dir: SortDir;
+}
+type Primitive = string | number | boolean | null | undefined;
+type Row = Record<string, unknown>;
+/**
+ * Stable multi-column sort. `keys` are applied in priority order (first is
+ * primary). Returns a new array; the input is not mutated.
+ */
+declare function multiSort<T extends Row>(rows: readonly T[], keys: readonly SortKey[]): T[];
+/** Cycle a header's sort state: none → ascending → descending → none. */
+declare function nextSortDir(current: SortDir | 'none' | undefined): SortDir | 'none';
+/**
+ * Toggle a field within a multi-sort key list. Without shift, it replaces the
+ * list with just this field (cycling its direction); with shift, it adds/updates
+ * the field as a secondary key (removing it when it cycles back to none).
+ */
+declare function toggleSort(keys: readonly SortKey[], field: string, additive?: boolean): SortKey[];
+type FilterKind = 'enum' | 'text' | 'number' | 'date' | 'boolean';
+type FilterOp = 'isAnyOf' | 'isNoneOf' | 'contains' | 'equals' | 'startsWith' | 'eq' | 'lt' | 'gt' | 'between' | 'is';
+interface ColumnFilter {
+    field: string;
+    kind: FilterKind;
+    op: FilterOp;
+    /** value(s): a scalar, an array (enum / between), or [min,max] for between */
+    value: Primitive | Primitive[];
+}
+declare function matchFilter(row: Row, f: ColumnFilter): boolean;
+/** Keep rows that satisfy EVERY active filter (AND across columns). */
+declare function applyFilters<T extends Row>(rows: readonly T[], filters: readonly ColumnFilter[]): T[];
+/** Rows where any of `fields` (default: all string/number values) contains `query`. */
+declare function searchRows<T extends Row>(rows: readonly T[], query: string, fields?: readonly string[]): T[];
+interface Segment {
+    text: string;
+    match: boolean;
+}
+/** Split `text` into matched / unmatched segments for <mark> rendering (case-insensitive). */
+declare function highlightSegments(text: string, query: string): Segment[];
+interface ViewState {
+    sort?: SortKey[];
+    filters?: ColumnFilter[];
+    columns?: string[];
+    density?: 'compact' | 'standard' | 'comfortable';
+    q?: string;
+}
+/** Serialize a view to a compact, linkable query string (no leading '?'). */
+declare function serializeView(v: ViewState): string;
+/** Parse a query string (with or without leading '?') back into a ViewState. */
+declare function parseView(qs: string): ViewState;
+interface VirtualWindow {
+    start: number;
+    end: number;
+    padTop: number;
+    padBottom: number;
+    total: number;
+}
+/**
+ * Compute the visible row window for a fixed row height. Renders only
+ * [start, end) plus `overscan` rows on each side; padTop/padBottom are spacer
+ * heights (px) so the scrollbar stays correct. Below `threshold` rows, callers
+ * should skip virtualization (render all) — see shouldVirtualize.
+ */
+declare function virtualWindow(scrollTop: number, viewportH: number, rowH: number, count: number, overscan?: number): VirtualWindow;
+declare function shouldVirtualize(count: number, threshold?: number): boolean;
+/** Clamp a dragged column width to a sane minimum (and optional maximum). */
+declare function clampWidth(width: number, min?: number, max?: number): number;
+/** Move an item from index `from` to index `to`, returning a new array. */
+declare function reorder<T>(arr: readonly T[], from: number, to: number): T[];
+declare function toggleId(set: ReadonlySet<string>, id: string): Set<string>;
+type SelectAllState = 'none' | 'some' | 'all';
+declare function selectAllState(selected: ReadonlySet<string>, pageIds: readonly string[]): SelectAllState;
+/** Toggle every id on the current page on/off based on the header checkbox. */
+declare function togglePage(selected: ReadonlySet<string>, pageIds: readonly string[]): Set<string>;
+/** Pinned rows (kept present regardless of filter/sort) hoisted above the rest. */
+declare function mergePinned<T extends Row>(all: readonly T[], visible: readonly T[], pinnedIds: ReadonlySet<string>, idField?: string): T[];
+
+export { type ColumnFilter, type FilterKind, type FilterOp, type Primitive, type Row, type Segment, type SelectAllState, type SortDir, type SortKey, type ViewState, type VirtualWindow, applyFilters, clampWidth, highlightSegments, matchFilter, mergePinned, multiSort, nextSortDir, parseView, reorder, searchRows, selectAllState, serializeView, shouldVirtualize, toggleId, togglePage, toggleSort, virtualWindow };