@h-ai/ui 0.1.0-alpha.29 → 0.1.0-alpha.31

package/dist/components/primitives/ToggleCheckbox.svelte

@@ -8,7 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { ToggleCheckboxProps } from '../../types.js'
+  import type { DataAttributes, ToggleCheckboxProps } from '../../types.js'
+  import { getDataAttributes } from '../../utils.js'
 
   let {
     checked = $bindable(false),
@@ -17,20 +18,22 @@
     disabled = false,
     class: className = '',
     onchange,
-  }: ToggleCheckboxProps = $props()
+    ...restProps
+  }: ToggleCheckboxProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
     checked = e.currentTarget.checked
     onchange?.(checked)
   }
 </script>
 
-<input
-  {id}
-  {name}
-  type='checkbox'
-  class={className}
-  {disabled}
-  checked={checked}
-  onchange={handleChange}
+<input {...dataAttributes}
+       {id}
+       {name}
+       type='checkbox'
+       class={className}
+       {disabled}
+       checked={checked}
+       onchange={handleChange}
 />

package/dist/components/primitives/ToggleCheckbox.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { ToggleCheckboxProps } from '../../types.js';
-declare const ToggleCheckbox: import("svelte").Component<ToggleCheckboxProps, {}, "checked">;
+import type { DataAttributes, ToggleCheckboxProps } from '../../types.js';
+type $$ComponentProps = ToggleCheckboxProps & DataAttributes;
+declare const ToggleCheckbox: import("svelte").Component<$$ComponentProps, {}, "checked">;
 type ToggleCheckbox = ReturnType<typeof ToggleCheckbox>;
 export default ToggleCheckbox;

package/dist/components/primitives/ToggleInput.svelte

@@ -8,7 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { ToggleCheckboxProps } from '../../types.js'
+  import type { DataAttributes, ToggleCheckboxProps } from '../../types.js'
+  import { getDataAttributes } from '../../utils.js'
 
   let {
     checked = $bindable(false),
@@ -17,20 +18,22 @@
     disabled = false,
     class: className = '',
     onchange,
-  }: ToggleCheckboxProps = $props()
+    ...restProps
+  }: ToggleCheckboxProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
     checked = e.currentTarget.checked
     onchange?.(checked)
   }
 </script>
 
-<input
-  {id}
-  {name}
-  type='checkbox'
-  class={className}
-  {disabled}
-  checked={checked}
-  onchange={handleChange}
+<input {...dataAttributes}
+       {id}
+       {name}
+       type='checkbox'
+       class={className}
+       {disabled}
+       checked={checked}
+       onchange={handleChange}
 />

package/dist/components/primitives/ToggleInput.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { ToggleCheckboxProps } from '../../types.js';
-declare const ToggleInput: import("svelte").Component<ToggleCheckboxProps, {}, "checked">;
+import type { DataAttributes, ToggleCheckboxProps } from '../../types.js';
+type $$ComponentProps = ToggleCheckboxProps & DataAttributes;
+declare const ToggleInput: import("svelte").Component<$$ComponentProps, {}, "checked">;
 type ToggleInput = ReturnType<typeof ToggleInput>;
 export default ToggleInput;

package/dist/components/primitives/ToggleRadio.svelte

@@ -8,7 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { ToggleRadioProps } from '../../types.js'
+  import type { DataAttributes, ToggleRadioProps } from '../../types.js'
+  import { getDataAttributes } from '../../utils.js'
 
   let {
     checked = $bindable(false),
@@ -17,20 +18,22 @@
     disabled = false,
     class: className = '',
     onchange,
-  }: ToggleRadioProps = $props()
+    ...restProps
+  }: ToggleRadioProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
     checked = e.currentTarget.checked
     onchange?.(checked)
   }
 </script>
 
-<input
-  {id}
-  {name}
-  type='radio'
-  class={className}
-  {disabled}
-  checked={checked}
-  onchange={handleChange}
+<input {...dataAttributes}
+       {id}
+       {name}
+       type='radio'
+       class={className}
+       {disabled}
+       checked={checked}
+       onchange={handleChange}
 />

