@cere/cere-design-system 0.0.42 → 0.0.43

package/dist/index.d.mts

@@ -21,6 +21,7 @@ import { TooltipProps as TooltipProps$1 } from '@mui/material/Tooltip';
 import { AlertProps as AlertProps$1 } from '@mui/material/Alert';
 import { SnackbarProps as SnackbarProps$1 } from '@mui/material/Snackbar';
 import { DrawerProps as DrawerProps$1 } from '@mui/material/Drawer';
+import { EmblaOptionsType } from 'embla-carousel';
 import { CardProps as CardProps$1 } from '@mui/material/Card';
 import { CardContentProps } from '@mui/material/CardContent';
 import { CardHeaderProps } from '@mui/material/CardHeader';
@@ -463,7 +464,7 @@ interface SearchFieldProps extends Omit<TextFieldProps, 'InputProps' | 'variant'
     /** Visual treatment. `pill` renders a fully-rounded input. @default 'standard' */
     variant?: SearchFieldVariant;
     /**
-     * Show a keyboard-shortcut hint adornment (⌘K on Mac, Ctrl+K elsewhere) at
+     * Show a keyboard-shortcut hint adornment (⌘ K on Mac, Ctrl + K elsewhere) at
      * the right edge. Pair with `useSearchHotkeys` to wire the key handler.
      */
     shortcutHint?: boolean;
@@ -1791,13 +1792,15 @@ interface CarouselProps<T> {
     dotColor?: string;
     /** Override the active dot color. Accepts any CSS color string. */
     dotActiveColor?: string;
+    /** Escape hatch for advanced embla options. Most consumers don't need this. */
+    emblaOptions?: EmblaOptionsType;
 }
 /**
  * Carousel — embla-carousel-based slide deck with autoplay, dots, counter,
  * prev/next arrows and pause-on-hover. Generic over slide payload type; the
  * caller decides the slide markup via `renderSlide`.
  */
-declare function Carousel<T>({ slides, renderSlide, getKey, slidesPerView, autoplay, autoplayDelayMs, showDots, showCounter, showArrows, pauseOnHover, ariaLabel, onSelect, arrowSx, dotColor, dotActiveColor, }: CarouselProps<T>): react_jsx_runtime.JSX.Element | null;
+declare function Carousel<T>({ slides, renderSlide, getKey, slidesPerView, autoplay, autoplayDelayMs, showDots, showCounter, showArrows, pauseOnHover, ariaLabel, onSelect, arrowSx, dotColor, dotActiveColor, emblaOptions, }: CarouselProps<T>): react_jsx_runtime.JSX.Element | null;
 
 /** Number of distinct gradient palettes. Useful for sizing slide cycles deterministically. */
 declare const GRADIENT_PALETTE_COUNT: 6;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ import { TooltipProps as TooltipProps$1 } from '@mui/material/Tooltip';
 import { AlertProps as AlertProps$1 } from '@mui/material/Alert';
 import { SnackbarProps as SnackbarProps$1 } from '@mui/material/Snackbar';
 import { DrawerProps as DrawerProps$1 } from '@mui/material/Drawer';
+import { EmblaOptionsType } from 'embla-carousel';
 import { CardProps as CardProps$1 } from '@mui/material/Card';
 import { CardContentProps } from '@mui/material/CardContent';
 import { CardHeaderProps } from '@mui/material/CardHeader';
@@ -463,7 +464,7 @@ interface SearchFieldProps extends Omit<TextFieldProps, 'InputProps' | 'variant'
     /** Visual treatment. `pill` renders a fully-rounded input. @default 'standard' */
     variant?: SearchFieldVariant;
     /**
-     * Show a keyboard-shortcut hint adornment (⌘K on Mac, Ctrl+K elsewhere) at
+     * Show a keyboard-shortcut hint adornment (⌘ K on Mac, Ctrl + K elsewhere) at
      * the right edge. Pair with `useSearchHotkeys` to wire the key handler.
      */
     shortcutHint?: boolean;
