@cere/cere-design-system 0.0.44 → 0.1.0

package/dist/chunk-EOF3QNPF.js

@@ -0,0 +1,2366 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkOWWDNDF4js = require('./chunk-OWWDNDF4.js');
+
+
+var _chunkJBHRAAN3js = require('./chunk-JBHRAAN3.js');
+
+
+var _chunkU2QHFISGjs = require('./chunk-U2QHFISG.js');
+
+
+var _chunkMNM6HE72js = require('./chunk-MNM6HE72.js');
+
+
+var _chunkBIZK6FUDjs = require('./chunk-BIZK6FUD.js');
+
+
+var _chunkZGCN5WCGjs = require('./chunk-ZGCN5WCG.js');
+
+// src/components/navigation/Dropdown/Dropdown.tsx
+var _material = require('@mui/material');
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// src/components/navigation/Dropdown/DropdownAnchor.tsx
+
+
+var _iconsmaterial = require('@mui/icons-material');
+var _jsxruntime = require('react/jsx-runtime');
+var Clickable = _material.styled.call(void 0, (0, _material.Button))({
+  padding: 0
+});
+var Anchor = _material.styled.call(void 0, (0, _material.Stack))(({ theme, variant }) => ({
+  height: 40,
+  borderRadius: 25,
+  padding: theme.spacing(1),
+  color: theme.palette.text.secondary,
+  backgroundColor: variant !== "header" ? theme.palette.grey[200] : "transparent",
+  cursor: "pointer"
+}));
+var Left = _material.styled.call(void 0, "div")(({ theme }) => ({
+  [`& .${_material.avatarClasses.root}`]: {
+    width: 30,
+    height: 30,
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: theme.palette.background.paper
+  }
+}));
+var Center = _material.styled.call(void 0, (0, _material.Typography))(({ theme }) => ({
+  fontWeight: theme.typography.fontWeightBold,
+  color: theme.palette.text.primary
+}));
+var DropdownAnchor = _react.forwardRef.call(void 0, 
+  ({ open, label, leftElement, onOpen, variant, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Clickable, { ref, ...props, color: "inherit", variant: "text", onClick: onOpen, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Anchor, { variant, spacing: 1, direction: "row", alignItems: "stretch", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Left, { children: leftElement }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Center, { variant: "body1", children: label }),
+    variant !== "header" && (open ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.ArrowDropUp, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.ArrowDropDown, {}))
+  ] }) })
+);
+DropdownAnchor.displayName = "DropdownAnchor";
+
+// src/components/navigation/Dropdown/Dropdown.tsx
+
+var Dropdown = ({
+  open,
+  label,
+  leftElement,
+  direction = "left",
+  children,
+  onToggle,
+  dense = false,
+  disableGutters = false,
+  disablePaddings = false,
+  variant,
+  renderAnchor = ({ ref, open: open2, onOpen }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownAnchor, { ref, open: open2, label, leftElement, onOpen, variant })
+}) => {
+  const anchorRef = _react.useRef.call(void 0, null);
+  const horizontal = direction === "left" ? "right" : "left";
+  const onOpen = _react.useCallback.call(void 0, () => _optionalChain([onToggle, 'optionalCall', _ => _(true)]), [onToggle]);
+  const padding = dense ? 1 : 2;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    renderAnchor({ ref: anchorRef, onOpen, open }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Popover,
+      {
+        "aria-label": "Overlay",
+        open,
+        onClose: () => _optionalChain([onToggle, 'optionalCall', _2 => _2(false)]),
+        anchorEl: anchorRef.current,
+        anchorOrigin: {
+          horizontal,
+          vertical: "bottom"
+        },
+        transformOrigin: {
+          horizontal,
+          vertical: -8
+        },
+        slotProps: {
+          paper: {
+            elevation: 0,
+            sx: {
+              padding: disablePaddings ? 0 : padding,
+              paddingX: !disablePaddings && disableGutters ? 0 : padding,
+              borderRadius: 3,
+              border: "1px solid",
+              borderColor: "divider",
+              boxShadow: 2
+            }
+          }
+        },
+        children
+      }
+    )
+  ] });
+};
+
+// src/components/navigation/Sidebar.tsx
+
+
+
+
+
+
+
+// src/components/navigation/SidebarItem.tsx
+
+
+
+
+
+
+
+var StyledListItemButton = _material.styled.call(void 0, _material.ListItemButton, {
+  shouldForwardProp: (prop) => prop !== "selected" && prop !== "size"
+})(({ theme, selected, size = "medium" }) => {
+  const heightMap = {
+    small: "40px",
+    medium: "56px",
+    large: "64px"
+  };
+  return {
+    height: heightMap[size],
+    paddingLeft: "16px",
+    paddingRight: "16px",
+    borderRadius: "8px",
+    margin: "4px 8px",
+    color: selected ? theme.palette.primary.main : theme.palette.text.primary,
+    backgroundColor: selected ? theme.palette.background.selected : "transparent",
+    "&:hover": {
+      backgroundColor: selected ? theme.palette.background.selected : theme.palette.grey[50]
+    },
+    "& .MuiListItemIcon-root": {
+      color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
+      minWidth: "40px"
+    },
+    "& .MuiListItemText-primary": {
+      fontWeight: selected ? 600 : 400,
+      color: selected ? theme.palette.primary.main : theme.palette.text.primary
+    }
+  };
+});
+var SidebarItem = ({
+  label,
+  icon,
+  selected = false,
+  onClick,
+  size = "medium",
+  endIcon,
+  children
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledListItemButton, { selected, size, onClick, children: [
+    icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemIcon, { children: icon }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemText, { primary: label }),
+    endIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { marginLeft: "auto" }, children: endIcon }),
+    children
+  ] });
+};
+
+// src/components/navigation/Sidebar.tsx
+
+var StyledDrawer = _material.styled.call(void 0, (0, _material.Drawer))(({ theme }) => ({
+  "& .MuiDrawer-paper": {
+    backgroundColor: theme.palette.background.paper,
+    borderRight: `1px solid ${theme.palette.grey[200]}`,
+    boxShadow: "none"
+  }
+}));
+var Sidebar = ({
+  open = true,
+  width = 280,
+  items,
+  onClose,
+  variant = "permanent"
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledDrawer,
+    {
+      variant,
+      open,
+      onClose,
+      sx: {
+        width,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width,
+          boxSizing: "border-box"
+        }
+      },
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { overflow: "auto", padding: "8px 0" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.List, { children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarItem, { ...item }, index)) }) })
+    }
+  );
+};
+
+// src/components/navigation/ServiceSelector.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _KeyboardArrowDown = require('@mui/icons-material/KeyboardArrowDown'); var _KeyboardArrowDown2 = _interopRequireDefault(_KeyboardArrowDown);
+var _Archive = require('@mui/icons-material/Archive'); var _Archive2 = _interopRequireDefault(_Archive);
+var _Unarchive = require('@mui/icons-material/Unarchive'); var _Unarchive2 = _interopRequireDefault(_Unarchive);
+var _Search = require('@mui/icons-material/Search'); var _Search2 = _interopRequireDefault(_Search);
+var _Add = require('@mui/icons-material/Add'); var _Add2 = _interopRequireDefault(_Add);
+var _Check = require('@mui/icons-material/Check'); var _Check2 = _interopRequireDefault(_Check);
+var _Settings = require('@mui/icons-material/Settings'); var _Settings2 = _interopRequireDefault(_Settings);
+var _PersonAddAlt = require('@mui/icons-material/PersonAddAlt'); var _PersonAddAlt2 = _interopRequireDefault(_PersonAddAlt);
+
+var ServiceSelectorButton = ({
+  services,
+  selectedServiceId,
+  loading = false,
+  compact = false,
+  onSelectService,
+  onServiceClick,
+  onCreateService,
+  onServiceCreated,
+  isManager = false,
+  sx = {},
+  panelWidth = 350,
+  onOpenSettings,
+  onOpenAddMember
+}) => {
+  const [anchorEl, setAnchorEl] = _react.useState.call(void 0, null);
+  const [searchTerm, setSearchTerm] = _react.useState.call(void 0, "");
+  const [showArchived, setShowArchived] = _react.useState.call(void 0, false);
+  const handleOpenSelector = (event) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    setSearchTerm("");
+    setShowArchived(false);
+  };
+  const handleServiceClick = (e) => {
+    e.stopPropagation();
+    if (selectedServiceId && onServiceClick) {
+      onServiceClick(selectedServiceId);
+    }
+  };
+  const handleSelectService = _react.useCallback.call(void 0, 
+    (serviceId) => {
+      handleClose();
+      if (onSelectService) {
+        onSelectService(serviceId);
+      }
+    },
+    [onSelectService]
+  );
+  const handleCreateClick = () => {
+    handleClose();
+    if (onCreateService) {
+      onCreateService();
+    }
+  };
+  const selectedService = Array.isArray(services) ? services.find((s) => s.id === selectedServiceId) : null;
+  const filteredServices = services.filter((service) => {
+    const matchesSearch = searchTerm === "" || service.name.toLowerCase().includes(searchTerm.toLowerCase());
+    const isArchived = service.archived === true;
+    const matchesArchivedFilter = showArchived ? isArchived : !isArchived;
+    return matchesSearch && matchesArchivedFilter;
+  });
+  if (compact) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { position: "relative" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: "Select service", placement: "right", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.IconButton,
+        {
+          onClick: handleOpenSelector,
+          sx: {
+            p: 1,
+            "&:hover": {
+              bgcolor: "rgba(0, 0, 0, 0.04)"
+            },
+            ...sx
+          },
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.Avatar,
+            {
+              sx: {
+                width: 32,
+                height: 32,
+                bgcolor: selectedServiceId ? "primary.main" : "grey.400",
+                fontSize: "0.9rem"
+              },
+              children: selectedService ? selectedService.name.charAt(0) : "D"
+            }
+          )
+        }
+      ) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ServiceSelectorPanel,
+        {
+          open: Boolean(anchorEl),
+          anchorEl,
+          onClose: handleClose,
+          services,
+          selectedServiceId,
+          onSelectService: handleSelectService,
+          onCreateService: handleCreateClick,
+          onServiceCreated,
+          loading,
+          width: panelWidth,
+          isManager,
+          selectedService,
+          searchTerm,
+          onSearchChange: setSearchTerm,
+          showArchived,
+          onToggleArchived: () => setShowArchived(!showArchived),
+          filteredServices,
+          onOpenSettings,
+          onOpenAddMember
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
+      selectedService ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        isManager ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _material.Link,
+          {
+            underline: "hover",
+            color: "inherit",
+            onClick: handleServiceClick,
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              fontSize: "0.875rem",
+              cursor: "pointer",
+              mr: 0.5
+            },
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _material.Avatar,
+                {
+                  sx: {
+                    width: 20,
+                    height: 20,
+                    bgcolor: "primary.main",
+                    fontSize: "0.7rem",
+                    mr: 0.5
+                  },
+                  children: selectedService.name.charAt(0)
+                }
+              ),
+              selectedService.name
+            ]
+          }
+        ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _material.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              fontSize: "0.875rem",
+              mr: 0.5,
+              color: "text.primary"
+            },
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _material.Avatar,
+                {
+                  sx: {
+                    width: 20,
+                    height: 20,
+                    bgcolor: "primary.main",
+                    fontSize: "0.7rem",
+                    mr: 0.5
+                  },
+                  children: selectedService.name.charAt(0)
+                }
+              ),
+              selectedService.name
+            ]
+          }
+        ),
+        selectedService.archived && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Chip,
+          {
+            size: "small",
+            label: "Archived",
+            color: "error",
+            variant: "outlined",
+            sx: {
+              ml: 0.5,
+              height: 20,
+              fontSize: "0.8rem",
+              "& .MuiChip-label": { px: 1 },
+              "& .MuiChip-icon": { fontSize: "0.7rem", ml: 0.5 }
+            }
+          }
+        )
+      ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.Typography,
+        {
+          variant: "body2",
+          color: "text.secondary",
+          sx: {
+            fontSize: "0.875rem"
+          },
+          children: "Select Service"
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.IconButton,
+        {
+          onClick: handleOpenSelector,
+          size: "small",
+          sx: {
+            p: 0.2,
+            ml: 0.5,
+            color: "text.secondary"
+          },
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KeyboardArrowDown2.default, { fontSize: "small" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ServiceSelectorPanel,
+      {
+        open: Boolean(anchorEl),
+        anchorEl,
+        onClose: handleClose,
+        services,
+        selectedServiceId,
+        onSelectService: handleSelectService,
+        onCreateService: handleCreateClick,
+        onServiceCreated,
+        loading,
+        width: panelWidth,
+        isManager,
+        selectedService,
+        searchTerm,
+        onSearchChange: setSearchTerm,
+        showArchived,
+        onToggleArchived: () => setShowArchived(!showArchived),
+        filteredServices,
+        onOpenSettings,
+        onOpenAddMember
+      }
+    )
+  ] });
+};
+var ServiceSelectorPanel = ({
+  open,
+  anchorEl,
+  onClose,
+  services,
+  selectedServiceId,
+  onSelectService,
+  onCreateService,
+  onServiceCreated,
+  loading = false,
+  width = 350,
+  isManager = false,
+  selectedService,
+  searchTerm: externalSearchTerm,
+  onSearchChange: externalOnSearchChange,
+  showArchived: externalShowArchived,
+  onToggleArchived: externalOnToggleArchived,
+  filteredServices: externalFilteredServices,
+  onOpenSettings,
+  onOpenAddMember
+}) => {
+  const [internalSearchTerm, setInternalSearchTerm] = _react.useState.call(void 0, "");
+  const [internalShowArchived, setInternalShowArchived] = _react.useState.call(void 0, false);
+  const searchTerm = externalSearchTerm !== void 0 ? externalSearchTerm : internalSearchTerm;
+  const setSearchTerm = externalOnSearchChange || setInternalSearchTerm;
+  const showArchived = externalShowArchived !== void 0 ? externalShowArchived : internalShowArchived;
+  const toggleArchived = externalOnToggleArchived || (() => setInternalShowArchived(!internalShowArchived));
+  const filteredServices = externalFilteredServices || services.filter((service) => {
+    const matchesSearch = searchTerm === "" || service.name.toLowerCase().includes(searchTerm.toLowerCase());
+    const isArchived = service.archived === true;
+    const matchesArchivedFilter = showArchived ? isArchived : !isArchived;
+    return matchesSearch && matchesArchivedFilter;
+  });
+  const handleCreateClick = () => {
+    if (onCreateService) {
+      onCreateService();
+    } else {
+      onClose();
+      if (onServiceCreated) {
+        onServiceCreated();
+      }
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _material.Menu,
+    {
+      anchorEl,
+      open,
+      onClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      PaperProps: {
+        sx: {
+          width,
+          maxHeight: "80vh",
+          borderRadius: 1,
+          boxShadow: "0 2px 10px rgba(0, 0, 0, 0.12)",
+          overflow: "hidden",
+          mt: 1
+        }
+      },
+      children: [
+        selectedService && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _material.Box,
+          {
+            sx: {
+              paddingLeft: 2,
+              paddingRight: 2,
+              paddingTop: 1.5,
+              paddingBottom: 1.5,
+              borderBottom: 1,
+              borderColor: "divider"
+            },
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: {
+                display: "flex",
+                alignItems: "center",
+                mb: 1.5
+              }, children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _material.Avatar,
+                  {
+                    sx: {
+                      width: 32,
+                      height: 32,
+                      bgcolor: "primary.main",
+                      fontSize: "0.9rem",
+                      mr: 1.5
+                    },
+                    children: selectedService.name.charAt(0)
+                  }
+                ),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { flex: 1 }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "subtitle1", sx: { fontWeight: 600, fontSize: "1rem" }, children: selectedService.name }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _material.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__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", gap: 1 }, children: [
+                onOpenAddMember && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _material.Button,
+                  {
+                    startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PersonAddAlt2.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__ */ _jsxruntime.jsx.call(void 0, 
+                  _material.Button,
+                  {
+                    startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Settings2.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__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { px: 2, pt: 2, pb: 1.5 }, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.TextField,
+              {
+                size: "small",
+                placeholder: "Search services...",
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                sx: { flex: 1 },
+                InputProps: {
+                  startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.InputAdornment, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { fontSize: "small", color: "action" }) }),
+                  sx: {
+                    borderRadius: 1.5,
+                    backgroundColor: "rgba(0, 0, 0, 0.04)",
+                    "& fieldset": { border: "none" },
+                    py: 0.5
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: showArchived ? "Show active" : "Show archived", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.IconButton,
+              {
+                size: "small",
+                onClick: toggleArchived,
+                color: showArchived ? "primary" : "default",
+                sx: { ml: 1 },
+                children: showArchived ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Unarchive2.default, { fontSize: "small" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Archive2.default, { fontSize: "small" })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.Box,
+            {
+              sx: {
+                maxHeight: 400,
+                overflow: "auto",
+                py: 1
+              },
+              children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: "Loading services..." }) }) : filteredServices.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: searchTerm ? `No ${showArchived ? "archived " : ""}services matching "${searchTerm}"` : showArchived ? "No archived services found" : "No active services found" }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  _material.Typography,
+                  {
+                    variant: "caption",
+                    sx: {
+                      display: "block",
+                      px: 2.5,
+                      py: 0.5,
+                      color: "text.secondary",
+                      fontWeight: 600,
+                      textTransform: "uppercase",
+                      fontSize: "0.65rem",
+                      letterSpacing: 0.5
+                    },
+                    children: [
+                      "Services",
+                      showArchived && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        _material.Chip,
+                        {
+                          size: "small",
+                          label: "Archived",
+                          color: "error",
+                          variant: "outlined",
+                          sx: {
+                            ml: 1,
+                            height: 20,
+                            fontSize: "0.6rem",
+                            "& .MuiChip-label": { px: 0.5 },
+                            "& .MuiChip-icon": { fontSize: "0.7rem", ml: 0.5 }
+                          }
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.List, { disablePadding: true, children: filteredServices.map((service) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  _material.ListItem,
+                  {
+                    sx: {
+                      py: 0.75,
+                      px: 2,
+                      cursor: "pointer",
+                      "&:hover": {
+                        backgroundColor: "rgba(0, 0, 0, 0.04)"
+                      },
+                      backgroundColor: service.id === selectedServiceId ? "rgba(25, 118, 210, 0.08)" : "transparent",
+                      position: "relative"
+                    },
+                    onClick: () => onSelectService(service.id),
+                    secondaryAction: service.id === selectedServiceId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      _Check2.default,
+                      {
+                        sx: {
+                          color: "primary.main",
+                          fontSize: "1.2rem"
+                        }
+                      }
+                    ) : null,
+                    children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { sx: { minWidth: 40 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        _material.Avatar,
+                        {
+                          sx: {
+                            width: 26,
+                            height: 26,
+                            bgcolor: service.id === selectedServiceId ? "primary.main" : "grey.400",
+                            fontSize: "0.8rem"
+                          },
+                          src: service.avatar,
+                          children: service.name.charAt(0)
+                        }
+                      ) }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        _material.ListItemText,
+                        {
+                          primary: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                            _material.Typography,
+                            {
+                              variant: "body2",
+                              sx: {
+                                fontWeight: service.id === selectedServiceId ? 600 : 400,
+                                color: service.id === selectedServiceId ? "primary.main" : "text.primary"
+                              },
+                              children: service.name
+                            }
+                          ) }),
+                          primaryTypographyProps: { sx: { fontWeight: 500 } },
+                          sx: { my: 0 }
+                        }
+                      )
+                    ]
+                  },
+                  service.id
+                )) })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.Box,
+            {
+              sx: {
+                paddingTop: 2,
+                paddingLeft: 2,
+                paddingRight: 2,
+                borderTop: 1,
+                borderColor: "divider"
+              },
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _material.Button,
+                {
+                  fullWidth: true,
+                  variant: "text",
+                  startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Add2.default, {}),
+                  onClick: handleCreateClick,
+                  sx: {
+                    textTransform: "none",
+                    fontWeight: 500,
+                    justifyContent: "flex-start",
+                    color: "primary.main",
+                    py: 1,
+                    px: 1.5,
+                    "&:hover": {
+                      backgroundColor: "rgba(25, 118, 210, 0.08)"
+                    }
+                  },
+                  children: "New Service"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/navigation/WorkspaceSelector.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var WorkspaceSelectorButton = ({
+  workspaces,
+  selectedWorkspaceId,
+  loading = false,
+  onSelectWorkspace,
+  onWorkspaceClick,
+  onCreateWorkspace,
+  sx = {},
+  panelWidth = 350
+}) => {
+  const [anchorEl, setAnchorEl] = _react.useState.call(void 0, null);
+  const handleOpenSelector = (event) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectWorkspace = _react.useCallback.call(void 0, 
+    (workspaceId) => {
+      handleClose();
+      if (onSelectWorkspace) {
+        onSelectWorkspace(workspaceId);
+      }
+    },
+    [onSelectWorkspace]
+  );
+  const selectedWorkspace = Array.isArray(workspaces) ? workspaces.find((w) => w.id === selectedWorkspaceId) : null;
+  if (!workspaces || workspaces.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
+      selectedWorkspace ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _material.Link,
+        {
+          underline: "hover",
+          color: "inherit",
+          onClick: (e) => {
+            e.stopPropagation();
+            if (onWorkspaceClick) {
+              onWorkspaceClick(selectedWorkspace.id);
+            }
+          },
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            fontSize: "0.875rem",
+            cursor: "pointer",
+            mr: 0.5
+          },
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.Avatar,
+              {
+                sx: {
+                  width: 20,
+                  height: 20,
+                  bgcolor: "secondary.main",
+                  fontSize: "0.7rem",
+                  mr: 0.5
+                },
+                children: selectedWorkspace.name.charAt(0)
+              }
+            ),
+            selectedWorkspace.name
+          ]
+        }
+      ) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.Typography,
+        {
+          variant: "body2",
+          color: "text.secondary",
+          sx: {
+            fontSize: "0.875rem"
+          },
+          children: "Select Workspace"
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.IconButton,
+        {
+          onClick: handleOpenSelector,
+          size: "small",
+          sx: {
+            p: 0.2,
+            ml: 0.5,
+            color: "text.secondary"
+          },
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KeyboardArrowDown2.default, { fontSize: "small" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      WorkspaceSelectorPanel,
+      {
+        open: Boolean(anchorEl),
+        anchorEl,
+        onClose: handleClose,
+        workspaces,
+        selectedWorkspaceId,
+        onSelectWorkspace: handleSelectWorkspace,
+        onCreateWorkspace,
+        loading,
+        width: panelWidth
+      }
+    )
+  ] });
+};
+var WorkspaceSelectorPanel = ({
+  open,
+  anchorEl,
+  onClose,
+  workspaces,
+  selectedWorkspaceId,
+  onSelectWorkspace,
+  onCreateWorkspace,
+  loading = false,
+  width = 350
+}) => {
+  const [searchTerm, setSearchTerm] = _react.useState.call(void 0, "");
+  _react2.default.useEffect(() => {
+    if (open) {
+      setSearchTerm("");
+    }
+  }, [open]);
+  const filteredWorkspaces = workspaces.filter(
+    (w) => w.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  const handleCreateClick = () => {
+    onClose();
+    if (onCreateWorkspace) {
+      onCreateWorkspace();
+    }
+  };
+  const handleSelect = (workspaceId) => {
+    onSelectWorkspace(workspaceId);
+    onClose();
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Menu,
+    {
+      open,
+      anchorEl,
+      onClose,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      PaperProps: {
+        sx: {
+          width,
+          maxHeight: 600,
+          mt: 1,
+          borderRadius: 2
+        }
+      },
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { px: 2, pt: 2, pb: 1.5 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.TextField,
+          {
+            fullWidth: true,
+            size: "small",
+            placeholder: "Search workspaces...",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            InputProps: {
+              startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.InputAdornment, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { fontSize: "small" }) })
+            }
+          }
+        ) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { maxHeight: 400, overflowY: "auto" }, children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: "Loading..." }) }) : filteredWorkspaces.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: "No workspaces found" }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.List, { dense: true, children: filteredWorkspaces.map((workspace) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _material.ListItem,
+          {
+            onClick: () => handleSelect(workspace.id),
+            sx: {
+              py: 0.5,
+              cursor: "pointer",
+              bgcolor: workspace.id === selectedWorkspaceId ? "action.selected" : "transparent",
+              "&:hover": {
+                bgcolor: "action.hover"
+              }
+            },
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _material.Avatar,
+                {
+                  sx: { width: 32, height: 32, bgcolor: "secondary.main" },
+                  children: workspace.name.charAt(0)
+                }
+              ) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _material.ListItemText,
+                {
+                  primary: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", fontWeight: 500, children: workspace.name }),
+                    workspace.id === selectedWorkspaceId && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Check2.default, { fontSize: "small", color: "primary" })
+                  ] }),
+                  secondary: workspace.description
+                }
+              )
+            ]
+          },
+          workspace.id
+        )) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Box,
+          {
+            sx: {
+              paddingTop: 2,
+              paddingLeft: 2,
+              paddingRight: 2,
+              borderTop: 1,
+              borderColor: "divider"
+            },
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.Button,
+              {
+                fullWidth: true,
+                variant: "text",
+                startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Add2.default, {}),
+                onClick: handleCreateClick,
+                sx: {
+                  textTransform: "none",
+                  fontWeight: 500,
+                  justifyContent: "flex-start",
+                  color: "primary.main",
+                  py: 1,
+                  px: 1.5,
+                  "&:hover": {
+                    backgroundColor: "rgba(25, 118, 210, 0.08)"
+                  }
+                },
+                children: "New Workspace"
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/components/navigation/Stepper.tsx
+
+
+
+
+
+
+
+
+var Stepper = (props) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Stepper, { ...props });
+};
+var Step = (props) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Step, { ...props });
+};
+var StepLabel = (props) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.StepLabel, { ...props });
+};
+var StepContent = (props) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.StepContent, { ...props });
+};
+var StepButton = (props) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.StepButton, { ...props });
+};
+
+// src/components/navigation/NumberedStepper.tsx
+
+var _styles = require('@mui/material/styles');
+
+var Root = _styles.styled.call(void 0, "ol")({
+  listStyle: "none",
+  padding: 0,
+  margin: 0,
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+});
+var Row = _styles.styled.call(void 0, "li")({
+  display: "flex",
+  gap: 10,
+  alignItems: "center"
+});
+var Num = _styles.styled.call(void 0, "span", {
+  shouldForwardProp: (p) => p !== "state"
+})(({ state }) => ({
+  width: 24,
+  height: 24,
+  flexShrink: 0,
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: 12,
+  fontWeight: 600,
+  border: `1px solid ${_chunkZGCN5WCGjs.webSurfaceTokens.strokeOnMed}`,
+  background: _chunkZGCN5WCGjs.webSurfaceTokens.surfaceContrast,
+  color: _chunkZGCN5WCGjs.webSurfaceTokens.textSecondary,
+  ...state === "active" && {
+    background: _chunkZGCN5WCGjs.webSurfaceTokens.cVioletLight,
+    borderColor: _chunkZGCN5WCGjs.webSurfaceTokens.cViolet,
+    color: _chunkZGCN5WCGjs.webSurfaceTokens.cVioletDark
+  },
+  ...state === "done" && {
+    background: _chunkZGCN5WCGjs.webSurfaceTokens.cViolet,
+    borderColor: _chunkZGCN5WCGjs.webSurfaceTokens.cViolet,
+    color: "white"
+  }
+}));
+var Label = _styles.styled.call(void 0, "span", {
+  shouldForwardProp: (p) => p !== "active"
+})(({ active }) => ({
+  fontSize: 13,
+  color: active ? _chunkZGCN5WCGjs.webSurfaceTokens.textPrimary : _chunkZGCN5WCGjs.webSurfaceTokens.textSecondary,
+  fontWeight: active ? 500 : 400
+}));
+var NumberedStepper = _react2.default.forwardRef(
+  function NumberedStepper2({ steps, current, className }, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, className, children: steps.map((s, i) => {
+      const state = i < current ? "done" : i === current ? "active" : "pending";
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Row, { ...state === "active" ? { "aria-current": "step" } : {}, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Num, { state, children: state === "done" ? "\u2713" : i + 1 }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, { active: state === "active", children: s.label })
+      ] }, s.key);
+    }) });
+  }
+);
+
+// src/components/navigation/SideNav/SideNav.tsx
+
+
+
+
+// src/components/navigation/SideNav/styles.ts
+var scrollbarStyles = {
+  "&::-webkit-scrollbar": {
+    width: "8px"
+  },
+  "&::-webkit-scrollbar-track": {
+    backgroundColor: "transparent"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: "4px",
+    "&:hover": {
+      backgroundColor: "rgba(0, 0, 0, 0.3)"
+    }
+  }
+};
+
+// src/components/navigation/SideNav/SideNav.tsx
+
+var SideNavContext = _react2.default.createContext({
+  collapsed: false,
+  showTooltips: true
+});
+var SideNavContainer = _styles.styled.call(void 0, _material.Box, {
+  shouldForwardProp: (prop) => !["navWidth", "navPosition", "showBorder", "backgroundColor", "isCollapsed", "collapsedWidth", "transitionDuration"].includes(prop)
+})(({ theme, navWidth = 280, navPosition = "left", showBorder = true, backgroundColor, isCollapsed = false, collapsedWidth = 68, transitionDuration = 300 }) => ({
+  width: isCollapsed ? collapsedWidth : navWidth,
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: backgroundColor || theme.palette.background.paper,
+  overflow: "hidden",
+  transition: `width ${transitionDuration}ms ${theme.transitions.easing.easeInOut}`,
+  // Disable transition for reduced motion preference
+  "@media (prefers-reduced-motion: reduce)": {
+    transition: "none"
+  },
+  // Border on the appropriate side
+  ...showBorder && {
+    borderRight: navPosition === "left" ? `1px solid ${theme.palette.divider}` : "none",
+    borderLeft: navPosition === "right" ? `1px solid ${theme.palette.divider}` : "none"
+  }
+}));
+var HeaderSection = _styles.styled.call(void 0, (0, _material.Box))(({ theme }) => ({
+  flexShrink: 0,
+  backgroundColor: theme.palette.background.paper
+}));
+var NavigationSection = _styles.styled.call(void 0, (0, _material.Box))(() => ({
+  flexGrow: 1,
+  overflowY: "auto",
+  overflowX: "hidden",
+  ...scrollbarStyles
+}));
+var FooterSection = _styles.styled.call(void 0, (0, _material.Box))(({ theme }) => ({
+  flexShrink: 0,
+  backgroundColor: theme.palette.background.paper
+}));
+var Header = _react2.default.memo(({ children, className }) => {
+  const { collapsed, onToggleCollapse } = _react2.default.useContext(SideNavContext);
+  const enhancedChildren = _react2.default.Children.map(children, (child) => {
+    if (_react2.default.isValidElement(child)) {
+      return _react2.default.cloneElement(child, {
+        collapsed,
+        onCollapse: onToggleCollapse
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HeaderSection, { className, "data-testid": "sidenav-header", children: enhancedChildren });
+});
+Header.displayName = "SideNav.Header";
+var Navigation = _react2.default.memo(({ children, className }) => {
+  const { collapsed, showTooltips } = _react2.default.useContext(SideNavContext);
+  const enhancedChildren = _react2.default.Children.map(children, (child) => {
+    if (_react2.default.isValidElement(child)) {
+      return _react2.default.cloneElement(child, {
+        collapsed,
+        showTooltips
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NavigationSection, { className, "data-testid": "sidenav-navigation", children: enhancedChildren });
+});
+Navigation.displayName = "SideNav.Navigation";
+var Footer = _react2.default.memo(({ children, className }) => {
+  const { collapsed } = _react2.default.useContext(SideNavContext);
+  const enhancedChildren = _react2.default.Children.map(children, (child) => {
+    if (_react2.default.isValidElement(child)) {
+      return _react2.default.cloneElement(child, {
+        compact: collapsed
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FooterSection, { className, "data-testid": "sidenav-footer", children: enhancedChildren });
+});
+Footer.displayName = "SideNav.Footer";
+var SideNav = Object.assign(
+  _react2.default.memo(({
+    width = 280,
+    collapsedWidth = 68,
+    collapsed: controlledCollapsed,
+    defaultCollapsed = false,
+    onCollapseChange,
+    transitionDuration = 300,
+    showTooltips = true,
+    position = "left",
+    showBorder = true,
+    backgroundColor,
+    children,
+    className,
+    ariaLabel = "Main navigation"
+  }) => {
+    const [internalCollapsed, setInternalCollapsed] = _react.useState.call(void 0, defaultCollapsed);
+    const isControlled = controlledCollapsed !== void 0;
+    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+    const handleToggleCollapse = _react.useCallback.call(void 0, () => {
+      const newCollapsed = !collapsed;
+      if (!isControlled) {
+        setInternalCollapsed(newCollapsed);
+      }
+      if (onCollapseChange) {
+        onCollapseChange(newCollapsed);
+      }
+    }, [collapsed, isControlled, onCollapseChange]);
+    const contextValue = {
+      collapsed,
+      showTooltips,
+      onToggleCollapse: handleToggleCollapse
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SideNavContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      SideNavContainer,
+      {
+        role: "navigation",
+        "aria-label": ariaLabel,
+        navWidth: width,
+        collapsedWidth,
+        isCollapsed: collapsed,
+        transitionDuration,
+        navPosition: position,
+        showBorder,
+        backgroundColor,
+        className,
+        children
+      }
+    ) });
+  }),
+  {
+    Header,
+    Navigation,
+    Footer
+  }
+);
+SideNav.displayName = "SideNav";
+
+// src/components/navigation/SideNav/SideNavHeader.tsx
+
+
+
+var _ChevronLeft = require('@mui/icons-material/ChevronLeft'); var _ChevronLeft2 = _interopRequireDefault(_ChevronLeft);
+var _ChevronRight = require('@mui/icons-material/ChevronRight'); var _ChevronRight2 = _interopRequireDefault(_ChevronRight);
+
+var HeaderContainer = _styles.styled.call(void 0, _material.Box, {
+  shouldForwardProp: (prop) => prop !== "isCollapsed"
+})(({ theme, isCollapsed }) => ({
+  display: "flex",
+  flexDirection: isCollapsed ? "column" : "row",
+  alignItems: "center",
+  justifyContent: isCollapsed ? "center" : "flex-start",
+  gap: isCollapsed ? theme.spacing(1) : theme.spacing(1.5),
+  padding: theme.spacing(2),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  transition: theme.transitions.create(["gap", "justify-content", "flex-direction"], {
+    duration: theme.transitions.duration.shorter
+  })
+}));
+var BrandingButton = _styles.styled.call(void 0, (0, _material.ButtonBase))(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1.5),
+  minWidth: 0,
+  padding: 0,
+  borderRadius: theme.shape.borderRadius,
+  // Subtle hover feedback only when clickable
+  "&:hover": {
+    opacity: 0.8
+  },
+  "&:focus-visible": {
+    outline: `2px solid ${theme.palette.primary.main}`,
+    outlineOffset: 2
+  }
+}));
+var SideNavHeader = _react2.default.memo(({
+  logo,
+  title,
+  showCollapseButton = true,
+  onCollapse,
+  onLogoClick,
+  ariaLabel,
+  collapsed = false
+}) => {
+  const headerAriaLabel = ariaLabel || `${title} navigation header`;
+  const brandingContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    logo && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        },
+        children: logo
+      }
+    ),
+    !collapsed && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Typography,
+      {
+        variant: "subtitle1",
+        sx: {
+          fontWeight: 700,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          minWidth: 0
+        },
+        children: title
+      }
+    )
+  ] });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    HeaderContainer,
+    {
+      "data-testid": "sidenav-header-content",
+      "aria-label": headerAriaLabel,
+      isCollapsed: collapsed,
+      children: [
+        onLogoClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          BrandingButton,
+          {
+            onClick: onLogoClick,
+            "aria-label": `Go to ${title} home`,
+            "data-testid": "sidenav-home-link",
+            children: brandingContent
+          }
+        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              minWidth: 0
+            },
+            children: brandingContent
+          }
+        ),
+        showCollapseButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Tooltip,
+          {
+            title: collapsed ? "Expand navigation" : "Collapse navigation",
+            placement: "right",
+            arrow: true,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.IconButton,
+              {
+                onClick: onCollapse,
+                "aria-label": collapsed ? "Expand navigation" : "Collapse navigation",
+                "aria-expanded": !collapsed,
+                size: "small",
+                sx: {
+                  flexShrink: 0,
+                  marginLeft: collapsed ? 0 : "auto",
+                  color: "text.secondary",
+                  "&:hover": {
+                    backgroundColor: "action.hover",
+                    color: "text.primary"
+                  }
+                },
+                children: collapsed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ChevronRight2.default, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ChevronLeft2.default, {})
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+SideNavHeader.displayName = "SideNavHeader";
+
+// src/components/navigation/SideNav/NavigationList.tsx
+
+
+
+// src/components/navigation/SideNav/NavigationItem.tsx
+
+
+
+
+
+
+
+
+
+
+var StyledListItemButton2 = _styles.styled.call(void 0, _material.ListItemButton, {
+  shouldForwardProp: (prop) => !["selected", "size", "iconPosition", "isCollapsed"].includes(prop)
+})(({ theme, selected, size, isCollapsed }) => {
+  const heights = {
+    small: 40,
+    medium: 48,
+    large: 56
+  };
+  return {
+    minHeight: heights[size] || heights.medium,
+    padding: theme.spacing(1, 1.5),
+    // 8px 12px
+    margin: theme.spacing(0.5, 1),
+    // 4px 8px
+    borderRadius: theme.shape.borderRadius,
+    gap: isCollapsed ? 0 : theme.spacing(1),
+    // No gap in collapsed mode
+    justifyContent: isCollapsed ? "center" : "flex-start",
+    transition: theme.transitions.create(
+      ["background-color", "color", "justify-content"],
+      { duration: theme.transitions.duration.shortest }
+    ),
+    // Default state
+    color: theme.palette.text.primary,
+    backgroundColor: "transparent",
+    "& .MuiListItemIcon-root": {
+      minWidth: "auto",
+      color: theme.palette.text.secondary
+    },
+    // Hover state
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+      "& .MuiListItemIcon-root": {
+        color: theme.palette.text.primary
+      }
+    },
+    // Selected state
+    ...selected && {
+      color: theme.palette.primary.main,
+      backgroundColor: theme.palette.action.selected,
+      "& .MuiListItemIcon-root": {
+        minWidth: "auto",
+        color: theme.palette.primary.main
+      },
+      "&:hover": {
+        backgroundColor: theme.palette.action.selected,
+        "& .MuiListItemIcon-root": {
+          color: theme.palette.primary.main
+        }
+      }
+    },
+    // Disabled state
+    "&.Mui-disabled": {
+      opacity: 1,
+      color: theme.palette.text.disabled,
+      "& .MuiListItemIcon-root": {
+        color: theme.palette.action.disabled
+      }
+    }
+  };
+});
+var NavigationItem = _react2.default.memo(
+  _react2.default.forwardRef(function NavigationItem2({
+    id,
+    label,
+    icon,
+    iconPosition = "left",
+    selected = false,
+    disabled = false,
+    onClick,
+    endContent,
+    href,
+    ariaLabel,
+    size = "medium",
+    collapsed = false,
+    showTooltip = true,
+    tooltipPlacement = "right",
+    ...rest
+  }, ref) {
+    const handleClick = () => {
+      if (!disabled && onClick) {
+        onClick(id);
+      }
+    };
+    const iconElement = icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.ListItemIcon,
+      {
+        sx: {
+          fontSize: 24,
+          width: 24,
+          height: 24,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: icon
+      }
+    );
+    const labelElement = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.ListItemText,
+      {
+        primary: label,
+        primaryTypographyProps: {
+          sx: {
+            fontWeight: 400,
+            fontSize: 16,
+            lineHeight: 1.5,
+            letterSpacing: "0.0168em",
+            display: collapsed ? "none" : "block",
+            opacity: collapsed ? 0 : 1,
+            transition: (theme) => theme.transitions.create(["opacity"], {
+              duration: theme.transitions.duration.shorter
+            })
+          }
+        }
+      }
+    );
+    const buttonContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      StyledListItemButton2,
+      {
+        ref,
+        selected,
+        disabled,
+        onClick: handleClick,
+        ...href && { component: "a", href },
+        "aria-label": ariaLabel || label,
+        "aria-current": selected ? "page" : void 0,
+        "aria-disabled": disabled,
+        size,
+        isCollapsed: collapsed,
+        ...rest,
+        children: [
+          icon && iconPosition === "left" && iconElement,
+          labelElement,
+          icon && iconPosition === "right" && iconElement,
+          endContent && !collapsed && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.Box,
+            {
+              sx: {
+                marginLeft: "auto",
+                display: "flex",
+                alignItems: "center"
+              },
+              children: endContent
+            }
+          )
+        ]
+      }
+    );
+    if (collapsed && showTooltip) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.Tooltip,
+        {
+          title: label,
+          placement: tooltipPlacement,
+          enterDelay: 200,
+          leaveDelay: 0,
+          arrow: true,
+          children: buttonContent
+        }
+      );
+    }
+    return buttonContent;
+  })
+);
+NavigationItem.displayName = "NavigationItem";
+
+// src/components/navigation/SideNav/NavigationList.tsx
+
+var NavigationList = _react2.default.memo(({
+  items,
+  selectedId,
+  onSelectionChange,
+  maxHeight = "auto",
+  ariaLabel = "Navigation menu",
+  collapsed = false,
+  showTooltips = true
+}) => {
+  const [internalSelectedId, setInternalSelectedId] = _react.useState.call(void 0, 
+    selectedId
+  );
+  const isControlled = selectedId !== void 0;
+  const currentSelectedId = isControlled ? selectedId : internalSelectedId;
+  const handleItemClick = (id) => {
+    if (!isControlled) {
+      setInternalSelectedId(id);
+    }
+    if (onSelectionChange) {
+      onSelectionChange(id);
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.List,
+    {
+      role: "list",
+      "aria-label": ariaLabel,
+      sx: {
+        padding: 0,
+        maxHeight,
+        overflowY: maxHeight !== "auto" ? "auto" : "visible",
+        overflowX: "hidden",
+        ...maxHeight !== "auto" ? scrollbarStyles : {}
+      },
+      children: items.map((item, index) => {
+        const isSelected = currentSelectedId === item.id;
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.ListItem,
+          {
+            role: "listitem",
+            sx: {
+              padding: 0,
+              display: "block"
+            },
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              NavigationItem,
+              {
+                ...item,
+                selected: isSelected,
+                collapsed,
+                showTooltip: showTooltips,
+                onClick: (id) => {
+                  if (item.disabled) {
+                    return;
+                  }
+                  if (item.onClick) {
+                    item.onClick(id);
+                  }
+                  handleItemClick(id);
+                }
+              }
+            )
+          },
+          `${item.id}-${index}`
+        );
+      })
+    }
+  );
+});
+NavigationList.displayName = "NavigationList";
+
+// src/components/navigation/SideNav/ConnectionStatus.tsx
+
+
+
+var _Power = require('@mui/icons-material/Power'); var _Power2 = _interopRequireDefault(_Power);
+
+var StatusPill = _styles.styled.call(void 0, _material.Box, {
+  shouldForwardProp: (prop) => !["variant", "interactive"].includes(prop)
+})(({ theme, variant = "info", interactive }) => {
+  const variantColors = {
+    success: {
+      background: theme.palette.success.light + "20",
+      text: theme.palette.success.dark
+    },
+    warning: {
+      background: theme.palette.warning.light + "20",
+      text: theme.palette.warning.dark
+    },
+    error: {
+      background: theme.palette.error.light + "20",
+      text: theme.palette.error.dark
+    },
+    info: {
+      background: theme.palette.grey[100],
+      text: theme.palette.text.primary
+    }
+  };
+  const colors = variantColors[variant] || variantColors.info;
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(1),
+    padding: theme.spacing(0.75, 1.5),
+    // 6px 12px
+    borderRadius: 16,
+    // Always pill-shaped
+    backgroundColor: colors.background,
+    cursor: interactive ? "pointer" : "default",
+    transition: theme.transitions.create(["background-color", "transform"], {
+      duration: theme.transitions.duration.shortest
+    }),
+    maxWidth: "100%",
+    ...interactive && {
+      "&:hover": {
+        backgroundColor: colors.background + "40",
+        // Slightly darker on hover
+        transform: "scale(1.02)"
+      },
+      "&:active": {
+        transform: "scale(0.98)"
+      }
+    },
+    "& .status-text": {
+      color: colors.text,
+      fontWeight: 500,
+      fontSize: 14,
+      lineHeight: 1.5,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      minWidth: 0
+      // Allow text to shrink and truncate in flex container
+    }
+  };
+});
+var ConnectionStatus = _react2.default.memo(({
+  status,
+  variant = "info",
+  icon,
+  onClick,
+  compact = false,
+  compactText
+}) => {
+  const interactive = !!onClick;
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  const statusContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    StatusPill,
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-label": compact ? status : void 0,
+      variant,
+      interactive,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              fontSize: 16,
+              color: "inherit"
+            },
+            children: icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Power2.default, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { className: "status-text", variant: "body2", children: compact ? _nullishCoalesce(compactText, () => ( status)) : status })
+      ]
+    }
+  );
+  if (compact) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          padding: 1
+        },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: status, placement: "right", arrow: true, children: statusContent })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Box,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        padding: 1
+      },
+      children: statusContent
+    }
+  );
+});
+ConnectionStatus.displayName = "ConnectionStatus";
+
+// src/components/navigation/SideNav/AccountSection.tsx
+
+
+
+var _Logout = require('@mui/icons-material/Logout'); var _Logout2 = _interopRequireDefault(_Logout);
+
+var AccountContainer = _styles.styled.call(void 0, _material.Box, {
+  shouldForwardProp: (prop) => !["layout", "isCompact"].includes(prop)
+})(({ theme, layout = "horizontal", isCompact }) => ({
+  display: "flex",
+  flexDirection: isCompact ? "column" : "row",
+  alignItems: "center",
+  justifyContent: isCompact ? "center" : "flex-start",
+  gap: isCompact ? theme.spacing(1) : theme.spacing(1.5),
+  padding: theme.spacing(2),
+  borderTop: `1px solid ${theme.palette.divider}`,
+  transition: theme.transitions.create(["gap", "justify-content"], {
+    duration: theme.transitions.duration.shorter
+  }),
+  ...layout === "vertical" && !isCompact && {
+    flexDirection: "column",
+    textAlign: "center"
+  }
+}));
+var deriveInitials = (name) => {
+  if (!name || name.trim() === "") {
+    return "?";
+  }
+  const words = name.trim().split(/\s+/);
+  if (words.length === 1) {
+    return words[0][0].toUpperCase();
+  }
+  if (words.length === 2) {
+    return (words[0][0] + words[1][0]).toUpperCase();
+  }
+  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+};
+var AccountSection = _react2.default.memo(({
+  user,
+  onLogout,
+  showEmail = false,
+  layout = "horizontal",
+  compact = false
+}) => {
+  const initials = user.initials || deriveInitials(user.name);
+  const avatarSrc = user.avatarUrl;
+  if (compact) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AccountContainer, { layout, isCompact: true, "aria-label": "Account section", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.Tooltip,
+        {
+          title: `${user.name}${user.email ? ` (${user.email})` : ""}`,
+          placement: "right",
+          arrow: true,
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.Avatar,
+            {
+              src: avatarSrc,
+              alt: user.name,
+              sx: {
+                width: 40,
+                height: 40,
+                backgroundColor: "primary.main",
+                fontSize: 16,
+                fontWeight: 600,
+                flexShrink: 0,
+                cursor: "default"
+              },
+              children: initials
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: "Logout", placement: "right", arrow: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.IconButton,
+        {
+          onClick: onLogout,
+          "aria-label": "Logout",
+          size: "small",
+          sx: {
+            color: "text.secondary",
+            "&:hover": {
+              backgroundColor: "action.hover",
+              color: "text.primary"
+            }
+          },
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Logout2.default, { fontSize: "small" })
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AccountContainer, { layout, isCompact: false, "aria-label": "Account section", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Avatar,
+      {
+        src: avatarSrc,
+        alt: user.name,
+        sx: {
+          width: 40,
+          height: 40,
+          backgroundColor: "primary.main",
+          fontSize: 16,
+          fontWeight: 600,
+          flexShrink: 0
+        },
+        children: initials
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _material.Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5,
+          flexGrow: 1,
+          minWidth: 0
+          // Allow text truncation
+        },
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.Typography,
+            {
+              variant: "body2",
+              sx: {
+                fontWeight: 600,
+                lineHeight: 1.5,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: user.name
+            }
+          ),
+          showEmail && user.email && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.Typography,
+            {
+              variant: "caption",
+              sx: {
+                color: "text.secondary",
+                lineHeight: 1.5,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                display: "block"
+              },
+              children: user.email
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.Button,
+            {
+              onClick: onLogout,
+              "aria-label": "Logout",
+              startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Logout2.default, { fontSize: "small" }),
+              sx: {
+                color: "text.secondary",
+                textTransform: "none",
+                fontSize: "14px",
+                fontWeight: 400,
+                padding: "4px 8px",
+                justifyContent: "flex-start",
+                alignSelf: "flex-start",
+                minWidth: "auto",
+                "&:hover": {
+                  backgroundColor: "action.hover",
+                  color: "text.primary"
+                }
+              },
+              children: "Logout"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+AccountSection.displayName = "AccountSection";
+
+// src/components/navigation/Tab.tsx
+var _Tab = require('@mui/material/Tab'); var _Tab2 = _interopRequireDefault(_Tab);
+
+
+var StyledTab = _styles.styled.call(void 0, (0, _Tab2.default))(({ theme }) => ({
+  textTransform: "none",
+  minHeight: "48px",
+  fontWeight: 400,
+  color: theme.palette.text.primary,
+  borderBottom: "2px solid transparent",
+  "&:hover": {
+    color: theme.palette.primary.main
+  },
+  "&.Mui-selected": {
+    fontWeight: 600,
+    color: theme.palette.primary.main,
+    borderBottom: `2px solid ${theme.palette.primary.main}`
+  }
+}));
+var Tab = ({
+  badge,
+  badgeVariant = "primary",
+  label,
+  ...props
+}) => {
+  const tabLabel = badge !== void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBIZK6FUDjs.Badge, { variant: badgeVariant, badgeContent: badge, children: label }) : label;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTab, { label: tabLabel, ...props });
+};
+
+// src/components/navigation/Menu.tsx
+
+
+
+
+
+
+
+
+
+
+var StyledMenu = _styles.styled.call(void 0, (0, _material.Menu))(({ theme }) => ({
+  "& .MuiPaper-root": {
+    borderRadius: 8,
+    boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
+    minWidth: 200
+  },
+  "& .MuiMenuItem-root": {
+    padding: "8px 16px",
+    "&:hover": {
+      backgroundColor: theme.palette.background.selected
+    }
+  }
+}));
+var Menu3 = _react2.default.forwardRef(function Menu4({ anchorEl, onClose, children, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledMenu,
+    {
+      ref,
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      ...props,
+      children
+    }
+  );
+});
+var MenuItem = _react2.default.forwardRef(function MenuItem2({ icon, label, onClick, disabled = false, divider = false }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.MenuItem, { ref, onClick, disabled, children: [
+      icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemIcon, { children: icon }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemText, { children: label })
+    ] }),
+    divider && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, {})
+  ] });
+});
+
+// src/components/navigation/Pagination.tsx
+var _Pagination = require('@mui/material/Pagination'); var _Pagination2 = _interopRequireDefault(_Pagination);
+
+
+var StyledPagination = _styles.styled.call(void 0, (0, _Pagination2.default))(({ theme }) => ({
+  "& .MuiPaginationItem-root": {
+    "&.Mui-selected": {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+      "&:hover": {
+        backgroundColor: theme.palette.primary.light
+      }
+    },
+    "&:hover": {
+      backgroundColor: theme.palette.background.selected
+    }
+  }
+}));
+var Pagination = ({ color = "primary", ...props }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledPagination, { color, ...props });
+};
+
+// src/components/navigation/Selector.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var Selector = ({
+  options,
+  selectedId,
+  onSelect,
+  onCreate,
+  loading = false,
+  placeholder = "Select...",
+  emptyMessage = "No items found",
+  compact = false,
+  renderSelected,
+  width = 350
+}) => {
+  const theme = _styles.useTheme.call(void 0, );
+  const [anchorEl, setAnchorEl] = _react.useState.call(void 0, null);
+  const [searchTerm, setSearchTerm] = _react.useState.call(void 0, "");
+  const open = Boolean(anchorEl);
+  const selectedOption = options.find((opt) => opt.id === selectedId);
+  const filteredOptions = options.filter(
+    (opt) => opt.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  const handleOpen = (event) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    setSearchTerm("");
+  };
+  const handleSelect = (id) => {
+    onSelect(id);
+    handleClose();
+  };
+  const defaultRenderSelected = (option) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+    option.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { src: option.avatar, sx: { width: 20, height: 20 } }) : option.icon ? option.icon : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { sx: { width: 20, height: 20, bgcolor: theme.palette.primary.main, fontSize: "0.7rem" }, children: option.name.charAt(0) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", children: option.name })
+  ] });
+  if (compact) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOWWDNDF4js.IconButton, { onClick: handleOpen, size: "small", children: selectedOption ? selectedOption.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { src: selectedOption.avatar, sx: { width: 32, height: 32 } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { sx: { width: 32, height: 32, bgcolor: theme.palette.primary.main }, children: selectedOption.name.charAt(0) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { sx: { width: 32, height: 32, bgcolor: theme.palette.grey[400] }, children: "?" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.Menu,
+        {
+          anchorEl,
+          open,
+          onClose: handleClose,
+          PaperProps: {
+            sx: { width, maxHeight: 600, mt: 1 }
+          },
+          children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { size: 24 }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            options.length > 5 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 1, borderBottom: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkJBHRAAN3js.TextField,
+              {
+                size: "small",
+                fullWidth: true,
+                placeholder: "Search...",
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                InputProps: {
+                  startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.InputAdornment, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { fontSize: "small" }) })
+                }
+              }
+            ) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.List, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+              filteredOptions.map((option) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                _material.ListItemButton,
+                {
+                  selected: option.id === selectedId,
+                  onClick: () => handleSelect(option.id),
+                  disabled: option.disabled,
+                  children: [
+                    option.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: option.icon }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { sx: { bgcolor: theme.palette.primary.main }, children: option.name.charAt(0) }) }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemText, { primary: option.name, secondary: option.description })
+                  ]
+                },
+                option.id
+              )),
+              filteredOptions.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
+            ] }),
+            onCreate && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 1, borderTop: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkMNM6HE72js.Button,
+              {
+                fullWidth: true,
+                startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Add2.default, {}),
+                onClick: () => {
+                  onCreate();
+                  handleClose();
+                },
+                children: "Create New"
+              }
+            ) })
+          ] })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+      selectedOption ? renderSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkU2QHFISGjs.Link, { onClick: handleOpen, underline: "hover", children: renderSelected(selectedOption) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkU2QHFISGjs.Link, { onClick: handleOpen, underline: "hover", children: defaultRenderSelected(selectedOption) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: placeholder }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOWWDNDF4js.IconButton, { onClick: handleOpen, size: "small", sx: { p: 0.2, ml: 0.5 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KeyboardArrowDown2.default, { fontSize: "small" }) })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Menu,
+      {
+        anchorEl,
+        open,
+        onClose: handleClose,
+        PaperProps: {
+          sx: { width, maxHeight: 600, mt: 1 }
+        },
+        children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { size: 24 }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          options.length > 5 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 1, borderBottom: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkJBHRAAN3js.TextField,
+            {
+              size: "small",
+              fullWidth: true,
+              placeholder: "Search...",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              InputProps: {
+                startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.InputAdornment, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { fontSize: "small" }) })
+              }
+            }
+          ) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.List, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+            filteredOptions.map((option) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              _material.ListItemButton,
+              {
+                selected: option.id === selectedId,
+                onClick: () => handleSelect(option.id),
+                disabled: option.disabled,
+                children: [
+                  option.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: option.icon }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { sx: { bgcolor: theme.palette.primary.main }, children: option.name.charAt(0) }) }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemText, { primary: option.name, secondary: option.description })
+                ]
+              },
+              option.id
+            )),
+            filteredOptions.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
+          ] }),
+          onCreate && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 1, borderTop: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkMNM6HE72js.Button,
+            {
+              fullWidth: true,
+              startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Add2.default, {}),
+              onClick: () => {
+                onCreate();
+                handleClose();
+              },
+              children: "Create New"
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.DropdownAnchor = DropdownAnchor; exports.Dropdown = Dropdown; exports.SidebarItem = SidebarItem; exports.Sidebar = Sidebar; exports.ServiceSelectorButton = ServiceSelectorButton; exports.WorkspaceSelectorButton = WorkspaceSelectorButton; exports.Stepper = Stepper; exports.Step = Step; exports.StepLabel = StepLabel; exports.StepContent = StepContent; exports.StepButton = StepButton; exports.NumberedStepper = NumberedStepper; exports.SideNav = SideNav; exports.SideNavHeader = SideNavHeader; exports.NavigationItem = NavigationItem; exports.NavigationList = NavigationList; exports.ConnectionStatus = ConnectionStatus; exports.AccountSection = AccountSection; exports.Tab = Tab; exports.Menu = Menu3; exports.MenuItem = MenuItem; exports.Pagination = Pagination; exports.Selector = Selector;
+//# sourceMappingURL=chunk-EOF3QNPF.js.map