one-design-next 0.0.12 → 0.0.13

package/dist/_genui-types.d.ts

@@ -25,8 +25,16 @@ export interface Attachment {
     type: string;
     url?: string;
     size?: number;
-    /** 特殊变体：'report' 渲染为 AI 生成报告的大卡片（含创建时间 + 右侧预览缩略图）；未传走普通文件卡片/chip。 */
-    variant?: 'report';
+    /**
+     * 特殊变体：
+     * - 'report'：AI 生成报告的大卡片（含创建时间 + 右侧预览缩略图）。
+     * - 'thumb-card'：紧凑缩略卡——左侧 32×32 缩略图（image/* + url 时为图本身，
+     *   其余类型为分类色 icon）、右侧两行（文件名 + 类型标签）。适合长聊天流回看 /
+     *   引用 / 有正文 + 多图列表等"占位省、识别强"的场景。与默认的「图片大预览
+     *   imageCardInner」并列，由调用方按上下文选择。
+     * - 未传：走普通文件卡片（image/* + url 自动展开为内嵌大预览 imageCardInner）。
+     */
+    variant?: 'report' | 'thumb-card';
     /** variant='report' 时展示在标题下的创建时间，例如 "03-09 15:46"。 */
     createdAt?: string;
     /** variant='report' 时右侧预览缩略图地址。未传时渲染为浅色占位层。 */
@@ -46,6 +54,25 @@ export interface PreviewTab {
     content: string;
     type: string;
 }
+/** Composer 正文内 `/` 触发的内联引用（Invocation 组件数据契约）。 */
+export interface InvocationData {
+    id: string;
+    /** 业务类型：skill / command / 自定义 */
+    kind: string;
+    refId: string;
+    label: string;
+    icon?: string;
+    params?: Record<string, unknown>;
+}
+/** Composer 正文内 `@` 触发的内联引用（Mention 组件数据契约）。 */
+export interface MentionData {
+    id: string;
+    kind: string;
+    refId: string;
+    label: string;
+    icon?: string;
+    params?: Record<string, unknown>;
+}
 export interface SkillItem {
     id: string;
     label: string;
@@ -61,14 +88,13 @@ export interface SkillItem {
 export interface SendMeta {
     attachments?: Attachment[];
     webSearch?: boolean;
+    /** `/` 内联引用列表（Invocation），按编辑器内出现顺序。 */
+    invocations?: InvocationData[];
+    /** `@` 内联引用列表（Mention），按编辑器内出现顺序。 */
+    mentions?: MentionData[];
     /**
-     * 编辑器内插入的 chip 列表（按出现顺序）。
-     * - 来源包含工具栏按钮、`/` 触发、`@` 触发等
-     * - 通过 `kind` 字段区分 skill / mention / 自定义类型
-     * - 业务方按需 filter，例如：`meta.chips?.filter(c => c.kind === 'skill')`
-     *
-     * BREAKING（pre-1.0）：取代 v0.0.x 的 `skill?: string` 单值字段。
-     * 老业务迁移：`meta.skill` → `meta.chips?.find(c => c.kind === 'skill')?.label`
+     * @deprecated 请改用 `invocations` / `mentions`。本字段仍双写一版，便于旧业务迁移。
+     * 编辑器内 chip 列表（按出现顺序）；`kind: 'skill'` 对应 invocation。
      */
     chips?: ComposerChipMeta[];
 }
@@ -78,7 +104,7 @@ export interface ComposerChipMeta {
     skillId: string;
     label: string;
     icon: string;
-    kind?: 'skill' | 'mention' | (string & {});
+    kind?: 'skill' | 'invocation' | 'mention' | (string & {});
 }
 export type AgentEvent = {
     kind: 'thinking';

package/dist/attachments/index.js

@@ -131,10 +131,68 @@ export function Attachments(_ref) {
     _ref$compact = _ref.compact,
     compact = _ref$compact === void 0 ? false : _ref$compact;
   if (attachments.length === 0) return null;
+
+  /**
+   * thumb-card 渲染：紧凑卡（左缩略图 + 右两行文件名/类型）。
+   *
+   * 抽成组件内部 helper 而非内联，是为了让 compact 分支与 default 分支共用同一份
+   * 渲染逻辑——variant 是「调用方显式 opt-in」的信号，必须优先于 compact 隐式推导：
+   * 「有正文 + 附件」场景（compact=true）下，调用方传 thumb-card 就是不想让附件
+   * 退化成 chip，而想要"小卡片 + 缩略图"承担引用语义。
+   */
+  function renderThumbCard(a, i) {
+    var meta = getFileMeta(a.type);
+    var isImage = a.type.startsWith('image/') && !!a.url;
+    var thumbCardInner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      "data-odn-attachments-thumb-card-thumb": true,
+      style: isImage ? undefined : {
+        backgroundColor: meta.bg
+      }
+    }, isImage ? /*#__PURE__*/React.createElement("img", {
+      src: a.url,
+      alt: ""
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      name: meta.icon,
+      size: 16,
+      style: {
+        color: meta.color
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      "data-odn-attachments-thumb-card-info": true
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-attachments-thumb-card-name": true
+    }, a.name), /*#__PURE__*/React.createElement("div", {
+      "data-odn-attachments-thumb-card-type": true
+    }, formatType(a.type, a.name))));
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      "data-odn-attachments-item": true,
+      "data-odn-attachments-item-thumb-card": ""
+    }, onFileClick ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: function onClick() {
+        return onFileClick(a);
+      },
+      "data-odn-attachments-thumb-card": true,
+      "data-odn-attachments-clickable": ""
+    }, thumbCardInner) : /*#__PURE__*/React.createElement("div", {
+      "data-odn-attachments-thumb-card": true
+    }, thumbCardInner), onRemove && /*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        return onRemove(i);
+      },
+      "data-odn-attachments-remove": true
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "x",
+      size: 10
+    })));
+  }
   if (compact) {
     return /*#__PURE__*/React.createElement("div", {
       "data-odn-attachments-compact": true
     }, attachments.map(function (a, i) {
+      // thumb-card 优先于 chip 默认路径——见上方 renderThumbCard 注释。
+      if (a.variant === 'thumb-card') return renderThumbCard(a, i);
       var meta = getFileMeta(a.type);
       var chip = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
         name: meta.icon,
@@ -252,6 +310,7 @@ export function Attachments(_ref) {
         size: 10
       })));
     }
