@mithrl/design-system 0.2.0 → 0.4.0

package/dist/components/approval-card/ApprovalCard.d.ts

@@ -0,0 +1,70 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+
+/** One selectable answer on an approval question. */
+export interface ApprovalOption {
+    id: string;
+    label: string;
+    /** Short clarifier shown under the label. Keep it to one plain sentence. */
+    description?: string;
+}
+/** A single question the agent asks before it acts. */
+export interface ApprovalQuestion {
+    id: string;
+    /** The question itself, phrased the way a colleague would ask it. */
+    prompt: string;
+    /** Optional context sentence shown under the prompt. */
+    helpText?: ReactNode;
+    options: ApprovalOption[];
+    /** Allow more than one option. Defaults to single choice. */
+    multiSelect?: boolean;
+}
+/** Selected option ids keyed by question id. */
+export type ApprovalAnswers = Record<string, string[]>;
+type RestrictedApprovalCardAttribute = "children" | "onSubmit" | "role";
+export type ApprovalCardProps = Omit<HTMLAttributes<HTMLElement>, RestrictedApprovalCardAttribute> & {
+    /** Ordered questions. The card pages through them one at a time. */
+    questions: ApprovalQuestion[];
+    /** Optional heading above the question, e.g. the run the agent is planning. */
+    eyebrow?: ReactNode;
+    /** Controlled answers. Pair with `onAnswersChange`. */
+    answers?: ApprovalAnswers;
+    /** Initial answers when the card owns its own state. */
+    defaultAnswers?: ApprovalAnswers;
+    onAnswersChange?: (answers: ApprovalAnswers) => void;
+    /** Fired once the last question is confirmed. */
+    onComplete?: (answers: ApprovalAnswers) => void;
+    /** Fired when the scientist declines to answer and lets the agent decide. */
+    onSkip?: (answers: ApprovalAnswers) => void;
+    skipLabel?: string;
+    continueLabel?: string;
+    /** Label for the final page's primary action. */
+    completeLabel?: string;
+    /** Require a selection before the primary action enables. @default true */
+    requireAnswer?: boolean;
+};
+/**
+ * Human-in-the-loop approval. The agent pauses, asks what it should do, and
+ * waits: one question per page, a clear way out, and no hidden defaults.
+ */
+export declare const ApprovalCard: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, RestrictedApprovalCardAttribute> & {
+    /** Ordered questions. The card pages through them one at a time. */
+    questions: ApprovalQuestion[];
+    /** Optional heading above the question, e.g. the run the agent is planning. */
+    eyebrow?: ReactNode;
+    /** Controlled answers. Pair with `onAnswersChange`. */
+    answers?: ApprovalAnswers;
+    /** Initial answers when the card owns its own state. */
+    defaultAnswers?: ApprovalAnswers;
+    onAnswersChange?: (answers: ApprovalAnswers) => void;
+    /** Fired once the last question is confirmed. */
+    onComplete?: (answers: ApprovalAnswers) => void;
+    /** Fired when the scientist declines to answer and lets the agent decide. */
+    onSkip?: (answers: ApprovalAnswers) => void;
+    skipLabel?: string;
+    continueLabel?: string;
+    /** Label for the final page's primary action. */
+    completeLabel?: string;
+    /** Require a selection before the primary action enables. @default true */
+    requireAnswer?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/components/button/Button.d.ts

@@ -10,6 +10,8 @@ export type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]
 export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & VariantProps<typeof buttonVariants> & {
     children: ReactNode;
     loading?: boolean;
+    /** Keeps async-action focus while guarding repeat activation with aria-disabled. */
+    preserveFocusWhileLoading?: boolean;
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
 };
@@ -23,6 +25,8 @@ export declare const Button: import("react").ForwardRefExoticComponent<Omit<Butt
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     children: ReactNode;
     loading?: boolean;
+    /** Keeps async-action focus while guarding repeat activation with aria-disabled. */
+    preserveFocusWhileLoading?: boolean;
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/code-block/CodeBlock.d.ts

