@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/chunk-HR3A4H4E.mjs

@@ -0,0 +1,1289 @@
+import {
+  default as default11,
+  default5 as default12
+} from "./chunk-TDRA5EZI.mjs";
+import {
+  default3 as default10
+} from "./chunk-T4X375IG.mjs";
+import {
+  MuiPaper
+} from "./chunk-3VUAM2GY.mjs";
+import {
+  default as default4,
+  default2 as default5
+} from "./chunk-MDAUF7IL.mjs";
+import {
+  IconButton_HoverSpinnin_default,
+  IconButton_default
+} from "./chunk-JIU5GVM7.mjs";
+import {
+  default108 as default8,
+  default110 as default9,
+  default33 as default6,
+  default51 as default7
+} from "./chunk-ZVFYOXDE.mjs";
+import {
+  default as default3
+} from "./chunk-4RPFRNXG.mjs";
+import {
+  default as default2,
+  mergeSx
+} from "./chunk-S6EZVRZC.mjs";
+
+// src/components/elemental/Menu/src/Menu/Menu.tsx
+import { useState, forwardRef, useImperativeHandle, useMemo, useEffect } from "react";
+import MenuList from "@mui/material/MenuList";
+import ListItemText from "@mui/material/ListItemText";
+import { styled as styled2 } from "@mui/material/styles";
+
+// src/components/elemental/Menu/src/MenuItem.tsx
+import MenuItem from "@mui/material/MenuItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import { styled } from "@mui/material/styles";
+var StyledMenuItem = styled(MenuItem, {
+  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 = styled(ListItemIcon, {
+  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
+import { jsx, jsxs } from "react/jsx-runtime";
+var CustomMenuList = forwardRef(({
+  options = [],
+  extraItemClickHandler,
+  menuItemProps,
+  initSelected = [],
+  multiple = false,
+  autoFocusItem,
+  menuRef,
+  isIconOnly = false,
+  optionHeader,
+  sorted = true
+}, ref) => {
+  const [localSelected, setLocalSelected] = useState(initSelected);
+  useImperativeHandle(ref, () => ({
+    getSelectedItem: () => localSelected
+  }), [localSelected]);
+  useEffect(() => {
+    setLocalSelected(initSelected);
+  }, [initSelected]);
+  const sortedOptions = 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__ */ jsxs(
+    StyledMenuList,
+    {
+      ref: menuRef,
+      autoFocusItem,
+      fontSize: menuItemProps?.fontSize,
+      padding: menuItemProps?.padding,
+      children: [
+        optionHeader,
+        sortedOptions.map((o, i) => /* @__PURE__ */ 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__ */ jsx(StyledItemIcon, { isIconOnly, children: o.icon }),
+              o.label && !isIconOnly && /* @__PURE__ */ jsx(ListItemText, { children: o.label }),
+              o.extension
+            ]
+          },
+          i
+        ))
+      ]
+    }
+  );
+});
+var Menu_default = CustomMenuList;
+var StyledMenuList = styled2(MenuList, {
+  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
+import { default as default13 } from "@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/Menu/src/useMenu/useMenu.tsx
+import { useState as useState2, useRef } from "react";
+import { jsx as jsx2 } from "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__ */ jsx2(
+    default5,
+    {
+      open,
+      anchorEl,
+      placement,
+      sx: { zIndex: "1301" },
+      modifiers: [{
+        name: "offset",
+        options: { offset: [0, 8] }
+      }],
+      children: /* @__PURE__ */ jsx2(
+        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__ */ jsx2(default4, { onClickAway: closeHandler, children: /* @__PURE__ */ jsx2(
+            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] = useState2(null);
+  const [anchorPosition, setAnchorPosition] = useState2({ top: 0, left: 0 });
+  const ref = useRef(null);
+  const menuRef = 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
+import { useMemo as useMemo2 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "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 = useMemo2(() => {
+    if (slots.trigger) return slots.trigger;
+    if (isSpinButton) {
+      return IconButton_HoverSpinnin_default;
+    } else {
+      return IconButton_default;
+    }
+  }, [isSpinButton, slots.trigger]);
+  return (
+    // dont use Box here, it will cause the Button tooltip render differently
+    // the height of the tooltip will be a bit off from IconButton
+    /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx3(
+        Trigger,
+        {
+          title,
+          onClick: p.onTriggerClickHandler,
+          size: iconSize,
+          ...triggerExtraProps,
+          children: icon
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        MenuPopper,
+        {
+          openMenuProps: {
+            ...p,
+            ...menuProps
+          },
+          optionHeader: optionHeaderProps,
+          options,
+          menuItemProps,
+          ...popperProps
+        }
+      )
+    ] })
+  );
+};
+var IconMenu_default = IconMenuList;
+
+// src/components/elemental/Menu/src/DetailMenu/DetailMenu.tsx
+import React, { useEffect as useEffect2, useLayoutEffect, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
+import InputBase from "@mui/material/InputBase";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "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] = useState3(null);
+  const [query, setQuery] = useState3("");
+  const [expanded, setExpanded] = useState3(false);
+  const [detailSide, setDetailSide] = useState3("right");
+  const [detailTop, setDetailTop] = useState3(0);
+  const searchRef = useRef2(null);
+  const rootRef = useRef2(null);
+  const listRef = useRef2(null);
+  const detailPaperRef = useRef2(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 = useMemo3(() => {
+    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 = React.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 = useRef2(updateDetailPosition);
+  updateDetailPositionRef.current = updateDetailPosition;
+  useLayoutEffect(() => {
+    if (!open || !showDetailPanel) {
+      return;
+    }
+    updateDetailPosition();
+    const id = window.requestAnimationFrame(() => updateDetailPosition());
+    return () => window.cancelAnimationFrame(id);
+  }, [open, showDetailPanel, hoveredId, updateDetailPosition]);
+  useEffect2(() => {
+    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;
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    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__ */ jsx4(
+    default5,
+    {
+      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__ */ jsx4(
+        default4,
+        {
+          onClickAway: (event) => {
+            if (eventOriginatedInside(event)) {
+              return;
+            }
+            onClose();
+          },
+          children: /* @__PURE__ */ jsxs3(
+            default2,
+            {
+              ref: rootRef,
+              onKeyDown: (event) => {
+                if (event.key === "Tab" && hiddenCount > 0) {
+                  event.preventDefault();
+                  setExpanded(true);
+                }
+              },
+              sx: {
+                position: "relative",
+                display: "inline-block",
+                verticalAlign: "top"
+              },
+              children: [
+                /* @__PURE__ */ jsxs3(
+                  MuiPaper,
+                  {
+                    elevation: 0,
+                    ...paperSlotProps,
+                    sx: mergeSx(
+                      { ...paperSx2, minWidth: listMinWidth, maxWidth: listMaxWidth },
+                      paperSlotSx
+                    ),
+                    children: [
+                      searchable ? /* @__PURE__ */ jsx4(
+                        default2,
+                        {
+                          sx: {
+                            px: 1,
+                            pt: 1,
+                            pb: 0.5,
+                            borderBottom: "1px solid",
+                            borderColor: "divider"
+                          },
+                          children: /* @__PURE__ */ jsx4(
+                            InputBase,
+                            {
+                              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__ */ jsx4(default10, { position: "start", sx: { mr: 0.5 }, children: /* @__PURE__ */ jsx4(default6, { sx: { fontSize: 16, color: "text.secondary" } }) }),
+                              endAdornment: query ? /* @__PURE__ */ jsx4(default10, { position: "end", children: /* @__PURE__ */ jsx4(
+                                IconButton_default,
+                                {
+                                  size: "small",
+                                  "aria-label": "Clear search",
+                                  onClick: () => {
+                                    setQuery("");
+                                    searchRef.current?.focus();
+                                  },
+                                  sx: { p: 0.25 },
+                                  children: /* @__PURE__ */ jsx4(default8, { 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__ */ jsx4(
+                        default11,
+                        {
+                          ref: listRef,
+                          dense: true,
+                          disablePadding: true,
+                          sx: {
+                            py: 0.5,
+                            maxHeight: maxListHeight,
+                            overflowY: "auto"
+                          },
+                          children: visibleOptions.length === 0 && hiddenCount === 0 ? /* @__PURE__ */ jsx4(default2, { sx: { px: 1.5, py: 1.25 }, children: /* @__PURE__ */ jsx4(
+                            default3,
+                            {
+                              variant: "body2",
+                              sx: { fontSize: "0.78rem", color: "text.secondary", m: 0 },
+                              children: emptySearchText
+                            }
+                          ) }) : /* @__PURE__ */ jsxs3(Fragment2, { 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__ */ jsxs3(React.Fragment, { children: [
+                                showGroupHeader ? /* @__PURE__ */ jsx4(
+                                  default3,
+                                  {
+                                    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__ */ jsxs3(
+                                  default12,
+                                  {
+                                    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__ */ jsx4(
+                                        default2,
+                                        {
+                                          sx: {
+                                            width: 22,
+                                            height: 22,
+                                            display: "inline-flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            flexShrink: 0
+                                          },
+                                          children: option.icon
+                                        }
+                                      ) : null,
+                                      /* @__PURE__ */ jsx4(
+                                        default3,
+                                        {
+                                          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__ */ jsx4(
+                                        default3,
+                                        {
+                                          component: "span",
+                                          sx: {
+                                            flexShrink: 0,
+                                            fontSize: "0.72rem",
+                                            fontWeight: 500,
+                                            color: "text.secondary",
+                                            m: 0
+                                          },
+                                          children: option.badge
+                                        }
+                                      ) : null,
+                                      option.actionSlot ? /* @__PURE__ */ jsx4(
+                                        default2,
+                                        {
+                                          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__ */ jsx4(
+                              default12,
+                              {
+                                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__ */ jsx4(
+                                  default3,
+                                  {
+                                    sx: {
+                                      flex: 1,
+                                      minWidth: 0,
+                                      fontSize: "0.78rem",
+                                      color: "text.secondary",
+                                      m: 0
+                                    },
+                                    children: collapsedRowLabel(hiddenCount)
+                                  }
+                                )
+                              }
+                            ) : null
+                          ] })
+                        }
+                      ),
+                      footerSlot ? /* @__PURE__ */ jsx4(
+                        default2,
+                        {
+                          sx: {
+                            borderTop: "1px solid",
+                            borderColor: "divider",
+                            px: 0.5,
+                            py: 0.35
+                          },
+                          children: footerSlot
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                showDetailPanel && hoveredOption ? /* @__PURE__ */ jsx4(
+                  default2,
+                  {
+                    ref: detailPaperRef,
+                    sx: {
+                      display: { xs: "none", sm: "block" },
+                      position: "absolute",
+                      top: detailTop,
+                      ...detailPositionSx,
+                      width: detailWidth
+                    },
+                    children: /* @__PURE__ */ jsxs3(
+                      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__ */ jsx4(
+                            default3,
+                            {
+                              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__ */ jsx4(
+                            default3,
+                            {
+                              sx: {
+                                fontSize: "0.72rem",
+                                color: "text.secondary",
+                                lineHeight: 1.35,
+                                m: 0
+                              },
+                              children: hoveredOption.detail?.trim() || "\u2014"
+                            }
+                          ),
+                          hoveredOption.detailSlot ? /* @__PURE__ */ jsx4(
+                            default2,
+                            {
+                              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
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var BRAND_LABELS = {
+  anthropic: "Anthropic",
+  google: "Google",
+  meta: "Meta",
+  openai: "OpenAI"
+};
+var defaultBrandIcon = () => /* @__PURE__ */ jsx5(default7, { 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 = useMemo4(
+    () => 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__ */ jsx5(
+        default2,
+        {
+          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__ */ jsx5(
+    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
+import { useEffect as useEffect3, useMemo as useMemo5, useRef as useRef3, useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "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] = useState4(null);
+  const [modelFlyoutOpen, setModelFlyoutOpen] = useState4(false);
+  const rootRef = useRef3(null);
+  const selected = useMemo5(
+    () => options.find((option) => option.id === selectedId) ?? options[0],
+    [options, selectedId]
+  );
+  useEffect3(() => {
+    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 = useMemo5(() => {
+    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__ */ jsxs4(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(
+      default5,
+      {
+        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__ */ jsx6(
+          default4,
+          {
+            onClickAway: (event) => {
+              if (isInsidePickerSurface(event)) {
+                return;
+              }
+              closeAll();
+            },
+            children: /* @__PURE__ */ jsx6(default2, { ref: rootRef, sx: { display: "inline-block" }, children: /* @__PURE__ */ jsxs4(
+              MuiPaper,
+              {
+                elevation: 0,
+                sx: paperSx,
+                children: [
+                  configSlot ? /* @__PURE__ */ jsx6(default2, { sx: { px: 0.5, pt: 0.5, pb: 0.25 }, children: configSlot }) : null,
+                  configSlot ? /* @__PURE__ */ jsx6(
+                    default2,
+                    {
+                      sx: {
+                        borderTop: "1px solid",
+                        borderColor: "divider",
+                        mx: 1
+                      }
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxs4(default2, { sx: { px: 0.5, pb: 0.5, pt: configSlot ? 0.25 : 0.5 }, children: [
+                    /* @__PURE__ */ jsx6(
+                      default3,
+                      {
+                        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__ */ jsx6(default11, { dense: true, disablePadding: true, children: /* @__PURE__ */ jsxs4(
+                      default12,
+                      {
+                        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__ */ jsx6(
+                            default3,
+                            {
+                              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__ */ jsx6(
+                            default9,
+                            {
+                              sx: { fontSize: 16, color: "text.secondary", flexShrink: 0 }
+                            }
+                          )
+                        ]
+                      }
+                    ) })
+                  ] })
+                ]
+              }
+            ) })
+          }
+        )
+      }
+    ),
+    modelFlyoutOpen ? /* @__PURE__ */ jsx6(
+      ModelMenu,
+      {
+        anchorEl: modelRowEl,
+        options,
+        selectedId,
+        searchable,
+        searchPlaceholder,
+        brandIconMap,
+        slotProps: flyoutSlotProps,
+        maxListHeight,
+        footerSlot,
+        placement: "right-start",
+        showDetailPanel,
+        onClose: () => setModelFlyoutOpen(false),
+        onSelect: (id) => {
+          onSelect(id);
+        }
+      }
+    ) : null
+  ] });
+}
+
+export {
+  StyledMenuItem,
+  StyledItemIcon,
+  Menu_default,
+  menuItemTheme,
+  menuTheme,
+  default13 as default,
+  MenuPopper,
+  useMenu,
+  IconMenu_default,
+  DetailMenu,
+  ModelMenu,
+  ModelPicker
+};
+//# sourceMappingURL=chunk-HR3A4H4E.mjs.map