@cere/cere-design-system 0.0.37 → 0.0.38

package/dist/index.mjs

@@ -2138,32 +2138,110 @@ var TextField = ({
 };
 
 // src/components/inputs/SearchField.tsx
+import { useEffect as useEffect2, useState } from "react";
 import SearchIcon from "@mui/icons-material/Search";
 import InputAdornment from "@mui/material/InputAdornment";
+import Box from "@mui/material/Box";
 import { useTheme as useTheme2 } from "@mui/material/styles";
-import { jsx as jsx8 } from "react/jsx-runtime";
+
+// src/components/inputs/useSearchHotkeys.ts
+import { useEffect } from "react";
+function isMacPlatform() {
+  if (typeof navigator === "undefined") return false;
+  const uaDataPlatform = navigator.userAgentData?.platform;
+  if (typeof uaDataPlatform === "string") return /mac/i.test(uaDataPlatform);
+  return /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
+}
+function useSearchHotkeys(inputRef, options2 = {}) {
+  const { k: enableK = true, slash: enableSlash = true } = options2;
+  useEffect(() => {
+    if (!enableK && !enableSlash) return;
+    const mac = isMacPlatform();
+    function onKeyDown(event) {
+      if (enableK && event.key.toLowerCase() === "k") {
+        const correctMod = mac ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
+        if (correctMod) {
+          event.preventDefault();
+          inputRef.current?.focus();
+          return;
+        }
+      }
+      if (enableSlash && event.key === "/") {
+        const target = event.target;
+        const typingInField = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || (target?.isContentEditable ?? false);
+        if (!typingInField) {
+          event.preventDefault();
+          inputRef.current?.focus();
+        }
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [inputRef, enableK, enableSlash]);
+}
+
+// src/components/inputs/SearchField.tsx
+import { jsx as jsx8, jsxs } 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(
+    Box,
+    {
+      component: "span",
+      "aria-hidden": true,
+      sx: {
+        fontFamily: "monospace",
+        fontSize: 11,
+        letterSpacing: 0.4,
+        px: 0.75,
+        py: 0.25,
+        borderRadius: 1,
+        border: "1px solid",
+        borderColor: "divider",
+        color: "text.secondary",
+        lineHeight: 1
+      },
+      children: [
+        modKey,
+        "K"
+      ]
+    }
+  );
+};
 var SearchField = ({
   placeholder = "Search...",
   onSearch,
   onChange,
+  variant = "standard",
+  shortcutHint = false,
+  sx,
   ...props
 }) => {
   const theme2 = useTheme2();
   const handleChange = (e) => {
-    if (onChange) {
-      onChange(e);
-    }
-    if (onSearch) {
-      onSearch(e.target.value);
-    }
+    onChange?.(e);
+    onSearch?.(e.target.value);
   };
+  const pillSx = variant === "pill" ? {
+    "& .MuiOutlinedInput-root": {
+      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 } }) })
+        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
     }