@@ -0,0 +1,64 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+
+export type CodeBlockVariant = "code" | "diff";
+export type CodeLineKind = "context" | "added" | "removed";
+export type CodeLine = {
+    /** Raw line text. Rendered verbatim in the mono column. */
+    content: string;
+    /** Diff classification. Ignored by the `code` variant. */
+    kind?: CodeLineKind;
+};
+export type CodeBlockRenderLineArgs = {
+    /** Raw line text. */
+    content: string;
+    /** Resolved diff classification. */
+    kind: CodeLineKind;
+    /** One-based line number as shown in the gutter. */
+    number: number;
+    /** Variant the line is being rendered for. */
+    variant: CodeBlockVariant;
+};
+export type CodeBlockLabels = {
+    copy: string;
+    copied: string;
+    copyFailed: string;
+    codeTab: string;
+    diffTab: string;
+    listing: string;
+};
+type CodeBlockOwnProps = {
+    /** Source text. Split on newlines into the listing. */
+    code?: string;
+    /** Pre-split lines, required for diff rendering. Wins over `code`. */
+    lines?: readonly CodeLine[];
+    /** Language label rendered as a Tag in the header. */
+    language?: string;
+    /** File path or name rendered as the header title. */
+    fileName?: string;
+    /** Listing mode. Ignored when `tabs` is enabled. */
+    variant?: CodeBlockVariant;
+    /** Renders a Code/Diff segmented control. Requires `code` and `lines`. */
+    tabs?: boolean;
+    /** Controlled tab value when `tabs` is enabled. */
+    activeTab?: CodeBlockVariant;
+    /** Called when the Code/Diff segmented control changes. */
+    onTabChange?: (variant: CodeBlockVariant) => void;
+    /** Hides the line-number column. */
+    hideLineNumbers?: boolean;
+    /** Called with the text placed on the clipboard. */
+    onCopy?: (text: string) => void;
+    /** Injects highlighted nodes for a line. Defaults to plain mono text. */
+    renderLine?: (line: CodeBlockRenderLineArgs) => ReactNode;
+    labels?: Partial<CodeBlockLabels>;
+    className?: string;
+};
+export type CodeBlockProps = Omit<HTMLAttributes<HTMLDivElement>, keyof CodeBlockOwnProps | "children"> & CodeBlockOwnProps;
+/**
+ * A notebook-tier code surface: a titled header rail with an optional
+ * language Tag and copy action, and a line-numbered, horizontally scrolling
+ * listing. The `diff` variant renders unified diff lines with semantic
+ * tinting. CodeBlock ships no syntax highlighting engine — pass `renderLine`
+ * to inject already-highlighted nodes.
+ */
+export declare const CodeBlock: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | keyof CodeBlockOwnProps> & CodeBlockOwnProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/command-search/CommandSearch.d.ts