package/dist/components/primitives/ToggleRadio.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { ToggleRadioProps } from '../../types.js';
-declare const ToggleRadio: import("svelte").Component<ToggleRadioProps, {}, "checked">;
+import type { DataAttributes, ToggleRadioProps } from '../../types.js';
+type $$ComponentProps = ToggleRadioProps & DataAttributes;
+declare const ToggleRadio: import("svelte").Component<$$ComponentProps, {}, "checked">;
 type ToggleRadio = ReturnType<typeof ToggleRadio>;
 export default ToggleRadio;

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

@@ -1,10 +1,11 @@
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type {
     MarkdownSourceKind,
     MarkdownToolbarDownloadAction,
   } from './document-types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import {
     downloadAiDocument,
     resolveDocumentDownloadActions,
@@ -62,8 +63,10 @@
     triggerClass = '',
     menuClass = '',
     itemClass = '',
-  }: AiDocumentDownloadMenuProps = $props()
+    ...restProps
+  }: AiDocumentDownloadMenuProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // menuWrapEl 只负责识别外部点击，以便菜单展开后能自然收起。
   let menuWrapEl: HTMLDivElement | undefined = $state()
   // open 由组件内部维护，左右两侧可以直接复用，不需要额外再托管弹层状态。
@@ -118,9 +121,9 @@
   }
 </script>
 
-<div
-  bind:this={menuWrapEl}
-  class={cn('hai-ai-download-menu', className)}
+<div {...dataAttributes}
+     bind:this={menuWrapEl}
+     class={cn('hai-ai-download-menu', className)}
 >
   <button
     type='button'

package/dist/components/scenes/ai/AiDocumentDownloadMenu.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 import type { MarkdownSourceKind, MarkdownToolbarDownloadAction } from './document-types.js';
 interface AiDocumentDownloadMenuProps {
     /** 触发下载时导出的原始内容。 */
@@ -33,6 +34,7 @@ interface AiDocumentDownloadMenuProps {
     /** 菜单项自定义类名。 */
     itemClass?: string;
 }
-declare const AiDocumentDownloadMenu: import("svelte").Component<AiDocumentDownloadMenuProps, {}, "">;
+type $$ComponentProps = AiDocumentDownloadMenuProps & DataAttributes;
+declare const AiDocumentDownloadMenu: import("svelte").Component<$$ComponentProps, {}, "">;
 type AiDocumentDownloadMenu = ReturnType<typeof AiDocumentDownloadMenu>;
 export default AiDocumentDownloadMenu;

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

@@ -11,6 +11,7 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type {
     AiDocumentEditorProps,
     MarkdownBlockFormatKind,
@@ -27,7 +28,7 @@
   import { tick } from 'svelte'
   import { writeTextToClipboard } from '../../../internal/browser-safety.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import AiDocumentDownloadMenu from './AiDocumentDownloadMenu.svelte'
   import {
     createBuiltInCodePreview,
@@ -239,6 +240,8 @@
     sourceKind = 'markdown',
     // sourceKind=code 时的默认语言提示。
     codeLanguage,
+    // 正文字号，number 会按 px 处理。
+    fontSize,
     // 外层自定义类名。
     class: className = '',
     // 是否显示代码块复制按钮。
@@ -249,6 +252,8 @@
     showCodePreviewToggle = false,
     // 是否显式允许内置 HTML / JS / CSS 预览执行高风险内容。
     allowUnsafeCodePreview = false,
+    // 是否按安全白名单解析原始 HTML 标签。
+    allowHtmlTags = false,
     // 代码预览切换模式下展示在语言标签旁的提示文案。
     codePreviewHint = '',
     // 是否启用语法高亮。
@@ -319,8 +324,10 @@
     oncopyselection,
     // 选区注释回调。
     onannotation,
-  }: AiDocumentEditorProps = $props()
+    ...restProps
+  }: AiDocumentEditorProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // outlineCollapsedInitialized 用来把 `initialOutlineCollapsed` 只消费一次，避免用户手动展开后又被 props 回写覆盖。
   let outlineCollapsedInitialized = $state(false)
   // 当前目录是否折叠。
@@ -409,6 +416,7 @@
       codeViewPreviewLabel: uiM('file_list_preview'),
       codePreviewHint: normalizedCodePreviewHint,
       breaks,
+      allowHtmlTags,
     }),
   )
   // html 是最终注入正文的内容。
