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

package/dist/chunks/chunk-YOBY6PSL.js

@@ -0,0 +1,850 @@
+import {
+  ShortcutKeys,
+  Tooltip,
+  overlayTopMargin,
+  usePointerGrace,
+  writeClipboard
+} from "./chunk-JA3XDLIA.js";
+import {
+  IconCheckOutlineRegular
+} from "./chunk-XW4L4ZGL.js";
+
+// src/Pill.tsx
+import clsx from "clsx";
+
+// .build/css/Pill.module.mjs
+var id = "@seekbuddy/dsh-ui/Pill.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 = ".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}@media (hover:hover){.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 = { "active": "c2tx2W_active", "interactive": "c2tx2W_interactive", "pill": "c2tx2W_pill" };
+
+// src/Pill.tsx
+import { jsx } from "react/jsx-runtime";
+function Pill({
+  active = false,
+  className,
+  children,
+  onClick,
+  ...rest
+}) {
+  if (!onClick) {
+    return /* @__PURE__ */ jsx("span", { className: clsx(Pill_module_default.pill, active && Pill_module_default.active, className), children });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: clsx(Pill_module_default.pill, Pill_module_default.interactive, active && Pill_module_default.active, className),
+      onClick,
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/useAnchoredPosition.ts
+import { useLayoutEffect, useState } from "react";
+function useAnchoredPosition(options) {
+  const {
+    open,
+    anchorRef,
+    panelRef,
+    side = "bottom",
+    align = "start",
+    gap,
+    margin,
+    getAnchorRect,
+    layoutKey,
+    minWidthFromAnchor = false,
+    frameClearance = true
+  } = options;
+  const [position, setPosition] = useState(null);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPosition(null);
+      return;
+    }
+    const anchor = anchorRef.current;
+    const panel = panelRef.current;
+    if (anchor === null || panel === null) return;
+    const win = anchor.ownerDocument.defaultView;
+    if (win === null) return;
+    const viewport = win.visualViewport;
+    const visualOrigin = typeof win.CSS !== "undefined" && win.CSS.supports("-webkit-backdrop-filter", "none");
+    const properties = [
+      "--dsh-anchored-max-width",
+      "--dsh-anchored-max-height",
+      ...minWidthFromAnchor ? ["min-width"] : []
+    ];
+    const previous = properties.map(
+      (name) => [name, panel.style.getPropertyValue(name), panel.style.getPropertyPriority(name)]
+    );
+    let active = true;
+    let lastRect = null;
+    const readRect = () => getAnchorRect === void 0 ? anchor.getBoundingClientRect() : getAnchorRect();
+    const place = (rect) => {
+      lastRect = rect === null ? null : { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+      let next = null;
+      if (rect !== null) {
+        const x = viewport?.offsetLeft ?? 0;
+        const y = viewport?.offsetTop ?? 0;
+        const width = viewport?.width ?? (anchor.ownerDocument.documentElement.clientWidth || win.innerWidth);
+        const height = viewport?.height ?? (anchor.ownerDocument.documentElement.clientHeight || win.innerHeight);
+        const topMargin = frameClearance ? overlayTopMargin(margin, rect, gap) : margin;
+        const maxWidth = Math.max(0, width - margin * 2);
+        panel.style.setProperty("--dsh-anchored-max-width", `${maxWidth}px`);
+        panel.style.setProperty("--dsh-anchored-max-height", `${Math.max(0, height - topMargin - margin)}px`);
+        if (minWidthFromAnchor) panel.style.minWidth = `${Math.min(rect.width, maxWidth)}px`;
+        const panelWidth = panel.offsetWidth;
+        const panelHeight = panel.offsetHeight;
+        const offsetX = visualOrigin ? x : 0;
+        const offsetY = visualOrigin ? y : 0;
+        const left = offsetX + (side === "right" ? rect.right + gap : align === "end" ? rect.right - panelWidth : rect.left);
+        const top = offsetY + (side === "right" ? rect.top : side === "top" ? rect.top - gap - panelHeight : rect.bottom + gap);
+        next = {
+          left: Math.max(x + margin, Math.min(left, x + width - margin - panelWidth)),
+          top: Math.max(y + topMargin, Math.min(top, y + height - margin - panelHeight))
+        };
+      }
+      setPosition((current) => current?.left === next?.left && current?.top === next?.top ? current : next);
+    };
+    const update = () => {
+      if (!active) return;
+      place(readRect());
+    };
+    update();
+    win.addEventListener("scroll", update, true);
+    win.addEventListener("resize", update);
+    viewport?.addEventListener("scroll", update);
+    viewport?.addEventListener("resize", update);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(anchor);
+    observer?.observe(panel);
+    let frame = 0;
+    const track = () => {
+      if (!active) return;
+      const rect = readRect();
+      if (rect?.x !== lastRect?.x || rect?.y !== lastRect?.y || rect?.width !== lastRect?.width || rect?.height !== lastRect?.height)
+        place(rect);
+      frame = win.requestAnimationFrame(track);
+    };
+    frame = win.requestAnimationFrame(track);
+    return () => {
+      active = false;
+      win.cancelAnimationFrame(frame);
+      observer?.disconnect();
+      win.removeEventListener("scroll", update, true);
+      win.removeEventListener("resize", update);
+      viewport?.removeEventListener("scroll", update);
+      viewport?.removeEventListener("resize", update);
+      for (const [name, value, priority] of previous) panel.style.setProperty(name, value, priority);
+    };
+  }, [
+    open,
+    anchorRef,
+    panelRef,
+    side,
+    align,
+    gap,
+    margin,
+    getAnchorRect,
+    layoutKey,
+    minWidthFromAnchor,
+    frameClearance
+  ]);
+  return position;
+}
+
+// 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"]);
+var mobileDevice;
+function isMobileDevice() {
+  if (mobileDevice !== void 0) return mobileDevice;
+  const { userAgent, platform, maxTouchPoints } = navigator;
+  mobileDevice = /Android|iPhone|iPad|iPod/i.test(userAgent) || platform === "MacIntel" && maxTouchPoints > 1;
+  return mobileDevice;
+}
+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 as useLayoutEffect2, 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);
+  const pendingRestore = useRef(void 0);
+  close.current = onClose;
+  useLayoutEffect2(() => {
+    const target = pendingRestore.current;
+    pendingRestore.current = void 0;
+    const element = dialog.current;
+    if (!open && element?.contains(element.ownerDocument.activeElement) && target?.isConnected && !target.closest("[inert], [hidden]") && !isBehindModal(target)) {
+      focusWithoutRing(target, { preventScroll: true });
+    }
+    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 target2 = event.shiftKey ? last : first;
+        target2.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 target2 = previous instanceof HTMLElement && previous.isConnected ? previous : stack.at(-1)?.element;
+        if (target2 !== void 0) {
+          pendingRestore.current = target2;
+          focusWithoutRing(target2);
+        }
+      }
+    };
+  }, [dialog, open]);
+}
+
+// src/MenuSurface.tsx
+import { forwardRef, useId, useLayoutEffect as useLayoutEffect3, useRef as useRef2 } from "react";
+import { createPortal } from "react-dom";
+import clsx2 from "clsx";
+
+// .build/css/MenuSurface.module.mjs
+var id2 = "@seekbuddy/dsh-ui/MenuSurface.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 = "._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}._J1jQq_surface[data-menu-phase=enter]>*,._J1jQq_backing[data-menu-phase=enter]{animation:_J1jQq_dsh-context-menu-in var(--dsh-menu-enter) ease-out}._J1jQq_surface[data-menu-phase=dismiss]>*,._J1jQq_backing[data-menu-phase=dismiss],._J1jQq_surface[data-menu-phase=replace]>*,._J1jQq_backing[data-menu-phase=replace]{animation:_J1jQq_dsh-context-menu-out var(--dsh-menu-dismiss) ease-in both}._J1jQq_surface[data-menu-phase=replace]>*,._J1jQq_backing[data-menu-phase=replace]{animation-duration:var(--dsh-menu-replace)}@keyframes _J1jQq_dsh-context-menu-in{0%{opacity:0}to{opacity:1}}@keyframes _J1jQq_dsh-context-menu-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){._J1jQq_surface[data-menu-phase]>*,._J1jQq_backing[data-menu-phase]{animation-duration:0s}}";
+  document.head.appendChild(element);
+}
+var MenuSurface_module_default = { "surface": "_J1jQq_surface", "backing": "_J1jQq_backing", "compact": "_J1jQq_compact", "material": "_J1jQq_material", "dsh-context-menu-in": "_J1jQq_dsh-context-menu-in", "dsh-context-menu-out": "_J1jQq_dsh-context-menu-out" };
+
+// src/MenuSurface.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var MENU_TRANSITION_MS = Object.freeze({ enter: 40, dismiss: 80, replace: 10, prepare: 20 });
+var MenuSurface = forwardRef(function MenuSurface2({ compact = false, phase, className, style, children, ...props }, ref) {
+  const id4 = useId();
+  const backingRef = useRef2(null);
+  useLayoutEffect3(() => {
+    document.body.appendChild(backingRef.current);
+  }, []);
+  const anchorStyle = {
+    "--dsh-menu-anchor": `--dsh-menu-${id4.replaceAll(":", "")}`,
+    "--dsh-menu-enter": `${MENU_TRANSITION_MS.enter}ms`,
+    "--dsh-menu-dismiss": `${MENU_TRANSITION_MS.dismiss}ms`,
+    "--dsh-menu-replace": `${MENU_TRANSITION_MS.replace}ms`
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref,
+        "data-menu-material": "translucent",
+        "data-menu-phase": phase,
+        className: clsx2(MenuSurface_module_default.surface, compact && MenuSurface_module_default.compact, className),
+        style: { ...style, ...anchorStyle },
+        children: [
+          /* @__PURE__ */ jsx2("div", { "aria-hidden": "true", className: MenuSurface_module_default.material }),
+          children
+        ]
+      }
+    ),
+    createPortal(
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ref: backingRef,
+          "aria-hidden": "true",
+          "data-menu-backing": "",
+          "data-menu-phase": phase,
+          className: clsx2(MenuSurface_module_default.backing, compact && MenuSurface_module_default.compact),
+          style: { ...anchorStyle, visibility: style?.visibility }
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+
+// src/Menu.tsx
+import { useCallback, useEffect, useId as useId2, useLayoutEffect as useLayoutEffect4, useRef as useRef3, useState as useState2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import clsx3 from "clsx";
+
+// .build/css/Menu.module.mjs
+var id3 = "@seekbuddy/dsh-ui/Menu.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 = '.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:min(144px, var(--dsh-anchored-max-width,100vw));max-width:min(360px, var(--dsh-anchored-max-width,100vw));position:absolute;top:calc(100% + 4px);left:0}.or0wJW_list[data-context-menu]:not(:has([role=menuitem])){display:none}.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:min(calc(100vh - 12px - max(12px, var(--dsh-frame-overlay-top,12px))), var(--dsh-anchored-max-height,100vh));max-height:min(calc(100dvh - 12px - max(12px, var(--dsh-frame-overlay-top,12px))), var(--dsh-anchored-max-height,100vh))}.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_list[data-context-menu] .or0wJW_footer:has(>.or0wJW_separator:first-child){border-top:none;margin-top:0;padding-top:0}.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}@media (hover:hover){.or0wJW_item:hover:not(:disabled):not([aria-disabled=true]){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:min(156px, var(--dsh-anchored-max-width,100vw));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 6px}.or0wJW_compactList .or0wJW_label{padding:3px 6px;font-size:10px;line-height:15px}.or0wJW_item:disabled,.or0wJW_item[aria-disabled=true]{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}@media (pointer:coarse){html:not([data-input-modality=keyboard]) .or0wJW_shortcut{display:none}}.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)}@media (hover:hover){.or0wJW_danger:hover:not(:disabled):not([aria-disabled=true]){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 8px}.or0wJW_separator+.or0wJW_separator,.or0wJW_separator+.or0wJW_itemWrap>.or0wJW_separator:first-child,.or0wJW_itemWrap:first-child>.or0wJW_separator:first-child{display:none}.or0wJW_list[data-context-menu] .or0wJW_viewport>.or0wJW_itemWrap~[data-slot] .or0wJW_itemWrap:first-child>.or0wJW_separator:first-child{display:block}.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}.or0wJW_list[data-menu-phase=dismiss],.or0wJW_list[data-menu-phase=replace]{pointer-events:none}.or0wJW_list[data-context-menu].or0wJW_scrollable{max-height:min(calc(100vh - 24px), var(--dsh-anchored-max-height,100vh));max-height:min(calc(100dvh - 24px), var(--dsh-anchored-max-height,100vh))}';
+  document.head.appendChild(element);
+}
+var Menu_module_default = { "viewport": "or0wJW_viewport", "sideTop": "or0wJW_sideTop", "item": "or0wJW_item", "list": "or0wJW_list", "label": "or0wJW_label", "scrollable": "or0wJW_scrollable", "root": "or0wJW_root", "check": "or0wJW_check", "compactList": "or0wJW_compactList", "submenu": "or0wJW_submenu", "selected": "or0wJW_selected", "separator": "or0wJW_separator", "footer": "or0wJW_footer", "itemWrap": "or0wJW_itemWrap", "denseList": "or0wJW_denseList", "itemIcon": "or0wJW_itemIcon", "itemLabel": "or0wJW_itemLabel", "shortcut": "or0wJW_shortcut", "portal": "or0wJW_portal", "selectedFill": "or0wJW_selectedFill", "alignEnd": "or0wJW_alignEnd", "shortcutKeys": "or0wJW_shortcutKeys", "danger": "or0wJW_danger" };
+
+// src/Menu.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function MenuItemButton({
+  children,
+  shortcut,
+  icon,
+  current,
+  disabled = false,
+  disabledReason,
+  danger = false,
+  separatorBefore = false,
+  onSelect
+}) {
+  const reasonId = useId2();
+  const explained = disabled && disabledReason !== void 0;
+  return /* @__PURE__ */ jsxs2("div", { className: Menu_module_default.itemWrap, children: [
+    separatorBefore && /* @__PURE__ */ jsx3("div", { className: Menu_module_default.separator, role: "separator" }),
+    /* @__PURE__ */ jsx3(Tooltip, { label: disabledReason ?? "", disabled: !explained, side: "bottom", delayMs: 500, maxWidth: 300, portal: true, children: /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        className: clsx3(Menu_module_default.item, danger && Menu_module_default.danger),
+        disabled: disabled && !explained,
+        "aria-disabled": explained || void 0,
+        "aria-describedby": explained ? reasonId : void 0,
+        "aria-keyshortcuts": shortcut?.aria,
+        "aria-current": current === true ? "page" : void 0,
+        onClick: explained ? void 0 : onSelect,
+        children: [
+          icon !== void 0 && /* @__PURE__ */ jsx3("span", { className: Menu_module_default.itemIcon, children: icon }),
+          /* @__PURE__ */ jsx3("span", { className: Menu_module_default.itemLabel, children }),
+          shortcut !== void 0 && /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: Menu_module_default.shortcut, children: /* @__PURE__ */ jsx3(ShortcutKeys, { keys: shortcut.keys, className: Menu_module_default.shortcutKeys }) })
+        ]
+      }
+    ) }),
+    explained && /* @__PURE__ */ jsx3("span", { id: reasonId, hidden: true, children: disabledReason })
+  ] });
+}
+function isSeparator(entry) {
+  return "type" in entry && entry.type === "separator";
+}
+function isLabel(entry) {
+  return "type" in entry && entry.type === "label";
+}
+function iconColumns(entries, contextual) {
+  const aligned = /* @__PURE__ */ new Set();
+  if (!contextual) return aligned;
+  let group = [];
+  const finish = () => {
+    if (group.some((entry) => !isLabel(entry) && !isSeparator(entry) && entry.icon !== void 0)) {
+      for (const entry of group) aligned.add(entry);
+    }
+    group = [];
+  };
+  for (const entry of entries) {
+    if (isSeparator(entry)) finish();
+    else group.push(entry);
+  }
+  finish();
+  return aligned;
+}
+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,
+  minWidthFromAnchor = false,
+  footer,
+  className,
+  listClassName,
+  contextual = false,
+  exiting,
+  returnFocus
+}) {
+  const rootRef = useRef3(null);
+  const listRef = useRef3(null);
+  const menuId = useId2();
+  useLayoutEffect4(() => {
+    const trigger = returnFocus?.();
+    if (!open || !contextual || trigger == null) return;
+    const previous = trigger.getAttribute("aria-controls");
+    trigger.setAttribute("aria-controls", [previous, menuId].filter(Boolean).join(" "));
+    return () => {
+      if (previous === null) trigger.removeAttribute("aria-controls");
+      else trigger.setAttribute("aria-controls", previous);
+    };
+  }, [open, contextual, returnFocus, menuId]);
+  const walkIndex = useRef3(null);
+  const triggerRef = useRef3(null);
+  const selectingWithTab = useRef3(false);
+  const refocusAnchor = (navigation = false) => {
+    const trigger = returnFocus?.() ?? 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 && exitingRef.current === void 0) return;
+      const active = document.activeElement;
+      if (active === null || active === document.body || listRef.current?.contains(active) === true)
+        refocusAnchor(navigation);
+    });
+  };
+  const exitingRef = useRef3(exiting);
+  exitingRef.current = exiting;
+  const openRef = useRef3(open);
+  openRef.current = open;
+  const [openSubmenuId, setOpenSubmenuId] = useState2(null);
+  const close = useRef3(onClose);
+  close.current = onClose;
+  const lastAnchorRect = useRef3(null);
+  const readAnchor = useCallback(() => {
+    const anchorElement = returnFocus?.() ?? rootRef.current;
+    if (anchorElement?.closest("[inert], [hidden]") != null) {
+      if (exitingRef.current === void 0) close.current();
+      return lastAnchorRect.current;
+    }
+    lastAnchorRect.current = getAnchorRect === void 0 ? rootRef.current?.getBoundingClientRect() ?? null : getAnchorRect();
+    return lastAnchorRect.current;
+  }, [getAnchorRect, returnFocus]);
+  const fixedPos = useAnchoredPosition({
+    open: open && portal,
+    anchorRef: rootRef,
+    panelRef: listRef,
+    side,
+    align,
+    gap: 4,
+    margin: 12,
+    frameClearance: !contextual,
+    minWidthFromAnchor,
+    getAnchorRect: readAnchor
+  });
+  const positioned = !portal || fixedPos !== null;
+  const { arm: armClose, cancel: cancelClose } = usePointerGrace(onClose);
+  useEffect(() => {
+    if (!open) return;
+    const active = document.activeElement;
+    triggerRef.current = active instanceof HTMLElement && (getAnchorRect !== void 0 || rootRef.current?.contains(active) === true) ? active : null;
+  }, [open]);
+  useEffect(() => {
+    if (!open || exiting !== void 0 || !autoFocus || !positioned || listRef.current?.contains(document.activeElement))
+      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, items.length, footer?.length, positioned, exiting]);
+  useEffect(() => {
+    if (!open || exiting !== void 0) {
+      setOpenSubmenuId(null);
+      walkIndex.current = null;
+      return;
+    }
+    const composition = observeComposition(document);
+    const onPointerDown = (e) => {
+      if (!(e.target instanceof Node) || contextual && e.button === 2) 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(triggerRef.current ?? rootRef.current) || e.defaultPrevented || e.ctrlKey || e.altKey || e.metaKey)
+        return;
+      const focused = document.activeElement;
+      const insideList = listRef.current?.contains(focused) === true;
+      const anchored = focused === returnFocus?.() || 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();
+            if (focused.getAttribute("aria-disabled") === "true") {
+              onClose();
+              refocusAnchor(true);
+              return;
+            }
+            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, contextual, exiting]);
+  useLayoutEffect4(() => {
+    if (exiting === "dismiss" && listRef.current?.contains(document.activeElement)) refocusAnchor();
+  }, [exiting]);
+  useEffect(() => {
+    if (!open) cancelClose();
+  }, [open, cancelClose]);
+  const scrollable = !items.some(
+    (entry) => !isSeparator(entry) && !isLabel(entry) && entry.submenu !== void 0 && entry.submenu.length > 0
+  );
+  const itemColumns = iconColumns(items, contextual);
+  const footerColumns = iconColumns(footer ?? [], contextual);
+  const renderEntry = (entry, columns) => {
+    if (isSeparator(entry)) {
+      return /* @__PURE__ */ jsx3("div", { className: Menu_module_default.separator, role: "separator" }, entry.id);
+    }
+    if (isLabel(entry)) {
+      return /* @__PURE__ */ jsx3("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 subColumns = iconColumns(entry.submenu ?? [], contextual);
+    const selected = entry.id === selectedId || selectedIds?.includes(entry.id) === true;
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: Menu_module_default.itemWrap,
+        onMouseEnter: hasSub ? () => {
+          setOpenSubmenuId(entry.id);
+        } : void 0,
+        onMouseLeave: () => {
+          setOpenSubmenuId(null);
+        },
+        children: [
+          /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: clsx3(
+                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 || columns.has(entry)) && /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: Menu_module_default.itemIcon, children: entry.icon }),
+                /* @__PURE__ */ jsx3("span", { className: Menu_module_default.itemLabel, children: entry.label }),
+                entry.shortcut !== void 0 && /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: Menu_module_default.shortcut, children: /* @__PURE__ */ jsx3(ShortcutKeys, { keys: entry.shortcut.keys, className: Menu_module_default.shortcutKeys }) }),
+                selected && selection === "check" && /* @__PURE__ */ jsx3(IconCheckOutlineRegular, { className: Menu_module_default.check })
+              ]
+            }
+          ),
+          subOpen && entry.submenu !== void 0 && /* @__PURE__ */ jsx3(MenuSurface, { compact, className: clsx3(Menu_module_default.submenu, compact && Menu_module_default.compactList), role: "menu", children: entry.submenu.map(
+            (sub) => isSeparator(sub) ? /* @__PURE__ */ jsx3("div", { className: Menu_module_default.separator, role: "separator" }, sub.id) : isLabel(sub) ? /* @__PURE__ */ jsx3("div", { className: Menu_module_default.label, children: sub.text }, sub.id) : /* @__PURE__ */ jsxs2(
+              "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 || subColumns.has(sub)) && /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: Menu_module_default.itemIcon, children: sub.icon }),
+                  /* @__PURE__ */ jsx3("span", { className: Menu_module_default.itemLabel, children: sub.label }),
+                  sub.shortcut !== void 0 && /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: Menu_module_default.shortcut, children: /* @__PURE__ */ jsx3(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__ */ jsxs2(
+    MenuSurface,
+    {
+      compact,
+      id: contextual ? menuId : void 0,
+      ref: listRef,
+      className: clsx3(
+        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: exiting === void 0 ? "menu" : void 0,
+      "aria-hidden": exiting === void 0 ? void 0 : true,
+      "data-context-menu": contextual ? "" : void 0,
+      phase: contextual ? exiting ?? "enter" : void 0,
+      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();
+      },
+      onContextMenu: contextual ? (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onClose();
+      } : void 0,
+      onMouseOver: collapseSubmenuFrom,
+      onFocus: collapseSubmenuFrom,
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: Menu_module_default.viewport, role: "presentation", children: [
+          items.map((entry) => renderEntry(entry, itemColumns)),
+          children
+        ] }),
+        footer !== void 0 && footer.length > 0 && /* @__PURE__ */ jsx3("div", { className: Menu_module_default.footer, role: "presentation", children: footer.map((entry) => renderEntry(entry, footerColumns)) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      ref: rootRef,
+      className: clsx3(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
+      ]
+    }
+  );
+}
+
+// src/use-clipboard-copy.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef4, useState as useState3 } from "react";
+function useClipboardCopy(text) {
+  const [copied, setCopied] = useState3(false);
+  const copyPending = useRef4(false);
+  const copyTimer = useRef4(null);
+  const copyEpoch = useRef4(0);
+  useEffect2(
+    () => () => {
+      copyEpoch.current += 1;
+      copyPending.current = false;
+      if (copyTimer.current !== null) clearTimeout(copyTimer.current);
+    },
+    []
+  );
+  const onCopy = useCallback2(() => {
+    if (copied || copyPending.current) return;
+    const epoch = copyEpoch.current;
+    copyPending.current = true;
+    void writeClipboard(text).then((ok) => {
+      if (epoch !== copyEpoch.current) return;
+      copyPending.current = false;
+      if (!ok) return;
+      setCopied(true);
+      copyTimer.current = window.setTimeout(() => {
+        copyTimer.current = null;
+        setCopied(false);
+      }, 1e3);
+    });
+  }, [copied, text]);
+  return { copied, onCopy };
+}
+
+export {
+  Pill,
+  useAnchoredPosition,
+  observeComposition,
+  isMobileDevice,
+  focusWithoutRing,
+  modalSelector,
+  closeTopModal,
+  isBehindModal,
+  useModalLayer,
+  MENU_TRANSITION_MS,
+  MenuSurface,
+  MenuItemButton,
+  Menu,
+  useClipboardCopy
+};