@trembus/ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1867 @@
+import { ComponentContract } from '@trembus/tokens/contract';
+import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
+import { CSSProperties } from 'react';
+import { ElementType } from 'react';
+import { ElevationToken } from '@trembus/tokens';
+import { FocusEventHandler } from 'react';
+import { FontWeightToken } from '@trembus/tokens';
+import { HTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JobSatisfaction } from '@trembus/tokens/contract';
+import { JSX } from 'react';
+import { KeyboardEventHandler } from 'react';
+import { MaterialTone } from '@trembus/tokens';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { MouseEventHandler } from 'react';
+import { PointerEventHandler } from 'react';
+import { PropsWithChildren } from 'react';
+import { RadiusToken } from '@trembus/tokens';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { RefCallback } from 'react';
+import { RefObject } from 'react';
+import { SelectHTMLAttributes } from 'react';
+import { SpaceToken } from '@trembus/tokens';
+import { StatusTone } from '@trembus/tokens';
+import { SurfaceTone } from '@trembus/tokens';
+import { SyntheticEvent } from 'react';
+import { TableHTMLAttributes } from 'react';
+import { TdHTMLAttributes } from 'react';
+import { TextareaHTMLAttributes } from 'react';
+import { TextTone } from '@trembus/tokens';
+import { ThemeName } from '@trembus/tokens';
+import { ThHTMLAttributes } from 'react';
+import { Tokens } from '@trembus/tokens';
+import { tokens } from '@trembus/tokens';
+import { TypeToken } from '@trembus/tokens';
+import { UIJob } from '@trembus/tokens/contract';
+import { ZToken } from '@trembus/tokens';
+
+export declare interface AffordanceDataAttrs {
+    'data-state': AffordanceState;
+    'aria-disabled'?: true;
+    'aria-busy'?: true;
+}
+
+export declare interface AffordanceHandlers {
+    onPointerEnter: PointerEventHandler;
+    onPointerLeave: PointerEventHandler;
+    onPointerDown: PointerEventHandler;
+    onPointerUp: PointerEventHandler;
+    onKeyDown: KeyboardEventHandler;
+    onKeyUp: KeyboardEventHandler;
+    onFocus: FocusEventHandler;
+    onBlur: FocusEventHandler;
+    onClick: MouseEventHandler;
+}
+
+/**
+ * The Affordance state machine — the SINGLE source of interaction state for the
+ * whole library (the vault primitive: an input-accepting region with an
+ * idle → hover → pressed → focus → disabled machine). Every interactive
+ * component consumes this so feedback (Job #3, Acknowledge Input) is structural,
+ * not re-implemented per component. CSS targets the emitted `[data-state]`.
+ */
+export declare type AffordanceState = 'idle' | 'hover' | 'pressed' | 'focus-visible' | 'disabled';
+
+/**
+ * `Stack` / `Inline` — the Relation primitive (order + grouping made visual).
+ * Thin flex layers over `Box`: `Stack` stacks vertically, `Inline` flows
+ * horizontally. Both inherit every `Box` prop (`as`, surface, padding…).
+ */
+declare type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+
+/**
+ * Polymorphic component typing — lets a primitive change its rendered element
+ * via an `as` prop while staying fully type-safe (props follow the element).
+ */
+declare type AsProp<C extends ElementType> = {
+    as?: C;
+};
+
+export declare function Avatar({ src, alt, name, size, shape, tone, className, ...rest }: AvatarProps): JSX.Element;
+
+export declare interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** Image URL. Falls back to initials, then a glyph, on error or absence. */
+    src?: string;
+    /** Accessible name. Falls back to `name`. */
+    alt?: string;
+    /** Person/entity name — used for initials and as the accessible name. */
+    name?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'circle' | 'square';
+    /** Tints the initials fallback via the color-coded ontology. */
+    tone?: StatusTone;
+}
+
+export declare function Badge({ tone, variant, size, dot, className, children, ...rest }: BadgeProps): JSX.Element;
+
+export declare interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** Status/intent — the color-coded ontology. */
+    tone?: BadgeTone;
+    variant?: 'soft' | 'solid' | 'outline';
+    size?: 'sm' | 'md';
+    /** Leading status dot glyph. */
+    dot?: boolean;
+    children?: ReactNode;
+}
+
+declare type BadgeTone = StatusTone | 'accent';
+
+export declare function BarChart({ data, selectedId: selProp, defaultSelectedId, onSelect, height, className, }: BarChartProps): JSX.Element;
+
+export declare interface BarChartContract {
+    view?: 'bar-chart';
+    brand?: string;
+    code?: string;
+    title?: string;
+    caption?: string;
+    /** Unit suffix appended to every value label (e.g. `%`, `ms`, `k`). */
+    unit?: string;
+    orientation?: 'vertical' | 'horizontal';
+    /** Force the axis maximum; otherwise derived from the data (and markers). */
+    max?: number;
+    /** Reference lines drawn across the plot (a target / threshold). */
+    markers?: BarChartMarker[];
+    /** Single-series data — each datum is a bar. */
+    bars?: BarDatum[];
+    /** Clustered multi-series data — pair with `categories` (one cluster per category). */
+    series?: BarSeries[];
+    /** Category (x) labels shared across all `series`. */
+    categories?: string[];
+}
+
+export declare interface BarChartMarker {
+    /** Axis position of the reference line. */
+    value: number;
+    label?: string;
+    tone?: BarTone;
+}
+
+export declare interface BarChartProps {
+    data: BarChartContract;
+    /** Controlled selected bar id. */
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onSelect?: (id: string) => void;
+    /** Plot height in px (vertical orientation only; horizontal sizes intrinsically). */
+    height?: number;
+    className?: string;
+}
+
+export declare interface BarDatum {
+    /** Stable id for selection; falls back to `label`. */
+    id?: string;
+    /** Category label — the axis tick. */
+    label: string;
+    /** Magnitude (non-negative). */
+    value: number;
+    /** Color-coded tone for the bar (default `accent`). */
+    tone?: BarTone;
+    /** Explicit bar color (hex) — overrides `tone`. */
+    color?: string;
+    /** Small caption shown beside the value in the inspector. */
+    sub?: string;
+    /** Inspector detail shown when this bar is selected. */
+    note?: string;
+}
+
+export declare interface BarSeries {
+    /** Stable id for selection; falls back to the series index. */
+    id?: string;
+    /** Series name — shown in the legend and the selected bar's accessible name. */
+    name: string;
+    /** Color-coded tone (defaults cycle through the ontology by series order). */
+    tone?: BarTone;
+    /** Explicit series color (hex) — overrides `tone`. */
+    color?: string;
+    /** Values aligned to `categories`; `null`/non-finite leaves an empty slot. */
+    values: (number | null)[];
+}
+
+/**
+ * `BarChart` — a categorical magnitude chart (vertical columns or horizontal bars).
+ *
+ * It consumes a Trembus Visual Grammar **bar-chart contract** — the same authored
+ * JSON shape the static HTML kit renders — so one contract draws in both places.
+ * Each bar is color-coded by tone against a shared axis; selecting a bar inspects
+ * its detail in a live panel. Values are assumed non-negative.
+ *
+ * Two shapes are supported: a single series (`bars`) and clustered multi-series
+ * (`series` + `categories`), which groups one bar per series under each category.
+ */
+export declare type BarTone = FillBarTone;
+
+export declare function Box<C extends ElementType = 'div'>(props: BoxProps<C>): JSX.Element;
+
+/**
+ * `Box` — the Surface primitive (and carrier of Marks). A bounded region with
+ * padding, an optional surface treatment, radius, border, and z-layer. Spacing
+ * is expressed only in token steps, never raw px, so the "bounded region"
+ * abstraction stays honest. Polymorphic via `as`.
+ */
+export declare interface BoxOwnProps {
+    surface?: SurfaceTone;
+    /** Material skin (e.g. frosted `glass`) applied via [data-material]; tune with the --tcl-mat-* knobs. */
+    material?: MaterialTone;
+    radius?: RadiusToken;
+    border?: boolean | 'soft' | 'strong';
+    z?: ZToken;
+    p?: SpaceToken;
+    px?: SpaceToken;
+    py?: SpaceToken;
+    pt?: SpaceToken;
+    pr?: SpaceToken;
+    pb?: SpaceToken;
+    pl?: SpaceToken;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+
+export declare type BoxProps<C extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<C, BoxOwnProps>;
+
+export declare function Brief({ data, defaultCollapsed, className }: BriefProps): JSX.Element;
+
+export declare interface BriefContract {
+    view?: 'brief';
+    /** Doc archetype — drives the header glyph + accent. */
+    kind?: BriefKind;
+    /** Gold mono code-title, e.g. 'claude.trembus-ui'. */
+    id?: string;
+    /** Human title (the `#` H1). Falls back to `id`. */
+    title?: string;
+    /** The intro paragraph. */
+    summary?: string;
+    /** Header pills (status / updated / owner / version). */
+    meta?: BriefMeta[];
+    sections?: BriefSection[];
+}
+
+export declare interface BriefIssue {
+    /** Path to the offending node, e.g. "sections[2].items[0].severity". */
+    path: string;
+    level: 'error' | 'warn' | 'info';
+    message: string;
+    got?: string;
+    expected?: string;
+    /** Nearest blessed value, when the input looks like a typo. */
+    didYouMean?: string;
+}
+
+/** A list item — a bare string is the common case; the object adds optional facets. */
+export declare type BriefItem = string | {
+    text: string;
+    /** Secondary text: a command's gloss, an artifact's purpose, a rule's rationale. */
+    desc?: string;
+    /** Free-text status, shown as a trailing chip. */
+    status?: string;
+    /** Checklist emphasis. */
+    severity?: Severity;
+    /** A pointer (path or url) — a mono chip, or a link when it's an http(s) url. */
+    ref?: string;
+    /** Decisions: the chosen option for this `text` (the question/title). */
+    choice?: string;
+};
+
+/**
+ * `Brief` — renders an agent-instruction or planning document (CLAUDE.md,
+ * AGENTS.md, a plan, a spec) as a structured, navigable visual.
+ *
+ * It consumes a Trembus Visual Grammar **brief contract** (`view: 'brief'`),
+ * designed as a near-isomorphism of the source markdown's own outline: a titled
+ * doc + meta pills + an ordered list of `kind`-tagged sections. That shape lets
+ * an LLM "generator" transcribe a doc into the contract almost mechanically.
+ *
+ * The contract is deliberately permissive so a partial or slightly-off
+ * generation still renders: every field but item `text` is optional, list items
+ * accept a bare string OR an object, and an unknown section `kind` degrades to
+ * prose. Lenient parse, strict render.
+ */
+export declare type BriefKind = 'claude' | 'agents' | 'plan' | 'spec' | (string & {});
+
+export declare interface BriefMeta {
+    label: string;
+    value: string | number;
+    /** Pill accent (hex). */
+    tone?: string;
+}
+
+export declare interface BriefParseResult {
+    /** Always renderable — lenient parse, strict render. `sections` is always present. */
+    data: BriefContract & {
+        sections: BriefSection[];
+    };
+    issues: BriefIssue[];
+    /** True when no issue is an error (faithful, not merely renderable). */
+    ok: boolean;
+}
+
+export declare interface BriefProps {
+    data: BriefContract;
+    /** Section ids collapsed initially (everything expanded otherwise). */
+    defaultCollapsed?: string[];
+    className?: string;
+}
+
+export declare interface BriefSection {
+    id?: string;
+    /** Section heading (the markdown `##`). Falls back to the kind label if omitted. */
+    heading?: string;
+    /** How to render the items. Unknown/omitted → 'prose'. */
+    kind?: SectionKind;
+    /** Lead-in prose shown under the heading, before items. */
+    note?: string;
+    /** Prose body (alternative to items for `kind: 'prose'`). */
+    body?: string;
+    items?: BriefItem[];
+}
+
+/** Resolves the layout props of a Box into a style object (exported for reuse). */
+export declare function buildBoxStyle(props: BoxOwnProps): CSSProperties;
+
+export declare function Button({ variant, tone, size, loading, disabled, fullWidth, asChild, startSlot, endSlot, onPress, className, children, ...rest }: ButtonProps): JSX.Element;
+
+export declare interface ButtonProps {
+    variant?: 'solid' | 'outline' | 'ghost';
+    /** Intent — maps to the color-coded ontology. */
+    tone?: ButtonTone;
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    /** Lend Button's style + behavior to your own element (single child). */
+    asChild?: boolean;
+    startSlot?: ReactNode;
+    endSlot?: ReactNode;
+    onPress?: (event: SyntheticEvent) => void;
+    type?: 'button' | 'submit' | 'reset';
+    className?: string;
+    children?: ReactNode;
+    /** Forwarded to the underlying <button> (or the asChild element). */
+    ref?: Ref<HTMLButtonElement>;
+    'aria-label'?: string;
+}
+
+declare type ButtonTone = 'accent' | StatusTone;
+
+export declare function Callout({ tone, title, icon, onDismiss, dismissLabel, className, children, ...rest }: CalloutProps): JSX.Element;
+
+export declare interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Status/intent — the color-coded ontology (default `info`). */
+    tone?: CalloutTone;
+    /** Bold lead line above the body. */
+    title?: ReactNode;
+    /** Leading glyph; defaults to a per-tone icon. Pass `null` to hide it. */
+    icon?: ReactNode;
+    /** When set, renders a close button that calls this on click. */
+    onDismiss?: () => void;
+    /** Accessible name for the dismiss button (default "Dismiss"). */
+    dismissLabel?: string;
+    children?: ReactNode;
+}
+
+/**
+ * `Callout` — a tone-tinted banner that draws the eye to a contextual message
+ * (info / success / warning / danger / neutral / accent). It pairs the color-coded
+ * ontology (like `Badge`) with a raised, padded surface (like `Card`): a left
+ * accent rail + tone icon reveal the status, while the body can carry inline
+ * `<code>` and links. When `onDismiss` is set it gains a close button — the
+ * afford/acknowledge jobs.
+ */
+export declare type CalloutTone = StatusTone | 'accent';
+
+/**
+ * `Card` — a raised surface that groups related content into one perceivable
+ * unit. Compound API: `<Card><Card.Header/><Card.Body/><Card.Footer/></Card>`.
+ */
+export declare const Card: typeof CardRoot & {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+};
+
+declare function CardBody({ className, children, ...rest }: CardSectionProps): JSX.Element;
+
+declare function CardFooter({ className, children, ...rest }: CardSectionProps): JSX.Element;
+
+declare function CardHeader({ className, children, ...rest }: CardSectionProps): JSX.Element;
+
+export declare interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Adds a hover affordance (pair with an interactive child or wrap in a link). */
+    interactive?: boolean;
+}
+
+declare function CardRoot({ interactive, className, children, ...rest }: CardProps): JSX.Element;
+
+export declare interface CardSectionProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+export declare type CellAlign = 'start' | 'center' | 'end';
+
+export declare function Checkbox({ label, description, indeterminate, disabled, className, id, ref, ...rest }: CheckboxProps): JSX.Element;
+
+export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label?: ReactNode;
+    description?: string;
+    /** Tri-state — shows a dash and sets the DOM `indeterminate` property. */
+    indeterminate?: boolean;
+    ref?: Ref<HTMLInputElement>;
+}
+
+export declare type ClassValue = string | number | false | null | undefined;
+
+export { ComponentContract }
+
+/** Combine multiple refs into one callback ref. */
+export declare function composeRefs<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T>;
+
+/** Tiny className combiner — filters falsy values and joins with spaces. */
+export declare function cx(...values: ClassValue[]): string;
+
+export declare type DataChipTone = StatusTone | 'accent';
+
+export declare interface DataFilter {
+    /** Stable id — used for React keys + the remove callback. Falls back to the
+     *  index, NEVER the label (duplicate labels would collide). */
+    id?: string;
+    /** Parameter name, e.g. "Period". */
+    label: string;
+    /** Applied value, e.g. "Q2 FY26". */
+    value: ReactNode;
+    /** Chip accent (default `neutral`); use `accent` for the primary parameter. */
+    tone?: DataChipTone;
+}
+
+export declare interface DataMetric {
+    /** Stable id — falls back to the index, never the label. */
+    id?: string;
+    /** Unit/dimension, e.g. "records". */
+    label: string;
+    /** Scalar, e.g. "1,284". */
+    value: ReactNode;
+}
+
+/**
+ * `DataStatusBar` — the context strip that frames a data view (a KPI grid, a
+ * report, a dashboard). It answers two questions at a glance: *can I trust this
+ * data right now?* and *what parameters produced it?*
+ *
+ * - **Reveal state (lead):** a color-coded status dot + label (live / stale /
+ *   loading / error / partial / paused), a freshness readout, and scope metrics
+ *   (record count, coverage…) sit in a `role="status"` live region — flip the
+ *   `status` prop and a screen reader announces the change.
+ * - **Afford action:** each active parameter is a chip; pass `onRemoveFilter` to
+ *   give every chip a remove button, and `onRefresh` for a re-pull control.
+ * - **Acknowledge input:** removing a chip or refreshing fires the callback so the
+ *   host updates the data; the live region re-announces the new status.
+ *
+ * Presentational by default — with no `onRemoveFilter`/`onRefresh` it is a static
+ * read-out (like `Badge`/`Callout`), still carrying the live status region.
+ */
+export declare type DataStatus = 'live' | 'stale' | 'loading' | 'error' | 'partial' | 'paused';
+
+export declare function DataStatusBar({ status, statusLabel, title, updatedAt, updatedLabel, metrics, filters, onRemoveFilter, removeFilterLabel, onRefresh, refreshLabel, 'aria-label': ariaLabel, dense, className, ...rest }: DataStatusBarProps): JSX.Element;
+
+export declare interface DataStatusBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Freshness/health of the data (default `live`). Drives the dot + live region. */
+    status?: DataStatus;
+    /** Override the default status word (e.g. "Streaming" instead of "Live"). */
+    statusLabel?: ReactNode;
+    /** Dataset name shown at the start of the bar (e.g. "Delivery KPIs"). */
+    title?: ReactNode;
+    /** Machine timestamp for the `<time>` element (ISO string / epoch ms / Date). */
+    updatedAt?: string | number | Date;
+    /** Human freshness text, e.g. "Updated 4m ago". Rendered inside `<time>` when
+     *  `updatedAt` is also set, otherwise as plain text. */
+    updatedLabel?: ReactNode;
+    /** Scope metrics — record counts, coverage, anything quantifying the slice. */
+    metrics?: ReadonlyArray<DataMetric>;
+    /** The active parameters/filters that scoped this data. */
+    filters?: ReadonlyArray<DataFilter>;
+    /** When set, every chip gains a remove button that calls this with the filter. */
+    onRemoveFilter?: (id: string, filter: DataFilter) => void;
+    /** Builds the remove button's accessible name (default "Remove {label} filter"). */
+    removeFilterLabel?: (filter: DataFilter) => string;
+    /** When set, renders a refresh button that calls this; disabled while loading. */
+    onRefresh?: () => void;
+    /** Accessible name + text for the refresh button (default "Refresh"). */
+    refreshLabel?: ReactNode;
+    /** Accessible name for the whole region (default "Data status"). */
+    'aria-label'?: string;
+    /** Compact height + tighter spacing for embedding above dense tables. */
+    dense?: boolean;
+}
+
+/**
+ * `Dialog` — a focus-trapped modal. Proves the portal + focus-trap + ARIA spine
+ * that Tooltip/Menu/Toast/Select reuse. On open it moves focus inside, traps
+ * Tab, locks scroll, and closes on Esc / overlay press; on close it returns
+ * focus to the element that opened it.
+ */
+export declare function Dialog({ open, onClose, title, description, children, footer, size, closeOnOverlayClick, closeOnEsc, className, }: DialogProps): JSX.Element | null;
+
+export declare interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    children?: ReactNode;
+    footer?: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    className?: string;
+}
+
+export declare function DonutChart({ data, selectedId: selProp, defaultSelectedId, onSelect, size, className, }: DonutChartProps): JSX.Element;
+
+export declare interface DonutChartProps {
+    data: DonutContract;
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onSelect?: (id: string) => void;
+    /** Ring diameter in px (default 160). */
+    size?: number;
+    className?: string;
+}
+
+export declare interface DonutContract {
+    view?: 'donut';
+    brand?: string;
+    code?: string;
+    title?: string;
+    caption?: string;
+    /** Unit appended to segment values (e.g. `h`, `%`). */
+    unit?: string;
+    /** Big text in the ring center (defaults to the total). */
+    centerValue?: string;
+    /** Small label under the center value. */
+    centerLabel?: string;
+    segments: DonutSegment[];
+}
+
+export declare interface DonutSegment {
+    /** Stable id for selection; falls back to `label`. */
+    id?: string;
+    label: string;
+    /** Magnitude (non-negative). */
+    value: number;
+    tone?: DonutTone;
+    /** Explicit segment color (hex) — overrides `tone`. */
+    color?: string;
+    /** Inspector detail shown when this segment is selected. */
+    note?: string;
+}
+
+/**
+ * `DonutChart` — a proportion ring with a center readout and an interactive
+ * legend. It consumes a Trembus Visual Grammar **donut contract**. The ring is
+ * drawn in SVG (decorative); the legend rows are the affordance — selecting one
+ * (the Hub/BarChart spine) emphasizes its segment, swaps the center readout, and
+ * reveals its share in a live inspector.
+ */
+export declare type DonutTone = FillBarTone;
+
+export { ElevationToken }
+
+export declare function EmptyState({ icon, title, description, pendingSource, badge, action, className, ...rest }: EmptyStateProps): JSX.Element;
+
+/**
+ * `EmptyState` — the deliberate "nothing here (yet)" placeholder: no data, an
+ * awaiting/unexposed source, or a pending work-start confirmation (the PMO
+ * pending tile). A glyph + title + description orient the reader; an optional
+ * mono "pending source" chip names the missing feed, and an optional action slot
+ * offers the next step. Distinct from `Skeleton`, which represents content that
+ * is *loading*; an EmptyState represents content that is genuinely absent.
+ */
+export declare interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Leading glyph/illustration; defaults to an empty-set mark. Pass `null` to hide. */
+    icon?: ReactNode;
+    /** Headline naming what's missing. */
+    title: ReactNode;
+    /** Supporting line(s) explaining why / what to do. */
+    description?: ReactNode;
+    /** Mono code chip naming a data source that isn't exposed yet (e.g. `wsc.pending`). */
+    pendingSource?: string;
+    /** Optional status pill (e.g. a `<Badge>`Awaiting WSC`</Badge>`). */
+    badge?: ReactNode;
+    /** Optional call-to-action (e.g. a `<Button>`). */
+    action?: ReactNode;
+}
+
+declare type FillBarSize = 'sm' | 'md' | 'lg';
+
+declare type FillBarTone = 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+
+export { FontWeightToken }
+
+/**
+ * Deterministically convert a CLAUDE.md / AGENTS.md / plan markdown doc into a
+ * BriefContract. Model-free: the H1 is the title, leading prose is the summary,
+ * each H2 is a section whose `kind` is inferred from its content (code →
+ * commands, "Gotchas" → checklist, prose → prose, …). Pair with parseBrief() to
+ * validate. Imperfect kind inference is fine — the renderer degrades gracefully.
+ */
+export declare function fromMarkdown(md: string): BriefContract & {
+    sections: BriefSection[];
+};
+
+export declare function Funnel({ data, selectedId: selProp, defaultSelectedId, onSelect, className, }: FunnelProps): JSX.Element;
+
+export declare interface FunnelContract {
+    view?: 'funnel';
+    brand?: string;
+    code?: string;
+    title?: string;
+    caption?: string;
+    /** Unit suffix appended to every value label (e.g. `%`, `k`). */
+    unit?: string;
+    stages: FunnelStage[];
+}
+
+export declare interface FunnelProps {
+    data: FunnelContract;
+    /** Controlled selected stage id. */
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onSelect?: (id: string) => void;
+    className?: string;
+}
+
+export declare interface FunnelStage {
+    /** Stable id for selection; falls back to the stage index. */
+    id?: string;
+    /** Stage label — the conversion step. */
+    label: string;
+    /** Magnitude (non-negative). */
+    value: number;
+    /** Color-coded tone for the bar (default `accent`). */
+    tone?: FunnelTone;
+    /** Explicit bar color (hex) — overrides `tone`. */
+    color?: string;
+    /** Inspector detail shown when this stage is selected. */
+    note?: string;
+}
+
+/**
+ * `Funnel` — a descending conversion chart (e.g. Booked → Approved → Pending).
+ * Each stage is a horizontal bar sized against the top stage and a focusable
+ * button (the Hub/BarChart interaction spine); selecting one reveals its value,
+ * conversion versus the top, and the drop from the previous stage in a live
+ * inspector. It consumes a Trembus Visual Grammar **funnel contract** so one
+ * authored shape draws in both the static HTML kit and React.
+ */
+export declare type FunnelTone = FillBarTone;
+
+export declare function Gauge({ value, min, max, unit, zones, target, label, ariaLabel, tone, className, }: GaugeProps): JSX.Element;
+
+export declare interface GaugeProps {
+    value: number;
+    min?: number;
+    max: number;
+    /** Unit appended to the value readout (e.g. `d`, `%`). */
+    unit?: string;
+    /** Colored quality bands along the arc; without them the arc fills to `value`. */
+    zones?: GaugeZone[];
+    /** A threshold tick drawn on the arc. */
+    target?: {
+        value: number;
+        label?: string;
+    };
+    /** Metric name shown under the value. */
+    label?: string;
+    /** Accessible name for the meter (defaults to `label`). */
+    ariaLabel?: string;
+    /** Base tone for the value arc when no `zones` are given (default `accent`). */
+    tone?: GaugeTone;
+    className?: string;
+}
+
+/**
+ * `Gauge` — a 180° dial: a value drawn as a needle against optional colored
+ * quality zones (e.g. green/amber/red) and a target tick. Presentational like
+ * `Sparkline`/`Meter` — it reports a single measurement and exposes it to
+ * assistive tech via `role=meter` + `aria-valuetext`.
+ */
+export declare type GaugeTone = FillBarTone;
+
+export declare interface GaugeZone {
+    /** Upper bound of this band, in value units (bands run from the prior bound). */
+    upTo: number;
+    tone?: GaugeTone;
+    color?: string;
+    /** Short name announced when the value falls in this band (e.g. "on target"). */
+    label?: string;
+}
+
+export declare function Heatmap({ data, selectedId: selProp, defaultSelectedId, onSelect, className, }: HeatmapProps): JSX.Element;
+
+export declare interface HeatmapContract {
+    view?: 'heatmap';
+    brand?: string;
+    code?: string;
+    title?: string;
+    caption?: string;
+    /** Unit appended to cell values (e.g. `%`, `d`). */
+    unit?: string;
+    /** Column (x) labels along the top. */
+    columns: string[];
+    rows: HeatmapRow[];
+    /** Bucketed color scale; when omitted, a continuous intensity of `tone` is used. */
+    stops?: HeatmapStop[];
+    /** Base tone for the continuous scale (default `accent`). */
+    tone?: HeatTone;
+    /** Domain for the continuous scale; defaults to the data extent. */
+    min?: number;
+    max?: number;
+    /** Print the value inside each cell (good for small grids). */
+    showValues?: boolean;
+}
+
+export declare interface HeatmapProps {
+    data: HeatmapContract;
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onSelect?: (id: string) => void;
+    className?: string;
+}
+
+export declare interface HeatmapRow {
+    label: string;
+    /** Optional secondary label (e.g. a department) shown in the inspector. */
+    sub?: string;
+    /** Values aligned to `columns`; `null` is a no-data cell. */
+    cells: (number | null)[];
+}
+
+export declare interface HeatmapStop {
+    /** Lower bound this bucket applies from. */
+    at: number;
+    tone?: HeatTone;
+    color?: string;
+    label?: string;
+}
+
+/**
+ * `Heatmap` — a value-colored cell matrix (rows × columns). It consumes a Trembus
+ * Visual Grammar **heatmap contract**. Cells are real focusable buttons (the
+ * Hub/BarChart spine): each is shaded by a bucketed or continuous scale and, when
+ * selected, reveals its row, column, and value in a live inspector.
+ */
+export declare type HeatTone = FillBarTone;
+
+export declare function Hub({ data, selectedId: selProp, defaultSelectedId, onSelect, size, className, }: HubProps): JSX.Element;
+
+export declare interface HubContract {
+    view?: 'hub';
+    brand?: string;
+    code?: string;
+    tagline?: string;
+    taglineNote?: string;
+    /** Tagline pill color (hex). */
+    tone?: string;
+    sub?: string;
+    axis?: string;
+    stats?: HubStat[];
+    domains: HubDomain[];
+}
+
+export declare interface HubDomain {
+    id: string;
+    /** Hex slot — legacy VG names (hub/robot/blood/decay/spirit/fate/shared),
+     *  generic slots (center/n/ne/se/s/sw/nw), or omit to auto-place by order. */
+    pos?: string;
+    kind: HubDomainKind;
+    tag: string;
+    name: string;
+    sub: string;
+    status: string;
+    /** Accent dot color (hex). */
+    dot?: string;
+    /** Inspector detail shown when the tile is selected. */
+    note?: string;
+    sources?: HubSource[];
+}
+
+/**
+ * `Hub` — a hex-flower overview (one reserved center + up to six domain petals).
+ *
+ * It consumes the Trembus Visual Grammar **hub contract** — the same JSON shape
+ * as `canonical/kits/visual-grammar/schema/hub.schema.json`. So a `hub.example.json`
+ * authored for the static HTML kit renders here unchanged. Geometry is the kit's
+ * flat-top "6 around 1" flower, computed from a single `size`.
+ */
+export declare type HubDomainKind = 'center' | 'shipped' | 'current' | 'planned';
+
+export declare interface HubProps {
+    data: HubContract;
+    /** Controlled selected domain id. */
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onSelect?: (id: string) => void;
+    /** Hex tile width in px (height derives as ~0.866×). */
+    size?: number;
+    className?: string;
+}
+
+export declare type HubSlot = 'center' | 'n' | 'ne' | 'se' | 's' | 'sw' | 'nw';
+
+export declare type HubSource = string | {
+    label: string;
+    href?: string;
+};
+
+export declare interface HubStat {
+    label: string;
+    value: string | number;
+    color?: string;
+}
+
+/**
+ * `IconButton` — a compact, square affordance for a single icon. Composes
+ * `Button` (so it inherits every tone/variant), and *requires* an `aria-label`
+ * because an icon has no text to name it (Job #2, Afford Action: the capability
+ * must be reachable and named).
+ */
+export declare function IconButton({ variant, size, className, children, ...rest }: IconButtonProps): JSX.Element;
+
+export declare interface IconButtonProps extends Omit<ButtonProps, 'children' | 'startSlot' | 'endSlot' | 'fullWidth'> {
+    /** Required — an icon-only control must carry its own accessible name. */
+    'aria-label': string;
+    /** The icon (or any single glyph node). */
+    children: ReactNode;
+}
+
+export declare function Inline<C extends ElementType = 'div'>(props: StackProps<C>): JSX.Element;
+
+export declare function Input({ label, description, error, size, startSlot, endSlot, id, className, containerClassName, disabled, required, ref, ...rest }: InputProps): JSX.Element;
+
+export declare interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    description?: string;
+    /** Validation message — sets aria-invalid and is announced via role="alert". */
+    error?: string;
+    size?: 'sm' | 'md' | 'lg';
+    startSlot?: ReactNode;
+    endSlot?: ReactNode;
+    containerClassName?: string;
+    ref?: Ref<HTMLInputElement>;
+}
+
+export { JobSatisfaction }
+
+declare type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+
+export declare interface LineBand {
+    lo: number;
+    hi: number;
+    label?: string;
+    tone?: LineTone;
+}
+
+export declare function LineChart({ data, selectedId: selProp, defaultSelectedId, onSelect, height, className, }: LineChartProps): JSX.Element;
+
+export declare interface LineChartContract {
+    view?: 'line-chart';
+    brand?: string;
+    code?: string;
+    title?: string;
+    caption?: string;
+    /** Unit suffix appended to every value label (e.g. `%`, `d`, `k`). */
+    unit?: string;
+    /** Force the y-axis minimum; otherwise derived from data (and band/target). */
+    yMin?: number;
+    /** Force the y-axis maximum. */
+    yMax?: number;
+    /** Shaded tolerance zone between two values. */
+    band?: LineBand;
+    /** Reference line drawn across the plot (a target / threshold). */
+    target?: LineTarget;
+    series: LineSeries[];
+}
+
+export declare interface LineChartProps {
+    data: LineChartContract;
+    /** Controlled selected point id (`"{seriesId}#{index}"`). */
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onSelect?: (id: string) => void;
+    /** Plot viewBox height; sets the chart aspect ratio (default 220). */
+    height?: number;
+    className?: string;
+}
+
+export declare interface LinePoint {
+    /** Category / x-axis label (e.g. a week). */
+    x: string;
+    /** Value; `null` (or non-finite) is a gap the line skips. */
+    y: number | null;
+    /** Inspector detail shown when this point is selected. */
+    note?: string;
+}
+
+export declare interface LineSeries {
+    /** Stable id for selection; falls back to `name`. */
+    id?: string;
+    name: string;
+    /** Explicit line color (hex) — overrides `tone`. */
+    color?: string;
+    /** Color-coded tone (defaults cycle through the ontology by series order). */
+    tone?: LineTone;
+    /** Render the line dashed (e.g. a comparison/forecast series). */
+    dashed?: boolean;
+    /** Fill the area beneath the line. */
+    fill?: boolean;
+    points: LinePoint[];
+}
+
+export declare interface LineTarget {
+    value: number;
+    label?: string;
+    tone?: LineTone;
+}
+
+/**
+ * `LineChart` — a multi-series trend chart with an optional target line and
+ * tolerance band. It consumes a Trembus Visual Grammar **line-chart contract**
+ * (the same authored shape the static HTML kit renders) so one contract draws in
+ * both places. Lines, grid, band, and target are drawn in a proportionally-scaled
+ * SVG; each data point is a real focusable button (the Hub/BarChart interaction
+ * spine) whose selection is revealed in a live inspector.
+ */
+export declare type LineTone = FillBarTone;
+
+export { MaterialTone }
+
+/**
+ * `Menu` — a dropdown menu (ARIA menu button pattern). The trigger gets
+ * aria-haspopup/expanded/controls; the content renders in a portal with roving
+ * focus among menuitems, and dismisses on Escape / outside-press / Tab —
+ * returning focus to the trigger. Compound API:
+ * `<Menu><Menu.Trigger><Button/></Menu.Trigger><Menu.Content><Menu.Item/></Menu.Content></Menu>`.
+ */
+export declare const Menu: typeof MenuRoot & {
+    Trigger: typeof MenuTrigger;
+    Content: typeof MenuContent;
+    Item: typeof MenuItem;
+};
+
+declare function MenuContent({ align, className, children, ...rest }: MenuContentProps): JSX.Element | null;
+
+export declare interface MenuContentProps extends HTMLAttributes<HTMLDivElement> {
+    align?: 'start' | 'end';
+}
+
+declare function MenuItem({ onSelect, disabled, className, children, ...rest }: MenuItemProps): JSX.Element;
+
+export declare interface MenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    onSelect?: () => void;
+    disabled?: boolean;
+}
+
+export declare interface MenuProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+
+declare function MenuRoot({ open: openProp, defaultOpen, onOpenChange, children }: MenuProps): JSX.Element;
+
+declare function MenuTrigger({ children }: MenuTriggerProps): JSX.Element;
+
+export declare interface MenuTriggerProps {
+    /** A single interactive element (e.g. <Button>) to act as the trigger. */
+    children: ReactElement;
+}
+
+/**
+ * `Meter` — a static measurement (role=meter). `solid` fills to a value;
+ * `stacked` shows proportions that sum across the track; `threshold` recolors
+ * the fill as the value crosses configured markers (a gauge). Clean by default;
+ * `glow` turns on the HUD skin.
+ */
+export declare function Meter({ value, min, max, tone, variant, segments, thresholds, size, glow, showValue, icon, label, className, }: MeterProps): JSX.Element;
+
+export declare interface MeterProps {
+    value?: number;
+    min?: number;
+    max?: number;
+    tone?: FillBarTone;
+    variant?: 'solid' | 'stacked' | 'threshold';
+    /** Proportional segments for `variant="stacked"`. */
+    segments?: MeterSegment[];
+    /** Markers for `variant="threshold"`; the fill recolors as `value` crosses them. */
+    thresholds?: MeterThreshold[];
+    size?: FillBarSize;
+    glow?: boolean;
+    showValue?: boolean;
+    icon?: ReactNode;
+    /** Accessible name for the meter. */
+    label?: string;
+    className?: string;
+}
+
+export declare interface MeterSegment {
+    value: number;
+    tone?: FillBarTone;
+    label?: string;
+}
+
+export declare interface MeterThreshold {
+    value: number;
+    tone?: FillBarTone;
+}
+
+declare type Orientation = 'horizontal' | 'vertical';
+
+/**
+ * Lenient validator: coerce any input into a renderable BriefContract and
+ * report actionable issues. NEVER throws — a partially-wrong generation still
+ * renders, and `issues` is the repair list for the next attempt.
+ */
+export declare function parseBrief(input: unknown): BriefParseResult;
+
+export declare type PolymorphicComponentProps<C extends ElementType, Props = object> = PropsWithChildren<Props & AsProp<C>> & Omit<ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+
+export declare type PolymorphicComponentPropsWithRef<C extends ElementType, Props = object> = PolymorphicComponentProps<C, Props> & {
+    ref?: PolymorphicRef<C>;
+};
+
+export declare type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];
+
+/**
+ * Renders children into a DOM node outside the React tree (defaults to
+ * `document.body`). Rendered synchronously so a parent's focus/measure effects
+ * see the mounted content on the same commit. Returns null during SSR.
+ */
+export declare function Portal({ children, container }: PortalProps): ReactNode;
+
+export declare interface PortalProps {
+    children: ReactNode;
+    /** Mount target. Defaults to `document.body`. */
+    container?: HTMLElement | null;
+}
+
+export declare function Pressable<C extends ElementType = 'button'>(props: PressableProps<C>): JSX.Element;
+
+/**
+ * `Pressable` — the Affordance primitive. The one interactive element every
+ * clickable component composes from. It owns the Affordance state machine
+ * (via `useAffordanceState`), guarantees a focus ring + `data-state` feedback
+ * (Job #3), and defaults to a real `<button>` so capability is never invisible
+ * (Job #2). Use `asChild` to lend its behavior to an existing interactive
+ * element with no extra DOM.
+ */
+export declare interface PressableOwnProps extends UseAffordanceStateOptions {
+    asChild?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+
+export declare type PressableProps<C extends ElementType = 'button'> = PolymorphicComponentPropsWithRef<C, PressableOwnProps>;
+
+declare interface PrimaryLink {
+    href?: string;
+    onClick?: (e: MouseEvent_2<HTMLElement>) => void;
+}
+
+/**
+ * `Progress` — a determinate progress bar (role=progressbar) that fills a track
+ * proportional to `value / max`. Clean by default; `glow` turns on the HUD skin.
+ * `variant="segments"` renders discrete cells instead of a continuous fill.
+ */
+export declare function Progress({ value, max, tone, variant, segments, size, glow, showValue, icon, label, className, }: ProgressProps): JSX.Element;
+
+export declare interface ProgressProps {
+    value: number;
+    max?: number;
+    tone?: FillBarTone;
+    variant?: 'solid' | 'segments';
+    /** Number of cells when `variant="segments"`. */
+    segments?: number;
+    size?: FillBarSize;
+    /** Opt-in neon HUD treatment. */
+    glow?: boolean;
+    showValue?: boolean;
+    icon?: ReactNode;
+    /** Accessible name for the progressbar. */
+    label?: string;
+    className?: string;
+}
+
+declare type PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P);
+
+/**
+ * `RadioGroup` — an accessible single-choice group (role=radiogroup). Native
+ * radios share a name, so Arrow-key navigation + selection come from the
+ * browser. Compound API: `<RadioGroup><RadioGroup.Item/></RadioGroup>`.
+ */
+export declare const RadioGroup: typeof RadioGroupRoot & {
+    Item: typeof RadioItem;
+};
+
+export declare interface RadioGroupProps {
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    label?: string;
+    description?: string;
+    error?: string;
+    className?: string;
+    children?: ReactNode;
+}
+
+declare function RadioGroupRoot({ name, value: valueProp, defaultValue, onValueChange, label, description, error, className, children, }: RadioGroupProps): JSX.Element;
+
+declare function RadioItem({ value, label, description, disabled, className }: RadioItemProps): JSX.Element;
+
+export declare interface RadioItemProps {
+    value: string;
+    label?: ReactNode;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+}
+
+export { RadiusToken }
+
+export declare function RunHistory({ data, selectedRunId: selProp, defaultSelectedRunId, onSelectRun, density, className, }: RunHistoryProps): JSX.Element;
+
+export declare interface RunHistoryContract {
+    view?: 'run-history';
+    brand?: string;
+    code?: string;
+    title?: string;
+    caption?: string;
+    runs: RunRecord[];
+}
+
+export declare interface RunHistoryProps {
+    data: RunHistoryContract;
+    /** Controlled selected run id. */
+    selectedRunId?: string;
+    defaultSelectedRunId?: string;
+    onSelectRun?: (id: string) => void;
+    /** Row padding scale, passed through to `Table` (default `comfortable`). */
+    density?: 'comfortable' | 'compact';
+    className?: string;
+}
+
+export declare interface RunOutput {
+    /** Stable id; falls back to the index, NEVER the label (the recurring viz-id gotcha). */
+    id?: string;
+    /** Link/artifact text, e.g. "transcript.md", "PR #482". */
+    label: string;
+    /** When set the chip is a real `<a>`; omit for a static (non-link) artifact chip. */
+    href?: string;
+    /** Artifact class → a tone-coded chip. */
+    kind?: RunOutputKind;
+}
+
+export declare type RunOutputKind = 'pr' | 'doc' | 'log' | 'dataset' | 'deploy' | 'link';
+
+export declare interface RunRecord {
+    /** Stable id for selection; falls back to `r${i}`. */
+    id?: string;
+    /** Human label, e.g. "#128" or "nightly-2026-06-21"; defaults to the id. */
+    label?: string;
+    /** Outcome of THIS execution (distinct from a step's status). */
+    status: RunStatus;
+    /** When it ran (ISO string / epoch ms / Date) → `<time>` + a relative readout. */
+    startedAt: string | number | Date;
+    /** Wall-clock ms → "4m 12s"; omit for an in-flight run (renders an em-dash). */
+    durationMs?: number;
+    /** What kicked it off, e.g. "manual", "schedule", an author. */
+    trigger?: string;
+    /** One-line outcome shown in the inspector. */
+    note?: string;
+    /** Per-step outcomes — powers run→step time-travel in a host. */
+    stepOutcomes?: RunStepOutcome[];
+    /** Run-level artifacts/links (rolled up); shown as chips in the inspector. */
+    outputs?: RunOutput[];
+    /** Optional precomputed step tally for the dense cell (else derived from stepOutcomes). */
+    tally?: Partial<Record<SwimlaneStatus, number>>;
+}
+
+/**
+ * `RunHistory` — a selectable log of past executions ("runs") of a workflow or any
+ * data-driven item (CI pipelines, ETL jobs, agent sessions). Built on the public
+ * `Table`: each run is a focusable, keyboard-accessible row (status · when ·
+ * duration · steps · outputs) and selecting one reveals its outcome note and the
+ * real **output/result links** in a single `aria-live` inspector — the Hub/BarChart
+ * interaction spine, with controlled/uncontrolled `selectedRunId`.
+ *
+ * A run carries an optional `stepOutcomes` (per-step statuses, reusing the Swimlane
+ * vocabulary) which lets a host "time-travel" a `Swimlane` to that run — see the
+ * `Examples/SwimlaneRuns` page. Standalone, RunHistory needs no Swimlane.
+ */
+export declare type RunStatus = 'succeeded' | 'failed' | 'running' | 'cancelled' | 'partial' | 'queued';
+
+/** Per-step outcome for THIS run — the bridge that lets a host time-travel a Swimlane. */
+export declare interface RunStepOutcome {
+    /** Matches a `SwimlaneStep` id. */
+    step: string;
+    /** Reuses the step status ontology verbatim. */
+    status: SwimlaneStatus;
+    /** Artifacts produced at this step. */
+    outputs?: RunOutput[];
+}
+
+export declare type SectionKind = 'prose' | 'rules' | 'commands' | 'checklist' | 'phases' | 'artifacts' | 'boundaries' | 'decisions' | 'reference';
+
+export declare function Select({ label, description, error, size, placeholder, id, className, containerClassName, disabled, required, ref, children, ...rest }: SelectProps): JSX.Element;
+
+declare type SelectionMode_2 = 'none' | 'multiple';
+export { SelectionMode_2 as SelectionMode }
+
+export declare interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    label?: string;
+    description?: string;
+    error?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Shown as a disabled first option when no value is set. */
+    placeholder?: string;
+    containerClassName?: string;
+    ref?: Ref<HTMLSelectElement>;
+    /** <option> / <optgroup> elements. */
+    children: ReactNode;
+}
+
+/** Assign a value to a callback or object ref. */
+export declare function setRef<T>(ref: Ref<T> | undefined, value: T | null): void;
+
+export declare type Severity = 'info' | 'warn' | 'danger' | (string & {});
+
+/**
+ * `Skeleton` — a decorative loading placeholder (aria-hidden). The shimmer
+ * respects prefers-reduced-motion. Set `aria-busy` on the container that
+ * swaps it for real content.
+ */
+export declare function Skeleton({ variant, width, height, lines, className, style, ...rest }: SkeletonProps): JSX.Element;
+
+export declare interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: 'text' | 'rect' | 'circle';
+    width?: number | string;
+    height?: number | string;
+    /** For variant="text": number of lines (the last is shortened). */
+    lines?: number;
+}
+
+/**
+ * Lends its props/behavior to its single child element instead of rendering a
+ * wrapper node (the `asChild` pattern). Event handlers compose, className and
+ * style merge, refs combine.
+ */
+export declare function Slot({ children, ref, ...slotProps }: SlotProps): ReactElement | null;
+
+export declare interface SlotProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    ref?: Ref<HTMLElement>;
+}
+
+export declare interface SortDescriptor {
+    /** The `sortKey` of the currently sorted column. */
+    column: string;
+    direction: SortDirection;
+}
+
+export declare type SortDirection = 'asc' | 'desc';
+
+export { SpaceToken }
+
+export declare function Sparkline({ values, tone, color, width, height, area, markLast, min, max, label, className, }: SparklineProps): JSX.Element;
+
+export declare interface SparklineProps {
+    /** The series. `null`/`undefined`/non-finite entries are gaps the line skips. */
+    values: ReadonlyArray<number | null | undefined>;
+    /** Color-coded tone for the line (default `accent`). */
+    tone?: SparklineTone;
+    /** Explicit stroke color (hex) — overrides `tone`. */
+    color?: string;
+    /** Intrinsic viewBox width; CSS may stretch it (the stroke stays crisp). */
+    width?: number;
+    /** Intrinsic viewBox height; CSS may stretch it. */
+    height?: number;
+    /** Fill the area beneath the line (default `true`). */
+    area?: boolean;
+    /** Mark the last data point with a dot (default `true`). */
+    markLast?: boolean;
+    /** Force the lower bound of the y-domain so several sparklines share one scale. */
+    min?: number;
+    /** Force the upper bound of the y-domain. */
+    max?: number;
+    /**
+     * Accessible name. When set, the sparkline is exposed to assistive tech as an
+     * image with this label; when omitted it is decorative (`aria-hidden`).
+     */
+    label?: string;
+    className?: string;
+}
+
+/**
+ * `Sparkline` — a word-sized trend line. The series becomes a single path inside
+ * a tiny fixed box so its trajectory reads at a glance; it mirrors the Trembus
+ * Visual Grammar `spark` so one series draws the same in the static HTML kit and
+ * in React. Presentational by design — pair it with a {@link Stat} value or a
+ * table cell. `null`/non-finite entries are gaps the line skips over.
+ */
+export declare type SparklineTone = FillBarTone;
+
+export declare function Spinner({ size, tone, label, className, ...rest }: SpinnerProps): JSX.Element;
+
+export declare interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** `current` inherits the surrounding text color. */
+    tone?: 'current' | 'accent' | StatusTone;
+    /** Screen-reader label announced while busy. */
+    label?: string;
+}
+
+export declare function Stack<C extends ElementType = 'div'>(props: StackProps<C>): JSX.Element;
+
+export declare interface StackOwnProps extends BoxOwnProps {
+    gap?: SpaceToken;
+    align?: Align;
+    justify?: Justify;
+    wrap?: boolean;
+}
+
+export declare type StackProps<C extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<C, StackOwnProps>;
+
+export declare function Stat({ label, value, unit, strap, delta, target, trend, badge, tone, onSelect, href, className, }: StatProps): JSX.Element;
+
+export declare interface StatDelta {
+    /** Signed change versus the comparison period. */
+    value: number;
+    /** Preformatted text (e.g. "+1.2pp"); defaults to the signed value. */
+    text?: string;
+    /**
+     * When true a DECREASE is good (down = success) — for latency/lag metrics where
+     * lower is better (e.g. DIRT). Default false (up = success).
+     */
+    invert?: boolean;
+}
+
+export declare interface StatProps {
+    /** Metric name (e.g. "DIRT — avg lag"). */
+    label: string;
+    /** Headline value; use "—" (the default) when the source isn't available. */
+    value?: ReactNode;
+    /** Small unit after the value (e.g. "days", "%"). */
+    unit?: string;
+    /** Eyebrow / category strap above the label (e.g. "Cat 2 · Time Entry"). */
+    strap?: string;
+    /** Period-over-period change, shown as a colored ▲/▼ chip. */
+    delta?: StatDelta;
+    /** Context line under the value (target, secondary stats). */
+    target?: ReactNode;
+    /** Trend series; renders an embedded sparkline strip when set. */
+    trend?: ReadonlyArray<number | null | undefined>;
+    /** Status pill in the top-right (e.g. a `<Badge>` "Live" / "Awaiting WSC"). */
+    badge?: ReactNode;
+    /** Color-coded tone for the accent rail + sparkline (default `accent`). */
+    tone?: StatTone;
+    /** When set, the whole card becomes a drill-in `<button>`. */
+    onSelect?: () => void;
+    /** When set, the card becomes a drill-in `<a>` (takes precedence over `onSelect`). */
+    href?: string;
+    className?: string;
+}
+
+/**
+ * `Stat` — a KPI card: a labeled headline value with an optional period-over-period
+ * delta, a target/context line, a status badge, and an embedded trend sparkline.
+ * The signature tile of the PMO dashboard. Presentational by default; pass
+ * `onSelect` or `href` to turn the whole card into a drill-in affordance.
+ */
+export declare type StatTone = FillBarTone;
+
+export { StatusTone }
+
+export { SurfaceTone }
+
+export declare function Swimlane({ data, selectedId: selProp, defaultSelectedId, onSelect, className, }: SwimlaneProps): JSX.Element;
+
+export declare interface SwimlaneContract {
+    view?: 'swimlane';
+    brand?: string;
+    code?: string;
+    title?: string;
+    caption?: string;
+    lanes: SwimlaneLane[];
+    steps: SwimlaneStep[];
+}
+
+export declare interface SwimlaneLane {
+    /** Stable id; steps reference it by `id` OR `label`. Falls back to the index. */
+    id?: string;
+    /** Lane name — the actor (e.g. "You", "Claude", "Tools"). */
+    label: string;
+    /** Actor kind → the lane's accent + dot (default `neutral`). */
+    kind?: SwimlaneLaneKind;
+}
+
+export declare type SwimlaneLaneKind = 'human' | 'ai' | 'system' | 'tool' | 'neutral';
+
+export declare interface SwimlaneProps {
+    data: SwimlaneContract;
+    /** Controlled selected step id. */
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onSelect?: (id: string) => void;
+    className?: string;
+}
+
+/**
+ * `Swimlane` — a process diagram for **human ↔ LLM workflows**. Each lane (row) is
+ * an actor (human / ai / system / tool); each step is a focusable `<button>` placed
+ * in its lane and ordered left-to-right by column, with decorative SVG connectors
+ * tracing the **handoffs** as work crosses lanes. It consumes a Trembus Visual
+ * Grammar **swimlane contract** so one authored shape draws in both the static HTML
+ * kit and React.
+ *
+ * Layout is fully deterministic — lane row × explicit/sequential column, no layout
+ * engine — which is why it lives in the Tier-1 viz spine alongside Funnel/Treemap.
+ * It is the Hub/BarChart interaction spine: controlled/uncontrolled `selectedId`
+ * (+ `defaultSelectedId` + `onSelect`), and selecting a step reveals its actor,
+ * status, note, and handoffs in a live (`aria-live`) inspector.
+ */
+export declare type SwimlaneStatus = 'done' | 'active' | 'pending' | 'blocked' | 'skipped';
+
+export declare interface SwimlaneStep {
+    /** Stable id for selection + handoff targeting; falls back to the step index. */
+    id?: string;
+    /** Owning lane — matches a lane's `id` or `label`. */
+    lane: string;
+    /** Step name. */
+    label: string;
+    /** Column (0-based). Omit to flow sequentially after the previous step. */
+    col?: number;
+    /** Progress state → the card's accent + status dot (default `pending`). */
+    status?: SwimlaneStatus;
+    /** Secondary line shown in the card + inspector. */
+    detail?: string;
+    /** Inspector detail shown when this step is selected. */
+    note?: string;
+    /**
+     * Successor step ids this step hands off to (draws a connector to each).
+     * Omit to connect to the next step in order; pass `[]` for a terminal step.
+     */
+    to?: string[];
+}
+
+export declare function Switch({ label, description, disabled, className, id, ref, ...rest }: SwitchProps): JSX.Element;
+
+export declare interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'role'> {
+    label?: ReactNode;
+    description?: string;
+    ref?: Ref<HTMLInputElement>;
+}
+
+declare function Tab({ value, disabled, children, className }: TabProps): JSX.Element;
+
+/**
+ * `Table` — a composable, accessible data table built on real `<table>`
+ * semantics. Compound API:
+ * `<Table><Table.Head><Table.Row><Table.HeaderCell/></Table.Row></Table.Head>
+ *  <Table.Body><Table.Row><Table.Cell/></Table.Row></Table.Body></Table>`.
+ *
+ * Sortable headers emit intent (you reorder the data); `selectionMode` adds a
+ * tri-state checkbox column; `href`/`onClick` on a row make the whole row a
+ * stretched, keyboard-accessible link/button.
+ */
+export declare const Table: typeof TableRoot & {
+    Caption: typeof TableCaption;
+    Head: typeof TableHead;
+    Body: typeof TableBody;
+    Foot: typeof TableFoot;
+    Row: typeof TableRow;
+    HeaderCell: typeof TableHeaderCell;
+    Cell: typeof TableCell;
+    Empty: typeof TableEmpty;
+};
+
+declare function TableBody({ className, children, ...rest }: TableSectionProps): JSX.Element;
+
+declare function TableCaption({ className, children, ...rest }: TableCaptionProps): JSX.Element;
+
+export declare type TableCaptionProps = HTMLAttributes<HTMLTableCaptionElement>;
+
+declare function TableCell({ align, numeric, className, children, _primaryLink, ...rest }: TableCellProps): JSX.Element;
+
+export declare interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    align?: CellAlign;
+    /** Mono, tabular-nums, end-aligned — for figures. */
+    numeric?: boolean;
+    /* Excluded from this release type: _primaryLink */
+}
+
+export declare type TableDensity = 'comfortable' | 'compact';
+
+declare function TableEmpty({ colSpan, className, children, ...rest }: TableEmptyProps): JSX.Element;
+
+export declare interface TableEmptyProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'colSpan'> {
+    /** Number of data columns; the select column (if any) is added automatically. */
+    colSpan: number;
+}
+
+declare function TableFoot({ className, children, ...rest }: TableSectionProps): JSX.Element;
+
+declare function TableHead({ className, children, ...rest }: TableSectionProps): JSX.Element;
+
+declare function TableHeaderCell({ align, sortKey, className, children, ...rest }: TableHeaderCellProps): JSX.Element;
+
+export declare interface TableHeaderCellProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    align?: CellAlign;
+    /** Marks the column sortable; clicking emits `onSortChange({ column: sortKey, … })`. */
+    sortKey?: string;
+}
+
+export declare interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, 'onSelect'> {
+    /** Row padding scale. `compact` also drops the body font to `--tcl-text-sm`. */
+    density?: TableDensity;
+    /** Zebra-stripe the body rows. */
+    striped?: boolean;
+    /** Pin the header row while the body scrolls (needs `maxHeight` to scroll vertically). */
+    sticky?: boolean;
+    /** Caps the scroll container height; pair with `sticky` for a pinned header. */
+    maxHeight?: number | string;
+    /** Controlled sort state — the active column + direction. The table reflects
+     * `aria-sort`; YOU reorder the data in response to `onSortChange`. */
+    sortDescriptor?: SortDescriptor | null;
+    onSortChange?: (descriptor: SortDescriptor) => void;
+    /** `multiple` adds a checkbox column with a tri-state select-all in the head. */
+    selectionMode?: SelectionMode_2;
+    /** Controlled selection. */
+    selectedKeys?: Iterable<string>;
+    /** Uncontrolled initial selection. */
+    defaultSelectedKeys?: Iterable<string>;
+    onSelectionChange?: (keys: Set<string>) => void;
+}
+
+declare function TableRoot({ density, striped, sticky, maxHeight, sortDescriptor, onSortChange, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, className, style, children, ...rest }: TableProps): JSX.Element;
+
+declare function TableRow({ rowKey, href, onClick, className, children, ...rest }: TableRowProps): JSX.Element;
+
+export declare interface TableRowProps extends Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick'> {
+    /** Identifies the row for selection; required when `selectionMode="multiple"`. */
+    rowKey?: string;
+    /** Makes the whole row a link (stretched over the row, fully keyboard-accessible). */
+    href?: string;
+    /** Makes the whole row a button. Ignored when `href` is set. */
+    onClick?: (e: MouseEvent_2<HTMLElement>) => void;
+}
+
+export declare type TableSectionProps = HTMLAttributes<HTMLTableSectionElement>;
+
+export declare interface TabProps {
+    value: string;
+    disabled?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+
+/**
+ * `Tabs` — accessible tabs with the ARIA tablist pattern, roving tabindex, and
+ * Arrow/Home/End keyboard navigation (automatic activation). Compound API:
+ * `<Tabs><Tabs.List><Tabs.Tab/></Tabs.List><Tabs.Panel/></Tabs>`.
+ */
+export declare const Tabs: typeof TabsRoot & {
+    List: typeof TabsList;
+    Tab: typeof Tab;
+    Panel: typeof TabsPanel;
+};
+
+declare function TabsList({ children, className, ...rest }: TabsListProps): JSX.Element;
+
+export declare interface TabsListProps {
+    children?: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+
+declare function TabsPanel({ value, children, className }: TabsPanelProps): JSX.Element;
+
+export declare interface TabsPanelProps {
+    value: string;
+    children?: ReactNode;
+    className?: string;
+}
+
+export declare interface TabsProps {
+    /** Controlled active value. */
+    value?: string;
+    /** Uncontrolled initial value. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: Orientation;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+
+declare function TabsRoot({ value: valueProp, defaultValue, onValueChange, orientation, className, style, children, }: TabsProps): JSX.Element;
+
+declare function Text_2<C extends ElementType = 'span'>(props: TextProps<C>): JSX.Element;
+export { Text_2 as Text }
+
+export declare function Textarea({ label, description, error, id, className, containerClassName, disabled, required, rows, ref, ...rest }: TextareaProps): JSX.Element;
+
+export declare interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    label?: string;
+    description?: string;
+    /** Validation message — sets aria-invalid and is announced via role="alert". */
+    error?: string;
+    containerClassName?: string;
+    ref?: Ref<HTMLTextAreaElement>;
+}
+
+export declare interface TextOwnProps {
+    size?: TypeToken;
+    weight?: FontWeightToken;
+    tone?: TextTone;
+    mono?: boolean;
+    truncate?: boolean;
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+
+export declare type TextProps<C extends ElementType = 'span'> = PolymorphicComponentPropsWithRef<C, TextOwnProps>;
+
+export { TextTone }
+
+export { ThemeName }
+
+export declare function Timeline({ data, selectedId: selProp, defaultSelectedId, onSelect, className, }: TimelineProps): JSX.Element;
+
+export declare interface TimelineCategory {
+    /** Matches `TimelineEvent.category`. */
+    key: string;
+    /** Legend + accessible-name label (e.g. "Wars"). */
+    label: string;
+    /** Tone for this category's events (default `neutral`). */
+    tone?: TimelineTone;
+}
+
+export declare interface TimelineContract {
+    view?: 'timeline';
+    brand?: string;
+    /** Chapter/volume mark (e.g. "III"), shown large + decorative in the header. */
+    code?: string;
+    title?: string;
+    caption?: string;
+    /** Right-aligned header meta (e.g. "1,204 YEARS · 7 EPOCHS"). */
+    meta?: string;
+    events: TimelineEvent[];
+    /** Legend + tone mapping. */
+    categories?: TimelineCategory[];
+    /** `ordinal` (even columns, default) or `time` (proportional to `at`, de-overlapped). */
+    scale?: 'ordinal' | 'time';
+    /** Axis domain for the `time` scale (defaults to the event min/max). */
+    range?: {
+        min?: number;
+        max?: number;
+    };
+}
+
+export declare interface TimelineEvent {
+    /** Stable id for selection; falls back to the index (NEVER the label). */
+    id?: string;
+    /** Numeric position on the axis (year, epoch index, …). Drives ordering + the `time` scale. */
+    at: number;
+    /** Pretty date string shown on the card + announced (e.g. "CDLXXI A.V."). Defaults to `at`. */
+    dateLabel?: string;
+    /** Event title. */
+    label: string;
+    /** Category key → tone + legend (e.g. "war"). */
+    category?: string;
+    /** Explicit tone override (wins over the category tone). */
+    tone?: TimelineTone;
+    /** Secondary line on the card (e.g. "EPOCH · TIDES"). */
+    sub?: string;
+    /** Body text on the card. */
+    detail?: string;
+    /** Inspector detail revealed on selection. */
+    note?: string;
+    /** Force the card above/below the axis (default alternates by order). */
+    side?: 'above' | 'below';
+}
+
+export declare interface TimelineProps {
+    data: TimelineContract;
+    /** Controlled selected event id. */
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onSelect?: (id: string) => void;
+    className?: string;
+}
+
+/**
+ * `Timeline` — a horizontal **chronicle**: discrete dated events placed on a
+ * time axis, alternating above/below, tone-coded by category, with era markers
+ * (nodes) on the axis. The "history timeline" idiom — release histories, project
+ * roadmaps, biographies, geological eras — that the lane-based `Swimlane` and the
+ * execution-log `RunHistory` don't cover.
+ *
+ * Deterministic layout (no engine) → it lives in the Tier-1 viz spine alongside
+ * Swimlane/Funnel/Treemap. It IS that interaction spine: lead job reveal-state,
+ * but afford/acknowledge are real — each event is a focusable `<button>` carrying
+ * its accessible name (date · title · category), driven by controlled/uncontrolled
+ * `selectedId` (+ `defaultSelectedId` + `onSelect`), with prev/next stepping the
+ * selection chronologically and an `aria-live` inspector revealing the selected
+ * event. The axis line, nodes, stems, and scrubber are decorative (`aria-hidden`).
+ */
+export declare type TimelineTone = FillBarTone;
+
+declare interface ToastContextValue {
+    toast: (opts: ToastOptions) => string;
+    dismiss: (id: string) => void;
+}
+
+export declare interface ToastOptions {
+    title: string;
+    description?: string;
+    tone?: ToastTone;
+    /** Auto-dismiss after ms. 0 keeps it until dismissed. */
+    duration?: number;
+}
+
+export declare function ToastProvider({ children, duration, placement }: ToastProviderProps): JSX.Element;
+
+export declare interface ToastProviderProps {
+    children: ReactNode;
+    /** Default auto-dismiss duration (ms). */
+    duration?: number;
+    placement?: 'top' | 'bottom';
+}
+
+export declare type ToastTone = 'neutral' | StatusTone;
+
+export { Tokens }
+
+export { tokens }
+
+export declare function Tooltip({ content, children, openDelay, side, className }: TooltipProps): JSX.Element;
+
+export declare interface TooltipProps {
+    content: ReactNode;
+    /** A single interactive element to attach the tooltip to. */
+    children: ReactElement;
+    /** Delay before showing on hover (ms). Focus shows immediately. */
+    openDelay?: number;
+    side?: 'top' | 'bottom';
+    className?: string;
+}
+
+export declare function Treemap({ data, selectedId: selProp, defaultSelectedId, onSelect, className, }: TreemapProps): JSX.Element;
+
+export declare interface TreemapContract {
+    view?: 'treemap';
+    brand?: string;
+    code?: string;
+    title?: string;
+    caption?: string;
+    /** Unit suffix appended to every value label (e.g. `h`, `k`). */
+    unit?: string;
+    nodes: TreemapNode[];
+}
+
+export declare interface TreemapNode {
+    /** Stable id for selection; falls back to the node index. */
+    id?: string;
+    /** Node label — shown in the cell when it is large enough. */
+    label: string;
+    /** Magnitude (non-negative); zero/negative nodes get no cell. */
+    value: number;
+    /** Color-coded tone (defaults cycle through the ontology by node order). */
+    tone?: TreemapTone;
+    /** Explicit cell color (hex) — overrides `tone`. */
+    color?: string;
+    /** Secondary label shown in the inspector. */
+    sub?: string;
+    /** Inspector detail shown when this node is selected. */
+    note?: string;
+}
+
+export declare interface TreemapProps {
+    data: TreemapContract;
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onSelect?: (id: string) => void;
+    className?: string;
+}
+
+/**
+ * `Treemap` — a space-filling chart that sizes each node's rectangle to its share
+ * of the whole via a deterministic **squarified** layout (ported from the static
+ * HTML PMO kit, so one authored contract draws in both places). The tiling is
+ * computed in a fixed-aspect box; each cell is then an HTML `<button>` positioned
+ * by percentage over that box (the LineChart overlay lesson) so selection stays
+ * accessible — the Hub/BarChart interaction spine. Selecting a cell reveals its
+ * value, share, and note in a live inspector.
+ */
+export declare type TreemapTone = FillBarTone;
+
+export { TypeToken }
+
+export { UIJob }
+
+export declare function useAffordanceState(options?: UseAffordanceStateOptions): UseAffordanceStateReturn;
+
+export declare interface UseAffordanceStateOptions {
+    disabled?: boolean;
+    loading?: boolean;
+    /** Activation callback — fires on click and native keyboard activation. */
+    onPress?: (event: SyntheticEvent) => void;
+}
+
+export declare interface UseAffordanceStateReturn {
+    state: AffordanceState;
+    handlers: AffordanceHandlers;
+    dataAttrs: AffordanceDataAttrs;
+}
+
+/** Memoized {@link composeRefs} for use inside components. */
+export declare function useComposedRefs<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T>;
+
+/** Calls `onDismiss` on Escape or an outside pointer-down. */
+export declare function useDismissable({ enabled, onDismiss, ref }: UseDismissableOptions): void;
+
+export declare interface UseDismissableOptions {
+    enabled?: boolean;
+    /** Fires on Escape or a pointer press outside `ref`. */
+    onDismiss: () => void;
+    ref: RefObject<HTMLElement | null>;
+}
+
+/**
+ * Traps Tab focus within the returned container ref while `active`. On
+ * activation, moves focus to the first focusable element (or the container).
+ * The container should carry `tabIndex={-1}` so it can receive focus.
+ */
+export declare function useFocusTrap<T extends HTMLElement = HTMLElement>(active: boolean): RefObject<T | null>;
+
+/** Tracks the user's `prefers-reduced-motion` setting, reactively. */
+export declare function useReducedMotion(): boolean;
+
+/**
+ * When `active` becomes true, remembers the currently focused element and
+ * restores focus to it when `active` goes false / the component unmounts.
+ */
+export declare function useReturnFocus(active: boolean): void;
+
+export declare function useToast(): ToastContextValue;
+
+export { ZToken }
+
+export { }