@icen.ai/ui 0.8.0 → 0.9.0

package/dist/behaviors/ai-tool.mjs

@@ -1,4 +1,13 @@
 // src/behaviors/ai-core.ts
+var AI_STATUSES = [
+  "pending",
+  "running",
+  "streaming",
+  "approval",
+  "done",
+  "error",
+  "cancelled"
+];
 function aiStatusLabel(s) {
   const labels = {
     pending: "\u7B49\u5F85",
@@ -135,10 +144,9 @@ var BUILTIN_KINDS = {
   note: { label: "\u7B14\u8BB0", icon: ICON_FILE_TEXT, tint: "muted" },
   chart: { label: "\u56FE\u8868", icon: ICON_CHART, tint: "info", summarize: sum((i) => pickStr(i, ["title", "name"])) }
 };
-var FALLBACK_KIND = { label: "\u7B14\u8BB0", icon: ICON_FILE_TEXT, tint: "muted" };
 var kindRegistry = new Map(Object.entries(BUILTIN_KINDS));
 function getAiKind(name) {
-  return kindRegistry.get(name.trim().toLowerCase()) ?? kindRegistry.get("note") ?? FALLBACK_KIND;
+  return kindRegistry.get(name.trim().toLowerCase()) ?? BUILTIN_KINDS.note;
 }
 function str(v) {
   return typeof v === "string" && v ? v : void 0;
@@ -267,6 +275,12 @@ function normalizeContentParts(raw) {
   }
   return out;
 }
+function h(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
 function svgIcon(svg2) {
   if (typeof document === "undefined" || typeof DOMParser === "undefined") return null;
   let parsed;
@@ -279,15 +293,15 @@ function svgIcon(svg2) {
   if (!root || root.tagName.toLowerCase() !== "svg" || parsed.querySelector("parsererror")) {
     return null;
   }
-  const sanitize = (el2) => {
-    for (const attr of Array.from(el2.attributes)) {
+  const sanitize = (el) => {
+    for (const attr of Array.from(el.attributes)) {
       const name = attr.name.toLowerCase();
-      if (name.startsWith("on")) el2.removeAttribute(attr.name);
+      if (name.startsWith("on")) el.removeAttribute(attr.name);
       if ((name === "href" || name === "xlink:href") && attr.value.trim().toLowerCase().startsWith("javascript:")) {
-        el2.removeAttribute(attr.name);
+        el.removeAttribute(attr.name);
       }
     }
-    for (const child of Array.from(el2.children)) {
+    for (const child of Array.from(el.children)) {
       const tag = child.tagName.toLowerCase();
       if (tag === "script" || tag === "foreignobject") {
         child.remove();
@@ -300,21 +314,22 @@ function svgIcon(svg2) {
   return document.importNode(root, true);
 }
 
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/ai-chat.ts
 function safeHref(uri) {
   const s = uri.trim().toLowerCase();
   if (s.startsWith("javascript:") || s.startsWith("data:text/html")) return void 0;
   return uri;
 }
-function el(tag, className, text) {
-  const node = document.createElement(tag);
-  if (className) node.className = className;
-  if (text != null) node.textContent = text;
-  return node;
-}
 function renderAiContentPart(part) {
   if (part.type === "text") {
-    const span = el("span", "ai-msg-text");
+    const span = h("span", "ai-msg-text");
     span.textContent = part.text;
     if (part.state === "streaming") span.classList.add("is-streaming");
     return span;
@@ -349,8 +364,8 @@ function renderAiContentPart(part) {
     return video;
   }
   if (part.type === "file") {
-    const chip = el("span", "ai-msg-file");
-    chip.appendChild(el("span", "ai-msg-file-name", part.filename ?? "\u6587\u4EF6"));
+    const chip = h("span", "ai-msg-file");
+    chip.appendChild(h("span", "ai-msg-file-name", part.filename ?? "\u6587\u4EF6"));
     const href2 = part.url ? safeHref(part.url) : void 0;
     if (href2 && /^(https?:|data:)/i.test(href2)) {
       const a2 = document.createElement("a");
@@ -373,7 +388,10 @@ function renderAiContentPart(part) {
 
 // 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)";
@@ -405,15 +423,15 @@ function sampleLabels(labels, max = 7) {
   return out;
 }
 function svgEl(tag, attrs) {
-  const el2 = document.createElementNS(SVG_NS, tag);
-  for (const [k, v] of Object.entries(attrs)) el2.setAttribute(k, v);
-  return el2;
+  const el = document.createElementNS(SVG_NS, tag);
+  for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+  return el;
 }
-function renderEmpty(el2, label) {
+function renderEmpty(el, label) {
   const box = document.createElement("div");
   box.className = "chart-empty";
   box.textContent = label ?? "\u6682\u65E0\u6570\u636E";
-  el2.appendChild(box);
+  el.appendChild(box);
 }
 function legendItem(label, valueText, tone) {
   const row = document.createElement("div");
@@ -479,30 +497,30 @@ var CHART_EYE_OFF_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24
 function parseChartSvg(svg2) {
   try {
     const doc = new DOMParser().parseFromString(svg2, "image/svg+xml");
-    const el2 = doc.documentElement;
-    return el2 && el2.tagName.toLowerCase() === "svg" && !doc.querySelector("parsererror") ? document.importNode(el2, true) : null;
+    const el = doc.documentElement;
+    return el && el.tagName.toLowerCase() === "svg" && !doc.querySelector("parsererror") ? document.importNode(el, true) : null;
   } catch {
     return null;
   }
 }
-function withChrome(el2, opts, hasLegend, paint, state) {
-  if (el2.dataset.chartBody != null) {
-    el2.textContent = "";
-    paint(el2);
+function withChrome(el, opts, hasLegend, paint, state) {
+  if (el.dataset.chartBody != null) {
+    el.textContent = "";
+    paint(el);
     return;
   }
-  el2.textContent = "";
+  el.textContent = "";
   const body = document.createElement("div");
   body.className = "chart-body";
   body.dataset.chartBody = "";
   if (!opts.title && !hasLegend) {
-    el2.appendChild(body);
+    el.appendChild(body);
     paint(body);
     return;
   }
   let hidden = state && state.hidden != null ? state.hidden : opts.legend === false;
   if (state) state.hidden = hidden;
-  el2.setAttribute("data-legend-hidden", String(hidden));
+  el.setAttribute("data-legend-hidden", String(hidden));
   const head = document.createElement("div");
   head.className = "chart-head";
   const title = document.createElement("div");
@@ -514,7 +532,7 @@ function withChrome(el2, opts, hasLegend, paint, state) {
   eye.className = "chart-legend-eye";
   eye.dataset.chartLegendEye = "";
   const syncEye = () => {
-    const nowHidden = el2.getAttribute("data-legend-hidden") === "true";
+    const nowHidden = el.getAttribute("data-legend-hidden") === "true";
     eye.setAttribute("aria-pressed", String(!nowHidden));
     eye.setAttribute("aria-label", nowHidden ? "\u663E\u793A\u56FE\u4F8B" : "\u9690\u85CF\u56FE\u4F8B");
     eye.setAttribute("title", nowHidden ? "\u663E\u793A\u56FE\u4F8B" : "\u9690\u85CF\u56FE\u4F8B");
@@ -522,22 +540,19 @@ function withChrome(el2, opts, hasLegend, paint, state) {
     if (icon) eye.replaceChildren(icon);
   };
   eye.addEventListener("click", () => {
-    const nowHidden = el2.getAttribute("data-legend-hidden") === "true";
+    const nowHidden = el.getAttribute("data-legend-hidden") === "true";
     hidden = !nowHidden;
     if (state) state.hidden = hidden;
-    el2.setAttribute("data-legend-hidden", String(hidden));
+    el.setAttribute("data-legend-hidden", String(hidden));
     syncEye();
-    el2.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);
-  el2.append(head, body);
+  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) {
@@ -556,10 +571,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) => {
@@ -577,12 +589,12 @@ function toggleLegend(items, scope, _opts) {
   }
   return legend;
 }
-function renderVBar(el2, opts) {
-  if (typeof document === "undefined") return;
+function renderVBar(el, opts) {
+  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));
-  withChrome(el2, opts, seriesList.length > 1, (body) => {
+  withChrome(el, opts, seriesList.length > 1, (body) => {
     if (n === 0 || seriesList.length === 0) {
       renderEmpty(body, opts.emptyLabel);
       return;
@@ -629,12 +641,14 @@ function renderVBar(el2, 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(el2, opts) {
-  if (typeof document === "undefined") return;
-  withChrome(el2, opts, false, (body) => {
+function renderHBar(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, false, (body) => {
     const n = Math.min(opts.labels.length, opts.values.length);
     if (n === 0) {
       renderEmpty(body, opts.emptyLabel);
@@ -667,10 +681,12 @@ function renderHBar(el2, opts) {
     });
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "hbar");
+  return el;
 }
-function renderStack(el2, opts) {
-  if (typeof document === "undefined") return;
-  withChrome(el2, opts, opts.segments.length > 0, (body) => {
+function renderStack(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, opts.segments.length > 0, (body) => {
     const total = opts.segments.reduce((sum2, s) => sum2 + s.value, 0);
     if (opts.segments.length === 0 || total <= 0) {
       renderEmpty(body, opts.emptyLabel);
@@ -678,13 +694,13 @@ function renderStack(el2, 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");
@@ -694,10 +710,12 @@ function renderStack(el2, opts) {
     }
     body.append(bar, legend);
   });
+  attachChartInteraction(el, "stack");
+  return el;
 }
-function renderDonut(el2, opts) {
-  if (typeof document === "undefined") return;
-  withChrome(el2, opts, opts.segments.length > 0, (body) => {
+function renderDonut(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, opts.segments.length > 0, (body) => {
     const total = opts.segments.reduce((sum2, s) => sum2 + s.value, 0);
     if (opts.segments.length === 0 || total <= 0) {
       renderEmpty(body, opts.emptyLabel);
@@ -743,14 +761,16 @@ function renderDonut(el2, opts) {
     wrap.append(svg2, legend);
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "donut");
+  return el;
 }
 var lineGradientSeq = 0;
-function renderLine(el2, opts) {
-  if (typeof document === "undefined") return;
+function renderLine(el, opts) {
+  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));
-  withChrome(el2, opts, seriesList.length > 1, (body) => {
+  withChrome(el, opts, seriesList.length > 1, (body) => {
     if (n === 0 || seriesList.length === 0) {
       renderEmpty(body, opts.emptyLabel);
       return;
@@ -851,12 +871,14 @@ function renderLine(el2, opts) {
     if (defs.firstChild) svg2.insertBefore(defs, svg2.firstChild);
     wrap.append(svg2, 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(el2, opts) {
-  if (typeof document === "undefined") return;
-  withChrome(el2, opts, opts.series.length > 1, (body) => {
+function renderRadar(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, opts.series.length > 1, (body) => {
     const axes = opts.axes;
     const n = axes.length;
     if (n < 3 || opts.series.length === 0) {
@@ -957,13 +979,12 @@ function renderRadar(el2, opts) {
       }
       legendItems.push({ key: s.name || `\u7CFB\u5217${si + 1}`, label: s.name || `\u7CFB\u5217${si + 1}`, tone: s.tone, si });
     });
-    wrap.append(svg2, 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(svg2, ...legend ? [legend] : []);
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "radar");
+  return el;
 }
 function niceCeil(v) {
   if (v <= 0) return 1;
@@ -982,9 +1003,42 @@ function isoDate(d) {
   const day = String(d.getDate()).padStart(2, "0");
   return `${d.getFullYear()}-${m}-${day}`;
 }
-function renderHeatmap(el2, opts) {
-  if (typeof document === "undefined") return;
-  withChrome(el2, opts, true, (body) => {
+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 el;
+  withChrome(el, opts, true, (body) => {
     let entries;
     if (opts.data && opts.data.length > 0) {
       entries = opts.data;
@@ -1002,49 +1056,30 @@ function renderHeatmap(el2, 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(el2, opts) {
-  if (typeof document === "undefined") return;
-  withChrome(el2, opts, false, (body) => {
+function renderSparkline(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, false, (body) => {
     const values = opts.values;
     if (values.length === 0) {
       renderEmpty(body, opts.emptyLabel);
@@ -1098,10 +1133,12 @@ function renderSparkline(el2, opts) {
     wrap.appendChild(svg2);
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "sparkline");
+  return el;
 }
-function renderGauge(el2, opts) {
-  if (typeof document === "undefined") return;
-  el2.textContent = "";
+function renderGauge(el, opts) {
+  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;
   const radius = 42;
@@ -1143,11 +1180,13 @@ function renderGauge(el2, opts) {
     center.appendChild(lab);
   }
   wrap.append(svg2, center);
-  el2.appendChild(wrap);
+  el.appendChild(wrap);
+  attachChartInteraction(el, "gauge");
+  return el;
 }
-function renderCalendar(el2, opts) {
-  if (typeof document === "undefined") return;
-  withChrome(el2, opts, true, (body) => {
+function renderCalendar(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, true, (body) => {
     let entries;
     if (opts.data && opts.data.length > 0) {
       entries = opts.data;
@@ -1160,6 +1199,10 @@ function renderCalendar(el2, 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");
@@ -1167,20 +1210,13 @@ function renderCalendar(el2, 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`);
@@ -1189,40 +1225,29 @@ function renderCalendar(el2, 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(el2, opts) {
-  if (typeof document === "undefined") return;
-  withChrome(el2, opts, false, (body) => {
+function renderScatter(el, opts) {
+  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) {
       renderEmpty(body, opts.emptyLabel);
@@ -1266,7 +1291,7 @@ function renderScatter(el2, 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);
       svg2.appendChild(txt);
     }
     for (let i = 0; i <= 4; i++) {
@@ -1288,7 +1313,7 @@ function renderScatter(el2, 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);
       svg2.appendChild(txt);
     }
     if (opts.yLabel) {
@@ -1312,7 +1337,7 @@ function renderScatter(el2, 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);
@@ -1321,6 +1346,8 @@ function renderScatter(el2, opts) {
     wrap.appendChild(svg2);
     body.appendChild(wrap);
   });
+  attachChartInteraction(el, "scatter");
+  return el;
 }
 function chartFormatValue(format) {
   if (!format) return (v) => String(v);
@@ -1451,7 +1478,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;
@@ -1521,6 +1548,7 @@ function normalizeChartSpec(raw) {
   }
   return spec;
 }
+var TEMPORAL_HIT_RATIO = 0.6;
 function looksTemporal(labels) {
   if (labels.length === 0) return false;
   let hits = 0;
@@ -1534,7 +1562,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";
@@ -1569,7 +1597,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() {
@@ -1582,6 +1610,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");
@@ -1601,6 +1635,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":
@@ -1617,15 +1746,12 @@ function hasLegendOf(spec) {
       return false;
   }
 }
-function renderChart(el2, raw) {
+function renderChart(el, raw) {
   const noop = () => void 0;
   if (typeof document === "undefined") {
-    return { el: el2, spec: {}, update: noop, on: () => noop, destroy: noop };
+    return { el, spec: {}, update: noop, on: () => noop, destroy: noop };
   }
-  const root = el2;
-  const attached = root;
-  const wasBound = attached.__icenChartBound === true;
-  attached.__icenChartBound = true;
+  const root = el;
   let current = normalizeChartSpec(raw);
   const typeOf = () => current.type ?? "vbar";
   const legendState = { hidden: null };
@@ -1660,10 +1786,10 @@ function renderChart(el2, 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 });
@@ -1679,63 +1805,8 @@ function renderChart(el2, 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,
@@ -1753,28 +1824,18 @@ function renderChart(el2, 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-tool.ts
-var AI_STATUSES = [
-  "pending",
-  "running",
-  "streaming",
-  "approval",
-  "done",
-  "error",
-  "cancelled"
-];
-function h(tag, className, text) {
-  const node = document.createElement(tag);
-  if (className) node.className = className;
-  if (text != null) node.textContent = text;
-  return node;
-}
 function setStatusClass(item, status) {
   for (const s of AI_STATUSES) item.classList.toggle(`is-${s}`, s === status);
 }
@@ -1921,11 +1982,11 @@ function applyStatusMeta(parts, status, meta) {
   parts.metaEl.textContent = meta;
   parts.metaEl.hidden = !meta;
 }
-function renderAiToolCall(el2, model) {
+function renderAiToolCall(el, model) {
   if (typeof document === "undefined") {
-    return { el: el2, update: () => void 0 };
+    return { el, update: () => void 0 };
   }
-  const item = el2;
+  const item = el;
   let current = model;
   item.className = `ai-tool ai-tool--${model.kind}`;
   item.dataset.aiId = model.id;
@@ -1942,12 +2003,9 @@ function renderAiToolCall(el2, model) {
     parts.head.setAttribute("aria-expanded", String(open));
     body.hidden = !open;
     if (fire) {
-      item.dispatchEvent(
-        new CustomEvent("icen:ai-toggle", { detail: { el: item, open }, bubbles: true })
-      );
+      emitIcen(item, "icen:ai-toggle", { el: item, open });
     }
   };
-  let prevStatus = null;
   const apply = (m) => {
     setStatusClass(item, m.status);
     applyTint(item, m);
@@ -1960,7 +2018,6 @@ function renderAiToolCall(el2, model) {
     approval.reason.textContent = reason;
     approval.reason.hidden = !reason;
     if (!item.dataset.aiUserToggled && defaultExpanded(m)) setOpen(true);
-    prevStatus = m.status;
   };
   apply(current);
   return {
@@ -1971,11 +2028,11 @@ function renderAiToolCall(el2, model) {
     }
   };
 }
-function renderAiSubagent(el2, model) {
+function renderAiSubagent(el, model) {
   if (typeof document === "undefined") {
-    return { el: el2, update: () => void 0 };
+    return { el, update: () => void 0 };
   }
-  const item = el2;
+  const item = el;
   let current = model;
   item.className = "ai-subagent";
   item.dataset.aiId = model.id;
@@ -1992,9 +2049,7 @@ function renderAiSubagent(el2, model) {
     parts.head.setAttribute("aria-expanded", String(open));
     body.hidden = !open;
     if (fire) {
-      item.dispatchEvent(
-        new CustomEvent("icen:ai-toggle", { detail: { el: item, open }, bubbles: true })
-      );
+      emitIcen(item, "icen:ai-toggle", { el: item, open });
     }
   };
   const activityHandles = /* @__PURE__ */ new Map();
@@ -2021,7 +2076,6 @@ function renderAiSubagent(el2, model) {
       }
     }
   };
-  let prevStatus = null;
   const apply = (m) => {
     setStatusClass(item, m.status);
     applyTint(item, m);
@@ -2034,7 +2088,6 @@ function renderAiSubagent(el2, model) {
     result.textContent = receipt;
     result.hidden = !receipt;
     if (!item.dataset.aiUserToggled && defaultExpanded(m)) setOpen(true);
-    prevStatus = m.status;
   };
   apply(current);
   return {
@@ -2048,7 +2101,7 @@ function renderAiSubagent(el2, model) {
 function setupItem(item, kind) {
   const marked = item;
   const flag = kind === "tool" ? "__icenAiToolInit" : "__icenAiSubagentInit";
-  if (marked[flag]) return;
+  if (marked[flag]) return () => void 0;
   marked[flag] = true;
   const headClass = kind === "tool" ? ".ai-tool-head" : ".ai-subagent-head";
   const bodyClass = kind === "tool" ? ".ai-tool-body" : ".ai-subagent-body";
@@ -2058,64 +2111,64 @@ function setupItem(item, kind) {
     head?.setAttribute("aria-expanded", String(open));
     if (body) body.hidden = !open;
     if (fire) {
-      item.dispatchEvent(
-        new CustomEvent("icen:ai-toggle", { detail: { el: item, open }, bubbles: true })
-      );
+      emitIcen(item, "icen:ai-toggle", { el: item, open });
     }
   };
-  item.addEventListener("click", (ev) => {
+  const onCardClick = (ev) => {
     const target = ev.target;
     if (!(target instanceof Element)) return;
     const ownerOf = (node) => node.closest(".ai-tool, .ai-subagent");
     const approveBtn = target.closest("[data-ai-approve]");
     if (approveBtn && ownerOf(approveBtn) === item) {
-      item.dispatchEvent(
-        new CustomEvent("icen:ai-approve", {
-          detail: { id: item.dataset.aiId ?? "", kind: item.dataset.aiKind ?? "" },
-          bubbles: true
-        })
-      );
+      emitIcen(item, "icen:ai-approve", { id: item.dataset.aiId ?? "", kind: item.dataset.aiKind ?? "" });
       return;
     }
     const rejectBtn = target.closest("[data-ai-reject]");
     if (rejectBtn && ownerOf(rejectBtn) === item) {
-      item.dispatchEvent(
-        new CustomEvent("icen:ai-reject", {
-          detail: { id: item.dataset.aiId ?? "", kind: item.dataset.aiKind ?? "" },
-          bubbles: true
-        })
-      );
+      emitIcen(item, "icen:ai-reject", { id: item.dataset.aiId ?? "", kind: item.dataset.aiKind ?? "" });
       return;
     }
     const headEl = target.closest(".ai-tool-head, .ai-subagent-head");
     if (!headEl || ownerOf(headEl) !== item || !head) return;
     item.dataset.aiUserToggled = "1";
     setOpen(head.getAttribute("aria-expanded") !== "true");
-  });
+  };
+  item.addEventListener("click", onCardClick);
   if (body?.hidden) {
     const kindName = item.dataset.aiKind ?? "";
     const isErr = item.classList.contains("is-error");
     const isApproval = item.classList.contains("is-approval");
     if (isErr || isApproval || kindName === "chart") {
-      item.dataset.aiUserToggled = "";
       setOpen(true, false);
       delete item.dataset.aiUserToggled;
     }
   }
+  return () => {
+    item.removeEventListener("click", onCardClick);
+    marked[flag] = false;
+  };
 }
 function initItems(root, selector, kind) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return [];
   const scope = root ?? document;
   const items = [];
   if (scope instanceof Element && scope.matches(selector)) items.push(scope);
   items.push(...Array.from(scope.querySelectorAll(selector)));
-  for (const item of items) setupItem(item, kind);
+  return items.map((item) => setupItem(item, kind));
 }
 function initAiTool(root) {
-  initItems(root, ".ai-tool", "tool");
+  const cleanups = initItems(root, ".ai-tool", "tool");
+  return () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+  };
 }
 function initAiSubagent(root) {
-  initItems(root, ".ai-subagent", "subagent");
+  const cleanups = initItems(root, ".ai-subagent", "subagent");
+  return () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+  };
 }
 export {
   initAiSubagent,