@mediaradar/design-components 0.18.8 → 0.20.0

package/dist/index.js

@@ -583,7 +583,7 @@ function CheckBoxBox({ checked, indeterminate, disabled, className }) {
 }
 
 // src/DateRangeFilter.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useLayoutEffect, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
 import { ChevronDown as ChevronDown2, ChevronLeft, ChevronRight } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_SHORTCUTS = [
@@ -707,6 +707,7 @@ function DateRangeFilter({
   value: controlledValue,
   range: controlledRange,
   align = "left",
+  placement = "below",
   onChange,
   onRangeChange,
   showDates = false,
@@ -791,6 +792,13 @@ function DateRangeFilter({
     onRangeChange?.(s, e);
     setOpen(false);
   };
+  const popRef = useRef3(null);
+  const [flipBelow, setFlipBelow] = useState3(false);
+  useLayoutEffect(() => {
+    if (!open || placement !== "above" || !ref.current || !popRef.current) return;
+    setFlipBelow(ref.current.getBoundingClientRect().top < popRef.current.offsetHeight + 16);
+  }, [open, placement]);
+  const above = placement === "above" && !flipBelow;
   return /* @__PURE__ */ jsxs6("div", { className: "relative", ref, children: [
     /* @__PURE__ */ jsxs6(
       "button",
@@ -814,7 +822,8 @@ function DateRangeFilter({
       "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"}`,
+        ref: popRef,
+        className: `absolute z-30 flex overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay ${placement === "right" ? "bottom-0 left-full ml-2" : `${above ? "bottom-full mb-2" : "top-[calc(100%+8px)]"} ${align === "right" ? "right-0" : "left-0"}`}`,
         role: "dialog",
         "aria-label": "Select date range",
         children: [
@@ -1375,7 +1384,7 @@ function Option({
 }
 
 // src/SelectFilter.tsx
-import { useCallback as useCallback2, useEffect as useEffect6, useLayoutEffect, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, 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 jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -1405,7 +1414,7 @@ function SelectFilter({
     const r = ref.current.getBoundingClientRect();
     setPos({ top: r.bottom + 8, left: align === "right" ? r.right - r.width : r.left, width: r.width });
   }, [align]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!open) return;
     reposition();
   }, [open, reposition]);
@@ -1878,7 +1887,7 @@ function StackedColumnPlaceholder({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect8, useId as useId3, useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState8 } from "react";
+import { useEffect as useEffect8, useId as useId3, useLayoutEffect as useLayoutEffect3, useRef as useRef9, useState as useState8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function cx6(...parts) {
@@ -2044,7 +2053,7 @@ function Tooltip({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [anchor]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!anchor) return;
     const el = boxRef.current;
     if (!el) return;
@@ -2185,7 +2194,7 @@ function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
 }
 
 // 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 { useCallback as useCallback3, useEffect as useEffect9, useLayoutEffect as useLayoutEffect4, 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 jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -2590,7 +2599,7 @@ function FilterDropdown({
   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(() => {
+  useLayoutEffect4(() => {
     if (!open || !btnRef.current) return;
     const r = btnRef.current.getBoundingClientRect();
     setPos({ top: r.bottom + 6, left: r.left });
@@ -3261,10 +3270,83 @@ function WorkspaceAvatar({ name, size = "md" }) {
   );
 }
 
+// src/Toast.tsx
+import { useEffect as useEffect11, useRef as useRef12, useState as useState12 } from "react";
+import { createPortal as createPortal6 } from "react-dom";
+import { AlertTriangle, Check as Check7 } from "lucide-react";
+import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
+var ICON = {
+  neutral: null,
+  success: /* @__PURE__ */ jsx34(Check7, { size: 15, className: "shrink-0", "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx34(AlertTriangle, { size: 15, className: "shrink-0", "aria-hidden": "true" })
+};
+function Toast({ message, action, onClose, tone = "neutral", duration, className }) {
+  const ms = duration ?? (action ? 1e4 : 5e3);
+  const [paused, setPaused] = useState12(false);
+  const closed = useRef12(false);
+  useEffect11(() => {
+    if (paused) return;
+    const t = window.setTimeout(() => {
+      if (closed.current) return;
+      closed.current = true;
+      onClose();
+    }, ms);
+    return () => window.clearTimeout(t);
+  }, [message, ms, paused]);
+  return createPortal6(
+    /* @__PURE__ */ jsxs31(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        onMouseEnter: () => setPaused(true),
+        onMouseLeave: () => setPaused(false),
+        onFocusCapture: () => setPaused(true),
+        onBlurCapture: () => setPaused(false),
+        className: cn(
+          "fixed bottom-6 left-1/2 z-toast flex max-w-[92vw] -translate-x-1/2 items-center gap-2.5",
+          "rounded-control bg-inverseSurface py-2.5 pl-4 pr-2.5 text-sm font-medium text-text-inverse shadow-overlay",
+          className
+        ),
+        children: [
+          ICON[tone] && // The inverse pair, not text-success / text-warning: those are tuned
+          // for the page, and on the toast's flipped surface amber drops to 2:1.
+          /* @__PURE__ */ jsx34(
+            "span",
+            {
+              className: cn(
+                "flex",
+                tone === "success" ? "text-text-inverseSuccess" : "text-text-inverseWarning"
+              ),
+              children: ICON[tone]
+            }
+          ),
+          /* @__PURE__ */ jsx34("span", { className: "min-w-0", children: message }),
+          action && /* @__PURE__ */ jsx34(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                if (!closed.current) {
+                  closed.current = true;
+                  action.onClick();
+                }
+              },
+              className: "shrink-0 rounded-control px-2.5 py-1 text-sm font-semibold text-text-inverse underline-offset-2 transition-colors duration-(--mr-motion-duration-interactive) ease-interactive hover:bg-text-inverse/15 hover:underline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+              children: action.label
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
 // src/Tag.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function Tag({ children, className }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "span",
     {
       className: cn(
@@ -3284,7 +3366,7 @@ function Tag({ children, className }) {
 
 // src/TablePagination.tsx
 import { ChevronDown as ChevronDown9, ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight5 } from "lucide-react";
-import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
 function TablePagination({
   page,
   perPage,
@@ -3305,10 +3387,10 @@ function TablePagination({
     btn,
     "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"
   );
-  return /* @__PURE__ */ jsxs31("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), "data-testid": testIdPrefix, children: [
-    /* @__PURE__ */ jsxs31("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
-      /* @__PURE__ */ jsxs31("span", { className: "relative", children: [
-        /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs32("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), "data-testid": testIdPrefix, children: [
+    /* @__PURE__ */ jsxs32("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
+      /* @__PURE__ */ jsxs32("span", { className: "relative", children: [
+        /* @__PURE__ */ jsx36(
           "select",
           {
             value: perPage,
@@ -3316,10 +3398,10 @@ function TablePagination({
             "aria-label": "Items per page",
             "data-testid": testIdPrefix && `${testIdPrefix}-per-page`,
             className: "appearance-none rounded-control border border-border-strong bg-input py-1 pl-2.5 pr-7 text-[13px] font-medium text-text-primary focus:outline focus:outline-2 focus:outline-border-focus",
-            children: perPageOptions.map((n) => /* @__PURE__ */ jsx35("option", { value: n, children: n }, n))
+            children: perPageOptions.map((n) => /* @__PURE__ */ jsx36("option", { value: n, children: n }, n))
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           ChevronDown9,
           {
             size: 13,
@@ -3330,8 +3412,8 @@ function TablePagination({
       ] }),
       "items per page"
     ] }),
-    /* @__PURE__ */ jsxs31("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
-      /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsxs32("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
+      /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
@@ -3340,10 +3422,10 @@ function TablePagination({
           "aria-label": "First page",
           "data-testid": testIdPrefix && `${testIdPrefix}-first`,
           className: stepBtn,
-          children: /* @__PURE__ */ jsx35(ChevronFirst, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx36(ChevronFirst, { size: 16, "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
@@ -3352,11 +3434,11 @@ function TablePagination({
           "aria-label": "Previous page",
           "data-testid": testIdPrefix && `${testIdPrefix}-prev`,
           className: stepBtn,
-          children: /* @__PURE__ */ jsx35(ChevronLeft4, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx36(ChevronLeft4, { size: 16, "aria-hidden": "true" })
         }
       ),
       pageWindow(current, totalPages).map(
-        (p) => typeof p === "string" ? /* @__PURE__ */ jsx35("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ jsx35(
+        (p) => typeof p === "string" ? /* @__PURE__ */ jsx36("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ jsx36(
           "button",
           {
             type: "button",
@@ -3372,7 +3454,7 @@ function TablePagination({
           p
         )
       ),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
@@ -3381,10 +3463,10 @@ function TablePagination({
           "aria-label": "Next page",
           "data-testid": testIdPrefix && `${testIdPrefix}-next`,
           className: stepBtn,
-          children: /* @__PURE__ */ jsx35(ChevronRight5, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx36(ChevronRight5, { size: 16, "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
@@ -3393,11 +3475,11 @@ function TablePagination({
           "aria-label": "Last page",
           "data-testid": testIdPrefix && `${testIdPrefix}-last`,
           className: stepBtn,
-          children: /* @__PURE__ */ jsx35(ChevronLast, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx36(ChevronLast, { size: 16, "aria-hidden": "true" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs31("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
+    /* @__PURE__ */ jsxs32("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
       rangeStart.toLocaleString(),
       " \u2013 ",
       rangeEnd.toLocaleString(),
@@ -3410,9 +3492,9 @@ function TablePagination({
 }
 
 // src/DateRangePicker.tsx
-import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef12, useState as useState12 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo4, useRef as useRef13, useState as useState13 } from "react";
 import { ChevronDown as ChevronDown10 } from "lucide-react";
-import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 var QUARTER_ABBR = ["Q1", "Q2", "Q3", "Q4"];
 var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
@@ -3448,7 +3530,7 @@ function spanLabel(label, today) {
   return `${fmtDate(s)} \u2013 ${fmtDate(e)}`;
 }
 function MiniSelect({ value, onChange, options }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "select",
     {
       value: String(value),
@@ -3457,7 +3539,7 @@ function MiniSelect({ value, onChange, options }) {
         if (opt) onChange(opt.value);
       },
       className: "rounded-control border border-border-strong bg-input px-1.5 py-1 text-[12px] text-text-primary outline-hidden focus:border-border-focus",
-      children: options.map((o) => /* @__PURE__ */ jsx36("option", { value: String(o.value), children: o.label }, String(o.value)))
+      children: options.map((o) => /* @__PURE__ */ jsx37("option", { value: String(o.value), children: o.label }, String(o.value)))
     }
   );
 }
@@ -3474,17 +3556,17 @@ function DateRangePicker({
 }) {
   const end = useMemo4(() => today ?? startOfToday(), [today]);
   const yearOptions = years ?? [3, 2, 1, 0].map((n) => end.getFullYear() - n);
-  const [open, setOpen] = useState12(false);
-  const [value, setValue] = useState12(defaultValue);
-  const [draft, setDraft] = useState12(defaultValue);
-  const ref = useRef12(null);
-  const [fromMo, setFromMo] = useState12(end.getMonth());
-  const [fromYr, setFromYr] = useState12(end.getFullYear() - 1);
-  const [toMo, setToMo] = useState12(end.getMonth());
-  const [toYr, setToYr] = useState12(end.getFullYear());
-  const [fromQ, setFromQ] = useState12(Math.floor(end.getMonth() / 3));
-  const [toQ, setToQ] = useState12(Math.floor(end.getMonth() / 3));
-  useEffect11(() => {
+  const [open, setOpen] = useState13(false);
+  const [value, setValue] = useState13(defaultValue);
+  const [draft, setDraft] = useState13(defaultValue);
+  const ref = useRef13(null);
+  const [fromMo, setFromMo] = useState13(end.getMonth());
+  const [fromYr, setFromYr] = useState13(end.getFullYear() - 1);
+  const [toMo, setToMo] = useState13(end.getMonth());
+  const [toYr, setToYr] = useState13(end.getFullYear());
+  const [fromQ, setFromQ] = useState13(Math.floor(end.getMonth() / 3));
+  const [toQ, setToQ] = useState13(Math.floor(end.getMonth() / 3));
+  useEffect12(() => {
     const [s, e] = resolveRange(value, end);
     onRangeChange?.(s, e);
   }, [value]);
@@ -3492,7 +3574,7 @@ function DateRangePicker({
     if (!open) setDraft(value);
     setOpen((o) => !o);
   };
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open) return;
     const onDown = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -3518,8 +3600,8 @@ function DateRangePicker({
     if (showFooter) setDraft(label);
     else commit(label);
   };
-  return /* @__PURE__ */ jsxs32("div", { className: "relative", ref, children: [
-    /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ jsxs33(
       "button",
       {
         type: "button",
@@ -3528,16 +3610,16 @@ function DateRangePicker({
         "aria-haspopup": "listbox",
         className: chipTriggerClass(),
         children: [
-          /* @__PURE__ */ jsxs32("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ jsx36("span", { className: "text-control-caption text-text-tertiary", children: spanLabel(value, end) }),
-            /* @__PURE__ */ jsx36("span", { className: "text-[12px] font-medium text-text-primary", children: value })
+          /* @__PURE__ */ jsxs33("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ jsx37("span", { className: "text-control-caption text-text-tertiary", children: spanLabel(value, end) }),
+            /* @__PURE__ */ jsx37("span", { className: "text-[12px] font-medium text-text-primary", children: value })
           ] }),
-          /* @__PURE__ */ jsx36(ChevronDown10, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
+          /* @__PURE__ */ jsx37(ChevronDown10, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs32("div", { className: cn("absolute top-[calc(100%+8px)] z-30 w-[280px] overflow-hidden rounded-card border border-border-default bg-surface py-1 shadow-overlay", align === "right" ? "right-0" : "left-0"), children: [
-      presets.map((p) => /* @__PURE__ */ jsx36(
+    open && /* @__PURE__ */ jsxs33("div", { className: cn("absolute top-[calc(100%+8px)] z-30 w-[280px] overflow-hidden rounded-card border border-border-default bg-surface py-1 shadow-overlay", align === "right" ? "right-0" : "left-0"), children: [
+      presets.map((p) => /* @__PURE__ */ jsx37(
         "button",
         {
           type: "button",
@@ -3547,26 +3629,26 @@ function DateRangePicker({
         },
         p
       )),
-      /* @__PURE__ */ jsxs32("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
-        /* @__PURE__ */ jsx36("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
-        /* @__PURE__ */ jsxs32("div", { className: "mt-2 flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs32("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
+        /* @__PURE__ */ jsx37("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
+        /* @__PURE__ */ jsxs33("div", { className: "mt-2 flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs33("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
             "From",
-            /* @__PURE__ */ jsxs32("span", { className: "flex gap-1", children: [
-              granularity === "month" && /* @__PURE__ */ jsx36(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
-              granularity === "quarter" && /* @__PURE__ */ jsx36(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
-              /* @__PURE__ */ jsx36(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
+            /* @__PURE__ */ jsxs33("span", { className: "flex gap-1", children: [
+              granularity === "month" && /* @__PURE__ */ jsx37(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              granularity === "quarter" && /* @__PURE__ */ jsx37(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
+              /* @__PURE__ */ jsx37(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs32("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
+          /* @__PURE__ */ jsxs33("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
             "To",
-            /* @__PURE__ */ jsxs32("span", { className: "flex gap-1", children: [
-              granularity === "month" && /* @__PURE__ */ jsx36(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
-              granularity === "quarter" && /* @__PURE__ */ jsx36(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
-              /* @__PURE__ */ jsx36(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
+            /* @__PURE__ */ jsxs33("span", { className: "flex gap-1", children: [
+              granularity === "month" && /* @__PURE__ */ jsx37(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              granularity === "quarter" && /* @__PURE__ */ jsx37(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
+              /* @__PURE__ */ jsx37(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             "button",
             {
               type: "button",
@@ -3578,15 +3660,15 @@ function DateRangePicker({
           )
         ] })
       ] }),
-      showFooter && /* @__PURE__ */ jsx36(FilterDropdownFooter, { onApply: () => commit(draft) })
+      showFooter && /* @__PURE__ */ jsx37(FilterDropdownFooter, { onApply: () => commit(draft) })
     ] })
   ] });
 }
 
 // src/MultiSelectFilter.tsx
-import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef13, useState as useState13 } from "react";
-import { ChevronDown as ChevronDown11, Check as Check7, Minus as Minus2, Search as Search5, X as X4 } from "lucide-react";
-import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useEffect as useEffect13, useRef as useRef14, useState as useState14 } from "react";
+import { ChevronDown as ChevronDown11, Check as Check8, Minus as Minus2, Search as Search5, X as X4 } from "lucide-react";
+import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
 function MultiSelectFilter({
   caption,
   options = [],
@@ -3610,10 +3692,10 @@ function MultiSelectFilter({
 }) {
   const groupLeaves = (g) => g.children.length ? g.children : [{ id: g.id, label: g.label }];
   const leafOptions = groups ? groups.flatMap(groupLeaves) : options;
-  const [open, setOpen] = useState13(false);
-  const [q, setQ] = useState13("");
-  const [draft, setDraft] = useState13(selected);
-  const ref = useRef13(null);
+  const [open, setOpen] = useState14(false);
+  const [q, setQ] = useState14("");
+  const [draft, setDraft] = useState14(selected);
+  const ref = useRef14(null);
   const close = useCallback4(() => {
     setOpen(false);
     setQ("");
@@ -3631,7 +3713,7 @@ function MultiSelectFilter({
     setOpen(false);
     setQ("");
   };
-  useEffect12(() => {
+  useEffect13(() => {
     if (!open) return;
     const onKey = (e) => e.key === "Escape" && close();
     const onClick = (e) => {
@@ -3677,8 +3759,8 @@ function MultiSelectFilter({
     const kids = live.filter((c) => c.label.toLowerCase().includes(ql));
     return kids.length ? { ...g, children: kids } : null;
   }).filter((g) => g !== null) : [];
-  return /* @__PURE__ */ jsxs33("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
-    /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
+    /* @__PURE__ */ jsxs34(
       "button",
       {
         type: "button",
@@ -3686,8 +3768,8 @@ function MultiSelectFilter({
         "aria-expanded": open,
         className: cn(chipTriggerClass(variant), fullWidth && "w-full justify-between"),
         children: [
-          /* @__PURE__ */ jsx37(ChipContent, { caption, value, icon }),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(ChipContent, { caption, value, icon }),
+          /* @__PURE__ */ jsx38(
             ChevronDown11,
             {
               size: 14,
@@ -3698,7 +3780,7 @@ function MultiSelectFilter({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs33(
+    open && /* @__PURE__ */ jsxs34(
       "div",
       {
         className: cn(
@@ -3709,9 +3791,9 @@ function MultiSelectFilter({
         role: "dialog",
         "aria-label": caption,
         children: [
-          searchable && /* @__PURE__ */ jsx37("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs33("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5", children: [
-            /* @__PURE__ */ jsx37(Search5, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx37(
+          searchable && /* @__PURE__ */ jsx38("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs34("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5", children: [
+            /* @__PURE__ */ jsx38(Search5, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx38(
               "input",
               {
                 type: "text",
@@ -3721,37 +3803,37 @@ function MultiSelectFilter({
                 className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
               }
             ),
-            q && /* @__PURE__ */ jsx37("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ jsx37(X4, { size: 13 }) })
+            q && /* @__PURE__ */ jsx38("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ jsx38(X4, { size: 13 }) })
           ] }) }),
-          /* @__PURE__ */ jsxs33("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
+          /* @__PURE__ */ jsxs34("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
             groups ? visibleGroups.map((g) => {
               const state = groupState(g);
-              return /* @__PURE__ */ jsxs33("div", { children: [
-                /* @__PURE__ */ jsxs33(
+              return /* @__PURE__ */ jsxs34("div", { children: [
+                /* @__PURE__ */ jsxs34(
                   "button",
                   {
                     type: "button",
                     onClick: () => toggleGroup(g),
                     className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
                     children: [
-                      /* @__PURE__ */ jsx37(TriCheck, { state }),
-                      /* @__PURE__ */ jsx37("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
-                      counts && /* @__PURE__ */ jsx37(OptionCount, { n: countFor(g.id) })
+                      /* @__PURE__ */ jsx38(TriCheck, { state }),
+                      /* @__PURE__ */ jsx38("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
+                      counts && /* @__PURE__ */ jsx38(OptionCount, { n: countFor(g.id) })
                     ]
                   }
                 ),
                 g.children.map((c) => {
                   const checked = draft.includes(c.id);
-                  return /* @__PURE__ */ jsxs33(
+                  return /* @__PURE__ */ jsxs34(
                     "button",
                     {
                       type: "button",
                       onClick: () => toggle(c.id),
                       className: "flex w-full items-center gap-2.5 rounded-control py-2 pl-9 pr-2 text-left transition-colors hover:bg-subtle",
                       children: [
-                        /* @__PURE__ */ jsx37(TriCheck, { state: checked ? "all" : "none" }),
-                        /* @__PURE__ */ jsx37("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
-                        counts && /* @__PURE__ */ jsx37(OptionCount, { n: countFor(c.id) })
+                        /* @__PURE__ */ jsx38(TriCheck, { state: checked ? "all" : "none" }),
+                        /* @__PURE__ */ jsx38("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
+                        counts && /* @__PURE__ */ jsx38(OptionCount, { n: countFor(c.id) })
                       ]
                     },
                     c.id
@@ -3760,33 +3842,33 @@ function MultiSelectFilter({
               ] }, g.id);
             }) : items.map((o) => {
               const checked = draft.includes(o.id);
-              return /* @__PURE__ */ jsxs33(
+              return /* @__PURE__ */ jsxs34(
                 "button",
                 {
                   type: "button",
                   onClick: () => toggle(o.id),
                   className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
                   children: [
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx38(
                       "span",
                       {
                         className: cn(
                           "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
                           checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
                         ),
-                        children: checked && /* @__PURE__ */ jsx37(Check7, { size: 13, strokeWidth: 3 })
+                        children: checked && /* @__PURE__ */ jsx38(Check8, { size: 13, strokeWidth: 3 })
                       }
                     ),
-                    /* @__PURE__ */ jsx37("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
-                    counts && /* @__PURE__ */ jsx37(OptionCount, { n: countFor(o.id) })
+                    /* @__PURE__ */ jsx38("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
+                    counts && /* @__PURE__ */ jsx38(OptionCount, { n: countFor(o.id) })
                   ]
                 },
                 o.id
               );
             }),
-            (groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ jsx37("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
+            (groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ jsx38("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
           ] }),
-          showFooter ? /* @__PURE__ */ jsx37(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ jsx37("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ jsxs33(
+          showFooter ? /* @__PURE__ */ jsx38(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ jsx38("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ jsxs34(
             "button",
             {
               type: "button",
@@ -3805,7 +3887,7 @@ function MultiSelectFilter({
 }
 function TriCheck({ state }) {
   const filled = state !== "none";
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "span",
     {
       className: cn(
@@ -3813,14 +3895,14 @@ function TriCheck({ state }) {
         filled ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
       ),
       children: [
-        state === "all" && /* @__PURE__ */ jsx37(Check7, { size: 13, strokeWidth: 3 }),
-        state === "some" && /* @__PURE__ */ jsx37(Minus2, { size: 13, strokeWidth: 3 })
+        state === "all" && /* @__PURE__ */ jsx38(Check8, { size: 13, strokeWidth: 3 }),
+        state === "some" && /* @__PURE__ */ jsx38(Minus2, { size: 13, strokeWidth: 3 })
       ]
     }
   );
 }
 function OptionCount({ n }) {
-  return /* @__PURE__ */ jsxs33("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
+  return /* @__PURE__ */ jsxs34("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
     "(",
     n.toLocaleString(),
     ")"
@@ -3828,7 +3910,7 @@ function OptionCount({ n }) {
 }
 
 // src/Toggle.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var SIZES2 = {
   sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
   md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
@@ -3836,7 +3918,7 @@ var SIZES2 = {
 var OFF_TRACK = "color-mix(in srgb, var(--mr-color-border-interactive) 70%, var(--mr-color-text-secondary))";
 function Toggle({ checked, onChange, label, size = "md", disabled, className, testIdPrefix }) {
   const s = SIZES2[size];
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "button",
     {
       type: "button",
@@ -3854,7 +3936,7 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
         disabled && "cursor-not-allowed opacity-50",
         className
       ),
-      children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx39(
         "span",
         {
           className: cn(
@@ -3871,20 +3953,20 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
 // src/AISpark.tsx
 import { useId as useId5 } from "react";
 import { Sparkles } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
 function AISpark({ size = 16, className }) {
   const id = useId5();
-  return /* @__PURE__ */ jsxs34(Fragment5, { children: [
-    /* @__PURE__ */ jsx39("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsx39("defs", { children: /* @__PURE__ */ jsxs34("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
-      /* @__PURE__ */ jsx39("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
-      /* @__PURE__ */ jsx39("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
+  return /* @__PURE__ */ jsxs35(Fragment5, { children: [
+    /* @__PURE__ */ jsx40("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsx40("defs", { children: /* @__PURE__ */ jsxs35("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+      /* @__PURE__ */ jsx40("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
+      /* @__PURE__ */ jsx40("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
     ] }) }) }),
-    /* @__PURE__ */ jsx39(Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
+    /* @__PURE__ */ jsx40(Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
   ] });
 }
 
 // src/Freshness.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var dotColor = {
   fresh: "bg-status-success",
   recent: "bg-status-warning",
@@ -3896,7 +3978,7 @@ var srLabel = {
   stale: "Older than a day"
 };
 function Freshness({ level }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "span",
     {
       className: cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotColor[level]),
@@ -3905,6 +3987,30 @@ function Freshness({ level }) {
     }
   );
 }
+
+// src/SectionHeading.tsx
+import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
+function SectionHeading({ title, description, actions, as: Tag2 = "h2", id, className }) {
+  return /* @__PURE__ */ jsxs36("div", { className: cn("flex flex-wrap items-end justify-between gap-x-4 gap-y-2", className), children: [
+    /* @__PURE__ */ jsxs36("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx42(Tag2, { id, className: "text-base font-semibold text-text-primary", children: title }),
+      description && /* @__PURE__ */ jsx42("p", { className: "mt-0.5 text-dense text-text-secondary", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx42("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+  ] });
+}
+
+// src/PageHeader.tsx
+import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+function PageHeader({ title, description, actions, className }) {
+  return /* @__PURE__ */ jsxs37("header", { className: cn("flex flex-wrap items-center justify-between gap-x-6 gap-y-3", className), children: [
+    /* @__PURE__ */ jsxs37("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx43("h1", { className: "text-xl font-semibold tracking-tight text-text-primary", children: title }),
+      description && /* @__PURE__ */ jsx43("p", { className: "mt-0.5 max-w-2xl text-sm text-text-secondary", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx43("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+  ] });
+}
 export {
   AISpark,
   AdvertiserNoResults,
@@ -3933,11 +4039,13 @@ export {
   NameListModal,
   NoResultsEmptyState,
   PRIMARY_ACTION_CLASS,
+  PageHeader,
   Pager,
   PieChartPlaceholder,
   PublisherBreakdownList,
   QUIET_ACTION_CLASS,
   SearchBar,
+  SectionHeading,
   SectionRail,
   SelectAllVisible,
   SelectFilter,
@@ -3947,6 +4055,7 @@ export {
   StackedColumnPlaceholder,
   TablePagination,
   Tag,
+  Toast,
   Toggle,
   Tooltip,
   WorkspaceAvatar,