@actioneer/ads 0.5.9 → 0.7.0
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/components/ai-elements/agent-trace.d.ts +2 -2
- package/components/ai-elements/agent-trace.js +163 -104
- package/components/ai-elements/chain-of-thought.d.ts +2 -2
- package/components/ai-elements/chain-of-thought.js +1 -1
- package/components/ai-elements/index.d.ts +0 -5
- package/components/ai-elements/inline-citation.js +1 -1
- package/components/alert.d.ts +6 -6
- package/components/alert.js +89 -53
- package/components/answer-sources.d.ts +2 -6
- package/components/answer-sources.js +58 -60
- package/components/answer.d.ts +5 -0
- package/components/answer.js +311 -271
- package/components/assistant-ui/composer-harness.js +11 -14
- package/components/assistant-ui/composer.d.ts +3 -1
- package/components/assistant-ui/composer.js +148 -144
- package/components/assistant-ui/index.d.ts +0 -3
- package/components/assistant-ui/thread-context.d.ts +3 -1
- package/components/assistant-ui/thread.js +50 -42
- package/components/avatar.js +42 -42
- package/components/badge.d.ts +5 -6
- package/components/badge.js +13 -76
- package/components/body-page-header.d.ts +15 -0
- package/components/body-page-header.js +24 -0
- package/components/brand-loader.d.ts +0 -3
- package/components/brand-loader.js +10 -32
- package/components/breadcrumbs.d.ts +1 -8
- package/components/breadcrumbs.js +65 -78
- package/components/button.d.ts +1 -1
- package/components/button.js +55 -49
- package/components/card.js +19 -18
- package/components/chart.js +526 -503
- package/components/chip.d.ts +13 -1
- package/components/chip.js +93 -80
- package/components/collection-header.d.ts +17 -0
- package/components/collection-header.js +31 -0
- package/components/connector-card.d.ts +6 -6
- package/components/connector-card.js +31 -32
- package/components/date-range-picker.d.ts +26 -0
- package/components/date-range-picker.js +223 -0
- package/components/drawer.d.ts +19 -3
- package/components/drawer.js +143 -116
- package/components/dropdown.d.ts +1 -2
- package/components/dropdown.js +88 -89
- package/components/field.js +39 -34
- package/components/file-dropzone.js +1 -1
- package/components/index.d.ts +5 -4
- package/components/index.js +501 -546
- package/components/infinite-canvas.js +24 -24
- package/components/input-field.d.ts +18 -3
- package/components/input-field.js +88 -72
- package/components/input.js +16 -15
- package/components/modal.d.ts +31 -3
- package/components/modal.js +243 -169
- package/components/number-field.js +45 -42
- package/components/page-body.d.ts +12 -0
- package/components/page-body.js +18 -0
- package/components/pagination.js +36 -36
- package/components/panel.js +31 -28
- package/components/select.d.ts +21 -0
- package/components/select.js +189 -148
- package/components/setting-row.d.ts +6 -5
- package/components/setting-row.js +33 -32
- package/components/sidebar.d.ts +2 -0
- package/components/sidebar.js +165 -155
- package/components/skeleton.js +8 -7
- package/components/slider.js +1 -1
- package/components/surface-loader.d.ts +11 -0
- package/components/surface-loader.js +35 -0
- package/components/table.d.ts +16 -10
- package/components/table.js +426 -410
- package/components/tabs.d.ts +2 -0
- package/components/tabs.js +159 -294
- package/components/textarea.js +9 -9
- package/components/toast.d.ts +1 -1
- package/components/toast.js +181 -118
- package/components/tree.d.ts +5 -1
- package/components/tree.js +96 -63
- package/components/typography.d.ts +4 -4
- package/components/typography.js +13 -13
- package/components/ui/button.d.ts +1 -1
- package/components/ui/dialog.js +33 -33
- package/components/viz-charts.js +186 -183
- package/demo/components/add-to-artifact.js +8 -10
- package/fonts.css +2 -0
- package/lib/cn.js +11 -4
- package/lib/icons.d.ts +4 -0
- package/lib/icons.js +107 -106
- package/lib/interactive.d.ts +1 -1
- package/llms.txt +115 -152
- package/manifest.json +13730 -1084
- package/package.json +4 -2
- package/styles.css +365 -225
- package/theme.css +315 -176
- package/components/agent-icon.d.ts +0 -76
- package/components/agent-icon.js +0 -265
- package/components/ai-elements/queue.d.ts +0 -60
- package/components/ai-elements/queue.js +0 -193
- package/components/ai-elements/speech-input.d.ts +0 -16
- package/components/ai-elements/speech-input.js +0 -151
- package/components/ai-elements/task-progress.d.ts +0 -41
- package/components/ai-elements/task-progress.js +0 -224
- package/components/ai-elements/task.d.ts +0 -39
- package/components/ai-elements/task.js +0 -105
- package/components/ai-elements/voice.d.ts +0 -90
- package/components/ai-elements/voice.js +0 -496
- package/components/assistant-ui/follow-up-suggestions.d.ts +0 -11
- package/components/assistant-ui/follow-up-suggestions.js +0 -72
- package/components/assistant-ui/suggestions.d.ts +0 -7
- package/components/assistant-ui/suggestions.js +0 -19
- package/components/assistant-ui/voice.d.ts +0 -18
- package/components/link.d.ts +0 -14
- package/components/link.js +0 -72
- package/components/navbar.d.ts +0 -15
- package/components/navbar.js +0 -68
- package/components/pixel-icon.d.ts +0 -37
- package/components/pixel-icon.js +0 -859
package/llms.txt
CHANGED
|
@@ -18,9 +18,15 @@
|
|
|
18
18
|
Reference semantic roles, never raw color/dimension literals (ads-lint rejects literals). Each role produces `bg-/text-/border-<role>` utilities:
|
|
19
19
|
- `background`
|
|
20
20
|
- `foreground`
|
|
21
|
-
- `primary` —
|
|
22
|
-
- `secondary` —
|
|
23
|
-
- `tertiary` —
|
|
21
|
+
- `on-white-primary` — Contextual text hierarchies — three accessible levels per surface.
|
|
22
|
+
- `on-white-secondary` — Contextual text hierarchies — three accessible levels per surface.
|
|
23
|
+
- `on-white-tertiary` — Contextual text hierarchies — three accessible levels per surface.
|
|
24
|
+
- `on-warm-grey-primary` — Contextual text hierarchies — three accessible levels per surface.
|
|
25
|
+
- `on-warm-grey-secondary` — Contextual text hierarchies — three accessible levels per surface.
|
|
26
|
+
- `on-warm-grey-tertiary` — Contextual text hierarchies — three accessible levels per surface.
|
|
27
|
+
- `primary` — Context-free compatibility aliases remain conservative.
|
|
28
|
+
- `secondary` — Context-free compatibility aliases remain conservative.
|
|
29
|
+
- `tertiary` — Context-free compatibility aliases remain conservative.
|
|
24
30
|
- `surface`
|
|
25
31
|
- `surface-foreground`
|
|
26
32
|
- `elevated`
|
|
@@ -28,18 +34,27 @@ Reference semantic roles, never raw color/dimension literals (ads-lint rejects l
|
|
|
28
34
|
- `muted-foreground`
|
|
29
35
|
- `card`
|
|
30
36
|
- `card-foreground`
|
|
37
|
+
- `specimen-stroke`
|
|
38
|
+
- `action-primary` — Primary CTA role — restrained Studio green, used sparingly.
|
|
39
|
+
- `action-primary-foreground` — Primary CTA role — restrained Studio green, used sparingly.
|
|
40
|
+
- `action-primary-hover` — Primary CTA role — restrained Studio green, used sparingly.
|
|
41
|
+
- `action-primary-text` — Primary CTA role — restrained Studio green, used sparingly.
|
|
42
|
+
- `action-primary-soft` — Primary CTA role — restrained Studio green, used sparingly.
|
|
43
|
+
- `field-focus` — Primary CTA role — restrained Studio green, used sparingly.
|
|
31
44
|
- `brand` — Compatibility action role — neutral ink, never a colored primary hue.
|
|
32
45
|
- `brand-foreground` — Compatibility action role — neutral ink, never a colored primary hue.
|
|
33
46
|
- `brand-hover` — Compatibility action role — neutral ink, never a colored primary hue.
|
|
34
47
|
- `brand-text` — Compatibility action role — neutral ink, never a colored primary hue.
|
|
35
|
-
- `fill` — Quiet fill —
|
|
36
|
-
- `fill-foreground` — Quiet fill —
|
|
37
|
-
- `table-shell` — Quiet fill —
|
|
48
|
+
- `fill` — Quiet fill — avatars, chips, and disabled controls
|
|
49
|
+
- `fill-foreground` — Quiet fill — avatars, chips, and disabled controls
|
|
50
|
+
- `table-shell` — Quiet fill — avatars, chips, and disabled controls
|
|
51
|
+
- `table-stroke` — Quiet fill — avatars, chips, and disabled controls
|
|
52
|
+
- `table-header-foreground` — Quiet fill — avatars, chips, and disabled controls
|
|
38
53
|
- `artifact-canvas`
|
|
39
54
|
- `accent`
|
|
40
55
|
- `accent-foreground`
|
|
41
|
-
- `success` — success-700
|
|
42
|
-
- `success-foreground` — success-700
|
|
56
|
+
- `success` — Lichen success-700 clears AA on White and both success soft fills;
|
|
57
|
+
- `success-foreground` — Lichen success-700 clears AA on White and both success soft fills;
|
|
43
58
|
- `warning` — Amber-500 fill kept (it IS the caution signal); dark ink foreground
|
|
44
59
|
- `warning-foreground` — Amber-500 fill kept (it IS the caution signal); dark ink foreground
|
|
45
60
|
- `danger` — Amber-500 fill kept (it IS the caution signal); dark ink foreground
|
|
@@ -52,6 +67,9 @@ Reference semantic roles, never raw color/dimension literals (ads-lint rejects l
|
|
|
52
67
|
- `border`
|
|
53
68
|
- `border-strong`
|
|
54
69
|
- `input`
|
|
70
|
+
- `menu-stroke`
|
|
71
|
+
- `toast-stroke`
|
|
72
|
+
- `tree-stroke`
|
|
55
73
|
- `ring`
|
|
56
74
|
- `overlay`
|
|
57
75
|
|
|
@@ -61,23 +79,27 @@ The house rules for every ADS UI. `[lint]` = `@actioneer/ads-lint` auto-checks i
|
|
|
61
79
|
|
|
62
80
|
### 1. Prefer fills & elevation over strokes — but keep a balance (~75/25) [judgment]
|
|
63
81
|
|
|
64
|
-
Delineate SURFACES (cards, panels, sidebars, page regions) with color contrast, elevation, and spacing — not borders. Aim for ~75% shadow/fill, 25% strokes: form controls and floating menus keep a subtle border so they read as interactive; surfaces do not.
|
|
82
|
+
Delineate SURFACES (cards, panels, sidebars, page regions) with color contrast, elevation, and spacing — not borders. Keep no more than two persistent neutral layers in one composition: panels establish hierarchy; embedded items express state. Aim for ~75% shadow/fill, 25% strokes: form controls and floating menus keep a subtle border so they read as interactive; surfaces do not.
|
|
65
83
|
|
|
66
|
-
- Do:
|
|
84
|
+
- Do: Establish hierarchy with at most two persistent layers: bg-background for the screen ground and bg-card/bg-elevated for the primary surface.
|
|
85
|
+
- Do: Inside a white Panel or Card, keep rows and items transparent at rest; group them with spacing or inset dividers, use bg-muted for hover/selection, and reserve bg-surface for one continuous semantic recess such as an editor or table tray.
|
|
67
86
|
- Do: Use border-border for outline buttons and lightweight action rows; reserve border-input for form controls (input, select, textarea, checkbox, radio, segmented-control track) and floating menus (dropdown, popover, listboxes).
|
|
68
87
|
- Do: Keep strokes on focus rings, the outline Button/Badge/Chip variants, Kbd, Divider, the Tree connector rail, and functional color swatches.
|
|
69
88
|
- Don't: Add a border to a surface to separate or group it — use fill/elevation/spacing instead.
|
|
89
|
+
- Don't: Alternate persistent neutral fills inside one panel (for example white Panel → grey item → white child); flatten the item or promote the recess to the container.
|
|
70
90
|
- Don't: Give a filled control no stroke on the tinted canvas — it disappears; it needs a crisp edge.
|
|
71
91
|
|
|
72
|
-
### 2.
|
|
92
|
+
### 2. Shadow only by request [judgment]
|
|
73
93
|
|
|
74
|
-
|
|
94
|
+
Every surface defaults to shadow-0. Use the numbered elevation ladder only when the user explicitly requests a shadow for the named surface; the legacy shadow-elevation hook remains flat.
|
|
75
95
|
|
|
76
|
-
- Do:
|
|
77
|
-
- Do:
|
|
78
|
-
- Do:
|
|
79
|
-
- Don't:
|
|
96
|
+
- Do: Keep controls, cards, menus, overlays, panels, and other surfaces at shadow-0 unless the user specifically requests elevation.
|
|
97
|
+
- Do: When requested, use shadow-100 for controls, shadow-200 for raised surfaces and pressable cards, shadow-300 for menus, popovers, listboxes, and toasts, and shadow-400 for dialogs and overlay drawers.
|
|
98
|
+
- Do: Reserve shadow-500 and shadow-600 for rare higher stacked layers; the legacy shadow-elevation hook resolves to shadow-0.
|
|
99
|
+
- Don't: Infer permission to use a shadow from actionability, floating placement, or component type.
|
|
100
|
+
- Don't: Use raw shadow values or legacy shadow-sm/md/lg/xl utilities.
|
|
80
101
|
- Don't: Put a shadow on a non-interactive surface for decoration.
|
|
102
|
+
- Don't: Use shadow-500 or shadow-600 as a routine default.
|
|
81
103
|
|
|
82
104
|
### 3. Motion follows the interaction [lint: unbounded-transition, sluggish-easing, zero-scale-entrance, undersized-zoom-entrance, raw-spring-config]
|
|
83
105
|
|
|
@@ -134,9 +156,11 @@ A screen carries ONLY what the user needs to move forward: one title, the inputs
|
|
|
134
156
|
|
|
135
157
|
- Do: Prefer more, smaller steps over dense ones; ask one thing at a time.
|
|
136
158
|
- Do: Derive instead of asking whenever possible (a name from a work email, the company from its domain).
|
|
159
|
+
- Do: Prefer clear text-only buttons; add an icon only when it communicates essential meaning the label cannot carry alone, or for a compact conventional icon-only control.
|
|
137
160
|
- Do: Render multi-step flows full-screen — a single content container that holds the inputs and its own Back/Continue is fine.
|
|
138
161
|
- Don't: Add section eyebrows above a title that already names the screen, or helper text that restates the obvious / duplicates a disabled button's meaning.
|
|
139
162
|
- Don't: Add any header description unless the user explicitly requested supporting copy for that page, section, panel, modal, dialog, drawer, or popover.
|
|
163
|
+
- Don't: Decorate a labeled button with a redundant leading or trailing icon.
|
|
140
164
|
- Don't: Nest panel/step-rail chrome inside a multi-step flow.
|
|
141
165
|
|
|
142
166
|
### 9. Responsive = container-fluid components, shells own the width [judgment]
|
|
@@ -144,7 +168,7 @@ A screen carries ONLY what the user needs to move forward: one title, the inputs
|
|
|
144
168
|
ADS targets landscape tablet (1024) → laptop (1440) → wide display (1920+); phone/portrait is out of scope. Components adapt to their CONTAINER via container queries; shells and pages decide pane widths through width tokens. Design against under-utilization, not cramping.
|
|
145
169
|
|
|
146
170
|
- Do: Use @container on the pane and @lg:/@xl: variants on children inside components.
|
|
147
|
-
- Do: Set pane widths in shells/pages through width tokens (
|
|
171
|
+
- Do: Set pane widths in shells/pages through width tokens (thread-max-width, sidebar-width, aside-width, connector-card-min/-max).
|
|
148
172
|
- Do: Cap prose at its measure; let tables/charts/tool cards break out wider. Use auto-fill + minmax(min, 1fr) for grids.
|
|
149
173
|
- Don't: Use sm:/md: viewport variants inside src/components, or hardcode a pane width there.
|
|
150
174
|
- Don't: Cap a grid at a hard column count so it stops growing on wide displays.
|
|
@@ -168,6 +192,20 @@ When tabs and a search field control the same content, they share one responsive
|
|
|
168
192
|
- Don't: Put a scoped search field on a separate row above its tabs when both controls fit side by side.
|
|
169
193
|
- Don't: Place search before tabs in the reading or keyboard order.
|
|
170
194
|
|
|
195
|
+
## UI grammar
|
|
196
|
+
|
|
197
|
+
Before composing a screen, match its intent to one production below, preserve the named JSX tree, then query the design graph for required component states. State axes are independent; render only the representative combinations named by the graph instead of a Cartesian product.
|
|
198
|
+
|
|
199
|
+
- `standard-screen` — Standard screen: One shell-owned screen frame containing a single primary Panel. (intents: screen, page, workspace, editor, detail page; Storybook: ADS/Components/Layout/Panel)
|
|
200
|
+
- `browse-with-detail` — Browse with selection-driven detail: A primary browse Panel and an inline Drawer mounted as shell-level siblings. (intents: browse, records, list detail, inspector, audit log; Storybook: ADS/Components/Navigation/Sidebar)
|
|
201
|
+
- `data-table` — Structured data table: Semantic table anatomy with matching header and body rows. (intents: table, records, comparison, sorting, selection; Storybook: ADS/Components/Data display/Table)
|
|
202
|
+
- `tabbed-results` — Tabbed results with scoped search: Tabs lead and a scoped search trails in one responsive control row. (intents: tabs, filter, search, results, segmented views; Storybook: ADS/Components/Data display/Tabs)
|
|
203
|
+
- `modal-task` — Blocking modal task: A focused interruption with one title, body, and decisive footer. (intents: modal, confirmation, short form, blocking task, destructive action; Storybook: ADS/Components/Overlays/Modal)
|
|
204
|
+
- `settings-card` — Settings card: A compact settings surface with grouped SettingRows and one save action. (intents: settings, preferences, configuration, toggles; Storybook: ADS/Recipes/Settings panel)
|
|
205
|
+
- `research-trace` — Inspectable research trace: ResearchActivity owns the run summary and contains the canonical ChainOfThought tree. (intents: agent trace, research, tool activity, sources, long-running task; Storybook: ADS/Components/AI Elements/Research Activity)
|
|
206
|
+
- `typed-answer` — Typed research answer: A request/answer turn where structured output flows through AnswerRenderer. (intents: answer, research result, citations, follow-up, assistant response; Storybook: ADS/Components/AI Elements/Message)
|
|
207
|
+
- `workflow-canvas` — Workflow canvas: InfiniteCanvas owns pan, zoom, grid, edges, controls, and responsive canvas chrome. (intents: workflow, node graph, canvas, diagram, flow builder; Storybook: ADS/Components/Data display/InfiniteCanvas)
|
|
208
|
+
|
|
171
209
|
## Components
|
|
172
210
|
|
|
173
211
|
Before using any component below, preserve its built-in motion and apply the motion contract in Setup step 5.
|
|
@@ -205,7 +243,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
205
243
|
### Foundations
|
|
206
244
|
|
|
207
245
|
- [AudioWaveform] — component [docs](https://ads.actioneer.dev/#/audio-waveform)
|
|
208
|
-
- [Button] — Use Button for any pressable action
|
|
246
|
+
- [Button] — Use Button for any pressable action and prefer a clear text-only label. Add an icon only when it communicates essential meaning the label cannot carry alone; reserve icon-only buttons for compact, repeated controls with universally understood symbols and an accessible label. (variants: variant: solid|secondary|outline|ghost|link|danger; size: xs|sm|md|lg|icon|icon-sm|icon-xs) [docs](https://ads.actioneer.dev/#/button)
|
|
209
247
|
- [Code] — Use inline within a Text/paragraph to mark a literal token — a command, filename, variable, or short snippet — never as a block-level code display. [docs](https://ads.actioneer.dev/#/typography)
|
|
210
248
|
- [CodeBlock] — Show multi-line source — a query, config, or tool payload — by passing it as a string child. The default treatment is an unfilled outlined filename toolbar above a white outlined source surface, separated by the toolbar's bottom stroke. Line numbers are on by default; add language for syntax highlighting and dedicated props for highlighted, added, or removed lines. Use inline Code for a token inside a sentence. (variants: variant: soft|plain) [docs](https://ads.actioneer.dev/#/code-block)
|
|
211
249
|
- [Divider] — Separate grouped content or inline clusters with a thin rule instead of adding a border to the container. [docs](https://ads.actioneer.dev/#/divider)
|
|
@@ -216,7 +254,6 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
216
254
|
- [Heading] — Use Heading for semantic h1–h4 titles above a page, section, or card, sized by document level via `level` (never a `size` prop). [docs](https://ads.actioneer.dev/#/typography)
|
|
217
255
|
- [Kbd] — Use to display a keyboard shortcut or key name, inline in text or trailing a label in a shortcut list. [docs](https://ads.actioneer.dev/#/kbd)
|
|
218
256
|
- [Label] — component [docs](https://ads.actioneer.dev/#/field)
|
|
219
|
-
- [Link] — Use Link for inline or standalone anchor navigation; add isExternal for links that leave the app. [docs](https://ads.actioneer.dev/#/link)
|
|
220
257
|
- [ResizablePanel] — component [docs](https://ads.actioneer.dev/#/review/resizable-panel)
|
|
221
258
|
- [Reveal] — Choreograph a data surface's entrance instead of a skeleton swap: wrap the shell, labels, values, and charts in ordered Reveals so the layout lands instantly and the content draws itself in. [docs](https://ads.actioneer.dev/#/reveal)
|
|
222
259
|
- [RevealGroup] — component [docs](https://ads.actioneer.dev/#/reveal)
|
|
@@ -236,7 +273,6 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
236
273
|
- [FileDropzoneProps] — TypeScript type
|
|
237
274
|
- [HeadingProps] — TypeScript type
|
|
238
275
|
- [KbdProps] — TypeScript type
|
|
239
|
-
- [LinkProps] — TypeScript type
|
|
240
276
|
- [ResizablePanelProps] — TypeScript type
|
|
241
277
|
- [RevealGroupProps] — TypeScript type
|
|
242
278
|
- [RevealProps] — TypeScript type
|
|
@@ -265,12 +301,13 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
265
301
|
- [Autocomplete] — Use for a single-select text field that filters a known list of options as the user types, with keyboard navigation and a selected-match checkmark. [docs](https://ads.actioneer.dev/#/autocomplete)
|
|
266
302
|
- [Checkbox] — Use for a standalone boolean toggle or a multi-select list item — including a tri-state "select all" via `indeterminate`. [docs](https://ads.actioneer.dev/#/checkbox)
|
|
267
303
|
- [CheckboxGroup] — component [docs](https://ads.actioneer.dev/#/checkbox)
|
|
304
|
+
- [DateRangePicker] — component [docs](https://ads.actioneer.dev/#/date-range-picker)
|
|
268
305
|
- [Input] — Use for any single-line text value, wrapped in `Field` for label/description/error and `startContent`/`endContent` for icons or inline actions. [docs](https://ads.actioneer.dev/#/input)
|
|
269
306
|
- [InputField] — component [docs](https://ads.actioneer.dev/#/input-field)
|
|
270
307
|
- [NumberField] — Use for a bounded numeric quantity (e.g. seats, width, count) that benefits from stepper buttons and min/max clamping, not free-form numeric text entry. [docs](https://ads.actioneer.dev/#/number-field)
|
|
271
308
|
- [Radio] — Use for choosing exactly one option from a small, fully visible set — wrap Radio options in a RadioGroup that owns the shared name and controlled value. [docs](https://ads.actioneer.dev/#/radio)
|
|
272
309
|
- [RadioGroup] — component [docs](https://ads.actioneer.dev/#/radio)
|
|
273
|
-
- [SegmentedControl] — Use for a small set (2-4) of mutually exclusive, always-visible options — like a range or view-mode switcher — not for navigation or long lists. Radius follows control size: 4px at sm and
|
|
310
|
+
- [SegmentedControl] — Use for a small set (2-4) of mutually exclusive, always-visible options — like a range or view-mode switcher — not for navigation or long lists. Radius follows control size: 4px at sm and 6px at md/lg; tracks and options are never fully rounded. (variants: size: sm|md|lg; selected: true|false) [docs](https://ads.actioneer.dev/#/segmented)
|
|
274
311
|
- [Select] — Use for a single choice from a closed list of options in a form, especially when pairing with Field for a labeled control. (variants: size: sm|md|lg) [docs](https://ads.actioneer.dev/#/select)
|
|
275
312
|
- [Slider] — Use for a single controlled numeric value picked from a bounded range (volume, brightness, threshold) — pair with Field or Label/Text for an accessible, labeled control. [docs](https://ads.actioneer.dev/#/slider)
|
|
276
313
|
- [Switch] — Use for a single binary on/off preference that applies immediately, not as part of a form submitted later. [docs](https://ads.actioneer.dev/#/switch)
|
|
@@ -279,6 +316,9 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
279
316
|
- [AutocompleteProps] — TypeScript type
|
|
280
317
|
- [CheckboxGroupProps] — TypeScript type
|
|
281
318
|
- [CheckboxProps] — TypeScript type
|
|
319
|
+
- [DateRangePickerProps] — TypeScript type
|
|
320
|
+
- [DateRangeValue] — TypeScript type
|
|
321
|
+
- [DropdownOptionsProps] — TypeScript type
|
|
282
322
|
- [InputFieldProps] — TypeScript type
|
|
283
323
|
- [InputProps] — TypeScript type
|
|
284
324
|
- [NumberFieldProps] — TypeScript type
|
|
@@ -291,6 +331,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
291
331
|
- [SliderProps] — TypeScript type
|
|
292
332
|
- [SwitchProps] — TypeScript type
|
|
293
333
|
- [TextareaProps] — TypeScript type
|
|
334
|
+
- [DropdownOptions] — utility
|
|
294
335
|
|
|
295
336
|
### Overlays
|
|
296
337
|
|
|
@@ -306,26 +347,32 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
306
347
|
- [DropdownLabel] — component [docs](https://ads.actioneer.dev/#/dropdown)
|
|
307
348
|
- [DropdownSeparator] — component [docs](https://ads.actioneer.dev/#/dropdown)
|
|
308
349
|
- [DropdownTrigger] — component [docs](https://ads.actioneer.dev/#/dropdown)
|
|
350
|
+
- [FloatingDrawer] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
|
|
309
351
|
- [InlineDrawer] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
|
|
310
|
-
- [Modal] — Use for a blocking, focused task or confirmation that must interrupt the page until resolved (portaled, focus-trapped, Escape/backdrop dismissible). (variants: size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/modal)
|
|
311
|
-
- [ModalBody] — component (variants: size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/modal)
|
|
312
|
-
- [
|
|
352
|
+
- [Modal] — Use for a blocking, focused task or confirmation that must interrupt the page until resolved (portaled, focus-trapped, Escape/backdrop dismissible). (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
|
|
353
|
+
- [ModalBody] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
|
|
354
|
+
- [ModalClose] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
|
|
355
|
+
- [ModalDescription] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
|
|
313
356
|
- [ModalDrawer] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
|
|
314
|
-
- [ModalFooter] — component (variants: size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/modal)
|
|
315
|
-
- [ModalHeader] — component (variants: size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/modal)
|
|
316
|
-
- [
|
|
357
|
+
- [ModalFooter] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
|
|
358
|
+
- [ModalHeader] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
|
|
359
|
+
- [ModalSection] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
|
|
360
|
+
- [ModalTitle] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
|
|
317
361
|
- [Popover] — Use Popover for a portaled, dismissible panel anchored to a trigger — quick settings, a profile card, or a short inline form — that closes on outside click or Escape. [docs](https://ads.actioneer.dev/#/popover)
|
|
318
362
|
- [PopoverContent] — component [docs](https://ads.actioneer.dev/#/popover)
|
|
319
363
|
- [PopoverTrigger] — component [docs](https://ads.actioneer.dev/#/popover)
|
|
320
364
|
- [ToastProvider] — component [docs](https://ads.actioneer.dev/#/toast)
|
|
321
365
|
- [CommandPaletteItem] — TypeScript type
|
|
322
366
|
- [CommandPaletteProps] — TypeScript type
|
|
367
|
+
- [DrawerAppearance] — TypeScript type
|
|
323
368
|
- [DrawerProps] — TypeScript type
|
|
324
369
|
- [DropdownContentProps] — TypeScript type
|
|
325
370
|
- [DropdownItemProps] — TypeScript type
|
|
326
371
|
- [DropdownProps] — TypeScript type
|
|
327
372
|
- [DropdownTriggerProps] — TypeScript type
|
|
373
|
+
- [FloatingDrawerProps] — TypeScript type
|
|
328
374
|
- [InlineDrawerProps] — TypeScript type
|
|
375
|
+
- [ModalBodyProps] — TypeScript type
|
|
329
376
|
- [ModalDrawerProps] — TypeScript type
|
|
330
377
|
- [ModalProps] — TypeScript type
|
|
331
378
|
- [PopoverContentProps] — TypeScript type
|
|
@@ -345,14 +392,14 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
345
392
|
- [AccordionItem] — component [docs](https://ads.actioneer.dev/#/accordion)
|
|
346
393
|
- [AnswerRenderer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
347
394
|
- [AnswerSkeleton] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
348
|
-
- [AnswerSourceChip] — Use the blue connector/source chip inside AnswerSources to open only the referenced nodes represented by that chip in the shell's inspector. [docs](https://ads.actioneer.dev/#/ai/
|
|
349
|
-
- [AnswerSourceInspector] — Render as a
|
|
350
|
-
- [AnswerSourceItem] — Use as an outlined clickable row inside AnswerSourceInspector for one referenced table or node, including its parent source, read state, and optional status. [docs](https://ads.actioneer.dev/#/ai/
|
|
351
|
-
- [AnswerSources] — Place immediately above an answer's follow-up questions to summarize the referenced nodes and group them into clickable AnswerSourceChips. [docs](https://ads.actioneer.dev/#/ai/
|
|
395
|
+
- [AnswerSourceChip] — Use the blue connector/source chip inside AnswerSources to open only the referenced nodes represented by that chip in the shell's inspector. [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
396
|
+
- [AnswerSourceInspector] — Render as a persistent right-side sibling when a source or node is selected, then unmount it when that context clears. Execution contract: use a transparent split wrapper with an 8px gap; keep the inspector fixed at 320px and shrink-0 while the primary panel stays min-w-0; use a bg-background canvas, bg-card panels, bg-surface detail rows, independent border-border strokes, text-primary/text-secondary/text-tertiary text, and bg-action-primary CTAs (bg-action-primary-hover on hover); apply the 2/4/6/8px radius scale with 8px on panels and rows, 24px panel padding, and no panel shadow; keep the split workspace wrapper transparent, borderless, shadowless, and square; never fill the gutter or draw one shared border around both panels. [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
397
|
+
- [AnswerSourceItem] — Use as an outlined clickable row inside AnswerSourceInspector for one referenced table or node, including its parent source, read state, and optional status. [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
398
|
+
- [AnswerSources] — Place immediately above an answer's follow-up questions to summarize the referenced nodes and group them into clickable AnswerSourceChips. [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
352
399
|
- [AreaChart] — component [docs](https://ads.actioneer.dev/#/ai/chart)
|
|
353
400
|
- [Avatar] — Use to represent a person or entity as a compact photo-or-initials glyph, standalone or stacked in an AvatarGroup. [docs](https://ads.actioneer.dev/#/avatar)
|
|
354
401
|
- [AvatarGroup] — component [docs](https://ads.actioneer.dev/#/avatar)
|
|
355
|
-
- [Badge] — Use Badge for a small inline label — status, counts, or tags — attached to text or a row.
|
|
402
|
+
- [Badge] — Use Badge for a small inline label — status, counts, or tags — attached to text or a row. [docs](https://ads.actioneer.dev/#/badge)
|
|
356
403
|
- [BarChart] — component [docs](https://ads.actioneer.dev/#/ai/chart)
|
|
357
404
|
- [BaseEdge] — component [docs](https://ads.actioneer.dev/#/infinite-canvas)
|
|
358
405
|
- [BreakdownAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
@@ -368,7 +415,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
368
415
|
- [CarouselItem] — component [docs](https://ads.actioneer.dev/#/carousel)
|
|
369
416
|
- [CarouselNext] — component [docs](https://ads.actioneer.dev/#/carousel)
|
|
370
417
|
- [CarouselPrevious] — component [docs](https://ads.actioneer.dev/#/carousel)
|
|
371
|
-
- [Chip] — A compact pill for statuses, tags, or metadata, with an optional leading icon/avatar or a dismiss control. (variants: variant: solid|
|
|
418
|
+
- [Chip] — A compact pill for statuses, tags, or metadata, with an optional leading icon/avatar or a dismiss control. (variants: variant: solid|outline; color: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/chip)
|
|
372
419
|
- [ClarificationAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
373
420
|
- [ComboChart] — component [docs](https://ads.actioneer.dev/#/ai/chart)
|
|
374
421
|
- [ComparisonAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
@@ -382,6 +429,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
382
429
|
- [ErrorAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
383
430
|
- [ExplanationAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
384
431
|
- [FactAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
432
|
+
- [FollowUpQuestion] — Use for the two or three full-width next-question rows that close a structured answer, immediately after its source strip; show the exact prompt that clicking will send. (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
385
433
|
- [FunnelBarsHorizontal] — component [docs](https://ads.actioneer.dev/#/viz-charts)
|
|
386
434
|
- [FunnelChart] — component [docs](https://ads.actioneer.dev/#/ai/chart)
|
|
387
435
|
- [FunnelViz] — component [docs](https://ads.actioneer.dev/#/viz-charts)
|
|
@@ -404,7 +452,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
404
452
|
- [ScatterChart] — component [docs](https://ads.actioneer.dev/#/ai/chart)
|
|
405
453
|
- [SeriesChart] — component [docs](https://ads.actioneer.dev/#/viz-charts)
|
|
406
454
|
- [StatusAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
407
|
-
- [Tab] — component (variants:
|
|
455
|
+
- [Tab] — component (variants: orientation: horizontal|vertical; selected: true|false) [docs](https://ads.actioneer.dev/#/tabs)
|
|
408
456
|
- [Table] — Use Table for structured tabular data that may need row selection, column sorting, sticky columns, or a paginated footer — not for simple key-value lists. Interactive rows inherit the shared soft neutral hover/focus sink and keep their normal table geometry; do not add a brand tint or hover-only corner rounding. Primary record links stay text-only in every state: never reveal an arrow, chevron, or other directional icon only on hover. Persistent row actions use a final sticky-right column plus elevatedActionColumn so one body-column shadow lifts the action surface instead of repeating on individual cells. The empty matching header cell remains transparent and non-sticky. [docs](https://ads.actioneer.dev/#/table)
|
|
409
457
|
- [TableAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
410
458
|
- [TableBody] — component [docs](https://ads.actioneer.dev/#/table)
|
|
@@ -412,10 +460,10 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
412
460
|
- [TableColumn] — component [docs](https://ads.actioneer.dev/#/table)
|
|
413
461
|
- [TableHeader] — component [docs](https://ads.actioneer.dev/#/table)
|
|
414
462
|
- [TableRow] — component [docs](https://ads.actioneer.dev/#/table)
|
|
415
|
-
- [TabList] — component (variants:
|
|
416
|
-
- [TabPanel] — component (variants:
|
|
417
|
-
- [Tabs] — Use Tabs to switch between mutually exclusive views/sections that share the same page context, not for page-level navigation. Always reach for the primary recessed-track variant — it is the default; use secondary only when explicitly asked for it. Tab radius follows control size
|
|
418
|
-
- [TabSeparator] — component (variants:
|
|
463
|
+
- [TabList] — component (variants: orientation: horizontal|vertical) [docs](https://ads.actioneer.dev/#/tabs)
|
|
464
|
+
- [TabPanel] — component (variants: orientation: horizontal|vertical; selected: true|false) [docs](https://ads.actioneer.dev/#/tabs)
|
|
465
|
+
- [Tabs] — Use Tabs to switch between mutually exclusive views/sections that share the same page context, not for page-level navigation. Always reach for the primary recessed-track variant — it is the default; use secondary only when explicitly asked for it. Tab radius follows control size: 4px at sm and 8px at md/lg, never rounded-full. When Tabs and a scoped search field coexist, compose one responsive control row with tabs leading and search trailing; do not stack search above tabs at widths where both fit. (variants: orientation: horizontal|vertical; selected: true|false) [docs](https://ads.actioneer.dev/#/tabs)
|
|
466
|
+
- [TabSeparator] — component (variants: orientation: horizontal|vertical; selected: true|false) [docs](https://ads.actioneer.dev/#/tabs)
|
|
419
467
|
- [Timeline] — Use for a vertical rail of dated events — version history, audit trails, activity/status feeds. [docs](https://ads.actioneer.dev/#/timeline)
|
|
420
468
|
- [TimelineItem] — component [docs](https://ads.actioneer.dev/#/timeline)
|
|
421
469
|
- [Tree] — component [docs](https://ads.actioneer.dev/#/tree)
|
|
@@ -464,6 +512,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
464
512
|
- [ChartTooltipItem] — TypeScript type
|
|
465
513
|
- [ChartTooltipRenderer] — TypeScript type
|
|
466
514
|
- [ChartXScale] — TypeScript type
|
|
515
|
+
- [ChipInteraction] — TypeScript type
|
|
467
516
|
- [ChipProps] — TypeScript type
|
|
468
517
|
- [ClarificationAnswerProps] — TypeScript type
|
|
469
518
|
- [ClarificationAnswerSpec] — TypeScript type
|
|
@@ -494,6 +543,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
494
543
|
- [ExplanationAnswerSpec] — TypeScript type
|
|
495
544
|
- [FactAnswerProps] — TypeScript type
|
|
496
545
|
- [FactAnswerSpec] — TypeScript type
|
|
546
|
+
- [FollowUpQuestionProps] — TypeScript type
|
|
497
547
|
- [FunnelBarsHorizontalProps] — TypeScript type
|
|
498
548
|
- [FunnelChartProps] — TypeScript type
|
|
499
549
|
- [FunnelLabelContext] — TypeScript type
|
|
@@ -548,6 +598,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
548
598
|
- [TreeItemProps] — TypeScript type
|
|
549
599
|
- [TreemapChartProps] — TypeScript type
|
|
550
600
|
- [TreemapDatum] — TypeScript type
|
|
601
|
+
- [TreeProps] — TypeScript type
|
|
551
602
|
- [TrendAnswerProps] — TypeScript type
|
|
552
603
|
- [TrendAnswerSpec] — TypeScript type
|
|
553
604
|
- [Viewport] — TypeScript type
|
|
@@ -596,11 +647,9 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
596
647
|
|
|
597
648
|
### Feedback
|
|
598
649
|
|
|
599
|
-
- [
|
|
600
|
-
- [Alert] — Use for persistent inline status messaging on a page (not toasts) — a neutral surface where only the icon and title carry variant color. (variants: variant: default|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/alert)
|
|
650
|
+
- [Alert] — Use for inline status messaging on a raised white surface. Add duration for a temporary announcement with a countdown bar; otherwise it remains persistent. (variants: variant: default|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/alert)
|
|
601
651
|
- [AlertDescription] — component (variants: variant: default|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/alert)
|
|
602
652
|
- [AlertTitle] — component (variants: variant: default|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/alert)
|
|
603
|
-
- [BrandLoader] — Use for a branded loading/generating indicator (inline in a text row or as a standalone full-screen moment) instead of a generic spinner. [docs](https://ads.actioneer.dev/#/brand-loader)
|
|
604
653
|
- [BrandMark] — component [docs](https://ads.actioneer.dev/#/brand-loader)
|
|
605
654
|
- [BrandTexture] — Place the ambient halftone wash behind a welcome or hero surface inside a relative container; set lifted when real content takes over so the field dissolves upward, and paused a beat later to stop the shader clock. [docs](https://ads.actioneer.dev/#/brand-texture)
|
|
606
655
|
- [BrandTextureField] — component [docs](https://ads.actioneer.dev/#/brand-texture)
|
|
@@ -610,41 +659,31 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
610
659
|
- [EmptySearch] — component [docs](https://ads.actioneer.dev/#/empty-state)
|
|
611
660
|
- [EmptyState] — Use as the centered placeholder inside a list, table, or panel that currently has nothing to show. [docs](https://ads.actioneer.dev/#/empty-state)
|
|
612
661
|
- [PixelBlastSVG] — component [docs](https://ads.actioneer.dev/#/pixel-blast-svg)
|
|
613
|
-
- [PixelIcon] — component [docs](https://ads.actioneer.dev/#/pixel-icon)
|
|
614
662
|
- [Progress] — Use for a determinate or indeterminate bar showing task completion, driven by a value/max (default 100). [docs](https://ads.actioneer.dev/#/progress)
|
|
615
663
|
- [ProgressCircle] — Use for a compact circular loading/progress indicator (determinate or indeterminate) where a linear bar doesn't fit, e.g. inline with a caption or a small avatar-sized control. [docs](https://ads.actioneer.dev/#/progress-circle)
|
|
616
664
|
- [Ripple] — component [docs](https://ads.actioneer.dev/#/ripple)
|
|
617
665
|
- [Skeleton] — Placeholder the shape of content that's still loading — size it via className and pair with circle for avatars. [docs](https://ads.actioneer.dev/#/skeleton)
|
|
618
|
-
- [
|
|
619
|
-
- [AgentIconName] — TypeScript type
|
|
620
|
-
- [AgentIconProps] — TypeScript type
|
|
621
|
-
- [AgentIconState] — TypeScript type
|
|
666
|
+
- [SurfaceLoader] — Use for any whole panel, modal, or page that is temporarily blocked; it owns the ADS surface spinner, visible status, spacing, and busy semantics. [docs](https://ads.actioneer.dev/#/surface-loader)
|
|
622
667
|
- [AlertProps] — TypeScript type
|
|
623
|
-
- [BrandLoaderProps] — TypeScript type
|
|
624
668
|
- [BrandMarkProps] — TypeScript type
|
|
625
669
|
- [BrandTextureProps] — TypeScript type
|
|
626
670
|
- [EmptyStateProps] — TypeScript type
|
|
627
671
|
- [PixelBlastSVGProps] — TypeScript type
|
|
628
|
-
- [PixelIconMask] — TypeScript type
|
|
629
|
-
- [PixelIconProps] — TypeScript type
|
|
630
672
|
- [ProgressCircleProps] — TypeScript type
|
|
631
673
|
- [ProgressProps] — TypeScript type
|
|
632
674
|
- [RippleProps] — TypeScript type
|
|
633
675
|
- [SkeletonProps] — TypeScript type
|
|
634
|
-
- [
|
|
635
|
-
- [AGENT_ICONS] — utility
|
|
676
|
+
- [SurfaceLoaderProps] — TypeScript type
|
|
636
677
|
|
|
637
678
|
### Navigation
|
|
638
679
|
|
|
680
|
+
- [BodyPageHeader] — component [docs](https://ads.actioneer.dev/#/body-page-header)
|
|
639
681
|
- [BreadcrumbItem] — component [docs](https://ads.actioneer.dev/#/breadcrumbs)
|
|
640
682
|
- [Breadcrumbs] — Use to show a page's location in a hierarchy as a trail of parent links ending in the current page. Keep item labels text-only; the component supplies right-chevron separators. Each drill-down level gets a full-width 48px bar with a subtle bottom stroke. [docs](https://ads.actioneer.dev/#/breadcrumbs)
|
|
641
|
-
- [
|
|
642
|
-
- [
|
|
643
|
-
- [NavbarContent] — component (variants: justify: start|center|end) [docs](https://ads.actioneer.dev/#/navbar)
|
|
644
|
-
- [NavbarItem] — component (variants: justify: start|center|end) [docs](https://ads.actioneer.dev/#/navbar)
|
|
645
|
-
- [PageHeader] — Use for every page title row; supply onBack to anchor an icon-only back arrow immediately before the title, never in the trailing actions area. [docs](https://ads.actioneer.dev/#/page-header)
|
|
683
|
+
- [CollectionHeader] — Use for a top-level sidebar destination or collection. Supply the destination icon, keep search and secondary controls before one compact primary action, and place collection content below its built-in separator. [docs](https://ads.actioneer.dev/#/collection-header)
|
|
684
|
+
- [PageHeader] — Use for detail, create, and edit page title rows; supply onBack to anchor an icon-only back arrow immediately before the title. Use CollectionHeader for top-level sidebar destinations and collections. [docs](https://ads.actioneer.dev/#/page-header)
|
|
646
685
|
- [Pagination] — Use for navigating multi-page numbered content — table footers, search results, or any list too long for one screen. [docs](https://ads.actioneer.dev/#/pagination)
|
|
647
|
-
- [Sidebar] — Use as an app's vertical navigation rail. The canonical Actioneer shell
|
|
686
|
+
- [Sidebar] — Use as an app's vertical navigation rail. The canonical Actioneer shell uses one collapsible Sidebar for product areas and the active area's grouped internal options. Compose SidebarBrand, grouped SidebarItems, optional SidebarHistory, and SidebarAccount as the area requires. [docs](https://ads.actioneer.dev/#/sidebar)
|
|
648
687
|
- [SidebarAccount] — component [docs](https://ads.actioneer.dev/#/sidebar)
|
|
649
688
|
- [SidebarAction] — component [docs](https://ads.actioneer.dev/#/sidebar)
|
|
650
689
|
- [SidebarBrand] — component [docs](https://ads.actioneer.dev/#/sidebar)
|
|
@@ -656,10 +695,10 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
656
695
|
- [SidebarNav] — component [docs](https://ads.actioneer.dev/#/sidebar)
|
|
657
696
|
- [SidebarSection] — component [docs](https://ads.actioneer.dev/#/sidebar)
|
|
658
697
|
- [SidebarTrigger] — component [docs](https://ads.actioneer.dev/#/sidebar)
|
|
698
|
+
- [BodyPageHeaderProps] — TypeScript type
|
|
659
699
|
- [BreadcrumbItemProps] — TypeScript type
|
|
660
700
|
- [BreadcrumbsProps] — TypeScript type
|
|
661
|
-
- [
|
|
662
|
-
- [NavbarItemProps] — TypeScript type
|
|
701
|
+
- [CollectionHeaderProps] — TypeScript type
|
|
663
702
|
- [PageHeaderProps] — TypeScript type
|
|
664
703
|
- [PaginationProps] — TypeScript type
|
|
665
704
|
- [SidebarAccountProps] — TypeScript type
|
|
@@ -677,6 +716,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
677
716
|
- [Collapsible] — Reach for it to build a single disclosure row, detail panel, or FAQ item that expands/collapses in place — compose several instances for a list since ADS has no accordion-group wrapper. [docs](https://ads.actioneer.dev/#/collapsible)
|
|
678
717
|
- [CollapsibleContent] — component [docs](https://ads.actioneer.dev/#/collapsible)
|
|
679
718
|
- [CollapsibleTrigger] — component [docs](https://ads.actioneer.dev/#/collapsible)
|
|
719
|
+
- [PageBody] — component [docs](https://ads.actioneer.dev/#/page-body)
|
|
680
720
|
- [Panel] — Use Panel for app-frame regions (editors, previews, side columns, tool windows) that need a fixed header/footer around independently scrolling body content. [docs](https://ads.actioneer.dev/#/panel)
|
|
681
721
|
- [PanelBody] — component [docs](https://ads.actioneer.dev/#/panel)
|
|
682
722
|
- [PanelFooter] — component [docs](https://ads.actioneer.dev/#/panel)
|
|
@@ -685,6 +725,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
685
725
|
- [PanelToolbar] — component [docs](https://ads.actioneer.dev/#/panel)
|
|
686
726
|
- [SelectionActionBar] — Render it above a selectable list or table once selectedCount is greater than zero, to summarize the selection and expose bulk actions plus a clear control. [docs](https://ads.actioneer.dev/#/selection-action-bar)
|
|
687
727
|
- [SelectionActionBarAction] — component [docs](https://ads.actioneer.dev/#/selection-action-bar)
|
|
728
|
+
- [PageBodyProps] — TypeScript type
|
|
688
729
|
- [SelectionActionBarProps] — TypeScript type
|
|
689
730
|
|
|
690
731
|
### AI Elements
|
|
@@ -704,20 +745,20 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
704
745
|
- [ChainOfThoughtSearchResults] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
|
|
705
746
|
- [ChainOfThoughtStep] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
|
|
706
747
|
- [ChainOfThoughtTrigger] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
|
|
707
|
-
- [InlineCitation] — component [docs](https://ads.actioneer.dev/#/
|
|
708
|
-
- [InlineCitationCard] — component [docs](https://ads.actioneer.dev/#/
|
|
709
|
-
- [InlineCitationCardBody] — component [docs](https://ads.actioneer.dev/#/
|
|
710
|
-
- [InlineCitationCardTrigger] — component [docs](https://ads.actioneer.dev/#/
|
|
711
|
-
- [InlineCitationCarousel] — component [docs](https://ads.actioneer.dev/#/
|
|
712
|
-
- [InlineCitationCarouselContent] — component [docs](https://ads.actioneer.dev/#/
|
|
713
|
-
- [InlineCitationCarouselHeader] — component [docs](https://ads.actioneer.dev/#/
|
|
714
|
-
- [InlineCitationCarouselIndex] — component [docs](https://ads.actioneer.dev/#/
|
|
715
|
-
- [InlineCitationCarouselItem] — component [docs](https://ads.actioneer.dev/#/
|
|
716
|
-
- [InlineCitationCarouselNext] — component [docs](https://ads.actioneer.dev/#/
|
|
717
|
-
- [InlineCitationCarouselPrev] — component [docs](https://ads.actioneer.dev/#/
|
|
718
|
-
- [InlineCitationQuote] — component [docs](https://ads.actioneer.dev/#/
|
|
719
|
-
- [InlineCitationSource] — component [docs](https://ads.actioneer.dev/#/
|
|
720
|
-
- [InlineCitationText] — component [docs](https://ads.actioneer.dev/#/
|
|
748
|
+
- [InlineCitation] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
749
|
+
- [InlineCitationCard] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
750
|
+
- [InlineCitationCardBody] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
751
|
+
- [InlineCitationCardTrigger] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
752
|
+
- [InlineCitationCarousel] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
753
|
+
- [InlineCitationCarouselContent] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
754
|
+
- [InlineCitationCarouselHeader] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
755
|
+
- [InlineCitationCarouselIndex] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
756
|
+
- [InlineCitationCarouselItem] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
757
|
+
- [InlineCitationCarouselNext] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
758
|
+
- [InlineCitationCarouselPrev] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
759
|
+
- [InlineCitationQuote] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
760
|
+
- [InlineCitationSource] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
761
|
+
- [InlineCitationText] — component [docs](https://ads.actioneer.dev/#/inline-citation)
|
|
721
762
|
- [Message] — component (variants: align: start|end) [docs](https://ads.actioneer.dev/#/ai/message)
|
|
722
763
|
- [MessageAction] — component (variants: align: start|end; variant: contained|flat|plain|request) [docs](https://ads.actioneer.dev/#/ai/message)
|
|
723
764
|
- [MessageActions] — component (variants: align: start|end; variant: contained|flat|plain|request) [docs](https://ads.actioneer.dev/#/ai/message)
|
|
@@ -734,43 +775,14 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
734
775
|
- [MessageMeta] — component (variants: align: start|end; variant: contained|flat|plain|request) [docs](https://ads.actioneer.dev/#/ai/message)
|
|
735
776
|
- [MessageResponse] — component (variants: align: start|end; variant: contained|flat|plain|request) [docs](https://ads.actioneer.dev/#/ai/message)
|
|
736
777
|
- [MessageToolbar] — component (variants: align: start|end; variant: contained|flat|plain|request) [docs](https://ads.actioneer.dev/#/ai/message)
|
|
737
|
-
- [Queue] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
738
|
-
- [QueueItem] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
739
|
-
- [QueueItemAction] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
740
|
-
- [QueueItemActions] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
741
|
-
- [QueueItemAttachment] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
742
|
-
- [QueueItemContent] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
743
|
-
- [QueueItemDescription] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
744
|
-
- [QueueItemFile] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
745
|
-
- [QueueItemImage] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
746
|
-
- [QueueItemIndicator] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
747
|
-
- [QueueList] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
748
|
-
- [QueueSection] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
749
|
-
- [QueueSectionContent] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
750
|
-
- [QueueSectionLabel] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
751
|
-
- [QueueSectionTrigger] — component [docs](https://ads.actioneer.dev/#/ai/queue)
|
|
752
778
|
- [ResearchActivity] — Wrap a multi-step research trace that may run for minutes; pass activity so the run reads as one morphing live line with the full trace a click away, then settle into its source count, duration, and first-insight time. (variants: status: active|complete) [docs](https://ads.actioneer.dev/#/ai/research-activity)
|
|
753
|
-
- [Shimmer] — component [docs](https://ads.actioneer.dev/#/
|
|
754
|
-
- [SpeechInput] — component [docs](https://ads.actioneer.dev/#/ai/speech-input)
|
|
755
|
-
- [Task] — component [docs](https://ads.actioneer.dev/#/ai/task)
|
|
756
|
-
- [TaskContent] — component [docs](https://ads.actioneer.dev/#/ai/task)
|
|
757
|
-
- [TaskItem] — component [docs](https://ads.actioneer.dev/#/ai/task)
|
|
758
|
-
- [TaskItemFile] — component [docs](https://ads.actioneer.dev/#/ai/task)
|
|
759
|
-
- [TaskProgress] — Keep a multi-step answer’s current task, elapsed time, completed work, and pending work visible in a collapsible dock above the chat composer. (variants: isSticky: true|false) [docs](https://ads.actioneer.dev/#/ai/task-progress)
|
|
760
|
-
- [TaskProgressDock] — component (variants: isSticky: true|false) [docs](https://ads.actioneer.dev/#/ai/task-progress)
|
|
761
|
-
- [TaskTrigger] — component [docs](https://ads.actioneer.dev/#/ai/task)
|
|
779
|
+
- [Shimmer] — component [docs](https://ads.actioneer.dev/#/shimmer)
|
|
762
780
|
- [ToolContent] — component [docs](https://ads.actioneer.dev/#/ai/tool)
|
|
763
781
|
- [ToolHeader] — component [docs](https://ads.actioneer.dev/#/ai/tool)
|
|
764
782
|
- [ToolInput] — component [docs](https://ads.actioneer.dev/#/ai/tool)
|
|
765
783
|
- [ToolOutput] — component [docs](https://ads.actioneer.dev/#/ai/tool)
|
|
766
784
|
- [TraceStateIcon] — component [docs](https://ads.actioneer.dev/#/chain-of-thought-icon)
|
|
767
785
|
- [Transcript] — component [docs](https://ads.actioneer.dev/#/ai/transcript)
|
|
768
|
-
- [Voice] — component [docs](https://ads.actioneer.dev/#/ai/voice)
|
|
769
|
-
- [VoiceConnectButton] — component [docs](https://ads.actioneer.dev/#/ai/voice)
|
|
770
|
-
- [VoiceControl] — component [docs](https://ads.actioneer.dev/#/ai/voice)
|
|
771
|
-
- [VoiceDisconnectButton] — component [docs](https://ads.actioneer.dev/#/ai/voice)
|
|
772
|
-
- [VoiceMuteButton] — component [docs](https://ads.actioneer.dev/#/ai/voice)
|
|
773
|
-
- [VoiceStatusDot] — component [docs](https://ads.actioneer.dev/#/ai/voice)
|
|
774
786
|
- [ActiveChainOfThoughtState] — TypeScript type
|
|
775
787
|
- [AgentTraceCall] — TypeScript type
|
|
776
788
|
- [AgentTraceProps] — TypeScript type
|
|
@@ -828,36 +840,8 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
828
840
|
- [MessageResponseProps] — TypeScript type
|
|
829
841
|
- [MessageRole] — TypeScript type
|
|
830
842
|
- [MessageToolbarProps] — TypeScript type
|
|
831
|
-
- [QueueItemActionProps] — TypeScript type
|
|
832
|
-
- [QueueItemActionsProps] — TypeScript type
|
|
833
|
-
- [QueueItemAttachmentProps] — TypeScript type
|
|
834
|
-
- [QueueItemContentProps] — TypeScript type
|
|
835
|
-
- [QueueItemDescriptionProps] — TypeScript type
|
|
836
|
-
- [QueueItemFileProps] — TypeScript type
|
|
837
|
-
- [QueueItemImageProps] — TypeScript type
|
|
838
|
-
- [QueueItemIndicatorProps] — TypeScript type
|
|
839
|
-
- [QueueItemProps] — TypeScript type
|
|
840
|
-
- [QueueListProps] — TypeScript type
|
|
841
|
-
- [QueueMessage] — TypeScript type
|
|
842
|
-
- [QueueMessagePart] — TypeScript type
|
|
843
|
-
- [QueueProps] — TypeScript type
|
|
844
|
-
- [QueueSectionContentProps] — TypeScript type
|
|
845
|
-
- [QueueSectionLabelProps] — TypeScript type
|
|
846
|
-
- [QueueSectionProps] — TypeScript type
|
|
847
|
-
- [QueueSectionTriggerProps] — TypeScript type
|
|
848
|
-
- [QueueTodo] — TypeScript type
|
|
849
843
|
- [ResearchActivityProps] — TypeScript type
|
|
850
844
|
- [ResearchActivityStatus] — TypeScript type
|
|
851
|
-
- [SpeechInputProps] — TypeScript type
|
|
852
|
-
- [TaskContentProps] — TypeScript type
|
|
853
|
-
- [TaskItemFileProps] — TypeScript type
|
|
854
|
-
- [TaskItemProps] — TypeScript type
|
|
855
|
-
- [TaskProgressDockProps] — TypeScript type
|
|
856
|
-
- [TaskProgressProps] — TypeScript type
|
|
857
|
-
- [TaskProgressStatus] — TypeScript type
|
|
858
|
-
- [TaskProgressStep] — TypeScript type
|
|
859
|
-
- [TaskProps] — TypeScript type
|
|
860
|
-
- [TaskTriggerProps] — TypeScript type
|
|
861
845
|
- [TextShimmerProps] — TypeScript type
|
|
862
846
|
- [ToolContentProps] — TypeScript type
|
|
863
847
|
- [ToolHeaderProps] — TypeScript type
|
|
@@ -869,24 +853,11 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
869
853
|
- [TranscriptProps] — TypeScript type
|
|
870
854
|
- [TranscriptTone] — TypeScript type
|
|
871
855
|
- [TranscriptTurn] — TypeScript type
|
|
872
|
-
- [VoiceConnectButtonProps] — TypeScript type
|
|
873
|
-
- [VoiceControlProps] — TypeScript type
|
|
874
|
-
- [VoiceDisconnectButtonProps] — TypeScript type
|
|
875
|
-
- [VoiceMuteButtonProps] — TypeScript type
|
|
876
|
-
- [VoiceOrbPalette] — TypeScript type
|
|
877
|
-
- [VoicePalette] — TypeScript type
|
|
878
|
-
- [VoiceProps] — TypeScript type
|
|
879
|
-
- [VoiceState] — TypeScript type
|
|
880
|
-
- [VoiceStatusDotProps] — TypeScript type
|
|
881
|
-
- [VoiceVariant] — TypeScript type
|
|
882
856
|
- [aiChartVariants] — utility
|
|
883
857
|
- [CHAIN_OF_THOUGHT_DESCRIPTIONS] — utility
|
|
884
858
|
- [CHAIN_OF_THOUGHT_STATES] — utility
|
|
885
859
|
- [resolveTraceState] — utility
|
|
886
860
|
- [Tool] — utility
|
|
887
|
-
- [VOICE_PALETTES] — utility
|
|
888
|
-
- [VOICE_STATES] — utility
|
|
889
|
-
- [VOICE_VARIANTS] — utility
|
|
890
861
|
|
|
891
862
|
### Chat
|
|
892
863
|
|
|
@@ -894,7 +865,6 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
894
865
|
- [AssistantMessage] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
895
866
|
- [AssistantRuntimeProvider] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
896
867
|
- [AttachmentPrimitive] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
897
|
-
- [BranchPicker] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
898
868
|
- [Composer] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
899
869
|
- [ComposerAddAttachment] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
900
870
|
- [ComposerAddDocument] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
@@ -922,8 +892,6 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
922
892
|
- [FileName] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
923
893
|
- [FileRoot] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
924
894
|
- [FileSize] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
925
|
-
- [FollowUpQuestion] — Use for the two or three full-width next-question rows that close a structured answer, immediately after its source strip; show the exact prompt that clicking will send. [docs](https://ads.actioneer.dev/#/ai/follow-up-suggestions)
|
|
926
|
-
- [FollowUpSuggestion] — Use only for compact runtime suggestion chips above the composer; use FollowUpQuestion for the larger answer-ending question rows. [docs](https://ads.actioneer.dev/#/ai/follow-up-suggestions)
|
|
927
895
|
- [Image] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
928
896
|
- [ImageActions] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
929
897
|
- [ImageContentFilterError] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
@@ -951,11 +919,8 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
951
919
|
- [Sources] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
952
920
|
- [SourceTitle] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
953
921
|
- [Thread] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
954
|
-
- [ThreadFollowupSuggestions] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
955
922
|
- [ThreadMessage] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
956
923
|
- [ThreadPrimitive] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
957
|
-
- [ThreadSuggestionItem] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
958
|
-
- [ThreadSuggestions] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
959
924
|
- [ToolFallback] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
960
925
|
- [ToolFallbackApproval] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
961
926
|
- [ToolFallbackArgs] — component [docs](https://ads.actioneer.dev/#/demo/ask)
|
|
@@ -977,8 +942,6 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
977
942
|
- [CreateDirectiveTextOptions] — TypeScript type
|
|
978
943
|
- [DeepResearchState] — TypeScript type
|
|
979
944
|
- [FileRootProps] — TypeScript type
|
|
980
|
-
- [FollowUpQuestionProps] — TypeScript type
|
|
981
|
-
- [FollowUpSuggestionProps] — TypeScript type
|
|
982
945
|
- [ImageActionsProps] — TypeScript type
|
|
983
946
|
- [ImageRootProps] — TypeScript type
|
|
984
947
|
- [LocalRuntimeOptions] — TypeScript type
|