@@ -1791,13 +1792,15 @@ interface CarouselProps<T> {
     dotColor?: string;
     /** Override the active dot color. Accepts any CSS color string. */
     dotActiveColor?: string;
+    /** Escape hatch for advanced embla options. Most consumers don't need this. */
+    emblaOptions?: EmblaOptionsType;
 }
 /**
  * Carousel — embla-carousel-based slide deck with autoplay, dots, counter,
  * prev/next arrows and pause-on-hover. Generic over slide payload type; the
  * caller decides the slide markup via `renderSlide`.
  */
-declare function Carousel<T>({ slides, renderSlide, getKey, slidesPerView, autoplay, autoplayDelayMs, showDots, showCounter, showArrows, pauseOnHover, ariaLabel, onSelect, arrowSx, dotColor, dotActiveColor, }: CarouselProps<T>): react_jsx_runtime.JSX.Element | null;
+declare function Carousel<T>({ slides, renderSlide, getKey, slidesPerView, autoplay, autoplayDelayMs, showDots, showCounter, showArrows, pauseOnHover, ariaLabel, onSelect, arrowSx, dotColor, dotActiveColor, emblaOptions, }: CarouselProps<T>): react_jsx_runtime.JSX.Element | null;
 
 /** Number of distinct gradient palettes. Useful for sizing slide cycles deterministically. */
 declare const GRADIENT_PALETTE_COUNT: 6;

package/dist/index.js

@@ -2371,7 +2371,7 @@ function useSearchHotkeys(inputRef, options2 = {}) {
     function onKeyDown(event) {
       if (enableK && event.key.toLowerCase() === "k") {
         const correctMod = mac ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
-        if (correctMod) {
+        if (correctMod && !event.shiftKey && !event.altKey) {
           event.preventDefault();
           inputRef.current?.focus();
           return;
@@ -2399,8 +2399,9 @@ var ShortcutHint = () => {
     setMounted(true);
   }, []);
   if (!mounted) return null;
-  const modKey = isMacPlatform() ? "\u2318" : "Ctrl";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  const isMac = isMacPlatform();
+  const label = isMac ? "\u2318\u2009K" : "Ctrl + K";
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_Box.default,
     {
       component: "span",
@@ -2417,10 +2418,7 @@ var ShortcutHint = () => {
         color: "text.secondary",
         lineHeight: 1
       },
-      children: [
-        modKey,
-        "K"
-      ]
+      children: label
     }
   );
 };
@@ -2438,21 +2436,19 @@ var SearchField = ({
     onChange?.(e);
     onSearch?.(e.target.value);
   };
-  const pillSx = variant === "pill" ? {
-    "& .MuiOutlinedInput-root": {
-      borderRadius: "999px",
-      paddingRight: "6px"
-    }
-  } : void 0;
+  const pillInputSx = variant === "pill" ? { borderRadius: "999px", paddingRight: "6px" } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     TextField,
     {
       placeholder,
       onChange: handleChange,
-      sx: [pillSx, ...Array.isArray(sx) ? sx : [sx]],
-      InputProps: {
-        startAdornment: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_InputAdornment.default, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Search.default, { style: { fontSize: 18, color: theme2.palette.text.disabled } }) }),
-        endAdornment: shortcutHint ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_InputAdornment.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ShortcutHint, {}) }) : void 0
+      sx,
+      slotProps: {
+        input: {
+          ...pillInputSx ? { sx: pillInputSx } : {},
+          startAdornment: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_InputAdornment.default, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Search.default, { style: { fontSize: 18, color: theme2.palette.text.disabled } }) }),
+          endAdornment: shortcutHint ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_InputAdornment.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ShortcutHint, {}) }) : void 0
+        }
       },
       ...props
     }
