@westonkd/sprint 0.4.0 → 0.6.0

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
 import { JSX } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { Provider } from 'react';
 import { ReactNode } from 'react';
@@ -7,6 +8,8 @@ import { Ref } from 'react';
 
 export declare function accessibleText(element: Element): string | undefined;
 
+export declare const ACT_BREADCRUMB_TOOL: AgentToolSpec;
+
 export declare function afterCommit(): Promise<void>;
 
 export declare const AGENT_ATTRIBUTE = "data-sprint-agent";
@@ -87,6 +90,7 @@ export declare function AgentLine(props: AgentLineProps): JSX.Element;
 export declare interface AgentLineProps {
     node: AgentNode;
     children?: ReactNode;
+    silent?: boolean;
 }
 
 export declare interface AgentManifest {
@@ -259,6 +263,193 @@ export declare interface AlertProps extends ComponentPropsWithRef<"div"> {
 
 export declare type AlertTone = "neutral" | "info" | "warning" | "danger";
 
+export declare function Breadcrumb(props: BreadcrumbProps): JSX.Element;
+
+export declare interface BreadcrumbAction {
+    label: string;
+    href?: string;
+    external?: boolean;
+    onSelect?: () => void;
+}
+
+export declare interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    active?: boolean;
+    external?: boolean;
+    children?: readonly BreadcrumbItem[];
+}
+
+export declare const breadcrumbMeta: {
+    readonly name: "Breadcrumb";
+    readonly category: "navigation";
+    readonly summary: "A navigation landmark that renders as one line: the path to the current page, where every crumb opens the level it sits in. Every destination in the tree stays in the page as an addressable part; the crumbs decide which of them a person is shown.";
+    readonly whenToUse: "Use it as an application's primary navigation when the destinations form a tree, or when the catalogue is larger than a rail can hold. A crumb opens its siblings, a branch drills into its children, and typing in an open crumb searches the whole tree, so what a person chooses from is one level rather than the whole set. Put a page-level command or two in actions. It takes destinations as data because it counts, filters and orders them.";
+    readonly whenNotToUse: "Do not use it for a handful of links that fit in a sidebar; that is Nav with NavGroup, which keeps every destination visible at once. Do not use it for links inside prose, and do not pass components in items or actions: each destination is a label, an href and its children, not a node.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly label: {
+            readonly kind: "string";
+            readonly description: "What this navigation is for. Rendered as the landmark's accessible name and as the root of the path.";
+            readonly required: true;
+        };
+        readonly href: {
+            readonly kind: "string";
+            readonly description: "Where the root of the path leads, such as the list a detail page belongs to. Without it the root is plain text.";
+        };
+        readonly items: {
+            readonly kind: "array";
+            readonly description: "The destinations, as a tree of { label, href?, active?, external?, children? }. The item marked active is the current page, and the crumbs are the path to it. A branch without an href is a level, not a destination.";
+            readonly required: true;
+        };
+        readonly actions: {
+            readonly kind: "array";
+            readonly description: "Commands for the whole page, rendered at the end of the bar, as { label, href?, external?, onSelect? }. An action with an href is a link; one without runs onSelect.";
+        };
+        readonly maxCrumbs: {
+            readonly kind: "number";
+            readonly description: "How many crumbs the bar shows before it folds the middle of the path behind an ellipsis. On a narrow screen every crumb but the last folds regardless.";
+            readonly default: 4;
+        };
+        readonly emptyLabel: {
+            readonly kind: "string";
+            readonly description: "What the bar says when a filter matches no destination.";
+            readonly default: "No match";
+        };
+        readonly trailEmptyLabel: {
+            readonly kind: "string";
+            readonly description: "What the bar says when nothing has been visited through it yet.";
+            readonly default: "Nothing visited yet";
+        };
+        readonly open: {
+            readonly kind: "string";
+            readonly description: "Which crumb is open, as its depth from 0, or 'trail', or 'closed'. Pass it to drive the bar from outside, such as from an application-level shortcut; leave it off and the bar keeps its own state.";
+        };
+        readonly onOpenChange: {
+            readonly kind: "handler";
+            readonly description: "Called with the crumb depth the bar wants open, 'trail', or 'closed'. Required when open is controlled, so the bar can still close itself.";
+        };
+        readonly defaultVisited: {
+            readonly kind: "array";
+            readonly description: "The hrefs already visited, oldest first, to seed the trail with. Use it to restore a trail recorded through onNavigate when the bar remounts.";
+        };
+        readonly visited: {
+            readonly kind: "array";
+            readonly description: "The trail as hrefs, oldest first, when the owner keeps it. Leave it off and the bar keeps its own trail for as long as it is mounted.";
+        };
+        readonly onNavigate: {
+            readonly kind: "handler";
+            readonly description: "Called with the item when a destination is chosen, before the browser follows the href. Use it to record the visit somewhere that outlives this component.";
+        };
+        readonly agentName: {
+            readonly kind: "string";
+            readonly description: "Overrides the label when deriving the action tool's name.";
+        };
+        readonly agentTool: {
+            readonly kind: "boolean";
+            readonly description: "Whether actions without an href register a WebMCP tool.";
+            readonly default: true;
+        };
+    };
+    readonly state: {
+        readonly href: {
+            readonly description: "On the root: where the root of the path leads. On a destination or an action: where it goes.";
+            readonly attribute: "data-sprint-href";
+        };
+        readonly recency: {
+            readonly description: "On a group of results while the trail is open: 1 for the group visited most recently, counting up. Orders the groups without a style attribute.";
+            readonly attribute: "data-sprint-recency";
+        };
+        readonly path: {
+            readonly description: "The path to the current page, labels joined by ' / '. Absent when no item is active.";
+            readonly attribute: "data-sprint-path";
+        };
+        readonly destinations: {
+            readonly description: "How many destinations the tree holds.";
+            readonly attribute: "data-sprint-destinations";
+        };
+        readonly visited: {
+            readonly description: "How many destinations have been visited through this bar.";
+            readonly attribute: "data-sprint-visited";
+        };
+        readonly open: {
+            readonly description: "Which crumb is open, as its depth, or trail. Absent when the bar is closed to its one line.";
+            readonly attribute: "data-sprint-open";
+        };
+        readonly matches: {
+            readonly description: "How many entries the open crumb is showing.";
+            readonly attribute: "data-sprint-matches";
+        };
+        readonly shown: {
+            readonly description: "On a destination: present when the open crumb is currently showing it to a person. Every destination stays in the page either way.";
+            readonly attribute: "data-sprint-shown";
+        };
+        readonly parent: {
+            readonly description: "On a destination: the labels of the levels above it, joined by ' / '.";
+            readonly attribute: "data-sprint-parent";
+        };
+        readonly active: {
+            readonly description: "On a destination: present when it is the current page.";
+            readonly attribute: "data-sprint-active";
+        };
+        readonly ancestor: {
+            readonly description: "On a destination: present when it is on the path to the current page.";
+            readonly attribute: "data-sprint-ancestor";
+        };
+    };
+    readonly tools: {
+        readonly act: AgentToolSpec;
+    };
+    readonly agentView: {
+        readonly example: "- **Breadcrumb** \"Workbench\" [destinations=2, path=display / Table, visited=0] → tool `act-workbench`\n  - part `action` \"Copy link\"\n  - part `destination` \"Button\" [href=#/Button, parent=action]\n  - part `destination` \"Table\" [active, href=#/Table, parent=display]";
+    };
+    readonly a11y: {
+        readonly role: "navigation";
+        readonly notes: "The label is the landmark's accessible name and the crumbs are an ordered list, the current one carrying aria-current=page. Destinations the open crumb is not showing are hidden from the accessibility tree by CSS, so a screen reader travels one level at a time exactly as a sighted reader does, while the page itself keeps all of them. From the field, ArrowDown enters the results and ArrowUp at the top returns to it; typing anywhere in the results goes back to the field and keeps the character. Enter takes the first result. Escape closes the bar, as does a press outside it, and the match count is a polite live region. ArrowUp in an empty field recalls the trail, the way a console recalls history. The ellipsis that folds the middle of the path is a toggle with aria-expanded.";
+    };
+    readonly relatedComponents: readonly ["Nav", "NavGroup", "Link", "Shell"];
+    readonly examples: readonly [{
+        readonly title: "A path you can edit";
+        readonly description: "One line of chrome over a tree. Each crumb opens the level it sits in and filters it as you type; a branch drills into its children.";
+        readonly code: "<Breadcrumb\n  label=\"Workbench\"\n  items={[\n    { label: \"action\", children: [{ href: \"#/Button\", label: \"Button\" }] },\n    {\n      label: \"display\",\n      children: [{ href: \"#/Table\", label: \"Table\", active: true }],\n    },\n  ]}\n/>";
+    }, {
+        readonly title: "A deep path that folds";
+        readonly description: "Past maxCrumbs the middle of the path folds behind an ellipsis, which unfolds it again. A crumb that is open is never folded.";
+        readonly code: "<Breadcrumb\n  label=\"Store\"\n  maxCrumbs={3}\n  items={[\n    {\n      label: \"Clothing\",\n      href: \"#/clothing\",\n      children: [\n        {\n          label: \"Outerwear\",\n          href: \"#/clothing/outerwear\",\n          children: [\n            {\n              label: \"Jackets\",\n              href: \"#/clothing/outerwear/jackets\",\n              children: [{ label: \"Rain shell\", href: \"#/rain-shell\", active: true }],\n            },\n          ],\n        },\n      ],\n    },\n  ]}\n/>";
+    }, {
+        readonly title: "Trailing actions";
+        readonly description: "Commands for the whole page sit at the end of the bar. A link action publishes its href; one with onSelect registers a WebMCP tool, since an agent has no URL to reach it by.";
+        readonly code: "<Breadcrumb\n  label=\"Docs\"\n  items={[{ label: \"guides\", children: [{ href: \"#/guide/webmcp\", label: \"WebMCP\", active: true }] }]}\n  actions={[\n    { label: \"Copy link\", onSelect: () => navigator.clipboard.writeText(location.href) },\n    { label: \"Source\", href: \"https://github.com/westonkd/sprint\", external: true },\n  ]}\n/>";
+    }, {
+        readonly title: "A root that leads back";
+        readonly description: "Give the root an href and it becomes a link back to the list the page belongs to, the way \"People\" leads from a person back to everyone.";
+        readonly code: "<Breadcrumb\n  label=\"People\"\n  href=\"#/people\"\n  items={[\n    {\n      label: \"Admin\",\n      href: \"#/people?role=admin\",\n      children: [{ label: \"Tess Ocampo\", href: \"#/people/tess\", active: true }],\n    },\n  ]}\n/>";
+    }, {
+        readonly title: "Recording where a person has been";
+        readonly description: "The bar keeps a trail of the destinations chosen through it, reachable from the visited count at its head. Record visits through onNavigate and hand them back in defaultVisited, and the trail survives the bar remounting.";
+        readonly code: "<Breadcrumb\n  label=\"Docs\"\n  items={[{ label: \"guides\", children: [{ href: \"#/guide/webmcp\", label: \"WebMCP\" }] }]}\n  defaultVisited={[\"#/guide/webmcp\"]}\n  onNavigate={(item) => console.log(item.href)}\n/>";
+    }];
+};
+
+export declare type BreadcrumbOpening = number | "trail" | "closed";
+
+export declare interface BreadcrumbProps extends Omit<ComponentPropsWithRef<"nav">, "children"> {
+    label: string;
+    items: readonly BreadcrumbItem[];
+    actions?: readonly BreadcrumbAction[];
+    maxCrumbs?: number;
+    emptyLabel?: string;
+    trailEmptyLabel?: string;
+    open?: BreadcrumbOpening;
+    onOpenChange?: (opening: BreadcrumbOpening) => void;
+    onNavigate?: (item: BreadcrumbItem) => void;
+    href?: string;
+    visited?: readonly string[];
+    defaultVisited?: readonly string[];
+    agentName?: string;
+    agentTool?: boolean;
+}
+
 export declare function buildAgentManifest(version: string): AgentManifest;
 
 export declare function buildAgentNode(input: NodeInput): AgentNode;
@@ -457,6 +648,106 @@ export declare interface CardProps extends Omit<ComponentPropsWithRef<"button">,
     ref?: Ref<HTMLButtonElement> | Ref<HTMLAnchorElement>;
 }
 
+export declare interface Change {
+    kind: ChangeKind;
+    label: string;
+    from?: string;
+    to?: string;
+    detail?: string;
+}
+
+export declare type ChangeKind = "added" | "removed" | "changed";
+
+export declare function ChangeList(props: ChangeListProps): JSX.Element;
+
+export declare const changeListMeta: {
+    readonly name: "ChangeList";
+    readonly category: "display";
+    readonly summary: "A review of what will change or has changed: each row is marked added, removed or changed, and a changed row reads from → to. The kind of every row is a glyph, a tone and spoken text at once, and an agent reads it as state rather than from the glyph.";
+    readonly whenToUse: "Use it to show a diff before someone confirms it: a role change from Write to Maintain, members added to a team, settings a migration will drop. Pass the changes as data so each row is an addressable part carrying its kind, from and to. It registers no tool, because it only reports: the action is the Button that confirms the change, and the rows are already fully readable in the agent view.";
+    readonly whenNotToUse: "Do not use it for a list whose marks carry no meaning; that is List. Do not use it for a full record of fields; that is DescriptionList or Table. Do not put components in a change; label, from, to and detail are text.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly label: {
+            readonly kind: "string";
+            readonly description: "What is changing. Names the list for a screen reader and for the agent view.";
+            readonly required: true;
+        };
+        readonly changes: {
+            readonly kind: "array";
+            readonly description: "The rows in order, each { kind, label, from?, to?, detail? }. kind is \"added\", \"removed\" or \"changed\"; label is the thing that changed; from and to are its old and new values, usually on a changed row; detail is one short line of consequence beneath it.";
+            readonly required: true;
+        };
+        readonly emptyLabel: {
+            readonly kind: "string";
+            readonly description: "What the list says when there is nothing to change.";
+            readonly default: "No changes";
+        };
+    };
+    readonly state: {
+        readonly changes: {
+            readonly description: "How many rows the list has.";
+            readonly attribute: "data-sprint-changes";
+        };
+        readonly added: {
+            readonly description: "How many rows are additions. Absent when there are none.";
+            readonly attribute: "data-sprint-added";
+        };
+        readonly removed: {
+            readonly description: "How many rows are removals. Absent when there are none.";
+            readonly attribute: "data-sprint-removed";
+        };
+        readonly changed: {
+            readonly description: "How many rows are changes of value. Absent when there are none.";
+            readonly attribute: "data-sprint-changed";
+        };
+        readonly empty: {
+            readonly description: "Present when there is nothing to change.";
+            readonly attribute: "data-sprint-empty";
+        };
+        readonly kind: {
+            readonly description: "On a change: whether the row was added, removed or changed.";
+            readonly attribute: "data-sprint-kind";
+            readonly values: readonly ["added", "removed", "changed"];
+        };
+        readonly from: {
+            readonly description: "On a change: the old value, when it has one.";
+            readonly attribute: "data-sprint-from";
+        };
+        readonly to: {
+            readonly description: "On a change: the new value, when it has one.";
+            readonly attribute: "data-sprint-to";
+        };
+    };
+    readonly agentView: {
+        readonly example: "- **ChangeList** \"Role changes\" [changed=1, changes=1]\n  - part `change` \"Changed: Ada Lovelace, from Write to Maintain\" [from=Write, kind=changed, to=Maintain]";
+    };
+    readonly a11y: {
+        readonly role: "list";
+        readonly notes: "A ul named by its label, with an explicit list role. The +, − and → glyphs are aria-hidden; each row instead starts with visually hidden text naming its kind, and a changed row says from and to in words, so the kind never rests on the glyph or its color alone. Old values are a del and new values an ins.";
+    };
+    readonly relatedComponents: readonly ["List", "DescriptionList", "Dialog"];
+    readonly examples: readonly [{
+        readonly title: "A role change";
+        readonly description: "The one row a permission review is about: what it was, and what it becomes.";
+        readonly code: "<ChangeList\n  label=\"Role changes\"\n  changes={[{ kind: \"changed\", label: \"Ada Lovelace\", from: \"Write\", to: \"Maintain\" }]}\n/>";
+    }, {
+        readonly title: "A review before confirming";
+        readonly description: "Additions, removals and changes together, each with a line of consequence where one matters.";
+        readonly code: "<ChangeList\n  label=\"Team changes\"\n  changes={[\n    { kind: \"added\", label: \"Grace Hopper\", detail: \"Gets read access to every repository.\" },\n    { kind: \"removed\", label: \"Alan Turing\" },\n    { kind: \"changed\", label: \"Ada Lovelace\", from: \"Write\", to: \"Maintain\" },\n  ]}\n/>";
+    }, {
+        readonly title: "Nothing to change";
+        readonly description: "An empty review says so rather than rendering nothing.";
+        readonly code: "<ChangeList label=\"Role changes\" changes={[]} emptyLabel=\"No role changes\" />";
+    }];
+};
+
+export declare interface ChangeListProps extends Omit<ComponentPropsWithRef<"ul">, "children"> {
+    label: string;
+    changes: readonly Change[];
+    emptyLabel?: string;
+}
+
 export declare function Checkbox(props: CheckboxProps): JSX.Element;
 
 export declare const checkboxMeta: {
@@ -571,6 +862,128 @@ export declare interface CheckboxProps extends Omit<ComponentPropsWithRef<"div">
     agentTool?: boolean;
 }
 
