@icen.ai/ui 0.8.0 → 0.8.1

package/dist/behaviors/charts.mjs

@@ -1,6 +1,20 @@
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/charts.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
+var REGISTERED_TONES = /* @__PURE__ */ new Map();
+function registerChartTone(name, cssVar) {
+  if (!name || !cssVar) return;
+  REGISTERED_TONES.set(name, cssVar.startsWith("var(") ? cssVar : `var(${cssVar})`);
+}
 function toneVar(tone = "accent") {
+  const registered = REGISTERED_TONES.get(tone);
+  if (registered) return registered;
   switch (tone) {
     case "success":
       return "var(--token-success)";
@@ -154,17 +168,14 @@ function withChrome(el, opts, hasLegend, paint, state) {
     if (state) state.hidden = hidden;
     el.setAttribute("data-legend-hidden", String(hidden));
     syncEye();
-    el.dispatchEvent(new CustomEvent("icen:chart-legend-visibility", {
-      bubbles: true,
-      detail: { visible: hidden ? false : true }
-    }));
+    emitIcen(el, "icen:chart-legend-visibility", { visible: hidden ? false : true });
   });
   syncEye();
   head.append(title, eye);
   el.append(head, body);
   paint(body);
 }
-function toggleLegend(items, scope, _opts) {
+function toggleLegend(items, scope) {
   const legend = document.createElement("div");
   legend.className = "chart-legend chart-legend--toggle";
   for (const item of items) {
@@ -183,10 +194,7 @@ function toggleLegend(items, scope, _opts) {
       scope.querySelectorAll(`[data-chart-key="${CSS.escape(item.key)}"]`).forEach((m) => {
         m.classList.toggle("is-off", off);
       });
-      legend.dispatchEvent(new CustomEvent("icen:chart-legend-toggle", {
-        bubbles: true,
-        detail: { key: item.key, seriesIndex: item.si, hidden: off }
-      }));
+      emitIcen(legend, "icen:chart-legend-toggle", { key: item.key, seriesIndex: item.si, hidden: off });
     };
     row.addEventListener("click", toggle);
     row.addEventListener("keydown", (e) => {
@@ -205,7 +213,7 @@ function toggleLegend(items, scope, _opts) {
   return legend;
 }
 function renderVBar(el, opts) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return el;
   const seriesList = normalizeSeriesInput(opts);
   const labels = opts.labels ?? [];
   const n = Math.min(labels.length, ...seriesList.map((s) => s.values.length));
@@ -256,11 +264,13 @@ function renderVBar(el, opts) {
       wrap.appendChild(track);
     }
     body.append(wrap, labelsRow(labelsUsed));
-    if (seriesList.length > 1) body.appendChild(toggleLegend(seriesList.map((s, si) => ({ key: s.name, label: s.name, tone: s.tone, si })), wrap, opts));
+    if (seriesList.length > 1) body.appendChild(toggleLegend(seriesList.map((s, si) => ({ key: s.name, label: s.name, tone: s.tone, si })), wrap));
   });
+  attachChartInteraction(el, "vbar");
+  return el;
 }
 function renderHBar(el, opts) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return el;
   withChrome(el, opts, false, (body) => {
     const n = Math.min(opts.labels.length, opts.values.length);
     if (n === 0) {
@@ -294,9 +304,11 @@ function renderHBar(el, opts) {
     });
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "hbar");
+  return el;
 }
 function renderStack(el, opts) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return el;
   withChrome(el, opts, opts.segments.length > 0, (body) => {
     const total = opts.segments.reduce((sum, s) => sum + s.value, 0);
     if (opts.segments.length === 0 || total <= 0) {
@@ -305,13 +317,13 @@ function renderStack(el, opts) {
     }
     const bar = document.createElement("div");
     bar.className = "chart-stack";
-    for (const seg of opts.segments) {
+    for (const [segIndex, seg] of opts.segments.entries()) {
       const s = document.createElement("div");
       s.className = "chart-stack-seg";
       s.style.width = `${seg.value / total * 100}%`;
       if (seg.tone) s.style.setProperty("--chart-tone", toneVar(seg.tone));
       s.setAttribute("title", `${seg.label}: ${fmt(opts, seg.value)}`);
-      setMarkData(s, { index: opts.segments.indexOf(seg), label: seg.label, value: seg.value });
+      setMarkData(s, { index: segIndex, label: seg.label, value: seg.value });
       bar.appendChild(s);
     }
     const legend = document.createElement("div");
@@ -321,9 +333,11 @@ function renderStack(el, opts) {
     }
     body.append(bar, legend);
   });
+  attachChartInteraction(el, "stack");
+  return el;
 }
 function renderDonut(el, opts) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return el;
   withChrome(el, opts, opts.segments.length > 0, (body) => {
     const total = opts.segments.reduce((sum, s) => sum + s.value, 0);
     if (opts.segments.length === 0 || total <= 0) {
@@ -370,10 +384,12 @@ function renderDonut(el, opts) {
     wrap.append(svg, legend);
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "donut");
+  return el;
 }
 var lineGradientSeq = 0;
 function renderLine(el, opts) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return el;
   const seriesList = normalizeSeriesInput(opts);
   const labels = opts.labels ?? [];
   const n = Math.min(labels.length, ...seriesList.map((s) => s.values.length));
@@ -478,11 +494,13 @@ function renderLine(el, opts) {
     if (defs.firstChild) svg.insertBefore(defs, svg.firstChild);
     wrap.append(svg, labelsRow(sampleLabels(labelsUsed)));
     body.appendChild(wrap);
-    if (seriesList.length > 1) body.appendChild(toggleLegend(seriesList.map((s, si) => ({ key: s.name, label: s.name, tone: s.tone, si })), wrap, opts));
+    if (seriesList.length > 1) body.appendChild(toggleLegend(seriesList.map((s, si) => ({ key: s.name, label: s.name, tone: s.tone, si })), wrap));
   });
+  attachChartInteraction(el, "line");
+  return el;
 }
 function renderArea(el, opts) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return el;
   withChrome(el, opts, false, (body) => {
     const n = Math.min(opts.labels.length, opts.values.length);
     if (n === 0) {
@@ -551,9 +569,11 @@ function renderArea(el, opts) {
     wrap.append(svg, labelsRow(sampleLabels(labels)));
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "area");
+  return el;
 }
 function renderRadar(el, opts) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return el;
   withChrome(el, opts, opts.series.length > 1, (body) => {
     const axes = opts.axes;
     const n = axes.length;
@@ -655,13 +675,12 @@ function renderRadar(el, opts) {
       }
       legendItems.push({ key: s.name || `\u7CFB\u5217${si + 1}`, label: s.name || `\u7CFB\u5217${si + 1}`, tone: s.tone, si });
     });
-    wrap.append(svg, opts.series.length > 1 ? toggleLegend(legendItems, wrap, opts) : (() => {
-      const l = document.createElement("div");
-      l.className = "chart-legend";
-      return l;
-    })());
+    const legend = opts.series.length > 1 ? toggleLegend(legendItems, wrap) : null;
+    wrap.append(svg, ...legend ? [legend] : []);
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "radar");
+  return el;
 }
 function niceCeil(v) {
   if (v <= 0) return 1;
@@ -680,8 +699,41 @@ function isoDate(d) {
   const day = String(d.getDate()).padStart(2, "0");
   return `${d.getFullYear()}-${m}-${day}`;
 }
+function weekdayLabelAt(defaults, day) {
+  return defaults[(day + 6) % 7] ?? "";
+}
+function levelOf(v, max) {
+  return v <= 0 ? 0 : Math.min(4, Math.ceil(v / max * 4));
+}
+function padFirstWeek(grid, firstDate, weekStart) {
+  const first = /* @__PURE__ */ new Date(`${firstDate}T00:00:00`);
+  const pad = (first.getDay() + 7 - weekStart) % 7;
+  for (let i = 0; i < pad; i++) {
+    const blank = document.createElement("span");
+    blank.className = "chart-heatmap-cell is-blank";
+    grid.appendChild(blank);
+  }
+  return pad;
+}
+function heatmapLegend(labels) {
+  const legend = document.createElement("div");
+  legend.className = "chart-heatmap-legend";
+  const less = document.createElement("span");
+  less.textContent = labels?.less ?? "\u5C11";
+  const more = document.createElement("span");
+  more.textContent = labels?.more ?? "\u591A";
+  legend.appendChild(less);
+  for (let lv = 0; lv <= 4; lv++) {
+    const cell = document.createElement("span");
+    cell.className = "chart-heatmap-cell";
+    cell.dataset.level = String(lv);
+    legend.appendChild(cell);
+  }
+  legend.appendChild(more);
+  return legend;
+}
 function renderHeatmap(el, opts) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return el;
   withChrome(el, opts, true, (body) => {
     let entries;
     if (opts.data && opts.data.length > 0) {
@@ -700,48 +752,29 @@ function renderHeatmap(el, opts) {
     const weeks = opts.weeks ?? Math.ceil(entries.length / 7);
     if (entries.length > weeks * 7) entries = entries.slice(entries.length - weeks * 7);
     const max = maxOf(entries.map((e) => e.value));
-    const levelOf = (v) => v <= 0 ? 0 : Math.min(4, Math.ceil(v / max * 4));
     const wrap = document.createElement("div");
     wrap.className = "chart-heatmap";
     if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
     const grid = document.createElement("div");
     grid.className = "chart-heatmap-grid";
     grid.setAttribute("role", "img");
-    const first = /* @__PURE__ */ new Date(`${entries[0].date}T00:00:00`);
-    const pad = (first.getDay() + 6) % 7;
-    for (let i = 0; i < pad; i++) {
-      const blank = document.createElement("span");
-      blank.className = "chart-heatmap-cell is-blank";
-      grid.appendChild(blank);
-    }
-    for (const entry of entries) {
+    padFirstWeek(grid, entries[0].date, opts.weekStart === 0 ? 0 : 1);
+    for (const [i, entry] of entries.entries()) {
       const cell = document.createElement("span");
       cell.className = "chart-heatmap-cell";
-      cell.dataset.level = String(levelOf(entry.value));
+      cell.dataset.level = String(levelOf(entry.value, max));
       cell.setAttribute("title", `${entry.date}\uFF1A${fmt(opts, entry.value)}`);
-      setMarkData(cell, { index: entries.indexOf(entry), label: entry.date, value: entry.value });
+      setMarkData(cell, { index: i, label: entry.date, value: entry.value });
       grid.appendChild(cell);
     }
-    const legend = document.createElement("div");
-    legend.className = "chart-heatmap-legend";
-    const less = document.createElement("span");
-    less.textContent = "\u5C11";
-    const more = document.createElement("span");
-    more.textContent = "\u591A";
-    legend.appendChild(less);
-    for (let lv = 0; lv <= 4; lv++) {
-      const cell = document.createElement("span");
-      cell.className = "chart-heatmap-cell";
-      cell.dataset.level = String(lv);
-      legend.appendChild(cell);
-    }
-    legend.appendChild(more);
-    wrap.append(grid, legend);
+    wrap.append(grid, heatmapLegend(opts.labels));
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "heatmap");
+  return el;
 }
 function renderSparkline(el, opts) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return el;
   withChrome(el, opts, false, (body) => {
     const values = opts.values;
     if (values.length === 0) {
@@ -796,9 +829,11 @@ function renderSparkline(el, opts) {
     wrap.appendChild(svg);
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "sparkline");
+  return el;
 }
 function renderGauge(el, opts) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return el;
   el.textContent = "";
   const max = opts.max ?? 100;
   const ratio = max > 0 ? Math.min(1, Math.max(0, opts.value / max)) : 0;
@@ -842,9 +877,11 @@ function renderGauge(el, opts) {
   }
   wrap.append(svg, center);
   el.appendChild(wrap);
+  attachChartInteraction(el, "gauge");
+  return el;
 }
 function renderCalendar(el, opts) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return el;
   withChrome(el, opts, true, (body) => {
     let entries;
     if (opts.data && opts.data.length > 0) {
@@ -858,6 +895,10 @@ function renderCalendar(el, opts) {
     const wrap = document.createElement("div");
     wrap.className = "chart-calendar";
     if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
+    const weekStart = opts.weekStart === 0 ? 0 : 1;
+    const weekdayDefaults = ["\u4E00", "", "\u4E09", "", "\u4E94", "", "\u65E5"];
+    const weekdayLabels = opts.labels?.weekdays ?? weekdayDefaults.map((_, i) => weekdayLabelAt(weekdayDefaults, (weekStart + i) % 7));
+    const monthLabel = (m) => opts.labels?.months?.[m] ?? `${m + 1}\u6708`;
     const grid = document.createElement("div");
     grid.className = "chart-heatmap-grid";
     grid.setAttribute("role", "img");
@@ -865,20 +906,13 @@ function renderCalendar(el, opts) {
     months.className = "chart-calendar-months";
     const weekdayRow = document.createElement("div");
     weekdayRow.className = "chart-calendar-weekdays";
-    ["\u4E00", "", "\u4E09", "", "\u4E94", "", "\u65E5"].forEach((w) => {
+    weekdayLabels.forEach((w) => {
       const s = document.createElement("span");
       s.textContent = w;
       weekdayRow.appendChild(s);
     });
     const max = maxOf(entries.map((e) => e.value));
-    const levelOf = (v) => v <= 0 ? 0 : Math.min(4, Math.ceil(v / max * 4));
-    const first = /* @__PURE__ */ new Date(`${entries[0].date}T00:00:00`);
-    const pad = (first.getDay() + 6) % 7;
-    for (let i = 0; i < pad; i++) {
-      const blank = document.createElement("span");
-      blank.className = "chart-heatmap-cell is-blank";
-      grid.appendChild(blank);
-    }
+    const pad = padFirstWeek(grid, entries[0].date, weekStart);
     let lastMonth = -1;
     entries.forEach((entry, i) => {
       const d = /* @__PURE__ */ new Date(`${entry.date}T00:00:00`);
@@ -887,39 +921,28 @@ function renderCalendar(el, opts) {
         lastMonth = d.getMonth();
         const label = document.createElement("span");
         label.className = "chart-calendar-month";
-        label.textContent = `${d.getMonth() + 1}\u6708`;
+        label.textContent = monthLabel(d.getMonth());
         label.style.setProperty("--col", String(col));
         months.appendChild(label);
       }
       const cell = document.createElement("span");
       cell.className = "chart-heatmap-cell";
-      cell.dataset.level = String(levelOf(entry.value));
+      cell.dataset.level = String(levelOf(entry.value, max));
       cell.setAttribute("title", `${entry.date}\uFF1A${fmt(opts, entry.value)}`);
       setMarkData(cell, { index: i, label: entry.date, value: entry.value });
       grid.appendChild(cell);
     });
-    const legend = document.createElement("div");
-    legend.className = "chart-heatmap-legend";
-    const less = document.createElement("span");
-    less.textContent = "\u5C11";
-    const more = document.createElement("span");
-    more.textContent = "\u591A";
-    legend.appendChild(less);
-    for (let lv = 0; lv <= 4; lv++) {
-      const cell = document.createElement("span");
-      cell.className = "chart-heatmap-cell";
-      cell.dataset.level = String(lv);
-      legend.appendChild(cell);
-    }
-    legend.appendChild(more);
+    const legend = heatmapLegend(opts.labels);
     const columns = Math.max(1, Math.ceil((pad + entries.length) / 7));
     months.style.setProperty("--columns", String(columns));
     wrap.append(months, weekdayRow, grid, legend);
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "calendar");
+  return el;
 }
 function renderScatter(el, opts) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return el;
   withChrome(el, opts, false, (body) => {
     const pts = opts.points.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y));
     if (pts.length === 0) {
@@ -964,7 +987,7 @@ function renderScatter(el, opts) {
         "font-size": "8",
         fill: "var(--token-text-faint)"
       });
-      txt.textContent = String(Math.round(tv * 10) / 10);
+      txt.textContent = fmt(opts, Math.round(tv * 10) / 10);
       svg.appendChild(txt);
     }
     for (let i = 0; i <= 4; i++) {
@@ -986,7 +1009,7 @@ function renderScatter(el, opts) {
         "font-size": "8",
         fill: "var(--token-text-faint)"
       });
-      txt.textContent = String(Math.round(tv * 10) / 10);
+      txt.textContent = fmt(opts, Math.round(tv * 10) / 10);
       svg.appendChild(txt);
     }
     if (opts.yLabel) {
@@ -1010,7 +1033,7 @@ function renderScatter(el, opts) {
         "stroke-width": "1"
       });
       const title = svgEl("title", {});
-      title.textContent = `${p.label ?? `#${i + 1}`}: (${p.x}, ${p.y}${p.size != null ? `, size ${p.size}` : ""})`;
+      title.textContent = `${p.label ?? `#${i + 1}`}: (${fmt(opts, p.x)}, ${fmt(opts, p.y)}${p.size != null ? `, size ${fmt(opts, p.size)}` : ""})`;
       c.appendChild(title);
       setMarkData(c, { index: i, label: p.label ?? `#${i + 1}`, value: p.y });
       c.dataset.chartX = String(p.x);
@@ -1019,6 +1042,8 @@ function renderScatter(el, opts) {
     wrap.appendChild(svg);
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "scatter");
+  return el;
 }
 function chartFormatValue(format) {
   if (!format) return (v) => String(v);
@@ -1149,7 +1174,7 @@ function normalizeChartSpec(raw) {
     }
   }
   if (!src || typeof src !== "object" || Array.isArray(src)) {
-    if (Array.isArray(raw)) src = { data: raw };
+    if (Array.isArray(src)) src = { data: src };
     else return {};
   }
   const s = src;
@@ -1219,6 +1244,7 @@ function normalizeChartSpec(raw) {
   }
   return spec;
 }
+var TEMPORAL_HIT_RATIO = 0.6;
 function looksTemporal(labels) {
   if (labels.length === 0) return false;
   let hits = 0;
@@ -1232,7 +1258,7 @@ function looksTemporal(labels) {
     else if (/^(v|ver\.?|version[ .]?)?\d+(\.\d+)+$/i.test(l)) hits++;
     else if (/^\d{4}$/.test(l)) hits++;
   }
-  return hits / labels.length >= 0.6;
+  return hits / labels.length >= TEMPORAL_HIT_RATIO;
 }
 function inferChartType(spec) {
   if (spec.points && spec.points.length > 0) return "scatter";
@@ -1267,7 +1293,7 @@ function dispatchChartEvent(root, type, mark, chart, phase, pointer) {
     pointerX: pointer?.x,
     pointerY: pointer?.y
   };
-  root.dispatchEvent(new CustomEvent(`icen:chart-${type}`, { detail, bubbles: true }));
+  emitIcen(root, `icen:chart-${type}`, detail);
 }
 var tooltipEl = null;
 function chartTooltip() {
@@ -1280,6 +1306,12 @@ function chartTooltip() {
   }
   return tooltipEl;
 }
+function applyTooltipSizing(host) {
+  const tip = chartTooltip();
+  const raw = host?.closest(".chart, [data-chart-root]")?.getAttribute("data-panel-max") ?? null;
+  const n = raw != null ? Number(raw) : NaN;
+  tip.style.maxWidth = Number.isFinite(n) && n > 0 ? `${n}px` : "";
+}
 function tooltipText(mark) {
   const label = mark.getAttribute("data-chart-label") ?? "";
   const series = mark.getAttribute("data-chart-series-name");
@@ -1299,6 +1331,101 @@ function moveTooltip(x, y) {
   tip.style.left = `${Math.round(left)}px`;
   tip.style.top = `${Math.round(top)}px`;
 }
+var chartDelegateMeta = /* @__PURE__ */ new WeakMap();
+var chartDelegateUnbind = /* @__PURE__ */ new WeakMap();
+function bindChartEvents(root) {
+  const noop = () => void 0;
+  if (typeof document === "undefined") return noop;
+  const attached = root;
+  if (attached.__icenChartBound) {
+    const prev = chartDelegateUnbind.get(root);
+    if (prev) return prev;
+  }
+  for (let p = root.parentElement; p; p = p.parentElement) {
+    if (p.__icenChartBound) return noop;
+  }
+  const typeNow = () => chartDelegateMeta.get(root)?.type() ?? "vbar";
+  const tipEnabled = () => chartDelegateMeta.get(root)?.tooltip() ?? true;
+  const markOf = (e) => {
+    const t = e.target;
+    return t instanceof Element ? t.closest("[data-chart-mark]") : null;
+  };
+  let hoverMark = null;
+  const enterMark = (mark, x, y) => {
+    hoverMark = mark;
+    mark.classList.add("is-hover");
+    dispatchChartEvent(root, "hover", mark, typeNow(), "enter", { x, y });
+    if (tipEnabled()) {
+      const tip = chartTooltip();
+      tip.textContent = tooltipText(mark);
+      applyTooltipSizing(mark);
+      tip.hidden = false;
+      moveTooltip(x, y);
+    }
+  };
+  const leaveMark = (pointer) => {
+    if (!hoverMark) return;
+    hoverMark.classList.remove("is-hover");
+    dispatchChartEvent(root, "hover", hoverMark, typeNow(), "leave", pointer);
+    hoverMark = null;
+    chartTooltip().hidden = true;
+  };
+  const bindings = [];
+  const on = (type, fn) => {
+    const listener = (evt) => fn(evt);
+    root.addEventListener(type, listener);
+    bindings.push([type, listener]);
+  };
+  on("pointerover", (e) => {
+    const mark = markOf(e);
+    if (!mark || mark === hoverMark) return;
+    leaveMark({ x: e.clientX, y: e.clientY });
+    enterMark(mark, e.clientX, e.clientY);
+  });
+  on("pointermove", (e) => {
+    if (hoverMark && tipEnabled()) {
+      dispatchChartEvent(root, "hover", hoverMark, typeNow(), "move", { x: e.clientX, y: e.clientY });
+      moveTooltip(e.clientX, e.clientY);
+    }
+  });
+  on("pointerout", (e) => {
+    const mark = markOf(e);
+    if (mark && mark === hoverMark) leaveMark({ x: e.clientX, y: e.clientY });
+  });
+  on("pointerleave", () => leaveMark());
+  on("click", (e) => {
+    const mark = markOf(e);
+    if (mark) dispatchChartEvent(root, "click", mark, typeNow(), void 0, { x: e.clientX, y: e.clientY });
+  });
+  on("dblclick", (e) => {
+    const mark = markOf(e);
+    if (mark) dispatchChartEvent(root, "dblclick", mark, typeNow(), void 0, { x: e.clientX, y: e.clientY });
+  });
+  on("contextmenu", (e) => {
+    const mark = markOf(e);
+    if (!mark) return;
+    e.preventDefault();
+    dispatchChartEvent(root, "contextmenu", mark, typeNow(), void 0, { x: e.clientX, y: e.clientY });
+  });
+  const unbind = () => {
+    for (const [type, listener] of bindings) root.removeEventListener(type, listener);
+    bindings.length = 0;
+    attached.__icenChartBound = false;
+    chartDelegateUnbind.delete(root);
+    if (hoverMark) {
+      hoverMark.classList.remove("is-hover");
+      hoverMark = null;
+    }
+    chartTooltip().hidden = true;
+  };
+  attached.__icenChartBound = true;
+  chartDelegateUnbind.set(root, unbind);
+  return unbind;
+}
+function attachChartInteraction(el, type) {
+  chartDelegateMeta.set(el, { type: () => type, tooltip: () => true });
+  bindChartEvents(el);
+}
 function hasLegendOf(spec) {
   switch (spec.type) {
     case "donut":
@@ -1321,9 +1448,6 @@ function renderChart(el, raw) {
     return { el, spec: {}, update: noop, on: () => noop, destroy: noop };
   }
   const root = el;
-  const attached = root;
-  const wasBound = attached.__icenChartBound === true;
-  attached.__icenChartBound = true;
   let current = normalizeChartSpec(raw);
   const typeOf = () => current.type ?? "vbar";
   const legendState = { hidden: null };
@@ -1358,10 +1482,10 @@ function renderChart(el, raw) {
           break;
         }
         case "heatmap":
-          renderHeatmap(body, { values: spec.values, data: spec.data, weeks: spec.weeks, tone: spec.tone, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
+          renderHeatmap(body, { values: spec.values, data: spec.data, weeks: spec.weeks, tone: spec.tone, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend, weekStart: spec.i18n?.weekStart, labels: spec.i18n });
           break;
         case "calendar":
-          renderCalendar(body, { dates: spec.dates, values: spec.values, data: spec.data, tone: spec.tone, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
+          renderCalendar(body, { dates: spec.dates, values: spec.values, data: spec.data, tone: spec.tone, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend, weekStart: spec.i18n?.weekStart, labels: spec.i18n });
           break;
         case "sparkline":
           renderSparkline(body, { labels: spec.labels ?? [], values: spec.values ?? [], tone: spec.tone, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
@@ -1377,63 +1501,8 @@ function renderChart(el, raw) {
       }
     });
   };
-  if (!wasBound) {
-    const markOf = (e) => {
-      const t = e.target;
-      return t instanceof Element ? t.closest("[data-chart-mark]") : null;
-    };
-    const tipEnabled = () => current.tooltip !== false;
-    let hoverMark = null;
-    const enterMark = (mark, x, y) => {
-      hoverMark = mark;
-      mark.classList.add("is-hover");
-      dispatchChartEvent(root, "hover", mark, typeOf(), "enter", { x, y });
-      if (tipEnabled()) {
-        const tip = chartTooltip();
-        tip.textContent = tooltipText(mark);
-        tip.hidden = false;
-        moveTooltip(x, y);
-      }
-    };
-    const leaveMark = (pointer) => {
-      if (!hoverMark) return;
-      hoverMark.classList.remove("is-hover");
-      dispatchChartEvent(root, "hover", hoverMark, typeOf(), "leave", pointer);
-      hoverMark = null;
-      chartTooltip().hidden = true;
-    };
-    root.addEventListener("pointerover", (e) => {
-      const mark = markOf(e);
-      if (!mark || mark === hoverMark) return;
-      leaveMark({ x: e.clientX, y: e.clientY });
-      enterMark(mark, e.clientX, e.clientY);
-    });
-    root.addEventListener("pointermove", (e) => {
-      if (hoverMark && tipEnabled()) {
-        dispatchChartEvent(root, "hover", hoverMark, typeOf(), "move", { x: e.clientX, y: e.clientY });
-        moveTooltip(e.clientX, e.clientY);
-      }
-    });
-    root.addEventListener("pointerout", (e) => {
-      const mark = markOf(e);
-      if (mark && mark === hoverMark) leaveMark({ x: e.clientX, y: e.clientY });
-    });
-    root.addEventListener("pointerleave", () => leaveMark());
-    root.addEventListener("click", (e) => {
-      const mark = markOf(e);
-      if (mark) dispatchChartEvent(root, "click", mark, typeOf(), void 0, { x: e.clientX, y: e.clientY });
-    });
-    root.addEventListener("dblclick", (e) => {
-      const mark = markOf(e);
-      if (mark) dispatchChartEvent(root, "dblclick", mark, typeOf(), void 0, { x: e.clientX, y: e.clientY });
-    });
-    root.addEventListener("contextmenu", (e) => {
-      const mark = markOf(e);
-      if (!mark) return;
-      e.preventDefault();
-      dispatchChartEvent(root, "contextmenu", mark, typeOf(), void 0, { x: e.clientX, y: e.clientY });
-    });
-  }
+  chartDelegateMeta.set(root, { type: typeOf, tooltip: () => current.tooltip !== false });
+  const unbindEvents = bindChartEvents(root);
   render();
   return {
     el: root,
@@ -1451,15 +1520,17 @@ function renderChart(el, raw) {
     },
     destroy() {
       root.textContent = "";
-      attached.__icenChartBound = false;
+      unbindEvents();
       chartTooltip().hidden = true;
     }
   };
 }
 export {
+  bindChartEvents,
   chartFormatValue,
   inferChartType,
   normalizeChartSpec,
+  registerChartTone,
   renderArea,
   renderCalendar,
   renderChart,