@@ -463,6 +471,25 @@
       editable ? 'hai-markdown-editable' : '',
     ),
   )
+  const normalizedFontSize = $derived(resolveFontSize(fontSize))
+  const documentStyle = $derived(
+    normalizedFontSize
+      ? `--hai-markdown-font-size:${normalizedFontSize};`
+      : undefined,
+  )
+
+  function resolveFontSize(value: AiDocumentEditorProps['fontSize']): string | undefined {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      return `${value}px`
+    }
+
+    if (typeof value === 'string') {
+      const normalized = value.trim()
+      return normalized || undefined
+    }
+
+    return undefined
+  }
 
   $effect(() => {
     void html
@@ -933,6 +960,7 @@
         enableHighlight,
         showCopyButton: false,
         breaks,
+        allowHtmlTags,
       })
 
       host.innerHTML = `<div class="hai-md-preview-card"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<div class="hai-md-preview-rendered">${markdownHtml}</div></div>`
@@ -2340,7 +2368,7 @@
   }
 </script>
 
-<section class={cn('hai-ai-doc-pane', className)}>
+<section {...dataAttributes} class={cn('hai-ai-doc-pane', className)}>
   <div class='hai-ai-doc-shell'>
     {#if showToolbar}
       <header class='hai-ai-doc-topbar'>
@@ -3135,6 +3163,7 @@
           <article
             bind:this={previewHost}
             class={readerDocumentClass}
+            style={documentStyle}
             contenteditable={editable}
             role='document'
             onmousemove={handlePreviewMouseMove}
@@ -3990,6 +4019,7 @@
   }
 
   .hai-markdown-document {
+    font-size: var(--hai-markdown-font-size, 1rem);
     width: 100%;
     min-width: 0;
     max-width: 52.5rem;
@@ -4042,29 +4072,29 @@
   }
 
   .hai-markdown :global(h1) {
-    font-size: 2.2rem;
+    font-size: 2.2em;
     padding-bottom: 0.45em;
     border-bottom: 1px solid oklch(var(--bc) / 0.12);
   }
 
   .hai-markdown :global(h2) {
-    font-size: 1.48rem;
+    font-size: 1.48em;
   }
 
   .hai-markdown :global(h3) {
-    font-size: 1.18rem;
+    font-size: 1.18em;
   }
 
   .hai-markdown :global(h4) {
-    font-size: 1.02rem;
+    font-size: 1.02em;
   }
 
   .hai-markdown :global(h5) {
-    font-size: 0.95rem;
+    font-size: 0.95em;
   }
 
   .hai-markdown :global(h6) {
-    font-size: 0.88rem;
+    font-size: 0.88em;
     color: oklch(var(--bc) / 0.7);
   }
 
@@ -4261,7 +4291,7 @@
     font-family:
       ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
       'Liberation Mono', monospace;
-    font-size: 0.875rem;
+    font-size: 0.875em;
     line-height: 1.45;
     tab-size: 2;
 

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

@@ -1,4 +1,6 @@
+import type { DataAttributes } from '../../../types.js';
 import type { AiDocumentEditorProps } from './document-types.js';
-declare const AiDocumentEditor: import("svelte").Component<AiDocumentEditorProps, {}, "editorScrollHost" | "previewHost">;
+type $$ComponentProps = AiDocumentEditorProps & DataAttributes;
+declare const AiDocumentEditor: import("svelte").Component<$$ComponentProps, {}, "editorScrollHost" | "previewHost">;
 type AiDocumentEditor = ReturnType<typeof AiDocumentEditor>;
 export default AiDocumentEditor;

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

