one-design-next 0.0.90 → 0.0.92

package/dist/composer/utils.d.ts

@@ -127,5 +127,23 @@ export declare function shouldOpenSlashTriggerMenu(trigger: string | null | unde
 export declare const COMPOSER_SKILL_MENU_INSET_PX = 24;
 /** box 尚未量到宽度时的兜底（与旧默认对齐）。 */
 export declare const COMPOSER_SKILL_MENU_FALLBACK_WIDTH = 260;
-/** 未显式传 menuWidth 时，菜单比 composer box 略窄。 */
-export declare function resolveComposerSkillMenuWidth(explicit: number | undefined, boxWidth: number): number;
+/** 高窗口下列表密度上限；矮窗会被视口截住。 */
+export declare const COMPOSER_SKILL_MENU_DENSITY_CAP_PX = 280;
+/** 列表高度地板，约两条 skill，避免搜索把列表挤成 0。 */
+export declare const COMPOSER_SKILL_MENU_MIN_LIST_PX = 88;
+/** 菜单与视口边缘的安全边距。 */
+export declare const COMPOSER_SKILL_MENU_VIEWPORT_GUTTER_PX = 8;
+/** 搜索栏 / 管理入口 / 菜单 padding，不进入列表滚动区。 */
+export declare const COMPOSER_SKILL_MENU_CHROME_PX = 48;
+/** Popover 贴在触发点上方的 mainAxis offset。 */
+export declare const COMPOSER_SKILL_MENU_OFFSET_PX = 4;
+/** 菜单宽跟随 composer box，比输入框略窄。 */
+export declare function resolveComposerSkillMenuWidth(boxWidth: number): number;
+/**
+ * 列表 maxHeight：密度上限与触发点上方可用空间取更矮，再夹到地板。
+ * placement=top 且不翻转，故只算上方剩余。
+ */
+export declare function resolveComposerSkillMenuMaxHeight(input: {
+    triggerTop: number;
+    viewportHeight: number;
+}): number;

package/dist/composer/utils.js

@@ -505,12 +505,32 @@ export function shouldOpenSlashTriggerMenu(trigger, hitCount) {
 export var COMPOSER_SKILL_MENU_INSET_PX = 24;
 /** box 尚未量到宽度时的兜底（与旧默认对齐）。 */
 export var COMPOSER_SKILL_MENU_FALLBACK_WIDTH = 260;
-
-/** 未显式传 menuWidth 时，菜单比 composer box 略窄。 */
-export function resolveComposerSkillMenuWidth(explicit, boxWidth) {
-  if (explicit !== undefined) return explicit;
+/** 高窗口下列表密度上限；矮窗会被视口截住。 */
+export var COMPOSER_SKILL_MENU_DENSITY_CAP_PX = 280;
+/** 列表高度地板，约两条 skill，避免搜索把列表挤成 0。 */
+export var COMPOSER_SKILL_MENU_MIN_LIST_PX = 88;
+/** 菜单与视口边缘的安全边距。 */
+export var COMPOSER_SKILL_MENU_VIEWPORT_GUTTER_PX = 8;
+/** 搜索栏 / 管理入口 / 菜单 padding，不进入列表滚动区。 */
+export var COMPOSER_SKILL_MENU_CHROME_PX = 48;
+/** Popover 贴在触发点上方的 mainAxis offset。 */
+export var COMPOSER_SKILL_MENU_OFFSET_PX = 4;
+
+/** 菜单宽跟随 composer box，比输入框略窄。 */
+export function resolveComposerSkillMenuWidth(boxWidth) {
   if (boxWidth > COMPOSER_SKILL_MENU_INSET_PX) {
     return Math.round(boxWidth - COMPOSER_SKILL_MENU_INSET_PX);
   }
   return COMPOSER_SKILL_MENU_FALLBACK_WIDTH;
+}
+
+/**
+ * 列表 maxHeight：密度上限与触发点上方可用空间取更矮，再夹到地板。
+ * placement=top 且不翻转，故只算上方剩余。
+ */
+export function resolveComposerSkillMenuMaxHeight(input) {
+  var spaceAbove = input.triggerTop - COMPOSER_SKILL_MENU_VIEWPORT_GUTTER_PX - COMPOSER_SKILL_MENU_OFFSET_PX;
+  var available = spaceAbove - COMPOSER_SKILL_MENU_CHROME_PX;
+  var capped = Math.min(COMPOSER_SKILL_MENU_DENSITY_CAP_PX, available);
+  return Math.max(COMPOSER_SKILL_MENU_MIN_LIST_PX, Math.round(capped));
 }

package/dist/hover-fill/index.js

@@ -6,6 +6,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["bgClassName", "bgStyle", "children", "onMouseEnter", "onMouseLeave", "onMouseDown", "hoverColor", "activeColor", "disabled", "hoverCursor"];
 import React, { forwardRef, useCallback, useContext, useEffect, useRef } from 'react';
+import { observeResize } from "../_util/sharedResizeObserver";
 import { ConfigContext } from "../config-provider";
 import "./style";
 var DEFAULT_HOVER_COLOR = 'rgba(33, 34, 38, 0.05)';
@@ -66,8 +67,6 @@ var HoverFill = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
       y = _root$getBoundingClie.y;
     if (window.odnHoverFillState && window.odnHoverFillState.bgVisible && window.odnHoverFillState.bgNode && window.odnHoverFillState.baseNode && window.odnHoverFillState.baseNode !== root && ((_window$odnHoverFillS3 = window.odnHoverFillState.baseNode) === null || _window$odnHoverFillS3 === void 0 ? void 0 : _window$odnHoverFillS3.parentNode) === root.parentNode && hoverFillConfig.sharable) {
       var _window$odnHoverFillS4 = window.odnHoverFillState,
-        bgX = _window$odnHoverFillS4.bgX,
-        bgY = _window$odnHoverFillS4.bgY,
         bgScale = _window$odnHoverFillS4.bgScale,
         baseNode = _window$odnHoverFillS4.baseNode;
       var _baseNode$getBounding = baseNode.getBoundingClientRect(),
@@ -205,6 +204,12 @@ var HoverFill = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
       }, 0);
     }, 100);
   };
