@hsu-react/ui 0.0.12 → 0.0.14

package/es/components/FormItem/index.js

@@ -23,17 +23,17 @@ import React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 export { ItemContainer as FormItemContainer };
 
-// 公共基础类型
+// Common base type
 
-// 核心映射（按分组排序）
+// Core mapping (sorted by group)
 
-// 派生类型
+// Derived type
 
-// 表单项属性
+// Form item props
 
-// 中文字典
+// Chinese dictionary
 export var PlaceholderDict = {
-  // 输入类
+  // Input types
   AUTO: "",
   INPUT: "请输入",
   TEXTAREA: "请输入",
@@ -45,7 +45,7 @@ export var PlaceholderDict = {
   EDITOR: "请输入",
   CODEMIRROR: "请输入",
   TEXT: "请输入",
-  // 选择类
+  // Selection types
   SELECT: "请选择",
   TREESELECT: "请选择",
   AUTOCOMPLETESELECT: "请选择",
@@ -59,14 +59,14 @@ export var PlaceholderDict = {
   STEPPICKER: "请选择",
   TREE: "请选择",
   ICONSELECT: "请选择",
-  // 上传类
+  // Upload types
   FILE: "请上传",
   IMAGEFILE: "请上传"
 };
 
-// 英文字典
+// English dictionary
 export var PlaceholderDictEn = {
-  // 输入类
+  // Input types
   AUTO: "",
   INPUT: "Please enter",
   TEXTAREA: "Please enter",
@@ -78,7 +78,7 @@ export var PlaceholderDictEn = {
   EDITOR: "Please enter",
   CODEMIRROR: "Please enter",
   TEXT: "Please enter",
-  // 选择类
+  // Selection types
   SELECT: "Please select",
   TREESELECT: "Please select",
   AUTOCOMPLETESELECT: "Please select",
@@ -92,7 +92,7 @@ export var PlaceholderDictEn = {
   STEPPICKER: "Please select",
   TREE: "Please select",
   ICONSELECT: "Please select",
-  // 上传类
+  // Upload types
   FILE: "Please upload",
   IMAGEFILE: "Please upload"
 };

package/es/components/Icon/index.js

@@ -13,7 +13,7 @@ import React, { useEffect, useRef } from "react";
 import classNames from "classnames";
 import styles from "./index.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
-/** 判断是否为 AntD 图标组件名（如 "SettingOutlined"），并返回对应组件 */
+/** Check whether it is an AntD icon component name (e.g. "SettingOutlined") and return the corresponding component */
 var getAntdIcon = function getAntdIcon(icon) {
   if (typeof icon !== "string") return undefined;
   if (!/(?:Outlined|Filled|TwoTone)$/.test(icon)) return undefined;
@@ -37,7 +37,7 @@ var Icon = function Icon(props) {
     fontSize: typeof fontSize === "number" ? "".concat(fontSize, "px") : fontSize
   }, style);
 
-  // 兼容 AntD 图标名（如 "SettingOutlined"），直接渲染对应 AntD 图标组件
+  // Support AntD icon names (e.g. "SettingOutlined") by rendering the corresponding AntD icon component directly
   var AntdNamedIcon = getAntdIcon(icon);
   if (AntdNamedIcon) {
     return /*#__PURE__*/_jsx(AntdNamedIcon, _objectSpread(_objectSpread({}, iconConfig), {}, {
@@ -47,8 +47,8 @@ var Icon = function 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__*/_jsx("span", _objectSpread(_objectSpread({}, iconConfig), {}, {
     role: "img",
     ref: ref,

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

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

package/es/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/es/components/Input/Password/index.js

@@ -32,7 +32,7 @@ var Password = function Password(props) {
     setComposing = _useState2[1];
   var ref = useRef(null);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   var initialValue = value !== undefined ? (_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : "" : defaultValue !== undefined ? (_defaultValue$toStrin = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()) !== null && _defaultValue$toStrin !== void 0 ? _defaultValue$toStrin : "" : "";
   var _useState3 = useState(initialValue),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -52,14 +52,14 @@ var Password = function Password(props) {
     }
   }, [_value, isComposing, lastValue, onChange]);
   useEffect(function () {
-    // 只在外部 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 === null || value === void 0 ? void 0 : value.toString());
         setLastValue(value === null || value === void 0 ? void 0 : value.toString());
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }

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

@@ -33,7 +33,7 @@ var RangeInput = function RangeInput(props) {
     placeholder = _props$placeholder === void 0 ? ["请输入", "请输入"] : _props$placeholder,
     disabled = props.disabled;
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   var initialValue = value !== undefined ? value : defaultValue;
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -49,14 +49,14 @@ var RangeInput = function RangeInput(props) {
     setFocus = _useState6[1];
   var prevValueRef = React.useRef(undefined);
   useEffect(function () {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (!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/es/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/es/components/Input/Search/index.js

@@ -32,7 +32,7 @@ var Search = function Search(props) {
     setComposing = _useState2[1];
   var ref = useRef(null);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   var initialValue = value !== undefined ? (_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : "" : defaultValue !== undefined ? (_defaultValue$toStrin = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()) !== null && _defaultValue$toStrin !== void 0 ? _defaultValue$toStrin : "" : "";
   var _useState3 = useState(initialValue),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -52,14 +52,14 @@ var Search = function Search(props) {
     }
   }, [_value, isComposing, lastValue, onChange]);
   useEffect(function () {
-    // 只在外部 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 === null || value === void 0 ? void 0 : value.toString());
         setLastValue(value === null || value === void 0 ? void 0 : value.toString());
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }

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

@@ -50,7 +50,7 @@ var TextArea = function TextArea(props) {
     focused = _useState4[0],
     setFocused = _useState4[1];
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   var initialValue = value !== undefined ? (_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : "" : defaultValue !== undefined ? (_defaultValue$toStrin = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()) !== null && _defaultValue$toStrin !== void 0 ? _defaultValue$toStrin : "" : "";
   var _useState5 = useState(initialValue),
     _useState6 = _slicedToArray(_useState5, 2),
@@ -74,14 +74,14 @@ var TextArea = function TextArea(props) {
     }
   }, [isComposing, onChange, _value, lastValue]);
   useEffect(function () {
-    // 只在外部 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 === null || value === void 0 ? void 0 : value.toString());
         setLastValue(value === null || value === void 0 ? void 0 : value.toString());
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }
@@ -92,7 +92,7 @@ var TextArea = function TextArea(props) {
   }, [getRef]);
   useEffect(function () {
     var _ref$current2;
-    // 使用 MutationObserver 监听错误状态变化
+    // Use a MutationObserver to watch for error state changes
     var checkError = function checkError() {
       var _ref$current;
       if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && (_ref$current = _ref$current.resizableTextArea) !== null && _ref$current !== void 0 && _ref$current.textArea) {
@@ -102,10 +102,10 @@ var TextArea = function TextArea(props) {
       }
     };
 
-    // 初始检查
+    // Initial check
     checkError();
 
-    // 监听 DOM 变化
+    // Observe DOM changes
     if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && (_ref$current2 = _ref$current2.resizableTextArea) !== null && _ref$current2 !== void 0 && _ref$current2.textArea) {
       var textAreaElement = ref.current.resizableTextArea.textArea;
       var observer = new MutationObserver(checkError);

package/es/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/es/components/Input/index.js

@@ -45,7 +45,7 @@ var Input = function Input(props) {
     setComposing = _useState2[1];
   var ref = useRef(null);
 
-  // 处理转义：如果值中包含 escapeCharacters 中的字符，则在前面加上转义
+  // Handle escaping: if the value contains characters listed in escapeCharacters, prefix them with an escape
   var escapeValue = useCallback(function (val) {
     if (!escapeCharacters || escapeCharacters.length === 0) {
       return val;
@@ -54,19 +54,19 @@ var Input = function Input(props) {
     var i = 0;
     while (i < val.length) {
       var 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) {
         var 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 {
@@ -80,7 +80,7 @@ var Input = function Input(props) {
     return result;
   }, [escapeCharacters]);
 
-  // 处理去转义：如果值中包含转义格式，则去除转义
+  // Handle unescaping: if the value contains escaped sequences, remove the escapes
   var unescapeValue = useCallback(function (val) {
     if (!escapeCharacters || escapeCharacters.length === 0) {
       return val;
@@ -89,11 +89,11 @@ var Input = function Input(props) {
     var i = 0;
     while (i < val.length) {
       var 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) {
         var nextChar = val[i + 1];
         if (escapeCharacters.includes(nextChar)) {
-          // 跳过反斜杠，只添加需要转义的字符
+          // Skip the backslash and append only the escaped character
           result += nextChar;
           i += 2;
           continue;
@@ -105,7 +105,7 @@ var Input = function Input(props) {
     return result;
   }, [escapeCharacters]);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   var getInitialValue = function getInitialValue() {
     var _value$toString, _defaultValue$toStrin;
     var rawValue = value !== undefined ? typeof value === "number" ? "".concat(value) : (_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : "" : defaultValue !== undefined ? typeof defaultValue === "number" ? "".concat(defaultValue) : (_defaultValue$toStrin = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()) !== null && _defaultValue$toStrin !== void 0 ? _defaultValue$toStrin : "" : "";
@@ -126,7 +126,7 @@ var Input = function Input(props) {
       var trimmedValue = _value.trim();
       var finalValue = trimmedValue === "" ? "" : _value;
       setLastValue(finalValue);
-      // 如果设置了 escapeCharacters 且值匹配，则返回转义后的值
+      // If escapeCharacters is set and the value matches, return the escaped value
       var escapedValue = escapeValue(finalValue);
       onChange === null || onChange === void 0 || onChange(escapedValue);
     }
@@ -134,17 +134,17 @@ var Input = function Input(props) {
     wait: 10
   });
   useEffect(function () {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
       if (value !== undefined) {
         var rawValue = typeof value === "number" ? "".concat(value) : value === null || value === void 0 ? void 0 : value.toString();
-        // 去除转义后再显示
+        // Unescape before displaying
         var newValue = unescapeValue(rawValue);
         setValue(newValue);
         setLastValue(newValue);
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }
@@ -170,7 +170,7 @@ var Input = function Input(props) {
       },
       value: _value,
       onChange: function onChange(e) {
-        // 用户输入时，先去除转义，然后再设置到状态中
+        // On user input, unescape first, then set into state
         var inputValue = e.target.value;
         var unescapedInput = unescapeValue(inputValue);
         setValue(unescapedInput);

package/es/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/es/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/es/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/es/components/Markdown/Views/ArtifactBlock.js

@@ -14,8 +14,8 @@ import styles from "./blocks.module.scss";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * 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).
  */
 var ArtifactBlock = function ArtifactBlock(_ref) {
   var code = _ref.code,

package/es/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/es/components/Markdown/Views/MermaidBlock.js

@@ -8,7 +8,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { generateRandomStr } from "hsu-utils";
 import styles from "./blocks.module.scss";
 
-// mermaid 体积大，懒加载并全局只初始化一次
+// mermaid is large; lazy-load it and initialize globally only once
 import { jsx as _jsx } from "react/jsx-runtime";
 var mermaidPromise = null;
 var loadMermaid = function loadMermaid() {
@@ -25,8 +25,8 @@ var loadMermaid = function 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).
  */
 var MermaidBlock = function MermaidBlock(_ref) {
   var code = _ref.code;
@@ -47,9 +47,9 @@ var MermaidBlock = function MermaidBlock(_ref) {
         if (!cancelled) setSvg(rendered);
       }).catch(function () {
         var _document$getElementB;
-        // 流式生成中代码不完整属正常态，回退为代码展示
+        // 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$getElementB = document.getElementById("d".concat(id))) === null || _document$getElementB === void 0 || _document$getElementB.remove();
       });
     }, 300);

package/es/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);
     }
   }