@overmap-ai/blocks 1.0.40-alpha.3 → 1.0.40-overlay.1

package/dist/blocks.js

@@ -1,10 +1,12 @@
 import * as RadixAlertDialog from "@radix-ui/react-alert-dialog";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cva, cx } from "class-variance-authority";
-import { createContext, useContext, memo, useMemo, useState, useCallback, useEffect, useId, useLayoutEffect, use, useRef } from "react";
+import * as React from "react";
+import React__default, { createContext, useContext, memo, useMemo, useState, useCallback, useEffect, useLayoutEffect, use, useRef } from "react";
 import * as RadixAvatar from "@radix-ui/react-avatar";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
 import { useMediaQuery } from "react-responsive";
+import * as RadixPrimitiveCollapsible from "@radix-ui/react-collapsible";
 import { CommandItem, CommandRoot, CommandEmpty, CommandGroup, CommandInput, useCommandState, CommandList, CommandSeparator } from "cmdk";
 import * as RadixDialog from "@radix-ui/react-dialog";
 import { DialogPortal, DialogContent as DialogContent$1, DialogTitle, DialogDescription, DialogOverlay as DialogOverlay$1, DialogTrigger } from "@radix-ui/react-dialog";
@@ -14,7 +16,7 @@ import * as RadixHoverCard from "@radix-ui/react-hover-card";
 import { CSSTransition } from "react-transition-group";
 import ReactDOM from "react-dom";
 import { Slot } from "@radix-ui/react-slot";
-import { useListItem, useMergeRefs, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList, useFloatingNodeId, useFloating, offset, size, flip, shift, hide, autoUpdate, useRole, useDismiss, useClick, useListNavigation, useInteractions, FloatingTree, useHover, safePolygon } from "@floating-ui/react";
+import { useFloatingNodeId, useFloating, offset, size, flip, shift, hide, autoUpdate, useRole, useDismiss, useClick, useListNavigation, useInteractions, FloatingTree, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList, useHover, safePolygon, useListItem, useMergeRefs } from "@floating-ui/react";
 import * as RadixSeparator from "@radix-ui/react-separator";
 import * as RadixOneTimePasswordField from "@radix-ui/react-one-time-password-field";
 import { useErrorBoundary, ErrorBoundary } from "react-error-boundary";
@@ -786,6 +788,82 @@ const Checkbox = {
 };
 const SelectContext = createContext({});
 const MultiSelectContext = createContext({});
+const usePassiveLayoutEffect = React__default[typeof document !== "undefined" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"];
+const useLatest = (current) => {
+  const storedValue = React.useRef(current);
+  React.useEffect(() => {
+    storedValue.current = current;
+  });
+  return storedValue;
+};
+function _ref() {
+}
+function useResizeObserver(target, callback, options = {}) {
+  const resizeObserver = getResizeObserver(options.polyfill);
+  const storedCallback = useLatest(callback);
+  usePassiveLayoutEffect(() => {
+    let didUnsubscribe = false;
+    const targetEl = target && "current" in target ? target.current : target;
+    if (!targetEl) return _ref;
+    function cb(entry, observer) {
+      if (didUnsubscribe) return;
+      storedCallback.current(entry, observer);
+    }
+    resizeObserver.subscribe(targetEl, cb);
+    return () => {
+      didUnsubscribe = true;
+      resizeObserver.unsubscribe(targetEl, cb);
+    };
+  }, [target, resizeObserver, storedCallback]);
+  return resizeObserver.observer;
+}
+function createResizeObserver(polyfill) {
+  let ticking = false;
+  let allEntries = [];
+  const callbacks = /* @__PURE__ */ new Map();
+  const observer = new (polyfill || window.ResizeObserver)((entries, obs) => {
+    allEntries = allEntries.concat(entries);
+    function _ref2() {
+      const triggered = /* @__PURE__ */ new Set();
+      for (let i = 0; i < allEntries.length; i++) {
+        if (triggered.has(allEntries[i].target)) continue;
+        triggered.add(allEntries[i].target);
+        const cbs = callbacks.get(allEntries[i].target);
+        cbs === null || cbs === void 0 ? void 0 : cbs.forEach((cb) => cb(allEntries[i], obs));
+      }
+      allEntries = [];
+      ticking = false;
+    }
+    if (!ticking) {
+      window.requestAnimationFrame(_ref2);
+    }
+    ticking = true;
+  });
+  return {
+    observer,
+    subscribe(target, callback) {
+      var _callbacks$get;
+      observer.observe(target);
+      const cbs = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
+      cbs.push(callback);
+      callbacks.set(target, cbs);
+    },
+    unsubscribe(target, callback) {
+      var _callbacks$get2;
+      const cbs = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
+      if (cbs.length === 1) {
+        observer.unobserve(target);
+        callbacks.delete(target);
+        return;
+      }
+      const cbIndex = cbs.indexOf(callback);
+      if (cbIndex !== -1) cbs.splice(cbIndex, 1);
+      callbacks.set(target, cbs);
+    }
+  };
+}
+let _resizeObserver;
+const getResizeObserver = (polyfill) => !_resizeObserver ? _resizeObserver = createResizeObserver(polyfill) : _resizeObserver;
 const useViewportSize = (props) => {
   const { xs: xsProps, sm: smProps, md: mdProps, lg: lgProps, xl: xlProps } = props;
   const [prevSize, setPrevSize] = useState("initial");
@@ -803,14 +881,33 @@ const useViewportSize = (props) => {
   }, [lg, md, sm, xl, xs]);
   return { size: size2, prevSize, xs, sm, md, lg, xl };
 };
-function useTextFilter(items, filterFunction) {
+const useStopEventPropagation = () => {
+  return useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+};
+function useTextFilter(values, filterFunction) {
   const [filteredOptions, setFilteredOptions] = useState([]);
   const [filterValue, setFilterValue] = useState("");
   useEffect(() => {
-    setFilteredOptions(items.filter((value) => filterFunction(value, filterValue)));
-  }, [filterFunction, filterValue, items]);
+    setFilteredOptions(values.filter((value) => filterFunction(value, filterValue)));
+  }, [filterFunction, filterValue, values]);
   return [filteredOptions, filterValue, setFilterValue];
 }
+const useSize = (target) => {
+  const [size2, setSize] = useState();
+  useLayoutEffect(() => {
+    var _a;
+    setSize((_a = target.current) == null ? void 0 : _a.getBoundingClientRect());
+  }, [target]);
+  const handleResize = useCallback((entry) => {
+    const rect = entry.contentRect;
+    setSize(rect);
+  }, []);
+  useResizeObserver(target, handleResize);
+  return size2;
+};
+const genericMemo = memo;
 function useControlledState(initialState, state, setState) {
   const [uncontrolledState, setUncontrolledState] = useState(initialState);
   const handleStateChange = useCallback(
@@ -827,34 +924,26 @@ function useControlledState(initialState, state, setState) {
   }, [state]);
   return [state ?? uncontrolledState, handleStateChange];
 }
