@aparte/plugin-chartjs 0.0.0-stage → 0.29.1

package/dist/core.js

@@ -0,0 +1,869 @@
+import { escapeHtml, escapeAttr, aparteGlobalConfig } from "@aparte/core";
+const styles = "/* A Chart.js chart in a reply: the bubble's width up to a reading measure, at a set\n   height (`setupChartjs({ height })`, else 18rem) — or at the config's own aspect ratio,\n   when it asks for one. The canvas is sized by the plugin from its frame, so the frame\n   alone carries the size and the canvas is its only child (what Chart.js measures). */\n.aparte-chartjs {\n  display: block;\n  position: relative;\n  inline-size: 100%;\n  max-inline-size: var(--aparte-chartjs-max-width, 40rem);\n  margin-block: var(--aparte-space-2);\n}\n\n.aparte-chartjs__frame {\n  position: relative;\n  inline-size: 100%;\n  block-size: var(--aparte-chartjs-height, 18rem);\n}\n\n.aparte-chartjs[data-aparte-chartjs-ratio] .aparte-chartjs__frame {\n  block-size: auto;\n}\n\n.aparte-chartjs__canvas {\n  display: block;\n}\n\n/* While the chart is on its way: a quiet box the size the chart will be. */\n.aparte-chartjs__frame > .aparte-skeleton {\n  display: block;\n  block-size: 100%;\n}\n\n/* A tool whose chart cannot be shown: one quiet line, where the chart would have been. */\n.aparte-chartjs-note {\n  color: var(--aparte-text-muted);\n  font-size: var(--aparte-font-size-sm);\n}\n";
+const MAX_POINTS = 5e3;
+const MAX_TICKS = 100;
+const MAX_COLUMNS = 50;
+const MAX_CELLS = 1e4;
+const TOOLTIP_POSITIONS = /* @__PURE__ */ new Set(["average", "nearest"]);
+const MAX_DEPTH = 32;
+const DROPPED_KEYS = /* @__PURE__ */ new Set(["__proto__", "prototype", "constructor", "toString", "valueOf", "toJSON"]);
+function plain(value, depth = 0, animating = false) {
+  if (depth > MAX_DEPTH) throw new RangeError("too deep");
+  if (value === null || typeof value === "string" || typeof value === "boolean") return value;
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (Array.isArray(value)) return value.map((item) => plain(item, depth + 1, animating));
+  if (typeof value === "object") {
+    const out = {};
+    for (const [key, item] of Object.entries(value)) {
+      if (DROPPED_KEYS.has(key) || animating && key === "loop") continue;
+      const copy = plain(item, depth + 1, animating || key === "animation" || key === "animations");
+      if (copy !== void 0) out[key] = copy;
+    }
+    return out;
+  }
+  return void 0;
+}
+const isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const child$1 = (parent, key) => {
+  const value = isObject(parent) ? parent[key] : void 0;
+  return isObject(value) ? value : void 0;
+};
+function dropCalls(target, keys) {
+  if (target) for (const key of keys) delete target[key];
+}
+function isLocale(tag) {
+  if (typeof tag !== "string") return false;
+  try {
+    return Intl.NumberFormat.supportedLocalesOf(tag).length > 0;
+  } catch {
+    return false;
+  }
+}
+function readChartConfig(value, maxPoints = MAX_POINTS) {
+  let copy;
+  try {
+    copy = plain(value);
+  } catch {
+    return null;
+  }
+  if (!isObject(copy) || typeof copy["type"] !== "string" || !/^[A-Za-z][\w-]*$/.test(copy["type"])) return null;
+  const data = copy["data"];
+  if (!isObject(data) || !Array.isArray(data["datasets"])) return null;
+  const datasets = data["datasets"];
+  if (!datasets.every((d) => isObject(d) && Array.isArray(d["data"]))) return null;
+  if (data["labels"] !== void 0 && !Array.isArray(data["labels"])) return null;
+  const points = datasets.reduce((sum, d) => sum + d["data"].length, 0);
+  const labels = Array.isArray(data["labels"]) ? data["labels"].length : 0;
+  if (points > maxPoints || labels > maxPoints || datasets.length > maxPoints) return null;
+  delete copy["plugins"];
+  if (copy["options"] !== void 0 && !isObject(copy["options"])) delete copy["options"];
+  const options = copy["options"];
+  if (options) {
+    delete options["devicePixelRatio"];
+    if (options["locale"] !== void 0 && !isLocale(options["locale"])) delete options["locale"];
+    const ratio = options["aspectRatio"];
+    if (ratio !== void 0) {
+      if (typeof ratio !== "number" || ratio <= 0) delete options["aspectRatio"];
+      else options["aspectRatio"] = Math.min(4, Math.max(0.25, ratio));
+    }
+    const scales = child$1(options, "scales");
+    for (const id of scales ? Object.keys(scales) : []) {
+      const ticks = child$1(scales[id], "ticks");
+      if (!ticks) continue;
+      for (const key of ["count", "maxTicksLimit"]) {
+        const n = ticks[key];
+        if (n === void 0) continue;
+        if (typeof n !== "number" || n < 1) delete ticks[key];
+        else ticks[key] = Math.min(MAX_TICKS, Math.floor(n));
+      }
+    }
+    const plugins = child$1(options, "plugins");
+    const tooltip = child$1(plugins, "tooltip");
+    dropCalls(tooltip, ["external", "filter", "itemSort", "callbacks"]);
+    if (tooltip && tooltip["position"] !== void 0 && !TOOLTIP_POSITIONS.has(tooltip["position"])) delete tooltip["position"];
+    dropCalls(child$1(child$1(plugins, "legend"), "labels"), ["generateLabels", "filter", "sort"]);
+  }
+  return copy;
+}
+function hasPoints(config) {
+  return config.data.datasets.some((d) => d["data"].length > 0);
+}
+function closeJson(text) {
+  const stack = [];
+  let inString = false;
+  let escaped = false;
+  let cut = -1;
+  let closers = "";
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i];
+    if (inString) {
+      if (escaped) escaped = false;
+      else if (c === "\\") escaped = true;
+      else if (c === '"') inString = false;
+      continue;
+    }
+    if (c === '"') inString = true;
+    else if (c === "{" || c === "[") {
+      stack.push(c === "{" ? "}" : "]");
+      cut = i + 1;
+      closers = stack.slice().reverse().join("");
+    } else if (c === "}" || c === "]") {
+      if (stack.pop() !== c) return null;
+      cut = i + 1;
+      closers = stack.slice().reverse().join("");
+      if (stack.length === 0) return text.slice(0, cut);
+    } else if (c === ",") {
+      cut = i;
+      closers = stack.slice().reverse().join("");
+    }
+  }
+  return cut < 0 ? null : text.slice(0, cut) + closers;
+}
+function parseFence(source, open, maxPoints = MAX_POINTS) {
+  const text = open ? closeJson(source) : source;
+  if (text === null) return null;
+  try {
+    return readChartConfig(JSON.parse(text), maxPoints);
+  } catch {
+    return null;
+  }
+}
+function titleOf(config) {
+  const title = config.options?.["plugins"]?.["title"]?.["text"];
+  const text = Array.isArray(title) ? title.filter((t) => typeof t === "string").join(" ") : typeof title === "string" ? title : "";
+  return text.trim() || void 0;
+}
+function cell(value, format) {
+  if (typeof value === "number") return format(value);
+  if (typeof value === "string") return value;
+  if (isObject(value)) {
+    const y = value["y"];
+    const shown = typeof y === "number" ? format(y) : typeof y === "string" ? y : "";
+    return typeof value["r"] === "number" ? `${shown} (${format(value["r"])})` : shown;
+  }
+  return "";
+}
+function rowName(config, datasets, index, format) {
+  const label = config.data.labels?.[index];
+  if (typeof label === "string" || typeof label === "number") return String(label);
+  if (Array.isArray(label)) return label.join(" ");
+  for (const dataset of datasets) {
+    const point = dataset["data"][index];
+    if (isObject(point) && (typeof point["x"] === "number" || typeof point["x"] === "string")) {
+      return typeof point["x"] === "number" ? format(point["x"]) : point["x"];
+    }
+  }
+  return String(index + 1);
+}
+function dataTable(config, locale) {
+  let formatter;
+  try {
+    formatter = new Intl.NumberFormat(locale);
+  } catch {
+    formatter = new Intl.NumberFormat();
+  }
+  const format = (n) => formatter.format(n);
+  const all = config.data.datasets.map((d, i) => ({ d, i })).filter(({ d }) => d["data"].length > 0);
+  const datasets = all.slice(0, MAX_COLUMNS);
+  const withData = all.map(({ d }) => d);
+  const height = Math.max(config.data.labels?.length ?? 0, ...datasets.map(({ d }) => d["data"].length));
+  const rows = Math.min(height, Math.floor(MAX_CELLS / (datasets.length + 1)));
+  const head = datasets.map(({ d, i }) => {
+    const label = typeof d["label"] === "string" && d["label"].trim() ? d["label"] : "";
+    return label ? `<th scope="col">${escapeHtml(label)}</th>` : `<th scope="col" data-aparte-chartjs-series="${escapeAttr(String(i + 1))}"></th>`;
+  }).join("");
+  const body = [];
+  for (let r = 0; r < rows; r++) {
+    const cells = datasets.map(({ d }) => `<td>${escapeHtml(cell(d["data"][r], format))}</td>`).join("");
+    body.push(`<tr><th scope="row">${escapeHtml(rowName(config, withData, r, format))}</th>${cells}</tr>`);
+  }
+  const cut = datasets.length < all.length || rows < height ? `<tfoot><tr><td colspan="${datasets.length + 1}" data-aparte-chartjs-cut></td></tr></tfoot>` : "";
+  return `<table><caption data-aparte-chartjs-name></caption><thead><tr><td></td>${head}</tr></thead>${cut}<tbody>${body.join("")}</tbody></table>`;
+}
+const SERIES_HUES = ["#2a78d6", "#d95926", "#199e70", "#c98500", "#d55181", "#008300", "#9085e9", "#e34948"];
+const NORMAL_MIN = 15;
+const CVD_MIN = 8;
+const MAX_SERIES = 8;
+function parseColor(color) {
+  const value = color.trim().toLowerCase();
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/.exec(value)?.[1];
+  if (hex) {
+    const full = hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex;
+    return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16));
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/.exec(value);
+  if (rgb) return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+  return null;
+}
+function withAlpha(color, alpha) {
+  const rgb = parseColor(color);
+  return rgb ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})` : color;
+}
+const toLinear = (c) => {
+  const s = c / 255;
+  return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+};
+const CVD = {
+  protan: [[0.152286, 1.052583, -0.204868], [0.114503, 0.786281, 0.099216], [-3882e-6, -0.048116, 1.051998]],
+  deutan: [[0.367322, 0.860646, -0.227968], [0.280085, 0.672501, 0.047413], [-0.01182, 0.04294, 0.968881]]
+};
+function oklab([r, g, b]) {
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function distance(a, b, kind) {
+  const see = (c) => {
+    const lin = c.map(toLinear);
+    if (!kind) return oklab(lin);
+    return oklab(CVD[kind].map((row) => Math.min(1, Math.max(0, row[0] * lin[0] + row[1] * lin[1] + row[2] * lin[2]))));
+  };
+  const [x, y] = [see(a), see(b)];
+  return 100 * Math.hypot(x[0] - y[0], x[1] - y[1], x[2] - y[2]);
+}
+const cache = /* @__PURE__ */ new Map();
+function seriesPalette(primary) {
+  const hit = cache.get(primary);
+  if (hit) return hit;
+  const brand = parseColor(primary);
+  let palette;
+  if (!brand) {
+    palette = [primary, ...SERIES_HUES].slice(0, MAX_SERIES);
+  } else {
+    palette = [primary];
+    let previous = brand;
+    const left = SERIES_HUES.map((hex) => ({ hex, rgb: parseColor(hex) })).filter(({ rgb }) => distance(rgb, brand) >= NORMAL_MIN);
+    while (palette.length < MAX_SERIES) {
+      const i = left.findIndex(({ rgb }) => distance(rgb, previous) >= NORMAL_MIN && Math.min(distance(rgb, previous, "protan"), distance(rgb, previous, "deutan")) >= CVD_MIN);
+      if (i < 0) break;
+      const [next] = left.splice(i, 1);
+      palette.push(next.hex);
+      previous = next.rgb;
+    }
+  }
+  if (cache.size > 32) cache.clear();
+  cache.set(primary, palette);
+  return palette;
+}
+function child(parent, key) {
+  const value = parent[key];
+  if (value === void 0) return parent[key] = {};
+  return typeof value === "object" && value !== null && !Array.isArray(value) ? value : null;
+}
+function fill(target, values) {
+  if (!target) return;
+  for (const [key, value] of Object.entries(values)) if (target[key] === void 0) target[key] = value;
+}
+function defaultScales(type) {
+  if (type === "radar" || type === "polarArea") return ["r"];
+  if (type === "pie" || type === "doughnut") return [];
+  return ["x", "y"];
+}
+const ARCS = /* @__PURE__ */ new Set(["pie", "doughnut", "polarArea"]);
+function colourDataset(dataset, type, colour, palette, tokens) {
+  if (dataset["backgroundColor"] !== void 0 || dataset["borderColor"] !== void 0) return;
+  if (ARCS.has(type)) {
+    const count = dataset["data"].length;
+    const alpha = type === "polarArea" ? 0.7 : 1;
+    dataset["backgroundColor"] = Array.from({ length: count }, (_, i) => withAlpha(palette(i), alpha));
+    dataset["borderColor"] = tokens.background;
+    fill(dataset, { borderWidth: 2 });
+    return;
+  }
+  if (type === "line" || type === "radar") {
+    dataset["borderColor"] = colour;
+    dataset["backgroundColor"] = withAlpha(colour, 0.2);
+    fill(dataset, { pointBackgroundColor: colour, borderWidth: 2 });
+    return;
+  }
+  dataset["borderColor"] = colour;
+  dataset["backgroundColor"] = withAlpha(colour, type === "bar" ? 0.8 : 0.6);
+  if (type === "bar") fill(dataset, { borderWidth: 1, borderRadius: 4 });
+}
+function themeChartjsConfig(config, tokens) {
+  const out = JSON.parse(JSON.stringify(config));
+  const options = child(out, "options");
+  fill(options, { color: tokens.text, borderColor: tokens.border });
+  fill(child(options, "font"), { family: tokens.fontFamily });
+  const plugins = child(options, "plugins");
+  if (plugins) {
+    const legend = child(plugins, "legend");
+    if (legend) fill(child(legend, "labels"), { color: tokens.text });
+    fill(child(plugins, "title"), { color: tokens.text });
+    fill(child(plugins, "subtitle"), { color: tokens.muted });
+    fill(child(plugins, "tooltip"), {
+      backgroundColor: tokens.surface,
+      titleColor: tokens.text,
+      bodyColor: tokens.text,
+      footerColor: tokens.muted,
+      borderColor: tokens.border,
+      borderWidth: 1
+    });
+  }
+  const scales = child(options, "scales");
+  if (scales) {
+    for (const id of defaultScales(out.type)) if (scales[id] === void 0) scales[id] = {};
+    for (const id of Object.keys(scales)) {
+      const scale = child(scales, id);
+      if (!scale) continue;
+      fill(child(scale, "grid"), { color: tokens.border });
+      fill(child(scale, "border"), { color: tokens.border });
+      fill(child(scale, "ticks"), { color: tokens.muted, backdropColor: tokens.background });
+      fill(child(scale, "title"), { color: tokens.muted });
+      if (id === "r" || scale["type"] === "radialLinear") {
+        fill(child(scale, "angleLines"), { color: tokens.border });
+        fill(child(scale, "pointLabels"), { color: tokens.text });
+      }
+    }
+    if (Object.keys(scales).length === 0) delete options["scales"];
+  }
+  const palette = seriesPalette(tokens.primary);
+  const colourAt = (i) => palette[i] ?? tokens.muted;
+  out.data.datasets.forEach((dataset, i) => {
+    const type = typeof dataset["type"] === "string" ? dataset["type"] : out.type;
+    colourDataset(dataset, type, colourAt(i), colourAt, tokens);
+  });
+  return out;
+}
+const TOKENS = {
+  text: ["--aparte-text", "#1a1a1a"],
+  muted: ["--aparte-text-muted", "#666666"],
+  border: ["--aparte-border", "#d0d0d0"],
+  surface: ["--aparte-surface-1", "#ffffff"],
+  background: ["--aparte-bg", "#ffffff"],
+  primary: ["--aparte-primary", "#3b5bdb"]
+};
+let scratch;
+function readTokens(host) {
+  const fontFamily = (typeof getComputedStyle === "function" ? getComputedStyle(host).fontFamily : "") || "system-ui, sans-serif";
+  const fallback = Object.fromEntries(Object.entries(TOKENS).map(([k, [, v]]) => [k, v]));
+  if (typeof getComputedStyle !== "function") return { ...fallback, fontFamily };
+  const probe = document.createElement("span");
+  probe.style.display = "none";
+  host.appendChild(probe);
+  scratch ??= document.createElement("canvas").getContext?.("2d") ?? null;
+  const read = ([token, fallbackColour]) => {
+    probe.style.color = `var(${token}, ${fallbackColour})`;
+    const computed = getComputedStyle(probe).color || fallbackColour;
+    if (!scratch) return computed;
+    scratch.fillStyle = "#000";
+    scratch.fillStyle = computed;
+    return String(scratch.fillStyle);
+  };
+  try {
+    return {
+      text: read(TOKENS.text),
+      muted: read(TOKENS.muted),
+      border: read(TOKENS.border),
+      surface: read(TOKENS.surface),
+      background: read(TOKENS.background),
+      primary: read(TOKENS.primary),
+      fontFamily
+    };
+  } finally {
+    probe.remove();
+  }
+}
+const WORDS = {
+  /** A chart's accessible name when its config gives it no title. */
+  chartjsChart: {
+    en: "Chart",
+    fr: "Graphique",
+    de: "Diagramm",
+    es: "Gráfico",
+    it: "Grafico",
+    ja: "グラフ",
+    ko: "차트",
+    pt: "Gráfico",
+    ru: "Диаграмма",
+    zh: "图表"
+  },
+  /** The note over the source of a chart that could not be drawn. */
+  chartjsError: {
+    en: "This chart could not be drawn.",
+    fr: "Ce graphique n’a pas pu être tracé.",
+    de: "Dieses Diagramm konnte nicht gezeichnet werden.",
+    es: "No se pudo dibujar este gráfico.",
+    it: "Impossibile disegnare questo grafico.",
+    ja: "このグラフは描画できませんでした。",
+    ko: "이 차트를 그릴 수 없습니다.",
+    pt: "Não foi possível desenhar este gráfico.",
+    ru: "Не удалось построить эту диаграмму.",
+    zh: "无法绘制此图表。"
+  },
+  /** A tool that should have returned a chart and did not run, or failed. */
+  chartjsUnavailable: {
+    en: "Chart not available",
+    fr: "Graphique indisponible",
+    de: "Diagramm nicht verfügbar",
+    es: "Gráfico no disponible",
+    it: "Grafico non disponibile",
+    ja: "グラフは利用できません",
+    ko: "차트를 사용할 수 없음",
+    pt: "Gráfico indisponível",
+    ru: "Диаграмма недоступна",
+    zh: "图表不可用"
+  },
+  /** A column of the data table for a dataset with no label. */
+  chartjsSeries: {
+    en: "Series {n}",
+    fr: "Série {n}",
+    de: "Reihe {n}",
+    es: "Serie {n}",
+    it: "Serie {n}",
+    ja: "系列 {n}",
+    ko: "계열 {n}",
+    pt: "Série {n}",
+    ru: "Ряд {n}",
+    zh: "系列 {n}"
+  },
+  /** The data table's last line, when it lists only part of the data. */
+  chartjsTableCut: {
+    en: "Only part of the data is listed.",
+    fr: "Seule une partie des données est listée.",
+    de: "Nur ein Teil der Daten ist aufgeführt.",
+    es: "Solo se muestra una parte de los datos.",
+    it: "È elencata solo una parte dei dati.",
+    ja: "データの一部のみを表示しています。",
+    ko: "데이터의 일부만 표시됩니다.",
+    pt: "Apenas parte dos dados está listada.",
+    ru: "Показана только часть данных.",
+    zh: "仅列出部分数据。"
+  }
+};
+function languageOf(config) {
+  const tag = config.getLocale().tag;
+  return typeof tag === "string" && tag ? tag.split("-")[0].toLowerCase() : "en";
+}
+function word(config, key, vars = {}) {
+  const fromApp = config.getLocale()[key];
+  const table = WORDS[key];
+  const text = typeof fromApp === "string" && fromApp || table[languageOf(config)] || table.en;
+  return text.replace(/\{(\w+)\}/g, (all, name) => vars[name] ?? all);
+}
+const CHARTJS_LANGUAGES = ["chartjs", "chart.js"];
+const PROGRESSIVE_MS = 300;
+const CONFIG_ATTR = "data-aparte-chartjs-config";
+const PARKED = 32;
+const STYLE_ATTR = "data-aparte-chartjs-styles";
+const warned = /* @__PURE__ */ new WeakSet();
+function warnOnce(key, message, error) {
+  if (warned.has(key)) return;
+  warned.add(key);
+  console.warn(`[aparte-chartjs] ${message}`, error);
+}
+const isChartClass = (value) => typeof value === "function" && typeof value.prototype?.update === "function";
+const reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+function ensureStyles(node) {
+  const root = node.getRootNode();
+  const target = typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot ? root : root === document ? document.head : null;
+  if (!target || target.querySelector(`style[${STYLE_ATTR}]`)) return;
+  const sheet = document.createElement("style");
+  sheet.setAttribute(STYLE_ATTR, "");
+  sheet.textContent = styles;
+  target.appendChild(sheet);
+}
+function setupChartjsWith(chartjs, options = {}, config = aparteGlobalConfig) {
+  const charts = createCharts(chartjs, config);
+  const unregister = config.registerCodeLanguageRenderer(createFenceRenderer(charts, options));
+  const matchers = options.tool === void 0 ? [] : Array.isArray(options.tool) ? options.tool : [options.tool];
+  const toolRenderer = createToolRenderer(charts, options, config);
+  for (const match of matchers) config.registerToolRenderer(match, toolRenderer);
+  return () => {
+    unregister();
+    for (const match of matchers) config.unregisterToolRenderer(match);
+    charts.stop();
+  };
+}
+function createCharts(chartjs, config) {
+  const load = isChartClass(chartjs) ? () => Promise.resolve(chartjs) : chartjs;
+  let loading;
+  let Chart = isChartClass(chartjs) ? chartjs : void 0;
+  const mounted = /* @__PURE__ */ new Map();
+  const parked = /* @__PURE__ */ new Map();
+  const shadows = /* @__PURE__ */ new WeakSet();
+  let sweep;
+  let stopped = false;
+  const chartOf = () => {
+    loading ??= load().then((m) => {
+      const found = isChartClass(m) ? m : m.default ?? m.Chart;
+      if (!isChartClass(found)) throw new TypeError("the loader returned no Chart class");
+      Chart = found;
+      return found;
+    }).catch((error) => {
+      loading = void 0;
+      throw error;
+    });
+    return loading;
+  };
+  const frameOf = (wrapper) => wrapper.querySelector(".aparte-chartjs__frame");
+  const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const wrapper = entry.target.parentElement;
+      if (!wrapper) continue;
+      if (!wrapper.isConnected) {
+        release.later();
+        continue;
+      }
+      if (entry.contentRect.width === 0 && entry.contentRect.height === 0) continue;
+      const chart = mounted.get(wrapper);
+      try {
+        if (!chart) mount(wrapper);
+        else if (chart.responsive) chart.chart.resize();
+      } catch (error) {
+        release(wrapper);
+        fail(wrapper, error);
+      }
+    }
+  });
+  const unwatch = (wrapper) => {
+    const frame = parked.get(wrapper) ?? frameOf(wrapper);
+    parked.delete(wrapper);
+    if (frame) observer?.unobserve(frame);
+  };
+  const release = Object.assign((wrapper, park = false) => {
+    const chart = mounted.get(wrapper);
+    if (chart) {
+      mounted.delete(wrapper);
+      try {
+        chart.chart.destroy();
+      } catch {
+      }
+    }
+    const frame = frameOf(wrapper);
+    if (!park || !frame || !observer) {
+      unwatch(wrapper);
+      return;
+    }
+    parked.delete(wrapper);
+    parked.set(wrapper, frame);
+    for (const [oldest] of parked) {
+      if (parked.size <= PARKED) break;
+      unwatch(oldest);
+    }
+  }, {
+    /** Release every chart off the page, after the task: a move puts its nodes back before then. */
+    later() {
+      if (sweep !== void 0) return;
+      sweep = setTimeout(() => {
+        sweep = void 0;
+        for (const wrapper of [...mounted.keys()]) if (!wrapper.isConnected) release(wrapper, true);
+      }, 0);
+    }
+  });
+  const drawn = (chart, wrapper, animate) => {
+    const themed = themeChartjsConfig(chart, readTokens(wrapper));
+    const o = themed.options ??= {};
+    const responsive = o["responsive"] !== false;
+    o["maintainAspectRatio"] = o["aspectRatio"] !== void 0 || o["maintainAspectRatio"] === true;
+    o["responsive"] = false;
+    if (!animate) o["animation"] = false;
+    return { config: themed, responsive };
+  };
+  const fail = (wrapper, error) => {
+    warnOnce(config, "a chart could not be drawn; its note is shown instead. Is its type registered on your Chart?", error);
+    wrapper.setAttribute("data-aparte-chartjs-failed", "");
+    const note = document.createElement("span");
+    note.className = "aparte-code-error";
+    note.setAttribute("role", "note");
+    note.setAttribute("data-aparte-chartjs-error", "");
+    note.textContent = word(config, "chartjsError");
+    unwatch(wrapper);
+    frameOf(wrapper)?.replaceWith(note);
+  };
+  function mount(wrapper) {
+    if (stopped || mounted.has(wrapper) || !wrapper.isConnected || wrapper.hasAttribute("data-aparte-chartjs-failed")) return;
+    if (!Chart) {
+      void chartOf().then(() => mount(wrapper), (error) => warnOnce(load, "Chart.js could not be loaded.", error));
+      return;
+    }
+    const canvas = wrapper.querySelector("canvas");
+    const frame = frameOf(wrapper);
+    if (!canvas || !frame) return;
+    let source;
+    try {
+      source = readChartConfig(JSON.parse(wrapper.getAttribute(CONFIG_ATTR) ?? ""), Infinity);
+    } catch {
+      source = null;
+    }
+    if (!source) return;
+    ensureStyles(wrapper);
+    watchRoot(wrapper);
+    const animate = !reducedMotion() && !wrapper.hasAttribute("data-aparte-chartjs-open") && (!wrapper.hasAttribute("data-aparte-chartjs-still") || source.options?.["animation"] !== void 0);
+    const { config: final, responsive } = drawn(source, wrapper, animate);
+    let chart;
+    try {
+      chart = new Chart(canvas, final);
+      if (responsive) chart.resize();
+    } catch (error) {
+      try {
+        chart?.destroy();
+      } catch {
+      }
+      fail(wrapper, error);
+      return;
+    }
+    mounted.set(wrapper, { chart, config: source, responsive });
+    parked.delete(wrapper);
+    release.later();
+  }
+  const retheme = () => {
+    for (const [wrapper, chart] of [...mounted]) {
+      if (!wrapper.isConnected) {
+        release.later();
+        continue;
+      }
+      try {
+        const { config: final } = drawn(chart.config, wrapper, false);
+        chart.chart.options = final.options;
+        chart.chart.data = final.data;
+        chart.chart.update("none");
+      } catch (error) {
+        release(wrapper);
+        fail(wrapper, error);
+      }
+    }
+  };
+  const watch = watchTheme(retheme);
+  const watchRoot = (node) => {
+    const root = node.getRootNode();
+    if (typeof ShadowRoot === "undefined" || !(root instanceof ShadowRoot) || shadows.has(root)) return;
+    shadows.add(root);
+    watch.add(root);
+  };
+  return {
+    chartOf,
+    warm() {
+      void chartOf().catch(() => void 0);
+    },
+    /** Mount a chart on every drawn canvas in `root` that has none. */
+    activate(root) {
+      const wrappers = root.matches(`.aparte-chartjs[${CONFIG_ATTR}]`) ? [root] : Array.from(root.querySelectorAll(`.aparte-chartjs[${CONFIG_ATTR}]`));
+      for (const wrapper of wrappers) {
+        const frame = frameOf(wrapper);
+        if (frame && !wrapper.hasAttribute("data-aparte-chartjs-failed")) observer?.observe(frame);
+        mount(wrapper);
+      }
+    },
+    /** Release the charts in `root` now: it is gone for good. */
+    releaseIn(root) {
+      for (const wrapper of [...mounted.keys(), ...parked.keys()]) if (root === wrapper || root.contains(wrapper)) release(wrapper);
+    },
+    stop() {
+      stopped = true;
+      watch.stop();
+      if (sweep !== void 0) clearTimeout(sweep);
+      sweep = void 0;
+      for (const wrapper of [...mounted.keys()]) release(wrapper);
+      parked.clear();
+      observer?.disconnect();
+    }
+  };
+}
+function chartMarkup(chart, locale, flags = {}) {
+  const o = chart.options ?? {};
+  const ratio = o["aspectRatio"] !== void 0 || o["maintainAspectRatio"] === true;
+  const title = titleOf(chart);
+  const named = title ? ` data-aparte-chartjs-title="${escapeAttr(title)}"` : "";
+  const marks = `${ratio ? " data-aparte-chartjs-ratio" : ""}${flags.open ? " data-aparte-chartjs-open" : ""}${flags.still ? " data-aparte-chartjs-still" : ""}`;
+  return `<div class="aparte-chartjs" role="figure"${named}${marks} ${CONFIG_ATTR}="${escapeAttr(JSON.stringify(chart))}"><div class="aparte-chartjs__frame"><canvas class="aparte-chartjs__canvas" role="img"></canvas></div><div class="aparte-sr-only">${dataTable(chart, locale)}</div></div>`;
+}
+function pendingMarkup() {
+  return '<div class="aparte-chartjs"><div class="aparte-chartjs__frame"><span class="aparte-skeleton aparte-skeleton--rect" aria-hidden="true"></span></div></div>';
+}
+function relabelCharts(root, config, options) {
+  const wrappers = root.matches(".aparte-chartjs") ? [root] : Array.from(root.querySelectorAll(".aparte-chartjs"));
+  for (const wrapper of wrappers) {
+    if (options.height) wrapper.style.setProperty("--aparte-chartjs-height", options.height);
+    const name = wrapper.getAttribute("data-aparte-chartjs-title") || word(config, "chartjsChart");
+    if (wrapper.getAttribute("role") === "figure") wrapper.setAttribute("aria-label", name);
+    wrapper.querySelector("canvas")?.setAttribute("aria-label", name);
+    const caption = wrapper.querySelector("[data-aparte-chartjs-name]");
+    if (caption) caption.textContent = name;
+    for (const th of Array.from(wrapper.querySelectorAll("[data-aparte-chartjs-series]"))) {
+      th.textContent = word(config, "chartjsSeries", { n: th.getAttribute("data-aparte-chartjs-series") ?? "" });
+    }
+    for (const cut of Array.from(wrapper.querySelectorAll("[data-aparte-chartjs-cut]"))) cut.textContent = word(config, "chartjsTableCut");
+  }
+  for (const note of Array.from(root.querySelectorAll("[data-aparte-chartjs-error]"))) note.textContent = word(config, "chartjsError");
+  for (const note of Array.from(root.querySelectorAll("[data-aparte-chartjs-unavailable]"))) note.textContent = word(config, "chartjsUnavailable");
+  for (const note of Array.from(root.querySelectorAll("[data-aparte-chartjs-waiting]"))) note.textContent = config.t("approvalWaiting");
+}
+const localeOf = (config) => {
+  const tag = config.getLocale().tag;
+  return typeof tag === "string" && tag ? tag : void 0;
+};
+function failed(ctx) {
+  return `<span class="aparte-code-error" role="note" data-aparte-chartjs-error></span><pre class="aparte-code-error">${escapeHtml(ctx.source)}</pre>`;
+}
+function createFenceRenderer(charts, options) {
+  const progressive = options.progressive !== false;
+  const maxPoints = options.maxPoints ?? MAX_POINTS;
+  const arriving = /* @__PURE__ */ new WeakMap();
+  const stateOf = (host) => {
+    const part = host.closest("[data-segment-id]") ?? host.closest("pre")?.parentElement ?? host.parentElement ?? host;
+    let state = arriving.get(part);
+    if (!state) {
+      state = { waiting: null, timer: void 0, at: 0, started: null, drawn: null };
+      arriving.set(part, state);
+    }
+    return state;
+  };
+  const frame = async (ctx, state) => {
+    const chart = parseFence(ctx.source, true, maxPoints);
+    if (!chart || !hasPoints(chart)) return null;
+    const key = JSON.stringify(chart);
+    if (key === state.drawn) return null;
+    await charts.chartOf();
+    state.drawn = key;
+    return chartMarkup(chart, localeOf(ctx.config), { open: true });
+  };
+  const schedule = (state) => {
+    if (state.timer !== void 0 || !state.waiting) return;
+    const wait = Math.max(0, state.at + PROGRESSIVE_MS - performance.now());
+    state.timer = setTimeout(() => {
+      state.timer = void 0;
+      const job = state.waiting;
+      state.waiting = null;
+      if (!job) return;
+      state.at = performance.now();
+      void frame(job.ctx, state).then(job.answer, () => job.answer(null));
+    }, wait);
+  };
+  return {
+    languages: CHARTJS_LANGUAGES,
+    lazy: true,
+    render(ctx) {
+      if (!ctx.display) return null;
+      const state = stateOf(ctx.host);
+      const waiting = state.waiting;
+      if (!ctx.open) {
+        const streamed = state.started !== null && ctx.source.startsWith(state.started);
+        if (streamed) {
+          waiting?.answer(null);
+          state.waiting = null;
+          state.started = null;
+          state.drawn = null;
+        }
+        const chart = parseFence(ctx.source, false, maxPoints);
+        if (!chart) return failed(ctx);
+        return charts.chartOf().then(() => chartMarkup(chart, localeOf(ctx.config), { still: streamed }));
+      }
+      waiting?.answer(null);
+      state.waiting = null;
+      if (!progressive) return null;
+      if (state.started === null || !ctx.source.startsWith(state.started)) {
+        state.started = ctx.source;
+        state.drawn = null;
+        charts.warm();
+        return pendingMarkup();
+      }
+      return new Promise((answer) => {
+        state.waiting = { ctx, answer };
+        schedule(state);
+      });
+    },
+    relabel(drawing, ctx) {
+      relabelCharts(drawing, ctx.config, options);
+      charts.activate(drawing);
+    }
+  };
+}
+function resultOf(segment) {
+  if (segment.structuredResult !== void 0) return segment.structuredResult;
+  if (typeof segment.result !== "string") return void 0;
+  try {
+    return JSON.parse(segment.result);
+  } catch {
+    return void 0;
+  }
+}
+function createToolRenderer(charts, options, config) {
+  const maxPoints = options.maxPoints ?? MAX_POINTS;
+  const drawnFrom = /* @__PURE__ */ new WeakMap();
+  const note = (attr) => `<span class="aparte-chartjs-note" role="note" ${attr}></span>`;
+  const draw = (element, segment) => {
+    const status = segment.status;
+    const signature = status === "resolved" ? `resolved|${segment.result ?? ""}|${JSON.stringify(segment.structuredResult ?? null)}` : status;
+    if (drawnFrom.get(element) === signature) return false;
+    drawnFrom.set(element, signature);
+    charts.releaseIn(element);
+    element.removeAttribute("aria-busy");
+    let html;
+    if (status === "pending") {
+      element.setAttribute("aria-busy", "true");
+      charts.warm();
+      html = pendingMarkup();
+    } else if (status === "awaiting-approval") {
+      html = note("data-aparte-chartjs-waiting");
+    } else if (status === "resolved") {
+      let chart = null;
+      try {
+        const result = resultOf(segment);
+        chart = readChartConfig(options.map ? options.map(result, segment.toolCall?.input ?? {}) : result, maxPoints);
+      } catch (error) {
+        warnOnce(options, "the `map` given for a chart tool threw.", error);
+      }
+      html = chart ? chartMarkup(chart, localeOf(config)) : `<span class="aparte-code-error" role="note" data-aparte-chartjs-error></span>`;
+    } else {
+      html = note("data-aparte-chartjs-unavailable");
+    }
+    element.innerHTML = html;
+    relabelCharts(element, config, options);
+    return true;
+  };
+  return {
+    render(segment) {
+      const element = document.createElement("div");
+      element.className = "aparte-chartjs-tool";
+      draw(element, segment);
+      return element;
+    },
+    setup(element) {
+      ensureStyles(element);
+      charts.activate(element);
+    },
+    update(element, segment) {
+      if (!draw(element, segment)) return;
+      ensureStyles(element);
+      charts.activate(element);
+    },
+    relabel(element) {
+      relabelCharts(element, config, options);
+    },
+    cleanup(element) {
+      charts.releaseIn(element);
+    }
+  };
+}
+function watchTheme(changed) {
+  if (typeof MutationObserver === "undefined" || typeof document === "undefined") return { add: () => {
+  }, stop: () => {
+  } };
+  const observer = new MutationObserver(changed);
+  const init = { attributes: true, subtree: true, attributeFilter: ["data-aparte-theme"] };
+  observer.observe(document.documentElement, init);
+  const media = typeof matchMedia === "function" ? matchMedia("(prefers-color-scheme: dark)") : null;
+  media?.addEventListener("change", changed);
+  return {
+    add: (root) => observer.observe(root, init),
+    stop: () => {
+      observer.disconnect();
+      media?.removeEventListener("change", changed);
+    }
+  };
+}
+export {
+  CHARTJS_LANGUAGES,
+  SERIES_HUES,
+  readChartConfig,
+  seriesPalette,
+  setupChartjsWith,
+  themeChartjsConfig
+};
+//# sourceMappingURL=core.js.map