@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/menu.js

@@ -0,0 +1,1571 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/elemental/Menu/index.ts
+var Menu_exports = {};
+__export(Menu_exports, {
+  DetailMenu: () => DetailMenu,
+  IconMenu: () => IconMenu_default,
+  Menu: () => Menu_default,
+  MenuItem: () => import_MenuItem3.default,
+  MenuPopper: () => MenuPopper,
+  ModelMenu: () => ModelMenu,
+  ModelPicker: () => ModelPicker,
+  StyledItemIcon: () => StyledItemIcon,
+  StyledMenuItem: () => StyledMenuItem,
+  menuItemTheme: () => menuItemTheme,
+  menuTheme: () => menuTheme,
+  useMenu: () => useMenu
+});
+module.exports = __toCommonJS(Menu_exports);
+
+// src/components/elemental/Menu/src/Menu/Menu.tsx
+var import_react = require("react");
+var import_MenuList = __toESM(require("@mui/material/MenuList"));
+var import_ListItemText = __toESM(require("@mui/material/ListItemText"));
+var import_styles2 = require("@mui/material/styles");
+
+// src/components/elemental/Menu/src/MenuItem.tsx
+var import_MenuItem = __toESM(require("@mui/material/MenuItem"));
+var import_ListItemIcon = __toESM(require("@mui/material/ListItemIcon"));
+var import_styles = require("@mui/material/styles");
+var StyledMenuItem = (0, import_styles.styled)(import_MenuItem.default, {
+  shouldForwardProp: (prop) => prop !== "customPadding" && prop !== "customFontSize"
+})(({ customPadding, customFontSize }) => ({
+  width: "-webkit-fill-available",
+  borderRadius: "8px",
+  minHeight: "fit-content",
+  padding: customPadding || "6px 16px",
+  margin: "0",
+  overflow: "hidden",
+  gap: "4px",
+  "& .MuiListItemText-primary": {
+    fontSize: customFontSize || "1rem",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  }
+}));
+var StyledItemIcon = (0, import_styles.styled)(import_ListItemIcon.default, {
+  shouldForwardProp: (prop) => prop !== "isIconOnly"
+})({
+  "&.MuiListItemIcon-root": {
+    minWidth: "var(--minW)"
+  },
+  variants: [
+    {
+      props: { isIconOnly: true },
+      style: {
+        "--minW": "0"
+      }
+    },
+    {
+      props: { isIconOnly: false },
+      style: {
+        "--minW": "auto"
+      }
+    },
+    {
+      props: { isIconOnly: void 0 },
+      // default
+      style: {
+        "--minW": "auto"
+      }
+    }
+  ]
+});
+
+// src/components/elemental/Menu/src/Menu/Menu.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CustomMenuList = (0, import_react.forwardRef)(({
+  options = [],
+  extraItemClickHandler,
+  menuItemProps,
+  initSelected = [],
+  multiple = false,
+  autoFocusItem,
+  menuRef,
+  isIconOnly = false,
+  optionHeader,
+  sorted = true
+}, ref) => {
+  const [localSelected, setLocalSelected] = (0, import_react.useState)(initSelected);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    getSelectedItem: () => localSelected
+  }), [localSelected]);
+  (0, import_react.useEffect)(() => {
+    setLocalSelected(initSelected);
+  }, [initSelected]);
+  const sortedOptions = (0, import_react.useMemo)(() => {
+    if (!sorted) return options;
+    return [...options].sort((a, b) => {
+      if (a.label && b.label) {
+        return a.label.toString().localeCompare(b.label.toString());
+      }
+      return 0;
+    });
+  }, [sorted, options]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledMenuList,
+    {
+      ref: menuRef,
+      autoFocusItem,
+      fontSize: menuItemProps?.fontSize,
+      padding: menuItemProps?.padding,
+      children: [
+        optionHeader,
+        sortedOptions.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          StyledMenuItem,
+          {
+            selected: localSelected.includes(o.id),
+            customPadding: menuItemProps?.padding,
+            customFontSize: menuItemProps?.fontSize,
+            onClick: (e) => {
+              if (extraItemClickHandler) extraItemClickHandler(e);
+              if (multiple) setLocalSelected((old) => {
+                if (old.includes(o.id)) return old.filter((id) => id !== o.id);
+                return [...old, o.id];
+              });
+              o.onClick?.();
+            },
+            children: [
+              o.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemIcon, { isIconOnly, children: o.icon }),
+              o.label && !isIconOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ListItemText.default, { children: o.label }),
+              o.extension
+            ]
+          },
+          i
+        ))
+      ]
+    }
+  );
+});
+var Menu_default = CustomMenuList;
+var StyledMenuList = (0, import_styles2.styled)(import_MenuList.default, {
+  shouldForwardProp: (prop) => prop !== "fontSize" && prop !== "padding"
+})((p) => createMenuListTheme(p));
+function createMenuListTheme(p) {
+  return {
+    "&.MuiList-root": {
+      padding: "8px 4px",
+      display: "flex",
+      flexDirection: "column",
+      alignContent: "center",
+      alignItems: "center",
+      width: "100%",
+      gap: "2px",
+      "& li": {
+        width: "-webkit-fill-available",
+        borderRadius: "8px",
+        minHeight: "fit-content",
+        padding: p.padding || "6px 16px",
+        margin: "0",
+        overflow: "hidden",
+        "& .MuiListItemText-primary": {
+          fontSize: p.fontSize || "1rem",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        }
+      }
+    }
+  };
+}
+
+// src/components/elemental/Menu/src/Menu/index.ts
+var import_MenuItem3 = __toESM(require("@mui/material/MenuItem"));
+
+// src/components/elemental/Menu/src/Menu/theme.ts
+var menuItemTheme = {
+  defaultProps: {},
+  styleOverrides: {
+    root: {
+      "--menu-item-hover-bg": "var(--mui-palette-background-hover-1)",
+      "--menu-item-selected-bg": "var(--mui-palette-focus-1)",
+      "&:hover": {
+        backgroundColor: "var(--menu-item-hover-bg)"
+      },
+      "&.Mui-selected:before": {
+        width: "100%",
+        height: "100%",
+        content: "''",
+        position: "absolute",
+        left: 0,
+        top: 0,
+        backgroundColor: "var(--menu-item-selected-bg)",
+        overflow: "hidden"
+      },
+      "& svg": {
+        fontSize: "1.2rem"
+      }
+    }
+  }
+};
+var menuTheme = {
+  styleOverrides: {}
+};
+
+// src/components/elemental/Overlay/src/index.ts
+var import_ClickAwayListener = __toESM(require("@mui/material/ClickAwayListener"));
+var import_Popper = __toESM(require("@mui/material/Popper"));
+
+// src/components/elemental/Paper/src/Paper/Paper.tsx
+var import_Paper = __toESM(require("@mui/material/Paper"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function MuiPaper(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Paper.default, { ...props });
+}
+
+// src/components/elemental/Menu/src/useMenu/useMenu.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MenuPopper = ({
+  placement = "bottom-start",
+  options = [],
+  openMenuProps,
+  menuItemProps,
+  optionHeader
+}) => {
+  const {
+    closeHandler,
+    anchorEl,
+    onItemClickClientArg,
+    multiple,
+    ref,
+    menuRef,
+    initSelected,
+    sorted = true
+  } = openMenuProps;
+  const open = Boolean(anchorEl);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_Popper.default,
+    {
+      open,
+      anchorEl,
+      placement,
+      sx: { zIndex: "1301" },
+      modifiers: [{
+        name: "offset",
+        options: { offset: [0, 8] }
+      }],
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        MuiPaper,
+        {
+          variant: "outlined",
+          sx: {
+            "&.MuiPaper-root": {
+              pr: 1,
+              minWidth: 150,
+              maxHeight: 300,
+              borderRadius: "16px",
+              overflow: "hidden",
+              display: "flex",
+              flexDirection: "column",
+              "& .MuiList-root": {
+                display: "flex",
+                flexDirection: "column",
+                alignContent: "center",
+                alignItems: "center",
+                width: "100%",
+                overflowY: "auto",
+                height: "100%"
+              },
+              "& li": {
+                width: "100%"
+              }
+            }
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ClickAwayListener.default, { onClickAway: closeHandler, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Menu_default,
+            {
+              ref,
+              menuRef,
+              autoFocusItem: open,
+              menuItemProps,
+              optionHeader,
+              options,
+              multiple,
+              initSelected,
+              extraItemClickHandler: (e) => {
+                if (onItemClickClientArg) onItemClickClientArg({ event: e, closeHandler });
+              },
+              sorted
+            }
+          ) })
+        }
+      )
+    }
+  );
+};
+function useMenu({
+  onItemClickClientArg,
+  multiple = false,
+  initSelected = [],
+  setSelected
+}) {
+  const [anchorEl, setAnchorEl] = (0, import_react2.useState)(null);
+  const [anchorPosition, setAnchorPosition] = (0, import_react2.useState)({ top: 0, left: 0 });
+  const ref = (0, import_react2.useRef)(null);
+  const menuRef = (0, import_react2.useRef)(null);
+  const closeHandler = (event) => {
+    if (event && menuRef.current && event.target instanceof Node && menuRef.current.contains(event.target)) {
+      return;
+    }
+    if (setSelected && multiple) {
+      const localSelected = ref.current?.getSelectedItem();
+      if (localSelected && Array.isArray(localSelected)) {
+        setSelected(localSelected);
+      }
+    }
+    setAnchorEl(null);
+  };
+  const onTriggerClickHandler = (event) => {
+    const bottom = event.clientY;
+    const right = event.clientX;
+    setAnchorEl(event.currentTarget);
+    setAnchorPosition({ top: bottom, left: right });
+  };
+  return {
+    anchorEl,
+    anchorPosition,
+    onTriggerClickHandler,
+    onItemClickClientArg,
+    closeHandler,
+    multiple,
+    ref,
+    initSelected,
+    menuRef
+  };
+}
+
+// src/components/elemental/Menu/src/useMenu/IconMenu.tsx
+var import_react4 = require("react");
+
+// src/_utils/_func/sx.ts
+function flattenSx(part) {
+  if (part == null || typeof part === "boolean") {
+    return [];
+  }
+  if (Array.isArray(part)) {
+    return part.flatMap(flattenSx);
+  }
+  if (typeof part === "function" || typeof part === "object") {
+    return [part];
+  }
+  return [];
+}
+function mergeSx(...parts) {
+  const list = parts.flatMap(flattenSx);
+  if (list.length === 0) {
+    return void 0;
+  }
+  if (list.length === 1) {
+    return list[0];
+  }
+  return list;
+}
+
+// src/components/elemental/Box/src/index.ts
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_Stack = __toESM(require("@mui/material/Stack"));
+var import_Grid = __toESM(require("@mui/material/Grid"));
+
+// src/components/elemental/Button/src/IconButton/IconButton.tsx
+var import_react3 = require("react");
+var import_IconButton = __toESM(require("@mui/material/IconButton"));
+
+// src/components/elemental/Tooltip/src/Tooltip/index.ts
+var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
+
+// src/components/elemental/Button/src/IconButton/IconButton.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var IconButton = (0, import_react3.forwardRef)(({
+  title = "",
+  children,
+  color,
+  size,
+  slotProps,
+  selected,
+  className,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_Tooltip.default,
+    {
+      title,
+      slotProps: {
+        popper: {
+          sx: {
+            textTransform: "capitalize"
+          }
+        },
+        ...slotProps?.tooltip
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Box.default, { component: "span", sx: { width: "fit-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_IconButton.default,
+        {
+          ref,
+          color,
+          size,
+          className: [className, selected ? "Mui-selected" : ""].filter(Boolean).join(" "),
+          ...props,
+          children
+        }
+      ) })
+    }
+  );
+});
+var IconButton_default = IconButton;
+
+// src/components/elemental/Button/src/IconButton/IconButton.HoverSpinnin.tsx
+var import_styles3 = require("@mui/material/styles");
+var IconButton_HoverSpinnin_default = (0, import_styles3.styled)(IconButton_default)({
+  "&:hover svg": {
+    transform: "rotate(360deg)",
+    transition: "transform 0.3s ease-in-out"
+  }
+});
+
+// src/components/elemental/Menu/src/useMenu/IconMenu.tsx
+var import_jsx_runtime5 = (
+  // dont use Box here, it will cause the Button tooltip render differently
+  // the height of the tooltip will be a bit off from IconButton
+  require("react/jsx-runtime")
+);
+var IconMenuList = (props) => {
+  const {
+    options = [],
+    slots = {},
+    slotProps = {}
+  } = props;
+  const {
+    trigger: triggerProps = {},
+    menu: menuProps,
+    menuItem: menuItemProps,
+    optionHeader: optionHeaderProps,
+    popper: popperProps
+  } = slotProps;
+  const {
+    title,
+    onItemClickClientArg,
+    icon,
+    iconSize = "small",
+    isSpinButton,
+    ...triggerExtraProps
+  } = triggerProps;
+  const p = useMenu({
+    onItemClickClientArg: (p2) => {
+      if (p2.closeHandler) p2.closeHandler();
+      if (onItemClickClientArg) onItemClickClientArg(p2);
+    }
+  });
+  const Trigger = (0, import_react4.useMemo)(() => {
+    if (slots.trigger) return slots.trigger;
+    if (isSpinButton) {
+      return IconButton_HoverSpinnin_default;
+    } else {
+      return IconButton_default;
+    }
+  }, [isSpinButton, slots.trigger]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Trigger,
+      {
+        title,
+        onClick: p.onTriggerClickHandler,
+        size: iconSize,
+        ...triggerExtraProps,
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      MenuPopper,
+      {
+        openMenuProps: {
+          ...p,
+          ...menuProps
+        },
+        optionHeader: optionHeaderProps,
+        options,
+        menuItemProps,
+        ...popperProps
+      }
+    )
+  ] });
+};
+var IconMenu_default = IconMenuList;
+
+// src/components/elemental/Menu/src/DetailMenu/DetailMenu.tsx
+var import_react5 = __toESM(require("react"));
+
+// src/components/elemental/Form/src/index.ts
+var import_FormControl = __toESM(require("@mui/material/FormControl"));
+var import_FormHelperText = __toESM(require("@mui/material/FormHelperText"));
+var import_InputAdornment = __toESM(require("@mui/material/InputAdornment"));
+var import_InputLabel = __toESM(require("@mui/material/InputLabel"));
+
+// src/components/elemental/Menu/src/DetailMenu/DetailMenu.tsx
+var import_InputBase = __toESM(require("@mui/material/InputBase"));
+
+// src/components/elemental/List/src/List/index.ts
+var import_List = __toESM(require("@mui/material/List"));
+var import_ListSubheader = __toESM(require("@mui/material/ListSubheader"));
+var import_ListItemIcon2 = __toESM(require("@mui/material/ListItemIcon"));
+var import_ListItemText2 = __toESM(require("@mui/material/ListItemText"));
+var import_ListItemButton = __toESM(require("@mui/material/ListItemButton"));
+var import_ListItem = __toESM(require("@mui/material/ListItem"));
+
+// src/components/Icons/MuiIcon/index.ts
+var import_ArrowRightAlt = __toESM(require("@mui/icons-material/ArrowRightAlt"));
+var import_DescriptionOutlined = __toESM(require("@mui/icons-material/DescriptionOutlined"));
+var import_Description = __toESM(require("@mui/icons-material/Description"));
+var import_PictureAsPdf = __toESM(require("@mui/icons-material/PictureAsPdf"));
+var import_AudioFile = __toESM(require("@mui/icons-material/AudioFile"));
+var import_VideoFile = __toESM(require("@mui/icons-material/VideoFile"));
+var import_TableChart = __toESM(require("@mui/icons-material/TableChart"));
+var import_FolderZip = __toESM(require("@mui/icons-material/FolderZip"));
+var import_InsertDriveFile = __toESM(require("@mui/icons-material/InsertDriveFile"));
+var import_ImageOutlined = __toESM(require("@mui/icons-material/ImageOutlined"));
+var import_LayersOutlined = __toESM(require("@mui/icons-material/LayersOutlined"));
+var import_TextFormat = __toESM(require("@mui/icons-material/TextFormat"));
+var import_Remove = __toESM(require("@mui/icons-material/Remove"));
+var import_PostAdd = __toESM(require("@mui/icons-material/PostAdd"));
+var import_ErrorOutline = __toESM(require("@mui/icons-material/ErrorOutline"));
+var import_QuestionMarkOutlined = __toESM(require("@mui/icons-material/QuestionMarkOutlined"));
+var import_MeetingRoomOutlined = __toESM(require("@mui/icons-material/MeetingRoomOutlined"));
+var import_PlaylistRemove = __toESM(require("@mui/icons-material/PlaylistRemove"));
+var import_ChecklistRtl = __toESM(require("@mui/icons-material/ChecklistRtl"));
+var import_HideImageOutlined = __toESM(require("@mui/icons-material/HideImageOutlined"));
+var import_RemoveRedEyeTwoTone = __toESM(require("@mui/icons-material/RemoveRedEyeTwoTone"));
+var import_PhotoSizeSelectLarge = __toESM(require("@mui/icons-material/PhotoSizeSelectLarge"));
+var import_LockPersonOutlined = __toESM(require("@mui/icons-material/LockPersonOutlined"));
+var import_Person = __toESM(require("@mui/icons-material/Person"));
+var import_InsertEmoticon = __toESM(require("@mui/icons-material/InsertEmoticon"));
+var import_RemoveDoneOutlined = __toESM(require("@mui/icons-material/RemoveDoneOutlined"));
+var import_Tag = __toESM(require("@mui/icons-material/Tag"));
+var import_Audiotrack = __toESM(require("@mui/icons-material/Audiotrack"));
+var import_Videocam = __toESM(require("@mui/icons-material/Videocam"));
+var import_Code = __toESM(require("@mui/icons-material/Code"));
+var import_Equalizer = __toESM(require("@mui/icons-material/Equalizer"));
+var import_PivotTableChart = __toESM(require("@mui/icons-material/PivotTableChart"));
+var import_Search = __toESM(require("@mui/icons-material/Search"));
+var import_DataObject = __toESM(require("@mui/icons-material/DataObject"));
+var import_SortByAlpha = __toESM(require("@mui/icons-material/SortByAlpha"));
+var import_ThumbUp = __toESM(require("@mui/icons-material/ThumbUp"));
+var import_AttachMoneyOutlined = __toESM(require("@mui/icons-material/AttachMoneyOutlined"));
+var import_Storage = __toESM(require("@mui/icons-material/Storage"));
+var import_WorkspacePremium = __toESM(require("@mui/icons-material/WorkspacePremium"));
+var import_Numbers = __toESM(require("@mui/icons-material/Numbers"));
+var import_Functions = __toESM(require("@mui/icons-material/Functions"));
+var import_Lightbulb = __toESM(require("@mui/icons-material/Lightbulb"));
+var import_CropRotate = __toESM(require("@mui/icons-material/CropRotate"));
+var import_PhotoSizeSelectLarge2 = __toESM(require("@mui/icons-material/PhotoSizeSelectLarge"));
+var import_CollectionsBookmark = __toESM(require("@mui/icons-material/CollectionsBookmark"));
+var import_Schedule = __toESM(require("@mui/icons-material/Schedule"));
+var import_Style = __toESM(require("@mui/icons-material/Style"));
+var import_Crop169 = __toESM(require("@mui/icons-material/Crop169"));
+var import_CropSquare = __toESM(require("@mui/icons-material/CropSquare"));
+var import_GraphicEqRounded = __toESM(require("@mui/icons-material/GraphicEqRounded"));
+var import_MemoryRounded = __toESM(require("@mui/icons-material/MemoryRounded"));
+var import_AddCircleOutlineRounded = __toESM(require("@mui/icons-material/AddCircleOutlineRounded"));
+var import_Add = __toESM(require("@mui/icons-material/Add"));
+var import_Close = __toESM(require("@mui/icons-material/Close"));
+var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"));
+var import_Autorenew = __toESM(require("@mui/icons-material/Autorenew"));
+var import_CheckCircle = __toESM(require("@mui/icons-material/CheckCircle"));
+var import_Menu3 = __toESM(require("@mui/icons-material/Menu"));
+var import_MoreVert = __toESM(require("@mui/icons-material/MoreVert"));
+var import_MoreHoriz = __toESM(require("@mui/icons-material/MoreHoriz"));
+var import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"));
+var import_ContentPaste = __toESM(require("@mui/icons-material/ContentPaste"));
+var import_Cloud = __toESM(require("@mui/icons-material/Cloud"));
+var import_DownloadOutlined = __toESM(require("@mui/icons-material/DownloadOutlined"));
+var import_DownloadDoneOutlined = __toESM(require("@mui/icons-material/DownloadDoneOutlined"));
+var import_StarBorderOutlined = __toESM(require("@mui/icons-material/StarBorderOutlined"));
+var import_DeleteForever = __toESM(require("@mui/icons-material/DeleteForever"));
+var import_LayersClear = __toESM(require("@mui/icons-material/LayersClear"));
+var import_Check = __toESM(require("@mui/icons-material/Check"));
+var import_DoneAll = __toESM(require("@mui/icons-material/DoneAll"));
+var import_PowerSettingsNew = __toESM(require("@mui/icons-material/PowerSettingsNew"));
+var import_Send = __toESM(require("@mui/icons-material/Send"));
+var import_ZoomInMap = __toESM(require("@mui/icons-material/ZoomInMap"));
+var import_ZoomOutMap = __toESM(require("@mui/icons-material/ZoomOutMap"));
+var import_HomeRepairService = __toESM(require("@mui/icons-material/HomeRepairService"));
+var import_Construction = __toESM(require("@mui/icons-material/Construction"));
+var import_Help = __toESM(require("@mui/icons-material/Help"));
+var import_EmojiFlags = __toESM(require("@mui/icons-material/EmojiFlags"));
+var import_Edit = __toESM(require("@mui/icons-material/Edit"));
+var import_ForkRight = __toESM(require("@mui/icons-material/ForkRight"));
+var import_Settings = __toESM(require("@mui/icons-material/Settings"));
+var import_Restore = __toESM(require("@mui/icons-material/Restore"));
+var import_EditNote = __toESM(require("@mui/icons-material/EditNote"));
+var import_HomeOutlined = __toESM(require("@mui/icons-material/HomeOutlined"));
+var import_ExitToAppOutlined = __toESM(require("@mui/icons-material/ExitToAppOutlined"));
+var import_WbSunnyOutlined = __toESM(require("@mui/icons-material/WbSunnyOutlined"));
+var import_DarkModeOutlined = __toESM(require("@mui/icons-material/DarkModeOutlined"));
+var import_AttachFileOutlined = __toESM(require("@mui/icons-material/AttachFileOutlined"));
+var import_NoteAdd = __toESM(require("@mui/icons-material/NoteAdd"));
+var import_CloudUpload = __toESM(require("@mui/icons-material/CloudUpload"));
+var import_KeyboardDoubleArrowRight = __toESM(require("@mui/icons-material/KeyboardDoubleArrowRight"));
+var import_KeyboardDoubleArrowLeft = __toESM(require("@mui/icons-material/KeyboardDoubleArrowLeft"));
+var import_KeyboardDoubleArrowRightRounded = __toESM(require("@mui/icons-material/KeyboardDoubleArrowRightRounded"));
+var import_FitScreen = __toESM(require("@mui/icons-material/FitScreen"));
+var import_Fullscreen = __toESM(require("@mui/icons-material/Fullscreen"));
+var import_Biotech = __toESM(require("@mui/icons-material/Biotech"));
+var import_Share = __toESM(require("@mui/icons-material/Share"));
+var import_FilterAlt = __toESM(require("@mui/icons-material/FilterAlt"));
+var import_Sync = __toESM(require("@mui/icons-material/Sync"));
+var import_PlayArrow = __toESM(require("@mui/icons-material/PlayArrow"));
+var import_PauseOutlined = __toESM(require("@mui/icons-material/PauseOutlined"));
+var import_Casino = __toESM(require("@mui/icons-material/Casino"));
+var import_Paid = __toESM(require("@mui/icons-material/Paid"));
+var import_Save = __toESM(require("@mui/icons-material/Save"));
+var import_StopRounded = __toESM(require("@mui/icons-material/StopRounded"));
+var import_Replay = __toESM(require("@mui/icons-material/Replay"));
+var import_AccountTree = __toESM(require("@mui/icons-material/AccountTree"));
+var import_Close2 = __toESM(require("@mui/icons-material/Close"));
+var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"));
+var import_KeyboardArrowRight = __toESM(require("@mui/icons-material/KeyboardArrowRight"));
+var import_SearchRounded = __toESM(require("@mui/icons-material/SearchRounded"));
+var import_CloseRounded = __toESM(require("@mui/icons-material/CloseRounded"));
+var import_SortByAlphaRounded = __toESM(require("@mui/icons-material/SortByAlphaRounded"));
+var import_FilterAltOutlined = __toESM(require("@mui/icons-material/FilterAltOutlined"));
+var import_InboxOutlined = __toESM(require("@mui/icons-material/InboxOutlined"));
+var import_SearchOff = __toESM(require("@mui/icons-material/SearchOff"));
+var import_ClearRounded = __toESM(require("@mui/icons-material/ClearRounded"));
+var import_ArrowDropDownRounded = __toESM(require("@mui/icons-material/ArrowDropDownRounded"));
+var import_AccountBox = __toESM(require("@mui/icons-material/AccountBox"));
+var import_Logout = __toESM(require("@mui/icons-material/Logout"));
+var import_Login = __toESM(require("@mui/icons-material/Login"));
+var import_Dashboard = __toESM(require("@mui/icons-material/Dashboard"));
+var import_AccountTreeOutlined = __toESM(require("@mui/icons-material/AccountTreeOutlined"));
+var import_HelpOutline = __toESM(require("@mui/icons-material/HelpOutline"));
+var import_NavigateBefore = __toESM(require("@mui/icons-material/NavigateBefore"));
+var import_NavigateNext = __toESM(require("@mui/icons-material/NavigateNext"));
+var import_Person2 = __toESM(require("@mui/icons-material/Person"));
+var import_CalendarToday = __toESM(require("@mui/icons-material/CalendarToday"));
+var import_QuestionAnswerOutlined = __toESM(require("@mui/icons-material/QuestionAnswerOutlined"));
+var import_Today = __toESM(require("@mui/icons-material/Today"));
+var import_DeleteForever2 = __toESM(require("@mui/icons-material/DeleteForever"));
+var import_AdsClick = __toESM(require("@mui/icons-material/AdsClick"));
+var import_Fingerprint = __toESM(require("@mui/icons-material/Fingerprint"));
+var import_SportsEsportsOutlined = __toESM(require("@mui/icons-material/SportsEsportsOutlined"));
+var import_HelpOutlineRounded = __toESM(require("@mui/icons-material/HelpOutlineRounded"));
+var import_AccountTreeOutlined2 = __toESM(require("@mui/icons-material/AccountTreeOutlined"));
+var import_SmartToyOutlined = __toESM(require("@mui/icons-material/SmartToyOutlined"));
+var import_AcUnit = __toESM(require("@mui/icons-material/AcUnit"));
+var import_Loop = __toESM(require("@mui/icons-material/Loop"));
+var import_Pending = __toESM(require("@mui/icons-material/Pending"));
+var import_AllInclusive = __toESM(require("@mui/icons-material/AllInclusive"));
+var import_WarningOutlined = __toESM(require("@mui/icons-material/WarningOutlined"));
+var import_InfoOutlined = __toESM(require("@mui/icons-material/InfoOutlined"));
+var import_AutoAwesomeRounded = __toESM(require("@mui/icons-material/AutoAwesomeRounded"));
+var import_ErrorOutlineOutlined = __toESM(require("@mui/icons-material/ErrorOutlineOutlined"));
+var import_Download = __toESM(require("@mui/icons-material/Download"));
+
+// src/components/elemental/Typography/src/Typography.ts
+var import_Typography = __toESM(require("@mui/material/Typography"));
+
+// src/components/elemental/Menu/src/DetailMenu/DetailMenu.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function DetailMenu({
+  anchorEl,
+  options,
+  selectedId = null,
+  onClose,
+  onSelect,
+  placement = "top-start",
+  searchable = false,
+  searchPlaceholder = "Search\u2026",
+  showDetailPanel = true,
+  emptySearchText = "No matches",
+  collapsedRowLabel = (count) => `${count} more`,
+  footerSlot,
+  maxListHeight = 280,
+  listMinWidth = 196,
+  listMaxWidth = 260,
+  detailWidth = 180,
+  slotProps
+}) {
+  const open = Boolean(anchorEl);
+  const [hoveredId, setHoveredId] = (0, import_react5.useState)(null);
+  const [query, setQuery] = (0, import_react5.useState)("");
+  const [expanded, setExpanded] = (0, import_react5.useState)(false);
+  const [detailSide, setDetailSide] = (0, import_react5.useState)("right");
+  const [detailTop, setDetailTop] = (0, import_react5.useState)(0);
+  const searchRef = (0, import_react5.useRef)(null);
+  const rootRef = (0, import_react5.useRef)(null);
+  const listRef = (0, import_react5.useRef)(null);
+  const detailPaperRef = (0, import_react5.useRef)(null);
+  const eventOriginatedInside = (event) => {
+    const root = rootRef.current;
+    if (!root) {
+      return false;
+    }
+    const path = typeof event.composedPath === "function" ? event.composedPath() : [event.target];
+    return path.some(
+      (node) => node instanceof Node && (node === root || root.contains(node))
+    );
+  };
+  const { sx: paperSlotSx, ...paperSlotProps } = slotProps?.paper ?? {};
+  const { sx: detailPaperSlotSx, ...detailPaperSlotProps } = slotProps?.detailPaper ?? {};
+  const filteredOptions = (0, import_react5.useMemo)(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) {
+      return options;
+    }
+    return options.filter((option) => {
+      const haystack = [option.label, option.detail, option.badge, option.keywords].filter(Boolean).join(" ").toLowerCase();
+      return haystack.includes(normalized);
+    });
+  }, [options, query]);
+  const showCollapsed = expanded || query.trim().length > 0;
+  const visibleOptions = showCollapsed ? filteredOptions : filteredOptions.filter((option) => !option.collapsed);
+  const hiddenCount = filteredOptions.length - visibleOptions.length;
+  const updateDetailPosition = import_react5.default.useCallback(() => {
+    const root = rootRef.current;
+    if (!root || !showDetailPanel) {
+      return;
+    }
+    const nextSide = resolveDetailSide(root, toCssPixels(detailWidth, 180));
+    setDetailSide((current) => current === nextSide ? current : nextSide);
+    if (!hoveredId) {
+      return;
+    }
+    const row = root.querySelector(
+      `[data-detail-menu-option="${CSS.escape(hoveredId)}"]`
+    );
+    if (!(row instanceof HTMLElement)) {
+      return;
+    }
+    const rootRect = root.getBoundingClientRect();
+    const rowRect = row.getBoundingClientRect();
+    let top = rowRect.top - rootRect.top;
+    const detailHeight = detailPaperRef.current?.offsetHeight ?? 0;
+    if (detailHeight > 0) {
+      const overflow = rowRect.top + detailHeight - (window.innerHeight - VIEWPORT_PAD_PX);
+      if (overflow > 0) {
+        top -= overflow;
+      }
+    }
+    setDetailTop(
+      (current) => Math.abs(current - top) < 0.5 ? current : top
+    );
+  }, [detailWidth, hoveredId, showDetailPanel]);
+  const updateDetailPositionRef = (0, import_react5.useRef)(updateDetailPosition);
+  updateDetailPositionRef.current = updateDetailPosition;
+  (0, import_react5.useLayoutEffect)(() => {
+    if (!open || !showDetailPanel) {
+      return;
+    }
+    updateDetailPosition();
+    const id = window.requestAnimationFrame(() => updateDetailPosition());
+    return () => window.cancelAnimationFrame(id);
+  }, [open, showDetailPanel, hoveredId, updateDetailPosition]);
+  (0, import_react5.useEffect)(() => {
+    if (!open || !showDetailPanel) {
+      return;
+    }
+    const onResize = () => updateDetailPosition();
+    window.addEventListener("resize", onResize);
+    const list = listRef.current;
+    list?.addEventListener("scroll", onResize, { passive: true });
+    return () => {
+      window.removeEventListener("resize", onResize);
+      list?.removeEventListener("scroll", onResize);
+    };
+  }, [open, showDetailPanel, updateDetailPosition]);
+  const updateDetailSideRef = updateDetailPositionRef;
+  (0, import_react5.useEffect)(() => {
+    if (!open) {
+      setHoveredId(null);
+      setQuery("");
+      setExpanded(false);
+      setDetailSide("right");
+      setDetailTop(0);
+      return;
+    }
+    setHoveredId(selectedId || options[0]?.id || null);
+    if (searchable) {
+      const id = window.requestAnimationFrame(() => {
+        searchRef.current?.focus();
+      });
+      return () => window.cancelAnimationFrame(id);
+    }
+  }, [open, options, selectedId, searchable]);
+  (0, import_react5.useEffect)(() => {
+    if (!open) {
+      return;
+    }
+    if (visibleOptions.length === 0) {
+      setHoveredId(null);
+      return;
+    }
+    setHoveredId((current) => {
+      if (current && visibleOptions.some((option) => option.id === current)) {
+        return current;
+      }
+      if (selectedId && visibleOptions.some((option) => option.id === selectedId)) {
+        return selectedId;
+      }
+      return visibleOptions[0]?.id ?? null;
+    });
+  }, [visibleOptions, open, selectedId]);
+  const hoveredOption = visibleOptions.find((option) => option.id === hoveredId) ?? visibleOptions.find((option) => option.id === selectedId) ?? visibleOptions[0];
+  const paperSx2 = {
+    border: "1px solid",
+    borderColor: "divider",
+    borderRadius: 2.5,
+    overflow: "hidden",
+    bgcolor: "color-mix(in srgb, var(--mui-palette-background-paper), transparent 4%)",
+    boxShadow: "0 12px 32px color-mix(in srgb, var(--mui-palette-common-black), transparent 78%)"
+  };
+  const detailPositionSx = detailSide === "left" ? { right: "calc(100% + 8px)", left: "auto" } : { left: "calc(100% + 8px)", right: "auto" };
+  const flipFallbacks = placement.startsWith("right") ? ["left-start", "right-end", "left-end"] : placement.startsWith("left") ? ["right-start", "left-end", "right-end"] : ["bottom-start", "top-start"];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_Popper.default,
+    {
+      open,
+      anchorEl,
+      placement,
+      modifiers: [
+        { name: "offset", options: { offset: [0, 10] } },
+        { name: "preventOverflow", options: { padding: 8 } },
+        // Keep start-aligned so the list stays under the chip; end placements
+        // misalign when a wide absolute detail panel exists beside the list.
+        // Side placements (ModelPicker flyout) flip left/right instead of up.
+        { name: "flip", options: { fallbackPlacements: [...flipFallbacks] } },
+        {
+          name: "detailSide",
+          enabled: true,
+          phase: "write",
+          fn() {
+            updateDetailSideRef.current();
+          }
+        }
+      ],
+      sx: { zIndex: (theme) => theme.zIndex.modal + 2 },
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_ClickAwayListener.default,
+        {
+          onClickAway: (event) => {
+            if (eventOriginatedInside(event)) {
+              return;
+            }
+            onClose();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            import_Box.default,
+            {
+              ref: rootRef,
+              onKeyDown: (event) => {
+                if (event.key === "Tab" && hiddenCount > 0) {
+                  event.preventDefault();
+                  setExpanded(true);
+                }
+              },
+              sx: {
+                position: "relative",
+                display: "inline-block",
+                verticalAlign: "top"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  MuiPaper,
+                  {
+                    elevation: 0,
+                    ...paperSlotProps,
+                    sx: mergeSx(
+                      { ...paperSx2, minWidth: listMinWidth, maxWidth: listMaxWidth },
+                      paperSlotSx
+                    ),
+                    children: [
+                      searchable ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        import_Box.default,
+                        {
+                          sx: {
+                            px: 1,
+                            pt: 1,
+                            pb: 0.5,
+                            borderBottom: "1px solid",
+                            borderColor: "divider"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                            import_InputBase.default,
+                            {
+                              inputRef: searchRef,
+                              value: query,
+                              onChange: (event) => setQuery(event.target.value),
+                              onKeyDown: (event) => {
+                                if (event.key === "Escape") {
+                                  event.stopPropagation();
+                                  if (query) {
+                                    setQuery("");
+                                    return;
+                                  }
+                                  onClose();
+                                }
+                              },
+                              placeholder: searchPlaceholder,
+                              fullWidth: true,
+                              startAdornment: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_InputAdornment.default, { position: "start", sx: { mr: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Search.default, { sx: { fontSize: 16, color: "text.secondary" } }) }),
+                              endAdornment: query ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_InputAdornment.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                                IconButton_default,
+                                {
+                                  size: "small",
+                                  "aria-label": "Clear search",
+                                  onClick: () => {
+                                    setQuery("");
+                                    searchRef.current?.focus();
+                                  },
+                                  sx: { p: 0.25 },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Close2.default, { sx: { fontSize: 14 } })
+                                }
+                              ) }) : null,
+                              sx: {
+                                px: 0.75,
+                                py: 0.35,
+                                fontSize: "0.82rem",
+                                borderRadius: 1.5,
+                                bgcolor: "action.hover",
+                                "& .MuiInputBase-input": {
+                                  py: 0.4
+                                }
+                              }
+                            }
+                          )
+                        }
+                      ) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        import_List.default,
+                        {
+                          ref: listRef,
+                          dense: true,
+                          disablePadding: true,
+                          sx: {
+                            py: 0.5,
+                            maxHeight: maxListHeight,
+                            overflowY: "auto"
+                          },
+                          children: visibleOptions.length === 0 && hiddenCount === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Box.default, { sx: { px: 1.5, py: 1.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                            import_Typography.default,
+                            {
+                              variant: "body2",
+                              sx: { fontSize: "0.78rem", color: "text.secondary", m: 0 },
+                              children: emptySearchText
+                            }
+                          ) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                            visibleOptions.map((option, index) => {
+                              const selected = option.id === selectedId;
+                              const hovered = option.id === hoveredId;
+                              const accent = option.accentColor;
+                              const showGroupHeader = option.group != null && (index === 0 || visibleOptions[index - 1]?.group !== option.group);
+                              return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react5.default.Fragment, { children: [
+                                showGroupHeader ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                                  import_Typography.default,
+                                  {
+                                    component: "div",
+                                    sx: {
+                                      px: 1.5,
+                                      pt: 1,
+                                      pb: 0.25,
+                                      fontSize: "0.66rem",
+                                      fontWeight: 700,
+                                      letterSpacing: "0.06em",
+                                      textTransform: "uppercase",
+                                      color: "text.secondary",
+                                      m: 0
+                                    },
+                                    children: option.group
+                                  }
+                                ) : null,
+                                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                                  import_ListItemButton.default,
+                                  {
+                                    selected,
+                                    "data-detail-menu-option": option.id,
+                                    onMouseEnter: () => setHoveredId(option.id),
+                                    onFocus: () => setHoveredId(option.id),
+                                    onClick: () => onSelect(option.id),
+                                    sx: {
+                                      mx: 0.5,
+                                      my: 0.15,
+                                      px: 1,
+                                      py: 0.85,
+                                      gap: 1,
+                                      borderRadius: 1.75,
+                                      alignItems: "center",
+                                      "& .detail-menu-action": { opacity: 0 },
+                                      "&:hover .detail-menu-action, &:focus-within .detail-menu-action": { opacity: 1 },
+                                      "&.Mui-selected": {
+                                        bgcolor: "color-mix(in srgb, var(--mui-palette-action-selected), transparent 55%)"
+                                      },
+                                      "&.Mui-selected:hover": {
+                                        bgcolor: "color-mix(in srgb, var(--mui-palette-action-selected), transparent 35%)"
+                                      },
+                                      ...hovered && !selected ? {
+                                        bgcolor: "color-mix(in srgb, var(--mui-palette-action-hover), transparent 40%)"
+                                      } : null
+                                    },
+                                    children: [
+                                      option.icon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                                        import_Box.default,
+                                        {
+                                          sx: {
+                                            width: 22,
+                                            height: 22,
+                                            display: "inline-flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            flexShrink: 0
+                                          },
+                                          children: option.icon
+                                        }
+                                      ) : null,
+                                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                                        import_Typography.default,
+                                        {
+                                          sx: {
+                                            flex: 1,
+                                            minWidth: 0,
+                                            fontSize: "0.82rem",
+                                            fontWeight: selected ? 700 : 600,
+                                            color: selected && accent ? accent : "text.primary",
+                                            lineHeight: 1.2,
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                            whiteSpace: "nowrap",
+                                            m: 0
+                                          },
+                                          children: option.label
+                                        }
+                                      ),
+                                      option.badge ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                                        import_Typography.default,
+                                        {
+                                          component: "span",
+                                          sx: {
+                                            flexShrink: 0,
+                                            fontSize: "0.72rem",
+                                            fontWeight: 500,
+                                            color: "text.secondary",
+                                            m: 0
+                                          },
+                                          children: option.badge
+                                        }
+                                      ) : null,
+                                      option.actionSlot ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                                        import_Box.default,
+                                        {
+                                          component: "span",
+                                          className: "detail-menu-action",
+                                          onClick: (event) => event.stopPropagation(),
+                                          sx: {
+                                            display: "inline-flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            minWidth: 18,
+                                            flexShrink: 0,
+                                            color: "text.secondary",
+                                            transition: "opacity 120ms"
+                                          },
+                                          children: option.actionSlot
+                                        }
+                                      ) : null
+                                    ]
+                                  }
+                                )
+                              ] }, option.id);
+                            }),
+                            hiddenCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                              import_ListItemButton.default,
+                              {
+                                onMouseDown: (event) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
+                                },
+                                onClick: (event) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
+                                  setExpanded(true);
+                                },
+                                sx: {
+                                  mx: 0.5,
+                                  my: 0.15,
+                                  px: 1,
+                                  py: 0.85,
+                                  borderRadius: 1.75,
+                                  alignItems: "center"
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                                  import_Typography.default,
+                                  {
+                                    sx: {
+                                      flex: 1,
+                                      minWidth: 0,
+                                      fontSize: "0.78rem",
+                                      color: "text.secondary",
+                                      m: 0
+                                    },
+                                    children: collapsedRowLabel(hiddenCount)
+                                  }
+                                )
+                              }
+                            ) : null
+                          ] })
+                        }
+                      ),
+                      footerSlot ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        import_Box.default,
+                        {
+                          sx: {
+                            borderTop: "1px solid",
+                            borderColor: "divider",
+                            px: 0.5,
+                            py: 0.35
+                          },
+                          children: footerSlot
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                showDetailPanel && hoveredOption ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  import_Box.default,
+                  {
+                    ref: detailPaperRef,
+                    sx: {
+                      display: { xs: "none", sm: "block" },
+                      position: "absolute",
+                      top: detailTop,
+                      ...detailPositionSx,
+                      width: detailWidth
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                      MuiPaper,
+                      {
+                        elevation: 0,
+                        ...detailPaperSlotProps,
+                        sx: mergeSx(
+                          {
+                            px: 1.25,
+                            py: 1.1,
+                            border: "1px solid",
+                            borderColor: "divider",
+                            borderRadius: 2,
+                            bgcolor: "color-mix(in srgb, var(--mui-palette-background-paper), transparent 4%)",
+                            boxShadow: "0 10px 28px color-mix(in srgb, var(--mui-palette-common-black), transparent 82%)"
+                          },
+                          detailPaperSlotSx
+                        ),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                            import_Typography.default,
+                            {
+                              sx: {
+                                fontSize: "0.78rem",
+                                fontWeight: 700,
+                                color: hoveredOption.accentColor || "text.primary",
+                                lineHeight: 1.2,
+                                mt: 0,
+                                mx: 0,
+                                mb: 0.4
+                              },
+                              children: hoveredOption.label
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                            import_Typography.default,
+                            {
+                              sx: {
+                                fontSize: "0.72rem",
+                                color: "text.secondary",
+                                lineHeight: 1.35,
+                                m: 0
+                              },
+                              children: hoveredOption.detail?.trim() || "\u2014"
+                            }
+                          ),
+                          hoveredOption.detailSlot ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                            import_Box.default,
+                            {
+                              sx: {
+                                mt: 1,
+                                pt: 1,
+                                borderTop: "1px solid",
+                                borderColor: "divider"
+                              },
+                              children: hoveredOption.detailSlot
+                            }
+                          ) : null
+                        ]
+                      }
+                    )
+                  }
+                ) : null
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var DETAIL_GAP_PX = 8;
+var VIEWPORT_PAD_PX = 8;
+function toCssPixels(value, fallback) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const match = value.trim().match(/^(\d+(?:\.\d+)?)px$/i);
+    if (match) {
+      return Number.parseFloat(match[1]);
+    }
+  }
+  return fallback;
+}
+function resolveDetailSide(listRoot, detailWidthPx) {
+  const rect = listRoot.getBoundingClientRect();
+  const need = detailWidthPx + DETAIL_GAP_PX;
+  const spaceRight = window.innerWidth - rect.right - VIEWPORT_PAD_PX;
+  const spaceLeft = rect.left - VIEWPORT_PAD_PX;
+  if (spaceRight >= need) {
+    return "right";
+  }
+  if (spaceLeft >= need) {
+    return "left";
+  }
+  return spaceLeft > spaceRight ? "left" : "right";
+}
+
+// src/components/elemental/Menu/src/ModelMenu/ModelMenu.tsx
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var BRAND_LABELS = {
+  anthropic: "Anthropic",
+  google: "Google",
+  meta: "Meta",
+  openai: "OpenAI"
+};
+var defaultBrandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_MemoryRounded.default, { sx: { fontSize: 14 }, "aria-hidden": true });
+function ModelMenu({
+  anchorEl,
+  options,
+  selectedId = null,
+  onClose,
+  onSelect,
+  searchable,
+  searchPlaceholder = "Search models\u2026",
+  placement,
+  showDetailPanel,
+  brandIconMap,
+  slotProps,
+  maxListHeight,
+  footerSlot
+}) {
+  const detailOptions = (0, import_react6.useMemo)(
+    () => options.map((option) => ({
+      id: option.id,
+      label: option.label,
+      detail: option.detail,
+      badge: option.badge,
+      detailSlot: option.detailSlot,
+      group: option.group,
+      collapsed: option.collapsed,
+      actionSlot: option.actionSlot,
+      keywords: [option.brand, option.detail, option.keywords].filter(Boolean).join(" "),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_Box.default,
+        {
+          component: "span",
+          title: BRAND_LABELS[option.brand ?? ""],
+          sx: {
+            display: "inline-flex",
+            width: 20,
+            height: 20,
+            alignItems: "center",
+            justifyContent: "center",
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: 1.25,
+            color: "text.secondary",
+            "& svg": { display: "block" }
+          },
+          children: option.icon ?? brandIconMap?.[option.brand ?? ""] ?? defaultBrandIcon()
+        }
+      )
+    })),
+    [options, brandIconMap]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    DetailMenu,
+    {
+      anchorEl,
+      options: detailOptions,
+      selectedId,
+      searchable: searchable ?? options.length >= 6,
+      searchPlaceholder,
+      placement,
+      showDetailPanel,
+      collapsedRowLabel: (count) => `${count} more model${count === 1 ? "" : "s"}`,
+      onClose,
+      onSelect,
+      slotProps,
+      maxListHeight,
+      footerSlot
+    }
+  );
+}
+
+// src/components/elemental/Menu/src/ModelPicker/ModelPicker.tsx
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var paperSx = {
+  border: "1px solid",
+  borderColor: "divider",
+  borderRadius: 2.5,
+  overflow: "hidden",
+  bgcolor: "color-mix(in srgb, var(--mui-palette-background-paper), transparent 4%)",
+  boxShadow: "0 12px 32px color-mix(in srgb, var(--mui-palette-common-black), transparent 78%)",
+  minWidth: 180
+};
+function ModelPicker({
+  anchorEl,
+  options,
+  selectedId = null,
+  onClose,
+  onSelect,
+  configSlot,
+  modelSectionLabel = "Model",
+  searchable,
+  searchPlaceholder,
+  brandIconMap,
+  slotProps,
+  maxListHeight,
+  footerSlot,
+  showDetailPanel = true
+}) {
+  const open = Boolean(anchorEl);
+  const [modelRowEl, setModelRowEl] = (0, import_react7.useState)(null);
+  const [modelFlyoutOpen, setModelFlyoutOpen] = (0, import_react7.useState)(false);
+  const rootRef = (0, import_react7.useRef)(null);
+  const selected = (0, import_react7.useMemo)(
+    () => options.find((option) => option.id === selectedId) ?? options[0],
+    [options, selectedId]
+  );
+  (0, import_react7.useEffect)(() => {
+    if (!open) {
+      setModelFlyoutOpen(false);
+      setModelRowEl(null);
+    }
+  }, [open]);
+  const closeAll = () => {
+    setModelFlyoutOpen(false);
+    onClose();
+  };
+  const openModelFlyout = (element) => {
+    setModelRowEl(element);
+    setModelFlyoutOpen(true);
+  };
+  const isInsidePickerSurface = (event) => {
+    const path = typeof event.composedPath === "function" ? event.composedPath() : [event.target];
+    return path.some((node) => {
+      if (!(node instanceof Element)) {
+        return false;
+      }
+      if (rootRef.current?.contains(node)) {
+        return true;
+      }
+      return node.hasAttribute("data-model-picker-flyout") || Boolean(node.closest("[data-model-picker-flyout]"));
+    });
+  };
+  const flyoutSlotProps = (0, import_react7.useMemo)(() => {
+    const paper = slotProps?.paper;
+    const detailPaper = slotProps?.detailPaper;
+    const flyoutTag = { "data-model-picker-flyout": "" };
+    return {
+      ...slotProps,
+      paper: {
+        ...paper,
+        ...flyoutTag
+      },
+      detailPaper: {
+        ...detailPaper,
+        ...flyoutTag
+      }
+    };
+  }, [slotProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_Popper.default,
+      {
+        open,
+        anchorEl,
+        placement: "top-start",
+        modifiers: [
+          { name: "offset", options: { offset: [0, 10] } },
+          { name: "preventOverflow", options: { padding: 8 } },
+          {
+            name: "flip",
+            options: { fallbackPlacements: ["bottom-start", "top-start"] }
+          }
+        ],
+        sx: { zIndex: (theme) => theme.zIndex.modal + 2 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_ClickAwayListener.default,
+          {
+            onClickAway: (event) => {
+              if (isInsidePickerSurface(event)) {
+                return;
+              }
+              closeAll();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Box.default, { ref: rootRef, sx: { display: "inline-block" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              MuiPaper,
+              {
+                elevation: 0,
+                sx: paperSx,
+                children: [
+                  configSlot ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Box.default, { sx: { px: 0.5, pt: 0.5, pb: 0.25 }, children: configSlot }) : null,
+                  configSlot ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    import_Box.default,
+                    {
+                      sx: {
+                        borderTop: "1px solid",
+                        borderColor: "divider",
+                        mx: 1
+                      }
+                    }
+                  ) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_Box.default, { sx: { px: 0.5, pb: 0.5, pt: configSlot ? 0.25 : 0.5 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      import_Typography.default,
+                      {
+                        component: "div",
+                        sx: {
+                          px: 1,
+                          pt: 0.5,
+                          pb: 0.15,
+                          fontSize: "0.66rem",
+                          fontWeight: 700,
+                          letterSpacing: "0.04em",
+                          color: "text.secondary",
+                          m: 0
+                        },
+                        children: modelSectionLabel
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_List.default, { dense: true, disablePadding: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      import_ListItemButton.default,
+                      {
+                        onMouseEnter: (event) => openModelFlyout(event.currentTarget),
+                        onClick: (event) => openModelFlyout(event.currentTarget),
+                        sx: {
+                          mx: 0.5,
+                          my: 0.15,
+                          px: 1,
+                          py: 0.75,
+                          gap: 1,
+                          borderRadius: 1.5,
+                          alignItems: "center",
+                          bgcolor: "action.hover",
+                          "&:hover": { bgcolor: "action.selected" }
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            import_Typography.default,
+                            {
+                              sx: {
+                                flex: 1,
+                                minWidth: 0,
+                                fontSize: "0.82rem",
+                                fontWeight: 600,
+                                color: "text.primary",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                                m: 0
+                              },
+                              children: selected?.label ?? "Select model"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            import_KeyboardArrowRight.default,
+                            {
+                              sx: { fontSize: 16, color: "text.secondary", flexShrink: 0 }
+                            }
+                          )
+                        ]
+                      }
+                    ) })
+                  ] })
+                ]
+              }
+            ) })
+          }
+        )
+      }
+    ),
+    modelFlyoutOpen ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ModelMenu,
+      {
+        anchorEl: modelRowEl,
+        options,
+        selectedId,
+        searchable,
+        searchPlaceholder,
+        brandIconMap,
+        slotProps: flyoutSlotProps,
+        maxListHeight,
+        footerSlot,
+        placement: "right-start",
+        showDetailPanel,
+        onClose: () => setModelFlyoutOpen(false),
+        onSelect: (id) => {
+          onSelect(id);
+        }
+      }
+    ) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DetailMenu,
+  IconMenu,
+  Menu,
+  MenuItem,
+  MenuPopper,
+  ModelMenu,
+  ModelPicker,
+  StyledItemIcon,
+  StyledMenuItem,
+  menuItemTheme,
+  menuTheme,
+  useMenu
+});
+//# sourceMappingURL=menu.js.map