-function useFallbackId(id) {
-  const fallbackId = useId();
-  return id ?? fallbackId;
-}
-const genericMemo = memo;
 function mergeRefs(refs) {
   return (value) => {
-    const cleanups = refs.reduce(
-      (cleanups2, ref) => {
-        if (typeof ref === "function") {
-          const cleanup = ref(value);
-          if (typeof cleanup === "function") {
-            cleanups2.push(cleanup);
-          } else {
-            cleanups2.push(() => {
-              ref(null);
-            });
-          }
-        } else if (ref != null) {
-          ref.current = value;
+    const cleanups = refs.reduce((cleanups2, ref) => {
+      if (typeof ref === "function") {
+        const cleanup = ref(value);
+        if (typeof cleanup === "function") {
+          cleanups2.push(cleanup);
+        } else {
           cleanups2.push(() => {
-            ref.current = null;
+            ref(null);
           });
         }
-        return cleanups2;
-      },
-      []
-    );
+      } else if (ref != null) {
+        ref.current = value;
+        cleanups2.push(() => {
+          ref.current = null;
+        });
+      }
+      return cleanups2;
+    }, []);
     return () => {
       cleanups.forEach((cleanup) => {
         cleanup();
@@ -865,21 +954,6 @@ function mergeRefs(refs) {
 const stopPropagation = (e) => {
   e.stopPropagation();
 };
-function getSelectedState(selected) {
-  return selected ? "selected" : "unselected";
-}
-function getCheckedState(checked) {
-  return checked === true ? "checked" : checked === false ? "unchecked" : "indeterminate";
-}
-function getActiveState(active) {
-  return active ? "active" : "inactive";
-}
-function getBooleanState(value) {
-  return value ? "true" : "false";
-}
-function getOpenState(open) {
-  return open ? "open" : "closed";
-}
 const MultiSelectProvider = genericMemo(function MultiSelectProvider2(props) {
   const { children, defaultValues, values: controlledValues, onValuesChange } = props;
   const [itemValueMapping, setItemValueMapping] = useState(/* @__PURE__ */ new Set());
@@ -962,8 +1036,8 @@ const CheckboxGroupItem = memo((props) => {
     ref,
     className,
     value,
+    accentColor,
     disabled,
-    accentColor = groupContext.accentColor,
     variant = groupContext.variant,
     size: size2 = groupContext.size,
     radius = groupContext.radius,
@@ -1000,6 +1074,9 @@ const CheckboxGroupItemIndicator = memo((props) => {
   return /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: cx("flex items-center justify-center", className), ref, ...rest });
 });
 CheckboxGroupItemIndicator.displayName = "CheckboxGroupItemIndicator";
+function getBooleanState$1(value) {
+  return value ? "true" : "false";
+}
 const CheckboxGroupRoot = memo((props) => {
   const providerContext = useProvider();
   const {
@@ -1022,22 +1099,20 @@ const CheckboxGroupRoot = memo((props) => {
       name,
       required,
       disabled,
-      // style props
-      accentColor,
       size: size2,
       variant,
       radius
     }),
-    [accentColor, disabled, name, radius, required, size2, variant]
+    [disabled, name, radius, required, size2, variant]
   );
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       role: "group",
-      "data-disabled": getBooleanState(!!disabled),
+      "data-disabled": getBooleanState$1(!!disabled),
       "data-accent-color": accentColor,
-      "aria-disabled": getBooleanState(!!disabled),
+      "aria-disabled": getBooleanState$1(!!disabled),
       ...rest,
       children: /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
         MultiSelectProvider,
@@ -1057,8 +1132,8 @@ const CheckboxGroupSelectAllItem = memo((props) => {
   const {
     ref,
     className,
+    accentColor,
     disabled,
-    accentColor = groupContext.accentColor,
     variant = groupContext.variant,
     size: size2 = groupContext.size,
     radius = groupContext.radius,
@@ -1089,39 +1164,137 @@ const CheckboxGroup = {
   SelectAllItem: CheckboxGroupSelectAllItem,
   ItemIndicator: CheckboxGroupItemIndicator
 };
-const CheckedIndicatorContext = createContext({});
-const CheckedIndicator = memo((props) => {
-  const { children, ref, className, ...rest } = props;
-  const checked = useContext(CheckedIndicatorContext);
-  const computedChildren = typeof children === "function" ? children(checked) : children;
+const CollapsibleTreeContext = createContext(
+  {}
+);
+function useCollapsibleTreeContext() {
+  return useContext(CollapsibleTreeContext);
+}
+const CollapsibleNode = genericMemo(function(props) {
+  const { meta, nodes, level = 0, disabled } = props;
+  const [controlledOpenState, setControlledOpenState] = useState(false);
+  const {
+    nodeRenderer,
+    disabled: disabledFromContext,
+    onNodeOpen,
+    onNodeClose,
+    onNodeClick,
+    nodeStyles,
+    nodeClassName
+  } = useCollapsibleTreeContext();
+  const isDisabled = disabled ?? disabledFromContext;
+  const handleClick = useCallback(() => {
+    if (onNodeClick) onNodeClick(meta);
+  }, [meta, onNodeClick]);
+  const toggleOpenState = useCallback(() => {
+    setControlledOpenState(!controlledOpenState);
+    if (!controlledOpenState && onNodeOpen) onNodeOpen(meta);
+    if (controlledOpenState && onNodeClose) onNodeClose(meta);
+  }, [meta, onNodeClose, onNodeOpen, controlledOpenState]);
+  const { children, style, className } = useMemo(() => {
+    return nodeRenderer({
+      meta,
+      toggleOpen: toggleOpenState,
+      open: controlledOpenState,
+      disabled: isDisabled
+    });
+  }, [isDisabled, meta, nodeRenderer, toggleOpenState, controlledOpenState]);
+  const combinedStyles = useMemo(
+    () => ({
+      // want node specific styles to overwrite and global node styles
+      ...nodeStyles,
+      ...style
+    }),
+    [nodeStyles, style]
+  );
+  return /* @__PURE__ */ jsx(RadixPrimitiveCollapsible.Root, { asChild: true, open: controlledOpenState, disabled: isDisabled, children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: handleClick,
+        className: cx(nodeClassName, "flex w-full shrink-0 items-center", className),
+        style: combinedStyles,
+        "data-state": controlledOpenState ? "open" : "closed",
+        "data-disabled": isDisabled,
+        children
+      }
+    ),
+    nodes && nodes.length > 0 && /* @__PURE__ */ jsx(RadixPrimitiveCollapsible.Content, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "flex h-max w-full flex-col pl-2", children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsx(
+      CollapsibleNode,
+      {
+        level: level + 1,
+        ...treeNodeProps
+      },
+      `${level},${index}`
+    )) }) })
+  ] }) });
+});
+const CollapsibleTree = genericMemo(function(props) {
+  const {
+    nodes,
+    disabled = false,
+    nodeClassName,
+    nodeStyles,
+    onNodeClick,
+    onNodeClose,
+    onNodeOpen,
+    nodeRenderer,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    CollapsibleTreeContext.Provider,
+    {
+      value: {
+        nodeRenderer,
+        nodeClassName,
+        nodeStyles,
+        disabled,
+        onNodeClick,
+        onNodeClose,
+        onNodeOpen
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "flex h-max w-full flex-col", ...rest, children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsx(CollapsibleNode, { ...treeNodeProps }, `${0},${index}`)) })
+    }
+  );
+});
+const CommandMenuContext = createContext({});
+const SelectedIndicatorContext$1 = createContext(false);
+const CheckboxIndicatorContext = createContext(false);
+const CommandMenuPageContext = createContext({});
+const CommandMenuDialogContext = createContext({});
+function getSelectedState$1(selected) {
+  return selected ? "selected" : "unselected";
+}
+function getCheckedState$1(checked) {
+  return checked === true ? "checked" : checked === false ? "unchecked" : "indeterminate";
+}
+function getActiveState(active) {
+  return active ? "active" : "inactive";
+}
+const CommandMenuCheckboxIndicator = memo((props) => {
+  const { ref, className, children, ...rest } = props;
+  const checkedState = use(CheckboxIndicatorContext);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? children(checkedState) : children;
+  }, [checkedState, children]);
   return /* @__PURE__ */ jsx(
     "span",
     {
       ref,
+      "data-state": getCheckedState$1(checkedState),
       className: cx(
-        "flex size-max items-center",
+        "inline-block size-max",
         {
-          invisible: checked === false
+          invisible: checkedState === false
         },
         className
       ),
-      "data-state": getCheckedState(checked),
       ...rest,
       children: computedChildren
     }
   );
 });
-CheckedIndicator.displayName = "CheckedIndicator";
-const CommandMenuCheckboxIndicator = memo((props) => {
-  const { ref, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
-});
 CommandMenuCheckboxIndicator.displayName = "CommandMenuCheckboxIndicator";
-const CommandMenuContext = createContext({});
-const SelectedIndicatorContext$1 = createContext(false);
-const CheckboxIndicatorContext = createContext(false);
-const CommandMenuPageContext = createContext({});
-const CommandMenuDialogContext = createContext({});
 const commandMenuContentCva = cva(
   [
     "ring",
@@ -1358,7 +1531,7 @@ const CommandMenuCheckboxItem = memo((props) => {
     onSelect == null ? void 0 : onSelect();
     onCheckedChange(checked !== true);
   }, [checked, onCheckedChange, onSelect]);
-  return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState(checked), ...rest, children }) });
+  return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState$1(checked), ...rest, children }) });
 });
 CommandMenuCheckboxItem.displayName = "CommandMenuCheckboxItem";
 const CommandMenuContent = memo((props) => {
@@ -1385,10 +1558,9 @@ const CommandMenuContent = memo((props) => {
     return {
       variant,
       size: size2,
-      radius,
-      accentColor
+      radius
     };
-  }, [accentColor, radius, size2, variant]);
+  }, [radius, size2, variant]);
   return /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsx(
     DialogContent$1,
     {
@@ -1475,7 +1647,7 @@ const CommandMenuMultiSelectItem = genericMemo(function(props) {
     {
       ref,
       onSelect: handleSelect,
-      "data-state": getSelectedState(isSelected),
+      "data-state": getSelectedState$1(isSelected),
       "aria-selected": isSelected,
       closeOnSelect,
       ...rest,
@@ -1549,7 +1721,7 @@ const CommandMenuRadioItem = genericMemo(function(props) {
     selectValue(value);
   }, [onSelect, selectValue, value]);
   const isSelected = selected(value);
-  return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getSelectedState(isSelected), ...rest, children }) });
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getSelectedState$1(isSelected), ...rest, children }) });
 });
 const CommandMenuRoot = memo((props) => {
   const { children, defaultOpen, open: controlledOpen, onOpenChange, modal } = props;
@@ -1577,39 +1749,35 @@ const CommandMenuSelectAllItem = genericMemo(function(props) {
       ref,
       role: "menuitemcheckbox",
       onSelect: handleSelect,
-      "data-state": getCheckedState(selectedState),
+      "data-state": getCheckedState$1(selectedState),
       closeOnSelect,
       ...rest
     }
   ) });
 });
-const SelectedIndicatorContext = createContext(false);
-const SelectedIndicator = memo((props) => {
-  const { ref, children, className, ...rest } = props;
-  const isSelected = use(SelectedIndicatorContext);
-  const computedChildren = typeof children === "function" ? children(isSelected) : children;
+const CommandMenuSelectedIndicator = memo((props) => {
+  const { ref, className, children, ...rest } = props;
+  const isSelected = use(SelectedIndicatorContext$1);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? children(isSelected) : children;
+  }, [isSelected, children]);
   return /* @__PURE__ */ jsx(
     "span",
     {
       ref,
+      "data-state": getSelectedState$1(isSelected),
       className: cx(
-        "flex size-max items-center",
+        "inline-block size-max",
         {
           invisible: !isSelected
         },
         className
       ),
-      "data-state": getSelectedState(isSelected),
       ...rest,
       children: computedChildren
     }
   );
 });
