@icen.ai/ui 0.4.0 → 0.8.0

package/dist/behaviors/charts.mjs

@@ -18,6 +18,19 @@ function toneVar(tone = "accent") {
 function fmt(opts, value) {
   return opts.formatValue ? opts.formatValue(value) : String(value);
 }
+function maxOf(values) {
+  let max = 1;
+  for (const v of values) if (v > max) max = v;
+  return max;
+}
+function sampleLabels(labels, max = 7) {
+  if (labels.length <= max) return labels;
+  const out = [];
+  for (let i = 0; i < max; i++) {
+    out.push(labels[Math.round(i * (labels.length - 1) / (max - 1))] ?? "");
+  }
+  return out;
+}
 function svgEl(tag, attrs) {
   const el = document.createElementNS(SVG_NS, tag);
   for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
@@ -54,383 +67,601 @@ function labelsRow(labels) {
   }
   return row;
 }
-function renderVBar(el, opts) {
-  if (typeof document === "undefined") return;
+function normalizeSeriesInput(opts) {
+  if (opts.series && opts.series.length > 0) return opts.series;
+  return [{ name: "", values: opts.values ?? [], tone: opts.tone }];
+}
+function toneOf(tone, seriesIndex) {
+  if (typeof tone === "string") return toneVar(tone);
+  if (typeof tone === "number") return paletteVar(tone);
+  return seriesIndex > 0 ? paletteVar((seriesIndex - 1) % 6 + 1) : void 0;
+}
+var PALETTE_VARS = [
+  "var(--token-accent)",
+  "var(--token-accent-cold)",
+  "var(--token-success)",
+  "var(--token-warning)",
+  "var(--token-info)",
+  "color-mix(in srgb, var(--token-text) 50%, transparent)"
+];
+function paletteVar(index) {
+  const i = ((Math.floor(index) - 1) % 6 + 6) % 6;
+  return PALETTE_VARS[i];
+}
+function setMarkData(node, data) {
+  node.setAttribute("data-chart-mark", "1");
+  if (data.index != null) node.setAttribute("data-chart-index", String(data.index));
+  if (data.seriesIndex != null) node.setAttribute("data-chart-series", String(data.seriesIndex));
+  if (data.seriesName != null) node.setAttribute("data-chart-series-name", String(data.seriesName));
+  if (data.label != null) node.setAttribute("data-chart-label", String(data.label));
+  if (data.value != null) node.setAttribute("data-chart-value", String(data.value));
+}
+function copyMarkData(target, source) {
+  for (const attr of Array.from(source.attributes)) {
+    if (attr.name.startsWith("data-chart-")) target.setAttribute(attr.name, attr.value);
+  }
+}
+var CHART_EYE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0"/><circle cx="12" cy="12" r="3"/></svg>';
+var CHART_EYE_OFF_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.73 5.08A10.4 10.4 0 0 1 12 5c7 0 10 7 10 7a13.2 13.2 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.5 13.5 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.39-1.61"/><path d="M2 2l20 20"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/></svg>';
+function parseChartSvg(svg) {
+  try {
+    const doc = new DOMParser().parseFromString(svg, "image/svg+xml");
+    const el = doc.documentElement;
+    return el && el.tagName.toLowerCase() === "svg" && !doc.querySelector("parsererror") ? document.importNode(el, true) : null;
+  } catch {
+    return null;
+  }
+}
+function withChrome(el, opts, hasLegend, paint, state) {
+  if (el.dataset.chartBody != null) {
+    el.textContent = "";
+    paint(el);
+    return;
+  }
   el.textContent = "";
-  const n = Math.min(opts.labels.length, opts.values.length);
-  if (n === 0) {
-    renderEmpty(el, opts.emptyLabel);
+  const body = document.createElement("div");
+  body.className = "chart-body";
+  body.dataset.chartBody = "";
+  if (!opts.title && !hasLegend) {
+    el.appendChild(body);
+    paint(body);
     return;
   }
-  const labels = opts.labels.slice(0, n);
-  const values = opts.values.slice(0, n);
-  const max = Math.max(...values, 1);
-  const wrap = document.createElement("div");
-  wrap.className = "chart-vbar";
-  if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
-  values.forEach((value, i) => {
-    const track = document.createElement("div");
-    track.className = "chart-vbar-track";
-    const bar = document.createElement("div");
-    bar.className = "chart-vbar-bar";
-    bar.style.height = `${Math.max(6, value / max * 100)}%`;
-    bar.setAttribute("title", `${labels[i]}: ${fmt(opts, value)}`);
-    track.appendChild(bar);
-    wrap.appendChild(track);
+  let hidden = state && state.hidden != null ? state.hidden : opts.legend === false;
+  if (state) state.hidden = hidden;
+  el.setAttribute("data-legend-hidden", String(hidden));
+  const head = document.createElement("div");
+  head.className = "chart-head";
+  const title = document.createElement("div");
+  title.className = "chart-title";
+  title.textContent = opts.title ?? "";
+  if (!opts.title) title.setAttribute("aria-hidden", "true");
+  const eye = document.createElement("button");
+  eye.type = "button";
+  eye.className = "chart-legend-eye";
+  eye.dataset.chartLegendEye = "";
+  const syncEye = () => {
+    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");
+    const icon = parseChartSvg(nowHidden ? CHART_EYE_OFF_SVG : CHART_EYE_SVG);
+    if (icon) eye.replaceChildren(icon);
+  };
+  eye.addEventListener("click", () => {
+    const nowHidden = el.getAttribute("data-legend-hidden") === "true";
+    hidden = !nowHidden;
+    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 }
+    }));
+  });
+  syncEye();
+  head.append(title, eye);
+  el.append(head, body);
+  paint(body);
+}
+function toggleLegend(items, scope, _opts) {
+  const legend = document.createElement("div");
+  legend.className = "chart-legend chart-legend--toggle";
+  for (const item of items) {
+    const row = legendItem(item.label, "", item.tone);
+    row.classList.add("chart-legend-toggle-item");
+    row.setAttribute("role", "button");
+    row.tabIndex = 0;
+    row.setAttribute("aria-pressed", "true");
+    row.dataset.chartKey = item.key;
+    const dot = row.querySelector(".chart-legend-dot");
+    const toneColor = toneOf(item.tone, item.si + 1);
+    if (dot && toneColor) dot.style.setProperty("--chart-tone", toneColor);
+    const toggle = () => {
+      const off = row.classList.toggle("is-off");
+      row.setAttribute("aria-pressed", String(!off));
+      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 }
+      }));
+    };
+    row.addEventListener("click", toggle);
+    row.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    });
+    legend.appendChild(row);
+  }
+  for (const item of items) {
+    scope.querySelectorAll(`[data-chart-series="${item.si}"]`).forEach((m) => {
+      if (!m.hasAttribute("data-chart-key")) m.setAttribute("data-chart-key", item.key);
+    });
+  }
+  return legend;
+}
+function renderVBar(el, opts) {
+  if (typeof document === "undefined") return;
+  const seriesList = normalizeSeriesInput(opts);
+  const labels = opts.labels ?? [];
+  const n = Math.min(labels.length, ...seriesList.map((s) => s.values.length));
+  withChrome(el, opts, seriesList.length > 1, (body) => {
+    if (n === 0 || seriesList.length === 0) {
+      renderEmpty(body, opts.emptyLabel);
+      return;
+    }
+    const labelsUsed = labels.slice(0, n);
+    let max = 1;
+    if (opts.stacked && seriesList.length > 1) {
+      for (let i = 0; i < n; i++) {
+        let sum = 0;
+        for (const s of seriesList) sum += Math.max(0, s.values[i] ?? 0);
+        if (sum > max) max = sum;
+      }
+    } else {
+      for (const s of seriesList) max = Math.max(max, maxOf(s.values.slice(0, n)));
+    }
+    const wrap = document.createElement("div");
+    wrap.className = "chart-vbar";
+    if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
+    for (let i = 0; i < n; i++) {
+      const track = document.createElement("div");
+      track.className = "chart-vbar-track";
+      if (seriesList.length > 1) {
+        track.classList.add("chart-vbar-track--multi");
+        if (opts.stacked) track.classList.add("chart-vbar-track--stacked");
+      }
+      seriesList.forEach((s, si) => {
+        const value = s.values[i] ?? 0;
+        const bar = document.createElement("div");
+        bar.className = "chart-vbar-bar";
+        const height = value > 0 ? Math.max(6, value / max * 100) : 0;
+        bar.style.height = `${height}%`;
+        const toneColor = toneOf(s.tone, si);
+        if (toneColor) bar.style.setProperty("--chart-tone", toneColor);
+        bar.setAttribute("title", seriesList.length > 1 ? `${labelsUsed[i]} \xB7 ${s.name}: ${fmt(opts, value)}` : `${labelsUsed[i]}: ${fmt(opts, value)}`);
+        setMarkData(bar, {
+          index: i,
+          seriesIndex: seriesList.length > 1 ? si : void 0,
+          seriesName: seriesList.length > 1 ? s.name : void 0,
+          label: labelsUsed[i] ?? "",
+          value
+        });
+        track.appendChild(bar);
+      });
+      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));
   });
