one-design-next 0.0.29 → 0.0.30

package/dist/composer/index.js

@@ -115,6 +115,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     triggerActiveIndex = _useState8[0],
     setTriggerActiveIndex = _useState8[1];
+  /** trigger menu 的命令式句柄：导航语义在 SkillSlot 内，composer 只转发 ↑↓。 */
+  var triggerSkillSlotRef = useRef(null);
   /** lite 模式下由单行升格到多行布局；粘性：只在 text 清空时复位 */
   var _useState9 = useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
@@ -481,11 +483,16 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
    * `@` 触发本轮不接（mention 数据源待业务接入），onTriggerChange 拿到也不弹。 */
   var triggerMenuVisible = !!(triggerInfo && triggerInfo.trigger === '/' && skills && skills.length > 0);
 
-  /* query 变化或浮层关闭 → 高亮项重置到第一项。
+  /* query 变化或浮层关闭 → 高亮项重置到「最上方的可用项」（跳过 disabled）。
    * 用 query 而不是 triggerInfo 整体当依赖：rect 变化（光标移位）不应该 reset。 */
   useEffect(function () {
-    setTriggerActiveIndex(0);
-  }, [triggerInfo === null || triggerInfo === void 0 ? void 0 : triggerInfo.query, triggerInfo == null]);
+    var _ref3;
+    var list = (_ref3 = filteredSkills !== null && filteredSkills !== void 0 ? filteredSkills : skills) !== null && _ref3 !== void 0 ? _ref3 : [];
+    var first = list.findIndex(function (s) {
+      return !s.disabled;
+    });
+    setTriggerActiveIndex(first === -1 ? 0 : first);
+  }, [filteredSkills, skills, triggerInfo === null || triggerInfo === void 0 ? void 0 : triggerInfo.query, triggerInfo == null]);
 
   /* editor 在 trigger 激活时把 ↑↓Enter Esc Tab 丢过来。返回 true = editor 别管了。
    * - ↑↓ 改高亮 index（夹在 [0, max] 内）
@@ -493,25 +500,25 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
    * - Escape 关 menu，焦点保留在 editor */
   var handleTriggerKeyDown = useCallback(function (e) {
     if (!triggerMenuVisible) return false;
-    var list = filteredSkills;
-    var max = list ? list.length - 1 : -1;
+
+    /* ↑↓ 导航完全委托给 SkillSlot（唯一事实源：跳过 disabled、夹边、滚动进视口），
+     * composer 焦点留在 editor，仅把按键转发进去。 */
     if (e.key === 'ArrowDown') {
+      var _triggerSkillSlotRef$;
       e.preventDefault();
-      if (max >= 0) setTriggerActiveIndex(function (i) {
-        return Math.min(i + 1, max);
-      });
+      (_triggerSkillSlotRef$ = triggerSkillSlotRef.current) === null || _triggerSkillSlotRef$ === void 0 || _triggerSkillSlotRef$.moveActive('down');
       return true;
     }
     if (e.key === 'ArrowUp') {
+      var _triggerSkillSlotRef$2;
       e.preventDefault();
-      if (max >= 0) setTriggerActiveIndex(function (i) {
-        return Math.max(i - 1, 0);
-      });
+      (_triggerSkillSlotRef$2 = triggerSkillSlotRef.current) === null || _triggerSkillSlotRef$2 === void 0 || _triggerSkillSlotRef$2.moveActive('up');
       return true;
     }
     if (e.key === 'Enter' && !e.shiftKey || e.key === 'Tab') {
+      var _triggerSkillSlotRef$3, _triggerSkillSlotRef$4;
       e.preventDefault();
-      var _skill = list === null || list === void 0 ? void 0 : list[triggerActiveIndex];
+      var _skill = (_triggerSkillSlotRef$3 = (_triggerSkillSlotRef$4 = triggerSkillSlotRef.current) === null || _triggerSkillSlotRef$4 === void 0 ? void 0 : _triggerSkillSlotRef$4.getActiveSkill()) !== null && _triggerSkillSlotRef$3 !== void 0 ? _triggerSkillSlotRef$3 : filteredSkills === null || filteredSkills === void 0 ? void 0 : filteredSkills[triggerActiveIndex];
       if (_skill) handleSelectSkill(_skill, 'trigger');
       return true;
     }
@@ -532,7 +539,9 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     var el = triggerAnchorRef.current;
     if (!el || !triggerInfo) return;
     el.style.left = "".concat(triggerInfo.rect.left, "px");
-    el.style.top = "".concat(triggerInfo.rect.bottom, "px");
+    /* 锚到 caret 行顶部，配合 placement=topLeft 让 menu 浮在输入内容上方，
+     * 不遮挡正在输入的文字（空间不足时 Popover flip 会自动回落到下方）。 */
+    el.style.top = "".concat(triggerInfo.rect.top, "px");
   }, [triggerInfo]);
 
   /* ---- Derived ---- */
