@lamatemaga/sterling 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1912 @@
+"use client";
+"use client";
+
+// src/SterlingFigure.tsx
+import { isValidElement } from "react";
+
+// src/palette.ts
+function defineSterlingPalette(palette) {
+  return palette;
+}
+function sterlingPaletteStyle(palette) {
+  const variables = {};
+  if (!palette) return variables;
+  const surfaceTokens = {
+    paper: "paper",
+    plot: "surface",
+    plotAlt: "surface-2",
+    text: "text",
+    muted: "muted",
+    grid: "grid",
+    edge: "edge",
+    period: "period"
+  };
+  for (const [key, value] of Object.entries(palette.surface ?? {})) {
+    if (value) variables[`--sterling-${surfaceTokens[key]}`] = value;
+  }
+  const assignSeries = (name, values) => {
+    values?.forEach((value, index) => {
+      if (value) variables[`--sterling-${name}-${index + 1}`] = value;
+    });
+  };
+  assignSeries("cat", palette.categorical);
+  assignSeries("legend", palette.legend);
+  assignSeries("seq", palette.sequential);
+  assignSeries("div", palette.divergent);
+  assignSeries("heat", palette.heat);
+  palette.ramps?.forEach((ramp, familyIndex) => {
+    ramp.forEach((value, stopIndex) => {
+      if (value) variables[`--sterling-ramp-${familyIndex + 1}-${stopIndex + 1}`] = value;
+    });
+  });
+  return variables;
+}
+var sterlingCategorical = {
+  light: [
+    "#9A79E7",
+    "#25A08D",
+    "#D45AC7",
+    "#E4A43A",
+    "#5A83D7",
+    "#E87864",
+    "#96AB51",
+    "#536B78"
+  ],
+  dark: [
+    "#B69AF2",
+    "#5EC9AE",
+    "#E88BDD",
+    "#F2C46D",
+    "#86A8E8",
+    "#F29A88",
+    "#B7C974",
+    "#B7C8D1"
+  ],
+  print: [
+    "#8E68D8",
+    "#218C7C",
+    "#C653BC",
+    "#D39A32",
+    "#4F73C6",
+    "#DC6A55",
+    "#879347",
+    "#607986"
+  ]
+};
+var sterlingColorNames = [
+  "Violet",
+  "Teal",
+  "Orchid",
+  "Amber",
+  "Blue",
+  "Coral",
+  "Moss",
+  "Payne"
+];
+var sterlingChartColors = sterlingColorNames.map(
+  (_, index) => `var(--sterling-cat-${index + 1})`
+);
+var sterlingLegendColors = sterlingColorNames.map(
+  (_, index) => `var(--sterling-legend-${index + 1})`
+);
+var sterlingDivergentColors = Array.from(
+  { length: 11 },
+  (_, index) => `var(--sterling-div-${index + 1})`
+);
+var sterlingSequentialColors = Array.from(
+  { length: 10 },
+  (_, index) => `var(--sterling-seq-${index + 1})`
+);
+var sterlingHeatColors = Array.from(
+  { length: 11 },
+  (_, index) => `var(--sterling-heat-${index + 1})`
+);
+var sterlingRampStops = 7;
+function sterlingRamp(family, stop) {
+  const familyIndex = (family % sterlingColorNames.length + sterlingColorNames.length) % sterlingColorNames.length;
+  const clamped = Math.max(1, Math.min(sterlingRampStops, Math.round(stop)));
+  return `var(--sterling-ramp-${familyIndex + 1}-${clamped})`;
+}
+
+// src/SterlingLegend.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function LegendMark({ shape = "circle" }) {
+  if (shape === "square") {
+    return /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "1" });
+  }
+  if (shape === "triangle") {
+    return /* @__PURE__ */ jsx("path", { d: "M 6 1 L 11 10 L 1 10 Z" });
+  }
+  if (shape === "line") {
+    return /* @__PURE__ */ jsx("path", { d: "M 1 6 H 11", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" });
+  }
+  return /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "4.5" });
+}
+function SterlingInlineLegend({
+  items,
+  locale
+}) {
+  const parts = new Intl.ListFormat(locale, {
+    style: "long",
+    type: "conjunction"
+  }).formatToParts(items.map((item) => item.label));
+  let itemIndex = 0;
+  return /* @__PURE__ */ jsx("span", { className: "sterling-inline-legend", children: parts.map((part, partIndex) => {
+    if (part.type !== "element") {
+      return /* @__PURE__ */ jsx("span", { children: part.value }, `literal-${partIndex}`);
+    }
+    const item = items[itemIndex++];
+    const colorIndex = Math.max(0, Math.min(sterlingChartColors.length - 1, item.colorIndex ?? 0));
+    const style = {
+      "--sterling-legend-mark": item.color ?? sterlingChartColors[colorIndex],
+      "--sterling-legend-text": item.textColor ?? sterlingLegendColors[colorIndex]
+    };
+    return /* @__PURE__ */ jsxs("span", { className: "sterling-inline-legend__item", style, children: [
+      /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx(LegendMark, { shape: item.shape }) }),
+      /* @__PURE__ */ jsx("span", { children: item.label })
+    ] }, `${item.label}-${partIndex}`);
+  }) });
+}
+
+// src/SterlingFigureActions.tsx
+import { Check, ClipboardCopy, Download, LoaderCircle, MoreHorizontal, Share2 } from "lucide-react";
+import { toPng } from "html-to-image";
+import { useEffect, useRef, useState } from "react";
+
+// src/dataExport.ts
+function csvCell(value) {
+  if (value === null || value === void 0) return "";
+  if (value instanceof Date) return value.toISOString();
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function escapeCsvCell(value) {
+  const cell = csvCell(value);
+  return /[\",\n\r]/.test(cell) ? `"${cell.replace(/"/g, '""')}"` : cell;
+}
+function sterlingRowsToCsv(rows) {
+  const columns = [...new Set(rows.flatMap((row) => Object.keys(row)))];
+  return [
+    columns.map(escapeCsvCell).join(","),
+    ...rows.map((row) => columns.map((column) => escapeCsvCell(row[column])).join(","))
+  ].join("\r\n");
+}
+function rowsFromArray(values) {
+  return values.map((value) => {
+    if (Array.isArray(value)) {
+      return Object.fromEntries(value.map((cell, index) => [`value_${index + 1}`, cell]));
+    }
+    if (value && typeof value === "object") return value;
+    return { value };
+  });
+}
+function inferSterlingDataExport(props) {
+  if (Array.isArray(props.data)) return { rows: rowsFromArray(props.data) };
+  if (Array.isArray(props.rows)) return { rows: rowsFromArray(props.rows) };
+  if (Array.isArray(props.links)) return { rows: rowsFromArray(props.links) };
+  if (Array.isArray(props.points)) return { rows: rowsFromArray(props.points) };
+  if (Array.isArray(props.groups)) {
+    const groups = props.groups;
+    if (groups.every((group) => Array.isArray(group.values))) {
+      return {
+        rows: groups.flatMap((group) => group.values.map((value) => ({ group: group.label, value })))
+      };
+    }
+  }
+  if (Array.isArray(props.values)) {
+    const values = props.values;
+    if (values.every((value) => typeof value === "number")) return { rows: values.map((value) => ({ value })) };
+    if (values.every(Array.isArray)) {
+      const rowLabels = Array.isArray(props.rowLabels) ? props.rowLabels : [];
+      const columnLabels = Array.isArray(props.columnLabels) ? props.columnLabels : [];
+      return {
+        rows: values.flatMap((row, rowIndex) => row.map((value, columnIndex) => ({
+          row: rowLabels[rowIndex] ?? rowIndex + 1,
+          column: columnLabels[columnIndex] ?? columnIndex + 1,
+          value
+        })))
+      };
+    }
+  }
+  if (Array.isArray(props.series) && Array.isArray(props.labels)) {
+    const labels = props.labels;
+    const series = props.series;
+    if (series.every((item) => Array.isArray(item.values))) {
+      return {
+        rows: labels.map((label, index) => Object.fromEntries([
+          ["label", label],
+          ...series.map((item) => [String(item.label ?? "value"), item.values[index]])
+        ]))
+      };
+    }
+  }
+  if (Array.isArray(props.nodes)) return { rows: rowsFromArray(props.nodes) };
+  return void 0;
+}
+
+// src/SterlingFigureActions.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var copy = {
+  es: {
+    copy: "Copiar imagen",
+    copied: "Imagen copiada",
+    more: "Exportar o compartir",
+    downloadImage: "Descargar imagen PNG",
+    downloadData: "Descargar datos de la figura (.csv)",
+    share: "Compartir figura",
+    shared: "Compartida",
+    error: "No se pudo completar la acci\xF3n"
+  },
+  en: {
+    copy: "Copy image",
+    copied: "Image copied",
+    more: "Export or share",
+    downloadImage: "Download PNG image",
+    downloadData: "Download figure data (.csv)",
+    share: "Share figure",
+    shared: "Shared",
+    error: "The action could not be completed"
+  }
+};
+function fileName(title, extension) {
+  const slug = title.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  return `${slug || "sterling-figure"}.${extension}`;
+}
+function resolveSvgColors(root) {
+  const snapshots = [];
+  const properties = ["color", "fill", "stroke", "stop-color", "flood-color"];
+  root.querySelectorAll("svg, svg *").forEach((element) => {
+    snapshots.push({ element, style: element.getAttribute("style") });
+    const computed = getComputedStyle(element);
+    for (const property of properties) {
+      const value = computed.getPropertyValue(property).trim();
+      if (value && value !== "none" && !value.startsWith("url(")) {
+        element.style.setProperty(property, value);
+      }
+    }
+  });
+  return () => {
+    for (const { element, style } of snapshots) {
+      if (style === null) element.removeAttribute("style");
+      else element.setAttribute("style", style);
+    }
+  };
+}
+function triggerDownload(href, name) {
+  const link = document.createElement("a");
+  link.download = name;
+  link.href = href;
+  document.body.append(link);
+  link.click();
+  link.remove();
+}
+function SterlingFigureActions({
+  locale,
+  title,
+  dataExport
+}) {
+  const actionsRef = useRef(null);
+  const menuRef = useRef(null);
+  const resetTimer = useRef(null);
+  const [state, setState] = useState("idle");
+  const t = copy[locale];
+  const busy = ["copying", "downloading-image", "downloading-data", "sharing"].includes(state);
+  useEffect(() => () => {
+    if (resetTimer.current) clearTimeout(resetTimer.current);
+  }, []);
+  async function renderCard() {
+    const figure = actionsRef.current?.closest(".sterling-figure");
+    const card = figure?.querySelector(".sterling-figure__inner");
+    if (!card) throw new Error("Sterling figure not found");
+    await document.fonts.ready;
+    const actions = card.querySelector(".sterling-figure__actions");
+    const actionsVisibility = actions?.style.visibility ?? "";
+    if (actions) actions.style.visibility = "hidden";
+    const bounds = card.getBoundingClientRect();
+    const backgroundColor = getComputedStyle(card).backgroundColor;
+    const restoreSvgColors = resolveSvgColors(card);
+    try {
+      return await toPng(card, {
+        backgroundColor,
+        cacheBust: true,
+        width: Math.ceil(bounds.width),
+        height: Math.ceil(bounds.height),
+        pixelRatio: 2
+      });
+    } finally {
+      restoreSvgColors();
+      if (actions) actions.style.visibility = actionsVisibility;
+    }
+  }
+  function closeMenu() {
+    if (menuRef.current) menuRef.current.open = false;
+  }
+  function resetSoon(next) {
+    setState(next);
+    if (resetTimer.current) clearTimeout(resetTimer.current);
+    resetTimer.current = setTimeout(() => setState("idle"), 1800);
+  }
+  async function copyImage() {
+    try {
+      setState("copying");
+      const dataUrl = await renderCard();
+      const blob = await fetch(dataUrl).then((response) => response.blob());
+      if (!navigator.clipboard?.write || typeof ClipboardItem === "undefined") {
+        throw new Error("Image clipboard is not available");
+      }
+      await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+      resetSoon("copied");
+    } catch {
+      resetSoon("error");
+    }
+  }
+  async function downloadImage() {
+    try {
+      setState("downloading-image");
+      const dataUrl = await renderCard();
+      triggerDownload(dataUrl, fileName(title, "png"));
+      closeMenu();
+      resetSoon("idle");
+    } catch {
+      resetSoon("error");
+    }
+  }
+  function downloadData() {
+    if (!dataExport) return;
+    try {
+      setState("downloading-data");
+      const csv = sterlingRowsToCsv(dataExport.rows);
+      const blob = new Blob(["\uFEFF", csv], { type: "text/csv;charset=utf-8" });
+      const url = URL.createObjectURL(blob);
+      triggerDownload(url, dataExport.fileName ? `${dataExport.fileName}.csv` : fileName(title, "csv"));
+      window.setTimeout(() => URL.revokeObjectURL(url), 0);
+      closeMenu();
+      resetSoon("idle");
+    } catch {
+      resetSoon("error");
+    }
+  }
+  async function shareFigure() {
+    try {
+      setState("sharing");
+      const dataUrl = await renderCard();
+      const blob = await fetch(dataUrl).then((response) => response.blob());
+      const image = new File([blob], fileName(title, "png"), { type: "image/png" });
+      const shareData = { title, text: title, url: window.location.href, files: [image] };
+      if (navigator.share && (!navigator.canShare || navigator.canShare(shareData))) {
+        closeMenu();
+        await navigator.share(shareData);
+        resetSoon("shared");
+        return;
+      }
+      if (!navigator.clipboard?.writeText) throw new Error("Sharing is not available");
+      await navigator.clipboard.writeText(window.location.href);
+      closeMenu();
+      resetSoon("shared");
+    } catch (error) {
+      if (error instanceof DOMException && error.name === "AbortError") {
+        setState("idle");
+        return;
+      }
+      resetSoon("error");
+    }
+  }
+  const copyLabel = state === "copied" ? t.copied : state === "error" ? t.error : t.copy;
+  const moreLabel = state === "shared" ? t.shared : state === "error" ? t.error : t.more;
+  return /* @__PURE__ */ jsxs2("div", { ref: actionsRef, className: "sterling-figure__actions", children: [
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: copyImage,
+        disabled: busy,
+        "data-state": state,
+        "aria-label": copyLabel,
+        title: copyLabel,
+        children: state === "copying" ? /* @__PURE__ */ jsx2(LoaderCircle, { "aria-hidden": "true" }) : state === "copied" ? /* @__PURE__ */ jsx2(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx2(ClipboardCopy, { "aria-hidden": "true" })
+      }
+    ),
+    /* @__PURE__ */ jsxs2("details", { ref: menuRef, className: "sterling-figure__action-menu", children: [
+      /* @__PURE__ */ jsx2("summary", { "aria-label": moreLabel, title: moreLabel, children: busy && state !== "copying" ? /* @__PURE__ */ jsx2(LoaderCircle, { "aria-hidden": "true", "data-state": state }) : state === "shared" ? /* @__PURE__ */ jsx2(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx2(MoreHorizontal, { "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsxs2("div", { role: "menu", className: "sterling-figure__action-popover", children: [
+        /* @__PURE__ */ jsxs2("button", { type: "button", role: "menuitem", onClick: downloadImage, disabled: busy, children: [
+          /* @__PURE__ */ jsx2(Download, { "aria-hidden": "true" }),
+          " ",
+          /* @__PURE__ */ jsx2("span", { children: t.downloadImage })
+        ] }),
+        dataExport ? /* @__PURE__ */ jsxs2("button", { type: "button", role: "menuitem", onClick: downloadData, disabled: busy, children: [
+          /* @__PURE__ */ jsx2(Download, { "aria-hidden": "true" }),
+          " ",
+          /* @__PURE__ */ jsx2("span", { children: t.downloadData })
+        ] }) : null,
+        /* @__PURE__ */ jsxs2("button", { type: "button", role: "menuitem", onClick: shareFigure, disabled: busy, children: [
+          /* @__PURE__ */ jsx2(Share2, { "aria-hidden": "true" }),
+          " ",
+          /* @__PURE__ */ jsx2("span", { children: t.share })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/editorial.tsx
+import { Fragment, jsxs as jsxs3 } from "react/jsx-runtime";
+function sterlingCredit({
+  author,
+  productName = "Sterling",
+  linkToSterling = true,
+  sterlingUrl = "https://www.lamatemaga.com/sterling"
+}, locale = "en") {
+  const product = linkToSterling ? /* @__PURE__ */ jsxs3("a", { className: "sterling-figure__credit-link", href: sterlingUrl, children: [
+    productName,
+    " \u2726"
+  ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+    productName,
+    " \u2726"
+  ] });
+  if (locale === "es") {
+    return author ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+      "Hecho por ",
+      author,
+      " con ",
+      product
+    ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+      "Hecho con ",
+      product
+    ] });
+  }
+  return author ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+    "Made by ",
+    author,
+    " with ",
+    product
+  ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+    "Made with ",
+    product
+  ] });
+}
+
+// src/SterlingFigure.tsx
+import { jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
+function SterlingFigure({
+  locale = "en",
+  labelPrimary,
+  labelSecondary,
+  title,
+  subtitle,
+  legend,
+  source,
+  children,
+  size = "medium",
+  className,
+  style,
+  palette,
+  signature,
+  sourceLabel,
+  titleMarkHref,
+  editorial,
+  dataExport
+}) {
+  const defaults = { titleMark: ".", signature: sterlingCredit({}, locale) };
+  const titleMark = editorial?.titleMark === void 0 ? defaults.titleMark : editorial.titleMark;
+  const resolvedTitleMarkHref = titleMarkHref ?? editorial?.titleMarkHref;
+  const resolvedSourceLabel = sourceLabel ?? editorial?.sourceLabel ?? (locale === "es" ? "Fuente" : "Source");
+  const resolvedSignature = signature ?? editorial?.signature ?? defaults.signature;
+  const inferredDataExport = isValidElement(children) ? inferSterlingDataExport(children.props) : void 0;
+  return /* @__PURE__ */ jsx3(
+    "figure",
+    {
+      className: ["sterling-figure", className].filter(Boolean).join(" "),
+      "data-size": size,
+      style: { ...sterlingPaletteStyle(palette), ...style },
+      children: /* @__PURE__ */ jsxs4("div", { className: "sterling-figure__inner", children: [
+        /* @__PURE__ */ jsxs4("header", { className: "sterling-figure__header", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "sterling-figure__topline", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "sterling-figure__labels", "aria-label": `${labelPrimary}, ${labelSecondary}`, children: [
+              /* @__PURE__ */ jsx3("span", { children: labelPrimary }),
+              /* @__PURE__ */ jsx3("span", { children: labelSecondary })
+            ] }),
+            /* @__PURE__ */ jsx3(SterlingFigureActions, { locale, title, dataExport: dataExport ?? inferredDataExport })
+          ] }),
+          /* @__PURE__ */ jsxs4("h3", { className: "sterling-figure__title", children: [
+            title,
+            titleMark === false ? null : resolvedTitleMarkHref ? /* @__PURE__ */ jsx3(
+              "a",
+              {
+                className: "sterling-figure__period",
+                href: resolvedTitleMarkHref,
+                "aria-label": editorial?.titleMarkLabel ?? (locale === "es" ? "Ir al inicio" : "Go home"),
+                children: titleMark
+              }
+            ) : /* @__PURE__ */ jsx3("span", { className: "sterling-figure__period", "aria-hidden": "true", children: titleMark })
+          ] }),
+          /* @__PURE__ */ jsxs4("p", { className: "sterling-figure__subtitle", children: [
+            subtitle,
+            legend?.length ? /* @__PURE__ */ jsx3(SterlingInlineLegend, { items: legend, locale }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "sterling-figure__chart", children }),
+        /* @__PURE__ */ jsxs4("figcaption", { className: "sterling-figure__caption", children: [
+          /* @__PURE__ */ jsxs4("span", { children: [
+            /* @__PURE__ */ jsxs4("span", { className: "sterling-figure__caption-label", children: [
+              resolvedSourceLabel,
+              ":"
+            ] }),
+            " ",
+            source
+          ] }),
+          resolvedSignature === false ? null : /* @__PURE__ */ jsx3("span", { className: "sterling-figure__signature", children: resolvedSignature })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/charts.tsx
+import { chord as d3Chord, ribbon as d3Ribbon } from "d3-chord";
+import { sankey as d3Sankey, sankeyLinkHorizontal } from "d3-sankey";
+import { arc as d3Arc } from "d3-shape";
+
+// src/plot.tsx
+import { scaleLinear, scaleTime } from "d3-scale";
+
+// src/visualStyle.ts
+var sterlingVisualStyle = {
+  stroke: {
+    grid: 1,
+    detail: 1.5,
+    candle: 1.75,
+    mark: 2,
+    series: 2.25,
+    emphasis: 2.5,
+    interval: 7,
+    halo: 3,
+    ring: 44,
+    flowMinimum: 1
+  },
+  opacity: {
+    ghost: 0.04,
+    contour: 0.08,
+    surface: 0.1,
+    area: 0.24,
+    ridge: 0.34,
+    interval: 0.28,
+    relationship: 0.42,
+    secondaryMark: 0.66,
+    guide: 0.7,
+    signal: 0.84,
+    mutedMark: 0.34
+  }
+};
+
+// src/plot.tsx
+import { jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
+var axisText = "var(--sterling-text)";
+var axisMuted = "var(--sterling-muted)";
+var axisGrid = "var(--sterling-grid)";
+var axisLine = "var(--sterling-edge)";
+var MONO = "var(--font-mono)";
+var TICK = 5;
+var TICK_LABEL = 11;
+var AXIS_TITLE = 12;
+var defaultMargin = { top: 26, right: 26, bottom: 56, left: 70 };
+function frame(width, height, margin = defaultMargin) {
+  return {
+    width,
+    height,
+    x0: margin.left,
+    x1: width - margin.right,
+    y0: margin.top,
+    y1: height - margin.bottom
+  };
+}
+function linearScale(values, range, { zero = false, padFraction = 0.05 } = {}) {
+  let min = Math.min(...values);
+  let max = Math.max(...values);
+  if (!Number.isFinite(min) || !Number.isFinite(max)) {
+    min = 0;
+    max = 1;
+  }
+  if (min === max) {
+    const bump = Math.abs(min) || 1;
+    min -= bump;
+    max += bump;
+  }
+  if (zero) {
+    min = Math.min(0, min);
+    max = Math.max(0, max);
+  } else {
+    const pad = (max - min) * padFraction;
+    min -= pad;
+    max += pad;
+  }
+  return scaleLinear().domain([min, max]).nice().range(range);
+}
+function timeScale(domain, range) {
+  return scaleTime().domain(domain).range(range).nice();
+}
+function tickValues(scale, count) {
+  return scale.ticks(count);
+}
+function Gridlines({
+  scale,
+  x0,
+  x1,
+  count = 5
+}) {
+  return /* @__PURE__ */ jsx4("g", { "aria-hidden": "true", children: tickValues(scale, count).map((value) => /* @__PURE__ */ jsx4("line", { x1: x0, x2: x1, y1: scale(value), y2: scale(value), stroke: axisGrid, strokeWidth: sterlingVisualStyle.stroke.grid }, value)) });
+}
+function AxisLeft({
+  scale,
+  x,
+  gridX1,
+  count = 5,
+  title,
+  format
+}) {
+  const values = tickValues(scale, count);
+  const fmt = format ?? ((value) => scale.tickFormat(count)(value));
+  const [yBottom, yTop] = scale.range();
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    gridX1 !== void 0 ? values.map((value) => /* @__PURE__ */ jsx4("line", { x1: x, x2: gridX1, y1: scale(value), y2: scale(value), stroke: axisGrid, strokeWidth: sterlingVisualStyle.stroke.grid }, `g${value}`)) : null,
+    /* @__PURE__ */ jsx4("line", { x1: x, x2: x, y1: yBottom, y2: yTop, stroke: axisLine }),
+    values.map((value) => /* @__PURE__ */ jsxs5("g", { children: [
+      /* @__PURE__ */ jsx4("line", { x1: x - TICK, x2: x, y1: scale(value), y2: scale(value), stroke: axisLine }),
+      /* @__PURE__ */ jsx4("text", { x: x - TICK - 4, y: scale(value) + 3.6, textAnchor: "end", fill: axisMuted, fontSize: TICK_LABEL, fontFamily: MONO, children: fmt(value) })
+    ] }, value)),
+    title ? /* @__PURE__ */ jsx4(
+      "text",
+      {
+        transform: `translate(${x - 48} ${(yBottom + yTop) / 2}) rotate(-90)`,
+        textAnchor: "middle",
+        fill: axisMuted,
+        fontSize: AXIS_TITLE,
+        fontFamily: MONO,
+        children: title
+      }
+    ) : null
+  ] });
+}
+function AxisBottom({
+  scale,
+  y,
+  count = 6,
+  title,
+  format,
+  titleGap = 42
+}) {
+  const values = tickValues(scale, count);
+  const fmt = format ?? ((value) => scale.tickFormat(count)(value));
+  const [x0, x1] = scale.range();
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    /* @__PURE__ */ jsx4("line", { x1: x0, x2: x1, y1: y, y2: y, stroke: axisLine }),
+    values.map((value) => /* @__PURE__ */ jsxs5("g", { children: [
+      /* @__PURE__ */ jsx4("line", { x1: scale(value), x2: scale(value), y1: y, y2: y + TICK, stroke: axisLine }),
+      /* @__PURE__ */ jsx4("text", { x: scale(value), y: y + TICK + 13, textAnchor: "middle", fill: axisMuted, fontSize: TICK_LABEL, fontFamily: MONO, children: fmt(value) })
+    ] }, value)),
+    title ? /* @__PURE__ */ jsx4("text", { x: (x0 + x1) / 2, y: y + titleGap, textAnchor: "middle", fill: axisMuted, fontSize: AXIS_TITLE, fontFamily: MONO, children: title }) : null
+  ] });
+}
+function TimeAxisBottom({
+  scale,
+  y,
+  title,
+  targetPx = 96,
+  titleGap = 42
+}) {
+  const [x0, x1] = scale.range();
+  const count = Math.max(2, Math.round((x1 - x0) / targetPx));
+  const values = scale.ticks(count);
+  const fmt = scale.tickFormat(count);
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    /* @__PURE__ */ jsx4("line", { x1: x0, x2: x1, y1: y, y2: y, stroke: axisLine }),
+    values.map((value) => /* @__PURE__ */ jsxs5("g", { children: [
+      /* @__PURE__ */ jsx4("line", { x1: scale(value), x2: scale(value), y1: y, y2: y + TICK, stroke: axisLine }),
+      /* @__PURE__ */ jsx4("text", { x: scale(value), y: y + TICK + 13, textAnchor: "middle", fill: axisMuted, fontSize: TICK_LABEL, fontFamily: MONO, children: fmt(value) })
+    ] }, +value)),
+    title ? /* @__PURE__ */ jsx4("text", { x: (x0 + x1) / 2, y: y + titleGap, textAnchor: "middle", fill: axisMuted, fontSize: AXIS_TITLE, fontFamily: MONO, children: title }) : null
+  ] });
+}
+function bandCenters(count, x0, x1) {
+  const step = (x1 - x0) / Math.max(count, 1);
+  const centers = Array.from({ length: count }, (_, index) => x0 + step * (index + 0.5));
+  return { centers, step };
+}
+function divergentSignedColor(value, maxAbs) {
+  const stops = sterlingDivergentColors.length - 1;
+  const t = Math.max(0, Math.min(1, (value + maxAbs) / (2 * maxAbs)));
+  return sterlingDivergentColors[Math.round((1 - t) * stops)];
+}
+var divergentSignedRamp = [...sterlingDivergentColors].reverse();
+function tukeySummary(values) {
+  const sorted = [...values].sort((left, right) => left - right);
+  const q = (p) => {
+    if (sorted.length === 0) return 0;
+    const position = (sorted.length - 1) * p;
+    const lower = Math.floor(position);
+    const upper = Math.ceil(position);
+    if (lower === upper) return sorted[lower];
+    return sorted[lower] + (sorted[upper] - sorted[lower]) * (position - lower);
+  };
+  const q1 = q(0.25);
+  const median = q(0.5);
+  const q3 = q(0.75);
+  const iqr = q3 - q1;
+  const lowerFence = q1 - 1.5 * iqr;
+  const upperFence = q3 + 1.5 * iqr;
+  const inside = sorted.filter((value) => value >= lowerFence && value <= upperFence);
+  const whiskerLow = inside.length ? inside[0] : q1;
+  const whiskerHigh = inside.length ? inside[inside.length - 1] : q3;
+  const outliers = sorted.filter((value) => value < lowerFence || value > upperFence);
+  return { q1, median, q3, iqr, whiskerLow, whiskerHigh, outliers, min: sorted[0], max: sorted[sorted.length - 1] };
+}
+
+// src/charts.tsx
+import { jsx as jsx5, jsxs as jsxs6 } from "react/jsx-runtime";
+var chartText = "var(--sterling-text)";
+var chartMuted = "var(--sterling-muted)";
+var chartGrid = "var(--sterling-grid)";
+function SterlingBarChart({
+  data,
+  ariaLabel,
+  unit = "",
+  xLabel
+}) {
+  const rowHeight = 46;
+  const top = 12;
+  const barHeight = 28;
+  const axisBottom = xLabel ? 50 : 34;
+  const x0 = 150;
+  const x1 = 684;
+  const height = top + data.length * rowHeight + axisBottom;
+  const baseline = top + data.length * rowHeight;
+  const x = linearScale(data.map((datum) => datum.value), [x0, x1], { zero: true });
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: `0 0 720 ${height}`, role: "img", "aria-label": ariaLabel, children: [
+    x.ticks(6).map((value) => /* @__PURE__ */ jsx5("line", { x1: x(value), x2: x(value), y1: top, y2: baseline, stroke: chartGrid, strokeWidth: sterlingVisualStyle.stroke.grid }, value)),
+    data.map((datum, index) => {
+      const y = top + index * rowHeight + (rowHeight - barHeight) / 2 - 6;
+      const width = x(datum.value) - x0;
+      return /* @__PURE__ */ jsxs6("g", { children: [
+        /* @__PURE__ */ jsx5("text", { x: x0 - 12, y: y + barHeight / 2 + 4, textAnchor: "end", fill: chartText, fontSize: "12", fontFamily: "var(--font-mono)", children: datum.label }),
+        /* @__PURE__ */ jsx5(
+          "rect",
+          {
+            x: x0,
+            y,
+            width: Math.max(width, 2),
+            height: barHeight,
+            rx: "3",
+            fill: sterlingChartColors[datum.colorIndex ?? index % sterlingChartColors.length],
+            children: /* @__PURE__ */ jsx5("title", { children: `${datum.label}: ${datum.value}${unit}` })
+          }
+        ),
+        /* @__PURE__ */ jsxs6("text", { x: x(datum.value) + 8, y: y + barHeight / 2 + 4, fill: chartMuted, fontSize: "12", fontFamily: "var(--font-mono)", children: [
+          datum.value,
+          unit
+        ] })
+      ] }, datum.label);
+    }),
+    /* @__PURE__ */ jsx5(AxisBottom, { scale: x, y: baseline, count: 6, title: xLabel, format: (value) => `${value}${unit}` })
+  ] });
+}
+function scatterMark(shape, x, y, color, key, title) {
+  if (shape % 3 === 1) {
+    return /* @__PURE__ */ jsx5("rect", { x: x - 4.5, y: y - 4.5, width: "9", height: "9", rx: "1", fill: color, children: /* @__PURE__ */ jsx5("title", { children: title }) }, key);
+  }
+  if (shape % 3 === 2) {
+    return /* @__PURE__ */ jsx5("path", { d: `M ${x} ${y - 5.5} L ${x + 5.2} ${y + 4.5} L ${x - 5.2} ${y + 4.5} Z`, fill: color, children: /* @__PURE__ */ jsx5("title", { children: title }) }, key);
+  }
+  return /* @__PURE__ */ jsx5("circle", { cx: x, cy: y, r: "4.8", fill: color, children: /* @__PURE__ */ jsx5("title", { children: title }) }, key);
+}
+function SterlingScatterPlot({
+  data,
+  ariaLabel,
+  xLabel,
+  yLabel,
+  showLegend = false,
+  zeroX = false,
+  zeroY = false
+}) {
+  const groups = [...new Set(data.map((datum) => datum.group))];
+  const f = frame(720, 380);
+  const x = linearScale(data.map((datum) => datum.x), [f.x0, f.x1], { zero: zeroX });
+  const y = linearScale(data.map((datum) => datum.y), [f.y1, f.y0], { zero: zeroY });
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: `0 0 ${f.width} ${f.height}`, role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx5(Gridlines, { scale: y, x0: f.x0, x1: f.x1, count: 5 }),
+    data.map((datum, index) => {
+      const groupIndex = groups.indexOf(datum.group);
+      return scatterMark(
+        groupIndex,
+        x(datum.x),
+        y(datum.y),
+        sterlingChartColors[groupIndex],
+        `${datum.group}-${index}`,
+        datum.label ?? `${datum.group}: ${datum.x}, ${datum.y}`
+      );
+    }),
+    /* @__PURE__ */ jsx5(AxisLeft, { scale: y, x: f.x0, count: 5, title: yLabel }),
+    /* @__PURE__ */ jsx5(AxisBottom, { scale: x, y: f.y1, count: 6, title: xLabel }),
+    showLegend ? groups.map((group, index) => /* @__PURE__ */ jsxs6("g", { transform: `translate(${f.x1 - 150 + index % 2 * 92} ${f.y0 + 2 + Math.floor(index / 2) * 20})`, children: [
+      scatterMark(index, 0, 0, sterlingChartColors[index], `legend-${group}`, group),
+      /* @__PURE__ */ jsx5("text", { x: "11", y: "4", fill: chartMuted, fontSize: "10.5", fontFamily: "var(--font-mono)", children: group })
+    ] }, group)) : null
+  ] });
+}
+function SterlingLineChart({
+  labels,
+  series,
+  ariaLabel,
+  yLabel,
+  xLabel,
+  times,
+  markers,
+  showLegend = false
+}) {
+  const f = frame(720, 380);
+  const values = series.flatMap((item) => item.values);
+  const y = linearScale(values, [f.y1, f.y0], { zero: true });
+  const isTime = Array.isArray(times) && times.length === labels.length && labels.length > 1;
+  const time = isTime ? timeScale([times[0], times[times.length - 1]], [f.x0, f.x1]) : null;
+  const xAt = (index) => time ? time(new Date(times[index])) : f.x0 + index / Math.max(labels.length - 1, 1) * (f.x1 - f.x0);
+  const showMarkers = markers ?? labels.length <= 40;
+  const labelStep = Math.max(1, Math.ceil(labels.length / 8));
+  const lastIndex = labels.length - 1;
+  const showCatTick = (index) => {
+    if (index === lastIndex) return true;
+    if (index % labelStep !== 0) return false;
+    return lastIndex - index >= labelStep * 0.55;
+  };
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: `0 0 ${f.width} ${f.height}`, role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx5(Gridlines, { scale: y, x0: f.x0, x1: f.x1, count: 5 }),
+    series.map((item, seriesIndex) => {
+      const path = item.values.map((value, index) => `${index === 0 ? "M" : "L"} ${xAt(index)} ${y(value)}`).join(" ");
+      return /* @__PURE__ */ jsxs6("g", { children: [
+        /* @__PURE__ */ jsx5("path", { d: path, fill: "none", stroke: sterlingChartColors[seriesIndex], strokeWidth: sterlingVisualStyle.stroke.series, strokeLinecap: "round", strokeLinejoin: "round" }),
+        showMarkers ? item.values.map((value, index) => /* @__PURE__ */ jsx5("circle", { cx: xAt(index), cy: y(value), r: "3.4", fill: sterlingChartColors[seriesIndex], children: /* @__PURE__ */ jsx5("title", { children: `${item.label}, ${labels[index]}: ${value}` }) }, index)) : null
+      ] }, item.label);
+    }),
+    /* @__PURE__ */ jsx5(AxisLeft, { scale: y, x: f.x0, count: 5, title: yLabel }),
+    time ? /* @__PURE__ */ jsx5(TimeAxisBottom, { scale: time, y: f.y1, title: xLabel }) : /* @__PURE__ */ jsxs6("g", { children: [
+      /* @__PURE__ */ jsx5("line", { x1: f.x0, x2: f.x1, y1: f.y1, y2: f.y1, stroke: "var(--sterling-edge)" }),
+      labels.map(
+        (label, index) => showCatTick(index) ? /* @__PURE__ */ jsxs6("g", { children: [
+          /* @__PURE__ */ jsx5("line", { x1: xAt(index), x2: xAt(index), y1: f.y1, y2: f.y1 + 5, stroke: "var(--sterling-edge)" }),
+          /* @__PURE__ */ jsx5("text", { x: xAt(index), y: f.y1 + 18, textAnchor: "middle", fill: chartMuted, fontSize: "11", fontFamily: "var(--font-mono)", children: label })
+        ] }, `${label}-${index}`) : null
+      ),
+      xLabel ? /* @__PURE__ */ jsx5("text", { x: (f.x0 + f.x1) / 2, y: f.y1 + 42, textAnchor: "middle", fill: chartMuted, fontSize: "12", fontFamily: "var(--font-mono)", children: xLabel }) : null
+    ] }),
+    showLegend ? series.map((item, index) => /* @__PURE__ */ jsxs6("g", { transform: `translate(${f.x0 + 28 + index * 176} ${f.y0 - 2})`, children: [
+      /* @__PURE__ */ jsx5("line", { x1: "0", x2: "22", stroke: sterlingChartColors[index], strokeWidth: sterlingVisualStyle.stroke.series }),
+      /* @__PURE__ */ jsx5("text", { x: "30", y: "4", fill: chartMuted, fontSize: "11", fontFamily: "var(--font-mono)", children: item.label })
+    ] }, item.label)) : null
+  ] });
+}
+function SterlingHeatmap({
+  values,
+  rowLabels,
+  columnLabels,
+  ariaLabel,
+  domain,
+  legendTitle,
+  showValues = false
+}) {
+  const flat = values.flat();
+  const maxAbs = domain ?? Math.max(1, Math.ceil(Math.max(...flat.map((value) => Math.abs(value))) * 10) / 10);
+  const width = 720;
+  const startX = 168;
+  const startY = 46;
+  const rightPad = 24;
+  const gridWidth = width - startX - rightPad;
+  const cellW = gridWidth / Math.max(columnLabels.length, 1);
+  const cellH = Math.min(cellW * 0.5, 46);
+  const gap = 3;
+  const gridHeight = cellH * rowLabels.length;
+  const height = startY + gridHeight + 60;
+  const legendWidth = Math.min(gridWidth, 340);
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": ariaLabel, children: [
+    columnLabels.map((label, index) => /* @__PURE__ */ jsx5("text", { x: startX + index * cellW + cellW / 2, y: startY - 12, textAnchor: "middle", fill: chartText, fontSize: "11", fontFamily: "var(--font-mono)", children: label }, label)),
+    rowLabels.map((label, row) => /* @__PURE__ */ jsxs6("g", { children: [
+      /* @__PURE__ */ jsx5("text", { x: startX - 12, y: startY + row * cellH + cellH / 2 + 4, textAnchor: "end", fill: chartText, fontSize: "11", fontFamily: "var(--font-mono)", children: label }),
+      columnLabels.map((column, columnIndex) => {
+        const value = values[row]?.[columnIndex] ?? 0;
+        return /* @__PURE__ */ jsxs6("g", { children: [
+          /* @__PURE__ */ jsx5(
+            "rect",
+            {
+              x: startX + columnIndex * cellW,
+              y: startY + row * cellH,
+              width: cellW - gap,
+              height: cellH - gap,
+              rx: "3",
+              fill: divergentSignedColor(value, maxAbs),
+              children: /* @__PURE__ */ jsx5("title", { children: `${label}, ${column}: ${value.toFixed(2)}` })
+            }
+          ),
+          showValues ? /* @__PURE__ */ jsx5(
+            "text",
+            {
+              x: startX + columnIndex * cellW + (cellW - gap) / 2,
+              y: startY + row * cellH + (cellH - gap) / 2 + 4,
+              textAnchor: "middle",
+              fill: Math.abs(value) > maxAbs * 0.55 ? "var(--sterling-surface)" : chartText,
+              fontSize: "10.5",
+              fontFamily: "var(--font-mono)",
+              children: value.toFixed(1)
+            }
+          ) : null
+        ] }, column);
+      })
+    ] }, label)),
+    legendTitle ? /* @__PURE__ */ jsx5("text", { x: startX, y: height - 38, fill: chartMuted, fontSize: "10.5", fontFamily: "var(--font-mono)", children: legendTitle }) : null,
+    divergentSignedRamp.map((color, index) => /* @__PURE__ */ jsx5("rect", { x: startX + index * legendWidth / divergentSignedRamp.length, y: height - 28, width: legendWidth / divergentSignedRamp.length + 0.5, height: "13", fill: color }, `${color}-${index}`)),
+    /* @__PURE__ */ jsx5("text", { x: startX, y: height - 5, fill: chartMuted, fontSize: "10", fontFamily: "var(--font-mono)", children: -maxAbs }),
+    /* @__PURE__ */ jsx5("text", { x: startX + legendWidth / 2, y: height - 5, textAnchor: "middle", fill: chartMuted, fontSize: "10", fontFamily: "var(--font-mono)", children: "0" }),
+    /* @__PURE__ */ jsx5("text", { x: startX + legendWidth, y: height - 5, textAnchor: "end", fill: chartMuted, fontSize: "10", fontFamily: "var(--font-mono)", children: `+${maxAbs}` })
+  ] });
+}
+function SterlingSequentialSurface({
+  values: suppliedValues,
+  ariaLabel,
+  lowLabel = "low / bajo",
+  highLabel = "high / alto"
+}) {
+  const defaultRows = 10;
+  const defaultColumns = 18;
+  const generatedValues = Array.from({ length: defaultRows }, (_, row) => Array.from({ length: defaultColumns }, (_2, column) => {
+    const x = column / (defaultColumns - 1);
+    const y = row / (defaultRows - 1);
+    const firstPeak = Math.exp(-(((x - 0.3) / 0.19) ** 2 + ((y - 0.34) / 0.25) ** 2));
+    const secondPeak = 0.76 * Math.exp(-(((x - 0.72) / 0.23) ** 2 + ((y - 0.67) / 0.2) ** 2));
+    const saddle = 0.22 * Math.sin(x * Math.PI * 2.4) * Math.cos(y * Math.PI * 1.7);
+    return firstPeak + secondPeak + saddle;
+  }));
+  const values = suppliedValues?.length && suppliedValues.some((row) => row.length) ? suppliedValues : generatedValues;
+  const rows = values.length;
+  const columns = Math.max(1, ...values.map((row) => row.length));
+  const flat = values.flat();
+  const min = Math.min(...flat);
+  const max = Math.max(...flat);
+  const cellWidth = 558 / columns;
+  const cellHeight = 240 / Math.max(rows, 1);
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: "0 0 720 340", role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx5("g", { transform: "translate(82 34)", children: values.flatMap((rowValues, row) => rowValues.map((value, column) => {
+      const index = Math.max(0, Math.min(sterlingHeatColors.length - 1, Math.round((value - min) / Math.max(max - min, 1) * (sterlingHeatColors.length - 1))));
+      return /* @__PURE__ */ jsx5("rect", { x: column * cellWidth, y: row * cellHeight, width: cellWidth + 0.35, height: cellHeight + 0.35, fill: sterlingHeatColors[index], children: /* @__PURE__ */ jsx5("title", { children: `x ${column + 1}, y ${row + 1}: ${value.toFixed(2)}` }) }, `${row}-${column}`);
+    })) }),
+    /* @__PURE__ */ jsx5("text", { x: "82", y: "302", fill: chartMuted, fontSize: "10", fontFamily: "var(--font-mono)", children: lowLabel }),
+    sterlingHeatColors.map((color, index) => /* @__PURE__ */ jsx5("rect", { x: 152 + index * 34, y: "289", width: "34", height: "15", fill: color }, color)),
+    /* @__PURE__ */ jsx5("text", { x: "540", y: "302", fill: chartMuted, fontSize: "10", fontFamily: "var(--font-mono)", children: highLabel })
+  ] });
+}
+function SterlingCorrelogram({
+  values,
+  labels,
+  ariaLabel
+}) {
+  const cell = 67;
+  const startX = 112;
+  const startY = 34;
+  const size = labels.length * cell;
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: `0 0 ${startX + size + 54} ${startY + size + 72}`, role: "img", "aria-label": ariaLabel, children: [
+    labels.flatMap((rowLabel, row) => labels.map((columnLabel, column) => {
+      const value = values[row]?.[column] ?? 0;
+      const color = divergentSignedColor(value, 1);
+      const centerX = startX + column * cell + cell / 2;
+      const centerY = startY + row * cell + cell / 2;
+      return /* @__PURE__ */ jsxs6("g", { children: [
+        /* @__PURE__ */ jsx5("rect", { x: startX + column * cell, y: startY + row * cell, width: cell, height: cell, fill: "none", stroke: chartGrid }),
+        row === column ? /* @__PURE__ */ jsx5("text", { x: centerX, y: centerY + 4, textAnchor: "middle", fill: chartText, fontSize: "10.5", fontFamily: "var(--font-mono)", children: rowLabel }) : row > column ? /* @__PURE__ */ jsx5(
+          "ellipse",
+          {
+            cx: centerX,
+            cy: centerY,
+            rx: "25",
+            ry: Math.max(2.5, 25 * (1 - Math.abs(value))),
+            transform: `rotate(${value >= 0 ? -45 : 45} ${centerX} ${centerY})`,
+            fill: color,
+            fillOpacity: sterlingVisualStyle.opacity.secondaryMark,
+            stroke: color,
+            children: /* @__PURE__ */ jsx5("title", { children: `${rowLabel}, ${columnLabel}: ${value.toFixed(2)}` })
+          }
+        ) : /* @__PURE__ */ jsx5("text", { x: centerX, y: centerY + 5, textAnchor: "middle", fill: Math.abs(value) >= 0.3 ? color : chartMuted, fontSize: "15", fontFamily: "var(--font-mono)", fontWeight: "700", children: value.toFixed(2) })
+      ] }, `${rowLabel}-${columnLabel}`);
+    })),
+    /* @__PURE__ */ jsx5("text", { x: startX, y: startY + size + 41, fill: chartMuted, fontSize: "10", fontFamily: "var(--font-mono)", children: "-1" }),
+    divergentSignedRamp.map((color, index) => /* @__PURE__ */ jsx5("rect", { x: startX + 28 + index * 27, y: startY + size + 27, width: "27", height: "16", fill: color }, `${color}-${index}`)),
+    /* @__PURE__ */ jsx5("text", { x: startX + 340, y: startY + size + 41, fill: chartMuted, fontSize: "10", fontFamily: "var(--font-mono)", children: "+1" })
+  ] });
+}
+function SterlingHistogram({
+  values,
+  bins = 16,
+  ariaLabel,
+  xLabel,
+  yLabel
+}) {
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const step = Math.max((max - min) / bins, Number.EPSILON);
+  const counts = Array.from({ length: bins }, () => 0);
+  values.forEach((value) => {
+    counts[Math.min(bins - 1, Math.floor((value - min) / step))] += 1;
+  });
+  const top = Math.max(...counts, 1);
+  const f = frame(720, 380);
+  const x = linearScale([min, max], [f.x0, f.x1]);
+  const y = linearScale([0, top], [f.y1, f.y0], { zero: true });
+  const barWidth = x(min + step) - x(min);
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: `0 0 ${f.width} ${f.height}`, role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx5(Gridlines, { scale: y, x0: f.x0, x1: f.x1, count: 5 }),
+    counts.map((count, index) => {
+      const lower = min + index * step;
+      const upper = lower + step;
+      return /* @__PURE__ */ jsx5(
+        "rect",
+        {
+          x: x(lower) + 1,
+          y: y(count),
+          width: Math.max(barWidth - 2, 1),
+          height: f.y1 - y(count),
+          fill: sterlingChartColors[0],
+          children: /* @__PURE__ */ jsx5("title", { children: `${lower.toFixed(1)}-${upper.toFixed(1)}: ${count}` })
+        },
+        index
+      );
+    }),
+    /* @__PURE__ */ jsx5(AxisLeft, { scale: y, x: f.x0, count: 5, title: yLabel, format: (value) => `${Math.round(value)}` }),
+    /* @__PURE__ */ jsx5(AxisBottom, { scale: x, y: f.y1, count: 7, title: xLabel })
+  ] });
+}
+function SterlingBoxPlot({ groups, ariaLabel, yLabel }) {
+  const all = groups.flatMap((group) => group.values);
+  const top = 24;
+  const rowH = 80;
+  const axisBottom = 48;
+  const height = top + groups.length * rowH + axisBottom;
+  const baseline = top + groups.length * rowH + 6;
+  const x0 = 168;
+  const x1 = 690;
+  const x = linearScale(all, [x0, x1]);
+  const boxHalf = 24;
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: `0 0 720 ${height}`, role: "img", "aria-label": ariaLabel, children: [
+    x.ticks(6).map((value) => /* @__PURE__ */ jsx5("line", { x1: x(value), x2: x(value), y1: top, y2: baseline, stroke: chartGrid, strokeWidth: sterlingVisualStyle.stroke.grid }, value)),
+    groups.map((group, index) => {
+      const summary = tukeySummary(group.values);
+      const center = top + index * rowH + rowH / 2 - 4;
+      const color = sterlingChartColors[index];
+      return /* @__PURE__ */ jsxs6("g", { children: [
+        /* @__PURE__ */ jsx5("text", { x: x0 - 12, y: center + 4, textAnchor: "end", fill: chartText, fontSize: "12", fontFamily: "var(--font-mono)", children: group.label }),
+        /* @__PURE__ */ jsx5("line", { x1: x(summary.whiskerLow), x2: x(summary.q1), y1: center, y2: center, stroke: color, strokeWidth: sterlingVisualStyle.stroke.mark }),
+        /* @__PURE__ */ jsx5("line", { x1: x(summary.q3), x2: x(summary.whiskerHigh), y1: center, y2: center, stroke: color, strokeWidth: sterlingVisualStyle.stroke.mark }),
+        /* @__PURE__ */ jsx5("line", { x1: x(summary.whiskerLow), x2: x(summary.whiskerLow), y1: center - 12, y2: center + 12, stroke: color, strokeWidth: sterlingVisualStyle.stroke.mark }),
+        /* @__PURE__ */ jsx5("line", { x1: x(summary.whiskerHigh), x2: x(summary.whiskerHigh), y1: center - 12, y2: center + 12, stroke: color, strokeWidth: sterlingVisualStyle.stroke.mark }),
+        /* @__PURE__ */ jsx5("rect", { x: x(summary.q1), y: center - boxHalf, width: Math.max(x(summary.q3) - x(summary.q1), 2), height: boxHalf * 2, rx: "3", fill: color, fillOpacity: sterlingVisualStyle.opacity.interval, stroke: color, strokeWidth: sterlingVisualStyle.stroke.mark, children: /* @__PURE__ */ jsx5("title", { children: `${group.label}: n=${group.values.length}, median ${summary.median.toFixed(2)}, IQR ${summary.q1.toFixed(2)}-${summary.q3.toFixed(2)}` }) }),
+        /* @__PURE__ */ jsx5("line", { x1: x(summary.median), x2: x(summary.median), y1: center - boxHalf, y2: center + boxHalf, stroke: color, strokeWidth: sterlingVisualStyle.stroke.emphasis }),
+        summary.outliers.map((value, outlierIndex) => /* @__PURE__ */ jsx5("circle", { cx: x(value), cy: center, r: "3.4", fill: "none", stroke: color, strokeWidth: sterlingVisualStyle.stroke.detail, children: /* @__PURE__ */ jsx5("title", { children: `${group.label} outlier: ${value.toFixed(2)}` }) }, outlierIndex))
+      ] }, group.label);
+    }),
+    /* @__PURE__ */ jsx5(AxisBottom, { scale: x, y: baseline, count: 6, title: yLabel })
+  ] });
+}
+function SterlingDumbbellChart({
+  data,
+  ariaLabel,
+  leftLabel,
+  rightLabel,
+  xLabel
+}) {
+  const top = 56;
+  const rowH = 66;
+  const axisBottom = xLabel ? 50 : 34;
+  const x0 = 150;
+  const x1 = 660;
+  const height = top + data.length * rowH + axisBottom;
+  const baseline = top + data.length * rowH;
+  const x = linearScale(data.flatMap((datum) => [datum.left, datum.right]), [x0, x1], { zero: true });
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: `0 0 720 ${height}`, role: "img", "aria-label": ariaLabel, children: [
+    x.ticks(6).map((value) => /* @__PURE__ */ jsx5("line", { x1: x(value), x2: x(value), y1: top - 20, y2: baseline, stroke: chartGrid, strokeWidth: sterlingVisualStyle.stroke.grid }, value)),
+    data.map((datum, index) => {
+      const y = top + index * rowH + rowH / 2 - 4;
+      return /* @__PURE__ */ jsxs6("g", { children: [
+        /* @__PURE__ */ jsx5("text", { x: x0 - 14, y: y + 4, textAnchor: "end", fill: chartText, fontSize: "12", fontFamily: "var(--font-mono)", children: datum.label }),
+        /* @__PURE__ */ jsx5("line", { x1: x(datum.left), x2: x(datum.right), y1: y, y2: y, stroke: chartGrid, strokeWidth: sterlingVisualStyle.stroke.series, strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx5("circle", { cx: x(datum.left), cy: y, r: "8", fill: sterlingChartColors[0], children: /* @__PURE__ */ jsx5("title", { children: `${datum.label}, ${leftLabel}: ${datum.left.toFixed(2)}` }) }),
+        /* @__PURE__ */ jsx5("circle", { cx: x(datum.right), cy: y, r: "8", fill: sterlingChartColors[3], children: /* @__PURE__ */ jsx5("title", { children: `${datum.label}, ${rightLabel}: ${datum.right.toFixed(2)}` }) })
+      ] }, datum.label);
+    }),
+    /* @__PURE__ */ jsx5(AxisBottom, { scale: x, y: baseline, count: 6, title: xLabel })
+  ] });
+}
+function kernelDensity(values, steps = 64, domain) {
+  const min = domain?.[0] ?? Math.min(...values);
+  const max = domain?.[1] ?? Math.max(...values);
+  const mean = values.reduce((sum, value) => sum + value, 0) / values.length;
+  const spread = Math.sqrt(values.reduce((sum, value) => sum + (value - mean) ** 2, 0) / Math.max(values.length - 1, 1));
+  const bandwidth = Math.max(1.06 * spread * values.length ** -0.2, (max - min) / 100, 1e-3);
+  return Array.from({ length: steps }, (_, index) => {
+    const value = min + index / (steps - 1) * (max - min);
+    const density = values.reduce((sum, observation) => {
+      const z = (value - observation) / bandwidth;
+      return sum + Math.exp(-0.5 * z * z) / Math.sqrt(2 * Math.PI);
+    }, 0) / (values.length * bandwidth);
+    return { value, density };
+  });
+}
+function SterlingDensityChart({ values, ariaLabel, xLabel, yLabel }) {
+  const density = kernelDensity(values);
+  const maxDensity = Math.max(...density.map((point) => point.density), Number.EPSILON);
+  const f = frame(720, 380);
+  const x = linearScale([density[0].value, density[density.length - 1].value], [f.x0, f.x1], { padFraction: 0 });
+  const y = linearScale([0, maxDensity], [f.y1, f.y0], { zero: true });
+  const line = density.map((point, index) => `${index === 0 ? "M" : "L"} ${x(point.value)} ${y(point.density)}`).join(" ");
+  const area = `${line} L ${x(density[density.length - 1].value)} ${f.y1} L ${x(density[0].value)} ${f.y1} Z`;
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: `0 0 ${f.width} ${f.height}`, role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx5(Gridlines, { scale: y, x0: f.x0, x1: f.x1, count: 5 }),
+    /* @__PURE__ */ jsx5("path", { d: area, fill: sterlingSequentialColors[4], fillOpacity: sterlingVisualStyle.opacity.area }),
+    /* @__PURE__ */ jsx5("path", { d: line, fill: "none", stroke: sterlingSequentialColors[7], strokeWidth: sterlingVisualStyle.stroke.series, strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx5(AxisLeft, { scale: y, x: f.x0, count: 5, title: yLabel }),
+    /* @__PURE__ */ jsx5(AxisBottom, { scale: x, y: f.y1, count: 7, title: xLabel })
+  ] });
+}
+function SterlingViolinPlot({ groups, ariaLabel, yLabel }) {
+  const all = groups.flatMap((group) => group.values);
+  const observedMin = Math.min(...all);
+  const observedMax = Math.max(...all);
+  const bandwidthOf = (values) => {
+    const mean = values.reduce((sum, value) => sum + value, 0) / values.length;
+    const spread = Math.sqrt(values.reduce((sum, value) => sum + (value - mean) ** 2, 0) / Math.max(values.length - 1, 1));
+    return Math.max(1.06 * spread * values.length ** -0.2, 1e-6);
+  };
+  const maxBandwidth = Math.max(...groups.map((group) => bandwidthOf(group.values)));
+  const margin = Math.max((observedMax - observedMin) * 0.05, maxBandwidth * 3);
+  const domain = [observedMin - margin, observedMax + margin];
+  const f = frame(720, 390, { top: 26, right: 26, bottom: 44, left: 70 });
+  const y = linearScale(domain, [f.y1, f.y0], { padFraction: 0 });
+  const { centers } = bandCenters(groups.length, f.x0, f.x1);
+  const halfWidth = Math.min(46, (f.x1 - f.x0) / groups.length * 0.42);
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: `0 0 ${f.width} ${f.height}`, role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx5(Gridlines, { scale: y, x0: f.x0, x1: f.x1, count: 5 }),
+    groups.map((group, groupIndex) => {
+      const estimate = kernelDensity(group.values, 96, domain);
+      const peak = Math.max(...estimate.map((point) => point.density), Number.EPSILON);
+      const cutoff = peak * 0.01;
+      const firstIndex = estimate.findIndex((point) => point.density >= cutoff);
+      const lastIndex = estimate.length - 1 - [...estimate].reverse().findIndex((point) => point.density >= cutoff);
+      const density = estimate.slice(Math.max(0, firstIndex - 1), Math.min(estimate.length - 1, lastIndex + 1) + 1);
+      const center = centers[groupIndex];
+      const right = density.map((point) => `${center + point.density / peak * halfWidth} ${y(point.value)}`);
+      const left = [...density].reverse().map((point) => `${center - point.density / peak * halfWidth} ${y(point.value)}`);
+      const path = `M ${right.join(" L ")} L ${left.join(" L ")} Z`;
+      const summary = tukeySummary(group.values);
+      const color = sterlingChartColors[groupIndex];
+      return /* @__PURE__ */ jsxs6("g", { children: [
+        /* @__PURE__ */ jsx5("path", { d: path, fill: color, fillOpacity: sterlingVisualStyle.opacity.area, stroke: color, strokeWidth: sterlingVisualStyle.stroke.series, children: /* @__PURE__ */ jsx5("title", { children: `${group.label}: n=${group.values.length}, median ${summary.median.toFixed(1)}, IQR ${summary.q1.toFixed(1)}-${summary.q3.toFixed(1)}` }) }),
+        /* @__PURE__ */ jsx5("line", { x1: center, x2: center, y1: y(summary.whiskerLow), y2: y(summary.whiskerHigh), stroke: color, strokeWidth: sterlingVisualStyle.stroke.detail }),
+        /* @__PURE__ */ jsx5("line", { x1: center - 5, x2: center + 5, y1: y(summary.whiskerLow), y2: y(summary.whiskerLow), stroke: color, strokeWidth: sterlingVisualStyle.stroke.detail }),
+        /* @__PURE__ */ jsx5("line", { x1: center - 5, x2: center + 5, y1: y(summary.whiskerHigh), y2: y(summary.whiskerHigh), stroke: color, strokeWidth: sterlingVisualStyle.stroke.detail }),
+        /* @__PURE__ */ jsx5("line", { x1: center, x2: center, y1: y(summary.q3), y2: y(summary.q1), stroke: color, strokeWidth: sterlingVisualStyle.stroke.interval, strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx5("circle", { cx: center, cy: y(summary.median), r: "4.5", fill: "var(--sterling-surface)", stroke: color, strokeWidth: sterlingVisualStyle.stroke.emphasis }),
+        summary.outliers.map((value, outlierIndex) => /* @__PURE__ */ jsx5("circle", { cx: center, cy: y(value), r: "3", fill: "none", stroke: color, strokeWidth: sterlingVisualStyle.stroke.detail, children: /* @__PURE__ */ jsx5("title", { children: `${group.label} outlier: ${value.toFixed(1)}` }) }, outlierIndex)),
+        /* @__PURE__ */ jsx5("text", { x: center, y: f.y1 + 18, textAnchor: "middle", fill: chartMuted, fontSize: "10.5", fontFamily: "var(--font-mono)", children: group.label })
+      ] }, group.label);
+    }),
+    /* @__PURE__ */ jsx5(AxisLeft, { scale: y, x: f.x0, count: 5, title: yLabel }),
+    /* @__PURE__ */ jsx5("line", { x1: f.x0, x2: f.x1, y1: f.y1, y2: f.y1, stroke: "var(--sterling-edge)" })
+  ] });
+}
+function SterlingDonutChart({ data, ariaLabel, centerLabel, centerValue }) {
+  const total = data.reduce((sum, datum) => sum + datum.value, 0);
+  const radius = 96;
+  const circumference = 2 * Math.PI * radius;
+  let offset = 0;
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: "0 0 720 350", role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx5("g", { transform: "translate(360 174) rotate(-90)", children: data.map((datum, index) => {
+      const length = datum.value / total * circumference;
+      const currentOffset = offset;
+      offset += length;
+      return /* @__PURE__ */ jsx5(
+        "circle",
+        {
+          cx: "0",
+          cy: "0",
+          r: radius,
+          fill: "none",
+          stroke: sterlingChartColors[index],
+          strokeWidth: sterlingVisualStyle.stroke.ring,
+          strokeDasharray: `${length} ${circumference - length}`,
+          strokeDashoffset: -currentOffset,
+          children: /* @__PURE__ */ jsx5("title", { children: `${datum.label}: ${datum.value} (${(datum.value / total * 100).toFixed(1)}%)` })
+        },
+        datum.label
+      );
+    }) }),
+    /* @__PURE__ */ jsx5("text", { x: "360", y: "171", textAnchor: "middle", fill: chartText, fontSize: "30", fontFamily: "var(--font-display)", fontWeight: "600", children: centerValue ?? total.toLocaleString() }),
+    /* @__PURE__ */ jsx5("text", { x: "360", y: "195", textAnchor: "middle", fill: chartMuted, fontSize: "11", fontFamily: "var(--font-mono)", children: centerLabel })
+  ] });
+}
+function SterlingLollipopChart({ data, ariaLabel, unit = "", xLabel }) {
+  const top = 30;
+  const rowH = 56;
+  const axisBottom = xLabel ? 50 : 34;
+  const x0 = 200;
+  const x1 = 660;
+  const height = top + data.length * rowH + axisBottom;
+  const baseline = top + data.length * rowH;
+  const x = linearScale(data.map((datum) => datum.value), [x0, x1], { zero: true });
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: `0 0 720 ${height}`, role: "img", "aria-label": ariaLabel, children: [
+    x.ticks(6).map((value) => /* @__PURE__ */ jsx5("line", { x1: x(value), x2: x(value), y1: top, y2: baseline, stroke: chartGrid, strokeWidth: sterlingVisualStyle.stroke.grid }, value)),
+    data.map((datum, index) => {
+      const y = top + index * rowH + rowH / 2 - 4;
+      const color = sterlingChartColors[index];
+      return /* @__PURE__ */ jsxs6("g", { children: [
+        /* @__PURE__ */ jsx5("text", { x: x0 - 14, y: y + 4, textAnchor: "end", fill: chartText, fontSize: "12", fontFamily: "var(--font-mono)", children: datum.label }),
+        /* @__PURE__ */ jsx5("line", { x1: x(0), x2: x(datum.value), y1: y, y2: y, stroke: color, strokeOpacity: sterlingVisualStyle.opacity.secondaryMark, strokeWidth: sterlingVisualStyle.stroke.series }),
+        /* @__PURE__ */ jsx5("circle", { cx: x(datum.value), cy: y, r: "8", fill: color, children: /* @__PURE__ */ jsx5("title", { children: `${datum.label}: ${datum.value}${unit}` }) }),
+        /* @__PURE__ */ jsxs6("text", { x: x(datum.value) + 15, y: y + 4, fill: chartMuted, fontSize: "11", fontFamily: "var(--font-mono)", children: [
+          datum.value,
+          unit
+        ] })
+      ] }, datum.label);
+    }),
+    /* @__PURE__ */ jsx5(AxisBottom, { scale: x, y: baseline, count: 6, title: xLabel, format: (value) => `${value}${unit}` })
+  ] });
+}
+function polarPoint(centerX, centerY, radius, angle) {
+  const radians = (angle - 90) * Math.PI / 180;
+  return { x: centerX + radius * Math.cos(radians), y: centerY + radius * Math.sin(radians) };
+}
+function pieArc(centerX, centerY, radius, startAngle, endAngle) {
+  const start = polarPoint(centerX, centerY, radius, endAngle);
+  const end = polarPoint(centerX, centerY, radius, startAngle);
+  return `M ${centerX} ${centerY} L ${start.x} ${start.y} A ${radius} ${radius} 0 ${endAngle - startAngle > 180 ? 1 : 0} 0 ${end.x} ${end.y} Z`;
+}
+function SterlingPieChart({ data, ariaLabel }) {
+  const total = data.reduce((sum, datum) => sum + datum.value, 0);
+  let angle = 0;
+  return /* @__PURE__ */ jsx5("svg", { className: "sterling-chart", viewBox: "0 0 720 390", role: "img", "aria-label": ariaLabel, children: data.map((datum, index) => {
+    const start = angle;
+    const end = angle + datum.value / total * 360;
+    angle = end;
+    return /* @__PURE__ */ jsx5("path", { d: pieArc(360, 194, 138, start, end), fill: sterlingChartColors[index], stroke: "var(--sterling-surface)", strokeWidth: sterlingVisualStyle.stroke.mark, children: /* @__PURE__ */ jsx5("title", { children: `${datum.label}: ${datum.value.toLocaleString()} (${(datum.value / total * 100).toFixed(1)}%)` }) }, datum.label);
+  }) });
+}
+function SterlingChordChart({
+  rowLabels,
+  columnLabels,
+  values,
+  ariaLabel
+}) {
+  const labels = [...rowLabels, ...columnLabels];
+  const matrix = Array.from({ length: labels.length }, () => Array(labels.length).fill(0));
+  values.forEach((row, rowIndex) => row.forEach((value, columnIndex) => {
+    matrix[rowIndex][rowLabels.length + columnIndex] = value;
+    matrix[rowLabels.length + columnIndex][rowIndex] = value;
+  }));
+  const chords = d3Chord().padAngle(0.055).sortSubgroups((left, right) => right - left)(matrix);
+  const arcPath = d3Arc().innerRadius(126).outerRadius(145).cornerRadius(3).startAngle((group) => group.startAngle).endAngle((group) => group.endAngle);
+  const ribbonPath = d3Ribbon().radius(122);
+  return /* @__PURE__ */ jsx5("svg", { className: "sterling-chart", viewBox: "0 0 720 420", role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxs6("g", { transform: "translate(360 204)", children: [
+    chords.map((item, index) => /* @__PURE__ */ jsx5("path", { d: ribbonPath(item) ?? void 0, fill: sterlingChartColors[item.source.index], fillOpacity: sterlingVisualStyle.opacity.relationship, children: /* @__PURE__ */ jsx5("title", { children: `${labels[item.source.index]} + ${labels[item.target.index]}: ${item.source.value}` }) }, `${item.source.index}-${item.target.index}-${index}`)),
+    chords.groups.map((group) => /* @__PURE__ */ jsx5("path", { d: arcPath(group) ?? void 0, fill: sterlingChartColors[group.index], stroke: "var(--sterling-surface)", strokeWidth: sterlingVisualStyle.stroke.mark }, group.index)),
+    chords.groups.map((group) => {
+      const angle = (group.startAngle + group.endAngle) / 2;
+      const x = Math.sin(angle) * 170;
+      const y = -Math.cos(angle) * 170;
+      return /* @__PURE__ */ jsx5("text", { x, y: y + 4, textAnchor: x < -8 ? "end" : x > 8 ? "start" : "middle", fill: chartText, fontSize: "10", fontFamily: "var(--font-mono)", children: labels[group.index] }, `label-${group.index}`);
+    })
+  ] }) });
+}
+function SterlingSankeyChart({ links, ariaLabel }) {
+  const sources = [...new Set(links.map((link) => link.source))];
+  const targets = [...new Set(links.map((link) => link.target))];
+  const labels = [...sources, ...targets];
+  const graph = d3Sankey().nodeWidth(14).nodePadding(12).extent([[112, 36], [608, 360]])({
+    nodes: labels.map((name, index) => ({ name, colorIndex: index })),
+    links: links.map((link) => ({
+      source: labels.indexOf(link.source),
+      target: labels.indexOf(link.target),
+      value: link.value,
+      sourceName: link.source,
+      targetName: link.target,
+      colorIndex: sources.indexOf(link.source)
+    }))
+  });
+  const linkPath = sankeyLinkHorizontal();
+  return /* @__PURE__ */ jsxs6("svg", { className: "sterling-chart", viewBox: "0 0 720 420", role: "img", "aria-label": ariaLabel, children: [
+    graph.links.map((link, index) => /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: linkPath(link) ?? void 0,
+        fill: "none",
+        stroke: sterlingChartColors[link.colorIndex],
+        strokeOpacity: sterlingVisualStyle.opacity.relationship,
+        strokeWidth: Math.max(sterlingVisualStyle.stroke.flowMinimum, link.width ?? sterlingVisualStyle.stroke.flowMinimum),
+        children: /* @__PURE__ */ jsx5("title", { children: `${link.sourceName} \u2192 ${link.targetName}: ${link.value}` })
+      },
+      `${link.sourceName}-${link.targetName}-${index}`
+    )),
+    graph.nodes.map((node) => {
+      const x0 = node.x0 ?? 0;
+      const x1 = node.x1 ?? x0;
+      const y0 = node.y0 ?? 0;
+      const y1 = node.y1 ?? y0;
+      const sourceSide = (node.depth ?? 0) === 0;
+      return /* @__PURE__ */ jsxs6("g", { children: [
+        /* @__PURE__ */ jsx5("rect", { x: x0, y: y0, width: Math.max(1, x1 - x0), height: Math.max(1, y1 - y0), rx: "2", fill: sterlingChartColors[node.colorIndex] }),
+        /* @__PURE__ */ jsx5("text", { x: sourceSide ? x0 - 10 : x1 + 10, y: (y0 + y1) / 2 + 4, textAnchor: sourceSide ? "end" : "start", fill: chartText, fontSize: "11", fontFamily: "var(--font-mono)", children: node.name })
+      ] }, node.name);
+    })
+  ] });
+}
+
+// src/canonicalCharts.tsx
+import { geoAlbersUsa, geoPath } from "d3-geo";
+import { hierarchy, treemap, treemapSquarify } from "d3-hierarchy";
+import { feature } from "topojson-client";
+import { jsx as jsx6, jsxs as jsxs7 } from "react/jsx-runtime";
+var muted = "var(--sterling-muted)";
+var grid = "var(--sterling-grid)";
+var surface = "var(--sterling-surface)";
+var text = "var(--sterling-text)";
+function SterlingVerticalBarChart({ data, ariaLabel, yLabel, xLabel }) {
+  const f = frame(720, 380, { top: 26, right: 26, bottom: 56, left: 70 });
+  const y = linearScale([0, Math.max(...data.map(([, value]) => value), 1)], [f.y1, f.y0], { zero: true });
+  const { centers, step } = bandCenters(data.length, f.x0, f.x1);
+  const width = Math.min(70, step * 0.62);
+  return /* @__PURE__ */ jsxs7("svg", { className: "sterling-chart", viewBox: `0 0 ${f.width} ${f.height}`, role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx6(Gridlines, { scale: y, x0: f.x0, x1: f.x1, count: 5 }),
+    data.map(([label, value], index) => {
+      const cx = centers[index];
+      return /* @__PURE__ */ jsxs7("g", { children: [
+        /* @__PURE__ */ jsx6("rect", { x: cx - width / 2, y: y(value), width, height: f.y1 - y(value), rx: "6", fill: sterlingChartColors[index], children: /* @__PURE__ */ jsx6("title", { children: `${label}: ${value.toFixed(1)}` }) }),
+        /* @__PURE__ */ jsx6("text", { x: cx, y: y(value) - 8, textAnchor: "middle", fill: muted, fontSize: "11", fontFamily: "var(--font-mono)", children: value.toFixed(1) }),
+        /* @__PURE__ */ jsx6("text", { x: cx, y: f.y1 + 18, textAnchor: "middle", fill: text, fontSize: "12", fontFamily: "var(--font-mono)", children: label })
+      ] }, label);
+    }),
+    /* @__PURE__ */ jsx6(AxisLeft, { scale: y, x: f.x0, count: 5, title: yLabel }),
+    /* @__PURE__ */ jsx6("line", { x1: f.x0, x2: f.x1, y1: f.y1, y2: f.y1, stroke: "var(--sterling-edge)" }),
+    xLabel ? /* @__PURE__ */ jsx6("text", { x: (f.x0 + f.x1) / 2, y: f.y1 + 42, textAnchor: "middle", fill: muted, fontSize: "12", fontFamily: "var(--font-mono)", children: xLabel }) : null
+  ] });
+}
+function SterlingCandlestickChart({ rows, ariaLabel, yLabel, xLabel }) {
+  const values = rows.flatMap(([, open, high, low, close]) => [open, high, low, close]);
+  const f = frame(720, 380, { top: 26, right: 26, bottom: 56, left: 70 });
+  const y = linearScale(values, [f.y1, f.y0], { padFraction: 0.06 });
+  const { centers, step } = bandCenters(rows.length, f.x0, f.x1);
+  const bodyWidth = Math.min(15, step * 0.62);
+  const rising = sterlingDivergentColors[2];
+  const falling = sterlingDivergentColors[8];
+  const labelStep = Math.max(1, Math.ceil(rows.length / 8));
+  const lastIndex = rows.length - 1;
+  const showDate = (index) => index === lastIndex || index % labelStep === 0 && lastIndex - index >= labelStep * 0.55;
+  return /* @__PURE__ */ jsxs7("svg", { className: "sterling-chart", viewBox: `0 0 ${f.width} ${f.height}`, role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx6(Gridlines, { scale: y, x0: f.x0, x1: f.x1, count: 5 }),
+    rows.map(([date, open, high, low, close], index) => {
+      const x = centers[index];
+      const up = close >= open;
+      const color = up ? rising : falling;
+      const top = y(Math.max(open, close));
+      const bottom = y(Math.min(open, close));
+      return /* @__PURE__ */ jsxs7("g", { children: [
+        /* @__PURE__ */ jsx6("title", { children: `${date}: open ${open}, high ${high}, low ${low}, close ${close}` }),
+        /* @__PURE__ */ jsx6("line", { x1: x, x2: x, y1: y(high), y2: y(low), stroke: color, strokeWidth: sterlingVisualStyle.stroke.candle }),
+        /* @__PURE__ */ jsx6("rect", { x: x - bodyWidth / 2, y: top, width: bodyWidth, height: Math.max(2, bottom - top), rx: "1.5", fill: up ? color : surface, stroke: color, strokeWidth: sterlingVisualStyle.stroke.candle }),
+        showDate(index) ? /* @__PURE__ */ jsx6("text", { x, y: f.y1 + 18, textAnchor: "middle", fill: muted, fontSize: "10", fontFamily: "var(--font-mono)", children: date }) : null
+      ] }, date);
+    }),
+    /* @__PURE__ */ jsx6(AxisLeft, { scale: y, x: f.x0, count: 5, title: yLabel, format: (value) => value.toFixed(0) }),
+    /* @__PURE__ */ jsx6("line", { x1: f.x0, x2: f.x1, y1: f.y1, y2: f.y1, stroke: "var(--sterling-edge)" }),
+    xLabel ? /* @__PURE__ */ jsx6("text", { x: (f.x0 + f.x1) / 2, y: f.y1 + 42, textAnchor: "middle", fill: muted, fontSize: "12", fontFamily: "var(--font-mono)", children: xLabel }) : null
+  ] });
+}
+function polar(cx, cy, radius, index, count) {
+  const angle = -Math.PI / 2 + index * Math.PI * 2 / count;
+  return [cx + Math.cos(angle) * radius, cy + Math.sin(angle) * radius];
+}
+function SterlingRadarChart({ labels, series, domain, ariaLabel, unit = "" }) {
+  const cx = 360, cy = 196, radius = 130;
+  const scale = (value) => (value - domain[0]) / Math.max(domain[1] - domain[0], 1) * radius;
+  const levels = [0.2, 0.4, 0.6, 0.8, 1];
+  const ringValue = (level) => domain[0] + level * (domain[1] - domain[0]);
+  const format = (value) => `${Number.isInteger(value) ? value : value.toFixed(1)}${unit}`;
+  return /* @__PURE__ */ jsxs7("svg", { className: "sterling-chart", viewBox: "0 0 720 390", role: "img", "aria-label": ariaLabel, children: [
+    levels.map((level) => /* @__PURE__ */ jsx6("polygon", { points: labels.map((_, index) => polar(cx, cy, radius * level, index, labels.length).join(",")).join(" "), fill: "none", stroke: grid }, level)),
+    labels.map((label, index) => {
+      const [x, y] = polar(cx, cy, radius, index, labels.length);
+      const [lx, ly] = polar(cx, cy, radius + 24, index, labels.length);
+      return /* @__PURE__ */ jsxs7("g", { children: [
+        /* @__PURE__ */ jsx6("line", { x1: cx, y1: cy, x2: x, y2: y, stroke: grid }),
+        /* @__PURE__ */ jsx6("text", { x: lx, y: ly + 4, textAnchor: "middle", fill: muted, fontSize: "10", fontFamily: "var(--font-mono)", children: label })
+      ] }, label);
+    }),
+    series.map(([name, ...values], index) => {
+      const color = sterlingSequentialColors[Math.min(9, index + 2)];
+      const latest = index === series.length - 1;
+      return /* @__PURE__ */ jsx6("polygon", { points: values.map((value, axis) => polar(cx, cy, scale(value), axis, labels.length).join(",")).join(" "), fill: latest ? color : "none", fillOpacity: sterlingVisualStyle.opacity.surface, stroke: color, strokeWidth: sterlingVisualStyle.stroke.detail, strokeOpacity: latest ? 1 : sterlingVisualStyle.opacity.guide, children: /* @__PURE__ */ jsx6("title", { children: `${name}: ${values.join(", ")}` }) }, name);
+    }),
+    [0, ...levels].map((level) => /* @__PURE__ */ jsx6(
+      "text",
+      {
+        x: cx + 6,
+        y: cy - radius * level + 3,
+        fill: muted,
+        fontSize: "9",
+        fontFamily: "var(--font-mono)",
+        stroke: surface,
+        strokeWidth: sterlingVisualStyle.stroke.halo,
+        paintOrder: "stroke",
+        children: format(ringValue(level))
+      },
+      `r-${level}`
+    ))
+  ] });
+}
+function SterlingRidgelineChart({ groups, ariaLabel, xLabel, unit = "" }) {
+  const all = groups.flatMap((group) => group.values);
+  const observedMin = Math.min(...all);
+  const observedMax = Math.max(...all);
+  const margin = (observedMax - observedMin) * 0.08;
+  const domain = [observedMin - margin, observedMax + margin];
+  const x0 = 118, x1 = 664;
+  const baseline = 338;
+  const rowStep = (baseline - 60) / Math.max(groups.length, 1);
+  const amplitude = rowStep * 1.9;
+  const x = linearScale(domain, [x0, x1], { padFraction: 0 });
+  const peak = Math.max(
+    ...groups.map((group) => Math.max(...kernelDensity(group.values, 96, domain).map((point) => point.density))),
+    Number.EPSILON
+  );
+  return /* @__PURE__ */ jsxs7("svg", { className: "sterling-chart", viewBox: "0 0 720 390", role: "img", "aria-label": ariaLabel, children: [
+    x.ticks(6).map((value) => /* @__PURE__ */ jsx6("line", { x1: x(value), x2: x(value), y1: 26, y2: baseline, stroke: grid, strokeWidth: sterlingVisualStyle.stroke.grid }, value)),
+    groups.map((source, index) => {
+      const base = 60 + index * rowStep;
+      const density = kernelDensity(source.values, 96, domain);
+      const points = density.map((point) => `${x(point.value)} ${base - point.density / peak * amplitude}`);
+      const color = sterlingChartColors[index % sterlingChartColors.length];
+      return /* @__PURE__ */ jsxs7("g", { children: [
+        /* @__PURE__ */ jsx6("text", { x: x0 - 12, y: base + 3, textAnchor: "end", fill: text, fontSize: "10", fontFamily: "var(--font-mono)", children: source.label }),
+        /* @__PURE__ */ jsx6("path", { d: `M ${x(domain[0])} ${base} L ${points.join(" L ")} L ${x(domain[1])} ${base} Z`, fill: color, fillOpacity: sterlingVisualStyle.opacity.ridge, stroke: color, strokeWidth: sterlingVisualStyle.stroke.series, strokeLinejoin: "round" })
+      ] }, source.label);
+    }),
+    /* @__PURE__ */ jsx6(AxisBottom, { scale: x, y: baseline, count: 6, title: xLabel, format: (value) => `${value}${unit}` })
+  ] });
+}
+function SterlingDensity2DChart({ points, regionLabels, ariaLabel, xLabel, yLabel }) {
+  const f = frame(720, 380, { top: 26, right: 26, bottom: 56, left: 74 });
+  const x = linearScale(points.map((point) => point[0]), [f.x0, f.x1]);
+  const y = linearScale(points.map((point) => point[1]), [f.y1, f.y0]);
+  const pxX = Math.abs(x(1e3) - x(0)) / 1e3;
+  const pxY = Math.abs(y(1) - y(0));
+  const specs = [[4570, 71.26, 559, 0.74, 0.36], [4012, 69.71, 605, 1.02, 0.46], [4611, 71.77, 283, 1.04, -0.03], [4703, 71.23, 664, 1.35, -0.29]];
+  return /* @__PURE__ */ jsxs7("svg", { className: "sterling-chart", viewBox: `0 0 ${f.width} ${f.height}`, role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx6(Gridlines, { scale: y, x0: f.x0, x1: f.x1, count: 5 }),
+    specs.flatMap(([meanX, meanY, sdX, sdY, correlation2], index) => [1, 0.68, 0.38].map((level) => /* @__PURE__ */ jsx6("ellipse", { cx: x(meanX), cy: y(meanY), rx: sdX * pxX * 1.7 * level, ry: sdY * pxY * 1.7 * level, transform: `rotate(${-correlation2 * 35} ${x(meanX)} ${y(meanY)})`, fill: sterlingChartColors[index], fillOpacity: sterlingVisualStyle.opacity.contour, stroke: sterlingChartColors[index], strokeWidth: sterlingVisualStyle.stroke.detail }, `${index}-${level}`))),
+    points.map(([income, life, group], index) => /* @__PURE__ */ jsx6("circle", { cx: x(income), cy: y(life), r: "4", fill: sterlingChartColors[group], fillOpacity: sterlingVisualStyle.opacity.secondaryMark, children: /* @__PURE__ */ jsx6("title", { children: `${regionLabels[group]}: ${income}, ${life}` }) }, index)),
+    /* @__PURE__ */ jsx6(AxisLeft, { scale: y, x: f.x0, count: 5, title: yLabel }),
+    /* @__PURE__ */ jsx6(AxisBottom, { scale: x, y: f.y1, count: 6, title: xLabel, format: (value) => `${(value / 1e3).toFixed(1)}k` })
+  ] });
+}
+function SterlingTreemapChart({ rows, ariaLabel }) {
+  const continents = [...new Set(rows.map(([continent]) => continent))];
+  const rootData = {
+    name: "world",
+    children: continents.map((continent) => ({
+      name: continent,
+      continent,
+      children: rows.filter(([name]) => name === continent).map(([, , country, value]) => ({ name: country, continent, value }))
+    }))
+  };
+  const rankByCountry = /* @__PURE__ */ new Map();
+  continents.forEach((continent) => {
+    const list = rows.filter(([name]) => name === continent).sort((left, right) => right[3] - left[3]);
+    list.forEach(([, , country], index) => rankByCountry.set(country, { rank: index, total: list.length }));
+  });
+  const stopFor = (country) => {
+    const entry = rankByCountry.get(country);
+    if (!entry || entry.total < 2) return sterlingRampStops;
+    return Math.round(sterlingRampStops - entry.rank * (sterlingRampStops - 1) / (entry.total - 1));
+  };
+  const treeRoot = hierarchy(rootData).sum((datum) => datum.value ?? 0).sort((left, right) => (right.value ?? 0) - (left.value ?? 0));
+  const root = treemap().tile(treemapSquarify).size([680, 330]).paddingInner(3).paddingOuter(4).paddingTop((node) => node.depth === 1 ? 21 : 0).round(true)(treeRoot);
+  return /* @__PURE__ */ jsx6("svg", { className: "sterling-chart", viewBox: "0 0 720 370", role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxs7("g", { transform: "translate(20 20)", children: [
+    root.descendants().filter((node) => node.depth === 1).map((node) => {
+      const color = sterlingChartColors[continents.indexOf(node.data.name)];
+      return /* @__PURE__ */ jsxs7("g", { children: [
+        /* @__PURE__ */ jsx6("rect", { x: node.x0, y: node.y0, width: node.x1 - node.x0, height: node.y1 - node.y0, rx: "3", fill: "none", stroke: color, strokeWidth: sterlingVisualStyle.stroke.detail }),
+        /* @__PURE__ */ jsx6("text", { x: node.x0 + 6, y: node.y0 + 13, fill: color, fontSize: "9", fontFamily: "var(--font-mono)", fontWeight: "700", children: node.data.name })
+      ] }, `group-${node.data.name}`);
+    }),
+    root.leaves().map((leaf) => {
+      const continent = leaf.data.continent ?? "";
+      const width = leaf.x1 - leaf.x0;
+      const height = leaf.y1 - leaf.y0;
+      const fontSize = width > 120 ? 10 : 8;
+      const stop = stopFor(leaf.data.name);
+      const fits = width > leaf.data.name.length * fontSize * 0.62 + 10 && height > fontSize * 2.4;
+      return /* @__PURE__ */ jsxs7("g", { children: [
+        /* @__PURE__ */ jsx6("rect", { x: leaf.x0, y: leaf.y0, width, height, rx: "2", fill: sterlingRamp(continents.indexOf(continent), stop), children: /* @__PURE__ */ jsx6("title", { children: `${leaf.data.name}: ${(leaf.value ?? 0).toLocaleString()}` }) }),
+        fits ? /* @__PURE__ */ jsx6("text", { x: leaf.x0 + 6, y: leaf.y0 + fontSize + 5, fill: stop > sterlingRampStops / 2 ? surface : text, fontSize, fontFamily: "var(--font-mono)", children: leaf.data.name }) : null
+      ] }, leaf.data.name);
+    })
+  ] }) });
+}
+function SterlingNetworkChart({ nodes, edges, ariaLabel }) {
+  return /* @__PURE__ */ jsxs7("svg", { className: "sterling-chart", viewBox: "0 0 560 300", role: "img", "aria-label": ariaLabel, children: [
+    edges.map(([source, target], index) => /* @__PURE__ */ jsx6("line", { x1: nodes[source][1] + 42, y1: nodes[source][2], x2: nodes[target][1] + 42, y2: nodes[target][2], stroke: grid, strokeWidth: sterlingVisualStyle.stroke.detail }, index)),
+    nodes.map(([name, x, y, degree, community]) => {
+      const radius = 5 + (degree - 10) * 0.45;
+      return /* @__PURE__ */ jsxs7("g", { children: [
+        /* @__PURE__ */ jsx6("circle", { cx: x + 42, cy: y, r: radius, fill: sterlingChartColors[community], stroke: surface, strokeWidth: sterlingVisualStyle.stroke.mark, children: /* @__PURE__ */ jsx6("title", { children: `${name}: ${degree}` }) }),
+        degree >= 19 || name === "Y Holtz" ? /* @__PURE__ */ jsx6("text", { x: x + 42, y: y - radius - 7, textAnchor: "middle", fill: muted, fontSize: "7.5", fontFamily: "var(--font-mono)", children: name }) : null
+      ] }, name);
+    })
+  ] });
+}
+function SterlingDendrogramChart({ labels, merge, height, order, groups, ariaLabel, yLabel, cutLabel }) {
+  const leafY = 270, maximum = Math.max(...height), axisX = 78, step = (666 - axisX - 24) / (order.length - 1);
+  const leafX = new Map(order.map((leaf, position) => [leaf, axisX + 12 + position * step]));
+  const groupByLeaf = /* @__PURE__ */ new Map();
+  groups.forEach((members, group) => members.forEach((leaf) => groupByLeaf.set(leaf, group)));
+  const dist = linearScale([0, maximum], [leafY, leafY - 206], { zero: true });
+  const clusters = [];
+  const child = (reference) => reference < 0 ? { x: leafX.get(-reference) ?? axisX, y: leafY, members: [-reference], group: groupByLeaf.get(-reference) ?? null } : clusters[reference - 1];
+  const branches = merge.map(([leftRef, rightRef], index) => {
+    const left = child(leftRef), right = child(rightRef), nodeY = dist(height[index]), members = [...left.members, ...right.members], memberships = [...new Set(members.map((leaf) => groupByLeaf.get(leaf)))], group = memberships.length === 1 ? memberships[0] ?? null : null;
+    clusters.push({ x: (left.x + right.x) / 2, y: nodeY, members, group });
+    return { left, right, y: nodeY, group };
+  });
+  const cut = 0.388, cutY = dist(cut);
+  return /* @__PURE__ */ jsxs7("svg", { className: "sterling-chart", viewBox: "0 0 720 390", role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx6(AxisLeft, { scale: dist, x: axisX, gridX1: 666, count: 5, title: yLabel }),
+    /* @__PURE__ */ jsx6("line", { x1: axisX, x2: "666", y1: cutY, y2: cutY, stroke: muted, strokeDasharray: "5 5" }),
+    cutLabel ? /* @__PURE__ */ jsx6("text", { x: "666", y: cutY - 6, textAnchor: "end", fill: muted, fontSize: "9", fontFamily: "var(--font-mono)", children: `${cutLabel} ${cut}` }) : null,
+    groups.map((members, index) => {
+      const positions = members.map((leaf) => leafX.get(leaf) ?? 0);
+      const x0 = Math.min(...positions) - 9, x1 = Math.max(...positions) + 9;
+      return /* @__PURE__ */ jsx6("rect", { x: x0, y: cutY, width: x1 - x0, height: leafY - cutY + 50, rx: "6", fill: sterlingChartColors[index], fillOpacity: sterlingVisualStyle.opacity.ghost, stroke: sterlingChartColors[index], strokeWidth: sterlingVisualStyle.stroke.detail }, index);
+    }),
+    branches.map(({ left, right, y, group }, index) => /* @__PURE__ */ jsxs7("g", { children: [
+      /* @__PURE__ */ jsx6("path", { d: `M ${left.x} ${left.y} V ${y}`, stroke: left.group === null ? muted : sterlingChartColors[left.group], fill: "none", strokeWidth: sterlingVisualStyle.stroke.detail }),
+      /* @__PURE__ */ jsx6("path", { d: `M ${right.x} ${right.y} V ${y}`, stroke: right.group === null ? muted : sterlingChartColors[right.group], fill: "none", strokeWidth: sterlingVisualStyle.stroke.detail }),
+      /* @__PURE__ */ jsx6("path", { d: `M ${left.x} ${y} H ${right.x}`, stroke: group === null ? muted : sterlingChartColors[group], fill: "none", strokeWidth: sterlingVisualStyle.stroke.detail })
+    ] }, index)),
+    order.map((leaf) => {
+      const x = leafX.get(leaf) ?? 0, group = groupByLeaf.get(leaf) ?? 0;
+      return /* @__PURE__ */ jsxs7("g", { children: [
+        /* @__PURE__ */ jsx6("circle", { cx: x, cy: leafY, r: "3.5", fill: sterlingChartColors[group] }),
+        /* @__PURE__ */ jsx6("text", { x: x + 3, y: leafY + 12, transform: `rotate(50 ${x + 3} ${leafY + 12})`, fill: muted, fontSize: "7.5", fontFamily: "var(--font-mono)", children: labels[leaf - 1] })
+      ] }, leaf);
+    })
+  ] });
+}
+function SterlingVolcanoChart({ hex, labels, ariaLabel, xLabel, yLabel }) {
+  const genes = Array.from({ length: hex.length / 4 }, (_, index) => {
+    const offset = index * 4;
+    return [parseInt(hex.slice(offset, offset + 2), 16) / 255 * 12 - 6, parseInt(hex.slice(offset + 2, offset + 4), 16) / 255 * 5];
+  });
+  const f = frame(720, 380, { top: 26, right: 26, bottom: 56, left: 70 });
+  const x = linearScale([-6, 6], [f.x0, f.x1], { padFraction: 0 });
+  const y = linearScale([0, 5], [f.y1, f.y0], { zero: true });
+  return /* @__PURE__ */ jsxs7("svg", { className: "sterling-chart", viewBox: `0 0 ${f.width} ${f.height}`, role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx6(Gridlines, { scale: y, x0: f.x0, x1: f.x1, count: 5 }),
+    /* @__PURE__ */ jsx6("line", { x1: x(0), x2: x(0), y1: f.y0, y2: f.y1, stroke: grid, strokeWidth: sterlingVisualStyle.stroke.grid }),
+    [-1, 1].map((v) => /* @__PURE__ */ jsx6("line", { x1: x(v), x2: x(v), y1: f.y0, y2: f.y1, stroke: sterlingChartColors[7], strokeDasharray: "5 5", strokeOpacity: sterlingVisualStyle.opacity.guide, strokeWidth: sterlingVisualStyle.stroke.grid }, v)),
+    /* @__PURE__ */ jsx6("line", { x1: f.x0, x2: f.x1, y1: y(1.3), y2: y(1.3), stroke: sterlingChartColors[7], strokeDasharray: "5 5", strokeOpacity: sterlingVisualStyle.opacity.guide, strokeWidth: sterlingVisualStyle.stroke.grid }),
+    genes.map(([effect, evidence], index) => {
+      const significant = Math.abs(effect) >= 1 && evidence >= 1.3;
+      const color = significant ? effect < 0 ? sterlingChartColors[2] : sterlingChartColors[1] : sterlingChartColors[7];
+      return /* @__PURE__ */ jsx6("circle", { cx: x(effect), cy: y(evidence), r: significant ? 2.5 : 1.6, fill: color, fillOpacity: significant ? sterlingVisualStyle.opacity.signal : sterlingVisualStyle.opacity.mutedMark }, index);
+    }),
+    labels.map(([gene, effect, evidence]) => /* @__PURE__ */ jsxs7("g", { children: [
+      /* @__PURE__ */ jsx6("circle", { cx: x(effect), cy: y(evidence), r: "4", fill: effect < 0 ? sterlingChartColors[2] : sterlingChartColors[1], stroke: surface }),
+      /* @__PURE__ */ jsx6("text", { x: x(effect), y: y(evidence) - 8, textAnchor: "middle", fill: text, fontSize: "8", fontFamily: "var(--font-mono)", children: gene })
+    ] }, gene)),
+    /* @__PURE__ */ jsx6(AxisLeft, { scale: y, x: f.x0, count: 5, title: yLabel }),
+    /* @__PURE__ */ jsx6(AxisBottom, { scale: x, y: f.y1, count: 7, title: xLabel })
+  ] });
+}
+function SterlingManhattanChart({ hex, labels, chromosomeCenters, ariaLabel, xLabel, yLabel }) {
+  const points = Array.from({ length: hex.length / 8 }, (_, index) => {
+    const offset = index * 8;
+    return [parseInt(hex.slice(offset, offset + 4), 16) / 65535, parseInt(hex.slice(offset + 4, offset + 6), 16) / 255 * 9, parseInt(hex.slice(offset + 6, offset + 8), 16)];
+  });
+  const f = frame(720, 380, { top: 26, right: 26, bottom: 56, left: 70 });
+  const x = (v) => f.x0 + v * (f.x1 - f.x0);
+  const y = linearScale([0, 9], [f.y1, f.y0], { zero: true });
+  const threshold = -Math.log10(5e-8);
+  return /* @__PURE__ */ jsxs7("svg", { className: "sterling-chart", viewBox: `0 0 ${f.width} ${f.height}`, role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx6(Gridlines, { scale: y, x0: f.x0, x1: f.x1, count: 5 }),
+    /* @__PURE__ */ jsx6("line", { x1: f.x0, x2: f.x1, y1: y(threshold), y2: y(threshold), stroke: sterlingChartColors[5], strokeDasharray: "5 5" }),
+    points.map(([position, evidence, chromosome], index) => /* @__PURE__ */ jsx6("circle", { cx: x(position), cy: y(evidence), r: evidence >= threshold ? 3 : 1.5, fill: sterlingChartColors[chromosome % 2 === 0 ? 4 : 0], fillOpacity: evidence >= threshold ? 1 : sterlingVisualStyle.opacity.secondaryMark }, index)),
+    labels.slice(0, 1).map(([name, chromosome, position, evidence]) => /* @__PURE__ */ jsxs7("g", { children: [
+      /* @__PURE__ */ jsx6("circle", { cx: x(position), cy: y(evidence), r: "4", fill: sterlingChartColors[chromosome % 2 === 0 ? 4 : 0], stroke: surface }),
+      /* @__PURE__ */ jsx6("text", { x: x(position) + 8, y: y(evidence) - 8, fill: text, fontSize: "8", fontFamily: "var(--font-mono)", children: `chr${chromosome} \xB7 ${name}` })
+    ] }, name)),
+    /* @__PURE__ */ jsx6(AxisLeft, { scale: y, x: f.x0, count: 5, title: yLabel }),
+    /* @__PURE__ */ jsx6("line", { x1: f.x0, x2: f.x1, y1: f.y1, y2: f.y1, stroke: "var(--sterling-edge)" }),
+    chromosomeCenters.map((position, index) => /* @__PURE__ */ jsx6("text", { x: x(position), y: f.y1 + 16, textAnchor: "middle", fill: muted, fontSize: "8", fontFamily: "var(--font-mono)", children: index + 1 }, index)),
+    xLabel ? /* @__PURE__ */ jsx6("text", { x: (f.x0 + f.x1) / 2, y: f.y1 + 42, textAnchor: "middle", fill: muted, fontSize: "12", fontFamily: "var(--font-mono)", children: xLabel }) : null
+  ] });
+}
+function correlation(left, right) {
+  const lm = left.reduce((a, b) => a + b, 0) / left.length, rm = right.reduce((a, b) => a + b, 0) / right.length;
+  let n = 0, ls = 0, rs = 0;
+  left.forEach((value, index) => {
+    const l = value - lm, r = right[index] - rm;
+    n += l * r;
+    ls += l * l;
+    rs += r * r;
+  });
+  return n / Math.sqrt(ls * rs);
+}
+function clusterVectors(vectors, memberships) {
+  const distances = vectors.map((left, li) => vectors.map((right, ri) => li === ri ? 0 : 1 - correlation(left, right)));
+  let clusters = vectors.map((_, i) => ({ members: [i], left: null, right: null, height: 0, group: memberships[i] }));
+  const meanMembership = (c) => c.members.reduce((s, m) => s + memberships[m], 0) / c.members.length;
+  while (clusters.length > 1) {
+    let bestLeft = 0, bestRight = 1, bestDistance = Number.POSITIVE_INFINITY;
+    for (let i = 0; i < clusters.length; i += 1) {
+      for (let j = i + 1; j < clusters.length; j += 1) {
+        const L2 = clusters[i], R2 = clusters[j];
+        const d = L2.members.reduce((sum, lm) => sum + R2.members.reduce((inner, rm) => inner + distances[lm][rm], 0), 0) / (L2.members.length * R2.members.length);
+        if (d < bestDistance) {
+          bestDistance = d;
+          bestLeft = i;
+          bestRight = j;
+        }
+      }
+    }
+    let L = clusters[bestLeft], R = clusters[bestRight];
+    if (meanMembership(L) > meanMembership(R)) {
+      [L, R] = [R, L];
+    }
+    const members = [...L.members, ...R.members];
+    const groupSet = [...new Set(members.map((m) => memberships[m]))];
+    const merged = { members, left: L, right: R, height: bestDistance, group: groupSet.length === 1 ? groupSet[0] : null };
+    clusters = clusters.filter((_, index) => index !== bestLeft && index !== bestRight);
+    clusters.push(merged);
+  }
+  return clusters[0];
+}
+function leafOrder(node) {
+  return node.left ? [...leafOrder(node.left), ...leafOrder(node.right)] : node.members;
+}
+function SterlingExpressionChart({ hex, groups, types, ariaLabel }) {
+  const columns = groups.length;
+  const raw = Array.from({ length: hex.length / 2 }, (_, index) => parseInt(hex.slice(index * 2, index * 2 + 2), 16) / 255 * 5 - 2.5);
+  const genes = raw.length / columns;
+  const matrix = Array.from({ length: genes }, (_, row) => raw.slice(row * columns, (row + 1) * columns));
+  const columnVectors = Array.from({ length: columns }, (_, column) => matrix.map((row) => row[column]));
+  const tree = clusterVectors(columnVectors, groups);
+  const order = leafOrder(tree);
+  const cell = 9.25;
+  const startX = 132;
+  const startY = 86;
+  const matrixSize = columns * cell;
+  const columnCenter = (visible) => startX + visible * cell + cell / 2;
+  const rowCenter = (visible) => startY + visible * cell + cell / 2;
+  const branchColor = (node) => node.group === null ? muted : sterlingChartColors[node.group];
+  const maxHeight = Math.max(tree.height, 1e-4);
+  const visibleIndex = new Map(order.map((original, visible) => [original, visible]));
+  const cells = order.flatMap(
+    (row, visibleRow) => order.map((column, visibleColumn) => {
+      const value = correlation(columnVectors[row], columnVectors[column]);
+      return /* @__PURE__ */ jsx6("rect", { x: startX + visibleColumn * cell, y: startY + visibleRow * cell, width: cell + 0.1, height: cell + 0.1, fill: divergentSignedColor(value, 1), children: /* @__PURE__ */ jsx6("title", { children: `${types[groups[row]]} \xD7 ${types[groups[column]]}: r ${value.toFixed(2)}` }) }, `${visibleRow}-${visibleColumn}`);
+    })
+  );
+  const topAnnotations = order.map((column, visible) => /* @__PURE__ */ jsx6("rect", { x: startX + visible * cell, y: "78", width: cell + 0.1, height: "5", fill: sterlingChartColors[groups[column]] }, `ta-${visible}`));
+  const leftAnnotations = order.map((row, visible) => /* @__PURE__ */ jsx6("rect", { x: "124", y: startY + visible * cell, width: "5", height: cell + 0.1, fill: sterlingChartColors[groups[row]] }, `la-${visible}`));
+  const runs = [];
+  order.forEach((column, index) => {
+    const group = groups[column];
+    const previous = runs[runs.length - 1];
+    if (previous && previous.group === group) previous.length += 1;
+    else runs.push({ group, start: index, length: 1 });
+  });
+  const regionFrames = runs.map(({ group, start, length }, index) => /* @__PURE__ */ jsx6("rect", { x: startX + start * cell + 0.7, y: startY + start * cell + 0.7, width: length * cell - 1.4, height: length * cell - 1.4, fill: "none", stroke: sterlingChartColors[group], strokeWidth: sterlingVisualStyle.stroke.series }, `rf-${index}`));
+  const topMarks = [];
+  let topKey = 0;
+  const renderTop = (node) => {
+    if (!node.left) return { x: columnCenter(visibleIndex.get(node.members[0])), y: 75 };
+    const l = renderTop(node.left);
+    const r = renderTop(node.right);
+    const y = 75 - node.height / maxHeight * 55;
+    const x = (l.x + r.x) / 2;
+    topMarks.push(/* @__PURE__ */ jsx6("path", { d: `M${l.x} ${l.y} V${y}`, fill: "none", stroke: branchColor(node.left), strokeWidth: sterlingVisualStyle.stroke.grid }, `tm-${topKey++}`));
+    topMarks.push(/* @__PURE__ */ jsx6("path", { d: `M${r.x} ${r.y} V${y}`, fill: "none", stroke: branchColor(node.right), strokeWidth: sterlingVisualStyle.stroke.grid }, `tm-${topKey++}`));
+    topMarks.push(/* @__PURE__ */ jsx6("path", { d: `M${l.x} ${y} H${r.x}`, fill: "none", stroke: branchColor(node), strokeWidth: sterlingVisualStyle.stroke.grid }, `tm-${topKey++}`));
+    return { x, y };
+  };
+  renderTop(tree);
+  const leftMarks = [];
+  let leftKey = 0;
+  const renderLeft = (node) => {
+    if (!node.left) return { x: 121, y: rowCenter(visibleIndex.get(node.members[0])) };
+    const l = renderLeft(node.left);
+    const r = renderLeft(node.right);
+    const x = 121 - node.height / maxHeight * 78;
+    const y = (l.y + r.y) / 2;
+    leftMarks.push(/* @__PURE__ */ jsx6("path", { d: `M${l.x} ${l.y} H${x}`, fill: "none", stroke: branchColor(node.left), strokeWidth: sterlingVisualStyle.stroke.grid }, `lm-${leftKey++}`));
+    leftMarks.push(/* @__PURE__ */ jsx6("path", { d: `M${r.x} ${r.y} H${x}`, fill: "none", stroke: branchColor(node.right), strokeWidth: sterlingVisualStyle.stroke.grid }, `lm-${leftKey++}`));
+    leftMarks.push(/* @__PURE__ */ jsx6("path", { d: `M${x} ${l.y} V${r.y}`, fill: "none", stroke: branchColor(node), strokeWidth: sterlingVisualStyle.stroke.grid }, `lm-${leftKey++}`));
+    return { x, y };
+  };
+  renderLeft(tree);
+  const rowLabels = order.map((row, visible) => /* @__PURE__ */ jsx6("text", { x: startX + matrixSize + 7, y: startY + visible * cell + 6.3, fill: muted, fontSize: "6", fontFamily: "var(--font-mono)", children: `${types[groups[row]]} ${row % 4 + 1}` }, `rl-${visible}`));
+  const legendStops = Array.from({ length: 21 }, (_, index) => {
+    const value = -1 + index / 20 * 2;
+    return /* @__PURE__ */ jsx6("rect", { x: 132 + index * 5, y: "394", width: "5.2", height: "8", fill: divergentSignedColor(value, 1) }, `ls-${index}`);
+  });
+  return /* @__PURE__ */ jsxs7("svg", { className: "sterling-chart", viewBox: "0 0 600 416", role: "img", "aria-label": ariaLabel, children: [
+    topMarks,
+    leftMarks,
+    topAnnotations,
+    leftAnnotations,
+    cells,
+    regionFrames,
+    rowLabels,
+    legendStops,
+    /* @__PURE__ */ jsx6("text", { x: "126", y: "401", textAnchor: "end", fill: muted, fontSize: "6.4", fontFamily: "var(--font-mono)", children: "-1" }),
+    /* @__PURE__ */ jsx6("text", { x: "242", y: "401", fill: muted, fontSize: "6.4", fontFamily: "var(--font-mono)", children: "+1 r" })
+  ] });
+}
+function SterlingGeoMapChart({ atlas, rows, ariaLabel }) {
+  const topology = atlas;
+  const collection = feature(atlas, topology.objects.states);
+  const projection = geoAlbersUsa().fitSize([620, 286], collection);
+  const path = geoPath(projection);
+  const valueById = new Map(rows.map((row) => [row.id, row]));
+  const maximum = Math.max(...rows.map((row) => row.engineers));
+  return /* @__PURE__ */ jsxs7("svg", { className: "sterling-chart", viewBox: "0 0 720 390", role: "img", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx6("g", { transform: "translate(50 18)", children: collection.features.map((state, index) => {
+      const id = Number(state.id), row = valueById.get(id), value = row?.engineers ?? 0, colorIndex = Math.min(9, Math.max(0, Math.round(value / maximum * 9)));
+      return /* @__PURE__ */ jsx6("path", { d: path(state) ?? void 0, fill: sterlingSequentialColors[colorIndex], stroke: surface, strokeWidth: sterlingVisualStyle.stroke.grid, children: /* @__PURE__ */ jsx6("title", { children: `${row?.state ?? `State ${id}`}: ${(value * 100).toFixed(2)}%` }) }, id || index);
+    }) }),
+    /* @__PURE__ */ jsx6("text", { x: "132", y: "342", textAnchor: "end", fill: muted, fontSize: "9", fontFamily: "var(--font-mono)", children: "0%" }),
+    sterlingSequentialColors.map((color, index) => /* @__PURE__ */ jsx6("rect", { x: 142 + index * 40, y: "330", width: "40", height: "14", fill: color }, color)),
+    /* @__PURE__ */ jsxs7("text", { x: "552", y: "342", fill: muted, fontSize: "9", fontFamily: "var(--font-mono)", children: [
+      (maximum * 100).toFixed(2),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx6("text", { x: "360", y: "370", textAnchor: "middle", fill: muted, fontSize: "10", fontFamily: "var(--font-mono)", children: "engineers as share of population / proporci\xF3n de ingenieros" })
+  ] });
+}
+
+// src/tailwind.ts
+var orderedStops = [100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+var rampStops = [200, 300, 400, 500, 600, 700, 800];
+function at(scale, stop, fallback) {
+  return scale[stop] ?? fallback;
+}
+function createTailwindSterlingPalette({
+  categorical,
+  surface: surface2,
+  divergent,
+  heat
+}) {
+  const first = categorical[0] ?? {};
+  const categoricalValues = categorical.map((scale) => at(scale, 500, "currentColor"));
+  return defineSterlingPalette({
+    surface: surface2,
+    categorical: categoricalValues,
+    legend: categorical.map((scale) => at(scale, 700, at(scale, 500, "currentColor"))),
+    sequential: orderedStops.map((stop) => at(first, stop, at(first, 500, "currentColor"))),
+    divergent: orderedStops.map((stop) => at(divergent ?? first, stop, at(first, 500, "currentColor"))),
+    heat: orderedStops.concat(950).map((stop) => at(heat ?? first, stop, at(first, 500, "currentColor"))).slice(0, 11),
+    ramps: categorical.map((scale) => rampStops.map((stop) => at(scale, stop, at(scale, 500, "currentColor"))))
+  });
+}
+
+// src/mdx.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function createSterlingMdxComponents({
+  locale = "en",
+  figureDefaults,
+  additionalComponents
+} = {}) {
+  return {
+    SterlingFigure: (props) => /* @__PURE__ */ jsx7(SterlingFigure, { ...figureDefaults, ...props, locale }),
+    SterlingInlineLegend,
+    SterlingBarChart,
+    SterlingVerticalBarChart,
+    SterlingCandlestickChart,
+    SterlingScatterPlot,
+    SterlingLineChart,
+    SterlingHeatmap,
+    SterlingHistogram,
+    SterlingBoxPlot,
+    SterlingChordChart,
+    SterlingDumbbellChart,
+    SterlingDensityChart,
+    SterlingDensity2DChart,
+    SterlingDendrogramChart,
+    SterlingViolinPlot,
+    SterlingDonutChart,
+    SterlingLollipopChart,
+    SterlingPieChart,
+    SterlingSankeyChart,
+    SterlingRadarChart,
+    SterlingRidgelineChart,
+    SterlingTreemapChart,
+    SterlingNetworkChart,
+    SterlingVolcanoChart,
+    SterlingManhattanChart,
+    SterlingExpressionChart,
+    SterlingGeoMapChart,
+    SterlingSequentialSurface,
+    SterlingCorrelogram,
+    ...additionalComponents
+  };
+}
+export {
+  AXIS_TITLE,
+  AxisBottom,
+  AxisLeft,
+  Gridlines,
+  SterlingBarChart,
+  SterlingBoxPlot,
+  SterlingCandlestickChart,
+  SterlingChordChart,
+  SterlingCorrelogram,
+  SterlingDendrogramChart,
+  SterlingDensity2DChart,
+  SterlingDensityChart,
+  SterlingDonutChart,
+  SterlingDumbbellChart,
+  SterlingExpressionChart,
+  SterlingFigure,
+  SterlingFigureActions,
+  SterlingGeoMapChart,
+  SterlingHeatmap,
+  SterlingHistogram,
+  SterlingInlineLegend,
+  SterlingLineChart,
+  SterlingLollipopChart,
+  SterlingManhattanChart,
+  SterlingNetworkChart,
+  SterlingPieChart,
+  SterlingRadarChart,
+  SterlingRidgelineChart,
+  SterlingSankeyChart,
+  SterlingScatterPlot,
+  SterlingSequentialSurface,
+  SterlingTreemapChart,
+  SterlingVerticalBarChart,
+  SterlingViolinPlot,
+  SterlingVolcanoChart,
+  TICK,
+  TICK_LABEL,
+  TimeAxisBottom,
+  axisGrid,
+  axisLine,
+  axisMuted,
+  axisText,
+  bandCenters,
+  createSterlingMdxComponents,
+  createTailwindSterlingPalette,
+  defaultMargin,
+  defineSterlingPalette,
+  divergentSignedColor,
+  divergentSignedRamp,
+  frame,
+  inferSterlingDataExport,
+  kernelDensity,
+  linearScale,
+  sterlingCategorical,
+  sterlingChartColors,
+  sterlingColorNames,
+  sterlingCredit,
+  sterlingDivergentColors,
+  sterlingHeatColors,
+  sterlingLegendColors,
+  sterlingPaletteStyle,
+  sterlingRamp,
+  sterlingRampStops,
+  sterlingRowsToCsv,
+  sterlingSequentialColors,
+  sterlingVisualStyle,
+  timeScale,
+  tukeySummary
+};
+//# sourceMappingURL=index.mjs.map