@lovett/ui 0.0.10 → 0.0.11

package/dist/index.js

@@ -1,8 +1,8 @@
-import React2, { forwardRef, Children, isValidElement, useState, createContext, useContext, useId, useRef, useEffect, memo, useCallback, useMemo, useLayoutEffect, Fragment as Fragment$1, cloneElement } from 'react';
+import React2, { forwardRef, Children, isValidElement, useState, createContext, useContext, useId, useRef, useEffect, cloneElement, useMemo, useCallback, useLayoutEffect, memo, Fragment as Fragment$1 } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Minus, Check, EyeOff, Eye, ChevronDown, Search, Play, VolumeX, Volume2, X, Pencil, House, GripVertical, Loader2, ChevronUp, ChevronsUpDown, ChevronLeft, ChevronRight, SlidersHorizontal, Copy, Plus, FolderClosed, FolderPlus, Folder, Paperclip, Upload, Image, Code, Table as Table$1, FileText, FileType, AlertCircle, RotateCcw, Link2, ArrowRight, MoreHorizontal, ThumbsUp as ThumbsUp$1, MessageCircle, Share2, Lock, Info, BarChart3, ExternalLink } from 'lucide-react';
+import { Minus, Check, ChevronDown, X, Loader2, EyeOff, Eye, Search, Play, VolumeX, Volume2, Pencil, House, GripVertical, ChevronUp, ChevronsUpDown, ChevronLeft, ChevronRight, SlidersHorizontal, Copy, Plus, FolderClosed, FolderPlus, Folder, Paperclip, Upload, Image, Code, Table as Table$1, FileText, FileType, AlertCircle, RotateCcw, Link2, ArrowRight, MoreHorizontal, ThumbsUp as ThumbsUp$1, MessageCircle, Share2, Lock, Info, ExternalLink } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Link } from 'react-router-dom';
 import { toast, Toaster as Toaster$1 } from 'sonner';
@@ -17,7 +17,7 @@ import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
 import diff from 'react-syntax-highlighter/dist/esm/languages/prism/diff';
 import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
 import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
-import jsx66 from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
+import jsx70 from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
 import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
 import markup from 'react-syntax-highlighter/dist/esm/languages/prism/markup';
 import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
@@ -481,7 +481,8 @@ var Textarea = forwardRef(function Textarea2({ error, shellClassName, className,
     }
   );
 });
-var openPanels = [];
+
+// src/lib/focus.ts
 var FOCUSABLE_SELECTOR = [
   "a[href]",
   "area[href]",
@@ -494,11 +495,90 @@ var FOCUSABLE_SELECTOR = [
   '[contenteditable="true"]',
   "[tabindex]"
 ].join(",");
-function tabbablesWithin(panel) {
-  return Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+function tabbablesWithin(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
     (el) => el.tabIndex >= 0 && !el.hasAttribute("inert") && el.getAttribute("aria-hidden") !== "true" && !el.closest("[hidden]")
   );
 }
+var stack = [];
+var listening = false;
+function onDocumentKeyDown(event) {
+  if (event.key !== "Escape") return;
+  const top = stack[stack.length - 1];
+  if (!top) return;
+  event.stopPropagation();
+  top.onEscape(event);
+}
+function pushLayer(record) {
+  stack.push(record);
+  if (!listening) {
+    document.addEventListener("keydown", onDocumentKeyDown);
+    listening = true;
+  }
+  return () => {
+    const at = stack.lastIndexOf(record);
+    if (at !== -1) stack.splice(at, 1);
+    if (stack.length === 0 && listening) {
+      document.removeEventListener("keydown", onDocumentKeyDown);
+      listening = false;
+    }
+  };
+}
+function useLayer(options) {
+  const { enabled, kind, elementRef, onEscape } = options;
+  const onEscapeRef = useRef(onEscape);
+  useEffect(() => {
+    onEscapeRef.current = onEscape;
+  });
+  const recordRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    const record = {
+      kind,
+      element: () => elementRef?.current ?? null,
+      onEscape: (event) => onEscapeRef.current(event)
+    };
+    recordRef.current = record;
+    const pop = pushLayer(record);
+    return () => {
+      pop();
+      if (recordRef.current === record) recordRef.current = null;
+    };
+  }, [enabled, kind, elementRef]);
+  return useMemo(
+    () => ({
+      isTop: () => {
+        const record = recordRef.current;
+        return record !== null && stack[stack.length - 1] === record;
+      },
+      isTopOfKind: () => {
+        const record = recordRef.current;
+        if (!record) return false;
+        for (let i = stack.length - 1; i >= 0; i--) {
+          const layer = stack[i];
+          if (layer === record) return true;
+          if (layer?.kind === record.kind) return false;
+        }
+        return false;
+      },
+      containsInLayerAbove: (node) => {
+        const record = recordRef.current;
+        if (!record) return false;
+        const at = stack.indexOf(record);
+        if (at === -1) return false;
+        for (let i = at + 1; i < stack.length; i++) {
+          if (stack[i]?.element()?.contains(node)) return true;
+        }
+        return false;
+      }
+    }),
+    []
+  );
+}
+function useEscapeKey(onEscape, options = {}) {
+  const { enabled = true, kind = "popover" } = options;
+  return useLayer({ enabled, kind, onEscape });
+}
 function Modal({ isOpen, onClose, title, children, className, ariaLabel }) {
   const panelRef = useRef(null);
   const titleId = useId();
@@ -507,26 +587,25 @@ function Modal({ isOpen, onClose, title, children, className, ariaLabel }) {
     const panel = panelRef.current;
     if (!panel) return;
     const previous = document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : null;
-    openPanels.push(panel);
     const initial = panel.querySelector("[data-autofocus]");
     (initial ?? panel).focus();
     return () => {
-      const at = openPanels.indexOf(panel);
-      if (at !== -1) openPanels.splice(at, 1);
       if (previous && previous.isConnected) previous.focus();
     };
   }, [isOpen]);
+  const layer = useLayer({
+    enabled: isOpen,
+    kind: "modal",
+    elementRef: panelRef,
+    onEscape: () => onClose()
+  });
   useEffect(() => {
     if (!isOpen) return;
     const panel = panelRef.current;
     if (!panel) return;
     const handleKeyDown = (e) => {
-      if (openPanels[openPanels.length - 1] !== panel) return;
-      if (e.key === "Escape") {
-        onClose();
-        return;
-      }
       if (e.key !== "Tab") return;
+      if (!layer.isTopOfKind()) return;
       const active = document.activeElement;
       if (!(active instanceof HTMLElement) || !panel.contains(active)) return;
       const tabbables = tabbablesWithin(panel);
@@ -554,7 +633,7 @@ function Modal({ isOpen, onClose, title, children, className, ariaLabel }) {
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, onClose]);
+  }, [isOpen, layer]);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
     /* @__PURE__ */ jsx(
@@ -2596,6 +2675,16 @@ function OptionTileGroup(props) {
     }
   );
 }
+
+// src/lib/clipboard.ts
+async function copyText(value, label) {
+  try {
+    await navigator.clipboard.writeText(value);
+    toast.success(label ? `Copied ${label}` : `Copied ${value}`);
+  } catch {
+    toast.error("Copy failed");
+  }
+}
 var TONE_COLOR = {
   neutral: "rgb(var(--foreground))",
   accent: "rgb(var(--accent))",
@@ -2610,7 +2699,9 @@ function MetricCard({
   tone = "neutral",
   icon,
   labelPosition = "bottom",
-  className
+  className,
+  copyable = false,
+  copyValue
 }) {
   const labelEl = labelPosition === "top" ? /* @__PURE__ */ jsx(
     "div",
@@ -2638,24 +2729,40 @@ function MetricCard({
       }
     )
   ] });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: className ?? "flex flex-col gap-1 px-4 py-3 border",
-      style: {
-        background: "rgb(var(--surface-overlay-soft))",
-        borderColor: "rgb(var(--border))",
-        borderRadius: "var(--radius-lg)"
-      },
-      children: labelPosition === "top" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        labelEl,
-        valueEl
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        valueEl,
-        labelEl
-      ] })
-    }
-  );
+  const body = labelPosition === "top" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    labelEl,
+    valueEl
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    valueEl,
+    labelEl
+  ] });
+  const surfaceClass = className ?? "flex flex-col gap-1 px-4 py-3 border";
+  const surfaceStyle = {
+    background: "rgb(var(--surface-overlay-soft))",
+    borderColor: "rgb(var(--border))",
+    borderRadius: "var(--radius-lg)"
+  };
+  const text = copyValue ?? (typeof value === "string" ? value : void 0);
+  if (copyable && text !== void 0) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => void copyText(text, label),
+        title: `Copy ${label}`,
+        "aria-label": `Copy ${label}: ${text}`,
+        className: cn(
+          surfaceClass,
+          "text-left cursor-pointer transition-[border-color,box-shadow]",
+          "hover:border-[rgb(var(--border-strong))] hover:[box-shadow:var(--shadow-sm)]",
+          "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]"
+        ),
+        style: surfaceStyle,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: surfaceClass, style: surfaceStyle, children: body });
 }
 function ProgressBar({ label, percent, status, height = 8 }) {
   const determinate = typeof percent === "number";
@@ -2911,16 +3018,6 @@ function TokenBadge({
     }
   );
 }
