one-design-next 0.0.69 → 0.0.71

package/dist/artifact/style/index.css

@@ -1,243 +1,275 @@
+@charset "UTF-8";
 html {
-  --odn-artifact-padding-y: 20px;
-  --odn-artifact-padding-left: 24px;
-  --odn-artifact-padding-right: 0px;
+  /* medium / Card */
+  --odn-artifact-padding-y: 16px;
+  --odn-artifact-padding-x: 16px;
   --odn-artifact-radius: 12px;
-  --odn-artifact-content-gap: 24px;
-  --odn-artifact-copy-width: 216px;
-  --odn-artifact-copy-height: 120px;
-  --odn-artifact-visual-width: 136px;
-  --odn-artifact-visual-inner-width: 96px;
-  --odn-artifact-visual-height: 120px;
+  --odn-artifact-gap: 14px;
+  --odn-artifact-copy-gap: 2px;
+  --odn-artifact-meta-gap: 8px;
+  --odn-artifact-max-width: 320px;
+  --odn-artifact-icon-width: 32px;
+  --odn-artifact-icon-height: 36px;
+  --odn-artifact-min-height: 68px;
+  --odn-artifact-title-size: var(--odn-font-size-text-md);
+  --odn-artifact-title-leading: var(--odn-font-leading-text-md);
+  --odn-artifact-meta-size: var(--odn-font-size-text-mn);
+  --odn-artifact-meta-leading: var(--odn-font-leading-text-mn);
+  /* Card hover：对齐即梦 banner 卡（0.3s / ease-out） */
+  --odn-artifact-hover-duration: 0.3s;
+  --odn-artifact-hover-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --odn-artifact-hover-shift: calc(
+    var(--odn-artifact-icon-width) + var(--odn-artifact-gap)
+  );
+  --odn-artifact-hover-icon-scale: 0.73;
 }
 
 [data-odn-artifact] {
+  box-sizing: border-box;
   position: relative;
-  width: min(100%, 376px);
-  height: var(--odn-artifact-copy-height);
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) var(--odn-artifact-visual-width);
-  align-items: stretch;
-  gap: 0;
-  text-align: left;
-  padding: 0;
-  border: 1px solid transparent;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--odn-artifact-gap);
+  width: 100%;
+  max-width: var(--odn-artifact-max-width);
+  min-height: var(--odn-artifact-min-height);
+  margin: 0;
+  padding: var(--odn-artifact-padding-y) var(--odn-artifact-padding-x);
+  border: 1px solid var(--odn-color-black-4);
   border-radius: var(--odn-artifact-radius);