@@ -16,24 +16,53 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { MarkdownRendererProps } from '../types.js'
   import { writeTextToClipboard } from '../../../internal/browser-safety.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import { parseMarkdown } from './markdown-parse.js'
 
   const {
     content = '',
+    fontSize,
     class: className = '',
     showCopyButton = true,
     enableHighlight = true,
     breaks = true,
-  }: MarkdownRendererProps = $props()
-
+    allowHtmlTags = false,
+    ...restProps
+  }: MarkdownRendererProps & DataAttributes = $props()
+
+  const dataAttributes = $derived(getDataAttributes(restProps))
+  const normalizedFontSize = $derived(resolveFontSize(fontSize))
+  const markdownStyle = $derived(
+    normalizedFontSize
+      ? `--hai-markdown-font-size:${normalizedFontSize};`
+      : undefined,
+  )
   /** 解析后的 HTML */
   const html = $derived(
-    parseMarkdown(content, { enableHighlight, showCopyButton, breaks }),
+    parseMarkdown(content, {
+      enableHighlight,
+      showCopyButton,
+      breaks,
+      allowHtmlTags,
+    }),
   )
 
+  function resolveFontSize(value: MarkdownRendererProps['fontSize']): string | undefined {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      return `${value}px`
+    }
+
+    if (typeof value === 'string') {
+      const normalized = value.trim()
+      return normalized || undefined
+    }
+
+    return undefined
+  }
+
   /**
    * 事件代理：处理代码块复制按钮点击
    */
@@ -62,10 +91,10 @@
   }
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
+  {...dataAttributes}
   class={cn('hai-markdown', className)}
+  style={markdownStyle}
   onclick={handleClick}
 >
   <!-- eslint-disable-next-line svelte/no-at-html-tags -- Markdown HTML 渲染 -->
@@ -80,6 +109,7 @@
    * ========================================================================= */
 
   .hai-markdown {
+    font-size: var(--hai-markdown-font-size, 1rem);
     line-height: 1.75;
     color: inherit;
     word-wrap: break-word;
@@ -170,6 +200,18 @@
     color: oklch(var(--bc) / 0.55);
   }
 
