@icen.ai/ui 0.8.1 → 0.9.0

package/dist/behaviors/kb-sandbox.mjs

@@ -0,0 +1,325 @@
+// 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));
+
+// 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-sandbox.ts
+var DEFAULT_TIMEOUT_MS = 8e3;
+function isSandboxMessage(data) {
+  if (!data || typeof data !== "object") return false;
+  const m = data;
+  if (m.jsonrpc !== "2.0") return false;
+  if (typeof m.method === "string") return true;
+  if (m.id !== void 0 && m.id !== null && ("result" in m || "error" in m)) return true;
+  return false;
+}
+function createKbSandbox(el, opts = {}) {
+  const stub = { load: () => void 0, call: () => Promise.reject(new Error("kb-sandbox: SSR")), destroy: () => void 0 };
+  if (typeof document === "undefined" || !el) return stub;
+  const timeoutMs = typeof opts.timeoutMs === "number" && opts.timeoutMs > 0 ? opts.timeoutMs : DEFAULT_TIMEOUT_MS;
+  const allowedOrigins = Array.isArray(opts.allowedOrigins) ? opts.allowedOrigins.filter((o) => typeof o === "string") : null;
+  el.classList.add("kb-sandbox");
+  el.dataset.state = "idle";
+  const stage = h("div", "kb-sandbox-stage");
+  const frame = document.createElement("iframe");
+  frame.className = "kb-sandbox-frame";
+  frame.setAttribute("sandbox", "allow-scripts");
+  frame.title = "MCP App \u6C99\u7BB1";
+  const loading = h("div", "kb-sandbox-loading");
+  loading.appendChild(h("i", "kb-sandbox-spin"));
+  const err = h("div", "kb-sandbox-err");
+  const errMsg = h("span", "kb-sandbox-err-msg");
+  err.appendChild(errMsg);
+  stage.append(frame, loading, err);
+  el.textContent = "";
+  el.appendChild(stage);
+  const ac = new AbortController();
+  const { signal } = ac;
+  const pending = /* @__PURE__ */ new Map();
+  let seq = 0;
+  let loadSeq = 0;
+  let destroyed = false;
+  let state = "idle";
+  const setState = (s) => {
+    state = s;
+    el.dataset.state = s;
+  };
+  const notify = (channel, payload) => {
+    emitIcen(el, "icen:kb-sandbox-message", { channel, payload });
+    opts.onMessage?.({ channel, payload });
+  };
+  const showError = (message) => {
+    errMsg.textContent = message;
+    setState("error");
+  };
+  const failPending = (message) => {
+    for (const [, p] of pending) {
+      clearTimeout(p.timer);
+      p.reject(new Error(`kb-sandbox: ${message}`));
+    }
+    pending.clear();
+  };
+  const onWindowMessage = (e) => {
+    if (destroyed || e.source !== frame.contentWindow) return;
+    if (allowedOrigins && !allowedOrigins.includes(e.origin)) return;
+    const payload = e.data;
+    if (!isSandboxMessage(payload)) return;
+    notify("in", payload);
+    if (payload.method === "app.ready") {
+      setState("ready");
+      return;
+    }
+    if (payload.id != null && ("result" in payload || "error" in payload)) {
+      const p = pending.get(payload.id);
+      if (!p) return;
+      pending.delete(payload.id);
+      clearTimeout(p.timer);
+      if (payload.error) p.reject(new Error(`kb-sandbox: ${payload.error.message}`));
+      else p.resolve(payload.result);
+    }
+  };
+  window.addEventListener("message", onWindowMessage, { signal });
+  frame.addEventListener(
+    "load",
+    () => {
+      if (!destroyed && state === "loading") setState("ready");
+    },
+    { signal }
+  );
+  const mountSrcdoc = (html) => {
+    frame.removeAttribute("src");
+    frame.srcdoc = html;
+    setState("loading");
+  };
+  const load = (uriOrHtml, loadOpts) => {
+    if (destroyed) return;
+    const s = String(uriOrHtml ?? "");
+    failPending("reloaded");
+    errMsg.textContent = "";
+    const mySeq = ++loadSeq;
+    if (s.startsWith("ui://")) {
+      if (typeof opts.resolve !== "function") {
+        showError("\u5BBF\u4E3B\u672A\u63D0\u4F9B ui:// \u89E3\u6790\u5668");
+        return;
+      }
+      let resolved;
+      try {
+        resolved = opts.resolve(s);
+      } catch (e) {
+        showError(`ui:// \u89E3\u6790\u5931\u8D25\uFF1A${e instanceof Error ? e.message : String(e)}`);
+        return;
+      }
+      if (resolved != null && typeof resolved.then === "function") {
+        setState("loading");
+        resolved.then(
+          (html) => {
+            if (destroyed || mySeq !== loadSeq) return;
+            if (typeof html === "string" && html) mountSrcdoc(html);
+            else showError("\u5BBF\u4E3B\u672A\u63D0\u4F9B ui:// \u89E3\u6790\u5668");
+          },
+          (e) => {
+            if (destroyed || mySeq !== loadSeq) return;
+            showError(`ui:// \u89E3\u6790\u5931\u8D25\uFF1A${e instanceof Error ? e.message : String(e)}`);
+          }
+        );
+        return;
+      }
+      if (typeof resolved === "string" && resolved) {
+        mountSrcdoc(resolved);
+        return;
+      }
+      showError("\u5BBF\u4E3B\u672A\u63D0\u4F9B ui:// \u89E3\u6790\u5668");
+      return;
+    }
+    if (loadOpts?.srcDoc || s.includes("<")) mountSrcdoc(s);
+    else {
+      frame.removeAttribute("srcdoc");
+      setState("loading");
+      frame.src = s;
+    }
+  };
+  const call = (name, args) => new Promise((resolve, reject) => {
+    if (destroyed) {
+      reject(new Error("kb-sandbox: destroyed"));
+      return;
+    }
+    if (state === "idle" || state === "error" || !frame.contentWindow) {
+      reject(new Error("kb-sandbox: \u5E94\u7528\u672A\u5C31\u7EEA"));
+      return;
+    }
+    const id = ++seq;
+    const payload = { jsonrpc: "2.0", id, method: name, params: args };
+    const timer = setTimeout(() => {
+      pending.delete(id);
+      reject(new Error(`kb-sandbox: \u8C03\u7528\u8D85\u65F6\uFF08${timeoutMs}ms\uFF09`));
+    }, timeoutMs);
+    pending.set(id, { resolve, reject, timer });
+    frame.contentWindow.postMessage(payload, "*");
+    notify("out", payload);
+  });
+  const destroy = () => {
+    if (destroyed) return;
+    destroyed = true;
+    ac.abort();
+    failPending("destroyed");
+    frame.remove();
+    el.classList.remove("kb-sandbox");
+    delete el.dataset.state;
+    el.textContent = "";
+  };
+  return { load, call, destroy };
+}
+export {
+  createKbSandbox
+};

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