-SelectedIndicator.displayName = "SelectedIndicator";
-const CommandMenuSelectedIndicator = memo((props) => {
-  const { ref, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(SelectedIndicator, { ref, ...rest, children });
-});
 CommandMenuSelectedIndicator.displayName = "CommandMenuSelectedIndicator";
 const CommandMenuSeparator = memo((props) => {
   const { className, ref, spacing = false, ...rest } = props;
@@ -2086,7 +2254,7 @@ const HoverCard = {
   Root: RadixHoverCard.Root,
   Trigger: RadixHoverCard.Trigger
 };
-const HoverUtility = memo(({ children, forceHover }) => {
+const HoverUtility = memo(function Root({ children, forceHover }) {
   const [isHovered, setIsHovered] = useState(false);
   const handlePointerEnter = useCallback(() => {
     setIsHovered(true);
@@ -2100,7 +2268,6 @@ const HoverUtility = memo(({ children, forceHover }) => {
     onPointerLeave: handlePointerLeave
   });
 });
-HoverUtility.displayName = "HoverUtility";
 const InputContext = createContext({});
 const inputRoot$1 = cva(
   [
@@ -2579,6 +2746,40 @@ const LayoutSlideOutOverlay = memo((props) => {
   return showOverlay && /* @__PURE__ */ jsx("div", { className: cx("overmap-layout-overlay", "fixed inset-0", className), ref, ...rest, children });
 });
 LayoutSlideOutOverlay.displayName = "SlideOutOverlay";
+const MENU_OVERFLOW_PADDING = 20;
+const MENU_CONTENT_PADDING = 8;
+const MENU_MINIMUM_MAX_HEIGHT = 250;
+const computeOffsets = (side, alignment) => {
+  switch (side) {
+    case "right":
+      if (alignment === "start") {
+        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -MENU_CONTENT_PADDING };
+      } else if (alignment === "end") {
+        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
+      }
+      break;
+    case "left":
+      if (alignment === "start") {
+        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -MENU_CONTENT_PADDING };
+      } else if (alignment === "end") {
+        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
+      }
+      break;
+  }
+  return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: 0 };
+};
+function getSelectedState(selected) {
+  return selected ? "selected" : "unselected";
+}
+function getCheckedState(checked) {
+  return checked === true ? "checked" : checked === false ? "unchecked" : "indeterminate";
+}
+function getBooleanState(value) {
+  return value ? "true" : "false";
+}
+function getOpenState(open) {
+  return open ? "open" : "closed";
+}
 function nextStateBasedOnType(open, type) {
   switch (type) {
     case "toggle":
@@ -2674,6 +2875,28 @@ const Link = memo((props) => {
   );
 });
 Link.displayName = "Link";
+const CheckedIndicatorContext = createContext({});
+const CheckedIndicator = (props) => {
+  const { children, ref, className, ...rest } = props;
+  const checked = useContext(CheckedIndicatorContext);
+  const computedChildren = typeof children === "function" ? children(checked === "indeterminate") : children;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cx(
+        "flex size-max items-center",
+        {
+          invisible: checked === false
+        },
+        className
+      ),
+      "data-state": getCheckedState$1(checked),
+      ...rest,
+      children: computedChildren
+    }
+  );
+};
 const menuItem = cva(
   [
     "select-none",
@@ -2819,115 +3042,100 @@ const inputRoot = cva(
     }
   }
 );
-const MenuContentContext = createContext({});
 const MenuContext = createContext({});
-const SubContext = createContext({});
-const TRIGGER_SELECT_KEYS = ["Enter", " "];
-const MenuItem$1 = memo((props) => {
-  const rootMenuContext = use(MenuContext);
-  const { getItemProps, activeIndex, setOpen, size: size2, variant, radius } = use(MenuContentContext);
-  const { closeRoot } = use(SubContext);
+const useMenuContext = () => useContext(MenuContext);
+const DEFAULT_OFFSET = 5;
+const MenuRoot = memo((props) => {
   const {
-    ref: forwardedRef,
-    className,
     children,
-    onSelect,
-    onClick,
-    onKeyDown,
-    closeOnSelect = true,
-    disabled = false,
-    ...rest
+    side = "bottom",
+    align = "center",
+    offset: offset$1,
+    loop = false,
+    modal = false,
+    // open state related props
+    open: controlledOpen,
+    onOpenChange,
+    defaultOpen
   } = props;
-  const { ref, index } = useListItem();
-  const mergeRefs2 = useMergeRefs([ref, forwardedRef]);
-  const handleClick = useCallback(
-    (e) => {
-      e.stopPropagation();
-      if (disabled) return;
-      onClick == null ? void 0 : onClick(e);
-      onSelect == null ? void 0 : onSelect();
-      if (closeOnSelect) setOpen(false);
-      if (closeRoot) rootMenuContext.setOpen(false);
-    },
-    [closeOnSelect, closeRoot, disabled, rootMenuContext, onClick, onSelect, setOpen]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (disabled) return;
-      onKeyDown == null ? void 0 : onKeyDown(e);
-      if (TRIGGER_SELECT_KEYS.includes(e.key)) {
-        onSelect == null ? void 0 : onSelect();
-        if (closeOnSelect) setOpen(false);
-      }
-    },
-    [closeOnSelect, disabled, onKeyDown, onSelect, setOpen]
-  );
-  const isActive = useMemo(() => index === activeIndex, [activeIndex, index]);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? children({ active: isActive, selected: false }) : children;
-  }, [children, isActive]);
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      className: cx(menuItem({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
-      ref: mergeRefs2,
-      role: "menuitem",
-      "data-disabled": getBooleanState(disabled),
-      "aria-disabled": disabled,
-      "data-highlighted": isActive ? "" : void 0,
-      ...getItemProps({
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        tabIndex: isActive ? 0 : -1,
-        ...rest
-      }),
-      children: computedChildren
-    }
-  );
-});
-MenuItem$1.displayName = "MenuItem";
-const MenuCheckboxItem$1 = memo((props) => {
-  const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
-  const handleSelect = useCallback(() => {
-    onSelect == null ? void 0 : onSelect();
-    switch (checked) {
-      case true:
-        onCheckedChange(false);
-        break;
-      case "indeterminate":
-      case false:
-        onCheckedChange(true);
-        break;
-    }
-  }, [checked, onCheckedChange, onSelect]);
-  return /* @__PURE__ */ jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsx(MenuItem$1, { ref, onSelect: handleSelect, ...rest }) });
-});
-MenuCheckboxItem$1.displayName = "MenuCheckboxItem";
-const MenuCheckboxItemIndicator = memo((props) => {
-  const { ref, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
-});
-MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
-const MenuClickTrigger = memo((props) => {
-  const { ref: forwardedRef, children, disabled = false } = props;
-  const { getReferenceProps, refs, setTriggerType, open } = use(MenuContext);
-  const mergedRefs = useMergeRefs([refs.setReference, forwardedRef]);
-  useEffect(() => {
-    setTriggerType("click");
-  }, [setTriggerType]);
-  return /* @__PURE__ */ jsx(
-    Slot,
+  const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [triggerType, setTriggerType] = useState(null);
+  const elementsRef = useRef([]);
+  const nodeId = useFloatingNodeId();
+  const { refs, floatingStyles, context, middlewareData } = useFloating({
+    nodeId,
+    strategy: "fixed",
+    placement: side + (align !== "center" ? "-" + align : ""),
+    whileElementsMounted: autoUpdate,
+    open,
+    onOpenChange: setOpen,
+    middleware: [
+      offset({ mainAxis: offset$1 ?? DEFAULT_OFFSET }),
+      size({
+        apply({ availableHeight, elements }) {
+          elements.floating.style.setProperty(
+            "--overmap-menu-available-height",
+            `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
+          );
+        },
+        padding: MENU_OVERFLOW_PADDING
+      }),
+      flip({ fallbackStrategy: "initialPlacement" }),
+      shift({ padding: MENU_OVERFLOW_PADDING }),
+      hide()
+    ]
+  });
+  const role = useRole(context, {
+    role: "menu"
+  });
+  const dismiss = useDismiss(context, {
+    capture: true,
+    ancestorScroll: triggerType === "context" || triggerType === "virtual"
+  });
+  const click = useClick(context, {
+    enabled: triggerType === "click"
+  });
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    loop
+  });
+  const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
+    dismiss,
+    listNavigation,
+    click,
+    role
+  ]);
+  return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(
+    MenuContext.Provider,
     {
-      ref: mergedRefs,
-      "aria-disabled": disabled,
-      "data-disabled": getBooleanState(disabled),
-      "data-state": getOpenState(open),
-      ...getReferenceProps({ disabled }),
+      value: {
+        open,
+        setOpen,
+        refs,
+        context,
+        floatingStyles,
+        elementsRef,
+        getFloatingProps,
+        getItemProps,
+        getReferenceProps,
+        nodeId,
+        activeIndex,
+        setActiveIndex,
+        middlewareData,
+        side,
+        modal,
+        setTriggerType
+      },
       children
     }
-  );
+  ) });
 });
-MenuClickTrigger.displayName = "MenuClickTrigger";
+MenuRoot.displayName = "Root";
+const MenuContentContext = createContext({});
+const useMenuContentContext = () => useContext(MenuContentContext);
 const MenuContent = memo((props) => {
   var _a;
   const providerContext = useProvider();
@@ -2956,7 +3164,7 @@ const MenuContent = memo((props) => {
     floatingStyles,
     modal,
     side
-  } = use(MenuContext);
+  } = useMenuContext();
   const computedFloatingStyles = useMemo(() => {
     var _a2;
     return {
@@ -3028,177 +3236,15 @@ const MenuContent = memo((props) => {
   ) }) });
 });
 MenuContent.displayName = "Menu.Content";
-const MenuContextTrigger = memo((props) => {
-  const { ref: forwardedRef, children, disabled = false } = props;
-  const ref = useRef(null);
-  const { setOpen, refs, setTriggerType, open } = use(MenuContext);
-  const mergedRefs = useMergeRefs([forwardedRef, ref]);
-  useEffect(() => {
-    setTriggerType("context");
-  }, [setTriggerType]);
-  const handleContextMenu = useCallback(
-    (e) => {
-      const { clientY, clientX } = e;
-      if (!disabled && ref.current) {
-        e.preventDefault();
-        refs.setPositionReference({
-          getBoundingClientRect() {
-            return {
-              x: clientX,
-              y: clientY,
-              top: clientY,
-              left: clientX,
-              height: 0,
-              width: 0,
-              bottom: clientY,
-              right: clientX
-            };
-          },
-          contextElement: ref.current
-        });
-        setOpen(true);
-      }
-    },
-    [disabled, refs, setOpen]
-  );
-  return /* @__PURE__ */ jsx(
-    Slot,
-    {
-      ref: mergedRefs,
-      style: { WebkitTouchCallout: disabled ? "none" : "unset" },
-      "aria-disabled": disabled,
-      "data-disabled": getBooleanState(disabled),
-      "data-state": getOpenState(open),
-      onContextMenu: handleContextMenu,
-      children
-    }
-  );
-});
-MenuContextTrigger.displayName = "MenuContextTrigger";
-const MenuGroup$1 = memo((props) => {
-  const { ref, children, ...rest } = props;
-  return /* @__PURE__ */ jsx("div", { ref, role: "group", ...rest, children });
-});
-MenuGroup$1.displayName = "MenuGroup";
-const MenuInputField = memo((props) => {
-  const { ref: forwardedRef, className, onValueChange, onChange, disabled = false, ...rest } = props;
-  const { activeIndex, getItemProps } = use(MenuContentContext);
-  const { index, ref } = useListItem();
-  const mergedRefs = useMergeRefs([ref, forwardedRef]);
-  const handleChange = useCallback(
-    (e) => {
-      onChange == null ? void 0 : onChange(e);
-      onValueChange == null ? void 0 : onValueChange(e.target.value);
-    },
-    [onChange, onValueChange]
-  );
-  useEffect(() => {
-    return () => {
-      onValueChange == null ? void 0 : onValueChange("");
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      className: cx("placeholder-(--base-a9)", "selection:bg-(--accent-a5)", "outline-none", className),
-      ref: mergedRefs,
-      disabled,
-      "data-disabled": getBooleanState(disabled),
-      ...getItemProps({
-        ...rest,
-        tabIndex: index === activeIndex ? 0 : -1,
-        onChange: handleChange
-      })
-    }
-  );
-});
-MenuInputField.displayName = "MenuInputField";
-const MenuInputRoot = memo((props) => {
-  const { ref, className, ...rest } = props;
-  const { size: size2 } = use(MenuContentContext);
-  return /* @__PURE__ */ jsx("div", { className: cx(inputRoot({ size: size2 }), className), ref, ...rest });
-});
-MenuInputRoot.displayName = "MenuInputRoot";
-const MenuInputSlot = memo((props) => {
-  const { ref, className, ...rest } = props;
-  return /* @__PURE__ */ jsx("div", { className: cx("flex", "items-center", "text-(--base-a11)", className), ref, ...rest });
-});
-MenuInputSlot.displayName = "MenuInputSlot";
-const MenuLabel = memo((props) => {
-  const { ref, className, ...rest } = props;
-  const { size: size2 } = use(MenuContentContext);
-  return /* @__PURE__ */ jsx("div", { ref, className: cx(menuLabelCva({ size: size2 }), className), ...rest });
-});
-MenuLabel.displayName = "MenuLabel";
-const MenuMultiSelectGroup$1 = genericMemo(function MenuMultiSelectGroup2(props) {
-  const { ref, children, defaultValues, values, onValuesChange, ...rest } = props;
-  return /* @__PURE__ */ jsx(MenuGroup$1, { ref, ...rest, children: /* @__PURE__ */ jsx(MultiSelectProvider, { defaultValues, values, onValuesChange, children }) });
-});
-const MenuMultiSelectItem$1 = genericMemo(function(props) {
-  const { ref, onSelect, children, closeOnSelect = false, value, ...rest } = props;
-  const { selected, selectValue, registerValue } = use(MultiSelectContext);
-  useLayoutEffect(() => {
-    return registerValue(value);
-  }, [registerValue, value]);
-  const isSelected = selected(value);
-  const handleSelect = useCallback(() => {
-    onSelect == null ? void 0 : onSelect();
-    selectValue(value);
-  }, [onSelect, selectValue, value]);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
-  }, [children, isSelected]);
-  return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(
-    MenuItem$1,
-    {
-      ref,
-      role: "menuitemcheckbox",
-      onSelect: handleSelect,
-      closeOnSelect,
-      "data-state": getSelectedState(isSelected),
-      ...rest,
-      children: computedChildren
-    }
-  ) });
-});
-const PagesContext = createContext({});
-const MenuPageContent = memo((props) => {
-  const { page, children } = props;
-  const { activePage } = use(PagesContext);
-  return activePage === page ? children : null;
-});
-MenuPageContent.displayName = "PageContent";
-const MenuPages$1 = memo((props) => {
-  const { children, defaultPage, page, onPageChange } = props;
-  const [activePage, setActivePage] = useControlledState(defaultPage ?? "", page, onPageChange);
-  const contextValue = useMemo(() => ({ activePage, setActivePage }), [activePage, setActivePage]);
-  return /* @__PURE__ */ jsx(PagesContext.Provider, { value: contextValue, children });
-});
-MenuPages$1.displayName = "MenuPages";
-const MenuPageTrigger = memo((props) => {
-  const { ref, onSelect, page, ...rest } = props;
-  const { refs, setActiveIndex } = use(MenuContentContext);
-  const { setActivePage } = use(PagesContext);
-  const handleSelect = useCallback(() => {
-    var _a;
-    onSelect == null ? void 0 : onSelect();
-    setActivePage(page);
-    (_a = refs.floating.current) == null ? void 0 : _a.focus();
-    setActiveIndex(null);
-  }, [onSelect, page, refs.floating, setActiveIndex, setActivePage]);
-  return /* @__PURE__ */ jsx(MenuItem$1, { ref, onSelect: handleSelect, closeOnSelect: false, ...rest });
-});
-MenuPageTrigger.displayName = "MenuPageTrigger";
-const MENU_OVERFLOW_PADDING = 20;
-const MENU_CONTENT_PADDING = 8;
-const MENU_MINIMUM_MAX_HEIGHT = 250;
-const DEFAULT_OFFSET = 5;
-const MenuRoot$1 = memo((props) => {
+const SubContext = createContext({});
+const useSubContext = () => useContext(SubContext);
+const MenuSub = memo((props) => {
   const {
     children,
-    side = "bottom",
-    align = "center",
-    offset: offset$1,
+    disabled = false,
+    side = "right",
+    align = "start",
+    closeRoot = false,
     loop = false,
     modal = false,
     // open state related props
@@ -3207,203 +3253,8 @@ const MenuRoot$1 = memo((props) => {
     defaultOpen
   } = props;
   const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
-  const [activeIndex, setActiveIndex] = useState(null);
-  const [triggerType, setTriggerType] = useState(null);
-  const elementsRef = useRef([]);
   const nodeId = useFloatingNodeId();
-  const { refs, floatingStyles, context, middlewareData } = useFloating({
-    nodeId,
-    strategy: "fixed",
-    // TODO: probably some way with template string types to not need the "as Placement"
-    placement: side + (align !== "center" ? "-" + align : ""),
-    whileElementsMounted: autoUpdate,
-    open,
-    onOpenChange: setOpen,
-    middleware: [
-      offset({ mainAxis: offset$1 ?? DEFAULT_OFFSET }),
-      size({
-        apply({ availableHeight, elements }) {
-          elements.floating.style.setProperty(
-            "--overmap-menu-available-height",
-            `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
-          );
-        },
-        padding: MENU_OVERFLOW_PADDING
-      }),
-      flip({ fallbackStrategy: "initialPlacement" }),
-      shift({ padding: MENU_OVERFLOW_PADDING }),
-      hide()
-    ]
-  });
-  const role = useRole(context, {
-    role: "menu"
-  });
-  const dismiss = useDismiss(context, {
-    capture: true,
-    ancestorScroll: triggerType === "context" || triggerType === "virtual"
-  });
-  const click = useClick(context, {
-    enabled: triggerType === "click"
-  });
-  const listNavigation = useListNavigation(context, {
-    listRef: elementsRef,
-    activeIndex,
-    onNavigate: setActiveIndex,
-    loop
-  });
-  const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
-    dismiss,
-    listNavigation,
-    click,
-    role
-  ]);
-  return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(
-    MenuContext.Provider,
-    {
-      value: {
-        open,
-        setOpen,
-        refs,
-        context,
-        floatingStyles,
-        elementsRef,
-        getFloatingProps,
-        getItemProps,
-        getReferenceProps,
-        nodeId,
-        activeIndex,
-        setActiveIndex,
-        middlewareData,
-        side,
-        modal,
-        setTriggerType
-      },
-      children
-    }
-  ) });
-});
-MenuRoot$1.displayName = "Root";
-const MenuScroll = memo((props) => {
-  const { ref, className, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cx(
-        "h-full overflow-x-hidden overflow-y-auto [scrollbar-color:var(--base-6)_transparent] [scrollbar-width:thin]",
-        className
-      ),
-      ...rest
-    }
-  );
-});
-MenuScroll.displayName = "MenuScroll";
-const MenuSelectAllItem$1 = genericMemo((props) => {
-  const { ref, children, onSelect, closeOnSelect = false, ...rest } = props;
-  const { allSelected, someSelected, toggleSelectAll } = use(MultiSelectContext);
-  const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
-  const handleSelect = useCallback(() => {
-    onSelect == null ? void 0 : onSelect();
-    toggleSelectAll();
-  }, [onSelect, toggleSelectAll]);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? ({ active }) => children({ selected: selectedState, active }) : children;
-  }, [children, selectedState]);
-  return /* @__PURE__ */ jsx(CheckedIndicatorContext, { value: selectedState, children: /* @__PURE__ */ jsx(
-    MenuItem$1,
-    {
-      onSelect: handleSelect,
-      ref,
-      "data-state": getCheckedState(selectedState),
-      closeOnSelect,
-      ...rest,
-      children: computedChildren
-    }
-  ) });
-});
-const MenuSelectedIndicator$1 = memo((props) => {
-  const { ref, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(SelectedIndicator, { ref, ...rest, children });
-});
-MenuSelectedIndicator$1.displayName = "MenuSelectedIndicator";
-const MenuSelectGroup$1 = genericMemo(function MenuSelectGroup2(props) {
-  const { ref, children, required, defaultValue, value, onValueChange, ...rest } = props;
-  return /* @__PURE__ */ jsx(MenuGroup$1, { ref, ...rest, children: required ? /* @__PURE__ */ jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsx(
-    SingleSelectNotRequiredProvider,
-    {
-      defaultValue,
-      value,
-      onValueChange,
-      children
-    }
-  ) });
-});
-const MenuSelectItem$1 = genericMemo(function(props) {
-  const { ref, value, onSelect, children, closeOnSelect = true, ...rest } = props;
-  const { selected, selectValue } = use(SelectContext);
-  const isSelected = selected(value);
-  const handleSelect = useCallback(() => {
-    onSelect == null ? void 0 : onSelect();
-    selectValue(value);
-  }, [onSelect, selectValue, value]);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
-  }, [children, isSelected]);
-  return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(
-    MenuItem$1,
-    {
-      ref,
-      role: "menuitemcheckbox",
-      onSelect: handleSelect,
-      closeOnSelect,
-      "data-state": getSelectedState(isSelected),
-      ...rest,
-      children: computedChildren
-    }
-  ) });
-});
-const MenuSeparator$1 = memo((props) => {
-  const { ref, className, ...rest } = props;
-  const { size: size2 } = use(MenuContentContext);
-  return /* @__PURE__ */ jsx(RadixSeparator.Root, { className: cx(menuSeparator({ size: size2 }), className), ref, ...rest });
-});
-MenuSeparator$1.displayName = "MenuSeparator";
-const computeOffsets = (side, alignment) => {
-  switch (side) {
-    case "right":
-      if (alignment === "start") {
-        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -MENU_CONTENT_PADDING };
-      } else if (alignment === "end") {
-        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
-      }
-      break;
-    case "left":
-      if (alignment === "start") {
-        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -MENU_CONTENT_PADDING };
-      } else if (alignment === "end") {
-        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
-      }
-      break;
-  }
-  return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: 0 };
-};
-const MenuSub = memo((props) => {
-  const {
-    children,
-    disabled = false,
-    side = "right",
-    align = "start",
-    closeRoot = false,
-    loop = false,
-    modal = false,
-    // open state related props
-    open: controlledOpen,
-    onOpenChange,
-    defaultOpen
-  } = props;
-  const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
-  const nodeId = useFloatingNodeId();
-  const { refs, floatingStyles, context } = useFloating({
+  const { refs, floatingStyles, context } = useFloating({
     nodeId,
     strategy: "fixed",
     whileElementsMounted: autoUpdate,
@@ -3485,644 +3336,336 @@ const MenuSub = memo((props) => {
   );
 });
 MenuSub.displayName = "SubMenu";
-const MenuSubContent = memo((props) => {
-  var _a;
-  const { ref: forwardedRef, children, ...rest } = props;
-  const { middlewareData } = use(MenuContext);
-  const { accentColor, radius, variant, size: size2 } = use(MenuContentContext);
+const TRIGGER_SELECT_KEYS = ["Enter", " "];
+const MenuItem = memo((props) => {
+  const rootMenuContext = useMenuContext();
+  const { getItemProps, activeIndex, setOpen, size: size2, variant, radius } = useMenuContentContext();
+  const { closeRoot } = useSubContext();
   const {
-    open,
-    nodeId,
-    refs,
-    context,
-    getFloatingProps,
-    getItemProps,
-    activeIndex,
-    setActiveIndex,
-    elementsRef,
-    floatingStyles,
-    setOpen,
-    side
-  } = use(SubContext);
-  const wrapperRef = useRef(null);
-  const mergeRefs2 = useMergeRefs([refs.setFloating, wrapperRef]);
-  const computedFloatingStyles = useMemo(() => {
-    var _a2;
-    return {
-      ...floatingStyles,
-      visibility: ((_a2 = middlewareData.hide) == null ? void 0 : _a2.referenceHidden) ? "hidden" : "visible"
-    };
-  }, [floatingStyles, (_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden]);
-  return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, initialFocus: wrapperRef, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(
-    MenuContentContext.Provider,
+    ref: forwardedRef,
+    className,
+    children,
+    onSelect,
+    onClick,
+    onKeyDown,
+    closeOnSelect = true,
+    disabled = false,
+    ...rest
+  } = props;
+  const { ref, index } = useListItem();
+  const mergeRefs2 = useMergeRefs([ref, forwardedRef]);
+  const handleClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (disabled) return;
+      onClick == null ? void 0 : onClick(e);
+      onSelect == null ? void 0 : onSelect();
+      if (closeOnSelect) setOpen(false);
+      if (closeRoot) rootMenuContext.setOpen(false);
+    },
+    [closeOnSelect, closeRoot, disabled, rootMenuContext, onClick, onSelect, setOpen]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      onKeyDown == null ? void 0 : onKeyDown(e);
+      if (TRIGGER_SELECT_KEYS.includes(e.key)) {
+        onSelect == null ? void 0 : onSelect();
+        if (closeOnSelect) setOpen(false);
+      }
+    },
+    [closeOnSelect, disabled, onKeyDown, onSelect, setOpen]
+  );
+  const isActive = useMemo(() => index === activeIndex, [activeIndex, index]);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? children({ active: isActive, selected: false }) : children;
+  }, [children, isActive]);
+  return /* @__PURE__ */ jsx(
+    "li",
     {
-      value: {
-        getItemProps,
-        activeIndex,
-        setActiveIndex,
-        elementsRef,
-        open,
-        setOpen,
-        refs,
-        size: size2,
-        radius,
-        accentColor,
-        variant
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "outline-none",
-          ref: mergeRefs2,
-          style: computedFloatingStyles,
-          ...getFloatingProps(),
-          children: /* @__PURE__ */ jsx(
-            "ul",
-            {
-              className: cx(
-                "overmap-menu-sub-content",
-                menuContent({ size: size2 }),
-                floating({ side, shadow: "3" }),
-                radiusCva({ radius, maxLarge: true }),
-                "max-h-(--overmap-menu-available-height)"
-              ),
-              ref: forwardedRef,
-              "data-state": getOpenState(open),
-              "data-side": side,
-              "data-accent-color": accentColor,
-              ...rest,
-              children
-            }
-          )
-        }
-      )
+      className: cx(menuItem({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
+      ref: mergeRefs2,
+      role: "menuitem",
+      "data-disabled": getBooleanState(disabled),
+      "aria-disabled": disabled,
+      "data-highlighted": isActive ? "" : void 0,
+      ...getItemProps({
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: isActive ? 0 : -1,
+        ...rest
+      }),
+      children: computedChildren
     }
-  ) }) }) }) });
+  );
 });
