@nebutra/ui 0.2.2 → 2.0.0

package/dist/editorial/index.js

@@ -0,0 +1,868 @@
+import { ArrowUpRight, WarningFill, Warning, CheckCircle, Sparkles, Information, Globe, Plus, External } from '@nebutra/icons';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { SiYoutube, SiX, SiGithub } from '@icons-pack/react-simple-icons';
+
+// src/editorial/editorial-author-bio.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var EDITORIAL_EYEBROW = "text-[0.6875rem] font-semibold uppercase leading-none tracking-[0.14em] text-muted-foreground";
+var EDITORIAL_CAPTION = "text-sm leading-6 text-muted-foreground";
+var EDITORIAL_BODY = "text-[0.9375rem] leading-7 text-muted-foreground";
+var EDITORIAL_TITLE = "text-base font-semibold leading-6 text-foreground";
+var EDITORIAL_FIGURE = "font-mono font-semibold tabular-nums text-foreground";
+var editorialBlock = cva("", {
+  variants: {
+    width: {
+      column: "",
+      breakout: "lg:-mx-12",
+      full: "lg:-mx-20"
+    },
+    spacing: {
+      none: "",
+      tight: "my-8",
+      normal: "my-10",
+      loose: "my-14"
+    }
+  },
+  defaultVariants: { width: "column", spacing: "normal" }
+});
+var editorialFrame = cva("border border-border bg-background", {
+  variants: {
+    radius: {
+      card: "rounded-[var(--radius-xl)]",
+      panel: "rounded-[var(--radius-2xl)]",
+      inner: "rounded-[var(--radius-md)]"
+    },
+    elevation: {
+      flat: "",
+      resting: "shadow-ambient-sm",
+      raised: "shadow-ambient-md"
+    }
+  },
+  defaultVariants: { radius: "card", elevation: "resting" }
+});
+var EDITORIAL_TONES = ["note", "insight", "success", "warning", "danger"];
+var TONE_ACCENT = {
+  note: "var(--neutral-8)",
+  insight: "hsl(var(--primary))",
+  success: "var(--status-success)",
+  warning: "var(--status-warning)",
+  danger: "var(--status-danger)"
+};
+function editorialToneAccent(tone) {
+  return TONE_ACCENT[tone];
+}
+function isEditorialTone(value) {
+  return typeof value === "string" && EDITORIAL_TONES.includes(value);
+}
+function editorialToneStyle(tone) {
+  return { "--editorial-tone": editorialToneAccent(tone) };
+}
+var EDITORIAL_TONE_FG = "text-[color:var(--editorial-tone)]";
+var EDITORIAL_TONE_WASH = "bg-[color-mix(in_srgb,var(--editorial-tone)_5%,transparent)]";
+var EDITORIAL_TONE_PLATE = "bg-[color-mix(in_srgb,var(--editorial-tone)_12%,transparent)]";
+function EditorialAuthorBio({
+  avatar,
+  bio,
+  className,
+  label = "Written by",
+  links = [],
+  name,
+  role
+}) {
+  if (!name.trim()) return null;
+  const visibleLinks = links.filter((link) => link.href && link.label);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        editorialBlock({ spacing: "loose", width: "breakout" }),
+        editorialFrame({ elevation: "resting", radius: "panel" }),
+        "flex flex-col gap-4 px-6 py-6 sm:flex-row sm:gap-5",
+        className
+      ),
+      children: [
+        avatar && /* @__PURE__ */ jsx("span", { className: "size-12 shrink-0 overflow-hidden rounded-full bg-muted", children: avatar }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: EDITORIAL_EYEBROW, children: label }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-base font-semibold leading-6 text-foreground", children: name }),
+          role && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: role }),
+          bio && /* @__PURE__ */ jsx("p", { className: cn("mt-3", EDITORIAL_BODY), children: bio }),
+          visibleLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: visibleLinks.map((link) => /* @__PURE__ */ jsxs(
+            "a",
+            {
+              className: "inline-flex items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted",
+              href: link.href,
+              rel: "noopener noreferrer",
+              target: "_blank",
+              children: [
+                link.label,
+                /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5 text-muted-foreground" })
+              ]
+            },
+            link.key ?? link.href
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+var TONE_ICON = {
+  note: Information,
+  insight: Sparkles,
+  success: CheckCircle,
+  warning: Warning,
+  danger: WarningFill
+};
+function EditorialCallout({
+  children,
+  className,
+  label,
+  title,
+  tone = "note"
+}) {
+  if (!title && !children) return null;
+  const Icon = TONE_ICON[tone];
+  const eyebrow = title ?? label ?? tone;
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        editorialBlock({ spacing: "normal" }),
+        editorialFrame({ elevation: "resting" }),
+        EDITORIAL_TONE_WASH,
+        "relative overflow-hidden pl-6 pr-5 py-5",
+        className
+      ),
+      style: editorialToneStyle(tone),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-0.5 bg-[var(--editorial-tone)]" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3.5", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full",
+                EDITORIAL_TONE_PLATE,
+                EDITORIAL_TONE_FG
+              ),
+              children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: EDITORIAL_EYEBROW, children: eyebrow }),
+            typeof children === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2.5", EDITORIAL_BODY), children }) : children && /* @__PURE__ */ jsx("div", { className: cn("mt-2.5", EDITORIAL_BODY), children })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var VIEWBOX_WIDTH = 640;
+var VIEWBOX_HEIGHT = 200;
+function formatPoint(point) {
+  return point.display ?? String(point.value);
+}
+function BarChart({ points, max }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: points.map((point, index) => {
+    const share = max > 0 ? Math.max(point.value / max * 100, 1.5) : 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid grid-cols-[minmax(5rem,9rem)_1fr_auto] items-center gap-3",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-muted-foreground", title: point.label, children: point.label }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-2.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "block h-full w-[var(--editorial-bar)] rounded-full bg-primary",
+              style: { "--editorial-bar": `${share}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-semibold tabular-nums text-foreground", children: formatPoint(point) })
+        ]
+      },
+      point.key ?? `${index}-${point.label}`
+    );
+  }) });
+}
+function LineChart({ max, points }) {
+  const step = points.length > 1 ? VIEWBOX_WIDTH / (points.length - 1) : 0;
+  const coords = points.map((point, index) => {
+    const x = points.length > 1 ? index * step : VIEWBOX_WIDTH / 2;
+    const y = VIEWBOX_HEIGHT - (max > 0 ? point.value / max * (VIEWBOX_HEIGHT - 16) : 0) - 8;
+    return { x, y };
+  });
+  const path = coords.map((coord, index) => `${index === 0 ? "M" : "L"}${coord.x.toFixed(1)} ${coord.y.toFixed(1)}`).join(" ");
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": true,
+        className: "h-40 w-full",
+        preserveAspectRatio: "none",
+        viewBox: `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`,
+        children: [
+          /* @__PURE__ */ jsx("title", { children: "Trend" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: `${path} L${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT} L0 ${VIEWBOX_HEIGHT} Z`,
+              fill: "color-mix(in srgb, hsl(var(--primary)) 10%, transparent)"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: path,
+              fill: "none",
+              stroke: "hsl(var(--primary))",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              vectorEffect: "non-scaling-stroke"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-between gap-2", children: points.map((point, index) => /* @__PURE__ */ jsxs("div", { className: "min-w-0 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-mono text-sm font-semibold tabular-nums text-foreground", children: formatPoint(point) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: point.label })
+    ] }, point.key ?? `${index}-${point.label}`)) })
+  ] });
+}
+function EditorialChart({
+  caption,
+  className,
+  label,
+  points,
+  title,
+  variant = "bar"
+}) {
+  const visible = points.filter((point) => point.label.trim() && Number.isFinite(point.value));
+  if (!visible.length) return null;
+  const max = Math.max(...visible.map((point) => point.value), 0);
+  return /* @__PURE__ */ jsxs("figure", { className: cn(editorialBlock({ spacing: "loose", width: "breakout" }), className), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(editorialFrame({ elevation: "resting" }), "px-5 py-5 sm:px-6"), children: [
+      (label || title) && /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
+        label && /* @__PURE__ */ jsx("div", { className: EDITORIAL_EYEBROW, children: label }),
+        title && /* @__PURE__ */ jsx("h3", { className: "mt-2 text-base font-semibold leading-6 text-foreground", children: title })
+      ] }),
+      variant === "line" ? /* @__PURE__ */ jsx(LineChart, { max, points: visible }) : /* @__PURE__ */ jsx(BarChart, { max, points: visible }),
+      /* @__PURE__ */ jsxs("table", { className: "sr-only", children: [
+        /* @__PURE__ */ jsx("caption", { children: title ?? label ?? "Chart data" }),
+        /* @__PURE__ */ jsx("tbody", { children: visible.map((point, index) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { scope: "row", children: point.label }),
+          /* @__PURE__ */ jsx("td", { children: formatPoint(point) })
+        ] }, point.key ?? `${index}-${point.label}`)) })
+      ] })
+    ] }),
+    caption && /* @__PURE__ */ jsx("figcaption", { className: cn("mt-3", EDITORIAL_CAPTION), children: caption })
+  ] });
+}
+function EditorialComparisonTable({
+  className,
+  columns,
+  dimensionLabel = "Dimension",
+  label,
+  rows,
+  title
+}) {
+  const visibleColumns = columns.filter(Boolean);
+  const visibleRows = rows.filter((row) => row.label || row.cells.some(Boolean));
+  if (visibleColumns.length < 2 || !visibleRows.length) return null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(editorialBlock({ spacing: "loose", width: "breakout" }), className),
+      "aria-label": title ?? label ?? void 0,
+      children: [
+        (label || title) && /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
+          label && /* @__PURE__ */ jsx("div", { className: EDITORIAL_EYEBROW, children: label }),
+          title && /* @__PURE__ */ jsx("h3", { className: "mt-2 text-lg font-semibold leading-6 text-foreground", children: title })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn(editorialFrame({ elevation: "resting" }), "overflow-hidden"), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-sm", children: [
+          /* @__PURE__ */ jsx("thead", { className: "hidden md:table-header-group", children: /* @__PURE__ */ jsxs("tr", { className: "bg-muted", children: [
+            /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: "w-[22%] border-b border-border px-4 py-3 font-semibold text-foreground",
+                scope: "col",
+                children: dimensionLabel
+              }
+            ),
+            visibleColumns.map((column) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: "border-b border-border px-4 py-3 font-semibold text-foreground",
+                scope: "col",
+                children: column
+              },
+              column
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { className: "block md:table-row-group", children: visibleRows.map((row, rowIndex) => /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              className: "block border-b border-border last:border-b-0 md:table-row",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    className: "block bg-muted px-4 pb-2 pt-3 text-left align-top font-semibold text-foreground md:table-cell md:bg-transparent md:py-3",
+                    scope: "row",
+                    children: row.label
+                  }
+                ),
+                visibleColumns.map((column, cellIndex) => /* @__PURE__ */ jsxs(
+                  "td",
+                  {
+                    className: "block px-4 py-2 align-top leading-6 text-muted-foreground last:pb-3 md:table-cell md:py-3 md:last:pb-3",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: cn("mb-1 block md:hidden", EDITORIAL_EYEBROW), children: column }),
+                      row.cells[cellIndex]
+                    ]
+                  },
+                  `${row.key ?? rowIndex}-${column}`
+                ))
+              ]
+            },
+            row.key ?? `${rowIndex}-${row.label}`
+          )) })
+        ] }) })
+      ]
+    }
+  );
+}
+function EditorialDataTable({ caption, className, head, rows }) {
+  if (!head.length || !rows.length) return null;
+  return /* @__PURE__ */ jsxs("figure", { className: cn(editorialBlock({ spacing: "normal", width: "breakout" }), className), children: [
+    /* @__PURE__ */ jsx("div", { className: cn(editorialFrame({ elevation: "resting" }), "overflow-x-auto"), children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[36rem] border-collapse text-left text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("thead", { className: "bg-muted", children: /* @__PURE__ */ jsx("tr", { children: head.map((cell, index) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: "border-b border-border px-4 py-3 font-semibold text-foreground",
+          scope: "col",
+          children: cell
+        },
+        `head-${index}`
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border last:border-b-0", children: row.cells.map((cell, cellIndex) => /* @__PURE__ */ jsx("td", { className: "px-4 py-3 align-top leading-6", children: cell }, `${row.key}-${cellIndex}`)) }, row.key)) })
+    ] }) }),
+    caption && /* @__PURE__ */ jsx("figcaption", { className: cn("mt-3", EDITORIAL_CAPTION), children: caption })
+  ] });
+}
+function EditorialDivider({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("my-14 flex items-center gap-4", className), children: [
+    /* @__PURE__ */ jsx("hr", { className: "h-px flex-1 border-0 bg-border" }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-1.5 rounded-full bg-[hsl(var(--primary))]" }),
+    /* @__PURE__ */ jsx("hr", { className: "h-px flex-1 border-0 bg-border" })
+  ] });
+}
+var EDITORIAL_EMBED_PROVIDERS = ["youtube", "x", "github", "website"];
+var PROVIDER_ICON = {
+  github: SiGithub,
+  website: Globe,
+  x: SiX,
+  youtube: SiYoutube
+};
+var PROVIDER_NAME = {
+  github: "GitHub",
+  website: "Website",
+  x: "X",
+  youtube: "YouTube"
+};
+function hostname(url) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return null;
+  }
+}
+function isEditorialEmbedProvider(value) {
+  return typeof value === "string" && EDITORIAL_EMBED_PROVIDERS.includes(value);
+}
+function EditorialEmbedCard({
+  caption,
+  className,
+  provider = "website",
+  title,
+  url
+}) {
+  if (!title.trim() || !url.trim()) return null;
+  const Icon = PROVIDER_ICON[provider];
+  const host = hostname(url);
+  return /* @__PURE__ */ jsxs("figure", { className: cn(editorialBlock({ spacing: "normal" }), className), children: [
+    /* @__PURE__ */ jsxs(
+      "a",
+      {
+        className: cn(
+          editorialFrame({ elevation: "resting" }),
+          "group flex items-center gap-4 p-4 transition-shadow hover:shadow-ambient-md"
+        ),
+        href: url,
+        rel: "noopener noreferrer",
+        target: "_blank",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "flex size-10 shrink-0 items-center justify-center rounded-[var(--radius-md)] border border-border bg-muted text-foreground",
+              children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block text-[0.9375rem] font-semibold leading-6 text-foreground", children: title }),
+            /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate text-sm text-muted-foreground", children: [PROVIDER_NAME[provider], host].filter(Boolean).join(" \xB7 ") })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ArrowUpRight,
+            {
+              "aria-hidden": true,
+              className: "size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-[hsl(var(--primary))]"
+            }
+          )
+        ]
+      }
+    ),
+    caption && /* @__PURE__ */ jsx("figcaption", { className: cn("mt-2.5", EDITORIAL_CAPTION), children: caption })
+  ] });
+}
+function EditorialEntityChip({ className, href, logo, name }) {
+  if (!name.trim()) return null;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    logo && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "inline-flex size-[1.1em] shrink-0 items-center justify-center overflow-hidden rounded-[0.25em] bg-muted",
+        children: logo
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: name })
+  ] });
+  const shared = cn(
+    "mx-0.5 inline-flex items-baseline gap-1 align-baseline font-medium text-foreground",
+    className
+  );
+  if (!href) {
+    return /* @__PURE__ */ jsx("span", { className: shared, children: content });
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: cn(
+        shared,
+        "underline decoration-border decoration-dotted underline-offset-4 transition-colors hover:decoration-[hsl(var(--primary))] hover:decoration-solid"
+      ),
+      href,
+      rel: "noopener noreferrer",
+      target: "_blank",
+      children: content
+    }
+  );
+}
+function EditorialFaq({
+  className,
+  defaultOpenFirst = false,
+  items,
+  label,
+  title
+}) {
+  const visible = items.filter((item) => item.question.trim() && item.answer.trim());
+  if (!visible.length) return null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": title ?? label ?? void 0,
+      className: cn(editorialBlock({ spacing: "loose" }), className),
+      children: [
+        (label || title) && /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
+          label && /* @__PURE__ */ jsx("div", { className: EDITORIAL_EYEBROW, children: label }),
+          title && /* @__PURE__ */ jsx("h3", { className: "mt-2 text-lg font-semibold leading-6 text-foreground", children: title })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "divide-y divide-border border-y border-border", children: visible.map((item, index) => /* @__PURE__ */ jsxs(
+          "details",
+          {
+            className: "group",
+            open: defaultOpenFirst && index === 0,
+            children: [
+              /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer list-none items-start justify-between gap-4 py-4 text-[0.9375rem] font-semibold leading-6 text-foreground marker:hidden [&::-webkit-details-marker]:hidden", children: [
+                item.question,
+                /* @__PURE__ */ jsx(
+                  Plus,
+                  {
+                    "aria-hidden": true,
+                    className: "mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform duration-micro group-open:rotate-45"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: cn("pb-4 pr-8", EDITORIAL_BODY), children: item.answer })
+            ]
+          },
+          item.key ?? `${index}-${item.question.slice(0, 24)}`
+        )) })
+      ]
+    }
+  );
+}
+function EditorialFigure({
+  caption,
+  className,
+  media,
+  width = "column"
+}) {
+  return /* @__PURE__ */ jsxs("figure", { className: cn(editorialBlock({ spacing: "normal", width }), className), children: [
+    /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-[var(--radius-xl)] border border-border bg-muted shadow-ambient-sm", children: media }),
+    caption && /* @__PURE__ */ jsx("figcaption", { className: cn("mt-3 text-center", EDITORIAL_CAPTION), children: caption })
+  ] });
+}
+var GROUP_LAYOUT = {
+  comparison: "grid gap-4 sm:grid-cols-2",
+  grid: "grid gap-4 sm:grid-cols-2",
+  sequence: "grid gap-4"
+};
+function EditorialFigureGroup({
+  children,
+  className,
+  label,
+  title,
+  variant = "grid"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": title ?? label ?? void 0,
+      className: cn(editorialBlock({ spacing: "loose", width: "breakout" }), className),
+      children: [
+        (label || title) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          label && /* @__PURE__ */ jsx("div", { className: EDITORIAL_EYEBROW, children: label }),
+          title && /* @__PURE__ */ jsx("h3", { className: "mt-2 text-lg font-semibold leading-6 text-foreground", children: title })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: GROUP_LAYOUT[variant], children })
+      ]
+    }
+  );
+}
+function EditorialKeyTakeaways({
+  className,
+  items,
+  label = "Key takeaways",
+  title
+}) {
+  const visible = items.filter((item) => item.text.trim());
+  if (!visible.length) return null;
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      "aria-label": title ?? label,
+      className: cn(
+        editorialBlock({ spacing: "loose", width: "breakout" }),
+        editorialFrame({ elevation: "resting", radius: "panel" }),
+        "px-6 py-6 sm:px-8 sm:py-7",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: EDITORIAL_EYEBROW, children: label }),
+        title && /* @__PURE__ */ jsx("h2", { className: "mt-3 text-xl font-semibold leading-7 text-foreground", children: title }),
+        /* @__PURE__ */ jsx("ol", { className: "mt-5 divide-y divide-border border-t border-border", children: visible.map((item, index) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "flex gap-4 py-3.5 first:pt-4",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "mt-0.5 shrink-0 font-mono text-xs font-semibold tabular-nums text-muted-foreground",
+                  children: String(index + 1).padStart(2, "0")
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-[0.9375rem] leading-7 text-foreground", children: item.text })
+            ]
+          },
+          item.key ?? `${index}-${item.text.slice(0, 24)}`
+        )) })
+      ]
+    }
+  );
+}
+function EditorialMarginNote({
+  children,
+  className,
+  label,
+  title
+}) {
+  if (!title && !children) return null;
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "my-6 border-l-2 border-border py-1 pl-4 text-sm leading-6 text-muted-foreground",
+        "xl:float-right xl:-mr-56 xl:my-2 xl:ml-8 xl:w-48 xl:border-l xl:pl-4",
+        className
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx("div", { className: cn("mb-1.5", EDITORIAL_EYEBROW), children: label }),
+        title && /* @__PURE__ */ jsx("p", { className: "font-semibold text-foreground", children: title }),
+        children && /* @__PURE__ */ jsx("p", { className: cn(title && "mt-1"), children })
+      ]
+    }
+  );
+}
+function EditorialPullQuote({
+  attribution,
+  className,
+  portrait,
+  quote,
+  role,
+  sourceHref
+}) {
+  if (!quote.trim()) return null;
+  const name = attribution ? sourceHref ? /* @__PURE__ */ jsxs(
+    "a",
+    {
+      className: "inline-flex items-center gap-1.5 text-foreground underline decoration-border underline-offset-4 transition-colors hover:decoration-[hsl(var(--primary))]",
+      href: sourceHref,
+      rel: "noopener noreferrer",
+      target: "_blank",
+      children: [
+        attribution,
+        /* @__PURE__ */ jsx(External, { "aria-hidden": true, className: "size-3.5 text-muted-foreground" })
+      ]
+    }
+  ) : attribution : null;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: cn(
+        editorialBlock({ spacing: "loose", width: "breakout" }),
+        "border-y border-border py-8 sm:py-10",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("blockquote", { className: "text-pretty text-xl font-medium leading-9 text-foreground sm:text-[1.6rem] sm:leading-[2.6rem]", children: quote }),
+        (name || role || portrait) && /* @__PURE__ */ jsxs("figcaption", { className: "mt-6 flex items-center gap-3", children: [
+          portrait && /* @__PURE__ */ jsx("span", { className: "size-9 shrink-0 overflow-hidden rounded-full bg-muted", children: portrait }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+            name && /* @__PURE__ */ jsx("span", { className: "block text-sm font-semibold text-foreground", children: name }),
+            role && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-sm text-muted-foreground", children: role })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function hostname2(url) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return null;
+  }
+}
+function EditorialSourceIndex({
+  className,
+  label = "Source index",
+  sources,
+  summary
+}) {
+  const visible = sources.filter((source) => source.title && source.url);
+  if (!visible.length) return null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": label,
+      className: cn(editorialBlock({ spacing: "loose", width: "breakout" }), className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "border-b border-border pb-3", children: [
+          /* @__PURE__ */ jsx("div", { className: EDITORIAL_EYEBROW, children: label }),
+          summary && /* @__PURE__ */ jsx("p", { className: cn("mt-2", EDITORIAL_BODY), children: summary })
+        ] }),
+        /* @__PURE__ */ jsx("ol", { className: "divide-y divide-border", children: visible.map((source, index) => {
+          const meta = [source.publisher, source.author, source.accessedAt].filter(Boolean);
+          const host = hostname2(source.url);
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "a",
+            {
+              className: "group flex gap-4 py-4 transition-colors hover:bg-muted/60",
+              href: source.url,
+              rel: "noopener noreferrer",
+              target: "_blank",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "mt-0.5 shrink-0 font-mono text-xs font-semibold tabular-nums text-muted-foreground",
+                    children: String(index + 1).padStart(2, "0")
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-start justify-between gap-3", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem] font-semibold leading-6 text-foreground", children: source.title }),
+                    /* @__PURE__ */ jsx(
+                      ArrowUpRight,
+                      {
+                        "aria-hidden": true,
+                        className: "mt-0.5 size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-[hsl(var(--primary))]"
+                      }
+                    )
+                  ] }),
+                  (meta.length > 0 || host) && /* @__PURE__ */ jsx("span", { className: "mt-1 block text-sm text-muted-foreground", children: (meta.length ? meta : [host]).join(" \xB7 ") }),
+                  source.summary && /* @__PURE__ */ jsx("span", { className: "mt-1.5 block text-sm leading-6 text-muted-foreground", children: source.summary })
+                ] })
+              ]
+            }
+          ) }, source.key ?? source.url);
+        }) })
+      ]
+    }
+  );
+}
+var COLUMNS = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4"
+};
+function EditorialStatGrid({ className, items, label, title }) {
+  const visible = items.filter((item) => item.value.trim() && item.label.trim());
+  if (!visible.length) return null;
+  const columns = COLUMNS[Math.min(visible.length, 4)] ?? COLUMNS[4];
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(editorialBlock({ spacing: "loose", width: "breakout" }), className),
+      "aria-label": title ?? label ?? void 0,
+      children: [
+        (label || title) && /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
+          label && /* @__PURE__ */ jsx("div", { className: EDITORIAL_EYEBROW, children: label }),
+          title && /* @__PURE__ */ jsx("h3", { className: "mt-2 text-lg font-semibold leading-6 text-foreground", children: title })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "dl",
+          {
+            className: cn(
+              "grid divide-y divide-border border-y border-border",
+              columns,
+              "sm:divide-x sm:divide-y-0"
+            ),
+            children: visible.map((item, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "px-0 py-5 sm:px-6 sm:first:pl-0 sm:last:pr-0",
+                children: [
+                  /* @__PURE__ */ jsx("dt", { className: "sr-only", children: item.label }),
+                  /* @__PURE__ */ jsxs("dd", { children: [
+                    /* @__PURE__ */ jsx("span", { className: cn("block text-3xl leading-none sm:text-4xl", EDITORIAL_FIGURE), children: item.value }),
+                    /* @__PURE__ */ jsx("span", { className: "mt-3 block text-sm font-medium text-foreground", children: item.label }),
+                    item.caption && /* @__PURE__ */ jsx("span", { className: cn("mt-1.5 block", EDITORIAL_CAPTION), children: item.caption })
+                  ] })
+                ]
+              },
+              item.key ?? `${index}-${item.label}`
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+function EditorialStepLadder({ className, label, steps, title }) {
+  const visible = steps.filter((step) => step.title.trim());
+  if (!visible.length) return null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": title ?? label ?? void 0,
+      className: cn(editorialBlock({ spacing: "loose" }), className),
+      children: [
+        (label || title) && /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
+          label && /* @__PURE__ */ jsx("div", { className: EDITORIAL_EYEBROW, children: label }),
+          title && /* @__PURE__ */ jsx("h3", { className: "mt-2 text-lg font-semibold leading-6 text-foreground", children: title })
+        ] }),
+        /* @__PURE__ */ jsx("ol", { className: "grid gap-0", children: visible.map((step, index) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "relative grid grid-cols-[2rem_1fr] gap-4 pb-6 last:pb-0",
+            children: [
+              index < visible.length - 1 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "absolute bottom-2 left-4 top-9 w-px -translate-x-1/2 bg-border"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "z-10 flex size-8 items-center justify-center rounded-full border border-border bg-background font-mono text-xs font-semibold tabular-nums text-foreground",
+                  children: index + 1
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 pt-1.5", children: [
+                /* @__PURE__ */ jsx("h4", { className: "text-[0.9375rem] font-semibold leading-6 text-foreground", children: step.title }),
+                step.body && /* @__PURE__ */ jsx("p", { className: cn("mt-1.5", EDITORIAL_BODY), children: step.body })
+              ] })
+            ]
+          },
+          step.key ?? `${index}-${step.title}`
+        )) })
+      ]
+    }
+  );
+}
+function EditorialTimeline({ className, items, label, title }) {
+  const visible = items.filter((item) => item.marker.trim() && item.title.trim());
+  if (!visible.length) return null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": title ?? label ?? void 0,
+      className: cn(editorialBlock({ spacing: "loose" }), className),
+      children: [
+        (label || title) && /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
+          label && /* @__PURE__ */ jsx("div", { className: EDITORIAL_EYEBROW, children: label }),
+          title && /* @__PURE__ */ jsx("h3", { className: "mt-2 text-lg font-semibold leading-6 text-foreground", children: title })
+        ] }),
+        /* @__PURE__ */ jsx("ol", { className: "ml-[3.25rem] border-l border-border sm:ml-24", children: visible.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "relative pb-7 pl-6 last:pb-0", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute -left-[0.3125rem] top-1.5 size-2.5 rounded-full border-2 border-background bg-[hsl(var(--primary))]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute right-[calc(100%+1.5rem)] top-0 whitespace-nowrap font-mono text-xs font-semibold tabular-nums leading-6 text-muted-foreground",
+              "aria-hidden": true,
+              children: item.marker
+            }
+          ),
+          /* @__PURE__ */ jsxs("h4", { className: "text-[0.9375rem] font-semibold leading-6 text-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+              item.marker,
+              " \u2014 "
+            ] }),
+            item.title
+          ] }),
+          item.body && /* @__PURE__ */ jsx("p", { className: cn("mt-1.5", EDITORIAL_BODY), children: item.body })
+        ] }, item.key ?? `${index}-${item.marker}`)) })
+      ]
+    }
+  );
+}
+
+export { EDITORIAL_BODY, EDITORIAL_CAPTION, EDITORIAL_EMBED_PROVIDERS, EDITORIAL_EYEBROW, EDITORIAL_FIGURE, EDITORIAL_TITLE, EDITORIAL_TONES, EDITORIAL_TONE_FG, EDITORIAL_TONE_PLATE, EDITORIAL_TONE_WASH, EditorialAuthorBio, EditorialCallout, EditorialChart, EditorialComparisonTable, EditorialDataTable, EditorialDivider, EditorialEmbedCard, EditorialEntityChip, EditorialFaq, EditorialFigure, EditorialFigureGroup, EditorialKeyTakeaways, EditorialMarginNote, EditorialPullQuote, EditorialSourceIndex, EditorialStatGrid, EditorialStepLadder, EditorialTimeline, editorialBlock, editorialFrame, editorialToneAccent, editorialToneStyle, isEditorialEmbedProvider, isEditorialTone };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map