-  background: radial-gradient(91.56% 103.35% at 86.39% 100%, #deeaff 0%, #ecf4ff 100%);
-  background: radial-gradient(91.56% 103.35% at 86.39% 100%, color(display-p3 0.8789 0.9166 0.9924) 0%, color(display-p3 0.9319 0.9547 0.9956) 100%);
-  color: var(--odn-color-black-11);
-  overflow: hidden;
+  background: var(--odn-color-bg-elevated);
+  color: var(--odn-color-black-12);
+  text-align: left;
+  vertical-align: top;
   transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-[data-odn-artifact][data-odn-artifact-width-mode=fixed-354] {
-  width: 354px;
-  max-width: 354px;
+/* small / Small：仅 Icon + 标题；默认无底色/描边；hover 由 HoverFill 叠灰底 */
+[data-odn-artifact-small-wrap] {
+  width: 100%;
+  max-width: 280px;
 }
 
-[data-odn-artifact][data-odn-artifact-width-mode=fill-min-354] {
-  width: 100%;
-  min-width: 354px;
-  max-width: none;
+.odn-artifact-small-bg {
+  border-radius: 8px;
+}
+
+[data-odn-artifact][data-odn-artifact-size=small] {
+  --odn-artifact-padding-y: 7px;
+  --odn-artifact-padding-x: 12px;
+  --odn-artifact-radius: 8px;
+  --odn-artifact-gap: 8px;
+  --odn-artifact-copy-gap: 0px;
+  --odn-artifact-max-width: 280px;
+  --odn-artifact-icon-width: 14px;
+  --odn-artifact-icon-height: 16px;
+  --odn-artifact-min-height: 0;
+  --odn-artifact-title-size: var(--odn-font-size-text-sm);
+  --odn-artifact-title-leading: var(--odn-font-leading-text-sm);
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  transition: none;
 }
 
 button[data-odn-artifact] {
   cursor: pointer;
   font: inherit;
-  height: 120px;
+  appearance: none;
+}
+
+[data-odn-artifact][data-odn-artifact-clickable]:not([data-odn-artifact-size=small]):hover {
+  border-color: var(--odn-color-black-6);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+[data-odn-artifact][data-odn-artifact-clickable]:focus {
+  outline: none;
+}
+
+[data-odn-artifact][data-odn-artifact-clickable]:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--odn-color-primary) 55%, transparent);
+  outline-offset: 2px;
 }
 
-[data-odn-artifact][data-odn-artifact-clickable]:hover {
-  border-color: var(--odn-color-blue-2);
-  box-shadow: 0 4px 16px color-mix(in srgb, var(--odn-color-blue-2) 18%, transparent);
+[data-odn-artifact-icon] {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: var(--odn-artifact-icon-width);
+  height: var(--odn-artifact-icon-height);
+  line-height: 0;
+  overflow: visible;
 }
 
 [data-odn-artifact-copy] {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  height: var(--odn-artifact-copy-height);
-  padding: var(--odn-artifact-padding-y) var(--odn-artifact-padding-right) var(--odn-artifact-padding-y) var(--odn-artifact-padding-left);
-  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
+  justify-content: center;
+  gap: var(--odn-artifact-copy-gap);
   min-width: 0;
+  flex: 1;
 }
 
 [data-odn-artifact-title] {
+  display: flex;
+  align-items: baseline;
+  min-width: 0;
   margin: 0;
-  font-size: var(--odn-font-size-headline-6);
-  line-height: var(--odn-font-leading-headline-6);
+  font-size: var(--odn-artifact-title-size);
+  line-height: var(--odn-artifact-title-leading);
   font-weight: 500;
   color: var(--odn-color-black-12);
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-[data-odn-artifact-stat-range] {
-  margin: 0;
-  margin-top: 0;
-  font-size: var(--odn-font-size-text-sm);
-  line-height: var(--odn-font-leading-text-sm);
-  color: var(--odn-color-black-12);
-  white-space: nowrap;
+/* 主名前缀可省略；末尾 4 位 + 扩展名始终完整可见（前缀…后四位.ext） */
+[data-odn-artifact-title-name] {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-
-[data-odn-artifact-created-at] {
-  margin: 0;
-  margin-top: 14px;
-  font-size: var(--odn-font-size-text-mn);
-  line-height: var(--odn-font-leading-text-mn);
-  color: var(--odn-color-black-8);
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-[data-odn-artifact][data-odn-artifact-status=Done] [data-odn-artifact-created-at] {
-  color: var(--odn-color-brand-6);
-  font-size: 14px;
-}
-
-[data-odn-artifact][data-odn-artifact-status=Generating] [data-odn-artifact-created-at] {
-  font-size: 14px;
-}
-
-[data-odn-artifact-detail-icon] {
-  display: inline-flex;
-  align-items: center;
-  transform: translateX(-6px);
-  opacity: 0;
-  transition: transform 0.2s ease, opacity 0.2s ease;
 }
 
-[data-odn-artifact][data-odn-artifact-status=Done]:hover [data-odn-artifact-detail-icon] {
-  transform: translateX(0);
-  opacity: 1;
+[data-odn-artifact-title-tail],
+[data-odn-artifact-title-ext] {
+  flex-shrink: 0;
 }
 
-[data-odn-artifact-visual-wrap] {
-  position: relative;
-  z-index: 1;
-  width: var(--odn-artifact-visual-width);
-  height: var(--odn-artifact-visual-height);
+[data-odn-artifact-meta] {
   display: flex;
-  align-items: stretch;
-  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--odn-artifact-meta-gap);
+  min-width: 0;
+  font-size: var(--odn-artifact-meta-size);
+  line-height: var(--odn-artifact-meta-leading);
+  color: var(--odn-color-black-8);
+  font-variant-numeric: tabular-nums;
 }
 
-[data-odn-artifact-visual] {
-  position: relative;
-  width: var(--odn-artifact-visual-inner-width);
-  min-width: var(--odn-artifact-visual-inner-width);
-  height: var(--odn-artifact-visual-height);
-  margin-top: 20px;
-  margin-right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  border: 0;
-  background: #fff;
+[data-odn-artifact-meta-item] {
+  min-width: 0;
   overflow: hidden;
-  transition: transform 0.2s ease;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-[data-odn-artifact][data-odn-artifact-clickable]:hover [data-odn-artifact-visual] {
-  transform: rotate(5deg) scale(1.05);
+/* —— Card hover（参考即梦 button-CB5lvW）——
+ * 1. 左侧大椭圆色光（background ::after radial-gradient，hover opacity .12）
+ * 2. Icon scale(0.73) + 淡出，形成后退感
+ * 3. 文案模块 translateX 至左 padding 16（半透明，让色光透出）
+ */
+[data-odn-artifact]:not([data-odn-artifact-size=small]) {
+  overflow: hidden;
 }
 
-[data-odn-artifact-spotlight] {
+/* 即梦 .background-EkKhlS：全卡裁切层 + 左侧大椭圆 glow */
+[data-odn-artifact-glow] {
   position: absolute;
   inset: 0;
   z-index: 0;
+  border-radius: inherit;
+  overflow: hidden;
   pointer-events: none;
-  opacity: var(--odn-artifact-spot-opacity, 0);
-  transition: opacity 0.2s ease;
-  background: radial-gradient(280px circle at var(--odn-artifact-spot-x, 50%) var(--odn-artifact-spot-y, 50%), color-mix(in srgb, var(--odn-color-blue-2) 42%, transparent) 0%, transparent 62%);
+  opacity: 0;
+  transition: opacity var(--odn-artifact-hover-duration) var(--odn-artifact-hover-ease);
 }
 
-[data-odn-artifact-visual-image] {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+[data-odn-artifact-glow]::after {
+  content: "";
+  position: absolute;
+  /* 尺寸/位置对齐即梦：230×130、左偏 -65、上偏 -30、微旋 -8.4deg */
+  left: -65px;
+  top: -30px;
+  width: 230px;
+  height: 130px;
+  transform: rotate(-8.4deg);
+  background-image: radial-gradient(ellipse at center, var(--odn-artifact-glow-color, #fa8e00), transparent 60%);
+}
+
+[data-odn-artifact][data-odn-artifact-clickable]:not([data-odn-artifact-size=small]):hover > [data-odn-artifact-glow],
+[data-odn-artifact][data-odn-artifact-clickable]:not([data-odn-artifact-size=small]):focus-visible > [data-odn-artifact-glow] {
+  opacity: 0.12;
 }
 
-[data-odn-artifact-generating-icon] {
+[data-odn-artifact]:not([data-odn-artifact-size=small]) [data-odn-artifact-icon] {
+  position: relative;
+  z-index: 1;
+  transform: scale(1);
+  opacity: 1;
+  transform-origin: center center;
+  transition: transform var(--odn-artifact-hover-duration) var(--odn-artifact-hover-ease), opacity var(--odn-artifact-hover-duration) var(--odn-artifact-hover-ease);
+}
+
+[data-odn-artifact-main] {
   position: absolute;
-  left: 50%;
-  top: 48px;
-  transform: translate(-50%, -50%);
+  inset: 0;
   z-index: 2;
-  color: #95a0b0;
+  overflow: hidden;
   pointer-events: none;
 }
 
-[data-odn-artifact-visual-block] {
+[data-odn-artifact]:not([data-odn-artifact-size=small]) [data-odn-artifact-copy] {
   position: absolute;
-  border-radius: 2px;
-  background: #ecf2fe;
-  z-index: 1;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--odn-artifact-padding-x) + var(--odn-artifact-icon-width) + var(--odn-artifact-gap));
+  right: var(--odn-artifact-padding-x);
+  z-index: 2;
+  flex: none;
+  box-sizing: border-box;
+  /* 不铺不透明底，让左侧色光大面积透出（同即梦文案层） */
+  transform: translateX(0);
+  will-change: transform;
+  transition: transform var(--odn-artifact-hover-duration) var(--odn-artifact-hover-ease);
+  pointer-events: none;
 }
 
-[data-odn-artifact-visual-block-a] {
-  width: 40px;
-  height: 6px;
-  left: 12px;
-  top: 12px;
+[data-odn-artifact]:not([data-odn-artifact-size=small]) [data-odn-artifact-title] {
+  pointer-events: auto;
 }
 
-[data-odn-artifact-visual-block-b] {
-  width: 24px;
-  height: 6px;
-  left: 12px;
-  top: 22px;
+[data-odn-artifact][data-odn-artifact-clickable]:not([data-odn-artifact-size=small]):hover [data-odn-artifact-icon],
+[data-odn-artifact][data-odn-artifact-clickable]:not([data-odn-artifact-size=small]):focus-visible [data-odn-artifact-icon] {
+  transform: scale(var(--odn-artifact-hover-icon-scale));
+  opacity: 0;
 }
 
-[data-odn-artifact-visual-block-e] {
-  width: 16px;
-  height: 16px;
-  left: 68px;
-  top: 12px;
-  border-radius: 3.2px;
+[data-odn-artifact][data-odn-artifact-clickable]:not([data-odn-artifact-size=small]):hover [data-odn-artifact-copy],
+[data-odn-artifact][data-odn-artifact-clickable]:not([data-odn-artifact-size=small]):focus-visible [data-odn-artifact-copy] {
+  /* 左移 icon+gap，使文案左缘落到 padding-x（16） */
+  transform: translateX(calc(-1 * var(--odn-artifact-hover-shift)));
 }
 
-[data-odn-artifact-visual-logo] {
+/* Card：操作预期仅 Icon；右侧间距 20 */
+[data-odn-artifact-action] {
   position: absolute;
+  right: 20px;
+  top: 50%;
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
   width: 16px;
   height: 16px;
-  left: 68px;
-  top: 12px;
-  border-radius: 3.2px;
-  overflow: hidden;
-  z-index: 1;
-  background: #ecf2fe;
+  color: var(--odn-color-black-10);
+  pointer-events: none;
+  opacity: 0;
+  transform: translate(4px, -50%);
+  transition: opacity var(--odn-artifact-hover-duration) var(--odn-artifact-hover-ease), transform var(--odn-artifact-hover-duration) var(--odn-artifact-hover-ease);
 }
 
-[data-odn-artifact-visual-logo-image] {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
+[data-odn-artifact][data-odn-artifact-clickable]:hover > [data-odn-artifact-action],
+[data-odn-artifact][data-odn-artifact-clickable]:focus-visible > [data-odn-artifact-action] {
+  opacity: 1;
+  transform: translate(0, -50%);
 }
 
-[data-odn-artifact-visual-block-c] {
-  width: 72px;
-  height: 32px;
-  left: 12px;
-  top: 40px;
+[data-odn-artifact][data-odn-artifact-status=Generating] {
+  opacity: 0.85;
 }
 
-[data-odn-artifact-visual-block-d] {
-  width: 72px;
-  height: 32px;
-  left: 12px;
-  top: 78px;
+[data-odn-artifact][data-odn-artifact-status=Generating] [data-odn-artifact-meta] {
+  color: var(--odn-color-black-7);
 }

package/dist/composer/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
+import type { Attachment, ChipData, ComposerSegment, SendMeta, SkillItem } from '../_genui-types';
 import type { IconName } from '../icon';
-import type { Attachment, ComposerSegment, SkillGroup, SkillItem, SendMeta } from '../_genui-types';
-import type { ChipData } from '../_genui-types';
+import { type SkillSlotProps } from '../skill-slot';
 import type { ComposerParamPanelContext } from './param-panel';
 import './style';
 export type { ComposerParamPanelContext } from './param-panel';
@@ -12,16 +12,26 @@ export type SubmitType = 'enter' | 'shiftEnter';
  * 工具按钮的自定义配置。
  * - `icon`：图标名称（Icon 组件的 name），字段不传则不渲染图标。
  * - `label`：按钮文字，字段不传则不渲染文字。
+ * - `tooltip`：入口 hover 说明；字段不传继承默认；传 `false` 关闭。
  * - 整个配置对象不传（key 不存在于 `toolConfigs`）时使用内置默认值。
- * - 传了配置对象但 icon / label 字段都未设置时，兜底显示工具英文名
+ * - 仅传 `tooltip`（不传 icon / label）时：保留默认图标与文案，只覆盖说明。
+ * - 传了配置对象且 icon / label 均未设置、也未传 tooltip 时（`{}`），兜底显示工具英文名
  *   （如 "attachment" / "webSearch" / "skill"）作为 label，无图标，
  *   方便开发者一眼看出配置遗漏。
  */
 export interface ComposerToolConfig {
     /** 图标名称，类型与 Icon 组件的 name 一致 */
-    icon?: IconName | (string & {});
+    icon?: IconName | (string & Record<never, never>);
     label?: string;
+    /** 工具入口 hover 时展示的功能说明；传 `false` 可关闭 */
+    tooltip?: React.ReactNode;
 }
+/**
+ * Composer 向内嵌 SkillSlot 透传的配置袋。
+ * 技能目录（skills / skillGroups）应由「技能管理」模块维护后注入此处；
+ * Composer 只负责触发入口与选中后插入 chip，不是目录 SSOT。
+ */
+export type ComposerSkillSlotProps = Pick<SkillSlotProps, 'skills' | 'skillGroups' | 'showGroupTitles' | 'menuMaxHeight' | 'menuWidth' | 'onManageSkills' | 'skillManageFooter'>;
 export interface ComposerRef {
     /** 聚焦输入框 */
     focus: (options?: FocusOptions) => void;
@@ -101,7 +111,7 @@ export interface ComposerProps {
      * 形态变体：
      * - `full`（默认）：textarea 独占一行，工具栏常驻下方。
      * - `lite`：单行紧凑布局，textarea 夹在左侧工具按钮和右侧发送按钮之间；
-     *   当内容撑出多行时自动升格为 `full` 布局（一旦升格，清空或发送后才回到 lite 形态）。
+     *   当内容撑出多行时自动升格为 `full` 布局，内容回到单行时自动降格。
      */
     variant?: ComposerVariant;
     /**
@@ -118,7 +128,7 @@ export interface ComposerProps {
      */
     toolsLabeled?: boolean;
     /**
-     * 各工具按钮的自定义配置（icon / label）。按 `ComposerTool` 类型做 key：
+     * 各工具按钮的自定义配置（icon / label / tooltip）。按 `ComposerTool` 类型做 key：
      * - `attachment`：附件按钮
      * - `webSearch`：联网按钮
      * - `skill`：技能按钮
@@ -127,46 +137,25 @@ export interface ComposerProps {
      * - key 不存在于 `toolConfigs` → 使用内置默认值（如附件 = paperclip + '附件'）
      * - key 存在但配置对象中只有 `icon` → 只渲染图标
      * - key 存在但配置对象中只有 `label` → 只渲染文字
+     * - key 存在但只传 `tooltip` → 保留默认 icon / label，只覆盖 hover 说明
      * - key 存在但配置对象为空 `{}` → 兜底显示工具英文名（如 "attachment"）作为 label，无图标
+     * - `tooltip` 传 `false` 可关闭该入口的 tooltip
      *
      * @example
      * ```tsx
      * toolConfigs={{
-     *   attachment: { icon: 'paperclip', label: '上传' },
-     *   webSearch: { label: '搜索' },        // 仅文字
-     *   skill: { icon: 'command' },           // 仅图标
+     *   attachment: { tooltip: '上传材料，补充上下文' }, // 只改说明
+     *   webSearch: { label: '搜索' },                   // 仅文字
+     *   skill: { icon: 'command' },                      // 仅图标
      * }}
      * ```
      */
     toolConfigs?: Partial<Record<ComposerTool, ComposerToolConfig>>;
-    /** 技能列表；当 tools 包含 'skill' 时生效 */
-    skills?: SkillItem[];
-    /**
-     * 分组技能列表（优先级高于 `skills`）。
-     * menu 变体下按分组名分隔展示，组间带标题。
-     */
-    skillGroups?: SkillGroup[];
-    /**
-     * 技能管理回调。提供后会在 skill 弹窗底部渲染按钮。
-     */
-    onManageSkills?: () => void;
-    /**
-     * 技能管理按钮的自定义内容（ReactNode）。
-     * 仅在 `onManageSkills` 提供时生效。
-     * 不传时默认渲染「技能管理」文字 + 右箭头图标。
-     */
-    skillManageFooter?: React.ReactNode;
-    /**
-     * skill 弹窗列表的最大高度（px）。超出此高度后出现滚动条。
-     * 不传则不限高（适合 skill 较少的场景）。
-     * @default undefined（不限高）
-     */
-    skillMenuMaxHeight?: number;
     /**
-     * skill 弹窗的宽度（px）。影响弹窗整体宽度（即每行 item 的宽度）。
-     * @default 260
+     * 向内嵌 SkillSlot 透传的配置袋。
+     * 技能目录由业务 / 技能管理模块维护后注入；Composer 只负责触发入口与插入 chip。
      */
-    skillMenuWidth?: number;
+    skillSlotProps?: ComposerSkillSlotProps;
     /**
      * 提交模式：
      * - `'enter'`（默认）：Enter 发送，Shift+Enter 换行