@@ -0,0 +1,57 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+
+export type CommandSearchItem = {
+    /** Stable identity used for keys and active-descendant wiring. */
+    id: string;
+    /** Visible command label; match highlighting applies to this text. */
+    label: string;
+    /** Optional group heading the item is filed under. */
+    group?: string;
+    /** Optional trailing hint such as a shortcut or destination. */
+    hint?: string;
+    /** Invoked on Enter or click. */
+    onSelect?: (item: CommandSearchItem) => void;
+    /** Removes the item from keyboard navigation and selection. */
+    disabled?: boolean;
+};
+export type CommandSearchProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> & {
+    items: readonly CommandSearchItem[];
+    /** Required accessible name for the search field. */
+    label: string;
+    placeholder?: string;
+    /** Controlled query. Omit for uncontrolled use. */
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    /** Called after any item is chosen, in addition to the item's own handler. */
+    onSelect?: (item: CommandSearchItem) => void;
+    /** Called when Escape is pressed on a field that is already empty. */
+    onEscape?: () => void;
+    /** Renders group headings when items carry a `group`. */
+    grouped?: boolean;
+    /** Secondary line shown under the empty-state title. */
+    emptyHint?: ReactNode;
+};
+/**
+ * A command palette search surface. CommandSearch renders inline as an
+ * embedded panel and can be composed inside a Dialog by the consumer; it owns
+ * filtering, match highlighting, and roving keyboard selection only.
+ */
+export declare const CommandSearch: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> & {
+    items: readonly CommandSearchItem[];
+    /** Required accessible name for the search field. */
+    label: string;
+    placeholder?: string;
+    /** Controlled query. Omit for uncontrolled use. */
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    /** Called after any item is chosen, in addition to the item's own handler. */
+    onSelect?: (item: CommandSearchItem) => void;
+    /** Called when Escape is pressed on a field that is already empty. */
+    onEscape?: () => void;
+    /** Renders group headings when items carry a `group`. */
+    grouped?: boolean;
+    /** Secondary line shown under the empty-state title. */
+    emptyHint?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/composer/ComposerAttachmentView.d.ts

@@ -0,0 +1,48 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+
+type NativeComposerAttachmentViewProps = Omit<HTMLAttributes<HTMLElement>, "children" | "title">;
+export type ComposerAttachmentViewProps = NativeComposerAttachmentViewProps & {
+    /** Accessible and visible view heading. */
+    heading?: ReactNode;
+    /** Short file-acquisition instruction below the heading. */
+    description?: ReactNode;
+    /** Product-owned browse-file and browse-folder controls. */
+    acquisitionActions: ReactNode;
+    /** Product-owned selection or drop status. */
+    acquisitionStatus?: ReactNode;
+    /** Product-owned selected resources, queue, progress, or empty state. */
+    children: ReactNode;
+    /** Product-owned Clear, Upload, retry, or equivalent actions. */
+    footerActions: ReactNode;
+    /** Reports the explicit request to return to the Composer. */
+    onClose: () => void;
+    /** Accessible name for the close action. */
+    closeLabel?: string;
+    /** Applies the approved active drop surface without owning drag events. */
+    dragging?: boolean;
+};
+/**
+ * Controlled visual shell for the Composer attachment view. File selection,
+ * queues, transport, retries, and persistence remain product-owned slots.
+ */
+export declare const ComposerAttachmentView: import("react").ForwardRefExoticComponent<NativeComposerAttachmentViewProps & {
+    /** Accessible and visible view heading. */
+    heading?: ReactNode;
+    /** Short file-acquisition instruction below the heading. */
+    description?: ReactNode;
+    /** Product-owned browse-file and browse-folder controls. */
+    acquisitionActions: ReactNode;
+    /** Product-owned selection or drop status. */
+    acquisitionStatus?: ReactNode;
+    /** Product-owned selected resources, queue, progress, or empty state. */
+    children: ReactNode;
+    /** Product-owned Clear, Upload, retry, or equivalent actions. */
+    footerActions: ReactNode;
+    /** Reports the explicit request to return to the Composer. */
+    onClose: () => void;
+    /** Accessible name for the close action. */
+    closeLabel?: string;
+    /** Applies the approved active drop surface without owning drag events. */
+    dragging?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/components/context-cards/ContextCards.d.ts

@@ -0,0 +1,53 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+
+/** File types a retrieved chunk can come from. */
+export type ContextFileType = "PDF" | "CSV" | "XLSX" | "TXT";
+export interface FileTypeChipProps {
+    /** The chunk's source file type. */
+    fileType: ContextFileType;
+}
+/**
+ * A tinted three-or-four letter file-type marker. Each type gets a distinct
+ * semantic tint so a mixed list is scannable at a glance without reading
+ * filenames.
+ */
+export declare function FileTypeChip({ fileType }: FileTypeChipProps): import("react/jsx-runtime").JSX.Element;
+export interface ContextCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Chunk heading — usually the section or table it was taken from. */
+    title: ReactNode;
+    /** Retrieved text. Clamped to three lines and faded, never truncated mid-word with an ellipsis. */
+    excerpt: ReactNode;
+    /** Character count of the full chunk, shown as retrieval metadata. */
+    characterCount?: number;
+    /** File the chunk came from. */
+    fileName: string;
+    /** File type of `fileName`. */
+    fileType: ContextFileType;
+    /**
+     * Optional page or row provenance, e.g. `"p. 4"` or `"rows 120–184"`.
+     */
+    locator?: string;
+}
+/**
+ * One retrieved knowledge chunk. Presentational: the card is not a control, so
+ * it carries no role or tab stop. Wrap it in a button or link at the call site
+ * if opening the source is supported there.
+ */
+export declare const ContextCard: import("react").ForwardRefExoticComponent<ContextCardProps & import("react").RefAttributes<HTMLElement>>;
+export interface ContextCardListProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Group heading. @default "All chunks" */
+    title?: ReactNode;
+    /**
+     * Number shown in the count Tag. Defaults to the number of rendered cards,
+     * so pass it explicitly only when the list is paged or virtualised.
+     */
+    count?: number;
+    /** `ContextCard` children. */
+    children: ReactNode;
+}
+/**
+ * A labelled group of retrieved chunks. Rendered as a `<section>` with its
+ * heading wired through `aria-labelledby`, and the cards themselves in a
+ * `<ul>` so assistive technology announces the group size.
+ */
+export declare const ContextCardList: import("react").ForwardRefExoticComponent<ContextCardListProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/disclosure/Disclosure.d.ts

