@cere/cere-design-system 0.0.2

package/dist/index.mjs

@@ -0,0 +1,3205 @@
+// src/theme/index.ts
+import { createTheme } from "@mui/material/styles";
+var colors = {
+  primary: {
+    main: "#1976d2",
+    // ROB primary color
+    light: "#1976d2",
+    // Same as main for selected background
+    dark: "#1565c0",
+    contrastText: "#FFFFFF"
+  },
+  secondary: {
+    main: "#666666",
+    light: "#999999",
+    dark: "#333333",
+    contrastText: "#FFFFFF"
+  },
+  success: {
+    main: "#10B981",
+    light: "#34D399",
+    dark: "#059669",
+    contrastText: "#FFFFFF"
+  },
+  error: {
+    main: "#EF4444",
+    light: "#F87171",
+    dark: "#DC2626",
+    contrastText: "#FFFFFF"
+  },
+  warning: {
+    main: "#F59E0B",
+    light: "#FBBF24",
+    dark: "#D97706",
+    contrastText: "#FFFFFF"
+  },
+  tertiary: {
+    main: "#F59E0B",
+    light: "#FBBF24",
+    dark: "#D97706",
+    contrastText: "#1A1A1A"
+  },
+  grey: {
+    50: "#FAFAFA",
+    100: "#F5F5F5",
+    200: "#EEEEEE",
+    300: "#E0E0E0",
+    400: "#BDBDBD",
+    500: "#9E9E9E",
+    600: "#757575",
+    700: "#616161",
+    800: "#424242",
+    900: "#212121"
+  },
+  text: {
+    primary: "#1A1A1A",
+    secondary: "#666666",
+    disabled: "#999999"
+  },
+  background: {
+    default: "#FFFFFF",
+    paper: "#FFFFFF",
+    selected: "rgba(123, 44, 191, 0.1)"
+  }
+};
+var theme = createTheme({
+  palette: {
+    mode: "light",
+    primary: colors.primary,
+    secondary: colors.secondary,
+    success: colors.success,
+    error: colors.error,
+    warning: colors.warning,
+    grey: colors.grey,
+    text: colors.text,
+    background: colors.background
+  },
+  typography: {
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Human Sans', 'Nohemi', sans-serif",
+    h1: {
+      fontWeight: 700,
+      fontSize: "96px",
+      lineHeight: 1.2
+    },
+    h2: {
+      fontWeight: 700,
+      fontSize: "60px",
+      lineHeight: 1.2
+    },
+    h3: {
+      fontWeight: 700,
+      fontSize: "48px",
+      lineHeight: 1.2
+    },
+    h4: {
+      fontWeight: 600,
+      fontSize: "34px",
+      lineHeight: 1.2
+    },
+    h5: {
+      fontWeight: 600,
+      fontSize: "24px",
+      lineHeight: 1.2
+    },
+    h6: {
+      fontWeight: 600,
+      fontSize: "20px",
+      lineHeight: 1.2
+    },
+    subtitle1: {
+      fontWeight: 700,
+      fontSize: "16px",
+      lineHeight: 1.5
+    },
+    subtitle2: {
+      fontWeight: 700,
+      fontSize: "14px",
+      lineHeight: 1.5
+    },
+    body1: {
+      fontWeight: 400,
+      fontSize: "16px",
+      lineHeight: 1.5
+    },
+    body2: {
+      fontWeight: 400,
+      fontSize: "14px",
+      lineHeight: 1.5
+    },
+    button: {
+      fontWeight: 700,
+      fontSize: "14px",
+      textTransform: "uppercase",
+      letterSpacing: "0.5px"
+    },
+    caption: {
+      fontWeight: 400,
+      fontSize: "12px",
+      lineHeight: 1.5
+    },
+    overline: {
+      fontWeight: 800,
+      fontSize: "10px",
+      textTransform: "uppercase",
+      letterSpacing: "1px"
+    }
+  },
+  shape: {
+    borderRadius: 16
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+          borderRadius: 12,
+          fontWeight: 600,
+          padding: "8px 24px",
+          boxShadow: "none",
+          "&:hover": {
+            boxShadow: "none"
+          }
+        },
+        sizeSmall: {
+          padding: "4px 12px",
+          fontSize: "12px"
+        },
+        sizeMedium: {
+          padding: "8px 24px",
+          fontSize: "14px"
+        },
+        sizeLarge: {
+          padding: "12px 24px",
+          fontSize: "16px"
+        }
+      }
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          "& .MuiOutlinedInput-root": {
+            borderRadius: 12
+          }
+        }
+      }
+    },
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          borderRadius: 12
+        }
+      }
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 16,
+          fontWeight: 500
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.05)",
+          border: "1px solid rgba(0, 0, 0, 0.05)"
+        }
+      }
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          borderRight: "1px solid rgba(0, 0, 0, 0.05)"
+        }
+      }
+    },
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8
+        },
+        filled: {
+          borderRadius: 8
+        }
+      }
+    }
+  }
+});
+
+// src/components/buttons/Button.tsx
+import MuiButton from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+var StyledPrimaryButton = styled(MuiButton)(() => ({
+  backgroundColor: colors.primary.main,
+  color: colors.primary.contrastText,
+  "&:hover": {
+    backgroundColor: colors.primary.light
+  },
+  "&:active": {
+    backgroundColor: colors.primary.dark
+  },
+  "&:disabled": {
+    backgroundColor: colors.grey[300],
+    color: colors.grey[500]
+  }
+}));
+var StyledSecondaryButton = styled(MuiButton)(() => ({
+  backgroundColor: "transparent",
+  color: colors.primary.main,
+  border: `1px solid ${colors.primary.main}`,
+  "&:hover": {
+    backgroundColor: colors.background.selected,
+    borderColor: colors.primary.light
+  },
+  "&:active": {
+    backgroundColor: colors.background.selected,
+    borderColor: colors.primary.dark
+  },
+  "&:disabled": {
+    borderColor: colors.grey[300],
+    color: colors.grey[500]
+  }
+}));
+var StyledTertiaryButton = styled(MuiButton)(() => ({
+  backgroundColor: "transparent",
+  color: colors.tertiary.main,
+  "&:hover": {
+    backgroundColor: "rgba(245, 158, 11, 0.1)"
+  },
+  "&:active": {
+    backgroundColor: "rgba(245, 158, 11, 0.2)"
+  },
+  "&:disabled": {
+    color: colors.grey[500]
+  }
+}));
+var Button = ({
+  variant = "primary",
+  children,
+  startIcon,
+  endIcon,
+  ...props
+}) => {
+  const buttonProps = {
+    ...props,
+    startIcon,
+    endIcon
+  };
+  switch (variant) {
+    case "primary":
+      return /* @__PURE__ */ jsx(StyledPrimaryButton, { ...buttonProps, children });
+    case "secondary":
+      return /* @__PURE__ */ jsx(StyledSecondaryButton, { ...buttonProps, children });
+    case "tertiary":
+      return /* @__PURE__ */ jsx(StyledTertiaryButton, { ...buttonProps, children });
+    default:
+      return /* @__PURE__ */ jsx(StyledPrimaryButton, { ...buttonProps, children });
+  }
+};
+
+// src/components/buttons/IconButton.tsx
+import MuiIconButton from "@mui/material/IconButton";
+import { styled as styled2 } from "@mui/material/styles";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StyledIconButton = styled2(MuiIconButton, {
+  shouldForwardProp: (prop) => prop !== "buttonVariant"
+})(({ buttonVariant = "default" }) => {
+  const variants = {
+    primary: {
+      color: colors.primary.main,
+      "&:hover": {
+        backgroundColor: colors.background.selected
+      }
+    },
+    secondary: {
+      color: colors.text.secondary,
+      "&:hover": {
+        backgroundColor: colors.grey[50]
+      }
+    },
+    default: {
+      color: colors.text.primary,
+      "&:hover": {
+        backgroundColor: colors.grey[50]
+      }
+    }
+  };
+  return variants[buttonVariant] || variants.default;
+});
+var IconButton = ({
+  variant = "default",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(StyledIconButton, { buttonVariant: variant, ...props });
+};
+
+// src/components/buttons/LoadingButton.tsx
+import { LoadingButton as MuiLoadingButton } from "@mui/lab";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var LoadingButton = ({
+  loading = false,
+  loadingPosition = "center",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx3(
+    MuiLoadingButton,
+    {
+      loading,
+      loadingPosition,
+      ...props
+    }
+  );
+};
+
+// src/components/buttons/ButtonGroup.tsx
+import {
+  ButtonGroup as MuiButtonGroup
+} from "@mui/material";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ButtonGroup = ({
+  orientation = "horizontal",
+  size = "medium",
+  variant = "outlined",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx4(
+    MuiButtonGroup,
+    {
+      orientation,
+      size,
+      variant,
+      ...props
+    }
+  );
+};
+
+// src/components/inputs/TextField.tsx
+import MuiTextField from "@mui/material/TextField";
+import { styled as styled3 } from "@mui/material/styles";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var StyledTextField = styled3(MuiTextField)(({ error }) => ({
+  "& .MuiOutlinedInput-root": {
+    "&:hover fieldset": {
+      borderColor: error ? colors.error.main : colors.primary.main
+    },
+    "&.Mui-focused fieldset": {
+      borderColor: error ? colors.error.main : colors.primary.main
+    },
+    "&.Mui-error fieldset": {
+      borderColor: colors.error.main
+    }
+  },
+  "& .MuiInputLabel-root": {
+    "&.Mui-focused": {
+      color: error ? colors.error.main : colors.primary.main
+    }
+  }
+}));
+var TextField = ({
+  size = "medium",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx5(StyledTextField, { size: size === "medium" ? "medium" : "small", ...props });
+};
+
+// src/components/inputs/SearchField.tsx
+import SearchIcon from "@mui/icons-material/Search";
+import InputAdornment from "@mui/material/InputAdornment";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SearchField = ({
+  placeholder = "Search...",
+  onSearch,
+  onChange,
+  ...props
+}) => {
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e);
+    }
+    if (onSearch) {
+      onSearch(e.target.value);
+    }
+  };
+  return /* @__PURE__ */ jsx6(
+    TextField,
+    {
+      placeholder,
+      onChange: handleChange,
+      InputProps: {
+        startAdornment: /* @__PURE__ */ jsx6(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx6(SearchIcon, { style: { fontSize: 18, color: "#999" } }) })
+      },
+      ...props
+    }
+  );
+};
+
+// src/components/inputs/FormControl.tsx
+import {
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  FormControlLabel,
+  InputLabel,
+  InputAdornment as InputAdornment2
+} from "@mui/material";
+
+// src/components/inputs/Dropdown.tsx
+import {
+  Select,
+  MenuItem,
+  FormControl as FormControl2,
+  InputLabel as InputLabel2
+} from "@mui/material";
+import { styled as styled4 } from "@mui/material/styles";
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+var StyledFormControl = styled4(FormControl2)({
+  minWidth: 120
+});
+var StyledSelect = styled4(Select)(({ error }) => ({
+  "&:hover .MuiOutlinedInput-notchedOutline": {
+    borderColor: error ? colors.error.main : colors.primary.main
+  },
+  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+    borderColor: error ? colors.error.main : colors.primary.main
+  }
+}));
+var Dropdown = ({
+  label,
+  options,
+  size = "medium",
+  placeholder,
+  value,
+  ...props
+}) => {
+  const selectSize = size === "large" ? "medium" : size;
+  return /* @__PURE__ */ jsxs(StyledFormControl, { size: selectSize, error: props.error, fullWidth: props.fullWidth, children: [
+    label && /* @__PURE__ */ jsx7(InputLabel2, { children: label }),
+    /* @__PURE__ */ jsxs(
+      StyledSelect,
+      {
+        value: value || "",
+        label,
+        size: selectSize,
+        ...props,
+        children: [
+          placeholder && /* @__PURE__ */ jsx7(MenuItem, { value: "", disabled: true, children: placeholder }),
+          options.map((option) => /* @__PURE__ */ jsx7(MenuItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/inputs/ToggleButton.tsx
+import {
+  ToggleButton as MuiToggleButton,
+  ToggleButtonGroup as MuiToggleButtonGroup
+} from "@mui/material";
+import { styled as styled5 } from "@mui/material/styles";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ToggleButton = (props) => {
+  return /* @__PURE__ */ jsx8(MuiToggleButton, { ...props });
+};
+var StyledToggleButtonGroup = styled5(MuiToggleButtonGroup)({
+  "& .MuiToggleButton-root": {
+    border: `1px solid ${colors.grey[300]}`,
+    "&.Mui-selected": {
+      backgroundColor: colors.primary.main,
+      color: colors.primary.contrastText,
+      "&:hover": {
+        backgroundColor: colors.primary.light
+      }
+    },
+    "&:hover": {
+      backgroundColor: colors.grey[50]
+    }
+  }
+});
+var ToggleButtonGroup = (props) => {
+  return /* @__PURE__ */ jsx8(StyledToggleButtonGroup, { ...props });
+};
+
+// src/components/inputs/Switch.tsx
+import MuiSwitch from "@mui/material/Switch";
+import { styled as styled6 } from "@mui/material/styles";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var StyledSwitch = styled6(MuiSwitch)(({ theme: theme2 }) => ({
+  width: 44,
+  height: 24,
+  padding: 0,
+  "& .MuiSwitch-switchBase": {
+    padding: 0,
+    margin: 2,
+    transitionDuration: "300ms",
+    "&.Mui-checked": {
+      transform: "translateX(20px)",
+      color: "#fff",
+      "& + .MuiSwitch-track": {
+        backgroundColor: colors.success.main,
+        opacity: 1,
+        border: 0
+      },
+      "&.Mui-disabled + .MuiSwitch-track": {
+        opacity: 0.5
+      }
+    },
+    "&.Mui-focusVisible .MuiSwitch-thumb": {
+      color: colors.success.main,
+      border: `6px solid #fff`
+    },
+    "&.Mui-disabled .MuiSwitch-thumb": {
+      color: colors.grey[300]
+    },
+    "&.Mui-disabled + .MuiSwitch-track": {
+      opacity: 0.5,
+      backgroundColor: colors.grey[300]
+    }
+  },
+  "& .MuiSwitch-thumb": {
+    boxSizing: "border-box",
+    width: 20,
+    height: 20
+  },
+  "& .MuiSwitch-track": {
+    borderRadius: 24 / 2,
+    backgroundColor: colors.grey[300],
+    opacity: 1,
+    transition: theme2.transitions.create(["background-color"], {
+      duration: 500
+    })
+  }
+}));
+var Switch = ({
+  label,
+  labelPosition = "right",
+  ...props
+}) => {
+  const switchComponent = /* @__PURE__ */ jsx9(StyledSwitch, { ...props });
+  if (!label) {
+    return switchComponent;
+  }
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    labelPosition === "left" && /* @__PURE__ */ jsx9("span", { children: label }),
+    switchComponent,
+    labelPosition === "right" && /* @__PURE__ */ jsx9("span", { children: label })
+  ] });
+};
+
+// src/components/inputs/Checkbox.tsx
+import MuiCheckbox from "@mui/material/Checkbox";
+import { styled as styled7 } from "@mui/material/styles";
+import FormControlLabel2 from "@mui/material/FormControlLabel";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var StyledCheckbox = styled7(MuiCheckbox)(() => ({
+  color: colors.grey[400],
+  "&.Mui-checked": {
+    color: colors.primary.main
+  },
+  "&.MuiCheckbox-indeterminate": {
+    color: colors.primary.main
+  },
+  "&.Mui-disabled": {
+    color: colors.grey[300]
+  },
+  "&:hover": {
+    backgroundColor: colors.background.selected
+  },
+  "&.Mui-focusVisible": {
+    outline: `2px solid ${colors.primary.main}`,
+    outlineOffset: 2
+  }
+}));
+var Checkbox = ({
+  label,
+  labelPosition = "right",
+  ...props
+}) => {
+  const checkboxComponent = /* @__PURE__ */ jsx10(StyledCheckbox, { ...props });
+  if (!label) {
+    return checkboxComponent;
+  }
+  const labelPlacementMap = {
+    left: "start",
+    right: "end"
+  };
+  return /* @__PURE__ */ jsx10(
+    FormControlLabel2,
+    {
+      control: checkboxComponent,
+      label,
+      labelPlacement: labelPlacementMap[labelPosition] || "end"
+    }
+  );
+};
+
+// src/components/inputs/Radio.tsx
+import MuiRadio from "@mui/material/Radio";
+import { styled as styled8 } from "@mui/material/styles";
+import FormControlLabel3 from "@mui/material/FormControlLabel";
+import RadioGroup from "@mui/material/RadioGroup";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var StyledRadio = styled8(MuiRadio)(() => ({
+  color: colors.grey[400],
+  "&.Mui-checked": {
+    color: colors.primary.main
+  },
+  "&.Mui-disabled": {
+    color: colors.grey[300]
+  },
+  "&:hover": {
+    backgroundColor: colors.background.selected
+  },
+  "&.Mui-focusVisible": {
+    outline: `2px solid ${colors.primary.main}`,
+    outlineOffset: 2
+  }
+}));
+var Radio = ({
+  label,
+  labelPosition = "right",
+  ...props
+}) => {
+  const radioComponent = /* @__PURE__ */ jsx11(StyledRadio, { ...props });
+  if (!label) {
+    return radioComponent;
+  }
+  const labelPlacementMap = {
+    left: "start",
+    right: "end"
+  };
+  return /* @__PURE__ */ jsx11(
+    FormControlLabel3,
+    {
+      control: radioComponent,
+      label,
+      labelPlacement: labelPlacementMap[labelPosition] || "end"
+    }
+  );
+};
+
+// src/components/navigation/Sidebar.tsx
+import {
+  Drawer,
+  List,
+  styled as styled10,
+  Box
+} from "@mui/material";
+
+// src/components/navigation/SidebarItem.tsx
+import {
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  styled as styled9
+} from "@mui/material";
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+var StyledListItemButton = styled9(ListItemButton, {
+  shouldForwardProp: (prop) => prop !== "selected" && prop !== "size"
+})(({ 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 ? colors.primary.main : colors.text.primary,
+    backgroundColor: selected ? colors.background.selected : "transparent",
+    "&:hover": {
+      backgroundColor: selected ? colors.background.selected : colors.grey[50]
+    },
+    "& .MuiListItemIcon-root": {
+      color: selected ? colors.primary.main : colors.text.secondary,
+      minWidth: "40px"
+    },
+    "& .MuiListItemText-primary": {
+      fontWeight: selected ? 600 : 400,
+      color: selected ? colors.primary.main : colors.text.primary
+    }
+  };
+});
+var SidebarItem = ({
+  label,
+  icon,
+  selected = false,
+  onClick,
+  size = "medium",
+  endIcon,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs3(StyledListItemButton, { selected, size, onClick, children: [
+    icon && /* @__PURE__ */ jsx12(ListItemIcon, { children: icon }),
+    /* @__PURE__ */ jsx12(ListItemText, { primary: label }),
+    endIcon && /* @__PURE__ */ jsx12("div", { style: { marginLeft: "auto" }, children: endIcon }),
+    children
+  ] });
+};
+
+// src/components/navigation/Sidebar.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var StyledDrawer = styled10(Drawer)(() => ({
+  "& .MuiDrawer-paper": {
+    backgroundColor: colors.background.paper,
+    borderRight: `1px solid ${colors.grey[200]}`,
+    boxShadow: "none"
+  }
+}));
+var Sidebar = ({
+  open = true,
+  width = 280,
+  items,
+  onClose,
+  variant = "permanent"
+}) => {
+  return /* @__PURE__ */ jsx13(
+    StyledDrawer,
+    {
+      variant,
+      open,
+      onClose,
+      sx: {
+        width,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width,
+          boxSizing: "border-box"
+        }
+      },
+      children: /* @__PURE__ */ jsx13(Box, { sx: { overflow: "auto", padding: "8px 0" }, children: /* @__PURE__ */ jsx13(List, { children: items.map((item, index) => /* @__PURE__ */ jsx13(SidebarItem, { ...item }, index)) }) })
+    }
+  );
+};
+
+// src/components/navigation/ServiceSelector.tsx
+import { useState, useCallback } from "react";
+import {
+  Box as Box2,
+  Typography,
+  Avatar,
+  Tooltip,
+  IconButton as IconButton2,
+  Link,
+  Chip,
+  TextField as TextField2,
+  InputAdornment as InputAdornment3,
+  List as List2,
+  ListItem,
+  ListItemAvatar,
+  ListItemText as ListItemText2,
+  Button as Button2,
+  Menu
+} from "@mui/material";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import ArchiveIcon from "@mui/icons-material/Archive";
+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 { Fragment, jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+var ServiceSelectorButton = ({
+  services,
+  selectedServiceId,
+  loading = false,
+  compact = false,
+  onSelectService,
+  onServiceClick,
+  onCreateService,
+  onServiceCreated,
+  isManager = false,
+  sx = {},
+  panelWidth = 350
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [showArchived, setShowArchived] = useState(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 = useCallback(
+    (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__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsx14(Box2, { sx: { position: "relative" }, children: /* @__PURE__ */ jsx14(Tooltip, { title: "Select service", placement: "right", children: /* @__PURE__ */ jsx14(
+        IconButton2,
+        {
+          onClick: handleOpenSelector,
+          sx: {
+            p: 1,
+            "&:hover": {
+              bgcolor: "rgba(0, 0, 0, 0.04)"
+            },
+            ...sx
+          },
+          children: /* @__PURE__ */ jsx14(
+            Avatar,
+            {
+              sx: {
+                width: 32,
+                height: 32,
+                bgcolor: selectedServiceId ? "primary.main" : "grey.400",
+                fontSize: "0.9rem"
+              },
+              children: selectedService ? selectedService.name.charAt(0) : "D"
+            }
+          )
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx14(
+        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
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
+      selectedService ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+        isManager ? /* @__PURE__ */ jsxs4(
+          Link,
+          {
+            underline: "hover",
+            color: "inherit",
+            onClick: handleServiceClick,
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              fontSize: "0.875rem",
+              cursor: "pointer",
+              mr: 0.5
+            },
+            children: [
+              /* @__PURE__ */ jsx14(
+                Avatar,
+                {
+                  sx: {
+                    width: 20,
+                    height: 20,
+                    bgcolor: "primary.main",
+                    fontSize: "0.7rem",
+                    mr: 0.5
+                  },
+                  children: selectedService.name.charAt(0)
+                }
+              ),
+              selectedService.name
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs4(
+          Box2,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              fontSize: "0.875rem",
+              mr: 0.5,
+              color: "text.primary"
+            },
+            children: [
+              /* @__PURE__ */ jsx14(
+                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__ */ jsx14(
+          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__ */ jsx14(
+        Typography,
+        {
+          variant: "body2",
+          color: "text.secondary",
+          sx: {
+            fontSize: "0.875rem"
+          },
+          children: "Select Service"
+        }
+      ),
+      /* @__PURE__ */ jsx14(
+        IconButton2,
+        {
+          onClick: handleOpenSelector,
+          size: "small",
+          sx: {
+            p: 0.2,
+            ml: 0.5,
+            color: "text.secondary"
+          },
+          children: /* @__PURE__ */ jsx14(KeyboardArrowDownIcon, { fontSize: "small" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx14(
+      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
+      }
+    )
+  ] });
+};
+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
+}) => {
+  const [internalSearchTerm, setInternalSearchTerm] = useState("");
+  const [internalShowArchived, setInternalShowArchived] = useState(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__ */ jsxs4(
+    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__ */ jsx14(
+          Box2,
+          {
+            sx: {
+              paddingLeft: 2,
+              paddingRight: 2,
+              paddingTop: 0.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: [
+                  /* @__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, { 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"
+                      }
+                    )
+                  ] }) })
+                ] })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs4(Box2, { sx: { px: 2, pt: 2, pb: 1.5 }, children: [
+          /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
+            /* @__PURE__ */ jsx14(
+              TextField2,
+              {
+                size: "small",
+                placeholder: "Search services...",
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                sx: { flex: 1 },
+                InputProps: {
+                  startAdornment: /* @__PURE__ */ jsx14(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx14(SearchIcon2, { fontSize: "small", color: "action" }) }),
+                  sx: {
+                    borderRadius: 1.5,
+                    backgroundColor: "rgba(0, 0, 0, 0.04)",
+                    "& fieldset": { border: "none" },
+                    py: 0.5
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx14(Tooltip, { title: showArchived ? "Show active" : "Show archived", children: /* @__PURE__ */ jsx14(
+              IconButton2,
+              {
+                size: "small",
+                onClick: toggleArchived,
+                color: showArchived ? "primary" : "default",
+                sx: { ml: 1 },
+                children: showArchived ? /* @__PURE__ */ jsx14(UnarchiveIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx14(ArchiveIcon, { fontSize: "small" })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx14(
+            Box2,
+            {
+              sx: {
+                maxHeight: 400,
+                overflow: "auto",
+                py: 1
+              },
+              children: loading ? /* @__PURE__ */ jsx14(Box2, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx14(Typography, { variant: "body2", color: "text.secondary", children: "Loading services..." }) }) : filteredServices.length === 0 ? /* @__PURE__ */ jsx14(Box2, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx14(Typography, { variant: "body2", color: "text.secondary", children: searchTerm ? `No ${showArchived ? "archived " : ""}services matching "${searchTerm}"` : showArchived ? "No archived services found" : "No active services found" }) }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+                /* @__PURE__ */ jsxs4(
+                  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__ */ jsx14(
+                        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__ */ jsx14(List2, { disablePadding: true, children: filteredServices.map((service) => /* @__PURE__ */ jsxs4(
+                  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__ */ jsx14(
+                      CheckIcon,
+                      {
+                        sx: {
+                          color: "primary.main",
+                          fontSize: "1.2rem"
+                        }
+                      }
+                    ) : null,
+                    children: [
+                      /* @__PURE__ */ jsx14(ListItemAvatar, { sx: { minWidth: 40 }, children: /* @__PURE__ */ jsx14(
+                        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__ */ jsx14(
+                        ListItemText2,
+                        {
+                          primary: /* @__PURE__ */ jsx14(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsx14(
+                            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__ */ jsx14(
+            Box2,
+            {
+              sx: {
+                paddingTop: 2,
+                paddingLeft: 2,
+                paddingRight: 2,
+                borderTop: 1,
+                borderColor: "divider"
+              },
+              children: /* @__PURE__ */ jsx14(
+                Button2,
+                {
+                  fullWidth: true,
+                  variant: "text",
+                  startIcon: /* @__PURE__ */ jsx14(AddIcon, {}),
+                  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
+import React2, { useState as useState2, useCallback as useCallback2 } from "react";
+import {
+  Box as Box3,
+  Typography as Typography2,
+  Avatar as Avatar2,
+  IconButton as IconButton3,
+  Link as Link2,
+  TextField as TextField3,
+  InputAdornment as InputAdornment4,
+  List as List3,
+  ListItem as ListItem2,
+  ListItemAvatar as ListItemAvatar2,
+  ListItemText as ListItemText3,
+  Button as Button3,
+  Menu as Menu2
+} from "@mui/material";
+import KeyboardArrowDownIcon2 from "@mui/icons-material/KeyboardArrowDown";
+import SearchIcon3 from "@mui/icons-material/Search";
+import AddIcon2 from "@mui/icons-material/Add";
+import CheckIcon2 from "@mui/icons-material/Check";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+var WorkspaceSelectorButton = ({
+  workspaces,
+  selectedWorkspaceId,
+  loading = false,
+  onSelectWorkspace,
+  onWorkspaceClick,
+  onCreateWorkspace,
+  sx = {},
+  panelWidth = 350
+}) => {
+  const [anchorEl, setAnchorEl] = useState2(null);
+  const handleOpenSelector = (event) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectWorkspace = useCallback2(
+    (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__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsxs5(Box3, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
+      selectedWorkspace ? /* @__PURE__ */ jsx15(Fragment2, { children: /* @__PURE__ */ jsxs5(
+        Link2,
+        {
+          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__ */ jsx15(
+              Avatar2,
+              {
+                sx: {
+                  width: 20,
+                  height: 20,
+                  bgcolor: "secondary.main",
+                  fontSize: "0.7rem",
+                  mr: 0.5
+                },
+                children: selectedWorkspace.name.charAt(0)
+              }
+            ),
+            selectedWorkspace.name
+          ]
+        }
+      ) }) : /* @__PURE__ */ jsx15(
+        Typography2,
+        {
+          variant: "body2",
+          color: "text.secondary",
+          sx: {
+            fontSize: "0.875rem"
+          },
+          children: "Select Workspace"
+        }
+      ),
+      /* @__PURE__ */ jsx15(
+        IconButton3,
+        {
+          onClick: handleOpenSelector,
+          size: "small",
+          sx: {
+            p: 0.2,
+            ml: 0.5,
+            color: "text.secondary"
+          },
+          children: /* @__PURE__ */ jsx15(KeyboardArrowDownIcon2, { fontSize: "small" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx15(
+      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] = useState2("");
+  React2.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__ */ jsx15(
+    Menu2,
+    {
+      open,
+      anchorEl,
+      onClose,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      PaperProps: {
+        sx: {
+          width,
+          maxHeight: 600,
+          mt: 1,
+          borderRadius: 2
+        }
+      },
+      children: /* @__PURE__ */ jsxs5(Box3, { children: [
+        /* @__PURE__ */ jsx15(Box3, { sx: { px: 2, pt: 2, pb: 1.5 }, children: /* @__PURE__ */ jsx15(
+          TextField3,
+          {
+            fullWidth: true,
+            size: "small",
+            placeholder: "Search workspaces...",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            InputProps: {
+              startAdornment: /* @__PURE__ */ jsx15(InputAdornment4, { position: "start", children: /* @__PURE__ */ jsx15(SearchIcon3, { fontSize: "small" }) })
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx15(Box3, { sx: { maxHeight: 400, overflowY: "auto" }, children: loading ? /* @__PURE__ */ jsx15(Box3, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx15(Typography2, { variant: "body2", color: "text.secondary", children: "Loading..." }) }) : filteredWorkspaces.length === 0 ? /* @__PURE__ */ jsx15(Box3, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx15(Typography2, { variant: "body2", color: "text.secondary", children: "No workspaces found" }) }) : /* @__PURE__ */ jsx15(List3, { dense: true, children: filteredWorkspaces.map((workspace) => /* @__PURE__ */ jsxs5(
+          ListItem2,
+          {
+            onClick: () => handleSelect(workspace.id),
+            sx: {
+              py: 0.5,
+              cursor: "pointer",
+              bgcolor: workspace.id === selectedWorkspaceId ? "action.selected" : "transparent",
+              "&:hover": {
+                bgcolor: "action.hover"
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx15(ListItemAvatar2, { children: /* @__PURE__ */ jsx15(
+                Avatar2,
+                {
+                  sx: { width: 32, height: 32, bgcolor: "secondary.main" },
+                  children: workspace.name.charAt(0)
+                }
+              ) }),
+              /* @__PURE__ */ jsx15(
+                ListItemText3,
+                {
+                  primary: /* @__PURE__ */ jsxs5(Box3, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                    /* @__PURE__ */ jsx15(Typography2, { variant: "body2", fontWeight: 500, children: workspace.name }),
+                    workspace.id === selectedWorkspaceId && /* @__PURE__ */ jsx15(CheckIcon2, { fontSize: "small", color: "primary" })
+                  ] }),
+                  secondary: workspace.description
+                }
+              )
+            ]
+          },
+          workspace.id
+        )) }) }),
+        /* @__PURE__ */ jsx15(
+          Box3,
+          {
+            sx: {
+              paddingTop: 2,
+              paddingLeft: 2,
+              paddingRight: 2,
+              borderTop: 1,
+              borderColor: "divider"
+            },
+            children: /* @__PURE__ */ jsx15(
+              Button3,
+              {
+                fullWidth: true,
+                variant: "text",
+                startIcon: /* @__PURE__ */ jsx15(AddIcon2, {}),
+                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
+import {
+  Stepper as MuiStepper,
+  Step as MuiStep,
+  StepLabel as MuiStepLabel,
+  StepContent as MuiStepContent,
+  StepButton as MuiStepButton
+} from "@mui/material";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Stepper = (props) => {
+  return /* @__PURE__ */ jsx16(MuiStepper, { ...props });
+};
+var Step = (props) => {
+  return /* @__PURE__ */ jsx16(MuiStep, { ...props });
+};
+var StepLabel = (props) => {
+  return /* @__PURE__ */ jsx16(MuiStepLabel, { ...props });
+};
+var StepContent = (props) => {
+  return /* @__PURE__ */ jsx16(MuiStepContent, { ...props });
+};
+var StepButton = (props) => {
+  return /* @__PURE__ */ jsx16(MuiStepButton, { ...props });
+};
+
+// src/components/feedback/Badge.tsx
+import MuiBadge from "@mui/material/Badge";
+import { styled as styled11 } from "@mui/material/styles";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var getBadgeColor = (variant) => {
+  switch (variant) {
+    case "primary":
+      return colors.primary.main;
+    case "success":
+      return colors.success.main;
+    case "error":
+      return colors.error.main;
+    default:
+      return colors.grey[400];
+  }
+};
+var StyledBadge = styled11(MuiBadge, {
+  shouldForwardProp: (prop) => prop !== "badgeVariant"
+})(({ badgeVariant = "default" }) => ({
+  "& .MuiBadge-badge": {
+    backgroundColor: getBadgeColor(badgeVariant),
+    color: "#FFFFFF"
+  }
+}));
+var Badge = ({
+  variant = "default",
+  children,
+  badgeContent,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx17(StyledBadge, { badgeVariant: variant, badgeContent, ...props, children });
+};
+
+// src/components/feedback/Chip.tsx
+import MuiChip from "@mui/material/Chip";
+import { styled as styled12 } from "@mui/material/styles";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var StyledDefaultChip = styled12(MuiChip)({
+  backgroundColor: colors.grey[100],
+  color: colors.text.primary,
+  "&:hover": {
+    backgroundColor: colors.grey[200]
+  }
+});
+var StyledActiveChip = styled12(MuiChip)({
+  backgroundColor: colors.background.selected,
+  color: colors.primary.main,
+  "&:hover": {
+    backgroundColor: colors.background.selected
+  }
+});
+var Chip2 = ({
+  variant = "default",
+  ...props
+}) => {
+  if (variant === "active") {
+    return /* @__PURE__ */ jsx18(StyledActiveChip, { ...props });
+  }
+  return /* @__PURE__ */ jsx18(StyledDefaultChip, { ...props });
+};
+
+// src/components/feedback/Tooltip.tsx
+import MuiTooltip from "@mui/material/Tooltip";
+import { styled as styled13 } from "@mui/material/styles";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var StyledTooltip = styled13(MuiTooltip)({
+  "& .MuiTooltip-tooltip": {
+    backgroundColor: colors.grey[800],
+    color: "#FFFFFF",
+    fontSize: "12px",
+    padding: "8px 12px",
+    borderRadius: "4px"
+  },
+  "& .MuiTooltip-arrow": {
+    color: colors.grey[800]
+  }
+});
+var Tooltip2 = (props) => {
+  return /* @__PURE__ */ jsx19(StyledTooltip, { ...props });
+};
+
+// src/components/feedback/Progress.tsx
+import {
+  LinearProgress,
+  CircularProgress,
+  styled as styled14
+} from "@mui/material";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var StyledLinearProgress = styled14(LinearProgress)({
+  height: 4,
+  borderRadius: 2,
+  backgroundColor: colors.grey[200],
+  "& .MuiLinearProgress-bar": {
+    backgroundColor: colors.primary.main,
+    borderRadius: 2
+  }
+});
+var StyledCircularProgress = styled14(CircularProgress)({
+  color: colors.primary.main
+});
+var Progress = ({
+  variant = "linear",
+  value,
+  size = 40,
+  thickness = 4
+}) => {
+  if (variant === "circular") {
+    return /* @__PURE__ */ jsx20(StyledCircularProgress, { size, thickness });
+  }
+  return /* @__PURE__ */ jsx20(
+    StyledLinearProgress,
+    {
+      variant: value !== void 0 ? "determinate" : "indeterminate",
+      value
+    }
+  );
+};
+
+// src/components/navigation/Tab.tsx
+import MuiTab from "@mui/material/Tab";
+import { styled as styled15 } from "@mui/material/styles";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var StyledTab = styled15(MuiTab)({
+  textTransform: "none",
+  minHeight: "48px",
+  fontWeight: 400,
+  color: colors.text.primary,
+  borderBottom: "2px solid transparent",
+  "&:hover": {
+    color: colors.primary.main
+  },
+  "&.Mui-selected": {
+    fontWeight: 600,
+    color: colors.primary.main,
+    borderBottom: `2px solid ${colors.primary.main}`
+  }
+});
+var Tab = ({
+  badge,
+  badgeVariant = "primary",
+  label,
+  ...props
+}) => {
+  const tabLabel = badge !== void 0 ? /* @__PURE__ */ jsx21(Badge, { variant: badgeVariant, badgeContent: badge, children: label }) : label;
+  return /* @__PURE__ */ jsx21(StyledTab, { label: tabLabel, ...props });
+};
+
+// src/components/navigation/Menu.tsx
+import {
+  Menu as MuiMenu,
+  MenuItem as MuiMenuItem,
+  ListItemIcon as ListItemIcon2,
+  ListItemText as ListItemText4,
+  Divider
+} from "@mui/material";
+import { styled as styled16 } from "@mui/material/styles";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
+var StyledMenu = styled16(MuiMenu)({
+  "& .MuiPaper-root": {
+    borderRadius: 8,
+    boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
+    minWidth: 200
+  },
+  "& .MuiMenuItem-root": {
+    padding: "8px 16px",
+    "&:hover": {
+      backgroundColor: colors.background.selected
+    }
+  }
+});
+var Menu3 = ({ anchorEl, onClose, children, ...props }) => {
+  return /* @__PURE__ */ jsx22(
+    StyledMenu,
+    {
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      ...props,
+      children
+    }
+  );
+};
+var MenuItem2 = ({
+  icon,
+  label,
+  onClick,
+  disabled = false,
+  divider = false
+}) => {
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsxs6(MuiMenuItem, { onClick, disabled, children: [
+      icon && /* @__PURE__ */ jsx22(ListItemIcon2, { children: icon }),
+      /* @__PURE__ */ jsx22(ListItemText4, { children: label })
+    ] }),
+    divider && /* @__PURE__ */ jsx22(Divider, {})
+  ] });
+};
+
+// src/components/navigation/Pagination.tsx
+import MuiPagination from "@mui/material/Pagination";
+import { styled as styled17 } from "@mui/material/styles";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var StyledPagination = styled17(MuiPagination)({
+  "& .MuiPaginationItem-root": {
+    "&.Mui-selected": {
+      backgroundColor: colors.primary.main,
+      color: colors.primary.contrastText,
+      "&:hover": {
+        backgroundColor: colors.primary.light
+      }
+    },
+    "&:hover": {
+      backgroundColor: colors.background.selected
+    }
+  }
+});
+var Pagination = ({ color = "primary", ...props }) => {
+  return /* @__PURE__ */ jsx23(StyledPagination, { color, ...props });
+};
+
+// src/components/navigation/Selector.tsx
+import { useState as useState3 } from "react";
+import {
+  Box as Box4,
+  Typography as Typography3,
+  Avatar as Avatar3,
+  Menu as Menu4,
+  InputAdornment as InputAdornment5,
+  List as List4,
+  ListItemButton as ListItemButton2,
+  ListItemAvatar as ListItemAvatar3,
+  ListItemText as ListItemText5,
+  CircularProgress as CircularProgress2
+} from "@mui/material";
+import KeyboardArrowDownIcon3 from "@mui/icons-material/KeyboardArrowDown";
+import SearchIcon4 from "@mui/icons-material/Search";
+import AddIcon3 from "@mui/icons-material/Add";
+
+// src/components/layout/Link.tsx
+import MuiLink from "@mui/material/Link";
+import { styled as styled18 } from "@mui/material/styles";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var StyledLink = styled18(MuiLink)({
+  color: colors.primary.main,
+  "&:hover": {
+    color: colors.primary.light
+  }
+});
+var Link3 = ({ underline = "hover", ...props }) => {
+  return /* @__PURE__ */ jsx24(StyledLink, { underline, ...props });
+};
+
+// src/components/navigation/Selector.tsx
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs7 } from "react/jsx-runtime";
+var Selector = ({
+  options,
+  selectedId,
+  onSelect,
+  onCreate,
+  loading = false,
+  placeholder = "Select...",
+  emptyMessage = "No items found",
+  compact = false,
+  renderSelected,
+  width = 350
+}) => {
+  const [anchorEl, setAnchorEl] = useState3(null);
+  const [searchTerm, setSearchTerm] = useState3("");
+  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__ */ jsxs7(Box4, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+    option.avatar ? /* @__PURE__ */ jsx25(Avatar3, { src: option.avatar, sx: { width: 20, height: 20 } }) : option.icon ? option.icon : /* @__PURE__ */ jsx25(Avatar3, { sx: { width: 20, height: 20, bgcolor: colors.primary.main, fontSize: "0.7rem" }, children: option.name.charAt(0) }),
+    /* @__PURE__ */ jsx25(Typography3, { variant: "body2", children: option.name })
+  ] });
+  if (compact) {
+    return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+      /* @__PURE__ */ jsx25(IconButton, { onClick: handleOpen, size: "small", children: selectedOption ? selectedOption.avatar ? /* @__PURE__ */ jsx25(Avatar3, { src: selectedOption.avatar, sx: { width: 32, height: 32 } }) : /* @__PURE__ */ jsx25(Avatar3, { sx: { width: 32, height: 32, bgcolor: colors.primary.main }, children: selectedOption.name.charAt(0) }) : /* @__PURE__ */ jsx25(Avatar3, { sx: { width: 32, height: 32, bgcolor: colors.grey[400] }, children: "?" }) }),
+      /* @__PURE__ */ jsx25(
+        Menu4,
+        {
+          anchorEl,
+          open,
+          onClose: handleClose,
+          PaperProps: {
+            sx: { width, maxHeight: 600, mt: 1 }
+          },
+          children: loading ? /* @__PURE__ */ jsx25(Box4, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx25(CircularProgress2, { size: 24 }) }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+            options.length > 5 && /* @__PURE__ */ jsx25(Box4, { sx: { p: 1, borderBottom: `1px solid ${colors.grey[200]}` }, children: /* @__PURE__ */ jsx25(
+              TextField,
+              {
+                size: "small",
+                fullWidth: true,
+                placeholder: "Search...",
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                InputProps: {
+                  startAdornment: /* @__PURE__ */ jsx25(InputAdornment5, { position: "start", children: /* @__PURE__ */ jsx25(SearchIcon4, { fontSize: "small" }) })
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs7(List4, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+              filteredOptions.map((option) => /* @__PURE__ */ jsxs7(
+                ListItemButton2,
+                {
+                  selected: option.id === selectedId,
+                  onClick: () => handleSelect(option.id),
+                  disabled: option.disabled,
+                  children: [
+                    option.avatar ? /* @__PURE__ */ jsx25(ListItemAvatar3, { children: /* @__PURE__ */ jsx25(Avatar3, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ jsx25(ListItemAvatar3, { children: option.icon }) : /* @__PURE__ */ jsx25(ListItemAvatar3, { children: /* @__PURE__ */ jsx25(Avatar3, { sx: { bgcolor: colors.primary.main }, children: option.name.charAt(0) }) }),
+                    /* @__PURE__ */ jsx25(ListItemText5, { primary: option.name, secondary: option.description })
+                  ]
+                },
+                option.id
+              )),
+              filteredOptions.length === 0 && /* @__PURE__ */ jsx25(Box4, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx25(Typography3, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
+            ] }),
+            onCreate && /* @__PURE__ */ jsx25(Box4, { sx: { p: 1, borderTop: `1px solid ${colors.grey[200]}` }, children: /* @__PURE__ */ jsx25(
+              Button,
+              {
+                fullWidth: true,
+                startIcon: /* @__PURE__ */ jsx25(AddIcon3, {}),
+                onClick: () => {
+                  onCreate();
+                  handleClose();
+                },
+                children: "Create New"
+              }
+            ) })
+          ] })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsxs7(Box4, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+      selectedOption ? renderSelected ? /* @__PURE__ */ jsx25(Link3, { onClick: handleOpen, underline: "hover", children: renderSelected(selectedOption) }) : /* @__PURE__ */ jsx25(Link3, { onClick: handleOpen, underline: "hover", children: defaultRenderSelected(selectedOption) }) : /* @__PURE__ */ jsx25(Typography3, { variant: "body2", color: "text.secondary", children: placeholder }),
+      /* @__PURE__ */ jsx25(IconButton, { onClick: handleOpen, size: "small", sx: { p: 0.2, ml: 0.5 }, children: /* @__PURE__ */ jsx25(KeyboardArrowDownIcon3, { fontSize: "small" }) })
+    ] }),
+    /* @__PURE__ */ jsx25(
+      Menu4,
+      {
+        anchorEl,
+        open,
+        onClose: handleClose,
+        PaperProps: {
+          sx: { width, maxHeight: 600, mt: 1 }
+        },
+        children: loading ? /* @__PURE__ */ jsx25(Box4, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx25(CircularProgress2, { size: 24 }) }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+          options.length > 5 && /* @__PURE__ */ jsx25(Box4, { sx: { p: 1, borderBottom: `1px solid ${colors.grey[200]}` }, children: /* @__PURE__ */ jsx25(
+            TextField,
+            {
+              size: "small",
+              fullWidth: true,
+              placeholder: "Search...",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              InputProps: {
+                startAdornment: /* @__PURE__ */ jsx25(InputAdornment5, { position: "start", children: /* @__PURE__ */ jsx25(SearchIcon4, { fontSize: "small" }) })
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs7(List4, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+            filteredOptions.map((option) => /* @__PURE__ */ jsxs7(
+              ListItemButton2,
+              {
+                selected: option.id === selectedId,
+                onClick: () => handleSelect(option.id),
+                disabled: option.disabled,
+                children: [
+                  option.avatar ? /* @__PURE__ */ jsx25(ListItemAvatar3, { children: /* @__PURE__ */ jsx25(Avatar3, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ jsx25(ListItemAvatar3, { children: option.icon }) : /* @__PURE__ */ jsx25(ListItemAvatar3, { children: /* @__PURE__ */ jsx25(Avatar3, { sx: { bgcolor: colors.primary.main }, children: option.name.charAt(0) }) }),
+                  /* @__PURE__ */ jsx25(ListItemText5, { primary: option.name, secondary: option.description })
+                ]
+              },
+              option.id
+            )),
+            filteredOptions.length === 0 && /* @__PURE__ */ jsx25(Box4, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx25(Typography3, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
+          ] }),
+          onCreate && /* @__PURE__ */ jsx25(Box4, { sx: { p: 1, borderTop: `1px solid ${colors.grey[200]}` }, children: /* @__PURE__ */ jsx25(
+            Button,
+            {
+              fullWidth: true,
+              startIcon: /* @__PURE__ */ jsx25(AddIcon3, {}),
+              onClick: () => {
+                onCreate();
+                handleClose();
+              },
+              children: "Create New"
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/components/layout/Dialog.tsx
+import {
+  Dialog as MuiDialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button as Button4,
+  IconButton as IconButton4,
+  Box as Box5,
+  Typography as Typography4,
+  Divider as Divider2,
+  CircularProgress as CircularProgress3
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs8 } from "react/jsx-runtime";
+var Dialog = ({
+  open,
+  title,
+  onClose,
+  onSubmit,
+  submitLabel = "Save",
+  cancelLabel = "Cancel",
+  isLoading = false,
+  disableSubmit = false,
+  showActions = true,
+  headerAction,
+  fullWidth = true,
+  maxWidth = "md",
+  children,
+  dividers = true,
+  confirmBeforeClose = false,
+  ...dialogProps
+}) => {
+  const handleCloseAttempt = (e) => {
+    if (e) e.stopPropagation();
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs8(
+    MuiDialog,
+    {
+      open,
+      onClose: (_, reason) => {
+        if (reason === "backdropClick" || reason === "escapeKeyDown" && !confirmBeforeClose) {
+          onClose();
+        }
+      },
+      fullWidth,
+      maxWidth,
+      ...dialogProps,
+      PaperProps: {
+        sx: { minHeight: dialogProps.fullScreen ? void 0 : "auto" },
+        ...dialogProps.PaperProps
+      },
+      children: [
+        /* @__PURE__ */ jsxs8(DialogTitle, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2 }, children: [
+          /* @__PURE__ */ jsx26(Box5, { sx: { display: "flex", alignItems: "center" }, children: typeof title === "string" ? /* @__PURE__ */ jsx26(Typography4, { variant: "h6", children: title }) : title }),
+          /* @__PURE__ */ jsxs8(Box5, { sx: { display: "flex", alignItems: "center" }, children: [
+            headerAction,
+            /* @__PURE__ */ jsx26(
+              IconButton4,
+              {
+                edge: "end",
+                color: "inherit",
+                onClick: handleCloseAttempt,
+                "aria-label": "close",
+                children: /* @__PURE__ */ jsx26(CloseIcon, {})
+              }
+            )
+          ] })
+        ] }),
+        dividers && /* @__PURE__ */ jsx26(Divider2, {}),
+        /* @__PURE__ */ jsx26(DialogContent, { dividers, children }),
+        showActions && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+          dividers && /* @__PURE__ */ jsx26(Divider2, {}),
+          /* @__PURE__ */ jsxs8(DialogActions, { children: [
+            /* @__PURE__ */ jsx26(
+              Button4,
+              {
+                onClick: handleCloseAttempt,
+                disabled: isLoading,
+                children: cancelLabel
+              }
+            ),
+            onSubmit && /* @__PURE__ */ jsx26(
+              Button4,
+              {
+                variant: "contained",
+                color: "primary",
+                onClick: onSubmit,
+                disabled: disableSubmit || isLoading,
+                startIcon: isLoading ? /* @__PURE__ */ jsx26(CircularProgress3, { size: 20 }) : void 0,
+                children: submitLabel
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// 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";
+var StyledDrawer2 = styled19(MuiDrawer, {
+  shouldForwardProp: (prop) => prop !== "width" && prop !== "miniWidth" && prop !== "collapsed"
+})(({ theme: theme2, width = 240, miniWidth = 72, collapsed }) => ({
+  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", {
+      easing: theme2.transitions.easing.sharp,
+      duration: theme2.transitions.duration.enteringScreen
+    }),
+    overflow: collapsed ? "hidden" : "auto"
+  }
+}));
+var Drawer2 = ({
+  width = 240,
+  miniWidth = 72,
+  collapsed = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx27(
+    StyledDrawer2,
+    {
+      width,
+      miniWidth,
+      collapsed,
+      ...props
+    }
+  );
+};
+
+// src/components/layout/Card.tsx
+import MuiCard from "@mui/material/Card";
+import MuiCardContent from "@mui/material/CardContent";
+import MuiCardHeader from "@mui/material/CardHeader";
+import MuiCardActions from "@mui/material/CardActions";
+import { styled as styled20 } from "@mui/material/styles";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var StyledCard = styled20(MuiCard, {
+  shouldForwardProp: (prop) => prop !== "hoverable" && prop !== "clickable"
+})(({ hoverable, clickable }) => ({
+  borderRadius: 8,
+  boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.12)",
+  transition: "all 0.2s ease-in-out",
+  ...clickable && {
+    cursor: "pointer"
+  },
+  ...hoverable && {
+    "&:hover": {
+      boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
+      transform: "translateY(-2px)"
+    }
+  }
+}));
+var Card = ({ hoverable = false, clickable = false, children, ...props }) => {
+  return /* @__PURE__ */ jsx28(StyledCard, { hoverable, clickable, ...props, children });
+};
+var CardContent = (props) => {
+  return /* @__PURE__ */ jsx28(MuiCardContent, { ...props });
+};
+var CardHeader = (props) => {
+  return /* @__PURE__ */ jsx28(MuiCardHeader, { ...props });
+};
+var CardActions = (props) => {
+  return /* @__PURE__ */ jsx28(MuiCardActions, { ...props });
+};
+
+// src/components/layout/List.tsx
+import {
+  List as MuiList,
+  ListItem as MuiListItem,
+  ListItemText as ListItemText6,
+  ListItemIcon as ListItemIcon3,
+  ListItemSecondaryAction
+} from "@mui/material";
+import { styled as styled21 } from "@mui/material/styles";
+import { jsx as jsx29, jsxs as jsxs9 } from "react/jsx-runtime";
+var List5 = (props) => {
+  return /* @__PURE__ */ jsx29(MuiList, { ...props });
+};
+var StyledListItem = styled21(MuiListItem, {
+  shouldForwardProp: (prop) => prop !== "hoverable"
+})(({ hoverable = true }) => ({
+  border: `1px solid ${colors.grey[200]}`,
+  borderRadius: 8,
+  marginBottom: 8,
+  ...hoverable && {
+    "&:hover": {
+      backgroundColor: colors.grey[50]
+    }
+  }
+}));
+var ListItem3 = ({
+  primary,
+  secondary,
+  icon,
+  action,
+  hoverable = true,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs9(StyledListItem, { hoverable, ...props, children: [
+    icon && /* @__PURE__ */ jsx29(ListItemIcon3, { children: icon }),
+    (primary || secondary) && /* @__PURE__ */ jsx29(
+      ListItemText6,
+      {
+        primary,
+        secondary
+      }
+    ),
+    children,
+    action && /* @__PURE__ */ jsx29(ListItemSecondaryAction, { children: action })
+  ] });
+};
+
+// src/components/layout/Avatar.tsx
+import MuiAvatar from "@mui/material/Avatar";
+import { styled as styled22 } from "@mui/material/styles";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var sizeMap = {
+  small: 32,
+  medium: 40,
+  large: 56
+};
+var StyledAvatar = styled22(MuiAvatar, {
+  shouldForwardProp: (prop) => prop !== "avatarSize"
+})(({ avatarSize = 40 }) => ({
+  width: avatarSize,
+  height: avatarSize,
+  backgroundColor: colors.primary.main,
+  color: colors.primary.contrastText,
+  fontWeight: 600
+}));
+var Avatar4 = ({ size = "medium", ...props }) => {
+  const avatarSize = typeof size === "number" ? size : sizeMap[size];
+  return /* @__PURE__ */ jsx30(StyledAvatar, { avatarSize, ...props });
+};
+
+// src/components/layout/Table.tsx
+import {
+  Table as MuiTable,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TableSortLabel
+} from "@mui/material";
+import { styled as styled23 } from "@mui/material/styles";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var StyledTableContainer = styled23(TableContainer)({
+  borderRadius: 8,
+  border: `1px solid ${colors.grey[200]}`
+});
+var StyledTableHead = styled23(TableHead)({
+  backgroundColor: colors.grey[50],
+  "& .MuiTableCell-head": {
+    fontWeight: 600,
+    color: colors.text.primary
+  }
+});
+var Table = ({ stickyHeader = false, children, ...props }) => {
+  return /* @__PURE__ */ jsx31(StyledTableContainer, { children: /* @__PURE__ */ jsx31(MuiTable, { stickyHeader, ...props, children }) });
+};
+var TableHeader = ({
+  columns,
+  orderBy,
+  order = "asc",
+  onSort
+}) => {
+  return /* @__PURE__ */ jsx31(StyledTableHead, { children: /* @__PURE__ */ jsx31(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx31(TableCell, { align: column.align || "left", children: column.sortable && onSort ? /* @__PURE__ */ jsx31(
+    TableSortLabel,
+    {
+      active: orderBy === column.id,
+      direction: orderBy === column.id ? order : "asc",
+      onClick: () => onSort(column.id),
+      children: column.label
+    }
+  ) : column.label }, column.id)) }) });
+};
+
+// src/components/layout/Grid.tsx
+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 { styled as styled24 } from "@mui/material/styles";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled24(MuiBreadcrumbs)({
+  "& .MuiBreadcrumbs-ol": {
+    flexWrap: "nowrap"
+  },
+  "& .MuiBreadcrumbs-separator": {
+    color: colors.text.secondary
+  }
+});
+var StyledLink2 = styled24(Link4)({
+  color: colors.primary.main,
+  textDecoration: "none",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+});
+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(
+      StyledLink2,
+      {
+        href: item.href,
+        onClick: (e) => {
+          if (item.onClick) {
+            e.preventDefault();
+            item.onClick();
+          }
+        },
+        children: item.label
+      },
+      index
+    );
+  }) });
+};
+
+// src/components/layout/Accordion.tsx
+import {
+  Accordion as MuiAccordion,
+  AccordionSummary,
+  AccordionDetails
+} 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";
+var StyledAccordion = styled25(MuiAccordion)({
+  borderRadius: 8,
+  boxShadow: "none",
+  border: `1px solid ${colors.grey[200]}`,
+  "&:before": {
+    display: "none"
+  },
+  "&.Mui-expanded": {
+    margin: 0
+  }
+});
+var StyledAccordionSummary = styled25(AccordionSummary)({
+  backgroundColor: colors.grey[50],
+  borderRadius: "8px 8px 0 0",
+  "&.Mui-expanded": {
+    borderRadius: "8px 8px 0 0"
+  },
+  "& .MuiAccordionSummary-content": {
+    margin: "12px 0"
+  }
+});
+var StyledAccordionDetails = styled25(AccordionDetails)({
+  padding: "16px"
+});
+var Accordion = ({
+  title,
+  children,
+  defaultExpanded = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs10(StyledAccordion, { defaultExpanded, ...props, children: [
+    /* @__PURE__ */ jsx33(StyledAccordionSummary, { expandIcon: /* @__PURE__ */ jsx33(ExpandMoreIcon, {}), children: title }),
+    /* @__PURE__ */ jsx33(StyledAccordionDetails, { children })
+  ] });
+};
+
+// src/components/layout/Paper.tsx
+import MuiPaper from "@mui/material/Paper";
+import { styled as styled26 } from "@mui/material/styles";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var StyledPaper = styled26(MuiPaper)({
+  borderRadius: 8,
+  "&.MuiPaper-elevation": {
+    boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.08)"
+  },
+  "&.MuiPaper-outlined": {
+    border: `1px solid ${colors.grey[200]}`,
+    boxShadow: "none"
+  }
+});
+var Paper = ({ variant = "elevation", ...props }) => {
+  return /* @__PURE__ */ jsx34(StyledPaper, { variant, elevation: variant === "elevation" ? 1 : 0, ...props });
+};
+
+// src/components/layout/Divider.tsx
+import MuiDivider from "@mui/material/Divider";
+import { styled as styled27 } from "@mui/material/styles";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var StyledDivider = styled27(MuiDivider)({
+  borderColor: colors.grey[200]
+});
+var Divider3 = ({ ...props }) => {
+  return /* @__PURE__ */ jsx35(StyledDivider, { ...props });
+};
+
+// src/components/layout/Stack.tsx
+import { Stack } from "@mui/material";
+
+// src/components/layout/Box.tsx
+import { Box as Box6 } from "@mui/material";
+
+// src/components/layout/Typography.tsx
+import { Typography as Typography6 } from "@mui/material";
+
+// src/components/layout/Container.tsx
+import { Container } from "@mui/material";
+
+// src/components/layout/AppBar.tsx
+import {
+  AppBar as MuiAppBar,
+  Toolbar
+} from "@mui/material";
+import { styled as styled28 } from "@mui/material/styles";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var StyledAppBar = styled28(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "appBarHeight"
+})(({ appBarHeight = 64 }) => ({
+  backgroundColor: colors.background.paper,
+  borderBottom: `1px solid ${colors.grey[200]}`,
+  boxShadow: "none",
+  height: appBarHeight,
+  zIndex: 1300
+}));
+var StyledToolbar = styled28(Toolbar)(({ theme: theme2 }) => ({
+  height: "100%",
+  paddingLeft: theme2.spacing(2),
+  paddingRight: theme2.spacing(2),
+  gap: theme2.spacing(2)
+}));
+var AppBar = ({ height = 64, children, ...props }) => {
+  return /* @__PURE__ */ jsx36(StyledAppBar, { position: "fixed", appBarHeight: height, ...props, children: /* @__PURE__ */ jsx36(StyledToolbar, { children }) });
+};
+
+// src/components/layout/Collapse.tsx
+import {
+  Collapse as MuiCollapse
+} from "@mui/material";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var Collapse = (props) => {
+  return /* @__PURE__ */ jsx37(MuiCollapse, { ...props });
+};
+
+// src/components/feedback/Alert.tsx
+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";
+var StyledAlert = styled29(MuiAlert)({
+  borderRadius: 8,
+  "&.MuiAlert-filled": {
+    borderRadius: 8
+  }
+});
+var Alert = ({
+  severity = "info",
+  title,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs11(StyledAlert, { severity, ...props, children: [
+    title && /* @__PURE__ */ jsx38(MuiAlertTitle, { children: title }),
+    children
+  ] });
+};
+var StyledSnackbar = styled29(MuiSnackbar)({});
+var Snackbar = ({
+  message,
+  severity = "info",
+  title,
+  variant = "filled",
+  onClose,
+  children,
+  anchorOrigin = { vertical: "bottom", horizontal: "center" },
+  autoHideDuration = 6e3,
+  ...props
+}) => {
+  const content = children || (message ? /* @__PURE__ */ jsx38(
+    Alert,
+    {
+      onClose,
+      severity,
+      variant,
+      title,
+      sx: { width: "100%", borderRadius: 2 },
+      children: message
+    }
+  ) : void 0);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx38(
+    StyledSnackbar,
+    {
+      anchorOrigin,
+      autoHideDuration,
+      onClose,
+      ...props,
+      children: content
+    }
+  );
+};
+
+// 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";
+var EmptyState = ({
+  title = "No items found",
+  description,
+  icon,
+  action
+}) => {
+  return /* @__PURE__ */ jsxs12(
+    Box7,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 6,
+        textAlign: "center",
+        minHeight: 200
+      },
+      children: [
+        icon && /* @__PURE__ */ jsx39(
+          Box7,
+          {
+            sx: {
+              color: colors.text.secondary,
+              marginBottom: 2,
+              fontSize: 64
+            },
+            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 })
+      ]
+    }
+  );
+};
+
+// 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";
+var Loading = ({
+  message = "Loading...",
+  size = 40,
+  fullScreen = false
+}) => {
+  const content = /* @__PURE__ */ jsxs13(
+    Box8,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 2,
+        ...fullScreen && {
+          height: "100vh",
+          width: "100vw",
+          position: "fixed",
+          top: 0,
+          left: 0,
+          backgroundColor: colors.background.default,
+          zIndex: 9999
+        },
+        ...!fullScreen && {
+          padding: 4
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx40(CircularProgress4, { size, thickness: 4 }),
+        message && /* @__PURE__ */ jsx40(Typography8, { variant: "body2", color: "text.secondary", children: message })
+      ]
+    }
+  );
+  return content;
+};
+
+// 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";
+var AppLoading = ({
+  message = "Loading...",
+  logo = "/icons/logo.png",
+  sx = {}
+}) => {
+  return /* @__PURE__ */ jsxs14(
+    Box9,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+        width: "100vw",
+        position: "fixed",
+        top: 0,
+        left: 0,
+        backgroundColor: "#f8f9fa",
+        // Light background
+        zIndex: 9999,
+        ...sx
+      },
+      children: [
+        logo && /* @__PURE__ */ jsx41(
+          Box9,
+          {
+            component: "img",
+            src: logo,
+            alt: "Logo",
+            sx: {
+              height: 80,
+              width: "auto",
+              mb: 4
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx41(CircularProgress5, { size: 40, thickness: 4, sx: { mb: 2 } }),
+        /* @__PURE__ */ jsx41(Typography9, { variant: "body1", color: "text.secondary", children: message })
+      ]
+    }
+  );
+};
+
+// src/components/feedback/CircularProgress.tsx
+import {
+  CircularProgress as MuiCircularProgress
+} from "@mui/material";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var CircularProgress6 = ({
+  size = 40,
+  thickness = 4,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx42(MuiCircularProgress, { size, thickness, ...props });
+};
+
+// src/components/third-party/FlowEditor.tsx
+import { useCallback as useCallback3 } from "react";
+import ReactFlow, {
+  Background,
+  Controls,
+  MiniMap,
+  ReactFlowProvider,
+  BackgroundVariant,
+  ConnectionLineType
+} from "reactflow";
+import { Box as Box10 } 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";
+var FlowEditor = ({
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  nodeTypes,
+  edgeTypes,
+  height = "600px",
+  showBackground = true,
+  backgroundVariant = BackgroundVariant.Dots,
+  showControls = true,
+  showMinimap = false,
+  containerProps,
+  onInit,
+  ...reactFlowProps
+}) => {
+  const theme2 = useTheme();
+  const handleInit = useCallback3(
+    (instance) => {
+      if (onInit) {
+        onInit(instance);
+      }
+    },
+    [onInit]
+  );
+  return /* @__PURE__ */ jsx43(ReactFlowProvider, { children: /* @__PURE__ */ jsx43(
+    Box10,
+    {
+      sx: {
+        width: "100%",
+        height: typeof height === "number" ? `${height}px` : height,
+        border: `1px solid ${theme2.palette.divider}`,
+        borderRadius: theme2.shape.borderRadius,
+        overflow: "hidden",
+        backgroundColor: theme2.palette.background.paper,
+        ...containerProps?.sx
+      },
+      ...containerProps,
+      children: /* @__PURE__ */ jsxs15(
+        ReactFlow,
+        {
+          nodes,
+          edges,
+          onNodesChange,
+          onEdgesChange,
+          nodeTypes,
+          edgeTypes,
+          onInit: handleInit,
+          connectionLineType: ConnectionLineType.SmoothStep,
+          defaultEdgeOptions: {
+            style: {
+              stroke: theme2.palette.primary.main,
+              strokeWidth: 2
+            }
+          },
+          style: {
+            backgroundColor: "transparent"
+          },
+          ...reactFlowProps,
+          children: [
+            showBackground && /* @__PURE__ */ jsx43(
+              Background,
+              {
+                variant: backgroundVariant,
+                gap: 16,
+                size: 1,
+                color: theme2.palette.divider
+              }
+            ),
+            showControls && /* @__PURE__ */ jsx43(Controls, {}),
+            showMinimap && /* @__PURE__ */ jsx43(
+              MiniMap,
+              {
+                nodeColor: (node) => {
+                  const color = node.data?.color || theme2.palette.primary.main;
+                  return typeof color === "string" ? color : theme2.palette.primary.main;
+                },
+                nodeStrokeWidth: 3,
+                nodeBorderRadius: 8,
+                maskColor: `${theme2.palette.background.paper}80`,
+                style: {
+                  backgroundColor: theme2.palette.background.paper
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+
+// 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 FullscreenIcon from "@mui/icons-material/Fullscreen";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
+import { jsx as jsx44, jsxs as jsxs16 } from "react/jsx-runtime";
+var configureTypeScript = (monaco) => {
+  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.ES2020,
+    allowNonTsExtensions: true,
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    module: monaco.languages.typescript.ModuleKind.CommonJS,
+    noEmit: false,
+    lib: ["es2020", "dom"],
+    noUnusedLocals: false,
+    noUnusedParameters: false,
+    noImplicitAny: false,
+    noImplicitReturns: false,
+    noFallthroughCasesInSwitch: false
+  });
+  monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: false,
+    noSyntaxValidation: false,
+    noSuggestionDiagnostics: true,
+    diagnosticCodesToIgnore: [
+      6133,
+      // 'x' is declared but its value is never read
+      6196
+      // 'x' is declared but its value is never read (different variant)
+    ]
+  });
+};
+var CodeEditor = ({
+  value,
+  onChange,
+  language = "typescript",
+  height = "400px",
+  minHeight,
+  theme: themeProp,
+  lineNumbers = "on",
+  options,
+  onMount,
+  onValidate,
+  editorRef,
+  monacoRef,
+  onFullscreenChange,
+  containerProps,
+  typeDefinitions
+}) => {
+  const [isEditorReady, setIsEditorReady] = useState4(false);
+  const [validationErrors, setValidationErrors] = useState4([]);
+  const [isFullscreen, setIsFullscreen] = useState4(false);
+  const [tsCode, setTsCode] = useState4(value);
+  const [actualHeight, setActualHeight] = useState4(
+    typeof height === "number" ? `${height}px` : height
+  );
+  const internalEditorRef = useRef(null);
+  const internalMonacoRef = useRef(null);
+  const finalEditorRef = editorRef || internalEditorRef;
+  const finalMonacoRef = monacoRef || internalMonacoRef;
+  useEffect(() => {
+    if (isFullscreen) {
+      setActualHeight("100vh");
+    } else {
+      setActualHeight(typeof height === "number" ? `${height}px` : height);
+    }
+  }, [height, isFullscreen]);
+  const toggleFullscreen = useCallback4(() => {
+    const newFullscreenState = !isFullscreen;
+    setIsFullscreen(newFullscreenState);
+    if (onFullscreenChange) {
+      onFullscreenChange(newFullscreenState);
+    }
+  }, [isFullscreen, onFullscreenChange]);
+  useEffect(() => {
+    if (!isFullscreen) return;
+    function escapeHandler(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsFullscreen(false);
+        if (onFullscreenChange) {
+          onFullscreenChange(false);
+        }
+      }
+    }
+    window.addEventListener("keydown", escapeHandler, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", escapeHandler, { capture: true });
+    };
+  }, [isFullscreen, onFullscreenChange]);
+  const handleEditorDidMount = useCallback4(
+    (editor, monaco) => {
+      console.log("CodeEditor: onMount called", { editor: !!editor, monaco: !!monaco });
+      try {
+        configureTypeScript(monaco);
+      } catch (e) {
+        console.error("CodeEditor: Failed to configure TypeScript", e);
+      }
+      if (finalEditorRef) {
+        finalEditorRef.current = editor;
+      }
+      if (finalMonacoRef) {
+        finalMonacoRef.current = monaco;
+      }
+      setIsEditorReady(true);
+      console.log("CodeEditor: Editor ready");
+      try {
+        editor.addCommand(monaco.KeyCode.Escape, () => {
+          if (isFullscreen) {
+            setIsFullscreen(false);
+            if (onFullscreenChange) {
+              onFullscreenChange(false);
+            }
+            return true;
+          }
+          return false;
+        });
+        editor.onDidChangeModelDecorations(() => {
+          const model2 = editor.getModel();
+          if (model2 && onValidate) {
+            const markers = monaco.editor.getModelMarkers({ resource: model2.uri });
+            onValidate(markers);
+            setValidationErrors(markers);
+          }
+        });
+        const model = editor.getModel();
+        if (model && onValidate) {
+          const markers = monaco.editor.getModelMarkers({ resource: model.uri });
+          onValidate(markers);
+          setValidationErrors(markers);
+        }
+      } catch (e) {
+        console.error("CodeEditor: Error setting up editor callbacks", e);
+      }
+      if (onMount) {
+        try {
+          onMount(editor, monaco);
+        } catch (e) {
+          console.error("CodeEditor: Error in custom onMount", e);
+        }
+      }
+    },
+    [isFullscreen, onFullscreenChange, onValidate, onMount, finalEditorRef, finalMonacoRef]
+  );
+  useEffect(() => {
+    if (!isEditorReady || !finalMonacoRef?.current || !typeDefinitions) return;
+    const monaco = finalMonacoRef.current;
+    const definitions = Array.isArray(typeDefinitions) ? typeDefinitions : [typeDefinitions];
+    const uris = [];
+    try {
+      definitions.forEach((def, index) => {
+        if (def && def.trim()) {
+          const uri = `ts:filename/custom-types-${index}.d.ts`;
+          uris.push(uri);
+          monaco.languages.typescript.typescriptDefaults.addExtraLib(def, uri);
+        }
+      });
+    } catch (error) {
+      console.error("CodeEditor: Error adding type definitions:", error);
+    }
+  }, [isEditorReady, finalMonacoRef, typeDefinitions]);
+  const handleCodeChange = (newValue) => {
+    const valueStr = newValue || "";
+    setTsCode(valueStr);
+    onChange(valueStr);
+  };
+  useEffect(() => {
+    if (value !== tsCode) {
+      setTsCode(value);
+      if (isEditorReady && finalEditorRef?.current) {
+        const editor = finalEditorRef.current;
+        const currentValue = editor.getValue();
+        if (currentValue !== value) {
+          editor.setValue(value);
+        }
+      }
+    }
+  }, [value, tsCode, isEditorReady, finalEditorRef]);
+  const editorMinHeight = minHeight ? typeof minHeight === "number" ? `${minHeight}px` : minHeight : "400px";
+  const defaultOptions = {
+    lineNumbers,
+    minimap: { enabled: false },
+    readOnly: false,
+    wordWrap: "on",
+    fontSize: 14,
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, "source-code-pro", monospace',
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    theme: themeProp || "vs",
+    ...options
+  };
+  return /* @__PURE__ */ jsx44(
+    Box11,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: isFullscreen ? "100vh" : editorMinHeight,
+        position: isFullscreen ? "fixed" : "relative",
+        top: isFullscreen ? 0 : "auto",
+        left: isFullscreen ? 0 : "auto",
+        right: isFullscreen ? 0 : "auto",
+        bottom: isFullscreen ? 0 : "auto",
+        zIndex: isFullscreen ? 9999 : "auto",
+        bgcolor: "background.paper",
+        p: isFullscreen ? 2 : 0
+      },
+      children: /* @__PURE__ */ jsxs16(
+        Box11,
+        {
+          sx: {
+            flex: 1,
+            border: 1,
+            borderColor: validationErrors.length > 0 ? "error.main" : "divider",
+            borderRadius: 1,
+            minHeight: editorMinHeight,
+            overflow: "hidden",
+            position: "relative",
+            display: "flex",
+            flexDirection: "column"
+          },
+          ...containerProps,
+          children: [
+            /* @__PURE__ */ jsx44(Tooltip3, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ jsx44(
+              IconButton5,
+              {
+                onClick: toggleFullscreen,
+                size: "small",
+                sx: {
+                  position: "absolute",
+                  top: 8,
+                  right: 8,
+                  zIndex: 10,
+                  bgcolor: "rgba(255, 255, 255, 0.7)",
+                  "&:hover": {
+                    bgcolor: "rgba(255, 255, 255, 0.9)"
+                  },
+                  boxShadow: 1
+                },
+                children: isFullscreen ? /* @__PURE__ */ jsx44(FullscreenExitIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx44(FullscreenIcon, { fontSize: "small" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx44(
+              Box11,
+              {
+                sx: {
+                  flex: 1,
+                  display: "flex",
+                  overflow: "hidden",
+                  minHeight: editorMinHeight,
+                  position: "relative"
+                },
+                children: /* @__PURE__ */ jsx44(
+                  Editor,
+                  {
+                    height: actualHeight,
+                    defaultLanguage: language,
+                    defaultValue: value,
+                    value: tsCode,
+                    onChange: handleCodeChange,
+                    onMount: handleEditorDidMount,
+                    theme: themeProp || "vs",
+                    options: defaultOptions,
+                    loading: /* @__PURE__ */ jsx44(Box11, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
+                    beforeMount: (monaco) => {
+                      console.log("CodeEditor: beforeMount called", { monaco: !!monaco });
+                    }
+                  }
+                )
+              }
+            ),
+            validationErrors.length > 0 && /* @__PURE__ */ jsxs16(
+              Alert2,
+              {
+                severity: "error",
+                sx: {
+                  position: "absolute",
+                  bottom: 8,
+                  left: 8,
+                  right: 8,
+                  zIndex: 20,
+                  boxShadow: 3,
+                  border: "1px solid",
+                  borderColor: "error.main",
+                  borderRadius: 1,
+                  maxHeight: "150px",
+                  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: [
+                      "Line ",
+                      error.startLineNumber,
+                      ": ",
+                      error.message
+                    ] }, index)),
+                    validationErrors.length > 3 && /* @__PURE__ */ jsxs16(Box11, { component: "li", sx: { fontSize: "0.85rem" }, children: [
+                      validationErrors.length - 3,
+                      " more error",
+                      validationErrors.length - 3 > 1 ? "s" : "",
+                      "..."
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/index.ts
+import { Panel as Panel2 } from "reactflow";
+export {
+  Accordion,
+  Alert,
+  AppBar,
+  AppLoading,
+  Avatar4 as Avatar,
+  Background2 as Background,
+  BackgroundVariant2 as BackgroundVariant,
+  Badge,
+  Box6 as Box,
+  Breadcrumbs,
+  Button,
+  ButtonGroup,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Checkbox,
+  Chip2 as Chip,
+  CircularProgress6 as CircularProgress,
+  CodeEditor,
+  Collapse,
+  ConnectionLineType2 as ConnectionLineType,
+  Container,
+  Controls2 as Controls,
+  Dialog,
+  Divider3 as Divider,
+  Drawer2 as Drawer,
+  Dropdown,
+  EmptyState,
+  FlowEditor,
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  FormLabel,
+  Grid,
+  IconButton,
+  InputAdornment2 as InputAdornment,
+  InputLabel,
+  Link3 as Link,
+  List5 as List,
+  ListItem3 as ListItem,
+  ListItemIcon3 as ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText6 as ListItemText,
+  Loading,
+  LoadingButton,
+  Menu3 as Menu,
+  MenuItem2 as MenuItem,
+  MiniMap2 as MiniMap,
+  Pagination,
+  Panel2 as Panel,
+  Paper,
+  Progress,
+  Radio,
+  RadioGroup,
+  SearchField,
+  Selector,
+  ServiceSelectorButton,
+  Sidebar,
+  SidebarItem,
+  Snackbar,
+  Stack,
+  Step,
+  StepButton,
+  StepContent,
+  StepLabel,
+  Stepper,
+  Switch,
+  Tab,
+  Table,
+  TableHeader,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+  Toolbar,
+  Tooltip2 as Tooltip,
+  Typography6 as Typography,
+  WorkspaceSelectorButton,
+  colors,
+  theme
+};
+//# sourceMappingURL=index.mjs.map