@actioneer/ads 0.1.0

package/llms.txt

@@ -0,0 +1,537 @@
+# @actioneer/ads
+
+> The Actioneer Design System (ADS 1.0) — a React 19 + Tailwind v4 component library. Build UI only from the exact named exports below; every value flows from a token. Never fork, alias, deep-import, or hand-roll a copy of a component — import the named export from `@actioneer/ads`. `@actioneer/ads-lint` enforces this.
+
+## Setup
+
+1. Install: `npm install @actioneer/ads` (or run `npx @actioneer/ads init`).
+2. In your global stylesheet, after `@import "tailwindcss";`, add `@import "@actioneer/ads/styles.css";` — it carries the `@theme` tokens, the Aribau `@font-face`, and the `@source` that makes Tailwind scan ADS classes. Imported standalone (not into the tailwindcss graph) its `@theme` is inert and no tokens emit.
+3. Wrap the app root with the required providers:
+   - `TooltipProvider` (from `@actioneer/ads`) — wrap the app; the vendored tooltip/attachment chips crash without an ancestor provider
+   - `ToastProvider` (from `@actioneer/ads`) — required to render toasts
+   - `<MotionConfig reducedMotion="user">` (from `motion/react`) — honor the OS reduced-motion setting
+4. Import contract: `import { Button } from "@actioneer/ads";` — the exact named export, never `@actioneer/ads/button`, never an alias, never a local copy.
+
+## Tokens
+
+Reference semantic roles, never raw color/dimension literals (ads-lint rejects literals). Each role produces `bg-/text-/border-<role>` utilities:
+- `background`
+- `foreground`
+- `primary` — Text hierarchy — three accessible levels (all ≥ AA on --background)
+- `secondary` — Text hierarchy — three accessible levels (all ≥ AA on --background)
+- `tertiary` — Text hierarchy — three accessible levels (all ≥ AA on --background)
+- `surface`
+- `surface-foreground`
+- `elevated`
+- `muted`
+- `muted-foreground`
+- `card`
+- `card-foreground`
+- `brand` — Brand (black) — used for solid fills, not body text
+- `brand-foreground` — Brand (black) — used for solid fills, not body text
+- `brand-hover` — Brand (black) — used for solid fills, not body text
+- `fill` — Quiet fill — secondary buttons, avatars, chips
+- `fill-foreground` — Quiet fill — secondary buttons, avatars, chips
+- `accent`
+- `accent-foreground`
+- `success`
+- `success-foreground`
+- `warning`
+- `warning-foreground`
+- `danger`
+- `danger-foreground`
+- `info`
+- `info-foreground`
+- `border`
+- `border-strong`
+- `input`
+- `ring`
+- `overlay`
+
+## Components
+
+### Primitives / utilities
+
+- [TooltipProvider] — component [docs](https://ads.actioneer.dev/#/tooltip)
+- [InteractiveProps] — TypeScript type
+- [cn] — utility
+- [interactive] — utility
+
+### Foundations
+
+- [Button] — Use Button for any pressable action — a primary CTA, secondary action, or icon-only control — choosing variant by emphasis and size by context. (variants: variant: solid|secondary|outline|ghost|soft|link|danger; size: xs|sm|md|lg|icon|icon-sm|icon-xs) [docs](https://ads.actioneer.dev/#/button)
+- [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)
+- [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)
+- [Field] — Wrap any form control (Input, Select, NumberField, Textarea, etc.) with a label plus optional description or error footer. [docs](https://ads.actioneer.dev/#/field)
+- [FieldDescription] — component [docs](https://ads.actioneer.dev/#/field)
+- [FieldError] — component [docs](https://ads.actioneer.dev/#/field)
+- [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)
+- [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)
+- [Label] — component [docs](https://ads.actioneer.dev/#/field)
+- [Link] — Use Link for inline or standalone anchor navigation; add isExternal for links that leave the app. [docs](https://ads.actioneer.dev/#/link)
+- [Spinner] — Use for an indeterminate loading state (e.g. inside a Button's isLoading, or standalone while content is fetching) — not for measurable/determinate progress. (variants: size: sm|md|lg; color: current|primary|muted) [docs](https://ads.actioneer.dev/#/spinner)
+- [Text] — Use Text for any body copy, caption, or inline run of prose instead of a raw p/span tag. [docs](https://ads.actioneer.dev/#/typography)
+- [ButtonProps] — TypeScript type
+- [DividerProps] — TypeScript type
+- [FieldProps] — TypeScript type
+- [HeadingProps] — TypeScript type
+- [KbdProps] — TypeScript type
+- [LinkProps] — TypeScript type
+- [SpinnerProps] — TypeScript type
+- [TextProps] — TypeScript type
+- [buttonVariants] — utility
+- [inputBaseClass] — utility
+
+### Form controls
+
+- [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)
+- [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. (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)
+- [Textarea] — Use for multiline free-text input (feedback, notes, announcements) that shares Input's filled surface, stroke, and glow, wrapped in Field for a label/description/error. [docs](https://ads.actioneer.dev/#/textarea)
+- [AutocompleteItem] — TypeScript type
+- [AutocompleteProps] — TypeScript type
+- [CheckboxGroupProps] — TypeScript type
+- [CheckboxProps] — TypeScript type
+- [InputFieldProps] — TypeScript type
+- [InputProps] — TypeScript type
+- [NumberFieldProps] — TypeScript type
+- [RadioGroupProps] — TypeScript type
+- [RadioProps] — TypeScript type
+- [SegmentedControlProps] — TypeScript type
+- [SegmentedOption] — TypeScript type
+- [SelectItem] — TypeScript type
+- [SelectProps] — TypeScript type
+- [SliderProps] — TypeScript type
+- [SwitchProps] — TypeScript type
+- [TextareaProps] — TypeScript type
+
+### Overlays
+
+- [Drawer] — Use the portaled Drawer for a focused, blocking task (form, details, settings) that slides in over the page with a backdrop and focus trap; use InlineDrawer instead for a contextual panel that must stay in-flow beside content the user still needs. (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
+- [DrawerBody] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
+- [DrawerFooter] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
+- [DrawerHeader] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
+- [DrawerTitle] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
+- [Dropdown] — Use a portaled, keyboard-navigable menu anchored to a trigger for row actions, account menus, or any list of commands revealed by a click. [docs](https://ads.actioneer.dev/#/dropdown)
+- [DropdownContent] — component [docs](https://ads.actioneer.dev/#/dropdown)
+- [DropdownItem] — component [docs](https://ads.actioneer.dev/#/dropdown)
+- [DropdownLabel] — component [docs](https://ads.actioneer.dev/#/dropdown)
+- [DropdownSeparator] — component [docs](https://ads.actioneer.dev/#/dropdown)
+- [DropdownTrigger] — component [docs](https://ads.actioneer.dev/#/dropdown)
+- [InlineDrawer] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
+- [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)
+- [ModalBody] — component (variants: size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/modal)
+- [ModalDescription] — component (variants: size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/modal)
+- [ModalDrawer] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
+- [ModalFooter] — component (variants: size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/modal)
+- [ModalHeader] — component (variants: size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/modal)
+- [ModalTitle] — component (variants: size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/modal)
+- [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)
+- [PopoverContent] — component [docs](https://ads.actioneer.dev/#/popover)
+- [PopoverTrigger] — component [docs](https://ads.actioneer.dev/#/popover)
+- [ToastProvider] — component [docs](https://ads.actioneer.dev/#/toast)
+- [Tooltip] — Use to label a single hover/focus-triggered element (icon-only buttons, avatars, truncated text) with a short informational hint — not for actions or content that needs to stay open. [docs](https://ads.actioneer.dev/#/tooltip)
+- [DrawerProps] — TypeScript type
+- [DropdownContentProps] — TypeScript type
+- [DropdownItemProps] — TypeScript type
+- [DropdownProps] — TypeScript type
+- [DropdownTriggerProps] — TypeScript type
+- [InlineDrawerProps] — TypeScript type
+- [ModalDrawerProps] — TypeScript type
+- [ModalProps] — TypeScript type
+- [PopoverContentProps] — TypeScript type
+- [PopoverProps] — TypeScript type
+- [PopoverTriggerProps] — TypeScript type
+- [ToastActionProps] — TypeScript type
+- [ToastFn] — TypeScript type
+- [ToastOptions] — TypeScript type
+- [ToastPlacement] — TypeScript type
+- [ToastProviderProps] — TypeScript type
+- [ToastVariant] — TypeScript type
+- [TooltipProps] — TypeScript type
+- [useToast] — React hook
+
+### Data display
+
+- [Accordion] — Use for FAQ-style or settings-style stacked content where headings should collapse to save space and only the relevant section needs to be visible at once. [docs](https://ads.actioneer.dev/#/accordion)
+- [AccordionItem] — component [docs](https://ads.actioneer.dev/#/accordion)
+- [ANSWER_TOOL_DESCRIPTION] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
+- [ANSWER_TOOL_NAME] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
+- [AnswerRenderer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
+- [AreaChart] — component [docs](https://ads.actioneer.dev/#/chart)
+- [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)
+- [AvatarGroup] — component [docs](https://ads.actioneer.dev/#/avatar)
+- [Badge] — Use Badge for a small inline label — status, counts, or tags — attached to text or a row. (variants: variant: solid|soft|outline|dot; color: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/badge)
+- [BarChart] — component [docs](https://ads.actioneer.dev/#/chart)
+- [BreakdownAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
+- [Card] — Use to group related content into a borderless surface; add `isHoverable` or `isPressable` only when the whole card is actionable. [docs](https://ads.actioneer.dev/#/card)
+- [CardBody] — component [docs](https://ads.actioneer.dev/#/card)
+- [CardDescription] — component [docs](https://ads.actioneer.dev/#/card)
+- [CardFooter] — component [docs](https://ads.actioneer.dev/#/card)
+- [CardHeader] — component [docs](https://ads.actioneer.dev/#/card)
+- [CardTitle] — component [docs](https://ads.actioneer.dev/#/card)
+- [Carousel] — Use for a small, ordered set of related feature stories or media panels when showing every item at once would compete for space. [docs](https://ads.actioneer.dev/#/carousel)
+- [CarouselContent] — component [docs](https://ads.actioneer.dev/#/carousel)
+- [CarouselIndicators] — component [docs](https://ads.actioneer.dev/#/carousel)
+- [CarouselItem] — component [docs](https://ads.actioneer.dev/#/carousel)
+- [CarouselNext] — component [docs](https://ads.actioneer.dev/#/carousel)
+- [CarouselPrevious] — component [docs](https://ads.actioneer.dev/#/carousel)
+- [Chip] — A compact pill for statuses, tags, or metadata, with an optional leading icon/avatar or a dismiss control. (variants: variant: solid|soft|outline|dot; color: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/chip)
+- [ComboChart] — component [docs](https://ads.actioneer.dev/#/chart)
+- [ComparisonAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
+- [ComposedChart] — component [docs](https://ads.actioneer.dev/#/chart)
+- [ConnectionStatus] — component [docs](https://ads.actioneer.dev/#/connector-card)
+- [ConnectorCard] — Use ConnectorCard to represent one data source/destination on an integrations screen — identity, connection status, health strip, and a usage/action footer. [docs](https://ads.actioneer.dev/#/connector-card)
+- [ExplanationAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
+- [FunnelChart] — component [docs](https://ads.actioneer.dev/#/chart)
+- [LineChart] — component [docs](https://ads.actioneer.dev/#/chart)
+- [PieChart] — component [docs](https://ads.actioneer.dev/#/chart)
+- [RadarChart] — component [docs](https://ads.actioneer.dev/#/chart)
+- [RadialBarChart] — component [docs](https://ads.actioneer.dev/#/chart)
+- [ScatterChart] — component [docs](https://ads.actioneer.dev/#/chart)
+- [StatusAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
+- [Tab] — component (variants: variant: primary|secondary; orientation: horizontal|vertical; size: sm|md|lg; selected: true|false) [docs](https://ads.actioneer.dev/#/tabs)
+- [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. [docs](https://ads.actioneer.dev/#/table)
+- [TableBody] — component [docs](https://ads.actioneer.dev/#/table)
+- [TableCell] — component [docs](https://ads.actioneer.dev/#/table)
+- [TableColumn] — component [docs](https://ads.actioneer.dev/#/table)
+- [TableHeader] — component [docs](https://ads.actioneer.dev/#/table)
+- [TableRow] — component [docs](https://ads.actioneer.dev/#/table)
+- [TabList] — component (variants: variant: primary|secondary; orientation: horizontal|vertical; size: sm|md|lg; selected: true|false) [docs](https://ads.actioneer.dev/#/tabs)
+- [TabPanel] — component (variants: variant: primary|secondary; orientation: horizontal|vertical; size: sm|md|lg; selected: true|false) [docs](https://ads.actioneer.dev/#/tabs)
+- [Tabs] — Use Tabs to switch between mutually exclusive views/sections that share the same page context, not for page-level navigation. (variants: variant: primary|secondary; orientation: horizontal|vertical; size: sm|md|lg; selected: true|false) [docs](https://ads.actioneer.dev/#/tabs)
+- [TabSeparator] — component (variants: variant: primary|secondary; orientation: horizontal|vertical; size: sm|md|lg; selected: true|false) [docs](https://ads.actioneer.dev/#/tabs)
+- [Timeline] — Use for a vertical rail of dated events — version history, audit trails, activity/status feeds. [docs](https://ads.actioneer.dev/#/timeline)
+- [TimelineItem] — component [docs](https://ads.actioneer.dev/#/timeline)
+- [Tree] — component [docs](https://ads.actioneer.dev/#/tree)
+- [TreeItem] — component [docs](https://ads.actioneer.dev/#/tree)
+- [TreemapChart] — component [docs](https://ads.actioneer.dev/#/chart)
+- [TrendAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
+- [AccordionItemProps] — TypeScript type
+- [AccordionProps] — TypeScript type
+- [AnswerFollowUp] — TypeScript type
+- [AnswerRendererProps] — TypeScript type
+- [AnswerSource] — TypeScript type
+- [AnswerSpec] — TypeScript type
+- [AnswerTone] — TypeScript type
+- [AreaChartProps] — TypeScript type
+- [AvatarGroupProps] — TypeScript type
+- [AvatarProps] — TypeScript type
+- [BadgeProps] — TypeScript type
+- [BarChartProps] — TypeScript type
+- [BreakdownAnswerProps] — TypeScript type
+- [BreakdownAnswerSpec] — TypeScript type
+- [CardFooterProps] — TypeScript type
+- [CardProps] — TypeScript type
+- [CarouselContentProps] — TypeScript type
+- [CarouselIndicatorsProps] — TypeScript type
+- [CarouselItemProps] — TypeScript type
+- [CarouselNextProps] — TypeScript type
+- [CarouselPreviousProps] — TypeScript type
+- [CarouselProps] — TypeScript type
+- [ChartAnnotation] — TypeScript type
+- [ChartColor] — TypeScript type
+- [ChartDatum] — TypeScript type
+- [ChipProps] — TypeScript type
+- [ComboChartProps] — TypeScript type
+- [ComparisonAnswerProps] — TypeScript type
+- [ComparisonAnswerSpec] — TypeScript type
+- [ComposedChartProps] — TypeScript type
+- [ConnectionStatusProps] — TypeScript type
+- [ConnectorAction] — TypeScript type
+- [ConnectorCardData] — TypeScript type
+- [ConnectorCardProps] — TypeScript type
+- [ConnectorFooter] — TypeScript type
+- [ConnectorStrip] — TypeScript type
+- [ConnectorTint] — TypeScript type
+- [ExplanationAnswerProps] — TypeScript type
+- [ExplanationAnswerSpec] — TypeScript type
+- [FunnelChartProps] — TypeScript type
+- [LineChartProps] — TypeScript type
+- [PieChartProps] — TypeScript type
+- [RadarChartProps] — TypeScript type
+- [RadialBarChartProps] — TypeScript type
+- [ScatterChartProps] — TypeScript type
+- [Selection] — TypeScript type
+- [SelectionMode] — TypeScript type
+- [SortDescriptor] — TypeScript type
+- [SortDirection] — TypeScript type
+- [StatusAnswerProps] — TypeScript type
+- [StatusAnswerSpec] — TypeScript type
+- [TableCellProps] — TypeScript type
+- [TableColumnProps] — TypeScript type
+- [TableProps] — TypeScript type
+- [TableRowProps] — TypeScript type
+- [TabListProps] — TypeScript type
+- [TabPanelProps] — TypeScript type
+- [TabProps] — TypeScript type
+- [TabSeparatorProps] — TypeScript type
+- [TabsProps] — TypeScript type
+- [TimelineItemProps] — TypeScript type
+- [TreeItemProps] — TypeScript type
+- [TreemapChartProps] — TypeScript type
+- [TreemapDatum] — TypeScript type
+- [TrendAnswerProps] — TypeScript type
+- [TrendAnswerSpec] — TypeScript type
+- [AnswerFollowUpSchema] — utility
+- [AnswerSignalSchema] — utility
+- [AnswerSourceSchema] — utility
+- [AnswerSpecSchema] — utility
+- [AnswerToneSchema] — utility
+- [answerTool] — utility
+- [BreakdownAnswerSchema] — utility
+- [carouselVariants] — utility
+- [ComparisonAnswerSchema] — utility
+- [ExplanationAnswerSchema] — utility
+- [StatusAnswerSchema] — utility
+- [TrendAnswerSchema] — utility
+
+### Feedback
+
+- [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)
+- [AlertDescription] — component (variants: variant: default|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/alert)
+- [AlertTitle] — component (variants: variant: default|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/alert)
+- [BrandMark] — component [docs](https://ads.actioneer.dev/#/brand-loader)
+- [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)
+- [PixelBlastSVG] — component [docs](https://ads.actioneer.dev/#/pixel-blast-svg)
+- [Progress] — Use for a determinate or indeterminate bar showing task completion, driven by a value/max (default 100). [docs](https://ads.actioneer.dev/#/progress)
+- [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)
+- [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)
+- [AlertProps] — TypeScript type
+- [BrandMarkProps] — TypeScript type
+- [EmptyStateProps] — TypeScript type
+- [PixelBlastSVGProps] — TypeScript type
+- [ProgressCircleProps] — TypeScript type
+- [ProgressProps] — TypeScript type
+- [SkeletonProps] — TypeScript type
+
+### Navigation
+
+- [BreadcrumbItem] — component [docs](https://ads.actioneer.dev/#/breadcrumbs)
+- [Breadcrumbs] — Use to show a page's location in a hierarchy as a trail of parent links ending in the current page. [docs](https://ads.actioneer.dev/#/breadcrumbs)
+- [Navbar] — Use for a sticky top-of-page nav shell with a brand slot, justified link/action groups, and active-state item links. (variants: justify: start|center|end) [docs](https://ads.actioneer.dev/#/navbar)
+- [NavbarBrand] — component (variants: justify: start|center|end) [docs](https://ads.actioneer.dev/#/navbar)
+- [NavbarContent] — component (variants: justify: start|center|end) [docs](https://ads.actioneer.dev/#/navbar)
+- [NavbarItem] — component (variants: justify: start|center|end) [docs](https://ads.actioneer.dev/#/navbar)
+- [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)
+- [Sidebar] — Use as the app's left navigation rail — compose it from SidebarHeader/SidebarBrand, SidebarNav (sections of SidebarItems), optional SidebarHistory, and a SidebarFooter with SidebarAccount, with an opt-in collapsed icon-rail mode (⌘B/Ctrl-B) that every sub-part reads automatically. [docs](https://ads.actioneer.dev/#/sidebar)
+- [SidebarAccount] — component [docs](https://ads.actioneer.dev/#/sidebar)
+- [SidebarAction] — component [docs](https://ads.actioneer.dev/#/sidebar)
+- [SidebarBrand] — component [docs](https://ads.actioneer.dev/#/sidebar)
+- [SidebarFooter] — component [docs](https://ads.actioneer.dev/#/sidebar)
+- [SidebarHeader] — component [docs](https://ads.actioneer.dev/#/sidebar)
+- [SidebarHistory] — component [docs](https://ads.actioneer.dev/#/sidebar)
+- [SidebarHistoryItem] — component [docs](https://ads.actioneer.dev/#/sidebar)
+- [SidebarItem] — component [docs](https://ads.actioneer.dev/#/sidebar)
+- [SidebarNav] — component [docs](https://ads.actioneer.dev/#/sidebar)
+- [SidebarSection] — component [docs](https://ads.actioneer.dev/#/sidebar)
+- [SidebarTrigger] — component [docs](https://ads.actioneer.dev/#/sidebar)
+- [BreadcrumbItemProps] — TypeScript type
+- [BreadcrumbsProps] — TypeScript type
+- [NavbarContentProps] — TypeScript type
+- [NavbarItemProps] — TypeScript type
+- [PaginationProps] — TypeScript type
+- [SidebarAccountProps] — TypeScript type
+- [SidebarActionProps] — TypeScript type
+- [SidebarBrandProps] — TypeScript type
+- [SidebarHistoryItemProps] — TypeScript type
+- [SidebarHistoryProps] — TypeScript type
+- [SidebarItemProps] — TypeScript type
+- [SidebarProps] — TypeScript type
+- [SidebarSectionProps] — TypeScript type
+- [useSidebar] — React hook
+- [href] — utility
+
+### Layout
+
+- [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)
+- [CollapsibleContent] — component [docs](https://ads.actioneer.dev/#/collapsible)
+- [CollapsibleTrigger] — component [docs](https://ads.actioneer.dev/#/collapsible)
+- [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)
+- [PanelBody] — component [docs](https://ads.actioneer.dev/#/panel)
+- [PanelFooter] — component [docs](https://ads.actioneer.dev/#/panel)
+- [PanelHeader] — component [docs](https://ads.actioneer.dev/#/panel)
+- [PanelTitle] — component [docs](https://ads.actioneer.dev/#/panel)
+- [PanelToolbar] — component [docs](https://ads.actioneer.dev/#/panel)
+- [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)
+- [SelectionActionBarAction] — component [docs](https://ads.actioneer.dev/#/selection-action-bar)
+- [SelectionActionBarProps] — TypeScript type
+
+### AI Elements
+
+- [ChainOfThought] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
+- [ChainOfThoughtContent] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
+- [ChainOfThoughtHeader] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
+- [ChainOfThoughtImage] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
+- [ChainOfThoughtSearchResult] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
+- [ChainOfThoughtSearchResults] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
+- [ChainOfThoughtStep] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
+- [InlineCitation] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationCard] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationCardBody] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationCardTrigger] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationCarousel] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationCarouselContent] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationCarouselHeader] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationCarouselIndex] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationCarouselItem] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationCarouselNext] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationCarouselPrev] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationQuote] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationSource] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [InlineCitationText] — component [docs](https://ads.actioneer.dev/#/ai/inline-citation)
+- [Message] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageAction] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageActions] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageAttachment] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageAttachments] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageAvatar] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageBranch] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageBranchContent] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageBranchNext] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageBranchPage] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageBranchPrevious] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageBranchSelector] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageContent] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageResponse] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [MessageToolbar] — component [docs](https://ads.actioneer.dev/#/ai/message)
+- [Queue] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueItem] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueItemAction] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueItemActions] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueItemAttachment] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueItemContent] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueItemDescription] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueItemFile] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueItemImage] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueItemIndicator] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueList] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueSection] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueSectionContent] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueSectionLabel] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [QueueSectionTrigger] — component [docs](https://ads.actioneer.dev/#/ai/queue)
+- [Reasoning] — component [docs](https://ads.actioneer.dev/#/ai/reasoning)
+- [ReasoningContent] — component [docs](https://ads.actioneer.dev/#/ai/reasoning)
+- [ReasoningTrigger] — component [docs](https://ads.actioneer.dev/#/ai/reasoning)
+- [Shimmer] — component [docs](https://ads.actioneer.dev/#/ai/shimmer)
+- [SpeechInput] — component [docs](https://ads.actioneer.dev/#/ai/speech-input)
+- [Task] — component [docs](https://ads.actioneer.dev/#/ai/task)
+- [TaskContent] — component [docs](https://ads.actioneer.dev/#/ai/task)
+- [TaskItem] — component [docs](https://ads.actioneer.dev/#/ai/task)
+- [TaskItemFile] — component [docs](https://ads.actioneer.dev/#/ai/task)
+- [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)
+- [TaskProgressDock] — component (variants: isSticky: true|false) [docs](https://ads.actioneer.dev/#/ai/task-progress)
+- [TaskTrigger] — component [docs](https://ads.actioneer.dev/#/ai/task)
+- [ToolContent] — component [docs](https://ads.actioneer.dev/#/ai/tool)
+- [ToolHeader] — component [docs](https://ads.actioneer.dev/#/ai/tool)
+- [ToolInput] — component [docs](https://ads.actioneer.dev/#/ai/tool)
+- [ToolOutput] — component [docs](https://ads.actioneer.dev/#/ai/tool)
+- [Voice] — component [docs](https://ads.actioneer.dev/#/ai/voice)
+- [VOICE_PALETTES] — component [docs](https://ads.actioneer.dev/#/ai/voice)
+- [VOICE_STATES] — component [docs](https://ads.actioneer.dev/#/ai/voice)
+- [VOICE_VARIANTS] — component [docs](https://ads.actioneer.dev/#/ai/voice)
+- [VoiceConnectButton] — component [docs](https://ads.actioneer.dev/#/ai/voice)
+- [VoiceControl] — component [docs](https://ads.actioneer.dev/#/ai/voice)
+- [VoiceDisconnectButton] — component [docs](https://ads.actioneer.dev/#/ai/voice)
+- [VoiceMuteButton] — component [docs](https://ads.actioneer.dev/#/ai/voice)
+- [VoiceStatusDot] — component [docs](https://ads.actioneer.dev/#/ai/voice)
+- [ChainOfThoughtContentProps] — TypeScript type
+- [ChainOfThoughtHeaderProps] — TypeScript type
+- [ChainOfThoughtImageProps] — TypeScript type
+- [ChainOfThoughtProps] — TypeScript type
+- [ChainOfThoughtSearchResultProps] — TypeScript type
+- [ChainOfThoughtSearchResultsProps] — TypeScript type
+- [ChainOfThoughtStepProps] — TypeScript type
+- [InlineCitationCardBodyProps] — TypeScript type
+- [InlineCitationCardProps] — TypeScript type
+- [InlineCitationCardTriggerProps] — TypeScript type
+- [InlineCitationCarouselContentProps] — TypeScript type
+- [InlineCitationCarouselHeaderProps] — TypeScript type
+- [InlineCitationCarouselIndexProps] — TypeScript type
+- [InlineCitationCarouselItemProps] — TypeScript type
+- [InlineCitationCarouselNextProps] — TypeScript type
+- [InlineCitationCarouselPrevProps] — TypeScript type
+- [InlineCitationCarouselProps] — TypeScript type
+- [InlineCitationProps] — TypeScript type
+- [InlineCitationQuoteProps] — TypeScript type
+- [InlineCitationSourceProps] — TypeScript type
+- [InlineCitationTextProps] — TypeScript type
+- [MessageActionProps] — TypeScript type
+- [MessageActionsProps] — TypeScript type
+- [MessageAttachmentProps] — TypeScript type
+- [MessageAttachmentsProps] — TypeScript type
+- [MessageAvatarProps] — TypeScript type
+- [MessageBranchContentProps] — TypeScript type
+- [MessageBranchNextProps] — TypeScript type
+- [MessageBranchPageProps] — TypeScript type
+- [MessageBranchPreviousProps] — TypeScript type
+- [MessageBranchProps] — TypeScript type
+- [MessageBranchSelectorProps] — TypeScript type
+- [MessageContentProps] — TypeScript type
+- [MessageFilePart] — TypeScript type
+- [MessageProps] — TypeScript type
+- [MessageResponseProps] — TypeScript type
+- [MessageRole] — TypeScript type
+- [MessageToolbarProps] — TypeScript type
+- [QueueItemActionProps] — TypeScript type
+- [QueueItemActionsProps] — TypeScript type
+- [QueueItemAttachmentProps] — TypeScript type
+- [QueueItemContentProps] — TypeScript type
+- [QueueItemDescriptionProps] — TypeScript type
+- [QueueItemFileProps] — TypeScript type
+- [QueueItemImageProps] — TypeScript type
+- [QueueItemIndicatorProps] — TypeScript type
+- [QueueItemProps] — TypeScript type
+- [QueueListProps] — TypeScript type
+- [QueueMessage] — TypeScript type
+- [QueueMessagePart] — TypeScript type
+- [QueueProps] — TypeScript type
+- [QueueSectionContentProps] — TypeScript type
+- [QueueSectionLabelProps] — TypeScript type
+- [QueueSectionProps] — TypeScript type
+- [QueueSectionTriggerProps] — TypeScript type
+- [QueueTodo] — TypeScript type
+- [ReasoningContentProps] — TypeScript type
+- [ReasoningProps] — TypeScript type
+- [ReasoningTriggerProps] — TypeScript type
+- [SpeechInputProps] — TypeScript type
+- [TaskContentProps] — TypeScript type
+- [TaskItemFileProps] — TypeScript type
+- [TaskItemProps] — TypeScript type
+- [TaskProgressDockProps] — TypeScript type
+- [TaskProgressProps] — TypeScript type
+- [TaskProgressStatus] — TypeScript type
+- [TaskProgressStep] — TypeScript type
+- [TaskProps] — TypeScript type
+- [TaskTriggerProps] — TypeScript type
+- [TextShimmerProps] — TypeScript type
+- [ToolContentProps] — TypeScript type
+- [ToolHeaderProps] — TypeScript type
+- [ToolInputProps] — TypeScript type
+- [ToolOutputProps] — TypeScript type
+- [ToolProps] — TypeScript type
+- [ToolState] — TypeScript type
+- [VoiceConnectButtonProps] — TypeScript type
+- [VoiceControlProps] — TypeScript type
+- [VoiceDisconnectButtonProps] — TypeScript type
+- [VoiceMuteButtonProps] — TypeScript type
+- [VoiceOrbPalette] — TypeScript type
+- [VoicePalette] — TypeScript type
+- [VoiceProps] — TypeScript type
+- [VoiceState] — TypeScript type
+- [VoiceStatusDotProps] — TypeScript type
+- [VoiceVariant] — TypeScript type
+- [useReasoning] — React hook
+- [className] — utility
+- [defaultOpen] — utility
+- [safeVariant] — utility
+- [Tool] — utility