one-design-next 0.0.25 → 0.0.26

package/dist/artifact/index.d.ts

@@ -1,15 +1,5 @@
 /// <reference types="react" />
 import './style';
-export interface ArtifactShimmerOptions {
-    durationMs?: number;
-    /** 每秒扫光次数（优先级高于 durationMs）。 */
-    frequencyHz?: number;
-    angleDeg?: number;
-    bandSizePercent?: number;
-    baseOpacity?: number;
-    highlightOpacity?: number;
-    easing?: string;
-}
 export interface ArtifactProps {
     title: string;
     statRange: string;
@@ -17,15 +7,16 @@ export interface ArtifactProps {
     /** 预留字段：当前卡片不展示。 */
     type?: string;
     status?: 'Generating' | 'Done' | (string & {});
-    shimmer?: ArtifactShimmerOptions;
     thumbnailUrl?: string;
+    /** 右上角品牌 LOGO（16x16），不传时展示兜底占位块。 */
+    brandLogoUrl?: string;
     onOpen?: () => void;
 }
 /**
  * 对话流内的单个产物摘要卡片。
  * 本期聚焦单项展示，保留 `type` 字段以支持未来“报告 / 人群”等产物类型扩展。
  */
-export declare function Artifact({ title, statRange, createdAt, status, shimmer, thumbnailUrl, onOpen, }: ArtifactProps): import("react").JSX.Element;
+export declare function Artifact({ title, statRange, createdAt, status, thumbnailUrl, brandLogoUrl, onOpen, }: ArtifactProps): import("react").JSX.Element;
 export declare namespace Artifact {
     var displayName: string;
 }

package/dist/artifact/index.js

@@ -11,21 +11,48 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 { useState } from 'react';
+import { motion } from 'motion/react';
 import Icon from "../icon";
 import "./style";
+var PEN_VARIANTS = {
+  normal: {
+    rotate: 0,
+    x: 0,
+    y: 0
+  },
+  animate: {
+    rotate: [-0.3, 0.2, -0.4],
+    x: [0, -0.5, 1, 0],
+    y: [0, 1, -0.5, 0],
+    transition: {
+      duration: 0.5,
+      repeat: Number.POSITIVE_INFINITY,
+      repeatDelay: 0.45,
+      ease: 'easeInOut'
+    }
+  }
+};
+function formatCreatedAtToMinute(date) {
+  var year = date.getFullYear();
+  var month = "".concat(date.getMonth() + 1).padStart(2, '0');
+  var day = "".concat(date.getDate()).padStart(2, '0');
+  var hours = "".concat(date.getHours()).padStart(2, '0');
+  var minutes = "".concat(date.getMinutes()).padStart(2, '0');
+  return "\u521B\u5EFA\u65F6\u95F4\uFF1A".concat(year, "-").concat(month, "-").concat(day, " ").concat(hours, ":").concat(minutes);
+}
+
 /**
  * 对话流内的单个产物摘要卡片。
  * 本期聚焦单项展示，保留 `type` 字段以支持未来“报告 / 人群”等产物类型扩展。
  */
 export function Artifact(_ref) {
-  var _shimmer$durationMs, _shimmer$angleDeg, _shimmer$bandSizePerc, _shimmer$baseOpacity, _shimmer$highlightOpa, _shimmer$easing;
   var title = _ref.title,
     statRange = _ref.statRange,
     createdAt = _ref.createdAt,
     _ref$status = _ref.status,
     status = _ref$status === void 0 ? 'Done' : _ref$status,
-    shimmer = _ref.shimmer,
     thumbnailUrl = _ref.thumbnailUrl,
+    brandLogoUrl = _ref.brandLogoUrl,
     onOpen = _ref.onOpen;
   var isGenerating = status === 'Generating';
   var isInteractive = !!onOpen && !isGenerating;
@@ -60,28 +87,15 @@ export function Artifact(_ref) {
       });
     });
   };
