@cere/cere-design-system 0.0.4 → 0.0.5

package/dist/index.js

@@ -38,7 +38,7 @@ __export(index_exports, {
   Background: () => import_reactflow2.Background,
   BackgroundVariant: () => import_reactflow2.BackgroundVariant,
   Badge: () => Badge,
-  Box: () => import_material19.Box,
+  Box: () => import_material20.Box,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
@@ -52,10 +52,10 @@ __export(index_exports, {
   CodeEditor: () => CodeEditor,
   Collapse: () => Collapse,
   ConnectionLineType: () => import_reactflow2.ConnectionLineType,
-  Container: () => import_material21.Container,
+  Container: () => import_material22.Container,
   Controls: () => import_reactflow2.Controls,
   Dialog: () => Dialog,
-  Divider: () => Divider3,
+  Divider: () => Divider4,
   Drawer: () => Drawer2,
   Dropdown: () => Dropdown,
   EmptyState: () => EmptyState,
@@ -64,16 +64,16 @@ __export(index_exports, {
   FormControlLabel: () => import_material2.FormControlLabel,
   FormHelperText: () => import_material2.FormHelperText,
   FormLabel: () => import_material2.FormLabel,
-  Grid: () => import_material16.Grid,
+  Grid: () => import_material17.Grid,
   IconButton: () => IconButton,
   InputAdornment: () => import_material2.InputAdornment,
   InputLabel: () => import_material2.InputLabel,
   Link: () => Link3,
   List: () => List5,
   ListItem: () => ListItem3,
-  ListItemIcon: () => import_material14.ListItemIcon,
-  ListItemSecondaryAction: () => import_material14.ListItemSecondaryAction,
-  ListItemText: () => import_material14.ListItemText,
+  ListItemIcon: () => import_material15.ListItemIcon,
+  ListItemSecondaryAction: () => import_material15.ListItemSecondaryAction,
+  ListItemText: () => import_material15.ListItemText,
   Loading: () => Loading,
   LoadingButton: () => LoadingButton,
   Menu: () => Menu3,
@@ -91,7 +91,7 @@ __export(index_exports, {
   Sidebar: () => Sidebar,
   SidebarItem: () => SidebarItem,
   Snackbar: () => Snackbar,
-  Stack: () => import_material18.Stack,
+  Stack: () => import_material19.Stack,
   Step: () => Step,
   StepButton: () => StepButton,
   StepContent: () => StepContent,
@@ -104,9 +104,9 @@ __export(index_exports, {
   TextField: () => TextField,
   ToggleButton: () => ToggleButton,
   ToggleButtonGroup: () => ToggleButtonGroup,
-  Toolbar: () => import_material22.Toolbar,
+  Toolbar: () => import_material23.Toolbar,
   Tooltip: () => Tooltip2,
-  Typography: () => import_material20.Typography,
+  Typography: () => import_material21.Typography,
   WorkspaceSelectorButton: () => WorkspaceSelectorButton,
   colors: () => colors,
   theme: () => theme
@@ -872,6 +872,8 @@ var import_Unarchive = __toESM(require("@mui/icons-material/Unarchive"));
 var import_Search2 = __toESM(require("@mui/icons-material/Search"));
 var import_Add = __toESM(require("@mui/icons-material/Add"));
 var import_Check = __toESM(require("@mui/icons-material/Check"));
+var import_Settings = __toESM(require("@mui/icons-material/Settings"));
+var import_PersonAddAlt = __toESM(require("@mui/icons-material/PersonAddAlt"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var ServiceSelectorButton = ({
   services,
@@ -884,7 +886,9 @@ var ServiceSelectorButton = ({
   onServiceCreated,
   isManager = false,
   sx = {},
-  panelWidth = 350
+  panelWidth = 350,
+  onOpenSettings,
+  onOpenAddMember
 }) => {
   const [anchorEl, setAnchorEl] = (0, import_react.useState)(null);
   const [searchTerm, setSearchTerm] = (0, import_react.useState)("");
@@ -972,7 +976,9 @@ var ServiceSelectorButton = ({
           onSearchChange: setSearchTerm,
           showArchived,
           onToggleArchived: () => setShowArchived(!showArchived),
-          filteredServices
+          filteredServices,
+          onOpenSettings,
+          onOpenAddMember
         }
       )
     ] });
@@ -1098,7 +1104,9 @@ var ServiceSelectorButton = ({
         onSearchChange: setSearchTerm,
         showArchived,
         onToggleArchived: () => setShowArchived(!showArchived),
-        filteredServices
+        filteredServices,
+        onOpenSettings,
+        onOpenAddMember
       }
     )
   ] });
@@ -1120,7 +1128,9 @@ var ServiceSelectorPanel = ({
   onSearchChange: externalOnSearchChange,
   showArchived: externalShowArchived,
   onToggleArchived: externalOnToggleArchived,
-  filteredServices: externalFilteredServices
+  filteredServices: externalFilteredServices,
+  onOpenSettings,
+  onOpenAddMember
 }) => {
   const [internalSearchTerm, setInternalSearchTerm] = (0, import_react.useState)("");
   const [internalShowArchived, setInternalShowArchived] = (0, import_react.useState)(false);
@@ -1169,62 +1179,126 @@ var ServiceSelectorPanel = ({
         }
       },
       children: [
-        selectedService && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        selectedService && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           import_material7.Box,
           {
             sx: {
               paddingLeft: 2,
               paddingRight: 2,
-              paddingTop: 0.5,
+              paddingTop: 1.5,
+              paddingBottom: 1.5,
               borderBottom: 1,
               borderColor: "divider"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              import_material7.Box,
-              {
-                sx: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  mb: 1.5
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.Box, { sx: { display: "flex", alignItems: "center" }, children: [
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.Box, { sx: {
+                display: "flex",
+                alignItems: "center",
+                mb: 1.5
+              }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  import_material7.Avatar,
+                  {
+                    sx: {
+                      width: 32,
+                      height: 32,
+                      bgcolor: "primary.main",
+                      fontSize: "0.9rem",
+                      mr: 1.5
+                    },
+                    children: selectedService.name.charAt(0)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Box, { sx: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Typography, { variant: "subtitle1", sx: { fontWeight: 600, fontSize: "1rem" }, children: selectedService.name }),
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                    import_material7.Avatar,
+                    import_material7.Box,
                     {
                       sx: {
-                        width: 32,
-                        height: 32,
-                        bgcolor: "primary.main",
-                        fontSize: "0.9rem",
-                        mr: 1.5
+                        display: "inline-block",
+                        bgcolor: "rgba(0, 0, 0, 0.04)",
+                        color: "text.secondary",
+                        px: 1,
+                        py: 0.3,
+                        borderRadius: "12px",
+                        fontSize: "0.7rem",
+                        fontWeight: 500,
+                        lineHeight: 1
                       },
-                      children: selectedService.name.charAt(0)
+                      children: isManager ? "Manager" : "Viewer"
                     }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Typography, { variant: "subtitle1", sx: { fontWeight: 600, fontSize: "1rem" }, children: selectedService.name }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                      import_material7.Box,
-                      {
-                        sx: {
-                          display: "inline-block",
-                          bgcolor: "rgba(0, 0, 0, 0.04)",
-                          color: "text.secondary",
-                          px: 1,
-                          py: 0.3,
-                          borderRadius: "12px",
-                          fontSize: "0.7rem",
-                          fontWeight: 500,
-                          lineHeight: 1
-                        },
-                        children: isManager ? "Manager" : "Viewer"
+                  )
+                ] }) })
+              ] }),
+              (onOpenSettings || onOpenAddMember) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.Box, { sx: { display: "flex", gap: 1 }, children: [
+                onOpenAddMember && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  import_material7.Button,
+                  {
+                    startIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_PersonAddAlt.default, {}),
+                    variant: "outlined",
+                    size: "small",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onClose();
+                      onOpenAddMember(selectedServiceId || "");
+                    },
+                    disabled: !isManager,
+                    sx: {
+                      flex: 1,
+                      textTransform: "none",
+                      color: "text.secondary",
+                      fontSize: "0.8rem",
+                      py: 0.75,
+                      justifyContent: "flex-start",
+                      borderColor: "rgba(0, 0, 0, 0.12)",
+                      borderRadius: "6px",
+                      "&:hover": {
+                        borderColor: "rgba(0, 0, 0, 0.23)",
+                        backgroundColor: "rgba(0, 0, 0, 0.03)"
+                      },
+                      "&:disabled": {
+                        opacity: 0.5,
+                        cursor: "not-allowed"
                       }
-                    )
-                  ] }) })
-                ] })
-              }
-            )
+                    },
+                    children: "Add member"
+                  }
+                ),
+                onOpenSettings && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  import_material7.Button,
+                  {
+                    startIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Settings.default, {}),
+                    variant: "outlined",
+                    size: "small",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onClose();
+                      onOpenSettings(selectedServiceId || "");
+                    },
+                    disabled: !isManager,
+                    sx: {
+                      flex: 1,
+                      textTransform: "none",
+                      color: "text.secondary",
+                      fontSize: "0.8rem",
+                      py: 0.75,
+                      justifyContent: "flex-start",
+                      borderColor: "rgba(0, 0, 0, 0.12)",
+                      borderRadius: "6px",
+                      "&:hover": {
+                        borderColor: "rgba(0, 0, 0, 0.23)",
+                        backgroundColor: "rgba(0, 0, 0, 0.03)"
+                      },
+                      "&:disabled": {
+                        opacity: 0.5,
+                        cursor: "not-allowed"
+                      }
+                    },
+                    children: "Settings"
+                  }
+                )
+              ] })
+            ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.Box, { sx: { px: 2, pt: 2, pb: 1.5 }, children: [
@@ -2163,36 +2237,158 @@ var Dialog = ({
 // src/components/layout/Drawer.tsx
 var import_Drawer = __toESM(require("@mui/material/Drawer"));
 var import_styles17 = require("@mui/material/styles");
+var import_material14 = require("@mui/material");
+var import_Close2 = __toESM(require("@mui/icons-material/Close"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var StyledDrawer2 = (0, import_styles17.styled)(import_Drawer.default, {
-  shouldForwardProp: (prop) => prop !== "width" && prop !== "miniWidth" && prop !== "collapsed"
-})(({ theme: theme2, width = 240, miniWidth = 72, collapsed }) => ({
+  shouldForwardProp: (prop) => prop !== "width" && prop !== "miniWidth" && prop !== "collapsed" && prop !== "topOffset"
+})(({ theme: theme2, width = 240, miniWidth = 72, collapsed, topOffset = 0 }) => ({
   width: collapsed ? miniWidth : width,
   flexShrink: 0,
   "& .MuiDrawer-paper": {
     width: collapsed ? miniWidth : width,
     boxSizing: "border-box",
     boxShadow: "0px 2px 10px rgba(0, 0, 0, 0.05)",
-    transition: theme2.transitions.create("width", {
+    transition: theme2.transitions.create(["width", "top", "height"], {
       easing: theme2.transitions.easing.sharp,
       duration: theme2.transitions.duration.enteringScreen
     }),
-    overflow: collapsed ? "hidden" : "auto"
+    overflow: "visible",
+    // Let internal content handle scrolling
+    display: "flex",
+    flexDirection: "column",
+    top: `${topOffset}px !important`,
+    height: topOffset > 0 ? `calc(100% - ${topOffset}px) !important` : "100%",
+    zIndex: `${theme2.zIndex.modal} !important`
+    // Use modal zIndex to be above everything except AppBar (which is modal + 1)
   }
 }));
 var Drawer2 = ({
-  width = 240,
+  width,
   miniWidth = 72,
   collapsed = false,
+  title,
+  header,
+  showCloseButton,
+  tabs,
+  activeTab = 0,
+  onTabChange,
+  footer,
+  contentProps,
+  anchor = "right",
+  variant = "temporary",
+  topOffset = 0,
+  children,
+  onClose,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const defaultWidth = variant === "temporary" || variant === "persistent" ? 400 : 240;
+  const finalWidth = width ?? defaultWidth;
+  const shouldShowClose = showCloseButton ?? (variant === "temporary" || variant === "persistent");
+  const hasHeader = title || header || shouldShowClose || tabs;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     StyledDrawer2,
     {
-      width,
+      width: finalWidth,
       miniWidth,
       collapsed,
-      ...props
+      anchor,
+      variant,
+      topOffset,
+      onClose,
+      ModalProps: {
+        ...props.ModalProps,
+        style: {
+          zIndex: topOffset > 0 ? void 0 : void 0
+          // Let styled component handle zIndex
+        }
+      },
+      BackdropProps: {
+        ...props.BackdropProps,
+        style: {
+          backgroundColor: "rgba(0, 0, 0, 0.5)"
+        }
+      },
+      ...props,
+      children: [
+        hasHeader && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_material14.Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                p: 2,
+                minHeight: 64,
+                borderBottom: 1,
+                borderColor: "divider"
+              },
+              children: header || /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material14.Box, { sx: { flex: 1 }, children: typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material14.Typography, { variant: "h6", children: title }) : title }),
+                shouldShowClose && onClose && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_material14.IconButton,
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onClose(e, "backdropClick");
+                    },
+                    size: "small",
+                    sx: { ml: 1 },
+                    "aria-label": "close",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_Close2.default, {})
+                  }
+                )
+              ] })
+            }
+          ),
+          tabs && tabs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_material14.Tabs,
+            {
+              value: activeTab,
+              onChange: (_, newValue) => onTabChange?.(newValue),
+              variant: tabs.length > 4 ? "scrollable" : "standard",
+              scrollButtons: tabs.length > 4 ? "auto" : false,
+              sx: {
+                borderBottom: 1,
+                borderColor: "divider",
+                px: 2,
+                "& .MuiTabs-scrollableContainer": {
+                  overflow: "auto"
+                }
+              },
+              children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material14.Tab, { label: tab }, index))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_material14.Box,
+          {
+            sx: {
+              flex: 1,
+              overflow: "auto",
+              display: "flex",
+              flexDirection: "column"
+            },
+            ...contentProps,
+            children
+          }
+        ),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material14.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_material14.Box,
+            {
+              sx: {
+                p: 2,
+                borderTop: 1,
+                borderColor: "divider"
+              },
+              children: footer
+            }
+          )
+        ] })
+      ]
     }
   );
 };
