@enigmax/primitives 0.22.0 → 0.23.0

package/dist/chunk-DSBYVA7V.js

@@ -0,0 +1,713 @@
+import { createContextMenu, isAction } from './chunk-3BQVOOAM.js';
+import { shortcutTokens } from './chunk-4VUHQFAT.js';
+import { Slot } from './chunk-HS3X3XCW.js';
+import { shortenQuery } from './chunk-4ZPMP47J.js';
+import { createPortal } from 'react-dom';
+import { createContext, useContext, useLayoutEffect, useId, useMemo, useRef, useState, useEffect, useCallback } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// src/react/context-menu/styles.ts
+var CONTEXT_MENU_STYLES = `
+:root {
+    --enigma-menu-bg: #1c1c1c;
+    --enigma-menu-border: #333333;
+    --enigma-menu-radius: 0.625rem;
+    --enigma-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+    --enigma-menu-text: #f5f5f5;
+    --enigma-menu-muted: #a3a3a3;
+    --enigma-menu-font-size: 0.8125rem;
+    --enigma-menu-min-width: 12rem;
+    --enigma-menu-max-height: 20rem;
+
+    --enigma-menu-active-bg: #2a2a2a;
+    --enigma-menu-accent: #fbbf24;
+    --enigma-menu-danger: #f87171;
+    --enigma-menu-danger-bg: rgba(248, 113, 113, 0.12);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --enigma-menu-bg: #ffffff;
+        --enigma-menu-border: #e5e5e5;
+        --enigma-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        --enigma-menu-text: #171717;
+        --enigma-menu-muted: #737373;
+        --enigma-menu-active-bg: #f5f5f5;
+        --enigma-menu-accent: #b45309;
+        --enigma-menu-danger: #b91c1c;
+        --enigma-menu-danger-bg: rgba(185, 28, 28, 0.08);
+    }
+}
+
+/* Every panel is positioned in VIEWPORT coordinates, which is what a pointer event reports
+   and what a menu opened at the pointer needs. Fixed rather than absolute so a scrolling
+   ancestor cannot drag it away from the place it was opened. */
+[data-enigma-menu-panel] {
+    position: fixed; z-index: 60;
+    box-sizing: border-box;
+    min-width: var(--enigma-menu-min-width);
+    max-width: min(22rem, calc(100vw - 1rem));
+    padding: 0.25rem;
+    color: var(--enigma-menu-text);
+    background: var(--enigma-menu-bg);
+    border: 1px solid var(--enigma-menu-border);
+    border-radius: var(--enigma-menu-radius);
+    box-shadow: var(--enigma-menu-shadow);
+    font-size: var(--enigma-menu-font-size);
+    animation: enigma-menu-in 90ms ease-out;
+    /* Measured before it is placed, and placed before it is seen: without this the panel is
+       painted at 0,0 for one frame and jumps to the pointer on the next. */
+    visibility: hidden;
+}
+[data-enigma-menu-panel][data-placed] { visibility: visible; }
+@keyframes enigma-menu-in {
+    from { opacity: 0; transform: scale(0.98); }
+    to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-menu-panel] { animation: none; }
+}
+
+/* The heading: what the menu is acting ON. A long file name is cut rather than allowed to
+   set the panel's width, and the full one stays reachable through its title attribute. */
+[data-enigma-menu-title] {
+    margin: 0; padding: 0.375rem 0.5rem 0.25rem;
+    font-size: 0.6875rem; font-weight: 600;
+    color: var(--enigma-menu-muted);
+    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+}
+
+[data-enigma-menu-search] {
+    width: 100%; box-sizing: border-box;
+    padding: 0.375rem 0.5rem 0.5rem;
+    font: inherit; font-size: var(--enigma-menu-font-size);
+    color: var(--enigma-menu-text); background: transparent;
+    border: 0; border-bottom: 1px solid var(--enigma-menu-border);
+    outline: none;
+}
+[data-enigma-menu-search]::-webkit-search-cancel-button,
+[data-enigma-menu-search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
+
+[data-enigma-menu-list] {
+    max-height: var(--enigma-menu-max-height);
+    overflow-y: auto; overscroll-behavior: contain;
+}
+
+[data-enigma-menu-item] {
+    display: flex; align-items: center; gap: 0.5rem;
+    padding: 0.3125rem 0.5rem; border-radius: 0.375rem;
+    line-height: 1.4;
+    color: var(--enigma-menu-text);
+    /* The hand, not the arrow. A native menu uses the arrow because the whole surface is
+       drawn by the OS and nothing on a page looks like it; here the rows sit on a web page,
+       where the hand is what says "this is a thing you press". */
+    cursor: pointer; user-select: none;
+}
+[data-enigma-menu-item][data-active] { background: var(--enigma-menu-active-bg); }
+[data-enigma-menu-item][data-disabled] { opacity: 0.45; cursor: not-allowed; }
+[data-enigma-menu-item][data-destructive] { color: var(--enigma-menu-danger); }
+[data-enigma-menu-item][data-destructive][data-active] { background: var(--enigma-menu-danger-bg); }
+
+[data-enigma-menu-item-text] { display: grid; min-width: 0; }
+[data-enigma-menu-item-label] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+[data-enigma-menu-item-description] {
+    font-size: 0.6875rem; color: var(--enigma-menu-muted);
+    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+}
+
+[data-enigma-menu-icon] { display: inline-flex; align-items: center; flex: none; width: 1rem; max-height: 1.25em; line-height: 0; }
+
+/* The shortcut, on the right, the way every desktop menu prints it. margin-left: auto is
+   what pushes it there, and flex: none is what stops a long label squashing it. */
+[data-enigma-menu-shortcut] {
+    display: flex; align-items: center; gap: 0.125rem;
+    flex: none; margin-left: auto; padding-left: 1.5rem;
+    font-size: 0.6875rem; color: var(--enigma-menu-muted);
+    font-variant-numeric: tabular-nums;
+}
+[data-enigma-menu-shortcut] kbd { font: inherit; }
+
+/* The submenu arrow shares the shortcut's slot, so a row never has both pushed apart. */
+[data-enigma-menu-arrow] {
+    flex: none; margin-left: auto;
+    width: 0.35rem; height: 0.35rem;
+    border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
+    transform: rotate(45deg);
+    opacity: 0.6;
+}
+[data-enigma-menu-shortcut] + [data-enigma-menu-arrow] { margin-left: 0.5rem; }
+
+/* Check and radio: drawn rather than loaded, and reserving their space either way so
+   choosing a row does not shift the label under the pointer. */
+[data-enigma-menu-check] {
+    flex: none; width: 1rem; height: 1rem;
+    display: grid; place-items: center;
+    color: var(--enigma-menu-accent);
+}
+[data-enigma-menu-check]::after { content: ""; width: 0.35rem; height: 0.6rem; opacity: 0; }
+[data-enigma-menu-item][aria-checked="true"] [data-enigma-menu-check]::after {
+    opacity: 1;
+    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
+    transform: rotate(45deg) translate(-0.05rem, -0.05rem);
+}
+[data-enigma-menu-item][role="menuitemradio"] [data-enigma-menu-check]::after {
+    width: 0.4rem; height: 0.4rem; border-radius: 999px; background: currentColor;
+    transform: none; border: 0;
+}
+
+[data-enigma-menu-separator] {
+    height: 1px; margin: 0.25rem 0.25rem;
+    background: var(--enigma-menu-border);
+}
+
+[data-enigma-menu-label] {
+    margin: 0.375rem 0 0.125rem; padding: 0 0.5rem;
+    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
+    color: var(--enigma-menu-muted);
+}
+
+[data-enigma-menu-status] {
+    margin: 0; padding: 0.625rem 0.5rem;
+    font-size: var(--enigma-menu-font-size); color: var(--enigma-menu-muted);
+    /* The quoted query is cut in the text as well, but a pasted string with no spaces has no
+       break opportunity at all - so this is what stops it stretching the panel. */
+    overflow-wrap: anywhere;
+}
+[data-enigma-menu-status][data-error] { color: var(--enigma-menu-danger); }
+
+/* The end-of-window marker: one pixel, so it has a box to be scrolled into. */
+[data-enigma-menu-more] { height: 1px; }
+`;
+var ContextMenuContext = createContext(null);
+function useContextMenuContext(part) {
+  const value = useContext(ContextMenuContext);
+  if (!value) throw new Error(`<${part}> must be rendered inside <ContextMenu.Root>.`);
+  return value;
+}
+var injected = false;
+function injectStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  if (document.querySelector("[data-enigma-menu-styles]")) return;
+  const element = document.createElement("style");
+  element.setAttribute("data-enigma-menu-styles", "");
+  element.textContent = CONTEXT_MENU_STYLES;
+  document.head.prepend(element);
+}
+var MOVE_KEYS = {
+  ArrowDown: "ArrowDown",
+  ArrowUp: "ArrowUp",
+  Home: "Home",
+  End: "End",
+  PageDown: "PageDown",
+  PageUp: "PageUp"
+};
+var OPEN_DELAY = 140;
+var CLOSE_DELAY = 260;
+var TOUCH_SLOP = 10;
+var LONG_PRESS_MS = 500;
+var MARGIN = 8;
+function ContextMenuRoot(props) {
+  const {
+    items,
+    title,
+    disabled = false,
+    fuse,
+    fuseOptions,
+    matcher,
+    searchKeys,
+    cacheMs,
+    openDelay = OPEN_DELAY,
+    closeDelay = CLOSE_DELAY,
+    renderItem,
+    loadingLabel = "Loading...",
+    emptyLabel = "Nothing here.",
+    styles = true,
+    children
+  } = props;
+  useLayoutEffect(() => {
+    if (styles) injectStyles();
+  }, [styles]);
+  const id = useId();
+  const ids = useMemo(() => ({ trigger: `${id}-trigger` }), [id]);
+  const triggerRef = useRef(null);
+  const closing = useRef(0);
+  const latest = useRef(props);
+  latest.current = props;
+  const instance = useMemo(() => createContextMenu({
+    items,
+    title,
+    fuse,
+    fuseOptions,
+    matcher,
+    searchKeys,
+    cacheMs,
+    onSelect: (item, path) => latest.current.onSelect?.(item, path),
+    onOpenChange: (open2) => latest.current.onOpenChange?.(open2)
+    // Built once: rebuilding it would drop the open branch and the highlight on every
+    // render. Every option below is pushed in through update().
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), []);
+  const [state, setState] = useState(() => instance.state);
+  useEffect(() => {
+    const unsubscribe = instance.subscribe(setState);
+    setState(instance.state);
+    return () => {
+      unsubscribe();
+      instance.destroy();
+    };
+  }, [instance]);
+  const signature = useMemo(() => {
+    const seen = /* @__PURE__ */ new WeakSet();
+    try {
+      return JSON.stringify(items, (key, value) => {
+        if (key === "icon") return void 0;
+        if (typeof value === "function") return "fn";
+        if (typeof value === "bigint") return String(value);
+        if (typeof value === "object" && value !== null) {
+          if (seen.has(value)) return "[circular]";
+          seen.add(value);
+        }
+        return value;
+      });
+    } catch {
+      return "[unserializable]";
+    }
+  }, [items]);
+  const currentItems = useRef(items);
+  currentItems.current = items;
+  useEffect(() => {
+    instance.update({ items: currentItems.current, title });
+  }, [instance, signature, title]);
+  const cancelClose = useCallback(() => {
+    window.clearTimeout(closing.current);
+  }, []);
+  const scheduleClose = useCallback((level) => {
+    window.clearTimeout(closing.current);
+    closing.current = window.setTimeout(() => instance.closeBelow(level), closeDelay);
+  }, [instance, closeDelay]);
+  useEffect(() => cancelClose, [cancelClose]);
+  const open = useCallback((point) => {
+    if (disabled) return false;
+    cancelClose();
+    return instance.open(point);
+  }, [instance, disabled, cancelClose]);
+  const close = useCallback(() => {
+    cancelClose();
+    instance.close();
+    triggerRef.current?.focus?.();
+  }, [instance, cancelClose]);
+  useEffect(() => {
+    if (!state.open) return;
+    const inside = (target) => Boolean(target?.closest?.("[data-enigma-menu-panel]"));
+    const onPointerDown = (event) => {
+      if (inside(event.target)) return;
+      instance.close();
+    };
+    const onContextMenu = (event) => {
+      if (!inside(event.target)) instance.close();
+    };
+    const onScroll = (event) => {
+      if (inside(event.target)) return;
+      instance.close();
+    };
+    const onBlur = () => instance.close();
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("contextmenu", onContextMenu, true);
+    document.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onBlur);
+    window.addEventListener("blur", onBlur);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("contextmenu", onContextMenu, true);
+      document.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onBlur);
+      window.removeEventListener("blur", onBlur);
+    };
+  }, [state.open, instance]);
+  const onMenuKeyDown = useCallback((event) => {
+    const deepest = instance.state.levels.length - 1;
+    const level = instance.state.levels[deepest];
+    if (!level) return;
+    const field = event.target?.matches?.("[data-enigma-menu-search]") ?? false;
+    const move = MOVE_KEYS[event.key];
+    if (move) {
+      event.preventDefault();
+      instance.move(move);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      instance.selectActive();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (deepest > 0) instance.leaveSubmenu();
+      else close();
+      return;
+    }
+    if (event.key === "ArrowRight" && !field) {
+      event.preventDefault();
+      instance.enterSubmenu();
+      return;
+    }
+    if (event.key === "ArrowLeft" && !field) {
+      event.preventDefault();
+      instance.leaveSubmenu();
+      return;
+    }
+    if (event.key === "Tab") {
+      event.preventDefault();
+      close();
+      return;
+    }
+    if (event.key === " " && !field) {
+      event.preventDefault();
+      instance.selectActive();
+      return;
+    }
+    if (!field && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      instance.typeahead(event.key);
+    }
+  }, [instance, close]);
+  const context = useMemo(() => ({
+    instance,
+    state,
+    open,
+    close,
+    ids,
+    panelId: (level) => `${id}-panel-${level}`,
+    itemId: (level, index) => `${id}-item-${level}-${index}`,
+    triggerRef,
+    onMenuKeyDown,
+    delays: { open: openDelay, close: closeDelay },
+    cancelClose,
+    scheduleClose,
+    renderItem,
+    loadingLabel,
+    emptyLabel
+  }), [instance, state, open, close, ids, id, onMenuKeyDown, openDelay, closeDelay, cancelClose, scheduleClose, renderItem, loadingLabel, emptyLabel]);
+  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: context, children });
+}
+function ContextMenuTrigger({ asChild = false, longPress = true, children, ...props }) {
+  const menu = useContextMenuContext("ContextMenu.Trigger");
+  const Tag = asChild ? Slot : "div";
+  const press = useRef(null);
+  const cancelPress = useCallback(() => {
+    if (press.current) window.clearTimeout(press.current.timer);
+    press.current = null;
+  }, []);
+  useEffect(() => cancelPress, [cancelPress]);
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...props,
+      ref: menu.triggerRef,
+      id: menu.ids.trigger,
+      tabIndex: props.tabIndex ?? 0,
+      "data-enigma-menu-trigger": "",
+      "data-open": menu.state.open ? "" : void 0,
+      "aria-haspopup": "menu",
+      "aria-expanded": menu.state.open,
+      onContextMenu: (event) => {
+        props.onContextMenu?.(event);
+        if (event.defaultPrevented) return;
+        if (menu.open({ x: event.clientX, y: event.clientY })) event.preventDefault();
+      },
+      onPointerDown: (event) => {
+        props.onPointerDown?.(event);
+        if (event.defaultPrevented || !longPress || event.pointerType !== "touch") return;
+        const { clientX: x, clientY: y } = event;
+        cancelPress();
+        press.current = { x, y, timer: window.setTimeout(() => {
+          press.current = null;
+          menu.open({ x, y });
+        }, LONG_PRESS_MS) };
+      },
+      onPointerMove: (event) => {
+        props.onPointerMove?.(event);
+        const held = press.current;
+        if (held && (Math.abs(event.clientX - held.x) > TOUCH_SLOP || Math.abs(event.clientY - held.y) > TOUCH_SLOP)) cancelPress();
+      },
+      onPointerUp: (event) => {
+        props.onPointerUp?.(event);
+        cancelPress();
+      },
+      onPointerCancel: (event) => {
+        props.onPointerCancel?.(event);
+        cancelPress();
+      },
+      onKeyDown: (event) => {
+        props.onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        const wanted = event.key === "ContextMenu" || event.key === "F10" && event.shiftKey;
+        if (!wanted) return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        if (menu.open({ x: rect.left + 8, y: rect.top + 8 })) event.preventDefault();
+      },
+      children
+    }
+  );
+}
+function ContextMenuContent({ chunk = 40, portal = true, ...props }) {
+  const menu = useContextMenuContext("ContextMenu.Content");
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!menu.state.open || menu.state.levels.length === 0) return null;
+  const panels = /* @__PURE__ */ jsx(Fragment, { children: menu.state.levels.map((_, level) => /* @__PURE__ */ jsx(ContextMenuPanel, { level, chunk, ...props }, level)) });
+  if (!portal) return panels;
+  if (!mounted || typeof document === "undefined") return null;
+  return createPortal(panels, document.body);
+}
+function ContextMenuPanel({ level, chunk = 40, ...props }) {
+  const menu = useContextMenuContext("ContextMenu.Panel");
+  const state = menu.state.levels[level];
+  const ref = useRef(null);
+  const [placed, setPlaced] = useState(null);
+  const point = menu.state.point;
+  const rows = state?.visible.length ?? 0;
+  const loading = state?.loading ?? false;
+  useLayoutEffect(() => {
+    const panel = ref.current;
+    if (!panel) return;
+    const width = panel.offsetWidth;
+    const height = panel.offsetHeight;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let left;
+    let top;
+    if (level === 0) {
+      left = point?.x ?? MARGIN;
+      top = point?.y ?? MARGIN;
+      if (left + width > vw - MARGIN) left = Math.max(MARGIN, left - width);
+      if (top + height > vh - MARGIN) top = Math.max(MARGIN, top - height);
+    } else {
+      const parent = document.getElementById(menu.panelId(level - 1))?.getBoundingClientRect();
+      const row = document.getElementById(menu.itemId(level - 1, menu.state.levels[level - 1]?.active ?? -1))?.getBoundingClientRect();
+      const anchor = parent ?? { left: point?.x ?? MARGIN, right: point?.x ?? MARGIN, top: point?.y ?? MARGIN };
+      left = anchor.right - 2;
+      if (left + width > vw - MARGIN) left = Math.max(MARGIN, anchor.left - width + 2);
+      top = (row?.top ?? anchor.top) - 4;
+      if (top + height > vh - MARGIN) top = Math.max(MARGIN, vh - MARGIN - height);
+    }
+    setPlaced({ left: Math.max(MARGIN, Math.round(left)), top: Math.max(MARGIN, Math.round(top)) });
+  }, [level, point?.x, point?.y, rows, loading, menu, menu.state.levels.length]);
+  const isPlaced = placed !== null;
+  const isDeepest = menu.state.levels.length - 1 === level;
+  useEffect(() => {
+    const panel = ref.current;
+    if (!panel || !isPlaced || !isDeepest) return;
+    const field = panel.querySelector("[data-enigma-menu-search]");
+    (field ?? panel).focus({ preventScroll: true });
+  }, [level, state?.searchable, isPlaced, isDeepest]);
+  if (!state) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref,
+      id: menu.panelId(level),
+      role: "menu",
+      tabIndex: -1,
+      "aria-label": state.title ?? void 0,
+      "aria-activedescendant": state.active >= 0 ? menu.itemId(level, state.active) : void 0,
+      "data-enigma-menu-panel": "",
+      "data-level": level,
+      "data-placed": placed ? "" : void 0,
+      style: { ...placed, ...props.style },
+      onKeyDown: (event) => {
+        props.onKeyDown?.(event);
+        if (!event.defaultPrevented) menu.onMenuKeyDown(event);
+      },
+      onPointerEnter: (event) => {
+        props.onPointerEnter?.(event);
+        menu.cancelClose();
+      },
+      onPointerLeave: (event) => {
+        props.onPointerLeave?.(event);
+        if (level !== menu.state.levels.length - 1 || level === 0) return;
+        menu.scheduleClose(level - 1);
+      },
+      children: [
+        state.title && /* @__PURE__ */ jsx("p", { "data-enigma-menu-title": "", title: state.title, children: state.title }),
+        state.searchable && /* @__PURE__ */ jsx(ContextMenuSearch, { level }),
+        /* @__PURE__ */ jsx(ContextMenuList, { level, chunk })
+      ]
+    }
+  );
+}
+function ContextMenuSearch({ level, placeholder = "Search", onKeyDown, ...props }) {
+  const menu = useContextMenuContext("ContextMenu.Search");
+  const state = menu.state.levels[level];
+  if (!state) return null;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...props,
+      type: "search",
+      role: "combobox",
+      "aria-expanded": true,
+      "aria-controls": menu.panelId(level),
+      "aria-autocomplete": "list",
+      "aria-activedescendant": state.active >= 0 ? menu.itemId(level, state.active) : void 0,
+      "aria-label": props["aria-label"] ?? placeholder,
+      autoComplete: "off",
+      spellCheck: false,
+      placeholder,
+      "data-enigma-menu-search": "",
+      value: state.query,
+      onChange: (event) => menu.instance.setQuery(level, event.target.value),
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) menu.onMenuKeyDown(event);
+      }
+    }
+  );
+}
+var OVERSCAN = 10;
+function ContextMenuList({ level, chunk = 40, ...props }) {
+  const menu = useContextMenuContext("ContextMenu.List");
+  const state = menu.state.levels[level];
+  const sentinel = useRef(null);
+  const [limit, setLimit] = useState(chunk);
+  const query = state?.query ?? "";
+  useEffect(() => {
+    setLimit(chunk);
+  }, [query, chunk]);
+  const total = state?.visible.length ?? 0;
+  const active = state?.active ?? -1;
+  const shown = Math.min(total, Math.max(limit, active + 1 + OVERSCAN));
+  const rest = total - shown;
+  useEffect(() => {
+    const target = sentinel.current;
+    if (!target) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setLimit(Number.POSITIVE_INFINITY);
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) setLimit((current) => current + chunk);
+    }, { root: target.parentElement, rootMargin: "120px" });
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [chunk, rest]);
+  if (!state) return null;
+  if (state.loading) return /* @__PURE__ */ jsx("div", { ...props, "data-enigma-menu-list": "", children: /* @__PURE__ */ jsx("p", { "data-enigma-menu-status": "", children: menu.loadingLabel }) });
+  if (state.error) {
+    return /* @__PURE__ */ jsx("div", { ...props, "data-enigma-menu-list": "", children: /* @__PURE__ */ jsx("p", { "data-enigma-menu-status": "", "data-error": "", role: "alert", children: state.error.message }) });
+  }
+  if (total === 0) {
+    return /* @__PURE__ */ jsx("div", { ...props, "data-enigma-menu-list": "", children: /* @__PURE__ */ jsx("p", { "data-enigma-menu-status": "", children: state.query.trim() ? `Nothing matches "${shortenQuery(state.query)}".` : menu.emptyLabel }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { ...props, "data-enigma-menu-list": "", children: [
+    state.visible.slice(0, shown).map((entry, index) => /* @__PURE__ */ jsx(ContextMenuRow, { level, index, entry }, entryKey(entry, index))),
+    rest > 0 && // The end of what is rendered. Reaching it renders the next chunk, so the list
+    // appears endless while the document holds a screenful of it.
+    /* @__PURE__ */ jsx("div", { ref: sentinel, "data-enigma-menu-more": "", "aria-hidden": "true" })
+  ] });
+}
+function entryKey(entry, index) {
+  return isAction(entry) ? entry.id : `${entry.type}-${entry.id ?? index}`;
+}
+function ContextMenuRow({ level, index, entry, children, ...props }) {
+  const menu = useContextMenuContext("ContextMenu.Item");
+  const ref = useRef(null);
+  const timers = useRef({ open: 0 });
+  const state = menu.state.levels[level];
+  const isActive = state?.active === index;
+  const item = isAction(entry) ? entry : null;
+  const submenu = Boolean(item && (item.loadItems || item.items && item.items.some((child) => isAction(child))));
+  const expanded = submenu && menu.state.levels[level + 1]?.path[level] === item?.id;
+  useEffect(() => {
+    if (isActive) ref.current?.scrollIntoView({ block: "nearest" });
+  }, [isActive]);
+  useEffect(() => {
+    const held = timers.current;
+    return () => {
+      window.clearTimeout(held.open);
+    };
+  }, []);
+  if (!item) {
+    if (entry.type === "separator") return /* @__PURE__ */ jsx("div", { ...props, role: "separator", "data-enigma-menu-separator": "" });
+    return /* @__PURE__ */ jsx("p", { ...props, "data-enigma-menu-label": "", "aria-hidden": "true", children: entry.label });
+  }
+  const checkable = item.checked !== void 0;
+  const role = checkable ? item.group ? "menuitemradio" : "menuitemcheckbox" : "menuitem";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      id: menu.itemId(level, index),
+      role,
+      "aria-disabled": item.disabled || void 0,
+      "aria-haspopup": submenu ? "menu" : void 0,
+      "aria-expanded": submenu ? expanded : void 0,
+      "aria-checked": checkable ? Boolean(item.checked) : void 0,
+      "aria-keyshortcuts": item.shortcut,
+      "data-enigma-menu-item": "",
+      "data-active": isActive ? "" : void 0,
+      "data-disabled": item.disabled ? "" : void 0,
+      "data-destructive": item.destructive ? "" : void 0,
+      "data-submenu": submenu ? "" : void 0,
+      onPointerEnter: () => {
+        window.clearTimeout(timers.current.open);
+        menu.cancelClose();
+        if (!item.disabled) menu.instance.setActive(level, index);
+        if (!item.disabled && submenu) {
+          timers.current.open = window.setTimeout(() => menu.instance.openSubmenu(level, index), menu.delays.open);
+        } else if (menu.state.levels.length > level + 1) {
+          menu.scheduleClose(level);
+        }
+      },
+      onPointerLeave: () => {
+        window.clearTimeout(timers.current.open);
+      },
+      onPointerUp: (event) => {
+        props.onPointerUp?.(event);
+        if (event.defaultPrevented || item.disabled || event.button !== 0) return;
+        menu.instance.select(level, index);
+      },
+      onClick: (event) => {
+        props.onClick?.(event);
+        if (event.defaultPrevented || item.disabled || event.detail !== 0) return;
+        menu.instance.select(level, index);
+      },
+      children: children ?? menu.renderItem?.(item, level, index) ?? /* @__PURE__ */ jsx(ContextMenuRowContent, { item, submenu })
+    }
+  );
+}
+function ContextMenuRowContent({ item, submenu }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.checked !== void 0 && /* @__PURE__ */ jsx("span", { "data-enigma-menu-check": "", "aria-hidden": "true" }),
+    item.icon ? /* @__PURE__ */ jsx("span", { "data-enigma-menu-icon": "", children: item.icon }) : null,
+    /* @__PURE__ */ jsxs("span", { "data-enigma-menu-item-text": "", children: [
+      /* @__PURE__ */ jsx("span", { "data-enigma-menu-item-label": "", children: item.label }),
+      item.description && /* @__PURE__ */ jsx("span", { "data-enigma-menu-item-description": "", children: item.description })
+    ] }),
+    item.shortcut && // One `<kbd>` per key, so `Ctrl` and `C` can be spaced apart - and written for
+    // THIS platform, because a menu that says Ctrl on a Mac is a hint that misleads.
+    /* @__PURE__ */ jsx("span", { "data-enigma-menu-shortcut": "", "aria-hidden": "true", children: shortcutTokens(item.shortcut).map((token, index) => /* @__PURE__ */ jsx("kbd", { children: token }, index)) }),
+    submenu && /* @__PURE__ */ jsx("span", { "data-enigma-menu-arrow": "", "aria-hidden": "true" })
+  ] });
+}
+function ContextMenu(props) {
+  const { chunk, longPress, triggerProps, contentProps, children, ...rest } = props;
+  return /* @__PURE__ */ jsxs(ContextMenuRoot, { ...rest, children: [
+    /* @__PURE__ */ jsx(ContextMenuTrigger, { longPress, ...triggerProps, children }),
+    /* @__PURE__ */ jsx(ContextMenuContent, { chunk, ...contentProps })
+  ] });
+}
+ContextMenu.Root = ContextMenuRoot;
+ContextMenu.Trigger = ContextMenuTrigger;
+ContextMenu.Content = ContextMenuContent;
+ContextMenu.Panel = ContextMenuPanel;
+ContextMenu.Search = ContextMenuSearch;
+ContextMenu.List = ContextMenuList;
+ContextMenu.Item = ContextMenuRow;
+
+export { CONTEXT_MENU_STYLES, ContextMenu, ContextMenuContent, ContextMenuList, ContextMenuPanel, ContextMenuRoot, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, useContextMenuContext };