+export declare function ChoiceGrid(props: ChoiceGridProps): JSX.Element;
+
+export declare type ChoiceGridColumns = 2 | 3 | 4;
+
+export declare const choiceGridMeta: {
+    readonly name: "ChoiceGrid";
+    readonly category: "input";
+    readonly summary: "A question answered by pressing one of several large, equal-sized tiles, each a glyph such as an emoji over a text label. It works in two modes: submit mode, where every tile is a real submit button carrying its value, and select mode, where the tiles are a radio group driven by value and onChange.";
+    readonly whenToUse: "Use it when one tap should answer a question and the options are few enough to show at once, ideally six to twelve: an emoji verification step at sign-in (\"pick the emoji you were sent\"), a reaction, a mood, or a category picked by icon. Submit mode needs no client state, so it suits a server-rendered form page: give it a name and no onChange, and the pressed tile submits its form with name=value. Use select mode, by passing value and onChange, when the answer is one field among several and the form is submitted by something else. A verification challenge meant for a human, such as the emoji check, should pass agentTool={false} so the page does not offer an agent a one-call way through it.";
+    readonly whenNotToUse: "Do not use it for two to four short text options, which is a SegmentedControl, for long lists, which are a Select, or for choosing several at once, which is a set of Checkboxes. Do not put components in an option: label and glyph are strings, and the label is the tile's accessible name because an emoji on its own is not one.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly label: {
+            readonly kind: "string";
+            readonly description: "The question the tiles answer. Rendered as the legend of the grid's fieldset and used to derive the tool name, so write it as a person would read it, such as \"Which emoji were you sent?\".";
+            readonly required: true;
+        };
+        readonly options: {
+            readonly kind: "array";
+            readonly description: "The tiles in display order: { value, label, glyph? }. value is what the form receives, label is what a person reads and what the choose tool accepts, and glyph is a short string such as an emoji drawn large above the label and hidden from assistive technology.";
+            readonly required: true;
+        };
+        readonly columns: {
+            readonly kind: "enum";
+            readonly values: readonly ["2", "3", "4"];
+            readonly description: "How many columns the grid has at 40rem and wider. Narrower screens always get two, so every tile stays large enough to press.";
+            readonly default: 3;
+        };
+        readonly name: {
+            readonly kind: "string";
+            readonly description: "The form field name. In submit mode each tile is a submit button with this name and its option's value; in select mode a hidden input carries the selected value under this name.";
+        };
+        readonly value: {
+            readonly kind: "string";
+            readonly description: "Select mode only: the value of the selected option. Ignored in submit mode, where nothing stays selected.";
+        };
+        readonly onChange: {
+            readonly kind: "handler";
+            readonly description: "Passing it switches the grid to select mode. Called with the chosen value; the choose tool drives a real click, so it runs for agent choices too.";
+        };
+        readonly disabled: {
+            readonly kind: "boolean";
+            readonly description: "Disable every tile and unregister the choose tool.";
+            readonly default: false;
+        };
+        readonly agentName: {
+            readonly kind: "string";
+            readonly description: "Override the label used to derive the tool name, when the question is long or two grids on a page would collide.";
+        };
+        readonly agentTool: {
+            readonly kind: "boolean";
+            readonly description: "Set false to render the grid without registering a choose tool. Pass false for any challenge that exists to prove a human is present.";
+            readonly default: true;
+        };
+    };
+    readonly state: {
+        readonly mode: {
+            readonly description: "submit when pressing a tile submits the form, select when it changes a selection.";
+            readonly attribute: "data-sprint-mode";
+            readonly values: readonly ["submit", "select"];
+        };
+        readonly value: {
+            readonly description: "Select mode: the value of the option currently selected.";
+            readonly attribute: "data-sprint-value";
+        };
+        readonly columns: {
+            readonly description: "The column count at 40rem and wider.";
+            readonly attribute: "data-sprint-columns";
+            readonly values: readonly ["2", "3", "4"];
+        };
+        readonly disabled: {
+            readonly description: "Present when no tile can be pressed.";
+            readonly attribute: "data-sprint-disabled";
+        };
+    };
+    readonly tools: {
+        readonly choose: AgentToolSpec;
+    };
+    readonly agentView: {
+        readonly example: "- **ChoiceGrid** \"Pick a reaction\" [columns=4, mode=select, value=fire] → tool `choose-pick-a-reaction`\n  - part `choice` \"Thumbs up\" [value=up]\n  - part `choice` \"Fire\" [checked, value=fire]\n  - part `choice` \"Laughing\" [value=laugh]\n  - part `choice` \"Sad\" [value=sad]";
+    };
+    readonly examples: readonly [{
+        readonly title: "An emoji verification check";
+        readonly description: "Submit mode in a plain form: each tile is a submit button named emoji, so the form posts emoji=fox with no client state. agentTool is false because the check exists to prove a person is present.";
+        readonly code: "<form method=\"post\" action=\"verify\">\n  <ChoiceGrid\n    label=\"Which emoji were you sent?\"\n    name=\"emoji\"\n    agentTool={false}\n    options={[\n      { value: \"fox\", label: \"Fox\", glyph: \"🦊\" },\n      { value: \"rocket\", label: \"Rocket\", glyph: \"🚀\" },\n      { value: \"cactus\", label: \"Cactus\", glyph: \"🌵\" },\n      { value: \"anchor\", label: \"Anchor\", glyph: \"⚓\" },\n      { value: \"pizza\", label: \"Pizza\", glyph: \"🍕\" },\n      { value: \"comet\", label: \"Comet\", glyph: \"☄️\" },\n    ]}\n  />\n</form>";
+    }, {
+        readonly title: "Picking one with state";
+        readonly description: "Select mode with four columns: the tiles are a radio group, and in agent view each one renders as its own control so an agent can choose without WebMCP.";
+        readonly code: "<ChoiceGrid\n  label=\"Pick a reaction\"\n  columns={4}\n  name=\"reaction\"\n  value={reaction}\n  onChange={setReaction}\n  options={[\n    { value: \"up\", label: \"Thumbs up\", glyph: \"👍\" },\n    { value: \"fire\", label: \"Fire\", glyph: \"🔥\" },\n    { value: \"laugh\", label: \"Laughing\", glyph: \"😂\" },\n    { value: \"sad\", label: \"Sad\", glyph: \"😢\" },\n  ]}\n/>";
+    }, {
+        readonly title: "A disabled grid";
+        readonly description: "Disabled unregisters the tool and renders the agent view as text only, so an agent cannot press a tile a person could not.";
+        readonly code: "<ChoiceGrid\n  label=\"Delivery window\"\n  columns={2}\n  disabled\n  value=\"morning\"\n  onChange={setWindow}\n  options={[\n    { value: \"morning\", label: \"Morning\", glyph: \"☀\" },\n    { value: \"evening\", label: \"Evening\", glyph: \"☾\" },\n  ]}\n/>";
+    }];
+    readonly a11y: {
+        readonly role: "group, or radiogroup in select mode";
+        readonly keyboard: readonly ["Tab reaches every tile in submit mode, and the group once in select mode", "Arrow keys move to the next or previous tile; in select mode they also select it", "Home and End move to the first and last tile", "Enter or Space presses the focused tile"];
+        readonly notes: "The root is a fieldset labelled by its legend. A glyph is aria-hidden and the label is always visible text, so each tile's accessible name is its label. In select mode, selection follows focus with a roving tabindex. In agent view a hidden input stays in the form so a choice made there submits the same field a person's would.";
+    };
+    readonly relatedComponents: readonly ["SegmentedControl", "Select", "Button"];
+};
+
+export declare interface ChoiceGridProps extends Omit<ComponentPropsWithRef<"fieldset">, "onChange"> {
+    label: string;
+    options: readonly ChoiceOption[];
+    columns?: ChoiceGridColumns;
+    name?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    agentName?: string;
+    agentTool?: boolean;
+}
+
+export declare interface ChoiceOption {
+    value: string;
+    label: string;
+    glyph?: string;
+}
+
+export declare const CHOOSE_TOOL: AgentToolSpec;
+
 export declare function clamp(text: string, max: number): string;
 
 export declare const CLOSE_DIALOG_TOOL: AgentToolSpec;
@@ -653,50 +1066,137 @@ export declare type CodeLanguage = "tsx" | "json" | "bash" | "text";
 
 export declare const COMPONENT_ATTRIBUTE = "data-sprint";
 
-export declare const defaultAgentFormat: AgentFormatter;
-
-export declare function defineAgentMeta<const T extends AgentComponentMeta>(meta: T): T;
-
-export declare interface DescriptionItem {
-    term: ReactNode;
-    description: ReactNode;
-}
+export declare function CopyField(props: CopyFieldProps): JSX.Element;
 
