@cere/cere-design-system 0.0.45 → 0.2.0

package/dist/chunk-BH4FNZKK.mjs

@@ -0,0 +1,1472 @@
+import {
+  IDBlock,
+  RoleBadge
+} from "./chunk-DRGMEIPT.mjs";
+import {
+  CereIcon
+} from "./chunk-UPGFBPFX.mjs";
+import {
+  Button
+} from "./chunk-BOQPWZIB.mjs";
+import {
+  deploymentSurfaceTokens
+} from "./chunk-D7D25O6E.mjs";
+import {
+  robPaletteExtended,
+  robPrimaryPalette
+} from "./chunk-WC2TCWXK.mjs";
+
+// src/components/layout/Logo.tsx
+import Stack from "@mui/material/Stack";
+import { styled } from "@mui/material/styles";
+import { svgIconClasses } from "@mui/material/SvgIcon";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizesMap = {
+  large: 38,
+  medium: 32,
+  small: 24
+};
+var Container = styled(Stack)({
+  [`& .${svgIconClasses.root}`]: {
+    fontSize: "inherit"
+  }
+});
+var Logo = ({ children, size = "medium", icon = /* @__PURE__ */ jsx(CereIcon, { color: "primary" }) }) => /* @__PURE__ */ jsxs(Container, { direction: "row", alignItems: "center", spacing: 2, fontSize: sizesMap[size], children: [
+  icon,
+  children && /* @__PURE__ */ jsx(Stack, { children })
+] });
+
+// src/components/layout/Dialog.tsx
+import MuiDialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Button2 from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+import CircularProgress from "@mui/material/CircularProgress";
+import CloseIcon from "@mui/icons-material/Close";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Dialog = ({
+  open,
+  title,
+  onClose,
+  onSubmit,
+  submitLabel = "Save",
+  cancelLabel = "Cancel",
+  isLoading = false,
+  disableSubmit = false,
+  showActions = true,
+  headerAction,
+  fullWidth = true,
+  maxWidth = "md",
+  children,
+  dividers = true,
+  confirmBeforeClose = false,
+  customActions,
+  ...dialogProps
+}) => {
+  const handleCloseAttempt = (e) => {
+    if (e) e.stopPropagation();
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs2(
+    MuiDialog,
+    {
+      open,
+      onClose: (_, reason) => {
+        if (confirmBeforeClose) return;
+        if (reason === "backdropClick" || reason === "escapeKeyDown") {
+          onClose();
+        }
+      },
+      fullWidth,
+      maxWidth,
+      ...dialogProps,
+      PaperProps: {
+        sx: { minHeight: dialogProps.fullScreen ? void 0 : "auto" },
+        ...dialogProps.PaperProps
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(DialogTitle, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2 }, children: [
+          /* @__PURE__ */ jsx2(Box, { sx: { display: "flex", alignItems: "center" }, children: typeof title === "string" ? /* @__PURE__ */ jsx2(Typography, { variant: "h6", children: title }) : title }),
+          /* @__PURE__ */ jsxs2(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+            headerAction,
+            /* @__PURE__ */ jsx2(
+              IconButton,
+              {
+                edge: "end",
+                color: "inherit",
+                onClick: handleCloseAttempt,
+                "aria-label": "close",
+                children: /* @__PURE__ */ jsx2(CloseIcon, {})
+              }
+            )
+          ] })
+        ] }),
+        dividers && /* @__PURE__ */ jsx2(Divider, {}),
+        /* @__PURE__ */ jsx2(DialogContent, { dividers, children }),
+        (showActions || customActions) && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          dividers && /* @__PURE__ */ jsx2(Divider, {}),
+          /* @__PURE__ */ jsx2(DialogActions, { children: customActions || /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(
+              Button2,
+              {
+                onClick: handleCloseAttempt,
+                disabled: isLoading,
+                children: cancelLabel
+              }
+            ),
+            onSubmit && /* @__PURE__ */ jsx2(
+              Button2,
+              {
+                variant: "contained",
+                color: "primary",
+                onClick: onSubmit,
+                disabled: disableSubmit || isLoading,
+                startIcon: isLoading ? /* @__PURE__ */ jsx2(CircularProgress, { size: 20 }) : void 0,
+                children: submitLabel
+              }
+            )
+          ] }) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/layout/KpiCard.tsx
+import * as React from "react";
+import Box2 from "@mui/material/Box";
+import Typography2 from "@mui/material/Typography";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var toneColor = (tone, theme) => {
+  switch (tone) {
+    case "violet":
+      return theme.palette.primary.main;
+    case "blue":
+      return theme.palette.info.main;
+    case "green":
+      return theme.palette.success.main;
+    case "orange":
+      return theme.palette.warning.main;
+    case "pink":
+      return theme.palette.secondary?.main ?? theme.palette.primary.main;
+    case "neutral":
+    default:
+      return theme.palette.grey[300];
+  }
+};
+var KpiCard = React.forwardRef(
+  function KpiCard2({ icon, label, value, sub, tone = "neutral", ...rest }, ref) {
+    return /* @__PURE__ */ jsxs3(
+      Box2,
+      {
+        ref,
+        "data-tone": tone,
+        ...rest,
+        sx: (theme) => ({
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5,
+          padding: 2,
+          paddingLeft: 2.5,
+          borderRadius: 1.5,
+          backgroundColor: theme.palette.background.paper,
+          border: `1px solid ${theme.palette.divider}`,
+          overflow: "hidden",
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: 4,
+            backgroundColor: toneColor(tone, theme)
+          }
+        }),
+        children: [
+          /* @__PURE__ */ jsxs3(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+            icon && /* @__PURE__ */ jsx3(Box2, { sx: { display: "inline-flex", color: "text.secondary" }, children: icon }),
+            /* @__PURE__ */ jsx3(Typography2, { variant: "eyebrow", component: "span", children: label })
+          ] }),
+          /* @__PURE__ */ jsx3(Typography2, { variant: "panelTitle", component: "div", children: value }),
+          sub && /* @__PURE__ */ jsx3(Typography2, { variant: "body2", sx: { color: "text.secondary" }, children: sub })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/layout/AgentAvatar.tsx
+import * as React2 from "react";
+import Box3 from "@mui/material/Box";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var hashSeed = (seed) => {
+  let h = 5381;
+  for (let i = 0; i < seed.length; i += 1) {
+    h = (h << 5) + h + seed.charCodeAt(i) & 4294967295;
+  }
+  return Math.abs(h);
+};
+var palette = (theme) => [
+  theme.palette.primary.main,
+  theme.palette.primary.dark,
+  theme.palette.secondary?.main ?? theme.palette.primary.main
+];
+var AgentAvatar = React2.forwardRef(
+  function AgentAvatar2({ seed, name, size = 40, shadow = false, iconUrl, ariaLabel, ...rest }, ref) {
+    const initial = (name?.trim()?.[0] ?? "?").toUpperCase();
+    const radius = Math.round(size * 0.28);
+    return /* @__PURE__ */ jsx4(
+      Box3,
+      {
+        ref,
+        role: "img",
+        "aria-label": ariaLabel ?? name,
+        ...rest,
+        sx: (theme) => {
+          const colors = palette(theme);
+          const paletteIndex = hashSeed(seed) % colors.length;
+          return {
+            width: size,
+            height: size,
+            borderRadius: `${radius}px`,
+            backgroundColor: colors[paletteIndex],
+            color: theme.palette.common.white,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontWeight: 700,
+            fontSize: Math.round(size * 0.42),
+            lineHeight: 1,
+            overflow: "hidden",
+            flexShrink: 0,
+            boxShadow: shadow ? theme.shadows[3] : "inset 0 1px 0 rgba(255,255,255,0.2)",
+            userSelect: "none"
+          };
+        },
+        children: iconUrl ? /* @__PURE__ */ jsx4(
+          Box3,
+          {
+            component: "img",
+            src: iconUrl,
+            alt: "",
+            sx: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        ) : /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: initial })
+      }
+    );
+  }
+);
+
+// src/components/layout/NumberedList.tsx
+import * as React3 from "react";
+import Box4 from "@mui/material/Box";
+import Typography3 from "@mui/material/Typography";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var toneColors = (tone, theme) => {
+  switch (tone) {
+    case "blue":
+      return { bg: theme.palette.info.light, fg: theme.palette.info.dark };
+    case "green":
+      return { bg: theme.palette.success.light, fg: theme.palette.success.dark };
+    case "orange":
+      return { bg: theme.palette.warning.light, fg: theme.palette.warning.dark };
+    case "pink":
+      return {
+        bg: theme.palette.secondary?.light ?? theme.palette.primary.light,
+        fg: theme.palette.secondary?.main ?? theme.palette.primary.main
+      };
+    case "neutral":
+      return { bg: theme.palette.grey[100], fg: theme.palette.text.primary };
+    case "violet":
+    default:
+      return { bg: theme.palette.primary.light, fg: theme.palette.primary.main };
+  }
+};
+var NumberedList = React3.forwardRef(
+  function NumberedList2({ items, tone = "violet", startAt = 1, ...rest }, ref) {
+    return /* @__PURE__ */ jsx5(
+      Box4,
+      {
+        ref,
+        component: "ol",
+        "data-tone": tone,
+        ...rest,
+        sx: (theme) => {
+          const { bg, fg } = toneColors(tone, theme);
+          return {
+            listStyle: "none",
+            margin: 0,
+            padding: 0,
+            display: "flex",
+            flexDirection: "column",
+            gap: 1.5,
+            "--numbered-list-bg": bg,
+            "--numbered-list-fg": fg
+          };
+        },
+        children: items.map((item, idx) => /* @__PURE__ */ jsxs4(
+          Box4,
+          {
+            component: "li",
+            sx: { display: "flex", alignItems: "flex-start", gap: 1.5 },
+            children: [
+              /* @__PURE__ */ jsx5(
+                Box4,
+                {
+                  "aria-hidden": "true",
+                  sx: {
+                    flexShrink: 0,
+                    width: 28,
+                    height: 28,
+                    borderRadius: "50%",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontWeight: 700,
+                    fontSize: 13,
+                    backgroundColor: "var(--numbered-list-bg)",
+                    color: "var(--numbered-list-fg)"
+                  },
+                  children: startAt + idx
+                }
+              ),
+              /* @__PURE__ */ jsxs4(Box4, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx5(Typography3, { variant: "subtitle1", component: "div", children: item.title }),
+                item.detail && /* @__PURE__ */ jsx5(
+                  Typography3,
+                  {
+                    variant: "body2",
+                    component: "div",
+                    sx: { color: "text.secondary", mt: 0.25 },
+                    children: item.detail
+                  }
+                )
+              ] }),
+              item.cta && /* @__PURE__ */ jsx5(Box4, { sx: { flexShrink: 0 }, children: item.cta })
+            ]
+          },
+          `${idx}-${item.title}`
+        ))
+      }
+    );
+  }
+);
+
+// src/components/layout/Drawer.tsx
+import React4 from "react";
+import MuiDrawer from "@mui/material/Drawer";
+import { styled as styled2 } from "@mui/material/styles";
+import Box5 from "@mui/material/Box";
+import IconButton2 from "@mui/material/IconButton";
+import Typography4 from "@mui/material/Typography";
+import Divider2 from "@mui/material/Divider";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import CloseIcon2 from "@mui/icons-material/Close";
+
+// src/components/layout/drawerWidth.ts
+function resolveDrawerWidth(width, theme, defaultWidth) {
+  if (width === void 0) {
+    return { width: defaultWidth };
+  }
+  if (typeof width === "number" || typeof width === "string") {
+    return { width };
+  }
+  const base = width.xs ?? defaultWidth;
+  const css = { width: base };
+  ["sm", "md", "lg", "xl"].forEach((bp) => {
+    const value = width[bp];
+    if (value !== void 0) {
+      css[theme.breakpoints.up(bp)] = { width: value };
+    }
+  });
+  return css;
+}
+
+// src/components/layout/Drawer.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var StyledDrawer = styled2(MuiDrawer, {
+  shouldForwardProp: (prop) => prop !== "width" && prop !== "miniWidth" && prop !== "collapsed" && prop !== "topOffset"
+})(({ theme, width, miniWidth = 72, collapsed, topOffset = 0 }) => {
+  const widthCss = collapsed ? { width: miniWidth } : resolveDrawerWidth(width, theme, 240);
+  return {
+    ...widthCss,
+    flexShrink: 0,
+    "& .MuiDrawer-paper": {
+      ...widthCss,
+      boxSizing: "border-box",
+      boxShadow: "0px 2px 10px rgba(0, 0, 0, 0.05)",
+      transition: theme.transitions.create(["width", "top", "height"], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen
+      }),
+      overflow: "visible",
+      // Let internal content handle scrolling
+      display: "flex",
+      flexDirection: "column",
+      top: `${topOffset}px !important`,
+      height: topOffset > 0 ? `calc(100% - ${topOffset}px) !important` : "100%",
+      zIndex: `${theme.zIndex.modal} !important`
+      // Use modal zIndex to be above everything except AppBar (which is modal + 1)
+    }
+  };
+});
+var Drawer = React4.forwardRef(function Drawer2({
+  width,
+  miniWidth = 72,
+  collapsed = false,
+  title,
+  header,
+  showCloseButton,
+  tabs,
+  activeTab = 0,
+  onTabChange,
+  footer,
+  contentProps,
+  anchor = "right",
+  variant = "temporary",
+  topOffset = 0,
+  children,
+  onClose,
+  ...props
+}, ref) {
+  const defaultWidth = variant === "temporary" || variant === "persistent" ? 400 : 240;
+  const finalWidth = width ?? defaultWidth;
+  const shouldShowClose = showCloseButton ?? (variant === "temporary" || variant === "persistent");
+  const hasHeader = title || header || shouldShowClose || tabs;
+  return /* @__PURE__ */ jsxs5(
+    StyledDrawer,
+    {
+      ref,
+      width: finalWidth,
+      miniWidth,
+      collapsed,
+      anchor,
+      variant,
+      topOffset,
+      onClose,
+      ModalProps: {
+        ...props.ModalProps,
+        style: {
+          zIndex: topOffset > 0 ? void 0 : void 0
+          // Let styled component handle zIndex
+        }
+      },
+      BackdropProps: {
+        ...props.BackdropProps,
+        style: {
+          backgroundColor: "rgba(0, 0, 0, 0.5)"
+        }
+      },
+      ...props,
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          /* @__PURE__ */ jsx6(
+            Box5,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                p: 2,
+                minHeight: 64,
+                borderBottom: 1,
+                borderColor: "divider"
+              },
+              children: header || /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                /* @__PURE__ */ jsx6(Box5, { sx: { flex: 1 }, children: typeof title === "string" ? /* @__PURE__ */ jsx6(Typography4, { variant: "h6", children: title }) : title }),
+                shouldShowClose && onClose && /* @__PURE__ */ jsx6(
+                  IconButton2,
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onClose(e, "backdropClick");
+                    },
+                    size: "small",
+                    sx: { ml: 1 },
+                    "aria-label": "close",
+                    children: /* @__PURE__ */ jsx6(CloseIcon2, {})
+                  }
+                )
+              ] })
+            }
+          ),
+          tabs && tabs.length > 0 && /* @__PURE__ */ jsx6(
+            Tabs,
+            {
+              value: activeTab,
+              onChange: (_, newValue) => onTabChange?.(newValue),
+              variant: tabs.length > 4 ? "scrollable" : "standard",
+              scrollButtons: tabs.length > 4 ? "auto" : false,
+              sx: {
+                borderBottom: 1,
+                borderColor: "divider",
+                px: 2,
+                "& .MuiTabs-scrollableContainer": {
+                  overflow: "auto"
+                }
+              },
+              children: tabs.map((tab, index) => /* @__PURE__ */ jsx6(Tab, { label: tab }, index))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx6(
+          Box5,
+          {
+            sx: {
+              flex: 1,
+              overflow: "auto",
+              display: "flex",
+              flexDirection: "column"
+            },
+            ...contentProps,
+            children
+          }
+        ),
+        footer && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          /* @__PURE__ */ jsx6(Divider2, {}),
+          /* @__PURE__ */ jsx6(
+            Box5,
+            {
+              sx: {
+                p: 2,
+                borderTop: 1,
+                borderColor: "divider"
+              },
+              children: footer
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/layout/MetaField.tsx
+import React5 from "react";
+import Box6 from "@mui/material/Box";
+import Typography5 from "@mui/material/Typography";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var MetaField = React5.forwardRef(function MetaField2({ label, value, mono = false, title }, ref) {
+  const resolvedTitle = title ?? (typeof value === "string" ? value : void 0);
+  return /* @__PURE__ */ jsxs6(Box6, { ref, sx: { display: "flex", flexDirection: "column", gap: 0.25, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx7(
+      Typography5,
+      {
+        variant: "caption",
+        sx: {
+          color: "text.secondary",
+          textTransform: "uppercase",
+          letterSpacing: 0.4,
+          fontSize: 10,
+          fontWeight: 600
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      Typography5,
+      {
+        variant: "body2",
+        sx: {
+          fontFamily: mono ? "monospace" : void 0,
+          fontSize: 13,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        title: resolvedTitle,
+        children: value
+      }
+    )
+  ] });
+});
+
+// src/components/layout/ScrollableRow.tsx
+import { useEffect, useRef, useState } from "react";
+import Box7 from "@mui/material/Box";
+import IconButton3 from "@mui/material/IconButton";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var EDGE_TOLERANCE_PX = 4;
+var ScrollableRow = ({
+  children,
+  leftLabel = "Scroll left",
+  rightLabel = "Scroll right",
+  minNudge = 160,
+  nudgeFraction = 0.6
+}) => {
+  const scrollerRef = useRef(null);
+  const [canLeft, setCanLeft] = useState(false);
+  const [canRight, setCanRight] = useState(false);
+  useEffect(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const update = () => {
+      setCanLeft(el.scrollLeft > EDGE_TOLERANCE_PX);
+      setCanRight(el.scrollLeft + el.clientWidth < el.scrollWidth - EDGE_TOLERANCE_PX);
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+    ro?.observe(el);
+    for (const c of Array.from(el.children)) ro?.observe(c);
+    const mo = typeof MutationObserver !== "undefined" ? new MutationObserver(() => {
+      for (const c of Array.from(el.children)) ro?.observe(c);
+      update();
+    }) : null;
+    mo?.observe(el, { childList: true });
+    return () => {
+      el.removeEventListener("scroll", update);
+      ro?.disconnect();
+      mo?.disconnect();
+    };
+  }, []);
+  const nudge = (dir) => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    el.scrollBy({ left: dir * Math.max(minNudge, el.clientWidth * nudgeFraction), behavior: "smooth" });
+  };
+  return /* @__PURE__ */ jsxs7(Box7, { sx: { position: "relative", flex: 1, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx8(
+      Box7,
+      {
+        ref: scrollerRef,
+        "data-scrollable-row-scroller": true,
+        sx: {
+          display: "flex",
+          gap: 1,
+          overflowX: "auto",
+          overflowY: "hidden",
+          scrollbarWidth: "thin",
+          py: 0.25
+        },
+        children
+      }
+    ),
+    canLeft && /* @__PURE__ */ jsx8(
+      IconButton3,
+      {
+        size: "small",
+        "aria-label": leftLabel,
+        onClick: () => nudge(-1),
+        sx: {
+          position: "absolute",
+          left: -6,
+          top: "50%",
+          transform: "translateY(-50%)",
+          bgcolor: "background.paper",
+          boxShadow: 1,
+          "&:hover": { bgcolor: "background.paper" }
+        },
+        children: /* @__PURE__ */ jsx8(ChevronLeftIcon, { fontSize: "small" })
+      }
+    ),
+    canRight && /* @__PURE__ */ jsx8(
+      IconButton3,
+      {
+        size: "small",
+        "aria-label": rightLabel,
+        onClick: () => nudge(1),
+        sx: {
+          position: "absolute",
+          right: -6,
+          top: "50%",
+          transform: "translateY(-50%)",
+          bgcolor: "background.paper",
+          boxShadow: 1,
+          "&:hover": { bgcolor: "background.paper" }
+        },
+        children: /* @__PURE__ */ jsx8(ChevronRightIcon, { fontSize: "small" })
+      }
+    )
+  ] });
+};
+
+// src/components/layout/SectionRow.tsx
+import React7 from "react";
+import Box8 from "@mui/material/Box";
+import Typography6 from "@mui/material/Typography";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var SectionRow = React7.forwardRef(function SectionRow2({ title, subtitle, action, leftLabel, rightLabel, children }, ref) {
+  return /* @__PURE__ */ jsxs8(Box8, { ref, component: "section", sx: { mb: 4 }, children: [
+    /* @__PURE__ */ jsxs8(
+      Box8,
+      {
+        component: "header",
+        sx: {
+          display: "flex",
+          alignItems: "flex-end",
+          justifyContent: "space-between",
+          gap: 1.5,
+          mb: 1.5
+        },
+        children: [
+          /* @__PURE__ */ jsxs8(Box8, { sx: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx9(Typography6, { component: "h2", variant: "h6", sx: { m: 0 }, children: title }),
+            subtitle && /* @__PURE__ */ jsx9(Typography6, { variant: "caption", sx: { color: "text.secondary" }, children: subtitle })
+          ] }),
+          action && /* @__PURE__ */ jsx9(Box8, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: action })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx9(ScrollableRow, { leftLabel, rightLabel, children })
+  ] });
+});
+
+// src/components/layout/GradientSurface.tsx
+import React8 from "react";
+import Box9 from "@mui/material/Box";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var GRADIENT_ANCHORS_0 = {
+  d1: robPaletteExtended.nearBlack2,
+  // #0d0627
+  d2: robPaletteExtended.nearBlack4,
+  // #23194b
+  ev: robPrimaryPalette.electricViolet,
+  // #8B00EC
+  fd: robPrimaryPalette.fandango
+  // #BD32A7
+};
+var PALETTES = [
+  {
+    base: `linear-gradient(115deg, ${GRADIENT_ANCHORS_0.d1} 0%, ${GRADIENT_ANCHORS_0.d2} 55%, ${GRADIENT_ANCHORS_0.ev} 130%)`,
+    blobA: GRADIENT_ANCHORS_0.fd,
+    blobB: GRADIENT_ANCHORS_0.ev
+  },
+  { base: "linear-gradient(115deg, #2a1635 0%, #5b2a55 55%, #c75a8a 130%)", blobA: "#ff7ea8", blobB: "#ffd1a8" },
+  { base: "linear-gradient(115deg, #0e2a2c 0%, #1d5d63 55%, #59c6c4 130%)", blobA: "#59c6c4", blobB: "#2bb0a0" },
+  { base: "linear-gradient(115deg, #131534 0%, #2c3a8c 55%, #6088e8 130%)", blobA: "#6088e8", blobB: "#3b5db8" },
+  { base: "linear-gradient(115deg, #1a0f30 0%, #3d2a78 55%, #8a5cf6 130%)", blobA: "#a892ff", blobB: "#6b4cf0" },
+  { base: "linear-gradient(115deg, #2b1124 0%, #6d2244 55%, #d44a7a 130%)", blobA: "#d44a7a", blobB: "#a8345e" }
+];
+var GRADIENT_PALETTE_COUNT = PALETTES.length;
+var GradientSurface = React8.forwardRef(
+  function GradientSurface2({ index, children, sx }, ref) {
+    const wrapped = (index % GRADIENT_PALETTE_COUNT + GRADIENT_PALETTE_COUNT) % GRADIENT_PALETTE_COUNT;
+    const palette2 = PALETTES[wrapped];
+    return /* @__PURE__ */ jsx10(
+      Box9,
+      {
+        ref,
+        "data-gradient-index": wrapped,
+        sx: [
+          {
+            position: "relative",
+            overflow: "hidden",
+            background: palette2.base,
+            color: "common.white",
+            "&::before, &::after": {
+              content: '""',
+              position: "absolute",
+              pointerEvents: "none",
+              borderRadius: "50%",
+              filter: "blur(6px)"
+            },
+            "&::before": {
+              width: 460,
+              height: 460,
+              top: -120,
+              right: -120,
+              opacity: 0.7,
+              background: `radial-gradient(circle, ${palette2.blobA} 0%, transparent 70%)`
+            },
+            "&::after": {
+              width: 520,
+              height: 520,
+              bottom: -180,
+              left: -160,
+              opacity: 0.55,
+              background: `radial-gradient(circle, ${palette2.blobB} 0%, transparent 70%)`
+            }
+          },
+          ...Array.isArray(sx) ? sx : [sx]
+        ],
+        children
+      }
+    );
+  }
+);
+
+// src/components/layout/DefinitionRow.tsx
+import React9 from "react";
+import Box10 from "@mui/material/Box";
+import Typography7 from "@mui/material/Typography";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var DefinitionRow = React9.forwardRef(
+  function DefinitionRow2({ icon, label, sublabel, value, hint, dense = false, divider = true }, ref) {
+    return /* @__PURE__ */ jsxs9(
+      Box10,
+      {
+        ref,
+        "data-density": dense ? "dense" : "normal",
+        sx: {
+          py: dense ? 0.75 : 1.25,
+          display: "flex",
+          alignItems: "center",
+          gap: 1.5,
+          ...divider && {
+            borderBottom: "1px solid",
+            borderColor: "divider",
+            "&:last-child": { borderBottom: "none" }
+          }
+        },
+        children: [
+          icon && /* @__PURE__ */ jsx11(Box10, { sx: { display: "flex", alignItems: "center", color: "text.secondary" }, children: icon }),
+          /* @__PURE__ */ jsxs9(Box10, { sx: { minWidth: 0, flex: 1 }, children: [
+            /* @__PURE__ */ jsx11(Typography7, { variant: "body2", sx: { fontWeight: 500, lineHeight: 1.2 }, children: label }),
+            sublabel && /* @__PURE__ */ jsx11(Typography7, { variant: "caption", sx: { color: "text.secondary" }, children: sublabel })
+          ] }),
+          (value || hint) && /* @__PURE__ */ jsxs9(
+            Box10,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-end",
+                textAlign: "right"
+              },
+              children: [
+                value && /* @__PURE__ */ jsx11(Typography7, { variant: "body2", sx: { color: "text.secondary" }, children: value }),
+                hint && /* @__PURE__ */ jsx11(Typography7, { variant: "caption", sx: { color: "text.disabled" }, children: hint })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/components/layout/PanelDialog.tsx
+import { forwardRef as forwardRef4 } from "react";
+import MuiDialog2 from "@mui/material/Dialog";
+import IconButton4 from "@mui/material/IconButton";
+import Box11 from "@mui/material/Box";
+import Typography8 from "@mui/material/Typography";
+import Slide from "@mui/material/Slide";
+import CloseIcon3 from "@mui/icons-material/Close";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var WIDTH_PX = {
+  sm: 420,
+  md: 640,
+  lg: 880,
+  xl: 1080
+};
+var SlideLeft = forwardRef4(
+  function SlideLeft2(props, ref) {
+    return /* @__PURE__ */ jsx12(Slide, { direction: "left", ref, ...props });
+  }
+);
+var SlideUp = forwardRef4(
+  function SlideUp2(props, ref) {
+    return /* @__PURE__ */ jsx12(Slide, { direction: "up", ref, ...props });
+  }
+);
+function PanelDialog({
+  open,
+  onClose,
+  title,
+  headerActions,
+  width = "md",
+  side = "right",
+  ariaLabel,
+  hideHeader = false,
+  paperSx,
+  backdropSx,
+  transition,
+  children
+}) {
+  const accessibleName = ariaLabel ?? (typeof title === "string" ? title : void 0);
+  const isRight = side === "right";
+  const resolvedTransition = transition ?? (isRight ? "slide-left" : "fade");
+  const TransitionComponent = resolvedTransition === "slide-left" ? SlideLeft : resolvedTransition === "slide-up" ? SlideUp : void 0;
+  const paperBaseSx = {
+    width: WIDTH_PX[width],
+    maxWidth: "100%",
+    // Lay paper children out as a flex column so the body can `flex: 1` and
+    // own its own scroll region.
+    display: "flex",
+    flexDirection: "column",
+    ...isRight && {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      margin: 0,
+      // Use dynamic viewport units so mobile browsers (esp. iOS Safari) don't
+      // pop the layout when the URL bar shows/hides.
+      maxHeight: "100dvh",
+      height: "100dvh",
+      borderRadius: 0
+    }
+  };
+  return /* @__PURE__ */ jsxs10(
+    MuiDialog2,
+    {
+      open,
+      onClose,
+      slots: TransitionComponent ? { transition: TransitionComponent } : void 0,
+      slotProps: {
+        paper: {
+          "aria-label": accessibleName,
+          sx: [paperBaseSx, ...Array.isArray(paperSx) ? paperSx : [paperSx]]
+        },
+        ...backdropSx ? { backdrop: { sx: backdropSx } } : {}
+      },
+      children: [
+        !hideHeader && /* @__PURE__ */ jsxs10(
+          Box11,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 1,
+              px: 2,
+              py: 1.5,
+              borderBottom: "1px solid",
+              borderColor: "divider"
+            },
+            children: [
+              /* @__PURE__ */ jsx12(Box11, { sx: { display: "flex", alignItems: "center", minWidth: 0 }, children: typeof title === "string" ? /* @__PURE__ */ jsx12(Typography8, { variant: "h6", noWrap: true, children: title }) : title }),
+              /* @__PURE__ */ jsxs10(Box11, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                headerActions,
+                /* @__PURE__ */ jsx12(IconButton4, { "aria-label": "Close", onClick: onClose, edge: "end", size: "small", children: /* @__PURE__ */ jsx12(CloseIcon3, { fontSize: "small" }) })
+              ] })
+            ]
+          }
+        ),
+        hideHeader && /* @__PURE__ */ jsx12(
+          IconButton4,
+          {
+            "aria-label": "Close",
+            onClick: onClose,
+            size: "small",
+            sx: {
+              position: "absolute",
+              top: 12,
+              right: 12,
+              zIndex: 2,
+              bgcolor: "background.paper",
+              boxShadow: 1,
+              "&:hover": { bgcolor: "background.paper" }
+            },
+            children: /* @__PURE__ */ jsx12(CloseIcon3, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ jsx12(Box11, { sx: { flex: 1, overflow: "auto", minHeight: 0 }, children })
+      ]
+    }
+  );
+}
+
+// src/components/layout/SplitDialogContent.tsx
+import React10 from "react";
+import Box12 from "@mui/material/Box";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var SplitDialogContent = React10.forwardRef(
+  function SplitDialogContent2({ left, right, rightWidth = 320, collapseBelow = 860, sx }, ref) {
+    return /* @__PURE__ */ jsxs11(
+      Box12,
+      {
+        ref,
+        sx: {
+          display: "grid",
+          gridTemplateColumns: `1fr ${rightWidth}px`,
+          gap: "28px",
+          // Right padding reserves room for the floating close button on PanelDialog.
+          padding: "28px 56px 36px 36px",
+          overflowY: "auto",
+          [`@media (max-width: ${collapseBelow}px)`]: {
+            gridTemplateColumns: "1fr",
+            padding: "22px 56px 28px 22px"
+          },
+          ...sx
+        },
+        children: [
+          /* @__PURE__ */ jsx13(Box12, { sx: { display: "flex", flexDirection: "column", gap: "22px", minWidth: 0 }, children: left }),
+          /* @__PURE__ */ jsx13(Box12, { component: "aside", sx: { display: "flex", flexDirection: "column", gap: "14px" }, children: right })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/layout/List.tsx
+import React11 from "react";
+import MuiList from "@mui/material/List";
+import MuiListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
+import { styled as styled3 } from "@mui/material/styles";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var List = React11.forwardRef(function List2(props, ref) {
+  return /* @__PURE__ */ jsx14(MuiList, { ref, ...props });
+});
+var StyledListItem = styled3(MuiListItem, {
+  shouldForwardProp: (prop) => prop !== "hoverable"
+})(({ hoverable = true, theme }) => ({
+  border: `1px solid ${theme.palette.grey[200]}`,
+  borderRadius: 8,
+  marginBottom: 8,
+  ...hoverable && {
+    "&:hover": {
+      backgroundColor: theme.palette.grey[50]
+    }
+  }
+}));
+var ListItem = React11.forwardRef(function ListItem2({ primary, secondary, icon, action, hoverable = true, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs12(StyledListItem, { ref, hoverable, ...props, children: [
+    icon && /* @__PURE__ */ jsx14(ListItemIcon, { children: icon }),
+    (primary || secondary) && /* @__PURE__ */ jsx14(
+      ListItemText,
+      {
+        primary,
+        secondary
+      }
+    ),
+    children,
+    action && action
+  ] });
+});
+
+// src/components/layout/Avatar.tsx
+import React12 from "react";
+import MuiAvatar from "@mui/material/Avatar";
+import { styled as styled4 } from "@mui/material/styles";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var sizeMap = {
+  small: 32,
+  medium: 40,
+  large: 56
+};
+var StyledAvatar = styled4(MuiAvatar, {
+  shouldForwardProp: (prop) => prop !== "avatarSize"
+})(({ avatarSize = 40, theme }) => ({
+  width: avatarSize,
+  height: avatarSize,
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  fontWeight: 600
+}));
+var Avatar = React12.forwardRef(function Avatar2({ size = "medium", ...props }, ref) {
+  const avatarSize = typeof size === "number" ? size : sizeMap[size];
+  return /* @__PURE__ */ jsx15(StyledAvatar, { ref, avatarSize, ...props });
+});
+
+// src/components/layout/Table.tsx
+import React13 from "react";
+import MuiTable from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import { styled as styled5 } from "@mui/material/styles";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var StyledTableContainer = styled5(TableContainer)(({ theme }) => ({
+  borderRadius: 8,
+  border: `1px solid ${theme.palette.grey[200]}`
+}));
+var StyledTableHead = styled5(TableHead)(({ theme }) => ({
+  backgroundColor: theme.palette.grey[50],
+  "& .MuiTableCell-head": {
+    fontWeight: 600,
+    color: theme.palette.text.primary
+  }
+}));
+var Table = React13.forwardRef(function Table2({ stickyHeader = false, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx16(StyledTableContainer, { children: /* @__PURE__ */ jsx16(MuiTable, { ref, stickyHeader, ...props, children }) });
+});
+var TableHeader = React13.forwardRef(
+  function TableHeader2({ columns, orderBy, order = "asc", onSort }, ref) {
+    return /* @__PURE__ */ jsx16(StyledTableHead, { ref, children: /* @__PURE__ */ jsx16(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx16(TableCell, { align: column.align || "left", children: column.sortable && onSort ? /* @__PURE__ */ jsx16(
+      TableSortLabel,
+      {
+        active: orderBy === column.id,
+        direction: orderBy === column.id ? order : "asc",
+        onClick: () => onSort(column.id),
+        children: column.label
+      }
+    ) : column.label }, column.id)) }) });
+  }
+);
+
+// src/components/layout/Grid.tsx
+import { default as default2 } from "@mui/material/Grid2";
+
+// src/components/layout/Breadcrumbs.tsx
+import React14 from "react";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+import Typography9 from "@mui/material/Typography";
+import { styled as styled6 } from "@mui/material/styles";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled6(MuiBreadcrumbs)(({ theme }) => ({
+  "& .MuiBreadcrumbs-ol": {
+    flexWrap: "nowrap"
+  },
+  "& .MuiBreadcrumbs-separator": {
+    color: theme.palette.text.secondary
+  }
+}));
+var StyledLink = styled6(Link)(({ theme }) => ({
+  color: theme.palette.primary.main,
+  textDecoration: "none",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+}));
+var Breadcrumbs = React14.forwardRef(function Breadcrumbs2({ items, ...props }, ref) {
+  return /* @__PURE__ */ jsx17(StyledBreadcrumbs, { ref, ...props, children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    if (isLast || !item.href && !item.onClick) {
+      return /* @__PURE__ */ jsx17(Typography9, { color: "text.primary", children: item.label }, index);
+    }
+    return /* @__PURE__ */ jsx17(
+      StyledLink,
+      {
+        href: item.href,
+        onClick: (e) => {
+          if (item.onClick) {
+            e.preventDefault();
+            item.onClick();
+          }
+        },
+        children: item.label
+      },
+      index
+    );
+  }) });
+});
+
+// src/components/layout/Accordion.tsx
+import React15 from "react";
+import MuiAccordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { styled as styled7 } from "@mui/material/styles";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var StyledAccordion = styled7(MuiAccordion)(({ theme }) => ({
+  borderRadius: 8,
+  boxShadow: "none",
+  border: `1px solid ${theme.palette.grey[200]}`,
+  "&:before": {
+    display: "none"
+  },
+  "&.Mui-expanded": {
+    margin: 0
+  }
+}));
+var StyledAccordionSummary = styled7(AccordionSummary)(({ theme }) => ({
+  backgroundColor: theme.palette.grey[50],
+  borderRadius: "8px 8px 0 0",
+  "&.Mui-expanded": {
+    borderRadius: "8px 8px 0 0"
+  },
+  "& .MuiAccordionSummary-content": {
+    margin: "12px 0"
+  }
+}));
+var StyledAccordionDetails = styled7(AccordionDetails)({
+  padding: "16px"
+});
+var Accordion = React15.forwardRef(function Accordion2({ title, children, defaultExpanded = false, ...props }, ref) {
+  return /* @__PURE__ */ jsxs13(StyledAccordion, { ref, defaultExpanded, ...props, children: [
+    /* @__PURE__ */ jsx18(StyledAccordionSummary, { expandIcon: /* @__PURE__ */ jsx18(ExpandMoreIcon, {}), children: title }),
+    /* @__PURE__ */ jsx18(StyledAccordionDetails, { children })
+  ] });
+});
+
+// src/components/layout/Paper.tsx
+import React16 from "react";
+import MuiPaper from "@mui/material/Paper";
+import { styled as styled8 } from "@mui/material/styles";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var StyledPaper = styled8(MuiPaper)(({ theme }) => ({
+  borderRadius: 8,
+  "&.MuiPaper-elevation": {
+    boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.08)"
+  },
+  "&.MuiPaper-outlined": {
+    border: `1px solid ${theme.palette.grey[200]}`,
+    boxShadow: "none"
+  }
+}));
+var Paper = React16.forwardRef(function Paper2({ variant = "elevation", ...props }, ref) {
+  return /* @__PURE__ */ jsx19(
+    StyledPaper,
+    {
+      ref,
+      variant,
+      elevation: variant === "elevation" ? 1 : 0,
+      ...props
+    }
+  );
+});
+
+// src/components/layout/Divider.tsx
+import React17 from "react";
+import MuiDivider from "@mui/material/Divider";
+import { styled as styled9 } from "@mui/material/styles";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var StyledDivider = styled9(MuiDivider)(({ theme }) => ({
+  borderColor: theme.palette.grey[200]
+}));
+var Divider3 = React17.forwardRef(function Divider4(props, ref) {
+  return /* @__PURE__ */ jsx20(StyledDivider, { ref, ...props });
+});
+
+// src/components/layout/Stack.tsx
+import { default as default3 } from "@mui/material/Stack";
+
+// src/components/layout/Box.tsx
+import { default as default4 } from "@mui/material/Box";
+
+// src/components/layout/Container.tsx
+import { default as default5 } from "@mui/material/Container";
+
+// src/components/layout/AppBar.tsx
+import MuiAppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import { styled as styled10 } from "@mui/material/styles";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var StyledAppBar = styled10(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "appBarHeight"
+})(({ appBarHeight = 64, theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  borderBottom: `1px solid ${theme.palette.grey[200]}`,
+  boxShadow: "none",
+  height: appBarHeight,
+  zIndex: 1300
+}));
+var StyledToolbar = styled10(Toolbar)(({ theme }) => ({
+  height: "100%",
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  gap: theme.spacing(2)
+}));
+var AppBar = ({ height = 64, children, ...props }) => {
+  return /* @__PURE__ */ jsx21(StyledAppBar, { position: "fixed", appBarHeight: height, ...props, children: /* @__PURE__ */ jsx21(StyledToolbar, { children }) });
+};
+
+// src/components/layout/Collapse.tsx
+import React18 from "react";
+import MuiCollapse from "@mui/material/Collapse";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var Collapse = React18.forwardRef(function Collapse2(props, ref) {
+  return /* @__PURE__ */ jsx22(MuiCollapse, { ref, ...props });
+});
+
+// src/components/layout/EntityHeader/EntityHeader.tsx
+import React19 from "react";
+import Box13 from "@mui/material/Box";
+import Typography10 from "@mui/material/Typography";
+import IconButton5 from "@mui/material/IconButton";
+import Divider5 from "@mui/material/Divider";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+var EntityHeader = React19.forwardRef(
+  function EntityHeader2({
+    title,
+    subtitle,
+    role,
+    id,
+    primaryAction,
+    startActions,
+    endActions,
+    onCopyId,
+    onMoreOptions,
+    headingLevel = "h2",
+    divider = true
+  }, ref) {
+    const getPrimaryActionLabel = () => {
+      if (!primaryAction) return "";
+      const { label, count } = primaryAction;
+      return count !== void 0 ? `${label} (${count})` : label;
+    };
+    return /* @__PURE__ */ jsxs14(Box13, { ref, children: [
+      /* @__PURE__ */ jsxs14(
+        Box13,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            px: 3,
+            py: 2,
+            gap: 1
+          },
+          children: [
+            /* @__PURE__ */ jsxs14(
+              Box13,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  flexWrap: "wrap"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs14(
+                    Box13,
+                    {
+                      sx: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 0.5
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx23(
+                          Typography10,
+                          {
+                            component: headingLevel,
+                            sx: {
+                              fontSize: "16px",
+                              fontWeight: 500,
+                              lineHeight: "24px",
+                              letterSpacing: "0.15px",
+                              color: deploymentSurfaceTokens.textPrimary
+                            },
+                            children: title
+                          }
+                        ),
+                        subtitle && /* @__PURE__ */ jsx23(
+                          Typography10,
+                          {
+                            variant: "body2",
+                            sx: {
+                              fontSize: "11px",
+                              fontWeight: 500,
+                              lineHeight: "16px",
+                              letterSpacing: "0.5px",
+                              color: deploymentSurfaceTokens.textSecondary
+                            },
+                            children: subtitle
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  role && /* @__PURE__ */ jsx23(RoleBadge, { label: role, color: "primary", size: "small" }),
+                  id && /* @__PURE__ */ jsx23(IDBlock, { id, label: "ID", entityType: "entity", onCopy: onCopyId })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs14(
+              Box13,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  flexShrink: 0
+                },
+                children: [
+                  startActions,
+                  primaryAction && /* @__PURE__ */ jsx23(
+                    Button,
+                    {
+                      variant: "primary",
+                      startIcon: primaryAction.icon,
+                      onClick: primaryAction.onClick,
+                      sx: {
+                        textTransform: "capitalize"
+                      },
+                      children: getPrimaryActionLabel()
+                    }
+                  ),
+                  endActions,
+                  onMoreOptions && /* @__PURE__ */ jsx23(
+                    IconButton5,
+                    {
+                      onClick: onMoreOptions,
+                      size: "small",
+                      "aria-label": "More options",
+                      sx: {
+                        padding: "8px",
+                        border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
+                        borderRadius: "8px",
+                        "&:hover": {
+                          backgroundColor: deploymentSurfaceTokens.hoverOverlay,
+                          borderColor: deploymentSurfaceTokens.borderDefault
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx23(
+                        MoreHorizIcon,
+                        {
+                          sx: {
+                            fontSize: "20px",
+                            color: deploymentSurfaceTokens.textSecondary
+                          }
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      divider && /* @__PURE__ */ jsx23(
+        Divider5,
+        {
+          sx: {
+            borderColor: deploymentSurfaceTokens.strokeOutside
+          }
+        }
+      )
+    ] });
+  }
+);
+
+export {
+  Logo,
+  Dialog,
+  KpiCard,
+  AgentAvatar,
+  NumberedList,
+  resolveDrawerWidth,
+  Drawer,
+  MetaField,
+  ScrollableRow,
+  SectionRow,
+  GRADIENT_PALETTE_COUNT,
+  GradientSurface,
+  DefinitionRow,
+  PanelDialog,
+  SplitDialogContent,
+  ListItemText,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  List,
+  ListItem,
+  Avatar,
+  Table,
+  TableHeader,
+  default2 as default,
+  Breadcrumbs,
+  Accordion,
+  Paper,
+  Divider3 as Divider,
+  default3 as default2,
+  default4 as default3,
+  default5 as default4,
+  Toolbar,
+  AppBar,
+  Collapse,
+  EntityHeader
+};
+//# sourceMappingURL=chunk-BH4FNZKK.mjs.map