one-design-next 0.0.12 → 0.0.13

package/dist/composer/utils.js

@@ -29,6 +29,12 @@ var escapeRe = function escapeRe(s) {
 };
 var MARKER_RE = new RegExp("".concat(escapeRe(MARKER_OPEN), "([^").concat(SEP, "]+)").concat(escapeRe(MARKER_CLOSE)), 'g');
 
+/** 从用户可见文本中剔除 ZWSP / SEP（粘贴残留、锚点字符）。 */
+var INVISIBLE_RE = new RegExp("[".concat(ZWSP).concat(SEP, "]"), 'g');
+export function stripInvisibleChars(s) {
+  return s.replace(INVISIBLE_RE, '');
+}
+
 /** 把 mention id 包成 marker token，插入 value 的 string 里。 */
 export function createMarker(id) {
   return "".concat(MARKER_OPEN).concat(id).concat(MARKER_CLOSE);
@@ -71,6 +77,41 @@ export function stripMarkers(raw) {
   return raw.replace(MARKER_RE, '');
 }
 
+/** 按 marker 切分 raw string，用于粘贴还原 DOM。 */
+export function forEachMarkerSegment(raw, visit) {
+  var lastIdx = 0;
+  var re = new RegExp(MARKER_RE.source, 'g');
+  var _iterator2 = _createForOfIteratorHelper(raw.matchAll(re)),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var m = _step2.value;
+      var index = m.index;
+      if (index > lastIdx) {
+        visit({
+          type: 'text',
+          text: raw.slice(lastIdx, index)
+        });
+      }
+      visit({
+        type: 'marker',
+        id: m[1]
+      });
+      lastIdx = index + m[0].length;
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  if (lastIdx < raw.length) {
+    visit({
+      type: 'text',
+      text: raw.slice(lastIdx)
+    });
+  }
+}
+
 /* ────────────────────────────────────────────────────────────────────
  * getPlainText · 从 DOM 提取 marker 化的字符串
  * ──────────────────────────────────────────────────────────────────── */
@@ -101,7 +142,7 @@ export function getPlainText(editor) {
     }
     if (node.nodeType === Node.TEXT_NODE) {
       var _node$textContent;
-      out += ((_node$textContent = node.textContent) !== null && _node$textContent !== void 0 ? _node$textContent : '').replace(new RegExp(ZWSP, 'g'), '');
+      out += stripInvisibleChars((_node$textContent = node.textContent) !== null && _node$textContent !== void 0 ? _node$textContent : '');
       return;
     }
     if (node.nodeType === Node.ELEMENT_NODE) {
@@ -134,7 +175,7 @@ export function isEditorEmpty(editor) {
   var _editor$textContent;
   var chipIdAttr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'mentionId';
   if (editor.querySelector("[data-".concat(kebab(chipIdAttr), "]"))) return false;
-  var text = ((_editor$textContent = editor.textContent) !== null && _editor$textContent !== void 0 ? _editor$textContent : '').replace(new RegExp(ZWSP, 'g'), '');
+  var text = stripInvisibleChars((_editor$textContent = editor.textContent) !== null && _editor$textContent !== void 0 ? _editor$textContent : '');
   // 仅过滤换行符（contenteditable 默认 <br> 单独存在时 textContent 是 '\n'，视觉仍为空）
   return text.replace(/\n/g, '') === '';
 }

package/dist/fab/index.js

@@ -7,7 +7,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState, useEffect, useRef } from 'react';
 import { MeshGradient } from '@paper-design/shaders-react';
 import "./style";
-var BRAND_ICON_PATHS = ['M37.4911 121.803C38.7808 118.657 42.6771 117.561 45.6776 119.159C46.4424 119.566 47.2191 119.953 48.0073 120.32C50.7196 121.583 52.1802 124.712 51.0454 127.48C49.9576 130.134 46.9172 131.395 44.2708 130.289L40.3265 128.642C37.6621 127.529 36.3957 124.474 37.4911 121.803Z', 'M99.5065 121.794C100.608 124.469 99.3411 127.532 96.6715 128.647L92.7363 130.29C90.0906 131.395 87.0509 130.136 85.9612 127.484C84.8231 124.714 86.2839 121.582 88.9978 120.316C89.7828 119.95 90.5564 119.563 91.3181 119.157C94.3174 117.558 98.2123 118.651 99.5065 121.794Z', 'M19.2739 104.82C22.2702 101.797 27.3851 102.607 30.001 105.964C32.1488 108.721 32.21 112.711 29.7514 115.194C27.2761 117.695 23.2367 117.697 20.7586 115.199L19.276 113.704C16.8365 111.245 16.8356 107.28 19.2739 104.82Z', 'M117.721 104.818C120.162 107.279 120.163 111.248 117.723 113.71L116.25 115.196C113.772 117.696 109.731 117.697 107.253 115.198C104.787 112.713 104.843 108.721 106.994 105.959C109.61 102.6 114.722 101.795 117.721 104.818Z', 'M11.3154 81.5483C15.3671 79.8562 19.9061 82.799 20.9247 87.07C21.7135 90.3776 20.191 93.8468 17.0542 95.1594L14.8843 96.0674C11.1043 97.6492 6.75913 95.8518 5.20113 92.0619C3.65613 88.3037 5.43683 84.0033 9.18643 82.4374L11.3154 81.5483Z', 'M127.821 82.4366C131.568 84.0034 133.347 88.3007 131.805 92.0578C130.249 95.8498 125.903 97.6501 122.122 96.0696L119.941 95.1583C116.802 93.8465 115.278 90.3755 116.07 87.0669C117.092 82.7945 121.637 79.8506 125.69 81.5455L127.821 82.4366Z', 'M129.602 58.2774C133.688 58.2774 137 61.5896 137 65.6753C137 69.761 133.688 73.0731 129.602 73.0731H123.403C120.02 73.0731 117.267 70.3183 116.689 66.9847C115.934 62.6302 119.041 58.2774 123.46 58.2774H129.602Z', 'M13.5398 58.2774C17.9593 58.2774 21.0663 62.6302 20.3112 66.9847C19.7332 70.3183 16.98 73.0731 13.5966 73.0731H7.39786C3.31213 73.0731 0 69.761 0 65.6753C0 61.5896 3.31214 58.2774 7.39786 58.2774H13.5398Z', 'M131.807 39.29C133.353 43.0529 131.569 47.3578 127.815 48.9247L118.711 52.7244C115.543 54.0469 111.92 52.5582 110.127 49.6298C107.845 45.9014 109.032 40.7313 113.066 39.0492L122.121 35.2743C125.904 33.6969 130.249 35.4982 131.807 39.29Z', 'M23.9305 39.0492C27.9628 40.7315 29.147 45.8984 26.8641 49.6237C25.0708 52.5502 21.4485 54.0379 18.281 52.716L9.19401 48.9239C5.44023 47.3575 3.65664 43.0531 5.20226 39.2907C6.76 35.4988 11.1054 33.6981 14.8887 35.2766L23.9305 39.0492Z', 'M39.5076 25.9808C42.4931 28.9902 41.719 34.045 38.3912 36.6709C35.6086 38.8665 31.5638 38.915 29.0675 36.3987L20.0223 27.2814C17.17 24.4063 17.17 19.769 20.0223 16.8939C22.9068 13.9863 27.6081 13.9863 30.4926 16.8939L39.5076 25.9808Z', 'M116.976 16.892C119.829 19.7677 119.828 24.4064 116.973 27.2807L107.92 36.3963C105.425 38.9092 101.384 38.8605 98.6025 36.6683C95.2734 34.0444 94.4989 28.99 97.4851 25.9814L106.508 16.8907C109.392 13.9847 114.092 13.9853 116.976 16.892Z', 'M58.9142 18.1863C60.4617 21.9498 58.0298 26.1793 54.1812 27.5009C50.6835 28.7019 46.7164 27.2251 45.3119 23.804L39.706 10.1492C38.1699 6.40742 39.9438 2.12743 43.6765 0.569414C47.4388 -1.00092 51.7606 0.788889 53.311 4.55942L58.9142 18.1863Z', 'M92.9927 0.57847C96.7231 2.13658 98.494 6.41548 96.9559 10.1541L91.3334 23.8209C89.9291 27.2342 85.9703 28.7077 82.4782 27.5127C78.6324 26.1967 76.2033 21.9728 77.7497 18.2137L83.3655 4.56307C84.9153 0.795926 89.2339 -0.991508 92.9927 0.57847Z', 'M62 128.222C62 124.632 64.9101 121.722 68.5 121.722C72.0899 121.722 75 124.632 75 128.222C75 131.812 72.0899 134.722 68.5 134.722C64.9101 134.722 62 131.812 62 128.222Z'];
 var COLOR_TRANSITION_MS = 600;
 var hexToRgb = function hexToRgb(hex) {
   var m = hex.replace('#', '');
@@ -52,9 +51,9 @@ var Fab = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     className = _ref3.className,
     style = _ref3.style,
     _ref3$colors = _ref3.colors,
-    colors = _ref3$colors === void 0 ? ['#34D8FF', '#19BCFF', '#348FFF'] : _ref3$colors,
+    colors = _ref3$colors === void 0 ? ['#3284FF', '#1894FF', '#2A6BEF'] : _ref3$colors,
     _ref3$hoverColors = _ref3.hoverColors,
-    hoverColors = _ref3$hoverColors === void 0 ? ['#56DFFF', '#1ABCFF', '#1FD4FD'] : _ref3$hoverColors,
+    hoverColors = _ref3$hoverColors === void 0 ? ['#2089FE', '#3276FF', '#47B4FF'] : _ref3$hoverColors,
     _ref3$bgOpacity = _ref3.bgOpacity,
     bgOpacity = _ref3$bgOpacity === void 0 ? 1 : _ref3$bgOpacity,
     _ref3$hoverBgOpacity = _ref3.hoverBgOpacity,
@@ -140,19 +139,7 @@ var Fab = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "odn-fab-glow",
     "aria-hidden": "true"
-  }), icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React.createElement("svg", {
-    width: "22",
-    height: "22",
-    viewBox: "0 0 137 135",
-    fill: "none",
-    className: "odn-fab-icon"
-  }, BRAND_ICON_PATHS.map(function (d, i) {
-    return /*#__PURE__*/React.createElement("path", {
-      key: i,
-      d: d,
-      fill: "currentColor"
-    });
-  })), /*#__PURE__*/React.createElement("span", {
+  }), icon, /*#__PURE__*/React.createElement("span", {
     className: "odn-fab-label"
   }, label));
 });