+    if (a.variant === 'thumb-card') return renderThumbCard(a, i);
     var meta = getFileMeta(a.type);
     var isImage = a.type.startsWith('image/') && a.url;
     var fileCardInner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -272,30 +331,21 @@ export function Attachments(_ref) {
     }, a.name), /*#__PURE__*/React.createElement("div", {
       "data-odn-attachments-meta": true
     }, formatType(a.type, a.name), a.size ? " \xB7 ".concat(formatSize(a.size)) : '')));
-    var imageCardInner = /*#__PURE__*/React.createElement("div", {
-      "data-odn-attachments-img-wrapper": true
-    }, /*#__PURE__*/React.createElement("img", {
-      src: a.url,
-      alt: a.name
-    }));
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", _extends({
       key: i,
       "data-odn-attachments-item": true
-    }, onFileClick ? /*#__PURE__*/React.createElement("button", _extends({
+    }, isImage ? {
+      'data-odn-attachments-item-image-card': ''
+    } : {}), onFileClick ? /*#__PURE__*/React.createElement("button", {
       type: "button",
       onClick: function onClick() {
         return onFileClick(a);
       },
-      "data-odn-attachments-card": true
-    }, isImage ? {
-      'data-odn-attachments-image-card': ''
-    } : {}, {
+      "data-odn-attachments-card": true,
       "data-odn-attachments-clickable": ""
-    }), isImage ? imageCardInner : fileCardInner) : /*#__PURE__*/React.createElement("div", _extends({
+    }, fileCardInner) : /*#__PURE__*/React.createElement("div", {
       "data-odn-attachments-card": true
-    }, isImage ? {
-      'data-odn-attachments-image-card': ''
-    } : {}), isImage ? imageCardInner : fileCardInner), onRemove && /*#__PURE__*/React.createElement("button", {
+    }, fileCardInner), onRemove && /*#__PURE__*/React.createElement("button", {
       onClick: function onClick() {
         return onRemove(i);
       },

package/dist/attachments/style/index.css

@@ -84,43 +84,6 @@
   border-color: color-mix(in srgb, var(--odn-color-primary) 50%, transparent);
 }
 
-[data-odn-attachments-img-wrapper] {
-  height: 0;
-  min-height: 100%;
-  aspect-ratio: 1;
-  border-radius: 3px;
-  overflow: hidden;
-  align-self: center;
-}
-[data-odn-attachments-img-wrapper] img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/** 图片附件卡：仅内嵌预览（非「文件卡」双列），须写在通用 img-wrapper 规则之后以覆盖 grid 方形缩略策略 */
-[data-odn-attachments-card][data-odn-attachments-image-card] {
-  display: block;
-  padding: 4px;
-  max-width: min(100%, 280px);
-}
-
-[data-odn-attachments-card][data-odn-attachments-image-card] [data-odn-attachments-img-wrapper] {
-  height: auto;
-  min-height: 0;
-  aspect-ratio: auto;
-  max-height: 220px;
-  border-radius: 4px;
-  align-self: stretch;
-}
-[data-odn-attachments-card][data-odn-attachments-image-card] [data-odn-attachments-img-wrapper] img {
-  width: 100%;
-  height: auto;
-  max-height: 220px;
-  object-fit: contain;
-  vertical-align: middle;
-}
-
 [data-odn-attachments-file-icon] {
   display: flex;
   align-items: center;
@@ -175,6 +138,92 @@
   color: var(--odn-color-error);
 }
 
+/* ==========================================================================
+ * Thumb-card 变体（紧凑缩略卡）
+ * 左侧缩略图（image/* + url 时为图本身；其余类型为分类色 icon），
+ * 右侧两行（文件名 + 类型标签）。
+ *
+ * 节奏与默认「文件附件卡」(data-odn-attachments-card) 严格对齐：同样的
+ * padding / border-radius / border / 字号，仅 icon 槽内容由「彩色 icon」
+ * 替换为「图片缩略 or 彩色 icon」——保证 thumb-card 与 file-card 同行 wrap
+ * 时高度 / 圆角 / 边线一致，不会出现错位。
+ * ========================================================================== */
+[data-odn-attachments-item-thumb-card] {
+  display: inline-flex;
+}
+
+[data-odn-attachments-thumb-card] {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px;
+  padding: 6px 10px 6px 6px;
+  border-radius: 6px;
+  border: 1px solid var(--odn-color-black-6);
+  background: var(--odn-color-solid-black-1);
+  box-sizing: border-box;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  appearance: none;
+  transition: border-color 0.15s;
+}
+[data-odn-attachments-thumb-card][data-odn-attachments-clickable] {
+  cursor: pointer;
+}
+[data-odn-attachments-thumb-card][data-odn-attachments-clickable]:hover {
+  border-color: color-mix(in srgb, var(--odn-color-primary) 50%, transparent);
+}
+
+[data-odn-attachments-thumb-card-thumb] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 0;
+  min-height: 100%;
+  aspect-ratio: 1;
+  border-radius: 3px;
+  overflow: hidden;
+}
+[data-odn-attachments-thumb-card-thumb] img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+[data-odn-attachments-thumb-card-info] {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+}
+
+[data-odn-attachments-thumb-card-name] {
+  font-size: 12px;
+  line-height: normal;
+  color: var(--odn-color-black-12);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 120px;
+}
+
+[data-odn-attachments-thumb-card-type] {
+  font-size: 10px;
+  line-height: 1.25;
+  color: var(--odn-color-black-9);
+}
+
+[data-odn-attachments-item-image-card] {
+  flex-basis: 100%;
+}
+
+[data-odn-attachments-card]:not([data-odn-attachments-image-card]),
+[data-odn-attachments-thumb-card] {
+  width: 192px;
+}
+
 /* ==========================================================================
  * Report 变体（AI 生成报告入口卡片）
  * 设计对齐：豆包报告卡片 —— 左侧图标 + 标题/创建时间，右侧预览缩略图，

package/dist/composer/chip.d.ts

@@ -22,11 +22,11 @@ export interface ChipData {
     /**
      * chip 语义来源标记，业务方自定义。Composer 内部不消费 kind，
      * 仅原样透传到 onSend(meta.chips)，方便业务方按 kind 分类。
-     * 约定：'skill' = 工具栏按钮 / `/` 触发选出来的能力；
-     *       'mention' = `@` 触发的对象引用；
-     *       其他自定义字符串业务方自行解释。
+     * 约定：'invocation' = 工具栏按钮 / `/` 触发（SendMeta.invocations）；
+     *       'mention' = `@` 触发（SendMeta.mentions）；
+     *       'skill' 为兼容别名，等同 invocation。
      */
