@cere/cere-design-system 0.0.35 → 0.0.38

package/dist/index.d.ts

@@ -1,36 +1,37 @@
-import { Theme } from '@mui/material/styles';
+import { Theme, SxProps } from '@mui/material/styles';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { LottieComponentProps } from 'lottie-react';
 import * as React$1 from 'react';
-import React__default, { ReactNode, Ref, PropsWithChildren, ReactElement, AriaAttributes } from 'react';
+import React__default, { RefObject, ReactNode, Ref, PropsWithChildren, ReactElement, Key, AriaAttributes } from 'react';
 import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
 import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
 import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab';
-import { ButtonGroupProps as ButtonGroupProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, PopoverProps, StepProps as StepProps$1, StepButtonProps as StepButtonProps$1, StepContentProps as StepContentProps$1, StepLabelProps as StepLabelProps$1, StepperProps as StepperProps$1, MenuProps as MenuProps$1, DialogProps as DialogProps$1, BoxProps, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, CircularProgressProps as CircularProgressProps$1, SvgIconProps } from '@mui/material';
+import { ButtonGroupProps as ButtonGroupProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, PopoverProps, StepProps as StepProps$1, StepButtonProps as StepButtonProps$1, StepContentProps as StepContentProps$1, StepLabelProps as StepLabelProps$1, StepperProps as StepperProps$1, MenuProps as MenuProps$1, CircularProgressProps as CircularProgressProps$1, DialogProps as DialogProps$1, BoxProps, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, SvgIconProps } from '@mui/material';
 export { Box, BoxProps, Container, ContainerProps, FormControl, FormControlLabel, FormControlLabelProps, FormControlProps, FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, Grid2 as Grid, Grid2Props as GridProps, InputAdornment, InputAdornmentProps, InputLabel, InputLabelProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
 import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
 import { SwitchProps as SwitchProps$1 } from '@mui/material/Switch';
 import { CheckboxProps as CheckboxProps$1 } from '@mui/material/Checkbox';
 import { RadioProps as RadioProps$1 } from '@mui/material/Radio';
 import { ListItemButtonProps } from '@mui/material/ListItemButton';
+import { TabProps as TabProps$1 } from '@mui/material/Tab';
+import { PaginationProps as PaginationProps$1 } from '@mui/material/Pagination';
 import { BadgeProps as BadgeProps$1 } from '@mui/material/Badge';
 import { ChipProps as ChipProps$1 } from '@mui/material/Chip';
 import { TooltipProps as TooltipProps$1 } from '@mui/material/Tooltip';
-import { TabProps as TabProps$1 } from '@mui/material/Tab';
-import { PaginationProps as PaginationProps$1 } from '@mui/material/Pagination';
+import { AlertProps as AlertProps$1 } from '@mui/material/Alert';
+import { SnackbarProps as SnackbarProps$1 } from '@mui/material/Snackbar';
 import { DrawerProps as DrawerProps$1 } from '@mui/material/Drawer';
 import { CardProps as CardProps$1 } from '@mui/material/Card';
 import { CardContentProps } from '@mui/material/CardContent';
 import { CardHeaderProps } from '@mui/material/CardHeader';
 import { CardActionsProps } from '@mui/material/CardActions';
-import { PaperProps as PaperProps$1 } from '@mui/material/Paper';
+import { CardMediaProps as CardMediaProps$1 } from '@mui/material/CardMedia';
 import { AvatarProps as AvatarProps$1 } from '@mui/material/Avatar';
 import { BreadcrumbsProps as BreadcrumbsProps$1 } from '@mui/material/Breadcrumbs';
+import { PaperProps as PaperProps$1 } from '@mui/material/Paper';
 import { DividerProps as DividerProps$1 } from '@mui/material/Divider';
 import { LinkProps as LinkProps$1 } from '@mui/material/Link';
 import { BoxProps as BoxProps$1 } from '@mui/material/Box';
-import { AlertProps as AlertProps$1 } from '@mui/material/Alert';
-import { SnackbarProps as SnackbarProps$1 } from '@mui/material/Snackbar';
 import { QRCodeProps as QRCodeProps$1 } from 'react-qr-code';
 import { ReactFlowProps, Node, Edge, OnNodesChange, OnEdgesChange, NodeTypes, EdgeTypes, BackgroundVariant, MiniMapProps, ReactFlowInstance, NodeProps } from 'reactflow';
 export { Background, BackgroundVariant, ConnectionLineType, Controls, Edge, EdgeTypes, MiniMap, Node, NodeTypes, OnEdgesChange, OnNodesChange, Panel, ReactFlowInstance } from 'reactflow';
@@ -38,7 +39,224 @@ import { Monaco } from '@monaco-editor/react';
 import { editor } from 'monaco-editor';
 export { default as RadioGroup } from '@mui/material/RadioGroup';
 
+/**
+ * ROB primary brand colors (Figma node 11-1393).
+ */
+declare const robPrimaryPalette: {
+    readonly fandango: "#BD32A7";
+    readonly electricViolet: "#8B00EC";
+    readonly ultraViolet: "#6750A4";
+    readonly periwinkle: "#D0BCFF";
+};
+/**
+ * ROB extended palette with gradient shades and secondary accents
+ * (Figma node 11-1447).
+ */
+declare const robPaletteExtended: {
+    readonly dark1: "#280e61";
+    readonly dark2: "#531584";
+    readonly dark3: "#710c7a";
+    readonly dark4: "#920269";
+    readonly dark5: "#c71454";
+    readonly dark6: "#ff6341";
+    readonly bright1: "#5311e3";
+    readonly bright2: "#eb03ff";
+    readonly bright3: "#ff17ab";
+    readonly bright4: "#ff6a85";
+    readonly light1: "#baa0f4";
+    readonly light2: "#d399fc";
+    readonly light3: "#f79aff";
+    readonly light4: "#faabde";
+    readonly light5: "#ffc4ce";
+    readonly nearBlack1: "#0b0f18";
+    readonly nearBlack2: "#0d0627";
+    readonly nearBlack3: "#161d30";
+    readonly nearBlack4: "#23194b";
+};
+/**
+ * Deployment dashboard entity colors (Figma 11-2105).
+ */
+declare const deploymentEntityColors: {
+    readonly workspace: "#aa44f2";
+    readonly stream: "#53b96a";
+    readonly deployment: "#eeb510";
+    readonly engagement: "#f941e6";
+    readonly agent: "#77c3ff";
+};
+/**
+ * Deployment dashboard status colors (Figma 11-2105).
+ */
+declare const deploymentStatusColors: {
+    readonly normal: "#53b96a";
+    readonly warning: "#eeb510";
+    readonly error: "#ef5059";
+    readonly disabled: "#ffffff";
+    readonly disabledDim: "#ded8e1";
+};
+/**
+ * Workflow node color families (Figma 277-8244).
+ *
+ * Each node type has an accent color plus tints/shades for card borders,
+ * badge backgrounds, badge borders, and badge text. These are hand-picked
+ * Figma values, not algorithmically derived.
+ */
+declare const workflowNodeColors: {
+    readonly start: {
+        readonly accent: "#00C950";
+        readonly cardBorder: "#7BF1A8";
+        readonly badgeBg: "#F0FDF4";
+        readonly badgeBorder: "#B9F8CF";
+        readonly badgeText: "#008236";
+    };
+    readonly input: {
+        readonly accent: "#00A6F4";
+        readonly cardBorder: "#74D4FF";
+        readonly badgeBg: "#F0F9FF";
+        readonly badgeBorder: "#B8E6FE";
+        readonly badgeText: "#0069A8";
+    };
+    readonly stream: {
+        readonly accent: "#00B8DB";
+        readonly cardBorder: "#53EAFD";
+        readonly badgeBg: "#ECFEFF";
+        readonly badgeBorder: "#A2F4FD";
+        readonly badgeText: "#007595";
+    };
+    readonly rafts: {
+        readonly accent: "#FF6900";
+        readonly cardBorder: "#FFB86A";
+        readonly badgeBg: "#FFF7ED";
+        readonly badgeBorder: "#FFD6A8";
+        readonly badgeText: "#CA3500";
+    };
+    readonly cubbies: {
+        readonly accent: "#D0C900";
+        readonly cardBorder: "#D0C900";
+        readonly badgeBg: "#FCFFED";
+        readonly badgeBorder: "#D0C900";
+        readonly badgeText: "#747500";
+    };
+    readonly events: {
+        readonly accent: "#F6339A";
+        readonly cardBorder: "#FDA5D5";
+        readonly badgeBg: "#FDF2F8";
+        readonly badgeBorder: "#FCCEE8";
+        readonly badgeText: "#C6005C";
+    };
+    readonly trigger: {
+        readonly accent: "#AD46FF";
+        readonly cardBorder: "#DAB2FF";
+        readonly badgeBg: "#FAF5FF";
+        readonly badgeBorder: "#E9D4FF";
+        readonly badgeText: "#8200DB";
+    };
+    readonly action: {
+        readonly accent: "#2B7FFF";
+        readonly cardBorder: "#8EC5FF";
+        readonly badgeBg: "#EFF6FF";
+        readonly badgeBorder: "#BEDBFF";
+        readonly badgeText: "#1447E6";
+    };
+    readonly aiModel: {
+        readonly accent: "#615FFF";
+        readonly cardBorder: "#A3B3FF";
+        readonly badgeBg: "#EEF2FF";
+        readonly badgeBorder: "#C6D2FF";
+        readonly badgeText: "#432DD7";
+    };
+    readonly aiAgent: {
+        readonly accent: "#D0A2FB";
+        readonly cardBorder: "#D0A2FB";
+        readonly badgeBg: "#F8EEFF";
+        readonly badgeBorder: "#D9BCF3";
+        readonly badgeText: "#9F40F8";
+    };
+    readonly condition: {
+        readonly accent: "#FE9A00";
+        readonly cardBorder: "#FFD230";
+        readonly badgeBg: "#FFFBEB";
+        readonly badgeBorder: "#FEE685";
+        readonly badgeText: "#BB4D00";
+    };
+    readonly output: {
+        readonly accent: "#00BC7D";
+        readonly cardBorder: "#5EE9B5";
+        readonly badgeBg: "#ECFDF5";
+        readonly badgeBorder: "#A4F4CF";
+        readonly badgeText: "#007A55";
+    };
+    readonly end: {
+        readonly accent: "#FB2C36";
+        readonly cardBorder: "#FFA2A2";
+        readonly badgeBg: "#FEF2F2";
+        readonly badgeBorder: "#FFC9C9";
+        readonly badgeText: "#C10007";
+    };
+    readonly parallel: {
+        readonly accent: "#14B8A6";
+        readonly cardBorder: "#5EEAD4";
+        readonly badgeBg: "#F0FDFA";
+        readonly badgeBorder: "#99F6E4";
+        readonly badgeText: "#0F766E";
+    };
+    readonly merge: {
+        readonly accent: "#6366F1";
+        readonly cardBorder: "#A5B4FC";
+        readonly badgeBg: "#EEF2FF";
+        readonly badgeBorder: "#C7D2FE";
+        readonly badgeText: "#4338CA";
+    };
+};
+/**
+ * Shared workflow chrome UI colors (Figma 277-8244).
+ *
+ * Colors used across workflow top bar, time bar, side inspector, and node
+ * title/description text. Extracted here so component files stay hex-free.
+ */
+declare const workflowChromeColors: {
+    readonly inputBg: "#D8D4DD";
+    readonly inputBorder: "#A855F7";
+    readonly labelText: "#6A7282";
+    readonly iconColor: "#4A4458";
+    readonly buttonPrimary: "#B65FF4";
+    readonly buttonHover: "#A855F7";
+    readonly buttonActive: "#9333EA";
+    readonly closeBtnBg: "#9E9EAE";
+    readonly progressBg: "#CEC6D8";
+    readonly stepBtnBg: "#F5F1F7";
+    readonly stepBtnBgHover: "#E7E0EC";
+    readonly divider: "#D6CEDD";
+    readonly mutedText: "#938F99";
+    readonly titleText: "#1E2939";
+    readonly descriptionText: "#6A7282";
+};
+/**
+ * Workflow connection/edge colors (Figma 277-8244).
+ */
+declare const workflowConnectionColors: {
+    readonly success: "#22C55E";
+    readonly process: "#3B82F6";
+    readonly stream: "#06B6D4";
+    readonly error: "#EF4444";
+};
+
+/**
+ * Design system theme barrel.
+ *
+ * Composes the MUI theme from token modules and re-exports everything
+ * the public API needs. Internal structure:
+ *
+ *   primitives.ts  - Tier 1: raw color values (hue + shade)
+ *   semantic.ts    - Tier 2: intent-based tokens
+ *   typography.ts  - Font family and type scale
+ *   components.ts  - MUI component style overrides
+ *   spacing.ts     - Border radius and sizing constants
+ */
+
 declare module '@mui/material/styles' {
+    interface TypeBackground {
+        selected: string;
+    }
     interface Palette {
         deployment: {
             entity: typeof deploymentEntityColors;
@@ -47,6 +265,7 @@ declare module '@mui/material/styles' {
         workflow: {
             node: typeof workflowNodeColors;
             connection: typeof workflowConnectionColors;
+            chrome: typeof workflowChromeColors;
         };
     }
     interface PaletteOptions {
@@ -55,147 +274,72 @@ declare module '@mui/material/styles' {
             status?: Record<string, string>;
         };
         workflow?: {
-            node?: Record<string, string>;
-            connection?: Record<string, string>;
+            node?: Partial<typeof workflowNodeColors>;
+            connection?: Partial<typeof workflowConnectionColors>;
+            chrome?: Partial<typeof workflowChromeColors>;
         };
     }
 }
 declare const colors: {
     primary: {
-        main: string;
-        light: string;
-        dark: string;
-        contrastText: string;
+        main: "#1976d2";
+        light: "#1976d2";
+        dark: "#1565c0";
+        contrastText: "#FFFFFF";
     };
     secondary: {
-        main: string;
-        light: string;
-        dark: string;
-        contrastText: string;
+        main: "#666666";
+        light: "#999999";
+        dark: "#333333";
+        contrastText: "#FFFFFF";
     };
     success: {
-        main: string;
-        light: string;
-        dark: string;
-        contrastText: string;
+        main: "#10B981";
+        light: "#34D399";
+        dark: "#059669";
+        contrastText: "#FFFFFF";
     };
     error: {
-        main: string;
-        light: string;
-        dark: string;
-        contrastText: string;
+        main: "#EF4444";
+        light: "#F87171";
+        dark: "#DC2626";
+        contrastText: "#FFFFFF";
     };
     warning: {
-        main: string;
-        light: string;
-        dark: string;
-        contrastText: string;
+        main: "#F59E0B";
+        light: "#FBBF24";
+        dark: "#D97706";
+        contrastText: "#FFFFFF";
     };
     tertiary: {
-        main: string;
-        light: string;
-        dark: string;
-        contrastText: string;
+        main: "#F59E0B";
+        light: "#FBBF24";
+        dark: "#D97706";
+        contrastText: "#1A1A1A";
     };
     grey: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
+        readonly 50: "#FAFAFA";
+        readonly 100: "#F5F5F5";
+        readonly 200: "#EEEEEE";
+        readonly 300: "#E0E0E0";
+        readonly 400: "#BDBDBD";
+        readonly 500: "#9E9E9E";
+        readonly 600: "#757575";
+        readonly 700: "#616161";
+        readonly 800: "#424242";
+        readonly 900: "#212121";
     };
     text: {
-        primary: string;
-        secondary: string;
-        disabled: string;
+        primary: "#1A1A1A";
+        secondary: "#666666";
+        disabled: "#999999";
     };
     background: {
-        default: string;
-        paper: string;
-        selected: string;
+        default: "#FFFFFF";
+        paper: "#FFFFFF";
+        selected: "rgba(123, 44, 191, 0.1)";
     };
 };
-declare const deploymentEntityColors: {
-    workspace: string;
-    stream: string;
-    deployment: string;
-    engagement: string;
-    agent: string;
-};
-declare const deploymentStatusColors: {
-    normal: string;
-    warning: string;
-    error: string;
-    disabled: string;
-    disabledDim: string;
-};
-declare const workflowNodeColors: {
-    readonly start: "#00C950";
-    readonly input: "#00A6F4";
-    readonly stream: "#00B8DB";
-    readonly rafts: "#FF6900";
-    readonly cubbies: "#D0C900";
-    readonly events: "#F6339A";
-    readonly trigger: "#AD46FF";
-    readonly action: "#2B7FFF";
-    readonly aiModel: "#615FFF";
-    readonly aiAgent: "#D0A2FB";
-    readonly condition: "#FE9A00";
-    readonly output: "#00BC7D";
-    readonly end: "#FB2C36";
-    readonly parallel: "#14B8A6";
-    readonly merge: "#6366F1";
-};
-declare const workflowConnectionColors: {
-    readonly success: "#22C55E";
-    readonly process: "#3B82F6";
-    readonly stream: "#06B6D4";
-    readonly error: "#EF4444";
-};
-/**
- * ROB primary brand color palette (Figma node 11-1393)
- * Four main brand colors for the ROB design system
- */
-declare const robPrimaryPalette: {
-    /** Primary magenta/pink - Figma node 11-1394 */
-    readonly fandango: "#BD32A7";
-    /** Vivid purple - Figma node 11-1407 */
-    readonly electricViolet: "#8B00EC";
-    /** Mid-tone purple - Figma node 11-1420 */
-    readonly ultraViolet: "#6750A4";
-    /** Light lavender - Figma node 11-1433 */
-    readonly periwinkle: "#D0BCFF";
-};
-/**
- * ROB extended palette with additional swatches (Figma node 11-1447)
- * Gradient shades and secondary accents from the ROB color grid
- */
-declare const robPaletteExtended: {
-    readonly dark1: "#280e61";
-    readonly dark2: "#531584";
-    readonly dark3: "#710c7a";
-    readonly dark4: "#920269";
-    readonly dark5: "#c71454";
-    readonly dark6: "#ff6341";
-    readonly bright1: "#5311e3";
-    readonly bright2: "#eb03ff";
-    readonly bright3: "#ff17ab";
-    readonly bright4: "#ff6a85";
-    readonly light1: "#baa0f4";
-    readonly light2: "#d399fc";
-    readonly light3: "#f79aff";
-    readonly light4: "#faabde";
-    readonly light5: "#ffc4ce";
-    readonly nearBlack1: "#0b0f18";
-    readonly nearBlack2: "#0d0627";
-    readonly nearBlack3: "#161d30";
-    readonly nearBlack4: "#23194b";
-};
 declare const theme: Theme;
 
 declare const CheckMarkAnimation: () => react_jsx_runtime.JSX.Element;
@@ -311,12 +455,35 @@ interface TextFieldProps extends Omit<TextFieldProps$1, 'size'> {
 }
 declare const TextField: React__default.FC<TextFieldProps>;
 
-interface SearchFieldProps extends Omit<TextFieldProps, 'InputProps'> {
+type SearchFieldVariant = 'standard' | 'pill';
+interface SearchFieldProps extends Omit<TextFieldProps, 'InputProps' | 'variant'> {
     placeholder?: string;
+    /** Fires with the next input value on every change. */
     onSearch?: (value: string) => void;
+    /** Visual treatment. `pill` renders a fully-rounded input. @default 'standard' */
+    variant?: SearchFieldVariant;
+    /**
+     * Show a keyboard-shortcut hint adornment (⌘K on Mac, Ctrl+K elsewhere) at
+     * the right edge. Pair with `useSearchHotkeys` to wire the key handler.
+     */
+    shortcutHint?: boolean;
 }
 declare const SearchField: React__default.FC<SearchFieldProps>;
 
+interface UseSearchHotkeysOptions {
+    /** Cmd/Ctrl + K focuses the ref. @default true */
+    k?: boolean;
+    /** `/` (when not already typing in another field) focuses the ref. @default true */
+    slash?: boolean;
+}
+/**
+ * Wire global Cmd+K (Mac) / Ctrl+K (everywhere else) and `/` hotkeys to focus
+ * the input pointed to by `inputRef`. The `/` hotkey is suppressed while the
+ * user is typing in another input, textarea or contentEditable element so it
+ * doesn't hijack normal typing. Either hotkey can be disabled via options.
+ */
+declare function useSearchHotkeys(inputRef: RefObject<HTMLInputElement | null>, options?: UseSearchHotkeysOptions): void;
+
 type ToggleButtonProps = ToggleButtonProps$1;
 declare const ToggleButton: React__default.FC<ToggleButtonProps>;
 type ToggleButtonGroupProps = ToggleButtonGroupProps$1;
@@ -1005,6 +1172,53 @@ declare const ConnectionStatus: React__default.NamedExoticComponent<ConnectionSt
  */
 declare const AccountSection: React__default.NamedExoticComponent<AccountSectionProps>;
 
+interface TabProps extends Omit<TabProps$1, 'icon'> {
+    badge?: number | string;
+    badgeVariant?: 'default' | 'primary' | 'success' | 'error';
+}
+declare const Tab: React__default.FC<TabProps>;
+
+interface MenuProps extends Omit<MenuProps$1, 'open'> {
+    anchorEl?: HTMLElement | null;
+    onClose: () => void;
+}
+declare const Menu: React__default.FC<MenuProps>;
+interface MenuItemProps {
+    icon?: React__default.ReactNode;
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    divider?: boolean;
+}
+declare const MenuItem: React__default.FC<MenuItemProps>;
+
+interface PaginationProps extends Omit<PaginationProps$1, 'color'> {
+    color?: 'primary' | 'secondary' | 'standard';
+}
+declare const Pagination: React__default.FC<PaginationProps>;
+
+interface SelectorOption {
+    id: string;
+    name: string;
+    description?: string;
+    avatar?: string;
+    icon?: React__default.ReactNode;
+    disabled?: boolean;
+}
+interface SelectorProps {
+    options: SelectorOption[];
+    selectedId: string | null;
+    onSelect: (id: string) => void;
+    onCreate?: () => void;
+    loading?: boolean;
+    placeholder?: string;
+    emptyMessage?: string;
+    compact?: boolean;
+    renderSelected?: (option: SelectorOption) => React__default.ReactNode;
+    width?: number;
+}
+declare const Selector: React__default.FC<SelectorProps>;
+
 type BadgeVariant = 'default' | 'primary' | 'success' | 'error';
 interface BadgeProps extends Omit<BadgeProps$1, 'color' | 'variant'> {
     variant?: BadgeVariant;
@@ -1012,12 +1226,98 @@ interface BadgeProps extends Omit<BadgeProps$1, 'color' | 'variant'> {
 }
 declare const Badge: React__default.FC<BadgeProps>;
 
-type ChipVariant = 'default' | 'active';
+type ChipVariant = 'default' | 'active' | 'success' | 'error' | 'warning' | 'info';
+interface ChipVariantStyles {
+    backgroundColor: string;
+    color: string;
+    hoverBackgroundColor: string;
+}
+/**
+ * Resolve a Chip variant to its themed background/foreground/hover colors.
+ *
+ * Status variants (success/error/warning/info) use the `main` surface with
+ * `contrastText` (typically white) so chips read as loud solid pills.
+ * `default` is neutral grey; `active` uses the brand-selected background.
+ */
+declare function getChipVariantStyles(variant: ChipVariant, theme: Theme): ChipVariantStyles;
+
 interface ChipProps extends Omit<ChipProps$1, 'color' | 'variant'> {
     variant?: ChipVariant;
 }
 declare const Chip: React__default.FC<ChipProps>;
 
+type StatusDotStatus = 'success' | 'error' | 'warning' | 'info' | 'primary' | 'neutral';
+interface StatusDotProps extends Omit<React__default.HTMLAttributes<HTMLSpanElement>, 'role'> {
+    /** Which themed color to render. `neutral` uses a grey for idle/queued states. */
+    status: StatusDotStatus;
+    /** Diameter in pixels. @default 8 */
+    size?: number;
+    /**
+     * Pulse animation for in-progress states (e.g., a running run). Respects
+     * `prefers-reduced-motion` and falls back to a static dot.
+     */
+    pulse?: boolean;
+    /**
+     * When provided, the dot becomes an accessible image with this label. When
+     * omitted, the dot is marked `aria-hidden` — assume an adjacent element
+     * carries the status semantics.
+     */
+    'aria-label'?: string;
+}
+/**
+ * StatusDot — a small colored circle indicating entity status.
+ *
+ * Use alongside a text label for a labeled status; use with `aria-label` to
+ * make the dot itself a standalone accessible indicator.
+ *
+ * @example
+ * ```tsx
+ * // Labeled context — the dot is decorative
+ * <>
+ *   <StatusDot status="success" />
+ *   <span>Succeeded</span>
+ * </>
+ *
+ * // Standalone — dot carries the status meaning
+ * <StatusDot status="info" pulse aria-label="Running" />
+ * ```
+ */
+declare const StatusDot: React__default.FC<StatusDotProps>;
+
+interface CopyChipProps {
+    /** The text to display and copy to the clipboard. */
+    text: string;
+    /** Max width in pixels for the (ellipsized) text label. @default 260 */
+    maxWidth?: number;
+    /**
+     * Accessible label for the button. Defaults to `Copy <text>`. Override when
+     * the raw text would be unclear to a screen-reader user (e.g., long hex IDs).
+     */
+    'aria-label'?: string;
+    /** Tooltip copy shown before clicking. @default 'Copy' */
+    tooltipLabel?: string;
+    /** Tooltip copy shown after a successful copy. @default 'Copied' */
+    tooltipCopiedLabel?: string;
+    /** Fires after the clipboard write succeeds. */
+    onCopy?: () => void;
+}
+/**
+ * CopyChip — compact inline copy-to-clipboard control.
+ *
+ * Shows a monospace text label with an adjacent copy icon that toggles to a
+ * check mark for a moment after a successful copy. Use in dense metadata
+ * rows where an `IDBlock` would be visually too heavy; use `IDBlock` when
+ * the identifier is the primary affordance on the surface and deserves a
+ * full boxed treatment with snackbar feedback.
+ *
+ * @example
+ * ```tsx
+ * <CopyChip text="run_abc123" />
+ * <CopyChip text={longHexId} aria-label="Copy workspace ID" onCopy={track} />
+ * ```
+ */
+declare const CopyChip: React__default.FC<CopyChipProps>;
+
 /**
  * Color variants for the RoleBadge component
  */
@@ -1130,167 +1430,115 @@ interface ProgressProps {
 }
 declare const Progress: React__default.FC<ProgressProps>;
 
-interface TabProps extends Omit<TabProps$1, 'icon'> {
-    badge?: number | string;
-    badgeVariant?: 'default' | 'primary' | 'success' | 'error';
-}
-declare const Tab: React__default.FC<TabProps>;
-
-interface MenuProps extends Omit<MenuProps$1, 'open'> {
-    anchorEl?: HTMLElement | null;
-    onClose: () => void;
-}
-declare const Menu: React__default.FC<MenuProps>;
-interface MenuItemProps {
-    icon?: React__default.ReactNode;
-    label: string;
-    onClick?: () => void;
-    disabled?: boolean;
-    divider?: boolean;
-}
-declare const MenuItem: React__default.FC<MenuItemProps>;
-
-interface PaginationProps extends Omit<PaginationProps$1, 'color'> {
-    color?: 'primary' | 'secondary' | 'standard';
+type AlertSeverity = 'success' | 'error' | 'warning' | 'info';
+interface AlertProps extends Omit<AlertProps$1, 'severity'> {
+    severity?: AlertSeverity;
+    /**
+     * Title to display above the alert message
+     */
+    title?: string;
 }
-declare const Pagination: React__default.FC<PaginationProps>;
+declare const Alert: React__default.FC<AlertProps>;
 
-interface SelectorOption {
-    id: string;
-    name: string;
-    description?: string;
-    avatar?: string;
-    icon?: React__default.ReactNode;
-    disabled?: boolean;
-}
-interface SelectorProps {
-    options: SelectorOption[];
-    selectedId: string | null;
-    onSelect: (id: string) => void;
-    onCreate?: () => void;
-    loading?: boolean;
-    placeholder?: string;
-    emptyMessage?: string;
-    compact?: boolean;
-    renderSelected?: (option: SelectorOption) => React__default.ReactNode;
-    width?: number;
-}
-declare const Selector: React__default.FC<SelectorProps>;
-
-type LogoSize = 'large' | 'medium' | 'small';
-type LogoProps = PropsWithChildren<{
-    icon?: ReactElement;
-    size?: LogoSize;
-}>;
-declare const Logo: ({ children, size, icon }: LogoProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * Primary action configuration for EntityHeader
- */
-interface PrimaryAction {
-    /**
-     * Button label text
-     */
-    label: string;
-    /**
-     * Optional count to display as "Label (N)"
-     */
-    count?: number;
-    /**
-     * Optional leading icon
-     */
-    icon?: React__default.ReactNode;
-    /**
-     * Click handler for the button
-     */
-    onClick?: () => void;
-}
-/**
- * EntityHeader component props
- */
-interface EntityHeaderProps {
+interface SnackbarProps extends Omit<SnackbarProps$1, 'children'> {
     /**
-     * Primary title text (e.g., entity name)
-     * @required
+     * Message to display in the snackbar
      */
-    title: string;
+    message?: string;
     /**
-     * Secondary descriptive text below title
+     * Severity of the alert inside snackbar
      */
-    subtitle?: string;
+    severity?: AlertSeverity;
     /**
-     * Role or status label - displays as RoleBadge pill
+     * Title to display in the alert (optional)
      */
-    role?: string;
+    title?: string;
     /**
-     * Entity identifier - displays as IDBlock with copy action
+     * Alert variant
+     * @default 'filled'
      */
-    id?: string;
+    variant?: 'filled' | 'standard' | 'outlined';
     /**
-     * Main action button configuration
+     * Callback when snackbar is closed
      */
-    primaryAction?: PrimaryAction;
+    onClose?: () => void;
     /**
-     * Additional content rendered before the primary action button.
-     * Accepts any ReactNode (buttons, dropdowns, etc.).
+     * Children to render instead of message (allows custom content)
+     * Must be a ReactElement to match MuiSnackbar requirements
      */
-    startActions?: React__default.ReactNode;
+    children?: React__default.ReactElement;
+}
+declare const Snackbar: React__default.FC<SnackbarProps>;
+
+interface EmptyStateProps {
+    title?: string;
+    description?: string;
+    icon?: React__default.ReactNode;
+    action?: React__default.ReactNode;
+}
+declare const EmptyState: React__default.FC<EmptyStateProps>;
+
+interface LoadingProps {
+    message?: string;
+    size?: number;
+    fullScreen?: boolean;
+}
+declare const Loading: React__default.FC<LoadingProps>;
+
+interface AppLoadingProps {
     /**
-     * Additional content rendered after the primary action button
-     * but before the more-options icon button.
-     * Accepts any ReactNode (buttons, dropdowns, etc.).
+     * Loading message to display
+     * @default "Loading..."
      */
-    endActions?: React__default.ReactNode;
+    message?: string;
     /**
-     * Callback when ID is copied (internal copy + this callback)
+     * Logo source URL or path
+     * @default "/icons/logo.png"
      */
-    onCopyId?: () => void;
+    logo?: string;
     /**
-     * Callback when more options button clicked (receives event for anchor positioning)
+     * Custom styles
      */
-    onMoreOptions?: (event: React__default.MouseEvent<HTMLElement>) => void;
+    sx?: any;
+}
+/**
+ * AppLoading component - Full-screen loading indicator with logo
+ *
+ * @example
+ * ```tsx
+ * <AppLoading message="Initializing application..." />
+ * ```
+ */
+declare const AppLoading: React__default.FC<AppLoadingProps>;
+
+interface CircularProgressProps extends CircularProgressProps$1 {
     /**
-     * HTML heading level for the title element
-     * @default 'h2'
+     * Size of the progress indicator
+     * @default 40
      */
-    headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    size?: number | string;
     /**
-     * Show bottom divider line
-     * @default true
+     * Thickness of the progress indicator
+     * @default 4
      */
-    divider?: boolean;
+    thickness?: number;
 }
 /**
- * EntityHeader - Composite UI component for entity (workspace, account, etc.) headers
- *
- * Displays an entity with title, optional subtitle, role badge, ID with copy action,
- * primary action button, and more options control. Matches Figma node 15-1258 specifications.
+ * CircularProgress component - wrapper around MUI CircularProgress
  *
  * @example
  * ```tsx
- * // Full example with all props
- * <EntityHeader
- *   title="Game Co. WF 1769936170928"
- *   subtitle="Gaming Demo Account"
- *   role="Manager"
- *   id="W1234567890"
- *   primaryAction={{
- *     label: 'Members',
- *     count: 5,
- *     icon: <AddCircleIcon />,
- *     onClick: () => console.log('Open members')
- *   }}
- *   onCopyId={() => console.log('ID copied')}
- *   onMoreOptions={(e) => setAnchorEl(e.currentTarget)}
- * />
- *
- * // Minimal example
- * <EntityHeader title="Simple Entity" />
+ * <CircularProgress size={40} thickness={4} />
  * ```
- *
- * @see Figma node 15-1258 for design specifications
  */
-declare const EntityHeader: React__default.FC<EntityHeaderProps>;
+declare const CircularProgress: React__default.FC<CircularProgressProps>;
+
+type LogoSize = 'large' | 'medium' | 'small';
+type LogoProps = PropsWithChildren<{
+    icon?: ReactElement;
+    size?: LogoSize;
+}>;
+declare const Logo: ({ children, size, icon }: LogoProps) => react_jsx_runtime.JSX.Element;
 
 interface DialogProps extends Omit<DialogProps$1, 'title'> {
     open: boolean;
@@ -1316,12 +1564,40 @@ interface DialogProps extends Omit<DialogProps$1, 'title'> {
 }
 declare const Dialog: React__default.FC<DialogProps>;
 
+type DrawerWidthValue = number | string;
+/**
+ * Per-breakpoint drawer widths. `xs` sets the base width (mobile-first);
+ * `sm`/`md`/`lg`/`xl` override at and above the named MUI breakpoint.
+ */
+interface ResponsiveDrawerWidth {
+    xs?: DrawerWidthValue;
+    sm?: DrawerWidthValue;
+    md?: DrawerWidthValue;
+    lg?: DrawerWidthValue;
+    xl?: DrawerWidthValue;
+}
+type DrawerWidth = DrawerWidthValue | ResponsiveDrawerWidth;
+/**
+ * Resolve a `width` prop into a style object usable by `styled()`.
+ *
+ * - Number/string input returns a single `{ width }` rule.
+ * - Object input produces a mobile-first base width (from `xs`, or
+ *   `defaultWidth` if `xs` is missing) plus breakpoint-scoped overrides
+ *   for each of sm/md/lg/xl that was provided.
+ */
+declare function resolveDrawerWidth(width: DrawerWidth | undefined, theme: Theme, defaultWidth?: DrawerWidthValue): Record<string, unknown> & {
+    width?: DrawerWidthValue;
+};
+
 interface DrawerProps extends Omit<DrawerProps$1, 'title'> {
     /**
-     * Width of the drawer when open
-     * @default 400 for temporary/temporary variant, 240 for permanent
+     * Width of the drawer when open. Accepts a single value (number or CSS
+     * string like `"100vw"`) or a responsive object keyed by MUI breakpoint
+     * (`{ xs, sm, md, lg, xl }`). Responsive widths are mobile-first: `xs`
+     * is the base, each named breakpoint overrides at that breakpoint and up.
+     * @default 400 for temporary/persistent, 240 for permanent
      */
-    width?: number;
+    width?: DrawerWidth;
     /**
      * Width of the drawer when collapsed (mini variant)
      * @default 72
@@ -1369,60 +1645,415 @@ interface DrawerProps extends Omit<DrawerProps$1, 'title'> {
      * Anchor position
      * @default 'right'
      */
-    anchor?: 'left' | 'right' | 'top' | 'bottom';
+    anchor?: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * Top offset in pixels (e.g., for header + breadcrumbs)
+     * @default 0
+     */
+    topOffset?: number;
+}
+/**
+ * Drawer component for navigation drawers and side panels
+ * Can be used as a replacement for Dialog for better UX
+ *
+ * @example
+ * ```tsx
+ * // Simple drawer
+ * <Drawer open={true} variant="temporary" width={400} title="Settings" onClose={handleClose}>
+ *   <Box p={2}>Content here</Box>
+ * </Drawer>
+ *
+ * // Drawer with tabs
+ * <Drawer
+ *   open={true}
+ *   variant="temporary"
+ *   width={600}
+ *   title="Edit Stream"
+ *   tabs={['General', 'Rules', 'Settings']}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ *   onClose={handleClose}
+ * >
+ *   <Box p={2}>{tabContent}</Box>
+ * </Drawer>
+ * ```
+ */
+declare const Drawer: React__default.FC<DrawerProps>;
+
+interface MetaFieldProps {
+    /** Uppercase eyebrow label displayed above the value. */
+    label: string;
+    /** Value to display. String values get a `title` attribute for overflow tooltips. */
+    value: ReactNode;
+    /** Render the value in a monospace font (for IDs, durations, paths). */
+    mono?: boolean;
+    /**
+     * Override the auto-generated `title` attribute. Useful when the value is a
+     * ReactNode but you still want a hover tooltip, or to customize the string
+     * shown on hover.
+     */
+    title?: string;
+}
+/**
+ * MetaField — a compact label-over-value column for metadata lists.
+ *
+ * Wraps its content in a min-width-0 flex column so it collapses cleanly
+ * inside responsive grids. The value truncates with an ellipsis and shows
+ * the full text on hover (for string values by default).
+ *
+ * @example
+ * ```tsx
+ * <MetaField label="Run ID" value="run_abc123" mono />
+ * <MetaField label="Status" value={<StatusBadge status="ok" />} />
+ * ```
+ */
+declare const MetaField: React__default.FC<MetaFieldProps>;
+
+interface ScrollableRowProps {
+    /** Row content. Rendered in a horizontally-scrolling flex container. */
+    children: ReactNode;
+    /** Accessible label for the left chevron. @default 'Scroll left' */
+    leftLabel?: string;
+    /** Accessible label for the right chevron. @default 'Scroll right' */
+    rightLabel?: string;
+    /**
+     * Minimum nudge distance (px) when a chevron is clicked. The component
+     * scrolls by max(minNudge, clientWidth * nudgeFraction). @default 160
+     */
+    minNudge?: number;
+    /** Fraction of the viewport scrolled per chevron click. @default 0.6 */
+    nudgeFraction?: number;
+}
+/**
+ * ScrollableRow — a horizontally-scrolling container that reveals chevron
+ * buttons at the left and right edges only when content actually overflows.
+ *
+ * Works with any children (chips, cards, pills). Uses a `ResizeObserver` on
+ * both the scroller and its children plus a `MutationObserver` to catch
+ * children being added/removed, so the chevrons stay in sync with real
+ * layout.
+ */
+declare const ScrollableRow: React__default.FC<ScrollableRowProps>;
+
+interface CarouselProps<T> {
+    /** Slide data. Each entry is passed to `renderSlide`. */
+    slides: T[];
+    /** Render function for an individual slide. */
+    renderSlide: (item: T, index: number) => ReactNode;
+    /**
+     * Stable per-slide React key. Always set this when `slides` can be reordered
+     * or filtered; otherwise React will reuse the wrong slide's internal state
+     * across renders. Defaults to the slide's array index when omitted.
+     */
+    getKey?: (item: T, index: number) => Key;
+    /** Slides visible in the viewport. @default 1 */
+    slidesPerView?: number;
+    /** Auto-advance every `autoplayDelayMs` while not hovered. @default true */
+    autoplay?: boolean;
+    /** Autoplay tick in milliseconds. @default 5000 */
+    autoplayDelayMs?: number;
+    /** Show dot indicators when more than one slide. @default true */
+    showDots?: boolean;
+    /** Show the `01 / 03`-style counter when more than one slide. @default true */
+    showCounter?: boolean;
+    /** Show prev/next chevrons when more than one slide. @default true */
+    showArrows?: boolean;
+    /** Pause autoplay while the pointer is over the carousel. @default true */
+    pauseOnHover?: boolean;
+    /** Accessible label for the surrounding region. */
+    ariaLabel?: string;
+    /** Fires with the new index whenever embla selects a slide. */
+    onSelect?: (index: number) => void;
+    /** Override the IconButton sx for the prev/next arrows. */
+    arrowSx?: SxProps<Theme>;
+    /** Override the dot color (inactive). Accepts any CSS color string. */
+    dotColor?: string;
+    /** Override the active dot color. Accepts any CSS color string. */
+    dotActiveColor?: string;
+}
+/**
+ * Carousel — embla-carousel-based slide deck with autoplay, dots, counter,
+ * prev/next arrows and pause-on-hover. Generic over slide payload type; the
+ * caller decides the slide markup via `renderSlide`.
+ */
+declare function Carousel<T>({ slides, renderSlide, getKey, slidesPerView, autoplay, autoplayDelayMs, showDots, showCounter, showArrows, pauseOnHover, ariaLabel, onSelect, arrowSx, dotColor, dotActiveColor, }: CarouselProps<T>): react_jsx_runtime.JSX.Element | null;
+
+interface DefinitionRowProps {
+    /** Optional leading icon (e.g. a scope or category glyph). */
+    icon?: ReactNode;
+    /** Primary label rendered on the left side. */
+    label: ReactNode;
+    /** Optional secondary line under the label (e.g. type, scope path). */
+    sublabel?: ReactNode;
+    /** Primary right-side content (e.g. `read`, `optional`). */
+    value?: ReactNode;
+    /** Secondary right-side line under the value (e.g. constraint, default). */
+    hint?: ReactNode;
+    /** Reduce vertical padding for compact lists. */
+    dense?: boolean;
+    /** Draw a bottom divider. The last row in a list never draws. @default true */
+    divider?: boolean;
+}
+/**
+ * DefinitionRow — `icon · label / sublabel  …  value / hint` row primitive
+ * for description-list style content (scope tables, settings, key/value
+ * panels).
+ */
+declare function DefinitionRow({ icon, label, sublabel, value, hint, dense, divider, }: DefinitionRowProps): react_jsx_runtime.JSX.Element;
+
+type PanelDialogWidth = 'sm' | 'md' | 'lg' | 'xl';
+type PanelDialogSide = 'right' | 'center';
+type PanelDialogTransition = 'fade' | 'slide-up' | 'slide-left';
+interface PanelDialogProps {
+    /** Controls visibility. */
+    open: boolean;
+    /** Fires when the user closes (close button, backdrop click, ESC). */
+    onClose: () => void;
+    /** Optional title rendered in the header. Used as the dialog accessible name when a string. */
+    title?: ReactNode;
+    /** Optional right-aligned slot in the header (e.g. install + share buttons). */
+    headerActions?: ReactNode;
+    /** Panel width. @default 'md' */
+    width?: PanelDialogWidth;
+    /** Where the panel docks. `right` slides in from the right edge; `center` is a regular centered panel. @default 'right' */
+    side?: PanelDialogSide;
+    /** Override the accessible name when `title` is not a string. */
+    ariaLabel?: string;
+    /**
+     * Drop the header bar entirely (no title row, no border). The close button
+     * still renders but floats absolute over the top-right of the body. Use when
+     * the body content has its own hero / chrome.
+     */
+    hideHeader?: boolean;
+    /** Style overrides on the dialog paper (border-radius, shadow, width tweaks). */
+    paperSx?: SxProps<Theme>;
+    /** Style overrides on the modal backdrop (e.g. tint, blur). */
+    backdropSx?: SxProps<Theme>;
+    /**
+     * Entry transition. Defaults to `slide-left` for `side='right'` and `fade`
+     * for `side='center'`.
+     */
+    transition?: PanelDialogTransition;
+    /** Body content. */
+    children: ReactNode;
+}
+/**
+ * PanelDialog — a right-anchored (or centered) slide-in panel for detail
+ * views, inspectors, and side sheets. Built on MUI Dialog; focus trap and
+ * ESC-to-close come from MUI. Use Dialog for centered modal-with-Save/Cancel.
+ */
+declare function PanelDialog({ open, onClose, title, headerActions, width, side, ariaLabel, hideHeader, paperSx, backdropSx, transition, children, }: PanelDialogProps): react_jsx_runtime.JSX.Element;
+
+type CardMediaProps = CardMediaProps$1;
+declare const CardMedia: React__default.FC<CardMediaProps>;
+interface CardProps extends CardProps$1 {
+    hoverable?: boolean;
+    clickable?: boolean;
+}
+declare const Card: React__default.FC<CardProps>;
+declare const CardContent: React__default.FC<CardContentProps>;
+declare const CardHeader: React__default.FC<CardHeaderProps>;
+declare const CardActions: React__default.FC<CardActionsProps>;
+
+type ListProps = ListProps$1;
+declare const List: React__default.FC<ListProps>;
+interface ListItemProps extends ListItemProps$1 {
+    primary?: React__default.ReactNode;
+    secondary?: React__default.ReactNode;
+    icon?: React__default.ReactNode;
+    action?: React__default.ReactNode;
+    hoverable?: boolean;
+}
+declare const ListItem: React__default.FC<ListItemProps>;
+
+interface AvatarProps extends AvatarProps$1 {
+    size?: 'small' | 'medium' | 'large' | number;
+}
+declare const Avatar: React__default.FC<AvatarProps>;
+
+interface TableProps extends TableProps$1 {
+    stickyHeader?: boolean;
+}
+declare const Table: React__default.FC<TableProps>;
+interface TableHeaderProps {
+    columns: Array<{
+        id: string;
+        label: string;
+        sortable?: boolean;
+        align?: 'left' | 'center' | 'right';
+    }>;
+    orderBy?: string;
+    order?: 'asc' | 'desc';
+    onSort?: (columnId: string) => void;
+}
+declare const TableHeader: React__default.FC<TableHeaderProps>;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbsProps extends Omit<BreadcrumbsProps$1, 'children'> {
+    items: BreadcrumbItem[];
+}
+declare const Breadcrumbs: React__default.FC<BreadcrumbsProps>;
+
+interface AccordionProps extends Omit<AccordionProps$1, 'children'> {
+    title: string;
+    children: NonNullable<React__default.ReactNode>;
+    defaultExpanded?: boolean;
+}
+declare const Accordion: React__default.FC<AccordionProps>;
+
+interface PaperProps extends PaperProps$1 {
+    variant?: 'elevation' | 'outlined';
+}
+declare const Paper: React__default.FC<PaperProps>;
+
+interface DividerProps extends DividerProps$1 {
+    variant?: 'fullWidth' | 'inset' | 'middle';
+}
+declare const Divider: React__default.FC<DividerProps>;
+
+interface LinkProps extends LinkProps$1 {
+    underline?: 'none' | 'hover' | 'always';
+}
+declare const Link: React__default.FC<LinkProps>;
+
+interface AppBarProps extends AppBarProps$1 {
+    height?: number;
+}
+declare const AppBar: React__default.FC<AppBarProps>;
+
+interface CollapseProps extends CollapseProps$1 {
+    /**
+     * If `true`, the component will transition in
+     */
+    in?: boolean;
+    /**
+     * The content to collapse
+     */
+    children?: React__default.ReactNode;
+}
+/**
+ * Collapse component - provides a collapse animation
+ *
+ * @example
+ * ```tsx
+ * <Collapse in={open}>
+ *   <Box>Collapsible content</Box>
+ * </Collapse>
+ * ```
+ */
+declare const Collapse: React__default.FC<CollapseProps>;
+
+/**
+ * Primary action configuration for EntityHeader
+ */
+interface PrimaryAction {
+    /**
+     * Button label text
+     */
+    label: string;
+    /**
+     * Optional count to display as "Label (N)"
+     */
+    count?: number;
+    /**
+     * Optional leading icon
+     */
+    icon?: React__default.ReactNode;
+    /**
+     * Click handler for the button
+     */
+    onClick?: () => void;
+}
+/**
+ * EntityHeader component props
+ */
+interface EntityHeaderProps {
+    /**
+     * Primary title text (e.g., entity name)
+     * @required
+     */
+    title: string;
+    /**
+     * Secondary descriptive text below title
+     */
+    subtitle?: string;
+    /**
+     * Role or status label - displays as RoleBadge pill
+     */
+    role?: string;
+    /**
+     * Entity identifier - displays as IDBlock with copy action
+     */
+    id?: string;
+    /**
+     * Main action button configuration
+     */
+    primaryAction?: PrimaryAction;
+    /**
+     * Additional content rendered before the primary action button.
+     * Accepts any ReactNode (buttons, dropdowns, etc.).
+     */
+    startActions?: React__default.ReactNode;
+    /**
+     * Additional content rendered after the primary action button
+     * but before the more-options icon button.
+     * Accepts any ReactNode (buttons, dropdowns, etc.).
+     */
+    endActions?: React__default.ReactNode;
+    /**
+     * Callback when ID is copied (internal copy + this callback)
+     */
+    onCopyId?: () => void;
+    /**
+     * Callback when more options button clicked (receives event for anchor positioning)
+     */
+    onMoreOptions?: (event: React__default.MouseEvent<HTMLElement>) => void;
+    /**
+     * HTML heading level for the title element
+     * @default 'h2'
+     */
+    headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /**
-     * Top offset in pixels (e.g., for header + breadcrumbs)
-     * @default 0
+     * Show bottom divider line
+     * @default true
      */
-    topOffset?: number;
+    divider?: boolean;
 }
 /**
- * Drawer component for navigation drawers and side panels
- * Can be used as a replacement for Dialog for better UX
+ * EntityHeader - Composite UI component for entity (workspace, account, etc.) headers
+ *
+ * Displays an entity with title, optional subtitle, role badge, ID with copy action,
+ * primary action button, and more options control. Matches Figma node 15-1258 specifications.
  *
  * @example
  * ```tsx
- * // Simple drawer
- * <Drawer open={true} variant="temporary" width={400} title="Settings" onClose={handleClose}>
- *   <Box p={2}>Content here</Box>
- * </Drawer>
+ * // Full example with all props
+ * <EntityHeader
+ *   title="Game Co. WF 1769936170928"
+ *   subtitle="Gaming Demo Account"
+ *   role="Manager"
+ *   id="W1234567890"
+ *   primaryAction={{
+ *     label: 'Members',
+ *     count: 5,
+ *     icon: <AddCircleIcon />,
+ *     onClick: () => console.log('Open members')
+ *   }}
+ *   onCopyId={() => console.log('ID copied')}
+ *   onMoreOptions={(e) => setAnchorEl(e.currentTarget)}
+ * />
  *
- * // Drawer with tabs
- * <Drawer
- *   open={true}
- *   variant="temporary"
- *   width={600}
- *   title="Edit Stream"
- *   tabs={['General', 'Rules', 'Settings']}
- *   activeTab={activeTab}
- *   onTabChange={setActiveTab}
- *   onClose={handleClose}
- * >
- *   <Box p={2}>{tabContent}</Box>
- * </Drawer>
+ * // Minimal example
+ * <EntityHeader title="Simple Entity" />
  * ```
+ *
+ * @see Figma node 15-1258 for design specifications
  */
-declare const Drawer: React__default.FC<DrawerProps>;
-
-interface CardProps extends CardProps$1 {
-    hoverable?: boolean;
-    clickable?: boolean;
-}
-declare const Card: React__default.FC<CardProps>;
-declare const CardContent: React__default.FC<CardContentProps>;
-declare const CardHeader: React__default.FC<CardHeaderProps>;
-declare const CardActions: React__default.FC<CardActionsProps>;
-
-type ListProps = ListProps$1;
-declare const List: React__default.FC<ListProps>;
-interface ListItemProps extends ListItemProps$1 {
-    primary?: React__default.ReactNode;
-    secondary?: React__default.ReactNode;
-    icon?: React__default.ReactNode;
-    action?: React__default.ReactNode;
-    hoverable?: boolean;
-}
-declare const ListItem: React__default.FC<ListItemProps>;
+declare const EntityHeader: React__default.FC<EntityHeaderProps>;
 
 type DeploymentEntityType = 'workspace' | 'stream' | 'deployment' | 'engagement' | 'agent';
 type DeploymentStatusIndicator = 'normal' | 'warning' | 'error' | 'disabled' | null;
@@ -1630,65 +2261,6 @@ declare const WORKFLOW_NODE_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2p
  */
 declare const WorkflowNode: React__default.FC<WorkflowNodeProps>;
 
-interface AvatarProps extends AvatarProps$1 {
-    size?: 'small' | 'medium' | 'large' | number;
-}
-declare const Avatar: React__default.FC<AvatarProps>;
-
-interface TableProps extends TableProps$1 {
-    stickyHeader?: boolean;
-}
-declare const Table: React__default.FC<TableProps>;
-interface TableHeaderProps {
-    columns: Array<{
-        id: string;
-        label: string;
-        sortable?: boolean;
-        align?: 'left' | 'center' | 'right';
-    }>;
-    orderBy?: string;
-    order?: 'asc' | 'desc';
-    onSort?: (columnId: string) => void;
-}
-declare const TableHeader: React__default.FC<TableHeaderProps>;
-
-interface BreadcrumbItem {
-    label: string;
-    href?: string;
-    onClick?: () => void;
-}
-interface BreadcrumbsProps extends Omit<BreadcrumbsProps$1, 'children'> {
-    items: BreadcrumbItem[];
-}
-declare const Breadcrumbs: React__default.FC<BreadcrumbsProps>;
-
-interface AccordionProps extends Omit<AccordionProps$1, 'children'> {
-    title: string;
-    children: NonNullable<React__default.ReactNode>;
-    defaultExpanded?: boolean;
-}
-declare const Accordion: React__default.FC<AccordionProps>;
-
-interface PaperProps extends PaperProps$1 {
-    variant?: 'elevation' | 'outlined';
-}
-declare const Paper: React__default.FC<PaperProps>;
-
-interface DividerProps extends DividerProps$1 {
-    variant?: 'fullWidth' | 'inset' | 'middle';
-}
-declare const Divider: React__default.FC<DividerProps>;
-
-interface LinkProps extends LinkProps$1 {
-    underline?: 'none' | 'hover' | 'always';
-}
-declare const Link: React__default.FC<LinkProps>;
-
-interface AppBarProps extends AppBarProps$1 {
-    height?: number;
-}
-declare const AppBar: React__default.FC<AppBarProps>;
-
 interface WorkflowTopBarProps extends Omit<BoxProps$1, 'title'> {
     /** Heading shown at the left side of the bar. */
     title?: string;
@@ -1798,131 +2370,6 @@ interface WorkflowTimeBarProps extends BoxProps$1 {
  */
 declare const WorkflowTimeBar: React__default.FC<WorkflowTimeBarProps>;
 
-interface CollapseProps extends CollapseProps$1 {
-    /**
-     * If `true`, the component will transition in
-     */
-    in?: boolean;
-    /**
-     * The content to collapse
-     */
-    children?: React__default.ReactNode;
-}
-/**
- * Collapse component - provides a collapse animation
- *
- * @example
- * ```tsx
- * <Collapse in={open}>
- *   <Box>Collapsible content</Box>
- * </Collapse>
- * ```
- */
-declare const Collapse: React__default.FC<CollapseProps>;
-
-type AlertSeverity = 'success' | 'error' | 'warning' | 'info';
-interface AlertProps extends Omit<AlertProps$1, 'severity'> {
-    severity?: AlertSeverity;
-    /**
-     * Title to display above the alert message
-     */
-    title?: string;
-}
-declare const Alert: React__default.FC<AlertProps>;
-
-interface SnackbarProps extends Omit<SnackbarProps$1, 'children'> {
-    /**
-     * Message to display in the snackbar
-     */
-    message?: string;
-    /**
-     * Severity of the alert inside snackbar
-     */
-    severity?: AlertSeverity;
-    /**
-     * Title to display in the alert (optional)
-     */
-    title?: string;
-    /**
-     * Alert variant
-     * @default 'filled'
-     */
-    variant?: 'filled' | 'standard' | 'outlined';
-    /**
-     * Callback when snackbar is closed
-     */
-    onClose?: () => void;
-    /**
-     * Children to render instead of message (allows custom content)
-     * Must be a ReactElement to match MuiSnackbar requirements
-     */
-    children?: React__default.ReactElement;
-}
-declare const Snackbar: React__default.FC<SnackbarProps>;
-
-interface EmptyStateProps {
-    title?: string;
-    description?: string;
-    icon?: React__default.ReactNode;
-    action?: React__default.ReactNode;
-}
-declare const EmptyState: React__default.FC<EmptyStateProps>;
-
-interface LoadingProps {
-    message?: string;
-    size?: number;
-    fullScreen?: boolean;
-}
-declare const Loading: React__default.FC<LoadingProps>;
-
-interface AppLoadingProps {
-    /**
-     * Loading message to display
-     * @default "Loading..."
-     */
-    message?: string;
-    /**
-     * Logo source URL or path
-     * @default "/icons/logo.png"
-     */
-    logo?: string;
-    /**
-     * Custom styles
-     */
-    sx?: any;
-}
-/**
- * AppLoading component - Full-screen loading indicator with logo
- *
- * @example
- * ```tsx
- * <AppLoading message="Initializing application..." />
- * ```
- */
-declare const AppLoading: React__default.FC<AppLoadingProps>;
-
-interface CircularProgressProps extends CircularProgressProps$1 {
-    /**
-     * Size of the progress indicator
-     * @default 40
-     */
-    size?: number | string;
-    /**
-     * Thickness of the progress indicator
-     * @default 4
-     */
-    thickness?: number;
-}
-/**
- * CircularProgress component - wrapper around MUI CircularProgress
- *
- * @example
- * ```tsx
- * <CircularProgress size={40} thickness={4} />
- * ```
- */
-declare const CircularProgress: React__default.FC<CircularProgressProps>;
-
 declare const ActivityAppIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
 
 declare const LeftArrowIcon: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
@@ -2824,4 +3271,4 @@ interface CodeEditorWorkspaceProps extends Pick<UseCodeEditorWorkspaceOptions, '
  */
 declare const CodeEditorWorkspace: React__default.FC<CodeEditorWorkspaceProps>;
 
-export { Accordion, type AccordionProps, AccountSection, type AccountSectionProps, ActivityAppIcon, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, AvatarIcon, type AvatarProps, Badge, type BadgeProps, BarTrackingIcon, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, type CardProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, ClockIcon, CloudFlashIcon, CodeEditor, type CodeEditorFile, CodeEditorFileTree, type CodeEditorFileTreeProps, type CodeEditorLanguage, type CodeEditorProps, CodeEditorStatusBar, type CodeEditorStatusBarItem, type CodeEditorStatusBarProps, type CodeEditorStatusBarRenderProps, type CodeEditorTab, type CodeEditorTabRenderProps, CodeEditorTabs, type CodeEditorTabsProps, CodeEditorWelcomeScreen, type CodeEditorWelcomeScreenProps, CodeEditorWorkspace, type CodeEditorWorkspaceProps, Collapse, type CollapseProps, ConnectionStatus, type ConnectionStatusProps, type ContextMenuItem, type DataPoint, type DataSeries, DateRangePicker, type DateRangePickerProps, DecentralizedServerIcon, type DeploymentCardAction, DeploymentDashboardCard, type DeploymentDashboardCardProps, DeploymentDashboardPanel, type DeploymentDashboardPanelProps, DeploymentDashboardTree, type DeploymentDashboardTreeProps, DeploymentEntityContextMenu, type DeploymentEntityContextMenuProps, type DeploymentEntityType, type DeploymentStatusIndicator, type DeploymentTreeNode, Dialog, type DialogProps, DiscordIcon, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, Dropdown, DropdownAnchor, type DropdownAnchorProps, type DropdownProps, EXTENSION_LANGUAGE_MAP, EmptyState, type EmptyStateProps, EntityHeader, type EntityHeaderProps, type FileTreeNode, type FileTreeNodeRenderProps, FilledFolderIcon, FlowEditor, type FlowEditorProps, FolderIcon, type GitInfo, GithubLogoIcon, IDBlock, type IDBlockProps, IconButton, type IconButtonProps, LeftArrowIcon, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingAnimation, type LoadingAnimationProps, LoadingButton, type LoadingButtonProps, type LoadingProps, Logo, type LogoProps, Markdown, type MarkdownProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MetricsChart, type MetricsChartProps, type MetricsPeriod, NavigationItem, type NavigationItemProps, NavigationList, type NavigationListProps, OnboardingProvider, Pagination, type PaginationProps, Paper, type PaperProps, PeriodSelect, type PrimaryAction, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, type RadioProps, RightArrowIcon, RoleBadge, type RoleBadgeColor, type RoleBadgeProps, type RoleBadgeSize, SearchField, type SearchFieldProps, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, ShareIcon, SideNav, SideNavHeader, type SideNavHeaderProps, type SideNavProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, StorageAppIcon, type SummaryItem, SummaryStats, type SummaryStatsProps, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, type TimeRangeOption, TimeRangeSelect, type TimeRangeSelectProps, TimeSeriesGraph, type TimeSeriesGraphProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, UploadFileIcon, UploadFolderIcon, type UseCodeEditorWorkspaceOptions, type UseCodeEditorWorkspaceReturn, type UserInfo, WORKFLOW_NODE_LABELS, WORKFLOW_NODE_SHADOW, WorkflowNode, type WorkflowNodeData, WorkflowNodeHandle, type WorkflowNodeProps, type WorkflowNodeType, WorkflowSideInspector, type WorkflowSideInspectorProps, WorkflowTimeBar, type WorkflowTimeBarProps, WorkflowTopBar, type WorkflowTopBarProps, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, contextMenuItems, detectLanguage, getFileName, robPaletteExtended, robPrimaryPalette, theme, useCodeEditorWorkspace, useIsDesktop, useIsMobile, useIsTablet, useOnboarding, workflowConnectionColors, workflowNodeColors };
+export { Accordion, type AccordionProps, AccountSection, type AccountSectionProps, ActivityAppIcon, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, AvatarIcon, type AvatarProps, Badge, type BadgeProps, BarTrackingIcon, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, CardMedia, type CardMediaProps, type CardProps, Carousel, type CarouselProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipVariant, type ChipVariantStyles, CircularProgress, type CircularProgressProps, ClockIcon, CloudFlashIcon, CodeEditor, type CodeEditorFile, CodeEditorFileTree, type CodeEditorFileTreeProps, type CodeEditorLanguage, type CodeEditorProps, CodeEditorStatusBar, type CodeEditorStatusBarItem, type CodeEditorStatusBarProps, type CodeEditorStatusBarRenderProps, type CodeEditorTab, type CodeEditorTabRenderProps, CodeEditorTabs, type CodeEditorTabsProps, CodeEditorWelcomeScreen, type CodeEditorWelcomeScreenProps, CodeEditorWorkspace, type CodeEditorWorkspaceProps, Collapse, type CollapseProps, ConnectionStatus, type ConnectionStatusProps, type ContextMenuItem, CopyChip, type CopyChipProps, type DataPoint, type DataSeries, DateRangePicker, type DateRangePickerProps, DecentralizedServerIcon, DefinitionRow, type DefinitionRowProps, type DeploymentCardAction, DeploymentDashboardCard, type DeploymentDashboardCardProps, DeploymentDashboardPanel, type DeploymentDashboardPanelProps, DeploymentDashboardTree, type DeploymentDashboardTreeProps, DeploymentEntityContextMenu, type DeploymentEntityContextMenuProps, type DeploymentEntityType, type DeploymentStatusIndicator, type DeploymentTreeNode, Dialog, type DialogProps, DiscordIcon, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, type DrawerWidth, type DrawerWidthValue, Dropdown, DropdownAnchor, type DropdownAnchorProps, type DropdownProps, EXTENSION_LANGUAGE_MAP, EmptyState, type EmptyStateProps, EntityHeader, type EntityHeaderProps, type FileTreeNode, type FileTreeNodeRenderProps, FilledFolderIcon, FlowEditor, type FlowEditorProps, FolderIcon, type GitInfo, GithubLogoIcon, IDBlock, type IDBlockProps, IconButton, type IconButtonProps, LeftArrowIcon, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingAnimation, type LoadingAnimationProps, LoadingButton, type LoadingButtonProps, type LoadingProps, Logo, type LogoProps, Markdown, type MarkdownProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MetaField, type MetaFieldProps, MetricsChart, type MetricsChartProps, type MetricsPeriod, NavigationItem, type NavigationItemProps, NavigationList, type NavigationListProps, OnboardingProvider, Pagination, type PaginationProps, PanelDialog, type PanelDialogProps, type PanelDialogSide, type PanelDialogWidth, Paper, type PaperProps, PeriodSelect, type PrimaryAction, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, type RadioProps, type ResponsiveDrawerWidth, RightArrowIcon, RoleBadge, type RoleBadgeColor, type RoleBadgeProps, type RoleBadgeSize, ScrollableRow, type ScrollableRowProps, SearchField, type SearchFieldProps, type SearchFieldVariant, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, ShareIcon, SideNav, SideNavHeader, type SideNavHeaderProps, type SideNavProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, StatusDot, type StatusDotProps, type StatusDotStatus, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, StorageAppIcon, type SummaryItem, SummaryStats, type SummaryStatsProps, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, type TimeRangeOption, TimeRangeSelect, type TimeRangeSelectProps, TimeSeriesGraph, type TimeSeriesGraphProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, UploadFileIcon, UploadFolderIcon, type UseCodeEditorWorkspaceOptions, type UseCodeEditorWorkspaceReturn, type UserInfo, WORKFLOW_NODE_LABELS, WORKFLOW_NODE_SHADOW, WorkflowNode, type WorkflowNodeData, WorkflowNodeHandle, type WorkflowNodeProps, type WorkflowNodeType, WorkflowSideInspector, type WorkflowSideInspectorProps, WorkflowTimeBar, type WorkflowTimeBarProps, WorkflowTopBar, type WorkflowTopBarProps, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, contextMenuItems, detectLanguage, getChipVariantStyles, getFileName, resolveDrawerWidth, robPaletteExtended, robPrimaryPalette, theme, useCodeEditorWorkspace, useIsDesktop, useIsMobile, useIsTablet, useOnboarding, useSearchHotkeys, workflowConnectionColors, workflowNodeColors };