@@ -2234,13 +2430,13 @@ var CardActions = (props) => {
 };
 
 // src/components/layout/List.tsx
-var import_material14 = require("@mui/material");
+var import_material15 = require("@mui/material");
 var import_styles19 = require("@mui/material/styles");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var List5 = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material14.List, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material15.List, { ...props });
 };
-var StyledListItem = (0, import_styles19.styled)(import_material14.ListItem, {
+var StyledListItem = (0, import_styles19.styled)(import_material15.ListItem, {
   shouldForwardProp: (prop) => prop !== "hoverable"
 })(({ hoverable = true }) => ({
   border: `1px solid ${colors.grey[200]}`,
@@ -2262,16 +2458,16 @@ var ListItem3 = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(StyledListItem, { hoverable, ...props, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material14.ListItemIcon, { children: icon }),
+    icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material15.ListItemIcon, { children: icon }),
     (primary || secondary) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-      import_material14.ListItemText,
+      import_material15.ListItemText,
       {
         primary,
         secondary
       }
     ),
     children,
-    action && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material14.ListItemSecondaryAction, { children: action })
+    action && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material15.ListItemSecondaryAction, { children: action })
   ] });
 };
 
@@ -2299,14 +2495,14 @@ var Avatar4 = ({ size = "medium", ...props }) => {
 };
 
 // src/components/layout/Table.tsx
