@cueplusplus/ui 0.14.0 → 0.14.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/CHANGELOG.md +183 -0
- package/dist/primitives/chip.d.ts +1 -1
- package/dist/system/theme-provider.d.ts +25 -3
- package/dist/system/theme-provider.js +27 -2
- package/manifest/components/accordion.json +16 -4
- package/manifest/components/activity-graph.json +15 -3
- package/manifest/components/agent-card.json +15 -3
- package/manifest/components/agent-handoff.json +14 -3
- package/manifest/components/agent-mode-badge.json +12 -3
- package/manifest/components/agent-pile.json +13 -3
- package/manifest/components/agent-plan.json +13 -3
- package/manifest/components/agent-status.json +14 -3
- package/manifest/components/agent-surface.json +12 -3
- package/manifest/components/alert-dialog.json +14 -3
- package/manifest/components/animated-number.json +12 -3
- package/manifest/components/app-window-frame.json +13 -3
- package/manifest/components/approval-card.json +14 -3
- package/manifest/components/artifact-card.json +14 -3
- package/manifest/components/ask-box.json +13 -3
- package/manifest/components/audience-icon.json +11 -3
- package/manifest/components/autocomplete.json +15 -3
- package/manifest/components/avatar-group.json +15 -4
- package/manifest/components/avatar.json +16 -4
- package/manifest/components/background-inbox.json +14 -3
- package/manifest/components/band.json +14 -4
- package/manifest/components/breadcrumb.json +14 -3
- package/manifest/components/button-group.json +13 -3
- package/manifest/components/calendar.json +15 -4
- package/manifest/components/canvas-split-body.json +13 -3
- package/manifest/components/canvas-split-document.json +11 -3
- package/manifest/components/canvas-split-header.json +13 -3
- package/manifest/components/canvas-split-line.json +13 -3
- package/manifest/components/canvas-split-message.json +13 -3
- package/manifest/components/canvas-split-thread.json +11 -3
- package/manifest/components/canvas-split.json +13 -3
- package/manifest/components/card.json +14 -3
- package/manifest/components/carousel.json +12 -3
- package/manifest/components/catalogue-icon.json +11 -3
- package/manifest/components/channel-beta-icon.json +11 -3
- package/manifest/components/channel-matrix.json +11 -3
- package/manifest/components/channel-released-icon.json +11 -3
- package/manifest/components/chart-container.json +11 -3
- package/manifest/components/chart-ramp.json +12 -3
- package/manifest/components/chart-swatch.json +11 -3
- package/manifest/components/chart-tooltip-content.json +12 -4
- package/manifest/components/chart.json +14 -3
- package/manifest/components/chat-empty-state.json +13 -3
- package/manifest/components/chat-panel-assistant-message.json +11 -3
- package/manifest/components/chat-panel-composer.json +11 -3
- package/manifest/components/chat-panel-messages.json +11 -3
- package/manifest/components/chat-panel-typing.json +11 -3
- package/manifest/components/chat-panel-user-message.json +11 -3
- package/manifest/components/chat-panel.json +13 -3
- package/manifest/components/checkbox-group.json +15 -4
- package/manifest/components/checkpoint-history.json +13 -3
- package/manifest/components/clamp.json +12 -3
- package/manifest/components/cli-tool-icon.json +11 -3
- package/manifest/components/code-diff.json +14 -3
- package/manifest/components/code-runner.json +13 -3
- package/manifest/components/collapsible.json +13 -3
- package/manifest/components/color-area.json +12 -4
- package/manifest/components/color-field.json +12 -3
- package/manifest/components/color-picker.json +14 -4
- package/manifest/components/color-slider.json +12 -3
- package/manifest/components/color-swatch.json +13 -3
- package/manifest/components/colors-section.json +11 -3
- package/manifest/components/combobox.json +15 -4
- package/manifest/components/compaction-row.json +12 -3
- package/manifest/components/comparison-card.json +12 -3
- package/manifest/components/composer-actions.json +11 -3
- package/manifest/components/composer-attach-button.json +11 -3
- package/manifest/components/composer-attachment-chip.json +13 -3
- package/manifest/components/composer-attachments.json +11 -3
- package/manifest/components/composer-bar.json +12 -3
- package/manifest/components/composer-command-item.json +13 -3
- package/manifest/components/composer-context.json +13 -3
- package/manifest/components/composer-input.json +11 -3
- package/manifest/components/composer-menu-item.json +12 -3
- package/manifest/components/composer-menu.json +13 -3
- package/manifest/components/composer-model-item.json +13 -3
- package/manifest/components/composer-model-trigger.json +13 -3
- package/manifest/components/composer-person-item.json +13 -3
- package/manifest/components/composer-send.json +13 -3
- package/manifest/components/composer-toolbar.json +11 -3
- package/manifest/components/composer-voice-button.json +11 -3
- package/manifest/components/composer-voice.json +13 -3
- package/manifest/components/composer.json +14 -4
- package/manifest/components/computer-use.json +13 -3
- package/manifest/components/confidence-marker.json +11 -3
- package/manifest/components/connection-state.json +12 -3
- package/manifest/components/container.json +12 -3
- package/manifest/components/context-breakdown.json +12 -4
- package/manifest/components/context-menu.json +14 -4
- package/manifest/components/context-usage.json +14 -4
- package/manifest/components/conversation-search.json +13 -3
- package/manifest/components/copy-button.json +14 -3
- package/manifest/components/cost-meter.json +12 -3
- package/manifest/components/cue-portal-frame.json +12 -3
- package/manifest/components/data-table-pagination.json +13 -3
- package/manifest/components/data-table-toolbar.json +12 -3
- package/manifest/components/date-field.json +12 -3
- package/manifest/components/date-picker.json +13 -3
- package/manifest/components/date-range-picker.json +11 -3
- package/manifest/components/day-separator.json +12 -3
- package/manifest/components/delegation-card.json +14 -4
- package/manifest/components/density.json +12 -2
- package/manifest/components/description-list.json +15 -4
- package/manifest/components/diagram.json +13 -3
- package/manifest/components/disclosure.json +15 -4
- package/manifest/components/dmx-bar.json +12 -3
- package/manifest/components/dmx-strip.json +11 -3
- package/manifest/components/document-reference.json +13 -3
- package/manifest/components/draft-restore.json +13 -3
- package/manifest/components/drawer.json +13 -4
- package/manifest/components/edit-message.json +13 -3
- package/manifest/components/elements-command-palette.json +13 -3
- package/manifest/components/elements-composer.json +13 -3
- package/manifest/components/elements-data-table.json +11 -3
- package/manifest/components/elements-timeline.json +13 -3
- package/manifest/components/elicitation-form.json +13 -3
- package/manifest/components/empty-state-composer.json +11 -3
- package/manifest/components/empty-state-greeting.json +11 -3
- package/manifest/components/empty-state-suggestion.json +11 -3
- package/manifest/components/empty-state-suggestions.json +11 -3
- package/manifest/components/empty-state.json +15 -4
- package/manifest/components/end-of-turn-summary.json +14 -3
- package/manifest/components/env-var-input.json +15 -4
- package/manifest/components/error-state.json +13 -3
- package/manifest/components/export-dialog.json +10 -2
- package/manifest/components/eyebrow.json +14 -4
- package/manifest/components/feedback-dialog.json +13 -3
- package/manifest/components/field-description.json +15 -4
- package/manifest/components/field-error.json +15 -4
- package/manifest/components/field-label.json +15 -4
- package/manifest/components/file-tree.json +13 -3
- package/manifest/components/file-upload.json +14 -4
- package/manifest/components/flow-background.json +11 -3
- package/manifest/components/flow-controls.json +11 -3
- package/manifest/components/flow-graph.json +13 -3
- package/manifest/components/folder-icon.json +12 -3
- package/manifest/components/frac.json +11 -3
- package/manifest/components/generation-loader.json +13 -3
- package/manifest/components/generative-ui.json +16 -4
- package/manifest/components/grid.json +14 -3
- package/manifest/components/group-bar.json +13 -3
- package/manifest/components/guardrail-notice.json +13 -3
- package/manifest/components/hover-card.json +14 -4
- package/manifest/components/icon-button.json +15 -3
- package/manifest/components/image-generation.json +13 -3
- package/manifest/components/info-tip.json +15 -4
- package/manifest/components/inline-citation.json +13 -3
- package/manifest/components/input-group.json +15 -4
- package/manifest/components/item.json +15 -4
- package/manifest/components/job-progress.json +14 -3
- package/manifest/components/kbd.json +14 -3
- package/manifest/components/launcher-bubble.json +14 -3
- package/manifest/components/link.json +13 -3
- package/manifest/components/live-region-announcer.json +16 -4
- package/manifest/components/log-viewer.json +15 -3
- package/manifest/components/map-answer.json +13 -3
- package/manifest/components/markdown-text.json +16 -4
- package/manifest/components/math-block.json +13 -3
- package/manifest/components/mcp-server-icon.json +12 -3
- package/manifest/components/mcp-server-panel.json +13 -3
- package/manifest/components/memory-chips.json +12 -3
- package/manifest/components/menubar.json +13 -3
- package/manifest/components/message-actions.json +14 -4
- package/manifest/components/message-attachments.json +12 -3
- package/manifest/components/message-branches.json +12 -3
- package/manifest/components/message-list.json +12 -3
- package/manifest/components/message-pair.json +12 -3
- package/manifest/components/message-queue.json +13 -3
- package/manifest/components/message-timing.json +13 -3
- package/manifest/components/message.json +12 -3
- package/manifest/components/mobile-composer.json +14 -3
- package/manifest/components/model-picker.json +12 -3
- package/manifest/components/multi-select.json +16 -4
- package/manifest/components/musical-time-input.json +11 -3
- package/manifest/components/navigation-menu.json +13 -3
- package/manifest/components/node-card.json +11 -3
- package/manifest/components/node-handle.json +11 -3
- package/manifest/components/number-field.json +15 -3
- package/manifest/components/number-ticker.json +12 -3
- package/manifest/components/onboarding.json +12 -3
- package/manifest/components/otp-field.json +14 -3
- package/manifest/components/page-shell.json +14 -4
- package/manifest/components/pagination.json +14 -3
- package/manifest/components/panel-header.json +14 -4
- package/manifest/components/password-input.json +15 -4
- package/manifest/components/permission-grant.json +13 -3
- package/manifest/components/permission-scopes.json +14 -3
- package/manifest/components/piano-keyboard.json +11 -3
- package/manifest/components/preset-section.json +11 -3
- package/manifest/components/progress.json +14 -3
- package/manifest/components/prompt-library.json +12 -3
- package/manifest/components/queue-dock.json +14 -3
- package/manifest/components/quota-banner.json +12 -3
- package/manifest/components/quote-reply.json +12 -3
- package/manifest/components/radio-group.json +15 -4
- package/manifest/components/radio.json +15 -4
- package/manifest/components/rating.json +15 -4
- package/manifest/components/read-aloud.json +13 -3
- package/manifest/components/reasoning-effort.json +12 -3
- package/manifest/components/reasoning-panel.json +13 -3
- package/manifest/components/recommendation-card.json +12 -3
- package/manifest/components/regenerate-menu.json +12 -3
- package/manifest/components/replay-player.json +14 -3
- package/manifest/components/research-report.json +12 -3
- package/manifest/components/resizable.json +13 -3
- package/manifest/components/retrieval-chunks.json +13 -3
- package/manifest/components/revert-dock.json +14 -3
- package/manifest/components/reviewable-diff.json +12 -3
- package/manifest/components/risk-badge.json +14 -3
- package/manifest/components/schedule-card.json +12 -3
- package/manifest/components/score-breakdown.json +13 -3
- package/manifest/components/scroll-anchor.json +12 -3
- package/manifest/components/scroll-area.json +13 -3
- package/manifest/components/scrollable-tabs-list.json +14 -4
- package/manifest/components/seam-cell.json +13 -4
- package/manifest/components/seam-grid.json +14 -3
- package/manifest/components/seam-list.json +13 -3
- package/manifest/components/search-input.json +15 -4
- package/manifest/components/section-header.json +14 -3
- package/manifest/components/segmented-control.json +15 -3
- package/manifest/components/separator.json +14 -3
- package/manifest/components/settings-panel.json +13 -3
- package/manifest/components/shape-section.json +11 -3
- package/manifest/components/shared-conversation.json +12 -3
- package/manifest/components/sheet.json +14 -4
- package/manifest/components/shimmer-label.json +12 -3
- package/manifest/components/sidebar.json +15 -4
- package/manifest/components/signal-edge.json +13 -4
- package/manifest/components/skeleton.json +16 -4
- package/manifest/components/skill-icon.json +12 -3
- package/manifest/components/slider.json +14 -3
- package/manifest/components/sources.json +12 -3
- package/manifest/components/sparkline.json +14 -4
- package/manifest/components/speaker-identity.json +11 -3
- package/manifest/components/spec-sheet.json +13 -4
- package/manifest/components/spectrum-visualizer.json +11 -3
- package/manifest/components/spinner.json +16 -4
- package/manifest/components/stack-icon.json +12 -3
- package/manifest/components/stack.json +14 -3
- package/manifest/components/stacks-matrix-icon.json +11 -3
- package/manifest/components/stat.json +14 -3
- package/manifest/components/status-dot.json +16 -4
- package/manifest/components/stepper.json +15 -4
- package/manifest/components/stopped-run.json +13 -4
- package/manifest/components/streaming-text.json +12 -3
- package/manifest/components/sub.json +11 -3
- package/manifest/components/subagent-list.json +13 -3
- package/manifest/components/suggestions.json +12 -3
- package/manifest/components/sup.json +11 -3
- package/manifest/components/swap-label.json +12 -3
- package/manifest/components/tags-input.json +15 -4
- package/manifest/components/tail-status.json +14 -3
- package/manifest/components/terminal-block.json +13 -3
- package/manifest/components/terminal-frame.json +14 -3
- package/manifest/components/textarea.json +15 -4
- package/manifest/components/theme-configurator.json +12 -3
- package/manifest/components/theme-provider.json +1 -1
- package/manifest/components/thinking-indicator.json +12 -3
- package/manifest/components/thread-list.json +12 -3
- package/manifest/components/thread-search.json +12 -3
- package/manifest/components/threshold-rail.json +13 -3
- package/manifest/components/time-boundary.json +13 -3
- package/manifest/components/time-field.json +15 -4
- package/manifest/components/timeline-ruler.json +13 -3
- package/manifest/components/timeline.json +13 -3
- package/manifest/components/title-bar.json +13 -3
- package/manifest/components/todo-list.json +12 -3
- package/manifest/components/toggle-group.json +15 -4
- package/manifest/components/toggle.json +15 -4
- package/manifest/components/token-editor.json +12 -3
- package/manifest/components/tool-call.json +13 -3
- package/manifest/components/tool-error.json +14 -4
- package/manifest/components/tool-group.json +12 -3
- package/manifest/components/tool-timeline.json +14 -4
- package/manifest/components/toolbar.json +14 -4
- package/manifest/components/trace-waterfall.json +12 -3
- package/manifest/components/tree-visibility-toggle.json +13 -3
- package/manifest/components/tree.json +14 -3
- package/manifest/components/turn-footer.json +14 -3
- package/manifest/components/two-step-button.json +14 -3
- package/manifest/components/typing-indicator.json +12 -3
- package/manifest/components/universe-grid.json +14 -4
- package/manifest/components/unread-divider.json +14 -4
- package/manifest/components/usage-chart.json +14 -3
- package/manifest/components/verdict-row.json +14 -3
- package/manifest/components/voice-conversation.json +13 -3
- package/manifest/components/web-preview.json +13 -3
- package/manifest/components/web-search.json +13 -3
- package/manifest/components/work-collapse.json +15 -4
- package/manifest/manifest.json +649 -649
- package/manifest/tokens.json +1 -1
- package/package.json +4 -4
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"--cue-ok",
|
|
70
70
|
"--cue-warn"
|
|
71
71
|
],
|
|
72
|
-
"summary": "A 6px state dot — the densest possible status indicator.",
|
|
72
|
+
"summary": "A 6px state dot — the densest possible status indicator, announced as well as shown.",
|
|
73
73
|
"examples": [
|
|
74
74
|
{
|
|
75
75
|
"title": "Usage",
|
|
@@ -77,10 +77,23 @@
|
|
|
77
77
|
"language": "tsx"
|
|
78
78
|
}
|
|
79
79
|
],
|
|
80
|
-
"status": "
|
|
80
|
+
"status": "stable",
|
|
81
81
|
"url": "/docs/components/status-dot",
|
|
82
82
|
"mdUrl": "/docs/components/status-dot.md",
|
|
83
83
|
"jsonUrl": "/r/components/status-dot.json",
|
|
84
|
+
"whenToUse": [
|
|
85
|
+
"State on a row where a `Chip` would not fit: a table of connections, a device list, a queue.",
|
|
86
|
+
"Live activity. `pulse` signals it, and stills itself under `prefers-reduced-motion`."
|
|
87
|
+
],
|
|
88
|
+
"whenNotToUse": [
|
|
89
|
+
"State that needs a word to be understood. Use `Chip`, which shows the same tone vocabulary with its label visible.",
|
|
90
|
+
"A decorative bullet. Every dot emits an `sr-only` label inside a `role=\"status\"` wrapper, so a decorative one is noise in the accessibility tree."
|
|
91
|
+
],
|
|
92
|
+
"commonMistakes": [
|
|
93
|
+
"Relying on the colour and adding a visible label beside it too, which announces the state twice. Pass `label` instead, or use a `Chip`.",
|
|
94
|
+
"Stripping the `relative` wrapper as redundant. It is the containing block for the `sr-only` label; without it that absolutely-positioned text escapes to `<html>`, and two thousand rows make the document thousands of pixels taller than anything on screen.",
|
|
95
|
+
"Passing a tone outside the shared vocabulary. `tone` is required and `idle` is the hollow ring, not a missing value."
|
|
96
|
+
],
|
|
84
97
|
"specimens": [
|
|
85
98
|
{
|
|
86
99
|
"title": "StatusDot",
|
|
@@ -92,6 +105,5 @@
|
|
|
92
105
|
"note": "Five states, and the pulse that means work is in flight. The label is the accessible name, not decoration.",
|
|
93
106
|
"interaction": "none. A dot is a readout."
|
|
94
107
|
}
|
|
95
|
-
]
|
|
96
|
-
"todo": true
|
|
108
|
+
]
|
|
97
109
|
}
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"--cue-space-3",
|
|
80
80
|
"--cue-text-label"
|
|
81
81
|
],
|
|
82
|
-
"summary": "The step trail: `1 target · 2 preview · 3 apply
|
|
82
|
+
"summary": "The step trail: `1 target · 2 preview · 3 apply`, as one line of mono text.",
|
|
83
83
|
"examples": [
|
|
84
84
|
{
|
|
85
85
|
"title": "Usage",
|
|
@@ -87,10 +87,22 @@
|
|
|
87
87
|
"language": "tsx"
|
|
88
88
|
}
|
|
89
89
|
],
|
|
90
|
-
"status": "
|
|
90
|
+
"status": "stable",
|
|
91
91
|
"url": "/docs/components/stepper",
|
|
92
92
|
"mdUrl": "/docs/components/stepper.md",
|
|
93
93
|
"jsonUrl": "/r/components/stepper.json",
|
|
94
|
+
"whenToUse": [
|
|
95
|
+
"A wizard where the user needs to know how far along they are and what is left.",
|
|
96
|
+
"Anywhere vertical space belongs to the thing being configured rather than the chrome around it."
|
|
97
|
+
],
|
|
98
|
+
"whenNotToUse": [
|
|
99
|
+
"Navigation. Use `Breadcrumb` — a stepper is progress through a task, not a location in a tree.",
|
|
100
|
+
"Two steps. A trail of two is a heading with extra parts."
|
|
101
|
+
],
|
|
102
|
+
"commonMistakes": [
|
|
103
|
+
"Replacing it with numbered discs joined by rules. That is 60px tall and says exactly as much as one line of 9px type.",
|
|
104
|
+
"Accenting the whole trail. Only the numbers carry the accent, so it reads as one sentence with the position marked."
|
|
105
|
+
],
|
|
94
106
|
"specimens": [
|
|
95
107
|
{
|
|
96
108
|
"title": "Stepper",
|
|
@@ -102,6 +114,5 @@
|
|
|
102
114
|
"note": "The step trail: `1 target · 2 preview · 3 apply`, with reached steps tinted rather than filled.",
|
|
103
115
|
"interaction": "a reached step is a button; an upcoming one is not."
|
|
104
116
|
}
|
|
105
|
-
]
|
|
106
|
-
"todo": true
|
|
117
|
+
]
|
|
107
118
|
}
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"--cue-text-body",
|
|
70
70
|
"--cue-text-ui"
|
|
71
71
|
],
|
|
72
|
-
"summary": "You pressed stop.",
|
|
72
|
+
"summary": "You pressed stop: the half-written answer stays, and continuing is one tap away.",
|
|
73
73
|
"examples": [
|
|
74
74
|
{
|
|
75
75
|
"title": "Usage",
|
|
@@ -77,10 +77,20 @@
|
|
|
77
77
|
"language": "tsx"
|
|
78
78
|
}
|
|
79
79
|
],
|
|
80
|
-
"status": "
|
|
80
|
+
"status": "stable",
|
|
81
81
|
"url": "/docs/components/stopped-run",
|
|
82
82
|
"mdUrl": "/docs/components/stopped-run.md",
|
|
83
83
|
"jsonUrl": "/r/components/stopped-run.json",
|
|
84
|
+
"whenToUse": [
|
|
85
|
+
"Any early end to a run — stopped by you, the token limit, a timeout — with `reason` saying which."
|
|
86
|
+
],
|
|
87
|
+
"whenNotToUse": [
|
|
88
|
+
"A run that finished. The component is built around a partial answer that stays on screen."
|
|
89
|
+
],
|
|
90
|
+
"commonMistakes": [
|
|
91
|
+
"Clearing the words when the run stops. The partial answer staying is what makes continuing possible.",
|
|
92
|
+
"Wiring `onContinue` to restart the turn. It resumes from where the answer left off."
|
|
93
|
+
],
|
|
84
94
|
"specimens": [
|
|
85
95
|
{
|
|
86
96
|
"title": "StoppedRun",
|
|
@@ -92,6 +102,5 @@
|
|
|
92
102
|
"note": "You pressed stop. The half-written answer stays exactly where it stopped, with a caret to say so, and the run gives its reason on a chip. Continuing is one tap; discarding is the quieter of the two, which is the right ranking.",
|
|
93
103
|
"interaction": "Continue leads and carries the arrow; Discard is a ghost. Both are ordinary buttons — nothing here is a destructive-action dialog."
|
|
94
104
|
}
|
|
95
|
-
]
|
|
96
|
-
"todo": true
|
|
105
|
+
]
|
|
97
106
|
}
|
|
@@ -62,10 +62,20 @@
|
|
|
62
62
|
"language": "tsx"
|
|
63
63
|
}
|
|
64
64
|
],
|
|
65
|
-
"status": "
|
|
65
|
+
"status": "stable",
|
|
66
66
|
"url": "/docs/components/streaming-text",
|
|
67
67
|
"mdUrl": "/docs/components/streaming-text.md",
|
|
68
68
|
"jsonUrl": "/r/components/streaming-text.json",
|
|
69
|
+
"whenToUse": [
|
|
70
|
+
"An assistant turn arriving word by word, with inline code chips marked mono on their segment."
|
|
71
|
+
],
|
|
72
|
+
"whenNotToUse": [
|
|
73
|
+
"Markdown. Segments are text chunks with an optional mono flag; nothing here parses."
|
|
74
|
+
],
|
|
75
|
+
"commonMistakes": [
|
|
76
|
+
"Counting characters. `count` is how many words from the flattened segments are visible.",
|
|
77
|
+
"Leaving `streaming` true once the turn lands, so the newest words stay blue and the caret keeps blinking at the end."
|
|
78
|
+
],
|
|
69
79
|
"specimens": [
|
|
70
80
|
{
|
|
71
81
|
"title": "StreamingText",
|
|
@@ -77,6 +87,5 @@
|
|
|
77
87
|
"note": "Tokens landing a word at a time: the newest two are lit in the streaming hue and cool into ink behind them, and a caret sits at the end while more is coming. A segment marked mono becomes a chip, which is how a path or a channel range survives being read aloud in prose.",
|
|
78
88
|
"interaction": "none, and deliberately: it is a paragraph, and it stays selectable, copyable text at every count."
|
|
79
89
|
}
|
|
80
|
-
]
|
|
81
|
-
"todo": true
|
|
90
|
+
]
|
|
82
91
|
}
|
|
@@ -22,10 +22,19 @@
|
|
|
22
22
|
],
|
|
23
23
|
"summary": "A subscript inside an expression: a bound or a label, set upright inside the italic.",
|
|
24
24
|
"examples": [],
|
|
25
|
-
"status": "
|
|
25
|
+
"status": "stable",
|
|
26
26
|
"url": "/docs/components/sub",
|
|
27
27
|
"mdUrl": "/docs/components/sub.md",
|
|
28
28
|
"jsonUrl": "/r/components/sub.json",
|
|
29
|
+
"whenToUse": [
|
|
30
|
+
"A bound or a label under a variable inside a rendered expression."
|
|
31
|
+
],
|
|
32
|
+
"whenNotToUse": [
|
|
33
|
+
"Body prose that happens to need a subscript. This one is shaped to sit upright inside an expression's italic."
|
|
34
|
+
],
|
|
35
|
+
"commonMistakes": [
|
|
36
|
+
"Reaching for it outside an expression, where the upright-inside-the-italic setting has nothing to sit inside."
|
|
37
|
+
],
|
|
29
38
|
"specimens": [
|
|
30
39
|
{
|
|
31
40
|
"title": "MathBlock",
|
|
@@ -40,6 +49,5 @@
|
|
|
40
49
|
"note": "Maths with the working shown, a step at a time. The expressions are nodes rather than a string, so there is no parser and no KaTeX in the bundle — `Frac` stacks a numerator over a rule, `Sup` and `Sub` set an index upright inside the serif italic, and anything else is text.",
|
|
41
50
|
"interaction": "none. Each step's note says what justified it, which is what turns three lines of algebra into an explanation."
|
|
42
51
|
}
|
|
43
|
-
]
|
|
44
|
-
"todo": true
|
|
52
|
+
]
|
|
45
53
|
}
|
|
@@ -86,10 +86,21 @@
|
|
|
86
86
|
"language": "tsx"
|
|
87
87
|
}
|
|
88
88
|
],
|
|
89
|
-
"status": "
|
|
89
|
+
"status": "stable",
|
|
90
90
|
"url": "/docs/components/subagent-list",
|
|
91
91
|
"mdUrl": "/docs/components/subagent-list.md",
|
|
92
92
|
"jsonUrl": "/r/components/subagent-list.json",
|
|
93
|
+
"whenToUse": [
|
|
94
|
+
"A fan-out of parallel workers, each card naming its agent and model, with a summariser underneath."
|
|
95
|
+
],
|
|
96
|
+
"whenNotToUse": [
|
|
97
|
+
"One agent's steps over time. This draws a card per worker and a progress width per worker."
|
|
98
|
+
],
|
|
99
|
+
"commonMistakes": [
|
|
100
|
+
"Letting `progress` and `agents` fall out of step. The array is positional, per agent, and used while a worker is still running.",
|
|
101
|
+
"Marking individual agents complete. `completedCount` is how many from the start are complete, so completion is prefix-shaped.",
|
|
102
|
+
"Passing `summaryAgent` and expecting it to appear. It shows only when `showSummary` is true."
|
|
103
|
+
],
|
|
93
104
|
"specimens": [
|
|
94
105
|
{
|
|
95
106
|
"title": "SubagentList",
|
|
@@ -101,6 +112,5 @@
|
|
|
101
112
|
"note": "Parallel workers, each with its own model and its own progress. `completedCount` marks the finished ones from the start of the list, and the summary card appears under them when the agent that folds their answers together starts work.",
|
|
102
113
|
"interaction": "none. Delegation is something to watch, not something to steer from here."
|
|
103
114
|
}
|
|
104
|
-
]
|
|
105
|
-
"todo": true
|
|
115
|
+
]
|
|
106
116
|
}
|
|
@@ -86,10 +86,20 @@
|
|
|
86
86
|
"language": "tsx"
|
|
87
87
|
}
|
|
88
88
|
],
|
|
89
|
-
"status": "
|
|
89
|
+
"status": "stable",
|
|
90
90
|
"url": "/docs/components/suggestions",
|
|
91
91
|
"mdUrl": "/docs/components/suggestions.md",
|
|
92
92
|
"jsonUrl": "/r/components/suggestions.json",
|
|
93
|
+
"whenToUse": [
|
|
94
|
+
"Follow-up prompts after an answer, as a centred row of pills or as full-width stacked rows with `variant=\"list\"`."
|
|
95
|
+
],
|
|
96
|
+
"whenNotToUse": [
|
|
97
|
+
"A set you mean to change in place. The stagger entrance replays by remounting on `cycle`, not by swapping the array."
|
|
98
|
+
],
|
|
99
|
+
"commonMistakes": [
|
|
100
|
+
"Leaving `cycle` constant and wondering why the entrance never replays. It is the identity key that remounts the row.",
|
|
101
|
+
"Treating `selectedSuggestion` as optional. It is required, and `null` is how you say none is pressed."
|
|
102
|
+
],
|
|
93
103
|
"specimens": [
|
|
94
104
|
{
|
|
95
105
|
"title": "Suggestions",
|
|
@@ -101,6 +111,5 @@
|
|
|
101
111
|
"note": "Where the conversation could go next, staggered in after a reply. Pills for a centred empty state, a list for a side panel; either way `cycle` is the key that re-runs the entrance when a new set replaces the old one.",
|
|
102
112
|
"interaction": "each pill is a button carrying aria-pressed, lifts a pixel on hover and presses in on click. The selected one inverts."
|
|
103
113
|
}
|
|
104
|
-
]
|
|
105
|
-
"todo": true
|
|
114
|
+
]
|
|
106
115
|
}
|
|
@@ -22,10 +22,19 @@
|
|
|
22
22
|
],
|
|
23
23
|
"summary": "A superscript inside an expression: an exponent or an index, set upright inside the italic.",
|
|
24
24
|
"examples": [],
|
|
25
|
-
"status": "
|
|
25
|
+
"status": "stable",
|
|
26
26
|
"url": "/docs/components/sup",
|
|
27
27
|
"mdUrl": "/docs/components/sup.md",
|
|
28
28
|
"jsonUrl": "/r/components/sup.json",
|
|
29
|
+
"whenToUse": [
|
|
30
|
+
"An exponent or an index above a term inside a rendered expression."
|
|
31
|
+
],
|
|
32
|
+
"whenNotToUse": [
|
|
33
|
+
"Body prose that happens to need a superscript. This one is shaped to sit upright inside an expression's italic."
|
|
34
|
+
],
|
|
35
|
+
"commonMistakes": [
|
|
36
|
+
"Reaching for it outside an expression, where the upright-inside-the-italic setting has nothing to sit inside."
|
|
37
|
+
],
|
|
29
38
|
"specimens": [
|
|
30
39
|
{
|
|
31
40
|
"title": "MathBlock",
|
|
@@ -40,6 +49,5 @@
|
|
|
40
49
|
"note": "Maths with the working shown, a step at a time. The expressions are nodes rather than a string, so there is no parser and no KaTeX in the bundle — `Frac` stacks a numerator over a rule, `Sup` and `Sub` set an index upright inside the serif italic, and anything else is text.",
|
|
41
50
|
"interaction": "none. Each step's note says what justified it, which is what turns three lines of algebra into an explanation."
|
|
42
51
|
}
|
|
43
|
-
]
|
|
44
|
-
"todo": true
|
|
52
|
+
]
|
|
45
53
|
}
|
|
@@ -66,10 +66,20 @@
|
|
|
66
66
|
],
|
|
67
67
|
"summary": "Two labels stacked in one cell, with the box's width animating between them.",
|
|
68
68
|
"examples": [],
|
|
69
|
-
"status": "
|
|
69
|
+
"status": "stable",
|
|
70
70
|
"url": "/docs/components/swap-label",
|
|
71
71
|
"mdUrl": "/docs/components/swap-label.md",
|
|
72
72
|
"jsonUrl": "/r/components/swap-label.json",
|
|
73
|
+
"whenToUse": [
|
|
74
|
+
"A label that changes and must take its new width with it: `Searching...` becoming `Searched` has to make the row shrink."
|
|
75
|
+
],
|
|
76
|
+
"whenNotToUse": [
|
|
77
|
+
"More than two states. `children` is exactly two labels — the resting one and the active one."
|
|
78
|
+
],
|
|
79
|
+
"commonMistakes": [
|
|
80
|
+
"Expecting the outgoing text to be announced or copied into a selection. The leaving layer is `aria-hidden`, deliberately.",
|
|
81
|
+
"Fixing the width with a class. A `ResizeObserver` measures the layer that is showing, because neither layer can size the box while both are in it."
|
|
82
|
+
],
|
|
73
83
|
"specimens": [
|
|
74
84
|
{
|
|
75
85
|
"title": "SwapLabel",
|
|
@@ -81,6 +91,5 @@
|
|
|
81
91
|
"note": "Two labels in one cell, crossfading, with the box measuring itself to whichever is showing. The width is half the effect: 'Patching universe 3' becoming 'Patched' has to make the row shrink, and the outgoing layer is aria-hidden so it is neither announced nor copied.",
|
|
82
92
|
"interaction": "swap it and watch the box, not the text. Everything after the label on that row moves with it."
|
|
83
93
|
}
|
|
84
|
-
]
|
|
85
|
-
"todo": true
|
|
94
|
+
]
|
|
86
95
|
}
|
|
@@ -227,7 +227,7 @@
|
|
|
227
227
|
"--cue-text-label",
|
|
228
228
|
"--cue-text-ui"
|
|
229
229
|
],
|
|
230
|
-
"summary": "Free-form tags, each a removable chip.",
|
|
230
|
+
"summary": "Free-form tags, each a removable chip. Enter or a separator key commits what is in the box.",
|
|
231
231
|
"examples": [
|
|
232
232
|
{
|
|
233
233
|
"title": "Usage",
|
|
@@ -235,10 +235,22 @@
|
|
|
235
235
|
"language": "tsx"
|
|
236
236
|
}
|
|
237
237
|
],
|
|
238
|
-
"status": "
|
|
238
|
+
"status": "stable",
|
|
239
239
|
"url": "/docs/components/tags-input",
|
|
240
240
|
"mdUrl": "/docs/components/tags-input.md",
|
|
241
241
|
"jsonUrl": "/r/components/tags-input.json",
|
|
242
|
+
"whenToUse": [
|
|
243
|
+
"Labels, hostnames, arbitrary keys — anything the product cannot enumerate in advance.",
|
|
244
|
+
"A known subset you still want to offer: pass `suggestions` without constraining the value to them."
|
|
245
|
+
],
|
|
246
|
+
"whenNotToUse": [
|
|
247
|
+
"A closed set. Use `MultiSelect`, so an unlisted value cannot be committed at all.",
|
|
248
|
+
"One value. Use `Input`, or `Autocomplete` if suggestions help."
|
|
249
|
+
],
|
|
250
|
+
"commonMistakes": [
|
|
251
|
+
"Rebuilding the commit rules by hand. Separator keys, `max` and duplicate handling are all here; a hand-rolled version misses at least one.",
|
|
252
|
+
"Forgetting `max`. Without it a paste can commit a hundred tags into a field sized for five."
|
|
253
|
+
],
|
|
242
254
|
"specimens": [
|
|
243
255
|
{
|
|
244
256
|
"title": "TagsInput",
|
|
@@ -250,6 +262,5 @@
|
|
|
250
262
|
"note": "A combobox in multiple mode, rendering its values as chips. Comma and Enter both commit.",
|
|
251
263
|
"interaction": "Backspace on an empty field removes the last chip; each chip's remove button has its own name."
|
|
252
264
|
}
|
|
253
|
-
]
|
|
254
|
-
"todo": true
|
|
265
|
+
]
|
|
255
266
|
}
|
|
@@ -118,10 +118,22 @@
|
|
|
118
118
|
"language": "tsx"
|
|
119
119
|
}
|
|
120
120
|
],
|
|
121
|
-
"status": "
|
|
121
|
+
"status": "stable",
|
|
122
122
|
"url": "/docs/components/tail-status",
|
|
123
123
|
"mdUrl": "/docs/components/tail-status.md",
|
|
124
124
|
"jsonUrl": "/r/components/tail-status.json",
|
|
125
|
+
"whenToUse": [
|
|
126
|
+
"One per transcript, at the foot. It is a `role=\"status\"` row, and so the only element in this family a screen reader is told about without being asked.",
|
|
127
|
+
"A settled run: `active={false}` stops the sweep and empties the spinner's slot without moving the text."
|
|
128
|
+
],
|
|
129
|
+
"whenNotToUse": [
|
|
130
|
+
"Anywhere but the foot of a transcript, and never twice. It announces itself each time the action changes — the behaviour a person who cannot see the spinner needs, and unbearable used for anything else."
|
|
131
|
+
],
|
|
132
|
+
"commonMistakes": [
|
|
133
|
+
"Composing `action` and `detail` into one string. They are separate because they truncate differently: the action is short and must survive, the detail is a path and must not push it off a 280px sidebar row.",
|
|
134
|
+
"Setting `announce` beside a `LiveRegionAnnouncer`. Mounting the announcer takes the speech away automatically; an explicit answer always wins, so `true` gets every state read out twice.",
|
|
135
|
+
"Offering `onCancel` that cannot cancel. The inline control exists only when the handler is given, because a Cancel that cannot cancel is worse than no Cancel."
|
|
136
|
+
],
|
|
125
137
|
"specimens": [
|
|
126
138
|
{
|
|
127
139
|
"title": "TailStatus",
|
|
@@ -133,6 +145,5 @@
|
|
|
133
145
|
"note": "The live row at the foot of the transcript, and the only element in this family a screen reader is told about without being asked: it is a role=status, so each new action is announced politely as it lands — unless a LiveRegionAnnouncer is mounted, in which case it hands the speaking over and draws the state without saying it, because two polite regions narrating the same run is the transcript read out twice. Two props rather than one string — the action is short and must survive, the detail is a path and must not push it off a 280px sidebar — and an inline Cancel that exists only when there is something to cancel. The copy is TAIL_ACTIONS, a table, not ten strings baked into the markup.",
|
|
134
146
|
"interaction": "press Cancel and the row settles: the sweep stops, the spinner leaves its slot without the words moving, and the last thing it says is what stopped it. updatesInPlace goes off with it, because 'Interrupted' is a different sentence rather than the next frame of the same one."
|
|
135
147
|
}
|
|
136
|
-
]
|
|
137
|
-
"todo": true
|
|
148
|
+
]
|
|
138
149
|
}
|
|
@@ -91,10 +91,21 @@
|
|
|
91
91
|
"language": "tsx"
|
|
92
92
|
}
|
|
93
93
|
],
|
|
94
|
-
"status": "
|
|
94
|
+
"status": "stable",
|
|
95
95
|
"url": "/docs/components/terminal-block",
|
|
96
96
|
"mdUrl": "/docs/components/terminal-block.md",
|
|
97
97
|
"jsonUrl": "/r/components/terminal-block.json",
|
|
98
|
+
"whenToUse": [
|
|
99
|
+
"A command an agent ran, its output landing line by line as `visibleCount` moves.",
|
|
100
|
+
"The classic dark terminal slab inside a light surface: `variant=\"ink\"`, where `paper` matches the surrounding surfaces."
|
|
101
|
+
],
|
|
102
|
+
"whenNotToUse": [
|
|
103
|
+
"A command that failed. `done` shows exit 0 and nothing else; until it is true a spinner keeps spinning."
|
|
104
|
+
],
|
|
105
|
+
"commonMistakes": [
|
|
106
|
+
"Appending to `lines` as output arrives instead of moving `visibleCount`. `lines` is everything available to stream.",
|
|
107
|
+
"Leaving `done` false on a finished run, so the header spins forever."
|
|
108
|
+
],
|
|
98
109
|
"specimens": [
|
|
99
110
|
{
|
|
100
111
|
"title": "TerminalBlock",
|
|
@@ -106,6 +117,5 @@
|
|
|
106
117
|
"note": "Command output as it arrives: `visibleCount` says how many of the lines have landed, so the caller owns the clock and the block owns nothing. Two grounds — paper sits in the transcript, ink is the recessed slab a terminal is expected to be.",
|
|
107
118
|
"interaction": "none. It is a transcript of something that already happened."
|
|
108
119
|
}
|
|
109
|
-
]
|
|
110
|
-
"todo": true
|
|
120
|
+
]
|
|
111
121
|
}
|
|
@@ -126,10 +126,22 @@
|
|
|
126
126
|
"language": "tsx"
|
|
127
127
|
}
|
|
128
128
|
],
|
|
129
|
-
"status": "
|
|
129
|
+
"status": "stable",
|
|
130
130
|
"url": "/docs/components/terminal-frame",
|
|
131
131
|
"mdUrl": "/docs/components/terminal-frame.md",
|
|
132
132
|
"jsonUrl": "/r/components/terminal-frame.json",
|
|
133
|
+
"whenToUse": [
|
|
134
|
+
"Showing commands and their output as text the reader can copy.",
|
|
135
|
+
"A demo that should play: `simulate` types it out, and it is still text."
|
|
136
|
+
],
|
|
137
|
+
"whenNotToUse": [
|
|
138
|
+
"A live shell. This is a depiction, not a terminal.",
|
|
139
|
+
"A code sample. Use a code block; the `$` prefix says 'run this'."
|
|
140
|
+
],
|
|
141
|
+
"commonMistakes": [
|
|
142
|
+
"Recording a GIF or a video instead. Text copies, scales with the type ramp, re-themes, and costs nothing to ship.",
|
|
143
|
+
"Raising it like a card. It is `bg-sunken` on purpose — the transcript sits *into* the page the way a real console does."
|
|
144
|
+
],
|
|
133
145
|
"specimens": [
|
|
134
146
|
{
|
|
135
147
|
"title": "TerminalFrame",
|
|
@@ -141,6 +153,5 @@
|
|
|
141
153
|
"note": "A sunken mono frame with `$`-prefixed command lines and a copy affordance. `simulate` turns it into a typing player with jittered keystrokes.",
|
|
142
154
|
"interaction": "the reduced-motion path renders the finished transcript instantly rather than typing it."
|
|
143
155
|
}
|
|
144
|
-
]
|
|
145
|
-
"todo": true
|
|
156
|
+
]
|
|
146
157
|
}
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"--cue-text-label",
|
|
77
77
|
"--cue-text-ui"
|
|
78
78
|
],
|
|
79
|
-
"summary": "The multi-line text control
|
|
79
|
+
"summary": "The multi-line text control, on the same `Field` terms as `Input`.",
|
|
80
80
|
"examples": [
|
|
81
81
|
{
|
|
82
82
|
"title": "Usage",
|
|
@@ -84,10 +84,22 @@
|
|
|
84
84
|
"language": "tsx"
|
|
85
85
|
}
|
|
86
86
|
],
|
|
87
|
-
"status": "
|
|
87
|
+
"status": "stable",
|
|
88
88
|
"url": "/docs/components/textarea",
|
|
89
89
|
"mdUrl": "/docs/components/textarea.md",
|
|
90
90
|
"jsonUrl": "/r/components/textarea.json",
|
|
91
|
+
"whenToUse": [
|
|
92
|
+
"Text with its own line breaks: a note, a description, a cue list comment.",
|
|
93
|
+
"Inside a `Field` — it renders through Base UI's `Field.Control`, so label wiring, `aria-describedby` and `data-invalid` all work."
|
|
94
|
+
],
|
|
95
|
+
"whenNotToUse": [
|
|
96
|
+
"One line. Use `Input`; a one-row textarea invites a newline the form does not want.",
|
|
97
|
+
"Code. A code editor needs a monospace gutter and its own key handling."
|
|
98
|
+
],
|
|
99
|
+
"commonMistakes": [
|
|
100
|
+
"Setting a height in `className` instead of `rows`. It deliberately drops the fixed control height because a textarea's job is to be taller than one rung.",
|
|
101
|
+
"Enabling `resize` in both directions. It is `resize-y` on purpose — horizontal drag breaks the panel grid."
|
|
102
|
+
],
|
|
91
103
|
"specimens": [
|
|
92
104
|
{
|
|
93
105
|
"title": "Textarea",
|
|
@@ -99,6 +111,5 @@
|
|
|
99
111
|
"note": "The same chassis, grown to a block.",
|
|
100
112
|
"interaction": "same rim and ring as Input: one flush focus-colour ring, no outer halo."
|
|
101
113
|
}
|
|
102
|
-
]
|
|
103
|
-
"todo": true
|
|
114
|
+
]
|
|
104
115
|
}
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
"--cue-text-label",
|
|
143
143
|
"--cue-text-ui"
|
|
144
144
|
],
|
|
145
|
-
"summary": "The floating
|
|
145
|
+
"summary": "The floating panel that edits the design system it is drawn with.",
|
|
146
146
|
"examples": [
|
|
147
147
|
{
|
|
148
148
|
"title": "Usage",
|
|
@@ -150,9 +150,18 @@
|
|
|
150
150
|
"language": "tsx"
|
|
151
151
|
}
|
|
152
152
|
],
|
|
153
|
-
"status": "
|
|
153
|
+
"status": "stable",
|
|
154
154
|
"url": "/docs/components/theme-configurator",
|
|
155
155
|
"mdUrl": "/docs/components/theme-configurator.md",
|
|
156
156
|
"jsonUrl": "/r/components/theme-configurator.json",
|
|
157
|
-
"
|
|
157
|
+
"whenToUse": [
|
|
158
|
+
"Any app where a designer should retune the theme in place — mount it behind a flag.",
|
|
159
|
+
"Anywhere the output must be real: everything it does is a `--cue-*` declaration in one stylesheet."
|
|
160
|
+
],
|
|
161
|
+
"whenNotToUse": [
|
|
162
|
+
"Production for end users. It is a design surface, not a settings page."
|
|
163
|
+
],
|
|
164
|
+
"commonMistakes": [
|
|
165
|
+
"Treating it as a devtool bolted onto the kitchen sink. It is a component, and the rule that keeps it from being a toy is that it writes declarations rather than inline styles."
|
|
166
|
+
]
|
|
158
167
|
}
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
"type": "string",
|
|
150
150
|
"required": false,
|
|
151
151
|
"defaultValue": null,
|
|
152
|
-
"description": "The Content-Security-Policy nonce for
|
|
152
|
+
"description": "The Content-Security-Policy nonce for every `<style>` element this tree\nrenders — this library's and Base UI's.\n\nWhen `overrides.densities` is set this provider emits one `<style>`\nelement (see {@link ThemeProviderProps.overrides}). Under a policy of\n`style-src-elem 'self' 'nonce-<per-request>'` the browser refuses that\nelement on every page load, because an element React renders on the client\ncannot pick up a server nonce by itself. Pass the request's nonce here and\nit is set on the element.\n\nIt also reaches **Base UI**. Given a nonce, this provider renders\n`@base-ui/react`'s own `CSPProvider` around the tree, so the hoisted\n`<style>` that `ScrollAreaRoot` and `SelectPopup` emit carries it too.\nWithout that, a strict policy refuses it by content hash on every page\nrendering a Select, a Popover or a ScrollArea — and a consumer has no way\nto guess the remedy lives in a peer dependency's provider. An outer\n`CSPProvider` a consumer renders itself is left alone: no nonce here means\nno provider here, rather than one that overwrites theirs with `undefined`.\n\n`prepaintScript()` returns a *string* the application renders in a\n`<script>` of its own — so the application already controls that element's\nnonce, and between it and this prop a strict policy needs nothing else\nfrom here.\n\n**Pass this OR render your own `CSPProvider` — not both.** Base UI's\ncontext carries a second value beside the nonce, `disableStyleElements`,\nand its provider is the only public way to set either: the package exports\n`CSPProvider` and no hook, so a provider rendered here *replaces* an outer\none rather than extending it. Given a nonce this provider therefore sets\n`disableStyleElements` back to its default, and a consumer who had turned\nit on outside loses it silently — Base UI resumes emitting the very style\nelement they suppressed. An application already rendering its own\n`CSPProvider` needs nothing from this prop: leave it unset and the outer\ncontext survives untouched, which is the case\n`base-ui-nonce-outer-provider.test.tsx` pins.\n\n**A nonce cannot rescue a style ATTRIBUTE**, and this provider always sets\none on its root: `color-scheme` and `--cue-font-scale`, plus the font\nfamilies and overrides where they are given. CSP has no nonce form for\n`style-src-attr` — it is `'unsafe-inline'` or `'none'` — so an application\nserving `style-src-attr 'none'` loses those declarations, silently. That is\na policy decision rather than something this prop can change.",
|
|
153
153
|
"control": {
|
|
154
154
|
"kind": "string"
|
|
155
155
|
}
|
|
@@ -49,10 +49,20 @@
|
|
|
49
49
|
"language": "tsx"
|
|
50
50
|
}
|
|
51
51
|
],
|
|
52
|
-
"status": "
|
|
52
|
+
"status": "stable",
|
|
53
53
|
"url": "/docs/components/thinking-indicator",
|
|
54
54
|
"mdUrl": "/docs/components/thinking-indicator.md",
|
|
55
55
|
"jsonUrl": "/r/components/thinking-indicator.json",
|
|
56
|
+
"whenToUse": [
|
|
57
|
+
"A short live label naming the current action, with an optional mono timer beside it."
|
|
58
|
+
],
|
|
59
|
+
"whenNotToUse": [
|
|
60
|
+
"A line updated several times a second. Swapping `label` replays the entrance animation each time."
|
|
61
|
+
],
|
|
62
|
+
"commonMistakes": [
|
|
63
|
+
"Rewriting `label` on every tick and wondering why it keeps re-animating — the entrance replays on the swap.",
|
|
64
|
+
"Passing a number to `elapsed`. It is pre-formatted text, and omitting it hides the timer."
|
|
65
|
+
],
|
|
56
66
|
"specimens": [
|
|
57
67
|
{
|
|
58
68
|
"title": "ThinkingIndicator",
|
|
@@ -64,6 +74,5 @@
|
|
|
64
74
|
"note": "One line that says what is happening right now, with the elapsed clock beside it. The label is keyed, so replacing it re-runs the entrance and the change reads as a change rather than as a re-render.",
|
|
65
75
|
"interaction": "none. It is a status line, not a control — the dot pulses and the label sweeps, and both stop for a reduced-motion reader."
|
|
66
76
|
}
|
|
67
|
-
]
|
|
68
|
-
"todo": true
|
|
77
|
+
]
|
|
69
78
|
}
|
|
@@ -67,10 +67,20 @@
|
|
|
67
67
|
"language": "tsx"
|
|
68
68
|
}
|
|
69
69
|
],
|
|
70
|
-
"status": "
|
|
70
|
+
"status": "stable",
|
|
71
71
|
"url": "/docs/components/thread-list",
|
|
72
72
|
"mdUrl": "/docs/components/thread-list.md",
|
|
73
73
|
"jsonUrl": "/r/components/thread-list.json",
|
|
74
|
+
"whenToUse": [
|
|
75
|
+
"A sidebar of conversations, each row carrying a title, a time and an optional unread mark."
|
|
76
|
+
],
|
|
77
|
+
"whenNotToUse": [
|
|
78
|
+
"A history big enough to need searching or grouping. This takes a flat list and an index."
|
|
79
|
+
],
|
|
80
|
+
"commonMistakes": [
|
|
81
|
+
"Clamping `activeIndex` defensively. An index outside the list selects nothing, which is how you render a list with no selection.",
|
|
82
|
+
"Passing `activeIndex` without `onActiveIndexChange` on a list meant to be clicked — the index alone only marks the row."
|
|
83
|
+
],
|
|
74
84
|
"specimens": [
|
|
75
85
|
{
|
|
76
86
|
"title": "ThreadList",
|
|
@@ -82,6 +92,5 @@
|
|
|
82
92
|
"note": "Conversation history at its smallest: a title, how long ago, and an unread dot. The row's actions replace the timestamp on hover rather than sitting beside it, which is what keeps a 240px rail from becoming a toolbar — and the active row never shows an unread mark, because reading it is what cleared it.",
|
|
83
93
|
"interaction": "the selected row carries `aria-current`; the rename and delete affordances appear on hover in the space the time was using, so nothing moves when they arrive."
|
|
84
94
|
}
|
|
85
|
-
]
|
|
86
|
-
"todo": true
|
|
95
|
+
]
|
|
87
96
|
}
|
|
@@ -88,10 +88,20 @@
|
|
|
88
88
|
"language": "tsx"
|
|
89
89
|
}
|
|
90
90
|
],
|
|
91
|
-
"status": "
|
|
91
|
+
"status": "stable",
|
|
92
92
|
"url": "/docs/components/thread-search",
|
|
93
93
|
"mdUrl": "/docs/components/thread-search.md",
|
|
94
94
|
"jsonUrl": "/r/components/thread-search.json",
|
|
95
|
+
"whenToUse": [
|
|
96
|
+
"A history surface with enough threads that finding one matters — pinned rows first, then grouped by when."
|
|
97
|
+
],
|
|
98
|
+
"whenNotToUse": [
|
|
99
|
+
"A list you filter yourself. Filtering happens inside, matching title and preview together."
|
|
100
|
+
],
|
|
101
|
+
"commonMistakes": [
|
|
102
|
+
"Passing pre-filtered `threads`. Pass all of them; `query` is the search text and the match runs over title and preview.",
|
|
103
|
+
"Confusing `activeId` with a search result. It is which thread is open, and `onSelect` reports the one just opened."
|
|
104
|
+
],
|
|
95
105
|
"specimens": [
|
|
96
106
|
{
|
|
97
107
|
"title": "ThreadSearch",
|
|
@@ -103,6 +113,5 @@
|
|
|
103
113
|
"note": "History you can actually get back into: pinned first, then grouped by when. Filtering matches the title and the preview together, so a thread found by something said inside it still shows the line that found it. The pinned section is a lift out of the date groups rather than a copy — a pinned thread appears once.",
|
|
104
114
|
"interaction": "arrows walk the flattened order across group boundaries, which is the order the eye reads rather than the order the data is in."
|
|
105
115
|
}
|
|
106
|
-
]
|
|
107
|
-
"todo": true
|
|
116
|
+
]
|
|
108
117
|
}
|