one-design-next 0.0.70 → 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/index.d.ts

@@ -55,7 +55,7 @@ export { default as ActionBar, type ActionBarProps } from './action-bar';
 export { default as AgentStep, type AgentStepGroupProps, type AgentStepProps, } from './agent-step';
 export { default as AgentThink, type AgentThinkProps } from './agent-think';
 export { APPROVAL_DEFAULT_ACTIONS_HINT, default as Approval, type ApprovalDecision, type ApprovalProps, type ApprovalResolvePayload, type ApprovalSpec, type ApprovalSummaryItem, } from './approval';
-export { default as Artifact, type ArtifactProps } from './artifact';
+export { ARTIFACT_DEDICATED_FILE_ICON_TYPES, ARTIFACT_FILE_GLOW_COLORS, ARTIFACT_FILE_ICON_TYPES, default as Artifact, ArtifactFileIcon, getArtifactAction, getArtifactGlowColor, type ArtifactAction, type ArtifactActionKind, type ArtifactFileIconProps, type ArtifactFileIconSize, type ArtifactFileIconType, type ArtifactProps, type ArtifactSize, } from './artifact';
 export { default as Attachments, type AttachmentsProps } from './attachments';
 export { default as ChatItem, formatRelativeTime, type ChatItemProps, } from './chat-item';
 export { default as ChatList, matchChatListFilterTime, matchChatListFilterType, type ChatListFilterTime, type ChatListFilterType, type ChatListItem, type ChatListProps, } from './chat-list';

package/dist/index.js

@@ -61,7 +61,7 @@ export { default as ActionBar } from "./action-bar";
 export { default as AgentStep } from "./agent-step";
 export { default as AgentThink } from "./agent-think";
 export { APPROVAL_DEFAULT_ACTIONS_HINT, default as Approval } from "./approval";
-export { default as Artifact } from "./artifact";
+export { ARTIFACT_DEDICATED_FILE_ICON_TYPES, ARTIFACT_FILE_GLOW_COLORS, ARTIFACT_FILE_ICON_TYPES, default as Artifact, ArtifactFileIcon, getArtifactAction, getArtifactGlowColor } from "./artifact";
 export { default as Attachments } from "./attachments";
 export { default as ChatItem, formatRelativeTime } from "./chat-item";
 export { default as ChatList, matchChatListFilterTime, matchChatListFilterType } from "./chat-list";

package/package.json

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