-MenuSubContent.displayName = "MenuSubContent";
-const MenuSubTrigger = memo((props) => {
-  const { ref: forwardedRef, children, ...rest } = props;
-  const { refs, getReferenceProps, open, disabled } = use(SubContext);
-  const mergedRefs = useMergeRefs([forwardedRef, refs.setReference]);
+MenuItem.displayName = "MenuItem";
+const MenuCheckboxItem = memo((props) => {
+  const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    switch (checked) {
+      case true:
+        onCheckedChange(false);
+        break;
+      case "indeterminate":
+      case false:
+        onCheckedChange(true);
+        break;
+    }
+  }, [checked, onCheckedChange, onSelect]);
+  return /* @__PURE__ */ jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsx(MenuItem, { ref, onSelect: handleSelect, ...rest }) });
+});
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+const MenuCheckboxItemIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
+});
+MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
+const MenuClickTrigger = memo((props) => {
+  const { ref: forwardedRef, children, disabled = false } = props;
+  const { getReferenceProps, refs, setTriggerType, open } = useMenuContext();
+  const mergedRefs = useMergeRefs([refs.setReference, forwardedRef]);
+  useEffect(() => {
+    setTriggerType("click");
+  }, [setTriggerType]);
   return /* @__PURE__ */ jsx(
-    MenuItem$1,
+    Slot,
     {
       ref: mergedRefs,
-      closeOnSelect: false,
-      "aria-haspopup": "menu",
+      "aria-disabled": disabled,
+      "data-disabled": getBooleanState(disabled),
       "data-state": getOpenState(open),
-      disabled,
-      ...getReferenceProps(rest),
+      ...getReferenceProps({ disabled }),
       children
     }
   );
 });
