@aginies/ui 0.3.0 → 0.3.1

package/dist/index.d.cts

@@ -4,6 +4,16 @@ import * as React from 'react';
 import JSX = React.JSX;
 
 // --- core ---
+/** Status tone shared by Tag, Badge, Alert, Stat deltas and widgets: neutral · signal · ok · warn · bad · info. Always paired with a word or icon. */
+export type Tone = 'neutral' | 'signal' | 'ok' | 'warn' | 'bad' | 'info';
+/** One of the seven product families (aginies.com). */
+export type Product = 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+/** Control size: sm 28 · md 32 · lg 40 (compact density). */
+export type ControlSize = 'sm' | 'md' | 'lg';
+/** Avatar / display size scale. */
+export type DataSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** @deprecated Use `DataSize`; kept because 0.1.0–0.3.0 exported this name. */
+export type Size = DataSize;
 /** 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) */
@@ -268,7 +278,6 @@ export declare function useTheme(defaultTheme?: Theme): [Theme, (t: Theme) => vo
 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;
@@ -311,7 +320,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   onClear?: () => void;
   invalid?: boolean;
   /** sm 28 · md 32 · lg 40 */
-  size?: FormsSize;
+  size?: ControlSize;
   /** No border or background: inline editing in tables and headers */
   bare?: boolean;
   /** Props for the wrapping div */
@@ -324,7 +333,7 @@ export declare const Input: React.ForwardRefExoticComponent<InputProps & React.R
 /** 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;
+  size?: ControlSize;
   /** Height follows the content */
   autoGrow?: boolean;
   /** "{n} / {max}" counter; over the limit it turns bad and sets aria-invalid */
@@ -341,7 +350,7 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
   placeholder?: string;
   icon?: string;
   invalid?: boolean;
-  size?: FormsSize;
+  size?: ControlSize;
 }
 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. */
@@ -436,7 +445,7 @@ export interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   placeholder?: string;
   disabled?: boolean;
   invalid?: boolean;
-  size?: FormsSize;
+  size?: ControlSize;
   /** Leading icon in the field */
   icon?: string;
   /** Controlled open state (docs, custom triggers) */
@@ -469,7 +478,7 @@ export interface SecretFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
   onChange?: (value: string) => void;
   /** Characters left visible at the end (4) */
   revealLast?: number;
-  size?: FormsSize;
+  size?: ControlSize;
   invalid?: boolean;
   labels?: { reveal?: string; hide?: string; copy?: string; copied?: string };
 }
@@ -493,7 +502,6 @@ export interface TagInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 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 */
@@ -508,7 +516,7 @@ export interface DatepickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   locale?: string;
   disabled?: boolean;
   invalid?: boolean;
-  size?: PickersSize;
+  size?: ControlSize;
   min?: Date;
   max?: Date;
   /** 0 Sunday · 1 Monday (default) */
@@ -553,7 +561,7 @@ export interface TimepickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   placeholder?: string;
   disabled?: boolean;
   invalid?: boolean;
-  size?: PickersSize;
+  size?: ControlSize;
   open?: boolean;
   labels?: { empty?: string; clear?: string };
 }
@@ -570,7 +578,7 @@ export interface DatetimePickerProps extends Omit<React.HTMLAttributes<HTMLDivEl
   max?: Date;
   disabled?: boolean;
   invalid?: boolean;
-  size?: PickersSize;
+  size?: ControlSize;
   labels?: CalendarProps['labels'];
 }
 export declare function DatetimePicker(props: DatetimePickerProps): JSX.Element;
@@ -605,7 +613,7 @@ export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   swatches?: (string | Swatch)[];
   disabled?: boolean;
   invalid?: boolean;
-  size?: PickersSize;
+  size?: ControlSize;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   labels?: { open?: string; custom?: string; swatches?: string; hex?: string };
@@ -621,7 +629,7 @@ export interface CounterProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   step?: number;
   disabled?: boolean;
   invalid?: boolean;
-  size?: PickersSize;
+  size?: ControlSize;
   /** Mono unit after the value: "calls", "dk" */
   suffix?: React.ReactNode;
   /** Formats the displayed value while not editing */
