@cere/cere-design-system 0.0.4 → 0.0.6

package/dist/index.mjs

@@ -800,6 +800,8 @@ import UnarchiveIcon from "@mui/icons-material/Unarchive";
 import SearchIcon2 from "@mui/icons-material/Search";
 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, jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 var ServiceSelectorButton = ({
   services,
@@ -812,7 +814,9 @@ var ServiceSelectorButton = ({
   onServiceCreated,
   isManager = false,
   sx = {},
-  panelWidth = 350
+  panelWidth = 350,
+  onOpenSettings,
+  onOpenAddMember
 }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [searchTerm, setSearchTerm] = useState("");
@@ -900,7 +904,9 @@ var ServiceSelectorButton = ({
           onSearchChange: setSearchTerm,
           showArchived,
           onToggleArchived: () => setShowArchived(!showArchived),
-          filteredServices
+          filteredServices,
+          onOpenSettings,
+          onOpenAddMember
         }
       )
     ] });
@@ -1026,7 +1032,9 @@ var ServiceSelectorButton = ({
         onSearchChange: setSearchTerm,
         showArchived,
         onToggleArchived: () => setShowArchived(!showArchived),
-        filteredServices
+        filteredServices,
+        onOpenSettings,
+        onOpenAddMember
       }
     )
   ] });
