@cere/cere-design-system 0.0.40 → 0.0.43

package/dist/index.mjs

@@ -3,6 +3,18 @@ import { createTheme } from "@mui/material/styles";
 
 // src/theme/primitives.ts
 var primitives = {
+  /**
+   * Cere brand violet — the company's primary action color across web
+   * surfaces. Use via `semantic.action.primary` rather than reaching for
+   * raw hex.
+   */
+  violet: {
+    100: "#f0e0fb",
+    300: "#d0bcff",
+    500: "#aa44f2",
+    600: "#7c59ac"
+  },
+  /** Legacy MUI blue. Retained for code paths that still reach for blue tokens by name (e.g. ROB highlights). Not the brand primary. */
   blue: {
     500: "#1976d2",
     600: "#1565c0"
@@ -144,8 +156,8 @@ var workflowConnectionColors = {
 // src/theme/semantic.ts
 var semantic = {
   action: {
-    primary: primitives.blue[500],
-    primaryHover: primitives.blue[600],
+    primary: primitives.violet[500],
+    primaryHover: primitives.violet[600],
     disabled: primitives.grey[400]
   },
   surface: {
@@ -2160,7 +2172,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;
@@ -2181,15 +2193,16 @@ function useSearchHotkeys(inputRef, options2 = {}) {
 }
 
 // src/components/inputs/SearchField.tsx
-import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var ShortcutHint = () => {
   const [mounted, setMounted] = useState(false);
   useEffect2(() => {
     setMounted(true);
   }, []);
   if (!mounted) return null;
-  const modKey = isMacPlatform() ? "\u2318" : "Ctrl";
-  return /* @__PURE__ */ jsxs(
+  const isMac = isMacPlatform();
+  const label = isMac ? "\u2318\u2009K" : "Ctrl + K";
+  return /* @__PURE__ */ jsx8(
     Box,
     {
       component: "span",
@@ -2206,10 +2219,7 @@ var ShortcutHint = () => {
         color: "text.secondary",
         lineHeight: 1
       },
-      children: [
-        modKey,
-        "K"
-      ]
+      children: label
     }
   );
 };
@@ -2227,21 +2237,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__ */ jsx8(
     TextField,
     {
       placeholder,
       onChange: handleChange,
-      sx: [pillSx, ...Array.isArray(sx) ? sx : [sx]],
-      InputProps: {
-        startAdornment: /* @__PURE__ */ jsx8(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx8(SearchIcon, { style: { fontSize: 18, color: theme2.palette.text.disabled } }) }),
-        endAdornment: shortcutHint ? /* @__PURE__ */ jsx8(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx8(ShortcutHint, {}) }) : void 0
+      sx,
+      slotProps: {
+        input: {
+          ...pillInputSx ? { sx: pillInputSx } : {},
+          startAdornment: /* @__PURE__ */ jsx8(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx8(SearchIcon, { style: { fontSize: 18, color: theme2.palette.text.disabled } }) }),
+          endAdornment: shortcutHint ? /* @__PURE__ */ jsx8(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx8(ShortcutHint, {}) }) : void 0
+        }
       },
       ...props
     }
@@ -2290,7 +2298,7 @@ var ToggleButtonGroup = (props) => {
 // src/components/inputs/Switch.tsx
 import MuiSwitch from "@mui/material/Switch";
 import { styled as styled5 } from "@mui/material/styles";
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs } from "react/jsx-runtime";
 var StyledSwitch = styled5(MuiSwitch)(({ theme: theme2 }) => ({
   width: 44,
   height: 24,
@@ -2346,7 +2354,7 @@ var Switch = ({
   if (!label) {
     return switchComponent;
   }
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
     labelPosition === "left" && /* @__PURE__ */ jsx10("span", { children: label }),
     switchComponent,
     labelPosition === "right" && /* @__PURE__ */ jsx10("span", { children: label })
@@ -2451,7 +2459,7 @@ import Typography from "@mui/material/Typography";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
-import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
 var DateRangePicker = ({
   startDate,
   endDate,
@@ -2462,7 +2470,7 @@ var DateRangePicker = ({
   disabled = false,
   size: size3 = "small"
 }) => {
-  return /* @__PURE__ */ jsx13(LocalizationProvider, { dateAdapter: AdapterDateFns, children: /* @__PURE__ */ jsxs3(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+  return /* @__PURE__ */ jsx13(LocalizationProvider, { dateAdapter: AdapterDateFns, children: /* @__PURE__ */ jsxs2(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
     /* @__PURE__ */ jsx13(
       DatePicker,
       {
@@ -2503,7 +2511,7 @@ import { useCallback, useRef } from "react";
 import { forwardRef } from "react";
 import { Stack as Stack2, styled as styled8, avatarClasses, Typography as Typography2, Button as Button2 } from "@mui/material";
 import { ArrowDropUp, ArrowDropDown } from "@mui/icons-material";
-import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
 var Clickable = styled8(Button2)({
   padding: 0
 });
@@ -2529,7 +2537,7 @@ var Center = styled8(Typography2)(({ theme: theme2 }) => ({
   color: theme2.palette.text.primary
 }));
 var DropdownAnchor = forwardRef(
-  ({ open, label, leftElement, onOpen, variant, ...props }, ref) => /* @__PURE__ */ jsx14(Clickable, { ref, ...props, color: "inherit", variant: "text", onClick: onOpen, children: /* @__PURE__ */ jsxs4(Anchor, { variant, spacing: 1, direction: "row", alignItems: "stretch", children: [
+  ({ open, label, leftElement, onOpen, variant, ...props }, ref) => /* @__PURE__ */ jsx14(Clickable, { ref, ...props, color: "inherit", variant: "text", onClick: onOpen, children: /* @__PURE__ */ jsxs3(Anchor, { variant, spacing: 1, direction: "row", alignItems: "stretch", children: [
     /* @__PURE__ */ jsx14(Left, { children: leftElement }),
     /* @__PURE__ */ jsx14(Center, { variant: "body1", children: label }),
     variant !== "header" && (open ? /* @__PURE__ */ jsx14(ArrowDropUp, {}) : /* @__PURE__ */ jsx14(ArrowDropDown, {}))
@@ -2538,7 +2546,7 @@ var DropdownAnchor = forwardRef(
 DropdownAnchor.displayName = "DropdownAnchor";
 
 // src/components/navigation/Dropdown/Dropdown.tsx
-import { Fragment, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
 var Dropdown = ({
   open,
   label,
@@ -2556,7 +2564,7 @@ var Dropdown = ({
   const horizontal = direction === "left" ? "right" : "left";
   const onOpen = useCallback(() => onToggle?.(true), [onToggle]);
   const padding = dense ? 1 : 2;
-  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
     renderAnchor({ ref: anchorRef, onOpen, open }),
     /* @__PURE__ */ jsx15(
       Popover,
@@ -2607,7 +2615,7 @@ import {
   ListItemText,
   styled as styled9
 } from "@mui/material";
-import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
 var StyledListItemButton = styled9(ListItemButton, {
   shouldForwardProp: (prop) => prop !== "selected" && prop !== "size"
 })(({ theme: theme2, selected, size: size3 = "medium" }) => {
@@ -2646,7 +2654,7 @@ var SidebarItem = ({
   endIcon,
   children
 }) => {
-  return /* @__PURE__ */ jsxs6(StyledListItemButton, { selected, size: size3, onClick, children: [
+  return /* @__PURE__ */ jsxs5(StyledListItemButton, { selected, size: size3, onClick, children: [
     icon && /* @__PURE__ */ jsx16(ListItemIcon, { children: icon }),
     /* @__PURE__ */ jsx16(ListItemText, { primary: label }),
     endIcon && /* @__PURE__ */ jsx16("div", { style: { marginLeft: "auto" }, children: endIcon }),
@@ -2716,7 +2724,7 @@ import AddIcon from "@mui/icons-material/Add";
 import CheckIcon from "@mui/icons-material/Check";
 import SettingsIcon from "@mui/icons-material/Settings";
 import PersonAddAltIcon from "@mui/icons-material/PersonAddAlt";
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
 var ServiceSelectorButton = ({
   services,
   selectedServiceId,
@@ -2773,7 +2781,7 @@ var ServiceSelectorButton = ({
     return matchesSearch && matchesArchivedFilter;
   });
   if (compact) {
-    return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    return /* @__PURE__ */ jsxs6(Fragment2, { children: [
       /* @__PURE__ */ jsx18(Box3, { sx: { position: "relative" }, children: /* @__PURE__ */ jsx18(Tooltip, { title: "Select service", placement: "right", children: /* @__PURE__ */ jsx18(
         IconButton2,
         {
@@ -2825,10 +2833,10 @@ var ServiceSelectorButton = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsxs7(Box3, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
-      selectedService ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-        isManager ? /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsxs6(Box3, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
+      selectedService ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        isManager ? /* @__PURE__ */ jsxs6(
           Link,
           {
             underline: "hover",
@@ -2858,7 +2866,7 @@ var ServiceSelectorButton = ({
               selectedService.name
             ]
           }
-        ) : /* @__PURE__ */ jsxs7(
+        ) : /* @__PURE__ */ jsxs6(
           Box3,
           {
             sx: {
@@ -2996,7 +3004,7 @@ var ServiceSelectorPanel = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs6(
     Menu,
     {
       anchorEl,
@@ -3021,7 +3029,7 @@ var ServiceSelectorPanel = ({
         }
       },
       children: [
-        selectedService && /* @__PURE__ */ jsxs7(
+        selectedService && /* @__PURE__ */ jsxs6(
           Box3,
           {
             sx: {
@@ -3033,7 +3041,7 @@ var ServiceSelectorPanel = ({
               borderColor: "divider"
             },
             children: [
-              /* @__PURE__ */ jsxs7(Box3, { sx: {
+              /* @__PURE__ */ jsxs6(Box3, { sx: {
                 display: "flex",
                 alignItems: "center",
                 mb: 1.5
@@ -3051,7 +3059,7 @@ var ServiceSelectorPanel = ({
                     children: selectedService.name.charAt(0)
                   }
                 ),
-                /* @__PURE__ */ jsx18(Box3, { sx: { flex: 1 }, children: /* @__PURE__ */ jsxs7(Box3, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsx18(Box3, { sx: { flex: 1 }, children: /* @__PURE__ */ jsxs6(Box3, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                   /* @__PURE__ */ jsx18(Typography3, { variant: "subtitle1", sx: { fontWeight: 600, fontSize: "1rem" }, children: selectedService.name }),
                   /* @__PURE__ */ jsx18(
                     Box3,
@@ -3072,7 +3080,7 @@ var ServiceSelectorPanel = ({
                   )
                 ] }) })
               ] }),
-              (onOpenSettings || onOpenAddMember) && /* @__PURE__ */ jsxs7(Box3, { sx: { display: "flex", gap: 1 }, children: [
+              (onOpenSettings || onOpenAddMember) && /* @__PURE__ */ jsxs6(Box3, { sx: { display: "flex", gap: 1 }, children: [
                 onOpenAddMember && /* @__PURE__ */ jsx18(
                   Button3,
                   {
@@ -3143,8 +3151,8 @@ var ServiceSelectorPanel = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs7(Box3, { sx: { px: 2, pt: 2, pb: 1.5 }, children: [
-          /* @__PURE__ */ jsxs7(Box3, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
+        /* @__PURE__ */ jsxs6(Box3, { sx: { px: 2, pt: 2, pb: 1.5 }, children: [
+          /* @__PURE__ */ jsxs6(Box3, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
             /* @__PURE__ */ jsx18(
               TextField2,
               {
@@ -3183,8 +3191,8 @@ var ServiceSelectorPanel = ({
                 overflow: "auto",
                 py: 1
               },
-              children: loading ? /* @__PURE__ */ jsx18(Box3, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx18(Typography3, { variant: "body2", color: "text.secondary", children: "Loading services..." }) }) : filteredServices.length === 0 ? /* @__PURE__ */ jsx18(Box3, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx18(Typography3, { variant: "body2", color: "text.secondary", children: searchTerm ? `No ${showArchived ? "archived " : ""}services matching "${searchTerm}"` : showArchived ? "No archived services found" : "No active services found" }) }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
-                /* @__PURE__ */ jsxs7(
+              children: loading ? /* @__PURE__ */ jsx18(Box3, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx18(Typography3, { variant: "body2", color: "text.secondary", children: "Loading services..." }) }) : filteredServices.length === 0 ? /* @__PURE__ */ jsx18(Box3, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx18(Typography3, { variant: "body2", color: "text.secondary", children: searchTerm ? `No ${showArchived ? "archived " : ""}services matching "${searchTerm}"` : showArchived ? "No archived services found" : "No active services found" }) }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
+                /* @__PURE__ */ jsxs6(
                   Typography3,
                   {
                     variant: "caption",
@@ -3219,7 +3227,7 @@ var ServiceSelectorPanel = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx18(List2, { disablePadding: true, children: filteredServices.map((service) => /* @__PURE__ */ jsxs7(
+                /* @__PURE__ */ jsx18(List2, { disablePadding: true, children: filteredServices.map((service) => /* @__PURE__ */ jsxs6(
                   ListItem,
                   {
                     sx: {
@@ -3341,7 +3349,7 @@ import KeyboardArrowDownIcon2 from "@mui/icons-material/KeyboardArrowDown";
 import SearchIcon3 from "@mui/icons-material/Search";
 import AddIcon2 from "@mui/icons-material/Add";
 import CheckIcon2 from "@mui/icons-material/Check";
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
 var WorkspaceSelectorButton = ({
   workspaces,
   selectedWorkspaceId,
@@ -3373,9 +3381,9 @@ var WorkspaceSelectorButton = ({
   if (!workspaces || workspaces.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    /* @__PURE__ */ jsxs8(Box4, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
-      selectedWorkspace ? /* @__PURE__ */ jsx19(Fragment3, { children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsxs7(Box4, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
+      selectedWorkspace ? /* @__PURE__ */ jsx19(Fragment3, { children: /* @__PURE__ */ jsxs7(
         Link2,
         {
           underline: "hover",
@@ -3497,7 +3505,7 @@ var WorkspaceSelectorPanel = ({
           borderRadius: 2
         }
       },
-      children: /* @__PURE__ */ jsxs8(Box4, { children: [
+      children: /* @__PURE__ */ jsxs7(Box4, { children: [
         /* @__PURE__ */ jsx19(Box4, { sx: { px: 2, pt: 2, pb: 1.5 }, children: /* @__PURE__ */ jsx19(
           TextField3,
           {
@@ -3511,7 +3519,7 @@ var WorkspaceSelectorPanel = ({
             }
           }
         ) }),
-        /* @__PURE__ */ jsx19(Box4, { sx: { maxHeight: 400, overflowY: "auto" }, children: loading ? /* @__PURE__ */ jsx19(Box4, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx19(Typography4, { variant: "body2", color: "text.secondary", children: "Loading..." }) }) : filteredWorkspaces.length === 0 ? /* @__PURE__ */ jsx19(Box4, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx19(Typography4, { variant: "body2", color: "text.secondary", children: "No workspaces found" }) }) : /* @__PURE__ */ jsx19(List3, { dense: true, children: filteredWorkspaces.map((workspace) => /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsx19(Box4, { sx: { maxHeight: 400, overflowY: "auto" }, children: loading ? /* @__PURE__ */ jsx19(Box4, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx19(Typography4, { variant: "body2", color: "text.secondary", children: "Loading..." }) }) : filteredWorkspaces.length === 0 ? /* @__PURE__ */ jsx19(Box4, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx19(Typography4, { variant: "body2", color: "text.secondary", children: "No workspaces found" }) }) : /* @__PURE__ */ jsx19(List3, { dense: true, children: filteredWorkspaces.map((workspace) => /* @__PURE__ */ jsxs7(
           ListItem2,
           {
             onClick: () => handleSelect(workspace.id),
@@ -3534,7 +3542,7 @@ var WorkspaceSelectorPanel = ({
               /* @__PURE__ */ jsx19(
                 ListItemText3,
                 {
-                  primary: /* @__PURE__ */ jsxs8(Box4, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  primary: /* @__PURE__ */ jsxs7(Box4, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                     /* @__PURE__ */ jsx19(Typography4, { variant: "body2", fontWeight: 500, children: workspace.name }),
                     workspace.id === selectedWorkspaceId && /* @__PURE__ */ jsx19(CheckIcon2, { fontSize: "small", color: "primary" })
                   ] }),
@@ -3775,7 +3783,7 @@ import { Box as Box6, Typography as Typography5, IconButton as IconButton4, Tool
 import { styled as styled12 } from "@mui/material/styles";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 var HeaderContainer = styled12(Box6, {
   shouldForwardProp: (prop) => prop !== "isCollapsed"
 })(({ theme: theme2, isCollapsed }) => ({
@@ -3816,7 +3824,7 @@ var SideNavHeader = React5.memo(({
   collapsed = false
 }) => {
   const headerAriaLabel = ariaLabel || `${title} navigation header`;
-  const brandingContent = /* @__PURE__ */ jsxs9(Fragment4, { children: [
+  const brandingContent = /* @__PURE__ */ jsxs8(Fragment4, { children: [
     logo && /* @__PURE__ */ jsx22(
       Box6,
       {
@@ -3844,7 +3852,7 @@ var SideNavHeader = React5.memo(({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs8(
     HeaderContainer,
     {
       "data-testid": "sidenav-header-content",
@@ -3918,7 +3926,7 @@ import {
   Tooltip as Tooltip3
 } from "@mui/material";
 import { styled as styled13 } from "@mui/material/styles";
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
 var StyledListItemButton2 = styled13(ListItemButton2, {
   shouldForwardProp: (prop) => !["selected", "size", "iconPosition", "isCollapsed"].includes(prop)
 })(({ theme: theme2, selected, size: size3, isCollapsed }) => {
@@ -4035,7 +4043,7 @@ var NavigationItem = React6.memo(({
       }
     }
   );
-  const buttonContent = /* @__PURE__ */ jsxs10(
+  const buttonContent = /* @__PURE__ */ jsxs9(
     StyledListItemButton2,
     {
       selected,
@@ -4161,7 +4169,7 @@ import React8 from "react";
 import { Box as Box8, Typography as Typography6, Tooltip as Tooltip4 } from "@mui/material";
 import { styled as styled14 } from "@mui/material/styles";
 import PowerIcon from "@mui/icons-material/Power";
-import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
 var StatusPill = styled14(Box8, {
   shouldForwardProp: (prop) => !["variant", "interactive"].includes(prop)
 })(({ theme: theme2, variant = "info", interactive }) => {
@@ -4236,7 +4244,7 @@ var ConnectionStatus = React8.memo(({
       onClick();
     }
   };
-  const statusContent = /* @__PURE__ */ jsxs11(
+  const statusContent = /* @__PURE__ */ jsxs10(
     StatusPill,
     {
       role: "status",
@@ -4295,7 +4303,7 @@ import React9 from "react";
 import { Box as Box9, Avatar as Avatar3, Typography as Typography7, Button as Button5, IconButton as IconButton5, Tooltip as Tooltip5 } from "@mui/material";
 import { styled as styled15 } from "@mui/material/styles";
 import LogoutIcon from "@mui/icons-material/Logout";
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
 var AccountContainer = styled15(Box9, {
   shouldForwardProp: (prop) => !["layout", "isCompact"].includes(prop)
 })(({ theme: theme2, layout = "horizontal", isCompact }) => ({
@@ -4337,7 +4345,7 @@ var AccountSection = React9.memo(({
   const initials = user.initials || deriveInitials(user.name);
   const avatarSrc = user.avatarUrl;
   if (compact) {
-    return /* @__PURE__ */ jsxs12(AccountContainer, { layout, isCompact: true, "aria-label": "Account section", children: [
+    return /* @__PURE__ */ jsxs11(AccountContainer, { layout, isCompact: true, "aria-label": "Account section", children: [
       /* @__PURE__ */ jsx26(
         Tooltip5,
         {
@@ -4381,7 +4389,7 @@ var AccountSection = React9.memo(({
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsxs12(AccountContainer, { layout, isCompact: false, "aria-label": "Account section", children: [
+  return /* @__PURE__ */ jsxs11(AccountContainer, { layout, isCompact: false, "aria-label": "Account section", children: [
     /* @__PURE__ */ jsx26(
       Avatar3,
       {
@@ -4398,7 +4406,7 @@ var AccountSection = React9.memo(({
         children: initials
       }
     ),
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsxs11(
       Box9,
       {
         sx: {
@@ -4542,7 +4550,7 @@ import {
   Divider
 } from "@mui/material";
 import { styled as styled18 } from "@mui/material/styles";
-import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
 var StyledMenu = styled18(MuiMenu)(({ theme: theme2 }) => ({
   "& .MuiPaper-root": {
     borderRadius: 8,
@@ -4583,8 +4591,8 @@ var MenuItem = ({
   disabled = false,
   divider = false
 }) => {
-  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
-    /* @__PURE__ */ jsxs13(MuiMenuItem, { onClick, disabled, children: [
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    /* @__PURE__ */ jsxs12(MuiMenuItem, { onClick, disabled, children: [
       icon && /* @__PURE__ */ jsx29(ListItemIcon3, { children: icon }),
       /* @__PURE__ */ jsx29(ListItemText5, { children: label })
     ] }),
@@ -4648,7 +4656,7 @@ var Link3 = ({ underline = "hover", ...props }) => {
 };
 
 // src/components/navigation/Selector.tsx
-import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
 var Selector = ({
   options: options2,
   selectedId,
@@ -4681,12 +4689,12 @@ var Selector = ({
     onSelect(id);
     handleClose();
   };
-  const defaultRenderSelected = (option) => /* @__PURE__ */ jsxs14(Box10, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+  const defaultRenderSelected = (option) => /* @__PURE__ */ jsxs13(Box10, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
     option.avatar ? /* @__PURE__ */ jsx32(Avatar4, { src: option.avatar, sx: { width: 20, height: 20 } }) : option.icon ? option.icon : /* @__PURE__ */ jsx32(Avatar4, { sx: { width: 20, height: 20, bgcolor: theme2.palette.primary.main, fontSize: "0.7rem" }, children: option.name.charAt(0) }),
     /* @__PURE__ */ jsx32(Typography8, { variant: "body2", children: option.name })
   ] });
   if (compact) {
-    return /* @__PURE__ */ jsxs14(Fragment6, { children: [
+    return /* @__PURE__ */ jsxs13(Fragment6, { children: [
       /* @__PURE__ */ jsx32(IconButton, { onClick: handleOpen, size: "small", children: selectedOption ? selectedOption.avatar ? /* @__PURE__ */ jsx32(Avatar4, { src: selectedOption.avatar, sx: { width: 32, height: 32 } }) : /* @__PURE__ */ jsx32(Avatar4, { sx: { width: 32, height: 32, bgcolor: theme2.palette.primary.main }, children: selectedOption.name.charAt(0) }) : /* @__PURE__ */ jsx32(Avatar4, { sx: { width: 32, height: 32, bgcolor: theme2.palette.grey[400] }, children: "?" }) }),
       /* @__PURE__ */ jsx32(
         Menu4,
@@ -4697,7 +4705,7 @@ var Selector = ({
           PaperProps: {
             sx: { width, maxHeight: 600, mt: 1 }
           },
-          children: loading ? /* @__PURE__ */ jsx32(Box10, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx32(CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxs14(Fragment6, { children: [
+          children: loading ? /* @__PURE__ */ jsx32(Box10, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx32(CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
             options2.length > 5 && /* @__PURE__ */ jsx32(Box10, { sx: { p: 1, borderBottom: `1px solid ${theme2.palette.grey[200]}` }, children: /* @__PURE__ */ jsx32(
               TextField,
               {
@@ -4711,8 +4719,8 @@ var Selector = ({
                 }
               }
             ) }),
-            /* @__PURE__ */ jsxs14(List5, { sx: { maxHeight: 400, overflow: "auto" }, children: [
-              filteredOptions.map((option) => /* @__PURE__ */ jsxs14(
+            /* @__PURE__ */ jsxs13(List5, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+              filteredOptions.map((option) => /* @__PURE__ */ jsxs13(
                 ListItemButton3,
                 {
                   selected: option.id === selectedId,
@@ -4744,8 +4752,8 @@ var Selector = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
-    /* @__PURE__ */ jsxs14(Box10, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsxs13(Box10, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
       selectedOption ? renderSelected ? /* @__PURE__ */ jsx32(Link3, { onClick: handleOpen, underline: "hover", children: renderSelected(selectedOption) }) : /* @__PURE__ */ jsx32(Link3, { onClick: handleOpen, underline: "hover", children: defaultRenderSelected(selectedOption) }) : /* @__PURE__ */ jsx32(Typography8, { variant: "body2", color: "text.secondary", children: placeholder }),
       /* @__PURE__ */ jsx32(IconButton, { onClick: handleOpen, size: "small", sx: { p: 0.2, ml: 0.5 }, children: /* @__PURE__ */ jsx32(KeyboardArrowDownIcon3, { fontSize: "small" }) })
     ] }),
@@ -4758,7 +4766,7 @@ var Selector = ({
         PaperProps: {
           sx: { width, maxHeight: 600, mt: 1 }
         },
-        children: loading ? /* @__PURE__ */ jsx32(Box10, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx32(CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxs14(Fragment6, { children: [
+        children: loading ? /* @__PURE__ */ jsx32(Box10, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx32(CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
           options2.length > 5 && /* @__PURE__ */ jsx32(Box10, { sx: { p: 1, borderBottom: `1px solid ${theme2.palette.grey[200]}` }, children: /* @__PURE__ */ jsx32(
             TextField,
             {
@@ -4772,8 +4780,8 @@ var Selector = ({
               }
             }
           ) }),
-          /* @__PURE__ */ jsxs14(List5, { sx: { maxHeight: 400, overflow: "auto" }, children: [
-            filteredOptions.map((option) => /* @__PURE__ */ jsxs14(
+          /* @__PURE__ */ jsxs13(List5, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+            filteredOptions.map((option) => /* @__PURE__ */ jsxs13(
               ListItemButton3,
               {
                 selected: option.id === selectedId,
@@ -4922,7 +4930,7 @@ import Box11 from "@mui/material/Box";
 import Tooltip6 from "@mui/material/Tooltip";
 import CheckIcon3 from "@mui/icons-material/Check";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import { jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
 var COPY_FEEDBACK_MS = 1200;
 var CopyChip = ({
   text,
@@ -4950,7 +4958,7 @@ var CopyChip = ({
     if (timerRef.current != null) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => setCopied(false), COPY_FEEDBACK_MS);
   };
-  return /* @__PURE__ */ jsx35(Tooltip6, { title: copied ? tooltipCopiedLabel : tooltipLabel, placement: "top", children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx35(Tooltip6, { title: copied ? tooltipCopiedLabel : tooltipLabel, placement: "top", children: /* @__PURE__ */ jsxs14(
     Box11,
     {
       component: "button",
@@ -5044,7 +5052,7 @@ import Snackbar from "@mui/material/Snackbar";
 import Alert from "@mui/material/Alert";
 import ContentCopyIcon2 from "@mui/icons-material/ContentCopy";
 import { styled as styled24 } from "@mui/material/styles";
-import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var IDContainer = styled24(Box12)(() => ({
   display: "inline-flex",
   alignItems: "center",
@@ -5080,9 +5088,9 @@ var IDBlock = ({
   const handleSnackbarClose = () => {
     setSnackbar((prev) => ({ ...prev, open: false }));
   };
-  return /* @__PURE__ */ jsxs16(Fragment7, { children: [
-    /* @__PURE__ */ jsxs16(IDContainer, { children: [
-      /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
+    /* @__PURE__ */ jsxs15(IDContainer, { children: [
+      /* @__PURE__ */ jsxs15(
         Typography9,
         {
           variant: "body2",
@@ -5210,7 +5218,7 @@ import MuiAlert from "@mui/material/Alert";
 import { AlertTitle as MuiAlertTitle } from "@mui/material";
 import MuiSnackbar from "@mui/material/Snackbar";
 import { styled as styled27 } from "@mui/material/styles";
-import { jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
 var StyledAlert = styled27(MuiAlert)({
   borderRadius: 8,
   "&.MuiAlert-filled": {
@@ -5223,7 +5231,7 @@ var Alert2 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs17(StyledAlert, { severity, ...props, children: [
+  return /* @__PURE__ */ jsxs16(StyledAlert, { severity, ...props, children: [
     title && /* @__PURE__ */ jsx40(MuiAlertTitle, { children: title }),
     children
   ] });
@@ -5293,14 +5301,14 @@ var Snackbar2 = ({
 
 // src/components/feedback/EmptyState.tsx
 import { Box as Box13, Typography as Typography10 } from "@mui/material";
-import { jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
 var EmptyState = ({
   title = "No items found",
   description,
   icon,
   action
 }) => {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs17(
     Box13,
     {
       sx: {
@@ -5334,13 +5342,13 @@ var EmptyState = ({
 
 // src/components/feedback/Loading.tsx
 import { Box as Box14, CircularProgress as CircularProgress3, Typography as Typography11 } from "@mui/material";
-import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
 var Loading = ({
   message = "Loading...",
   size: size3 = 40,
   fullScreen = false
 }) => {
-  const content = /* @__PURE__ */ jsxs19(
+  const content = /* @__PURE__ */ jsxs18(
     Box14,
     {
       sx: {
@@ -5373,13 +5381,13 @@ var Loading = ({
 
 // src/components/feedback/AppLoading.tsx
 import { Box as Box15, CircularProgress as CircularProgress4, Typography as Typography12 } from "@mui/material";
-import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
 var AppLoading = ({
   message = "Loading...",
   logo = "/icons/logo.png",
   sx = {}
 }) => {
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs19(
     Box15,
     {
       sx: [
@@ -5438,8 +5446,8 @@ import { Stack as Stack3, styled as styled28, svgIconClasses } from "@mui/materi
 // src/components/icons/CereIcon.tsx
 import { memo } from "react";
 import { SvgIcon } from "@mui/material";
-import { jsx as jsx45, jsxs as jsxs21 } from "react/jsx-runtime";
-var CereIcon = memo((props) => /* @__PURE__ */ jsxs21(SvgIcon, { ...props, viewBox: "0 0 24 28", children: [
+import { jsx as jsx45, jsxs as jsxs20 } from "react/jsx-runtime";
+var CereIcon = memo((props) => /* @__PURE__ */ jsxs20(SvgIcon, { ...props, viewBox: "0 0 24 28", children: [
   /* @__PURE__ */ jsx45("g", { clipPath: "url(#a)", children: /* @__PURE__ */ jsx45(
     "path",
     {
@@ -5451,7 +5459,7 @@ var CereIcon = memo((props) => /* @__PURE__ */ jsxs21(SvgIcon, { ...props, viewB
 ] }));
 
 // src/components/layout/Logo.tsx
-import { jsx as jsx46, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
 var sizesMap = {
   large: 38,
   medium: 32,
@@ -5462,7 +5470,7 @@ var Container = styled28(Stack3)({
     fontSize: "inherit"
   }
 });
-var Logo = ({ children, size: size3 = "medium", icon = /* @__PURE__ */ jsx46(CereIcon, { color: "primary" }) }) => /* @__PURE__ */ jsxs22(Container, { direction: "row", alignItems: "center", spacing: 2, fontSize: sizesMap[size3], children: [
+var Logo = ({ children, size: size3 = "medium", icon = /* @__PURE__ */ jsx46(CereIcon, { color: "primary" }) }) => /* @__PURE__ */ jsxs21(Container, { direction: "row", alignItems: "center", spacing: 2, fontSize: sizesMap[size3], children: [
   icon,
   children && /* @__PURE__ */ jsx46(Stack3, { children })
 ] });
@@ -5481,7 +5489,7 @@ import {
   CircularProgress as CircularProgress6
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
 var Dialog = ({
   open,
   title,
@@ -5505,7 +5513,7 @@ var Dialog = ({
     if (e) e.stopPropagation();
     onClose();
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs22(
     MuiDialog,
     {
       open,
@@ -5522,9 +5530,9 @@ var Dialog = ({
         ...dialogProps.PaperProps
       },
       children: [
-        /* @__PURE__ */ jsxs23(DialogTitle, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2 }, children: [
+        /* @__PURE__ */ jsxs22(DialogTitle, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2 }, children: [
           /* @__PURE__ */ jsx47(Box16, { sx: { display: "flex", alignItems: "center" }, children: typeof title === "string" ? /* @__PURE__ */ jsx47(Typography13, { variant: "h6", children: title }) : title }),
-          /* @__PURE__ */ jsxs23(Box16, { sx: { display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxs22(Box16, { sx: { display: "flex", alignItems: "center" }, children: [
             headerAction,
             /* @__PURE__ */ jsx47(
               IconButton7,
@@ -5540,9 +5548,9 @@ var Dialog = ({
         ] }),
         dividers && /* @__PURE__ */ jsx47(Divider2, {}),
         /* @__PURE__ */ jsx47(DialogContent, { dividers, children }),
-        (showActions || customActions) && /* @__PURE__ */ jsxs23(Fragment8, { children: [
+        (showActions || customActions) && /* @__PURE__ */ jsxs22(Fragment8, { children: [
           dividers && /* @__PURE__ */ jsx47(Divider2, {}),
-          /* @__PURE__ */ jsx47(DialogActions, { children: customActions || /* @__PURE__ */ jsxs23(Fragment8, { children: [
+          /* @__PURE__ */ jsx47(DialogActions, { children: customActions || /* @__PURE__ */ jsxs22(Fragment8, { children: [
             /* @__PURE__ */ jsx47(
               Button6,
               {
@@ -5595,7 +5603,7 @@ function resolveDrawerWidth(width, theme2, defaultWidth) {
 }
 
 // src/components/layout/Drawer.tsx
-import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
 var StyledDrawer2 = styled29(MuiDrawer, {
   shouldForwardProp: (prop) => prop !== "width" && prop !== "miniWidth" && prop !== "collapsed" && prop !== "topOffset"
 })(({ theme: theme2, width, miniWidth = 72, collapsed, topOffset = 0 }) => {
@@ -5645,7 +5653,7 @@ var Drawer2 = ({
   const finalWidth = width ?? defaultWidth;
   const shouldShowClose = showCloseButton ?? (variant === "temporary" || variant === "persistent");
   const hasHeader = title || header || shouldShowClose || tabs;
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs23(
     StyledDrawer2,
     {
       width: finalWidth,
@@ -5670,7 +5678,7 @@ var Drawer2 = ({
       },
       ...props,
       children: [
-        hasHeader && /* @__PURE__ */ jsxs24(Fragment9, { children: [
+        hasHeader && /* @__PURE__ */ jsxs23(Fragment9, { children: [
           /* @__PURE__ */ jsx48(
             Box17,
             {
@@ -5683,7 +5691,7 @@ var Drawer2 = ({
                 borderBottom: 1,
                 borderColor: "divider"
               },
-              children: header || /* @__PURE__ */ jsxs24(Fragment9, { children: [
+              children: header || /* @__PURE__ */ jsxs23(Fragment9, { children: [
                 /* @__PURE__ */ jsx48(Box17, { sx: { flex: 1 }, children: typeof title === "string" ? /* @__PURE__ */ jsx48(Typography14, { variant: "h6", children: title }) : title }),
                 shouldShowClose && onClose && /* @__PURE__ */ jsx48(
                   IconButton8,
@@ -5733,7 +5741,7 @@ var Drawer2 = ({
             children
           }
         ),
-        footer && /* @__PURE__ */ jsxs24(Fragment9, { children: [
+        footer && /* @__PURE__ */ jsxs23(Fragment9, { children: [
           /* @__PURE__ */ jsx48(Divider3, {}),
           /* @__PURE__ */ jsx48(
             Box17,
@@ -5755,10 +5763,10 @@ var Drawer2 = ({
 // src/components/layout/MetaField.tsx
 import Box18 from "@mui/material/Box";
 import Typography15 from "@mui/material/Typography";
-import { jsx as jsx49, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs24 } from "react/jsx-runtime";
 var MetaField = ({ label, value, mono = false, title }) => {
   const resolvedTitle = title ?? (typeof value === "string" ? value : void 0);
-  return /* @__PURE__ */ jsxs25(Box18, { sx: { display: "flex", flexDirection: "column", gap: 0.25, minWidth: 0 }, children: [
+  return /* @__PURE__ */ jsxs24(Box18, { sx: { display: "flex", flexDirection: "column", gap: 0.25, minWidth: 0 }, children: [
     /* @__PURE__ */ jsx49(
       Typography15,
       {
@@ -5797,7 +5805,7 @@ import Box19 from "@mui/material/Box";
 import IconButton9 from "@mui/material/IconButton";
 import ChevronLeftIcon2 from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon2 from "@mui/icons-material/ChevronRight";
-import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
 var EDGE_TOLERANCE_PX = 4;
 var ScrollableRow = ({
   children,
@@ -5837,7 +5845,7 @@ var ScrollableRow = ({
     if (!el) return;
     el.scrollBy({ left: dir * Math.max(minNudge, el.clientWidth * nudgeFraction), behavior: "smooth" });
   };
-  return /* @__PURE__ */ jsxs26(Box19, { sx: { position: "relative", flex: 1, minWidth: 0 }, children: [
+  return /* @__PURE__ */ jsxs25(Box19, { sx: { position: "relative", flex: 1, minWidth: 0 }, children: [
     /* @__PURE__ */ jsx50(
       Box19,
       {
@@ -5896,7 +5904,7 @@ var ScrollableRow = ({
 // src/components/layout/SectionRow.tsx
 import Box20 from "@mui/material/Box";
 import Typography16 from "@mui/material/Typography";
-import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs26 } from "react/jsx-runtime";
 function SectionRow({
   title,
   subtitle,
@@ -5905,8 +5913,8 @@ function SectionRow({
   rightLabel,
   children
 }) {
-  return /* @__PURE__ */ jsxs27(Box20, { component: "section", sx: { mb: 4 }, children: [
-    /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs26(Box20, { component: "section", sx: { mb: 4 }, children: [
+    /* @__PURE__ */ jsxs26(
       Box20,
       {
         component: "header",
@@ -5918,7 +5926,7 @@ function SectionRow({
           mb: 1.5
         },
         children: [
-          /* @__PURE__ */ jsxs27(Box20, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs26(Box20, { sx: { minWidth: 0 }, children: [
             /* @__PURE__ */ jsx51(Typography16, { component: "h2", variant: "h6", sx: { m: 0 }, children: title }),
             subtitle && /* @__PURE__ */ jsx51(Typography16, { variant: "caption", sx: { color: "text.secondary" }, children: subtitle })
           ] }),
@@ -5931,14 +5939,16 @@ function SectionRow({
 }
 
 // src/components/layout/Carousel.tsx
-import { useEffect as useEffect5, useState as useState10 } from "react";
+import { useEffect as useEffect5, useMemo, useState as useState10 } from "react";
 import Box21 from "@mui/material/Box";
 import IconButton10 from "@mui/material/IconButton";
 import Typography17 from "@mui/material/Typography";
 import ChevronLeftIcon3 from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon3 from "@mui/icons-material/ChevronRight";
+import { alpha } from "@mui/material/styles";
 import useEmblaCarousel from "embla-carousel-react";
-import { Fragment as Fragment10, jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
+import Autoplay from "embla-carousel-autoplay";
+import { Fragment as Fragment10, jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
 var pad2 = (n) => String(n).padStart(2, "0");
 function Carousel({
   slides,
@@ -5955,33 +5965,49 @@ function Carousel({
   onSelect,
   arrowSx,
   dotColor,
-  dotActiveColor
+  dotActiveColor,
+  emblaOptions
 }) {
-  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "start" });
+  const plugins = useMemo(
+    () => autoplay ? [
+      Autoplay({
+        delay: autoplayDelayMs,
+        stopOnInteraction: true,
+        stopOnMouseEnter: pauseOnHover
+      })
+    ] : [],
+    [autoplay, autoplayDelayMs, pauseOnHover]
+  );
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    { loop: true, align: "start", ...emblaOptions },
+    plugins
+  );
   const [selected, setSelected] = useState10(0);
-  const [paused, setPaused] = useState10(false);
+  const [snapCount, setSnapCount] = useState10(0);
   const count = slides.length;
   useEffect5(() => {
     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]);
-  useEffect5(() => {
-    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%",
@@ -5990,14 +6016,12 @@ function Carousel({
     boxShadow: 1,
     "&:hover": { bgcolor: "background.paper" }
   };
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs27(
     Box21,
     {
       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__ */ jsx52(Box21, { ref: emblaRef, sx: { overflow: "hidden" }, children: /* @__PURE__ */ jsx52(Box21, { sx: { display: "flex" }, children: slides.map((item, i) => /* @__PURE__ */ jsx52(
@@ -6011,7 +6035,7 @@ function Carousel({
           },
           getKey ? getKey(item, i) : i
         )) }) }),
-        showControls && showArrows && /* @__PURE__ */ jsxs28(Fragment10, { children: [
+        showControls && showArrows && /* @__PURE__ */ jsxs27(Fragment10, { children: [
           /* @__PURE__ */ jsx52(
             IconButton10,
             {
@@ -6031,25 +6055,25 @@ function Carousel({
             }
           )
         ] }),
-        showControls && showCounter && /* @__PURE__ */ jsxs28(
+        showControls && showCounter && /* @__PURE__ */ jsxs27(
           Typography17,
           {
             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: alpha(theme2.palette.common.black, 0.5),
               color: "common.white",
               letterSpacing: 1
-            },
+            }),
             children: [
               pad2(selected + 1),
               " / ",
-              pad2(count)
+              pad2(dotCount)
             ]
           }
         ),
@@ -6067,7 +6091,7 @@ function Carousel({
               justifyContent: "center",
               gap: 1
             },
-            children: slides.map((item, i) => /* @__PURE__ */ jsx52(
+            children: Array.from({ length: dotCount }).map((_, i) => /* @__PURE__ */ jsx52(
               Box21,
               {
                 component: "button",
@@ -6087,7 +6111,7 @@ function Carousel({
                   transition: "width 0.2s ease, background 0.2s ease"
                 })
               },
-              getKey ? getKey(item, i) : i
+              i
             ))
           }
         )
@@ -6155,7 +6179,7 @@ function GradientSurface({ index, children, sx }) {
 // src/components/layout/DefinitionRow.tsx
 import Box23 from "@mui/material/Box";
 import Typography18 from "@mui/material/Typography";
-import { jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
 function DefinitionRow({
   icon,
   label,
@@ -6165,7 +6189,7 @@ function DefinitionRow({
   dense = false,
   divider = true
 }) {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs28(
     Box23,
     {
       "data-density": dense ? "dense" : "normal",
@@ -6177,16 +6201,16 @@ function DefinitionRow({
         ...divider && {
           borderBottom: "1px solid",
           borderColor: "divider",
-          "&:last-of-type": { borderBottom: "none" }
+          "&:last-child": { borderBottom: "none" }
         }
       },
       children: [
         icon && /* @__PURE__ */ jsx54(Box23, { sx: { display: "flex", alignItems: "center", color: "text.secondary" }, children: icon }),
-        /* @__PURE__ */ jsxs29(Box23, { sx: { minWidth: 0, flex: 1 }, children: [
+        /* @__PURE__ */ jsxs28(Box23, { sx: { minWidth: 0, flex: 1 }, children: [
           /* @__PURE__ */ jsx54(Typography18, { variant: "body2", sx: { fontWeight: 500, lineHeight: 1.2 }, children: label }),
           sublabel && /* @__PURE__ */ jsx54(Typography18, { variant: "caption", sx: { color: "text.secondary" }, children: sublabel })
         ] }),
-        (value || hint) && /* @__PURE__ */ jsxs29(
+        (value || hint) && /* @__PURE__ */ jsxs28(
           Box23,
           {
             sx: {
@@ -6214,7 +6238,7 @@ import Box24 from "@mui/material/Box";
 import Typography19 from "@mui/material/Typography";
 import Slide from "@mui/material/Slide";
 import CloseIcon3 from "@mui/icons-material/Close";
-import { jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
 var WIDTH_PX = {
   sm: 420,
   md: 640,
@@ -6252,23 +6276,29 @@ 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
     }
   };
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs29(
     MuiDialog2,
     {
       open,
       onClose,
-      TransitionComponent,
+      slots: TransitionComponent ? { transition: TransitionComponent } : void 0,
       slotProps: {
         paper: {
           "aria-label": accessibleName,
@@ -6277,7 +6307,7 @@ function PanelDialog({
         ...backdropSx ? { backdrop: { sx: backdropSx } } : {}
       },
       children: [
-        !hideHeader && /* @__PURE__ */ jsxs30(
+        !hideHeader && /* @__PURE__ */ jsxs29(
           Box24,
           {
             sx: {
@@ -6292,7 +6322,7 @@ function PanelDialog({
             },
             children: [
               /* @__PURE__ */ jsx55(Box24, { sx: { display: "flex", alignItems: "center", minWidth: 0 }, children: typeof title === "string" ? /* @__PURE__ */ jsx55(Typography19, { variant: "h6", noWrap: true, children: title }) : title }),
-              /* @__PURE__ */ jsxs30(Box24, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsxs29(Box24, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                 headerActions,
                 /* @__PURE__ */ jsx55(IconButton11, { "aria-label": "Close", onClick: onClose, edge: "end", size: "small", children: /* @__PURE__ */ jsx55(CloseIcon3, { fontSize: "small" }) })
               ] })
@@ -6339,7 +6369,7 @@ var StyledCard = styled30(MuiCard, {
     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" && {
@@ -6357,7 +6387,7 @@ var StyledCard = styled30(MuiCard, {
     },
     ...hoverable && {
       "&:hover": {
-        boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
+        boxShadow: theme2.shadows[4],
         transform: "translateY(-2px)"
       }
     }
@@ -6401,7 +6431,7 @@ import {
   ListItemSecondaryAction
 } from "@mui/material";
 import { styled as styled31 } from "@mui/material/styles";
-import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs30 } from "react/jsx-runtime";
 var List6 = (props) => {
   return /* @__PURE__ */ jsx57(MuiList, { ...props });
 };
@@ -6426,7 +6456,7 @@ var ListItem4 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs31(StyledListItem, { hoverable, ...props, children: [
+  return /* @__PURE__ */ jsxs30(StyledListItem, { hoverable, ...props, children: [
     icon && /* @__PURE__ */ jsx57(ListItemIcon4, { children: icon }),
     (primary || secondary) && /* @__PURE__ */ jsx57(
       ListItemText7,
@@ -6561,7 +6591,7 @@ import {
 } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { styled as styled35 } from "@mui/material/styles";
-import { jsx as jsx61, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
 var StyledAccordion = styled35(MuiAccordion)(({ theme: theme2 }) => ({
   borderRadius: 8,
   boxShadow: "none",
@@ -6592,7 +6622,7 @@ var Accordion = ({
   defaultExpanded = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs32(StyledAccordion, { defaultExpanded, ...props, children: [
+  return /* @__PURE__ */ jsxs31(StyledAccordion, { defaultExpanded, ...props, children: [
     /* @__PURE__ */ jsx61(StyledAccordionSummary, { expandIcon: /* @__PURE__ */ jsx61(ExpandMoreIcon, {}), children: title }),
     /* @__PURE__ */ jsx61(StyledAccordionDetails, { children })
   ] });
@@ -6680,7 +6710,7 @@ import Typography22 from "@mui/material/Typography";
 import IconButton12 from "@mui/material/IconButton";
 import Divider5 from "@mui/material/Divider";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import { jsx as jsx66, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs32 } from "react/jsx-runtime";
 var EntityHeader = ({
   title,
   subtitle,
@@ -6699,8 +6729,8 @@ var EntityHeader = ({
     const { label, count } = primaryAction;
     return count !== void 0 ? `${label} (${count})` : label;
   };
-  return /* @__PURE__ */ jsxs33(Box26, { children: [
-    /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs32(Box26, { children: [
+    /* @__PURE__ */ jsxs32(
       Box26,
       {
         sx: {
@@ -6712,7 +6742,7 @@ var EntityHeader = ({
           gap: 1
         },
         children: [
-          /* @__PURE__ */ jsxs33(
+          /* @__PURE__ */ jsxs32(
             Box26,
             {
               sx: {
@@ -6722,7 +6752,7 @@ var EntityHeader = ({
                 flexWrap: "wrap"
               },
               children: [
-                /* @__PURE__ */ jsxs33(
+                /* @__PURE__ */ jsxs32(
                   Box26,
                   {
                     sx: {
@@ -6767,7 +6797,7 @@ var EntityHeader = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs33(
+          /* @__PURE__ */ jsxs32(
             Box26,
             {
               sx: {
@@ -6863,7 +6893,7 @@ function useControlledExpand(controlledExpanded, onToggle, defaultExpanded = fal
 }
 
 // src/components/layout/DeploymentDashboardCard/DeploymentDashboardCard.tsx
-import { Fragment as Fragment11, jsx as jsx67, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx67, jsxs as jsxs33 } from "react/jsx-runtime";
 var ENTITY_LABELS = {
   workspace: "Workspace",
   stream: "Stream",
@@ -6907,7 +6937,7 @@ var StatusDot2 = styled39(Box27, {
   backgroundColor: status ? STATUS_DOT_COLORS[status] ?? "transparent" : "transparent",
   flexShrink: 0
 }));
-var EntityChip = ({ entityType, color }) => /* @__PURE__ */ jsxs34(
+var EntityChip = ({ entityType, color }) => /* @__PURE__ */ jsxs33(
   Box27,
   {
     sx: {
@@ -6941,10 +6971,10 @@ var EntityChip = ({ entityType, color }) => /* @__PURE__ */ jsxs34(
     ]
   }
 );
-var CapacityBar = ({ value, indented = false }) => /* @__PURE__ */ jsxs34(Box27, { sx: { pl: indented ? "40px" : 0, pr: "20px", py: 1 }, children: [
-  /* @__PURE__ */ jsxs34(Box27, { sx: { display: "flex", justifyContent: "space-between", mb: 1 }, children: [
+var CapacityBar = ({ value, indented = false }) => /* @__PURE__ */ jsxs33(Box27, { sx: { pl: indented ? "40px" : 0, pr: "20px", py: 1 }, children: [
+  /* @__PURE__ */ jsxs33(Box27, { sx: { display: "flex", justifyContent: "space-between", mb: 1 }, children: [
     /* @__PURE__ */ jsx67(Typography23, { variant: "body2", sx: { color: deploymentSurfaceTokens.textPrimary }, children: "Capacity" }),
-    /* @__PURE__ */ jsxs34(Typography23, { variant: "body2", sx: { color: deploymentSurfaceTokens.accentBlue }, children: [
+    /* @__PURE__ */ jsxs33(Typography23, { variant: "body2", sx: { color: deploymentSurfaceTokens.accentBlue }, children: [
       value,
       "%"
     ] })
@@ -6989,7 +7019,7 @@ var getActionButtonStyles = (action) => {
   };
   return { ...baseStyles, ...variantStyles };
 };
-var CardAction = ({ action }) => /* @__PURE__ */ jsxs34(
+var CardAction = ({ action }) => /* @__PURE__ */ jsxs33(
   Box27,
   {
     component: action.onClick ? "button" : "span",
@@ -7034,7 +7064,7 @@ var DeploymentDashboardCard = ({
     return Math.min(100, Math.max(0, capacity2));
   };
   const capacityClamped = getClampedCapacity(capacity);
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs33(
     Paper2,
     {
       className,
@@ -7051,7 +7081,7 @@ var DeploymentDashboardCard = ({
         gap: 0
       },
       children: [
-        /* @__PURE__ */ jsxs34(
+        /* @__PURE__ */ jsxs33(
           Box27,
           {
             sx: {
@@ -7061,8 +7091,8 @@ var DeploymentDashboardCard = ({
               width: "100%"
             },
             children: [
-              /* @__PURE__ */ jsxs34(Box27, { sx: { display: "flex", flexDirection: "column", gap: 0.5, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsxs34(Box27, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
+              /* @__PURE__ */ jsxs33(Box27, { sx: { display: "flex", flexDirection: "column", gap: 0.5, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxs33(Box27, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
                   expandable ? /* @__PURE__ */ jsx67(
                     IconButton13,
                     {
@@ -7086,7 +7116,7 @@ var DeploymentDashboardCard = ({
                   ),
                   idDisplay != null && /* @__PURE__ */ jsx67(IDBlock, { id: idDisplay, label: "ID", entityType, onCopy: onCopyId })
                 ] }),
-                (createdAt != null || updatedAt != null) && /* @__PURE__ */ jsxs34(
+                (createdAt != null || updatedAt != null) && /* @__PURE__ */ jsxs33(
                   Box27,
                   {
                     sx: {
@@ -7096,11 +7126,11 @@ var DeploymentDashboardCard = ({
                       color: deploymentSurfaceTokens.textSecondary
                     },
                     children: [
-                      createdAt != null && /* @__PURE__ */ jsxs34(Typography23, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
+                      createdAt != null && /* @__PURE__ */ jsxs33(Typography23, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
                         "Created: ",
                         createdAt
                       ] }),
-                      updatedAt != null && /* @__PURE__ */ jsxs34(Typography23, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
+                      updatedAt != null && /* @__PURE__ */ jsxs33(Typography23, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
                         "Last Updated: ",
                         updatedAt
                       ] })
@@ -7109,7 +7139,7 @@ var DeploymentDashboardCard = ({
                 ),
                 capacityClamped !== void 0 && /* @__PURE__ */ jsx67(CapacityBar, { value: capacityClamped, indented: expandable })
               ] }),
-              /* @__PURE__ */ jsxs34(Box27, { sx: { display: "flex", gap: 1, alignItems: "center", flexShrink: 0 }, children: [
+              /* @__PURE__ */ jsxs33(Box27, { sx: { display: "flex", gap: 1, alignItems: "center", flexShrink: 0 }, children: [
                 statusIndicator != null && /* @__PURE__ */ jsx67(StatusDot2, { status: statusIndicator, "aria-hidden": true }),
                 /* @__PURE__ */ jsx67(CardActionList, { actions })
               ] })
@@ -7125,7 +7155,7 @@ var DeploymentDashboardCard = ({
 // src/components/layout/DeploymentEntityContextMenu/DeploymentEntityContextMenu.tsx
 import { Menu as Menu5, MenuItem as MenuItem2, Switch as Switch2, Divider as Divider6, ListItemIcon as ListItemIcon5, ListItemText as ListItemText8 } from "@mui/material";
 import { styled as styled40 } from "@mui/material/styles";
-import { Fragment as Fragment12, jsx as jsx68, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx68, jsxs as jsxs34 } from "react/jsx-runtime";
 var StyledMenu2 = styled40(Menu5)({
   "& .MuiPaper-root": {
     borderRadius: 4,
@@ -7223,7 +7253,7 @@ var DeploymentEntityContextMenu = ({
   enableChecked = false,
   onEnableChange
 }) => {
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs34(
     StyledMenu2,
     {
       anchorEl,
@@ -7238,7 +7268,7 @@ var DeploymentEntityContextMenu = ({
             return /* @__PURE__ */ jsx68(StyledDivider2, {}, item.id);
           }
           if (item.type === "toggle") {
-            return /* @__PURE__ */ jsxs35(ToggleMenuItem, { disableRipple: true, children: [
+            return /* @__PURE__ */ jsxs34(ToggleMenuItem, { disableRipple: true, children: [
               onEnableChange && /* @__PURE__ */ jsx68(
                 EnableSwitch,
                 {
@@ -7252,7 +7282,7 @@ var DeploymentEntityContextMenu = ({
             ] }, item.id);
           }
           const Row = item.highlighted ? HighlightedMenuItem : StyledMenuItem;
-          return /* @__PURE__ */ jsxs35(
+          return /* @__PURE__ */ jsxs34(
             Row,
             {
               onClick: () => {
@@ -7267,9 +7297,9 @@ var DeploymentEntityContextMenu = ({
             item.id
           );
         }),
-        enableToggle && /* @__PURE__ */ jsxs35(Fragment12, { children: [
+        enableToggle && /* @__PURE__ */ jsxs34(Fragment12, { children: [
           /* @__PURE__ */ jsx68(StyledDivider2, {}),
-          /* @__PURE__ */ jsxs35(ToggleMenuItem, { disableRipple: true, children: [
+          /* @__PURE__ */ jsxs34(ToggleMenuItem, { disableRipple: true, children: [
             onEnableChange && /* @__PURE__ */ jsx68(
               EnableSwitch,
               {
@@ -7369,8 +7399,8 @@ var contextMenuItems = {
 
 // src/components/layout/DeploymentDashboardTree/DeploymentDashboardTree.tsx
 import { Box as Box28 } from "@mui/material";
-import { styled as styled41, alpha } from "@mui/material/styles";
-import { jsx as jsx70, jsxs as jsxs36 } from "react/jsx-runtime";
+import { styled as styled41, alpha as alpha2 } from "@mui/material/styles";
+import { jsx as jsx70, jsxs as jsxs35 } from "react/jsx-runtime";
 var TREE_SP = {
   /** Vertical gap between sibling rows (Figma S / sp-8) */
   rowGap: 8,
@@ -7406,8 +7436,8 @@ var TreeRow = ({ node, depth, onExpandToggle, onCopyId, renderCard }) => {
   );
   const entityColor = deploymentEntityColors[node.entityType] ?? deploymentEntityColors.workspace;
   const railOpacity = RAIL_OPACITY[node.entityType] ?? 0.5;
-  const railColor = alpha(entityColor, railOpacity);
-  const renderedChildren = hasChildren && expanded ? /* @__PURE__ */ jsxs36(Box28, { sx: { display: "flex", gap: `${TREE_SP.railGap}px` }, children: [
+  const railColor = alpha2(entityColor, railOpacity);
+  const renderedChildren = hasChildren && expanded ? /* @__PURE__ */ jsxs35(Box28, { sx: { display: "flex", gap: `${TREE_SP.railGap}px` }, children: [
     /* @__PURE__ */ jsx70(Rail, { railColor, "aria-hidden": true, "data-rail": true }),
     /* @__PURE__ */ jsx70(
       Box28,
@@ -7524,7 +7554,7 @@ import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import ForkRightIcon from "@mui/icons-material/ForkRight";
 import CallMergeIcon from "@mui/icons-material/CallMerge";
 import { useTheme as useTheme5 } from "@mui/material";
-import { jsx as jsx72, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs36 } from "react/jsx-runtime";
 var WORKFLOW_NODE_LABELS = {
   start: "Start",
   input: "Input",
@@ -7589,7 +7619,7 @@ var SideConnectorDot = ({
     })
   }
 );
-var NodeTypeBadge = ({ nodeType, badgeBackground, badgeBorder, badgeText, icon, label }) => /* @__PURE__ */ jsxs37(
+var NodeTypeBadge = ({ nodeType, badgeBackground, badgeBorder, badgeText, icon, label }) => /* @__PURE__ */ jsxs36(
   Box30,
   {
     sx: {
@@ -7639,7 +7669,7 @@ var WorkflowNode = ({
   const nodeTokens = theme2.palette.workflow.node[nodeType];
   const chrome = theme2.palette.workflow.chrome;
   const accentColor = nodeTokens.accent;
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs36(
     Paper3,
     {
       elevation: 0,
@@ -7665,7 +7695,7 @@ var WorkflowNode = ({
       children: [
         showSideDots && /* @__PURE__ */ jsx72(SideConnectorDot, { accentColor, side: "left" }),
         showSideDots && /* @__PURE__ */ jsx72(SideConnectorDot, { accentColor, side: "right" }),
-        /* @__PURE__ */ jsxs37(
+        /* @__PURE__ */ jsxs36(
           Box30,
           {
             sx: {
@@ -7679,7 +7709,7 @@ var WorkflowNode = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ jsxs37(Box30, { sx: { minWidth: 0, flex: 1 }, children: [
+              /* @__PURE__ */ jsxs36(Box30, { sx: { minWidth: 0, flex: 1 }, children: [
                 /* @__PURE__ */ jsx72(
                   Typography24,
                   {
@@ -7740,12 +7770,12 @@ import {
   IconButton as IconButton14,
   InputBase,
   Typography as Typography25,
-  alpha as alpha2
+  alpha as alpha3
 } from "@mui/material";
 import CloseIcon4 from "@mui/icons-material/Close";
 import CancelIcon from "@mui/icons-material/Cancel";
 import { useTheme as useTheme6 } from "@mui/material/styles";
-import { jsx as jsx73, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs37 } from "react/jsx-runtime";
 var WorkflowTopBar = ({
   title = "Agent visualization flow chart",
   executionId,
@@ -7763,7 +7793,7 @@ var WorkflowTopBar = ({
   ...boxProps
 }) => {
   const chrome = useTheme6().palette.workflow.chrome;
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs37(
     Box31,
     {
       sx: [
@@ -7777,7 +7807,7 @@ var WorkflowTopBar = ({
       ],
       ...boxProps,
       children: [
-        /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsxs37(
           Box31,
           {
             sx: {
@@ -7802,7 +7832,7 @@ var WorkflowTopBar = ({
                   children: title
                 }
               ),
-              /* @__PURE__ */ jsxs38(
+              /* @__PURE__ */ jsxs37(
                 Box31,
                 {
                   sx: {
@@ -7814,7 +7844,7 @@ var WorkflowTopBar = ({
                     minWidth: 0
                   },
                   children: [
-                    /* @__PURE__ */ jsxs38(
+                    /* @__PURE__ */ jsxs37(
                       Box31,
                       {
                         sx: {
@@ -7830,7 +7860,7 @@ var WorkflowTopBar = ({
                           minHeight: 56
                         },
                         children: [
-                          /* @__PURE__ */ jsxs38(Box31, { sx: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ jsxs37(Box31, { sx: { flex: 1, minWidth: 0 }, children: [
                             /* @__PURE__ */ jsx73(
                               Typography25,
                               {
@@ -7901,7 +7931,7 @@ var WorkflowTopBar = ({
                         sx: {
                           width: 30,
                           height: 30,
-                          backgroundColor: alpha2(chrome.closeBtnBg, 0.28),
+                          backgroundColor: alpha3(chrome.closeBtnBg, 0.28),
                           color: chrome.iconColor
                         },
                         children: /* @__PURE__ */ jsx73(CloseIcon4, { fontSize: "small" })
@@ -7926,14 +7956,14 @@ import {
   IconButton as IconButton15,
   Paper as Paper4,
   Typography as Typography26,
-  alpha as alpha3,
+  alpha as alpha4,
   useTheme as useTheme7
 } from "@mui/material";
 import CloseIcon5 from "@mui/icons-material/Close";
 import ContentCopyOutlinedIcon from "@mui/icons-material/ContentCopyOutlined";
-import { Fragment as Fragment13, jsx as jsx74, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx74, jsxs as jsxs38 } from "react/jsx-runtime";
 var INSPECTOR_WIDTH = 320;
-var InfoBlock = ({ label, value, mutedColor }) => /* @__PURE__ */ jsxs39(Box32, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+var InfoBlock = ({ label, value, mutedColor }) => /* @__PURE__ */ jsxs38(Box32, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
   /* @__PURE__ */ jsx74(Typography26, { variant: "body2", sx: { color: mutedColor }, children: label }),
   /* @__PURE__ */ jsx74(
     Typography26,
@@ -7972,7 +8002,7 @@ var WorkflowSideInspector = ({
     return null;
   }
   const accent = theme2.palette.workflow.node[nodeType].accent;
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs38(
     Paper4,
     {
       elevation: 0,
@@ -7991,8 +8021,8 @@ var WorkflowSideInspector = ({
       },
       ...paperProps,
       children: [
-        /* @__PURE__ */ jsxs39(Box32, { sx: { display: "flex", flexDirection: "column", gap: 1.25 }, children: [
-          /* @__PURE__ */ jsxs39(Box32, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ jsxs38(Box32, { sx: { display: "flex", flexDirection: "column", gap: 1.25 }, children: [
+          /* @__PURE__ */ jsxs38(Box32, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
             /* @__PURE__ */ jsx74(Typography26, { variant: "subtitle1", sx: { color: deploymentSurfaceTokens.textPrimary }, children: title }),
             /* @__PURE__ */ jsx74(
               IconButton15,
@@ -8009,8 +8039,8 @@ var WorkflowSideInspector = ({
           ] }),
           /* @__PURE__ */ jsx74(Divider8, { sx: { borderColor: chrome.divider } })
         ] }),
-        /* @__PURE__ */ jsxs39(Box32, { sx: { display: "flex", flexDirection: "column", gap: 3, flex: 1 }, children: [
-          /* @__PURE__ */ jsxs39(Box32, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+        /* @__PURE__ */ jsxs38(Box32, { sx: { display: "flex", flexDirection: "column", gap: 3, flex: 1 }, children: [
+          /* @__PURE__ */ jsxs38(Box32, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
             /* @__PURE__ */ jsx74(
               Typography26,
               {
@@ -8020,7 +8050,7 @@ var WorkflowSideInspector = ({
               }
             ),
             /* @__PURE__ */ jsx74(Typography26, { variant: "body2", sx: { color: chrome.mutedText }, children: nodeDescription }),
-            /* @__PURE__ */ jsxs39(
+            /* @__PURE__ */ jsxs38(
               Box32,
               {
                 sx: {
@@ -8032,7 +8062,7 @@ var WorkflowSideInspector = ({
                   py: 0.5,
                   borderRadius: "999px",
                   border: `1px solid ${accent}`,
-                  backgroundColor: alpha3(accent, 0.12)
+                  backgroundColor: alpha4(accent, 0.12)
                 },
                 children: [
                   /* @__PURE__ */ jsx74(
@@ -8052,14 +8082,14 @@ var WorkflowSideInspector = ({
             )
           ] }),
           /* @__PURE__ */ jsx74(Divider8, { sx: { borderColor: chrome.divider } }),
-          (showInput || showOutput) && /* @__PURE__ */ jsxs39(Fragment13, { children: [
-            /* @__PURE__ */ jsxs39(Box32, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+          (showInput || showOutput) && /* @__PURE__ */ jsxs38(Fragment13, { children: [
+            /* @__PURE__ */ jsxs38(Box32, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
               showInput && /* @__PURE__ */ jsx74(InfoBlock, { label: "Input", value: inputValue, mutedColor: chrome.mutedText }),
               showOutput && /* @__PURE__ */ jsx74(InfoBlock, { label: "Output", value: outputValue, mutedColor: chrome.mutedText })
             ] }),
             /* @__PURE__ */ jsx74(Divider8, { sx: { borderColor: chrome.divider } })
           ] }),
-          /* @__PURE__ */ jsxs39(Box32, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+          /* @__PURE__ */ jsxs38(Box32, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
             /* @__PURE__ */ jsx74(Typography26, { variant: "body2", sx: { color: chrome.mutedText }, children: "Cubby ID" }),
             /* @__PURE__ */ jsx74(
               Button,
@@ -8074,8 +8104,8 @@ var WorkflowSideInspector = ({
             )
           ] }),
           /* @__PURE__ */ jsx74(Divider8, { sx: { borderColor: chrome.divider } }),
-          (showTimestamp || showDuration) && /* @__PURE__ */ jsxs39(Fragment13, { children: [
-            /* @__PURE__ */ jsxs39(Box32, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+          (showTimestamp || showDuration) && /* @__PURE__ */ jsxs38(Fragment13, { children: [
+            /* @__PURE__ */ jsxs38(Box32, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
               showTimestamp && /* @__PURE__ */ jsx74(InfoBlock, { label: "Timestamp", value: timestamp, mutedColor: chrome.mutedText }),
               showDuration && /* @__PURE__ */ jsx74(InfoBlock, { label: "Duration", value: duration, mutedColor: chrome.mutedText })
             ] }),
@@ -8101,7 +8131,7 @@ import ChevronLeftIcon4 from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon5 from "@mui/icons-material/ChevronRight";
 import ReplayIcon from "@mui/icons-material/Replay";
 import { useTheme as useTheme8 } from "@mui/material/styles";
-import { jsx as jsx75, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs39 } from "react/jsx-runtime";
 var SpeedButton = ({ value, selected, onClick }) => /* @__PURE__ */ jsx75(
   Button,
   {
@@ -8138,7 +8168,7 @@ var WorkflowTimeBar = ({
   const boundedProgress = Math.max(0, Math.min(100, progress));
   const atFirstStep = currentStep <= 1;
   const atLastStep = currentStep >= totalSteps;
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs39(
     Box33,
     {
       sx: [
@@ -8156,7 +8186,7 @@ var WorkflowTimeBar = ({
       ...boxProps,
       children: [
         /* @__PURE__ */ jsx75(Divider9, { sx: { borderColor: deploymentSurfaceTokens.strokeOutside } }),
-        /* @__PURE__ */ jsxs40(Box33, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+        /* @__PURE__ */ jsxs39(Box33, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
           /* @__PURE__ */ jsx75(
             IconButton16,
             {
@@ -8173,7 +8203,7 @@ var WorkflowTimeBar = ({
               children: /* @__PURE__ */ jsx75(StopIcon, { sx: { fontSize: 16 } })
             }
           ),
-          /* @__PURE__ */ jsxs40(Box33, { sx: { flex: 1, minWidth: 220, px: 1 }, children: [
+          /* @__PURE__ */ jsxs39(Box33, { sx: { flex: 1, minWidth: 220, px: 1 }, children: [
             /* @__PURE__ */ jsx75(
               Typography27,
               {
@@ -8198,8 +8228,8 @@ var WorkflowTimeBar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs40(Box33, { sx: { display: "flex", alignItems: "center", gap: 3 }, children: [
-            /* @__PURE__ */ jsxs40(Box33, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsxs39(Box33, { sx: { display: "flex", alignItems: "center", gap: 3 }, children: [
+            /* @__PURE__ */ jsxs39(Box33, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
               /* @__PURE__ */ jsx75(Typography27, { variant: "subtitle1", sx: { fontWeight: 500 }, children: "Steps" }),
               /* @__PURE__ */ jsx75(
                 IconButton16,
@@ -8225,7 +8255,7 @@ var WorkflowTimeBar = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs40(Box33, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsxs39(Box33, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
               /* @__PURE__ */ jsx75(Typography27, { variant: "subtitle1", sx: { fontWeight: 500 }, children: "Speed" }),
               speedOptions.map((option) => /* @__PURE__ */ jsx75(
                 SpeedButton,
@@ -8248,8 +8278,8 @@ var WorkflowTimeBar = ({
 // src/components/icons/ActivityAppIcon.tsx
 import { memo as memo2 } from "react";
 import { SvgIcon as SvgIcon2 } from "@mui/material";
-import { jsx as jsx76, jsxs as jsxs41 } from "react/jsx-runtime";
-var ActivityAppIcon = memo2((props) => /* @__PURE__ */ jsxs41(SvgIcon2, { ...props, viewBox: "0 0 36 36", children: [
+import { jsx as jsx76, jsxs as jsxs40 } from "react/jsx-runtime";
+var ActivityAppIcon = memo2((props) => /* @__PURE__ */ jsxs40(SvgIcon2, { ...props, viewBox: "0 0 36 36", children: [
   /* @__PURE__ */ jsx76("rect", { fill: "none", stroke: "currentColor", width: 34, height: 34, x: 1, y: 1, strokeWidth: 1.5, rx: 6.8 }),
   /* @__PURE__ */ jsx76(
     "rect",
@@ -8325,9 +8355,9 @@ var RightArrowIcon = (props) => {
 
 // src/components/icons/AvatarIcon.tsx
 import { SvgIcon as SvgIcon5 } from "@mui/material";
-import { jsx as jsx79, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs41 } from "react/jsx-runtime";
 var AvatarIcon = (props) => {
-  return /* @__PURE__ */ jsxs42(SvgIcon5, { ...props, viewBox: "0 0 16 16", children: [
+  return /* @__PURE__ */ jsxs41(SvgIcon5, { ...props, viewBox: "0 0 16 16", children: [
     /* @__PURE__ */ jsx79(
       "path",
       {
@@ -8352,8 +8382,8 @@ var AvatarIcon = (props) => {
 // src/components/icons/BarTrackingIcon.tsx
 import { memo as memo3 } from "react";
 import { SvgIcon as SvgIcon6 } from "@mui/material";
-import { jsx as jsx80, jsxs as jsxs43 } from "react/jsx-runtime";
-var BarTrackingIcon = memo3((props) => /* @__PURE__ */ jsxs43(SvgIcon6, { ...props, viewBox: "0 0 96 97", children: [
+import { jsx as jsx80, jsxs as jsxs42 } from "react/jsx-runtime";
+var BarTrackingIcon = memo3((props) => /* @__PURE__ */ jsxs42(SvgIcon6, { ...props, viewBox: "0 0 96 97", children: [
   /* @__PURE__ */ jsx80(
     "rect",
     {
@@ -8425,8 +8455,8 @@ var ClockIcon = memo4((props) => /* @__PURE__ */ jsx81(SvgIcon7, { ...props, vie
 // src/components/icons/CloudFlashIcon.tsx
 import { memo as memo5 } from "react";
 import { SvgIcon as SvgIcon8 } from "@mui/material";
-import { jsx as jsx82, jsxs as jsxs44 } from "react/jsx-runtime";
-var CloudFlashIcon = memo5((props) => /* @__PURE__ */ jsxs44(SvgIcon8, { ...props, fill: "none", viewBox: "0 0 96 97", children: [
+import { jsx as jsx82, jsxs as jsxs43 } from "react/jsx-runtime";
+var CloudFlashIcon = memo5((props) => /* @__PURE__ */ jsxs43(SvgIcon8, { ...props, fill: "none", viewBox: "0 0 96 97", children: [
   /* @__PURE__ */ jsx82(
     "path",
     {
@@ -8450,8 +8480,8 @@ var CloudFlashIcon = memo5((props) => /* @__PURE__ */ jsxs44(SvgIcon8, { ...prop
 // src/components/icons/DecentralizedServerIcon.tsx
 import { memo as memo6 } from "react";
 import { SvgIcon as SvgIcon9 } from "@mui/material";
-import { jsx as jsx83, jsxs as jsxs45 } from "react/jsx-runtime";
-var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs45(SvgIcon9, { ...props, viewBox: "0 0 96 97", children: [
+import { jsx as jsx83, jsxs as jsxs44 } from "react/jsx-runtime";
+var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs44(SvgIcon9, { ...props, viewBox: "0 0 96 97", children: [
   /* @__PURE__ */ jsx83(
     "path",
     {
@@ -8637,8 +8667,8 @@ var DiscordIcon = memo7((props) => /* @__PURE__ */ jsx84(SvgIcon10, { ...props,
 // src/components/icons/DownloadIcon.tsx
 import { memo as memo8 } from "react";
 import { SvgIcon as SvgIcon11 } from "@mui/material";
-import { jsx as jsx85, jsxs as jsxs46 } from "react/jsx-runtime";
-var DownloadIcon = memo8((props) => /* @__PURE__ */ jsxs46(SvgIcon11, { ...props, viewBox: "0 0 17 16", fill: "none", children: [
+import { jsx as jsx85, jsxs as jsxs45 } from "react/jsx-runtime";
+var DownloadIcon = memo8((props) => /* @__PURE__ */ jsxs45(SvgIcon11, { ...props, viewBox: "0 0 17 16", fill: "none", children: [
   /* @__PURE__ */ jsx85(
     "path",
     {
@@ -8658,8 +8688,8 @@ var DownloadIcon = memo8((props) => /* @__PURE__ */ jsxs46(SvgIcon11, { ...props
 // src/components/icons/FilledFolderIcon.tsx
 import { memo as memo9 } from "react";
 import { SvgIcon as SvgIcon12 } from "@mui/material";
-import { jsx as jsx86, jsxs as jsxs47 } from "react/jsx-runtime";
-var FilledFolderIcon = memo9((props) => /* @__PURE__ */ jsxs47(SvgIcon12, { sx: { fill: "none" }, ...props, fill: "none", viewBox: "0 0 22 22", children: [
+import { jsx as jsx86, jsxs as jsxs46 } from "react/jsx-runtime";
+var FilledFolderIcon = memo9((props) => /* @__PURE__ */ jsxs46(SvgIcon12, { sx: { fill: "none" }, ...props, fill: "none", viewBox: "0 0 22 22", children: [
   /* @__PURE__ */ jsx86("rect", { x: "0.5", y: "0.5", width: "21", height: "21", rx: "4.5", fill: "#FCF8EC" }),
   /* @__PURE__ */ jsx86("rect", { x: "0.5", y: "0.5", width: "21", height: "21", rx: "4.5", stroke: "#E1B43E" }),
   /* @__PURE__ */ jsx86(
@@ -8676,8 +8706,8 @@ var FilledFolderIcon = memo9((props) => /* @__PURE__ */ jsxs47(SvgIcon12, { sx:
 // src/components/icons/FolderIcon.tsx
 import { memo as memo10 } from "react";
 import { SvgIcon as SvgIcon13 } from "@mui/material";
-import { jsx as jsx87, jsxs as jsxs48 } from "react/jsx-runtime";
-var FolderIcon = memo10((props) => /* @__PURE__ */ jsxs48(SvgIcon13, { sx: { fill: "none" }, ...props, fill: "none", viewBox: "0 0 22 22", children: [
+import { jsx as jsx87, jsxs as jsxs47 } from "react/jsx-runtime";
+var FolderIcon = memo10((props) => /* @__PURE__ */ jsxs47(SvgIcon13, { sx: { fill: "none" }, ...props, fill: "none", viewBox: "0 0 22 22", children: [
   /* @__PURE__ */ jsx87("rect", { x: "0.5", y: "0.5", width: "21", height: "21", rx: "4.5", fill: "#F5F7FA" }),
   /* @__PURE__ */ jsx87("rect", { x: "0.5", y: "0.5", width: "21", height: "21", rx: "4.5", stroke: "#E6E6E6" }),
   /* @__PURE__ */ jsx87(
@@ -8696,8 +8726,8 @@ var FolderIcon = memo10((props) => /* @__PURE__ */ jsxs48(SvgIcon13, { sx: { fil
 // src/components/icons/GithubLogoIcon.tsx
 import { memo as memo11 } from "react";
 import { SvgIcon as SvgIcon14 } from "@mui/material";
-import { jsx as jsx88, jsxs as jsxs49 } from "react/jsx-runtime";
-var GithubLogoIcon = memo11((props) => /* @__PURE__ */ jsxs49(SvgIcon14, { ...props, viewBox: "0 0 17 16", sx: { fill: "none" }, children: [
+import { jsx as jsx88, jsxs as jsxs48 } from "react/jsx-runtime";
+var GithubLogoIcon = memo11((props) => /* @__PURE__ */ jsxs48(SvgIcon14, { ...props, viewBox: "0 0 17 16", sx: { fill: "none" }, children: [
   /* @__PURE__ */ jsx88(
     "path",
     {
@@ -8731,8 +8761,8 @@ var ShareIcon = memo12((props) => /* @__PURE__ */ jsx89(SvgIcon15, { ...props, v
 // src/components/icons/StorageAppIcon.tsx
 import { memo as memo13 } from "react";
 import { SvgIcon as SvgIcon16 } from "@mui/material";
-import { jsx as jsx90, jsxs as jsxs50 } from "react/jsx-runtime";
-var StorageAppIcon = memo13((props) => /* @__PURE__ */ jsxs50(SvgIcon16, { ...props, viewBox: "0 0 38 29", fill: "none", children: [
+import { jsx as jsx90, jsxs as jsxs49 } from "react/jsx-runtime";
+var StorageAppIcon = memo13((props) => /* @__PURE__ */ jsxs49(SvgIcon16, { ...props, viewBox: "0 0 38 29", fill: "none", children: [
   /* @__PURE__ */ jsx90(
     "path",
     {
@@ -8900,7 +8930,7 @@ import { Box as Box35, Stack as Stack5, Typography as Typography28, styled as st
 import { LineChart } from "@mui/x-charts";
 import size2 from "byte-size";
 import { format } from "date-fns";
-import { jsx as jsx98, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs50 } from "react/jsx-runtime";
 var Chart = styled44(Box35)(() => ({
   height: 200
 }));
@@ -8911,7 +8941,7 @@ var ChartWidget = ({
   formatValue = (value2) => size2(value2 || 0).toString()
 }) => {
   const theme2 = useTheme9();
-  return /* @__PURE__ */ jsxs51(Stack5, { spacing: 1, children: [
+  return /* @__PURE__ */ jsxs50(Stack5, { spacing: 1, children: [
     /* @__PURE__ */ jsx98(Typography28, { variant: "caption", color: "text.secondary", children: title }),
     /* @__PURE__ */ jsx98(Typography28, { fontWeight: "bold", children: value }),
     /* @__PURE__ */ jsx98(Chart, { children: /* @__PURE__ */ jsx98(
@@ -8999,8 +9029,8 @@ var PeriodSelect = ({ value, onChange }) => /* @__PURE__ */ jsx99(
 );
 
 // src/components/charts/MetricsChart/MetricsChart.tsx
-import { useMemo, useState as useState13 } from "react";
-import { jsx as jsx100, jsxs as jsxs52 } from "react/jsx-runtime";
+import { useMemo as useMemo2, useState as useState13 } from "react";
+import { jsx as jsx100, jsxs as jsxs51 } from "react/jsx-runtime";
 var mapPeriodToFromDate = (period = "month") => {
   const date = /* @__PURE__ */ new Date();
   if (period === "hour") {
@@ -9031,12 +9061,12 @@ var LoadingText = styled45("text")(({ theme: theme2 }) => ({
 var MetricsChart = ({ history = [] }) => {
   const theme2 = useTheme10();
   const [period, setPeriod] = useState13("week");
-  const periodFrom = useMemo(() => mapPeriodToFromDate(period), [period]);
-  const periodHistory = useMemo(
+  const periodFrom = useMemo2(() => mapPeriodToFromDate(period), [period]);
+  const periodHistory = useMemo2(
     () => history.filter((record) => record.recordTime > periodFrom),
     [history, periodFrom]
   );
-  const total = useMemo(
+  const total = useMemo2(
     () => periodHistory.reduce(
       (acc, record) => ({
         gets: acc.gets + record.gets,
@@ -9060,14 +9090,14 @@ var MetricsChart = ({ history = [] }) => {
     const backgroundHeight = textHeight + padding.top + padding.bottom;
     const rectX = left + (width - backgroundWidth) / 2;
     const rectY = top + (height - backgroundHeight) / 2;
-    return /* @__PURE__ */ jsxs52("g", { children: [
+    return /* @__PURE__ */ jsxs51("g", { children: [
       /* @__PURE__ */ jsx100(NoDataRect, { x: rectX, y: rectY, width: backgroundWidth, height: backgroundHeight }),
       /* @__PURE__ */ jsx100(LoadingText, { style: { ...theme2.typography.subtitle1 }, x: left + width / 2, y: top + height / 2, children: text })
     ] });
   };
-  return /* @__PURE__ */ jsxs52(Card2, { children: [
+  return /* @__PURE__ */ jsxs51(Card2, { children: [
     /* @__PURE__ */ jsx100(CardHeader2, { title: "GET / PUT Requests", action: /* @__PURE__ */ jsx100(PeriodSelect, { value: period, onChange: setPeriod }) }),
-    /* @__PURE__ */ jsxs52(CardMedia2, { children: [
+    /* @__PURE__ */ jsxs51(CardMedia2, { children: [
       /* @__PURE__ */ jsx100(
         Chart2,
         {
@@ -9129,33 +9159,33 @@ var MetricsChart = ({ history = [] }) => {
           ]
         }
       ),
-      periodHistory.length > 0 && /* @__PURE__ */ jsxs52(Stack6, { direction: "row", spacing: 2, marginY: 3, justifyContent: "center", children: [
-        /* @__PURE__ */ jsxs52(Stack6, { direction: "row", spacing: 1, alignItems: "center", children: [
+      periodHistory.length > 0 && /* @__PURE__ */ jsxs51(Stack6, { direction: "row", spacing: 2, marginY: 3, justifyContent: "center", children: [
+        /* @__PURE__ */ jsxs51(Stack6, { direction: "row", spacing: 1, alignItems: "center", children: [
           /* @__PURE__ */ jsx100(Box36, { sx: { width: 14, height: 14, borderRadius: "4px", backgroundColor: theme2.palette.primary.main } }),
           /* @__PURE__ */ jsx100(Typography29, { variant: "body2", children: "Get" })
         ] }),
-        /* @__PURE__ */ jsxs52(Stack6, { direction: "row", spacing: 1, alignItems: "center", children: [
+        /* @__PURE__ */ jsxs51(Stack6, { direction: "row", spacing: 1, alignItems: "center", children: [
           /* @__PURE__ */ jsx100(Box36, { sx: { width: 14, height: 14, borderRadius: "4px", backgroundColor: theme2.palette.success.main } }),
           /* @__PURE__ */ jsx100(Typography29, { variant: "body2", children: "Put" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs52(CardMedia2, { children: [
+    /* @__PURE__ */ jsxs51(CardMedia2, { children: [
       /* @__PURE__ */ jsx100(Divider10, { flexItem: true }),
-      /* @__PURE__ */ jsxs52(Stack6, { direction: "row", spacing: 2, padding: 2, children: [
-        /* @__PURE__ */ jsxs52(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
+      /* @__PURE__ */ jsxs51(Stack6, { direction: "row", spacing: 2, padding: 2, children: [
+        /* @__PURE__ */ jsxs51(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
           /* @__PURE__ */ jsx100(Typography29, { variant: "body2", color: "secondary", children: "GET Requests per account" }),
           /* @__PURE__ */ jsx100(Typography29, { variant: "h3", children: total.gets })
         ] }),
-        /* @__PURE__ */ jsxs52(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
+        /* @__PURE__ */ jsxs51(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
           /* @__PURE__ */ jsx100(Typography29, { variant: "body2", color: "secondary", children: "PUT Requests per account" }),
           /* @__PURE__ */ jsx100(Typography29, { variant: "h3", children: total.puts })
         ] }),
-        /* @__PURE__ */ jsxs52(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
+        /* @__PURE__ */ jsxs51(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
           /* @__PURE__ */ jsx100(Typography29, { variant: "body2", color: "secondary", children: "Total Consumed per account" }),
           /* @__PURE__ */ jsx100(Typography29, { variant: "h3", children: /* @__PURE__ */ jsx100(BytesSize, { bytes: total.transferredBytes }) })
         ] }),
-        /* @__PURE__ */ jsxs52(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
+        /* @__PURE__ */ jsxs51(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
           /* @__PURE__ */ jsx100(Typography29, { variant: "body2", color: "secondary", children: "Total Stored per account" }),
           /* @__PURE__ */ jsx100(Typography29, { variant: "h3", children: /* @__PURE__ */ jsx100(BytesSize, { bytes: total.storedBytes }) })
         ] })
@@ -9165,7 +9195,7 @@ var MetricsChart = ({ history = [] }) => {
 };
 
 // src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
-import { useCallback as useCallback6, useMemo as useMemo2, useState as useState14 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo3, useState as useState14 } from "react";
 import {
   Box as Box37,
   Card as Card3,
@@ -9199,7 +9229,7 @@ var TimeRangeSelect = ({ options: options2, value, onChange }) => /* @__PURE__ *
 
 // src/components/charts/TimeSeriesGraph/SummaryStats.tsx
 import { Stack as Stack7, Typography as Typography30 } from "@mui/material";
-import { jsx as jsx102, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx102, jsxs as jsxs52 } from "react/jsx-runtime";
 var formatSummaryValue = (value, unit) => {
   const displayValue = typeof value === "number" ? value.toLocaleString() : value;
   return unit ? `${displayValue} ${unit}` : displayValue;
@@ -9218,7 +9248,7 @@ var SummaryStats = ({ items }) => {
       useFlexGap: true,
       role: "list",
       "aria-label": "Summary statistics",
-      children: items.map((item) => /* @__PURE__ */ jsxs53(
+      children: items.map((item) => /* @__PURE__ */ jsxs52(
         Stack7,
         {
           direction: "row",
@@ -9237,7 +9267,7 @@ var SummaryStats = ({ items }) => {
 };
 
 // src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
-import { Fragment as Fragment15, jsx as jsx103, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx103, jsxs as jsxs53 } from "react/jsx-runtime";
 var ChartContainer = styled46(Box37)({
   position: "relative",
   height: 320
@@ -9310,12 +9340,12 @@ var TimeSeriesGraph = ({
 }) => {
   const theme2 = useTheme11();
   const [hiddenSeries, setHiddenSeries] = useState14(/* @__PURE__ */ new Set());
-  const dataset = useMemo2(() => buildDataset(series, hiddenSeries), [series, hiddenSeries]);
-  const visibleSeries = useMemo2(
+  const dataset = useMemo3(() => buildDataset(series, hiddenSeries), [series, hiddenSeries]);
+  const visibleSeries = useMemo3(
     () => series.filter((s) => !hiddenSeries.has(s.name)),
     [series, hiddenSeries]
   );
-  const chartColors = useMemo2(() => visibleSeries.map((s) => s.color), [visibleSeries]);
+  const chartColors = useMemo3(() => visibleSeries.map((s) => s.color), [visibleSeries]);
   const handleLegendToggle = useCallback6((seriesName) => {
     setHiddenSeries((prev) => {
       const next = new Set(prev);
@@ -9327,7 +9357,7 @@ var TimeSeriesGraph = ({
       return next;
     });
   }, []);
-  const timeBounds = useMemo2(() => {
+  const timeBounds = useMemo3(() => {
     if (dataset.length === 0) return { min: void 0, max: void 0 };
     const timestamps = dataset.map((row) => row.timestamp.getTime());
     return {
@@ -9335,13 +9365,13 @@ var TimeSeriesGraph = ({
       max: new Date(Math.max(...timestamps))
     };
   }, [dataset]);
-  const resolvedXAxisFormat = useMemo2(
+  const resolvedXAxisFormat = useMemo3(
     () => xAxisFormat ?? inferXAxisFormat(timeBounds.min, timeBounds.max),
     [xAxisFormat, timeBounds.min, timeBounds.max]
   );
   const hasData = dataset.length > 0;
   const shouldShowSummary = showSummary && summaryItems && summaryItems.length > 0;
-  const headerActionElement = /* @__PURE__ */ jsxs54(Stack8, { direction: "row", spacing: 1, alignItems: "center", children: [
+  const headerActionElement = /* @__PURE__ */ jsxs53(Stack8, { direction: "row", spacing: 1, alignItems: "center", children: [
     headerAction,
     timeRangeOptions && timeRangeOptions.length > 0 && /* @__PURE__ */ jsx103(
       TimeRangeSelect,
@@ -9353,7 +9383,7 @@ var TimeSeriesGraph = ({
     )
   ] });
   const showHeader = !!title || !!headerAction || timeRangeOptions && timeRangeOptions.length > 0;
-  return /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsxs53(
     Card3,
     {
       "aria-label": title ? `Line chart showing ${title}` : "Line chart",
@@ -9370,8 +9400,8 @@ var TimeSeriesGraph = ({
             action: headerActionElement
           }
         ),
-        /* @__PURE__ */ jsxs54(CardMedia3, { children: [
-          /* @__PURE__ */ jsxs54(ChartContainer, { children: [
+        /* @__PURE__ */ jsxs53(CardMedia3, { children: [
+          /* @__PURE__ */ jsxs53(ChartContainer, { children: [
             loading && /* @__PURE__ */ jsx103(LoadingOverlay, { role: "status", "aria-label": "Loading chart data", children: /* @__PURE__ */ jsx103(CircularProgress7, { size: 40 }) }),
             /* @__PURE__ */ jsx103(
               LineChart3,
@@ -9438,7 +9468,7 @@ var TimeSeriesGraph = ({
               "aria-label": "Chart legend",
               children: series.map((s) => {
                 const isHidden = hiddenSeries.has(s.name);
-                return /* @__PURE__ */ jsxs54(
+                return /* @__PURE__ */ jsxs53(
                   Stack8,
                   {
                     direction: "row",
@@ -9465,7 +9495,7 @@ var TimeSeriesGraph = ({
             }
           )
         ] }),
-        shouldShowSummary && /* @__PURE__ */ jsxs54(Fragment15, { children: [
+        shouldShowSummary && /* @__PURE__ */ jsxs53(Fragment15, { children: [
           /* @__PURE__ */ jsx103(Divider11, {}),
           /* @__PURE__ */ jsx103(SummaryStats, { items: summaryItems })
         ] })
@@ -9487,7 +9517,7 @@ import ReactFlow, {
 import { Box as Box38 } from "@mui/material";
 import { useTheme as useTheme12 } from "@mui/material/styles";
 import { Background as Background2, Controls as Controls2, MiniMap as MiniMap2, Panel, BackgroundVariant as BackgroundVariant2, ConnectionLineType as ConnectionLineType2 } from "reactflow";
-import { jsx as jsx104, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs54 } from "react/jsx-runtime";
 var FlowEditor = ({
   nodes,
   edges,
@@ -9533,7 +9563,7 @@ var FlowEditor = ({
         ...Array.isArray(containerSx) ? containerSx : [containerSx]
       ],
       ...restContainerProps,
-      children: /* @__PURE__ */ jsxs55(
+      children: /* @__PURE__ */ jsxs54(
         ReactFlow,
         {
           nodes,
@@ -9598,7 +9628,7 @@ import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import ExpandMoreIcon3 from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import { jsx as jsx105, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs55 } from "react/jsx-runtime";
 var configureTypeScript = (monaco) => {
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     target: monaco.languages.typescript.ScriptTarget.ES2020,
@@ -9837,7 +9867,7 @@ var CodeEditor = ({
         pb: isFullscreen ? 2 : 0,
         overflow: isFullscreen ? "hidden" : "visible"
       },
-      children: /* @__PURE__ */ jsxs56(
+      children: /* @__PURE__ */ jsxs55(
         Box39,
         {
           sx: {
@@ -9905,7 +9935,7 @@ var CodeEditor = ({
                 )
               }
             ),
-            validationErrors.length > 0 && /* @__PURE__ */ jsxs56(
+            validationErrors.length > 0 && /* @__PURE__ */ jsxs55(
               Box39,
               {
                 sx: {
@@ -9919,7 +9949,7 @@ var CodeEditor = ({
                   transition: "max-height 0.2s ease"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs56(
+                  /* @__PURE__ */ jsxs55(
                     Box39,
                     {
                       sx: {
@@ -9936,7 +9966,7 @@ var CodeEditor = ({
                       children: [
                         /* @__PURE__ */ jsx105(ErrorOutlineIcon, { color: "error", fontSize: "small" }),
                         /* @__PURE__ */ jsx105(Box39, { sx: { fontWeight: 600, color: "text.primary" }, children: "Problems" }),
-                        /* @__PURE__ */ jsxs56(Box39, { sx: { ml: 1 }, children: [
+                        /* @__PURE__ */ jsxs55(Box39, { sx: { ml: 1 }, children: [
                           validationErrors.length,
                           " error",
                           validationErrors.length > 1 ? "s" : ""
@@ -9957,7 +9987,7 @@ var CodeEditor = ({
                       ]
                     }
                   ),
-                  showProblems && /* @__PURE__ */ jsx105(Box39, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ jsxs56(
+                  showProblems && /* @__PURE__ */ jsx105(Box39, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ jsxs55(
                     Box39,
                     {
                       onClick: () => gotoMarker(error),
@@ -9975,7 +10005,7 @@ var CodeEditor = ({
                       },
                       children: [
                         /* @__PURE__ */ jsx105(ErrorOutlineIcon, { color: "error", sx: { fontSize: 18 } }),
-                        /* @__PURE__ */ jsxs56(Box39, { sx: { color: "text.secondary", width: 64 }, children: [
+                        /* @__PURE__ */ jsxs55(Box39, { sx: { color: "text.secondary", width: 64 }, children: [
                           "Line ",
                           error.startLineNumber
                         ] }),
@@ -10000,7 +10030,7 @@ import { Panel as Panel2 } from "reactflow";
 // src/components/third-party/WorkflowNodeHandle.tsx
 import { Handle, Position } from "reactflow";
 import { useTheme as useTheme13 } from "@mui/material";
-import { Fragment as Fragment16, jsx as jsx106, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx106, jsxs as jsxs56 } from "react/jsx-runtime";
 var WorkflowNodeHandle = ({
   data,
   selected
@@ -10015,7 +10045,7 @@ var WorkflowNodeHandle = ({
     background: handleColor,
     boxShadow: WORKFLOW_NODE_SHADOW
   };
-  return /* @__PURE__ */ jsxs57(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs56(Fragment16, { children: [
     /* @__PURE__ */ jsx106(Handle, { type: "target", position: Position.Left, style: handleStyle }),
     /* @__PURE__ */ jsx106(
       WorkflowNode,
@@ -10314,7 +10344,7 @@ function useCodeEditorWorkspace({
 import React17 from "react";
 import { Box as Box40, IconButton as IconButton18, Tooltip as Tooltip9, Typography as Typography32 } from "@mui/material";
 import CloseIcon6 from "@mui/icons-material/Close";
-import { jsx as jsx107, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs57 } from "react/jsx-runtime";
 var CodeEditorTabs = ({
   tabs,
   activeTab,
@@ -10350,7 +10380,7 @@ var CodeEditorTabs = ({
             onClose: () => onTabClose?.(tab.path)
           }) }, tab.path);
         }
-        return /* @__PURE__ */ jsxs58(
+        return /* @__PURE__ */ jsxs57(
           Box40,
           {
             onClick: () => onTabSelect?.(tab.path),
@@ -10449,7 +10479,7 @@ import FolderOpenIcon from "@mui/icons-material/FolderOpen";
 import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
 import ExpandMoreIcon4 from "@mui/icons-material/ExpandMore";
 import ChevronRightIcon6 from "@mui/icons-material/ChevronRight";
-import { jsx as jsx108, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs58 } from "react/jsx-runtime";
 var STATUS_CONFIG = {
   new: { label: "N", color: "success.main" },
   modified: { label: "M", color: "warning.main" },
@@ -10498,7 +10528,7 @@ var CodeEditorFileTree = ({
     const isExpanded = expandedPaths.has(node.path);
     const isSelected = node.path === selectedPath;
     if (renderNode) {
-      return /* @__PURE__ */ jsxs59(React18.Fragment, { children: [
+      return /* @__PURE__ */ jsxs58(React18.Fragment, { children: [
         renderNode({
           node,
           depth,
@@ -10516,8 +10546,8 @@ var CodeEditorFileTree = ({
         isFolder && isExpanded && node.children?.map((child) => renderTreeNode(child, depth + 1))
       ] }, node.path);
     }
-    return /* @__PURE__ */ jsxs59(React18.Fragment, { children: [
-      /* @__PURE__ */ jsxs59(
+    return /* @__PURE__ */ jsxs58(React18.Fragment, { children: [
+      /* @__PURE__ */ jsxs58(
         ListItemButton4,
         {
           selected: isSelected,
@@ -10604,7 +10634,7 @@ var CodeEditorFileTree = ({
 
 // src/components/third-party/CodeEditorWorkspace/CodeEditorStatusBar.tsx
 import { Box as Box42, Tooltip as Tooltip10, Typography as Typography33 } from "@mui/material";
-import { Fragment as Fragment17, jsx as jsx109, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx109, jsxs as jsxs59 } from "react/jsx-runtime";
 var LANGUAGE_LABELS = {
   typescript: "TypeScript",
   javascript: "JavaScript",
@@ -10632,7 +10662,7 @@ var CodeEditorStatusBar = ({
   }
   const leftItems = items?.filter((i) => i.align !== "right") ?? [];
   const rightItems = items?.filter((i) => i.align === "right") ?? [];
-  return /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsxs59(
     Box42,
     {
       sx: {
@@ -10653,7 +10683,7 @@ var CodeEditorStatusBar = ({
       },
       ...containerProps,
       children: [
-        /* @__PURE__ */ jsxs60(Box42, { sx: { display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsxs59(Box42, { sx: { display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }, children: [
           gitInfo && /* @__PURE__ */ jsx109(
             Tooltip10,
             {
@@ -10664,7 +10694,7 @@ var CodeEditorStatusBar = ({
                 gitInfo.behind != null && `\u2193 ${gitInfo.behind} behind`
               ].filter(Boolean).join(" \xB7 ") || gitInfo.branch,
               enterDelay: 400,
-              children: /* @__PURE__ */ jsxs60(
+              children: /* @__PURE__ */ jsxs59(
                 Box42,
                 {
                   onClick: onBranchClick,
@@ -10724,11 +10754,11 @@ var CodeEditorStatusBar = ({
                         }
                       }
                     ),
-                    gitInfo.ahead != null && gitInfo.ahead > 0 && /* @__PURE__ */ jsxs60(Typography33, { variant: "caption", sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, opacity: 0.85 }, children: [
+                    gitInfo.ahead != null && gitInfo.ahead > 0 && /* @__PURE__ */ jsxs59(Typography33, { variant: "caption", sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, opacity: 0.85 }, children: [
                       "\u2191",
                       gitInfo.ahead
                     ] }),
-                    gitInfo.behind != null && gitInfo.behind > 0 && /* @__PURE__ */ jsxs60(Typography33, { variant: "caption", sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, opacity: 0.85 }, children: [
+                    gitInfo.behind != null && gitInfo.behind > 0 && /* @__PURE__ */ jsxs59(Typography33, { variant: "caption", sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, opacity: 0.85 }, children: [
                       "\u2193",
                       gitInfo.behind
                     ] })
@@ -10739,9 +10769,9 @@ var CodeEditorStatusBar = ({
           ),
           leftItems.map((item) => /* @__PURE__ */ jsx109(StatusBarItemElement, { item }, item.id))
         ] }),
-        /* @__PURE__ */ jsxs60(Box42, { sx: { display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsxs59(Box42, { sx: { display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }, children: [
           rightItems.map((item) => /* @__PURE__ */ jsx109(StatusBarItemElement, { item }, item.id)),
-          cursorPosition && /* @__PURE__ */ jsxs60(
+          cursorPosition && /* @__PURE__ */ jsxs59(
             Typography33,
             {
               variant: "caption",
@@ -10798,7 +10828,7 @@ var StatusBarItemElement = ({ item }) => {
 
 // src/components/third-party/CodeEditorWorkspace/CodeEditorWelcomeScreen.tsx
 import { Box as Box43 } from "@mui/material";
-import { jsx as jsx110, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs60 } from "react/jsx-runtime";
 var CodeEditorWelcomeScreen = ({
   logo,
   children,
@@ -10814,7 +10844,7 @@ var CodeEditorWelcomeScreen = ({
       }
     }
   );
-  return /* @__PURE__ */ jsxs61(
+  return /* @__PURE__ */ jsxs60(
     Box43,
     {
       sx: {
@@ -10850,7 +10880,7 @@ var CodeEditorWelcomeScreen = ({
 // src/components/third-party/CodeEditorWorkspace/CodeEditorWorkspace.tsx
 import React19 from "react";
 import { Box as Box44 } from "@mui/material";
-import { jsx as jsx111, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs61 } from "react/jsx-runtime";
 var CodeEditorWorkspace = ({
   files,
   initialOpenPaths,
@@ -10952,7 +10982,7 @@ var CodeEditorWorkspace = ({
       ...editorProps
     }
   ) : welcomeElement;
-  return /* @__PURE__ */ jsxs62(
+  return /* @__PURE__ */ jsxs61(
     Box44,
     {
       sx: {
@@ -10967,7 +10997,7 @@ var CodeEditorWorkspace = ({
       ...containerProps,
       children: [
         fileTreeElement,
-        /* @__PURE__ */ jsxs62(Box44, { sx: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsxs61(Box44, { sx: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, overflow: "hidden" }, children: [
           tabsElement,
           /* @__PURE__ */ jsx111(Box44, { sx: { flex: 1, overflow: "hidden" }, children: editorElement }),
           statusBarElement