package/dist/fab/style/index.css

@@ -5,11 +5,9 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
-  width: 172px;
-  height: 64px;
   padding: 16px;
   border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 24px;
+  border-radius: 16px;
   cursor: pointer;
   user-select: none;
   background: none;

package/dist/image/index.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import './style';
+export interface ImageProps {
+    /** 图片地址（必填） */
+    url: string;
+    /** 无障碍说明文本 */
+    alt?: string;
+    /**
+     * 整图点击回调。传此 prop 即把图片包一层 button，业务方按需对接
+     * `PreviewPanel` 等 lightbox 组件。
+     */
+    onPreview?: () => void;
+    /**
+     * 删除按钮回调。传此 prop 即在 hover 时整图浮出 30% 黑色遮罩 + 中央
+     * trash icon，用于 Composer 待发送态等需要删除的场景。
+     */
+    onRemove?: () => void;
+    /** 透传到容器（非 img 本体）的 className，用于上层套尺寸约束。 */
+    className?: string;
+    /** 透传到容器（非 img 本体）的 style，用于上层套尺寸约束。 */
+    style?: React.CSSProperties;
+}
+/**
+ * 图片渲染 leaf 组件。
+ *
+ * 职责：
+ *  - 画一张图（lazy load）
+ *  - 整图作为 onPreview 触发区
+ *  - 删除按钮的 hover 遮罩
+ *
+ * 不职责：
+ *  - 不带尺寸 opinion（max-width / max-height / object-fit 全由上层套）
+ *  - 不带消息态 / 输入态等业务语义
+ *
+ * 业务态包装在更上层的组件里实现：
+ *  - 消息态：`<MessageImage>` 套一层 max 280×360 contain（单图）或 88×88 cover（多图）容器
+ *  - Composer 待发送态：composer 内部直接套一层 72×72 cover 容器
+ */
+export declare function Image({ url, alt, onPreview, onRemove, className, style }: ImageProps): import("react").JSX.Element;
+export declare namespace Image {
+    var displayName: string;
+}
+export default Image;

