@icen.ai/ui 0.8.0 → 0.9.0

package/dist/behaviors/kb-canvas.mjs

@@ -0,0 +1,589 @@
+// 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;
+}
+
+// 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));
+function relativeTime(input, now = /* @__PURE__ */ new Date()) {
+  const t = input instanceof Date ? input.getTime() : typeof input === "number" ? input : Date.parse(input);
+  if (!Number.isFinite(t)) return typeof input === "string" ? input : "\u2014";
+  const diff = now.getTime() - t;
+  const MIN = 6e4, HOUR = 36e5, DAY = 864e5;
+  if (diff < MIN) return "\u521A\u521A";
+  if (diff < HOUR) return `${Math.floor(diff / MIN)} \u5206\u949F\u524D`;
+  if (diff < DAY) return `${Math.floor(diff / HOUR)} \u5C0F\u65F6\u524D`;
+  if (diff < 30 * DAY) return `${Math.floor(diff / DAY)} \u5929\u524D`;
+  const d = new Date(t);
+  const ymd = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+  return ymd;
+}
+
+// src/behaviors/events.ts
+function onIcen(type, a, b, c) {
+  if (typeof document === "undefined") return () => {
+  };
+  const selector = typeof a === "string" ? a : null;
+  const handler = selector ? b : a;
+  const opts = selector ? c : b;
+  const within = opts?.within ?? document;
+  const once = opts?.once === true;
+  let off = () => {
+  };
+  const fn = (e) => {
+    const broadcast = !(e.target instanceof Element);
+    if (selector) {
+      if (broadcast) return;
+      const detail = e.detail;
+      const src = detail?.source instanceof Element ? detail.source : e.target;
+      if (!(src instanceof Element) || !src.closest(selector)) return;
+    }
+    handler(e);
+    if (once) off();
+  };
+  within.addEventListener(type, fn);
+  off = () => {
+    within.removeEventListener(type, fn);
+    opts?.signal?.removeEventListener("abort", off);
+  };
+  if (opts?.signal) {
+    if (opts.signal.aborted) {
+      off();
+      return () => {
+      };
+    }
+    opts.signal.addEventListener("abort", off, { once: true });
+  }
+  return off;
+}
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
+// src/behaviors/ai-diff.ts
+function renderLineRow(line) {
+  const tr = document.createElement("tr");
+  tr.className = `ai-diff-line--${line.type}`;
+  if (line.type === "hunk") {
+    const td = h("td", "", line.text);
+    td.colSpan = 3;
+    tr.appendChild(td);
+    return tr;
+  }
+  const oldTd = h("td", "ai-diff-ln", line.oldNo === null ? "" : String(line.oldNo));
+  oldTd.setAttribute("aria-hidden", "true");
+  const newTd = h("td", "ai-diff-ln", line.newNo === null ? "" : String(line.newNo));
+  newTd.setAttribute("aria-hidden", "true");
+  tr.appendChild(oldTd);
+  tr.appendChild(newTd);
+  tr.appendChild(h("td", "ai-diff-code", line.text));
+  return tr;
+}
+function renderFile(file) {
+  const root = h("div", `ai-diff-file is-${file.status}`);
+  root.dataset.path = file.path;
+  const head = h("div", "ai-diff-head");
+  head.setAttribute("role", "button");
+  head.tabIndex = 0;
+  head.setAttribute("aria-expanded", "false");
+  const pathText = file.status === "renamed" && file.oldPath ? `${file.oldPath} \u2192 ${file.path}` : file.path;
+  head.appendChild(h("span", "ai-diff-path", pathText));
+  const stat = h("span", "ai-diff-stat");
+  if (file.addCount > 0) stat.appendChild(h("b", "ai-diff-add", `+${file.addCount}`));
+  if (file.delCount > 0) stat.appendChild(h("b", "ai-diff-del", `\u2212${file.delCount}`));
+  if (stat.children.length > 0) head.appendChild(stat);
+  const actions = h("span", "ai-diff-actions");
+  actions.appendChild(h("button", "", "\u63A5\u53D7")).setAttribute("data-ai-diff-accept", "");
+  const rejectBtn = h("button", "", "\u62D2\u7EDD");
+  rejectBtn.setAttribute("data-ai-diff-reject", "");
+  actions.appendChild(rejectBtn);
+  head.appendChild(actions);
+  const verdict = h("span", "ai-diff-verdict");
+  verdict.hidden = true;
+  head.appendChild(verdict);
+  root.appendChild(head);
+  const body = h("div", "ai-diff-body");
+  body.hidden = true;
+  const table = h("table", "ai-diff-table");
+  if (file.hunks.length === 0) {
+    const tr = document.createElement("tr");
+    tr.className = "ai-diff-line--ctx";
+    const td = h("td", "", file.binary ? "\u4E8C\u8FDB\u5236\u6587\u4EF6\uFF0C\u65E0\u6CD5\u663E\u793A\u6587\u672C\u5DEE\u5F02" : "\u65E0\u5DEE\u5F02\u5185\u5BB9");
+    td.colSpan = 3;
+    tr.appendChild(td);
+    table.appendChild(tr);
+  } else {
+    for (const hunk of file.hunks) {
+      table.appendChild(renderLineRow({ type: "hunk", oldNo: null, newNo: null, text: hunk.header }));
+      for (const line of hunk.lines) table.appendChild(renderLineRow(line));
+    }
+  }
+  body.appendChild(table);
+  root.appendChild(body);
+  return root;
+}
+function renderAiDiff(el, model) {
+  if (typeof document === "undefined") return el;
+  el.textContent = "";
+  const root = h("div", "ai-diff");
+  const files = Array.isArray(model?.files) ? model.files : [];
+  for (const file of files) root.appendChild(renderFile(file));
+  el.appendChild(root);
+  return el;
+}
+
+// src/behaviors/kb-canvas.ts
+var DEFAULT_RATIO = 0.42;
+var SELBAR_HIDE_MS = 1500;
+function clampNum(v, fallback, min, max) {
+  const n = typeof v === "number" && Number.isFinite(v) ? v : fallback;
+  return Math.min(max, Math.max(min, n));
+}
+function mountContent(target, content) {
+  target.textContent = "";
+  if (content == null) return;
+  if (typeof content === "string") target.textContent = content;
+  else target.appendChild(content);
+}
+function createKbCanvas(el, opts = {}) {
+  const stub = {
+    setChat: () => void 0,
+    setDoc: () => void 0,
+    addDiff: () => void 0,
+    addVersion: () => void 0,
+    setSelectionTools: () => void 0,
+    destroy: () => void 0
+  };
+  if (typeof document === "undefined" || !el) return stub;
+  const canvasHost = el;
+  canvasHost.__icenKbCanvas?.destroy();
+  el.textContent = "";
+  const minR = clampNum(opts.minRatio, 0.2, 0.05, 0.5);
+  const maxR = 1 - minR;
+  let ratio = clampNum(DEFAULT_RATIO, DEFAULT_RATIO, minR, maxR);
+  el.classList.add("kb-canvas");
+  const main = h("div", "kb-canvas-main");
+  const chat = h("div", "kb-canvas-chat");
+  const divider = h("div", "kb-canvas-divider");
+  const doc = h("div", "kb-canvas-doc");
+  main.append(chat, divider, doc);
+  const versions = h("div", "kb-canvas-versions");
+  versions.hidden = true;
+  const selbar = h("div", "kb-canvas-selbar");
+  selbar.hidden = true;
+  el.append(main, versions, selbar);
+  const ac = new AbortController();
+  const { signal } = ac;
+  let destroyed = false;
+  let tools = [];
+  let selText = "";
+  divider.setAttribute("role", "separator");
+  divider.setAttribute("aria-orientation", "vertical");
+  divider.setAttribute("aria-label", "\u8C03\u6574\u753B\u5E03\u53CC\u680F\u6BD4\u4F8B");
+  divider.tabIndex = 0;
+  divider.title = "\u62D6\u62FD\u8C03\u6574\u6BD4\u4F8B\uFF08\u2190/\u2192 \u5FAE\u8C03\uFF0C\u53CC\u51FB\u590D\u4F4D\uFF09";
+  const applyRatio = (r) => {
+    ratio = Math.min(maxR, Math.max(minR, r));
+    el.style.setProperty("--kb-canvas-ratio", String(Math.round(ratio * 1e4) / 1e4));
+    divider.setAttribute("aria-valuemin", String(Math.round(minR * 1e3) / 10));
+    divider.setAttribute("aria-valuemax", String(Math.round(maxR * 1e3) / 10));
+    divider.setAttribute("aria-valuenow", String(Math.round(ratio * 1e3) / 10));
+  };
+  applyRatio(ratio);
+  let dragging = false;
+  let dragStartX = 0;
+  let dragStartRatio = ratio;
+  let dragWidth = 1;
+  let rafId = 0;
+  let pendingRatio = null;
+  const flushRatio = () => {
+    rafId = 0;
+    if (pendingRatio != null) {
+      applyRatio(pendingRatio);
+      pendingRatio = null;
+    }
+  };
+  const endDrag = (e) => {
+    if (!dragging) return;
+    dragging = false;
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+    if (pendingRatio != null) {
+      applyRatio(pendingRatio);
+      pendingRatio = null;
+    }
+    divider.classList.remove("is-active");
+    el.classList.remove("is-dragging");
+    try {
+      divider.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+  };
+  divider.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0) return;
+    dragging = true;
+    dragStartX = e.clientX;
+    dragStartRatio = ratio;
+    dragWidth = main.clientWidth || 1;
+    divider.setPointerCapture(e.pointerId);
+    divider.classList.add("is-active");
+    el.classList.add("is-dragging");
+    e.preventDefault();
+  });
+  divider.addEventListener(
+    "pointermove",
+    (e) => {
+      if (!dragging) return;
+      pendingRatio = dragStartRatio + (e.clientX - dragStartX) / dragWidth;
+      if (!rafId) rafId = requestAnimationFrame(flushRatio);
+    },
+    { passive: true, signal }
+  );
+  divider.addEventListener("pointerup", endDrag, { passive: true, signal });
+  divider.addEventListener("pointercancel", endDrag, { passive: true, signal });
+  divider.addEventListener(
+    "keydown",
+    (e) => {
+      let next = null;
+      if (e.key === "ArrowLeft") next = ratio - 0.02;
+      else if (e.key === "ArrowRight") next = ratio + 0.02;
+      else if (e.key === "Home") next = minR;
+      else if (e.key === "End") next = maxR;
+      if (next == null) return;
+      e.preventDefault();
+      applyRatio(next);
+    },
+    { signal }
+  );
+  divider.addEventListener("dblclick", () => applyRatio(DEFAULT_RATIO), { signal });
+  versions.addEventListener(
+    "click",
+    (e) => {
+      const t = e.target instanceof Element ? e.target : null;
+      const ver = t?.closest(".kb-canvas-ver");
+      if (!ver) return;
+      const versionId = ver.dataset.versionId ?? "";
+      if (!versionId) return;
+      emitIcen(ver, "icen:kb-canvas-version", { versionId });
+      opts.onVersion?.({ versionId });
+    },
+    { signal }
+  );
+  let hideTimer = null;
+  let selbarHovered = false;
+  const hideSelbar = () => {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+    selbarHovered = false;
+    selbar.hidden = true;
+  };
+  const armHide = () => {
+    if (hideTimer) clearTimeout(hideTimer);
+    hideTimer = selbarHovered ? null : setTimeout(() => {
+      hideTimer = null;
+      hideSelbar();
+    }, SELBAR_HIDE_MS);
+  };
+  const selectionWithinHost = () => {
+    const sel = window.getSelection();
+    if (!sel || sel.isCollapsed || sel.rangeCount === 0) return false;
+    const node = sel.anchorNode;
+    return node != null && el.contains(node);
+  };
+  const showSelbar = (text) => {
+    if (destroyed || !tools.length) return;
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) {
+      hideSelbar();
+      return;
+    }
+    const rect = sel.getRangeAt(0).getBoundingClientRect();
+    if (!rect || rect.width === 0 && rect.height === 0) {
+      hideSelbar();
+      return;
+    }
+    selText = text;
+    selbar.hidden = false;
+    const bw = selbar.offsetWidth || 0;
+    const bh = selbar.offsetHeight || 0;
+    const host = el.getBoundingClientRect();
+    let left = rect.left + rect.width / 2 - bw / 2 - host.left;
+    let top = rect.top - bh - 8 - host.top;
+    left = Math.max(4, Math.min(left, host.width - bw - 4));
+    if (top < 4) top = rect.bottom - host.top + 8;
+    selbar.style.left = `${Math.round(left)}px`;
+    selbar.style.top = `${Math.round(top)}px`;
+    armHide();
+  };
+  onIcen(
+    "icen:text-select",
+    (e) => {
+      if (destroyed) return;
+      const text = e.detail.text ?? "";
+      if (text.trim()) showSelbar(text);
+    },
+    { within: el, signal }
+  );
+  document.addEventListener(
+    "mouseup",
+    () => {
+      if (destroyed) return;
+      const sel = window.getSelection();
+      const text = sel?.toString() ?? "";
+      if (!sel || !text.trim() || !sel.anchorNode || !el.contains(sel.anchorNode)) return;
+      showSelbar(text);
+    },
+    { passive: true, signal }
+  );
+  document.addEventListener(
+    "selectionchange",
+    () => {
+      if (selbar.hidden) return;
+      if (!selectionWithinHost()) hideSelbar();
+    },
+    { passive: true, signal }
+  );
+  selbar.addEventListener("pointerenter", () => {
+    selbarHovered = true;
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+  });
+  selbar.addEventListener("pointerleave", () => {
+    selbarHovered = false;
+    armHide();
+  });
+  selbar.addEventListener("mousedown", (e) => e.preventDefault());
+  selbar.addEventListener(
+    "click",
+    (e) => {
+      const t = e.target instanceof Element ? e.target : null;
+      const btn = t?.closest(".kb-canvas-selbar-btn");
+      if (!btn) return;
+      const instruction = btn.dataset.instruction ?? "";
+      if (!instruction) return;
+      const detail = { instruction, selection: { text: selText } };
+      emitIcen(el, "icen:kb-canvas-ai", detail);
+      opts.onAI?.(detail);
+      hideSelbar();
+    },
+    { signal }
+  );
+  const rebuildSelbar = () => {
+    selbar.textContent = "";
+    for (const tool of tools) {
+      const btn = h("button", "kb-canvas-selbar-btn");
+      btn.type = "button";
+      btn.textContent = tool.label;
+      btn.dataset.instruction = tool.instruction;
+      selbar.appendChild(btn);
+    }
+    if (selbar.hidden) return;
+    if (!tools.length) hideSelbar();
+    else armHide();
+  };
+  const destroy = () => {
+    if (destroyed) return;
+    destroyed = true;
+    ac.abort();
+    if (hideTimer) clearTimeout(hideTimer);
+    if (rafId) cancelAnimationFrame(rafId);
+    hideTimer = null;
+    rafId = 0;
+    el.classList.remove("kb-canvas", "is-dragging");
+    el.style.removeProperty("--kb-canvas-ratio");
+    el.textContent = "";
+  };
+  const handle = {
+    setChat: (content) => {
+      if (!destroyed) mountContent(chat, content);
+    },
+    setDoc: (content) => {
+      if (!destroyed) mountContent(doc, content);
+    },
+    addDiff: (files) => {
+      if (destroyed) return;
+      const wrap = h("div", "kb-canvas-diff");
+      renderAiDiff(wrap, { files });
+      doc.appendChild(wrap);
+    },
+    addVersion: (v) => {
+      if (destroyed || !v || !v.id) return;
+      const ver = h("button", "kb-canvas-ver");
+      ver.type = "button";
+      ver.dataset.versionId = String(v.id);
+      if (v.current === true) {
+        for (const prev of Array.from(versions.querySelectorAll(".kb-canvas-ver.is-current"))) {
+          prev.classList.remove("is-current");
+        }
+        ver.classList.add("is-current");
+      }
+      const dot = h("i", "kb-canvas-ver-dot");
+      dot.setAttribute("aria-hidden", "true");
+      ver.appendChild(dot);
+      ver.appendChild(h("span", "kb-canvas-ver-label", v.label ?? String(v.id)));
+      ver.appendChild(h("span", "kb-canvas-ver-time kb-num", relativeTime(v.at)));
+      versions.appendChild(ver);
+      versions.hidden = false;
+    },
+    setSelectionTools: (list) => {
+      if (destroyed) return;
+      tools = Array.isArray(list) ? list.filter((t) => t && typeof t.label === "string" && typeof t.instruction === "string") : [];
+      rebuildSelbar();
+    },
+    destroy
+  };
+  canvasHost.__icenKbCanvas = handle;
+  return handle;
+}
+export {
+  createKbCanvas
+};

package/dist/behaviors/kb-chain.d.mts

@@ -0,0 +1,15 @@
+import { KbChainStep } from './kb-core.js';
+import './ai-core.js';
+
+/**
+ * 渲染工具链条横向摘要条（与 ai-tool-call 单卡互补的「一屏看完整个链」视角）。
+ * 幂等：重复调用只更新状态类与 detail，不重建 DOM（流式安全）；返回挂载元素 el。
+ */
+declare function renderKbChain(el: HTMLElement, steps: KbChainStep[]): HTMLElement;
+/**
+ * 委托初始化：点击可点步骤 → icen:kb-chain-step {index, step}（自 el 冒泡，onIcen 可收）。
+ * 幂等（重复调用安全）；返回销毁函数（移除监听并复位标记，可重新 init）。SSR 下 no-op。
+ */
+declare function initKbChain(root?: ParentNode): () => void;
+
+export { initKbChain, renderKbChain };