-    kind?: 'skill' | 'mention' | (string & {});
+    kind?: 'invocation' | 'mention' | 'skill' | (string & {});
 }
 export interface ChipProps {
     data: ChipData;

package/dist/composer/clipboard.d.ts

@@ -0,0 +1,12 @@
+import type { ChipData } from './chip';
+import type { ManagedChip } from './hooks/useChipManager';
+export declare const COMPOSER_CLIPBOARD_MIME = "application/x-odn-composer-chips";
+export interface ComposerClipboardPayload {
+    value: string;
+    chips: ChipData[];
+}
+export declare function buildClipboardPayload(range: Range, chips: ManagedChip[]): ComposerClipboardPayload | null;
+export declare function parseClipboardPayload(raw: string): ComposerClipboardPayload | null;
+/** 粘贴时重映射 chip id，避免同编辑器内 id 冲突。 */
+export declare function remapClipboardPayload(payload: ComposerClipboardPayload): ComposerClipboardPayload;
+export declare function plainTextFromClipboardPayload(payload: ComposerClipboardPayload): string;

package/dist/composer/clipboard.js

@@ -0,0 +1,84 @@
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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; }
+import { createMarker, getPlainText, stripMarkers } from "./utils";
+export var COMPOSER_CLIPBOARD_MIME = 'application/x-odn-composer-chips';
+export function buildClipboardPayload(range, chips) {
+  var fragment = range.cloneContents();
+  var wrapper = document.createElement('div');
+  wrapper.appendChild(fragment);
+  var value = getPlainText(wrapper);
+  var selected = [];
+  var _iterator = _createForOfIteratorHelper(chips),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var chip = _step.value;
+      if (range.intersectsNode(chip.host)) {
+        selected.push(chip.data);
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (!value && selected.length === 0) return null;
+  return {
+    value: value,
+    chips: selected
+  };
+}
+export function parseClipboardPayload(raw) {
+  try {
+    var parsed = JSON.parse(raw);
+    if (typeof parsed.value !== 'string' || !Array.isArray(parsed.chips)) return null;
+    return parsed;
+  } catch (_unused) {
+    return null;
+  }
+}
+
+/** 粘贴时重映射 chip id，避免同编辑器内 id 冲突。 */
+export function remapClipboardPayload(payload) {
+  var idMap = new Map();
+  var chips = payload.chips.map(function (chip) {
+    var newId = "c_".concat(Date.now(), "_").concat(Math.random().toString(36).slice(2, 8));
+    idMap.set(chip.id, newId);
+    return _objectSpread(_objectSpread({}, chip), {}, {
+      id: newId
+    });
+  });
+  var value = payload.value;
+  var _iterator2 = _createForOfIteratorHelper(idMap),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _step2$value = _slicedToArray(_step2.value, 2),
+        oldId = _step2$value[0],
+        newId = _step2$value[1];
+      value = value.split(createMarker(oldId)).join(createMarker(newId));
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return {
+    value: value,
+    chips: chips
+  };
+}
+export function plainTextFromClipboardPayload(payload) {
+  return stripMarkers(payload.value);
+}

package/dist/composer/editor.d.ts

@@ -17,7 +17,7 @@
  *   - chip 状态（id ↔ host）由 useChipManager 维护
  */
 /// <reference types="react" />
-import { type ChipData } from './chip';
+import type { ChipData } from './chip';
 /** Composer editor 触发态对外信号——告诉父组件该弹浮层选 skill 了。 */
 export interface ComposerEditorTriggerInfo {
     /** 触发字符（@ 或 /） */
@@ -86,6 +86,8 @@ export interface ComposerEditorProps {
      * 若提供且 `files.length > 0`，编辑器会 `preventDefault` 且不再插入纯文本。
      */
     onPasteFiles?: (files: File[]) => void;
+    /** 复制 / 剪切时回调（选区含 chip 时触发）。 */
+    onCopyChips?: (chips: ChipData[]) => void;
     /**
      * 禁用：contenteditable 关闭，editor 不接受输入 / 聚焦 / 粘贴。
      * 已有的文本与 chip 仍渲染（仅冻结，不清空），便于"等接通后继续编辑"。

package/dist/composer/editor.js

@@ -31,9 +31,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { findChipHostBeforeCaret, getPlainText, isEditorEmpty, probeTrigger, resolveCaretJumpAroundChip, ZWSP } from "./utils";
+import { buildClipboardPayload, COMPOSER_CLIPBOARD_MIME, parseClipboardPayload, plainTextFromClipboardPayload, remapClipboardPayload } from "./clipboard";
 import { useChipManager } from "./hooks/useChipManager";
-import { Chip } from "./chip";
+import { useChipSelectionMarker } from "./hooks/useChipSelectionMarker";
+import { findChipHostBeforeCaret, getPlainText, isEditorEmpty, probeTrigger, resolveCaretJumpAroundChip, ZWSP } from "./utils";
+import { ComposerInlineRef } from "./inline-ref";
 import ScrollArea from "../scroll-area";
 
 /** Composer editor 触发态对外信号——告诉父组件该弹浮层选 skill 了。 */
@@ -99,6 +101,7 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
     onTriggerKeyDown = _ref.onTriggerKeyDown,
     onHeightChange = _ref.onHeightChange,
     onPasteFiles = _ref.onPasteFiles,
+    onCopyChips = _ref.onCopyChips,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     className = _ref.className,
@@ -184,13 +187,15 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
    * ───────────────────────────────────── */
   var _useChipManager = useChipManager(function () {
       fireChange();
-      // 插入 / 删除 chip 后 caret 位置变了，重算 trigger
       recomputeTrigger();
     }),
     chips = _useChipManager.chips,
     _insertChip = _useChipManager.insertChip,
+    insertSerializedAtRange = _useChipManager.insertSerializedAtRange,
+    syncChipsAfterDomMutation = _useChipManager.syncChipsAfterDomMutation,
     removeChip = _useChipManager.removeChip,
     resetChips = _useChipManager.resetChips;
+  useChipSelectionMarker(editorRef, chips);
 
   /* ─────────────────────────────────────
    * Trigger 探测
@@ -485,10 +490,45 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
       insertLineBreak();
     }
   }, [onPressEnter, insertLineBreak, removeChip, onTriggerKeyDown]);
+  var writeClipboardPayload = useCallback(function (e, payload) {
+    if (!payload) return false;
+    e.clipboardData.setData(COMPOSER_CLIPBOARD_MIME, JSON.stringify(payload));
+    e.clipboardData.setData('text/plain', plainTextFromClipboardPayload(payload));
+    onCopyChips === null || onCopyChips === void 0 || onCopyChips(payload.chips);
+    return true;
+  }, [onCopyChips]);
+  var handleCopy = useCallback(function (e) {
+    var el = editorRef.current;
+    if (!el || disabled) return;
+    var sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
+    var range = sel.getRangeAt(0);
+    if (!el.contains(range.commonAncestorContainer)) return;
+    var payload = buildClipboardPayload(range, chips);
+    if (!payload) return;
+    e.preventDefault();
+    writeClipboardPayload(e, payload);
+  }, [chips, disabled, writeClipboardPayload]);
+  var handleCut = useCallback(function (e) {
+    var el = editorRef.current;
+    if (!el || disabled) return;
+    var sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
+    var range = sel.getRangeAt(0);
+    if (!el.contains(range.commonAncestorContainer)) return;
+    var payload = buildClipboardPayload(range, chips);
+    if (!payload) return;
+    e.preventDefault();
+    if (!writeClipboardPayload(e, payload)) return;
+    range.deleteContents();
+    syncChipsAfterDomMutation(el);
+    fireChange();
+    recomputeTrigger();
+    requestScrollCaretIntoView();
+  }, [chips, disabled, writeClipboardPayload, syncChipsAfterDomMutation, fireChange, recomputeTrigger, requestScrollCaretIntoView]);
 
   /* ─────────────────────────────────────
-   * Paste：纯文本走受控插入；文件交给 onPasteFiles（Composer 转附件）。
-   * 避免外部富文本污染 DOM；无 handler 时文件粘贴仍 preventDefault 以免整页乱入。
+   * Paste：优先私有 mime 还原 chip；纯文本走受控插入；文件交给 onPasteFiles。
    * ───────────────────────────────────── */
   var handlePaste = useCallback(function (e) {
     var fileList = e.clipboardData.files;
@@ -514,13 +554,26 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
       onPasteFiles === null || onPasteFiles === void 0 || onPasteFiles(fromItems);
       return;
     }
+    var el = editorRef.current;
+    if (!el) return;
+    var rawPayload = e.clipboardData.getData(COMPOSER_CLIPBOARD_MIME);
+    var parsed = rawPayload ? parseClipboardPayload(rawPayload) : null;
     e.preventDefault();
-    var text = e.clipboardData.getData('text/plain');
-    if (!text) return;
     var sel = window.getSelection();
     if (!sel || sel.rangeCount === 0) return;
     var range = sel.getRangeAt(0);
+    if (!el.contains(range.commonAncestorContainer)) return;
     range.deleteContents();
+    if (parsed) {
+      var remapped = remapClipboardPayload(parsed);
+      insertSerializedAtRange(remapped.value, remapped.chips, range, el);
+      fireChange();
+      recomputeTrigger();
+      requestScrollCaretIntoView();
+      return;
+    }
+    var text = e.clipboardData.getData('text/plain');
+    if (!text) return;
     var node = document.createTextNode(text);
     range.insertNode(node);
     var newRange = document.createRange();
@@ -530,7 +583,7 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
     sel.addRange(newRange);
     fireChange();
     requestScrollCaretIntoView();
-  }, [fireChange, requestScrollCaretIntoView, onPasteFiles]);
+  }, [fireChange, requestScrollCaretIntoView, onPasteFiles, insertSerializedAtRange, recomputeTrigger]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollArea, {
     controlRef: scrollRef,
     autoHide: true,
@@ -554,13 +607,12 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
     onCompositionStart: handleCompositionStart,
     onCompositionEnd: handleCompositionEnd,
     onKeyDown: handleKeyDown,
+    onCopy: handleCopy,
+    onCut: handleCut,
     onPaste: handlePaste
   })), chips.map(function (chip) {
-    return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Chip, {
-      data: chip.data,
-      onRemove: function onRemove() {
-        return removeChip(chip.data.id);
-      }
+    return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(ComposerInlineRef, {
+      data: chip.data
     }), chip.host, chip.data.id);
   }));
 });

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

@@ -24,9 +24,14 @@ export interface UseChipManagerReturn {
      * 在编辑器当前光标位置插入 chip：
      *   - selection 在编辑器内 → 插入光标处
      *   - selection 在编辑器外 / 无 selection → fallback 到末尾
-     * 插入后光标自动移到 chip 之后的 ZWSP 锚点之后，方便用户继续输入。
      */
     insertChip: (data: ChipData, editor: HTMLElement) => void;
+    /** 在指定 range 处插入 chip（调用方负责 deleteContents）。 */
+    insertChipAtRange: (data: ChipData, range: Range, editor: HTMLElement) => HTMLSpanElement;
+    /** 将含 marker 的 raw value + chips 插入 range（粘贴用）。 */
+    insertSerializedAtRange: (value: string, chips: ChipData[], range: Range, editor: HTMLElement) => void;
+    /** 移除已从 DOM 摘下的 chip 状态（cut / 选区删除后）。 */
+    syncChipsAfterDomMutation: (editor: HTMLElement) => void;
     /** 按 chip id 移除（同时清理伴随的 ZWSP 锚点）。 */
     removeChip: (id: string) => void;
     /** 清空所有 chip 的 React 状态（DOM 由调用方 editor.innerHTML='' 一并处理）。 */