Skip to main content
The design-system components — inputs, layout, tables, pickers, and disclosure primitives.

AgentsIcon

Agents: a bot — antenna, panel head with eyes and mouth, side ports. Related: IconComponent

AlertTriangleIcon

Warning. Related: IconComponent

ArrowDownIcon

Move the item one place later in an ordered list. Related: IconComponent

ArrowLeftIcon

Back / previous. Related: IconComponent

ArrowUpIcon

Move the item one place earlier in an ordered list. Related: IconComponent

BADGES_NOTE

The shared informational note every badge surface carries: declared, never enforced.

Badge

Props Related: BadgeProps

BadgeProps

Properties

Button

Parameters Related: LinkButtonProps

ButtonProps

The ACTION form of Button: button attributes, no anchor ones. This stays an INTERFACE extending ButtonHTMLAttributes<HTMLButtonElement> because it is published plugin API: a plugin may write interface MyButton extends ButtonProps {} (a union cannot be extended — TS2312) and may hand a ButtonProps value to a slot typed as plain ButtonHTMLAttributes<HTMLButtonElement> (a union including anchor attributes is not assignable — TS2322). The link form is the ADDITIVE LinkButtonProps, and Button accepts either. It declares NO href member. href?: undefined here would make interface MyButton extends ButtonProps { href: string } a TS2430 (“incorrectly extends”), which is a narrowing of a surface that is additive only. The discriminant Button narrows on lives on ButtonActionProps. Properties Related: ButtonVariant

ButtonVariant

Card

Props Related: CardProps

CardProps

Properties

CheckCircleIcon

Success. Related: IconComponent

CheckIcon

A bare tick, for selection and confirmation. Related: IconComponent

Checkbox

Props Related: CheckboxProps

CheckboxProps

Properties

ChevronDownIcon

Expand / collapse affordance. Related: IconComponent

ChevronRightIcon

Disclosure / breadcrumb separator. Related: IconComponent

CloseIcon

Dismiss. Related: IconComponent

CodeBlock

Props Related: CodeBlockProps

CodeBlockProps

Properties

CompletionInput

A completion-backed text input. Suggestions refresh on every edit (a per-request sequence guard drops a stale response) and render as an ARIA listbox; selecting an option fills the field and clears the list. Props Related: CompletionInputProps

CompletionInputProps

Properties

ConfirmDialog

Props Related: ConfirmDialogProps

ConfirmDialogProps

Properties

ConnectorsIcon

Connectors: a two-pin power plug on its lead. Related: IconComponent

ConversationsIcon

Conversations: one speech bubble holding transcript lines. Related: IconComponent

CopyField

Props Related: CopyFieldProps

CopyFieldProps

Properties

CopyIcon

Copy to clipboard: a sheet duplicated behind another. Related: IconComponent

DEFAULT_DATE_RANGE_PRESETS

The presets a picker offers when the caller names none. Related: DateRangePreset

DashboardIcon

Observability: a dial gauge — arc, base and needle. Related: IconComponent

DatabaseIcon

States: a stacked-disk cylinder — one document store per subject. Related: IconComponent

DateRangePicker

The range control: a row of preset chips over the two datetime-local inputs and an Apply action, with the active window echoed as text below. Controlled: the caller owns value and receives the next window through onValueChange — a preset click emits its token immediately, while the custom inputs hold a working draft until Apply commits the normalized absolute range. The drafts track the controlled value, re-seeded on a NEW absolute value (keyed on from/to), so edits against an unchanged value are preserved but a genuinely different value replaces an in-progress draft. Props Related: DateRangePickerProps

DateRangePickerProps

Properties Related: DateRangePreset, DateRangeValue

DateRangePreset

A relative preset: a \d+[hdw] token the backend resolves, plus its chip label. Properties

DateRangeValue

A named time window: either a relative token the backend resolves against its own clock, or an absolute pair of ISO instants.

Dialog

Props Related: DialogProps

DialogProps

Properties

DirtyGuardBoundary

Boundary that guards navigation away from a region holding a dirty editor. Editors inside it arm the guard through useRegisterDirty; while any is dirty a route navigation (a route-token/plugin navigate, an AppLink, or a browser back/forward) confirms through the shared discard dialog, and a full-page unload raises the native prompt. Use this directly to guard a dirty editor that is a plain page section (no tabs); GuardedTabs wraps this same boundary to additionally guard tab switches. Parameters

