@h-ai/ui 0.1.0-alpha.19 → 0.1.0-alpha.21

package/README.md

@@ -1,6 +1,6 @@
 # @h-ai/ui
 
-> 基于 Svelte 5 Runes 的多端 UI 组件库，采用 DaisyUI v5 + Tailwind CSS v4 样式 + Bits UI v2 headless 交互，内置 i18n（zh-CN / en-US），支持 32+ 主题。
+> 基于 Svelte 5 Runes 的多端 UI 组件库，采用 DaisyUI v5 + Tailwind CSS v4 样式 + Bits UI v2 headless 交互，内置 i18n（zh-CN / en-US），内置 15 个精选 DaisyUI 主题。
 
 ## 安装
 
@@ -84,6 +84,8 @@ export default defineConfig({
 <Button variant="primary">提交</Button>
 ```
 
+> 除 `toast`、类型导入与 `Range`（会和 DOM `Range` 构造器冲突）外，其余公开 Svelte 组件都可通过 `@h-ai/ui/auto-import` 自动注入。
+
 ## 组件架构
 
 组件按三层划分（primitives → compounds → scenes）：
@@ -93,7 +95,9 @@ components/
 ├── primitives/   # 原子组件（不可再分的基础 UI 单元）
 ├── compounds/    # 组合组件（由原子组件 + Bits UI headless 组合而成）
 └── scenes/       # 场景组件（面向具体业务场景的完整 UI 流程）
+  ├── ai/       # AI 文档 / 表格 / Markdown 预览
     ├── app/      # 应用级（设置/反馈/主题/语言切换）
+  ├── crud/     # CRUD 页面 / 抽屉 / 过滤 / 删除确认
     ├── iam/      # 身份认证
     ├── storage/  # 存储管理
     └── crypto/   # 加密展示
@@ -101,12 +105,12 @@ components/
 
 ## 组件清单
 
-### 原子组件 Primitives（21 个）
+### 原子组件 Primitives（20 个）
 
 | 组件             | 描述         | 主要属性                                                           |
 | ---------------- | ------------ | ------------------------------------------------------------------ |
 | `Button`         | 按钮         | `variant`, `size`, `loading`, `disabled`, `outline`, `circle`      |
-| `IconButton`     | 图标按钮     | `icon: string \| Snippet`, `variant`, `size`, `tooltip`, `loading` |
+| `IconButton`     | 图标按钮     | `icon: trusted SVG string \| Snippet`, `variant`, `size`, `tooltip`, `loading` |
 | `BareButton`     | 无样式按钮   | `class`, `ariaLabel`, `role`, `tabindex`                           |
 | `Input`          | 输入框       | `type`, `value`, `size`, `error`, `validationMessage`              |
 | `BareInput`      | 无样式输入框 | `type`, `class`, `accept`, `multiple`                              |
@@ -126,7 +130,7 @@ components/
 | `Spinner`        | 加载动画     | `size`, `variant`                                                  |
 | `Progress`       | 进度条       | `value`, `max`, `variant`, `striped`, `animated`                   |
 
-### 组合组件 Compounds（25 个）
+### 组合组件 Compounds（33 个）
 
 #### 表单
 
@@ -171,6 +175,18 @@ components/
 
 > 日期值使用 `@internationalized/date` 的 `DateValue` / `CalendarDate` 类型。
 
+#### 移动端 / 增强交互
+
+| 组件             | 描述         | 主要属性                                            |
+| ---------------- | ------------ | --------------------------------------------------- |
+| `ActionSheet`    | 底部操作面板 | `open`, `title`, `items`, `cancelText`, `onselect`  |
+| `AppBar`         | 顶部导航栏   | `title`, `backHref`, `onback`, `fixed`, `safeArea`  |
+| `BottomNav`      | 底部导航栏   | `items`, `active`, `centered`, `maxWidth`           |
+| `InfiniteScroll` | 无限滚动     | `loading`, `finished`, `threshold`, `onload`        |
+| `PullRefresh`    | 下拉刷新     | `refreshing`, `threshold`, `onrefresh`              |
+| `SafeArea`       | 安全区域容器 | `top`, `bottom`, `left`, `right`                    |
+| `SwipeCell`      | 滑动操作单元 | `leftActions`, `rightActions`, `threshold`, `onaction` |
+
 #### 导航
 
 | 组件         | 描述     | 主要属性                                     |
@@ -196,7 +212,7 @@ components/
 | ------------ | -------- | ------------------------------------------- |
 | `PageHeader` | 页面头部 | `title`, `description`，支持 `actions` 插槽 |
 
-### 场景组件 Scenes（20 个）
+### 场景组件 Scenes（30 个）
 
 #### App 应用级（6 个）
 
@@ -209,7 +225,7 @@ components/
 | `ThemeSelector`  | 完整主题选择面板 | 无需 Props         |
 | `ThemeToggle`    | 明/暗主题切换    | 无需 Props         |
 
-#### IAM 身份认证（7 个）
+#### IAM 身份认证（8 个）
 
 | 组件                 | 描述       | 主要属性                                              |
 | -------------------- | ---------- | ----------------------------------------------------- |
@@ -219,6 +235,7 @@ components/
 | `ResetPasswordForm`  | 重置密码   | `loading`, `errors`, `showCode`, `onsubmit`           |
 | `ChangePasswordForm` | 修改密码   | `loading`, `errors`, `requireOldPassword`, `onsubmit` |
 | `PasswordInput`      | 密码输入框 | `value`, `showToggle`, `showStrength`, `minLength`    |
+| `PermGuard`          | 权限守卫   | `permissions`, `mode`, `fallback`                     |
 | `UserProfile`        | 用户资料   | `user`, `editable`, `fields`, `onsubmit`              |
 
 #### Storage 存储（4 个）
@@ -240,6 +257,27 @@ components/
 
 默认算法与 `@h-ai/crypto` 对齐：加密输入使用 `SM4`，哈希展示使用 `SM3`，签名展示使用 `SM2`。
 
+#### AI 文档与表格（4 个）
+
+| 组件                     | 描述             | 主要属性 / 能力 |
+| ------------------------ | ---------------- | ---------------- |
+| `MarkdownRenderer`       | Markdown 渲染器  | `content`, `showCopyButton`, `enableHighlight` |
+| `AiDocumentDownloadMenu` | 文档下载菜单     | `actions`, `ondownload` |
+| `AiDocumentEditor`       | AI 文档编辑器    | `content`, `showRunButton`, `showCodePreviewToggle`, `allowUnsafeCodePreview` |
+| `AiTableEditor`          | AI 表格编辑器    | `columns`, `rows`, `editable`, `ondownload` |
+
+> `AiDocumentEditor` 默认只允许 Markdown 内置预览。HTML / JS / CSS 等高风险预览需要显式设置 `allowUnsafeCodePreview`，或通过 `oncoderun` 返回受控的预览结果。
+
+#### CRUD 场景（5 个）
+
+| 组件                 | 描述         | 主要属性 / 能力 |
+| -------------------- | ------------ | ---------------- |
+| `CrudPage`           | CRUD 主页面  | `definition`, `navAdapter`, `loading` |
+| `CrudFilterBar`      | 过滤工具栏   | `filters`, `query`, `onchange` |
+| `CrudDetailDrawer`   | 详情抽屉     | `open`, `item`, `fields` |
+| `CrudEditDrawer`     | 编辑抽屉     | `open`, `schema`, `onsubmit` |
+| `CrudDeleteConfirm`  | 删除确认框   | `open`, `item`, `onconfirm` |
+
 ## 使用示例
 
 ### Toast 通知
@@ -427,25 +465,25 @@ npm install -D @iconify/tailwind4 @iconify-json/tabler
 
 ### 主题切换
 
-使用内置的主题工具函数管理 32 个 DaisyUI 主题：
+使用内置的主题工具函数管理 15 个精选 DaisyUI 主题：
 
 ```ts
 import {
   applyTheme, // 应用主题（自动持久化到 localStorage）
   getCurrentTheme, // 获取当前主题
-  getThemeInitScript, // 防闪烁脚本（放在 app.html <head> 中）
+  getThemeInitScript, // 返回可注入到 HTML shell 的防闪烁脚本文本
   isDarkTheme, // 检查是否暗色主题
   THEME_GROUPS, // 按亮色/暗色分组
-  THEMES, // ThemeInfo[] — 全部 32 个主题元数据
+  THEMES, // ThemeInfo[] — 15 个精选主题元数据
 } from '@h-ai/ui'
 ```
 
-在 `app.html` 中添加防闪烁脚本：
+在 SvelteKit 的 `app.html` 中，请直接写入下面这段脚本内容（与 `getThemeInitScript()` 返回值一致）：
 
 ```html
 <head>
   <script>
-    {@html getThemeInitScript()}
+    (function(){var t='light';try{var s=localStorage.getItem('theme');if(s)t=s}catch{}document.documentElement.setAttribute('data-theme',t)})()
   </script>
 </head>
 ```

package/auto-import.d.ts

@@ -27,6 +27,7 @@ declare global {
   const Input: typeof import('@h-ai/ui')['Input']
   const Progress: typeof import('@h-ai/ui')['Progress']
   const Radio: typeof import('@h-ai/ui')['Radio']
+  // `Range` 与 DOM Range 构造器冲突，保持显式 import。
   const Rating: typeof import('@h-ai/ui')['Rating']
   const Select: typeof import('@h-ai/ui')['Select']
   const Spinner: typeof import('@h-ai/ui')['Spinner']
@@ -39,7 +40,10 @@ declare global {
 
   // compounds
   const Accordion: typeof import('@h-ai/ui')['Accordion']
+  const ActionSheet: typeof import('@h-ai/ui')['ActionSheet']
   const Alert: typeof import('@h-ai/ui')['Alert']
+  const AppBar: typeof import('@h-ai/ui')['AppBar']
+  const BottomNav: typeof import('@h-ai/ui')['BottomNav']
   const Breadcrumb: typeof import('@h-ai/ui')['Breadcrumb']
   const Calendar: typeof import('@h-ai/ui')['Calendar']
   const Card: typeof import('@h-ai/ui')['Card']
@@ -52,13 +56,17 @@ declare global {
   const Empty: typeof import('@h-ai/ui')['Empty']
   const Form: typeof import('@h-ai/ui')['Form']
   const FormField: typeof import('@h-ai/ui')['FormField']
+  const InfiniteScroll: typeof import('@h-ai/ui')['InfiniteScroll']
   const Modal: typeof import('@h-ai/ui')['Modal']
   const PageHeader: typeof import('@h-ai/ui')['PageHeader']
   const Pagination: typeof import('@h-ai/ui')['Pagination']
   const Popover: typeof import('@h-ai/ui')['Popover']
+  const PullRefresh: typeof import('@h-ai/ui')['PullRefresh']
   const Result: typeof import('@h-ai/ui')['Result']
+  const SafeArea: typeof import('@h-ai/ui')['SafeArea']
   const Skeleton: typeof import('@h-ai/ui')['Skeleton']
   const Steps: typeof import('@h-ai/ui')['Steps']
+  const SwipeCell: typeof import('@h-ai/ui')['SwipeCell']
   const Tabs: typeof import('@h-ai/ui')['Tabs']
   const TagInput: typeof import('@h-ai/ui')['TagInput']
   const Timeline: typeof import('@h-ai/ui')['Timeline']
@@ -78,6 +86,7 @@ declare global {
   const ForgotPasswordForm: typeof import('@h-ai/ui')['ForgotPasswordForm']
   const LoginForm: typeof import('@h-ai/ui')['LoginForm']
   const PasswordInput: typeof import('@h-ai/ui')['PasswordInput']
+  const PermGuard: typeof import('@h-ai/ui')['PermGuard']
   const RegisterForm: typeof import('@h-ai/ui')['RegisterForm']
   const ResetPasswordForm: typeof import('@h-ai/ui')['ResetPasswordForm']
   const UserProfile: typeof import('@h-ai/ui')['UserProfile']
@@ -92,6 +101,19 @@ declare global {
   const EncryptedInput: typeof import('@h-ai/ui')['EncryptedInput']
   const HashDisplay: typeof import('@h-ai/ui')['HashDisplay']
   const SignatureDisplay: typeof import('@h-ai/ui')['SignatureDisplay']
+
+  // scenes - ai
+  const AiDocumentDownloadMenu: typeof import('@h-ai/ui')['AiDocumentDownloadMenu']
+  const AiDocumentEditor: typeof import('@h-ai/ui')['AiDocumentEditor']
+  const AiTableEditor: typeof import('@h-ai/ui')['AiTableEditor']
+  const MarkdownRenderer: typeof import('@h-ai/ui')['MarkdownRenderer']
+
+  // scenes - crud
+  const CrudDeleteConfirm: typeof import('@h-ai/ui')['CrudDeleteConfirm']
+  const CrudDetailDrawer: typeof import('@h-ai/ui')['CrudDetailDrawer']
+  const CrudEditDrawer: typeof import('@h-ai/ui')['CrudEditDrawer']
+  const CrudFilterBar: typeof import('@h-ai/ui')['CrudFilterBar']
+  const CrudPage: typeof import('@h-ai/ui')['CrudPage']
 }
 
 export {}

package/auto-import.js

@@ -19,7 +19,6 @@ const UI_COMPONENTS = new Set([
   'Input',
   'Progress',
   'Radio',
-  'Range',
   'Rating',
   'Select',
   'Spinner',
@@ -29,6 +28,7 @@ const UI_COMPONENTS = new Set([
   'ToggleCheckbox',
   'ToggleInput',
   'ToggleRadio',
+  // `Range` 与 DOM Range 构造器重名，保持显式 import 更稳妥。
   // compounds
   'Accordion',
   'ActionSheet',
@@ -89,8 +89,16 @@ const UI_COMPONENTS = new Set([
   'HashDisplay',
   'SignatureDisplay',
   // scenes - ai
+  'AiDocumentDownloadMenu',
   'AiDocumentEditor',
+  'AiTableEditor',
   'MarkdownRenderer',
+  // scenes - crud
+  'CrudDeleteConfirm',
+  'CrudDetailDrawer',
+  'CrudEditDrawer',
+  'CrudFilterBar',
+  'CrudPage',
 ])
 
 const TAG_REGEX = /<([A-Z][A-Za-z0-9]*)\b/g

package/dist/components/primitives/IconButton.svelte

@@ -11,6 +11,9 @@
   import type { IconButtonProps } from '../../types.js'
   import { cn, getSizeClass, getVariantClass } from '../../utils.js'
 
+  const SAFE_INLINE_SVG_REGEX = /^<svg[\s\S]*<\/svg>$/i
+  const UNSAFE_INLINE_SVG_REGEX = /<\s*(?:script|foreignObject|iframe|object|embed|link|meta|img)\b|\son[a-z]+\s*=|(?:href|xlink:href)\s*=\s*['"]\s*(?:javascript:|vbscript:|data:text\/html)/i
+
   const {
     icon,
     label = '',
@@ -28,6 +31,16 @@
   /** 计算最终的 aria-label */
   const computedAriaLabel = $derived(ariaLabel || label || tooltip)
 
+  /**
+   * 字符串图标仅允许受信任的内联 SVG。
+   *
+   * 这里不尝试支持任意 HTML，避免把图标位变成通用 HTML 注入入口；
+   * 若需要复杂内容，请改用 Snippet / children。
+   */
+  const sanitizedIcon = $derived(
+    typeof icon === 'string' ? sanitizeInlineSvg(icon) : '',
+  )
+
   const buttonClass = $derived(
     cn(
       'btn btn-circle',
@@ -56,6 +69,19 @@
     }
     onclick?.(e)
   }
+
+  function sanitizeInlineSvg(markup: string): string {
+    const trimmed = markup.trim()
+    if (!trimmed) {
+      return ''
+    }
+
+    if (!SAFE_INLINE_SVG_REGEX.test(trimmed) || UNSAFE_INLINE_SVG_REGEX.test(trimmed)) {
+      return ''
+    }
+
+    return trimmed
+  }
 </script>
 
 {#if tooltip}
@@ -73,10 +99,10 @@
         {@render children()}
       {:else if typeof icon === 'function'}
         {@render icon()}
-      {:else if icon}
+      {:else if sanitizedIcon}
         <span class={iconSize}>
-          <!-- eslint-disable-next-line svelte/no-at-html-tags -- 受控 SVG 图标渲染 -->
-          {@html icon}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -- 字符串图标只渲染经过白名单校验的内联 SVG -->
+          {@html sanitizedIcon}
         </span>
       {/if}
     </button>
@@ -95,10 +121,10 @@
       {@render children()}
     {:else if typeof icon === 'function'}
       {@render icon()}
-    {:else if icon}
+    {:else if sanitizedIcon}
       <span class={iconSize}>
-        <!-- eslint-disable-next-line svelte/no-at-html-tags -- 受控 SVG 图标渲染 -->
-        {@html icon}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -- 字符串图标只渲染经过白名单校验的内联 SVG -->
+        {@html sanitizedIcon}
       </span>
     {/if}
   </button>

package/dist/components/scenes/ai/AiDocumentEditor.svelte

@@ -25,9 +25,14 @@
     MarkdownTextAlignKind,
   } from './document-types.js'
   import { tick } from 'svelte'
+  import { writeTextToClipboard } from '../../../internal/browser-safety.js'
   import { uiM } from '../../../messages.js'
   import { cn } from '../../../utils.js'
   import AiDocumentDownloadMenu from './AiDocumentDownloadMenu.svelte'
+  import {
+    createBuiltInCodePreview,
+    resolvePreviewSandbox,
+  } from './code-preview.js'
   import { resolveDocumentMarkdownContent } from './document-download.js'
   import { renderMarkdownDocument } from './document-parse.js'
   import { parseMarkdown } from './markdown-parse.js'
@@ -241,6 +246,8 @@
     showRunButton = false,
     // 是否在代码块头部显示“代码/预览”切换。
     showCodePreviewToggle = false,
+    // 是否显式允许内置 HTML / JS / CSS 预览执行高风险内容。
+    allowUnsafeCodePreview = false,
     // 代码预览切换模式下展示在语言标签旁的提示文案。
     codePreviewHint = '',
     // 是否启用语法高亮。
@@ -628,17 +635,9 @@
     ]
   }
 
-  const HTML_DOCUMENT_PATTERN = /<!doctype html>|<html[\s>]|<body[\s>]|<div[\s>]|<main[\s>]/i
-
   async function copyRawContent(): Promise<boolean> {
-    try {
-      await navigator.clipboard.writeText(content)
-      return true
-    }
-    catch {
-      // clipboard API 可能被安全策略禁用；保持静默避免打断阅读。
-      return false
-    }
+    // 剪贴板能力在受限 WebView / 非安全上下文中可能缺失；这里统一静默降级。
+    return writeTextToClipboard(content)
   }
 
   function triggerDocumentCopiedFeedback(): void {
@@ -682,137 +681,15 @@
       return
     }
 
-    try {
-      await navigator.clipboard.writeText(codeEl.textContent ?? '')
+    if (await writeTextToClipboard(codeEl.textContent ?? '')) {
       updateCopyButtonState(button)
     }
-    catch {
-    // clipboard API 可能被安全策略禁用；不抛错以免阻断其他交互。
-    }
   }
 
   function lookupCodeBlock(blockId: string): MarkdownCodeBlockItem | undefined {
     return renderResult.codeBlocks.find(item => item.id === blockId)
   }
 
-  function looksLikeHtml(code: string): boolean {
-    return HTML_DOCUMENT_PATTERN.test(code)
-  }
-
-  function buildJavaScriptPreview(code: string): string {
-    const safeCode = code.replace(/<\/script/gi, '<\\/script')
-
-    return `<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style>
-      body {
-        margin: 0;
-        padding: 16px;
-        font: 14px/1.6 system-ui, sans-serif;
-        color: #1f2937;
-        background: #f8fafc;
-      }
-
-      #app {
-        min-height: 48px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script>
-${safeCode}
-    <\/script>
-  </body>
-</html>`
-  }
-
-  function buildCssPreview(code: string): string {
-    return `<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style>${code}</style>
-    <style>
-      body {
-        margin: 0;
-        padding: 20px;
-        font: 14px/1.6 system-ui, sans-serif;
-        background: #f8fafc;
-      }
-
-      .preview-card {
-        border-radius: 16px;
-        padding: 24px;
-        border: 1px dashed #cbd5e1;
-        background: white;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="preview-card">
-      <h3>CSS Preview</h3>
-      <p>This surface is provided so the stylesheet can render immediately.</p>
-      <button type="button">Action</button>
-    </div>
-  </body>
-</html>`
-  }
-
-  /**
-   * 没有外部运行器时，组件只为可直接在浏览器里安全预览的语言提供兜底能力。
-   * 其余语言返回 undefined，让上层明确知道需要后端或沙箱参与执行。
-   */
-  function createBuiltInCodePreview(
-    request: MarkdownCodeRunRequest,
-  ): MarkdownCodeRunResult | undefined {
-    const language = request.language?.trim().toLocaleLowerCase()
-
-    if (
-      language === 'html'
-      || language === 'htm'
-      || language === 'xml'
-      || language === 'svg'
-      || (!language && looksLikeHtml(request.code))
-    ) {
-      return {
-        kind: 'html',
-        title: uiM('markdown_run_preview'),
-        content: request.code,
-      }
-    }
-
-    if (language === 'javascript' || language === 'js' || language === 'mjs') {
-      return {
-        kind: 'html',
-        title: uiM('markdown_run_preview'),
-        content: buildJavaScriptPreview(request.code),
-      }
-    }
-
-    if (language === 'css') {
-      return {
-        kind: 'html',
-        title: uiM('markdown_run_preview'),
-        content: buildCssPreview(request.code),
-      }
-    }
-
-    if (language === 'markdown' || language === 'md') {
-      return {
-        kind: 'markdown',
-        title: uiM('markdown_run_preview'),
-        content: request.code,
-      }
-    }
-
-    return undefined
-  }
-
   function formatPreviewLanguageLabel(language: string | undefined): string | null {
     const normalized = language?.trim().toLocaleLowerCase()
     if (!normalized) {
@@ -867,8 +744,12 @@ ${safeCode}
     }
 
     try {
-      const preview = await (oncoderun?.(request)
-        ?? createBuiltInCodePreview(request))
+      const preview = oncoderun
+        ? await oncoderun(request)
+        : createBuiltInCodePreview(request, {
+          allowUnsafeCodePreview,
+          previewTitle: uiM('markdown_run_preview'),
+        })
 
       if (!preview) {
         codePreviews = {
@@ -1029,7 +910,10 @@ ${safeCode}
       : ''
 
     if (result.kind === 'html') {
-      host.innerHTML = `<div class="hai-md-preview-card"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<iframe class="hai-md-preview-frame" sandbox="allow-scripts" srcdoc="${escapePreviewAttribute(result.content)}" title="${previewTitle}"></iframe></div>`
+      const previewSandbox = escapePreviewAttribute(
+        resolvePreviewSandbox(result.allowScripts),
+      )
+      host.innerHTML = `<div class="hai-md-preview-card"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<iframe class="hai-md-preview-frame" sandbox="${previewSandbox}" srcdoc="${escapePreviewAttribute(result.content)}" title="${previewTitle}"></iframe></div>`
       return
     }
 

package/dist/components/scenes/ai/MarkdownRenderer.svelte

@@ -17,6 +17,7 @@
 -->
 <script lang='ts'>
   import type { MarkdownRendererProps } from '../types.js'
+  import { writeTextToClipboard } from '../../../internal/browser-safety.js'
   import { cn } from '../../../utils.js'
   import { parseMarkdown } from './markdown-parse.js'
 
@@ -36,7 +37,7 @@
   /**
    * 事件代理：处理代码块复制按钮点击
    */
-  function handleClick(e: MouseEvent) {
+  async function handleClick(e: MouseEvent) {
     const target = e.target as HTMLElement
     const btn = target.closest('[data-copy-code]') as HTMLButtonElement | null
     if (!btn)
@@ -48,15 +49,16 @@
       return
 
     const text = codeEl.textContent ?? ''
-    navigator.clipboard.writeText(text).then(() => {
-      btn.classList.add('hai-md-copied')
-      btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`
-
-      setTimeout(() => {
-        btn.classList.remove('hai-md-copied')
-        btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`
-      }, 2000)
-    }).catch(() => { /* clipboard API 可能被安全策略禁用 */ })
+    if (!await writeTextToClipboard(text))
+      return
+
+    btn.classList.add('hai-md-copied')
+    btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`
+
+    window.setTimeout(() => {
+      btn.classList.remove('hai-md-copied')
+      btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`
+    }, 2000)
   }
 </script>
 

package/dist/components/scenes/ai/code-preview.d.ts

@@ -0,0 +1,18 @@
+import type { MarkdownCodeRunRequest, MarkdownCodeRunResult } from './document-types.js';
+export interface BuiltInCodePreviewOptions {
+    /**
+     * 是否允许执行内置的不安全代码预览。
+     *
+     * 默认仅允许 Markdown 预览；HTML / JS / CSS 预览需要显式 opt-in，
+     * 否则组件会提示调用方提供自定义 oncoderun 或自行开启风险开关。
+     */
+    allowUnsafeCodePreview?: boolean;
+    previewTitle: string;
+}
+/**
+ * 根据运行结果构造 iframe sandbox 值。
+ *
+ * 默认不允许脚本执行；只有显式声明 `allowScripts` 时才放开 `allow-scripts`。
+ */
+export declare function resolvePreviewSandbox(allowScripts: boolean | undefined): string;
+export declare function createBuiltInCodePreview(request: MarkdownCodeRunRequest, options: BuiltInCodePreviewOptions): MarkdownCodeRunResult | undefined;