-  el.append(wrap, labelsRow(labels));
 }
 function renderHBar(el, opts) {
   if (typeof document === "undefined") return;
-  el.textContent = "";
-  const n = Math.min(opts.labels.length, opts.values.length);
-  if (n === 0) {
-    renderEmpty(el, opts.emptyLabel);
-    return;
-  }
-  const labels = opts.labels.slice(0, n);
-  const values = opts.values.slice(0, n);
-  const max = Math.max(...values, 1);
-  const wrap = document.createElement("div");
-  wrap.className = "chart-hbar";
-  if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
-  values.forEach((value, i) => {
-    const row = document.createElement("div");
-    row.className = "chart-hbar-row";
-    const label = document.createElement("span");
-    label.className = "chart-hbar-label";
-    label.textContent = labels[i] ?? "";
-    const track = document.createElement("div");
-    track.className = "chart-hbar-track";
-    const bar = document.createElement("div");
-    bar.className = "chart-hbar-bar";
-    bar.style.width = `${Math.max(2, value / max * 100)}%`;
-    const val = document.createElement("span");
-    val.className = "chart-hbar-value";
-    val.textContent = fmt(opts, value);
-    track.appendChild(bar);
-    row.append(label, track, val);
-    wrap.appendChild(row);
+  withChrome(el, opts, false, (body) => {
+    const n = Math.min(opts.labels.length, opts.values.length);
+    if (n === 0) {
+      renderEmpty(body, opts.emptyLabel);
+      return;
+    }
+    const labels = opts.labels.slice(0, n);
+    const values = opts.values.slice(0, n);
+    const max = maxOf(values);
+    const wrap = document.createElement("div");
+    wrap.className = "chart-hbar";
+    if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
+    values.forEach((value, i) => {
+      const row = document.createElement("div");
+      row.className = "chart-hbar-row";
+      const label = document.createElement("span");
+      label.className = "chart-hbar-label";
+      label.textContent = labels[i] ?? "";
+      const track = document.createElement("div");
+      track.className = "chart-hbar-track";
+      const bar = document.createElement("div");
+      bar.className = "chart-hbar-bar";
+      bar.style.width = value > 0 ? `${Math.max(2, value / max * 100)}%` : "0%";
+      setMarkData(bar, { index: i, label: labels[i] ?? "", value });
+      const val = document.createElement("span");
+      val.className = "chart-hbar-value";
+      val.textContent = fmt(opts, value);
+      track.appendChild(bar);
+      row.append(label, track, val);
+      wrap.appendChild(row);
+    });
+    body.appendChild(wrap);
   });
-  el.appendChild(wrap);
 }
 function renderStack(el, opts) {
   if (typeof document === "undefined") return;
-  el.textContent = "";
-  const total = opts.segments.reduce((sum, s) => sum + s.value, 0);
-  if (opts.segments.length === 0 || total <= 0) {
-    renderEmpty(el, opts.emptyLabel);
-    return;
-  }
-  const bar = document.createElement("div");
-  bar.className = "chart-stack";
-  for (const seg of opts.segments) {
-    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)}`);
-    bar.appendChild(s);
-  }
-  const legend = document.createElement("div");
-  legend.className = "chart-legend";
-  for (const seg of opts.segments) {
-    legend.appendChild(legendItem(seg.label, fmt(opts, seg.value), seg.tone));
-  }
-  el.append(bar, legend);
+  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) {
+      renderEmpty(body, opts.emptyLabel);
+      return;
+    }
+    const bar = document.createElement("div");
+    bar.className = "chart-stack";
+    for (const seg of opts.segments) {
+      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 });
+      bar.appendChild(s);
+    }
+    const legend = document.createElement("div");
+    legend.className = "chart-legend";
+    for (const seg of opts.segments) {
+      legend.appendChild(legendItem(seg.label, fmt(opts, seg.value), seg.tone));
+    }
+    body.append(bar, legend);
+  });
 }
 function renderDonut(el, opts) {
   if (typeof document === "undefined") return;
-  el.textContent = "";
-  const total = opts.segments.reduce((sum, s) => sum + s.value, 0);
-  if (opts.segments.length === 0 || total <= 0) {
-    renderEmpty(el, opts.emptyLabel);
-    return;
-  }
-  const radius = 42;
-  const circumference = 2 * Math.PI * radius;
-  const wrap = document.createElement("div");
-  wrap.className = "chart-donut";
-  const svg = svgEl("svg", { viewBox: "0 0 120 120", role: "img" });
-  svg.style.transform = "rotate(-90deg)";
-  svg.appendChild(svgEl("circle", {
-    cx: "60",
-    cy: "60",
-    r: String(radius),
-    fill: "none",
-    stroke: "var(--token-line-soft)",
-    "stroke-width": "14"
-  }));
-  let offset = 0;
-  for (const seg of opts.segments) {
-    const dash = seg.value / total * circumference;
+  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) {
+      renderEmpty(body, opts.emptyLabel);
+      return;
+    }
+    const radius = 42;
+    const circumference = 2 * Math.PI * radius;
+    const wrap = document.createElement("div");
+    wrap.className = "chart-donut";
+    const svg = svgEl("svg", { viewBox: "0 0 120 120", role: "img" });
+    svg.style.transform = "rotate(-90deg)";
     svg.appendChild(svgEl("circle", {
       cx: "60",
       cy: "60",
       r: String(radius),
       fill: "none",
-      stroke: toneVar(seg.tone),
-      "stroke-width": "14",
-      "stroke-dasharray": `${dash} ${circumference - dash}`,
-      "stroke-dashoffset": String(-offset),
-      "stroke-linecap": "butt"
+      stroke: "var(--token-line-soft)",
+      "stroke-width": "14"
     }));
-    offset += dash;
-  }
-  const legend = document.createElement("div");
-  legend.className = "chart-legend";
-  for (const seg of opts.segments) {
-    legend.appendChild(legendItem(seg.label, `${Math.round(seg.value / total * 100)}%`, seg.tone));
-  }
-  wrap.append(svg, legend);
-  el.appendChild(wrap);
+    let offset = 0;
+    opts.segments.forEach((seg, segIndex) => {
+      const dash = seg.value / total * circumference;
+      const arc = svgEl("circle", {
+        cx: "60",
+        cy: "60",
+        r: String(radius),
+        fill: "none",
+        stroke: toneVar(seg.tone),
+        "stroke-width": "14",
+        "stroke-dasharray": `${dash} ${circumference - dash}`,
+        "stroke-dashoffset": String(-offset),
+        "stroke-linecap": "butt"
+      });
+      setMarkData(arc, { index: segIndex, label: seg.label, value: seg.value });
+      svg.appendChild(arc);
+      offset += dash;
+    });
+    const legend = document.createElement("div");
+    legend.className = "chart-legend";
+    for (const seg of opts.segments) {
+      legend.appendChild(legendItem(seg.label, `${Math.round(seg.value / total * 100)}%`, seg.tone));
+    }
+    wrap.append(svg, legend);
+    body.appendChild(wrap);
+  });
 }
 var lineGradientSeq = 0;
 function renderLine(el, opts) {
   if (typeof document === "undefined") return;
-  el.textContent = "";
-  const n = Math.min(opts.labels.length, opts.values.length);
-  if (n === 0) {
-    renderEmpty(el, opts.emptyLabel);
-    return;
-  }
-  const labels = opts.labels.slice(0, n);
-  const values = opts.values.slice(0, n);
-  const width = 360;
-  const height = 150;
-  const pad = 14;
-  const max = Math.max(...values, 1);
-  const tone = toneVar(opts.tone);
-  const points = values.map((value, i) => ({
-    x: values.length <= 1 ? width / 2 : pad + i / (values.length - 1) * (width - pad * 2),
-    y: height - pad - value / max * (height - pad * 2),
-    value,
-    label: labels[i] ?? ""
-  }));
-  const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
-  const last = points[points.length - 1];
-  const first = points[0];
-  const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
-  const gradientId = `icen-chart-line-${++lineGradientSeq}`;
-  const wrap = document.createElement("div");
-  wrap.className = "chart-line";
-  const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img" });
-  const defs = svgEl("defs", {});
-  const gradient = svgEl("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1" });
-  gradient.appendChild(svgEl("stop", { offset: "0%", "stop-color": tone, "stop-opacity": "0.32" }));
-  gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.02" }));
-  defs.appendChild(gradient);
-  svg.appendChild(defs);
-  for (let i = 0; i < 4; i++) {
-    const y = pad + i * (height - pad * 2) / 3;
-    svg.appendChild(svgEl("line", {
-      x1: String(pad),
-      x2: String(width - pad),
-      y1: String(y),
-      y2: String(y),
-      stroke: "var(--token-line-soft)",
-      "stroke-width": "1"
-    }));
-  }
-  svg.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
-  svg.appendChild(svgEl("path", {
-    d: line,
-    fill: "none",
-    stroke: tone,
-    "stroke-width": "2.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
-  }));
-  for (const p of points) {
-    const dot = svgEl("circle", {
-      cx: p.x.toFixed(1),
-      cy: p.y.toFixed(1),
-      r: "3",
-      fill: "var(--token-card)",
-      stroke: tone,
-      "stroke-width": "2"
+  const seriesList = normalizeSeriesInput(opts);
+  const labels = opts.labels ?? [];
+  const n = Math.min(labels.length, ...seriesList.map((s) => s.values.length));
+  withChrome(el, opts, seriesList.length > 1, (body) => {
+    if (n === 0 || seriesList.length === 0) {
+      renderEmpty(body, opts.emptyLabel);
+      return;
+    }
+    const labelsUsed = labels.slice(0, n);
+    const width = 360;
+    const height = 150;
+    const pad = 14;
+    let max = 1;
+    for (const s of seriesList) max = Math.max(max, maxOf(s.values.slice(0, n)));
+    const wrap = document.createElement("div");
+    wrap.className = "chart-line";
+    const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img" });
+    const defs = svgEl("defs", {});
+    for (let i = 0; i < 4; i++) {
+      const y = pad + i * (height - pad * 2) / 3;
+      svg.appendChild(svgEl("line", {
+        x1: String(pad),
+        x2: String(width - pad),
+        y1: String(y),
+        y2: String(y),
+        stroke: "var(--token-line-soft)",
+        "stroke-width": "1"
+      }));
+    }
+    seriesList.forEach((s, si) => {
+      const tone = toneOf(s.tone, si) ?? toneVar(opts.tone);
+      const values = s.values.slice(0, n);
+      const points = values.map((value, i) => ({
+        i,
+        x: n <= 1 ? width / 2 : pad + i / (n - 1) * (width - pad * 2),
+        y: height - pad - Math.max(0, value) / max * (height - pad * 2),
+        value,
+        label: labelsUsed[i] ?? ""
+      }));
+      const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
+      const last = points[points.length - 1];
+      const first = points[0];
+      const fillArea = seriesList.length === 1 || opts.fill;
+      if (fillArea) {
+        const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
+        const gradientId = `icen-chart-line-${++lineGradientSeq}`;
+        const gradient = svgEl("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1" });
+        const strong = seriesList.length > 1 ? "0.20" : "0.32";
+        gradient.appendChild(svgEl("stop", { offset: "0%", "stop-color": tone, "stop-opacity": strong }));
+        gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.02" }));
+        defs.appendChild(gradient);
+        const areaPath = svgEl("path", { d: area, fill: `url(#${gradientId})` });
+        if (seriesList.length > 1) {
+          setMarkData(areaPath, { seriesIndex: si, seriesName: s.name, label: s.name, value: values.reduce((a, b) => a + b, 0) });
+        }
+        svg.appendChild(areaPath);
+      }
+      const linePath = svgEl("path", {
+        d: line,
+        fill: "none",
+        stroke: tone,
+        "stroke-width": seriesList.length > 1 ? "2" : "2.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      });
+      const lineTitle = svgEl("title", {});
+      lineTitle.textContent = s.name || "\u6570\u503C";
+      linePath.appendChild(lineTitle);
+      setMarkData(linePath, { seriesIndex: si, seriesName: s.name, label: s.name, value: values[values.length - 1] ?? 0 });
+      svg.appendChild(linePath);
+      for (const p of points) {
+        const dot = svgEl("circle", {
+          cx: p.x.toFixed(1),
+          cy: p.y.toFixed(1),
+          r: "3",
+          fill: "var(--token-card)",
+          stroke: tone,
+          "stroke-width": "2"
+        });
+        const title = svgEl("title", {});
+        title.textContent = seriesList.length > 1 ? `${p.label} \xB7 ${s.name}: ${fmt(opts, p.value)}` : `${p.label}: ${fmt(opts, p.value)}`;
+        dot.appendChild(title);
+        setMarkData(dot, {
+          index: p.i,
+          seriesIndex: seriesList.length > 1 ? si : void 0,
+          seriesName: seriesList.length > 1 ? s.name : void 0,
+          label: p.label,
+          value: p.value
+        });
+        svg.appendChild(dot);
+        const hit = svgEl("circle", {
+          cx: p.x.toFixed(1),
+          cy: p.y.toFixed(1),
+          r: "8",
+          fill: "transparent",
+          "data-chart-hit": "1"
+        });
+        copyMarkData(hit, dot);
+        svg.appendChild(hit);
+      }
     });
-    const title = svgEl("title", {});
-    title.textContent = `${p.label}: ${fmt(opts, p.value)}`;
-    dot.appendChild(title);
-    svg.appendChild(dot);
-  }
-  wrap.append(svg, labelsRow(labels.slice(-7)));
-  el.appendChild(wrap);
+    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));
+  });
 }
 function renderArea(el, opts) {
   if (typeof document === "undefined") return;
-  el.textContent = "";
-  const n = Math.min(opts.labels.length, opts.values.length);
-  if (n === 0) {
-    renderEmpty(el, opts.emptyLabel);
-    return;
-  }
-  const labels = opts.labels.slice(0, n);
-  const values = opts.values.slice(0, n);
-  const width = 360;
-  const height = 150;
-  const pad = 14;
-  const max = Math.max(...values, 1);
-  const tone = toneVar(opts.tone);
-  const points = values.map((value, i) => ({
-    x: values.length <= 1 ? width / 2 : pad + i / (values.length - 1) * (width - pad * 2),
-    y: height - pad - value / max * (height - pad * 2),
-    value,
-    label: labels[i] ?? ""
-  }));
-  const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
-  const last = points[points.length - 1];
-  const first = points[0];
-  const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
-  const gradientId = `icen-chart-area-${++lineGradientSeq}`;
-  const wrap = document.createElement("div");
-  wrap.className = "chart-area";
-  const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img" });
-  const defs = svgEl("defs", {});
-  const gradient = svgEl("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1" });
-  gradient.appendChild(svgEl("stop", { offset: "0%", "stop-color": tone, "stop-opacity": "0.5" }));
-  gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.05" }));
-  defs.appendChild(gradient);
-  svg.appendChild(defs);
-  for (let i = 0; i < 4; i++) {
-    const y = pad + i * (height - pad * 2) / 3;
-    svg.appendChild(svgEl("line", {
-      x1: String(pad),
-      x2: String(width - pad),
-      y1: String(y),
-      y2: String(y),
-      stroke: "var(--token-line-soft)",
-      "stroke-width": "1"
+  withChrome(el, opts, false, (body) => {
+    const n = Math.min(opts.labels.length, opts.values.length);
+    if (n === 0) {
+      renderEmpty(body, opts.emptyLabel);
+      return;
+    }
+    const labels = opts.labels.slice(0, n);
+    const values = opts.values.slice(0, n);
+    const width = 360;
+    const height = 150;
+    const pad = 14;
+    const max = maxOf(values);
+    const tone = toneVar(opts.tone);
+    const points = values.map((value, i) => ({
+      x: values.length <= 1 ? width / 2 : pad + i / (values.length - 1) * (width - pad * 2),
+      y: height - pad - value / max * (height - pad * 2),
+      value,
+      label: labels[i] ?? ""
     }));
-  }
-  svg.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
-  svg.appendChild(svgEl("path", {
-    d: line,
-    fill: "none",
-    stroke: tone,
-    "stroke-width": "1.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
-  }));
-  for (const p of points) {
-    const title = svgEl("title", {});
-    title.textContent = `${p.label}: ${fmt(opts, p.value)}`;
-    const inv = svgEl("circle", {
-      cx: p.x.toFixed(1),
-      cy: p.y.toFixed(1),
-      r: "2",
-      fill: "transparent"
-    });
-    inv.appendChild(title);
-    svg.appendChild(inv);
-  }
-  wrap.append(svg, labelsRow(labels.slice(-7)));
-  el.appendChild(wrap);
-}
-function renderRadar(el, opts) {
-  if (typeof document === "undefined") return;
-  el.textContent = "";
-  const axes = opts.axes;
-  const n = axes.length;
-  if (n < 3 || opts.series.length === 0) {
-    renderEmpty(el, opts.emptyLabel);
-    return;
-  }
-  let maxVal = opts.max ?? 0;
-  if (opts.max == null) {
-    for (const s of opts.series) {
-      for (let i = 0; i < n; i++) maxVal = Math.max(maxVal, s.values[i] ?? 0);
-    }
-    maxVal = niceCeil(maxVal);
-  }
-  if (maxVal <= 0) maxVal = 1;
-  const size = 200;
-  const cx = size / 2;
-  const cy = size / 2;
-  const radius = 78;
-  const levels = Math.max(2, opts.levels ?? 4);
-  const angleOf = (i) => -Math.PI / 2 + i * 2 * Math.PI / n;
-  const pointAt = (i, r) => ({
-    x: cx + r * Math.cos(angleOf(i)),
-    y: cy + r * Math.sin(angleOf(i))
-  });
-  const wrap = document.createElement("div");
-  wrap.className = "chart-radar";
-  const svg = svgEl("svg", { viewBox: `0 0 ${size} ${size}`, role: "img" });
-  for (let lv = 1; lv <= levels; lv++) {
-    const r = radius * lv / levels;
-    const pts = Array.from({ length: n }, (_, i) => {
-      const p = pointAt(i, r);
-      return `${p.x.toFixed(1)},${p.y.toFixed(1)}`;
-    }).join(" ");
-    svg.appendChild(svgEl("polygon", {
-      points: pts,
+    const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
+    const last = points[points.length - 1];
+    const first = points[0];
+    const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
+    const gradientId = `icen-chart-area-${++lineGradientSeq}`;
+    const wrap = document.createElement("div");
+    wrap.className = "chart-area";
+    const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img" });
+    const defs = svgEl("defs", {});
+    const gradient = svgEl("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1" });
+    gradient.appendChild(svgEl("stop", { offset: "0%", "stop-color": tone, "stop-opacity": "0.5" }));
+    gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.05" }));
+    defs.appendChild(gradient);
+    svg.appendChild(defs);
+    for (let i = 0; i < 4; i++) {
+      const y = pad + i * (height - pad * 2) / 3;
+      svg.appendChild(svgEl("line", {
+        x1: String(pad),
+        x2: String(width - pad),
+        y1: String(y),
+        y2: String(y),
+        stroke: "var(--token-line-soft)",
+        "stroke-width": "1"
+      }));
+    }
+    svg.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
+    svg.appendChild(svgEl("path", {
+      d: line,
       fill: "none",
-      stroke: "var(--token-line-soft)",
-      "stroke-width": "1",
-      "stroke-dasharray": lv === levels ? "0" : "3 2"
-    }));
-  }
-  for (let i = 0; i < n; i++) {
-    const edge = pointAt(i, radius);
-    svg.appendChild(svgEl("line", {
-      x1: String(cx),
-      y1: String(cy),
-      x2: edge.x.toFixed(1),
-      y2: edge.y.toFixed(1),
-      stroke: "var(--token-line-soft)",
-      "stroke-width": "1"
-    }));
-    const labelP = pointAt(i, radius + 14);
-    const txt = svgEl("text", {
-      x: labelP.x.toFixed(1),
-      y: labelP.y.toFixed(1),
-      "text-anchor": "middle",
-      "dominant-baseline": "middle",
-      "font-size": "9",
-      fill: "var(--token-text-muted)"
-    });
-    txt.textContent = axes[i] ?? "";
-    svg.appendChild(txt);
-  }
-  const legend = document.createElement("div");
-  legend.className = "chart-legend";
-  for (const s of opts.series) {
-    const tone = toneVar(s.tone);
-    const pts = Array.from({ length: n }, (_, i) => {
-      const v = Math.max(0, Math.min(maxVal, s.values[i] ?? 0));
-      const p = pointAt(i, v / maxVal * radius);
-      return `${p.x.toFixed(1)},${p.y.toFixed(1)}`;
-    }).join(" ");
-    const polyFill = svgEl("polygon", {
-      points: pts,
-      fill: tone,
-      "fill-opacity": "0.16",
       stroke: tone,
-      "stroke-width": "2",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
       "stroke-linejoin": "round"
-    });
-    const title = svgEl("title", {});
-    title.textContent = `${s.name}: ${s.values.map((v) => fmt(opts, v)).join(" / ")}`;
-    polyFill.appendChild(title);
-    svg.appendChild(polyFill);
-    for (let i = 0; i < n; i++) {
-      const v = Math.max(0, Math.min(maxVal, s.values[i] ?? 0));
-      const p = pointAt(i, v / maxVal * radius);
-      svg.appendChild(svgEl("circle", {
+    }));
+    for (const p of points) {
+      const title = svgEl("title", {});
+      title.textContent = `${p.label}: ${fmt(opts, p.value)}`;
+      const inv = svgEl("circle", {
         cx: p.x.toFixed(1),
         cy: p.y.toFixed(1),
-        r: "2.5",
-        fill: "var(--token-card)",
-        stroke: tone,
-        "stroke-width": "1.5"
+        r: "2",
+        fill: "transparent"
+      });
+      inv.appendChild(title);
+      svg.appendChild(inv);
+    }
+    wrap.append(svg, labelsRow(sampleLabels(labels)));
+    body.appendChild(wrap);
+  });
+}
+function renderRadar(el, opts) {
+  if (typeof document === "undefined") return;
+  withChrome(el, opts, opts.series.length > 1, (body) => {
+    const axes = opts.axes;
+    const n = axes.length;
+    if (n < 3 || opts.series.length === 0) {
+      renderEmpty(body, opts.emptyLabel);
+      return;
+    }
+    let maxVal = opts.max ?? 0;
+    if (opts.max == null) {
+      for (const s of opts.series) {
+        for (let i = 0; i < n; i++) maxVal = Math.max(maxVal, s.values[i] ?? 0);
+      }
+      maxVal = niceCeil(maxVal);
+    }
+    if (maxVal <= 0) maxVal = 1;
+    const size = 200;
+    const cx = size / 2;
+    const cy = size / 2;
+    const radius = 78;
+    const levels = Math.max(2, opts.levels ?? 4);
+    const angleOf = (i) => -Math.PI / 2 + i * 2 * Math.PI / n;
+    const pointAt = (i, r) => ({
+      x: cx + r * Math.cos(angleOf(i)),
+      y: cy + r * Math.sin(angleOf(i))
+    });
+    const wrap = document.createElement("div");
+    wrap.className = "chart-radar";
+    const svg = svgEl("svg", { viewBox: `0 0 ${size} ${size}`, role: "img" });
+    for (let lv = 1; lv <= levels; lv++) {
+      const r = radius * lv / levels;
+      const pts = Array.from({ length: n }, (_, i) => {
+        const p = pointAt(i, r);
+        return `${p.x.toFixed(1)},${p.y.toFixed(1)}`;
+      }).join(" ");
+      svg.appendChild(svgEl("polygon", {
+        points: pts,
+        fill: "none",
+        stroke: "var(--token-line-soft)",
+        "stroke-width": "1",
+        "stroke-dasharray": lv === levels ? "0" : "3 2"
       }));
     }
-    legend.appendChild(legendItem(s.name, "", s.tone));
-  }
-  wrap.append(svg, legend);
-  el.appendChild(wrap);
+    for (let i = 0; i < n; i++) {
+      const edge = pointAt(i, radius);
+      svg.appendChild(svgEl("line", {
+        x1: String(cx),
+        y1: String(cy),
+        x2: edge.x.toFixed(1),
+        y2: edge.y.toFixed(1),
+        stroke: "var(--token-line-soft)",
+        "stroke-width": "1"
+      }));
+      const labelP = pointAt(i, radius + 14);
+      const txt = svgEl("text", {
+        x: labelP.x.toFixed(1),
+        y: labelP.y.toFixed(1),
+        "text-anchor": "middle",
+        "dominant-baseline": "middle",
+        "font-size": "9",
+        fill: "var(--token-text-muted)"
+      });
+      txt.textContent = axes[i] ?? "";
+      svg.appendChild(txt);
+    }
+    const legendItems = [];
+    opts.series.forEach((s, si) => {
+      const tone = toneVar(s.tone);
+      const pts = Array.from({ length: n }, (_, i) => {
+        const v = Math.max(0, Math.min(maxVal, s.values[i] ?? 0));
+        const p = pointAt(i, v / maxVal * radius);
+        return `${p.x.toFixed(1)},${p.y.toFixed(1)}`;
+      }).join(" ");
+      const polyFill = svgEl("polygon", {
+        points: pts,
+        fill: tone,
+        "fill-opacity": "0.16",
+        stroke: tone,
+        "stroke-width": "2",
+        "stroke-linejoin": "round"
+      });
+      const title = svgEl("title", {});
+      title.textContent = `${s.name}: ${s.values.map((v) => fmt(opts, v)).join(" / ")}`;
+      polyFill.appendChild(title);
+      setMarkData(polyFill, { seriesIndex: si, seriesName: s.name || void 0, label: s.name, value: s.values.reduce((a, b) => a + (b || 0), 0) });
+      svg.appendChild(polyFill);
+      for (let i = 0; i < n; i++) {
+        const v = Math.max(0, Math.min(maxVal, s.values[i] ?? 0));
+        const p = pointAt(i, v / maxVal * radius);
+        const dot = svgEl("circle", {
+          cx: p.x.toFixed(1),
+          cy: p.y.toFixed(1),
+          r: "2.5",
+          fill: "var(--token-card)",
+          stroke: tone,
+          "stroke-width": "1.5"
+        });
+        setMarkData(dot, { index: i, seriesIndex: si, seriesName: s.name || void 0, label: axes[i] ?? "", value: s.values[i] ?? 0 });
+        svg.appendChild(dot);
+      }
+      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;
+    })());
+    body.appendChild(wrap);
+  });
 }
 function niceCeil(v) {
   if (v <= 0) return 1;
@@ -451,117 +682,120 @@ function isoDate(d) {
 }
 function renderHeatmap(el, opts) {
   if (typeof document === "undefined") return;
-  el.textContent = "";
-  let entries;
-  if (opts.data && opts.data.length > 0) {
-    entries = opts.data;
-  } else if (opts.values && opts.values.length > 0) {
-    const today = /* @__PURE__ */ new Date();
-    entries = opts.values.map((value, i) => {
-      const d = new Date(today);
-      d.setDate(d.getDate() - (opts.values.length - 1 - i));
-      return { date: isoDate(d), value };
-    });
-  } else {
-    renderEmpty(el, opts.emptyLabel);
-    return;
-  }
-  const weeks = opts.weeks ?? Math.ceil(entries.length / 7);
-  if (entries.length > weeks * 7) entries = entries.slice(entries.length - weeks * 7);
-  const max = Math.max(...entries.map((e) => e.value), 1);
-  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) {
-    const cell = document.createElement("span");
-    cell.className = "chart-heatmap-cell";
-    cell.dataset.level = String(levelOf(entry.value));
-    cell.setAttribute("title", `${entry.date}\uFF1A${fmt(opts, 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);
-  el.appendChild(wrap);
+  withChrome(el, opts, true, (body) => {
+    let entries;
+    if (opts.data && opts.data.length > 0) {
+      entries = opts.data;
+    } else if (opts.values && opts.values.length > 0) {
+      const today = /* @__PURE__ */ new Date();
+      entries = opts.values.map((value, i) => {
+        const d = new Date(today);
+        d.setDate(d.getDate() - (opts.values.length - 1 - i));
+        return { date: isoDate(d), value };
+      });
+    } else {
+      renderEmpty(body, opts.emptyLabel);
+      return;
+    }
+    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) {
+      const cell = document.createElement("span");
+      cell.className = "chart-heatmap-cell";
+      cell.dataset.level = String(levelOf(entry.value));
+      cell.setAttribute("title", `${entry.date}\uFF1A${fmt(opts, entry.value)}`);
+      setMarkData(cell, { index: entries.indexOf(entry), 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);
+    body.appendChild(wrap);
+  });
 }
 function renderSparkline(el, opts) {
   if (typeof document === "undefined") return;
-  el.textContent = "";
-  const values = opts.values;
-  if (values.length === 0) {
-    renderEmpty(el, opts.emptyLabel);
-    return;
-  }
-  const width = 96;
-  const height = 28;
-  const pad = 3;
-  const max = Math.max(...values, 1);
-  const tone = toneVar(opts.tone);
-  const points = values.map((value, i) => ({
-    x: values.length <= 1 ? width / 2 : pad + i / (values.length - 1) * (width - pad * 2),
-    y: height - pad - value / max * (height - pad * 2),
-    value
-  }));
-  const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
-  const last = points[points.length - 1];
-  const first = points[0];
-  const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
-  const gradientId = `icen-chart-line-${++lineGradientSeq}`;
-  const wrap = document.createElement("div");
-  wrap.className = "chart-sparkline";
-  const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img" });
-  const defs = svgEl("defs", {});
-  const gradient = svgEl("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1" });
-  gradient.appendChild(svgEl("stop", { offset: "0%", "stop-color": tone, "stop-opacity": "0.28" }));
-  gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.02" }));
-  defs.appendChild(gradient);
-  svg.appendChild(defs);
-  svg.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
-  svg.appendChild(svgEl("path", {
-    d: line,
-    fill: "none",
-    stroke: tone,
-    "stroke-width": "1.8",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
-  }));
-  const dot = svgEl("circle", {
-    cx: last.x.toFixed(1),
-    cy: last.y.toFixed(1),
-    r: "2.4",
-    fill: "var(--token-card)",
-    stroke: tone,
-    "stroke-width": "1.6"
+  withChrome(el, opts, false, (body) => {
+    const values = opts.values;
+    if (values.length === 0) {
+      renderEmpty(body, opts.emptyLabel);
+      return;
+    }
+    const width = 96;
+    const height = 28;
+    const pad = 3;
+    const max = maxOf(values);
+    const tone = toneVar(opts.tone);
+    const points = values.map((value, i) => ({
+      x: values.length <= 1 ? width / 2 : pad + i / (values.length - 1) * (width - pad * 2),
+      y: height - pad - value / max * (height - pad * 2),
+      value
+    }));
+    const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
+    const last = points[points.length - 1];
+    const first = points[0];
+    const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
+    const gradientId = `icen-chart-line-${++lineGradientSeq}`;
+    const wrap = document.createElement("div");
+    wrap.className = "chart-sparkline";
+    const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img" });
+    const defs = svgEl("defs", {});
+    const gradient = svgEl("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1" });
+    gradient.appendChild(svgEl("stop", { offset: "0%", "stop-color": tone, "stop-opacity": "0.28" }));
+    gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.02" }));
+    defs.appendChild(gradient);
+    svg.appendChild(defs);
+    svg.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
+    svg.appendChild(svgEl("path", {
+      d: line,
+      fill: "none",
+      stroke: tone,
+      "stroke-width": "1.8",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }));
+    const dot = svgEl("circle", {
+      cx: last.x.toFixed(1),
+      cy: last.y.toFixed(1),
+      r: "2.4",
+      fill: "var(--token-card)",
+      stroke: tone,
+      "stroke-width": "1.6"
+    });
+    const title = svgEl("title", {});
+    title.textContent = fmt(opts, last.value);
+    dot.appendChild(title);
+    svg.appendChild(dot);
+    wrap.appendChild(svg);
+    body.appendChild(wrap);
   });
-  const title = svgEl("title", {});
-  title.textContent = fmt(opts, last.value);
-  dot.appendChild(title);
-  svg.appendChild(dot);
-  wrap.appendChild(svg);
-  el.appendChild(wrap);
 }
 function renderGauge(el, opts) {
   if (typeof document === "undefined") return;
@@ -609,14 +843,633 @@ function renderGauge(el, opts) {
   wrap.append(svg, center);
   el.appendChild(wrap);
 }
+function renderCalendar(el, opts) {
+  if (typeof document === "undefined") return;
+  withChrome(el, opts, true, (body) => {
+    let entries;
+    if (opts.data && opts.data.length > 0) {
+      entries = opts.data;
+    } else if (opts.dates && opts.dates.length > 0 && opts.values) {
+      entries = opts.dates.slice(0, opts.values.length).map((date, i) => ({ date, value: opts.values[i] ?? 0 }));
+    } else {
+      renderEmpty(body, opts.emptyLabel);
+      return;
+    }
+    const wrap = document.createElement("div");
+    wrap.className = "chart-calendar";
+    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 months = document.createElement("div");
+    months.className = "chart-calendar-months";
+    const weekdayRow = document.createElement("div");
+    weekdayRow.className = "chart-calendar-weekdays";
+    ["\u4E00", "", "\u4E09", "", "\u4E94", "", "\u65E5"].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);
+    }
+    let lastMonth = -1;
+    entries.forEach((entry, i) => {
+      const d = /* @__PURE__ */ new Date(`${entry.date}T00:00:00`);
+      const col = Math.floor((pad + i) / 7);
+      if (d.getMonth() !== lastMonth) {
+        lastMonth = d.getMonth();
+        const label = document.createElement("span");
+        label.className = "chart-calendar-month";
+        label.textContent = `${d.getMonth() + 1}\u6708`;
+        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.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 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);
+  });
+}
+function renderScatter(el, opts) {
+  if (typeof document === "undefined") return;
+  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);
+      return;
+    }
+    const width = 360;
+    const height = 220;
+    const pad = 30;
+    let xMin = Infinity, xMax = -Infinity, yMin = Infinity, yMax = -Infinity, sMax = 0;
+    for (const p of pts) {
+      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 ((p.size ?? 0) > sMax) sMax = p.size ?? 0;
+    }
+    if (xMax === xMin) xMax = xMin + 1;
+    if (yMax === yMin) yMax = yMin + 1;
+    const rOf = (size) => size && sMax > 0 ? 3 + size / sMax * 7 : 4;
+    const wrap = document.createElement("div");
+    wrap.className = "chart-scatter";
+    const tone = toneVar(opts.tone);
+    const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img" });
+    const xAt = (x) => pad + (x - xMin) / (xMax - xMin) * (width - pad * 2);
+    const yAt = (y) => height - pad - (y - yMin) / (yMax - yMin) * (height - pad * 2);
+    for (let i = 0; i <= 3; i++) {
+      const y = pad + i * (height - pad * 2) / 3;
+      svg.appendChild(svgEl("line", {
+        x1: String(pad),
+        x2: String(width - pad),
+        y1: String(y),
+        y2: String(y),
+        stroke: "var(--token-line-soft)",
+        "stroke-width": "1"
+      }));
+      const tv = yMin + (yMax - yMin) * (3 - i) / 3;
+      const txt = svgEl("text", {
+        x: String(pad - 4),
+        y: String(y + 3),
+        "text-anchor": "end",
+        "font-size": "8",
+        fill: "var(--token-text-faint)"
+      });
+      txt.textContent = String(Math.round(tv * 10) / 10);
+      svg.appendChild(txt);
+    }
+    for (let i = 0; i <= 4; i++) {
+      const x = pad + i * (width - pad * 2) / 4;
+      svg.appendChild(svgEl("line", {
+        x1: String(x),
+        x2: String(x),
+        y1: String(pad),
+        y2: String(height - pad),
+        stroke: "var(--token-line-soft)",
+        "stroke-width": "1",
+        "stroke-dasharray": "2 3"
+      }));
+      const tv = xMin + (xMax - xMin) * i / 4;
+      const txt = svgEl("text", {
+        x: String(x),
+        y: String(height - pad + 12),
+        "text-anchor": "middle",
+        "font-size": "8",
+        fill: "var(--token-text-faint)"
+      });
+      txt.textContent = String(Math.round(tv * 10) / 10);
+      svg.appendChild(txt);
+    }
+    if (opts.yLabel) {
+      const t = svgEl("text", { x: "10", y: String(pad - 10), "font-size": "8", fill: "var(--token-text-faint)" });
+      t.textContent = opts.yLabel;
+      svg.appendChild(t);
+    }
+    if (opts.xLabel) {
+      const t = svgEl("text", { x: String(width - pad), y: String(pad - 10), "text-anchor": "end", "font-size": "8", fill: "var(--token-text-faint)" });
+      t.textContent = opts.xLabel;
+      svg.appendChild(t);
+    }
+    pts.forEach((p, i) => {
+      const c = svgEl("circle", {
+        cx: xAt(p.x).toFixed(1),
+        cy: yAt(p.y).toFixed(1),
+        r: rOf(p.size).toFixed(1),
+        fill: tone,
+        "fill-opacity": "0.55",
+        stroke: tone,
+        "stroke-width": "1"
+      });
+      const title = svgEl("title", {});
+      title.textContent = `${p.label ?? `#${i + 1}`}: (${p.x}, ${p.y}${p.size != null ? `, size ${p.size}` : ""})`;
+      c.appendChild(title);
+      setMarkData(c, { index: i, label: p.label ?? `#${i + 1}`, value: p.y });
+      c.dataset.chartX = String(p.x);
+      svg.appendChild(c);
+    });
+    wrap.appendChild(svg);
+    body.appendChild(wrap);
+  });
+}
+function chartFormatValue(format) {
+  if (!format) return (v) => String(v);
+  const notation = format.notation ?? "raw";
+  return (v) => {
+    let text;
+    if (notation === "compact") {
+      const abs = Math.abs(v);
+      text = abs >= 1e6 ? `${Math.round(v / 1e5) / 10}M` : abs >= 1e3 ? `${Math.round(v / 100) / 10}k` : String(v);
+    } else if (notation === "percent") {
+      text = `${Math.round(v * 10) / 10}%`;
+    } else if (notation === "ms") {
+      if (v <= 0) text = "0ms";
+      else if (v < 1e3) text = `${Math.round(v)}ms`;
+      else if (v < 6e4) text = `${Math.round(v / 100) / 10}s`;
+      else text = `${Math.floor(v / 6e4)}m`;
+    } else {
+      text = String(Math.round(v * 100) / 100);
+    }
+    return format.unit ? `${text} ${format.unit}` : text;
+  };
+}
+function pivotData(spec) {
+  const data = spec.data;
+  if (!Array.isArray(data) || data.length === 0) return {};
+  const d = spec.dims ?? {};
+  const labelField = d.label ?? "label";
+  const seriesField = d.series ?? "series";
+  const valueField = d.value ?? "value";
+  const num = (v) => typeof v === "number" && Number.isFinite(v) ? v : Number(v) || 0;
+  const str = (v) => typeof v === "string" ? v : v == null ? "" : String(v);
+  if (d.x || data.some((r) => typeof r.x === "number")) {
+    const xf = d.x ?? "x";
+    const yf = d.y ?? "y";
+    const sf = d.size ?? "size";
+    const lf = d.label ?? "label";
+    const points = data.filter((r) => r[xf] != null && r[yf] != null).map((r) => ({
+      x: num(r[xf]),
+      y: num(r[yf]),
+      size: r[sf] != null ? num(r[sf]) : void 0,
+      label: r[lf] != null ? str(r[lf]) : void 0
+    }));
+    return { points };
+  }
+  const labels = [];
+  const seenLabel = /* @__PURE__ */ new Set();
+  const hasSeries = data.some((r) => r[seriesField] != null && r[seriesField] !== "");
+  const seriesNames = [];
+  const seenSeries = /* @__PURE__ */ new Set();
+  for (const r of data) {
+    const l = str(r[labelField]);
+    if (!seenLabel.has(l)) {
+      seenLabel.add(l);
+      labels.push(l);
+    }
+    if (hasSeries) {
+      const sn = str(r[seriesField]);
+      if (!seenSeries.has(sn)) {
+        seenSeries.add(sn);
+        seriesNames.push(sn);
+      }
+    }
+  }
+  const labelIndex = new Map(labels.map((l, i) => [l, i]));
+  const seriesIndex = new Map(seriesNames.map((s, i) => [s, i]));
+  const matrix = seriesNames.map(() => labels.map(() => NaN));
+  for (const r of data) {
+    const li = labelIndex.get(str(r[labelField])) ?? 0;
+    const si = hasSeries ? seriesIndex.get(str(r[seriesField])) ?? 0 : 0;
+    (matrix[si] ?? [])[li] = num(r[valueField]);
+  }
+  for (const row of matrix) for (let i = 0; i < row.length; i++) if (Number.isNaN(row[i])) row[i] = 0;
+  if (hasSeries) {
+    return {
+      labels,
+      series: seriesNames.map((name, si) => ({ name, values: matrix[si] ?? [] }))
+    };
+  }
+  return { labels, values: matrix[0] ?? [] };
+}
+var CHART_TYPE_ALIASES = {
+  bar: "vbar",
+  column: "vbar",
+  "vertical-bar": "vbar",
+  "bar-vertical": "vbar",
+  "horizontal-bar": "hbar",
+  "bar-horizontal": "hbar",
+  ranking: "hbar",
+  pie: "donut",
+  ring: "donut",
+  "pie-chart": "donut",
+  "stacked-bar": "stack",
+  "stacked-bar-100": "stack",
+  ratio: "stack",
+  time: "line",
+  timeline: "line",
+  trend: "line",
+  "trend-line": "line",
+  contribution: "calendar",
+  "contribution-graph": "calendar",
+  "calendar-heatmap": "calendar",
+  heat: "heatmap",
+  matrix: "heatmap",
+  bubble: "scatter",
+  "scatter-plot": "scatter",
+  dial: "gauge",
+  progress: "gauge",
+  mini: "sparkline",
+  "trend-sparkline": "sparkline",
+  spider: "radar",
+  "radar-chart": "radar"
+};
+function toNum(v) {
+  if (typeof v === "number" && Number.isFinite(v)) return v;
+  if (typeof v === "string" && v.trim() !== "") {
+    const n = Number(v.replace(/[,\s%]/g, ""));
+    if (Number.isFinite(n)) return n;
+  }
+  return void 0;
+}
+function normalizeChartSpec(raw) {
+  let src = raw;
+  if (typeof src === "string") {
+    try {
+      src = JSON.parse(src);
+    } catch {
+      return {};
+    }
+  }
+  if (!src || typeof src !== "object" || Array.isArray(src)) {
+    if (Array.isArray(raw)) src = { data: raw };
+    else return {};
+  }
+  const s = src;
+  const spec = {};
+  if (typeof s.type === "string") {
+    const t = s.type.trim().toLowerCase();
+    spec.type = CHART_TYPE_ALIASES[t] ?? t;
+  }
+  for (const k of ["title", "tone", "emptyLabel"]) {
+    if (typeof s[k] === "string") spec[k] = s[k];
+  }
+  for (const k of ["stacked", "fill", "tooltip", "legend"]) {
+    if (typeof s[k] === "boolean") spec[k] = s[k];
+  }
+  for (const k of ["weeks", "max", "levels"]) {
+    const n = toNum(s[k]);
+    if (n != null) spec[k] = n;
+  }
+  if (Array.isArray(s.labels)) spec.labels = s.labels.map((v) => String(v ?? ""));
+  if (Array.isArray(s.values)) {
+    const values = s.values.map(toNum).filter((v) => v != null);
+    if (values.length > 0) spec.values = values;
+  }
+  if (Array.isArray(s.dates)) spec.dates = s.dates.map((v) => String(v ?? ""));
+  if (Array.isArray(s.axes)) spec.axes = s.axes.map((v) => String(v ?? ""));
+  if (Array.isArray(s.series)) {
+    const series = s.series.filter((v) => !!v && typeof v === "object").map((v, i) => {
+      const values = Array.isArray(v.values) ? v.values.map(toNum).filter((n) => n != null) : [];
+      const sv = { name: String(v.name ?? `\u7CFB\u5217${i + 1}`), values };
+      const tone = v.tone;
+      if (typeof tone === "string" || typeof tone === "number") sv.tone = tone;
+      return sv;
+    }).filter((v) => v.values.length > 0);
+    if (series.length > 0) spec.series = series;
+  }
+  if (Array.isArray(s.segments)) {
+    const segments = s.segments.filter((v) => !!v && typeof v === "object").map((v) => {
+      const seg = { label: String(v.label ?? v.name ?? ""), value: toNum(v.value) ?? 0 };
+      if (typeof v.tone === "string") seg.tone = v.tone;
+      return seg;
+    }).filter((v) => v.label !== "" || v.value !== 0);
+    if (segments.length > 0) spec.segments = segments;
+  }
+  if (Array.isArray(s.points)) {
+    const points = s.points.filter((v) => !!v && typeof v === "object").map((v) => ({
+      x: toNum(v.x) ?? 0,
+      y: toNum(v.y) ?? 0,
+      size: toNum(v.size),
+      label: typeof v.label === "string" ? v.label : void 0
+    }));
+    if (points.length > 0) spec.points = points;
+  }
+  if (Array.isArray(s.data)) spec.data = s.data.filter((v) => !!v && typeof v === "object");
+  if (s.dims && typeof s.dims === "object" && !Array.isArray(s.dims)) spec.dims = s.dims;
+  if (s.format && typeof s.format === "object") {
+    const f = s.format;
+    const format = {};
+    if (typeof f.unit === "string") format.unit = f.unit;
+    if (typeof f.notation === "string" && ["compact", "percent", "ms", "raw"].includes(f.notation)) {
+      format.notation = f.notation;
+    }
+    spec.format = format;
+  }
+  const isDateRecords = spec.data?.length && spec.data[0] && "date" in spec.data[0];
+  if (spec.data && spec.data.length > 0 && !isDateRecords && !spec.series && !spec.points && !spec.values && !spec.segments) {
+    Object.assign(spec, pivotData(spec));
+  }
+  return spec;
+}
+function looksTemporal(labels) {
+  if (labels.length === 0) return false;
+  let hits = 0;
+  for (const l of labels) {
+    if (/^\d{4}-\d{2}(-\d{2})?$/.test(l)) hits++;
+    else if (/^\d{4}\/\d{1,2}(\/\d{1,2})?$/.test(l)) hits++;
+    else if (/^\d{4}年/.test(l)) hits++;
+    else if (/^[Qq][1-4]$/.test(l)) hits++;
+    else if (/^(周一|周二|周三|周四|周五|周六|周日|Mon|Tue|Wed|Thu|Fri|Sat|Sun)/i.test(l)) hits++;
+    else if (/^第?\d+[日时周月]/.test(l)) hits++;
+    else if (/^(v|ver\.?|version[ .]?)?\d+(\.\d+)+$/i.test(l)) hits++;
+    else if (/^\d{4}$/.test(l)) hits++;
+  }
+  return hits / labels.length >= 0.6;
+}
+function inferChartType(spec) {
+  if (spec.points && spec.points.length > 0) return "scatter";
+  if (spec.dates && spec.dates.length > 0) return "calendar";
+  if (spec.segments && spec.segments.length > 0) return "donut";
+  if (spec.axes && spec.axes.length >= 3) return "radar";
+  const labels = spec.labels ?? [];
+  const multiSeries = (spec.series?.length ?? 0) > 1;
+  if (labels.length > 0) {
+    if (looksTemporal(labels)) return "line";
+    if (multiSeries) return "vbar";
+    return labels.length > 8 ? "hbar" : "vbar";
+  }
+  if (multiSeries) return "line";
+  if (spec.values && spec.values.length > 1) return "line";
+  if (typeof spec.max === "number" && spec.values && spec.values.length === 1) return "gauge";
+  return "vbar";
+}
+function dispatchChartEvent(root, type, mark, chart, phase, pointer) {
+  const read = (name) => mark.getAttribute(name) ?? void 0;
+  const numOr = (v) => v == null ? void 0 : Number(v);
+  const detail = {
+    type,
+    phase,
+    chart,
+    index: numOr(read("data-chart-index")),
+    seriesIndex: numOr(read("data-chart-series")),
+    seriesName: read("data-chart-series-name"),
+    label: read("data-chart-label"),
+    value: numOr(read("data-chart-value")),
+    target: mark,
+    pointerX: pointer?.x,
+    pointerY: pointer?.y
+  };
+  root.dispatchEvent(new CustomEvent(`icen:chart-${type}`, { detail, bubbles: true }));
+}
+var tooltipEl = null;
+function chartTooltip() {
+  if (!tooltipEl) {
+    tooltipEl = document.createElement("div");
+    tooltipEl.className = "chart-tooltip";
+    tooltipEl.setAttribute("role", "tooltip");
+    tooltipEl.hidden = true;
+    document.body.appendChild(tooltipEl);
+  }
+  return tooltipEl;
+}
+function tooltipText(mark) {
+  const label = mark.getAttribute("data-chart-label") ?? "";
+  const series = mark.getAttribute("data-chart-series-name");
+  const value = mark.getAttribute("data-chart-value");
+  const head = series ? label ? `${series} \xB7 ${label}` : series : label;
+  return value != null ? `${head}\uFF1A${value}` : head;
+}
+function moveTooltip(x, y) {
+  const tip = chartTooltip();
+  const pad = 12;
+  const w = tip.offsetWidth || 120;
+  const h = tip.offsetHeight || 28;
+  let left = x + pad;
+  let top = y - h - pad;
+  if (left + w > window.innerWidth - 8) left = x - w - pad;
+  if (top < 8) top = y + pad;
+  tip.style.left = `${Math.round(left)}px`;
+  tip.style.top = `${Math.round(top)}px`;
+}
+function hasLegendOf(spec) {
+  switch (spec.type) {
+    case "donut":
+    case "stack":
+      return (spec.segments?.length ?? 0) > 0;
+    case "heatmap":
+    case "calendar":
+      return true;
+    case "line":
+    case "vbar":
+    case "radar":
+      return (spec.series?.length ?? 0) > 1;
+    default:
+      return false;
+  }
+}
+function renderChart(el, raw) {
+  const noop = () => void 0;
+  if (typeof document === "undefined") {
+    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 };
+  const render = () => {
+    if (!current.type) current = { ...current, type: inferChartType(current) };
+    const spec = current;
+    const formatValue = chartFormatValue(spec.format);
+    if (spec.legend !== void 0) legendState.hidden = spec.legend === false;
+    withChrome(root, spec, hasLegendOf(spec), (body) => {
+      switch (spec.type) {
+        case "line":
+          renderLine(body, { labels: spec.labels ?? [], values: spec.values ?? [], series: spec.series, tone: spec.tone, fill: spec.fill, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
+          break;
+        case "area":
+          renderLine(body, { labels: spec.labels ?? [], values: spec.values ?? [], series: spec.series, tone: spec.tone, fill: true, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
+          break;
+        case "vbar":
+          renderVBar(body, { labels: spec.labels ?? [], values: spec.values ?? [], series: spec.series, stacked: spec.stacked, tone: spec.tone, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
+          break;
+        case "hbar":
+          renderHBar(body, { labels: spec.labels ?? [], values: spec.values ?? [], tone: spec.tone, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
+          break;
+        case "stack":
+          renderStack(body, { segments: spec.segments ?? [], formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
+          break;
+        case "donut":
+          renderDonut(body, { segments: spec.segments ?? [], formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
+          break;
+        case "radar": {
+          const series = spec.series ? spec.series.map((s) => ({ name: s.name, values: s.values, tone: typeof s.tone === "string" ? s.tone : void 0 })) : spec.values ? [{ name: "", values: spec.values }] : [];
+          renderRadar(body, { axes: spec.axes ?? spec.labels ?? [], series, max: spec.max, levels: spec.levels, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
+          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 });
+          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 });
+          break;
+        case "sparkline":
+          renderSparkline(body, { labels: spec.labels ?? [], values: spec.values ?? [], tone: spec.tone, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
+          break;
+        case "gauge":
+          renderGauge(body, { value: spec.values?.[0] ?? 0, max: spec.max, tone: spec.tone, label: spec.labels?.[0], formatValue });
+          break;
+        case "scatter":
+          renderScatter(body, { points: spec.points ?? [], tone: spec.tone, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
+          break;
+        default:
+          renderEmpty(body, spec.emptyLabel);
+      }
+    });
+  };
+  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 });
+    });
+  }
+  render();
+  return {
+    el: root,
+    spec: current,
+    update(next) {
+      current = normalizeChartSpec(next);
+      render();
+    },
+    on(name, listener) {
+      const handler = (event) => {
+        listener(event.detail, event);
+      };
+      root.addEventListener(`icen:chart-${name}`, handler);
+      return () => root.removeEventListener(`icen:chart-${name}`, handler);
+    },
+    destroy() {
+      root.textContent = "";
+      attached.__icenChartBound = false;
+      chartTooltip().hidden = true;
+    }
+  };
+}
 export {
+  chartFormatValue,
+  inferChartType,
+  normalizeChartSpec,
   renderArea,
+  renderCalendar,
+  renderChart,
   renderDonut,
   renderGauge,
   renderHBar,
   renderHeatmap,
   renderLine,
   renderRadar,
+  renderScatter,
   renderSparkline,
   renderStack,
   renderVBar