+  var handleMouseUp = function handleMouseUp() {
+    window.removeEventListener('mouseup', handleMouseUp, false);
+    if (window.odnHoverFillState.bgNode) {
+      window.odnHoverFillState.bgNode.style.background = window.odnHoverFillState.bgVisible ? hoverColor : 'transparent';
+    }
+  };
   var handleMouseDown = function handleMouseDown(e) {
     e.persist();
     if (disabled) {
@@ -218,12 +223,6 @@ var HoverFill = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
     }
     window.addEventListener('mouseup', handleMouseUp, false);
   };
-  var handleMouseUp = function handleMouseUp() {
-    window.removeEventListener('mouseup', handleMouseUp, false);
-    if (window.odnHoverFillState.bgNode) {
-      window.odnHoverFillState.bgNode.style.background = window.odnHoverFillState.bgVisible ? hoverColor : 'transparent';
-    }
-  };
   useEffect(function () {
     if (!window.odnHoverFillState) {
       window.odnHoverFillState = {
@@ -245,16 +244,10 @@ var HoverFill = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
   }, []);
   useEffect(function () {
     var root = ref.current;
-    if (!root || typeof ResizeObserver === 'undefined') {
+    if (!root) {
       return;
     }
-    var observer = new ResizeObserver(function () {
-      syncBgSize();
-    });
-    observer.observe(root);
-    return function () {
-      observer.disconnect();
-    };
+    return observeResize(root, syncBgSize);
   }, [ref, syncBgSize]);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,

package/dist/index.d.ts

@@ -79,6 +79,6 @@ 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 { ComposerSegmentType } from './_genui-types';
-export type { AgentEvent, Attachment, ChatMessage, ChipData, ComposerInvocationSegment, ComposerMentionSegment, ComposerSegment, ComposerTextSegment, Conversation, InlineRefState, InvocationData, MentionData, MessageSnapshot, PreviewTab, PreviewTarget, SendMeta, SkillGroup, SkillItem, Source, TextData, ToolCall, ToolStatus, } from './_genui-types';
+export type { AgentEvent, Attachment, ChatMessage, ChipData, ComposerInvocationSegment, ComposerMentionSegment, ComposerSegment, ComposerTextSegment, Conversation, InlineRefState, InvocationData, MentionData, MessageSnapshot, PreviewTab, PreviewTarget, SendMeta, SkillItem, Source, TextData, ToolCall, ToolStatus, } from './_genui-types';
 export type { InterruptBase, InterruptIntent, InterruptStatus, } from './_interrupt-types';
 export { isInvocationSegment, isMentionSegment, isTextSegment, rawValueToSegments, segmentsHasContent, segmentsToReadableText, type SegmentsToReadableTextOptions, } from './composer/segments';

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

@@ -1,24 +1,9 @@
 /// <reference types="react" />
-import type { SkillGroup, SkillItem } from '../_genui-types';
+import type { SkillItem } from '../_genui-types';
 import './style';
 export interface SkillSlotProps {
-    /**
-     * 技能列表（扁平结构）。
-     * 当 `skillGroups` 未提供时生效；提供 `skillGroups` 则忽略此项。
-     */
+    /** 技能列表（扁平结构）。 */
     skills?: SkillItem[];
-    /**
-     * 分组技能列表。`menu` / `bar` / `card` 均可使用；优先级高于 `skills`。
-     * 组标题是否展示由 `showGroupTitles` 控制（默认：menu 展示，bar/card 不展示）。
-     */
-    skillGroups?: SkillGroup[];
-    /**
-     * 是否展示分组标题。
-     * - 不传：`menu` 为 true，`bar` / `card` 为 false
-     * - 显式传入则覆盖默认
-     * 仅在提供 `skillGroups` 时生效；空 `groupName` 始终不渲染标题。
-     */
-    showGroupTitles?: boolean;
     variant?: 'menu' | 'bar' | 'card';
     /** 当前选中的 skill id（受控标识；不驱动选中视觉）。 */
     value?: string | null;

package/dist/skill-slot/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Fragment, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import HoverFill from "../hover-fill";
 import Icon from "../icon";
 import Input from "../input";
@@ -84,8 +84,6 @@ function SkillDescPopover(_ref) {
 
 export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
   var skillsProp = _ref2.skills,
-    skillGroups = _ref2.skillGroups,
-    showGroupTitlesProp = _ref2.showGroupTitles,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'bar' : _ref2$variant,
     onSelect = _ref2.onSelect,
@@ -113,38 +111,14 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
 
   /* 目录全集：过滤前的列表。目录为空才整棵不渲染。 */
   var catalogSkills = useMemo(function () {
-    if (skillGroups) return skillGroups.flatMap(function (g) {
-      return g.skills;
-    });
     return skillsProp !== null && skillsProp !== void 0 ? skillsProp : [];
-  }, [skillGroups, skillsProp]);
-  var visibleGroups = useMemo(function () {
-    if (!skillGroups) return undefined;
-    if (!searchableMenu) return skillGroups;
-    return skillGroups.map(function (g) {
-      return {
-        groupName: g.groupName,
-        skills: g.skills.filter(function (s) {
-          return skillMatchesQuery(s, searchQuery);
-        })
-      };
-    }).filter(function (g) {
-      return g.skills.length > 0;
-    });
-  }, [skillGroups, searchableMenu, searchQuery]);
-
-  /* 优先使用过滤后的 skillGroups，否则回退到 skills。 */
+  }, [skillsProp]);
   var skills = useMemo(function () {
-    if (visibleGroups) return visibleGroups.flatMap(function (g) {
-      return g.skills;
-    });
     if (!searchableMenu) return catalogSkills;
     return catalogSkills.filter(function (s) {
       return skillMatchesQuery(s, searchQuery);
     });
-  }, [visibleGroups, catalogSkills, searchableMenu, searchQuery]);
-  var showGroupTitles = showGroupTitlesProp !== null && showGroupTitlesProp !== void 0 ? showGroupTitlesProp : variant === 'menu';
-  var groupedWithTitles = !!(skillGroups && showGroupTitles);
+  }, [catalogSkills, searchableMenu, searchQuery]);
   /* menu 变体：HoverFill 只管鼠标。键盘高亮视觉暂时关闭（见 style），
    * 避免 mouseleave 后 ::before 接力造成闪一下。`activeIndex` / ↑↓ / Enter
    * 数据层仍工作，恢复视觉时解开 item-highlighted ::before 即可。
@@ -421,53 +395,11 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
     }
     return barButton;
   };
-
-  /* 分组渲染：是否画标题由 showGroupTitles 决定。
-   * menu 项必须与标题/分割线同级挂在 list 根下——HoverFill 跨项共享背景要求同一
-   * parentNode；若再包一层 group / group-items，跨组必闪。bar/card 不用 HoverFill，
-   * 仍用 group 壳承接 flex/grid。 */
-  var renderGroups = function renderGroups() {
-    var flatIndex = 0;
-    if (variant === 'menu') {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, visibleGroups.map(function (group, groupIdx) {
-        return /*#__PURE__*/React.createElement(Fragment, {
-          key: group.groupName || "_group_".concat(groupIdx)
-        }, showGroupTitles && group.groupName ? /*#__PURE__*/React.createElement("div", {
-          "data-odn-skill-slot-group-header": true
-        }, group.groupName) : null, group.skills.map(function (skill) {
-          return renderMenuItem(skill, flatIndex++);
-        }), groupIdx < visibleGroups.length - 1 ? /*#__PURE__*/React.createElement("div", {
-          "data-odn-skill-slot-divider": true,
-          "data-odn-skill-slot-group-divider": true
-        }) : null);
-      }));
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, visibleGroups.map(function (group, groupIdx) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: group.groupName || "_group_".concat(groupIdx),
-        "data-odn-skill-slot-group": true
-      }, showGroupTitles && group.groupName ? /*#__PURE__*/React.createElement("div", {
-        "data-odn-skill-slot-group-header": true
-      }, group.groupName) : null, /*#__PURE__*/React.createElement("div", {
-        "data-odn-skill-slot-group-items": true
-      }, group.skills.map(function (skill) {
-        return variant === 'card' ? renderCardItem(skill) : renderBarItem(skill);
-      })));
-    }));
-  };
-
-  /* 扁平模式下渲染所有项（menu / bar / card）。 */
-  var renderFlatItems = function renderFlatItems() {
-    return skills.map(function (skill, index) {
-      if (variant === 'card') return renderCardItem(skill);
-      if (variant === 'menu') return renderMenuItem(skill, index);
-      return renderBarItem(skill);
-    });
-  };
-
-  /* 有 skillGroups：始终按组遍历（保序）；无标题时仍走分组 DOM，仅不渲染 header，
-   * bar/card 用 group-items 承接原有 flex/grid，避免拍平后丢组边界。 */
-  var listBody = visibleGroups ? renderGroups() : renderFlatItems();
+  var listBody = skills.map(function (skill, index) {
+    if (variant === 'card') return renderCardItem(skill);
+    if (variant === 'menu') return renderMenuItem(skill, index);
+    return renderBarItem(skill);
+  });
   var manageBtn = renderManageBtn();
   var searchBar = searchableMenu ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-odn-skill-slot-toolbar": true
