@cere/cere-design-system 0.0.44 → 0.1.0

package/dist/layout.d.mts

@@ -0,0 +1,927 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { 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 } from '@mui/material';
+export { Box, BoxProps, Container, ContainerProps, Grid2 as Grid, Grid2Props as GridProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
+import { DrawerProps as DrawerProps$1 } from '@mui/material/Drawer';
+import { Theme, SxProps } from '@mui/material/styles';
+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 { d as WorkflowNodeType } from './WorkflowNode-BnxXO6t_.mjs';
+export { W as WORKFLOW_NODE_LABELS, a as WORKFLOW_NODE_SHADOW, b as WorkflowNode, c as WorkflowNodeProps } from './WorkflowNode-BnxXO6t_.mjs';
+import { BoxProps as BoxProps$1 } from '@mui/material/Box';
+
+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 KpiTone = 'violet' | 'blue' | 'green' | 'orange' | 'pink' | 'neutral';
+interface KpiCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Optional leading glyph rendered before the label row. */
+    icon?: React.ReactNode;
+    /** Short caption rendered in the eyebrow style above the value. */
+    label: string;
+    /** The headline KPI value. Can be a string, number, or composed node. */
+    value: React.ReactNode;
+    /** Optional sub line rendered under the value. */
+    sub?: string;
+    /**
+     * Accent color applied to the left stripe.
+     * @default 'neutral'
+     */
+    tone?: KpiTone;
+}
+/**
+ * KpiCard — a single metric tile for dashboards.
+ *
+ * Lays out an optional icon + uppercase label on top, a large value beneath,
+ * and an optional sub line. A vertical stripe on the left uses `tone` for the
+ * accent color. All typography pulls from the DS-augmented variants.
+ *
+ * Lives in `layout/` per the constitution: KpiCard is a data-display tile,
+ * not a feedback signal.
+ */
+declare const KpiCard: React.ForwardRefExoticComponent<KpiCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface AgentAvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Stable string keyed to the agent identity; same seed always picks the same palette. */
+    seed: string;
+    /** Used as the source of the initial glyph (first letter, upper-cased). */
+    name: string;
+    /** Pixel size. Accepts the three preset sizes or any number. @default 40 */
+    size?: 32 | 40 | 56 | number;
+    /** Adds an outer drop shadow for use over plain surfaces. */
+    shadow?: boolean;
+    /** When set, renders an `<img>` in place of the initial. */
+    iconUrl?: string;
+    /** Optional override for the accessible label; defaults to `name`. */
+    ariaLabel?: string;
+}
+/**
+ * Brand-coloured avatar tile that auto-derives a palette shade from `seed`.
+ *
+ * Renders the first letter of `name` by default; if `iconUrl` is provided,
+ * renders the image full-bleed instead. White glyph; optional outer
+ * shadow pulled from the MUI theme elevation scale.
+ */
+declare const AgentAvatar: React.ForwardRefExoticComponent<AgentAvatarProps & React.RefAttributes<HTMLDivElement>>;
+
+type NumberedListTone = 'violet' | 'blue' | 'green' | 'orange' | 'pink' | 'neutral';
+interface NumberedListItem {
+    /** Row title rendered next to the badge. */
+    title: string;
+    /** Optional secondary line under the title. */
+    detail?: React.ReactNode;
+    /** Optional trailing action (button, link, chip) aligned to the right. */
+    cta?: React.ReactNode;
+}
+interface NumberedListProps extends Omit<React.OlHTMLAttributes<HTMLOListElement>, 'children'> {
+    /** Rows to render in order. */
+    items: NumberedListItem[];
+    /** Accent color for the numbered badges. @default 'violet' */
+    tone?: NumberedListTone;
+    /** First badge number. @default 1 */
+    startAt?: number;
+}
+/**
+ * NumberedList — ordered list with numbered tinted badges.
+ *
+ * Use for onboarding checklists, sequence walkthroughs, and other ordered
+ * step lists. Badges pull their tint from the design system palette via
+ * `tone`. `startAt` lets you chain lists across pages without resetting.
+ */
+declare const NumberedList: React.ForwardRefExoticComponent<NumberedListProps & React.RefAttributes<HTMLOListElement>>;
+
+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.ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+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.ForwardRefExoticComponent<MetaFieldProps & React__default.RefAttributes<HTMLDivElement>>;
+
+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 const SectionRow: React__default.ForwardRefExoticComponent<SectionRowProps & React__default.RefAttributes<HTMLElement>>;
+
+/** 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 const GradientSurface: React__default.ForwardRefExoticComponent<GradientSurfaceProps & React__default.RefAttributes<HTMLDivElement>>;
+
+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 const DefinitionRow: React__default.ForwardRefExoticComponent<DefinitionRowProps & React__default.RefAttributes<HTMLDivElement>>;
+
+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.ForwardRefExoticComponent<SplitDialogContentProps & React__default.RefAttributes<HTMLDivElement>>;
+
+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.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React__default.RefAttributes<HTMLElement>>;
+declare const CardContent: React__default.ForwardRefExoticComponent<Omit<CardContentProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React__default.FC<CardHeaderProps>;
+declare const CardActions: React__default.FC<CardActionsProps>;
+
+type ListProps = ListProps$1;
+declare const List: React__default.ForwardRefExoticComponent<Omit<ListProps, "ref"> & React__default.RefAttributes<HTMLUListElement>>;
+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.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React__default.RefAttributes<HTMLLIElement>>;
+
+interface AvatarProps extends AvatarProps$1 {
+    size?: 'small' | 'medium' | 'large' | number;
+}
+declare const Avatar: React__default.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+interface TableProps extends TableProps$1 {
+    stickyHeader?: boolean;
+}
+declare const Table: React__default.ForwardRefExoticComponent<Omit<TableProps, "ref"> & React__default.RefAttributes<HTMLTableElement>>;
+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.ForwardRefExoticComponent<TableHeaderProps & React__default.RefAttributes<HTMLTableSectionElement>>;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbsProps extends Omit<BreadcrumbsProps$1, 'children'> {
+    items: BreadcrumbItem[];
+}
+declare const Breadcrumbs: React__default.ForwardRefExoticComponent<Omit<BreadcrumbsProps, "ref"> & React__default.RefAttributes<HTMLElement>>;
+
+interface AccordionProps extends Omit<AccordionProps$1, 'children'> {
+    title: string;
+    children: NonNullable<React__default.ReactNode>;
+    defaultExpanded?: boolean;
+}
+declare const Accordion: React__default.ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+interface PaperProps extends PaperProps$1 {
+    variant?: 'elevation' | 'outlined';
+}
+declare const Paper: React__default.ForwardRefExoticComponent<Omit<PaperProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+interface DividerProps extends DividerProps$1 {
+    variant?: 'fullWidth' | 'inset' | 'middle';
+}
+declare const Divider: React__default.ForwardRefExoticComponent<Omit<DividerProps, "ref"> & React__default.RefAttributes<HTMLHRElement>>;
+
+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.ForwardRefExoticComponent<Omit<CollapseProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+/**
+ * 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.ForwardRefExoticComponent<EntityHeaderProps & React__default.RefAttributes<HTMLDivElement>>;
+
+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>;
+
+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>;
+
+export { Accordion, type AccordionProps, AgentAvatar, type AgentAvatarProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Card, CardActions, CardContent, CardHeader, CardMedia, type CardMediaProps, type CardProps, type CardVariant, Collapse, type CollapseProps, type ContextMenuItem, 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, Divider, type DividerProps, Drawer, type DrawerProps, type DrawerWidth, type DrawerWidthValue, EntityHeader, type EntityHeaderProps, GRADIENT_PALETTE_COUNT, GradientSurface, type GradientSurfaceProps, KpiCard, type KpiCardProps, type KpiTone, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Logo, type LogoProps, MetaField, type MetaFieldProps, NumberedList, type NumberedListItem, type NumberedListProps, type NumberedListTone, PanelDialog, type PanelDialogProps, type PanelDialogSide, type PanelDialogWidth, Paper, type PaperProps, type PrimaryAction, type ResponsiveDrawerWidth, ScrollableRow, type ScrollableRowProps, SectionRow, type SectionRowProps, SplitDialogContent, type SplitDialogContentProps, Table, TableHeader, type TableHeaderProps, type TableProps, WorkflowNodeType, WorkflowSideInspector, type WorkflowSideInspectorProps, WorkflowTimeBar, type WorkflowTimeBarProps, WorkflowTopBar, type WorkflowTopBarProps, contextMenuItems, resolveDrawerWidth };