@arbidocs/blocks 0.4.0 → 0.4.2

package/dist/chunk-OBLSURHV.js

@@ -0,0 +1,973 @@
+"use client";
+import { useEditorialTone, formatIndex, EditorialToneContext, BlockLink, BlockImage } from './chunk-6P6AEQJB.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useMemo, useRef, useState, useEffect } from 'react';
+import { cn } from '@arbidocs/react/ui';
+import { Check, ArrowUpRight } from 'lucide-react';
+
+function CollectionDetail({
+  items,
+  slug,
+  getSlug,
+  renderList,
+  renderDetail,
+  renderNotFound
+}) {
+  if (!slug) return /* @__PURE__ */ jsx(Fragment, { children: renderList(items) });
+  const index = items.findIndex((item) => getSlug(item) === slug);
+  if (index === -1) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderNotFound ? renderNotFound(slug) : /* @__PURE__ */ jsx("p", { role: "status", "data-slot": "collection-not-found", children: "Not found" }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: renderDetail(items[index], { previous: items[index - 1], next: items[index + 1] }) });
+}
+var W = 440;
+var H = 160;
+var PAD = { top: 8, right: 8, bottom: 22, left: 40 };
+var color = (i) => `hsl(var(--chart-${i % 5 + 1}))`;
+function truncateLabel(label, max) {
+  const chars = Array.from(label);
+  return chars.length <= max ? label : `${chars.slice(0, Math.max(1, max - 1)).join("").trimEnd()}\u2026`;
+}
+var defaultFormat = (v) => v >= 1e3 ? `${Math.round(v / 100) / 10}k` : String(v);
+function polar(cx, cy, r, angle) {
+  return [cx + r * Math.sin(angle), cy - r * Math.cos(angle)];
+}
+function Chart({
+  type,
+  labels,
+  series,
+  ariaLabel,
+  formatValue = defaultFormat,
+  hideLegend = false,
+  emptyLabel = "No data",
+  maxLabelChars,
+  className,
+  testId
+}) {
+  const max = useMemo(() => Math.max(...series.flatMap((s) => s.values), 1), [series]);
+  if (!labels.length || !series.length) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyLabel });
+  }
+  const legendItems = type === "pie" ? labels.map((label, i) => ({ label, color: color(i) })) : series.map((s, i) => ({ label: s.label ?? s.key, color: color(i) }));
+  let body;
+  if (type === "pie") {
+    const values = series[0].values;
+    const total = values.reduce((a, b) => a + Math.max(b, 0), 0);
+    const cx = 80;
+    const cy = 80;
+    const r = 72;
+    let angle = 0;
+    body = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 160 160", className: "mx-auto h-40 w-40", role: "img", "aria-label": ariaLabel, children: total > 0 && values.map((v, i) => {
+      const sweep = Math.max(v, 0) / total * Math.PI * 2;
+      if (sweep === 0) return null;
+      const title = `${labels[i]}: ${formatValue(v)}`;
+      if (sweep >= Math.PI * 2 - 1e-6) {
+        return /* @__PURE__ */ jsx("circle", { cx, cy, r, fill: color(i), children: /* @__PURE__ */ jsx("title", { children: title }) }, i);
+      }
+      const [x1, y1] = polar(cx, cy, r, angle);
+      const [x2, y2] = polar(cx, cy, r, angle + sweep);
+      const d = `M${cx},${cy} L${x1},${y1} A${r},${r} 0 ${sweep > Math.PI ? 1 : 0} 1 ${x2},${y2} Z`;
+      angle += sweep;
+      return /* @__PURE__ */ jsx("path", { d, fill: color(i), children: /* @__PURE__ */ jsx("title", { children: title }) }, i);
+    }) });
+  } else {
+    const plotW = W - PAD.left - PAD.right;
+    const plotH = H - PAD.top - PAD.bottom;
+    const y = (v) => PAD.top + plotH - v / max * plotH;
+    const band = plotW / labels.length;
+    const xCenter = (i) => PAD.left + band * i + band / 2;
+    const maxChars = maxLabelChars ?? Math.max(3, Math.floor((band - 4) / 5));
+    body = /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${W} ${H}`, className: "h-auto w-full", role: "img", "aria-label": ariaLabel, children: [
+      [0, max / 2, max].map((v) => /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: PAD.left,
+            x2: W - PAD.right,
+            y1: y(v),
+            y2: y(v),
+            className: "stroke-border",
+            strokeDasharray: "2,2"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: PAD.left - 4,
+            y: y(v) + 3,
+            textAnchor: "end",
+            className: "fill-muted-foreground text-[9px]",
+            children: formatValue(v)
+          }
+        )
+      ] }, v)),
+      labels.map((label, i) => /* @__PURE__ */ jsxs(
+        "text",
+        {
+          x: xCenter(i),
+          y: H - 6,
+          textAnchor: "middle",
+          className: "fill-muted-foreground text-[9px]",
+          children: [
+            truncateLabel(label, maxChars),
+            Array.from(label).length > maxChars && /* @__PURE__ */ jsx("title", { children: label })
+          ]
+        },
+        i
+      )),
+      type === "bar" && series.map((s, si) => {
+        const barW = band * 0.7 / series.length;
+        return s.values.map((v, i) => /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: xCenter(i) - band * 0.7 / 2 + si * barW,
+            y: y(v),
+            width: barW,
+            height: PAD.top + plotH - y(v),
+            fill: color(si),
+            rx: 1.5,
+            children: /* @__PURE__ */ jsx("title", { children: `${labels[i]} ${s.label ?? s.key}: ${formatValue(v)}` })
+          },
+          `${s.key}-${i}`
+        ));
+      }),
+      type === "line" && series.map((s, si) => /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            fill: "none",
+            stroke: color(si),
+            strokeWidth: 2,
+            points: s.values.map((v, i) => `${xCenter(i)},${y(v)}`).join(" ")
+          }
+        ),
+        s.values.map((v, i) => /* @__PURE__ */ jsx("circle", { cx: xCenter(i), cy: y(v), r: 2.5, fill: color(si), children: /* @__PURE__ */ jsx("title", { children: `${labels[i]} ${s.label ?? s.key}: ${formatValue(v)}` }) }, i))
+      ] }, s.key))
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: cn("flex flex-col gap-2", className),
+      "data-slot": "chart",
+      "data-type": type,
+      "data-testid": testId,
+      children: [
+        body,
+        !hideLegend && /* @__PURE__ */ jsx("figcaption", { className: "flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs text-muted-foreground", children: legendItems.map((item) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "inline-block size-2 rounded-full",
+              style: { background: item.color }
+            }
+          ),
+          item.label
+        ] }, item.label)) })
+      ]
+    }
+  );
+}
+function Eyebrow({ children, index, rule = false, tone, className, testId }) {
+  const t = useEditorialTone(tone);
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      className: cn(
+        "flex items-center gap-3 text-xs font-semibold uppercase tracking-wider",
+        t.subtle,
+        className
+      ),
+      "data-slot": "eyebrow",
+      "data-testid": testId,
+      children: [
+        rule && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-px w-8 shrink-0 bg-primary" }),
+        index !== void 0 && /* @__PURE__ */ jsx("span", { className: cn("tabular-nums", t.accent), children: formatIndex(index) }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+}
+function EditorialHeading({
+  eyebrow,
+  index,
+  title,
+  lead,
+  level = 2,
+  align = "start",
+  tone,
+  className,
+  testId
+}) {
+  const t = useEditorialTone(tone);
+  const Heading = `h${level}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("max-w-3xl", align === "center" && "mx-auto text-center", className),
+      "data-slot": "editorial-heading",
+      "data-testid": testId,
+      children: [
+        (eyebrow || index !== void 0) && /* @__PURE__ */ jsx(
+          Eyebrow,
+          {
+            index,
+            tone,
+            className: cn("mb-4", align === "center" && "justify-center"),
+            children: eyebrow
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Heading,
+          {
+            className: cn(
+              "font-display text-3xl font-semibold tracking-tight text-balance sm:text-4xl",
+              t.text
+            ),
+            children: title
+          }
+        ),
+        lead && /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg leading-relaxed", t.muted), children: lead })
+      ]
+    }
+  );
+}
+var SURFACE_CLASS = {
+  plain: "bg-background text-foreground",
+  muted: "bg-muted text-foreground",
+  inverse: "bg-foreground text-background"
+};
+var SURFACE_TONE = {
+  plain: "default",
+  muted: "default",
+  inverse: "inverse"
+};
+function renderTitle(title, emphasis) {
+  if (typeof title !== "string" || !emphasis || !title.includes(emphasis)) return title;
+  const parts = title.split(emphasis);
+  return parts.map((part, i) => /* @__PURE__ */ jsxs("span", { children: [
+    part,
+    i < parts.length - 1 && /* @__PURE__ */ jsx("em", { className: "italic text-primary", children: emphasis })
+  ] }, i));
+}
+function EditorialHero({
+  eyebrow,
+  eyebrowRule = false,
+  title,
+  emphasis,
+  lede,
+  actions,
+  footer,
+  aside,
+  backdrop,
+  align = "start",
+  size = "page",
+  surface = "plain",
+  className,
+  testId,
+  testIds
+}) {
+  const tone = SURFACE_TONE[surface];
+  const t = useEditorialTone(tone);
+  const centered = align === "center" && !aside;
+  const ids = {
+    root: testIds?.root ?? testId,
+    eyebrow: testIds?.eyebrow ?? (testId ? `${testId}-eyebrow` : void 0),
+    title: testIds?.title ?? (testId ? `${testId}-title` : void 0),
+    lede: testIds?.lede ?? (testId ? `${testId}-lede` : void 0),
+    actions: testIds?.actions ?? (testId ? `${testId}-actions` : void 0),
+    aside: testIds?.aside ?? (testId ? `${testId}-aside` : void 0)
+  };
+  return /* @__PURE__ */ jsx(EditorialToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn("relative isolate overflow-hidden", SURFACE_CLASS[surface], className),
+      "data-slot": "editorial-hero",
+      "data-size": size,
+      "data-testid": ids.root,
+      children: [
+        backdrop && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 -z-10", children: backdrop }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto max-w-7xl px-5 lg:px-8",
+              size === "cover" ? "py-16 lg:py-28" : "py-14 lg:py-24",
+              aside && "grid items-center gap-12 lg:grid-cols-[1.02fr_0.98fr] lg:gap-14"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("max-w-3xl", centered && "mx-auto text-center"), children: [
+                eyebrow && /* @__PURE__ */ jsx(
+                  Eyebrow,
+                  {
+                    rule: eyebrowRule,
+                    tone,
+                    className: cn("mb-6", centered && "justify-center"),
+                    testId: ids.eyebrow,
+                    children: eyebrow
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "font-display font-semibold tracking-tight text-balance",
+                      size === "cover" ? "text-[2.6rem] leading-[1.03] sm:text-6xl lg:text-[4.4rem]" : "text-4xl leading-[1.05] sm:text-5xl",
+                      t.text
+                    ),
+                    "data-testid": ids.title,
+                    children: renderTitle(title, emphasis)
+                  }
+                ),
+                lede && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mt-6 max-w-2xl text-lg leading-relaxed",
+                      centered && "mx-auto",
+                      t.muted
+                    ),
+                    "data-testid": ids.lede,
+                    children: lede
+                  }
+                ),
+                actions && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mt-8 flex flex-col gap-3 sm:flex-row",
+                      centered && "sm:justify-center"
+                    ),
+                    "data-testid": ids.actions,
+                    children: actions
+                  }
+                ),
+                footer && /* @__PURE__ */ jsx("div", { className: cn("mt-8", centered && "flex justify-center"), children: footer })
+              ] }),
+              aside && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "relative min-w-0",
+                  "data-slot": "editorial-hero-aside",
+                  "data-testid": ids.aside,
+                  children: aside
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function EditorialSection({
+  id,
+  eyebrow,
+  index,
+  title,
+  lead,
+  action,
+  layout = "stacked",
+  surface = "plain",
+  bordered = false,
+  spacing = "lg",
+  backdrop,
+  "aria-label": ariaLabel,
+  children,
+  className,
+  testId
+}) {
+  const tone = SURFACE_TONE[surface];
+  const t = useEditorialTone(tone);
+  const hasHeading = Boolean(title || eyebrow || index !== void 0);
+  const heading = hasHeading && title ? /* @__PURE__ */ jsx(EditorialHeading, { eyebrow, index, title, lead, tone }) : null;
+  const split = layout !== "stacked";
+  return /* @__PURE__ */ jsx(EditorialToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id,
+      "aria-label": title ? void 0 : ariaLabel,
+      className: cn(
+        "relative isolate overflow-hidden scroll-mt-24",
+        SURFACE_CLASS[surface],
+        bordered && cn("border-y", t.hairline),
+        className
+      ),
+      "data-slot": "editorial-section",
+      "data-testid": testId,
+      children: [
+        backdrop && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 -z-10", children: backdrop }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto max-w-7xl px-5 lg:px-8",
+              spacing === "lg" ? "py-16 lg:py-24" : "py-12 lg:py-16",
+              split && cn(
+                "grid gap-10 lg:gap-16",
+                layout === "split-wide" ? "lg:grid-cols-[1fr_1.4fr]" : "lg:grid-cols-2"
+              )
+            ),
+            children: split ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              heading && /* @__PURE__ */ jsx("div", { children: heading }),
+              /* @__PURE__ */ jsx("div", { className: "min-w-0", children })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              heading && /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between gap-6 sm:flex-row sm:items-end", children: [
+                heading,
+                action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+              ] }),
+              children && /* @__PURE__ */ jsx("div", { className: cn(heading && "mt-12 lg:mt-14"), children })
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
+}
+function EditorialProse({
+  paragraphs,
+  columns = 1,
+  size = "base",
+  className,
+  testId
+}) {
+  const t = useEditorialTone();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        size === "lg" ? "text-lg" : "text-base",
+        "leading-relaxed",
+        t.muted,
+        columns === 2 ? "gap-10 md:columns-2" : "max-w-prose",
+        className
+      ),
+      "data-slot": "editorial-prose",
+      "data-testid": testId,
+      children: paragraphs.map((p, i) => /* @__PURE__ */ jsx("p", { className: cn(columns === 2 ? "mb-5 break-inside-avoid" : "mt-5 first:mt-0"), children: p }, i))
+    }
+  );
+}
+function DefinitionList({
+  items,
+  layout = "rows",
+  marker = "dot",
+  className,
+  testId
+}) {
+  const t = useEditorialTone();
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      className: cn(layout === "rows" ? "space-y-3" : "divide-y", t.hairline, className),
+      "data-slot": "definition-list",
+      "data-layout": layout,
+      "data-testid": testId,
+      children: items.map(
+        (item, i) => layout === "rows" ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex gap-4 rounded-sm border p-5 transition-colors",
+              t.panel,
+              t.panelHover
+            ),
+            "data-testid": item.testId ?? (testId ? `${testId}-item-${i}` : void 0),
+            children: [
+              item.icon ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex size-9 shrink-0 items-center justify-center rounded-sm border",
+                    t.tile
+                  ),
+                  "aria-hidden": "true",
+                  children: item.icon
+                }
+              ) : marker === "dot" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mt-2 size-2 shrink-0 rounded-full bg-primary" }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("dt", { className: "font-medium", children: item.term }),
+                /* @__PURE__ */ jsx("dd", { className: cn("mt-0.5 text-sm", t.muted), children: item.description })
+              ] })
+            ]
+          },
+          i
+        ) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "grid gap-1 py-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] sm:gap-8",
+            "data-testid": item.testId ?? (testId ? `${testId}-item-${i}` : void 0),
+            children: [
+              /* @__PURE__ */ jsx("dt", { className: "font-medium", children: item.term }),
+              /* @__PURE__ */ jsx("dd", { className: cn("text-sm leading-relaxed", t.muted), children: item.description })
+            ]
+          },
+          i
+        )
+      )
+    }
+  );
+}
+function CheckList({ items, columns = 1, icon, className, testId }) {
+  const t = useEditorialTone();
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn(columns === 2 ? "grid gap-4 sm:grid-cols-2" : "space-y-3", className),
+      "data-slot": "check-list",
+      "data-testid": testId,
+      children: items.map((item, i) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: cn("flex items-start gap-3 text-sm leading-relaxed", t.muted),
+          "data-testid": testId ? `${testId}-item-${i}` : void 0,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border",
+                  t.tile
+                ),
+                children: icon ?? /* @__PURE__ */ jsx(Check, { className: "size-3" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: item })
+          ]
+        },
+        i
+      ))
+    }
+  );
+}
+function TagList({ items, label, className, testId }) {
+  const t = useEditorialTone();
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "aria-label": label,
+      className: cn("flex flex-wrap gap-1.5", className),
+      "data-slot": "tag-list",
+      "data-testid": testId,
+      children: items.map((tag) => /* @__PURE__ */ jsx("li", { className: cn("rounded-sm border px-2 py-0.5 text-[11px]", t.chip), children: tag }, tag))
+    }
+  );
+}
+function Reveal({ children, delay = 0, className, testId }) {
+  const ref = useRef(null);
+  const [state, setState] = useState("idle");
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    setState("pending");
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          setState("shown");
+          io.disconnect();
+        }
+      },
+      { rootMargin: "0px 0px -90px 0px" }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "reveal",
+      "data-reveal": state === "idle" ? void 0 : state,
+      style: delay ? { "--reveal-delay": `${delay}ms` } : void 0,
+      className: cn(className),
+      "data-testid": testId,
+      children
+    }
+  );
+}
+var COLS = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4"
+};
+function PanelGrid({
+  items,
+  columns = 3,
+  variant = "cards",
+  numbered = false,
+  reveal = false,
+  linkComponent,
+  headingLevel = 3,
+  tone,
+  className,
+  testId
+}) {
+  const t = useEditorialTone(tone);
+  const Heading = `h${headingLevel}`;
+  const joined = variant === "joined";
+  return /* @__PURE__ */ jsx(EditorialToneContext.Provider, { value: t.tone, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn(
+        "grid",
+        joined ? cn("gap-px overflow-hidden rounded-sm border", t.hairline) : "gap-4",
+        joined && (t.tone === "inverse" ? "bg-background/15" : "bg-border"),
+        COLS[columns] ?? COLS[3],
+        className
+      ),
+      "data-slot": "panel-grid",
+      "data-variant": variant,
+      "data-testid": testId,
+      children: items.map((item, i) => {
+        const number = item.index ?? (numbered ? i + 1 : void 0);
+        const inner = /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "group flex h-full flex-col p-6 transition-colors duration-300",
+              joined ? cn(
+                t.tone === "inverse" ? "bg-foreground" : "bg-background",
+                item.href && "hover:bg-muted/40"
+              ) : cn("rounded-sm border", t.panel, item.href && t.panelHover)
+            ),
+            "data-testid": item.testId ?? (testId ? `${testId}-item-${i}` : void 0),
+            children: [
+              (item.icon || number !== void 0 || item.href) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+                item.icon ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: cn(
+                      "flex size-11 items-center justify-center rounded-sm border",
+                      t.tile
+                    ),
+                    children: item.icon
+                  }
+                ) : /* @__PURE__ */ jsx("span", {}),
+                number !== void 0 ? /* @__PURE__ */ jsx("span", { className: cn("font-display text-sm tabular-nums", t.subtle), children: formatIndex(number) }) : item.href && /* @__PURE__ */ jsx(
+                  ArrowUpRight,
+                  {
+                    "aria-hidden": "true",
+                    className: cn(
+                      "size-4 transition-colors group-hover:text-primary",
+                      t.subtle
+                    )
+                  }
+                )
+              ] }),
+              item.kicker && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-xs font-semibold uppercase tracking-wider",
+                    item.icon || number !== void 0 ? "mt-5" : "",
+                    t.accent
+                  ),
+                  children: item.kicker
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Heading,
+                {
+                  className: cn(
+                    "font-display text-lg font-semibold leading-snug",
+                    item.icon || number !== void 0 || item.kicker ? "mt-4" : "",
+                    t.text
+                  ),
+                  children: item.title
+                }
+              ),
+              item.body && /* @__PURE__ */ jsx("div", { className: cn("mt-2 text-sm leading-relaxed", t.muted), children: item.body }),
+              item.points && item.points.length > 0 && /* @__PURE__ */ jsx(
+                CheckList,
+                {
+                  items: item.points,
+                  className: cn("mt-4 space-y-2 border-t pt-4", t.hairline)
+                }
+              ),
+              item.tags && item.tags.length > 0 && /* @__PURE__ */ jsx(TagList, { items: item.tags, className: "mt-auto pt-5" }),
+              item.footer && /* @__PURE__ */ jsx("div", { className: cn("mt-auto pt-5 text-xs", t.subtle), children: item.footer })
+            ]
+          }
+        );
+        const cell = /* @__PURE__ */ jsx(BlockLink, { href: item.href, linkComponent, className: "block h-full", children: inner });
+        return /* @__PURE__ */ jsx("li", { className: "min-w-0", children: reveal ? /* @__PURE__ */ jsx(Reveal, { delay: i * 90, className: "h-full", children: cell }) : cell }, i);
+      })
+    }
+  ) });
+}
+function PullQuote({
+  quote,
+  attribution,
+  cite,
+  align = "start",
+  size = "md",
+  className,
+  testId
+}) {
+  const t = useEditorialTone();
+  const centered = align === "center";
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: cn(
+        "max-w-3xl",
+        centered ? "mx-auto text-center" : "border-l-2 border-primary pl-6 lg:pl-8",
+        className
+      ),
+      "data-slot": "pull-quote",
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsx(
+          "blockquote",
+          {
+            cite,
+            className: cn(
+              "font-display font-medium leading-snug text-balance",
+              size === "lg" ? "text-3xl sm:text-4xl" : "text-2xl sm:text-3xl",
+              t.text
+            ),
+            children: /* @__PURE__ */ jsx("p", { children: quote })
+          }
+        ),
+        attribution && /* @__PURE__ */ jsxs("figcaption", { className: cn("mt-5 text-sm", t.muted), children: [
+          /* @__PURE__ */ jsx("span", { className: cn("font-semibold", t.text), children: attribution.name }),
+          attribution.role && /* @__PURE__ */ jsxs("span", { children: [
+            ", ",
+            attribution.role
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var COLS2 = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-2 lg:grid-cols-3"
+};
+function MetaLine({ meta, className }) {
+  if (!meta || meta.length === 0) return null;
+  return /* @__PURE__ */ jsx("p", { className, children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { children: [
+    i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+    m
+  ] }, i)) });
+}
+function ArticleList({
+  items,
+  layout = "cards",
+  featureFirst = false,
+  columns = 3,
+  linkComponent,
+  empty,
+  className,
+  testId
+}) {
+  const t = useEditorialTone();
+  if (items.length === 0) return empty ? /* @__PURE__ */ jsx(Fragment, { children: empty }) : null;
+  const idOf = (item, i) => item.testId ?? (testId ? `${testId}-item-${i}` : void 0);
+  if (layout === "rows") {
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: cn("divide-y border-y", t.hairline, className),
+        "data-slot": "article-list",
+        "data-layout": "rows",
+        "data-testid": testId,
+        children: items.map((item, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(BlockLink, { href: item.href, linkComponent, className: "group block", children: /* @__PURE__ */ jsxs(
+          "article",
+          {
+            className: "grid gap-2 py-6 transition-colors sm:grid-cols-[10rem_minmax(0,1fr)_auto] sm:gap-8",
+            "data-testid": idOf(item, i),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                item.kicker && /* @__PURE__ */ jsx("p", { className: cn("text-xs font-semibold uppercase tracking-wider", t.accent), children: item.kicker }),
+                /* @__PURE__ */ jsx(MetaLine, { meta: item.meta, className: cn("text-xs", t.subtle) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "font-display text-xl font-semibold leading-snug transition-colors group-hover:text-primary",
+                      t.text
+                    ),
+                    children: item.title
+                  }
+                ),
+                item.summary && /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-sm leading-relaxed", t.muted), children: item.summary })
+              ] }),
+              item.href && /* @__PURE__ */ jsx(
+                ArrowUpRight,
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "hidden size-4 transition-colors group-hover:text-primary sm:block",
+                    t.subtle
+                  )
+                }
+              )
+            ]
+          }
+        ) }) }, i))
+      }
+    );
+  }
+  const card = (item, i, lead) => /* @__PURE__ */ jsx(BlockLink, { href: item.href, linkComponent, className: "group block h-full", children: /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        "flex h-full flex-col rounded-sm border transition-colors duration-300",
+        t.panel,
+        item.href && t.panelHover,
+        lead ? "p-6 lg:p-8" : "p-6"
+      ),
+      "data-testid": idOf(item, i),
+      children: [
+        item.imageUrl && /* @__PURE__ */ jsx(
+          BlockImage,
+          {
+            src: item.imageUrl,
+            alt: item.imageAlt ?? "",
+            aspect: "16:9",
+            rounded: "none",
+            className: "mb-5 w-full"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          item.kicker ? /* @__PURE__ */ jsx("p", { className: cn("text-xs font-semibold uppercase tracking-wider", t.accent), children: item.kicker }) : /* @__PURE__ */ jsx("span", {}),
+          item.href && /* @__PURE__ */ jsx(
+            ArrowUpRight,
+            {
+              "aria-hidden": "true",
+              className: cn("size-4 transition-colors group-hover:text-primary", t.subtle)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "h3",
+          {
+            className: cn(
+              "mt-3 font-display font-semibold leading-snug",
+              lead ? "text-2xl sm:text-3xl" : "text-lg",
+              t.text
+            ),
+            children: item.title
+          }
+        ),
+        item.summary && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-3 flex-1 text-sm leading-relaxed",
+              lead && "max-w-xl text-base",
+              t.muted
+            ),
+            children: item.summary
+          }
+        ),
+        /* @__PURE__ */ jsx(MetaLine, { meta: item.meta, className: cn("mt-5 text-xs", t.subtle) })
+      ]
+    }
+  ) });
+  if (featureFirst && items.length > 1) {
+    const [lead, ...rest] = items;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("grid gap-5 lg:grid-cols-[1.4fr_1fr]", className),
+        "data-slot": "article-list",
+        "data-layout": "feature",
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ jsx("div", { children: card(lead, 0, true) }),
+          /* @__PURE__ */ jsx("ul", { className: "grid gap-5", children: rest.map((item, i) => /* @__PURE__ */ jsx("li", { children: card(item, i + 1, false) }, i)) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn("grid gap-5", COLS2[columns] ?? COLS2[3], className),
+      "data-slot": "article-list",
+      "data-layout": "cards",
+      "data-testid": testId,
+      children: items.map((item, i) => /* @__PURE__ */ jsx("li", { children: card(item, i, false) }, i))
+    }
+  );
+}
+function ProofStrip({
+  lead,
+  items,
+  label,
+  surface = "muted",
+  className,
+  testId
+}) {
+  const tone = SURFACE_TONE[surface];
+  const t = useEditorialTone(tone);
+  return /* @__PURE__ */ jsx(EditorialToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": label,
+      className: cn("border-y", t.hairline, SURFACE_CLASS[surface], className),
+      "data-slot": "proof-strip",
+      "data-testid": testId,
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-7xl flex-col items-center gap-5 px-5 py-6 lg:flex-row lg:justify-between lg:px-8", children: [
+        lead && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2.5 text-sm font-medium", children: lead }),
+        /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center justify-center gap-x-6 gap-y-2", children: items.map((item, i) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: cn("text-xs font-semibold uppercase tracking-wider", t.subtle),
+            children: item
+          },
+          i
+        )) })
+      ] })
+    }
+  ) });
+}
+function CtaBand({
+  title,
+  lead,
+  actions,
+  backdrop,
+  surface = "inverse",
+  className,
+  testId
+}) {
+  const tone = SURFACE_TONE[surface];
+  const t = useEditorialTone(tone);
+  return /* @__PURE__ */ jsx(EditorialToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn("relative isolate overflow-hidden", SURFACE_CLASS[surface], className),
+      "data-slot": "cta-band",
+      "data-testid": testId,
+      children: [
+        backdrop && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 -z-10", children: backdrop }),
+        /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl px-5 py-20 text-center lg:px-8 lg:py-24", children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "font-display text-3xl font-semibold tracking-tight text-balance sm:text-4xl",
+                t.text
+              ),
+              children: title
+            }
+          ),
+          lead && /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-4 max-w-2xl text-lg", t.muted), children: lead }),
+          actions && /* @__PURE__ */ jsx("div", { className: "mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row", children: actions })
+        ] })
+      ]
+    }
+  ) });
+}
+
+export { ArticleList, Chart, CheckList, CollectionDetail, CtaBand, DefinitionList, EditorialHeading, EditorialHero, EditorialProse, EditorialSection, Eyebrow, PanelGrid, ProofStrip, PullQuote, Reveal, TagList };
+//# sourceMappingURL=chunk-OBLSURHV.js.map
+//# sourceMappingURL=chunk-OBLSURHV.js.map