Drawer

Props Related: DrawerProps

DrawerProps

Properties

EditIcon

Edit: a pencil laid across the surface it writes on. Related: IconComponent

EmptyState

Props Related: EmptyStateProps

EmptyStateProps

Properties

EntityCardGrid

Props Related: EntityCardGridProps

EntityCardGridProps

Properties

ErrorBoundary

ErrorBoundaryProps

Properties

ErrorState

Props Related: ErrorStateProps

ErrorStateProps

Properties

ExplorerColumn

One header cell of the table view. renderRow must emit exactly this many <TD>s per item; folder rows span all of them. Properties

ExplorerEmptyState

Properties

ExplorerEmptyStates

The folder-aware empty-state ladder — every label caller-supplied. Properties Related: ExplorerEmptyState

ExplorerSearch

Controlled free-text search. matches owns the item shape and casing; it is called only with a non-empty, already-trimmed query. Properties

ExplorerTags

Enables the tag vocabulary, filter chips, and OR filter. Fully controlled. Properties

ExplorerView

Props Related: ExplorerViewProps

ExplorerViewProps

Properties Related: ExplorerColumn, ExplorerEmptyStates, ExplorerSearch, ExplorerTags, Folder

ExtensionComboBuilder

Props Related: ExtensionComboBuilderProps

ExtensionComboBuilderProps

Properties

ExtensionFamily

One base tool and every extension entry that branches from it. Properties

ExtensionKindGroup

One extension kind and every catalog entry of that kind. Properties

ExtensionPicker

Props Related: ExtensionPickerProps

ExtensionPickerProps

Properties

ExtensionsIcon

Extensions: a jigsaw piece — knob above, socket to the right. Related: IconComponent

ExternalLinkButton

Props Related: ExternalLinkButtonProps

ExternalLinkButtonProps

Properties

ExternalLinkIcon

Opens in a new tab / leaves the app. Related: IconComponent

EyeIcon

Reveal a masked value. Related: IconComponent

EyeOffIcon

Mask a revealed value. Related: IconComponent

Field

Props Related: FieldProps

FieldControlProps

The a11y wiring a form control spreads onto its element. Properties

FieldProps

Properties

FilterIcon

A funnel. Related: IconComponent

FleetReport

Props Related: FleetReportProps

FleetReportProps

Render a fleet broadcast’s failure state. Returns null for a converged/absent report (nothing to warn about) so callers can always mount it unconditionally beside their own success line. Properties

Folder

A folder in the tree, in the SDK’s camelCase UI shape (parentId, null = root). Properties

FolderBreadcrumb

The root → … → current path; each crumb navigates to that level. Props Related: FolderBreadcrumbProps

FolderBreadcrumbProps

Properties Related: Folder

FolderIcon

Folder: a tabbed folder, for the tool-organization tree and breadcrumbs. Related: IconComponent

FolderPicker

A folder chooser with inline new-folder creation, for the edit / move dialogs. Props Related: FolderPickerProps

FolderPickerProps

Properties Related: Folder

FolderRow

One subfolder in the current-directory explorer; opening it navigates inward. Props Related: FolderRowProps

FolderRowProps

Properties Related: Folder

FormDialog

Props Related: FormDialogProps

FormDialogProps

Properties

GridIcon

Grid: a 2x2 tile array — the card-view half of the list/card toggle. Related: IconComponent

GuardedTabs

A drop-in replacement for Tabs that guards a switch away from a dirty editor. Wraps the tabs in a DirtyGuardBoundary, so an editor rendered in any panel can arm the guard through useRegisterDirty. Parameters Related: TabItem

HeadingLevel

The heading levels ATX syntax can express, # through ######.

HooksIcon

Hooks: a webhook fan-out — one source branching to two subscribers. Related: IconComponent

IconComponent

The shape every exported icon satisfies. Related: IconProps

IconProps

Props of every icon: the full SVG surface, so style, events and ARIA pass through. className is APPENDED to the tai-icon sizing class rather than replacing it — the same merge every other design-system primitive does.

InteractionsIcon

Interactions: two overlapping speech bubbles — a conversation. Related: IconComponent

JsonDiff

Props Related: JsonDiffProps