package/dist/image/index.js

@@ -0,0 +1,51 @@
+import Icon from "../icon";
+import "./style";
+/**
+ * 图片渲染 leaf 组件。
+ *
+ * 职责：
+ *  - 画一张图（lazy load）
+ *  - 整图作为 onPreview 触发区
+ *  - 删除按钮的 hover 遮罩
+ *
+ * 不职责：
+ *  - 不带尺寸 opinion（max-width / max-height / object-fit 全由上层套）
+ *  - 不带消息态 / 输入态等业务语义
+ *
+ * 业务态包装在更上层的组件里实现：
+ *  - 消息态：`<MessageImage>` 套一层 max 280×360 contain（单图）或 88×88 cover（多图）容器
+ *  - Composer 待发送态：composer 内部直接套一层 72×72 cover 容器
+ */
+export function Image(_ref) {
+  var url = _ref.url,
+    alt = _ref.alt,
+    onPreview = _ref.onPreview,
+    onRemove = _ref.onRemove,
+    className = _ref.className,
+    style = _ref.style;
+  var imgEl = /*#__PURE__*/React.createElement("img", {
+    src: url,
+    alt: alt !== null && alt !== void 0 ? alt : '',
+    loading: "lazy"
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-image": true,
+    className: className,
+    style: style
+  }, onPreview ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onPreview,
+    "data-odn-image-trigger": true,
+    "aria-label": alt || '查看大图'
+  }, imgEl) : imgEl, onRemove && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onRemove,
+    "data-odn-image-remove": true,
+    "aria-label": "\u5220\u9664\u56FE\u7247"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "trash-2",
+    size: 20
+  })));
+}
+Image.displayName = 'Image';
+export default Image;