@@ -2212,7 +2290,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 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var StyledSwitch = styled5(MuiSwitch)(({ theme: theme2 }) => ({
   width: 44,
   height: 24,
@@ -2268,7 +2346,7 @@ var Switch = ({
   if (!label) {
     return switchComponent;
   }
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
     labelPosition === "left" && /* @__PURE__ */ jsx10("span", { children: label }),
     switchComponent,
     labelPosition === "right" && /* @__PURE__ */ jsx10("span", { children: label })
@@ -2373,7 +2451,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 jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
 var DateRangePicker = ({
   startDate,
   endDate,
@@ -2384,7 +2462,7 @@ var DateRangePicker = ({
   disabled = false,
   size: size3 = "small"
 }) => {
-  return /* @__PURE__ */ jsx13(LocalizationProvider, { dateAdapter: AdapterDateFns, children: /* @__PURE__ */ jsxs2(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+  return /* @__PURE__ */ jsx13(LocalizationProvider, { dateAdapter: AdapterDateFns, children: /* @__PURE__ */ jsxs3(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
     /* @__PURE__ */ jsx13(
       DatePicker,
       {
@@ -2425,7 +2503,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 jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 var Clickable = styled8(Button2)({
   padding: 0
 });
@@ -2451,7 +2529,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__ */ jsxs3(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__ */ jsxs4(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, {}))
@@ -2460,7 +2538,7 @@ var DropdownAnchor = forwardRef(
 DropdownAnchor.displayName = "DropdownAnchor";
 
 // src/components/navigation/Dropdown/Dropdown.tsx
-import { Fragment, jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 var Dropdown = ({
   open,
   label,
@@ -2478,7 +2556,7 @@ var Dropdown = ({
   const horizontal = direction === "left" ? "right" : "left";
   const onOpen = useCallback(() => onToggle?.(true), [onToggle]);
   const padding = dense ? 1 : 2;
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
     renderAnchor({ ref: anchorRef, onOpen, open }),
     /* @__PURE__ */ jsx15(
       Popover,
@@ -2519,7 +2597,7 @@ import {
   Drawer,
   List,
   styled as styled10,
-  Box
+  Box as Box2
 } from "@mui/material";
 
 // src/components/navigation/SidebarItem.tsx
@@ -2529,7 +2607,7 @@ import {
   ListItemText,
   styled as styled9
 } from "@mui/material";
-import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 var StyledListItemButton = styled9(ListItemButton, {
   shouldForwardProp: (prop) => prop !== "selected" && prop !== "size"
 })(({ theme: theme2, selected, size: size3 = "medium" }) => {
@@ -2568,7 +2646,7 @@ var SidebarItem = ({
   endIcon,
   children
 }) => {
-  return /* @__PURE__ */ jsxs5(StyledListItemButton, { selected, size: size3, onClick, children: [
+  return /* @__PURE__ */ jsxs6(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 }),
@@ -2606,15 +2684,15 @@ var Sidebar = ({
           boxSizing: "border-box"
         }
       },
-      children: /* @__PURE__ */ jsx17(Box, { sx: { overflow: "auto", padding: "8px 0" }, children: /* @__PURE__ */ jsx17(List, { children: items.map((item, index) => /* @__PURE__ */ jsx17(SidebarItem, { ...item }, index)) }) })
+      children: /* @__PURE__ */ jsx17(Box2, { sx: { overflow: "auto", padding: "8px 0" }, children: /* @__PURE__ */ jsx17(List, { children: items.map((item, index) => /* @__PURE__ */ jsx17(SidebarItem, { ...item }, index)) }) })
     }
   );
 };
 
 // src/components/navigation/ServiceSelector.tsx
-import { useState, useCallback as useCallback2 } from "react";
+import { useState as useState2, useCallback as useCallback2 } from "react";
 import {
-  Box as Box2,
+  Box as Box3,
   Typography as Typography3,
   Avatar,
   Tooltip,
@@ -2638,7 +2716,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 jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
 var ServiceSelectorButton = ({
   services,
   selectedServiceId,
@@ -2654,9 +2732,9 @@ var ServiceSelectorButton = ({
   onOpenSettings,
   onOpenAddMember
 }) => {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [showArchived, setShowArchived] = useState(false);
+  const [anchorEl, setAnchorEl] = useState2(null);
+  const [searchTerm, setSearchTerm] = useState2("");
+  const [showArchived, setShowArchived] = useState2(false);
   const handleOpenSelector = (event) => {
     event.stopPropagation();
     setAnchorEl(event.currentTarget);
@@ -2695,8 +2773,8 @@ var ServiceSelectorButton = ({
     return matchesSearch && matchesArchivedFilter;
   });
   if (compact) {
-    return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-      /* @__PURE__ */ jsx18(Box2, { sx: { position: "relative" }, children: /* @__PURE__ */ jsx18(Tooltip, { title: "Select service", placement: "right", children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsx18(Box3, { sx: { position: "relative" }, children: /* @__PURE__ */ jsx18(Tooltip, { title: "Select service", placement: "right", children: /* @__PURE__ */ jsx18(
         IconButton2,
         {
           onClick: handleOpenSelector,
@@ -2747,10 +2825,10 @@ var ServiceSelectorButton = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsxs6(Box2, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
-      selectedService ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        isManager ? /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsxs7(Box3, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
+      selectedService ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        isManager ? /* @__PURE__ */ jsxs7(
           Link,
           {
             underline: "hover",
@@ -2780,8 +2858,8 @@ var ServiceSelectorButton = ({
               selectedService.name
             ]
           }
-        ) : /* @__PURE__ */ jsxs6(
-          Box2,
+        ) : /* @__PURE__ */ jsxs7(
+          Box3,
           {
             sx: {
               display: "flex",
@@ -2896,8 +2974,8 @@ var ServiceSelectorPanel = ({
   onOpenSettings,
   onOpenAddMember
 }) => {
-  const [internalSearchTerm, setInternalSearchTerm] = useState("");
-  const [internalShowArchived, setInternalShowArchived] = useState(false);
+  const [internalSearchTerm, setInternalSearchTerm] = useState2("");
+  const [internalShowArchived, setInternalShowArchived] = useState2(false);
   const searchTerm = externalSearchTerm !== void 0 ? externalSearchTerm : internalSearchTerm;
   const setSearchTerm = externalOnSearchChange || setInternalSearchTerm;
   const showArchived = externalShowArchived !== void 0 ? externalShowArchived : internalShowArchived;
@@ -2918,7 +2996,7 @@ var ServiceSelectorPanel = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     Menu,
     {
       anchorEl,
@@ -2943,8 +3021,8 @@ var ServiceSelectorPanel = ({
         }
       },
       children: [
-        selectedService && /* @__PURE__ */ jsxs6(
-          Box2,
+        selectedService && /* @__PURE__ */ jsxs7(
+          Box3,
           {
             sx: {
               paddingLeft: 2,
@@ -2955,7 +3033,7 @@ var ServiceSelectorPanel = ({
               borderColor: "divider"
             },
             children: [
-              /* @__PURE__ */ jsxs6(Box2, { sx: {
+              /* @__PURE__ */ jsxs7(Box3, { sx: {
                 display: "flex",
                 alignItems: "center",
                 mb: 1.5
@@ -2973,10 +3051,10 @@ var ServiceSelectorPanel = ({
                     children: selectedService.name.charAt(0)
                   }
                 ),
-                /* @__PURE__ */ jsx18(Box2, { sx: { flex: 1 }, children: /* @__PURE__ */ jsxs6(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsx18(Box3, { sx: { flex: 1 }, children: /* @__PURE__ */ jsxs7(Box3, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                   /* @__PURE__ */ jsx18(Typography3, { variant: "subtitle1", sx: { fontWeight: 600, fontSize: "1rem" }, children: selectedService.name }),
                   /* @__PURE__ */ jsx18(
-                    Box2,
+                    Box3,
                     {
                       sx: {
                         display: "inline-block",
@@ -2994,7 +3072,7 @@ var ServiceSelectorPanel = ({
                   )
                 ] }) })
               ] }),
-              (onOpenSettings || onOpenAddMember) && /* @__PURE__ */ jsxs6(Box2, { sx: { display: "flex", gap: 1 }, children: [
+              (onOpenSettings || onOpenAddMember) && /* @__PURE__ */ jsxs7(Box3, { sx: { display: "flex", gap: 1 }, children: [
                 onOpenAddMember && /* @__PURE__ */ jsx18(
                   Button3,
                   {
@@ -3065,8 +3143,8 @@ var ServiceSelectorPanel = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs6(Box2, { sx: { px: 2, pt: 2, pb: 1.5 }, children: [
-          /* @__PURE__ */ jsxs6(Box2, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
+        /* @__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__ */ jsx18(
               TextField2,
               {
@@ -3098,15 +3176,15 @@ var ServiceSelectorPanel = ({
             ) })
           ] }),
           /* @__PURE__ */ jsx18(
-            Box2,
+            Box3,
             {
               sx: {
                 maxHeight: 400,
                 overflow: "auto",
                 py: 1
               },
-              children: loading ? /* @__PURE__ */ jsx18(Box2, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx18(Typography3, { variant: "body2", color: "text.secondary", children: "Loading services..." }) }) : filteredServices.length === 0 ? /* @__PURE__ */ jsx18(Box2, { 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(
+              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(
                   Typography3,
                   {
                     variant: "caption",
@@ -3141,7 +3219,7 @@ var ServiceSelectorPanel = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx18(List2, { disablePadding: true, children: filteredServices.map((service) => /* @__PURE__ */ jsxs6(
+                /* @__PURE__ */ jsx18(List2, { disablePadding: true, children: filteredServices.map((service) => /* @__PURE__ */ jsxs7(
                   ListItem,
                   {
                     sx: {
@@ -3181,7 +3259,7 @@ var ServiceSelectorPanel = ({
                       /* @__PURE__ */ jsx18(
                         ListItemText2,
                         {
-                          primary: /* @__PURE__ */ jsx18(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsx18(
+                          primary: /* @__PURE__ */ jsx18(Box3, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsx18(
                             Typography3,
                             {
                               variant: "body2",
@@ -3204,7 +3282,7 @@ var ServiceSelectorPanel = ({
             }
           ),
           /* @__PURE__ */ jsx18(
-            Box2,
+            Box3,
             {
               sx: {
                 paddingTop: 2,
@@ -3243,9 +3321,9 @@ var ServiceSelectorPanel = ({
 };
 
 // src/components/navigation/WorkspaceSelector.tsx
-import React2, { useState as useState2, useCallback as useCallback3 } from "react";
+import React3, { useState as useState3, useCallback as useCallback3 } from "react";
 import {
-  Box as Box3,
+  Box as Box4,
   Typography as Typography4,
   Avatar as Avatar2,
   IconButton as IconButton3,
@@ -3263,7 +3341,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 jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 var WorkspaceSelectorButton = ({
   workspaces,
   selectedWorkspaceId,
@@ -3274,7 +3352,7 @@ var WorkspaceSelectorButton = ({
   sx = {},
   panelWidth = 350
 }) => {
-  const [anchorEl, setAnchorEl] = useState2(null);
+  const [anchorEl, setAnchorEl] = useState3(null);
   const handleOpenSelector = (event) => {
     event.stopPropagation();
     setAnchorEl(event.currentTarget);
@@ -3295,9 +3373,9 @@ var WorkspaceSelectorButton = ({
   if (!workspaces || workspaces.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    /* @__PURE__ */ jsxs7(Box3, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
-      selectedWorkspace ? /* @__PURE__ */ jsx19(Fragment3, { children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsxs8(Box4, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
+      selectedWorkspace ? /* @__PURE__ */ jsx19(Fragment3, { children: /* @__PURE__ */ jsxs8(
         Link2,
         {
           underline: "hover",
@@ -3384,8 +3462,8 @@ var WorkspaceSelectorPanel = ({
   loading = false,
   width = 350
 }) => {
-  const [searchTerm, setSearchTerm] = useState2("");
-  React2.useEffect(() => {
+  const [searchTerm, setSearchTerm] = useState3("");
+  React3.useEffect(() => {
     if (open) {
       setSearchTerm("");
     }
@@ -3419,8 +3497,8 @@ var WorkspaceSelectorPanel = ({
           borderRadius: 2
         }
       },
-      children: /* @__PURE__ */ jsxs7(Box3, { children: [
-        /* @__PURE__ */ jsx19(Box3, { sx: { px: 2, pt: 2, pb: 1.5 }, children: /* @__PURE__ */ jsx19(
+      children: /* @__PURE__ */ jsxs8(Box4, { children: [
+        /* @__PURE__ */ jsx19(Box4, { sx: { px: 2, pt: 2, pb: 1.5 }, children: /* @__PURE__ */ jsx19(
           TextField3,
           {
             fullWidth: true,
@@ -3433,7 +3511,7 @@ var WorkspaceSelectorPanel = ({
             }
           }
         ) }),
-        /* @__PURE__ */ jsx19(Box3, { sx: { maxHeight: 400, overflowY: "auto" }, children: loading ? /* @__PURE__ */ jsx19(Box3, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx19(Typography4, { variant: "body2", color: "text.secondary", children: "Loading..." }) }) : filteredWorkspaces.length === 0 ? /* @__PURE__ */ jsx19(Box3, { 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(
+        /* @__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(
           ListItem2,
           {
             onClick: () => handleSelect(workspace.id),
@@ -3456,7 +3534,7 @@ var WorkspaceSelectorPanel = ({
               /* @__PURE__ */ jsx19(
                 ListItemText3,
                 {
-                  primary: /* @__PURE__ */ jsxs7(Box3, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  primary: /* @__PURE__ */ jsxs8(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" })
                   ] }),
@@ -3468,7 +3546,7 @@ var WorkspaceSelectorPanel = ({
           workspace.id
         )) }) }),
         /* @__PURE__ */ jsx19(
-          Box3,
+          Box4,
           {
             sx: {
               paddingTop: 2,
@@ -3531,8 +3609,8 @@ var StepButton = (props) => {
 };
 
 // src/components/navigation/SideNav/SideNav.tsx
-import React3, { useState as useState3, useCallback as useCallback4 } from "react";
-import { Box as Box4 } from "@mui/material";
+import React4, { useState as useState4, useCallback as useCallback4 } from "react";
+import { Box as Box5 } from "@mui/material";
 import { styled as styled11 } from "@mui/material/styles";
 
 // src/components/navigation/SideNav/styles.ts
@@ -3554,11 +3632,11 @@ var scrollbarStyles = {
 
 // src/components/navigation/SideNav/SideNav.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
-var SideNavContext = React3.createContext({
+var SideNavContext = React4.createContext({
   collapsed: false,
   showTooltips: true
 });
-var SideNavContainer = styled11(Box4, {
+var SideNavContainer = styled11(Box5, {
   shouldForwardProp: (prop) => !["navWidth", "navPosition", "showBorder", "backgroundColor", "isCollapsed", "collapsedWidth", "transitionDuration"].includes(prop)
 })(({ theme: theme2, navWidth = 280, navPosition = "left", showBorder = true, backgroundColor, isCollapsed = false, collapsedWidth = 68, transitionDuration = 300 }) => ({
   width: isCollapsed ? collapsedWidth : navWidth,
@@ -3578,25 +3656,25 @@ var SideNavContainer = styled11(Box4, {
     borderLeft: navPosition === "right" ? `1px solid ${theme2.palette.divider}` : "none"
   }
 }));
-var HeaderSection = styled11(Box4)(({ theme: theme2 }) => ({
+var HeaderSection = styled11(Box5)(({ theme: theme2 }) => ({
   flexShrink: 0,
   backgroundColor: theme2.palette.background.paper
 }));
-var NavigationSection = styled11(Box4)(() => ({
+var NavigationSection = styled11(Box5)(() => ({
   flexGrow: 1,
   overflowY: "auto",
   overflowX: "hidden",
   ...scrollbarStyles
 }));
-var FooterSection = styled11(Box4)(({ theme: theme2 }) => ({
+var FooterSection = styled11(Box5)(({ theme: theme2 }) => ({
   flexShrink: 0,
   backgroundColor: theme2.palette.background.paper
 }));
-var Header = React3.memo(({ children, className }) => {
-  const { collapsed, onToggleCollapse } = React3.useContext(SideNavContext);
-  const enhancedChildren = React3.Children.map(children, (child) => {
-    if (React3.isValidElement(child)) {
-      return React3.cloneElement(child, {
+var Header = React4.memo(({ children, className }) => {
+  const { collapsed, onToggleCollapse } = React4.useContext(SideNavContext);
+  const enhancedChildren = React4.Children.map(children, (child) => {
+    if (React4.isValidElement(child)) {
+      return React4.cloneElement(child, {
         collapsed,
         onCollapse: onToggleCollapse
       });
@@ -3606,11 +3684,11 @@ var Header = React3.memo(({ children, className }) => {
   return /* @__PURE__ */ jsx21(HeaderSection, { className, "data-testid": "sidenav-header", children: enhancedChildren });
 });
 Header.displayName = "SideNav.Header";
-var Navigation = React3.memo(({ children, className }) => {
-  const { collapsed, showTooltips } = React3.useContext(SideNavContext);
-  const enhancedChildren = React3.Children.map(children, (child) => {
-    if (React3.isValidElement(child)) {
-      return React3.cloneElement(child, {
+var Navigation = React4.memo(({ children, className }) => {
+  const { collapsed, showTooltips } = React4.useContext(SideNavContext);
+  const enhancedChildren = React4.Children.map(children, (child) => {
+    if (React4.isValidElement(child)) {
+      return React4.cloneElement(child, {
         collapsed,
         showTooltips
       });
@@ -3620,11 +3698,11 @@ var Navigation = React3.memo(({ children, className }) => {
   return /* @__PURE__ */ jsx21(NavigationSection, { className, "data-testid": "sidenav-navigation", children: enhancedChildren });
 });
 Navigation.displayName = "SideNav.Navigation";
-var Footer = React3.memo(({ children, className }) => {
-  const { collapsed } = React3.useContext(SideNavContext);
-  const enhancedChildren = React3.Children.map(children, (child) => {
-    if (React3.isValidElement(child)) {
-      return React3.cloneElement(child, {
+var Footer = React4.memo(({ children, className }) => {
+  const { collapsed } = React4.useContext(SideNavContext);
+  const enhancedChildren = React4.Children.map(children, (child) => {
+    if (React4.isValidElement(child)) {
+      return React4.cloneElement(child, {
         compact: collapsed
       });
     }
@@ -3634,7 +3712,7 @@ var Footer = React3.memo(({ children, className }) => {
 });
 Footer.displayName = "SideNav.Footer";
 var SideNav = Object.assign(
-  React3.memo(({
+  React4.memo(({
     width = 280,
     collapsedWidth = 68,
     collapsed: controlledCollapsed,
@@ -3649,7 +3727,7 @@ var SideNav = Object.assign(
     className,
     ariaLabel = "Main navigation"
   }) => {
-    const [internalCollapsed, setInternalCollapsed] = useState3(defaultCollapsed);
+    const [internalCollapsed, setInternalCollapsed] = useState4(defaultCollapsed);
     const isControlled = controlledCollapsed !== void 0;
     const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
     const handleToggleCollapse = useCallback4(() => {
@@ -3692,13 +3770,13 @@ var SideNav = Object.assign(
 SideNav.displayName = "SideNav";
 
 // src/components/navigation/SideNav/SideNavHeader.tsx
-import React4 from "react";
-import { Box as Box5, Typography as Typography5, IconButton as IconButton4, Tooltip as Tooltip2, ButtonBase } from "@mui/material";
+import React5 from "react";
+import { Box as Box6, Typography as Typography5, IconButton as IconButton4, Tooltip as Tooltip2, ButtonBase } from "@mui/material";
 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 jsxs8 } from "react/jsx-runtime";
-var HeaderContainer = styled12(Box5, {
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+var HeaderContainer = styled12(Box6, {
   shouldForwardProp: (prop) => prop !== "isCollapsed"
 })(({ theme: theme2, isCollapsed }) => ({
   display: "flex",
@@ -3728,7 +3806,7 @@ var BrandingButton = styled12(ButtonBase)(({ theme: theme2 }) => ({
     outlineOffset: 2
   }
 }));
-var SideNavHeader = React4.memo(({
+var SideNavHeader = React5.memo(({
   logo,
   title,
   showCollapseButton = true,
@@ -3738,9 +3816,9 @@ var SideNavHeader = React4.memo(({
   collapsed = false
 }) => {
   const headerAriaLabel = ariaLabel || `${title} navigation header`;
-  const brandingContent = /* @__PURE__ */ jsxs8(Fragment4, { children: [
+  const brandingContent = /* @__PURE__ */ jsxs9(Fragment4, { children: [
     logo && /* @__PURE__ */ jsx22(
-      Box5,
+      Box6,
       {
         sx: {
           display: "flex",
@@ -3766,7 +3844,7 @@ var SideNavHeader = React4.memo(({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     HeaderContainer,
     {
       "data-testid": "sidenav-header-content",
@@ -3782,7 +3860,7 @@ var SideNavHeader = React4.memo(({
             children: brandingContent
           }
         ) : /* @__PURE__ */ jsx22(
-          Box5,
+          Box6,
           {
             sx: {
               display: "flex",
@@ -3827,20 +3905,20 @@ var SideNavHeader = React4.memo(({
 SideNavHeader.displayName = "SideNavHeader";
 
 // src/components/navigation/SideNav/NavigationList.tsx
-import React6, { useState as useState4 } from "react";
+import React7, { useState as useState5 } from "react";
 import { List as List4, ListItem as ListItem3 } from "@mui/material";
 
 // src/components/navigation/SideNav/NavigationItem.tsx
-import React5 from "react";
+import React6 from "react";
 import {
   ListItemButton as ListItemButton2,
   ListItemIcon as ListItemIcon2,
   ListItemText as ListItemText4,
-  Box as Box6,
+  Box as Box7,
   Tooltip as Tooltip3
 } from "@mui/material";
 import { styled as styled13 } from "@mui/material/styles";
-import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 var StyledListItemButton2 = styled13(ListItemButton2, {
   shouldForwardProp: (prop) => !["selected", "size", "iconPosition", "isCollapsed"].includes(prop)
 })(({ theme: theme2, selected, size: size3, isCollapsed }) => {
@@ -3902,7 +3980,7 @@ var StyledListItemButton2 = styled13(ListItemButton2, {
     }
   };
 });
-var NavigationItem = React5.memo(({
+var NavigationItem = React6.memo(({
   id,
   label,
   icon,
@@ -3957,7 +4035,7 @@ var NavigationItem = React5.memo(({
       }
     }
   );
-  const buttonContent = /* @__PURE__ */ jsxs9(
+  const buttonContent = /* @__PURE__ */ jsxs10(
     StyledListItemButton2,
     {
       selected,
@@ -3975,7 +4053,7 @@ var NavigationItem = React5.memo(({
         labelElement,
         icon && iconPosition === "right" && iconElement,
         endContent && !collapsed && /* @__PURE__ */ jsx23(
-          Box6,
+          Box7,
           {
             sx: {
               marginLeft: "auto",
@@ -4007,7 +4085,7 @@ NavigationItem.displayName = "NavigationItem";
 
 // src/components/navigation/SideNav/NavigationList.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
-var NavigationList = React6.memo(({
+var NavigationList = React7.memo(({
   items,
   selectedId,
   onSelectionChange,
@@ -4016,7 +4094,7 @@ var NavigationList = React6.memo(({
   collapsed = false,
   showTooltips = true
 }) => {
-  const [internalSelectedId, setInternalSelectedId] = useState4(
+  const [internalSelectedId, setInternalSelectedId] = useState5(
     selectedId
   );
   const isControlled = selectedId !== void 0;
@@ -4079,12 +4157,12 @@ var NavigationList = React6.memo(({
 NavigationList.displayName = "NavigationList";
 
 // src/components/navigation/SideNav/ConnectionStatus.tsx
-import React7 from "react";
-import { Box as Box7, Typography as Typography6, Tooltip as Tooltip4 } from "@mui/material";
+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 jsxs10 } from "react/jsx-runtime";
-var StatusPill = styled14(Box7, {
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+var StatusPill = styled14(Box8, {
   shouldForwardProp: (prop) => !["variant", "interactive"].includes(prop)
 })(({ theme: theme2, variant = "info", interactive }) => {
   const variantColors = {
@@ -4144,7 +4222,7 @@ var StatusPill = styled14(Box7, {
     }
   };
 });
-var ConnectionStatus = React7.memo(({
+var ConnectionStatus = React8.memo(({
   status,
   variant = "info",
   icon,
@@ -4158,7 +4236,7 @@ var ConnectionStatus = React7.memo(({
       onClick();
     }
   };
-  const statusContent = /* @__PURE__ */ jsxs10(
+  const statusContent = /* @__PURE__ */ jsxs11(
     StatusPill,
     {
       role: "status",
@@ -4170,7 +4248,7 @@ var ConnectionStatus = React7.memo(({
       onClick: handleClick,
       children: [
         /* @__PURE__ */ jsx25(
-          Box7,
+          Box8,
           {
             sx: {
               display: "flex",
@@ -4187,7 +4265,7 @@ var ConnectionStatus = React7.memo(({
   );
   if (compact) {
     return /* @__PURE__ */ jsx25(
-      Box7,
+      Box8,
       {
         sx: {
           display: "flex",
@@ -4199,7 +4277,7 @@ var ConnectionStatus = React7.memo(({
     );
   }
   return /* @__PURE__ */ jsx25(
-    Box7,
+    Box8,
     {
       sx: {
         display: "flex",
@@ -4213,12 +4291,12 @@ var ConnectionStatus = React7.memo(({
 ConnectionStatus.displayName = "ConnectionStatus";
 
 // src/components/navigation/SideNav/AccountSection.tsx
-import React8 from "react";
-import { Box as Box8, Avatar as Avatar3, Typography as Typography7, Button as Button5, IconButton as IconButton5, Tooltip as Tooltip5 } from "@mui/material";
+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 jsxs11 } from "react/jsx-runtime";
-var AccountContainer = styled15(Box8, {
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+var AccountContainer = styled15(Box9, {
   shouldForwardProp: (prop) => !["layout", "isCompact"].includes(prop)
 })(({ theme: theme2, layout = "horizontal", isCompact }) => ({
   display: "flex",
@@ -4249,7 +4327,7 @@ var deriveInitials = (name) => {
   }
   return (words[0][0] + words[words.length - 1][0]).toUpperCase();
 };
-var AccountSection = React8.memo(({
+var AccountSection = React9.memo(({
   user,
   onLogout,
   showEmail = false,
@@ -4259,7 +4337,7 @@ var AccountSection = React8.memo(({
   const initials = user.initials || deriveInitials(user.name);
   const avatarSrc = user.avatarUrl;
   if (compact) {
-    return /* @__PURE__ */ jsxs11(AccountContainer, { layout, isCompact: true, "aria-label": "Account section", children: [
+    return /* @__PURE__ */ jsxs12(AccountContainer, { layout, isCompact: true, "aria-label": "Account section", children: [
       /* @__PURE__ */ jsx26(
         Tooltip5,
         {
@@ -4303,7 +4381,7 @@ var AccountSection = React8.memo(({
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsxs11(AccountContainer, { layout, isCompact: false, "aria-label": "Account section", children: [
+  return /* @__PURE__ */ jsxs12(AccountContainer, { layout, isCompact: false, "aria-label": "Account section", children: [
     /* @__PURE__ */ jsx26(
       Avatar3,
       {
@@ -4320,8 +4398,8 @@ var AccountSection = React8.memo(({
         children: initials
       }
     ),
-    /* @__PURE__ */ jsxs11(
-      Box8,
+    /* @__PURE__ */ jsxs12(
+      Box9,
       {
         sx: {
           display: "flex",
@@ -4464,7 +4542,7 @@ import {
   Divider
 } from "@mui/material";
 import { styled as styled18 } from "@mui/material/styles";
-import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
 var StyledMenu = styled18(MuiMenu)(({ theme: theme2 }) => ({
   "& .MuiPaper-root": {
     borderRadius: 8,
@@ -4505,8 +4583,8 @@ var MenuItem = ({
   disabled = false,
   divider = false
 }) => {
-  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
-    /* @__PURE__ */ jsxs12(MuiMenuItem, { onClick, disabled, children: [
+  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+    /* @__PURE__ */ jsxs13(MuiMenuItem, { onClick, disabled, children: [
       icon && /* @__PURE__ */ jsx29(ListItemIcon3, { children: icon }),
       /* @__PURE__ */ jsx29(ListItemText5, { children: label })
     ] }),
@@ -4537,9 +4615,9 @@ var Pagination = ({ color = "primary", ...props }) => {
 };
 
 // src/components/navigation/Selector.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import {
-  Box as Box9,
+  Box as Box10,
   Typography as Typography8,
   Avatar as Avatar4,
   Menu as Menu4,
@@ -4570,7 +4648,7 @@ var Link3 = ({ underline = "hover", ...props }) => {
 };
 
 // src/components/navigation/Selector.tsx
-import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
 var Selector = ({
   options: options2,
   selectedId,
@@ -4584,8 +4662,8 @@ var Selector = ({
   width = 350
 }) => {
   const theme2 = useTheme3();
-  const [anchorEl, setAnchorEl] = useState5(null);
-  const [searchTerm, setSearchTerm] = useState5("");
+  const [anchorEl, setAnchorEl] = useState6(null);
+  const [searchTerm, setSearchTerm] = useState6("");
   const open = Boolean(anchorEl);
   const selectedOption = options2.find((opt) => opt.id === selectedId);
   const filteredOptions = options2.filter(
@@ -4603,12 +4681,12 @@ var Selector = ({
     onSelect(id);
     handleClose();
   };
-  const defaultRenderSelected = (option) => /* @__PURE__ */ jsxs13(Box9, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+  const defaultRenderSelected = (option) => /* @__PURE__ */ jsxs14(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__ */ jsxs13(Fragment6, { children: [
+    return /* @__PURE__ */ jsxs14(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,
@@ -4619,8 +4697,8 @@ var Selector = ({
           PaperProps: {
             sx: { width, maxHeight: 600, mt: 1 }
           },
-          children: loading ? /* @__PURE__ */ jsx32(Box9, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx32(CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
-            options2.length > 5 && /* @__PURE__ */ jsx32(Box9, { sx: { p: 1, borderBottom: `1px solid ${theme2.palette.grey[200]}` }, children: /* @__PURE__ */ jsx32(
+          children: loading ? /* @__PURE__ */ jsx32(Box10, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx32(CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxs14(Fragment6, { children: [
+            options2.length > 5 && /* @__PURE__ */ jsx32(Box10, { sx: { p: 1, borderBottom: `1px solid ${theme2.palette.grey[200]}` }, children: /* @__PURE__ */ jsx32(
               TextField,
               {
                 size: "small",
@@ -4633,8 +4711,8 @@ var Selector = ({
                 }
               }
             ) }),
-            /* @__PURE__ */ jsxs13(List5, { sx: { maxHeight: 400, overflow: "auto" }, children: [
-              filteredOptions.map((option) => /* @__PURE__ */ jsxs13(
+            /* @__PURE__ */ jsxs14(List5, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+              filteredOptions.map((option) => /* @__PURE__ */ jsxs14(
                 ListItemButton3,
                 {
                   selected: option.id === selectedId,
@@ -4647,9 +4725,9 @@ var Selector = ({
                 },
                 option.id
               )),
-              filteredOptions.length === 0 && /* @__PURE__ */ jsx32(Box9, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx32(Typography8, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
+              filteredOptions.length === 0 && /* @__PURE__ */ jsx32(Box10, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx32(Typography8, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
             ] }),
-            onCreate && /* @__PURE__ */ jsx32(Box9, { sx: { p: 1, borderTop: `1px solid ${theme2.palette.grey[200]}` }, children: /* @__PURE__ */ jsx32(
+            onCreate && /* @__PURE__ */ jsx32(Box10, { sx: { p: 1, borderTop: `1px solid ${theme2.palette.grey[200]}` }, children: /* @__PURE__ */ jsx32(
               Button,
               {
                 fullWidth: true,
@@ -4666,8 +4744,8 @@ var Selector = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
-    /* @__PURE__ */ jsxs13(Box9, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
+    /* @__PURE__ */ jsxs14(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" }) })
     ] }),
@@ -4680,8 +4758,8 @@ var Selector = ({
         PaperProps: {
           sx: { width, maxHeight: 600, mt: 1 }
         },
-        children: loading ? /* @__PURE__ */ jsx32(Box9, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx32(CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
-          options2.length > 5 && /* @__PURE__ */ jsx32(Box9, { sx: { p: 1, borderBottom: `1px solid ${theme2.palette.grey[200]}` }, children: /* @__PURE__ */ jsx32(
+        children: loading ? /* @__PURE__ */ jsx32(Box10, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx32(CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxs14(Fragment6, { children: [
+          options2.length > 5 && /* @__PURE__ */ jsx32(Box10, { sx: { p: 1, borderBottom: `1px solid ${theme2.palette.grey[200]}` }, children: /* @__PURE__ */ jsx32(
             TextField,
             {
               size: "small",
@@ -4694,8 +4772,8 @@ var Selector = ({
               }
             }
           ) }),
-          /* @__PURE__ */ jsxs13(List5, { sx: { maxHeight: 400, overflow: "auto" }, children: [
-            filteredOptions.map((option) => /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsxs14(List5, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+            filteredOptions.map((option) => /* @__PURE__ */ jsxs14(
               ListItemButton3,
               {
                 selected: option.id === selectedId,
@@ -4708,9 +4786,9 @@ var Selector = ({
               },
               option.id
             )),
-            filteredOptions.length === 0 && /* @__PURE__ */ jsx32(Box9, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx32(Typography8, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
+            filteredOptions.length === 0 && /* @__PURE__ */ jsx32(Box10, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx32(Typography8, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
           ] }),
-          onCreate && /* @__PURE__ */ jsx32(Box9, { sx: { p: 1, borderTop: `1px solid ${theme2.palette.grey[200]}` }, children: /* @__PURE__ */ jsx32(
+          onCreate && /* @__PURE__ */ jsx32(Box10, { sx: { p: 1, borderTop: `1px solid ${theme2.palette.grey[200]}` }, children: /* @__PURE__ */ jsx32(
             Button,
             {
               fullWidth: true,
@@ -4839,12 +4917,12 @@ var StatusDot = ({
 };
 
 // src/components/feedback/CopyChip.tsx
-import { useEffect, useRef as useRef2, useState as useState6 } from "react";
-import Box10 from "@mui/material/Box";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState7 } from "react";
+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 jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
 var COPY_FEEDBACK_MS = 1200;
 var CopyChip = ({
   text,
@@ -4854,9 +4932,9 @@ var CopyChip = ({
   tooltipCopiedLabel = "Copied",
   onCopy
 }) => {
-  const [copied, setCopied] = useState6(false);
+  const [copied, setCopied] = useState7(false);
   const timerRef = useRef2(null);
-  useEffect(() => {
+  useEffect3(() => {
     return () => {
       if (timerRef.current != null) clearTimeout(timerRef.current);
     };
@@ -4872,8 +4950,8 @@ 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__ */ jsxs14(
-    Box10,
+  return /* @__PURE__ */ jsx35(Tooltip6, { title: copied ? tooltipCopiedLabel : tooltipLabel, placement: "top", children: /* @__PURE__ */ jsxs15(
+    Box11,
     {
       component: "button",
       type: "button",
@@ -4898,7 +4976,7 @@ var CopyChip = ({
       },
       children: [
         /* @__PURE__ */ jsx35(
-          Box10,
+          Box11,
           {
             component: "span",
             sx: {
@@ -4958,16 +5036,16 @@ var RoleBadge = ({
 };
 
 // src/components/feedback/IDBlock.tsx
-import { useState as useState7 } from "react";
-import Box11 from "@mui/material/Box";
+import { useState as useState8 } from "react";
+import Box12 from "@mui/material/Box";
 import Typography9 from "@mui/material/Typography";
 import IconButton6 from "@mui/material/IconButton";
 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 jsxs15 } from "react/jsx-runtime";
-var IDContainer = styled24(Box11)(() => ({
+import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
+var IDContainer = styled24(Box12)(() => ({
   display: "inline-flex",
   alignItems: "center",
   gap: "4px",
@@ -4982,7 +5060,7 @@ var IDBlock = ({
   entityType = "entity",
   onCopy
 }) => {
-  const [snackbar, setSnackbar] = useState7({
+  const [snackbar, setSnackbar] = useState8({
     open: false,
     message: "",
     severity: "success"
@@ -5002,9 +5080,9 @@ var IDBlock = ({
   const handleSnackbarClose = () => {
     setSnackbar((prev) => ({ ...prev, open: false }));
   };
-  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
-    /* @__PURE__ */ jsxs15(IDContainer, { children: [
-      /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(Fragment7, { children: [
+    /* @__PURE__ */ jsxs16(IDContainer, { children: [
+      /* @__PURE__ */ jsxs16(
         Typography9,
         {
           variant: "body2",
@@ -5127,12 +5205,12 @@ var Progress = ({
 };
 
 // src/components/feedback/Alert.tsx
-import React12 from "react";
+import React13 from "react";
 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 jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
 var StyledAlert = styled27(MuiAlert)({
   borderRadius: 8,
   "&.MuiAlert-filled": {
@@ -5145,7 +5223,7 @@ var Alert2 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs16(StyledAlert, { severity, ...props, children: [
+  return /* @__PURE__ */ jsxs17(StyledAlert, { severity, ...props, children: [
     title && /* @__PURE__ */ jsx40(MuiAlertTitle, { children: title }),
     children
   ] });
@@ -5182,9 +5260,9 @@ var Snackbar2 = ({
   if (!content) {
     return null;
   }
-  const NoTransition = React12.forwardRef(
+  const NoTransition = React13.forwardRef(
     (props2, ref) => {
-      return React12.cloneElement(props2.children, {
+      return React13.cloneElement(props2.children, {
         ref,
         style: {
           ...props2.children.props.style,
@@ -5214,16 +5292,16 @@ var Snackbar2 = ({
 };
 
 // src/components/feedback/EmptyState.tsx
-import { Box as Box12, Typography as Typography10 } from "@mui/material";
-import { jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Box as Box13, Typography as Typography10 } from "@mui/material";
+import { jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
 var EmptyState = ({
   title = "No items found",
   description,
   icon,
   action
 }) => {
-  return /* @__PURE__ */ jsxs17(
-    Box12,
+  return /* @__PURE__ */ jsxs18(
+    Box13,
     {
       sx: {
         display: "flex",
@@ -5236,7 +5314,7 @@ var EmptyState = ({
       },
       children: [
         icon && /* @__PURE__ */ jsx41(
-          Box12,
+          Box13,
           {
             sx: {
               color: "text.secondary",
@@ -5248,22 +5326,22 @@ var EmptyState = ({
         ),
         /* @__PURE__ */ jsx41(Typography10, { variant: "h6", sx: { marginBottom: 1, color: "text.primary" }, children: title }),
         description && /* @__PURE__ */ jsx41(Typography10, { variant: "body2", sx: { color: "text.secondary", marginBottom: 3 }, children: description }),
-        action && /* @__PURE__ */ jsx41(Box12, { children: action })
+        action && /* @__PURE__ */ jsx41(Box13, { children: action })
       ]
     }
   );
 };
 
 // src/components/feedback/Loading.tsx
-import { Box as Box13, CircularProgress as CircularProgress3, Typography as Typography11 } from "@mui/material";
-import { jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Box as Box14, CircularProgress as CircularProgress3, Typography as Typography11 } from "@mui/material";
+import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
 var Loading = ({
   message = "Loading...",
   size: size3 = 40,
   fullScreen = false
 }) => {
-  const content = /* @__PURE__ */ jsxs18(
-    Box13,
+  const content = /* @__PURE__ */ jsxs19(
+    Box14,
     {
       sx: {
         display: "flex",
@@ -5294,15 +5372,15 @@ var Loading = ({
 };
 
 // src/components/feedback/AppLoading.tsx
-import { Box as Box14, CircularProgress as CircularProgress4, Typography as Typography12 } from "@mui/material";
-import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Box as Box15, CircularProgress as CircularProgress4, Typography as Typography12 } from "@mui/material";
+import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
 var AppLoading = ({
   message = "Loading...",
   logo = "/icons/logo.png",
   sx = {}
 }) => {
-  return /* @__PURE__ */ jsxs19(
-    Box14,
+  return /* @__PURE__ */ jsxs20(
+    Box15,
     {
       sx: [
         {
@@ -5322,7 +5400,7 @@ var AppLoading = ({
       ],
       children: [
         logo && /* @__PURE__ */ jsx43(
-          Box14,
+          Box15,
           {
             component: "img",
             src: logo,
@@ -5360,8 +5438,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 jsxs20 } from "react/jsx-runtime";
-var CereIcon = memo((props) => /* @__PURE__ */ jsxs20(SvgIcon, { ...props, viewBox: "0 0 24 28", children: [
+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: [
   /* @__PURE__ */ jsx45("g", { clipPath: "url(#a)", children: /* @__PURE__ */ jsx45(
     "path",
     {
@@ -5373,7 +5451,7 @@ var CereIcon = memo((props) => /* @__PURE__ */ jsxs20(SvgIcon, { ...props, viewB
 ] }));
 
 // src/components/layout/Logo.tsx
-import { jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs22 } from "react/jsx-runtime";
 var sizesMap = {
   large: 38,
   medium: 32,
@@ -5384,7 +5462,7 @@ var Container = styled28(Stack3)({
     fontSize: "inherit"
   }
 });
-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: [
+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: [
   icon,
   children && /* @__PURE__ */ jsx46(Stack3, { children })
 ] });
@@ -5397,13 +5475,13 @@ import {
   DialogActions,
   Button as Button6,
   IconButton as IconButton7,
-  Box as Box15,
+  Box as Box16,
   Typography as Typography13,
   Divider as Divider2,
   CircularProgress as CircularProgress6
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
 var Dialog = ({
   open,
   title,
@@ -5427,7 +5505,7 @@ var Dialog = ({
     if (e) e.stopPropagation();
     onClose();
   };
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     MuiDialog,
     {
       open,
@@ -5444,9 +5522,9 @@ var Dialog = ({
         ...dialogProps.PaperProps
       },
       children: [
-        /* @__PURE__ */ jsxs22(DialogTitle, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2 }, children: [
-          /* @__PURE__ */ jsx47(Box15, { sx: { display: "flex", alignItems: "center" }, children: typeof title === "string" ? /* @__PURE__ */ jsx47(Typography13, { variant: "h6", children: title }) : title }),
-          /* @__PURE__ */ jsxs22(Box15, { sx: { display: "flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs23(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: [
             headerAction,
             /* @__PURE__ */ jsx47(
               IconButton7,
@@ -5462,9 +5540,9 @@ var Dialog = ({
         ] }),
         dividers && /* @__PURE__ */ jsx47(Divider2, {}),
         /* @__PURE__ */ jsx47(DialogContent, { dividers, children }),
-        (showActions || customActions) && /* @__PURE__ */ jsxs22(Fragment8, { children: [
+        (showActions || customActions) && /* @__PURE__ */ jsxs23(Fragment8, { children: [
           dividers && /* @__PURE__ */ jsx47(Divider2, {}),
-          /* @__PURE__ */ jsx47(DialogActions, { children: customActions || /* @__PURE__ */ jsxs22(Fragment8, { children: [
+          /* @__PURE__ */ jsx47(DialogActions, { children: customActions || /* @__PURE__ */ jsxs23(Fragment8, { children: [
             /* @__PURE__ */ jsx47(
               Button6,
               {
@@ -5494,7 +5572,7 @@ var Dialog = ({
 // src/components/layout/Drawer.tsx
 import MuiDrawer from "@mui/material/Drawer";
 import { styled as styled29 } from "@mui/material/styles";
-import { Box as Box16, IconButton as IconButton8, Typography as Typography14, Divider as Divider3, Tabs, Tab as Tab2 } from "@mui/material";
+import { Box as Box17, IconButton as IconButton8, Typography as Typography14, Divider as Divider3, Tabs, Tab as Tab2 } from "@mui/material";
 import CloseIcon2 from "@mui/icons-material/Close";
 
 // src/components/layout/drawerWidth.ts
@@ -5517,7 +5595,7 @@ function resolveDrawerWidth(width, theme2, defaultWidth) {
 }
 
 // src/components/layout/Drawer.tsx
-import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs24 } 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 }) => {
@@ -5567,7 +5645,7 @@ var Drawer2 = ({
   const finalWidth = width ?? defaultWidth;
   const shouldShowClose = showCloseButton ?? (variant === "temporary" || variant === "persistent");
   const hasHeader = title || header || shouldShowClose || tabs;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     StyledDrawer2,
     {
       width: finalWidth,
@@ -5592,9 +5670,9 @@ var Drawer2 = ({
       },
       ...props,
       children: [
-        hasHeader && /* @__PURE__ */ jsxs23(Fragment9, { children: [
+        hasHeader && /* @__PURE__ */ jsxs24(Fragment9, { children: [
           /* @__PURE__ */ jsx48(
-            Box16,
+            Box17,
             {
               sx: {
                 display: "flex",
@@ -5605,8 +5683,8 @@ var Drawer2 = ({
                 borderBottom: 1,
                 borderColor: "divider"
               },
-              children: header || /* @__PURE__ */ jsxs23(Fragment9, { children: [
-                /* @__PURE__ */ jsx48(Box16, { sx: { flex: 1 }, children: typeof title === "string" ? /* @__PURE__ */ jsx48(Typography14, { variant: "h6", children: title }) : title }),
+              children: header || /* @__PURE__ */ jsxs24(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,
                   {
@@ -5643,7 +5721,7 @@ var Drawer2 = ({
           )
         ] }),
         /* @__PURE__ */ jsx48(
-          Box16,
+          Box17,
           {
             sx: {
               flex: 1,
@@ -5655,10 +5733,10 @@ var Drawer2 = ({
             children
           }
         ),
-        footer && /* @__PURE__ */ jsxs23(Fragment9, { children: [
+        footer && /* @__PURE__ */ jsxs24(Fragment9, { children: [
           /* @__PURE__ */ jsx48(Divider3, {}),
           /* @__PURE__ */ jsx48(
-            Box16,
+            Box17,
             {
               sx: {
                 p: 2,
@@ -5675,12 +5753,12 @@ var Drawer2 = ({
 };
 
 // src/components/layout/MetaField.tsx
-import Box17 from "@mui/material/Box";
+import Box18 from "@mui/material/Box";
 import Typography15 from "@mui/material/Typography";
-import { jsx as jsx49, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs25 } from "react/jsx-runtime";
 var MetaField = ({ label, value, mono = false, title }) => {
   const resolvedTitle = title ?? (typeof value === "string" ? value : void 0);
-  return /* @__PURE__ */ jsxs24(Box17, { sx: { display: "flex", flexDirection: "column", gap: 0.25, minWidth: 0 }, children: [
+  return /* @__PURE__ */ jsxs25(Box18, { sx: { display: "flex", flexDirection: "column", gap: 0.25, minWidth: 0 }, children: [
     /* @__PURE__ */ jsx49(
       Typography15,
       {
@@ -5714,12 +5792,12 @@ var MetaField = ({ label, value, mono = false, title }) => {
 };
 
 // src/components/layout/ScrollableRow.tsx
-import { useEffect as useEffect2, useRef as useRef3, useState as useState8 } from "react";
-import Box18 from "@mui/material/Box";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState9 } from "react";
+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 jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
 var EDGE_TOLERANCE_PX = 4;
 var ScrollableRow = ({
   children,
@@ -5729,9 +5807,9 @@ var ScrollableRow = ({
   nudgeFraction = 0.6
 }) => {
   const scrollerRef = useRef3(null);
-  const [canLeft, setCanLeft] = useState8(false);
-  const [canRight, setCanRight] = useState8(false);
-  useEffect2(() => {
+  const [canLeft, setCanLeft] = useState9(false);
+  const [canRight, setCanRight] = useState9(false);
+  useEffect4(() => {
     const el = scrollerRef.current;
     if (!el) return;
     const update = () => {
@@ -5759,9 +5837,9 @@ var ScrollableRow = ({
     if (!el) return;
     el.scrollBy({ left: dir * Math.max(minNudge, el.clientWidth * nudgeFraction), behavior: "smooth" });
   };
-  return /* @__PURE__ */ jsxs25(Box18, { sx: { position: "relative", flex: 1, minWidth: 0 }, children: [
+  return /* @__PURE__ */ jsxs26(Box19, { sx: { position: "relative", flex: 1, minWidth: 0 }, children: [
     /* @__PURE__ */ jsx50(
-      Box18,
+      Box19,
       {
         ref: scrollerRef,
         "data-scrollable-row-scroller": true,
@@ -5815,13 +5893,352 @@ var ScrollableRow = ({
   ] });
 };
 
+// src/components/layout/Carousel.tsx
+import { useEffect as useEffect5, useState as useState10 } from "react";
+import Box20 from "@mui/material/Box";
+import IconButton10 from "@mui/material/IconButton";
+import Typography16 from "@mui/material/Typography";
+import ChevronLeftIcon3 from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon3 from "@mui/icons-material/ChevronRight";
+import useEmblaCarousel from "embla-carousel-react";
+import { Fragment as Fragment10, jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
+var pad2 = (n) => String(n).padStart(2, "0");
+function Carousel({
+  slides,
+  renderSlide,
+  getKey,
+  slidesPerView = 1,
+  autoplay = true,
+  autoplayDelayMs = 5e3,
+  showDots = true,
+  showCounter = true,
+  showArrows = true,
+  pauseOnHover = true,
+  ariaLabel,
+  onSelect,
+  arrowSx,
+  dotColor,
+  dotActiveColor
+}) {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "start" });
+  const [selected, setSelected] = useState10(0);
+  const [paused, setPaused] = useState10(false);
+  const count = slides.length;
+  useEffect5(() => {
+    if (!emblaApi) return;
+    const handleSelect = () => {
+      const next = emblaApi.selectedScrollSnap();
+      setSelected(next);
+      onSelect?.(next);
+    };
+    emblaApi.on("select", handleSelect);
+    handleSelect();
+    return () => {
+      emblaApi.off("select", handleSelect);
+    };
+  }, [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 arrowBaseSx = {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    bgcolor: "background.paper",
+    boxShadow: 1,
+    "&:hover": { bgcolor: "background.paper" }
+  };
+  return /* @__PURE__ */ jsxs27(
+    Box20,
+    {
+      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__ */ jsx51(Box20, { ref: emblaRef, sx: { overflow: "hidden" }, children: /* @__PURE__ */ jsx51(Box20, { sx: { display: "flex" }, children: slides.map((item, i) => /* @__PURE__ */ jsx51(
+          Box20,
+          {
+            role: "group",
+            "aria-roledescription": "slide",
+            "aria-label": `${i + 1} of ${count}`,
+            sx: { flex: `0 0 ${slideBasis}`, minWidth: 0 },
+            children: renderSlide(item, i)
+          },
+          getKey ? getKey(item, i) : i
+        )) }) }),
+        showControls && showArrows && /* @__PURE__ */ jsxs27(Fragment10, { children: [
+          /* @__PURE__ */ jsx51(
+            IconButton10,
+            {
+              "aria-label": "Previous slide",
+              onClick: () => emblaApi?.scrollPrev(),
+              sx: [arrowBaseSx, { left: 8 }, ...Array.isArray(arrowSx) ? arrowSx : [arrowSx]],
+              children: /* @__PURE__ */ jsx51(ChevronLeftIcon3, {})
+            }
+          ),
+          /* @__PURE__ */ jsx51(
+            IconButton10,
+            {
+              "aria-label": "Next slide",
+              onClick: () => emblaApi?.scrollNext(),
+              sx: [arrowBaseSx, { right: 8 }, ...Array.isArray(arrowSx) ? arrowSx : [arrowSx]],
+              children: /* @__PURE__ */ jsx51(ChevronRightIcon3, {})
+            }
+          )
+        ] }),
+        showControls && showCounter && /* @__PURE__ */ jsxs27(
+          Typography16,
+          {
+            variant: "caption",
+            sx: {
+              position: "absolute",
+              top: 12,
+              right: 16,
+              px: 1,
+              py: 0.25,
+              borderRadius: 1,
+              bgcolor: "rgba(0,0,0,0.5)",
+              color: "common.white",
+              letterSpacing: 1
+            },
+            children: [
+              pad2(selected + 1),
+              " / ",
+              pad2(count)
+            ]
+          }
+        ),
+        showControls && showDots && /* @__PURE__ */ jsx51(
+          Box20,
+          {
+            role: "tablist",
+            "aria-label": "Carousel slides",
+            sx: {
+              position: "absolute",
+              bottom: 12,
+              left: 0,
+              right: 0,
+              display: "flex",
+              justifyContent: "center",
+              gap: 1
+            },
+            children: slides.map((item, i) => /* @__PURE__ */ jsx51(
+              Box20,
+              {
+                component: "button",
+                role: "tab",
+                "aria-selected": i === selected,
+                "aria-label": `Go to slide ${i + 1}`,
+                type: "button",
+                onClick: () => emblaApi?.scrollTo(i),
+                sx: (theme2) => ({
+                  width: i === selected ? 24 : 8,
+                  height: 8,
+                  borderRadius: 4,
+                  border: "none",
+                  padding: 0,
+                  cursor: "pointer",
+                  bgcolor: i === selected ? dotActiveColor ?? theme2.palette.primary.main : dotColor ?? theme2.palette.action.disabled,
+                  transition: "width 0.2s ease, background 0.2s ease"
+                })
+              },
+              getKey ? getKey(item, i) : i
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/layout/DefinitionRow.tsx
+import Box21 from "@mui/material/Box";
+import Typography17 from "@mui/material/Typography";
+import { jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
+function DefinitionRow({
+  icon,
+  label,
+  sublabel,
+  value,
+  hint,
+  dense = false,
+  divider = true
+}) {
+  return /* @__PURE__ */ jsxs28(
+    Box21,
+    {
+      "data-density": dense ? "dense" : "normal",
+      sx: {
+        py: dense ? 0.75 : 1.25,
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5,
+        ...divider && {
+          borderBottom: "1px solid",
+          borderColor: "divider",
+          "&:last-of-type": { borderBottom: "none" }
+        }
+      },
+      children: [
+        icon && /* @__PURE__ */ jsx52(Box21, { sx: { display: "flex", alignItems: "center", color: "text.secondary" }, children: icon }),
+        /* @__PURE__ */ jsxs28(Box21, { sx: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ jsx52(Typography17, { variant: "body2", sx: { fontWeight: 500, lineHeight: 1.2 }, children: label }),
+          sublabel && /* @__PURE__ */ jsx52(Typography17, { variant: "caption", sx: { color: "text.secondary" }, children: sublabel })
+        ] }),
+        (value || hint) && /* @__PURE__ */ jsxs28(
+          Box21,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-end",
+              textAlign: "right"
+            },
+            children: [
+              value && /* @__PURE__ */ jsx52(Typography17, { variant: "body2", sx: { color: "text.secondary" }, children: value }),
+              hint && /* @__PURE__ */ jsx52(Typography17, { variant: "caption", sx: { color: "text.disabled" }, children: hint })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/layout/PanelDialog.tsx
+import { forwardRef as forwardRef2 } from "react";
+import MuiDialog2 from "@mui/material/Dialog";
+import IconButton11 from "@mui/material/IconButton";
+import Box22 from "@mui/material/Box";
+import Typography18 from "@mui/material/Typography";
+import Slide from "@mui/material/Slide";
+import CloseIcon3 from "@mui/icons-material/Close";
+import { jsx as jsx53, jsxs as jsxs29 } from "react/jsx-runtime";
+var WIDTH_PX = {
+  sm: 420,
+  md: 640,
+  lg: 880,
+  xl: 1080
+};
+var SlideLeft = forwardRef2(
+  function SlideLeft2(props, ref) {
+    return /* @__PURE__ */ jsx53(Slide, { direction: "left", ref, ...props });
+  }
+);
+var SlideUp = forwardRef2(
+  function SlideUp2(props, ref) {
+    return /* @__PURE__ */ jsx53(Slide, { direction: "up", ref, ...props });
+  }
+);
+function PanelDialog({
+  open,
+  onClose,
+  title,
+  headerActions,
+  width = "md",
+  side = "right",
+  ariaLabel,
+  hideHeader = false,
+  paperSx,
+  backdropSx,
+  transition,
+  children
+}) {
+  const accessibleName = ariaLabel ?? (typeof title === "string" ? title : void 0);
+  const isRight = side === "right";
+  const resolvedTransition = transition ?? (isRight ? "slide-left" : "fade");
+  const TransitionComponent = resolvedTransition === "slide-left" ? SlideLeft : resolvedTransition === "slide-up" ? SlideUp : void 0;
+  const paperBaseSx = {
+    width: WIDTH_PX[width],
+    maxWidth: "100%",
+    ...isRight && {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      margin: 0,
+      maxHeight: "100vh",
+      height: "100vh",
+      borderRadius: 0
+    }
+  };
+  return /* @__PURE__ */ jsxs29(
+    MuiDialog2,
+    {
+      open,
+      onClose,
+      TransitionComponent,
+      slotProps: {
+        paper: {
+          "aria-label": accessibleName,
+          sx: [paperBaseSx, ...Array.isArray(paperSx) ? paperSx : [paperSx]]
+        },
+        ...backdropSx ? { backdrop: { sx: backdropSx } } : {}
+      },
+      children: [
+        !hideHeader && /* @__PURE__ */ jsxs29(
+          Box22,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 1,
+              px: 2,
+              py: 1.5,
+              borderBottom: "1px solid",
+              borderColor: "divider"
+            },
+            children: [
+              /* @__PURE__ */ jsx53(Box22, { sx: { display: "flex", alignItems: "center", minWidth: 0 }, children: typeof title === "string" ? /* @__PURE__ */ jsx53(Typography18, { variant: "h6", noWrap: true, children: title }) : title }),
+              /* @__PURE__ */ jsxs29(Box22, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                headerActions,
+                /* @__PURE__ */ jsx53(IconButton11, { "aria-label": "Close", onClick: onClose, edge: "end", size: "small", children: /* @__PURE__ */ jsx53(CloseIcon3, { fontSize: "small" }) })
+              ] })
+            ]
+          }
+        ),
+        hideHeader && /* @__PURE__ */ jsx53(
+          IconButton11,
+          {
+            "aria-label": "Close",
+            onClick: onClose,
+            size: "small",
+            sx: {
+              position: "absolute",
+              top: 12,
+              right: 12,
+              zIndex: 2,
+              bgcolor: "background.paper",
+              boxShadow: 1,
+              "&:hover": { bgcolor: "background.paper" }
+            },
+            children: /* @__PURE__ */ jsx53(CloseIcon3, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ jsx53(Box22, { sx: { flex: 1, overflow: "auto", minHeight: 0 }, children })
+      ]
+    }
+  );
+}
+
 // src/components/layout/Card.tsx
 import MuiCard from "@mui/material/Card";
 import MuiCardContent from "@mui/material/CardContent";
 import MuiCardHeader from "@mui/material/CardHeader";
 import MuiCardActions from "@mui/material/CardActions";
+import MuiCardMedia from "@mui/material/CardMedia";
 import { styled as styled30 } from "@mui/material/styles";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
+var CardMedia = (props) => /* @__PURE__ */ jsx54(MuiCardMedia, { ...props });
 var StyledCard = styled30(MuiCard, {
   shouldForwardProp: (prop) => prop !== "hoverable" && prop !== "clickable"
 })(({ hoverable, clickable }) => ({
@@ -5839,16 +6256,16 @@ var StyledCard = styled30(MuiCard, {
   }
 }));
 var Card = ({ hoverable = false, clickable = false, children, ...props }) => {
-  return /* @__PURE__ */ jsx51(StyledCard, { hoverable, clickable, ...props, children });
+  return /* @__PURE__ */ jsx54(StyledCard, { hoverable, clickable, ...props, children });
 };
 var CardContent = (props) => {
-  return /* @__PURE__ */ jsx51(MuiCardContent, { ...props });
+  return /* @__PURE__ */ jsx54(MuiCardContent, { ...props });
 };
 var CardHeader = (props) => {
-  return /* @__PURE__ */ jsx51(MuiCardHeader, { ...props });
+  return /* @__PURE__ */ jsx54(MuiCardHeader, { ...props });
 };
 var CardActions = (props) => {
-  return /* @__PURE__ */ jsx51(MuiCardActions, { ...props });
+  return /* @__PURE__ */ jsx54(MuiCardActions, { ...props });
 };
 
 // src/components/layout/List.tsx
@@ -5860,9 +6277,9 @@ import {
   ListItemSecondaryAction
 } from "@mui/material";
 import { styled as styled31 } from "@mui/material/styles";
-import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
 var List6 = (props) => {
-  return /* @__PURE__ */ jsx52(MuiList, { ...props });
+  return /* @__PURE__ */ jsx55(MuiList, { ...props });
 };
 var StyledListItem = styled31(MuiListItem, {
   shouldForwardProp: (prop) => prop !== "hoverable"
@@ -5885,9 +6302,9 @@ var ListItem4 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs26(StyledListItem, { hoverable, ...props, children: [
-    icon && /* @__PURE__ */ jsx52(ListItemIcon4, { children: icon }),
-    (primary || secondary) && /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsxs30(StyledListItem, { hoverable, ...props, children: [
+    icon && /* @__PURE__ */ jsx55(ListItemIcon4, { children: icon }),
+    (primary || secondary) && /* @__PURE__ */ jsx55(
       ListItemText7,
       {
         primary,
@@ -5902,7 +6319,7 @@ var ListItem4 = ({
 // src/components/layout/Avatar.tsx
 import MuiAvatar from "@mui/material/Avatar";
 import { styled as styled32 } from "@mui/material/styles";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var sizeMap = {
   small: 32,
   medium: 40,
@@ -5919,7 +6336,7 @@ var StyledAvatar = styled32(MuiAvatar, {
 }));
 var Avatar5 = ({ size: size3 = "medium", ...props }) => {
   const avatarSize = typeof size3 === "number" ? size3 : sizeMap[size3];
-  return /* @__PURE__ */ jsx53(StyledAvatar, { avatarSize, ...props });
+  return /* @__PURE__ */ jsx56(StyledAvatar, { avatarSize, ...props });
 };
 
 // src/components/layout/Table.tsx
@@ -5933,7 +6350,7 @@ import {
   TableSortLabel
 } from "@mui/material";
 import { styled as styled33 } from "@mui/material/styles";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var StyledTableContainer = styled33(TableContainer)(({ theme: theme2 }) => ({
   borderRadius: 8,
   border: `1px solid ${theme2.palette.grey[200]}`
@@ -5946,7 +6363,7 @@ var StyledTableHead = styled33(TableHead)(({ theme: theme2 }) => ({
   }
 }));
 var Table = ({ stickyHeader = false, children, ...props }) => {
-  return /* @__PURE__ */ jsx54(StyledTableContainer, { children: /* @__PURE__ */ jsx54(MuiTable, { stickyHeader, ...props, children }) });
+  return /* @__PURE__ */ jsx57(StyledTableContainer, { children: /* @__PURE__ */ jsx57(MuiTable, { stickyHeader, ...props, children }) });
 };
 var TableHeader = ({
   columns,
@@ -5954,7 +6371,7 @@ var TableHeader = ({
   order = "asc",
   onSort
 }) => {
-  return /* @__PURE__ */ jsx54(StyledTableHead, { children: /* @__PURE__ */ jsx54(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx54(TableCell, { align: column.align || "left", children: column.sortable && onSort ? /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx57(StyledTableHead, { children: /* @__PURE__ */ jsx57(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx57(TableCell, { align: column.align || "left", children: column.sortable && onSort ? /* @__PURE__ */ jsx57(
     TableSortLabel,
     {
       active: orderBy === column.id,
@@ -5971,9 +6388,9 @@ import { Grid2 } from "@mui/material";
 // src/components/layout/Breadcrumbs.tsx
 import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
 import Link4 from "@mui/material/Link";
-import Typography16 from "@mui/material/Typography";
+import Typography19 from "@mui/material/Typography";
 import { styled as styled34 } from "@mui/material/styles";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var StyledBreadcrumbs = styled34(MuiBreadcrumbs)(({ theme: theme2 }) => ({
   "& .MuiBreadcrumbs-ol": {
     flexWrap: "nowrap"
@@ -5990,12 +6407,12 @@ var StyledLink2 = styled34(Link4)(({ theme: theme2 }) => ({
   }
 }));
 var Breadcrumbs = ({ items, ...props }) => {
-  return /* @__PURE__ */ jsx55(StyledBreadcrumbs, { ...props, children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx58(StyledBreadcrumbs, { ...props, children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     if (isLast || !item.href && !item.onClick) {
-      return /* @__PURE__ */ jsx55(Typography16, { color: "text.primary", children: item.label }, index);
+      return /* @__PURE__ */ jsx58(Typography19, { color: "text.primary", children: item.label }, index);
     }
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx58(
       StyledLink2,
       {
         href: item.href,
@@ -6020,7 +6437,7 @@ import {
 } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { styled as styled35 } from "@mui/material/styles";
-import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs31 } from "react/jsx-runtime";
 var StyledAccordion = styled35(MuiAccordion)(({ theme: theme2 }) => ({
   borderRadius: 8,
   boxShadow: "none",
@@ -6051,16 +6468,16 @@ var Accordion = ({
   defaultExpanded = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs27(StyledAccordion, { defaultExpanded, ...props, children: [
-    /* @__PURE__ */ jsx56(StyledAccordionSummary, { expandIcon: /* @__PURE__ */ jsx56(ExpandMoreIcon, {}), children: title }),
-    /* @__PURE__ */ jsx56(StyledAccordionDetails, { children })
+  return /* @__PURE__ */ jsxs31(StyledAccordion, { defaultExpanded, ...props, children: [
+    /* @__PURE__ */ jsx59(StyledAccordionSummary, { expandIcon: /* @__PURE__ */ jsx59(ExpandMoreIcon, {}), children: title }),
+    /* @__PURE__ */ jsx59(StyledAccordionDetails, { children })
   ] });
 };
 
 // src/components/layout/Paper.tsx
 import MuiPaper from "@mui/material/Paper";
 import { styled as styled36 } from "@mui/material/styles";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var StyledPaper = styled36(MuiPaper)(({ theme: theme2 }) => ({
   borderRadius: 8,
   "&.MuiPaper-elevation": {
@@ -6072,28 +6489,28 @@ var StyledPaper = styled36(MuiPaper)(({ theme: theme2 }) => ({
   }
 }));
 var Paper = ({ variant = "elevation", ...props }) => {
-  return /* @__PURE__ */ jsx57(StyledPaper, { variant, elevation: variant === "elevation" ? 1 : 0, ...props });
+  return /* @__PURE__ */ jsx60(StyledPaper, { variant, elevation: variant === "elevation" ? 1 : 0, ...props });
 };
 
 // src/components/layout/Divider.tsx
 import MuiDivider from "@mui/material/Divider";
 import { styled as styled37 } from "@mui/material/styles";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var StyledDivider = styled37(MuiDivider)(({ theme: theme2 }) => ({
   borderColor: theme2.palette.grey[200]
 }));
 var Divider4 = ({ ...props }) => {
-  return /* @__PURE__ */ jsx58(StyledDivider, { ...props });
+  return /* @__PURE__ */ jsx61(StyledDivider, { ...props });
 };
 
 // src/components/layout/Stack.tsx
 import { Stack as Stack4 } from "@mui/material";
 
 // src/components/layout/Box.tsx
-import { Box as Box19 } from "@mui/material";
+import { Box as Box23 } from "@mui/material";
 
 // src/components/layout/Typography.tsx
-import { Typography as Typography17 } from "@mui/material";
+import { Typography as Typography20 } from "@mui/material";
 
 // src/components/layout/Container.tsx
 import { Container as Container2 } from "@mui/material";
@@ -6104,7 +6521,7 @@ import {
   Toolbar
 } from "@mui/material";
 import { styled as styled38 } from "@mui/material/styles";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var StyledAppBar = styled38(MuiAppBar, {
   shouldForwardProp: (prop) => prop !== "appBarHeight"
 })(({ appBarHeight = 64, theme: theme2 }) => ({
@@ -6121,25 +6538,25 @@ var StyledToolbar = styled38(Toolbar)(({ theme: theme2 }) => ({
   gap: theme2.spacing(2)
 }));
 var AppBar = ({ height = 64, children, ...props }) => {
-  return /* @__PURE__ */ jsx59(StyledAppBar, { position: "fixed", appBarHeight: height, ...props, children: /* @__PURE__ */ jsx59(StyledToolbar, { children }) });
+  return /* @__PURE__ */ jsx62(StyledAppBar, { position: "fixed", appBarHeight: height, ...props, children: /* @__PURE__ */ jsx62(StyledToolbar, { children }) });
 };
 
 // src/components/layout/Collapse.tsx
 import {
   Collapse as MuiCollapse
 } from "@mui/material";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var Collapse = (props) => {
-  return /* @__PURE__ */ jsx60(MuiCollapse, { ...props });
+  return /* @__PURE__ */ jsx63(MuiCollapse, { ...props });
 };
 
 // src/components/layout/EntityHeader/EntityHeader.tsx
-import Box20 from "@mui/material/Box";
-import Typography18 from "@mui/material/Typography";
-import IconButton10 from "@mui/material/IconButton";
+import Box24 from "@mui/material/Box";
+import Typography21 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 jsx61, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs32 } from "react/jsx-runtime";
 var EntityHeader = ({
   title,
   subtitle,
@@ -6158,9 +6575,9 @@ var EntityHeader = ({
     const { label, count } = primaryAction;
     return count !== void 0 ? `${label} (${count})` : label;
   };
-  return /* @__PURE__ */ jsxs28(Box20, { children: [
-    /* @__PURE__ */ jsxs28(
-      Box20,
+  return /* @__PURE__ */ jsxs32(Box24, { children: [
+    /* @__PURE__ */ jsxs32(
+      Box24,
       {
         sx: {
           display: "flex",
@@ -6171,8 +6588,8 @@ var EntityHeader = ({
           gap: 1
         },
         children: [
-          /* @__PURE__ */ jsxs28(
-            Box20,
+          /* @__PURE__ */ jsxs32(
+            Box24,
             {
               sx: {
                 display: "flex",
@@ -6181,8 +6598,8 @@ var EntityHeader = ({
                 flexWrap: "wrap"
               },
               children: [
-                /* @__PURE__ */ jsxs28(
-                  Box20,
+                /* @__PURE__ */ jsxs32(
+                  Box24,
                   {
                     sx: {
                       display: "flex",
@@ -6190,8 +6607,8 @@ var EntityHeader = ({
                       gap: 0.5
                     },
                     children: [
-                      /* @__PURE__ */ jsx61(
-                        Typography18,
+                      /* @__PURE__ */ jsx64(
+                        Typography21,
                         {
                           component: headingLevel,
                           sx: {
@@ -6204,8 +6621,8 @@ var EntityHeader = ({
                           children: title
                         }
                       ),
-                      subtitle && /* @__PURE__ */ jsx61(
-                        Typography18,
+                      subtitle && /* @__PURE__ */ jsx64(
+                        Typography21,
                         {
                           variant: "body2",
                           sx: {
@@ -6221,13 +6638,13 @@ var EntityHeader = ({
                     ]
                   }
                 ),
-                role && /* @__PURE__ */ jsx61(RoleBadge, { label: role, color: "primary", size: "small" }),
-                id && /* @__PURE__ */ jsx61(IDBlock, { id, label: "ID", entityType: "entity", onCopy: onCopyId })
+                role && /* @__PURE__ */ jsx64(RoleBadge, { label: role, color: "primary", size: "small" }),
+                id && /* @__PURE__ */ jsx64(IDBlock, { id, label: "ID", entityType: "entity", onCopy: onCopyId })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs28(
-            Box20,
+          /* @__PURE__ */ jsxs32(
+            Box24,
             {
               sx: {
                 display: "flex",
@@ -6237,7 +6654,7 @@ var EntityHeader = ({
               },
               children: [
                 startActions,
-                primaryAction && /* @__PURE__ */ jsx61(
+                primaryAction && /* @__PURE__ */ jsx64(
                   Button,
                   {
                     variant: "primary",
@@ -6250,8 +6667,8 @@ var EntityHeader = ({
                   }
                 ),
                 endActions,
-                onMoreOptions && /* @__PURE__ */ jsx61(
-                  IconButton10,
+                onMoreOptions && /* @__PURE__ */ jsx64(
+                  IconButton12,
                   {
                     onClick: onMoreOptions,
                     size: "small",
@@ -6265,7 +6682,7 @@ var EntityHeader = ({
                         borderColor: deploymentSurfaceTokens.borderDefault
                       }
                     },
-                    children: /* @__PURE__ */ jsx61(
+                    children: /* @__PURE__ */ jsx64(
                       MoreHorizIcon,
                       {
                         sx: {
@@ -6282,7 +6699,7 @@ var EntityHeader = ({
         ]
       }
     ),
-    divider && /* @__PURE__ */ jsx61(
+    divider && /* @__PURE__ */ jsx64(
       Divider5,
       {
         sx: {
@@ -6296,14 +6713,14 @@ var EntityHeader = ({
 // src/components/layout/DeploymentDashboardCard/DeploymentDashboardCard.tsx
 import {
   Paper as Paper2,
-  Box as Box21,
-  Typography as Typography19,
-  IconButton as IconButton11,
+  Box as Box25,
+  Typography as Typography22,
+  IconButton as IconButton13,
   useTheme as useTheme4,
   LinearProgress as LinearProgress2
 } from "@mui/material";
 import ExpandMoreIcon2 from "@mui/icons-material/ExpandMore";
-import ChevronRightIcon3 from "@mui/icons-material/ChevronRight";
+import ChevronRightIcon4 from "@mui/icons-material/ChevronRight";
 import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
 import WavesIcon from "@mui/icons-material/Waves";
 import RocketLaunchOutlinedIcon from "@mui/icons-material/RocketLaunchOutlined";
@@ -6312,9 +6729,9 @@ import SmartToyOutlinedIcon from "@mui/icons-material/SmartToyOutlined";
 import { styled as styled39 } from "@mui/material/styles";
 
 // src/hooks/useControlledExpand.ts
-import { useState as useState9 } from "react";
+import { useState as useState11 } from "react";
 function useControlledExpand(controlledExpanded, onToggle, defaultExpanded = false) {
-  const [internal, setInternal] = useState9(defaultExpanded);
+  const [internal, setInternal] = useState11(defaultExpanded);
   const isControlled = controlledExpanded !== void 0 && onToggle != null;
   const expanded = isControlled ? controlledExpanded : internal;
   const toggle = isControlled ? () => onToggle() : () => setInternal((prev) => !prev);
@@ -6322,7 +6739,7 @@ function useControlledExpand(controlledExpanded, onToggle, defaultExpanded = fal
 }
 
 // src/components/layout/DeploymentDashboardCard/DeploymentDashboardCard.tsx
-import { Fragment as Fragment10, jsx as jsx62, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx65, jsxs as jsxs33 } from "react/jsx-runtime";
 var ENTITY_LABELS = {
   workspace: "Workspace",
   stream: "Stream",
@@ -6332,11 +6749,11 @@ var ENTITY_LABELS = {
 };
 var ENTITY_ICON_SIZE = 16;
 var ENTITY_ICONS = {
-  workspace: /* @__PURE__ */ jsx62(WorkOutlineIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
-  stream: /* @__PURE__ */ jsx62(WavesIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
-  deployment: /* @__PURE__ */ jsx62(RocketLaunchOutlinedIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
-  engagement: /* @__PURE__ */ jsx62(InsertLinkIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
-  agent: /* @__PURE__ */ jsx62(SmartToyOutlinedIcon, { sx: { fontSize: ENTITY_ICON_SIZE } })
+  workspace: /* @__PURE__ */ jsx65(WorkOutlineIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
+  stream: /* @__PURE__ */ jsx65(WavesIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
+  deployment: /* @__PURE__ */ jsx65(RocketLaunchOutlinedIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
+  engagement: /* @__PURE__ */ jsx65(InsertLinkIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
+  agent: /* @__PURE__ */ jsx65(SmartToyOutlinedIcon, { sx: { fontSize: ENTITY_ICON_SIZE } })
 };
 var STATUS_DOT_COLORS = {
   normal: deploymentStatusColors.normal,
@@ -6357,7 +6774,7 @@ var ENTITY_CHIP_TYPOGRAPHY = {
   lineHeight: 1.33,
   letterSpacing: "0.07px"
 };
-var StatusDot2 = styled39(Box21, {
+var StatusDot2 = styled39(Box25, {
   shouldForwardProp: (p) => p !== "status"
 })(({ status }) => ({
   width: 8,
@@ -6366,8 +6783,8 @@ var StatusDot2 = styled39(Box21, {
   backgroundColor: status ? STATUS_DOT_COLORS[status] ?? "transparent" : "transparent",
   flexShrink: 0
 }));
-var EntityChip = ({ entityType, color }) => /* @__PURE__ */ jsxs29(
-  Box21,
+var EntityChip = ({ entityType, color }) => /* @__PURE__ */ jsxs33(
+  Box25,
   {
     sx: {
       display: "inline-flex",
@@ -6382,9 +6799,9 @@ var EntityChip = ({ entityType, color }) => /* @__PURE__ */ jsxs29(
       flexShrink: 0
     },
     children: [
-      /* @__PURE__ */ jsx62(Box21, { sx: { color, display: "flex", alignItems: "center" }, children: ENTITY_ICONS[entityType] }),
-      /* @__PURE__ */ jsx62(
-        Typography19,
+      /* @__PURE__ */ jsx65(Box25, { sx: { color, display: "flex", alignItems: "center" }, children: ENTITY_ICONS[entityType] }),
+      /* @__PURE__ */ jsx65(
+        Typography22,
         {
           variant: "body2",
           fontWeight: ENTITY_CHIP_TYPOGRAPHY.fontWeight,
@@ -6400,15 +6817,15 @@ var EntityChip = ({ entityType, color }) => /* @__PURE__ */ jsxs29(
     ]
   }
 );
-var CapacityBar = ({ value, indented = false }) => /* @__PURE__ */ jsxs29(Box21, { sx: { pl: indented ? "40px" : 0, pr: "20px", py: 1 }, children: [
-  /* @__PURE__ */ jsxs29(Box21, { sx: { display: "flex", justifyContent: "space-between", mb: 1 }, children: [
-    /* @__PURE__ */ jsx62(Typography19, { variant: "body2", sx: { color: deploymentSurfaceTokens.textPrimary }, children: "Capacity" }),
-    /* @__PURE__ */ jsxs29(Typography19, { variant: "body2", sx: { color: deploymentSurfaceTokens.accentBlue }, children: [
+var CapacityBar = ({ value, indented = false }) => /* @__PURE__ */ jsxs33(Box25, { sx: { pl: indented ? "40px" : 0, pr: "20px", py: 1 }, children: [
+  /* @__PURE__ */ jsxs33(Box25, { sx: { display: "flex", justifyContent: "space-between", mb: 1 }, children: [
+    /* @__PURE__ */ jsx65(Typography22, { variant: "body2", sx: { color: deploymentSurfaceTokens.textPrimary }, children: "Capacity" }),
+    /* @__PURE__ */ jsxs33(Typography22, { variant: "body2", sx: { color: deploymentSurfaceTokens.accentBlue }, children: [
       value,
       "%"
     ] })
   ] }),
-  /* @__PURE__ */ jsx62(
+  /* @__PURE__ */ jsx65(
     LinearProgress2,
     {
       variant: "determinate",
@@ -6448,19 +6865,19 @@ var getActionButtonStyles = (action) => {
   };
   return { ...baseStyles, ...variantStyles };
 };
-var CardAction = ({ action }) => /* @__PURE__ */ jsxs29(
-  Box21,
+var CardAction = ({ action }) => /* @__PURE__ */ jsxs33(
+  Box25,
   {
     component: action.onClick ? "button" : "span",
     onClick: action.onClick,
     sx: getActionButtonStyles(action),
     children: [
-      action.icon && /* @__PURE__ */ jsx62(Box21, { component: "span", sx: { display: "flex", alignItems: "center" }, children: action.icon }),
-      action.label && /* @__PURE__ */ jsx62(Typography19, { variant: "body2", fontWeight: 500, component: "span", sx: { fontSize: "14px" }, children: action.label })
+      action.icon && /* @__PURE__ */ jsx65(Box25, { component: "span", sx: { display: "flex", alignItems: "center" }, children: action.icon }),
+      action.label && /* @__PURE__ */ jsx65(Typography22, { variant: "body2", fontWeight: 500, component: "span", sx: { fontSize: "14px" }, children: action.label })
     ]
   }
 );
-var CardActionList = ({ actions }) => /* @__PURE__ */ jsx62(Fragment10, { children: actions.map((action) => /* @__PURE__ */ jsx62(CardAction, { action }, action.id)) });
+var CardActionList = ({ actions }) => /* @__PURE__ */ jsx65(Fragment11, { children: actions.map((action) => /* @__PURE__ */ jsx65(CardAction, { action }, action.id)) });
 var DeploymentDashboardCard = ({
   entityType,
   title,
@@ -6493,7 +6910,7 @@ var DeploymentDashboardCard = ({
     return Math.min(100, Math.max(0, capacity2));
   };
   const capacityClamped = getClampedCapacity(capacity);
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs33(
     Paper2,
     {
       className,
@@ -6510,8 +6927,8 @@ var DeploymentDashboardCard = ({
         gap: 0
       },
       children: [
-        /* @__PURE__ */ jsxs29(
-          Box21,
+        /* @__PURE__ */ jsxs33(
+          Box25,
           {
             sx: {
               display: "flex",
@@ -6520,21 +6937,21 @@ var DeploymentDashboardCard = ({
               width: "100%"
             },
             children: [
-              /* @__PURE__ */ jsxs29(Box21, { sx: { display: "flex", flexDirection: "column", gap: 0.5, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsxs29(Box21, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
-                  expandable ? /* @__PURE__ */ jsx62(
-                    IconButton11,
+              /* @__PURE__ */ jsxs33(Box25, { sx: { display: "flex", flexDirection: "column", gap: 0.5, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxs33(Box25, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
+                  expandable ? /* @__PURE__ */ jsx65(
+                    IconButton13,
                     {
                       size: "small",
                       onClick: toggle,
                       "aria-label": expanded ? "Collapse" : "Expand",
                       sx: { p: "5px" },
-                      children: expanded ? /* @__PURE__ */ jsx62(ExpandMoreIcon2, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.accentBlue } }) : /* @__PURE__ */ jsx62(ChevronRightIcon3, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.accentBlue } })
+                      children: expanded ? /* @__PURE__ */ jsx65(ExpandMoreIcon2, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.accentBlue } }) : /* @__PURE__ */ jsx65(ChevronRightIcon4, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.accentBlue } })
                     }
-                  ) : /* @__PURE__ */ jsx62(Box21, { sx: { width: 26, flexShrink: 0 } }),
-                  /* @__PURE__ */ jsx62(EntityChip, { entityType, color: entityColor }),
-                  /* @__PURE__ */ jsx62(
-                    Typography19,
+                  ) : /* @__PURE__ */ jsx65(Box25, { sx: { width: 26, flexShrink: 0 } }),
+                  /* @__PURE__ */ jsx65(EntityChip, { entityType, color: entityColor }),
+                  /* @__PURE__ */ jsx65(
+                    Typography22,
                     {
                       variant: "subtitle1",
                       fontWeight: 500,
@@ -6543,10 +6960,10 @@ var DeploymentDashboardCard = ({
                       children: title
                     }
                   ),
-                  idDisplay != null && /* @__PURE__ */ jsx62(IDBlock, { id: idDisplay, label: "ID", entityType, onCopy: onCopyId })
+                  idDisplay != null && /* @__PURE__ */ jsx65(IDBlock, { id: idDisplay, label: "ID", entityType, onCopy: onCopyId })
                 ] }),
-                (createdAt != null || updatedAt != null) && /* @__PURE__ */ jsxs29(
-                  Box21,
+                (createdAt != null || updatedAt != null) && /* @__PURE__ */ jsxs33(
+                  Box25,
                   {
                     sx: {
                       display: "flex",
@@ -6555,27 +6972,27 @@ var DeploymentDashboardCard = ({
                       color: deploymentSurfaceTokens.textSecondary
                     },
                     children: [
-                      createdAt != null && /* @__PURE__ */ jsxs29(Typography19, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
+                      createdAt != null && /* @__PURE__ */ jsxs33(Typography22, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
                         "Created: ",
                         createdAt
                       ] }),
-                      updatedAt != null && /* @__PURE__ */ jsxs29(Typography19, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
+                      updatedAt != null && /* @__PURE__ */ jsxs33(Typography22, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
                         "Last Updated: ",
                         updatedAt
                       ] })
                     ]
                   }
                 ),
-                capacityClamped !== void 0 && /* @__PURE__ */ jsx62(CapacityBar, { value: capacityClamped, indented: expandable })
+                capacityClamped !== void 0 && /* @__PURE__ */ jsx65(CapacityBar, { value: capacityClamped, indented: expandable })
               ] }),
-              /* @__PURE__ */ jsxs29(Box21, { sx: { display: "flex", gap: 1, alignItems: "center", flexShrink: 0 }, children: [
-                statusIndicator != null && /* @__PURE__ */ jsx62(StatusDot2, { status: statusIndicator, "aria-hidden": true }),
-                /* @__PURE__ */ jsx62(CardActionList, { actions })
+              /* @__PURE__ */ jsxs33(Box25, { sx: { display: "flex", gap: 1, alignItems: "center", flexShrink: 0 }, children: [
+                statusIndicator != null && /* @__PURE__ */ jsx65(StatusDot2, { status: statusIndicator, "aria-hidden": true }),
+                /* @__PURE__ */ jsx65(CardActionList, { actions })
               ] })
             ]
           }
         ),
-        children && /* @__PURE__ */ jsx62(Box21, { sx: { mt: 1.5, display: "flex", flexDirection: "column", gap: 1 }, children })
+        children && /* @__PURE__ */ jsx65(Box25, { sx: { mt: 1.5, display: "flex", flexDirection: "column", gap: 1 }, children })
       ]
     }
   );
@@ -6584,7 +7001,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 Fragment11, jsx as jsx63, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx66, jsxs as jsxs34 } from "react/jsx-runtime";
 var StyledMenu2 = styled40(Menu5)({
   "& .MuiPaper-root": {
     borderRadius: 4,
@@ -6682,7 +7099,7 @@ var DeploymentEntityContextMenu = ({
   enableChecked = false,
   onEnableChange
 }) => {
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs34(
     StyledMenu2,
     {
       anchorEl,
@@ -6694,11 +7111,11 @@ var DeploymentEntityContextMenu = ({
       children: [
         items.map((item) => {
           if (item.type === "divider") {
-            return /* @__PURE__ */ jsx63(StyledDivider2, {}, item.id);
+            return /* @__PURE__ */ jsx66(StyledDivider2, {}, item.id);
           }
           if (item.type === "toggle") {
-            return /* @__PURE__ */ jsxs30(ToggleMenuItem, { disableRipple: true, children: [
-              onEnableChange && /* @__PURE__ */ jsx63(
+            return /* @__PURE__ */ jsxs34(ToggleMenuItem, { disableRipple: true, children: [
+              onEnableChange && /* @__PURE__ */ jsx66(
                 EnableSwitch,
                 {
                   size: "small",
@@ -6707,11 +7124,11 @@ var DeploymentEntityContextMenu = ({
                   inputProps: { "aria-label": item.label }
                 }
               ),
-              /* @__PURE__ */ jsx63(ListItemText8, { primary: item.label })
+              /* @__PURE__ */ jsx66(ListItemText8, { primary: item.label })
             ] }, item.id);
           }
           const Row = item.highlighted ? HighlightedMenuItem : StyledMenuItem;
-          return /* @__PURE__ */ jsxs30(
+          return /* @__PURE__ */ jsxs34(
             Row,
             {
               onClick: () => {
@@ -6719,17 +7136,17 @@ var DeploymentEntityContextMenu = ({
                 onClose();
               },
               children: [
-                item.icon && /* @__PURE__ */ jsx63(ListItemIcon5, { children: item.icon }),
-                /* @__PURE__ */ jsx63(ListItemText8, { primary: item.label })
+                item.icon && /* @__PURE__ */ jsx66(ListItemIcon5, { children: item.icon }),
+                /* @__PURE__ */ jsx66(ListItemText8, { primary: item.label })
               ]
             },
             item.id
           );
         }),
-        enableToggle && /* @__PURE__ */ jsxs30(Fragment11, { children: [
-          /* @__PURE__ */ jsx63(StyledDivider2, {}),
-          /* @__PURE__ */ jsxs30(ToggleMenuItem, { disableRipple: true, children: [
-            onEnableChange && /* @__PURE__ */ jsx63(
+        enableToggle && /* @__PURE__ */ jsxs34(Fragment12, { children: [
+          /* @__PURE__ */ jsx66(StyledDivider2, {}),
+          /* @__PURE__ */ jsxs34(ToggleMenuItem, { disableRipple: true, children: [
+            onEnableChange && /* @__PURE__ */ jsx66(
               EnableSwitch,
               {
                 size: "small",
@@ -6738,7 +7155,7 @@ var DeploymentEntityContextMenu = ({
                 inputProps: { "aria-label": "Enable" }
               }
             ),
-            /* @__PURE__ */ jsx63(ListItemText8, { primary: "Enable" })
+            /* @__PURE__ */ jsx66(ListItemText8, { primary: "Enable" })
           ] })
         ] })
       ]
@@ -6753,48 +7170,48 @@ import ContentCopyIcon3 from "@mui/icons-material/ContentCopy";
 import SmartToyOutlinedIcon2 from "@mui/icons-material/SmartToyOutlined";
 import DescriptionIcon from "@mui/icons-material/Description";
 import SettingsIcon2 from "@mui/icons-material/Settings";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var contextMenuItems = {
   /** Add Engagement action (Add Circle icon) */
   addEngagement: (onClick) => ({
     id: "add-engagement",
     label: "Add Engagement",
-    icon: /* @__PURE__ */ jsx64(AddCircleOutlineIcon, {}),
+    icon: /* @__PURE__ */ jsx67(AddCircleOutlineIcon, {}),
     onClick
   }),
   /** Add Agent action (Add Circle icon) */
   addAgent: (onClick) => ({
     id: "add-agent",
     label: "Add Agent",
-    icon: /* @__PURE__ */ jsx64(AddCircleOutlineIcon, {}),
+    icon: /* @__PURE__ */ jsx67(AddCircleOutlineIcon, {}),
     onClick
   }),
   /** Add Stream action (Add Circle icon) */
   addStream: (onClick) => ({
     id: "add-stream",
     label: "Add Stream",
-    icon: /* @__PURE__ */ jsx64(AddCircleOutlineIcon, {}),
+    icon: /* @__PURE__ */ jsx67(AddCircleOutlineIcon, {}),
     onClick
   }),
   /** Edit action (Pen / Edit icon) */
   edit: (onClick) => ({
     id: "edit",
     label: "Edit",
-    icon: /* @__PURE__ */ jsx64(EditIcon, {}),
+    icon: /* @__PURE__ */ jsx67(EditIcon, {}),
     onClick
   }),
   /** Copy ID action (Copy icon) */
   copyId: (onClick) => ({
     id: "copy-id",
     label: "Copy ID",
-    icon: /* @__PURE__ */ jsx64(ContentCopyIcon3, {}),
+    icon: /* @__PURE__ */ jsx67(ContentCopyIcon3, {}),
     onClick
   }),
   /** Agent Flow Visualization — highlighted action (SmartToy icon) */
   agentFlowVisualization: (onClick) => ({
     id: "agent-flow",
     label: "Agent Flow Visualization",
-    icon: /* @__PURE__ */ jsx64(SmartToyOutlinedIcon2, {}),
+    icon: /* @__PURE__ */ jsx67(SmartToyOutlinedIcon2, {}),
     onClick,
     highlighted: true
   }),
@@ -6802,7 +7219,7 @@ var contextMenuItems = {
   viewLogs: (onClick) => ({
     id: "view-logs",
     label: "View Logs",
-    icon: /* @__PURE__ */ jsx64(DescriptionIcon, {}),
+    icon: /* @__PURE__ */ jsx67(DescriptionIcon, {}),
     onClick
   }),
   /** Horizontal divider between sections */
@@ -6821,15 +7238,15 @@ var contextMenuItems = {
   settings: (onClick) => ({
     id: "settings",
     label: "Settings",
-    icon: /* @__PURE__ */ jsx64(SettingsIcon2, {}),
+    icon: /* @__PURE__ */ jsx67(SettingsIcon2, {}),
     onClick
   })
 };
 
 // src/components/layout/DeploymentDashboardTree/DeploymentDashboardTree.tsx
-import { Box as Box22 } from "@mui/material";
+import { Box as Box26 } from "@mui/material";
 import { styled as styled41, alpha } from "@mui/material/styles";
-import { jsx as jsx65, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs35 } from "react/jsx-runtime";
 var TREE_SP = {
   /** Vertical gap between sibling rows (Figma S / sp-8) */
   rowGap: 8,
@@ -6847,7 +7264,7 @@ var RAIL_OPACITY = {
   engagement: 0.4,
   agent: 0.4
 };
-var Rail = styled41(Box22, {
+var Rail = styled41(Box26, {
   shouldForwardProp: (p) => p !== "railColor"
 })(({ railColor }) => ({
   width: TREE_SP.railWidth,
@@ -6866,10 +7283,10 @@ 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__ */ jsxs31(Box22, { sx: { display: "flex", gap: `${TREE_SP.railGap}px` }, children: [
-    /* @__PURE__ */ jsx65(Rail, { railColor, "aria-hidden": true, "data-rail": true }),
-    /* @__PURE__ */ jsx65(
-      Box22,
+  const renderedChildren = hasChildren && expanded ? /* @__PURE__ */ jsxs35(Box26, { sx: { display: "flex", gap: `${TREE_SP.railGap}px` }, children: [
+    /* @__PURE__ */ jsx68(Rail, { railColor, "aria-hidden": true, "data-rail": true }),
+    /* @__PURE__ */ jsx68(
+      Box26,
       {
         role: "group",
         sx: {
@@ -6879,7 +7296,7 @@ var TreeRow = ({ node, depth, onExpandToggle, onCopyId, renderCard }) => {
           flexDirection: "column",
           gap: `${TREE_SP.rowGap}px`
         },
-        children: node.children.map((child) => /* @__PURE__ */ jsx65(
+        children: node.children.map((child) => /* @__PURE__ */ jsx68(
           TreeRow,
           {
             node: child,
@@ -6893,7 +7310,7 @@ var TreeRow = ({ node, depth, onExpandToggle, onCopyId, renderCard }) => {
       }
     )
   ] }) : null;
-  const cardContent = renderCard?.(node) ?? /* @__PURE__ */ jsx65(
+  const cardContent = renderCard?.(node) ?? /* @__PURE__ */ jsx68(
     DeploymentDashboardCard,
     {
       entityType: node.entityType,
@@ -6911,7 +7328,7 @@ var TreeRow = ({ node, depth, onExpandToggle, onCopyId, renderCard }) => {
       children: renderedChildren
     }
   );
-  return /* @__PURE__ */ jsx65(Box22, { role: "treeitem", children: cardContent });
+  return /* @__PURE__ */ jsx68(Box26, { role: "treeitem", children: cardContent });
 };
 var DeploymentDashboardTree = ({
   nodes,
@@ -6919,8 +7336,8 @@ var DeploymentDashboardTree = ({
   onCopyId,
   renderCard
 }) => {
-  return /* @__PURE__ */ jsx65(
-    Box22,
+  return /* @__PURE__ */ jsx68(
+    Box26,
     {
       role: "tree",
       sx: {
@@ -6929,7 +7346,7 @@ var DeploymentDashboardTree = ({
         gap: `${TREE_SP.rowGap}px`,
         p: `${TREE_SP.rowGap}px`
       },
-      children: nodes.map((node) => /* @__PURE__ */ jsx65(
+      children: nodes.map((node) => /* @__PURE__ */ jsx68(
         TreeRow,
         {
           node,
@@ -6945,12 +7362,12 @@ var DeploymentDashboardTree = ({
 };
 
 // src/components/layout/DeploymentDashboardPanel/DeploymentDashboardPanel.tsx
-import { Box as Box23 } from "@mui/material";
+import { Box as Box27 } from "@mui/material";
 import { styled as styled42 } from "@mui/material/styles";
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var PANEL_RADIUS = 12;
 var PANEL_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.08)";
-var StyledPanel = styled42(Box23)({
+var StyledPanel = styled42(Box27)({
   backgroundColor: deploymentSurfaceTokens.surfaceHigh,
   border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
   borderRadius: PANEL_RADIUS,
@@ -6962,11 +7379,11 @@ var DeploymentDashboardPanel = ({
   className,
   padding = 2
 }) => {
-  return /* @__PURE__ */ jsx66(StyledPanel, { className, sx: { p: padding }, children });
+  return /* @__PURE__ */ jsx69(StyledPanel, { className, sx: { p: padding }, children });
 };
 
 // src/components/layout/WorkflowNode/WorkflowNode.tsx
-import { Paper as Paper3, Box as Box24, Typography as Typography20 } from "@mui/material";
+import { Paper as Paper3, Box as Box28, Typography as Typography23 } from "@mui/material";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
 import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
 import WavesIcon2 from "@mui/icons-material/Waves";
@@ -6983,7 +7400,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 jsx67, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs36 } from "react/jsx-runtime";
 var WORKFLOW_NODE_LABELS = {
   start: "Start",
   input: "Input",
@@ -7004,21 +7421,21 @@ var WORKFLOW_NODE_LABELS = {
 var NODE_ICON_SIZE = 18;
 var WORKFLOW_NODE_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1)";
 var WORKFLOW_NODE_ICONS = {
-  start: /* @__PURE__ */ jsx67(PlayCircleOutlineIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  input: /* @__PURE__ */ jsx67(CloudDownloadIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  stream: /* @__PURE__ */ jsx67(WavesIcon2, { sx: { fontSize: NODE_ICON_SIZE } }),
-  rafts: /* @__PURE__ */ jsx67(LinkIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  cubbies: /* @__PURE__ */ jsx67(CloudIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  events: /* @__PURE__ */ jsx67(BoltIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  trigger: /* @__PURE__ */ jsx67(FlashOnIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  action: /* @__PURE__ */ jsx67(PlayArrowIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  aiModel: /* @__PURE__ */ jsx67(PsychologyIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  aiAgent: /* @__PURE__ */ jsx67(SmartToyOutlinedIcon3, { sx: { fontSize: NODE_ICON_SIZE } }),
-  condition: /* @__PURE__ */ jsx67(CallSplitIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  output: /* @__PURE__ */ jsx67(SendIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  end: /* @__PURE__ */ jsx67(CheckCircleOutlineIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  parallel: /* @__PURE__ */ jsx67(ForkRightIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  merge: /* @__PURE__ */ jsx67(CallMergeIcon, { sx: { fontSize: NODE_ICON_SIZE } })
+  start: /* @__PURE__ */ jsx70(PlayCircleOutlineIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
+  input: /* @__PURE__ */ jsx70(CloudDownloadIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
+  stream: /* @__PURE__ */ jsx70(WavesIcon2, { sx: { fontSize: NODE_ICON_SIZE } }),
+  rafts: /* @__PURE__ */ jsx70(LinkIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
+  cubbies: /* @__PURE__ */ jsx70(CloudIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
+  events: /* @__PURE__ */ jsx70(BoltIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
+  trigger: /* @__PURE__ */ jsx70(FlashOnIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
+  action: /* @__PURE__ */ jsx70(PlayArrowIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
+  aiModel: /* @__PURE__ */ jsx70(PsychologyIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
+  aiAgent: /* @__PURE__ */ jsx70(SmartToyOutlinedIcon3, { sx: { fontSize: NODE_ICON_SIZE } }),
+  condition: /* @__PURE__ */ jsx70(CallSplitIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
+  output: /* @__PURE__ */ jsx70(SendIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
+  end: /* @__PURE__ */ jsx70(CheckCircleOutlineIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
+  parallel: /* @__PURE__ */ jsx70(ForkRightIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
+  merge: /* @__PURE__ */ jsx70(CallMergeIcon, { sx: { fontSize: NODE_ICON_SIZE } })
 };
 var BADGE_TYPOGRAPHY = {
   fontSize: "12px",
@@ -7028,8 +7445,8 @@ var BADGE_TYPOGRAPHY = {
 var SideConnectorDot = ({
   accentColor,
   side
-}) => /* @__PURE__ */ jsx67(
-  Box24,
+}) => /* @__PURE__ */ jsx70(
+  Box28,
   {
     "data-testid": `workflow-node-dot-${side}`,
     sx: (theme2) => ({
@@ -7048,8 +7465,8 @@ var SideConnectorDot = ({
     })
   }
 );
-var NodeTypeBadge = ({ nodeType, badgeBackground, badgeBorder, badgeText, icon, label }) => /* @__PURE__ */ jsxs32(
-  Box24,
+var NodeTypeBadge = ({ nodeType, badgeBackground, badgeBorder, badgeText, icon, label }) => /* @__PURE__ */ jsxs36(
+  Box28,
   {
     sx: {
       display: "inline-flex",
@@ -7064,9 +7481,9 @@ var NodeTypeBadge = ({ nodeType, badgeBackground, badgeBorder, badgeText, icon,
       flexShrink: 0
     },
     children: [
-      /* @__PURE__ */ jsx67(Box24, { sx: { color: badgeText, display: "flex", alignItems: "center" }, children: icon ?? WORKFLOW_NODE_ICONS[nodeType] }),
-      /* @__PURE__ */ jsx67(
-        Typography20,
+      /* @__PURE__ */ jsx70(Box28, { sx: { color: badgeText, display: "flex", alignItems: "center" }, children: icon ?? WORKFLOW_NODE_ICONS[nodeType] }),
+      /* @__PURE__ */ jsx70(
+        Typography23,
         {
           variant: "body2",
           component: "span",
@@ -7098,7 +7515,7 @@ var WorkflowNode = ({
   const nodeTokens = theme2.palette.workflow.node[nodeType];
   const chrome = theme2.palette.workflow.chrome;
   const accentColor = nodeTokens.accent;
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs36(
     Paper3,
     {
       elevation: 0,
@@ -7122,10 +7539,10 @@ var WorkflowNode = ({
       ],
       ...paperProps,
       children: [
-        showSideDots && /* @__PURE__ */ jsx67(SideConnectorDot, { accentColor, side: "left" }),
-        showSideDots && /* @__PURE__ */ jsx67(SideConnectorDot, { accentColor, side: "right" }),
-        /* @__PURE__ */ jsxs32(
-          Box24,
+        showSideDots && /* @__PURE__ */ jsx70(SideConnectorDot, { accentColor, side: "left" }),
+        showSideDots && /* @__PURE__ */ jsx70(SideConnectorDot, { accentColor, side: "right" }),
+        /* @__PURE__ */ jsxs36(
+          Box28,
           {
             sx: {
               flex: 1,
@@ -7138,9 +7555,9 @@ var WorkflowNode = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ jsxs32(Box24, { sx: { minWidth: 0, flex: 1 }, children: [
-                /* @__PURE__ */ jsx67(
-                  Typography20,
+              /* @__PURE__ */ jsxs36(Box28, { sx: { minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ jsx70(
+                  Typography23,
                   {
                     variant: "subtitle2",
                     noWrap: true,
@@ -7154,8 +7571,8 @@ var WorkflowNode = ({
                     children: title
                   }
                 ),
-                description && /* @__PURE__ */ jsx67(
-                  Typography20,
+                description && /* @__PURE__ */ jsx70(
+                  Typography23,
                   {
                     variant: "body2",
                     sx: {
@@ -7173,7 +7590,7 @@ var WorkflowNode = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx67(
+              /* @__PURE__ */ jsx70(
                 NodeTypeBadge,
                 {
                   nodeType,
@@ -7194,17 +7611,17 @@ var WorkflowNode = ({
 
 // src/components/layout/WorkflowTopBar/WorkflowTopBar.tsx
 import {
-  Box as Box25,
+  Box as Box29,
   Divider as Divider7,
-  IconButton as IconButton12,
+  IconButton as IconButton14,
   InputBase,
-  Typography as Typography21,
+  Typography as Typography24,
   alpha as alpha2
 } from "@mui/material";
-import CloseIcon3 from "@mui/icons-material/Close";
+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 jsx68, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs37 } from "react/jsx-runtime";
 var WorkflowTopBar = ({
   title = "Agent visualization flow chart",
   executionId,
@@ -7222,8 +7639,8 @@ var WorkflowTopBar = ({
   ...boxProps
 }) => {
   const chrome = useTheme6().palette.workflow.chrome;
-  return /* @__PURE__ */ jsxs33(
-    Box25,
+  return /* @__PURE__ */ jsxs37(
+    Box29,
     {
       sx: [
         {
@@ -7236,8 +7653,8 @@ var WorkflowTopBar = ({
       ],
       ...boxProps,
       children: [
-        /* @__PURE__ */ jsxs33(
-          Box25,
+        /* @__PURE__ */ jsxs37(
+          Box29,
           {
             sx: {
               display: "flex",
@@ -7249,8 +7666,8 @@ var WorkflowTopBar = ({
               minHeight: 72
             },
             children: [
-              /* @__PURE__ */ jsx68(
-                Typography21,
+              /* @__PURE__ */ jsx71(
+                Typography24,
                 {
                   variant: "subtitle1",
                   sx: {
@@ -7261,8 +7678,8 @@ var WorkflowTopBar = ({
                   children: title
                 }
               ),
-              /* @__PURE__ */ jsxs33(
-                Box25,
+              /* @__PURE__ */ jsxs37(
+                Box29,
                 {
                   sx: {
                     display: "flex",
@@ -7273,8 +7690,8 @@ var WorkflowTopBar = ({
                     minWidth: 0
                   },
                   children: [
-                    /* @__PURE__ */ jsxs33(
-                      Box25,
+                    /* @__PURE__ */ jsxs37(
+                      Box29,
                       {
                         sx: {
                           display: "flex",
@@ -7289,9 +7706,9 @@ var WorkflowTopBar = ({
                           minHeight: 56
                         },
                         children: [
-                          /* @__PURE__ */ jsxs33(Box25, { sx: { flex: 1, minWidth: 0 }, children: [
-                            /* @__PURE__ */ jsx68(
-                              Typography21,
+                          /* @__PURE__ */ jsxs37(Box29, { sx: { flex: 1, minWidth: 0 }, children: [
+                            /* @__PURE__ */ jsx71(
+                              Typography24,
                               {
                                 variant: "caption",
                                 sx: {
@@ -7302,7 +7719,7 @@ var WorkflowTopBar = ({
                                 children: executionIdLabel
                               }
                             ),
-                            /* @__PURE__ */ jsx68(
+                            /* @__PURE__ */ jsx71(
                               InputBase,
                               {
                                 value: executionId,
@@ -7321,20 +7738,20 @@ var WorkflowTopBar = ({
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ jsx68(
-                            IconButton12,
+                          /* @__PURE__ */ jsx71(
+                            IconButton14,
                             {
                               size: "small",
                               "aria-label": `Clear ${executionIdLabel.toLowerCase()}`,
                               onClick: onClearExecutionId,
                               sx: { color: chrome.iconColor, ml: 1 },
-                              children: /* @__PURE__ */ jsx68(CancelIcon, { fontSize: "small" })
+                              children: /* @__PURE__ */ jsx71(CancelIcon, { fontSize: "small" })
                             }
                           )
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx68(
+                    /* @__PURE__ */ jsx71(
                       Button,
                       {
                         variant: "primary",
@@ -7351,9 +7768,9 @@ var WorkflowTopBar = ({
                         children: submitLabel
                       }
                     ),
-                    showInspectorToggle && /* @__PURE__ */ jsx68(Button, { variant: "secondary", onClick: onInspectorToggle, children: inspectorLabel }),
-                    showCloseButton && /* @__PURE__ */ jsx68(
-                      IconButton12,
+                    showInspectorToggle && /* @__PURE__ */ jsx71(Button, { variant: "secondary", onClick: onInspectorToggle, children: inspectorLabel }),
+                    showCloseButton && /* @__PURE__ */ jsx71(
+                      IconButton14,
                       {
                         "aria-label": "Close workflow chrome",
                         onClick: onClose,
@@ -7363,7 +7780,7 @@ var WorkflowTopBar = ({
                           backgroundColor: alpha2(chrome.closeBtnBg, 0.28),
                           color: chrome.iconColor
                         },
-                        children: /* @__PURE__ */ jsx68(CloseIcon3, { fontSize: "small" })
+                        children: /* @__PURE__ */ jsx71(CloseIcon4, { fontSize: "small" })
                       }
                     )
                   ]
@@ -7372,7 +7789,7 @@ var WorkflowTopBar = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx68(Divider7, { sx: { borderColor: deploymentSurfaceTokens.strokeOutside } })
+        /* @__PURE__ */ jsx71(Divider7, { sx: { borderColor: deploymentSurfaceTokens.strokeOutside } })
       ]
     }
   );
@@ -7380,22 +7797,22 @@ var WorkflowTopBar = ({
 
 // src/components/layout/WorkflowSideInspector/WorkflowSideInspector.tsx
 import {
-  Box as Box26,
+  Box as Box30,
   Divider as Divider8,
-  IconButton as IconButton13,
+  IconButton as IconButton15,
   Paper as Paper4,
-  Typography as Typography22,
+  Typography as Typography25,
   alpha as alpha3,
   useTheme as useTheme7
 } from "@mui/material";
-import CloseIcon4 from "@mui/icons-material/Close";
+import CloseIcon5 from "@mui/icons-material/Close";
 import ContentCopyOutlinedIcon from "@mui/icons-material/ContentCopyOutlined";
-import { Fragment as Fragment12, jsx as jsx69, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx72, jsxs as jsxs38 } from "react/jsx-runtime";
 var INSPECTOR_WIDTH = 320;
-var InfoBlock = ({ label, value, mutedColor }) => /* @__PURE__ */ jsxs34(Box26, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
-  /* @__PURE__ */ jsx69(Typography22, { variant: "body2", sx: { color: mutedColor }, children: label }),
-  /* @__PURE__ */ jsx69(
-    Typography22,
+var InfoBlock = ({ label, value, mutedColor }) => /* @__PURE__ */ jsxs38(Box30, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+  /* @__PURE__ */ jsx72(Typography25, { variant: "body2", sx: { color: mutedColor }, children: label }),
+  /* @__PURE__ */ jsx72(
+    Typography25,
     {
       variant: "body2",
       sx: { color: deploymentSurfaceTokens.textPrimary, whiteSpace: "pre-wrap" },
@@ -7431,7 +7848,7 @@ var WorkflowSideInspector = ({
     return null;
   }
   const accent = theme2.palette.workflow.node[nodeType].accent;
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs38(
     Paper4,
     {
       elevation: 0,
@@ -7450,11 +7867,11 @@ var WorkflowSideInspector = ({
       },
       ...paperProps,
       children: [
-        /* @__PURE__ */ jsxs34(Box26, { sx: { display: "flex", flexDirection: "column", gap: 1.25 }, children: [
-          /* @__PURE__ */ jsxs34(Box26, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ jsx69(Typography22, { variant: "subtitle1", sx: { color: deploymentSurfaceTokens.textPrimary }, children: title }),
-            /* @__PURE__ */ jsx69(
-              IconButton13,
+        /* @__PURE__ */ jsxs38(Box30, { sx: { display: "flex", flexDirection: "column", gap: 1.25 }, children: [
+          /* @__PURE__ */ jsxs38(Box30, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx72(Typography25, { variant: "subtitle1", sx: { color: deploymentSurfaceTokens.textPrimary }, children: title }),
+            /* @__PURE__ */ jsx72(
+              IconButton15,
               {
                 "aria-label": "Close inspector",
                 onClick: onClose,
@@ -7462,25 +7879,25 @@ var WorkflowSideInspector = ({
                   border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
                   borderRadius: 2
                 },
-                children: /* @__PURE__ */ jsx69(CloseIcon4, { fontSize: "small" })
+                children: /* @__PURE__ */ jsx72(CloseIcon5, { fontSize: "small" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx69(Divider8, { sx: { borderColor: chrome.divider } })
+          /* @__PURE__ */ jsx72(Divider8, { sx: { borderColor: chrome.divider } })
         ] }),
-        /* @__PURE__ */ jsxs34(Box26, { sx: { display: "flex", flexDirection: "column", gap: 3, flex: 1 }, children: [
-          /* @__PURE__ */ jsxs34(Box26, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
-            /* @__PURE__ */ jsx69(
-              Typography22,
+        /* @__PURE__ */ jsxs38(Box30, { sx: { display: "flex", flexDirection: "column", gap: 3, flex: 1 }, children: [
+          /* @__PURE__ */ jsxs38(Box30, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+            /* @__PURE__ */ jsx72(
+              Typography25,
               {
                 variant: "subtitle1",
                 sx: { color: deploymentSurfaceTokens.textPrimary, fontWeight: 500 },
                 children: nodeTitle
               }
             ),
-            /* @__PURE__ */ jsx69(Typography22, { variant: "body2", sx: { color: chrome.mutedText }, children: nodeDescription }),
-            /* @__PURE__ */ jsxs34(
-              Box26,
+            /* @__PURE__ */ jsx72(Typography25, { variant: "body2", sx: { color: chrome.mutedText }, children: nodeDescription }),
+            /* @__PURE__ */ jsxs38(
+              Box30,
               {
                 sx: {
                   display: "inline-flex",
@@ -7494,8 +7911,8 @@ var WorkflowSideInspector = ({
                   backgroundColor: alpha3(accent, 0.12)
                 },
                 children: [
-                  /* @__PURE__ */ jsx69(
-                    Box26,
+                  /* @__PURE__ */ jsx72(
+                    Box30,
                     {
                       sx: {
                         width: 10,
@@ -7505,43 +7922,43 @@ var WorkflowSideInspector = ({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx69(Typography22, { variant: "caption", sx: { color: accent, fontWeight: 500 }, children: WORKFLOW_NODE_LABELS[nodeType] })
+                  /* @__PURE__ */ jsx72(Typography25, { variant: "caption", sx: { color: accent, fontWeight: 500 }, children: WORKFLOW_NODE_LABELS[nodeType] })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ jsx69(Divider8, { sx: { borderColor: chrome.divider } }),
-          (showInput || showOutput) && /* @__PURE__ */ jsxs34(Fragment12, { children: [
-            /* @__PURE__ */ jsxs34(Box26, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-              showInput && /* @__PURE__ */ jsx69(InfoBlock, { label: "Input", value: inputValue, mutedColor: chrome.mutedText }),
-              showOutput && /* @__PURE__ */ jsx69(InfoBlock, { label: "Output", value: outputValue, mutedColor: chrome.mutedText })
+          /* @__PURE__ */ jsx72(Divider8, { sx: { borderColor: chrome.divider } }),
+          (showInput || showOutput) && /* @__PURE__ */ jsxs38(Fragment13, { children: [
+            /* @__PURE__ */ jsxs38(Box30, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              showInput && /* @__PURE__ */ jsx72(InfoBlock, { label: "Input", value: inputValue, mutedColor: chrome.mutedText }),
+              showOutput && /* @__PURE__ */ jsx72(InfoBlock, { label: "Output", value: outputValue, mutedColor: chrome.mutedText })
             ] }),
-            /* @__PURE__ */ jsx69(Divider8, { sx: { borderColor: chrome.divider } })
+            /* @__PURE__ */ jsx72(Divider8, { sx: { borderColor: chrome.divider } })
           ] }),
-          /* @__PURE__ */ jsxs34(Box26, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
-            /* @__PURE__ */ jsx69(Typography22, { variant: "body2", sx: { color: chrome.mutedText }, children: "Cubby ID" }),
-            /* @__PURE__ */ jsx69(
+          /* @__PURE__ */ jsxs38(Box30, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+            /* @__PURE__ */ jsx72(Typography25, { variant: "body2", sx: { color: chrome.mutedText }, children: "Cubby ID" }),
+            /* @__PURE__ */ jsx72(
               Button,
               {
                 variant: "secondary",
                 size: "small",
-                startIcon: /* @__PURE__ */ jsx69(ContentCopyOutlinedIcon, { fontSize: "small" }),
+                startIcon: /* @__PURE__ */ jsx72(ContentCopyOutlinedIcon, { fontSize: "small" }),
                 onClick: onCopyCubbyId,
                 sx: { alignSelf: "flex-start" },
                 children: cubbyId
               }
             )
           ] }),
-          /* @__PURE__ */ jsx69(Divider8, { sx: { borderColor: chrome.divider } }),
-          (showTimestamp || showDuration) && /* @__PURE__ */ jsxs34(Fragment12, { children: [
-            /* @__PURE__ */ jsxs34(Box26, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-              showTimestamp && /* @__PURE__ */ jsx69(InfoBlock, { label: "Timestamp", value: timestamp, mutedColor: chrome.mutedText }),
-              showDuration && /* @__PURE__ */ jsx69(InfoBlock, { label: "Duration", value: duration, mutedColor: chrome.mutedText })
+          /* @__PURE__ */ jsx72(Divider8, { sx: { borderColor: chrome.divider } }),
+          (showTimestamp || showDuration) && /* @__PURE__ */ jsxs38(Fragment13, { children: [
+            /* @__PURE__ */ jsxs38(Box30, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              showTimestamp && /* @__PURE__ */ jsx72(InfoBlock, { label: "Timestamp", value: timestamp, mutedColor: chrome.mutedText }),
+              showDuration && /* @__PURE__ */ jsx72(InfoBlock, { label: "Duration", value: duration, mutedColor: chrome.mutedText })
             ] }),
-            /* @__PURE__ */ jsx69(Divider8, { sx: { borderColor: chrome.divider } })
+            /* @__PURE__ */ jsx72(Divider8, { sx: { borderColor: chrome.divider } })
           ] })
         ] }),
-        actionLabel && /* @__PURE__ */ jsx69(Button, { variant: "primary", fullWidth: true, onClick: onAction, children: actionLabel })
+        actionLabel && /* @__PURE__ */ jsx72(Button, { variant: "primary", fullWidth: true, onClick: onAction, children: actionLabel })
       ]
     }
   );
@@ -7549,19 +7966,19 @@ var WorkflowSideInspector = ({
 
 // src/components/layout/WorkflowTimeBar/WorkflowTimeBar.tsx
 import {
-  Box as Box27,
+  Box as Box31,
   Divider as Divider9,
-  IconButton as IconButton14,
+  IconButton as IconButton16,
   LinearProgress as LinearProgress3,
-  Typography as Typography23
+  Typography as Typography26
 } from "@mui/material";
 import StopIcon from "@mui/icons-material/Stop";
-import ChevronLeftIcon3 from "@mui/icons-material/ChevronLeft";
-import ChevronRightIcon4 from "@mui/icons-material/ChevronRight";
+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 jsx70, jsxs as jsxs35 } from "react/jsx-runtime";
-var SpeedButton = ({ value, selected, onClick }) => /* @__PURE__ */ jsx70(
+import { jsx as jsx73, jsxs as jsxs39 } from "react/jsx-runtime";
+var SpeedButton = ({ value, selected, onClick }) => /* @__PURE__ */ jsx73(
   Button,
   {
     variant: selected ? "primary" : "secondary",
@@ -7597,8 +8014,8 @@ var WorkflowTimeBar = ({
   const boundedProgress = Math.max(0, Math.min(100, progress));
   const atFirstStep = currentStep <= 1;
   const atLastStep = currentStep >= totalSteps;
-  return /* @__PURE__ */ jsxs35(
-    Box27,
+  return /* @__PURE__ */ jsxs39(
+    Box31,
     {
       sx: [
         {
@@ -7614,10 +8031,10 @@ var WorkflowTimeBar = ({
       ],
       ...boxProps,
       children: [
-        /* @__PURE__ */ jsx70(Divider9, { sx: { borderColor: deploymentSurfaceTokens.strokeOutside } }),
-        /* @__PURE__ */ jsxs35(Box27, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
-          /* @__PURE__ */ jsx70(
-            IconButton14,
+        /* @__PURE__ */ jsx73(Divider9, { sx: { borderColor: deploymentSurfaceTokens.strokeOutside } }),
+        /* @__PURE__ */ jsxs39(Box31, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+          /* @__PURE__ */ jsx73(
+            IconButton16,
             {
               onClick: onStop,
               "aria-label": "Stop playback",
@@ -7629,19 +8046,19 @@ var WorkflowTimeBar = ({
                 color: deploymentSurfaceTokens.textPrimary,
                 backgroundColor: deploymentSurfaceTokens.surfaceHigh
               },
-              children: /* @__PURE__ */ jsx70(StopIcon, { sx: { fontSize: 16 } })
+              children: /* @__PURE__ */ jsx73(StopIcon, { sx: { fontSize: 16 } })
             }
           ),
-          /* @__PURE__ */ jsxs35(Box27, { sx: { flex: 1, minWidth: 220, px: 1 }, children: [
-            /* @__PURE__ */ jsx70(
-              Typography23,
+          /* @__PURE__ */ jsxs39(Box31, { sx: { flex: 1, minWidth: 220, px: 1 }, children: [
+            /* @__PURE__ */ jsx73(
+              Typography26,
               {
                 variant: "body2",
                 sx: { color: deploymentSurfaceTokens.textPrimary, mb: 0.5 },
                 children: elapsedTime
               }
             ),
-            /* @__PURE__ */ jsx70(
+            /* @__PURE__ */ jsx73(
               LinearProgress3,
               {
                 variant: "determinate",
@@ -7657,36 +8074,36 @@ var WorkflowTimeBar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs35(Box27, { sx: { display: "flex", alignItems: "center", gap: 3 }, children: [
-            /* @__PURE__ */ jsxs35(Box27, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-              /* @__PURE__ */ jsx70(Typography23, { variant: "subtitle1", sx: { fontWeight: 500 }, children: "Steps" }),
-              /* @__PURE__ */ jsx70(
-                IconButton14,
+          /* @__PURE__ */ jsxs39(Box31, { sx: { display: "flex", alignItems: "center", gap: 3 }, children: [
+            /* @__PURE__ */ jsxs39(Box31, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx73(Typography26, { variant: "subtitle1", sx: { fontWeight: 500 }, children: "Steps" }),
+              /* @__PURE__ */ jsx73(
+                IconButton16,
                 {
                   size: "small",
                   "aria-label": "Previous step",
                   onClick: onPreviousStep,
                   disabled: atFirstStep,
                   sx: { backgroundColor: chrome.stepBtnBg },
-                  children: /* @__PURE__ */ jsx70(ChevronLeftIcon3, { fontSize: "small" })
+                  children: /* @__PURE__ */ jsx73(ChevronLeftIcon4, { fontSize: "small" })
                 }
               ),
-              /* @__PURE__ */ jsx70(Typography23, { variant: "subtitle1", sx: { minWidth: 52, textAlign: "center" }, children: `${currentStep} / ${totalSteps}` }),
-              /* @__PURE__ */ jsx70(
-                IconButton14,
+              /* @__PURE__ */ jsx73(Typography26, { variant: "subtitle1", sx: { minWidth: 52, textAlign: "center" }, children: `${currentStep} / ${totalSteps}` }),
+              /* @__PURE__ */ jsx73(
+                IconButton16,
                 {
                   size: "small",
                   "aria-label": "Next step",
                   onClick: onNextStep,
                   disabled: atLastStep,
                   sx: { backgroundColor: chrome.stepBtnBgHover },
-                  children: /* @__PURE__ */ jsx70(ChevronRightIcon4, { fontSize: "small" })
+                  children: /* @__PURE__ */ jsx73(ChevronRightIcon5, { fontSize: "small" })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs35(Box27, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-              /* @__PURE__ */ jsx70(Typography23, { variant: "subtitle1", sx: { fontWeight: 500 }, children: "Speed" }),
-              speedOptions.map((option) => /* @__PURE__ */ jsx70(
+            /* @__PURE__ */ jsxs39(Box31, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx73(Typography26, { variant: "subtitle1", sx: { fontWeight: 500 }, children: "Speed" }),
+              speedOptions.map((option) => /* @__PURE__ */ jsx73(
                 SpeedButton,
                 {
                   value: option,
@@ -7695,7 +8112,7 @@ var WorkflowTimeBar = ({
                 },
                 option
               )),
-              /* @__PURE__ */ jsx70(IconButton14, { "aria-label": "Reset playback", onClick: onReset, size: "small", children: /* @__PURE__ */ jsx70(ReplayIcon, { fontSize: "small" }) })
+              /* @__PURE__ */ jsx73(IconButton16, { "aria-label": "Reset playback", onClick: onReset, size: "small", children: /* @__PURE__ */ jsx73(ReplayIcon, { fontSize: "small" }) })
             ] })
           ] })
         ] })
@@ -7707,10 +8124,10 @@ var WorkflowTimeBar = ({
 // src/components/icons/ActivityAppIcon.tsx
 import { memo as memo2 } from "react";
 import { SvgIcon as SvgIcon2 } from "@mui/material";
-import { jsx as jsx71, jsxs as jsxs36 } from "react/jsx-runtime";
-var ActivityAppIcon = memo2((props) => /* @__PURE__ */ jsxs36(SvgIcon2, { ...props, viewBox: "0 0 36 36", children: [
-  /* @__PURE__ */ jsx71("rect", { fill: "none", stroke: "currentColor", width: 34, height: 34, x: 1, y: 1, strokeWidth: 1.5, rx: 6.8 }),
-  /* @__PURE__ */ jsx71(
+import { jsx as jsx74, jsxs as jsxs40 } from "react/jsx-runtime";
+var ActivityAppIcon = memo2((props) => /* @__PURE__ */ jsxs40(SvgIcon2, { ...props, viewBox: "0 0 36 36", children: [
+  /* @__PURE__ */ jsx74("rect", { fill: "none", stroke: "currentColor", width: 34, height: 34, x: 1, y: 1, strokeWidth: 1.5, rx: 6.8 }),
+  /* @__PURE__ */ jsx74(
     "rect",
     {
       fill: "none",
@@ -7723,7 +8140,7 @@ var ActivityAppIcon = memo2((props) => /* @__PURE__ */ jsxs36(SvgIcon2, { ...pro
       rx: 1.7
     }
   ),
-  /* @__PURE__ */ jsx71(
+  /* @__PURE__ */ jsx74(
     "rect",
     {
       fill: "none",
@@ -7736,7 +8153,7 @@ var ActivityAppIcon = memo2((props) => /* @__PURE__ */ jsxs36(SvgIcon2, { ...pro
       rx: 1.7
     }
   ),
-  /* @__PURE__ */ jsx71(
+  /* @__PURE__ */ jsx74(
     "rect",
     {
       fill: "none",
@@ -7753,9 +8170,9 @@ var ActivityAppIcon = memo2((props) => /* @__PURE__ */ jsxs36(SvgIcon2, { ...pro
 
 // src/components/icons/ArrowLeft.tsx
 import { SvgIcon as SvgIcon3 } from "@mui/material";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var LeftArrowIcon = (props) => {
-  return /* @__PURE__ */ jsx72(SvgIcon3, { ...props, width: "24", height: "24", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx72("g", { id: " Arrow Left", children: /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx75(SvgIcon3, { ...props, width: "24", height: "24", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx75("g", { id: " Arrow Left", children: /* @__PURE__ */ jsx75(
     "path",
     {
       id: "Vector (Stroke)",
@@ -7769,9 +8186,9 @@ var LeftArrowIcon = (props) => {
 
 // src/components/icons/ArrowRight.tsx
 import { SvgIcon as SvgIcon4 } from "@mui/material";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var RightArrowIcon = (props) => {
-  return /* @__PURE__ */ jsx73(SvgIcon4, { ...props, width: "25", height: "24", viewBox: "0 0 25 24", children: /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx76(SvgIcon4, { ...props, width: "25", height: "24", viewBox: "0 0 25 24", children: /* @__PURE__ */ jsx76(
     "path",
     {
       fillRule: "evenodd",
@@ -7784,10 +8201,10 @@ var RightArrowIcon = (props) => {
 
 // src/components/icons/AvatarIcon.tsx
 import { SvgIcon as SvgIcon5 } from "@mui/material";
-import { jsx as jsx74, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs41 } from "react/jsx-runtime";
 var AvatarIcon = (props) => {
-  return /* @__PURE__ */ jsxs37(SvgIcon5, { ...props, viewBox: "0 0 16 16", children: [
-    /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsxs41(SvgIcon5, { ...props, viewBox: "0 0 16 16", children: [
+    /* @__PURE__ */ jsx77(
       "path",
       {
         fillRule: "evenodd",
@@ -7796,7 +8213,7 @@ var AvatarIcon = (props) => {
         fill: "#1D1B20"
       }
     ),
-    /* @__PURE__ */ jsx74(
+    /* @__PURE__ */ jsx77(
       "path",
       {
         fillRule: "evenodd",
@@ -7811,9 +8228,9 @@ var AvatarIcon = (props) => {
 // src/components/icons/BarTrackingIcon.tsx
 import { memo as memo3 } from "react";
 import { SvgIcon as SvgIcon6 } from "@mui/material";
-import { jsx as jsx75, jsxs as jsxs38 } from "react/jsx-runtime";
-var BarTrackingIcon = memo3((props) => /* @__PURE__ */ jsxs38(SvgIcon6, { ...props, viewBox: "0 0 96 97", children: [
-  /* @__PURE__ */ jsx75(
+import { jsx as jsx78, jsxs as jsxs42 } from "react/jsx-runtime";
+var BarTrackingIcon = memo3((props) => /* @__PURE__ */ jsxs42(SvgIcon6, { ...props, viewBox: "0 0 96 97", children: [
+  /* @__PURE__ */ jsx78(
     "rect",
     {
       x: "7.19922",
@@ -7826,7 +8243,7 @@ var BarTrackingIcon = memo3((props) => /* @__PURE__ */ jsxs38(SvgIcon6, { ...pro
       fill: "none"
     }
   ),
-  /* @__PURE__ */ jsx75(
+  /* @__PURE__ */ jsx78(
     "rect",
     {
       x: "21.0371",
@@ -7839,7 +8256,7 @@ var BarTrackingIcon = memo3((props) => /* @__PURE__ */ jsxs38(SvgIcon6, { ...pro
       strokeWidth: "2"
     }
   ),
-  /* @__PURE__ */ jsx75(
+  /* @__PURE__ */ jsx78(
     "rect",
     {
       x: "40.4746",
@@ -7852,7 +8269,7 @@ var BarTrackingIcon = memo3((props) => /* @__PURE__ */ jsxs38(SvgIcon6, { ...pro
       strokeWidth: "2"
     }
   ),
-  /* @__PURE__ */ jsx75(
+  /* @__PURE__ */ jsx78(
     "rect",
     {
       x: "59.8828",
@@ -7870,8 +8287,8 @@ var BarTrackingIcon = memo3((props) => /* @__PURE__ */ jsxs38(SvgIcon6, { ...pro
 // src/components/icons/ClockIcon.tsx
 import { memo as memo4 } from "react";
 import { SvgIcon as SvgIcon7 } from "@mui/material";
-import { jsx as jsx76 } from "react/jsx-runtime";
-var ClockIcon = memo4((props) => /* @__PURE__ */ jsx76(SvgIcon7, { ...props, viewBox: "0 0 22 22", children: /* @__PURE__ */ jsx76(
+import { jsx as jsx79 } from "react/jsx-runtime";
+var ClockIcon = memo4((props) => /* @__PURE__ */ jsx79(SvgIcon7, { ...props, viewBox: "0 0 22 22", children: /* @__PURE__ */ jsx79(
   "path",
   {
     fill: "currentColor",
@@ -7884,9 +8301,9 @@ var ClockIcon = memo4((props) => /* @__PURE__ */ jsx76(SvgIcon7, { ...props, vie
 // src/components/icons/CloudFlashIcon.tsx
 import { memo as memo5 } from "react";
 import { SvgIcon as SvgIcon8 } from "@mui/material";
-import { jsx as jsx77, jsxs as jsxs39 } from "react/jsx-runtime";
-var CloudFlashIcon = memo5((props) => /* @__PURE__ */ jsxs39(SvgIcon8, { ...props, fill: "none", viewBox: "0 0 96 97", children: [
-  /* @__PURE__ */ jsx77(
+import { jsx as jsx80, jsxs as jsxs43 } from "react/jsx-runtime";
+var CloudFlashIcon = memo5((props) => /* @__PURE__ */ jsxs43(SvgIcon8, { ...props, fill: "none", viewBox: "0 0 96 97", children: [
+  /* @__PURE__ */ jsx80(
     "path",
     {
       d: "M18.8029 43.3396V43.2933H19.8029C20.3752 43.2933 20.9384 43.328 21.4908 43.3937C21.9111 39.4438 22.9817 34.2181 25.6601 29.8138C28.6259 24.937 33.5595 21.0898 41.5689 21.0898C46.9417 21.0898 50.8839 22.9055 53.7292 25.6773C56.5498 28.4249 58.2303 32.0495 59.2307 35.5901C60.1768 38.9386 60.5315 42.2718 60.6446 44.8476C60.891 44.4671 61.1651 44.0792 61.4696 43.691C63.7235 40.8178 67.6089 37.9824 74.0317 37.9824C77.222 37.9824 79.8196 38.6871 81.9219 39.7574L81.9232 39.7581C86.8327 42.2671 89.793 47.4136 89.793 52.8846V54.7368C89.793 65.644 80.9404 74.4889 70.0269 74.4889H18.865C11.867 74.4889 6.19295 68.8202 6.19295 61.8256V57.184C6.19295 49.9845 11.6911 43.8799 18.8029 43.3396Z",
@@ -7895,7 +8312,7 @@ var CloudFlashIcon = memo5((props) => /* @__PURE__ */ jsxs39(SvgIcon8, { ...prop
       strokeWidth: "2"
     }
   ),
-  /* @__PURE__ */ jsx77(
+  /* @__PURE__ */ jsx80(
     "path",
     {
       d: "M79.1804 45.7001C79.1804 45.7001 60.7908 47.259 60.7908 10.0898C60.7908 10.0898 60.9856 45.7768 43.1934 45.7768C43.1934 45.7768 61.1933 48.1151 61.1933 67.6899C61.1933 67.6899 61.1933 45.7001 79.1934 45.7001H79.1804Z",
@@ -7909,9 +8326,9 @@ var CloudFlashIcon = memo5((props) => /* @__PURE__ */ jsxs39(SvgIcon8, { ...prop
 // src/components/icons/DecentralizedServerIcon.tsx
 import { memo as memo6 } from "react";
 import { SvgIcon as SvgIcon9 } from "@mui/material";
-import { jsx as jsx78, jsxs as jsxs40 } from "react/jsx-runtime";
-var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9, { ...props, viewBox: "0 0 96 97", children: [
-  /* @__PURE__ */ jsx78(
+import { jsx as jsx81, jsxs as jsxs44 } from "react/jsx-runtime";
+var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs44(SvgIcon9, { ...props, viewBox: "0 0 96 97", children: [
+  /* @__PURE__ */ jsx81(
     "path",
     {
       d: "M14.5706 15.0858L48.016 8.29688L81.3694 15.0858L88.2242 48.3742L81.3694 81.6556L48.016 88.4445L14.5706 81.6556L7.80078 48.3742L14.5706 15.0858Z",
@@ -7922,7 +8339,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "path",
     {
       d: "M48.0118 11.2609C49.6622 11.2609 51.0001 9.92755 51.0001 8.28279C51.0001 6.63803 49.6622 5.30469 48.0118 5.30469C46.3614 5.30469 45.0234 6.63803 45.0234 8.28279C45.0234 9.92755 46.3614 11.2609 48.0118 11.2609Z",
@@ -7933,7 +8350,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "path",
     {
       d: "M48.0118 91.4132C49.6622 91.4132 51.0001 90.0799 51.0001 88.4351C51.0001 86.7904 49.6622 85.457 48.0118 85.457C46.3614 85.457 45.0234 86.7904 45.0234 88.4351C45.0234 90.0799 46.3614 91.4132 48.0118 91.4132Z",
@@ -7944,7 +8361,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "path",
     {
       d: "M7.79304 51.339C9.44346 51.339 10.7814 50.0057 10.7814 48.3609C10.7814 46.7162 9.44346 45.3828 7.79304 45.3828C6.14262 45.3828 4.80469 46.7162 4.80469 48.3609C4.80469 50.0057 6.14262 51.339 7.79304 51.339Z",
@@ -7955,7 +8372,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "path",
     {
       d: "M88.2247 51.339C89.8751 51.339 91.213 50.0057 91.213 48.3609C91.213 46.7162 89.8751 45.3828 88.2247 45.3828C86.5743 45.3828 85.2363 46.7162 85.2363 48.3609C85.2363 50.0057 86.5743 51.339 88.2247 51.339Z",
@@ -7966,7 +8383,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "path",
     {
       d: "M81.3477 18.0539C82.9982 18.0539 84.3361 16.7205 84.3361 15.0758C84.3361 13.431 82.9982 12.0977 81.3477 12.0977C79.6973 12.0977 78.3594 13.431 78.3594 15.0758C78.3594 16.7205 79.6973 18.0539 81.3477 18.0539Z",
@@ -7977,7 +8394,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "path",
     {
       d: "M14.5508 84.6203C16.2013 84.6203 17.5392 83.2869 17.5392 81.6422C17.5392 79.9974 16.2013 78.6641 14.5508 78.6641C12.9004 78.6641 11.5625 79.9974 11.5625 81.6422C11.5625 83.2869 12.9004 84.6203 14.5508 84.6203Z",
@@ -7988,7 +8405,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "path",
     {
       d: "M81.3477 84.6203C82.9982 84.6203 84.3361 83.2869 84.3361 81.6422C84.3361 79.9974 82.9982 78.6641 81.3477 78.6641C79.6973 78.6641 78.3594 79.9974 78.3594 81.6422C78.3594 83.2869 79.6973 84.6203 81.3477 84.6203Z",
@@ -7999,7 +8416,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "path",
     {
       d: "M14.5508 18.0539C16.2013 18.0539 17.5392 16.7205 17.5392 15.0758C17.5392 13.431 16.2013 12.0977 14.5508 12.0977C12.9004 12.0977 11.5625 13.431 11.5625 15.0758C11.5625 16.7205 12.9004 18.0539 14.5508 18.0539Z",
@@ -8010,7 +8427,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "rect",
     {
       x: "22.623",
@@ -8023,7 +8440,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeWidth: "2"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "rect",
     {
       x: "22.623",
@@ -8036,7 +8453,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeWidth: "2"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "rect",
     {
       x: "22.623",
@@ -8049,7 +8466,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeWidth: "2"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "path",
     {
       d: "M29.612 37.1542C31.2803 37.1542 32.634 35.8026 32.634 34.1337C32.634 32.4649 31.2803 31.1133 29.612 31.1133C27.9437 31.1133 26.5901 32.4649 26.5901 34.1337C26.5901 35.8026 27.9437 37.1542 29.612 37.1542Z",
@@ -8059,7 +8476,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeMiterlimit: "10"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "path",
     {
       d: "M40.3464 37.1542C42.0147 37.1542 43.3684 35.8026 43.3684 34.1337C43.3684 32.4649 42.0147 31.1133 40.3464 31.1133C38.6782 31.1133 37.3245 32.4649 37.3245 34.1337C37.3245 35.8026 38.6782 37.1542 40.3464 37.1542Z",
@@ -8069,7 +8486,7 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
       strokeMiterlimit: "10"
     }
   ),
-  /* @__PURE__ */ jsx78(
+  /* @__PURE__ */ jsx81(
     "path",
     {
       d: "M51.0808 37.1542C52.7491 37.1542 54.1028 35.8026 54.1028 34.1337C54.1028 32.4649 52.7491 31.1133 51.0808 31.1133C49.4125 31.1133 48.0588 32.4649 48.0588 34.1337C48.0588 35.8026 49.4125 37.1542 51.0808 37.1542Z",
@@ -8084,8 +8501,8 @@ var DecentralizedServerIcon = memo6((props) => /* @__PURE__ */ jsxs40(SvgIcon9,
 // src/components/icons/DiscordIcon.tsx
 import { memo as memo7 } from "react";
 import { SvgIcon as SvgIcon10 } from "@mui/material";
-import { jsx as jsx79 } from "react/jsx-runtime";
-var DiscordIcon = memo7((props) => /* @__PURE__ */ jsx79(SvgIcon10, { ...props, viewBox: "0 0 15 12", children: /* @__PURE__ */ jsx79(
+import { jsx as jsx82 } from "react/jsx-runtime";
+var DiscordIcon = memo7((props) => /* @__PURE__ */ jsx82(SvgIcon10, { ...props, viewBox: "0 0 15 12", children: /* @__PURE__ */ jsx82(
   "path",
   {
     fill: "currentColor",
@@ -8096,16 +8513,16 @@ var DiscordIcon = memo7((props) => /* @__PURE__ */ jsx79(SvgIcon10, { ...props,
 // src/components/icons/DownloadIcon.tsx
 import { memo as memo8 } from "react";
 import { SvgIcon as SvgIcon11 } from "@mui/material";
-import { jsx as jsx80, jsxs as jsxs41 } from "react/jsx-runtime";
-var DownloadIcon = memo8((props) => /* @__PURE__ */ jsxs41(SvgIcon11, { ...props, viewBox: "0 0 17 16", fill: "none", children: [
-  /* @__PURE__ */ jsx80(
+import { jsx as jsx83, jsxs as jsxs45 } from "react/jsx-runtime";
+var DownloadIcon = memo8((props) => /* @__PURE__ */ jsxs45(SvgIcon11, { ...props, viewBox: "0 0 17 16", fill: "none", children: [
+  /* @__PURE__ */ jsx83(
     "path",
     {
       d: "M8.86902 11.0041C8.77429 11.1077 8.64038 11.1667 8.5 11.1667C8.35962 11.1667 8.22571 11.1077 8.13099 11.0041L5.46432 8.08738C5.27799 7.88358 5.29215 7.56732 5.49595 7.38099C5.69975 7.19465 6.01602 7.20881 6.20235 7.41262L8 9.3788V2C8 1.72386 8.22386 1.5 8.5 1.5C8.77614 1.5 9 1.72386 9 2V9.3788L10.7977 7.41262C10.984 7.20881 11.3003 7.19465 11.5041 7.38099C11.7079 7.56732 11.722 7.88358 11.5357 8.08738L8.86902 11.0041Z",
       fill: "currentColor"
     }
   ),
-  /* @__PURE__ */ jsx80(
+  /* @__PURE__ */ jsx83(
     "path",
     {
       d: "M3 10C3 9.72386 2.77614 9.5 2.5 9.5C2.22386 9.5 2 9.72386 2 10V10.0366C1.99999 10.9483 1.99998 11.6832 2.07768 12.2612C2.15836 12.8612 2.33096 13.3665 2.73223 13.7678C3.13351 14.169 3.63876 14.3416 4.23883 14.4223C4.81681 14.5 5.55169 14.5 6.46342 14.5H10.5366C11.4483 14.5 12.1832 14.5 12.7612 14.4223C13.3612 14.3416 13.8665 14.169 14.2678 13.7678C14.669 13.3665 14.8416 12.8612 14.9223 12.2612C15 11.6832 15 10.9483 15 10.0366V10C15 9.72386 14.7761 9.5 14.5 9.5C14.2239 9.5 14 9.72386 14 10C14 10.9569 13.9989 11.6244 13.9312 12.1279C13.8655 12.6171 13.7452 12.8762 13.5607 13.0607C13.3762 13.2452 13.1171 13.3655 12.6279 13.4312C12.1244 13.4989 11.4569 13.5 10.5 13.5H6.5C5.54306 13.5 4.87565 13.4989 4.37208 13.4312C3.8829 13.3655 3.62385 13.2452 3.43934 13.0607C3.25483 12.8762 3.13453 12.6171 3.06877 12.1279C3.00106 11.6244 3 10.9569 3 10Z",
@@ -8117,11 +8534,11 @@ var DownloadIcon = memo8((props) => /* @__PURE__ */ jsxs41(SvgIcon11, { ...props
 // src/components/icons/FilledFolderIcon.tsx
 import { memo as memo9 } from "react";
 import { SvgIcon as SvgIcon12 } from "@mui/material";
-import { jsx as jsx81, jsxs as jsxs42 } from "react/jsx-runtime";
-var FilledFolderIcon = memo9((props) => /* @__PURE__ */ jsxs42(SvgIcon12, { sx: { fill: "none" }, ...props, fill: "none", viewBox: "0 0 22 22", children: [
-  /* @__PURE__ */ jsx81("rect", { x: "0.5", y: "0.5", width: "21", height: "21", rx: "4.5", fill: "#FCF8EC" }),
-  /* @__PURE__ */ jsx81("rect", { x: "0.5", y: "0.5", width: "21", height: "21", rx: "4.5", stroke: "#E1B43E" }),
-  /* @__PURE__ */ jsx81(
+import { jsx as jsx84, 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__ */ jsx84("rect", { x: "0.5", y: "0.5", width: "21", height: "21", rx: "4.5", fill: "#FCF8EC" }),
+  /* @__PURE__ */ jsx84("rect", { x: "0.5", y: "0.5", width: "21", height: "21", rx: "4.5", stroke: "#E1B43E" }),
+  /* @__PURE__ */ jsx84(
     "path",
     {
       fillRule: "evenodd",
@@ -8135,11 +8552,11 @@ var FilledFolderIcon = memo9((props) => /* @__PURE__ */ jsxs42(SvgIcon12, { sx:
 // src/components/icons/FolderIcon.tsx
 import { memo as memo10 } from "react";
 import { SvgIcon as SvgIcon13 } from "@mui/material";
-import { jsx as jsx82, jsxs as jsxs43 } from "react/jsx-runtime";
-var FolderIcon = memo10((props) => /* @__PURE__ */ jsxs43(SvgIcon13, { sx: { fill: "none" }, ...props, fill: "none", viewBox: "0 0 22 22", children: [
-  /* @__PURE__ */ jsx82("rect", { x: "0.5", y: "0.5", width: "21", height: "21", rx: "4.5", fill: "#F5F7FA" }),
-  /* @__PURE__ */ jsx82("rect", { x: "0.5", y: "0.5", width: "21", height: "21", rx: "4.5", stroke: "#E6E6E6" }),
-  /* @__PURE__ */ jsx82(
+import { jsx as jsx85, 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__ */ jsx85("rect", { x: "0.5", y: "0.5", width: "21", height: "21", rx: "4.5", fill: "#F5F7FA" }),
+  /* @__PURE__ */ jsx85("rect", { x: "0.5", y: "0.5", width: "21", height: "21", rx: "4.5", stroke: "#E6E6E6" }),
+  /* @__PURE__ */ jsx85(
     "path",
     {
       fillRule: "evenodd",
@@ -8155,16 +8572,16 @@ var FolderIcon = memo10((props) => /* @__PURE__ */ jsxs43(SvgIcon13, { sx: { fil
 // src/components/icons/GithubLogoIcon.tsx
 import { memo as memo11 } from "react";
 import { SvgIcon as SvgIcon14 } from "@mui/material";
-import { jsx as jsx83, jsxs as jsxs44 } from "react/jsx-runtime";
-var GithubLogoIcon = memo11((props) => /* @__PURE__ */ jsxs44(SvgIcon14, { ...props, viewBox: "0 0 17 16", sx: { fill: "none" }, children: [
-  /* @__PURE__ */ jsx83(
+import { jsx as jsx86, 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__ */ jsx86(
     "path",
     {
       d: "M8.79754 0C4.268 0 0.595032 3.67233 0.595032 8.20251C0.595032 11.8267 2.9453 14.9013 6.20443 15.9859C6.61435 16.0618 6.76488 15.808 6.76488 15.5913C6.76488 15.3957 6.75723 14.7495 6.75375 14.0642C4.47174 14.5603 3.99022 13.0964 3.99022 13.0964C3.61711 12.1483 3.07949 11.8962 3.07949 11.8962C2.33531 11.3871 3.13559 11.3975 3.13559 11.3975C3.95928 11.4554 4.393 12.2428 4.393 12.2428C5.12457 13.4968 6.31186 13.1343 6.77993 12.9247C6.85353 12.3945 7.06614 12.0327 7.30069 11.8279C5.47884 11.6204 3.56358 10.9171 3.56358 7.77413C3.56358 6.87865 3.88401 6.14688 4.40876 5.57247C4.32359 5.36584 4.04285 4.5316 4.48821 3.40175C4.48821 3.40175 5.177 3.18129 6.74449 4.24256C7.39873 4.06076 8.10045 3.96967 8.79754 3.96658C9.49463 3.96967 10.1969 4.06076 10.8524 4.24256C12.418 3.18129 13.1059 3.40175 13.1059 3.40175C13.5523 4.5316 13.2714 5.36584 13.1863 5.57247C13.7122 6.14688 14.0304 6.87858 14.0304 7.77413C14.0304 10.9245 12.1116 11.6183 10.2851 11.8213C10.5793 12.0759 10.8414 12.5751 10.8414 13.3403C10.8414 14.4378 10.8319 15.3211 10.8319 15.5913C10.8319 15.8096 10.9795 16.0654 11.3954 15.9848C14.6527 14.899 17 11.8254 17 8.20251C17 3.67233 13.3275 0 8.79754 0Z",
       fill: "white"
     }
   ),
-  /* @__PURE__ */ jsx83(
+  /* @__PURE__ */ jsx86(
     "path",
     {
       d: "M3.66696 11.6845C3.64895 11.7252 3.58474 11.7374 3.5264 11.7095C3.46689 11.6828 3.43344 11.6272 3.45274 11.5863C3.47043 11.5443 3.53463 11.5326 3.59401 11.5608C3.65364 11.5875 3.68761 11.6436 3.66696 11.6845ZM4.07044 12.0445C4.03133 12.0808 3.95484 12.0639 3.90292 12.0066C3.84927 11.9494 3.83924 11.873 3.87893 11.8361C3.91926 11.7999 3.99344 11.8168 4.04722 11.8741C4.10087 11.9319 4.11129 12.0079 4.07038 12.0446M4.34726 12.5051C4.29695 12.54 4.21474 12.5073 4.16398 12.4343C4.11374 12.3615 4.11374 12.274 4.16507 12.2389C4.21602 12.2038 4.29695 12.2354 4.34842 12.3077C4.39859 12.3819 4.39859 12.4694 4.34719 12.5052M4.81533 13.0386C4.77036 13.0881 4.67464 13.0749 4.60452 13.0072C4.53285 12.9411 4.51285 12.8472 4.55794 12.7976C4.60342 12.748 4.69973 12.7619 4.77036 12.829C4.84158 12.895 4.86332 12.9896 4.81539 13.0386M5.4203 13.2187C5.40055 13.2829 5.3083 13.3121 5.2154 13.2849C5.12264 13.2568 5.06191 13.1815 5.08063 13.1166C5.09993 13.0519 5.19257 13.0215 5.28617 13.0507C5.37881 13.0787 5.43966 13.1534 5.42036 13.2187M6.1089 13.2951C6.11121 13.3628 6.03241 13.4189 5.93488 13.4201C5.83678 13.4222 5.75746 13.3675 5.75643 13.3009C5.75643 13.2326 5.83343 13.177 5.93147 13.1754C6.029 13.1735 6.1089 13.2279 6.1089 13.2951ZM6.78527 13.2692C6.79698 13.3352 6.72918 13.403 6.63236 13.421C6.53715 13.4384 6.44901 13.3976 6.43686 13.3322C6.42502 13.2645 6.49411 13.1968 6.58913 13.1792C6.68614 13.1624 6.77292 13.2021 6.78527 13.2692Z",
@@ -8176,8 +8593,8 @@ var GithubLogoIcon = memo11((props) => /* @__PURE__ */ jsxs44(SvgIcon14, { ...pr
 // src/components/icons/ShareIcon.tsx
 import { memo as memo12 } from "react";
 import { SvgIcon as SvgIcon15 } from "@mui/material";
-import { jsx as jsx84 } from "react/jsx-runtime";
-var ShareIcon = memo12((props) => /* @__PURE__ */ jsx84(SvgIcon15, { ...props, viewBox: "0 0 17 16", fill: "none", children: /* @__PURE__ */ jsx84(
+import { jsx as jsx87 } from "react/jsx-runtime";
+var ShareIcon = memo12((props) => /* @__PURE__ */ jsx87(SvgIcon15, { ...props, viewBox: "0 0 17 16", fill: "none", children: /* @__PURE__ */ jsx87(
   "path",
   {
     fillRule: "evenodd",
@@ -8190,9 +8607,9 @@ var ShareIcon = memo12((props) => /* @__PURE__ */ jsx84(SvgIcon15, { ...props, v
 // src/components/icons/StorageAppIcon.tsx
 import { memo as memo13 } from "react";
 import { SvgIcon as SvgIcon16 } from "@mui/material";
-import { jsx as jsx85, jsxs as jsxs45 } from "react/jsx-runtime";
-var StorageAppIcon = memo13((props) => /* @__PURE__ */ jsxs45(SvgIcon16, { ...props, viewBox: "0 0 38 29", fill: "none", children: [
-  /* @__PURE__ */ jsx85(
+import { jsx as jsx88, jsxs as jsxs49 } from "react/jsx-runtime";
+var StorageAppIcon = memo13((props) => /* @__PURE__ */ jsxs49(SvgIcon16, { ...props, viewBox: "0 0 38 29", fill: "none", children: [
+  /* @__PURE__ */ jsx88(
     "path",
     {
       d: "M6.25415 13.3371V13.2515H7.25415C7.31809 13.2515 7.38176 13.2524 7.44516 13.2543C7.66366 11.6446 8.14354 9.64623 9.19625 7.91521C10.5234 5.73296 12.756 4 16.3233 4C18.7076 4 20.4981 4.81149 21.7972 6.07693C23.0714 7.31823 23.8108 8.93436 24.2437 10.4665C24.4895 11.3363 24.6426 12.2007 24.7362 12.9909C25.8141 11.9297 27.4506 11.0385 29.8495 11.0385C31.2681 11.0385 32.4415 11.3528 33.4017 11.8416L33.4031 11.8423C35.655 12.9932 37 15.3454 37 17.8312V18.6029C37 23.4701 33.0499 27.4163 28.1808 27.4163H6.86335C3.62577 27.4163 1 24.7935 1 21.5565V19.6226C1 16.5122 3.24401 13.8341 6.25415 13.3371Z",
@@ -8201,7 +8618,7 @@ var StorageAppIcon = memo13((props) => /* @__PURE__ */ jsxs45(SvgIcon16, { ...pr
       fill: "none"
     }
   ),
-  /* @__PURE__ */ jsx85(
+  /* @__PURE__ */ jsx88(
     "path",
     {
       d: "M31.9946 14.8376C31.9946 14.8376 24.3322 15.4871 24.3322 0C24.3322 0 24.4134 14.8696 17 14.8696C17 14.8696 24.5 15.8438 24.5 24C24.5 24 24.5 14.8376 32 14.8376H31.9946Z",
@@ -8215,8 +8632,8 @@ var StorageAppIcon = memo13((props) => /* @__PURE__ */ jsxs45(SvgIcon16, { ...pr
 // src/components/icons/UploadFileIcon.tsx
 import { memo as memo14 } from "react";
 import { SvgIcon as SvgIcon17 } from "@mui/material";
-import { jsx as jsx86 } from "react/jsx-runtime";
-var UploadFileIcon = memo14((props) => /* @__PURE__ */ jsx86(SvgIcon17, { ...props, viewBox: "0 0 12 12", children: /* @__PURE__ */ jsx86(
+import { jsx as jsx89 } from "react/jsx-runtime";
+var UploadFileIcon = memo14((props) => /* @__PURE__ */ jsx89(SvgIcon17, { ...props, viewBox: "0 0 12 12", children: /* @__PURE__ */ jsx89(
   "path",
   {
     fillRule: "evenodd",
@@ -8231,8 +8648,8 @@ var UploadFileIcon = memo14((props) => /* @__PURE__ */ jsx86(SvgIcon17, { ...pro
 // src/components/icons/UploadFolderIcon.tsx
 import { memo as memo15 } from "react";
 import { SvgIcon as SvgIcon18 } from "@mui/material";
-import { jsx as jsx87 } from "react/jsx-runtime";
-var UploadFolderIcon = memo15((props) => /* @__PURE__ */ jsx87(SvgIcon18, { ...props, viewBox: "0 0 12 12", children: /* @__PURE__ */ jsx87(
+import { jsx as jsx90 } from "react/jsx-runtime";
+var UploadFolderIcon = memo15((props) => /* @__PURE__ */ jsx90(SvgIcon18, { ...props, viewBox: "0 0 12 12", children: /* @__PURE__ */ jsx90(
   "path",
   {
     fillRule: "evenodd",
@@ -8245,14 +8662,14 @@ var UploadFolderIcon = memo15((props) => /* @__PURE__ */ jsx87(SvgIcon18, { ...p
 ) }));
 
 // src/components/utilities/Markdown/Markdown.tsx
-import { Box as Box28, styled as styled43 } from "@mui/material";
+import { Box as Box32, styled as styled43 } from "@mui/material";
 import "highlight.js/styles/github.css";
 import "github-markdown-css/github-markdown-light.css";
 import MD from "react-markdown";
 import highlight from "rehype-highlight";
 import rehypeRaw from "rehype-raw";
-import { jsx as jsx88 } from "react/jsx-runtime";
-var Content = styled43(Box28)(({ theme: theme2 }) => ({
+import { jsx as jsx91 } from "react/jsx-runtime";
+var Content = styled43(Box32)(({ theme: theme2 }) => ({
   backgroundColor: "transparent",
   ...theme2.typography.body1,
   color: theme2.palette.text.primary,
@@ -8269,11 +8686,11 @@ var Content = styled43(Box28)(({ theme: theme2 }) => ({
     backgroundColor: theme2.palette.background.paper
   }
 }));
-var Markdown = ({ content, children }) => /* @__PURE__ */ jsx88(Content, { className: "markdown-body", children: /* @__PURE__ */ jsx88(MD, { rehypePlugins: [highlight, rehypeRaw], children: content || children }) });
+var Markdown = ({ content, children }) => /* @__PURE__ */ jsx91(Content, { className: "markdown-body", children: /* @__PURE__ */ jsx91(MD, { rehypePlugins: [highlight, rehypeRaw], children: content || children }) });
 
 // src/components/utilities/OnboardingProvider/OnboardingProvider.tsx
-import { createContext, useContext, useState as useState10, useCallback as useCallback5, useEffect as useEffect3 } from "react";
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { createContext, useContext, useState as useState12, useCallback as useCallback5, useEffect as useEffect6 } from "react";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var OnboardingContext = createContext(void 0);
 var useOnboarding = () => {
   const context = useContext(OnboardingContext);
@@ -8283,11 +8700,11 @@ var useOnboarding = () => {
   return context;
 };
 var OnboardingProvider = ({ children }) => {
-  const [isOnboardingActive, setIsOnboardingActive] = useState10(() => {
+  const [isOnboardingActive, setIsOnboardingActive] = useState12(() => {
     const savedState = localStorage.getItem("isOnboardingActive");
     return savedState !== null ? JSON.parse(savedState) : true;
   });
-  useEffect3(() => {
+  useEffect6(() => {
     localStorage.setItem("isOnboardingActive", JSON.stringify(isOnboardingActive));
   }, [isOnboardingActive]);
   const startOnboarding = useCallback5(() => setIsOnboardingActive(true), []);
@@ -8298,7 +8715,7 @@ var OnboardingProvider = ({ children }) => {
     setIsOnboardingActive(false);
     setTimeout(() => setIsOnboardingActive(true), 0);
   }, []);
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx92(
     OnboardingContext.Provider,
     {
       value: {
@@ -8313,7 +8730,7 @@ var OnboardingProvider = ({ children }) => {
 };
 
 // src/components/utilities/Truncate/Truncate.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var getDefaultEndingLength = ({ text, variant, maxLength = text.length }) => {
   if (variant === "hex") {
     return 4;
@@ -8337,30 +8754,30 @@ var Truncate = ({
     const truncated = text.slice(0, maxLength - endingLength);
     truncatedText = [truncated, ending].filter(Boolean).join("...");
   }
-  return /* @__PURE__ */ jsx90("span", { ...props, "data-full": text, children: truncatedText });
+  return /* @__PURE__ */ jsx93("span", { ...props, "data-full": text, children: truncatedText });
 };
 
 // src/components/utilities/BytesSize/BytesSize.tsx
 import size from "byte-size";
-import { Fragment as Fragment13, jsx as jsx91 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx94 } from "react/jsx-runtime";
 var BytesSize = ({ bytes }) => {
-  return /* @__PURE__ */ jsx91(Fragment13, { children: size(bytes).toString() });
+  return /* @__PURE__ */ jsx94(Fragment14, { children: size(bytes).toString() });
 };
 
 // src/components/utilities/QRCode/QRCode.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef3 } from "react";
 import QR from "react-qr-code";
-import { jsx as jsx92 } from "react/jsx-runtime";
-var QRCode = forwardRef2(({ size: size3 = 168, ...props }, ref) => /* @__PURE__ */ jsx92(QR, { ref, size: size3, ...props }));
+import { jsx as jsx95 } from "react/jsx-runtime";
+var QRCode = forwardRef3(({ size: size3 = 168, ...props }, ref) => /* @__PURE__ */ jsx95(QR, { ref, size: size3, ...props }));
 QRCode.displayName = "QRCode";
 
 // src/components/charts/ChartWidget/ChartWidget.tsx
-import { Box as Box29, Stack as Stack5, Typography as Typography24, styled as styled44, useTheme as useTheme9 } from "@mui/material";
+import { Box as Box33, Stack as Stack5, Typography as Typography27, styled as styled44, useTheme as useTheme9 } from "@mui/material";
 import { LineChart } from "@mui/x-charts";
 import size2 from "byte-size";
 import { format } from "date-fns";
-import { jsx as jsx93, jsxs as jsxs46 } from "react/jsx-runtime";
-var Chart = styled44(Box29)(() => ({
+import { jsx as jsx96, jsxs as jsxs50 } from "react/jsx-runtime";
+var Chart = styled44(Box33)(() => ({
   height: 200
 }));
 var ChartWidget = ({
@@ -8370,10 +8787,10 @@ var ChartWidget = ({
   formatValue = (value2) => size2(value2 || 0).toString()
 }) => {
   const theme2 = useTheme9();
-  return /* @__PURE__ */ jsxs46(Stack5, { spacing: 1, children: [
-    /* @__PURE__ */ jsx93(Typography24, { variant: "caption", color: "text.secondary", children: title }),
-    /* @__PURE__ */ jsx93(Typography24, { fontWeight: "bold", children: value }),
-    /* @__PURE__ */ jsx93(Chart, { children: /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsxs50(Stack5, { spacing: 1, children: [
+    /* @__PURE__ */ jsx96(Typography27, { variant: "caption", color: "text.secondary", children: title }),
+    /* @__PURE__ */ jsx96(Typography27, { fontWeight: "bold", children: value }),
+    /* @__PURE__ */ jsx96(Chart, { children: /* @__PURE__ */ jsx96(
       LineChart,
       {
         dataset: history || [],
@@ -8431,11 +8848,11 @@ var ChartWidget = ({
 import { format as format2, startOfDay, subHours, subWeeks, subMonths } from "date-fns";
 import { LineChart as LineChart2 } from "@mui/x-charts";
 import { useDrawingArea, useYScale } from "@mui/x-charts/hooks";
-import { Box as Box30, Card as Card2, CardHeader as CardHeader2, CardMedia, Divider as Divider10, Stack as Stack6, styled as styled45, Typography as Typography25, useTheme as useTheme10 } from "@mui/material";
+import { Box as Box34, Card as Card2, CardHeader as CardHeader2, CardMedia as CardMedia2, Divider as Divider10, Stack as Stack6, styled as styled45, Typography as Typography28, useTheme as useTheme10 } from "@mui/material";
 
 // src/components/charts/MetricsChart/PeriodSelect.tsx
 import { MenuItem as MenuItem3, TextField as TextField4 } from "@mui/material";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var options = [
   /**
    * TODO: Enable the options below when the backend supports them
@@ -8445,7 +8862,7 @@ var options = [
   { value: "week", label: "1 week" },
   { value: "month", label: "1 month" }
 ];
-var PeriodSelect = ({ value, onChange }) => /* @__PURE__ */ jsx94(
+var PeriodSelect = ({ value, onChange }) => /* @__PURE__ */ jsx97(
   TextField4,
   {
     select: true,
@@ -8453,13 +8870,13 @@ var PeriodSelect = ({ value, onChange }) => /* @__PURE__ */ jsx94(
     value,
     defaultValue: options[0].value,
     onChange: (e) => onChange?.(e.target.value),
-    children: options.map(({ value: value2, label }) => /* @__PURE__ */ jsx94(MenuItem3, { value: value2, children: label }, value2))
+    children: options.map(({ value: value2, label }) => /* @__PURE__ */ jsx97(MenuItem3, { value: value2, children: label }, value2))
   }
 );
 
 // src/components/charts/MetricsChart/MetricsChart.tsx
-import { useMemo, useState as useState11 } from "react";
-import { jsx as jsx95, jsxs as jsxs47 } from "react/jsx-runtime";
+import { useMemo, useState as useState13 } from "react";
+import { jsx as jsx98, jsxs as jsxs51 } from "react/jsx-runtime";
 var mapPeriodToFromDate = (period = "month") => {
   const date = /* @__PURE__ */ new Date();
   if (period === "hour") {
@@ -8489,7 +8906,7 @@ var LoadingText = styled45("text")(({ theme: theme2 }) => ({
 }));
 var MetricsChart = ({ history = [] }) => {
   const theme2 = useTheme10();
-  const [period, setPeriod] = useState11("week");
+  const [period, setPeriod] = useState13("week");
   const periodFrom = useMemo(() => mapPeriodToFromDate(period), [period]);
   const periodHistory = useMemo(
     () => history.filter((record) => record.recordTime > periodFrom),
@@ -8519,15 +8936,15 @@ var MetricsChart = ({ history = [] }) => {
     const backgroundHeight = textHeight + padding.top + padding.bottom;
     const rectX = left + (width - backgroundWidth) / 2;
     const rectY = top + (height - backgroundHeight) / 2;
-    return /* @__PURE__ */ jsxs47("g", { children: [
-      /* @__PURE__ */ jsx95(NoDataRect, { x: rectX, y: rectY, width: backgroundWidth, height: backgroundHeight }),
-      /* @__PURE__ */ jsx95(LoadingText, { style: { ...theme2.typography.subtitle1 }, x: left + width / 2, y: top + height / 2, children: text })
+    return /* @__PURE__ */ jsxs51("g", { children: [
+      /* @__PURE__ */ jsx98(NoDataRect, { x: rectX, y: rectY, width: backgroundWidth, height: backgroundHeight }),
+      /* @__PURE__ */ jsx98(LoadingText, { style: { ...theme2.typography.subtitle1 }, x: left + width / 2, y: top + height / 2, children: text })
     ] });
   };
-  return /* @__PURE__ */ jsxs47(Card2, { children: [
-    /* @__PURE__ */ jsx95(CardHeader2, { title: "GET / PUT Requests", action: /* @__PURE__ */ jsx95(PeriodSelect, { value: period, onChange: setPeriod }) }),
-    /* @__PURE__ */ jsxs47(CardMedia, { children: [
-      /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsxs51(Card2, { children: [
+    /* @__PURE__ */ jsx98(CardHeader2, { title: "GET / PUT Requests", action: /* @__PURE__ */ jsx98(PeriodSelect, { value: period, onChange: setPeriod }) }),
+    /* @__PURE__ */ jsxs51(CardMedia2, { children: [
+      /* @__PURE__ */ jsx98(
         Chart2,
         {
           skipAnimation: true,
@@ -8588,35 +9005,35 @@ var MetricsChart = ({ history = [] }) => {
           ]
         }
       ),
-      periodHistory.length > 0 && /* @__PURE__ */ jsxs47(Stack6, { direction: "row", spacing: 2, marginY: 3, justifyContent: "center", children: [
-        /* @__PURE__ */ jsxs47(Stack6, { direction: "row", spacing: 1, alignItems: "center", children: [
-          /* @__PURE__ */ jsx95(Box30, { sx: { width: 14, height: 14, borderRadius: "4px", backgroundColor: theme2.palette.primary.main } }),
-          /* @__PURE__ */ jsx95(Typography25, { variant: "body2", children: "Get" })
+      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__ */ jsx98(Box34, { sx: { width: 14, height: 14, borderRadius: "4px", backgroundColor: theme2.palette.primary.main } }),
+          /* @__PURE__ */ jsx98(Typography28, { variant: "body2", children: "Get" })
         ] }),
-        /* @__PURE__ */ jsxs47(Stack6, { direction: "row", spacing: 1, alignItems: "center", children: [
-          /* @__PURE__ */ jsx95(Box30, { sx: { width: 14, height: 14, borderRadius: "4px", backgroundColor: theme2.palette.success.main } }),
-          /* @__PURE__ */ jsx95(Typography25, { variant: "body2", children: "Put" })
+        /* @__PURE__ */ jsxs51(Stack6, { direction: "row", spacing: 1, alignItems: "center", children: [
+          /* @__PURE__ */ jsx98(Box34, { sx: { width: 14, height: 14, borderRadius: "4px", backgroundColor: theme2.palette.success.main } }),
+          /* @__PURE__ */ jsx98(Typography28, { variant: "body2", children: "Put" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs47(CardMedia, { children: [
-      /* @__PURE__ */ jsx95(Divider10, { flexItem: true }),
-      /* @__PURE__ */ jsxs47(Stack6, { direction: "row", spacing: 2, padding: 2, children: [
-        /* @__PURE__ */ jsxs47(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ jsx95(Typography25, { variant: "body2", color: "secondary", children: "GET Requests per account" }),
-          /* @__PURE__ */ jsx95(Typography25, { variant: "h3", children: total.gets })
+    /* @__PURE__ */ jsxs51(CardMedia2, { children: [
+      /* @__PURE__ */ jsx98(Divider10, { flexItem: true }),
+      /* @__PURE__ */ jsxs51(Stack6, { direction: "row", spacing: 2, padding: 2, children: [
+        /* @__PURE__ */ jsxs51(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ jsx98(Typography28, { variant: "body2", color: "secondary", children: "GET Requests per account" }),
+          /* @__PURE__ */ jsx98(Typography28, { variant: "h3", children: total.gets })
         ] }),
-        /* @__PURE__ */ jsxs47(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ jsx95(Typography25, { variant: "body2", color: "secondary", children: "PUT Requests per account" }),
-          /* @__PURE__ */ jsx95(Typography25, { variant: "h3", children: total.puts })
+        /* @__PURE__ */ jsxs51(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ jsx98(Typography28, { variant: "body2", color: "secondary", children: "PUT Requests per account" }),
+          /* @__PURE__ */ jsx98(Typography28, { variant: "h3", children: total.puts })
         ] }),
-        /* @__PURE__ */ jsxs47(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ jsx95(Typography25, { variant: "body2", color: "secondary", children: "Total Consumed per account" }),
-          /* @__PURE__ */ jsx95(Typography25, { variant: "h3", children: /* @__PURE__ */ jsx95(BytesSize, { bytes: total.transferredBytes }) })
+        /* @__PURE__ */ jsxs51(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ jsx98(Typography28, { variant: "body2", color: "secondary", children: "Total Consumed per account" }),
+          /* @__PURE__ */ jsx98(Typography28, { variant: "h3", children: /* @__PURE__ */ jsx98(BytesSize, { bytes: total.transferredBytes }) })
         ] }),
-        /* @__PURE__ */ jsxs47(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ jsx95(Typography25, { variant: "body2", color: "secondary", children: "Total Stored per account" }),
-          /* @__PURE__ */ jsx95(Typography25, { variant: "h3", children: /* @__PURE__ */ jsx95(BytesSize, { bytes: total.storedBytes }) })
+        /* @__PURE__ */ jsxs51(Stack6, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ jsx98(Typography28, { variant: "body2", color: "secondary", children: "Total Stored per account" }),
+          /* @__PURE__ */ jsx98(Typography28, { variant: "h3", children: /* @__PURE__ */ jsx98(BytesSize, { bytes: total.storedBytes }) })
         ] })
       ] })
     ] })
@@ -8624,16 +9041,16 @@ var MetricsChart = ({ history = [] }) => {
 };
 
 // src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
-import { useCallback as useCallback6, useMemo as useMemo2, useState as useState12 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo2, useState as useState14 } from "react";
 import {
-  Box as Box31,
+  Box as Box35,
   Card as Card3,
   CardHeader as CardHeader3,
-  CardMedia as CardMedia2,
+  CardMedia as CardMedia3,
   CircularProgress as CircularProgress7,
   Divider as Divider11,
   Stack as Stack8,
-  Typography as Typography27,
+  Typography as Typography30,
   styled as styled46,
   useTheme as useTheme11
 } from "@mui/material";
@@ -8642,8 +9059,8 @@ import { format as format3 } from "date-fns";
 
 // src/components/charts/TimeSeriesGraph/TimeRangeSelect.tsx
 import { MenuItem as MenuItem4, TextField as TextField5 } from "@mui/material";
-import { jsx as jsx96 } from "react/jsx-runtime";
-var TimeRangeSelect = ({ options: options2, value, onChange }) => /* @__PURE__ */ jsx96(
+import { jsx as jsx99 } from "react/jsx-runtime";
+var TimeRangeSelect = ({ options: options2, value, onChange }) => /* @__PURE__ */ jsx99(
   TextField5,
   {
     select: true,
@@ -8652,13 +9069,13 @@ var TimeRangeSelect = ({ options: options2, value, onChange }) => /* @__PURE__ *
     onChange: (e) => onChange?.(e.target.value),
     "aria-label": "Time range selector",
     sx: { minWidth: 120 },
-    children: options2.map((option) => /* @__PURE__ */ jsx96(MenuItem4, { value: option.value, children: option.label }, option.value))
+    children: options2.map((option) => /* @__PURE__ */ jsx99(MenuItem4, { value: option.value, children: option.label }, option.value))
   }
 );
 
 // src/components/charts/TimeSeriesGraph/SummaryStats.tsx
-import { Stack as Stack7, Typography as Typography26 } from "@mui/material";
-import { jsx as jsx97, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Stack as Stack7, Typography as Typography29 } from "@mui/material";
+import { jsx as jsx100, jsxs as jsxs52 } from "react/jsx-runtime";
 var formatSummaryValue = (value, unit) => {
   const displayValue = typeof value === "number" ? value.toLocaleString() : value;
   return unit ? `${displayValue} ${unit}` : displayValue;
@@ -8667,7 +9084,7 @@ var SummaryStats = ({ items }) => {
   if (items.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx100(
     Stack7,
     {
       direction: "row",
@@ -8677,7 +9094,7 @@ var SummaryStats = ({ items }) => {
       useFlexGap: true,
       role: "list",
       "aria-label": "Summary statistics",
-      children: items.map((item) => /* @__PURE__ */ jsxs48(
+      children: items.map((item) => /* @__PURE__ */ jsxs52(
         Stack7,
         {
           direction: "row",
@@ -8685,8 +9102,8 @@ var SummaryStats = ({ items }) => {
           spacing: 1,
           role: "listitem",
           children: [
-            /* @__PURE__ */ jsx97(Typography26, { variant: "body2", color: "text.secondary", children: item.label }),
-            /* @__PURE__ */ jsx97(Typography26, { variant: "h5", fontWeight: 600, children: formatSummaryValue(item.value, item.unit) })
+            /* @__PURE__ */ jsx100(Typography29, { variant: "body2", color: "text.secondary", children: item.label }),
+            /* @__PURE__ */ jsx100(Typography29, { variant: "h5", fontWeight: 600, children: formatSummaryValue(item.value, item.unit) })
           ]
         },
         item.label
@@ -8696,12 +9113,12 @@ var SummaryStats = ({ items }) => {
 };
 
 // src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
-import { Fragment as Fragment14, jsx as jsx98, jsxs as jsxs49 } from "react/jsx-runtime";
-var ChartContainer = styled46(Box31)({
+import { Fragment as Fragment15, jsx as jsx101, jsxs as jsxs53 } from "react/jsx-runtime";
+var ChartContainer = styled46(Box35)({
   position: "relative",
   height: 320
 });
-var LoadingOverlay = styled46(Box31)(({ theme: theme2 }) => ({
+var LoadingOverlay = styled46(Box35)(({ theme: theme2 }) => ({
   position: "absolute",
   inset: 0,
   display: "flex",
@@ -8711,7 +9128,7 @@ var LoadingOverlay = styled46(Box31)(({ theme: theme2 }) => ({
   zIndex: 1,
   borderRadius: theme2.shape.borderRadius
 }));
-var LegendDot = styled46(Box31, {
+var LegendDot = styled46(Box35, {
   shouldForwardProp: (prop) => prop !== "dotColor"
 })(({ dotColor }) => ({
   width: 14,
@@ -8768,7 +9185,7 @@ var TimeSeriesGraph = ({
   xAxisFormat
 }) => {
   const theme2 = useTheme11();
-  const [hiddenSeries, setHiddenSeries] = useState12(/* @__PURE__ */ new Set());
+  const [hiddenSeries, setHiddenSeries] = useState14(/* @__PURE__ */ new Set());
   const dataset = useMemo2(() => buildDataset(series, hiddenSeries), [series, hiddenSeries]);
   const visibleSeries = useMemo2(
     () => series.filter((s) => !hiddenSeries.has(s.name)),
@@ -8800,9 +9217,9 @@ var TimeSeriesGraph = ({
   );
   const hasData = dataset.length > 0;
   const shouldShowSummary = showSummary && summaryItems && summaryItems.length > 0;
-  const headerActionElement = /* @__PURE__ */ jsxs49(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__ */ jsx98(
+    timeRangeOptions && timeRangeOptions.length > 0 && /* @__PURE__ */ jsx101(
       TimeRangeSelect,
       {
         options: timeRangeOptions,
@@ -8812,13 +9229,13 @@ var TimeSeriesGraph = ({
     )
   ] });
   const showHeader = !!title || !!headerAction || timeRangeOptions && timeRangeOptions.length > 0;
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs53(
     Card3,
     {
       "aria-label": title ? `Line chart showing ${title}` : "Line chart",
       role: "figure",
       children: [
-        showHeader && /* @__PURE__ */ jsx98(
+        showHeader && /* @__PURE__ */ jsx101(
           CardHeader3,
           {
             title,
@@ -8829,10 +9246,10 @@ var TimeSeriesGraph = ({
             action: headerActionElement
           }
         ),
-        /* @__PURE__ */ jsxs49(CardMedia2, { children: [
-          /* @__PURE__ */ jsxs49(ChartContainer, { children: [
-            loading && /* @__PURE__ */ jsx98(LoadingOverlay, { role: "status", "aria-label": "Loading chart data", children: /* @__PURE__ */ jsx98(CircularProgress7, { size: 40 }) }),
-            /* @__PURE__ */ jsx98(
+        /* @__PURE__ */ jsxs53(CardMedia3, { children: [
+          /* @__PURE__ */ jsxs53(ChartContainer, { children: [
+            loading && /* @__PURE__ */ jsx101(LoadingOverlay, { role: "status", "aria-label": "Loading chart data", children: /* @__PURE__ */ jsx101(CircularProgress7, { size: 40 }) }),
+            /* @__PURE__ */ jsx101(
               LineChart3,
               {
                 dataset,
@@ -8884,7 +9301,7 @@ var TimeSeriesGraph = ({
               }
             )
           ] }),
-          series.length > 0 && /* @__PURE__ */ jsx98(
+          series.length > 0 && /* @__PURE__ */ jsx101(
             Stack8,
             {
               direction: "row",
@@ -8897,7 +9314,7 @@ var TimeSeriesGraph = ({
               "aria-label": "Chart legend",
               children: series.map((s) => {
                 const isHidden = hiddenSeries.has(s.name);
-                return /* @__PURE__ */ jsxs49(
+                return /* @__PURE__ */ jsxs53(
                   Stack8,
                   {
                     direction: "row",
@@ -8914,8 +9331,8 @@ var TimeSeriesGraph = ({
                     "aria-pressed": !isHidden,
                     "aria-label": `Toggle ${s.name} visibility`,
                     children: [
-                      /* @__PURE__ */ jsx98(LegendDot, { dotColor: s.color }),
-                      /* @__PURE__ */ jsx98(Typography27, { variant: "body2", children: s.name })
+                      /* @__PURE__ */ jsx101(LegendDot, { dotColor: s.color }),
+                      /* @__PURE__ */ jsx101(Typography30, { variant: "body2", children: s.name })
                     ]
                   },
                   s.name
@@ -8924,9 +9341,9 @@ var TimeSeriesGraph = ({
             }
           )
         ] }),
-        shouldShowSummary && /* @__PURE__ */ jsxs49(Fragment14, { children: [
-          /* @__PURE__ */ jsx98(Divider11, {}),
-          /* @__PURE__ */ jsx98(SummaryStats, { items: summaryItems })
+        shouldShowSummary && /* @__PURE__ */ jsxs53(Fragment15, { children: [
+          /* @__PURE__ */ jsx101(Divider11, {}),
+          /* @__PURE__ */ jsx101(SummaryStats, { items: summaryItems })
         ] })
       ]
     }
@@ -8943,10 +9360,10 @@ import ReactFlow, {
   BackgroundVariant,
   ConnectionLineType
 } from "reactflow";
-import { Box as Box32 } from "@mui/material";
+import { Box as Box36 } 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 jsx99, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx102, jsxs as jsxs54 } from "react/jsx-runtime";
 var FlowEditor = ({
   nodes,
   edges,
@@ -8977,8 +9394,8 @@ var FlowEditor = ({
     [onInit]
   );
   const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
-  return /* @__PURE__ */ jsx99(ReactFlowProvider, { children: /* @__PURE__ */ jsx99(
-    Box32,
+  return /* @__PURE__ */ jsx102(ReactFlowProvider, { children: /* @__PURE__ */ jsx102(
+    Box36,
     {
       sx: [
         {
@@ -8992,7 +9409,7 @@ var FlowEditor = ({
         ...Array.isArray(containerSx) ? containerSx : [containerSx]
       ],
       ...restContainerProps,
-      children: /* @__PURE__ */ jsxs50(
+      children: /* @__PURE__ */ jsxs54(
         ReactFlow,
         {
           nodes,
@@ -9015,7 +9432,7 @@ var FlowEditor = ({
           },
           ...reactFlowProps,
           children: [
-            showBackground && /* @__PURE__ */ jsx99(
+            showBackground && /* @__PURE__ */ jsx102(
               Background,
               {
                 variant: backgroundVariant,
@@ -9024,8 +9441,8 @@ var FlowEditor = ({
                 color: theme2.palette.divider
               }
             ),
-            showControls && /* @__PURE__ */ jsx99(Controls, {}),
-            showMinimap && /* @__PURE__ */ jsx99(
+            showControls && /* @__PURE__ */ jsx102(Controls, {}),
+            showMinimap && /* @__PURE__ */ jsx102(
               MiniMap,
               {
                 nodeColor: (node) => {
@@ -9049,15 +9466,15 @@ var FlowEditor = ({
 };
 
 // src/components/third-party/CodeEditor.tsx
-import { useCallback as useCallback8, useEffect as useEffect4, useState as useState13, useRef as useRef4 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect7, useState as useState15, useRef as useRef4 } from "react";
 import Editor from "@monaco-editor/react";
-import { Box as Box33, IconButton as IconButton15, Tooltip as Tooltip8 } from "@mui/material";
+import { Box as Box37, IconButton as IconButton17, Tooltip as Tooltip8 } from "@mui/material";
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
 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 jsx100, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs55 } from "react/jsx-runtime";
 var configureTypeScript = (monaco) => {
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     target: monaco.languages.typescript.ScriptTarget.ES2020,
@@ -9106,16 +9523,16 @@ var CodeEditor = ({
   typeDefinitions,
   externalModelManagement = false
 }) => {
-  const [isEditorReady, setIsEditorReady] = useState13(false);
-  const [validationErrors, setValidationErrors] = useState13([]);
-  const [isFullscreen, setIsFullscreen] = useState13(false);
-  const [tsCode, setTsCode] = useState13(value);
-  const [actualHeight, setActualHeight] = useState13(
+  const [isEditorReady, setIsEditorReady] = useState15(false);
+  const [validationErrors, setValidationErrors] = useState15([]);
+  const [isFullscreen, setIsFullscreen] = useState15(false);
+  const [tsCode, setTsCode] = useState15(value);
+  const [actualHeight, setActualHeight] = useState15(
     typeof height === "number" ? `${height}px` : height
   );
-  const [showProblems, setShowProblems] = useState13(false);
-  const [hasUserToggledProblems, setHasUserToggledProblems] = useState13(false);
-  useEffect4(() => {
+  const [showProblems, setShowProblems] = useState15(false);
+  const [hasUserToggledProblems, setHasUserToggledProblems] = useState15(false);
+  useEffect7(() => {
     if (hasUserToggledProblems) return;
     if (validationErrors.length > 0) {
       setShowProblems(true);
@@ -9127,7 +9544,7 @@ var CodeEditor = ({
   const internalMonacoRef = useRef4(null);
   const finalEditorRef = editorRef || internalEditorRef;
   const finalMonacoRef = monacoRef || internalMonacoRef;
-  useEffect4(() => {
+  useEffect7(() => {
     if (isFullscreen) {
       setActualHeight("calc(100vh - 80px)");
     } else {
@@ -9156,7 +9573,7 @@ var CodeEditor = ({
     },
     [finalEditorRef]
   );
-  useEffect4(() => {
+  useEffect7(() => {
     if (!isFullscreen) return;
     function escapeHandler(event) {
       if (event.key === "Escape") {
@@ -9227,7 +9644,7 @@ var CodeEditor = ({
     },
     [isFullscreen, onFullscreenChange, onValidate, onMount, finalEditorRef, finalMonacoRef]
   );
-  useEffect4(() => {
+  useEffect7(() => {
     if (!isEditorReady || !finalMonacoRef?.current || !typeDefinitions) return;
     const monaco = finalMonacoRef.current;
     const definitions = Array.isArray(typeDefinitions) ? typeDefinitions : [typeDefinitions];
@@ -9249,7 +9666,7 @@ var CodeEditor = ({
     setTsCode(valueStr);
     onChange(valueStr);
   };
-  useEffect4(() => {
+  useEffect7(() => {
     if (externalModelManagement) return;
     if (value !== tsCode) {
       setTsCode(value);
@@ -9275,8 +9692,8 @@ var CodeEditor = ({
     theme: themeProp || "vs",
     ...options2
   };
-  return /* @__PURE__ */ jsx100(
-    Box33,
+  return /* @__PURE__ */ jsx103(
+    Box37,
     {
       sx: {
         display: "flex",
@@ -9296,8 +9713,8 @@ var CodeEditor = ({
         pb: isFullscreen ? 2 : 0,
         overflow: isFullscreen ? "hidden" : "visible"
       },
-      children: /* @__PURE__ */ jsxs51(
-        Box33,
+      children: /* @__PURE__ */ jsxs55(
+        Box37,
         {
           sx: {
             flex: 1,
@@ -9312,8 +9729,8 @@ var CodeEditor = ({
           },
           ...containerProps,
           children: [
-            /* @__PURE__ */ jsx100(Tooltip8, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ jsx100(
-              IconButton15,
+            /* @__PURE__ */ jsx103(Tooltip8, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ jsx103(
+              IconButton17,
               {
                 onClick: toggleFullscreen,
                 size: "small",
@@ -9330,11 +9747,11 @@ var CodeEditor = ({
                   },
                   boxShadow: 1
                 },
-                children: isFullscreen ? /* @__PURE__ */ jsx100(FullscreenExitIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx100(FullscreenIcon, { fontSize: "small" })
+                children: isFullscreen ? /* @__PURE__ */ jsx103(FullscreenExitIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx103(FullscreenIcon, { fontSize: "small" })
               }
             ) }),
-            /* @__PURE__ */ jsx100(
-              Box33,
+            /* @__PURE__ */ jsx103(
+              Box37,
               {
                 sx: {
                   flex: 1,
@@ -9345,7 +9762,7 @@ var CodeEditor = ({
                   position: "relative",
                   height: isFullscreen ? "100%" : actualHeight
                 },
-                children: /* @__PURE__ */ jsx100(
+                children: /* @__PURE__ */ jsx103(
                   Editor,
                   {
                     height: "100%",
@@ -9356,7 +9773,7 @@ var CodeEditor = ({
                     onMount: handleEditorDidMount,
                     theme: themeProp || "vs",
                     options: defaultOptions,
-                    loading: /* @__PURE__ */ jsx100(Box33, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
+                    loading: /* @__PURE__ */ jsx103(Box37, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
                     beforeMount: (monaco) => {
                       console.log("CodeEditor: beforeMount called", { monaco: !!monaco });
                     }
@@ -9364,8 +9781,8 @@ var CodeEditor = ({
                 )
               }
             ),
-            validationErrors.length > 0 && /* @__PURE__ */ jsxs51(
-              Box33,
+            validationErrors.length > 0 && /* @__PURE__ */ jsxs55(
+              Box37,
               {
                 sx: {
                   borderTop: 1,
@@ -9378,8 +9795,8 @@ var CodeEditor = ({
                   transition: "max-height 0.2s ease"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs51(
-                    Box33,
+                  /* @__PURE__ */ jsxs55(
+                    Box37,
                     {
                       sx: {
                         display: "flex",
@@ -9393,16 +9810,16 @@ var CodeEditor = ({
                         color: "text.secondary"
                       },
                       children: [
-                        /* @__PURE__ */ jsx100(ErrorOutlineIcon, { color: "error", fontSize: "small" }),
-                        /* @__PURE__ */ jsx100(Box33, { sx: { fontWeight: 600, color: "text.primary" }, children: "Problems" }),
-                        /* @__PURE__ */ jsxs51(Box33, { sx: { ml: 1 }, children: [
+                        /* @__PURE__ */ jsx103(ErrorOutlineIcon, { color: "error", fontSize: "small" }),
+                        /* @__PURE__ */ jsx103(Box37, { sx: { fontWeight: 600, color: "text.primary" }, children: "Problems" }),
+                        /* @__PURE__ */ jsxs55(Box37, { sx: { ml: 1 }, children: [
                           validationErrors.length,
                           " error",
                           validationErrors.length > 1 ? "s" : ""
                         ] }),
-                        /* @__PURE__ */ jsx100(Box33, { sx: { flex: 1 } }),
-                        /* @__PURE__ */ jsx100(
-                          IconButton15,
+                        /* @__PURE__ */ jsx103(Box37, { sx: { flex: 1 } }),
+                        /* @__PURE__ */ jsx103(
+                          IconButton17,
                           {
                             size: "small",
                             "aria-label": "Toggle problems panel",
@@ -9410,14 +9827,14 @@ var CodeEditor = ({
                               setHasUserToggledProblems(true);
                               setShowProblems((s) => !s);
                             },
-                            children: showProblems ? /* @__PURE__ */ jsx100(ExpandMoreIcon3, { fontSize: "small" }) : /* @__PURE__ */ jsx100(ExpandLessIcon, { fontSize: "small" })
+                            children: showProblems ? /* @__PURE__ */ jsx103(ExpandMoreIcon3, { fontSize: "small" }) : /* @__PURE__ */ jsx103(ExpandLessIcon, { fontSize: "small" })
                           }
                         )
                       ]
                     }
                   ),
-                  showProblems && /* @__PURE__ */ jsx100(Box33, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ jsxs51(
-                    Box33,
+                  showProblems && /* @__PURE__ */ jsx103(Box37, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ jsxs55(
+                    Box37,
                     {
                       onClick: () => gotoMarker(error),
                       sx: {
@@ -9433,12 +9850,12 @@ var CodeEditor = ({
                         fontSize: "0.85rem"
                       },
                       children: [
-                        /* @__PURE__ */ jsx100(ErrorOutlineIcon, { color: "error", sx: { fontSize: 18 } }),
-                        /* @__PURE__ */ jsxs51(Box33, { sx: { color: "text.secondary", width: 64 }, children: [
+                        /* @__PURE__ */ jsx103(ErrorOutlineIcon, { color: "error", sx: { fontSize: 18 } }),
+                        /* @__PURE__ */ jsxs55(Box37, { sx: { color: "text.secondary", width: 64 }, children: [
                           "Line ",
                           error.startLineNumber
                         ] }),
-                        /* @__PURE__ */ jsx100(Box33, { sx: { color: "text.primary", flex: 1, minWidth: 0 }, children: error.message })
+                        /* @__PURE__ */ jsx103(Box37, { sx: { color: "text.primary", flex: 1, minWidth: 0 }, children: error.message })
                       ]
                     },
                     `${error.startLineNumber}-${error.startColumn}-${index}`
@@ -9459,7 +9876,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 Fragment15, jsx as jsx101, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx104, jsxs as jsxs56 } from "react/jsx-runtime";
 var WorkflowNodeHandle = ({
   data,
   selected
@@ -9474,9 +9891,9 @@ var WorkflowNodeHandle = ({
     background: handleColor,
     boxShadow: WORKFLOW_NODE_SHADOW
   };
-  return /* @__PURE__ */ jsxs52(Fragment15, { children: [
-    /* @__PURE__ */ jsx101(Handle, { type: "target", position: Position.Left, style: handleStyle }),
-    /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsxs56(Fragment16, { children: [
+    /* @__PURE__ */ jsx104(Handle, { type: "target", position: Position.Left, style: handleStyle }),
+    /* @__PURE__ */ jsx104(
       WorkflowNode,
       {
         nodeType: data.nodeType,
@@ -9488,7 +9905,7 @@ var WorkflowNodeHandle = ({
         showSideDots: false
       }
     ),
-    /* @__PURE__ */ jsx101(Handle, { type: "source", position: Position.Right, style: handleStyle })
+    /* @__PURE__ */ jsx104(Handle, { type: "source", position: Position.Right, style: handleStyle })
   ] });
 };
 
@@ -9519,7 +9936,7 @@ function getFileName(path) {
 }
 
 // src/components/third-party/CodeEditorWorkspace/useCodeEditorWorkspace.ts
-import { useCallback as useCallback9, useEffect as useEffect5, useRef as useRef5, useState as useState14 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect8, useRef as useRef5, useState as useState16 } from "react";
 function useCodeEditorWorkspace({
   files,
   initialOpenPaths,
@@ -9528,14 +9945,14 @@ function useCodeEditorWorkspace({
 }) {
   const fileContentsRef = useRef5(/* @__PURE__ */ new Map());
   const originalContentsRef = useRef5(/* @__PURE__ */ new Map());
-  const [openTabs, setOpenTabs] = useState14([]);
-  const [activeFilePath, setActiveFilePath] = useState14(null);
+  const [openTabs, setOpenTabs] = useState16([]);
+  const [activeFilePath, setActiveFilePath] = useState16(null);
   const monacoRef = useRef5(null);
   const editorRef = useRef5(null);
   const modelsRef = useRef5(/* @__PURE__ */ new Map());
-  const [validationMarkers, setValidationMarkers] = useState14({});
-  const [cursorPosition, setCursorPosition] = useState14(null);
-  useEffect5(() => {
+  const [validationMarkers, setValidationMarkers] = useState16({});
+  const [cursorPosition, setCursorPosition] = useState16(null);
+  useEffect8(() => {
     for (const file of files) {
       if (!fileContentsRef.current.has(file.path)) {
         fileContentsRef.current.set(file.path, file.value);
@@ -9559,7 +9976,7 @@ function useCodeEditorWorkspace({
       }
     }
   }, [files]);
-  useEffect5(() => {
+  useEffect8(() => {
     if (initialOpenPaths && initialOpenPaths.length > 0) {
       const tabs = initialOpenPaths.filter((p) => files.some((f) => f.path === p)).map((p) => ({
         path: p,
@@ -9739,7 +10156,7 @@ function useCodeEditorWorkspace({
     value: fileContentsRef.current.get(activeFilePath) ?? "",
     language: files.find((f) => f.path === activeFilePath)?.language ?? detectLanguage(activeFilePath)
   } : void 0;
-  useEffect5(() => {
+  useEffect8(() => {
     return () => {
       for (const model of modelsRef.current.values()) {
         if (!model.isDisposed()) {
@@ -9770,10 +10187,10 @@ function useCodeEditorWorkspace({
 }
 
 // src/components/third-party/CodeEditorWorkspace/CodeEditorTabs.tsx
-import React16 from "react";
-import { Box as Box34, IconButton as IconButton16, Tooltip as Tooltip9, Typography as Typography28 } from "@mui/material";
-import CloseIcon5 from "@mui/icons-material/Close";
-import { jsx as jsx102, jsxs as jsxs53 } from "react/jsx-runtime";
+import React17 from "react";
+import { Box as Box38, IconButton as IconButton18, Tooltip as Tooltip9, Typography as Typography31 } from "@mui/material";
+import CloseIcon6 from "@mui/icons-material/Close";
+import { jsx as jsx105, jsxs as jsxs57 } from "react/jsx-runtime";
 var CodeEditorTabs = ({
   tabs,
   activeTab,
@@ -9783,8 +10200,8 @@ var CodeEditorTabs = ({
   containerProps
 }) => {
   if (tabs.length === 0) return null;
-  return /* @__PURE__ */ jsx102(
-    Box34,
+  return /* @__PURE__ */ jsx105(
+    Box38,
     {
       sx: {
         display: "flex",
@@ -9802,15 +10219,15 @@ var CodeEditorTabs = ({
         const isActive = tab.path === activeTab;
         const label = tab.label ?? getFileName(tab.path);
         if (renderTab) {
-          return /* @__PURE__ */ jsx102(React16.Fragment, { children: renderTab({
+          return /* @__PURE__ */ jsx105(React17.Fragment, { children: renderTab({
             tab,
             isActive,
             onSelect: () => onTabSelect?.(tab.path),
             onClose: () => onTabClose?.(tab.path)
           }) }, tab.path);
         }
-        return /* @__PURE__ */ jsxs53(
-          Box34,
+        return /* @__PURE__ */ jsxs57(
+          Box38,
           {
             onClick: () => onTabSelect?.(tab.path),
             sx: {
@@ -9832,8 +10249,8 @@ var CodeEditorTabs = ({
               transition: "background-color 0.15s ease"
             },
             children: [
-              tab.isDirty && /* @__PURE__ */ jsx102(
-                Box34,
+              tab.isDirty && /* @__PURE__ */ jsx105(
+                Box38,
                 {
                   sx: {
                     width: 6,
@@ -9844,8 +10261,8 @@ var CodeEditorTabs = ({
                   }
                 }
               ),
-              tab.syncStatus && /* @__PURE__ */ jsx102(
-                Box34,
+              tab.syncStatus && /* @__PURE__ */ jsx105(
+                Box38,
                 {
                   component: "span",
                   sx: {
@@ -9858,8 +10275,8 @@ var CodeEditorTabs = ({
                   children: tab.syncStatus === "new" ? "N" : "M"
                 }
               ),
-              /* @__PURE__ */ jsx102(Tooltip9, { title: tab.path, enterDelay: 600, children: /* @__PURE__ */ jsx102(
-                Typography28,
+              /* @__PURE__ */ jsx105(Tooltip9, { title: tab.path, enterDelay: 600, children: /* @__PURE__ */ jsx105(
+                Typography31,
                 {
                   variant: "body2",
                   sx: {
@@ -9871,8 +10288,8 @@ var CodeEditorTabs = ({
                   children: label
                 }
               ) }),
-              onTabClose && /* @__PURE__ */ jsx102(
-                IconButton16,
+              onTabClose && /* @__PURE__ */ jsx105(
+                IconButton18,
                 {
                   size: "small",
                   onClick: (e) => {
@@ -9888,7 +10305,7 @@ var CodeEditorTabs = ({
                     transition: "opacity 0.15s ease"
                   },
                   "aria-label": `Close ${label}`,
-                  children: /* @__PURE__ */ jsx102(CloseIcon5, { sx: { fontSize: 14 } })
+                  children: /* @__PURE__ */ jsx105(CloseIcon6, { sx: { fontSize: 14 } })
                 }
               )
             ]
@@ -9901,14 +10318,14 @@ var CodeEditorTabs = ({
 };
 
 // src/components/third-party/CodeEditorWorkspace/CodeEditorFileTree.tsx
-import React17, { useCallback as useCallback10, useState as useState15 } from "react";
-import { Box as Box35, Collapse as Collapse2, List as List7, ListItemButton as ListItemButton4, ListItemIcon as ListItemIcon6, ListItemText as ListItemText9 } from "@mui/material";
+import React18, { useCallback as useCallback10, useState as useState17 } from "react";
+import { Box as Box39, Collapse as Collapse2, List as List7, ListItemButton as ListItemButton4, ListItemIcon as ListItemIcon6, ListItemText as ListItemText9 } from "@mui/material";
 import FolderIcon2 from "@mui/icons-material/Folder";
 import FolderOpenIcon from "@mui/icons-material/FolderOpen";
 import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
 import ExpandMoreIcon4 from "@mui/icons-material/ExpandMore";
-import ChevronRightIcon5 from "@mui/icons-material/ChevronRight";
-import { jsx as jsx103, jsxs as jsxs54 } from "react/jsx-runtime";
+import ChevronRightIcon6 from "@mui/icons-material/ChevronRight";
+import { jsx as jsx106, jsxs as jsxs58 } from "react/jsx-runtime";
 var STATUS_CONFIG = {
   new: { label: "N", color: "success.main" },
   modified: { label: "M", color: "warning.main" },
@@ -9933,7 +10350,7 @@ var CodeEditorFileTree = ({
   width = 220,
   containerProps
 }) => {
-  const [expandedPaths, setExpandedPaths] = useState15(
+  const [expandedPaths, setExpandedPaths] = useState17(
     () => new Set(defaultExpandedPaths ?? [])
   );
   const toggleFolder = useCallback10(
@@ -9957,7 +10374,7 @@ var CodeEditorFileTree = ({
     const isExpanded = expandedPaths.has(node.path);
     const isSelected = node.path === selectedPath;
     if (renderNode) {
-      return /* @__PURE__ */ jsxs54(React17.Fragment, { children: [
+      return /* @__PURE__ */ jsxs58(React18.Fragment, { children: [
         renderNode({
           node,
           depth,
@@ -9975,8 +10392,8 @@ var CodeEditorFileTree = ({
         isFolder && isExpanded && node.children?.map((child) => renderTreeNode(child, depth + 1))
       ] }, node.path);
     }
-    return /* @__PURE__ */ jsxs54(React17.Fragment, { children: [
-      /* @__PURE__ */ jsxs54(
+    return /* @__PURE__ */ jsxs58(React18.Fragment, { children: [
+      /* @__PURE__ */ jsxs58(
         ListItemButton4,
         {
           selected: isSelected,
@@ -9997,9 +10414,9 @@ var CodeEditorFileTree = ({
             }
           },
           children: [
-            isFolder && /* @__PURE__ */ jsx103(ListItemIcon6, { sx: { minWidth: 20 }, children: isExpanded ? /* @__PURE__ */ jsx103(ExpandMoreIcon4, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx103(ChevronRightIcon5, { sx: { fontSize: 16 } }) }),
-            /* @__PURE__ */ jsx103(ListItemIcon6, { sx: { minWidth: 24 }, children: node.icon ?? (isFolder ? isExpanded ? /* @__PURE__ */ jsx103(FolderOpenIcon, { sx: { fontSize: 16, color: "warning.main" } }) : /* @__PURE__ */ jsx103(FolderIcon2, { sx: { fontSize: 16, color: "warning.main" } }) : /* @__PURE__ */ jsx103(InsertDriveFileOutlinedIcon, { sx: { fontSize: 16, color: "text.secondary" } })) }),
-            /* @__PURE__ */ jsx103(
+            isFolder && /* @__PURE__ */ jsx106(ListItemIcon6, { sx: { minWidth: 20 }, children: isExpanded ? /* @__PURE__ */ jsx106(ExpandMoreIcon4, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx106(ChevronRightIcon6, { sx: { fontSize: 16 } }) }),
+            /* @__PURE__ */ jsx106(ListItemIcon6, { sx: { minWidth: 24 }, children: node.icon ?? (isFolder ? isExpanded ? /* @__PURE__ */ jsx106(FolderOpenIcon, { sx: { fontSize: 16, color: "warning.main" } }) : /* @__PURE__ */ jsx106(FolderIcon2, { sx: { fontSize: 16, color: "warning.main" } }) : /* @__PURE__ */ jsx106(InsertDriveFileOutlinedIcon, { sx: { fontSize: 16, color: "text.secondary" } })) }),
+            /* @__PURE__ */ jsx106(
               ListItemText9,
               {
                 primary: node.name,
@@ -10020,8 +10437,8 @@ var CodeEditorFileTree = ({
               const effectiveStatus = isFolder ? computeFolderStatus(node) : node.status;
               if (!effectiveStatus) return null;
               const cfg = STATUS_CONFIG[effectiveStatus];
-              return /* @__PURE__ */ jsx103(
-                Box35,
+              return /* @__PURE__ */ jsx106(
+                Box39,
                 {
                   component: "span",
                   sx: {
@@ -10040,11 +10457,11 @@ var CodeEditorFileTree = ({
           ]
         }
       ),
-      isFolder && /* @__PURE__ */ jsx103(Collapse2, { in: isExpanded, timeout: "auto", unmountOnExit: true, children: node.children?.map((child) => renderTreeNode(child, depth + 1)) })
+      isFolder && /* @__PURE__ */ jsx106(Collapse2, { in: isExpanded, timeout: "auto", unmountOnExit: true, children: node.children?.map((child) => renderTreeNode(child, depth + 1)) })
     ] }, node.path);
   };
-  return /* @__PURE__ */ jsx103(
-    Box35,
+  return /* @__PURE__ */ jsx106(
+    Box39,
     {
       sx: {
         width: typeof width === "number" ? `${width}px` : width,
@@ -10056,14 +10473,14 @@ var CodeEditorFileTree = ({
         bgcolor: "background.default"
       },
       ...containerProps,
-      children: /* @__PURE__ */ jsx103(List7, { dense: true, disablePadding: true, children: tree.map((node) => renderTreeNode(node, 0)) })
+      children: /* @__PURE__ */ jsx106(List7, { dense: true, disablePadding: true, children: tree.map((node) => renderTreeNode(node, 0)) })
     }
   );
 };
 
 // src/components/third-party/CodeEditorWorkspace/CodeEditorStatusBar.tsx
-import { Box as Box36, Tooltip as Tooltip10, Typography as Typography29 } from "@mui/material";
-import { Fragment as Fragment16, jsx as jsx104, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Box as Box40, Tooltip as Tooltip10, Typography as Typography32 } from "@mui/material";
+import { Fragment as Fragment17, jsx as jsx107, jsxs as jsxs59 } from "react/jsx-runtime";
 var LANGUAGE_LABELS = {
   typescript: "TypeScript",
   javascript: "JavaScript",
@@ -10087,12 +10504,12 @@ var CodeEditorStatusBar = ({
   containerProps
 }) => {
   if (renderStatusBar) {
-    return /* @__PURE__ */ jsx104(Fragment16, { children: renderStatusBar({ gitInfo, language, cursorPosition, items }) });
+    return /* @__PURE__ */ jsx107(Fragment17, { children: renderStatusBar({ gitInfo, language, cursorPosition, items }) });
   }
   const leftItems = items?.filter((i) => i.align !== "right") ?? [];
   const rightItems = items?.filter((i) => i.align === "right") ?? [];
-  return /* @__PURE__ */ jsxs55(
-    Box36,
+  return /* @__PURE__ */ jsxs59(
+    Box40,
     {
       sx: {
         display: "flex",
@@ -10112,8 +10529,8 @@ var CodeEditorStatusBar = ({
       },
       ...containerProps,
       children: [
-        /* @__PURE__ */ jsxs55(Box36, { sx: { display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }, children: [
-          gitInfo && /* @__PURE__ */ jsx104(
+        /* @__PURE__ */ jsxs59(Box40, { sx: { display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }, children: [
+          gitInfo && /* @__PURE__ */ jsx107(
             Tooltip10,
             {
               title: [
@@ -10123,8 +10540,8 @@ var CodeEditorStatusBar = ({
                 gitInfo.behind != null && `\u2193 ${gitInfo.behind} behind`
               ].filter(Boolean).join(" \xB7 ") || gitInfo.branch,
               enterDelay: 400,
-              children: /* @__PURE__ */ jsxs55(
-                Box36,
+              children: /* @__PURE__ */ jsxs59(
+                Box40,
                 {
                   onClick: onBranchClick,
                   sx: {
@@ -10136,7 +10553,7 @@ var CodeEditorStatusBar = ({
                     "&:hover": onBranchClick ? { opacity: 0.8 } : void 0
                   },
                   children: [
-                    /* @__PURE__ */ jsx104(
+                    /* @__PURE__ */ jsx107(
                       "svg",
                       {
                         width: "14",
@@ -10144,7 +10561,7 @@ var CodeEditorStatusBar = ({
                         viewBox: "0 0 16 16",
                         fill: "currentColor",
                         style: { flexShrink: 0 },
-                        children: /* @__PURE__ */ jsx104(
+                        children: /* @__PURE__ */ jsx107(
                           "path",
                           {
                             fillRule: "evenodd",
@@ -10153,8 +10570,8 @@ var CodeEditorStatusBar = ({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx104(
-                      Typography29,
+                    /* @__PURE__ */ jsx107(
+                      Typography32,
                       {
                         variant: "caption",
                         sx: {
@@ -10170,8 +10587,8 @@ var CodeEditorStatusBar = ({
                         children: gitInfo.branch
                       }
                     ),
-                    gitInfo.isDirty && /* @__PURE__ */ jsx104(
-                      Box36,
+                    gitInfo.isDirty && /* @__PURE__ */ jsx107(
+                      Box40,
                       {
                         component: "span",
                         sx: {
@@ -10183,11 +10600,11 @@ var CodeEditorStatusBar = ({
                         }
                       }
                     ),
-                    gitInfo.ahead != null && gitInfo.ahead > 0 && /* @__PURE__ */ jsxs55(Typography29, { variant: "caption", sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, opacity: 0.85 }, children: [
+                    gitInfo.ahead != null && gitInfo.ahead > 0 && /* @__PURE__ */ jsxs59(Typography32, { 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__ */ jsxs55(Typography29, { variant: "caption", sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, opacity: 0.85 }, children: [
+                    gitInfo.behind != null && gitInfo.behind > 0 && /* @__PURE__ */ jsxs59(Typography32, { variant: "caption", sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, opacity: 0.85 }, children: [
                       "\u2193",
                       gitInfo.behind
                     ] })
@@ -10196,12 +10613,12 @@ var CodeEditorStatusBar = ({
               )
             }
           ),
-          leftItems.map((item) => /* @__PURE__ */ jsx104(StatusBarItemElement, { item }, item.id))
+          leftItems.map((item) => /* @__PURE__ */ jsx107(StatusBarItemElement, { item }, item.id))
         ] }),
-        /* @__PURE__ */ jsxs55(Box36, { sx: { display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }, children: [
-          rightItems.map((item) => /* @__PURE__ */ jsx104(StatusBarItemElement, { item }, item.id)),
-          cursorPosition && /* @__PURE__ */ jsxs55(
-            Typography29,
+        /* @__PURE__ */ jsxs59(Box40, { sx: { display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }, children: [
+          rightItems.map((item) => /* @__PURE__ */ jsx107(StatusBarItemElement, { item }, item.id)),
+          cursorPosition && /* @__PURE__ */ jsxs59(
+            Typography32,
             {
               variant: "caption",
               sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, whiteSpace: "nowrap" },
@@ -10213,8 +10630,8 @@ var CodeEditorStatusBar = ({
               ]
             }
           ),
-          language && /* @__PURE__ */ jsx104(
-            Typography29,
+          language && /* @__PURE__ */ jsx107(
+            Typography32,
             {
               variant: "caption",
               sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, whiteSpace: "nowrap" },
@@ -10227,8 +10644,8 @@ var CodeEditorStatusBar = ({
   );
 };
 var StatusBarItemElement = ({ item }) => {
-  const inner = /* @__PURE__ */ jsx104(
-    Box36,
+  const inner = /* @__PURE__ */ jsx107(
+    Box40,
     {
       onClick: item.onClick,
       sx: {
@@ -10239,8 +10656,8 @@ var StatusBarItemElement = ({ item }) => {
         whiteSpace: "nowrap",
         "&:hover": item.onClick ? { opacity: 0.8 } : void 0
       },
-      children: typeof item.content === "string" ? /* @__PURE__ */ jsx104(
-        Typography29,
+      children: typeof item.content === "string" ? /* @__PURE__ */ jsx107(
+        Typography32,
         {
           variant: "caption",
           sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1 },
@@ -10250,20 +10667,20 @@ var StatusBarItemElement = ({ item }) => {
     }
   );
   if (item.tooltip) {
-    return /* @__PURE__ */ jsx104(Tooltip10, { title: item.tooltip, enterDelay: 400, children: inner });
+    return /* @__PURE__ */ jsx107(Tooltip10, { title: item.tooltip, enterDelay: 400, children: inner });
   }
   return inner;
 };
 
 // src/components/third-party/CodeEditorWorkspace/CodeEditorWelcomeScreen.tsx
-import { Box as Box37 } from "@mui/material";
-import { jsx as jsx105, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Box as Box41 } from "@mui/material";
+import { jsx as jsx108, jsxs as jsxs60 } from "react/jsx-runtime";
 var CodeEditorWelcomeScreen = ({
   logo,
   children,
   containerProps
 }) => {
-  const defaultLogo = /* @__PURE__ */ jsx105(
+  const defaultLogo = /* @__PURE__ */ jsx108(
     CereIcon,
     {
       sx: {
@@ -10273,8 +10690,8 @@ var CodeEditorWelcomeScreen = ({
       }
     }
   );
-  return /* @__PURE__ */ jsxs56(
-    Box37,
+  return /* @__PURE__ */ jsxs60(
+    Box41,
     {
       sx: {
         flex: 1,
@@ -10289,8 +10706,8 @@ var CodeEditorWelcomeScreen = ({
       ...containerProps,
       children: [
         logo !== void 0 ? logo : defaultLogo,
-        children && /* @__PURE__ */ jsx105(
-          Box37,
+        children && /* @__PURE__ */ jsx108(
+          Box41,
           {
             sx: {
               display: "flex",
@@ -10307,9 +10724,9 @@ var CodeEditorWelcomeScreen = ({
 };
 
 // src/components/third-party/CodeEditorWorkspace/CodeEditorWorkspace.tsx
-import React18 from "react";
-import { Box as Box38 } from "@mui/material";
-import { jsx as jsx106, jsxs as jsxs57 } from "react/jsx-runtime";
+import React19 from "react";
+import { Box as Box42 } from "@mui/material";
+import { jsx as jsx109, jsxs as jsxs61 } from "react/jsx-runtime";
 var CodeEditorWorkspace = ({
   files,
   initialOpenPaths,
@@ -10343,10 +10760,10 @@ var CodeEditorWorkspace = ({
     onFileChange,
     onValidationChange
   });
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     onWorkspaceReady?.(workspace);
   }, []);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (!onSave) return;
     const handleKeyDown = (e) => {
       if ((e.ctrlKey || e.metaKey) && e.key === "s") {
@@ -10374,7 +10791,7 @@ var CodeEditorWorkspace = ({
     onTabSelect: workspace.setActiveFile,
     onTabClose: workspace.closeFile
   };
-  const tabsElement = showTabs ? renderTabs ? renderTabs({ ...tabsProps, workspace }) : /* @__PURE__ */ jsx106(CodeEditorTabs, { ...tabsProps }) : null;
+  const tabsElement = showTabs ? renderTabs ? renderTabs({ ...tabsProps, workspace }) : /* @__PURE__ */ jsx109(CodeEditorTabs, { ...tabsProps }) : null;
   const fileTreeProps = {
     tree: fileTree ?? [],
     selectedPath: workspace.activeFilePath,
@@ -10382,7 +10799,7 @@ var CodeEditorWorkspace = ({
     defaultExpandedPaths,
     width: fileTreeWidth
   };
-  const fileTreeElement = hasFileTree ? renderFileTree ? renderFileTree({ ...fileTreeProps, workspace }) : /* @__PURE__ */ jsx106(CodeEditorFileTree, { ...fileTreeProps }) : null;
+  const fileTreeElement = hasFileTree ? renderFileTree ? renderFileTree({ ...fileTreeProps, workspace }) : /* @__PURE__ */ jsx109(CodeEditorFileTree, { ...fileTreeProps }) : null;
   const statusBarProps = {
     gitInfo,
     language: workspace.activeFile?.language,
@@ -10390,9 +10807,9 @@ var CodeEditorWorkspace = ({
     items: statusBarItems,
     onBranchClick
   };
-  const statusBarElement = showStatusBar ? renderStatusBar ? renderStatusBar({ ...statusBarProps, workspace }) : /* @__PURE__ */ jsx106(CodeEditorStatusBar, { ...statusBarProps }) : null;
-  const welcomeElement = renderWelcomeScreen ? renderWelcomeScreen(workspace) : welcomeScreen !== void 0 ? welcomeScreen : /* @__PURE__ */ jsx106(CodeEditorWelcomeScreen, { ...welcomeScreenProps });
-  const editorElement = renderEditor ? renderEditor(workspace) : workspace.activeFile ? /* @__PURE__ */ jsx106(
+  const statusBarElement = showStatusBar ? renderStatusBar ? renderStatusBar({ ...statusBarProps, workspace }) : /* @__PURE__ */ jsx109(CodeEditorStatusBar, { ...statusBarProps }) : null;
+  const welcomeElement = renderWelcomeScreen ? renderWelcomeScreen(workspace) : welcomeScreen !== void 0 ? welcomeScreen : /* @__PURE__ */ jsx109(CodeEditorWelcomeScreen, { ...welcomeScreenProps });
+  const editorElement = renderEditor ? renderEditor(workspace) : workspace.activeFile ? /* @__PURE__ */ jsx109(
     CodeEditor,
     {
       value: workspace.activeFile.value,
@@ -10411,8 +10828,8 @@ var CodeEditorWorkspace = ({
       ...editorProps
     }
   ) : welcomeElement;
-  return /* @__PURE__ */ jsxs57(
-    Box38,
+  return /* @__PURE__ */ jsxs61(
+    Box42,
     {
       sx: {
         display: "flex",
@@ -10426,9 +10843,9 @@ var CodeEditorWorkspace = ({
       ...containerProps,
       children: [
         fileTreeElement,
-        /* @__PURE__ */ jsxs57(Box38, { sx: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsxs61(Box42, { sx: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, overflow: "hidden" }, children: [
           tabsElement,
-          /* @__PURE__ */ jsx106(Box38, { sx: { flex: 1, overflow: "hidden" }, children: editorElement }),
+          /* @__PURE__ */ jsx109(Box42, { sx: { flex: 1, overflow: "hidden" }, children: editorElement }),
           statusBarElement
         ] })
       ]
@@ -10448,7 +10865,7 @@ export {
   BackgroundVariant2 as BackgroundVariant,
   Badge,
   BarTrackingIcon,
-  Box19 as Box,
+  Box23 as Box,
   Breadcrumbs,
   Button,
   ButtonGroup,
@@ -10457,6 +10874,8 @@ export {
   CardActions,
   CardContent,
   CardHeader,
+  CardMedia,
+  Carousel,
   CereIcon,
   ChartWidget,
   CheckMarkAnimation,
@@ -10479,6 +10898,7 @@ export {
   CopyChip,
   DateRangePicker,
   DecentralizedServerIcon,
+  DefinitionRow,
   DeploymentDashboardCard,
   DeploymentDashboardPanel,
   DeploymentDashboardTree,
@@ -10528,6 +10948,7 @@ export {
   OnboardingProvider,
   Pagination,
   Panel2 as Panel,
+  PanelDialog,
   Paper,
   PeriodSelect,
   Progress,
@@ -10567,7 +10988,7 @@ export {
   Toolbar,
   Tooltip7 as Tooltip,
   Truncate,
-  Typography17 as Typography,
+  Typography20 as Typography,
   UploadFileIcon,
   UploadFolderIcon,
   WORKFLOW_NODE_LABELS,
@@ -10592,6 +11013,7 @@ export {
   useIsMobile,
   useIsTablet,
   useOnboarding,
+  useSearchHotkeys,
   workflowConnectionColors,
   workflowNodeColors
 };