@icen.ai/ui 0.8.0 → 0.9.0

package/dist/behaviors/ai-tools.mjs

@@ -1,6 +1,16 @@
+// 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 toneVar(tone = "accent") {
+  const registered = REGISTERED_TONES.get(tone);
+  if (registered) return registered;
   switch (tone) {
     case "success":
       return "var(--token-success)";
@@ -154,17 +164,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 +190,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 +209,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 +260,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 +300,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 +313,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 +329,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 +380,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 +490,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 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;
@@ -584,13 +598,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;
@@ -609,8 +622,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) {
@@ -629,48 +675,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) {
@@ -725,9 +752,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;
@@ -771,9 +800,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) {
@@ -787,6 +818,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");
@@ -794,20 +829,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`);
@@ -816,39 +844,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) {
@@ -893,7 +910,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++) {
@@ -915,7 +932,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) {
@@ -939,7 +956,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);
@@ -948,6 +965,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);
@@ -1078,7 +1097,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;
@@ -1148,6 +1167,7 @@ function normalizeChartSpec(raw) {
   }
   return spec;
 }
+var TEMPORAL_HIT_RATIO = 0.6;
 function looksTemporal(labels) {
   if (labels.length === 0) return false;
   let hits = 0;
@@ -1161,7 +1181,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";
@@ -1196,7 +1216,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() {
@@ -1209,6 +1229,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");
@@ -1228,6 +1254,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":
@@ -1250,9 +1371,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 };
@@ -1287,10 +1405,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 });
@@ -1306,63 +1424,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,
@@ -1380,14 +1443,20 @@ function renderChart(el, raw) {
     },
     destroy() {
       root.textContent = "";
-      attached.__icenChartBound = false;
+      unbindEvents();
       chartTooltip().hidden = true;
     }
   };
 }
+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;
 
 // src/behaviors/ai-tools.ts
 var toolRegistry = /* @__PURE__ */ new Map();
+var LIVE_AREAS = /* @__PURE__ */ new Set();
 function registerAiTool(def) {
   if (def && typeof def.name === "string" && def.name && typeof def.run === "function") {
     toolRegistry.set(def.name, def);
@@ -1395,6 +1464,13 @@ function registerAiTool(def) {
 }
 function unregisterAiTool(name) {
   toolRegistry.delete(name);
+  for (const entry of LIVE_AREAS) {
+    if (!entry.el.isConnected) {
+      LIVE_AREAS.delete(entry);
+      continue;
+    }
+    entry.purge(name);
+  }
 }
 function getAiTool(name) {
   return toolRegistry.get(name);
@@ -1493,7 +1569,7 @@ function isBrowserTools() {
 }
 function emitArea(area, name, detail) {
   try {
-    area.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+    emitIcen(area, name, detail);
   } catch {
   }
 }
@@ -1508,7 +1584,6 @@ function createAiToolArea(el, opts = {}) {
   area.classList.add("ai-tools-mount");
   let allow = opts.tools;
   let max = opts.max;
-  let seq = 0;
   const records = [];
   const listeners = [];
   const notify = () => {
@@ -1524,13 +1599,25 @@ function createAiToolArea(el, opts = {}) {
       emitArea(area, "icen:ai-tool-evict", { name: oldest.def.name, el: oldest.el });
     }
   };
+  const purgeTool = (toolName) => {
+    let removed = false;
+    for (let i = records.length - 1; i >= 0; i--) {
+      const r = records[i];
+      if (r.def.name !== toolName) continue;
+      r.el?.remove();
+      records.splice(i, 1);
+      removed = true;
+    }
+    if (removed) notify();
+  };
+  LIVE_AREAS.add({ el: area, purge: purgeTool });
   const areaApi = {
     el: area,
     get count() {
       return records.filter((r) => r.el).length;
     },
     can(name) {
-      return toolAllowed(name, allow) && toolRegistry.has(name);
+      return toolAllowed(name, allow) && getAiTool(name) != null;
     },
     setTools(tools) {
       allow = tools;
@@ -1552,9 +1639,24 @@ function createAiToolArea(el, opts = {}) {
       };
     },
     call(name, input) {
-      const def = toolRegistry.get(name);
+      const def = getAiTool(name);
       if (!def || !toolAllowed(name, allow)) return null;
-      void seq;
+      if (def.present === "data") {
+        const record2 = { def, ts: Date.now(), input, result: void 0 };
+        emitArea(area, "icen:ai-tool-call", { name, input, el: area });
+        let ok2 = true;
+        let error2;
+        try {
+          record2.result = def.run(input, document.createElement("div"));
+        } catch (err) {
+          ok2 = false;
+          error2 = err instanceof Error ? err.message : String(err);
+        }
+        records.push(record2);
+        emitArea(area, "icen:ai-tool-result", { name, ok: ok2, el: area, error: error2, count: records.length });
+        notify();
+        return record2;
+      }
       const item = document.createElement("div");
       item.className = "ai-tools-item";
       const head = document.createElement("button");
@@ -1574,6 +1676,7 @@ function createAiToolArea(el, opts = {}) {
       const remove = document.createElement("span");
       remove.className = "ai-tools-item-remove";
       remove.setAttribute("role", "button");
+      remove.tabIndex = 0;
       remove.setAttribute("aria-label", `\u79FB\u9664 ${def.name} \u6302\u8F7D`);
       remove.textContent = "\xD7";
       const mount = document.createElement("div");
@@ -1589,6 +1692,13 @@ function createAiToolArea(el, opts = {}) {
         mount.hidden = open;
         item.classList.toggle("is-collapsed", open);
       });
+      head.addEventListener("keydown", (e) => {
+        if (e.key !== "Enter" && e.key !== " ") return;
+        if (!(e.target instanceof Element) || !e.target.closest(".ai-tools-item-remove")) return;
+        e.preventDefault();
+        e.stopPropagation();
+        remove.click();
+      });
       const record = { def, el: item, ts: Date.now(), input, result: void 0 };
       remove.addEventListener("click", (e) => {
         e.stopPropagation();
@@ -1602,7 +1712,6 @@ function createAiToolArea(el, opts = {}) {
       let error;
       try {
         record.result = def.run(input, mount);
-        record.handle = record.result;
       } catch (err) {
         ok = false;
         error = err instanceof Error ? err.message : String(err);