@westonkd/sprint 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +146 -0
- package/agent-manifest.json +2256 -0
- package/dist/index.cjs +274 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +2544 -0
- package/dist/index.js +4697 -0
- package/dist/index.js.map +1 -0
- package/dist/sprint.css +1 -0
- package/package.json +86 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,2544 @@
|
|
|
1
|
+
import { ComponentPropsWithRef } from 'react';
|
|
2
|
+
import { JSX } from 'react';
|
|
3
|
+
import { MouseEventHandler } from 'react';
|
|
4
|
+
import { Provider } from 'react';
|
|
5
|
+
import { ReactNode } from 'react';
|
|
6
|
+
import { Ref } from 'react';
|
|
7
|
+
|
|
8
|
+
export declare function accessibleText(element: Element): string | undefined;
|
|
9
|
+
|
|
10
|
+
export declare function afterCommit(): Promise<void>;
|
|
11
|
+
|
|
12
|
+
export declare const AGENT_ATTRIBUTE = "data-sprint-agent";
|
|
13
|
+
|
|
14
|
+
export declare interface AgentActionSpec {
|
|
15
|
+
description: string;
|
|
16
|
+
selector: string;
|
|
17
|
+
params?: Record<string, AgentPropSpec>;
|
|
18
|
+
idempotent?: boolean;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export declare interface AgentAttributeOptions {
|
|
22
|
+
part?: string;
|
|
23
|
+
state?: Record<string, AgentAttributeValue>;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export declare function agentAttributes(component: string, options?: AgentAttributeOptions): Record<string, string>;
|
|
27
|
+
|
|
28
|
+
export declare function agentAttributesFor(node: AgentNode): Record<string, string>;
|
|
29
|
+
|
|
30
|
+
export declare type AgentAttributeValue = string | number | boolean | null | undefined;
|
|
31
|
+
|
|
32
|
+
export declare interface AgentComponentMeta {
|
|
33
|
+
name: string;
|
|
34
|
+
category: string;
|
|
35
|
+
summary: string;
|
|
36
|
+
whenToUse: string;
|
|
37
|
+
whenNotToUse?: string;
|
|
38
|
+
status: "experimental" | "stable" | "deprecated";
|
|
39
|
+
props: Record<string, AgentPropSpec>;
|
|
40
|
+
actions?: Record<string, AgentActionSpec>;
|
|
41
|
+
state?: Record<string, AgentStateSpec>;
|
|
42
|
+
examples: readonly AgentExample[];
|
|
43
|
+
tools?: Record<string, AgentToolSpec>;
|
|
44
|
+
agentView?: {
|
|
45
|
+
example: string;
|
|
46
|
+
};
|
|
47
|
+
a11y?: {
|
|
48
|
+
role?: string;
|
|
49
|
+
keyboard?: readonly string[];
|
|
50
|
+
notes?: string;
|
|
51
|
+
};
|
|
52
|
+
relatedComponents?: readonly string[];
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export declare function AgentControl(props: AgentControlProps): JSX.Element;
|
|
56
|
+
|
|
57
|
+
export declare function AgentControlGroup(props: AgentControlGroupProps): JSX.Element;
|
|
58
|
+
|
|
59
|
+
export declare interface AgentControlGroupProps {
|
|
60
|
+
node: AgentNode;
|
|
61
|
+
onActivate: (part: AgentPart, index: number) => void;
|
|
62
|
+
isActionable?: (part: AgentPart, index: number) => boolean;
|
|
63
|
+
children?: ReactNode;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export declare type AgentControlProps = Omit<ComponentPropsWithRef<"button">, "children" | "ref" | "onClick"> & {
|
|
67
|
+
node: AgentNode;
|
|
68
|
+
as?: "button" | "a" | undefined;
|
|
69
|
+
href?: string | undefined;
|
|
70
|
+
target?: string | undefined;
|
|
71
|
+
rel?: string | undefined;
|
|
72
|
+
onClick?: MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement> | undefined;
|
|
73
|
+
ref?: Ref<HTMLButtonElement> | Ref<HTMLAnchorElement> | undefined;
|
|
74
|
+
children?: ReactNode;
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
export declare interface AgentExample {
|
|
78
|
+
title: string;
|
|
79
|
+
description?: string;
|
|
80
|
+
code: string;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export declare type AgentFormatter = (nodes: readonly AgentNode[]) => string;
|
|
84
|
+
|
|
85
|
+
export declare function AgentLine(props: AgentLineProps): JSX.Element;
|
|
86
|
+
|
|
87
|
+
export declare interface AgentLineProps {
|
|
88
|
+
node: AgentNode;
|
|
89
|
+
children?: ReactNode;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
export declare interface AgentManifest {
|
|
93
|
+
library: string;
|
|
94
|
+
version: string;
|
|
95
|
+
conventions: {
|
|
96
|
+
componentAttribute: string;
|
|
97
|
+
partAttribute: string;
|
|
98
|
+
stateAttributePrefix: string;
|
|
99
|
+
toolAttribute: string;
|
|
100
|
+
ownerAttribute: string;
|
|
101
|
+
regionAttribute: string;
|
|
102
|
+
agentViewFormat: "markdown";
|
|
103
|
+
toolNaming: string;
|
|
104
|
+
toolOutputLimit: number;
|
|
105
|
+
};
|
|
106
|
+
components: readonly AgentComponentMeta[];
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
export declare interface AgentNode {
|
|
110
|
+
component: string;
|
|
111
|
+
summary?: string;
|
|
112
|
+
label?: string;
|
|
113
|
+
state: Record<string, AgentStateValue>;
|
|
114
|
+
parts: AgentPart[];
|
|
115
|
+
tool?: string;
|
|
116
|
+
owner?: string;
|
|
117
|
+
region?: true;
|
|
118
|
+
children: AgentNode[];
|
|
119
|
+
truncated?: true;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
export declare interface AgentPart {
|
|
123
|
+
part: string;
|
|
124
|
+
label?: string;
|
|
125
|
+
state: Record<string, AgentStateValue>;
|
|
126
|
+
tool?: string;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
export declare function agentPartAttributesFor(part: AgentPart): Record<string, string>;
|
|
130
|
+
|
|
131
|
+
export declare function agentPartControlAttributes(component: string, part: AgentPart): Record<string, string>;
|
|
132
|
+
|
|
133
|
+
export declare type AgentPropKind = "string" | "number" | "boolean" | "enum" | "node" | "handler" | "object" | "array";
|
|
134
|
+
|
|
135
|
+
export declare interface AgentPropSpec {
|
|
136
|
+
kind: AgentPropKind;
|
|
137
|
+
description: string;
|
|
138
|
+
required?: boolean;
|
|
139
|
+
default?: unknown;
|
|
140
|
+
values?: readonly string[];
|
|
141
|
+
deprecated?: string;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
export declare function AgentRegion(props: AgentRegionProps): JSX.Element;
|
|
145
|
+
|
|
146
|
+
export declare interface AgentRegionProps {
|
|
147
|
+
children: ReactNode;
|
|
148
|
+
label: string;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
export declare const AgentScopeProvider: Provider<AgentScopeValue>;
|
|
152
|
+
|
|
153
|
+
export declare interface AgentScopeValue {
|
|
154
|
+
path: readonly string[];
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
export declare function agentSelector(component: string, part?: string): string;
|
|
158
|
+
|
|
159
|
+
export declare interface AgentStateSpec {
|
|
160
|
+
description: string;
|
|
161
|
+
attribute: string;
|
|
162
|
+
values?: readonly string[];
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
export declare type AgentStateValue = string | true;
|
|
166
|
+
|
|
167
|
+
export declare interface AgentToolSpec {
|
|
168
|
+
verb: string;
|
|
169
|
+
description: string;
|
|
170
|
+
inputSchema: JsonSchemaObject;
|
|
171
|
+
readOnly: boolean;
|
|
172
|
+
untrustedContent: boolean;
|
|
173
|
+
registeredWhen: string;
|
|
174
|
+
unregisteredWhen?: string;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
export declare function Alert(props: AlertProps): JSX.Element;
|
|
178
|
+
|
|
179
|
+
export declare const alertMeta: {
|
|
180
|
+
readonly name: "Alert";
|
|
181
|
+
readonly category: "feedback";
|
|
182
|
+
readonly summary: "A status message for the outcome of something that already happened: a notice, a warning, or a failure.";
|
|
183
|
+
readonly whenToUse: "Use to report the result of an action or a condition the person did not just cause: \"check your inbox\", \"invalid credentials\", \"this key expires soon\". Use tone=\"danger\" for failures, \"warning\" for conditions needing attention, \"info\" for neutral notices, and \"neutral\" for quiet confirmations. Pass onDismiss when the message can be acknowledged and cleared.";
|
|
184
|
+
readonly whenNotToUse: "Do not use for validation on a specific field; the field's own error prop places the message where the problem is. Do not use for confirmation of an action the person is about to take; that is a Dialog.";
|
|
185
|
+
readonly status: "experimental";
|
|
186
|
+
readonly props: {
|
|
187
|
+
readonly children: {
|
|
188
|
+
readonly kind: "node";
|
|
189
|
+
readonly description: "The message. Inline content only; it is flattened to text for the agent view.";
|
|
190
|
+
readonly required: true;
|
|
191
|
+
};
|
|
192
|
+
readonly label: {
|
|
193
|
+
readonly kind: "string";
|
|
194
|
+
readonly description: "A short uppercase title above the message. Also derives the dismiss tool name, so prefer a stable phrase.";
|
|
195
|
+
};
|
|
196
|
+
readonly tone: {
|
|
197
|
+
readonly kind: "enum";
|
|
198
|
+
readonly description: "The message's severity. Danger and warning announce assertively; info and neutral announce politely.";
|
|
199
|
+
readonly values: readonly ["neutral", "info", "warning", "danger"];
|
|
200
|
+
readonly default: "info";
|
|
201
|
+
};
|
|
202
|
+
readonly onDismiss: {
|
|
203
|
+
readonly kind: "handler";
|
|
204
|
+
readonly description: "Called when the dismiss control is pressed. Providing it renders the control and registers the dismiss tool; the page owns removing the alert.";
|
|
205
|
+
};
|
|
206
|
+
readonly agentName: {
|
|
207
|
+
readonly kind: "string";
|
|
208
|
+
readonly description: "Override the label used to derive the dismiss tool name. Required for a dismissible alert with no label.";
|
|
209
|
+
};
|
|
210
|
+
readonly agentTool: {
|
|
211
|
+
readonly kind: "boolean";
|
|
212
|
+
readonly description: "Set false to render a dismissible alert without registering a tool.";
|
|
213
|
+
readonly default: true;
|
|
214
|
+
};
|
|
215
|
+
};
|
|
216
|
+
readonly state: {
|
|
217
|
+
readonly tone: {
|
|
218
|
+
readonly description: "The alert's severity.";
|
|
219
|
+
readonly attribute: "data-sprint-tone";
|
|
220
|
+
readonly values: readonly ["neutral", "info", "warning", "danger"];
|
|
221
|
+
};
|
|
222
|
+
readonly dismissible: {
|
|
223
|
+
readonly description: "Present when the alert has a dismiss control.";
|
|
224
|
+
readonly attribute: "data-sprint-dismissible";
|
|
225
|
+
};
|
|
226
|
+
};
|
|
227
|
+
readonly tools: {
|
|
228
|
+
readonly dismiss: AgentToolSpec;
|
|
229
|
+
};
|
|
230
|
+
readonly agentView: {
|
|
231
|
+
readonly example: "- **Alert** \"Check your inbox\" [dismissible, tone=info]";
|
|
232
|
+
};
|
|
233
|
+
readonly examples: readonly [{
|
|
234
|
+
readonly title: "A sign-in notice";
|
|
235
|
+
readonly description: "The default info tone for a neutral status message.";
|
|
236
|
+
readonly code: "<Alert label=\"Check your inbox\">We sent a sign-in link to nomad@escadrille.test.</Alert>";
|
|
237
|
+
}, {
|
|
238
|
+
readonly title: "A dismissible confirmation";
|
|
239
|
+
readonly description: "Providing onDismiss renders the dismiss control and registers the dismiss tool. Removing the alert is the page's job.";
|
|
240
|
+
readonly code: "<Alert tone=\"neutral\" label=\"Key revoked\" onDismiss={acknowledge}>The key can no longer authenticate.</Alert>";
|
|
241
|
+
}, {
|
|
242
|
+
readonly title: "A failure";
|
|
243
|
+
readonly description: "Danger announces assertively via role=alert.";
|
|
244
|
+
readonly code: "<Alert tone=\"danger\" label=\"Sign-in failed\">Wrong callsign or access code.</Alert>";
|
|
245
|
+
}];
|
|
246
|
+
readonly a11y: {
|
|
247
|
+
readonly role: "status";
|
|
248
|
+
readonly notes: "Danger and warning render role=alert and announce assertively; info and neutral render role=status. The dismiss control is a labelled button. Render the alert when the condition occurs rather than toggling its visibility, or the announcement is lost.";
|
|
249
|
+
};
|
|
250
|
+
};
|
|
251
|
+
|
|
252
|
+
export declare interface AlertProps extends ComponentPropsWithRef<"div"> {
|
|
253
|
+
tone?: AlertTone;
|
|
254
|
+
label?: string;
|
|
255
|
+
onDismiss?: () => void;
|
|
256
|
+
agentName?: string;
|
|
257
|
+
agentTool?: boolean;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
export declare type AlertTone = "neutral" | "info" | "warning" | "danger";
|
|
261
|
+
|
|
262
|
+
export declare function buildAgentManifest(version: string): AgentManifest;
|
|
263
|
+
|
|
264
|
+
export declare function buildAgentNode(input: NodeInput): AgentNode;
|
|
265
|
+
|
|
266
|
+
export declare function Button(props: ButtonProps): JSX.Element;
|
|
267
|
+
|
|
268
|
+
export declare const buttonMeta: {
|
|
269
|
+
readonly name: "Button";
|
|
270
|
+
readonly category: "action";
|
|
271
|
+
readonly summary: "A single action a person or an agent can trigger. Registers one press tool named from its own label.";
|
|
272
|
+
readonly whenToUse: "Use for any discrete action: submitting, confirming, dismissing, advancing a step. tone=\"action\" with block marks the one primary action in a view; tone=\"danger\" marks destructive actions.";
|
|
273
|
+
readonly whenNotToUse: "Do not use for navigation between pages; use a link. Do not use for toggling a persistent on/off state; that needs a switch or a checkbox.";
|
|
274
|
+
readonly status: "experimental";
|
|
275
|
+
readonly props: {
|
|
276
|
+
readonly children: {
|
|
277
|
+
readonly kind: "node";
|
|
278
|
+
readonly description: "The button label. Its text also derives the WebMCP tool name, so prefer a verb phrase like \"Prepare launch\" over \"OK\".";
|
|
279
|
+
readonly required: true;
|
|
280
|
+
};
|
|
281
|
+
readonly tone: {
|
|
282
|
+
readonly kind: "enum";
|
|
283
|
+
readonly description: "Visual and semantic weight. Acid is rationed to one primary action per view.";
|
|
284
|
+
readonly values: readonly ["neutral", "action", "danger"];
|
|
285
|
+
readonly default: "neutral";
|
|
286
|
+
};
|
|
287
|
+
readonly block: {
|
|
288
|
+
readonly kind: "boolean";
|
|
289
|
+
readonly description: "Render as a full-width bar. Combine with tone=\"action\" for the primary action of a region.";
|
|
290
|
+
readonly default: false;
|
|
291
|
+
};
|
|
292
|
+
readonly loading: {
|
|
293
|
+
readonly kind: "boolean";
|
|
294
|
+
readonly description: "Mark work in progress. Sets aria-busy, disables the control, and unregisters the press tool until it clears.";
|
|
295
|
+
readonly default: false;
|
|
296
|
+
};
|
|
297
|
+
readonly disabled: {
|
|
298
|
+
readonly kind: "boolean";
|
|
299
|
+
readonly description: "Disable the control and unregister its press tool.";
|
|
300
|
+
readonly default: false;
|
|
301
|
+
};
|
|
302
|
+
readonly agentName: {
|
|
303
|
+
readonly kind: "string";
|
|
304
|
+
readonly description: "Override the label used to derive the tool name. Set this on icon-only buttons, when two buttons would otherwise collide, and whenever the visible label contains changing values such as a count.";
|
|
305
|
+
};
|
|
306
|
+
readonly agentTool: {
|
|
307
|
+
readonly kind: "boolean";
|
|
308
|
+
readonly description: "Set false to render the button without registering any WebMCP tool.";
|
|
309
|
+
readonly default: true;
|
|
310
|
+
};
|
|
311
|
+
readonly onClick: {
|
|
312
|
+
readonly kind: "handler";
|
|
313
|
+
readonly description: "Standard click handler. The press tool dispatches a real click, so this runs for agent presses too.";
|
|
314
|
+
};
|
|
315
|
+
};
|
|
316
|
+
readonly state: {
|
|
317
|
+
readonly tone: {
|
|
318
|
+
readonly description: "The button's current tone.";
|
|
319
|
+
readonly attribute: "data-sprint-tone";
|
|
320
|
+
readonly values: readonly ["neutral", "action", "danger"];
|
|
321
|
+
};
|
|
322
|
+
readonly block: {
|
|
323
|
+
readonly description: "Present when the button renders as a full-width bar.";
|
|
324
|
+
readonly attribute: "data-sprint-block";
|
|
325
|
+
};
|
|
326
|
+
readonly loading: {
|
|
327
|
+
readonly description: "Present while the button is busy.";
|
|
328
|
+
readonly attribute: "data-sprint-loading";
|
|
329
|
+
};
|
|
330
|
+
readonly disabled: {
|
|
331
|
+
readonly description: "Present when the button cannot be pressed.";
|
|
332
|
+
readonly attribute: "data-sprint-disabled";
|
|
333
|
+
};
|
|
334
|
+
};
|
|
335
|
+
readonly tools: {
|
|
336
|
+
readonly press: AgentToolSpec;
|
|
337
|
+
};
|
|
338
|
+
readonly agentView: {
|
|
339
|
+
readonly example: "- **Button** \"Prepare launch\" [tone=action] → tool `press-prepare-launch`";
|
|
340
|
+
};
|
|
341
|
+
readonly examples: readonly [{
|
|
342
|
+
readonly title: "Primary action";
|
|
343
|
+
readonly description: "The one rationed acid action bar for a view.";
|
|
344
|
+
readonly code: "<Button tone=\"action\" block onClick={prepare}>Prepare launch</Button>";
|
|
345
|
+
}, {
|
|
346
|
+
readonly title: "Destructive action";
|
|
347
|
+
readonly code: "<Button tone=\"danger\" onClick={purge}>Purge vault</Button>";
|
|
348
|
+
}, {
|
|
349
|
+
readonly title: "Busy state";
|
|
350
|
+
readonly description: "While loading the press tool is unregistered, so an agent cannot double-submit.";
|
|
351
|
+
readonly code: "<Button loading={saving} onClick={save}>Save loadout</Button>";
|
|
352
|
+
}, {
|
|
353
|
+
readonly title: "Disambiguating two identical labels";
|
|
354
|
+
readonly description: "Without agentName both buttons would claim press-save and neither would register a tool.";
|
|
355
|
+
readonly code: "<Button agentName=\"Save billing\">Save</Button>";
|
|
356
|
+
}, {
|
|
357
|
+
readonly title: "Keeping the tool name stable under a changing label";
|
|
358
|
+
readonly description: "A label carrying a value would otherwise rename the tool on every change, churning registration and staling any name an agent already holds.";
|
|
359
|
+
readonly code: "<Button agentName=\"Increment\">Increment ({count})</Button>";
|
|
360
|
+
}];
|
|
361
|
+
readonly a11y: {
|
|
362
|
+
readonly role: "button";
|
|
363
|
+
readonly keyboard: readonly ["Enter activates", "Space activates"];
|
|
364
|
+
readonly notes: "Loading sets aria-busy and disables the control. Focus is an offset keyline, never a rounded ring.";
|
|
365
|
+
};
|
|
366
|
+
};
|
|
367
|
+
|
|
368
|
+
export declare interface ButtonProps extends ComponentPropsWithRef<"button"> {
|
|
369
|
+
tone?: ButtonTone;
|
|
370
|
+
block?: boolean;
|
|
371
|
+
loading?: boolean;
|
|
372
|
+
agentName?: string;
|
|
373
|
+
agentTool?: boolean;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
export declare type ButtonTone = "neutral" | "action" | "danger";
|
|
377
|
+
|
|
378
|
+
export declare function Card(props: CardProps): JSX.Element;
|
|
379
|
+
|
|
380
|
+
export declare const cardMeta: {
|
|
381
|
+
readonly name: "Card";
|
|
382
|
+
readonly category: "navigation";
|
|
383
|
+
readonly summary: "One entry in a catalogue: a title, a line or two of body, and the whole block clickable. Give it an href and it is a link; give it onClick and it is an action that registers an open tool.";
|
|
384
|
+
readonly whenToUse: "Use it in a grid of comparable things a person picks between: components in a catalogue, results in a list, templates to start from. The title is the accessible name, so it is also what an agent selects on.";
|
|
385
|
+
readonly whenNotToUse: "Do not use it for a static region with a header; that is Panel. Do not put separate controls inside one, because the whole card is already a single control and nesting buttons inside a link is invalid.";
|
|
386
|
+
readonly status: "experimental";
|
|
387
|
+
readonly props: {
|
|
388
|
+
readonly label: {
|
|
389
|
+
readonly kind: "string";
|
|
390
|
+
readonly description: "The card's title, and its accessible name. Also derives the tool name when the card acts.";
|
|
391
|
+
readonly required: true;
|
|
392
|
+
};
|
|
393
|
+
readonly children: {
|
|
394
|
+
readonly kind: "node";
|
|
395
|
+
readonly description: "A line or two describing the entry. Carried in the agent view as the body part.";
|
|
396
|
+
};
|
|
397
|
+
readonly href: {
|
|
398
|
+
readonly kind: "string";
|
|
399
|
+
readonly description: "Destination, which makes the card a link. A card that navigates registers no tool by default.";
|
|
400
|
+
};
|
|
401
|
+
readonly onClick: {
|
|
402
|
+
readonly kind: "handler";
|
|
403
|
+
readonly description: "What clicking does. Alone it makes the card a button that registers an open tool by default. Alongside href the card stays a link and the handler rides the click, so a client-side router can intercept the navigation.";
|
|
404
|
+
};
|
|
405
|
+
readonly disabled: {
|
|
406
|
+
readonly kind: "boolean";
|
|
407
|
+
readonly description: "Disable an acting card and unregister its tool. Has no effect on a card that navigates.";
|
|
408
|
+
readonly default: false;
|
|
409
|
+
};
|
|
410
|
+
readonly agentTool: {
|
|
411
|
+
readonly kind: "boolean";
|
|
412
|
+
readonly description: "Override the default: on for a card that acts, off for a card that navigates, because an agent can reach an href on its own.";
|
|
413
|
+
};
|
|
414
|
+
readonly agentName: {
|
|
415
|
+
readonly kind: "string";
|
|
416
|
+
readonly description: "Override the label used to derive the tool name, when two cards share a title.";
|
|
417
|
+
};
|
|
418
|
+
};
|
|
419
|
+
readonly state: {
|
|
420
|
+
readonly href: {
|
|
421
|
+
readonly description: "Where the card goes, when it navigates.";
|
|
422
|
+
readonly attribute: "data-sprint-href";
|
|
423
|
+
};
|
|
424
|
+
readonly disabled: {
|
|
425
|
+
readonly description: "Present when the card cannot be opened.";
|
|
426
|
+
readonly attribute: "data-sprint-disabled";
|
|
427
|
+
};
|
|
428
|
+
};
|
|
429
|
+
readonly tools: {
|
|
430
|
+
readonly open: AgentToolSpec;
|
|
431
|
+
};
|
|
432
|
+
readonly agentView: {
|
|
433
|
+
readonly example: "- **Card** \"Button\" [href=#/Button]\n - part `title` \"Button\"\n - part `body` \"A single action a person or an agent can trigger.\"";
|
|
434
|
+
};
|
|
435
|
+
readonly examples: readonly [{
|
|
436
|
+
readonly title: "A catalogue entry";
|
|
437
|
+
readonly description: "A card that navigates. No tool, because the href is already public.";
|
|
438
|
+
readonly code: "<Card label=\"Button\" href=\"#/Button\">\n A single action a person or an agent can trigger.\n</Card>";
|
|
439
|
+
}, {
|
|
440
|
+
readonly title: "A card that acts";
|
|
441
|
+
readonly description: "onClick instead of href, so the card registers open-start-from-blank and an agent can take it.";
|
|
442
|
+
readonly code: "<Card label=\"Start from blank\" onClick={create}>\n An empty page with the provider already wired up.\n</Card>";
|
|
443
|
+
}];
|
|
444
|
+
readonly a11y: {
|
|
445
|
+
readonly notes: "The whole block is one control: a link when it has an href, a button when it acts. The title names it, and the body is read as its content rather than as part of the name.";
|
|
446
|
+
};
|
|
447
|
+
};
|
|
448
|
+
|
|
449
|
+
export declare interface CardProps extends Omit<ComponentPropsWithRef<"button">, "ref" | "onClick" | "children"> {
|
|
450
|
+
label: string;
|
|
451
|
+
children?: ReactNode;
|
|
452
|
+
href?: string;
|
|
453
|
+
onClick?: MouseEventHandler<HTMLElement>;
|
|
454
|
+
disabled?: boolean;
|
|
455
|
+
agentTool?: boolean;
|
|
456
|
+
agentName?: string;
|
|
457
|
+
ref?: Ref<HTMLButtonElement> | Ref<HTMLAnchorElement>;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
export declare function Checkbox(props: CheckboxProps): JSX.Element;
|
|
461
|
+
|
|
462
|
+
export declare const checkboxMeta: {
|
|
463
|
+
readonly name: "Checkbox";
|
|
464
|
+
readonly category: "input";
|
|
465
|
+
readonly summary: "A single on/off choice recorded as form data. It registers one set tool that takes the end state rather than toggling.";
|
|
466
|
+
readonly whenToUse: "Use it for a boolean a form will submit: accepting terms, opting in, including something in a request. The set tool takes checked as true or false, so an agent states the end state and never has to read before writing.";
|
|
467
|
+
readonly whenNotToUse: "Do not use it for a setting that takes effect the moment it changes; that is a Switch. Do not use it for choosing one of several options, which is a SegmentedControl or a Select.";
|
|
468
|
+
readonly status: "experimental";
|
|
469
|
+
readonly props: {
|
|
470
|
+
readonly label: {
|
|
471
|
+
readonly kind: "string";
|
|
472
|
+
readonly description: "What checking it means. Names the box for a screen reader and derives the tool name, so prefer a statement such as \"Accept the terms\".";
|
|
473
|
+
readonly required: true;
|
|
474
|
+
};
|
|
475
|
+
readonly checked: {
|
|
476
|
+
readonly kind: "boolean";
|
|
477
|
+
readonly description: "Whether the box is checked. The box is fully controlled.";
|
|
478
|
+
readonly required: true;
|
|
479
|
+
};
|
|
480
|
+
readonly onChange: {
|
|
481
|
+
readonly kind: "handler";
|
|
482
|
+
readonly description: "Called with the new checked state. The set tool drives a real click, so this runs for agent changes too.";
|
|
483
|
+
readonly required: true;
|
|
484
|
+
};
|
|
485
|
+
readonly hint: {
|
|
486
|
+
readonly kind: "string";
|
|
487
|
+
readonly description: "Guidance shown under the box and carried into the agent view. Replaced by error while one is set.";
|
|
488
|
+
};
|
|
489
|
+
readonly error: {
|
|
490
|
+
readonly kind: "string";
|
|
491
|
+
readonly description: "A validation message. Marks the box invalid for people, screen readers, and agents alike.";
|
|
492
|
+
};
|
|
493
|
+
readonly name: {
|
|
494
|
+
readonly kind: "string";
|
|
495
|
+
readonly description: "The native form name submitted with the surrounding form.";
|
|
496
|
+
};
|
|
497
|
+
readonly disabled: {
|
|
498
|
+
readonly kind: "boolean";
|
|
499
|
+
readonly description: "Disable the box and unregister its set tool.";
|
|
500
|
+
readonly default: false;
|
|
501
|
+
};
|
|
502
|
+
readonly required: {
|
|
503
|
+
readonly kind: "boolean";
|
|
504
|
+
readonly description: "Mark the box as one that must be checked.";
|
|
505
|
+
readonly default: false;
|
|
506
|
+
};
|
|
507
|
+
readonly agentName: {
|
|
508
|
+
readonly kind: "string";
|
|
509
|
+
readonly description: "Override the label used to derive the tool name, when two boxes on a page would otherwise collide.";
|
|
510
|
+
};
|
|
511
|
+
readonly agentTool: {
|
|
512
|
+
readonly kind: "boolean";
|
|
513
|
+
readonly description: "Set false to render the box without registering a set tool.";
|
|
514
|
+
readonly default: true;
|
|
515
|
+
};
|
|
516
|
+
};
|
|
517
|
+
readonly state: {
|
|
518
|
+
readonly checked: {
|
|
519
|
+
readonly description: "Present while the box is checked.";
|
|
520
|
+
readonly attribute: "data-sprint-checked";
|
|
521
|
+
};
|
|
522
|
+
readonly disabled: {
|
|
523
|
+
readonly description: "Present when the box cannot be changed.";
|
|
524
|
+
readonly attribute: "data-sprint-disabled";
|
|
525
|
+
};
|
|
526
|
+
readonly required: {
|
|
527
|
+
readonly description: "Present when the box must be checked.";
|
|
528
|
+
readonly attribute: "data-sprint-required";
|
|
529
|
+
};
|
|
530
|
+
readonly invalid: {
|
|
531
|
+
readonly description: "Present while an error is set.";
|
|
532
|
+
readonly attribute: "data-sprint-invalid";
|
|
533
|
+
};
|
|
534
|
+
};
|
|
535
|
+
readonly tools: {
|
|
536
|
+
readonly set: AgentToolSpec;
|
|
537
|
+
};
|
|
538
|
+
readonly agentView: {
|
|
539
|
+
readonly example: "- **Checkbox** \"Accept the terms\" [required] → tool `set-accept-the-terms`\n - part `error` \"Required before launch\"";
|
|
540
|
+
};
|
|
541
|
+
readonly examples: readonly [{
|
|
542
|
+
readonly title: "A consent box";
|
|
543
|
+
readonly description: "In agent view the box renders as one control; pressing it toggles, while the set tool states the end state.";
|
|
544
|
+
readonly code: "<Checkbox\n label=\"Accept the terms\"\n checked={accepted}\n onChange={setAccepted}\n required\n/>";
|
|
545
|
+
}, {
|
|
546
|
+
readonly title: "An error on a required box";
|
|
547
|
+
readonly description: "The error marks the box invalid on every surface until it clears.";
|
|
548
|
+
readonly code: "<Checkbox\n label=\"Confirm the manifest\"\n checked={confirmed}\n onChange={setConfirmed}\n required\n error=\"Confirm before launch.\"\n/>";
|
|
549
|
+
}, {
|
|
550
|
+
readonly title: "A disabled box";
|
|
551
|
+
readonly description: "Disabled unregisters the tool, so an agent cannot change what a person could not.";
|
|
552
|
+
readonly code: "<Checkbox\n label=\"Telemetry\"\n checked\n disabled\n onChange={setTelemetry}\n/>";
|
|
553
|
+
}];
|
|
554
|
+
readonly a11y: {
|
|
555
|
+
readonly role: "checkbox";
|
|
556
|
+
readonly keyboard: readonly ["Space toggles", "Tab moves through the box"];
|
|
557
|
+
readonly notes: "A native checkbox input wrapped by its label, visually replaced by a keylined square. Focus draws an offset keyline around the square; errors set aria-invalid and link with aria-describedby.";
|
|
558
|
+
};
|
|
559
|
+
};
|
|
560
|
+
|
|
561
|
+
export declare interface CheckboxProps extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
|
|
562
|
+
label: string;
|
|
563
|
+
checked: boolean;
|
|
564
|
+
onChange: (checked: boolean) => void;
|
|
565
|
+
hint?: string;
|
|
566
|
+
error?: string;
|
|
567
|
+
name?: string;
|
|
568
|
+
disabled?: boolean;
|
|
569
|
+
required?: boolean;
|
|
570
|
+
agentName?: string;
|
|
571
|
+
agentTool?: boolean;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
export declare function clamp(text: string, max: number): string;
|
|
575
|
+
|
|
576
|
+
export declare const CLOSE_DIALOG_TOOL: AgentToolSpec;
|
|
577
|
+
|
|
578
|
+
export declare function CodeBlock(props: CodeBlockProps): JSX.Element;
|
|
579
|
+
|
|
580
|
+
export declare const codeBlockMeta: {
|
|
581
|
+
readonly name: "CodeBlock";
|
|
582
|
+
readonly category: "display";
|
|
583
|
+
readonly summary: "A snippet of code with a caption band and a copy control. In agent view the snippet is carried verbatim as the code part, so an agent reads the source instead of the highlighting.";
|
|
584
|
+
readonly whenToUse: "Use it for any code a reader is meant to run or copy: an install snippet, an example, a generated tool descriptor. It scrolls horizontally rather than wrapping, so a long line stays a long line.";
|
|
585
|
+
readonly whenNotToUse: "Do not use it for a short inline identifier inside a sentence; use a code element inside Text. Do not use it for prose you want to look technical.";
|
|
586
|
+
readonly status: "experimental";
|
|
587
|
+
readonly props: {
|
|
588
|
+
readonly code: {
|
|
589
|
+
readonly kind: "string";
|
|
590
|
+
readonly description: "The snippet, verbatim. Newlines are preserved and this exact string is what an agent reads and what the copy control copies.";
|
|
591
|
+
readonly required: true;
|
|
592
|
+
};
|
|
593
|
+
readonly caption: {
|
|
594
|
+
readonly kind: "string";
|
|
595
|
+
readonly description: "What the snippet is, shown in the band above it and used as the block's accessible name. Defaults to the language.";
|
|
596
|
+
};
|
|
597
|
+
readonly language: {
|
|
598
|
+
readonly kind: "enum";
|
|
599
|
+
readonly description: "What the snippet is written in. Drives the caption default.";
|
|
600
|
+
readonly values: readonly ["tsx", "json", "bash", "text"];
|
|
601
|
+
readonly default: "tsx";
|
|
602
|
+
};
|
|
603
|
+
readonly copyLabel: {
|
|
604
|
+
readonly kind: "string";
|
|
605
|
+
readonly description: "Label for the copy control.";
|
|
606
|
+
readonly default: "Copy";
|
|
607
|
+
};
|
|
608
|
+
};
|
|
609
|
+
readonly state: {
|
|
610
|
+
readonly language: {
|
|
611
|
+
readonly description: "The language the snippet is in.";
|
|
612
|
+
readonly attribute: "data-sprint-language";
|
|
613
|
+
readonly values: readonly ["tsx", "json", "bash", "text"];
|
|
614
|
+
};
|
|
615
|
+
readonly lines: {
|
|
616
|
+
readonly description: "How many lines the snippet has.";
|
|
617
|
+
readonly attribute: "data-sprint-lines";
|
|
618
|
+
};
|
|
619
|
+
readonly copied: {
|
|
620
|
+
readonly description: "Present for a moment after the copy control has put the snippet on the clipboard.";
|
|
621
|
+
readonly attribute: "data-sprint-copied";
|
|
622
|
+
};
|
|
623
|
+
readonly token: {
|
|
624
|
+
readonly description: "On a highlight span: which token class it is. Colour comes from this, so a theme can recolour code without touching the component.";
|
|
625
|
+
readonly attribute: "data-sprint-token";
|
|
626
|
+
readonly values: readonly ["tag", "attr", "string", "keyword", "number", "punct", "comment"];
|
|
627
|
+
};
|
|
628
|
+
};
|
|
629
|
+
readonly agentView: {
|
|
630
|
+
readonly example: "- **CodeBlock** \"install\" [language=bash, lines=1]\n - part `copy` \"Copy\"\n - part `code` \"npm install sprint\"";
|
|
631
|
+
};
|
|
632
|
+
readonly examples: readonly [{
|
|
633
|
+
readonly title: "An example snippet";
|
|
634
|
+
readonly description: "No caption, so the language names the block. It registers no WebMCP tool: an agent has nothing to gain from putting text on a person's clipboard, and it can already read the code.";
|
|
635
|
+
readonly code: "<CodeBlock code={'<Button tone=\"action\">Prepare launch</Button>'} />";
|
|
636
|
+
}, {
|
|
637
|
+
readonly title: "A captioned descriptor";
|
|
638
|
+
readonly code: "<CodeBlock\n caption=\"descriptor\"\n language=\"json\"\n code={JSON.stringify(descriptor, null, 2)}\n/>";
|
|
639
|
+
}];
|
|
640
|
+
readonly a11y: {
|
|
641
|
+
readonly notes: "The frame is a figure named by its caption. The copy control is a real button and reports back in its own label once the snippet is on the clipboard; the label swap is a polite live region, so a screen reader hears the confirmation too.";
|
|
642
|
+
};
|
|
643
|
+
};
|
|
644
|
+
|
|
645
|
+
export declare interface CodeBlockProps extends ComponentPropsWithRef<"figure"> {
|
|
646
|
+
code: string;
|
|
647
|
+
caption?: string;
|
|
648
|
+
language?: CodeLanguage;
|
|
649
|
+
copyLabel?: string;
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
export declare type CodeLanguage = "tsx" | "json" | "bash" | "text";
|
|
653
|
+
|
|
654
|
+
export declare const COMPONENT_ATTRIBUTE = "data-sprint";
|
|
655
|
+
|
|
656
|
+
export declare const defaultAgentFormat: AgentFormatter;
|
|
657
|
+
|
|
658
|
+
export declare function defineAgentMeta<const T extends AgentComponentMeta>(meta: T): T;
|
|
659
|
+
|
|
660
|
+
export declare interface DescriptionItem {
|
|
661
|
+
term: ReactNode;
|
|
662
|
+
description: ReactNode;
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
export declare function DescriptionList(props: DescriptionListProps): JSX.Element;
|
|
666
|
+
|
|
667
|
+
export declare const descriptionListMeta: {
|
|
668
|
+
readonly name: "DescriptionList";
|
|
669
|
+
readonly category: "display";
|
|
670
|
+
readonly summary: "Labelled term–description pairs for the details of one thing: metadata, settings, profile fields.";
|
|
671
|
+
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.";
|
|
672
|
+
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.";
|
|
673
|
+
readonly status: "experimental";
|
|
674
|
+
readonly props: {
|
|
675
|
+
readonly label: {
|
|
676
|
+
readonly kind: "string";
|
|
677
|
+
readonly description: "The accessible name for the list, describing what entity it details.";
|
|
678
|
+
readonly required: true;
|
|
679
|
+
};
|
|
680
|
+
readonly items: {
|
|
681
|
+
readonly kind: "array";
|
|
682
|
+
readonly description: "The pairs, in order. Each item is { term, description }; both are inline content flattened to text for the agent view.";
|
|
683
|
+
readonly required: true;
|
|
684
|
+
};
|
|
685
|
+
readonly emptyLabel: {
|
|
686
|
+
readonly kind: "string";
|
|
687
|
+
readonly description: "Text shown when items is empty. The region keeps its frame.";
|
|
688
|
+
readonly default: "Empty";
|
|
689
|
+
};
|
|
690
|
+
};
|
|
691
|
+
readonly state: {
|
|
692
|
+
readonly items: {
|
|
693
|
+
readonly description: "The number of pairs.";
|
|
694
|
+
readonly attribute: "data-sprint-items";
|
|
695
|
+
};
|
|
696
|
+
readonly empty: {
|
|
697
|
+
readonly description: "Present when there are no pairs.";
|
|
698
|
+
readonly attribute: "data-sprint-empty";
|
|
699
|
+
};
|
|
700
|
+
};
|
|
701
|
+
readonly agentView: {
|
|
702
|
+
readonly example: "- **DescriptionList** \"Key sk-prod\" [items=2]";
|
|
703
|
+
};
|
|
704
|
+
readonly examples: readonly [{
|
|
705
|
+
readonly title: "Token metadata";
|
|
706
|
+
readonly code: "<DescriptionList\n label=\"Key sk-prod\"\n items={[\n { term: \"Created\", description: \"2026-08-01\" },\n { term: \"Last used\", description: \"2 hours ago\" },\n { term: \"Scopes\", description: \"read, write\" },\n ]}\n/>";
|
|
707
|
+
}, {
|
|
708
|
+
readonly title: "An empty list";
|
|
709
|
+
readonly description: "The region keeps its frame and states its emptiness.";
|
|
710
|
+
readonly code: "<DescriptionList label=\"Recovery codes\" items={[]} emptyLabel=\"None generated\" />";
|
|
711
|
+
}];
|
|
712
|
+
readonly a11y: {
|
|
713
|
+
readonly role: "definition list";
|
|
714
|
+
readonly notes: "Renders a native dl with an aria-label. Terms are dt elements and descriptions dd, so structure survives without styling.";
|
|
715
|
+
};
|
|
716
|
+
};
|
|
717
|
+
|
|
718
|
+
export declare interface DescriptionListProps extends ComponentPropsWithRef<"dl"> {
|
|
719
|
+
label: string;
|
|
720
|
+
items: readonly DescriptionItem[];
|
|
721
|
+
emptyLabel?: string;
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
export declare function Dialog(props: DialogProps): JSX.Element | null;
|
|
725
|
+
|
|
726
|
+
export declare type DialogHeadingLevel = 2 | 3 | 4;
|
|
727
|
+
|
|
728
|
+
export declare const dialogMeta: {
|
|
729
|
+
readonly name: "Dialog";
|
|
730
|
+
readonly category: "overlay";
|
|
731
|
+
readonly summary: "A modal that interrupts the page for one decision: confirm a destructive action, complete a short step, acknowledge something before continuing.";
|
|
732
|
+
readonly whenToUse: "Use when the page must not continue until the person decides: confirming a revocation or deletion, a short focused form, a required acknowledgement. Keep one decision per dialog and put its actions inside as ordinary Buttons; tools registered inside the dialog compose their names under its label.";
|
|
733
|
+
readonly whenNotToUse: "Do not use for status messages; that is an Alert. Do not use for anything the person should be able to ignore; a modal takes the whole page hostage. Do not nest dialogs.";
|
|
734
|
+
readonly status: "experimental";
|
|
735
|
+
readonly props: {
|
|
736
|
+
readonly label: {
|
|
737
|
+
readonly kind: "string";
|
|
738
|
+
readonly description: "The dialog's title. Names the dialog for assistive tech, derives the close tool name, and scopes the names of tools registered inside.";
|
|
739
|
+
readonly required: true;
|
|
740
|
+
};
|
|
741
|
+
readonly open: {
|
|
742
|
+
readonly kind: "boolean";
|
|
743
|
+
readonly description: "Whether the dialog is shown. A closed dialog renders nothing at all; the page owns this state.";
|
|
744
|
+
readonly required: true;
|
|
745
|
+
};
|
|
746
|
+
readonly onClose: {
|
|
747
|
+
readonly kind: "handler";
|
|
748
|
+
readonly description: "Called when the person or an agent asks to close: the close control, Escape, or the close tool. Set open to false in response.";
|
|
749
|
+
readonly required: true;
|
|
750
|
+
};
|
|
751
|
+
readonly children: {
|
|
752
|
+
readonly kind: "node";
|
|
753
|
+
readonly description: "The dialog's contents. Ordinary components; anything actionable registers its own tools, scoped under the dialog's label.";
|
|
754
|
+
readonly required: true;
|
|
755
|
+
};
|
|
756
|
+
readonly headingLevel: {
|
|
757
|
+
readonly kind: "enum";
|
|
758
|
+
readonly description: "Render the title as a real heading at this level, joining the page outline.";
|
|
759
|
+
readonly values: readonly ["2", "3", "4"];
|
|
760
|
+
};
|
|
761
|
+
readonly owner: {
|
|
762
|
+
readonly kind: "string";
|
|
763
|
+
readonly description: "The tool name of the control that opened this dialog. Published as data-sprint-owner so a reading agent can attach the dialog to its opener.";
|
|
764
|
+
};
|
|
765
|
+
readonly agentName: {
|
|
766
|
+
readonly kind: "string";
|
|
767
|
+
readonly description: "Override the label used to derive the close tool name.";
|
|
768
|
+
};
|
|
769
|
+
readonly agentTool: {
|
|
770
|
+
readonly kind: "boolean";
|
|
771
|
+
readonly description: "Set false to render without registering the close tool.";
|
|
772
|
+
readonly default: true;
|
|
773
|
+
};
|
|
774
|
+
};
|
|
775
|
+
readonly state: {
|
|
776
|
+
readonly open: {
|
|
777
|
+
readonly description: "Present while the dialog is shown. A closed dialog is absent from the DOM entirely.";
|
|
778
|
+
readonly attribute: "data-sprint-open";
|
|
779
|
+
};
|
|
780
|
+
};
|
|
781
|
+
readonly tools: {
|
|
782
|
+
readonly close: AgentToolSpec;
|
|
783
|
+
};
|
|
784
|
+
readonly agentView: {
|
|
785
|
+
readonly example: "- **Dialog** \"Revoke key\" [open] with part `close` → tool `close-revoke-key`";
|
|
786
|
+
};
|
|
787
|
+
readonly examples: readonly [{
|
|
788
|
+
readonly title: "A destructive confirmation";
|
|
789
|
+
readonly description: "The confirm Button registers its tool only while the dialog is open, and its name is scoped under the dialog's label.";
|
|
790
|
+
readonly code: "<Dialog label=\"Revoke key\" open={confirming} onClose={() => setConfirming(false)}>\n <Stack gap=\"tight\">\n <Text>The key stops authenticating immediately. This cannot be undone.</Text>\n <Button tone=\"danger\" onClick={revoke}>Revoke sk-prod</Button>\n </Stack>\n</Dialog>";
|
|
791
|
+
}, {
|
|
792
|
+
readonly title: "Owned by its opener";
|
|
793
|
+
readonly description: "Passing the opener's tool name lets a reading agent attach the dialog to the control that produced it.";
|
|
794
|
+
readonly code: "<Dialog\n label=\"Rotate secret\"\n open={rotating}\n owner=\"press-rotate-secret\"\n onClose={() => setRotating(false)}\n>\n <Text>The current secret keeps working for one hour.</Text>\n</Dialog>";
|
|
795
|
+
}];
|
|
796
|
+
readonly a11y: {
|
|
797
|
+
readonly role: "dialog";
|
|
798
|
+
readonly keyboard: readonly ["Escape closes", "Tab cycles within the dialog"];
|
|
799
|
+
readonly notes: "A native dialog element shown with showModal, so focus containment, inerting the page behind, and Escape come from the browser. The title names the dialog via aria-label.";
|
|
800
|
+
};
|
|
801
|
+
};
|
|
802
|
+
|
|
803
|
+
export declare interface DialogProps extends Omit<ComponentPropsWithRef<"dialog">, "onClose" | "open"> {
|
|
804
|
+
label: string;
|
|
805
|
+
open: boolean;
|
|
806
|
+
onClose: () => void;
|
|
807
|
+
headingLevel?: DialogHeadingLevel;
|
|
808
|
+
owner?: string;
|
|
809
|
+
agentName?: string;
|
|
810
|
+
agentTool?: boolean;
|
|
811
|
+
}
|
|
812
|
+
|
|
813
|
+
export declare const DISMISS_ALERT_TOOL: AgentToolSpec;
|
|
814
|
+
|
|
815
|
+
export declare const FILL_TEXTAREA_TOOL: AgentToolSpec;
|
|
816
|
+
|
|
817
|
+
export declare const FILL_TOOL: AgentToolSpec;
|
|
818
|
+
|
|
819
|
+
export declare function getAgentMeta(name: string): AgentComponentMeta | undefined;
|
|
820
|
+
|
|
821
|
+
export declare function getModelContext(): ModelContext | null;
|
|
822
|
+
|
|
823
|
+
export declare function Heading(props: HeadingProps): JSX.Element;
|
|
824
|
+
|
|
825
|
+
export declare type HeadingLevel = 1 | 2 | 3 | 4;
|
|
826
|
+
|
|
827
|
+
export declare const headingMeta: {
|
|
828
|
+
readonly name: "Heading";
|
|
829
|
+
readonly category: "typography";
|
|
830
|
+
readonly summary: "A section title, rendered as a real h element at the level you pick so it joins the document outline.";
|
|
831
|
+
readonly whenToUse: "Use it for the title of a page or of a region inside one, and keep levels in document order so the outline an agent or a screen reader builds is the outline you meant.";
|
|
832
|
+
readonly whenNotToUse: "Do not use it for the label on a bordered region; Panel takes a label prop, draws its own header, and joins the outline through its headingLevel prop. Do not pick a level for its size, only for its place in the outline.";
|
|
833
|
+
readonly status: "experimental";
|
|
834
|
+
readonly props: {
|
|
835
|
+
readonly children: {
|
|
836
|
+
readonly kind: "node";
|
|
837
|
+
readonly description: "The title. Keep it short; long titles truncate in chrome.";
|
|
838
|
+
readonly required: true;
|
|
839
|
+
};
|
|
840
|
+
readonly level: {
|
|
841
|
+
readonly kind: "enum";
|
|
842
|
+
readonly description: "Outline depth, rendered as the matching h element. 1 is the page title and there should be one per page.";
|
|
843
|
+
readonly values: readonly ["1", "2", "3", "4"];
|
|
844
|
+
readonly default: "2";
|
|
845
|
+
};
|
|
846
|
+
};
|
|
847
|
+
readonly state: {
|
|
848
|
+
readonly level: {
|
|
849
|
+
readonly description: "The outline depth, and so the type voice in use.";
|
|
850
|
+
readonly attribute: "data-sprint-level";
|
|
851
|
+
readonly values: readonly ["1", "2", "3", "4"];
|
|
852
|
+
};
|
|
853
|
+
};
|
|
854
|
+
readonly agentView: {
|
|
855
|
+
readonly example: "- **Heading** \"WebMCP tools\" [level=2]";
|
|
856
|
+
};
|
|
857
|
+
readonly examples: readonly [{
|
|
858
|
+
readonly title: "A page title";
|
|
859
|
+
readonly code: "<Heading level={1}>Button</Heading>";
|
|
860
|
+
}, {
|
|
861
|
+
readonly title: "A section title";
|
|
862
|
+
readonly description: "The default level, for a region inside a page.";
|
|
863
|
+
readonly code: "<Heading>Every variant</Heading>";
|
|
864
|
+
}];
|
|
865
|
+
};
|
|
866
|
+
|
|
867
|
+
export declare interface HeadingProps extends ComponentPropsWithRef<"h2"> {
|
|
868
|
+
level?: HeadingLevel;
|
|
869
|
+
}
|
|
870
|
+
|
|
871
|
+
export declare function isModelContextAvailable(): boolean;
|
|
872
|
+
|
|
873
|
+
export declare interface JsonSchemaObject {
|
|
874
|
+
type: "object";
|
|
875
|
+
properties: Record<string, JsonSchemaProperty>;
|
|
876
|
+
required?: readonly string[];
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
export declare interface JsonSchemaProperty {
|
|
880
|
+
type: JsonSchemaType;
|
|
881
|
+
description?: string;
|
|
882
|
+
enum?: readonly string[];
|
|
883
|
+
minimum?: number;
|
|
884
|
+
default?: string | number | boolean;
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
export declare type JsonSchemaType = "string" | "number" | "integer" | "boolean";
|
|
888
|
+
|
|
889
|
+
export declare function Link(props: LinkProps): JSX.Element;
|
|
890
|
+
|
|
891
|
+
export declare const linkMeta: {
|
|
892
|
+
readonly name: "Link";
|
|
893
|
+
readonly category: "navigation";
|
|
894
|
+
readonly summary: "A navigation link. It publishes its destination as state, so an agent reading the page in text learns the URL rather than having to click to find out, and it renders a real anchor in both views.";
|
|
895
|
+
readonly whenToUse: "Use it for anything that changes the address: a nav item, a cross-reference, a link out to a specification. Set active on the item matching the current route so the agent view and the human view agree about where you are. Under a client-side router, pass an onClick that prevents default and navigates; the handler rides the anchor in both views, so agent clicks and open tools go through the router too.";
|
|
896
|
+
readonly whenNotToUse: "Do not use it for an action that stays on the page; that is a Button. Do not register a tool on ordinary navigation: an agent can already reach a URL, and a page of links would flood its tool list for no gain.";
|
|
897
|
+
readonly status: "experimental";
|
|
898
|
+
readonly props: {
|
|
899
|
+
readonly href: {
|
|
900
|
+
readonly kind: "string";
|
|
901
|
+
readonly description: "The destination. Published as data-sprint-href and carried in the agent view, so the URL is readable without a click.";
|
|
902
|
+
readonly required: true;
|
|
903
|
+
};
|
|
904
|
+
readonly children: {
|
|
905
|
+
readonly kind: "node";
|
|
906
|
+
readonly description: "The link text. It names the destination, so prefer the page's name over here or read more.";
|
|
907
|
+
readonly required: true;
|
|
908
|
+
};
|
|
909
|
+
readonly active: {
|
|
910
|
+
readonly kind: "boolean";
|
|
911
|
+
readonly description: "Mark the link as the current location. Sets aria-current so a screen reader and an agent learn it the same way.";
|
|
912
|
+
readonly default: false;
|
|
913
|
+
};
|
|
914
|
+
readonly external: {
|
|
915
|
+
readonly kind: "boolean";
|
|
916
|
+
readonly description: "Mark a destination outside this app. Opens in a new context and adds the usual rel protections.";
|
|
917
|
+
readonly default: false;
|
|
918
|
+
};
|
|
919
|
+
readonly agentTool: {
|
|
920
|
+
readonly kind: "boolean";
|
|
921
|
+
readonly description: "Set true to register an open tool for this link. Off by default: navigation is reachable by URL, so a tool per link is cost without benefit.";
|
|
922
|
+
readonly default: false;
|
|
923
|
+
};
|
|
924
|
+
readonly agentName: {
|
|
925
|
+
readonly kind: "string";
|
|
926
|
+
readonly description: "Override the label used to derive the tool name, for icon-only links or two links with the same text.";
|
|
927
|
+
};
|
|
928
|
+
};
|
|
929
|
+
readonly state: {
|
|
930
|
+
readonly href: {
|
|
931
|
+
readonly description: "Where this link goes.";
|
|
932
|
+
readonly attribute: "data-sprint-href";
|
|
933
|
+
};
|
|
934
|
+
readonly active: {
|
|
935
|
+
readonly description: "Present when this link is the current location.";
|
|
936
|
+
readonly attribute: "data-sprint-active";
|
|
937
|
+
};
|
|
938
|
+
readonly external: {
|
|
939
|
+
readonly description: "Present when the destination is outside this app.";
|
|
940
|
+
readonly attribute: "data-sprint-external";
|
|
941
|
+
};
|
|
942
|
+
};
|
|
943
|
+
readonly tools: {
|
|
944
|
+
readonly open: AgentToolSpec;
|
|
945
|
+
};
|
|
946
|
+
readonly agentView: {
|
|
947
|
+
readonly example: "- **Link** \"Button\" [active, href=#/Button]";
|
|
948
|
+
};
|
|
949
|
+
readonly examples: readonly [{
|
|
950
|
+
readonly title: "A nav item";
|
|
951
|
+
readonly code: "<Link href=\"#/Button\" active={route === \"Button\"}>Button</Link>";
|
|
952
|
+
}, {
|
|
953
|
+
readonly title: "A link out";
|
|
954
|
+
readonly code: "<Link href=\"https://developer.chrome.com/docs/ai/webmcp\" external>\n Chrome docs\n</Link>";
|
|
955
|
+
}, {
|
|
956
|
+
readonly title: "A link an agent may follow itself";
|
|
957
|
+
readonly description: "Opting in is for the one link that completes a task, not for a nav list.";
|
|
958
|
+
readonly code: "<Link href=\"#/checkout\" agentTool>Go to checkout</Link>";
|
|
959
|
+
}];
|
|
960
|
+
readonly a11y: {
|
|
961
|
+
readonly role: "link";
|
|
962
|
+
readonly keyboard: readonly ["Enter follows the link"];
|
|
963
|
+
readonly notes: "active sets aria-current=page. External links open in a new context with rel=noreferrer noopener, and carry their outward mark as a pseudo-element with empty alternative text so it never reaches the accessible name or the tool name. Inside Text a link is underlined all the time, so colour is never the only thing distinguishing it from the prose around it.";
|
|
964
|
+
};
|
|
965
|
+
};
|
|
966
|
+
|
|
967
|
+
export declare interface LinkProps extends ComponentPropsWithRef<"a"> {
|
|
968
|
+
href: string;
|
|
969
|
+
active?: boolean;
|
|
970
|
+
external?: boolean;
|
|
971
|
+
agentTool?: boolean;
|
|
972
|
+
agentName?: string;
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
export declare function List(props: ListProps): JSX.Element;
|
|
976
|
+
|
|
977
|
+
export declare function listAgentMeta(): AgentComponentMeta[];
|
|
978
|
+
|
|
979
|
+
export declare const listMeta: {
|
|
980
|
+
readonly name: "List";
|
|
981
|
+
readonly category: "display";
|
|
982
|
+
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.";
|
|
983
|
+
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.";
|
|
984
|
+
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.";
|
|
985
|
+
readonly status: "experimental";
|
|
986
|
+
readonly props: {
|
|
987
|
+
readonly label: {
|
|
988
|
+
readonly kind: "string";
|
|
989
|
+
readonly description: "What the list is a list of. Names it for a screen reader and for the agent view.";
|
|
990
|
+
readonly required: true;
|
|
991
|
+
};
|
|
992
|
+
readonly items: {
|
|
993
|
+
readonly kind: "array";
|
|
994
|
+
readonly description: "The items in order. Inline content, not components: each is flattened to text for the agent view.";
|
|
995
|
+
readonly required: true;
|
|
996
|
+
};
|
|
997
|
+
readonly ordered: {
|
|
998
|
+
readonly kind: "boolean";
|
|
999
|
+
readonly description: "Number the items instead of bulleting them. Use it when the order is the point.";
|
|
1000
|
+
readonly default: false;
|
|
1001
|
+
};
|
|
1002
|
+
readonly emptyLabel: {
|
|
1003
|
+
readonly kind: "string";
|
|
1004
|
+
readonly description: "What the list says when it has no items.";
|
|
1005
|
+
readonly default: "Empty";
|
|
1006
|
+
};
|
|
1007
|
+
};
|
|
1008
|
+
readonly state: {
|
|
1009
|
+
readonly items: {
|
|
1010
|
+
readonly description: "How many items the list has.";
|
|
1011
|
+
readonly attribute: "data-sprint-items";
|
|
1012
|
+
};
|
|
1013
|
+
readonly ordered: {
|
|
1014
|
+
readonly description: "Present when the items are numbered rather than bulleted.";
|
|
1015
|
+
readonly attribute: "data-sprint-ordered";
|
|
1016
|
+
};
|
|
1017
|
+
readonly empty: {
|
|
1018
|
+
readonly description: "Present when the list has no items.";
|
|
1019
|
+
readonly attribute: "data-sprint-empty";
|
|
1020
|
+
};
|
|
1021
|
+
readonly index: {
|
|
1022
|
+
readonly description: "On an item: its 1-based position in the list.";
|
|
1023
|
+
readonly attribute: "data-sprint-index";
|
|
1024
|
+
};
|
|
1025
|
+
};
|
|
1026
|
+
readonly agentView: {
|
|
1027
|
+
readonly example: "- **List** \"Tool rules\" [items=1]\n - part `item` \"One tool, one action.\" [index=1]";
|
|
1028
|
+
};
|
|
1029
|
+
readonly examples: readonly [{
|
|
1030
|
+
readonly title: "A list of rules";
|
|
1031
|
+
readonly code: "<List\n label=\"Tool rules\"\n items={[\n <>\n <strong>One tool, one action.</strong> Overlapping tools make selection\n harder.\n </>,\n ]}\n/>";
|
|
1032
|
+
}, {
|
|
1033
|
+
readonly title: "A numbered sequence";
|
|
1034
|
+
readonly code: "<List\n ordered\n label=\"Steps\"\n items={[\"Register the tool.\", \"Drive the DOM.\", \"Return the new state.\"]}\n/>";
|
|
1035
|
+
}];
|
|
1036
|
+
readonly a11y: {
|
|
1037
|
+
readonly role: "list";
|
|
1038
|
+
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.";
|
|
1039
|
+
};
|
|
1040
|
+
};
|
|
1041
|
+
|
|
1042
|
+
export declare interface ListProps extends ComponentPropsWithRef<"ul"> {
|
|
1043
|
+
label: string;
|
|
1044
|
+
items: readonly ReactNode[];
|
|
1045
|
+
ordered?: boolean;
|
|
1046
|
+
emptyLabel?: string;
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
export declare interface MarkdownOptions {
|
|
1050
|
+
includeSummary?: boolean;
|
|
1051
|
+
}
|
|
1052
|
+
|
|
1053
|
+
export declare function MetaLine(props: MetaLineProps): JSX.Element | null;
|
|
1054
|
+
|
|
1055
|
+
export declare interface MetaLineEntry {
|
|
1056
|
+
term: string;
|
|
1057
|
+
detail: string;
|
|
1058
|
+
}
|
|
1059
|
+
|
|
1060
|
+
export declare const metaLineMeta: {
|
|
1061
|
+
readonly name: "MetaLine";
|
|
1062
|
+
readonly category: "display";
|
|
1063
|
+
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.";
|
|
1064
|
+
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.";
|
|
1065
|
+
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.";
|
|
1066
|
+
readonly status: "experimental";
|
|
1067
|
+
readonly props: {
|
|
1068
|
+
readonly entries: {
|
|
1069
|
+
readonly kind: "array";
|
|
1070
|
+
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.";
|
|
1071
|
+
readonly required: true;
|
|
1072
|
+
};
|
|
1073
|
+
};
|
|
1074
|
+
readonly state: {
|
|
1075
|
+
readonly entries: {
|
|
1076
|
+
readonly description: "How many term–detail pairs the line carries.";
|
|
1077
|
+
readonly attribute: "data-sprint-entries";
|
|
1078
|
+
};
|
|
1079
|
+
};
|
|
1080
|
+
readonly agentView: {
|
|
1081
|
+
readonly example: "- **MetaLine** \"SERIAL: NU-TYPE-CORE-A1 / ISSUED: 2744.07.22\" [entries=2]";
|
|
1082
|
+
};
|
|
1083
|
+
readonly examples: readonly [{
|
|
1084
|
+
readonly title: "A build strip";
|
|
1085
|
+
readonly description: "The manifest voice: uppercase mono, slash-separated, terms muted and details in ink.";
|
|
1086
|
+
readonly code: "<MetaLine\n entries={[\n { term: \"Serial\", detail: \"NU-TYPE-CORE-A1\" },\n { term: \"Issued\", detail: \"2744.07.22\" },\n ]}\n/>";
|
|
1087
|
+
}, {
|
|
1088
|
+
readonly title: "Version chrome for a footer";
|
|
1089
|
+
readonly description: "The line an app pins under its content or into a Shell rail.";
|
|
1090
|
+
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/>";
|
|
1091
|
+
}];
|
|
1092
|
+
readonly a11y: {
|
|
1093
|
+
readonly role: "paragraph";
|
|
1094
|
+
readonly notes: "The separators are real text, so the accessible name is the same line the agent view carries. Nothing in the line is interactive.";
|
|
1095
|
+
};
|
|
1096
|
+
};
|
|
1097
|
+
|
|
1098
|
+
export declare interface MetaLineProps extends ComponentPropsWithRef<"p"> {
|
|
1099
|
+
entries: readonly MetaLineEntry[];
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
export declare interface ModelContext {
|
|
1103
|
+
registerTool: (descriptor: ToolDescriptor, options?: RegisterToolOptions) => Promise<void> | void;
|
|
1104
|
+
getTools?: (options?: {
|
|
1105
|
+
fromOrigins?: readonly string[];
|
|
1106
|
+
}) => Promise<readonly ToolDescriptor[]>;
|
|
1107
|
+
executeTool?: (tool: ToolDescriptor, inputJson: string, options?: {
|
|
1108
|
+
signal?: AbortSignal;
|
|
1109
|
+
}) => Promise<string | null>;
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
export declare function Nav(props: NavProps): JSX.Element;
|
|
1113
|
+
|
|
1114
|
+
export declare function NavGroup(props: NavGroupProps): JSX.Element;
|
|
1115
|
+
|
|
1116
|
+
export declare const navGroupMeta: {
|
|
1117
|
+
readonly name: "NavGroup";
|
|
1118
|
+
readonly category: "navigation";
|
|
1119
|
+
readonly summary: "A labelled cluster of links inside a Nav. The label names the group for screen readers and agents alike.";
|
|
1120
|
+
readonly whenToUse: "Use it when a Nav holds more than one kind of destination: guides versus components, product versus account. The label tells every reader, including an agent scanning for the right link, what the links below it have in common.";
|
|
1121
|
+
readonly whenNotToUse: "Do not use it outside a Nav; on its own it is just a heading over links, which Panel does better. Do not nest groups; one level of grouping is all a sidebar can carry.";
|
|
1122
|
+
readonly status: "experimental";
|
|
1123
|
+
readonly props: {
|
|
1124
|
+
readonly label: {
|
|
1125
|
+
readonly kind: "string";
|
|
1126
|
+
readonly description: "What the links in this group have in common. Rendered as the rubric and as the group's accessible name.";
|
|
1127
|
+
readonly required: true;
|
|
1128
|
+
};
|
|
1129
|
+
readonly children: {
|
|
1130
|
+
readonly kind: "node";
|
|
1131
|
+
readonly description: "The Link components this group collects.";
|
|
1132
|
+
readonly required: true;
|
|
1133
|
+
};
|
|
1134
|
+
};
|
|
1135
|
+
readonly agentView: {
|
|
1136
|
+
readonly example: "- **NavGroup** \"Components\"";
|
|
1137
|
+
};
|
|
1138
|
+
readonly a11y: {
|
|
1139
|
+
readonly role: "group";
|
|
1140
|
+
readonly notes: "The group carries its label as an accessible name, so screen readers announce the rubric when entering the cluster rather than reading an unlabelled run of links.";
|
|
1141
|
+
};
|
|
1142
|
+
readonly relatedComponents: readonly ["Nav", "Link"];
|
|
1143
|
+
readonly examples: readonly [{
|
|
1144
|
+
readonly title: "A labelled group of links";
|
|
1145
|
+
readonly code: "<NavGroup label=\"Reference\">\n <Link href=\"https://developer.chrome.com/docs/ai/webmcp\" external>\n Chrome docs\n </Link>\n <Link href=\"https://github.com/webmachinelearning/webmcp\" external>\n Specification\n </Link>\n</NavGroup>";
|
|
1146
|
+
}];
|
|
1147
|
+
};
|
|
1148
|
+
|
|
1149
|
+
export declare interface NavGroupProps extends ComponentPropsWithRef<"div"> {
|
|
1150
|
+
label: string;
|
|
1151
|
+
}
|
|
1152
|
+
|
|
1153
|
+
export declare const navMeta: {
|
|
1154
|
+
readonly name: "Nav";
|
|
1155
|
+
readonly category: "navigation";
|
|
1156
|
+
readonly summary: "A labelled navigation landmark: the region that holds a page's links to elsewhere.";
|
|
1157
|
+
readonly whenToUse: "Use it around any set of links whose job is getting around the app: a sidebar, a table of contents, a footer link block. The label names the landmark, so a person navigating by landmark, a screen reader, and an agent reading the page all know these links are wayfinding rather than content. Group related links inside it with NavGroup.";
|
|
1158
|
+
readonly whenNotToUse: "Do not use it for a link that sits inside prose; a bare Link is already readable there. Do not use it for a set of actions that stay on the page; those are Buttons in a Stack.";
|
|
1159
|
+
readonly status: "experimental";
|
|
1160
|
+
readonly props: {
|
|
1161
|
+
readonly label: {
|
|
1162
|
+
readonly kind: "string";
|
|
1163
|
+
readonly description: "What this navigation is for. Rendered as the landmark's accessible name, so two navs on one page stay distinguishable.";
|
|
1164
|
+
readonly required: true;
|
|
1165
|
+
};
|
|
1166
|
+
readonly children: {
|
|
1167
|
+
readonly kind: "node";
|
|
1168
|
+
readonly description: "Link components, or NavGroup components wrapping them.";
|
|
1169
|
+
readonly required: true;
|
|
1170
|
+
};
|
|
1171
|
+
};
|
|
1172
|
+
readonly agentView: {
|
|
1173
|
+
readonly example: "- **Nav** \"Workbench\"";
|
|
1174
|
+
};
|
|
1175
|
+
readonly a11y: {
|
|
1176
|
+
readonly role: "navigation";
|
|
1177
|
+
readonly notes: "The label is the landmark's accessible name via aria-label. Active links inside it carry aria-current=page, so the current location is announced without any styling cue.";
|
|
1178
|
+
};
|
|
1179
|
+
readonly relatedComponents: readonly ["NavGroup", "Link", "Shell"];
|
|
1180
|
+
readonly examples: readonly [{
|
|
1181
|
+
readonly title: "A grouped sidebar nav";
|
|
1182
|
+
readonly description: "Each NavGroup names a cluster of destinations. The active link carries the current-page mark in every view.";
|
|
1183
|
+
readonly code: "<Nav label=\"Docs\">\n <NavGroup label=\"Guides\">\n <Link href=\"#/guide/webmcp\">WebMCP</Link>\n </NavGroup>\n <NavGroup label=\"Components\">\n <Link href=\"#/Button\" active>Button</Link>\n <Link href=\"#/Table\">Table</Link>\n </NavGroup>\n</Nav>";
|
|
1184
|
+
}, {
|
|
1185
|
+
readonly title: "A flat nav";
|
|
1186
|
+
readonly description: "A short list of destinations needs no grouping.";
|
|
1187
|
+
readonly code: "<Nav label=\"Site\">\n <Link href=\"#/\">Home</Link>\n <Link href=\"#/pricing\">Pricing</Link>\n</Nav>";
|
|
1188
|
+
}];
|
|
1189
|
+
};
|
|
1190
|
+
|
|
1191
|
+
export declare interface NavProps extends ComponentPropsWithRef<"nav"> {
|
|
1192
|
+
label: string;
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
export declare interface NodeInput {
|
|
1196
|
+
component: string;
|
|
1197
|
+
label?: string | undefined;
|
|
1198
|
+
summary?: string | undefined;
|
|
1199
|
+
tool?: string | undefined;
|
|
1200
|
+
owner?: string | undefined;
|
|
1201
|
+
region?: boolean | undefined;
|
|
1202
|
+
state?: Record<string, AgentStateValue | false | null | undefined>;
|
|
1203
|
+
parts?: AgentPart[];
|
|
1204
|
+
}
|
|
1205
|
+
|
|
1206
|
+
export declare function nodeLine(node: AgentNode): string;
|
|
1207
|
+
|
|
1208
|
+
export declare const OPEN_CARD_TOOL: AgentToolSpec;
|
|
1209
|
+
|
|
1210
|
+
export declare const OPEN_LINK_TOOL: AgentToolSpec;
|
|
1211
|
+
|
|
1212
|
+
export declare const OWNER_ATTRIBUTE = "data-sprint-owner";
|
|
1213
|
+
|
|
1214
|
+
export declare function PageHeader(props: PageHeaderProps): JSX.Element;
|
|
1215
|
+
|
|
1216
|
+
export declare const pageHeaderMeta: {
|
|
1217
|
+
readonly name: "PageHeader";
|
|
1218
|
+
readonly category: "layout";
|
|
1219
|
+
readonly summary: "The top of a page: its h1 title, the Tag chips that classify it, an optional page-level control, and a lede underneath.";
|
|
1220
|
+
readonly whenToUse: "Use it once per page, as the first thing inside the content region. The label becomes the page's only h1, so the document outline starts here. Put status or category Tags in tags, a control that affects the whole page in actions, and the introductory sentence or two in children as Text.";
|
|
1221
|
+
readonly whenNotToUse: "Do not use it for a section within a page; that is a Panel with a headingLevel. Do not put navigation in actions; the page's links belong in a Nav.";
|
|
1222
|
+
readonly status: "experimental";
|
|
1223
|
+
readonly props: {
|
|
1224
|
+
readonly label: {
|
|
1225
|
+
readonly kind: "string";
|
|
1226
|
+
readonly description: "The page title. Rendered as the page's h1.";
|
|
1227
|
+
readonly required: true;
|
|
1228
|
+
};
|
|
1229
|
+
readonly tags: {
|
|
1230
|
+
readonly kind: "node";
|
|
1231
|
+
readonly description: "Tag components that classify the page, rendered on the title line. Keep it to two or three.";
|
|
1232
|
+
};
|
|
1233
|
+
readonly actions: {
|
|
1234
|
+
readonly kind: "node";
|
|
1235
|
+
readonly description: "A control that acts on the whole page, rendered at the end of the title line.";
|
|
1236
|
+
};
|
|
1237
|
+
readonly children: {
|
|
1238
|
+
readonly kind: "node";
|
|
1239
|
+
readonly description: "The lede: a Text or two introducing the page.";
|
|
1240
|
+
};
|
|
1241
|
+
};
|
|
1242
|
+
readonly agentView: {
|
|
1243
|
+
readonly example: "- **PageHeader** \"Button\"";
|
|
1244
|
+
};
|
|
1245
|
+
readonly a11y: {
|
|
1246
|
+
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.";
|
|
1247
|
+
};
|
|
1248
|
+
readonly relatedComponents: readonly ["Panel", "Heading", "Tag"];
|
|
1249
|
+
readonly examples: readonly [{
|
|
1250
|
+
readonly title: "A titled page with a lede";
|
|
1251
|
+
readonly code: "<PageHeader label=\"Reports\">\n <Text>Everything the quarter produced, in one place.</Text>\n</PageHeader>";
|
|
1252
|
+
}, {
|
|
1253
|
+
readonly title: "Status tags and a page-level control";
|
|
1254
|
+
readonly description: "Tags classify the page on the title line; the action slot holds the one control that affects the whole page.";
|
|
1255
|
+
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>";
|
|
1256
|
+
}];
|
|
1257
|
+
};
|
|
1258
|
+
|
|
1259
|
+
export declare interface PageHeaderProps extends ComponentPropsWithRef<"header"> {
|
|
1260
|
+
label: string;
|
|
1261
|
+
tags?: ReactNode;
|
|
1262
|
+
actions?: ReactNode;
|
|
1263
|
+
}
|
|
1264
|
+
|
|
1265
|
+
export declare function paginate(text: string, size: number): string[];
|
|
1266
|
+
|
|
1267
|
+
export declare function Panel(props: PanelProps): JSX.Element;
|
|
1268
|
+
|
|
1269
|
+
declare type PanelHeadingLevel = 2 | 3 | 4;
|
|
1270
|
+
|
|
1271
|
+
export declare const panelMeta: {
|
|
1272
|
+
readonly name: "Panel";
|
|
1273
|
+
readonly category: "layout";
|
|
1274
|
+
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.";
|
|
1275
|
+
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.";
|
|
1276
|
+
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.";
|
|
1277
|
+
readonly status: "experimental";
|
|
1278
|
+
readonly props: {
|
|
1279
|
+
readonly label: {
|
|
1280
|
+
readonly kind: "string";
|
|
1281
|
+
readonly description: "What this region is. Rendered in the header band and used as the region's accessible name.";
|
|
1282
|
+
readonly required: true;
|
|
1283
|
+
};
|
|
1284
|
+
readonly children: {
|
|
1285
|
+
readonly kind: "node";
|
|
1286
|
+
readonly description: "The region's content. An empty panel says it is empty rather than collapsing.";
|
|
1287
|
+
};
|
|
1288
|
+
readonly headingLevel: {
|
|
1289
|
+
readonly kind: "enum";
|
|
1290
|
+
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.";
|
|
1291
|
+
readonly values: readonly ["2", "3", "4"];
|
|
1292
|
+
};
|
|
1293
|
+
readonly actions: {
|
|
1294
|
+
readonly kind: "node";
|
|
1295
|
+
readonly description: "Controls that act on this region, rendered at the end of the header band. Keep it to one or two.";
|
|
1296
|
+
};
|
|
1297
|
+
readonly flush: {
|
|
1298
|
+
readonly kind: "boolean";
|
|
1299
|
+
readonly description: "Drop the body padding, for content that draws its own edges such as a Table or a CodeBlock.";
|
|
1300
|
+
readonly default: false;
|
|
1301
|
+
};
|
|
1302
|
+
readonly emptyLabel: {
|
|
1303
|
+
readonly kind: "string";
|
|
1304
|
+
readonly description: "What the panel says when it has no content.";
|
|
1305
|
+
readonly default: "Empty";
|
|
1306
|
+
};
|
|
1307
|
+
};
|
|
1308
|
+
readonly state: {
|
|
1309
|
+
readonly flush: {
|
|
1310
|
+
readonly description: "Present when the body carries no padding of its own.";
|
|
1311
|
+
readonly attribute: "data-sprint-flush";
|
|
1312
|
+
};
|
|
1313
|
+
readonly empty: {
|
|
1314
|
+
readonly description: "Present when the panel has no content. The panel still renders its keyline and says it is empty.";
|
|
1315
|
+
readonly attribute: "data-sprint-empty";
|
|
1316
|
+
};
|
|
1317
|
+
};
|
|
1318
|
+
readonly agentView: {
|
|
1319
|
+
readonly example: "- **Panel** \"WebMCP tools\"";
|
|
1320
|
+
};
|
|
1321
|
+
readonly a11y: {
|
|
1322
|
+
readonly role: "region";
|
|
1323
|
+
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.";
|
|
1324
|
+
};
|
|
1325
|
+
readonly examples: readonly [{
|
|
1326
|
+
readonly title: "A section of a page";
|
|
1327
|
+
readonly description: "headingLevel puts the label in the page outline, so a screen reader finds the section by heading as well as by landmark.";
|
|
1328
|
+
readonly code: "<Panel label=\"When to use\" headingLevel={2}>\n <Text>Use it for any discrete action.</Text>\n</Panel>";
|
|
1329
|
+
}, {
|
|
1330
|
+
readonly title: "A panel with a control in its header";
|
|
1331
|
+
readonly description: "The header slot is for controls that act on the region, not for navigation.";
|
|
1332
|
+
readonly code: "<Panel\n label=\"Preview\"\n actions={<Button agentName=\"Reset preview\">Reset</Button>}\n>\n <Button tone=\"action\">Prepare launch</Button>\n</Panel>";
|
|
1333
|
+
}, {
|
|
1334
|
+
readonly title: "A flush panel around a table";
|
|
1335
|
+
readonly description: "Content that draws its own keylines sits flush, so borders do not double up.";
|
|
1336
|
+
readonly code: "<Panel label=\"Conventions\" flush>\n <Table label=\"Conventions\" columns={columns} rows={rows} />\n</Panel>";
|
|
1337
|
+
}, {
|
|
1338
|
+
readonly title: "Nested panels";
|
|
1339
|
+
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.";
|
|
1340
|
+
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>";
|
|
1341
|
+
}, {
|
|
1342
|
+
readonly title: "An empty region";
|
|
1343
|
+
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.";
|
|
1344
|
+
readonly code: "<Panel label=\"Registered tools\" emptyLabel=\"No tools registered\" />";
|
|
1345
|
+
}];
|
|
1346
|
+
};
|
|
1347
|
+
|
|
1348
|
+
export declare interface PanelProps extends ComponentPropsWithRef<"section"> {
|
|
1349
|
+
label: string;
|
|
1350
|
+
headingLevel?: PanelHeadingLevel;
|
|
1351
|
+
actions?: ReactNode;
|
|
1352
|
+
flush?: boolean;
|
|
1353
|
+
emptyLabel?: string;
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1356
|
+
export declare const PARAM_DESCRIPTION_LIMIT = 150;
|
|
1357
|
+
|
|
1358
|
+
export declare const PART_ATTRIBUTE = "data-sprint-part";
|
|
1359
|
+
|
|
1360
|
+
export declare const PRESS_TOOL: AgentToolSpec;
|
|
1361
|
+
|
|
1362
|
+
export declare function reactText(node: ReactNode): string | undefined;
|
|
1363
|
+
|
|
1364
|
+
export declare const REGION_ATTRIBUTE = "data-sprint-region";
|
|
1365
|
+
|
|
1366
|
+
export declare function registerTool(descriptor: ToolDescriptor, signal: AbortSignal): boolean;
|
|
1367
|
+
|
|
1368
|
+
declare interface RegisterToolOptions {
|
|
1369
|
+
signal?: AbortSignal;
|
|
1370
|
+
exposedTo?: readonly string[];
|
|
1371
|
+
}
|
|
1372
|
+
|
|
1373
|
+
export declare const RESERVED_STATE_KEYS: readonly string[];
|
|
1374
|
+
|
|
1375
|
+
export declare function SecretField(props: SecretFieldProps): JSX.Element;
|
|
1376
|
+
|
|
1377
|
+
export declare const secretFieldMeta: {
|
|
1378
|
+
readonly name: "SecretField";
|
|
1379
|
+
readonly category: "display";
|
|
1380
|
+
readonly summary: "A sensitive value shown once or on demand: an API key, a recovery code, a signing secret. Masked by default with reveal and copy controls, and the value never reaches any agent surface.";
|
|
1381
|
+
readonly whenToUse: "Use to hand a person a secret the page holds. The mask is fixed-length so nothing leaks, and copy places the value on the clipboard without revealing it.";
|
|
1382
|
+
readonly whenNotToUse: "Do not use for entering a secret; that is a TextInput with type password. Do not use for values that are safe to read; a DescriptionList or CodeBlock keeps those on the agent surface where they belong.";
|
|
1383
|
+
readonly status: "experimental";
|
|
1384
|
+
readonly props: {
|
|
1385
|
+
readonly label: {
|
|
1386
|
+
readonly kind: "string";
|
|
1387
|
+
readonly description: "What the secret is, shown as the field's uppercase title.";
|
|
1388
|
+
readonly required: true;
|
|
1389
|
+
};
|
|
1390
|
+
readonly value: {
|
|
1391
|
+
readonly kind: "string";
|
|
1392
|
+
readonly description: "The secret. Never appears in agent attributes, the agent view, or the copyable text stream; only reveal and copy touch it.";
|
|
1393
|
+
readonly required: true;
|
|
1394
|
+
};
|
|
1395
|
+
readonly hint: {
|
|
1396
|
+
readonly kind: "string";
|
|
1397
|
+
readonly description: "Guidance below the value, e.g. \"Store it now. It is not shown again.\"";
|
|
1398
|
+
};
|
|
1399
|
+
readonly defaultRevealed: {
|
|
1400
|
+
readonly kind: "boolean";
|
|
1401
|
+
readonly description: "Start revealed instead of masked.";
|
|
1402
|
+
readonly default: false;
|
|
1403
|
+
};
|
|
1404
|
+
};
|
|
1405
|
+
readonly state: {
|
|
1406
|
+
readonly filled: {
|
|
1407
|
+
readonly description: "Present when the field holds a secret.";
|
|
1408
|
+
readonly attribute: "data-sprint-filled";
|
|
1409
|
+
};
|
|
1410
|
+
readonly revealed: {
|
|
1411
|
+
readonly description: "Present while the value is shown in clear text.";
|
|
1412
|
+
readonly attribute: "data-sprint-revealed";
|
|
1413
|
+
};
|
|
1414
|
+
};
|
|
1415
|
+
readonly agentView: {
|
|
1416
|
+
readonly example: "- **SecretField** \"API key\" [filled]";
|
|
1417
|
+
};
|
|
1418
|
+
readonly examples: readonly [{
|
|
1419
|
+
readonly title: "A key shown once";
|
|
1420
|
+
readonly code: "<SecretField\n label=\"API key\"\n value={key}\n hint=\"Store it now. It is not shown again.\"\n/>";
|
|
1421
|
+
}, {
|
|
1422
|
+
readonly title: "Starting revealed";
|
|
1423
|
+
readonly description: "For a value the person is expected to transcribe immediately.";
|
|
1424
|
+
readonly code: "<SecretField label=\"Recovery code\" value={code} defaultRevealed />";
|
|
1425
|
+
}];
|
|
1426
|
+
readonly a11y: {
|
|
1427
|
+
readonly notes: "The reveal control is a toggle button with aria-pressed; the masked value is announced as a hidden secret rather than as bullet characters. Copy announces its success by swapping its label to Copied.";
|
|
1428
|
+
};
|
|
1429
|
+
};
|
|
1430
|
+
|
|
1431
|
+
export declare interface SecretFieldProps extends ComponentPropsWithRef<"div"> {
|
|
1432
|
+
label: string;
|
|
1433
|
+
value: string;
|
|
1434
|
+
hint?: string;
|
|
1435
|
+
defaultRevealed?: boolean;
|
|
1436
|
+
}
|
|
1437
|
+
|
|
1438
|
+
export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;
|
|
1439
|
+
|
|
1440
|
+
export declare const segmentedControlMeta: {
|
|
1441
|
+
readonly name: "SegmentedControl";
|
|
1442
|
+
readonly category: "input";
|
|
1443
|
+
readonly summary: "A short row of mutually exclusive options, all visible at once: a radio group that registers a single select tool whose schema enumerates the options currently on screen.";
|
|
1444
|
+
readonly whenToUse: "Use it for two to four exclusive choices a person should be able to compare without opening anything: a view switch, a density setting, a filter. One tool with an enum beats one tool per option, and it keeps a page's tool count flat as options are added.";
|
|
1445
|
+
readonly whenNotToUse: "Do not use it for more than about four options or for long labels; that is a select. Do not use it for an on/off setting, which is a switch, and never for navigation.";
|
|
1446
|
+
readonly status: "experimental";
|
|
1447
|
+
readonly props: {
|
|
1448
|
+
readonly label: {
|
|
1449
|
+
readonly kind: "string";
|
|
1450
|
+
readonly description: "What is being chosen. Names the group for a screen reader and derives the tool name, so prefer a noun phrase such as \"Page view\".";
|
|
1451
|
+
readonly required: true;
|
|
1452
|
+
};
|
|
1453
|
+
readonly options: {
|
|
1454
|
+
readonly kind: "array";
|
|
1455
|
+
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.";
|
|
1456
|
+
readonly required: true;
|
|
1457
|
+
};
|
|
1458
|
+
readonly value: {
|
|
1459
|
+
readonly kind: "string";
|
|
1460
|
+
readonly description: "The value of the selected option. The control is fully controlled.";
|
|
1461
|
+
readonly required: true;
|
|
1462
|
+
};
|
|
1463
|
+
readonly onChange: {
|
|
1464
|
+
readonly kind: "handler";
|
|
1465
|
+
readonly description: "Called with the newly selected value. The select tool drives a real click, so this runs for agent selections too.";
|
|
1466
|
+
readonly required: true;
|
|
1467
|
+
};
|
|
1468
|
+
readonly disabled: {
|
|
1469
|
+
readonly kind: "boolean";
|
|
1470
|
+
readonly description: "Disable every option and unregister the select tool.";
|
|
1471
|
+
readonly default: false;
|
|
1472
|
+
};
|
|
1473
|
+
readonly agentName: {
|
|
1474
|
+
readonly kind: "string";
|
|
1475
|
+
readonly description: "Override the label used to derive the tool name, when two controls on a page would otherwise collide.";
|
|
1476
|
+
};
|
|
1477
|
+
readonly agentTool: {
|
|
1478
|
+
readonly kind: "boolean";
|
|
1479
|
+
readonly description: "Set false to render the control without registering a select tool.";
|
|
1480
|
+
readonly default: true;
|
|
1481
|
+
};
|
|
1482
|
+
};
|
|
1483
|
+
readonly state: {
|
|
1484
|
+
readonly value: {
|
|
1485
|
+
readonly description: "The value of the option currently selected.";
|
|
1486
|
+
readonly attribute: "data-sprint-value";
|
|
1487
|
+
};
|
|
1488
|
+
readonly disabled: {
|
|
1489
|
+
readonly description: "Present when no option can be chosen.";
|
|
1490
|
+
readonly attribute: "data-sprint-disabled";
|
|
1491
|
+
};
|
|
1492
|
+
};
|
|
1493
|
+
readonly tools: {
|
|
1494
|
+
readonly select: AgentToolSpec;
|
|
1495
|
+
};
|
|
1496
|
+
readonly agentView: {
|
|
1497
|
+
readonly example: "- **SegmentedControl** \"Page view\" [value=human] → tool `select-page-view`\n - part `option` \"human\" [checked]\n - part `option` \"agent\"";
|
|
1498
|
+
};
|
|
1499
|
+
readonly examples: readonly [{
|
|
1500
|
+
readonly title: "A view switch";
|
|
1501
|
+
readonly description: "In agent view each option renders as its own control, so an agent driving the DOM can click one without WebMCP.";
|
|
1502
|
+
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/>";
|
|
1503
|
+
}, {
|
|
1504
|
+
readonly title: "A disabled control";
|
|
1505
|
+
readonly description: "Disabled unregisters the tool, so an agent cannot select an option a person could not.";
|
|
1506
|
+
readonly code: "<SegmentedControl\n label=\"Density\"\n disabled\n value=\"dense\"\n onChange={setDensity}\n options={[\n { value: \"dense\", label: \"dense\" },\n { value: \"roomy\", label: \"roomy\" },\n ]}\n/>";
|
|
1507
|
+
}];
|
|
1508
|
+
readonly a11y: {
|
|
1509
|
+
readonly role: "radiogroup";
|
|
1510
|
+
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"];
|
|
1511
|
+
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.";
|
|
1512
|
+
};
|
|
1513
|
+
};
|
|
1514
|
+
|
|
1515
|
+
export declare interface SegmentedControlProps extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
|
|
1516
|
+
label: string;
|
|
1517
|
+
options: readonly SegmentedOption[];
|
|
1518
|
+
value: string;
|
|
1519
|
+
onChange: (value: string) => void;
|
|
1520
|
+
disabled?: boolean;
|
|
1521
|
+
agentName?: string;
|
|
1522
|
+
agentTool?: boolean;
|
|
1523
|
+
}
|
|
1524
|
+
|
|
1525
|
+
export declare interface SegmentedOption {
|
|
1526
|
+
value: string;
|
|
1527
|
+
label: string;
|
|
1528
|
+
}
|
|
1529
|
+
|
|
1530
|
+
export declare function Select(props: SelectProps): JSX.Element;
|
|
1531
|
+
|
|
1532
|
+
export declare const SELECT_OPTION_TOOL: AgentToolSpec;
|
|
1533
|
+
|
|
1534
|
+
export declare const SELECT_TOOL: AgentToolSpec;
|
|
1535
|
+
|
|
1536
|
+
export declare const selectMeta: {
|
|
1537
|
+
readonly name: "Select";
|
|
1538
|
+
readonly category: "input";
|
|
1539
|
+
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.";
|
|
1540
|
+
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.";
|
|
1541
|
+
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.";
|
|
1542
|
+
readonly status: "experimental";
|
|
1543
|
+
readonly props: {
|
|
1544
|
+
readonly label: {
|
|
1545
|
+
readonly kind: "string";
|
|
1546
|
+
readonly description: "What is being chosen. Names the control for a screen reader and derives the tool name, so prefer a noun phrase such as \"Region\".";
|
|
1547
|
+
readonly required: true;
|
|
1548
|
+
};
|
|
1549
|
+
readonly options: {
|
|
1550
|
+
readonly kind: "array";
|
|
1551
|
+
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.";
|
|
1552
|
+
readonly required: true;
|
|
1553
|
+
};
|
|
1554
|
+
readonly value: {
|
|
1555
|
+
readonly kind: "string";
|
|
1556
|
+
readonly description: "The value of the chosen option, or \"\" while nothing is chosen yet. The control is fully controlled.";
|
|
1557
|
+
readonly required: true;
|
|
1558
|
+
};
|
|
1559
|
+
readonly onChange: {
|
|
1560
|
+
readonly kind: "handler";
|
|
1561
|
+
readonly description: "Called with the newly chosen value. The select tool drives a real change event, so this runs for agent selections too.";
|
|
1562
|
+
readonly required: true;
|
|
1563
|
+
};
|
|
1564
|
+
readonly placeholder: {
|
|
1565
|
+
readonly kind: "string";
|
|
1566
|
+
readonly description: "Shown while value is \"\". Rendered as a disabled option, so a person cannot choose it back.";
|
|
1567
|
+
};
|
|
1568
|
+
readonly hint: {
|
|
1569
|
+
readonly kind: "string";
|
|
1570
|
+
readonly description: "Guidance shown under the control and carried into the agent view. Replaced by error while one is set.";
|
|
1571
|
+
};
|
|
1572
|
+
readonly error: {
|
|
1573
|
+
readonly kind: "string";
|
|
1574
|
+
readonly description: "A validation message. Marks the control invalid for people, screen readers, and agents alike.";
|
|
1575
|
+
};
|
|
1576
|
+
readonly name: {
|
|
1577
|
+
readonly kind: "string";
|
|
1578
|
+
readonly description: "The native form name submitted with the surrounding form.";
|
|
1579
|
+
};
|
|
1580
|
+
readonly disabled: {
|
|
1581
|
+
readonly kind: "boolean";
|
|
1582
|
+
readonly description: "Disable the control and unregister its select tool.";
|
|
1583
|
+
readonly default: false;
|
|
1584
|
+
};
|
|
1585
|
+
readonly required: {
|
|
1586
|
+
readonly kind: "boolean";
|
|
1587
|
+
readonly description: "Mark the control required, visually and in the agent view.";
|
|
1588
|
+
readonly default: false;
|
|
1589
|
+
};
|
|
1590
|
+
readonly agentName: {
|
|
1591
|
+
readonly kind: "string";
|
|
1592
|
+
readonly description: "Override the label used to derive the tool name, when two controls on a page would otherwise collide.";
|
|
1593
|
+
};
|
|
1594
|
+
readonly agentTool: {
|
|
1595
|
+
readonly kind: "boolean";
|
|
1596
|
+
readonly description: "Set false to render the control without registering a select tool.";
|
|
1597
|
+
readonly default: true;
|
|
1598
|
+
};
|
|
1599
|
+
};
|
|
1600
|
+
readonly state: {
|
|
1601
|
+
readonly value: {
|
|
1602
|
+
readonly description: "The value of the option currently chosen.";
|
|
1603
|
+
readonly attribute: "data-sprint-value";
|
|
1604
|
+
};
|
|
1605
|
+
readonly empty: {
|
|
1606
|
+
readonly description: "Present while no option is chosen.";
|
|
1607
|
+
readonly attribute: "data-sprint-empty";
|
|
1608
|
+
};
|
|
1609
|
+
readonly disabled: {
|
|
1610
|
+
readonly description: "Present when nothing can be chosen.";
|
|
1611
|
+
readonly attribute: "data-sprint-disabled";
|
|
1612
|
+
};
|
|
1613
|
+
readonly required: {
|
|
1614
|
+
readonly description: "Present when a choice must be made.";
|
|
1615
|
+
readonly attribute: "data-sprint-required";
|
|
1616
|
+
};
|
|
1617
|
+
readonly invalid: {
|
|
1618
|
+
readonly description: "Present while an error is set.";
|
|
1619
|
+
readonly attribute: "data-sprint-invalid";
|
|
1620
|
+
};
|
|
1621
|
+
};
|
|
1622
|
+
readonly tools: {
|
|
1623
|
+
readonly select: AgentToolSpec;
|
|
1624
|
+
};
|
|
1625
|
+
readonly agentView: {
|
|
1626
|
+
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\"";
|
|
1627
|
+
};
|
|
1628
|
+
readonly examples: readonly [{
|
|
1629
|
+
readonly title: "A dropdown";
|
|
1630
|
+
readonly description: "In agent view each option renders as its own control, so a DOM-driving agent chooses one directly.";
|
|
1631
|
+
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/>";
|
|
1632
|
+
}, {
|
|
1633
|
+
readonly title: "A required choice with an error";
|
|
1634
|
+
readonly description: "Empty plus required plus an error is how an unmade mandatory choice reads on every surface.";
|
|
1635
|
+
readonly code: "<Select\n label=\"Launch site\"\n value={site}\n onChange={setSite}\n required\n error=\"Choose a site before continuing.\"\n options={[\n { value: \"ksc\", label: \"Cape Canaveral\" },\n { value: \"vsfb\", label: \"Vandenberg\" },\n ]}\n/>";
|
|
1636
|
+
}, {
|
|
1637
|
+
readonly title: "A disabled dropdown";
|
|
1638
|
+
readonly description: "Disabled unregisters the tool, so an agent cannot choose what a person could not.";
|
|
1639
|
+
readonly code: "<Select\n label=\"Relay\"\n disabled\n value=\"r-2\"\n onChange={setRelay}\n options={[\n { value: \"r-1\", label: \"Relay one\" },\n { value: \"r-2\", label: \"Relay two\" },\n ]}\n/>";
|
|
1640
|
+
}];
|
|
1641
|
+
readonly a11y: {
|
|
1642
|
+
readonly role: "combobox";
|
|
1643
|
+
readonly keyboard: readonly ["Arrow keys move through the options", "Enter or Space opens the list", "Escape closes it"];
|
|
1644
|
+
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.";
|
|
1645
|
+
};
|
|
1646
|
+
};
|
|
1647
|
+
|
|
1648
|
+
export declare interface SelectOption {
|
|
1649
|
+
value: string;
|
|
1650
|
+
label: string;
|
|
1651
|
+
}
|
|
1652
|
+
|
|
1653
|
+
export declare interface SelectProps extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
|
|
1654
|
+
label: string;
|
|
1655
|
+
options: readonly SelectOption[];
|
|
1656
|
+
value: string;
|
|
1657
|
+
onChange: (value: string) => void;
|
|
1658
|
+
placeholder?: string;
|
|
1659
|
+
hint?: string;
|
|
1660
|
+
error?: string;
|
|
1661
|
+
name?: string;
|
|
1662
|
+
disabled?: boolean;
|
|
1663
|
+
required?: boolean;
|
|
1664
|
+
agentName?: string;
|
|
1665
|
+
agentTool?: boolean;
|
|
1666
|
+
}
|
|
1667
|
+
|
|
1668
|
+
export declare function serializeElement(root: Element, options?: SerializeOptions): AgentNode | null;
|
|
1669
|
+
|
|
1670
|
+
export declare interface SerializeOptions {
|
|
1671
|
+
maxDepth?: number;
|
|
1672
|
+
lookupMeta?: (name: string) => AgentComponentMeta | undefined;
|
|
1673
|
+
}
|
|
1674
|
+
|
|
1675
|
+
export declare function serializeWithin(root: ParentNode, options?: SerializeOptions): AgentNode[];
|
|
1676
|
+
|
|
1677
|
+
export declare const SET_CHECKBOX_TOOL: AgentToolSpec;
|
|
1678
|
+
|
|
1679
|
+
export declare const SET_SWITCH_TOOL: AgentToolSpec;
|
|
1680
|
+
|
|
1681
|
+
export declare function Shell(props: ShellProps): JSX.Element;
|
|
1682
|
+
|
|
1683
|
+
export declare const shellMeta: {
|
|
1684
|
+
readonly name: "Shell";
|
|
1685
|
+
readonly category: "layout";
|
|
1686
|
+
readonly summary: "The page-level frame: a sidebar and a main content region, with the landmark wiring done once. On a phone the sidebar becomes a drawer behind a menu button.";
|
|
1687
|
+
readonly whenToUse: "Use it once, at the root of an app view. Put the brand in bar, a Nav in side, and the page in children. It renders the main and complementary landmarks, a skip-to-content control for keyboard users, and the mobile drawer behaviour, so none of that is rebuilt per app. Like Stack it is silent in agent view: its regions speak for themselves.";
|
|
1688
|
+
readonly whenNotToUse: "Do not use it inside another Shell, or anywhere below the top of the page; a region within a page is a Panel. Do not use it just to put two columns next to each other; that is Stack.";
|
|
1689
|
+
readonly status: "experimental";
|
|
1690
|
+
readonly props: {
|
|
1691
|
+
readonly children: {
|
|
1692
|
+
readonly kind: "node";
|
|
1693
|
+
readonly description: "The page content. Rendered inside the main landmark.";
|
|
1694
|
+
readonly required: true;
|
|
1695
|
+
};
|
|
1696
|
+
readonly side: {
|
|
1697
|
+
readonly kind: "node";
|
|
1698
|
+
readonly description: "The sidebar content, usually a Nav. On narrow viewports it becomes the drawer behind the menu button, and the drawer closes itself when a link inside it is followed.";
|
|
1699
|
+
};
|
|
1700
|
+
readonly bar: {
|
|
1701
|
+
readonly kind: "node";
|
|
1702
|
+
readonly description: "What stays visible when the sidebar collapses to a top bar: typically the brand link. The menu button renders next to it automatically.";
|
|
1703
|
+
};
|
|
1704
|
+
readonly sideLabel: {
|
|
1705
|
+
readonly kind: "string";
|
|
1706
|
+
readonly description: "Accessible name for the sidebar landmark.";
|
|
1707
|
+
readonly default: "Sidebar";
|
|
1708
|
+
};
|
|
1709
|
+
readonly skipLabel: {
|
|
1710
|
+
readonly kind: "string";
|
|
1711
|
+
readonly description: "Text of the skip control that moves focus to the main region. Visually hidden until focused.";
|
|
1712
|
+
readonly default: "Skip to content";
|
|
1713
|
+
};
|
|
1714
|
+
readonly menuLabel: {
|
|
1715
|
+
readonly kind: "string";
|
|
1716
|
+
readonly description: "Label of the drawer button while the drawer is closed.";
|
|
1717
|
+
readonly default: "Menu";
|
|
1718
|
+
};
|
|
1719
|
+
readonly closeLabel: {
|
|
1720
|
+
readonly kind: "string";
|
|
1721
|
+
readonly description: "Label of the drawer button while the drawer is open.";
|
|
1722
|
+
readonly default: "Close";
|
|
1723
|
+
};
|
|
1724
|
+
};
|
|
1725
|
+
readonly state: {
|
|
1726
|
+
readonly open: {
|
|
1727
|
+
readonly description: "Present while the mobile drawer is open. On wide viewports the sidebar is always visible and this state is inert.";
|
|
1728
|
+
readonly attribute: "data-sprint-open";
|
|
1729
|
+
};
|
|
1730
|
+
};
|
|
1731
|
+
readonly a11y: {
|
|
1732
|
+
readonly notes: "Renders the only main element and an aside named by sideLabel, so the page has its landmarks without any consumer wiring. The first focusable element is a skip control that moves focus to main without touching the URL, which keeps it safe in hash-routed apps. The drawer button carries aria-expanded and aria-controls.";
|
|
1733
|
+
};
|
|
1734
|
+
readonly relatedComponents: readonly ["Nav", "Panel", "Stack"];
|
|
1735
|
+
readonly examples: readonly [{
|
|
1736
|
+
readonly title: "A sidebar app shell";
|
|
1737
|
+
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.";
|
|
1738
|
+
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>";
|
|
1739
|
+
}];
|
|
1740
|
+
};
|
|
1741
|
+
|
|
1742
|
+
export declare interface ShellProps extends ComponentPropsWithRef<"div"> {
|
|
1743
|
+
side?: ReactNode;
|
|
1744
|
+
bar?: ReactNode;
|
|
1745
|
+
sideLabel?: string;
|
|
1746
|
+
skipLabel?: string;
|
|
1747
|
+
menuLabel?: string;
|
|
1748
|
+
closeLabel?: string;
|
|
1749
|
+
}
|
|
1750
|
+
|
|
1751
|
+
export declare function slug(value: string): string;
|
|
1752
|
+
|
|
1753
|
+
export declare type SprintAgentControls = "always" | "never";
|
|
1754
|
+
|
|
1755
|
+
export declare function SprintProvider(props: SprintProviderProps): JSX.Element;
|
|
1756
|
+
|
|
1757
|
+
export declare interface SprintProviderProps {
|
|
1758
|
+
children: ReactNode;
|
|
1759
|
+
label?: string;
|
|
1760
|
+
format?: AgentFormatter;
|
|
1761
|
+
pageTools?: boolean;
|
|
1762
|
+
view?: SprintView;
|
|
1763
|
+
defaultView?: SprintView;
|
|
1764
|
+
onViewChange?: (view: SprintView) => void;
|
|
1765
|
+
agentControls?: SprintAgentControls;
|
|
1766
|
+
theme?: SprintTheme;
|
|
1767
|
+
}
|
|
1768
|
+
|
|
1769
|
+
export declare type SprintTheme = "dark" | "light";
|
|
1770
|
+
|
|
1771
|
+
export declare type SprintView = "human" | "agent";
|
|
1772
|
+
|
|
1773
|
+
export declare interface SprintViewValue {
|
|
1774
|
+
view: SprintView;
|
|
1775
|
+
setView: (view: SprintView) => void;
|
|
1776
|
+
controls: SprintAgentControls;
|
|
1777
|
+
format: AgentFormatter;
|
|
1778
|
+
owned: boolean;
|
|
1779
|
+
}
|
|
1780
|
+
|
|
1781
|
+
export declare function Stack(props: StackProps): JSX.Element;
|
|
1782
|
+
|
|
1783
|
+
export declare type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
|
|
1784
|
+
|
|
1785
|
+
export declare type StackDirection = "row" | "column" | "grid";
|
|
1786
|
+
|
|
1787
|
+
export declare type StackGap = "none" | "tight" | "normal" | "loose";
|
|
1788
|
+
|
|
1789
|
+
export declare type StackJustify = "start" | "center" | "end" | "between";
|
|
1790
|
+
|
|
1791
|
+
export declare const stackMeta: {
|
|
1792
|
+
readonly name: "Stack";
|
|
1793
|
+
readonly category: "layout";
|
|
1794
|
+
readonly summary: "The one-dimensional layout primitive: a row, a column, or an auto-filling grid, with spacing drawn from the space scale. It renders a plain box and nothing else.";
|
|
1795
|
+
readonly whenToUse: "Use it wherever two or more things sit next to each other. Prefer it over a bare div with inline styles so spacing stays on the scale. Stack is invisible in agent view: it emits no line, because an agent does not care how a region is arranged, only what is in it.";
|
|
1796
|
+
readonly whenNotToUse: "Do not use it to draw a bordered region with a header; that is Panel. Do not nest three deep to fake a grid; use direction=\"grid\".";
|
|
1797
|
+
readonly status: "experimental";
|
|
1798
|
+
readonly props: {
|
|
1799
|
+
readonly children: {
|
|
1800
|
+
readonly kind: "node";
|
|
1801
|
+
readonly description: "The items to lay out.";
|
|
1802
|
+
readonly required: true;
|
|
1803
|
+
};
|
|
1804
|
+
readonly direction: {
|
|
1805
|
+
readonly kind: "enum";
|
|
1806
|
+
readonly description: "Axis. \"grid\" fills as many equal columns as fit, each at least min wide.";
|
|
1807
|
+
readonly values: readonly ["row", "column", "grid"];
|
|
1808
|
+
readonly default: "column";
|
|
1809
|
+
};
|
|
1810
|
+
readonly gap: {
|
|
1811
|
+
readonly kind: "enum";
|
|
1812
|
+
readonly description: "Space between items, from the space scale.";
|
|
1813
|
+
readonly values: readonly ["none", "tight", "normal", "loose"];
|
|
1814
|
+
readonly default: "normal";
|
|
1815
|
+
};
|
|
1816
|
+
readonly align: {
|
|
1817
|
+
readonly kind: "enum";
|
|
1818
|
+
readonly description: "Cross-axis alignment.";
|
|
1819
|
+
readonly values: readonly ["start", "center", "end", "stretch", "baseline"];
|
|
1820
|
+
};
|
|
1821
|
+
readonly justify: {
|
|
1822
|
+
readonly kind: "enum";
|
|
1823
|
+
readonly description: "Main-axis distribution.";
|
|
1824
|
+
readonly values: readonly ["start", "center", "end", "between"];
|
|
1825
|
+
};
|
|
1826
|
+
readonly wrap: {
|
|
1827
|
+
readonly kind: "boolean";
|
|
1828
|
+
readonly description: "Let a row wrap onto more lines instead of overflowing.";
|
|
1829
|
+
readonly default: false;
|
|
1830
|
+
};
|
|
1831
|
+
readonly collapse: {
|
|
1832
|
+
readonly kind: "boolean";
|
|
1833
|
+
readonly description: "Stack a row into a column on narrow viewports. This is how a toolbar survives a phone.";
|
|
1834
|
+
readonly default: false;
|
|
1835
|
+
};
|
|
1836
|
+
readonly min: {
|
|
1837
|
+
readonly kind: "string";
|
|
1838
|
+
readonly description: "Minimum track width for direction=\"grid\", as a CSS length. Tracks never exceed the container.";
|
|
1839
|
+
readonly default: "18rem";
|
|
1840
|
+
};
|
|
1841
|
+
};
|
|
1842
|
+
readonly state: {
|
|
1843
|
+
readonly direction: {
|
|
1844
|
+
readonly description: "The axis in use.";
|
|
1845
|
+
readonly attribute: "data-sprint-direction";
|
|
1846
|
+
readonly values: readonly ["row", "column", "grid"];
|
|
1847
|
+
};
|
|
1848
|
+
readonly gap: {
|
|
1849
|
+
readonly description: "The spacing step in use.";
|
|
1850
|
+
readonly attribute: "data-sprint-gap";
|
|
1851
|
+
readonly values: readonly ["none", "tight", "normal", "loose"];
|
|
1852
|
+
};
|
|
1853
|
+
readonly align: {
|
|
1854
|
+
readonly description: "Cross-axis alignment, when one was asked for.";
|
|
1855
|
+
readonly attribute: "data-sprint-align";
|
|
1856
|
+
readonly values: readonly ["start", "center", "end", "stretch", "baseline"];
|
|
1857
|
+
};
|
|
1858
|
+
readonly justify: {
|
|
1859
|
+
readonly description: "Main-axis distribution, when one was asked for.";
|
|
1860
|
+
readonly attribute: "data-sprint-justify";
|
|
1861
|
+
readonly values: readonly ["start", "center", "end", "between"];
|
|
1862
|
+
};
|
|
1863
|
+
readonly wrap: {
|
|
1864
|
+
readonly description: "Present when a row is allowed to wrap.";
|
|
1865
|
+
readonly attribute: "data-sprint-wrap";
|
|
1866
|
+
};
|
|
1867
|
+
readonly collapse: {
|
|
1868
|
+
readonly description: "Present when the row stacks into a column on narrow viewports.";
|
|
1869
|
+
readonly attribute: "data-sprint-collapse";
|
|
1870
|
+
};
|
|
1871
|
+
};
|
|
1872
|
+
readonly examples: readonly [{
|
|
1873
|
+
readonly title: "A row of actions";
|
|
1874
|
+
readonly description: "Wrapping keeps a toolbar from overflowing on a narrow screen.";
|
|
1875
|
+
readonly code: "<Stack direction=\"row\" gap=\"tight\" wrap>\n <Button>Cancel</Button>\n <Button tone=\"action\">Confirm</Button>\n</Stack>";
|
|
1876
|
+
}, {
|
|
1877
|
+
readonly title: "A responsive card grid";
|
|
1878
|
+
readonly description: "Tracks fill the container and never go below min, so this is one column on a phone and three on a desktop with no media query of your own.";
|
|
1879
|
+
readonly code: "<Stack direction=\"grid\" min=\"16rem\">\n <Card label=\"Button\" href=\"#/Button\">One action.</Card>\n <Card label=\"Table\" href=\"#/Table\">Rows and columns.</Card>\n</Stack>";
|
|
1880
|
+
}, {
|
|
1881
|
+
readonly title: "A header bar that stacks on a phone";
|
|
1882
|
+
readonly code: "<Stack direction=\"row\" justify=\"between\" align=\"center\" collapse>\n <Heading level={1}>Button</Heading>\n <Tag tone=\"warning\">experimental</Tag>\n</Stack>";
|
|
1883
|
+
}];
|
|
1884
|
+
};
|
|
1885
|
+
|
|
1886
|
+
export declare interface StackProps extends ComponentPropsWithRef<"div"> {
|
|
1887
|
+
direction?: StackDirection;
|
|
1888
|
+
gap?: StackGap;
|
|
1889
|
+
align?: StackAlign;
|
|
1890
|
+
justify?: StackJustify;
|
|
1891
|
+
wrap?: boolean;
|
|
1892
|
+
collapse?: boolean;
|
|
1893
|
+
min?: string;
|
|
1894
|
+
}
|
|
1895
|
+
|
|
1896
|
+
export declare const STATE_ATTRIBUTE_PREFIX = "data-sprint-";
|
|
1897
|
+
|
|
1898
|
+
export declare function Switch(props: SwitchProps): JSX.Element;
|
|
1899
|
+
|
|
1900
|
+
export declare const switchMeta: {
|
|
1901
|
+
readonly name: "Switch";
|
|
1902
|
+
readonly category: "input";
|
|
1903
|
+
readonly summary: "An on/off setting that takes effect the moment it changes. It registers one set tool that takes the end state rather than toggling.";
|
|
1904
|
+
readonly whenToUse: "Use it for a live setting: enabling telemetry, muting alerts, switching a feed. The set tool takes on as true or false, so an agent states the end state and never has to read before writing.";
|
|
1905
|
+
readonly whenNotToUse: "Do not use it for a boolean a form will submit later; that is a Checkbox, and the distinction is when the change takes effect. Do not use it to choose between two named modes a person should see side by side, which is a SegmentedControl.";
|
|
1906
|
+
readonly status: "experimental";
|
|
1907
|
+
readonly props: {
|
|
1908
|
+
readonly label: {
|
|
1909
|
+
readonly kind: "string";
|
|
1910
|
+
readonly description: "What the setting controls. Names the switch for a screen reader and derives the tool name, so prefer a noun phrase such as \"Live telemetry\".";
|
|
1911
|
+
readonly required: true;
|
|
1912
|
+
};
|
|
1913
|
+
readonly on: {
|
|
1914
|
+
readonly kind: "boolean";
|
|
1915
|
+
readonly description: "Whether the setting is on. The switch is fully controlled.";
|
|
1916
|
+
readonly required: true;
|
|
1917
|
+
};
|
|
1918
|
+
readonly onChange: {
|
|
1919
|
+
readonly kind: "handler";
|
|
1920
|
+
readonly description: "Called with the new state. The set tool drives a real click, so this runs for agent changes too.";
|
|
1921
|
+
readonly required: true;
|
|
1922
|
+
};
|
|
1923
|
+
readonly disabled: {
|
|
1924
|
+
readonly kind: "boolean";
|
|
1925
|
+
readonly description: "Disable the switch and unregister its set tool.";
|
|
1926
|
+
readonly default: false;
|
|
1927
|
+
};
|
|
1928
|
+
readonly agentName: {
|
|
1929
|
+
readonly kind: "string";
|
|
1930
|
+
readonly description: "Override the label used to derive the tool name, when two switches on a page would otherwise collide.";
|
|
1931
|
+
};
|
|
1932
|
+
readonly agentTool: {
|
|
1933
|
+
readonly kind: "boolean";
|
|
1934
|
+
readonly description: "Set false to render the switch without registering a set tool.";
|
|
1935
|
+
readonly default: true;
|
|
1936
|
+
};
|
|
1937
|
+
};
|
|
1938
|
+
readonly state: {
|
|
1939
|
+
readonly on: {
|
|
1940
|
+
readonly description: "Present while the setting is on.";
|
|
1941
|
+
readonly attribute: "data-sprint-on";
|
|
1942
|
+
};
|
|
1943
|
+
readonly disabled: {
|
|
1944
|
+
readonly description: "Present when the switch cannot be changed.";
|
|
1945
|
+
readonly attribute: "data-sprint-disabled";
|
|
1946
|
+
};
|
|
1947
|
+
};
|
|
1948
|
+
readonly tools: {
|
|
1949
|
+
readonly set: AgentToolSpec;
|
|
1950
|
+
};
|
|
1951
|
+
readonly agentView: {
|
|
1952
|
+
readonly example: "- **Switch** \"Live telemetry\" [on] → tool `set-live-telemetry`";
|
|
1953
|
+
};
|
|
1954
|
+
readonly examples: readonly [{
|
|
1955
|
+
readonly title: "A live setting";
|
|
1956
|
+
readonly description: "In agent view the switch renders as one control; pressing it toggles, while the set tool states the end state.";
|
|
1957
|
+
readonly code: "<Switch label=\"Live telemetry\" on={telemetry} onChange={setTelemetry} />";
|
|
1958
|
+
}, {
|
|
1959
|
+
readonly title: "A disabled switch";
|
|
1960
|
+
readonly description: "Disabled unregisters the tool, so an agent cannot change what a person could not.";
|
|
1961
|
+
readonly code: "<Switch label=\"Ground link\" on disabled onChange={setLink} />";
|
|
1962
|
+
}];
|
|
1963
|
+
readonly a11y: {
|
|
1964
|
+
readonly role: "switch";
|
|
1965
|
+
readonly keyboard: readonly ["Space toggles", "Enter toggles"];
|
|
1966
|
+
readonly notes: "A button with role switch and aria-checked, so the label and state read together. The thumb moves by a single-axis stepped translation and respects prefers-reduced-motion.";
|
|
1967
|
+
};
|
|
1968
|
+
};
|
|
1969
|
+
|
|
1970
|
+
export declare interface SwitchProps extends Omit<ComponentPropsWithRef<"button">, "onChange" | "children"> {
|
|
1971
|
+
label: string;
|
|
1972
|
+
on: boolean;
|
|
1973
|
+
onChange: (on: boolean) => void;
|
|
1974
|
+
agentName?: string;
|
|
1975
|
+
agentTool?: boolean;
|
|
1976
|
+
}
|
|
1977
|
+
|
|
1978
|
+
export declare function Table(props: TableProps): JSX.Element;
|
|
1979
|
+
|
|
1980
|
+
export declare interface TableColumn {
|
|
1981
|
+
key: string;
|
|
1982
|
+
header: string;
|
|
1983
|
+
align?: "start" | "end";
|
|
1984
|
+
width?: string;
|
|
1985
|
+
}
|
|
1986
|
+
|
|
1987
|
+
export declare const tableMeta: {
|
|
1988
|
+
readonly name: "Table";
|
|
1989
|
+
readonly category: "display";
|
|
1990
|
+
readonly summary: "A data grid built from columns and rows rather than from markup. In the agent stream it reads as a compact Markdown table; in the DOM each cell is addressable as a part carrying its column and row. On a narrow screen every row restacks into a labelled block instead of scrolling sideways.";
|
|
1991
|
+
readonly whenToUse: "Use it for any set of records with the same shape: props, attributes, conventions, results. Passing data instead of children is what lets the agent view carry the cells and the human view restack them on a phone.";
|
|
1992
|
+
readonly whenNotToUse: "Do not use it for page layout; that is Stack. Do not put components in cells: cells are flattened to text for the agent view, so a Button inside one would lose its tool.";
|
|
1993
|
+
readonly status: "experimental";
|
|
1994
|
+
readonly props: {
|
|
1995
|
+
readonly label: {
|
|
1996
|
+
readonly kind: "string";
|
|
1997
|
+
readonly description: "What this table is a table of. Used as its accessible name and read back by the agent view.";
|
|
1998
|
+
readonly required: true;
|
|
1999
|
+
};
|
|
2000
|
+
readonly columns: {
|
|
2001
|
+
readonly kind: "array";
|
|
2002
|
+
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.";
|
|
2003
|
+
readonly required: true;
|
|
2004
|
+
};
|
|
2005
|
+
readonly rows: {
|
|
2006
|
+
readonly kind: "array";
|
|
2007
|
+
readonly description: "Rows in display order: { id?, cells }, where cells maps a column key to inline content. id names the row for an agent and defaults to its 1-based position.";
|
|
2008
|
+
readonly required: true;
|
|
2009
|
+
};
|
|
2010
|
+
readonly emptyLabel: {
|
|
2011
|
+
readonly kind: "string";
|
|
2012
|
+
readonly description: "What the table says when it has no rows.";
|
|
2013
|
+
readonly default: "No rows";
|
|
2014
|
+
};
|
|
2015
|
+
};
|
|
2016
|
+
readonly state: {
|
|
2017
|
+
readonly columns: {
|
|
2018
|
+
readonly description: "How many columns the table has.";
|
|
2019
|
+
readonly attribute: "data-sprint-columns";
|
|
2020
|
+
};
|
|
2021
|
+
readonly rows: {
|
|
2022
|
+
readonly description: "How many rows the table currently has.";
|
|
2023
|
+
readonly attribute: "data-sprint-rows";
|
|
2024
|
+
};
|
|
2025
|
+
readonly empty: {
|
|
2026
|
+
readonly description: "Present when the table has no rows.";
|
|
2027
|
+
readonly attribute: "data-sprint-empty";
|
|
2028
|
+
};
|
|
2029
|
+
readonly column: {
|
|
2030
|
+
readonly description: "On a cell: which column it belongs to.";
|
|
2031
|
+
readonly attribute: "data-sprint-column";
|
|
2032
|
+
};
|
|
2033
|
+
readonly row: {
|
|
2034
|
+
readonly description: "On a cell: which row it belongs to.";
|
|
2035
|
+
readonly attribute: "data-sprint-row";
|
|
2036
|
+
};
|
|
2037
|
+
readonly align: {
|
|
2038
|
+
readonly description: "On a cell: the alignment its column asked for, if any.";
|
|
2039
|
+
readonly attribute: "data-sprint-align";
|
|
2040
|
+
readonly values: readonly ["start", "end"];
|
|
2041
|
+
};
|
|
2042
|
+
};
|
|
2043
|
+
readonly agentView: {
|
|
2044
|
+
readonly example: "- **Table** \"Props\" [columns=2, rows=1]\n | row | prop | kind |\n | --- | --- | --- |\n | tone | tone | enum |";
|
|
2045
|
+
};
|
|
2046
|
+
readonly examples: readonly [{
|
|
2047
|
+
readonly title: "A reference table";
|
|
2048
|
+
readonly description: "Cells are addressable: [data-sprint-part=\"cell\"][data-sprint-column=\"kind\"] selects a column without knowing anything about the markup.";
|
|
2049
|
+
readonly code: "<Table\n label=\"Props\"\n columns={[\n { key: \"prop\", header: \"Prop\" },\n { key: \"kind\", header: \"Kind\" },\n ]}\n rows={[{ id: \"tone\", cells: { prop: <code>tone</code>, kind: \"enum\" } }]}\n/>";
|
|
2050
|
+
}, {
|
|
2051
|
+
readonly title: "A table with no rows";
|
|
2052
|
+
readonly description: "An empty table keeps its header and says so, rather than rendering a bare keyline.";
|
|
2053
|
+
readonly code: "<Table\n label=\"Registered tools\"\n emptyLabel=\"No tools registered\"\n columns={[{ key: \"name\", header: \"Name\" }]}\n rows={[]}\n/>";
|
|
2054
|
+
}];
|
|
2055
|
+
readonly a11y: {
|
|
2056
|
+
readonly role: "table";
|
|
2057
|
+
readonly notes: "Column headers keep scope=col in every layout. On narrow screens each cell repeats its column header visually, marked aria-hidden so the real header association is not announced twice.";
|
|
2058
|
+
};
|
|
2059
|
+
};
|
|
2060
|
+
|
|
2061
|
+
export declare interface TableProps extends ComponentPropsWithRef<"table"> {
|
|
2062
|
+
label: string;
|
|
2063
|
+
columns: readonly TableColumn[];
|
|
2064
|
+
rows: readonly TableRow[];
|
|
2065
|
+
emptyLabel?: string;
|
|
2066
|
+
}
|
|
2067
|
+
|
|
2068
|
+
export declare interface TableRow {
|
|
2069
|
+
id?: string;
|
|
2070
|
+
cells: Record<string, ReactNode>;
|
|
2071
|
+
}
|
|
2072
|
+
|
|
2073
|
+
export declare function Tag(props: TagProps): JSX.Element;
|
|
2074
|
+
|
|
2075
|
+
export declare const tagMeta: {
|
|
2076
|
+
readonly name: "Tag";
|
|
2077
|
+
readonly category: "display";
|
|
2078
|
+
readonly summary: "A small chip that classifies the thing next to it: a status, a category, a count, a build string.";
|
|
2079
|
+
readonly whenToUse: "Use it for a short classification a person scans and an agent reads off the tone attribute, such as a release status, a read-only or write marker on a tool, or a version chip.";
|
|
2080
|
+
readonly whenNotToUse: "Do not use it for anything clickable; a Tag is inert, and a chip that acts is a Button. Do not put a sentence in one.";
|
|
2081
|
+
readonly status: "experimental";
|
|
2082
|
+
readonly props: {
|
|
2083
|
+
readonly children: {
|
|
2084
|
+
readonly kind: "node";
|
|
2085
|
+
readonly description: "The chip text. One or two words.";
|
|
2086
|
+
readonly required: true;
|
|
2087
|
+
};
|
|
2088
|
+
readonly tone: {
|
|
2089
|
+
readonly kind: "enum";
|
|
2090
|
+
readonly description: "What class of thing this is. Acid is rationed, so reach for info or inert before action.";
|
|
2091
|
+
readonly values: readonly ["neutral", "action", "danger", "info", "warning", "inert"];
|
|
2092
|
+
readonly default: "neutral";
|
|
2093
|
+
};
|
|
2094
|
+
readonly filled: {
|
|
2095
|
+
readonly kind: "boolean";
|
|
2096
|
+
readonly description: "Render as a solid field of the tone with inverted ink, instead of a keyline. Use for the one chip that must be read first.";
|
|
2097
|
+
readonly default: false;
|
|
2098
|
+
};
|
|
2099
|
+
};
|
|
2100
|
+
readonly state: {
|
|
2101
|
+
readonly tone: {
|
|
2102
|
+
readonly description: "The class of thing the chip marks.";
|
|
2103
|
+
readonly attribute: "data-sprint-tone";
|
|
2104
|
+
readonly values: readonly ["neutral", "action", "danger", "info", "warning", "inert"];
|
|
2105
|
+
};
|
|
2106
|
+
readonly filled: {
|
|
2107
|
+
readonly description: "Present when the chip is a solid field rather than a keyline.";
|
|
2108
|
+
readonly attribute: "data-sprint-filled";
|
|
2109
|
+
};
|
|
2110
|
+
};
|
|
2111
|
+
readonly agentView: {
|
|
2112
|
+
readonly example: "- **Tag** \"experimental\" [filled, tone=warning]";
|
|
2113
|
+
};
|
|
2114
|
+
readonly examples: readonly [{
|
|
2115
|
+
readonly title: "A release status";
|
|
2116
|
+
readonly code: "<Tag tone=\"warning\" filled>experimental</Tag>";
|
|
2117
|
+
}, {
|
|
2118
|
+
readonly title: "A category chip";
|
|
2119
|
+
readonly code: "<Tag>action</Tag>";
|
|
2120
|
+
}, {
|
|
2121
|
+
readonly title: "Read-only against changes-state";
|
|
2122
|
+
readonly description: "Two tones doing the work a legend would otherwise have to do in prose.";
|
|
2123
|
+
readonly code: "<Tag tone={tool.readOnly ? \"info\" : \"danger\"}>\n {tool.readOnly ? \"read only\" : \"changes state\"}\n</Tag>";
|
|
2124
|
+
}];
|
|
2125
|
+
};
|
|
2126
|
+
|
|
2127
|
+
export declare interface TagProps extends ComponentPropsWithRef<"span"> {
|
|
2128
|
+
tone?: TagTone;
|
|
2129
|
+
filled?: boolean;
|
|
2130
|
+
}
|
|
2131
|
+
|
|
2132
|
+
export declare type TagTone = "neutral" | "action" | "danger" | "info" | "warning" | "inert";
|
|
2133
|
+
|
|
2134
|
+
declare function Text_2(props: TextProps): JSX.Element;
|
|
2135
|
+
export { Text_2 as Text }
|
|
2136
|
+
|
|
2137
|
+
export declare function Textarea(props: TextareaProps): JSX.Element;
|
|
2138
|
+
|
|
2139
|
+
export declare const textareaMeta: {
|
|
2140
|
+
readonly name: "Textarea";
|
|
2141
|
+
readonly category: "input";
|
|
2142
|
+
readonly summary: "A multi-line text area carrying its own label, hint, and error. Fully controlled, and it registers one fill tool that replaces the whole content with an explicit value, line breaks included.";
|
|
2143
|
+
readonly whenToUse: "Use it for free-form text that runs longer than a line: a description, a message body, a set of notes. In the agent view the current content is part of the component's state line, so an agent reads what is written without a separate query.";
|
|
2144
|
+
readonly whenNotToUse: "Do not use it for a single-line value, which is a TextInput. Do not use it for code a person should read rather than write; that is a CodeBlock. Long values make long state lines, so keep it off surfaces where the agent view must stay terse.";
|
|
2145
|
+
readonly status: "experimental";
|
|
2146
|
+
readonly props: {
|
|
2147
|
+
readonly label: {
|
|
2148
|
+
readonly kind: "string";
|
|
2149
|
+
readonly description: "What the area holds. Names it for a screen reader and derives the tool name, so prefer a noun phrase such as \"Mission notes\".";
|
|
2150
|
+
readonly required: true;
|
|
2151
|
+
};
|
|
2152
|
+
readonly value: {
|
|
2153
|
+
readonly kind: "string";
|
|
2154
|
+
readonly description: "The area's current text. The area is fully controlled.";
|
|
2155
|
+
readonly required: true;
|
|
2156
|
+
};
|
|
2157
|
+
readonly onChange: {
|
|
2158
|
+
readonly kind: "handler";
|
|
2159
|
+
readonly description: "Called with the new text on every change. The fill tool drives a real input event, so this runs for agent fills too.";
|
|
2160
|
+
readonly required: true;
|
|
2161
|
+
};
|
|
2162
|
+
readonly rows: {
|
|
2163
|
+
readonly kind: "number";
|
|
2164
|
+
readonly description: "The visible line count before scrolling.";
|
|
2165
|
+
readonly default: 4;
|
|
2166
|
+
};
|
|
2167
|
+
readonly placeholder: {
|
|
2168
|
+
readonly kind: "string";
|
|
2169
|
+
readonly description: "Ghost text shown while the area is empty.";
|
|
2170
|
+
};
|
|
2171
|
+
readonly hint: {
|
|
2172
|
+
readonly kind: "string";
|
|
2173
|
+
readonly description: "Guidance shown under the area and carried into the agent view. Replaced by error while one is set.";
|
|
2174
|
+
};
|
|
2175
|
+
readonly error: {
|
|
2176
|
+
readonly kind: "string";
|
|
2177
|
+
readonly description: "A validation message. Marks the area invalid for people, screen readers, and agents alike.";
|
|
2178
|
+
};
|
|
2179
|
+
readonly name: {
|
|
2180
|
+
readonly kind: "string";
|
|
2181
|
+
readonly description: "The native form name submitted with the surrounding form.";
|
|
2182
|
+
};
|
|
2183
|
+
readonly disabled: {
|
|
2184
|
+
readonly kind: "boolean";
|
|
2185
|
+
readonly description: "Disable the area and unregister its fill tool.";
|
|
2186
|
+
readonly default: false;
|
|
2187
|
+
};
|
|
2188
|
+
readonly required: {
|
|
2189
|
+
readonly kind: "boolean";
|
|
2190
|
+
readonly description: "Mark the area required, visually and in the agent view.";
|
|
2191
|
+
readonly default: false;
|
|
2192
|
+
};
|
|
2193
|
+
readonly agentName: {
|
|
2194
|
+
readonly kind: "string";
|
|
2195
|
+
readonly description: "Override the label used to derive the tool name, when two areas on a page would otherwise collide.";
|
|
2196
|
+
};
|
|
2197
|
+
readonly agentTool: {
|
|
2198
|
+
readonly kind: "boolean";
|
|
2199
|
+
readonly description: "Set false to render the area without registering a fill tool.";
|
|
2200
|
+
readonly default: true;
|
|
2201
|
+
};
|
|
2202
|
+
};
|
|
2203
|
+
readonly state: {
|
|
2204
|
+
readonly value: {
|
|
2205
|
+
readonly description: "The area's current text.";
|
|
2206
|
+
readonly attribute: "data-sprint-value";
|
|
2207
|
+
};
|
|
2208
|
+
readonly empty: {
|
|
2209
|
+
readonly description: "Present while the area holds no text.";
|
|
2210
|
+
readonly attribute: "data-sprint-empty";
|
|
2211
|
+
};
|
|
2212
|
+
readonly disabled: {
|
|
2213
|
+
readonly description: "Present when the area cannot be edited.";
|
|
2214
|
+
readonly attribute: "data-sprint-disabled";
|
|
2215
|
+
};
|
|
2216
|
+
readonly required: {
|
|
2217
|
+
readonly description: "Present when the area must be filled.";
|
|
2218
|
+
readonly attribute: "data-sprint-required";
|
|
2219
|
+
};
|
|
2220
|
+
readonly invalid: {
|
|
2221
|
+
readonly description: "Present while an error is set.";
|
|
2222
|
+
readonly attribute: "data-sprint-invalid";
|
|
2223
|
+
};
|
|
2224
|
+
};
|
|
2225
|
+
readonly tools: {
|
|
2226
|
+
readonly fill: AgentToolSpec;
|
|
2227
|
+
};
|
|
2228
|
+
readonly agentView: {
|
|
2229
|
+
readonly example: "- **Textarea** \"Mission notes\" [empty] → tool `fill-mission-notes`\n - part `hint` \"What the relief crew needs to know\"";
|
|
2230
|
+
};
|
|
2231
|
+
readonly examples: readonly [{
|
|
2232
|
+
readonly title: "A notes area";
|
|
2233
|
+
readonly description: "Label, hint, and control are one component. In agent view it renders a live textarea an agent can type into.";
|
|
2234
|
+
readonly code: "<Textarea\n label=\"Mission notes\"\n value={notes}\n onChange={setNotes}\n hint=\"What the relief crew needs to know\"\n/>";
|
|
2235
|
+
}, {
|
|
2236
|
+
readonly title: "A required area with an error";
|
|
2237
|
+
readonly description: "The error replaces the hint and marks the area invalid on every surface.";
|
|
2238
|
+
readonly code: "<Textarea\n label=\"Abort reason\"\n value={reason}\n onChange={setReason}\n required\n rows={3}\n error=\"State the reason before aborting.\"\n/>";
|
|
2239
|
+
}];
|
|
2240
|
+
readonly a11y: {
|
|
2241
|
+
readonly role: "textbox";
|
|
2242
|
+
readonly keyboard: readonly ["Standard text editing", "Enter inserts a line break"];
|
|
2243
|
+
readonly notes: "The label element is associated via htmlFor. An error sets aria-invalid and is linked with aria-describedby, as is the hint.";
|
|
2244
|
+
};
|
|
2245
|
+
};
|
|
2246
|
+
|
|
2247
|
+
export declare interface TextareaProps extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
|
|
2248
|
+
label: string;
|
|
2249
|
+
value: string;
|
|
2250
|
+
onChange: (value: string) => void;
|
|
2251
|
+
rows?: number;
|
|
2252
|
+
placeholder?: string;
|
|
2253
|
+
hint?: string;
|
|
2254
|
+
error?: string;
|
|
2255
|
+
name?: string;
|
|
2256
|
+
disabled?: boolean;
|
|
2257
|
+
required?: boolean;
|
|
2258
|
+
agentName?: string;
|
|
2259
|
+
agentTool?: boolean;
|
|
2260
|
+
}
|
|
2261
|
+
|
|
2262
|
+
export declare function TextInput(props: TextInputProps): JSX.Element;
|
|
2263
|
+
|
|
2264
|
+
export declare const textInputMeta: {
|
|
2265
|
+
readonly name: "TextInput";
|
|
2266
|
+
readonly category: "input";
|
|
2267
|
+
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.";
|
|
2268
|
+
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.";
|
|
2269
|
+
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.";
|
|
2270
|
+
readonly status: "experimental";
|
|
2271
|
+
readonly props: {
|
|
2272
|
+
readonly label: {
|
|
2273
|
+
readonly kind: "string";
|
|
2274
|
+
readonly description: "What the field holds. Names the field for a screen reader and derives the tool name, so prefer a noun phrase such as \"Callsign\".";
|
|
2275
|
+
readonly required: true;
|
|
2276
|
+
};
|
|
2277
|
+
readonly value: {
|
|
2278
|
+
readonly kind: "string";
|
|
2279
|
+
readonly description: "The field's current text. The field is fully controlled.";
|
|
2280
|
+
readonly required: true;
|
|
2281
|
+
};
|
|
2282
|
+
readonly onChange: {
|
|
2283
|
+
readonly kind: "handler";
|
|
2284
|
+
readonly description: "Called with the new text on every change. The fill tool drives a real input event, so this runs for agent fills too.";
|
|
2285
|
+
readonly required: true;
|
|
2286
|
+
};
|
|
2287
|
+
readonly type: {
|
|
2288
|
+
readonly kind: "enum";
|
|
2289
|
+
readonly description: "The input type. \"password\" masks the field everywhere: the value never appears in agent attributes, the agent view, or tool results.";
|
|
2290
|
+
readonly values: readonly ["text", "email", "url", "search", "password"];
|
|
2291
|
+
readonly default: "text";
|
|
2292
|
+
};
|
|
2293
|
+
readonly placeholder: {
|
|
2294
|
+
readonly kind: "string";
|
|
2295
|
+
readonly description: "Ghost text shown while the field is empty.";
|
|
2296
|
+
};
|
|
2297
|
+
readonly hint: {
|
|
2298
|
+
readonly kind: "string";
|
|
2299
|
+
readonly description: "Guidance shown under the field and carried into the agent view. Replaced by error while one is set.";
|
|
2300
|
+
};
|
|
2301
|
+
readonly error: {
|
|
2302
|
+
readonly kind: "string";
|
|
2303
|
+
readonly description: "A validation message. Marks the field invalid for people, screen readers, and agents alike.";
|
|
2304
|
+
};
|
|
2305
|
+
readonly name: {
|
|
2306
|
+
readonly kind: "string";
|
|
2307
|
+
readonly description: "The native form name submitted with the surrounding form.";
|
|
2308
|
+
};
|
|
2309
|
+
readonly autoComplete: {
|
|
2310
|
+
readonly kind: "string";
|
|
2311
|
+
readonly description: "The native autocomplete hint, forwarded to the input.";
|
|
2312
|
+
};
|
|
2313
|
+
readonly disabled: {
|
|
2314
|
+
readonly kind: "boolean";
|
|
2315
|
+
readonly description: "Disable the field and unregister its fill tool.";
|
|
2316
|
+
readonly default: false;
|
|
2317
|
+
};
|
|
2318
|
+
readonly required: {
|
|
2319
|
+
readonly kind: "boolean";
|
|
2320
|
+
readonly description: "Mark the field required, visually and in the agent view.";
|
|
2321
|
+
readonly default: false;
|
|
2322
|
+
};
|
|
2323
|
+
readonly agentName: {
|
|
2324
|
+
readonly kind: "string";
|
|
2325
|
+
readonly description: "Override the label used to derive the tool name, when two fields on a page would otherwise collide.";
|
|
2326
|
+
};
|
|
2327
|
+
readonly agentTool: {
|
|
2328
|
+
readonly kind: "boolean";
|
|
2329
|
+
readonly description: "Set false to render the field without registering a fill tool.";
|
|
2330
|
+
readonly default: true;
|
|
2331
|
+
};
|
|
2332
|
+
};
|
|
2333
|
+
readonly state: {
|
|
2334
|
+
readonly value: {
|
|
2335
|
+
readonly description: "The field's current text. Never present on a password field, which reflects filled instead.";
|
|
2336
|
+
readonly attribute: "data-sprint-value";
|
|
2337
|
+
};
|
|
2338
|
+
readonly filled: {
|
|
2339
|
+
readonly description: "Present when a password field holds text.";
|
|
2340
|
+
readonly attribute: "data-sprint-filled";
|
|
2341
|
+
};
|
|
2342
|
+
readonly empty: {
|
|
2343
|
+
readonly description: "Present while the field holds no text.";
|
|
2344
|
+
readonly attribute: "data-sprint-empty";
|
|
2345
|
+
};
|
|
2346
|
+
readonly disabled: {
|
|
2347
|
+
readonly description: "Present when the field cannot be edited.";
|
|
2348
|
+
readonly attribute: "data-sprint-disabled";
|
|
2349
|
+
};
|
|
2350
|
+
readonly required: {
|
|
2351
|
+
readonly description: "Present when the field must be filled.";
|
|
2352
|
+
readonly attribute: "data-sprint-required";
|
|
2353
|
+
};
|
|
2354
|
+
readonly invalid: {
|
|
2355
|
+
readonly description: "Present while an error is set.";
|
|
2356
|
+
readonly attribute: "data-sprint-invalid";
|
|
2357
|
+
};
|
|
2358
|
+
};
|
|
2359
|
+
readonly tools: {
|
|
2360
|
+
readonly fill: AgentToolSpec;
|
|
2361
|
+
};
|
|
2362
|
+
readonly agentView: {
|
|
2363
|
+
readonly example: "- **TextInput** \"Callsign\" [empty, required] → tool `fill-callsign`\n - part `hint` \"Uppercase, three to eight letters\"";
|
|
2364
|
+
};
|
|
2365
|
+
readonly examples: readonly [{
|
|
2366
|
+
readonly title: "A labelled field";
|
|
2367
|
+
readonly description: "Label, hint, and control are one component. In agent view the hint becomes a part line and the field renders a live input an agent can type into.";
|
|
2368
|
+
readonly code: "<TextInput\n label=\"Callsign\"\n value={callsign}\n onChange={setCallsign}\n hint=\"Uppercase, three to eight letters\"\n placeholder=\"NOMAD\"\n/>";
|
|
2369
|
+
}, {
|
|
2370
|
+
readonly title: "A validation error";
|
|
2371
|
+
readonly description: "The error replaces the hint, marks the field invalid on every surface, and reads back through the fill tool's result.";
|
|
2372
|
+
readonly code: "<TextInput\n label=\"Frequency\"\n value={frequency}\n onChange={setFrequency}\n required\n error=\"Out of band. Use 118.000 to 136.975.\"\n/>";
|
|
2373
|
+
}, {
|
|
2374
|
+
readonly title: "A password";
|
|
2375
|
+
readonly description: "The value stays off every agent surface: state reflects filled or empty, and tool results never echo the text.";
|
|
2376
|
+
readonly code: "<TextInput\n label=\"Access code\"\n type=\"password\"\n value={code}\n onChange={setCode}\n autoComplete=\"current-password\"\n/>";
|
|
2377
|
+
}];
|
|
2378
|
+
readonly a11y: {
|
|
2379
|
+
readonly role: "textbox";
|
|
2380
|
+
readonly keyboard: readonly ["Standard text editing", "Tab moves through the field"];
|
|
2381
|
+
readonly notes: "The label element is associated via htmlFor. An error sets aria-invalid and is linked with aria-describedby, as is the hint. Focus is an offset keyline, never a rounded ring.";
|
|
2382
|
+
};
|
|
2383
|
+
};
|
|
2384
|
+
|
|
2385
|
+
export declare interface TextInputProps extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
|
|
2386
|
+
label: string;
|
|
2387
|
+
value: string;
|
|
2388
|
+
onChange: (value: string) => void;
|
|
2389
|
+
type?: TextInputType;
|
|
2390
|
+
placeholder?: string;
|
|
2391
|
+
hint?: string;
|
|
2392
|
+
error?: string;
|
|
2393
|
+
name?: string;
|
|
2394
|
+
autoComplete?: string;
|
|
2395
|
+
disabled?: boolean;
|
|
2396
|
+
required?: boolean;
|
|
2397
|
+
agentName?: string;
|
|
2398
|
+
agentTool?: boolean;
|
|
2399
|
+
}
|
|
2400
|
+
|
|
2401
|
+
export declare type TextInputType = "text" | "email" | "url" | "search" | "password";
|
|
2402
|
+
|
|
2403
|
+
export declare const textMeta: {
|
|
2404
|
+
readonly name: "Text";
|
|
2405
|
+
readonly category: "typography";
|
|
2406
|
+
readonly summary: "A run of prose, sized and toned from the semantic scale. In agent view it renders as its own text content, so an agent reads the words rather than inferring them from styling.";
|
|
2407
|
+
readonly whenToUse: "Use it for every paragraph, caption, note, and inline status line, so tone carries meaning instead of an ad-hoc colour. tone=\"muted\" is the small print under a heading, tone=\"warning\" and tone=\"danger\" state that something is wrong, and tone=\"action\" confirms something is live.";
|
|
2408
|
+
readonly whenNotToUse: "Do not use it for a section title; that is Heading. Do not put components inside it: it flattens its children to a single string for the agent view, so a nested Button would lose its tool.";
|
|
2409
|
+
readonly status: "experimental";
|
|
2410
|
+
readonly props: {
|
|
2411
|
+
readonly children: {
|
|
2412
|
+
readonly kind: "node";
|
|
2413
|
+
readonly description: "The prose. Inline markup such as code or strong is fine; components are not.";
|
|
2414
|
+
readonly required: true;
|
|
2415
|
+
};
|
|
2416
|
+
readonly tone: {
|
|
2417
|
+
readonly kind: "enum";
|
|
2418
|
+
readonly description: "What the text means, not just how it looks. Agents read this off the attribute.";
|
|
2419
|
+
readonly values: readonly ["default", "muted", "action", "info", "warning", "danger"];
|
|
2420
|
+
readonly default: "default";
|
|
2421
|
+
};
|
|
2422
|
+
readonly size: {
|
|
2423
|
+
readonly kind: "enum";
|
|
2424
|
+
readonly description: "Type size. \"small\" is the annotation size used for notes and captions.";
|
|
2425
|
+
readonly values: readonly ["small", "normal"];
|
|
2426
|
+
readonly default: "normal";
|
|
2427
|
+
};
|
|
2428
|
+
readonly as: {
|
|
2429
|
+
readonly kind: "enum";
|
|
2430
|
+
readonly description: "The element to render. Use span when the text sits inside another line of text.";
|
|
2431
|
+
readonly values: readonly ["p", "span", "div"];
|
|
2432
|
+
readonly default: "p";
|
|
2433
|
+
};
|
|
2434
|
+
};
|
|
2435
|
+
readonly state: {
|
|
2436
|
+
readonly tone: {
|
|
2437
|
+
readonly description: "What the text is saying about the thing it describes.";
|
|
2438
|
+
readonly attribute: "data-sprint-tone";
|
|
2439
|
+
readonly values: readonly ["default", "muted", "action", "info", "warning", "danger"];
|
|
2440
|
+
};
|
|
2441
|
+
readonly size: {
|
|
2442
|
+
readonly description: "The type size in use.";
|
|
2443
|
+
readonly attribute: "data-sprint-size";
|
|
2444
|
+
readonly values: readonly ["small", "normal"];
|
|
2445
|
+
};
|
|
2446
|
+
};
|
|
2447
|
+
readonly agentView: {
|
|
2448
|
+
readonly example: "- **Text** \"Tools stay registered across a view switch.\" [tone=muted]";
|
|
2449
|
+
};
|
|
2450
|
+
readonly examples: readonly [{
|
|
2451
|
+
readonly title: "A lede";
|
|
2452
|
+
readonly code: "<Text>Every component renders normally for people and as text for agents.</Text>";
|
|
2453
|
+
}, {
|
|
2454
|
+
readonly title: "A note under a heading";
|
|
2455
|
+
readonly description: "The small print that would otherwise be an untyped grey span.";
|
|
2456
|
+
readonly code: "<Text tone=\"muted\" size=\"small\">Registered while the button is enabled.</Text>";
|
|
2457
|
+
}, {
|
|
2458
|
+
readonly title: "A live status line";
|
|
2459
|
+
readonly description: "Tone is the whole message here, so an agent reading the attribute learns the same thing a person learns from the colour.";
|
|
2460
|
+
readonly code: "<Text tone={ready ? \"action\" : \"warning\"} size=\"small\">\n {ready ? \"WebMCP is available in this browser.\" : \"WebMCP is unavailable here.\"}\n</Text>";
|
|
2461
|
+
}];
|
|
2462
|
+
};
|
|
2463
|
+
|
|
2464
|
+
export declare interface TextProps extends Omit<ComponentPropsWithRef<"p">, "ref"> {
|
|
2465
|
+
tone?: TextTone;
|
|
2466
|
+
size?: TextSize;
|
|
2467
|
+
as?: "p" | "span" | "div";
|
|
2468
|
+
ref?: Ref<HTMLParagraphElement> | Ref<HTMLSpanElement> | Ref<HTMLDivElement>;
|
|
2469
|
+
}
|
|
2470
|
+
|
|
2471
|
+
export declare type TextSize = "small" | "normal";
|
|
2472
|
+
|
|
2473
|
+
export declare type TextTone = "default" | "muted" | "action" | "info" | "warning" | "danger";
|
|
2474
|
+
|
|
2475
|
+
export declare const THEME_ATTRIBUTE = "data-sprint-theme";
|
|
2476
|
+
|
|
2477
|
+
export declare interface Token {
|
|
2478
|
+
kind: TokenKind;
|
|
2479
|
+
text: string;
|
|
2480
|
+
}
|
|
2481
|
+
|
|
2482
|
+
export declare function tokenize(code: string): Token[];
|
|
2483
|
+
|
|
2484
|
+
export declare type TokenKind = "plain" | "tag" | "attr" | "string" | "keyword" | "number" | "punct" | "comment";
|
|
2485
|
+
|
|
2486
|
+
export declare function toMarkdown(input: AgentNode | readonly AgentNode[], options?: MarkdownOptions): string;
|
|
2487
|
+
|
|
2488
|
+
export declare const TOOL_ATTRIBUTE = "data-sprint-tool";
|
|
2489
|
+
|
|
2490
|
+
export declare const TOOL_DESCRIPTION_LIMIT = 500;
|
|
2491
|
+
|
|
2492
|
+
export declare const TOOL_NAMING_CONVENTION = "<scope>-<verb>-<label-slug>";
|
|
2493
|
+
|
|
2494
|
+
export declare const TOOL_OUTPUT_LIMIT = 1500;
|
|
2495
|
+
|
|
2496
|
+
export declare interface ToolAnnotations {
|
|
2497
|
+
readOnlyHint?: boolean;
|
|
2498
|
+
untrustedContentHint?: boolean;
|
|
2499
|
+
}
|
|
2500
|
+
|
|
2501
|
+
export declare interface ToolDescriptor {
|
|
2502
|
+
name: string;
|
|
2503
|
+
description: string;
|
|
2504
|
+
inputSchema: JsonSchemaObject;
|
|
2505
|
+
execute: (inputs: Record<string, unknown>, context: ToolExecuteContext) => Promise<string | null> | string | null;
|
|
2506
|
+
annotations?: ToolAnnotations;
|
|
2507
|
+
}
|
|
2508
|
+
|
|
2509
|
+
export declare interface ToolExecuteContext {
|
|
2510
|
+
signal: AbortSignal;
|
|
2511
|
+
}
|
|
2512
|
+
|
|
2513
|
+
export declare function toolName(scope: readonly string[], verb: string, label: string): string | null;
|
|
2514
|
+
|
|
2515
|
+
export declare function useAgentControls(): SprintAgentControls;
|
|
2516
|
+
|
|
2517
|
+
export declare function useAgentFormat(): AgentFormatter;
|
|
2518
|
+
|
|
2519
|
+
export declare function useAgentScope(): readonly string[];
|
|
2520
|
+
|
|
2521
|
+
export declare function useAgentTool(options: UseAgentToolOptions): string | undefined;
|
|
2522
|
+
|
|
2523
|
+
export declare interface UseAgentToolOptions {
|
|
2524
|
+
spec: AgentToolSpec;
|
|
2525
|
+
label: string | undefined;
|
|
2526
|
+
nameOverride?: string | undefined;
|
|
2527
|
+
inputSchema?: JsonSchemaObject | undefined;
|
|
2528
|
+
enabled?: boolean;
|
|
2529
|
+
execute: (inputs: Record<string, unknown>, context: ToolExecuteContext) => Promise<string | null> | string | null;
|
|
2530
|
+
}
|
|
2531
|
+
|
|
2532
|
+
export declare function useSprintView(): SprintView;
|
|
2533
|
+
|
|
2534
|
+
export declare function useSprintViewControl(): SprintViewValue;
|
|
2535
|
+
|
|
2536
|
+
export declare function validateInputs(schema: JsonSchemaObject, inputs: Record<string, unknown>): string | null;
|
|
2537
|
+
|
|
2538
|
+
export declare const version: string;
|
|
2539
|
+
|
|
2540
|
+
export declare const VIEW_ATTRIBUTE = "data-sprint-view";
|
|
2541
|
+
|
|
2542
|
+
export declare const VIEW_COPY_ATTRIBUTE = "data-sprint-view-copy";
|
|
2543
|
+
|
|
2544
|
+
export { }
|