-export declare function DescriptionList(props: DescriptionListProps): JSX.Element;
-
-export declare const descriptionListMeta: {
-    readonly name: "DescriptionList";
-    readonly category: "display";
-    readonly summary: "Labelled term–description pairs for the details of one thing: metadata, settings, profile fields.";
-    readonly whenToUse: "Use for the properties of a single entity: a token's created date and scopes, a session's device and last activity, a profile's fields. Each item pairs one term with one description.";
-    readonly whenNotToUse: "Do not use for many entities with the same fields; that is a Table. Do not put components inside term or description; both are flattened to text for the agent view, so only inline content survives. Do not use for prose sequences; that is a List.";
+export declare const copyFieldMeta: {
+    readonly name: "CopyField";
+    readonly category: "input";
+    readonly summary: "A labelled, read-only value with a Copy control: a setup link, an invite URL, a webhook address. The value truncates with an ellipsis on one line, stays selectable, and the control confirms with Copied for two seconds.";
+    readonly whenToUse: "Use it to hand a person a value they are meant to paste somewhere else, such as \"Copy the link\" under a device setup step. The whole value stays in the DOM and in the agent view however narrow the field is drawn, so truncation never hides it from a screen reader or an agent.";
+    readonly whenNotToUse: "Do not use it for a secret; that is a SecretField, which masks the value and keeps it off every agent surface. Do not use it for a plain read-only value nobody needs to copy; that is a TextInput with readOnly, or a DescriptionList row. Do not use it for multi-line code; that is a CodeBlock.";
     readonly status: "experimental";
     readonly props: {
         readonly label: {
             readonly kind: "string";
-            readonly description: "The accessible name for the list, describing what entity it details.";
+            readonly description: "What the value is, shown above it as the field label and used as the node's label in the agent view, e.g. \"Setup link\".";
             readonly required: true;
         };
-        readonly items: {
-            readonly kind: "array";
-            readonly description: "The pairs, in order. Each item is { term, description }; both are inline content flattened to text for the agent view.";
+        readonly value: {
+            readonly kind: "string";
+            readonly description: "The text shown and copied, verbatim. It is never masked: an agent reads it from the value part.";
             readonly required: true;
         };
-        readonly emptyLabel: {
+        readonly copyLabel: {
             readonly kind: "string";
-            readonly description: "Text shown when items is empty. The region keeps its frame.";
-            readonly default: "Empty";
+            readonly description: "The copy control's label while idle.";
+            readonly default: "Copy";
+        };
+        readonly copiedLabel: {
+            readonly kind: "string";
+            readonly description: "The copy control's label for two seconds after the value reaches the clipboard.";
+            readonly default: "Copied";
+        };
+        readonly onCopy: {
+            readonly kind: "handler";
+            readonly description: "Called with the value once it is on the clipboard. Not called when the clipboard refuses the write.";
         };
     };
     readonly state: {
-        readonly items: {
-            readonly description: "The number of pairs.";
-            readonly attribute: "data-sprint-items";
+        readonly copied: {
+            readonly description: "Present for two seconds after the copy control has put the value on the clipboard.";
+            readonly attribute: "data-sprint-copied";
+        };
+        readonly "copy-failed": {
+            readonly description: "Present after the clipboard refused the write or is unavailable. The value's text is selected instead, so the person can copy it by hand.";
+            readonly attribute: "data-sprint-copy-failed";
+        };
+    };
+    readonly agentView: {
+        readonly example: "- **CopyField** \"Setup link\"\n  - part `value` \"https://sprint.example/setup/7HW4\"\n  - part `copy` \"Copy\"";
+    };
+    readonly examples: readonly [{
+        readonly title: "Copy the link";
+        readonly description: "The first real need: a setup link a person pastes into another device. A long URL truncates in the field and is still copied whole.";
+        readonly code: "<CopyField\n  label=\"Setup link\"\n  value=\"https://sprint.example/setup/7HW4-XK92-QQ1D?station=KX-2209&expires=2026-10-01\"\n/>";
+    }, {
+        readonly title: "Custom control labels";
+        readonly description: "Relabel the control in the language of the task, and react once the value is on the clipboard.";
+        readonly code: "<CopyField\n  label=\"Invite code\"\n  value=\"NOMAD-0042\"\n  copyLabel=\"Copy code\"\n  copiedLabel=\"Code copied\"\n  onCopy={() => setShared(true)}\n/>";
+    }];
+    readonly a11y: {
+        readonly role: "group";
+        readonly keyboard: readonly ["Tab reaches the copy control", "Enter or Space copies"];
+        readonly notes: "The group is named by its visible label. The full value is in the DOM however it is truncated, and its title shows it on hover. The copy control is a real button whose label swap is a polite live region. If the clipboard refuses, the value's text is selected so a keyboard copy still works. No WebMCP tool is registered: the value is already readable in the agent view, and an agent gains nothing from writing it to the person's clipboard that reading it does not give.";
+    };
+    readonly relatedComponents: readonly ["SecretField", "TextInput", "CodeBlock", "DescriptionList"];
+};
+
+export declare interface CopyFieldProps extends Omit<ComponentPropsWithRef<"fieldset">, "children" | "onCopy"> {
+    label: string;
+    value: string;
+    copyLabel?: string;
+    copiedLabel?: string;
+    onCopy?: (value: string) => void;
+}
+
+export declare const defaultAgentFormat: AgentFormatter;
+
+export declare function defineAgentMeta<const T extends AgentComponentMeta>(meta: T): T;
+
+export declare interface DescriptionItem {
+    term: ReactNode;
+    description: ReactNode;
+}
+
+export declare function DescriptionList(props: DescriptionListProps): JSX.Element;
+
+export declare const descriptionListMeta: {
+    readonly name: "DescriptionList";
+    readonly category: "display";
+    readonly summary: "Labelled term–description pairs for the details of one thing: metadata, settings, profile fields.";
+    readonly whenToUse: "Use for the properties of a single entity: a token's created date and scopes, a session's device and last activity, a profile's fields. Each item pairs one term with one description. It lays itself out from its own width, not the viewport's: the term sits above its value until the list is at least 32rem wide, then moves into a column of its own, so it reads the same in a sidebar as in a full-width panel.";
+    readonly whenNotToUse: "Do not use for many entities with the same fields; that is a Table. Do not put components inside term or description; both are flattened to text for the agent view, so only inline content survives. Do not use for prose sequences; that is a List.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly label: {
+            readonly kind: "string";
+            readonly description: "The accessible name for the list, describing what entity it details.";
+            readonly required: true;
+        };
+        readonly items: {
+            readonly kind: "array";
+            readonly description: "The pairs, in order. Each item is { term, description }; both are inline content flattened to text for the agent view.";
+            readonly required: true;
+        };
+        readonly emptyLabel: {
+            readonly kind: "string";
+            readonly description: "Text shown when items is empty. The region keeps its frame.";
+            readonly default: "Empty";
+        };
+        readonly loading: {
+            readonly kind: "boolean";
+            readonly description: "Set while the pairs are being fetched. Sets aria-busy and sweeps a bar along the top edge. Existing pairs stay visible; with none yet, the empty slot says loadingLabel instead of emptyLabel.";
+            readonly default: false;
+        };
+        readonly loadingLabel: {
+            readonly kind: "string";
+            readonly description: "What the empty slot says while loading.";
+            readonly default: "Loading";
+        };
+    };
+    readonly state: {
+        readonly items: {
+            readonly description: "The number of pairs.";
+            readonly attribute: "data-sprint-items";
         };
         readonly empty: {
             readonly description: "Present when there are no pairs.";
             readonly attribute: "data-sprint-empty";
         };
+        readonly loading: {
+            readonly description: "Present while the pairs are being fetched. Alongside empty it means nothing has arrived yet, not that there is nothing.";
+            readonly attribute: "data-sprint-loading";
+        };
     };
     readonly agentView: {
         readonly example: "- **DescriptionList** \"Key sk-prod\" [items=2]";
@@ -719,6 +1219,8 @@ export declare interface DescriptionListProps extends ComponentPropsWithRef<"dl"
     label: string;
     items: readonly DescriptionItem[];
     emptyLabel?: string;
+    loading?: boolean;
+    loadingLabel?: string;
 }
 
 export declare function Dialog(props: DialogProps): JSX.Element | null;
@@ -810,8 +1312,353 @@ export declare interface DialogProps extends Omit<ComponentPropsWithRef<"dialog"
     agentTool?: boolean;
 }
 
+export declare function Disclosure(props: DisclosureProps): JSX.Element;
+
+export declare const disclosureMeta: {
+    readonly name: "Disclosure";
+    readonly category: "layout";
+    readonly summary: "A labelled region a person can show or hide with a toggle that carries its expanded state. Collapsing conceals the content from a person only: it stays in the page, and the agent view always renders it.";
+    readonly whenToUse: "Use it for secondary detail a person reads on demand beside the primary content, such as an access breakdown on a user page behind \"Show access breakdown\". It replaces a Button that swaps its own label, because the toggle publishes aria-expanded and the region it controls, and the content stays readable to an agent without a click.";
+    readonly whenNotToUse: "Do not use it to hide content an agent should not read; collapsing is a human affordance and the agent view carries the content regardless. Do not use it for a region that is always visible, which is a Panel, or for content that must interrupt the page, which is a Dialog. Do not use it to switch between alternative views of the same data, which is a SegmentedControl.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly label: {
+            readonly kind: "string";
+            readonly description: "What the region is, as a noun phrase such as \"Access breakdown\". It names the region for a screen reader, derives the toggle text and the tool name.";
+            readonly required: true;
+        };
+        readonly children: {
+            readonly kind: "node";
+            readonly description: "The region's content. It is always mounted: collapsing hides it from a person with CSS, so components inside keep their tools and stay in the page projection.";
+        };
+        readonly expanded: {
+            readonly kind: "boolean";
+            readonly description: "Whether the region is revealed. Pass it with onExpandedChange to control the disclosure; leave it unset to let the disclosure keep its own state.";
+        };
+        readonly defaultExpanded: {
+            readonly kind: "boolean";
+            readonly description: "The initial state when the disclosure is uncontrolled.";
+            readonly default: false;
+        };
+        readonly onExpandedChange: {
+            readonly kind: "handler";
+            readonly description: "Called with the new state whenever the toggle is pressed, by a person, a DOM-driving agent, or the expand tool.";
+        };
+        readonly showLabel: {
+            readonly kind: "string";
+            readonly description: "The toggle text while collapsed.";
+            readonly default: "\"Show \" followed by the label";
+        };
+        readonly hideLabel: {
+            readonly kind: "string";
+            readonly description: "The toggle text while expanded.";
+            readonly default: "\"Hide \" followed by the label";
+        };
+        readonly agentName: {
+            readonly kind: "string";
+            readonly description: "Override the label used to derive the tool name, when two disclosures on a page would otherwise collide.";
+        };
+        readonly agentTool: {
+            readonly kind: "boolean";
+            readonly description: "Set false to render the disclosure without registering an expand tool.";
+            readonly default: true;
+        };
+    };
+    readonly state: {
+        readonly expanded: {
+            readonly description: "Present while the region is revealed to a person. Absent means collapsed: the content is still in the page, concealed by CSS rather than unmounted or marked hidden.";
+            readonly attribute: "data-sprint-expanded";
+        };
+    };
+    readonly tools: {
+        readonly expand: AgentToolSpec;
+    };
+    readonly agentView: {
+        readonly example: "- **Disclosure** \"Access breakdown\" → tool `expand-access-breakdown`\n  - part `toggle` \"Show access breakdown\"\n  - **Text** \"Admin through the Operators group.\"";
+    };
+    readonly examples: readonly [{
+        readonly title: "Secondary detail on demand";
+        readonly description: "Uncontrolled: the disclosure keeps its own state. In agent view the content renders beneath the line whether or not a person has opened it, and the toggle is one control.";
+        readonly code: "<Disclosure label=\"Access breakdown\">\n  <Text>Admin through the Operators group.</Text>\n</Disclosure>";
+    }, {
+        readonly title: "A controlled disclosure";
+        readonly description: "Pass expanded and onExpandedChange when something else on the page needs to know or set whether the region is open. The expand tool drives the same toggle.";
+        readonly code: "<Disclosure\n  label=\"Access breakdown\"\n  expanded={open}\n  onExpandedChange={setOpen}\n>\n  <Text>Admin through the Operators group.</Text>\n</Disclosure>";
+    }, {
+        readonly title: "Custom toggle text";
+        readonly description: "showLabel and hideLabel replace the derived toggle text when the noun phrase does not read naturally after Show and Hide.";
+        readonly code: "<Disclosure label=\"Audit trail\" showLabel=\"Show 12 events\" hideLabel=\"Hide events\">\n  <Text>Last change was a role grant by the on-call operator.</Text>\n</Disclosure>";
+    }];
+    readonly a11y: {
+        readonly role: "region";
+        readonly keyboard: readonly ["Enter toggles", "Space toggles"];
+        readonly notes: "The root is a section named by the label. The toggle is a real button with aria-expanded and aria-controls pointing at the content. Collapsed content is display: none, which removes it from the accessibility tree for a person and a screen reader while leaving it in the DOM for the agent projection.";
+    };
+    readonly relatedComponents: readonly ["Panel", "Switch"];
+};
+
+export declare interface DisclosureProps extends ComponentPropsWithRef<"section"> {
+    label: string;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    showLabel?: string;
+    hideLabel?: string;
+    agentName?: string;
+    agentTool?: boolean;
+}
+
 export declare const DISMISS_ALERT_TOOL: AgentToolSpec;
 
+export declare function Divider(props: DividerProps): JSX.Element | null;
+
+export declare const dividerMeta: {
+    readonly name: "Divider";
+    readonly category: "layout";
+    readonly summary: "A horizontal rule that segments a page: the line between a header or a breadcrumb and the body under it, or between two runs of content. It draws in the active theme's own keyline or band, and can name the segment it opens.";
+    readonly whenToUse: "Use it where a page changes subject and nothing else marks the change: under a PageHeader or a Breadcrumb before the body starts, or between groups of panels. Give it a label when the segment that follows has a name worth reading; an unlabelled Divider is invisible in agent view, because an agent does not care where a line is drawn, only what the line announces.";
+    readonly whenNotToUse: "Do not use it to space things out; that is the gap on Stack. Do not use it to frame a region with a header; that is Panel, which draws its own keylines. Do not stack two in a row, and do not use it inside a Panel to separate a list's items; the list draws its own.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly label: {
+            readonly kind: "string";
+            readonly description: "The name of the segment the divider opens, rendered small on the rule.";
+        };
+        readonly weight: {
+            readonly kind: "enum";
+            readonly description: "How hard the break is. \"hairline\" is a keyline, \"heavy\" a thick strong keyline, \"band\" a strip of the theme's own ornament for the one break that matters most on a page.";
+            readonly values: readonly ["hairline", "heavy", "band"];
+            readonly default: "hairline";
+        };
+    };
+    readonly state: {
+        readonly weight: {
+            readonly description: "How hard the break is.";
+            readonly attribute: "data-sprint-weight";
+            readonly values: readonly ["hairline", "heavy", "band"];
+        };
+    };
+    readonly agentView: {
+        readonly example: "- **Divider** \"Results\" [weight=band]";
+    };
+    readonly a11y: {
+        readonly role: "separator";
+        readonly notes: "The rule is a native hr, so assistive technology announces a separator. A label is ordinary text read just before it, the way a person reads it on the rule.";
+    };
+    readonly relatedComponents: readonly ["Stack", "PageHeader", "Breadcrumb", "Panel"];
+    readonly examples: readonly [{
+        readonly title: "Separating the header from the body";
+        readonly description: "The plainest break: a keyline under the page's chrome, before the content starts.";
+        readonly code: "<Stack>\n  <Breadcrumb\n    label=\"Docs\"\n    items={[{ label: \"guides\", children: [{ href: \"#/guide/webmcp\", label: \"WebMCP\", active: true }] }]}\n  />\n  <Divider />\n  <Text>The body of the page starts here.</Text>\n</Stack>";
+    }, {
+        readonly title: "A named segment";
+        readonly description: "A label names what follows, on the rule itself and to an agent reading the page.";
+        readonly code: "<Divider label=\"Results\" weight=\"heavy\" />";
+    }, {
+        readonly title: "The page's main break";
+        readonly description: "A band draws the theme's own ornament: hatching in the default register, pins in calorie, a barcode strip in trax. Use it once per page.";
+        readonly code: "<Divider label=\"Body\" weight=\"band\" />";
+    }];
+};
+
+export declare interface DividerProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+    label?: string;
+    weight?: DividerWeight;
+}
+
+export declare type DividerWeight = "hairline" | "heavy" | "band";
+
+export declare function EmptyState(props: EmptyStateProps): JSX.Element;
+
+export declare interface EmptyStateAction {
+    label: string;
+    onSelect?: (event: MouseEvent_2<HTMLElement>) => void;
+    href?: string;
+}
+
+export declare const emptyStateMeta: {
+    readonly name: "EmptyState";
+    readonly category: "feedback";
+    readonly summary: "A region that says there is nothing here, and why: a headline, an optional sentence, and an optional way out such as clearing filters or creating the first record. It marks the empty field with the register's own empty ornament.";
+    readonly whenToUse: "Use it in place of a list, grid, or set of results that has nothing to show, so the space says it is empty rather than rendering nothing. Set reason=\"filtered\" when records exist but none match, so an agent knows to relax the filters rather than conclude there is no data.";
+    readonly whenNotToUse: "Do not use it for an empty Table, List, or Panel; those already carry their own emptyLabel. Do not use it for a failure; that is an Alert. Do not use it while data is still loading; that is Pending.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly label: {
+            readonly kind: "string";
+            readonly description: "The headline, saying what is empty in a few words: \"No one matches these filters\". The region's accessible name.";
+            readonly required: true;
+        };
+        readonly description: {
+            readonly kind: "string";
+            readonly description: "One sentence of explanation or next step. Carried as the description part.";
+        };
+        readonly action: {
+            readonly kind: "object";
+            readonly description: "The one way out, as data: { label, onSelect?, href? }. An href renders a Link, otherwise a Button that registers its own press tool, so the action is a single control in the agent view.";
+        };
+        readonly reason: {
+            readonly kind: "enum";
+            readonly description: "Why it is empty: nothing exists yet, or nothing matches the current filters.";
+            readonly values: readonly ["empty", "filtered"];
+            readonly default: "empty";
+        };
+    };
+    readonly state: {
+        readonly empty: {
+            readonly description: "Always present, so one selector finds every empty region.";
+            readonly attribute: "data-sprint-empty";
+        };
+        readonly reason: {
+            readonly description: "Why the region is empty.";
+            readonly attribute: "data-sprint-reason";
+            readonly values: readonly ["empty", "filtered"];
+        };
+    };
+    readonly agentView: {
+        readonly example: "- **EmptyState** \"No one matches these filters\" [empty, reason=filtered]\n  - part `description` \"Try a different role or clear the search.\"";
+    };
+    readonly examples: readonly [{
+        readonly title: "Nothing matches";
+        readonly description: "Records exist but the filters exclude them all. The action is a Button, so it registers press-clear-filters.";
+        readonly code: "<EmptyState\n  reason=\"filtered\"\n  label=\"No one matches these filters\"\n  description=\"Try a different role or clear the search.\"\n  action={{ label: \"Clear filters\", onSelect: clearFilters }}\n/>";
+    }, {
+        readonly title: "Nothing yet";
+        readonly description: "The first-run case, with a link to where records are made.";
+        readonly code: "<EmptyState\n  label=\"No projects yet\"\n  description=\"Projects you create or are invited to appear here.\"\n  action={{ label: \"Create a project\", href: \"#/projects/new\" }}\n/>";
+    }, {
+        readonly title: "Just the headline";
+        readonly code: "<EmptyState label=\"No notifications\" />";
+    }];
+    readonly a11y: {
+        readonly role: "group";
+        readonly notes: "The headline names the group and the description describes it. The action is an ordinary Button or Link inside it, reached in normal tab order.";
+    };
+    readonly relatedComponents: readonly ["Pending", "Alert", "Button", "Link"];
+};
+
+export declare interface EmptyStateProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+    label: string;
+    description?: string;
+    action?: EmptyStateAction;
+    reason?: EmptyStateReason;
+}
+
+export declare type EmptyStateReason = "empty" | "filtered";
+
+export declare function EntityRow(props: EntityRowProps): JSX.Element;
+
+export declare type EntityRowDetail = string | {
+    term?: string;
+    detail: string;
+};
+
+export declare const entityRowMeta: {
+    readonly name: "EntityRow";
+    readonly category: "display";
+    readonly summary: "One record in a list of records, as a single clickable row: a title, a few Tags, and one line of meta. Give it an href and the whole row is a link; give it onSelect and it is an action that registers an open tool.";
+    readonly whenToUse: "Use it for a list of people, projects, or anything else a person scans and picks one of, where each entry needs a name, a classification, and a line of context such as last activity. Stack several in a Stack with gap=\"none\" and adjacent rows share their keylines. The title is the accessible name, so it is also what an agent selects on.";
+    readonly whenNotToUse: "Do not use it when the entries are compared column by column; that is a Table. Do not use it for a catalogue entry with a paragraph of body; that is a Card. Do not put controls in it: the whole row is already one link or button, so tags and meta are data, not components.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly title: {
+            readonly kind: "string";
+            readonly description: "The record's name, and the row's accessible name. Also derives the tool name when the row acts.";
+            readonly required: true;
+        };
+        readonly href: {
+            readonly kind: "string";
+            readonly description: "Destination, which makes the whole row a link. A row that navigates registers no tool by default, because an agent can follow the href itself.";
+        };
+        readonly onSelect: {
+            readonly kind: "handler";
+            readonly description: "What clicking does, called with the click event. Alone it makes the row a button that registers an open tool by default. Alongside href the row stays a link and the handler rides the click, so a router can call preventDefault.";
+        };
+        readonly tags: {
+            readonly kind: "array";
+            readonly description: "Classifications rendered as Tags after the title: { label, tone? }, where tone is one of the Tag tones. Carried as Tag lines under the row in the agent view.";
+        };
+        readonly meta: {
+            readonly kind: "array";
+            readonly description: "One line of context, each entry a string or { term?, detail }, joined with a middle dot. Truncates rather than wraps when the row is short of room. Carried as the meta part.";
+        };
+        readonly description: {
+            readonly kind: "string";
+            readonly description: "An optional sentence under the row, for a record that needs more than a line of meta. Carried as the description part.";
+        };
+        readonly disabled: {
+            readonly kind: "boolean";
+            readonly description: "Disable an acting row and unregister its tool. Has no effect on a row that navigates or does nothing.";
+            readonly default: false;
+        };
+        readonly agentTool: {
+            readonly kind: "boolean";
+            readonly description: "Override the default: on for a row that acts, off for a row that navigates. A row with neither href nor onSelect never registers one.";
+        };
+        readonly agentName: {
+            readonly kind: "string";
+            readonly description: "Override the title used to derive the tool name, when two rows share a title.";
+        };
+    };
+    readonly state: {
+        readonly href: {
+            readonly description: "Where the row goes, when it navigates.";
+            readonly attribute: "data-sprint-href";
+        };
+        readonly disabled: {
+            readonly description: "Present when an acting row cannot be opened.";
+            readonly attribute: "data-sprint-disabled";
+        };
+    };
+    readonly tools: {
+        readonly open: AgentToolSpec;
+    };
+    readonly agentView: {
+        readonly example: "- **EntityRow** \"Ada Lovelace\" [href=#/people/ada]\n  - part `title` \"Ada Lovelace\"\n  - part `meta` \"Last sign-in: 3 days ago · 2 apps\"\n  - **Tag** \"admin\" [tone=info]\n  - **Tag** \"billing\" [tone=neutral]";
+    };
+    readonly examples: readonly [{
+        readonly title: "A person in a directory";
+        readonly description: "A row that navigates. No tool, because the href is already public; tags and meta are data.";
+        readonly code: "<EntityRow\n  title=\"Ada Lovelace\"\n  href=\"#/people/ada\"\n  tags={[{ label: \"admin\", tone: \"info\" }, { label: \"billing\" }]}\n  meta={[{ term: \"Last sign-in\", detail: \"3 days ago\" }, \"2 apps\"]}\n/>";
+    }, {
+        readonly title: "A row that acts";
+        readonly description: "onSelect instead of href, so the row registers open-grace-hopper and an agent can pick it.";
+        readonly code: "<EntityRow\n  title=\"Grace Hopper\"\n  onSelect={() => select(\"grace\")}\n  tags={[{ label: \"owner\", tone: \"warning\" }]}\n  meta={[\"Invited yesterday\"]}\n/>";
+    }, {
+        readonly title: "A directory of rows";
+        readonly description: "Rows stacked with no gap share their keylines, so the list reads as one ruled block.";
+        readonly code: "<Stack gap=\"none\">\n  {people.map((person) => (\n    <EntityRow\n      key={person.id}\n      title={person.name}\n      href={person.href}\n      tags={person.roles.map((role) => ({ label: role }))}\n      meta={[{ term: \"Last sign-in\", detail: person.lastSignIn }]}\n    />\n  ))}\n</Stack>";
+    }, {
+        readonly title: "With a description";
+        readonly description: "A sentence under the row, for a record that needs one.";
+        readonly code: "<EntityRow\n  title=\"Payments service\"\n  href=\"#/projects/payments\"\n  tags={[{ label: \"degraded\", tone: \"danger\" }]}\n  meta={[\"Updated 4 min ago\"]}\n  description=\"Card authorisations are timing out in eu-west.\"\n/>";
+    }];
+    readonly a11y: {
+        readonly notes: "The whole row is one control: a link with an href, a button with onSelect, or a labelled group with neither. The title is the accessible name, and the tags, meta, and description are its accessible description, so a screen reader announces the name first and the context after.";
+    };
+    readonly relatedComponents: readonly ["Card", "Tag", "Stack", "Table"];
+};
+
+export declare interface EntityRowProps extends Omit<ComponentPropsWithRef<"button">, "ref" | "onSelect" | "children" | "title"> {
+    title: string;
+    href?: string;
+    onSelect?: (event: MouseEvent_2<HTMLElement>) => void;
+    tags?: readonly EntityRowTag[];
+    meta?: readonly EntityRowDetail[];
+    description?: string;
+    disabled?: boolean;
+    agentTool?: boolean;
+    agentName?: string;
+    ref?: Ref<HTMLButtonElement> | Ref<HTMLAnchorElement> | Ref<HTMLDivElement>;
+}
+
+export declare interface EntityRowTag {
+    label: string;
+    tone?: TagTone;
+}
+
+export declare const EXPAND_DISCLOSURE_TOOL: AgentToolSpec;
+
 export declare const FILL_TEXTAREA_TOOL: AgentToolSpec;
 
 export declare const FILL_TOOL: AgentToolSpec;
