@actioneer/ads 0.5.9 → 0.6.0

package/fonts.css

@@ -1,4 +1,6 @@
 /* @actioneer/ads — generated by scripts/build-lib-styles.mjs. Do not edit. */
+@import "@fontsource-variable/jetbrains-mono/wght.css";
+
 /* Aribau Grotesk — ADS UI typeface.
    TWO physical faces, both served compressed (woff2):
    • Regular → `font-normal` (weight 100–499)

package/llms.txt

@@ -28,6 +28,9 @@ Reference semantic roles, never raw color/dimension literals (ads-lint rejects l
 - `muted-foreground`
 - `card`
 - `card-foreground`
+- `action-primary` — Primary CTA role — restrained Studio green, used sparingly.
+- `action-primary-foreground` — Primary CTA role — restrained Studio green, used sparingly.
+- `action-primary-hover` — Primary CTA role — restrained Studio green, used sparingly.
 - `brand` — Compatibility action role — neutral ink, never a colored primary hue.
 - `brand-foreground` — Compatibility action role — neutral ink, never a colored primary hue.
 - `brand-hover` — Compatibility action role — neutral ink, never a colored primary hue.
@@ -168,6 +171,20 @@ When tabs and a search field control the same content, they share one responsive
 - Don't: Put a scoped search field on a separate row above its tabs when both controls fit side by side.
 - Don't: Place search before tabs in the reading or keyboard order.
 
+## UI grammar
+
+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.
+
+- `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)
+- `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/Recipes/Immersive detail view)
+- `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)
+- `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)
+- `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)
+- `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)
+- `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)
+- `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)
+- `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)
+
 ## Components
 
 Before using any component below, preserve its built-in motion and apply the motion contract in Setup step 5.
@@ -265,12 +282,13 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [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)
 - [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)
 - [CheckboxGroup] — component [docs](https://ads.actioneer.dev/#/checkbox)
+- [DateRangePicker] — component [docs](https://ads.actioneer.dev/#/date-range-picker)
 - [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)
 - [InputField] — component [docs](https://ads.actioneer.dev/#/input-field)
 - [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)
 - [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)
 - [RadioGroup] — component [docs](https://ads.actioneer.dev/#/radio)
-- [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 8px at md/lg; tracks and options are never fully rounded. (variants: size: sm|md|lg; selected: true|false) [docs](https://ads.actioneer.dev/#/segmented)
+- [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)
 - [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)
 - [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)
 - [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 +297,8 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [AutocompleteProps] — TypeScript type
 - [CheckboxGroupProps] — TypeScript type
 - [CheckboxProps] — TypeScript type
+- [DateRangePickerProps] — TypeScript type
+- [DateRangeValue] — TypeScript type
 - [InputFieldProps] — TypeScript type
 - [InputProps] — TypeScript type
 - [NumberFieldProps] — TypeScript type
@@ -346,7 +366,7 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [AnswerRenderer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
 - [AnswerSkeleton] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
 - [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/sources)
-- [AnswerSourceInspector] — Render as a separate white shell-level panel beside the answer when a source chip is selected; close and unmount it when the selection clears. [docs](https://ads.actioneer.dev/#/ai/sources)
+- [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 immersive outer shell transparent, borderless, shadowless, and square; never fill the gutter or draw one shared border around both panels. [docs](https://ads.actioneer.dev/#/ai/sources)
 - [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/sources)
 - [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/sources)
 - [AreaChart] — component [docs](https://ads.actioneer.dev/#/ai/chart)