@@ -0,0 +1,32 @@
+import { KbSegmentConfig } from './kb-core.js';
+import './ai-core.js';
+
+/** createKbSegment 选项 */
+interface KbSegmentOpts {
+    /** 初始分段配置（宽进：走 normalizeSegmentConfig 归一） */
+    config?: Partial<KbSegmentConfig>;
+    /** 预览样本文本（真实切分的素材） */
+    sample?: string;
+    /** 用户变更回调（与 icen:kb-segment-change 事件双通道） */
+    onChange?: (config: KbSegmentConfig) => void;
+}
+/** createKbSegment 句柄 */
+interface KbSegmentHandle {
+    /** 当前配置（归一化副本，调用方可安全改写） */
+    getConfig(): KbSegmentConfig;
+    /** 程序化赋值（合并 + 同步表单 + 重算预览；不派事件不触发 onChange） */
+    setConfig(config: Partial<KbSegmentConfig>): void;
+    /** 重算预览；给 sample 则同时更换样本 */
+    refresh(sample?: string): void;
+    /** 摘除全部监听（销毁后句柄方法仍可读写，但不再响应交互/派事件） */
+    destroy(): void;
+}
+/**
+ * 挂载分段策略编辑器（左表单右预览）并返回句柄。
+ * 表单任一用户变更 → 即时用 kb-core segmentText 真实切分重算预览，并
+ * 派 icen:kb-segment-change { config } + 调 opts.onChange（双通道）。
+ * SSR（无 document）下返回惰性句柄（getConfig 可用，DOM 操作 no-op）。
+ */
+declare function createKbSegment(el: HTMLElement, opts?: KbSegmentOpts): KbSegmentHandle;
+
+export { type KbSegmentHandle, type KbSegmentOpts, createKbSegment };