package/dist/image/style/index.css

@@ -0,0 +1,59 @@
+@charset "UTF-8";
+[data-odn-image] {
+  position: relative;
+  display: inline-block;
+}
+[data-odn-image] img {
+  display: block;
+}
+
+/** 整图作为 onPreview 触发区时的 button 包装；样式上完全融入容器（无边框、无 padding）。 */
+[data-odn-image-trigger] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  appearance: none;
+  font: inherit;
+}
+[data-odn-image-trigger]:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--odn-color-primary) 55%, transparent);
+  outline-offset: 2px;
+}
+
+/* 删除按钮：hover 时整图浮出 30% 黑色遮罩 + 中央白色 trash icon。
+ *  - 整张图作为点击热区，比右上角小角标好命中
+ *  - 遮罩贴边（inset: 0 + border-radius: inherit），与上层容器圆角自然贴合
+ *  - 与 onPreview 的 trigger button 是兄弟节点，z-index 保证其在上层
+ *
+ * 规则按 specificity 升序排列：base → :focus-visible → :hover 复合选择器，
+ * 避免 stylelint `no-descending-specificity` 报错。 */
+[data-odn-image-remove] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+  border: none;
+  border-radius: inherit;
+  color: #fff;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+  padding: 0;
+  z-index: 2;
+}
+
+[data-odn-image-remove]:focus-visible {
+  opacity: 1;
+  outline: 2px solid color-mix(in srgb, var(--odn-color-primary) 55%, transparent);
+  outline-offset: -2px;
+}
+
+[data-odn-image]:hover [data-odn-image-remove] {
+  opacity: 1;
+}

