@cere/cere-design-system 0.0.44 → 0.1.0

package/dist/chunk-CUCKULYC.mjs

@@ -0,0 +1,2658 @@
+import {
+  WORKFLOW_NODE_LABELS
+} from "./chunk-27JEWSWA.mjs";
+import {
+  IDBlock,
+  RoleBadge
+} from "./chunk-JS4IB5IU.mjs";
+import {
+  CereIcon
+} from "./chunk-UPGFBPFX.mjs";
+import {
+  Button
+} from "./chunk-FFZ5S7PQ.mjs";
+import {
+  deploymentSurfaceTokens
+} from "./chunk-ATIFLPH6.mjs";
+import {
+  deploymentEntityColors,
+  deploymentStatusColors
+} from "./chunk-PWF2NJDB.mjs";
+
+// src/components/layout/Logo.tsx
+import { Stack, styled, svgIconClasses } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizesMap = {
+  large: 38,
+  medium: 32,
+  small: 24
+};
+var Container = styled(Stack)({
+  [`& .${svgIconClasses.root}`]: {
+    fontSize: "inherit"
+  }
+});
+var Logo = ({ children, size = "medium", icon = /* @__PURE__ */ jsx(CereIcon, { color: "primary" }) }) => /* @__PURE__ */ jsxs(Container, { direction: "row", alignItems: "center", spacing: 2, fontSize: sizesMap[size], children: [
+  icon,
+  children && /* @__PURE__ */ jsx(Stack, { children })
+] });
+
+// src/components/layout/Dialog.tsx
+import {
+  Dialog as MuiDialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button as Button2,
+  IconButton,
+  Box,
+  Typography,
+  Divider,
+  CircularProgress
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Dialog = ({
+  open,
+  title,
+  onClose,
+  onSubmit,
+  submitLabel = "Save",
+  cancelLabel = "Cancel",
+  isLoading = false,
+  disableSubmit = false,
+  showActions = true,
+  headerAction,
+  fullWidth = true,
+  maxWidth = "md",
+  children,
+  dividers = true,
+  confirmBeforeClose = false,
+  customActions,
+  ...dialogProps
+}) => {
+  const handleCloseAttempt = (e) => {
+    if (e) e.stopPropagation();
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs2(
+    MuiDialog,
+    {
+      open,
+      onClose: (_, reason) => {
+        if (confirmBeforeClose) return;
+        if (reason === "backdropClick" || reason === "escapeKeyDown") {
+          onClose();
+        }
+      },
+      fullWidth,
+      maxWidth,
+      ...dialogProps,
+      PaperProps: {
+        sx: { minHeight: dialogProps.fullScreen ? void 0 : "auto" },
+        ...dialogProps.PaperProps
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(DialogTitle, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2 }, children: [
+          /* @__PURE__ */ jsx2(Box, { sx: { display: "flex", alignItems: "center" }, children: typeof title === "string" ? /* @__PURE__ */ jsx2(Typography, { variant: "h6", children: title }) : title }),
+          /* @__PURE__ */ jsxs2(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+            headerAction,
+            /* @__PURE__ */ jsx2(
+              IconButton,
+              {
+                edge: "end",
+                color: "inherit",
+                onClick: handleCloseAttempt,
+                "aria-label": "close",
+                children: /* @__PURE__ */ jsx2(CloseIcon, {})
+              }
+            )
+          ] })
+        ] }),
+        dividers && /* @__PURE__ */ jsx2(Divider, {}),
+        /* @__PURE__ */ jsx2(DialogContent, { dividers, children }),
+        (showActions || customActions) && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          dividers && /* @__PURE__ */ jsx2(Divider, {}),
+          /* @__PURE__ */ jsx2(DialogActions, { children: customActions || /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(
+              Button2,
+              {
+                onClick: handleCloseAttempt,
+                disabled: isLoading,
+                children: cancelLabel
+              }
+            ),
+            onSubmit && /* @__PURE__ */ jsx2(
+              Button2,
+              {
+                variant: "contained",
+                color: "primary",
+                onClick: onSubmit,
+                disabled: disableSubmit || isLoading,
+                startIcon: isLoading ? /* @__PURE__ */ jsx2(CircularProgress, { size: 20 }) : void 0,
+                children: submitLabel
+              }
+            )
+          ] }) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/layout/KpiCard.tsx
+import * as React from "react";
+import Box2 from "@mui/material/Box";
+import Typography2 from "@mui/material/Typography";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var toneColor = (tone, theme) => {
+  switch (tone) {
+    case "violet":
+      return theme.palette.primary.main;
+    case "blue":
+      return theme.palette.info.main;
+    case "green":
+      return theme.palette.success.main;
+    case "orange":
+      return theme.palette.warning.main;
+    case "pink":
+      return theme.palette.secondary?.main ?? theme.palette.primary.main;
+    case "neutral":
+    default:
+      return theme.palette.grey[300];
+  }
+};
+var KpiCard = React.forwardRef(
+  function KpiCard2({ icon, label, value, sub, tone = "neutral", ...rest }, ref) {
+    return /* @__PURE__ */ jsxs3(
+      Box2,
+      {
+        ref,
+        "data-tone": tone,
+        ...rest,
+        sx: (theme) => ({
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5,
+          padding: 2,
+          paddingLeft: 2.5,
+          borderRadius: 1.5,
+          backgroundColor: theme.palette.background.paper,
+          border: `1px solid ${theme.palette.divider}`,
+          overflow: "hidden",
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: 4,
+            backgroundColor: toneColor(tone, theme)
+          }
+        }),
+        children: [
+          /* @__PURE__ */ jsxs3(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+            icon && /* @__PURE__ */ jsx3(Box2, { sx: { display: "inline-flex", color: "text.secondary" }, children: icon }),
+            /* @__PURE__ */ jsx3(Typography2, { variant: "eyebrow", component: "span", children: label })
+          ] }),
+          /* @__PURE__ */ jsx3(Typography2, { variant: "panelTitle", component: "div", children: value }),
+          sub && /* @__PURE__ */ jsx3(Typography2, { variant: "body2", sx: { color: "text.secondary" }, children: sub })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/layout/AgentAvatar.tsx
+import * as React2 from "react";
+import Box3 from "@mui/material/Box";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var hashSeed = (seed) => {
+  let h = 5381;
+  for (let i = 0; i < seed.length; i += 1) {
+    h = (h << 5) + h + seed.charCodeAt(i) & 4294967295;
+  }
+  return Math.abs(h);
+};
+var palette = (theme) => [
+  theme.palette.primary.main,
+  theme.palette.primary.dark,
+  theme.palette.secondary?.main ?? theme.palette.primary.main
+];
+var AgentAvatar = React2.forwardRef(
+  function AgentAvatar2({ seed, name, size = 40, shadow = false, iconUrl, ariaLabel, ...rest }, ref) {
+    const initial = (name?.trim()?.[0] ?? "?").toUpperCase();
+    const radius = Math.round(size * 0.28);
+    return /* @__PURE__ */ jsx4(
+      Box3,
+      {
+        ref,
+        role: "img",
+        "aria-label": ariaLabel ?? name,
+        ...rest,
+        sx: (theme) => {
+          const colors = palette(theme);
+          const paletteIndex = hashSeed(seed) % colors.length;
+          return {
+            width: size,
+            height: size,
+            borderRadius: `${radius}px`,
+            backgroundColor: colors[paletteIndex],
+            color: theme.palette.common.white,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontWeight: 700,
+            fontSize: Math.round(size * 0.42),
+            lineHeight: 1,
+            overflow: "hidden",
+            flexShrink: 0,
+            boxShadow: shadow ? theme.shadows[3] : "inset 0 1px 0 rgba(255,255,255,0.2)",
+            userSelect: "none"
+          };
+        },
+        children: iconUrl ? /* @__PURE__ */ jsx4(
+          Box3,
+          {
+            component: "img",
+            src: iconUrl,
+            alt: "",
+            sx: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        ) : /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: initial })
+      }
+    );
+  }
+);
+
+// src/components/layout/NumberedList.tsx
+import * as React3 from "react";
+import Box4 from "@mui/material/Box";
+import Typography3 from "@mui/material/Typography";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var toneColors = (tone, theme) => {
+  switch (tone) {
+    case "blue":
+      return { bg: theme.palette.info.light, fg: theme.palette.info.dark };
+    case "green":
+      return { bg: theme.palette.success.light, fg: theme.palette.success.dark };
+    case "orange":
+      return { bg: theme.palette.warning.light, fg: theme.palette.warning.dark };
+    case "pink":
+      return {
+        bg: theme.palette.secondary?.light ?? theme.palette.primary.light,
+        fg: theme.palette.secondary?.main ?? theme.palette.primary.main
+      };
+    case "neutral":
+      return { bg: theme.palette.grey[100], fg: theme.palette.text.primary };
+    case "violet":
+    default:
+      return { bg: theme.palette.primary.light, fg: theme.palette.primary.main };
+  }
+};
+var NumberedList = React3.forwardRef(
+  function NumberedList2({ items, tone = "violet", startAt = 1, ...rest }, ref) {
+    return /* @__PURE__ */ jsx5(
+      Box4,
+      {
+        ref,
+        component: "ol",
+        "data-tone": tone,
+        ...rest,
+        sx: (theme) => {
+          const { bg, fg } = toneColors(tone, theme);
+          return {
+            listStyle: "none",
+            margin: 0,
+            padding: 0,
+            display: "flex",
+            flexDirection: "column",
+            gap: 1.5,
+            "--numbered-list-bg": bg,
+            "--numbered-list-fg": fg
+          };
+        },
+        children: items.map((item, idx) => /* @__PURE__ */ jsxs4(
+          Box4,
+          {
+            component: "li",
+            sx: { display: "flex", alignItems: "flex-start", gap: 1.5 },
+            children: [
+              /* @__PURE__ */ jsx5(
+                Box4,
+                {
+                  "aria-hidden": "true",
+                  sx: {
+                    flexShrink: 0,
+                    width: 28,
+                    height: 28,
+                    borderRadius: "50%",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontWeight: 700,
+                    fontSize: 13,
+                    backgroundColor: "var(--numbered-list-bg)",
+                    color: "var(--numbered-list-fg)"
+                  },
+                  children: startAt + idx
+                }
+              ),
+              /* @__PURE__ */ jsxs4(Box4, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx5(Typography3, { variant: "subtitle1", component: "div", children: item.title }),
+                item.detail && /* @__PURE__ */ jsx5(
+                  Typography3,
+                  {
+                    variant: "body2",
+                    component: "div",
+                    sx: { color: "text.secondary", mt: 0.25 },
+                    children: item.detail
+                  }
+                )
+              ] }),
+              item.cta && /* @__PURE__ */ jsx5(Box4, { sx: { flexShrink: 0 }, children: item.cta })
+            ]
+          },
+          `${idx}-${item.title}`
+        ))
+      }
+    );
+  }
+);
+
+// src/components/layout/Drawer.tsx
+import React4 from "react";
+import MuiDrawer from "@mui/material/Drawer";
+import { styled as styled2 } from "@mui/material/styles";
+import { Box as Box5, IconButton as IconButton2, Typography as Typography4, Divider as Divider2, Tabs, Tab } from "@mui/material";
+import CloseIcon2 from "@mui/icons-material/Close";
+
+// src/components/layout/drawerWidth.ts
+function resolveDrawerWidth(width, theme, defaultWidth) {
+  if (width === void 0) {
+    return { width: defaultWidth };
+  }
+  if (typeof width === "number" || typeof width === "string") {
+    return { width };
+  }
+  const base = width.xs ?? defaultWidth;
+  const css = { width: base };
+  ["sm", "md", "lg", "xl"].forEach((bp) => {
+    const value = width[bp];
+    if (value !== void 0) {
+      css[theme.breakpoints.up(bp)] = { width: value };
+    }
+  });
+  return css;
+}
+
+// src/components/layout/Drawer.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var StyledDrawer = styled2(MuiDrawer, {
+  shouldForwardProp: (prop) => prop !== "width" && prop !== "miniWidth" && prop !== "collapsed" && prop !== "topOffset"
+})(({ theme, width, miniWidth = 72, collapsed, topOffset = 0 }) => {
+  const widthCss = collapsed ? { width: miniWidth } : resolveDrawerWidth(width, theme, 240);
+  return {
+    ...widthCss,
+    flexShrink: 0,
+    "& .MuiDrawer-paper": {
+      ...widthCss,
+      boxSizing: "border-box",
+      boxShadow: "0px 2px 10px rgba(0, 0, 0, 0.05)",
+      transition: theme.transitions.create(["width", "top", "height"], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen
+      }),
+      overflow: "visible",
+      // Let internal content handle scrolling
+      display: "flex",
+      flexDirection: "column",
+      top: `${topOffset}px !important`,
+      height: topOffset > 0 ? `calc(100% - ${topOffset}px) !important` : "100%",
+      zIndex: `${theme.zIndex.modal} !important`
+      // Use modal zIndex to be above everything except AppBar (which is modal + 1)
+    }
+  };
+});
+var Drawer = React4.forwardRef(function Drawer2({
+  width,
+  miniWidth = 72,
+  collapsed = false,
+  title,
+  header,
+  showCloseButton,
+  tabs,
+  activeTab = 0,
+  onTabChange,
+  footer,
+  contentProps,
+  anchor = "right",
+  variant = "temporary",
+  topOffset = 0,
+  children,
+  onClose,
+  ...props
+}, ref) {
+  const defaultWidth = variant === "temporary" || variant === "persistent" ? 400 : 240;
+  const finalWidth = width ?? defaultWidth;
+  const shouldShowClose = showCloseButton ?? (variant === "temporary" || variant === "persistent");
+  const hasHeader = title || header || shouldShowClose || tabs;
+  return /* @__PURE__ */ jsxs5(
+    StyledDrawer,
+    {
+      ref,
+      width: finalWidth,
+      miniWidth,
+      collapsed,
+      anchor,
+      variant,
+      topOffset,
+      onClose,
+      ModalProps: {
+        ...props.ModalProps,
+        style: {
+          zIndex: topOffset > 0 ? void 0 : void 0
+          // Let styled component handle zIndex
+        }
+      },
+      BackdropProps: {
+        ...props.BackdropProps,
+        style: {
+          backgroundColor: "rgba(0, 0, 0, 0.5)"
+        }
+      },
+      ...props,
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          /* @__PURE__ */ jsx6(
+            Box5,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                p: 2,
+                minHeight: 64,
+                borderBottom: 1,
+                borderColor: "divider"
+              },
+              children: header || /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                /* @__PURE__ */ jsx6(Box5, { sx: { flex: 1 }, children: typeof title === "string" ? /* @__PURE__ */ jsx6(Typography4, { variant: "h6", children: title }) : title }),
+                shouldShowClose && onClose && /* @__PURE__ */ jsx6(
+                  IconButton2,
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onClose(e, "backdropClick");
+                    },
+                    size: "small",
+                    sx: { ml: 1 },
+                    "aria-label": "close",
+                    children: /* @__PURE__ */ jsx6(CloseIcon2, {})
+                  }
+                )
+              ] })
+            }
+          ),
+          tabs && tabs.length > 0 && /* @__PURE__ */ jsx6(
+            Tabs,
+            {
+              value: activeTab,
+              onChange: (_, newValue) => onTabChange?.(newValue),
+              variant: tabs.length > 4 ? "scrollable" : "standard",
+              scrollButtons: tabs.length > 4 ? "auto" : false,
+              sx: {
+                borderBottom: 1,
+                borderColor: "divider",
+                px: 2,
+                "& .MuiTabs-scrollableContainer": {
+                  overflow: "auto"
+                }
+              },
+              children: tabs.map((tab, index) => /* @__PURE__ */ jsx6(Tab, { label: tab }, index))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx6(
+          Box5,
+          {
+            sx: {
+              flex: 1,
+              overflow: "auto",
+              display: "flex",
+              flexDirection: "column"
+            },
+            ...contentProps,
+            children
+          }
+        ),
+        footer && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          /* @__PURE__ */ jsx6(Divider2, {}),
+          /* @__PURE__ */ jsx6(
+            Box5,
+            {
+              sx: {
+                p: 2,
+                borderTop: 1,
+                borderColor: "divider"
+              },
+              children: footer
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/layout/MetaField.tsx
+import React5 from "react";
+import Box6 from "@mui/material/Box";
+import Typography5 from "@mui/material/Typography";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var MetaField = React5.forwardRef(function MetaField2({ label, value, mono = false, title }, ref) {
+  const resolvedTitle = title ?? (typeof value === "string" ? value : void 0);
+  return /* @__PURE__ */ jsxs6(Box6, { ref, sx: { display: "flex", flexDirection: "column", gap: 0.25, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx7(
+      Typography5,
+      {
+        variant: "caption",
+        sx: {
+          color: "text.secondary",
+          textTransform: "uppercase",
+          letterSpacing: 0.4,
+          fontSize: 10,
+          fontWeight: 600
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      Typography5,
+      {
+        variant: "body2",
+        sx: {
+          fontFamily: mono ? "monospace" : void 0,
+          fontSize: 13,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        title: resolvedTitle,
+        children: value
+      }
+    )
+  ] });
+});
+
+// src/components/layout/ScrollableRow.tsx
+import { useEffect, useRef, useState } from "react";
+import Box7 from "@mui/material/Box";
+import IconButton3 from "@mui/material/IconButton";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var EDGE_TOLERANCE_PX = 4;
+var ScrollableRow = ({
+  children,
+  leftLabel = "Scroll left",
+  rightLabel = "Scroll right",
+  minNudge = 160,
+  nudgeFraction = 0.6
+}) => {
+  const scrollerRef = useRef(null);
+  const [canLeft, setCanLeft] = useState(false);
+  const [canRight, setCanRight] = useState(false);
+  useEffect(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const update = () => {
+      setCanLeft(el.scrollLeft > EDGE_TOLERANCE_PX);
+      setCanRight(el.scrollLeft + el.clientWidth < el.scrollWidth - EDGE_TOLERANCE_PX);
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+    ro?.observe(el);
+    for (const c of Array.from(el.children)) ro?.observe(c);
+    const mo = typeof MutationObserver !== "undefined" ? new MutationObserver(() => {
+      for (const c of Array.from(el.children)) ro?.observe(c);
+      update();
+    }) : null;
+    mo?.observe(el, { childList: true });
+    return () => {
+      el.removeEventListener("scroll", update);
+      ro?.disconnect();
+      mo?.disconnect();
+    };
+  }, []);
+  const nudge = (dir) => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    el.scrollBy({ left: dir * Math.max(minNudge, el.clientWidth * nudgeFraction), behavior: "smooth" });
+  };
+  return /* @__PURE__ */ jsxs7(Box7, { sx: { position: "relative", flex: 1, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx8(
+      Box7,
+      {
+        ref: scrollerRef,
+        "data-scrollable-row-scroller": true,
+        sx: {
+          display: "flex",
+          gap: 1,
+          overflowX: "auto",
+          overflowY: "hidden",
+          scrollbarWidth: "thin",
+          py: 0.25
+        },
+        children
+      }
+    ),
+    canLeft && /* @__PURE__ */ jsx8(
+      IconButton3,
+      {
+        size: "small",
+        "aria-label": leftLabel,
+        onClick: () => nudge(-1),
+        sx: {
+          position: "absolute",
+          left: -6,
+          top: "50%",
+          transform: "translateY(-50%)",
+          bgcolor: "background.paper",
+          boxShadow: 1,
+          "&:hover": { bgcolor: "background.paper" }
+        },
+        children: /* @__PURE__ */ jsx8(ChevronLeftIcon, { fontSize: "small" })
+      }
+    ),
+    canRight && /* @__PURE__ */ jsx8(
+      IconButton3,
+      {
+        size: "small",
+        "aria-label": rightLabel,
+        onClick: () => nudge(1),
+        sx: {
+          position: "absolute",
+          right: -6,
+          top: "50%",
+          transform: "translateY(-50%)",
+          bgcolor: "background.paper",
+          boxShadow: 1,
+          "&:hover": { bgcolor: "background.paper" }
+        },
+        children: /* @__PURE__ */ jsx8(ChevronRightIcon, { fontSize: "small" })
+      }
+    )
+  ] });
+};
+
+// src/components/layout/SectionRow.tsx
+import React7 from "react";
+import Box8 from "@mui/material/Box";
+import Typography6 from "@mui/material/Typography";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var SectionRow = React7.forwardRef(function SectionRow2({ title, subtitle, action, leftLabel, rightLabel, children }, ref) {
+  return /* @__PURE__ */ jsxs8(Box8, { ref, component: "section", sx: { mb: 4 }, children: [
+    /* @__PURE__ */ jsxs8(
+      Box8,
+      {
+        component: "header",
+        sx: {
+          display: "flex",
+          alignItems: "flex-end",
+          justifyContent: "space-between",
+          gap: 1.5,
+          mb: 1.5
+        },
+        children: [
+          /* @__PURE__ */ jsxs8(Box8, { sx: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx9(Typography6, { component: "h2", variant: "h6", sx: { m: 0 }, children: title }),
+            subtitle && /* @__PURE__ */ jsx9(Typography6, { variant: "caption", sx: { color: "text.secondary" }, children: subtitle })
+          ] }),
+          action && /* @__PURE__ */ jsx9(Box8, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: action })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx9(ScrollableRow, { leftLabel, rightLabel, children })
+  ] });
+});
+
+// src/components/layout/GradientSurface.tsx
+import React8 from "react";
+import Box9 from "@mui/material/Box";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var PALETTES = [
+  { base: "linear-gradient(115deg, #0d0627 0%, #23194b 55%, #8B00EC 130%)", blobA: "#BD32A7", blobB: "#8B00EC" },
+  { base: "linear-gradient(115deg, #2a1635 0%, #5b2a55 55%, #c75a8a 130%)", blobA: "#ff7ea8", blobB: "#ffd1a8" },
+  { base: "linear-gradient(115deg, #0e2a2c 0%, #1d5d63 55%, #59c6c4 130%)", blobA: "#59c6c4", blobB: "#2bb0a0" },
+  { base: "linear-gradient(115deg, #131534 0%, #2c3a8c 55%, #6088e8 130%)", blobA: "#6088e8", blobB: "#3b5db8" },
+  { base: "linear-gradient(115deg, #1a0f30 0%, #3d2a78 55%, #8a5cf6 130%)", blobA: "#a892ff", blobB: "#6b4cf0" },
+  { base: "linear-gradient(115deg, #2b1124 0%, #6d2244 55%, #d44a7a 130%)", blobA: "#d44a7a", blobB: "#a8345e" }
+];
+var GRADIENT_PALETTE_COUNT = PALETTES.length;
+var GradientSurface = React8.forwardRef(
+  function GradientSurface2({ index, children, sx }, ref) {
+    const wrapped = (index % GRADIENT_PALETTE_COUNT + GRADIENT_PALETTE_COUNT) % GRADIENT_PALETTE_COUNT;
+    const palette2 = PALETTES[wrapped];
+    return /* @__PURE__ */ jsx10(
+      Box9,
+      {
+        ref,
+        "data-gradient-index": wrapped,
+        sx: [
+          {
+            position: "relative",
+            overflow: "hidden",
+            background: palette2.base,
+            color: "common.white",
+            "&::before, &::after": {
+              content: '""',
+              position: "absolute",
+              pointerEvents: "none",
+              borderRadius: "50%",
+              filter: "blur(6px)"
+            },
+            "&::before": {
+              width: 460,
+              height: 460,
+              top: -120,
+              right: -120,
+              opacity: 0.7,
+              background: `radial-gradient(circle, ${palette2.blobA} 0%, transparent 70%)`
+            },
+            "&::after": {
+              width: 520,
+              height: 520,
+              bottom: -180,
+              left: -160,
+              opacity: 0.55,
+              background: `radial-gradient(circle, ${palette2.blobB} 0%, transparent 70%)`
+            }
+          },
+          ...Array.isArray(sx) ? sx : [sx]
+        ],
+        children
+      }
+    );
+  }
+);
+
+// src/components/layout/DefinitionRow.tsx
+import React9 from "react";
+import Box10 from "@mui/material/Box";
+import Typography7 from "@mui/material/Typography";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var DefinitionRow = React9.forwardRef(
+  function DefinitionRow2({ icon, label, sublabel, value, hint, dense = false, divider = true }, ref) {
+    return /* @__PURE__ */ jsxs9(
+      Box10,
+      {
+        ref,
+        "data-density": dense ? "dense" : "normal",
+        sx: {
+          py: dense ? 0.75 : 1.25,
+          display: "flex",
+          alignItems: "center",
+          gap: 1.5,
+          ...divider && {
+            borderBottom: "1px solid",
+            borderColor: "divider",
+            "&:last-child": { borderBottom: "none" }
+          }
+        },
+        children: [
+          icon && /* @__PURE__ */ jsx11(Box10, { sx: { display: "flex", alignItems: "center", color: "text.secondary" }, children: icon }),
+          /* @__PURE__ */ jsxs9(Box10, { sx: { minWidth: 0, flex: 1 }, children: [
+            /* @__PURE__ */ jsx11(Typography7, { variant: "body2", sx: { fontWeight: 500, lineHeight: 1.2 }, children: label }),
+            sublabel && /* @__PURE__ */ jsx11(Typography7, { variant: "caption", sx: { color: "text.secondary" }, children: sublabel })
+          ] }),
+          (value || hint) && /* @__PURE__ */ jsxs9(
+            Box10,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-end",
+                textAlign: "right"
+              },
+              children: [
+                value && /* @__PURE__ */ jsx11(Typography7, { variant: "body2", sx: { color: "text.secondary" }, children: value }),
+                hint && /* @__PURE__ */ jsx11(Typography7, { variant: "caption", sx: { color: "text.disabled" }, children: hint })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/components/layout/PanelDialog.tsx
+import { forwardRef as forwardRef4 } from "react";
+import MuiDialog2 from "@mui/material/Dialog";
+import IconButton4 from "@mui/material/IconButton";
+import Box11 from "@mui/material/Box";
+import Typography8 from "@mui/material/Typography";
+import Slide from "@mui/material/Slide";
+import CloseIcon3 from "@mui/icons-material/Close";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var WIDTH_PX = {
+  sm: 420,
+  md: 640,
+  lg: 880,
+  xl: 1080
+};
+var SlideLeft = forwardRef4(
+  function SlideLeft2(props, ref) {
+    return /* @__PURE__ */ jsx12(Slide, { direction: "left", ref, ...props });
+  }
+);
+var SlideUp = forwardRef4(
+  function SlideUp2(props, ref) {
+    return /* @__PURE__ */ jsx12(Slide, { direction: "up", ref, ...props });
+  }
+);
+function PanelDialog({
+  open,
+  onClose,
+  title,
+  headerActions,
+  width = "md",
+  side = "right",
+  ariaLabel,
+  hideHeader = false,
+  paperSx,
+  backdropSx,
+  transition,
+  children
+}) {
+  const accessibleName = ariaLabel ?? (typeof title === "string" ? title : void 0);
+  const isRight = side === "right";
+  const resolvedTransition = transition ?? (isRight ? "slide-left" : "fade");
+  const TransitionComponent = resolvedTransition === "slide-left" ? SlideLeft : resolvedTransition === "slide-up" ? SlideUp : void 0;
+  const paperBaseSx = {
+    width: WIDTH_PX[width],
+    maxWidth: "100%",
+    // Lay paper children out as a flex column so the body can `flex: 1` and
+    // own its own scroll region.
+    display: "flex",
+    flexDirection: "column",
+    ...isRight && {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      margin: 0,
+      // Use dynamic viewport units so mobile browsers (esp. iOS Safari) don't
+      // pop the layout when the URL bar shows/hides.
+      maxHeight: "100dvh",
+      height: "100dvh",
+      borderRadius: 0
+    }
+  };
+  return /* @__PURE__ */ jsxs10(
+    MuiDialog2,
+    {
+      open,
+      onClose,
+      slots: TransitionComponent ? { transition: TransitionComponent } : void 0,
+      slotProps: {
+        paper: {
+          "aria-label": accessibleName,
+          sx: [paperBaseSx, ...Array.isArray(paperSx) ? paperSx : [paperSx]]
+        },
+        ...backdropSx ? { backdrop: { sx: backdropSx } } : {}
+      },
+      children: [
+        !hideHeader && /* @__PURE__ */ jsxs10(
+          Box11,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 1,
+              px: 2,
+              py: 1.5,
+              borderBottom: "1px solid",
+              borderColor: "divider"
+            },
+            children: [
+              /* @__PURE__ */ jsx12(Box11, { sx: { display: "flex", alignItems: "center", minWidth: 0 }, children: typeof title === "string" ? /* @__PURE__ */ jsx12(Typography8, { variant: "h6", noWrap: true, children: title }) : title }),
+              /* @__PURE__ */ jsxs10(Box11, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                headerActions,
+                /* @__PURE__ */ jsx12(IconButton4, { "aria-label": "Close", onClick: onClose, edge: "end", size: "small", children: /* @__PURE__ */ jsx12(CloseIcon3, { fontSize: "small" }) })
+              ] })
+            ]
+          }
+        ),
+        hideHeader && /* @__PURE__ */ jsx12(
+          IconButton4,
+          {
+            "aria-label": "Close",
+            onClick: onClose,
+            size: "small",
+            sx: {
+              position: "absolute",
+              top: 12,
+              right: 12,
+              zIndex: 2,
+              bgcolor: "background.paper",
+              boxShadow: 1,
+              "&:hover": { bgcolor: "background.paper" }
+            },
+            children: /* @__PURE__ */ jsx12(CloseIcon3, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ jsx12(Box11, { sx: { flex: 1, overflow: "auto", minHeight: 0 }, children })
+      ]
+    }
+  );
+}
+
+// src/components/layout/SplitDialogContent.tsx
+import React10 from "react";
+import Box12 from "@mui/material/Box";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var SplitDialogContent = React10.forwardRef(
+  function SplitDialogContent2({ left, right, rightWidth = 320, collapseBelow = 860, sx }, ref) {
+    return /* @__PURE__ */ jsxs11(
+      Box12,
+      {
+        ref,
+        sx: {
+          display: "grid",
+          gridTemplateColumns: `1fr ${rightWidth}px`,
+          gap: "28px",
+          // Right padding reserves room for the floating close button on PanelDialog.
+          padding: "28px 56px 36px 36px",
+          overflowY: "auto",
+          [`@media (max-width: ${collapseBelow}px)`]: {
+            gridTemplateColumns: "1fr",
+            padding: "22px 56px 28px 22px"
+          },
+          ...sx
+        },
+        children: [
+          /* @__PURE__ */ jsx13(Box12, { sx: { display: "flex", flexDirection: "column", gap: "22px", minWidth: 0 }, children: left }),
+          /* @__PURE__ */ jsx13(Box12, { component: "aside", sx: { display: "flex", flexDirection: "column", gap: "14px" }, children: right })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/layout/List.tsx
+import React11 from "react";
+import {
+  List as MuiList,
+  ListItem as MuiListItem,
+  ListItemText,
+  ListItemIcon,
+  ListItemSecondaryAction
+} from "@mui/material";
+import { styled as styled3 } from "@mui/material/styles";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var List = React11.forwardRef(function List2(props, ref) {
+  return /* @__PURE__ */ jsx14(MuiList, { ref, ...props });
+});
+var StyledListItem = styled3(MuiListItem, {
+  shouldForwardProp: (prop) => prop !== "hoverable"
+})(({ hoverable = true, theme }) => ({
+  border: `1px solid ${theme.palette.grey[200]}`,
+  borderRadius: 8,
+  marginBottom: 8,
+  ...hoverable && {
+    "&:hover": {
+      backgroundColor: theme.palette.grey[50]
+    }
+  }
+}));
+var ListItem = React11.forwardRef(function ListItem2({ primary, secondary, icon, action, hoverable = true, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs12(StyledListItem, { ref, hoverable, ...props, children: [
+    icon && /* @__PURE__ */ jsx14(ListItemIcon, { children: icon }),
+    (primary || secondary) && /* @__PURE__ */ jsx14(
+      ListItemText,
+      {
+        primary,
+        secondary
+      }
+    ),
+    children,
+    action && action
+  ] });
+});
+
+// src/components/layout/Avatar.tsx
+import React12 from "react";
+import MuiAvatar from "@mui/material/Avatar";
+import { styled as styled4 } from "@mui/material/styles";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var sizeMap = {
+  small: 32,
+  medium: 40,
+  large: 56
+};
+var StyledAvatar = styled4(MuiAvatar, {
+  shouldForwardProp: (prop) => prop !== "avatarSize"
+})(({ avatarSize = 40, theme }) => ({
+  width: avatarSize,
+  height: avatarSize,
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  fontWeight: 600
+}));
+var Avatar = React12.forwardRef(function Avatar2({ size = "medium", ...props }, ref) {
+  const avatarSize = typeof size === "number" ? size : sizeMap[size];
+  return /* @__PURE__ */ jsx15(StyledAvatar, { ref, avatarSize, ...props });
+});
+
+// src/components/layout/Table.tsx
+import React13 from "react";
+import {
+  Table as MuiTable,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TableSortLabel
+} from "@mui/material";
+import { styled as styled5 } from "@mui/material/styles";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var StyledTableContainer = styled5(TableContainer)(({ theme }) => ({
+  borderRadius: 8,
+  border: `1px solid ${theme.palette.grey[200]}`
+}));
+var StyledTableHead = styled5(TableHead)(({ theme }) => ({
+  backgroundColor: theme.palette.grey[50],
+  "& .MuiTableCell-head": {
+    fontWeight: 600,
+    color: theme.palette.text.primary
+  }
+}));
+var Table = React13.forwardRef(function Table2({ stickyHeader = false, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx16(StyledTableContainer, { children: /* @__PURE__ */ jsx16(MuiTable, { ref, stickyHeader, ...props, children }) });
+});
+var TableHeader = React13.forwardRef(
+  function TableHeader2({ columns, orderBy, order = "asc", onSort }, ref) {
+    return /* @__PURE__ */ jsx16(StyledTableHead, { ref, children: /* @__PURE__ */ jsx16(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx16(TableCell, { align: column.align || "left", children: column.sortable && onSort ? /* @__PURE__ */ jsx16(
+      TableSortLabel,
+      {
+        active: orderBy === column.id,
+        direction: orderBy === column.id ? order : "asc",
+        onClick: () => onSort(column.id),
+        children: column.label
+      }
+    ) : column.label }, column.id)) }) });
+  }
+);
+
+// src/components/layout/Grid.tsx
+import { Grid2 } from "@mui/material";
+
+// src/components/layout/Breadcrumbs.tsx
+import React14 from "react";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+import Typography9 from "@mui/material/Typography";
+import { styled as styled6 } from "@mui/material/styles";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled6(MuiBreadcrumbs)(({ theme }) => ({
+  "& .MuiBreadcrumbs-ol": {
+    flexWrap: "nowrap"
+  },
+  "& .MuiBreadcrumbs-separator": {
+    color: theme.palette.text.secondary
+  }
+}));
+var StyledLink = styled6(Link)(({ theme }) => ({
+  color: theme.palette.primary.main,
+  textDecoration: "none",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+}));
+var Breadcrumbs = React14.forwardRef(function Breadcrumbs2({ items, ...props }, ref) {
+  return /* @__PURE__ */ jsx17(StyledBreadcrumbs, { ref, ...props, children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    if (isLast || !item.href && !item.onClick) {
+      return /* @__PURE__ */ jsx17(Typography9, { color: "text.primary", children: item.label }, index);
+    }
+    return /* @__PURE__ */ jsx17(
+      StyledLink,
+      {
+        href: item.href,
+        onClick: (e) => {
+          if (item.onClick) {
+            e.preventDefault();
+            item.onClick();
+          }
+        },
+        children: item.label
+      },
+      index
+    );
+  }) });
+});
+
+// src/components/layout/Accordion.tsx
+import React15 from "react";
+import {
+  Accordion as MuiAccordion,
+  AccordionSummary,
+  AccordionDetails
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { styled as styled7 } from "@mui/material/styles";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var StyledAccordion = styled7(MuiAccordion)(({ theme }) => ({
+  borderRadius: 8,
+  boxShadow: "none",
+  border: `1px solid ${theme.palette.grey[200]}`,
+  "&:before": {
+    display: "none"
+  },
+  "&.Mui-expanded": {
+    margin: 0
+  }
+}));
+var StyledAccordionSummary = styled7(AccordionSummary)(({ theme }) => ({
+  backgroundColor: theme.palette.grey[50],
+  borderRadius: "8px 8px 0 0",
+  "&.Mui-expanded": {
+    borderRadius: "8px 8px 0 0"
+  },
+  "& .MuiAccordionSummary-content": {
+    margin: "12px 0"
+  }
+}));
+var StyledAccordionDetails = styled7(AccordionDetails)({
+  padding: "16px"
+});
+var Accordion = React15.forwardRef(function Accordion2({ title, children, defaultExpanded = false, ...props }, ref) {
+  return /* @__PURE__ */ jsxs13(StyledAccordion, { ref, defaultExpanded, ...props, children: [
+    /* @__PURE__ */ jsx18(StyledAccordionSummary, { expandIcon: /* @__PURE__ */ jsx18(ExpandMoreIcon, {}), children: title }),
+    /* @__PURE__ */ jsx18(StyledAccordionDetails, { children })
+  ] });
+});
+
+// src/components/layout/Paper.tsx
+import React16 from "react";
+import MuiPaper from "@mui/material/Paper";
+import { styled as styled8 } from "@mui/material/styles";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var StyledPaper = styled8(MuiPaper)(({ theme }) => ({
+  borderRadius: 8,
+  "&.MuiPaper-elevation": {
+    boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.08)"
+  },
+  "&.MuiPaper-outlined": {
+    border: `1px solid ${theme.palette.grey[200]}`,
+    boxShadow: "none"
+  }
+}));
+var Paper = React16.forwardRef(function Paper2({ variant = "elevation", ...props }, ref) {
+  return /* @__PURE__ */ jsx19(
+    StyledPaper,
+    {
+      ref,
+      variant,
+      elevation: variant === "elevation" ? 1 : 0,
+      ...props
+    }
+  );
+});
+
+// src/components/layout/Divider.tsx
+import React17 from "react";
+import MuiDivider from "@mui/material/Divider";
+import { styled as styled9 } from "@mui/material/styles";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var StyledDivider = styled9(MuiDivider)(({ theme }) => ({
+  borderColor: theme.palette.grey[200]
+}));
+var Divider3 = React17.forwardRef(function Divider4(props, ref) {
+  return /* @__PURE__ */ jsx20(StyledDivider, { ref, ...props });
+});
+
+// src/components/layout/Stack.tsx
+import { Stack as Stack2 } from "@mui/material";
+
+// src/components/layout/Box.tsx
+import { Box as Box13 } from "@mui/material";
+
+// src/components/layout/Container.tsx
+import { Container as Container2 } from "@mui/material";
+
+// src/components/layout/AppBar.tsx
+import {
+  AppBar as MuiAppBar,
+  Toolbar
+} from "@mui/material";
+import { styled as styled10 } from "@mui/material/styles";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var StyledAppBar = styled10(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "appBarHeight"
+})(({ appBarHeight = 64, theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  borderBottom: `1px solid ${theme.palette.grey[200]}`,
+  boxShadow: "none",
+  height: appBarHeight,
+  zIndex: 1300
+}));
+var StyledToolbar = styled10(Toolbar)(({ theme }) => ({
+  height: "100%",
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  gap: theme.spacing(2)
+}));
+var AppBar = ({ height = 64, children, ...props }) => {
+  return /* @__PURE__ */ jsx21(StyledAppBar, { position: "fixed", appBarHeight: height, ...props, children: /* @__PURE__ */ jsx21(StyledToolbar, { children }) });
+};
+
+// src/components/layout/Collapse.tsx
+import React18 from "react";
+import {
+  Collapse as MuiCollapse
+} from "@mui/material";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var Collapse = React18.forwardRef(function Collapse2(props, ref) {
+  return /* @__PURE__ */ jsx22(MuiCollapse, { ref, ...props });
+});
+
+// src/components/layout/EntityHeader/EntityHeader.tsx
+import React19 from "react";
+import Box14 from "@mui/material/Box";
+import Typography10 from "@mui/material/Typography";
+import IconButton5 from "@mui/material/IconButton";
+import Divider5 from "@mui/material/Divider";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+var EntityHeader = React19.forwardRef(
+  function EntityHeader2({
+    title,
+    subtitle,
+    role,
+    id,
+    primaryAction,
+    startActions,
+    endActions,
+    onCopyId,
+    onMoreOptions,
+    headingLevel = "h2",
+    divider = true
+  }, ref) {
+    const getPrimaryActionLabel = () => {
+      if (!primaryAction) return "";
+      const { label, count } = primaryAction;
+      return count !== void 0 ? `${label} (${count})` : label;
+    };
+    return /* @__PURE__ */ jsxs14(Box14, { ref, children: [
+      /* @__PURE__ */ jsxs14(
+        Box14,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            px: 3,
+            py: 2,
+            gap: 1
+          },
+          children: [
+            /* @__PURE__ */ jsxs14(
+              Box14,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  flexWrap: "wrap"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs14(
+                    Box14,
+                    {
+                      sx: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 0.5
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx23(
+                          Typography10,
+                          {
+                            component: headingLevel,
+                            sx: {
+                              fontSize: "16px",
+                              fontWeight: 500,
+                              lineHeight: "24px",
+                              letterSpacing: "0.15px",
+                              color: deploymentSurfaceTokens.textPrimary
+                            },
+                            children: title
+                          }
+                        ),
+                        subtitle && /* @__PURE__ */ jsx23(
+                          Typography10,
+                          {
+                            variant: "body2",
+                            sx: {
+                              fontSize: "11px",
+                              fontWeight: 500,
+                              lineHeight: "16px",
+                              letterSpacing: "0.5px",
+                              color: deploymentSurfaceTokens.textSecondary
+                            },
+                            children: subtitle
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  role && /* @__PURE__ */ jsx23(RoleBadge, { label: role, color: "primary", size: "small" }),
+                  id && /* @__PURE__ */ jsx23(IDBlock, { id, label: "ID", entityType: "entity", onCopy: onCopyId })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs14(
+              Box14,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  flexShrink: 0
+                },
+                children: [
+                  startActions,
+                  primaryAction && /* @__PURE__ */ jsx23(
+                    Button,
+                    {
+                      variant: "primary",
+                      startIcon: primaryAction.icon,
+                      onClick: primaryAction.onClick,
+                      sx: {
+                        textTransform: "capitalize"
+                      },
+                      children: getPrimaryActionLabel()
+                    }
+                  ),
+                  endActions,
+                  onMoreOptions && /* @__PURE__ */ jsx23(
+                    IconButton5,
+                    {
+                      onClick: onMoreOptions,
+                      size: "small",
+                      "aria-label": "More options",
+                      sx: {
+                        padding: "8px",
+                        border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
+                        borderRadius: "8px",
+                        "&:hover": {
+                          backgroundColor: deploymentSurfaceTokens.hoverOverlay,
+                          borderColor: deploymentSurfaceTokens.borderDefault
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx23(
+                        MoreHorizIcon,
+                        {
+                          sx: {
+                            fontSize: "20px",
+                            color: deploymentSurfaceTokens.textSecondary
+                          }
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      divider && /* @__PURE__ */ jsx23(
+        Divider5,
+        {
+          sx: {
+            borderColor: deploymentSurfaceTokens.strokeOutside
+          }
+        }
+      )
+    ] });
+  }
+);
+
+// src/components/layout/DeploymentDashboardCard/DeploymentDashboardCard.tsx
+import {
+  Paper as Paper3,
+  Box as Box15,
+  Typography as Typography11,
+  IconButton as IconButton6,
+  useTheme,
+  LinearProgress
+} from "@mui/material";
+import ExpandMoreIcon2 from "@mui/icons-material/ExpandMore";
+import ChevronRightIcon2 from "@mui/icons-material/ChevronRight";
+import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
+import WavesIcon from "@mui/icons-material/Waves";
+import RocketLaunchOutlinedIcon from "@mui/icons-material/RocketLaunchOutlined";
+import InsertLinkIcon from "@mui/icons-material/InsertLink";
+import SmartToyOutlinedIcon from "@mui/icons-material/SmartToyOutlined";
+import { styled as styled11 } from "@mui/material/styles";
+
+// src/hooks/useControlledExpand.ts
+import { useState as useState2 } from "react";
+function useControlledExpand(controlledExpanded, onToggle, defaultExpanded = false) {
+  const [internal, setInternal] = useState2(defaultExpanded);
+  const isControlled = controlledExpanded !== void 0 && onToggle != null;
+  const expanded = isControlled ? controlledExpanded : internal;
+  const toggle = isControlled ? () => onToggle() : () => setInternal((prev) => !prev);
+  return { expanded, toggle };
+}
+
+// src/components/layout/DeploymentDashboardCard/DeploymentDashboardCard.tsx
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+var ENTITY_LABELS = {
+  workspace: "Workspace",
+  stream: "Stream",
+  deployment: "Deployment",
+  engagement: "Engagement",
+  agent: "Agent"
+};
+var ENTITY_ICON_SIZE = 16;
+var ENTITY_ICONS = {
+  workspace: /* @__PURE__ */ jsx24(WorkOutlineIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
+  stream: /* @__PURE__ */ jsx24(WavesIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
+  deployment: /* @__PURE__ */ jsx24(RocketLaunchOutlinedIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
+  engagement: /* @__PURE__ */ jsx24(InsertLinkIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
+  agent: /* @__PURE__ */ jsx24(SmartToyOutlinedIcon, { sx: { fontSize: ENTITY_ICON_SIZE } })
+};
+var STATUS_DOT_COLORS = {
+  normal: deploymentStatusColors.normal,
+  warning: deploymentStatusColors.warning,
+  error: deploymentStatusColors.error,
+  disabled: deploymentStatusColors.disabledDim
+};
+var CHEVRON_SIZE = 16;
+var ENTITY_CHIP_STYLES = {
+  borderRadius: "12px",
+  borderWidth: "1.5px",
+  padding: { left: 0.75, right: 1, vertical: 0.25 },
+  gap: 0.5
+};
+var ENTITY_CHIP_TYPOGRAPHY = {
+  fontSize: "12px",
+  fontWeight: 500,
+  lineHeight: 1.33,
+  letterSpacing: "0.07px"
+};
+var StatusDot = styled11(Box15, {
+  shouldForwardProp: (p) => p !== "status"
+})(({ status }) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  backgroundColor: status ? STATUS_DOT_COLORS[status] ?? "transparent" : "transparent",
+  flexShrink: 0
+}));
+var EntityChip = ({ entityType, color }) => /* @__PURE__ */ jsxs15(
+  Box15,
+  {
+    sx: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: ENTITY_CHIP_STYLES.gap,
+      pl: ENTITY_CHIP_STYLES.padding.left,
+      pr: ENTITY_CHIP_STYLES.padding.right,
+      py: ENTITY_CHIP_STYLES.padding.vertical,
+      borderRadius: ENTITY_CHIP_STYLES.borderRadius,
+      backgroundColor: deploymentSurfaceTokens.surfaceHigh,
+      border: `${ENTITY_CHIP_STYLES.borderWidth} solid ${color}`,
+      flexShrink: 0
+    },
+    children: [
+      /* @__PURE__ */ jsx24(Box15, { sx: { color, display: "flex", alignItems: "center" }, children: ENTITY_ICONS[entityType] }),
+      /* @__PURE__ */ jsx24(
+        Typography11,
+        {
+          variant: "body2",
+          fontWeight: ENTITY_CHIP_TYPOGRAPHY.fontWeight,
+          sx: {
+            color: "common.black",
+            lineHeight: ENTITY_CHIP_TYPOGRAPHY.lineHeight,
+            fontSize: ENTITY_CHIP_TYPOGRAPHY.fontSize,
+            letterSpacing: ENTITY_CHIP_TYPOGRAPHY.letterSpacing
+          },
+          children: ENTITY_LABELS[entityType]
+        }
+      )
+    ]
+  }
+);
+var CapacityBar = ({ value, indented = false }) => /* @__PURE__ */ jsxs15(Box15, { sx: { pl: indented ? "40px" : 0, pr: "20px", py: 1 }, children: [
+  /* @__PURE__ */ jsxs15(Box15, { sx: { display: "flex", justifyContent: "space-between", mb: 1 }, children: [
+    /* @__PURE__ */ jsx24(Typography11, { variant: "body2", sx: { color: deploymentSurfaceTokens.textPrimary }, children: "Capacity" }),
+    /* @__PURE__ */ jsxs15(Typography11, { variant: "body2", sx: { color: deploymentSurfaceTokens.accentBlue }, children: [
+      value,
+      "%"
+    ] })
+  ] }),
+  /* @__PURE__ */ jsx24(
+    LinearProgress,
+    {
+      variant: "determinate",
+      value,
+      sx: {
+        height: 4,
+        borderRadius: "20px",
+        backgroundColor: deploymentSurfaceTokens.strokeOutside,
+        "& .MuiLinearProgress-bar": {
+          borderRadius: "20px",
+          backgroundColor: deploymentSurfaceTokens.accentBlue
+        }
+      }
+    }
+  )
+] });
+var getActionButtonStyles = (action) => {
+  const baseStyles = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 0.5,
+    cursor: action.onClick ? "pointer" : "default",
+    background: "none",
+    font: "inherit",
+    color: deploymentSurfaceTokens.textPrimary,
+    whiteSpace: "nowrap",
+    "&:hover": action.onClick ? { opacity: 0.7 } : void 0
+  };
+  const variantStyles = action.outlined ? {
+    border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
+    borderRadius: "8px",
+    p: 1,
+    bgcolor: "white"
+  } : {
+    border: "none",
+    p: 0
+  };
+  return { ...baseStyles, ...variantStyles };
+};
+var CardAction = ({ action }) => /* @__PURE__ */ jsxs15(
+  Box15,
+  {
+    component: action.onClick ? "button" : "span",
+    onClick: action.onClick,
+    sx: getActionButtonStyles(action),
+    children: [
+      action.icon && /* @__PURE__ */ jsx24(Box15, { component: "span", sx: { display: "flex", alignItems: "center" }, children: action.icon }),
+      action.label && /* @__PURE__ */ jsx24(Typography11, { variant: "body2", fontWeight: 500, component: "span", sx: { fontSize: "14px" }, children: action.label })
+    ]
+  }
+);
+var CardActionList = ({ actions }) => /* @__PURE__ */ jsx24(Fragment3, { children: actions.map((action) => /* @__PURE__ */ jsx24(CardAction, { action }, action.id)) });
+var DeploymentDashboardCard = ({
+  entityType,
+  title,
+  id: idDisplay,
+  createdAt,
+  updatedAt,
+  capacity,
+  actions = [],
+  statusIndicator = null,
+  expandable = false,
+  expanded: controlledExpanded,
+  onExpandToggle,
+  onCopyId,
+  className,
+  children
+}) => {
+  const theme = useTheme();
+  const entityColor = theme.palette.deployment?.entity?.[entityType] ?? deploymentEntityColors[entityType];
+  const isControlled = expandable && onExpandToggle != null;
+  const { expanded, toggle } = useControlledExpand(
+    isControlled ? controlledExpanded : void 0,
+    isControlled ? onExpandToggle : void 0
+  );
+  const isWorkspace = entityType === "workspace";
+  const isDeployment = entityType === "deployment";
+  const getClampedCapacity = (capacity2) => {
+    if (!isDeployment || capacity2 == null) {
+      return void 0;
+    }
+    return Math.min(100, Math.max(0, capacity2));
+  };
+  const capacityClamped = getClampedCapacity(capacity);
+  return /* @__PURE__ */ jsxs15(
+    Paper3,
+    {
+      className,
+      elevation: 0,
+      sx: {
+        border: `1px solid ${isWorkspace ? deploymentSurfaceTokens.accentBlue : deploymentSurfaceTokens.borderDefault}`,
+        borderRadius: isWorkspace ? "4px" : "12px",
+        boxShadow: isWorkspace ? deploymentSurfaceTokens.workspaceShadow : "none",
+        px: 1,
+        py: isDeployment ? 2 : 1,
+        pl: 1,
+        display: "flex",
+        flexDirection: "column",
+        gap: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs15(
+          Box15,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: isDeployment ? "flex-start" : "center",
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsxs15(Box15, { sx: { display: "flex", flexDirection: "column", gap: 0.5, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxs15(Box15, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
+                  expandable ? /* @__PURE__ */ jsx24(
+                    IconButton6,
+                    {
+                      size: "small",
+                      onClick: toggle,
+                      "aria-label": expanded ? "Collapse" : "Expand",
+                      sx: { p: "5px" },
+                      children: expanded ? /* @__PURE__ */ jsx24(ExpandMoreIcon2, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.accentBlue } }) : /* @__PURE__ */ jsx24(ChevronRightIcon2, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.accentBlue } })
+                    }
+                  ) : /* @__PURE__ */ jsx24(Box15, { sx: { width: 26, flexShrink: 0 } }),
+                  /* @__PURE__ */ jsx24(EntityChip, { entityType, color: entityColor }),
+                  /* @__PURE__ */ jsx24(
+                    Typography11,
+                    {
+                      variant: "subtitle1",
+                      fontWeight: 500,
+                      noWrap: true,
+                      sx: { color: deploymentSurfaceTokens.textPrimary, fontSize: "16px", letterSpacing: "0.08px" },
+                      children: title
+                    }
+                  ),
+                  idDisplay != null && /* @__PURE__ */ jsx24(IDBlock, { id: idDisplay, label: "ID", entityType, onCopy: onCopyId })
+                ] }),
+                (createdAt != null || updatedAt != null) && /* @__PURE__ */ jsxs15(
+                  Box15,
+                  {
+                    sx: {
+                      display: "flex",
+                      gap: 2,
+                      px: "34px",
+                      color: deploymentSurfaceTokens.textSecondary
+                    },
+                    children: [
+                      createdAt != null && /* @__PURE__ */ jsxs15(Typography11, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
+                        "Created: ",
+                        createdAt
+                      ] }),
+                      updatedAt != null && /* @__PURE__ */ jsxs15(Typography11, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
+                        "Last Updated: ",
+                        updatedAt
+                      ] })
+                    ]
+                  }
+                ),
+                capacityClamped !== void 0 && /* @__PURE__ */ jsx24(CapacityBar, { value: capacityClamped, indented: expandable })
+              ] }),
+              /* @__PURE__ */ jsxs15(Box15, { sx: { display: "flex", gap: 1, alignItems: "center", flexShrink: 0 }, children: [
+                statusIndicator != null && /* @__PURE__ */ jsx24(StatusDot, { status: statusIndicator, "aria-hidden": true }),
+                /* @__PURE__ */ jsx24(CardActionList, { actions })
+              ] })
+            ]
+          }
+        ),
+        children && /* @__PURE__ */ jsx24(Box15, { sx: { mt: 1.5, display: "flex", flexDirection: "column", gap: 1 }, children })
+      ]
+    }
+  );
+};
+
+// src/components/layout/DeploymentEntityContextMenu/DeploymentEntityContextMenu.tsx
+import { Menu, MenuItem, Switch, Divider as Divider6, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2 } from "@mui/material";
+import { styled as styled12 } from "@mui/material/styles";
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+var StyledMenu = styled12(Menu)({
+  "& .MuiPaper-root": {
+    borderRadius: 4,
+    boxShadow: deploymentSurfaceTokens.workspaceShadow,
+    minWidth: 220,
+    border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
+    padding: 8
+  },
+  "& .MuiList-root": {
+    padding: 0
+  }
+});
+var StyledMenuItem = styled12(MenuItem)({
+  gap: 8,
+  padding: "8px 0",
+  borderRadius: 4,
+  minHeight: "auto",
+  "&:hover": {
+    backgroundColor: deploymentSurfaceTokens.hoverLight
+  },
+  "& .MuiListItemIcon-root": {
+    minWidth: "auto",
+    color: deploymentSurfaceTokens.textPrimary,
+    "& .MuiSvgIcon-root": {
+      fontSize: 24
+    }
+  },
+  "& .MuiListItemText-root .MuiTypography-root": {
+    fontSize: 16,
+    fontWeight: 500,
+    lineHeight: 1.5,
+    letterSpacing: "0.08px",
+    color: deploymentSurfaceTokens.textPrimary
+  }
+});
+var HighlightedMenuItem = styled12(StyledMenuItem)({
+  backgroundColor: deploymentSurfaceTokens.highlightBg,
+  border: `1px solid ${deploymentSurfaceTokens.highlightBorder}`,
+  padding: 8,
+  "&:hover": {
+    backgroundColor: deploymentSurfaceTokens.highlightBgHover
+  }
+});
+var ToggleMenuItem = styled12(MenuItem)({
+  gap: 8,
+  padding: "8px 0",
+  cursor: "default",
+  minHeight: "auto",
+  "&:hover": {
+    backgroundColor: "transparent"
+  },
+  "& .MuiListItemText-root .MuiTypography-root": {
+    fontSize: 16,
+    fontWeight: 500,
+    lineHeight: 1.5,
+    letterSpacing: "0.08px",
+    color: deploymentSurfaceTokens.textPrimary
+  }
+});
+var EnableSwitch = styled12(Switch)(({ theme }) => ({
+  width: 32,
+  height: 20,
+  padding: 0,
+  "& .MuiSwitch-switchBase": {
+    padding: 2,
+    "&.Mui-checked": {
+      transform: "translateX(12px)",
+      color: theme.palette.common.white,
+      "& + .MuiSwitch-track": {
+        backgroundColor: deploymentSurfaceTokens.switchGreen,
+        opacity: 1
+      }
+    }
+  },
+  "& .MuiSwitch-thumb": {
+    width: 16,
+    height: 16
+  },
+  "& .MuiSwitch-track": {
+    borderRadius: 100,
+    backgroundColor: deploymentSurfaceTokens.switchTrackOff,
+    opacity: 1
+  }
+}));
+var StyledDivider2 = styled12(Divider6)({
+  margin: "0 !important",
+  borderColor: deploymentSurfaceTokens.strokeOutside
+});
+var DeploymentEntityContextMenu = ({
+  open,
+  anchorEl,
+  onClose,
+  items,
+  enableToggle = false,
+  enableChecked = false,
+  onEnableChange
+}) => {
+  return /* @__PURE__ */ jsxs16(
+    StyledMenu,
+    {
+      anchorEl,
+      open,
+      onClose,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      slotProps: { paper: { "aria-label": "Entity context menu" } },
+      children: [
+        items.map((item) => {
+          if (item.type === "divider") {
+            return /* @__PURE__ */ jsx25(StyledDivider2, {}, item.id);
+          }
+          if (item.type === "toggle") {
+            return /* @__PURE__ */ jsxs16(ToggleMenuItem, { disableRipple: true, children: [
+              onEnableChange && /* @__PURE__ */ jsx25(
+                EnableSwitch,
+                {
+                  size: "small",
+                  checked: enableChecked,
+                  onChange: (_, checked) => onEnableChange(checked),
+                  inputProps: { "aria-label": item.label }
+                }
+              ),
+              /* @__PURE__ */ jsx25(ListItemText2, { primary: item.label })
+            ] }, item.id);
+          }
+          const Row = item.highlighted ? HighlightedMenuItem : StyledMenuItem;
+          return /* @__PURE__ */ jsxs16(
+            Row,
+            {
+              onClick: () => {
+                item.onClick?.();
+                onClose();
+              },
+              children: [
+                item.icon && /* @__PURE__ */ jsx25(ListItemIcon2, { children: item.icon }),
+                /* @__PURE__ */ jsx25(ListItemText2, { primary: item.label })
+              ]
+            },
+            item.id
+          );
+        }),
+        enableToggle && /* @__PURE__ */ jsxs16(Fragment4, { children: [
+          /* @__PURE__ */ jsx25(StyledDivider2, {}),
+          /* @__PURE__ */ jsxs16(ToggleMenuItem, { disableRipple: true, children: [
+            onEnableChange && /* @__PURE__ */ jsx25(
+              EnableSwitch,
+              {
+                size: "small",
+                checked: enableChecked,
+                onChange: (_, checked) => onEnableChange(checked),
+                inputProps: { "aria-label": "Enable" }
+              }
+            ),
+            /* @__PURE__ */ jsx25(ListItemText2, { primary: "Enable" })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/layout/DeploymentEntityContextMenu/contextMenuItems.tsx
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import EditIcon from "@mui/icons-material/Edit";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import SmartToyOutlinedIcon2 from "@mui/icons-material/SmartToyOutlined";
+import DescriptionIcon from "@mui/icons-material/Description";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var contextMenuItems = {
+  /** Add Engagement action (Add Circle icon) */
+  addEngagement: (onClick) => ({
+    id: "add-engagement",
+    label: "Add Engagement",
+    icon: /* @__PURE__ */ jsx26(AddCircleOutlineIcon, {}),
+    onClick
+  }),
+  /** Add Agent action (Add Circle icon) */
+  addAgent: (onClick) => ({
+    id: "add-agent",
+    label: "Add Agent",
+    icon: /* @__PURE__ */ jsx26(AddCircleOutlineIcon, {}),
+    onClick
+  }),
+  /** Add Stream action (Add Circle icon) */
+  addStream: (onClick) => ({
+    id: "add-stream",
+    label: "Add Stream",
+    icon: /* @__PURE__ */ jsx26(AddCircleOutlineIcon, {}),
+    onClick
+  }),
+  /** Edit action (Pen / Edit icon) */
+  edit: (onClick) => ({
+    id: "edit",
+    label: "Edit",
+    icon: /* @__PURE__ */ jsx26(EditIcon, {}),
+    onClick
+  }),
+  /** Copy ID action (Copy icon) */
+  copyId: (onClick) => ({
+    id: "copy-id",
+    label: "Copy ID",
+    icon: /* @__PURE__ */ jsx26(ContentCopyIcon, {}),
+    onClick
+  }),
+  /** Agent Flow Visualization — highlighted action (SmartToy icon) */
+  agentFlowVisualization: (onClick) => ({
+    id: "agent-flow",
+    label: "Agent Flow Visualization",
+    icon: /* @__PURE__ */ jsx26(SmartToyOutlinedIcon2, {}),
+    onClick,
+    highlighted: true
+  }),
+  /** View Logs action (Document / Description icon) */
+  viewLogs: (onClick) => ({
+    id: "view-logs",
+    label: "View Logs",
+    icon: /* @__PURE__ */ jsx26(DescriptionIcon, {}),
+    onClick
+  }),
+  /** Horizontal divider between sections */
+  divider: () => ({
+    id: "divider",
+    label: "",
+    type: "divider"
+  }),
+  /** Enable toggle row (switch on left + label) */
+  enable: () => ({
+    id: "enable",
+    label: "Enable",
+    type: "toggle"
+  }),
+  /** Settings action (Settings / Gear icon) */
+  settings: (onClick) => ({
+    id: "settings",
+    label: "Settings",
+    icon: /* @__PURE__ */ jsx26(SettingsIcon, {}),
+    onClick
+  })
+};
+
+// src/components/layout/DeploymentDashboardTree/DeploymentDashboardTree.tsx
+import { Box as Box16 } from "@mui/material";
+import { styled as styled13, alpha } from "@mui/material/styles";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+var TREE_SP = {
+  /** Vertical gap between sibling rows (Figma S / sp-8) */
+  rowGap: 8,
+  /** Gap between rail and children column (Figma sp-12) */
+  railGap: 12,
+  /** Rail width (Figma) */
+  railWidth: 4,
+  /** Total horizontal indent per level = railWidth + railGap (Figma M = 16) */
+  indentPerLevel: 4 + 12
+};
+var RAIL_OPACITY = {
+  workspace: 0.5,
+  stream: 0.5,
+  deployment: 0.4,
+  engagement: 0.4,
+  agent: 0.4
+};
+var Rail = styled13(Box16, {
+  shouldForwardProp: (p) => p !== "railColor"
+})(({ railColor }) => ({
+  width: TREE_SP.railWidth,
+  borderRadius: TREE_SP.railWidth / 2,
+  backgroundColor: railColor,
+  flexShrink: 0,
+  alignSelf: "stretch"
+}));
+var TreeRow = ({ node, depth, onExpandToggle, onCopyId, renderCard }) => {
+  const hasChildren = Boolean(node.children && node.children.length > 0);
+  const { expanded, toggle } = useControlledExpand(
+    onExpandToggle != null ? node.expanded : void 0,
+    onExpandToggle ? () => onExpandToggle(node.id) : void 0,
+    node.expanded ?? false
+  );
+  const entityColor = deploymentEntityColors[node.entityType] ?? deploymentEntityColors.workspace;
+  const railOpacity = RAIL_OPACITY[node.entityType] ?? 0.5;
+  const railColor = alpha(entityColor, railOpacity);
+  const renderedChildren = hasChildren && expanded ? /* @__PURE__ */ jsxs17(Box16, { sx: { display: "flex", gap: `${TREE_SP.railGap}px` }, children: [
+    /* @__PURE__ */ jsx27(Rail, { railColor, "aria-hidden": true, "data-rail": true }),
+    /* @__PURE__ */ jsx27(
+      Box16,
+      {
+        role: "group",
+        sx: {
+          flex: 1,
+          minWidth: 0,
+          display: "flex",
+          flexDirection: "column",
+          gap: `${TREE_SP.rowGap}px`
+        },
+        children: node.children.map((child) => /* @__PURE__ */ jsx27(
+          TreeRow,
+          {
+            node: child,
+            depth: depth + 1,
+            onExpandToggle,
+            onCopyId,
+            renderCard
+          },
+          child.id
+        ))
+      }
+    )
+  ] }) : null;
+  const cardContent = renderCard?.(node) ?? /* @__PURE__ */ jsx27(
+    DeploymentDashboardCard,
+    {
+      entityType: node.entityType,
+      title: node.title,
+      id: node.idDisplay,
+      createdAt: node.createdAt,
+      updatedAt: node.updatedAt,
+      capacity: node.capacity,
+      actions: node.actions,
+      statusIndicator: node.statusIndicator,
+      expandable: hasChildren,
+      expanded,
+      onExpandToggle: hasChildren ? toggle : void 0,
+      onCopyId: onCopyId && node.idDisplay ? () => onCopyId(node.id) : void 0,
+      children: renderedChildren
+    }
+  );
+  return /* @__PURE__ */ jsx27(Box16, { role: "treeitem", children: cardContent });
+};
+var DeploymentDashboardTree = ({
+  nodes,
+  onExpandToggle,
+  onCopyId,
+  renderCard
+}) => {
+  return /* @__PURE__ */ jsx27(
+    Box16,
+    {
+      role: "tree",
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: `${TREE_SP.rowGap}px`,
+        p: `${TREE_SP.rowGap}px`
+      },
+      children: nodes.map((node) => /* @__PURE__ */ jsx27(
+        TreeRow,
+        {
+          node,
+          depth: 0,
+          onExpandToggle,
+          onCopyId,
+          renderCard
+        },
+        node.id
+      ))
+    }
+  );
+};
+
+// src/components/layout/DeploymentDashboardPanel/DeploymentDashboardPanel.tsx
+import { Box as Box17 } from "@mui/material";
+import { styled as styled14 } from "@mui/material/styles";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var PANEL_RADIUS = 12;
+var PANEL_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.08)";
+var StyledPanel = styled14(Box17)({
+  backgroundColor: deploymentSurfaceTokens.surfaceHigh,
+  border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
+  borderRadius: PANEL_RADIUS,
+  boxShadow: PANEL_SHADOW,
+  overflow: "hidden"
+});
+var DeploymentDashboardPanel = ({
+  children,
+  className,
+  padding = 2
+}) => {
+  return /* @__PURE__ */ jsx28(StyledPanel, { className, sx: { p: padding }, children });
+};
+
+// src/components/layout/WorkflowTopBar/WorkflowTopBar.tsx
+import {
+  Box as Box18,
+  Divider as Divider7,
+  IconButton as IconButton7,
+  InputBase,
+  Typography as Typography12,
+  alpha as alpha2
+} from "@mui/material";
+import CloseIcon4 from "@mui/icons-material/Close";
+import CancelIcon from "@mui/icons-material/Cancel";
+import { useTheme as useTheme2 } from "@mui/material/styles";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+var WorkflowTopBar = ({
+  title = "Agent visualization flow chart",
+  executionId,
+  executionIdLabel = "Job ID",
+  onExecutionIdChange,
+  onClearExecutionId,
+  submitLabel = "Submit",
+  onSubmit,
+  inspectorLabel = "Inspector",
+  onInspectorToggle,
+  onClose,
+  showInspectorToggle = true,
+  showCloseButton = true,
+  sx,
+  ...boxProps
+}) => {
+  const chrome = useTheme2().palette.workflow.chrome;
+  return /* @__PURE__ */ jsxs18(
+    Box18,
+    {
+      sx: [
+        {
+          backgroundColor: "common.white",
+          display: "flex",
+          flexDirection: "column",
+          width: "100%"
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      ...boxProps,
+      children: [
+        /* @__PURE__ */ jsxs18(
+          Box18,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 2,
+              px: 2,
+              py: 2,
+              minHeight: 72
+            },
+            children: [
+              /* @__PURE__ */ jsx29(
+                Typography12,
+                {
+                  variant: "subtitle1",
+                  sx: {
+                    color: deploymentSurfaceTokens.textPrimary,
+                    fontWeight: 500,
+                    minWidth: 220
+                  },
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsxs18(
+                Box18,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 2,
+                    justifyContent: "flex-end",
+                    flex: 1,
+                    minWidth: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs18(
+                      Box18,
+                      {
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          backgroundColor: chrome.inputBg,
+                          borderRadius: "4px 4px 0 0",
+                          borderBottom: `2px solid ${chrome.inputBorder}`,
+                          px: 2,
+                          minWidth: 320,
+                          maxWidth: 440,
+                          flex: "1 1 auto",
+                          minHeight: 56
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs18(Box18, { sx: { flex: 1, minWidth: 0 }, children: [
+                            /* @__PURE__ */ jsx29(
+                              Typography12,
+                              {
+                                variant: "caption",
+                                sx: {
+                                  color: chrome.labelText,
+                                  fontSize: 12,
+                                  display: "block"
+                                },
+                                children: executionIdLabel
+                              }
+                            ),
+                            /* @__PURE__ */ jsx29(
+                              InputBase,
+                              {
+                                value: executionId,
+                                onChange: (event) => onExecutionIdChange?.(event.target.value),
+                                inputProps: { "aria-label": executionIdLabel },
+                                sx: {
+                                  width: "100%",
+                                  mt: 0.25,
+                                  "& .MuiInputBase-input": {
+                                    p: 0,
+                                    color: deploymentSurfaceTokens.textPrimary,
+                                    fontSize: 16,
+                                    lineHeight: 1.5
+                                  }
+                                }
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsx29(
+                            IconButton7,
+                            {
+                              size: "small",
+                              "aria-label": `Clear ${executionIdLabel.toLowerCase()}`,
+                              onClick: onClearExecutionId,
+                              sx: { color: chrome.iconColor, ml: 1 },
+                              children: /* @__PURE__ */ jsx29(CancelIcon, { fontSize: "small" })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx29(
+                      Button,
+                      {
+                        variant: "primary",
+                        onClick: onSubmit,
+                        sx: {
+                          backgroundColor: chrome.buttonPrimary,
+                          "&:hover": {
+                            backgroundColor: chrome.buttonHover
+                          },
+                          "&:active": {
+                            backgroundColor: chrome.buttonActive
+                          }
+                        },
+                        children: submitLabel
+                      }
+                    ),
+                    showInspectorToggle && /* @__PURE__ */ jsx29(Button, { variant: "secondary", onClick: onInspectorToggle, children: inspectorLabel }),
+                    showCloseButton && /* @__PURE__ */ jsx29(
+                      IconButton7,
+                      {
+                        "aria-label": "Close workflow chrome",
+                        onClick: onClose,
+                        sx: {
+                          width: 30,
+                          height: 30,
+                          backgroundColor: alpha2(chrome.closeBtnBg, 0.28),
+                          color: chrome.iconColor
+                        },
+                        children: /* @__PURE__ */ jsx29(CloseIcon4, { fontSize: "small" })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx29(Divider7, { sx: { borderColor: deploymentSurfaceTokens.strokeOutside } })
+      ]
+    }
+  );
+};
+
+// src/components/layout/WorkflowSideInspector/WorkflowSideInspector.tsx
+import {
+  Box as Box19,
+  Divider as Divider8,
+  IconButton as IconButton8,
+  Paper as Paper4,
+  Typography as Typography13,
+  alpha as alpha3,
+  useTheme as useTheme3
+} from "@mui/material";
+import CloseIcon5 from "@mui/icons-material/Close";
+import ContentCopyOutlinedIcon from "@mui/icons-material/ContentCopyOutlined";
+import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+var INSPECTOR_WIDTH = 320;
+var InfoBlock = ({ label, value, mutedColor }) => /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+  /* @__PURE__ */ jsx30(Typography13, { variant: "body2", sx: { color: mutedColor }, children: label }),
+  /* @__PURE__ */ jsx30(
+    Typography13,
+    {
+      variant: "body2",
+      sx: { color: deploymentSurfaceTokens.textPrimary, whiteSpace: "pre-wrap" },
+      children: value
+    }
+  )
+] });
+var WorkflowSideInspector = ({
+  open = true,
+  title = "Inspector",
+  nodeTitle = "Player location cubby",
+  nodeDescription = "Retrieving everything we know about this player so far.",
+  nodeType = "cubbies",
+  inputValue = "Get player topic tree",
+  outputValue = "Topic tree with emotional trends and behavior patterns",
+  cubbyId = "ID:S8787",
+  timestamp = "2026-02-11 14:32:10",
+  duration = "120ms",
+  showInput = true,
+  showOutput = true,
+  showTimestamp = true,
+  showDuration = true,
+  actionLabel,
+  onClose,
+  onCopyCubbyId,
+  onAction,
+  sx,
+  ...paperProps
+}) => {
+  const theme = useTheme3();
+  const chrome = theme.palette.workflow.chrome;
+  if (!open) {
+    return null;
+  }
+  const accent = theme.palette.workflow.node[nodeType].accent;
+  return /* @__PURE__ */ jsxs19(
+    Paper4,
+    {
+      elevation: 0,
+      sx: {
+        width: INSPECTOR_WIDTH,
+        minWidth: INSPECTOR_WIDTH,
+        maxWidth: INSPECTOR_WIDTH,
+        p: 3,
+        backgroundColor: theme.palette.common.white,
+        borderRadius: 0,
+        boxShadow: "0px 5px 8px rgba(0, 3, 11, 0.12), 0px 0px 1px rgba(0, 3, 11, 0.24)",
+        display: "flex",
+        flexDirection: "column",
+        gap: 3,
+        ...sx
+      },
+      ...paperProps,
+      children: [
+        /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 1.25 }, children: [
+          /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx30(Typography13, { variant: "subtitle1", sx: { color: deploymentSurfaceTokens.textPrimary }, children: title }),
+            /* @__PURE__ */ jsx30(
+              IconButton8,
+              {
+                "aria-label": "Close inspector",
+                onClick: onClose,
+                sx: {
+                  border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
+                  borderRadius: 2
+                },
+                children: /* @__PURE__ */ jsx30(CloseIcon5, { fontSize: "small" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx30(Divider8, { sx: { borderColor: chrome.divider } })
+        ] }),
+        /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 3, flex: 1 }, children: [
+          /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+            /* @__PURE__ */ jsx30(
+              Typography13,
+              {
+                variant: "subtitle1",
+                sx: { color: deploymentSurfaceTokens.textPrimary, fontWeight: 500 },
+                children: nodeTitle
+              }
+            ),
+            /* @__PURE__ */ jsx30(Typography13, { variant: "body2", sx: { color: chrome.mutedText }, children: nodeDescription }),
+            /* @__PURE__ */ jsxs19(
+              Box19,
+              {
+                sx: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  alignSelf: "flex-start",
+                  gap: 1,
+                  px: 1.25,
+                  py: 0.5,
+                  borderRadius: "999px",
+                  border: `1px solid ${accent}`,
+                  backgroundColor: alpha3(accent, 0.12)
+                },
+                children: [
+                  /* @__PURE__ */ jsx30(
+                    Box19,
+                    {
+                      sx: {
+                        width: 10,
+                        height: 10,
+                        borderRadius: "50%",
+                        backgroundColor: accent
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx30(Typography13, { variant: "caption", sx: { color: accent, fontWeight: 500 }, children: WORKFLOW_NODE_LABELS[nodeType] })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx30(Divider8, { sx: { borderColor: chrome.divider } }),
+          (showInput || showOutput) && /* @__PURE__ */ jsxs19(Fragment5, { children: [
+            /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              showInput && /* @__PURE__ */ jsx30(InfoBlock, { label: "Input", value: inputValue, mutedColor: chrome.mutedText }),
+              showOutput && /* @__PURE__ */ jsx30(InfoBlock, { label: "Output", value: outputValue, mutedColor: chrome.mutedText })
+            ] }),
+            /* @__PURE__ */ jsx30(Divider8, { sx: { borderColor: chrome.divider } })
+          ] }),
+          /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+            /* @__PURE__ */ jsx30(Typography13, { variant: "body2", sx: { color: chrome.mutedText }, children: "Cubby ID" }),
+            /* @__PURE__ */ jsx30(
+              Button,
+              {
+                variant: "secondary",
+                size: "small",
+                startIcon: /* @__PURE__ */ jsx30(ContentCopyOutlinedIcon, { fontSize: "small" }),
+                onClick: onCopyCubbyId,
+                sx: { alignSelf: "flex-start" },
+                children: cubbyId
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx30(Divider8, { sx: { borderColor: chrome.divider } }),
+          (showTimestamp || showDuration) && /* @__PURE__ */ jsxs19(Fragment5, { children: [
+            /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              showTimestamp && /* @__PURE__ */ jsx30(InfoBlock, { label: "Timestamp", value: timestamp, mutedColor: chrome.mutedText }),
+              showDuration && /* @__PURE__ */ jsx30(InfoBlock, { label: "Duration", value: duration, mutedColor: chrome.mutedText })
+            ] }),
+            /* @__PURE__ */ jsx30(Divider8, { sx: { borderColor: chrome.divider } })
+          ] })
+        ] }),
+        actionLabel && /* @__PURE__ */ jsx30(Button, { variant: "primary", fullWidth: true, onClick: onAction, children: actionLabel })
+      ]
+    }
+  );
+};
+
+// src/components/layout/WorkflowTimeBar/WorkflowTimeBar.tsx
+import {
+  Box as Box20,
+  Divider as Divider9,
+  IconButton as IconButton9,
+  LinearProgress as LinearProgress2,
+  Typography as Typography14
+} from "@mui/material";
+import StopIcon from "@mui/icons-material/Stop";
+import ChevronLeftIcon2 from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon3 from "@mui/icons-material/ChevronRight";
+import ReplayIcon from "@mui/icons-material/Replay";
+import { useTheme as useTheme4 } from "@mui/material/styles";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+var SpeedButton = ({ value, selected, onClick }) => /* @__PURE__ */ jsx31(
+  Button,
+  {
+    variant: selected ? "primary" : "secondary",
+    size: "small",
+    onClick,
+    sx: {
+      minWidth: 48,
+      px: 1.5,
+      py: 0.25,
+      borderRadius: 1,
+      fontSize: 14,
+      lineHeight: 1.4
+    },
+    children: `${value}x`
+  }
+);
+var WorkflowTimeBar = ({
+  elapsedTime = "01m : 12s",
+  progress = 26,
+  currentStep = 1,
+  totalSteps = 16,
+  speedOptions = [0.5, 1, 2, 4],
+  selectedSpeed = 0.5,
+  onStop,
+  onPreviousStep,
+  onNextStep,
+  onSpeedChange,
+  onReset,
+  sx,
+  ...boxProps
+}) => {
+  const chrome = useTheme4().palette.workflow.chrome;
+  const boundedProgress = Math.max(0, Math.min(100, progress));
+  const atFirstStep = currentStep <= 1;
+  const atLastStep = currentStep >= totalSteps;
+  return /* @__PURE__ */ jsxs20(
+    Box20,
+    {
+      sx: [
+        {
+          width: "100%",
+          backgroundColor: "common.white",
+          px: 2,
+          pb: 2,
+          display: "flex",
+          flexDirection: "column",
+          gap: 2
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      ...boxProps,
+      children: [
+        /* @__PURE__ */ jsx31(Divider9, { sx: { borderColor: deploymentSurfaceTokens.strokeOutside } }),
+        /* @__PURE__ */ jsxs20(Box20, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+          /* @__PURE__ */ jsx31(
+            IconButton9,
+            {
+              onClick: onStop,
+              "aria-label": "Stop playback",
+              sx: {
+                width: 40,
+                height: 40,
+                border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
+                borderRadius: 1,
+                color: deploymentSurfaceTokens.textPrimary,
+                backgroundColor: deploymentSurfaceTokens.surfaceHigh
+              },
+              children: /* @__PURE__ */ jsx31(StopIcon, { sx: { fontSize: 16 } })
+            }
+          ),
+          /* @__PURE__ */ jsxs20(Box20, { sx: { flex: 1, minWidth: 220, px: 1 }, children: [
+            /* @__PURE__ */ jsx31(
+              Typography14,
+              {
+                variant: "body2",
+                sx: { color: deploymentSurfaceTokens.textPrimary, mb: 0.5 },
+                children: elapsedTime
+              }
+            ),
+            /* @__PURE__ */ jsx31(
+              LinearProgress2,
+              {
+                variant: "determinate",
+                value: boundedProgress,
+                sx: {
+                  height: 3,
+                  borderRadius: 999,
+                  backgroundColor: chrome.progressBg,
+                  "& .MuiLinearProgress-bar": {
+                    backgroundColor: deploymentSurfaceTokens.accentBlue
+                  }
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs20(Box20, { sx: { display: "flex", alignItems: "center", gap: 3 }, children: [
+            /* @__PURE__ */ jsxs20(Box20, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx31(Typography14, { variant: "subtitle1", sx: { fontWeight: 500 }, children: "Steps" }),
+              /* @__PURE__ */ jsx31(
+                IconButton9,
+                {
+                  size: "small",
+                  "aria-label": "Previous step",
+                  onClick: onPreviousStep,
+                  disabled: atFirstStep,
+                  sx: { backgroundColor: chrome.stepBtnBg },
+                  children: /* @__PURE__ */ jsx31(ChevronLeftIcon2, { fontSize: "small" })
+                }
+              ),
+              /* @__PURE__ */ jsx31(Typography14, { variant: "subtitle1", sx: { minWidth: 52, textAlign: "center" }, children: `${currentStep} / ${totalSteps}` }),
+              /* @__PURE__ */ jsx31(
+                IconButton9,
+                {
+                  size: "small",
+                  "aria-label": "Next step",
+                  onClick: onNextStep,
+                  disabled: atLastStep,
+                  sx: { backgroundColor: chrome.stepBtnBgHover },
+                  children: /* @__PURE__ */ jsx31(ChevronRightIcon3, { fontSize: "small" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs20(Box20, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx31(Typography14, { variant: "subtitle1", sx: { fontWeight: 500 }, children: "Speed" }),
+              speedOptions.map((option) => /* @__PURE__ */ jsx31(
+                SpeedButton,
+                {
+                  value: option,
+                  selected: option === selectedSpeed,
+                  onClick: () => onSpeedChange?.(option)
+                },
+                option
+              )),
+              /* @__PURE__ */ jsx31(IconButton9, { "aria-label": "Reset playback", onClick: onReset, size: "small", children: /* @__PURE__ */ jsx31(ReplayIcon, { fontSize: "small" }) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+export {
+  Logo,
+  Dialog,
+  KpiCard,
+  AgentAvatar,
+  NumberedList,
+  resolveDrawerWidth,
+  Drawer,
+  MetaField,
+  ScrollableRow,
+  SectionRow,
+  GRADIENT_PALETTE_COUNT,
+  GradientSurface,
+  DefinitionRow,
+  PanelDialog,
+  SplitDialogContent,
+  ListItemText,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  List,
+  ListItem,
+  Avatar,
+  Table,
+  TableHeader,
+  Grid2,
+  Breadcrumbs,
+  Accordion,
+  Paper,
+  Divider3 as Divider,
+  Stack2 as Stack,
+  Box13 as Box,
+  Container2 as Container,
+  Toolbar,
+  AppBar,
+  Collapse,
+  EntityHeader,
+  DeploymentDashboardCard,
+  DeploymentEntityContextMenu,
+  contextMenuItems,
+  DeploymentDashboardTree,
+  DeploymentDashboardPanel,
+  WorkflowTopBar,
+  WorkflowSideInspector,
+  WorkflowTimeBar
+};
+//# sourceMappingURL=chunk-CUCKULYC.mjs.map