@mediaradar/design-components 0.19.0 → 0.21.0

package/dist/index.js

@@ -233,7 +233,7 @@ function AdvertiserQuickFilter({
         "aria-label": caption,
         "data-testid": testIdPrefix && `${testIdPrefix}-popover`,
         children: [
-          /* @__PURE__ */ jsx3("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs3("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 focus-within:border-border-focus focus-within:ring-2 focus-within:ring-border-focus/30", children: [
+          /* @__PURE__ */ jsx3("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs3("div", { className: "flex h-8 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus", children: [
             /* @__PURE__ */ jsx3(Search2, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx3(
               "input",
@@ -910,8 +910,9 @@ function NavBtn({ children, onClick, ...rest }) {
 
 // src/SearchBar.tsx
 import { useEffect as useEffect4, useId as useId2, useRef as useRef4, useState as useState4 } from "react";
-import { AlertCircle, Check as Check3, ChevronDown as ChevronDown3, Search as Search3 } from "lucide-react";
+import { AlertCircle, Check as Check3, ChevronDown as ChevronDown3, Search as Search3, X as X2 } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var HEIGHT = { sm: "h-8", md: "h-10", lg: "h-11" };
 var DEFAULT_SEARCH_MATCH = { mode: "anyWord", wordJoin: "Or" };
 var MODE_LABEL = {
   anyWord: "Any Word",
@@ -927,6 +928,7 @@ function SearchBar({
   value,
   onChange,
   variant = "default",
+  size = "lg",
   matchValue,
   onMatchChange,
   className,
@@ -934,6 +936,7 @@ function SearchBar({
 }) {
   const [open, setOpen] = useState4(false);
   const ref = useRef4(null);
+  const input = useRef4(null);
   useEffect4(() => {
     if (!open) return;
     const onKey = (e) => e.key === "Escape" && setOpen(false);
@@ -952,7 +955,8 @@ function SearchBar({
     "div",
     {
       className: cx2(
-        "flex h-11 min-w-[200px] flex-1 items-stretch rounded-control border border-border-strong bg-input",
+        "flex min-w-[200px] flex-1 items-stretch rounded-control border border-border-strong bg-input focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus",
+        HEIGHT[size],
         className
       ),
       children: [
@@ -961,16 +965,31 @@ function SearchBar({
           /* @__PURE__ */ jsx8(
             "input",
             {
+              ref: input,
               type: "text",
               value,
               onChange: (e) => onChange?.(e.target.value),
               placeholder,
               "aria-label": placeholder,
               "data-testid": testIdPrefix && `${testIdPrefix}-search`,
-              className: "min-w-0 flex-1 bg-transparent text-[13px] text-text-primary outline-hidden placeholder:text-text-tertiary"
+              className: "min-w-0 flex-1 bg-transparent text-dense text-text-primary outline-hidden placeholder:text-text-tertiary"
             }
           )
         ] }),
+        value && onChange && /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onChange("");
+              input.current?.focus();
+            },
+            "aria-label": "Clear search",
+            "data-testid": testIdPrefix && `${testIdPrefix}-clear`,
+            className: "mr-1.5 flex size-6 shrink-0 items-center justify-center self-center rounded-control text-text-tertiary hover:bg-subtle hover:text-text-primary focus-visible:outline-2 focus-visible:outline-border-focus",
+            children: /* @__PURE__ */ jsx8(X2, { size: 14, "aria-hidden": "true" })
+          }
+        ),
         showMatch && // border-border-default, not the bare `border-border` both source
         // implementations used -- confirmed by actually compiling against
         // @mediaradar/design-tokens' real published theme.css (not assumed):
@@ -1609,7 +1628,7 @@ function NoResultsEmptyState({
 
 // src/WorkspaceSelectedCard.tsx
 import { useEffect as useEffect7, useRef as useRef8, useState as useState7 } from "react";
-import { ChevronDown as ChevronDown6, X as X2 } from "lucide-react";
+import { ChevronDown as ChevronDown6, X as X3 } from "lucide-react";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function cx5(...parts) {
   return parts.filter(Boolean).join(" ");
@@ -1673,7 +1692,7 @@ function SummaryGroupItem({
                   "aria-label": `Remove ${item.name}`,
                   onClick: () => group.onRemove(item.id),
                   className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-control text-text-secondary hover:bg-subtle hover:text-text-danger",
-                  children: /* @__PURE__ */ jsx14(X2, { size: 12, "aria-hidden": "true" })
+                  children: /* @__PURE__ */ jsx14(X3, { size: 12, "aria-hidden": "true" })
                 }
               )
             ]
@@ -2322,7 +2341,7 @@ function SelectionPicker({
     }) }),
     source === "search" && /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 flex-col gap-3", children: [
       /* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsxs22("div", { className: "flex h-9 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-strong bg-input px-3", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "flex h-8 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-strong bg-input px-3 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus", children: [
           /* @__PURE__ */ jsx24(Search4, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
           /* @__PURE__ */ jsx24(
             "input",
@@ -2636,7 +2655,7 @@ function FilterDropdown({
         onClick: () => setOpen((v) => !v),
         "aria-expanded": open,
         "data-testid": testIdPrefix && `${testIdPrefix}-filter-${filterSlug}`,
-        className: "inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-strong bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
+        className: "inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-strong bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
         children: [
           label,
           /* @__PURE__ */ jsx24(ChevronDown8, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
@@ -2842,7 +2861,10 @@ var buttonVariants = cva(
       size: {
         xs: "h-6 px-2 text-xs",
         sm: "h-8 px-3 text-sm",
-        md: "h-10 px-4 text-sm"
+        md: "h-10 px-4 text-sm",
+        // 44, the filter row's height, so a button at the end of a row of
+        // filter dropdowns lines up with them. One control scale: 32 / 40 / 44.
+        lg: "h-11 px-5 text-sm"
       },
       // Shape is orthogonal to size. As a fourth SIZE, `icon` could only ever
       // be one dimension, so an icon button never lined up with the labelled
@@ -2857,6 +2879,7 @@ var buttonVariants = cva(
       { size: "xs", iconOnly: true, class: "w-6" },
       { size: "sm", iconOnly: true, class: "w-8" },
       { size: "md", iconOnly: true, class: "w-10" },
+      { size: "lg", iconOnly: true, class: "w-11" },
       // A boxed button is a target you aim at, so its label carries the weight
       // of one. `link` sits inline in a sentence, where semibold reads as
       // emphasis on the words rather than as a control.
@@ -2970,7 +2993,7 @@ function NameListModal({
     /* @__PURE__ */ jsx28(
       "div",
       {
-        className: "fixed inset-0 z-70 flex items-center justify-center bg-scrim px-4",
+        className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim px-4",
         onMouseDown: (e) => e.target === e.currentTarget && onCancel(),
         children: /* @__PURE__ */ jsxs26(
           "div",
@@ -2980,7 +3003,7 @@ function NameListModal({
             "aria-modal": "true",
             "aria-labelledby": titleId,
             onKeyDown: trapTab,
-            className: "w-full max-w-[420px] rounded-card border border-border-default bg-surface p-5 shadow-overlay",
+            className: "w-full max-w-110 rounded-card border border-border-default bg-surface p-5 shadow-overlay",
             children: [
               /* @__PURE__ */ jsx28("h2", { id: titleId, className: "text-[16px] font-semibold text-text-primary", children: title }),
               /* @__PURE__ */ jsxs26("div", { className: "mt-4 flex flex-col gap-1.5", children: [
@@ -2993,7 +3016,7 @@ function NameListModal({
                     value: name,
                     onChange: (e) => setName(e.target.value),
                     placeholder,
-                    className: "h-10 rounded-control border border-border-strong bg-input px-3 text-sm outline-hidden focus:border-brand-primaryAction"
+                    className: "h-10 rounded-control border border-border-strong bg-input px-3 text-dense focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus"
                   }
                 )
               ] }),
@@ -3039,7 +3062,7 @@ function ChipContent({ caption, value, icon }) {
 }
 
 // src/FilterChipBar.tsx
-import { CircleSlash, X as X3 } from "lucide-react";
+import { CircleSlash, X as X4 } from "lucide-react";
 import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
 function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
   if (chips.length === 0) return null;
@@ -3085,7 +3108,7 @@ function Chip({
               onClick: onRemove,
               "aria-label": `Remove ${groupLabel}: ${label}`,
               className: "text-text-tertiary transition-colors hover:text-text-primary",
-              children: /* @__PURE__ */ jsx30(X3, { size: 12 })
+              children: /* @__PURE__ */ jsx30(X4, { size: 12 })
             }
           )
         ]
@@ -3270,10 +3293,83 @@ function WorkspaceAvatar({ name, size = "md" }) {
   );
 }
 
+// src/Toast.tsx
+import { useEffect as useEffect11, useRef as useRef12, useState as useState12 } from "react";
+import { createPortal as createPortal6 } from "react-dom";
+import { AlertTriangle, Check as Check7 } from "lucide-react";
+import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
+var ICON = {
+  neutral: null,
+  success: /* @__PURE__ */ jsx34(Check7, { size: 15, className: "shrink-0", "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx34(AlertTriangle, { size: 15, className: "shrink-0", "aria-hidden": "true" })
+};
+function Toast({ message, action, onClose, tone = "neutral", duration, className }) {
+  const ms = duration ?? (action ? 1e4 : 5e3);
+  const [paused, setPaused] = useState12(false);
+  const closed = useRef12(false);
+  useEffect11(() => {
+    if (paused) return;
+    const t = window.setTimeout(() => {
+      if (closed.current) return;
+      closed.current = true;
+      onClose();
+    }, ms);
+    return () => window.clearTimeout(t);
+  }, [message, ms, paused]);
+  return createPortal6(
+    /* @__PURE__ */ jsxs31(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        onMouseEnter: () => setPaused(true),
+        onMouseLeave: () => setPaused(false),
+        onFocusCapture: () => setPaused(true),
+        onBlurCapture: () => setPaused(false),
+        className: cn(
+          "fixed bottom-6 left-1/2 z-toast flex max-w-[92vw] -translate-x-1/2 items-center gap-2.5",
+          "rounded-control bg-inverseSurface py-2.5 pl-4 pr-2.5 text-sm font-medium text-text-inverse shadow-overlay",
+          className
+        ),
+        children: [
+          ICON[tone] && // The inverse pair, not text-success / text-warning: those are tuned
+          // for the page, and on the toast's flipped surface amber drops to 2:1.
+          /* @__PURE__ */ jsx34(
+            "span",
+            {
+              className: cn(
+                "flex",
+                tone === "success" ? "text-text-inverseSuccess" : "text-text-inverseWarning"
+              ),
+              children: ICON[tone]
+            }
+          ),
+          /* @__PURE__ */ jsx34("span", { className: "min-w-0", children: message }),
+          action && /* @__PURE__ */ jsx34(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                if (!closed.current) {
+                  closed.current = true;
+                  action.onClick();
+                }
+              },
+              className: "shrink-0 rounded-control px-2.5 py-1 text-sm font-semibold text-text-inverse underline-offset-2 transition-colors duration-(--mr-motion-duration-interactive) ease-interactive hover:bg-text-inverse/15 hover:underline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+              children: action.label
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
 // src/Tag.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function Tag({ children, className }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "span",
     {
       className: cn(
@@ -3293,7 +3389,7 @@ function Tag({ children, className }) {
 
 // src/TablePagination.tsx
 import { ChevronDown as ChevronDown9, ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight5 } from "lucide-react";
-import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
 function TablePagination({
   page,
   perPage,
@@ -3314,10 +3410,10 @@ function TablePagination({
     btn,
     "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"
   );
-  return /* @__PURE__ */ jsxs31("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), "data-testid": testIdPrefix, children: [
-    /* @__PURE__ */ jsxs31("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
-      /* @__PURE__ */ jsxs31("span", { className: "relative", children: [
-        /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs32("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), "data-testid": testIdPrefix, children: [
+    /* @__PURE__ */ jsxs32("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
+      /* @__PURE__ */ jsxs32("span", { className: "relative", children: [
+        /* @__PURE__ */ jsx36(
           "select",
           {
             value: perPage,
@@ -3325,10 +3421,10 @@ function TablePagination({
             "aria-label": "Items per page",
             "data-testid": testIdPrefix && `${testIdPrefix}-per-page`,
             className: "appearance-none rounded-control border border-border-strong bg-input py-1 pl-2.5 pr-7 text-[13px] font-medium text-text-primary focus:outline focus:outline-2 focus:outline-border-focus",
-            children: perPageOptions.map((n) => /* @__PURE__ */ jsx35("option", { value: n, children: n }, n))
+            children: perPageOptions.map((n) => /* @__PURE__ */ jsx36("option", { value: n, children: n }, n))
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           ChevronDown9,
           {
             size: 13,
@@ -3339,8 +3435,8 @@ function TablePagination({
       ] }),
       "items per page"
     ] }),
-    /* @__PURE__ */ jsxs31("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
-      /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsxs32("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
+      /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
@@ -3349,10 +3445,10 @@ function TablePagination({
           "aria-label": "First page",
           "data-testid": testIdPrefix && `${testIdPrefix}-first`,
           className: stepBtn,
-          children: /* @__PURE__ */ jsx35(ChevronFirst, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx36(ChevronFirst, { size: 16, "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
@@ -3361,11 +3457,11 @@ function TablePagination({
           "aria-label": "Previous page",
           "data-testid": testIdPrefix && `${testIdPrefix}-prev`,
           className: stepBtn,
-          children: /* @__PURE__ */ jsx35(ChevronLeft4, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx36(ChevronLeft4, { size: 16, "aria-hidden": "true" })
         }
       ),
       pageWindow(current, totalPages).map(
-        (p) => typeof p === "string" ? /* @__PURE__ */ jsx35("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ jsx35(
+        (p) => typeof p === "string" ? /* @__PURE__ */ jsx36("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ jsx36(
           "button",
           {
             type: "button",
@@ -3381,7 +3477,7 @@ function TablePagination({
           p
         )
       ),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
@@ -3390,10 +3486,10 @@ function TablePagination({
           "aria-label": "Next page",
           "data-testid": testIdPrefix && `${testIdPrefix}-next`,
           className: stepBtn,
-          children: /* @__PURE__ */ jsx35(ChevronRight5, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx36(ChevronRight5, { size: 16, "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
@@ -3402,11 +3498,11 @@ function TablePagination({
           "aria-label": "Last page",
           "data-testid": testIdPrefix && `${testIdPrefix}-last`,
           className: stepBtn,
-          children: /* @__PURE__ */ jsx35(ChevronLast, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx36(ChevronLast, { size: 16, "aria-hidden": "true" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs31("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
+    /* @__PURE__ */ jsxs32("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
       rangeStart.toLocaleString(),
       " \u2013 ",
       rangeEnd.toLocaleString(),
@@ -3419,9 +3515,9 @@ function TablePagination({
 }
 
 // src/DateRangePicker.tsx
-import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef12, useState as useState12 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo4, useRef as useRef13, useState as useState13 } from "react";
 import { ChevronDown as ChevronDown10 } from "lucide-react";
-import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 var QUARTER_ABBR = ["Q1", "Q2", "Q3", "Q4"];
 var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
@@ -3457,7 +3553,7 @@ function spanLabel(label, today) {
   return `${fmtDate(s)} \u2013 ${fmtDate(e)}`;
 }
 function MiniSelect({ value, onChange, options }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "select",
     {
       value: String(value),
@@ -3465,8 +3561,8 @@ function MiniSelect({ value, onChange, options }) {
         const opt = options.find((o) => String(o.value) === e.target.value);
         if (opt) onChange(opt.value);
       },
-      className: "rounded-control border border-border-strong bg-input px-1.5 py-1 text-[12px] text-text-primary outline-hidden focus:border-border-focus",
-      children: options.map((o) => /* @__PURE__ */ jsx36("option", { value: String(o.value), children: o.label }, String(o.value)))
+      className: "rounded-control border border-border-strong bg-input px-1.5 py-1 text-[12px] text-text-primary focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus",
+      children: options.map((o) => /* @__PURE__ */ jsx37("option", { value: String(o.value), children: o.label }, String(o.value)))
     }
   );
 }
@@ -3483,17 +3579,17 @@ function DateRangePicker({
 }) {
   const end = useMemo4(() => today ?? startOfToday(), [today]);
   const yearOptions = years ?? [3, 2, 1, 0].map((n) => end.getFullYear() - n);
-  const [open, setOpen] = useState12(false);
-  const [value, setValue] = useState12(defaultValue);
-  const [draft, setDraft] = useState12(defaultValue);
-  const ref = useRef12(null);
-  const [fromMo, setFromMo] = useState12(end.getMonth());
-  const [fromYr, setFromYr] = useState12(end.getFullYear() - 1);
-  const [toMo, setToMo] = useState12(end.getMonth());
-  const [toYr, setToYr] = useState12(end.getFullYear());
-  const [fromQ, setFromQ] = useState12(Math.floor(end.getMonth() / 3));
-  const [toQ, setToQ] = useState12(Math.floor(end.getMonth() / 3));
-  useEffect11(() => {
+  const [open, setOpen] = useState13(false);
+  const [value, setValue] = useState13(defaultValue);
+  const [draft, setDraft] = useState13(defaultValue);
+  const ref = useRef13(null);
+  const [fromMo, setFromMo] = useState13(end.getMonth());
+  const [fromYr, setFromYr] = useState13(end.getFullYear() - 1);
+  const [toMo, setToMo] = useState13(end.getMonth());
+  const [toYr, setToYr] = useState13(end.getFullYear());
+  const [fromQ, setFromQ] = useState13(Math.floor(end.getMonth() / 3));
+  const [toQ, setToQ] = useState13(Math.floor(end.getMonth() / 3));
+  useEffect12(() => {
     const [s, e] = resolveRange(value, end);
     onRangeChange?.(s, e);
   }, [value]);
@@ -3501,7 +3597,7 @@ function DateRangePicker({
     if (!open) setDraft(value);
     setOpen((o) => !o);
   };
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open) return;
     const onDown = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -3527,8 +3623,8 @@ function DateRangePicker({
     if (showFooter) setDraft(label);
     else commit(label);
   };
-  return /* @__PURE__ */ jsxs32("div", { className: "relative", ref, children: [
-    /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ jsxs33(
       "button",
       {
         type: "button",
@@ -3537,16 +3633,16 @@ function DateRangePicker({
         "aria-haspopup": "listbox",
         className: chipTriggerClass(),
         children: [
-          /* @__PURE__ */ jsxs32("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ jsx36("span", { className: "text-control-caption text-text-tertiary", children: spanLabel(value, end) }),
-            /* @__PURE__ */ jsx36("span", { className: "text-[12px] font-medium text-text-primary", children: value })
+          /* @__PURE__ */ jsxs33("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ jsx37("span", { className: "text-control-caption text-text-tertiary", children: spanLabel(value, end) }),
+            /* @__PURE__ */ jsx37("span", { className: "text-[12px] font-medium text-text-primary", children: value })
           ] }),
-          /* @__PURE__ */ jsx36(ChevronDown10, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
+          /* @__PURE__ */ jsx37(ChevronDown10, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs32("div", { className: cn("absolute top-[calc(100%+8px)] z-30 w-[280px] overflow-hidden rounded-card border border-border-default bg-surface py-1 shadow-overlay", align === "right" ? "right-0" : "left-0"), children: [
-      presets.map((p) => /* @__PURE__ */ jsx36(
+    open && /* @__PURE__ */ jsxs33("div", { className: cn("absolute top-[calc(100%+8px)] z-30 w-[280px] overflow-hidden rounded-card border border-border-default bg-surface py-1 shadow-overlay", align === "right" ? "right-0" : "left-0"), children: [
+      presets.map((p) => /* @__PURE__ */ jsx37(
         "button",
         {
           type: "button",
@@ -3556,26 +3652,26 @@ function DateRangePicker({
         },
         p
       )),
-      /* @__PURE__ */ jsxs32("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
-        /* @__PURE__ */ jsx36("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
-        /* @__PURE__ */ jsxs32("div", { className: "mt-2 flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs32("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
+        /* @__PURE__ */ jsx37("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
+        /* @__PURE__ */ jsxs33("div", { className: "mt-2 flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs33("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
             "From",
-            /* @__PURE__ */ jsxs32("span", { className: "flex gap-1", children: [
-              granularity === "month" && /* @__PURE__ */ jsx36(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
-              granularity === "quarter" && /* @__PURE__ */ jsx36(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
-              /* @__PURE__ */ jsx36(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
+            /* @__PURE__ */ jsxs33("span", { className: "flex gap-1", children: [
+              granularity === "month" && /* @__PURE__ */ jsx37(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              granularity === "quarter" && /* @__PURE__ */ jsx37(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
+              /* @__PURE__ */ jsx37(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs32("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
+          /* @__PURE__ */ jsxs33("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
             "To",
-            /* @__PURE__ */ jsxs32("span", { className: "flex gap-1", children: [
-              granularity === "month" && /* @__PURE__ */ jsx36(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
-              granularity === "quarter" && /* @__PURE__ */ jsx36(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
-              /* @__PURE__ */ jsx36(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
+            /* @__PURE__ */ jsxs33("span", { className: "flex gap-1", children: [
+              granularity === "month" && /* @__PURE__ */ jsx37(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              granularity === "quarter" && /* @__PURE__ */ jsx37(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
+              /* @__PURE__ */ jsx37(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             "button",
             {
               type: "button",
@@ -3587,15 +3683,15 @@ function DateRangePicker({
           )
         ] })
       ] }),
-      showFooter && /* @__PURE__ */ jsx36(FilterDropdownFooter, { onApply: () => commit(draft) })
+      showFooter && /* @__PURE__ */ jsx37(FilterDropdownFooter, { onApply: () => commit(draft) })
     ] })
   ] });
 }
 
 // src/MultiSelectFilter.tsx
-import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef13, useState as useState13 } from "react";
-import { ChevronDown as ChevronDown11, Check as Check7, Minus as Minus2, Search as Search5, X as X4 } from "lucide-react";
-import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useEffect as useEffect13, useRef as useRef14, useState as useState14 } from "react";
+import { ChevronDown as ChevronDown11, Check as Check8, Minus as Minus2, Search as Search5, X as X5 } from "lucide-react";
+import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
 function MultiSelectFilter({
   caption,
   options = [],
@@ -3619,10 +3715,10 @@ function MultiSelectFilter({
 }) {
   const groupLeaves = (g) => g.children.length ? g.children : [{ id: g.id, label: g.label }];
   const leafOptions = groups ? groups.flatMap(groupLeaves) : options;
-  const [open, setOpen] = useState13(false);
-  const [q, setQ] = useState13("");
-  const [draft, setDraft] = useState13(selected);
-  const ref = useRef13(null);
+  const [open, setOpen] = useState14(false);
+  const [q, setQ] = useState14("");
+  const [draft, setDraft] = useState14(selected);
+  const ref = useRef14(null);
   const close = useCallback4(() => {
     setOpen(false);
     setQ("");
@@ -3640,7 +3736,7 @@ function MultiSelectFilter({
     setOpen(false);
     setQ("");
   };
-  useEffect12(() => {
+  useEffect13(() => {
     if (!open) return;
     const onKey = (e) => e.key === "Escape" && close();
     const onClick = (e) => {
@@ -3686,8 +3782,8 @@ function MultiSelectFilter({
     const kids = live.filter((c) => c.label.toLowerCase().includes(ql));
     return kids.length ? { ...g, children: kids } : null;
   }).filter((g) => g !== null) : [];
-  return /* @__PURE__ */ jsxs33("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
-    /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
+    /* @__PURE__ */ jsxs34(
       "button",
       {
         type: "button",
@@ -3695,8 +3791,8 @@ function MultiSelectFilter({
         "aria-expanded": open,
         className: cn(chipTriggerClass(variant), fullWidth && "w-full justify-between"),
         children: [
-          /* @__PURE__ */ jsx37(ChipContent, { caption, value, icon }),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(ChipContent, { caption, value, icon }),
+          /* @__PURE__ */ jsx38(
             ChevronDown11,
             {
               size: 14,
@@ -3707,7 +3803,7 @@ function MultiSelectFilter({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs33(
+    open && /* @__PURE__ */ jsxs34(
       "div",
       {
         className: cn(
@@ -3718,9 +3814,9 @@ function MultiSelectFilter({
         role: "dialog",
         "aria-label": caption,
         children: [
-          searchable && /* @__PURE__ */ jsx37("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs33("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5", children: [
-            /* @__PURE__ */ jsx37(Search5, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx37(
+          searchable && /* @__PURE__ */ jsx38("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs34("div", { className: "flex h-8 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus", children: [
+            /* @__PURE__ */ jsx38(Search5, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx38(
               "input",
               {
                 type: "text",
@@ -3730,37 +3826,37 @@ function MultiSelectFilter({
                 className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
               }
             ),
-            q && /* @__PURE__ */ jsx37("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ jsx37(X4, { size: 13 }) })
+            q && /* @__PURE__ */ jsx38("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ jsx38(X5, { size: 13 }) })
           ] }) }),
-          /* @__PURE__ */ jsxs33("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
+          /* @__PURE__ */ jsxs34("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
             groups ? visibleGroups.map((g) => {
               const state = groupState(g);
-              return /* @__PURE__ */ jsxs33("div", { children: [
-                /* @__PURE__ */ jsxs33(
+              return /* @__PURE__ */ jsxs34("div", { children: [
+                /* @__PURE__ */ jsxs34(
                   "button",
                   {
                     type: "button",
                     onClick: () => toggleGroup(g),
                     className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
                     children: [
-                      /* @__PURE__ */ jsx37(TriCheck, { state }),
-                      /* @__PURE__ */ jsx37("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
-                      counts && /* @__PURE__ */ jsx37(OptionCount, { n: countFor(g.id) })
+                      /* @__PURE__ */ jsx38(TriCheck, { state }),
+                      /* @__PURE__ */ jsx38("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
+                      counts && /* @__PURE__ */ jsx38(OptionCount, { n: countFor(g.id) })
                     ]
                   }
                 ),
                 g.children.map((c) => {
                   const checked = draft.includes(c.id);
-                  return /* @__PURE__ */ jsxs33(
+                  return /* @__PURE__ */ jsxs34(
                     "button",
                     {
                       type: "button",
                       onClick: () => toggle(c.id),
                       className: "flex w-full items-center gap-2.5 rounded-control py-2 pl-9 pr-2 text-left transition-colors hover:bg-subtle",
                       children: [
-                        /* @__PURE__ */ jsx37(TriCheck, { state: checked ? "all" : "none" }),
-                        /* @__PURE__ */ jsx37("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
-                        counts && /* @__PURE__ */ jsx37(OptionCount, { n: countFor(c.id) })
+                        /* @__PURE__ */ jsx38(TriCheck, { state: checked ? "all" : "none" }),
+                        /* @__PURE__ */ jsx38("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
+                        counts && /* @__PURE__ */ jsx38(OptionCount, { n: countFor(c.id) })
                       ]
                     },
                     c.id
@@ -3769,33 +3865,33 @@ function MultiSelectFilter({
               ] }, g.id);
             }) : items.map((o) => {
               const checked = draft.includes(o.id);
-              return /* @__PURE__ */ jsxs33(
+              return /* @__PURE__ */ jsxs34(
                 "button",
                 {
                   type: "button",
                   onClick: () => toggle(o.id),
                   className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
                   children: [
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx38(
                       "span",
                       {
                         className: cn(
                           "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
                           checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
                         ),
-                        children: checked && /* @__PURE__ */ jsx37(Check7, { size: 13, strokeWidth: 3 })
+                        children: checked && /* @__PURE__ */ jsx38(Check8, { size: 13, strokeWidth: 3 })
                       }
                     ),
-                    /* @__PURE__ */ jsx37("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
-                    counts && /* @__PURE__ */ jsx37(OptionCount, { n: countFor(o.id) })
+                    /* @__PURE__ */ jsx38("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
+                    counts && /* @__PURE__ */ jsx38(OptionCount, { n: countFor(o.id) })
                   ]
                 },
                 o.id
               );
             }),
-            (groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ jsx37("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
+            (groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ jsx38("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
           ] }),
-          showFooter ? /* @__PURE__ */ jsx37(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ jsx37("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ jsxs33(
+          showFooter ? /* @__PURE__ */ jsx38(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ jsx38("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ jsxs34(
             "button",
             {
               type: "button",
@@ -3814,7 +3910,7 @@ function MultiSelectFilter({
 }
 function TriCheck({ state }) {
   const filled = state !== "none";
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "span",
     {
       className: cn(
@@ -3822,14 +3918,14 @@ function TriCheck({ state }) {
         filled ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
       ),
       children: [
-        state === "all" && /* @__PURE__ */ jsx37(Check7, { size: 13, strokeWidth: 3 }),
-        state === "some" && /* @__PURE__ */ jsx37(Minus2, { size: 13, strokeWidth: 3 })
+        state === "all" && /* @__PURE__ */ jsx38(Check8, { size: 13, strokeWidth: 3 }),
+        state === "some" && /* @__PURE__ */ jsx38(Minus2, { size: 13, strokeWidth: 3 })
       ]
     }
   );
 }
 function OptionCount({ n }) {
-  return /* @__PURE__ */ jsxs33("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
+  return /* @__PURE__ */ jsxs34("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
     "(",
     n.toLocaleString(),
     ")"
@@ -3837,7 +3933,7 @@ function OptionCount({ n }) {
 }
 
 // src/Toggle.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var SIZES2 = {
   sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
   md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
@@ -3845,7 +3941,7 @@ var SIZES2 = {
 var OFF_TRACK = "color-mix(in srgb, var(--mr-color-border-interactive) 70%, var(--mr-color-text-secondary))";
 function Toggle({ checked, onChange, label, size = "md", disabled, className, testIdPrefix }) {
   const s = SIZES2[size];
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "button",
     {
       type: "button",
@@ -3863,7 +3959,7 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
         disabled && "cursor-not-allowed opacity-50",
         className
       ),
-      children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx39(
         "span",
         {
           className: cn(
@@ -3880,20 +3976,20 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
 // src/AISpark.tsx
 import { useId as useId5 } from "react";
 import { Sparkles } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
 function AISpark({ size = 16, className }) {
   const id = useId5();
-  return /* @__PURE__ */ jsxs34(Fragment5, { children: [
-    /* @__PURE__ */ jsx39("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsx39("defs", { children: /* @__PURE__ */ jsxs34("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
-      /* @__PURE__ */ jsx39("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
-      /* @__PURE__ */ jsx39("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
+  return /* @__PURE__ */ jsxs35(Fragment5, { children: [
+    /* @__PURE__ */ jsx40("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsx40("defs", { children: /* @__PURE__ */ jsxs35("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+      /* @__PURE__ */ jsx40("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
+      /* @__PURE__ */ jsx40("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
     ] }) }) }),
-    /* @__PURE__ */ jsx39(Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
+    /* @__PURE__ */ jsx40(Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
   ] });
 }
 
 // src/Freshness.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var dotColor = {
   fresh: "bg-status-success",
   recent: "bg-status-warning",
@@ -3905,7 +4001,7 @@ var srLabel = {
   stale: "Older than a day"
 };
 function Freshness({ level }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "span",
     {
       className: cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotColor[level]),
@@ -3916,28 +4012,306 @@ function Freshness({ level }) {
 }
 
 // src/SectionHeading.tsx
-import { jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
 function SectionHeading({ title, description, actions, as: Tag2 = "h2", id, className }) {
-  return /* @__PURE__ */ jsxs35("div", { className: cn("flex flex-wrap items-end justify-between gap-x-4 gap-y-2", className), children: [
-    /* @__PURE__ */ jsxs35("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx41(Tag2, { id, className: "text-base font-semibold text-text-primary", children: title }),
-      description && /* @__PURE__ */ jsx41("p", { className: "mt-0.5 text-dense text-text-secondary", children: description })
+  return /* @__PURE__ */ jsxs36("div", { className: cn("flex flex-wrap items-end justify-between gap-x-4 gap-y-2", className), children: [
+    /* @__PURE__ */ jsxs36("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx42(Tag2, { id, className: "text-base font-semibold text-text-primary", children: title }),
+      description && /* @__PURE__ */ jsx42("p", { className: "mt-0.5 text-dense text-text-secondary", children: description })
     ] }),
-    actions && /* @__PURE__ */ jsx41("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+    actions && /* @__PURE__ */ jsx42("div", { className: "flex shrink-0 items-center gap-2", children: actions })
   ] });
 }
 
 // src/PageHeader.tsx
-import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
-function PageHeader({ title, description, actions, className }) {
-  return /* @__PURE__ */ jsxs36("header", { className: cn("flex flex-wrap items-center justify-between gap-x-6 gap-y-3", className), children: [
-    /* @__PURE__ */ jsxs36("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx42("h1", { className: "text-xl font-semibold tracking-tight text-text-primary", children: title }),
-      description && /* @__PURE__ */ jsx42("p", { className: "mt-0.5 max-w-2xl text-sm text-text-secondary", children: description })
+import { ArrowLeft } from "lucide-react";
+import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+function PageHeader({ title, description, actions, back, className }) {
+  return /* @__PURE__ */ jsxs37("header", { className: cn("flex flex-wrap items-center justify-between gap-x-6 gap-y-3", className), children: [
+    /* @__PURE__ */ jsxs37("div", { className: "min-w-0", children: [
+      back && /* @__PURE__ */ jsxs37(
+        "a",
+        {
+          href: back.href ?? "#",
+          onClick: back.onClick,
+          className: "mb-1.5 inline-flex items-center gap-1.5 rounded-control text-micro font-semibold uppercase tracking-wider text-text-tertiary hover:text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+          children: [
+            /* @__PURE__ */ jsx43(ArrowLeft, { size: 13, "aria-hidden": "true" }),
+            back.label
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx43("h1", { className: "text-xl font-semibold tracking-tight text-text-primary", children: title }),
+      description && /* @__PURE__ */ jsx43("p", { className: "mt-0.5 max-w-2xl text-sm text-text-secondary", children: description })
     ] }),
-    actions && /* @__PURE__ */ jsx42("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+    actions && /* @__PURE__ */ jsx43("div", { className: "flex shrink-0 items-center gap-2", children: actions })
   ] });
 }
+
+// src/Modal.tsx
+import { useEffect as useEffect14, useId as useId6, useRef as useRef15 } from "react";
+import { createPortal as createPortal7 } from "react-dom";
+import { X as X6 } from "lucide-react";
+import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
+var WIDTH = {
+  sm: "max-w-110",
+  md: "max-w-160",
+  lg: "max-w-220"
+};
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Modal({ open, onClose, title, description, size = "md", footer, children, className }) {
+  const titleId = useId6();
+  const descId = useId6();
+  const panel = useRef15(null);
+  const close = useRef15(onClose);
+  close.current = onClose;
+  useEffect14(() => {
+    if (!open) return;
+    const opener = document.activeElement;
+    const first = panel.current?.querySelector(`[data-modal-body] :is(${FOCUSABLE})`) ?? panel.current?.querySelector(`[data-modal-footer] :is(${FOCUSABLE})`);
+    (first ?? panel.current)?.focus();
+    const overflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close.current();
+        return;
+      }
+      if (e.key !== "Tab" || !panel.current) return;
+      const items = Array.from(panel.current.querySelectorAll(FOCUSABLE));
+      if (items.length === 0) return;
+      const [head, tail] = [items[0], items[items.length - 1]];
+      if (e.shiftKey && document.activeElement === head) {
+        e.preventDefault();
+        tail.focus();
+      } else if (!e.shiftKey && document.activeElement === tail) {
+        e.preventDefault();
+        head.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = overflow;
+      opener?.focus?.();
+    };
+  }, [open]);
+  if (!open || typeof document === "undefined") return null;
+  return createPortal7(
+    /* @__PURE__ */ jsx44(
+      "div",
+      {
+        className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim px-4 py-6",
+        onMouseDown: (e) => e.target === e.currentTarget && onClose(),
+        children: /* @__PURE__ */ jsxs38(
+          "div",
+          {
+            ref: panel,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": description ? descId : void 0,
+            tabIndex: -1,
+            className: cn(
+              "flex max-h-full w-full flex-col rounded-card border border-border-default bg-surface shadow-overlay outline-hidden",
+              WIDTH[size],
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxs38("div", { className: "flex items-start gap-3 px-5 pt-5 pb-3", children: [
+                /* @__PURE__ */ jsxs38("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx44("h2", { id: titleId, className: "text-base font-semibold text-text-primary", children: title }),
+                  description && /* @__PURE__ */ jsx44("p", { id: descId, className: "mt-0.5 text-sm text-text-secondary", children: description })
+                ] }),
+                /* @__PURE__ */ jsx44(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    "aria-label": "Close",
+                    className: "-mr-1.5 -mt-1 flex size-8 shrink-0 items-center justify-center rounded-control text-text-tertiary hover:bg-subtle hover:text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+                    children: /* @__PURE__ */ jsx44(X6, { size: 16, "aria-hidden": "true" })
+                  }
+                )
+              ] }),
+              children && /* @__PURE__ */ jsx44("div", { "data-modal-body": true, className: "min-h-0 flex-1 overflow-y-auto px-5 pb-5 text-sm text-text-primary", children }),
+              footer && /* @__PURE__ */ jsx44("div", { "data-modal-footer": true, className: "flex items-center justify-end gap-2 border-t border-border-default px-5 py-3", children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/EmptyState.tsx
+import { jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action, size = "sm", className }) {
+  const md = size === "md";
+  return /* @__PURE__ */ jsxs39(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center text-center",
+        md ? "gap-2 px-6 py-16" : "gap-1.5 px-4 py-8",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx45(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "flex items-center justify-center text-text-tertiary",
+              md && "mb-1 size-11 rounded-full bg-subtle"
+            ),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsx45("p", { className: cn("font-semibold text-text-primary", md ? "text-base" : "text-sm"), children: title }),
+        description && /* @__PURE__ */ jsx45("p", { className: cn("max-w-sm text-text-secondary", md ? "text-sm" : "text-xs"), children: description }),
+        action && /* @__PURE__ */ jsx45("div", { className: md ? "mt-3" : "mt-2", children: action })
+      ]
+    }
+  );
+}
+
+// src/Tabs.tsx
+import { useRef as useRef16 } from "react";
+import { jsx as jsx46, jsxs as jsxs40 } from "react/jsx-runtime";
+function arrowKeys(e, row) {
+  if (!row || !["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return;
+  const items = Array.from(row.querySelectorAll("button:not([disabled])"));
+  const at = items.indexOf(document.activeElement);
+  const next = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : (at + (e.key === "ArrowRight" ? 1 : -1) + items.length) % items.length;
+  e.preventDefault();
+  items[next]?.focus();
+  items[next]?.click();
+}
+function Tabs({ items, value, onChange, idPrefix = "tabs", className, ...rest }) {
+  const row = useRef16(null);
+  return /* @__PURE__ */ jsx46(
+    "div",
+    {
+      ref: row,
+      role: "tablist",
+      "aria-label": rest["aria-label"],
+      onKeyDown: (e) => arrowKeys(e, row.current),
+      className: cn("flex gap-6 border-b border-border-default", className),
+      children: items.map((item) => {
+        const on = item.value === value;
+        return /* @__PURE__ */ jsxs40(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            id: `${idPrefix}-tab-${item.value}`,
+            "aria-controls": `${idPrefix}-panel-${item.value}`,
+            "aria-selected": on,
+            tabIndex: on ? 0 : -1,
+            disabled: item.disabled,
+            onClick: () => onChange(item.value),
+            className: cn(
+              "-mb-px flex items-center gap-1.5 rounded-control border-b-2 pt-1 pb-2.5 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:opacity-50",
+              on ? "border-brand-primaryAction font-semibold text-text-primary" : "border-transparent text-text-secondary hover:text-text-primary"
+            ),
+            children: [
+              item.label,
+              item.count !== void 0 && /* @__PURE__ */ jsx46("span", { className: "text-xs text-text-tertiary", children: item.count })
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  size = "sm",
+  className,
+  ...rest
+}) {
+  const row = useRef16(null);
+  return /* @__PURE__ */ jsx46(
+    "div",
+    {
+      ref: row,
+      role: "radiogroup",
+      "aria-label": rest["aria-label"],
+      onKeyDown: (e) => arrowKeys(e, row.current),
+      className: cn("inline-flex w-fit items-stretch gap-0.5 rounded-full bg-subtle p-1", size === "md" ? "h-10" : "h-8", className),
+      children: options.map((o) => {
+        const on = o.value === value;
+        return /* @__PURE__ */ jsx46(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": on,
+            tabIndex: on ? 0 : -1,
+            onClick: () => onChange(o.value),
+            className: cn(
+              "rounded-full px-3 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus",
+              size === "md" ? "text-sm" : "text-xs",
+              on ? "bg-surface font-semibold text-text-primary shadow-raised" : "text-text-secondary hover:text-text-primary"
+            ),
+            children: o.label
+          },
+          o.value
+        );
+      })
+    }
+  );
+}
+
+// src/TextField.tsx
+import { forwardRef as forwardRef3, useId as useId7 } from "react";
+import { jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
+var HEIGHT2 = { sm: "h-8", md: "h-10", lg: "h-11" };
+var TextField = forwardRef3(
+  ({ label, hint, error, size = "md", icon, className, id, disabled, ...props }, ref) => {
+    const auto = useId7();
+    const fieldId = id ?? auto;
+    const noteId = `${fieldId}-note`;
+    const note = error ?? hint;
+    return /* @__PURE__ */ jsxs41("div", { className: cn("flex flex-col gap-1.5", className), children: [
+      label && /* @__PURE__ */ jsx47("label", { htmlFor: fieldId, className: "text-xs font-medium text-text-secondary", children: label }),
+      /* @__PURE__ */ jsxs41(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-2 rounded-control border bg-input px-3 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus",
+            HEIGHT2[size],
+            error ? "border-status-danger" : "border-border-strong",
+            disabled && "opacity-50"
+          ),
+          children: [
+            icon && /* @__PURE__ */ jsx47("span", { "aria-hidden": "true", className: "flex shrink-0 text-text-tertiary", children: icon }),
+            /* @__PURE__ */ jsx47(
+              "input",
+              {
+                ref,
+                id: fieldId,
+                disabled,
+                "aria-invalid": error ? true : void 0,
+                "aria-describedby": note ? noteId : void 0,
+                className: "min-w-0 flex-1 bg-transparent text-dense text-text-primary outline-hidden placeholder:text-text-tertiary",
+                ...props
+              }
+            )
+          ]
+        }
+      ),
+      note && /* @__PURE__ */ jsx47("p", { id: noteId, className: cn("text-xs", error ? "text-text-danger" : "text-text-tertiary"), children: note })
+    ] });
+  }
+);
+TextField.displayName = "TextField";
 export {
   AISpark,
   AdvertiserNoResults,
@@ -3955,11 +4329,13 @@ export {
   DateRangeFilter,
   DateRangePicker,
   Delta,
+  EmptyState,
   FilterChipBar,
   FilterDropdownFooter,
   Freshness,
   InfoTip,
   LineChartPlaceholder,
+  Modal,
   MultiSelectFilter,
   NO_RESULTS_BODY,
   NO_RESULTS_TITLE,
@@ -3974,6 +4350,7 @@ export {
   SearchBar,
   SectionHeading,
   SectionRail,
+  SegmentedControl,
   SelectAllVisible,
   SelectFilter,
   SelectedSection,
@@ -3981,7 +4358,10 @@ export {
   SortButton,
   StackedColumnPlaceholder,
   TablePagination,
+  Tabs,
   Tag,
+  TextField,
+  Toast,
   Toggle,
   Tooltip,
   WorkspaceAvatar,