@aginies/ui 0.0.0-stage → 0.2.0

package/dist/index.d.cts

@@ -0,0 +1,3003 @@
+// generated by sync-from-ds; edit the design system, not this file
+import * as React from 'react';
+// React 19 types dropped the global JSX namespace; the declarations below name JSX.Element.
+import JSX = React.JSX;
+
+// --- core ---
+/** A Lucide glyph by name, inline, inheriting currentColor. Stroke 2 at ≤16px, 1.75 above. */
+export interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'color' | 'name' | 'size' | 'title'> {
+  /** Lucide name in kebab-case (circle-check, triangle-alert, loader-circle, sparkles) */
+  name: string;
+  /** 16 in controls, 20 in headers, 24 in tiles */
+  size?: number;
+  /** Accessible name; without it the icon is aria-hidden */
+  title?: string;
+  strokeWidth?: number;
+  color?: string;
+}
+export declare function Icon(props: IconProps): JSX.Element;
+/** One of the seven product-family glyphs from aginies.com. */
+export interface ProductIconProps extends Omit<React.HTMLAttributes<HTMLElement>, 'size' | 'title'> {
+  product: 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+  /** 24 default; 16–20 beside a name in navigation */
+  size?: number;
+  /** The 40px soft-ground tile with the glyph in link colour */
+  boxed?: boolean;
+  title?: string;
+}
+export declare function ProductIcon(props: ProductIconProps): JSX.Element;
+export declare const PRODUCT_NAMES: Record<ProductIconProps['product'], string>;
+/** The Aginies mark as inline SVG — the one place the brand gradients appear. */
+export interface AginiesMarkProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'size' | 'title'> {
+  /** 22–44px on screen, 96 in the page loader */
+  size?: number;
+  /** Accessible name (default "Aginies") */
+  title?: string;
+  /** Hide from assistive technology when a wordmark sits beside it */
+  decorative?: boolean;
+}
+export declare function AginiesMark(props: AginiesMarkProps): JSX.Element;
+/** Mark + wordmark lockup in Bricolage Grotesque 600; optional product name. */
+export interface AginiesLogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'size'> {
+  size?: number;
+  wordmark?: boolean;
+  /** "Code", "Dialog": appended in regular weight */
+  product?: string;
+}
+export declare function AginiesLogo(props: AginiesLogoProps): JSX.Element;
+export declare function cx(...classes: Array<string | false | null | undefined>): string;
+/** The mono uppercase eyebrow that names the group a page or section belongs to ("OBSERVE · LOGS"). Sits above a title; link-coloured, or mute when quiet. */
+export interface EyebrowProps extends React.HTMLAttributes<HTMLElement> {
+  /** Mute instead of link colour: inside cards and lists, where it must not compete with the page eyebrow */
+  quiet?: boolean;
+  /** Tag to render (div default; span inline, h2/h3 when it is the real heading) */
+  as?: any;
+}
+export declare function Eyebrow(props: EyebrowProps): JSX.Element;
+/** Keyboard hint (⌘K, Esc) rendered as mono glyphs on panel-2 chips. Use beside a menu item, in the command palette footer, in tooltips. */
+export interface KbdProps extends Omit<React.HTMLAttributes<HTMLElement>, 'size'> {
+  /** One chip per key: ['⌘', 'K']; omit to render children as a single chip */
+  keys?: string[];
+  /** sm 18px chips inside menu items and footers; md 20px */
+  size?: 'sm' | 'md';
+}
+export declare function Kbd(props: KbdProps): JSX.Element;
+/** Typography helper: renders one of the type styles in tokens.json (family, size, line-height, weight, tracking) as a class. Use it instead of ad-hoc font CSS. */
+export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+  /** Display and headings (Bricolage), text (Instrument Sans), mono (JetBrains Mono) */
+  variant?: 'display' | 'h1' | 'h2' | 'h3' | 'title' | 'h4' | 'heading' | 'stat' | 'lede' | 'body' | 'body-2' | 'small' | 'ui' | 'ui-sm' | 'ui-xs' | 'eyebrow' | 'label' | 'tag' | 'code' | 'code-sm';
+  /** Tag override; each variant has a sensible default (h1 for display/h1/title, p for text, code for code) */
+  as?: any;
+  /** Colour; status tones are legible on the grounds and must come with a word or icon */
+  tone?: 'text' | 'text-2' | 'mute' | 'link' | 'ok' | 'warn' | 'bad';
+  /** tabular-nums for numbers in tables and stats */
+  tabular?: boolean;
+  /** Single line with ellipsis */
+  truncate?: boolean;
+}
+export declare function Text(props: TextProps): JSX.Element;
+
+// --- actions ---
+/** Action trigger. One primary (signal) button per view; neutral for the rest; ghost inside toolbars and cards. */
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'icon' | 'selected' | 'size'> {
+  variant?: 'primary' | 'ink' | 'neutral' | 'outline' | 'ghost' | 'destructive' | 'destructive-text' | 'success' | 'link';
+  /** xs 26 · sm 28 · md 32 · lg 40 (comfortable density scales md to 40) */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /** Lucide name, leading */
+  icon?: string;
+  /** Lucide name, trailing (slides 3px on hover) */
+  iconRight?: string;
+  /** Full width: mobile sheets and login only */
+  stretch?: boolean;
+  /** Pressed state of a stateful toggle (aria-pressed) */
+  selected?: boolean;
+  /** Keeps the width, shows a spinner, sets aria-busy and disables */
+  loading?: boolean;
+  /** Render as another tag, e.g. "a" */
+  as?: any;
+}
+export declare function Button(props: ButtonProps): JSX.Element;
+/** Icon-only button; label is required (accessible name + tooltip). */
+export interface ButtonIconProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'icon' | 'label' | 'size'> {
+  icon: string;
+  label: string;
+  variant?: ButtonProps['variant'];
+  size?: ButtonProps['size'];
+  /** Red dot for unread state */
+  notification?: boolean;
+}
+export declare function ButtonIcon(props: ButtonIconProps): JSX.Element;
+/** Groups related buttons; joined removes inner radii, list keeps the control gap. */
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  joined?: boolean;
+}
+export declare function ButtonGroup(props: ButtonGroupProps): JSX.Element;
+/** Toggle button with three labels: off, on, and on-hover (Follow · Following · Unfollow). Use for follow, subscribe, watch and pin actions where "undo" must be visible before the click. */
+export interface ButtonStatefulProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'selected' | 'size'> {
+  /** Pressed state (aria-pressed) */
+  selected?: boolean;
+  onChange?: (selected: boolean) => void;
+  /** off "Follow" · on "Following" · hover "Unfollow"; all three are laid out so the width never jumps */
+  labels?: { off?: string; on?: string; hover?: string };
+  /** Lucide names per state (plus · check · x) */
+  icons?: { off?: string; on?: string; hover?: string };
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /** neutral default; ghost inside toolbars */
+  variant?: 'neutral' | 'ghost' | 'outline';
+}
+export declare function ButtonStateful(props: ButtonStatefulProps): JSX.Element;
+export interface MenuItem {
+  label?: React.ReactNode;
+  /** Identity for selected and keys */
+  value?: string;
+  /** Lucide name, leading, mute */
+  icon?: string;
+  /** Second line in mute */
+  meta?: string;
+  /** Keyboard hint rendered as Kbd */
+  shortcut?: string;
+  disabled?: boolean;
+  /** Red item for destructive actions (Delete agent) */
+  danger?: boolean;
+  /** Checked item in a single-select menu */
+  selected?: boolean;
+  /** Shows a trailing chevron */
+  submenu?: boolean;
+  /** separator and header rows; 'separator' as a bare string also works */
+  type?: 'item' | 'separator' | 'header';
+  onClick?: (item: MenuItem) => void;
+}
+/** Dropdown menu anchored to a trigger (Button or ButtonIcon): actions, overflow and single-select lists. searchable adds a filter field (the dynamic menu) and footer a closing action. */
+export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'open' | 'selected' | 'width'> {
+  items: (MenuItem | 'separator')[];
+  /** The element that opens it; receives aria-haspopup/expanded and the click */
+  trigger?: React.ReactElement;
+  /** Controlled open state */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Which edge of the trigger the menu aligns to */
+  align?: 'left' | 'right';
+  onSelect?: (item: MenuItem) => void;
+  /** Filter field at the top; type-ahead is off while it is on */
+  searchable?: boolean;
+  /** Value of the checked item (single-select menu, menuitemradio) */
+  selected?: string;
+  header?: React.ReactNode;
+  /** Bottom slot above a divider: "Manage tenants…" */
+  footer?: React.ReactNode;
+  /** Render inline without trigger or positioning */
+  static?: boolean;
+  /** Fixed width (default min 200, max 320) */
+  width?: number | string;
+  labels?: { search?: string; empty?: string };
+}
+export declare function Menu(props: MenuProps): JSX.Element;
+/** Removable token for selections, filters and recipients, with a leading avatar or icon. */
+export interface PillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'icon' | 'label' | 'size'> {
+  label: React.ReactNode;
+  icon?: string;
+  /** Image URL, or 1–2 initials rendered on a signal-soft circle */
+  avatar?: string;
+  /** Shows the × button */
+  onRemove?: () => void;
+  /** Makes the label a link */
+  href?: string;
+  /** Unresolved or rejected entry: bad border and circle-alert icon */
+  invalid?: boolean;
+  /** CSS max-width that truncates the label */
+  truncate?: string | number;
+  size?: 'sm' | 'md';
+  labels?: { remove?: string };
+}
+export declare function Pill(props: PillProps): JSX.Element;
+/** Wrapping container for pills: a bordered field-like box, or bare inside another control. */
+export interface PillContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  bare?: boolean;
+}
+export declare function PillContainer(props: PillContainerProps): JSX.Element;
+/** The website's filter chip: a 32px pill that toggles (aria-pressed), 28px as sm. Use for filters, facets and quick scopes above a list. */
+export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'icon' | 'size'> {
+  active?: boolean;
+  icon?: string;
+  /** Trailing count in mono */
+  count?: number | string;
+  size?: 'sm' | 'md';
+  /** Render as another tag, e.g. "a" for a filter link */
+  as?: any;
+}
+export declare function Chip(props: ChipProps): JSX.Element;
+export interface ChipOption { label: React.ReactNode; value: string; icon?: string; count?: number | string; disabled?: boolean; }
+/** A set of chips with single (radio-like, click again to clear) or multiple selection. */
+export interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'label' | 'onChange' | 'size' | 'value'> {
+  options: (string | ChipOption)[];
+  /** A string, or an array when multiple */
+  value?: string | string[];
+  onChange?: (value: any) => void;
+  multiple?: boolean;
+  size?: 'sm' | 'md';
+  /** Accessible name of the group */
+  label?: string;
+}
+export declare function ChipGroup(props: ChipGroupProps): JSX.Element;
+export interface CommandItem {
+  id?: string;
+  label: string;
+  /** Right-aligned mute text: tenant, path, type */
+  meta?: string;
+  /** Section heading when searching */
+  group?: string;
+  icon?: string;
+  /** Product glyph instead of a Lucide icon */
+  product?: 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+  /** Kbd hint: a string or one key per array item */
+  shortcut?: string | string[];
+  /** Extra words the search matches */
+  keywords?: string;
+  onSelect?: (item: CommandItem) => void;
+}
+/** ⌘K overlay: search field, grouped results, recent items while the query is empty, arrow-key navigation and Kbd hints. */
+export interface CommandPaletteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClose' | 'onSelect' | 'open' | 'placeholder'> {
+  open: boolean;
+  onClose?: () => void;
+  items: CommandItem[];
+  onSelect?: (item: CommandItem) => void;
+  /** Shown under "Recent" while the query is empty */
+  recent?: CommandItem[];
+  placeholder?: string;
+  /** Render without backdrop, in flow (docs) */
+  static?: boolean;
+  labels?: { placeholder?: string; recent?: string; results?: string; suggestions?: string; empty?: string; navigate?: string; open?: string; close?: string; title?: string };
+}
+export declare function CommandPalette(props: CommandPaletteProps): JSX.Element | null;
+export type Theme = 'light' | 'dark' | 'system';
+/** Theme switch: light / dark / system as a segmented icon control, or one button that cycles. Uncontrolled it drives useTheme; controlled it only reports. */
+export interface ThemeToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'size' | 'value'> {
+  value?: Theme;
+  onChange?: (value: Theme) => void;
+  /** Subset and order of the choices */
+  options?: Theme[];
+  variant?: 'segmented' | 'button';
+  size?: 'sm' | 'md';
+  /** Text beside each icon */
+  showLabels?: boolean;
+  labels?: { light?: string; dark?: string; system?: string; title?: string };
+}
+export declare function ThemeToggle(props: ThemeToggleProps): JSX.Element;
+/** [theme, setTheme, resolved]. Reads localStorage "agn-theme" (try/catch), else the current data-theme on <html>, else the default; writes the resolved theme to data-theme and follows the OS while "system". */
+export declare function useTheme(defaultTheme?: Theme): [Theme, (t: Theme) => void, 'light' | 'dark'];
+export declare function resolveTheme(t: Theme): 'light' | 'dark';
+
+// --- forms ---
+type FormsSize = 'sm' | 'md' | 'lg';
+/** Label + control + help/error wrapper for every field. Wires id, aria-describedby and aria-invalid onto a single child control; readOnly renders the record-view stacked value with an inline-edit pencil; inline renders a settings row with the label in the left column. */
+export interface FormElementProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'label' | 'value'> {
+  label?: React.ReactNode;
+  /** Red asterisk plus sr text; also passed to the child */
+  required?: boolean;
+  /** "Optional" after the label (use when most fields are required) */
+  optional?: boolean;
+  /** Mute line under the control (beside the label when inline) */
+  help?: React.ReactNode;
+  /** Replaces help; bad text with circle-alert, role="alert"; sets invalid on the child */
+  error?: React.ReactNode;
+  /** Info icon after the label with this as its title */
+  hint?: string;
+  /** Two-column settings row: label left, control right, divider below */
+  inline?: boolean;
+  /** Record view: shows value instead of the control */
+  readOnly?: boolean;
+  /** Displayed when readOnly; "—" when empty */
+  value?: React.ReactNode;
+  /** Shows the pencil in readOnly mode */
+  onEdit?: () => void;
+  /** Id of the control; generated when omitted */
+  htmlFor?: string;
+  labels?: { required?: string; optional?: string; edit?: string };
+}
+export declare function FormElement(props: FormElementProps): JSX.Element;
+/** Single-line text field with leading icon, trailing action, prefix/suffix and invalid state. Wrap in FormElement for label, help and error. */
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'action' | 'icon' | 'prefix' | 'size'> {
+  /** Lucide name, leading, mute */
+  icon?: string;
+  /** Lucide name, trailing, mute (hidden while a clear button shows) */
+  iconRight?: string;
+  /** Mono text before the value: "https://", "₺" */
+  prefix?: React.ReactNode;
+  /** Mono text after the value: "ms", ".aginies.com" */
+  suffix?: React.ReactNode;
+  /** Trailing icon button inside the field */
+  action?: { icon: string; label: string; onClick: () => void };
+  /** Shows × while there is a value */
+  onClear?: () => void;
+  invalid?: boolean;
+  /** sm 28 · md 32 · lg 40 */
+  size?: FormsSize;
+  /** No border or background: inline editing in tables and headers */
+  bare?: boolean;
+  /** Props for the wrapping div */
+  /** Props for the .agn-field wrapper; className and style merge with the field's own (they no longer replace them) */
+  wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+  /** clear: aria-label of the clear button (default "Clear") */
+  labels?: { clear?: string };
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+/** Multi-line text field; autoGrow follows the content and maxLength shows a counter. */
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+  invalid?: boolean;
+  size?: FormsSize;
+  /** Height follows the content */
+  autoGrow?: boolean;
+  /** "{n} / {max}" counter; over the limit it turns bad and sets aria-invalid */
+  maxLength?: number;
+  labels?: { counter?: string };
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export interface SelectOption { label: string; value: string; disabled?: boolean; }
+/** Native select styled like Input, with the chevron drawn in CSS. For search, meta lines or multi-select use Combobox. */
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'icon' | 'placeholder' | 'size'> {
+  /** Strings, options or { label, options } groups; children options also work */
+  options?: (string | SelectOption | { label: string; options: (string | SelectOption)[] })[];
+  /** Empty first option; hidden once required */
+  placeholder?: string;
+  icon?: string;
+  invalid?: boolean;
+  size?: FormsSize;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+/** Checkbox with label and description; indeterminate for a select-all that covers part of the set. */
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'label' | 'onChange' | 'size'> {
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  checked?: boolean;
+  /** Dash instead of a check; aria-checked="mixed" */
+  indeterminate?: boolean;
+  invalid?: boolean;
+  size?: 'sm' | 'md';
+  onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+/** A titled fieldset of checkboxes; inline lays them in a row. */
+export interface CheckboxGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, 'label'> {
+  label?: React.ReactNode;
+  inline?: boolean;
+  invalid?: boolean;
+  error?: React.ReactNode;
+  help?: React.ReactNode;
+}
+export declare function CheckboxGroup(props: CheckboxGroupProps): JSX.Element;
+/** Switch for a setting that applies immediately (no save step). Label left or right; optional on/off word. */
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'label' | 'onChange' | 'size'> {
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  checked?: boolean;
+  onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
+  /** right default; left for settings rows where the switch sits at the end */
+  labelPosition?: 'left' | 'right';
+  /** Mono "On"/"Off" beside the track */
+  showState?: boolean;
+  /** md 36×20 · sm 28×16 */
+  size?: 'sm' | 'md';
+  labels?: { on?: string; off?: string };
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+/** Icon-only checkbox rendered as a pressed button (add to list, star, watch); label is the accessible name. */
+export interface CheckboxButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'checked' | 'icon' | 'label' | 'onChange' | 'size'> {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  /** Lucide name when off (plus) */
+  icon?: string;
+  /** Lucide name when on (check) */
+  iconChecked?: string;
+  label: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+}
+export declare function CheckboxButton(props: CheckboxButtonProps): JSX.Element;
+export interface RadioOption { label: React.ReactNode; value: string; description?: React.ReactNode; icon?: string; disabled?: boolean; }
+/** Single choice. list renders stacked radios with descriptions; button renders the joined segmented radio button group. */
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled' | 'label' | 'name' | 'onChange' | 'size' | 'value'> {
+  name?: string;
+  options: (string | RadioOption)[];
+  value?: string;
+  onChange?: (value: string) => void;
+  /** Radios in a row (list variant) */
+  inline?: boolean;
+  variant?: 'list' | 'button';
+  size?: 'sm' | 'md';
+  disabled?: boolean;
+  invalid?: boolean;
+  /** Accessible name of the group */
+  label?: string;
+}
+export declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+export interface ComboboxOption {
+  label: string;
+  value: string;
+  /** Second line in mute */
+  meta?: string;
+  icon?: string;
+  /** Image URL or a name (initials are derived) */
+  avatar?: string;
+  product?: 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+  disabled?: boolean;
+  /** Group heading row */
+  type?: 'option' | 'header';
+}
+/** Searchable single/multi select with option meta and a leading icon, avatar or product glyph. picklist is a closed list; lookup is a search over records (agents, people, tenants). id and aria-* props go to the combobox input; other HTML props go to the wrapper. */
+export interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled' | 'icon' | 'onChange' | 'open' | 'placeholder' | 'size' | 'value'> {
+  options: (string | ComboboxOption)[];
+  /** A value, or an array when multiple */
+  value?: string | string[] | null;
+  onChange?: (value: any) => void;
+  multiple?: boolean;
+  /** picklist: no typing, chevron, type-ahead; lookup: search icon, filter as you type */
+  mode?: 'picklist' | 'lookup';
+  /** Override the mode's typing behaviour */
+  searchable?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  size?: FormsSize;
+  /** Leading icon in the field */
+  icon?: string;
+  /** Controlled open state (docs, custom triggers) */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Selected values as Pills under the field (multiple) */
+  inlinePills?: boolean;
+  renderOption?: (o: ComboboxOption) => React.ReactNode;
+  labels?: { empty?: string; clear?: string; remove?: string; placeholder?: string; search?: string };
+}
+export declare function Combobox(props: ComboboxProps): JSX.Element;
+export interface SegmentOption { label: string; value: string; icon?: string; iconOnly?: boolean; disabled?: boolean; }
+/** Compact single-select for views, periods and modes (List · Board · Timeline): 26px items in a 32px track with radio semantics. */
+export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'label' | 'onChange' | 'size' | 'value'> {
+  options: (string | SegmentOption)[];
+  value?: string;
+  onChange?: (value: string) => void;
+  /** md 32 track · sm 28 track */
+  size?: 'sm' | 'md';
+  /** Fill the width, items share it */
+  stretch?: boolean;
+  /** Accessible name of the group */
+  label?: string;
+}
+export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;
+/** Masked value (API key, token) in mono with reveal and copy. Read-only unless onChange is given. */
+export interface SecretFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'size'> {
+  value?: string;
+  /** Makes the field editable */
+  onChange?: (value: string) => void;
+  /** Characters left visible at the end (4) */
+  revealLast?: number;
+  size?: FormsSize;
+  invalid?: boolean;
+  labels?: { reveal?: string; hide?: string; copy?: string; copied?: string };
+}
+export declare function SecretField(props: SecretFieldProps): JSX.Element;
+/** Free-text tokens: Enter or comma adds, Backspace removes the last, paste splits. validate marks a pill invalid. */
+export interface TagInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled' | 'max' | 'onChange' | 'placeholder' | 'value'> {
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  /** Returns false for an entry to show as invalid (bad e-mail, unknown id) */
+  validate?: (entry: string) => boolean;
+  /** Stops accepting once reached */
+  max?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  /** Regex that splits typed and pasted text (comma, newline, semicolon) */
+  separators?: RegExp;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  labels?: { remove?: string; placeholder?: string };
+}
+export declare function TagInput(props: TagInputProps): JSX.Element;
+
+// --- pickers ---
+type PickersSize = 'sm' | 'md' | 'lg';
+/** Date field with a calendar popover; the value is a Date. Formats 15.10.2026 for tr and 15 Oct 2026 for en through locale. */
+export interface DatepickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled' | 'max' | 'min' | 'onChange' | 'open' | 'placeholder' | 'size' | 'value'> {
+  /** A date, or [from, to] with range */
+  value?: Date | null | [Date | null, Date | null];
+  /** Receives a date, or [from, to] with range (to is null after the first click) */
+  onChange?: (d: any) => void;
+  /** Pick a from–to range: "15.10.2026 – 22.10.2026"; closes when both ends are set */
+  range?: boolean;
+  /** Shown while empty; defaults to the locale's pattern (GG.AA.YYYY / DD MMM YYYY) */
+  placeholder?: string;
+  /** "tr" or "tr-TR" → 15.10.2026; anything else → 15 Oct 2026 */
+  locale?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  size?: PickersSize;
+  min?: Date;
+  max?: Date;
+  /** 0 Sunday · 1 Monday (default) */
+  weekStartsOn?: 0 | 1;
+  /** Controlled popover state (docs) */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  labels?: CalendarProps['labels'];
+}
+export declare function Datepicker(props: DatepickerProps): JSX.Element;
+/** Inline month grid with keyboard navigation; range mode picks a start and an end. Used by Datepicker and standalone in filters and reports. */
+export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'max' | 'min' | 'onChange' | 'value'> {
+  value?: Date | null;
+  onChange?: (d: Date | null) => void;
+  min?: Date;
+  max?: Date;
+  locale?: string;
+  weekStartsOn?: 0 | 1;
+  /** Month shown first (defaults to value or today) */
+  month?: Date;
+  /** Two-click range selection; reports through onRangeChange */
+  range?: boolean;
+  rangeStart?: Date | null;
+  rangeEnd?: Date | null;
+  onRangeChange?: (r: { start: Date | null; end: Date | null }) => void;
+  labels?: { prev?: string; next?: string; today?: string; clear?: string; grid?: string };
+}
+export declare function Calendar(props: CalendarProps): JSX.Element;
+/** 15.10.2026 for a tr locale, 15 Oct 2026 otherwise; empty string for null. */
+export declare function fmtDate(d: Date | string | null | undefined, locale?: string): string;
+/** 24h time on a Combobox: slots every step minutes, typeable. */
+export interface TimepickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled' | 'max' | 'min' | 'onChange' | 'open' | 'placeholder' | 'size' | 'step' | 'value'> {
+  /** "14:30" */
+  value?: string | null;
+  onChange?: (v: string | null) => void;
+  /** Minutes between slots (30) */
+  step?: number;
+  /** "09:00" — first slot */
+  min?: string;
+  /** "18:00" — last slot */
+  max?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  size?: PickersSize;
+  open?: boolean;
+  labels?: { empty?: string; clear?: string };
+}
+export declare function Timepicker(props: TimepickerProps): JSX.Element;
+/** Datepicker and Timepicker side by side for a scheduled run or a callback. */
+export interface DatetimePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled' | 'max' | 'min' | 'onChange' | 'size' | 'step'> {
+  date?: Date | null;
+  time?: string | null;
+  onDateChange?: (d: Date | null) => void;
+  onTimeChange?: (t: string | null) => void;
+  locale?: string;
+  step?: number;
+  min?: Date;
+  max?: Date;
+  disabled?: boolean;
+  invalid?: boolean;
+  size?: PickersSize;
+  labels?: CalendarProps['labels'];
+}
+export declare function DatetimePicker(props: DatetimePickerProps): JSX.Element;
+/** "00:00" … "23:30" at the given step, optionally clipped to [min, max]. */
+export declare function timeSlots(step?: number, min?: string, max?: string): string[];
+/** Slider with a filled track and a mono value readout; range renders two thumbs. Native range inputs, so arrow keys step. */
+export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled' | 'format' | 'label' | 'max' | 'min' | 'onChange' | 'size' | 'step' | 'value'> {
+  /** A number, or [min, max] when range */
+  value?: number | [number, number];
+  onChange?: (v: any) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  range?: boolean;
+  /** Readout at the right (true) */
+  showValue?: boolean;
+  /** Formats the readout: v => v + ' ms' */
+  format?: (v: number) => string;
+  /** Accessible name */
+  label?: string;
+  disabled?: boolean;
+  size?: 'sm' | 'md';
+}
+export declare function Slider(props: SliderProps): JSX.Element;
+export interface Swatch { value: string; label: string; }
+/** Hex field with a swatch and a popover of the data palette (token swatches) plus the native picker. Emits a resolved #rrggbb. */
+export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'open' | 'size' | 'value'> {
+  /** "#0077c2" */
+  value?: string;
+  onChange?: (hex: string) => void;
+  /** CSS colours or var(--token) values; defaultSwatches is data-1…6 plus the signal/ok/warn/bad ramps */
+  swatches?: (string | Swatch)[];
+  disabled?: boolean;
+  invalid?: boolean;
+  size?: PickersSize;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  labels?: { open?: string; custom?: string; swatches?: string; hex?: string };
+}
+export declare function ColorPicker(props: ColorPickerProps): JSX.Element;
+export declare const defaultSwatches: Swatch[];
+/** Numeric stepper (− value +) for seats, retries, concurrency. Arrow keys step, Shift ×10, typed values clamp on blur. */
+export interface CounterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled' | 'format' | 'label' | 'max' | 'min' | 'onChange' | 'size' | 'step' | 'value'> {
+  value?: number;
+  onChange?: (v: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  invalid?: boolean;
+  size?: PickersSize;
+  /** Mono unit after the value: "calls", "dk" */
+  suffix?: React.ReactNode;
+  /** Formats the displayed value while not editing */
+  format?: (v: number) => string;
+  /** Accessible name */
+  label?: string;
+  labels?: { decrement?: string; increment?: string };
+}
+export declare function Counter(props: CounterProps): JSX.Element;
+export interface PicklistOption { label: string; value: string; icon?: string; meta?: string; }
+/** Two-list transfer for an ordered multi-selection (columns, fields, permissions). Keyboard: arrows, Space, Enter or ←/→ transfer, Alt+↑/↓ reorder, ⌘A. */
+export interface DuelingPicklistProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled' | 'height' | 'label' | 'onChange' | 'value'> {
+  options: (string | PicklistOption)[];
+  /** Ordered selected values */
+  value?: string[];
+  onChange?: (v: string[]) => void;
+  /** Accessible name of the whole control */
+  label?: string;
+  /** List height in px (200) */
+  height?: number;
+  disabled?: boolean;
+  labels?: { available?: string; selected?: string; add?: string; remove?: string; up?: string; down?: string; empty?: string; count?: string };
+}
+export declare function DuelingPicklist(props: DuelingPicklistProps): JSX.Element;
+export interface FileEntry { id?: string; name: string; size?: number; status?: 'uploading' | 'done' | 'failed'; progress?: number; error?: string; }
+/** Upload control: a drop zone or a one-line row over a hidden file input, plus the list of chosen files. Enforces maxSize (10 MB) and maxFiles (5) and names each rejection. */
+export interface FileSelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled' | 'label'> {
+  /** Accepted files after the checks */
+  onFiles?: (files: File[]) => void;
+  /** Rejection messages, already worded */
+  onReject?: (messages: string[]) => void;
+  /** ".pdf,.wav,audio/*" */
+  accept?: string;
+  multiple?: boolean;
+  /** Bytes per file (10 MB) */
+  maxSize?: number;
+  /** Total files including those already listed (5) */
+  maxFiles?: number;
+  variant?: 'dropzone' | 'row';
+  /** Files already chosen or uploading */
+  files?: FileEntry[];
+  onRemove?: (index: number, file: FileEntry) => void;
+  disabled?: boolean;
+  invalid?: boolean;
+  /** For the size format (1,5 MB in tr) */
+  locale?: string;
+  /** Replaces the zone text */
+  label?: string;
+  labels?: { drop?: string; browse?: string; hint?: string; remove?: string; tooLarge?: string; tooMany?: string; wrongType?: string; uploading?: string; done?: string; failed?: string };
+}
+export declare function FileSelector(props: FileSelectorProps): JSX.Element;
+/** "1.5 MB" / "1,5 MB" */
+export declare function fmtSize(bytes: number | null | undefined, locale?: string): string;
+/** contentEditable editor with a small toolbar (bold, italic, list, link, code). Emits HTML; ⌘B/I/K/E work. */
+export interface RichTextEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'placeholder' | 'value'> {
+  /** HTML */
+  value?: string;
+  onChange?: (html: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  minHeight?: number | string;
+  /** Defaults: Bold, Italic, Bulleted list, Link, Code, Link address, Formatting (the toolbar's accessible name) */
+  labels?: { bold?: string; italic?: string; list?: string; link?: string; code?: string; linkPrompt?: string; toolbar?: string };
+}
+export declare function RichTextEditor(props: RichTextEditorProps): JSX.Element;
+export interface VisualPickerOption { label: string; value: string; description?: string; icon?: string; product?: 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce'; meta?: string; disabled?: boolean; }
+/** Large selectable tiles with icon, title and description for a template, plan, channel or product choice; single or multi. */
+export interface VisualPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'label' | 'name' | 'onChange' | 'size' | 'value'> {
+  options: VisualPickerOption[];
+  /** A value, or an array when multiple */
+  value?: string | string[];
+  onChange?: (v: any) => void;
+  multiple?: boolean;
+  /** tile: grid of cards · wide: one full-width row per option */
+  variant?: 'tile' | 'wide';
+  size?: 'sm' | 'md';
+  name?: string;
+  /** Fixed column count instead of auto-fill */
+  columns?: number;
+  /** Accessible name */
+  label?: string;
+}
+export declare function VisualPicker(props: VisualPickerProps): JSX.Element;
+export interface ExpressionRow { field?: string; op?: string; value?: string; }
+export interface ExpressionField { label: string; value: string; type?: 'text' | 'number' | 'date' | 'select'; /** Fixed values render a Select */ options?: (string | { label: string; value: string })[]; /** Operators for this field only */ operators?: (string | { label: string; value: string })[]; }
+export interface ExpressionGroup { logic: 'AND' | 'OR'; rows: ExpressionRow[]; }
+/** Condition builder: numbered field · operator · value rows joined by AND or OR, with optional nested groups. For routing rules, QA checks and filters. */
+export interface ExpressionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'title'> {
+  title?: string;
+  logic?: 'AND' | 'OR';
+  onLogicChange?: (l: 'AND' | 'OR') => void;
+  rows: ExpressionRow[];
+  onChange?: (rows: ExpressionRow[]) => void;
+  /** One level of nested groups, each with its own logic */
+  groups?: ExpressionGroup[];
+  /** Enables the "Add group" action */
+  onGroupsChange?: (groups: ExpressionGroup[]) => void;
+  fields: (string | ExpressionField)[];
+  /** Default operators (equals, does not equal, contains, is greater than, is less than, is empty, is not empty) */
+  operators?: (string | { label: string; value: string })[];
+  /** Override the default "append an empty row" */
+  onAdd?: () => void;
+  labels?: { all?: string; any?: string; and?: string; or?: string; add?: string; addGroup?: string; remove?: string; removeGroup?: string; field?: string; operator?: string; value?: string; fieldPlaceholder?: string; valuePlaceholder?: string; logic?: string };
+}
+export declare function Expression(props: ExpressionProps): JSX.Element;
+/** Sticky Save/Cancel bar for long forms, with an unsaved-changes note. */
+export interface DockedFormFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'disabled'> {
+  onSave?: () => void;
+  onCancel?: () => void;
+  /** Count drives the note ("3 unsaved changes", "All changes saved") and disables Save at 0 */
+  changes?: number;
+  /** Free text instead of the count */
+  message?: string;
+  saving?: boolean;
+  disabled?: boolean;
+  /** Slot between the note and the actions */
+  extra?: React.ReactNode;
+  align?: 'left' | 'center' | 'right';
+  /** position: fixed to the viewport instead of sticky in the scroll container */
+  fixed?: boolean;
+  labels?: { save?: string; cancel?: string; changes?: string; change?: string; saved?: string };
+}
+export declare function DockedFormFooter(props: DockedFormFooterProps): JSX.Element;
+
+// --- data ---
+export type Tone = 'neutral' | 'signal' | 'ok' | 'warn' | 'bad' | 'info';
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/** One column of a DataTable or TreeGrid. */
+export interface DataColumn<T = any> {
+  /** Field name on the row; also the sort key */
+  key: string;
+  /** Header text (mono 11px uppercase) */
+  label: React.ReactNode;
+  /** Sortable header: click cycles asc → desc → none */
+  sortable?: boolean;
+  /** Value used for sorting when it differs from row[key] */
+  sortValue?: (row: T) => any;
+  /** right for numbers and amounts */
+  align?: 'left' | 'right' | 'center';
+  width?: number | string;
+  minWidth?: number | string;
+  /** Custom cell; receives (value, row, index) */
+  render?: (value: any, row: T, index: number) => React.ReactNode;
+  /** Inline edit on double-click, F2 or the pencil (needs onCellEdit) */
+  editable?: boolean;
+  /** Mono 12px with tabular digits (IDs, counts) */
+  mono?: boolean;
+  /** Truncate with an ellipsis and a title */
+  ellipsis?: boolean;
+  /** Lucide icon before the header text */
+  icon?: string;
+  className?: string;
+}
+/** Visible strings of a DataTable, overridable per locale. */
+export interface DataTableLabels { empty?: string; emptyHint?: string; loading?: string; error?: string; errorHint?: string; retry?: string; selectAll?: string; selectRow?: string; actions?: string; sortedAsc?: string; sortedDesc?: string; edit?: string; }
+/** Dense record grid for agents, runs, approvals and tenants: sortable columns, selection with select-all, inline cell edit, row actions, sticky header, and the states error → loading → empty → rows. Rows are 32px compact and 44px comfortable. */
+export interface DataTableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'selected' | 'value'> {
+  columns: DataColumn<T>[];
+  rows: T[];
+  /** Field (default "id") or function giving each row's key */
+  rowKey?: string | ((row: T, index: number) => string | number);
+  /** Checkbox column with select-all (indeterminate when partial) */
+  selectable?: boolean;
+  /** Controlled selected keys */
+  selected?: Array<string | number>;
+  defaultSelected?: Array<string | number>;
+  onSelectChange?: (keys: Array<string | number>) => void;
+  /** Controlled sort; null for none */
+  sort?: { key: string; dir: 'asc' | 'desc' } | null;
+  defaultSort?: { key: string; dir: 'asc' | 'desc' } | null;
+  onSortChange?: (sort: { key: string; dir: 'asc' | 'desc' } | null) => void;
+  /** Row opens on click and Enter; rows become focusable (↑ ↓ Home End, Space selects) */
+  onRowClick?: (row: T, index: number) => void;
+  /** Trailing cell per row, e.g. a ButtonIcon or menu trigger */
+  rowActions?: (row: T, index: number) => React.ReactNode;
+  /** Header stays visible inside the scroll (default true) */
+  stickyHeader?: boolean;
+  /** Scroll height of the body */
+  maxHeight?: number | string;
+  /** Rendered in this order: error, loading, empty, ready. Omitted: empty when rows is empty, else ready */
+  state?: 'error' | 'loading' | 'empty' | 'ready';
+  labels?: DataTableLabels;
+  /** Shows a "Try again" button in the error state */
+  onRetry?: () => void;
+  /** Footer slot on the right: a Pagination */
+  pagination?: React.ReactNode;
+  /** Footer slot on the left: a selection summary or totals */
+  footer?: React.ReactNode;
+  /** Visually hidden table caption */
+  caption?: string;
+  striped?: boolean;
+  /** No outer border or radius (inside a Card with padding none) */
+  bare?: boolean;
+  /** Commit of an inline edit; the cell shows an input until Enter or blur */
+  onCellEdit?: (row: T, key: string, value: string) => void;
+  /** Skeleton rows while loading (default 5) */
+  skeletonRows?: number;
+  rowClassName?: (row: T, index: number) => string | false | undefined;
+  /** Key of the row whose detail is open (side panel, split view): aria-current, --selection ground and a --signal edge. Independent of `selected` */
+  activeKey?: string | number | null;
+}
+export declare function DataTable<T = any>(props: DataTableProps<T>): JSX.Element;
+
+/** A TreeGrid row: any fields plus optional children. */
+export interface TreeGridRow { id: string | number; children?: TreeGridRow[]; /** Open on first render */ expanded?: boolean; /** Lucide icon shown in the first cell */ icon?: string; [key: string]: any; }
+/** Table whose first column expands nested rows: a run and its steps, a tenant and its agents. ← → collapse and expand, ↑ ↓ move. */
+export interface TreeGridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'selected'> {
+  columns: DataColumn<TreeGridRow>[];
+  rows: TreeGridRow[];
+  /** Ids open on first render (else rows with expanded: true) */
+  defaultExpanded?: Array<string | number>;
+  /** Controlled open ids */
+  expanded?: Array<string | number>;
+  onExpandChange?: (ids: Array<string | number>) => void;
+  onRowClick?: (row: TreeGridRow) => void;
+  selected?: string | number;
+  stickyHeader?: boolean;
+  maxHeight?: number | string;
+  /** Pixels per depth level (default 20) */
+  indent?: number;
+  bare?: boolean;
+  labels?: { expand?: string; collapse?: string; empty?: string };
+}
+export declare function TreeGrid(props: TreeGridProps): JSX.Element;
+
+/** A Tree node. kind picks the default icon; folders toggle, other kinds select. */
+export interface TreeNode { id: string; label: string; kind?: 'folder' | 'agent' | 'file' | 'tenant' | 'run' | 'tool' | 'kb' | string; icon?: string; /** Product glyph instead of an icon */ product?: 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce'; meta?: string; count?: number; expanded?: boolean; /** A folder that can itself be selected */ selectable?: boolean; children?: TreeNode[]; }
+/** Navigation tree with folders: agents in folders, files in a knowledge base. One selected node; arrows move, ← → collapse and expand, Enter selects. */
+export interface TreeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'selected'> {
+  items: TreeNode[];
+  selected?: string;
+  onSelect?: (node: TreeNode) => void;
+  defaultExpanded?: string[];
+  expanded?: string[];
+  onExpandChange?: (ids: string[]) => void;
+  /** Mono eyebrow above the tree */
+  header?: React.ReactNode;
+  /** Pixels per depth level (default 16) */
+  indent?: number;
+  labels?: { expand?: string; collapse?: string; empty?: string };
+}
+export declare function Tree(props: TreeProps): JSX.Element;
+
+/** Compact record summary: media, title, meta line, actions. The row unit of a related list. */
+export interface TileProps extends Omit<React.HTMLAttributes<HTMLElement>, 'icon' | 'selected' | 'title'> {
+  title: React.ReactNode;
+  /** Lucide icon when there is no media */
+  icon?: string;
+  /** A BlockIcon, Avatar or ProductIcon */
+  media?: React.ReactNode;
+  href?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  /** One or more meta fragments, separated by a middle dot */
+  meta?: React.ReactNode | React.ReactNode[];
+  actions?: React.ReactNode;
+  /** 1px line and radius-lg around the tile */
+  boxed?: boolean;
+  selected?: boolean;
+  as?: any;
+}
+export declare function Tile(props: TileProps): JSX.Element;
+
+/** One key field of a SummaryDetail. */
+export interface SummaryField { key?: string; label: React.ReactNode; value?: React.ReactNode; /** Mono tabular value (IDs, counts) */ mono?: boolean; /** Colours the value: ok, warn or bad, with the value itself carrying the word */ tone?: 'ok' | 'warn' | 'bad'; }
+/** Key fields in a row under a record title: mono label over a value, hairlines between. The at-a-glance strip of a record page. */
+export interface SummaryDetailProps extends Omit<React.HTMLAttributes<HTMLDListElement>, 'max'> {
+  fields: SummaryField[];
+  /** Show only the first n fields */
+  max?: number;
+  /** Tighter gaps for side panels */
+  dense?: boolean;
+}
+export declare function SummaryDetail(props: SummaryDetailProps): JSX.Element;
+
+/** Avatar. People are circles; systems and agents are radius-md squares. Initials fall back on neutral-ramp grounds. */
+export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'icon' | 'name' | 'size'> {
+  src?: string;
+  /** Used for initials, the accessible name and the ground choice */
+  name?: string;
+  /** person = circle; agent and system = square */
+  kind?: 'person' | 'agent' | 'system';
+  /** xs 20 · sm 24 · md 32 · lg 40 · xl 56 */
+  size?: Size;
+  /** Lucide icon instead of initials */
+  icon?: string;
+  /** Product glyph for a system avatar */
+  product?: 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+  /** Presence dot; named in the accessible label */
+  status?: 'online' | 'busy' | 'away' | 'offline';
+  labels?: { online?: string; busy?: string; away?: string; offline?: string };
+}
+export declare function Avatar(props: AvatarProps): JSX.Element;
+/** Overlapping avatars with a "+n" overflow. Items are names or Avatar props. */
+export interface AvatarGroupProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'size'> { items: Array<string | AvatarProps>; /** Shown before the overflow (default 4) */ max?: number; size?: Size; kind?: AvatarProps['kind']; }
+export declare function AvatarGroup(props: AvatarGroupProps): JSX.Element;
+
+/** Count or one-word status on a pill. Solid signal for unread counts; soft tones for status words. */
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'icon' | 'max' | 'size'> {
+  tone?: Tone;
+  /** Numeric badge; renders max+ above max */
+  count?: number;
+  max?: number;
+  /** Solid fill with ink (notification counts) */
+  solid?: boolean;
+  /** Transparent ground with a 1px border in the tone (neutral uses --edge): quiet states such as Disabled or Draft. Ignored with solid */
+  outline?: boolean;
+  icon?: string;
+  size?: 'sm' | 'md';
+}
+export declare function Badge(props: BadgeProps): JSX.Element;
+
+/** The website's .tag: mono 11.5px on radius-sm with a soft wash and a 45% tinted border. */
+export interface TagProps extends Omit<React.HTMLAttributes<HTMLElement>, 'icon'> {
+  tone?: Tone;
+  /** Live dot before the word (running); pulses for info and signal */
+  dot?: boolean;
+  icon?: string;
+  as?: any;
+}
+export declare function Tag(props: TagProps): JSX.Element;
+
+/** The 24px rounded icon tile of a canvas block or a tool. color is the ONE place a third-party brand colour may enter the UI. */
+export interface BlockIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'icon' | 'size' | 'title'> {
+  /** Lucide icon (default box) */
+  icon?: string;
+  /** Product glyph instead of an icon */
+  product?: 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+  /** signal by default; tones carry state (ok ran, bad failed, warn needs attention) */
+  tone?: Tone;
+  /** Exception: a tool's brand colour (e.g. Slack). Washed to 14% for the ground, full for the glyph. Document the tool when you use it. */
+  color?: string;
+  /** sm 20 · md 24 · lg 32 · xl 40 */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Accessible name; without it the tile is decorative */
+  title?: string;
+  /** Custom glyph (a brand SVG) instead of icon */
+  children?: React.ReactNode;
+}
+export declare function BlockIcon(props: BlockIconProps): JSX.Element;
+
+/** A file as a card or a row: name, type, size, modified, thumbnail, actions. */
+export interface FileCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'name' | 'selected' | 'size' | 'type'> {
+  name: string;
+  /** Extension; inferred from the name when omitted */
+  type?: string;
+  /** Pre-formatted, e.g. "1,2 MB" */
+  size?: string;
+  modified?: string;
+  /** Image URL shown as the thumbnail */
+  preview?: string;
+  variant?: 'card' | 'row';
+  selected?: boolean;
+  onOpen?: () => void;
+  href?: string;
+  actions?: React.ReactNode;
+  meta?: React.ReactNode;
+}
+export declare function FileCard(props: FileCardProps): JSX.Element;
+
+/** Container for FeedPosts (role feed). */
+export interface FeedProps extends React.HTMLAttributes<HTMLDivElement> { children?: React.ReactNode; }
+export declare function Feed(props: FeedProps): JSX.Element;
+export interface FeedReply { id?: string; author: string | { name: string }; avatar?: string; kind?: AvatarProps['kind']; time?: string; text: React.ReactNode; }
+/** One feed entry: avatar, who did what to which object, the time, the text, actions and replies. */
+export interface FeedPostProps extends Omit<React.HTMLAttributes<HTMLElement>, 'action' | 'target'> {
+  author: string | { name: string; src?: string; kind?: AvatarProps['kind']; product?: AvatarProps['product'] };
+  avatar?: string;
+  kind?: AvatarProps['kind'];
+  /** Verb phrase: "approved", "commented on" */
+  action?: React.ReactNode;
+  /** Object name after the action */
+  target?: React.ReactNode;
+  time?: string;
+  /** The body text */
+  children?: React.ReactNode;
+  actions?: React.ReactNode;
+  replies?: FeedReply[];
+  likes?: number;
+  liked?: boolean;
+  onLike?: () => void;
+  onReply?: () => void;
+  /** warn wraps the body in a warn-soft panel (an escalation) */
+  tone?: 'warn';
+  labels?: { reply?: string; like?: string; liked?: string };
+}
+export declare function FeedPost(props: FeedPostProps): JSX.Element;
+
+/** One event on an ActivityTimeline. kind picks the icon and default tone. */
+export interface TimelineItem { id?: string; kind?: 'run' | 'step' | 'approval' | 'call' | 'message' | 'note' | 'agent' | 'deploy' | 'edit' | 'error' | 'success' | 'warn' | 'handoff' | 'email' | 'event'; icon?: string; tone?: Tone; title: React.ReactNode; description?: React.ReactNode; time?: string; /** Expandable content under the item */ detail?: React.ReactNode; open?: boolean; /** Date header rendered when it changes */ group?: string; /** Signal ring on the marker */ current?: boolean; /** false draws a dashed, dimmed future step */ done?: boolean; }
+/** Vertical timeline of events with an icon per kind and a time: run history, case history. */
+export interface ActivityTimelineProps extends React.HTMLAttributes<HTMLOListElement> { items: TimelineItem[]; compact?: boolean; labels?: { show?: string; hide?: string }; }
+export declare function ActivityTimeline(props: ActivityTimelineProps): JSX.Element;
+
+/** Empty, error and first-run states built from tokens alone. Twelve scenes; no bitmaps. */
+export interface IllustrationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'action' | 'icon' | 'size' | 'title'> {
+  scene?: 'empty' | 'search' | 'error' | 'locked' | 'offline' | 'success' | 'agent' | 'chart' | 'calendar' | 'files' | 'team' | 'build';
+  /** Overrides the scene's glyph */
+  icon?: string;
+  /** Product glyph in the box (the agent scene uses platform) */
+  product?: 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+  title?: React.ReactNode;
+  message?: React.ReactNode;
+  /** Custom action node */
+  action?: React.ReactNode;
+  /** Renders a primary Button with this label */
+  actionLabel?: string;
+  onAction?: () => void;
+  size?: 'sm' | 'md';
+}
+export declare function Illustration(props: IllustrationProps): JSX.Element;
+export declare const illustrationScenes: string[];
+
+/** The website's .stat: display-600 tabular value over a mono uppercase label. */
+export interface StatProps extends Omit<React.HTMLAttributes<HTMLElement>, 'icon' | 'label' | 'size' | 'value'> {
+  value: React.ReactNode;
+  label: React.ReactNode;
+  /** A number (+12 → "+12%"), a string ("−2,1%": a U+2212 or ASCII minus reads as down), or { value, direction, unit, label }; unit "" prints no unit */
+  /** A number is formatted (sign, locale, unit); a string is shown as written and `unit` does not apply to it */
+  delta?: number | string | { value: number | string; direction?: 'up' | 'down' | 'flat'; unit?: string; label?: React.ReactNode };
+  /** Down is good (costs, latency, errors) */
+  invert?: boolean;
+  sub?: React.ReactNode;
+  icon?: string;
+  /** sm 20px · md 32px · lg 44px value */
+  size?: 'sm' | 'md' | 'lg';
+  /** A Sparkline or MiniChart under the value */
+  chart?: React.ReactNode;
+  /** BCP 47 locale for numeric deltas ("tr-TR" → "+8,2%", "−2,1%" with U+2212). Omitted: the number prints as written */
+  locale?: string;
+  as?: any;
+}
+export declare function Stat(props: StatProps): JSX.Element;
+
+export interface ChartSeries { name: string; values: number[]; /** Dashed line, no fill or end point: the comparison series (last period, target). Line and area only */ dashed?: boolean; }
+/** Small SVG charts at the six data colours: line, area, bar. Faint grid, emphasised last point, tabular labels. */
+export interface MiniChartProps extends Omit<React.HTMLAttributes<HTMLElement>, 'data' | 'format' | 'height' | 'max' | 'min' | 'title' | 'type' | 'width'> {
+  type?: 'line' | 'area' | 'bar';
+  /** Single series */
+  data?: number[];
+  /** Up to six series, coloured data-1…6 in order */
+  series?: ChartSeries[];
+  /** X labels; thinned by count and by the measured width so they never overlap */
+  labels?: string[];
+  height?: number;
+  /** First-paint width; the chart then draws at its container's measured width (ResizeObserver), so text never stretches */
+  width?: number;
+  /** Stack series (bar and area only): one bar per label with segments, or bands on cumulative lines */
+  stacked?: boolean;
+  max?: number;
+  min?: number;
+  grid?: boolean;
+  legend?: boolean;
+  format?: (v: number) => string;
+  /** Accessible title of the chart */
+  title?: string;
+  /** last emphasises the final point or bar; none for flat */
+  emphasis?: 'last' | 'none';
+  /** Reference line (a number or { value, label }): dashed --line-3 with a label at the right, not a series */
+  reference?: number | { value: number; label?: string };
+  /** Target band { from, to, label } on --signal-soft behind the marks */
+  band?: { from: number; to: number; label?: string };
+}
+export declare function MiniChart(props: MiniChartProps): JSX.Element;
+/** Inline trend line for table cells and Stat tiles: no axes, the end point emphasised. */
+export interface SparklineProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'color' | 'height' | 'max' | 'min' | 'width'> { data: number[]; width?: number; height?: number; area?: boolean; /** data colour index 1–6 */ color?: 1 | 2 | 3 | 4 | 5 | 6; /** Status colour instead of a data colour */ tone?: 'ok' | 'warn' | 'bad'; /** Scale bounds; either one turns off the forced zero */ min?: number; max?: number; /** Include zero in the scale (default true); false fits the data so a 27–36 s trend is not flat */ zero?: boolean; }
+export declare function Sparkline(props: SparklineProps): JSX.Element;
+
+/** One Kanban column. */
+export interface KanbanColumn { id: string; label: string; /** WIP limit; the count turns bad above it */ limit?: number; tone?: Tone; }
+/** One Kanban card; extra fields pass through to renderCard. */
+export interface KanbanCard { id: string | number; column: string; title: React.ReactNode; sub?: React.ReactNode; tags?: string[]; priority?: 'high' | 'medium' | 'low'; assignee?: string | { name: string; src?: string; kind?: AvatarProps['kind'] }; due?: string; overdue?: boolean; /** Comment count */ count?: number; /** Left edge colour for state */ tone?: 'ok' | 'warn' | 'bad'; [key: string]: any; }
+/** Board of columns and cards: approvals by stage, cases by status. Drag between columns; Enter opens, ← → move, ↑ ↓ walk the column. */
+export interface KanbanProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns: KanbanColumn[];
+  cards: KanbanCard[];
+  /** Enables drag and arrow-key moves */
+  onMove?: (cardId: string | number, toColumn: string, card: KanbanCard) => void;
+  onCardClick?: (card: KanbanCard) => void;
+  /** Plus button in each column header */
+  onAdd?: (column: string) => void;
+  renderCard?: (card: KanbanCard) => React.ReactNode;
+  labels?: { add?: string; limit?: string; empty?: string; moveTo?: string };
+}
+export declare function Kanban(props: KanbanProps): JSX.Element;
+
+/** A CalendarView event. */
+export interface CalendarEvent { id?: string | number; title: string; start: Date | string; end?: Date | string; allDay?: boolean; tone?: Tone; [key: string]: any; }
+/** Month grid with schedule chips: scheduled runs, campaigns, maintenance windows. */
+export interface CalendarViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Any date in the month to show (default: today's month) */
+  month?: Date | string;
+  events?: CalendarEvent[];
+  /** BCP 47 tag for weekday and month names (default "en") */
+  locale?: string;
+  /** 1 = Monday (default), 0 = Sunday */
+  weekStartsOn?: 0 | 1;
+  today?: Date;
+  /** Chips per day before "+n more" (default 3) */
+  maxPerDay?: number;
+  onEventClick?: (e: CalendarEvent) => void;
+  onDayClick?: (d: Date) => void;
+  /** Enables the month navigation in the header */
+  onMonthChange?: (firstOfMonth: Date) => void;
+  header?: boolean;
+  labels?: { more?: string; today?: string; prev?: string; next?: string };
+}
+export declare function CalendarView(props: CalendarViewProps): JSX.Element;
+
+/** A Gantt task. */
+export interface GanttTask { id: string | number; title: React.ReactNode; start: Date | string; end?: Date | string; /** 0–1 */ progress?: number; tone?: Tone; /** Thin summary bar */ group?: boolean; depth?: number; /** Diamond at start */ milestone?: boolean; /** Text inside the bar */ assignee?: string; }
+/** Bars on a day or week scale with a today line: rollout plans, campaign windows. */
+export interface GanttProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'start'> {
+  tasks: GanttTask[];
+  /** Range; defaults to the tasks' extent */
+  start?: Date | string;
+  end?: Date | string;
+  unit?: 'day' | 'week';
+  /** Pixels per unit (default 32 day, 72 week) */
+  colWidth?: number;
+  today?: Date;
+  locale?: string;
+  /** Width of the task name column (default 200) */
+  labelWidth?: number;
+  onTaskClick?: (t: GanttTask) => void;
+  labels?: { today?: string; progress?: string };
+}
+export declare function Gantt(props: GanttProps): JSX.Element;
+
+/** One pair of a DescriptionList. */
+export interface DescriptionItem { key?: string; label: React.ReactNode; value?: React.ReactNode; mono?: boolean; /** Spans all columns */ span?: boolean; }
+/** Label/value pairs for record detail: stacked or horizontal, 1–3 columns. */
+export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElement> {
+  /** Items or [label, value] tuples */
+  items: Array<DescriptionItem | [React.ReactNode, React.ReactNode]>;
+  columns?: 1 | 2 | 3;
+  /** Label left, value right */
+  horizontal?: boolean;
+  /** Label column width in horizontal mode (default 120px) */
+  labelWidth?: string;
+}
+export declare function DescriptionList(props: DescriptionListProps): JSX.Element;
+
+/** Locale money or number with tabular digits. tr-TR ₺1.250.000,00 · en ₺1,250,000.00. Negative reads in bad with a minus. */
+export interface AmountProps extends Omit<React.HTMLAttributes<HTMLElement>, 'value'> {
+  value: number;
+  /** ISO code (default TRY); null for a plain number */
+  currency?: string | null;
+  /** BCP 47 (default tr-TR) */
+  locale?: string;
+  decimals?: number;
+  /** Also show + for positive, in ok */
+  signed?: boolean;
+  strong?: boolean;
+  /** Fraction digits in mute */
+  muteDecimals?: boolean;
+  /** Overrides the automatic sign colouring */
+  tone?: 'ok' | 'bad';
+  as?: any;
+}
+export declare function Amount(props: AmountProps): JSX.Element;
+export declare function formatAmount(value: number, opts?: { currency?: string | null; locale?: string; decimals?: number; style?: 'currency' | 'decimal' }): string;
+
+/** Code well: mono 13px, line numbers, copy, language label, wrap toggle; json, bash and js get token colours. */
+export interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'wrap'> {
+  code: string;
+  /** json | bash | js | ts | text (default). Others render plain with the label */
+  language?: string;
+  /** Filename or caption in the bar */
+  title?: string;
+  lineNumbers?: boolean;
+  copy?: boolean;
+  /** Initial wrap state */
+  wrap?: boolean;
+  wrapToggle?: boolean;
+  maxHeight?: number | string;
+  /** 1-based line numbers to highlight */
+  highlight?: number[];
+  startLine?: number;
+  labels?: { copy?: string; copied?: string; wrap?: string; unwrap?: string };
+}
+export declare function CodeBlock(props: CodeBlockProps): JSX.Element;
+export declare function tokenize(line: string, lang: 'json' | 'bash' | 'js'): Array<[string, string]>;
+
+/** Collapsible JSON view for run inputs, outputs and tool calls. */
+export interface JsonTreeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'data' | 'title'> {
+  data: any;
+  /** Levels open on first render (default 2) */
+  defaultDepth?: number;
+  title?: string;
+  copy?: boolean;
+  maxHeight?: number | string;
+  labels?: { items?: string; keys?: string; expand?: string; collapse?: string; copy?: string; copied?: string };
+}
+export declare function JsonTree(props: JsonTreeProps): JSX.Element;
+
+/** One diff line. */
+export interface DiffLine { type: 'ctx' | 'add' | 'del'; text: string; /** Line number before */ a?: number; /** Line number after */ b?: number; }
+/** Unified or split diff of two texts: prompt versions, agent configs. Added on ok-soft, removed on bad-soft, each with a marker. */
+export interface DiffViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'wrap'> {
+  before?: string;
+  after?: string;
+  /** Pre-computed lines instead of before/after */
+  lines?: DiffLine[];
+  /** split: two fixed 50/50 columns, each scrolling horizontally on its own (or wrapping, with wrap) */
+  mode?: 'unified' | 'split';
+  /** Highlight the changed words inside each removed/added pair (transcript adjudication, prompt edits) */
+  words?: boolean;
+  /** Wrap long lines instead of scrolling; in split mode both sides share one table so wrapped rows stay aligned */
+  wrap?: boolean;
+  title?: string;
+  /** Unchanged lines kept around each change; null shows everything */
+  context?: number | null;
+  maxHeight?: number | string;
+  labels?: { added?: string; removed?: string; before?: string; after?: string; unchanged?: string };
+}
+export declare function DiffView(props: DiffViewProps): JSX.Element;
+export declare function diffLines(before: string, after: string): DiffLine[];
+
+/** Grid of cells coloured by a threshold scale on the ok/warn/bad ramps (per-agent success by day), or by a sequential signal ramp for load and volume. */
+export interface HeatmapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'format'> {
+  /** Row labels (agents) */
+  rows: Array<string | { label: string }>;
+  /** Column labels (days) */
+  columns: Array<string | { label: string }>;
+  /** values[row][column]: 0–1 for the threshold scale, any number for sequential; null for no runs */
+  values: Array<Array<number | null>>;
+  /** threshold (default): ok/warn/bad ramps; sequential: five steps of the signal ramp (signal-100 → signal-700) */
+  scale?: 'threshold' | 'sequential';
+  /** Sequential only: [low, high] of the ramp (default [min(0, values), max(values)]) */
+  domain?: [number, number];
+  /** ok at or above (default .97), warn at or above (default .9), bad below */
+  thresholds?: { ok?: number; warn?: number };
+  format?: (v: number | null) => string;
+  /** Print the value inside each cell */
+  showValues?: boolean;
+  /** Cell size in px (default 28) */
+  cellSize?: number;
+  legend?: boolean;
+  onCellClick?: (cell: { row: any; column: any; value: number | null; rowIndex: number; columnIndex: number }) => void;
+  labels?: { ok?: string; warn?: string; bad?: string; none?: string; low?: string; high?: string };
+}
+export declare function Heatmap(props: HeatmapProps): JSX.Element;
+export declare function heatmapSequentialColor(value: number | null, low?: number, high?: number): { bg: string; ink: string; tone: 'seq' | 'none'; step?: number };
+export declare function heatmapColor(value: number | null, thresholds?: { ok?: number; warn?: number }): { bg: string; ink: string; tone: 'ok' | 'warn' | 'bad' | 'none' };
+
+// --- layout ---
+/** Flat card: 1px line, radius-lg, no shadow. 44px header with optional icon, count and actions; body; centred "View all" footer. A panel only for an object that is really separate. */
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'icon' | 'selected' | 'title'> {
+  /** Header title in heading style (15px/600) */
+  title?: React.ReactNode;
+  /** Lucide icon before the title */
+  icon?: string;
+  /** Mono count after the title */
+  count?: number | string;
+  /** Right side of the header: ghost buttons, a menu trigger */
+  actions?: React.ReactNode;
+  /** Custom footer content (replaces viewAll) */
+  footer?: React.ReactNode;
+  /** Centred "View all" link button: a handler, or a custom label with viewAllHref */
+  viewAll?: (() => void) | string;
+  viewAllHref?: string;
+  /** Body padding: md 16 (default), sm 12, none for tables and code */
+  padding?: 'none' | 'sm' | 'md';
+  /** On bg-2: a well inside a panel */
+  sunken?: boolean;
+  /** Hover border for a clickable card */
+  interactive?: boolean;
+  selected?: boolean;
+  labels?: { viewAll?: string };
+  /** Tag of the root; as="button" or "a" is reset (font, colour, left-aligned text, full width) so the card looks the same */
+  as?: any;
+}
+export declare function Card(props: CardProps): JSX.Element;
+
+/** 32px row above a list or board: ghost buttons, a segmented control, a search field; sticky over the scroll. */
+export interface ToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Heading-style title on the left */
+  title?: React.ReactNode;
+  /** Mono count after the title */
+  count?: React.ReactNode;
+  /** Inline search field; onChange receives the string */
+  search?: { value?: string; defaultValue?: string; placeholder?: string; label?: string; onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void; onSubmit?: (value: string) => void };
+  /** Controls after the title */
+  left?: React.ReactNode;
+  /** Controls pushed to the right edge */
+  right?: React.ReactNode;
+  /** Sticks to the top of the scroll container */
+  sticky?: boolean;
+  /** Transparent ground (over a Card) */
+  bare?: boolean;
+  labels?: { search?: string; clear?: string };
+}
+export declare function Toolbar(props: ToolbarProps): JSX.Element;
+/** Vertical hairline between toolbar groups. */
+export declare function ToolbarSeparator(props: React.HTMLAttributes<HTMLSpanElement>): JSX.Element;
+
+/** The console frame: optional GlobalHeader on top, VerticalNavigation on the left, a scrolling main area with the console gutter, optional side panel on the right. It measures its own width: ≥ 1280 everything docked; 1024–1279 the sidebar on its 56px rail; < 1024 the sidebar is a drawer and the side panel a sheet from the right, both opened from a 48px page bar; < 768 the gutter is 16px. */
+export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** A GlobalHeader (brand screens) — consoles usually omit it */
+  header?: React.ReactNode;
+  /** A VerticalNavigation; it reads its state (docked, rail, drawer) from the PageLayout */
+  navigation?: React.ReactNode;
+  /** A side panel: inspector, artifact, conversation. A SidePanel passed without a mode is docked in the frame */
+  sidePanel?: React.ReactNode;
+  /** Defaults to --panel-w (288) */
+  sidePanelWidth?: number | string;
+  /** Content width preset: reading (--content-reading 960: settings, documents, wizards) · default (--content-max 1440) · wide (--content-wide 1920: dashboards that add columns) · full (no cap: tables and canvases) */
+  width?: 'reading' | 'default' | 'wide' | 'full';
+  /** Content max width; overrides width */
+  maxWidth?: number | string;
+  /** No gutter or max width, and the content fills the main area's height (canvas, split views) */
+  flush?: boolean;
+  /** Sidebar state: auto (default, from the measured width), or forced docked / rail / overlay */
+  sidebarMode?: 'auto' | 'docked' | 'rail' | 'overlay';
+  /** Side panel state: auto (default: docked ≥ 1024, overlay below), or forced docked / overlay */
+  panelMode?: 'auto' | 'docked' | 'overlay';
+  /** Overlay drawer open (controlled); uncontrolled it opens from the page bar */
+  sidebarOpen?: boolean;
+  onSidebarOpenChange?: (open: boolean) => void;
+  /** Overlay sheet open (controlled); uncontrolled it opens from the page bar and when a side panel appears while the page is narrow */
+  panelOpen?: boolean;
+  onPanelOpenChange?: (open: boolean) => void;
+  /** The 48px page bar shown while the sidebar or panel is an overlay: false hides it (open them through usePageLayout), a node replaces the mark in its middle */
+  bar?: boolean | React.ReactNode;
+  labels?: { openNav?: string; closeNav?: string; openPanel?: string; closePanel?: string; navigation?: string; details?: string };
+  as?: any;
+}
+export declare function PageLayout(props: PageLayoutProps): JSX.Element;
+
+/** State of the enclosing PageLayout, for a page that needs to adapt (drop table columns, put the menu button in its own header). */
+export interface PageLayoutState {
+  /** Breakpoint of the page's own width */
+  bp: Breakpoint;
+  sidebar: 'docked' | 'rail' | 'overlay' | null;
+  panel: 'docked' | 'overlay' | null;
+  railExpanded: boolean;
+  setRailExpanded: (expanded: boolean) => void;
+  sidebarOpen: boolean;
+  openSidebar: () => void;
+  closeSidebar: () => void;
+  panelOpen: boolean;
+  openPanel: () => void;
+  closePanel: () => void;
+}
+/** The enclosing PageLayout's state; null outside one. */
+export declare function usePageLayout(): PageLayoutState | null;
+export declare const PageLayoutContext: React.Context<PageLayoutState | null>;
+
+/** Breakpoint names: base < 640 ≤ sm < 768 ≤ md < 1024 ≤ lg < 1280 ≤ xl < 1536 ≤ 2xl (tokens bp-sm … bp-2xl). */
+export type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** A value per breakpoint, mobile first: each one holds until a larger breakpoint sets another. */
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+
+/** 12-column grid (--grid-columns, --grid-gap) laid out by its own width through a container query, so it responds to its pane, not the window. Dashboards, record bodies, card galleries. */
+export interface GridProps extends React.HTMLAttributes<HTMLElement> {
+  /** Gallery mode: auto-fill columns at least this wide (number = px), e.g. 280 for cards. GridItem spans are ignored */
+  min?: number | string;
+  /** Column count (default --grid-columns, 12) */
+  columns?: number;
+  /** Gap: lg (default, --grid-gap 24), md 16, sm 12, none, or any length */
+  gap?: 'none' | 'sm' | 'md' | 'lg' | number | string;
+  /** Row gap when it differs from gap */
+  rowGap?: 'none' | 'sm' | 'md' | 'lg' | number | string;
+  /** Vertical alignment of items in a row (default stretch) */
+  align?: 'start' | 'center' | 'end';
+  /** Back-fills holes left by wide items */
+  dense?: boolean;
+  as?: any;
+}
+export declare function Grid(props: GridProps): JSX.Element;
+/** One cell of a Grid. */
+export interface GridItemProps extends React.HTMLAttributes<HTMLElement> {
+  /** Columns to span: a number, 'full', or per breakpoint of the Grid's width ({ base: 12, lg: 6, xl: 4 }). Default 12 */
+  span?: Responsive<number | 'full'>;
+  /** Starting column line */
+  start?: number;
+  /** Rows to span */
+  rowSpan?: number;
+  as?: any;
+}
+export declare function GridItem(props: GridItemProps): JSX.Element;
+
+/** Breakpoint values in px (= tokens): { sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 }. */
+export declare const BREAKPOINTS: Record<Exclude<Breakpoint, 'base'>, number>;
+/** Name of the largest breakpoint a width reaches. */
+export declare function breakpointFor(width: number): Breakpoint;
+/** Width (px) of an element, kept current with a ResizeObserver; null until measured. */
+export declare function useElementWidth(ref: React.RefObject<Element>): number | null;
+/** Breakpoint of an element's own width; null until measured. Use it to drop low-priority table columns in a narrow pane. */
+export declare function useBreakpoint(ref: React.RefObject<Element>): Breakpoint | null;
+/** Drawer/sheet focus handling: focus moves into the container on open, Tab stays inside, Esc calls onClose, focus returns on close. */
+export declare function useOverlayFocus(ref: React.RefObject<HTMLElement>, open: boolean, onClose?: () => void): void;
+
+/** The website's .room: a section that inverts the theme inside — sets data-theme opposite to its ancestor and paints --bg. */
+export interface RoomProps extends React.HTMLAttributes<HTMLElement> {
+  /** Force a theme instead of inverting the ancestor's */
+  theme?: 'light' | 'dark';
+  /** lg 48px/gutter (default), md 24px/console gutter, none */
+  padding?: 'lg' | 'md' | 'none';
+  as?: any;
+}
+export declare function Room(props: RoomProps): JSX.Element;
+
+// --- navigation ---
+type NavigationProduct = 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+type NavigationTone = 'neutral' | 'signal' | 'ok' | 'warn' | 'bad' | 'info';
+
+/** 48px top bar: logo lockup with the product name, a search trigger with its shortcut, actions, the user's avatar. panel for consoles, ink for brand screens. */
+export interface GlobalHeaderProps extends React.HTMLAttributes<HTMLElement> {
+  /** NavigationProduct name after the wordmark ("Platform", "Dialog") */
+  product?: string;
+  /** panel (default) on --panel with a line below; ink on --text for brand screens */
+  tone?: 'panel' | 'ink';
+  /** Show the search trigger (default true) */
+  search?: boolean;
+  onSearch?: () => void;
+  /** Shown in a kbd next to the search hint (default ⌘K) */
+  shortcut?: string;
+  /** Extra ButtonIcons before the avatar */
+  actions?: React.ReactNode;
+  user?: string | { name: string; src?: string };
+  onUserClick?: () => void;
+  /** Unread count on the bell */
+  notifications?: number;
+  onNotifications?: () => void;
+  /** Shows the grip that opens an AppLauncher */
+  onApps?: () => void;
+  /** Replaces the AginiesLogo */
+  brand?: React.ReactNode;
+  /** Slot after the brand (breadcrumbs, a tenant switcher) */
+  left?: React.ReactNode;
+  labels?: { search?: string; searchHint?: string; notifications?: string; apps?: string; user?: string };
+}
+export declare function GlobalHeader(props: GlobalHeaderProps): JSX.Element;
+
+/** One sidebar item. */
+export interface NavItem { id: string; label: string; icon?: string; href?: string; /** Count badge; a dot when collapsed */ count?: number; countTone?: NavigationTone; disabled?: boolean; }
+/** A sidebar group with its mono eyebrow (build, observe, organisation). */
+export interface NavGroup { id?: string; label?: string; items: NavItem[]; }
+/** The console sidebar: 232px (56 collapsed; `width` or `resizable`), logo top-left, search, an optional tree slot, groups under mono eyebrows, 32px items with icon, label and count; product switcher at the bottom. */
+export interface VerticalNavigationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onResize' | 'width'> {
+  groups: NavGroup[];
+  active?: string;
+  onChange?: (id: string, item: NavItem) => void;
+  collapsed?: boolean;
+  /** Shows the collapse toggle */
+  onCollapse?: (collapsed: boolean) => void;
+  /** NavigationProduct name in the logo lockup */
+  product?: string;
+  /** Search trigger under the logo */
+  search?: { onClick?: () => void; label?: string; placeholder?: string; shortcut?: string };
+  /** Bottom slot: an AppLauncher trigger or the current product */
+  switcher?: React.ReactNode;
+  /** Bottom slot above the switcher: the tenant or the user */
+  footer?: React.ReactNode;
+  /** Slot between the search and the groups, scrolling with them: the folder/agent Tree. Hidden when collapsed */
+  tree?: React.ReactNode;
+  /** Expanded width (number = px): sets --sidebar-w on the element (default 232px from the token) */
+  width?: number | string;
+  /** Drag handle on the right edge (pointer, or ←/→ ±16px and Home/End when focused) */
+  resizable?: boolean;
+  /** Resize bounds in px (default 180 / 400) */
+  minWidth?: number;
+  maxWidth?: number;
+  /** Each new width while resizing; persist it and pass it back as width */
+  onResize?: (width: number) => void;
+  logoHref?: string;
+  /** Layout state. Omit it inside PageLayout, which sets it from its width: docked ≥ 1280, rail 1024–1279 (collapsed to 56px until the user expands it), overlay < 1024 (a drawer with a close button that closes when an item is chosen). Standalone default: docked */
+  mode?: 'docked' | 'rail' | 'overlay';
+  labels?: { search?: string; collapse?: string; expand?: string; navigation?: string; resize?: string; close?: string };
+}
+export declare function VerticalNavigation(props: VerticalNavigationProps): JSX.Element;
+
+/** One tab. */
+export interface TabItem { id: string; label: React.ReactNode; icon?: string; count?: number; disabled?: boolean; /** Panel content when the tab is active */ content?: React.ReactNode; /** Close button on this tab (needs onClose); overrides the Tabs-level closable */ closable?: boolean; }
+/** Tabs for views of one object: line (underline), pill (segmented), vertical (settings). Arrow keys move; each tab may carry a count. */
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onClose' | 'size'> {
+  items: TabItem[];
+  /** Controlled active id */
+  active?: string;
+  defaultActive?: string;
+  onChange?: (id: string, item: TabItem) => void;
+  variant?: 'line' | 'pill' | 'vertical';
+  size?: 'sm' | 'md';
+  /** Right side of the bar */
+  actions?: React.ReactNode;
+  /** Render the panel (default true); children show when the item has no content */
+  panel?: boolean;
+  panelClassName?: string;
+  /** Every tab closable (items can opt out with closable: false); needs onClose */
+  closable?: boolean;
+  /** Close request from the × button or Delete/Backspace on the focused tab; the consumer removes the item and picks the next active tab */
+  onClose?: (id: string, item: TabItem) => void;
+  labels?: { close?: string };
+}
+export declare function Tabs(props: TabsProps): JSX.Element;
+
+/** One top-navigation item. */
+export interface GlobalNavItem { id: string; label: React.ReactNode; icon?: string; href?: string; /** Count badge (signal on the active item unless countTone) */ count?: number; countTone?: NavigationTone; disabled?: boolean; }
+/** Horizontal top navigation for GlobalHeader shells: the product's sections in a row, the active one underlined in --signal, ←/→ between items, overflow into a More menu. Pages, not views of one object (that is Tabs). */
+export interface GlobalNavigationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+  items: GlobalNavItem[];
+  /** Id of the current section (aria-current="page") */
+  active?: string;
+  onChange?: (id: string, item: GlobalNavItem) => void;
+  /** Most items shown before the rest go into More (default: as many as fit the measured width) */
+  maxVisible?: number;
+  labels?: { navigation?: string; more?: string };
+}
+export declare function GlobalNavigation(props: GlobalNavigationProps): JSX.Element;
+
+/** Hierarchy trail above a page header; the last item is the current page. */
+export interface BreadcrumbsProps extends Omit<React.HTMLAttributes<HTMLElement>, 'max'> {
+  items: Array<{ label: React.ReactNode; href?: string; icon?: string; onClick?: (e: React.MouseEvent) => void }>;
+  /** Items shown before the middle collapses into an ellipsis (default 4) */
+  max?: number;
+  labels?: { nav?: string; more?: string };
+}
+export declare function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;
+
+/** Record stage path: chevron steps. Done in ok with a check, current in text, upcoming on panel-2. */
+export interface PathProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'step'> {
+  steps: Array<string | { id: string; label: string }>;
+  /** Id of the current stage */
+  current?: string;
+  /** Makes steps clickable */
+  onChange?: (id: string, step: { id: string; label: string }) => void;
+  /** Thin segment bar with a caption, for narrow spaces */
+  compact?: boolean;
+  /** The current stage is a terminal failure (closed, rejected) */
+  lost?: boolean;
+  labels?: { stage?: string; done?: string; current?: string; upcoming?: string; lost?: string };
+}
+export declare function Path(props: PathProps): JSX.Element;
+
+/** Numbered steps for a real sequence (wizard, deploy checklist): done, current, upcoming, error. Not for status that is not a sequence. */
+export interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLOListElement>, 'step'> {
+  steps: Array<string | { label: string; description?: React.ReactNode }>;
+  /** 0-based index of the current step */
+  current?: number;
+  /** Makes done, current and error steps clickable */
+  onStepClick?: (index: number, step: any) => void;
+  vertical?: boolean;
+  /** Indexes shown in bad with a warning glyph */
+  errorSteps?: number[];
+  labels?: { step?: string; done?: string; current?: string; upcoming?: string; error?: string; of?: string };
+}
+export declare function ProgressIndicator(props: ProgressIndicatorProps): JSX.Element;
+
+/** A SplitView list entry; extra fields pass through to renderItem. */
+export interface SplitViewItem { id: string; title?: React.ReactNode; subtitle?: React.ReactNode; meta?: React.ReactNode; icon?: string; [key: string]: any; }
+/** List + detail: a record list on the left (panel-w-lg, resizable), the selected record as children on the right. */
+export interface SplitViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'selected' | 'title'> {
+  items: SplitViewItem[];
+  selected?: string;
+  onSelect?: (item: SplitViewItem) => void;
+  renderItem?: (item: SplitViewItem, selected: boolean) => React.ReactNode;
+  title?: React.ReactNode;
+  count?: number;
+  headerActions?: React.ReactNode;
+  /** Initial list width (default --panel-w-lg 360) */
+  listWidth?: number | string;
+  minWidth?: number;
+  maxWidth?: number;
+  /** Divider drag and ← → (default true) */
+  resizable?: boolean;
+  /** Shows a toggle that hides the list */
+  collapsible?: boolean;
+  /** Width of the SplitView itself (a breakpoint name or px) below which list and detail stack: the list fills the pane and a picked record opens as a full pane with a back button. Default 'md' (768); false never stacks. Below 'lg' (1024) the list narrows to --panel-w */
+  stackBelow?: 'sm' | 'md' | 'lg' | 'xl' | number | false;
+  /** Pane shown first when stacked (default 'list') */
+  defaultStackedView?: 'list' | 'detail';
+  /** Called when the stacked pane changes */
+  onStackedViewChange?: (view: 'list' | 'detail') => void;
+  /** Called by the stacked detail's back button (after it returns to the list) */
+  onBack?: () => void;
+  labels?: { resize?: string; empty?: string; collapse?: string; expand?: string; back?: string };
+}
+export declare function SplitView(props: SplitViewProps): JSX.Element;
+
+/** NavigationProduct switcher: the seven boxed product glyphs with their names, the current one marked. */
+export interface AppLauncherProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Ids or { id, name, description, href } (default all seven) */
+  products?: Array<NavigationProduct | { id: NavigationProduct; name?: string; description?: string; href?: string }>;
+  current?: NavigationProduct;
+  onOpen?: (id: NavigationProduct, product: any) => void;
+  hrefs?: Partial<Record<NavigationProduct, string>>;
+  descriptions?: Partial<Record<NavigationProduct, string>>;
+  /** No popover frame (inside a sidebar footer) */
+  inline?: boolean;
+  labels?: { title?: string; current?: string };
+}
+export declare const AppLauncher: ((props: AppLauncherProps) => JSX.Element) & { Trigger: typeof AppLauncherTrigger };
+/** The sidebar's product-switcher row: current product glyph, name and an up-down chevron, styled as a nav item; opens an AppLauncher in a Popover. Also AppLauncher.Trigger. */
+export interface AppLauncherTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'name' | 'open'> {
+  /** Current product (default platform) */
+  product?: NavigationProduct;
+  /** Overrides the product name */
+  name?: string;
+  /** Lucide icon instead of the product glyph, for a surface that has none (the data console: "database") */
+  icon?: string;
+  /** Second line under the name: tenant and user ("Zurich · Ayşe Demir"); hidden when collapsed, kept in the tooltip */
+  meta?: React.ReactNode;
+  /** Icon only (inside a collapsed VerticalNavigation) */
+  collapsed?: boolean;
+  /** Whether the launcher is open (aria-expanded) */
+  open?: boolean;
+  labels?: { switchProduct?: string };
+}
+export declare function AppLauncherTrigger(props: AppLauncherTriggerProps): JSX.Element;
+
+/** The head of every console page: mono eyebrow naming the sidebar group, title, description, actions, optional meta row and tabs, back link. */
+export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+  /** The sidebar group: "Build", "Observe", "Organisation" */
+  eyebrow?: React.ReactNode;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** One primary at most */
+  actions?: React.ReactNode;
+  /** Row of Tags, SummaryDetail or small facts under the title */
+  meta?: React.ReactNode;
+  /** A Tabs element flush with the header's bottom */
+  tabs?: React.ReactNode;
+  /** true, a handler, or { label, href, onClick } */
+  back?: boolean | (() => void) | { label?: string; href?: string; onClick?: (e: React.MouseEvent) => void };
+  /** A BlockIcon or Avatar left of the title */
+  media?: React.ReactNode;
+  /** A Breadcrumbs element above */
+  breadcrumbs?: React.ReactNode;
+  labels?: { back?: string };
+  as?: any;
+}
+export declare function PageHeader(props: PageHeaderProps): JSX.Element;
+
+/** The agent builder's top bar: back, name, version tag, status Tag, Versions and the one primary Deploy. */
+export interface BuilderHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'name'> {
+  name: React.ReactNode;
+  /** Version tag ("v8") */
+  version?: string;
+  /** Status Tag: a word or { label, tone, dot, icon } */
+  status?: string | { label: string; tone?: NavigationTone; dot?: boolean; icon?: string };
+  onBack?: () => void;
+  backHref?: string;
+  onDeploy?: () => void;
+  deployDisabled?: boolean;
+  deploying?: boolean;
+  onVersions?: () => void;
+  onRename?: () => void;
+  saving?: boolean;
+  saved?: boolean;
+  /** Draft notice (true for the default text) */
+  draft?: boolean | string;
+  /** Extra actions before Versions */
+  actions?: React.ReactNode;
+  /** Slot after the name */
+  left?: React.ReactNode;
+  labels?: { back?: string; deploy?: string; versions?: string; saving?: string; saved?: string; draft?: string; rename?: string };
+}
+export declare function BuilderHeader(props: BuilderHeaderProps): JSX.Element;
+
+/** The one gradient in the system: a band in the ancestor's --text with a soft --signal radial glow, for login and welcome. Inside is a Room, so the content's tokens flip. */
+export interface BrandBandProps extends Omit<React.HTMLAttributes<HTMLElement>, 'height'> {
+  /** sm 160 · md 280 · lg 420 · full 100vh · or any CSS length */
+  height?: 'sm' | 'md' | 'lg' | 'full' | string;
+  /** Where the glow sits */
+  glow?: 'top-right' | 'top-left' | 'center' | 'bottom';
+  align?: 'start' | 'center' | 'end';
+  as?: any;
+}
+export declare function BrandBand(props: BrandBandProps): JSX.Element;
+
+/** One Accordion section. */
+export interface AccordionItem { id: string; label: React.ReactNode; content?: React.ReactNode; icon?: string; meta?: React.ReactNode; actions?: React.ReactNode; disabled?: boolean; }
+/** Stacked collapsible sections, one or many open. */
+export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'open'> {
+  items: AccordionItem[];
+  /** Several sections open at once */
+  multiple?: boolean;
+  defaultOpen?: string[];
+  /** Controlled open ids */
+  open?: string[];
+  onChange?: (ids: string[]) => void;
+  /** 1px line and radius-lg around the stack */
+  boxed?: boolean;
+}
+export declare function Accordion(props: AccordionProps): JSX.Element;
+/** One collapsible section with a hairline header; the record-layout section. */
+export interface ExpandableSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onToggle' | 'open' | 'title'> {
+  title: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onToggle?: (open: boolean) => void;
+  actions?: React.ReactNode;
+  count?: number;
+}
+export declare function ExpandableSection(props: ExpandableSectionProps): JSX.Element;
+
+/** One Carousel slide. */
+export interface CarouselSlide { title: React.ReactNode; description?: React.ReactNode; eyebrow?: React.ReactNode; icon?: string; media?: React.ReactNode; action?: React.ReactNode; }
+/** Cards one at a time with dots and arrows: onboarding tips, release notes. Arrow keys move; autoplay pauses on hover and respects reduced motion. */
+export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  slides: CarouselSlide[];
+  /** Controlled index */
+  index?: number;
+  defaultIndex?: number;
+  onChange?: (index: number) => void;
+  autoPlay?: boolean;
+  /** ms between slides (default 6000) */
+  interval?: number;
+  loop?: boolean;
+  labels?: { prev?: string; next?: string; goTo?: string; of?: string };
+}
+export declare function Carousel(props: CarouselProps): JSX.Element;
+
+/** One setup step. */
+export interface SetupStep { id?: string; title: React.ReactNode; description?: React.ReactNode; /** "2 min" */ time?: string; done?: boolean; optional?: boolean; /** A label (renders a Button) or a node */ action?: React.ReactNode | string; onAction?: () => void; href?: string; }
+/** Checklist of setup steps with progress; the next open step carries the one primary action. */
+export interface SetupAssistantProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+  /** Optional: without title and description only the progress shows in the head */
+  title?: React.ReactNode;
+  /** No border, ground or padding: inside a Card or widget that already frames it */
+  bare?: boolean;
+  description?: React.ReactNode;
+  steps: SetupStep[];
+  labels?: { progress?: string; done?: string; optional?: string };
+}
+export declare function SetupAssistant(props: SetupAssistantProps): JSX.Element;
+
+/** First-run card: brand pane on the left, first steps on the right. Render inside a modal or on the empty workspace. */
+export interface WelcomeMatProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  steps: Array<{ id?: string; title: React.ReactNode; description?: React.ReactNode; icon?: string; done?: boolean }>;
+  /** Makes open steps clickable */
+  onStep?: (step: any, index: number) => void;
+  footer?: React.ReactNode;
+  /** Shows a "Skip for now" link */
+  onSkip?: () => void;
+  /** Replaces the mark in the brand pane */
+  brand?: React.ReactNode;
+  labels?: { done?: string; skip?: string; progress?: string };
+}
+export declare function WelcomeMat(props: WelcomeMatProps): JSX.Element;
+
+/** 56px bottom bar for phones: up to five items, 44px targets, active in link colour. */
+export interface MobileTabBarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+  items: Array<{ id: string; label: string; icon: string; href?: string; /** Count or a short word */ badge?: number | string }>;
+  active?: string;
+  onChange?: (id: string, item: any) => void;
+  labels?: { navigation?: string };
+}
+export declare function MobileTabBar(props: MobileTabBarProps): JSX.Element;
+
+/** Page controls under a list: range text "1–25 of 312", page size, previous and next. */
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+  /** 1-based */
+  page?: number;
+  pageSize?: number;
+  total: number;
+  onChange?: (page: number) => void;
+  /** Shows the page-size select */
+  onPageSizeChange?: (size: number) => void;
+  pageSizes?: number[];
+  /** Range and arrows only */
+  compact?: boolean;
+  /** First and last buttons */
+  showEdges?: boolean;
+  /** Digit grouping locale */
+  locale?: string;
+  labels?: { of?: string; perPage?: string; prev?: string; next?: string; first?: string; last?: string; page?: string; pageSize?: string };
+}
+export declare function Pagination(props: PaginationProps): JSX.Element;
+
+/** Read-only step progress with done, current and upcoming states, horizontal or vertical. Shows where a run or rollout is; it does not navigate. */
+export interface StepperProps extends Omit<React.HTMLAttributes<HTMLOListElement>, 'size'> {
+  steps: Array<string | { label: string; description?: React.ReactNode; meta?: React.ReactNode; error?: boolean }>;
+  /** 0-based index of the step in progress */
+  current?: number;
+  vertical?: boolean;
+  size?: 'sm' | 'md';
+  errorSteps?: number[];
+  labels?: { done?: string; current?: string; upcoming?: string; error?: string; step?: string; of?: string };
+}
+export declare function Stepper(props: StepperProps): JSX.Element;
+
+// --- feedback ---
+/** The brand loader: the Aginies mark animated with CSS keyframes only. Use it wherever the product itself is working (boot, page data, an agent run); use Spinner for a single control. */
+export interface AginiesLoaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {
+  /** page = 96px full-viewport overlay with wordmark and label · region = 40px centred in its container (default) · inline = 16px inside a line of text */
+  tier?: 'page' | 'region' | 'inline';
+  /** orbit = ring turns once per --loader-spin, core counter-turns in eased quarters, crescent breathes · pulse = signal-soft halo beats per --loader-pulse · draw = ring draws over half a spin, then the core, then both fade */
+  variant?: 'orbit' | 'pulse' | 'draw';
+  /** Accessible text (and the visible label on the page tier); defaults to labels.loading */
+  label?: string;
+  /** Show the label visibly on region and inline tiers (page always shows it) */
+  showLabel?: boolean;
+  /** Visible strings: loading */
+  labels?: { loading?: string };
+}
+export declare function AginiesLoader(props: AginiesLoaderProps): JSX.Element;
+/** Content placeholder with a slow pulse while a region loads. Mirror the shape of what will appear; never more than one screen of it. */
+export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLElement>, 'height' | 'width'> {
+  /** text = a paragraph of lines (last one shorter) · line = one 10px bar · rect = a block · circle = an avatar */
+  shape?: 'text' | 'line' | 'rect' | 'circle';
+  /** Lines of a text skeleton (default 3) */
+  lines?: number;
+  width?: number | string;
+  height?: number | string;
+}
+export declare function Skeleton(props: SkeletonProps): JSX.Element;
+/** Whole-page placeholder: page header (eyebrow, title, action) and a table of rows. Render it in place of the page until its data arrives. */
+export interface PageSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Show the header block (default true) */
+  header?: boolean;
+  /** Table rows (default 6) */
+  rows?: number;
+  /** Table columns; the first is twice as wide (default 4) */
+  columns?: number;
+  /** Visible strings: loading (screen-reader text) */
+  labels?: { loading?: string };
+}
+export declare function PageSkeleton(props: PageSkeletonProps): JSX.Element;
+/** Inline alert inside a page, card or form: tone wash, icon, title, text, actions and optional dismiss. Says what happened and what to do next. */
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'icon' | 'title'> {
+  /** info · ok · warn · bad — bad gets role="alert" */
+  tone?: 'info' | 'ok' | 'warn' | 'bad';
+  /** Lucide name; defaults per tone (info, circle-check, triangle-alert, circle-alert) */
+  icon?: string;
+  title?: React.ReactNode;
+  /** The text; children */
+  children?: React.ReactNode;
+  /** Buttons or links rendered under the text */
+  actions?: React.ReactNode;
+  /** Shows the dismiss button */
+  onDismiss?: () => void;
+  /** Visible strings: dismiss */
+  labels?: { dismiss?: string };
+}
+export declare function Alert(props: AlertProps): JSX.Element;
+/** Default Lucide glyph per tone, as Alert uses it: info, circle-check, triangle-alert, circle-alert. */
+export declare const TONE_ICON: Record<"info" | "ok" | "warn" | "bad" | "neutral" | "signal", string>;
+/** Transient confirmation after an action, bottom-right, sliding 12px up. The platform uses ok and bad only; no sonner. */
+export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'action' | 'title'> {
+  tone?: 'ok' | 'bad' | 'info' | 'warn';
+  title?: React.ReactNode;
+  /** One line of detail */
+  children?: React.ReactNode;
+  /** One action (a link Button): "Undo", "View run" */
+  action?: React.ReactNode;
+  /** Shows the dismiss button; called on auto-dismiss too */
+  onDismiss?: () => void;
+  /** Auto-dismiss after ms when used without useToasts */
+  duration?: number;
+  labels?: { dismiss?: string };
+}
+export declare function Toast(props: ToastProps): JSX.Element;
+/** Fixed stack for toasts (z-toast). */
+export interface ToastContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Corner or edge; "static" is the same as static */
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'top-center' | 'bottom-center' | 'static';
+  /** Render in flow instead of fixed (docs, previews) */
+  static?: boolean;
+  /** Absolute inside the nearest positioned ancestor (a phone frame, a panel) instead of fixed to the viewport */
+  contained?: boolean;
+}
+export declare function ToastContainer(props: ToastContainerProps): JSX.Element;
+export interface ToastItem extends Omit<ToastProps, 'children' | 'onDismiss'> { id: string; /** Body text */ text?: React.ReactNode; }
+/** Toast queue: push() returns an id, at most `max` are live, the rest wait their turn; each auto-dismisses after `duration` ms (0 keeps it). */
+export declare function useToasts(options?: { duration?: number; max?: number }): { toasts: ToastItem[]; push: (toast: Omit<ToastItem, 'id'>) => string; dismiss: (id: string) => void; clear: () => void };
+/** In-context notice at the top of a card, form or section: one line and an optional action. Not page-wide and not dismissable. */
+export interface ScopedNotificationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'action' | 'icon'> {
+  tone?: 'neutral' | 'info' | 'ok' | 'warn' | 'bad';
+  /** Lucide name; defaults per tone */
+  icon?: string;
+  children?: React.ReactNode;
+  /** A link Button on the right */
+  action?: React.ReactNode;
+}
+export declare function ScopedNotification(props: ScopedNotificationProps): JSX.Element;
+/** One in-app notification row: unread dot, initials avatar or icon tile, title, message, time. */
+export interface NotificationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'icon' | 'title'> {
+  title: React.ReactNode;
+  message?: React.ReactNode;
+  /** Short relative or clock time: "5 min", "09:41" */
+  time?: string;
+  unread?: boolean;
+  /** Person's name; rendered as initials */
+  avatar?: string;
+  /** Lucide name for a system notification (default bell) */
+  icon?: string;
+  /** The object it concerns, in mono: "run_7f3a" */
+  object?: string;
+  /** Makes the row a button */
+  onClick?: () => void;
+  as?: any;
+  /** Screen-reader word after an unread title (default "unread") */
+  labels?: { unread?: string };
+}
+export declare function Notification(props: NotificationProps): JSX.Element;
+export interface NotificationListItem extends NotificationProps { id?: string; /** Group label; overrides date */ day?: string; /** Date used to group into Today / Yesterday / dd.mm.yyyy */ date?: string | Date; }
+/** The bell panel: titled list of notifications grouped by day with "Mark all as read". */
+export interface NotificationListProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+  title?: React.ReactNode;
+  items?: NotificationListItem[];
+  /** Extra rows after the groups */
+  children?: React.ReactNode;
+  onMarkAll?: () => void;
+  /** Locale for the day labels (default tr-TR) */
+  locale?: string;
+  /** No floating frame (shadow, border, 360px width, body max-height): inside a Card or dashboard widget */
+  bare?: boolean;
+  /** Show the title row with the count and Mark all (default true) */
+  header?: boolean;
+  /** Visible strings: title, markAll, today, yesterday, empty; unread is the screen-reader word on unread rows */
+  labels?: { title?: string; markAll?: string; today?: string; yesterday?: string; empty?: string; unread?: string };
+}
+export declare function NotificationList(props: NotificationListProps): JSX.Element;
+/** Modal dialog over an --overlay scrim: header with title and close, scrollable body, footer with the actions. Traps focus, restores it on close, closes on Esc, locks page scroll. */
+export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClose' | 'open' | 'size' | 'title'> {
+  /** Renders nothing while false */
+  open: boolean;
+  onClose?: () => void;
+  title?: React.ReactNode;
+  /** One line under the title (aria-describedby) */
+  description?: React.ReactNode;
+  /** sm 400 · md 560 · lg 800 · full = viewport minus 24px */
+  size?: 'sm' | 'md' | 'lg' | 'full';
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  hideClose?: boolean;
+  /** Clicking the scrim closes (default true) */
+  scrimClose?: boolean;
+  bodyClassName?: string;
+  labels?: { close?: string };
+}
+export declare function Modal(props: ModalProps): JSX.Element | null;
+/** Confirm dialog: a question as the title, the consequence spelled out, Cancel and one confirming action (solid destructive when tone is bad). */
+export interface PromptProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'icon' | 'onClose' | 'open' | 'title'> {
+  open: boolean;
+  onClose?: () => void;
+  onConfirm?: () => void;
+  /** A question: "Delete this agent?" */
+  title: React.ReactNode;
+  /** What happens */
+  children?: React.ReactNode;
+  /** The spelled-out side effect in a tone wash: "…and 14 related runs will be deleted." */
+  consequence?: React.ReactNode;
+  /** bad = destructive · warn (default) · info · ok */
+  tone?: 'bad' | 'warn' | 'info' | 'ok';
+  icon?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** Confirm button shows a spinner and both are disabled */
+  loading?: boolean;
+  labels?: { confirm?: string; cancel?: string };
+}
+export declare function Prompt(props: PromptProps): JSX.Element | null;
+/** Dialog behaviour hook shared by Modal and Prompt: Esc, focus trap, focus restore, scroll lock. */
+export declare function useDialog(open: boolean, onClose: (() => void) | undefined, ref: React.RefObject<HTMLElement>, options?: { lockScroll?: boolean; autoFocus?: boolean }): void;
+/** Non-modal layer anchored to a trigger: header, body, footer, 8 placements, optional arrow. Closes on outside click and Esc. */
+export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'open' | 'title' | 'width'> {
+  /** The element that toggles it; receives onClick, aria-expanded, aria-controls */
+  trigger?: React.ReactElement;
+  /** Controlled open state (previews render it open) */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+  /** Pointer toward the trigger (default false) */
+  arrow?: boolean;
+  title?: React.ReactNode;
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  /** Width in px (default 288) */
+  width?: number | string;
+  hideClose?: boolean;
+  /** Render the layer in flow without a trigger (docs) */
+  static?: boolean;
+  labels?: { close?: string };
+}
+export declare function Popover(props: PopoverProps): JSX.Element;
+/** Short hint on hover or focus, 12px mono on a --text ground. Max two lines, never an action; kbd shows the shortcut. */
+export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLElement>, 'content' | 'open'> {
+  content: React.ReactNode;
+  /** Keyboard shortcut shown after the text: "⌘K" */
+  kbd?: string;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  /** Delay before showing, ms (default 400) */
+  delay?: number;
+  /** Force open (previews) */
+  open?: boolean;
+  /** Exactly one focusable element */
+  children: React.ReactElement;
+}
+export declare function Tooltip(props: TooltipProps): JSX.Element;
+/** Generic activity spinner with a --link stroke. For a control or a small region; AginiesLoader is the brand loader. */
+export interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label' | 'size'> {
+  /** xs 12 · sm 16 · md 20 · lg 32 */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /** signal (link) · neutral (text-2) · inverse (on a signal fill) */
+  tone?: 'signal' | 'neutral' | 'inverse';
+  /** Visible text beside it */
+  label?: string;
+  /** Overlay the nearest positioned parent with a panel wash */
+  cover?: boolean;
+  labels?: { loading?: string };
+}
+export declare function Spinner(props: SpinnerProps): JSX.Element;
+/** Linear progress: determinate or indeterminate, label left, value right in mono. The tone says what the bar means. */
+export interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'label' | 'max' | 'size' | 'value'> {
+  value?: number;
+  max?: number;
+  indeterminate?: boolean;
+  tone?: 'signal' | 'ok' | 'warn' | 'bad' | 'neutral';
+  /** Track height: sm 4 · md 6 · lg 10 */
+  size?: 'sm' | 'md' | 'lg';
+  label?: React.ReactNode;
+  showValue?: boolean;
+  /** Replaces the percentage: "7 / 12 steps" */
+  valueText?: string;
+  labels?: { working?: string };
+}
+export declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+/** Circular progress with the value in the centre set like a stat, and a mono label under it. */
+export interface ProgressRingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'label' | 'max' | 'size' | 'value'> {
+  value?: number;
+  max?: number;
+  /** Diameter in px (default 64) */
+  size?: number;
+  strokeWidth?: number;
+  tone?: 'signal' | 'ok' | 'warn' | 'bad' | 'neutral';
+  showValue?: boolean;
+  /** Replaces the percentage in the centre: "4.6" */
+  valueText?: string;
+  /** Mono label under the ring */
+  label?: React.ReactNode;
+  /** Custom centre content */
+  children?: React.ReactNode;
+}
+export declare function ProgressRing(props: ProgressRingProps): JSX.Element;
+/** Right-docked panel (inspector, artifact, conversation): header with eyebrow, title and close; tabs slot; scrolling body; footer. overlay slides over the page at z-panel; docked sits in the layout. */
+export interface SidePanelProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClose' | 'open' | 'size' | 'title' | 'width'> {
+  /** Renders nothing while false (default true) */
+  open?: boolean;
+  /** Shows the close button; Esc closes in overlay mode */
+  onClose?: () => void;
+  title?: React.ReactNode;
+  /** Mono eyebrow above the title: "Block · HTTP request" */
+  eyebrow?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  /** A Tabs row under the header */
+  tabs?: React.ReactNode;
+  /** Icon buttons beside the close */
+  actions?: React.ReactNode;
+  footer?: React.ReactNode;
+  /** md = --panel-w 288 · lg = --panel-w-lg 360 */
+  size?: 'md' | 'lg';
+  /** Any width (number = px), overriding size: a 600px trace inspector, "40vw" */
+  width?: number | string;
+  /** docked sits in the layout (inside PageLayout, a SidePanel with no mode is docked); overlay (default) is a modal sheet from the right: scrim, focus moved in and kept inside, Esc and scrim click call onClose, focus restored */
+  mode?: 'overlay' | 'docked';
+  /** Overlay only: the --overlay scrim behind the sheet (default true) */
+  scrim?: boolean;
+  children?: React.ReactNode;
+  labels?: { close?: string };
+}
+export declare function SidePanel(props: SidePanelProps): JSX.Element | null;
+/** Bottom sheet for phones and narrow frames: scrim, a panel rising from the bottom with radius-2xl top corners, a grab handle, title, scrolling body and footer; focus trapped and restored, Esc and the scrim close it. */
+export interface SheetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClose' | 'open' | 'title'> {
+  /** Renders nothing while false */
+  open?: boolean;
+  /** Esc, the scrim and the close button call it */
+  onClose?: () => void;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  /** Actions, stacked full-width at 44px (primary first) */
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  hideClose?: boolean;
+  /** Clicking the scrim closes (default true) */
+  scrimClose?: boolean;
+  /** Absolute inside the nearest positioned ancestor (a phone frame) instead of fixed to the viewport; no body scroll lock */
+  contained?: boolean;
+  /** Default 85% of the frame */
+  maxHeight?: number | string;
+  labels?: { close?: string };
+}
+export declare function Sheet(props: SheetProps): JSX.Element | null;
+/** Bottom-docked floating composer for a note, e-mail or draft: header with minimise and close, body, toolbar on the left, actions on the right. */
+export interface DockedComposerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'icon' | 'onClose' | 'title'> {
+  title: React.ReactNode;
+  /** Lucide name in the header (default pen-line) */
+  icon?: string;
+  /** Controlled minimised state */
+  minimized?: boolean;
+  defaultMinimized?: boolean;
+  onMinimize?: (minimized: boolean) => void;
+  onClose?: () => void;
+  /** Icon buttons on the left of the footer */
+  toolbar?: React.ReactNode;
+  /** Buttons on the right of the footer */
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  side?: 'right' | 'left';
+  /** Render in flow (docs) */
+  static?: boolean;
+  labels?: { minimize?: string; restore?: string; close?: string };
+}
+export declare function DockedComposer(props: DockedComposerProps): JSX.Element;
+/** Bottom bar of utilities (history, notes, chat) for the service console; the active one opens its panel above the bar. */
+export interface DockedUtilityBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  items: { id: string; label: string; icon?: string; badge?: number | string }[];
+  active?: string | null;
+  /** Called with the id, or null when the active item is pressed again */
+  onChange?: (id: string | null) => void;
+  /** Content of the open panel */
+  panel?: React.ReactNode;
+  static?: boolean;
+  labels?: { utilities?: string };
+}
+export declare function DockedUtilityBar(props: DockedUtilityBarProps): JSX.Element;
+/** Post composer for a feed or a record's notes: avatar, textarea that expands on focus, attach and mention tools, one submit (⌘/Ctrl+Enter). */
+export interface PublisherProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'onSubmit' | 'placeholder' | 'value'> {
+  /** The author; initials are shown */
+  user?: string | { name?: string };
+  placeholder?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+  onAttach?: () => void;
+  onMention?: () => void;
+  submitLabel?: string;
+  /** Force the expanded state */
+  expanded?: boolean;
+  labels?: { placeholder?: string; submit?: string; attach?: string; mention?: string };
+}
+export declare function Publisher(props: PublisherProps): JSX.Element;
+/** Empty region: an illustration or a boxed icon, an h4 title, one line of text and at most two actions. compact for tables and lists. */
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'action' | 'icon' | 'title'> {
+  /** Custom illustration node (takes precedence) */
+  illustration?: React.ReactNode;
+  /** Lucide name in a 44px signal-soft box */
+  icon?: string;
+  /** Product glyph instead of a Lucide icon */
+  product?: 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+  title?: React.ReactNode;
+  /** The text */
+  children?: React.ReactNode;
+  /** Primary Button */
+  action?: React.ReactNode;
+  /** Secondary Button or link */
+  secondary?: React.ReactNode;
+  /** Horizontal, smaller: inside a table or list */
+  compact?: boolean;
+}
+export declare function EmptyState(props: EmptyStateProps): JSX.Element;
+
+// --- chat ---
+/** Scroll container of a conversation (platform logs, QA transcripts, hosted chat, the Contact desk): messages, events and dividers, newest at the bottom. Sticks to the bottom as children change. */
+export interface ChatThreadProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  /** Scroll to the bottom whenever children change (default true) */
+  stickToBottom?: boolean;
+  /** Which side the user's bubbles sit on: start (customer on the left, as in the desk) or end (hosted chat, where the viewer is the user) */
+  userSide?: 'start' | 'end';
+  maxHeight?: number | string;
+  labels?: { thread?: string };
+}
+export declare function ChatThread(props: ChatThreadProps): JSX.Element;
+/** Day separator ("Today", "15.10.2026") or the "New messages" line. */
+export interface ChatDividerProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'day' | 'new';
+  /** The label; "new" defaults to labels.newMessages */
+  children?: React.ReactNode;
+  labels?: { newMessages?: string };
+}
+export declare function ChatDivider(props: ChatDividerProps): JSX.Element;
+export type ChatRole = 'user' | 'agent' | 'human-agent' | 'system';
+export type ChatDelivery = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+export interface ChatAction { label: string; value?: string; icon?: string; variant?: 'neutral' | 'primary' | 'outline' | 'ghost'; }
+export interface ChatStructured {
+  /** Row of reply buttons */
+  buttons?: ChatAction[];
+  /** Horizontal cards with title, text, image and actions */
+  cards?: { title: React.ReactNode; text?: React.ReactNode; image?: string; imageAlt?: string; actions?: ChatAction[] }[];
+  /** A small table */
+  table?: { columns: React.ReactNode[]; rows: React.ReactNode[][] };
+  /** One image with a caption */
+  image?: { src: string; alt?: string; caption?: React.ReactNode };
+}
+export interface ChatSource { label: string; href?: string; icon?: string; }
+/** One message in a thread: name line above (11px semibold), bubble, time and delivery ticks below; markdown body; structured replies, sources and tool calls under the bubble. */
+export interface ChatMessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'action' | 'name' | 'role'> {
+  /** user = the customer · agent = the bot (agent icon tile) · human-agent = a person at the desk (initials) · system = centred note */
+  role?: ChatRole;
+  /** Name line; agents default to labels.agent */
+  name?: React.ReactNode;
+  /** Clock time under the bubble */
+  time?: string;
+  /** Delivery tick: clock / check / check-check; read is link-coloured; failed is bad with a word */
+  status?: ChatDelivery;
+  /** Person's name for initials, or a node */
+  avatar?: React.ReactNode;
+  /** A string renders as markdown (headings, bold, italic, inline and fenced code, lists, links, tables, blockquote); nodes render as given */
+  children?: React.ReactNode;
+  /** Set false to show a string verbatim */
+  markdown?: boolean;
+  structured?: ChatStructured;
+  sources?: ChatSource[];
+  /** Collapsible ToolCallCards under the message */
+  tools?: ToolCallCardProps[];
+  /** Shows a cursor (or the busy dots while empty) */
+  streaming?: boolean;
+  /** Called with the value of a structured button or card action */
+  onAction?: (value: string, action: ChatAction) => void;
+  labels?: { sending?: string; sent?: string; delivered?: string; read?: string; failed?: string; sources?: string; tools?: string; tool?: string; agent?: string };
+}
+export declare function ChatMessage(props: ChatMessageProps): JSX.Element;
+/** Markdown renderer used inside ChatMessage. Never renders raw HTML. */
+export interface ChatMarkdownProps extends React.HTMLAttributes<HTMLDivElement> { source: string; }
+export declare function ChatMarkdown(props: ChatMarkdownProps): JSX.Element;
+export declare function parseBlocks(source: string): any[];
+export declare function renderInline(text: string): React.ReactNode[];
+export type ChatEventKind = 'handoff-requested' | 'handoff-accepted' | 'closed' | 'call-started' | 'call-ended' | 'approval' | 'info';
+/** Centred event pill in a thread: handoff requested / accepted, closed, call started / ended, approval. Warn tone for things a person must act on. */
+export interface ChatEventProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'icon'> {
+  kind?: ChatEventKind;
+  /** Overrides the kind's tone */
+  tone?: 'neutral' | 'info' | 'ok' | 'warn' | 'bad';
+  /** Overrides the kind's Lucide icon */
+  icon?: string;
+  time?: string;
+  /** The text; defaults to the kind's label */
+  children?: React.ReactNode;
+}
+export declare function ChatEvent(props: ChatEventProps): JSX.Element;
+export declare const EVENT_KINDS: Record<ChatEventKind, { icon: string; tone: string; label: string }>;
+/** Row of suggested prompts as chips; picking one sends it or fills the composer. */
+export interface ChatSuggestionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: (string | { label: string; value?: string; icon?: string })[];
+  onPick?: (value: string, item: { label: string; value?: string; icon?: string }) => void;
+  /** One scrolling row instead of wrapping */
+  row?: boolean;
+  labels?: { suggestions?: string };
+}
+export declare function ChatSuggestions(props: ChatSuggestionsProps): JSX.Element;
+export interface ChatFile { name: string; size?: number; }
+/** The chat input: auto-growing textarea (Enter sends, Shift+Enter breaks), attach with limits, dictation and hands-free voice, send or stop while streaming, and a model footnote. */
+export interface ChatComposerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'disabled' | 'onChange' | 'placeholder' | 'value'> {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onSend?: (value: string, files: ChatFile[]) => void;
+  /** Stop button replaces send while streaming */
+  onStop?: () => void;
+  streaming?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  /** Show the attach button (default true) */
+  attach?: boolean;
+  /** Default 5 */
+  maxFiles?: number;
+  /** Bytes; default 10 MB */
+  maxFileSize?: number;
+  /** Attached files shown as chips */
+  files?: ChatFile[];
+  onAttach?: (files: File[]) => void;
+  onRemoveFile?: (file: ChatFile, index: number) => void;
+  /** off hides the voice buttons; idle / listening / speaking show their state */
+  voice?: 'off' | 'idle' | 'listening' | 'speaking';
+  onDictate?: () => void;
+  onHandsFree?: () => void;
+  /** Line under the box (mono, mute, centred): text or any node — a caution with a link, a context meter */
+  footnote?: React.ReactNode;
+  /** Nodes in the bar after attach and voice: a model picker, a mode Select, a context chip */
+  toolbar?: React.ReactNode;
+  /** Row inside the box above the files and textarea: a context bar (open file, selected run, @mentions) */
+  header?: React.ReactNode;
+  /** Rows before the textarea scrolls (default 8) */
+  maxRows?: number;
+  labels?: { placeholder?: string; send?: string; stop?: string; attach?: string; attachHint?: string; dictate?: string; handsFree?: string; listening?: string; speaking?: string; remove?: string; tooMany?: string; tooLarge?: string };
+}
+export declare function ChatComposer(props: ChatComposerProps): JSX.Element;
+/** One tool call: name in mono, status tag, duration; opens to the input and output JSON. */
+export interface ToolCallCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'name' | 'onToggle' | 'open' | 'summary'> {
+  id?: string;
+  name: string;
+  status?: 'running' | 'ok' | 'bad' | 'pending';
+  /** ms (formatted) or a preformatted string */
+  duration?: number | string;
+  /** Object (pretty-printed) or string */
+  input?: any;
+  output?: any;
+  /** One line shown in the header */
+  summary?: React.ReactNode;
+  /** Controlled open state */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onToggle?: (open: boolean) => void;
+  locale?: string;
+  labels?: { input?: string; output?: string; running?: string; ok?: string; bad?: string; pending?: string };
+}
+export declare function ToolCallCard(props: ToolCallCardProps): JSX.Element;
+/** ms → "420 ms", "1,2 s", "2:05" */
+export declare function formatDuration(ms: number, locale?: string): string;
+/** Busy dots and a shining "Thinking…" while the agent streams; reduced motion stops both. */
+export interface StreamingIndicatorProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {
+  label?: React.ReactNode;
+  dots?: boolean;
+  inline?: boolean;
+  labels?: { thinking?: string };
+}
+export declare function StreamingIndicator(props: StreamingIndicatorProps): JSX.Element;
+export interface TranscriptTurn { id?: string | number; n?: number; speaker?: 'agent' | 'customer' | 'system'; name?: string; time?: string; text: React.ReactNode; latencyMs?: number; flagged?: boolean; note?: React.ReactNode; }
+export interface TranscriptVerdict { tone?: 'ok' | 'bad' | 'warn' | 'neutral'; label: React.ReactNode; score?: React.ReactNode; summary?: React.ReactNode; dimensions?: { name: string; pass: boolean }[]; }
+/** Read-only transcript of a run or a call: numbered turns with speaker, time, latency and text, and an optional judge verdict strip. Used in Logs and QA. */
+export interface TranscriptPanelProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'selected' | 'title'> {
+  title?: React.ReactNode;
+  /** Mono line on the right of the title: run id, duration */
+  meta?: React.ReactNode;
+  turns: TranscriptTurn[];
+  verdict?: TranscriptVerdict;
+  /** Selected turn id (or number) */
+  selected?: string | number;
+  /** Makes turns buttons */
+  onSelect?: (id: string | number, turn: TranscriptTurn) => void;
+  /** Scroll height of the turn list (default 420) */
+  maxHeight?: number | string;
+  locale?: string;
+  labels?: { agent?: string; customer?: string; system?: string; judge?: string; latency?: string; flagged?: string; empty?: string };
+}
+export declare function TranscriptPanel(props: TranscriptPanelProps): JSX.Element;
+
+// --- widgets ---
+export type RunStatusValue = 'queued' | 'running' | 'paused' | 'completed' | 'failed' | 'cancelled' | 'pending' | 'claimed' | 'resuming' | 'resumed';
+export declare const RUN_STATUS: Record<RunStatusValue, { tone: string; icon: string; label: string; spin?: boolean }>;
+/** Status tag for a run — icon + word in the status tone — with an optional detail ("approval") and the time it has been so. Run vocabulary: queued · running · paused · completed · failed · cancelled; resume vocabulary: pending / paused warn, queued neutral, claimed / resuming signal, resumed / completed ok, failed bad. */
+export interface RunStatusProps extends Omit<React.HTMLAttributes<HTMLElement>, 'size'> {
+  status?: RunStatusValue;
+  /** Extra word after the status: "approval" for a paused run */
+  detail?: React.ReactNode;
+  /** Clock time or relative: "09:41", "4 min" */
+  since?: string;
+  size?: 'sm' | 'md';
+  /** Visible strings: since + one per status */
+  labels?: Partial<Record<RunStatusValue | 'since', string>>;
+}
+export declare function RunStatus(props: RunStatusProps): JSX.Element;
+export interface ApprovalField { key: string; label: string; type?: 'string' | 'number' | 'boolean' | 'json' | 'select'; value?: any; options?: (string | { value: string; label: string })[]; placeholder?: string; help?: React.ReactNode; required?: boolean; min?: number; max?: number; step?: number; }
+/** The human-in-the-loop card: why the agent stopped (warn), what it proposes, the approver's form (string, number, boolean, JSON, select) and Approve / Reject / Ask; queued, approved and rejected states. Designed for compact and comfortable density. */
+export interface ApprovalCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'value'> {
+  /** The agent's name: "Card debt payment" */
+  agent: React.ReactNode;
+  runId?: string;
+  tenant?: string;
+  /** "15.10.2026 09:41" */
+  requestedAt?: string;
+  requester?: string;
+  /** Why the agent stopped, in the warn card */
+  reason?: React.ReactNode;
+  /** What the agent proposes, as label/value rows (mono for ids and amounts) */
+  proposal?: { label: React.ReactNode; value: React.ReactNode; mono?: boolean }[];
+  /** The approver's form */
+  fields?: ApprovalField[];
+  /** Controlled field values by key */
+  values?: Record<string, any>;
+  onChange?: (key: string, value: any, values: Record<string, any>) => void;
+  status?: 'pending' | 'approved' | 'rejected' | 'queued';
+  /** Items ahead when queued: "Queued (2 ahead)" */
+  queuePosition?: number;
+  decidedBy?: string;
+  decidedAt?: string;
+  /** Each receives the current values */
+  onApprove?: (values: Record<string, any>) => void;
+  onReject?: (values: Record<string, any>) => void;
+  /** Shows the Ask button */
+  onAsk?: (values: Record<string, any>) => void;
+  /** approval (default); permission: a tool-permission prompt — Allow once (onApprove) · Always allow (onAlways) · Deny (onReject) — with no run-status chip */
+  variant?: 'approval' | 'permission';
+  /** Permission variant: "Always allow" */
+  onAlways?: (values: Record<string, any>) => void;
+  /** Replaces the default buttons while pending; each onClick receives the current values */
+  actions?: { id?: string; label: React.ReactNode; icon?: string; variant?: 'primary' | 'neutral' | 'success' | 'destructive' | 'destructive-text' | 'ghost' | 'outline'; disabled?: boolean; loading?: boolean; onClick?: (values: Record<string, any>) => void }[];
+  loading?: boolean;
+  compact?: boolean;
+  labels?: { allowOnce?: string; always?: string; deny?: string; eyebrow?: string; reason?: string; proposes?: string; decision?: string; approve?: string; reject?: string; ask?: string; queued?: string; ahead?: string; by?: string; pending?: string; approved?: string; rejected?: string };
+}
+export declare function ApprovalCard(props: ApprovalCardProps): JSX.Element;
+export interface RunStep { id?: string | number; name: React.ReactNode; /** Block type in mono: "HTTP request" */ kind?: string; /** ms from the run start */ start?: number; /** ms */ duration?: number; status?: RunStatusValue; tokens?: number; /** In the card's currency */ cost?: number; }
+/** The run replay: steps on a time scale with duration bars, status per step, tokens and cost; click a row to select it. */
+export interface RunTimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'selected' | 'step'> {
+  steps: RunStep[];
+  /** Scale length in ms; defaults to the last step's end. Tick labels thin to the scale column's measured width (1–4 intervals) */
+  total?: number;
+  selected?: string | number;
+  /** Makes rows buttons */
+  onSelect?: (id: string | number, step: RunStep) => void;
+  showCost?: boolean;
+  showTokens?: boolean;
+  locale?: string;
+  currency?: string;
+  labels?: { step?: string; time?: string; tokens?: string; cost?: string; total?: string };
+}
+export declare function RunTimeline(props: RunTimelineProps): JSX.Element;
+export interface TraceSpan { id?: string | number; name: string; /** Service or tool in a small tag */ service?: string; kind?: 'llm' | 'tool' | 'http' | 'workflow' | 'db' | 'other'; /** ms from the trace start */ start?: number; duration?: number; status?: 'ok' | 'bad'; children?: TraceSpan[]; }
+/** Trace viewer: nested spans as bars on one time scale (name, service or tool, duration, status), indented per depth; parents collapse. */
+export interface TraceSpansProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'selected' | 'span'> {
+  spans: TraceSpan[];
+  total?: number;
+  selected?: string | number;
+  onSelect?: (id: string | number, span: TraceSpan) => void;
+  locale?: string;
+  labels?: { spans?: string; collapse?: string; expand?: string; error?: string };
+}
+export declare function TraceSpans(props: TraceSpansProps): JSX.Element;
+export declare const SPAN_KINDS: string[];
+/** One run as a card: agent, trigger, status with since, started, duration, steps done of total, cost and tokens; stop, retry and open. */
+export interface AgentRunCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'selected'> {
+  agent: React.ReactNode;
+  product?: 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+  runId?: string;
+  tenant?: string;
+  trigger?: 'manual' | 'webhook' | 'schedule' | 'call' | 'chat' | 'api';
+  status?: RunStatusValue;
+  /** Passed to RunStatus */
+  since?: string;
+  /** "15.10.2026 09:41" */
+  started?: string;
+  /** ms or preformatted */
+  duration?: number | string;
+  steps?: { done: number; total: number };
+  cost?: number;
+  tokens?: number;
+  selected?: boolean;
+  /** Shown while queued, running or paused */
+  onStop?: () => void;
+  /** Shown when failed or cancelled */
+  onRetry?: () => void;
+  onOpen?: () => void;
+  locale?: string;
+  currency?: string;
+  labels?: { stop?: string; retry?: string; open?: string; duration?: string; steps?: string; cost?: string; tokens?: string; started?: string; manual?: string; webhook?: string; schedule?: string; call?: string; chat?: string; api?: string };
+}
+export declare function AgentRunCard(props: AgentRunCardProps): JSX.Element;
+/** Cost by scenario, unit or channel as horizontal bars with values; series colours --data-1…6 by index, or one signal colour. */
+export interface CostBarsProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'max'> {
+  items: { id?: string; label: React.ReactNode; /** Mono line under the label */ sub?: React.ReactNode; value: number; tokens?: number; tone?: 'ok' | 'warn' | 'bad' }[];
+  /** currency (₺ in every locale: narrowSymbol, as Amount) · tokens · percent · number */
+  unit?: 'currency' | 'tokens' | 'percent' | 'number';
+  currency?: string;
+  locale?: string;
+  /** Scale maximum; defaults to the largest value */
+  max?: number;
+  showValues?: boolean;
+  /** Token count under the value */
+  showTokens?: boolean;
+  /** index = --data-1…6 per row · single = --signal */
+  colorBy?: 'index' | 'single';
+  sort?: 'desc';
+  labels?: { costs?: string; tokens?: string };
+}
+export declare function CostBars(props: CostBarsProps): JSX.Element;
+/** The builder block card on the canvas: 250px, icon tile, name (two lines, then clipped) and kind, key/value rows, a state ring (selected / running / done / waiting / error / disabled), a warn "next step" tab, a hover action bar and ports on any side. */
+export interface CanvasBlockProps extends Omit<React.HTMLAttributes<HTMLElement>, 'icon' | 'name' | 'onSelect'> {
+  name: React.ReactNode;
+  /** Block type in mono: "LLM · understand" */
+  kind?: React.ReactNode;
+  /** Lucide name (default box) */
+  icon?: string;
+  /** Product glyph instead of a Lucide icon */
+  product?: 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+  rows?: { label: React.ReactNode; value: React.ReactNode; /** default true */ mono?: boolean }[];
+  /** done: ok border and circle-check; waiting: dashed border and circle-dashed (not reached yet); disabled: eye-off, dimmed */
+  state?: 'default' | 'selected' | 'running' | 'done' | 'waiting' | 'error' | 'disabled';
+  /** Text of the warn "next step" tab: "connect the output" */
+  next?: React.ReactNode;
+  /** Hover action bar (icon buttons) */
+  actions?: { icon: string; label: string; onClick?: (e: React.MouseEvent) => void; variant?: 'ghost' | 'destructive-text' }[];
+  /** true for the default side (in: left, out: right), a side name for vertical flows, false for none */
+  ports?: { in?: boolean | PortSide; out?: boolean | PortSide };
+  /** Makes the card a button */
+  onSelect?: (e: React.MouseEvent) => void;
+  labels?: { running?: string; error?: string; done?: string; waiting?: string; disabled?: string; next?: string };
+}
+export declare function CanvasBlock(props: CanvasBlockProps): JSX.Element;
+export type PortSide = 'top' | 'right' | 'bottom' | 'left';
+/** SVG helper for a connector between two blocks; render inside the consumer's <svg> or a Canvas's `edges`. Smooth-step path with rounded corners; the arrow follows the last segment. */
+export interface CanvasEdgeProps extends Omit<React.SVGAttributes<SVGGElement>, 'from' | 'label' | 'to'> {
+  from: { x: number; y: number };
+  to: { x: number; y: number };
+  /** Side the edge leaves the source port (default right) */
+  fromSide?: PortSide;
+  /** Side the edge enters the target port (default left); orients the arrow */
+  toSide?: PortSide;
+  state?: 'default' | 'active' | 'running' | 'deleted';
+  /** Corner radius (default 8) */
+  radius?: number;
+  /** Mono label at the midpoint */
+  label?: string;
+  arrow?: boolean;
+}
+export declare function CanvasEdge(props: CanvasEdgeProps): JSX.Element;
+export declare function smoothStepPath(x1: number, y1: number, x2: number, y2: number, r?: number, fromSide?: PortSide, toSide?: PortSide): string;
+/** The builder canvas: dotted grid on --canvas-bg, one transformed layer with absolutely positioned blocks and an SVG of edges; drag or wheel to pan, Ctrl/⌘-wheel or the controls to zoom, keyboard + − 0 and arrows. */
+export interface CanvasProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Blocks and notes, positioned with style left/top in canvas units */
+  children?: React.ReactNode;
+  /** CanvasEdge elements, drawn under the blocks in the same coordinates */
+  edges?: React.ReactNode;
+  /** Controlled zoom (1 = 100%) */
+  zoom?: number;
+  defaultZoom?: number;
+  onZoomChange?: (zoom: number) => void;
+  /** Controlled pan offset in px */
+  pan?: { x: number; y: number };
+  defaultPan?: { x: number; y: number };
+  onPanChange?: (pan: { x: number; y: number }) => void;
+  /** Default .25 */
+  minZoom?: number;
+  /** Default 2 */
+  maxZoom?: number;
+  /** Dotted 20px grid that scales and pans with the layer (default true) */
+  grid?: boolean;
+  /** Zoom out · percentage (resets) · zoom in, bottom-left (default true) */
+  controls?: boolean;
+  /** false: a static picture (no pan, zoom or focus) */
+  interactive?: boolean;
+  /** Unscaled nodes over the canvas: a minimap, a toolbar */
+  overlay?: React.ReactNode;
+  labels?: { canvas?: string; zoomIn?: string; zoomOut?: string; reset?: string };
+}
+export declare function Canvas(props: CanvasProps): JSX.Element;
+/** Sticky note on the canvas: title, free text, author and time. For the builder's remarks, not for configuration. */
+export interface CanvasNoteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'width'> {
+  title?: React.ReactNode;
+  children?: React.ReactNode;
+  author?: string;
+  time?: string;
+  tone?: 'warn' | 'neutral' | 'info';
+  width?: number | string;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  labels?: { edit?: string; delete?: string };
+}
+export declare function CanvasNote(props: CanvasNoteProps): JSX.Element;
+/** Contact desk queue item: channel, customer, last message, waiting time, SLA tag and the owner (bot, a person, or the queue). */
+export interface QueueCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'selected'> {
+  channel?: 'whatsapp' | 'voice' | 'web' | 'email';
+  customer: React.ReactNode;
+  phone?: string;
+  /** Last message, one line */
+  preview?: React.ReactNode;
+  /** "4 min", "12 sn" */
+  waiting?: string;
+  sla?: { tone?: 'ok' | 'warn' | 'bad' | 'neutral'; label: React.ReactNode };
+  owner?: { kind: 'bot' | 'agent' | 'queue'; name?: string };
+  /** Unread count */
+  unread?: number;
+  selected?: boolean;
+  /** Makes the row a button */
+  onClick?: () => void;
+  tenant?: string;
+  labels?: { waiting?: string; unread?: string; whatsapp?: string; voice?: string; web?: string; email?: string; bot?: string; agent?: string; queue?: string };
+}
+export declare function QueueCard(props: QueueCardProps): JSX.Element;
+/** A voice call: number and name, direction, live duration, state (ringing / in call / on hold / ended), waveform placeholder and answer / hold / transfer / hang up. */
+export interface CallCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'name'> {
+  number: string;
+  name?: React.ReactNode;
+  direction?: 'inbound' | 'outbound';
+  state?: 'ringing' | 'in-call' | 'on-hold' | 'ended';
+  /** Elapsed seconds at render */
+  seconds?: number;
+  /** Tick the timer every second while in call */
+  live?: boolean;
+  /** The person on the call */
+  agent?: string;
+  tenant?: string;
+  onAnswer?: () => void;
+  onDecline?: () => void;
+  onHold?: () => void;
+  onResume?: () => void;
+  onTransfer?: () => void;
+  onHangup?: () => void;
+  onCallBack?: () => void;
+  labels?: { answer?: string; decline?: string; hold?: string; resume?: string; transfer?: string; hangup?: string; callBack?: string; inbound?: string; outbound?: string; ringing?: string; 'in-call'?: string; 'on-hold'?: string; ended?: string };
+}
+export declare function CallCard(props: CallCardProps): JSX.Element;
+/** ₺1.250.000,00 in the locale */
+export declare function fmtMoney(value: number, locale?: string, currency?: string, digits?: number): string;
+export declare function fmtInt(value: number, locale?: string): string;
+/** seconds → "4:05" or "1:02:09" */
+export declare function fmtClock(seconds: number): string;
+
+// --- dashboard ---
+type DashboardProduct = 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+type DashboardTone = 'neutral' | 'signal' | 'ok' | 'warn' | 'bad' | 'info';
+
+/** Dashboard KPI: a Stat (value, label, delta) with a Sparkline in a flat Card. Use plain (or KpiRow) when the KPIs are the page summary, which is never boxed. */
+export interface KpiWidgetProps extends Omit<React.HTMLAttributes<HTMLElement>, 'icon' | 'label' | 'size' | 'value'> {
+  /** Mono uppercase label: "Runs this week" */
+  label: React.ReactNode;
+  /** Pre-formatted value in the locale: "12.840", "₺18.420,50" */
+  value: React.ReactNode;
+  /** Passed to Stat: a number (+12 → "+12%", dot decimals), a string, or { value, direction, unit, label } */
+  delta?: number | string | { value: number | string; direction?: 'up' | 'down' | 'flat'; unit?: string; label?: React.ReactNode };
+  /** Down is good (cost, latency, waiting approvals) */
+  invert?: boolean;
+  /** Mute line under the value */
+  sub?: React.ReactNode;
+  /** Lucide icon before the label */
+  icon?: string;
+  /** Sparkline values (two or more) */
+  spark?: number[];
+  /** Status colour for the sparkline instead of a data colour */
+  sparkTone?: 'ok' | 'warn' | 'bad';
+  /** Data colour index 1–6 for the sparkline (1) */
+  sparkColor?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Items of the options Menu (top-right ellipsis) */
+  menuItems?: any[];
+  onMenuSelect?: (item: any) => void;
+  /** No card: a cell of the page summary row */
+  plain?: boolean;
+  /** Stat size: sm 20 · md 32 · lg 44 */
+  size?: 'sm' | 'md' | 'lg';
+  /** Visible and accessible strings: options, trend */
+  labels?: { options?: string; trend?: string };
+}
+export declare function KpiWidget(props: KpiWidgetProps): JSX.Element;
+/** The page summary row: plain KpiWidgets side by side with hairlines between them. */
+export interface KpiRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'label'> {
+  items?: KpiWidgetProps[];
+  /** Accessible name of the group ("This week") */
+  label?: string;
+  /** Custom cells instead of items */
+  children?: React.ReactNode;
+}
+export declare function KpiRow(props: KpiRowProps): JSX.Element;
+
+/** A chart in a Card: title with its unit, a period SegmentedControl, an optional headline Stat, a MiniChart (line, area, bar or stacked bars) that measures its own width, with a legend, and the loading and empty states. */
+export interface ChartCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'data' | 'format' | 'height' | 'icon' | 'title' | 'type'> {
+  title: React.ReactNode;
+  /** Lucide icon before the title */
+  icon?: string;
+  /** Mono unit after the title: "₺", "runs", "ms", "%" */
+  unit?: string;
+  /** Period options; renders the SegmentedControl in the header */
+  periods?: (string | { label: string; value: string })[];
+  /** Controlled period */
+  period?: string;
+  /** Initial period when uncontrolled (default the first) */
+  defaultPeriod?: string;
+  onPeriodChange?: (value: string) => void;
+  /** stacked = MiniChart type="bar" with stacked: series bottom-up in data-1…6 order, 1px gap between segments, y from zero */
+  type?: 'line' | 'area' | 'bar' | 'stacked';
+  /** Up to six series, coloured data-1…6 in order */
+  series?: { name: string; values: number[] }[];
+  /** A single series (named after the title) */
+  data?: number[];
+  /** X-axis labels: "09.10", "Mon" */
+  categories?: string[];
+  /** Plot height in px (160) */
+  height?: number;
+  /** Formats values for the legend and the accessible description */
+  format?: (v: number) => string;
+  /** Legend with the last value per series (default true) */
+  legend?: boolean;
+  /** Stat props shown above the plot */
+  headline?: { label: React.ReactNode; value: React.ReactNode; delta?: any; invert?: boolean; sub?: React.ReactNode };
+  /** loading shows a skeleton; empty (or no values) the empty state */
+  state?: 'loading' | 'empty' | 'ready';
+  /** Mute line under the plot: source, price date */
+  footnote?: React.ReactNode;
+  /** Extra header controls after the periods */
+  actions?: React.ReactNode;
+  /** Card "View all" footer */
+  viewAll?: (() => void) | string;
+  /** Visible strings: period (accessible name), loading, empty, emptyHint */
+  labels?: { period?: string; loading?: string; empty?: string; emptyHint?: string };
+}
+export declare function ChartCard(props: ChartCardProps): JSX.Element;
+
+/** One task row. */
+export interface TaskItem { id: string | number; title: React.ReactNode; done?: boolean; /** Pre-formatted: "15.10.2026" */ due?: string; /** Past due; adds the word "Overdue" in bad */ overdue?: boolean; priority?: 'high' | 'medium' | 'low'; /** Owner's name (initials avatar) */ owner?: string; ownerKind?: 'person' | 'agent' | 'system'; /** Mono line: run or approval ids, the KB */ related?: React.ReactNode; }
+/** A checklist of tasks in a Card: Checkbox to complete, due date (overdue carries the word), owner Avatar, priority Tag, and an Add task action. */
+export interface TaskListWidgetProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onToggle' | 'title'> {
+  tasks: TaskItem[];
+  /** Called after the internal toggle */
+  onToggle?: (task: TaskItem, done: boolean) => void;
+  /** Makes titles buttons */
+  onOpen?: (task: TaskItem) => void;
+  /** Shows "Add task" in the header */
+  onAdd?: () => void;
+  title?: React.ReactNode;
+  /** Hide completed tasks */
+  hideDone?: boolean;
+  viewAll?: (() => void) | string;
+  labels?: { title?: string; add?: string; empty?: string; emptyHint?: string; overdue?: string; due?: string; high?: string; medium?: string; low?: string; viewAll?: string };
+}
+export declare function TaskListWidget(props: TaskListWidgetProps): JSX.Element;
+
+/** One claim the insight rests on. */
+export interface InsightEvidence { id?: string; text: React.ReactNode; /** Where it comes from: a run, a QA run, a KB article */ source?: string | { label: string; icon?: string; href?: string }; }
+/** An AI-generated recommendation in a Card: the sparkles "AI-generated" header with confidence and model, the insight, its evidence with sources, Apply / Dismiss and thumbs feedback. */
+export interface AiInsightWidgetProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+  /** The recommendation as a sentence */
+  title?: React.ReactNode;
+  /** The why, one or two sentences */
+  children?: React.ReactNode;
+  evidence?: InsightEvidence[];
+  /** 0–1, shown as "82% confidence" */
+  confidence?: number;
+  /** Model name: "Opus 5" */
+  model?: string;
+  /** "09:41", "15.10.2026" */
+  time?: string;
+  /** Controlled state; uncontrolled it follows Apply and Dismiss */
+  status?: 'open' | 'applied' | 'dismissed';
+  onApply?: () => void;
+  onDismiss?: () => void;
+  /** Overrides labels.apply: "Raise to 6 s" */
+  applyLabel?: string;
+  /** Controlled vote */
+  feedback?: 'up' | 'down' | null;
+  /** Called with the new vote, null when withdrawn */
+  onFeedback?: (vote: 'up' | 'down' | null) => void;
+  labels?: { generated?: string; evidence?: string; apply?: string; dismiss?: string; helpful?: string; yes?: string; no?: string; thanks?: string; applied?: string; dismissed?: string; confidence?: string };
+}
+export declare function AiInsightWidget(props: AiInsightWidgetProps): JSX.Element;
+
+/** An active filter shown as a Pill. */
+export interface ActiveFilter { key: string; label: React.ReactNode; icon?: string; }
+/** The filter row above a list or board: search Input, quick filter Chips, a "More filters" Menu, a saved views Combobox, and the active filters as removable Pills with Clear all. Every value is controlled or uncontrolled. */
+export interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  search?: string;
+  defaultSearch?: string;
+  onSearch?: (value: string) => void;
+  /** Quick filters (ChipGroup, multiple) */
+  chips?: (string | { label: React.ReactNode; value: string; icon?: string; count?: number | string })[];
+  chipValue?: string[];
+  defaultChipValue?: string[];
+  onChipChange?: (values: string[]) => void;
+  /** Menu items; picking one adds a Pill { key: value, label } */
+  moreFilters?: any[];
+  onMoreFilter?: (item: any) => void;
+  /** Controlled open state of the More filters menu (previews) */
+  moreOpen?: boolean;
+  onMoreOpenChange?: (open: boolean) => void;
+  /** Saved views (Combobox options) */
+  views?: (string | { label: string; value: string; meta?: string })[];
+  view?: string | null;
+  defaultView?: string | null;
+  onViewChange?: (value: string | null) => void;
+  /** Filters shown as Pills */
+  active?: ActiveFilter[];
+  defaultActive?: ActiveFilter[];
+  onActiveChange?: (filters: ActiveFilter[]) => void;
+  /** After Clear all has emptied search, chips and pills */
+  onClear?: () => void;
+  /** Controls at the right end of the row */
+  right?: React.ReactNode;
+  labels?: { search?: string; searchLabel?: string; filters?: string; more?: string; views?: string; active?: string; clear?: string; remove?: string };
+}
+export declare function FilterBar(props: FilterBarProps): JSX.Element;
+
+/** A record at a glance in a Card: avatar or BlockIcon, object eyebrow, title, status Tag, SummaryDetail key fields, the Path stage and quick actions. */
+export interface RecordSummaryWidgetProps extends Omit<React.HTMLAttributes<HTMLElement>, 'icon' | 'title'> {
+  /** Mono eyebrow: "Agent · Voice", "Case · WhatsApp" */
+  object?: React.ReactNode;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  /** Custom media node */
+  media?: React.ReactNode;
+  /** A person's name: renders a 40px Avatar */
+  avatar?: string;
+  /** Lucide icon for the BlockIcon (bot) */
+  icon?: string;
+  /** DashboardProduct glyph for the BlockIcon */
+  product?: DashboardProduct;
+  /** A word or { label, tone, dot, icon } */
+  status?: string | { label: React.ReactNode; tone?: DashboardTone; dot?: boolean; icon?: string };
+  /** SummaryDetail fields (dense) */
+  fields?: { key?: string; label: React.ReactNode; value?: React.ReactNode; mono?: boolean; tone?: 'ok' | 'warn' | 'bad' }[];
+  /** Path steps; omit for records without stages */
+  stages?: Array<string | { id: string; label: string }>;
+  /** Id of the current stage */
+  stage?: string;
+  /** Current stage is a terminal failure */
+  lost?: boolean;
+  /** Thin segment bar instead of chevrons (narrow columns) */
+  pathCompact?: boolean;
+  /** Small buttons: the first neutral, the rest ghost unless variant is given */
+  actions?: { label: string; icon?: string; variant?: string; onClick?: () => void; disabled?: boolean }[];
+  /** Shows the open button */
+  onOpen?: () => void;
+  /** Visible strings: open, stage, and path (Path labels) */
+  labels?: { open?: string; stage?: string; path?: { done?: string; current?: string; upcoming?: string; lost?: string } };
+}
+export declare function RecordSummaryWidget(props: RecordSummaryWidgetProps): JSX.Element;
+
+/** One person (or agent) and their load. */
+export interface WorkloadMember { id?: string; name: string; role?: string; kind?: 'person' | 'agent' | 'system'; status?: 'online' | 'busy' | 'away' | 'offline'; value: number; capacity: number; }
+/** People against their capacity in a Card: a ProgressBar per row, over capacity in warn with the word, and the count of who is over in the header. */
+export interface TeamWorkloadWidgetProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+  members: WorkloadMember[];
+  title?: React.ReactNode;
+  /** Unit after "7 / 8": "chats", "tasks" (labels.unit) */
+  unit?: string;
+  /** Ratio above which a row is over capacity (1) */
+  overAt?: number;
+  /** Makes names buttons */
+  onMember?: (m: WorkloadMember) => void;
+  viewAll?: (() => void) | string;
+  labels?: { title?: string; over?: string; overCount?: string; unit?: string; load?: string; viewAll?: string };
+}
+export declare function TeamWorkloadWidget(props: TeamWorkloadWidgetProps): JSX.Element;
+
+/** An ActivityTimeline in a Card with a type filter (all, runs, approvals, conversations, notes). */
+export interface ActivityWidgetProps extends Omit<React.HTMLAttributes<HTMLElement>, 'max' | 'title' | 'type'> {
+  /** ActivityTimeline items; kind decides which filter they fall under */
+  items: any[];
+  /** Custom filter options; kinds lists the item kinds each one shows (none = all) */
+  types?: { label: string; value: string; kinds?: string[] }[];
+  type?: string;
+  defaultType?: string;
+  onTypeChange?: (value: string) => void;
+  title?: React.ReactNode;
+  /** Items shown after filtering */
+  max?: number;
+  /** Compact timeline (default true) */
+  compact?: boolean;
+  viewAll?: (() => void) | string;
+  labels?: { title?: string; filter?: string; all?: string; runs?: string; approvals?: string; conversations?: string; notes?: string; empty?: string; emptyHint?: string; viewAll?: string; show?: string; hide?: string };
+}
+export declare function ActivityWidget(props: ActivityWidgetProps): JSX.Element;
+
+/** One action tile. */
+export interface QuickAction { id?: string; label: string; icon?: string; product?: DashboardProduct; description?: string; /** Kbd hint: ["⌘", "N"] or "G L" (the consumer binds the keys) */ shortcut?: string | string[]; tone?: DashboardTone; badge?: number; disabled?: boolean; onClick?: (a: QuickAction) => void; }
+/** A grid of action tiles (BlockIcon, label, optional line, Kbd hint, badge) for the shortcuts people take most; inside a Card when titled. */
+export interface QuickActionsProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+  actions: QuickAction[];
+  onAction?: (a: QuickAction) => void;
+  /** Fixed columns instead of auto-fill */
+  columns?: number;
+  /** Minimum tile width for auto-fill (168) */
+  minTile?: number;
+  /** Wraps the grid in a Card with this title */
+  title?: React.ReactNode;
+  /** Accessible name when untitled */
+  labels?: { title?: string };
+}
+export declare function QuickActions(props: QuickActionsProps): JSX.Element;
+
+/** The NotificationList in a flat Card: grouped by day, unread count, Mark all as read and View all. Read state is tracked inside. */
+export interface NotificationsWidgetProps extends Omit<React.HTMLAttributes<HTMLElement>, 'max' | 'title'> {
+  /** NotificationList items (title, message, time, unread, avatar or icon, object, day or date) */
+  items: any[];
+  title?: React.ReactNode;
+  onMarkAll?: () => void;
+  /** Makes rows buttons and marks the row read */
+  onItem?: (item: any) => void;
+  max?: number;
+  /** Day labels locale (tr-TR) */
+  locale?: string;
+  viewAll?: (() => void) | string;
+  labels?: { title?: string; markAll?: string; today?: string; yesterday?: string; empty?: string; viewAll?: string };
+}
+export declare function NotificationsWidget(props: NotificationsWidgetProps): JSX.Element;
+
+/** One step of the mini canvas. */
+export interface FlowStep { id?: string; name: React.ReactNode; /** Block type in mono: "LLM · understand" */ kind?: React.ReactNode; icon?: string; product?: DashboardProduct; /** done · running (execution ring) · error · waiting (warn ring, human approval) · upcoming (dashed) */ state?: 'done' | 'running' | 'error' | 'waiting' | 'upcoming'; /** Runs at or through this step */ runs?: number; }
+/** A read-only mini canvas in a Card: three to six CanvasBlocks in a row joined by CanvasEdges, the running step ringed in execution, a caption per step saying where the live runs are. */
+export interface AgentFlowWidgetProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+  agent?: React.ReactNode;
+  /** Replaces the agent name in the header */
+  title?: React.ReactNode;
+  steps: FlowStep[];
+  /** Live runs Tag in the header */
+  liveRuns?: number;
+  /** Mono version after the name: "v8" */
+  version?: string;
+  /** Block width in px (160); the strip scrolls sideways when it does not fit */
+  blockWidth?: number;
+  /** Edge length in px (24) */
+  gap?: number;
+  /** Shows "Open in builder" */
+  onOpen?: () => void;
+  labels?: { flow?: string; done?: string; running?: string; error?: string; waiting?: string; upcoming?: string; live?: string; liveOne?: string; open?: string };
+}
+export declare function AgentFlowWidget(props: AgentFlowWidgetProps): JSX.Element;
+
+/** One ranked row. */
+export interface LeaderRow { id?: string; name: string; sub?: React.ReactNode; kind?: 'agent' | 'person' | 'system'; product?: DashboardProduct; icon?: string; value: number; /** Change since the last period, in the value's unit */ delta?: number; }
+/** Ranked rows in a Card: an agent or a person, a bar against the leader, the value and the change since the last period; optional period switch. */
+export interface LeaderboardWidgetProps extends Omit<React.HTMLAttributes<HTMLElement>, 'format' | 'max' | 'title'> {
+  rows: LeaderRow[];
+  title?: React.ReactNode;
+  /** Value column header: "Resolved" */
+  metric?: React.ReactNode;
+  periods?: (string | { label: string; value: string })[];
+  period?: string;
+  defaultPeriod?: string;
+  onPeriodChange?: (v: string) => void;
+  format?: (v: number) => string;
+  deltaFormat?: (v: number) => string;
+  /** Lower is better: sorts ascending and greens a fall */
+  invert?: boolean;
+  /** id or name of the row to tint (you, the agent on screen) */
+  highlight?: string;
+  max?: number;
+  /** Sort by value (default true) */
+  sort?: boolean;
+  viewAll?: (() => void) | string;
+  labels?: { title?: string; period?: string; name?: string; value?: string; change?: string; up?: string; down?: string; flat?: string; viewAll?: string };
+}
+export declare function LeaderboardWidget(props: LeaderboardWidgetProps): JSX.Element;
+
+/** A CalendarView event with the agenda's extra fields. */
+export interface AgendaEvent { id?: string | number; title: string; start: Date | string; end?: Date | string; allDay?: boolean; tone?: DashboardTone; kind?: 'run' | 'review' | 'call' | 'maintenance' | 'deploy' | 'meeting' | string; tenant?: string; meta?: React.ReactNode; }
+/** One day of CalendarView events in a Card: a time rail, a tone bar per event, done / live / in n min, and a now line. */
+export interface AgendaWidgetProps extends Omit<React.HTMLAttributes<HTMLElement>, 'max' | 'title'> {
+  /** Events of any day; only the shown day's are listed */
+  events: AgendaEvent[];
+  /** Day to show (default now) */
+  date?: Date | string;
+  /** The current time (default the clock) */
+  now?: Date | string;
+  /** tr-TR → 15.10.2026; en → 15 Oct 2026; 24h times */
+  locale?: string;
+  title?: React.ReactNode;
+  /** Makes titles buttons */
+  onEvent?: (e: AgendaEvent) => void;
+  /** Shows the schedule button */
+  onAdd?: () => void;
+  max?: number;
+  viewAll?: (() => void) | string;
+  /** soon is a template: "in {n} min" */
+  labels?: { title?: string; add?: string; empty?: string; emptyHint?: string; now?: string; done?: string; live?: string; soon?: string; allDay?: string; run?: string; review?: string; call?: string; maintenance?: string; deploy?: string; meeting?: string; viewAll?: string };
+}
+export declare function AgendaWidget(props: AgendaWidgetProps): JSX.Element;
+
+/** The SetupAssistant in a dashboard Card: goal, progress, numbered steps with the next one carrying the action, a hide button, and a done state. */
+export interface OnboardingWidgetProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+  /** Card title (labels.title "Get started") */
+  title?: React.ReactNode;
+  /** The goal: "Launch your first agent on Zurich" */
+  heading?: React.ReactNode;
+  description?: React.ReactNode;
+  /** SetupAssistant steps: title, description, time, done, optional, action, onAction */
+  steps: any[];
+  /** Shows the hide button */
+  onDismiss?: () => void;
+  labels?: { title?: string; hide?: string; complete?: string; completeHint?: string; progress?: string; done?: string; optional?: string };
+}
+export declare function OnboardingWidget(props: OnboardingWidgetProps): JSX.Element;
+
+/** One comment: FeedPost fields plus resolved. */
+export interface CommentItem { id?: string | number; author: string | { name: string; kind?: 'person' | 'agent' | 'system'; product?: DashboardProduct }; kind?: 'person' | 'agent' | 'system'; action?: React.ReactNode; target?: React.ReactNode; time?: string; /** @handles are picked out in link colour */ text: React.ReactNode; replies?: any[]; likes?: number; liked?: boolean; resolved?: boolean; /** warn wraps the body (an escalation) */ tone?: 'warn'; }
+/** A comment thread in a Card: FeedPosts with @mentions picked out, replies and likes, and the Publisher docked under the list. */
+export interface CommentsWidgetProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onSubmit' | 'title'> {
+  comments: CommentItem[];
+  /** The author of new comments (initials) */
+  user?: string;
+  /** Without it, new comments are appended locally */
+  onSubmit?: (text: string) => void;
+  onLike?: (c: CommentItem) => void;
+  onReply?: (c: CommentItem) => void;
+  title?: React.ReactNode;
+  /** Scroll height of the list (360) */
+  maxHeight?: number | string;
+  labels?: { title?: string; placeholder?: string; submit?: string; empty?: string; emptyHint?: string; now?: string; reply?: string; like?: string; liked?: string; attach?: string; mention?: string; resolved?: string };
+}
+export declare function CommentsWidget(props: CommentsWidgetProps): JSX.Element;
+
+// Only the declarations marked export above are public.
+export {};