JsonDiffProps

Properties

JsonDiffRow

One leaf difference between the two JSON values. Properties

JsonTree

Props Related: JsonTreeProps

JsonTreeProps

Properties

LinkButtonProps

The LINK form of Button: an href, so it carries anchor attributes and no button ones. target and rel are inherited from AnchorHTMLAttributes and are settable, but on the EXTERNAL branch they are not the caller’s to choose: an absolute http(s) URL always renders target="_blank" with rel="noopener noreferrer external", whatever the caller passed. On the in-app branch target is the caller’s and rel is pinned only when they ask for _blank. It declares NO ref, and that is a REFUSAL rather than an omission: a blocked href renders a NeutralizedLink span and no anchor at all, so a Ref<HTMLAnchorElement> would be filled on two of the three renderings and left null on the third — a ref that silently does nothing for exactly the input the check exists to catch. A caller that needs the element wraps the button. Properties Related: ButtonVariant

ManifestIcon

Manifest: a document with a folded corner and its entries. Related: IconComponent

Markdown

Props Related: MarkdownProps

MarkdownBlock

A parsed block. Inline markup inside text is resolved at render time. Related: HeadingLevel

MarkdownProps

Properties

MarketplaceIcon

Marketplace: a shopping bag. Related: IconComponent
The three-bar menu / drawer toggle. Related: IconComponent

MinusIcon

A bare dash, for a partial selection — the tick’s mixed-state counterpart. Related: IconComponent

MonitorIcon

Follow the operating system. Related: IconComponent

MoonIcon

Dark theme. Related: IconComponent
The canonical mark for every navigable route token. login is excluded: it is not a destination the navigation surfaces list. Keyed by the token type, so adding a route to RouteToken fails the build here until it gets a mark. Related: IconComponent, RouteToken

NON_STACKABLE_KIND

The single non-stackable extension kind: at most one backend extension may appear in a combo (the backend kind is declared non-stackable, multiple=False). The ExtensionPicker enforces single-select for this kind.

NotificationsIcon

Notifications: a bell with its clapper. Related: IconComponent

NumberInput

Parameters Related: NumberInputProps

NumberInputProps

NumericColumnProps

Right-align a column of digits on tabular figures. Properties

OpenTargetOptions

Properties

OpenTargetProps

The React attributes openTargetProps yields — spread onto the entry element (<TR>, card <div>). Every field is optional so the disabled case is the empty object. Properties

OverflowRegionAttributes

The attribute set a scrolling box wears; every value is absent while it fits. Properties

OverlayDetails

The two overlay fields this control edits. Properties

OverlayDetailsFields

Props Related: OverlayDetailsFieldsProps

OverlayDetailsFieldsProps

Properties Related: OverlayDetails

Page

The screen wrapper: the max-width, the gutters, and the vertical rhythm. Props Related: PageLayoutProps

PageFillProvider

Wraps the shell’s routed region: holds the count of pages asking for fill mode and publishes both the registrar (for useFillViewport) and the active flag (for usePageFillActive). Renders no DOM of its own. Parameters
Props Related: PageHeaderProps

PageHeaderProps

Properties

PageLayoutProps

Properties

PendingIcon

Pending / running / queued — a clock hand inside a dashed ring. The dash period has to TILE the circumference or the ring closes on a seam. At r = 9 the circumference is 2π·9 = 56.5487. A 3.2/3.2 array (period 6.4) fits 8.84 times, so the ring shut with a 2.15 gap instead of 3.2 — and with the inherited round linecap eating 1.6 at each end that seam rendered ~0.37 px wide at 16 px, reading as joined while every other gap read as a gap. Eight whole periods divide it exactly: 56.5487 / 8 = 7.0686, halved for the dash and the gap = 3.5343 each, giving 16 even segments and no seam. Related: IconComponent

PluginIcon

Plugin: a puzzle piece — the host’s provenance mark for plugin-contributed nav. Related: IconComponent

PlusIcon

Add / insert: the dash crossed by an upright, for an append or attach affordance. Related: IconComponent

PresetsIcon

Presets: three sliders, each with its knob at a different stop. Related: IconComponent

ProgressBar

Render a progress bar. With a positive total, value/total fills the track and the percentage is announced via aria-valuenow; without one, the bar is indeterminate (no aria-valuenow, per ARIA). Props Related: ProgressBarProps