@@ -748,9 +756,6 @@ export interface DockedFormFooterProps extends Omit<React.HTMLAttributes<HTMLDiv
 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 */
@@ -914,7 +919,7 @@ export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
   /** person = circle; agent and system = square */
   kind?: 'person' | 'agent' | 'system';
   /** xs 20 · sm 24 · md 32 · lg 40 · xl 56 */
-  size?: Size;
+  size?: DataSize;
   /** Lucide icon instead of initials */
   icon?: string;
   /** Product glyph for a system avatar */
@@ -925,7 +930,7 @@ export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
 }
 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 interface AvatarGroupProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'size'> { items: Array<string | AvatarProps>; /** Shown before the overflow (default 4) */ max?: number; size?: DataSize; 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. */
@@ -1436,12 +1441,9 @@ export interface RoomProps extends React.HTMLAttributes<HTMLElement> {
 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 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';
@@ -1468,7 +1470,7 @@ export interface GlobalHeaderProps extends React.HTMLAttributes<HTMLElement> {
 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; }
+export interface NavItem { id: string; label: string; icon?: string; href?: string; /** Count badge; a dot when collapsed */ count?: number; countTone?: Tone; 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. */
@@ -1479,7 +1481,7 @@ export interface VerticalNavigationProps extends Omit<React.HTMLAttributes<HTMLE
   collapsed?: boolean;
   /** Shows the collapse toggle */
   onCollapse?: (collapsed: boolean) => void;
-  /** NavigationProduct name in the logo lockup */
+  /** Product name in the logo lockup */
   product?: string;
   /** Search trigger under the logo */
   search?: { onClick?: () => void; label?: string; placeholder?: string; shortcut?: string };
@@ -1530,7 +1532,7 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
 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; }
+export interface GlobalNavItem { id: string; label: React.ReactNode; icon?: string; href?: string; /** Count badge (signal on the active item unless countTone) */ count?: number; countTone?: Tone; 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[];
@@ -1612,14 +1614,14 @@ export interface SplitViewProps extends Omit<React.HTMLAttributes<HTMLDivElement
 }
 export declare function SplitView(props: SplitViewProps): JSX.Element;
 
-/** NavigationProduct switcher: the seven boxed product glyphs with their names, the current one marked. */
+/** Product 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>>;
+  products?: Array<Product | { id: Product; name?: string; description?: string; href?: string }>;
+  current?: Product;
+  onOpen?: (id: Product, product: any) => void;
+  hrefs?: Partial<Record<Product, string>>;
+  descriptions?: Partial<Record<Product, string>>;
   /** No popover frame (inside a sidebar footer) */
   inline?: boolean;
   labels?: { title?: string; current?: string };
@@ -1628,7 +1630,7 @@ export declare const AppLauncher: ((props: AppLauncherProps) => JSX.Element) & {
 /** 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;
+  product?: Product;
   /** Overrides the product name */
   name?: string;
   /** Lucide icon instead of the product glyph, for a surface that has none (the data console: "database") */
@@ -1672,7 +1674,7 @@ export interface BuilderHeaderProps extends Omit<React.HTMLAttributes<HTMLElemen
   /** Version tag ("v8") */
   version?: string;
   /** Status Tag: a word or { label, tone, dot, icon } */
-  status?: string | { label: string; tone?: NavigationTone; dot?: boolean; icon?: string };
+  status?: string | { label: string; tone?: Tone; dot?: boolean; icon?: string };
   onBack?: () => void;
   backHref?: string;
   onDeploy?: () => void;
@@ -2662,9 +2664,6 @@ export declare function fmtInt(value: number, locale?: string): string;
 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" */
@@ -2844,10 +2843,10 @@ export interface RecordSummaryWidgetProps extends Omit<React.HTMLAttributes<HTML
   avatar?: string;
   /** Lucide icon for the BlockIcon (bot) */
   icon?: string;
-  /** DashboardProduct glyph for the BlockIcon */
-  product?: DashboardProduct;
+  /** Product glyph for the BlockIcon */
+  product?: Product;
   /** A word or { label, tone, dot, icon } */
-  status?: string | { label: React.ReactNode; tone?: DashboardTone; dot?: boolean; icon?: string };
+  status?: string | { label: React.ReactNode; tone?: Tone; 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 */
@@ -2904,7 +2903,7 @@ export interface ActivityWidgetProps extends Omit<React.HTMLAttributes<HTMLEleme
 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; }
+export interface QuickAction { id?: string; label: string; icon?: string; product?: Product; description?: string; /** Kbd hint: ["⌘", "N"] or "G L" (the consumer binds the keys) */ shortcut?: string | string[]; tone?: Tone; 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[];
@@ -2937,7 +2936,7 @@ export interface NotificationsWidgetProps extends Omit<React.HTMLAttributes<HTML
 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; }
+export interface FlowStep { id?: string; name: React.ReactNode; /** Block type in mono: "LLM · understand" */ kind?: React.ReactNode; icon?: string; product?: Product; /** 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;
@@ -2959,7 +2958,7 @@ export interface AgentFlowWidgetProps extends Omit<React.HTMLAttributes<HTMLElem
 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; }
+export interface LeaderRow { id?: string; name: string; sub?: React.ReactNode; kind?: 'agent' | 'person' | 'system'; product?: Product; 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[];
@@ -2985,7 +2984,7 @@ export interface LeaderboardWidgetProps extends Omit<React.HTMLAttributes<HTMLEl
 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; }
+export interface AgendaEvent { id?: string | number; title: string; start: Date | string; end?: Date | string; allDay?: boolean; tone?: Tone; 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 */
@@ -3024,7 +3023,7 @@ export interface OnboardingWidgetProps extends Omit<React.HTMLAttributes<HTMLEle
 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'; }
+export interface CommentItem { id?: string | number; author: string | { name: string; kind?: 'person' | 'agent' | 'system'; product?: Product }; 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[];

package/dist/index.d.ts

@@ -4,6 +4,16 @@ import * as React from 'react';
 import JSX = React.JSX;
 
 // --- core ---
+/** Status tone shared by Tag, Badge, Alert, Stat deltas and widgets: neutral · signal · ok · warn · bad · info. Always paired with a word or icon. */
+export type Tone = 'neutral' | 'signal' | 'ok' | 'warn' | 'bad' | 'info';
+/** One of the seven product families (aginies.com). */
+export type Product = 'platform' | 'hub' | 'dialog' | 'voice' | 'vision' | 'code' | 'workforce';
+/** Control size: sm 28 · md 32 · lg 40 (compact density). */
+export type ControlSize = 'sm' | 'md' | 'lg';
+/** Avatar / display size scale. */
+export type DataSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** @deprecated Use `DataSize`; kept because 0.1.0–0.3.0 exported this name. */
+export type Size = DataSize;
 /** 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) */
@@ -268,7 +278,6 @@ export declare function useTheme(defaultTheme?: Theme): [Theme, (t: Theme) => vo
 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;
@@ -311,7 +320,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   onClear?: () => void;
   invalid?: boolean;
   /** sm 28 · md 32 · lg 40 */
-  size?: FormsSize;
+  size?: ControlSize;
   /** No border or background: inline editing in tables and headers */
   bare?: boolean;
   /** Props for the wrapping div */
@@ -324,7 +333,7 @@ export declare const Input: React.ForwardRefExoticComponent<InputProps & React.R
 /** 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;
+  size?: ControlSize;
   /** Height follows the content */
   autoGrow?: boolean;
   /** "{n} / {max}" counter; over the limit it turns bad and sets aria-invalid */
@@ -341,7 +350,7 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
   placeholder?: string;
   icon?: string;
   invalid?: boolean;
-  size?: FormsSize;
+  size?: ControlSize;
 }
 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. */
@@ -436,7 +445,7 @@ export interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   placeholder?: string;
   disabled?: boolean;
   invalid?: boolean;
-  size?: FormsSize;
+  size?: ControlSize;
   /** Leading icon in the field */
   icon?: string;
   /** Controlled open state (docs, custom triggers) */
@@ -469,7 +478,7 @@ export interface SecretFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
   onChange?: (value: string) => void;
   /** Characters left visible at the end (4) */
   revealLast?: number;
-  size?: FormsSize;
+  size?: ControlSize;
   invalid?: boolean;
   labels?: { reveal?: string; hide?: string; copy?: string; copied?: string };
 }
@@ -493,7 +502,6 @@ export interface TagInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 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 */
@@ -508,7 +516,7 @@ export interface DatepickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   locale?: string;
   disabled?: boolean;
   invalid?: boolean;
-  size?: PickersSize;
+  size?: ControlSize;
   min?: Date;
   max?: Date;
   /** 0 Sunday · 1 Monday (default) */
@@ -553,7 +561,7 @@ export interface TimepickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   placeholder?: string;
   disabled?: boolean;
   invalid?: boolean;
-  size?: PickersSize;
+  size?: ControlSize;
   open?: boolean;
   labels?: { empty?: string; clear?: string };
 }
@@ -570,7 +578,7 @@ export interface DatetimePickerProps extends Omit<React.HTMLAttributes<HTMLDivEl
   max?: Date;
   disabled?: boolean;
   invalid?: boolean;
-  size?: PickersSize;
+  size?: ControlSize;
   labels?: CalendarProps['labels'];
 }
 export declare function DatetimePicker(props: DatetimePickerProps): JSX.Element;
@@ -605,7 +613,7 @@ export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   swatches?: (string | Swatch)[];
   disabled?: boolean;
   invalid?: boolean;
-  size?: PickersSize;
+  size?: ControlSize;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   labels?: { open?: string; custom?: string; swatches?: string; hex?: string };
@@ -621,7 +629,7 @@ export interface CounterProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   step?: number;
   disabled?: boolean;
   invalid?: boolean;
-  size?: PickersSize;
+  size?: ControlSize;
   /** Mono unit after the value: "calls", "dk" */
   suffix?: React.ReactNode;
   /** Formats the displayed value while not editing */
@@ -748,9 +756,6 @@ export interface DockedFormFooterProps extends Omit<React.HTMLAttributes<HTMLDiv
 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 */
@@ -914,7 +919,7 @@ export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
   /** person = circle; agent and system = square */
   kind?: 'person' | 'agent' | 'system';
   /** xs 20 · sm 24 · md 32 · lg 40 · xl 56 */
-  size?: Size;
+  size?: DataSize;
   /** Lucide icon instead of initials */
   icon?: string;
   /** Product glyph for a system avatar */
@@ -925,7 +930,7 @@ export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
 }
 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 interface AvatarGroupProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'size'> { items: Array<string | AvatarProps>; /** Shown before the overflow (default 4) */ max?: number; size?: DataSize; 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. */
@@ -1436,12 +1441,9 @@ export interface RoomProps extends React.HTMLAttributes<HTMLElement> {
 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 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';
@@ -1468,7 +1470,7 @@ export interface GlobalHeaderProps extends React.HTMLAttributes<HTMLElement> {
 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; }
+export interface NavItem { id: string; label: string; icon?: string; href?: string; /** Count badge; a dot when collapsed */ count?: number; countTone?: Tone; 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. */
@@ -1479,7 +1481,7 @@ export interface VerticalNavigationProps extends Omit<React.HTMLAttributes<HTMLE
   collapsed?: boolean;
   /** Shows the collapse toggle */
   onCollapse?: (collapsed: boolean) => void;
-  /** NavigationProduct name in the logo lockup */
+  /** Product name in the logo lockup */
   product?: string;
   /** Search trigger under the logo */
   search?: { onClick?: () => void; label?: string; placeholder?: string; shortcut?: string };
@@ -1530,7 +1532,7 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
 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; }
+export interface GlobalNavItem { id: string; label: React.ReactNode; icon?: string; href?: string; /** Count badge (signal on the active item unless countTone) */ count?: number; countTone?: Tone; 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[];
@@ -1612,14 +1614,14 @@ export interface SplitViewProps extends Omit<React.HTMLAttributes<HTMLDivElement
 }
 export declare function SplitView(props: SplitViewProps): JSX.Element;
 
-/** NavigationProduct switcher: the seven boxed product glyphs with their names, the current one marked. */
+/** Product 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>>;
+  products?: Array<Product | { id: Product; name?: string; description?: string; href?: string }>;
+  current?: Product;
+  onOpen?: (id: Product, product: any) => void;
+  hrefs?: Partial<Record<Product, string>>;
+  descriptions?: Partial<Record<Product, string>>;
   /** No popover frame (inside a sidebar footer) */
   inline?: boolean;
   labels?: { title?: string; current?: string };
@@ -1628,7 +1630,7 @@ export declare const AppLauncher: ((props: AppLauncherProps) => JSX.Element) & {
 /** 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;
+  product?: Product;
   /** Overrides the product name */
   name?: string;
   /** Lucide icon instead of the product glyph, for a surface that has none (the data console: "database") */
@@ -1672,7 +1674,7 @@ export interface BuilderHeaderProps extends Omit<React.HTMLAttributes<HTMLElemen
   /** Version tag ("v8") */
   version?: string;
   /** Status Tag: a word or { label, tone, dot, icon } */
-  status?: string | { label: string; tone?: NavigationTone; dot?: boolean; icon?: string };
+  status?: string | { label: string; tone?: Tone; dot?: boolean; icon?: string };
   onBack?: () => void;
   backHref?: string;
   onDeploy?: () => void;
@@ -2662,9 +2664,6 @@ export declare function fmtInt(value: number, locale?: string): string;
 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" */
@@ -2844,10 +2843,10 @@ export interface RecordSummaryWidgetProps extends Omit<React.HTMLAttributes<HTML
   avatar?: string;
   /** Lucide icon for the BlockIcon (bot) */
   icon?: string;
-  /** DashboardProduct glyph for the BlockIcon */
-  product?: DashboardProduct;
+  /** Product glyph for the BlockIcon */
+  product?: Product;
   /** A word or { label, tone, dot, icon } */
-  status?: string | { label: React.ReactNode; tone?: DashboardTone; dot?: boolean; icon?: string };
+  status?: string | { label: React.ReactNode; tone?: Tone; 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 */
@@ -2904,7 +2903,7 @@ export interface ActivityWidgetProps extends Omit<React.HTMLAttributes<HTMLEleme
 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; }
+export interface QuickAction { id?: string; label: string; icon?: string; product?: Product; description?: string; /** Kbd hint: ["⌘", "N"] or "G L" (the consumer binds the keys) */ shortcut?: string | string[]; tone?: Tone; 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[];
@@ -2937,7 +2936,7 @@ export interface NotificationsWidgetProps extends Omit<React.HTMLAttributes<HTML
 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; }
+export interface FlowStep { id?: string; name: React.ReactNode; /** Block type in mono: "LLM · understand" */ kind?: React.ReactNode; icon?: string; product?: Product; /** 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;
@@ -2959,7 +2958,7 @@ export interface AgentFlowWidgetProps extends Omit<React.HTMLAttributes<HTMLElem
 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; }
+export interface LeaderRow { id?: string; name: string; sub?: React.ReactNode; kind?: 'agent' | 'person' | 'system'; product?: Product; 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[];
@@ -2985,7 +2984,7 @@ export interface LeaderboardWidgetProps extends Omit<React.HTMLAttributes<HTMLEl
 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; }
+export interface AgendaEvent { id?: string | number; title: string; start: Date | string; end?: Date | string; allDay?: boolean; tone?: Tone; 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 */
@@ -3024,7 +3023,7 @@ export interface OnboardingWidgetProps extends Omit<React.HTMLAttributes<HTMLEle
 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'; }
+export interface CommentItem { id?: string | number; author: string | { name: string; kind?: 'person' | 'agent' | 'system'; product?: Product }; 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[];

package/dist/styles.css

@@ -1107,7 +1107,7 @@ button.agn-card:disabled { cursor: default; opacity: .55; }
 .agn-card__footer { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: var(--space-1) var(--space-3); border-top: 1px solid var(--line); font-size: 12px; }
 
 /* ---- Toolbar ---- */
-.agn-toolbar { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: var(--space-2) 0; background: var(--bg); min-width: 0; }
+.agn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: var(--space-2) 0; background: var(--bg); min-width: 0; }
 .agn-toolbar--sticky { position: sticky; top: 0; z-index: var(--z-sticky); }
 .agn-toolbar--bare { background: transparent; }
 .agn-toolbar__title { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); white-space: nowrap; margin-right: var(--space-2); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aginies/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Aginies Design System components for React: the agn- component layer over @aginies/tokens",
   "license": "MIT",
   "author": "Abra Partners",