@@ -0,0 +1,38 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+
+export type DisclosureProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Whether the region is expanded. Disclosure is always controlled. */
+    open: boolean;
+    /** Region content. Padding belongs on the content, never on Disclosure. */
+    children?: ReactNode;
+};
+/**
+ * An animated, controlled disclosure region.
+ *
+ * Disclosure animates its own height between collapsed and expanded using the
+ * `grid-template-rows: 0fr -> 1fr` technique, so content of any size animates
+ * without JavaScript measurement. Open animates over
+ * `--motion-duration-moderate` on `--motion-easing-enter`; close animates over
+ * the shorter `--motion-duration-standard` on `--motion-easing-exit`, matching
+ * the foundations asymmetry rule and the Dialog precedent.
+ *
+ * Boundary — Disclosure is presentational and owns the region only. It does
+ * **not** own the trigger, the chevron, focus management, `aria-expanded`, or
+ * `aria-controls`; the caller already owns those and keeps them on its own
+ * trigger. Pass `id` here and reference it from the trigger's `aria-controls`.
+ *
+ * While closed the content is hidden from the accessibility tree and from the
+ * tab order twice over: `visibility: hidden` is deferred behind the collapse
+ * transition (the pattern already used by `secondary-panel.css` and
+ * `workspace-app-shell.css`), and `inert` is applied immediately so nothing
+ * inside can be focused during the closing transition.
+ *
+ * Under `prefers-reduced-motion: reduce` the height animation is dropped
+ * entirely and the region crossfades at `--motion-duration-fast`.
+ */
+export declare const Disclosure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Whether the region is expanded. Disclosure is always controlled. */
+    open: boolean;
+    /** Region content. Padding belongs on the content, never on Disclosure. */
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/explorer/Explorer.d.ts

@@ -0,0 +1,99 @@
+import { type HTMLAttributes, type MouseEvent, type MouseEventHandler, type ReactNode } from "react";
+
+export type ExplorerUploadFileType = "data" | "structured-data" | "document" | "code" | "notebook" | "image" | "scientific-data" | "archive" | "generic";
+export type ExplorerScientificOutputType = "dataset" | "report" | "figure" | "plot" | "code" | "generic";
+type ExplorerResourceBase = {
+    /** Stable owner-defined identity. IDs are unique across the whole Explorer. */
+    id: string;
+    /** Visible single-line resource name. */
+    name: string;
+    /** Native destination. When omitted, the matching activation callback may own selection. */
+    href?: string;
+};
+export type ExplorerUploadFile = ExplorerResourceBase & {
+    type: "file";
+    fileType: ExplorerUploadFileType;
+};
+export type ExplorerUploadFolder = ExplorerResourceBase & {
+    type: "folder";
+    children: readonly ExplorerUploadNode[];
+};
+export type ExplorerUploadNode = ExplorerUploadFile | ExplorerUploadFolder;
+export type ExplorerScientificOutput = ExplorerResourceBase & {
+    type: "output";
+    outputType: ExplorerScientificOutputType;
+};
+export type ExplorerScientificOutputFolder = ExplorerResourceBase & {
+    type: "folder";
+    children: readonly ExplorerScientificOutputNode[];
+};
+export type ExplorerScientificOutputNode = ExplorerScientificOutput | ExplorerScientificOutputFolder;
+export type ExplorerQuestion = {
+    id: string;
+    name: string;
+    children: readonly ExplorerScientificOutputNode[];
+};
+export type ExplorerLabels = {
+    panel: string;
+    tab: string;
+    panelActions: string;
+    uploads: string;
+    uploadsCount: (count: number) => string;
+    noUploadsTitle: ReactNode;
+    noUploadsDescription: ReactNode;
+    scientificOutputs: string;
+    questionsCount: (count: number) => string;
+    noScientificOutputsTitle: ReactNode;
+    noScientificOutputsDescription: ReactNode;
+    download: (name: string) => string;
+};
+type ResourceClick = MouseEvent<HTMLAnchorElement | HTMLButtonElement>;
+export type ExplorerProps = Omit<HTMLAttributes<HTMLElement>, "children" | "onSelect"> & {
+    uploads?: readonly ExplorerUploadNode[];
+    questions?: readonly ExplorerQuestion[];
+    /** Controlled expanded folder and Question identities. */
+    expandedIds?: readonly string[];
+    /** Initial expanded identities for uncontrolled use. */
+    defaultExpandedIds?: readonly string[];
+    onExpandedIdsChange?: (ids: readonly string[]) => void;
+    onUploadActivate?: (upload: ExplorerUploadFile, event: ResourceClick) => void;
+    onScientificOutputActivate?: (output: ExplorerScientificOutput, event: ResourceClick) => void;
+    /** Independent download action revealed on hover or keyboard focus. */
+    onUploadDownload?: (upload: ExplorerUploadFile, event: MouseEvent<HTMLButtonElement>) => void;
+    /** Independent download action revealed on hover or keyboard focus. */
+    onScientificOutputDownload?: (output: ExplorerScientificOutput, event: MouseEvent<HTMLButtonElement>) => void;
+    onPanelAction?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Renders Explorer's standalone Panel Tab header. Set false when the owning
+     * SecondaryPanel supplies the shared tab collection and panel actions.
+     */
+    showHeader?: boolean;
+    labels?: Partial<ExplorerLabels>;
+};
+/**
+ * Secondary Workspace panel for uploaded files and generated scientific
+ * outputs. Product code owns loading, navigation, previews, and persistence.
+ */
+export declare const Explorer: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children" | "onSelect"> & {
+    uploads?: readonly ExplorerUploadNode[];
+    questions?: readonly ExplorerQuestion[];
+    /** Controlled expanded folder and Question identities. */
+    expandedIds?: readonly string[];
+    /** Initial expanded identities for uncontrolled use. */
+    defaultExpandedIds?: readonly string[];
+    onExpandedIdsChange?: (ids: readonly string[]) => void;
+    onUploadActivate?: (upload: ExplorerUploadFile, event: ResourceClick) => void;
+    onScientificOutputActivate?: (output: ExplorerScientificOutput, event: ResourceClick) => void;
+    /** Independent download action revealed on hover or keyboard focus. */
+    onUploadDownload?: (upload: ExplorerUploadFile, event: MouseEvent<HTMLButtonElement>) => void;
+    /** Independent download action revealed on hover or keyboard focus. */
+    onScientificOutputDownload?: (output: ExplorerScientificOutput, event: MouseEvent<HTMLButtonElement>) => void;
+    onPanelAction?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Renders Explorer's standalone Panel Tab header. Set false when the owning
+     * SecondaryPanel supplies the shared tab collection and panel actions.
+     */
+    showHeader?: boolean;
+    labels?: Partial<ExplorerLabels>;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/components/field-message/FieldMessage.d.ts