@@ -980,6 +1827,7 @@ export declare interface JsonSchemaProperty {
     description?: string;
     enum?: readonly string[];
     minimum?: number;
+    maximum?: number;
     default?: string | number | boolean;
 }
 
@@ -1075,12 +1923,14 @@ export declare function List(props: ListProps): JSX.Element;
 
 export declare function listAgentMeta(): AgentComponentMeta[];
 
+export declare type ListMarker = "plus" | "bullet" | "number" | "none";
+
 export declare const listMeta: {
     readonly name: "List";
     readonly category: "display";
     readonly summary: "A bulleted or numbered list built from an array of items. Each item is an addressable part carrying its position, so an agent can cite item three without counting lines.";
     readonly whenToUse: "Use it for a short sequence of related points: rules, steps, links, caveats. Passing items as data rather than as children is what lets the agent view carry each one as its own part.";
-    readonly whenNotToUse: "Do not use it for records with fields; that is Table. Do not use it as a layout for cards or controls; that is Stack.";
+    readonly whenNotToUse: "Do not use it for a diff or a review of what will change, where each mark means added or removed; that is ChangeList. Do not use it for records with fields; that is Table. Do not use it as a layout for cards or controls; that is Stack.";
     readonly status: "experimental";
     readonly props: {
         readonly label: {
@@ -1098,32 +1948,57 @@ export declare const listMeta: {
             readonly description: "Number the items instead of bulleting them. Use it when the order is the point.";
             readonly default: false;
         };
+        readonly marker: {
+            readonly kind: "enum";
+            readonly description: "The mark before each item. \"plus\" is the house bullet, \"bullet\" a plain dot for quieter prose, \"number\" counts the items and makes the list ordered, \"none\" drops the marker column for a list whose items already lead with their own mark. Defaults to \"number\" when ordered is set and \"plus\" otherwise. The marker is drawn, not read: an item whose mark means something, such as added or removed, belongs in a ChangeList.";
+            readonly values: readonly ["plus", "bullet", "number", "none"];
+            readonly default: "plus";
+        };
         readonly emptyLabel: {
             readonly kind: "string";
             readonly description: "What the list says when it has no items.";
             readonly default: "Empty";
         };
-    };
+        readonly loading: {
+            readonly kind: "boolean";
+            readonly description: "Set while the items are being fetched. Sets aria-busy and sweeps a bar along the top edge. Existing items stay visible; with none yet, the empty slot says loadingLabel instead of emptyLabel.";
+            readonly default: false;
+        };
+        readonly loadingLabel: {
+            readonly kind: "string";
+            readonly description: "What the empty slot says while loading.";
+            readonly default: "Loading";
+        };
+    };
     readonly state: {
         readonly items: {
             readonly description: "How many items the list has.";
             readonly attribute: "data-sprint-items";
         };
         readonly ordered: {
-            readonly description: "Present when the items are numbered rather than bulleted.";
+            readonly description: "Present when the list is a real ol: ordered is set, or the marker is number.";
             readonly attribute: "data-sprint-ordered";
         };
+        readonly marker: {
+            readonly description: "The mark drawn before each item.";
+            readonly attribute: "data-sprint-marker";
+            readonly values: readonly ["plus", "bullet", "number", "none"];
+        };
         readonly empty: {
             readonly description: "Present when the list has no items.";
             readonly attribute: "data-sprint-empty";
         };
+        readonly loading: {
+            readonly description: "Present while the items are being fetched. Alongside empty it means nothing has arrived yet, not that there is nothing.";
+            readonly attribute: "data-sprint-loading";
+        };
         readonly index: {
             readonly description: "On an item: its 1-based position in the list.";
             readonly attribute: "data-sprint-index";
         };
     };
     readonly agentView: {
-        readonly example: "- **List** \"Tool rules\" [items=1]\n  - part `item` \"One tool, one action.\" [index=1]";
+        readonly example: "- **List** \"Tool rules\" [items=1, marker=plus]\n  - part `item` \"One tool, one action.\" [index=1]";
     };
     readonly examples: readonly [{
         readonly title: "A list of rules";
@@ -1131,10 +2006,18 @@ export declare const listMeta: {
     }, {
         readonly title: "A numbered sequence";
         readonly code: "<List\n  ordered\n  label=\"Steps\"\n  items={[\"Register the tool.\", \"Drive the DOM.\", \"Return the new state.\"]}\n/>";
+    }, {
+        readonly title: "Plain bullets";
+        readonly description: "A quieter dot for running prose, where the house plus would shout.";
+        readonly code: "<List\n  marker=\"bullet\"\n  label=\"Caveats\"\n  items={[\"Chrome 149 only.\", \"Tools are a no-op without WebMCP.\"]}\n/>";
+    }, {
+        readonly title: "No marker";
+        readonly description: "For items that already lead with their own mark, such as a link or a chip.";
+        readonly code: "<List\n  marker=\"none\"\n  label=\"Related\"\n  items={[\"Table for records.\", \"Stack for layout.\"]}\n/>";
     }];
     readonly a11y: {
         readonly role: "list";
-        readonly notes: "A real ul or ol named by its label, with an explicit list role because the custom markers require list-style none and Safari would otherwise drop the list semantics. The item count is announced, and the markers are drawn as pseudo-elements.";
+        readonly notes: "A real ul or ol named by its label, with an explicit list role because the custom markers require list-style none and Safari would otherwise drop the list semantics. The item count is announced, and the markers are drawn as pseudo-elements, so a marker never carries meaning a screen reader would miss.";
     };
 };
 
@@ -1142,7 +2025,10 @@ export declare interface ListProps extends ComponentPropsWithRef<"ul"> {
     label: string;
     items: readonly ReactNode[];
     ordered?: boolean;
+    marker?: ListMarker;
     emptyLabel?: string;
+    loading?: boolean;
+    loadingLabel?: string;
 }
 
 export declare interface MarkdownOptions {
@@ -1160,7 +2046,7 @@ export declare const metaLineMeta: {
     readonly name: "MetaLine";
     readonly category: "display";
     readonly summary: "A slash-separated manifest line of term–detail pairs: serials, build strings, issue dates. It is chrome, not content, and in the agent view it reads as the same single line of text a person sees.";
-    readonly whenToUse: "Use it for the compact strip of identifying metadata that belongs to a page, panel, or footer: version and build identifiers, timestamps, serial numbers, owners. Values are short and the line truncates rather than wraps.";
+    readonly whenToUse: "Use it for the compact strip of identifying metadata that belongs to a page, panel, or footer: version and build identifiers, timestamps, serial numbers, owners. Values are short. By default the line truncates with an ellipsis rather than wrapping; set wrap where it sits in a narrow container and every entry has to stay visible.";
     readonly whenNotToUse: "Do not use it for the details of a record a person is meant to study; that is a DescriptionList. Do not put anything interactive in it, and do not use it for prose.";
     readonly status: "experimental";
     readonly props: {
@@ -1169,12 +2055,21 @@ export declare const metaLineMeta: {
             readonly description: "Term–detail pairs in display order: { term, detail }, both strings. Rendered as TERM: DETAIL, slash-separated, and carried as one line in the agent view. An empty array renders nothing.";
             readonly required: true;
         };
+        readonly wrap: {
+            readonly kind: "boolean";
+            readonly description: "Let entries flow onto further lines instead of truncating the line. Each entry stays whole on one line, and a separator stays at the end of the line it closes, so no line starts with a slash. An entry wider than the container is the only thing that still truncates.";
+            readonly default: false;
+        };
     };
     readonly state: {
         readonly entries: {
             readonly description: "How many term–detail pairs the line carries.";
             readonly attribute: "data-sprint-entries";
         };
+        readonly wrap: {
+            readonly description: "Present when entries may flow onto further lines.";
+            readonly attribute: "data-sprint-wrap";
+        };
     };
     readonly agentView: {
         readonly example: "- **MetaLine** \"SERIAL: NU-TYPE-CORE-A1 / ISSUED: 2744.07.22\" [entries=2]";
@@ -1187,6 +2082,10 @@ export declare const metaLineMeta: {
         readonly title: "Version chrome for a footer";
         readonly description: "The line an app pins under its content or into a Shell rail.";
         readonly code: "<MetaLine\n  entries={[\n    { term: \"Sprint\", detail: \"v0.0.0\" },\n    { term: \"Channel\", detail: \"dev\" },\n    { term: \"WebMCP\", detail: \"chrome 149\" },\n  ]}\n/>";
+    }, {
+        readonly title: "Wrapping in a narrow rail";
+        readonly description: "With wrap, a sidebar shows every entry on as many lines as it needs instead of cutting the later ones off.";
+        readonly code: "<MetaLine\n  wrap\n  entries={[\n    { term: \"Sprint\", detail: \"v0.0.0\" },\n    { term: \"Channel\", detail: \"dev\" },\n    { term: \"WebMCP\", detail: \"chrome 149\" },\n    { term: \"Build\", detail: \"2744.07.22-a1\" },\n  ]}\n/>";
     }];
     readonly a11y: {
         readonly role: "paragraph";
@@ -1196,6 +2095,7 @@ export declare const metaLineMeta: {
 
 export declare interface MetaLineProps extends ComponentPropsWithRef<"p"> {
     entries: readonly MetaLineEntry[];
+    wrap?: boolean;
 }
 
 export declare interface ModelContext {
@@ -1306,6 +2206,8 @@ export declare function nodeLine(node: AgentNode): string;
 
 export declare const OPEN_CARD_TOOL: AgentToolSpec;
 
+export declare const OPEN_ENTITY_ROW_TOOL: AgentToolSpec;
+
 export declare const OPEN_LINK_TOOL: AgentToolSpec;
 
 export declare const OWNER_ATTRIBUTE = "data-sprint-owner";
@@ -1344,133 +2246,516 @@ export declare const pageHeaderMeta: {
     readonly a11y: {
         readonly notes: "The label renders as the page's h1, so keep to one PageHeader per page. Tags and the lede are ordinary content after it; the header element itself takes no landmark role because it sits inside main.";
     };
-    readonly relatedComponents: readonly ["Panel", "Heading", "Tag"];
+    readonly relatedComponents: readonly ["Panel", "Heading", "Tag"];
+    readonly examples: readonly [{
+        readonly title: "A titled page with a lede";
+        readonly code: "<PageHeader label=\"Reports\">\n  <Text>Everything the quarter produced, in one place.</Text>\n</PageHeader>";
+    }, {
+        readonly title: "Status tags and a page-level control";
+        readonly description: "Tags classify the page on the title line; the action slot holds the one control that affects the whole page.";
+        readonly code: "<PageHeader\n  label=\"Button\"\n  tags={<Tag tone=\"warning\" filled>experimental</Tag>}\n  actions={<Button agentTool={false}>Refresh</Button>}\n>\n  <Text>A single action a person or an agent can trigger.</Text>\n</PageHeader>";
+    }];
+};
+
+export declare interface PageHeaderProps extends ComponentPropsWithRef<"header"> {
+    label: string;
+    tags?: ReactNode;
+    actions?: ReactNode;
+}
+
+export declare function paginate(text: string, size: number): string[];
+
+export declare function Pagination(props: PaginationProps): JSX.Element;
+
+export declare const paginationMeta: {
+    readonly name: "Pagination";
+    readonly category: "navigation";
+    readonly summary: "A navigation landmark for a long set shown one page at a time: Previous and Next controls, a \"Page 2 of 3\" readout, and a \"Showing 26–50 of 61\" summary of which items are on screen. It takes counts rather than items, so it works the same over a local array or a server query.";
+    readonly whenToUse: "Use it under or above a Table or List whose items arrive a page at a time, when the count is known. Give it onPageChange to page in place, which registers one turn tool that can jump straight to any page; give it href to make every page a URL, which needs no tool because a link is already reachable. Its state carries the page, the page count and the item range, so an agent reading the page knows how much it has not seen.";
+    readonly whenNotToUse: "Do not use it when the total is unknown or the set grows as it is read; that is a load-more Button. Do not use it for steps in a flow a person must complete in order, and do not use it to move between unrelated pages, which is Nav or Breadcrumb. Do not use it for a set that fits on one screen: it renders, but has nothing to do.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly label: {
+            readonly kind: "string";
+            readonly description: "What is being paged. Names the navigation landmark and derives the tool name, so prefer a noun phrase such as \"Users pages\".";
+            readonly required: true;
+        };
+        readonly page: {
+            readonly kind: "number";
+            readonly description: "The 1-based page currently shown. The component is controlled; a value outside 1 to the page count is clamped into it.";
+            readonly required: true;
+        };
+        readonly pageSize: {
+            readonly kind: "number";
+            readonly description: "How many items a full page holds. Values below 1 are treated as 1.";
+            readonly required: true;
+        };
+        readonly total: {
+            readonly kind: "number";
+            readonly description: "How many items the whole set holds. The page count is total divided by pageSize, rounded up, and never less than 1, so an empty set is one empty page.";
+            readonly required: true;
+        };
+        readonly onPageChange: {
+            readonly kind: "handler";
+            readonly description: "Called with the page to show. Without href the controls are buttons and the turn tool registers; with href it runs alongside the link, for routers that intercept clicks.";
+        };
+        readonly href: {
+            readonly kind: "handler";
+            readonly description: "Given a page number, returns its URL. When present, Previous and Next render as links, each publishes its URL as data-sprint-href, and no tool registers.";
+        };
+        readonly previousLabel: {
+            readonly kind: "string";
+            readonly description: "The text of the control that goes back a page.";
+            readonly default: "Previous";
+        };
+        readonly nextLabel: {
+            readonly kind: "string";
+            readonly description: "The text of the control that goes forward a page.";
+            readonly default: "Next";
+        };
+        readonly agentName: {
+            readonly kind: "string";
+            readonly description: "Override the label used to derive the tool name, when two paginations on a page would otherwise collide.";
+        };
+        readonly agentTool: {
+            readonly kind: "boolean";
+            readonly description: "Set false to render the controls without registering a turn tool.";
+            readonly default: true;
+        };
+    };
+    readonly state: {
+        readonly page: {
+            readonly description: "The 1-based page shown, after clamping.";
+            readonly attribute: "data-sprint-page";
+        };
+        readonly pages: {
+            readonly description: "How many pages the set spans. Never less than 1.";
+            readonly attribute: "data-sprint-pages";
+        };
+        readonly total: {
+            readonly description: "How many items the whole set holds.";
+            readonly attribute: "data-sprint-total";
+        };
+        readonly first: {
+            readonly description: "The 1-based position of the first item on this page, or 0 when the set is empty.";
+            readonly attribute: "data-sprint-first";
+        };
+        readonly last: {
+            readonly description: "The 1-based position of the last item on this page, or 0 when the set is empty.";
+            readonly attribute: "data-sprint-last";
+        };
+    };
+    readonly tools: {
+        readonly turn: AgentToolSpec;
+    };
+    readonly agentView: {
+        readonly example: "- **Pagination** \"Users pages\" [first=26, last=50, page=2, pages=3, total=61] → tool `turn-users-pages`\n  - part `previous` \"Previous\"\n  - part `next` \"Next\"";
+    };
+    readonly a11y: {
+        readonly role: "navigation";
+        readonly keyboard: readonly ["Tab reaches Previous and Next in order", "Enter or Space on a button, Enter on a link, turns the page"];
+        readonly notes: "The root is a nav landmark named by label. A control with nowhere to go is a disabled button, or a link with no href and aria-disabled, so it leaves the tab order. The item summary is a polite live region, so a screen reader hears the new range after a turn.";
+    };
+    readonly relatedComponents: readonly ["Table", "List", "Nav", "Breadcrumb"];
+    readonly examples: readonly [{
+        readonly title: "Paging a table in place";
+        readonly description: "With onPageChange the controls are buttons and one turn tool registers, so an agent can jump to page 3 without pressing Next twice.";
+        readonly code: "<Pagination\n  label=\"Users pages\"\n  page={page}\n  pageSize={25}\n  total={61}\n  onPageChange={setPage}\n/>";
+    }, {
+        readonly title: "Pages as links";
+        readonly description: "With href every page is a URL. The controls are links, nothing registers, and each link publishes where it goes.";
+        readonly code: "<Pagination\n  label=\"Changelog pages\"\n  page={2}\n  pageSize={10}\n  total={42}\n  href={(page) => `#/changelog?page=${page}`}\n/>";
+    }, {
+        readonly title: "The last page, relabelled";
+        readonly description: "On the last page Next is disabled and the summary shows the short final range. The labels are overridable for sets that read better as time.";
+        readonly code: "<Pagination\n  label=\"Activity pages\"\n  page={4}\n  pageSize={8}\n  total={31}\n  previousLabel=\"Newer\"\n  nextLabel=\"Older\"\n  onPageChange={setPage}\n/>";
+    }, {
+        readonly title: "An empty set";
+        readonly description: "No items is one empty page. Both controls are disabled, no tool registers, and the summary still says what it is showing.";
+        readonly code: "<Pagination\n  label=\"Search results pages\"\n  page={1}\n  pageSize={20}\n  total={0}\n  onPageChange={setPage}\n/>";
+    }];
+};
+
+export declare interface PaginationProps extends Omit<ComponentPropsWithRef<"nav">, "children"> {
+    label: string;
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange?: (page: number) => void;
+    href?: (page: number) => string;
+    previousLabel?: string;
+    nextLabel?: string;
+    agentName?: string;
+    agentTool?: boolean;
+}
+
+export declare function Panel(props: PanelProps): JSX.Element;
+
+declare type PanelHeadingLevel = 2 | 3 | 4;
+
+export declare const panelMeta: {
+    readonly name: "Panel";
+    readonly category: "layout";
+    readonly summary: "A labelled region with a header band and an optional slot for the controls that act on it. Everything on a Sprint page lives inside one.";
+    readonly whenToUse: "Use it for every distinct region of a page: a section of documentation, a form, a readout, a preview. The label is the region's accessible name, so a person, a screen reader, and an agent all address the region by the same words.";
+    readonly whenNotToUse: "Do not use it as a spacer or a plain box; that is Stack. Nesting reads clearly to about three deep, because each level alternates its ground and demotes its frame; past that, the depth cues repeat and the region wants a page of its own.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly label: {
+            readonly kind: "string";
+            readonly description: "What this region is. Rendered in the header band and used as the region's accessible name.";
+            readonly required: true;
+        };
+        readonly children: {
+            readonly kind: "node";
+            readonly description: "The region's content. An empty panel says it is empty rather than collapsing.";
+        };
+        readonly headingLevel: {
+            readonly kind: "enum";
+            readonly description: "Render the label as a real heading at this outline depth, so the section is reachable when a screen reader navigates by headings. Set it on every panelled section of a page; leave it unset only for chrome such as a preview frame.";
+            readonly values: readonly ["2", "3", "4"];
+        };
+        readonly actions: {
+            readonly kind: "node";
+            readonly description: "Controls that act on this region, rendered at the end of the header band. Keep it to one or two.";
+        };
+        readonly flush: {
+            readonly kind: "boolean";
+            readonly description: "Drop the body padding, for content that draws its own edges such as a Table or a CodeBlock.";
+            readonly default: false;
+        };
+        readonly emptyLabel: {
+            readonly kind: "string";
+            readonly description: "What the panel says when it has no content.";
+            readonly default: "Empty";
+        };
+        readonly loading: {
+            readonly kind: "boolean";
+            readonly description: "Set while the content are being fetched. Sets aria-busy and sweeps a bar along the top edge. Existing content stay visible; with none yet, the empty slot says loadingLabel instead of emptyLabel.";
+            readonly default: false;
+        };
+        readonly loadingLabel: {
+            readonly kind: "string";
+            readonly description: "What the empty slot says while loading.";
+            readonly default: "Loading";
+        };
+    };
+    readonly state: {
+        readonly flush: {
+            readonly description: "Present when the body carries no padding of its own.";
+            readonly attribute: "data-sprint-flush";
+        };
+        readonly empty: {
+            readonly description: "Present when the panel has no content. The panel still renders its keyline and says it is empty.";
+            readonly attribute: "data-sprint-empty";
+        };
+        readonly loading: {
+            readonly description: "Present while the content are being fetched. Alongside empty it means nothing has arrived yet, not that there is nothing.";
+            readonly attribute: "data-sprint-loading";
+        };
+    };
+    readonly agentView: {
+        readonly example: "- **Panel** \"WebMCP tools\"";
+    };
+    readonly a11y: {
+        readonly role: "region";
+        readonly notes: "The section is a named landmark either way: the label is its accessible name. With headingLevel the label is also a heading element, so the page outline includes the region; without it the region is reachable only by landmark navigation.";
+    };
+    readonly examples: readonly [{
+        readonly title: "A section of a page";
+        readonly description: "headingLevel puts the label in the page outline, so a screen reader finds the section by heading as well as by landmark.";
+        readonly code: "<Panel label=\"When to use\" headingLevel={2}>\n  <Text>Use it for any discrete action.</Text>\n</Panel>";
+    }, {
+        readonly title: "A panel with a control in its header";
+        readonly description: "The header slot is for controls that act on the region, not for navigation.";
+        readonly code: "<Panel\n  label=\"Preview\"\n  actions={<Button agentName=\"Reset preview\">Reset</Button>}\n>\n  <Button tone=\"action\">Prepare launch</Button>\n</Panel>";
+    }, {
+        readonly title: "A flush panel around a table";
+        readonly description: "Content that draws its own keylines sits flush, so borders do not double up.";
+        readonly code: "<Panel label=\"Conventions\" flush>\n  <Table label=\"Conventions\" columns={columns} rows={rows} />\n</Panel>";
+    }, {
+        readonly title: "Nested panels";
+        readonly description: "Depth styles itself: the outermost panel carries a doubled keyline, each nested level alternates its ground, and nested headers demote to a dashed rule, so a reader ranks the levels without counting borders.";
+        readonly code: "<Panel label=\"The shape\" headingLevel={2}>\n  <Panel label=\"Human view\" headingLevel={3}>\n    <Panel label=\"Crew\" headingLevel={4}>\n      <Text>Registration fields live here.</Text>\n    </Panel>\n  </Panel>\n</Panel>";
+    }, {
+        readonly title: "An empty region";
+        readonly description: "An empty panel keeps its border and states that it is empty, rather than vanishing and leaving a person or an agent unsure whether it failed to load.";
+        readonly code: "<Panel label=\"Registered tools\" emptyLabel=\"No tools registered\" />";
+    }];
+};
+
+export declare interface PanelProps extends ComponentPropsWithRef<"section"> {
+    label: string;
+    headingLevel?: PanelHeadingLevel;
+    actions?: ReactNode;
+    flush?: boolean;
+    emptyLabel?: string;
+    loading?: boolean;
+    loadingLabel?: string;
+}
+
+export declare const PARAM_DESCRIPTION_LIMIT = 150;
+
+export declare const PART_ATTRIBUTE = "data-sprint-part";
+
+export declare function Pending(props: PendingProps): JSX.Element;
+
+export declare const pendingMeta: {
+    readonly name: "Pending";
+    readonly category: "feedback";
+    readonly summary: "Marks a region whose data is being fetched. Keeps stale content visible and readable while it refreshes, and holds a labelled pending field when there is nothing to show yet.";
+    readonly whenToUse: "Wrap a region you build yourself while its data loads: a profile card, a chart, a custom summary. Pass the children only once data exists, so the first load shows the pending field and a refetch keeps the old content under a busy bar. Table, List, DescriptionList and Panel take a loading prop of their own, so reach for that first.";
+    readonly whenNotToUse: "Do not wrap a Table, List, DescriptionList or Panel; use its loading prop, which keeps the region's own label and frame. Do not use for a long job with a countable amount of work; that is a Progress. Do not use for a busy action; that is Button's loading prop.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly loading: {
+            readonly kind: "boolean";
+            readonly description: "Whether the region's data is being fetched. While false the wrapper adds nothing to the agent view.";
+            readonly required: true;
+        };
+        readonly label: {
+            readonly kind: "string";
+            readonly description: "What is loading, as a phrase a person can read in the empty field, such as \"Loading profile\".";
+            readonly required: true;
+        };
+        readonly children: {
+            readonly kind: "node";
+            readonly description: "The region's content. Omit it until data exists; while loading with children they stay visible as stale content.";
+        };
+    };
+    readonly state: {
+        readonly loading: {
+            readonly description: "Present while the region's data is being fetched.";
+            readonly attribute: "data-sprint-loading";
+        };
+        readonly empty: {
+            readonly description: "Present while loading with no content yet, so nothing on screen is data.";
+            readonly attribute: "data-sprint-empty";
+        };
+    };
+    readonly agentView: {
+        readonly example: "- **Pending** \"Loading profile\" [empty, loading]";
+    };
+    readonly examples: readonly [{
+        readonly title: "First load";
+        readonly description: "No data yet, so the region holds a labelled pending field.";
+        readonly code: "<Pending loading={isLoading} label=\"Loading profile\">\n  {profile && <ProfileSummary profile={profile} />}\n</Pending>";
+    }, {
+        readonly title: "Refetching stale content";
+        readonly description: "Content already on screen stays readable under a busy bar, and an agent reads it nested under a loading line.";
+        readonly code: "<Pending loading={isFetching} label=\"Refreshing pilot\">\n  <Stack gap=\"tight\">\n    <Heading level={3}>{pilot.callsign}</Heading>\n    <Text tone=\"muted\">{pilot.status}</Text>\n  </Stack>\n</Pending>";
+    }];
+    readonly a11y: {
+        readonly role: "group";
+        readonly notes: "While loading the wrapper is a group named by its label with aria-busy set, so assistive technology knows the content may change. Idle, it is a plain element with no role.";
+    };
+};
+
+export declare interface PendingProps extends ComponentPropsWithRef<"div"> {
+    loading: boolean;
+    label: string;
+}
+
+export declare const PRESS_TOOL: AgentToolSpec;
+
+export declare function Progress(props: ProgressProps): JSX.Element;
+
+export declare const progressMeta: {
+    readonly name: "Progress";
+    readonly category: "feedback";
+    readonly summary: "A labelled loading indicator for work in progress. Indeterminate by default; pass value for a known fraction complete.";
+    readonly whenToUse: "Use while something the person is waiting on is still running: a page section fetching, an upload, an import, a long job. Omit value when the remaining work is unknown, and pass value with max when it can be counted. Keep the label a stable noun phrase for what is loading, not a percentage.";
+    readonly whenNotToUse: "Do not use for a busy action; Button's loading prop already marks the button itself. Do not use for the outcome of work that finished or failed; that is an Alert. Do not use for a quantity that is not progress, such as disk usage.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly label: {
+            readonly kind: "string";
+            readonly description: "What is loading, such as \"Importing manifest\". It is the indicator's accessible name and its agent label.";
+            readonly required: true;
+        };
+        readonly value: {
+            readonly kind: "number";
+            readonly description: "Work completed so far, in the same units as max. Omit for an indeterminate indicator. Clamped to the range 0 to max.";
+        };
+        readonly max: {
+            readonly kind: "number";
+            readonly description: "The value at which the work is complete.";
+            readonly default: 100;
+        };
+    };
+    readonly state: {
+        readonly loading: {
+            readonly description: "Present until the work completes. An indeterminate indicator is always loading.";
+            readonly attribute: "data-sprint-loading";
+        };
+        readonly value: {
+            readonly description: "The fraction complete as a whole percentage, such as 40%. Absent while indeterminate.";
+            readonly attribute: "data-sprint-value";
+        };
+    };
+    readonly agentView: {
+        readonly example: "- **Progress** \"Importing manifest\" [loading, value=40%]";
+    };
     readonly examples: readonly [{
-        readonly title: "A titled page with a lede";
-        readonly code: "<PageHeader label=\"Reports\">\n  <Text>Everything the quarter produced, in one place.</Text>\n</PageHeader>";
+        readonly title: "Indeterminate load";
+        readonly description: "Nothing to count yet, so the indicator only says that work is running.";
+        readonly code: "<Progress label=\"Loading flight plan\" />";
     }, {
-        readonly title: "Status tags and a page-level control";
-        readonly description: "Tags classify the page on the title line; the action slot holds the one control that affects the whole page.";
-        readonly code: "<PageHeader\n  label=\"Button\"\n  tags={<Tag tone=\"warning\" filled>experimental</Tag>}\n  actions={<Button agentTool={false}>Refresh</Button>}\n>\n  <Text>A single action a person or an agent can trigger.</Text>\n</PageHeader>";
+        readonly title: "Counted progress";
+        readonly description: "With value and max the agent reads a percentage instead of guessing.";
+        readonly code: "<Progress label=\"Importing manifest\" value={imported} max={total} />";
+    }, {
+        readonly title: "Complete";
+        readonly description: "At max the loading state clears, so the line reads as finished rather than stalled.";
+        readonly code: "<Progress label=\"Importing manifest\" value={240} max={240} />";
     }];