ProgressBarProps

Properties

ProseScrollLabels

The fallback name per instrumented surface, when no heading precedes it. Properties

RadioGroup

Props Related: RadioGroupProps

RadioGroupProps

Properties Related: RadioOption

RadioOption

Properties

RevealInput

Props Related: RevealInputProps

RevealInputProps

Properties

SchedulingIcon

Scheduling: a calendar grid with its binding posts. Related: IconComponent

ScrollRegion

Props Related: ScrollRegionProps

ScrollRegionProps

Properties

SearchIcon

A magnifier. Related: IconComponent

Select

Parameters

SelectGroup

A labelled cluster of options (e.g. tools grouped by tag). Properties Related: SelectOption

SelectGroupsProps

The GROUPED listbox: labelled clusters, each carrying its own options. Properties Related: SelectGroup

SelectOption

Properties

SelectProps

The FLAT listbox: one ungrouped run of options. Properties Related: SelectOption

ServedEndpointsIcon

Served endpoints: a broadcast node radiating to the tools it serves. Related: IconComponent

SettingsIcon

Settings: an eight-tooth cog around its bore. Related: IconComponent

SignOutIcon

Sign out: a door with an outbound arrow. Related: IconComponent

Skeleton

Props Related: SkeletonProps

SkeletonProps

Properties

SortAscIcon

Ascending sort: an up arrow beside narrow-to-wide rows. Related: IconComponent

SortDescIcon

Descending sort: a down arrow beside wide-to-narrow rows. Related: IconComponent

Spinner

Props Related: SpinnerProps

SpinnerProps

Properties

Stack

A vertical flex column on the spacing scale. Props Related: StackProps

StackProps

Properties

StorageIcon

Storage: a database cylinder with two shelves. Related: IconComponent

SunIcon

Light theme. Related: IconComponent

SystemIcon

System: a processor die with its pins. Related: IconComponent

TBody

Props Related: TableSectionProps

TD

Props Related: TDProps

TDProps

Right-align a column of digits on tabular figures. Properties Related: NumericColumnProps

TH

Props Related: THProps

THProps

A header cell. scope defaults to col because that is what a <th> in the header row IS, and without it nothing associates the cell with the column below it: a screen reader announcing a data cell has no header to name it. A row header — the leading cell of a body row — passes scope="row". Properties Related: NumericColumnProps

THead

Props Related: TableSectionProps

TOKEN_NAMES

The documented CSS-variable token names — the Studio-plugin styling API. A snapshot test pins this list so the contract can’t drift silently. The SDK compatibility version bumps if any of these are renamed/removed; the list grows additively. The --tai-dark-* half of each themed pair is deliberately NOT here. Those names are the theming mechanism’s own storage — the two blocks in tokens.css that apply the dark theme are the only readers, and the scanner test holds them to that. A plugin styles against the name WITHOUT the dark segment and gets whichever half the viewer’s theme resolves to.

TR

Props Related: TableRowProps

TabItem

Properties

Table

Props Related: TableProps

TableProps

Properties

TableRowProps

Properties

TableSectionProps

<thead> and <tbody> take the same surface: the native one. Properties

Tabs

Props Related: TabsProps

TabsProps

Properties Related: TabItem

TagChips

Read-only chips for a list of tags. Renders nothing when there are none. Props Related: TagChipsProps

TagChipsProps

Properties

TagVocabularyEntry

Properties

TagsInput

Controlled tag editor. The caller owns the value list; onChange receives the next list on every add/remove. A blank or duplicate entry is ignored (never a silent duplicate chip). Enter or comma commits the draft chip. The draft input is a NATIVE-ATTRIBUTE PASS-THROUGH (the family inputs.tsx documents): inside a Field it renders the SDK’s TextInput, which spreads useFieldControl() and so claims the Field’s control id, taking the Field’s visible label as its name; mounted OUTSIDE a Field it is named by a caller aria-label, which the editor forwards to that same input. Without one a bare editor is unnamed — the published component owns the naming route rather than assuming a Field is always present. When a Field DOES name it, a caller aria-label still has to CONTAIN that visible label (WCAG 2.5.3, Label in Name); components/field-group.test.ts enforces that at every call site. Props Related: TagsInputProps

TagsInputProps

Properties

