@icen.ai/ui 0.8.0 → 0.9.0

package/dist/behaviors/kb-who-can.mjs

@@ -0,0 +1,379 @@
+// 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));
+var KB_ROLES = ["viewer", "commenter", "editor", "owner"];
+function kbRoleLabel(r) {
+  return r === "viewer" ? "\u53EF\u67E5\u770B" : r === "commenter" ? "\u53EF\u8BC4\u8BBA" : r === "editor" ? "\u53EF\u7F16\u8F91" : r === "owner" ? "\u8D1F\u8D23\u4EBA" : "\u65E0\u6743\u9650";
+}
+function roleAtLeast(role, floor) {
+  return KB_ROLES.indexOf(role) >= KB_ROLES.indexOf(floor);
+}
+function normalizeAclEntry(raw) {
+  const r = raw;
+  const s = r.subject ?? {};
+  const kind = s.kind === "user" || s.kind === "group" || s.kind === "org" || s.kind === "anyone" || s.kind === "link" ? s.kind : "user";
+  return {
+    subject: { kind, id: String(s.id ?? ""), label: String(s.label ?? "\u672A\u547D\u540D\u4E3B\u4F53"), note: typeof s.note === "string" ? s.note : void 0 },
+    role: KB_ROLES.includes(r.role) ? r.role : "viewer",
+    inheritedFrom: typeof r.inheritedFrom === "string" && r.inheritedFrom ? r.inheritedFrom : void 0,
+    expiresAt: typeof r.expiresAt === "string" && r.expiresAt ? r.expiresAt : void 0,
+    deny: r.deny === true,
+    system: r.system === true
+  };
+}
+function normalizeIdentity(raw) {
+  const r = raw;
+  return {
+    user: String(r.user ?? ""),
+    groups: Array.isArray(r.groups) ? r.groups.map(String) : [],
+    label: typeof r.label === "string" ? r.label : void 0,
+    note: typeof r.note === "string" ? r.note : void 0
+  };
+}
+function visibilityForRole(role, policy) {
+  if (role) return "full";
+  if (policy?.summaryAllowed === true) return "summary";
+  return policy?.discoverable === false ? "hidden" : "metadata";
+}
+function subjectMatches(subject, identity) {
+  if (subject.kind === "user") return subject.id === identity.user || subject.label === identity.user;
+  if (subject.kind === "group") return identity.groups.includes(subject.id) || identity.groups.includes(subject.label);
+  if (subject.kind === "org" || subject.kind === "anyone") return true;
+  return false;
+}
+function evaluateAcl(entries, identity, policy) {
+  const list = (Array.isArray(entries) ? entries : []).map((e) => normalizeAclEntry(e));
+  const id = normalizeIdentity(identity);
+  const matched = list.filter((e) => subjectMatches(e.subject, id));
+  const chain = matched.map((entry) => ({
+    entry,
+    via: entry.subject.kind === "link" ? "link" : entry.inheritedFrom ? "inherit" : "direct"
+  }));
+  const deny = matched.find((e) => e.deny);
+  if (deny) {
+    return { role: null, visibility: visibilityForRole(null, { ...policy, summaryAllowed: false }), chain, deniedBy: deny.subject };
+  }
+  const grants = matched.filter((e) => !e.deny);
+  const role = grants.reduce((acc, e) => acc && roleAtLeast(acc, e.role) ? acc : e.role, null);
+  const futureExpiry = grants.map((e) => Date.parse(e.expiresAt ?? "")).filter((t) => Number.isFinite(t) && t > Date.now()).sort((a, b) => a - b)[0];
+  return {
+    role,
+    visibility: visibilityForRole(role, policy),
+    chain,
+    expiresAt: Number.isFinite(futureExpiry) ? new Date(futureExpiry).toISOString() : void 0
+  };
+}
+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 emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
+// src/behaviors/kb-who-can.ts
+var VIA_LABEL = {
+  direct: "\u76F4\u63A5",
+  inherit: "\u7EE7\u627F",
+  link: "\u94FE\u63A5"
+};
+function untilLabel(input, now) {
+  const t = Date.parse(input);
+  if (!Number.isFinite(t)) return relativeTime(input, now);
+  const diff = t - now.getTime();
+  if (diff <= 0) return relativeTime(t, now);
+  const days = Math.floor(diff / 864e5);
+  if (days >= 1) return `${days} \u5929\u540E`;
+  const hours = Math.floor(diff / 36e5);
+  if (hours >= 1) return `${hours} \u5C0F\u65F6\u540E`;
+  return "\u5373\u5C06\u5230\u671F";
+}
+function renderKbWhoCan(el, opts) {
+  if (typeof document === "undefined" || !el) {
+    const stub = {
+      setIdentity: () => {
+      },
+      getResult: () => null,
+      destroy: () => {
+      }
+    };
+    return stub;
+  }
+  const marked = el;
+  marked.__icenKbWhoCan?.destroy();
+  const identities = (Array.isArray(opts.identities) ? opts.identities : []).map(
+    (i) => normalizeIdentity(i)
+  );
+  const entries = (Array.isArray(opts.entries) ? opts.entries : []).map(
+    (e) => normalizeAclEntry(e)
+  );
+  const evaluate = opts.evaluate ?? ((identity, ents) => evaluateAcl(ents, identity));
+  const ctrl = new AbortController();
+  const listen = (type, fn) => {
+    el.addEventListener(type, fn, { signal: ctrl.signal });
+  };
+  let destroyed = false;
+  let decision = null;
+  el.textContent = "";
+  el.classList.add("kb-whocan");
+  const select = h("select", "kb-whocan-user");
+  select.setAttribute("aria-label", "\u68C0\u67E5\u8EAB\u4EFD");
+  for (const identity of identities) {
+    const option = h("option", void 0, identity.label ?? identity.user);
+    option.value = identity.user;
+    select.appendChild(option);
+  }
+  const checkBtn = h("button", "kb-whocan-check", "\u68C0\u67E5");
+  checkBtn.type = "button";
+  checkBtn.dataset.whocanCheck = "";
+  checkBtn.setAttribute("aria-label", "\u91CD\u65B0\u68C0\u67E5\u5F53\u524D\u8EAB\u4EFD\u7684\u6709\u6548\u6743\u9650");
+  const bar = h("div", "kb-whocan-bar");
+  bar.append(select, checkBtn);
+  const result = h("div", "kb-whocan-result");
+  el.append(bar, result);
+  function renderResult(d) {
+    result.textContent = "";
+    result.classList.remove("is-allowed", "is-denied");
+    const allowed = d.role != null;
+    result.classList.add(allowed ? "is-allowed" : "is-denied");
+    result.appendChild(h("div", "kb-whocan-verdict", kbRoleLabel(d.role)));
+    if (d.deniedBy) {
+      result.appendChild(h("div", "kb-whocan-deniedby", `\u88AB\u7B56\u7565\u62D2\u7EDD\uFF1A${d.deniedBy.label}`));
+    }
+    const chain = h("ul", "kb-whocan-chain");
+    if (!d.chain.length) {
+      chain.appendChild(h("li", "kb-whocan-none kb-meta", "\u672A\u547D\u4E2D\u4EFB\u4F55\u6388\u6743\u2014\u2014\u9ED8\u8BA4\u62D2\u7EDD"));
+    } else {
+      for (const link of d.chain) {
+        const li = h("li", "kb-whocan-reason");
+        li.classList.add(link.entry.deny ? "is-deny" : `is-${link.via}`);
+        li.appendChild(h("span", "kb-badge", link.entry.deny ? "\u62D2\u7EDD" : VIA_LABEL[link.via]));
+        li.appendChild(h("span", "kb-whocan-source", link.entry.subject.label));
+        li.appendChild(h("span", "kb-whocan-role kb-chip", kbRoleLabel(link.entry.role)));
+        if (link.entry.subject.note) li.appendChild(h("span", "kb-meta", link.entry.subject.note));
+        chain.appendChild(li);
+      }
+    }
+    result.appendChild(chain);
+    result.appendChild(
+      h(
+        "div",
+        "kb-whocan-rule",
+        `\u53E0\u52A0\u89C4\u5219\uFF1A\u591A\u6765\u6E90\u5E76\u96C6 \u2192 ${kbRoleLabel(d.role)}\uFF1B${d.deniedBy ? "\u88AB Deny \u4E00\u7968\u5426\u51B3" : "\u65E0 Deny \u751F\u6548"}`
+      )
+    );
+    if (d.expiresAt) {
+      result.appendChild(h("div", "kb-whocan-expires kb-meta", `\u6700\u8FD1\u5230\u671F ${untilLabel(d.expiresAt, /* @__PURE__ */ new Date())}`));
+    }
+  }
+  function run() {
+    if (destroyed) return;
+    const identity = identities.find((i) => i.user === select.value);
+    if (!identity) {
+      decision = null;
+      result.textContent = "";
+      result.classList.remove("is-allowed", "is-denied");
+      return;
+    }
+    decision = evaluate(identity, entries);
+    renderResult(decision);
+    emitIcen(el, "icen:kb-whocan-check", { identity, decision });
+    opts.onCheck?.(identity, decision);
+  }
+  listen("change", (ev) => {
+    if (ev.target === select) run();
+  });
+  listen("click", (ev) => {
+    const t = ev.target;
+    if (t instanceof Element && t.closest("[data-whocan-check]")) run();
+  });
+  if (!identities.length) {
+    select.disabled = true;
+    checkBtn.disabled = true;
+    result.appendChild(h("div", "kb-empty", "\u672A\u63D0\u4F9B\u53EF\u68C0\u67E5\u7684\u8EAB\u4EFD"));
+  } else {
+    run();
+  }
+  const handle = {
+    setIdentity(id) {
+      if (destroyed) return;
+      if (!identities.some((i) => i.user === id)) return;
+      select.value = id;
+      run();
+    },
+    getResult() {
+      return decision;
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      ctrl.abort();
+      el.classList.remove("kb-whocan");
+      el.textContent = "";
+      delete el.__icenKbWhoCan;
+    }
+  };
+  marked.__icenKbWhoCan = handle;
+  return handle;
+}
+export {
+  renderKbWhoCan
+};