@@ -6052,7 +6048,9 @@ var import_IconButton6 = __toESM(require("@mui/material/IconButton"));
 var import_Typography5 = __toESM(require("@mui/material/Typography"));
 var import_ChevronLeft3 = __toESM(require("@mui/icons-material/ChevronLeft"));
 var import_ChevronRight3 = __toESM(require("@mui/icons-material/ChevronRight"));
+var import_styles30 = require("@mui/material/styles");
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
+var import_embla_carousel_autoplay = __toESM(require("embla-carousel-autoplay"));
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var pad2 = (n) => String(n).padStart(2, "0");
 function Carousel({
@@ -6070,33 +6068,49 @@ function Carousel({
   onSelect,
   arrowSx,
   dotColor,
-  dotActiveColor
+  dotActiveColor,
+  emblaOptions
 }) {
-  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)({ loop: true, align: "start" });
+  const plugins = (0, import_react19.useMemo)(
+    () => autoplay ? [
+      (0, import_embla_carousel_autoplay.default)({
+        delay: autoplayDelayMs,
+        stopOnInteraction: true,
+        stopOnMouseEnter: pauseOnHover
+      })
+    ] : [],
+    [autoplay, autoplayDelayMs, pauseOnHover]
+  );
+  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)(
+    { loop: true, align: "start", ...emblaOptions },
+    plugins
+  );
   const [selected, setSelected] = (0, import_react19.useState)(0);
-  const [paused, setPaused] = (0, import_react19.useState)(false);
+  const [snapCount, setSnapCount] = (0, import_react19.useState)(0);
   const count = slides.length;
   (0, import_react19.useEffect)(() => {
     if (!emblaApi) return;
+    const refreshSnaps = () => {
+      setSnapCount(emblaApi.scrollSnapList().length);
+    };
     const handleSelect = () => {
       const next = emblaApi.selectedScrollSnap();
       setSelected(next);
       onSelect?.(next);
     };
     emblaApi.on("select", handleSelect);
+    emblaApi.on("reInit", refreshSnaps);
+    refreshSnaps();
     handleSelect();
     return () => {
       emblaApi.off("select", handleSelect);
+      emblaApi.off("reInit", refreshSnaps);
     };
   }, [emblaApi, onSelect]);
-  (0, import_react19.useEffect)(() => {
-    if (!emblaApi || !autoplay || paused || count <= 1) return;
-    const id = window.setInterval(() => emblaApi.scrollNext(), autoplayDelayMs);
-    return () => window.clearInterval(id);
-  }, [emblaApi, autoplay, paused, count, autoplayDelayMs]);
   if (count === 0) return null;
   const showControls = count > 1;
   const slideBasis = `${100 / Math.max(1, slidesPerView)}%`;
+  const dotCount = snapCount > 0 ? snapCount : count;
   const arrowBaseSx = {
     position: "absolute",
     top: "50%",
@@ -6111,8 +6125,6 @@ function Carousel({
       role: "region",
       "aria-roledescription": "carousel",
       "aria-label": ariaLabel,
-      onPointerEnter: pauseOnHover ? () => setPaused(true) : void 0,
-      onPointerLeave: pauseOnHover ? () => setPaused(false) : void 0,
       sx: { position: "relative", width: "100%" },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_Box7.default, { ref: emblaRef, sx: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_Box7.default, { sx: { display: "flex" }, children: slides.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
@@ -6150,21 +6162,21 @@ function Carousel({
           import_Typography5.default,
           {
             variant: "caption",
-            sx: {
+            sx: (theme2) => ({
               position: "absolute",
               top: 12,
               right: 16,
               px: 1,
               py: 0.25,
               borderRadius: 1,
-              bgcolor: "rgba(0,0,0,0.5)",
+              bgcolor: (0, import_styles30.alpha)(theme2.palette.common.black, 0.5),
               color: "common.white",
               letterSpacing: 1
-            },
+            }),
             children: [
               pad2(selected + 1),
               " / ",
-              pad2(count)
+              pad2(dotCount)
             ]
           }
         ),
@@ -6182,7 +6194,7 @@ function Carousel({
               justifyContent: "center",
               gap: 1
             },
-            children: slides.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            children: Array.from({ length: dotCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               import_Box7.default,
               {
                 component: "button",
@@ -6202,7 +6214,7 @@ function Carousel({
                   transition: "width 0.2s ease, background 0.2s ease"
                 })
               },
-              getKey ? getKey(item, i) : i
+              i
             ))
           }
         )
@@ -6292,7 +6304,7 @@ function DefinitionRow({
         ...divider && {
           borderBottom: "1px solid",
           borderColor: "divider",
-          "&:last-of-type": { borderBottom: "none" }
+          "&:last-child": { borderBottom: "none" }
         }
       },
       children: [
@@ -6367,14 +6379,20 @@ function PanelDialog({
   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,
-      maxHeight: "100vh",
-      height: "100vh",
+      // 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
     }
   };
@@ -6383,7 +6401,7 @@ function PanelDialog({
     {
       open,
       onClose,
-      TransitionComponent,
+      slots: TransitionComponent ? { transition: TransitionComponent } : void 0,
       slotProps: {
         paper: {
           "aria-label": accessibleName,
@@ -6444,17 +6462,17 @@ var import_CardContent = __toESM(require("@mui/material/CardContent"));
 var import_CardHeader = __toESM(require("@mui/material/CardHeader"));
 var import_CardActions = __toESM(require("@mui/material/CardActions"));
 var import_CardMedia = __toESM(require("@mui/material/CardMedia"));
-var import_styles30 = require("@mui/material/styles");
+var import_styles31 = require("@mui/material/styles");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var CardMedia = (props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_CardMedia.default, { ...props });
-var StyledCard = (0, import_styles30.styled)(import_Card.default, {
+var StyledCard = (0, import_styles31.styled)(import_Card.default, {
   shouldForwardProp: (prop) => prop !== "hoverable" && prop !== "clickable" && prop !== "dsVariant"
 })(
   ({ theme: theme2, hoverable, clickable, dsVariant }) => ({
     borderRadius: 8,
     transition: "all 0.2s ease-in-out",
     ...dsVariant === "standard" && {
-      boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.12)",
+      boxShadow: theme2.shadows[1],
       backgroundColor: theme2.palette.background.paper
     },
     ...dsVariant === "tinted" && {
@@ -6472,7 +6490,7 @@ var StyledCard = (0, import_styles30.styled)(import_Card.default, {
     },
     ...hoverable && {
       "&:hover": {
-        boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
+        boxShadow: theme2.shadows[4],
         transform: "translateY(-2px)"
       }
     }
@@ -6509,12 +6527,12 @@ var CardActions = (props) => {
 
 // src/components/layout/List.tsx
 var import_material30 = require("@mui/material");
-var import_styles31 = require("@mui/material/styles");
+var import_styles32 = require("@mui/material/styles");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var List6 = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_material30.List, { ...props });
 };
-var StyledListItem = (0, import_styles31.styled)(import_material30.ListItem, {
+var StyledListItem = (0, import_styles32.styled)(import_material30.ListItem, {
   shouldForwardProp: (prop) => prop !== "hoverable"
 })(({ hoverable = true, theme: theme2 }) => ({
   border: `1px solid ${theme2.palette.grey[200]}`,
@@ -6551,14 +6569,14 @@ var ListItem4 = ({
 
 // src/components/layout/Avatar.tsx
 var import_Avatar = __toESM(require("@mui/material/Avatar"));
-var import_styles32 = require("@mui/material/styles");
+var import_styles33 = require("@mui/material/styles");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var sizeMap = {
   small: 32,
   medium: 40,
   large: 56
 };
-var StyledAvatar = (0, import_styles32.styled)(import_Avatar.default, {
+var StyledAvatar = (0, import_styles33.styled)(import_Avatar.default, {
   shouldForwardProp: (prop) => prop !== "avatarSize"
 })(({ avatarSize = 40, theme: theme2 }) => ({
   width: avatarSize,
@@ -6574,13 +6592,13 @@ var Avatar5 = ({ size: size3 = "medium", ...props }) => {
 
 // src/components/layout/Table.tsx
 var import_material31 = require("@mui/material");
-var import_styles33 = require("@mui/material/styles");
+var import_styles34 = require("@mui/material/styles");
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var StyledTableContainer = (0, import_styles33.styled)(import_material31.TableContainer)(({ theme: theme2 }) => ({
+var StyledTableContainer = (0, import_styles34.styled)(import_material31.TableContainer)(({ theme: theme2 }) => ({
   borderRadius: 8,
   border: `1px solid ${theme2.palette.grey[200]}`
 }));
-var StyledTableHead = (0, import_styles33.styled)(import_material31.TableHead)(({ theme: theme2 }) => ({
+var StyledTableHead = (0, import_styles34.styled)(import_material31.TableHead)(({ theme: theme2 }) => ({
   backgroundColor: theme2.palette.grey[50],
   "& .MuiTableCell-head": {
     fontWeight: 600,
@@ -6614,9 +6632,9 @@ var import_material32 = require("@mui/material");
 var import_Breadcrumbs = __toESM(require("@mui/material/Breadcrumbs"));
 var import_Link3 = __toESM(require("@mui/material/Link"));
 var import_Typography8 = __toESM(require("@mui/material/Typography"));
-var import_styles34 = require("@mui/material/styles");
+var import_styles35 = require("@mui/material/styles");
 var import_jsx_runtime60 = require("react/jsx-runtime");
-var StyledBreadcrumbs = (0, import_styles34.styled)(import_Breadcrumbs.default)(({ theme: theme2 }) => ({
+var StyledBreadcrumbs = (0, import_styles35.styled)(import_Breadcrumbs.default)(({ theme: theme2 }) => ({
   "& .MuiBreadcrumbs-ol": {
     flexWrap: "nowrap"
   },
@@ -6624,7 +6642,7 @@ var StyledBreadcrumbs = (0, import_styles34.styled)(import_Breadcrumbs.default)(
     color: theme2.palette.text.secondary
   }
 }));
-var StyledLink2 = (0, import_styles34.styled)(import_Link3.default)(({ theme: theme2 }) => ({
+var StyledLink2 = (0, import_styles35.styled)(import_Link3.default)(({ theme: theme2 }) => ({
   color: theme2.palette.primary.main,
   textDecoration: "none",
   "&:hover": {
@@ -6657,9 +6675,9 @@ var Breadcrumbs = ({ items, ...props }) => {
 // src/components/layout/Accordion.tsx
 var import_material33 = require("@mui/material");
 var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"));
-var import_styles35 = require("@mui/material/styles");
+var import_styles36 = require("@mui/material/styles");
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var StyledAccordion = (0, import_styles35.styled)(import_material33.Accordion)(({ theme: theme2 }) => ({
+var StyledAccordion = (0, import_styles36.styled)(import_material33.Accordion)(({ theme: theme2 }) => ({
   borderRadius: 8,
   boxShadow: "none",
   border: `1px solid ${theme2.palette.grey[200]}`,
@@ -6670,7 +6688,7 @@ var StyledAccordion = (0, import_styles35.styled)(import_material33.Accordion)((
     margin: 0
   }
 }));
-var StyledAccordionSummary = (0, import_styles35.styled)(import_material33.AccordionSummary)(({ theme: theme2 }) => ({
+var StyledAccordionSummary = (0, import_styles36.styled)(import_material33.AccordionSummary)(({ theme: theme2 }) => ({
   backgroundColor: theme2.palette.grey[50],
   borderRadius: "8px 8px 0 0",
   "&.Mui-expanded": {
@@ -6680,7 +6698,7 @@ var StyledAccordionSummary = (0, import_styles35.styled)(import_material33.Accor
     margin: "12px 0"
   }
 }));
-var StyledAccordionDetails = (0, import_styles35.styled)(import_material33.AccordionDetails)({
+var StyledAccordionDetails = (0, import_styles36.styled)(import_material33.AccordionDetails)({
   padding: "16px"
 });
 var Accordion = ({
@@ -6697,9 +6715,9 @@ var Accordion = ({
 
 // src/components/layout/Paper.tsx
 var import_Paper = __toESM(require("@mui/material/Paper"));
-var import_styles36 = require("@mui/material/styles");
+var import_styles37 = require("@mui/material/styles");
 var import_jsx_runtime62 = require("react/jsx-runtime");
-var StyledPaper = (0, import_styles36.styled)(import_Paper.default)(({ theme: theme2 }) => ({
+var StyledPaper = (0, import_styles37.styled)(import_Paper.default)(({ theme: theme2 }) => ({
   borderRadius: 8,
   "&.MuiPaper-elevation": {
     boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.08)"
@@ -6715,9 +6733,9 @@ var Paper = ({ variant = "elevation", ...props }) => {
 
 // src/components/layout/Divider.tsx
 var import_Divider = __toESM(require("@mui/material/Divider"));
-var import_styles37 = require("@mui/material/styles");
+var import_styles38 = require("@mui/material/styles");
 var import_jsx_runtime63 = require("react/jsx-runtime");
-var StyledDivider = (0, import_styles37.styled)(import_Divider.default)(({ theme: theme2 }) => ({
+var StyledDivider = (0, import_styles38.styled)(import_Divider.default)(({ theme: theme2 }) => ({
   borderColor: theme2.palette.grey[200]
 }));
 var Divider4 = ({ ...props }) => {
@@ -6738,9 +6756,9 @@ var import_material37 = require("@mui/material");
 
 // src/components/layout/AppBar.tsx
 var import_material38 = require("@mui/material");
-var import_styles38 = require("@mui/material/styles");
+var import_styles39 = require("@mui/material/styles");
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var StyledAppBar = (0, import_styles38.styled)(import_material38.AppBar, {
+var StyledAppBar = (0, import_styles39.styled)(import_material38.AppBar, {
   shouldForwardProp: (prop) => prop !== "appBarHeight"
 })(({ appBarHeight = 64, theme: theme2 }) => ({
   backgroundColor: theme2.palette.background.paper,
@@ -6749,7 +6767,7 @@ var StyledAppBar = (0, import_styles38.styled)(import_material38.AppBar, {
   height: appBarHeight,
   zIndex: 1300
 }));
-var StyledToolbar = (0, import_styles38.styled)(import_material38.Toolbar)(({ theme: theme2 }) => ({
+var StyledToolbar = (0, import_styles39.styled)(import_material38.Toolbar)(({ theme: theme2 }) => ({
   height: "100%",
   paddingLeft: theme2.spacing(2),
   paddingRight: theme2.spacing(2),
@@ -6935,7 +6953,7 @@ var import_Waves = __toESM(require("@mui/icons-material/Waves"));
 var import_RocketLaunchOutlined = __toESM(require("@mui/icons-material/RocketLaunchOutlined"));
 var import_InsertLink = __toESM(require("@mui/icons-material/InsertLink"));
 var import_SmartToyOutlined = __toESM(require("@mui/icons-material/SmartToyOutlined"));
-var import_styles39 = require("@mui/material/styles");
+var import_styles40 = require("@mui/material/styles");
 
 // src/hooks/useControlledExpand.ts
 var import_react21 = require("react");
@@ -6983,7 +7001,7 @@ var ENTITY_CHIP_TYPOGRAPHY = {
   lineHeight: 1.33,
   letterSpacing: "0.07px"
 };
-var StatusDot2 = (0, import_styles39.styled)(import_material40.Box, {
+var StatusDot2 = (0, import_styles40.styled)(import_material40.Box, {
   shouldForwardProp: (p) => p !== "status"
 })(({ status }) => ({
   width: 8,
@@ -7209,9 +7227,9 @@ var DeploymentDashboardCard = ({
 
 // src/components/layout/DeploymentEntityContextMenu/DeploymentEntityContextMenu.tsx
 var import_material41 = require("@mui/material");
-var import_styles40 = require("@mui/material/styles");
+var import_styles41 = require("@mui/material/styles");
 var import_jsx_runtime68 = require("react/jsx-runtime");
-var StyledMenu2 = (0, import_styles40.styled)(import_material41.Menu)({
+var StyledMenu2 = (0, import_styles41.styled)(import_material41.Menu)({
   "& .MuiPaper-root": {
     borderRadius: 4,
     boxShadow: deploymentSurfaceTokens.workspaceShadow,
@@ -7223,7 +7241,7 @@ var StyledMenu2 = (0, import_styles40.styled)(import_material41.Menu)({
     padding: 0
   }
 });
-var StyledMenuItem = (0, import_styles40.styled)(import_material41.MenuItem)({
+var StyledMenuItem = (0, import_styles41.styled)(import_material41.MenuItem)({
   gap: 8,
   padding: "8px 0",
   borderRadius: 4,
@@ -7246,7 +7264,7 @@ var StyledMenuItem = (0, import_styles40.styled)(import_material41.MenuItem)({
     color: deploymentSurfaceTokens.textPrimary
   }
 });
-var HighlightedMenuItem = (0, import_styles40.styled)(StyledMenuItem)({
+var HighlightedMenuItem = (0, import_styles41.styled)(StyledMenuItem)({
   backgroundColor: deploymentSurfaceTokens.highlightBg,
   border: `1px solid ${deploymentSurfaceTokens.highlightBorder}`,
   padding: 8,
@@ -7254,7 +7272,7 @@ var HighlightedMenuItem = (0, import_styles40.styled)(StyledMenuItem)({
     backgroundColor: deploymentSurfaceTokens.highlightBgHover
   }
 });
-var ToggleMenuItem = (0, import_styles40.styled)(import_material41.MenuItem)({
+var ToggleMenuItem = (0, import_styles41.styled)(import_material41.MenuItem)({
   gap: 8,
   padding: "8px 0",
   cursor: "default",
@@ -7270,7 +7288,7 @@ var ToggleMenuItem = (0, import_styles40.styled)(import_material41.MenuItem)({
     color: deploymentSurfaceTokens.textPrimary
   }
 });
-var EnableSwitch = (0, import_styles40.styled)(import_material41.Switch)(({ theme: theme2 }) => ({
+var EnableSwitch = (0, import_styles41.styled)(import_material41.Switch)(({ theme: theme2 }) => ({
   width: 32,
   height: 20,
   padding: 0,
@@ -7295,7 +7313,7 @@ var EnableSwitch = (0, import_styles40.styled)(import_material41.Switch)(({ them
     opacity: 1
   }
 }));
-var StyledDivider2 = (0, import_styles40.styled)(import_material41.Divider)({
+var StyledDivider2 = (0, import_styles41.styled)(import_material41.Divider)({
   margin: "0 !important",
   borderColor: deploymentSurfaceTokens.strokeOutside
 });
@@ -7454,7 +7472,7 @@ var contextMenuItems = {
 
 // src/components/layout/DeploymentDashboardTree/DeploymentDashboardTree.tsx
 var import_material42 = require("@mui/material");
-var import_styles41 = require("@mui/material/styles");
+var import_styles42 = require("@mui/material/styles");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var TREE_SP = {
   /** Vertical gap between sibling rows (Figma S / sp-8) */
@@ -7473,7 +7491,7 @@ var RAIL_OPACITY = {
   engagement: 0.4,
   agent: 0.4
 };
-var Rail = (0, import_styles41.styled)(import_material42.Box, {
+var Rail = (0, import_styles42.styled)(import_material42.Box, {
   shouldForwardProp: (p) => p !== "railColor"
 })(({ railColor }) => ({
   width: TREE_SP.railWidth,
@@ -7491,7 +7509,7 @@ var TreeRow = ({ node, depth, onExpandToggle, onCopyId, renderCard }) => {
   );
   const entityColor = deploymentEntityColors[node.entityType] ?? deploymentEntityColors.workspace;
   const railOpacity = RAIL_OPACITY[node.entityType] ?? 0.5;
-  const railColor = (0, import_styles41.alpha)(entityColor, railOpacity);
+  const railColor = (0, import_styles42.alpha)(entityColor, railOpacity);
   const renderedChildren = hasChildren && expanded ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_material42.Box, { sx: { display: "flex", gap: `${TREE_SP.railGap}px` }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Rail, { railColor, "aria-hidden": true, "data-rail": true }),
     /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
@@ -7572,11 +7590,11 @@ var DeploymentDashboardTree = ({
 
 // src/components/layout/DeploymentDashboardPanel/DeploymentDashboardPanel.tsx
 var import_material43 = require("@mui/material");
-var import_styles42 = require("@mui/material/styles");
+var import_styles43 = require("@mui/material/styles");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var PANEL_RADIUS = 12;
 var PANEL_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.08)";
-var StyledPanel = (0, import_styles42.styled)(import_material43.Box)({
+var StyledPanel = (0, import_styles43.styled)(import_material43.Box)({
   backgroundColor: deploymentSurfaceTokens.surfaceHigh,
   border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
   borderRadius: PANEL_RADIUS,
@@ -7822,7 +7840,7 @@ var WorkflowNode = ({
 var import_material46 = require("@mui/material");
 var import_Close4 = __toESM(require("@mui/icons-material/Close"));
 var import_Cancel = __toESM(require("@mui/icons-material/Cancel"));
-var import_styles43 = require("@mui/material/styles");
+var import_styles44 = require("@mui/material/styles");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var WorkflowTopBar = ({
   title = "Agent visualization flow chart",
@@ -7840,7 +7858,7 @@ var WorkflowTopBar = ({
   sx,
   ...boxProps
 }) => {
-  const chrome = (0, import_styles43.useTheme)().palette.workflow.chrome;
+  const chrome = (0, import_styles44.useTheme)().palette.workflow.chrome;
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     import_material46.Box,
     {
@@ -8164,7 +8182,7 @@ var import_Stop = __toESM(require("@mui/icons-material/Stop"));
 var import_ChevronLeft4 = __toESM(require("@mui/icons-material/ChevronLeft"));
 var import_ChevronRight5 = __toESM(require("@mui/icons-material/ChevronRight"));
 var import_Replay = __toESM(require("@mui/icons-material/Replay"));
-var import_styles44 = require("@mui/material/styles");
+var import_styles45 = require("@mui/material/styles");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 var SpeedButton = ({ value, selected, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
   Button,
@@ -8198,7 +8216,7 @@ var WorkflowTimeBar = ({
   sx,
   ...boxProps
 }) => {
-  const chrome = (0, import_styles44.useTheme)().palette.workflow.chrome;
+  const chrome = (0, import_styles45.useTheme)().palette.workflow.chrome;
   const boundedProgress = Math.max(0, Math.min(100, progress));
   const atFirstStep = currentStep <= 1;
   const atLastStep = currentStep >= totalSteps;
@@ -9531,7 +9549,7 @@ var TimeSeriesGraph = ({
 var import_react40 = require("react");
 var import_reactflow = __toESM(require("reactflow"));
 var import_material73 = require("@mui/material");
-var import_styles45 = require("@mui/material/styles");
+var import_styles46 = require("@mui/material/styles");
 var import_reactflow2 = require("reactflow");
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var FlowEditor = ({
@@ -9554,7 +9572,7 @@ var FlowEditor = ({
   onInit,
   ...reactFlowProps
 }) => {
-  const theme2 = (0, import_styles45.useTheme)();
+  const theme2 = (0, import_styles46.useTheme)();
   const handleInit = (0, import_react40.useCallback)(
     (instance) => {
       if (onInit) {