@makaio/framework 1.0.0-dev-1779046984397

package/dist/ui-components/index.d.mts

@@ -0,0 +1,2342 @@
+import * as _$react from "react";
+import React, { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEventHandler, ReactElement, ReactNode, Ref, RefAttributes, RefObject, SVGProps, TextareaHTMLAttributes } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region ui/components/src/themes/types.d.ts
+/**
+ * Theme type definitions
+ *
+ * Based on design-concept prototypes analysis.
+ * @see /design-concept/*.html for source colors
+ */
+interface Theme {
+  id: string;
+  name: string;
+  className: string;
+}
+//#endregion
+//#region ui/components/src/themes/ThemeProvider.d.ts
+interface ThemeContextValue {
+  theme: Theme;
+  themeId: string;
+  setThemeId: (id: string) => void;
+  availableThemes: string[];
+}
+declare const ThemeContext: _$react.Context<ThemeContextValue | null>;
+interface ThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: string;
+}
+/**
+ * ThemeProvider
+ *
+ * Provides theme context and injects CSS custom properties.
+ * Persists theme selection to localStorage.
+ * @param props - Component props
+ */
+declare function ThemeProvider({
+  children,
+  defaultTheme
+}: ThemeProviderProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/themes/useTheme.d.ts
+/**
+ * Hook to access theme context
+ * @returns Theme context value
+ * @throws If used outside ThemeProvider
+ */
+declare function useTheme(): ThemeContextValue;
+//#endregion
+//#region ui/components/src/themes/tokens.d.ts
+/**
+ * Aura Theme
+ *
+ * CSS variables live in the ui-theme Aura stylesheet.
+ */
+declare const auraTheme: Theme;
+/**
+ * All available themes
+ */
+declare const themes: Record<string, Theme>;
+/**
+ * Default theme ID
+ */
+declare const defaultThemeId = "aura";
+//#endregion
+//#region ui/components/src/branding/Logo/Logo.d.ts
+/**
+ * Logo display variant
+ */
+type LogoVariant = 'full' | 'monochrome';
+/**
+ * Makaio Logo props
+ */
+interface LogoProps extends SVGProps<SVGSVGElement> {
+  /** Accessible title for the logo */
+  title?: string;
+  /**
+   * Display variant:
+   * - `full`: Colored rings with brand colors (default)
+   * - `monochrome`: Single color using currentColor, suitable for icons/buttons
+   */
+  variant?: LogoVariant;
+}
+/**
+ * Makaio Logo Component
+ *
+ * Inline SVG of the Makaio logo for portable usage across web packages.
+ * Accepts standard SVG props for sizing and styling.
+ * @param props - Standard SVG props passed to the root svg element
+ */
+declare function Logo(props: LogoProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/layout/AppShell/AppShell.d.ts
+interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
+  /** Left sidebar content (IconSidebar) */
+  sidebar?: ReactNode;
+  /** Top navigation bar content */
+  topbar?: ReactNode;
+  /** Main content area */
+  children: ReactNode;
+  /** Bottom panel slot (e.g., terminal, git status) */
+  bottomPanel?: ReactNode;
+  /** Optional footer content */
+  footer?: ReactNode;
+  /** Whether sidebar is collapsed (responsive behavior) */
+  sidebarCollapsed?: boolean;
+}
+/**
+ * AppShell component
+ *
+ * Main layout container for the web app. Provides a CSS Grid-based layout with slots for:
+ * - Sidebar (64px left sidebar for icon navigation)
+ * - Topbar (top navigation bar)
+ * - Main content area
+ * - Bottom panel (terminal, git status, problems)
+ * - Optional footer
+ *
+ * Matches the visual structure from design-concept/prototype.html
+ * @param sidebar - Left sidebar content (IconSidebar)
+ * @param topbar - Top navigation bar content
+ * @param children - Main content area
+ * @param bottomPanel - Bottom panel content (e.g., PanelSlot)
+ * @param footer - Optional footer content
+ * @param sidebarCollapsed - Whether sidebar is collapsed (responsive behavior)
+ * @param className - CSS class name for custom styling
+ * @param ref - Forwarded ref to the underlying div element
+ * @returns The rendered AppShell layout component
+ * @example
+ * ```tsx
+ * <AppShell
+ *   sidebar={<IconSidebar />}
+ *   topbar={<Topbar />}
+ *   bottomPanel={<PanelSlot {...panelProps} />}
+ *   footer={<Footer />}>
+ *   <MainContent />
+ * </AppShell>
+ * ```
+ */
+declare const AppShell: _$react.ForwardRefExoticComponent<AppShellProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region ui/components/src/layout/ContentHeader/HeaderTextAction.d.ts
+/**
+ * HeaderTextAction component
+ *
+ * Text-style action button for ContentHeader.
+ * Mirrors NavSidebar navigation item hover behavior.
+ * @example
+ * ```tsx
+ * <HeaderTextAction onClick={handleSave}>Save Changes</HeaderTextAction>
+ * ```
+ * @param props - Component props
+ * @returns The rendered text action button
+ */
+declare const HeaderTextAction: _$react.ForwardRefExoticComponent<HeaderTextActionProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region ui/components/src/layout/ContentHeader/HeaderIconAction.d.ts
+/**
+ * HeaderIconAction component
+ *
+ * Icon-style action button for ContentHeader.
+ * Circular button with active state support (e.g., for edit mode toggle).
+ * @example
+ * ```tsx
+ * <HeaderIconAction
+ *   icon={<EditIcon />}
+ *   label="Toggle edit mode"
+ *   active={isEditMode}
+ *   onClick={toggleEditMode}
+ * />
+ * ```
+ * @param props - Component props
+ * @returns The rendered icon action button
+ */
+declare const HeaderIconAction: _$react.ForwardRefExoticComponent<HeaderIconActionProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region ui/components/src/layout/ContentHeader/types.d.ts
+/**
+ * Props for text-style header action button
+ */
+interface HeaderTextActionProps {
+  /** Button text content */
+  children: ReactNode;
+  /** Click handler */
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional CSS class */
+  className?: string;
+}
+/**
+ * Props for icon-style header action button
+ */
+interface HeaderIconActionProps {
+  /** Icon element to display */
+  icon: ReactNode;
+  /** Accessibility label (required) */
+  label: string;
+  /** Click handler */
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Visual active state (e.g., edit mode toggle) */
+  active?: boolean;
+  /** Additional CSS class */
+  className?: string;
+}
+type HeaderTextActionComponent = typeof HeaderTextAction;
+type HeaderIconActionComponent = typeof HeaderIconAction;
+/**
+ * Constrained action element types for ContentHeader
+ * Only HeaderTextAction and HeaderIconAction elements are allowed
+ */
+type HeaderActionElement = ReactElement<HeaderTextActionProps, HeaderTextActionComponent> | ReactElement<HeaderIconActionProps, HeaderIconActionComponent>;
+/**
+ * Props for ContentHeader component
+ */
+interface ContentHeaderProps {
+  /** Page title displayed on the left */
+  title: string;
+  /** Optional subtitle below title */
+  subtitle?: string;
+  /** Action elements (HeaderTextAction or HeaderIconAction only) */
+  actions?: HeaderActionElement[];
+  /** Additional CSS class */
+  className?: string;
+}
+//#endregion
+//#region ui/components/src/layout/ContentHeader/ContentHeader.d.ts
+/**
+ * ContentHeader component
+ *
+ * Reusable page header with title and action buttons.
+ * Displays title, optional subtitle, and action buttons on the right.
+ * @example
+ * ```tsx
+ * <ContentHeader
+ *   title="Widgets"
+ *   subtitle="Manage your widgets"
+ *   actions={[
+ *     <HeaderTextAction key="add" onClick={handleAdd}>Add Widget</HeaderTextAction>,
+ *     <HeaderIconAction key="edit" icon={<EditIcon />} label="Edit mode" active={isEditMode} />,
+ *   ]}
+ * />
+ * ```
+ * @param props - Component props
+ * @returns The rendered header component
+ */
+declare function ContentHeader({
+  title,
+  subtitle,
+  actions,
+  className
+}: ContentHeaderProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/layout/GlassPanel/GlassPanel.d.ts
+/**
+ * Props for GlassPanel component
+ */
+interface GlassPanelProps extends HTMLAttributes<HTMLDivElement> {
+  /** Child elements to render inside the panel */
+  children: ReactNode;
+  /** Enable hover effect (background brightens, border becomes more visible) */
+  hoverable?: boolean;
+  /** CSS class name for custom styling */
+  className?: string;
+}
+/**
+ * GlassPanel component
+ *
+ * Glass morphism effect panel with backdrop blur and semi-transparent background.
+ * Used for floating panels, modals, dropdowns, and any UI element that needs
+ * a subtle, modern glass-like appearance.
+ * @param children - Child elements to render inside the panel
+ * @param hoverable - Enable hover effect (background brightens, border becomes more visible)
+ * @param className - CSS class name for custom styling
+ * @param ref - Forwarded ref to the underlying div element
+ * @returns The rendered GlassPanel component
+ * @example
+ * ```tsx
+ * <GlassPanel hoverable>
+ *   <p>Content with glass effect</p>
+ * </GlassPanel>
+ * ```
+ */
+declare const GlassPanel: _$react.ForwardRefExoticComponent<GlassPanelProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region ui/components/src/layout/IconSidebar/IconSidebar.d.ts
+interface NavItem {
+  /** Unique identifier for the nav item */
+  id: string;
+  /** Icon element to display */
+  icon: ReactNode;
+  /** Accessible label for the button (used as aria-label and tooltip) */
+  label: string;
+  /** Whether this item is currently active */
+  active?: boolean;
+  /** Click handler */
+  onClick?: () => void;
+}
+interface IconSidebarProps {
+  /** Navigation items for main section */
+  navItems: NavItem[];
+  /** Navigation items for bottom section (profile, settings) */
+  bottomItems?: NavItem[];
+  /** CSS class name */
+  className?: string;
+}
+/**
+ * IconSidebar component
+ *
+ * Vertical icon navigation sidebar (64px wide).
+ * Displays context navigation icons with active states and hover effects.
+ * Based on design-concept/prototype.html lines 122-195.
+ * @param navItems - Navigation items for main section
+ * @param bottomItems - Navigation items for bottom section (profile, settings)
+ * @param className - CSS class name for custom styling
+ * @returns The rendered IconSidebar component
+ */
+declare function IconSidebar({
+  navItems,
+  bottomItems,
+  className
+}: IconSidebarProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/layout/Sidebar/Sidebar.d.ts
+/**
+ * Navigation item definition for NavSidebar.
+ *
+ * Items support two interaction models:
+ * - Link-based: provide `path` for anchor/custom link rendering
+ * - Action-based: provide `onClick` for button rendering
+ */
+interface NavSidebarItem {
+  /** Unique key for the item (falls back to path if not provided) */
+  id?: string;
+  /** Route path for link-based navigation */
+  path?: string;
+  /** Click handler for action-based navigation */
+  onClick?: () => void;
+  /** Display label for the nav item */
+  label: string;
+  /** Optional icon element */
+  icon?: ReactNode;
+  /** Optional active state */
+  isActive?: boolean;
+  /** Optional keyboard shortcut hint (display only) */
+  shortcut?: string;
+  /** Optional tooltip/description */
+  title?: string;
+  /**
+   * Optional notification badge count.
+   * Renders a count bubble on the icon when greater than 0.
+   * Values greater than 99 render as "99+".
+   */
+  badge?: number;
+}
+/**
+ * Grouped section of navigation items.
+ *
+ * Sections provide visual grouping with a label header and separator between groups.
+ */
+interface NavSidebarSection {
+  /** Unique section identifier */
+  id: string;
+  /** Display label for the section header */
+  label: string;
+  /** Navigation items in this section */
+  items: NavSidebarItem[];
+}
+/**
+ * Render function for custom link handling.
+ * @param item - The navigation item being rendered
+ * @param linkClassName - CSS class for the link element
+ * @param activeClassName - CSS class for active state
+ * @param children - Pre-rendered icon + label content
+ */
+type NavSidebarLinkRenderer = (item: NavSidebarItem, linkClassName: string, activeClassName: string, children: ReactNode) => ReactNode;
+/**
+ * NavSidebar component props.
+ *
+ * Supports two rendering modes:
+ * - Flat: provide `items` for a simple list
+ * - Grouped: provide `sections` for labeled groups with separators
+ *
+ * When both are provided, flat items render before sections.
+ */
+interface NavSidebarProps {
+  /** Optional sidebar title displayed in header */
+  title?: string;
+  /** Flat navigation items (rendered before sections) */
+  items?: NavSidebarItem[];
+  /** Grouped navigation sections (rendered after flat items) */
+  sections?: NavSidebarSection[];
+  /** Optional footer content */
+  footer?: ReactNode;
+  /** Optional custom link renderer for link-based items */
+  renderLink?: NavSidebarLinkRenderer;
+  /** Additional CSS class */
+  className?: string;
+  /** Whether the sidebar is collapsed to icons only */
+  collapsed?: boolean;
+  /** Callback to toggle collapse state */
+  onToggleCollapse?: () => void;
+}
+/**
+ * Navigation sidebar component.
+ *
+ * Renders a sidebar with optional header, flat items, grouped sections,
+ * footer, and collapse toggle. Supports both link-based and action-based
+ * navigation items.
+ * @param props - Component props
+ */
+declare function NavSidebar(props: NavSidebarProps): ReactNode;
+//#endregion
+//#region ui/components/src/layout/SplitPane/types.d.ts
+/**
+ * Type definitions for SplitPane component.
+ *
+ * These types mirror shared layout contracts to avoid circular dependencies
+ * between components and higher-level UI packages.
+ * @packageDocumentation
+ */
+/**
+ * Content that can be displayed within a leaf pane.
+ */
+type PaneContent = {
+  type: 'view';
+  viewId: string;
+  props?: Record<string, unknown>;
+} | {
+  type: 'widget';
+  widgetId: string;
+  instanceId: string;
+  config?: Record<string, unknown>;
+} | {
+  type: 'panelSlot';
+} | {
+  type: 'widgetSlot';
+  scope: string;
+  defaultWidgets?: string[];
+} | {
+  type: 'empty';
+};
+/**
+ * Size constraints for a pane.
+ *
+ * All size values are percentages (0-100).
+ */
+interface PaneSizeConstraints {
+  /**
+   * Minimum size as percentage (0-100).
+   */
+  minSize?: number;
+  /**
+   * Maximum size as percentage (0-100).
+   */
+  maxSize?: number;
+  /**
+   * Default size as percentage (0-100).
+   */
+  defaultSize?: number;
+  /**
+   * Whether the pane can be collapsed to zero size.
+   */
+  collapsible?: boolean;
+}
+/**
+ * Leaf pane containing actual content.
+ */
+interface LeafPane {
+  type: 'leaf';
+  id: string;
+  content: PaneContent;
+  constraints?: PaneSizeConstraints;
+}
+/**
+ * Split pane containing child panes arranged horizontally or vertically.
+ *
+ * The sizes array must have the same length as children and sum to 100.
+ */
+interface SplitPane$1 {
+  type: 'split';
+  id: string;
+  direction: 'horizontal' | 'vertical';
+  children: Pane[];
+  /**
+   * Sizes as percentages (must sum to 100).
+   */
+  sizes: number[];
+  constraints?: PaneSizeConstraints;
+}
+/**
+ * Discriminated union of all pane types.
+ */
+type Pane = LeafPane | SplitPane$1;
+//#endregion
+//#region ui/components/src/layout/SplitPane/SplitPane.d.ts
+/**
+ * Props for the SplitPane component.
+ */
+interface SplitPaneProps {
+  /**
+   * The root pane to render (can be a leaf or split pane).
+   */
+  root: Pane;
+  /**
+   * Callback to render content for a leaf pane.
+   * @param content - The content descriptor for the pane
+   * @param paneId - The unique ID of the pane
+   * @returns The rendered content
+   */
+  renderContent: (content: PaneContent, paneId: string) => ReactNode;
+  /**
+   * Optional auto-save ID for persisting layout state.
+   */
+  autoSaveId?: string;
+  /**
+   * Optional callback when panel sizes change after user resize.
+   * @param sizes - Array of panel sizes as percentages
+   */
+  onLayoutChange?: (sizes: number[]) => void;
+  /**
+   * Optional CSS class name for custom styling.
+   */
+  className?: string;
+}
+/**
+ * SplitPane component - Recursive layout renderer using react-resizable-panels.
+ *
+ * This component renders a workspace layout tree with support for:
+ * - Horizontal and vertical splits
+ * - Resizable panes with drag handles
+ * - Nested layouts (splits within splits)
+ * - Auto-save layout state to localStorage
+ * - Leaf panes with custom content rendering
+ *
+ * The component is pure UI - it takes a layout tree and a render function,
+ * and handles the visual presentation and user interactions (resize).
+ * State management and content rendering are delegated to the parent.
+ * @param props - Component props
+ * @returns The rendered SplitPane component
+ * @example
+ * ```tsx
+ * const layout: Pane = {
+ *   type: 'split',
+ *   id: 'root',
+ *   direction: 'horizontal',
+ *   sizes: [30, 70],
+ *   children: [
+ *     { type: 'leaf', id: 'sidebar', content: { type: 'view', viewId: 'nav' } },
+ *     { type: 'leaf', id: 'main', content: { type: 'view', viewId: 'editor' } },
+ *   ],
+ * };
+ *
+ * <SplitPane
+ *   root={layout}
+ *   renderContent={(content, paneId) => <MyView content={content} />}
+ *   autoSaveId="workspace-layout"
+ * />
+ * ```
+ */
+declare function SplitPane({
+  root,
+  renderContent,
+  autoSaveId,
+  onLayoutChange,
+  className
+}: SplitPaneProps): ReactNode;
+//#endregion
+//#region ui/components/src/layout/Topbar/Topbar.d.ts
+/**
+ * Breadcrumb item
+ */
+interface BreadcrumbItem {
+  /** Display label */
+  label: string;
+  /** Optional href for anchor link */
+  href?: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+/**
+ * Topbar props
+ */
+interface TopbarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Breadcrumb items for left side */
+  breadcrumbs?: BreadcrumbItem[];
+  /** Action buttons for right side */
+  actions?: ReactNode;
+  /** CSS class name */
+  className?: string;
+}
+/**
+ * Topbar component
+ *
+ * Fixed height navigation bar spanning the width of the main content area.
+ * Left side displays breadcrumb navigation, right side displays action buttons.
+ * @param breadcrumbs - Breadcrumb items for left side
+ * @param actions - Action buttons for right side
+ * @param className - CSS class name for custom styling
+ * @param ref - Forwarded ref to the underlying div element
+ * @returns The rendered Topbar component
+ * @example
+ * ```tsx
+ * <Topbar
+ *   breadcrumbs={[
+ *     { label: 'Dashboard', href: '/dashboard' },
+ *     { label: 'Chat', href: '/chat' },
+ *     { label: 'New Session' }
+ *   ]}
+ *   actions={<Button>Save</Button>}
+ * />
+ * ```
+ */
+declare const Topbar: _$react.ForwardRefExoticComponent<TopbarProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region ui/components/src/layout/Page/Page.d.ts
+interface PageProps {
+  /** Page content */
+  children: ReactNode;
+  /**
+   * Whether to remove default content padding.
+   * Useful for views that manage their own internal layout/scrolling (e.g. Chat, Git).
+   * Defaults to false.
+   */
+  noPadding?: boolean;
+  /** Optional className for the root element */
+  className?: string;
+  /** Optional className for the content area */
+  contentClassName?: string;
+}
+/**
+ * Standard page layout container.
+ * @param props - Component props
+ * @example
+ * ```tsx
+ * <Page>
+ *   <ContentHeader title="Projects" />
+ *   <ProjectList />
+ * </Page>
+ * ```
+ */
+declare function Page(props: PageProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/layout/ListPage/ListPage.d.ts
+/**
+ * Props for ListPage component
+ */
+interface ListPageProps {
+  /** Page title displayed in the header */
+  title: string;
+  /** Optional subtitle below the title */
+  subtitle?: string;
+  /** Action elements for the header (HeaderTextAction or HeaderIconAction) */
+  actions?: HeaderActionElement[];
+  /** Page content (typically a grid of cards or list) */
+  children: ReactNode;
+  /** Additional className for the root Page element */
+  className?: string;
+  /** Additional className for the content Panel */
+  contentClassName?: string;
+  /**
+   * Whether to show the content in a Panel with glass styling.
+   * Set to false for custom content containers.
+   * Defaults to true.
+   */
+  usePanel?: boolean;
+}
+/**
+ * ListPage component - standardized layout for entity list pages.
+ *
+ * Composes Page, ContentHeader, and Panel into a consistent structure
+ * for browsing entities (Projects, Sessions, Prompts, Personas, Profiles, etc.).
+ * @example
+ * ```tsx
+ * <ListPage
+ *   title="Prompts"
+ *   subtitle="Reusable prompt templates"
+ *   actions={[
+ *     <Input key="search" leftIcon={<Search />} placeholder="Search..." />,
+ *     <HeaderTextAction key="create" onClick={handleCreate}>Create</HeaderTextAction>,
+ *   ]}
+ * >
+ *   <div className={styles.grid}>
+ *     {prompts.map((p) => <PromptCard key={p.id} {...p} />)}
+ *   </div>
+ * </ListPage>
+ * ```
+ * @param props - Component props
+ * @returns The rendered list page
+ */
+declare function ListPage({
+  title,
+  subtitle,
+  actions,
+  children,
+  className,
+  contentClassName,
+  usePanel
+}: ListPageProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/layout/SlotPanel/SlotPanel.d.ts
+type SlotPanelPadding = 'none' | 'sm' | 'md' | 'lg';
+/**
+ * Props for the SlotPanel component.
+ * @param padding - Inner padding preset
+ * @param className - Additional CSS class name
+ * @param children - Panel content
+ * @returns SlotPanel component JSX element
+ */
+interface SlotPanelProps extends HTMLAttributes<HTMLDivElement> {
+  /** Inner padding preset */
+  padding?: SlotPanelPadding;
+  /** Panel content */
+  children: ReactNode;
+}
+/**
+ * SlotPanel component.
+ *
+ * Consistent container styling for page slot content.
+ * @param props - Component props
+ * @returns SlotPanel component JSX element
+ */
+declare const SlotPanel: _$react.ForwardRefExoticComponent<SlotPanelProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region ui/components/src/primitives/Button/Button.d.ts
+/**
+ * Button visual variants
+ */
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+/**
+ * Button size presets
+ */
+type ButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * Base button props shared by all button variants.
+ * @param variant - Visual style variant (primary, secondary, ghost, danger)
+ * @param size - Size preset (sm: 28px, md: 36px, lg: 44px)
+ * @param fullWidth - Stretch button to full width of container
+ * @param leftIcon - Icon element to display before label
+ * @param rightIcon - Icon element to display after label
+ * @param loading - Show loading spinner and disable interaction
+ * @param disabled - Native disabled state
+ * @param type - Button type attribute; defaults to `'button'` to prevent
+ *   accidental form submission. Pass `type="submit"` explicitly when
+ *   form-submit behavior is required.
+ * @param className - Additional CSS classes
+ * @param children - Button label content
+ */
+type BaseButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  /** Visual style variant */variant?: ButtonVariant; /** Size preset */
+  size?: ButtonSize; /** Full width button */
+  fullWidth?: boolean; /** Left icon element */
+  leftIcon?: ReactNode; /** Right icon element */
+  rightIcon?: ReactNode; /** Loading state */
+  loading?: boolean;
+};
+/**
+ * Discriminated union enforcing that `iconOnly: true` requires `aria-label`,
+ * so every icon-only button always has an accessible name (WCAG 2.1 SC 4.1.2).
+ */
+type IconOnlyAccessibility = {
+  iconOnly?: false | undefined;
+} | {
+  iconOnly: true;
+  'aria-label': string;
+};
+/**
+ * Button component props.
+ *
+ * When `iconOnly` is `true`, `aria-label` is required so the button always
+ * has an accessible name.
+ * @param ref - Forwarded ref to underlying button element
+ */
+type ButtonProps = BaseButtonProps & IconOnlyAccessibility;
+/**
+ * Button component
+ *
+ * Primary interactive element for triggering actions with Aura theme styling.
+ * Supports multiple variants, sizes, loading states, and icon placements.
+ * @example
+ * ```tsx
+ * <Button variant="primary" size="md" loading={isLoading}>
+ *   Submit
+ * </Button>
+ * ```
+ */
+declare const Button: _$react.ForwardRefExoticComponent<ButtonProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region ui/components/src/primitives/Badge/Badge.d.ts
+/**
+ * Badge variant types
+ *
+ * Maps to semantic color categories in the Aura design system.
+ */
+type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/**
+ * Badge size types
+ *
+ * - sm: Small badges with uppercase text and wider letter-spacing
+ * - md: Medium badges with normal text styling
+ */
+type BadgeSize = 'sm' | 'md';
+/**
+ * Badge component props
+ *
+ * Extends standard HTML span attributes for full flexibility.
+ */
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Badge variant - maps to theme accent colors
+   */
+  variant?: BadgeVariant;
+  /**
+   * Badge size preset
+   */
+  size?: BadgeSize;
+  /**
+   * Optional icon to display on the left side
+   */
+  icon?: ReactNode;
+  /**
+   * Badge content
+   */
+  children: ReactNode;
+}
+/**
+ * Badge component
+ *
+ * A compact component for displaying status indicators, labels, or counts.
+ * Supports multiple variants mapped to theme accent colors and two size presets.
+ *
+ * Small badges use uppercase text with wider letter-spacing for improved readability
+ * at small sizes, matching the Aura design system badge pattern.
+ * @param props - Component props
+ * @returns Badge component
+ * @example
+ * ```tsx
+ * <Badge variant="success" size="sm">Active</Badge>
+ * <Badge variant="primary">New Feature</Badge>
+ * <Badge variant="danger" icon={<AlertIcon />}>Error</Badge>
+ * ```
+ */
+declare function Badge({
+  variant,
+  size,
+  icon,
+  children,
+  className,
+  ...restProps
+}: BadgeProps): ReactNode;
+//#endregion
+//#region ui/components/src/primitives/Panel/Panel.d.ts
+type PanelVariant = 'default' | 'elevated' | 'bordered' | 'ghost';
+type PanelPadding = 'none' | 'sm' | 'md' | 'lg';
+/**
+ * Props for the Panel component
+ * @param variant - Visual style variant (default, elevated, bordered, ghost)
+ * @param padding - Body padding preset (none, sm, md, lg)
+ * @param title - Optional header title
+ * @param subtitle - Optional header subtitle
+ * @param titlePrefix - Optional element to render before title (icon, badge, etc.)
+ * @param actions - Optional actions to render in header
+ * @param fullHeight - Whether the panel should take full height
+ * @param className - Additional CSS class name
+ * @param children - Panel content
+ * @returns Panel component JSX element
+ */
+interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+  /** Visual style variant */
+  variant?: PanelVariant;
+  /** Body padding preset */
+  padding?: PanelPadding;
+  /** Optional header title */
+  title?: string;
+  /** Optional header subtitle */
+  subtitle?: string;
+  /** Optional element to render before title */
+  titlePrefix?: ReactNode;
+  /** Optional actions to render in header */
+  actions?: ReactNode;
+  /** Full height container */
+  fullHeight?: boolean;
+  /**
+   * Ref forwarded to the inner scrollable `.body` div.
+   *
+   * Use this when a child needs the scroll container element
+   * (e.g. Virtuoso's `customScrollParent`).
+   */
+  bodyRef?: Ref<HTMLDivElement>;
+}
+/**
+ * Panel component
+ *
+ * Container with optional header section for grouping related content
+ * with clear visual boundaries. Features Aura theme glass morphism styling.
+ * @param props - Component props
+ * @returns Panel component JSX element
+ */
+declare const Panel: _$react.ForwardRefExoticComponent<PanelProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region ui/components/src/primitives/Input/Input.d.ts
+type InputSize = 'sm' | 'md' | 'lg';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Size preset */
+  size?: InputSize;
+  /** Label text */
+  label?: string;
+  /** Helper text shown below input */
+  helperText?: string;
+  /** Error text (overrides helperText when present) */
+  errorText?: string;
+  /** Error state */
+  error?: boolean;
+  /** Left icon element */
+  leftIcon?: ReactNode;
+  /** Right icon element */
+  rightIcon?: ReactNode;
+}
+/**
+ * Input component
+ *
+ * Text input with label, icons, and validation states.
+ * Features amber glow on focus matching the Aura design system.
+ * @param props - Component props
+ * @returns Input component
+ * @example
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   placeholder="Enter your email"
+ *   errorText="Invalid email format"
+ *   leftIcon={<MailIcon />}
+ * />
+ * ```
+ */
+declare const Input: _$react.ForwardRefExoticComponent<InputProps & _$react.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region ui/components/src/primitives/Textarea/Textarea.d.ts
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Label text displayed above the textarea */
+  label?: string;
+  /** Error message - overrides helperText when present */
+  error?: string;
+  /** Helper text shown below textarea */
+  helperText?: string;
+  /** Enable auto-resize based on content */
+  autoResize?: boolean;
+  /** Minimum number of rows to display */
+  minRows?: number;
+  /** Maximum number of rows before scrolling */
+  maxRows?: number;
+  /** Error state */
+  errorState?: boolean;
+}
+/**
+ * Textarea component
+ *
+ * Multi-line text input with label, auto-resize, and validation states.
+ * Styled with amber accent focus glow matching the Aura theme.
+ * @param props - Component props
+ * @returns Textarea component
+ */
+declare const Textarea: _$react.ForwardRefExoticComponent<TextareaProps & _$react.RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+//#region ui/components/src/primitives/IconButton/IconButton.d.ts
+type IconButtonVariant = 'ghost' | 'filled';
+type IconButtonSize = 'sm' | 'md' | 'lg';
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Visual style variant
+   * - ghost: transparent background with hover state (default)
+   * - filled: solid background color
+   */
+  variant?: IconButtonVariant;
+  /**
+   * Size preset
+   * - sm: 28px square
+   * - md: 36px square
+   * - lg: 44px square
+   */
+  size?: IconButtonSize;
+  /**
+   * Icon element to render
+   */
+  icon: ReactNode;
+  /**
+   * Accessibility label for screen readers. Required so every icon-only button
+   * has an accessible name (WCAG 2.1 SC 4.1.2).
+   * Callers may still override via the native `aria-label` spread prop when needed.
+   */
+  label: string;
+}
+/**
+ * IconButton Component
+ *
+ * Square button for icon-only interactions.
+ * Based on prototype nav-item pattern with Aura theme styling.
+ * @param props - Component props
+ * @returns Icon button element
+ * @example
+ * ```tsx
+ * <IconButton
+ *   icon={<CloseIcon />}
+ *   label="Close"
+ *   size="md"
+ *   variant="ghost"
+ * />
+ * ```
+ */
+declare const IconButton: _$react.ForwardRefExoticComponent<IconButtonProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region ui/components/src/primitives/Tooltip/Tooltip.d.ts
+type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+  /**
+   * Content to display in the tooltip
+   */
+  content: ReactNode;
+  /**
+   * Position of the tooltip relative to the trigger element
+   */
+  position?: TooltipPosition;
+  /**
+   * Delay in milliseconds before showing the tooltip
+   */
+  delay?: number;
+  /**
+   * Trigger element that activates the tooltip on hover.
+   * Must be a single React element. Typed with `Record<string, unknown>` props
+   * so that the component can safely read and forward `aria-describedby`.
+   */
+  children: ReactElement<Record<string, unknown>>;
+}
+/**
+ * Tooltip component
+ *
+ * Displays additional information on hover with glass panel styling.
+ * Supports positioning on all four sides with configurable delay.
+ * @param props - Component props
+ * @returns Rendered tooltip with trigger
+ */
+declare function Tooltip({
+  content,
+  position,
+  delay,
+  children,
+  className,
+  ...props
+}: TooltipProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/primitives/Dropdown/Dropdown.d.ts
+/**
+ * Dropdown item definition
+ * Represents a single menu item with optional icon, label, shortcut, and click handler
+ */
+interface DropdownItem {
+  /** Unique identifier for the item */
+  id: string;
+  /** Optional icon element to display */
+  icon?: ReactNode;
+  /** Display label text */
+  label: string;
+  /** Optional keyboard shortcut hint to display */
+  shortcut?: string;
+  /** Click event handler */
+  onClick?: () => void;
+  /** Disabled state */
+  disabled?: boolean;
+}
+/**
+ * Dropdown component props
+ */
+interface DropdownProps {
+  /** Trigger element that opens the dropdown when clicked */
+  trigger: ReactElement;
+  /** Array of menu items or dividers */
+  items: (DropdownItem | 'divider')[];
+  /** Alignment of the dropdown relative to trigger */
+  align?: 'start' | 'end';
+  /**
+   * Called when the dropdown open state changes.
+   *
+   * Use this to lazily initialise data that is only needed once the user
+   * actually opens the menu (e.g. fetching per-item actions from the bus).
+   * @param open - Whether the dropdown is now open
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Dropdown component
+ *
+ * Floating menu panel with trigger element.
+ * Supports keyboard navigation (Arrow keys, Enter, Escape),
+ * menu items with icons/labels/shortcuts, and dividers.
+ * @param props - Dropdown component properties
+ * @returns Dropdown component
+ */
+declare function Dropdown({
+  trigger,
+  items,
+  align,
+  onOpenChange
+}: DropdownProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region node_modules/lucide-react/dist/lucide-react.d.ts
+type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
+type ElementAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
+interface LucideProps extends ElementAttributes {
+  size?: string | number;
+  absoluteStrokeWidth?: boolean;
+}
+//#endregion
+//#region ui/components/src/primitives/Icon/Icon.d.ts
+/**
+ * Icon component for application-wide use
+ *
+ * Simple icon renderer using lucide-react icons.
+ */
+/**
+ * Mapping of icon names to Lucide components.
+ *
+ * This is the single source of truth for supported icon names — `IconName`
+ * is derived from the keys so the union type never drifts out of sync.
+ */
+declare const ICON_MAP: {
+  clipboard: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  copy: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  eye: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  branch: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  'git-branch': _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  commit: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  'git-commit': _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  folder: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  diff: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  tag: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  'external-link': _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  file: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  revert: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  'chevron-right': _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  'chevron-down': _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  monitor: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  globe: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  list: _$react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+};
+/**
+ * Supported icon names, derived from `ICON_MAP` to stay in sync automatically.
+ */
+type IconName = keyof typeof ICON_MAP;
+/**
+ * Props for the Icon component.
+ */
+interface IconProps {
+  name: IconName;
+  className?: string;
+  size?: number | string;
+}
+/**
+ * Type guard for valid icon names.
+ * @param icon - String to check
+ * @returns True if icon is a valid IconName
+ */
+declare function isIconName(icon: string): icon is IconName;
+/**
+ * Renders an icon from a string name.
+ *
+ * Falls back to null if icon not found.
+ * @param props - Icon props
+ * @returns Icon element or null
+ */
+declare function Icon({
+  name,
+  className,
+  size
+}: IconProps): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region ui/components/src/primitives/FilterChipGroup/types.d.ts
+/**
+ * A single filter option.
+ * @typeParam T - The value type
+ */
+interface FilterOption<T> {
+  /** Unique identifier for stable equality checks */
+  id: string;
+  /** The value this option represents */
+  value: T;
+  /** Display label */
+  label: string;
+  /** Optional count badge */
+  count?: number;
+  /** Badge color variant */
+  variant?: BadgeVariant;
+}
+//#endregion
+//#region ui/components/src/primitives/FilterChipGroup/FilterChipGroup.d.ts
+/**
+ * Props for FilterChipGroup component.
+ * @typeParam T - The value type for filter options
+ */
+interface FilterChipGroupProps<T> {
+  /** Available filter options */
+  options: FilterOption<T>[];
+  /** Currently selected options (not just values) */
+  selected: FilterOption<T>[];
+  /** Called when selection changes */
+  onChange: (selected: FilterOption<T>[]) => void;
+  /** Allow multiple selections (default: true) */
+  multiSelect?: boolean;
+  /** Additional CSS class */
+  className?: string;
+}
+/**
+ * FilterChipGroup - Toggleable filter chips for list filtering.
+ *
+ * Pure component supporting single or multi-select modes.
+ * @param options - Available filter options
+ * @param selected - Currently selected options
+ * @param onChange - Called when selection changes
+ * @param multiSelect - Allow multiple selections (default: true)
+ * @param className - Additional CSS class
+ * @returns React component
+ * @typeParam T - The value type for filter options
+ */
+declare function FilterChipGroup<T>({
+  options,
+  selected,
+  onChange,
+  multiSelect,
+  className
+}: FilterChipGroupProps<T>): ReactNode;
+//#endregion
+//#region ui/components/src/primitives/ButtonGroupFilter/ButtonGroupFilter.d.ts
+/**
+ * Represents a single option in the button group filter.
+ * Generic type parameter T is the string literal type for option values.
+ */
+interface ButtonGroupOption<T extends string> {
+  /** The value of this option */
+  value: T;
+  /** The label to display for this option */
+  label: string;
+  /** Whether this option is disabled */
+  disabled?: boolean;
+}
+/**
+ * Props for the ButtonGroupFilter component.
+ * Generic type parameter T is the string literal type for option values.
+ */
+interface ButtonGroupFilterProps<T extends string> {
+  /** Current selected value */
+  value: T;
+  /** Callback when the selected value changes */
+  onChange: (value: T) => void;
+  /** Array of options to display */
+  options: ButtonGroupOption<T>[];
+  /** Optional counts to display in parentheses after each label */
+  counts?: Partial<Record<T, number>>;
+  /** Label text shown before the buttons */
+  label?: string;
+  /** Optional CSS class name for the container */
+  className?: string;
+}
+/**
+ * ButtonGroupFilter - Generic toggle control for filtering with button groups.
+ * Provides a reusable component for creating filter controls with multiple options.
+ * Generic type parameter T is the string literal type for option values.
+ * @param props - Component props
+ * @returns Button group filter control
+ * @example
+ * ```tsx
+ * const options = [
+ *   { value: 'all', label: 'All' },
+ *   { value: 'active', label: 'Active' },
+ *   { value: 'closed', label: 'Closed' },
+ * ];
+ *
+ * <ButtonGroupFilter
+ *   value={status}
+ *   onChange={setStatus}
+ *   options={options}
+ *   counts={{ all: 10, active: 5, closed: 5 }}
+ *   label="Status"
+ * />
+ * ```
+ */
+declare function ButtonGroupFilter<T extends string>({
+  value,
+  onChange,
+  options,
+  counts,
+  label,
+  className
+}: ButtonGroupFilterProps<T>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/primitives/Collapsible/types.d.ts
+/**
+ * Props for CollapsibleSection component.
+ */
+interface CollapsibleSectionProps {
+  /** Section title displayed in header */
+  title: string;
+  /** Controlled expanded state (omit for uncontrolled) */
+  expanded?: boolean;
+  /** Default expanded state for uncontrolled mode */
+  defaultExpanded?: boolean;
+  /** Callback when expanded state changes */
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Optional action element rendered in the header (e.g., add button) */
+  action?: ReactNode;
+  /** Section content */
+  children: ReactNode;
+  /** Optional className for container */
+  className?: string;
+  /** Optional className for header */
+  headerClassName?: string;
+  /** Unique ID for group coordination (auto-generated if omitted) */
+  id?: string;
+}
+/**
+ * Group coordination mode.
+ * - 'independent': Sections expand/collapse independently
+ * - 'accordion': Only one section can be expanded at a time
+ */
+type CollapsibleGroupMode = 'independent' | 'accordion';
+/**
+ * Props for CollapsibleGroup component.
+ */
+interface CollapsibleGroupProps {
+  /** Child CollapsibleSection components */
+  children: ReactNode;
+  /** Coordination mode */
+  mode?: CollapsibleGroupMode;
+  /** Key for localStorage persistence (omit to disable) */
+  persistKey?: string;
+  /** Optional className */
+  className?: string;
+}
+/**
+ * Context value provided by CollapsibleGroup.
+ */
+interface CollapsibleContextValue {
+  /** Current mode */
+  mode: CollapsibleGroupMode;
+  /** Map of section id -\> expanded state */
+  expandedMap: Map<string, boolean>;
+  /** Register a section with the group */
+  register: (id: string, defaultExpanded: boolean) => void;
+  /** Unregister a section */
+  unregister: (id: string) => void;
+  /** Toggle a section's expanded state */
+  toggle: (id: string) => void;
+  /** Expand all sections */
+  expandAll: () => void;
+  /** Collapse all sections */
+  collapseAll: () => void;
+}
+//#endregion
+//#region ui/components/src/primitives/Collapsible/CollapsibleSection.d.ts
+/**
+ * Collapsible section with smooth height animation.
+ * @param props - Component props
+ * @example Uncontrolled (internal state)
+ * ```tsx
+ * <CollapsibleSection title="Settings" defaultExpanded>
+ *   <SettingsPanel />
+ * </CollapsibleSection>
+ * ```
+ * @example Controlled (external state)
+ * ```tsx
+ * <CollapsibleSection
+ *   title="Branches"
+ *   expanded={isExpanded}
+ *   onExpandedChange={setIsExpanded}
+ * >
+ *   <BranchList />
+ * </CollapsibleSection>
+ * ```
+ */
+declare const CollapsibleSection: React.FC<CollapsibleSectionProps>;
+//#endregion
+//#region ui/components/src/primitives/Collapsible/CollapsibleGroup.d.ts
+/**
+ * Coordinates multiple CollapsibleSection components.
+ * @param props - Component props
+ * @example Independent mode (default)
+ * ```tsx
+ * <CollapsibleGroup>
+ *   <CollapsibleSection title="Section 1">...</CollapsibleSection>
+ *   <CollapsibleSection title="Section 2">...</CollapsibleSection>
+ * </CollapsibleGroup>
+ * ```
+ * @example Accordion mode (only one open at a time)
+ * ```tsx
+ * <CollapsibleGroup mode="accordion">
+ *   <CollapsibleSection title="Section 1">...</CollapsibleSection>
+ *   <CollapsibleSection title="Section 2">...</CollapsibleSection>
+ * </CollapsibleGroup>
+ * ```
+ */
+declare const CollapsibleGroup: React.FC<CollapsibleGroupProps>;
+//#endregion
+//#region ui/components/src/primitives/Collapsible/CollapsibleContext.d.ts
+/**
+ * Hook to access CollapsibleGroup context.
+ * @returns Context value or null when used outside a group
+ */
+declare function useCollapsibleGroup(): CollapsibleContextValue | null;
+//#endregion
+//#region ui/components/src/primitives/ContextMenu/ContextMenu.types.d.ts
+/**
+ * A single action item rendered in the context menu.
+ */
+interface ContextMenuAction {
+  /** Unique identifier for the action */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Optional icon identifier (must match known icon set) */
+  icon?: string;
+  /** Category key for grouping */
+  category: string;
+  /** Optional keyboard shortcut display text */
+  shortcut?: string;
+}
+/**
+ * Category configuration for display ordering and labels.
+ */
+interface CategoryConfig {
+  /** Display label for the category group header */
+  label: string;
+  /** Sort order (lower = higher in menu) */
+  order: number;
+}
+/**
+ * Props for the generic ContextMenu component.
+ */
+interface ContextMenuProps {
+  /** Available actions to display */
+  actions: ContextMenuAction[];
+  /** Position to display the menu */
+  position: {
+    x: number;
+    y: number;
+  };
+  /** Callback when menu should close */
+  onClose: () => void;
+  /** Callback when an action is executed */
+  onExecute: (actionId: string) => void;
+  /** Category display config: maps category key to label + order */
+  categoryConfig: Record<string, CategoryConfig>;
+  /** ARIA label for the menu element */
+  ariaLabel: string;
+  /** Optional header content rendered above the action groups */
+  header?: ReactNode;
+}
+//#endregion
+//#region ui/components/src/primitives/ContextMenu/ContextMenu.d.ts
+/**
+ * Generic context menu component.
+ *
+ * Displays actions grouped by category with keyboard shortcuts.
+ * Closes on click outside or Escape key.
+ * Features glass panel effect with backdrop blur.
+ * @param props - Component props
+ */
+declare function ContextMenu(props: ContextMenuProps): _$react.ReactPortal | null;
+//#endregion
+//#region ui/components/src/primitives/ModalPortal/ModalPortal.d.ts
+interface ModalPortalProps {
+  /** Content to render at the document body level */
+  children: ReactNode;
+}
+/**
+ * Renders children into a React portal at document.body,
+ * escaping all ancestor stacking contexts.
+ * @param children - Portal content rendered at the document root
+ * @returns Portal-rendered children
+ */
+declare function ModalPortal({
+  children
+}: ModalPortalProps): _$react.ReactPortal | null;
+//#endregion
+//#region ui/components/src/primitives/Popover/Popover.d.ts
+/**
+ * Popover component props.
+ *
+ * Supports both controlled and uncontrolled open state.
+ * When `open` and `onOpenChange` are provided, the component is controlled.
+ * When omitted, the component manages open state internally.
+ */
+interface PopoverProps {
+  /** Trigger element that toggles the popover */
+  trigger: ReactElement;
+  /** Popover content */
+  children: ReactNode;
+  /** Alignment relative to trigger */
+  align?: 'start' | 'end';
+  /** Controlled open state (optional, uncontrolled by default) */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Accessible label for the dialog panel. */
+  ariaLabel?: string;
+  /** Accessible labelled-by id for the dialog panel. */
+  ariaLabelledBy?: string;
+}
+/**
+ * Popover primitive component.
+ *
+ * Floating panel anchored below a trigger element.
+ * Supports:
+ * - Click trigger to toggle open/close
+ * - Escape key to close
+ * - Click outside to close
+ * - Controlled (`open` + `onOpenChange`) and uncontrolled modes
+ * - Start or end alignment relative to the trigger
+ * @param props - Popover component properties
+ * @returns Popover component
+ */
+declare function Popover({
+  trigger,
+  children,
+  align,
+  open: controlledOpen,
+  onOpenChange,
+  ariaLabel,
+  ariaLabelledBy
+}: PopoverProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/primitives/Toggle/Toggle.d.ts
+/**
+ * Toggle size variants.
+ *
+ * - sm: 32x18px track
+ * - md: 40x22px track
+ */
+type ToggleSize = 'sm' | 'md';
+/**
+ * Base props for the Toggle switch component, excluding the accessible-name
+ * constraint which is enforced via {@link ToggleProps}.
+ */
+interface BaseToggleProps {
+  /** Whether the toggle is on. */
+  checked: boolean;
+  /**
+   * Called when the toggle is clicked.
+   * @param checked - The new checked state after the click.
+   */
+  onChange: (checked: boolean) => void;
+  /** Whether the toggle is disabled. */
+  disabled?: boolean;
+  /** Toggle size variant. */
+  size?: ToggleSize;
+  /** Additional CSS class. */
+  className?: string;
+}
+/**
+ * Discriminated union that enforces at least one of `accessibleLabel` or
+ * `ariaLabel` is supplied so the toggle always has an accessible name
+ * (WCAG 2.1 SC 1.3.1 / 4.1.2).
+ *
+ * - `accessibleLabel` — the primary accessible name for the toggle. Not
+ *   rendered as visible text; it is passed directly to `aria-label`. Use this
+ *   when a visible label is provided by the surrounding UI or is otherwise
+ *   unnecessary.
+ * - `ariaLabel` — an override accessible name. When both `accessibleLabel` and
+ *   `ariaLabel` are present, `ariaLabel` takes precedence.
+ */
+type AccessibleName = {
+  accessibleLabel: string;
+  ariaLabel?: string;
+} | {
+  accessibleLabel?: string;
+  ariaLabel: string;
+};
+/**
+ * Props for the Toggle switch component.
+ *
+ * At least one of `accessibleLabel` or `ariaLabel` must be provided so the
+ * toggle always has an accessible name (WCAG 2.1 SC 1.3.1 / 4.1.2).
+ */
+type ToggleProps = BaseToggleProps & AccessibleName;
+/**
+ * Toggle switch component.
+ *
+ * A pure presentational toggle switch rendered as an accessible `<button role="switch">`.
+ * State is fully controlled via `checked` and `onChange` — no internal state.
+ * Uses Aura theme tokens for all colors and sizing.
+ * @param props - Component props
+ * @returns Toggle switch component
+ * @example
+ * ```tsx
+ * <Toggle checked={enabled} onChange={setEnabled} accessibleLabel="Enable notifications" />
+ * <Toggle checked={active} onChange={setActive} size="sm" disabled ariaLabel="Toggle active" />
+ * ```
+ */
+declare function Toggle({
+  checked,
+  onChange,
+  disabled,
+  size,
+  accessibleLabel,
+  ariaLabel,
+  className
+}: ToggleProps): ReactNode;
+//#endregion
+//#region ui/components/src/icons/Icon.types.d.ts
+/**
+ * Shared props interface for all icon components.
+ *
+ * Icons are pure SVG wrappers with standardized sizing and accessibility.
+ */
+interface IconProps$1 {
+  /**
+   * Icon size in pixels (applies to both width and height)
+   * @defaultValue 16
+   */
+  size?: number;
+  /**
+   * Additional CSS class name
+   */
+  className?: string;
+  /**
+   * Whether the icon is decorative and should be hidden from screen readers
+   * @defaultValue true
+   */
+  'aria-hidden'?: boolean;
+  /**
+   * Accessible name for non-decorative icon usage.
+   * Supply this when `'aria-hidden'` is false.
+   * Concrete icon wrappers forward both accessibility props to the SVG; see
+   * IconAccessibility.test.tsx for the locked contract.
+   */
+  'aria-label'?: string;
+}
+/**
+ * Default icon props applied to all icons
+ */
+declare const DEFAULT_ICON_PROPS: Required<Pick<IconProps$1, 'size' | 'aria-hidden'>>;
+//#endregion
+//#region ui/components/src/icons/ChevronIcon.d.ts
+/**
+ * Extended props for ChevronIcon with direction support
+ */
+interface ChevronIconProps extends IconProps$1 {
+  /**
+   * Direction the chevron should point
+   * @defaultValue 'right'
+   */
+  direction?: 'left' | 'right' | 'up' | 'down';
+}
+/**
+ * Directional chevron icon.
+ * @param props - Icon props with direction
+ * @returns SVG chevron icon
+ */
+declare function ChevronIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel,
+  direction
+}: ChevronIconProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/AlertTriangleIcon.d.ts
+/**
+ * Warning triangle icon for alerts and cautions.
+ * @param props - Icon props
+ * @returns SVG alert triangle icon
+ */
+declare function AlertTriangleIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/ArchiveIcon.d.ts
+/**
+ * Archive box icon for archiving actions.
+ * @param props - Icon props
+ * @returns SVG archive icon
+ */
+declare function ArchiveIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/AttachmentIcon.d.ts
+/**
+ * Paperclip icon for attachment/file upload actions.
+ * @param props - Icon props
+ * @returns SVG attachment icon
+ */
+declare function AttachmentIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/ChatBubbleIcon.d.ts
+/**
+ * Chat bubble icon for messaging/conversation contexts.
+ * @param props - Icon props
+ * @returns SVG chat bubble icon
+ */
+declare function ChatBubbleIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/CloseIcon.d.ts
+/**
+ * X icon for close/dismiss actions.
+ * @param props - Icon props
+ * @returns SVG close icon
+ */
+declare function CloseIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/CompressIcon.d.ts
+/**
+ * Compress/minimize icon for reducing size or collapsing content.
+ * @param props - Icon props
+ * @returns SVG compress icon
+ */
+declare function CompressIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/ForkIcon.d.ts
+/**
+ * Fork icon for session/content forking actions.
+ * Shows a branching network pattern.
+ * @param props - Icon props
+ * @returns SVG fork icon
+ */
+declare function ForkIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/GitBranchIcon.d.ts
+/**
+ * Git branch icon for repository/version control contexts.
+ * @param props - Icon props
+ * @returns SVG git branch icon
+ */
+declare function GitBranchIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/GripVerticalIcon.d.ts
+/**
+ * Vertical grip icon for drag handles and reorderable items.
+ * @param props - Icon props
+ * @returns SVG grip icon
+ */
+declare function GripVerticalIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/KebabMenuIcon.d.ts
+/**
+ * Vertical three dots icon for dropdown menus.
+ * @param props - Icon props
+ * @returns SVG kebab menu icon
+ */
+declare function KebabMenuIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/MessagesSquareIcon.d.ts
+/**
+ * Multiple messages icon for sessions/conversations list.
+ * @param props - Icon props
+ * @returns SVG messages square icon
+ */
+declare function MessagesSquareIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/PlusIcon.d.ts
+/**
+ * Plus icon for add/create actions.
+ * @param props - Icon props
+ * @returns SVG plus icon
+ */
+declare function PlusIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/RestoreIcon.d.ts
+/**
+ * Circular restore/undo icon.
+ * @param props - Icon props
+ * @returns SVG restore icon
+ */
+declare function RestoreIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/SearchIcon.d.ts
+/**
+ * Magnifying glass icon for search actions.
+ * @param props - Icon props
+ * @returns SVG search icon
+ */
+declare function SearchIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/SendIcon.d.ts
+/**
+ * Paper plane icon for send/submit actions.
+ * @param props - Icon props
+ * @returns SVG send icon
+ */
+declare function SendIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/SpinnerIcon.d.ts
+/**
+ * Animated loading spinner icon.
+ *
+ * CSS animation should be applied via className for rotation effect.
+ * @param props - Icon props
+ * @returns SVG spinner icon
+ */
+declare function SpinnerIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/TrashIcon.d.ts
+/**
+ * Trash can icon for delete/remove actions.
+ * @param props - Icon props
+ * @returns SVG trash icon
+ */
+declare function TrashIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/UnlinkIcon.d.ts
+/**
+ * Broken link icon for disconnect/unlink actions.
+ * @param props - Icon props
+ * @returns SVG unlink icon
+ */
+declare function UnlinkIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/icons/WrenchIcon.d.ts
+/**
+ * Wrench icon for tools/settings contexts.
+ * @param props - Icon props
+ * @returns SVG wrench icon
+ */
+declare function WrenchIcon({
+  size,
+  className,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel
+}: IconProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/utils/ConfirmDialog/ConfirmDialog.d.ts
+/**
+ * ConfirmDialog - Modal confirmation dialog component
+ *
+ * Native HTML dialog element with glass panel styling.
+ * Supports multiple action options with different variants (primary, secondary, danger).
+ * Handles backdrop click and escape key for dismissal.
+ */
+/**
+ * Single action option for the confirmation dialog.
+ * @param id - Unique identifier for the option (passed to onSelect)
+ * @param label - Display text for the button
+ * @param variant - Visual style variant (primary, secondary, danger)
+ * @param disabled - Whether the option is disabled
+ */
+interface ConfirmDialogOption {
+  /** Unique identifier for the option */
+  id: string;
+  /** Display text for the button */
+  label: string;
+  /** Visual style variant */
+  variant?: 'primary' | 'secondary' | 'danger';
+  /** Whether the option is disabled */
+  disabled?: boolean;
+}
+interface ConfirmDialogBaseProps {
+  /** Whether the dialog is currently open */
+  isOpen: boolean;
+  /** Dialog title text */
+  title: string;
+  /** Dialog message/description text */
+  message: string;
+  /** Optional detailed description text */
+  details?: string;
+  /** Show "Don't ask again" checkbox */
+  showDontAskAgain?: boolean;
+  /** Current checkbox state */
+  dontAskAgain?: boolean;
+  /** Checkbox change callback */
+  onDontAskAgainChange?: (checked: boolean) => void;
+  /** Array of action options to display */
+  options: ConfirmDialogOption[];
+  /** Callback when an option is selected */
+  onSelect: (optionId: string) => void;
+  /** Optional callback when dialog is dismissed */
+  onClose?: () => void;
+  /** Optional positioning class or coordinates */
+  position?: 'center' | 'top-center' | 'bottom-center';
+}
+interface ConfirmDialogWithDontAskAgain extends ConfirmDialogBaseProps {
+  /** Show "Don't ask again" checkbox */
+  showDontAskAgain: true;
+  /** Current checkbox state */
+  dontAskAgain: boolean;
+  /** Checkbox change callback */
+  onDontAskAgainChange: (checked: boolean) => void;
+}
+interface ConfirmDialogWithoutDontAskAgain extends ConfirmDialogBaseProps {
+  /** Show "Don't ask again" checkbox */
+  showDontAskAgain?: false;
+  /** Current checkbox state */
+  dontAskAgain?: never;
+  /** Checkbox change callback */
+  onDontAskAgainChange?: never;
+}
+type ConfirmDialogProps = ConfirmDialogWithDontAskAgain | ConfirmDialogWithoutDontAskAgain;
+/**
+ * Modal confirmation dialog using native HTML dialog element.
+ *
+ * Features:
+ * - Native dialog element with showModal()/close() API
+ * - Glass panel styling with backdrop blur
+ * - Action buttons with variant support (primary, secondary, danger)
+ * - Escape key and backdrop click dismissal
+ * - Theme-aware styling via CSS custom properties
+ * @param props - Component props
+ * @example
+ * ```tsx
+ * <ConfirmDialog
+ *   isOpen={showDialog}
+ *   title="Delete Session?"
+ *   message="This action cannot be undone."
+ *   options={[
+ *     { id: 'cancel', label: 'Cancel', variant: 'secondary' },
+ *     { id: 'delete', label: 'Delete', variant: 'danger' },
+ *   ]}
+ *   onSelect={(id) => handleSelection(id)}
+ *   onClose={() => setShowDialog(false)}
+ * />
+ * ```
+ */
+declare function ConfirmDialog(props: ConfirmDialogProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/utils/PromptDialog/PromptDialog.d.ts
+/**
+ * PromptDialog - Modal text input dialog component
+ *
+ * Native HTML dialog element with glass panel styling.
+ * Supports single-line input or multiline textarea.
+ * Handles backdrop click and escape key for dismissal.
+ */
+/**
+ * Props for PromptDialog component
+ * @param isOpen - Whether the dialog is currently open
+ * @param title - Dialog title text
+ * @param message - Dialog message/description text
+ * @param placeholder - Placeholder text for the input field
+ * @param defaultValue - Initial value for the input field
+ * @param multiline - Whether to use a multiline textarea
+ * @param submitLabel - Label for the submit button
+ * @param cancelLabel - Label for the cancel button
+ * @param onSubmit - Callback when text is submitted - receives the entered text
+ * @param onClose - Callback when dialog is dismissed (escape/backdrop/cancel)
+ */
+interface PromptDialogProps {
+  /** Whether the dialog is currently open */
+  isOpen: boolean;
+  /** Dialog title text */
+  title: string;
+  /** Dialog message/description text */
+  message: string;
+  /** Placeholder text for the input field */
+  placeholder?: string;
+  /** Initial value for the input field */
+  defaultValue?: string;
+  /** Whether to use a multiline textarea */
+  multiline?: boolean;
+  /** Label for the submit button */
+  submitLabel?: string;
+  /** Label for the cancel button */
+  cancelLabel?: string;
+  /** Callback when text is submitted */
+  onSubmit: (value: string) => void;
+  /** Callback when dialog is dismissed */
+  onClose: () => void;
+}
+/**
+ * Modal text input dialog using native HTML dialog element.
+ *
+ * Features:
+ * - Native dialog element with showModal()/close() API
+ * - Glass panel styling with backdrop blur
+ * - Single-line input or multiline textarea mode
+ * - Enter key submits (Ctrl/Cmd+Enter for multiline)
+ * - Escape key and backdrop click dismissal
+ * - Theme-aware styling via CSS custom properties
+ * @param props - Component props
+ * @example
+ * ```tsx
+ * <PromptDialog
+ *   isOpen={showPrompt}
+ *   title="Add Comment"
+ *   message="Enter your comment for this line."
+ *   placeholder="Write your comment..."
+ *   multiline
+ *   onSubmit={(text) => handleComment(text)}
+ *   onClose={() => setShowPrompt(false)}
+ * />
+ * ```
+ */
+declare function PromptDialog(props: PromptDialogProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/utils/SlidePanel/SlidePanel.d.ts
+interface SlidePanelProps {
+  /** Whether the panel is open */
+  isOpen: boolean;
+  /** Close handler */
+  onClose: () => void;
+  /** Panel title */
+  title: string;
+  /** Panel subtitle */
+  subtitle?: string;
+  /** Panel content */
+  children: ReactNode;
+  /** Width of the panel */
+  width?: 'sm' | 'md' | 'lg';
+  /** Position - seam for mobile and left-side panels */
+  position?: 'left' | 'right' | 'bottom';
+}
+/**
+ * Slide-in panel component for forms and detail views.
+ *
+ * Features:
+ * - Slides in from right (or bottom for mobile)
+ * - Overlay backdrop that closes on click
+ * - Escape key closes
+ * - Smooth CSS transitions
+ * - Glass panel styling with theme tokens
+ * @param props - Component props
+ * @returns SlidePanel component
+ */
+declare function SlidePanel({
+  isOpen,
+  onClose,
+  title,
+  subtitle,
+  children,
+  width,
+  position
+}: SlidePanelProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/utils/ResizablePanel/ResizablePanel.d.ts
+type ResizablePanelOrientation = 'horizontal' | 'vertical';
+interface ResizablePanelProps {
+  /**
+   * Panel title
+   */
+  title?: string;
+  /**
+   * Panel content
+   */
+  children: ReactNode;
+  /**
+   * Current size in pixels (width for horizontal, height for vertical)
+   */
+  size: number;
+  /**
+   * Callback when size changes (during drag)
+   */
+  onSizeChange: (size: number) => void;
+  /**
+   * Minimum size
+   */
+  minSize?: number;
+  /**
+   * Maximum size
+   */
+  maxSize?: number;
+  /**
+   * Orientation of the resize handle
+   * @defaultValue 'horizontal'
+   */
+  orientation?: ResizablePanelOrientation;
+  /**
+   * Whether panel is pinned (push mode)
+   */
+  isPinned?: boolean;
+  /**
+   * Callback when pin state changes
+   */
+  onPinChange?: (pinned: boolean) => void;
+  /**
+   * Callback when close button clicked
+   */
+  onClose?: () => void;
+  /**
+   * Additional CSS class
+   */
+  className?: string;
+}
+/**
+ * Resizable panel with pin toggle
+ *
+ * Features:
+ * - Drag handle for resizing (horizontal or vertical)
+ * - Pin toggle (pinned = push mode, unpinned = overlay)
+ * - Close button
+ * - Scrollable content area
+ * @param props - Component props
+ */
+declare function ResizablePanel(props: ResizablePanelProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/utils/FatalErrorDialog/FatalErrorDialog.d.ts
+/**
+ * FatalErrorDialog - Self-contained fatal error modal
+ *
+ * Pure component with inline styles, designed to render outside ThemeProvider.
+ * Uses native HTML dialog element with showModal()/close() API.
+ * Escape key and backdrop click dismissal are intentionally disabled — the caller
+ * must explicitly provide action buttons to resolve the error state.
+ */
+type NonEmptyArray<T> = [T, ...T[]];
+/**
+ * A single action button rendered in the FatalErrorDialog footer.
+ * @param id - Unique identifier passed back to onAction
+ * @param label - Display text for the button
+ * @param variant - Visual style: 'primary' (highlighted) or 'secondary' (muted)
+ */
+interface FatalErrorDialogAction {
+  /** Unique identifier passed back to onAction */
+  id: string;
+  /** Display text for the button */
+  label: string;
+  /** Visual style variant */
+  variant?: 'primary' | 'secondary';
+}
+/**
+ * Props for the FatalErrorDialog component.
+ * @param isOpen - Whether the dialog is currently visible
+ * @param title - Short error title shown in the dialog header
+ * @param message - Human-readable description of the error
+ * @param details - Optional technical details (e.g. raw error message) shown in a collapsible section
+ * @param actions - Ordered list of action buttons; must contain at least one action
+ * @param onAction - Called with the action id when a button is clicked
+ */
+interface FatalErrorDialogProps {
+  /** Whether the dialog is open. */
+  isOpen: boolean;
+  /** Error title. */
+  title: string;
+  /** Error description. */
+  message: string;
+  /** Technical details (error message). */
+  details?: string;
+  /** Action buttons. */
+  actions: NonEmptyArray<FatalErrorDialogAction>;
+  /** Called when an action button is clicked. */
+  onAction: (actionId: string) => void;
+}
+/**
+ * Modal dialog for fatal, unrecoverable application errors.
+ *
+ * Intentionally self-contained with inline styles so it renders correctly even
+ * when mounted outside `ThemeProvider`. Escape key and backdrop click are
+ * suppressed — the caller must resolve the error via the provided action buttons.
+ * @param props - Component props
+ * @example
+ * ```tsx
+ * <FatalErrorDialog
+ *   isOpen={hasFatalError}
+ *   title="Connection lost"
+ *   message="The relay connection could not be established."
+ *   details={error.message}
+ *   actions={[{ id: 'reload', label: 'Reload', variant: 'primary' }]}
+ *   onAction={(id) => id === 'reload' && window.location.reload()}
+ * />
+ * ```
+ */
+declare function FatalErrorDialog(props: FatalErrorDialogProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ui/components/src/toast/MultiActionToast.d.ts
+interface MultiActionToastAction {
+  /** Stable action identifier forwarded to the action callback. */
+  id: string;
+  /** Visible button label. */
+  label: string;
+  /** Visual treatment for the action button. */
+  variant?: 'default' | 'destructive' | 'outline';
+}
+interface MultiActionToastPayload {
+  /** Main message content to display. */
+  message: string;
+  /** Optional title/headline for the toast. */
+  title?: string;
+  /** Optional action buttons attached to the toast. */
+  actions?: MultiActionToastAction[];
+}
+interface MultiActionToastProps {
+  /** Toast display payload rendered by this component. */
+  payload: MultiActionToastPayload;
+  /** Callback when an action is clicked */
+  onAction: (actionId: string) => void;
+  /** Callback when toast is dismissed */
+  onDismiss: () => void;
+}
+/**
+ * Multi-action toast notification component.
+ *
+ * Pure UI component for displaying toasts with multiple interactive actions.
+ * Renders actions as buttons with appropriate variants.
+ * @param payload - Toast data including title, message, and actions
+ * @param onAction - Callback when an action button is clicked
+ * @param onDismiss - Callback when the dismiss button is clicked
+ * @returns Multi-action toast component
+ * @example
+ * ```tsx
+ * <MultiActionToast
+ *   payload={{
+ *     title: 'Unsaved Changes',
+ *     message: 'You have unsaved changes. Do you want to save them?',
+ *     actions: [
+ *       { id: 'save', label: 'Save', variant: 'default' },
+ *       { id: 'discard', label: 'Discard', variant: 'destructive' },
+ *     ],
+ *   }}
+ *   onAction={(id) => console.log('Action:', id)}
+ *   onDismiss={() => console.log('Dismissed')}
+ * />
+ * ```
+ */
+declare function MultiActionToast({
+  payload,
+  onAction,
+  onDismiss
+}: MultiActionToastProps): ReactNode;
+//#endregion
+//#region ui/components/src/utils/dom-hooks.d.ts
+/**
+ * Attach a document-level `keydown` listener that calls `handler` when the
+ * user presses Escape. The listener is attached only while `enabled` is true
+ * and automatically removed on cleanup.
+ * @param handler - Callback invoked when Escape is pressed.
+ * @param enabled - When `false` the listener is not attached. Defaults to `true`.
+ */
+declare function useEscapeKey(handler: () => void, enabled?: boolean): void;
+/**
+ * Lock `document.body` scroll while `enabled` is true.
+ *
+ * Saves and restores the previous `overflow` inline style so an existing
+ * body-overflow policy is not lost when the overlay closes.
+ * @param enabled - When `true` body scroll is locked; when `false` it is restored.
+ */
+declare function useBodyScrollLock(enabled: boolean): void;
+/**
+ * Focus the first focusable element inside `ref` when `enabled` becomes true.
+ *
+ * Falls back to focusing `ref` itself when no focusable descendant is found.
+ * Restores focus to the previously-active element on cleanup (i.e. when the
+ * overlay closes).
+ *
+ * Tab-cycle trapping is intentionally **not** included here. Components that
+ * need full trap behaviour should pair this with {@link useFocusTrap}.
+ * @param ref - Ref to the container whose first focusable child should receive focus.
+ * @param enabled - When `true` focus management is active.
+ */
+declare function useFocusOnOpen(ref: RefObject<HTMLElement | null>, enabled: boolean): void;
+/**
+ * Keep Tab focus inside `ref` while `enabled` is true.
+ *
+ * This owns only the Tab-cycle contract. Pair with {@link useFocusOnOpen} when
+ * the same overlay should also move initial focus and restore prior focus on
+ * close.
+ * @param ref - Ref to the focus containment root.
+ * @param enabled - When `true`, Tab and Shift+Tab are trapped inside `ref`.
+ */
+declare function useFocusTrap(ref: RefObject<HTMLElement | null>, enabled: boolean): void;
+//#endregion
+export { AlertTriangleIcon, AppShell, type AppShellProps, ArchiveIcon, AttachmentIcon, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, Button, ButtonGroupFilter, type ButtonGroupFilterProps, type ButtonGroupOption, type ButtonProps, type ButtonSize, type ButtonVariant, type CategoryConfig, ChatBubbleIcon, ChevronIcon, type ChevronIconProps, CloseIcon, type CollapsibleContextValue, CollapsibleGroup, type CollapsibleGroupMode, type CollapsibleGroupProps, CollapsibleSection, type CollapsibleSectionProps, CompressIcon, ConfirmDialog, type ConfirmDialogOption, type ConfirmDialogProps, ContentHeader, type ContentHeaderProps, ContextMenu, type ContextMenuAction, type ContextMenuProps, DEFAULT_ICON_PROPS, Dropdown, type DropdownItem, type DropdownProps, FatalErrorDialog, type FatalErrorDialogAction, type FatalErrorDialogProps, FilterChipGroup, type FilterChipGroupProps, type FilterOption, ForkIcon, GitBranchIcon, GlassPanel, type GlassPanelProps, GripVerticalIcon, type HeaderActionElement, HeaderIconAction, type HeaderIconActionProps, HeaderTextAction, type HeaderTextActionProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconName, type IconProps, IconSidebar, type IconSidebarProps, Input, type InputProps, type InputSize, KebabMenuIcon, type LeafPane, ListPage, type ListPageProps, Logo, type LogoProps, type LogoVariant, MessagesSquareIcon, ModalPortal, type ModalPortalProps, MultiActionToast, type MultiActionToastProps, type NavItem, NavSidebar, type NavSidebarItem, type NavSidebarLinkRenderer, type NavSidebarProps, type NavSidebarSection, Page, type PageProps, type Pane, type PaneContent, type PaneSizeConstraints, Panel, type PanelPadding, type PanelProps, type PanelVariant, PlusIcon, Popover, type PopoverProps, PromptDialog, type PromptDialogProps, ResizablePanel, type ResizablePanelOrientation, type ResizablePanelProps, RestoreIcon, type IconProps$1 as SVGIconProps, SearchIcon, SendIcon, SlidePanel, type SlidePanelProps, SlotPanel, type SlotPanelPadding, type SlotPanelProps, SpinnerIcon, SplitPane, type SplitPaneProps, type SplitPane$1 as SplitPaneType, Textarea, type TextareaProps, type Theme, ThemeContext, type ThemeContextValue, ThemeProvider, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPosition, type TooltipProps, Topbar, type TopbarProps, TrashIcon, UnlinkIcon, WrenchIcon, auraTheme, defaultThemeId, isIconName, themes, useBodyScrollLock, useCollapsibleGroup, useEscapeKey, useFocusOnOpen, useFocusTrap, useTheme };