@icen.ai/ui 0.8.0 → 0.9.0

package/dist/behaviors/kb-answer.mjs

@@ -0,0 +1,2055 @@
+// src/behaviors/ai-core.ts
+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 kindRegistry = new Map(Object.entries(BUILTIN_KINDS));
+function h(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+function svgIcon(svg2) {
+  if (typeof document === "undefined" || typeof DOMParser === "undefined") return null;
+  let parsed;
+  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 = (el) => {
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name.toLowerCase();
+      if (name.startsWith("on")) el.removeAttribute(attr.name);
+      if ((name === "href" || name === "xlink:href") && attr.value.trim().toLowerCase().startsWith("javascript:")) {
+        el.removeAttribute(attr.name);
+      }
+    }
+    for (const child of Array.from(el.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/kb-core.ts
+var ic = (label, d) => ({ label, icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${d}</svg>` });
+var BUILTIN_SOURCE_TYPES = {
+  doc: ic("\u6587\u6863", '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>'),
+  web: ic("\u7F51\u9875", '<circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/>'),
+  wiki: ic("\u77E5\u8BC6\u5E93", '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>'),
+  sheet: ic("\u8868\u683C", '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/>'),
+  db: ic("\u6570\u636E\u5E93", '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5"/><path d="M3 12c0 1.7 4 3 9 3s9-1.3 9-3"/>'),
+  ticket: ic("\u5DE5\u5355", '<path d="M3 9V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 6v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-6z"/><path d="M13 5v14"/>'),
+  code: ic("\u4EE3\u7801", '<path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>'),
+  api: ic("\u63A5\u53E3", '<path d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4z"/>'),
+  image: ic("\u56FE\u7247", '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-4.6-4.6a2 2 0 0 0-2.8 0L3 21"/>'),
+  mail: ic("\u90AE\u4EF6", '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/>')
+};
+var sourceTypeRegistry = new Map(Object.entries(BUILTIN_SOURCE_TYPES));
+var CITE_RE = /\[(\d{1,3})\]/g;
+function parseInlineCitations(text) {
+  const out = [];
+  if (!text) return out;
+  let last = 0;
+  CITE_RE.lastIndex = 0;
+  let m;
+  while ((m = CITE_RE.exec(text)) !== null) {
+    if (m.index > last) out.push({ text: text.slice(last, m.index) });
+    out.push({ text: m[0], n: Number(m[1]) });
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) out.push({ text: text.slice(last) });
+  return out;
+}
+function normalizeQueryResult(raw) {
+  const columns = Array.isArray(raw.columns) ? raw.columns.map((c) => typeof c === "string" ? { name: c } : { name: String(c.name ?? ""), type: c.type }) : [];
+  return {
+    columns,
+    rows: Array.isArray(raw.rows) ? raw.rows.map((r) => Array.isArray(r) ? r.map((v) => typeof v === "number" || typeof v === "string" ? v : null) : []) : [],
+    totalRows: typeof raw.totalRows === "number" ? raw.totalRows : void 0,
+    truncated: raw.truncated === true,
+    limit: typeof raw.limit === "number" ? raw.limit : void 0,
+    rowCount: typeof raw.rowCount === "number" ? raw.rowCount : Array.isArray(raw.rows) ? raw.rows.length : 0,
+    durationMs: typeof raw.durationMs === "number" ? raw.durationMs : void 0,
+    exportFormats: Array.isArray(raw.exportFormats) ? raw.exportFormats.map(String) : void 0
+  };
+}
+function formatCount(n) {
+  if (n == null || !Number.isFinite(n)) return "\u2014";
+  if (Math.abs(n) >= 1e4) return `${(n / 1e3).toFixed(1)}k`;
+  return n.toLocaleString("en-US");
+}
+
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
+// src/behaviors/kb-clarify.ts
+var ICON_HELP = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 2.4-3 4"/><path d="M12 17.5h.01"/></svg>';
+function toClarification(raw) {
+  const r = raw ?? {};
+  const options = Array.isArray(r.options) ? r.options.filter((o) => !!o && typeof o === "object").map((o) => ({ label: String(o.label ?? ""), value: String(o.value ?? o.label ?? "") })).filter((o) => o.label) : [];
+  return {
+    id: typeof r.id === "string" && r.id ? r.id : void 0,
+    question: String(r.question ?? ""),
+    options,
+    reason: typeof r.reason === "string" && r.reason ? r.reason : void 0
+  };
+}
+function renderKbClarify(el, c, opts) {
+  if (typeof document === "undefined") return el;
+  const clar = toClarification(c);
+  el.textContent = "";
+  const root = h("div", "kb-clarify");
+  if (clar.id) root.dataset.clarifyId = clar.id;
+  const q = h("div", "kb-clarify-q");
+  const iconBox = h("span", "kb-clarify-qicon");
+  const svg2 = svgIcon(ICON_HELP);
+  if (svg2) iconBox.appendChild(svg2);
+  q.appendChild(iconBox);
+  q.appendChild(h("span", "kb-clarify-qtext", clar.question));
+  root.appendChild(q);
+  const optsWrap = h("div", "kb-clarify-opts");
+  const resolved = h("div", "kb-clarify-resolved");
+  resolved.hidden = true;
+  const pick = (btn) => {
+    if (root.classList.contains("is-answered")) return;
+    root.classList.add("is-answered");
+    btn.classList.add("is-picked");
+    Array.from(optsWrap.querySelectorAll(".kb-clarify-opt")).forEach((b) => {
+      if (b !== btn) b.disabled = true;
+    });
+    resolved.textContent = "";
+    resolved.appendChild(document.createTextNode("\u5DF2\u89E3\u6790\uFF1A"));
+    resolved.appendChild(h("b", "kb-clarify-picked", btn.dataset.label ?? ""));
+    resolved.hidden = false;
+    const answer = { id: clar.id, value: btn.dataset.value ?? "", label: btn.dataset.label ?? "" };
+    emitIcen(btn, "icen:kb-clarify-answer", answer);
+    opts?.onAnswer?.(answer);
+  };
+  for (const o of clar.options) {
+    const btn = h("button", "kb-clarify-opt", o.label);
+    btn.type = "button";
+    btn.dataset.value = o.value;
+    btn.dataset.label = o.label;
+    btn.addEventListener("click", () => pick(btn));
+    optsWrap.appendChild(btn);
+  }
+  if (optsWrap.children.length > 0) root.appendChild(optsWrap);
+  root.appendChild(resolved);
+  if (clar.reason) root.appendChild(h("div", "kb-clarify-reason", clar.reason));
+  el.appendChild(root);
+  return el;
+}
+
+// src/behaviors/kb-explain.ts
+function toExplainFact(raw) {
+  const r = raw ?? {};
+  const list = (v) => {
+    if (!Array.isArray(v)) return void 0;
+    const out = v.map((s) => String(s ?? "").trim()).filter(Boolean);
+    return out.length ? out : void 0;
+  };
+  const metrics = Array.isArray(r.metrics) ? r.metrics.filter((m) => !!m && typeof m === "object").map((m) => ({
+    name: String(m.name ?? ""),
+    ref: typeof m.ref === "string" && m.ref ? m.ref : void 0
+  })).filter((m) => m.name) : void 0;
+  return {
+    tables: list(r.tables),
+    columns: list(r.columns),
+    filters: list(r.filters),
+    aggregates: list(r.aggregates),
+    metrics: metrics?.length ? metrics : void 0
+  };
+}
+function renderGroup(label, items) {
+  if (!items?.length) return null;
+  const group = h("div", "kb-explain-group");
+  group.appendChild(h("span", "kb-explain-group-label", label));
+  for (const item of items) group.appendChild(h("span", "kb-chip", item));
+  return group;
+}
+function renderKbExplain(el, fact) {
+  if (typeof document === "undefined") return el;
+  const f = toExplainFact(fact);
+  el.textContent = "";
+  const root = h("div", "kb-explain");
+  root.dataset.kbExplain = "";
+  const count = (f.tables?.length ?? 0) + (f.columns?.length ?? 0) + (f.filters?.length ?? 0) + (f.aggregates?.length ?? 0) + (f.metrics?.length ?? 0);
+  const head = h("button", "kb-fold-head kb-explain-head");
+  head.type = "button";
+  head.setAttribute("aria-expanded", "false");
+  head.appendChild(h("span", "kb-fold-caret", "\u25B8"));
+  head.appendChild(h("span", "kb-explain-title", "\u8FD9\u4E2A\u6570\u5B57\u662F\u600E\u4E48\u7B97\u51FA\u6765\u7684"));
+  if (count > 0) {
+    const countBox = h("span", "kb-num kb-explain-count", String(count));
+    countBox.classList.add("kb-fold-count");
+    head.appendChild(countBox);
+  }
+  root.appendChild(head);
+  const body = h("div", "kb-explain-body");
+  body.hidden = true;
+  const groups = [
+    renderGroup("\u8868", f.tables),
+    renderGroup("\u5217", f.columns),
+    renderGroup("\u7B5B\u9009", f.filters),
+    renderGroup("\u805A\u5408", f.aggregates)
+  ];
+  for (const g of groups) if (g) body.appendChild(g);
+  if (f.metrics?.length) {
+    const metrics = h("div", "kb-explain-metrics");
+    for (const m of f.metrics) {
+      const row = h("div", "kb-explain-metric");
+      row.appendChild(h("span", "kb-explain-metric-name", m.name));
+      if (m.ref) {
+        if (!/^\s*(javascript|data|vbscript)\s*:/i.test(m.ref)) {
+          const a = h("a", "kb-explain-metric-ref", "\u67E5\u770B\u53E3\u5F84");
+          a.href = m.ref;
+          a.rel = "noopener";
+          row.appendChild(a);
+        }
+      }
+      metrics.appendChild(row);
+    }
+    body.appendChild(metrics);
+  }
+  if (body.children.length === 0) {
+    body.appendChild(h("div", "kb-empty", "\u6682\u65E0\u53E3\u5F84\u4FE1\u606F"));
+  }
+  root.appendChild(body);
+  head.addEventListener("click", () => {
+    const open = body.hidden;
+    body.hidden = !open;
+    head.setAttribute("aria-expanded", String(open));
+    emitIcen(head, "icen:kb-explain-toggle", { el: root, open });
+  });
+  el.appendChild(root);
+  return el;
+}
+
+// src/behaviors/charts.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var REGISTERED_TONES = /* @__PURE__ */ new Map();
+function toneVar(tone = "accent") {
+  const registered = REGISTERED_TONES.get(tone);
+  if (registered) return registered;
+  switch (tone) {
+    case "success":
+      return "var(--token-success)";
+    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(svg2) {
+  try {
+    const doc = new DOMParser().parseFromString(svg2, "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();
+    emitIcen(el, "icen:chart-legend-visibility", { visible: hidden ? false : true });
+  });
+  syncEye();
+  head.append(title, eye);
+  el.append(head, body);
+  paint(body);
+}
+function toggleLegend(items, scope) {
+  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);
+      });
+      emitIcen(legend, "icen:chart-legend-toggle", { 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 el;
+  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 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));
+  });
+  attachChartInteraction(el, "vbar");
+  return el;
+}
+function renderHBar(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, false, (body) => {
+    const n = Math.min(opts.labels.length, opts.values.length);
+    if (n === 0) {
+      renderEmpty(body, opts.emptyLabel);
+      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);
+  });
+  attachChartInteraction(el, "hbar");
+  return el;
+}
+function renderStack(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, opts.segments.length > 0, (body) => {
+    const total = opts.segments.reduce((sum2, s) => sum2 + s.value, 0);
+    if (opts.segments.length === 0 || total <= 0) {
+      renderEmpty(body, opts.emptyLabel);
+      return;
+    }
+    const bar = document.createElement("div");
+    bar.className = "chart-stack";
+    for (const [segIndex, seg] of opts.segments.entries()) {
+      const s = document.createElement("div");
+      s.className = "chart-stack-seg";
+      s.style.width = `${seg.value / total * 100}%`;
+      if (seg.tone) s.style.setProperty("--chart-tone", toneVar(seg.tone));
+      s.setAttribute("title", `${seg.label}: ${fmt(opts, seg.value)}`);
+      setMarkData(s, { index: segIndex, 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);
+  });
+  attachChartInteraction(el, "stack");
+  return el;
+}
+function renderDonut(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, opts.segments.length > 0, (body) => {
+    const total = opts.segments.reduce((sum2, s) => sum2 + s.value, 0);
+    if (opts.segments.length === 0 || total <= 0) {
+      renderEmpty(body, opts.emptyLabel);
+      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);
+  });
+  attachChartInteraction(el, "donut");
+  return el;
+}
+var lineGradientSeq = 0;
+function renderLine(el, opts) {
+  if (typeof document === "undefined") return el;
+  const seriesList = normalizeSeriesInput(opts);
+  const labels = opts.labels ?? [];
+  const n = Math.min(labels.length, ...seriesList.map((s) => s.values.length));
+  withChrome(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 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));
+  });
+  attachChartInteraction(el, "line");
+  return el;
+}
+function renderRadar(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, opts.series.length > 1, (body) => {
+    const axes = opts.axes;
+    const n = axes.length;
+    if (n < 3 || opts.series.length === 0) {
+      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 });
+    });
+    const legend = opts.series.length > 1 ? toggleLegend(legendItems, wrap) : null;
+    wrap.append(svg2, ...legend ? [legend] : []);
+    body.appendChild(wrap);
+  });
+  attachChartInteraction(el, "radar");
+  return el;
+}
+function niceCeil(v) {
+  if (v <= 0) return 1;
+  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 weekdayLabelAt(defaults, day) {
+  return defaults[(day + 6) % 7] ?? "";
+}
+function levelOf(v, max) {
+  return v <= 0 ? 0 : Math.min(4, Math.ceil(v / max * 4));
+}
+function padFirstWeek(grid, firstDate, weekStart) {
+  const first = /* @__PURE__ */ new Date(`${firstDate}T00:00:00`);
+  const pad = (first.getDay() + 7 - weekStart) % 7;
+  for (let i = 0; i < pad; i++) {
+    const blank = document.createElement("span");
+    blank.className = "chart-heatmap-cell is-blank";
+    grid.appendChild(blank);
+  }
+  return pad;
+}
+function heatmapLegend(labels) {
+  const legend = document.createElement("div");
+  legend.className = "chart-heatmap-legend";
+  const less = document.createElement("span");
+  less.textContent = labels?.less ?? "\u5C11";
+  const more = document.createElement("span");
+  more.textContent = labels?.more ?? "\u591A";
+  legend.appendChild(less);
+  for (let lv = 0; lv <= 4; lv++) {
+    const cell = document.createElement("span");
+    cell.className = "chart-heatmap-cell";
+    cell.dataset.level = String(lv);
+    legend.appendChild(cell);
+  }
+  legend.appendChild(more);
+  return legend;
+}
+function renderHeatmap(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, true, (body) => {
+    let entries;
+    if (opts.data && opts.data.length > 0) {
+      entries = opts.data;
+    } 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 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");
+    padFirstWeek(grid, entries[0].date, opts.weekStart === 0 ? 0 : 1);
+    for (const [i, entry] of entries.entries()) {
+      const cell = document.createElement("span");
+      cell.className = "chart-heatmap-cell";
+      cell.dataset.level = String(levelOf(entry.value, max));
+      cell.setAttribute("title", `${entry.date}\uFF1A${fmt(opts, entry.value)}`);
+      setMarkData(cell, { index: i, label: entry.date, value: entry.value });
+      grid.appendChild(cell);
+    }
+    wrap.append(grid, heatmapLegend(opts.labels));
+    body.appendChild(wrap);
+  });
+  attachChartInteraction(el, "heatmap");
+  return el;
+}
+function renderSparkline(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, false, (body) => {
+    const values = opts.values;
+    if (values.length === 0) {
+      renderEmpty(body, opts.emptyLabel);
+      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);
+  });
+  attachChartInteraction(el, "sparkline");
+  return el;
+}
+function renderGauge(el, opts) {
+  if (typeof document === "undefined") return el;
+  el.textContent = "";
+  const max = opts.max ?? 100;
+  const ratio = max > 0 ? Math.min(1, Math.max(0, opts.value / max)) : 0;
+  const radius = 42;
+  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);
+  el.appendChild(wrap);
+  attachChartInteraction(el, "gauge");
+  return el;
+}
+function renderCalendar(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, true, (body) => {
+    let entries;
+    if (opts.data && opts.data.length > 0) {
+      entries = opts.data;
+    } 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 weekStart = opts.weekStart === 0 ? 0 : 1;
+    const weekdayDefaults = ["\u4E00", "", "\u4E09", "", "\u4E94", "", "\u65E5"];
+    const weekdayLabels = opts.labels?.weekdays ?? weekdayDefaults.map((_, i) => weekdayLabelAt(weekdayDefaults, (weekStart + i) % 7));
+    const monthLabel = (m) => opts.labels?.months?.[m] ?? `${m + 1}\u6708`;
+    const grid = document.createElement("div");
+    grid.className = "chart-heatmap-grid";
+    grid.setAttribute("role", "img");
+    const months = document.createElement("div");
+    months.className = "chart-calendar-months";
+    const weekdayRow = document.createElement("div");
+    weekdayRow.className = "chart-calendar-weekdays";
+    weekdayLabels.forEach((w) => {
+      const s = document.createElement("span");
+      s.textContent = w;
+      weekdayRow.appendChild(s);
+    });
+    const max = maxOf(entries.map((e) => e.value));
+    const pad = padFirstWeek(grid, entries[0].date, weekStart);
+    let lastMonth = -1;
+    entries.forEach((entry, i) => {
+      const d = /* @__PURE__ */ new Date(`${entry.date}T00:00:00`);
+      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 = monthLabel(d.getMonth());
+        label.style.setProperty("--col", String(col));
+        months.appendChild(label);
+      }
+      const cell = document.createElement("span");
+      cell.className = "chart-heatmap-cell";
+      cell.dataset.level = String(levelOf(entry.value, max));
+      cell.setAttribute("title", `${entry.date}\uFF1A${fmt(opts, entry.value)}`);
+      setMarkData(cell, { index: i, label: entry.date, value: entry.value });
+      grid.appendChild(cell);
+    });
+    const legend = heatmapLegend(opts.labels);
+    const columns = Math.max(1, Math.ceil((pad + entries.length) / 7));
+    months.style.setProperty("--columns", String(columns));
+    wrap.append(months, weekdayRow, grid, legend);
+    body.appendChild(wrap);
+  });
+  attachChartInteraction(el, "calendar");
+  return el;
+}
+function renderScatter(el, opts) {
+  if (typeof document === "undefined") return el;
+  withChrome(el, opts, false, (body) => {
+    const pts = opts.points.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y));
+    if (pts.length === 0) {
+      renderEmpty(body, opts.emptyLabel);
+      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 = fmt(opts, 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 = fmt(opts, 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}`}: (${fmt(opts, p.x)}, ${fmt(opts, p.y)}${p.size != null ? `, size ${fmt(opts, p.size)}` : ""})`;
+      c.appendChild(title);
+      setMarkData(c, { index: i, label: p.label ?? `#${i + 1}`, value: p.y });
+      c.dataset.chartX = String(p.x);
+      svg2.appendChild(c);
+    });
+    wrap.appendChild(svg2);
+    body.appendChild(wrap);
+  });
+  attachChartInteraction(el, "scatter");
+  return el;
+}
+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(src)) src = { data: src };
+    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;
+}
+var TEMPORAL_HIT_RATIO = 0.6;
+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 >= TEMPORAL_HIT_RATIO;
+}
+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
+  };
+  emitIcen(root, `icen:chart-${type}`, detail);
+}
+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 applyTooltipSizing(host) {
+  const tip = chartTooltip();
+  const raw = host?.closest(".chart, [data-chart-root]")?.getAttribute("data-panel-max") ?? null;
+  const n = raw != null ? Number(raw) : NaN;
+  tip.style.maxWidth = Number.isFinite(n) && n > 0 ? `${n}px` : "";
+}
+function tooltipText(mark) {
+  const label = mark.getAttribute("data-chart-label") ?? "";
+  const series = mark.getAttribute("data-chart-series-name");
+  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`;
+}
+var chartDelegateMeta = /* @__PURE__ */ new WeakMap();
+var chartDelegateUnbind = /* @__PURE__ */ new WeakMap();
+function bindChartEvents(root) {
+  const noop = () => void 0;
+  if (typeof document === "undefined") return noop;
+  const attached = root;
+  if (attached.__icenChartBound) {
+    const prev = chartDelegateUnbind.get(root);
+    if (prev) return prev;
+  }
+  for (let p = root.parentElement; p; p = p.parentElement) {
+    if (p.__icenChartBound) return noop;
+  }
+  const typeNow = () => chartDelegateMeta.get(root)?.type() ?? "vbar";
+  const tipEnabled = () => chartDelegateMeta.get(root)?.tooltip() ?? true;
+  const markOf = (e) => {
+    const t = e.target;
+    return t instanceof Element ? t.closest("[data-chart-mark]") : null;
+  };
+  let hoverMark = null;
+  const enterMark = (mark, x, y) => {
+    hoverMark = mark;
+    mark.classList.add("is-hover");
+    dispatchChartEvent(root, "hover", mark, typeNow(), "enter", { x, y });
+    if (tipEnabled()) {
+      const tip = chartTooltip();
+      tip.textContent = tooltipText(mark);
+      applyTooltipSizing(mark);
+      tip.hidden = false;
+      moveTooltip(x, y);
+    }
+  };
+  const leaveMark = (pointer) => {
+    if (!hoverMark) return;
+    hoverMark.classList.remove("is-hover");
+    dispatchChartEvent(root, "hover", hoverMark, typeNow(), "leave", pointer);
+    hoverMark = null;
+    chartTooltip().hidden = true;
+  };
+  const bindings = [];
+  const on = (type, fn) => {
+    const listener = (evt) => fn(evt);
+    root.addEventListener(type, listener);
+    bindings.push([type, listener]);
+  };
+  on("pointerover", (e) => {
+    const mark = markOf(e);
+    if (!mark || mark === hoverMark) return;
+    leaveMark({ x: e.clientX, y: e.clientY });
+    enterMark(mark, e.clientX, e.clientY);
+  });
+  on("pointermove", (e) => {
+    if (hoverMark && tipEnabled()) {
+      dispatchChartEvent(root, "hover", hoverMark, typeNow(), "move", { x: e.clientX, y: e.clientY });
+      moveTooltip(e.clientX, e.clientY);
+    }
+  });
+  on("pointerout", (e) => {
+    const mark = markOf(e);
+    if (mark && mark === hoverMark) leaveMark({ x: e.clientX, y: e.clientY });
+  });
+  on("pointerleave", () => leaveMark());
+  on("click", (e) => {
+    const mark = markOf(e);
+    if (mark) dispatchChartEvent(root, "click", mark, typeNow(), void 0, { x: e.clientX, y: e.clientY });
+  });
+  on("dblclick", (e) => {
+    const mark = markOf(e);
+    if (mark) dispatchChartEvent(root, "dblclick", mark, typeNow(), void 0, { x: e.clientX, y: e.clientY });
+  });
+  on("contextmenu", (e) => {
+    const mark = markOf(e);
+    if (!mark) return;
+    e.preventDefault();
+    dispatchChartEvent(root, "contextmenu", mark, typeNow(), void 0, { x: e.clientX, y: e.clientY });
+  });
+  const unbind = () => {
+    for (const [type, listener] of bindings) root.removeEventListener(type, listener);
+    bindings.length = 0;
+    attached.__icenChartBound = false;
+    chartDelegateUnbind.delete(root);
+    if (hoverMark) {
+      hoverMark.classList.remove("is-hover");
+      hoverMark = null;
+    }
+    chartTooltip().hidden = true;
+  };
+  attached.__icenChartBound = true;
+  chartDelegateUnbind.set(root, unbind);
+  return unbind;
+}
+function attachChartInteraction(el, type) {
+  chartDelegateMeta.set(el, { type: () => type, tooltip: () => true });
+  bindChartEvents(el);
+}
+function hasLegendOf(spec) {
+  switch (spec.type) {
+    case "donut":
+    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;
+  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, weekStart: spec.i18n?.weekStart, labels: spec.i18n });
+          break;
+        case "calendar":
+          renderCalendar(body, { dates: spec.dates, values: spec.values, data: spec.data, tone: spec.tone, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend, weekStart: spec.i18n?.weekStart, labels: spec.i18n });
+          break;
+        case "sparkline":
+          renderSparkline(body, { labels: spec.labels ?? [], values: spec.values ?? [], tone: spec.tone, formatValue, emptyLabel: spec.emptyLabel, title: spec.title, legend: spec.legend });
+          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);
+      }
+    });
+  };
+  chartDelegateMeta.set(root, { type: typeOf, tooltip: () => current.tooltip !== false });
+  const unbindEvents = bindChartEvents(root);
+  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 = "";
+      unbindEvents();
+      chartTooltip().hidden = true;
+    }
+  };
+}
+var GRAPH_W = 360;
+var GRAPH_H = 260;
+var GRAPH_PAD = 28;
+var GRAPH_LW = GRAPH_W - GRAPH_PAD * 2;
+var GRAPH_LH = GRAPH_H - GRAPH_PAD * 2;
+
+// src/behaviors/kb-answer.ts
+var ASSET_TYPE_LABELS = {
+  "parameterized-query": "\u53C2\u6570\u5316\u67E5\u8BE2",
+  function: "\u51FD\u6570",
+  curated: "\u4EBA\u5DE5\u7B56\u5C55"
+};
+var ICON_TRUSTED = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.7 9a.6.6 0 0 1-.6 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.2-2.7a1.2 1.2 0 0 1 1.6 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>';
+var ICON_SHIELD = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.7 9a.6.6 0 0 1-.6 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.2-2.7a1.2 1.2 0 0 1 1.6 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z"/></svg>';
+function renderVerifiedBadge(via, opts) {
+  const btn = h("button", "kb-verified");
+  btn.type = "button";
+  if (via.assetId) btn.dataset.assetId = via.assetId;
+  const badge = h("span", "kb-badge kb-badge--trusted");
+  const svg2 = svgIcon(ICON_TRUSTED);
+  if (svg2) badge.appendChild(svg2);
+  badge.appendChild(document.createTextNode("\u8BA4\u8BC1\u7B54\u6848"));
+  btn.appendChild(badge);
+  btn.appendChild(h("span", "kb-verified-via", `\u547D\u4E2D\u8D44\u4EA7\uFF1A${ASSET_TYPE_LABELS[via.assetType] ?? via.assetType}`));
+  if (via.note) btn.appendChild(h("span", "kb-verified-note", via.note));
+  btn.appendChild(h("span", "kb-verified-hint", "\u53C2\u6570\u53EF\u6539\u91CD\u8DD1"));
+  btn.addEventListener("click", () => {
+    emitIcen(btn, "icen:kb-verified-open", { assetId: via.assetId });
+    opts?.onVerifiedOpen?.(via.assetId);
+  });
+  return btn;
+}
+function renderPermissionNotice(p) {
+  const box = h("div", "kb-perm");
+  const iconBox = h("span", "kb-perm-icon");
+  const svg2 = svgIcon(ICON_SHIELD);
+  if (svg2) iconBox.appendChild(svg2);
+  box.appendChild(iconBox);
+  box.appendChild(h("span", "kb-perm-text", p.rowLevelPolicy ? `\u5DF2\u6309\u4F60\u7684\u6570\u636E\u6743\u9650\u8FC7\u6EE4\uFF1A${p.rowLevelPolicy}` : "\u5DF2\u6309\u4F60\u7684\u6570\u636E\u6743\u9650\u8FC7\u6EE4"));
+  if (p.maskedColumns?.length) {
+    const mask = h("span", "kb-perm-mask");
+    mask.appendChild(h("span", "kb-perm-mask-label", "\u5DF2\u8131\u654F\u5217\uFF1A"));
+    for (const col of p.maskedColumns) mask.appendChild(h("span", "kb-chip", col));
+    box.appendChild(mask);
+  }
+  return box;
+}
+function renderBody(text, citations) {
+  const box = h("div", "kb-answer-body");
+  for (const seg of parseInlineCitations(text)) {
+    if (typeof seg.n === "number" && citations && seg.n >= 1 && seg.n <= citations.length) {
+      const sup = h("sup", "kb-citation", `[${seg.n}]`);
+      sup.dataset.cite = String(seg.n);
+      const c = citations[seg.n - 1];
+      if (c?.title) sup.title = c.title;
+      box.appendChild(sup);
+    } else {
+      box.appendChild(document.createTextNode(seg.text));
+    }
+  }
+  return box;
+}
+var NUMERIC_TYPES = /* @__PURE__ */ new Set([
+  "number",
+  "int",
+  "integer",
+  "float",
+  "double",
+  "decimal",
+  "numeric",
+  "bigint",
+  "smallint",
+  "real"
+]);
+function isNumericColumn(col, colIndex, rows) {
+  if (col.type) return NUMERIC_TYPES.has(col.type.toLowerCase());
+  for (const row of rows) {
+    const v = row[colIndex];
+    if (v == null) continue;
+    return typeof v === "number";
+  }
+  return false;
+}
+function renderResult(result, opts) {
+  if (!result.columns.length) return null;
+  const wrap = h("div", "kb-answer-results");
+  const meta = h("div", "kb-result-meta");
+  meta.appendChild(h("span", "kb-num", `${formatCount(result.rowCount)} \u884C`));
+  if (result.durationMs != null) {
+    meta.appendChild(h("span", "kb-num kb-result-dur", `${Math.round(result.durationMs)} ms`));
+  }
+  if (result.exportFormats?.length) {
+    const exports = h("span", "kb-result-export");
+    for (const fmt2 of result.exportFormats) {
+      const btn = h("button", "kb-result-export-btn", `\u5BFC\u51FA ${fmt2}`);
+      btn.type = "button";
+      btn.dataset.format = fmt2;
+      if (!opts?.onExport) btn.disabled = true;
+      else btn.addEventListener("click", () => opts.onExport?.(fmt2));
+      exports.appendChild(btn);
+    }
+    meta.appendChild(exports);
+  }
+  wrap.appendChild(meta);
+  const scroll = h("div", "kb-result-scroll");
+  const table = h("table", "kb-result-table");
+  const numCols = result.columns.map((c, i) => isNumericColumn(c, i, result.rows));
+  const thead = document.createElement("thead");
+  const headRow = document.createElement("tr");
+  result.columns.forEach((c, i) => {
+    headRow.appendChild(h("th", numCols[i] ? "kb-num" : "", c.name));
+  });
+  thead.appendChild(headRow);
+  table.appendChild(thead);
+  const tbody = document.createElement("tbody");
+  for (const row of result.rows) {
+    const tr = document.createElement("tr");
+    result.columns.forEach((_, i) => {
+      const v = row[i];
+      if (v == null) {
+        const td = h("td", "kb-result-null", "\u2014");
+        tr.appendChild(td);
+      } else {
+        tr.appendChild(h("td", typeof v === "number" ? "kb-num" : "", String(v)));
+      }
+    });
+    tbody.appendChild(tr);
+  }
+  table.appendChild(tbody);
+  scroll.appendChild(table);
+  wrap.appendChild(scroll);
+  if (result.truncated) {
+    const total = result.totalRows != null ? formatCount(result.totalRows) : "\u2014";
+    const limitPart = result.limit != null ? `\uFF08LIMIT ${formatCount(result.limit)}\uFF09` : "";
+    wrap.appendChild(h("div", "kb-notice kb-result-truncated", `\u5DF2\u622A\u65AD\uFF1A\u663E\u793A ${formatCount(result.rowCount)}/${total} \u884C${limitPart}`));
+  }
+  return wrap;
+}
+var CHART_SWITCHES = [
+  { type: "line", label: "\u6298\u7EBF" },
+  { type: "vbar", label: "\u67F1\u72B6" },
+  { type: "donut", label: "\u997C\u56FE" }
+];
+function switchable(spec) {
+  const hasCat = (spec.labels?.length ?? 0) > 0 && ((spec.values?.length ?? 0) > 0 || (spec.series?.length ?? 0) > 0);
+  return hasCat || (spec.segments?.length ?? 0) > 0;
+}
+function specAsType(base, target) {
+  if (target === "donut") {
+    if (base.segments?.length) return { ...base, type: "donut" };
+    const labels = base.labels ?? [];
+    const values = base.values ?? [];
+    return {
+      ...base,
+      type: "donut",
+      segments: labels.map((label, i) => ({ label, value: values[i] ?? 0 }))
+    };
+  }
+  if ((!base.labels?.length || !(base.values?.length || base.series?.length)) && base.segments?.length) {
+    return {
+      ...base,
+      type: target,
+      labels: base.segments.map((s) => s.label),
+      values: base.segments.map((s) => s.value),
+      segments: void 0
+    };
+  }
+  return { ...base, type: target };
+}
+function renderChartArea(raw) {
+  if (raw == null) return null;
+  const norm = normalizeChartSpec(raw);
+  const area = h("div", "kb-answer-chart");
+  const mount = h("div", "chart kb-chart-mount");
+  const handle = renderChart(mount, norm);
+  if (switchable(handle.spec)) {
+    const switchRow = h("div", "kb-chart-switch");
+    const chips = /* @__PURE__ */ new Map();
+    for (const s of CHART_SWITCHES) {
+      const chip = h("button", "kb-chart-chip", s.label);
+      chip.type = "button";
+      chip.dataset.chartType = s.type;
+      if (handle.spec.type === s.type) chip.classList.add("is-active");
+      chip.addEventListener("click", () => {
+        if (chip.classList.contains("is-active")) return;
+        chips.forEach((c) => c.classList.remove("is-active"));
+        chip.classList.add("is-active");
+        handle.update(specAsType(handle.spec, s.type));
+      });
+      chips.set(s.type, chip);
+      switchRow.appendChild(chip);
+    }
+    area.appendChild(switchRow);
+  }
+  area.appendChild(mount);
+  return area;
+}
+function renderKbAnswer(el, model, opts) {
+  if (typeof document === "undefined") return el;
+  const m = model ?? {};
+  el.textContent = "";
+  const root = h("article", "kb-answer");
+  root.dataset.kind = m.kind === "verified" ? "verified" : "generated";
+  const badges = h("div", "kb-answer-badges");
+  if (m.kind === "verified" && m.verifiedVia) badges.appendChild(renderVerifiedBadge(m.verifiedVia, opts));
+  if (m.permissionNotice && (m.permissionNotice.rowLevelPolicy || m.permissionNotice.maskedColumns?.length)) {
+    badges.appendChild(renderPermissionNotice(m.permissionNotice));
+  }
+  if (badges.children.length > 0) root.appendChild(badges);
+  if (typeof m.body === "string" && m.body) root.appendChild(renderBody(m.body, m.citations));
+  if (m.clarify && (m.clarify.question || m.clarify.options?.length)) {
+    const slot = h("div", "kb-answer-clarify");
+    renderKbClarify(slot, m.clarify);
+    root.appendChild(slot);
+  }
+  if (m.explain) {
+    const f = m.explain;
+    const hasAny = f.tables?.length || f.columns?.length || f.filters?.length || f.aggregates?.length || f.metrics?.length;
+    if (hasAny) {
+      const slot = h("div", "kb-answer-explain");
+      renderKbExplain(slot, f);
+      root.appendChild(slot);
+    }
+  }
+  if (m.result) {
+    const resultBox = renderResult(normalizeQueryResult(m.result), opts);
+    if (resultBox) root.appendChild(resultBox);
+  }
+  const chartArea = renderChartArea(m.chartSpec);
+  if (chartArea) root.appendChild(chartArea);
+  const followUps = (m.followUps ?? []).map((s) => String(s ?? "").trim()).filter(Boolean);
+  if (followUps.length > 0) {
+    const row = h("div", "kb-answer-followups");
+    row.appendChild(h("span", "kb-followups-label", "\u8FFD\u95EE\u5EFA\u8BAE"));
+    for (const text of followUps) {
+      const chip = h("button", "kb-chip kb-followup", text);
+      chip.type = "button";
+      chip.addEventListener("click", () => opts?.onFollowUp?.(text));
+      row.appendChild(chip);
+    }
+    root.appendChild(row);
+  }
+  el.appendChild(root);
+  return el;
+}
+export {
+  renderKbAnswer
+};