@lovett/ui 0.0.9 → 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, 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';
@@ -11,20 +11,20 @@ import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, close
 import { sortableKeyboardCoordinates, SortableContext, horizontalListSortingStrategy, rectSortingStrategy, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { PrismLight } from 'react-syntax-highlighter';
-import { oneLight, vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism/index.js';
-import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash.js';
-import css from 'react-syntax-highlighter/dist/esm/languages/prism/css.js';
-import diff from 'react-syntax-highlighter/dist/esm/languages/prism/diff.js';
-import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript.js';
-import json from 'react-syntax-highlighter/dist/esm/languages/prism/json.js';
-import jsx66 from 'react-syntax-highlighter/dist/esm/languages/prism/jsx.js';
-import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown.js';
-import markup from 'react-syntax-highlighter/dist/esm/languages/prism/markup.js';
-import python from 'react-syntax-highlighter/dist/esm/languages/prism/python.js';
-import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql.js';
-import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx.js';
-import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript.js';
-import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml.js';
+import { oneLight, vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
+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 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';
+import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
+import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
+import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
+import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
@@ -481,15 +481,159 @@ var Textarea = forwardRef(function Textarea2({ error, shellClassName, className,
     }
   );
 });
-function Modal({ isOpen, onClose, title, children, className }) {
+
+// src/lib/focus.ts
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "summary",
+  '[contenteditable="true"]',
+  "[tabindex]"
+].join(",");
+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();
   useEffect(() => {
     if (!isOpen) return;
-    const handleEscape = (e) => {
-      if (e.key === "Escape") onClose();
+    const panel = panelRef.current;
+    if (!panel) return;
+    const previous = document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : null;
+    const initial = panel.querySelector("[data-autofocus]");
+    (initial ?? panel).focus();
+    return () => {
+      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 (e.key !== "Tab") return;
+      if (!layer.isTopOfKind()) return;
+      const active = document.activeElement;
+      if (!(active instanceof HTMLElement) || !panel.contains(active)) return;
+      const tabbables = tabbablesWithin(panel);
+      const first = tabbables[0];
+      const last = tabbables[tabbables.length - 1];
+      if (!first || !last) {
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+      if (active === panel) {
+        if (e.shiftKey) {
+          e.preventDefault();
+          last.focus();
+        }
+        return;
+      }
+      if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
     };
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [isOpen, onClose]);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, layer]);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
     /* @__PURE__ */ jsx(
@@ -503,6 +647,12 @@ function Modal({ isOpen, onClose, title, children, className }) {
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": title ? void 0 : ariaLabel,
+        tabIndex: -1,
         "data-framed": "true",
         className: cn(
           "ds-card-surface relative w-full max-w-2xl flex flex-col max-h-[90vh] overflow-hidden",
@@ -511,7 +661,14 @@ function Modal({ isOpen, onClose, title, children, className }) {
         style: { borderRadius: "var(--radius-xl)" },
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 shrink-0 px-4 py-3", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-[15px] font-bold tracking-[-0.01em] text-[rgb(var(--foreground))]", children: title }),
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                id: titleId,
+                className: "text-[15px] font-bold tracking-[-0.01em] text-[rgb(var(--foreground))]",
+                children: title
+              }
+            ),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -1626,6 +1783,86 @@ var BRAND_ICONS = {
   snapchat: BrandSnapchat,
   tiktok: BrandTikTok
 };
+var COLOR_MARKS = {
+  instagram: { viewBox: "0 0 256 256", path: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M128 23.064c34.177 0 38.225.13 51.722.745c12.48.57 19.258 2.655 23.769 4.408c5.974 2.322 10.238 5.096 14.717 9.575s7.253 8.743 9.575 14.717c1.753 4.511 3.838 11.289 4.408 23.768c.615 13.498.745 17.546.745 51.723s-.13 38.226-.745 51.723c-.57 12.48-2.655 19.257-4.408 23.768c-2.322 5.974-5.096 10.239-9.575 14.718s-8.743 7.253-14.717 9.574c-4.511 1.753-11.289 3.839-23.769 4.408c-13.495.616-17.543.746-51.722.746s-38.228-.13-51.723-.746c-12.48-.57-19.257-2.655-23.768-4.408c-5.974-2.321-10.239-5.095-14.718-9.574c-4.479-4.48-7.253-8.744-9.574-14.718c-1.753-4.51-3.839-11.288-4.408-23.768c-.616-13.497-.746-17.545-.746-51.723s.13-38.225.746-51.722c.57-12.48 2.655-19.258 4.408-23.769c2.321-5.974 5.095-10.238 9.574-14.717c4.48-4.48 8.744-7.253 14.718-9.575c4.51-1.753 11.288-3.838 23.768-4.408c13.497-.615 17.545-.745 51.723-.745M128 0C93.237 0 88.878.147 75.226.77c-13.625.622-22.93 2.786-31.071 5.95c-8.418 3.271-15.556 7.648-22.672 14.764S9.991 35.738 6.72 44.155C3.555 52.297 1.392 61.602.77 75.226C.147 88.878 0 93.237 0 128s.147 39.122.77 52.774c.622 13.625 2.785 22.93 5.95 31.071c3.27 8.417 7.647 15.556 14.763 22.672s14.254 11.492 22.672 14.763c8.142 3.165 17.446 5.328 31.07 5.95c13.653.623 18.012.77 52.775.77s39.122-.147 52.774-.77c13.624-.622 22.929-2.785 31.07-5.95c8.418-3.27 15.556-7.647 22.672-14.763s11.493-14.254 14.764-22.672c3.164-8.142 5.328-17.446 5.95-31.07c.623-13.653.77-18.012.77-52.775s-.147-39.122-.77-52.774c-.622-13.624-2.786-22.929-5.95-31.07c-3.271-8.418-7.648-15.556-14.764-22.672S220.262 9.99 211.845 6.72c-8.142-3.164-17.447-5.328-31.071-5.95C167.122.147 162.763 0 128 0m0 62.27c-36.302 0-65.73 29.43-65.73 65.73s29.428 65.73 65.73 65.73c36.301 0 65.73-29.428 65.73-65.73c0-36.301-29.429-65.73-65.73-65.73m0 108.397c-23.564 0-42.667-19.103-42.667-42.667S104.436 85.333 128 85.333s42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667m83.686-110.994c0 8.484-6.876 15.36-15.36 15.36s-15.36-6.876-15.36-15.36s6.877-15.36 15.36-15.36s15.36 6.877 15.36 15.36" }) }) },
+  facebook: { viewBox: "0 0 256 256", path: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { fill: "#1877f2", d: "M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445" }),
+    /* @__PURE__ */ jsx("path", { fill: "#fff", d: "m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A129 129 0 0 0 128 256a129 129 0 0 0 20-1.555V165z" })
+  ] }) },
+  meta: { viewBox: "0 0 256 171", path: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsxs("linearGradient", { id: "SVGYeLhubCc", x1: "13.878%", x2: "89.144%", y1: "55.934%", y2: "58.694%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#0064e1" }),
+        /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "#0064e1" }),
+        /* @__PURE__ */ jsx("stop", { offset: "83%", stopColor: "#0073ee" }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#0082fb" })
+      ] }),
+      /* @__PURE__ */ jsxs("linearGradient", { id: "SVGll66Sdsg", x1: "54.315%", x2: "54.315%", y1: "82.782%", y2: "39.307%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#0082fb" }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#0064e0" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("path", { fill: "#0081fb", d: "M27.651 112.136c0 9.775 2.146 17.28 4.95 21.82c3.677 5.947 9.16 8.466 14.751 8.466c7.211 0 13.808-1.79 26.52-19.372c10.185-14.092 22.186-33.874 30.26-46.275l13.675-21.01c9.499-14.591 20.493-30.811 33.1-41.806C161.196 4.985 172.298 0 183.47 0c18.758 0 36.625 10.87 50.3 31.257C248.735 53.584 256 81.707 256 110.729c0 17.253-3.4 29.93-9.187 39.946c-5.591 9.686-16.488 19.363-34.818 19.363v-27.616c15.695 0 19.612-14.422 19.612-30.927c0-23.52-5.484-49.623-17.564-68.273c-8.574-13.23-19.684-21.313-31.907-21.313c-13.22 0-23.859 9.97-35.815 27.75c-6.356 9.445-12.882 20.956-20.208 33.944l-8.066 14.289c-16.203 28.728-20.307 35.271-28.408 46.07c-14.2 18.91-26.324 26.076-42.287 26.076c-18.935 0-30.91-8.2-38.325-20.556C2.973 139.413 0 126.202 0 111.148z" }),
+    /* @__PURE__ */ jsx("path", { fill: "url(#SVGYeLhubCc)", d: "M21.802 33.206C34.48 13.666 52.774 0 73.757 0C85.91 0 97.99 3.597 110.605 13.897c13.798 11.261 28.505 29.805 46.853 60.368l6.58 10.967c15.881 26.459 24.917 40.07 30.205 46.49c6.802 8.243 11.565 10.7 17.752 10.7c15.695 0 19.612-14.422 19.612-30.927l24.393-.766c0 17.253-3.4 29.93-9.187 39.946c-5.591 9.686-16.488 19.363-34.818 19.363c-11.395 0-21.49-2.475-32.654-13.007c-8.582-8.083-18.615-22.443-26.334-35.352l-22.96-38.352C118.528 64.08 107.96 49.73 101.845 43.23c-6.578-6.988-15.036-15.428-28.532-15.428c-10.923 0-20.2 7.666-27.963 19.39z" }),
+    /* @__PURE__ */ jsx("path", { fill: "url(#SVGll66Sdsg)", d: "M73.312 27.802c-10.923 0-20.2 7.666-27.963 19.39c-10.976 16.568-17.698 41.245-17.698 64.944c0 9.775 2.146 17.28 4.95 21.82L9.027 149.482C2.973 139.413 0 126.202 0 111.148C0 83.772 7.514 55.24 21.802 33.206C34.48 13.666 52.774 0 73.757 0z" })
+  ] }) },
+  x: { viewBox: "0 0 251 256", path: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("path", { d: "M149.079 108.399L242.33 0h-22.098l-80.97 94.12L74.59 0H0l97.796 142.328L0 256h22.1l85.507-99.395L175.905 256h74.59L149.073 108.399zM118.81 143.58l-9.909-14.172l-78.84-112.773h33.943l63.625 91.011l9.909 14.173l82.705 118.3H186.3l-67.49-96.533z" }) }) },
+  linkedin: { viewBox: "0 0 256 256", path: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("path", { fill: "#0a66c2", d: "M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4c-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.91 39.91 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186zM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009s9.851-22.014 22.008-22.016c12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97zM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453" }) }) },
+  youtube: { viewBox: "0 0 256 180", path: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { fill: "red", d: "M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134" }),
+    /* @__PURE__ */ jsx("path", { fill: "#fff", d: "m102.421 128.06l66.328-38.418l-66.328-38.418z" })
+  ] }) },
+  pinterest: { viewBox: "0 0 256 256", path: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("path", { fill: "#cb1f27", d: "M0 128.002c0 52.414 31.518 97.442 76.619 117.239c-.36-8.938-.064-19.668 2.228-29.393c2.461-10.391 16.47-69.748 16.47-69.748s-4.089-8.173-4.089-20.252c0-18.969 10.994-33.136 24.686-33.136c11.643 0 17.268 8.745 17.268 19.217c0 11.704-7.465 29.211-11.304 45.426c-3.207 13.578 6.808 24.653 20.203 24.653c24.252 0 40.586-31.149 40.586-68.055c0-28.054-18.895-49.052-53.262-49.052c-38.828 0-63.017 28.956-63.017 61.3c0 11.152 3.288 19.016 8.438 25.106c2.368 2.797 2.697 3.922 1.84 7.134c-.614 2.355-2.024 8.025-2.608 10.272c-.852 3.242-3.479 4.401-6.409 3.204c-17.884-7.301-26.213-26.886-26.213-48.902c0-36.361 30.666-79.961 91.482-79.961c48.87 0 81.035 35.364 81.035 73.325c0 50.213-27.916 87.726-69.066 87.726c-13.819 0-26.818-7.47-31.271-15.955c0 0-7.431 29.492-9.005 35.187c-2.714 9.869-8.026 19.733-12.883 27.421a127.9 127.9 0 0 0 36.277 5.249c70.684 0 127.996-57.309 127.996-128.005C256.001 57.309 198.689 0 128.005 0C57.314 0 0 57.309 0 128.002" }) }) },
+  tiktok: { viewBox: "0 0 256 290", path: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { fill: "#ff004f", d: "M189.72 104.421c18.678 13.345 41.56 21.197 66.273 21.197v-47.53a67 67 0 0 1-13.918-1.456v37.413c-24.711 0-47.59-7.851-66.272-21.195v96.996c0 48.523-39.356 87.855-87.9 87.855c-18.113 0-34.949-5.473-48.934-14.86c15.962 16.313 38.222 26.432 62.848 26.432c48.548 0 87.905-39.332 87.905-87.857v-96.995zm17.17-47.952c-9.546-10.423-15.814-23.893-17.17-38.785v-6.113h-13.189c3.32 18.927 14.644 35.097 30.358 44.898M69.673 225.607a40 40 0 0 1-8.203-24.33c0-22.192 18.001-40.186 40.21-40.186a40.3 40.3 0 0 1 12.197 1.883v-48.593c-4.61-.631-9.262-.9-13.912-.801v37.822a40.3 40.3 0 0 0-12.203-1.882c-22.208 0-40.208 17.992-40.208 40.187c0 15.694 8.997 29.281 22.119 35.9" }),
+    /* @__PURE__ */ jsx("path", { d: "M175.803 92.849c18.683 13.344 41.56 21.195 66.272 21.195V76.631c-13.794-2.937-26.005-10.141-35.186-20.162c-15.715-9.802-27.038-25.972-30.358-44.898h-34.643v189.843c-.079 22.132-18.049 40.052-40.21 40.052c-13.058 0-24.66-6.221-32.007-15.86c-13.12-6.618-22.118-20.206-22.118-35.898c0-22.193 18-40.187 40.208-40.187c4.255 0 8.356.662 12.203 1.882v-37.822c-47.692.985-86.047 39.933-86.047 87.834c0 23.912 9.551 45.589 25.053 61.428c13.985 9.385 30.82 14.86 48.934 14.86c48.545 0 87.9-39.335 87.9-87.857z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#00f2ea", d: "M242.075 76.63V66.516a66.3 66.3 0 0 1-35.186-10.047a66.47 66.47 0 0 0 35.186 20.163M176.53 11.57a68 68 0 0 1-.728-5.457V0h-47.834v189.845c-.076 22.13-18.046 40.05-40.208 40.05a40.06 40.06 0 0 1-18.09-4.287c7.347 9.637 18.949 15.857 32.007 15.857c22.16 0 40.132-17.918 40.21-40.05V11.571zM99.966 113.58v-10.769a89 89 0 0 0-12.061-.818C39.355 101.993 0 141.327 0 189.845c0 30.419 15.467 57.227 38.971 72.996c-15.502-15.838-25.053-37.516-25.053-61.427c0-47.9 38.354-86.848 86.048-87.833" })
+  ] }) },
+  snapchat: { viewBox: "147.353 39.286 514.631 514.631", path: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { style: { fill: "#FFFC00" }, d: "M147.553,423.021v0.023c0.308,11.424,0.403,22.914,2.33,34.268 c2.042,12.012,4.961,23.725,10.53,34.627c7.529,14.756,17.869,27.217,30.921,37.396c9.371,7.309,19.608,13.111,30.94,16.771 c16.524,5.33,33.571,7.373,50.867,7.473c10.791,0.068,21.575,0.338,32.37,0.293c78.395-0.33,156.792,0.566,235.189-0.484 c10.403-0.141,20.636-1.41,30.846-3.277c19.569-3.582,36.864-11.932,51.661-25.133c17.245-15.381,28.88-34.205,34.132-56.924 c3.437-14.85,4.297-29.916,4.444-45.035v-3.016c0-1.17-0.445-256.892-0.486-260.272c-0.115-9.285-0.799-18.5-2.54-27.636 c-2.117-11.133-5.108-21.981-10.439-32.053c-5.629-10.641-12.68-20.209-21.401-28.57c-13.359-12.81-28.775-21.869-46.722-26.661 c-16.21-4.327-32.747-5.285-49.405-5.27c-0.027-0.004-0.09-0.173-0.094-0.255H278.56c-0.005,0.086-0.008,0.172-0.014,0.255 c-9.454,0.173-18.922,0.102-28.328,1.268c-10.304,1.281-20.509,3.21-30.262,6.812c-15.362,5.682-28.709,14.532-40.11,26.347 c-12.917,13.386-22.022,28.867-26.853,46.894c-4.31,16.084-5.248,32.488-5.271,49.008", children: " " }),
+    " ",
+    /* @__PURE__ */ jsx("path", { style: { fill: "#FFFFFF" }, d: "M407.001,473.488c-1.068,0-2.087-0.039-2.862-0.076c-0.615,0.053-1.25,0.076-1.886,0.076 c-22.437,0-37.439-10.607-50.678-19.973c-9.489-6.703-18.438-13.031-28.922-14.775c-5.149-0.854-10.271-1.287-15.22-1.287 c-8.917,0-15.964,1.383-21.109,2.389c-3.166,0.617-5.896,1.148-8.006,1.148c-2.21,0-4.895-0.49-6.014-4.311 c-0.887-3.014-1.523-5.934-2.137-8.746c-1.536-7.027-2.65-11.316-5.281-11.723c-28.141-4.342-44.768-10.738-48.08-18.484 c-0.347-0.814-0.541-1.633-0.584-2.443c-0.129-2.309,1.501-4.334,3.777-4.711c22.348-3.68,42.219-15.492,59.064-35.119 c13.049-15.195,19.457-29.713,20.145-31.316c0.03-0.072,0.065-0.148,0.101-0.217c3.247-6.588,3.893-12.281,1.926-16.916 c-3.626-8.551-15.635-12.361-23.58-14.882c-1.976-0.625-3.845-1.217-5.334-1.808c-7.043-2.782-18.626-8.66-17.083-16.773 c1.124-5.916,8.949-10.036,15.273-10.036c1.756,0,3.312,0.308,4.622,0.923c7.146,3.348,13.575,5.045,19.104,5.045 c6.876,0,10.197-2.618,11-3.362c-0.198-3.668-0.44-7.546-0.674-11.214c0-0.004-0.005-0.048-0.005-0.048 c-1.614-25.675-3.627-57.627,4.546-75.95c24.462-54.847,76.339-59.112,91.651-59.112c0.408,0,6.674-0.062,6.674-0.062 c0.283-0.005,0.59-0.009,0.908-0.009c15.354,0,67.339,4.27,91.816,59.15c8.173,18.335,6.158,50.314,4.539,76.016l-0.076,1.23 c-0.222,3.49-0.427,6.793-0.6,9.995c0.756,0.696,3.795,3.096,9.978,3.339c5.271-0.202,11.328-1.891,17.998-5.014 c2.062-0.968,4.345-1.169,5.895-1.169c2.343,0,4.727,0.456,6.714,1.285l0.106,0.041c5.66,2.009,9.367,6.024,9.447,10.242 c0.071,3.932-2.851,9.809-17.223,15.485c-1.472,0.583-3.35,1.179-5.334,1.808c-7.952,2.524-19.951,6.332-23.577,14.878 c-1.97,4.635-1.322,10.326,1.926,16.912c0.036,0.072,0.067,0.145,0.102,0.221c1,2.344,25.205,57.535,79.209,66.432 c2.275,0.379,3.908,2.406,3.778,4.711c-0.048,0.828-0.248,1.656-0.598,2.465c-3.289,7.703-19.915,14.09-48.064,18.438 c-2.642,0.408-3.755,4.678-5.277,11.668c-0.63,2.887-1.271,5.717-2.146,8.691c-0.819,2.797-2.641,4.164-5.567,4.164h-0.441 c-1.905,0-4.604-0.346-8.008-1.012c-5.95-1.158-12.623-2.236-21.109-2.236c-4.948,0-10.069,0.434-15.224,1.287 c-10.473,1.744-19.421,8.062-28.893,14.758C444.443,462.88,429.436,473.488,407.001,473.488", children: " " }),
+    " ",
+    /* @__PURE__ */ jsx("path", { style: { fill: "#020202" }, d: "M408.336,124.235c14.455,0,64.231,3.883,87.688,56.472c7.724,17.317,5.744,48.686,4.156,73.885 c-0.248,3.999-0.494,7.875-0.694,11.576l-0.084,1.591l1.062,1.185c0.429,0.476,4.444,4.672,13.374,5.017l0.144,0.008l0.15-0.003 c5.904-0.225,12.554-2.059,19.776-5.442c1.064-0.498,2.48-0.741,3.978-0.741c1.707,0,3.521,0.321,5.017,0.951l0.226,0.09 c3.787,1.327,6.464,3.829,6.505,6.093c0.022,1.28-0.935,5.891-14.359,11.194c-1.312,0.518-3.039,1.069-5.041,1.7 c-8.736,2.774-21.934,6.96-26.376,17.427c-2.501,5.896-1.816,12.854,2.034,20.678c1.584,3.697,26.52,59.865,82.631,69.111 c-0.011,0.266-0.079,0.557-0.229,0.9c-0.951,2.24-6.996,9.979-44.612,15.783c-5.886,0.902-7.328,7.5-9,15.17 c-0.604,2.746-1.218,5.518-2.062,8.381c-0.258,0.865-0.306,0.914-1.233,0.914c-0.128,0-0.278,0-0.442,0 c-1.668,0-4.2-0.346-7.135-0.922c-5.345-1.041-12.647-2.318-21.982-2.318c-5.21,0-10.577,0.453-15.962,1.352 c-11.511,1.914-20.872,8.535-30.786,15.543c-13.314,9.408-27.075,19.143-48.071,19.143c-0.917,0-1.812-0.031-2.709-0.076 l-0.236-0.01l-0.237,0.018c-0.515,0.045-1.034,0.068-1.564,0.068c-20.993,0-34.76-9.732-48.068-19.143 c-9.916-7.008-19.282-13.629-30.791-15.543c-5.38-0.896-10.752-1.352-15.959-1.352c-9.333,0-16.644,1.428-21.978,2.471 c-2.935,0.574-5.476,1.066-7.139,1.066c-1.362,0-1.388-0.08-1.676-1.064c-0.844-2.865-1.461-5.703-2.062-8.445 c-1.676-7.678-3.119-14.312-9.002-15.215c-37.613-5.809-43.659-13.561-44.613-15.795c-0.149-0.352-0.216-0.652-0.231-0.918 c56.11-9.238,81.041-65.408,82.63-69.119c3.857-7.818,4.541-14.775,2.032-20.678c-4.442-10.461-17.638-14.653-26.368-17.422 c-2.007-0.635-3.735-1.187-5.048-1.705c-11.336-4.479-14.823-8.991-14.305-11.725c0.601-3.153,6.067-6.359,10.837-6.359 c1.072,0,2.012,0.173,2.707,0.498c7.747,3.631,14.819,5.472,21.022,5.472c9.751,0,14.091-4.537,14.557-5.055l1.057-1.182 l-0.085-1.583c-0.197-3.699-0.44-7.574-0.696-11.565c-1.583-25.205-3.563-56.553,4.158-73.871 c23.37-52.396,72.903-56.435,87.525-56.435c0.36,0,6.717-0.065,6.717-0.065C407.744,124.239,408.033,124.235,408.336,124.235 M408.336,115.197h-0.017c-0.333,0-0.646,0-0.944,0.004c-2.376,0.024-6.282,0.062-6.633,0.066c-8.566,0-25.705,1.21-44.115,9.336 c-10.526,4.643-19.994,10.921-28.14,18.66c-9.712,9.221-17.624,20.59-23.512,33.796c-8.623,19.336-6.576,51.905-4.932,78.078 l0.006,0.041c0.176,2.803,0.361,5.73,0.53,8.582c-1.265,0.581-3.316,1.194-6.339,1.194c-4.864,0-10.648-1.555-17.187-4.619 c-1.924-0.896-4.12-1.349-6.543-1.349c-3.893,0-7.997,1.146-11.557,3.239c-4.479,2.63-7.373,6.347-8.159,10.468 c-0.518,2.726-0.493,8.114,5.492,13.578c3.292,3.008,8.128,5.782,14.37,8.249c1.638,0.645,3.582,1.261,5.641,1.914 c7.145,2.271,17.959,5.702,20.779,12.339c1.429,3.365,0.814,7.793-1.823,13.145c-0.069,0.146-0.138,0.289-0.201,0.439 c-0.659,1.539-6.807,15.465-19.418,30.152c-7.166,8.352-15.059,15.332-23.447,20.752c-10.238,6.617-21.316,10.943-32.923,12.855 c-4.558,0.748-7.813,4.809-7.559,9.424c0.078,1.33,0.39,2.656,0.931,3.939c0.004,0.008,0.009,0.016,0.013,0.023 c1.843,4.311,6.116,7.973,13.063,11.203c8.489,3.943,21.185,7.26,37.732,9.855c0.836,1.59,1.704,5.586,2.305,8.322 c0.629,2.908,1.285,5.898,2.22,9.074c1.009,3.441,3.626,7.553,10.349,7.553c2.548,0,5.478-0.574,8.871-1.232 c4.969-0.975,11.764-2.305,20.245-2.305c4.702,0,9.575,0.414,14.48,1.229c9.455,1.574,17.606,7.332,27.037,14 c13.804,9.758,29.429,20.803,53.302,20.803c0.651,0,1.304-0.021,1.949-0.066c0.789,0.037,1.767,0.066,2.799,0.066 c23.88,0,39.501-11.049,53.29-20.799l0.022-0.02c9.433-6.66,17.575-12.41,27.027-13.984c4.903-0.814,9.775-1.229,14.479-1.229 c8.102,0,14.517,1.033,20.245,2.15c3.738,0.736,6.643,1.09,8.872,1.09l0.218,0.004h0.226c4.917,0,8.53-2.699,9.909-7.422 c0.916-3.109,1.57-6.029,2.215-8.986c0.562-2.564,1.46-6.674,2.296-8.281c16.558-2.6,29.249-5.91,37.739-9.852 c6.931-3.215,11.199-6.873,13.053-11.166c0.556-1.287,0.881-2.621,0.954-3.979c0.261-4.607-2.999-8.676-7.56-9.424 c-51.585-8.502-74.824-61.506-75.785-63.758c-0.062-0.148-0.132-0.295-0.205-0.438c-2.637-5.354-3.246-9.777-1.816-13.148 c2.814-6.631,13.621-10.062,20.771-12.332c2.07-0.652,4.021-1.272,5.646-1.914c7.039-2.78,12.07-5.796,15.389-9.221 c3.964-4.083,4.736-7.995,4.688-10.555c-0.121-6.194-4.856-11.698-12.388-14.393c-2.544-1.052-5.445-1.607-8.399-1.607 c-2.011,0-4.989,0.276-7.808,1.592c-6.035,2.824-11.441,4.368-16.082,4.588c-2.468-0.125-4.199-0.66-5.32-1.171 c0.141-2.416,0.297-4.898,0.458-7.486l0.067-1.108c1.653-26.19,3.707-58.784-4.92-78.134c-5.913-13.253-13.853-24.651-23.604-33.892 c-8.178-7.744-17.678-14.021-28.242-18.661C434.052,116.402,416.914,115.197,408.336,115.197", children: " " }),
+    " ",
+    /* @__PURE__ */ jsx("rect", { x: "147.553", y: "39.443", style: { fill: "none" }, width: "514.231", height: "514.23", children: " " })
+  ] }) },
+  google: { viewBox: "0 0 256 262", path: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { fill: "#4285f4", d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" }),
+    /* @__PURE__ */ jsx("path", { fill: "#34a853", d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" }),
+    /* @__PURE__ */ jsx("path", { fill: "#fbbc05", d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#eb4335", d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" })
+  ] }) },
+  amazon: { viewBox: "0 0 512 512", path: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "m0 0H512V512H0", fill: "#f90" }),
+    /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M283 187c-62 2-121 19-121 81 0 43 26 64 61 64 31 0 51-12 68-30 8 11 10 16 24 27q5 3 10-1l31-27q4-4 0-10c-7-11-15-19-15-39v-64c0-27 2-52-18-70-17-16-38-20-62-21-53-1-88 28-93 62q-1 8 7 9l37 5c6 1 9-4 10-8 6-22 29-28 43-23 20 6 18 29 18 45m-36 105c-15 0-25-13-25-30 1-36 29-42 61-42v18c0 32-17 54-36 54m168 106c13-11 26-38 25-57 0-7-1-8-8-10-13-4-46-5-62 10-3 3-2 5 1 5 11-2 45-6 50 2 4 7-8 35-12 47-2 5 2 6 6 3M58 342c96 91 247 94 345 25 7-4 0-12-6-9A376 376 0 0162 337c-4-3-8 2-4 5" })
+  ] }) },
+  walmart: { viewBox: "-231.5 619.2 64 64", path: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("path", { d: "M-199.47 640.732c1.488 0 2.778-.794 2.878-1.786l1.488-16.77c0-1.687-1.985-2.977-4.366-2.977-2.48 0-4.366 1.4-4.366 2.977l1.488 16.77c.1.992 1.4 1.786 2.878 1.786M-208.6 646c.794-1.3.695-2.778-.1-3.374L-222.492 633c-1.4-.794-3.572.198-4.763 2.282s-.992 4.465.397 5.26l15.28 7.144c.992.298 2.282-.397 2.977-1.687m18.16 0c.794 1.3 2.084 1.984 2.977 1.588l15.28-7.144c1.4-.794 1.687-3.175.397-5.26-1.2-2.084-3.374-3.076-4.763-2.282l-13.792 9.625c-.794.695-.893 2.183-.1 3.473m-9.027 15.678c1.488 0 2.778.794 2.878 1.786l1.488 16.77c0 1.687-1.985 2.977-4.366 2.977-2.48 0-4.366-1.4-4.366-2.977l1.488-16.77c.1-.992 1.4-1.786 2.878-1.786m9.027-5.277c.794-1.3 2.084-1.985 2.977-1.588l15.28 7.045c1.4.794 1.687 3.175.397 5.26-1.2 2.084-3.374 3.076-4.763 2.282l-13.792-9.625c-.794-.595-.893-2.084-.1-3.374m-18.157 0c.794 1.3.695 2.778-.1 3.374l-13.792 9.625c-1.4.794-3.572-.198-4.763-2.282s-.992-4.465.397-5.26l15.28-7.045c.992-.397 2.282.298 2.977 1.588" }) }) }
+};
+function hasBrandIcon(name) {
+  return name in COLOR_MARKS;
+}
+function BrandIcon({ name, size = 16, className, title }) {
+  const mark = COLOR_MARKS[name];
+  if (!mark) return null;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: mark.viewBox,
+      width: size,
+      height: size,
+      className,
+      preserveAspectRatio: "xMidYMid meet",
+      role: title ? "img" : void 0,
+      "aria-hidden": title ? void 0 : true,
+      focusable: "false",
+      children: [
+        title && /* @__PURE__ */ jsx("title", { children: title }),
+        mark.path
+      ]
+    }
+  );
+}
 var RING_FILLS = ["rgb(var(--accent) / 0.45)", "rgb(var(--accent) / 0.28)", "rgb(var(--accent) / 0.14)"];
 var RING_STROKE = "rgb(var(--accent) / 0.5)";
 var GRID_STROKE = "rgb(var(--foreground) / 0.04)";
