@cere/cere-design-system 0.0.45 → 0.1.0

package/dist/index.d.mts

@@ -1,44 +1,51 @@
-import { Theme, SxProps } from '@mui/material/styles';
+import { Theme } 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, { 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, 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 { Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonTone, ButtonVariant, IconButton, IconButtonProps, LoadingButton, LoadingButtonProps } from './buttons.mjs';
+export { Checkbox, CheckboxProps, CopyableField, CopyableFieldProps, DateRangePicker, DateRangePickerProps, Radio, RadioProps, SearchField, SearchFieldProps, SearchFieldVariant, Switch, SwitchProps, TextField, TextFieldProps, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, useSearchHotkeys } from './inputs.mjs';
 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 { 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 { EmblaOptionsType } from 'embla-carousel';
-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 { 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 { QRCodeProps as QRCodeProps$1 } from 'react-qr-code';
-import { ReactFlowProps, Node, Edge, OnNodesChange, OnEdgesChange, NodeTypes, EdgeTypes, BackgroundVariant, MiniMapProps, ReactFlowInstance, NodeProps } from 'reactflow';
+export { AccountSection, AccountSectionProps, ConnectionStatus, ConnectionStatusProps, Dropdown, DropdownAnchor, DropdownAnchorProps, DropdownProps, Menu, MenuItem, MenuItemProps, MenuProps, NavigationItem, NavigationItemProps, NavigationList, NavigationListProps, NumberedStepper, NumberedStepperProps, NumberedStepperStep, Pagination, PaginationProps, Selector, SelectorOption, SelectorProps, Service, ServiceSelectorButton, ServiceSelectorButtonProps, SideNav, SideNavHeader, SideNavHeaderProps, SideNavProps, Sidebar, SidebarItem, SidebarItemProps, SidebarProps, Step, StepButton, StepButtonProps, StepContent, StepContentProps, StepLabel, StepLabelProps, StepProps, Stepper, StepperProps, Tab, TabProps, UserInfo, Workspace, WorkspaceSelectorButton, WorkspaceSelectorButtonProps } from './navigation.mjs';
+export { Alert, AlertProps, AlertSeverity, AppLoading, AppLoadingProps, Badge, BadgeProps, Chip, ChipProps, ChipTone, ChipVariant, ChipVariantStyles, CircularProgress, CircularProgressProps, CopyChip, CopyChipProps, EmptyState, EmptyStateProps, IDBlock, IDBlockProps, Loading, LoadingProps, Progress, ProgressProps, RoleBadge, RoleBadgeColor, RoleBadgeProps, RoleBadgeSize, Snackbar, SnackbarProps, StatusDot, StatusDotProps, StatusDotStatus, StatusLabel, StatusLabelProps, StatusLabelSize, Tooltip, TooltipProps, getChipVariantStyles } from './feedback.mjs';
+export { Accordion, AccordionProps, AgentAvatar, AgentAvatarProps, AppBar, AppBarProps, Avatar, AvatarProps, BreadcrumbItem, Breadcrumbs, BreadcrumbsProps, Card, CardActions, CardContent, CardHeader, CardMedia, CardMediaProps, CardProps, CardVariant, Collapse, CollapseProps, ContextMenuItem, DefinitionRow, DefinitionRowProps, DeploymentCardAction, DeploymentDashboardCard, DeploymentDashboardCardProps, DeploymentDashboardPanel, DeploymentDashboardPanelProps, DeploymentDashboardTree, DeploymentDashboardTreeProps, DeploymentEntityContextMenu, DeploymentEntityContextMenuProps, DeploymentEntityType, DeploymentStatusIndicator, DeploymentTreeNode, Dialog, DialogProps, Divider, DividerProps, Drawer, DrawerProps, DrawerWidth, DrawerWidthValue, EntityHeader, EntityHeaderProps, GRADIENT_PALETTE_COUNT, GradientSurface, GradientSurfaceProps, KpiCard, KpiCardProps, KpiTone, Link, LinkProps, List, ListItem, ListItemProps, ListProps, Logo, LogoProps, MetaField, MetaFieldProps, NumberedList, NumberedListItem, NumberedListProps, NumberedListTone, PanelDialog, PanelDialogProps, PanelDialogSide, PanelDialogWidth, Paper, PaperProps, PrimaryAction, ResponsiveDrawerWidth, ScrollableRow, ScrollableRowProps, SectionRow, SectionRowProps, SplitDialogContent, SplitDialogContentProps, Table, TableHeader, TableHeaderProps, TableProps, WorkflowSideInspector, WorkflowSideInspectorProps, WorkflowTimeBar, WorkflowTimeBarProps, WorkflowTopBar, WorkflowTopBarProps, contextMenuItems, resolveDrawerWidth } from './layout.mjs';
+export { W as WORKFLOW_NODE_LABELS, a as WORKFLOW_NODE_SHADOW, b as WorkflowNode, c as WorkflowNodeProps, d as WorkflowNodeType } from './WorkflowNode-BnxXO6t_.mjs';
+export { ActivityAppIcon, BarTrackingIcon, CereIcon, CloudFlashIcon, DecentralizedServerIcon, DiscordIcon, GithubLogoIcon, StorageAppIcon } from './icons.mjs';
+export { BytesSize, BytesSizeProps, Markdown, MarkdownProps, OnboardingProvider, QRCode, QRCodeProps, Truncate, TruncateProps, useOnboarding } from './utilities.mjs';
+export { ChartWidget, ChartWidgetProps, DataPoint, DataSeries, MetricsChart, MetricsChartProps, MetricsPeriod, PeriodSelect, SummaryItem, SummaryStats, SummaryStatsProps, TimeRangeOption, TimeRangeSelect, TimeRangeSelectProps, TimeSeriesGraph, TimeSeriesGraphProps } from './charts.mjs';
+export { CodeEditor, CodeEditorFile, CodeEditorFileTree, CodeEditorFileTreeProps, CodeEditorLanguage, CodeEditorProps, CodeEditorStatusBar, CodeEditorStatusBarItem, CodeEditorStatusBarProps, CodeEditorStatusBarRenderProps, CodeEditorTab, CodeEditorTabRenderProps, CodeEditorTabs, CodeEditorTabsProps, CodeEditorWelcomeScreen, CodeEditorWelcomeScreenProps, CodeEditorWorkspace, CodeEditorWorkspaceProps, EXTENSION_LANGUAGE_MAP, FileTreeNode, FileTreeNodeRenderProps, FlowEditor, FlowEditorProps, GitInfo, UseCodeEditorWorkspaceOptions, UseCodeEditorWorkspaceReturn, WorkflowNodeData, WorkflowNodeHandle, detectLanguage, getFileName, useCodeEditorWorkspace } from './third-party.mjs';
 export { Background, BackgroundVariant, ConnectionLineType, Controls, Edge, EdgeTypes, MiniMap, Node, NodeTypes, OnEdgesChange, OnNodesChange, Panel, ReactFlowInstance } from 'reactflow';
-import { Monaco } from '@monaco-editor/react';
-import { editor } from 'monaco-editor';
 export { default as RadioGroup } from '@mui/material/RadioGroup';
+import 'react';
+import '@mui/material/Button';
+import '@mui/material/IconButton';
+import '@mui/lab';
+import '@mui/material/TextField';
+import '@mui/material/Switch';
+import '@mui/material/Checkbox';
+import '@mui/material/Radio';
+import '@mui/material/ListItemButton';
+import '@mui/material/Tab';
+import '@mui/material/Pagination';
+import '@mui/material/Badge';
+import '@mui/material/Chip';
+import '@mui/material/Tooltip';
+import '@mui/material/Alert';
+import '@mui/material/Snackbar';
+import '@mui/material/Drawer';
+import '@mui/material/Card';
+import '@mui/material/CardContent';
+import '@mui/material/CardHeader';
+import '@mui/material/CardActions';
+import '@mui/material/CardMedia';
+import '@mui/material/Avatar';
+import '@mui/material/Breadcrumbs';
+import '@mui/material/Paper';
+import '@mui/material/Divider';
+import '@mui/material/Link';
+import '@mui/material/Box';
+import '@mui/material/SvgIcon';
+import 'react-qr-code';
+import '@monaco-editor/react';
+import 'monaco-editor';
 
 /**
  * Module augmentation for the custom typography variants defined in
@@ -381,6 +388,114 @@ declare const webSurfaceTokens: {
 };
 type WebSurfaceTokenKey = keyof typeof webSurfaceTokens;
 
+/**
+ * Surface variant: web-light.
+ *
+ * The marketplace + vault product palette. Both apps render on a light
+ * surface; the older audit synthesis (which assumed marketplace was dark)
+ * was wrong. There is no shipping dark variant today; that lands as part
+ * of the dark-mode work (blocker `B5` in `DESIGN_SYSTEM_TODO.md`).
+ *
+ * This variant currently mirrors `webSurfaceTokens` verbatim. Future
+ * work may diverge (e.g. a vault-specific accent override), at which
+ * point a new named variant should be added rather than forking values
+ * in app land.
+ *
+ * See `company-memory-bank/00-foundations/design-system.md` §4.
+ */
+declare const webLight: {
+    readonly cViolet: "#aa44f2";
+    readonly cVioletTint: "#a54aff";
+    readonly cVioletLight: "#f0e0fb";
+    readonly cVioletDark: "#7c59ac";
+    readonly cPink: "#f941e6";
+    readonly cPinkLight: "#fcdff9";
+    readonly cRed: "#ff4f59";
+    readonly cGreen: "#49bf63";
+    readonly cBlueLight: "#e7f4fe";
+    readonly cBlueDark: "#598ab8";
+    readonly robFandango: "#BD32A7";
+    readonly robElectricViolet: "#8B00EC";
+    readonly robUltraViolet: "#6750A4";
+    readonly robPeriwinkle: "#D0BCFF";
+    readonly robBright1: "#5311e3";
+    readonly robNearBlack2: "#0d0627";
+    readonly robNearBlack4: "#23194b";
+    readonly surfaceLow: "#f5f1f7";
+    readonly surfaceMid: "#f5f1f7";
+    readonly surfaceHigh: "#fefcff";
+    readonly surfaceContrast: "#ffffff";
+    readonly bgDefault: "#f5f5f5";
+    readonly bgDim: "#e6e0e9";
+    readonly bgSuccess: "#eef5f0";
+    readonly bgWarning: "#fef8e8";
+    readonly bgDanger: "#f9dedc";
+    readonly textOnDanger: "#8c1d18";
+    readonly textPrimary: "#1d1b20";
+    readonly textSecondary: "#5f5c64";
+    readonly textMuted: "#938f99";
+    readonly textLink: "#aa44f2";
+    readonly strokeOnLow: "#e6e0e9";
+    readonly strokeOnMed: "#dad1e0";
+    readonly shadowSm: "0px 2px 8px rgba(0,0,0,0.04)";
+    readonly shadowMd: "0px 4px 20px rgba(0,0,0,0.05)";
+    readonly shadowFocus: "0 0 0 4px rgba(170,68,242,0.25)";
+};
+type WebLightVariant = typeof webLight;
+
+/**
+ * Named surface variants. Consumers pick one variant per product surface
+ * by importing the matching CSS layer (`@cere/cere-design-system/surfaces/<name>.css`)
+ * AND optionally referencing the typed token bag here at the TS layer.
+ *
+ * Today there is only `webLight` (the shipped marketplace + vault
+ * palette). A future `webDark` lands with the dark-mode work
+ * (`DESIGN_SYSTEM_TODO.md` blocker `B5`).
+ *
+ * See `company-memory-bank/00-foundations/design-system.md` §4.
+ */
+declare const surfaceVariants: {
+    readonly webLight: {
+        readonly cViolet: "#aa44f2";
+        readonly cVioletTint: "#a54aff";
+        readonly cVioletLight: "#f0e0fb";
+        readonly cVioletDark: "#7c59ac";
+        readonly cPink: "#f941e6";
+        readonly cPinkLight: "#fcdff9";
+        readonly cRed: "#ff4f59";
+        readonly cGreen: "#49bf63";
+        readonly cBlueLight: "#e7f4fe";
+        readonly cBlueDark: "#598ab8";
+        readonly robFandango: "#BD32A7";
+        readonly robElectricViolet: "#8B00EC";
+        readonly robUltraViolet: "#6750A4";
+        readonly robPeriwinkle: "#D0BCFF";
+        readonly robBright1: "#5311e3";
+        readonly robNearBlack2: "#0d0627";
+        readonly robNearBlack4: "#23194b";
+        readonly surfaceLow: "#f5f1f7";
+        readonly surfaceMid: "#f5f1f7";
+        readonly surfaceHigh: "#fefcff";
+        readonly surfaceContrast: "#ffffff";
+        readonly bgDefault: "#f5f5f5";
+        readonly bgDim: "#e6e0e9";
+        readonly bgSuccess: "#eef5f0";
+        readonly bgWarning: "#fef8e8";
+        readonly bgDanger: "#f9dedc";
+        readonly textOnDanger: "#8c1d18";
+        readonly textPrimary: "#1d1b20";
+        readonly textSecondary: "#5f5c64";
+        readonly textMuted: "#938f99";
+        readonly textLink: "#aa44f2";
+        readonly strokeOnLow: "#e6e0e9";
+        readonly strokeOnMed: "#dad1e0";
+        readonly shadowSm: "0px 2px 8px rgba(0,0,0,0.04)";
+        readonly shadowMd: "0px 4px 20px rgba(0,0,0,0.05)";
+        readonly shadowFocus: "0 0 0 4px rgba(170,68,242,0.25)";
+    };
+};
+type SurfaceVariant = keyof typeof surfaceVariants;
+
 /**
  * Design system theme barrel.
  *
@@ -492,3055 +607,25 @@ declare const useIsDesktop: () => boolean;
 declare const useIsTablet: () => boolean;
 declare const useIsMobile: () => boolean;
 
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-type ButtonTone = 'default' | 'onGradient';
-interface ButtonProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
-    /**
-     * The visual style variant of the button
-     * - primary: Filled button with primary color background
-     * - secondary: Outlined button with transparent background and border
-     * - tertiary: Text button with no background or border
-     */
-    variant?: ButtonVariant;
-    /**
-     * Tone overlay. When set, **replaces** the per-variant styling — `variant`
-     * is ignored. Today the only non-default tone is `onGradient`, which paints
-     * the button as a white pill on a dark gradient surface (banner CTA
-     * pattern). Use the default tone if you want `variant` to drive the look.
-     * @default 'default'
-     */
-    tone?: ButtonTone;
-    /**
-     * The size of the button
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Icon element to display before the button text
-     */
-    startIcon?: React__default.ReactNode;
-    /**
-     * Icon element to display after the button text
-     */
-    endIcon?: React__default.ReactNode;
-}
-declare const Button: React__default.FC<ButtonProps>;
-
-interface IconButtonProps extends IconButtonProps$1 {
-    variant?: 'default' | 'primary' | 'secondary';
-}
-declare const IconButton: React__default.FC<IconButtonProps>;
-
-interface LoadingButtonProps extends LoadingButtonProps$1 {
-    /**
-     * If `true`, the button will show a loading indicator
-     */
-    loading?: boolean;
-    /**
-     * The loading indicator can be positioned inside the button or in the center
-     */
-    loadingPosition?: 'start' | 'end' | 'center';
-}
-/**
- * LoadingButton component - Button with loading state from MUI Lab
- *
- * @example
- * ```tsx
- * <LoadingButton
- *   variant="contained"
- *   loading={isLoading}
- *   onClick={handleSubmit}
- * >
- *   Submit
- * </LoadingButton>
- * ```
- */
-declare const LoadingButton: React__default.FC<LoadingButtonProps>;
-
-interface ButtonGroupProps extends ButtonGroupProps$1 {
-    /**
-     * The content of the button group
-     */
-    children?: React__default.ReactNode;
-    /**
-     * If `true`, the buttons will be disabled
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the button group will take full width
-     */
-    fullWidth?: boolean;
-    /**
-     * The orientation of the button group
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * The size of the buttons
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * The variant to use
-     * @default 'outlined'
-     */
-    variant?: 'text' | 'outlined' | 'contained';
-}
-/**
- * ButtonGroup component - groups related buttons together
- *
- * @example
- * ```tsx
- * <ButtonGroup variant="contained">
- *   <Button>One</Button>
- *   <Button>Two</Button>
- *   <Button>Three</Button>
- * </ButtonGroup>
- * ```
- */
-declare const ButtonGroup: React__default.FC<ButtonGroupProps>;
-
-type TextFieldSize = 'small' | 'medium';
-interface TextFieldProps extends Omit<TextFieldProps$1, 'size'> {
-    size?: TextFieldSize;
-}
-declare const TextField: React__default.FC<TextFieldProps>;
-
-interface CopyableFieldProps {
-    /** The string copied to the clipboard. Also rendered as the button label. */
-    value: string;
-    /** Small label rendered above the value (overline-styled). */
-    label?: React__default.ReactNode;
-    /** Custom aria-label; defaults to "Copy {value}". */
-    ariaLabel?: string;
-    /** How long the "Copied" flash stays visible, in ms. @default 1400 */
-    flashDurationMs?: number;
-    /** Text shown during the flash. @default "Copied" */
-    flashLabel?: string;
-    /** Optional callback invoked after a successful copy. */
-    onCopy?: (value: string) => void;
-}
-/**
- * Tinted card with a label row and a monospace, click-to-copy value button.
- * Replaces ad-hoc `.share-card / .url / .share-card__flash` markup.
- */
-declare const CopyableField: React__default.FC<CopyableFieldProps>;
-
-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;
-declare const ToggleButtonGroup: React__default.FC<ToggleButtonGroupProps>;
-
-interface SwitchProps extends SwitchProps$1 {
-    label?: string;
-    labelPosition?: 'left' | 'right';
-}
-declare const Switch: React__default.FC<SwitchProps>;
-
-interface CheckboxProps extends Omit<CheckboxProps$1, 'color'> {
-    label?: string;
-    labelPosition?: 'left' | 'right';
-}
-declare const Checkbox: React__default.FC<CheckboxProps>;
-
-interface RadioProps extends Omit<RadioProps$1, 'color'> {
-    label?: string;
-    labelPosition?: 'left' | 'right';
-}
-declare const Radio: React__default.FC<RadioProps>;
-
-/** Props for the DateRangePicker component. */
-interface DateRangePickerProps {
-    /** The selected start date, or null if unset. */
-    startDate: Date | null;
-    /** The selected end date, or null if unset. */
-    endDate: Date | null;
-    /** Callback fired when the start date changes. */
-    onStartDateChange: (date: Date | null) => void;
-    /** Callback fired when the end date changes. */
-    onEndDateChange: (date: Date | null) => void;
-    /** Earliest selectable date for both pickers. */
-    minDate?: Date;
-    /** Latest selectable date for both pickers. */
-    maxDate?: Date;
-    /** If true, both date pickers are disabled. @default false */
-    disabled?: boolean;
-    /** Size of the text field inputs. @default 'small' */
-    size?: 'small' | 'medium';
-}
-declare const DateRangePicker: React__default.FC<DateRangePickerProps>;
-
-type DropdownAnchorProps = {
-    open?: boolean;
-    label?: ReactNode;
-    leftElement?: ReactNode;
-    onOpen?: () => void;
-    variant?: 'header' | 'button';
-};
-declare const DropdownAnchor: React$1.ForwardRefExoticComponent<DropdownAnchorProps & React$1.RefAttributes<HTMLButtonElement>>;
-
-type RenderAnchorOptions = {
-    ref: Ref<any>;
-    open: boolean;
-    onOpen: () => void;
-};
-type DropdownProps = Pick<PopoverProps, 'open' | 'children'> & Omit<DropdownAnchorProps, 'open'> & {
-    direction?: 'right' | 'left';
-    dense?: boolean;
-    disableGutters?: boolean;
-    disablePaddings?: boolean;
-    onToggle?: (open: boolean) => void;
-    renderAnchor?: (options: RenderAnchorOptions) => ReactNode;
-    variant: 'header' | 'button';
-};
-declare const Dropdown: ({ open, label, leftElement, direction, children, onToggle, dense, disableGutters, disablePaddings, variant, renderAnchor, }: DropdownProps) => react_jsx_runtime.JSX.Element;
-
-interface SidebarItemProps {
-    label: string;
-    icon?: React__default.ReactNode;
-    selected?: boolean;
-    onClick?: () => void;
-    size?: 'small' | 'medium' | 'large';
-    endIcon?: React__default.ReactNode;
-    children?: React__default.ReactNode;
-}
-declare const SidebarItem: React__default.FC<SidebarItemProps>;
-
-interface SidebarProps {
-    open?: boolean;
-    width?: number;
-    items: SidebarItemProps[];
-    onClose?: () => void;
-    variant?: 'permanent' | 'persistent' | 'temporary';
-}
-declare const Sidebar: React__default.FC<SidebarProps>;
-
-interface Service {
-    id: string;
-    name: string;
-    description?: string;
-    type?: string;
-    lastAccessed?: string;
-    memberCount?: number;
-    favorited?: boolean;
-    isPersonal?: boolean;
-    avatar?: string;
-    archived?: boolean;
-}
-interface ServiceSelectorButtonProps {
-    /**
-     * List of services to display
-     */
-    services: Service[];
-    /**
-     * Currently selected service ID
-     */
-    selectedServiceId: string | null;
-    /**
-     * Loading state
-     */
-    loading?: boolean;
-    /**
-     * Compact mode for mobile or mini-sidebar
-     */
-    compact?: boolean;
-    /**
-     * Callback when service is selected
-     */
-    onSelectService?: (serviceId: string) => void;
-    /**
-     * Callback when service name is clicked (for navigation)
-     */
-    onServiceClick?: (serviceId: string) => void;
-    /**
-     * Callback when "Create Service" is clicked
-     */
-    onCreateService?: () => void;
-    /**
-     * Callback after service is created
-     */
-    onServiceCreated?: () => void;
-    /**
-     * Whether user is a manager for the selected service
-     */
-    isManager?: boolean;
-    /**
-     * Custom styles
-     */
-    sx?: never;
-    /**
-     * Panel width
-     * @default 350
-     */
-    panelWidth?: number;
-    /**
-     * Callback when Settings button is clicked
-     */
-    onOpenSettings?: (serviceId: string) => void;
-    /**
-     * Callback when Add Member button is clicked
-     */
-    onOpenAddMember?: (serviceId: string) => void;
-}
-declare const ServiceSelectorButton: React__default.FC<ServiceSelectorButtonProps>;
-
-interface Workspace {
-    id: string;
-    name: string;
-    description?: string;
-}
-interface WorkspaceSelectorButtonProps {
-    /**
-     * List of workspaces to display
-     */
-    workspaces: Workspace[];
-    /**
-     * Currently selected workspace ID
-     */
-    selectedWorkspaceId: string | null;
-    /**
-     * Loading state
-     */
-    loading?: boolean;
-    /**
-     * Callback when workspace is selected
-     */
-    onSelectWorkspace?: (workspaceId: string) => void;
-    /**
-     * Callback when workspace name is clicked (for navigation)
-     */
-    onWorkspaceClick?: (workspaceId: string) => void;
-    /**
-     * Callback when "Create Workspace" is clicked
-     */
-    onCreateWorkspace?: () => void;
-    /**
-     * Custom styles
-     */
-    sx?: any;
-    /**
-     * Panel width
-     * @default 350
-     */
-    panelWidth?: number;
-}
-declare const WorkspaceSelectorButton: React__default.FC<WorkspaceSelectorButtonProps>;
-
-type StepperProps = StepperProps$1;
 /**
- * Stepper component - displays progress through a sequence of steps
+ * Time formatters shared across CEF surfaces. Kept intentionally tiny and
+ * dependency-free so consumers (vault, marketplace, ROB) can render
+ * timestamps the same way without each shipping their own copy.
  *
- * @example
- * ```tsx
- * <Stepper activeStep={activeStep}>
- *   <Step>
- *     <StepLabel>Step 1</StepLabel>
- *   </Step>
- *   <Step>
- *     <StepLabel>Step 2</StepLabel>
- *   </Step>
- * </Stepper>
- * ```
- */
-declare const Stepper: React__default.FC<StepperProps>;
-type StepProps = StepProps$1;
-/**
- * Step component - represents a single step in a Stepper
- */
-declare const Step: React__default.FC<StepProps>;
-type StepLabelProps = StepLabelProps$1;
-/**
- * StepLabel component - label for a Step
- */
-declare const StepLabel: React__default.FC<StepLabelProps>;
-type StepContentProps = StepContentProps$1;
-/**
- * StepContent component - optional content that appears below a StepLabel
- */
-declare const StepContent: React__default.FC<StepContentProps>;
-type StepButtonProps = StepButtonProps$1;
-/**
- * StepButton component - makes a Step clickable
- */
-declare const StepButton: React__default.FC<StepButtonProps>;
-
-interface NumberedStepperStep {
-    key: string;
-    label: string;
-}
-interface NumberedStepperProps {
-    steps: NumberedStepperStep[];
-    /** Index of the active step. -1 = none active. */
-    current: number;
-    className?: string;
-}
-/**
- * Vertical numbered stepper used by Try-this-out and similar guided flows.
- * Brand-styled: active rows take the violet palette; completed rows show ✓.
- */
-declare const NumberedStepper: React__default.FC<NumberedStepperProps>;
-
-/**
- * Type definitions for SideNav components
- * Side Navigation Bar Component - V1 (Expanded State) & V2 (Collapsed State)
- */
-
-/**
- * Navigation Item Properties
- * Individual navigation menu item with icon, label, and interactive states
- */
-interface NavigationItemProps extends Omit<ListItemButtonProps, 'selected' | 'onClick'> {
-    /**
-     * Unique identifier for the navigation item
-     * Used for selection tracking and key prop
-     */
-    id: string;
-    /**
-     * Display text for the navigation item
-     */
-    label: string;
-    /**
-     * Icon element to display (typically a Material UI icon component)
-     */
-    icon?: ReactNode;
-    /**
-     * Position of the icon relative to the label
-     * @default 'left'
-     */
-    iconPosition?: 'left' | 'right';
-    /**
-     * Whether this item is currently selected/active
-     * @default false
-     */
-    selected?: boolean;
-    /**
-     * Whether this item is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Click handler for the navigation item
-     * @param id - The id of the clicked item
-     */
-    onClick?: (id: string) => void;
-    /**
-     * Additional content to display on the right side
-     * Can be a button, dropdown, badge, etc.
-     */
-    endContent?: ReactNode;
-    /**
-     * Optional URL for link-based navigation
-     * If provided, component renders as a link
-     */
-    href?: string;
-    /**
-     * Accessibility label for screen readers
-     * @default Uses 'label' prop value
-     */
-    ariaLabel?: string;
-    /**
-     * Size variant for the navigation item
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Whether sidebar is collapsed (icon-only mode) - V2
-     * When true:
-     * - Label is hidden
-     * - Tooltip shows on hover/focus
-     * - EndContent is hidden
-     * - Icon is centered
-     * @default false
-     */
-    collapsed?: boolean;
-    /**
-     * Whether to show tooltip in collapsed mode - V2
-     * @default true
-     */
-    showTooltip?: boolean;
-    /**
-     * Tooltip placement - V2
-     * @default 'right'
-     */
-    tooltipPlacement?: 'left' | 'right' | 'top' | 'bottom';
-}
-/**
- * Navigation List Properties
- * Container for multiple navigation items with scroll support
- */
-interface NavigationListProps {
-    /**
-     * Array of navigation items to display
-     */
-    items: NavigationItemProps[];
-    /**
-     * ID of currently selected item (controlled mode)
-     */
-    selectedId?: string;
-    /**
-     * Callback when selection changes
-     * @param id - The id of the newly selected item
-     */
-    onSelectionChange?: (id: string) => void;
-    /**
-     * Maximum height before scrolling kicks in
-     * @default 'auto'
-     */
-    maxHeight?: string | number;
-    /**
-     * Accessibility label for the list
-     * @default 'Navigation menu'
-     */
-    ariaLabel?: string;
-    /**
-     * Whether sidebar is collapsed - V2
-     * Passed down to all NavigationItem children
-     * @default false
-     */
-    collapsed?: boolean;
-    /**
-     * Whether to show tooltips on items when collapsed - V2
-     * Passed down to each NavigationItem's showTooltip prop
-     * @default true
-     */
-    showTooltips?: boolean;
-}
-/**
- * User Information
- * Used in AccountSection component
+ * Both helpers return the em-dash placeholder `'—'` for missing or
+ * unparseable input so call sites can drop the value directly into JSX
+ * without a guard.
  */
-interface UserInfo {
-    /**
-     * User's display name
-     */
-    name: string;
-    /**
-     * User's email address (optional)
-     */
-    email?: string;
-    /**
-     * User's initials for avatar fallback
-     * If not provided, will be derived from name
-     */
-    initials?: string;
-    /**
-     * URL for user avatar image
-     */
-    avatarUrl?: string;
-}
 /**
- * Connection Status Properties
- * Displays connection status with pill-style indicator
+ * Render an ISO-8601 timestamp as a coarse relative string ("12s ago",
+ * "7m ago", "3h ago"). For gaps of a day or more, falls back to the
+ * browser's locale string so the absolute date is still legible.
  */
-interface ConnectionStatusProps {
-    /**
-     * Status text to display (e.g., "Connected to Dragon 1")
-     */
-    status: string;
-    /**
-     * Visual variant of the status
-     * @default 'info'
-     */
-    variant?: 'success' | 'warning' | 'error' | 'info';
-    /**
-     * Optional custom icon to replace the default power icon
-     */
-    icon?: ReactNode;
-    /**
-     * Optional click handler (makes status interactive)
-     */
-    onClick?: () => void;
-    /**
-     * Compact mode for collapsed sidebar - V2
-     * When true:
-     * - Shows pill with icon + compactText (or falls back to icon-only)
-     * - Tooltip shows full status text on hover/focus
-     * @default false
-     */
-    compact?: boolean;
-    /**
-     * Short label to display in compact mode (e.g. "D1") - V2
-     * If not provided, compact mode shows icon-only
-     */
-    compactText?: string;
-}
+declare function formatRelativeTime(iso: string | undefined | null): string;
 /**
- * Account Section Properties
- * Displays user account information with avatar, name, and logout
- */
-interface AccountSectionProps {
-    /**
-     * User information object
-     */
-    user: UserInfo;
-    /**
-     * Logout button click handler
-     */
-    onLogout: () => void;
-    /**
-     * Whether to show email below name
-     * @default false
-     */
-    showEmail?: boolean;
-    /**
-     * Layout variant
-     * @default 'horizontal'
-     */
-    layout?: 'horizontal' | 'vertical';
-    /**
-     * Compact mode (avatar-only for collapsed sidebar) - V2
-     * When true:
-     * - Name and email are hidden
-     * - Only avatar is shown (40px)
-     * - Tooltip shows name + email on hover/focus
-     * - Logout button becomes icon-only
-     * @default false
-     */
-    compact?: boolean;
-}
-/**
- * SideNav Properties
- * Main container component that composes all navigation sections
- */
-interface SideNavProps {
-    /**
-     * Width of the sidebar when expanded (pixels) - V1
-     * @default 280
-     */
-    width?: number;
-    /**
-     * Width of the sidebar when collapsed (pixels) - V2
-     * @default 68
-     */
-    collapsedWidth?: number;
-    /**
-     * Whether the sidebar is collapsed (controlled mode) - V2
-     * When provided: Component is controlled (parent manages state)
-     * When undefined: Component is uncontrolled (internal state)
-     * @default undefined
-     */
-    collapsed?: boolean;
-    /**
-     * Default collapsed state (uncontrolled mode only) - V2
-     * Ignored if `collapsed` prop is provided
-     * @default false
-     */
-    defaultCollapsed?: boolean;
-    /**
-     * Callback fired when collapsed state changes - V2
-     * Called after toggle button click or programmatic state change
-     * @param collapsed - New collapsed state value
-     */
-    onCollapseChange?: (collapsed: boolean) => void;
-    /**
-     * Duration of the collapse/expand width transition in ms - V2
-     * @default 300
-     */
-    transitionDuration?: number;
-    /**
-     * Whether to show tooltips on child items when collapsed - V2
-     * Passed down via context to NavigationList and NavigationItem
-     * @default true
-     */
-    showTooltips?: boolean;
-    /**
-     * Position of the sidebar
-     * @default 'left'
-     */
-    position?: 'left' | 'right';
-    /**
-     * Whether to show border on the edge
-     * @default true
-     */
-    showBorder?: boolean;
-    /**
-     * Custom background color
-     * @default theme.palette.background.paper
-     */
-    backgroundColor?: string;
-    /**
-     * Child components (NavigationList, ConnectionStatus, AccountSection)
-     */
-    children: ReactNode;
-    /**
-     * Additional CSS class name
-     */
-    className?: string;
-    /**
-     * Accessibility label for the navigation
-     * @default 'Main navigation'
-     */
-    ariaLabel?: string;
-}
-/**
- * SideNav Header Properties
- * Displays app branding (logo + title) and an optional collapse toggle button
- */
-interface SideNavHeaderProps {
-    /**
-     * App logo or icon element (e.g. an <img>, SVG, or MUI Icon)
-     */
-    logo?: ReactNode;
-    /**
-     * App or brand title text displayed next to the logo
-     */
-    title: string;
-    /**
-     * Whether to show the collapse toggle button
-     * @default true
-     */
-    showCollapseButton?: boolean;
-    /**
-     * Callback fired when the collapse button is clicked.
-     * Wire this up to toggle sidebar expanded/collapsed state (V2).
-     */
-    onCollapse?: () => void;
-    /**
-     * Callback fired when the logo/title branding area is clicked.
-     * Use this for "go to home" navigation. Only the logo + title region
-     * is clickable — the collapse button and surrounding padding are excluded.
-     */
-    onLogoClick?: () => void;
-    /**
-     * Accessibility label for the header region
-     * @default '{title} navigation header'
-     */
-    ariaLabel?: string;
-    /**
-     * Whether sidebar is collapsed - V2
-     * When true:
-     * - Title text is hidden
-     * - Logo remains visible (compact)
-     * - Toggle button shows expand icon (→)
-     * @default false
-     */
-    collapsed?: boolean;
-}
-/**
- * Compound component slots for SideNav
- */
-interface SideNavHeaderSlotProps {
-    children: ReactNode;
-    className?: string;
-}
-interface SideNavNavigationProps {
-    children: ReactNode;
-    className?: string;
-}
-interface SideNavFooterProps {
-    children: ReactNode;
-    className?: string;
-}
-
-/**
- * SideNav Component
- * Main container for side navigation with compound components
- * V2: Added collapsed state support with animated transitions
- */
-
-/**
- * SideNav.Header compound component
- * Passes collapsed state and toggle handler to children
- */
-declare const Header: React__default.NamedExoticComponent<SideNavHeaderSlotProps>;
-/**
- * SideNav.Navigation compound component
- * Passes collapsed state to children
- */
-declare const Navigation: React__default.NamedExoticComponent<SideNavNavigationProps>;
-/**
- * SideNav.Footer compound component
- * Passes collapsed state to children
- */
-declare const Footer: React__default.NamedExoticComponent<SideNavFooterProps>;
-/**
- * Main SideNav component with compound components
- * V2: Supports controlled/uncontrolled collapsed state
- */
-interface SideNavComponent extends React__default.FC<SideNavProps> {
-    Header: typeof Header;
-    Navigation: typeof Navigation;
-    Footer: typeof Footer;
-}
-declare const SideNav: SideNavComponent;
-
-/**
- * SideNavHeader Component
- * Displays app branding (logo + title) and an optional collapse toggle button
- * V2: Supports collapsed state with compact logo-only view
- */
-
-/**
- * SideNavHeader Component
- *
- * Renders the app branding area at the top of the side navigation.
- * Includes an optional logo, a title, and an optional collapse toggle button.
- * V2: In collapsed state, shows logo stacked vertically above toggle button.
- *
- * If `onLogoClick` is provided, only the logo+title area is clickable
- * (e.g. to navigate back to the home page). The rest of the header
- * (collapse button, surrounding padding) does NOT trigger that callback.
- */
-declare const SideNavHeader: React__default.NamedExoticComponent<SideNavHeaderProps>;
-
-/**
- * NavigationList Component
- * Container for multiple navigation items with scroll support
- * V2: Passes collapsed state to navigation items
- */
-
-/**
- * NavigationList Component
- */
-declare const NavigationList: React__default.NamedExoticComponent<NavigationListProps>;
-
-/**
- * NavigationItem Component
- * Individual navigation menu item with icon, label, and interactive states
- * V2: Added collapsed state support with tooltips
- */
-
-/**
- * NavigationItem Component
- * V2: Supports collapsed state with tooltip
- */
-declare const NavigationItem: React__default.NamedExoticComponent<NavigationItemProps>;
-
-/**
- * ConnectionStatus Component
- * Displays connection status with pill-style indicator
- * V2: Supports compact mode for collapsed sidebar
- */
-
-/**
- * ConnectionStatus Component
- * V2: Supports compact mode
- */
-declare const ConnectionStatus: React__default.NamedExoticComponent<ConnectionStatusProps>;
-
-/**
- * AccountSection Component
- * Displays user account information with avatar, name, and logout
- * V2: Supports compact mode for collapsed sidebar
- */
-
-/**
- * AccountSection Component
- * V2: Supports compact mode
- */
-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;
-    children?: React__default.ReactNode;
-}
-declare const Badge: React__default.FC<BadgeProps>;
-
-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;
-
-type ChipTone = 'default' | 'onGradient';
-interface ChipProps extends Omit<ChipProps$1, 'color' | 'variant'> {
-    variant?: ChipVariant;
-    /**
-     * Visual tone overlay. `onGradient` styles the chip to read on a dark
-     * gradient surface (white text, mono caps, translucent border + bg).
-     * Positioning is the consumer's job.
-     * @default 'default'
-     */
-    tone?: ChipTone;
-}
-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
- */
-type RoleBadgeColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
-/**
- * Size variants for the RoleBadge component
- */
-type RoleBadgeSize = 'small' | 'medium';
-/**
- * RoleBadge component props
- */
-interface RoleBadgeProps extends Omit<ChipProps$1, 'label' | 'variant' | 'color' | 'size'> {
-    /**
-     * The text content to display in the badge
-     */
-    label: string;
-    /**
-     * The color theme of the badge
-     * @default 'primary'
-     */
-    color?: RoleBadgeColor;
-    /**
-     * The size of the badge
-     * @default 'small'
-     */
-    size?: RoleBadgeSize;
-}
-/**
- * RoleBadge - Pill-shaped badge component for displaying roles or status labels
- *
- * A reusable badge component that extends MUI Chip with a pill-shaped outline style.
- * Designed for displaying user roles, status indicators, or categorization labels.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <RoleBadge label="Manager" />
- *
- * // With color variants
- * <RoleBadge label="Admin" color="error" />
- * <RoleBadge label="Active" color="success" />
- *
- * // With size variants
- * <RoleBadge label="Owner" size="medium" />
- * ```
- *
- * @see Figma node 17-3595 for design specifications
- */
-declare const RoleBadge: React__default.FC<RoleBadgeProps>;
-
-/**
- * IDBlock component props
- */
-interface IDBlockProps {
-    /**
-     * The identifier value to display and copy
-     */
-    id: string;
-    /**
-     * Label prefix text
-     * @default 'ID'
-     */
-    label?: string;
-    /**
-     * Entity type for accessibility (used in aria-label)
-     * @default 'entity'
-     */
-    entityType?: string;
-    /**
-     * Additional callback to execute after successful copy
-     */
-    onCopy?: () => void;
-}
-/**
- * IDBlock - Read-only identifier display with integrated copy-to-clipboard button
- *
- * A component that displays an identifier (ID, account number, etc.) with a copy button.
- * Provides user feedback via an inline Snackbar when copy succeeds or fails.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <IDBlock id="W1234567890" />
- *
- * // With custom label
- * <IDBlock id="ACC-9876543" label="Account ID" entityType="account" />
- *
- * // With callback
- * <IDBlock
- *   id="DEPLOY-12345"
- *   label="Deployment ID"
- *   entityType="deployment"
- *   onCopy={() => console.log('ID copied')}
- * />
- * ```
- *
- * @see Figma node 17-3596 for design specifications
- */
-declare const IDBlock: React__default.FC<IDBlockProps>;
-
-type TooltipProps = TooltipProps$1;
-declare const Tooltip: React__default.FC<TooltipProps>;
-
-type ProgressVariant = 'linear' | 'circular';
-interface ProgressProps {
-    variant?: ProgressVariant;
-    value?: number;
-    size?: number;
-    thickness?: number;
-}
-declare const Progress: React__default.FC<ProgressProps>;
-
-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>;
-
-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;
-    title: ReactNode;
-    onClose: () => void;
-    onSubmit?: () => void;
-    submitLabel?: string;
-    cancelLabel?: string;
-    isLoading?: boolean;
-    disableSubmit?: boolean;
-    showActions?: boolean;
-    headerAction?: ReactNode;
-    fullWidth?: boolean;
-    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    children: ReactNode;
-    dividers?: boolean;
-    confirmBeforeClose?: boolean;
-    /**
-     * Custom actions to render instead of default actions
-     * If provided, showActions is ignored and custom actions are used
-     */
-    customActions?: ReactNode;
-}
-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. 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?: DrawerWidth;
-    /**
-     * Width of the drawer when collapsed (mini variant)
-     * @default 72
-     */
-    miniWidth?: number;
-    /**
-     * Whether the drawer is in collapsed/mini state
-     * @default false
-     */
-    collapsed?: boolean;
-    /**
-     * Title to display in the drawer header
-     */
-    title?: ReactNode;
-    /**
-     * Custom header content (replaces title if provided)
-     */
-    header?: ReactNode;
-    /**
-     * Show close button in header
-     * @default true for temporary variant, false for permanent
-     */
-    showCloseButton?: boolean;
-    /**
-     * Tab labels for tabbed drawer content
-     */
-    tabs?: string[];
-    /**
-     * Active tab index
-     */
-    activeTab?: number;
-    /**
-     * Callback when tab changes
-     */
-    onTabChange?: (index: number) => void;
-    /**
-     * Footer content (actions, buttons, etc.)
-     */
-    footer?: ReactNode;
-    /**
-     * Props for drawer content container
-     */
-    contentProps?: BoxProps;
-    /**
-     * Anchor position
-     * @default 'right'
-     */
-    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 SectionRowProps {
-    /** Section title (e.g. "Published by alice"). Rendered as an h2-equivalent. */
-    title: ReactNode;
-    /** Optional sublabel below the title (e.g. "3 agents"). */
-    subtitle?: ReactNode;
-    /** Optional right-aligned slot in the header (e.g. a "See all →" link). */
-    action?: ReactNode;
-    /** Accessible labels for the scroll chevrons. */
-    leftLabel?: string;
-    rightLabel?: string;
-    /** Tiles / cards rendered inside the horizontally-scrolling track. */
-    children: ReactNode;
-}
-/**
- * SectionRow — header (title + subtitle + right-side action) on top of a
- * ScrollableRow track. Use for "category row" or "publisher row" layouts in
- * marketplace / library / dashboard contexts. The scroll mechanics and edge
- * chevrons come from ScrollableRow.
- */
-declare function SectionRow({ title, subtitle, action, leftLabel, rightLabel, children, }: SectionRowProps): react_jsx_runtime.JSX.Element;
-
-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;
-    /** Escape hatch for advanced embla options. Most consumers don't need this. */
-    emblaOptions?: EmblaOptionsType;
-}
-/**
- * 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, emblaOptions, }: CarouselProps<T>): react_jsx_runtime.JSX.Element | null;
-
-/** Number of distinct gradient palettes. Useful for sizing slide cycles deterministically. */
-declare const GRADIENT_PALETTE_COUNT: 6;
-interface GradientSurfaceProps {
-    /**
-     * Which palette to use. Any integer (positive or negative) — the value is
-     * wrapped modulo the palette count, so callers can pass their own counter
-     * (`rowIndex + tileIndex`, slide index, etc.) without worrying about range.
-     */
-    index: number;
-    /** Optional body rendered over the gradient + blobs. */
-    children?: ReactNode;
-    /** Style overrides on the surface. */
-    sx?: SxProps<Theme>;
-}
-/**
- * GradientSurface — a positioned, gradient-painted surface with two soft blob
- * accents. Owns the brand palette cycle so consumers don't redeclare gradient
- * colors per route. Pair with absolute-positioned children for hero artwork.
- */
-declare function GradientSurface({ index, children, sx }: GradientSurfaceProps): react_jsx_runtime.JSX.Element;
-
-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;
-
-interface SplitDialogContentProps {
-    left: React__default.ReactNode;
-    right: React__default.ReactNode;
-    /** Width of the right (aside) column in px. @default 320 */
-    rightWidth?: number;
-    /** Viewport breakpoint (px) below which the layout collapses to one column. @default 860 */
-    collapseBelow?: number;
-    sx?: SxProps<Theme>;
-}
-/**
- * Two-column dialog body used by detail / info modals: primary content on
- * the left, sticky meta panel on the right. Collapses to a single column on
- * narrow viewports.
- *
- * Compose inside a `<PanelDialog>`:
- *   <PanelDialog ...>
- *     <SplitDialogContent left={...} right={...} />
- *   </PanelDialog>
- */
-declare const SplitDialogContent: React__default.FC<SplitDialogContentProps>;
-
-type CardMediaProps = CardMediaProps$1;
-declare const CardMedia: React__default.FC<CardMediaProps>;
-type CardVariant = 'standard' | 'tinted' | 'outlined';
-interface CardProps extends Omit<CardProps$1, 'variant'> {
-    /** Visual treatment. @default 'standard' */
-    variant?: CardVariant;
-    hoverable?: boolean;
-    /**
-     * Opt the card into being a real interactive element. When combined with
-     * `onClick`, the root renders via MUI ButtonBase — focusable button,
-     * Enter/Space activation, `:focus-visible` ring. When `clickable` is set
-     * without `onClick`, only the pointer cursor changes (back-compat).
-     *
-     * `<Card onClick={...}>` WITHOUT `clickable` keeps a `<div>` root and just
-     * forwards the click handler, so consumers using onClick for analytics or
-     * non-clickable side effects are not silently turned into buttons.
-     */
-    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';
-    /**
-     * Show bottom divider line
-     * @default true
-     */
-    divider?: boolean;
-}
-/**
- * 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
- * // 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" />
- * ```
- *
- * @see Figma node 15-1258 for design specifications
- */
-declare const EntityHeader: React__default.FC<EntityHeaderProps>;
-
-type DeploymentEntityType = 'workspace' | 'stream' | 'deployment' | 'engagement' | 'agent';
-type DeploymentStatusIndicator = 'normal' | 'warning' | 'error' | 'disabled' | null;
-interface DeploymentCardAction {
-    id: string;
-    label: string;
-    icon?: React__default.ReactNode;
-    onClick?: () => void;
-    highlight?: boolean;
-    outlined?: boolean;
-}
-interface DeploymentDashboardCardProps {
-    /** Entity type: drives chip color and icon (Figma 15-1725, 15-1276) */
-    entityType: DeploymentEntityType;
-    /** Primary title */
-    title: string;
-    /** Display id; when present shows "ID: {id}" with copy action */
-    id?: string;
-    /** Shown as "Created: …" */
-    createdAt?: string;
-    /** Shown as "Last Updated: …" */
-    updatedAt?: string;
-    /** Only for entityType === 'deployment'; shows Capacity label, progress bar, "X%" */
-    capacity?: number;
-    /** Action buttons/chips rendered inline on the right */
-    actions?: DeploymentCardAction[];
-    /** Status dot: green (normal), amber (warning), red (error), white/dim (disabled) */
-    statusIndicator?: DeploymentStatusIndicator;
-    /** Whether to show expand/collapse chevron on the left */
-    expandable?: boolean;
-    /** Controlled expanded state */
-    expanded?: boolean;
-    /** Called when chevron is clicked */
-    onExpandToggle?: () => void;
-    /** When copy ID is clicked */
-    onCopyId?: () => void;
-    /** Optional className */
-    className?: string;
-    /** Child content rendered inside the card border (used by tree to nest children) */
-    children?: React__default.ReactNode;
-}
-declare const DeploymentDashboardCard: React__default.FC<DeploymentDashboardCardProps>;
-
-/**
- * Describes a single item inside {@link DeploymentEntityContextMenu}.
- *
- * Items can be action rows (icon + label), toggle rows (switch + label),
- * or visual dividers. Use the pre-built `contextMenuItems` factories
- * for standard deployment-entity actions.
- *
- * @see Figma 11-1102
- */
-interface ContextMenuItem {
-    /** Unique key used for React reconciliation */
-    id: string;
-    /** Display label shown next to the icon */
-    label: string;
-    /** Optional leading icon (24 × 24) */
-    icon?: React__default.ReactNode;
-    /** Click handler — called when an action item is selected */
-    onClick?: () => void;
-    /**
-     * Item variant:
-     * - `'action'` (default) — clickable row with icon + label
-     * - `'toggle'` — switch on left + label, controlled by `enableChecked` / `onEnableChange`
-     * - `'divider'` — horizontal separator (label is ignored)
-     */
-    type?: 'action' | 'toggle' | 'divider';
-    /**
-     * When `true` the item renders with a blue highlight background
-     * (Figma blue-50 / blue-100 tokens). Used for the "Agent Flow Visualization" row.
-     * @default false
-     */
-    highlighted?: boolean;
-}
-/** Pre-built item factories for common deployment entity actions (Figma 11-1102) */
-declare const contextMenuItems: {
-    /** Add Engagement action (Add Circle icon) */
-    readonly addEngagement: (onClick: () => void) => ContextMenuItem;
-    /** Add Agent action (Add Circle icon) */
-    readonly addAgent: (onClick: () => void) => ContextMenuItem;
-    /** Add Stream action (Add Circle icon) */
-    readonly addStream: (onClick: () => void) => ContextMenuItem;
-    /** Edit action (Pen / Edit icon) */
-    readonly edit: (onClick: () => void) => ContextMenuItem;
-    /** Copy ID action (Copy icon) */
-    readonly copyId: (onClick: () => void) => ContextMenuItem;
-    /** Agent Flow Visualization — highlighted action (SmartToy icon) */
-    readonly agentFlowVisualization: (onClick: () => void) => ContextMenuItem;
-    /** View Logs action (Document / Description icon) */
-    readonly viewLogs: (onClick: () => void) => ContextMenuItem;
-    /** Horizontal divider between sections */
-    readonly divider: () => ContextMenuItem;
-    /** Enable toggle row (switch on left + label) */
-    readonly enable: () => ContextMenuItem;
-    /** Settings action (Settings / Gear icon) */
-    readonly settings: (onClick: () => void) => ContextMenuItem;
-};
-
-interface DeploymentEntityContextMenuProps {
-    /** Controlled open state */
-    open: boolean;
-    /** Anchor element for menu position */
-    anchorEl: HTMLElement | null;
-    /** Callback when the menu closes */
-    onClose: () => void;
-    /** Menu items to render (use contextMenuItems helpers to build) */
-    items: ContextMenuItem[];
-    /** Whether to show an "Enable" row with toggle at the bottom (legacy — prefer inline toggle item) */
-    enableToggle?: boolean;
-    /** Toggle checked state */
-    enableChecked?: boolean;
-    /** Toggle callback */
-    onEnableChange?: (checked: boolean) => void;
-}
-/**
- * Floating context menu for deployment entities.
- *
- * Use the `contextMenuItems` factory to compose your menu. Supports action items,
- * dividers, toggle rows, and highlighted (active-state) items.
- *
- * @see {@link https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=11-1102 Figma 11-1102}
- */
-declare const DeploymentEntityContextMenu: React__default.FC<DeploymentEntityContextMenuProps>;
-
-interface DeploymentTreeNode {
-    id: string;
-    entityType: DeploymentEntityType;
-    title: string;
-    idDisplay?: string;
-    createdAt?: string;
-    updatedAt?: string;
-    capacity?: number;
-    actions?: DeploymentCardAction[];
-    statusIndicator?: DeploymentStatusIndicator;
-    children?: DeploymentTreeNode[];
-    expanded?: boolean;
-}
-interface DeploymentDashboardTreeProps {
-    /** Tree of entities */
-    nodes: DeploymentTreeNode[];
-    /** When a row's expand is toggled */
-    onExpandToggle?: (nodeId: string) => void;
-    /** When a card's copy-ID button is clicked */
-    onCopyId?: (nodeId: string) => void;
-    /** Override row content; default: render DeploymentDashboardCard from node data */
-    renderCard?: (node: DeploymentTreeNode) => React__default.ReactNode;
-}
-declare const DeploymentDashboardTree: React__default.FC<DeploymentDashboardTreeProps>;
-
-/**
- * Backdrop/background panel for the deployment list (Figma 15-1325).
- * Wraps the deployment tree or list in a rounded, light surface with a subtle border
- * so the list has a clear visual container.
- */
-interface DeploymentDashboardPanelProps {
-    /** Content (e.g. DeploymentDashboardTree or a list of DeploymentDashboardCards) */
-    children: React__default.ReactNode;
-    /** Optional className */
-    className?: string;
-    /** Optional padding override; default uses theme spacing */
-    padding?: number | string;
-}
-declare const DeploymentDashboardPanel: React__default.FC<DeploymentDashboardPanelProps>;
-
-/** All supported workflow node types */
-type WorkflowNodeType = 'start' | 'input' | 'stream' | 'rafts' | 'cubbies' | 'events' | 'trigger' | 'action' | 'aiModel' | 'aiAgent' | 'condition' | 'output' | 'end' | 'parallel' | 'merge';
-interface WorkflowNodeProps extends Omit<PaperProps$1, 'title'> {
-    /** The workflow node type — drives accent color, default icon, and badge label */
-    nodeType: WorkflowNodeType;
-    /** Primary title displayed in the node */
-    title: string;
-    /** Optional description text below the title */
-    description?: string;
-    /** Override the default icon for this node type */
-    icon?: React__default.ReactNode;
-    /** Override the default badge label for this node type */
-    badgeLabel?: string;
-    /** Whether the node is currently selected (highlights border with accent color) */
-    selected?: boolean;
-    /** Optional className */
-    className?: string;
-    /** Renders left/right connector dots to match the design spec */
-    showSideDots?: boolean;
-}
-/** Human-readable labels for each node type (matches Figma badge text) */
-declare const WORKFLOW_NODE_LABELS: Record<WorkflowNodeType, string>;
-/** Shared elevation shadow for workflow node cards and connector handles (Figma 277-8244) */
-declare const WORKFLOW_NODE_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1)";
-/**
- * WorkflowNode — visual card for a workflow editor node.
- *
- * Renders a card with a colored left border strip, title, optional description,
- * and a type badge/chip. Designed to integrate with FlowEditor (ReactFlow)
- * via the WorkflowNodeHandle wrapper.
- *
- * @example
- * ```tsx
- * <WorkflowNode
- *   nodeType="trigger"
- *   title="HTTP Trigger"
- *   description="Listens for incoming webhook calls"
- * />
- * ```
- */
-declare const WorkflowNode: React__default.FC<WorkflowNodeProps>;
-
-interface WorkflowTopBarProps extends Omit<BoxProps$1, 'title'> {
-    /** Heading shown at the left side of the bar. */
-    title?: string;
-    /** Job identifier displayed in the Job ID field. */
-    executionId: string;
-    /** Label shown above the job ID input. Defaults to "Job ID". */
-    executionIdLabel?: string;
-    /** Called when the job ID value changes. */
-    onExecutionIdChange?: (value: string) => void;
-    /** Called when the job ID clear action is pressed. */
-    onClearExecutionId?: () => void;
-    /** Submit button label. */
-    submitLabel?: string;
-    /** Called when submit is pressed. */
-    onSubmit?: () => void;
-    /** Inspector toggle button label. */
-    inspectorLabel?: string;
-    /** Called when inspector toggle is pressed. */
-    onInspectorToggle?: () => void;
-    /** Called when close is pressed. */
-    onClose?: () => void;
-    /** Hides/shows the inspector toggle button. */
-    showInspectorToggle?: boolean;
-    /** Hides/shows the close icon action. */
-    showCloseButton?: boolean;
-}
-/**
- * WorkflowTopBar
- *
- * Top chrome bar for workflow canvas screens based on Figma 277:8006.
- */
-declare const WorkflowTopBar: React__default.FC<WorkflowTopBarProps>;
-
-interface WorkflowSideInspectorProps extends PaperProps$1 {
-    /** Controls panel visibility for simple layouts. */
-    open?: boolean;
-    /** Header title. */
-    title?: string;
-    /** Selected node headline. */
-    nodeTitle?: string;
-    /** Selected node description. */
-    nodeDescription?: string;
-    /** Selected node type for the colored tag. */
-    nodeType?: WorkflowNodeType;
-    /** Input field value shown in details section. */
-    inputValue?: string;
-    /** Output field value shown in details section. */
-    outputValue?: string;
-    /** Cubby ID value shown in copy button. */
-    cubbyId?: string;
-    /** Timestamp value shown in metadata section. */
-    timestamp?: string;
-    /** Duration value shown in metadata section. */
-    duration?: string;
-    /** Whether to show the Input field in the details section. Defaults to true. */
-    showInput?: boolean;
-    /** Whether to show the Output field in the details section. Defaults to true. */
-    showOutput?: boolean;
-    /** Whether to show the Timestamp field in the metadata section. Defaults to true. */
-    showTimestamp?: boolean;
-    /** Whether to show the Duration field in the metadata section. Defaults to true. */
-    showDuration?: boolean;
-    /** Bottom CTA label. Set to `undefined` or `null` to hide the button. */
-    actionLabel?: string | null;
-    /** Called when close button is pressed. */
-    onClose?: () => void;
-    /** Called when cubby copy button is pressed. */
-    onCopyCubbyId?: () => void;
-    /** Called when bottom CTA is pressed. */
-    onAction?: () => void;
-}
-/**
- * WorkflowSideInspector
- *
- * Right-side inspector panel based on Figma 277:8100.
- */
-declare const WorkflowSideInspector: React__default.FC<WorkflowSideInspectorProps>;
-
-interface WorkflowTimeBarProps extends BoxProps$1 {
-    /** Elapsed time label shown above the progress line. */
-    elapsedTime?: string;
-    /** Progress from 0 to 100. */
-    progress?: number;
-    /** Current step index for the step indicator. */
-    currentStep?: number;
-    /** Total number of steps for the step indicator. */
-    totalSteps?: number;
-    /** Available speed options (e.g. 0.5x, 1x, 2x). */
-    speedOptions?: number[];
-    /** Currently selected speed value. */
-    selectedSpeed?: number;
-    /** Called when stop is pressed. */
-    onStop?: () => void;
-    /** Called when previous step is pressed. */
-    onPreviousStep?: () => void;
-    /** Called when next step is pressed. */
-    onNextStep?: () => void;
-    /** Called when a speed option is selected. */
-    onSpeedChange?: (speed: number) => void;
-    /** Called when refresh is pressed. */
-    onReset?: () => void;
-}
-/**
- * WorkflowTimeBar
- *
- * Bottom chrome bar for workflow playback controls based on Figma 277:8087.
- */
-declare const WorkflowTimeBar: React__default.FC<WorkflowTimeBarProps>;
-
-declare const ActivityAppIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const LeftArrowIcon: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const RightArrowIcon: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const AvatarIcon: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const BarTrackingIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const CereIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const ClockIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const CloudFlashIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const DecentralizedServerIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const DiscordIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const DownloadIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const FilledFolderIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const FolderIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const GithubLogoIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const ShareIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const StorageAppIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const UploadFileIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-declare const UploadFolderIcon: React$1.MemoExoticComponent<(props: SvgIconProps) => react_jsx_runtime.JSX.Element>;
-
-type MarkdownProps = {
-    children?: string;
-    content?: string;
-};
-declare const Markdown: ({ content, children }: MarkdownProps) => react_jsx_runtime.JSX.Element;
-
-interface OnboardingContextType {
-    isOnboardingActive: boolean;
-    startOnboarding: () => void;
-    stopOnboarding: () => void;
-    restartOnboarding: () => void;
-}
-declare const useOnboarding: () => OnboardingContextType;
-declare const OnboardingProvider: ({ children }: {
-    children: ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-
-type TruncateProps = AriaAttributes & {
-    text: string;
-    maxLength?: number;
-    endingLength?: number;
-    variant?: 'text' | 'email' | 'hex';
-};
-declare const Truncate: ({ text, variant, maxLength, endingLength, ...props }: TruncateProps) => react_jsx_runtime.JSX.Element;
-
-type BytesSizeProps = {
-    bytes: number;
-};
-declare const BytesSize: ({ bytes }: BytesSizeProps) => react_jsx_runtime.JSX.Element;
-
-type QRCodeProps = Omit<QRCodeProps$1, 'ref'>;
-declare const QRCode: React$1.ForwardRefExoticComponent<QRCodeProps & React$1.RefAttributes<SVGElement>>;
-
-type ChartWidgetHistoryRecord = {
-    date: Date;
-    value: number;
-};
-type ChartWidgetProps = {
-    title: string;
-    value?: ReactNode;
-    history?: ChartWidgetHistoryRecord[];
-    formatValue?: (value: number) => string;
-};
-declare const ChartWidget: ({ title, value, history, formatValue, }: ChartWidgetProps) => react_jsx_runtime.JSX.Element;
-
-type MetricsHistoryRecord = {
-    storedBytes: number;
-    transferredBytes: number;
-    puts: number;
-    gets: number;
-    recordTime: Date;
-};
-type MetricsChartProps = {
-    history?: MetricsHistoryRecord[];
-};
-/**
- * TODO: Refactor this component to use shared graphs configuration
- */
-declare const MetricsChart: ({ history }: MetricsChartProps) => react_jsx_runtime.JSX.Element;
-
-type MetricsPeriod = 'hour' | 'day' | 'week' | 'month';
-type PeriodSelectProps = {
-    value?: MetricsPeriod;
-    onChange?: (value: MetricsPeriod) => void;
-};
-declare const PeriodSelect: ({ value, onChange }: PeriodSelectProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * Represents a single time range option in the dropdown.
- */
-interface TimeRangeOption {
-    /** Display label shown in the dropdown (e.g., "1 week") */
-    label: string;
-    /** Value identifier passed to the callback on selection */
-    value: string;
-}
-interface TimeRangeSelectProps {
-    /** Available time range options */
-    options: TimeRangeOption[];
-    /** Currently selected time range value */
-    value?: string;
-    /** Callback invoked when user selects a different time range */
-    onChange?: (value: string) => void;
-}
-/**
- * Configurable time range dropdown selector.
- * Renders a compact select field with the provided time range options.
- *
- * @example
- * ```tsx
- * <TimeRangeSelect
- *   options={[
- *     { label: 'Last hour', value: 'hour' },
- *     { label: '24 hours', value: 'day' },
- *     { label: '1 week', value: 'week' },
- *   ]}
- *   value="week"
- *   onChange={(value) => console.log(value)}
- * />
- * ```
- */
-declare const TimeRangeSelect: ({ options, value, onChange }: TimeRangeSelectProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * Represents a single summary statistic item displayed below the graph.
- */
-interface SummaryItem {
-    /** Descriptive label (e.g., "Total Engagements") */
-    label: string;
-    /** Numeric or string value (e.g., "13.72" or 11372) */
-    value: string | number;
-    /** Optional unit suffix (e.g., "K", "GB", "%") */
-    unit?: string;
-}
-interface SummaryStatsProps {
-    /** Array of summary items to display */
-    items: SummaryItem[];
-}
-/**
- * Renders a horizontal row of summary statistics below the graph.
- * Each item shows a label with its corresponding value and optional unit.
- *
- * Matches the Figma design layout with label in secondary text color
- * and value in bold heading typography.
- *
- * @example
- * ```tsx
- * <SummaryStats
- *   items={[
- *     { label: 'Total Engagements', value: 11372 },
- *     { label: 'Total Consumed', value: '156.91', unit: 'GB' },
- *   ]}
- * />
- * ```
- */
-declare const SummaryStats: ({ items }: SummaryStatsProps) => react_jsx_runtime.JSX.Element | null;
-
-/**
- * A single data point in a time series.
- * Use `null` for the value to represent missing/gap data — the line will break.
- */
-interface DataPoint {
-    /** Timestamp of the observation */
-    timestamp: Date;
-    /** Numeric value, or `null` to indicate a gap in the data */
-    value: number | null;
-}
-/**
- * Represents one line on the graph (a named data series).
- */
-interface DataSeries {
-    /** Unique display name for this series (shown in legend) */
-    name: string;
-    /** CSS color string for the line and legend indicator */
-    color: string;
-    /** Ordered array of data points */
-    data: DataPoint[];
-}
-interface TimeSeriesGraphProps {
-    /** Optional title displayed at the top-left of the graph card */
-    title?: string;
-    /**
-     * Array of data series to render. Each series becomes one line on the graph.
-     * There is no hardcoded limit on the number of series.
-     */
-    series: DataSeries[];
-    /**
-     * Configurable time range options for the dropdown selector.
-     * When omitted, the time range dropdown is not rendered.
-     */
-    timeRangeOptions?: TimeRangeOption[];
-    /** Currently selected time range value (controlled) */
-    selectedTimeRange?: string;
-    /** Callback invoked when the user picks a different time range */
-    onTimeRangeChange?: (value: string) => void;
-    /**
-     * Optional array of summary statistics displayed below the graph.
-     * When omitted or empty, the summary section is hidden.
-     */
-    summaryItems?: SummaryItem[];
-    /**
-     * Whether to show the summary statistics section.
-     * Defaults to `true`. Set to `false` to explicitly hide, even when `summaryItems` are provided.
-     */
-    showSummary?: boolean;
-    /**
-     * Optional header action element rendered to the right of the title
-     * (e.g., a secondary dropdown or filter control).
-     */
-    headerAction?: ReactNode;
-    /**
-     * When `true`, shows a loading overlay (spinner) over the graph area
-     * while the header remains visible and interactive.
-     */
-    loading?: boolean;
-    /**
-     * Override the x-axis date format string (date-fns format tokens).
-     * When omitted, the format is auto-detected from the data's time span:
-     * - <= 24 hours → `'HH:mm'`
-     * - > 24 hours  → `'do MMM'`
-     */
-    xAxisFormat?: string;
-}
-/**
- * A reusable time series graph component that displays one or more data lines
- * over a shared time axis. Supports configurable time range selection,
- * optional summary statistics, interactive legend toggling, crosshair tooltips,
- * and a loading state.
- *
- * Built on `@mui/x-charts` LineChart and the Cere Design System theme.
- *
- * @example
- * ```tsx
- * <TimeSeriesGraph
- *   title="Engagement over time"
- *   series={[
- *     { name: 'Engagements', color: '#6750A4', data: engagementData },
- *     { name: 'Unique Streams', color: '#4caf50', data: streamData },
- *   ]}
- *   timeRangeOptions={[
- *     { label: 'Last hour', value: 'hour' },
- *     { label: '24 hours', value: 'day' },
- *     { label: '1 week', value: 'week' },
- *     { label: '1 month', value: 'month' },
- *   ]}
- *   selectedTimeRange="week"
- *   onTimeRangeChange={(range) => fetchData(range)}
- *   summaryItems={[
- *     { label: 'Total Engagements', value: 11372 },
- *     { label: 'Daily Engagements', value: 156 },
- *   ]}
- * />
- * ```
- *
- * Figma reference: [ROB Design - Node 162:1172](https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=162-1172&m=dev)
- */
-declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, xAxisFormat, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
-
-interface FlowEditorProps extends Omit<ReactFlowProps, 'nodes' | 'edges'> {
-    /**
-     * Nodes to display in the flow
-     */
-    nodes: Node[];
-    /**
-     * Edges to display in the flow
-     */
-    edges: Edge[];
-    /**
-     * Callback when nodes change
-     */
-    onNodesChange?: OnNodesChange;
-    /**
-     * Callback when edges change
-     */
-    onEdgesChange?: OnEdgesChange;
-    /**
-     * Custom node types
-     */
-    nodeTypes?: NodeTypes;
-    /**
-     * Custom edge types
-     */
-    edgeTypes?: EdgeTypes;
-    /**
-     * Height of the flow editor
-     * @default '600px'
-     */
-    height?: string | number;
-    /**
-     * Show background grid
-     * @default true
-     */
-    showBackground?: boolean;
-    /**
-     * Background variant
-     * @default 'dots'
-     */
-    backgroundVariant?: BackgroundVariant;
-    /**
-     * Show controls
-     * @default true
-     */
-    showControls?: boolean;
-    /**
-     * Show minimap
-     * @default false
-     */
-    showMinimap?: boolean;
-    /**
-     * Allow nodes to be dragged by the user
-     * @default true
-     */
-    nodesDraggable?: boolean;
-    /**
-     * Show border around the container
-     * @default true
-     */
-    showBorder?: boolean;
-    /**
-     * Border radius of the container in theme spacing units (e.g. 1 = 8px, 2 = 16px)
-     * @default 1
-     */
-    borderRadius?: number;
-    /**
-     * Container props
-     */
-    containerProps?: BoxProps;
-    /**
-     * Props passed directly to the ReactFlow MiniMap component, allowing full customization
-     * of colors, mask, style, and any other MiniMap option. Consumer values override defaults.
-     */
-    minimapProps?: Partial<MiniMapProps>;
-    /**
-     * Callback when flow instance is initialized
-     */
-    onInit?: (instance: ReactFlowInstance) => void;
-}
-/**
- * FlowEditor component - wrapper around ReactFlow with theme integration
- *
- * @example
- * ```tsx
- * <FlowEditor
- *   nodes={nodes}
- *   edges={edges}
- *   onNodesChange={onNodesChange}
- *   onEdgesChange={onEdgesChange}
- *   height="500px"
- *   showBackground
- *   showControls
- * />
- * ```
- */
-declare const FlowEditor: React__default.FC<FlowEditorProps>;
-
-type CodeEditorLanguage = 'typescript' | 'javascript' | 'json' | 'html' | 'css' | 'python' | 'yaml' | 'markdown' | 'sql' | 'xml' | 'plaintext';
-interface CodeEditorProps {
-    /**
-     * Current value of the editor
-     */
-    value: string;
-    /**
-     * Callback when value changes
-     */
-    onChange: (value: string) => void;
-    /**
-     * Programming language
-     * @default 'typescript'
-     */
-    language?: CodeEditorLanguage;
-    /**
-     * Height of the editor
-     * @default '400px'
-     */
-    height?: string | number;
-    /**
-     * Minimum height
-     */
-    minHeight?: string | number;
-    /**
-     * Theme ('light' | 'dark' | 'vs-dark' | 'hc-black')
-     * If not provided, will use theme from design system
-     */
-    theme?: string;
-    /**
-     * Show line numbers
-     * @default 'on'
-     */
-    lineNumbers?: 'on' | 'off' | 'relative' | 'interval';
-    /**
-     * Editor options (monaco editor options)
-     */
-    options?: editor.IStandaloneEditorConstructionOptions;
-    /**
-     * Callback when editor is mounted
-     */
-    onMount?: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
-    /**
-     * Callback for validation errors
-     */
-    onValidate?: (markers: editor.IMarker[]) => void;
-    /**
-     * Ref to editor instance
-     */
-    editorRef?: React__default.MutableRefObject<editor.IStandaloneCodeEditor | null>;
-    /**
-     * Ref to Monaco instance
-     */
-    monacoRef?: React__default.MutableRefObject<Monaco | null>;
-    /**
-     * Callback when fullscreen state changes
-     */
-    onFullscreenChange?: (isFullscreen: boolean) => void;
-    /**
-     * Props for the container Box.
-     */
-    containerProps?: BoxProps;
-    /**
-     * Additional TypeScript type definitions to add to the editor context.
-     * Can be a string with type definitions or an array of type definition strings.
-     * Each string will be added as a separate extra lib to Monaco.
-     *
-     * @example
-     * ```tsx
-     * <CodeEditor
-     *   value={code}
-     *   onChange={setCode}
-     *   typeDefinitions={`
-     *     declare interface MyCustomType {
-     *       id: string;
-     *       name: string;
-     *     }
-     *   `}
-     * />
-     * ```
-     */
-    typeDefinitions?: string | string[];
-    /**
-     * When true, the editor skips internal value syncing and lets an external
-     * source (e.g. useCodeEditorWorkspace) manage Monaco models directly.
-     * The `value` prop is still used as the initial/display value but won't
-     * be force-synced to the editor.
-     * @default false
-     */
-    externalModelManagement?: boolean;
-}
-/**
- * CodeEditor component - wrapper around Monaco Editor matching dynamic-indexer-client implementation
- *
- * @example
- * ```tsx
- * <CodeEditor
- *   value={code}
- *   onChange={setCode}
- *   language="typescript"
- *   height="500px"
- *   onValidate={(markers) => console.log('Errors:', markers)}
- * />
- * ```
- */
-declare const CodeEditor: React__default.FC<CodeEditorProps>;
-
-/** Data shape expected by the WorkflowNodeHandle custom ReactFlow node */
-interface WorkflowNodeData {
-    /** Workflow node type — drives accent color, icon, and badge */
-    nodeType: WorkflowNodeType;
-    /** Primary title */
-    title: string;
-    /** Optional description */
-    description?: string;
-    /** Override default icon */
-    icon?: React__default.ReactNode;
-    /** Override default badge label */
-    badgeLabel?: string;
-}
-/**
- * Thin ReactFlow custom-node wrapper around WorkflowNode.
- *
- * Renders a target Handle (top), the WorkflowNode card, and a source Handle (bottom).
- * Register as a custom nodeType:
- *
- * @example
- * ```tsx
- * const nodeTypes = { workflowNode: WorkflowNodeHandle };
- * <FlowEditor nodes={nodes} edges={edges} nodeTypes={nodeTypes} />
- * ```
- */
-declare const WorkflowNodeHandle: React__default.FC<NodeProps<WorkflowNodeData>>;
-
-/**
- * Represents a single file in the workspace.
- */
-interface CodeEditorFile {
-    /** Unique file path, e.g. "src/index.ts" */
-    path: string;
-    /** Programming language (auto-detected from extension when omitted) */
-    language?: CodeEditorLanguage;
-    /** File content */
-    value: string;
-}
-/**
- * Represents an open tab in the editor.
- */
-interface CodeEditorTab {
-    /** File path this tab corresponds to */
-    path: string;
-    /** Display label (defaults to the filename portion of path) */
-    label?: string;
-    /** Whether the file has unsaved changes */
-    isDirty?: boolean;
-    /** Git sync status — distinct from isDirty (editor changes) */
-    syncStatus?: 'new' | 'modified';
-}
-/** Git sync status for a file tree node. */
-type FileTreeNodeStatus = 'new' | 'modified' | 'deleted';
-/**
- * A node in the file tree.
- */
-interface FileTreeNode {
-    /** Display name */
-    name: string;
-    /** Full path (unique identifier) */
-    path: string;
-    /** Whether this is a file or folder */
-    type: 'file' | 'folder';
-    /** Children nodes (only for folders) */
-    children?: FileTreeNode[];
-    /** Optional custom icon */
-    icon?: ReactNode;
-    /** Git sync status indicator (new / modified / deleted) */
-    status?: FileTreeNodeStatus;
-}
-/**
- * Git repository information passed into the workspace.
- * The consuming app is responsible for fetching this data.
- */
-interface GitInfo {
-    /** Current branch name, e.g. "feat/advanced-code-editor" */
-    branch: string;
-    /** Whether the working tree has uncommitted changes */
-    isDirty?: boolean;
-    /** Short commit hash of HEAD */
-    commitHash?: string;
-    /** Remote name, e.g. "origin" */
-    remote?: string;
-    /** Number of commits ahead of remote */
-    ahead?: number;
-    /** Number of commits behind remote */
-    behind?: number;
-}
-/**
- * A custom item to render in the status bar.
- */
-interface CodeEditorStatusBarItem {
-    /** Unique key */
-    id: string;
-    /** Content to display (string or ReactNode) */
-    content: ReactNode;
-    /** Side of the status bar */
-    align?: 'left' | 'right';
-    /** Optional click handler */
-    onClick?: () => void;
-    /** Tooltip text */
-    tooltip?: string;
-}
-/**
- * Map from file extension to CodeEditorLanguage.
- */
-declare const EXTENSION_LANGUAGE_MAP: Record<string, CodeEditorLanguage>;
-/**
- * Detect language from a file path extension.
- */
-declare function detectLanguage(path: string): CodeEditorLanguage;
-/**
- * Extract the filename from a path.
- */
-declare function getFileName(path: string): string;
-
-interface UseCodeEditorWorkspaceOptions {
-    /** All files available in the workspace */
-    files: CodeEditorFile[];
-    /** File paths to open as tabs initially */
-    initialOpenPaths?: string[];
-    /** Called when a file's content is modified in the editor */
-    onFileChange?: (path: string, value: string) => void;
-    /** Called when validation markers change across all open models */
-    onValidationChange?: (markers: Record<string, editor.IMarker[]>) => void;
-}
-interface UseCodeEditorWorkspaceReturn {
-    /** Currently open tabs */
-    openTabs: CodeEditorTab[];
-    /** Path of the active file (shown in editor) */
-    activeFilePath: string | null;
-    /** Open a file by path (creates tab if not already open, sets it active) */
-    openFile: (path: string) => void;
-    /** Close a tab by path */
-    closeFile: (path: string) => void;
-    /** Set a specific file as active */
-    setActiveFile: (path: string) => void;
-    /** Programmatically update file content */
-    updateFileContent: (path: string, value: string) => void;
-    /** Get the current content of a file */
-    getFileContent: (path: string) => string | undefined;
-    /** Get the active file data */
-    activeFile: CodeEditorFile | undefined;
-    /** Ref to hold the Monaco instance — pass to CodeEditor's monacoRef */
-    monacoRef: React.MutableRefObject<Monaco | null>;
-    /** Ref to hold the editor instance — pass to CodeEditor's editorRef */
-    editorRef: React.MutableRefObject<editor.IStandaloneCodeEditor | null>;
-    /** Handler to pass to CodeEditor's onMount */
-    handleEditorMount: (editorInstance: editor.IStandaloneCodeEditor, monacoInstance: Monaco) => void;
-    /** Handler to pass to CodeEditor's onChange */
-    handleEditorChange: (value: string) => void;
-    /** Aggregated validation markers keyed by file path */
-    validationMarkers: Record<string, editor.IMarker[]>;
-    /** Mark a file as saved (clears dirty flag) */
-    markSaved: (path: string) => void;
-    /** Mark all files as saved */
-    markAllSaved: () => void;
-    /** Current cursor position in the active editor */
-    cursorPosition: {
-        line: number;
-        column: number;
-    } | null;
-}
-/**
- * Headless hook for managing a multi-file Monaco editor workspace.
- *
- * Manages Monaco models, open tabs, active file, and dirty tracking.
- * Pass the returned refs/handlers to a `CodeEditor` component.
- *
- * @example
- * ```tsx
- * const workspace = useCodeEditorWorkspace({ files, onFileChange });
- *
- * <CodeEditorTabs
- *   tabs={workspace.openTabs}
- *   activeTab={workspace.activeFilePath}
- *   onTabSelect={workspace.setActiveFile}
- *   onTabClose={workspace.closeFile}
- * />
- * <CodeEditor
- *   value={workspace.activeFile?.value ?? ''}
- *   onChange={workspace.handleEditorChange}
- *   language={workspace.activeFile?.language}
- *   editorRef={workspace.editorRef}
- *   monacoRef={workspace.monacoRef}
- *   onMount={workspace.handleEditorMount}
- * />
- * ```
- */
-declare function useCodeEditorWorkspace({ files, initialOpenPaths, onFileChange, onValidationChange, }: UseCodeEditorWorkspaceOptions): UseCodeEditorWorkspaceReturn;
-
-interface CodeEditorTabRenderProps {
-    tab: CodeEditorTab;
-    isActive: boolean;
-    onSelect: () => void;
-    onClose: () => void;
-}
-interface CodeEditorTabsProps {
-    /** Open tabs to display */
-    tabs: CodeEditorTab[];
-    /** Path of the currently active tab */
-    activeTab?: string | null;
-    /** Called when a tab is selected */
-    onTabSelect?: (path: string) => void;
-    /** Called when a tab's close button is clicked */
-    onTabClose?: (path: string) => void;
-    /**
-     * Render prop for full tab customisation.
-     * When provided, default tab rendering is skipped entirely.
-     */
-    renderTab?: (props: CodeEditorTabRenderProps) => React__default.ReactNode;
-    /** Props for the outer container */
-    containerProps?: BoxProps;
-}
-/**
- * Tab bar for the CodeEditor workspace.
- *
- * Provides default MUI-based rendering, but consumers can fully replace it
- * via the `renderTab` render prop.
- *
- * @example
- * ```tsx
- * <CodeEditorTabs
- *   tabs={workspace.openTabs}
- *   activeTab={workspace.activeFilePath}
- *   onTabSelect={workspace.setActiveFile}
- *   onTabClose={workspace.closeFile}
- * />
- * ```
- */
-declare const CodeEditorTabs: React__default.FC<CodeEditorTabsProps>;
-
-interface FileTreeNodeRenderProps {
-    node: FileTreeNode;
-    depth: number;
-    isSelected: boolean;
-    isExpanded: boolean;
-    onSelect: () => void;
-    onToggle: () => void;
-}
-interface CodeEditorFileTreeProps {
-    /** Tree data to render */
-    tree: FileTreeNode[];
-    /** Currently selected file path */
-    selectedPath?: string | null;
-    /** Called when a file node is clicked */
-    onFileSelect?: (path: string) => void;
-    /** Called when a folder is expanded/collapsed */
-    onFolderToggle?: (path: string, isExpanded: boolean) => void;
-    /**
-     * Render prop for full node customisation.
-     * When provided, default rendering is skipped.
-     */
-    renderNode?: (props: FileTreeNodeRenderProps) => React__default.ReactNode;
-    /** Paths of folders that should be expanded initially */
-    defaultExpandedPaths?: string[];
-    /** Width of the file tree panel */
-    width?: string | number;
-    /** Props for the outer container */
-    containerProps?: BoxProps;
-}
-/**
- * File tree navigator for the CodeEditor workspace.
- *
- * Provides default MUI-based rendering with collapsible folders.
- * Consumers can fully replace rendering via `renderNode`.
- *
- * @example
- * ```tsx
- * <CodeEditorFileTree
- *   tree={fileTree}
- *   selectedPath={workspace.activeFilePath}
- *   onFileSelect={workspace.openFile}
- * />
- * ```
- */
-declare const CodeEditorFileTree: React__default.FC<CodeEditorFileTreeProps>;
-
-interface CodeEditorStatusBarRenderProps {
-    gitInfo?: GitInfo;
-    language?: CodeEditorLanguage;
-    cursorPosition?: {
-        line: number;
-        column: number;
-    };
-    items?: CodeEditorStatusBarItem[];
-}
-interface CodeEditorStatusBarProps {
-    /** Git repository information */
-    gitInfo?: GitInfo;
-    /** Language of the active file */
-    language?: CodeEditorLanguage;
-    /** Current cursor position */
-    cursorPosition?: {
-        line: number;
-        column: number;
-    };
-    /** Additional custom items */
-    items?: CodeEditorStatusBarItem[];
-    /**
-     * Render prop for full status bar customisation.
-     * When provided, default rendering is skipped entirely.
-     */
-    renderStatusBar?: (props: CodeEditorStatusBarRenderProps) => React__default.ReactNode;
-    /** Called when the user clicks the branch name in the status bar */
-    onBranchClick?: () => void;
-    /** Props for the outer container */
-    containerProps?: BoxProps;
-}
-/**
- * Status bar for the CodeEditor workspace.
- *
- * Displays git branch info, cursor position, file language, and custom items.
- * Fully replaceable via `renderStatusBar` render prop.
- *
- * @example
- * ```tsx
- * <CodeEditorStatusBar
- *   gitInfo={{ branch: 'main', isDirty: true, commitHash: 'a1b2c3d' }}
- *   language="typescript"
- *   cursorPosition={{ line: 10, column: 5 }}
- * />
- * ```
- */
-declare const CodeEditorStatusBar: React__default.FC<CodeEditorStatusBarProps>;
-
-interface CodeEditorWelcomeScreenProps {
-    /** Custom logo or icon displayed in the center. Defaults to the Cere logo. */
-    logo?: React__default.ReactNode;
-    /**
-     * Content rendered below the logo. Accepts any ReactNode —
-     * shortcut hints, action buttons, descriptive text, etc.
-     */
-    children?: React__default.ReactNode;
-    /** Props forwarded to the outer container `Box`. */
-    containerProps?: BoxProps;
-}
-/**
- * Default empty-state screen shown inside `CodeEditorWorkspace` when no file
- * is open.  Renders a centered logo with an optional content slot underneath.
- *
- * @example
- * ```tsx
- * <CodeEditorWelcomeScreen>
- *   <Typography variant="body2" color="text.secondary">
- *     Open a file from the tree to start editing
- *   </Typography>
- * </CodeEditorWelcomeScreen>
- * ```
- */
-declare const CodeEditorWelcomeScreen: React__default.FC<CodeEditorWelcomeScreenProps>;
-
-interface CodeEditorWorkspaceProps extends Pick<UseCodeEditorWorkspaceOptions, 'files' | 'initialOpenPaths' | 'onFileChange' | 'onValidationChange'> {
-    /** File tree data. When omitted the file tree panel is hidden. */
-    fileTree?: FileTreeNode[];
-    /** Paths of folders expanded by default in the file tree */
-    defaultExpandedPaths?: string[];
-    /** Whether to show the tab bar. @default true */
-    showTabs?: boolean;
-    /** Whether to show the file tree panel. @default true (when fileTree is provided) */
-    showFileTree?: boolean;
-    /** Width of the file tree panel */
-    fileTreeWidth?: string | number;
-    /** Overall height of the workspace */
-    height?: string | number;
-    /** Props passed through to the inner CodeEditor */
-    editorProps?: Partial<Omit<CodeEditorProps, 'value' | 'onChange' | 'language' | 'editorRef' | 'monacoRef' | 'onMount'>>;
-    /** Props for the outer container */
-    containerProps?: BoxProps;
-    /** Replace the default tab bar rendering */
-    renderTabs?: (props: CodeEditorTabsProps & {
-        workspace: UseCodeEditorWorkspaceReturn;
-    }) => React__default.ReactNode;
-    /** Replace the default file tree rendering */
-    renderFileTree?: (props: CodeEditorFileTreeProps & {
-        workspace: UseCodeEditorWorkspaceReturn;
-    }) => React__default.ReactNode;
-    /** Replace the default editor rendering */
-    renderEditor?: (workspace: UseCodeEditorWorkspaceReturn) => React__default.ReactNode;
-    /** Replace the default status bar rendering */
-    renderStatusBar?: (props: CodeEditorStatusBarProps & {
-        workspace: UseCodeEditorWorkspaceReturn;
-    }) => React__default.ReactNode;
-    /** Replace the default welcome screen rendering (shown when no file is open) */
-    renderWelcomeScreen?: (workspace: UseCodeEditorWorkspaceReturn) => React__default.ReactNode;
-    /** Static ReactNode that replaces the default welcome screen entirely */
-    welcomeScreen?: React__default.ReactNode;
-    /** Props forwarded to the default `CodeEditorWelcomeScreen` (ignored when `welcomeScreen` or `renderWelcomeScreen` is provided) */
-    welcomeScreenProps?: CodeEditorWelcomeScreenProps;
-    /** Git repository information to display in the status bar */
-    gitInfo?: GitInfo;
-    /** Whether to show the status bar. @default true */
-    showStatusBar?: boolean;
-    /** Additional custom items for the status bar */
-    statusBarItems?: CodeEditorStatusBarItem[];
-    /** Expose the workspace instance to the parent via ref-like callback */
-    onWorkspaceReady?: (workspace: UseCodeEditorWorkspaceReturn) => void;
-    /** Called when the user presses Ctrl+S / Cmd+S. Receives all dirty files. */
-    onSave?: (dirtyFiles: CodeEditorFile[]) => void;
-    /** Called when the user clicks the branch name in the status bar */
-    onBranchClick?: () => void;
-}
-/**
- * Convenience composed workspace that combines `CodeEditorFileTree`,
- * `CodeEditorTabs`, and `CodeEditor` into a single layout.
- *
- * For full control, use `useCodeEditorWorkspace` directly and assemble
- * the pieces yourself.
- *
- * @example
- * ```tsx
- * <CodeEditorWorkspace
- *   files={files}
- *   fileTree={tree}
- *   initialOpenPaths={['src/index.ts']}
- *   height="600px"
- *   gitInfo={{ branch: 'main', isDirty: true, commitHash: 'a1b2c3d' }}
- *   onFileChange={(path, value) => console.log(path, value)}
- * />
- * ```
+ * Render the gap between two ISO-8601 timestamps. Returns `'—'` when
+ * either bound is missing, unparseable, or inverted.
  */
-declare const CodeEditorWorkspace: React__default.FC<CodeEditorWorkspaceProps>;
+declare function formatDuration(startIso: string | undefined | null, endIso: string | undefined | null): string;
 
-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, type ButtonTone, type ButtonVariant, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, CardMedia, type CardMediaProps, type CardProps, type CardVariant, Carousel, type CarouselProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipTone, 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, CopyableField, type CopyableFieldProps, 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, GRADIENT_PALETTE_COUNT, type GitInfo, GithubLogoIcon, GradientSurface, type GradientSurfaceProps, 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, NumberedStepper, type NumberedStepperProps, type NumberedStepperStep, 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, SectionRow, type SectionRowProps, 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, SplitDialogContent, type SplitDialogContentProps, 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, type WebSurfaceTokenKey, WorkflowNode, type WorkflowNodeData, WorkflowNodeHandle, type WorkflowNodeProps, type WorkflowNodeType, WorkflowSideInspector, type WorkflowSideInspectorProps, WorkflowTimeBar, type WorkflowTimeBarProps, WorkflowTopBar, type WorkflowTopBarProps, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, borderRadius, colors, contextMenuItems, detectLanguage, getChipVariantStyles, getFileName, motion, resolveDrawerWidth, robPaletteExtended, robPrimaryPalette, theme, useCodeEditorWorkspace, useIsDesktop, useIsMobile, useIsTablet, useOnboarding, useSearchHotkeys, webSurfaceTokens, workflowConnectionColors, workflowNodeColors };
+export { CheckMarkAnimation, LoadingAnimation, type LoadingAnimationProps, type SurfaceVariant, type WebLightVariant, type WebSurfaceTokenKey, borderRadius, colors, formatDuration, formatRelativeTime, motion, robPaletteExtended, robPrimaryPalette, surfaceVariants, theme, useIsDesktop, useIsMobile, useIsTablet, webLight, webSurfaceTokens, workflowConnectionColors, workflowNodeColors };