altitude-design 0.2.1 → 0.3.0

package/dist/types/conversation.d.ts

@@ -0,0 +1,130 @@
+import * as React from 'react';
+export interface ConversationProps extends React.HTMLAttributes<HTMLDivElement> {
+    'aria-label': string;
+}
+/**
+ * The thread between a person and an assistant. Settled messages are the record. It follows new text to the bottom
+ * until the person scrolls up, then offers "Jump to latest". A streamed answer is announced once, when it completes,
+ * never token by token.
+ */
+export declare function Conversation({ className, children, 'aria-label': label, ...rest }: ConversationProps): React.JSX.Element;
+/** The messages, in order. */
+export declare function ConversationContent({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** "Jump to latest message": floats at level 3 once the person has scrolled up from the bottom. */
+export declare function ConversationScrollButton({ className }: {
+    className?: string;
+}): React.JSX.Element | null;
+export type MessageStatus = 'streaming' | 'complete' | 'stopped' | 'error';
+export interface MessageProps extends React.HTMLAttributes<HTMLElement> {
+    from: 'user' | 'assistant';
+    /** An assistant message: streaming rests on the ground with a dashed rule, "Generating…" and a caret; complete settles with one afterglow; stopped and error are kept, with Retry. Default 'complete'. */
+    status?: MessageStatus;
+    /** Who's speaking. Default "You" or "Assistant". */
+    name?: string;
+    onRetry?: () => void;
+    /** A person's message that was edited and resent: "Edited" in its caption. */
+    edited?: boolean;
+}
+/**
+ * One message. A person's is a flush accent-soft sheet; an assistant's is flush, no bubble. While an answer streams it
+ * isn't the record yet: it rests on the ground with a dashed rule down its edge (charts' "not yet the record"), never
+ * hovering, because nothing you sent is in flight. When it completes the rule goes solid and it settles once.
+ */
+export declare function Message({ from, status, name, onRetry, edited, className, children, ...rest }: MessageProps): React.JSX.Element;
+export interface MessageAttachment {
+    name: string;
+    /** Its MIME type: image/* with a `url` shows as a thumbnail; anything else as a file plate. */
+    type?: string;
+    /** In bytes, shown on a file plate. */
+    size?: number;
+    /** An image's thumbnail. */
+    url?: string;
+    /** An image's text alternative. Default its name. */
+    alt?: string;
+    /** Opens the file as a link. */
+    href?: string;
+    /** Opens the file in the app (a preview Dialog, say). */
+    onOpen?: () => void;
+    /** Expired or deleted: "No longer available", and it doesn't act. */
+    unavailable?: boolean;
+}
+export interface MessageAttachmentsProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
+    items: MessageAttachment[];
+}
+/**
+ * What went with a message: the files the composer showed as plates, now settled into the record. Images are 64px
+ * thumbnails, other files Tag plates with name, type and size; those with href or onOpen act (and lift one level when
+ * pointed at). Put it before MessageContent. A sent attachment was uploaded before the message went, so it's never
+ * pending.
+ */
+export declare function MessageAttachments({ items, className, ...rest }: MessageAttachmentsProps): React.JSX.Element | null;
+/** The message's text. Text arrives without per-word animation; a caret marks the end while it streams. */
+export declare function MessageContent({ className, children, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export interface ConversationCheckpointProps {
+    /** What the point is before: "Before editing 6 files". */
+    label: string;
+    /** When it was made. */
+    at?: Date | string | number;
+    /** What restoring does, in words: "The 4 messages after this and the changes to 6 files will be set aside. You can return to them." */
+    consequence: string;
+    /** Restore: resolve when done, reject (with a message) when it couldn't. */
+    onRestore: () => void | Promise<unknown>;
+    /**
+     * Real recovery: bring back what restoring set aside. With it, Restore runs at once and leaves "Return to where you
+     * were"; without it, Restore asks first in a Dialog.
+     */
+    onReturn?: () => void | Promise<unknown>;
+    locale?: string;
+    className?: string;
+}
+/**
+ * A point in the conversation to go back to (#277): a divider with a word between its lines ("Checkpoint · Before
+ * editing 6 files · 2:14 PM") and Restore. Restoring follows the consequential-action contract: with onReturn it runs at
+ * once and leaves "Return to where you were"; without, it asks in a stationary Dialog. While restoring the label hovers
+ * as pending; restored, it settles once; failed, it sinks into a trench with Retry. Set the later turns aside as a
+ * branch (the next message's versions) rather than deleting them.
+ */
+export declare function ConversationCheckpoint({ label, at, consequence, onRestore, onReturn, locale, className }: ConversationCheckpointProps): React.JSX.Element;
+export interface QueuedMessage {
+    id: string;
+    text: string;
+}
+export interface ConversationQueueProps {
+    /** Messages written while the agent worked, in the order they'll be sent. */
+    items: QueuedMessage[];
+    /** Stop the current turn and send this one now. */
+    onSendNow?: (id: string) => void;
+    /** Edit opens it in place; called with the new text. */
+    onEdit?: (id: string, text: string) => void;
+    onRemove?: (id: string) => void;
+    className?: string;
+}
+/**
+ * Messages queued while the agent works (#276), between the thread and the composer, in order, each with Send now,
+ * Edit and Remove. A queued message is written but not dispatched, so it doesn't hover (pending is for a write in
+ * flight): it's the person's sheet on the ground with a dashed rim, "Queued · 1 of 2". Your app sends the first when
+ * the turn ends, and it becomes an ordinary message in the log.
+ */
+export declare function ConversationQueue({ items, onSendNow, onEdit, onRemove, className }: ConversationQueueProps): React.JSX.Element | null;
+export interface MessageActionsProps {
+    /** Shows Copy (the message's text, or this value). */
+    onCopy?: boolean | (() => string);
+    onRegenerate?: () => void;
+    /** Shows good / bad response toggles; null when cleared. */
+    onFeedback?: (value: 'up' | 'down' | null) => void;
+    feedback?: 'up' | 'down' | null;
+    /**
+     * Regenerated answers, or a person's edited message, are kept as versions, never overwritten: "Version 2 of 2".
+     * Switching is announced ("Showing version 1 of 2").
+     */
+    versions?: {
+        index: number;
+        total: number;
+        onChange: (index: number) => void;
+    };
+    /** A person's message: an Edit action that opens it in place; sending the edit calls this with the new text (start a branch from it). */
+    onEdit?: (text: string) => void;
+    className?: string;
+}
+/** Copy, regenerate, feedback and versions: ghost buttons that lift when pointed at. Hidden while the message streams. */
+export declare function MessageActions({ onCopy, onRegenerate, onFeedback, feedback, versions, onEdit, className }: MessageActionsProps): React.JSX.Element | null;

package/dist/types/copy-button.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ButtonProps } from './controls.js';
+export interface CopyButtonProps extends Omit<ButtonProps, 'value' | 'onCopy' | 'onError' | 'square' | 'loading' | 'leading'> {
+    /** What's copied, or a function that returns it (it may return a promise). */
+    value: string | (() => string | Promise<string>);
+    /** The button's name: its aria-label and Tooltip when it's icon-only, and kept as its name while it says "Copied". Default "Copy". */
+    label?: string;
+    /** Shown for dur-linger once copied. Default "Copied". */
+    copiedLabel?: string;
+    /** Shown for dur-linger when copying fails. Default "Couldn't copy". */
+    failedLabel?: string;
+    onCopy?: (value: string) => void;
+    onError?: (error: unknown) => void;
+}
+/**
+ * Copies a value and says so in words: pressed to the ground with a check and "Copied" for dur-linger, announced
+ * politely while the button keeps its name. No rise and no afterglow: nothing new arrived on the page.
+ */
+export declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/core.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 /** useLayoutEffect in the browser, useEffect on the server, where layout effects can't run (React 18 warns about them). */
 export declare const useIsoLayoutEffect: typeof React.useEffect;
 export declare const cx: (...parts: Array<string | false | null | undefined>) => string;
+/** A duration token in milliseconds. Minifiers rewrite `220ms` as `.22s`, so the unit is read, not assumed. */
+export declare const cssMs: (cs: CSSStyleDeclaration | null | undefined, name: string, fallback: number) => number;
 /**
  * Mount/unmount with an exit animation. Returns `mounted` (render or not) and
  * `state` ("open" | "closed") for the data-state attribute. The element first
@@ -28,8 +30,27 @@ export declare const Icons: {
     ChevronDown: ({ size, ...rest }: IconProps) => React.JSX.Element;
     X: ({ size, ...rest }: IconProps) => React.JSX.Element;
     Info: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    Pencil: ({ size, ...rest }: IconProps) => React.JSX.Element;
     CircleCheck: ({ size, ...rest }: IconProps) => React.JSX.Element;
     AlertCircle: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    Copy: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    ArrowUp: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    Stop: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    Paperclip: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    ThumbsUp: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    ThumbsDown: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    Refresh: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    ArrowDown: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    Spark: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    Lock: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    Pin: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    Bell: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    Eye: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    EyeOff: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    Clock: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    PanelLeft: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    More: ({ size, ...rest }: IconProps) => React.JSX.Element;
+    ExternalLink: ({ size, ...rest }: IconProps) => React.JSX.Element;
     AlertTriangle: ({ size, ...rest }: IconProps) => React.JSX.Element;
 };
 export declare function Spinner({ size }: {
@@ -44,48 +65,113 @@ export declare const contrast: (a: string, b: string) => number;
  */
 export declare function deriveAccent(accent: string, surfaces: string[]): React.CSSProperties;
 declare const SURFACES: readonly ["surface-trench", "surface-well", "surface-ground", "surface-raised", "surface-lifted", "surface-floating", "surface-overlay", "surface-modal"];
-export type SchemeColorToken = typeof SURFACES[number] | 'ink' | 'ink-muted' | 'ink-faint' | 'line' | 'line-control' | 'accent' | 'on-accent' | 'accent-ink' | 'accent-soft' | 'positive' | 'positive-soft' | 'caution' | 'caution-soft' | 'critical' | 'critical-soft' | 'on-critical' | 'presence-1' | 'presence-2' | 'presence-3' | 'on-presence' | 'scrim';
+export type SchemeColorToken = typeof SURFACES[number] | 'ink' | 'ink-muted' | 'ink-faint' | 'line' | 'line-control' | 'accent' | 'on-accent' | 'accent-ink' | 'accent-soft' | 'positive' | 'positive-soft' | 'caution' | 'caution-soft' | 'critical' | 'critical-soft' | 'on-critical' | 'presence-1' | 'presence-2' | 'presence-3' | 'on-presence' | 'scrim' | DataColorToken;
+/** The data palette (charts only): categorical slots, the fold, the magnitude ramp and the diverging ramp. */
+export type DataColorToken = `data-${1 | 2 | 3 | 4 | 5 | 6}` | 'data-other' | `data-seq-${1 | 2 | 3 | 4 | 5 | 6 | 7}` | `data-div-${'neg' | 'pos'}-${1 | 2 | 3}` | 'data-div-mid';
 export type SchemeShadowToken = 'trench' | 'well' | 'elev-0' | 'elev-1' | 'elev-2' | 'elev-3' | 'elev-4' | 'elev-5' | 'lip-top' | 'lip-bottom';
+/** Which invariants checkScheme measures: `core` is the surface ladder and contrast, `data` the data palette's gates. */
+export type SchemeCheck = 'core' | 'data';
 /**
  * Check a scheme against the invariants every scheme keeps: the surfaces climb in lightness (trench < well < ground
  * < raised ≤ … ≤ modal) and text, control edges and presence colours hold their contrast on every surface. Pass the
  * colour tokens by name (without `--`), or an element to read them from. Returns one sentence per problem; [] passes.
  * Only hex values can be measured; any other value of a checked token is reported.
+ *
+ * `include` picks the checks; it defaults to `['core']`. Add `'data'` for the data palette's gates (Theming.md, "The
+ * data palette"): lightness band and chroma, colour-blind and normal-vision separation, 3:1 on ground and raised,
+ * distance from the accent, status and presence hues, and monotone ramps.
  */
-export declare function checkScheme(colors: Partial<Record<SchemeColorToken, string>> | Element): string[];
+export declare function checkScheme(colors: Partial<Record<SchemeColorToken, string>> | Element, options?: {
+    include?: SchemeCheck[];
+}): string[];
 export interface CustomScheme {
     /** Stamped as data-scheme on the provider's root. */
     name: string;
     /** The built-in scheme your tokens are laid over: any token you leave out comes from it, and so does light or dark
-     *  handling (casts, rims, walls). Use nightfall or alpine for a dark scheme. Default 'daylight'. */
-    base?: BuiltInScheme;
+     *  handling (casts, rims, walls). Use nightfall for a dark scheme. Default 'daylight'. */
+    base?: BuiltInScheme | RetiredScheme;
     /** Colour and shadow tokens by name, without `--`. */
     tokens: Partial<Record<SchemeColorToken | SchemeShadowToken, string>>;
 }
-export type BuiltInScheme = 'daylight' | 'nightfall' | 'mesa' | 'alpine';
+export type BuiltInScheme = 'daylight' | 'nightfall';
+/** @deprecated Mesa and Alpine were retired because they matched generated-UI palette defaults (#324). They resolve
+ *  to daylight and nightfall, with a warning in development. */
+export type RetiredScheme = 'mesa' | 'alpine';
 /** A built-in scheme, the name of your own [data-theme="…"] block, or a CustomScheme. */
 export type Scheme = BuiltInScheme | (string & {});
-type Ctx = {
+/** The nearest theme's portal host. Modal ownership stays private. */
+export declare const useAltitude: () => {
     host: HTMLElement | null;
+    /** @deprecated Internal visual-only compatibility helper; use Dialog or Sheet for modal behavior. */
     pushLayer: () => () => void;
-};
-export declare const useAltitude: () => Ctx | null;
+} | null;
 export interface AltitudeProviderProps extends React.HTMLAttributes<HTMLDivElement> {
     scheme?: Scheme | CustomScheme;
     accent?: string;
     motion?: 'system' | 'full' | 'reduced';
     /** 'more' renders elevation as hard, high-contrast slabs (offset = height). 'system' follows prefers-contrast. */
     contrast?: 'system' | 'more';
+    /**
+     * How large controls are (#245). 'auto' (default): today's sizes for a mouse, a step up under a coarse pointer (a
+     * finger), so they're big enough to hit. 'comfortable': the larger sizes everywhere (a kiosk, an accessibility
+     * setting). 'compact': today's sizes even on touch. Hit areas reach 44px under a coarse pointer either way.
+     */
+    density?: 'auto' | 'compact' | 'comfortable';
     recede?: boolean;
     /** Openings deepen as the pointer approaches (empty fields, a sheet's finger pull). Default true; reduced motion turns it off regardless. */
     approach?: boolean;
+    /**
+     * How content that's still on its way waits (#343). 'sweep' (default): light passes over each imprint. 'breath'
+     * (experimental): imprints breathe in depth on one page clock, a swell crossing the view top to bottom; content that
+     * rests raised (`Await settle="raised"`) rises a level past its rest and settles, flush content fills past the ground,
+     * and a card's parts land together. Set it on the outer provider: nested providers inherit it and can't turn it off.
+     */
+    loading?: 'sweep' | 'breath';
+    /**
+     * The whole app is in a mode people must never mistake for the normal app: test mode, viewing as a customer,
+     * read-only, a preview. Height can't say "this whole ground is different", so it's said in words and a border: a
+     * flush strip naming the mode at the top, a 2px frame around the viewport, and a plate in every Dialog and Sheet.
+     */
+    mode?: AppMode;
+    /**
+     * Development checks: warns when more than one primary Button is visible in one view (law 1). Each Dialog, Sheet and
+     * Popover is its own view, and <PrimaryScope> makes another. Default: on when process.env.NODE_ENV isn't 'production'.
+     */
+    devChecks?: boolean;
+}
+export interface AppMode {
+    label: string;
+    description?: React.ReactNode;
+    /** Default 'caution'. */
+    tone?: 'caution' | 'accent' | 'critical' | 'neutral';
+    /** A way out ("Leave test mode"). The strip can't be dismissed. */
+    action?: React.ReactNode;
 }
-export declare function AltitudeProvider({ scheme, accent, motion, contrast, recede, approach, className, style, children, ...rest }: AltitudeProviderProps): React.JSX.Element;
+/** Opens a scope of its own for the one-primary check: an independent card on a dashboard, a dialog. */
+export declare function PrimaryScope({ name, children }: {
+    name?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Button variant="primary" registers itself with the nearest scope while it's mounted. */
+export declare function usePrimaryRegistration(el: React.RefObject<HTMLElement | null>, primary: boolean): void;
+/** The provider's loading style, for the parts of loading that aren't only CSS (RevealGroup's budget, Card's grouping). */
+export declare const LoadingStyleContext: React.Context<"sweep" | "breath">;
+/** The app's mode, for Dialog and Sheet to name it in their headers. */
+export declare const ModeContext: React.Context<AppMode | null>;
+/** The mode's name as a plate, for headers of things that float above the page (Dialog, Sheet). */
+export declare function ModePlate(): React.JSX.Element | null;
+export declare function AltitudeProvider({ scheme, accent, motion, contrast, density, recede, approach, loading, mode, devChecks, className, style, children, ...rest }: AltitudeProviderProps): React.JSX.Element;
 /** Renders into the provider's layer host (inside the theme, outside the receding stage), else document.body. */
 export declare function Layer({ children }: {
     children: React.ReactNode;
 }): React.ReactPortal | null;
 export declare function riseDelay(): number;
+/**
+ * Breath (loading="breath"): an imprint takes its phase from one page clock, lagged by how far down the view it sits,
+ * so imprints change in step (one moving thing, not many) and a slow swell of depth crosses the view. Ten seconds in,
+ * it calms. Returns a ref for the element whose imprints breathe; does nothing under the sweep.
+ */
+export declare function useBreath<T extends HTMLElement>(): (el: T | null) => void;
 export type Presence = 1 | 2 | 3;
 export interface DepthProps {
     /** Afterglow. Any value: when it changes the surface lifts, tints and settles back over dur-settle. `true` settles once on mount. */
@@ -116,12 +202,55 @@ export type Level = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
 export interface SurfaceProps extends React.HTMLAttributes<HTMLElement>, DepthProps {
     level?: Level;
     interactive?: boolean;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    href?: string;
     as?: keyof React.JSX.IntrinsicElements;
 }
 export declare const Surface: React.ForwardRefExoticComponent<SurfaceProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Keep an anchored floating panel (a tooltip, popover, menu, hover card, list) inside the viewport (#248): when it
+ * opens, and when the window resizes, it's measured and shifted sideways so it stays 8px clear of the screen's edges,
+ * on top of whatever translate its own placement uses. Its CSS caps its width at the viewport's.
+ */
+export declare function useFitFloating(ref: React.RefObject<HTMLElement | null>, open: boolean): void;
+/** How a menu or list presents itself (#249): anchored to its trigger, or as a sheet at the bottom edge. */
+export type Presentation = 'auto' | 'anchored' | 'sheet';
+/**
+ * Whether a menu or list opens as a bottom sheet: always for 'sheet', never for 'anchored', and for 'auto' on a narrow
+ * touch screen (under breakpoint-compact, with a coarse pointer), where the thumb is at the bottom of the screen.
+ */
+export declare function useSheetPresentation(presentation?: Presentation): boolean;
+/** A sheet-presented menu's head: its title, and a way to close it that doesn't need a tap outside. */
+export declare function SheetHead({ title, onClose }: {
+    title?: React.ReactNode;
+    onClose: () => void;
+}): React.JSX.Element;
+/**
+ * Touch drags start on press-and-hold, so a swipe still scrolls (#254–#256). Call on a touch pointerdown: after
+ * HOLD_MS without moving more than 8px it calls onHold, and from then until the finger lifts the browser isn't
+ * allowed to pan (the first touchmove is cancelled) or open a long-press menu. Moving first gives the gesture to the
+ * browser. Returns a function that abandons the hold.
+ */
+export declare const HOLD_MS = 400;
+export declare function touchHold(e: {
+    clientX: number;
+    clientY: number;
+    pointerId: number;
+}, onHold: () => void): () => void;
+/**
+ * Whether the person likely has a keyboard: false on a touch-only device (no hover, a coarse pointer) until a key is
+ * pressed in the session, true otherwise. Components hide shortcut hints when it's false; the shortcuts still work.
+ */
+export declare function useKeyboardLikely(): boolean;
 export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
     /** A KeyboardEvent.key (case-insensitive) — the key presses down while it is held. */
     listen?: string;
+    /**
+     * Hide it on a touch-only device until a key is pressed (#262): for a hint that only makes sense with a keyboard.
+     * Off by default, since an app may be documenting its shortcuts on purpose. Components' own hints do this already.
+     */
+    hideOnTouch?: boolean;
 }
-export declare function Kbd({ listen, className, children, ...rest }: KbdProps): React.JSX.Element;
+export declare function Kbd({ listen, hideOnTouch, className, children, ...rest }: KbdProps): React.JSX.Element | null;
 export {};

package/dist/types/data-grid.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+export type DataGridResult = {
+    ok: true;
+} | {
+    ok: false;
+    error: string;
+};
+export interface DataGridChange<T> {
+    rowId: string;
+    key: string;
+    draft: unknown;
+    previousValue: unknown;
+    row: T;
+}
+/** What a column's custom editor receives. Spread it onto a Select or Combobox. */
+export interface DataGridEditorControl {
+    value: any;
+    onValueChange: (value: any) => void;
+    id: string;
+    'aria-label': string;
+    invalid: boolean;
+    autoFocus: true;
+}
+export interface DataGridColumn<T> {
+    key: string;
+    header: React.ReactNode;
+    /** The header as words, for cell names. Default: the header when it's a string, else the key. */
+    label?: string;
+    align?: 'start' | 'end';
+    editable?: boolean;
+    /** Text typed into the cell → the value. Default: the text. */
+    parse?: (text: string) => unknown;
+    /** The value → text in the editing field and in copies. Default: String(value ?? ''). */
+    format?: (value: unknown) => string;
+    /** Return an error to refuse a value. */
+    validate?: (value: any, row: T) => string | undefined;
+    /** Draw the cell at rest. Default: format(value). */
+    cell?: (row: T) => React.ReactNode;
+    /** A custom editor (a Select): it commits as soon as a value is chosen. */
+    editor?: (control: DataGridEditorControl) => React.ReactNode;
+    width?: number | string;
+    /**
+     * The narrowest the column gets (#260): on a phone the table scrolls inside its frame rather than squeezing a column
+     * below this. Default: the header's width, and at least 6rem when the table is narrow.
+     */
+    minWidth?: number | string;
+    /** Keep this column in view while the table scrolls sideways, over a flush 1px edge (no shadow: it isn't live). */
+    sticky?: boolean;
+}
+export interface DataGridProps<T> {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    rows: T[];
+    columns: DataGridColumn<T>[];
+    getRowId: (row: T) => string;
+    /** Names a row in each cell's name (“Price, Desk lamp”). */
+    getRowLabel: (row: T) => string;
+    /** One cell. Resolve after `rows` carries the canonical value. */
+    onCellSave: (change: DataGridChange<T>) => DataGridResult | Promise<DataGridResult>;
+    /** A paste or a cleared range, as one batch. Default: each cell through onCellSave. */
+    onCellsSave?: (changes: DataGridChange<T>[]) => DataGridResult | Promise<DataGridResult>;
+    /** Ctrl/Cmd+Z: reverse the last committed change (or batch). Omit and Ctrl+Z does nothing. */
+    onUndo?: (last: DataGridChange<T>[]) => void;
+    /** Check every cell against its column's `validate` at rest, not only while it's edited: an invalid value lies in a
+     * trench on critical-soft, with its problem in the cell's description. For data that arrived from elsewhere (an import). */
+    showInvalid?: boolean;
+    maxHeight?: number | string;
+    className?: string;
+}
+/**
+ * A table you edit cell by cell, with spreadsheet keys. Cells are the record, flush in their rows. The cell being
+ * edited opens into a well clipped to the cell; an invalid value deepens to a trench; when a value lands the floor
+ * rises flush and the cell settles. A pending cell holds a small raised plate; a failed one drops to a trench. Range
+ * selection is a tint, not a height: choosing a target isn't live content.
+ */
+export declare function DataGrid<T>({ rows, columns, getRowId, getRowLabel, onCellSave, onCellsSave, onUndo, showInvalid, maxHeight, className, ...aria }: DataGridProps<T>): React.JSX.Element;

package/dist/types/date-picker.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+export type ISODate = string;
+export interface DateRange {
+    start: ISODate | null;
+    end: ISODate | null;
+}
+/**
+ * A named span for DateRangePicker: a fixed range, or a function of today, so "Last 7 days" stays relative and
+ * re-resolves when today changes. `key` defaults to the label.
+ */
+export interface DatePreset {
+    key?: string;
+    label: string;
+    range: DateRange | ((today: ISODate) => DateRange);
+}
+/** Ready-made relative presets. Each is a function, so labels and spans can be adjusted: `datePresets.lastDays(14)`. */
+export declare const datePresets: {
+    today: () => DatePreset;
+    yesterday: () => DatePreset;
+    /** The last n days, today included: lastDays(7) on 27 Oct is 21–27 Oct. */
+    lastDays: (n: number) => DatePreset;
+    thisMonth: () => DatePreset;
+    lastMonth: () => DatePreset;
+    thisQuarter: () => DatePreset;
+    lastQuarter: () => DatePreset;
+    thisYear: () => DatePreset;
+};
+export interface CalendarProps {
+    value?: ISODate | null;
+    defaultValue?: ISODate | null;
+    onValueChange?: (value: ISODate) => void;
+    /** Earliest and latest days that can be chosen. */
+    min?: ISODate;
+    max?: ISODate;
+    isUnavailable?: (date: ISODate) => boolean;
+    /** Default: the browser's. */
+    locale?: string;
+    /** 0 Sunday … 6 Saturday. Default: the locale's. */
+    weekStartsOn?: number;
+    'aria-label'?: string;
+    className?: string;
+}
+/** A month calendar laid on the page (level 0): no field, no panel. */
+export declare function Calendar({ value, defaultValue, onValueChange, min, max, isUnavailable, locale, weekStartsOn, className, ...aria }: CalendarProps): React.JSX.Element;
+interface PickerBase {
+    min?: ISODate;
+    max?: ISODate;
+    isUnavailable?: (date: ISODate) => boolean;
+    locale?: string;
+    weekStartsOn?: number;
+    /** Goes on the first segment; Field sets it so its label points here. */
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    /** Field sets it for you when it has an error. */
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    /** Start with the calendar open (for documentation). */
+    defaultOpen?: boolean;
+}
+export interface DatePickerProps extends PickerBase {
+    value?: ISODate | null;
+    defaultValue?: ISODate | null;
+    /** Called with a complete, real, allowed date, or null when the field is cleared. */
+    onValueChange?: (value: ISODate | null) => void;
+}
+export interface DateRangePickerProps extends PickerBase {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onValueChange?: (value: DateRange) => void;
+    /**
+     * Named spans offered beside the calendar ("Last 7 days", "This quarter"): build them with `datePresets`, or pass
+     * `{ label, range }`. Choosing one fills the field with its name and dates; typing or picking days clears it.
+     */
+    presets?: DatePreset[];
+    /** The chosen preset's key, controlled; null when the range is custom. */
+    preset?: string | null;
+    /** The preset to start with, uncontrolled. Without a `defaultValue`, the range starts as this preset's. */
+    defaultPreset?: string | null;
+    onPresetChange?: (preset: string | null) => void;
+    /** Today, as an ISO date: relative presets resolve against it, and re-resolve when it changes. Default: the local date. */
+    today?: ISODate;
+}
+/**
+ * A date in a field, typed or picked. The field is an opening built like Select; its floor rises flush once it holds a
+ * date. The calendar floats at level 3; days are flush and the chosen one carries the raised accent mark.
+ */
+export declare function DatePicker({ value, defaultValue, onValueChange, min, max, isUnavailable, locale, weekStartsOn, id, name, disabled, required, invalid, size, className, defaultOpen, ...aria }: DatePickerProps): React.JSX.Element;
+/** Two dates as one span. In the calendar the span is a sunk track between two raised ends, the Slider's build. */
+export declare function DateRangePicker({ value, defaultValue, onValueChange, min, max, isUnavailable, locale, weekStartsOn, id, name, disabled, required, invalid, size, className, defaultOpen, presets, preset: presetProp, defaultPreset, onPresetChange, today: todayProp, ...aria }: DateRangePickerProps): React.JSX.Element;
+export {};

package/dist/types/diff-view.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+type Op = {
+    kind: 'same' | 'add' | 'del';
+    text: string;
+};
+/** Line operations for two texts. */
+export declare function diffLines(before: string, after: string): Op[];
+export interface DiffField {
+    key: string;
+    label: string;
+    format?: (value: unknown) => React.ReactNode;
+}
+export interface DiffViewProps {
+    /** 'text' (default): lines of two texts. 'properties': fields of two records. */
+    mode?: 'text' | 'properties';
+    before: string | Record<string, unknown>;
+    after: string | Record<string, unknown>;
+    /** For mode="properties": which fields, labelled. Default every key that changed. */
+    fields?: DiffField[];
+    /** Unchanged lines kept around each change; longer runs fold behind a lid. Default 3. */
+    context?: number;
+    /** What's being compared ("Version 4 → 5"). */
+    caption?: React.ReactNode;
+    /** Precomputed line operations, for large inputs. */
+    hunks?: Op[];
+    /**
+     * Review each change (#282, text mode): a change awaiting a decision is a proposal, so it's raised, with Accept and
+     * Reject; once decided it's the record again (accepted flush with one afterglow, rejected collapsed to a line). The
+     * header gets Accept all, Reject all and "3 of 7 changes reviewed"; n and p (or ] and [) move between undecided ones.
+     */
+    review?: boolean;
+    /** Decisions so far, by change id ("change-1", in order). Your app owns applying them. */
+    decisions?: Record<string, DiffDecision>;
+    onDecide?: (changeId: string, decision: DiffDecision) => void;
+    onDecideAll?: (decision: DiffDecision) => void;
+    className?: string;
+}
+export type DiffDecision = 'accept' | 'reject';
+type Change = {
+    id: string;
+    n: number;
+    from: number;
+    to: number;
+    label: string;
+};
+/** The changes in a list of line operations: each maximal run of removals and additions, with its lines named. */
+export declare function diffChanges(ops: Op[]): Change[];
+/**
+ * What changed between two versions, in signs and words. Both versions are the record, so it lies flush. Additions are
+ * positive-soft with a + sign and "Added", removals critical-soft, struck through, with − and "Removed"; a changed
+ * property shows the old value struck through beside the new. Long unchanged runs fold behind lids. Never colour alone.
+ */
+export declare function DiffView({ mode, before, after, fields, context, caption, hunks, review, decisions, onDecide, onDecideAll, className }: DiffViewProps): React.JSX.Element;
+export {};

package/dist/types/dot-plot.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { type ChartConfig, type ChartDatum, type ChartInfo } from './chart.js';
+export interface DotPlotProps {
+    /** The records: one per category. undefined or a promise while they load; null or [] when there are none. */
+    data: ChartDatum[] | null | undefined | PromiseLike<ChartDatum[] | null>;
+    /** What the plot says when there's no data. */
+    empty?: import('./chart.js').ChartEmpty;
+    /** The key of each record's category, down the side. */
+    x: string;
+    /** Order the categories by value ('desc': the largest first): the first series', or `to`'s. Default: the data's order. */
+    sort?: 'asc' | 'desc';
+    /**
+     * A spread around each value, as the keys of its low and high ("p10", "p90"): a flat band of the series colour at 16%
+     * behind the dot. It joins the axis, the readout, each point's name and the table. Never error bars.
+     */
+    range?: [string, string];
+    /** What the spread is, in words. Default "Range". */
+    rangeLabel?: string;
+    /** The series the spread belongs to. Default the first. */
+    rangeSeries?: string;
+    /**
+     * Before and after per category (a dumbbell): the keys of the earlier and later values. The earlier dot is hollow, the
+     * later filled, joined by a 2px ink-muted link, and the change is said in words ("Up 14% from Q2").
+     */
+    from?: string;
+    to?: string;
+    /** Force zero onto the axis. Default false: a dot plot is for values where zero isn't part of the story. */
+    zero?: boolean;
+    /** Filter in place: which records match. Misses recede to 35%, keeping their place and colour. */
+    relevance?: (d: ChartDatum) => 'match' | 'miss' | undefined;
+    /** Fit the axis to the matches rather than holding it. */
+    rescale?: boolean;
+    /** Marks you can select: the selected record's category, and what to do when one is chosen (null clears). */
+    selected?: unknown;
+    onSelect?: (d: ChartDatum | null) => void;
+    /** Marks you drill into: the id of the current Drilldown node's child that a record opens. */
+    drill?: (d: ChartDatum) => string | null | undefined;
+    /** The crosshair and readout. Default true. */
+    tooltip?: boolean;
+    /** Series keys that keep their colours while the rest take data-context (#188). */
+    focus?: string[];
+    children?: React.ReactNode;
+}
+/**
+ * Values compared across categories where zero isn't part of the story (ten services' p95, all between 180 and 240ms),
+ * or averages with their spread, or before and after per category. The values are the record, so the dots lie flat on
+ * the ground, as a ScatterChart's do: at least 8px, a marker shape per series, ringed 2px in the plot's colour. With no
+ * zero there's no ground line. A spread is a flat band behind its dot, never error bars; a dumbbell joins a hollow
+ * "from" dot to a filled "to" dot with a 2px ink-muted link.
+ */
+export declare function DotPlot(props: DotPlotProps): React.JSX.Element | null;
+export declare namespace DotPlot {
+    var chartInfo: (props: Record<string, unknown>, config: ChartConfig) => ChartInfo;
+}