@@ -1655,7 +1892,10 @@ function Choropleth({ mode = "radius", className, style }) {
   );
 }
 var PageHeaderSlotContext = createContext(null);
-function PageHeaderSlotProvider({ children }) {
+function PageHeaderSlotProvider({
+  children,
+  home = null
+}) {
   const [hostEl, setHostEl] = useState(null);
   const [centerEl, setCenterEl] = useState(null);
   const [scrollEl, setScrollEl] = useState(null);
@@ -1669,6 +1909,7 @@ function PageHeaderSlotProvider({ children }) {
     PageHeaderSlotContext.Provider,
     {
       value: {
+        home,
         hostEl,
         centerEl,
         scrollEl,
@@ -1858,17 +2099,39 @@ function PageHeaderHost({
     }
   );
 }
+function useBreadcrumbHome() {
+  return useContext(PageHeaderSlotContext)?.home ?? null;
+}
+function HomeCrumbLink({ home }) {
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      to: home.to,
+      "aria-label": home.label,
+      title: home.label,
+      className: "shrink-0 flex items-center transition-colors hover:text-[rgb(var(--foreground))]",
+      style: { color: "inherit" },
+      children: /* @__PURE__ */ jsx(House, { className: "h-[15px] w-[15px]", strokeWidth: 1.9, "aria-hidden": "true" })
+    }
+  );
+}
 function Breadcrumbs({
   parents,
   current
 }) {
+  const home = useBreadcrumbHome();
+  const visibleParents = home && parents[0]?.to === home.to ? parents.slice(1) : parents;
   return /* @__PURE__ */ jsxs(
     "nav",
     {
       className: "flex items-center gap-1.5 text-[13px] min-w-0",
       style: { color: "rgb(var(--text-tertiary))" },
       children: [
-        parents.map((c, i) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 min-w-0", children: [
+        home && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(HomeCrumbLink, { home }),
+          (visibleParents.length > 0 || current) && /* @__PURE__ */ jsx("span", { className: "shrink-0", style: { color: "rgb(var(--text-muted))" }, children: "/" })
+        ] }),
+        visibleParents.map((c, i) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 min-w-0", children: [
           c.to ? /* @__PURE__ */ jsx(
             Link,
             {
@@ -2412,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))",
@@ -2426,7 +2699,9 @@ function MetricCard({
   tone = "neutral",
   icon,
   labelPosition = "bottom",
-  className
+  className,
+  copyable = false,
+  copyValue
 }) {
   const labelEl = labelPosition === "top" ? /* @__PURE__ */ jsx(
     "div",
@@ -2454,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";
@@ -2727,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(
@@ -3426,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);
@@ -3463,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
@@ -3491,8 +4168,8 @@ function DropdownMenuTrigger({
       children
     }
   );
-}
-function DropdownMenuContent({
+});
+var DropdownMenuContent = forwardRef(function DropdownMenuContent2({
   children,
   align = "start",
   alignOffset = 0,
@@ -3501,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,
@@ -3603,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",
@@ -3640,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",
@@ -3686,7 +4312,7 @@ function DropdownMenuCheckboxItem({
       ]
     }
   );
-}
+});
 function DropdownMenuSeparator({
   className,
   ...rest
@@ -5331,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 = {
@@ -7285,7 +8967,14 @@ function SegmentedPill({
         className
       ),
       style: {
-        background: "rgb(var(--surface-overlay-soft))",
+        // OPAQUE. This was --surface-overlay-soft, a translucent tint, with a
+        // translucent --accent-subtle pill on top of it — two alpha layers
+        // stacked. In light that composited to a 245 pill inside a 247 strip:
+        // the ACTIVE segment rendered DARKER than the track it sits in, so the
+        // raised element read as recessed and the whole control looked washed
+        // out. --surface-frame is the recessed-well token and is darker than
+        // --surface-card in BOTH themes, so the direction holds either way.
+        background: "rgb(var(--surface-frame))",
         border: "1px solid rgb(var(--border))",
         borderRadius: "var(--radius-full)"
       },
@@ -7314,9 +9003,17 @@ function SegmentedPill({
             style: {
               borderRadius: "var(--radius-full)",
               ...isActive ? {
-                background: "rgb(var(--accent-subtle))",
+                // The active segment STEPS UP off the track: an opaque
+                // surface sandwiched between the accent border and the
+                // strip, plus a small shadow. --surface-card is +8 on the
+                // frame in light and +6 in dark, so it reads raised in both.
+                background: "rgb(var(--surface-card))",
                 border: "1px solid rgb(var(--accent))",
-                color: "rgb(var(--accent))"
+                // --accent-ink, not --accent: the brand red is 5.64:1 on a
+                // light card but 3.05:1 on a dark one, i.e. an accent LABEL
+                // fails AA in dark. --accent-ink is the theme-tuned form.
+                color: "rgb(var(--accent-ink))",
+                boxShadow: "var(--shadow-sm)"
               } : {
                 background: "transparent",
                 border: "1px solid transparent",
@@ -7329,7 +9026,7 @@ function SegmentedPill({
                 {
                   className: "inline-flex shrink-0",
                   style: {
-                    color: isActive ? "rgb(var(--accent))" : "rgb(var(--text-muted))"
+                    color: isActive ? "rgb(var(--accent-ink))" : "rgb(var(--text-muted))"
                   },
                   "aria-hidden": "true",
                   children: item.icon
@@ -8246,7 +9943,7 @@ var LANGUAGES = {
   javascript,
   js: javascript,
   json,
-  jsx: jsx66,
+  jsx: jsx70,
   markdown,
   md: markdown,
   html: markup,
@@ -8995,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(
@@ -9108,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
       },
@@ -9135,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,
@@ -9165,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))"
@@ -9215,7 +10891,7 @@ function CalculatorShellV2({
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     inputs,
     result,
-    benchmarkSlot ?? /* @__PURE__ */ jsx(BenchmarkPlaceholder, {})
+    benchmarkSlot
   ] });
   return /* @__PURE__ */ jsx(
     "div",
@@ -9249,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
               }
             ),
@@ -9261,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,
@@ -14446,6 +16136,6 @@ var PLACEMENT_CONFIGS = [
   }
 ];
 
-export { AccordionCompound as Accordion, AllocationSparkbar, AppScroll, BRAND_ICONS, Badge, BrandFacebook, 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, 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, hexToRgbTuple, hslString, relativeLuminance, rgbCss, rgbString, 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