@@ -825,7 +834,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
   var triggerMenu = skills && skills.length > 0 ? /*#__PURE__*/React.createElement(Popover, {
     trigger: "click",
     arrowed: false,
-    placement: "bottomLeft",
+    placement: "topLeft",
     offset: 4,
     visible: triggerMenuVisible,
     onVisibleChange: function onVisibleChange(v) {
@@ -837,6 +846,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     },
     popupClassName: "odn-composer-skill-popup",
     popup: /*#__PURE__*/React.createElement(SkillSlot, {
+      ref: triggerSkillSlotRef,
       variant: "menu",
       skills: filteredSkills !== null && filteredSkills !== void 0 ? filteredSkills : [],
       activeIndex: triggerActiveIndex,

package/dist/index.d.ts

@@ -64,7 +64,7 @@ export { default as Invocation, InvocationParamPopover, type InvocationProps, ty
 export { type ComposerParamPanelContext } from './composer/param-panel';
 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 SkillSlot, type SkillSlotHandle, 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';

package/dist/skill-slot/index.d.ts

@@ -8,22 +8,28 @@ export interface SkillSlotProps {
     value?: string | null;
     onSelect?: (skill: SkillItem) => void;
     /**
-     * 受控的"键盘高亮"项 index（区别于 `value` 的"业务选中"语义）。
-     * 仅 menu 变体响应。鼠标 hover 与键盘高亮共享同一套视觉（HoverFill），
-     * 鼠标交互时优先级高于键盘；鼠标离开后键盘 activeIndex 才接管视觉。
+     * 受控的"键盘高亮"项 index（区别于 `value` 的"业务选中"语义）。仅 menu 变体响应。
      *
-     * - 不传 → 不接管键盘高亮，纯鼠标交互
-     * - 传入 → 鼠标 hover item 会回调 `onActiveIndexChange` 同步外部状态；
-     *   外部按 ↑↓ 改 activeIndex 时，SkillSlot 通过给目标 HoverFill dispatch
-     *   合成 `mouseover` 让其触发原生视觉链路（与真实鼠标 hover 完全等价）
+     * 键盘导航语义（↑↓/Home/End 移动、跳过 disabled、夹边、滚动进视口）由 SkillSlot
+     * 自己负责，是唯一事实源。两种驱动方式：
+     * - 不传 `activeIndex` → 非受控：menu 容器自身可聚焦，直接响应键盘。
+     * - 传入 `activeIndex` → 受控：业务持有高亮 state（如 composer 焦点留在 editor，
+     *   通过 `ref` 调用 `moveActive` 转发 ↑↓），SkillSlot 通过 `onActiveIndexChange`
+     *   回写。鼠标 hover 也走同一套 index，保证鼠标/键盘指向同一项。
      */
     activeIndex?: number;
     onActiveIndexChange?: (index: number) => void;
     className?: string;
     style?: React.CSSProperties;
 }
-export declare function SkillSlot({ skills, variant, value, onSelect, activeIndex, onActiveIndexChange, className, style, }: SkillSlotProps): import("react").JSX.Element | null;
-export declare namespace SkillSlot {
-    var displayName: string;
+/** 命令式句柄：供"焦点不在 menu 上"的宿主（如 composer 的 contenteditable）转发键盘。 */
+export interface SkillSlotHandle {
+    /** 按方向移动高亮项，自动跳过 disabled、夹边。 */
+    moveActive: (dir: 'up' | 'down' | 'home' | 'end') => void;
+    /** 当前高亮项（无则 null）。 */
+    getActiveSkill: () => SkillItem | null;
+    /** 当前高亮 index（无则 -1）。 */
+    getActiveIndex: () => number;
 }
+export declare const SkillSlot: import("react").ForwardRefExoticComponent<SkillSlotProps & import("react").RefAttributes<SkillSlotHandle>>;
 export default SkillSlot;

package/dist/skill-slot/index.js

@@ -1,8 +1,22 @@
+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 { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import HoverFill from "../hover-fill";
 import Icon from "../icon";
 import Tooltip from "../tooltip";
 import "./style";
-export function SkillSlot(_ref) {
+
+/* 给 listbox / option 生成稳定且唯一的 id 前缀（aria-activedescendant 需要）。
+ * 模块级自增 + useState 初始化，保证每个实例 mount 期间 id 稳定。 */
+var skillSlotIdSeq = 0;
+
+/** 命令式句柄：供"焦点不在 menu 上"的宿主（如 composer 的 contenteditable）转发键盘。 */
+
+export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
   var skills = _ref.skills,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'bar' : _ref$variant,
@@ -20,18 +34,151 @@ export function SkillSlot(_ref) {
    * activeIndex → highlighted 转移过来，鼠标走后 highlighted 接力。
    *
    * 颜色用 HoverFill 默认 hoverColor 同值（rgba(33,34,38,0.05)），过渡也用
-   * 颜色 transition，视觉看起来一致。 */
+   * 颜色 transition，视觉看起来一致。
+   *
+   * 键盘导航（仅 menu）：
+   * - 受控：业务传 `activeIndex`（如 composer 把 editor 的 ↑↓ 转发进来），
+   *   组件只反映高亮 + 回调 `onActiveIndexChange`，自身不维护状态。
+   * - 非受控：未传 `activeIndex` 时，menu 容器自身可聚焦（tabIndex），内部
+   *   维护高亮 index，监听 ↑↓ / Home / End 移动、Enter / Space 选中，
+   *   并自动跳过 disabled 项、把高亮项滚动进视口。 */
+
+  var _useState = useState(function () {
+      return "odn-skill-slot-".concat(++skillSlotIdSeq);
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    listboxId = _useState2[0];
+  var _useState3 = useState(-1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalActiveIndex = _useState4[0],
+    setInternalActiveIndex = _useState4[1];
+  var isControlled = activeIndex != null;
+  var currentIndex = isControlled ? activeIndex : internalActiveIndex;
+  var itemRefs = useRef([]);
+
+  /* disabled 与 active 互斥：已选中项不算 disabled（与渲染逻辑保持一致）。 */
+  var isItemDisabled = function isItemDisabled(skill) {
+    return !!skill.disabled && value !== skill.id;
+  };
+
+  /* 高亮项变化时滚动进视口（menu 列表可能超出浮层高度）。 */
+  useEffect(function () {
+    var _itemRefs$current$cur;
+    if (variant !== 'menu' || currentIndex < 0) return;
+    (_itemRefs$current$cur = itemRefs.current[currentIndex]) === null || _itemRefs$current$cur === void 0 || _itemRefs$current$cur.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [variant, currentIndex]);
+  var applyActiveIndex = function applyActiveIndex(next) {
+    if (isControlled) onActiveIndexChange === null || onActiveIndexChange === void 0 || onActiveIndexChange(next);else setInternalActiveIndex(next);
+  };
+
+  /* 从 start 起按 dir 方向找第一个非 disabled 项；找不到返回 -1（不环绕，夹边）。 */
+  var findEnabled = function findEnabled(start, dir) {
+    for (var i = start; i >= 0 && i < skills.length; i += dir) {
+      if (!isItemDisabled(skills[i])) return i;
+    }
+    return -1;
+  };
+
+  /* 唯一的导航语义入口：按方向算出下一个可用项并应用。键盘事件与命令式 ref 共用。 */
+  var step = function step(dir) {
+    if (skills.length === 0) return;
+    var next = -1;
+    switch (dir) {
+      case 'down':
+        next = findEnabled(currentIndex < 0 ? 0 : currentIndex + 1, 1);
+        break;
+      case 'up':
+        next = findEnabled(currentIndex < 0 ? skills.length - 1 : currentIndex - 1, -1);
+        break;
+      case 'home':
+        next = findEnabled(0, 1);
+        break;
+      case 'end':
+        next = findEnabled(skills.length - 1, -1);
+        break;
+    }
+    if (next !== -1) applyActiveIndex(next);
+  };
+
+  /* 命令式句柄：让焦点不在 menu 上的宿主（composer）把 ↑↓ 转发进来，
+   * 导航/选中语义仍只有 SkillSlot 这一份。 */
+  useImperativeHandle(ref, function () {
+    return {
+      moveActive: step,
+      getActiveSkill: function getActiveSkill() {
+        return currentIndex >= 0 && currentIndex < skills.length ? skills[currentIndex] : null;
+      },
+      getActiveIndex: function getActiveIndex() {
+        return currentIndex;
+      }
+    };
+  },
+  // currentIndex / skills 变化时句柄需读到最新值
+  [currentIndex, skills]);
+  var handleMenuKeyDown = function handleMenuKeyDown(e) {
+    if (skills.length === 0) return;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        step('down');
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        step('up');
+        break;
+      case 'Home':
+        e.preventDefault();
+        step('home');
+        break;
+      case 'End':
+        e.preventDefault();
+        step('end');
+        break;
+      case 'Enter':
+      case ' ':
+        {
+          if (currentIndex >= 0 && currentIndex < skills.length && !isItemDisabled(skills[currentIndex])) {
+            e.preventDefault();
+            onSelect === null || onSelect === void 0 || onSelect(skills[currentIndex]);
+          }
+          break;
+        }
+      default:
+        break;
+    }
+  };
+
+  /* 非受控时获得焦点 → 默认高亮第一个可用项。 */
+  var handleMenuFocus = function handleMenuFocus() {
+    if (isControlled || internalActiveIndex >= 0) return;
+    var next = findEnabled(0, 1);
+    if (next !== -1) setInternalActiveIndex(next);
+  };
 
+  /* 非受控时焦点离开整个 menu → 清掉高亮，避免失焦后残留。 */
+  var handleMenuBlur = function handleMenuBlur(e) {
+    if (isControlled) return;
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    setInternalActiveIndex(-1);
+  };
   if (skills.length === 0) return null;
   return /*#__PURE__*/React.createElement("div", {
     "data-odn-skill-slot": true,
     "data-odn-skill-slot-variant": variant,
-    role: variant === 'menu' && activeIndex != null ? 'listbox' : undefined,
+    id: variant === 'menu' ? listboxId : undefined,
+    role: variant === 'menu' ? 'listbox' : undefined,
+    tabIndex: variant === 'menu' ? 0 : undefined,
+    "aria-activedescendant": variant === 'menu' && currentIndex >= 0 ? "".concat(listboxId, "-opt-").concat(currentIndex) : undefined,
+    onKeyDown: variant === 'menu' ? handleMenuKeyDown : undefined,
+    onFocus: variant === 'menu' ? handleMenuFocus : undefined,
+    onBlur: variant === 'menu' ? handleMenuBlur : undefined,
     className: className,
     style: style
   }, skills.map(function (skill, index) {
     var active = value === skill.id;
-    var highlighted = activeIndex === index;
+    var highlighted = currentIndex === index;
     /* disabled 与 active 互斥时，active 优先（已选中不应再渲染禁用样态）。
      * onSelect 通过 button[disabled] 自然短路；HoverFill 也走 disabled 关掉 hover 反馈。 */
     var disabled = !!skill.disabled && !active;
@@ -61,20 +208,23 @@ export function SkillSlot(_ref) {
       }, skill.description));
     }
     if (variant === 'menu') {
-      /* HoverFill 包 button，视觉由 HoverFill 命令式控制。
-       * 键盘 ↑↓ 走外部 effect 给 itemHostRefs[i] dispatch mouseover，
-       * React 转成 onMouseEnter，HoverFill 自然走原生 hover 视觉链路。
-       * 视觉只有 HoverFill 一套，鼠标键盘视觉本质完全相同。 */
+      /* HoverFill 包 button：鼠标 hover 视觉由 HoverFill 命令式控制；
+       * 键盘高亮走 button 上的 data-odn-skill-slot-item-highlighted ::before 层。
+       * 两层互斥（hover 时不画 ::before），颜色同值，视觉一致。 */
       return /*#__PURE__*/React.createElement(HoverFill, {
         key: skill.id,
         "data-odn-skill-slot-item-wrap": true,
         bgClassName: "odn-skill-slot-item-bg",
         disabled: active || disabled,
         onMouseEnter: function onMouseEnter() {
-          /* 鼠标进入：把键盘 activeIndex 同步过来，让两条轨道始终指向同一项，
-           * 避免鼠标移开后键盘 active 还指向另一项造成"鬼影高亮"。 */
-          if (!disabled && onActiveIndexChange && activeIndex !== index) {
-            onActiveIndexChange(index);
+          /* 鼠标进入：把高亮 index 同步过来，让鼠标/键盘两条轨道始终指向同一项，
+           * 避免鼠标移开后键盘 active 还指向另一项造成"鬼影高亮"。
+           * 受控走 onActiveIndexChange，非受控更新内部 state。 */
+          if (disabled) return;
+          if (isControlled) {
+            if (onActiveIndexChange && activeIndex !== index) onActiveIndexChange(index);
+          } else if (internalActiveIndex !== index) {
+            setInternalActiveIndex(index);
           }
         }
         /* 阻止 contenteditable 在 mousedown 时 blur，否则点 menu item 的瞬间
@@ -84,12 +234,17 @@ export function SkillSlot(_ref) {
         }
       }, /*#__PURE__*/React.createElement("button", {
         type: "button",
+        id: "".concat(listboxId, "-opt-").concat(index),
+        ref: function ref(el) {
+          itemRefs.current[index] = el;
+        },
         "data-odn-skill-slot-item": true,
         "data-odn-skill-slot-item-active": active || undefined,
         "data-odn-skill-slot-item-highlighted": highlighted || undefined,
         "data-odn-skill-slot-item-disabled": disabled || undefined,
-        role: activeIndex != null ? 'option' : undefined,
-        "aria-selected": activeIndex != null ? highlighted : undefined,
+        role: "option",
+        "aria-selected": highlighted,
+        tabIndex: -1,
         disabled: disabled,
         "aria-disabled": disabled || undefined,
         onClick: function onClick() {
@@ -134,6 +289,6 @@ export function SkillSlot(_ref) {
     }
     return barButton;
   }));
-}
+});
 SkillSlot.displayName = 'SkillSlot';
 export default SkillSlot;

package/dist/skill-slot/style/index.css

@@ -16,7 +16,7 @@
 }
 
 .odn-skill-slot-item-bg {
-  border-radius: var(--odn-border-radius);
+  border-radius: 0;
 }
 
 /* ---- variant: menu ---- */
@@ -24,6 +24,11 @@
   display: flex;
   flex-direction: column;
   padding: 4px 0;
+  /* 容器走 aria-activedescendant 模式（焦点留在 listbox，高亮项由 ::before 指示），
+   * 故去掉容器自身的焦点描边，避免与高亮视觉重复。 */
+}
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu]:focus, [data-odn-skill-slot][data-odn-skill-slot-variant=menu]:focus-visible {
+  outline: none;
 }
 
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item-wrap] {
@@ -44,7 +49,8 @@
 }
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item] > [data-odn-icon] {
   flex-shrink: 0;
-  margin-top: 2px;
+  /* 与标签首行（line-height 22px）的视觉中线对齐：(22 - 14) / 2 = 4px */
+  margin-top: 4px;
 }
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item] {
   /* 键盘高亮：独立视觉层，颜色与 HoverFill 默认 hoverColor 完全一致，过渡用
@@ -63,7 +69,7 @@
   position: absolute;
   inset: 0;
   background: rgba(33, 34, 38, 0.05);
-  border-radius: var(--odn-border-radius);
+  border-radius: 0;
   transition: background-color 0.18s ease;
   pointer-events: none;
   z-index: -1;
@@ -192,7 +198,7 @@
 [data-odn-skill-slot-item-content] {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
   min-width: 0;
   flex: 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "description": "One Design Next from TAD@tencent.com",
   "packageManager": "pnpm@10.33.0",
   "module": "dist/index.js",