@@ -1048,7 +1056,9 @@ var ServiceSelectorPanel = ({
   onSearchChange: externalOnSearchChange,
   showArchived: externalShowArchived,
   onToggleArchived: externalOnToggleArchived,
-  filteredServices: externalFilteredServices
+  filteredServices: externalFilteredServices,
+  onOpenSettings,
+  onOpenAddMember
 }) => {
   const [internalSearchTerm, setInternalSearchTerm] = useState("");
   const [internalShowArchived, setInternalShowArchived] = useState(false);
@@ -1097,62 +1107,126 @@ var ServiceSelectorPanel = ({
         }
       },
       children: [
-        selectedService && /* @__PURE__ */ jsx14(
+        selectedService && /* @__PURE__ */ jsxs4(
           Box2,
           {
             sx: {
               paddingLeft: 2,
               paddingRight: 2,
-              paddingTop: 0.5,
+              paddingTop: 1.5,
+              paddingBottom: 1.5,
               borderBottom: 1,
               borderColor: "divider"
             },
-            children: /* @__PURE__ */ jsx14(
-              Box2,
-              {
-                sx: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  mb: 1.5
-                },
-                children: /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", alignItems: "center" }, children: [
+            children: [
+              /* @__PURE__ */ jsxs4(Box2, { sx: {
+                display: "flex",
+                alignItems: "center",
+                mb: 1.5
+              }, children: [
+                /* @__PURE__ */ jsx14(
+                  Avatar,
+                  {
+                    sx: {
+                      width: 32,
+                      height: 32,
+                      bgcolor: "primary.main",
+                      fontSize: "0.9rem",
+                      mr: 1.5
+                    },
+                    children: selectedService.name.charAt(0)
+                  }
+                ),
+                /* @__PURE__ */ jsx14(Box2, { sx: { flex: 1 }, children: /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  /* @__PURE__ */ jsx14(Typography, { variant: "subtitle1", sx: { fontWeight: 600, fontSize: "1rem" }, children: selectedService.name }),
                   /* @__PURE__ */ jsx14(
-                    Avatar,
+                    Box2,
                     {
                       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__ */ jsx14(Box2, { children: /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                    /* @__PURE__ */ jsx14(Typography, { variant: "subtitle1", sx: { fontWeight: 600, fontSize: "1rem" }, children: selectedService.name }),
-                    /* @__PURE__ */ jsx14(
-                      Box2,
-                      {
-                        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__ */ jsxs4(Box2, { sx: { display: "flex", gap: 1 }, children: [
+                onOpenAddMember && /* @__PURE__ */ jsx14(
+                  Button2,
+                  {
+                    startIcon: /* @__PURE__ */ jsx14(PersonAddAltIcon, {}),
+                    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__ */ jsx14(
+                  Button2,
+                  {
+                    startIcon: /* @__PURE__ */ jsx14(SettingsIcon, {}),
+                    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__ */ jsxs4(Box2, { sx: { px: 2, pt: 2, pb: 1.5 }, children: [
@@ -2143,36 +2217,158 @@ var Dialog = ({
 // src/components/layout/Drawer.tsx
 import MuiDrawer from "@mui/material/Drawer";
 import { styled as styled19 } from "@mui/material/styles";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { Box as Box6, IconButton as IconButton5, Typography as Typography5, Divider as Divider3, Tabs, Tab as Tab2 } from "@mui/material";
+import CloseIcon2 from "@mui/icons-material/Close";
+import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
 var StyledDrawer2 = styled19(MuiDrawer, {
-  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__ */ jsx27(
+  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__ */ jsxs9(
     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__ */ jsxs9(Fragment6, { children: [
+          /* @__PURE__ */ jsx27(
+            Box6,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                p: 2,
+                minHeight: 64,
+                borderBottom: 1,
+                borderColor: "divider"
+              },
+              children: header || /* @__PURE__ */ jsxs9(Fragment6, { children: [
+                /* @__PURE__ */ jsx27(Box6, { sx: { flex: 1 }, children: typeof title === "string" ? /* @__PURE__ */ jsx27(Typography5, { variant: "h6", children: title }) : title }),
+                shouldShowClose && onClose && /* @__PURE__ */ jsx27(
+                  IconButton5,
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onClose(e, "backdropClick");
+                    },
+                    size: "small",
+                    sx: { ml: 1 },
+                    "aria-label": "close",
+                    children: /* @__PURE__ */ jsx27(CloseIcon2, {})
+                  }
+                )
+              ] })
+            }
+          ),
+          tabs && tabs.length > 0 && /* @__PURE__ */ jsx27(
+            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__ */ jsx27(Tab2, { label: tab }, index))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx27(
+          Box6,
+          {
+            sx: {
+              flex: 1,
+              overflow: "auto",
+              display: "flex",
+              flexDirection: "column"
+            },
+            ...contentProps,
+            children
+          }
+        ),
+        footer && /* @__PURE__ */ jsxs9(Fragment6, { children: [
+          /* @__PURE__ */ jsx27(Divider3, {}),
+          /* @__PURE__ */ jsx27(
+            Box6,
+            {
+              sx: {
+                p: 2,
+                borderTop: 1,
+                borderColor: "divider"
+              },
+              children: footer
+            }
+          )
+        ] })
+      ]
     }
   );
 };
@@ -2222,7 +2418,7 @@ import {
   ListItemSecondaryAction
 } from "@mui/material";
 import { styled as styled21 } from "@mui/material/styles";
-import { jsx as jsx29, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs10 } from "react/jsx-runtime";
 var List5 = (props) => {
   return /* @__PURE__ */ jsx29(MuiList, { ...props });
 };
@@ -2247,7 +2443,7 @@ var ListItem3 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs9(StyledListItem, { hoverable, ...props, children: [
+  return /* @__PURE__ */ jsxs10(StyledListItem, { hoverable, ...props, children: [
     icon && /* @__PURE__ */ jsx29(ListItemIcon3, { children: icon }),
     (primary || secondary) && /* @__PURE__ */ jsx29(
       ListItemText6,
@@ -2333,7 +2529,7 @@ import { Grid } from "@mui/material";
 // src/components/layout/Breadcrumbs.tsx
 import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
 import Link4 from "@mui/material/Link";
-import Typography5 from "@mui/material/Typography";
+import Typography6 from "@mui/material/Typography";
 import { styled as styled24 } from "@mui/material/styles";
 import { jsx as jsx32 } from "react/jsx-runtime";
 var StyledBreadcrumbs = styled24(MuiBreadcrumbs)({
@@ -2355,7 +2551,7 @@ var Breadcrumbs = ({ items, ...props }) => {
   return /* @__PURE__ */ jsx32(StyledBreadcrumbs, { ...props, children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     if (isLast || !item.href && !item.onClick) {
-      return /* @__PURE__ */ jsx32(Typography5, { color: "text.primary", children: item.label }, index);
+      return /* @__PURE__ */ jsx32(Typography6, { color: "text.primary", children: item.label }, index);
     }
     return /* @__PURE__ */ jsx32(
       StyledLink2,
@@ -2382,7 +2578,7 @@ import {
 } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { styled as styled25 } from "@mui/material/styles";
-import { jsx as jsx33, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs11 } from "react/jsx-runtime";
 var StyledAccordion = styled25(MuiAccordion)({
   borderRadius: 8,
   boxShadow: "none",
@@ -2413,7 +2609,7 @@ var Accordion = ({
   defaultExpanded = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs10(StyledAccordion, { defaultExpanded, ...props, children: [
+  return /* @__PURE__ */ jsxs11(StyledAccordion, { defaultExpanded, ...props, children: [
     /* @__PURE__ */ jsx33(StyledAccordionSummary, { expandIcon: /* @__PURE__ */ jsx33(ExpandMoreIcon, {}), children: title }),
     /* @__PURE__ */ jsx33(StyledAccordionDetails, { children })
   ] });
@@ -2444,7 +2640,7 @@ import { jsx as jsx35 } from "react/jsx-runtime";
 var StyledDivider = styled27(MuiDivider)({
   borderColor: colors.grey[200]
 });
-var Divider3 = ({ ...props }) => {
+var Divider4 = ({ ...props }) => {
   return /* @__PURE__ */ jsx35(StyledDivider, { ...props });
 };
 
@@ -2452,10 +2648,10 @@ var Divider3 = ({ ...props }) => {
 import { Stack } from "@mui/material";
 
 // src/components/layout/Box.tsx
-import { Box as Box6 } from "@mui/material";
+import { Box as Box7 } from "@mui/material";
 
 // src/components/layout/Typography.tsx
-import { Typography as Typography6 } from "@mui/material";
+import { Typography as Typography7 } from "@mui/material";
 
 // src/components/layout/Container.tsx
 import { Container } from "@mui/material";
@@ -2496,11 +2692,12 @@ var Collapse = (props) => {
 };
 
 // src/components/feedback/Alert.tsx
+import React4 from "react";
 import MuiAlert from "@mui/material/Alert";
 import { AlertTitle as MuiAlertTitle } from "@mui/material";
 import MuiSnackbar from "@mui/material/Snackbar";
 import { styled as styled29 } from "@mui/material/styles";
-import { jsx as jsx38, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs12 } from "react/jsx-runtime";
 var StyledAlert = styled29(MuiAlert)({
   borderRadius: 8,
   "&.MuiAlert-filled": {
@@ -2513,7 +2710,7 @@ var Alert = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs11(StyledAlert, { severity, ...props, children: [
+  return /* @__PURE__ */ jsxs12(StyledAlert, { severity, ...props, children: [
     title && /* @__PURE__ */ jsx38(MuiAlertTitle, { children: title }),
     children
   ] });
@@ -2530,10 +2727,16 @@ var Snackbar = ({
   autoHideDuration = 6e3,
   ...props
 }) => {
+  const handleClose = (_event, reason) => {
+    if (reason === "clickaway" && onClose) {
+      return;
+    }
+    onClose?.();
+  };
   const content = children || (message ? /* @__PURE__ */ jsx38(
     Alert,
     {
-      onClose,
+      onClose: onClose ? handleClose : void 0,
       severity,
       variant,
       title,
@@ -2544,12 +2747,31 @@ var Snackbar = ({
   if (!content) {
     return null;
   }
+  const NoTransition = React4.forwardRef(
+    (props2, ref) => {
+      return React4.cloneElement(props2.children, {
+        ref,
+        style: {
+          ...props2.children.props.style,
+          transition: "opacity 0.3s ease-in-out"
+        }
+      });
+    }
+  );
+  NoTransition.displayName = "NoTransition";
   return /* @__PURE__ */ jsx38(
     StyledSnackbar,
     {
       anchorOrigin,
       autoHideDuration,
-      onClose,
+      onClose: handleClose,
+      disableWindowBlurListener: true,
+      ClickAwayListenerProps: {
+        onClickAway: () => {
+        }
+        // Prevent scroll issues
+      },
+      TransitionComponent: NoTransition,
       ...props,
       children: content
     }
@@ -2557,16 +2779,16 @@ var Snackbar = ({
 };
 
 // src/components/feedback/EmptyState.tsx
-import { Box as Box7, Typography as Typography7 } from "@mui/material";
-import { jsx as jsx39, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Box as Box8, Typography as Typography8 } from "@mui/material";
+import { jsx as jsx39, jsxs as jsxs13 } from "react/jsx-runtime";
 var EmptyState = ({
   title = "No items found",
   description,
   icon,
   action
 }) => {
-  return /* @__PURE__ */ jsxs12(
-    Box7,
+  return /* @__PURE__ */ jsxs13(
+    Box8,
     {
       sx: {
         display: "flex",
@@ -2579,7 +2801,7 @@ var EmptyState = ({
       },
       children: [
         icon && /* @__PURE__ */ jsx39(
-          Box7,
+          Box8,
           {
             sx: {
               color: colors.text.secondary,
@@ -2589,24 +2811,24 @@ var EmptyState = ({
             children: icon
           }
         ),
-        /* @__PURE__ */ jsx39(Typography7, { variant: "h6", sx: { marginBottom: 1, color: colors.text.primary }, children: title }),
-        description && /* @__PURE__ */ jsx39(Typography7, { variant: "body2", sx: { color: colors.text.secondary, marginBottom: 3 }, children: description }),
-        action && /* @__PURE__ */ jsx39(Box7, { children: action })
+        /* @__PURE__ */ jsx39(Typography8, { variant: "h6", sx: { marginBottom: 1, color: colors.text.primary }, children: title }),
+        description && /* @__PURE__ */ jsx39(Typography8, { variant: "body2", sx: { color: colors.text.secondary, marginBottom: 3 }, children: description }),
+        action && /* @__PURE__ */ jsx39(Box8, { children: action })
       ]
     }
   );
 };
 
 // src/components/feedback/Loading.tsx
-import { Box as Box8, CircularProgress as CircularProgress4, Typography as Typography8 } from "@mui/material";
-import { jsx as jsx40, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Box as Box9, CircularProgress as CircularProgress4, Typography as Typography9 } from "@mui/material";
+import { jsx as jsx40, jsxs as jsxs14 } from "react/jsx-runtime";
 var Loading = ({
   message = "Loading...",
   size = 40,
   fullScreen = false
 }) => {
-  const content = /* @__PURE__ */ jsxs13(
-    Box8,
+  const content = /* @__PURE__ */ jsxs14(
+    Box9,
     {
       sx: {
         display: "flex",
@@ -2629,7 +2851,7 @@ var Loading = ({
       },
       children: [
         /* @__PURE__ */ jsx40(CircularProgress4, { size, thickness: 4 }),
-        message && /* @__PURE__ */ jsx40(Typography8, { variant: "body2", color: "text.secondary", children: message })
+        message && /* @__PURE__ */ jsx40(Typography9, { variant: "body2", color: "text.secondary", children: message })
       ]
     }
   );
@@ -2637,15 +2859,15 @@ var Loading = ({
 };
 
 // src/components/feedback/AppLoading.tsx
-import { Box as Box9, CircularProgress as CircularProgress5, Typography as Typography9 } from "@mui/material";
-import { jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Box as Box10, CircularProgress as CircularProgress5, Typography as Typography10 } from "@mui/material";
+import { jsx as jsx41, jsxs as jsxs15 } from "react/jsx-runtime";
 var AppLoading = ({
   message = "Loading...",
   logo = "/icons/logo.png",
   sx = {}
 }) => {
-  return /* @__PURE__ */ jsxs14(
-    Box9,
+  return /* @__PURE__ */ jsxs15(
+    Box10,
     {
       sx: {
         display: "flex",
@@ -2664,7 +2886,7 @@ var AppLoading = ({
       },
       children: [
         logo && /* @__PURE__ */ jsx41(
-          Box9,
+          Box10,
           {
             component: "img",
             src: logo,
@@ -2677,7 +2899,7 @@ var AppLoading = ({
           }
         ),
         /* @__PURE__ */ jsx41(CircularProgress5, { size: 40, thickness: 4, sx: { mb: 2 } }),
-        /* @__PURE__ */ jsx41(Typography9, { variant: "body1", color: "text.secondary", children: message })
+        /* @__PURE__ */ jsx41(Typography10, { variant: "body1", color: "text.secondary", children: message })
       ]
     }
   );
@@ -2706,10 +2928,10 @@ import ReactFlow, {
   BackgroundVariant,
   ConnectionLineType
 } from "reactflow";
-import { Box as Box10 } from "@mui/material";
+import { Box as Box11 } from "@mui/material";
 import { useTheme } 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 jsx43, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs16 } from "react/jsx-runtime";
 var FlowEditor = ({
   nodes,
   edges,
@@ -2736,7 +2958,7 @@ var FlowEditor = ({
     [onInit]
   );
   return /* @__PURE__ */ jsx43(ReactFlowProvider, { children: /* @__PURE__ */ jsx43(
-    Box10,
+    Box11,
     {
       sx: {
         width: "100%",
@@ -2748,7 +2970,7 @@ var FlowEditor = ({
         ...containerProps?.sx
       },
       ...containerProps,
-      children: /* @__PURE__ */ jsxs15(
+      children: /* @__PURE__ */ jsxs16(
         ReactFlow,
         {
           nodes,
@@ -2805,10 +3027,10 @@ var FlowEditor = ({
 // src/components/third-party/CodeEditor.tsx
 import { useCallback as useCallback4, useEffect, useState as useState4, useRef } from "react";
 import Editor from "@monaco-editor/react";
-import { Box as Box11, IconButton as IconButton5, Tooltip as Tooltip3, Alert as Alert2 } from "@mui/material";
+import { Box as Box12, IconButton as IconButton6, Tooltip as Tooltip3, Alert as Alert2 } from "@mui/material";
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
 import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
-import { jsx as jsx44, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs17 } from "react/jsx-runtime";
 var configureTypeScript = (monaco) => {
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     target: monaco.languages.typescript.ScriptTarget.ES2020,
@@ -2865,7 +3087,7 @@ var CodeEditor = ({
   const finalMonacoRef = monacoRef || internalMonacoRef;
   useEffect(() => {
     if (isFullscreen) {
-      setActualHeight("100vh");
+      setActualHeight("calc(100vh - 80px)");
     } else {
       setActualHeight(typeof height === "number" ? `${height}px` : height);
     }
@@ -2996,12 +3218,12 @@ var CodeEditor = ({
     ...options
   };
   return /* @__PURE__ */ jsx44(
-    Box11,
+    Box12,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
-        height: "100%",
+        height: isFullscreen ? "100vh" : "100%",
         minHeight: isFullscreen ? "100vh" : editorMinHeight,
         position: isFullscreen ? "fixed" : "relative",
         top: isFullscreen ? 0 : "auto",
@@ -3010,10 +3232,14 @@ var CodeEditor = ({
         bottom: isFullscreen ? 0 : "auto",
         zIndex: isFullscreen ? 9999 : "auto",
         bgcolor: "background.paper",
-        p: isFullscreen ? 2 : 0
+        pt: isFullscreen ? "80px" : 0,
+        // Add padding top in fullscreen to account for header (64px) + spacing (16px)
+        px: isFullscreen ? 2 : 0,
+        pb: isFullscreen ? 2 : 0,
+        overflow: isFullscreen ? "hidden" : "visible"
       },
-      children: /* @__PURE__ */ jsxs16(
-        Box11,
+      children: /* @__PURE__ */ jsxs17(
+        Box12,
         {
           sx: {
             flex: 1,
@@ -3029,15 +3255,17 @@ var CodeEditor = ({
           ...containerProps,
           children: [
             /* @__PURE__ */ jsx44(Tooltip3, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ jsx44(
-              IconButton5,
+              IconButton6,
               {
                 onClick: toggleFullscreen,
                 size: "small",
                 sx: {
-                  position: "absolute",
-                  top: 8,
-                  right: 8,
-                  zIndex: 10,
+                  position: isFullscreen ? "fixed" : "absolute",
+                  top: isFullscreen ? 72 : 8,
+                  // Position below header in fullscreen mode (header is ~64px)
+                  right: isFullscreen ? 16 : 8,
+                  zIndex: 1e4,
+                  // Ensure it's above other elements
                   bgcolor: "rgba(255, 255, 255, 0.7)",
                   "&:hover": {
                     bgcolor: "rgba(255, 255, 255, 0.9)"
@@ -3048,7 +3276,7 @@ var CodeEditor = ({
               }
             ) }),
             /* @__PURE__ */ jsx44(
-              Box11,
+              Box12,
               {
                 sx: {
                   flex: 1,
@@ -3068,7 +3296,7 @@ var CodeEditor = ({
                     onMount: handleEditorDidMount,
                     theme: themeProp || "vs",
                     options: defaultOptions,
-                    loading: /* @__PURE__ */ jsx44(Box11, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
+                    loading: /* @__PURE__ */ jsx44(Box12, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
                     beforeMount: (monaco) => {
                       console.log("CodeEditor: beforeMount called", { monaco: !!monaco });
                     }
@@ -3076,7 +3304,7 @@ var CodeEditor = ({
                 )
               }
             ),
-            validationErrors.length > 0 && /* @__PURE__ */ jsxs16(
+            validationErrors.length > 0 && /* @__PURE__ */ jsxs17(
               Alert2,
               {
                 severity: "error",
@@ -3094,15 +3322,15 @@ var CodeEditor = ({
                   overflow: "auto"
                 },
                 children: [
-                  /* @__PURE__ */ jsx44(Box11, { sx: { mb: 1, fontWeight: 600 }, children: "Please fix the following errors:" }),
-                  /* @__PURE__ */ jsxs16(Box11, { component: "ul", sx: { m: 0, pl: 2 }, children: [
-                    validationErrors.slice(0, 3).map((error, index) => /* @__PURE__ */ jsxs16(Box11, { component: "li", sx: { fontSize: "0.85rem" }, children: [
+                  /* @__PURE__ */ jsx44(Box12, { sx: { mb: 1, fontWeight: 600 }, children: "Please fix the following errors:" }),
+                  /* @__PURE__ */ jsxs17(Box12, { component: "ul", sx: { m: 0, pl: 2 }, children: [
+                    validationErrors.slice(0, 3).map((error, index) => /* @__PURE__ */ jsxs17(Box12, { component: "li", sx: { fontSize: "0.85rem" }, children: [
                       "Line ",
                       error.startLineNumber,
                       ": ",
                       error.message
                     ] }, index)),
-                    validationErrors.length > 3 && /* @__PURE__ */ jsxs16(Box11, { component: "li", sx: { fontSize: "0.85rem" }, children: [
+                    validationErrors.length > 3 && /* @__PURE__ */ jsxs17(Box12, { component: "li", sx: { fontSize: "0.85rem" }, children: [
                       validationErrors.length - 3,
                       " more error",
                       validationErrors.length - 3 > 1 ? "s" : "",
@@ -3130,7 +3358,7 @@ export {
   Background2 as Background,
   BackgroundVariant2 as BackgroundVariant,
   Badge,
-  Box6 as Box,
+  Box7 as Box,
   Breadcrumbs,
   Button,
   ButtonGroup,
@@ -3147,7 +3375,7 @@ export {
   Container,
   Controls2 as Controls,
   Dialog,
-  Divider3 as Divider,
+  Divider4 as Divider,
   Drawer2 as Drawer,
   Dropdown,
   EmptyState,
@@ -3198,7 +3426,7 @@ export {
   ToggleButtonGroup,
   Toolbar,
   Tooltip2 as Tooltip,
-  Typography6 as Typography,
+  Typography7 as Typography,
   WorkspaceSelectorButton,
   colors,
   theme