@@ -533,7 +465,6 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
     return /*#__PURE__*/React.createElement("div", {
       "data-odn-skill-slot": true,
       "data-odn-skill-slot-variant": variant,
-      "data-odn-skill-slot-grouped": groupedWithTitles || undefined,
       className: className,
       style: rootStyle
     }, listBody);
@@ -547,7 +478,6 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
   return /*#__PURE__*/React.createElement("div", {
     "data-odn-skill-slot": true,
     "data-odn-skill-slot-variant": variant,
-    "data-odn-skill-slot-grouped": groupedWithTitles || undefined,
     className: className,
     style: rootStyle
   }, searchBar, hasScrollWrap ? /*#__PURE__*/React.createElement("div", {

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

@@ -151,7 +151,7 @@
   align-items: flex-start;
   gap: 8px;
   width: 100%;
-  padding: 8px 12px;
+  padding: 4px 12px;
   font-size: 13px;
   color: var(--odn-color-black-12);
   text-align: left;
@@ -196,77 +196,14 @@
   word-break: break-word;
 }
 
-/* ---- menu 分组标题 ----
- * 分类名不做 uppercase。组间分割线画在组末、左右内缩，不跟标题叠尾线。 */
-[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-group-header] {
-  padding: 0 16px 4px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--odn-color-black-8);
-  line-height: 20px;
-  user-select: none;
-  pointer-events: none;
-}
-
-[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-list] > [data-odn-skill-slot-group-header]:first-child {
-  padding-top: 4px;
-}
-
-/* 无组标题时：group 壳不参与布局，子项仍挂在根 flex/grid 上（与拍平一致） */
-[data-odn-skill-slot]:not([data-odn-skill-slot-grouped]) [data-odn-skill-slot-group],
-[data-odn-skill-slot]:not([data-odn-skill-slot-grouped]) [data-odn-skill-slot-group-items] {
-  display: contents;
-}
-
-/* 有组标题：根改为纵向堆叠组；组内再承接原 bar flex / card grid */
-[data-odn-skill-slot][data-odn-skill-slot-grouped][data-odn-skill-slot-variant=bar],
-[data-odn-skill-slot][data-odn-skill-slot-grouped][data-odn-skill-slot-variant=card] {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  gap: 12px;
-  grid-template-columns: none;
-}
-
-[data-odn-skill-slot][data-odn-skill-slot-grouped][data-odn-skill-slot-variant=bar] [data-odn-skill-slot-group-items] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-[data-odn-skill-slot][data-odn-skill-slot-grouped][data-odn-skill-slot-variant=card] [data-odn-skill-slot-group-items] {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px;
-}
-
-[data-odn-skill-slot][data-odn-skill-slot-variant=bar] [data-odn-skill-slot-group-header],
-[data-odn-skill-slot][data-odn-skill-slot-variant=card] [data-odn-skill-slot-group-header] {
-  padding: 0 2px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--odn-color-black-8);
-  line-height: 20px;
-  user-select: none;
-  pointer-events: none;
-}
-
 /* ---- menu 分隔线 ----
- * 通栏：搜索栏 / 技能管理，标「内容 ↔ 系统操作」。
- * 组间：仅无标题时出现，左右内缩对齐文案（macOS 菜单）。 */
+ * 通栏：搜索栏 / 技能管理，标「内容 ↔ 系统操作」。 */
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-divider] {
   margin: 4px 0;
   height: 1px;
   background: var(--odn-color-black-5);
 }
 
-[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-group-divider] {
-  box-sizing: content-box;
-  margin: 0 16px;
-  padding: 8px 0;
-  background-clip: content-box;
-}
-
 /* ---- menu 管理按钮：hug 内容宽；在顶栏靠右，无搜索时仍在列表底 ---- */
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-manage-btn] {
   display: inline-flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.90",
+  "version": "0.0.92",
   "description": "One Design Next from TAD@tencent.com",
   "license": "MIT",
   "type": "module",