@mediaradar/design-components 0.1.0 → 0.4.0

package/dist/index.js

@@ -70,7 +70,2509 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
     )
   ] });
 }
+
+// src/AdvertiserQuickFilter.tsx
+import { useCallback, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { Check, ChevronDown, ListChecks, Search as Search2, X } from "lucide-react";
+
+// src/AdvertiserSearchPrompt.tsx
+import { Search } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function AdvertiserSearchPrompt({ label = "an advertiser name" }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center", children: [
+    /* @__PURE__ */ jsx2("span", { className: "flex h-9 w-9 items-center justify-center rounded-full bg-subtle text-text-tertiary", children: /* @__PURE__ */ jsx2(Search, { size: 16, "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsxs2("p", { className: "text-[12px] leading-snug text-text-tertiary", children: [
+      "Start typing ",
+      label,
+      " to filter."
+    ] })
+  ] });
+}
+
+// src/AdvertiserQuickFilter.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+var SELECT_ALL_THRESHOLD = 5;
+function slug(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+function AdvertiserQuickFilter({
+  caption = "Advertiser",
+  options,
+  selected,
+  onChange,
+  align = "left",
+  icon,
+  showFooter = false,
+  clearValue = [],
+  parked = [],
+  searchPlaceholder = "Search for an advertiser",
+  promptLabel = "an advertiser name",
+  noResultsHint = "Try checking your spelling or searching for a broader brand name.",
+  clearLabel = "Clear advertisers",
+  testIdPrefix
+}) {
+  const [open, setOpen] = useState2(false);
+  const [q, setQ] = useState2("");
+  const [draft, setDraft] = useState2(selected);
+  const [selectedOpen, setSelectedOpen] = useState2(true);
+  const ref = useRef2(null);
+  const inputRef = useRef2(null);
+  const clearSearch = () => {
+    setQ("");
+    setSelectedOpen(false);
+  };
+  const close = useCallback(() => {
+    setOpen(false);
+    setQ("");
+    if (showFooter) return;
+    if (draft.length !== selected.length || draft.some((id) => !selected.includes(id))) {
+      onChange(draft);
+    }
+  }, [draft, selected, onChange, showFooter]);
+  const openTray = () => {
+    setDraft(selected);
+    setSelectedOpen(true);
+    setOpen(true);
+  };
+  const apply = () => {
+    onChange(draft);
+    setOpen(false);
+    setQ("");
+  };
+  useEffect2(() => {
+    if (!open) return;
+    inputRef.current?.focus();
+    const onKey = (e) => e.key === "Escape" && close();
+    const onClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) close();
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("mousedown", onClick);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("mousedown", onClick);
+    };
+  }, [open, close]);
+  const toggle = (id) => setDraft((cur) => cur.includes(id) ? cur.filter((x) => x !== id) : [...cur, id]);
+  const ql = q.trim().toLowerCase();
+  const selectedOptions = useMemo(
+    () => draft.map((id) => options.find((o) => o.id === id)).filter(Boolean),
+    [draft, options]
+  );
+  const results = useMemo(
+    () => ql ? options.filter((o) => !draft.includes(o.id) && o.label.toLowerCase().includes(ql)) : [],
+    [ql, options, draft]
+  );
+  const visibleIds = results.map((o) => o.id);
+  const allVisibleSelected = visibleIds.length > 0 && visibleIds.every((id) => draft.includes(id));
+  const toggleAllVisible = () => setDraft(
+    (cur) => allVisibleSelected ? cur.filter((id) => !visibleIds.includes(id)) : [.../* @__PURE__ */ new Set([...cur, ...visibleIds])]
+  );
+  const shown = open && !showFooter ? draft : selected;
+  const counted = parked.length ? shown.filter((id) => !parked.includes(id)) : shown;
+  const value = counted.length === 0 ? "All" : counted.length === 1 ? options.find((o) => o.id === counted[0])?.label ?? "1 selected" : `${counted.length} selected`;
+  return /* @__PURE__ */ jsxs3("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        "data-testid": testIdPrefix && `${testIdPrefix}-trigger`,
+        onClick: () => open ? close() : openTray(),
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+        children: [
+          icon && /* @__PURE__ */ jsx3("span", { className: "shrink-0 text-text-tertiary", children: icon }),
+          /* @__PURE__ */ jsxs3("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
+            /* @__PURE__ */ jsx3("span", { className: "text-[12px] font-medium text-text-primary", children: value })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            ChevronDown,
+            {
+              size: 14,
+              "aria-hidden": "true",
+              className: cx("shrink-0 text-text-secondary transition-transform", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: cx(
+          "absolute top-[calc(100%+8px)] z-30 flex w-72 flex-col overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay",
+          align === "right" ? "right-0" : "left-0"
+        ),
+        role: "dialog",
+        "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-default bg-input px-2.5 focus-within:border-border-focus focus-within:ring-2 focus-within:ring-border-focus/30", children: [
+            /* @__PURE__ */ jsx3(Search2, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: q,
+                onChange: (e) => setQ(e.target.value),
+                onMouseDown: () => setSelectedOpen(false),
+                placeholder: searchPlaceholder,
+                "aria-label": searchPlaceholder,
+                "data-testid": testIdPrefix && `${testIdPrefix}-search`,
+                className: "h-full min-w-0 flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
+              }
+            ),
+            q && /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: clearSearch,
+                "aria-label": "Clear search",
+                className: "shrink-0 text-text-tertiary transition-colors hover:text-text-primary",
+                children: /* @__PURE__ */ jsx3(X, { size: 13 })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs3("div", { className: "max-h-[300px] overflow-y-auto p-1", children: [
+            selectedOptions.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "mb-1 border-b border-border-default pb-1", children: [
+              /* @__PURE__ */ jsxs3(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": testIdPrefix && `${testIdPrefix}-selected-toggle`,
+                  onClick: () => setSelectedOpen((v) => !v),
+                  "aria-expanded": selectedOpen,
+                  className: "flex w-full items-center gap-1.5 rounded-control px-2 py-1 text-left text-[11px] font-semibold uppercase tracking-wide text-text-tertiary transition-colors hover:text-text-primary",
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      ChevronDown,
+                      {
+                        size: 13,
+                        "aria-hidden": "true",
+                        className: cx("transition-transform", !selectedOpen && "-rotate-90")
+                      }
+                    ),
+                    "Selected (",
+                    selectedOptions.length,
+                    ")"
+                  ]
+                }
+              ),
+              selectedOpen && /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-0.5", children: selectedOptions.map((o) => /* @__PURE__ */ jsx3(
+                OptionRow,
+                {
+                  label: o.label,
+                  checked: true,
+                  onToggle: () => toggle(o.id),
+                  testId: testIdPrefix && `${testIdPrefix}-option-${slug(o.id)}`
+                },
+                o.id
+              )) })
+            ] }),
+            !ql ? /* @__PURE__ */ jsx3(AdvertiserSearchPrompt, { label: promptLabel }) : results.length === 0 ? /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center gap-1.5 px-4 py-8 text-center", children: [
+              /* @__PURE__ */ jsxs3("p", { className: "text-[13px] font-medium text-text-primary", children: [
+                "No results found for \u201C",
+                q.trim(),
+                "\u201D"
+              ] }),
+              /* @__PURE__ */ jsx3("p", { className: "text-[12px] leading-snug text-text-tertiary", children: noResultsHint })
+            ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+              results.length > SELECT_ALL_THRESHOLD && /* @__PURE__ */ jsxs3(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": testIdPrefix && `${testIdPrefix}-select-all-visible`,
+                  onClick: toggleAllVisible,
+                  className: "flex w-full items-center gap-2 rounded-control px-2 py-1.5 text-left text-[12px] font-semibold text-text-link transition-colors hover:bg-subtle",
+                  children: [
+                    /* @__PURE__ */ jsx3(ListChecks, { size: 14, "aria-hidden": "true" }),
+                    allVisibleSelected ? `Deselect ${results.length} visible` : `Select all ${results.length} visible`
+                  ]
+                }
+              ),
+              results.map((o) => /* @__PURE__ */ jsx3(
+                OptionRow,
+                {
+                  label: o.label,
+                  checked: false,
+                  onToggle: () => toggle(o.id),
+                  testId: testIdPrefix && `${testIdPrefix}-option-${slug(o.id)}`
+                },
+                o.id
+              ))
+            ] })
+          ] }),
+          showFooter ? /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between border-t border-border-default px-3 py-2.5", children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                "data-testid": testIdPrefix && `${testIdPrefix}-clear-all`,
+                onClick: () => setDraft(clearValue),
+                disabled: draft.length === 0,
+                className: "text-[13px] font-medium text-text-secondary transition-colors hover:text-text-primary disabled:opacity-40",
+                children: "Clear all"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                "data-testid": testIdPrefix && `${testIdPrefix}-apply`,
+                onClick: apply,
+                className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-brand-onprimary transition hover:brightness-110",
+                children: "Apply"
+              }
+            )
+          ] }) : draft.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between border-t border-border-default p-2", children: [
+            /* @__PURE__ */ jsxs3("span", { className: "text-[11px] text-text-tertiary", children: [
+              draft.length,
+              " selected"
+            ] }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: () => setDraft([]),
+                className: "text-[12px] font-medium text-text-link hover:underline",
+                children: clearLabel
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function OptionRow({
+  label,
+  checked,
+  onToggle,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      onClick: onToggle,
+      className: "flex cursor-pointer items-center gap-2.5 rounded-control px-2 py-2 transition-colors hover:bg-subtle",
+      children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            role: "checkbox",
+            "aria-checked": checked,
+            "aria-label": label,
+            "data-testid": testId,
+            onClick: (e) => {
+              e.stopPropagation();
+              onToggle();
+            },
+            className: cx(
+              "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
+              "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+              checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-surface hover:border-brand-primaryAction"
+            ),
+            children: checked && /* @__PURE__ */ jsx3(Check, { size: 13, strokeWidth: 3 })
+          }
+        ),
+        /* @__PURE__ */ jsx3("span", { className: "flex-1 text-[14px] text-text-primary", children: label })
+      ]
+    }
+  );
+}
+
+// src/CheckBox.tsx
+import { Check as Check2, Minus } from "lucide-react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId }) {
+  const on = checked || indeterminate;
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      type: "button",
+      role: "checkbox",
+      "aria-checked": indeterminate ? "mixed" : checked,
+      "aria-label": ariaLabel,
+      disabled,
+      "data-testid": testId,
+      onClick: (e) => {
+        e.stopPropagation();
+        onChange();
+      },
+      className: [
+        "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
+        "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+        on ? "border-transparent bg-brand-primaryAction text-white" : "border-border-interactive bg-input hover:border-brand-primaryAction",
+        disabled && "cursor-not-allowed opacity-50"
+      ].filter(Boolean).join(" "),
+      children: indeterminate ? /* @__PURE__ */ jsx4(Minus, { size: 13, strokeWidth: 3 }) : checked ? /* @__PURE__ */ jsx4(Check2, { size: 13, strokeWidth: 3 }) : null
+    }
+  );
+}
+
+// src/DateRangeFilter.tsx
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { ChevronDown as ChevronDown2, ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_SHORTCUTS = [
+  "Year to date",
+  "Rolling 3 months",
+  "Rolling 6 months",
+  "Rolling 12 months",
+  "Previous quarter",
+  "Current quarter to date",
+  "Previous month",
+  "Current month",
+  "Custom"
+];
+var CREATIVE_INTEL_SHORTCUTS = [
+  "Today",
+  "Yesterday",
+  "Last 7 days",
+  "Last 14 days",
+  "Last month",
+  "Rolling 3 months",
+  "Rolling 6 months",
+  "Rolling 12 months",
+  "Year to date",
+  "Previous year",
+  "All available history",
+  "Custom"
+];
+var WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var addDays = (d, n) => {
+  const x = new Date(d);
+  x.setDate(x.getDate() + n);
+  return x;
+};
+var addMonths = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
+var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var fmt = (d) => `${MONTHS[d.getMonth()].slice(0, 3)} ${d.getDate()}, ${d.getFullYear()}`;
+var fmtFull = (d) => `${MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+var fullRangeLabel = (s, e) => `${fmtFull(s)} - ${fmtFull(e)}`;
+var presetLabel = (sc) => sc === "Custom" ? "Custom range" : sc;
+function presetRange(key, today) {
+  const t = startOfDay(today);
+  const qMonth = Math.floor(t.getMonth() / 3) * 3;
+  switch (key) {
+    case "Year to date":
+      return [new Date(t.getFullYear(), 0, 1), t];
+    case "Rolling 3 months":
+      return [addMonths(t, -3), t];
+    case "Rolling 6 months":
+      return [addMonths(t, -6), t];
+    case "Rolling 12 months":
+      return [addMonths(t, -12), t];
+    case "Previous quarter": {
+      const s = new Date(t.getFullYear(), qMonth - 3, 1);
+      const e = new Date(t.getFullYear(), qMonth, 0);
+      return [s, e];
+    }
+    case "Current quarter to date":
+      return [new Date(t.getFullYear(), qMonth, 1), t];
+    case "Previous month": {
+      const s = new Date(t.getFullYear(), t.getMonth() - 1, 1);
+      const e = new Date(t.getFullYear(), t.getMonth(), 0);
+      return [s, e];
+    }
+    case "Current month":
+      return [new Date(t.getFullYear(), t.getMonth(), 1), t];
+    case "Today":
+      return [t, t];
+    case "Yesterday": {
+      const y = addDays(t, -1);
+      return [y, y];
+    }
+    case "Last 7 days":
+      return [addDays(t, -6), t];
+    case "Last 14 days":
+      return [addDays(t, -13), t];
+    case "Last month": {
+      const s = new Date(t.getFullYear(), t.getMonth() - 1, 1);
+      const e = new Date(t.getFullYear(), t.getMonth(), 0);
+      return [s, e];
+    }
+    case "Previous year":
+      return [new Date(t.getFullYear() - 1, 0, 1), new Date(t.getFullYear() - 1, 11, 31)];
+    case "All available history":
+      return [new Date(2e3, 0, 1), t];
+    default:
+      return null;
+  }
+}
+function monthGrid(year, month) {
+  const first = new Date(year, month, 1);
+  const dow = (first.getDay() + 6) % 7;
+  const gridStart = addDays(first, -dow);
+  return Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+}
+function matchShortcut(shortcuts, label) {
+  if (!label) return "Rolling 12 months";
+  const hit = shortcuts.find((s) => s.toLowerCase() === label.toLowerCase());
+  return hit || "Custom";
+}
+function slug2(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+function DateRangeFilter({
+  caption = "Date Range",
+  defaultValue,
+  value: controlledValue,
+  range: controlledRange,
+  align = "left",
+  onChange,
+  onRangeChange,
+  showDates = false,
+  shortDates = false,
+  icon,
+  presetSet = "default",
+  testIdPrefix
+}) {
+  const controlled = controlledValue !== void 0 && controlledRange !== void 0;
+  const SHORTCUTS = presetSet === "creativeIntel" ? CREATIVE_INTEL_SHORTCUTS : DEFAULT_SHORTCUTS;
+  const today = useMemo2(() => /* @__PURE__ */ new Date(), []);
+  const initShortcut = matchShortcut(SHORTCUTS, controlled ? controlledValue : defaultValue);
+  const initRange = controlled ? controlledRange : presetRange(initShortcut === "Custom" ? "Rolling 12 months" : initShortcut, today);
+  const dateLine = (s, e) => shortDates ? `${fmt(s)} \u2013 ${fmt(e)}` : fullRangeLabel(s, e);
+  const [open, setOpen] = useState3(false);
+  const [uncontrolledValue, setUncontrolledValue] = useState3(
+    showDates ? presetLabel(initShortcut) : defaultValue || "Last 7 days"
+  );
+  const [uncontrolledDatesLine, setUncontrolledDatesLine] = useState3(dateLine(initRange[0], initRange[1]));
+  const committed = useRef3({ shortcut: initShortcut, start: initRange[0], end: initRange[1] });
+  const displayValue = controlled ? showDates ? presetLabel(initShortcut) : controlledValue : uncontrolledValue;
+  const displayDatesLine = controlled ? dateLine(initRange[0], initRange[1]) : uncontrolledDatesLine;
+  const [shortcut, setShortcut] = useState3(initShortcut);
+  const [start, setStart] = useState3(initRange[0]);
+  const [end, setEnd] = useState3(initRange[1]);
+  const [leftMonth, setLeftMonth] = useState3(new Date(initRange[0].getFullYear(), initRange[0].getMonth(), 1));
+  const ref = useRef3(null);
+  useEffect3(() => {
+    if (controlled) return;
+    onRangeChange?.(committed.current.start, committed.current.end);
+  }, []);
+  useEffect3(() => {
+    if (!open) return;
+    const committedShortcut = controlled ? initShortcut : committed.current.shortcut;
+    const committedStart = controlled ? initRange[0] : committed.current.start;
+    const committedEnd = controlled ? initRange[1] : committed.current.end;
+    setShortcut(committedShortcut);
+    setStart(committedStart);
+    setEnd(committedEnd);
+    setLeftMonth(new Date(committedStart.getFullYear(), committedStart.getMonth(), 1));
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    const onClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("mousedown", onClick);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("mousedown", onClick);
+    };
+  }, [open]);
+  const choosePreset = (key) => {
+    setShortcut(key);
+    if (key === "Custom") return;
+    const r = presetRange(key, today);
+    if (r) {
+      setStart(r[0]);
+      setEnd(r[1]);
+      setLeftMonth(new Date(r[0].getFullYear(), r[0].getMonth(), 1));
+    }
+  };
+  const pickDay = (d) => {
+    setShortcut("Custom");
+    if (!start || start && end) {
+      setStart(d);
+      setEnd(null);
+    } else if (d < start) {
+      setEnd(start);
+      setStart(d);
+    } else setEnd(d);
+  };
+  const apply = () => {
+    const s = start || initRange[0];
+    const e = end || s;
+    const v = showDates ? presetLabel(shortcut) : shortcut === "Custom" ? `${fmt(s)} \u2014 ${fmt(e)}` : shortcut;
+    if (!controlled) {
+      committed.current = { shortcut, start: s, end: e };
+      setUncontrolledValue(v);
+      setUncontrolledDatesLine(dateLine(s, e));
+    }
+    onChange?.(v);
+    onRangeChange?.(s, e);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        "data-testid": testIdPrefix && `${testIdPrefix}-trigger`,
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": open,
+        className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+        children: [
+          icon && /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-text-tertiary", children: icon }),
+          /* @__PURE__ */ jsxs4("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ jsx5("span", { className: showDates ? "text-[11px] text-text-tertiary" : "text-[10px] uppercase tracking-wide text-text-tertiary", children: showDates ? displayDatesLine : caption }),
+            /* @__PURE__ */ jsx5("span", { className: "text-[12px] font-medium text-text-primary", children: displayValue })
+          ] }),
+          /* @__PURE__ */ jsx5(ChevronDown2, { size: 14, "aria-hidden": "true", className: `shrink-0 text-text-secondary transition-transform ${open ? "rotate-180" : ""}` })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        "data-testid": testIdPrefix && `${testIdPrefix}-popover`,
+        className: `absolute top-[calc(100%+8px)] z-30 flex overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay ${align === "right" ? "right-0" : "left-0"}`,
+        role: "dialog",
+        "aria-label": "Select date range",
+        children: [
+          /* @__PURE__ */ jsx5("div", { className: "flex w-44 shrink-0 flex-col gap-0.5 border-r border-border-default p-2", children: SHORTCUTS.map((s) => /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              "data-testid": testIdPrefix && `${testIdPrefix}-option-${slug2(s)}`,
+              onClick: () => choosePreset(s),
+              className: `rounded-control px-3 py-2 text-left text-[13px] font-medium transition-colors ${shortcut === s ? "bg-subtle text-text-primary" : "text-text-secondary hover:bg-subtle hover:text-text-primary"}`,
+              children: s
+            },
+            s
+          )) }),
+          /* @__PURE__ */ jsxs4("div", { className: "flex flex-col p-4", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-3", children: [
+              /* @__PURE__ */ jsx5(Field, { label: "Start Date", value: start ? fmt(start) : "\u2014" }),
+              /* @__PURE__ */ jsx5("span", { className: "pb-2.5 text-text-tertiary", children: "\u2014" }),
+              /* @__PURE__ */ jsx5(Field, { label: "End Date", value: end ? fmt(end) : start ? fmt(start) : "\u2014" })
+            ] }),
+            /* @__PURE__ */ jsx5("div", { className: "my-4 border-t border-border-default" }),
+            /* @__PURE__ */ jsx5("div", { className: "flex gap-8", children: [0, 1].map((offset) => {
+              const m = addMonths(leftMonth, offset);
+              const grid = monthGrid(m.getFullYear(), m.getMonth());
+              return /* @__PURE__ */ jsxs4("div", { className: "w-[252px]", children: [
+                /* @__PURE__ */ jsxs4("div", { className: "mb-2 flex items-center justify-between", children: [
+                  offset === 0 ? /* @__PURE__ */ jsx5(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, -1)), "aria-label": "Previous month", children: /* @__PURE__ */ jsx5(ChevronLeft, { size: 16 }) }) : /* @__PURE__ */ jsx5("span", { className: "h-7 w-7" }),
+                  /* @__PURE__ */ jsxs4("span", { className: "text-[15px] font-semibold text-text-primary", children: [
+                    MONTHS[m.getMonth()],
+                    " ",
+                    m.getFullYear()
+                  ] }),
+                  offset === 1 ? /* @__PURE__ */ jsx5(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, 1)), "aria-label": "Next month", children: /* @__PURE__ */ jsx5(ChevronRight, { size: 16 }) }) : /* @__PURE__ */ jsx5("span", { className: "h-7 w-7" })
+                ] }),
+                /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-7", children: [
+                  WEEKDAYS.map((w) => /* @__PURE__ */ jsx5("div", { className: "flex h-8 items-center justify-center text-[12px] font-semibold text-text-secondary", children: w }, w)),
+                  grid.map((d, i) => {
+                    const inMonth = d.getMonth() === m.getMonth();
+                    const hasRange = !!(start && end);
+                    const isStart = !!start && sameDay(d, start);
+                    const isEnd = end ? sameDay(d, end) : isStart && !end;
+                    const inRange = hasRange && d >= startOfDay(start) && d <= startOfDay(end);
+                    const single = isStart && isEnd;
+                    const endpoint = isStart || !!end && isEnd;
+                    let band = "";
+                    if (inRange && !single) {
+                      if (isStart) band = "left-1/2 right-0";
+                      else if (end && isEnd) band = "left-0 right-1/2";
+                      else band = "left-0 right-0";
+                    }
+                    return /* @__PURE__ */ jsxs4("button", { type: "button", onClick: () => pickDay(d), className: "relative flex h-9 items-center justify-center", children: [
+                      band && /* @__PURE__ */ jsx5("span", { className: `absolute inset-y-[3px] bg-ai-tint ${band}`, "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsx5(
+                        "span",
+                        {
+                          className: `relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[13px] tabular-nums ${endpoint ? "bg-brand-primaryAction font-semibold text-white" : inMonth ? "text-text-primary hover:bg-subtle" : "text-text-tertiary"}`,
+                          children: d.getDate()
+                        }
+                      )
+                    ] }, i);
+                  })
+                ] })
+              ] }, offset);
+            }) }),
+            /* @__PURE__ */ jsxs4("div", { className: "mt-4 flex justify-end gap-2", children: [
+              /* @__PURE__ */ jsx5("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-cancel`, onClick: () => setOpen(false), className: "rounded-control border border-border-default bg-surface px-5 py-2 text-[13px] font-semibold text-text-primary transition-colors hover:bg-subtle", children: "Cancel" }),
+              /* @__PURE__ */ jsx5("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-apply`, onClick: apply, className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-white transition-[filter] hover:brightness-110", children: "Apply" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function Field({ label, value }) {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx5("span", { className: "text-[12px] font-medium text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx5("div", { className: "flex h-10 min-w-[140px] items-center rounded-control border border-border-default bg-input px-3 text-[14px] font-medium text-text-primary", children: value })
+  ] });
+}
+function NavBtn({ children, onClick, ...rest }) {
+  return /* @__PURE__ */ jsx5("button", { type: "button", onClick, className: "flex h-7 w-7 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary", ...rest, children });
+}
+
+// src/SearchBar.tsx
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { AlertCircle, Check as Check3, ChevronDown as ChevronDown3, Search as Search3 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var DEFAULT_SEARCH_MATCH = { mode: "anyWord", wordJoin: "Or" };
+var MODE_LABEL = {
+  anyWord: "Any Word",
+  exactMatch: "Exact Match",
+  contextual: "Contextual",
+  adCode: "Ad Code"
+};
+function cx2(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function SearchBar({
+  placeholder = "Search\u2026",
+  value,
+  onChange,
+  variant = "default",
+  matchValue,
+  onMatchChange,
+  className,
+  testIdPrefix
+}) {
+  const [open, setOpen] = useState4(false);
+  const ref = useRef4(null);
+  useEffect4(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    const onClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("mousedown", onClick);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("mousedown", onClick);
+    };
+  }, [open]);
+  const showMatch = variant === "filterable" && matchValue;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cx2(
+        "flex h-11 min-w-[200px] flex-1 items-stretch rounded-control border border-border-strong bg-input",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5("label", { className: "flex min-w-0 flex-1 items-center gap-2 px-2.5", children: [
+          /* @__PURE__ */ jsx6(Search3, { size: 15, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
+          /* @__PURE__ */ jsx6(
+            "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"
+            }
+          )
+        ] }),
+        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):
+        // there is no bare `--color-border` in that file, only the
+        // -default/-interactive/-focus/-focusSoft/-strong suffixed variants,
+        // so `border-border` silently generates no utility at all there. It
+        // only "worked" in each source app because each one separately
+        // defines its own local `border-border` alias outside the shared
+        // token package (insights-studio-prototype's own src/index.css;
+        // mr-clientapps' own tailwind.config.ts `colors.border.DEFAULT`) --
+        // an alias this shared component can't rely on existing.
+        /* @__PURE__ */ jsxs5("div", { className: "relative shrink-0 border-l border-border-default", ref, children: [
+          /* @__PURE__ */ jsxs5(
+            "button",
+            {
+              type: "button",
+              "data-testid": testIdPrefix && `${testIdPrefix}-mode-trigger`,
+              onClick: () => setOpen((o) => !o),
+              "aria-expanded": open,
+              "aria-haspopup": "dialog",
+              className: "flex h-full items-center gap-1 px-2.5 text-[13px] font-medium text-text-primary transition-colors hover:bg-subtle",
+              children: [
+                matchValue.mode === "anyWord" ? `${MODE_LABEL.anyWord} (${matchValue.wordJoin})` : MODE_LABEL[matchValue.mode],
+                /* @__PURE__ */ jsx6(
+                  ChevronDown3,
+                  {
+                    size: 14,
+                    "aria-hidden": "true",
+                    className: cx2("shrink-0 text-text-secondary transition-transform", open && "rotate-180")
+                  }
+                )
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsx6(
+            "div",
+            {
+              role: "dialog",
+              "aria-label": "Search match type",
+              "data-testid": testIdPrefix && `${testIdPrefix}-mode-popover`,
+              className: "absolute right-0 top-[calc(100%+8px)] z-50 w-[400px] rounded-card border border-border-default bg-surface p-3 shadow-overlay",
+              children: /* @__PURE__ */ jsxs5("div", { role: "radiogroup", "aria-label": "Search match type", className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx6(
+                  ModeRow,
+                  {
+                    title: "Any Word Text Search",
+                    selected: matchValue.mode === "anyWord",
+                    onSelect: () => onMatchChange?.({ mode: "anyWord", wordJoin: matchValue.wordJoin }),
+                    testId: testIdPrefix && `${testIdPrefix}-mode-anyWord`,
+                    description: /* @__PURE__ */ jsx6(Fragment3, { children: "Find creatives that contain your keyword(s) using an \u201COr\u201D (match any) or \u201CAnd\u201D (match all) conditional in any order." }),
+                    infoText: "The Or/And choice applies only when Any Word is the active search mode.",
+                    extra: /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ jsx6(
+                        RadioOption,
+                        {
+                          label: "Or",
+                          checked: matchValue.wordJoin === "Or",
+                          onSelect: () => onMatchChange?.({ mode: "anyWord", wordJoin: "Or" }),
+                          testId: testIdPrefix && `${testIdPrefix}-word-join-or`
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        RadioOption,
+                        {
+                          label: "And",
+                          checked: matchValue.wordJoin === "And",
+                          onSelect: () => onMatchChange?.({ mode: "anyWord", wordJoin: "And" }),
+                          testId: testIdPrefix && `${testIdPrefix}-word-join-and`
+                        }
+                      )
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx6(Divider, {}),
+                /* @__PURE__ */ jsx6(
+                  ModeRow,
+                  {
+                    title: "Exact Match Text Search",
+                    selected: matchValue.mode === "exactMatch",
+                    onSelect: () => onMatchChange?.({ mode: "exactMatch", wordJoin: matchValue.wordJoin }),
+                    testId: testIdPrefix && `${testIdPrefix}-mode-exactMatch`,
+                    description: "Find creatives that mention your exact keyword phrase.",
+                    infoText: "Keywords are matched as a single contiguous phrase, in the order you typed them."
+                  }
+                ),
+                /* @__PURE__ */ jsx6(Divider, {}),
+                /* @__PURE__ */ jsx6(
+                  ModeRow,
+                  {
+                    title: "Contextual Search",
+                    badge: "Beta",
+                    selected: matchValue.mode === "contextual",
+                    onSelect: () => onMatchChange?.({ mode: "contextual", wordJoin: matchValue.wordJoin }),
+                    testId: testIdPrefix && `${testIdPrefix}-mode-contextual`,
+                    description: "Find creatives that may contain OR have similar meaning as your keyword(s).",
+                    infoText: "Uses semantic matching, so results can include related terms even when the exact keyword isn't present."
+                  }
+                ),
+                /* @__PURE__ */ jsx6(Divider, {}),
+                /* @__PURE__ */ jsx6(
+                  ModeRow,
+                  {
+                    title: "Ad Code Search",
+                    selected: matchValue.mode === "adCode",
+                    onSelect: () => onMatchChange?.({ mode: "adCode", wordJoin: matchValue.wordJoin }),
+                    testId: testIdPrefix && `${testIdPrefix}-mode-adCode`,
+                    description: "Find creatives based on a list of one or more ad codes that you provide.",
+                    infoText: "Separate multiple ad codes with a comma or a new line."
+                  }
+                )
+              ] })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Divider() {
+  return /* @__PURE__ */ jsx6("div", { className: "my-2.5 border-t border-border-default", "aria-hidden": "true" });
+}
+function ModeRow({
+  title,
+  badge,
+  extra,
+  description,
+  infoText,
+  selected,
+  onSelect,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      role: "radio",
+      tabIndex: 0,
+      "aria-checked": selected,
+      "data-testid": testId,
+      onClick: onSelect,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      },
+      className: "flex cursor-pointer flex-col items-stretch gap-1 rounded-control p-1.5 text-left transition-colors hover:bg-subtle focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-3", children: [
+            /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx6("span", { className: "text-[14px] font-semibold text-text-primary", children: title }),
+              /* @__PURE__ */ jsx6(RowInfoTip, { text: infoText })
+            ] }),
+            badge && /* @__PURE__ */ jsx6("span", { className: "rounded-full bg-subtle px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-text-secondary", children: badge }),
+            extra
+          ] }),
+          selected && /* @__PURE__ */ jsx6(Check3, { size: 16, strokeWidth: 2.5, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" })
+        ] }),
+        /* @__PURE__ */ jsx6("span", { className: "block text-[12.5px] leading-snug text-text-secondary", children: description })
+      ]
+    }
+  );
+}
+function RadioOption({
+  label,
+  checked,
+  onSelect,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      "data-testid": testId,
+      onClick: (e) => {
+        e.stopPropagation();
+        onSelect();
+      },
+      role: "radio",
+      "aria-checked": checked,
+      className: "flex items-center gap-1.5 text-[13px] font-medium text-text-primary",
+      children: [
+        /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: cx2(
+              "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+              checked ? "border-brand-primaryAction" : "border-border-interactive"
+            ),
+            children: checked && /* @__PURE__ */ jsx6("span", { className: "h-2 w-2 rounded-full bg-brand-primaryAction" })
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+function RowInfoTip({ text }) {
+  const [open, setOpen] = useState4(false);
+  const ref = useRef4(null);
+  useEffect4(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("mousedown", onDown);
+    return () => window.removeEventListener("mousedown", onDown);
+  }, [open]);
+  return /* @__PURE__ */ jsxs5("span", { className: "relative inline-flex shrink-0 items-center", ref, children: [
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen((o) => !o);
+        },
+        "aria-label": "More information",
+        "aria-expanded": open,
+        className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary",
+        children: /* @__PURE__ */ jsx6(AlertCircle, { size: 13, "aria-hidden": "true" })
+      }
+    ),
+    open && /* @__PURE__ */ jsx6(
+      "span",
+      {
+        role: "tooltip",
+        className: "absolute left-0 top-[calc(100%+6px)] z-40 w-[220px] rounded-control border border-border-default bg-surface px-2.5 py-1.5 text-[11.5px] font-normal leading-snug text-text-secondary shadow-overlay",
+        children: text
+      }
+    )
+  ] });
+}
+
+// src/SectionRail.tsx
+import { useRef as useRef5 } from "react";
+import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function SectionRail({
+  title,
+  titleSerif,
+  subtitle,
+  viewAllLabel,
+  viewAllHref,
+  children
+}) {
+  const scrollRef = useRef5(null);
+  const scroll = (direction) => {
+    scrollRef.current?.scrollBy({ left: direction * 320, behavior: "smooth" });
+  };
+  return /* @__PURE__ */ jsxs6("section", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs6("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx7(
+          "h2",
+          {
+            className: titleSerif ? "font-serif text-2xl font-normal tracking-tight text-text-primary sm:text-[28px]" : "text-xl font-medium tracking-tight text-text-primary sm:text-2xl",
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx7("p", { className: "mt-1 text-sm text-text-secondary", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        viewAllLabel && viewAllHref && /* @__PURE__ */ jsxs6(
+          "a",
+          {
+            href: viewAllHref,
+            className: "text-sm font-medium text-text-link transition-colors hover:underline focus-visible:rounded-sm focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+            children: [
+              viewAllLabel,
+              " \u2192"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            onClick: () => scroll(-1),
+            "aria-label": "Previous",
+            className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
+            children: /* @__PURE__ */ jsx7(ChevronLeft2, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            onClick: () => scroll(1),
+            "aria-label": "Next",
+            className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
+            children: /* @__PURE__ */ jsx7(ChevronRight2, { size: 16 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref: scrollRef,
+        className: "flex gap-4 overflow-x-auto scroll-smooth pb-2 snap-x snap-mandatory scrollbar-none [&::-webkit-scrollbar]:hidden -mx-4 px-4 sm:mx-0 sm:px-0 *:w-[268px] *:shrink-0 *:snap-start lg:grid lg:grid-cols-[repeat(4,minmax(0,320px))] lg:gap-5 lg:overflow-visible lg:justify-start lg:*:w-auto lg:*:shrink lg:*:snap-none",
+        children
+      }
+    )
+  ] });
+}
+
+// src/DataScopeFilter.tsx
+import { useEffect as useEffect5, useRef as useRef6, useState as useState5 } from "react";
+import { Check as Check4, ChevronDown as ChevronDown4 } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var FINAL_ONLY_TEXT = "Trims time periods to data that has finalized across the selected media formats. Some formats (e.g. Network TV and Cinema) finalize later, so the most recent periods may still change. Turn on for stable, report-ready numbers.";
+function cx3(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function DataScopeFilter({ value, onChange, align = "right" }) {
+  const [open, setOpen] = useState5(false);
+  const ref = useRef6(null);
+  const display = value ? "Final only" : "All";
+  useEffect5(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    window.addEventListener("mousedown", onDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("mousedown", onDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const choose = (v) => {
+    onChange(v);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+        children: [
+          /* @__PURE__ */ jsxs7("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ jsx8("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: "Data" }),
+            /* @__PURE__ */ jsx8("span", { className: "text-[12px] font-medium text-text-primary", children: display })
+          ] }),
+          /* @__PURE__ */ jsx8(
+            ChevronDown4,
+            {
+              size: 14,
+              "aria-hidden": "true",
+              className: cx3("shrink-0 text-text-secondary transition-transform", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        role: "listbox",
+        "aria-label": "Data",
+        className: cx3(
+          "absolute top-[calc(100%+8px)] z-30 min-w-[220px] overflow-hidden rounded-card border border-border-default bg-surface p-1 shadow-overlay",
+          align === "right" ? "right-0" : "left-0"
+        ),
+        children: [
+          /* @__PURE__ */ jsx8(Option, { label: "All", selected: !value, onClick: () => choose(false) }),
+          /* @__PURE__ */ jsx8(Option, { label: "Final only", selected: value, onClick: () => choose(true), hint: FINAL_ONLY_TEXT })
+        ]
+      }
+    )
+  ] });
+}
+function Option({
+  label,
+  selected,
+  onClick,
+  hint
+}) {
+  const option = /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": selected,
+      onClick,
+      className: cx3(
+        "flex items-center gap-2 rounded-control px-2.5 py-2 text-left text-[13px] transition-colors hover:bg-subtle",
+        hint ? "flex-1" : "w-full",
+        selected ? "font-semibold text-text-primary" : "text-text-secondary"
+      ),
+      children: [
+        /* @__PURE__ */ jsx8(Check4, { size: 14, "aria-hidden": "true", className: cx3("shrink-0 text-brand-primaryAction", !selected && "invisible") }),
+        label
+      ]
+    }
+  );
+  if (!hint) return option;
+  return /* @__PURE__ */ jsxs7("div", { className: "flex items-center pr-2.5", children: [
+    option,
+    /* @__PURE__ */ jsx8(InfoTip, { text: hint, trigger: "hover", label: `About ${label}` })
+  ] });
+}
+
+// src/SelectFilter.tsx
+import { useCallback as useCallback2, useEffect as useEffect6, useLayoutEffect, useRef as useRef7, useState as useState6 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { Check as Check5, ChevronDown as ChevronDown5 } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function cx4(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function slug3(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+function SelectFilter({
+  caption,
+  value,
+  options,
+  onChange,
+  align = "left",
+  fullWidth = false,
+  className,
+  testIdPrefix
+}) {
+  const [open, setOpen] = useState6(false);
+  const [pos, setPos] = useState6(null);
+  const ref = useRef7(null);
+  const popoverRef = useRef7(null);
+  const close = useCallback2(() => setOpen(false), []);
+  const reposition = useCallback2(() => {
+    if (!ref.current) return;
+    const r = ref.current.getBoundingClientRect();
+    setPos({ top: r.bottom + 8, left: align === "right" ? r.right - r.width : r.left, width: r.width });
+  }, [align]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    reposition();
+  }, [open, reposition]);
+  useEffect6(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && close();
+    const onClick = (e) => {
+      const t = e.target;
+      if (ref.current?.contains(t) || popoverRef.current?.contains(t)) return;
+      close();
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("mousedown", onClick);
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("mousedown", onClick);
+      window.removeEventListener("resize", reposition);
+      window.removeEventListener("scroll", reposition, true);
+    };
+  }, [open, close, reposition]);
+  return /* @__PURE__ */ jsxs8("div", { className: cx4("relative", fullWidth && "w-full"), ref, children: [
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        "data-testid": testIdPrefix && `${testIdPrefix}-trigger`,
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        className: cx4(
+          "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+          fullWidth && "w-full justify-between",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs8("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ jsx9("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
+            /* @__PURE__ */ jsx9("span", { className: "text-[12px] font-medium text-text-primary", children: value })
+          ] }),
+          /* @__PURE__ */ jsx9(
+            ChevronDown5,
+            {
+              size: 14,
+              "aria-hidden": "true",
+              className: cx4("shrink-0 text-text-secondary transition-transform", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    open && pos && createPortal2(
+      /* @__PURE__ */ jsx9(
+        "div",
+        {
+          ref: popoverRef,
+          "data-testid": testIdPrefix && `${testIdPrefix}-popover`,
+          style: { position: "fixed", top: pos.top, left: pos.left, width: fullWidth ? pos.width : void 0 },
+          className: cx4(
+            "z-[65] flex flex-col overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay",
+            !fullWidth && "w-56"
+          ),
+          role: "listbox",
+          "aria-label": caption,
+          children: /* @__PURE__ */ jsx9("div", { className: "max-h-[280px] overflow-y-auto p-1", children: options.map((o) => {
+            const selected = o === value;
+            return /* @__PURE__ */ jsxs8(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": selected,
+                "data-testid": testIdPrefix && `${testIdPrefix}-option-${slug3(o)}`,
+                onClick: () => {
+                  onChange(o);
+                  close();
+                },
+                className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
+                children: [
+                  /* @__PURE__ */ jsx9("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center text-brand-primaryAction", children: selected && /* @__PURE__ */ jsx9(Check5, { size: 15, strokeWidth: 3 }) }),
+                  /* @__PURE__ */ jsx9(
+                    "span",
+                    {
+                      className: cx4("flex-1 text-[14px]", selected ? "font-semibold text-text-primary" : "text-text-primary"),
+                      children: o
+                    }
+                  )
+                ]
+              },
+              o
+            );
+          }) })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+// src/Card.tsx
+import { forwardRef } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var Card = forwardRef(function Card2({ staticCard, title, subtitle, action, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx10(
+    "article",
+    {
+      ref,
+      className: [
+        "flex h-full flex-col overflow-hidden rounded-card border border-border-default bg-surface shadow-raised",
+        // Interactive hover: deeper drop shadow only -- no elevation/transform.
+        !staticCard && "group transition-shadow hover:shadow-overlay",
+        className
+      ].filter(Boolean).join(" "),
+      ...rest,
+      children: title ? /* @__PURE__ */ jsxs9("div", { className: "flex flex-1 flex-col p-card-padding", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs9("div", { children: [
+            /* @__PURE__ */ jsx10("h3", { className: "text-[15px] font-semibold leading-snug text-text-primary", children: title }),
+            subtitle && /* @__PURE__ */ jsx10("p", { className: "mt-0.5 text-[12px] leading-snug text-text-tertiary", children: subtitle })
+          ] }),
+          action && /* @__PURE__ */ jsx10("div", { className: "shrink-0 text-text-tertiary", children: action })
+        ] }),
+        /* @__PURE__ */ jsx10("div", { className: "mt-4 flex flex-1 flex-col", children })
+      ] }) : children
+    }
+  );
+});
+
+// src/NoResultsEmptyState.tsx
+import { FilterX } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var NO_RESULTS_TITLE = "No results match your filters";
+var NO_RESULTS_BODY = "Your filters may be too narrow, conflict with each other, or have no activity in this period.";
+function noResultsBody(workspaceName) {
+  return workspaceName ? `Nothing in the \u201C${workspaceName}\u201D workspace matches. ${NO_RESULTS_BODY}` : NO_RESULTS_BODY;
+}
+var PRIMARY_ACTION_CLASS = "rounded-control bg-brand-primaryAction px-3.5 py-2 text-[13px] font-semibold text-white transition-colors hover:opacity-90";
+var QUIET_ACTION_CLASS = "rounded-control text-[13px] font-medium text-text-link transition-colors hover:underline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus";
+function NoResultsEmptyState({
+  title = NO_RESULTS_TITLE,
+  body,
+  workspaceName,
+  hasFilters,
+  onClearFilters,
+  onEditFilters,
+  actions,
+  testIdPrefix
+}) {
+  const bodyText = body ?? noResultsBody(workspaceName);
+  const showClear = hasFilters !== false && Boolean(onClearFilters);
+  const showEdit = Boolean(onEditFilters);
+  const hasActions = showClear || showEdit || Boolean(actions && actions.length > 0);
+  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-center justify-center gap-3 text-center", "data-testid": testIdPrefix, children: [
+    /* @__PURE__ */ jsx11("span", { className: "flex h-11 w-11 items-center justify-center rounded-full bg-subtle text-text-tertiary", children: /* @__PURE__ */ jsx11(FilterX, { size: 20, "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsx11("h2", { className: "text-base font-semibold text-text-primary", children: title }),
+    /* @__PURE__ */ jsx11("p", { className: "max-w-[420px] text-[13px] leading-relaxed text-text-secondary", children: bodyText }),
+    hasActions && /* @__PURE__ */ jsxs10("div", { className: "mt-1 flex flex-col items-center gap-3", children: [
+      showClear && /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          onClick: onClearFilters,
+          "data-testid": testIdPrefix && `${testIdPrefix}-clear`,
+          className: PRIMARY_ACTION_CLASS,
+          children: "Clear all filters"
+        }
+      ),
+      showEdit && /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          onClick: onEditFilters,
+          "data-testid": testIdPrefix && `${testIdPrefix}-edit`,
+          className: QUIET_ACTION_CLASS,
+          children: "Edit filters"
+        }
+      ),
+      actions?.map((action, i) => /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          onClick: action.onClick,
+          className: action.primary ? PRIMARY_ACTION_CLASS : QUIET_ACTION_CLASS,
+          children: action.label
+        },
+        `${i}-${action.label}`
+      ))
+    ] })
+  ] });
+}
+
+// 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 { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function cx5(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function WorkspaceSelectedCard({ groups, testIdPrefix }) {
+  return /* @__PURE__ */ jsx12("aside", { className: "sticky top-4 flex min-w-0 flex-col gap-4 self-start rounded-card border border-border bg-surface px-5 pb-5 pt-4 shadow-raised sm:px-6 sm:pb-6", children: /* @__PURE__ */ jsx12("div", { className: "flex flex-col divide-y divide-border", children: groups.map((g) => /* @__PURE__ */ jsx12(SummaryGroupItem, { group: g, testIdPrefix }, g.id)) }) });
+}
+function SummaryGroupItem({
+  group,
+  nested = false,
+  testIdPrefix
+}) {
+  const ownCount = group.items.length;
+  const subCount = (group.subGroups ?? []).reduce((n, sg) => n + sg.items.length, 0);
+  const expandCount = ownCount + subCount;
+  const [open, setOpen] = useState7(expandCount > 0);
+  const wasEmpty = useRef8(expandCount === 0);
+  useEffect7(() => {
+    if (wasEmpty.current && expandCount > 0) setOpen(true);
+    else if (expandCount === 0) setOpen(false);
+    wasEmpty.current = expandCount === 0;
+  }, [expandCount]);
+  return /* @__PURE__ */ jsxs11("div", { className: nested ? "" : "py-3 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxs11(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": open,
+        "data-testid": testIdPrefix && `${testIdPrefix}-group-${group.id}`,
+        className: "flex w-full min-w-0 items-center gap-2 text-left",
+        children: [
+          /* @__PURE__ */ jsx12(
+            ChevronDown6,
+            {
+              size: 14,
+              "aria-hidden": "true",
+              className: cx5("shrink-0 text-text-secondary transition-transform", !open && "-rotate-90")
+            }
+          ),
+          /* @__PURE__ */ jsx12("span", { className: cx5("truncate font-semibold text-text-primary", nested ? "text-[12px]" : "text-[13px]"), children: group.label }),
+          /* @__PURE__ */ jsx12("span", { className: "shrink-0 rounded-full bg-subtle px-1.5 py-0.5 text-[11px] font-semibold text-text-secondary", children: ownCount })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx12("div", { className: "pt-2.5", children: ownCount === 0 && subCount === 0 ? /* @__PURE__ */ jsx12("p", { className: "text-[12px] text-text-secondary", children: "Nothing selected." }) : /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2.5", children: [
+      ownCount > 0 && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1.5", children: [
+        group.items.map((item) => /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            className: "flex items-center justify-between gap-2 rounded-control border border-border bg-canvas px-2 py-1",
+            children: [
+              /* @__PURE__ */ jsxs11("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx12("span", { className: "block truncate text-[12px] text-text-primary", children: item.name }),
+                item.meta && /* @__PURE__ */ jsx12("span", { className: "block truncate text-[11px] text-text-secondary", children: item.meta })
+              ] }),
+              /* @__PURE__ */ jsx12(
+                "button",
+                {
+                  type: "button",
+                  "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__ */ jsx12(X2, { size: 12, "aria-hidden": "true" })
+                }
+              )
+            ]
+          },
+          item.id
+        )),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            onClick: group.onRemoveAll,
+            "data-testid": testIdPrefix && `${testIdPrefix}-remove-all-${group.id}`,
+            className: "mt-0.5 self-start text-[11px] font-medium text-text-link hover:underline",
+            children: "Remove all"
+          }
+        )
+      ] }),
+      group.subGroups?.map((sg) => /* @__PURE__ */ jsx12(SummaryGroupItem, { group: sg, nested: true, testIdPrefix }, sg.id))
+    ] }) })
+  ] });
+}
+
+// src/chart-placeholder-shared.tsx
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var GRID_ROWS = [0, 25, 50, 75, 100];
+var Y_TICK_WIDTHS = [26, 30, 30, 26, 20];
+var Y_AXIS_W = 48;
+var X_AXIS_H = 22;
+var LEGEND_WIDTHS = [58, 44, 66, 50, 38, 62, 46, 54];
+function AxisFrame({
+  height,
+  xTicks,
+  children
+}) {
+  const gutter = xTicks > 0 ? X_AXIS_H : 0;
+  return /* @__PURE__ */ jsx13("div", { className: "w-full", style: { height }, role: "presentation", "aria-hidden": "true", children: /* @__PURE__ */ jsxs12("div", { className: "relative h-full w-full", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "absolute inset-y-0 right-0", style: { left: Y_AXIS_W, bottom: gutter }, children: [
+      GRID_ROWS.map((pct) => /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: "absolute inset-x-0 border-t border-dashed",
+          style: { top: `${pct}%`, borderColor: "var(--color-border-default)" }
+        },
+        pct
+      )),
+      /* @__PURE__ */ jsx13("div", { className: "absolute inset-0", children })
+    ] }),
+    /* @__PURE__ */ jsx13("div", { className: "absolute left-0 top-0", style: { width: Y_AXIS_W, bottom: gutter }, children: GRID_ROWS.map((pct, i) => /* @__PURE__ */ jsx13(
+      "div",
+      {
+        className: "absolute right-2 h-2 -translate-y-1/2 rounded-xs bg-subtle",
+        style: { top: `${pct}%`, width: Y_TICK_WIDTHS[i] }
+      },
+      pct
+    )) }),
+    xTicks > 0 && /* @__PURE__ */ jsx13(
+      "div",
+      {
+        className: "absolute bottom-0 right-0 flex items-center",
+        style: { left: Y_AXIS_W, height: X_AXIS_H },
+        children: Array.from({ length: xTicks }, (_, i) => /* @__PURE__ */ jsx13("div", { className: "flex flex-1 justify-center", children: /* @__PURE__ */ jsx13("div", { className: "h-2 w-full max-w-[26px] rounded-xs bg-subtle" }) }, i))
+      }
+    )
+  ] }) });
+}
+function BlankLegend({ rows, reverse = false }) {
+  return /* @__PURE__ */ jsx13(
+    "ul",
+    {
+      className: `flex flex-1 justify-center gap-1.5 ${reverse ? "flex-col-reverse" : "flex-col"}`,
+      role: "presentation",
+      "aria-hidden": "true",
+      children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxs12("li", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx13("span", { className: "h-2.5 w-2.5 rounded-xs bg-subtle" }),
+          /* @__PURE__ */ jsx13(
+            "span",
+            {
+              className: "h-2 rounded-xs bg-subtle",
+              style: { width: LEGEND_WIDTHS[i % LEGEND_WIDTHS.length] }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx13("span", { className: "h-2 w-6 rounded-xs bg-subtle" })
+      ] }, i))
+    }
+  );
+}
+
+// src/BarChartPlaceholder.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var BAR_PROFILE = [92, 86, 76, 65, 57, 40, 30, 24, 18, 13];
+function BarChartPlaceholder({ height = 220 }) {
+  return /* @__PURE__ */ jsx14(AxisFrame, { height, xTicks: BAR_PROFILE.length, children: /* @__PURE__ */ jsx14("div", { className: "flex h-full w-full items-end gap-2", children: BAR_PROFILE.map((pct, i) => /* @__PURE__ */ jsx14("div", { className: "flex-1 rounded-t-[3px] bg-subtle", style: { height: `${pct}%` } }, i)) }) });
+}
+
+// src/LineChartPlaceholder.tsx
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var LINE_SERIES = [
+  [58, 52, 55, 41, 45, 33, 36, 25, 28, 17],
+  [74, 71, 66, 68, 59, 61, 54, 56, 48, 45],
+  [40, 44, 37, 41, 34, 38, 31, 34, 27, 26],
+  [86, 82, 84, 77, 79, 71, 73, 66, 68, 61]
+];
+var LINE_FORECAST_FROM = 7;
+function LineChartPlaceholder({ height = 280 }) {
+  const toPath = (pts, from, to) => pts.slice(from, to).map((y, i) => `${(i + from) / (pts.length - 1) * 100},${y}`).join(" ");
+  return /* @__PURE__ */ jsxs13(AxisFrame, { height, xTicks: LINE_SERIES[0].length, children: [
+    /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 h-full w-full", children: LINE_SERIES.map((pts, s) => /* @__PURE__ */ jsxs13("g", { children: [
+      /* @__PURE__ */ jsx15(
+        "polyline",
+        {
+          points: toPath(pts, 0, LINE_FORECAST_FROM + 1),
+          fill: "none",
+          stroke: "var(--color-border-strong)",
+          strokeWidth: "2",
+          vectorEffect: "non-scaling-stroke",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx15(
+        "polyline",
+        {
+          points: toPath(pts, LINE_FORECAST_FROM, pts.length),
+          fill: "none",
+          stroke: "var(--color-border-strong)",
+          strokeWidth: "2",
+          strokeDasharray: "5 4",
+          vectorEffect: "non-scaling-stroke",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ] }, s)) }),
+    LINE_SERIES.map(
+      (pts, s) => pts.map((y, i) => /* @__PURE__ */ jsx15(
+        "div",
+        {
+          className: "absolute h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full",
+          style: {
+            left: `${i / (pts.length - 1) * 100}%`,
+            top: `${y}%`,
+            backgroundColor: "var(--color-border-strong)"
+          }
+        },
+        `${s}-${i}`
+      ))
+    )
+  ] });
+}
+
+// src/PieChartPlaceholder.tsx
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var PIE_SEAMS = [0, 115, 180, 230, 262, 288, 310, 332];
+function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
+  const r = 45;
+  return /* @__PURE__ */ jsxs14("div", { className: "flex w-full items-center gap-3", style: { height }, role: "presentation", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx16("div", { className: "flex h-full items-center justify-center", style: { width: "60%" }, children: /* @__PURE__ */ jsxs14("svg", { viewBox: "0 0 100 100", className: "h-full", style: { aspectRatio: "1 / 1" }, children: [
+      /* @__PURE__ */ jsx16("circle", { cx: "50", cy: "50", r, fill: "var(--color-subtle)" }),
+      PIE_SEAMS.map((deg) => {
+        const rad = (deg - 90) * Math.PI / 180;
+        return /* @__PURE__ */ jsx16(
+          "line",
+          {
+            x1: "50",
+            y1: "50",
+            x2: 50 + r * Math.cos(rad),
+            y2: 50 + r * Math.sin(rad),
+            stroke: "var(--color-border-default)",
+            strokeWidth: "1"
+          },
+          deg
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ jsx16(BlankLegend, { rows: legendRows })
+  ] });
+}
+
+// src/StackedColumnPlaceholder.tsx
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var COLUMN_WEIGHTS = [20, 30, 15, 35, 24, 12, 28, 18];
+function columnBands(count) {
+  const weights = Array.from({ length: count }, (_, i) => COLUMN_WEIGHTS[i % COLUMN_WEIGHTS.length]);
+  const total = weights.reduce((a, b) => a + b, 0);
+  return weights.map((w) => w / total * 100);
+}
+function StackedColumnPlaceholder({
+  height = 220,
+  width = 96,
+  legendRows = 4,
+  axis = false
+}) {
+  const column = /* @__PURE__ */ jsx17("div", { className: "flex h-full flex-col overflow-hidden rounded-control bg-subtle", style: { width }, children: columnBands(legendRows).map((pct, i) => /* @__PURE__ */ jsx17(
+    "div",
+    {
+      style: {
+        height: `${pct}%`,
+        /* border-strong, not border-default: on a subtle fill the softer
+           seam disappears and the stack reads as one undivided block. */
+        borderTop: i === 0 ? void 0 : "1px solid var(--color-border-strong)"
+      }
+    },
+    i
+  )) });
+  return /* @__PURE__ */ jsxs15("div", { className: "flex w-full gap-4", style: { height }, role: "presentation", "aria-hidden": "true", children: [
+    axis ? /* @__PURE__ */ jsx17("div", { style: { width: "55%" }, children: /* @__PURE__ */ jsx17(AxisFrame, { height, xTicks: 0, children: /* @__PURE__ */ jsx17("div", { className: "flex h-full items-stretch justify-center", children: column }) }) }) : /* @__PURE__ */ jsx17("div", { className: "flex items-stretch py-1", children: column }),
+    /* @__PURE__ */ jsx17(BlankLegend, { rows: legendRows, reverse: !axis })
+  ] });
+}
+
+// src/Tooltip.tsx
+import { useEffect as useEffect8, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState8 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+function cx6(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function Tooltip({
+  label,
+  children,
+  anchorRef,
+  className,
+  whenTruncated = false,
+  interactive = false,
+  placement = "top",
+  align = "center",
+  delay = 0,
+  variant = "surface",
+  testIdPrefix
+}) {
+  const [anchor, setAnchor] = useState8(null);
+  const [boxWidth, setBoxWidth] = useState8(null);
+  const ref = useRef9(null);
+  const boxRef = useRef9(null);
+  const hideTimer = useRef9(null);
+  const showTimer = useRef9(null);
+  const id = useId();
+  const clearHideTimer = () => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = null;
+    }
+  };
+  const clearShowTimer = () => {
+    if (showTimer.current) {
+      clearTimeout(showTimer.current);
+      showTimer.current = null;
+    }
+  };
+  useEffect8(
+    () => () => {
+      clearHideTimer();
+      clearShowTimer();
+    },
+    []
+  );
+  const reveal = () => {
+    const el = anchorRef ? anchorRef.current : ref.current;
+    if (!el) return;
+    if (whenTruncated && el.scrollWidth <= el.clientWidth) return;
+    const r = el.getBoundingClientRect();
+    setBoxWidth(null);
+    setAnchor({ top: r.top, left: r.left, width: r.width, height: r.height, bottom: r.bottom, right: r.right });
+    if (anchorRef) el.setAttribute("aria-describedby", id);
+  };
+  const show = () => {
+    clearHideTimer();
+    if (delay > 0) {
+      showTimer.current = setTimeout(reveal, delay);
+    } else {
+      reveal();
+    }
+  };
+  const hideNow = () => {
+    clearShowTimer();
+    clearHideTimer();
+    setAnchor(null);
+    setBoxWidth(null);
+    if (anchorRef?.current) anchorRef.current.removeAttribute("aria-describedby");
+  };
+  const hide = () => {
+    clearShowTimer();
+    if (!interactive) {
+      hideNow();
+      return;
+    }
+    clearHideTimer();
+    hideTimer.current = setTimeout(hideNow, 120);
+  };
+  useEffect8(() => {
+    if (!anchorRef) return;
+    const el = anchorRef.current;
+    if (!el) return;
+    el.addEventListener("mouseenter", show);
+    el.addEventListener("mouseleave", hide);
+    el.addEventListener("focus", show);
+    el.addEventListener("blur", hide);
+    return () => {
+      el.removeEventListener("mouseenter", show);
+      el.removeEventListener("mouseleave", hide);
+      el.removeEventListener("focus", show);
+      el.removeEventListener("blur", hide);
+    };
+  }, [anchorRef, placement, delay]);
+  useLayoutEffect2(() => {
+    if (!anchor) return;
+    const el = boxRef.current;
+    if (!el) return;
+    setBoxWidth(el.getBoundingClientRect().width);
+  }, [anchor, label]);
+  const margin = 8;
+  let style = { top: 0, left: 0 };
+  let translate = "";
+  if (anchor) {
+    if (placement === "right") {
+      style = { top: anchor.top + anchor.height / 2, left: anchor.right + 8 };
+      translate = "-translate-y-1/2";
+    } else if (placement === "bottom-end") {
+      style = { top: anchor.bottom + 8, right: window.innerWidth - anchor.right };
+    } else {
+      const w = boxWidth ?? anchor.width;
+      const desired = align === "start" ? anchor.left : anchor.left + anchor.width / 2 - w / 2;
+      const left = Math.min(Math.max(desired, margin), Math.max(margin, window.innerWidth - w - margin));
+      style = { left, top: placement === "bottom" ? anchor.bottom : anchor.top };
+      translate = placement === "bottom" ? "translate-y-2" : "-translate-y-[calc(100%+8px)]";
+    }
+  }
+  const floating = anchor != null && typeof document !== "undefined" ? createPortal3(
+    /* @__PURE__ */ jsx18(
+      "span",
+      {
+        ref: boxRef,
+        role: "tooltip",
+        id,
+        "data-testid": testIdPrefix && `${testIdPrefix}-tooltip`,
+        style: { top: style.top, left: style.left, right: style.right, visibility: boxWidth == null ? "hidden" : "visible" },
+        onMouseEnter: interactive ? clearHideTimer : void 0,
+        onMouseLeave: interactive ? hide : void 0,
+        className: cx6(
+          "fixed z-[90] w-max max-w-xs whitespace-normal break-words px-2.5 py-1.5 text-xs leading-snug",
+          interactive ? "pointer-events-auto" : "pointer-events-none",
+          variant === "inverted" ? "rounded-control bg-text-primary text-surface" : "rounded-control border border-border-default bg-surface text-text-primary shadow-overlay",
+          translate
+        ),
+        children: label
+      }
+    ),
+    document.body
+  ) : null;
+  if (anchorRef) return floating;
+  return /* @__PURE__ */ jsxs16(
+    "span",
+    {
+      ref,
+      className,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      "aria-describedby": anchor ? id : void 0,
+      children: [
+        children,
+        floating
+      ]
+    }
+  );
+}
+
+// src/AdvertiserNoResults.tsx
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+function AdvertiserNoResults({
+  query,
+  hint = "Try checking your spelling or searching for a broader brand name."
+}) {
+  return /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center gap-1.5 px-4 py-8 text-center", children: [
+    /* @__PURE__ */ jsxs17("p", { className: "text-[13px] font-medium text-text-primary", children: [
+      "No results found for \u201C",
+      query,
+      "\u201D"
+    ] }),
+    /* @__PURE__ */ jsx19("p", { className: "text-[12px] leading-snug text-text-tertiary", children: hint })
+  ] });
+}
+
+// src/SelectAllVisible.tsx
+import { ListChecks as ListChecks2 } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
+  return /* @__PURE__ */ jsxs18(
+    "button",
+    {
+      type: "button",
+      "data-testid": testIdPrefix && `${testIdPrefix}-select-all-visible`,
+      onClick: onToggle,
+      className: "flex w-full items-center gap-2 rounded-control px-2 py-1.5 text-left text-[12px] font-semibold text-text-link transition-colors hover:bg-subtle",
+      children: [
+        /* @__PURE__ */ jsx20(ListChecks2, { size: 14, "aria-hidden": "true" }),
+        allSelected ? `Deselect ${count} visible` : `Select all ${count} visible`
+      ]
+    }
+  );
+}
+
+// src/SelectedSection.tsx
+import { ChevronDown as ChevronDown7 } from "lucide-react";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+function cx7(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs19(
+      "button",
+      {
+        type: "button",
+        "data-testid": testIdPrefix && `${testIdPrefix}-selected-toggle`,
+        onClick: onToggle,
+        "aria-expanded": open,
+        className: "flex w-full items-center gap-1.5 rounded-control px-2 py-1 text-left text-[11px] font-semibold uppercase tracking-wide text-text-tertiary transition-colors hover:text-text-primary",
+        children: [
+          /* @__PURE__ */ jsx21(ChevronDown7, { size: 13, "aria-hidden": "true", className: cx7("transition-transform", !open && "-rotate-90") }),
+          "Selected (",
+          count,
+          ")"
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx21("div", { className: "flex flex-col gap-0.5", children })
+  ] });
+}
+
+// src/SelectionPicker.tsx
+import { useCallback as useCallback3, useEffect as useEffect9, useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef10, useState as useState9 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+import { Search as Search4, Plus, Info as Info2, ChevronRight as ChevronRight3, ChevronDown as ChevronDown8, Check as Check6, List, Loader2 } from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+function cx8(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function slug4(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+function SelectionPicker({
+  catalog = [],
+  selected,
+  onChange,
+  columns,
+  filters,
+  searchPlaceholder = "Search\u2026",
+  getChildren,
+  helper,
+  showInfoColumn = true,
+  defaultFilters,
+  requireQuery = false,
+  showResultsWithoutSearch = false,
+  accountLists,
+  selectedListIds,
+  onToggleList,
+  lockedIds,
+  results,
+  onQueryChange,
+  loading = false,
+  error = false,
+  errorMessage = "Couldn't load options. Please try again.",
+  hasMore = false,
+  loadingMore = false,
+  onLoadMore,
+  toolbarExtra,
+  testIdPrefix
+}) {
+  const hasAccountLists = !!accountLists;
+  const [source, setSource] = useState9("search");
+  const [query, setQuery] = useState9("");
+  const [activeFilters, setActiveFilters] = useState9(() => {
+    const init = {};
+    if (defaultFilters) for (const [label, opts] of Object.entries(defaultFilters)) init[label] = new Set(opts);
+    return init;
+  });
+  const [expanded, setExpanded] = useState9(/* @__PURE__ */ new Set());
+  const selectedIds = useMemo3(() => new Set(selected.map((s) => s.id)), [selected]);
+  const toggleFilter = (label, opt) => {
+    setActiveFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[label] ?? []);
+      set.has(opt) ? set.delete(opt) : set.add(opt);
+      next[label] = set;
+      return next;
+    });
+  };
+  const activeFilterCount = filters.reduce((n, f) => n + (activeFilters[f.label]?.size ?? 0), 0);
+  const hasSearched = showResultsWithoutSearch || query.trim().length > 0 || !requireQuery && activeFilterCount > 0;
+  const filteredCatalog = useMemo3(() => {
+    if (!hasSearched || results !== void 0) return [];
+    const q = query.trim().toLowerCase();
+    return catalog.filter((row) => {
+      if (q && !row.name.toLowerCase().includes(q)) return false;
+      for (const f of filters) {
+        const active = activeFilters[f.label];
+        if (active && active.size > 0) {
+          const v = f.value(row);
+          if (!v || !active.has(v)) return false;
+        }
+      }
+      return true;
+    });
+  }, [hasSearched, results, catalog, query, filters, activeFilters]);
+  const rows = results !== void 0 ? results : filteredCatalog;
+  const addRows = (add) => {
+    const toAdd = add.filter((r) => !selectedIds.has(r.id));
+    if (toAdd.length) onChange([...selected, ...toAdd]);
+  };
+  const toggleRow = (row) => {
+    if (selectedIds.has(row.id)) {
+      onChange(selected.filter((s) => s.id !== row.id));
+    } else {
+      addRows([row]);
+    }
+  };
+  const toggleable = lockedIds ? rows.filter((r) => !lockedIds.has(r.id)) : rows;
+  const allSelected = toggleable.length > 0 && toggleable.every((r) => selectedIds.has(r.id));
+  const someSelected = toggleable.some((r) => selectedIds.has(r.id));
+  const toggleAll = () => {
+    if (allSelected) {
+      const rowIds = new Set(toggleable.map((r) => r.id));
+      onChange(selected.filter((s) => !rowIds.has(s.id)));
+    } else {
+      addRows(toggleable);
+    }
+  };
+  const rowGridCols = showInfoColumn ? "grid-cols-[36px_1fr_44px]" : "grid-cols-[36px_1fr]";
+  return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-4", children: [
+    helper && /* @__PURE__ */ jsxs20(Fragment4, { children: [
+      /* @__PURE__ */ jsx22("p", { className: "text-[13px] text-text-secondary", children: helper }),
+      /* @__PURE__ */ jsx22("hr", { className: "-mx-5 -mt-2 border-border-default sm:-mx-6" })
+    ] }),
+    hasAccountLists && /* @__PURE__ */ jsx22("div", { className: "inline-flex gap-0.5 self-start rounded-control border border-border-default bg-canvas p-0.5", children: [
+      { id: "search", label: "Search", icon: Search4 },
+      { id: "lists", label: "Account lists", icon: List }
+    ].map((t) => {
+      const on = source === t.id;
+      return /* @__PURE__ */ jsxs20(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSource(t.id),
+          "data-testid": testIdPrefix && `${testIdPrefix}-source-${t.id}`,
+          className: cx8(
+            "inline-flex items-center gap-1.5 rounded-[6px] px-3 py-1.5 text-[13px] font-medium transition-colors",
+            on ? "bg-surface text-text-primary shadow-raised" : "text-text-secondary hover:text-text-primary"
+          ),
+          children: [
+            /* @__PURE__ */ jsx22(t.icon, { size: 14, "aria-hidden": "true" }),
+            t.label
+          ]
+        },
+        t.id
+      );
+    }) }),
+    source === "search" && /* @__PURE__ */ jsxs20("div", { className: "flex min-w-0 flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex h-9 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-default bg-input px-3", children: [
+          /* @__PURE__ */ jsx22(Search4, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx22(
+            "input",
+            {
+              value: query,
+              onChange: (e) => {
+                const next = e.target.value;
+                setQuery(next);
+                onQueryChange?.(next);
+              },
+              placeholder: searchPlaceholder,
+              "aria-label": searchPlaceholder,
+              "data-testid": testIdPrefix && `${testIdPrefix}-search`,
+              className: "h-full flex-1 bg-transparent text-sm outline-hidden placeholder:text-text-tertiary"
+            }
+          )
+        ] }),
+        filters.map((f) => /* @__PURE__ */ jsx22(
+          FilterDropdown,
+          {
+            filter: f,
+            active: activeFilters[f.label] ?? /* @__PURE__ */ new Set(),
+            onToggle: (opt) => toggleFilter(f.label, opt),
+            testIdPrefix
+          },
+          f.label
+        )),
+        toolbarExtra
+      ] }),
+      !hasSearched ? /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
+        /* @__PURE__ */ jsx22("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ jsx22(Search4, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx22("p", { className: "text-[14px] font-semibold text-text-primary", children: "Search to get started" }),
+          /* @__PURE__ */ jsx22("p", { className: "text-[13px] text-text-tertiary", children: "Use the search or filters above to find and add options." })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs20("div", { className: "overflow-hidden rounded-control border border-border-default", children: [
+        /* @__PURE__ */ jsxs20(
+          "div",
+          {
+            className: cx8(
+              "grid items-center gap-2 border-b border-border-default bg-canvas px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.06em] text-text-secondary",
+              rowGridCols
+            ),
+            children: [
+              /* @__PURE__ */ jsx22(
+                CheckBox,
+                {
+                  checked: allSelected,
+                  indeterminate: !allSelected && someSelected,
+                  disabled: toggleable.length === 0,
+                  onChange: toggleAll,
+                  ariaLabel: "Select all",
+                  testId: testIdPrefix && `${testIdPrefix}-select-all`
+                }
+              ),
+              /* @__PURE__ */ jsx22("div", { className: cx8("grid gap-2", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ jsx22("span", { className: c.className, children: c.header }, c.key)) }),
+              showInfoColumn && /* @__PURE__ */ jsx22("span", { className: "text-right", children: "Info" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx22("div", { className: "max-h-[360px] overflow-y-auto", children: loading ? /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center py-6", role: "status", "aria-label": "Loading", children: /* @__PURE__ */ jsx22(Loader2, { size: 18, className: "animate-spin text-text-tertiary", "aria-hidden": "true" }) }) : error ? /* @__PURE__ */ jsx22("p", { className: "px-3 py-8 text-center text-[13px] text-text-tertiary", children: errorMessage }) : rows.length === 0 ? /* @__PURE__ */ jsx22("div", { className: "px-3 py-8 text-center text-[13px] text-text-tertiary", children: "No matches. Try a different search or filter." }) : rows.map((row) => {
+          const isSel = selectedIds.has(row.id);
+          const isLocked = lockedIds?.has(row.id) ?? false;
+          const kids = getChildren?.(row);
+          const isOpen = expanded.has(row.id);
+          return /* @__PURE__ */ jsxs20("div", { className: "border-t border-border-default/60 first:border-t-0", children: [
+            /* @__PURE__ */ jsxs20(
+              "div",
+              {
+                onClick: isLocked ? void 0 : () => toggleRow(row),
+                "aria-disabled": isLocked || void 0,
+                className: cx8(
+                  "grid items-center gap-2 px-3 py-2.5",
+                  rowGridCols,
+                  isLocked ? "cursor-default opacity-50" : "cursor-pointer hover:bg-subtle",
+                  !isLocked && isSel && "opacity-60"
+                ),
+                children: [
+                  isLocked ? /* @__PURE__ */ jsx22("span", { "aria-hidden": "true" }) : /* @__PURE__ */ jsx22(
+                    CheckBox,
+                    {
+                      checked: isSel,
+                      onChange: () => toggleRow(row),
+                      ariaLabel: row.name,
+                      testId: testIdPrefix && `${testIdPrefix}-row-${slug4(row.id)}`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx22("div", { className: cx8("grid gap-2 text-[13px] text-text-primary", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ jsx22("span", { className: cx8("truncate", c.className), children: c.render(row) }, c.key)) }),
+                  showInfoColumn && /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-end", children: kids && kids.length > 0 ? /* @__PURE__ */ jsx22(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Show details",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setExpanded((p) => {
+                          const n = new Set(p);
+                          n.has(row.id) ? n.delete(row.id) : n.add(row.id);
+                          return n;
+                        });
+                      },
+                      className: "flex h-7 w-7 items-center justify-center rounded-control text-text-secondary hover:bg-canvas hover:text-text-primary",
+                      children: /* @__PURE__ */ jsx22(ChevronRight3, { size: 15, className: cx8("transition-transform", isOpen && "rotate-90") })
+                    }
+                  ) : /* @__PURE__ */ jsx22(
+                    "span",
+                    {
+                      className: "flex h-7 w-7 items-center justify-center text-text-tertiary",
+                      title: "No additional details",
+                      children: /* @__PURE__ */ jsx22(Info2, { size: 14 })
+                    }
+                  ) })
+                ]
+              }
+            ),
+            isOpen && kids && /* @__PURE__ */ jsx22("div", { className: "bg-canvas/60 pb-1.5 pl-10 pr-3", children: kids.map((kid) => {
+              const kidSel = selectedIds.has(kid.id);
+              return /* @__PURE__ */ jsxs20(
+                "div",
+                {
+                  className: "flex items-center justify-between gap-2 border-t border-border-default/40 py-2 first:border-t-0",
+                  children: [
+                    /* @__PURE__ */ jsx22("span", { className: "truncate text-[13px] text-text-secondary", children: kid.name }),
+                    /* @__PURE__ */ jsxs20(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: kidSel,
+                        onClick: () => addRows([kid]),
+                        className: cx8(
+                          "inline-flex items-center gap-1 rounded-control px-2 py-1 text-[12px] font-medium",
+                          kidSel ? "text-text-tertiary" : "text-text-link hover:bg-subtle"
+                        ),
+                        children: [
+                          kidSel ? /* @__PURE__ */ jsx22(Check6, { size: 13 }) : /* @__PURE__ */ jsx22(Plus, { size: 13 }),
+                          kidSel ? "Added" : "Add"
+                        ]
+                      }
+                    )
+                  ]
+                },
+                kid.id
+              );
+            }) })
+          ] }, row.id);
+        }) }),
+        !loading && !error && hasMore && /* @__PURE__ */ jsxs20(
+          "button",
+          {
+            type: "button",
+            onClick: onLoadMore,
+            disabled: loadingMore,
+            "data-testid": testIdPrefix && `${testIdPrefix}-load-more`,
+            className: "flex w-full items-center justify-center gap-2 border-t border-border-default px-2 py-1.5 text-[13px] text-brand-primaryAction transition-colors hover:bg-subtle disabled:opacity-50",
+            children: [
+              loadingMore ? /* @__PURE__ */ jsx22(Loader2, { size: 13, className: "animate-spin", "aria-hidden": "true" }) : null,
+              loadingMore ? "Loading\u2026" : "Load more"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    source === "lists" && /* @__PURE__ */ jsxs20("div", { className: "flex min-w-0 flex-col gap-3", children: [
+      /* @__PURE__ */ jsx22("p", { className: "text-[13px] text-text-secondary", children: "Select an account list to add all of its accounts at once. Your workspace stays in sync as the list is updated." }),
+      accountLists && accountLists.length > 0 ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
+        /* @__PURE__ */ jsx22(ScrollFade, { className: "flex max-h-[396px] flex-col gap-2 overflow-y-auto pr-0.5", children: accountLists.map((list) => {
+          const on = (selectedListIds ?? []).includes(list.id);
+          return /* @__PURE__ */ jsxs20(
+            "button",
+            {
+              type: "button",
+              onClick: () => onToggleList?.(list.id),
+              "aria-pressed": on,
+              "data-testid": testIdPrefix && `${testIdPrefix}-list-${list.id}`,
+              className: cx8(
+                "flex items-center gap-3 rounded-control border px-3.5 py-3 text-left transition-colors",
+                on ? "border-brand-primaryAction bg-brand-primarySoft" : "border-border-default bg-surface hover:bg-subtle"
+              ),
+              children: [
+                /* @__PURE__ */ jsx22(
+                  "span",
+                  {
+                    className: cx8(
+                      "flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
+                      on ? "text-brand-primaryAction" : "text-text-secondary"
+                    ),
+                    children: on ? /* @__PURE__ */ jsx22(Check6, { size: 16 }) : /* @__PURE__ */ jsx22(Plus, { size: 16 })
+                  }
+                ),
+                /* @__PURE__ */ jsxs20("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx22("span", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsx22("span", { className: "truncate text-[14px] font-medium text-text-primary", children: list.name }) }),
+                  /* @__PURE__ */ jsxs20("span", { className: "block truncate text-[12px] text-text-secondary", children: [
+                    list.count,
+                    " accounts \xB7 ",
+                    list.entityTypes.join(", "),
+                    " \xB7 Updated ",
+                    formatListDate(list.updatedAt)
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx22("span", { className: cx8("shrink-0 text-[12px] font-medium", on ? "text-brand-primaryAction" : "text-text-secondary"), children: on ? "Added" : "Add" })
+              ]
+            },
+            list.id
+          );
+        }) }),
+        /* @__PURE__ */ jsxs20(
+          "p",
+          {
+            className: "border-t border-border-default pt-2 text-right text-[12px] font-medium text-text-tertiary",
+            "data-testid": testIdPrefix && `${testIdPrefix}-list-count`,
+            children: [
+              accountLists.length,
+              " ",
+              accountLists.length === 1 ? "list" : "lists"
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
+        /* @__PURE__ */ jsx22("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ jsx22(List, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx22("p", { className: "text-[14px] font-semibold text-text-primary", children: "No account lists yet" }),
+          /* @__PURE__ */ jsx22("p", { className: "text-[13px] text-text-tertiary", children: "Account lists set up for you will appear here." })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+var EDGE_FADE = 44;
+function ScrollFade({ className, children }) {
+  const elRef = useRef10(null);
+  const [edges, setEdges] = useState9({ top: false, bottom: false });
+  const sync = useCallback3(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const top = el.scrollTop > 2;
+    const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 2;
+    setEdges((prev) => prev.top === top && prev.bottom === bottom ? prev : { top, bottom });
+  }, []);
+  const attach = useCallback3(
+    (el) => {
+      elRef.current = el;
+      if (!el) return;
+      sync();
+      const ro = new ResizeObserver(sync);
+      ro.observe(el);
+      return () => {
+        ro.disconnect();
+        elRef.current = null;
+      };
+    },
+    [sync]
+  );
+  const mask = edges.top || edges.bottom ? `linear-gradient(to bottom, transparent 0, #000 ${edges.top ? EDGE_FADE : 0}px, #000 calc(100% - ${edges.bottom ? EDGE_FADE : 0}px), transparent 100%)` : void 0;
+  return /* @__PURE__ */ jsx22("div", { ref: attach, onScroll: sync, className, style: { maskImage: mask, WebkitMaskImage: mask }, children });
+}
+function formatListDate(iso) {
+  try {
+    return new Date(iso).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  } catch {
+    return iso;
+  }
+}
+function FilterDropdown({
+  filter,
+  active,
+  onToggle,
+  testIdPrefix
+}) {
+  const [open, setOpen] = useState9(false);
+  const [q, setQ] = useState9("");
+  const btnRef = useRef10(null);
+  const menuRef = useRef10(null);
+  const [pos, setPos] = useState9(null);
+  const searchable = filter.options.length > 8;
+  const shownOptions = searchable && q.trim() ? filter.options.filter((o) => o.toLowerCase().includes(q.trim().toLowerCase())) : filter.options;
+  useLayoutEffect3(() => {
+    if (!open || !btnRef.current) return;
+    const r = btnRef.current.getBoundingClientRect();
+    setPos({ top: r.bottom + 6, left: r.left });
+  }, [open]);
+  useEffect9(() => {
+    if (!open) {
+      setQ("");
+      return;
+    }
+    const onDown = (e) => {
+      const t = e.target;
+      if (!btnRef.current?.contains(t) && !menuRef.current?.contains(t)) setOpen(false);
+    };
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    const onScroll = () => setOpen(false);
+    window.addEventListener("mousedown", onDown);
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      window.removeEventListener("mousedown", onDown);
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [open]);
+  const count = active.size;
+  const label = count === 0 ? filter.label : count === 1 ? [...active][0] : "Multiple";
+  const filterSlug = slug4(filter.label);
+  return /* @__PURE__ */ jsxs20("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs20(
+      "button",
+      {
+        ref: btnRef,
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-haspopup": "menu",
+        "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-default bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
+        children: [
+          label,
+          /* @__PURE__ */ jsx22(ChevronDown8, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
+        ]
+      }
+    ),
+    open && pos && createPortal4(
+      /* @__PURE__ */ jsxs20(
+        "div",
+        {
+          ref: menuRef,
+          role: "menu",
+          "aria-label": filter.label,
+          style: { top: pos.top, left: pos.left },
+          className: "fixed z-[80] min-w-[220px] rounded-card border border-border-default bg-surface p-2 shadow-overlay",
+          children: [
+            searchable && /* @__PURE__ */ jsxs20("div", { className: "mb-1.5 flex h-8 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
+              /* @__PURE__ */ jsx22(Search4, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx22(
+                "input",
+                {
+                  autoFocus: true,
+                  value: q,
+                  onChange: (e) => setQ(e.target.value),
+                  placeholder: `Search ${filter.label.toLowerCase()}\u2026`,
+                  className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx22("div", { className: cx8("flex flex-col gap-0.5", searchable && "max-h-[240px] overflow-y-auto"), children: shownOptions.length === 0 ? /* @__PURE__ */ jsx22("p", { className: "px-2 py-3 text-center text-[12px] text-text-secondary", children: "No matches." }) : shownOptions.map((opt) => {
+              const on = active.has(opt);
+              return /* @__PURE__ */ jsxs20(
+                "label",
+                {
+                  className: "flex cursor-pointer items-center gap-2 rounded-control px-2 py-1.5 text-[13px] text-text-primary hover:bg-subtle",
+                  children: [
+                    /* @__PURE__ */ jsx22(
+                      CheckBox,
+                      {
+                        checked: on,
+                        onChange: () => onToggle(opt),
+                        ariaLabel: opt,
+                        testId: testIdPrefix && `${testIdPrefix}-filter-${filterSlug}-${slug4(opt)}`
+                      }
+                    ),
+                    opt
+                  ]
+                },
+                opt
+              );
+            }) })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function gridForColumns(columns) {
+  if (columns.length <= 1) return "grid-cols-1";
+  if (columns.length === 2) return "grid-cols-[1.6fr_1fr]";
+  if (columns.length === 3) return "grid-cols-[1.6fr_1fr_1fr]";
+  return "grid-cols-[1.6fr_1fr_1fr_1fr]";
+}
+
+// src/PublisherBreakdownList.tsx
+import { useState as useState10 } from "react";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+function cx9(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+var fmtM = (v) => v >= 100 ? `$${Math.round(v)}M` : `$${v.toFixed(1)}M`;
+function priorYearAmt(spendN, yoy) {
+  if (yoy === "NEW" || yoy <= -100) return null;
+  return fmtM(spendN / (1 + yoy / 100));
+}
+function initials(name) {
+  const words = name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean);
+  if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
+  return name.replace(/[^a-zA-Z0-9]/g, "").slice(0, 2).toUpperCase();
+}
+function Monogram({ name, size = 28 }) {
+  return /* @__PURE__ */ jsx23(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "flex shrink-0 items-center justify-center rounded-[6px] bg-subtle font-bold leading-none text-text-secondary",
+      style: { width: size, height: size, fontSize: Math.round(size * 0.36) },
+      children: initials(name)
+    }
+  );
+}
+function BreakdownTag({ children }) {
+  return /* @__PURE__ */ jsx23("span", { className: "inline-flex items-center whitespace-nowrap rounded-full bg-subtle px-2 py-0.5 text-[11px] font-medium text-text-secondary", children });
+}
+function DelayedTip({ label, children }) {
+  return /* @__PURE__ */ jsxs21("span", { className: "group/dt relative inline-flex", tabIndex: 0, "aria-label": label, children: [
+    children,
+    /* @__PURE__ */ jsx23(
+      "span",
+      {
+        role: "tooltip",
+        className: "pointer-events-none invisible absolute bottom-[calc(100%+6px)] left-1/2 z-40 w-[160px] -translate-x-1/2 rounded-control border border-border-default bg-surface px-2 py-1.5 text-center text-[11px] font-medium leading-snug text-text-secondary opacity-0 shadow-overlay transition-[opacity,visibility] delay-1000 duration-150 group-hover/dt:visible group-hover/dt:opacity-100 group-focus/dt:visible group-focus/dt:opacity-100",
+        children: label
+      }
+    )
+  ] });
+}
+var COL_CURRENT = 76;
+var COL_PREVIOUS = 76;
+var COL_YOY = 44;
+function MetricListHeader({ className }) {
+  return /* @__PURE__ */ jsxs21("div", { className: cx9("flex items-baseline gap-2 pb-2", className), children: [
+    /* @__PURE__ */ jsx23("span", { className: "flex-1" }),
+    /* @__PURE__ */ jsxs21("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
+      /* @__PURE__ */ jsx23("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_CURRENT }, children: "Current" }),
+      /* @__PURE__ */ jsx23(DelayedTip, { label: "Spend during the same time period one year ago.", children: /* @__PURE__ */ jsx23("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_PREVIOUS }, children: "Previous" }) }),
+      /* @__PURE__ */ jsx23(DelayedTip, { label: "Percent change from this time period vs. the same time one year ago.", children: /* @__PURE__ */ jsx23("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_YOY }, children: "YoY" }) })
+    ] })
+  ] });
+}
+function MetricCells({ spendN, yoy }) {
+  const prior = priorYearAmt(spendN, yoy);
+  const up = yoy !== "NEW" && yoy >= 0;
+  return /* @__PURE__ */ jsxs21("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
+    /* @__PURE__ */ jsx23("span", { className: "text-right text-[12px] font-bold tabular-nums text-text-primary", style: { width: COL_CURRENT }, children: fmtM(spendN) }),
+    /* @__PURE__ */ jsx23("span", { className: "text-right text-[12px] font-normal tabular-nums text-text-primary", style: { width: COL_PREVIOUS }, children: prior ?? "\u2014" }),
+    /* @__PURE__ */ jsx23("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ jsx23("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-[10px] font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ jsxs21("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
+      up ? "+" : "\u2212",
+      Math.abs(yoy),
+      "%"
+    ] }) })
+  ] });
+}
+function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true, viewAllHref, renderLogo }) {
+  const [showAll, setShowAll] = useState10(false);
+  const visible = showAll ? rows : rows.slice(0, defaultVisibleCount);
+  const rowPad = padded ? "px-5" : "";
+  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs21("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx23(MetricListHeader, { className: rowPad }),
+      visible.map((p) => /* @__PURE__ */ jsxs21("div", { className: cx9("flex items-center justify-between gap-3 border-t border-border-default/60 py-2.5 first:border-t-0", rowPad), children: [
+        /* @__PURE__ */ jsxs21("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+          renderLogo ? renderLogo(p) : /* @__PURE__ */ jsx23(Monogram, { name: p.brand, size: 28 }),
+          /* @__PURE__ */ jsxs21("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs21("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx23("span", { className: "text-[14px] font-semibold text-text-primary", children: p.brand }),
+              p.tags.map((t) => /* @__PURE__ */ jsx23(BreakdownTag, { children: t }, t))
+            ] }),
+            /* @__PURE__ */ jsx23("div", { className: "truncate text-[11.5px] text-text-tertiary", children: p.owner })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx23(MetricCells, { spendN: p.spendN, yoy: p.yoy })
+      ] }, p.brand))
+    ] }),
+    rows.length > defaultVisibleCount && (viewAllHref ? /* @__PURE__ */ jsx23("div", { className: cx9("border-t border-border-default py-3", rowPad), children: /* @__PURE__ */ jsx23("a", { href: viewAllHref, className: "text-[12px] font-semibold text-text-link hover:underline", children: "See all publishers" }) }) : /* @__PURE__ */ jsxs21("div", { className: cx9("flex items-center gap-2 border-t border-border-default py-3 text-[12px] text-text-tertiary", rowPad), children: [
+      /* @__PURE__ */ jsxs21("span", { children: [
+        "Showing ",
+        visible.length,
+        " of ",
+        rows.length
+      ] }),
+      !showAll ? /* @__PURE__ */ jsxs21("button", { type: "button", onClick: () => setShowAll(true), className: "font-semibold text-text-link hover:underline", children: [
+        "See all (",
+        rows.length - defaultVisibleCount,
+        " more)"
+      ] }) : /* @__PURE__ */ jsx23("button", { type: "button", onClick: () => setShowAll(false), className: "font-semibold text-text-link hover:underline", children: "Show less" })
+    ] }))
+  ] });
+}
 export {
-  InfoTip
+  AdvertiserNoResults,
+  AdvertiserQuickFilter,
+  AdvertiserSearchPrompt,
+  BarChartPlaceholder,
+  Card,
+  CheckBox,
+  DEFAULT_SEARCH_MATCH,
+  DataScopeFilter,
+  DateRangeFilter,
+  InfoTip,
+  LineChartPlaceholder,
+  NO_RESULTS_BODY,
+  NO_RESULTS_TITLE,
+  NoResultsEmptyState,
+  PRIMARY_ACTION_CLASS,
+  PieChartPlaceholder,
+  PublisherBreakdownList,
+  QUIET_ACTION_CLASS,
+  SearchBar,
+  SectionRail,
+  SelectAllVisible,
+  SelectFilter,
+  SelectedSection,
+  SelectionPicker,
+  StackedColumnPlaceholder,
+  Tooltip,
+  WorkspaceSelectedCard,
+  noResultsBody
 };
 //# sourceMappingURL=index.js.map