-MenuSubTrigger.displayName = "MenuSubTrigger";
-const MenuVirtualTrigger = memo((props) => {
-  const { virtualElement, disabled } = props;
-  const { refs, setTriggerType, setOpen } = use(MenuContext);
+MenuClickTrigger.displayName = "MenuClickTrigger";
+const MenuContextTrigger = memo((props) => {
+  const { ref: forwardedRef, children, disabled = false } = props;
+  const ref = useRef(null);
+  const { setOpen, refs, setTriggerType, open } = useMenuContext();
+  const mergedRefs = useMergeRefs([forwardedRef, ref]);
   useEffect(() => {
-    setTriggerType("virtual");
+    setTriggerType("context");
   }, [setTriggerType]);
-  useEffect(() => {
-    if (!disabled && virtualElement) {
-      refs.setPositionReference(virtualElement);
-      setOpen(true);
-    } else {
-      refs.setPositionReference(null);
-      setOpen(false);
-    }
-  }, [disabled, refs, setOpen, virtualElement]);
-  return null;
-});
-MenuVirtualTrigger.displayName = "VirtualTrigger";
-const Menu = {
-  Root: MenuRoot$1,
-  Content: MenuContent,
-  // sub
-  Sub: MenuSub,
-  SubContent: MenuSubContent,
-  SubTrigger: MenuSubTrigger,
-  // pages
-  Pages: MenuPages$1,
-  PageContent: MenuPageContent,
-  PageTrigger: MenuPageTrigger,
-  // triggers
-  ClickTrigger: MenuClickTrigger,
-  ContextTrigger: MenuContextTrigger,
-  VirtualTrigger: MenuVirtualTrigger,
-  // groups
-  Group: MenuGroup$1,
-  SelectGroup: MenuSelectGroup$1,
-  MultiSelectGroup: MenuMultiSelectGroup$1,
-  // items
-  Item: MenuItem$1,
-  SelectItem: MenuSelectItem$1,
-  MultiSelectItem: MenuMultiSelectItem$1,
-  SelectAllItem: MenuSelectAllItem$1,
-  CheckboxItem: MenuCheckboxItem$1,
-  // indicators
-  SelectedIndicator: MenuSelectedIndicator$1,
-  CheckboxItemIndicator: MenuCheckboxItemIndicator,
-  // input
-  InputRoot: MenuInputRoot,
-  InputField: MenuInputField,
-  InputSlot: MenuInputSlot,
-  // others
-  Label: MenuLabel,
-  Separator: MenuSeparator$1,
-  Scroll: MenuScroll
-};
-const KEY_MAPPING = {
-  next: "ArrowDown",
-  prev: "ArrowUp",
-  first: "PageUp",
-  last: "PageDown",
-  selectItem: "Enter"
-};
-const ITEM_SELECTOR = "menu-item";
-const GROUP_SELECTOR = "menu-group";
-const MenuRootContext = createContext({});
-const MenuGroupContext = createContext({});
-const MenuPageContext = createContext({});
-const menuRootCva = cva(["w-full", "outline-none"], {
-  variants: {
-    size: {
-      xs: ["p-0.5", "text-xs", "min-w-30"],
-      sm: ["p-0.75", "text-sm", "min-w-35"],
-      md: ["p-1", "text-md", "min-w-40"],
-      lg: ["p-1.25", "text-lg", "min-w-45"],
-      xl: ["p-1.5", "text-xl", "min-w-50"]
-    },
-    radius: {
-      none: ["rounded-none"],
-      xs: ["rounded-xs"],
-      sm: ["rounded-sm"],
-      md: ["rounded-md"],
-      lg: ["rounded-lg"],
-      xl: ["rounded-lg"],
-      full: ["rounded-lg"]
-    }
-  }
-});
-const menuItemCva = cva(
-  [
-    "select-none",
-    "relative",
-    "flex",
-    "items-center",
-    "outline-none",
-    "data-[disabled=true]:text-(--base-a8)",
-    "data-[disabled=true]:pointer-events-none",
-    "shrink-0",
-    "py-1",
-    "text-(--base-12)"
-  ],
-  {
-    variants: {
-      size: {
-        xs: ["gap-1.5", "px-3"],
-        sm: ["gap-1.75", "px-3.5"],
-        md: ["gap-2", "px-4"],
-        lg: ["gap-2.25", "px-4.5"],
-        xl: ["gap-2.5", "px-5"]
-      },
-      variant: {
-        solid: [
-          "data-[active=true]:not-[data-[disabled=true]]:text-(--accent-contrast)",
-          "data-[active=true]:not-[data-[disabled=true]]:bg-(--accent-a9)",
-          "data-[active=true]:not-[data-[disabled=true]]:active:brightness-110"
-        ],
-        soft: [
-          "data-[active=true]:not-[data-[disabled=true]]:bg-(--accent-a3)",
-          "data-[active=true]:not-[data-[disabled=true]]:active:bg-(--accent-a4)"
-        ]
-      }
-    }
-  }
-);
-const menuGroupLabelCva = cva(["text-(--base-a11)", "flex", "items-center", "select-none", "py-1"], {
-  variants: {
-    size: {
-      xs: ["gap-1.5", "px-3", "text-xs"],
-      sm: ["gap-1.75", "px-3.5", "text-xs"],
-      md: ["gap-2", "px-4", "text-sm"],
-      lg: ["gap-2.25", "px-4.5", "text-base"],
-      xl: ["gap-2.5", "px-5", "text-lg"]
-    }
-  }
-});
-const menuSeparatorCva = cva(["h-px", "bg-(--base-a6)", "w-auto", "shrink-0"], {
-  variants: {
-    size: {
-      xs: ["-mx-0.5", "my-0.5"],
-      sm: ["-mx-0.75", "my-0.75"],
-      md: ["-mx-1", "my-1"],
-      lg: ["-mx-1.25", "my-1.25"],
-      xl: ["-mx-1.5", "my-1.5"]
-    }
-  }
-});
-const MenuItem = memo((props) => {
-  const {
-    ref,
-    children,
-    className,
-    disabled = false,
-    onClick,
-    onSelect,
-    onPointerEnter,
-    onPointerLeave,
-    onPointerMove,
-    ...rest
-  } = props;
-  const internalRef = useRef(null);
-  const itemId = useId();
-  const { activeItemId, setActiveItemId, size: size2, variant, radius } = use(MenuRootContext);
-  const isActive = itemId === activeItemId;
-  const handleSelect = useCallback(
-    (e) => {
-      onSelect == null ? void 0 : onSelect(e);
-    },
-    [onSelect]
-  );
-  const handleClick = useCallback(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      handleSelect(new Event("menu-select"));
-    },
-    [handleSelect, onClick]
-  );
-  const handlePointerEnter = useCallback(
+  const handleContextMenu = useCallback(
     (e) => {
-      onPointerEnter == null ? void 0 : onPointerEnter(e);
-      if (e.defaultPrevented) return;
-      setActiveItemId(itemId);
+      const { clientY, clientX } = e;
+      if (!disabled && ref.current) {
+        e.preventDefault();
+        refs.setPositionReference({
+          getBoundingClientRect() {
+            return {
+              x: clientX,
+              y: clientY,
+              top: clientY,
+              left: clientX,
+              height: 0,
+              width: 0,
+              bottom: clientY,
+              right: clientX
+            };
+          },
+          contextElement: ref.current
+        });
+        setOpen(true);
+      }
     },
-    [onPointerEnter, setActiveItemId, itemId]
+    [disabled, refs, setOpen]
   );
-  const handlePointerLeave = useCallback(
-    (e) => {
-      onPointerLeave == null ? void 0 : onPointerLeave(e);
-      if (e.defaultPrevented) return;
-      setActiveItemId(null);
-    },
-    [onPointerLeave, setActiveItemId]
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref: mergedRefs,
+      style: { WebkitTouchCallout: disabled ? "none" : "unset" },
+      "aria-disabled": disabled,
+      "data-disabled": getBooleanState(disabled),
+      "data-state": getOpenState(open),
+      onContextMenu: handleContextMenu,
+      children
+    }
   );
-  const handlePointerMove = useCallback(
+});
+MenuContextTrigger.displayName = "MenuContextTrigger";
+const MenuGroup = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx("div", { ref, role: "group", ...rest, children });
+});
+MenuGroup.displayName = "MenuGroup";
+const MenuInputField = memo((props) => {
+  const { ref: forwardedRef, className, onValueChange, onChange, disabled = false, ...rest } = props;
+  const { activeIndex, getItemProps } = useMenuContentContext();
+  const { index, ref } = useListItem();
+  const mergedRefs = useMergeRefs([ref, forwardedRef]);
+  const handleChange = useCallback(
     (e) => {
-      onPointerMove == null ? void 0 : onPointerMove(e);
-      if (e.defaultPrevented) return;
-      setActiveItemId(itemId);
+      onChange == null ? void 0 : onChange(e);
+      onValueChange == null ? void 0 : onValueChange(e.target.value);
     },
-    [onPointerMove, itemId, setActiveItemId]
+    [onChange, onValueChange]
   );
   useEffect(() => {
-    if (!internalRef.current) return;
-    const element = internalRef.current;
-    element.addEventListener("menu-select", handleSelect);
     return () => {
-      element.removeEventListener("menu-select", handleSelect);
+      onValueChange == null ? void 0 : onValueChange("");
     };
-  }, [handleSelect]);
+  }, []);
   return /* @__PURE__ */ jsx(
-    "div",
+    "input",
     {
-      ref: mergeRefs([ref, internalRef]),
-      className: cx(menuItemCva({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
-      role: "menuitem",
-      onClick: handleClick,
-      onPointerEnter: handlePointerEnter,
-      onPointerLeave: handlePointerLeave,
-      onPointerMove: handlePointerMove,
-      ...{ [ITEM_SELECTOR]: itemId },
-      "data-active": getBooleanState(isActive),
+      className: cx("placeholder-(--base-a9)", "selection:bg-(--accent-a5)", "outline-none", className),
+      ref: mergedRefs,
+      disabled,
       "data-disabled": getBooleanState(disabled),
-      "aria-disabled": getBooleanState(disabled),
-      ...rest,
-      children
+      ...getItemProps({
+        ...rest,
+        tabIndex: index === activeIndex ? 0 : -1,
+        onChange: handleChange
+      })
     }
   );
 });
-MenuItem.displayName = "MenuItem";
-const MenuCheckboxItem = memo((props) => {
-  const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
-  const handleSelect = useCallback(
-    (e) => {
-      onSelect == null ? void 0 : onSelect(e);
-      if (e.defaultPrevented) return;
-      switch (checked) {
-        case true:
-          onCheckedChange(false);
-          break;
-        case "indeterminate":
-          onCheckedChange(true);
-          break;
-        case false:
-          onCheckedChange(true);
-          break;
-      }
-    },
-    [checked, onCheckedChange, onSelect]
-  );
-  return /* @__PURE__ */ jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsx(MenuItem, { ref, onSelect: handleSelect, ...rest }) });
-});
-MenuCheckboxItem.displayName = "MenuCheckboxItem";
-const MenuCheckedIndicator = memo((props) => {
-  const { ref, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
-});
-MenuCheckedIndicator.displayName = "MenuCheckboxItemIndicator";
-const MenuGroup = memo((props) => {
-  const { ref, children, ...rest } = props;
-  const groupId = useId();
-  const [labelId, setLabelId] = useState(null);
-  const contextValue = useMemo(
-    () => ({
-      labelId,
-      setLabelId
-    }),
-    [labelId]
-  );
-  return /* @__PURE__ */ jsx("div", { ref, role: "group", ...{ [GROUP_SELECTOR]: groupId }, "aria-labelledby": labelId ?? void 0, ...rest, children: /* @__PURE__ */ jsx(MenuGroupContext, { value: contextValue, children }) });
+MenuInputField.displayName = "MenuInputField";
+const MenuInputRoot = memo((props) => {
+  const { ref, className, ...rest } = props;
+  const { size: size2 } = useMenuContentContext();
+  return /* @__PURE__ */ jsx("div", { className: cx(inputRoot({ size: size2 }), className), ref, ...rest });
 });
-MenuGroup.displayName = "MenuGroup";
-const MenuGroupLabel = memo((props) => {
-  const { ref, children, id, className, ...rest } = props;
-  const labelId = useFallbackId(id);
-  const { size: size2 } = use(MenuRootContext);
-  const { setLabelId } = use(MenuGroupContext);
-  useEffect(() => {
-    setLabelId(labelId);
-  }, [labelId, setLabelId]);
-  return /* @__PURE__ */ jsx("div", { ref, id: labelId, className: cx(menuGroupLabelCva({ size: size2 }), className), ...rest, children });
+MenuInputRoot.displayName = "MenuInputRoot";
+const MenuInputSlot = memo((props) => {
+  const { ref, className, ...rest } = props;
+  return /* @__PURE__ */ jsx("div", { className: cx("flex", "items-center", "text-(--base-a11)", className), ref, ...rest });
 });
-MenuGroupLabel.displayName = "MenuGroupLabel";
-const MenuSelectAllItem = genericMemo((props) => {
-  const { ref, children, onSelect, ...rest } = props;
-  const { allSelected, someSelected, toggleSelectAll } = use(MultiSelectContext);
-  const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
-  const handleSelect = useCallback(
-    (e) => {
-      onSelect == null ? void 0 : onSelect(e);
-      if (e.defaultPrevented) return;
-      toggleSelectAll();
-    },
-    [onSelect, toggleSelectAll]
-  );
-  return /* @__PURE__ */ jsx(MenuItem, { onSelect: handleSelect, ref, "data-state": getCheckedState(selectedState), ...rest, children: /* @__PURE__ */ jsx(CheckedIndicatorContext, { value: selectedState, children }) });
+MenuInputSlot.displayName = "MenuInputSlot";
+const MenuLabel = memo((props) => {
+  const { ref, className, ...rest } = props;
+  const { size: size2 } = useMenuContentContext();
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(menuLabelCva({ size: size2 }), className), ...rest });
 });
-const MenuMultiSelectGroup = genericMemo(function MenuMultiSelectGroup22(props) {
+MenuLabel.displayName = "MenuLabel";
+const MenuMultiSelectGroup = genericMemo(function MenuMultiSelectGroup2(props) {
   const { ref, children, defaultValues, values, onValuesChange, ...rest } = props;
   return /* @__PURE__ */ jsx(MenuGroup, { ref, ...rest, children: /* @__PURE__ */ jsx(MultiSelectProvider, { defaultValues, values, onValuesChange, children }) });
 });
+const SelectedIndicatorContext = createContext(false);
+const useSelectedIndicatorContext = () => useContext(SelectedIndicatorContext);
+const MenuSelectedIndicator = memo((props) => {
+  const { ref, children, className, ...rest } = props;
+  const isSelected = useSelectedIndicatorContext();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cx(
+        "flex size-max items-center",
+        {
+          invisible: !isSelected
+        },
+        className
+      ),
+      "data-state": getSelectedState(isSelected),
+      ...rest,
+      children
+    }
+  );
+});
+MenuSelectedIndicator.displayName = "SelectedIndicator";
 const MenuMultiSelectItem = genericMemo(function(props) {
-  const { ref, onSelect, children, value, ...rest } = props;
+  const { ref, onSelect, children, closeOnSelect = false, value, ...rest } = props;
   const { selected, selectValue, registerValue } = use(MultiSelectContext);
   useLayoutEffect(() => {
     return registerValue(value);
   }, [registerValue, value]);
   const isSelected = selected(value);
-  const handleSelect = useCallback(
-    (e) => {
-      onSelect == null ? void 0 : onSelect(e);
-      if (e.defaultPrevented) return;
-      selectValue(value);
-    },
-    [onSelect, selectValue, value]
-  );
-  return /* @__PURE__ */ jsx(
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    selectValue(value);
+  }, [onSelect, selectValue, value]);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
+  }, [children, isSelected]);
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(
     MenuItem,
     {
       ref,
       role: "menuitemcheckbox",
       onSelect: handleSelect,
+      closeOnSelect,
       "data-state": getSelectedState(isSelected),
       ...rest,
-      children: /* @__PURE__ */ jsx(SelectedIndicatorContext, { value: isSelected, children })
+      children: computedChildren
     }
-  );
-});
-const MenuPage = memo((props) => {
-  const { children, ref, page, ...rest } = props;
-  const { page: activePage } = use(MenuPageContext);
-  const isActive = page === activePage;
-  return /* @__PURE__ */ jsx("div", { ref, "data-active": getActiveState(isActive), hidden: !isActive, ...rest, children: isActive ? children : null });
-});
-MenuPage.displayName = "MenuPage";
-const MenuPages = memo((props) => {
-  const { children, defaultPage = "", page: controlledPage, onPageChange } = props;
-  const [page, setPage] = useControlledState(defaultPage, controlledPage, onPageChange);
-  const contextValue = useMemo(
-    () => ({
-      page,
-      setPage
-    }),
-    [page, setPage]
-  );
-  return /* @__PURE__ */ jsx(MenuPageContext, { value: contextValue, children });
-});
-MenuPages.displayName = "MenuPages";
-const MenuPageTriggerItem = memo((props) => {
-  const { ref, children, page, onSelect, ...rest } = props;
-  const { page: activePage, setPage } = use(MenuPageContext);
-  const isActive = page === activePage;
-  const handleSelect = useCallback(
-    (e) => {
-      onSelect == null ? void 0 : onSelect(e);
-      if (e.defaultPrevented) return;
-      setPage(page);
-    },
-    [onSelect, page, setPage]
-  );
-  return /* @__PURE__ */ jsx(MenuItem, { ref, onSelect: handleSelect, "data-state": getActiveState(isActive), ...rest, children: /* @__PURE__ */ jsx(SelectedIndicatorContext, { value: isActive, children }) });
-});
-MenuPageTriggerItem.displayName = "CommandMenuPageTriggerItem";
-const computeNextIndex = (index, length, direction, loop) => {
-  switch (direction) {
-    case "next":
-      return index === length - 1 ? loop ? 0 : index : index + 1;
-    case "prev":
-      return index === 0 ? loop ? length - 1 : index : index - 1;
-  }
-};
-const MenuRoot = memo((props) => {
-  const providerContext = useProvider();
-  const {
-    ref,
-    children,
-    className,
-    onKeyDown,
-    loop = false,
-    // style props
-    radius = providerContext.radius,
-    accentColor = "base",
-    size: size2 = "md",
-    variant = "soft",
-    ...rest
-  } = props;
-  const internalRef = useRef(null);
-  const [activeItemId, setActiveItemId] = useState(null);
-  const getItems = useCallback((element) => {
-    return Array.from(element.querySelectorAll(`[${ITEM_SELECTOR}]:not([data-disabled=true]`));
-  }, []);
-  const getFirstItem = useCallback(
-    (element) => {
-      return getItems(element).at(0);
-    },
-    [getItems]
-  );
-  const getLastItem = useCallback(
-    (element) => {
-      return getItems(element).at(-1);
-    },
-    [getItems]
-  );
-  const getActiveItem = useCallback(
-    (element) => {
-      return getItems(element).find((itemEle) => itemEle.getAttribute(ITEM_SELECTOR) === activeItemId);
-    },
-    [activeItemId, getItems]
-  );
-  const getNextItem = useCallback(
-    (element, direction) => {
-      const items = getItems(element);
-      const activeItem = getActiveItem(element);
-      const activeItemIndex = items.findIndex((itemEle) => itemEle === activeItem);
-      const nextItemIndex = computeNextIndex(activeItemIndex, items.length, direction, loop);
-      return items[nextItemIndex];
-    },
-    [getActiveItem, getItems, loop]
-  );
-  const getGroups = useCallback(() => {
-    if (!internalRef.current) return [];
-    return Array.from(internalRef.current.querySelectorAll(`[${GROUP_SELECTOR}]`));
-  }, []);
-  const getActiveGroup = useCallback(() => {
+  ) });
+});
+const PagesContext = createContext({});
+const usePagesContext = () => useContext(PagesContext);
+const MenuPages = memo((props) => {
+  const { children, defaultPage, page, onPageChange } = props;
+  const [activePage, setActivePage] = useControlledState(defaultPage ?? "", page, onPageChange);
+  const contextValue = useMemo(() => ({ activePage, setActivePage }), [activePage, setActivePage]);
+  return /* @__PURE__ */ jsx(PagesContext.Provider, { value: contextValue, children });
+});
+MenuPages.displayName = "MenuPages";
+const MenuPageContent = (props) => {
+  const { page, children } = props;
+  const { activePage } = usePagesContext();
+  return activePage === page ? children : null;
+};
+MenuPageContent.displayName = "PageContent";
+const MenuPageTrigger = memo((props) => {
+  const { ref, onSelect, page, ...rest } = props;
+  const { refs, setActiveIndex } = useMenuContentContext();
+  const { setActivePage } = usePagesContext();
+  const handleSelect = useCallback(() => {
     var _a;
-    return ((_a = getActiveItem(internalRef.current)) == null ? void 0 : _a.closest(`[${GROUP_SELECTOR}]`)) ?? void 0;
-  }, [getActiveItem]);
-  const getNextGroup = useCallback(
-    (direction) => {
-      const groups = getGroups();
-      const activeGroup = getActiveGroup();
-      const activeGroupIndex = groups.findIndex((groupEle) => groupEle === activeGroup);
-      const nextGroupIndex = computeNextIndex(activeGroupIndex, groups.length, direction, loop);
-      return groups[nextGroupIndex];
-    },
-    [getActiveGroup, getGroups, loop]
-  );
-  const getFirstGroup = useCallback(() => {
-    return getGroups().at(0);
-  }, [getGroups]);
-  const getLastGroup = useCallback(() => {
-    return getGroups().at(-1);
-  }, [getGroups]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      onKeyDown == null ? void 0 : onKeyDown(e);
-      if (e.defaultPrevented) return;
-      switch (e.code) {
-        case KEY_MAPPING.selectItem: {
-          const activeItem = getActiveItem(internalRef.current);
-          if (activeItem) activeItem.dispatchEvent(new Event("menu-select"));
-          break;
-        }
-        case KEY_MAPPING.next: {
-          let nextItem;
-          if (e.shiftKey) {
-            const nextGroup = getNextGroup("next");
-            if (!nextGroup) return;
-            nextItem = getFirstItem(nextGroup);
-          } else {
-            nextItem = getNextItem(internalRef.current, "next");
-          }
-          if (!nextItem) return;
-          setActiveItemId(nextItem.getAttribute(ITEM_SELECTOR));
-          break;
-        }
-        case KEY_MAPPING.prev: {
-          let prevItem;
-          if (e.shiftKey) {
-            const prevGroup = getNextGroup("prev");
-            if (!prevGroup) return;
-            prevItem = getFirstItem(prevGroup);
-          } else {
-            prevItem = getNextItem(internalRef.current, "prev");
-          }
-          if (!prevItem) return;
-          setActiveItemId(prevItem.getAttribute(ITEM_SELECTOR));
-          break;
-        }
-        case KEY_MAPPING.first: {
-          let firstItem;
-          if (e.shiftKey) {
-            const firstGroup = getFirstGroup();
-            if (!firstGroup) return;
-            firstItem = getFirstItem(firstGroup);
-          } else {
-            firstItem = getFirstItem(internalRef.current);
-          }
-          if (!firstItem) return;
-          setActiveItemId(firstItem.getAttribute(ITEM_SELECTOR));
-          break;
-        }
-        case KEY_MAPPING.last: {
-          let lastItem;
-          if (e.shiftKey) {
-            const lastGroup = getLastGroup();
-            if (!lastGroup) return;
-            lastItem = getFirstItem(lastGroup);
-          } else {
-            lastItem = getLastItem(internalRef.current);
-          }
-          if (!lastItem) return;
-          setActiveItemId(lastItem.getAttribute(ITEM_SELECTOR));
-          break;
-        }
-      }
-    },
-    [getActiveItem, getFirstGroup, getFirstItem, getLastGroup, getLastItem, getNextGroup, getNextItem, onKeyDown]
-  );
-  useEffect(() => {
-    const firstItem = getFirstItem(internalRef.current);
-    if (!firstItem) return;
-    setActiveItemId(firstItem.getAttribute(ITEM_SELECTOR));
-  }, [getFirstItem]);
-  const contextValue = useMemo(
-    () => ({
-      activeItemId,
-      setActiveItemId,
-      // style props
-      accentColor,
-      radius,
-      variant,
-      size: size2
-    }),
-    [accentColor, activeItemId, radius, size2, variant]
-  );
+    onSelect == null ? void 0 : onSelect();
+    setActivePage(page);
+    (_a = refs.floating.current) == null ? void 0 : _a.focus();
+    setActiveIndex(null);
+  }, [onSelect, page, refs.floating, setActiveIndex, setActivePage]);
+  return /* @__PURE__ */ jsx(MenuItem, { ref, onSelect: handleSelect, closeOnSelect: false, ...rest });
+});
+MenuPageTrigger.displayName = "MenuPageTrigger";
+const MenuScroll = memo((props) => {
+  const { ref, className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref: mergeRefs([ref, internalRef]),
-      className: cx(menuRootCva({ size: size2 }), radiusCva({ radius, maxLarge: true }), className),
-      role: "menu",
-      onKeyDown: handleKeyDown,
-      tabIndex: 0,
-      "aria-activedescendant": activeItemId ?? void 0,
-      "data-accent-color": accentColor,
-      ...rest,
-      children: /* @__PURE__ */ jsx(MenuRootContext, { value: contextValue, children })
+      ref,
+      className: cx(
+        "h-full overflow-x-hidden overflow-y-auto [scrollbar-color:var(--base-6)_transparent] [scrollbar-width:thin]",
+        className
+      ),
+      ...rest
     }
   );
 });