package/dist/image/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/image/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export { default as Empty, type EmptyProps, type EmptyType, type EmptySize } fro
 export { default as Form, type FormProps, type FormItemProps } from './form';
 export { default as HoverFill, type HoverFillProps, type HoverFillState } from './hover-fill';
 export { default as Icon, type IconProps } from './icon';
+export { default as Image, type ImageProps } from './image';
 export { default as Input, type InputProps, type InputRef } from './input';
 export { default as InputNumber } from './input-number';
 export { default as InputOtp, type InputOtpProps, type InputOtpRef } from './input-otp';
@@ -58,14 +59,17 @@ export { default as AgentThink, type AgentThinkProps } from './agent-think';
 export { default as Attachments, type AttachmentsProps } from './attachments';
 export { default as CodeBlock, type CodeBlockProps } from './code-block';
 export { default as Composer, type ComposerProps, type ComposerRef } from './composer';
+export { default as Invocation, type InvocationProps } from './invocation';
+export { default as Mention, type MentionProps } from './mention';
 export { default as ChatItem, type ChatItemProps } from './chat-item';
 export { default as SkillSlot, type SkillSlotProps } from './skill-slot';
 export { default as ErrorBlock, type ErrorBlockProps } from './error-block';
 export { default as Fab, type FabProps } from './fab';
+export { default as MessageImage, type MessageImageProps, type MessageImageItem } from './message-image';
 export { default as PreviewPanel, type PreviewPanelProps } from './preview-panel';
 export { default as Sources, type SourcesProps } from './sources';
 export { default as StreamText, type StreamTextProps, type TypographyOverrides } from './stream-text';
 export { default as Suggestions, type SuggestionsProps } from './suggestions';
 export { default as UserBubble, type UserBubbleProps } from './user-bubble';
 export { default as Welcome, type WelcomeProps } from './welcome';
-export type { ToolCall, ToolStatus, Source, Attachment, PreviewTarget, PreviewTab, SendMeta, ComposerChipMeta, SkillItem, AgentEvent, Conversation, MessageSnapshot, ChatMessage } from './_genui-types';
+export type { ToolCall, ToolStatus, Source, Attachment, PreviewTarget, PreviewTab, SendMeta, ComposerChipMeta, InvocationData, MentionData, SkillItem, AgentEvent, Conversation, MessageSnapshot, ChatMessage } from './_genui-types';

package/dist/index.js

@@ -33,6 +33,7 @@ export { default as Empty } from "./empty";
 export { default as Form } from "./form";
 export { default as HoverFill } from "./hover-fill";
 export { default as Icon } from "./icon";
+export { default as Image } from "./image";
 export { default as Input } from "./input";
 export { default as InputNumber } from "./input-number";
 export { default as InputOtp } from "./input-otp";
@@ -64,10 +65,13 @@ export { default as AgentThink } from "./agent-think";
 export { default as Attachments } from "./attachments";
 export { default as CodeBlock } from "./code-block";
 export { default as Composer } from "./composer";
+export { default as Invocation } from "./invocation";
+export { default as Mention } from "./mention";
 export { default as ChatItem } from "./chat-item";
 export { default as SkillSlot } from "./skill-slot";
 export { default as ErrorBlock } from "./error-block";
 export { default as Fab } from "./fab";
+export { default as MessageImage } from "./message-image";
 export { default as PreviewPanel } from "./preview-panel";
 export { default as Sources } from "./sources";
 export { default as StreamText } from "./stream-text";