TemplatedTextField

Props Related: TemplatedTextFieldProps

TemplatedTextFieldProps

Properties Related: TemplatedTextInlineProps, TemplatedTextTemplateOption

TemplatedTextInlineProps

The props renderInline receives to draw the inline-content editor. Properties

TemplatedTextTemplateOption

One stored template the id picker offers. Properties

TemplatesIcon

Templates: a stack of two sheets, the front one offset. Related: IconComponent

TextInput

Parameters Related: TextInputProps

TextInputProps

Textarea

Parameters Related: TextareaProps

TextareaProps

TokenName

Related: TOKEN_NAMES

ToolPicker

Props Related: ToolPickerProps

ToolPickerProps

Properties

ToolsIcon

Tools: an open-ended spanner over its handle. Related: IconComponent

Tooltip

Props Related: TooltipProps

TooltipProps

Properties

UNTAGGED_TOKEN

Reserved filter token for items carrying NO tag; namespaced so it never collides with a real tag.

UnplugIcon

Detach / unmount: a plug pulled from its socket, the two prongs above the gap. Related: IconComponent

VersionHistoryEntry

One version row — the kind-agnostic shape every consumer projects into. Properties

VersionHistoryPanel

Props Related: VersionHistoryPanelProps

VersionHistoryPanelProps

Properties Related: VersionHistoryEntry

ViewMode

The two entity-screen layouts.

ViewToggle

The icon-only segmented switch. Controlled: pair it with useViewMode. Props Related: ViewToggleProps

ViewToggleProps

Properties Related: ViewMode

XCircleIcon

Failure. Related: IconComponent

baseNameOf

The base tool name a variant belongs to: the substring before the first underscore, or the whole name when it has none. tool, tool_a, tool_a_b all resolve to tool; x_chain and x_batch both resolve to x. Parameters

buildTagVocabulary

The tag vocabulary over items, name-sorted, plus an untagged pseudo-tag (labelled untaggedLabel) when any item is untagged; a selected token whose items vanished still appears (count 0) so it can be cleared. Parameters Related: TagVocabularyEntry

childFolders

The subfolders directly under parentId (null = the root directory), name-sorted. Parameters Related: Folder

diffJson

The pure structural diff — every leaf difference between before and after. Parameters Related: JsonDiffRow

folderPathTo

The ordered ancestor path from the root down to (and including) folderId, for a breadcrumb. null is the root (an empty path). The walk is bounded by the folder count, so a cyclic or dangling chain truncates instead of looping. Parameters Related: Folder

formatRangeLabel

Parameters Related: DateRangePreset, DateRangeValue

groupByKind

Group a flat extension list by kind, for the picker. Groups are ordered by kind and each group’s members by name, so the render order is stable regardless of the server’s list order. The backend group is flagged non-stackable. Parameters Related: ExtensionKindGroup

groupIntoFamilies

Group a flat extension list into families keyed by base tool name. Families are ordered by base name and each family’s members by full name, so the render order is stable regardless of the server’s list order. Parameters Related: ExtensionFamily

isSafeHttpUrl

True only for an absolute http:///https:// URL. Everything else is unsafe. Parameters

kindVariant

Map a serialized extension kind to a Badge variant. Known skeleton kinds get a themed color; any unrecognized kind falls back to the neutral variant (the Badge itself also neutral-fallbacks, but choosing here keeps the mapping explicit and testable). Parameters

matchesSelectedTags

OR semantics: an empty selection matches everything; otherwise an item matches when it carries any selected tag, or is untagged and UNTAGGED_TOKEN is selected. Parameters

normalizeCustomRange

A raw from/to pair resolved to a clean absolute range. Order matters: SWAP the reversed pair first (earlier instant becomes start), THEN cap both ends at now — capping first can leave a future instant on the post-swap end. The end is INCLUSIVE of its minute, extended to :59.999, so 23:59 reaches the day’s end. Parameters

openTargetProps

Build the whole-target open props for one entry. See the module doc for the contract; pass onOpen: undefined to get an inert entry (empty props). Props Related: OpenTargetOptions, OpenTargetProps

overlayDetailsPatch

The merge-patch a display-name + tags write sends: ONLY these two fields. Props Related: OverlayDetails

parseMarkdown

