@icen.ai/ui 0.8.0 → 0.9.0

package/dist/behaviors/kb-segment.mjs

@@ -0,0 +1,499 @@
+// 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(svg3) {
+  if (typeof document === "undefined" || typeof DOMParser === "undefined") return null;
+  let parsed;
+  try {
+    parsed = new DOMParser().parseFromString(svg3, "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 KB_CLEAN_OPTIONS = ["collapse-blank", "strip-url", "strip-email"];
+function normalizeSegmentConfig(raw) {
+  const r = raw ?? {};
+  return {
+    mode: r.mode === "custom" || r.mode === "parent-child" ? r.mode : "auto",
+    delimiter: typeof r.delimiter === "string" && r.delimiter ? r.delimiter : r.mode === "custom" || r.mode === "parent-child" ? void 0 : "\n\n",
+    maxLength: typeof r.maxLength === "number" && r.maxLength > 0 ? Math.floor(r.maxLength) : 500,
+    overlap: typeof r.overlap === "number" && r.overlap >= 0 ? Math.floor(r.overlap) : 50,
+    clean: Array.isArray(r.clean) ? r.clean.filter((c) => KB_CLEAN_OPTIONS.includes(c)) : [],
+    locked: r.locked === true
+  };
+}
+var URL_RE = /https?:\/\/\S+/g;
+var EMAIL_RE = /[\w.+-]+@[\w-]+\.[\w.]+/g;
+function cleanText(text, clean) {
+  let out = text;
+  if (clean.includes("collapse-blank")) out = out.replace(/\n{3,}/g, "\n\n");
+  if (clean.includes("strip-url")) out = out.replace(URL_RE, "");
+  if (clean.includes("strip-email")) out = out.replace(EMAIL_RE, "");
+  return out;
+}
+function delimiterToRe(delim) {
+  const literal = delim.replace(/\\n/g, "\n").replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(literal, "g");
+}
+function segmentText(text, config) {
+  const cfg = normalizeSegmentConfig(config);
+  const cleaned = cleanText(text ?? "", cfg.clean);
+  if (!cleaned.trim()) return [];
+  const parts = [];
+  if (cfg.mode === "custom" || cfg.mode === "parent-child" || cfg.mode === "auto" && cfg.delimiter) {
+    const re = delimiterToRe(cfg.delimiter ?? "\n\n");
+    for (const seg of cleaned.split(re)) {
+      const s = seg.trim();
+      if (s) parts.push(s);
+    }
+  } else {
+    parts.push(cleaned.trim());
+  }
+  if (cfg.mode === "parent-child") return parts;
+  const out = [];
+  for (const p of parts) {
+    if (p.length <= cfg.maxLength) {
+      out.push(p);
+      continue;
+    }
+    const overlap = Math.min(cfg.overlap, Math.max(0, cfg.maxLength - 1));
+    for (let i = 0; i < p.length; i += cfg.maxLength - overlap) {
+      out.push(p.slice(i, i + cfg.maxLength));
+      if (i + cfg.maxLength >= p.length) break;
+    }
+  }
+  return out;
+}
+function segmentStats(chunks) {
+  const count = chunks.length;
+  const total = chunks.reduce((n, c) => n + c.length, 0);
+  return { count, avgLength: count ? Math.round(total / count) : 0, tokensEstimate: Math.round(total / 2) };
+}
+
+// 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-segment.ts
+var svg2 = (d) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${d}</svg>`;
+var ICON_LOCK = svg2('<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>');
+function icon(parent, svgStr) {
+  const node = svgIcon(svgStr);
+  if (node) parent.appendChild(node);
+}
+var MODES = ["auto", "custom", "parent-child"];
+var MODE_LABELS = {
+  auto: "\u81EA\u52A8",
+  custom: "\u81EA\u5B9A\u4E49",
+  "parent-child": "\u7236\u5B50"
+};
+var CLEAN_LABELS = {
+  "collapse-blank": "\u5408\u5E76\u8FDE\u7EED\u7A7A\u884C",
+  "strip-url": "\u53BB\u9664\u94FE\u63A5",
+  "strip-email": "\u53BB\u9664\u90AE\u7BB1"
+};
+var PREVIEW_LIMIT = 20;
+function buildModeSeg(cfg) {
+  const seg = h("div", "kb-seg kb-segment-mode");
+  seg.setAttribute("role", "radiogroup");
+  seg.setAttribute("aria-label", "\u5206\u6BB5\u6A21\u5F0F");
+  MODES.forEach((m) => {
+    const item = h("button", `kb-seg-item kb-segment-mode-item${cfg.mode === m ? " is-active" : ""}`);
+    item.type = "button";
+    item.setAttribute("role", "radio");
+    item.setAttribute("aria-checked", String(cfg.mode === m));
+    if (cfg.locked) item.disabled = true;
+    item.dataset.value = m;
+    item.textContent = MODE_LABELS[m];
+    seg.appendChild(item);
+  });
+  return seg;
+}
+function buildCleanGroup(cfg) {
+  const group = h("div", "kb-segment-clean");
+  KB_CLEAN_OPTIONS.forEach((opt) => {
+    const label = h("label", "kb-segment-clean-item");
+    const cb = document.createElement("input");
+    cb.type = "checkbox";
+    cb.value = opt;
+    cb.checked = cfg.clean.includes(opt);
+    cb.dataset.kbSegmentClean = opt;
+    label.appendChild(cb);
+    label.appendChild(document.createTextNode(CLEAN_LABELS[opt]));
+    group.appendChild(label);
+  });
+  return group;
+}
+function createKbSegment(el, opts) {
+  const o = opts ?? {};
+  let cfg = normalizeSegmentConfig(o.config);
+  let sample = typeof o.sample === "string" ? o.sample : "";
+  let alive = true;
+  if (typeof document === "undefined") {
+    return {
+      getConfig: () => normalizeSegmentConfig(cfg),
+      setConfig: (next) => {
+        cfg = normalizeSegmentConfig({ ...cfg, ...next });
+      },
+      refresh: () => void 0,
+      destroy: () => void 0
+    };
+  }
+  const ac = new AbortController();
+  const listen = (node, type, fn) => {
+    node.addEventListener(type, fn, { signal: ac.signal });
+  };
+  el.textContent = "";
+  el.classList.add("kb-segment-host");
+  const root = h("div", "kb-segment");
+  const form = h("div", "kb-segment-form");
+  const lockedNotice = h("div", "kb-segment-locked kb-notice");
+  icon(lockedNotice, ICON_LOCK);
+  lockedNotice.appendChild(document.createTextNode("\u5206\u6BB5\u6A21\u5F0F\u521B\u5EFA\u540E\u4E0D\u53EF\u66F4\u6539\uFF0C\u53C2\u6570\u53EF\u968F\u65F6\u8C03\u6574"));
+  if (!cfg.locked) lockedNotice.hidden = true;
+  form.appendChild(lockedNotice);
+  const modeField = h("div", "kb-field");
+  modeField.appendChild(h("span", "kb-field-label", "\u5206\u6BB5\u6A21\u5F0F"));
+  const modeSeg = buildModeSeg(cfg);
+  modeField.appendChild(modeSeg);
+  form.appendChild(modeField);
+  const delimField = h("label", "kb-field");
+  delimField.appendChild(h("span", "kb-field-label", "\u5206\u9694\u7B26"));
+  const delimInput = h("input", "kb-input kb-input--mono kb-segment-delimiter");
+  delimInput.type = "text";
+  delimInput.placeholder = "\\n\\n";
+  delimInput.value = cfg.delimiter ?? "";
+  delimInput.setAttribute("aria-label", "\u5206\u6BB5\u5206\u9694\u7B26");
+  delimField.appendChild(delimInput);
+  form.appendChild(delimField);
+  const maxField = h("label", "kb-field");
+  maxField.appendChild(h("span", "kb-field-label", "\u6700\u5927\u957F\u5EA6"));
+  const maxInput = h("input", "kb-input kb-segment-max");
+  maxInput.type = "number";
+  maxInput.min = "1";
+  maxInput.step = "1";
+  maxInput.value = String(cfg.maxLength);
+  maxInput.setAttribute("aria-label", "\u5206\u6BB5\u6700\u5927\u957F\u5EA6");
+  maxField.appendChild(maxInput);
+  form.appendChild(maxField);
+  const overlapField = h("label", "kb-field");
+  overlapField.appendChild(h("span", "kb-field-label", "\u91CD\u53E0"));
+  const overlapInput = h("input", "kb-input kb-segment-overlap");
+  overlapInput.type = "number";
+  overlapInput.min = "0";
+  overlapInput.step = "1";
+  overlapInput.value = String(cfg.overlap);
+  overlapInput.setAttribute("aria-label", "\u5206\u6BB5\u91CD\u53E0");
+  overlapField.appendChild(overlapInput);
+  form.appendChild(overlapField);
+  const overlapError = h("div", "kb-segment-overlap-error kb-notice", "\u91CD\u53E0\u9700\u5C0F\u4E8E\u6700\u5927\u957F\u5EA6");
+  overlapError.hidden = true;
+  form.appendChild(overlapError);
+  form.appendChild(buildCleanGroup(cfg));
+  const pcNotice = h("div", "kb-segment-pc-notice kb-notice", "\u5B50\u5206\u6BB5\u6309\u957F\u5EA6\u81EA\u52A8\u751F\u6210");
+  pcNotice.hidden = cfg.mode !== "parent-child";
+  form.appendChild(pcNotice);
+  root.appendChild(form);
+  const preview = h("div", "kb-segment-preview");
+  const stats = h("div", "kb-segment-stats");
+  preview.appendChild(stats);
+  const blocks = h("div", "kb-segment-blocks");
+  preview.appendChild(blocks);
+  const more = h("div", "kb-segment-more kb-notice");
+  more.hidden = true;
+  preview.appendChild(more);
+  root.appendChild(preview);
+  el.appendChild(root);
+  const syncModeSeg = () => {
+    modeSeg.querySelectorAll(".kb-segment-mode-item").forEach((it) => {
+      const on = it.dataset.value === cfg.mode;
+      it.classList.toggle("is-active", on);
+      it.setAttribute("aria-checked", String(on));
+    });
+  };
+  const syncForm = () => {
+    syncModeSeg();
+    delimInput.value = cfg.delimiter ?? "";
+    maxInput.value = String(cfg.maxLength);
+    overlapInput.value = String(cfg.overlap);
+    modeSeg.querySelectorAll("[data-kb-segment-clean]").forEach((cb) => {
+      cb.checked = cfg.clean.includes(cb.value);
+    });
+    pcNotice.hidden = cfg.mode !== "parent-child";
+  };
+  const validate = () => {
+    const invalid = cfg.overlap >= cfg.maxLength;
+    overlapError.hidden = !invalid;
+    overlapInput.setAttribute("aria-invalid", String(invalid));
+  };
+  const apply = () => {
+    validate();
+    refresh();
+    if (!alive) return;
+    emitIcen(el, "icen:kb-segment-change", { config: normalizeSegmentConfig(cfg) });
+    o.onChange?.(normalizeSegmentConfig(cfg));
+  };
+  const readForm = () => {
+    const mode = modeSeg.querySelector(".kb-segment-mode-item.is-active")?.dataset.value;
+    const delim = delimInput.value;
+    const max = Math.floor(Number(maxInput.value));
+    const overlap = Math.floor(Number(overlapInput.value));
+    const clean = Array.from(
+      form.querySelectorAll("[data-kb-segment-clean]:checked")
+    ).map((cb) => cb.value);
+    cfg = normalizeSegmentConfig({
+      mode: mode === "custom" || mode === "parent-child" ? mode : "auto",
+      delimiter: delim || void 0,
+      maxLength: Number.isFinite(max) && max > 0 ? max : cfg.maxLength,
+      overlap: Number.isFinite(overlap) && overlap >= 0 ? overlap : cfg.overlap,
+      clean,
+      locked: cfg.locked
+    });
+  };
+  listen(modeSeg, "click", (e) => {
+    const t = e.target instanceof Element ? e.target : null;
+    const item = t?.closest(".kb-segment-mode-item");
+    if (!item || item.classList.contains("is-active")) return;
+    readForm();
+    cfg = normalizeSegmentConfig({ ...cfg, mode: item.dataset.value });
+    syncForm();
+    apply();
+  });
+  listen(delimInput, "input", () => {
+    readForm();
+    apply();
+  });
+  listen(maxInput, "input", () => {
+    readForm();
+    apply();
+  });
+  listen(overlapInput, "input", () => {
+    readForm();
+    apply();
+  });
+  form.querySelectorAll("[data-kb-segment-clean]").forEach((cb) => {
+    listen(cb, "change", () => {
+      readForm();
+      apply();
+    });
+  });
+  listen(blocks, "click", (e) => {
+    const t = e.target instanceof Element ? e.target : null;
+    const text = t?.closest(".kb-segment-block-text");
+    if (text) text.classList.toggle("is-open");
+  });
+  function refresh(nextSample) {
+    if (typeof nextSample === "string") sample = nextSample;
+    stats.textContent = "";
+    blocks.textContent = "";
+    const segs = segmentText(sample, cfg);
+    const st = segmentStats(segs);
+    stats.appendChild(h("span", "kb-num kb-segment-stat", `${st.count} \u6BB5`));
+    stats.appendChild(h("span", "kb-num kb-segment-stat", `\u5747\u957F ${st.avgLength}`));
+    stats.appendChild(h("span", "kb-num kb-segment-stat", `\u2248${st.tokensEstimate} tokens`));
+    segs.slice(0, PREVIEW_LIMIT).forEach((text, i) => {
+      const block = h("div", "kb-segment-block");
+      block.appendChild(h("span", "kb-num kb-segment-block-no", String(i + 1).padStart(2, "0")));
+      const body = h("div", "kb-segment-block-text", text);
+      body.title = "\u70B9\u51FB\u5C55\u5F00/\u6536\u8D77";
+      block.appendChild(body);
+      blocks.appendChild(block);
+    });
+    if (!segs.length) blocks.appendChild(h("div", "kb-empty", "\u6837\u672C\u4E3A\u7A7A\uFF0C\u6682\u65E0\u53EF\u9884\u89C8\u5206\u6BB5"));
+    more.textContent = segs.length > PREVIEW_LIMIT ? `\u5171 ${segs.length} \u6BB5\uFF0C\u4EC5\u9884\u89C8\u524D ${PREVIEW_LIMIT} \u6BB5` : "";
+    more.hidden = segs.length <= PREVIEW_LIMIT;
+  }
+  validate();
+  refresh();
+  return {
+    getConfig() {
+      return normalizeSegmentConfig(cfg);
+    },
+    setConfig(next) {
+      cfg = normalizeSegmentConfig({ ...cfg, ...next });
+      if (typeof document === "undefined") return;
+      syncForm();
+      validate();
+      refresh();
+    },
+    refresh,
+    destroy() {
+      alive = false;
+      ac.abort();
+    }
+  };
+}
+export {
+  createKbSegment
+};

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

@@ -0,0 +1,27 @@
+import { KbCitation } from './kb-core.js';
+import './ai-core.js';
+
+/** renderKbSources 的配置项：布局变体 / onlyCited 过滤 / 基准时钟 / 点击回调 */
+interface KbSourcesOptions {
+    /** 布局变体：row = 答案上方横排（默认）；rail = 侧栏纵列 */
+    variant?: 'row' | 'rail';
+    /** 只保留被引过的来源（useCount > 0；流式期间「随流填充」模式） */
+    onlyCited?: boolean;
+    /** 相对时间 / stale 判定的基准时钟（测试注入用；缺省 new Date()） */
+    now?: Date;
+    /** 点击来源行回调（与 icen:kb-source-open 事件双通道） */
+    onOpen?: (source: KbCitation) => void;
+}
+/**
+ * 渲染来源列表（useCount 降序；--row 横排 / --rail 纵列；onlyCited 过滤；空态 .kb-empty）。
+ * 返回挂载容器 el。
+ */
+declare function renderKbSources(el: HTMLElement, sources: KbCitation[], opts?: KbSourcesOptions): HTMLElement;
+/**
+ * 初始化来源列表交互（root 级委托；幂等 WeakSet 标记，返回销毁函数，销毁后可重新 init）。
+ * 点击来源行 / 申请访问按钮 → icen:kb-source-open { source } + opts.onOpen 回调；
+ * role=button 受限行补 Enter/Space 键控等价。
+ */
+declare function initKbSources(root?: ParentNode): () => void;
+
+export { type KbSourcesOptions, initKbSources, renderKbSources };