package/dist/invocation/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { InvocationData } from '../_genui-types';
+import './style';
+export interface InvocationProps {
+    data: InvocationData;
+    /**
+     * true：Composer 编辑态（可点、无 hover 摘要弹层）。
+     * false：UserBubble 等只读态（可 hover 看摘要）。
+     */
+    interactive?: boolean;
+    /** form popover 打开时的高亮态（L4 params 启用后使用） */
+    active?: boolean;
+    /** 交互态单击回调 */
+    onClick?: (anchor: HTMLElement) => void;
+}
+export declare function Invocation({ data, interactive, active, onClick, }: InvocationProps): import("react").JSX.Element;
+export default Invocation;

package/dist/invocation/index.js

@@ -0,0 +1,84 @@
+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 _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; }
+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; }
+import Popover from "../popover";
+import "./style";
+function formatParamsSummary(params) {
+  if (!params) return null;
+  var entries = Object.entries(params).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      v = _ref2[1];
+    return v != null && v !== '';
+  });
+  if (entries.length === 0) return null;
+  return entries.map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      k = _ref4[0],
+      v = _ref4[1];
+    return "".concat(k, ": ").concat(String(v));
+  }).join(' · ');
+}
+export function Invocation(_ref5) {
+  var data = _ref5.data,
+    _ref5$interactive = _ref5.interactive,
+    interactive = _ref5$interactive === void 0 ? false : _ref5$interactive,
+    _ref5$active = _ref5.active,
+    active = _ref5$active === void 0 ? false : _ref5$active,
+    onClick = _ref5.onClick;
+  var clickable = interactive && !!onClick;
+  var state = active ? 'active' : 'complete';
+  var handleClick = clickable ? function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick(e.currentTarget);
+  } : undefined;
+  var handleMouseDown = clickable ? function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  } : undefined;
+  var core = /*#__PURE__*/React.createElement("span", {
+    "data-odn-invocation": true,
+    "data-state": state,
+    "data-clickable": clickable || undefined,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-invocation-slash": true,
+    "aria-hidden": true
+  }, "/"), /*#__PURE__*/React.createElement("span", {
+    "data-odn-invocation-label": true
+  }, data.label));
+  if (interactive) return core;
+  var summary = formatParamsSummary(data.params);
+  if (!summary) return core;
+  return /*#__PURE__*/React.createElement(Popover, {
+    trigger: "hover",
+    placement: "top",
+    arrowed: false,
+    offset: 6,
+    mouseEnterDelay: 0.15,
+    mouseLeaveDelay: 0.1,
+    popup: /*#__PURE__*/React.createElement(InvocationHoverPopup, {
+      label: data.label,
+      summary: summary
+    })
+  }, core);
+}
+function InvocationHoverPopup(_ref6) {
+  var label = _ref6.label,
+    summary = _ref6.summary;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-invocation-popover-inner": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-invocation-popover-title": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-invocation-popover-slash": true,
+    "aria-hidden": true
+  }, "/"), label), /*#__PURE__*/React.createElement("div", {
+    "data-odn-invocation-popover-summary": true
+  }, summary));
+}
+export default Invocation;

package/dist/invocation/style/index.css

