@icen.ai/ui 0.8.0 → 0.8.1

package/dist/behaviors/ai-composer.mjs

@@ -1,4 +1,13 @@
 // src/behaviors/ai-core.ts
+var USAGE_KEYS = ["input", "output", "cacheRead", "cacheWrite", "reasoning", "total"];
+function addUsage(sum2, u) {
+  const out = { ...sum2 };
+  for (const k of USAGE_KEYS) {
+    const v = u[k];
+    if (typeof v === "number" && Number.isFinite(v)) out[k] = (out[k] ?? 0) + v;
+  }
+  return out;
+}
 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(
@@ -159,9 +168,9 @@ function formatDuration(ms) {
   const m = Math.floor(ms / 6e4);
   const s = Math.round(ms % 6e4 / 1e3);
   if (ms < 36e5) return s > 0 ? `${m}m${s}s` : `${m}m`;
-  const h = Math.floor(ms / 36e5);
+  const h2 = Math.floor(ms / 36e5);
   const rm = Math.round(ms % 36e5 / 6e4);
-  return rm > 0 ? `${h}h${rm}m` : `${h}h`;
+  return rm > 0 ? `${h2}h${rm}m` : `${h2}h`;
 }
 function aiContentUrl(part) {
   if (part.type === "text" || part.type === "resource-link") return void 0;
@@ -175,6 +184,12 @@ function contextEstimate(usage) {
   const u = normalizeUsage(usage);
   return (u.input ?? 0) + (u.cacheRead ?? 0) + (u.cacheWrite ?? 0) + (u.output ?? 0) + (u.reasoning ?? 0);
 }
+function h(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
 function svgIcon(svg2) {
   if (typeof document === "undefined" || typeof DOMParser === "undefined") return null;
   let parsed;
@@ -187,15 +202,15 @@ function svgIcon(svg2) {
   if (!root || root.tagName.toLowerCase() !== "svg" || parsed.querySelector("parsererror")) {
     return null;
   }
-  const sanitize = (el3) => {
-    for (const attr of Array.from(el3.attributes)) {
+  const sanitize = (el) => {
+    for (const attr of Array.from(el.attributes)) {
       const name = attr.name.toLowerCase();
-      if (name.startsWith("on")) el3.removeAttribute(attr.name);
+      if (name.startsWith("on")) el.removeAttribute(attr.name);
       if ((name === "href" || name === "xlink:href") && attr.value.trim().toLowerCase().startsWith("javascript:")) {
-        el3.removeAttribute(attr.name);
+        el.removeAttribute(attr.name);
       }
     }
-    for (const child of Array.from(el3.children)) {
+    for (const child of Array.from(el.children)) {
       const tag = child.tagName.toLowerCase();
       if (tag === "script" || tag === "foreignobject") {
         child.remove();
@@ -209,6 +224,44 @@ function svgIcon(svg2) {
 }
 
 // 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 resolvePanelSizing(el, overrides) {
+  const base = readPanelSizing(el);
+  if (!overrides) return base;
+  for (const key of Object.keys(overrides)) {
+    const v = overrides[key];
+    if (typeof v === "number" && Number.isFinite(v) && v > 0) base[key] = v;
+  }
+  return base;
+}
+function sizingToLayout(sizing, opts) {
+  const out = { ...opts };
+  if (sizing.minWidth != null) out.minWidth = sizing.minWidth;
+  if (sizing.maxWidth != null) out.maxWidth = sizing.maxWidth;
+  if (sizing.width != null) {
+    out.minWidth = sizing.width;
+    out.maxWidth = sizing.width;
+  }
+  if (sizing.maxHeight != null) out.maxHeight = sizing.maxHeight;
+  return out;
+}
 var DEFAULT_MIN_WIDTH = 220;
 var DEFAULT_MAX_WIDTH = 420;
 var DEFAULT_MIN_HEIGHT = 120;
@@ -233,13 +286,35 @@ function horizontalAnchor(anchor, width, align) {
 function computePopoverLayout(anchor, viewport, opts = {}) {
   const margin = opts.margin ?? 12;
   const offset = opts.offset ?? 8;
+  const preferredSide = opts.side ?? "top";
+  const align = opts.align ?? "start";
+  if (preferredSide === "left" || preferredSide === "right") {
+    const availableLeft = Math.max(0, anchor.left - margin - offset);
+    const availableRight = Math.max(0, viewport.width - anchor.right - margin - offset);
+    const side2 = (preferredSide === "left" ? availableLeft : availableRight) >= DEFAULT_MIN_WIDTH ? preferredSide : preferredSide === "left" ? "right" : "left";
+    const minWidth2 = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
+    const maxWidth2 = Math.min(
+      Math.max(opts.maxWidth ?? DEFAULT_MAX_WIDTH, minWidth2),
+      side2 === "left" ? availableLeft : availableRight
+    );
+    const width2 = minWidth2;
+    const left2 = clamp(
+      side2 === "left" ? anchor.left - offset - width2 : anchor.right + offset,
+      margin,
+      viewport.width - margin - width2
+    );
+    const availableHeight2 = Math.max(80, viewport.height - margin * 2);
+    const maxHeight2 = Math.min(opts.maxHeight ?? DEFAULT_MAX_HEIGHT, availableHeight2);
+    const desired = clamp(opts.contentHeightHint ?? Math.min(anchor.height, maxHeight2), 40, maxHeight2);
+    const anchorTop = align === "center" ? anchor.top + anchor.height / 2 - desired / 2 : align === "end" ? anchor.bottom - desired : anchor.top;
+    const top2 = clamp(anchorTop, margin, viewport.height - margin - desired);
+    return { side: side2, left: left2, top: top2, width: width2, maxHeight: maxHeight2 };
+  }
   const availableWidth = Math.max(80, viewport.width - margin * 2);
   const requestedMinWidth = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
   const requestedMaxWidth = Math.max(requestedMinWidth, opts.maxWidth ?? DEFAULT_MAX_WIDTH);
   const maxWidth = Math.min(requestedMaxWidth, availableWidth);
   const minWidth = Math.min(requestedMinWidth, maxWidth);
-  const preferredSide = opts.side ?? "top";
-  const align = opts.align ?? "start";
   const availableTop = Math.max(0, anchor.top - margin - offset);
   const availableBottom = Math.max(0, viewport.height - anchor.bottom - margin - offset);
   const availableHeight = Math.max(80, viewport.height - margin * 2);
@@ -263,8 +338,8 @@ function computePopoverLayout(anchor, viewport, opts = {}) {
   return { side, left, top, width, maxHeight };
 }
 var openPanels = /* @__PURE__ */ new Map();
-function rectFromElement(el3) {
-  const r = el3.getBoundingClientRect();
+function rectFromElement(el) {
+  const r = el.getBoundingClientRect();
   return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height };
 }
 function resolveAnchor(state) {
@@ -317,7 +392,8 @@ function onKeyDown(e) {
 function openPopover(panel, options) {
   if (typeof document === "undefined") return;
   if (openPanels.has(panel)) closePopover(panel);
-  const { anchor, onClose, ...layoutOpts } = options;
+  const { anchor, onClose, sizing, ...rest } = options;
+  const layoutOpts = sizingToLayout(resolvePanelSizing(panel, sizing), rest);
   const placeholder = document.createComment("popover-anchor");
   panel.parentNode?.insertBefore(placeholder, panel);
   const wasHidden = panel.hidden;
@@ -369,17 +445,18 @@ function closePopover(panel) {
   state.onClose?.();
 }
 
-// src/behaviors/ai-panel.ts
-function el(tag, className, text) {
-  const node = document.createElement(tag);
-  if (className) node.className = className;
-  if (text !== void 0) node.textContent = text;
-  return node;
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
 }
+
+// src/behaviors/ai-panel.ts
 function buildTodoHead(done, total) {
-  const head = el("div", "ai-todo-head");
-  head.appendChild(el("span", "ai-todo-progress", `${done}/${total}`));
-  const bar = el("div", "ai-todo-bar");
+  const head = h("div", "ai-todo-head");
+  head.appendChild(h("span", "ai-todo-progress", `${done}/${total}`));
+  const bar = h("div", "ai-todo-bar");
   bar.setAttribute("role", "progressbar");
   bar.setAttribute("aria-valuemin", "0");
   bar.setAttribute("aria-valuemax", String(total));
@@ -392,26 +469,27 @@ function buildTodoHead(done, total) {
   return head;
 }
 function buildTodoItem(item, index) {
-  const row = el("div", `ai-todo-item is-${item.status}`);
+  const row = h("div", `ai-todo-item is-${item.status}`);
   row.dataset.index = String(index);
-  row.appendChild(el("span", "ai-item-status"));
-  row.appendChild(el("span", "ai-todo-text", item.content));
-  row.appendChild(el("span", "ai-todo-active", item.activeForm ?? item.content));
+  row.appendChild(h("span", "ai-item-status"));
+  row.appendChild(h("span", "ai-todo-text", item.content));
+  row.appendChild(h("span", "ai-todo-active", item.activeForm ?? item.content));
   return row;
 }
-function renderAiTodo(elm, items) {
-  if (typeof document === "undefined") return;
-  elm.textContent = "";
-  const root = el("div", "ai-todo");
+function renderAiTodo(el, items) {
+  if (typeof document === "undefined") return el;
+  el.textContent = "";
+  const root = h("div", "ai-todo");
   const list = Array.isArray(items) ? items : [];
   const done = list.filter((i) => i.status === "done").length;
   root.appendChild(buildTodoHead(done, list.length));
   list.forEach((item, i) => root.appendChild(buildTodoItem(item, i)));
   if (list.length > 0 && done === list.length) root.classList.add("is-complete");
-  elm.appendChild(root);
+  el.appendChild(root);
+  return el;
 }
-function renderAiUsage(elm, usage, opts = {}) {
-  if (typeof document === "undefined") return;
+function renderAiUsage(el, usage, opts = {}) {
+  if (typeof document === "undefined") return el;
   const u = normalizeUsage(usage);
   const segs = [
     { key: "input", className: "ai-usage-seg--input", label: "\u8F93\u5165", value: u.input ?? 0 },
@@ -423,9 +501,9 @@ function renderAiUsage(elm, usage, opts = {}) {
   const activeSegs = segs.filter((s) => s.value > 0);
   const sum2 = activeSegs.reduce((acc, s) => acc + s.value, 0);
   const total = u.total ?? sum2;
-  elm.textContent = "";
-  const root = el("div", "ai-usage");
-  const bar = el("div", "ai-usage-bar");
+  el.textContent = "";
+  const root = h("div", "ai-usage");
+  const bar = h("div", "ai-usage-bar");
   const summary = activeSegs.length > 0 ? activeSegs.map((s) => `${s.label} ${formatTokens(s.value)}`).join("\uFF0C") : "\u6682\u65E0\u7528\u91CF";
   bar.setAttribute("role", "img");
   bar.setAttribute("aria-label", `\u7528\u91CF\uFF1A${summary}`);
@@ -437,15 +515,15 @@ function renderAiUsage(elm, usage, opts = {}) {
   }
   root.appendChild(bar);
   if (activeSegs.length > 0) {
-    const legend = el("div", "ai-usage-legend");
+    const legend = h("div", "ai-usage-legend");
     for (const s of activeSegs) {
-      const item = el("span", "ai-usage-legend-item");
+      const item = h("span", "ai-usage-legend-item");
       const dot = document.createElement("i");
       dot.className = `ai-usage-dot ${s.className}`;
       dot.setAttribute("aria-hidden", "true");
       item.appendChild(dot);
-      item.appendChild(el("span", "ai-usage-legend-label", s.label));
-      item.appendChild(el("span", "ai-usage-legend-value", formatTokens(s.value)));
+      item.appendChild(h("span", "ai-usage-legend-label", s.label));
+      item.appendChild(h("span", "ai-usage-legend-value", formatTokens(s.value)));
       legend.appendChild(item);
     }
     root.appendChild(legend);
@@ -458,17 +536,18 @@ function renderAiUsage(elm, usage, opts = {}) {
   if (typeof opts.cost === "number" && Number.isFinite(opts.cost)) {
     totalParts.push(` \xB7 $${opts.cost.toFixed(4)}`);
   }
-  root.appendChild(el("div", "ai-usage-total", totalParts.join("")));
-  elm.appendChild(root);
+  root.appendChild(h("div", "ai-usage-total", totalParts.join("")));
+  el.appendChild(root);
+  return el;
 }
-function renderAiUsageRing(elm, usage, opts = {}) {
-  if (typeof document === "undefined") return;
+function renderAiUsageRing(el, usage, opts = {}) {
+  if (typeof document === "undefined") return el;
   const u = normalizeUsage(usage);
   const used = u.total ?? (u.input ?? 0) + (u.output ?? 0) + (u.cacheRead ?? 0) + (u.cacheWrite ?? 0) + (u.reasoning ?? 0);
   const hasLimit = typeof opts.total === "number" && opts.total > 0;
   const pct = hasLimit ? Math.min(100, Math.max(0, Math.round(used / opts.total * 100))) : 0;
-  elm.textContent = "";
-  const btn = el("button", "ai-usage-ring");
+  el.textContent = "";
+  const btn = h("button", "ai-usage-ring");
   btn.type = "button";
   btn.classList.add(pct >= 85 ? "is-hot" : pct >= 60 ? "is-warn" : "is-ok");
   btn.setAttribute("aria-haspopup", "true");
@@ -492,7 +571,7 @@ function renderAiUsageRing(elm, usage, opts = {}) {
     svg2.appendChild(c);
   }
   btn.appendChild(svg2);
-  btn.appendChild(el("span", "ai-usage-ring-pct", hasLimit ? `${pct}%` : formatTokens(used)));
+  btn.appendChild(h("span", "ai-usage-ring-pct", hasLimit ? `${pct}%` : formatTokens(used)));
   let panel = null;
   const closePanel = () => {
     if (!panel) return;
@@ -506,10 +585,10 @@ function renderAiUsageRing(elm, usage, opts = {}) {
       closePanel();
       return;
     }
-    const p = el("div", "popover ai-usage-popover");
+    const p = h("div", "popover ai-usage-popover");
     p.hidden = true;
-    p.appendChild(el("div", "ai-usage-popover-title", opts.title ?? "\u4E0A\u4E0B\u6587\u7A97\u53E3"));
-    const body = el("div", "ai-usage-popover-body");
+    p.appendChild(h("div", "ai-usage-popover-title", opts.title ?? "\u4E0A\u4E0B\u6587\u7A97\u53E3"));
+    const body = h("div", "ai-usage-popover-body");
     renderAiUsage(body, usage, opts);
     p.appendChild(body);
     openPopover(p, {
@@ -523,7 +602,8 @@ function renderAiUsageRing(elm, usage, opts = {}) {
     });
     panel = p;
   });
-  elm.appendChild(btn);
+  el.appendChild(btn);
+  return el;
 }
 var svgWrap = (inner) => `<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">${inner}</svg>`;
 var FILE_OUTLINE = '<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"/>';
@@ -546,18 +626,18 @@ var ICON_SPARKLES = svgWrap(
 // src/behaviors/ai-chat.ts
 var ICON_COPY = '<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"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>';
 var ICON_RETRY = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>';
-function createAiStream(el3) {
-  const reasoning = el3.closest(".ai-reasoning");
+function createAiStream(el) {
+  const reasoning = el.closest(".ai-reasoning");
   const startedAt = Date.now();
   let state = "streaming";
-  el3.classList.add("is-streaming");
-  el3.setAttribute("aria-busy", "true");
+  el.classList.add("is-streaming");
+  el.setAttribute("aria-busy", "true");
   reasoning?.classList.add("is-streaming");
   const settle = (finished) => {
     if (state !== "streaming") return;
     state = finished ? "done" : "cancelled";
-    el3.classList.remove("is-streaming");
-    el3.removeAttribute("aria-busy");
+    el.classList.remove("is-streaming");
+    el.removeAttribute("aria-busy");
     if (!reasoning) return;
     reasoning.classList.remove("is-streaming");
     if (!finished) return;
@@ -571,7 +651,7 @@ function createAiStream(el3) {
   return {
     append(text) {
       if (state !== "streaming" || !text) return;
-      el3.textContent += text;
+      el.textContent += text;
     },
     done() {
       settle(true);
@@ -582,9 +662,9 @@ function createAiStream(el3) {
     fail() {
       if (state !== "streaming") return;
       state = "error";
-      el3.classList.remove("is-streaming");
-      el3.removeAttribute("aria-busy");
-      el3.classList.add("is-error");
+      el.classList.remove("is-streaming");
+      el.removeAttribute("aria-busy");
+      el.classList.add("is-error");
       reasoning?.classList.remove("is-streaming");
     }
   };
@@ -600,15 +680,9 @@ function safeHref(uri) {
   if (s.startsWith("javascript:") || s.startsWith("data:text/html")) return void 0;
   return uri;
 }
-function el2(tag, className, text) {
-  const node = document.createElement(tag);
-  if (className) node.className = className;
-  if (text != null) node.textContent = text;
-  return node;
-}
 function renderAiContentPart(part) {
   if (part.type === "text") {
-    const span = el2("span", "ai-msg-text");
+    const span = h("span", "ai-msg-text");
     span.textContent = part.text;
     if (part.state === "streaming") span.classList.add("is-streaming");
     return span;
@@ -643,8 +717,8 @@ function renderAiContentPart(part) {
     return video;
   }
   if (part.type === "file") {
-    const chip = el2("span", "ai-msg-file");
-    chip.appendChild(el2("span", "ai-msg-file-name", part.filename ?? "\u6587\u4EF6"));
+    const chip = h("span", "ai-msg-file");
+    chip.appendChild(h("span", "ai-msg-file-name", part.filename ?? "\u6587\u4EF6"));
     const href2 = part.url ? safeHref(part.url) : void 0;
     if (href2 && /^(https?:|data:)/i.test(href2)) {
       const a2 = document.createElement("a");
@@ -665,9 +739,18 @@ function renderAiContentPart(part) {
   return a;
 }
 function renderAiMessage(scrollEl, model) {
-  const row = el2("div", `ai-msg ai-msg--${model.role}`);
-  const avatar = el2("span", "ai-msg-avatar", ROLE_AVATAR[model.role] ?? "");
-  const body = el2("div", "ai-msg-body");
+  if (typeof document === "undefined") {
+    return {
+      el: scrollEl,
+      body: scrollEl,
+      setMeta: () => void 0,
+      setError: () => void 0,
+      stream: () => createAiStream(scrollEl)
+    };
+  }
+  const row = h("div", `ai-msg ai-msg--${model.role}`);
+  const avatar = h("span", "ai-msg-avatar", ROLE_AVATAR[model.role] ?? "");
+  const body = h("div", "ai-msg-body");
   row.appendChild(avatar);
   row.appendChild(body);
   const parts = typeof model.content === "string" ? [{ type: "text", text: model.content }] : model.content;
@@ -675,18 +758,18 @@ function renderAiMessage(scrollEl, model) {
     const node = renderAiContentPart(part);
     if (node) body.appendChild(node);
   }
-  if (model.model) body.appendChild(el2("span", "ai-msg-model", model.model));
-  const metaEl = el2("div", "ai-msg-meta");
+  if (model.model) body.appendChild(h("span", "ai-msg-model", model.model));
+  const metaEl = h("div", "ai-msg-meta");
   if (model.meta != null) metaEl.textContent = model.meta;
   row.appendChild(metaEl);
-  const actions = el2("div", "ai-msg-actions");
-  const copyBtn = el2("button", "ai-msg-action");
+  const actions = h("div", "ai-msg-actions");
+  const copyBtn = h("button", "ai-msg-action");
   copyBtn.type = "button";
   copyBtn.setAttribute("data-ai-msg-action", "copy");
   copyBtn.setAttribute("aria-label", "\u590D\u5236");
   const copyIcon = svgIcon(ICON_COPY);
   if (copyIcon) copyBtn.appendChild(copyIcon);
-  const retryBtn = el2("button", "ai-msg-action");
+  const retryBtn = h("button", "ai-msg-action");
   retryBtn.type = "button";
   retryBtn.setAttribute("data-ai-msg-action", "retry");
   retryBtn.setAttribute("aria-label", "\u91CD\u8BD5");
@@ -704,13 +787,13 @@ function renderAiMessage(scrollEl, model) {
       row.classList.add("ai-msg--error");
       let errEl = row.querySelector(".ai-msg-error-text");
       if (!errEl) {
-        errEl = el2("div", "ai-msg-error-text");
+        errEl = h("div", "ai-msg-error-text");
         body.appendChild(errEl);
       }
       errEl.textContent = message;
     },
     stream() {
-      const span = el2("span", "ai-msg-stream-text");
+      const span = h("span", "ai-msg-stream-text");
       body.appendChild(span);
       return createAiStream(span);
     }
@@ -744,19 +827,35 @@ var ICON_DOC = svgWrap2(
 var ICON_BOT2 = svgWrap2(
   '<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 REF_KIND_LABEL = {
-  file: "\u6587\u4EF6",
-  folder: "\u6587\u4EF6\u5939",
-  doc: "\u6587\u6863",
-  agent: "\u4EE3\u7406"
-};
-var REF_KIND_ICON = {
-  file: ICON_FILE3,
-  folder: ICON_FOLDER,
-  doc: ICON_DOC,
-  agent: ICON_BOT2
+var REF_KIND_BUILTIN = {
+  file: { label: "\u6587\u4EF6", icon: ICON_FILE3, order: 0 },
+  folder: { label: "\u6587\u4EF6\u5939", icon: ICON_FOLDER, order: 1 },
+  doc: { label: "\u6587\u6863", icon: ICON_DOC, order: 2 },
+  agent: { label: "\u4EE3\u7406", icon: ICON_BOT2, order: 3 }
 };
-var REF_KIND_ORDER = ["file", "folder", "doc", "agent"];
+var REF_KIND_ORDER_LAST = Number.MAX_SAFE_INTEGER;
+var REF_KIND_REGISTRY = /* @__PURE__ */ new Map();
+function registerRefKind(kind, def) {
+  const key = kind.trim();
+  if (key) REF_KIND_REGISTRY.set(key, def);
+}
+function getRefKindDef(kind) {
+  const reg = REF_KIND_REGISTRY.get(kind);
+  const builtin = REF_KIND_BUILTIN[kind];
+  return {
+    label: reg?.label ?? builtin?.label ?? kind,
+    icon: reg?.icon ?? builtin?.icon ?? ICON_DOC,
+    order: reg && typeof reg.order === "number" && Number.isFinite(reg.order) ? reg.order : builtin?.order ?? REF_KIND_ORDER_LAST
+  };
+}
+function knownRefKinds(sources) {
+  const kinds = new Set(Object.keys(REF_KIND_BUILTIN));
+  for (const key of REF_KIND_REGISTRY.keys()) kinds.add(key);
+  for (const s of sources) {
+    if (typeof s?.kind === "string" && s.kind) kinds.add(s.kind);
+  }
+  return Array.from(kinds).sort((a, b) => getRefKindDef(a).order - getRefKindDef(b).order);
+}
 var RUNNING = /* @__PURE__ */ new WeakMap();
 var QUEUES = /* @__PURE__ */ new WeakMap();
 var MODELS = /* @__PURE__ */ new WeakMap();
@@ -765,18 +864,19 @@ var COMMANDS = /* @__PURE__ */ new WeakMap();
 var REF_SOURCES = /* @__PURE__ */ new WeakMap();
 var ACTIVE_REFS = /* @__PURE__ */ new WeakMap();
 var USAGE = /* @__PURE__ */ new WeakMap();
-var TODO = /* @__PURE__ */ new WeakMap();
+var TODO_STATES = /* @__PURE__ */ new WeakMap();
 var HISTORIES = /* @__PURE__ */ new WeakMap();
 var POPUP = /* @__PURE__ */ new WeakMap();
 var SUBMITS = /* @__PURE__ */ new WeakMap();
+var POPUP_SIZING = /* @__PURE__ */ new WeakMap();
 function isBrowser() {
   return typeof document !== "undefined" && typeof window !== "undefined";
 }
 function emit(target, name, detail) {
-  target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+  emitIcen(target, name, detail);
 }
-function resolveComposer(el3) {
-  return el3.closest("[data-ai-composer]");
+function resolveComposer(el) {
+  return el.closest("[data-ai-composer]");
 }
 function getTextarea(composer) {
   return composer.querySelector(".ai-composer-input");
@@ -841,8 +941,8 @@ function renderQueueChips(composer) {
   queueEl.replaceChildren(...queue.map((text, i) => makeChip(text, true, `\u79FB\u9664\u6392\u961F\u6D88\u606F ${i + 1}`)));
   queueEl.hidden = queue.length === 0;
 }
-function setComposerRunning(el3, running) {
-  const composer = resolveComposer(el3);
+function setComposerRunning(el, running) {
+  const composer = resolveComposer(el);
   if (!composer) return;
   RUNNING.set(composer, running);
   composer.classList.toggle("is-running", running);
@@ -1006,6 +1106,13 @@ function settlePopup(s) {
   s.emptyEl.hidden = visibleOptions(s).length > 0;
   setPopupFocus(s, 0);
 }
+function filterPopupOptions(s, q) {
+  const needle = q.trim().toLowerCase();
+  for (const opt of s.options) {
+    opt.hidden = needle !== "" && !(opt.dataset.hay ?? "").includes(needle);
+  }
+  settlePopup(s);
+}
 function popupKeydown(composer, s, e) {
   if (e.isComposing) return;
   switch (e.key) {
@@ -1045,13 +1152,16 @@ function closePopup(composer, restoreFocus = true) {
   }
   if (s.mode === "model") {
     composer.querySelector("[data-ai-model-open]")?.setAttribute("aria-expanded", "false");
-  }
-  if (s.mode !== "model") {
+  } else {
     getTextarea(composer)?.setAttribute("aria-expanded", "false");
   }
   closePopover(s.panel);
   if (restoreFocus && s.returnFocus && s.returnFocus.isConnected) s.returnFocus.focus();
 }
+function resolvePopupSizing(composer, defaults) {
+  const explicit = resolvePanelSizing(composer, POPUP_SIZING.get(composer));
+  return { ...defaults, ...explicit };
+}
 function mountPopup(composer, init) {
   closePopup(composer, false);
   const panel = document.createElement("div");
@@ -1076,9 +1186,7 @@ function mountPopup(composer, init) {
     side: "top",
     align: "start",
     offset: 8,
-    minWidth: init.minWidth,
-    maxWidth: init.maxWidth,
-    maxHeight: init.maxHeight,
+    sizing: resolvePopupSizing(composer, init.sizing),
     onClose: () => {
       if (POPUP.get(composer) === session) POPUP.delete(composer);
       panel.remove();
@@ -1101,6 +1209,16 @@ function mountPopup(composer, init) {
   });
   return session;
 }
+function appendPopupEmpty(s, text) {
+  s.emptyEl.className = "ai-composer-popup-empty";
+  s.emptyEl.textContent = text;
+  s.emptyEl.hidden = true;
+  s.panel.appendChild(s.emptyEl);
+}
+function popupSizingFor(box) {
+  const w = box.getBoundingClientRect().width;
+  return { minWidth: Math.min(Math.max(w, 200), 320), maxWidth: 360, maxHeight: 320 };
+}
 function openModelPopup(composer) {
   const cfg = MODELS.get(composer);
   if (!cfg) return;
@@ -1110,9 +1228,7 @@ function openModelPopup(composer) {
   const session = mountPopup(composer, {
     mode: "model",
     anchor,
-    minWidth: 220,
-    maxWidth: 320,
-    maxHeight: 340,
+    sizing: { minWidth: 220, maxWidth: 320, maxHeight: 340 },
     returnFocus: btn ?? ta,
     pick: (opt) => {
       const provider = opt.dataset.provider ?? "";
@@ -1164,6 +1280,7 @@ function openModelPopup(composer) {
           opt.dataset.providerLabel = p.label;
           opt.dataset.model = m.id;
           opt.dataset.label = m.label;
+          opt.dataset.hay = `${m.label} ${p.label}`.toLowerCase();
           if (typeof m.context === "number") opt.dataset.context = String(m.context);
           const selected = cfg.current.provider === p.id && cfg.current.model === m.id;
           opt.setAttribute("aria-selected", String(selected));
@@ -1188,10 +1305,7 @@ function openModelPopup(composer) {
         s.groups.push(group);
       }
       s.panel.appendChild(list);
-      s.emptyEl.className = "ai-composer-popup-empty";
-      s.emptyEl.textContent = "\u65E0\u5339\u914D\u6A21\u578B";
-      s.emptyEl.hidden = true;
-      s.panel.appendChild(s.emptyEl);
+      appendPopupEmpty(s, "\u65E0\u5339\u914D\u6A21\u578B");
       const foot = document.createElement("div");
       foot.className = "ai-composer-popup-foot";
       const usageCfg = USAGE.get(composer);
@@ -1211,12 +1325,7 @@ function openModelPopup(composer) {
       s.keydownHandler = (e) => popupKeydown(composer, s, e);
       input.addEventListener("keydown", s.keydownHandler);
       input.addEventListener("input", () => {
-        const q = input.value.trim().toLowerCase();
-        for (const opt of s.options) {
-          const hay = `${opt.dataset.label ?? ""} ${opt.dataset.providerLabel ?? ""}`.toLowerCase();
-          opt.hidden = q !== "" && !hay.includes(q);
-        }
-        settlePopup(s);
+        filterPopupOptions(s, input.value);
       });
     }
   });
@@ -1228,13 +1337,10 @@ function openCommandPopup(composer, token) {
   if (!commands || commands.length === 0) return;
   const box = composer.querySelector(".ai-composer-box") ?? composer;
   const ta = getTextarea(composer);
-  const boxRect = box.getBoundingClientRect();
   const session = mountPopup(composer, {
     mode: "command",
     anchor: box,
-    minWidth: Math.min(Math.max(boxRect.width, 200), 320),
-    maxWidth: 360,
-    maxHeight: 320,
+    sizing: popupSizingFor(box),
     returnFocus: ta,
     pick: (opt) => {
       const name = opt.dataset.name ?? "";
@@ -1286,25 +1392,15 @@ function openCommandPopup(composer, token) {
       list.appendChild(group);
       s.groups.push(group);
       s.panel.appendChild(list);
-      s.emptyEl.className = "ai-composer-popup-empty";
-      s.emptyEl.textContent = "\u65E0\u5339\u914D\u547D\u4EE4";
-      s.emptyEl.hidden = true;
-      s.panel.appendChild(s.emptyEl);
+      appendPopupEmpty(s, "\u65E0\u5339\u914D\u547D\u4EE4");
     }
   });
   ta?.setAttribute("aria-expanded", "true");
-  filterCommandOptions(session, token);
+  filterPopupOptions(session, token);
 }
 function commandToken(value) {
   return value.slice(1).split(/\s/, 1)[0] ?? "";
 }
-function filterCommandOptions(s, token) {
-  const q = token.trim().toLowerCase();
-  for (const opt of s.options) {
-    opt.hidden = q !== "" && !(opt.dataset.hay ?? "").includes(q);
-  }
-  settlePopup(s);
-}
 function updateCommandPopup(composer, s) {
   const ta = getTextarea(composer);
   const value = ta?.value ?? "";
@@ -1313,20 +1409,17 @@ function updateCommandPopup(composer, s) {
     maybeOpenTriggerPopups(composer);
     return;
   }
-  filterCommandOptions(s, commandToken(value));
+  filterPopupOptions(s, commandToken(value));
 }
 function openRefPopup(composer, range, filter) {
   const sources = REF_SOURCES.get(composer);
   if (!sources || sources.length === 0) return;
   const box = composer.querySelector(".ai-composer-box") ?? composer;
   const ta = getTextarea(composer);
-  const boxRect = box.getBoundingClientRect();
   const session = mountPopup(composer, {
     mode: "ref",
     anchor: box,
-    minWidth: Math.min(Math.max(boxRect.width, 200), 320),
-    maxWidth: 360,
-    maxHeight: 320,
+    sizing: popupSizingFor(box),
     returnFocus: ta,
     refRange: range,
     pick: (opt) => {
@@ -1349,7 +1442,8 @@ function openRefPopup(composer, range, filter) {
       list.className = "ai-composer-popup-list";
       list.setAttribute("role", "listbox");
       list.setAttribute("aria-label", "\u5F15\u7528");
-      for (const kind of REF_KIND_ORDER) {
+      for (const kind of knownRefKinds(sources)) {
+        const def = getRefKindDef(kind);
         const items = sources.filter((r) => r.kind === kind);
         if (items.length === 0) continue;
         const group = document.createElement("div");
@@ -1357,7 +1451,7 @@ function openRefPopup(composer, range, filter) {
         group.dataset.kind = kind;
         group.appendChild(Object.assign(document.createElement("div"), {
           className: "ai-composer-popup-group-label",
-          textContent: REF_KIND_LABEL[kind]
+          textContent: def.label
         }));
         for (const r of items) {
           const opt = document.createElement("button");
@@ -1368,7 +1462,7 @@ function openRefPopup(composer, range, filter) {
           opt.dataset.hay = `${r.label} ${r.sub ?? ""}`.toLowerCase();
           const icon = document.createElement("span");
           icon.className = "ai-composer-popup-option-icon";
-          const svg2 = svgIcon(REF_KIND_ICON[kind]);
+          const svg2 = svgIcon(def.icon);
           if (svg2) icon.appendChild(svg2);
           const label = document.createElement("span");
           label.className = "ai-composer-popup-option-label";
@@ -1387,21 +1481,11 @@ function openRefPopup(composer, range, filter) {
         s.groups.push(group);
       }
       s.panel.appendChild(list);
-      s.emptyEl.className = "ai-composer-popup-empty";
-      s.emptyEl.textContent = "\u65E0\u5339\u914D\u5F15\u7528";
-      s.emptyEl.hidden = true;
-      s.panel.appendChild(s.emptyEl);
+      appendPopupEmpty(s, "\u65E0\u5339\u914D\u5F15\u7528");
     }
   });
   ta?.setAttribute("aria-expanded", "true");
-  filterRefOptions(session, filter);
-}
-function filterRefOptions(s, filter) {
-  const q = filter.trim().toLowerCase();
-  for (const opt of s.options) {
-    opt.hidden = q !== "" && !(opt.dataset.hay ?? "").includes(q);
-  }
-  settlePopup(s);
+  filterPopupOptions(session, filter);
 }
 function updateRefPopup(composer, s) {
   const ta = getTextarea(composer);
@@ -1412,7 +1496,7 @@ function updateRefPopup(composer, s) {
     return;
   }
   s.refRange = { start: t.start, end: t.end };
-  filterRefOptions(s, t.filter);
+  filterPopupOptions(s, t.filter);
 }
 function findRefToken(ta) {
   const value = ta.value;
@@ -1492,21 +1576,21 @@ function removeActiveRef(composer, source) {
   emit(composer, "icen:ai-ref", { action: "remove", ref: source });
 }
 function pushHistory(composer, text) {
-  const h = HISTORIES.get(composer) ?? { items: [], index: -1 };
-  if (h.items[h.items.length - 1] !== text) {
-    h.items.push(text);
-    if (h.items.length > HISTORY_LIMIT) h.items.shift();
+  const h2 = HISTORIES.get(composer) ?? { items: [], index: -1 };
+  if (h2.items[h2.items.length - 1] !== text) {
+    h2.items.push(text);
+    if (h2.items.length > HISTORY_LIMIT) h2.items.shift();
   }
-  h.index = -1;
-  HISTORIES.set(composer, h);
+  h2.index = -1;
+  HISTORIES.set(composer, h2);
 }
 function setupComposer(composer) {
-  const el3 = composer;
-  if (el3.__icenAiComposerInit) return void 0;
-  el3.__icenAiComposerInit = true;
+  const el = composer;
+  if (el.__icenAiComposerInit) return void 0;
+  el.__icenAiComposerInit = true;
   const ta = getTextarea(composer);
   if (!ta) {
-    el3.__icenAiComposerInit = false;
+    el.__icenAiComposerInit = false;
     return void 0;
   }
   const queueEl = composer.querySelector(".ai-composer-queue");
@@ -1541,7 +1625,7 @@ function setupComposer(composer) {
     const queue = QUEUES.get(composer) ?? [];
     if (queue.length === 0) return;
     const index = queue.length - 1;
-    const text = queue.pop();
+    const text = queue.pop() ?? "";
     QUEUES.set(composer, queue);
     renderQueue();
     ta.value = text;
@@ -1549,20 +1633,20 @@ function setupComposer(composer) {
     emit(composer, "icen:ai-dequeue", { index });
   };
   const browseHistory = (delta) => {
-    const h = HISTORIES.get(composer);
-    if (!h || h.items.length === 0) return;
+    const h2 = HISTORIES.get(composer);
+    if (!h2 || h2.items.length === 0) return;
     if (delta === -1) {
-      h.index = h.index === -1 ? h.items.length - 1 : Math.max(0, h.index - 1);
+      h2.index = h2.index === -1 ? h2.items.length - 1 : Math.max(0, h2.index - 1);
     } else {
-      h.index += 1;
-      if (h.index >= h.items.length) {
-        h.index = -1;
+      h2.index += 1;
+      if (h2.index >= h2.items.length) {
+        h2.index = -1;
         ta.value = "";
         autosizeTa(ta);
         return;
       }
     }
-    ta.value = h.items[h.index];
+    ta.value = h2.items[h2.index] ?? "";
     autosizeTa(ta);
   };
   const onKeydown = (e) => {
@@ -1578,15 +1662,15 @@ function setupComposer(composer) {
       return;
     }
     if (e.key === "ArrowUp") {
-      const h = HISTORIES.get(composer);
-      const browsing = (h?.index ?? -1) >= 0;
+      const h2 = HISTORIES.get(composer);
+      const browsing = (h2?.index ?? -1) >= 0;
       if (ta.value === "") {
         if (isRunning() && (QUEUES.get(composer) ?? []).length > 0) {
           e.preventDefault();
           takeBackLastQueued();
           return;
         }
-        if (h && h.items.length > 0) {
+        if (h2 && h2.items.length > 0) {
           e.preventDefault();
           browseHistory(-1);
         }
@@ -1597,8 +1681,8 @@ function setupComposer(composer) {
       return;
     }
     if (e.key === "ArrowDown") {
-      const h = HISTORIES.get(composer);
-      if (h && h.index >= 0) {
+      const h2 = HISTORIES.get(composer);
+      if (h2 && h2.index >= 0) {
         e.preventDefault();
         browseHistory(1);
       }
@@ -1606,8 +1690,8 @@ function setupComposer(composer) {
   };
   const onInput = () => {
     autosizeTa(ta);
-    const h = HISTORIES.get(composer);
-    if (h && h.index >= 0 && ta.value !== h.items[h.index]) h.index = -1;
+    const h2 = HISTORIES.get(composer);
+    if (h2 && h2.index >= 0 && ta.value !== h2.items[h2.index]) h2.index = -1;
     const session = POPUP.get(composer);
     if (session) {
       if (session.mode === "command") updateCommandPopup(composer, session);
@@ -1735,7 +1819,7 @@ function setupComposer(composer) {
     composer.querySelector("[data-ai-attach]")?.removeEventListener("click", onAttachClick);
     fileInput.removeEventListener("change", onFileChange);
     fileInput.remove();
-    el3.__icenAiComposerInit = false;
+    el.__icenAiComposerInit = false;
   };
 }
 function initAiComposer(root) {
@@ -1757,9 +1841,9 @@ function initAiComposer(root) {
     cleanups.length = 0;
   };
 }
-function setComposerModels(el3, providers, current) {
+function setComposerModels(el, providers, current) {
   if (!isBrowser()) return;
-  const composer = resolveComposer(el3);
+  const composer = resolveComposer(el);
   if (!composer) return;
   const list = (Array.isArray(providers) ? providers : []).filter(
     (p) => p && Array.isArray(p.models) && p.models.length > 0
@@ -1786,9 +1870,9 @@ function setComposerModels(el3, providers, current) {
   updateModelButton(composer);
   refreshUsageRing(composer);
 }
-function setComposerCommands(el3, commands) {
+function setComposerCommands(el, commands) {
   if (!isBrowser()) return;
-  const composer = resolveComposer(el3);
+  const composer = resolveComposer(el);
   if (!composer) return;
   const list = (Array.isArray(commands) ? commands : []).filter((c) => c && typeof c.name === "string" && c.name);
   if (list.length === 0) {
@@ -1799,9 +1883,9 @@ function setComposerCommands(el3, commands) {
   }
   COMMANDS.set(composer, list);
 }
-function setComposerRefs(el3, sources) {
+function setComposerRefs(el, sources) {
   if (!isBrowser()) return;
-  const composer = resolveComposer(el3);
+  const composer = resolveComposer(el);
   if (!composer) return;
   const list = (Array.isArray(sources) ? sources : []).filter((s) => s && typeof s.label === "string" && s.label);
   REF_SOURCES.set(composer, list);
@@ -1812,9 +1896,9 @@ function setComposerRefs(el3, sources) {
   ensureRefsRow(composer);
   renderRefs(composer);
 }
-function setComposerUsage(el3, usage, opts = {}) {
+function setComposerUsage(el, usage, opts = {}) {
   if (!isBrowser()) return;
-  const composer = resolveComposer(el3);
+  const composer = resolveComposer(el);
   if (!composer) return;
   if (!usage) {
     USAGE.delete(composer);
@@ -1827,24 +1911,24 @@ function setComposerUsage(el3, usage, opts = {}) {
   syncToolbar(composer);
   refreshUsageRing(composer);
 }
-function setComposerTodo(el3, items) {
+function setComposerTodo(el, items) {
   if (!isBrowser()) return;
-  const composer = resolveComposer(el3);
+  const composer = resolveComposer(el);
   if (!composer) return;
   let chip = composer.querySelector(".ai-composer-todo");
   if (!items || items.length === 0) {
-    TODO.delete(composer);
+    TODO_STATES.delete(composer);
     chip?.remove();
     return;
   }
-  TODO.set(composer, items);
+  TODO_STATES.set(composer, items);
   if (!chip) {
-    chip = document.createElement("button");
-    chip.type = "button";
-    chip.className = "ai-composer-todo";
-    chip.setAttribute("aria-haspopup", "true");
-    chip.addEventListener("click", () => {
-      const cur = TODO.get(composer);
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "ai-composer-todo";
+    btn.setAttribute("aria-haspopup", "true");
+    btn.addEventListener("click", () => {
+      const cur = TODO_STATES.get(composer);
       if (!cur) return;
       const p = document.createElement("div");
       p.className = "popover ai-composer-todo-pop";
@@ -1857,12 +1941,13 @@ function setComposerTodo(el3, items) {
       renderAiTodo(body, cur);
       p.append(title, body);
       openPopover(p, {
-        anchor: chip,
+        anchor: btn,
         side: "top",
         align: "end",
         onClose: () => p.remove()
       });
     });
+    chip = btn;
     const icon = svgIcon(
       '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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"/></svg>'
     );
@@ -1885,21 +1970,14 @@ function setComposerTodo(el3, items) {
   if (label) label.textContent = `${done}/${items.length}`;
 }
 var BOUND = /* @__PURE__ */ new WeakSet();
-var USAGE_KEYS = ["input", "output", "cacheRead", "cacheWrite", "reasoning", "total"];
-function accumulateUsage(acc, add) {
-  if (!add) return;
-  for (const k of USAGE_KEYS) {
-    const v = add[k];
-    if (typeof v === "number" && Number.isFinite(v)) acc[k] = (acc[k] ?? 0) + v;
-  }
-}
-function bindComposer(el3, opts = {}) {
+function bindComposer(el, opts = {}) {
   const noop = () => void 0;
   if (!isBrowser()) return { unbind: noop };
-  const composer = resolveComposer(el3);
+  const composer = resolveComposer(el);
   if (!composer) return { unbind: noop };
   if (BOUND.has(composer)) return { unbind: noop };
   BOUND.add(composer);
+  if (opts.popoverSizing) POPUP_SIZING.set(composer, opts.popoverSizing);
   const disposers = [];
   const usageCfg = opts.usage;
   const manageRunning = opts.running ?? true;
@@ -1922,7 +2000,7 @@ function bindComposer(el3, opts = {}) {
           total: contextEstimate(u)
         };
       } else if (usageCfg.from === "billing") {
-        accumulateUsage(billing, detail.usage);
+        billing = addUsage(billing, detail.usage);
         usage = billing;
       } else {
         usage = usageCfg.from.summary();
@@ -1935,6 +2013,9 @@ function bindComposer(el3, opts = {}) {
     document.addEventListener("icen:ai-done", onDone);
     disposers.push(() => document.removeEventListener("icen:ai-done", onDone));
   }
+  if (opts.client && !opts.messages) {
+    console.warn("[ai-composer] client \u6A21\u5F0F\u9700\u8981 opts.messages\uFF0C\u5DF2\u964D\u7EA7\u4E3A\u7EAF\u72B6\u6001\u7ED1\u5B9A");
+  }
   if (opts.client && opts.messages) {
     const client = opts.client;
     const messages = opts.messages;
@@ -1975,7 +2056,7 @@ function bindComposer(el3, opts = {}) {
         setComposerRunning(composer, false);
         const queue = QUEUES.get(composer) ?? [];
         if (queue.length > 0) {
-          const next = queue.shift();
+          const next = queue.shift() ?? "";
           QUEUES.set(composer, queue);
           renderQueueChips(composer);
           emit(composer, "icen:ai-dequeue", { index: 0 });
@@ -2023,6 +2104,7 @@ function bindComposer(el3, opts = {}) {
 export {
   bindComposer,
   initAiComposer,
+  registerRefKind,
   setComposerCommands,
   setComposerModels,
   setComposerRefs,