-MenuRoot.displayName = "MenuRoot";
-const MenuSelectedIndicator = memo((props) => {
-  const { ref, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(SelectedIndicator, { ref, ...rest, children });
+MenuScroll.displayName = "MenuScroll";
+const MenuSelectAllItem = genericMemo((props) => {
+  const { ref, children, onSelect, closeOnSelect = false, ...rest } = props;
+  const { allSelected, someSelected, toggleSelectAll } = use(MultiSelectContext);
+  const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    toggleSelectAll();
+  }, [onSelect, toggleSelectAll]);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? ({ active }) => children({ selected: selectedState, active }) : children;
+  }, [children, selectedState]);
+  return /* @__PURE__ */ jsx(CheckedIndicatorContext, { value: selectedState, children: /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      onSelect: handleSelect,
+      ref,
+      "data-state": getCheckedState(selectedState),
+      closeOnSelect,
+      ...rest,
+      children: computedChildren
+    }
+  ) });
 });
-MenuSelectedIndicator.displayName = "MenuCheckboxItemIndicator";
-const MenuSelectGroup = genericMemo(function MenuSelectGroup22(props) {
+const MenuSelectGroup = genericMemo(function MenuSelectGroup2(props) {
   const { ref, children, required, defaultValue, value, onValueChange, ...rest } = props;
   return /* @__PURE__ */ jsx(MenuGroup, { ref, ...rest, children: required ? /* @__PURE__ */ jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsx(
     SingleSelectNotRequiredProvider,
@@ -4135,52 +3678,182 @@ const MenuSelectGroup = genericMemo(function MenuSelectGroup22(props) {
   ) });
 });
 const MenuSelectItem = genericMemo(function(props) {
-  const { ref, value, onSelect, children, ...rest } = props;
+  const { ref, value, onSelect, children, closeOnSelect = true, ...rest } = props;
   const { selected, selectValue } = use(SelectContext);
-  const isSelected = selected(value);
-  const handleSelect = useCallback(
-    (e) => {
-      onSelect == null ? void 0 : onSelect(e);
-      if (e.defaultPrevented) return;
-      selectValue(value);
-    },
-    [onSelect, selectValue, value]
-  );
-  return /* @__PURE__ */ jsx(
+  const isSelected = useMemo(() => selected(value), [selected, value]);
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    selectValue(value);
+  }, [onSelect, selectValue, value]);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
+  }, [children, isSelected]);
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(
     MenuItem,
     {
       ref,
       role: "menuitemcheckbox",
       onSelect: handleSelect,
+      closeOnSelect,
       "data-state": getSelectedState(isSelected),
       ...rest,
-      children: /* @__PURE__ */ jsx(SelectedIndicatorContext, { value: isSelected, children })
+      children: computedChildren
     }
-  );
+  ) });
 });
 const MenuSeparator = memo((props) => {
   const { ref, className, ...rest } = props;
-  const { size: size2 } = use(MenuRootContext);
-  return /* @__PURE__ */ jsx(RadixSeparator.Root, { className: cx(menuSeparatorCva({ size: size2 }), className), ref, ...rest });
+  const { size: size2 } = useMenuContentContext();
+  return /* @__PURE__ */ jsx(RadixSeparator.Root, { className: cx(menuSeparator({ size: size2 }), className), ref, ...rest });
 });
 MenuSeparator.displayName = "MenuSeparator";