@@ -0,0 +1,58 @@
+[data-odn-invocation] {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  word-break: keep-all;
+  overflow-wrap: normal;
+  margin: 0;
+  padding: 0 4px;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--odn-color-cyan-6, var(--odn-color-cyan-5));
+  font-weight: 500;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: default;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: background-color 0.15s;
+}
+[data-odn-invocation][data-state=active], [data-odn-invocation]:hover {
+  background: color-mix(in srgb, var(--odn-color-cyan-5) 12%, transparent);
+}
+[data-odn-invocation][data-clickable] {
+  cursor: pointer;
+}
+
+[data-odn-invocation-slash] {
+  opacity: 0.7;
+}
+
+[data-odn-invocation-popover-inner] {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+[data-odn-invocation-popover-title] {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  font-weight: 500;
+  color: var(--odn-color-cyan-6, var(--odn-color-cyan-5));
+}
+
+[data-odn-invocation-popover-slash] {
+  opacity: 0.7;
+}
+
+[data-odn-invocation-popover-summary] {
+  display: inline-block;
+  align-self: flex-start;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--odn-color-cyan-5) 10%, transparent);
+  color: var(--odn-color-cyan-6, var(--odn-color-cyan-5));
+  font-size: 12px;
+  line-height: 1.4;
+}

package/dist/invocation/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/invocation/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/mention/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { MentionData } from '../_genui-types';
+import './style';
+export interface MentionProps {
+    data: MentionData;
+    /**
+     * true：Composer 编辑态（可点、无 hover 摘要弹层）。
+     * false：UserBubble 等只读态（可 hover 看摘要）。
+     */
+    interactive?: boolean;
+    /** form popover 打开时的高亮态（L4 params 启用后使用） */
+    active?: boolean;
+    /** 交互态单击回调 */
+    onClick?: (anchor: HTMLElement) => void;
+}
+export declare function Mention({ data, interactive, active, onClick, }: MentionProps): import("react").JSX.Element;
+export default Mention;

package/dist/mention/index.js

@@ -0,0 +1,90 @@
+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 _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; }
+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; }
+import Popover from "../popover";
+import "./style";
+function formatParamsSummary(params) {
+  if (!params) return null;
+  var entries = Object.entries(params).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      v = _ref2[1];
+    return v != null && v !== '';
+  });
+  if (entries.length === 0) return null;
+  return entries.map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      k = _ref4[0],
+      v = _ref4[1];
+    return "".concat(k, ": ").concat(String(v));
+  }).join(' · ');
+}
+export function Mention(_ref5) {
+  var data = _ref5.data,
+    _ref5$interactive = _ref5.interactive,
+    interactive = _ref5$interactive === void 0 ? false : _ref5$interactive,
+    _ref5$active = _ref5.active,
+    active = _ref5$active === void 0 ? false : _ref5$active,
+    onClick = _ref5.onClick;
+  var clickable = interactive && !!onClick;
+  var state = active ? 'active' : 'complete';
+  var handleClick = clickable ? function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick(e.currentTarget);
+  } : undefined;
+  var handleMouseDown = clickable ? function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  } : undefined;
+  var core = /*#__PURE__*/React.createElement("span", {
+    "data-odn-mention": true,
+    "data-state": state,
+    "data-clickable": clickable || undefined,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-mention-at": true,
+    "aria-hidden": true
+  }, "@"), /*#__PURE__*/React.createElement("span", {
+    "data-odn-mention-label": true
+  }, data.label));
+  if (interactive) return core;
+  var summary = formatParamsSummary(data.params);
+  if (!summary) return core;
+  return /*#__PURE__*/React.createElement(Popover, {
+    trigger: "hover",
+    placement: "top",
+    arrowed: false,
+    offset: 6,
+    mouseEnterDelay: 0.15,
+    mouseLeaveDelay: 0.1,
+    popup: /*#__PURE__*/React.createElement(MentionHoverPopup, {
+      label: data.label,
+      summary: summary
+    })
+  }, core);
+}
+function MentionHoverPopup(_ref6) {
+  var label = _ref6.label,
+    summary = _ref6.summary;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-mention-popover-inner": true
+  }, /*#__PURE__*/React.createElement(MentionPopoverTitle, {
+    label: label
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-odn-mention-popover-summary": true
+  }, summary));
+}
+function MentionPopoverTitle(_ref7) {
+  var label = _ref7.label;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-mention-popover-title": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-mention-popover-at": true,
+    "aria-hidden": true
+  }, "@"), label);
+}
+export default Mention;