@@ -13,6 +13,18 @@ export type FieldMessageProps = Omit<HTMLAttributes<HTMLParagraphElement>, "chil
 /**
  * Supporting or validation text for one form control. The consumer owns the
  * ID, ARIA relationship, live-region policy, and validation behavior.
+ *
+ * The message reveals itself on mount rather than popping in: an outer grid
+ * wrapper animates `grid-template-rows: 0fr -> 1fr` from a CSS
+ * `@starting-style` rule, so surrounding layout eases open instead of jumping.
+ * The wrapper is purely presentational — every prop, the `className`, the
+ * forwarded ref, `role="alert"`, and the ARIA relationship stay on the same
+ * `<p>` element they were on before, so nothing about the announcement is
+ * delayed, duplicated, or moved. Browsers without `@starting-style` simply
+ * show the message immediately.
+ *
+ * Exit is owned by the consumer, because the consumer owns the unmount. Wrap
+ * FieldMessage in `Disclosure` and keep it mounted to animate it away.
  */
 export declare const FieldMessage: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLParagraphElement>, "children" | "className"> & VariantProps<(props?: ({
     tone?: "error" | "helper" | "warning" | null | undefined;

package/dist/components/filter-table/FilterTable.d.ts

@@ -0,0 +1,61 @@
+import { type HTMLAttributes } from "react";
+
+export declare const filterTableStatuses: readonly ["to-do", "in-progress", "completed"];
+export type FilterTableStatus = (typeof filterTableStatuses)[number];
+export type FilterTableRow = {
+    /** Stable row identity. */
+    id: string;
+    /** Primary task name. */
+    name: string;
+    /** Preformatted date string; rendered with tabular figures. */
+    date: string;
+    status: FilterTableStatus;
+    /** Person or team accountable for the task. */
+    owner: string;
+    /** Optional secondary line under the task name. */
+    detail?: string;
+};
+export type FilterTableProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
+    rows: readonly FilterTableRow[];
+    /** Required accessible name for the table. */
+    caption: string;
+    /** Controlled filter. `null` shows every row. */
+    filter?: FilterTableStatus | null;
+    /** Initial filter for uncontrolled use. */
+    defaultFilter?: FilterTableStatus | null;
+    onFilterChange?: (filter: FilterTableStatus | null) => void;
+    /** Label used on the "show everything" chip. */
+    allLabel?: string;
+    /** Column headers, in render order. */
+    headers?: {
+        name: string;
+        date: string;
+        status: string;
+        owner: string;
+    };
+};
+/**
+ * A light task table whose status chips reorganize the visible rows in place.
+ * Row movement is animated with a FLIP pass that only touches `transform`.
+ */
+export declare const FilterTable: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
+    rows: readonly FilterTableRow[];
+    /** Required accessible name for the table. */
+    caption: string;
+    /** Controlled filter. `null` shows every row. */
+    filter?: FilterTableStatus | null;
+    /** Initial filter for uncontrolled use. */
+    defaultFilter?: FilterTableStatus | null;
+    onFilterChange?: (filter: FilterTableStatus | null) => void;
+    /** Label used on the "show everything" chip. */
+    allLabel?: string;
+    /** Column headers, in render order. */
+    headers?: {
+        name: string;
+        date: string;
+        status: string;
+        owner: string;
+    };
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type FilterTableStatusLabelMap = Record<FilterTableStatus, string>;
+export declare const filterTableStatusLabels: FilterTableStatusLabelMap;

package/dist/components/flap-text/FlapText.d.ts

@@ -0,0 +1,68 @@
+import { type CSSProperties } from "react";
+
+/**
+ * Milliseconds one cell spends flipping. Mirrors `--motion-duration-moderate`;
+ * the CSS reads the token directly and only falls back to this number when the
+ * caller overrides `flapDuration`.
+ */
+export declare const FLAP_TEXT_DEFAULT_DURATION_MS = 220;
+/** Milliseconds each successive cell waits before it starts flipping. */
+export declare const FLAP_TEXT_DEFAULT_STAGGER_MS = 18;
+export type FlapTextElement = "span" | "div" | "p" | "strong" | "em";
+export type FlapTextAlign = "start" | "center" | "end";
+export interface FlapTextProps {
+    /** The string to display. Changing it flips the characters that differ. */
+    text: string;
+    /** Host element. @default "span" */
+    as?: FlapTextElement;
+    /** Per-character delay, in milliseconds. @default 18 */
+    stagger?: number;
+    /** Flip duration, in milliseconds. @default `--motion-duration-moderate` */
+    flapDuration?: number;
+    /** Horizontal alignment of the rendered line. @default "start" */
+    align?: FlapTextAlign;
+    className?: string;
+    style?: CSSProperties;
+}
+export type FlapCell = {
+    /** Glyph shown once the cell settles. */
+    char: string;
+    /** Glyph rotating out, or `null` when the cell is new or settled. */
+    previous: string | null;
+    /** Whether this cell is mid-flip. */
+    flap: boolean;
+    /** Trailing cell that disappears when the text got shorter. */
+    exiting: boolean;
+};
+/**
+ * A Solari board only moves the cells whose glyph actually changed. Identical
+ * characters at the same index stay perfectly still, which is both faithful and
+ * far calmer to read.
+ */
+export declare function flapTextCells(previous: string, next: string): FlapCell[];
+/**
+ * Split-flap text.
+ *
+ * Each character is its own cell. When `text` changes, only the cells whose
+ * glyph differs flip: the old glyph rotates away around the horizontal midline
+ * while the new one rotates in behind it, staggered left to right.
+ *
+ * Sharpness: cells are inline-block with `preserve-3d` and hidden backfaces,
+ * `will-change: transform` is present only while a cell is actually flipping,
+ * and settled cells carry `transform: none` exactly — never an identity matrix
+ * — so the browser re-rasterises the glyph at full fidelity. No scale is ever
+ * applied, and the component sets no font property, so text metrics are the
+ * caller's.
+ *
+ * Accessibility: cells are `aria-hidden`, the host carries `aria-label={text}`,
+ * and a visually hidden polite live region announces one clean string.
+ *
+ * Reduced motion: no 3D at all — a fast opacity crossfade swaps the glyph.
+ */
+export declare function FlapText({ text, as, stagger, flapDuration, align, className, style, }: FlapTextProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+    style: CSSProperties | undefined;
+    "aria-label": string;
+    "data-align": FlapTextAlign;
+    "data-flapping": string;
+}, HTMLElement>;