-const MenuV2 = {
+const MenuSubContent = memo((props) => {
+  var _a;
+  const { ref: forwardedRef, children, ...rest } = props;
+  const { middlewareData } = useMenuContext();
+  const { accentColor, radius, variant, size: size2 } = useMenuContentContext();
+  const {
+    open,
+    nodeId,
+    refs,
+    context,
+    getFloatingProps,
+    getItemProps,
+    activeIndex,
+    setActiveIndex,
+    elementsRef,
+    floatingStyles,
+    setOpen,
+    side
+  } = useSubContext();
+  const wrapperRef = useRef(null);
+  const mergeRefs2 = useMergeRefs([refs.setFloating, wrapperRef]);
+  const computedFloatingStyles = useMemo(() => {
+    var _a2;
+    return {
+      ...floatingStyles,
+      visibility: ((_a2 = middlewareData.hide) == null ? void 0 : _a2.referenceHidden) ? "hidden" : "visible"
+    };
+  }, [floatingStyles, (_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden]);
+  return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, initialFocus: wrapperRef, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(
+    MenuContentContext.Provider,
+    {
+      value: {
+        getItemProps,
+        activeIndex,
+        setActiveIndex,
+        elementsRef,
+        open,
+        setOpen,
+        refs,
+        size: size2,
+        radius,
+        accentColor,
+        variant
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "outline-none",
+          ref: mergeRefs2,
+          style: computedFloatingStyles,
+          ...getFloatingProps(),
+          children: /* @__PURE__ */ jsx(
+            "ul",
+            {
+              className: cx(
+                "overmap-menu-sub-content",
+                menuContent({ size: size2 }),
+                floating({ side, shadow: "3" }),
+                radiusCva({ radius, maxLarge: true }),
+                "max-h-(--overmap-menu-available-height)"
+              ),
+              ref: forwardedRef,
+              "data-state": getOpenState(open),
+              "data-side": side,
+              "data-accent-color": accentColor,
+              ...rest,
+              children
+            }
+          )
+        }
+      )
+    }
+  ) }) }) }) });
+});
+MenuSubContent.displayName = "MenuSubContent";
+const MenuSubTrigger = memo((props) => {
+  const { ref: forwardedRef, children, ...rest } = props;
+  const { refs, getReferenceProps, open, disabled } = useSubContext();
+  const mergedRefs = useMergeRefs([forwardedRef, refs.setReference]);
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ref: mergedRefs,
+      closeOnSelect: false,
+      "aria-haspopup": "menu",
+      "data-state": getOpenState(open),
+      disabled,
+      ...getReferenceProps(rest),
+      children
+    }
+  );
+});
+MenuSubTrigger.displayName = "MenuSubTrigger";
+const MenuVirtualTrigger = memo((props) => {
+  const { virtualElement, disabled } = props;
+  const { refs, setTriggerType, setOpen } = useMenuContext();
+  useEffect(() => {
+    setTriggerType("virtual");
+  }, [setTriggerType]);
+  useEffect(() => {
+    if (!disabled && virtualElement) {
+      refs.setPositionReference(virtualElement);
+      setOpen(true);
+    } else {
+      refs.setPositionReference(null);
+      setOpen(false);
+    }
+  }, [disabled, refs, setOpen, virtualElement]);
+  return null;
+});
+MenuVirtualTrigger.displayName = "VirtualTrigger";
+const Menu = {
   Root: MenuRoot,
+  Content: MenuContent,
+  // sub
+  Sub: MenuSub,
+  SubContent: MenuSubContent,
+  SubTrigger: MenuSubTrigger,
+  // pages
+  Pages: MenuPages,
+  PageContent: MenuPageContent,
+  PageTrigger: MenuPageTrigger,
+  // triggers
+  ClickTrigger: MenuClickTrigger,
+  ContextTrigger: MenuContextTrigger,
+  VirtualTrigger: MenuVirtualTrigger,
+  // groups
   Group: MenuGroup,
-  GroupLabel: MenuGroupLabel,
-  Item: MenuItem,
-  Separator: MenuSeparator,
   SelectGroup: MenuSelectGroup,
-  SelectItem: MenuSelectItem,
   MultiSelectGroup: MenuMultiSelectGroup,
+  // items
+  Item: MenuItem,
+  SelectItem: MenuSelectItem,
   MultiSelectItem: MenuMultiSelectItem,
   SelectAllItem: MenuSelectAllItem,
-  SelectedIndicator: MenuSelectedIndicator,
   CheckboxItem: MenuCheckboxItem,
-  CheckedIndicator: MenuCheckedIndicator,
-  Pages: MenuPages,
-  Page: MenuPage,
-  PageTriggerItem: MenuPageTriggerItem
+  // indicators
+  SelectedIndicator: MenuSelectedIndicator,
+  CheckboxItemIndicator: MenuCheckboxItemIndicator,
+  // input
+  InputRoot: MenuInputRoot,
+  InputField: MenuInputField,
+  InputSlot: MenuInputSlot,
+  // others
+  Label: MenuLabel,
+  Separator: MenuSeparator,
+  Scroll: MenuScroll
 };
 const OneTimePasswordFieldHiddenInput = memo((props) => {
   return /* @__PURE__ */ jsx(RadixOneTimePasswordField.HiddenInput, { ...props });
@@ -4281,6 +3954,62 @@ const OneTimePasswordField = {
   Input: OneTimePasswordFieldInput,
   Root: OneTimePasswordFieldRoot
 };
+const OverlayClose = memo((props) => {
+  const { ref, ...rest } = props;
+  return /* @__PURE__ */ jsx(RadixDialog.Close, { ref, ...rest });
+});
+OverlayClose.displayName = "OverlayClose";
+const overlayContentCva = cva([
+  "fixed",
+  "inset-0",
+  "bg-(--color-background)",
+  "data-[state='closed']:animate-out",
+  "data-[state='closed']:fade-out-0",
+  "data-[state='closed']:zoom-out-95",
+  "data-[state='open']:animate-in",
+  "data-[state='open']:fade-in-0",
+  "data-[state='open']:zoom-in-95"
+]);
+const OverlayContent = memo((props) => {
+  const { ref, container, className, ...rest } = props;
+  return /* @__PURE__ */ jsx(RadixDialog.Portal, { container, children: /* @__PURE__ */ jsx(
+    RadixDialog.Content,
+    {
+      className: cx(overlayContentCva(), className),
+      ref,
+      "data-floating-content": "",
+      ...rest
+    }
+  ) });
+});
+OverlayContent.displayName = "OverlayContent";
+const OverlayDescription = memo((props) => {
+  const { ref, ...rest } = props;
+  return /* @__PURE__ */ jsx(RadixDialog.Description, { ref, ...rest });
+});
+OverlayDescription.displayName = "OverlayDescription";
+const OverlayRoot = memo((props) => {
+  return /* @__PURE__ */ jsx(RadixDialog.Root, { ...props });
+});
+OverlayRoot.displayName = "OverlayRoot";
+const OverlayTitle = memo((props) => {
+  const { ref, ...rest } = props;
+  return /* @__PURE__ */ jsx(RadixDialog.Title, { ref, ...rest });
+});
+OverlayTitle.displayName = "OverlayTitle";
+const OverlayTrigger = memo((props) => {
+  const { ref, ...rest } = props;
+  return /* @__PURE__ */ jsx(RadixDialog.Trigger, { ref, ...rest });
+});
+OverlayTrigger.displayName = "OverlayTrigger";
+const Overlay = {
+  Root: OverlayRoot,
+  Content: OverlayContent,
+  Title: OverlayTitle,
+  Description: OverlayDescription,
+  Trigger: OverlayTrigger,
+  Close: OverlayClose
+};
 const centerStyles = { placeSelf: "center" };
 const ErrorFallback = memo((props) => {
   const { absoluteCentering, message = "Something went wrong", onRetry } = props;
@@ -6421,6 +6150,7 @@ export {
   CheckboxGroupSelectAllItem,
   CheckboxIndicator,
   CheckboxRoot,
+  CollapsibleTree,
   CommandMenu,
   CommandMenuCheckboxIndicator,
   CommandMenuCheckboxItem,
@@ -6469,38 +6199,44 @@ export {
   Link,
   LuIcon,
   Menu,
-  MenuCheckboxItem$1 as MenuCheckboxItem,
+  MenuCheckboxItem,
   MenuCheckboxItemIndicator,
   MenuClickTrigger,
   MenuContent,
   MenuContextTrigger,
-  MenuGroup$1 as MenuGroup,
+  MenuGroup,
   MenuInputField,
   MenuInputRoot,
   MenuInputSlot,
-  MenuItem$1 as MenuItem,
+  MenuItem,
   MenuLabel,
-  MenuMultiSelectGroup$1 as MenuMultiSelectGroup,
-  MenuMultiSelectItem$1 as MenuMultiSelectItem,
+  MenuMultiSelectGroup,
+  MenuMultiSelectItem,
   MenuPageContent,
   MenuPageTrigger,
-  MenuPages$1 as MenuPages,
-  MenuRoot$1 as MenuRoot,
+  MenuPages,
+  MenuRoot,
   MenuScroll,
-  MenuSelectAllItem$1 as MenuSelectAllItem,
-  MenuSelectGroup$1 as MenuSelectGroup,
-  MenuSelectItem$1 as MenuSelectItem,
-  MenuSelectedIndicator$1 as MenuSelectedIndicator,
-  MenuSeparator$1 as MenuSeparator,
+  MenuSelectAllItem,
+  MenuSelectGroup,
+  MenuSelectItem,
+  MenuSelectedIndicator,
+  MenuSeparator,
   MenuSub,
   MenuSubContent,
   MenuSubTrigger,
-  MenuV2,
   MenuVirtualTrigger,
   OneTimePasswordField,
   OneTimePasswordFieldHiddenInput,
   OneTimePasswordFieldInput,
   OneTimePasswordFieldRoot,
+  Overlay,
+  OverlayClose,
+  OverlayContent,
+  OverlayDescription,
+  OverlayRoot,
+  OverlayTitle,
+  OverlayTrigger,
   OvermapErrorBoundary,
   Popover,
   PopoverArrow,
@@ -6521,6 +6257,7 @@ export {
   SegmentedTabsList,
   SegmentedTabsRoot,
   SegmentedTabsTrigger,
+  SelectedIndicatorContext,
   Separator,
   SlideOut,
   Slider,
@@ -6557,12 +6294,6 @@ export {
   badge,
   buttonCva,
   floating,
-  genericMemo,
-  getActiveState,
-  getBooleanState,
-  getCheckedState,
-  getOpenState,
-  getSelectedState,
   mergeRefs,
   radiusCva,
   stopPropagation,
@@ -6570,9 +6301,15 @@ export {
   useAlertDialog,
   useButtonGroup,
   useControlledState,
-  useFallbackId,
   useLayoutContext,
+  useMenuContentContext,
+  useMenuContext,
+  usePagesContext,
   useProvider,
+  useSelectedIndicatorContext,
+  useSize,
+  useStopEventPropagation,
+  useSubContext,
   useTextFilter,
   useToast,
   useViewportSize