@icen.ai/ui 0.8.0 → 0.9.0

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,23 +1520,820 @@ function renderChart(el, raw) {
     },
     destroy() {
       root.textContent = "";
-      attached.__icenChartBound = false;
+      unbindEvents();
+      chartTooltip().hidden = true;
+    }
+  };
+}
+var GRAPH_CHART_TYPE = "graph";
+var MAP_CHART_TYPE = "map";
+function buildLayoutState(nodes, edges, width, height) {
+  const ids = [];
+  const index = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const id = String(node?.id ?? "").trim();
+    if (!id || index.has(id)) continue;
+    index.set(id, ids.length);
+    ids.push(id);
+  }
+  const pairs = [];
+  for (const edge of edges) {
+    const a = index.get(String(edge?.source ?? "").trim());
+    const b = index.get(String(edge?.target ?? "").trim());
+    if (a == null || b == null || a === b) continue;
+    pairs.push([a, b]);
+  }
+  const n = ids.length;
+  return {
+    ids,
+    index,
+    x: new Float64Array(n),
+    y: new Float64Array(n),
+    pairs,
+    width,
+    height,
+    k: n > 0 ? Math.sqrt(width * height / n) : 1
+  };
+}
+function relaxLayout(state, rounds, pinned = -1, tempScale = 1) {
+  const { x, y, pairs, width, height, k } = state;
+  const n = x.length;
+  if (n <= 1 || rounds <= 0) return;
+  const cx = width / 2;
+  const cy = height / 2;
+  const gravity = 0.015;
+  const tempStart = Math.min(width, height) / 6 * tempScale;
+  const dx = new Float64Array(n);
+  const dy = new Float64Array(n);
+  for (let round = 0; round < rounds; round++) {
+    dx.fill(0);
+    dy.fill(0);
+    const temp = Math.max(0.5, tempStart * (1 - round / rounds));
+    for (let i = 0; i < n; i++) {
+      for (let j = i + 1; j < n; j++) {
+        let vx = x[j] - x[i];
+        let vy = y[j] - y[i];
+        let d2 = vx * vx + vy * vy;
+        if (d2 < 0.01) {
+          vx = 0.5 + (j - i) % 7 * 0.25;
+          vy = (i * 3 + j) % 5 * 0.3 - 0.6;
+          d2 = vx * vx + vy * vy;
+        }
+        const d = Math.sqrt(d2);
+        const f = k * k / d;
+        const ux = vx / d * f;
+        const uy = vy / d * f;
+        dx[i] -= ux;
+        dy[i] -= uy;
+        dx[j] += ux;
+        dy[j] += uy;
+      }
+    }
+    for (const [a, b] of pairs) {
+      let vx = x[b] - x[a];
+      let vy = y[b] - y[a];
+      let d = Math.sqrt(vx * vx + vy * vy);
+      if (d < 0.01) {
+        vx = 1;
+        vy = 0;
+        d = 1;
+      }
+      const f = Math.min(d * d / k, k * 3);
+      const ux = vx / d * f;
+      const uy = vy / d * f;
+      dx[a] += ux;
+      dy[a] += uy;
+      dx[b] -= ux;
+      dy[b] -= uy;
+    }
+    for (let i = 0; i < n; i++) {
+      if (i === pinned) continue;
+      dx[i] += (cx - x[i]) * gravity;
+      dy[i] += (cy - y[i]) * gravity;
+      const dm = Math.sqrt(dx[i] * dx[i] + dy[i] * dy[i]);
+      if (dm <= 0) continue;
+      const v = Math.min(dm, temp) / dm;
+      x[i] = Math.min(width, Math.max(0, x[i] + dx[i] * v));
+      y[i] = Math.min(height, Math.max(0, y[i] + dy[i] * v));
+    }
+  }
+}
+function fitLayout(state, margin) {
+  const { x, y, width, height } = state;
+  const n = x.length;
+  if (n === 0) return;
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (let i = 0; i < n; i++) {
+    if (x[i] < minX) minX = x[i];
+    if (x[i] > maxX) maxX = x[i];
+    if (y[i] < minY) minY = y[i];
+    if (y[i] > maxY) maxY = y[i];
+  }
+  const spanX = Math.max(1e-6, maxX - minX);
+  const spanY = Math.max(1e-6, maxY - minY);
+  const scale = Math.min((width - margin * 2) / spanX, (height - margin * 2) / spanY, 4);
+  const offX = (width - spanX * scale) / 2 - minX * scale;
+  const offY = (height - spanY * scale) / 2 - minY * scale;
+  for (let i = 0; i < n; i++) {
+    x[i] = x[i] * scale + offX;
+    y[i] = y[i] * scale + offY;
+  }
+}
+function initRingLayout(state, seed = 0) {
+  const { ids, index, x, y, width, height } = state;
+  const n = ids.length;
+  if (n === 0) return;
+  if (n === 1) {
+    x[0] = width / 2;
+    y[0] = height / 2;
+    return;
+  }
+  const order = [...ids].sort();
+  const radius = Math.min(width, height) / 2 * 0.76;
+  const deg = (seed % 360 + 360) % 360;
+  const seedAngle = deg * Math.PI / 180;
+  for (let rank = 0; rank < n; rank++) {
+    const i = index.get(order[rank] ?? "") ?? -1;
+    if (i < 0) continue;
+    const angle = seedAngle - Math.PI / 2 + rank * 2 * Math.PI / n;
+    x[i] = width / 2 + radius * Math.cos(angle);
+    y[i] = height / 2 + radius * Math.sin(angle);
+  }
+}
+function layoutGraph(nodes, edges, opts) {
+  const width = Math.max(16, opts?.width ?? 320);
+  const height = Math.max(16, opts?.height ?? 200);
+  const state = buildLayoutState(nodes, edges, width, height);
+  if (state.ids.length === 0) return /* @__PURE__ */ new Map();
+  initRingLayout(state, opts?.seed ?? 0);
+  relaxLayout(state, Math.max(1, Math.round(opts?.iterations ?? 300)));
+  fitLayout(state, Math.max(8, Math.min(width, height) * 0.08));
+  const out = /* @__PURE__ */ new Map();
+  state.ids.forEach((id, i) => out.set(id, { x: state.x[i], y: state.y[i] }));
+  return out;
+}
+var datumMarkInfo = /* @__PURE__ */ new WeakMap();
+var datumEventControl = /* @__PURE__ */ new WeakMap();
+function dispatchDatumEvent(root, type, mark, phase, pointer) {
+  const numOr = (v) => v == null ? void 0 : Number(v);
+  const detail = {
+    type,
+    phase,
+    chart: chartDelegateMeta.get(root)?.type() ?? "vbar",
+    index: numOr(mark.getAttribute("data-chart-index")),
+    seriesIndex: numOr(mark.getAttribute("data-chart-series")),
+    seriesName: mark.getAttribute("data-chart-series-name") ?? void 0,
+    label: mark.getAttribute("data-chart-label") ?? void 0,
+    value: numOr(mark.getAttribute("data-chart-value")),
+    target: mark,
+    pointerX: pointer?.x,
+    pointerY: pointer?.y,
+    datum: datumMarkInfo.get(mark)?.datum
+  };
+  emitIcen(root, `icen:chart-${type}`, detail);
+}
+function bindDatumEvents(root) {
+  const existing = datumEventControl.get(root);
+  if (existing) return existing;
+  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;
+  let suppressClick = false;
+  const bindings = [];
+  const on = (type, fn) => {
+    const listener = (evt) => fn(evt);
+    root.addEventListener(type, listener);
+    bindings.push([type, listener]);
+  };
+  const enterMark = (mark, px, py) => {
+    hoverMark = mark;
+    mark.classList.add("is-hover");
+    dispatchDatumEvent(root, "hover", mark, "enter", { x: px, y: py });
+    if (tipEnabled()) {
+      const tip = chartTooltip();
+      tip.textContent = datumMarkInfo.get(mark)?.tip ?? tooltipText(mark);
+      applyTooltipSizing(mark);
+      tip.hidden = false;
+      moveTooltip(px, py);
+    }
+  };
+  const leaveMark = (pointer) => {
+    if (!hoverMark) return;
+    hoverMark.classList.remove("is-hover");
+    dispatchDatumEvent(root, "hover", hoverMark, "leave", pointer);
+    hoverMark = null;
+    chartTooltip().hidden = true;
+  };
+  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) return;
+    dispatchDatumEvent(root, "hover", hoverMark, "move", { x: e.clientX, y: e.clientY });
+    if (tipEnabled()) 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) => {
+    if (suppressClick) {
+      suppressClick = false;
+      return;
+    }
+    const mark = markOf(e);
+    if (mark) dispatchDatumEvent(root, "click", mark, void 0, { x: e.clientX, y: e.clientY });
+  });
+  on("dblclick", (e) => {
+    const mark = markOf(e);
+    if (mark) dispatchDatumEvent(root, "dblclick", mark, void 0, { x: e.clientX, y: e.clientY });
+  });
+  on("contextmenu", (e) => {
+    const mark = markOf(e);
+    if (!mark) return;
+    e.preventDefault();
+    dispatchDatumEvent(root, "contextmenu", mark, void 0, { x: e.clientX, y: e.clientY });
+  });
+  const control = {
+    unbind() {
+      for (const [type, listener] of bindings) root.removeEventListener(type, listener);
+      bindings.length = 0;
+      if (hoverMark) {
+        hoverMark.classList.remove("is-hover");
+        hoverMark = null;
+      }
+      chartTooltip().hidden = true;
+      datumEventControl.delete(root);
+    },
+    suppressNextClick() {
+      suppressClick = true;
+    }
+  };
+  datumEventControl.set(root, control);
+  return control;
+}
+function buildClusterModel(keys, labels) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const key of keys) {
+    if (typeof key === "string" && key !== "") seen.add(key);
+  }
+  if (seen.size === 0) return null;
+  const list = [...seen].sort();
+  return {
+    keys: list,
+    indexOf: new Map(list.map((k, i) => [k, i])),
+    label: (key) => labels?.[key] ?? key,
+    color: (index) => paletteVar(index + 1)
+  };
+}
+function registerDatumMark(mark, datum, tip) {
+  datumMarkInfo.set(mark, { datum, tip });
+}
+function truncateText(text, max = 8) {
+  const chars = Array.from(text);
+  return chars.length > max ? `${chars.slice(0, max).join("")}\u2026` : text;
+}
+function svgClientPoint(svg, clientX, clientY, viewBoxWidth, viewBoxHeight) {
+  const rect = svg.getBoundingClientRect();
+  const scale = Math.min(rect.width / viewBoxWidth, rect.height / viewBoxHeight);
+  if (!Number.isFinite(scale) || scale <= 0) {
+    return { x: viewBoxWidth / 2, y: viewBoxHeight / 2 };
+  }
+  return {
+    x: (clientX - rect.left - (rect.width - viewBoxWidth * scale) / 2) / scale,
+    y: (clientY - rect.top - (rect.height - viewBoxHeight * scale) / 2) / scale
+  };
+}
+function normalizeGraphSpec(raw) {
+  let src = raw;
+  if (typeof src === "string") {
+    try {
+      src = JSON.parse(src);
+    } catch {
+      src = {};
+    }
+  }
+  if (!src || typeof src !== "object" || Array.isArray(src)) src = {};
+  const s = src;
+  const spec = { ...normalizeChartSpec(s), type: "graph", nodes: [], edges: [] };
+  if (Array.isArray(s.nodes)) {
+    const seen = /* @__PURE__ */ new Set();
+    for (const v of s.nodes) {
+      if (!v || typeof v !== "object" || Array.isArray(v)) continue;
+      const r = v;
+      const id = String(r.id ?? "").trim();
+      if (!id || seen.has(id)) continue;
+      seen.add(id);
+      const node = { id };
+      if (r.label != null) node.label = String(r.label);
+      if (typeof r.cluster === "string" && r.cluster !== "") node.cluster = r.cluster;
+      const weight = toNum(r.weight);
+      if (weight != null) node.weight = weight;
+      if (r.meta && typeof r.meta === "object" && !Array.isArray(r.meta)) {
+        node.meta = { ...r.meta };
+      }
+      spec.nodes.push(node);
+    }
+  }
+  const known = new Set(spec.nodes.map((n) => n.id));
+  if (Array.isArray(s.edges)) {
+    for (const v of s.edges) {
+      if (!v || typeof v !== "object" || Array.isArray(v)) continue;
+      const r = v;
+      const source = String(r.source ?? "").trim();
+      const target = String(r.target ?? "").trim();
+      if (!known.has(source) || !known.has(target) || source === target) continue;
+      const edge = { source, target };
+      const weight = toNum(r.weight);
+      if (weight != null) edge.weight = weight;
+      spec.edges.push(edge);
+    }
+  }
+  if (s.directed === true) spec.directed = true;
+  if (s.clusterLabels && typeof s.clusterLabels === "object" && !Array.isArray(s.clusterLabels)) {
+    const labels = {};
+    for (const [key, value] of Object.entries(s.clusterLabels)) {
+      if (typeof value === "string" && value !== "") labels[key] = value;
+    }
+    spec.clusterLabels = labels;
+  }
+  return spec;
+}
+function normalizeMapSpec(raw) {
+  let src = raw;
+  if (typeof src === "string") {
+    try {
+      src = JSON.parse(src);
+    } catch {
+      src = {};
+    }
+  }
+  if (!src || typeof src !== "object" || Array.isArray(src)) src = {};
+  const s = src;
+  const spec = { ...normalizeChartSpec(s), type: "map", points: [] };
+  if (Array.isArray(s.points)) {
+    const seen = /* @__PURE__ */ new Set();
+    for (const v of s.points) {
+      if (!v || typeof v !== "object" || Array.isArray(v)) continue;
+      const r = v;
+      const id = String(r.id ?? "").trim();
+      if (!id || seen.has(id)) continue;
+      seen.add(id);
+      const point = { id, x: toNum(r.x) ?? 0, y: toNum(r.y) ?? 0 };
+      if (typeof r.cluster === "string" && r.cluster !== "") point.cluster = r.cluster;
+      if (r.label != null) point.label = String(r.label);
+      if (r.meta && typeof r.meta === "object" && !Array.isArray(r.meta)) {
+        point.meta = { ...r.meta };
+      }
+      spec.points.push(point);
+    }
+  }
+  if (s.clusters && typeof s.clusters === "object" && !Array.isArray(s.clusters)) {
+    const labels = {};
+    for (const [key, value] of Object.entries(s.clusters)) {
+      if (typeof value === "string" && value !== "") labels[key] = value;
+    }
+    spec.clusters = labels;
+  }
+  return spec;
+}
+var GRAPH_W = 360;
+var GRAPH_H = 260;
+var GRAPH_PAD = 28;
+var GRAPH_LW = GRAPH_W - GRAPH_PAD * 2;
+var GRAPH_LH = GRAPH_H - GRAPH_PAD * 2;
+var graphMarkerSeq = 0;
+function renderGraph(el, raw) {
+  const noop = () => void 0;
+  let current = normalizeGraphSpec(raw);
+  if (typeof document === "undefined") {
+    return { el, spec: current, update: noop, on: () => noop, destroy: noop };
+  }
+  const legendState = { hidden: null };
+  let layout = null;
+  let svgRef = null;
+  let nodeEls = [];
+  let edgeList = [];
+  let nodeRadii = [];
+  let directed = false;
+  let arrowId = "";
+  const edgeEnds = (from, to) => {
+    const ax = GRAPH_PAD + (layout ? layout.x[from] : 0);
+    const ay = GRAPH_PAD + (layout ? layout.y[from] : 0);
+    const bx = GRAPH_PAD + (layout ? layout.x[to] : 0);
+    const by = GRAPH_PAD + (layout ? layout.y[to] : 0);
+    if (!directed) {
+      return { x1: ax.toFixed(1), y1: ay.toFixed(1), x2: bx.toFixed(1), y2: by.toFixed(1) };
+    }
+    const dx = bx - ax;
+    const dy = by - ay;
+    const d = Math.hypot(dx, dy) || 1;
+    const cut = (nodeRadii[to] ?? 6) + 4;
+    return {
+      x1: ax.toFixed(1),
+      y1: ay.toFixed(1),
+      x2: (bx - dx / d * cut).toFixed(1),
+      y2: (by - dy / d * cut).toFixed(1)
+    };
+  };
+  const paint = (body) => {
+    directed = current.directed === true;
+    layout = null;
+    svgRef = null;
+    nodeEls = [];
+    edgeList = [];
+    arrowId = "";
+    const nodes = current.nodes;
+    if (nodes.length === 0) {
+      nodeRadii = [];
+      renderEmpty(body, current.emptyLabel);
+      return;
+    }
+    const clusters = buildClusterModel(nodes.map((n) => n.cluster), current.clusterLabels);
+    const tone = toneVar(current.tone);
+    const idOf = new Map(nodes.map((n, i) => [n.id, i]));
+    const degree = nodes.map(() => 0);
+    for (const e of current.edges) {
+      const a = idOf.get(e.source);
+      const b = idOf.get(e.target);
+      if (a == null || b == null || a === b) continue;
+      degree[a] += 1;
+      degree[b] += 1;
+    }
+    const weights = nodes.map((n, i) => n.weight ?? degree[i]);
+    let wMin = Infinity;
+    let wMax = -Infinity;
+    for (const w of weights) {
+      if (w < wMin) wMin = w;
+      if (w > wMax) wMax = w;
+    }
+    nodeRadii = weights.map((w) => 6 + (wMax > wMin ? (w - wMin) / (wMax - wMin) : 0.5) * 12);
+    let eMin = Infinity;
+    let eMax = -Infinity;
+    for (const e of current.edges) {
+      if (e.weight == null) continue;
+      if (e.weight < eMin) eMin = e.weight;
+      if (e.weight > eMax) eMax = e.weight;
+    }
+    const edgeWidth = (e) => e.weight == null ? 1 : 0.6 + (eMax > eMin ? (e.weight - eMin) / (eMax - eMin) : 0.5) * 1.9;
+    const wrap = document.createElement("div");
+    wrap.className = "chart-graph";
+    if (current.tone) wrap.style.setProperty("--chart-tone", toneVar(current.tone));
+    const svg = svgEl("svg", { viewBox: `0 0 ${GRAPH_W} ${GRAPH_H}`, role: "img" });
+    svgRef = svg;
+    svg.addEventListener("pointerdown", onNodePointerDown);
+    const defs = svgEl("defs", {});
+    if (directed) {
+      arrowId = `icen-chart-graph-arrow-${++graphMarkerSeq}`;
+      const marker = svgEl("marker", {
+        id: arrowId,
+        viewBox: "0 0 8 8",
+        refX: "7",
+        refY: "4",
+        markerWidth: "6",
+        markerHeight: "6",
+        orient: "auto"
+      });
+      marker.appendChild(svgEl("path", { d: "M0.5,0.8 L7.5,4 L0.5,7.2 Z", fill: "var(--token-text-faint)" }));
+      defs.appendChild(marker);
+    }
+    layout = buildLayoutState(nodes, current.edges, GRAPH_LW, GRAPH_LH);
+    initRingLayout(layout, 0);
+    relaxLayout(layout, 300);
+    fitLayout(layout, 20);
+    const edgeLayer = svgEl("g", { class: "chart-graph-edges" });
+    const nodeLayer = svgEl("g", { class: "chart-graph-nodes" });
+    for (const e of current.edges) {
+      const from = idOf.get(e.source);
+      const to = idOf.get(e.target);
+      if (from == null || to == null || from === to) continue;
+      const line = svgEl("line", {
+        ...edgeEnds(from, to),
+        stroke: "var(--token-line-soft)",
+        "stroke-width": edgeWidth(e).toFixed(2),
+        ...directed ? { "marker-end": `url(#${arrowId})` } : {}
+      });
+      line.classList.add("chart-graph-edge");
+      const fromKey = nodes[from]?.cluster;
+      const toKey = nodes[to]?.cluster;
+      if (fromKey) line.setAttribute("data-edge-cluster-from", fromKey);
+      if (toKey) line.setAttribute("data-edge-cluster-to", toKey);
+      edgeList.push({ el: line, from, to });
+      edgeLayer.appendChild(line);
+    }
+    nodes.forEach((node, i) => {
+      const clusterKey = node.cluster;
+      const ci = clusterKey != null && clusters ? clusters.indexOf.get(clusterKey) : void 0;
+      const clusterName = ci != null && clusters && clusterKey != null ? clusters.label(clusterKey) : void 0;
+      const fill = clusters ? ci != null ? clusters.color(ci) : "var(--token-text-faint)" : tone;
+      const pos = { x: GRAPH_PAD + layout.x[i], y: GRAPH_PAD + layout.y[i] };
+      const g = svgEl("g", {
+        class: "chart-graph-node",
+        transform: `translate(${pos.x.toFixed(1)},${pos.y.toFixed(1)})`
+      });
+      g.setAttribute("data-chart-node-id", node.id);
+      setMarkData(g, {
+        index: i,
+        seriesIndex: ci,
+        seriesName: clusterName,
+        label: node.label ?? node.id,
+        value: weights[i]
+      });
+      const dot = svgEl("circle", {
+        class: "chart-graph-dot",
+        r: (nodeRadii[i] ?? 6).toFixed(1),
+        fill,
+        "fill-opacity": "0.92",
+        stroke: "var(--token-card)",
+        "stroke-width": "1.5"
+      });
+      const hit = svgEl("circle", {
+        class: "chart-graph-hit",
+        r: String(Math.max((nodeRadii[i] ?? 6) + 4, 11)),
+        fill: "transparent",
+        "data-chart-hit": "1"
+      });
+      const labelText = truncateText(node.label ?? node.id);
+      const head = clusterName ? `${clusterName} \xB7 ${labelText}` : labelText;
+      const tip = weights[i] > 0 ? `${head}\uFF1A${weights[i]}` : head;
+      const title = svgEl("title", {});
+      title.textContent = tip;
+      g.append(dot, hit, title);
+      registerDatumMark(g, { id: node.id, label: node.label ?? node.id, cluster: clusterKey, meta: node.meta }, tip);
+      nodeEls.push(g);
+      nodeLayer.appendChild(g);
+    });
+    svg.append(defs, edgeLayer, nodeLayer);
+    wrap.appendChild(svg);
+    body.appendChild(wrap);
+    if (clusters) {
+      const legend = toggleLegend(
+        clusters.keys.map((key, ci) => ({ key, label: clusters.label(key), tone: ci + 1, si: ci })),
+        wrap
+      );
+      body.appendChild(legend);
+      const syncEdges = () => {
+        const hiddenOf = (key) => key != null && legend.querySelector(`[data-chart-key="${CSS.escape(key)}"]`)?.classList.contains("is-off") === true;
+        for (const edge of edgeList) {
+          edge.el.classList.toggle(
+            "is-off",
+            hiddenOf(edge.el.getAttribute("data-edge-cluster-from")) || hiddenOf(edge.el.getAttribute("data-edge-cluster-to"))
+          );
+        }
+      };
+      legend.addEventListener("click", syncEdges);
+      legend.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") syncEdges();
+      });
+    }
+  };
+  const paintPositions = () => {
+    if (!layout) return;
+    for (let i = 0; i < nodeEls.length; i++) {
+      nodeEls[i]?.setAttribute(
+        "transform",
+        `translate(${(GRAPH_PAD + layout.x[i]).toFixed(1)},${(GRAPH_PAD + layout.y[i]).toFixed(1)})`
+      );
+    }
+    for (const edge of edgeList) {
+      const ends = edgeEnds(edge.from, edge.to);
+      edge.el.setAttribute("x1", ends.x1);
+      edge.el.setAttribute("y1", ends.y1);
+      edge.el.setAttribute("x2", ends.x2);
+      edge.el.setAttribute("y2", ends.y2);
+    }
+  };
+  let drag = null;
+  const applyDragFrame = () => {
+    if (!drag || !layout || !svgRef) return;
+    const p = svgClientPoint(svgRef, drag.px, drag.py, GRAPH_W, GRAPH_H);
+    const i = drag.i;
+    layout.x[i] = Math.min(GRAPH_LW, Math.max(0, p.x - GRAPH_PAD));
+    layout.y[i] = Math.min(GRAPH_LH, Math.max(0, p.y - GRAPH_PAD));
+    relaxLayout(layout, 20, i, 0.4);
+    paintPositions();
+    drag.raf = 0;
+  };
+  const onDragMove = (e) => {
+    if (!drag) return;
+    if (Math.abs(e.clientX - drag.px) + Math.abs(e.clientY - drag.py) > 2) drag.moved = true;
+    drag.px = e.clientX;
+    drag.py = e.clientY;
+    if (drag.raf === 0) drag.raf = requestAnimationFrame(applyDragFrame);
+  };
+  const endDrag = () => {
+    if (!drag) return;
+    if (drag.raf !== 0) cancelAnimationFrame(drag.raf);
+    nodeEls[drag.i]?.classList.remove("is-drag");
+    svgRef?.classList.remove("is-dragging");
+    if (drag.moved) eventsControl.suppressNextClick();
+    drag = null;
+    window.removeEventListener("pointermove", onDragMove);
+    window.removeEventListener("pointerup", endDrag);
+    window.removeEventListener("pointercancel", endDrag);
+  };
+  const onNodePointerDown = (e) => {
+    if (e.button !== 0 || !layout) return;
+    const target = e.target;
+    const g = target instanceof Element ? target.closest(".chart-graph-node") : null;
+    if (!g) return;
+    const i = layout.index.get(g.getAttribute("data-chart-node-id") ?? "");
+    if (i == null) return;
+    e.preventDefault();
+    endDrag();
+    drag = { i, moved: false, raf: 0, px: e.clientX, py: e.clientY };
+    g.classList.add("is-drag");
+    svgRef?.classList.add("is-dragging");
+    window.addEventListener("pointermove", onDragMove);
+    window.addEventListener("pointerup", endDrag);
+    window.addEventListener("pointercancel", endDrag);
+  };
+  chartDelegateMeta.set(el, { type: () => GRAPH_CHART_TYPE, tooltip: () => current.tooltip !== false });
+  const eventsControl = bindDatumEvents(el);
+  const render = () => {
+    if (drag) endDrag();
+    const clusters = buildClusterModel(current.nodes.map((n) => n.cluster), current.clusterLabels);
+    if (current.legend !== void 0) legendState.hidden = current.legend === false;
+    withChrome(el, current, clusters != null, paint, legendState);
+  };
+  render();
+  return {
+    el,
+    spec: current,
+    update(next) {
+      current = normalizeGraphSpec(next);
+      render();
+    },
+    on(name, listener) {
+      const handler = (event) => {
+        listener(event.detail, event);
+      };
+      el.addEventListener(`icen:chart-${name}`, handler);
+      return () => el.removeEventListener(`icen:chart-${name}`, handler);
+    },
+    destroy() {
+      if (drag) endDrag();
+      el.textContent = "";
+      eventsControl.unbind();
+      chartTooltip().hidden = true;
+    }
+  };
+}
+var MAP_W = 360;
+var MAP_H = 220;
+var MAP_PAD = 14;
+function renderMap(el, raw) {
+  const noop = () => void 0;
+  let current = normalizeMapSpec(raw);
+  if (typeof document === "undefined") {
+    return { el, spec: current, update: noop, on: () => noop, destroy: noop };
+  }
+  const legendState = { hidden: null };
+  const paint = (body) => {
+    const points = current.points.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y));
+    if (points.length === 0) {
+      renderEmpty(body, current.emptyLabel);
+      return;
+    }
+    const clusters = buildClusterModel(points.map((p) => p.cluster), current.clusters);
+    const tone = toneVar(current.tone);
+    let xMin = Infinity;
+    let xMax = -Infinity;
+    let yMin = Infinity;
+    let yMax = -Infinity;
+    for (const p of points) {
+      if (p.x < xMin) xMin = p.x;
+      if (p.x > xMax) xMax = p.x;
+      if (p.y < yMin) yMin = p.y;
+      if (p.y > yMax) yMax = p.y;
+    }
+    if (xMax === xMin) xMax = xMin + 1;
+    if (yMax === yMin) yMax = yMin + 1;
+    const xAt = (x) => MAP_PAD + (x - xMin) / (xMax - xMin) * (MAP_W - MAP_PAD * 2);
+    const yAt = (y) => MAP_H - MAP_PAD - (y - yMin) / (yMax - yMin) * (MAP_H - MAP_PAD * 2);
+    const wrap = document.createElement("div");
+    wrap.className = "chart-map";
+    if (current.tone) wrap.style.setProperty("--chart-tone", toneVar(current.tone));
+    const svg = svgEl("svg", { viewBox: `0 0 ${MAP_W} ${MAP_H}`, role: "img" });
+    for (let i = 0; i <= 3; i++) {
+      const y = MAP_PAD + i * (MAP_H - MAP_PAD * 2) / 3;
+      svg.appendChild(svgEl("line", {
+        x1: String(MAP_PAD),
+        x2: String(MAP_W - MAP_PAD),
+        y1: String(y),
+        y2: String(y),
+        stroke: "var(--token-line-soft)",
+        "stroke-width": "0.75",
+        "stroke-dasharray": "2 4"
+      }));
+    }
+    for (let i = 0; i <= 4; i++) {
+      const x = MAP_PAD + i * (MAP_W - MAP_PAD * 2) / 4;
+      svg.appendChild(svgEl("line", {
+        x1: String(x),
+        x2: String(x),
+        y1: String(MAP_PAD),
+        y2: String(MAP_H - MAP_PAD),
+        stroke: "var(--token-line-soft)",
+        "stroke-width": "0.75",
+        "stroke-dasharray": "2 4"
+      }));
+    }
+    points.forEach((p, i) => {
+      const ci = p.cluster != null && clusters ? clusters.indexOf.get(p.cluster) : void 0;
+      const clusterName = ci != null && clusters && p.cluster != null ? clusters.label(p.cluster) : void 0;
+      const color = clusters ? ci != null ? clusters.color(ci) : "var(--token-text-faint)" : tone;
+      const label = p.label ?? p.id;
+      const labelText = truncateText(label);
+      const tip = clusterName ? `${clusterName} \xB7 ${labelText}` : labelText;
+      const g = svgEl("g", {
+        class: "chart-map-point",
+        transform: `translate(${xAt(p.x).toFixed(1)},${yAt(p.y).toFixed(1)})`
+      });
+      g.setAttribute("data-chart-point-id", p.id);
+      setMarkData(g, { index: i, seriesIndex: ci, seriesName: clusterName, label });
+      const dot = svgEl("circle", {
+        class: "chart-map-dot",
+        r: "4",
+        fill: color,
+        "fill-opacity": "0.7",
+        stroke: color,
+        "stroke-width": "1"
+      });
+      const hit = svgEl("circle", { class: "chart-map-hit", r: "9", fill: "transparent", "data-chart-hit": "1" });
+      const title = svgEl("title", {});
+      title.textContent = tip;
+      g.append(dot, hit, title);
+      registerDatumMark(g, { id: p.id, label, cluster: p.cluster, meta: p.meta }, tip);
+      svg.appendChild(g);
+    });
+    wrap.appendChild(svg);
+    body.appendChild(wrap);
+    if (clusters) {
+      body.appendChild(
+        toggleLegend(
+          clusters.keys.map((key, ci) => ({ key, label: clusters.label(key), tone: ci + 1, si: ci })),
+          wrap
+        )
+      );
+    }
+  };
+  chartDelegateMeta.set(el, { type: () => MAP_CHART_TYPE, tooltip: () => current.tooltip !== false });
+  const eventsControl = bindDatumEvents(el);
+  const render = () => {
+    const clusters = buildClusterModel(current.points.map((p) => p.cluster), current.clusters);
+    if (current.legend !== void 0) legendState.hidden = current.legend === false;
+    withChrome(el, current, clusters != null, paint, legendState);
+  };
+  render();
+  return {
+    el,
+    spec: current,
+    update(next) {
+      current = normalizeMapSpec(next);
+      render();
+    },
+    on(name, listener) {
+      const handler = (event) => {
+        listener(event.detail, event);
+      };
+      el.addEventListener(`icen:chart-${name}`, handler);
+      return () => el.removeEventListener(`icen:chart-${name}`, handler);
+    },
+    destroy() {
+      el.textContent = "";
+      eventsControl.unbind();
       chartTooltip().hidden = true;
     }
   };
 }
 export {
+  bindChartEvents,
   chartFormatValue,
   inferChartType,
+  layoutGraph,
   normalizeChartSpec,
+  registerChartTone,
   renderArea,
   renderCalendar,
   renderChart,
   renderDonut,
   renderGauge,
+  renderGraph,
   renderHBar,
   renderHeatmap,
   renderLine,
+  renderMap,
   renderRadar,
   renderScatter,
   renderSparkline,