-  var shimmerConfig = {
-    durationMs: (_shimmer$durationMs = shimmer === null || shimmer === void 0 ? void 0 : shimmer.durationMs) !== null && _shimmer$durationMs !== void 0 ? _shimmer$durationMs : 4200,
-    frequencyHz: shimmer === null || shimmer === void 0 ? void 0 : shimmer.frequencyHz,
-    angleDeg: (_shimmer$angleDeg = shimmer === null || shimmer === void 0 ? void 0 : shimmer.angleDeg) !== null && _shimmer$angleDeg !== void 0 ? _shimmer$angleDeg : 110,
-    bandSizePercent: (_shimmer$bandSizePerc = shimmer === null || shimmer === void 0 ? void 0 : shimmer.bandSizePercent) !== null && _shimmer$bandSizePerc !== void 0 ? _shimmer$bandSizePerc : 16,
-    baseOpacity: (_shimmer$baseOpacity = shimmer === null || shimmer === void 0 ? void 0 : shimmer.baseOpacity) !== null && _shimmer$baseOpacity !== void 0 ? _shimmer$baseOpacity : 0.42,
-    highlightOpacity: (_shimmer$highlightOpa = shimmer === null || shimmer === void 0 ? void 0 : shimmer.highlightOpacity) !== null && _shimmer$highlightOpa !== void 0 ? _shimmer$highlightOpa : 0.92,
-    easing: (_shimmer$easing = shimmer === null || shimmer === void 0 ? void 0 : shimmer.easing) !== null && _shimmer$easing !== void 0 ? _shimmer$easing : 'cubic-bezier(0.22, 1, 0.36, 1)'
-  };
-  var resolvedDurationMs = shimmerConfig.frequencyHz && shimmerConfig.frequencyHz > 0 ? 1000 / shimmerConfig.frequencyHz : shimmerConfig.durationMs;
   var spotlightStyle = {
     '--odn-artifact-spot-x': "".concat(spotlight.x, "px"),
     '--odn-artifact-spot-y': "".concat(spotlight.y, "px"),
-    '--odn-artifact-spot-opacity': spotlight.active && !isGenerating ? 1 : 0,
-    '--odn-artifact-shimmer-duration': "".concat(Math.max(300, resolvedDurationMs), "ms"),
-    '--odn-artifact-shimmer-angle': "".concat(shimmerConfig.angleDeg, "deg"),
-    '--odn-artifact-shimmer-band': "".concat(Math.max(4, Math.min(40, shimmerConfig.bandSizePercent)), "%"),
-    '--odn-artifact-shimmer-base-color': "rgba(51, 55, 61, ".concat(Math.max(0, Math.min(1, shimmerConfig.baseOpacity)), ")"),
-    '--odn-artifact-shimmer-highlight-color': "rgba(13, 13, 13, ".concat(Math.max(0, Math.min(1, shimmerConfig.highlightOpacity)), ")"),
-    '--odn-artifact-shimmer-easing': shimmerConfig.easing
+    '--odn-artifact-spot-opacity': spotlight.active && !isGenerating ? 1 : 0
   };
-  var thirdLineText = status === 'Generating' ? '生成中' : createdAt !== null && createdAt !== void 0 ? createdAt : '创建时间：--';
+  var createdAtText = createdAt !== null && createdAt !== void 0 ? createdAt : formatCreatedAtToMinute(new Date());
+  var secondLineText = createdAtText;
+  var isDone = status === 'Done';
+  var thirdLineText = status === 'Generating' ? '生成中' : isDone ? '查看详情' : createdAt !== null && createdAt !== void 0 ? createdAt : '创建时间：--';
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-odn-artifact-spotlight": true,
     "aria-hidden": true
