@hsu-react/ui 0.0.13 → 0.0.15

package/lib/components/FormItem/index.js

@@ -28,17 +28,17 @@ var _FormCodeMirror = _interopRequireDefault(require("./FormCodeMirror"));
 var _react = _interopRequireDefault(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// 公共基础类型
+// Common base type
 
-// 核心映射（按分组排序）
+// Core mapping (sorted by group)
 
-// 派生类型
+// Derived type
 
-// 表单项属性
+// Form item props
 
-// 中文字典
+// Chinese dictionary
 const PlaceholderDict = exports.PlaceholderDict = {
-  // 输入类
+  // Input types
   AUTO: "",
   INPUT: "请输入",
   TEXTAREA: "请输入",
@@ -50,7 +50,7 @@ const PlaceholderDict = exports.PlaceholderDict = {
   EDITOR: "请输入",
   CODEMIRROR: "请输入",
   TEXT: "请输入",
-  // 选择类
+  // Selection types
   SELECT: "请选择",
   TREESELECT: "请选择",
   AUTOCOMPLETESELECT: "请选择",
@@ -64,14 +64,14 @@ const PlaceholderDict = exports.PlaceholderDict = {
   STEPPICKER: "请选择",
   TREE: "请选择",
   ICONSELECT: "请选择",
-  // 上传类
+  // Upload types
   FILE: "请上传",
   IMAGEFILE: "请上传"
 };
 
-// 英文字典
+// English dictionary
 const PlaceholderDictEn = exports.PlaceholderDictEn = {
-  // 输入类
+  // Input types
   AUTO: "",
   INPUT: "Please enter",
   TEXTAREA: "Please enter",
@@ -83,7 +83,7 @@ const PlaceholderDictEn = exports.PlaceholderDictEn = {
   EDITOR: "Please enter",
   CODEMIRROR: "Please enter",
   TEXT: "Please enter",
-  // 选择类
+  // Selection types
   SELECT: "Please select",
   TREESELECT: "Please select",
   AUTOCOMPLETESELECT: "Please select",
@@ -97,7 +97,7 @@ const PlaceholderDictEn = exports.PlaceholderDictEn = {
   STEPPICKER: "Please select",
   TREE: "Please select",
   ICONSELECT: "Please select",
-  // 上传类
+  // Upload types
   FILE: "Please upload",
   IMAGEFILE: "Please upload"
 };

package/lib/components/Icon/index.js

@@ -13,7 +13,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** 判断是否为 AntD 图标组件名（如 "SettingOutlined"），并返回对应组件 */
+/** Check whether it is an AntD icon component name (e.g. "SettingOutlined") and return the corresponding component */
 const getAntdIcon = icon => {
   if (typeof icon !== "string") return undefined;
   if (!/(?:Outlined|Filled|TwoTone)$/.test(icon)) return undefined;
@@ -40,7 +40,7 @@ const Icon = props => {
     ...style
   };
 
-  // 兼容 AntD 图标名（如 "SettingOutlined"），直接渲染对应 AntD 图标组件
+  // Support AntD icon names (e.g. "SettingOutlined") by rendering the corresponding AntD icon component directly
   const AntdNamedIcon = getAntdIcon(icon);
   if (AntdNamedIcon) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(AntdNamedIcon, {
@@ -51,8 +51,8 @@ const Icon = props => {
     });
   }
 
-  // iconify 图标：直接用 span 承载 Iconify 自带的 svg，避免把它嵌套进 antd Icon
-  // 的 svg（其 viewBox 会把内层 svg 缩放成极小值导致图标不可见）。
+  // Iconify icons: host Iconify's own svg directly in a span, instead of nesting it inside
+  // the antd Icon's svg (whose viewBox would scale the inner svg down so much the icon becomes invisible).
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...iconConfig,
     role: "img",

package/lib/components/Input/Number/index.js

@@ -30,7 +30,7 @@ const InputNumber = props => {
   const ref = (0, _react.useRef)(null);
   const wrapperRef = (0, _react.useRef)(null);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? typeof value === "number" ? `${value}` : value?.toString() ?? "" : defaultValue !== undefined ? typeof defaultValue === "number" ? `${defaultValue}` : defaultValue?.toString() ?? "" : "";
   const [_value, setValue] = (0, _react.useState)(initialValue);
   const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
@@ -44,7 +44,7 @@ const InputNumber = props => {
     wait: 10
   });
   (0, _react.useEffect)(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
       if (value !== undefined) {
@@ -52,7 +52,7 @@ const InputNumber = props => {
         setValue(newValue);
         setLastValue(newValue);
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }
@@ -62,7 +62,7 @@ const InputNumber = props => {
     getRef?.(ref.current);
   }, [getRef]);
 
-  // 动态计算 addonAfter 的宽度，并设置 CSS 变量
+  // Dynamically compute the width of addonAfter and set the CSS variable
   (0, _react.useEffect)(() => {
     if (addonAfter && wrapperRef.current) {
       const updateAddonWidth = () => {
@@ -72,12 +72,12 @@ const InputNumber = props => {
         }
       };
 
-      // 使用 requestAnimationFrame 确保 DOM 渲染完成后再计算
+      // Use requestAnimationFrame to ensure the DOM has rendered before computing
       const rafId = requestAnimationFrame(() => {
         updateAddonWidth();
       });
 
-      // 监听窗口大小变化和元素大小变化，重新计算
+      // Observe window and element size changes to recompute
       const resizeObserver = new ResizeObserver(() => {
         updateAddonWidth();
       });

package/lib/components/Input/Number/index.module.scss

@@ -65,11 +65,11 @@
     }
   }
 
-  // 当存在 addonAfter 时，调整清除图标位置
-  // Ant Design 的 addonAfter 会生成 :global(.ant-input-number-group-addon)
-  // 清除图标需要向左偏移，避免与 addon 重叠
-  // 使用 CSS 变量来动态设置 addon 宽度，默认值 60px 是合理的估算
-  // 通过 JS 动态计算实际宽度并设置 CSS 变量来覆盖
+  // Adjust the clear icon position when addonAfter is present
+  // Ant Design's addonAfter generates :global(.ant-input-number-group-addon)
+  // The clear icon needs to shift left to avoid overlapping the addon
+  // Use a CSS variable to set the addon width dynamically; the default 60px is a reasonable estimate
+  // JS computes the actual width and sets the CSS variable to override it
   &.hasAddonAfter {
     .clearIcon {
       right: calc(11px + var(--addon-after-width, 60px));

package/lib/components/Input/Password/index.js

@@ -24,7 +24,7 @@ const Password = props => {
   const [isComposing, setComposing] = (0, _react.useState)(false);
   const ref = (0, _react.useRef)(null);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? value?.toString() ?? "" : defaultValue !== undefined ? defaultValue?.toString() ?? "" : "";
   const [_value, setValue] = (0, _react.useState)(initialValue);
   const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
@@ -38,14 +38,14 @@ const Password = props => {
     }
   }, [_value, isComposing, lastValue, onChange]);
   (0, _react.useEffect)(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
       if (value !== undefined) {
         setValue(value?.toString());
         setLastValue(value?.toString());
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }

package/lib/components/Input/Range/index.js

@@ -29,21 +29,21 @@ const RangeInput = props => {
     disabled
   } = props;
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? value : defaultValue;
   const [_value, setValue] = (0, _react.useState)(initialValue);
   const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
   const [focus, setFocus] = (0, _react.useState)(false);
   const prevValueRef = _react.default.useRef(undefined);
   (0, _react.useEffect)(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (!_hsuUtils.Equal.ObjEqual(prevValueRef.current, value)) {
       prevValueRef.current = value;
       if (value !== undefined) {
         setValue(value);
         setLastValue(value);
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue(undefined);
         setLastValue(undefined);
       }

package/lib/components/Input/Range/index.module.scss

@@ -56,9 +56,9 @@
 
       &.focused,
       &:hover {
-        border-color: #1677ff;
+        border-color: var(--primary-color);
 
-        box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 10%, transparent);
       }
     }
 

package/lib/components/Input/Search/index.js

@@ -24,7 +24,7 @@ const Search = props => {
   const [isComposing, setComposing] = (0, _react.useState)(false);
   const ref = (0, _react.useRef)(null);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? value?.toString() ?? "" : defaultValue !== undefined ? defaultValue?.toString() ?? "" : "";
   const [_value, setValue] = (0, _react.useState)(initialValue);
   const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
@@ -38,14 +38,14 @@ const Search = props => {
     }
   }, [_value, isComposing, lastValue, onChange]);
   (0, _react.useEffect)(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
       if (value !== undefined) {
         setValue(value?.toString());
         setLastValue(value?.toString());
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }

package/lib/components/Input/TextArea/index.js

@@ -37,7 +37,7 @@ const TextArea = props => {
   const ref = (0, _react.useRef)(null);
   const [focused, setFocused] = (0, _react.useState)(false);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? value?.toString() ?? "" : defaultValue !== undefined ? defaultValue?.toString() ?? "" : "";
   const [_value, setValue] = (0, _react.useState)(initialValue);
   const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
@@ -52,14 +52,14 @@ const TextArea = props => {
     }
   }, [isComposing, onChange, _value, lastValue]);
   (0, _react.useEffect)(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
       if (value !== undefined) {
         setValue(value?.toString());
         setLastValue(value?.toString());
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }
@@ -69,7 +69,7 @@ const TextArea = props => {
     getRef?.(ref.current);
   }, [getRef]);
   (0, _react.useEffect)(() => {
-    // 使用 MutationObserver 监听错误状态变化
+    // Use a MutationObserver to watch for error state changes
     const checkError = () => {
       if (ref.current?.resizableTextArea?.textArea) {
         const textAreaElement = ref.current.resizableTextArea.textArea;
@@ -78,10 +78,10 @@ const TextArea = props => {
       }
     };
 
-    // 初始检查
+    // Initial check
     checkError();
 
-    // 监听 DOM 变化
+    // Observe DOM changes
     if (ref.current?.resizableTextArea?.textArea) {
       const textAreaElement = ref.current.resizableTextArea.textArea;
       const observer = new MutationObserver(checkError);

package/lib/components/Input/TextArea/index.module.scss

@@ -9,7 +9,7 @@
   min-width: 0;
   height: max-content;
 
-  // CF 风格：随外观切换的描边输入控件
+  // CF style: outlined input control that follows the appearance theme
   background: var(--cf-surface);
 
   border-width: 1px;
@@ -86,7 +86,7 @@
           position: relative;
           bottom: auto;
 
-          color: #909399;
+          color: var(--cf-text-2);
           font-size: 14px;
         }
 
@@ -113,13 +113,13 @@
   &:not(.hasError).focused {
     border-color: var(--primary-color);
 
-    box-shadow: 0 0 0 2px rgba(19, 194, 194, 0.12);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 12%, transparent);
   }
 
   &.hasError {
-    border-color: #ff4d4f;
+    border-color: var(--cf-error);
 
-    box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cf-error) 6%, transparent);
 
     :global(.ant-input-status-error) {
       border: none !important;

package/lib/components/Input/index.js

@@ -37,7 +37,7 @@ const Input = props => {
   const [isComposing, setComposing] = (0, _react.useState)(false);
   const ref = (0, _react.useRef)(null);
 
-  // 处理转义：如果值中包含 escapeCharacters 中的字符，则在前面加上转义
+  // Handle escaping: if the value contains characters listed in escapeCharacters, prefix them with an escape
   const escapeValue = (0, _react.useCallback)(val => {
     if (!escapeCharacters || escapeCharacters.length === 0) {
       return val;
@@ -46,19 +46,19 @@ const Input = props => {
     let i = 0;
     while (i < val.length) {
       const char = val[i];
-      // 检查是否是转义字符，且下一个字符是需要转义的字符
+      // Check if this is an escape character and the next character is one that needs escaping
       if (char === "\\" && i + 1 < val.length) {
         const nextChar = val[i + 1];
-        // 如果下一个字符是需要转义的字符，说明已经转义过了，直接添加
+        // If the next character is one that needs escaping, it is already escaped; append as is
         if (escapeCharacters.includes(nextChar)) {
           result += char + nextChar;
           i += 2;
           continue;
         }
       }
-      // 如果当前字符是需要转义的字符，且前面没有转义符，则添加转义符
+      // If the current character needs escaping and is not already preceded by an escape, add the escape character
       if (escapeCharacters.includes(char)) {
-        // 检查前面是否已经有转义符（避免重复转义）
+        // Check whether an escape character already precedes it (avoid double escaping)
         if (i === 0 || val[i - 1] !== "\\") {
           result += "\\" + char;
         } else {
@@ -72,7 +72,7 @@ const Input = props => {
     return result;
   }, [escapeCharacters]);
 
-  // 处理去转义：如果值中包含转义格式，则去除转义
+  // Handle unescaping: if the value contains escaped sequences, remove the escapes
   const unescapeValue = (0, _react.useCallback)(val => {
     if (!escapeCharacters || escapeCharacters.length === 0) {
       return val;
@@ -81,11 +81,11 @@ const Input = props => {
     let i = 0;
     while (i < val.length) {
       const char = val[i];
-      // 如果当前字符是反斜杠，且下一个字符是需要转义的字符
+      // If the current character is a backslash and the next character is one that needs escaping
       if (char === "\\" && i + 1 < val.length) {
         const nextChar = val[i + 1];
         if (escapeCharacters.includes(nextChar)) {
-          // 跳过反斜杠，只添加需要转义的字符
+          // Skip the backslash and append only the escaped character
           result += nextChar;
           i += 2;
           continue;
@@ -97,7 +97,7 @@ const Input = props => {
     return result;
   }, [escapeCharacters]);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const getInitialValue = () => {
     const rawValue = value !== undefined ? typeof value === "number" ? `${value}` : value?.toString() ?? "" : defaultValue !== undefined ? typeof defaultValue === "number" ? `${defaultValue}` : defaultValue?.toString() ?? "" : "";
     return unescapeValue(rawValue);
@@ -111,7 +111,7 @@ const Input = props => {
       const trimmedValue = _value.trim();
       const finalValue = trimmedValue === "" ? "" : _value;
       setLastValue(finalValue);
-      // 如果设置了 escapeCharacters 且值匹配，则返回转义后的值
+      // If escapeCharacters is set and the value matches, return the escaped value
       const escapedValue = escapeValue(finalValue);
       onChange?.(escapedValue);
     }
@@ -119,17 +119,17 @@ const Input = props => {
     wait: 10
   });
   (0, _react.useEffect)(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
       if (value !== undefined) {
         const rawValue = typeof value === "number" ? `${value}` : value?.toString();
-        // 去除转义后再显示
+        // Unescape before displaying
         const newValue = unescapeValue(rawValue);
         setValue(newValue);
         setLastValue(newValue);
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }
@@ -153,7 +153,7 @@ const Input = props => {
       },
       value: _value,
       onChange: e => {
-        // 用户输入时，先去除转义，然后再设置到状态中
+        // On user input, unescape first, then set into state
         const inputValue = e.target.value;
         const unescapedInput = unescapeValue(inputValue);
         setValue(unescapedInput);

package/lib/components/Input/index.module.scss

@@ -1,8 +1,8 @@
 .antdInput {
   width: 100%;
   height: 100%;
-  // 父级未给定高度时（height:100% 解析为 auto），保证最小高度，避免输入框被压扁；
-  // 内部 .ant-input-wrapper / .ant-input 通过 min-height: inherit 继承该值。
+  // When the parent has no set height (height:100% resolves to auto), ensure a minimum height so the input is not squashed;
+  // the inner .ant-input-wrapper / .ant-input inherit this value via min-height: inherit.
   min-height: 32px;
 
   :global(.ant-input-clear-icon) {

package/lib/components/Markdown/Editor/index.module.scss

@@ -6,7 +6,7 @@
   width: 100%;
   height: 100%;
 
-  background: #fff;
+  background: var(--cf-surface);
 
   border-radius: 10px;
 
@@ -31,7 +31,7 @@
     overflow: hidden;
 
     &.disabled {
-      background-color: rgba(0, 0, 0, 0.04);
+      background-color: var(--cf-subtle);
 
       cursor: no-drop;
 
@@ -46,7 +46,7 @@
           .section {
             textarea,
             .section-container {
-              background: rgba(0, 0, 0, 0.04);
+              background: var(--cf-subtle);
             }
           }
         }

package/lib/components/Markdown/Views/ArtifactBlock.d.ts

@@ -1,15 +1,15 @@
 import React from "react";
 export interface ArtifactBlockProps {
-    /** 原始代码（html/svg） */
+    /** Raw source code (html/svg) */
     code: string;
-    /** 语言标记（html / svg） */
+    /** Language tag (html / svg) */
     lang: string;
-    /** 代码视图（沿用外层的高亮代码块渲染） */
+    /** Code view (reuses the outer highlighted code block rendering) */
     codeView: React.ReactNode;
 }
 /**
- * HTML/SVG Artifacts 预览块（对标 Claude Artifacts）：代码 / 预览两个页签，
- * 预览在 sandbox iframe（仅 allow-scripts，无同源权限）里渲染模型产出的页面。
+ * HTML/SVG Artifacts preview block (modeled after Claude Artifacts): code / preview tabs;
+ * the preview renders the model-generated page in a sandbox iframe (allow-scripts only, no same-origin access).
  */
 declare const ArtifactBlock: React.FC<ArtifactBlockProps>;
 export default ArtifactBlock;

package/lib/components/Markdown/Views/ArtifactBlock.js

@@ -12,8 +12,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
- * HTML/SVG Artifacts 预览块（对标 Claude Artifacts）：代码 / 预览两个页签，
- * 预览在 sandbox iframe（仅 allow-scripts，无同源权限）里渲染模型产出的页面。
+ * HTML/SVG Artifacts preview block (modeled after Claude Artifacts): code / preview tabs;
+ * the preview renders the model-generated page in a sandbox iframe (allow-scripts only, no same-origin access).
  */
 const ArtifactBlock = ({
   code,

package/lib/components/Markdown/Views/MermaidBlock.d.ts

@@ -3,8 +3,8 @@ export interface MermaidBlockProps {
     code: string;
 }
 /**
- * Mermaid 图渲染块（对标 Claude/Kimi 等的流程图渲染）：
- * 渲染成功显示 SVG；语法不完整（如流式生成中）静默回退为代码展示。
+ * Mermaid diagram rendering block (modeled after the flowchart rendering in Claude/Kimi etc.):
+ * shows SVG on successful render; silently falls back to code display when the syntax is incomplete (e.g. during streaming).
  */
 declare const MermaidBlock: React.FC<MermaidBlockProps>;
 export default MermaidBlock;

package/lib/components/Markdown/Views/MermaidBlock.js

@@ -10,7 +10,7 @@ var _blocksModule = _interopRequireDefault(require("./blocks.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } // mermaid 体积大，懒加载并全局只初始化一次
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } // mermaid is large; lazy-load it and initialize globally only once
 let mermaidPromise = null;
 const loadMermaid = () => {
   if (!mermaidPromise) {
@@ -26,8 +26,8 @@ const loadMermaid = () => {
   return mermaidPromise;
 };
 /**
- * Mermaid 图渲染块（对标 Claude/Kimi 等的流程图渲染）：
- * 渲染成功显示 SVG；语法不完整（如流式生成中）静默回退为代码展示。
+ * Mermaid diagram rendering block (modeled after the flowchart rendering in Claude/Kimi etc.):
+ * shows SVG on successful render; silently falls back to code display when the syntax is incomplete (e.g. during streaming).
  */
 const MermaidBlock = ({
   code
@@ -42,9 +42,9 @@ const MermaidBlock = ({
       }) => {
         if (!cancelled) setSvg(rendered);
       }).catch(() => {
-        // 流式生成中代码不完整属正常态，回退为代码展示
+        // Incomplete code during streaming is normal; fall back to code display
         if (!cancelled) setSvg(null);
-        // mermaid.render 失败会在 DOM 残留错误占位节点，清理掉
+        // A failed mermaid.render leaves an error placeholder node in the DOM; clean it up
         document.getElementById(`d${id}`)?.remove();
       });
     }, 300);

package/lib/components/Markdown/Views/blocks.module.scss

@@ -4,7 +4,7 @@
   padding: 12px;
   margin: 8px 0;
   background: #fff;
-  border: 1px solid #ececee;
+  border: 1px solid var(--cf-border-weak);
   border-radius: 8px;
   overflow-x: auto;
 
@@ -17,7 +17,7 @@
 .mermaidFallback {
   margin: 8px 0;
   padding: 12px;
-  background: #f7f7f8;
+  background: var(--cf-subtle);
   border-radius: 8px;
   overflow-x: auto;
 
@@ -28,7 +28,7 @@
 
 .artifact {
   margin: 8px 0;
-  border: 1px solid #ececee;
+  border: 1px solid var(--cf-border-weak);
   border-radius: 10px;
   overflow: hidden;
 
@@ -37,14 +37,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 6px 12px;
-    background: #f7f7f8;
-    border-bottom: 1px solid #ececee;
+    background: var(--cf-subtle);
+    border-bottom: 1px solid var(--cf-border-weak);
   }
 
   .artifactLang {
     font-size: 12px;
     font-weight: 600;
-    color: #6b6e76;
+    color: var(--cf-text-2);
   }
 
   .artifactTabs {
@@ -58,21 +58,21 @@
     border: none;
     border-radius: 999px;
     background: transparent;
-    color: #6b6e76;
+    color: var(--cf-text-2);
     cursor: pointer;
 
     &:hover {
-      background: #ececee;
+      background: var(--cf-row-hover);
     }
   }
 
   .artifactTabActive {
-    background: #fff;
+    background: var(--cf-surface);
     color: #4f46e5;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--cf-shadow-1);
 
     &:hover {
-      background: #fff;
+      background: var(--cf-surface);
     }
   }