@icen.ai/ui 0.4.0 → 0.8.0

package/dist/behaviors/ai-tool.mjs

@@ -0,0 +1,2125 @@
+// src/behaviors/ai-core.ts
+function aiStatusLabel(s) {
+  const labels = {
+    pending: "\u7B49\u5F85",
+    running: "\u6267\u884C\u4E2D",
+    streaming: "\u6D41\u5F0F\u4E2D",
+    approval: "\u5F85\u786E\u8BA4",
+    done: "\u5B8C\u6210",
+    error: "\u5931\u8D25",
+    cancelled: "\u5DF2\u53D6\u6D88"
+  };
+  return labels[s] ?? s;
+}
+var svg = (body) => `<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">${body}</svg>`;
+var ICON_TERMINAL = svg('<path d="m4 17 6-6-6-6"/><path d="M12 19h8"/>');
+var ICON_FILE = svg(
+  '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>'
+);
+var ICON_FILE_PEN = svg(
+  '<path d="M12.5 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8l5 5v3.5"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M19 6.5 16.5 4"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/>'
+);
+var ICON_FILE_PLUS = svg(
+  '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M9 15h6"/><path d="M12 12v6"/>'
+);
+var ICON_TRASH = svg(
+  '<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M10 11v6"/><path d="M14 11v6"/>'
+);
+var ICON_SEARCH = svg('<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>');
+var ICON_FOLDER_SEARCH = svg(
+  '<path d="M11 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v4"/><circle cx="17" cy="17" r="3"/><path d="m21 21-1.9-1.9"/>'
+);
+var ICON_SCAN_SEARCH = svg(
+  '<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="3"/><path d="m16 16-1.9-1.9"/>'
+);
+var ICON_GLOBE = svg(
+  '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>'
+);
+var ICON_DOWNLOAD = svg(
+  '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/>'
+);
+var ICON_BLOCKS = svg(
+  '<rect width="7" height="7" x="4" y="4" rx="1"/><rect width="7" height="7" x="13" y="4" rx="1"/><rect width="7" height="7" x="4" y="13" rx="1"/><rect width="7" height="7" x="13" y="13" rx="1"/>'
+);
+var ICON_ZAP = svg(
+  '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>'
+);
+var ICON_LIST = svg(
+  '<path d="M3 12h.01"/><path d="M3 18h.01"/><path d="M3 6h.01"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M8 6h13"/>'
+);
+var ICON_LIST_CHECKS = svg(
+  '<path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/>'
+);
+var ICON_BOT = svg(
+  '<path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>'
+);
+var ICON_CHART = svg(
+  '<path d="M3 3v18h18"/><path d="M7 15l4-6 3 4 5-8"/>'
+);
+var ICON_FILE_TEXT = svg(
+  '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>'
+);
+function isObj(v) {
+  return typeof v === "object" && v !== null;
+}
+function pickStr(input, keys) {
+  if (!isObj(input)) return void 0;
+  for (const k of keys) {
+    const v = input[k];
+    if (typeof v === "string" && v) return v;
+  }
+  return void 0;
+}
+function pickNum(src, keys) {
+  if (!isObj(src)) return void 0;
+  for (const k of keys) {
+    const v = src[k];
+    if (typeof v === "number" && Number.isFinite(v)) return v;
+  }
+  return void 0;
+}
+function firstLine(s, max = 80) {
+  const line = s.split("\n", 1)[0]?.trim() ?? "";
+  return line.length > max ? `${line.slice(0, max)}\u2026` : line;
+}
+function filePathOf(input) {
+  return pickStr(input, ["file_path", "path", "file", "filename"]);
+}
+var summarizePath = (input) => filePathOf(input);
+function summarizeRead(input) {
+  const p = filePathOf(input);
+  if (!p) return void 0;
+  const offset = pickNum(input, ["offset", "start_line"]);
+  if (offset == null) return p;
+  const limit = pickNum(input, ["limit", "end_line"]);
+  return limit != null ? `${p}:${offset}-${offset + limit}` : `${p}:${offset}`;
+}
+function summarizeShell(input) {
+  const cmd = typeof input === "string" ? input : pickStr(input, ["command", "cmd", "script"]);
+  return cmd ? firstLine(cmd) : void 0;
+}
+function summarizeGrep(input) {
+  const pattern = pickStr(input, ["pattern", "regex", "query"]);
+  const p = filePathOf(input);
+  if (pattern) return p ? `${firstLine(pattern, 40)} \xB7 ${p}` : firstLine(pattern);
+  return p;
+}
+var sum = (fn) => {
+  return (input) => fn(input) ?? "";
+};
+var BUILTIN_KINDS = {
+  shell: { label: "\u547D\u4EE4", icon: ICON_TERMINAL, tint: "accent", summarize: sum(summarizeShell) },
+  read: { label: "\u8BFB\u53D6", icon: ICON_FILE, tint: "info", summarize: sum(summarizeRead) },
+  edit: { label: "\u7F16\u8F91", icon: ICON_FILE_PEN, tint: "warning", summarize: sum(summarizePath) },
+  write: { label: "\u5199\u5165", icon: ICON_FILE_PLUS, tint: "warning", summarize: sum(summarizePath) },
+  rm: { label: "\u5220\u9664", icon: ICON_TRASH, tint: "error", summarize: sum(summarizePath) },
+  grep: { label: "\u641C\u7D22", icon: ICON_SEARCH, tint: "info", summarize: sum(summarizeGrep) },
+  glob: { label: "\u5339\u914D", icon: ICON_FOLDER_SEARCH, tint: "info", summarize: sum((i) => pickStr(i, ["pattern", "glob", "path"])) },
+  browser: { label: "\u6D4F\u89C8", icon: ICON_GLOBE, tint: "accent", summarize: sum((i) => pickStr(i, ["url", "uri", "target"])) },
+  search: { label: "\u68C0\u7D22", icon: ICON_SCAN_SEARCH, tint: "accent", summarize: sum((i) => pickStr(i, ["query", "q", "pattern"])) },
+  fetch: { label: "\u8BF7\u6C42", icon: ICON_DOWNLOAD, tint: "info", summarize: sum((i) => pickStr(i, ["url", "uri", "endpoint"])) },
+  mcp: { label: "MCP", icon: ICON_BLOCKS, tint: "muted", summarize: sum((i) => pickStr(i, ["tool", "method", "name"])) },
+  skill: { label: "\u6280\u80FD", icon: ICON_ZAP, tint: "accent", summarize: sum((i) => pickStr(i, ["skill", "name", "command"])) },
+  todo: {
+    label: "\u5F85\u529E",
+    icon: ICON_LIST,
+    tint: "info",
+    summarize: sum((input) => {
+      const items = input && typeof input === "object" && Array.isArray(input.items) ? input.items : Array.isArray(input) ? input : [];
+      const done = items.filter((it) => it?.status === "done").length;
+      return items.length > 0 ? `${done}/${items.length} \u5B8C\u6210` : "";
+    })
+  },
+  plan: { label: "\u8BA1\u5212", icon: ICON_LIST_CHECKS, tint: "info" },
+  subagent: { label: "\u5B50\u4EE3\u7406", icon: ICON_BOT, tint: "accent", summarize: sum((i) => pickStr(i, ["task", "description", "prompt", "message", "subagent_type"])) },
+  note: { label: "\u7B14\u8BB0", icon: ICON_FILE_TEXT, tint: "muted" },
+  chart: { label: "\u56FE\u8868", icon: ICON_CHART, tint: "info", summarize: sum((i) => pickStr(i, ["title", "name"])) }
+};
+var FALLBACK_KIND = { label: "\u7B14\u8BB0", icon: ICON_FILE_TEXT, tint: "muted" };
+var kindRegistry = new Map(Object.entries(BUILTIN_KINDS));
+function getAiKind(name) {
+  return kindRegistry.get(name.trim().toLowerCase()) ?? kindRegistry.get("note") ?? FALLBACK_KIND;
+}
+function str(v) {
+  return typeof v === "string" && v ? v : void 0;
+}
+function trim1(v) {
+  const s = (Math.round(v * 10) / 10).toFixed(1);
+  return s.endsWith(".0") ? s.slice(0, -2) : s;
+}
+function formatDuration(ms) {
+  if (!Number.isFinite(ms) || ms <= 0) return "0ms";
+  if (ms < 1e3) return `${Math.round(ms)}ms`;
+  if (ms < 6e4) return `${trim1(ms / 1e3)}s`;
+  const m = Math.floor(ms / 6e4);
+  const s = Math.round(ms % 6e4 / 1e3);
+  if (ms < 36e5) return s > 0 ? `${m}m${s}s` : `${m}m`;
+  const h2 = Math.floor(ms / 36e5);
+  const rm = Math.round(ms % 36e5 / 6e4);
+  return rm > 0 ? `${h2}h${rm}m` : `${h2}h`;
+}
+var PART_TYPES = /* @__PURE__ */ new Set(["text", "image", "audio", "video", "file", "resource-link"]);
+function isAiContentPart(v) {
+  if (!isObj(v)) return false;
+  const t = v.type;
+  if (typeof t !== "string" || !PART_TYPES.has(t)) return false;
+  if (t === "text") return typeof v.text === "string";
+  if (t === "resource-link") return typeof v.uri === "string";
+  return typeof v.url === "string" || typeof v.data === "string" && typeof v.mimeType === "string";
+}
+function aiContentUrl(part) {
+  if (part.type === "text" || part.type === "resource-link") return void 0;
+  if (typeof part.url === "string" && part.url) return part.url;
+  if (typeof part.data === "string" && part.data && typeof part.mimeType === "string") {
+    return `data:${part.mimeType};base64,${part.data}`;
+  }
+  return void 0;
+}
+function splitDataUri(uri) {
+  const m = /^data:([^;,]+);base64,(.*)$/s.exec(uri);
+  return m ? { mimeType: m[1] ?? "", data: m[2] ?? "" } : void 0;
+}
+function partFromOpenAi(item) {
+  const type = str(item.type) ?? "";
+  if (type === "text" && typeof item.text === "string") return { type: "text", text: item.text };
+  if (type === "image_url") {
+    const iu = isObj(item.image_url) ? item.image_url : void 0;
+    const url = iu ? str(iu.url) : void 0;
+    if (!url) return void 0;
+    const inline = splitDataUri(url);
+    return inline ? { type: "image", data: inline.data, mimeType: inline.mimeType } : { type: "image", url };
+  }
+  if (type === "input_audio") {
+    const ia = isObj(item.input_audio) ? item.input_audio : void 0;
+    const data = ia ? str(ia.data) : void 0;
+    const fmt2 = ia ? str(ia.format) : void 0;
+    if (!data) return void 0;
+    return { type: "audio", data, mimeType: fmt2 ? `audio/${fmt2}` : "audio/wav" };
+  }
+  if (type === "file") {
+    const f = isObj(item.file) ? item.file : void 0;
+    const fileId = f ? str(f.file_id) ?? str(f.filename) : void 0;
+    if (!fileId) return void 0;
+    return { type: "file", url: fileId, filename: str(f?.filename) };
+  }
+  return void 0;
+}
+function partFromAnthropicSource(mediaType, src, fallbackMime) {
+  if (!isObj(src)) return void 0;
+  if (str(src.type) === "url") {
+    const url = str(src.url);
+    return url ? { type: mediaType, url } : void 0;
+  }
+  const data = str(src.data);
+  const mimeType = str(src.media_type) ?? fallbackMime;
+  return data ? { type: mediaType, data, mimeType } : void 0;
+}
+function partFromAnthropic(block) {
+  const type = str(block.type) ?? "";
+  if (type === "text" && typeof block.text === "string") return { type: "text", text: block.text };
+  if (type === "image") return partFromAnthropicSource("image", block.source, "image/png");
+  if (type === "audio") return partFromAnthropicSource("audio", block.source, "audio/wav");
+  if (type === "document") return partFromAnthropicSource("file", block.source, "application/pdf");
+  return void 0;
+}
+function partFromMcp(item) {
+  const type = str(item.type) ?? "";
+  if (type === "text" && typeof item.text === "string") return { type: "text", text: item.text };
+  if (type === "image" || type === "audio") {
+    const data = str(item.data);
+    const mimeType = str(item.mimeType) ?? (type === "image" ? "image/png" : "audio/wav");
+    return data ? { type, data, mimeType } : void 0;
+  }
+  if (type === "resource_link") {
+    const uri = str(item.uri) ?? str(item.url);
+    return uri ? { type: "resource-link", uri, name: str(item.name), mimeType: str(item.mimeType) } : void 0;
+  }
+  if (type === "resource") {
+    const res = isObj(item.resource) ? item.resource : void 0;
+    if (!res) return void 0;
+    const uri = str(res.uri);
+    const mimeType = str(res.mimeType) ?? "";
+    const text = str(res.text);
+    if (text) return { type: "text", text };
+    const blob = str(res.blob);
+    if (blob) {
+      if (mimeType.startsWith("image/")) return { type: "image", data: blob, mimeType };
+      if (mimeType.startsWith("audio/")) return { type: "audio", data: blob, mimeType };
+      if (mimeType.startsWith("video/")) return { type: "video", data: blob, mimeType };
+      return { type: "file", data: blob, mimeType: mimeType || "application/octet-stream", filename: uri?.split("/").pop() };
+    }
+    return uri ? { type: "resource-link", uri, mimeType: mimeType || void 0 } : void 0;
+  }
+  return void 0;
+}
+function normalizeContentParts(raw) {
+  if (typeof raw === "string") return raw ? [{ type: "text", text: raw }] : [];
+  if (!Array.isArray(raw)) return [];
+  const out = [];
+  for (const item of raw) {
+    if (isAiContentPart(item)) {
+      out.push(item);
+      continue;
+    }
+    if (!isObj(item)) continue;
+    const part = partFromOpenAi(item) ?? partFromAnthropic(item) ?? partFromMcp(item);
+    if (part) out.push(part);
+  }
+  return out;
+}
+function svgIcon(svg2) {
+  if (typeof document === "undefined" || typeof DOMParser === "undefined") return null;
+  let parsed;
+  try {
+    parsed = new DOMParser().parseFromString(svg2, "image/svg+xml");
+  } catch {
+    return null;
+  }
+  const root = parsed.documentElement;
+  if (!root || root.tagName.toLowerCase() !== "svg" || parsed.querySelector("parsererror")) {
+    return null;
+  }
+  const sanitize = (el2) => {
+    for (const attr of Array.from(el2.attributes)) {
+      const name = attr.name.toLowerCase();
+      if (name.startsWith("on")) el2.removeAttribute(attr.name);
+      if ((name === "href" || name === "xlink:href") && attr.value.trim().toLowerCase().startsWith("javascript:")) {
+        el2.removeAttribute(attr.name);
+      }
+    }
+    for (const child of Array.from(el2.children)) {
+      const tag = child.tagName.toLowerCase();
+      if (tag === "script" || tag === "foreignobject") {
+        child.remove();
+        continue;
+      }
+      sanitize(child);
+    }
+  };
+  sanitize(root);
+  return document.importNode(root, true);
+}
+
+// src/behaviors/ai-chat.ts
+function safeHref(uri) {
+  const s = uri.trim().toLowerCase();
+  if (s.startsWith("javascript:") || s.startsWith("data:text/html")) return void 0;
+  return uri;
+}
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+function renderAiContentPart(part) {
+  if (part.type === "text") {
+    const span = el("span", "ai-msg-text");
+    span.textContent = part.text;
+    if (part.state === "streaming") span.classList.add("is-streaming");
+    return span;
+  }
+  if (part.type === "image") {
+    const src = aiContentUrl(part);
+    if (!src) return void 0;
+    const img = document.createElement("img");
+    img.className = "ai-msg-media ai-msg-media--image";
+    img.alt = part.alt ?? "";
+    img.setAttribute("loading", "lazy");
+    img.setAttribute("src", src);
+    return img;
+  }
+  if (part.type === "audio") {
+    const src = aiContentUrl(part);
+    if (!src) return void 0;
+    const audio = document.createElement("audio");
+    audio.className = "ai-msg-media ai-msg-media--audio";
+    audio.controls = true;
+    audio.setAttribute("src", src);
+    return audio;
+  }
+  if (part.type === "video") {
+    const src = aiContentUrl(part);
+    if (!src) return void 0;
+    const video = document.createElement("video");
+    video.className = "ai-msg-media ai-msg-media--video";
+    video.controls = true;
+    video.setAttribute("playsinline", "");
+    video.setAttribute("src", src);
+    return video;
+  }
+  if (part.type === "file") {
+    const chip = el("span", "ai-msg-file");
+    chip.appendChild(el("span", "ai-msg-file-name", part.filename ?? "\u6587\u4EF6"));
+    const href2 = part.url ? safeHref(part.url) : void 0;
+    if (href2 && /^(https?:|data:)/i.test(href2)) {
+      const a2 = document.createElement("a");
+      a2.className = "ai-msg-file-link";
+      a2.href = href2;
+      a2.download = part.filename ?? "";
+      a2.textContent = "\u4E0B\u8F7D";
+      chip.appendChild(a2);
+    }
+    return chip;
+  }
+  const a = document.createElement("a");
+  a.className = "ai-msg-link";
+  const href = safeHref(part.uri);
+  if (href) a.href = href;
+  a.textContent = part.name ?? part.uri;
+  a.title = part.uri;
+  return a;
+}
+
+// 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 el2 = document.createElementNS(SVG_NS, tag);
+  for (const [k, v] of Object.entries(attrs)) el2.setAttribute(k, v);
+  return el2;
+}
+function renderEmpty(el2, label) {
+  const box = document.createElement("div");
+  box.className = "chart-empty";
+  box.textContent = label ?? "\u6682\u65E0\u6570\u636E";
+  el2.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(svg2) {
+  try {
+    const doc = new DOMParser().parseFromString(svg2, "image/svg+xml");
+    const el2 = doc.documentElement;
+    return el2 && el2.tagName.toLowerCase() === "svg" && !doc.querySelector("parsererror") ? document.importNode(el2, true) : null;
+  } catch {
+    return null;
+  }
+}
+function withChrome(el2, opts, hasLegend, paint, state) {
+  if (el2.dataset.chartBody != null) {
+    el2.textContent = "";
+    paint(el2);
+    return;
+  }
+  el2.textContent = "";
+  const body = document.createElement("div");
+  body.className = "chart-body";
+  body.dataset.chartBody = "";
+  if (!opts.title && !hasLegend) {
+    el2.appendChild(body);
+    paint(body);
+    return;
+  }
+  let hidden = state && state.hidden != null ? state.hidden : opts.legend === false;
+  if (state) state.hidden = hidden;
+  el2.setAttribute("data-legend-hidden", String(hidden));
+  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 = el2.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 = el2.getAttribute("data-legend-hidden") === "true";
+    hidden = !nowHidden;
+    if (state) state.hidden = hidden;
+    el2.setAttribute("data-legend-hidden", String(hidden));
+    syncEye();
+    el2.dispatchEvent(new CustomEvent("icen:chart-legend-visibility", {
+      bubbles: true,
+      detail: { visible: hidden ? false : true }
+    }));
+  });
+  syncEye();
+  head.append(title, eye);
+  el2.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(el2, 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(el2, 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 sum2 = 0;
+        for (const s of seriesList) sum2 += Math.max(0, s.values[i] ?? 0);
+        if (sum2 > max) max = sum2;
+      }
+    } 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(el2, opts) {
+  if (typeof document === "undefined") return;
+  withChrome(el2, 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(el2, opts) {
+  if (typeof document === "undefined") return;
+  withChrome(el2, opts, opts.segments.length > 0, (body) => {
+    const total = opts.segments.reduce((sum2, s) => sum2 + s.value, 0);
+    if (opts.segments.length === 0 || total <= 0) {
+      renderEmpty(body, opts.emptyLabel);
+      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(el2, opts) {
+  if (typeof document === "undefined") return;
+  withChrome(el2, opts, opts.segments.length > 0, (body) => {
+    const total = opts.segments.reduce((sum2, s) => sum2 + s.value, 0);
+    if (opts.segments.length === 0 || total <= 0) {
+      renderEmpty(body, opts.emptyLabel);
+      return;
+    }
+    const radius = 42;
+    const circumference = 2 * Math.PI * radius;
+    const wrap = document.createElement("div");
+    wrap.className = "chart-donut";
+    const svg2 = svgEl("svg", { viewBox: "0 0 120 120", role: "img" });
+    svg2.style.transform = "rotate(-90deg)";
+    svg2.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 });
+      svg2.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(svg2, legend);
+    body.appendChild(wrap);
+  });
+}
+var lineGradientSeq = 0;
+function renderLine(el2, 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(el2, 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 svg2 = 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;
+      svg2.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) });
+        }
+        svg2.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 });
+      svg2.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
+        });
+        svg2.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);
+        svg2.appendChild(hit);
+      }
+    });
+    if (defs.firstChild) svg2.insertBefore(defs, svg2.firstChild);
+    wrap.append(svg2, labelsRow(sampleLabels(labelsUsed)));
+    body.appendChild(wrap);
+    if (seriesList.length > 1) body.appendChild(toggleLegend(seriesList.map((s, si) => ({ key: s.name, label: s.name, tone: s.tone, si })), wrap, opts));
+  });
+}
+function renderRadar(el2, opts) {
+  if (typeof document === "undefined") return;
+  withChrome(el2, 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 svg2 = 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(" ");
+      svg2.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);
+      svg2.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] ?? "";
+      svg2.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) });
+      svg2.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 });
+        svg2.appendChild(dot);
+      }
+      legendItems.push({ key: s.name || `\u7CFB\u5217${si + 1}`, label: s.name || `\u7CFB\u5217${si + 1}`, tone: s.tone, si });
+    });
+    wrap.append(svg2, opts.series.length > 1 ? toggleLegend(legendItems, wrap, opts) : (() => {
+      const l = document.createElement("div");
+      l.className = "chart-legend";
+      return l;
+    })());
+    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(el2, opts) {
+  if (typeof document === "undefined") return;
+  withChrome(el2, 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(el2, opts) {
+  if (typeof document === "undefined") return;
+  withChrome(el2, 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 svg2 = 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);
+    svg2.appendChild(defs);
+    svg2.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
+    svg2.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);
+    svg2.appendChild(dot);
+    wrap.appendChild(svg2);
+    body.appendChild(wrap);
+  });
+}
+function renderGauge(el2, opts) {
+  if (typeof document === "undefined") return;
+  el2.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 svg2 = svgEl("svg", { viewBox: "0 0 120 120", role: "img" });
+  svg2.style.transform = "rotate(-90deg)";
+  svg2.appendChild(svgEl("circle", {
+    cx: "60",
+    cy: "60",
+    r: String(radius),
+    fill: "none",
+    stroke: "var(--token-line-soft)",
+    "stroke-width": "10"
+  }));
+  const dash = ratio * circumference;
+  svg2.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(svg2, center);
+  el2.appendChild(wrap);
+}
+function renderCalendar(el2, opts) {
+  if (typeof document === "undefined") return;
+  withChrome(el2, 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(el2, opts) {
+  if (typeof document === "undefined") return;
+  withChrome(el2, 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 svg2 = 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;
+      svg2.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);
+      svg2.appendChild(txt);
+    }
+    for (let i = 0; i <= 4; i++) {
+      const x = pad + i * (width - pad * 2) / 4;
+      svg2.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);
+      svg2.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;
+      svg2.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;
+      svg2.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);
+      svg2.appendChild(c);
+    });
+    wrap.appendChild(svg2);
+    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 str2 = (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 ? str2(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 = str2(r[labelField]);
+    if (!seenLabel.has(l)) {
+      seenLabel.add(l);
+      labels.push(l);
+    }
+    if (hasSeries) {
+      const sn = str2(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(str2(r[labelField])) ?? 0;
+    const si = hasSeries ? seriesIndex.get(str2(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 h2 = tip.offsetHeight || 28;
+  let left = x + pad;
+  let top = y - h2 - 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(el2, raw) {
+  const noop = () => void 0;
+  if (typeof document === "undefined") {
+    return { el: el2, spec: {}, update: noop, on: () => noop, destroy: noop };
+  }
+  const root = el2;
+  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-tool.ts
+var AI_STATUSES = [
+  "pending",
+  "running",
+  "streaming",
+  "approval",
+  "done",
+  "error",
+  "cancelled"
+];
+function h(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+function setStatusClass(item, status) {
+  for (const s of AI_STATUSES) item.classList.toggle(`is-${s}`, s === status);
+}
+function prettyValue(value) {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2) ?? "";
+  } catch {
+    return String(value);
+  }
+}
+function compactValue(value, max = 160) {
+  if (value == null) return "";
+  let text;
+  if (typeof value === "string") {
+    text = value.replace(/\s+/g, " ").trim();
+  } else {
+    try {
+      text = JSON.stringify(value) ?? "";
+    } catch {
+      text = String(value);
+    }
+  }
+  return text.length > max ? `${text.slice(0, max)}\u2026` : text;
+}
+function summarizeInput(model) {
+  const kind = getAiKind(model.kind);
+  if (typeof kind.summarize === "function") {
+    try {
+      const text = kind.summarize(model.input);
+      if (text) return text;
+    } catch {
+    }
+  }
+  return compactValue(model.input);
+}
+function buildHead(headClass) {
+  const head = h("button", headClass);
+  head.type = "button";
+  head.setAttribute("aria-expanded", "false");
+  const iconEl = h("span", "ai-item-icon");
+  iconEl.setAttribute("aria-hidden", "true");
+  const main = h("span", "ai-item-main");
+  const titleEl = h("span", "ai-item-title");
+  const subEl = h("span", "ai-item-sub");
+  const statusEl = h("span", "ai-item-status");
+  statusEl.setAttribute("role", "img");
+  const metaEl = h("span", "ai-item-meta");
+  main.append(titleEl, subEl);
+  head.append(iconEl, main, statusEl, metaEl);
+  return { head, iconEl, titleEl, subEl, statusEl, metaEl };
+}
+function buildIo(label) {
+  const root = h("div", "ai-tool-io");
+  root.append(h("div", "ai-tool-io-label", label));
+  const pre = h("pre", "ai-tool-io-content");
+  const media = h("div", "ai-tool-io-media");
+  media.hidden = true;
+  root.append(pre, media);
+  return { root, pre, media };
+}
+function chartSpecOf(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const v = value;
+  if (v.type === "chart" && v.spec && typeof v.spec === "object") return v.spec;
+  const t = typeof v.type === "string" ? v.type : void 0;
+  const looksChart = Array.isArray(v.series) || Array.isArray(v.segments) || Array.isArray(v.points) || Array.isArray(v.dates) || Array.isArray(v.labels) && Array.isArray(v.values);
+  if (looksChart && (t === void 0 || typeof t === "string")) return v;
+  return null;
+}
+function setIo(io, value, allowChart = true) {
+  const chartSpec = allowChart ? chartSpecOf(value) : null;
+  if (chartSpec) {
+    io.pre.textContent = "";
+    io.pre.hidden = true;
+    io.media.replaceChildren();
+    const holder = document.createElement("div");
+    holder.className = "ai-tool-io-chart";
+    io.media.appendChild(holder);
+    renderChart(holder, chartSpec);
+    io.media.hidden = false;
+    io.root.hidden = false;
+    return;
+  }
+  const parts = Array.isArray(value) ? normalizeContentParts(value) : [];
+  if (parts.length > 0) {
+    io.pre.textContent = "";
+    io.pre.hidden = true;
+    io.media.replaceChildren();
+    for (const part of parts) {
+      const node = renderAiContentPart(part);
+      if (node) io.media.appendChild(node);
+    }
+    io.media.hidden = io.media.childElementCount === 0;
+    io.root.hidden = io.media.hidden;
+    return;
+  }
+  io.media.replaceChildren();
+  io.media.hidden = true;
+  const text = prettyValue(value).trim();
+  io.pre.textContent = text;
+  io.pre.hidden = false;
+  io.root.hidden = !text;
+}
+function defaultExpanded(m) {
+  if (m.kind === "chart" || m.status === "error" || m.status === "approval") return true;
+  if (Array.isArray(m.output)) {
+    const parts = normalizeContentParts(m.output);
+    if (parts.some((p) => p.type === "image" || p.type === "video" || p.type === "audio")) return true;
+  }
+  return false;
+}
+function buildApproval() {
+  const root = h("div", "ai-tool-approval");
+  const reason = h("div", "ai-tool-approval-reason");
+  reason.hidden = true;
+  const allow = h("button", "btn btn-sm btn-primary", "\u5141\u8BB8");
+  allow.type = "button";
+  allow.setAttribute("data-ai-approve", "");
+  const deny = h("button", "btn btn-sm", "\u62D2\u7EDD");
+  deny.type = "button";
+  deny.setAttribute("data-ai-reject", "");
+  root.append(reason, allow, deny);
+  return { root, reason };
+}
+function applyTint(item, model) {
+  const tint = getAiKind(model.kind).tint;
+  if (tint) item.style.setProperty("--ai-item-tint", `var(--token-${tint})`);
+  else item.style.removeProperty("--ai-item-tint");
+}
+function applyKindVisual(parts, model) {
+  const kind = getAiKind(model.kind);
+  parts.titleEl.textContent = kind.label || model.name;
+  parts.iconEl.replaceChildren();
+  const svg2 = svgIcon(kind.icon);
+  if (svg2) parts.iconEl.append(svg2);
+  const sub = summarizeInput(model);
+  parts.subEl.textContent = sub;
+  parts.subEl.hidden = !sub;
+}
+function applyStatusMeta(parts, status, meta) {
+  parts.statusEl.setAttribute("aria-label", aiStatusLabel(status));
+  parts.metaEl.textContent = meta;
+  parts.metaEl.hidden = !meta;
+}
+function renderAiToolCall(el2, model) {
+  if (typeof document === "undefined") {
+    return { el: el2, update: () => void 0 };
+  }
+  const item = el2;
+  let current = model;
+  item.className = `ai-tool ai-tool--${model.kind}`;
+  item.dataset.aiId = model.id;
+  item.dataset.aiKind = model.kind;
+  const parts = buildHead("ai-tool-head");
+  const body = h("div", "ai-tool-body");
+  body.hidden = true;
+  const inputIo = buildIo("\u8F93\u5165");
+  const outputIo = buildIo("\u8F93\u51FA");
+  const approval = buildApproval();
+  body.append(inputIo.root, outputIo.root, approval.root);
+  item.append(parts.head, body);
+  const setOpen = (open, fire = true) => {
+    parts.head.setAttribute("aria-expanded", String(open));
+    body.hidden = !open;
+    if (fire) {
+      item.dispatchEvent(
+        new CustomEvent("icen:ai-toggle", { detail: { el: item, open }, bubbles: true })
+      );
+    }
+  };
+  let prevStatus = null;
+  const apply = (m) => {
+    setStatusClass(item, m.status);
+    applyTint(item, m);
+    applyKindVisual(parts, m);
+    const meta = m.durationMs != null ? formatDuration(m.durationMs) : "";
+    applyStatusMeta(parts, m.status, meta);
+    setIo(inputIo, m.input, false);
+    setIo(outputIo, m.errorText ?? m.output);
+    const reason = m.approval?.reason ? compactValue(m.approval.reason, 300) : "";
+    approval.reason.textContent = reason;
+    approval.reason.hidden = !reason;
+    if (!item.dataset.aiUserToggled && defaultExpanded(m)) setOpen(true);
+    prevStatus = m.status;
+  };
+  apply(current);
+  return {
+    el: item,
+    update(patch) {
+      current = { ...current, ...patch };
+      apply(current);
+    }
+  };
+}
+function renderAiSubagent(el2, model) {
+  if (typeof document === "undefined") {
+    return { el: el2, update: () => void 0 };
+  }
+  const item = el2;
+  let current = model;
+  item.className = "ai-subagent";
+  item.dataset.aiId = model.id;
+  item.dataset.aiKind = model.kind;
+  const parts = buildHead("ai-subagent-head");
+  const body = h("div", "ai-subagent-body");
+  body.hidden = true;
+  const stream = h("div", "ai-subagent-stream");
+  const result = h("div", "ai-subagent-result");
+  result.hidden = true;
+  body.append(stream, result);
+  item.append(parts.head, body);
+  const setOpen = (open, fire = true) => {
+    parts.head.setAttribute("aria-expanded", String(open));
+    body.hidden = !open;
+    if (fire) {
+      item.dispatchEvent(
+        new CustomEvent("icen:ai-toggle", { detail: { el: item, open }, bubbles: true })
+      );
+    }
+  };
+  const activityHandles = /* @__PURE__ */ new Map();
+  const renderActivities = (activities) => {
+    const list = activities ?? [];
+    const seen = /* @__PURE__ */ new Set();
+    list.forEach((act, index) => {
+      seen.add(act.id);
+      const existing = activityHandles.get(act.id);
+      if (existing) {
+        existing.update(act);
+      } else {
+        const host = document.createElement("div");
+        const handle = act.kind === "subagent" ? renderAiSubagent(host, act) : renderAiToolCall(host, act);
+        handle.el.style.setProperty("--ai-activity-index", String(index));
+        activityHandles.set(act.id, handle);
+        stream.append(handle.el);
+      }
+    });
+    for (const [id, handle] of activityHandles) {
+      if (!seen.has(id)) {
+        handle.el.remove();
+        activityHandles.delete(id);
+      }
+    }
+  };
+  let prevStatus = null;
+  const apply = (m) => {
+    setStatusClass(item, m.status);
+    applyTint(item, m);
+    applyKindVisual(parts, m);
+    const steps = m.activities?.length ?? 0;
+    const meta = [m.durationMs != null ? formatDuration(m.durationMs) : "", steps > 0 ? `${steps} \u6B65` : ""].filter(Boolean).join(" \xB7 ");
+    applyStatusMeta(parts, m.status, meta);
+    renderActivities(m.activities);
+    const receipt = compactValue(m.output);
+    result.textContent = receipt;
+    result.hidden = !receipt;
+    if (!item.dataset.aiUserToggled && defaultExpanded(m)) setOpen(true);
+    prevStatus = m.status;
+  };
+  apply(current);
+  return {
+    el: item,
+    update(patch) {
+      current = { ...current, ...patch };
+      apply(current);
+    }
+  };
+}
+function setupItem(item, kind) {
+  const marked = item;
+  const flag = kind === "tool" ? "__icenAiToolInit" : "__icenAiSubagentInit";
+  if (marked[flag]) return;
+  marked[flag] = true;
+  const headClass = kind === "tool" ? ".ai-tool-head" : ".ai-subagent-head";
+  const bodyClass = kind === "tool" ? ".ai-tool-body" : ".ai-subagent-body";
+  const head = item.querySelector(`:scope > ${headClass}`);
+  const body = item.querySelector(`:scope > ${bodyClass}`);
+  const setOpen = (open, fire = true) => {
+    head?.setAttribute("aria-expanded", String(open));
+    if (body) body.hidden = !open;
+    if (fire) {
+      item.dispatchEvent(
+        new CustomEvent("icen:ai-toggle", { detail: { el: item, open }, bubbles: true })
+      );
+    }
+  };
+  item.addEventListener("click", (ev) => {
+    const target = ev.target;
+    if (!(target instanceof Element)) return;
+    const ownerOf = (node) => node.closest(".ai-tool, .ai-subagent");
+    const approveBtn = target.closest("[data-ai-approve]");
+    if (approveBtn && ownerOf(approveBtn) === item) {
+      item.dispatchEvent(
+        new CustomEvent("icen:ai-approve", {
+          detail: { id: item.dataset.aiId ?? "", kind: item.dataset.aiKind ?? "" },
+          bubbles: true
+        })
+      );
+      return;
+    }
+    const rejectBtn = target.closest("[data-ai-reject]");
+    if (rejectBtn && ownerOf(rejectBtn) === item) {
+      item.dispatchEvent(
+        new CustomEvent("icen:ai-reject", {
+          detail: { id: item.dataset.aiId ?? "", kind: item.dataset.aiKind ?? "" },
+          bubbles: true
+        })
+      );
+      return;
+    }
+    const headEl = target.closest(".ai-tool-head, .ai-subagent-head");
+    if (!headEl || ownerOf(headEl) !== item || !head) return;
+    item.dataset.aiUserToggled = "1";
+    setOpen(head.getAttribute("aria-expanded") !== "true");
+  });
+  if (body?.hidden) {
+    const kindName = item.dataset.aiKind ?? "";
+    const isErr = item.classList.contains("is-error");
+    const isApproval = item.classList.contains("is-approval");
+    if (isErr || isApproval || kindName === "chart") {
+      item.dataset.aiUserToggled = "";
+      setOpen(true, false);
+      delete item.dataset.aiUserToggled;
+    }
+  }
+}
+function initItems(root, selector, kind) {
+  if (typeof document === "undefined") return;
+  const scope = root ?? document;
+  const items = [];
+  if (scope instanceof Element && scope.matches(selector)) items.push(scope);
+  items.push(...Array.from(scope.querySelectorAll(selector)));
+  for (const item of items) setupItem(item, kind);
+}
+function initAiTool(root) {
+  initItems(root, ".ai-tool", "tool");
+}
+function initAiSubagent(root) {
+  initItems(root, ".ai-subagent", "subagent");
+}
+export {
+  initAiSubagent,
+  initAiTool,
+  renderAiSubagent,
+  renderAiToolCall
+};