@@ -91,27 +105,82 @@ export function Artifact(_ref) {
     "data-odn-artifact-title": true
   }, title), /*#__PURE__*/React.createElement("p", {
     "data-odn-artifact-stat-range": true
-  }, statRange), /*#__PURE__*/React.createElement("p", {
+  }, secondLineText), /*#__PURE__*/React.createElement("p", {
     "data-odn-artifact-created-at": true
-  }, thirdLineText)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("span", null, thirdLineText), isDone && /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-detail-icon": true,
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "arrowRight",
+    size: 16
+  })))), /*#__PURE__*/React.createElement("div", {
     "data-odn-artifact-visual-wrap": true
   }, /*#__PURE__*/React.createElement("div", {
     "data-odn-artifact-visual": true,
     "aria-hidden": true
-  }, thumbnailUrl ? /*#__PURE__*/React.createElement("div", {
+  }, !isGenerating && (thumbnailUrl ? /*#__PURE__*/React.createElement("div", {
     "data-odn-artifact-visual-inner": true
   }, /*#__PURE__*/React.createElement("img", {
     src: thumbnailUrl,
     alt: "",
     "data-odn-artifact-visual-image": true
-  })) : /*#__PURE__*/React.createElement("div", {
-    "data-odn-artifact-visual-inner": true,
-    "data-odn-artifact-visual-inner-placeholder": true
-  }, /*#__PURE__*/React.createElement("span", {
-    "data-odn-artifact-visual-placeholder": true
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "file-text",
-    size: 18
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-visual-block": true,
+    "data-odn-artifact-visual-block-a": true
+  }), /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-visual-block": true,
+    "data-odn-artifact-visual-block-b": true
+  }), brandLogoUrl ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-visual-logo": true
+  }, /*#__PURE__*/React.createElement("img", {
+    src: brandLogoUrl,
+    alt: "",
+    "data-odn-artifact-visual-logo-image": true
+  })) : /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-visual-block": true,
+    "data-odn-artifact-visual-block-e": true
+  }), /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-visual-block": true,
+    "data-odn-artifact-visual-block-c": true
+  }), /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-visual-block": true,
+    "data-odn-artifact-visual-block-d": true
+  }))), isGenerating && /*#__PURE__*/React.createElement("div", {
+    "data-odn-artifact-generating-icon": true
+  }, /*#__PURE__*/React.createElement("svg", {
+    fill: "none",
+    height: "24",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2",
+    viewBox: "0 0 24 24",
+    width: "24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "m18 5-2.414-2.414A2 2 0 0 0 14.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2"
+  }), /*#__PURE__*/React.createElement(motion.path, {
+    d: "M21.378 12.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z",
+    initial: "normal",
+    animate: "animate",
+    variants: PEN_VARIANTS
+  }), /*#__PURE__*/React.createElement(motion.path, {
+    d: "M8 18h1",
+    initial: "normal",
+    animate: "animate",
+    transition: {
+      duration: 0.5,
+      repeat: Number.POSITIVE_INFINITY,
+      repeatDelay: 0.45
+    },
+    variants: {
+      normal: {
+        d: 'M8 18h1'
+      },
+      animate: {
+        d: 'M8 18h5'
+      }
+    }
   }))))));
   return isInteractive ? /*#__PURE__*/React.createElement("button", {
     type: "button",

package/dist/artifact/style/index.css

@@ -1,24 +1,19 @@
 html {
   --odn-artifact-padding-y: 20px;
-  --odn-artifact-padding-x: 24px;
+  --odn-artifact-padding-left: 24px;
+  --odn-artifact-padding-right: 0px;
   --odn-artifact-radius: 12px;
   --odn-artifact-content-gap: 24px;
-  --odn-artifact-copy-width: 280px;
+  --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-shimmer-duration: 1.8s;
-  --odn-artifact-shimmer-angle: 110deg;
-  --odn-artifact-shimmer-band: 16%;
-  --odn-artifact-shimmer-base-color: rgba(51, 55, 61, 0.42);
-  --odn-artifact-shimmer-highlight-color: rgba(13, 13, 13, 0.92);
-  --odn-artifact-shimmer-easing: cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 [data-odn-artifact] {
   position: relative;
-  width: min(100%, 416px);
+  width: min(100%, 376px);
   height: var(--odn-artifact-copy-height);
   display: grid;
   grid-template-columns: var(--odn-artifact-copy-width) var(--odn-artifact-visual-width);
@@ -51,7 +46,7 @@ button[data-odn-artifact] {
   z-index: 1;
   width: var(--odn-artifact-copy-width);
   height: var(--odn-artifact-copy-height);
-  padding: var(--odn-artifact-padding-y) var(--odn-artifact-padding-x);
+  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;
@@ -87,11 +82,36 @@ button[data-odn-artifact] {
   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-visual-wrap] {
   position: relative;
   z-index: 1;
@@ -103,6 +123,7 @@ button[data-odn-artifact] {
 }
 
 [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);
@@ -138,44 +159,74 @@ button[data-odn-artifact] {
   object-fit: cover;
 }
 
-[data-odn-artifact-visual-placeholder] {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  font-size: var(--odn-font-size-text-sm);
-  line-height: var(--odn-font-leading-text-sm);
-  color: var(--odn-color-black-8);
+[data-odn-artifact-generating-icon] {
+  position: absolute;
+  left: 50%;
+  top: 48px;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  color: #95a0b0;
+  pointer-events: none;
+}
+
+[data-odn-artifact-visual-block] {
+  position: absolute;
+  border-radius: 2px;
+  background: #ecf2fe;
+  z-index: 1;
+}
+
+[data-odn-artifact-visual-block-a] {
+  width: 40px;
+  height: 6px;
+  left: 12px;
+  top: 12px;
+}
+
+[data-odn-artifact-visual-block-b] {
+  width: 24px;
+  height: 6px;
+  left: 12px;
+  top: 22px;
+}
+
+[data-odn-artifact-visual-block-e] {
+  width: 16px;
+  height: 16px;
+  left: 68px;
+  top: 12px;
+  border-radius: 3.2px;
+}
+
+[data-odn-artifact-visual-logo] {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 68px;
+  top: 12px;
+  border-radius: 3.2px;
+  overflow: hidden;
+  z-index: 1;
+  background: #ecf2fe;
+}
+
+[data-odn-artifact-visual-logo-image] {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+[data-odn-artifact-visual-block-c] {
+  width: 72px;
+  height: 32px;
+  left: 12px;
+  top: 40px;
 }
 
-[data-odn-artifact][data-odn-artifact-status=Generating] p,
-[data-odn-artifact][data-odn-artifact-status=Generating] [data-odn-artifact-visual-placeholder],
-[data-odn-artifact][data-odn-artifact-status=Generating] [data-odn-artifact-visual-placeholder] span {
-  color: transparent !important;
-  background-image: linear-gradient(var(--odn-artifact-shimmer-angle), var(--odn-artifact-shimmer-base-color) calc(50% - var(--odn-artifact-shimmer-band)), var(--odn-artifact-shimmer-highlight-color) 50%, var(--odn-artifact-shimmer-base-color) calc(50% + var(--odn-artifact-shimmer-band)));
-  background-size: 260% 100%;
-  background-position: 120% 50%;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-background-clip: text;
-  background-clip: text;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-text-fill-color: transparent;
-  animation: odn-artifact-text-shimmer var(--odn-artifact-shimmer-duration) var(--odn-artifact-shimmer-easing) infinite alternate;
-}
-
-@keyframes odn-artifact-text-shimmer {
-  0% {
-    background-position: 120% 50%;
-  }
-  100% {
-    background-position: -20% 50%;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  [data-odn-artifact][data-odn-artifact-status=Generating] p,
-  [data-odn-artifact][data-odn-artifact-status=Generating] [data-odn-artifact-visual-placeholder],
-  [data-odn-artifact][data-odn-artifact-status=Generating] [data-odn-artifact-visual-placeholder] span {
-    animation: none;
-    background-position: 50% 50%;
-  }
+[data-odn-artifact-visual-block-d] {
+  width: 72px;
+  height: 32px;
+  left: 12px;
+  top: 78px;
 }

package/dist/composer/caret.d.ts

@@ -0,0 +1,19 @@
+export declare function getCurrentLine(node: Node | null | undefined, editor: HTMLElement): HTMLDivElement | null;
+export declare function findChipHostBeforeCaret(range: Range): HTMLElement | null;
+export declare function findChipHostAfterCaret(range: Range): HTMLElement | null;
+export declare function normalizeCollapsedCaretAtChipBoundary(range: Range, editor: HTMLElement): {
+    node: Node;
+    offset: number;
+} | null;
+export declare function resolveCaretMove(range: Range, direction: 'left' | 'right' | 'up' | 'down', editor: HTMLElement): {
+    node: Node;
+    offset: number;
+} | null;
+export declare function splitLineAt(range: Range, editor: HTMLElement): {
+    newLine: HTMLDivElement;
+    caret: {
+        node: Node;
+        offset: number;
+    };
+} | null;
+export declare function mergeLineIntoPreviousAtCaretStart(range: Range, editor: HTMLElement, sel: Selection): boolean;