-
-// src/lib/clipboard.ts
-async function copyText(value, label) {
-  try {
-    await navigator.clipboard.writeText(value);
-    toast.success(label ? `Copied ${label}` : `Copied ${value}`);
-  } catch {
-    toast.error("Copy failed");
-  }
-}
 var ValueChip = forwardRef(
   function ValueChip2({ children, copyValue, copyLabel, size = "md", fill, className, ...rest }, ref) {
     const shared = cn(
@@ -3610,6 +3707,403 @@ var Checkbox = forwardRef(
     );
   }
 );
+
+// src/lib/refs.ts
+function assignRef(ref, node) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(node);
+    return;
+  }
+  ref.current = node;
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) assignRef(ref, node);
+  };
+}
+var OPPOSITE = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+function isVertical(side) {
+  return side === "top" || side === "bottom";
+}
+function clampNumber(value, min, max) {
+  return Math.max(min, Math.min(value, max));
+}
+function computeAnchoredPosition(anchor, floating, viewport, options = {}) {
+  const {
+    side: preferred = "bottom",
+    align = "start",
+    offset = 6,
+    alignOffset = 0,
+    flip = true,
+    clampToViewport = true,
+    gutter = 8
+  } = options;
+  const anchorRight = anchor.left + anchor.width;
+  const anchorBottom = anchor.top + anchor.height;
+  const room = {
+    top: anchor.top - gutter,
+    bottom: viewport.height - anchorBottom - gutter,
+    left: anchor.left - gutter,
+    right: viewport.width - anchorRight - gutter
+  };
+  const needed = (side2) => (isVertical(side2) ? floating.height : floating.width) + offset;
+  let side = preferred;
+  if (flip && room[preferred] < needed(preferred)) {
+    const opposite = OPPOSITE[preferred];
+    if (room[opposite] >= needed(opposite) || room[opposite] > room[preferred]) {
+      side = opposite;
+    }
+  }
+  let left;
+  let top;
+  if (isVertical(side)) {
+    top = side === "bottom" ? anchorBottom + offset : anchor.top - floating.height - offset;
+    switch (align) {
+      case "start":
+        left = anchor.left + alignOffset;
+        break;
+      case "center":
+        left = anchor.left + anchor.width / 2 - floating.width / 2 + alignOffset;
+        break;
+      case "end":
+        left = anchorRight - floating.width - alignOffset;
+        break;
+    }
+  } else {
+    left = side === "right" ? anchorRight + offset : anchor.left - floating.width - offset;
+    switch (align) {
+      case "start":
+        top = anchor.top + alignOffset;
+        break;
+      case "center":
+        top = anchor.top + anchor.height / 2 - floating.height / 2 + alignOffset;
+        break;
+      case "end":
+        top = anchorBottom - floating.height - alignOffset;
+        break;
+    }
+  }
+  if (clampToViewport) {
+    left = clampNumber(left, gutter, viewport.width - floating.width - gutter);
+    top = clampNumber(top, gutter, viewport.height - floating.height - gutter);
+  }
+  return {
+    left: Math.round(left),
+    top: Math.round(top),
+    placement: { side, align }
+  };
+}
+var PARKED_STYLE = {
+  position: "fixed",
+  // Parked far off-screen, not at (0, 0): if a renderer paints the
+  // unpositioned frame despite `visibility: hidden`, nothing flashes at the
+  // viewport's top-left corner.
+  left: -99999,
+  top: -99999,
+  visibility: "hidden",
+  opacity: 0,
+  pointerEvents: "none"
+};
+function viewportSize() {
+  const root = document.documentElement;
+  return {
+    width: root.clientWidth || window.innerWidth,
+    height: root.clientHeight || window.innerHeight
+  };
+}
+function samePosition(a, b) {
+  return a !== null && a.left === b.left && a.top === b.top && a.placement.side === b.placement.side && a.placement.align === b.placement.align;
+}
+function useAnchoredPosition(options) {
+  const {
+    anchorRef,
+    anchorRect = null,
+    enabled = true,
+    side = "bottom",
+    align = "start",
+    offset = 6,
+    alignOffset = 0,
+    flip = true,
+    clampToViewport = true,
+    gutter = 8
+  } = options;
+  const floatingRef = useRef(null);
+  const [floating, setFloating] = useState(null);
+  const ref = useCallback((node) => {
+    floatingRef.current = node;
+    setFloating(node);
+  }, []);
+  const [position, setPosition] = useState(null);
+  const anchorRectRef = useRef(anchorRect);
+  useLayoutEffect(() => {
+    anchorRectRef.current = anchorRect;
+  });
+  const rectKey = anchorRect ? `${anchorRect.left}|${anchorRect.top}|${anchorRect.width}|${anchorRect.height}` : "";
+  const measure = useCallback(() => {
+    const node = floatingRef.current;
+    if (!node) return;
+    const rect = anchorRectRef.current ?? anchorRef?.current?.getBoundingClientRect() ?? null;
+    if (!rect) return;
+    const next = computeAnchoredPosition(
+      rect,
+      { width: node.offsetWidth, height: node.offsetHeight },
+      viewportSize(),
+      { side, align, offset, alignOffset, flip, clampToViewport, gutter }
+    );
+    setPosition((prev) => samePosition(prev, next) ? prev : next);
+  }, [anchorRef, side, align, offset, alignOffset, flip, clampToViewport, gutter]);
+  useLayoutEffect(() => {
+    if (!enabled || !floating) {
+      setPosition((prev) => prev === null ? prev : null);
+      return;
+    }
+    measure();
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, true);
+    let observer = null;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(() => measure());
+      observer.observe(floating);
+      const anchorEl = anchorRef?.current;
+      if (anchorEl) observer.observe(anchorEl);
+    }
+    return () => {
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure, true);
+      observer?.disconnect();
+    };
+  }, [enabled, floating, measure, anchorRef, rectKey]);
+  const positioned = position !== null;
+  const style = positioned ? { position: "fixed", left: position.left, top: position.top } : PARKED_STYLE;
+  return {
+    ref,
+    floatingRef,
+    style,
+    placement: position?.placement ?? null,
+    positioned,
+    update: measure
+  };
+}
+function useOutsideClick(targets, onOutside, options = {}) {
+  const { enabled = true, layer } = options;
+  const targetsRef = useRef(targets);
+  const handlerRef = useRef(onOutside);
+  useEffect(() => {
+    targetsRef.current = targets;
+    handlerRef.current = onOutside;
+  });
+  useEffect(() => {
+    if (!enabled) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      for (const candidate of targetsRef.current) {
+        const el = candidate instanceof Node ? candidate : candidate?.current;
+        if (el?.contains(target)) return;
+      }
+      if (layer?.containsInLayerAbove(target)) return;
+      handlerRef.current(event);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [enabled, layer]);
+}
+var POPOVER_SURFACE_STYLE = {
+  background: "rgb(var(--popover))",
+  color: "rgb(var(--popover-foreground))",
+  border: "1px solid rgb(var(--border))",
+  boxShadow: "var(--shadow-lg)"
+};
+var PopoverCtx = createContext(null);
+function usePopoverCtx(consumer) {
+  const ctx = useContext(PopoverCtx);
+  if (!ctx) {
+    throw new Error(
+      `${consumer} must be rendered inside <Popover>. Wrap your trigger + content with the Popover root component.`
+    );
+  }
+  return ctx;
+}
+function PopoverRoot({
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  anchorRect = null,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? Boolean(controlledOpen) : uncontrolledOpen;
+  const triggerRef = useRef(null);
+  const interactedOutsideRef = useRef(false);
+  const generatedId = useId();
+  const contentId = `popover-${generatedId.replace(/:/g, "")}`;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const value = useMemo(
+    () => ({ open, setOpen, triggerRef, contentId, anchorRect, interactedOutsideRef }),
+    [open, setOpen, contentId, anchorRect]
+  );
+  return /* @__PURE__ */ jsx(PopoverCtx.Provider, { value, children });
+}
+var PopoverTrigger = forwardRef(
+  function PopoverTrigger2({ asChild, onClick, children, ...rest }, forwardedRef) {
+    const { open, setOpen, triggerRef, contentId } = usePopoverCtx("Popover.Trigger");
+    const ariaProps = {
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "aria-controls": open ? contentId : void 0,
+      "data-state": open ? "open" : "closed"
+    };
+    if (asChild) {
+      if (!isValidElement(children)) {
+        throw new Error("Popover.Trigger with `asChild` expects exactly one element child.");
+      }
+      const child = children;
+      const childOnClick = child.props.onClick;
+      return cloneElement(child, {
+        ...rest,
+        ...ariaProps,
+        ref: composeRefs(child.props.ref, forwardedRef, triggerRef),
+        onClick: (event) => {
+          childOnClick?.(event);
+          onClick?.(event);
+          if (!event.defaultPrevented) setOpen(!open);
+        }
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: composeRefs(forwardedRef, triggerRef),
+        type: "button",
+        ...ariaProps,
+        onClick: (event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) setOpen(!open);
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var PopoverContent = forwardRef(
+  function PopoverContent2({
+    children,
+    side = "bottom",
+    align = "start",
+    offset = 6,
+    alignOffset = 0,
+    flip = true,
+    clampToViewport = true,
+    role = "dialog",
+    unstyled,
+    className,
+    style,
+    ...rest
+  }, forwardedRef) {
+    const { open, setOpen, triggerRef, contentId, anchorRect, interactedOutsideRef } = usePopoverCtx("Popover.Content");
+    const contentRef = useRef(null);
+    const {
+      ref: positionRef,
+      style: positionStyle,
+      placement,
+      positioned
+    } = useAnchoredPosition({
+      anchorRef: triggerRef,
+      anchorRect,
+      side,
+      align,
+      offset,
+      alignOffset,
+      flip,
+      clampToViewport,
+      enabled: open
+    });
+    const layer = useLayer({
+      enabled: open,
+      kind: "popover",
+      elementRef: contentRef,
+      onEscape: () => setOpen(false)
+    });
+    useOutsideClick(
+      [triggerRef, contentRef],
+      () => {
+        interactedOutsideRef.current = true;
+        setOpen(false);
+      },
+      { enabled: open, layer }
+    );
+    useEffect(() => {
+      if (!open || !positioned) return;
+      const node = contentRef.current;
+      if (!node) return;
+      interactedOutsideRef.current = false;
+      const trigger = triggerRef.current;
+      const previous = document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : null;
+      const initial = node.querySelector("[data-autofocus]") ?? tabbablesWithin(node)[0] ?? node;
+      initial.focus();
+      return () => {
+        if (interactedOutsideRef.current) return;
+        const active = document.activeElement;
+        if (active !== null && active !== document.body && !node.contains(active)) return;
+        const target = trigger ?? previous;
+        if (target?.isConnected) target.focus();
+      };
+    }, [open, positioned, triggerRef, interactedOutsideRef]);
+    const ref = useMemo(
+      () => composeRefs(forwardedRef, contentRef, positionRef),
+      [forwardedRef, positionRef]
+    );
+    if (!open || typeof document === "undefined") return null;
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          id: contentId,
+          role: role === "none" ? void 0 : role,
+          tabIndex: -1,
+          "data-slot": "popover-content",
+          "data-state": "open",
+          "data-side": placement?.side,
+          "data-align": placement?.align,
+          "data-positioned": positioned ? "true" : "false",
+          className: cn(
+            "fixed z-[100] outline-none",
+            !unstyled && "rounded-[var(--radius-lg)] p-3",
+            positioned && "ds-enter-pop",
+            className
+          ),
+          style: {
+            ...positionStyle,
+            ...unstyled ? void 0 : POPOVER_SURFACE_STYLE,
+            ...style
+          },
+          ...rest,
+          children
+        }
+      ),
+      document.body
+    );
+  }
+);
+var Popover = Object.assign(PopoverRoot, {
+  Trigger: PopoverTrigger,
+  Content: PopoverContent
+});
 var DropdownMenuCtx = createContext(null);
 function useDropdownMenuCtx(consumer) {
   const ctx = useContext(DropdownMenuCtx);
@@ -3647,22 +4141,21 @@ function DropdownMenu({
   );
   return /* @__PURE__ */ jsx(DropdownMenuCtx.Provider, { value, children });
 }
-function DropdownMenuTrigger({
-  unstyled,
-  className,
-  onClick,
-  children,
-  ...rest
-}) {
+var DropdownMenuTrigger = forwardRef(function DropdownMenuTrigger2({ unstyled, className, onClick, children, ...rest }, forwardedRef) {
   const { open, setOpen, triggerRef, contentId } = useDropdownMenuCtx("DropdownMenuTrigger");
+  const ref = useMemo(
+    () => composeRefs(forwardedRef, triggerRef),
+    [forwardedRef, triggerRef]
+  );
   return /* @__PURE__ */ jsx(
     "button",
     {
-      ref: triggerRef,
+      ref,
       type: "button",
       "aria-haspopup": "menu",
       "aria-expanded": open,
       "aria-controls": open ? contentId : void 0,
+      "data-state": open ? "open" : "closed",
       className: cn(
         !unstyled && "btn btn-secondary",
         className
@@ -3675,8 +4168,8 @@ function DropdownMenuTrigger({
       children
     }
   );
-}
-function DropdownMenuContent({
+});
+var DropdownMenuContent = forwardRef(function DropdownMenuContent2({
   children,
   align = "start",
   alignOffset = 0,
@@ -3685,100 +4178,62 @@ function DropdownMenuContent({
   className,
   style,
   ...rest
-}) {
+}, forwardedRef) {
   const { open, setOpen, triggerRef, contentId } = useDropdownMenuCtx("DropdownMenuContent");
   const contentRef = useRef(null);
-  const [position, setPosition] = useState(
-    null
-  );
-  useLayoutEffect(() => {
-    if (!open) {
-      setPosition(null);
-      return;
-    }
-    const measure = () => {
-      const triggerEl = triggerRef.current;
-      const contentEl = contentRef.current;
-      if (!triggerEl || !contentEl) return;
-      const triggerRect = triggerEl.getBoundingClientRect();
-      const contentRect = contentEl.getBoundingClientRect();
-      let left = triggerRect.left + alignOffset;
-      if (align === "end") left = triggerRect.right - contentRect.width - alignOffset;
-      else if (align === "center")
-        left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2 + alignOffset;
-      let top = side === "bottom" ? triggerRect.bottom + sideOffset : triggerRect.top - contentRect.height - sideOffset;
-      const gutter = 8;
-      const maxLeft = window.innerWidth - contentRect.width - gutter;
-      const maxTop = window.innerHeight - contentRect.height - gutter;
-      left = Math.max(gutter, Math.min(left, maxLeft));
-      top = Math.max(gutter, Math.min(top, maxTop));
-      setPosition({ left, top });
-    };
-    measure();
-    window.addEventListener("resize", measure);
-    window.addEventListener("scroll", measure, true);
-    return () => {
-      window.removeEventListener("resize", measure);
-      window.removeEventListener("scroll", measure, true);
-    };
-  }, [open, align, alignOffset, side, sideOffset, triggerRef]);
-  useEffect(() => {
-    if (!open) return;
-    const onPointerDown = (event) => {
-      const target = event.target;
-      if (!target) return;
-      if (contentRef.current?.contains(target)) return;
-      if (triggerRef.current?.contains(target)) return;
+  const {
+    ref: positionRef,
+    style: positionStyle,
+    placement,
+    positioned
+  } = useAnchoredPosition({
+    anchorRef: triggerRef,
+    side,
+    align,
+    offset: sideOffset,
+    alignOffset,
+    enabled: open
+  });
+  const layer = useLayer({
+    enabled: open,
+    kind: "popover",
+    elementRef: contentRef,
+    onEscape: () => {
       setOpen(false);
-    };
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        setOpen(false);
-        triggerRef.current?.focus();
-      }
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open, setOpen, triggerRef]);
+      triggerRef.current?.focus();
+    }
+  });
+  useOutsideClick([triggerRef, contentRef], () => setOpen(false), {
+    enabled: open,
+    layer
+  });
+  const ref = useMemo(
+    () => composeRefs(forwardedRef, contentRef, positionRef),
+    [forwardedRef, positionRef]
+  );
   if (!open || typeof document === "undefined") return null;
-  const isPositioned = position !== null;
   return createPortal(
     /* @__PURE__ */ jsx(
       "div",
       {
-        ref: contentRef,
+        ref,
         id: contentId,
         role: "menu",
         "data-slot": "dropdown-menu-content",
         "data-state": "open",
-        "data-positioned": isPositioned ? "true" : "false",
+        "data-side": placement?.side,
+        "data-align": placement?.align,
+        "data-positioned": positioned ? "true" : "false",
         className: cn(
           "fixed z-[100] min-w-48 max-w-[min(28rem,calc(100vw-16px))]",
           "p-1.5 overflow-y-auto",
           "rounded-[var(--radius-lg)]",
-          isPositioned && "ds-enter-pop",
+          positioned && "ds-enter-pop",
           className
         ),
         style: {
-          // Anchor the unpositioned phase WAY off-screen as a defense
-          // against any browser/renderer that doesn't fully respect
-          // visibility:hidden during a same-frame double-render. If the
-          // first paint slips through, it's at (-99999, -99999), not at
-          // viewport (0, 0) where a left-edge flash would be visible.
-          left: position?.left ?? -99999,
-          top: position?.top ?? -99999,
-          opacity: isPositioned ? void 0 : 0,
-          pointerEvents: isPositioned ? void 0 : "none",
-          visibility: isPositioned ? "visible" : "hidden",
-          background: "rgb(var(--popover))",
-          color: "rgb(var(--popover-foreground))",
-          border: "1px solid rgb(var(--border))",
-          boxShadow: "var(--shadow-lg, 0 10px 32px rgba(0,0,0,0.18))",
+          ...positionStyle,
+          ...POPOVER_SURFACE_STYLE,
           ...style
         },
         ...rest,
@@ -3787,19 +4242,13 @@ function DropdownMenuContent({
     ),
     document.body
   );
-}
-function DropdownMenuItem({
-  variant = "default",
-  inset,
-  className,
-  onClick,
-  children,
-  ...rest
-}) {
+});
+var DropdownMenuItem = forwardRef(function DropdownMenuItem2({ variant = "default", inset, className, onClick, children, ...rest }, forwardedRef) {
   const { setOpen } = useDropdownMenuCtx("DropdownMenuItem");
   return /* @__PURE__ */ jsx(
     "button",
     {
+      ref: forwardedRef,
       role: "menuitem",
       type: "button",
       "data-slot": "dropdown-menu-item",
@@ -3824,19 +4273,12 @@ function DropdownMenuItem({
       children
     }
   );
-}
-function DropdownMenuCheckboxItem({
-  checked,
-  onCheckedChange,
-  className,
-  children,
-  onClick,
-  disabled,
-  ...rest
-}) {
+});
+var DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({ checked, onCheckedChange, className, children, onClick, disabled, ...rest }, forwardedRef) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
+      ref: forwardedRef,
       role: "menuitemcheckbox",
       type: "button",
       "data-slot": "dropdown-menu-checkbox-item",
@@ -3870,7 +4312,7 @@ function DropdownMenuCheckboxItem({
       ]
     }
   );
-}
+});
 function DropdownMenuSeparator({
   className,
   ...rest
@@ -5515,113 +5957,1169 @@ function DataGrid({
               sort: sort ?? null,
               onSortChange
             }
-          ) })
+          ) })
+        ]
+      }
+    ),
+    renderDrawerPanel ? renderDrawerPanel(drawerPanelProps) : /* @__PURE__ */ jsx(
+      DrawerPanel,
+      {
+        isOpen: drawerIsOpen,
+        onClose: closeDrawer,
+        drawerRow,
+        drawerColumn,
+        drawerCellValue,
+        getRowLabel,
+        isEditableColumn,
+        isEmptyValue,
+        modal: drawerModal,
+        size: drawerSize ?? void 0
+      }
+    )
+  ] });
+}
+function DataGridToolbar({
+  search,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+        className
+      ),
+      children: [
+        search ? /* @__PURE__ */ jsx("div", { className: "w-full sm:max-w-sm", children: search }) : /* @__PURE__ */ jsx("span", {}),
+        children ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 sm:justify-end", children }) : null
+      ]
+    }
+  );
+}
+function DataGridColumnOptionsMenu({
+  showSummaries,
+  onShowSummariesChange,
+  visibleColumns,
+  visibleColumnIds,
+  hiddenColumns,
+  toggleColumnVisibility,
+  optionsSensors,
+  onOptionColumnDragEnd,
+  optionsDndContextId,
+  triggerLabel = "Options"
+}) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenuTrigger, { "aria-label": "Open table options", children: [
+      /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { children: triggerLabel })
+    ] }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+      /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Options" }) }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: showSummaries,
+          onCheckedChange: (checked) => onShowSummariesChange(checked === true),
+          children: "Show summary row"
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Columns" }) }),
+      /* @__PURE__ */ jsx(
+        DndContext,
+        {
+          id: optionsDndContextId,
+          sensors: optionsSensors,
+          collisionDetection: closestCenter,
+          onDragEnd: onOptionColumnDragEnd,
+          children: /* @__PURE__ */ jsx(
+            SortableContext,
+            {
+              items: visibleColumns.map((column) => column.id),
+              strategy: verticalListSortingStrategy,
+              children: visibleColumns.map((column) => /* @__PURE__ */ jsx(
+                SortableColumnOptionItem,
+                {
+                  column,
+                  checked: true,
+                  disabled: visibleColumnIds.length === 1,
+                  onCheckedChange: (checked) => toggleColumnVisibility(column.id, checked)
+                },
+                column.id
+              ))
+            }
+          )
+        }
+      ),
+      hiddenColumns.length > 0 ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+      hiddenColumns.map((column) => /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: false,
+          onCheckedChange: (checked) => toggleColumnVisibility(column.id, checked === true),
+          children: column.label
+        },
+        column.id
+      ))
+    ] })
+  ] });
+}
+var SHELL_SIZE_CLASS = {
+  sm: "size-sm",
+  md: ""
+};
+var VALUE_SIZE_CLASS = {
+  sm: "gap-2 pl-2.5 text-[12.5px]",
+  md: "gap-2 pl-3 text-[13.5px]"
+};
+var LISTBOX_CLASS = "fixed z-[100] max-h-[min(60vh,20rem)] overflow-y-auto rounded-[var(--radius-lg)] p-1.5 outline-none";
+var TYPEAHEAD_RESET_MS = 500;
+function isPrintableKey(event) {
+  return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+function sanitizeId(id) {
+  return id.replace(/[^a-zA-Z0-9_-]/g, "");
+}
+function ListboxOption({
+  id,
+  label,
+  description,
+  icon,
+  count,
+  selected,
+  highlighted,
+  disabled,
+  onSelect,
+  onHighlight,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      id,
+      "aria-selected": selected,
+      "aria-disabled": disabled ? true : void 0,
+      tabIndex: -1,
+      "data-slot": "listbox-option",
+      "data-highlighted": highlighted ? "" : void 0,
+      "data-selected": selected ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      className: cn(
+        "flex w-full cursor-default items-center gap-2.5 text-left",
+        "rounded-[var(--radius-md)] px-2.5 py-2 text-[13px] font-medium",
+        "outline-none transition-colors",
+        "aria-disabled:pointer-events-none aria-disabled:opacity-50"
+      ),
+      style: {
+        background: highlighted ? "rgb(var(--surface-overlay))" : "transparent",
+        color: "rgb(var(--foreground))"
+      },
+      onClick: () => {
+        if (!disabled) onSelect();
+      },
+      onPointerMove: () => {
+        if (!disabled && !highlighted) onHighlight();
+      },
+      children: [
+        children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", children: icon }) : null,
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate", children: label }),
+            description ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block truncate text-[11.5px] font-normal",
+                style: { color: "rgb(var(--text-tertiary))" },
+                children: description
+              }
+            ) : null
+          ] }),
+          typeof count === "number" ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "shrink-0 text-[11px] font-medium tabular-nums",
+              style: { color: "rgb(var(--text-muted))" },
+              children: count.toLocaleString()
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", "aria-hidden": "true", children: selected ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5", style: { color: "rgb(var(--accent))" } }) : null })
+      ]
+    }
+  );
+}
+var SelectImpl = forwardRef(function Select({
+  options,
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  placeholder = "Select\u2026",
+  size = "md",
+  error,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  side = "bottom",
+  align = "start",
+  listboxClassName,
+  id,
+  className,
+  style,
+  disabled,
+  onClick,
+  onKeyDown,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...rest
+}, forwardedRef) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlledValue = valueProp !== void 0;
+  const value = isControlledValue ? valueProp : uncontrolledValue;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
+  const isControlledOpen = openProp !== void 0;
+  const open = isControlledOpen ? Boolean(openProp) : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlledOpen) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlledOpen, onOpenChange]
+  );
+  const triggerRef = useRef(null);
+  const listboxRef = useRef(null);
+  const baseId = sanitizeId(useId());
+  const triggerId = id ?? `select-${baseId}`;
+  const listboxId = `select-listbox-${baseId}`;
+  const optionId = (index) => `${listboxId}-opt-${index}`;
+  const selectedIndex = useMemo(
+    () => options.findIndex((option) => option.value === value),
+    [options, value]
+  );
+  const selected = selectedIndex >= 0 ? options[selectedIndex] : void 0;
+  const firstEnabled = options.findIndex((option) => !option.disabled);
+  let lastEnabled = -1;
+  for (let i = options.length - 1; i >= 0; i--) {
+    if (!options[i]?.disabled) {
+      lastEnabled = i;
+      break;
+    }
+  }
+  const [highlight, setHighlight] = useState(null);
+  const activeIndex = highlight !== null && highlight < options.length ? highlight : selectedIndex >= 0 ? selectedIndex : firstEnabled;
+  const openList = useCallback(
+    (initial) => {
+      setHighlight(initial);
+      setOpen(true);
+    },
+    [setOpen]
+  );
+  const closeList = useCallback(() => {
+    setOpen(false);
+    setHighlight(null);
+  }, [setOpen]);
+  const commit = (index) => {
+    const option = options[index];
+    if (!option || option.disabled) return;
+    if (option.value !== value) {
+      if (!isControlledValue) setUncontrolledValue(option.value);
+      onValueChange?.(option.value);
+    }
+    closeList();
+    triggerRef.current?.focus();
+  };
+  const step = (from, direction) => {
+    for (let i = from + direction; i >= 0 && i < options.length; i += direction) {
+      if (!options[i]?.disabled) return i;
+    }
+    return from;
+  };
+  const typeaheadRef = useRef({ text: "", timer: null });
+  useEffect(() => {
+    const state = typeaheadRef.current;
+    return () => {
+      if (state.timer !== null) window.clearTimeout(state.timer);
+    };
+  }, []);
+  const typeahead = (char, from) => {
+    const state = typeaheadRef.current;
+    if (state.timer !== null) window.clearTimeout(state.timer);
+    state.text += char.toLowerCase();
+    state.timer = window.setTimeout(() => {
+      state.text = "";
+      state.timer = null;
+    }, TYPEAHEAD_RESET_MS);
+    const typed = state.text;
+    const first = typed.charAt(0);
+    const repeated = typed.length > 1 && typed.split("").every((c) => c === first);
+    const needle = repeated ? first : typed;
+    const count = options.length;
+    if (count === 0) return null;
+    const startAt = needle.length === 1 ? from + 1 : Math.max(from, 0);
+    for (let k = 0; k < count; k++) {
+      const i = (startAt + k) % count;
+      const option = options[i];
+      if (option && !option.disabled && option.label.toLowerCase().startsWith(needle)) return i;
+    }
+    return null;
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const { key } = event;
+    if (!open) {
+      if (key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || key === " ") {
+        event.preventDefault();
+        openList(null);
+        return;
+      }
+      if (key === "Home" || key === "End") {
+        event.preventDefault();
+        openList(key === "Home" ? firstEnabled : lastEnabled);
+        return;
+      }
+      if (isPrintableKey(event)) {
+        event.preventDefault();
+        openList(typeahead(key, selectedIndex));
+      }
+      return;
+    }
+    switch (key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setHighlight(step(activeIndex, 1));
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        setHighlight(step(activeIndex, -1));
+        return;
+      case "Home":
+        event.preventDefault();
+        setHighlight(firstEnabled);
+        return;
+      case "End":
+        event.preventDefault();
+        setHighlight(lastEnabled);
+        return;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        commit(activeIndex);
+        return;
+      case "Tab":
+        closeList();
+        return;
+      case "Escape":
+        return;
+      default:
+        if (isPrintableKey(event)) {
+          event.preventDefault();
+          const match = typeahead(key, activeIndex);
+          if (match !== null) setHighlight(match);
+        }
+    }
+  };
+  const {
+    ref: positionRef,
+    style: positionStyle,
+    placement,
+    positioned
+  } = useAnchoredPosition({
+    anchorRef: triggerRef,
+    side,
+    align,
+    enabled: open
+  });
+  const layer = useLayer({
+    enabled: open,
+    kind: "popover",
+    elementRef: listboxRef,
+    onEscape: () => {
+      closeList();
+      triggerRef.current?.focus();
+    }
+  });
+  useOutsideClick([triggerRef, listboxRef], closeList, { enabled: open, layer });
+  const [triggerWidth, setTriggerWidth] = useState(null);
+  useLayoutEffect(() => {
+    if (!open) return;
+    setTriggerWidth(triggerRef.current?.offsetWidth ?? null);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    listboxRef.current?.querySelector("[data-highlighted]")?.scrollIntoView({ block: "nearest" });
+  }, [open, activeIndex]);
+  const triggerRefs = useMemo(
+    () => composeRefs(forwardedRef, triggerRef),
+    [forwardedRef]
+  );
+  const listboxRefs = useMemo(
+    () => composeRefs(listboxRef, positionRef),
+    [positionRef]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRefs,
+        id: triggerId,
+        type: "button",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? listboxId : void 0,
+        "aria-activedescendant": open && activeIndex >= 0 ? optionId(activeIndex) : void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-invalid": error ? true : void 0,
+        disabled,
+        "data-slot": "select-trigger",
+        "data-state": open ? "open" : "closed",
+        "data-size": size,
+        "data-placeholder": selected ? void 0 : "",
+        className: cn(
+          "input-shell appearance-none p-0 text-left",
+          SHELL_SIZE_CLASS[size],
+          error && "is-error",
+          disabled && "is-disabled",
+          className
+        ),
+        style: { alignItems: "center", ...style },
+        onClick: (event) => {
+          onClick?.(event);
+          if (event.defaultPrevented) return;
+          if (open) closeList();
+          else openList(null);
+        },
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-slot": "select-value",
+              className: cn(
+                "flex min-w-0 flex-1 items-center font-medium leading-[1.4]",
+                VALUE_SIZE_CLASS[size]
+              ),
+              children: [
+                selected?.icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", children: selected.icon }) : null,
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "truncate",
+                    style: {
+                      color: selected ? "rgb(var(--foreground))" : "rgb(var(--text-tertiary))"
+                    },
+                    children: selected ? selected.label : placeholder
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "affix", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "h-4 w-4 transition-transform duration-[var(--dur-fast)] ease-[var(--ease-out)] motion-reduce:transition-none",
+                open && "rotate-180"
+              )
+            }
+          ) })
+        ]
+      }
+    ),
+    open && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: listboxRefs,
+          id: listboxId,
+          role: "listbox",
+          "aria-label": ariaLabelledby ? void 0 : ariaLabel,
+          "aria-labelledby": ariaLabelledby ?? (ariaLabel ? void 0 : triggerId),
+          tabIndex: -1,
+          "data-slot": "select-listbox",
+          "data-state": "open",
+          "data-side": placement?.side,
+          "data-align": placement?.align,
+          "data-positioned": positioned ? "true" : "false",
+          className: cn(LISTBOX_CLASS, positioned && "ds-enter-pop", listboxClassName),
+          style: {
+            ...positionStyle,
+            ...POPOVER_SURFACE_STYLE,
+            ...triggerWidth ? { minWidth: triggerWidth } : void 0
+          },
+          onMouseDown: (event) => event.preventDefault(),
+          children: options.length === 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "select-empty",
+              className: "px-2.5 py-2 text-[12.5px]",
+              style: { color: "rgb(var(--text-tertiary))" },
+              children: "No options"
+            }
+          ) : options.map((option, index) => /* @__PURE__ */ jsx(
+            ListboxOption,
+            {
+              id: optionId(index),
+              label: option.label,
+              description: option.description,
+              icon: option.icon,
+              selected: option.value === value,
+              highlighted: index === activeIndex,
+              disabled: option.disabled,
+              onSelect: () => commit(index),
+              onHighlight: () => setHighlight(index)
+            },
+            option.value
+          ))
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+});
+var Select2 = SelectImpl;
+var SHELL_SIZE_CLASS2 = {
+  sm: "size-sm",
+  md: ""
+};
+var MULTI_SHELL_STYLE = {
+  sm: {
+    height: "auto",
+    minHeight: "var(--ctrl-sm)",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "var(--space-1)",
+    paddingTop: "var(--space-1)",
+    paddingBottom: "var(--space-1)"
+  },
+  md: {
+    height: "auto",
+    minHeight: "var(--ctrl-md)",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "var(--space-1)",
+    paddingTop: "var(--space-1)",
+    paddingBottom: "var(--space-1)"
+  }
+};
+var MULTI_INPUT_STYLE = { minWidth: "6rem" };
+function defaultFilter(option, query) {
+  const needle = query.toLowerCase();
+  return option.label.toLowerCase().includes(needle) || (option.description?.toLowerCase().includes(needle) ?? false);
+}
+function sanitizeId2(id) {
+  return id.replace(/[^a-zA-Z0-9_-]/g, "");
+}
+var ComboboxImpl = forwardRef(function Combobox(props, forwardedRef) {
+  const {
+    options,
+    groups,
+    loading,
+    placeholder,
+    size = "md",
+    disabled,
+    error,
+    inputValue: inputValueProp,
+    defaultInputValue = "",
+    onInputValueChange,
+    shouldFilter = true,
+    filter,
+    emptyMessage = "No results",
+    loadingMessage = "Loading\u2026",
+    renderOption,
+    open: openProp,
+    onOpenChange,
+    side = "bottom",
+    align = "start",
+    id,
+    autoFocus,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    className,
+    listboxClassName
+  } = props;
+  const isMultiple = props.multiple === true;
+  const [uncontrolledSelection, setUncontrolledSelection] = useState(() => {
+    if (props.multiple === true) return [...props.defaultValue ?? []];
+    return props.defaultValue == null ? [] : [props.defaultValue];
+  });
+  const isControlledValue = props.value !== void 0;
+  const selection = props.value === void 0 ? uncontrolledSelection : props.multiple === true ? props.value : props.value === null ? [] : [props.value];
+  const emit = (next) => {
+    if (!isControlledValue) setUncontrolledSelection(next);
+    if (props.multiple === true) props.onValueChange?.(next);
+    else props.onValueChange?.(next[0] ?? null);
+  };
+  const [uncontrolledInput, setUncontrolledInput] = useState(defaultInputValue);
+  const inputValue = inputValueProp ?? uncontrolledInput;
+  const setInputValue = (next) => {
+    if (inputValueProp === void 0) setUncontrolledInput(next);
+    onInputValueChange?.(next);
+  };
+  const [dirty, setDirty] = useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isControlledOpen = openProp !== void 0;
+  const open = isControlledOpen ? Boolean(openProp) : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlledOpen) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlledOpen, onOpenChange]
+  );
+  const openRef = useRef(open);
+  useLayoutEffect(() => {
+    openRef.current = open;
+  });
+  const shellRef = useRef(null);
+  const inputRef = useRef(null);
+  const listboxRef = useRef(null);
+  const baseId = sanitizeId2(useId());
+  const inputId = id ?? `combobox-${baseId}`;
+  const listboxId = `combobox-listbox-${baseId}`;
+  const optionId = (index) => `${listboxId}-opt-${index}`;
+  const byValue = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const option of options) map.set(option.value, option);
+    return map;
+  }, [options]);
+  const selectedSingle = isMultiple ? void 0 : byValue.get(selection[0] ?? "");
+  const filterQuery = dirty ? inputValue.trim() : "";
+  const { sections, flat } = useMemo(() => {
+    const matches = filter ?? defaultFilter;
+    const visible = shouldFilter && filterQuery ? options.filter((option) => matches(option, filterQuery)) : options;
+    const byGroup = /* @__PURE__ */ new Map();
+    for (const option of visible) {
+      const key = option.group ?? null;
+      const list = byGroup.get(key) ?? [];
+      list.push(option);
+      byGroup.set(key, list);
+    }
+    const order = [{ key: null, label: null }];
+    if (groups) {
+      for (const group of groups) order.push({ key: group.id, label: group.label });
+      for (const key of byGroup.keys()) {
+        if (key !== null && !groups.some((group) => group.id === key)) {
+          order.push({ key, label: key });
+        }
+      }
+    } else {
+      for (const key of byGroup.keys()) if (key !== null) order.push({ key, label: key });
+    }
+    const flatList = [];
+    const sectionList = [];
+    for (const { key, label } of order) {
+      const members = byGroup.get(key);
+      if (!members || members.length === 0) continue;
+      sectionList.push({
+        key: key ?? "__ungrouped",
+        label,
+        items: members.map((option) => ({ option, index: flatList.push(option) - 1 }))
+      });
+    }
+    return { sections: sectionList, flat: flatList };
+  }, [options, groups, filter, shouldFilter, filterQuery]);
+  const firstEnabled = flat.findIndex((option) => !option.disabled);
+  const selectedFlatIndex = !isMultiple && !dirty && selectedSingle ? flat.findIndex((option) => option.value === selectedSingle.value) : -1;
+  const [highlight, setHighlight] = useState(null);
+  const activeIndex = highlight !== null && highlight < flat.length ? highlight : selectedFlatIndex >= 0 ? selectedFlatIndex : firstEnabled;
+  const step = (from, direction) => {
+    for (let i = from + direction; i >= 0 && i < flat.length; i += direction) {
+      if (!flat[i]?.disabled) return i;
+    }
+    return from;
+  };
+  const openList = () => {
+    if (openRef.current) return;
+    setHighlight(null);
+    setOpen(true);
+  };
+  const closeList = (clearIfEmpty) => {
+    if (!openRef.current) return;
+    openRef.current = false;
+    if (!isMultiple && clearIfEmpty && dirty && inputValue.trim() === "" && selection.length > 0) {
+      emit([]);
+    }
+    if (isMultiple && inputValue !== "") setInputValue("");
+    setDirty(false);
+    setHighlight(null);
+    setOpen(false);
+  };
+  const choose = (index) => {
+    const option = flat[index];
+    if (!option || option.disabled) return;
+    if (isMultiple) {
+      const has = selection.includes(option.value);
+      emit(has ? selection.filter((value) => value !== option.value) : [...selection, option.value]);
+    } else {
+      if (selection[0] !== option.value) emit([option.value]);
+      closeList(false);
+    }
+    inputRef.current?.focus();
+  };
+  const removeChip = (value) => {
+    emit(selection.filter((candidate) => candidate !== value));
+    inputRef.current?.focus();
+  };
+  const text = isMultiple || dirty ? inputValue : selectedSingle?.label ?? "";
+  const handleChange = (next) => {
+    setInputValue(next);
+    setDirty(true);
+    setHighlight(null);
+    if (!openRef.current) setOpen(true);
+  };
+  const handleKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) openList();
+        else setHighlight(step(activeIndex, 1));
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) openList();
+        else setHighlight(step(activeIndex, -1));
+        return;
+      case "Enter":
+        if (open) {
+          event.preventDefault();
+          if (activeIndex >= 0) choose(activeIndex);
+        }
+        return;
+      case "Backspace":
+        if (isMultiple && text === "" && selection.length > 0) {
+          event.preventDefault();
+          emit(selection.slice(0, -1));
+        }
+        return;
+      case "Tab":
+        if (open) closeList(true);
+        return;
+      default:
+        return;
+    }
+  };
+  const handleBlur = (event) => {
+    if (event.relatedTarget instanceof Node && shellRef.current?.contains(event.relatedTarget)) {
+      return;
+    }
+    closeList(true);
+  };
+  const {
+    ref: positionRef,
+    style: positionStyle,
+    placement,
+    positioned
+  } = useAnchoredPosition({
+    anchorRef: shellRef,
+    side,
+    align,
+    enabled: open
+  });
+  const layer = useLayer({
+    enabled: open,
+    kind: "popover",
+    elementRef: listboxRef,
+    onEscape: () => closeList(false)
+  });
+  useOutsideClick([shellRef, listboxRef], () => closeList(true), { enabled: open, layer });
+  const [shellWidth, setShellWidth] = useState(null);
+  useLayoutEffect(() => {
+    if (!open) return;
+    setShellWidth(shellRef.current?.offsetWidth ?? null);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    listboxRef.current?.querySelector("[data-highlighted]")?.scrollIntoView({ block: "nearest" });
+  }, [open, activeIndex]);
+  useEffect(() => {
+    if (!autoFocus) return;
+    const node = inputRef.current;
+    if (!node) return;
+    if (node.closest('[data-positioned="false"]')) return;
+    node.focus();
+  }, []);
+  const inputRefs = useMemo(
+    () => composeRefs(forwardedRef, inputRef),
+    [forwardedRef]
+  );
+  const listboxRefs = useMemo(
+    () => composeRefs(listboxRef, positionRef),
+    [positionRef]
+  );
+  const chips = isMultiple ? selection : [];
+  const hasChips = chips.length > 0;
+  const shellStyle = isMultiple ? hasChips ? { ...MULTI_SHELL_STYLE[size], paddingLeft: "var(--space-2)" } : MULTI_SHELL_STYLE[size] : void 0;
+  const renderItem = ({ option, index }) => {
+    const selected = selection.includes(option.value);
+    const highlighted = index === activeIndex;
+    return /* @__PURE__ */ jsx(
+      ListboxOption,
+      {
+        id: optionId(index),
+        label: option.label,
+        description: option.description,
+        icon: option.icon,
+        count: option.count,
+        selected,
+        highlighted,
+        disabled: option.disabled,
+        onSelect: () => choose(index),
+        onHighlight: () => setHighlight(index),
+        children: renderOption ? renderOption(option, { selected, highlighted, query: filterQuery }) : void 0
+      },
+      option.value
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: shellRef,
+        "data-slot": "combobox",
+        "data-state": open ? "open" : "closed",
+        "data-size": size,
+        className: cn(
+          "input-shell has-trailing",
+          SHELL_SIZE_CLASS2[size],
+          hasChips && "has-leading",
+          error && "is-error",
+          disabled && "is-disabled",
+          className
+        ),
+        style: shellStyle,
+        children: [
+          chips.map((value) => {
+            const label = byValue.get(value)?.label ?? value;
+            return /* @__PURE__ */ jsxs(
+              "span",
+              {
+                "data-slot": "combobox-chip",
+                className: "inline-flex items-center gap-1 rounded-[var(--radius-xs)] py-0.5 pl-2 pr-1 text-[12px] font-medium",
+                style: {
+                  background: "rgb(var(--surface-overlay))",
+                  color: "rgb(var(--foreground))"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "max-w-[12rem] truncate", children: label }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Remove ${label}`,
+                      disabled,
+                      onClick: () => removeChip(value),
+                      className: "inline-flex h-4 w-4 items-center justify-center rounded-[var(--radius-xs)] transition-colors hover:bg-[rgb(var(--surface-overlay-strong))]",
+                      style: { color: "rgb(var(--text-muted))" },
+                      children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3", "aria-hidden": "true" })
+                    }
+                  )
+                ]
+              },
+              value
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRefs,
+              id: inputId,
+              type: "text",
+              role: "combobox",
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-controls": open ? listboxId : void 0,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": open && activeIndex >= 0 ? optionId(activeIndex) : void 0,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby,
+              "aria-invalid": error ? true : void 0,
+              autoComplete: "off",
+              spellCheck: false,
+              disabled,
+              placeholder: hasChips ? "" : placeholder,
+              value: text,
+              "data-slot": "combobox-input",
+              "data-autofocus": autoFocus ? "" : void 0,
+              style: isMultiple ? MULTI_INPUT_STYLE : void 0,
+              onChange: (event) => handleChange(event.target.value),
+              onKeyDown: handleKeyDown,
+              onClick: openList,
+              onFocus: (event) => event.currentTarget.select(),
+              onBlur: handleBlur
+            }
+          ),
+          loading ? /* @__PURE__ */ jsx("span", { className: "affix", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin motion-reduce:animate-none" }) }) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": open ? "Close options" : "Open options",
+              disabled,
+              className: "affix action",
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => {
+                if (open) closeList(false);
+                else openList();
+                inputRef.current?.focus();
+              },
+              children: /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  className: cn(
+                    "h-4 w-4 transition-transform duration-[var(--dur-fast)] ease-[var(--ease-out)] motion-reduce:transition-none",
+                    open && "rotate-180"
+                  ),
+                  "aria-hidden": "true"
+                }
+              )
+            }
+          )
         ]
       }
     ),
-    renderDrawerPanel ? renderDrawerPanel(drawerPanelProps) : /* @__PURE__ */ jsx(
-      DrawerPanel,
-      {
-        isOpen: drawerIsOpen,
-        onClose: closeDrawer,
-        drawerRow,
-        drawerColumn,
-        drawerCellValue,
-        getRowLabel,
-        isEditableColumn,
-        isEmptyValue,
-        modal: drawerModal,
-        size: drawerSize ?? void 0
-      }
-    )
+    open && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: listboxRefs,
+          id: listboxId,
+          role: "listbox",
+          "aria-multiselectable": isMultiple || void 0,
+          "aria-busy": loading || void 0,
+          "aria-label": ariaLabelledby ? void 0 : ariaLabel,
+          "aria-labelledby": ariaLabelledby,
+          tabIndex: -1,
+          "data-slot": "combobox-listbox",
+          "data-state": "open",
+          "data-side": placement?.side,
+          "data-align": placement?.align,
+          "data-positioned": positioned ? "true" : "false",
+          className: cn(LISTBOX_CLASS, positioned && "ds-enter-pop", listboxClassName),
+          style: {
+            ...positionStyle,
+            ...POPOVER_SURFACE_STYLE,
+            ...shellWidth ? { minWidth: shellWidth } : void 0
+          },
+          onMouseDown: (event) => event.preventDefault(),
+          children: flat.length === 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "combobox-empty",
+              className: "px-2.5 py-2 text-[12.5px]",
+              style: { color: "rgb(var(--text-tertiary))" },
+              children: loading ? loadingMessage : emptyMessage
+            }
+          ) : sections.map(
+            (section) => section.label === null ? section.items.map(renderItem) : /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "group",
+                "aria-labelledby": `${listboxId}-group-${sanitizeId2(section.key)}`,
+                "data-slot": "combobox-group",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      id: `${listboxId}-group-${sanitizeId2(section.key)}`,
+                      "data-slot": "combobox-group-label",
+                      className: "px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-[0.4px]",
+                      style: { color: "rgb(var(--text-muted))" },
+                      children: section.label
+                    }
+                  ),
+                  section.items.map(renderItem)
+                ]
+              },
+              section.key
+            )
+          )
+        }
+      ),
+      document.body
+    ) : null
   ] });
-}
-function DataGridToolbar({
-  search,
+});
+var Combobox2 = ComboboxImpl;
+var TOOLTIP_SURFACE_STYLE = {
+  background: "rgb(var(--popover))",
+  color: "rgb(var(--popover-foreground))",
+  border: "1px solid rgb(var(--border))",
+  boxShadow: "var(--shadow-md)",
+  borderRadius: "var(--radius-sm)",
+  padding: "var(--space-1) var(--space-2)"
+};
+function Tooltip({
+  content,
   children,
+  side = "top",
+  align = "center",
+  offset = 6,
+  openDelay = 300,
+  closeDelay = 0,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
   className
 }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-        className
-      ),
-      children: [
-        search ? /* @__PURE__ */ jsx("div", { className: "w-full sm:max-w-sm", children: search }) : /* @__PURE__ */ jsx("span", {}),
-        children ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 sm:justify-end", children }) : null
-      ]
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? Boolean(openProp) : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const triggerRef = useRef(null);
+  const tipRef = useRef(null);
+  const timerRef = useRef(null);
+  const pointerDownRef = useRef(false);
+  const pressEndListenerRef = useRef(null);
+  const clearPressEndListener = useCallback(() => {
+    const listener = pressEndListenerRef.current;
+    if (listener === null) return;
+    pressEndListenerRef.current = null;
+    document.removeEventListener("pointerup", listener);
+    document.removeEventListener("pointercancel", listener);
+  }, []);
+  useEffect(() => clearPressEndListener, [clearPressEndListener]);
+  const tipId = `tooltip-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const clearTimer = useCallback(() => {
+    if (timerRef.current !== null) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = null;
     }
+  }, []);
+  useEffect(() => clearTimer, [clearTimer]);
+  const scheduleOpen = useCallback(
+    (delay) => {
+      clearTimer();
+      if (delay <= 0) {
+        setOpen(true);
+        return;
+      }
+      timerRef.current = window.setTimeout(() => {
+        timerRef.current = null;
+        setOpen(true);
+      }, delay);
+    },
+    [clearTimer, setOpen]
   );
-}
-function DataGridColumnOptionsMenu({
-  showSummaries,
-  onShowSummariesChange,
-  visibleColumns,
-  visibleColumnIds,
-  hiddenColumns,
-  toggleColumnVisibility,
-  optionsSensors,
-  onOptionColumnDragEnd,
-  optionsDndContextId,
-  triggerLabel = "Options"
-}) {
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs(DropdownMenuTrigger, { "aria-label": "Open table options", children: [
-      /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx("span", { children: triggerLabel })
-    ] }),
-    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
-      /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Options" }) }),
-      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsx(
-        DropdownMenuCheckboxItem,
-        {
-          checked: showSummaries,
-          onCheckedChange: (checked) => onShowSummariesChange(checked === true),
-          children: "Show summary row"
-        }
-      ),
-      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Columns" }) }),
+  const scheduleClose = useCallback(
+    (delay) => {
+      clearTimer();
+      if (delay <= 0) {
+        setOpen(false);
+        return;
+      }
+      timerRef.current = window.setTimeout(() => {
+        timerRef.current = null;
+        setOpen(false);
+      }, delay);
+    },
+    [clearTimer, setOpen]
+  );
+  const {
+    ref: positionRef,
+    style: positionStyle,
+    placement,
+    positioned
+  } = useAnchoredPosition({
+    anchorRef: triggerRef,
+    side,
+    align,
+    offset,
+    enabled: open
+  });
+  useLayer({
+    enabled: open,
+    kind: "popover",
+    elementRef: tipRef,
+    onEscape: () => {
+      clearTimer();
+      setOpen(false);
+    }
+  });
+  const tipRefs = useMemo(
+    () => composeRefs(tipRef, positionRef),
+    [positionRef]
+  );
+  if (!isValidElement(children)) {
+    throw new Error("Tooltip expects exactly one element child to use as its trigger.");
+  }
+  if (content === null || content === void 0 || content === false) return children;
+  const childProps = children.props;
+  const describedBy = open ? [childProps["aria-describedby"], tipId].filter(Boolean).join(" ") : childProps["aria-describedby"];
+  const trigger = cloneElement(children, {
+    ref: composeRefs(childProps.ref, triggerRef),
+    "aria-describedby": describedBy,
+    onPointerEnter: (event) => {
+      childProps.onPointerEnter?.(event);
+      if (event.pointerType === "touch") return;
+      scheduleOpen(openDelay);
+    },
+    onPointerLeave: (event) => {
+      childProps.onPointerLeave?.(event);
+      scheduleClose(closeDelay);
+    },
+    onPointerDown: (event) => {
+      childProps.onPointerDown?.(event);
+      pointerDownRef.current = true;
+      clearPressEndListener();
+      const onPressEnd = () => {
+        pointerDownRef.current = false;
+        clearPressEndListener();
+      };
+      pressEndListenerRef.current = onPressEnd;
+      document.addEventListener("pointerup", onPressEnd);
+      document.addEventListener("pointercancel", onPressEnd);
+      clearTimer();
+      setOpen(false);
+    },
+    onFocus: (event) => {
+      childProps.onFocus?.(event);
+      if (pointerDownRef.current) return;
+      scheduleOpen(0);
+    },
+    onBlur: (event) => {
+      childProps.onBlur?.(event);
+      scheduleClose(0);
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    open && typeof document !== "undefined" ? createPortal(
       /* @__PURE__ */ jsx(
-        DndContext,
+        "div",
         {
-          id: optionsDndContextId,
-          sensors: optionsSensors,
-          collisionDetection: closestCenter,
-          onDragEnd: onOptionColumnDragEnd,
-          children: /* @__PURE__ */ jsx(
-            SortableContext,
-            {
-              items: visibleColumns.map((column) => column.id),
-              strategy: verticalListSortingStrategy,
-              children: visibleColumns.map((column) => /* @__PURE__ */ jsx(
-                SortableColumnOptionItem,
-                {
-                  column,
-                  checked: true,
-                  disabled: visibleColumnIds.length === 1,
-                  onCheckedChange: (checked) => toggleColumnVisibility(column.id, checked)
-                },
-                column.id
-              ))
-            }
-          )
+          ref: tipRefs,
+          id: tipId,
+          role: "tooltip",
+          "data-slot": "tooltip",
+          "data-state": "open",
+          "data-side": placement?.side,
+          "data-align": placement?.align,
+          "data-positioned": positioned ? "true" : "false",
+          className: cn(
+            "pointer-events-none fixed z-[110] max-w-xs text-xs font-medium leading-snug",
+            positioned && "ds-enter-pop",
+            className
+          ),
+          style: { ...positionStyle, ...TOOLTIP_SURFACE_STYLE },
+          children: content
         }
       ),
-      hiddenColumns.length > 0 ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
-      hiddenColumns.map((column) => /* @__PURE__ */ jsx(
-        DropdownMenuCheckboxItem,
-        {
-          checked: false,
-          onCheckedChange: (checked) => toggleColumnVisibility(column.id, checked === true),
-          children: column.label
-        },
-        column.id
-      ))
-    ] })
+      document.body
+    ) : null
   ] });
 }
 var VARIANT_CLASS2 = {
@@ -8445,7 +9943,7 @@ var LANGUAGES = {
   javascript,
   js: javascript,
   json,
-  jsx: jsx66,
+  jsx: jsx70,
   markdown,
   md: markdown,
   html: markup,
@@ -9194,26 +10692,6 @@ function HeaderTitle({ title }) {
     /* @__PURE__ */ jsx("span", { style: accent, children: last })
   ] });
 }
-function BenchmarkPlaceholder() {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "flex items-center",
-      style: {
-        gap: 10,
-        padding: "12px 16px",
-        borderRadius: "var(--radius-lg)",
-        background: "rgb(var(--muted))",
-        border: "1px dashed rgb(var(--border))",
-        color: "rgb(var(--text-muted))"
-      },
-      children: [
-        /* @__PURE__ */ jsx(BarChart3, { size: 15 }),
-        /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 500 }, children: "Benchmark unavailable in manual mode" })
-      ]
-    }
-  );
-}
 function AssumptionsPopover({ children }) {
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsxs(
@@ -9307,10 +10785,9 @@ function CalculatorShellV2({
   const header = /* @__PURE__ */ jsxs(
     "header",
     {
-      className: "flex items-center",
+      className: "flex items-center px-4 py-4 sm:px-6 sm:py-5",
       style: {
         gap: 16,
-        padding: "20px 24px",
         background: "rgb(var(--brand-ink))",
         borderRadius: isOpen ? "var(--radius-xl)" : 0
       },
@@ -9334,7 +10811,8 @@ function CalculatorShellV2({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "font-semibold uppercase",
+              className: "font-semibold uppercase truncate",
+              title: eyebrow,
               style: {
                 fontFamily: "var(--font-mono)",
                 fontSize: 11,
@@ -9364,10 +10842,9 @@ function CalculatorShellV2({
   const footer = /* @__PURE__ */ jsxs(
     "footer",
     {
-      className: "flex items-center",
+      className: "flex flex-wrap items-center px-4 py-4 sm:px-6",
       style: {
         gap: 12,
-        padding: "16px 24px",
         borderTop: isOpen ? "none" : "1px solid rgb(var(--border))",
         marginTop: isOpen ? 4 : 0,
         background: isOpen ? "transparent" : "rgb(var(--bg-card))"
@@ -9414,7 +10891,7 @@ function CalculatorShellV2({
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     inputs,
     result,
-    benchmarkSlot ?? /* @__PURE__ */ jsx(BenchmarkPlaceholder, {})
+    benchmarkSlot
   ] });
   return /* @__PURE__ */ jsx(
     "div",
@@ -9448,8 +10925,8 @@ function CalculatorShellV2({
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: "flex flex-col",
-                style: { padding: "var(--space-6)", gap: "var(--space-4)" },
+                className: "flex flex-col p-4 sm:p-6",
+                style: { gap: "var(--space-4)" },
                 children: body
               }
             ),
@@ -9460,90 +10937,104 @@ function CalculatorShellV2({
     }
   );
 }
-function StatRow({ steps, className }) {
-  return /* @__PURE__ */ jsx("div", { className, style: { display: "flex", alignItems: "stretch", gap: 0 }, children: steps.map((s, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    i > 0 && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "flex items-center shrink-0",
-        style: { padding: "0 2px", color: "rgb(var(--text-muted))" },
-        "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx(ArrowRight, { size: 14, strokeWidth: 2.2 })
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-pivotal": s.pivotal ? "true" : void 0,
-        style: {
-          flex: 1,
-          minWidth: 0,
-          borderRadius: "var(--radius-lg)",
-          padding: 5,
-          background: s.pivotal ? "rgb(var(--accent))" : "rgb(var(--brand-ink))"
-        },
-        children: [
+function StatRow({ steps, copyable = false, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid grid-cols-2 gap-2 sm:flex sm:items-stretch sm:gap-0", className),
+      children: steps.map((s, i) => {
+        const panelStyle = {
+          background: "rgb(var(--bg-card))",
+          borderRadius: 10,
+          padding: "12px 10px",
+          minHeight: 46
+        };
+        const figure = /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "font-extrabold tabular-nums",
+            style: {
+              fontSize: 22,
+              letterSpacing: "-0.025em",
+              lineHeight: 1,
+              color: s.pivotal ? "rgb(var(--accent))" : "rgb(var(--foreground))"
+            },
+            children: s.value
+          }
+        );
+        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          i > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "hidden sm:flex items-center shrink-0",
+              style: { padding: "0 2px", color: "rgb(var(--text-muted))" },
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(ArrowRight, { size: 14, strokeWidth: 2.2 })
+            }
+          ),
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "flex items-center",
+              "data-pivotal": s.pivotal ? "true" : void 0,
               style: {
-                gap: 5,
-                padding: "4px 7px 6px",
-                color: "rgb(255 255 255 / 0.7)",
-                minWidth: 0
+                flex: 1,
+                minWidth: 0,
+                borderRadius: "var(--radius-lg)",
+                padding: 5,
+                background: s.pivotal ? "rgb(var(--accent))" : "rgb(var(--brand-ink))"
               },
               children: [
-                /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: s.icon }),
-                /* @__PURE__ */ jsx(
-                  "span",
+                /* @__PURE__ */ jsxs(
+                  "div",
                   {
-                    className: "font-bold uppercase",
-                    title: s.label,
+                    className: "flex items-center",
                     style: {
-                      fontSize: "9.5px",
-                      letterSpacing: "0.05em",
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      minWidth: 0,
-                      flex: 1
+                      gap: 5,
+                      padding: "4px 7px 6px",
+                      color: "rgb(255 255 255 / 0.7)",
+                      minWidth: 0
                     },
-                    children: s.label
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: s.icon }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "font-bold uppercase",
+                          title: s.label,
+                          style: {
+                            fontSize: "9.5px",
+                            letterSpacing: "0.05em",
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            minWidth: 0,
+                            flex: 1
+                          },
+                          children: s.label
+                        }
+                      )
+                    ]
                   }
-                )
+                ),
+                copyable ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => void copyText(s.copyValue ?? s.value, s.label),
+                    title: `Copy ${s.label}`,
+                    "aria-label": `Copy ${s.label}: ${s.value}`,
+                    className: "grid w-full place-items-center text-center cursor-pointer transition-[box-shadow,transform] hover:-translate-y-px hover:[box-shadow:var(--shadow-sm)] focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]",
+                    style: { ...panelStyle, border: "none" },
+                    children: figure
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "grid place-items-center text-center", style: panelStyle, children: figure })
               ]
             }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "grid place-items-center text-center",
-              style: {
-                background: "rgb(var(--bg-card))",
-                borderRadius: 10,
-                padding: "12px 10px",
-                minHeight: 46
-              },
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "font-extrabold tabular-nums",
-                  style: {
-                    fontSize: 22,
-                    letterSpacing: "-0.025em",
-                    lineHeight: 1,
-                    color: s.pivotal ? "rgb(var(--accent))" : "rgb(var(--foreground))"
-                  },
-                  children: s.value
-                }
-              )
-            }
           )
-        ]
-      }
-    )
-  ] }, i)) });
+        ] }, i);
+      })
+    }
+  );
 }
 function Slider({
   value,
@@ -14645,6 +16136,6 @@ var PLACEMENT_CONFIGS = [
   }
 ];
 
-export { AccordionCompound as Accordion, AllocationSparkbar, AppScroll, BRAND_ICONS, Badge, BrandFacebook, BrandIcon, BrandInstagram, BrandLinkedIn, BrandLogoTile, BrandMessenger, BrandMeta, BrandNextdoor, BrandPinterest, BrandSnapchat, BrandTikTok, BulkActionBar, Button, ButtonGroup, CalculatorShell, CalculatorShellV2, card_default as Card, Checkbox, ChipNav, Choropleth, CodeBlock, CollapsibleCard, CompletionRing, CopyField, DataGrid, DataGridColumnOptionsMenu, DataGridDragOverlay, DataGridDropIndicator, DataGridToolbar, DetailSection, DeviceFrame, DragHandle, DropdownButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyPlaceholder, EmptyState, FOLDER_COLOR_KEYS, FileDropZone, FilePreviewGrid, FilePreviewItem, FileThumbnail, FileUploadButton, FilterBar, FilterDropdown, FloatingDrawer, FloatingStatusBar, FolderCard, FolderTreePicker, FrameStack, HEADER_HEIGHT, HeroFormCardCompound as HeroFormCard, HomeCrumbLink, IconTile, IdentityLabel, IdentityValue, Input, Kbd, ListItem, MarkdownCode, MarkdownRenderer, MenuButton, MetaCell, meta_previews_exports as MetaPreviews, MetricCard, MicrosoftLogo, modal_default as Modal, OptionTile, OptionTileGroup, PLACEMENT_CONFIGS, PageHeaderHost, PageHeaderSlotProvider, PageHero, page_shell_default as PageShell, Pagination, PillButton, profile_section_default as ProfileSection, ProgressBar, Radio, RadioGroup, RangeSlider, ResizableHandle, ResizablePane, SECTION_SCROLL_OFFSET, SearchBar, SectionLabel, SegmentedPill, Shell2 as Shell, ShellStat, Slider, SortableItem, SortableList, SortableTable, StatRow, StatsGrid, StepLoader, Tabs, TagChipInput, TagRow, TextInput, Textarea, TextareaInput, Toaster, TokenBadge, ValueChip, bestTextOn, cn, contrastRatio, copyText, folderColorVar, formatCurrency, formatNumber, formatPercent, formatRatio, hasBrandIcon, hexToRgbTuple, hslString, relativeLuminance, rgbCss, rgbString, useBreadcrumbHome, useFileUpload, wcagBadges };
+export { AccordionCompound as Accordion, AllocationSparkbar, AppScroll, BRAND_ICONS, Badge, BrandFacebook, BrandIcon, BrandInstagram, BrandLinkedIn, BrandLogoTile, BrandMessenger, BrandMeta, BrandNextdoor, BrandPinterest, BrandSnapchat, BrandTikTok, BulkActionBar, Button, ButtonGroup, CalculatorShell, CalculatorShellV2, card_default as Card, Checkbox, ChipNav, Choropleth, CodeBlock, CollapsibleCard, Combobox2 as Combobox, CompletionRing, CopyField, DataGrid, DataGridColumnOptionsMenu, DataGridDragOverlay, DataGridDropIndicator, DataGridToolbar, DetailSection, DeviceFrame, DragHandle, DropdownButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyPlaceholder, EmptyState, FOLDER_COLOR_KEYS, FileDropZone, FilePreviewGrid, FilePreviewItem, FileThumbnail, FileUploadButton, FilterBar, FilterDropdown, FloatingDrawer, FloatingStatusBar, FolderCard, FolderTreePicker, FrameStack, HEADER_HEIGHT, HeroFormCardCompound as HeroFormCard, HomeCrumbLink, IconTile, IdentityLabel, IdentityValue, Input, Kbd, LISTBOX_CLASS, ListItem, ListboxOption, MarkdownCode, MarkdownRenderer, MenuButton, MetaCell, meta_previews_exports as MetaPreviews, MetricCard, MicrosoftLogo, modal_default as Modal, OptionTile, OptionTileGroup, PLACEMENT_CONFIGS, POPOVER_SURFACE_STYLE, PageHeaderHost, PageHeaderSlotProvider, PageHero, page_shell_default as PageShell, Pagination, PillButton, Popover, profile_section_default as ProfileSection, ProgressBar, Radio, RadioGroup, RangeSlider, ResizableHandle, ResizablePane, SECTION_SCROLL_OFFSET, SearchBar, SectionLabel, SegmentedPill, Select2 as Select, Shell2 as Shell, ShellStat, Slider, SortableItem, SortableList, SortableTable, StatRow, StatsGrid, StepLoader, Tabs, TagChipInput, TagRow, TextInput, Textarea, TextareaInput, Toaster, TokenBadge, Tooltip, ValueChip, bestTextOn, cn, computeAnchoredPosition, contrastRatio, copyText, folderColorVar, formatCurrency, formatNumber, formatPercent, formatRatio, hasBrandIcon, hexToRgbTuple, hslString, relativeLuminance, rgbCss, rgbString, useAnchoredPosition, useBreadcrumbHome, useEscapeKey, useFileUpload, useLayer, useOutsideClick, wcagBadges };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map