-var import_material15 = require("@mui/material");
+var import_material16 = require("@mui/material");
 var import_styles21 = require("@mui/material/styles");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var StyledTableContainer = (0, import_styles21.styled)(import_material15.TableContainer)({
+var StyledTableContainer = (0, import_styles21.styled)(import_material16.TableContainer)({
   borderRadius: 8,
   border: `1px solid ${colors.grey[200]}`
 });
-var StyledTableHead = (0, import_styles21.styled)(import_material15.TableHead)({
+var StyledTableHead = (0, import_styles21.styled)(import_material16.TableHead)({
   backgroundColor: colors.grey[50],
   "& .MuiTableCell-head": {
     fontWeight: 600,
@@ -2314,7 +2510,7 @@ var StyledTableHead = (0, import_styles21.styled)(import_material15.TableHead)({
   }
 });
 var Table = ({ stickyHeader = false, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledTableContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material15.Table, { stickyHeader, ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledTableContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material16.Table, { stickyHeader, ...props, children }) });
 };
 var TableHeader = ({
   columns,
@@ -2322,8 +2518,8 @@ var TableHeader = ({
   order = "asc",
   onSort
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledTableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material15.TableRow, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material15.TableCell, { align: column.align || "left", children: column.sortable && onSort ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_material15.TableSortLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledTableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material16.TableRow, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material16.TableCell, { align: column.align || "left", children: column.sortable && onSort ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_material16.TableSortLabel,
     {
       active: orderBy === column.id,
       direction: orderBy === column.id ? order : "asc",
@@ -2334,7 +2530,7 @@ var TableHeader = ({
 };
 
 // src/components/layout/Grid.tsx
-var import_material16 = require("@mui/material");
+var import_material17 = require("@mui/material");
 
 // src/components/layout/Breadcrumbs.tsx
 var import_Breadcrumbs = __toESM(require("@mui/material/Breadcrumbs"));
@@ -2381,11 +2577,11 @@ var Breadcrumbs = ({ items, ...props }) => {
 };
 
 // src/components/layout/Accordion.tsx
-var import_material17 = require("@mui/material");
+var import_material18 = require("@mui/material");
 var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"));
 var import_styles23 = require("@mui/material/styles");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var StyledAccordion = (0, import_styles23.styled)(import_material17.Accordion)({
+var StyledAccordion = (0, import_styles23.styled)(import_material18.Accordion)({
   borderRadius: 8,
   boxShadow: "none",
   border: `1px solid ${colors.grey[200]}`,
@@ -2396,7 +2592,7 @@ var StyledAccordion = (0, import_styles23.styled)(import_material17.Accordion)({
     margin: 0
   }
 });
-var StyledAccordionSummary = (0, import_styles23.styled)(import_material17.AccordionSummary)({
+var StyledAccordionSummary = (0, import_styles23.styled)(import_material18.AccordionSummary)({
   backgroundColor: colors.grey[50],
   borderRadius: "8px 8px 0 0",
   "&.Mui-expanded": {
@@ -2406,7 +2602,7 @@ var StyledAccordionSummary = (0, import_styles23.styled)(import_material17.Accor
     margin: "12px 0"
   }
 });
-var StyledAccordionDetails = (0, import_styles23.styled)(import_material17.AccordionDetails)({
+var StyledAccordionDetails = (0, import_styles23.styled)(import_material18.AccordionDetails)({
   padding: "16px"
 });
 var Accordion = ({
@@ -2446,27 +2642,27 @@ var import_jsx_runtime35 = require("react/jsx-runtime");
 var StyledDivider = (0, import_styles25.styled)(import_Divider.default)({
   borderColor: colors.grey[200]
 });
-var Divider3 = ({ ...props }) => {
+var Divider4 = ({ ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledDivider, { ...props });
 };
 
 // src/components/layout/Stack.tsx
-var import_material18 = require("@mui/material");
+var import_material19 = require("@mui/material");
 
 // src/components/layout/Box.tsx
-var import_material19 = require("@mui/material");
+var import_material20 = require("@mui/material");
 
 // src/components/layout/Typography.tsx
-var import_material20 = require("@mui/material");
+var import_material21 = require("@mui/material");
 
 // src/components/layout/Container.tsx
-var import_material21 = require("@mui/material");
+var import_material22 = require("@mui/material");
 
 // src/components/layout/AppBar.tsx
-var import_material22 = require("@mui/material");
+var import_material23 = require("@mui/material");
 var import_styles26 = require("@mui/material/styles");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var StyledAppBar = (0, import_styles26.styled)(import_material22.AppBar, {
+var StyledAppBar = (0, import_styles26.styled)(import_material23.AppBar, {
   shouldForwardProp: (prop) => prop !== "appBarHeight"
 })(({ appBarHeight = 64 }) => ({
   backgroundColor: colors.background.paper,
@@ -2475,7 +2671,7 @@ var StyledAppBar = (0, import_styles26.styled)(import_material22.AppBar, {
   height: appBarHeight,
   zIndex: 1300
 }));
-var StyledToolbar = (0, import_styles26.styled)(import_material22.Toolbar)(({ theme: theme2 }) => ({
+var StyledToolbar = (0, import_styles26.styled)(import_material23.Toolbar)(({ theme: theme2 }) => ({
   height: "100%",
   paddingLeft: theme2.spacing(2),
   paddingRight: theme2.spacing(2),
@@ -2486,15 +2682,16 @@ var AppBar = ({ height = 64, children, ...props }) => {
 };
 
 // src/components/layout/Collapse.tsx
-var import_material23 = require("@mui/material");
+var import_material24 = require("@mui/material");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var Collapse = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material23.Collapse, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material24.Collapse, { ...props });
 };
 
 // src/components/feedback/Alert.tsx
+var import_react4 = __toESM(require("react"));
 var import_Alert = __toESM(require("@mui/material/Alert"));
-var import_material24 = require("@mui/material");
+var import_material25 = require("@mui/material");
 var import_Snackbar = __toESM(require("@mui/material/Snackbar"));
 var import_styles27 = require("@mui/material/styles");
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -2511,7 +2708,7 @@ var Alert = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(StyledAlert, { severity, ...props, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material24.AlertTitle, { children: title }),
+    title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material25.AlertTitle, { children: title }),
     children
   ] });
 };
@@ -2527,10 +2724,16 @@ var Snackbar = ({
   autoHideDuration = 6e3,
   ...props
 }) => {
+  const handleClose = (_event, reason) => {
+    if (reason === "clickaway" && onClose) {
+      return;
+    }
+    onClose?.();
+  };
   const content = children || (message ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Alert,
     {
-      onClose,
+      onClose: onClose ? handleClose : void 0,
       severity,
       variant,
       title,
@@ -2541,12 +2744,31 @@ var Snackbar = ({
   if (!content) {
     return null;
   }
+  const NoTransition = import_react4.default.forwardRef(
+    (props2, ref) => {
+      return import_react4.default.cloneElement(props2.children, {
+        ref,
+        style: {
+          ...props2.children.props.style,
+          transition: "opacity 0.3s ease-in-out"
+        }
+      });
+    }
+  );
+  NoTransition.displayName = "NoTransition";
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     StyledSnackbar,
     {
       anchorOrigin,
       autoHideDuration,
-      onClose,
+      onClose: handleClose,
+      disableWindowBlurListener: true,
+      ClickAwayListenerProps: {
+        onClickAway: () => {
+        }
+        // Prevent scroll issues
+      },
+      TransitionComponent: NoTransition,
       ...props,
       children: content
     }
@@ -2554,7 +2776,7 @@ var Snackbar = ({
 };
 
 // src/components/feedback/EmptyState.tsx
-var import_material25 = require("@mui/material");
+var import_material26 = require("@mui/material");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var EmptyState = ({
   title = "No items found",
@@ -2563,7 +2785,7 @@ var EmptyState = ({
   action
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-    import_material25.Box,
+    import_material26.Box,
     {
       sx: {
         display: "flex",
@@ -2576,7 +2798,7 @@ var EmptyState = ({
       },
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          import_material25.Box,
+          import_material26.Box,
           {
             sx: {
               color: colors.text.secondary,
@@ -2586,16 +2808,16 @@ var EmptyState = ({
             children: icon
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material25.Typography, { variant: "h6", sx: { marginBottom: 1, color: colors.text.primary }, children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material25.Typography, { variant: "body2", sx: { color: colors.text.secondary, marginBottom: 3 }, children: description }),
-        action && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material25.Box, { children: action })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material26.Typography, { variant: "h6", sx: { marginBottom: 1, color: colors.text.primary }, children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material26.Typography, { variant: "body2", sx: { color: colors.text.secondary, marginBottom: 3 }, children: description }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material26.Box, { children: action })
       ]
     }
   );
 };
 
 // src/components/feedback/Loading.tsx
-var import_material26 = require("@mui/material");
+var import_material27 = require("@mui/material");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var Loading = ({
   message = "Loading...",
@@ -2603,7 +2825,7 @@ var Loading = ({
   fullScreen = false
 }) => {
   const content = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-    import_material26.Box,
+    import_material27.Box,
     {
       sx: {
         display: "flex",
@@ -2625,8 +2847,8 @@ var Loading = ({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material26.CircularProgress, { size, thickness: 4 }),
-        message && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material26.Typography, { variant: "body2", color: "text.secondary", children: message })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material27.CircularProgress, { size, thickness: 4 }),
+        message && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material27.Typography, { variant: "body2", color: "text.secondary", children: message })
       ]
     }
   );
@@ -2634,7 +2856,7 @@ var Loading = ({
 };
 
 // src/components/feedback/AppLoading.tsx
-var import_material27 = require("@mui/material");
+var import_material28 = require("@mui/material");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var AppLoading = ({
   message = "Loading...",
@@ -2642,7 +2864,7 @@ var AppLoading = ({
   sx = {}
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-    import_material27.Box,
+    import_material28.Box,
     {
       sx: {
         display: "flex",
@@ -2661,7 +2883,7 @@ var AppLoading = ({
       },
       children: [
         logo && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          import_material27.Box,
+          import_material28.Box,
           {
             component: "img",
             src: logo,
@@ -2673,28 +2895,28 @@ var AppLoading = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material27.CircularProgress, { size: 40, thickness: 4, sx: { mb: 2 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material27.Typography, { variant: "body1", color: "text.secondary", children: message })
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material28.CircularProgress, { size: 40, thickness: 4, sx: { mb: 2 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material28.Typography, { variant: "body1", color: "text.secondary", children: message })
       ]
     }
   );
 };
 
 // src/components/feedback/CircularProgress.tsx
-var import_material28 = require("@mui/material");
+var import_material29 = require("@mui/material");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var CircularProgress6 = ({
   size = 40,
   thickness = 4,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_material28.CircularProgress, { size, thickness, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_material29.CircularProgress, { size, thickness, ...props });
 };
 
 // src/components/third-party/FlowEditor.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_reactflow = __toESM(require("reactflow"));
-var import_material29 = require("@mui/material");
+var import_material30 = require("@mui/material");
 var import_styles28 = require("@mui/material/styles");
 var import_reactflow2 = require("reactflow");
 var import_jsx_runtime43 = require("react/jsx-runtime");
@@ -2715,7 +2937,7 @@ var FlowEditor = ({
   ...reactFlowProps
 }) => {
   const theme2 = (0, import_styles28.useTheme)();
-  const handleInit = (0, import_react4.useCallback)(
+  const handleInit = (0, import_react5.useCallback)(
     (instance) => {
       if (onInit) {
         onInit(instance);
@@ -2724,7 +2946,7 @@ var FlowEditor = ({
     [onInit]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_reactflow.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_material29.Box,
+    import_material30.Box,
     {
       sx: {
         width: "100%",
@@ -2791,9 +3013,9 @@ var FlowEditor = ({
 };
 
 // src/components/third-party/CodeEditor.tsx
-var import_react5 = require("react");
-var import_react6 = __toESM(require("@monaco-editor/react"));
-var import_material30 = require("@mui/material");
+var import_react6 = require("react");
+var import_react7 = __toESM(require("@monaco-editor/react"));
+var import_material31 = require("@mui/material");
 var import_Fullscreen = __toESM(require("@mui/icons-material/Fullscreen"));
 var import_FullscreenExit = __toESM(require("@mui/icons-material/FullscreenExit"));
 var import_jsx_runtime44 = require("react/jsx-runtime");
@@ -2840,32 +3062,32 @@ var CodeEditor = ({
   containerProps,
   typeDefinitions
 }) => {
-  const [isEditorReady, setIsEditorReady] = (0, import_react5.useState)(false);
-  const [validationErrors, setValidationErrors] = (0, import_react5.useState)([]);
-  const [isFullscreen, setIsFullscreen] = (0, import_react5.useState)(false);
-  const [tsCode, setTsCode] = (0, import_react5.useState)(value);
-  const [actualHeight, setActualHeight] = (0, import_react5.useState)(
+  const [isEditorReady, setIsEditorReady] = (0, import_react6.useState)(false);
+  const [validationErrors, setValidationErrors] = (0, import_react6.useState)([]);
+  const [isFullscreen, setIsFullscreen] = (0, import_react6.useState)(false);
+  const [tsCode, setTsCode] = (0, import_react6.useState)(value);
+  const [actualHeight, setActualHeight] = (0, import_react6.useState)(
     typeof height === "number" ? `${height}px` : height
   );
-  const internalEditorRef = (0, import_react5.useRef)(null);
-  const internalMonacoRef = (0, import_react5.useRef)(null);
+  const internalEditorRef = (0, import_react6.useRef)(null);
+  const internalMonacoRef = (0, import_react6.useRef)(null);
   const finalEditorRef = editorRef || internalEditorRef;
   const finalMonacoRef = monacoRef || internalMonacoRef;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (isFullscreen) {
       setActualHeight("100vh");
     } else {
       setActualHeight(typeof height === "number" ? `${height}px` : height);
     }
   }, [height, isFullscreen]);
-  const toggleFullscreen = (0, import_react5.useCallback)(() => {
+  const toggleFullscreen = (0, import_react6.useCallback)(() => {
     const newFullscreenState = !isFullscreen;
     setIsFullscreen(newFullscreenState);
     if (onFullscreenChange) {
       onFullscreenChange(newFullscreenState);
     }
   }, [isFullscreen, onFullscreenChange]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!isFullscreen) return;
     function escapeHandler(event) {
       if (event.key === "Escape") {
@@ -2882,7 +3104,7 @@ var CodeEditor = ({
       window.removeEventListener("keydown", escapeHandler, { capture: true });
     };
   }, [isFullscreen, onFullscreenChange]);
-  const handleEditorDidMount = (0, import_react5.useCallback)(
+  const handleEditorDidMount = (0, import_react6.useCallback)(
     (editor, monaco) => {
       console.log("CodeEditor: onMount called", { editor: !!editor, monaco: !!monaco });
       try {
@@ -2936,7 +3158,7 @@ var CodeEditor = ({
     },
     [isFullscreen, onFullscreenChange, onValidate, onMount, finalEditorRef, finalMonacoRef]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!isEditorReady || !finalMonacoRef?.current || !typeDefinitions) return;
     const monaco = finalMonacoRef.current;
     const definitions = Array.isArray(typeDefinitions) ? typeDefinitions : [typeDefinitions];
@@ -2958,7 +3180,7 @@ var CodeEditor = ({
     setTsCode(valueStr);
     onChange(valueStr);
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (value !== tsCode) {
       setTsCode(value);
       if (isEditorReady && finalEditorRef?.current) {
@@ -2984,7 +3206,7 @@ var CodeEditor = ({
     ...options
   };
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    import_material30.Box,
+    import_material31.Box,
     {
       sx: {
         display: "flex",
@@ -3001,7 +3223,7 @@ var CodeEditor = ({
         p: isFullscreen ? 2 : 0
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-        import_material30.Box,
+        import_material31.Box,
         {
           sx: {
             flex: 1,
@@ -3016,8 +3238,8 @@ var CodeEditor = ({
           },
           ...containerProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material30.Tooltip, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-              import_material30.IconButton,
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material31.Tooltip, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              import_material31.IconButton,
               {
                 onClick: toggleFullscreen,
                 size: "small",
@@ -3036,7 +3258,7 @@ var CodeEditor = ({
               }
             ) }),
             /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-              import_material30.Box,
+              import_material31.Box,
               {
                 sx: {
                   flex: 1,
@@ -3046,7 +3268,7 @@ var CodeEditor = ({
                   position: "relative"
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                  import_react6.default,
+                  import_react7.default,
                   {
                     height: actualHeight,
                     defaultLanguage: language,
@@ -3056,7 +3278,7 @@ var CodeEditor = ({
                     onMount: handleEditorDidMount,
                     theme: themeProp || "vs",
                     options: defaultOptions,
-                    loading: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material30.Box, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
+                    loading: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material31.Box, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
                     beforeMount: (monaco) => {
                       console.log("CodeEditor: beforeMount called", { monaco: !!monaco });
                     }
@@ -3065,7 +3287,7 @@ var CodeEditor = ({
               }
             ),
             validationErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-              import_material30.Alert,
+              import_material31.Alert,
               {
                 severity: "error",
                 sx: {
@@ -3082,15 +3304,15 @@ var CodeEditor = ({
                   overflow: "auto"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material30.Box, { sx: { mb: 1, fontWeight: 600 }, children: "Please fix the following errors:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material30.Box, { component: "ul", sx: { m: 0, pl: 2 }, children: [
-                    validationErrors.slice(0, 3).map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material30.Box, { component: "li", sx: { fontSize: "0.85rem" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material31.Box, { sx: { mb: 1, fontWeight: 600 }, children: "Please fix the following errors:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material31.Box, { component: "ul", sx: { m: 0, pl: 2 }, children: [
+                    validationErrors.slice(0, 3).map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material31.Box, { component: "li", sx: { fontSize: "0.85rem" }, children: [
                       "Line ",
                       error.startLineNumber,
                       ": ",
                       error.message
                     ] }, index)),
-                    validationErrors.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material30.Box, { component: "li", sx: { fontSize: "0.85rem" }, children: [
+                    validationErrors.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material31.Box, { component: "li", sx: { fontSize: "0.85rem" }, children: [
                       validationErrors.length - 3,
                       " more error",
                       validationErrors.length - 3 > 1 ? "s" : "",