@icen.ai/ui 0.4.0 → 0.8.0

package/dist/behaviors/ai-tools.mjs

@@ -0,0 +1,1658 @@
+// src/behaviors/charts.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function toneVar(tone = "accent") {
+  switch (tone) {
+    case "success":
+      return "var(--token-success)";
+    case "warning":
+      return "var(--token-warning)";
+    case "error":
+      return "var(--token-error)";
+    case "muted":
+      return "var(--token-text-faint)";
+    case "accent":
+    default:
+      return "var(--token-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);
+  return el;
+}
+function renderEmpty(el, label) {
+  const box = document.createElement("div");
+  box.className = "chart-empty";
+  box.textContent = label ?? "\u6682\u65E0\u6570\u636E";
+  el.appendChild(box);
+}
+function legendItem(label, valueText, tone) {
+  const row = document.createElement("div");
+  row.className = "chart-legend-item";
+  const dot = document.createElement("span");
+  dot.className = "chart-legend-dot";
+  if (tone) dot.style.setProperty("--chart-tone", toneVar(tone));
+  const name = document.createElement("span");
+  name.className = "chart-legend-label";
+  name.textContent = label;
+  const val = document.createElement("span");
+  val.className = "chart-legend-value";
+  val.textContent = valueText;
+  row.append(dot, name, val);
+  return row;
+}
+function labelsRow(labels) {
+  const row = document.createElement("div");
+  row.className = "chart-labels";
+  for (const label of labels) {
+    const span = document.createElement("span");
+    span.textContent = label;
+    row.appendChild(span);
+  }
+  return row;
+}
+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 body = document.createElement("div");
+  body.className = "chart-body";
+  body.dataset.chartBody = "";
+  if (!opts.title && !hasLegend) {
+    el.appendChild(body);
+    paint(body);
+    return;
+  }
+  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));
+  });
+}
+function renderHBar(el, opts) {
+  if (typeof document === "undefined") return;
+  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);
+  });
+}
+function renderStack(el, opts) {
+  if (typeof document === "undefined") return;
+  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;
+  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: "var(--token-line-soft)",
+      "stroke-width": "14"
+    }));
+    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;
+  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);
+      }
+    });
+    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 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"
+      }));
+    }
+    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;
+  const exp = Math.floor(Math.log10(v));
+  const base = Math.pow(10, exp);
+  const frac = v / base;
+  let nice;
+  if (frac <= 1) nice = 1;
+  else if (frac <= 2) nice = 2;
+  else if (frac <= 5) nice = 5;
+  else nice = 10;
+  return nice * base;
+}
+function isoDate(d) {
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${d.getFullYear()}-${m}-${day}`;
+}
+function renderHeatmap(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.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;
+  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);
+  });
+}
+function renderGauge(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const max = opts.max ?? 100;
+  const ratio = max > 0 ? Math.min(1, Math.max(0, opts.value / max)) : 0;
+  const radius = 42;
+  const circumference = 2 * Math.PI * radius;
+  const wrap = document.createElement("div");
+  wrap.className = "chart-gauge";
+  if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
+  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": "10"
+  }));
+  const dash = ratio * circumference;
+  svg.appendChild(svgEl("circle", {
+    cx: "60",
+    cy: "60",
+    r: String(radius),
+    fill: "none",
+    stroke: toneVar(opts.tone),
+    "stroke-width": "10",
+    "stroke-dasharray": `${dash} ${circumference - dash}`,
+    "stroke-linecap": "round"
+  }));
+  const center = document.createElement("div");
+  center.className = "chart-gauge-center";
+  const val = document.createElement("span");
+  val.className = "chart-gauge-value";
+  val.textContent = opts.formatValue ? opts.formatValue(opts.value) : `${Math.round(ratio * 100)}%`;
+  center.appendChild(val);
+  if (opts.label) {
+    const lab = document.createElement("span");
+    lab.className = "chart-gauge-label";
+    lab.textContent = opts.label;
+    center.appendChild(lab);
+  }
+  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;
+    }
+  };
+}
+
+// src/behaviors/ai-tools.ts
+var toolRegistry = /* @__PURE__ */ new Map();
+function registerAiTool(def) {
+  if (def && typeof def.name === "string" && def.name && typeof def.run === "function") {
+    toolRegistry.set(def.name, def);
+  }
+}
+function unregisterAiTool(name) {
+  toolRegistry.delete(name);
+}
+function getAiTool(name) {
+  return toolRegistry.get(name);
+}
+function listAiTools() {
+  return Array.from(toolRegistry.values());
+}
+function toolAllowed(name, allow) {
+  if (!allow || allow.length === 0) return true;
+  return allow.some((pat) => pat.endsWith("*") ? name.startsWith(pat.slice(0, -1)) : pat === name);
+}
+var CHART_SPEC_SCHEMA = {
+  type: "object",
+  properties: {
+    type: {
+      type: "string",
+      description: "\u56FE\u8868\u7C7B\u578B\uFF0C\u7F3A\u7701\u81EA\u52A8\u63A8\u65AD",
+      enum: ["line", "area", "vbar", "hbar", "stack", "donut", "radar", "heatmap", "calendar", "sparkline", "gauge", "scatter"]
+    },
+    title: { type: "string", description: "\u56FE\u8868\u6807\u9898\uFF08\u6E32\u67D3\u5728\u5934\u90E8\u884C\u5DE6\u4FA7\uFF09" },
+    labels: { type: "array", items: { type: "string" }, description: "\u7C7B\u76EE\u8F74\uFF08line/vbar/hbar\uFF09" },
+    values: { type: "array", items: { type: "number" }, description: "\u5355\u7CFB\u5217\u6570\u503C\uFF08\u4E0E labels \u914D\u5BF9\uFF09" },
+    series: {
+      type: "array",
+      description: "\u591A\u7CFB\u5217\uFF08line/vbar/radar\uFF09",
+      items: {
+        type: "object",
+        properties: {
+          name: { type: "string" },
+          values: { type: "array", items: { type: "number" } }
+        },
+        required: ["name", "values"]
+      }
+    },
+    segments: {
+      type: "array",
+      description: "\u5360\u6BD4\u578B\uFF08donut/stack\uFF09\uFF1A[{label,value}]",
+      items: {
+        type: "object",
+        properties: { label: { type: "string" }, value: { type: "number" } },
+        required: ["label", "value"]
+      }
+    },
+    axes: { type: "array", items: { type: "string" }, description: "\u96F7\u8FBE\u8F74\u540D" },
+    points: {
+      type: "array",
+      description: "\u6563\u70B9/\u6C14\u6CE1\uFF1A[{x,y,size?,label?}]",
+      items: {
+        type: "object",
+        properties: { x: { type: "number" }, y: { type: "number" }, size: { type: "number" }, label: { type: "string" } }
+      }
+    },
+    dates: { type: "array", items: { type: "string" }, description: "\u8D21\u732E\u65E5\u5386 ISO \u65E5\u671F\uFF08\u4E0E values \u914D\u5BF9\uFF09" },
+    data: {
+      type: "array",
+      description: "\u4EFB\u610F\u7EF4\u5EA6\u539F\u59CB\u8BB0\u5F55 + dims \u5B57\u6BB5\u6620\u5C04\uFF08\u81EA\u52A8\u900F\u89C6\u6210 \u7C7B\u76EE \xD7 \u7CFB\u5217\uFF09",
+      items: { type: "object" }
+    },
+    dims: {
+      type: "object",
+      description: "data[] \u7684\u5B57\u6BB5\u6620\u5C04\uFF1A{label?, series?, value?, x?, y?}",
+      properties: {
+        label: { type: "string" },
+        series: { type: "string" },
+        value: { type: "string" },
+        x: { type: "string" },
+        y: { type: "string" }
+      }
+    },
+    tone: { type: "string", enum: ["accent", "success", "warning", "error", "muted"] },
+    stacked: { type: "boolean", description: "vbar \u591A\u7CFB\u5217\u5806\u53E0\uFF08\u9ED8\u8BA4\u5206\u7EC4\uFF09" },
+    fill: { type: "boolean", description: "line \u591A\u7CFB\u5217\u586B\u5145\u9762\u79EF" },
+    format: {
+      type: "object",
+      description: "\u6570\u503C\u683C\u5F0F\u5316\uFF1A{notation?: compact|percent|ms, unit?}",
+      properties: {
+        notation: { type: "string", enum: ["compact", "percent", "ms", "raw"] },
+        unit: { type: "string" }
+      }
+    },
+    legend: { type: "boolean", description: "false = \u521D\u59CB\u9690\u85CF\u56FE\u4F8B" },
+    tooltip: { type: "boolean", description: "false = \u5173\u95ED\u5185\u7F6E\u63D0\u793A" }
+  }
+};
+registerAiTool({
+  name: "render_chart",
+  description: "\u5728\u7528\u6237\u754C\u9762\u6E32\u67D3\u4E00\u5F20\u56FE\u8868\u53EF\u89C6\u5316\u3002\u8F93\u5165\u4E00\u4EFD\u56FE\u8868\u89C4\u683C\uFF08\u7EAF JSON\uFF09\uFF1Alabels+values\uFF08\u7C7B\u76EE\u6570\u503C\uFF09\u3001series\uFF08\u591A\u7CFB\u5217\uFF09\u3001segments\uFF08\u5360\u6BD4\uFF09\u3001points\uFF08\u6563\u70B9\u6C14\u6CE1\uFF09\u3001dates\uFF08\u8D21\u732E\u65E5\u5386\uFF09\u4EFB\u7ED9\u5176\u4E00\uFF1Btype \u7F3A\u7701\u65F6\u6309\u6570\u636E\u5F62\u6001\u81EA\u52A8\u9009\u578B\uFF08\u65F6\u95F4\u5E8F\u5217\u2192\u6298\u7EBF\u3001\u5360\u6BD4\u2192\u73AF\u5F62\u3001\u65E5\u671F\u2192\u8D21\u732E\u65E5\u5386\u3001\u5750\u6807\u70B9\u2192\u6563\u70B9\uFF09\u3002\u56FE\u8868\u5E26\u4EA4\u4E92\uFF08\u60AC\u505C\u63D0\u793A/\u70B9\u51FB/\u53F3\u952E\uFF09\u4E0E\u53EF\u9690\u85CF\u56FE\u4F8B\u3002",
+  inputSchema: CHART_SPEC_SCHEMA,
+  run: (input, mount) => {
+    const handle = renderChart(mount, input);
+    return { mounted: true, chart: handle.spec.type ?? "auto" };
+  }
+});
+function isBrowserTools() {
+  return typeof document !== "undefined" && typeof window !== "undefined";
+}
+function emitArea(area, name, detail) {
+  try {
+    area.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+  } catch {
+  }
+}
+function createAiToolArea(el, opts = {}) {
+  const noop = () => void 0;
+  if (!isBrowserTools()) {
+    return { el, get count() {
+      return 0;
+    }, call: () => null, can: () => false, setTools: noop, setMax: noop, clear: noop, onChange: () => noop };
+  }
+  const area = el;
+  area.classList.add("ai-tools-mount");
+  let allow = opts.tools;
+  let max = opts.max;
+  let seq = 0;
+  const records = [];
+  const listeners = [];
+  const notify = () => {
+    for (const fn of listeners) fn(records.slice());
+  };
+  const evictOldest = () => {
+    const oldest = records.find((r) => r.el);
+    if (!oldest || !oldest.el) return;
+    oldest.el.remove();
+    const idx = records.indexOf(oldest);
+    if (idx >= 0) {
+      records.splice(idx, 1);
+      emitArea(area, "icen:ai-tool-evict", { name: oldest.def.name, el: oldest.el });
+    }
+  };
+  const areaApi = {
+    el: area,
+    get count() {
+      return records.filter((r) => r.el).length;
+    },
+    can(name) {
+      return toolAllowed(name, allow) && toolRegistry.has(name);
+    },
+    setTools(tools) {
+      allow = tools;
+    },
+    setMax(next) {
+      max = next;
+      while (max != null && records.filter((r) => r.el).length > max) evictOldest();
+    },
+    clear() {
+      for (const r of records) r.el?.remove();
+      records.length = 0;
+      notify();
+    },
+    onChange(fn) {
+      listeners.push(fn);
+      return () => {
+        const i = listeners.indexOf(fn);
+        if (i >= 0) listeners.splice(i, 1);
+      };
+    },
+    call(name, input) {
+      const def = toolRegistry.get(name);
+      if (!def || !toolAllowed(name, allow)) return null;
+      void seq;
+      const item = document.createElement("div");
+      item.className = "ai-tools-item";
+      const head = document.createElement("button");
+      head.type = "button";
+      head.className = "ai-tools-item-head";
+      head.setAttribute("aria-expanded", "true");
+      const chevron = document.createElement("span");
+      chevron.className = "ai-tools-item-chevron";
+      chevron.setAttribute("aria-hidden", "true");
+      chevron.textContent = "\u25BE";
+      const label = document.createElement("span");
+      label.className = "ai-tools-item-name";
+      label.textContent = def.name;
+      const meta = document.createElement("span");
+      meta.className = "ai-tools-item-meta";
+      meta.textContent = (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+      const remove = document.createElement("span");
+      remove.className = "ai-tools-item-remove";
+      remove.setAttribute("role", "button");
+      remove.setAttribute("aria-label", `\u79FB\u9664 ${def.name} \u6302\u8F7D`);
+      remove.textContent = "\xD7";
+      const mount = document.createElement("div");
+      mount.className = "ai-tools-item-body";
+      mount.style.minHeight = `${opts.itemMinHeight ?? 240}px`;
+      head.append(chevron, label, meta, remove);
+      item.append(head, mount);
+      area.appendChild(item);
+      head.addEventListener("click", (e) => {
+        if (e.target instanceof Element && e.target.closest(".ai-tools-item-remove")) return;
+        const open = head.getAttribute("aria-expanded") === "true";
+        head.setAttribute("aria-expanded", String(!open));
+        mount.hidden = open;
+        item.classList.toggle("is-collapsed", open);
+      });
+      const record = { def, el: item, ts: Date.now(), input, result: void 0 };
+      remove.addEventListener("click", (e) => {
+        e.stopPropagation();
+        item.remove();
+        const i = records.indexOf(record);
+        if (i >= 0) records.splice(i, 1);
+        notify();
+      });
+      emitArea(area, "icen:ai-tool-call", { name, input, el: item });
+      let ok = true;
+      let error;
+      try {
+        record.result = def.run(input, mount);
+        record.handle = record.result;
+      } catch (err) {
+        ok = false;
+        error = err instanceof Error ? err.message : String(err);
+        mount.textContent = `\u5DE5\u5177\u6267\u884C\u5931\u8D25\uFF1A${error}`;
+      }
+      records.push(record);
+      emitArea(area, "icen:ai-tool-result", { name, ok, el: item, error, count: records.length });
+      while (max != null && records.filter((r) => r.el).length > max) evictOldest();
+      notify();
+      return record;
+    }
+  };
+  return areaApi;
+}
+function aiToolsToOpenAI(names) {
+  return listAiTools().filter((d) => toolAllowed(d.name, names)).map((d) => ({
+    type: "function",
+    function: { name: d.name, description: d.description, parameters: d.inputSchema }
+  }));
+}
+function aiToolsToMcp(names) {
+  return listAiTools().filter((d) => toolAllowed(d.name, names)).map((d) => ({ name: d.name, description: d.description, inputSchema: d.inputSchema }));
+}
+function aiToolsManifest(names) {
+  const tools = listAiTools().filter((d) => toolAllowed(d.name, names));
+  if (tools.length === 0) return "\uFF08\u65E0\u5DF2\u6CE8\u518C\u7684 UI \u5DE5\u5177\uFF09";
+  return [
+    "\u53EF\u7528 UI \u5DE5\u5177\uFF08\u8C03\u7528\u540E\u5728\u7528\u6237\u754C\u9762\u6302\u8F7D\u53EF\u89C6\u5316\u7ED3\u679C\uFF09\uFF1A",
+    ...tools.map((d) => `- ${d.name}\uFF1A${d.description}`)
+  ].join("\n");
+}
+function parseAiToolArgs(raw) {
+  if (raw && typeof raw === "object" && !Array.isArray(raw)) return raw;
+  if (typeof raw === "string") {
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) return parsed;
+    } catch {
+    }
+  }
+  return {};
+}
+export {
+  aiToolsManifest,
+  aiToolsToMcp,
+  aiToolsToOpenAI,
+  createAiToolArea,
+  getAiTool,
+  listAiTools,
+  parseAiToolArgs,
+  registerAiTool,
+  unregisterAiTool
+};