+  .hai-markdown :global(u) {
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.14em;
+  }
+
+  .hai-markdown :global(mark) {
+    padding: 0 0.12em;
+    border-radius: 0.25rem;
+    background: oklch(var(--wa, 0.9 0.14 90) / 0.34);
+    color: inherit;
+  }
+
   /* ─── 行内代码 ─── */
 
   .hai-markdown :global(:not(pre) > code) {
@@ -244,7 +286,7 @@
 
   .hai-markdown :global(.hai-md-code-block code) {
     font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-    font-size: 0.875rem;
+    font-size: 0.875em;
     line-height: 1.6;
     tab-size: 2;
   }

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

@@ -1,4 +1,6 @@
+import type { DataAttributes } from '../../../types.js';
 import type { MarkdownRendererProps } from '../types.js';
-declare const MarkdownRenderer: import("svelte").Component<MarkdownRendererProps, {}, "">;
+type $$ComponentProps = MarkdownRendererProps & DataAttributes;
+declare const MarkdownRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
 type MarkdownRenderer = ReturnType<typeof MarkdownRenderer>;
 export default MarkdownRenderer;

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

@@ -21,6 +21,8 @@ export interface MarkdownDocumentParseOptions {
     codePreviewHint?: string;
     /** Whether soft line breaks are converted to <br>. */
     breaks?: boolean;
+    /** Whether raw HTML tags are parsed through a safe allowlist. */
+    allowHtmlTags?: boolean;
 }
 export interface MarkdownRenderResult {
     /** Rendered HTML output. */

package/dist/components/scenes/ai/document-parse.js

@@ -7,6 +7,7 @@ import { Marked } from 'marked';
 import { createEditorMarkdownExtensions, extractPlainTextFromTokens, } from './editor-markdown-extensions.js';
 import { highlightCode, isLanguageSupported } from './highlight.js';
 import { isMermaidLanguage } from './mermaid-render.js';
+import { escapeHtml, isExternalLinkHref, sanitizeImageSrc, sanitizeLinkHref, sanitizeMarkdownHtml, } from './safe-html.js';
 /** Default parsing options for document mode. */
 const DEFAULT_OPTIONS = {
     enableHighlight: true,
@@ -17,19 +18,15 @@ const DEFAULT_OPTIONS = {
     codeViewPreviewLabel: 'Preview',
     codePreviewHint: '',
     breaks: true,
+    allowHtmlTags: false,
 };
-const SAFE_LINK_HREF_REGEX = /^(?:https?:\/\/|\/|#|mailto:)/i;
-const SAFE_IMAGE_SRC_REGEX = /^(?:https?:\/\/|\/|data:image\/)/i;
-/**
- * Escape HTML entities to prevent raw HTML injection.
- */
-function escapeHtml(text) {
-    return text
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
+function readHtmlTokenSource(token) {
+    if ('raw' in token && typeof token.raw === 'string') {
+        return token.raw;
+    }
+    return 'text' in token && typeof token.text === 'string'
+        ? token.text
+        : '';
 }
 /**
  * Create a URL-safe heading slug while keeping letters and digits.
@@ -166,16 +163,18 @@ function createRendererObject(options, state) {
                 + `</div>`;
         },
         html(token) {
-            return escapeHtml('text' in token ? token.text : '');
+            const source = readHtmlTokenSource(token);
+            return options.allowHtmlTags
+                ? sanitizeMarkdownHtml(source)
+                : escapeHtml(source);
         },
         link({ href, title, tokens }) {
             // text preserves inline markdown within the link label.
             const text = this.parser.parseInline(tokens);
             // safeHref strips potentially unsafe protocols.
-            const safeHref = href && SAFE_LINK_HREF_REGEX.test(href) ? href : '';
+            const safeHref = sanitizeLinkHref(href);
             // isExternal controls whether target/_blank is added.
-            const isExternal = safeHref
-                && (safeHref.startsWith('http://') || safeHref.startsWith('https://'));
+            const isExternal = safeHref && isExternalLinkHref(safeHref);
             // attrs is the flattened HTML attribute string.
             const attrs = [
                 `href="${escapeHtml(safeHref)}"`,
@@ -186,7 +185,7 @@ function createRendererObject(options, state) {
         },
         image({ href, title, text }) {
             // safeSrc prevents dangerous image protocols.
-            const safeSrc = href && SAFE_IMAGE_SRC_REGEX.test(href) ? href : '';
+            const safeSrc = sanitizeImageSrc(href);
             // attrs is the flattened HTML attribute string.
             const attrs = [
                 `src="${escapeHtml(safeSrc)}"`,

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 /**
  * Markdown source type, used to distinguish plain markdown, document panel, or code-only rendering.
  */
@@ -126,7 +127,7 @@ export interface MarkdownToolbarDownloadAction {
 type BivariantCallback<Args extends unknown[], Return = void> = {
     bivarianceHack: (...args: Args) => Return;
 }['bivarianceHack'];
-export interface AiDocumentEditorProps {
+export interface AiDocumentEditorProps extends DataAttributes {
     /** Markdown source content. */
     content?: string;
     /** Document title displayed in the header. */
@@ -135,6 +136,8 @@ export interface AiDocumentEditorProps {
     sourceKind?: MarkdownSourceKind;
     /** Default language when sourceKind is `code`. */
     codeLanguage?: string;
+    /** Content font size. Numbers are interpreted as px. */
+    fontSize?: string | number;
     /** Custom class for the outer container. */
     class?: string;
     /** Whether to show the copy button on code blocks. */
@@ -143,6 +146,8 @@ export interface AiDocumentEditorProps {
     showRunButton?: boolean;
     /** Whether to show the code/preview toggle on code blocks. */
     showCodePreviewToggle?: boolean;
+    /** Whether to parse raw HTML tags through a safe allowlist. */
+    allowHtmlTags?: boolean;
     /**
      * 是否启用内置的高风险代码预览。
      *

package/dist/components/scenes/ai/markdown-parse.d.ts

@@ -15,6 +15,8 @@ export interface MarkdownParseOptions {
     showCopyButton?: boolean;
     /** 是否将换行符转换为 <br>（默认 true，适合 AI 输出） */
     breaks?: boolean;
+    /** 是否按安全白名单解析原始 HTML 标签（默认 false） */
+    allowHtmlTags?: boolean;
 }
 /**
  * 将 Markdown 文本解析为 HTML