@seekbuddy/dsh-ui 0.0.0-stage → 0.2.0-beta.0

package/dist/chunks/chunk-3HCOU44R.js

@@ -0,0 +1,697 @@
+import {
+  ShortcutKeys,
+  overlayTopMargin,
+  usePointerGrace
+} from "./chunk-OQPH36OI.js";
+import {
+  IconCheckOutlineRegular
+} from "./chunk-LA3QDZYN.js";
+
+// src/StateDot.tsx
+import clsx from "clsx";
+
+// .build/css/StateDot.module.mjs
+var id = "@seekbuddy/dsh-ui/StateDot.module.css";
+if (typeof document !== "undefined" && !document.querySelector('style[data-dsh-ui-primitives="' + id + '"]')) {
+  const element = document.createElement("style");
+  element.setAttribute("data-dsh-ui-primitives", id);
+  element.textContent = '.vSoTLq_dot{flex:none;display:inline-block;position:relative}.vSoTLq_dot:after{content:"";corner-shape:round;background:currentColor;border-radius:50%;position:absolute;inset:20%}.vSoTLq_dot[data-state=done]{color:var(--dsw-alias-state-success-primary)}.vSoTLq_dot[data-state=warning]{color:var(--dsw-alias-state-warn-primary)}.vSoTLq_dot[data-state=error]{color:var(--dsw-alias-state-error-primary)}.vSoTLq_dot[data-state=idle]{color:var(--dsw-alias-state-idle-primary)}.vSoTLq_spinner{color:var(--dsw-alias-label-tertiary);flex:none}.vSoTLq_spinnerMotion{transform-origin:50%;animation:1.5s linear infinite vSoTLq_dsh-state-dot-spin}.vSoTLq_spinnerTrack,.vSoTLq_spinnerArc{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round}.vSoTLq_spinnerTrack{opacity:.25}.vSoTLq_spinnerArc{stroke-dasharray:12 150;animation:1.5s ease-in-out infinite vSoTLq_dsh-state-dot-dash}@keyframes vSoTLq_dsh-state-dot-spin{to{transform:rotate(360deg)}}@keyframes vSoTLq_dsh-state-dot-dash{0%{stroke-dasharray:12 150;stroke-dashoffset:0}50%{stroke-dasharray:24 150;stroke-dashoffset:-6px}to{stroke-dasharray:12 150;stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.vSoTLq_spinnerMotion,.vSoTLq_spinnerArc{animation:none}.vSoTLq_spinnerArc{stroke-dasharray:18 150;stroke-dashoffset:-3px}}.vSoTLq_step{box-sizing:border-box;corner-shape:round;border:1.5px solid var(--dsw-alias-label-tertiary);color:var(--dsw-alias-label-primary-foreground);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.vSoTLq_step[data-state=done]{border-color:var(--dsw-alias-state-success-primary);background:var(--dsw-alias-state-success-primary)}.vSoTLq_step[data-state=error]{border-color:var(--dsw-alias-state-error-primary);background:var(--dsw-alias-state-error-primary)}.vSoTLq_step[data-state=warning]{border-color:var(--dsw-alias-state-warn-primary)}';
+  document.head.appendChild(element);
+}
+var StateDot_module_default = { "dot": "vSoTLq_dot", "dsh-state-dot-dash": "vSoTLq_dsh-state-dot-dash", "spinner": "vSoTLq_spinner", "step": "vSoTLq_step", "spinnerTrack": "vSoTLq_spinnerTrack", "spinnerArc": "vSoTLq_spinnerArc", "dsh-state-dot-spin": "vSoTLq_dsh-state-dot-spin", "spinnerMotion": "vSoTLq_spinnerMotion" };
+
+// src/StateDot.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function syncSpinner(element) {
+  if (element === null) return;
+  const spinner = element;
+  for (const animation of spinner.getAnimations?.({ subtree: true }) ?? []) animation.startTime = 0;
+}
+function StateDot({
+  state,
+  size,
+  className,
+  appearance = "dot"
+}) {
+  const edge = size ?? (state === "ongoing" ? 14 : 10);
+  if (state === "ongoing") {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref: syncSpinner,
+        className: clsx(StateDot_module_default.spinner, className),
+        "data-state": "ongoing",
+        width: edge,
+        height: edge,
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxs("g", { className: StateDot_module_default.spinnerMotion, children: [
+          /* @__PURE__ */ jsx("circle", { className: StateDot_module_default.spinnerTrack, cx: "12", cy: "12", r: "9.5" }),
+          /* @__PURE__ */ jsx("circle", { className: StateDot_module_default.spinnerArc, cx: "12", cy: "12", r: "9.5" })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx(appearance === "step" ? StateDot_module_default.step : StateDot_module_default.dot, className),
+      "data-state": state,
+      style: { width: edge, height: edge },
+      "aria-hidden": "true",
+      children: appearance === "step" && state === "done" && /* @__PURE__ */ jsx(IconCheckOutlineRegular, { size: edge - 2 })
+    }
+  );
+}
+
+// src/Pill.tsx
+import clsx2 from "clsx";
+
+// .build/css/Pill.module.mjs
+var id2 = "@seekbuddy/dsh-ui/Pill.module.css";
+if (typeof document !== "undefined" && !document.querySelector('style[data-dsh-ui-primitives="' + id2 + '"]')) {
+  const element = document.createElement("style");
+  element.setAttribute("data-dsh-ui-primitives", id2);
+  element.textContent = ".c2tx2W_pill{corner-shape:round;height:24px;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-bg-layer-2);border:none;border-radius:999px;align-items:center;gap:4px;padding:0 8px;font-size:12px;line-height:18px;display:inline-flex}.c2tx2W_interactive{cursor:pointer}.c2tx2W_interactive:hover{background:var(--dsw-alias-interactive-bg-hover)}.c2tx2W_active{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-button-ghost-active-fill);box-shadow:inset 0 0 0 1px var(--dsw-alias-button-ghost-active-border)}";
+  document.head.appendChild(element);
+}
+var Pill_module_default = { "pill": "c2tx2W_pill", "interactive": "c2tx2W_interactive", "active": "c2tx2W_active" };
+
+// src/Pill.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Pill({
+  active = false,
+  className,
+  children,
+  onClick,
+  ...rest
+}) {
+  if (!onClick) {
+    return /* @__PURE__ */ jsx2("span", { className: clsx2(Pill_module_default.pill, active && Pill_module_default.active, className), children });
+  }
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      className: clsx2(Pill_module_default.pill, Pill_module_default.interactive, active && Pill_module_default.active, className),
+      onClick,
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/keyboard-composition.ts
+function observeComposition(document2) {
+  let composing = false;
+  let ended = false;
+  const start = () => {
+    composing = true;
+  };
+  const end = () => {
+    composing = false;
+    ended = true;
+  };
+  const release = () => {
+    ended = false;
+  };
+  const blur = () => {
+    composing = false;
+    ended = false;
+  };
+  document2.addEventListener("compositionstart", start, true);
+  document2.addEventListener("compositionend", end, true);
+  document2.addEventListener("keyup", release, true);
+  document2.defaultView?.addEventListener("blur", blur);
+  return {
+    guards: (event) => {
+      const guarded = composing || ended || event.isComposing || event.keyCode === 229;
+      ended = false;
+      return guarded;
+    },
+    dispose: () => {
+      document2.removeEventListener("compositionstart", start, true);
+      document2.removeEventListener("compositionend", end, true);
+      document2.removeEventListener("keyup", release, true);
+      document2.defaultView?.removeEventListener("blur", blur);
+    }
+  };
+}
+
+// src/focus.ts
+var releases = /* @__PURE__ */ new WeakMap();
+var navigationKeys = /* @__PURE__ */ new Set(["Tab", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"]);
+function focusWithoutRing(element, options) {
+  releases.get(element)?.();
+  const release = () => {
+    element.removeAttribute("data-dsh-automatic-focus");
+    element.removeEventListener("blur", release);
+    element.removeEventListener("keydown", navigate, true);
+    releases.delete(element);
+  };
+  const navigate = (event) => {
+    if (!event.isComposing && !event.ctrlKey && !event.altKey && !event.metaKey && navigationKeys.has(event.key))
+      release();
+  };
+  releases.set(element, release);
+  element.setAttribute("data-dsh-automatic-focus", "");
+  element.addEventListener("blur", release);
+  element.addEventListener("keydown", navigate, true);
+  element.focus(options);
+  if (!element.matches(":focus")) release();
+}
+
+// src/useModalLayer.ts
+import { useLayoutEffect, useRef } from "react";
+var modalSelector = '[role="dialog"][aria-modal="true"], [role="menu"]';
+var layers = /* @__PURE__ */ new WeakMap();
+function closeTopModal(document2) {
+  const top = layers.get(document2)?.at(-1);
+  if (top === void 0) return;
+  const foreground = [...document2.querySelectorAll(modalSelector)].at(-1);
+  if (foreground === top.element) top.close();
+}
+function isBehindModal(anchor) {
+  if (anchor === null) return false;
+  const top = layers.get(anchor.ownerDocument)?.at(-1);
+  return top !== void 0 && !top.element.contains(anchor);
+}
+var focusable = 'button:not(:disabled), input:not(:disabled), textarea:not(:disabled), select:not(:disabled), a[href], [tabindex="0"]';
+function useModalLayer(dialog, open, onClose) {
+  const close = useRef(onClose);
+  close.current = onClose;
+  useLayoutEffect(() => {
+    const element = dialog.current;
+    if (!open || element === null) return;
+    const document2 = element.ownerDocument;
+    const composition = observeComposition(document2);
+    const previous = document2.activeElement;
+    const stack = layers.get(document2) ?? [];
+    layers.set(document2, stack);
+    const layer = {
+      element,
+      close: () => {
+        close.current();
+      }
+    };
+    stack.push(layer);
+    const initial = element.querySelector("[data-modal-autofocus]") ?? element.querySelector(focusable) ?? element;
+    if (!element.contains(document2.activeElement)) focusWithoutRing(initial);
+    const keydown = (event) => {
+      const composing = composition.guards(event);
+      if (stack.at(-1) !== layer || event.defaultPrevented || composing || event.ctrlKey || event.altKey || event.metaKey)
+        return;
+      if (event.key === "Escape" && !event.shiftKey) {
+        event.preventDefault();
+        if (!event.repeat) close.current();
+      }
+      if (event.key !== "Tab") return;
+      if (document2.activeElement?.closest('[role="menu"]')) return;
+      const items = [...element.querySelectorAll(focusable)].filter(
+        (item) => !item.closest("[inert], [hidden]")
+      );
+      const first = items[0] ?? element;
+      const last = items.at(-1) ?? element;
+      const atEdge = event.shiftKey ? document2.activeElement === first : document2.activeElement === last;
+      if (document2.activeElement === element || !element.contains(document2.activeElement) || atEdge) {
+        event.preventDefault();
+        const target = event.shiftKey ? last : first;
+        target.focus();
+      }
+    };
+    document2.addEventListener("keydown", keydown);
+    return () => {
+      composition.dispose();
+      const wasTop = stack.at(-1) === layer;
+      stack.splice(stack.indexOf(layer), 1);
+      document2.removeEventListener("keydown", keydown);
+      if (stack.length === 0) layers.delete(document2);
+      if (wasTop) {
+        const target = previous instanceof HTMLElement && previous.isConnected ? previous : stack.at(-1)?.element;
+        if (target !== void 0) focusWithoutRing(target);
+      }
+    };
+  }, [dialog, open]);
+}
+
+// src/MenuSurface.tsx
+import { forwardRef, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+import { createPortal } from "react-dom";
+import clsx3 from "clsx";
+
+// .build/css/MenuSurface.module.mjs
+var id3 = "@seekbuddy/dsh-ui/MenuSurface.module.css";
+if (typeof document !== "undefined" && !document.querySelector('style[data-dsh-ui-primitives="' + id3 + '"]')) {
+  const element = document.createElement("style");
+  element.setAttribute("data-dsh-ui-primitives", id3);
+  element.textContent = "._J1jQq_surface,._J1jQq_backing{border-radius:var(--dsw-radius-lg)}._J1jQq_compact{border-radius:var(--dsw-radius-md)}:where(._J1jQq_surface){position:relative}._J1jQq_surface{anchor-name:var(--dsh-menu-anchor);isolation:isolate}._J1jQq_material{z-index:-1;border-radius:inherit;background:var(--dsw-menu-surface-fill);backdrop-filter:var(--dsw-menu-backdrop-filter);pointer-events:none;position:absolute;inset:0}._J1jQq_backing{display:none}html[data-platform=darwin] ._J1jQq_backing{position-anchor:var(--dsh-menu-anchor);top:anchor(top);left:anchor(left);width:anchor-size(width, 0px);height:anchor-size(height, 0px);z-index:-1;background:var(--dsw-alias-bg-base);pointer-events:none;display:block;position:fixed}";
+  document.head.appendChild(element);
+}
+var MenuSurface_module_default = { "compact": "_J1jQq_compact", "backing": "_J1jQq_backing", "surface": "_J1jQq_surface", "material": "_J1jQq_material" };
+
+// src/MenuSurface.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var MenuSurface = forwardRef(function MenuSurface2({ compact = false, className, style, children, ...props }, ref) {
+  const id5 = useId();
+  const backingRef = useRef2(null);
+  useLayoutEffect2(() => {
+    document.body.appendChild(backingRef.current);
+  }, []);
+  const anchorStyle = {
+    "--dsh-menu-anchor": `--dsh-menu-${id5.replaceAll(":", "")}`
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ...props,
+        ref,
+        "data-menu-material": "translucent",
+        className: clsx3(MenuSurface_module_default.surface, compact && MenuSurface_module_default.compact, className),
+        style: { ...style, ...anchorStyle },
+        children: [
+          /* @__PURE__ */ jsx3("div", { "aria-hidden": "true", className: MenuSurface_module_default.material }),
+          children
+        ]
+      }
+    ),
+    createPortal(
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          ref: backingRef,
+          "aria-hidden": "true",
+          "data-menu-backing": "",
+          className: clsx3(MenuSurface_module_default.backing, compact && MenuSurface_module_default.compact),
+          style: { ...anchorStyle, visibility: style?.visibility }
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+
+// src/Menu.tsx
+import { useEffect, useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import clsx4 from "clsx";
+
+// .build/css/Menu.module.mjs
+var id4 = "@seekbuddy/dsh-ui/Menu.module.css";
+if (typeof document !== "undefined" && !document.querySelector('style[data-dsh-ui-primitives="' + id4 + '"]')) {
+  const element = document.createElement("style");
+  element.setAttribute("data-dsh-ui-primitives", id4);
+  element.textContent = '.or0wJW_root{display:inline-flex;position:relative}.or0wJW_list,.or0wJW_submenu{box-sizing:border-box;--dsw-elevation-stroke-color:var(--dsw-alias-border-l1);box-shadow:var(--dsw-elevation-prominent);--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);border:0;flex-direction:column;gap:0;padding:4px;display:flex}.or0wJW_list{z-index:100;min-width:144px;max-width:360px;position:absolute;top:calc(100% + 4px);left:0}.or0wJW_portal{z-index:1100;position:fixed;top:auto;left:auto}.or0wJW_sideTop{top:auto;bottom:calc(100% + 4px)}.or0wJW_alignEnd{left:auto;right:0}.or0wJW_scrollable{max-height:calc(100vh - 12px - max(12px, var(--dsh-frame-overlay-top,12px)))}.or0wJW_viewport{flex-direction:column;min-height:0;display:flex}.or0wJW_scrollable .or0wJW_viewport{overflow-y:auto}.or0wJW_footer{border-top:.5px solid var(--dsw-alias-border-l2);flex-direction:column;flex:none;margin-top:3px;padding-top:3px;display:flex}.or0wJW_itemWrap{position:relative}.or0wJW_item{border-radius:var(--dsw-radius-md);cursor:pointer;width:100%;min-height:34px;color:var(--dsw-alias-label-primary);text-align:left;background:0 0;border:none;align-items:center;gap:6px;padding:6px 8px;font-size:13px;line-height:20px;display:flex}.or0wJW_item:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}.or0wJW_item:focus-visible:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);outline:none}.or0wJW_denseList .or0wJW_item{min-height:30px;padding-block:4px}.or0wJW_denseList .or0wJW_label{padding-block:3px}.or0wJW_list.or0wJW_compactList,.or0wJW_submenu.or0wJW_compactList{min-width:156px;padding:4px}.or0wJW_compactList .or0wJW_item{border-radius:var(--dsw-radius-sm);gap:5px;min-height:24px;padding:2px 6px;font-size:11px;line-height:17px}.or0wJW_compactList .or0wJW_itemIcon{width:12px;height:12px}.or0wJW_compactList .or0wJW_separator{margin:2px}.or0wJW_compactList .or0wJW_label{padding:3px 6px;font-size:10px;line-height:15px}.or0wJW_item:disabled{opacity:.4;cursor:not-allowed}.or0wJW_itemIcon{width:14px;height:14px;color:var(--dsw-alias-menu-icon);flex:none;justify-content:center;align-items:center;display:inline-flex}.or0wJW_itemIcon svg,.or0wJW_check{width:14px;height:14px}.or0wJW_compactList .or0wJW_itemIcon svg,.or0wJW_compactList .or0wJW_check{width:12px;height:12px}.or0wJW_itemLabel{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.or0wJW_shortcut{flex:none;margin-inline-start:auto}.or0wJW_shortcut .or0wJW_shortcutKeys{color:var(--dsw-alias-label-caption);font-size:11px;line-height:16px}.or0wJW_check{color:var(--dsw-alias-label-primary);flex:none}.or0wJW_selected{background:0 0}.or0wJW_selectedFill{background:var(--dsw-alias-interactive-bg-hover)}.or0wJW_danger,.or0wJW_danger .or0wJW_itemIcon{color:var(--dsw-alias-state-error-primary)}.or0wJW_danger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover-danger)}.or0wJW_danger:focus-visible:not(:disabled){background:var(--dsw-alias-interactive-bg-hover-danger);outline:none}.or0wJW_label{color:var(--dsw-alias-label-tertiary);padding:6px 8px;font-size:11px;line-height:15px}.or0wJW_separator{background:var(--dsw-alias-border-l2);height:.5px;margin:3px 2px}.or0wJW_separator+.or0wJW_separator,.or0wJW_separator+.or0wJW_itemWrap>.or0wJW_separator:first-child,.or0wJW_itemWrap:first-child>.or0wJW_separator:first-child{display:none}.or0wJW_submenu{z-index:101;min-width:163px;position:absolute;top:auto;bottom:-4px;left:calc(100% + 10px)}.or0wJW_submenu:before{content:"";width:10px;position:absolute;top:0;bottom:0;left:-10px}';
+  document.head.appendChild(element);
+}
+var Menu_module_default = { "list": "or0wJW_list", "submenu": "or0wJW_submenu", "viewport": "or0wJW_viewport", "footer": "or0wJW_footer", "shortcut": "or0wJW_shortcut", "selected": "or0wJW_selected", "scrollable": "or0wJW_scrollable", "itemLabel": "or0wJW_itemLabel", "shortcutKeys": "or0wJW_shortcutKeys", "item": "or0wJW_item", "compactList": "or0wJW_compactList", "itemIcon": "or0wJW_itemIcon", "alignEnd": "or0wJW_alignEnd", "check": "or0wJW_check", "portal": "or0wJW_portal", "sideTop": "or0wJW_sideTop", "label": "or0wJW_label", "separator": "or0wJW_separator", "root": "or0wJW_root", "denseList": "or0wJW_denseList", "selectedFill": "or0wJW_selectedFill", "itemWrap": "or0wJW_itemWrap", "danger": "or0wJW_danger" };
+
+// src/Menu.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function MenuItemButton({
+  children,
+  shortcut,
+  icon,
+  disabled = false,
+  danger = false,
+  separatorBefore = false,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: Menu_module_default.itemWrap, children: [
+    separatorBefore && /* @__PURE__ */ jsx4("div", { className: Menu_module_default.separator, role: "separator" }),
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        className: clsx4(Menu_module_default.item, danger && Menu_module_default.danger),
+        disabled,
+        "aria-keyshortcuts": shortcut?.aria,
+        onClick: onSelect,
+        children: [
+          icon !== void 0 && /* @__PURE__ */ jsx4("span", { className: Menu_module_default.itemIcon, children: icon }),
+          /* @__PURE__ */ jsx4("span", { className: Menu_module_default.itemLabel, children }),
+          shortcut !== void 0 && /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: Menu_module_default.shortcut, children: /* @__PURE__ */ jsx4(ShortcutKeys, { keys: shortcut.keys, className: Menu_module_default.shortcutKeys }) })
+        ]
+      }
+    )
+  ] });
+}
+function isSeparator(entry) {
+  return "type" in entry && entry.type === "separator";
+}
+function isLabel(entry) {
+  return "type" in entry && entry.type === "label";
+}
+var MEASURE_STYLE = { visibility: "hidden", left: 0, top: 0 };
+function Menu({
+  open,
+  anchor,
+  items = [],
+  children,
+  selectedId,
+  selectedIds,
+  onSelect,
+  onClose,
+  align = "start",
+  side = "bottom",
+  portal = false,
+  closeOnPointerLeave = false,
+  dense = false,
+  compact = false,
+  autoFocus = false,
+  selection = "check",
+  getAnchorRect,
+  footer,
+  className,
+  listClassName
+}) {
+  const rootRef = useRef3(null);
+  const listRef = useRef3(null);
+  const walkIndex = useRef3(null);
+  const triggerRef = useRef3(null);
+  const selectingWithTab = useRef3(false);
+  const refocusAnchor = (navigation = false) => {
+    const trigger = triggerRef.current;
+    const target = trigger !== null && document.contains(trigger) && !trigger.disabled ? trigger : rootRef.current?.querySelector("button:not(:disabled)");
+    if (target == null) return;
+    if (navigation) target.focus();
+    else focusWithoutRing(target);
+  };
+  const refocusAfterSelection = () => {
+    const navigation = selectingWithTab.current;
+    queueMicrotask(() => {
+      if (openRef.current) return;
+      const active = document.activeElement;
+      if (active === null || active === document.body || listRef.current?.contains(active) === true)
+        refocusAnchor(navigation);
+    });
+  };
+  const openRef = useRef3(open);
+  openRef.current = open;
+  const [openSubmenuId, setOpenSubmenuId] = useState(null);
+  const [fixedPos, setFixedPos] = useState(null);
+  const { arm: armClose, cancel: cancelClose } = usePointerGrace(onClose);
+  useLayoutEffect3(() => {
+    if (!open || !portal) {
+      setFixedPos(null);
+      return;
+    }
+    const place = () => {
+      let r;
+      if (getAnchorRect !== void 0) {
+        r = getAnchorRect();
+      } else {
+        r = rootRef.current?.getBoundingClientRect() ?? null;
+      }
+      if (r === null) return;
+      const MARGIN = 12;
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const listEl = listRef.current;
+      const lw = listEl?.offsetWidth ?? 0;
+      const lh = listEl?.offsetHeight ?? 0;
+      let x;
+      let y;
+      if (side === "right") {
+        x = r.right + 4;
+        y = r.top;
+      } else if (align === "start") {
+        x = r.left;
+        y = side === "bottom" ? r.bottom + 4 : r.top - lh - 4;
+      } else {
+        x = r.right - lw;
+        y = side === "bottom" ? r.bottom + 4 : r.top - lh - 4;
+      }
+      if (lw > 0) x = Math.min(Math.max(x, MARGIN), vw - lw - MARGIN);
+      if (lh > 0) y = Math.min(Math.max(y, overlayTopMargin(MARGIN)), vh - lh - MARGIN);
+      setFixedPos((current) => current?.left === x && current.top === y ? current : { left: x, top: y });
+    };
+    place();
+    const track = () => {
+      place();
+      frame = requestAnimationFrame(track);
+    };
+    let frame = requestAnimationFrame(track);
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", place, true);
+      window.removeEventListener("resize", place);
+    };
+  }, [open, portal, align, side, getAnchorRect]);
+  useEffect(() => {
+    if (!open) {
+      triggerRef.current = null;
+      return;
+    }
+    const active = document.activeElement;
+    triggerRef.current = active instanceof HTMLElement && rootRef.current?.contains(active) === true ? active : null;
+  }, [open]);
+  useEffect(() => {
+    if (!open || !autoFocus) return;
+    const first = listRef.current?.querySelector("button:not(:disabled)");
+    walkIndex.current = first === void 0 || first === null ? null : 0;
+    if (first != null) focusWithoutRing(first);
+  }, [open, autoFocus]);
+  useEffect(() => {
+    if (!open) {
+      setOpenSubmenuId(null);
+      walkIndex.current = null;
+      return;
+    }
+    const composition = observeComposition(document);
+    const onPointerDown = (e) => {
+      if (!(e.target instanceof Node)) return;
+      if (rootRef.current?.contains(e.target) === true) return;
+      if (listRef.current?.contains(e.target) === true) return;
+      onClose();
+    };
+    const onKeyDown = (e) => {
+      if (composition.guards(e) || isBehindModal(rootRef.current) || e.defaultPrevented || e.ctrlKey || e.altKey || e.metaKey)
+        return;
+      const focused = document.activeElement;
+      const insideList = listRef.current?.contains(focused) === true;
+      const anchored = rootRef.current?.contains(focused) === true || insideList;
+      if (e.key === "Escape" && !e.shiftKey) {
+        e.preventDefault();
+        if (e.repeat) return;
+        onClose();
+        if (anchored || autoFocus) refocusAnchor();
+      }
+      if (e.key === "Tab") {
+        const list3 = listRef.current;
+        if (list3 === null || !anchored) return;
+        if (e.shiftKey) {
+          e.preventDefault();
+          onClose();
+          refocusAnchor(true);
+          return;
+        }
+        if (insideList) {
+          if (focused instanceof Element && focused.getAttribute("role") === "menuitem") {
+            e.preventDefault();
+            selectingWithTab.current = true;
+            try {
+              ;
+              focused.click();
+            } finally {
+              selectingWithTab.current = false;
+            }
+          }
+          return;
+        }
+        const row = list3.querySelector("button:not(:disabled)");
+        if (row === null) return;
+        e.preventDefault();
+        row.focus();
+        walkIndex.current = 0;
+        return;
+      }
+      if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return;
+      const list2 = listRef.current;
+      if (list2 === null || !anchored) return;
+      const buttons = Array.from(list2.querySelectorAll("button:not(:disabled)"));
+      if (buttons.length === 0) return;
+      const index = buttons.indexOf(focused);
+      const from = index >= 0 ? index : walkIndex.current;
+      const next = e.key === "Home" ? 0 : e.key === "End" ? buttons.length - 1 : from === null ? e.key === "ArrowDown" ? 0 : buttons.length - 1 : (from + (e.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length;
+      e.preventDefault();
+      walkIndex.current = next;
+      buttons[next]?.focus();
+    };
+    const onWindowBlur = () => {
+      if (document.activeElement instanceof HTMLIFrameElement) onClose();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    const onEscape = (event) => {
+      if (event.key === "Escape") onKeyDown(event);
+    };
+    const onOtherKey = (event) => {
+      if (event.key !== "Escape") onKeyDown(event);
+    };
+    document.addEventListener("keydown", onOtherKey);
+    document.addEventListener("keydown", onEscape, true);
+    window.addEventListener("blur", onWindowBlur);
+    return () => {
+      composition.dispose();
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onOtherKey);
+      document.removeEventListener("keydown", onEscape, true);
+      window.removeEventListener("blur", onWindowBlur);
+    };
+  }, [open, onClose, autoFocus]);
+  useEffect(() => {
+    if (!open) cancelClose();
+  }, [open, cancelClose]);
+  const scrollable = !items.some(
+    (entry) => !isSeparator(entry) && !isLabel(entry) && entry.submenu !== void 0 && entry.submenu.length > 0
+  );
+  const renderEntry = (entry) => {
+    if (isSeparator(entry)) {
+      return /* @__PURE__ */ jsx4("div", { className: Menu_module_default.separator, role: "separator" }, entry.id);
+    }
+    if (isLabel(entry)) {
+      return /* @__PURE__ */ jsx4("div", { className: Menu_module_default.label, role: "presentation", children: entry.text }, entry.id);
+    }
+    const hasSub = entry.submenu !== void 0 && entry.submenu.length > 0;
+    const subOpen = hasSub && openSubmenuId === entry.id;
+    const selected = entry.id === selectedId || selectedIds?.includes(entry.id) === true;
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: Menu_module_default.itemWrap,
+        onMouseEnter: hasSub ? () => {
+          setOpenSubmenuId(entry.id);
+        } : void 0,
+        onMouseLeave: () => {
+          setOpenSubmenuId(null);
+        },
+        children: [
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: clsx4(
+                Menu_module_default.item,
+                selected && (selection === "fill" ? Menu_module_default.selectedFill : Menu_module_default.selected),
+                entry.danger === true && Menu_module_default.danger
+              ),
+              disabled: entry.disabled,
+              "aria-keyshortcuts": entry.shortcut?.aria,
+              "aria-haspopup": hasSub ? "menu" : void 0,
+              "aria-expanded": hasSub ? subOpen : void 0,
+              onFocus: hasSub ? () => {
+                setOpenSubmenuId(entry.id);
+              } : void 0,
+              onClick: () => {
+                if (hasSub) {
+                  setOpenSubmenuId(entry.id);
+                  return;
+                }
+                onSelect?.(entry.id);
+              },
+              children: [
+                entry.icon !== void 0 && /* @__PURE__ */ jsx4("span", { className: Menu_module_default.itemIcon, children: entry.icon }),
+                /* @__PURE__ */ jsx4("span", { className: Menu_module_default.itemLabel, children: entry.label }),
+                entry.shortcut !== void 0 && /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: Menu_module_default.shortcut, children: /* @__PURE__ */ jsx4(ShortcutKeys, { keys: entry.shortcut.keys, className: Menu_module_default.shortcutKeys }) }),
+                selected && selection === "check" && /* @__PURE__ */ jsx4(IconCheckOutlineRegular, { className: Menu_module_default.check })
+              ]
+            }
+          ),
+          subOpen && entry.submenu !== void 0 && /* @__PURE__ */ jsx4(MenuSurface, { compact, className: clsx4(Menu_module_default.submenu, compact && Menu_module_default.compactList), role: "menu", children: entry.submenu.map((sub) => /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: Menu_module_default.item,
+              disabled: sub.disabled,
+              "aria-keyshortcuts": sub.shortcut?.aria,
+              onClick: () => {
+                onSelect?.(sub.id);
+                refocusAfterSelection();
+              },
+              children: [
+                sub.icon !== void 0 && /* @__PURE__ */ jsx4("span", { className: Menu_module_default.itemIcon, children: sub.icon }),
+                /* @__PURE__ */ jsx4("span", { className: Menu_module_default.itemLabel, children: sub.label }),
+                sub.shortcut !== void 0 && /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: Menu_module_default.shortcut, children: /* @__PURE__ */ jsx4(ShortcutKeys, { keys: sub.shortcut.keys, className: Menu_module_default.shortcutKeys }) })
+              ]
+            },
+            sub.id
+          )) })
+        ]
+      },
+      entry.id
+    );
+  };
+  const collapseSubmenuFrom = (e) => {
+    const row = e.target instanceof Element ? e.target.closest('button[role="menuitem"]') : null;
+    if (row === null || row.getAttribute("aria-haspopup") === "menu") return;
+    if (row.closest('[role="menu"]') !== e.currentTarget) return;
+    setOpenSubmenuId(null);
+  };
+  const list = open && /* @__PURE__ */ jsxs3(
+    MenuSurface,
+    {
+      compact,
+      ref: listRef,
+      className: clsx4(
+        Menu_module_default.list,
+        listClassName,
+        dense && Menu_module_default.denseList,
+        compact && Menu_module_default.compactList,
+        scrollable && Menu_module_default.scrollable,
+        portal && Menu_module_default.portal,
+        side === "top" && !portal && Menu_module_default.sideTop,
+        align === "end" && !portal && Menu_module_default.alignEnd
+      ),
+      style: portal ? fixedPos ?? MEASURE_STYLE : void 0,
+      role: "menu",
+      onClick: (e) => {
+        e.stopPropagation();
+        const row = e.target instanceof Element ? e.target.closest('button[role="menuitem"]') : null;
+        if (row !== null && row.getAttribute("aria-haspopup") !== "menu") refocusAfterSelection();
+      },
+      onMouseOver: collapseSubmenuFrom,
+      onFocus: collapseSubmenuFrom,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: Menu_module_default.viewport, role: "presentation", children: [
+          items.map(renderEntry),
+          children
+        ] }),
+        footer !== void 0 && footer.length > 0 && /* @__PURE__ */ jsx4("div", { className: Menu_module_default.footer, role: "presentation", children: footer.map(renderEntry) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    {
+      ref: rootRef,
+      className: clsx4(Menu_module_default.root, className),
+      onPointerEnter: closeOnPointerLeave ? cancelClose : void 0,
+      onPointerLeave: closeOnPointerLeave ? () => {
+        if (open) armClose();
+      } : void 0,
+      children: [
+        anchor,
+        portal ? list !== false && createPortal2(list, document.body) : list
+      ]
+    }
+  );
+}
+
+export {
+  StateDot,
+  Pill,
+  observeComposition,
+  focusWithoutRing,
+  modalSelector,
+  closeTopModal,
+  isBehindModal,
+  useModalLayer,
+  MenuSurface,
+  MenuItemButton,
+  Menu
+};