@cere/cere-design-system 0.0.45 → 0.1.0

package/dist/chunk-HLH2VWXL.js

@@ -0,0 +1,2658 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkX7E6GMFLjs = require('./chunk-X7E6GMFL.js');
+
+
+
+var _chunkKPDYKK3Vjs = require('./chunk-KPDYKK3V.js');
+
+
+var _chunk2EBCST6Xjs = require('./chunk-2EBCST6X.js');
+
+
+var _chunkMNM6HE72js = require('./chunk-MNM6HE72.js');
+
+
+var _chunkFN5YL4BKjs = require('./chunk-FN5YL4BK.js');
+
+
+
+var _chunkZGCN5WCGjs = require('./chunk-ZGCN5WCG.js');
+
+// src/components/layout/Logo.tsx
+var _material = require('@mui/material');
+var _jsxruntime = require('react/jsx-runtime');
+var sizesMap = {
+  large: 38,
+  medium: 32,
+  small: 24
+};
+var Container = _material.styled.call(void 0, (0, _material.Stack))({
+  [`& .${_material.svgIconClasses.root}`]: {
+    fontSize: "inherit"
+  }
+});
+var Logo = ({ children, size = "medium", icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2EBCST6Xjs.CereIcon, { color: "primary" }) }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Container, { direction: "row", alignItems: "center", spacing: 2, fontSize: sizesMap[size], children: [
+  icon,
+  children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Stack, { children })
+] });
+
+// src/components/layout/Dialog.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+var _Close = require('@mui/icons-material/Close'); var _Close2 = _interopRequireDefault(_Close);
+
+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__ */ _jsxruntime.jsxs.call(void 0, 
+    _material.Dialog,
+    {
+      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__ */ _jsxruntime.jsxs.call(void 0, _material.DialogTitle, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2 }, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center" }, children: typeof title === "string" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h6", children: title }) : title }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center" }, children: [
+            headerAction,
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.IconButton,
+              {
+                edge: "end",
+                color: "inherit",
+                onClick: handleCloseAttempt,
+                "aria-label": "close",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {})
+              }
+            )
+          ] })
+        ] }),
+        dividers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, {}),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { dividers, children }),
+        (showActions || customActions) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          dividers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { children: customActions || /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.Button,
+              {
+                onClick: handleCloseAttempt,
+                disabled: isLoading,
+                children: cancelLabel
+              }
+            ),
+            onSubmit && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.Button,
+              {
+                variant: "contained",
+                color: "primary",
+                onClick: onSubmit,
+                disabled: disableSubmit || isLoading,
+                startIcon: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { size: 20 }) : void 0,
+                children: submitLabel
+              }
+            )
+          ] }) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/layout/KpiCard.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react); var React3 = _interopRequireWildcard(_react);
+var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
+var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
+
+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 _nullishCoalesce(_optionalChain([theme, 'access', _2 => _2.palette, 'access', _3 => _3.secondary, 'optionalAccess', _4 => _4.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__ */ _jsxruntime.jsxs.call(void 0, 
+      _Box2.default,
+      {
+        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__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+            icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { display: "inline-flex", color: "text.secondary" }, children: icon }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "eyebrow", component: "span", children: label })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "panelTitle", component: "div", children: value }),
+          sub && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", sx: { color: "text.secondary" }, children: sub })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/layout/AgentAvatar.tsx
+
+
+
+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,
+  _nullishCoalesce(_optionalChain([theme, 'access', _5 => _5.palette, 'access', _6 => _6.secondary, 'optionalAccess', _7 => _7.main]), () => ( theme.palette.primary.main))
+];
+var AgentAvatar = React2.forwardRef(
+  function AgentAvatar2({ seed, name, size = 40, shadow = false, iconUrl, ariaLabel, ...rest }, ref) {
+    const initial = (_nullishCoalesce(_optionalChain([name, 'optionalAccess', _8 => _8.trim, 'call', _9 => _9(), 'optionalAccess', _10 => _10[0]]), () => ( "?"))).toUpperCase();
+    const radius = Math.round(size * 0.28);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Box2.default,
+      {
+        ref,
+        role: "img",
+        "aria-label": _nullishCoalesce(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__ */ _jsxruntime.jsx.call(void 0, 
+          _Box2.default,
+          {
+            component: "img",
+            src: iconUrl,
+            alt: "",
+            sx: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "aria-hidden": "true", children: initial })
+      }
+    );
+  }
+);
+
+// src/components/layout/NumberedList.tsx
+
+
+
+
+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: _nullishCoalesce(_optionalChain([theme, 'access', _11 => _11.palette, 'access', _12 => _12.secondary, 'optionalAccess', _13 => _13.light]), () => ( theme.palette.primary.light)),
+        fg: _nullishCoalesce(_optionalChain([theme, 'access', _14 => _14.palette, 'access', _15 => _15.secondary, 'optionalAccess', _16 => _16.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__ */ _jsxruntime.jsx.call(void 0, 
+      _Box2.default,
+      {
+        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__ */ _jsxruntime.jsxs.call(void 0, 
+          _Box2.default,
+          {
+            component: "li",
+            sx: { display: "flex", alignItems: "flex-start", gap: 1.5 },
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _Box2.default,
+                {
+                  "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__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "subtitle1", component: "div", children: item.title }),
+                item.detail && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _Typography2.default,
+                  {
+                    variant: "body2",
+                    component: "div",
+                    sx: { color: "text.secondary", mt: 0.25 },
+                    children: item.detail
+                  }
+                )
+              ] }),
+              item.cta && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { flexShrink: 0 }, children: item.cta })
+            ]
+          },
+          `${idx}-${item.title}`
+        ))
+      }
+    );
+  }
+);
+
+// src/components/layout/Drawer.tsx
+
+var _Drawer = require('@mui/material/Drawer'); var _Drawer2 = _interopRequireDefault(_Drawer);
+var _styles = require('@mui/material/styles');
+
+
+
+// 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 = _nullishCoalesce(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
+
+var StyledDrawer = _styles.styled.call(void 0, _Drawer2.default, {
+  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 = React.default.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 = _nullishCoalesce(width, () => ( defaultWidth));
+  const shouldShowClose = _nullishCoalesce(showCloseButton, () => ( (variant === "temporary" || variant === "persistent")));
+  const hasHeader = title || header || shouldShowClose || tabs;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                p: 2,
+                minHeight: 64,
+                borderBottom: 1,
+                borderColor: "divider"
+              },
+              children: header || /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { flex: 1 }, children: typeof title === "string" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h6", children: title }) : title }),
+                shouldShowClose && onClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _material.IconButton,
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onClose(e, "backdropClick");
+                    },
+                    size: "small",
+                    sx: { ml: 1 },
+                    "aria-label": "close",
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {})
+                  }
+                )
+              ] })
+            }
+          ),
+          tabs && tabs.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.Tabs,
+            {
+              value: activeTab,
+              onChange: (_, newValue) => _optionalChain([onTabChange, 'optionalCall', _17 => _17(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__ */ _jsxruntime.jsx.call(void 0, _material.Tab, { label: tab }, index))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Box,
+          {
+            sx: {
+              flex: 1,
+              overflow: "auto",
+              display: "flex",
+              flexDirection: "column"
+            },
+            ...contentProps,
+            children
+          }
+        ),
+        footer && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.Box,
+            {
+              sx: {
+                p: 2,
+                borderTop: 1,
+                borderColor: "divider"
+              },
+              children: footer
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/layout/MetaField.tsx
+
+
+
+
+var MetaField = React.default.forwardRef(function MetaField2({ label, value, mono = false, title }, ref) {
+  const resolvedTitle = _nullishCoalesce(title, () => ( (typeof value === "string" ? value : void 0)));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { ref, sx: { display: "flex", flexDirection: "column", gap: 0.25, minWidth: 0 }, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Typography2.default,
+      {
+        variant: "caption",
+        sx: {
+          color: "text.secondary",
+          textTransform: "uppercase",
+          letterSpacing: 0.4,
+          fontSize: 10,
+          fontWeight: 600
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Typography2.default,
+      {
+        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
+
+
+var _IconButton = require('@mui/material/IconButton'); var _IconButton2 = _interopRequireDefault(_IconButton);
+var _ChevronLeft = require('@mui/icons-material/ChevronLeft'); var _ChevronLeft2 = _interopRequireDefault(_ChevronLeft);
+var _ChevronRight = require('@mui/icons-material/ChevronRight'); var _ChevronRight2 = _interopRequireDefault(_ChevronRight);
+
+var EDGE_TOLERANCE_PX = 4;
+var ScrollableRow = ({
+  children,
+  leftLabel = "Scroll left",
+  rightLabel = "Scroll right",
+  minNudge = 160,
+  nudgeFraction = 0.6
+}) => {
+  const scrollerRef = _react.useRef.call(void 0, null);
+  const [canLeft, setCanLeft] = _react.useState.call(void 0, false);
+  const [canRight, setCanRight] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    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;
+    _optionalChain([ro, 'optionalAccess', _18 => _18.observe, 'call', _19 => _19(el)]);
+    for (const c of Array.from(el.children)) _optionalChain([ro, 'optionalAccess', _20 => _20.observe, 'call', _21 => _21(c)]);
+    const mo = typeof MutationObserver !== "undefined" ? new MutationObserver(() => {
+      for (const c of Array.from(el.children)) _optionalChain([ro, 'optionalAccess', _22 => _22.observe, 'call', _23 => _23(c)]);
+      update();
+    }) : null;
+    _optionalChain([mo, 'optionalAccess', _24 => _24.observe, 'call', _25 => _25(el, { childList: true })]);
+    return () => {
+      el.removeEventListener("scroll", update);
+      _optionalChain([ro, 'optionalAccess', _26 => _26.disconnect, 'call', _27 => _27()]);
+      _optionalChain([mo, 'optionalAccess', _28 => _28.disconnect, 'call', _29 => _29()]);
+    };
+  }, []);
+  const nudge = (dir) => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    el.scrollBy({ left: dir * Math.max(minNudge, el.clientWidth * nudgeFraction), behavior: "smooth" });
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { sx: { position: "relative", flex: 1, minWidth: 0 }, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Box2.default,
+      {
+        ref: scrollerRef,
+        "data-scrollable-row-scroller": true,
+        sx: {
+          display: "flex",
+          gap: 1,
+          overflowX: "auto",
+          overflowY: "hidden",
+          scrollbarWidth: "thin",
+          py: 0.25
+        },
+        children
+      }
+    ),
+    canLeft && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _IconButton2.default,
+      {
+        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__ */ _jsxruntime.jsx.call(void 0, _ChevronLeft2.default, { fontSize: "small" })
+      }
+    ),
+    canRight && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _IconButton2.default,
+      {
+        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__ */ _jsxruntime.jsx.call(void 0, _ChevronRight2.default, { fontSize: "small" })
+      }
+    )
+  ] });
+};
+
+// src/components/layout/SectionRow.tsx
+
+
+
+
+var SectionRow = React.default.forwardRef(function SectionRow2({ title, subtitle, action, leftLabel, rightLabel, children }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { ref, component: "section", sx: { mb: 4 }, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _Box2.default,
+      {
+        component: "header",
+        sx: {
+          display: "flex",
+          alignItems: "flex-end",
+          justifyContent: "space-between",
+          gap: 1.5,
+          mb: 1.5
+        },
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { sx: { minWidth: 0 }, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { component: "h2", variant: "h6", sx: { m: 0 }, children: title }),
+            subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "caption", sx: { color: "text.secondary" }, children: subtitle })
+          ] }),
+          action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: action })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollableRow, { leftLabel, rightLabel, children })
+  ] });
+});
+
+// src/components/layout/GradientSurface.tsx
+
+
+
+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 = React.default.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__ */ _jsxruntime.jsx.call(void 0, 
+      _Box2.default,
+      {
+        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
+
+
+
+
+var DefinitionRow = React.default.forwardRef(
+  function DefinitionRow2({ icon, label, sublabel, value, hint, dense = false, divider = true }, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _Box2.default,
+      {
+        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__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { display: "flex", alignItems: "center", color: "text.secondary" }, children: icon }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { sx: { minWidth: 0, flex: 1 }, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", sx: { fontWeight: 500, lineHeight: 1.2 }, children: label }),
+            sublabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "caption", sx: { color: "text.secondary" }, children: sublabel })
+          ] }),
+          (value || hint) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _Box2.default,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-end",
+                textAlign: "right"
+              },
+              children: [
+                value && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", sx: { color: "text.secondary" }, children: value }),
+                hint && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "caption", sx: { color: "text.disabled" }, children: hint })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/components/layout/PanelDialog.tsx
+
+var _Dialog = require('@mui/material/Dialog'); var _Dialog2 = _interopRequireDefault(_Dialog);
+
+
+
+var _Slide = require('@mui/material/Slide'); var _Slide2 = _interopRequireDefault(_Slide);
+
+
+var WIDTH_PX = {
+  sm: 420,
+  md: 640,
+  lg: 880,
+  xl: 1080
+};
+var SlideLeft = _react.forwardRef.call(void 0, 
+  function SlideLeft2(props, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Slide2.default, { direction: "left", ref, ...props });
+  }
+);
+var SlideUp = _react.forwardRef.call(void 0, 
+  function SlideUp2(props, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Slide2.default, { direction: "up", ref, ...props });
+  }
+);
+function PanelDialog({
+  open,
+  onClose,
+  title,
+  headerActions,
+  width = "md",
+  side = "right",
+  ariaLabel,
+  hideHeader = false,
+  paperSx,
+  backdropSx,
+  transition,
+  children
+}) {
+  const accessibleName = _nullishCoalesce(ariaLabel, () => ( (typeof title === "string" ? title : void 0)));
+  const isRight = side === "right";
+  const resolvedTransition = _nullishCoalesce(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__ */ _jsxruntime.jsxs.call(void 0, 
+    _Dialog2.default,
+    {
+      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__ */ _jsxruntime.jsxs.call(void 0, 
+          _Box2.default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 1,
+              px: 2,
+              py: 1.5,
+              borderBottom: "1px solid",
+              borderColor: "divider"
+            },
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { display: "flex", alignItems: "center", minWidth: 0 }, children: typeof title === "string" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "h6", noWrap: true, children: title }) : title }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                headerActions,
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IconButton2.default, { "aria-label": "Close", onClick: onClose, edge: "end", size: "small", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, { fontSize: "small" }) })
+              ] })
+            ]
+          }
+        ),
+        hideHeader && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _IconButton2.default,
+          {
+            "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__ */ _jsxruntime.jsx.call(void 0, _Close2.default, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { flex: 1, overflow: "auto", minHeight: 0 }, children })
+      ]
+    }
+  );
+}
+
+// src/components/layout/SplitDialogContent.tsx
+
+
+
+var SplitDialogContent = React.default.forwardRef(
+  function SplitDialogContent2({ left, right, rightWidth = 320, collapseBelow = 860, sx }, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _Box2.default,
+      {
+        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__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { display: "flex", flexDirection: "column", gap: "22px", minWidth: 0 }, children: left }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { component: "aside", sx: { display: "flex", flexDirection: "column", gap: "14px" }, children: right })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/layout/List.tsx
+
+
+
+
+
+
+
+
+
+
+var List = React.default.forwardRef(function List2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.List, { ref, ...props });
+});
+var StyledListItem = _styles.styled.call(void 0, _material.ListItem, {
+  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 = React.default.forwardRef(function ListItem2({ primary, secondary, icon, action, hoverable = true, children, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledListItem, { ref, hoverable, ...props, children: [
+    icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemIcon, { children: icon }),
+    (primary || secondary) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.ListItemText,
+      {
+        primary,
+        secondary
+      }
+    ),
+    children,
+    action && action
+  ] });
+});
+
+// src/components/layout/Avatar.tsx
+
+var _Avatar = require('@mui/material/Avatar'); var _Avatar2 = _interopRequireDefault(_Avatar);
+
+
+var sizeMap = {
+  small: 32,
+  medium: 40,
+  large: 56
+};
+var StyledAvatar = _styles.styled.call(void 0, _Avatar2.default, {
+  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 = React.default.forwardRef(function Avatar2({ size = "medium", ...props }, ref) {
+  const avatarSize = typeof size === "number" ? size : sizeMap[size];
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledAvatar, { ref, avatarSize, ...props });
+});
+
+// src/components/layout/Table.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+var StyledTableContainer = _styles.styled.call(void 0, (0, _material.TableContainer))(({ theme }) => ({
+  borderRadius: 8,
+  border: `1px solid ${theme.palette.grey[200]}`
+}));
+var StyledTableHead = _styles.styled.call(void 0, (0, _material.TableHead))(({ theme }) => ({
+  backgroundColor: theme.palette.grey[50],
+  "& .MuiTableCell-head": {
+    fontWeight: 600,
+    color: theme.palette.text.primary
+  }
+}));
+var Table = React.default.forwardRef(function Table2({ stickyHeader = false, children, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTableContainer, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Table, { ref, stickyHeader, ...props, children }) });
+});
+var TableHeader = React.default.forwardRef(
+  function TableHeader2({ columns, orderBy, order = "asc", onSort }, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTableHead, { ref, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.TableRow, { children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.TableCell, { align: column.align || "left", children: column.sortable && onSort ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.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
+
+
+// src/components/layout/Breadcrumbs.tsx
+
+var _Breadcrumbs = require('@mui/material/Breadcrumbs'); var _Breadcrumbs2 = _interopRequireDefault(_Breadcrumbs);
+var _Link = require('@mui/material/Link'); var _Link2 = _interopRequireDefault(_Link);
+
+
+
+var StyledBreadcrumbs = _styles.styled.call(void 0, (0, _Breadcrumbs2.default))(({ theme }) => ({
+  "& .MuiBreadcrumbs-ol": {
+    flexWrap: "nowrap"
+  },
+  "& .MuiBreadcrumbs-separator": {
+    color: theme.palette.text.secondary
+  }
+}));
+var StyledLink = _styles.styled.call(void 0, (0, _Link2.default))(({ theme }) => ({
+  color: theme.palette.primary.main,
+  textDecoration: "none",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+}));
+var Breadcrumbs = React.default.forwardRef(function Breadcrumbs2({ items, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledBreadcrumbs, { ref, ...props, children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    if (isLast || !item.href && !item.onClick) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { color: "text.primary", children: item.label }, index);
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      StyledLink,
+      {
+        href: item.href,
+        onClick: (e) => {
+          if (item.onClick) {
+            e.preventDefault();
+            item.onClick();
+          }
+        },
+        children: item.label
+      },
+      index
+    );
+  }) });
+});
+
+// src/components/layout/Accordion.tsx
+
+
+
+
+
+
+var _ExpandMore = require('@mui/icons-material/ExpandMore'); var _ExpandMore2 = _interopRequireDefault(_ExpandMore);
+
+
+var StyledAccordion = _styles.styled.call(void 0, (0, _material.Accordion))(({ theme }) => ({
+  borderRadius: 8,
+  boxShadow: "none",
+  border: `1px solid ${theme.palette.grey[200]}`,
+  "&:before": {
+    display: "none"
+  },
+  "&.Mui-expanded": {
+    margin: 0
+  }
+}));
+var StyledAccordionSummary = _styles.styled.call(void 0, (0, _material.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 = _styles.styled.call(void 0, (0, _material.AccordionDetails))({
+  padding: "16px"
+});
+var Accordion = React.default.forwardRef(function Accordion2({ title, children, defaultExpanded = false, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledAccordion, { ref, defaultExpanded, ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledAccordionSummary, { expandIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ExpandMore2.default, {}), children: title }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledAccordionDetails, { children })
+  ] });
+});
+
+// src/components/layout/Paper.tsx
+
+var _Paper = require('@mui/material/Paper'); var _Paper2 = _interopRequireDefault(_Paper);
+
+
+var StyledPaper = _styles.styled.call(void 0, (0, _Paper2.default))(({ 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 = React.default.forwardRef(function Paper2({ variant = "elevation", ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledPaper,
+    {
+      ref,
+      variant,
+      elevation: variant === "elevation" ? 1 : 0,
+      ...props
+    }
+  );
+});
+
+// src/components/layout/Divider.tsx
+
+var _Divider = require('@mui/material/Divider'); var _Divider2 = _interopRequireDefault(_Divider);
+
+
+var StyledDivider = _styles.styled.call(void 0, (0, _Divider2.default))(({ theme }) => ({
+  borderColor: theme.palette.grey[200]
+}));
+var Divider3 = React.default.forwardRef(function Divider4(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledDivider, { ref, ...props });
+});
+
+// src/components/layout/Stack.tsx
+
+
+// src/components/layout/Box.tsx
+
+
+// src/components/layout/Container.tsx
+
+
+// src/components/layout/AppBar.tsx
+
+
+
+
+
+
+var StyledAppBar = _styles.styled.call(void 0, _material.AppBar, {
+  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 = _styles.styled.call(void 0, (0, _material.Toolbar))(({ theme }) => ({
+  height: "100%",
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  gap: theme.spacing(2)
+}));
+var AppBar = ({ height = 64, children, ...props }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledAppBar, { position: "fixed", appBarHeight: height, ...props, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledToolbar, { children }) });
+};
+
+// src/components/layout/Collapse.tsx
+
+
+
+
+
+var Collapse = React.default.forwardRef(function Collapse2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Collapse, { ref, ...props });
+});
+
+// src/components/layout/EntityHeader/EntityHeader.tsx
+
+
+
+
+
+var _MoreHoriz = require('@mui/icons-material/MoreHoriz'); var _MoreHoriz2 = _interopRequireDefault(_MoreHoriz);
+
+var EntityHeader = React.default.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__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { ref, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _Box2.default,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            px: 3,
+            py: 2,
+            gap: 1
+          },
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              _Box2.default,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  flexWrap: "wrap"
+                },
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                    _Box2.default,
+                    {
+                      sx: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 0.5
+                      },
+                      children: [
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                          _Typography2.default,
+                          {
+                            component: headingLevel,
+                            sx: {
+                              fontSize: "16px",
+                              fontWeight: 500,
+                              lineHeight: "24px",
+                              letterSpacing: "0.15px",
+                              color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary
+                            },
+                            children: title
+                          }
+                        ),
+                        subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                          _Typography2.default,
+                          {
+                            variant: "body2",
+                            sx: {
+                              fontSize: "11px",
+                              fontWeight: 500,
+                              lineHeight: "16px",
+                              letterSpacing: "0.5px",
+                              color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textSecondary
+                            },
+                            children: subtitle
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  role && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKPDYKK3Vjs.RoleBadge, { label: role, color: "primary", size: "small" }),
+                  id && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKPDYKK3Vjs.IDBlock, { id, label: "ID", entityType: "entity", onCopy: onCopyId })
+                ]
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              _Box2.default,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  flexShrink: 0
+                },
+                children: [
+                  startActions,
+                  primaryAction && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _chunkMNM6HE72js.Button,
+                    {
+                      variant: "primary",
+                      startIcon: primaryAction.icon,
+                      onClick: primaryAction.onClick,
+                      sx: {
+                        textTransform: "capitalize"
+                      },
+                      children: getPrimaryActionLabel()
+                    }
+                  ),
+                  endActions,
+                  onMoreOptions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _IconButton2.default,
+                    {
+                      onClick: onMoreOptions,
+                      size: "small",
+                      "aria-label": "More options",
+                      sx: {
+                        padding: "8px",
+                        border: `1px solid ${_chunkFN5YL4BKjs.deploymentSurfaceTokens.strokeOutside}`,
+                        borderRadius: "8px",
+                        "&:hover": {
+                          backgroundColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.hoverOverlay,
+                          borderColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.borderDefault
+                        }
+                      },
+                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        _MoreHoriz2.default,
+                        {
+                          sx: {
+                            fontSize: "20px",
+                            color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textSecondary
+                          }
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      divider && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _Divider2.default,
+        {
+          sx: {
+            borderColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.strokeOutside
+          }
+        }
+      )
+    ] });
+  }
+);
+
+// src/components/layout/DeploymentDashboardCard/DeploymentDashboardCard.tsx
+
+
+
+
+
+
+
+
+
+
+var _WorkOutline = require('@mui/icons-material/WorkOutline'); var _WorkOutline2 = _interopRequireDefault(_WorkOutline);
+var _Waves = require('@mui/icons-material/Waves'); var _Waves2 = _interopRequireDefault(_Waves);
+var _RocketLaunchOutlined = require('@mui/icons-material/RocketLaunchOutlined'); var _RocketLaunchOutlined2 = _interopRequireDefault(_RocketLaunchOutlined);
+var _InsertLink = require('@mui/icons-material/InsertLink'); var _InsertLink2 = _interopRequireDefault(_InsertLink);
+var _SmartToyOutlined = require('@mui/icons-material/SmartToyOutlined'); var _SmartToyOutlined2 = _interopRequireDefault(_SmartToyOutlined);
+
+
+// src/hooks/useControlledExpand.ts
+
+function useControlledExpand(controlledExpanded, onToggle, defaultExpanded = false) {
+  const [internal, setInternal] = _react.useState.call(void 0, 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
+
+var ENTITY_LABELS = {
+  workspace: "Workspace",
+  stream: "Stream",
+  deployment: "Deployment",
+  engagement: "Engagement",
+  agent: "Agent"
+};
+var ENTITY_ICON_SIZE = 16;
+var ENTITY_ICONS = {
+  workspace: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WorkOutline2.default, { sx: { fontSize: ENTITY_ICON_SIZE } }),
+  stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Waves2.default, { sx: { fontSize: ENTITY_ICON_SIZE } }),
+  deployment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RocketLaunchOutlined2.default, { sx: { fontSize: ENTITY_ICON_SIZE } }),
+  engagement: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InsertLink2.default, { sx: { fontSize: ENTITY_ICON_SIZE } }),
+  agent: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SmartToyOutlined2.default, { sx: { fontSize: ENTITY_ICON_SIZE } })
+};
+var STATUS_DOT_COLORS = {
+  normal: _chunkZGCN5WCGjs.deploymentStatusColors.normal,
+  warning: _chunkZGCN5WCGjs.deploymentStatusColors.warning,
+  error: _chunkZGCN5WCGjs.deploymentStatusColors.error,
+  disabled: _chunkZGCN5WCGjs.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 = _styles.styled.call(void 0, _material.Box, {
+  shouldForwardProp: (p) => p !== "status"
+})(({ status }) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  backgroundColor: status ? _nullishCoalesce(STATUS_DOT_COLORS[status], () => ( "transparent")) : "transparent",
+  flexShrink: 0
+}));
+var EntityChip = ({ entityType, color }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  _material.Box,
+  {
+    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: _chunkFN5YL4BKjs.deploymentSurfaceTokens.surfaceHigh,
+      border: `${ENTITY_CHIP_STYLES.borderWidth} solid ${color}`,
+      flexShrink: 0
+    },
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { color, display: "flex", alignItems: "center" }, children: ENTITY_ICONS[entityType] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.Typography,
+        {
+          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__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { pl: indented ? "40px" : 0, pr: "20px", py: 1 }, children: [
+  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", justifyContent: "space-between", mb: 1 }, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", sx: { color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary }, children: "Capacity" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Typography, { variant: "body2", sx: { color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.accentBlue }, children: [
+      value,
+      "%"
+    ] })
+  ] }),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.LinearProgress,
+    {
+      variant: "determinate",
+      value,
+      sx: {
+        height: 4,
+        borderRadius: "20px",
+        backgroundColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.strokeOutside,
+        "& .MuiLinearProgress-bar": {
+          borderRadius: "20px",
+          backgroundColor: _chunkFN5YL4BKjs.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: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary,
+    whiteSpace: "nowrap",
+    "&:hover": action.onClick ? { opacity: 0.7 } : void 0
+  };
+  const variantStyles = action.outlined ? {
+    border: `1px solid ${_chunkFN5YL4BKjs.deploymentSurfaceTokens.strokeOutside}`,
+    borderRadius: "8px",
+    p: 1,
+    bgcolor: "white"
+  } : {
+    border: "none",
+    p: 0
+  };
+  return { ...baseStyles, ...variantStyles };
+};
+var CardAction = ({ action }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  _material.Box,
+  {
+    component: action.onClick ? "button" : "span",
+    onClick: action.onClick,
+    sx: getActionButtonStyles(action),
+    children: [
+      action.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { component: "span", sx: { display: "flex", alignItems: "center" }, children: action.icon }),
+      action.label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", fontWeight: 500, component: "span", sx: { fontSize: "14px" }, children: action.label })
+    ]
+  }
+);
+var CardActionList = ({ actions }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: actions.map((action) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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 = _material.useTheme.call(void 0, );
+  const entityColor = _nullishCoalesce(_optionalChain([theme, 'access', _30 => _30.palette, 'access', _31 => _31.deployment, 'optionalAccess', _32 => _32.entity, 'optionalAccess', _33 => _33[entityType]]), () => ( _chunkZGCN5WCGjs.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__ */ _jsxruntime.jsxs.call(void 0, 
+    _material.Paper,
+    {
+      className,
+      elevation: 0,
+      sx: {
+        border: `1px solid ${isWorkspace ? _chunkFN5YL4BKjs.deploymentSurfaceTokens.accentBlue : _chunkFN5YL4BKjs.deploymentSurfaceTokens.borderDefault}`,
+        borderRadius: isWorkspace ? "4px" : "12px",
+        boxShadow: isWorkspace ? _chunkFN5YL4BKjs.deploymentSurfaceTokens.workspaceShadow : "none",
+        px: 1,
+        py: isDeployment ? 2 : 1,
+        pl: 1,
+        display: "flex",
+        flexDirection: "column",
+        gap: 0
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _material.Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: isDeployment ? "flex-start" : "center",
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", flexDirection: "column", gap: 0.5, minWidth: 0 }, children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
+                  expandable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _material.IconButton,
+                    {
+                      size: "small",
+                      onClick: toggle,
+                      "aria-label": expanded ? "Collapse" : "Expand",
+                      sx: { p: "5px" },
+                      children: expanded ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ExpandMore2.default, { sx: { fontSize: CHEVRON_SIZE, color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.accentBlue } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ChevronRight2.default, { sx: { fontSize: CHEVRON_SIZE, color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.accentBlue } })
+                    }
+                  ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { width: 26, flexShrink: 0 } }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EntityChip, { entityType, color: entityColor }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _material.Typography,
+                    {
+                      variant: "subtitle1",
+                      fontWeight: 500,
+                      noWrap: true,
+                      sx: { color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary, fontSize: "16px", letterSpacing: "0.08px" },
+                      children: title
+                    }
+                  ),
+                  idDisplay != null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKPDYKK3Vjs.IDBlock, { id: idDisplay, label: "ID", entityType, onCopy: onCopyId })
+                ] }),
+                (createdAt != null || updatedAt != null) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  _material.Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      gap: 2,
+                      px: "34px",
+                      color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textSecondary
+                    },
+                    children: [
+                      createdAt != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Typography, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
+                        "Created: ",
+                        createdAt
+                      ] }),
+                      updatedAt != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Typography, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
+                        "Last Updated: ",
+                        updatedAt
+                      ] })
+                    ]
+                  }
+                ),
+                capacityClamped !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CapacityBar, { value: capacityClamped, indented: expandable })
+              ] }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", gap: 1, alignItems: "center", flexShrink: 0 }, children: [
+                statusIndicator != null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StatusDot, { status: statusIndicator, "aria-hidden": true }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardActionList, { actions })
+              ] })
+            ]
+          }
+        ),
+        children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { mt: 1.5, display: "flex", flexDirection: "column", gap: 1 }, children })
+      ]
+    }
+  );
+};
+
+// src/components/layout/DeploymentEntityContextMenu/DeploymentEntityContextMenu.tsx
+
+
+
+var StyledMenu = _styles.styled.call(void 0, (0, _material.Menu))({
+  "& .MuiPaper-root": {
+    borderRadius: 4,
+    boxShadow: _chunkFN5YL4BKjs.deploymentSurfaceTokens.workspaceShadow,
+    minWidth: 220,
+    border: `1px solid ${_chunkFN5YL4BKjs.deploymentSurfaceTokens.strokeOutside}`,
+    padding: 8
+  },
+  "& .MuiList-root": {
+    padding: 0
+  }
+});
+var StyledMenuItem = _styles.styled.call(void 0, (0, _material.MenuItem))({
+  gap: 8,
+  padding: "8px 0",
+  borderRadius: 4,
+  minHeight: "auto",
+  "&:hover": {
+    backgroundColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.hoverLight
+  },
+  "& .MuiListItemIcon-root": {
+    minWidth: "auto",
+    color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary,
+    "& .MuiSvgIcon-root": {
+      fontSize: 24
+    }
+  },
+  "& .MuiListItemText-root .MuiTypography-root": {
+    fontSize: 16,
+    fontWeight: 500,
+    lineHeight: 1.5,
+    letterSpacing: "0.08px",
+    color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary
+  }
+});
+var HighlightedMenuItem = _styles.styled.call(void 0, StyledMenuItem)({
+  backgroundColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.highlightBg,
+  border: `1px solid ${_chunkFN5YL4BKjs.deploymentSurfaceTokens.highlightBorder}`,
+  padding: 8,
+  "&:hover": {
+    backgroundColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.highlightBgHover
+  }
+});
+var ToggleMenuItem = _styles.styled.call(void 0, (0, _material.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: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary
+  }
+});
+var EnableSwitch = _styles.styled.call(void 0, (0, _material.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: _chunkFN5YL4BKjs.deploymentSurfaceTokens.switchGreen,
+        opacity: 1
+      }
+    }
+  },
+  "& .MuiSwitch-thumb": {
+    width: 16,
+    height: 16
+  },
+  "& .MuiSwitch-track": {
+    borderRadius: 100,
+    backgroundColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.switchTrackOff,
+    opacity: 1
+  }
+}));
+var StyledDivider2 = _styles.styled.call(void 0, (0, _material.Divider))({
+  margin: "0 !important",
+  borderColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.strokeOutside
+});
+var DeploymentEntityContextMenu = ({
+  open,
+  anchorEl,
+  onClose,
+  items,
+  enableToggle = false,
+  enableChecked = false,
+  onEnableChange
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    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__ */ _jsxruntime.jsx.call(void 0, StyledDivider2, {}, item.id);
+          }
+          if (item.type === "toggle") {
+            return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ToggleMenuItem, { disableRipple: true, children: [
+              onEnableChange && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                EnableSwitch,
+                {
+                  size: "small",
+                  checked: enableChecked,
+                  onChange: (_, checked) => onEnableChange(checked),
+                  inputProps: { "aria-label": item.label }
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemText, { primary: item.label })
+            ] }, item.id);
+          }
+          const Row = item.highlighted ? HighlightedMenuItem : StyledMenuItem;
+          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            Row,
+            {
+              onClick: () => {
+                _optionalChain([item, 'access', _34 => _34.onClick, 'optionalCall', _35 => _35()]);
+                onClose();
+              },
+              children: [
+                item.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemIcon, { children: item.icon }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemText, { primary: item.label })
+              ]
+            },
+            item.id
+          );
+        }),
+        enableToggle && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledDivider2, {}),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ToggleMenuItem, { disableRipple: true, children: [
+            onEnableChange && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              EnableSwitch,
+              {
+                size: "small",
+                checked: enableChecked,
+                onChange: (_, checked) => onEnableChange(checked),
+                inputProps: { "aria-label": "Enable" }
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemText, { primary: "Enable" })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/layout/DeploymentEntityContextMenu/contextMenuItems.tsx
+var _AddCircleOutline = require('@mui/icons-material/AddCircleOutline'); var _AddCircleOutline2 = _interopRequireDefault(_AddCircleOutline);
+var _Edit = require('@mui/icons-material/Edit'); var _Edit2 = _interopRequireDefault(_Edit);
+var _ContentCopy = require('@mui/icons-material/ContentCopy'); var _ContentCopy2 = _interopRequireDefault(_ContentCopy);
+
+var _Description = require('@mui/icons-material/Description'); var _Description2 = _interopRequireDefault(_Description);
+var _Settings = require('@mui/icons-material/Settings'); var _Settings2 = _interopRequireDefault(_Settings);
+
+var contextMenuItems = {
+  /** Add Engagement action (Add Circle icon) */
+  addEngagement: (onClick) => ({
+    id: "add-engagement",
+    label: "Add Engagement",
+    icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _AddCircleOutline2.default, {}),
+    onClick
+  }),
+  /** Add Agent action (Add Circle icon) */
+  addAgent: (onClick) => ({
+    id: "add-agent",
+    label: "Add Agent",
+    icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _AddCircleOutline2.default, {}),
+    onClick
+  }),
+  /** Add Stream action (Add Circle icon) */
+  addStream: (onClick) => ({
+    id: "add-stream",
+    label: "Add Stream",
+    icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _AddCircleOutline2.default, {}),
+    onClick
+  }),
+  /** Edit action (Pen / Edit icon) */
+  edit: (onClick) => ({
+    id: "edit",
+    label: "Edit",
+    icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Edit2.default, {}),
+    onClick
+  }),
+  /** Copy ID action (Copy icon) */
+  copyId: (onClick) => ({
+    id: "copy-id",
+    label: "Copy ID",
+    icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ContentCopy2.default, {}),
+    onClick
+  }),
+  /** Agent Flow Visualization — highlighted action (SmartToy icon) */
+  agentFlowVisualization: (onClick) => ({
+    id: "agent-flow",
+    label: "Agent Flow Visualization",
+    icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SmartToyOutlined2.default, {}),
+    onClick,
+    highlighted: true
+  }),
+  /** View Logs action (Document / Description icon) */
+  viewLogs: (onClick) => ({
+    id: "view-logs",
+    label: "View Logs",
+    icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Description2.default, {}),
+    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__ */ _jsxruntime.jsx.call(void 0, _Settings2.default, {}),
+    onClick
+  })
+};
+
+// src/components/layout/DeploymentDashboardTree/DeploymentDashboardTree.tsx
+
+
+
+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 = _styles.styled.call(void 0, _material.Box, {
+  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,
+    _nullishCoalesce(node.expanded, () => ( false))
+  );
+  const entityColor = _nullishCoalesce(_chunkZGCN5WCGjs.deploymentEntityColors[node.entityType], () => ( _chunkZGCN5WCGjs.deploymentEntityColors.workspace));
+  const railOpacity = _nullishCoalesce(RAIL_OPACITY[node.entityType], () => ( 0.5));
+  const railColor = _styles.alpha.call(void 0, entityColor, railOpacity);
+  const renderedChildren = hasChildren && expanded ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", gap: `${TREE_SP.railGap}px` }, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Rail, { railColor, "aria-hidden": true, "data-rail": true }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Box,
+      {
+        role: "group",
+        sx: {
+          flex: 1,
+          minWidth: 0,
+          display: "flex",
+          flexDirection: "column",
+          gap: `${TREE_SP.rowGap}px`
+        },
+        children: node.children.map((child) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          TreeRow,
+          {
+            node: child,
+            depth: depth + 1,
+            onExpandToggle,
+            onCopyId,
+            renderCard
+          },
+          child.id
+        ))
+      }
+    )
+  ] }) : null;
+  const cardContent = _nullishCoalesce(_optionalChain([renderCard, 'optionalCall', _36 => _36(node)]), () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    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__ */ _jsxruntime.jsx.call(void 0, _material.Box, { role: "treeitem", children: cardContent });
+};
+var DeploymentDashboardTree = ({
+  nodes,
+  onExpandToggle,
+  onCopyId,
+  renderCard
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Box,
+    {
+      role: "tree",
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: `${TREE_SP.rowGap}px`,
+        p: `${TREE_SP.rowGap}px`
+      },
+      children: nodes.map((node) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        TreeRow,
+        {
+          node,
+          depth: 0,
+          onExpandToggle,
+          onCopyId,
+          renderCard
+        },
+        node.id
+      ))
+    }
+  );
+};
+
+// src/components/layout/DeploymentDashboardPanel/DeploymentDashboardPanel.tsx
+
+
+
+var PANEL_RADIUS = 12;
+var PANEL_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.08)";
+var StyledPanel = _styles.styled.call(void 0, (0, _material.Box))({
+  backgroundColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.surfaceHigh,
+  border: `1px solid ${_chunkFN5YL4BKjs.deploymentSurfaceTokens.strokeOutside}`,
+  borderRadius: PANEL_RADIUS,
+  boxShadow: PANEL_SHADOW,
+  overflow: "hidden"
+});
+var DeploymentDashboardPanel = ({
+  children,
+  className,
+  padding = 2
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledPanel, { className, sx: { p: padding }, children });
+};
+
+// src/components/layout/WorkflowTopBar/WorkflowTopBar.tsx
+
+
+
+
+
+
+
+
+
+var _Cancel = require('@mui/icons-material/Cancel'); var _Cancel2 = _interopRequireDefault(_Cancel);
+
+
+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 = _styles.useTheme.call(void 0, ).palette.workflow.chrome;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _material.Box,
+    {
+      sx: [
+        {
+          backgroundColor: "common.white",
+          display: "flex",
+          flexDirection: "column",
+          width: "100%"
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      ...boxProps,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _material.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 2,
+              px: 2,
+              py: 2,
+              minHeight: 72
+            },
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _material.Typography,
+                {
+                  variant: "subtitle1",
+                  sx: {
+                    color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary,
+                    fontWeight: 500,
+                    minWidth: 220
+                  },
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                _material.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 2,
+                    justifyContent: "flex-end",
+                    flex: 1,
+                    minWidth: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                      _material.Box,
+                      {
+                        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__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { flex: 1, minWidth: 0 }, children: [
+                            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                              _material.Typography,
+                              {
+                                variant: "caption",
+                                sx: {
+                                  color: chrome.labelText,
+                                  fontSize: 12,
+                                  display: "block"
+                                },
+                                children: executionIdLabel
+                              }
+                            ),
+                            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                              _material.InputBase,
+                              {
+                                value: executionId,
+                                onChange: (event) => _optionalChain([onExecutionIdChange, 'optionalCall', _37 => _37(event.target.value)]),
+                                inputProps: { "aria-label": executionIdLabel },
+                                sx: {
+                                  width: "100%",
+                                  mt: 0.25,
+                                  "& .MuiInputBase-input": {
+                                    p: 0,
+                                    color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary,
+                                    fontSize: 16,
+                                    lineHeight: 1.5
+                                  }
+                                }
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                            _material.IconButton,
+                            {
+                              size: "small",
+                              "aria-label": `Clear ${executionIdLabel.toLowerCase()}`,
+                              onClick: onClearExecutionId,
+                              sx: { color: chrome.iconColor, ml: 1 },
+                              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Cancel2.default, { fontSize: "small" })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      _chunkMNM6HE72js.Button,
+                      {
+                        variant: "primary",
+                        onClick: onSubmit,
+                        sx: {
+                          backgroundColor: chrome.buttonPrimary,
+                          "&:hover": {
+                            backgroundColor: chrome.buttonHover
+                          },
+                          "&:active": {
+                            backgroundColor: chrome.buttonActive
+                          }
+                        },
+                        children: submitLabel
+                      }
+                    ),
+                    showInspectorToggle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMNM6HE72js.Button, { variant: "secondary", onClick: onInspectorToggle, children: inspectorLabel }),
+                    showCloseButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      _material.IconButton,
+                      {
+                        "aria-label": "Close workflow chrome",
+                        onClick: onClose,
+                        sx: {
+                          width: 30,
+                          height: 30,
+                          backgroundColor: _material.alpha.call(void 0, chrome.closeBtnBg, 0.28),
+                          color: chrome.iconColor
+                        },
+                        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, { fontSize: "small" })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, { sx: { borderColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.strokeOutside } })
+      ]
+    }
+  );
+};
+
+// src/components/layout/WorkflowSideInspector/WorkflowSideInspector.tsx
+
+
+
+
+
+
+
+
+
+
+var _ContentCopyOutlined = require('@mui/icons-material/ContentCopyOutlined'); var _ContentCopyOutlined2 = _interopRequireDefault(_ContentCopyOutlined);
+
+var INSPECTOR_WIDTH = 320;
+var InfoBlock = ({ label, value, mutedColor }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", sx: { color: mutedColor }, children: label }),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Typography,
+    {
+      variant: "body2",
+      sx: { color: _chunkFN5YL4BKjs.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 = _material.useTheme.call(void 0, );
+  const chrome = theme.palette.workflow.chrome;
+  if (!open) {
+    return null;
+  }
+  const accent = theme.palette.workflow.node[nodeType].accent;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _material.Paper,
+    {
+      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__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", flexDirection: "column", gap: 1.25 }, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "subtitle1", sx: { color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary }, children: title }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.IconButton,
+              {
+                "aria-label": "Close inspector",
+                onClick: onClose,
+                sx: {
+                  border: `1px solid ${_chunkFN5YL4BKjs.deploymentSurfaceTokens.strokeOutside}`,
+                  borderRadius: 2
+                },
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, { fontSize: "small" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, { sx: { borderColor: chrome.divider } })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", flexDirection: "column", gap: 3, flex: 1 }, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.Typography,
+              {
+                variant: "subtitle1",
+                sx: { color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary, fontWeight: 500 },
+                children: nodeTitle
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", sx: { color: chrome.mutedText }, children: nodeDescription }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              _material.Box,
+              {
+                sx: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  alignSelf: "flex-start",
+                  gap: 1,
+                  px: 1.25,
+                  py: 0.5,
+                  borderRadius: "999px",
+                  border: `1px solid ${accent}`,
+                  backgroundColor: _material.alpha.call(void 0, accent, 0.12)
+                },
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _material.Box,
+                    {
+                      sx: {
+                        width: 10,
+                        height: 10,
+                        borderRadius: "50%",
+                        backgroundColor: accent
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "caption", sx: { color: accent, fontWeight: 500 }, children: _chunkX7E6GMFLjs.WORKFLOW_NODE_LABELS[nodeType] })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, { sx: { borderColor: chrome.divider } }),
+          (showInput || showOutput) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              showInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoBlock, { label: "Input", value: inputValue, mutedColor: chrome.mutedText }),
+              showOutput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoBlock, { label: "Output", value: outputValue, mutedColor: chrome.mutedText })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, { sx: { borderColor: chrome.divider } })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", sx: { color: chrome.mutedText }, children: "Cubby ID" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkMNM6HE72js.Button,
+              {
+                variant: "secondary",
+                size: "small",
+                startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ContentCopyOutlined2.default, { fontSize: "small" }),
+                onClick: onCopyCubbyId,
+                sx: { alignSelf: "flex-start" },
+                children: cubbyId
+              }
+            )
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, { sx: { borderColor: chrome.divider } }),
+          (showTimestamp || showDuration) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              showTimestamp && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoBlock, { label: "Timestamp", value: timestamp, mutedColor: chrome.mutedText }),
+              showDuration && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoBlock, { label: "Duration", value: duration, mutedColor: chrome.mutedText })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, { sx: { borderColor: chrome.divider } })
+          ] })
+        ] }),
+        actionLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMNM6HE72js.Button, { variant: "primary", fullWidth: true, onClick: onAction, children: actionLabel })
+      ]
+    }
+  );
+};
+
+// src/components/layout/WorkflowTimeBar/WorkflowTimeBar.tsx
+
+
+
+
+
+
+
+var _Stop = require('@mui/icons-material/Stop'); var _Stop2 = _interopRequireDefault(_Stop);
+
+
+var _Replay = require('@mui/icons-material/Replay'); var _Replay2 = _interopRequireDefault(_Replay);
+
+
+var SpeedButton = ({ value, selected, onClick }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _chunkMNM6HE72js.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 = _styles.useTheme.call(void 0, ).palette.workflow.chrome;
+  const boundedProgress = Math.max(0, Math.min(100, progress));
+  const atFirstStep = currentStep <= 1;
+  const atLastStep = currentStep >= totalSteps;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _material.Box,
+    {
+      sx: [
+        {
+          width: "100%",
+          backgroundColor: "common.white",
+          px: 2,
+          pb: 2,
+          display: "flex",
+          flexDirection: "column",
+          gap: 2
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      ...boxProps,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, { sx: { borderColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.strokeOutside } }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.IconButton,
+            {
+              onClick: onStop,
+              "aria-label": "Stop playback",
+              sx: {
+                width: 40,
+                height: 40,
+                border: `1px solid ${_chunkFN5YL4BKjs.deploymentSurfaceTokens.strokeOutside}`,
+                borderRadius: 1,
+                color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary,
+                backgroundColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.surfaceHigh
+              },
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Stop2.default, { sx: { fontSize: 16 } })
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { flex: 1, minWidth: 220, px: 1 }, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.Typography,
+              {
+                variant: "body2",
+                sx: { color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary, mb: 0.5 },
+                children: elapsedTime
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.LinearProgress,
+              {
+                variant: "determinate",
+                value: boundedProgress,
+                sx: {
+                  height: 3,
+                  borderRadius: 999,
+                  backgroundColor: chrome.progressBg,
+                  "& .MuiLinearProgress-bar": {
+                    backgroundColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.accentBlue
+                  }
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 3 }, children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "subtitle1", sx: { fontWeight: 500 }, children: "Steps" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _material.IconButton,
+                {
+                  size: "small",
+                  "aria-label": "Previous step",
+                  onClick: onPreviousStep,
+                  disabled: atFirstStep,
+                  sx: { backgroundColor: chrome.stepBtnBg },
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ChevronLeft2.default, { fontSize: "small" })
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "subtitle1", sx: { minWidth: 52, textAlign: "center" }, children: `${currentStep} / ${totalSteps}` }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _material.IconButton,
+                {
+                  size: "small",
+                  "aria-label": "Next step",
+                  onClick: onNextStep,
+                  disabled: atLastStep,
+                  sx: { backgroundColor: chrome.stepBtnBgHover },
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ChevronRight2.default, { fontSize: "small" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "subtitle1", sx: { fontWeight: 500 }, children: "Speed" }),
+              speedOptions.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                SpeedButton,
+                {
+                  value: option,
+                  selected: option === selectedSpeed,
+                  onClick: () => _optionalChain([onSpeedChange, 'optionalCall', _38 => _38(option)])
+                },
+                option
+              )),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { "aria-label": "Reset playback", onClick: onReset, size: "small", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Replay2.default, { fontSize: "small" }) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Logo = Logo; exports.Dialog = Dialog; exports.KpiCard = KpiCard; exports.AgentAvatar = AgentAvatar; exports.NumberedList = NumberedList; exports.resolveDrawerWidth = resolveDrawerWidth; exports.Drawer = Drawer; exports.MetaField = MetaField; exports.ScrollableRow = ScrollableRow; exports.SectionRow = SectionRow; exports.GRADIENT_PALETTE_COUNT = GRADIENT_PALETTE_COUNT; exports.GradientSurface = GradientSurface; exports.DefinitionRow = DefinitionRow; exports.PanelDialog = PanelDialog; exports.SplitDialogContent = SplitDialogContent; exports.ListItemText = _material.ListItemText; exports.ListItemIcon = _material.ListItemIcon; exports.ListItemSecondaryAction = _material.ListItemSecondaryAction; exports.List = List; exports.ListItem = ListItem; exports.Avatar = Avatar; exports.Table = Table; exports.TableHeader = TableHeader; exports.Grid2 = _material.Grid2; exports.Breadcrumbs = Breadcrumbs; exports.Accordion = Accordion; exports.Paper = Paper; exports.Divider = Divider3; exports.Stack = _material.Stack; exports.Box = _material.Box; exports.Container = _material.Container; exports.Toolbar = _material.Toolbar; exports.AppBar = AppBar; exports.Collapse = Collapse; exports.EntityHeader = EntityHeader; exports.DeploymentDashboardCard = DeploymentDashboardCard; exports.DeploymentEntityContextMenu = DeploymentEntityContextMenu; exports.contextMenuItems = contextMenuItems; exports.DeploymentDashboardTree = DeploymentDashboardTree; exports.DeploymentDashboardPanel = DeploymentDashboardPanel; exports.WorkflowTopBar = WorkflowTopBar; exports.WorkflowSideInspector = WorkflowSideInspector; exports.WorkflowTimeBar = WorkflowTimeBar;
+//# sourceMappingURL=chunk-HLH2VWXL.js.map