package/dist/behaviors/modal.d.mts

@@ -1,11 +1,30 @@
-/** 打开指定 id 的 modal；已有其他 modal 打开时先关闭它。 */
-declare function openModal(id: string): void;
-/** 关闭指定 id 的 modal（backdrop 已被外部移除时也照常复位状态/监听/滚动锁）。 */
+/** 焦点陷阱的可聚焦元素选择器（modal / command-palette 焦点陷阱全库共用）。 */
+declare const FOCUSABLE = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable]:not([contenteditable=\"false\"]), audio, video, details>summary";
+/** openModal 可选项。 */
+interface ModalOpenOptions {
+    /**
+     * 初始焦点：缺省 = 聚焦面板内第一个可聚焦元素（无则面板自身）；
+     * 传 HTMLElement = 聚焦该元素；'none' = 不动焦点（调用方自管，焦点陷阱仍生效）。
+     */
+    initialFocus?: HTMLElement | 'none';
+}
+/**
+ * 打开指定 id 的 modal；已有其他 modal 打开时先关闭它。
+ * 打开成功后从 document 派发 icen:modal-open { id }（广播）。
+ */
+declare function openModal(id: string, opts?: ModalOpenOptions): void;
+/**
+ * 关闭指定 id 的 modal（backdrop 已被外部移除时也照常复位状态/监听/滚动锁）。
+ * 关闭已打开的 modal 后从 document 派发 icen:modal-close { id }（广播）；
+ * 关闭未被接管打开的 modal（幂等空操作路径）不派发。
+ */
 declare function closeModal(id: string): void;
 /**
  * 绑定触发器/关闭钮/backdrop 点击（document 级事件委托，重复调用安全）。
  * root 用于扫描 [data-modal-open] 补 aria-haspopup=dialog。
+ * 返回销毁函数：摘除 document 委托并复位幂等标记（销毁后可重新 init）；
+ * 销毁时若有 modal 开着会顺带关闭（复位滚动锁/监听/焦点）。SSR 下返回 no-op。
  */
-declare function initModal(root?: ParentNode): void;
+declare function initModal(root?: ParentNode): () => void;
 
-export { closeModal, initModal, openModal };
+export { FOCUSABLE, type ModalOpenOptions, closeModal, initModal, openModal };

package/dist/behaviors/modal.mjs

@@ -1,5 +1,53 @@
+// src/behaviors/popover.ts
+var PANEL_SIZING_ATTRS = {
+  width: "data-panel-width",
+  minWidth: "data-panel-min",
+  maxWidth: "data-panel-max",
+  minHeight: "data-panel-min-height",
+  maxHeight: "data-panel-max-height"
+};
+function readPanelSizing(el) {
+  const out = {};
+  if (!el) return out;
+  for (const key of Object.keys(PANEL_SIZING_ATTRS)) {
+    const raw = el.getAttribute(PANEL_SIZING_ATTRS[key]);
+    if (raw == null) continue;
+    const n = Number(raw);
+    if (Number.isFinite(n) && n > 0) out[key] = n;
+  }
+  return out;
+}
+function applyPanelSizing(panel, sizing) {
+  if (sizing == null) {
+    panel.style.width = "";
+    panel.style.minWidth = "";
+    panel.style.maxWidth = "";
+    panel.style.minHeight = "";
+    panel.style.maxHeight = "";
+    return;
+  }
+  const vw = typeof document === "undefined" ? Number.POSITIVE_INFINITY : document.documentElement.clientWidth;
+  const fitW = (n) => Math.min(n, Math.max(80, vw - 24));
+  if (sizing.width != null) {
+    const w = fitW(sizing.width);
+    panel.style.width = `${w}px`;
+    panel.style.maxWidth = `${w}px`;
+  }
+  if (sizing.minWidth != null) panel.style.minWidth = `${fitW(sizing.minWidth)}px`;
+  if (sizing.maxWidth != null && sizing.width == null) panel.style.maxWidth = `${fitW(sizing.maxWidth)}px`;
+  if (sizing.minHeight != null) panel.style.minHeight = `${sizing.minHeight}px`;
+  if (sizing.maxHeight != null) panel.style.maxHeight = `${sizing.maxHeight}px`;
+}
+
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/modal.ts
-var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"]), audio, video, details>summary';
 var openId = null;
 var restoreFocusTo = null;
 var prevBodyOverflow = "";
@@ -11,7 +59,7 @@ function findBackdrop(id) {
 function portal(backdrop) {
   if (backdrop.parentElement !== document.body) document.body.appendChild(backdrop);
 }
-function openModal(id) {
+function openModal(id, opts) {
   if (typeof document === "undefined") return;
   if (openId === id) return;
   if (openId) closeModal(openId);
@@ -22,6 +70,7 @@ function openModal(id) {
   }
   const panel = backdrop.querySelector(".modal");
   if (!panel) return;
+  applyPanelSizing(panel, readPanelSizing(backdrop));
   portal(backdrop);
   restoreFocusTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
   openId = id;
@@ -34,14 +83,14 @@ function openModal(id) {
   if (!panel.hasAttribute("aria-labelledby")) {
     const title = panel.querySelector(".modal-title");
     if (title) {
-      if (!title.id) title.id = `modal-title-${CSS.escape(id)}`;
+      if (!title.id) title.id = `modal-title-${id.replace(/[^\w-]/g, "-")}`;
       panel.setAttribute("aria-labelledby", title.id);
     }
   }
   if (!panel.hasAttribute("aria-describedby")) {
     const desc = panel.querySelector(".modal-description");
     if (desc) {
-      if (!desc.id) desc.id = `modal-desc-${CSS.escape(id)}`;
+      if (!desc.id) desc.id = `modal-desc-${id.replace(/[^\w-]/g, "-")}`;
       panel.setAttribute("aria-describedby", desc.id);
     }
   }
@@ -76,8 +125,14 @@ function openModal(id) {
     }
   };
   window.addEventListener("keydown", keyHandler);
-  const focusable = panel.querySelector(FOCUSABLE);
-  (focusable ?? panel).focus();
+  if (opts?.initialFocus === "none") {
+  } else if (opts?.initialFocus instanceof HTMLElement) {
+    opts.initialFocus.focus();
+  } else {
+    const focusable = panel.querySelector(FOCUSABLE);
+    (focusable ?? panel).focus();
+  }
+  emitIcen(document, "icen:modal-open", { id });
 }
 function closeModal(id) {
   if (typeof document === "undefined") return;
@@ -92,14 +147,17 @@ function closeModal(id) {
   document.body.style.overflow = prevBodyOverflow;
   if (restoreFocusTo && restoreFocusTo.isConnected) restoreFocusTo.focus();
   restoreFocusTo = null;
+  emitIcen(document, "icen:modal-close", { id });
 }
 function initModal(root) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return () => {
+  };
   const scope = root ?? document;
   scope.querySelectorAll("[data-modal-open]").forEach((el) => el.setAttribute("aria-haspopup", "dialog"));
-  if (initialized) return;
+  if (initialized) return () => {
+  };
   initialized = true;
-  document.addEventListener("click", (e) => {
+  const onClick = (e) => {
     const target = e.target instanceof Element ? e.target : null;
     if (!target) return;
     const opener = target.closest("[data-modal-open]");
@@ -117,9 +175,17 @@ function initModal(root) {
     if (target instanceof HTMLElement && target.classList.contains("modal-backdrop") && target.dataset.modal && target.dataset.closeOnOverlay !== "false") {
       closeModal(target.dataset.modal);
     }
-  });
+  };
+  document.addEventListener("click", onClick);
+  const destroy = () => {
+    document.removeEventListener("click", onClick);
+    if (openId) closeModal(openId);
+    initialized = false;
+  };
+  return destroy;
 }
 export {
+  FOCUSABLE,
   closeModal,
   initModal,
   openModal

package/dist/behaviors/nav.d.mts

@@ -1,6 +1,6 @@
 /**
  * 为 root 下每个 .nav[data-scroll-reactive] 初始化（root 自身匹配也算）。
- * 返回销毁函数：移除本次初始化挂上的全部 window scroll/resize 监听。
+ * 返回销毁函数：移除本次初始化挂上的全部 window scroll/resize 与 nav click 监听。
  */
 declare function initNav(root?: ParentNode): () => void;
 

package/dist/behaviors/nav.mjs

@@ -1,8 +1,19 @@
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/nav.ts
 function prefersReducedMotion() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
+var NAV_ITEM_SELECTOR = ".nav-btn, .nav-link";
+function isNavItemDisabled(item) {
+  return item.classList.contains("is-disabled") || item.getAttribute("aria-disabled") === "true" || item instanceof HTMLButtonElement && item.disabled;
+}
 function setup(nav) {
   const el = nav;
   if (el.__icenNavInit) return void 0;
@@ -36,17 +47,32 @@ function setup(nav) {
     ticking = true;
     window.requestAnimationFrame(apply);
   };
-  const onResize = () => {
-    if (ticking) return;
-    ticking = true;
-    window.requestAnimationFrame(apply);
-  };
   window.addEventListener("scroll", onScroll, { passive: true });
-  window.addEventListener("resize", onResize, { passive: true });
+  window.addEventListener("resize", onScroll, { passive: true });
   apply();
+  const onSelect = (ev) => {
+    const target = ev.target;
+    if (!(target instanceof Element)) return;
+    const item = target.closest(NAV_ITEM_SELECTOR);
+    if (!item || item.closest(".nav") !== nav) return;
+    if (isNavItemDisabled(item)) return;
+    const items = Array.from(nav.querySelectorAll(NAV_ITEM_SELECTOR));
+    const index = items.indexOf(item);
+    if (index === -1) return;
+    items.forEach((it) => {
+      if (it === item) return;
+      it.classList.remove("is-active");
+      if (it.getAttribute("aria-current") === "page") it.removeAttribute("aria-current");
+    });
+    item.classList.add("is-active");
+    item.setAttribute("aria-current", "page");
+    emitIcen(item, "icen:nav-select", { item, index });
+  };
+  nav.addEventListener("click", onSelect);
   return () => {
     window.removeEventListener("scroll", onScroll);
-    window.removeEventListener("resize", onResize);
+    window.removeEventListener("resize", onScroll);
+    nav.removeEventListener("click", onSelect);
     el.__icenNavInit = false;
   };
 }