one-design-next 0.0.12 → 0.0.13

package/dist/composer/hooks/useChipManager.js

@@ -23,21 +23,37 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  */
 
 import { useCallback, useRef, useState } from 'react';
+import { forEachMarkerSegment } from "../utils";
 
 /** chip 在 React 状态中的形态：data + 对应的 DOM host。 */
 
+function createChipHost(data) {
+  var host = document.createElement('span');
+  host.dataset.mentionId = data.id;
+  host.contentEditable = 'false';
+  host.setAttribute('data-odn-composer-chip-host', '');
+  return host;
+}
 export function useChipManager( /** 每次 chip mutation 后调用，给上层（editor）一个抛 onChange 的钩子。 */
 onAfterMutate) {
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     chips = _useState2[0],
     setChips = _useState2[1];
-
-  /** ref 镜像：命令式 API 调用 setState 之后立即再用列表时拿不到最新值，用 ref 兜底。 */
   var chipsRef = useRef(chips);
   chipsRef.current = chips;
+  var insertChipAtRange = useCallback(function (data, range, _editor) {
+    var host = createChipHost(data);
+    range.insertNode(host);
+    var next = [].concat(_toConsumableArray(chipsRef.current), [{
+      data: data,
+      host: host
+    }]);
+    chipsRef.current = next;
+    setChips(next);
+    return host;
+  }, []);
   var insertChip = useCallback(function (data, editor) {
-    // ── 定位插入点 ────────────────────────────────
     var sel = window.getSelection();
     var range = null;
     if (sel && sel.rangeCount > 0 && editor.contains(sel.anchorNode)) {
@@ -47,41 +63,70 @@ onAfterMutate) {
       editor.focus();
       range = document.createRange();
       range.selectNodeContents(editor);
-      range.collapse(false); // 末尾
+      range.collapse(false);
       sel = window.getSelection();
       (_sel = sel) === null || _sel === void 0 || _sel.removeAllRanges();
       (_sel2 = sel) === null || _sel2 === void 0 || _sel2.addRange(range);
     }
     if (!range || !sel) return;
     range.deleteContents();
-
-    // ── 创建 host span（contenteditable=false，承载 data-mention-id） ──
-    // 不在 chip 后塞 ZWSP 锚点：浏览器原生把 contentEditable=false 当原子块，
-    // Backspace / 方向键已经能正确跨越；多塞一个 ZWSP 反而会撑出多个等价
-    // caret 位置，导致「字母和 chip 之间卡一下」的体验问题。
-    var host = document.createElement('span');
-    host.dataset.mentionId = data.id;
-    host.contentEditable = 'false';
-    host.setAttribute('data-odn-composer-chip-host', '');
-    range.insertNode(host);
-
-    // 光标 → chip 之后；用户继续输入时浏览器会自动建/接续邻接 text node
+    var host = insertChipAtRange(data, range, editor);
     var newRange = document.createRange();
     newRange.setStartAfter(host);
     newRange.collapse(true);
     sel.removeAllRanges();
     sel.addRange(newRange);
-    var next = [].concat(_toConsumableArray(chipsRef.current), [{
-      data: data,
-      host: host
-    }]);
-    setChips(next);
-
-    // 防御 Portal 渲染过程中浏览器把光标弹回 chip 之前的边界
     requestAnimationFrame(function () {
       return editor.focus();
     });
     onAfterMutate === null || onAfterMutate === void 0 || onAfterMutate();
+  }, [insertChipAtRange, onAfterMutate]);
+  var insertSerializedAtRange = useCallback(function (value, chipList, range, editor) {
+    var chipById = new Map(chipList.map(function (c) {
+      return [c.id, c];
+    }));
+    var frag = document.createDocumentFragment();
+    var inserted = [];
+    forEachMarkerSegment(value, function (seg) {
+      if (seg.type === 'text') {
+        if (seg.text) frag.appendChild(document.createTextNode(seg.text));
+        return;
+      }
+      var data = chipById.get(seg.id);
+      if (!data) return;
+      var host = createChipHost(data);
+      frag.appendChild(host);
+      inserted.push({
+        data: data,
+        host: host
+      });
+    });
+    range.insertNode(frag);
+    range.collapse(false);
+    if (inserted.length > 0) {
+      var next = [].concat(_toConsumableArray(chipsRef.current), inserted);
+      chipsRef.current = next;
+      setChips(next);
+    }
+    var sel = window.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+    requestAnimationFrame(function () {
+      return editor.focus();
+    });
+    onAfterMutate === null || onAfterMutate === void 0 || onAfterMutate();
+  }, [onAfterMutate]);
+  var syncChipsAfterDomMutation = useCallback(function (editor) {
+    var next = chipsRef.current.filter(function (c) {
+      return c.host.isConnected && editor.contains(c.host);
+    });
+    if (next.length !== chipsRef.current.length) {
+      chipsRef.current = next;
+      setChips(next);
+      onAfterMutate === null || onAfterMutate === void 0 || onAfterMutate();
+    }
   }, [onAfterMutate]);
   var removeChip = useCallback(function (id) {
     var target = chipsRef.current.find(function (c) {
@@ -89,19 +134,23 @@ onAfterMutate) {
     });
     if (!target) return;
     target.host.remove();
-    setChips(chipsRef.current.filter(function (c) {
+    var next = chipsRef.current.filter(function (c) {
       return c.data.id !== id;
-    }));
+    });
+    chipsRef.current = next;
+    setChips(next);
     onAfterMutate === null || onAfterMutate === void 0 || onAfterMutate();
   }, [onAfterMutate]);
   var resetChips = useCallback(function () {
     setChips([]);
-    // 不调 onAfterMutate —— resetChips 通常和 editor.innerHTML='' 配套，
-    // 由调用方统一抛一次 onChange 即可。
+    chipsRef.current = [];
   }, []);
   return {
     chips: chips,
     insertChip: insertChip,
+    insertChipAtRange: insertChipAtRange,
+    insertSerializedAtRange: insertSerializedAtRange,
+    syncChipsAfterDomMutation: syncChipsAfterDomMutation,
     removeChip: removeChip,
     resetChips: resetChips
   };

package/dist/composer/hooks/useChipSelectionMarker.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+import type { ManagedChip } from './useChipManager';
+/**
+ * chip host 在原生 selection 下无高亮（contentEditable=false + user-select:none），
+ * 用 data-selected 自绘与浏览器 selection 一致的浅灰底。
+ */
+export declare function useChipSelectionMarker(editorRef: RefObject<HTMLElement | null>, chips: ManagedChip[]): void;

package/dist/composer/hooks/useChipSelectionMarker.js

@@ -0,0 +1,66 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { useEffect, useRef } from 'react';
+/**
+ * chip host 在原生 selection 下无高亮（contentEditable=false + user-select:none），
+ * 用 data-selected 自绘与浏览器 selection 一致的浅灰底。
+ */
+export function useChipSelectionMarker(editorRef, chips) {
+  var chipsRef = useRef(chips);
+  chipsRef.current = chips;
+  useEffect(function () {
+    var clearSelected = function clearSelected() {
+      var _iterator = _createForOfIteratorHelper(chipsRef.current),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var chip = _step.value;
+          chip.host.removeAttribute('data-selected');
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    };
+    var handler = function handler() {
+      var editor = editorRef.current;
+      if (!editor) {
+        clearSelected();
+        return;
+      }
+      var sel = window.getSelection();
+      if (!sel || sel.rangeCount === 0) {
+        clearSelected();
+        return;
+      }
+      var range = sel.getRangeAt(0);
+      if (range.collapsed || !editor.contains(range.commonAncestorContainer)) {
+        clearSelected();
+        return;
+      }
+      var _iterator2 = _createForOfIteratorHelper(chipsRef.current),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var chip = _step2.value;
+          if (range.intersectsNode(chip.host)) {
+            chip.host.setAttribute('data-selected', '');
+          } else {
+            chip.host.removeAttribute('data-selected');
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    };
+    document.addEventListener('selectionchange', handler);
+    return function () {
+      document.removeEventListener('selectionchange', handler);
+      clearSelected();
+    };
+  }, [editorRef]);
+}

package/dist/composer/index.js

@@ -13,12 +13,14 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
 import HoverFill from "../hover-fill";
 import Icon from "../icon";
+import Image from "../image";
 import Popover from "../popover";
 import Attachments from "../attachments";
 import { Message } from "../message";
 import SkillSlot from "../skill-slot";
 import useControlledState from "../_util/useControlledState";
 import { ComposerEditor } from "./editor";
+import { buildSendMetaFromChips } from "./send-meta";
 import { stripMarkers } from "./utils";
 import "./style";
 var TOOL_BTN_ACTIVE = 'color-mix(in srgb, var(--odn-color-cyan-5) 10%, transparent)';
@@ -139,7 +141,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
           skillId: skill.id,
           label: skill.label,
           icon: skill.icon,
-          kind: 'skill'
+          kind: 'invocation'
         };
         (_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 || _editorRef$current4.insertChip(data);
         (_editorRef$current5 = editorRef.current) === null || _editorRef$current5 === void 0 || _editorRef$current5.focus();
@@ -210,20 +212,26 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
   /* ---- Send ----
    * 内部 text 是 raw value（chip 序列化为不可见 marker 字符）。对外 onSend：
    * - text 给 stripMarkers 之后的纯文本（旧业务收到的字符串保持纯净）
-   * - chips 从 editor.getChips() 拿，按 DOM 顺序，业务方按 kind 自行分类
-   *   （BREAKING from v0.0.x：取代 meta.skill 单值字段） */
+   * - invocations / mentions 从 editor.getChips() 经 buildSendMetaFromChips 拆分；
+   *   chips 仍双写（deprecated）
+   *
+   * 发送后内部状态全部清空：text、attachments、webSearch——与 ChatGPT / Claude /
+   * iMessage 等业界对话产品一致。attachments 不 revoke blob URL：业务方在 onSend
+   * 回调里可能仍持有 url（消息记录、本地预览等），由消费方负责回收。 */
   var handleSend = useCallback(function () {
-    var _editorRef$current$ge, _editorRef$current7;
+    var _editorRef$current$ge, _editorRef$current7, _editorRef$current8;
     if (disabled) return;
     var plain = stripMarkers(text).trim();
     if (!plain && attachments.length === 0) return;
     var chips = (_editorRef$current$ge = (_editorRef$current7 = editorRef.current) === null || _editorRef$current7 === void 0 ? void 0 : _editorRef$current7.getChips()) !== null && _editorRef$current$ge !== void 0 ? _editorRef$current$ge : [];
-    var meta = {
+    var meta = buildSendMetaFromChips(chips, {
       attachments: attachments.length > 0 ? attachments : undefined,
-      webSearch: webSearch || undefined,
-      chips: chips.length > 0 ? chips : undefined
-    };
+      webSearch: webSearch || undefined
+    });
     onSend(plain, meta);
+    (_editorRef$current8 = editorRef.current) === null || _editorRef$current8 === void 0 || _editorRef$current8.clear();
+    setAttachments([]);
+    setWebSearch(false);
   }, [text, attachments, webSearch, onSend]);
 
   /* ---- File upload ----
@@ -349,17 +357,17 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
       skillId: skill.id,
       label: skill.label,
       icon: skill.icon,
-      kind: 'skill'
+      kind: 'invocation'
     };
     if (source === 'trigger') {
-      var _editorRef$current8;
-      (_editorRef$current8 = editorRef.current) === null || _editorRef$current8 === void 0 || _editorRef$current8.replaceTriggerWithChip(data);
+      var _editorRef$current9;
+      (_editorRef$current9 = editorRef.current) === null || _editorRef$current9 === void 0 || _editorRef$current9.replaceTriggerWithChip(data);
       setTriggerInfo(null);
     } else {
-      var _editorRef$current9, _editorRef$current10;
-      (_editorRef$current9 = editorRef.current) === null || _editorRef$current9 === void 0 || _editorRef$current9.insertChip(data);
+      var _editorRef$current10, _editorRef$current11;
+      (_editorRef$current10 = editorRef.current) === null || _editorRef$current10 === void 0 || _editorRef$current10.insertChip(data);
       setToolMenuOpen(false);
-      (_editorRef$current10 = editorRef.current) === null || _editorRef$current10 === void 0 || _editorRef$current10.focus();
+      (_editorRef$current11 = editorRef.current) === null || _editorRef$current11 === void 0 || _editorRef$current11.focus();
     }
   }, []);
 
@@ -409,9 +417,9 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
       return true;
     }
     if (e.key === 'Escape') {
-      var _editorRef$current11;
+      var _editorRef$current12;
       e.preventDefault();
-      (_editorRef$current11 = editorRef.current) === null || _editorRef$current11 === void 0 || _editorRef$current11.cancelTrigger();
+      (_editorRef$current12 = editorRef.current) === null || _editorRef$current12 === void 0 || _editorRef$current12.cancelTrigger();
       setTriggerInfo(null);
       return true;
     }
@@ -551,23 +559,56 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
   var hasTools = toolNodes.length > 0;
 
   /* ---- Slots ----
-   * 删除：按 internalBlobUrlsRef 判断是否需要 revoke，避免误 revoke 业务方的云端 url；
-   * 同时派发 onAttachmentRemove（语义钩子，便于业务调"服务端删文件"）与 onAttachmentsChange。 */
+   * 待发送区按 type 分流：
+   *  - 图片（image/* + url）→ Image leaf + 72×72 cover wrap，输入态用模板
+   *    驱动尺寸（整齐划一比保留长宽比要紧）
+   *  - 其他附件 → 走 Attachments，保持原 file-card 渲染
+   *
+   * 删除：按 internalBlobUrlsRef 判断是否需要 revoke，避免误 revoke 业务方
+   * 的云端 url；同时派发 onAttachmentRemove（语义钩子，便于业务调"服务端
+   * 删文件"）与 onAttachmentsChange。
+   *
+   * 分流子集与原 attachments 的 index 不一致，对外回调（onAttachmentRemove）
+   * 用 attachments.indexOf 拿到原始 index，保持业务方语义。 */
+  var isImageAttachment = function isImageAttachment(a) {
+    return a.type.startsWith('image/') && !!a.url;
+  };
+  var composerImages = attachments.filter(isImageAttachment);
+  var composerFiles = attachments.filter(function (a) {
+    return !isImageAttachment(a);
+  });
+  var removeAttachmentAt = function removeAttachmentAt(i) {
+    var removed = attachments[i];
+    if (removed !== null && removed !== void 0 && removed.url && internalBlobUrlsRef.current.has(removed.url)) {
+      URL.revokeObjectURL(removed.url);
+      internalBlobUrlsRef.current.delete(removed.url);
+    }
+    var next = attachments.filter(function (_, idx) {
+      return idx !== i;
+    });
+    if (removed) onAttachmentRemove === null || onAttachmentRemove === void 0 || onAttachmentRemove(i, removed);
+    updateAttachments(next);
+  };
   var attachmentsSlot = attachments.length > 0 ? /*#__PURE__*/React.createElement("div", {
     "data-odn-composer-attachments": true
-  }, /*#__PURE__*/React.createElement(Attachments, {
-    attachments: attachments,
-    onRemove: function onRemove(i) {
-      var removed = attachments[i];
-      if (removed !== null && removed !== void 0 && removed.url && internalBlobUrlsRef.current.has(removed.url)) {
-        URL.revokeObjectURL(removed.url);
-        internalBlobUrlsRef.current.delete(removed.url);
+  }, composerImages.length > 0 && /*#__PURE__*/React.createElement("div", {
+    "data-odn-composer-images": true
+  }, composerImages.map(function (img) {
+    var realIdx = attachments.indexOf(img);
+    return /*#__PURE__*/React.createElement("div", {
+      key: "".concat(img.name, "-").concat(realIdx),
+      "data-odn-composer-image-thumb": true
+    }, /*#__PURE__*/React.createElement(Image, {
+      url: img.url,
+      alt: img.name,
+      onRemove: function onRemove() {
+        return removeAttachmentAt(realIdx);
       }
-      var next = attachments.filter(function (_, idx) {
-        return idx !== i;
-      });
-      if (removed) onAttachmentRemove === null || onAttachmentRemove === void 0 || onAttachmentRemove(i, removed);
-      updateAttachments(next);
+    }));
+  })), composerFiles.length > 0 && /*#__PURE__*/React.createElement(Attachments, {
+    attachments: composerFiles,
+    onRemove: function onRemove(i) {
+      return removeAttachmentAt(attachments.indexOf(composerFiles[i]));
     }
   })) : null;
 
@@ -664,8 +705,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     visible: triggerMenuVisible,
     onVisibleChange: function onVisibleChange(v) {
       if (!v) {
-        var _editorRef$current12;
-        (_editorRef$current12 = editorRef.current) === null || _editorRef$current12 === void 0 || _editorRef$current12.cancelTrigger();
+        var _editorRef$current13;
+        (_editorRef$current13 = editorRef.current) === null || _editorRef$current13 === void 0 || _editorRef$current13.cancelTrigger();
         setTriggerInfo(null);
       }
     },

package/dist/composer/inline-ref.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ChipData } from './chip';
+export declare function isMentionChip(chip: ChipData): boolean;
+export interface ComposerInlineRefProps {
+    data: ChipData;
+}
+/** Composer 内联引用视觉：按 kind 派发 Invocation（/）或 Mention（@）。 */
+export declare function ComposerInlineRef({ data }: ComposerInlineRefProps): import("react").JSX.Element;
+export default ComposerInlineRef;

package/dist/composer/inline-ref.js

@@ -0,0 +1,21 @@
+import { Invocation } from "../invocation";
+import { Mention } from "../mention";
+import { chipToInvocationData, chipToMentionData } from "./send-meta";
+export function isMentionChip(chip) {
+  return chip.kind === 'mention';
+}
+/** Composer 内联引用视觉：按 kind 派发 Invocation（/）或 Mention（@）。 */
+export function ComposerInlineRef(_ref) {
+  var data = _ref.data;
+  if (isMentionChip(data)) {
+    return /*#__PURE__*/React.createElement(Mention, {
+      data: chipToMentionData(data),
+      interactive: true
+    });
+  }
+  return /*#__PURE__*/React.createElement(Invocation, {
+    data: chipToInvocationData(data),
+    interactive: true
+  });
+}
+export default ComposerInlineRef;

package/dist/composer/send-meta.d.ts

@@ -0,0 +1,6 @@
+import type { InvocationData, MentionData, SendMeta } from '../_genui-types';
+import type { ChipData } from './chip';
+export declare function chipToInvocationData(chip: ChipData): InvocationData;
+export declare function chipToMentionData(chip: ChipData): MentionData;
+/** 从 editor chip 列表构建 SendMeta（含 invocations / mentions + chips 兼容字段）。 */
+export declare function buildSendMetaFromChips(chips: ChipData[], base?: Omit<SendMeta, 'chips' | 'invocations' | 'mentions'>): SendMeta;

package/dist/composer/send-meta.js

@@ -0,0 +1,67 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+export function chipToInvocationData(chip) {
+  var kind = chip.kind === 'skill' || chip.kind === 'invocation' || !chip.kind ? 'skill' : chip.kind;
+  return {
+    id: chip.id,
+    kind: kind,
+    refId: chip.skillId,
+    label: chip.label,
+    icon: chip.icon
+  };
+}
+export function chipToMentionData(chip) {
+  var _chip$kind;
+  return {
+    id: chip.id,
+    kind: (_chip$kind = chip.kind) !== null && _chip$kind !== void 0 ? _chip$kind : 'mention',
+    refId: chip.skillId,
+    label: chip.label,
+    icon: chip.icon
+  };
+}
+function chipToLegacyMeta(chip) {
+  var kind = chip.kind === 'mention' ? 'mention' : chip.kind === 'invocation' || chip.kind === 'skill' || !chip.kind ? 'skill' : chip.kind;
+  return {
+    id: chip.id,
+    skillId: chip.skillId,
+    label: chip.label,
+    icon: chip.icon,
+    kind: kind
+  };
+}
+
+/** 从 editor chip 列表构建 SendMeta（含 invocations / mentions + chips 兼容字段）。 */
+export function buildSendMetaFromChips(chips) {
+  var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var invocations = [];
+  var mentions = [];
+  var _iterator = _createForOfIteratorHelper(chips),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var chip = _step.value;
+      if (chip.kind === 'mention') {
+        mentions.push(chipToMentionData(chip));
+      } else {
+        invocations.push(chipToInvocationData(chip));
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return _objectSpread(_objectSpread({}, base), {}, {
+    invocations: invocations.length > 0 ? invocations : undefined,
+    mentions: mentions.length > 0 ? mentions : undefined,
+    chips: chips.length > 0 ? chips.map(chipToLegacyMeta) : undefined
+  });
+}

package/dist/composer/style/index.css

@@ -219,63 +219,18 @@
   white-space: nowrap;
 }
 
-/* chip 视觉：与 demo 临时 CSS 一致，正式归位到 composer 命名空间 */
+/* 内联引用 host：Portal 注入 Invocation / Mention，视觉由组件自带样式承担 */
 [data-odn-composer] [data-odn-composer-chip-host] {
-  display: inline-flex;
+  display: inline;
   vertical-align: baseline;
 }
 
-[data-odn-composer] [data-odn-composer-chip] {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 6px 0 4px;
-  margin: 0 3px;
-  height: 22px;
-  border-radius: 4px;
-  background: color-mix(in srgb, var(--odn-color-cyan-5) 12%, transparent);
-  color: var(--odn-color-cyan-5);
-  font-size: 13px;
-  line-height: 1;
-  font-weight: 500;
-  cursor: default;
-  user-select: none;
-  vertical-align: -3px;
-}
-
-[data-odn-composer] [data-odn-composer-chip-icon],
-[data-odn-composer] [data-odn-composer-chip-remove] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-}
-
-[data-odn-composer] [data-odn-composer-chip-remove] {
-  border: none;
-  background: transparent;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border-radius: 3px;
-  display: none;
-}
-
-[data-odn-composer] [data-odn-composer-chip-icon] {
-  display: inline-flex;
-}
-
-[data-odn-composer] [data-odn-composer-chip]:hover [data-odn-composer-chip-icon] {
-  display: none;
-}
-
-[data-odn-composer] [data-odn-composer-chip]:hover [data-odn-composer-chip-remove] {
-  display: inline-flex;
-}
-
-[data-odn-composer] [data-odn-composer-chip-remove]:hover {
-  background: color-mix(in srgb, var(--odn-color-cyan-5) 18%, transparent);
+/* chip 在 contentEditable=false 下无原生 selection 高亮，自绘选中态 */
+[data-odn-composer] [data-odn-composer-chip-host][data-selected] [data-odn-invocation],
+[data-odn-composer] [data-odn-composer-chip-host][data-selected] [data-odn-mention] {
+  background: color-mix(in srgb, var(--odn-color-solid-black-12) 12%, transparent);
+  border-radius: 0;
+  transition: none;
 }
 
 [data-odn-composer-toolbar] {
@@ -426,4 +381,35 @@ p[data-odn-composer-hint] {
   text-align: center;
   pointer-events: none;
   user-select: none;
+}
+
+/* ------------------------------------------------------------------
+ * 待发送区图片缩略
+ *   待发送态用模板驱动尺寸（72×72 cover），与 MessageImage 消息态的
+ *   数据驱动尺寸（单图 max 280×360 contain）形成对比：
+ *     - 输入态用户聚焦于"我加了哪些"，整齐划一比保留长宽比要紧
+ *     - 模板尺寸还能让多图横排清爽不参差
+ *   通过给 Image leaf 容器套尺寸 + 内部 img 用 cover 实现。
+ * ----------------------------------------------------------------- */
+[data-odn-composer-images] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+[data-odn-composer-image-thumb] {
+  width: 72px;
+  height: 72px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+[data-odn-composer-image-thumb] [data-odn-image] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+[data-odn-composer-image-thumb] [data-odn-image] img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }

package/dist/composer/utils.d.ts

@@ -13,6 +13,7 @@
 export declare const ZWSP = "\u200B";
 /** Invisible Separator (U+2063)：包裹 marker 的 id，业务文本不会出现。 */
 export declare const SEP = "\u2063";
+export declare function stripInvisibleChars(s: string): string;
 /** 把 mention id 包成 marker token，插入 value 的 string 里。 */
 export declare function createMarker(id: string): string;
 /** 单条 marker 的解析结果。 */
@@ -32,6 +33,14 @@ export interface MarkerMatch {
 export declare function parseMarkers(raw: string): MarkerMatch[];
 /** 去掉所有 marker 的纯文本（人看的）。 */
 export declare function stripMarkers(raw: string): string;
+/** 按 marker 切分 raw string，用于粘贴还原 DOM。 */
+export declare function forEachMarkerSegment(raw: string, visit: (segment: {
+    type: 'text';
+    text: string;
+} | {
+    type: 'marker';
+    id: string;
+}) => void): void;
 /**
  * 从 contenteditable 里把所有 chip 替换成 marker，得到上层 onChange / onSend
  * 关心的 raw string。