Folds markdown source into an ordered list of blocks. Pure and total: any string parses, and text that matches no block construct becomes a paragraph rather than being discarded. Parameters Related: MarkdownBlock

safeHttpUrl

The absolute http(s) URL href denotes, or undefined when it denotes none. The // is required rather than inferred from a successful new URL(), because for a scheme that matches the document’s own, the authority-less spelling is a PATH: an anchor with href="https:/settings" on an https page navigates to /settings on the CURRENT origin, while new URL() with no base reads the same string as the host settings. Only the // form means the same thing to both. An absolute http(s) URL carrying user:pass@ userinfo is rejected too: .href re-serialization preserves the userinfo (unlike host tricks), so https://trusted.com@evil.com would render as trusted.com yet navigate to evil.com. Callers render the returned string rather than their input, so the URL that was judged is always the URL that is navigated. Parameters

templatedTextSummary

A short one-line rendering of a templated-text value, for read-only summaries. Parameters

useFieldControl

Read the enclosing Field’s wiring. id and aria-describedby are undefined both when there is no Field AND inside a group Field: a group has no single element to carry them, and the group container itself already carries the name and the description. Only aria-invalid still crosses that boundary, because role="group" does not support it (ARIA 1.2), so the control is the sole place an errored group can expose its invalid state. Related: FieldControlProps

useFillViewport

Opt the current page into full-height fill mode for as long as it is mounted. The shell fills <main> to the viewport and lets the page’s own root flex or height: 100% down the chain. Must be called under a PageFillProvider (the shell mounts one); outside it there is no wrapper to modify, so it throws rather than silently do nothing.

useOverflowRegion

The conditional region attributes for a scrolling box, alongside the ref that names it. The ref must go on the scrolling box ITSELF — a <pre>, a JSON pane, or the div ScrollRegion renders. Use the hook when wrapping the content in a ScrollRegion would give the surface a second scroller. The box is measured as it is attached, whenever it or any child resizes, and whenever its content changes — replaced, appended, or edited in place. A replaced child is a NEW element, so the registration is re-pointed at the current children before each measurement, adding and dropping only the ones that actually changed; both sides of that are registrations on the shared observers, not observers of this mount’s own. The only DOM change a measurement can cause is the region ATTRIBUTES this hook returns, and attributes are deliberately left unobserved — that, not an absence of mutation, is what stops the pair from re-triggering each other. Parameters Related: OverflowRegionAttributes

usePageFillActive

Whether any mounted page currently asks for fill mode — the shell’s cue to add the fill modifiers to <main> and the page wrapper.

useProseScrollRegions

Instruments the scrollable surfaces under the element the returned ref is attached to — every <table> and every <pre> — as scroll regions. React cannot wrap markup it did not create, so this walks the DOM instead. A table is moved into a div.tai-scroll-region (once — the pass is idempotent) because the table itself is not the scrolling box; a <pre> already IS its own scrolling box, so it is instrumented in place. Either way the scrolling element carries the same conditional tabindex/role/aria-label as ScrollRegion. The name is the nearest heading preceding the surface — read for all of them in one document-order pass — so a reader landing on the region hears which section it belongs to; labels covers a surface with no heading above it, and a name shared by several surfaces is numbered so no two regions answer to the same one. The pass runs from the ref callback rather than an effect, which puts it in the commit phase, BEFORE the browser paints: .tai-prose table is width: 100% with no overflow of its own — the scroller exists only on the wrapper this builds — so a pass that ran after paint would show one frame at 320/360 px with the table overflowing the document, then jolt sideways. A passive-effect probe measured exactly that: at first paint wrappers=0 and the table’s parent was .tai-prose. Injected HTML is replaced wholesale when its source changes, so the pass is re-run from a MutationObserver on the subtree rather than on attachment alone. Props Related: ProseScrollLabels

useRegisterDirty

Report an editor’s dirty state to the enclosing DirtyGuardBoundary (which GuardedTabs also provides). A no-op outside a boundary (an editor rendered standalone, e.g. in isolation tests) so the hook is always safe to call. Parameters

useViewMode

The persisted view mode for one surface (a stable key like 'tools'). Returns the stored choice or fallback when none is set, and a setter that writes through to localStorage. Storage failures degrade to in-memory only — never a thrown boot, matching the theme preference’s defensive reads/writes. Parameters Related: ViewMode