+    readonly a11y: {
+        readonly role: "progressbar";
+        readonly notes: "Renders a native progress element named by the visible label. Omitting value leaves it indeterminate, which assistive technology announces as busy. The percentage readout is hidden from assistive technology because the progressbar already carries its value.";
+    };
 };
 
-export declare interface PageHeaderProps extends ComponentPropsWithRef<"header"> {
+export declare interface ProgressProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
     label: string;
-    tags?: ReactNode;
-    actions?: ReactNode;
+    value?: number;
+    max?: number;
 }
 
-export declare function paginate(text: string, size: number): string[];
+export declare function reactText(node: ReactNode): string | undefined;
 
-export declare function Panel(props: PanelProps): JSX.Element;
+export declare const REGION_ATTRIBUTE = "data-sprint-region";
 
-declare type PanelHeadingLevel = 2 | 3 | 4;
+export declare function registerTool(descriptor: ToolDescriptor, signal: AbortSignal): boolean;
 
-export declare const panelMeta: {
-    readonly name: "Panel";
-    readonly category: "layout";
-    readonly summary: "A labelled region with a header band and an optional slot for the controls that act on it. Everything on a Sprint page lives inside one.";
-    readonly whenToUse: "Use it for every distinct region of a page: a section of documentation, a form, a readout, a preview. The label is the region's accessible name, so a person, a screen reader, and an agent all address the region by the same words.";
-    readonly whenNotToUse: "Do not use it as a spacer or a plain box; that is Stack. Nesting reads clearly to about three deep, because each level alternates its ground and demotes its frame; past that, the depth cues repeat and the region wants a page of its own.";
+declare interface RegisterToolOptions {
+    signal?: AbortSignal;
+    exposedTo?: readonly string[];
+}
+
+export declare const RESERVED_STATE_KEYS: readonly string[];
+
+export declare const SEARCH_TOOL: AgentToolSpec;
+
+export declare function SearchField(props: SearchFieldProps): JSX.Element;
+
+export declare const searchFieldMeta: {
+    readonly name: "SearchField";
+    readonly category: "input";
+    readonly summary: "A search box inside its own search landmark: a labelled query field with a clear control, Escape to clear, Enter to submit, and an optional page-wide key that focuses it. It registers one search tool that sets the query and submits it.";
+    readonly whenToUse: "Use it to filter or search a collection on the page, such as narrowing a users list by name. The landmark lets screen reader users jump straight to it, and the optional shortcut gives keyboard users the familiar slash-to-search.";
+    readonly whenNotToUse: "Do not use it for any other single-line value; a name, an email address, or an identifier is a TextInput. Do not use it to choose from a short known set, which is a Select or a SegmentedControl. Do not give two fields on one page the same shortcut.";
     readonly status: "experimental";
     readonly props: {
         readonly label: {
             readonly kind: "string";
-            readonly description: "What this region is. Rendered in the header band and used as the region's accessible name.";
+            readonly description: "What is being searched, as a noun phrase such as \"Users\". Names the landmark and the field, and derives the tool name, so \"Users\" becomes search-users.";
             readonly required: true;
         };
-        readonly children: {
-            readonly kind: "node";
-            readonly description: "The region's content. An empty panel says it is empty rather than collapsing.";
+        readonly value: {
+            readonly kind: "string";
+            readonly description: "The current query. The field is fully controlled.";
+            readonly required: true;
         };
-        readonly headingLevel: {
-            readonly kind: "enum";
-            readonly description: "Render the label as a real heading at this outline depth, so the section is reachable when a screen reader navigates by headings. Set it on every panelled section of a page; leave it unset only for chrome such as a preview frame.";
-            readonly values: readonly ["2", "3", "4"];
+        readonly onChange: {
+            readonly kind: "handler";
+            readonly description: "Called with the new query on every change, including the clear control, Escape, and the search tool.";
+            readonly required: true;
         };
-        readonly actions: {
-            readonly kind: "node";
-            readonly description: "Controls that act on this region, rendered at the end of the header band. Keep it to one or two.";
+        readonly onSubmit: {
+            readonly kind: "handler";
+            readonly description: "Called with the query when Enter is pressed or the search tool runs. Leave it off for a live filter that reacts to onChange alone.";
         };
-        readonly flush: {
+        readonly placeholder: {
+            readonly kind: "string";
+            readonly description: "Ghost text shown while the field is empty, e.g. \"Name or email\".";
+        };
+        readonly hideLabel: {
             readonly kind: "boolean";
-            readonly description: "Drop the body padding, for content that draws its own edges such as a Table or a CodeBlock.";
+            readonly description: "Hide the label visually while keeping it for screen readers and agents. Pair it with a placeholder so sighted people still know what the field searches.";
             readonly default: false;
         };
-        readonly emptyLabel: {
+        readonly shortcut: {
             readonly kind: "string";
-            readonly description: "What the panel says when it has no content.";
-            readonly default: "Empty";
+            readonly description: "A single key that focuses the field from anywhere on the page, shown as a key chip while the field is empty and unfocused. Ignored while focus is in another editable element or a modifier is held. Pass \"/\" for the common convention; omit or pass false for none.";
+        };
+        readonly name: {
+            readonly kind: "string";
+            readonly description: "The native form name of the query input.";
+        };
+        readonly disabled: {
+            readonly kind: "boolean";
+            readonly description: "Disable the field, its shortcut, and its search tool.";
+            readonly default: false;
+        };
+        readonly agentName: {
+            readonly kind: "string";
+            readonly description: "Override the label used to derive the tool name, when two search fields on a page would otherwise collide.";
+        };
+        readonly agentTool: {
+            readonly kind: "boolean";
+            readonly description: "Set false to render the field without registering a search tool.";
+            readonly default: true;
         };
     };
     readonly state: {
-        readonly flush: {
-            readonly description: "Present when the body carries no padding of its own.";
-            readonly attribute: "data-sprint-flush";
+        readonly value: {
+            readonly description: "The current query, absent while the field is empty.";
+            readonly attribute: "data-sprint-value";
         };
         readonly empty: {
-            readonly description: "Present when the panel has no content. The panel still renders its keyline and says it is empty.";
+            readonly description: "Present while the field holds no query.";
             readonly attribute: "data-sprint-empty";
         };
+        readonly shortcut: {
+            readonly description: "The key that focuses the field from anywhere on the page.";
+            readonly attribute: "data-sprint-shortcut";
+        };
+        readonly disabled: {
+            readonly description: "Present when the field cannot be edited.";
+            readonly attribute: "data-sprint-disabled";
+        };
     };
-    readonly agentView: {
-        readonly example: "- **Panel** \"WebMCP tools\"";
+    readonly tools: {
+        readonly search: AgentToolSpec;
     };
-    readonly a11y: {
-        readonly role: "region";
-        readonly notes: "The section is a named landmark either way: the label is its accessible name. With headingLevel the label is also a heading element, so the page outline includes the region; without it the region is reachable only by landmark navigation.";
+    readonly agentView: {
+        readonly example: "- **SearchField** \"Users\" [empty, shortcut=/] → tool `search-users`";
     };
     readonly examples: readonly [{
-        readonly title: "A section of a page";
-        readonly description: "headingLevel puts the label in the page outline, so a screen reader finds the section by heading as well as by landmark.";
-        readonly code: "<Panel label=\"When to use\" headingLevel={2}>\n  <Text>Use it for any discrete action.</Text>\n</Panel>";
+        readonly title: "Filtering a list";
+        readonly description: "A live filter: onChange narrows the list as the person types, so there is no onSubmit. The label is hidden and the placeholder says what can be matched.";
+        readonly code: "<SearchField\n  label=\"Users\"\n  hideLabel\n  value={query}\n  onChange={setQuery}\n  placeholder=\"Name or email\"\n/>";
     }, {
-        readonly title: "A panel with a control in its header";
-        readonly description: "The header slot is for controls that act on the region, not for navigation.";
-        readonly code: "<Panel\n  label=\"Preview\"\n  actions={<Button agentName=\"Reset preview\">Reset</Button>}\n>\n  <Button tone=\"action\">Prepare launch</Button>\n</Panel>";
-    }, {
-        readonly title: "A flush panel around a table";
-        readonly description: "Content that draws its own keylines sits flush, so borders do not double up.";
-        readonly code: "<Panel label=\"Conventions\" flush>\n  <Table label=\"Conventions\" columns={columns} rows={rows} />\n</Panel>";
-    }, {
-        readonly title: "Nested panels";
-        readonly description: "Depth styles itself: the outermost panel carries a doubled keyline, each nested level alternates its ground, and nested headers demote to a dashed rule, so a reader ranks the levels without counting borders.";
-        readonly code: "<Panel label=\"The shape\" headingLevel={2}>\n  <Panel label=\"Human view\" headingLevel={3}>\n    <Panel label=\"Crew\" headingLevel={4}>\n      <Text>Registration fields live here.</Text>\n    </Panel>\n  </Panel>\n</Panel>";
+        readonly title: "A slash shortcut";
+        readonly description: "Pressing / anywhere on the page focuses the field unless focus is already in something editable. The key chip disappears once the field has focus or a query.";
+        readonly code: "<SearchField\n  label=\"Users\"\n  value={query}\n  onChange={setQuery}\n  shortcut=\"/\"\n  placeholder=\"Name or email\"\n/>";
     }, {
-        readonly title: "An empty region";
-        readonly description: "An empty panel keeps its border and states that it is empty, rather than vanishing and leaving a person or an agent unsure whether it failed to load.";
-        readonly code: "<Panel label=\"Registered tools\" emptyLabel=\"No tools registered\" />";
+        readonly title: "Submitting a query";
+        readonly description: "For a search that is too costly to run on every keystroke, onSubmit receives the query on Enter and when the search tool runs.";
+        readonly code: "<SearchField\n  label=\"Flight logs\"\n  value={query}\n  onChange={setQuery}\n  onSubmit={runSearch}\n  placeholder=\"Callsign or tail number\"\n/>";
     }];
+    readonly a11y: {
+        readonly role: "search";
+        readonly keyboard: readonly ["Enter submits the query", "Escape clears a non-empty query and keeps focus; on an empty field it passes through, so an enclosing dialog can close", "The shortcut key, when set, focuses the field from anywhere on the page"];
+        readonly notes: "The root is a form with role search, labelled by the field's label, so it is listed as a search landmark. The input is type search and announces its shortcut with aria-keyshortcuts; the key chip itself is hidden from assistive technology. The clear control appears only while there is a query, and returns focus to the field.";
+    };
+    readonly relatedComponents: readonly ["TextInput"];
 };
 
-export declare interface PanelProps extends ComponentPropsWithRef<"section"> {
+export declare interface SearchFieldProps extends Omit<ComponentPropsWithRef<"form">, "onChange" | "onSubmit"> {
     label: string;
-    headingLevel?: PanelHeadingLevel;
-    actions?: ReactNode;
-    flush?: boolean;
-    emptyLabel?: string;
-}
-
-export declare const PARAM_DESCRIPTION_LIMIT = 150;
-
-export declare const PART_ATTRIBUTE = "data-sprint-part";
-
-export declare const PRESS_TOOL: AgentToolSpec;
-
-export declare function reactText(node: ReactNode): string | undefined;
-
-export declare const REGION_ATTRIBUTE = "data-sprint-region";
-
-export declare function registerTool(descriptor: ToolDescriptor, signal: AbortSignal): boolean;
-
-declare interface RegisterToolOptions {
-    signal?: AbortSignal;
-    exposedTo?: readonly string[];
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    placeholder?: string;
+    hideLabel?: boolean;
+    shortcut?: string | false;
+    name?: string;
+    disabled?: boolean;
+    agentName?: string;
+    agentTool?: boolean;
 }
 
-export declare const RESERVED_STATE_KEYS: readonly string[];
-
 export declare function SecretField(props: SecretFieldProps): JSX.Element;
 
 export declare const secretFieldMeta: {
@@ -1551,7 +2836,7 @@ export declare const segmentedControlMeta: {
         };
         readonly options: {
             readonly kind: "array";
-            readonly description: "The choices in display order: { value, label }. The label is what a person sees and what the select tool accepts, so an agent never has to know the value.";
+            readonly description: "The choices in display order: { value, label, count? }. The label is what a person sees and what the select tool accepts, so an agent never has to know the value. count renders as a muted chip beside the label and reaches the agent view as part state, so never fold a count into the label.";
             readonly required: true;
         };
         readonly value: {
@@ -1564,6 +2849,19 @@ export declare const segmentedControlMeta: {
             readonly description: "Called with the newly selected value. The select tool drives a real click, so this runs for agent selections too.";
             readonly required: true;
         };
+        readonly savedValue: {
+            readonly kind: "string";
+            readonly description: "The value currently in effect, for a control that stages a change until something confirms it. While it differs from value the saved option keeps a marker and the control reports itself dirty, so both the saved and the proposed choice stay readable.";
+        };
+        readonly hint: {
+            readonly kind: "string";
+            readonly description: "Guidance shown under the options, linked with aria-describedby and carried into the agent view. Say what a staged change does, such as when it takes effect.";
+        };
+        readonly block: {
+            readonly kind: "boolean";
+            readonly description: "Fill the container's width, with every option taking an equal share. Without it the control stays as wide as its options, even inside a stretching column.";
+            readonly default: false;
+        };
         readonly disabled: {
             readonly kind: "boolean";
             readonly description: "Disable every option and unregister the select tool.";
@@ -1584,6 +2882,14 @@ export declare const segmentedControlMeta: {
             readonly description: "The value of the option currently selected.";
             readonly attribute: "data-sprint-value";
         };
+        readonly dirty: {
+            readonly description: "Present while savedValue is set and differs from value. The saved option carries data-sprint-saved.";
+            readonly attribute: "data-sprint-dirty";
+        };
+        readonly block: {
+            readonly description: "Present when the control fills its container.";
+            readonly attribute: "data-sprint-block";
+        };
         readonly disabled: {
             readonly description: "Present when no option can be chosen.";
             readonly attribute: "data-sprint-disabled";
@@ -1593,12 +2899,24 @@ export declare const segmentedControlMeta: {
         readonly select: AgentToolSpec;
     };
     readonly agentView: {
-        readonly example: "- **SegmentedControl** \"Page view\" [value=human] → tool `select-page-view`\n  - part `option` \"human\" [checked]\n  - part `option` \"agent\"";
+        readonly example: "- **SegmentedControl** \"Access\" [dirty, value=write] → tool `select-access`\n  - part `option` \"Read\" [count=17, saved]\n  - part `option` \"Write\" [checked, count=4]\n  - part `hint` \"Currently Read. Nothing changes until you confirm.\"";
     };
     readonly examples: readonly [{
         readonly title: "A view switch";
         readonly description: "In agent view each option renders as its own control, so an agent driving the DOM can click one without WebMCP.";
         readonly code: "<SegmentedControl\n  label=\"Page view\"\n  value={view}\n  onChange={setView}\n  options={[\n    { value: \"human\", label: \"human\" },\n    { value: \"agent\", label: \"agent\" },\n  ]}\n/>";
+    }, {
+        readonly title: "Options with counts";
+        readonly description: "A count is data, not label text: it renders as a chip, joins the accessible name, and reaches agents as part state while the select tool still takes the plain label.";
+        readonly code: "<SegmentedControl\n  label=\"Members\"\n  value={filter}\n  onChange={setFilter}\n  options={[\n    { value: \"all\", label: \"All\", count: 48 },\n    { value: \"active\", label: \"Active\", count: 18 },\n    { value: \"never\", label: \"Never signed in\", count: 30 },\n  ]}\n/>";
+    }, {
+        readonly title: "A staged change";
+        readonly description: "savedValue keeps the value in effect visible while another is selected, and hint says what confirming will do. The control reports itself dirty until the two agree.";
+        readonly code: "<SegmentedControl\n  label=\"Access\"\n  value={access}\n  savedValue=\"read\"\n  onChange={setAccess}\n  hint=\"Currently Read. Nothing changes until you confirm.\"\n  options={[\n    { value: \"read\", label: \"Read\" },\n    { value: \"write\", label: \"Write\" },\n    { value: \"admin\", label: \"Admin\" },\n  ]}\n/>";
+    }, {
+        readonly title: "A full-width control";
+        readonly description: "block fills the container and shares the width equally between options. Without it the control keeps its own width inside a stretching Stack.";
+        readonly code: "<SegmentedControl\n  label=\"Range\"\n  block\n  value={range}\n  onChange={setRange}\n  options={[\n    { value: \"day\", label: \"Day\" },\n    { value: \"week\", label: \"Week\" },\n    { value: \"month\", label: \"Month\" },\n  ]}\n/>";
     }, {
         readonly title: "A disabled control";
         readonly description: "Disabled unregisters the tool, so an agent cannot select an option a person could not.";
@@ -1607,7 +2925,7 @@ export declare const segmentedControlMeta: {
     readonly a11y: {
         readonly role: "radiogroup";
         readonly keyboard: readonly ["Arrow keys move to the next or previous option and select it", "Home selects the first option", "End selects the last option", "Tab enters and leaves the group once"];
-        readonly notes: "Roving tabindex: only the selected option is in the tab order. Selection follows focus, which is the expected behaviour for a radio group.";
+        readonly notes: "Roving tabindex: only the selected option is in the tab order. Selection follows focus, which is the expected behaviour for a radio group. An option with a count is named by its label and its count together; the hint is linked to the group with aria-describedby.";
     };
 };
 
@@ -1616,6 +2934,9 @@ export declare interface SegmentedControlProps extends Omit<ComponentPropsWithRe
     options: readonly SegmentedOption[];
     value: string;
     onChange: (value: string) => void;
+    savedValue?: string;
+    hint?: string;
+    block?: boolean;
     disabled?: boolean;
     agentName?: string;
     agentTool?: boolean;
@@ -1624,6 +2945,7 @@ export declare interface SegmentedControlProps extends Omit<ComponentPropsWithRe
 export declare interface SegmentedOption {
     value: string;
     label: string;
+    count?: number;
 }
 
 export declare function Select(props: SelectProps): JSX.Element;
@@ -1635,7 +2957,7 @@ export declare const SELECT_TOOL: AgentToolSpec;
 export declare const selectMeta: {
     readonly name: "Select";
     readonly category: "input";
-    readonly summary: "A dropdown of mutually exclusive options behind a native select, carrying its own label, hint, and error. It registers a single select tool whose schema enumerates the option labels currently on offer.";
+    readonly summary: "A dropdown of mutually exclusive options: a select-only combobox that opens a listbox on click or keyboard, carrying its own label, hint, and error. It registers a single select tool whose schema enumerates the option labels currently on offer.";
     readonly whenToUse: "Use it when one value is chosen from a list too long to lay out flat: a region, a squad, a category. Options are data ({ value, label }), the tool accepts the visible label, and in agent view every option renders as its own control, so an agent picks one without opening anything.";
     readonly whenNotToUse: "Do not use it for two to four short options a person should compare at a glance; that is a SegmentedControl. Do not use it for an on/off state, which is a Checkbox or a Switch, and never for navigation.";
     readonly status: "experimental";
@@ -1647,7 +2969,7 @@ export declare const selectMeta: {
         };
         readonly options: {
             readonly kind: "array";
-            readonly description: "The choices in display order: { value, label }. The label is what a person sees and what the select tool accepts, so an agent never has to know the value.";
+            readonly description: "The choices in display order: { value, label, count? }. The label is what a person sees and what the select tool accepts, so an agent never has to know the value. count renders as a muted chip beside the label and reaches the agent view as part state, so never fold a count into the label.";
             readonly required: true;
         };
         readonly value: {
@@ -1657,12 +2979,12 @@ export declare const selectMeta: {
         };
         readonly onChange: {
             readonly kind: "handler";
-            readonly description: "Called with the newly chosen value. The select tool drives a real change event, so this runs for agent selections too.";
+            readonly description: "Called with the newly chosen value. The select tool clicks the real option, so this runs for agent selections too.";
             readonly required: true;
         };
         readonly placeholder: {
             readonly kind: "string";
-            readonly description: "Shown while value is \"\". Rendered as a disabled option, so a person cannot choose it back.";
+            readonly description: "Shown in the closed control while value is \"\". It is not an option, so a person cannot choose it back.";
         };
         readonly hint: {
             readonly kind: "string";
@@ -1674,7 +2996,7 @@ export declare const selectMeta: {
         };
         readonly name: {
             readonly kind: "string";
-            readonly description: "The native form name submitted with the surrounding form.";
+            readonly description: "The form name submitted with the surrounding form, through a hidden input carrying the value.";
         };
         readonly disabled: {
             readonly kind: "boolean";
@@ -1717,17 +3039,25 @@ export declare const selectMeta: {
             readonly description: "Present while an error is set.";
             readonly attribute: "data-sprint-invalid";
         };
+        readonly active: {
+            readonly description: "On an option part, present while the list is open and that option is highlighted by the keyboard or pointer.";
+            readonly attribute: "data-sprint-active";
+        };
     };
     readonly tools: {
         readonly select: AgentToolSpec;
     };
     readonly agentView: {
-        readonly example: "- **Select** \"Region\" [value=eu-1] → tool `select-region`\n  - part `option` \"North Atlantic\"\n  - part `option` \"Northern Europe\" [checked]\n  - part `option` \"East Asia\"";
+        readonly example: "- **Select** \"Region\" [value=eu-1] → tool `select-region`\n  - part `option` \"North Atlantic\" [count=12]\n  - part `option` \"Northern Europe\" [checked, count=30]\n  - part `option` \"East Asia\" [count=7]";
     };
     readonly examples: readonly [{
         readonly title: "A dropdown";
         readonly description: "In agent view each option renders as its own control, so a DOM-driving agent chooses one directly.";
         readonly code: "<Select\n  label=\"Region\"\n  value={region}\n  onChange={setRegion}\n  placeholder=\"Choose a region\"\n  options={[\n    { value: \"na-1\", label: \"North Atlantic\" },\n    { value: \"eu-1\", label: \"Northern Europe\" },\n    { value: \"ap-1\", label: \"East Asia\" },\n  ]}\n/>";
+    }, {
+        readonly title: "Options with counts";
+        readonly description: "A count is data, not label text: it renders as a chip in the list and the closed control, joins the accessible name, and reaches agents as part state while the select tool still takes the plain label.";
+        readonly code: "<Select\n  label=\"Region\"\n  value={region}\n  onChange={setRegion}\n  placeholder=\"Choose a region\"\n  options={[\n    { value: \"na-1\", label: \"North Atlantic\", count: 12 },\n    { value: \"eu-1\", label: \"Northern Europe\", count: 30 },\n    { value: \"ap-1\", label: \"East Asia\", count: 7 },\n  ]}\n/>";
     }, {
         readonly title: "A required choice with an error";
         readonly description: "Empty plus required plus an error is how an unmade mandatory choice reads on every surface.";
@@ -1739,14 +3069,15 @@ export declare const selectMeta: {
     }];
     readonly a11y: {
         readonly role: "combobox";
-        readonly keyboard: readonly ["Arrow keys move through the options", "Enter or Space opens the list", "Escape closes it"];
-        readonly notes: "A native select element, so the platform owns the listbox interaction. The label is associated via htmlFor; errors set aria-invalid and link with aria-describedby.";
+        readonly keyboard: readonly ["Enter, Space, or an arrow key opens the list", "Arrow keys, Home, and End move through the options; typing a letter jumps to the next match", "Enter or Space chooses the highlighted option", "Escape or Tab closes the list without choosing"];
+        readonly notes: "A select-only combobox: a button with role combobox that opens a listbox on a plain click, so a synthetic element.click() opens it as reliably as a pointer does, and the list renders in the page rather than in browser chrome an automated session cannot see. Focus stays on the button and aria-activedescendant tracks the highlighted option. The label is linked with aria-labelledby; errors set aria-invalid and link with aria-describedby. An option with a count is named by its label and count together.";
     };
 };
 
 export declare interface SelectOption {
     value: string;
     label: string;
+    count?: number;
 }
 
 export declare interface SelectProps extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
@@ -1820,8 +3151,40 @@ export declare const shellMeta: {
             readonly description: "Label of the drawer button while the drawer is open.";
             readonly default: "Close";
         };
+        readonly collapsible: {
+            readonly kind: "boolean";
+            readonly description: "Lets a person hide the sidebar on wide viewports too. A second toggle appears beside the bar there, and while collapsed the page takes the narrow layout: the bar runs across the top and the sidebar is gone until it is shown again.";
+            readonly default: false;
+        };
+        readonly collapsed: {
+            readonly kind: "boolean";
+            readonly description: "Whether the sidebar is collapsed on wide viewports, when the owner keeps that state. Pair it with onCollapsedChange.";
+        };
+        readonly defaultCollapsed: {
+            readonly kind: "boolean";
+            readonly description: "Whether a collapsible sidebar starts collapsed when the Shell keeps its own state.";
+            readonly default: false;
+        };
+        readonly onCollapsedChange: {
+            readonly kind: "handler";
+            readonly description: "Called with the collapsed state the Shell wants. Use it to remember the choice across visits.";
+        };
+        readonly hideLabel: {
+            readonly kind: "string";
+            readonly description: "Label of the wide-viewport toggle while the sidebar is shown.";
+            readonly default: "Hide menu";
+        };
+        readonly showLabel: {
+            readonly kind: "string";
+            readonly description: "Label of the wide-viewport toggle while the sidebar is collapsed.";
+            readonly default: "Show menu";
+        };
     };
     readonly state: {
+        readonly collapsed: {
+            readonly description: "Present while a collapsible sidebar is hidden on wide viewports. Narrow viewports ignore it and keep the drawer.";
+            readonly attribute: "data-sprint-collapsed";
+        };
         readonly open: {
             readonly description: "Present while the mobile drawer is open. On wide viewports the sidebar is always visible and this state is inert.";
             readonly attribute: "data-sprint-open";
@@ -1835,6 +3198,10 @@ export declare const shellMeta: {
         readonly title: "A sidebar app shell";
         readonly description: "One Shell per view. The sidebar collapses to a top bar with a drawer on narrow screens, and an agent reading the page sees the nav and the content with no frame in between.";
         readonly code: "<Shell\n  bar={<Link href=\"#/\">ACME</Link>}\n  side={\n    <Nav label=\"Main\">\n      <Link href=\"#/reports\" active>Reports</Link>\n      <Link href=\"#/settings\">Settings</Link>\n    </Nav>\n  }\n>\n  <Panel label=\"Reports\" headingLevel={2}>\n    <Text>Quarterly numbers land here.</Text>\n  </Panel>\n</Shell>";
+    }, {
+        readonly title: "A sidebar that can be hidden";
+        readonly description: "With collapsible, a person can put the sidebar away on a wide screen as well as a narrow one, and get the full width for the page.";
+        readonly code: "<Shell\n  collapsible\n  bar={<Link href=\"#/\">ACME</Link>}\n  side={\n    <Nav label=\"Main\">\n      <Link href=\"#/reports\" active>Reports</Link>\n      <Link href=\"#/settings\">Settings</Link>\n    </Nav>\n  }\n>\n  <Text>Quarterly numbers land here.</Text>\n</Shell>";
     }];
 };
 
@@ -1845,6 +3212,12 @@ export declare interface ShellProps extends ComponentPropsWithRef<"div"> {
     skipLabel?: string;
     menuLabel?: string;
     closeLabel?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    hideLabel?: string;
+    showLabel?: string;
 }
 
 export declare function slug(value: string): string;
@@ -1879,6 +3252,8 @@ export declare interface SprintViewValue {
 
 export declare function Stack(props: StackProps): JSX.Element;
 
+export declare const STACK_MINS: readonly ["10rem", "12rem", "14rem", "16rem", "18rem", "20rem", "22rem", "24rem", "28rem", "32rem"];
+
 export declare type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
 
 export declare type StackDirection = "row" | "column" | "grid";
@@ -1933,8 +3308,9 @@ export declare const stackMeta: {
             readonly default: false;
         };
         readonly min: {
-            readonly kind: "string";
-            readonly description: "Minimum track width for direction=\"grid\", as a CSS length. Tracks never exceed the container.";
+            readonly kind: "enum";
+            readonly description: "Minimum track width for direction=\"grid\", from a fixed scale of rem lengths. Tracks never exceed the container. Scale values are mapped in the stylesheet through data-sprint-min, so they work under a strict Content Security Policy. Any other CSS length is still accepted as an escape hatch, but it is written to an inline style attribute, which a style-src policy without unsafe-inline blocks: under such a policy an off-scale grid falls back to one column.";
+            readonly values: readonly ["10rem", "12rem", "14rem", "16rem", "18rem", "20rem", "22rem", "24rem", "28rem", "32rem"];
             readonly default: "18rem";
         };
     };
@@ -1967,6 +3343,10 @@ export declare const stackMeta: {
             readonly description: "Present when the row stacks into a column on narrow viewports.";
             readonly attribute: "data-sprint-collapse";
         };
+        readonly min: {
+            readonly description: "The minimum track width in use, present only when direction=\"grid\". A value off the scale is carried here too, with the length itself in an inline style.";
+            readonly attribute: "data-sprint-min";
+        };
     };
     readonly examples: readonly [{
         readonly title: "A row of actions";
@@ -1982,6 +3362,8 @@ export declare const stackMeta: {
     }];
 };
 
+export declare type StackMin = (typeof STACK_MINS)[number];
+
 export declare interface StackProps extends ComponentPropsWithRef<"div"> {
     direction?: StackDirection;
     gap?: StackGap;
@@ -1989,11 +3371,106 @@ export declare interface StackProps extends ComponentPropsWithRef<"div"> {
     justify?: StackJustify;
     wrap?: boolean;
     collapse?: boolean;
-    min?: string;
+    min?: StackMin | (string & Record<never, never>);
 }
 
 export declare const STATE_ATTRIBUTE_PREFIX = "data-sprint-";
 
+export declare interface Step {
+    title: string;
+    body?: string;
+    state?: StepState;
+}
+
+export declare function Steps(props: StepsProps): JSX.Element;
+
+export declare const stepsMeta: {
+    readonly name: "Steps";
+    readonly category: "display";
+    readonly summary: "An ordered set of numbered steps a person works through: each one a number badge, a short title and an optional body, with a rule between them. A step can be marked done or current, so the list doubles as a record of how far someone has got.";
+    readonly whenToUse: "Use it when the order is the instruction: a handful of things to do one after another, each worth a title of its own, like the two things to send someone or the stages of a setup. Mark the step in progress as current and the finished ones as done when the page knows; leave every state off when the steps are simply instructions. Each step is an addressable part carrying its position and state, so an agent can say which step is next without counting lines.";
+    readonly whenNotToUse: "Do not use it for a plain numbered list of short points with no titles or progress; that is List with ordered. Do not use it as a wizard that moves between screens: Steps only displays where someone is, it has no actions and registers no WebMCP tool, because there is nothing to press and an agent reads every step and its state from the agent view. Pair it with a Button when the page itself advances. Do not put components or links in a step; title and body are plain strings.";
+    readonly status: "experimental";
+    readonly props: {
+        readonly label: {
+            readonly kind: "string";
+            readonly description: "What the steps achieve, as a short phrase like \"Send Tess two things\". Names the list for a screen reader and for the agent view.";
+            readonly required: true;
+        };
+        readonly steps: {
+            readonly kind: "array";
+            readonly description: "The steps in order, each { title: string; body?: string; state?: \"done\" | \"current\" }. Title is the instruction in a few words; body is an optional sentence of detail. A step with no state is upcoming. Mark at most one step current.";
+            readonly required: true;
+        };
+        readonly doneLabel: {
+            readonly kind: "string";
+            readonly description: "What a screen reader hears as the description of a finished step, since the done mark is drawn rather than written.";
+            readonly default: "Done";
+        };
+        readonly emptyLabel: {
+            readonly kind: "string";
+            readonly description: "What the list says when it has no steps.";
+            readonly default: "No steps";
+        };
+    };
+    readonly state: {
+        readonly steps: {
+            readonly description: "How many steps there are.";
+            readonly attribute: "data-sprint-steps";
+        };
+        readonly complete: {
+            readonly description: "Present when every step is done.";
+            readonly attribute: "data-sprint-complete";
+        };
+        readonly empty: {
+            readonly description: "Present when there are no steps.";
+            readonly attribute: "data-sprint-empty";
+        };
+        readonly index: {
+            readonly description: "On a step: its 1-based position, which is also the number in its badge.";
+            readonly attribute: "data-sprint-index";
+        };
+        readonly done: {
+            readonly description: "On a step: present once the step is finished.";
+            readonly attribute: "data-sprint-done";
+        };
+        readonly current: {
+            readonly description: "On a step: present on the step in progress.";
+            readonly attribute: "data-sprint-current";
+        };
+    };
+    readonly agentView: {
+        readonly example: "- **Steps** \"Send Tess two things\" [steps=2]\n  - part `step` \"Copy the link\" [index=1]\n  - part `step` \"Pass on the emoji\" [index=2]";
+    };
+    readonly a11y: {
+        readonly role: "list";
+        readonly notes: "A real ol named by its label, with an explicit list role because the drawn badges require list-style none and Safari would otherwise drop the list semantics, so the position of each step is announced. The badge number is aria-hidden for the same reason. The current step carries aria-current=\"step\", and a done step is described by doneLabel. Title and body are read as one item, separated by a colon that is hidden visually.";
+    };
+    readonly relatedComponents: readonly ["List", "Progress", "Panel"];
+    readonly examples: readonly [{
+        readonly title: "Send Tess two things";
+        readonly description: "The plainest case: two instructions in order, with no progress to report.";
+        readonly code: "<Steps\n  label=\"Send Tess two things\"\n  steps={[{ title: \"Copy the link\" }, { title: \"Pass on the emoji\" }]}\n/>";
+    }, {
+        readonly title: "Partway through";
+        readonly description: "A finished step, the one in progress, and one still to come, each with a line of detail.";
+        readonly code: "<Steps\n  label=\"Connect a tool\"\n  steps={[\n    {\n      title: \"Register the tool\",\n      body: \"Give it a name and an input schema.\",\n      state: \"done\",\n    },\n    {\n      title: \"Drive the DOM\",\n      body: \"Click the real element rather than calling a prop.\",\n      state: \"current\",\n    },\n    { title: \"Return the new state\", body: \"Read it back from the page.\" },\n  ]}\n/>";
+    }, {
+        readonly title: "Every step done";
+        readonly description: "When all steps are done the list publishes that it is complete.";
+        readonly code: "<Steps\n  label=\"Send Tess two things\"\n  steps={[\n    { title: \"Copy the link\", state: \"done\" },\n    { title: \"Pass on the emoji\", state: \"done\" },\n  ]}\n/>";
+    }];
+};
+
+export declare interface StepsProps extends Omit<ComponentPropsWithRef<"ol">, "children"> {
+    label: string;
+    steps: readonly Step[];
+    doneLabel?: string;
+    emptyLabel?: string;
+}
+
+export declare type StepState = "done" | "current";
+
 export declare function Switch(props: SwitchProps): JSX.Element;
 
 export declare const switchMeta: {
@@ -2076,11 +3553,13 @@ export declare interface SwitchProps extends Omit<ComponentPropsWithRef<"button"
 
 export declare function Table(props: TableProps): JSX.Element;
 
+export declare const TABLE_WIDTHS: readonly ["4rem", "5rem", "6rem", "7rem", "8rem", "9rem", "10rem", "12rem", "14rem", "16rem", "20rem", "24rem"];
+
 export declare interface TableColumn {
     key: string;
     header: string;
     align?: "start" | "end";
-    width?: string;
+    width?: TableWidth | (string & Record<never, never>);
 }
 
 export declare const tableMeta: {
@@ -2098,7 +3577,7 @@ export declare const tableMeta: {
         };
         readonly columns: {
             readonly kind: "array";
-            readonly description: "Column definitions, in display order: { key, header, align?, width? }. The key addresses the cell in each row and appears on the cell as data-sprint-column.";
+            readonly description: "Column definitions, in display order: { key, header, align?, width? }. The key addresses the cell in each row and appears on the cell as data-sprint-column. width is one of 4rem, 5rem, 6rem, 7rem, 8rem, 9rem, 10rem, 12rem, 14rem, 16rem, 20rem, or 24rem, mapped in the stylesheet through data-sprint-width on the header cell so it works under a strict Content Security Policy; any other CSS length is still accepted but is written to an inline style attribute, which a style-src policy without unsafe-inline blocks.";
             readonly required: true;
         };
         readonly rows: {
@@ -2111,6 +3590,16 @@ export declare const tableMeta: {
             readonly description: "What the table says when it has no rows.";
             readonly default: "No rows";
         };
+        readonly loading: {
+            readonly kind: "boolean";
+            readonly description: "Set while the rows are being fetched. Sets aria-busy and sweeps a bar along the top edge. Existing rows stay visible; with none yet, the empty slot says loadingLabel instead of emptyLabel.";
+            readonly default: false;
+        };
+        readonly loadingLabel: {
+            readonly kind: "string";
+            readonly description: "What the empty slot says while loading.";
+            readonly default: "Loading";
+        };
     };
     readonly state: {
         readonly columns: {
@@ -2125,6 +3614,10 @@ export declare const tableMeta: {
             readonly description: "Present when the table has no rows.";
             readonly attribute: "data-sprint-empty";
         };
+        readonly loading: {
+            readonly description: "Present while the rows are being fetched. Alongside empty it means nothing has arrived yet, not that there is nothing.";
+            readonly attribute: "data-sprint-loading";
+        };
         readonly column: {
             readonly description: "On a cell: which column it belongs to.";
             readonly attribute: "data-sprint-column";
@@ -2133,6 +3626,10 @@ export declare const tableMeta: {
             readonly description: "On a cell: which row it belongs to.";
             readonly attribute: "data-sprint-row";
         };
+        readonly width: {
+            readonly description: "On a column header: the width its column asked for, if any. A value off the scale is carried here too, with the length itself in an inline style.";
+            readonly attribute: "data-sprint-width";
+        };
         readonly align: {
             readonly description: "On a cell: the alignment its column asked for, if any.";
             readonly attribute: "data-sprint-align";
@@ -2150,6 +3647,10 @@ export declare const tableMeta: {
         readonly title: "A table with no rows";
         readonly description: "An empty table keeps its header and says so, rather than rendering a bare keyline.";
         readonly code: "<Table\n  label=\"Registered tools\"\n  emptyLabel=\"No tools registered\"\n  columns={[{ key: \"name\", header: \"Name\" }]}\n  rows={[]}\n/>";
+    }, {
+        readonly title: "A table while fetching";
+        readonly description: "Before the first rows arrive the table reads [empty, loading], so an agent waits rather than concluding there is nothing.";
+        readonly code: "<Table\n  label=\"Loadouts\"\n  loading={isFetching}\n  columns={[{ key: \"name\", header: \"Name\" }]}\n  rows={loadouts ?? []}\n/>";
     }];
     readonly a11y: {
         readonly role: "table";
@@ -2162,6 +3663,8 @@ export declare interface TableProps extends ComponentPropsWithRef<"table"> {
     columns: readonly TableColumn[];
     rows: readonly TableRow[];
     emptyLabel?: string;
+    loading?: boolean;
+    loadingLabel?: string;
 }
 
 export declare interface TableRow {
@@ -2169,6 +3672,8 @@ export declare interface TableRow {
     cells: Record<string, ReactNode>;
 }
 
+export declare type TableWidth = (typeof TABLE_WIDTHS)[number];
+
 export declare function Tag(props: TagProps): JSX.Element;
 
 export declare const tagMeta: {
@@ -2365,7 +3870,7 @@ export declare const textInputMeta: {
     readonly category: "input";
     readonly summary: "A single-line text field carrying its own label, hint, and error. Fully controlled, and it registers one fill tool that replaces the field's text with an explicit value.";
     readonly whenToUse: "Use it for any free-form single-line value: a name, an email address, a search term. The label is part of the component, so a form never needs a separate label element, and the error prop is how validation reaches both a person and an agent.";
-    readonly whenNotToUse: "Do not use it for multi-line text, which is a Textarea. Do not use it to pick from a known set of values; that is a Select or a SegmentedControl. Do not use it for an on/off state, which is a Checkbox or a Switch.";
+    readonly whenNotToUse: "Do not use it for multi-line text, which is a Textarea. Do not use it to pick from a known set of values; that is a Select or a SegmentedControl. Do not use it for an on/off state, which is a Checkbox or a Switch. Do not use a read-only TextInput to hand someone a value to paste elsewhere; that is a CopyField.";
     readonly status: "experimental";
     readonly props: {
         readonly label: {
@@ -2414,6 +3919,11 @@ export declare const textInputMeta: {
             readonly description: "Disable the field and unregister its fill tool.";
             readonly default: false;
         };
+        readonly readOnly: {
+            readonly kind: "boolean";
+            readonly description: "Show the value without letting anyone change it. The field stays focusable and selectable, renders as plain text in the agent view, and registers no fill tool, because nothing can change it.";
+            readonly default: false;
+        };
         readonly required: {
             readonly kind: "boolean";
             readonly description: "Mark the field required, visually and in the agent view.";
@@ -2446,6 +3956,10 @@ export declare const textInputMeta: {
             readonly description: "Present when the field cannot be edited.";
             readonly attribute: "data-sprint-disabled";
         };
+        readonly readonly: {
+            readonly description: "Present when the field shows a value that cannot be changed. No fill tool is registered while it is set.";
+            readonly attribute: "data-sprint-readonly";
+        };
         readonly required: {
             readonly description: "Present when the field must be filled.";
             readonly attribute: "data-sprint-required";
@@ -2473,6 +3987,10 @@ export declare const textInputMeta: {
         readonly title: "A password";
         readonly description: "The value stays off every agent surface: state reflects filled or empty, and tool results never echo the text.";
         readonly code: "<TextInput\n  label=\"Access code\"\n  type=\"password\"\n  value={code}\n  onChange={setCode}\n  autoComplete=\"current-password\"\n/>";
+    }, {
+        readonly title: "A read-only value";
+        readonly description: "A value shown in the shape of a form field that nobody may edit. It stays focusable and selectable, reads as text in the agent view, and registers no fill tool. To hand someone a value to paste elsewhere, a CopyField adds the copy control.";
+        readonly code: "<TextInput\n  label=\"Station ID\"\n  value=\"KX-2209-ALPHA\"\n  onChange={() => {}}\n  readOnly\n  hint=\"Assigned at registration\"\n/>";
     }];
     readonly a11y: {
         readonly role: "textbox";
@@ -2492,6 +4010,7 @@ export declare interface TextInputProps extends Omit<ComponentPropsWithRef<"div"
     name?: string;
     autoComplete?: string;
     disabled?: boolean;
+    readOnly?: boolean;
     required?: boolean;
     agentName?: string;
     agentTool?: boolean;
@@ -2611,6 +4130,8 @@ export declare interface ToolExecuteContext {
 
 export declare function toolName(scope: readonly string[], verb: string, label: string): string | null;
 
+export declare const TURN_PAGE_TOOL: AgentToolSpec;
+
 export declare function useAgentControls(): SprintAgentControls;
 
 export declare function useAgentFormat(): AgentFormatter;