@h-ai/ui 0.1.0-alpha.18 → 0.1.0-alpha.20

package/dist/components/scenes/ai/code-preview.js

@@ -0,0 +1,112 @@
+const HTML_DOCUMENT_PATTERN = /<\s*(?:!doctype|html|body|head|div|section|article|main|span|style|script|svg|canvas)\b/i;
+const HTML_LANGUAGE_SET = new Set(['html', 'htm', 'xhtml', 'xml', 'svg']);
+const JAVASCRIPT_LANGUAGE_SET = new Set(['javascript', 'js', 'typescript', 'ts']);
+const CSS_LANGUAGE_SET = new Set(['css']);
+/**
+ * 根据运行结果构造 iframe sandbox 值。
+ *
+ * 默认不允许脚本执行；只有显式声明 `allowScripts` 时才放开 `allow-scripts`。
+ */
+export function resolvePreviewSandbox(allowScripts) {
+    return allowScripts ? 'allow-scripts' : '';
+}
+export function createBuiltInCodePreview(request, options) {
+    const language = (request.language ?? '').trim().toLowerCase();
+    if (language === 'markdown' || language === 'md') {
+        return {
+            kind: 'markdown',
+            title: options.previewTitle,
+            content: request.code,
+        };
+    }
+    if (!options.allowUnsafeCodePreview) {
+        return undefined;
+    }
+    if (HTML_LANGUAGE_SET.has(language) || (!language && looksLikeHtml(request.code))) {
+        return {
+            kind: 'html',
+            title: options.previewTitle,
+            content: request.code,
+            allowScripts: true,
+        };
+    }
+    if (JAVASCRIPT_LANGUAGE_SET.has(language)) {
+        return {
+            kind: 'html',
+            title: options.previewTitle,
+            content: buildJavaScriptPreview(request.code),
+            allowScripts: true,
+        };
+    }
+    if (CSS_LANGUAGE_SET.has(language)) {
+        return {
+            kind: 'html',
+            title: options.previewTitle,
+            content: buildCssPreview(request.code),
+        };
+    }
+    return undefined;
+}
+function looksLikeHtml(code) {
+    return HTML_DOCUMENT_PATTERN.test(code);
+}
+function buildJavaScriptPreview(code) {
+    const safeCode = code.replace(/<\/script/gi, '<\\/script');
+    return `<!doctype html>
+<html lang="en">
+  <body>
+    <div id="app"></div>
+    <script type="module">
+${safeCode}
+    </script>
+  </body>
+</html>`;
+}
+function buildCssPreview(code) {
+    const sampleMarkup = [
+        '<div class="hai-preview-shell">',
+        '  <button class="hai-preview-button">Preview Button</button>',
+        '  <div class="hai-preview-card">Preview Card</div>',
+        '</div>',
+    ].join('\n');
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #f5f5f5;
+        font-family: system-ui, sans-serif;
+      }
+      .hai-preview-shell {
+        display: grid;
+        gap: 12px;
+        padding: 24px;
+      }
+      .hai-preview-button {
+        border: 0;
+        border-radius: 999px;
+        padding: 10px 16px;
+        background: #2563eb;
+        color: white;
+        font-size: 14px;
+        cursor: pointer;
+      }
+      .hai-preview-card {
+        padding: 16px;
+        border-radius: 16px;
+        background: white;
+        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
+      }
+${code}
+    </style>
+  </head>
+  <body>
+${sampleMarkup}
+  </body>
+</html>`;
+}

package/dist/components/scenes/ai/document-types.d.ts

@@ -41,6 +41,13 @@ export interface MarkdownCodeRunResult {
     title?: string;
     /** Optional preview description. */
     description?: string;
+    /**
+     * 预览 iframe 是否允许执行脚本。
+     *
+     * 默认值为空，组件会以最严格的 sandbox 渲染 HTML 预览；
+     * 只有调用方显式声明后才会放开 `allow-scripts`。
+     */
+    allowScripts?: boolean;
 }
 export interface MarkdownRewriteAction {
     /** Rewrite action id used in callbacks. */
@@ -136,6 +143,13 @@ export interface AiDocumentEditorProps {
     showRunButton?: boolean;
     /** Whether to show the code/preview toggle on code blocks. */
     showCodePreviewToggle?: boolean;
+    /**
+     * 是否启用内置的高风险代码预览。
+     *
+     * 默认仅允许 Markdown 预览；HTML / JS / CSS 等会执行或渲染任意代码的内置预览
+     * 需要宿主显式开启，或由宿主通过 `oncoderun` 自行提供受控沙箱结果。
+     */
+    allowUnsafeCodePreview?: boolean;
     /** Optional helper text displayed beside language when preview toggle is enabled. */
     codePreviewHint?: string;
     /** Whether syntax highlighting is enabled. */

package/dist/components/scenes/crypto/EncryptedInput.svelte

@@ -10,6 +10,7 @@
 -->
 <script lang='ts'>
   import type { Size } from '../../../types.js'
+  import { writeTextToClipboard } from '../../../internal/browser-safety.js'
   import { uiM } from '../../../messages.js'
   import { BareButton, IconButton, Input } from '../../primitives/index.js'
 
@@ -87,7 +88,7 @@
 
   function copyEncrypted() {
     if (encryptedValue) {
-      navigator.clipboard.writeText(encryptedValue)
+      void writeTextToClipboard(encryptedValue)
     }
   }
 </script>

package/dist/components/scenes/crypto/HashDisplay.svelte

@@ -10,6 +10,7 @@
 -->
 <script lang='ts'>
   import type { HashDisplayProps } from '../types.js'
+  import { writeTextToClipboard } from '../../../internal/browser-safety.js'
   import { uiM } from '../../../messages.js'
   import { cn } from '../../../utils.js'
   import { Badge, IconButton } from '../../primitives/index.js'
@@ -44,16 +45,12 @@
     if (!value)
       return
 
-    try {
-      await navigator.clipboard.writeText(value)
+    if (await writeTextToClipboard(value)) {
       copied = true
-      setTimeout(() => {
+      window.setTimeout(() => {
         copied = false
       }, 2000)
     }
-    catch {
-    // 复制失败
-    }
   }
 </script>
 

package/dist/components/scenes/crypto/SignatureDisplay.svelte

@@ -10,6 +10,7 @@
 -->
 <script lang='ts'>
   import type { SignatureDisplayProps } from '../types.js'
+  import { writeTextToClipboard } from '../../../internal/browser-safety.js'
   import { uiM } from '../../../messages.js'
   import { cn } from '../../../utils.js'
   import { Badge, IconButton } from '../../primitives/index.js'
@@ -46,31 +47,23 @@
   async function copySignature() {
     if (!signature)
       return
-    try {
-      await navigator.clipboard.writeText(signature)
+    if (await writeTextToClipboard(signature)) {
       copiedSig = true
-      setTimeout(() => {
+      window.setTimeout(() => {
         copiedSig = false
       }, 2000)
     }
-    catch {
-    // 复制失败
-    }
   }
 
   async function copyPublicKey() {
     if (!publicKey)
       return
-    try {
-      await navigator.clipboard.writeText(publicKey)
+    if (await writeTextToClipboard(publicKey)) {
       copiedKey = true
-      setTimeout(() => {
+      window.setTimeout(() => {
         copiedKey = false
       }, 2000)
     }
-    catch {
-    // 复制失败
-    }
   }
 </script>
 

package/dist/components/scenes/iam/ForgotPasswordForm.svelte

@@ -42,14 +42,23 @@
     ),
   )
 
+  function getSubmittedValue(formData: FormData, key: string, fallback = ''): string | undefined {
+    const submitted = formData.get(key)
+    const value = typeof submitted === 'string' ? submitted : fallback
+    const trimmed = value.trim()
+    return trimmed || undefined
+  }
+
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault()
     if (loading || disabled)
       return
 
+    const submittedFormData = new FormData(e.currentTarget as HTMLFormElement)
+
     const data: ForgotPasswordFormData = {
-      email: mode === 'email' ? email : undefined,
-      phone: mode === 'phone' ? phone : undefined,
+      email: mode === 'email' ? getSubmittedValue(submittedFormData, 'email', email) : undefined,
+      phone: mode === 'phone' ? getSubmittedValue(submittedFormData, 'phone', phone) : undefined,
     }
 
     await onsubmit?.(data)

package/dist/components/scenes/iam/RegisterForm.svelte

@@ -101,6 +101,13 @@
       : ''),
   )
 
+  function getSubmittedValue(formData: FormData, key: string, fallback = ''): string | undefined {
+    const submitted = formData.get(key)
+    const value = typeof submitted === 'string' ? submitted : fallback
+    const trimmed = value.trim()
+    return trimmed || undefined
+  }
+
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault()
     if (loading || disabled)
@@ -108,13 +115,15 @@
     if (!passwordsMatch)
       return
 
+    const submittedFormData = new FormData(e.currentTarget as HTMLFormElement)
+
     const data: RegisterFormData = {
-      username,
-      email,
-      phone,
+      username: getSubmittedValue(submittedFormData, 'username', username),
+      email: getSubmittedValue(submittedFormData, 'email', email),
+      phone: getSubmittedValue(submittedFormData, 'phone', phone),
       password,
       confirmPassword: requireConfirmPassword ? confirmPassword : undefined,
-      nickname,
+      nickname: getSubmittedValue(submittedFormData, 'nickname', nickname),
     }
 
     await onsubmit?.(data)

package/dist/components/scenes/storage/AvatarUpload.svelte

@@ -13,6 +13,9 @@
   import { cn } from '../../../utils.js'
   import BareInput from '../../primitives/BareInput.svelte'
 
+  const SAFE_HTTP_URL_REGEX = /^https?:\/\//i
+  const SAFE_RELATIVE_URL_REGEX = /^(?:\/(?!\/)|\.\.?\/)/
+
   let {
     value = $bindable(''),
     size = 'lg',
@@ -30,6 +33,7 @@
 
   let loading = $state(false)
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
+  let localPreviewUrl: string | null = $state(null)
 
   const sizeClass = $derived({
     'xs': 'w-8 h-8',
@@ -75,6 +79,33 @@
     return null
   }
 
+  function isSafePreviewUrl(url: string): boolean {
+    return SAFE_HTTP_URL_REGEX.test(url) || SAFE_RELATIVE_URL_REGEX.test(url)
+  }
+
+  function replaceAvatarValue(nextValue: string): void {
+    if (localPreviewUrl && localPreviewUrl !== nextValue) {
+      URL.revokeObjectURL(localPreviewUrl)
+      localPreviewUrl = null
+    }
+
+    if (nextValue.startsWith('blob:')) {
+      localPreviewUrl = nextValue
+    }
+
+    value = nextValue
+    onchange?.(nextValue)
+  }
+
+  $effect(() => {
+    return () => {
+      if (localPreviewUrl) {
+        URL.revokeObjectURL(localPreviewUrl)
+        localPreviewUrl = null
+      }
+    }
+  })
+
   // 上传文件
   async function uploadFile(file: File) {
     loading = true
@@ -82,8 +113,7 @@
     try {
       if (!uploadUrl && !presignUrl) {
         // 没有上传地址，创建本地预览
-        value = URL.createObjectURL(file)
-        onchange?.(value)
+        replaceAvatarValue(URL.createObjectURL(file))
         return
       }
 
@@ -109,6 +139,9 @@
         }
 
         const data = await presignResponse.json()
+        if (typeof data?.url !== 'string' || !SAFE_HTTP_URL_REGEX.test(data.url)) {
+          throw new Error(uiM('avatar_upload_get_url_failed'))
+        }
         targetUrl = data.url
       }
 
@@ -128,19 +161,31 @@
 
       // 获取最终 URL
       let finalUrl = targetUrl!.split('?')[0]
+      let responseUrl: string | undefined
 
       try {
-        const data = await response.json()
-        if (data.url) {
-          finalUrl = data.url
+        const data = await response.clone().json()
+        if (typeof data?.url === 'string') {
+          responseUrl = data.url
         }
       }
       catch {
       // 响应不是 JSON
       }
 
-      value = finalUrl
-      onchange?.(finalUrl)
+      if (responseUrl) {
+        if (!isSafePreviewUrl(responseUrl)) {
+          throw new Error(uiM('avatar_upload_failed'))
+        }
+
+        finalUrl = responseUrl
+      }
+
+      if (!isSafePreviewUrl(finalUrl)) {
+        throw new Error(uiM('avatar_upload_failed'))
+      }
+
+      replaceAvatarValue(finalUrl)
     }
     catch (error) {
       const message = error instanceof Error ? error.message : uiM('avatar_upload_failed')

package/dist/components/scenes/storage/FileUpload.svelte

@@ -10,6 +10,7 @@
 -->
 <script lang='ts'>
   import type { FileUploadProps, UploadFile } from '../types.js'
+  import { SvelteMap } from 'svelte/reactivity'
   import { uiM } from '../../../messages.js'
   import { cn, generateId } from '../../../utils.js'
   import BareInput from '../../primitives/BareInput.svelte'
@@ -17,6 +18,7 @@
   import Progress from '../../primitives/Progress.svelte'
 
   const SAFE_HTTP_URL_REGEX = /^https?:\/\//i
+  const MAX_PARALLEL_UPLOADS = 3
 
   const {
     accept = '*',
@@ -40,6 +42,7 @@
   let files = $state<UploadFile[]>([])
   let isDragging = $state(false)
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
+  const activeRequests = new SvelteMap<string, XMLHttpRequest>()
 
   const containerClass = $derived(
     cn(
@@ -95,6 +98,63 @@
     return null
   }
 
+  function registerActiveRequest(fileId: string, xhr: XMLHttpRequest): void {
+    activeRequests.set(fileId, xhr)
+  }
+
+  function clearActiveRequest(fileId: string, xhr?: XMLHttpRequest): void {
+    const current = activeRequests.get(fileId)
+    if (!current || (xhr && current !== xhr)) {
+      return
+    }
+
+    current.upload.onprogress = null
+    current.onload = null
+    current.onerror = null
+    current.onabort = null
+    activeRequests.delete(fileId)
+  }
+
+  function abortActiveRequest(fileId: string): void {
+    const current = activeRequests.get(fileId)
+    if (!current) {
+      return
+    }
+
+    clearActiveRequest(fileId, current)
+    current.abort()
+  }
+
+  function abortAllActiveRequests(): void {
+    for (const fileId of [...activeRequests.keys()]) {
+      abortActiveRequest(fileId)
+    }
+  }
+
+  async function uploadPendingFiles(targetFiles: UploadFile[]): Promise<void> {
+    const queue = [...targetFiles]
+    const workerCount = Math.min(MAX_PARALLEL_UPLOADS, queue.length)
+
+    await Promise.all(
+      Array.from({ length: workerCount }, async () => {
+        while (queue.length > 0) {
+          const nextFile = queue.shift()
+          if (!nextFile) {
+            return
+          }
+
+          await uploadFile(nextFile)
+        }
+      }),
+    )
+  }
+
+  $effect(() => {
+    return () => {
+      abortAllActiveRequests()
+    }
+  })
+
   // 添加文件
   async function addFiles(fileList: FileList | null) {
     if (!fileList)
@@ -129,9 +189,7 @@
 
     // 自动上传
     if (autoUpload) {
-      for (const file of newFiles.filter(f => f.state === 'pending')) {
-        await uploadFile(file)
-      }
+      await uploadPendingFiles(newFiles.filter(f => f.state === 'pending'))
     }
   }
 
@@ -146,6 +204,8 @@
     uploadFile.state = 'uploading'
     files = [...files]
 
+    let xhr: XMLHttpRequest | undefined
+
     try {
       let targetUrl = uploadUrl
 
@@ -176,52 +236,62 @@
       }
 
       // 上传文件
-      const xhr = new XMLHttpRequest()
+      xhr = new XMLHttpRequest()
+      registerActiveRequest(uploadFile.id, xhr)
+      const activeXhr = xhr
 
       await new Promise<void>((resolve, reject) => {
-        xhr.upload.onprogress = (e) => {
+        activeXhr.upload.onprogress = (e) => {
           if (e.lengthComputable) {
             uploadFile.progress = Math.round((e.loaded / e.total) * 100)
             files = [...files]
           }
         }
 
-        xhr.onload = () => {
-          if (xhr.status >= 200 && xhr.status < 300) {
+        activeXhr.onload = () => {
+          if (activeXhr.status >= 200 && activeXhr.status < 300) {
             uploadFile.state = 'success'
             uploadFile.progress = 100
             try {
-              uploadFile.response = JSON.parse(xhr.responseText)
+              uploadFile.response = JSON.parse(activeXhr.responseText)
             }
             catch {
-              uploadFile.response = xhr.responseText
+              uploadFile.response = activeXhr.responseText
             }
             resolve()
           }
           else {
-            reject(new Error(`${uiM('file_upload_failed')}: ${xhr.statusText}`))
+            reject(new Error(`${uiM('file_upload_failed')}: ${activeXhr.statusText}`))
           }
         }
 
-        xhr.onerror = () => reject(new Error(uiM('file_upload_network_error')))
+        activeXhr.onerror = () => reject(new Error(uiM('file_upload_network_error')))
+        activeXhr.onabort = () => reject(new DOMException('Upload aborted', 'AbortError'))
 
-        xhr.open('PUT', targetUrl!)
-        xhr.setRequestHeader('Content-Type', uploadFile.type || 'application/octet-stream')
+        activeXhr.open('PUT', targetUrl!)
+        activeXhr.setRequestHeader('Content-Type', uploadFile.type || 'application/octet-stream')
 
         for (const [key, value] of Object.entries(headers)) {
-          xhr.setRequestHeader(key, value)
+          activeXhr.setRequestHeader(key, value)
         }
 
-        xhr.send(uploadFile.file)
+        activeXhr.send(uploadFile.file)
       })
 
       onupload?.(uploadFile)
     }
     catch (error) {
+      if (error instanceof DOMException && error.name === 'AbortError') {
+        return
+      }
+
       uploadFile.state = 'error'
       uploadFile.error = error instanceof Error ? error.message : uiM('file_upload_failed')
       onerror?.(uploadFile.error)
     }
+    finally {
+      clearActiveRequest(uploadFile.id, xhr)
+    }
 
     files = [...files]
   }
@@ -230,6 +300,7 @@
   function removeFile(id: string) {
     const file = files.find(f => f.id === id)
     if (file) {
+      abortActiveRequest(id)
       files = files.filter(f => f.id !== id)
       onremove?.(file)
       onchange?.(files)
@@ -279,13 +350,12 @@
 
   /** 手动触发上传 */
   export async function upload() {
-    for (const file of files.filter(f => f.state === 'pending')) {
-      await uploadFile(file)
-    }
+    await uploadPendingFiles(files.filter(f => f.state === 'pending'))
   }
 
   /** 清空文件列表 */
   export function clear() {
+    abortAllActiveRequests()
     files = []
     onchange?.(files)
   }

package/dist/i18n.svelte.js

@@ -5,6 +5,7 @@
  * @module i18n.svelte
  */
 import { core } from '@h-ai/core';
+import { readStoredValue, writeStoredValue } from './internal/browser-safety.js';
 // 从 core.i18n 解构常用函数
 const { DEFAULT_LOCALE, DEFAULT_LOCALES, setGlobalLocale, } = core.i18n;
 function isLocaleSupported(locale, supportedLocales = DEFAULT_LOCALES) {
@@ -56,7 +57,7 @@ export function createLocaleStore(options = {}) {
     let initialLocale = defaultLocale;
     if (typeof window !== 'undefined') {
         // 1. 优先从 localStorage 读取
-        const savedLocale = localStorage.getItem(persistKey);
+        const savedLocale = readStoredValue(persistKey);
         if (savedLocale && isLocaleSupported(savedLocale, supportedLocales)) {
             initialLocale = savedLocale;
         }
@@ -93,7 +94,7 @@ export function createLocaleStore(options = {}) {
             setGlobalLocale(resolved);
             // 持久化到 localStorage
             if (typeof window !== 'undefined') {
-                localStorage.setItem(persistKey, resolved);
+                writeStoredValue(persistKey, resolved);
             }
         },
         /** 检查语言是否支持 */

package/dist/internal/browser-safety.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @h-ai/ui — 浏览器能力安全辅助
+ *
+ * 统一封装容易在受限 WebView、隐私模式或不安全上下文中失败的浏览器 API，
+ * 让组件在能力缺失时优雅降级而不是抛出运行时错误。
+ */
+/**
+ * 安全读取 localStorage。
+ *
+ * 某些浏览器隐私模式或嵌入式 WebView 会在访问 localStorage 时直接抛出 SecurityError，
+ * 这里统一吞掉异常并回退为 null。
+ */
+export declare function readStoredValue(key: string): string | null;
+/**
+ * 安全写入 localStorage。
+ *
+ * 返回值显式告诉调用方持久化是否成功，方便调用方在失败时继续使用内存态而不必中断交互。
+ */
+export declare function writeStoredValue(key: string, value: string): boolean;
+/**
+ * 安全写入剪贴板。
+ *
+ * 在不安全上下文、旧 WebView 或浏览器策略禁用时直接返回 false，
+ * 让上层决定是否展示成功反馈。
+ */
+export declare function writeTextToClipboard(text: string): Promise<boolean>;