@h-ai/ui 0.1.0-alpha.33 → 0.1.0-alpha.34

package/README.md

@@ -187,11 +187,11 @@ components/
 
 #### Bits UI headless 交互
 
-| 组件         | 描述                        | 主要属性                                            |
-| ------------ | --------------------------- | --------------------------------------------------- |
-| `Combobox`   | 可搜索下拉选择（单选/多选） | `options`, `value`, `multiple`, `placeholder`       |
-| `Calendar`   | 独立日历                    | `value: DateValue`, `minValue`, `maxValue`          |
-| `DatePicker` | 日期输入+弹出               | `value: DateValue`, `minValue`, `maxValue`, `error` |
+| 组件         | 描述                        | 主要属性                                                    |
+| ------------ | --------------------------- | ----------------------------------------------------------- |
+| `Combobox`   | 可搜索下拉选择（单选/多选） | `options`, `value`, `multiple`, `placeholder`, `size`       |
+| `Calendar`   | 独立日历                    | `value: DateValue`, `minValue`, `maxValue`                  |
+| `DatePicker` | 日期输入+弹出               | `value: DateValue`, `minValue`, `maxValue`, `error`, `size` |
 
 > 日期值使用 `@internationalized/date` 的 `DateValue` / `CalendarDate` 类型。
 

package/dist/components/compounds/Combobox.svelte

@@ -8,6 +8,7 @@
   @prop {string | string[]} value - 选中值（双向绑定，单选为 string，多选为 string[]）
   @prop {boolean} multiple - 是否多选模式
   @prop {string} placeholder - 输入框占位符
+  @prop {Size} size - 输入框尺寸
   @prop {boolean} disabled - 是否禁用
   @prop {string} error - 错误消息
   @prop {string} label - 表单标签
@@ -33,10 +34,11 @@
   />
 -->
 <script lang='ts'>
-  import type { DataAttributes } from '../../types.js'
+  import type { DataAttributes, Size } from '../../types.js'
   import { Combobox } from 'bits-ui'
   import { uiM } from '../../messages.js'
   import { cn, getDataAttributes } from '../../utils.js'
+  import { getFormControlSizeClasses } from '../control-size.js'
   import BareButton from '../primitives/BareButton.svelte'
 
   /** 选项定义 */
@@ -60,6 +62,8 @@
     multiple?: boolean
     /** 输入框占位符 */
     placeholder?: string
+    /** 尺寸 */
+    size?: Size
     /** 是否禁用 */
     disabled?: boolean
     /** 错误消息 */
@@ -77,6 +81,7 @@
     value = $bindable(),
     multiple = false,
     placeholder = '',
+    size = 'md',
     disabled = false,
     error,
     label: fieldLabel,
@@ -86,6 +91,7 @@
   }: Props & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const sizeClasses = $derived(getFormControlSizeClasses(size))
   // 为未提供 value 时设置初始默认值（仅在初始化时执行一次）
   // 统一以空字符串初始化，避免在初始化阶段捕获 multiple 的初始值。
   // 多选模式会通过 multiVal 派生为 [] 传给 Combobox.Root。
@@ -214,7 +220,8 @@
       <div class='relative'>
         <div
           class={cn(
-            'min-h-10 rounded-lg border bg-base-100 flex flex-wrap gap-1.5 items-center py-1.5 pl-2.5 pr-9 transition-[border-color,box-shadow] duration-150',
+            'rounded-lg border bg-base-100 flex flex-wrap gap-1.5 items-center py-1 pl-2.5 pr-9 transition-[border-color,box-shadow] duration-150',
+            sizeClasses.minHeight,
             disabled ? 'opacity-50 cursor-not-allowed bg-base-200' : 'cursor-text',
             controlStateClass,
           )}
@@ -237,7 +244,7 @@
 
           <Combobox.Input
             bind:ref={inputRef}
-            class='flex-1 min-w-20 bg-transparent py-0.5 text-sm outline-none placeholder:text-base-content/40'
+            class={cn('flex-1 min-w-20 bg-transparent py-0.5 outline-none placeholder:text-base-content/40', sizeClasses.spacing)}
             placeholder={selectedOptions.length === 0 ? placeholder : ''}
             {disabled}
             oninput={handleInput}
@@ -307,7 +314,8 @@
         <Combobox.Input
           bind:ref={inputRef}
           class={cn(
-            'h-10 w-full rounded-lg border bg-base-100 pl-3 pr-9 text-sm outline-none transition-[border-color,box-shadow] duration-150 placeholder:text-base-content/40',
+            'w-full rounded-lg border bg-base-100 pr-9 outline-none transition-[border-color,box-shadow] duration-150 placeholder:text-base-content/40',
+            sizeClasses.control,
             controlStateClass,
             disabled && 'opacity-50 cursor-not-allowed',
           )}

package/dist/components/compounds/Combobox.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DataAttributes } from '../../types.js';
+import type { DataAttributes, Size } from '../../types.js';
 import { Combobox } from 'bits-ui';
 /** 选项定义 */
 interface Option {
@@ -20,6 +20,8 @@ interface Props {
     multiple?: boolean;
     /** 输入框占位符 */
     placeholder?: string;
+    /** 尺寸 */
+    size?: Size;
     /** 是否禁用 */
     disabled?: boolean;
     /** 错误消息 */
@@ -42,6 +44,7 @@ type $$ComponentProps = Props & DataAttributes;
  * @prop {string | string[]} value - 选中值（双向绑定，单选为 string，多选为 string[]）
  * @prop {boolean} multiple - 是否多选模式
  * @prop {string} placeholder - 输入框占位符
+ * @prop {Size} size - 输入框尺寸
  * @prop {boolean} disabled - 是否禁用
  * @prop {string} error - 错误消息
  * @prop {string} label - 表单标签

package/dist/components/compounds/DatePicker.svelte

@@ -7,6 +7,7 @@
   @prop {DateValue} minValue - 最小可选日期
   @prop {DateValue} maxValue - 最大可选日期
   @prop {string} placeholder - 输入框占位文本
+  @prop {Size} size - 输入框尺寸
   @prop {boolean} disabled - 是否禁用
   @prop {string} error - 错误消息
   @prop {function} onchange - 日期变更回调
@@ -22,9 +23,10 @@
 -->
 <script lang='ts'>
   import type { DateValue } from '@internationalized/date'
-  import type { DataAttributes } from '../../types.js'
+  import type { DataAttributes, Size } from '../../types.js'
   import { DatePicker as BitsDatePicker } from 'bits-ui'
-  import { getDataAttributes } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
+  import { getFormControlSizeClasses } from '../control-size.js'
 
   interface Props {
     /** 选中日期（双向绑定） */
@@ -39,6 +41,8 @@
     isDateUnavailable?: (date: DateValue) => boolean
     /** 是否禁用 */
     disabled?: boolean
+    /** 尺寸 */
+    size?: Size
     /** 错误消息 */
     error?: string
     /** 自定义类名 */
@@ -54,6 +58,7 @@
     weekStartsOn = 1,
     isDateUnavailable,
     disabled = false,
+    size = 'md',
     error,
     class: className = '',
     onchange,
@@ -61,6 +66,7 @@
   }: Props & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const sizeClasses = $derived(getFormControlSizeClasses(size))
 </script>
 
 <div {...dataAttributes} class='fieldset w-full {className}'>
@@ -73,12 +79,21 @@
     {disabled}
     onValueChange={v => onchange?.(v)}
   >
-    <BitsDatePicker.Input class="input flex items-center gap-0.5 pr-2 {error ? 'input-error' : ''}">
+    <BitsDatePicker.Input
+      class={cn(
+        'flex w-full items-center gap-0.5 rounded-lg border bg-base-100 pr-2 transition-[border-color,box-shadow] duration-150',
+        sizeClasses.control,
+        error
+          ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
+          : 'border-base-content/15 hover:border-base-content/25 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
+        disabled && 'cursor-not-allowed opacity-50',
+      )}
+    >
       {#snippet children({ segments })}
         {#each segments as { part, value: segValue }, index (`${part}-${index}`)}
           <BitsDatePicker.Segment
             {part}
-            class='rounded px-0.5 py-0.5 text-sm tabular-nums focus:bg-primary focus:text-primary-content focus:outline-none data-[type=literal]:px-0 data-[type=literal]:text-base-content/50'
+            class='rounded px-0.5 py-0.5 tabular-nums focus:bg-primary focus:text-primary-content focus:outline-none data-[type=literal]:px-0 data-[type=literal]:text-base-content/50'
           >
             {segValue}
           </BitsDatePicker.Segment>

package/dist/components/compounds/DatePicker.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { DateValue } from '@internationalized/date';
-import type { DataAttributes } from '../../types.js';
+import type { DataAttributes, Size } from '../../types.js';
 interface Props {
     /** 选中日期（双向绑定） */
     value?: DateValue;
@@ -13,6 +13,8 @@ interface Props {
     isDateUnavailable?: (date: DateValue) => boolean;
     /** 是否禁用 */
     disabled?: boolean;
+    /** 尺寸 */
+    size?: Size;
     /** 错误消息 */
     error?: string;
     /** 自定义类名 */
@@ -30,6 +32,7 @@ type $$ComponentProps = Props & DataAttributes;
  * @prop {DateValue} minValue - 最小可选日期
  * @prop {DateValue} maxValue - 最大可选日期
  * @prop {string} placeholder - 输入框占位文本
+ * @prop {Size} size - 输入框尺寸
  * @prop {boolean} disabled - 是否禁用
  * @prop {string} error - 错误消息
  * @prop {function} onchange - 日期变更回调

package/dist/components/compounds/TagInput.svelte

@@ -10,7 +10,8 @@
 <script lang='ts'>
   import type { DataAttributes, TagInputProps } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn, getDataAttributes, getInputSizeClass } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
+  import { getFormControlSizeClasses } from '../control-size.js'
   import BareInput from '../primitives/BareInput.svelte'
   import Tag from '../primitives/Tag.svelte'
 
@@ -27,6 +28,7 @@
   }: TagInputProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const sizeClasses = $derived(getFormControlSizeClasses(size))
   let inputValue = $state('')
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
 
@@ -34,9 +36,10 @@
 
   const containerClass = $derived(
     cn(
-      'input flex flex-wrap items-center gap-1 min-h-[2.5rem] h-auto py-1',
-      getInputSizeClass(size),
-      disabled && 'input-disabled',
+      'flex h-auto w-full flex-wrap items-center gap-1 rounded-lg border border-base-content/15 bg-base-100 py-1 transition-[border-color,box-shadow] duration-150 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
+      sizeClasses.minHeight,
+      sizeClasses.spacing,
+      disabled && 'cursor-not-allowed opacity-50',
       className,
     ),
   )
@@ -79,32 +82,34 @@
   }
 </script>
 
-<div {...dataAttributes}
-     class={containerClass}
-     onclick={() => inputElement?.focus()}
-     onkeydown={e => e.key === 'Enter' && inputElement?.focus()}
-     role='textbox'
-     tabindex='-1'
->
-  {#each tags as tag, index (index)}
-    <Tag
-      text={tag}
-      size='sm'
-      closable={!disabled}
-      onclose={() => removeTag(index)}
-    />
-  {/each}
+<div {...dataAttributes} class='fieldset w-full'>
+  <div
+    class={containerClass}
+    onclick={() => inputElement?.focus()}
+    onkeydown={e => e.key === 'Enter' && inputElement?.focus()}
+    role='textbox'
+    tabindex='-1'
+  >
+    {#each tags as tag, index (index)}
+      <Tag
+        text={tag}
+        size='sm'
+        closable={!disabled}
+        onclose={() => removeTag(index)}
+      />
+    {/each}
 
-  {#if canAddMore && !disabled}
-    <BareInput
-      type='text'
-      class='flex-1 min-w-[100px] bg-transparent border-none outline-none text-sm'
-      bind:value={inputValue}
-      bind:inputRef={inputElement}
-      placeholder={displayPlaceholder}
-      {disabled}
-      onkeydown={handleKeydown}
-      onblur={handleBlur}
-    />
-  {/if}
+    {#if canAddMore && !disabled}
+      <BareInput
+        type='text'
+        class='flex-1 min-w-[100px] bg-transparent border-none outline-none'
+        bind:value={inputValue}
+        bind:inputRef={inputElement}
+        placeholder={displayPlaceholder}
+        {disabled}
+        onkeydown={handleKeydown}
+        onblur={handleBlur}
+      />
+    {/if}
+  </div>
 </div>

package/dist/components/control-size.d.ts

@@ -0,0 +1,18 @@
+import type { Size } from '../types.js';
+interface FormControlSizeClasses {
+    /** 固定高度，适用于单行控件 */
+    height: string;
+    /** 最小高度，适用于内容可换行的控件 */
+    minHeight: string;
+    /** 水平内边距与字号 */
+    spacing: string;
+    /** 固定高度、水平内边距与字号的完整组合 */
+    control: string;
+}
+/**
+ * 获取输入类控件的统一尺寸类名。
+ *
+ * 仅供组件内部复用，确保 Input、Select 与复合输入控件使用同一盒模型。
+ */
+export declare function getFormControlSizeClasses(size: Size): FormControlSizeClasses;
+export {};

package/dist/components/control-size.js

@@ -0,0 +1,18 @@
+const FORM_CONTROL_SIZE_CLASSES = {
+    'xs': { height: 'h-8', minHeight: 'min-h-8', spacing: 'px-2.5 text-xs', control: 'h-8 px-2.5 text-xs' },
+    'sm': { height: 'h-9', minHeight: 'min-h-9', spacing: 'px-3 text-sm', control: 'h-9 px-3 text-sm' },
+    'md': { height: 'h-10', minHeight: 'min-h-10', spacing: 'px-3 text-sm', control: 'h-10 px-3 text-sm' },
+    'lg': { height: 'h-12', minHeight: 'min-h-12', spacing: 'px-4 text-base', control: 'h-12 px-4 text-base' },
+    'xl': { height: 'h-14', minHeight: 'min-h-14', spacing: 'px-4 text-lg', control: 'h-14 px-4 text-lg' },
+    '2xl': { height: 'h-14', minHeight: 'min-h-14', spacing: 'px-4 text-lg', control: 'h-14 px-4 text-lg' },
+    '3xl': { height: 'h-14', minHeight: 'min-h-14', spacing: 'px-4 text-lg', control: 'h-14 px-4 text-lg' },
+    '4xl': { height: 'h-14', minHeight: 'min-h-14', spacing: 'px-4 text-lg', control: 'h-14 px-4 text-lg' },
+};
+/**
+ * 获取输入类控件的统一尺寸类名。
+ *
+ * 仅供组件内部复用，确保 Input、Select 与复合输入控件使用同一盒模型。
+ */
+export function getFormControlSizeClasses(size) {
+    return FORM_CONTROL_SIZE_CLASSES[size];
+}

package/dist/components/primitives/Input.svelte

@@ -5,6 +5,7 @@
 <script lang='ts'>
   import type { DataAttributes, InputProps } from '../../types.js'
   import { cn, getDataAttributes } from '../../utils.js'
+  import { getFormControlSizeClasses } from '../control-size.js'
 
   let {
     value = $bindable(''),
@@ -39,29 +40,7 @@
   }: InputProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
-  const containerHeight = $derived(
-    size === 'xs'
-      ? 'h-8'
-      : size === 'sm'
-      ? 'h-9'
-      : size === 'lg'
-      ? 'h-12'
-      : size === 'xl'
-      ? 'h-14'
-      : 'h-10',
-  )
-
-  const inputSpacingClass = $derived(
-    size === 'xs'
-      ? 'px-2.5 text-xs'
-      : size === 'sm'
-      ? 'px-3 text-sm'
-      : size === 'lg'
-      ? 'px-4 text-base'
-      : size === 'xl'
-      ? 'px-4 text-lg'
-      : 'px-3 text-sm',
-  )
+  const sizeClasses = $derived(getFormControlSizeClasses(size))
 
   const inputTypeClass = $derived(
     type === 'number'
@@ -72,7 +51,7 @@
   const containerClass = $derived(
     cn(
       'flex items-center w-full rounded-lg border bg-base-100',
-      containerHeight,
+      sizeClasses.height,
       error
         ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
         : 'border-base-content/15 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
@@ -136,7 +115,7 @@
       autocomplete={autocomplete as HTMLInputElement['autocomplete']}
       class={cn(
         'flex-1 h-full bg-transparent border-none outline-none placeholder:text-base-content/35',
-        inputSpacingClass,
+        sizeClasses.spacing,
         inputTypeClass,
       )}
       bind:value

package/dist/components/primitives/Select.svelte

@@ -11,6 +11,7 @@
 <script lang='ts' generics="T = string">
   import type { DataAttributes, SelectProps } from '../../types.js'
   import { cn, getDataAttributes, portal } from '../../utils.js'
+  import { getFormControlSizeClasses } from '../control-size.js'
 
   let {
     value = $bindable<T>(),
@@ -39,14 +40,7 @@
   // 下拉层定位样式（portal 到 body，用 fixed 逃逸 overflow/stacking）
   let dropdownStyle = $state('')
 
-  // 尺寸映射（与 Input 保持一致）
-  const sizeClasses: Record<string, string> = {
-    xs: 'h-8 text-xs px-2.5',
-    sm: 'h-9 text-sm px-3',
-    md: 'h-10 text-sm px-3',
-    lg: 'h-12 text-base px-4',
-    xl: 'h-14 text-lg px-4',
-  }
+  const sizeClasses = $derived(getFormControlSizeClasses(size))
 
   // 选项文字尺寸
   const optionTextClass = $derived(
@@ -81,7 +75,7 @@
   const wrapperClass = $derived(
     cn(
       'relative flex w-full min-w-0 items-center rounded-lg border bg-base-100 cursor-pointer',
-      sizeClasses[size] || sizeClasses.md,
+      sizeClasses.control,
       error
         ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
         : isDropdownOpen

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

@@ -26,6 +26,7 @@
     MarkdownTextAlignKind,
   } from './document-types.js'
   import { tick } from 'svelte'
+  import { SvelteMap } from 'svelte/reactivity'
   import { writeTextToClipboard } from '../../../internal/browser-safety.js'
   import { uiM } from '../../../messages.js'
   import { cn, getDataAttributes } from '../../../utils.js'
@@ -37,7 +38,12 @@
   import { resolveDocumentMarkdownContent } from './document-download.js'
   import { renderMarkdownDocument } from './document-parse.js'
   import { parseMarkdown } from './markdown-parse.js'
-  import { renderMermaidDiagram } from './mermaid-render.js'
+  import {
+    createMermaidSourceSignature,
+    getMermaidHostRenderAction,
+    isCurrentMermaidRenderToken,
+  } from './mermaid-host-sync.js'
+  import { renderMermaidDiagram, stripMermaidSvgStyleElements } from './mermaid-render.js'
 
   interface SelectionToolbarPosition {
     /** 选区工具条相对滚动容器的 top 坐标。 */
@@ -59,6 +65,17 @@
     error?: string
   }
 
+  interface MermaidRenderCacheEntry {
+    /** 当前 Mermaid 源码签名。 */
+    signature: string
+    /** 当前 Mermaid 渲染状态。 */
+    status: 'rendering' | 'ready' | 'error'
+    /** 渲染成功后的 SVG 内容。 */
+    html?: string
+    /** 渲染失败时展示的错误摘要。 */
+    error?: string
+  }
+
   interface SelectionFormatState {
     /** 当前选区所在段落样式，用于标题/正文下拉默认值。 */
     blockFormat: MarkdownBlockStyleKind
@@ -226,6 +243,7 @@
   // 复制前后的图标以内联 SVG 缓存，避免每次点击都重新拼接按钮内容。
   const COPY_ICON = `<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>`
   const CHECK_ICON = `<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>`
+  const MERMAID_SYNC_IDLE_DELAY_MS = 220
 
   let {
     // 暴露给外层的滚动容器引用，用于同步滚动或定位选区工具条。
@@ -367,6 +385,12 @@
   let copyFeedbackTimer: number | undefined = $state()
   // 每个代码块的运行状态和预览结果，key 为 codeBlockId。
   let codePreviews = $state<Record<string, CodePreviewState>>({})
+  // Mermaid host 会随 {@html} 重建，渲染缓存必须独立于 DOM 节点保存。
+  const mermaidRenderCache = new SvelteMap<string, MermaidRenderCacheEntry>()
+  // 流式输出会高频重建 {@html}，Mermaid 同步必须合并到内容静默后执行。
+  let mermaidSyncTimer: number | undefined
+  let mermaidSyncFrame: number | undefined
+  let scheduledMermaidRenderSignature = ''
   // selectionFormatState 跟随真实 DOM 选区，负责驱动按钮按下态与下拉默认值。
   let selectionFormatState = $state<SelectionFormatState>({
     ...DEFAULT_SELECTION_FORMAT_STATE,
@@ -419,8 +443,13 @@
       allowHtmlTags,
     }),
   )
-  // html 是最终注入正文的内容。
-  const html = $derived(renderResult.html)
+  // Mermaid 占位 HTML 在流式阶段可能不变，必须额外订阅源码签名变化。
+  const mermaidRenderSignature = $derived(
+    renderResult.blocks
+      .filter(block => block.kind === 'mermaid')
+      .map(block => block.signature)
+      .join('\n'),
+  )
   // outline 是左侧目录的原始数据源。
   const outline = $derived(renderResult.outline)
   // outlineHasContent 用来区分“目录被收起”和“正文确实没有标题”。
@@ -492,14 +521,26 @@
   }
 
   $effect(() => {
-    void html
+    void renderResult.blocks
+    void mermaidRenderSignature
     if (typeof window === 'undefined' || !previewHost) {
+      cancelMermaidHostsSync()
       return
     }
 
+    if (!mermaidRenderSignature) {
+      scheduledMermaidRenderSignature = ''
+      cancelMermaidHostsSync()
+    }
+    else if (
+      mermaidRenderSignature !== scheduledMermaidRenderSignature
+    ) {
+      scheduledMermaidRenderSignature = mermaidRenderSignature
+      scheduleMermaidHostsSync()
+    }
+
     requestAnimationFrame(() => {
       syncCodePreviewHosts()
-      syncMermaidHosts()
       syncActiveHeadingFromScroll()
       syncPinnedTitleVisibility()
     })
@@ -939,10 +980,16 @@
       : ''
 
     if (result.kind === 'mermaid') {
-      host.innerHTML = `<div class="hai-md-preview-card hai-md-preview-mermaid"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<div class="hai-md-mermaid hai-md-mermaid-preview"></div></div>`
+      host.innerHTML = `<div class="hai-md-preview-card hai-md-preview-mermaid"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<div class="hai-md-mermaid hai-md-mermaid-preview" contenteditable="false"></div></div>`
       const mermaidEl = host.querySelector<HTMLElement>('.hai-md-mermaid-preview')
       if (mermaidEl) {
-        void renderMermaidHost(mermaidEl, result.content)
+        const signature = createMermaidSourceSignature('preview', result.content)
+        void renderMermaidHost(
+          mermaidEl,
+          result.content,
+          signature,
+          `preview:${signature}`,
+        )
       }
       return
     }
@@ -974,6 +1021,43 @@
    * mermaid 图表位于 `{@html}` 注入的 DOM 内部，渲染是异步的。
    * 阅读态的图表块和 code 模式预览槽都复用这里把源码渲染为 SVG。
    */
+  function scheduleMermaidHostsSync(): void {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    if (mermaidSyncTimer !== undefined) {
+      window.clearTimeout(mermaidSyncTimer)
+    }
+    if (mermaidSyncFrame !== undefined) {
+      window.cancelAnimationFrame(mermaidSyncFrame)
+      mermaidSyncFrame = undefined
+    }
+
+    mermaidSyncTimer = window.setTimeout(() => {
+      mermaidSyncTimer = undefined
+      mermaidSyncFrame = window.requestAnimationFrame(() => {
+        mermaidSyncFrame = undefined
+        syncMermaidHosts()
+      })
+    }, MERMAID_SYNC_IDLE_DELAY_MS)
+  }
+
+  function cancelMermaidHostsSync(): void {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    if (mermaidSyncTimer !== undefined) {
+      window.clearTimeout(mermaidSyncTimer)
+      mermaidSyncTimer = undefined
+    }
+    if (mermaidSyncFrame !== undefined) {
+      window.cancelAnimationFrame(mermaidSyncFrame)
+      mermaidSyncFrame = undefined
+    }
+  }
+
   function syncMermaidHosts(): void {
     if (!previewHost) {
       return
@@ -981,13 +1065,6 @@
 
     const hosts = previewHost.querySelectorAll<HTMLElement>('[data-mermaid-host]')
     for (const host of hosts) {
-      if (
-        host.dataset.mermaidStatus === 'ready'
-        || host.dataset.mermaidStatus === 'rendering'
-      ) {
-        continue
-      }
-
       const blockId = host.dataset.mermaidHost
       if (!blockId) {
         continue
@@ -998,7 +1075,19 @@
         continue
       }
 
-      void renderMermaidHost(host, block.code)
+      const nextSignature = createMermaidSourceSignature(block.id, block.code)
+      const cached = mermaidRenderCache.get(blockId)
+      const action = getMermaidHostRenderAction({
+        status: cached?.status ?? host.dataset.mermaidStatus,
+        renderedSignature: cached?.signature ?? host.dataset.mermaidSourceSignature,
+        nextSignature,
+      })
+      if (!action.shouldRender) {
+        applyCachedMermaidRender(host, cached)
+        continue
+      }
+
+      void renderMermaidHost(host, block.code, action.token, blockId)
     }
   }
 
@@ -1006,16 +1095,98 @@
    * 把单个 mermaid 源码渲染进目标节点；语法错误时展示本地化错误提示。
    * `mermaidStatus` 既避免同一帧重复渲染，也兜住多次 effect 触发。
    */
-  async function renderMermaidHost(host: HTMLElement, code: string): Promise<void> {
+  async function renderMermaidHost(
+    host: HTMLElement,
+    code: string,
+    renderToken: string,
+    cacheKey: string,
+  ): Promise<void> {
+    const cached = mermaidRenderCache.get(cacheKey)
+    if (
+      cached
+      && (cached.status === 'ready' || cached.status === 'rendering' || cached.status === 'error')
+      && cached.signature === renderToken
+    ) {
+      applyCachedMermaidRender(host, cached)
+      return
+    }
+
     host.dataset.mermaidStatus = 'rendering'
+    host.dataset.mermaidSourceSignature = renderToken
+    mermaidRenderCache.set(cacheKey, {
+      signature: renderToken,
+      status: 'rendering',
+    })
     try {
       const svg = await renderMermaidDiagram(code)
-      host.innerHTML = svg
-      host.dataset.mermaidStatus = 'ready'
+      if (!isCurrentMermaidRenderToken(renderToken, mermaidRenderCache.get(cacheKey)?.signature)) {
+        return
+      }
+
+      const entry: MermaidRenderCacheEntry = {
+        signature: renderToken,
+        status: 'ready',
+        html: stripMermaidSvgStyleElements(svg),
+      }
+      mermaidRenderCache.set(cacheKey, entry)
+      applyCachedMermaidRender(host, entry)
+      applyCachedMermaidRenderToCurrentHosts(cacheKey, entry)
     }
     catch (error) {
-      host.dataset.mermaidStatus = 'error'
-      host.innerHTML = `<div class="hai-md-mermaid-error">${escapePreviewText(error instanceof Error ? error.message : uiM('markdown_mermaid_failed'))}</div>`
+      if (!isCurrentMermaidRenderToken(renderToken, mermaidRenderCache.get(cacheKey)?.signature)) {
+        return
+      }
+
+      const message = error instanceof Error ? error.message : uiM('markdown_mermaid_failed')
+      const entry: MermaidRenderCacheEntry = {
+        signature: renderToken,
+        status: 'error',
+        error: message,
+      }
+      mermaidRenderCache.set(cacheKey, entry)
+      applyCachedMermaidRender(host, entry)
+      applyCachedMermaidRenderToCurrentHosts(cacheKey, entry)
+    }
+  }
+
+  function applyCachedMermaidRender(
+    host: HTMLElement,
+    entry: MermaidRenderCacheEntry | undefined,
+  ): void {
+    if (!entry) {
+      return
+    }
+
+    host.dataset.mermaidStatus = entry.status
+    host.dataset.mermaidSourceSignature = entry.signature
+    if (host.dataset.mermaidAppliedSignature === entry.signature) {
+      return
+    }
+
+    if (entry.status === 'ready' && entry.html !== undefined) {
+      host.innerHTML = entry.html
+      host.dataset.mermaidAppliedSignature = entry.signature
+      return
+    }
+
+    if (entry.status === 'error') {
+      host.innerHTML = `<div class="hai-md-mermaid-error">${escapePreviewText(entry.error ?? uiM('markdown_mermaid_failed'))}</div>`
+      host.dataset.mermaidAppliedSignature = entry.signature
+    }
+  }
+
+  function applyCachedMermaidRenderToCurrentHosts(
+    cacheKey: string,
+    entry: MermaidRenderCacheEntry,
+  ): void {
+    if (!previewHost) {
+      return
+    }
+
+    for (const host of previewHost.querySelectorAll<HTMLElement>('[data-mermaid-host]')) {
+      if (host.dataset.mermaidHost === cacheKey) {
+        applyCachedMermaidRender(host, entry)
+      }
     }
   }
 
@@ -3172,8 +3343,18 @@
             oninput={handlePreviewInput}
             onblur={handlePreviewBlur}
           >
-            <!-- eslint-disable-next-line svelte/no-at-html-tags -- Markdown HTML 渲染 -->
-            {@html html}
+            {#each renderResult.blocks as block (block.id)}
+              {#if block.kind === 'html'}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -- Markdown HTML 块渲染 -->
+                {@html block.html}
+              {:else}
+                <div
+                  class='hai-md-mermaid'
+                  contenteditable='false'
+                  data-mermaid-host={block.codeBlockId}
+                ></div>
+              {/if}
+            {/each}
           </article>
         </div>
       </section>

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

@@ -13,6 +13,22 @@ const BROWSER_PDF_PAGE_BREAK_SAMPLE_STEP_PX = 4;
 const BROWSER_PDF_PAGE_BREAK_WHITE_THRESHOLD = 246;
 const BROWSER_PDF_PAGE_BREAK_ALPHA_THRESHOLD = 12;
 const BROWSER_PDF_PAGE_BREAK_EMPTY_ROW_MAX_INK = 1;
+function escapeExportHtml(value) {
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function renderDocumentBlocksForExport(blocks) {
+    return blocks.map((block) => {
+        if (block.kind === 'html') {
+            return block.html;
+        }
+        return `<pre><code class="language-${escapeExportHtml(block.language)}">${escapeExportHtml(block.code)}</code></pre>`;
+    }).join('\n');
+}
 /**
  * code 类型产物通常只有裸代码正文。
  * 下载和预览都通过同一份规范化逻辑包装成 fenced markdown，避免两边导出的结构不一致。
@@ -75,14 +91,15 @@ export async function downloadAiDocument(request) {
         showRunButton: false,
         breaks: true,
     });
-    const exportHtml = buildDocumentExportHtml(exportTitle, rendered.html);
+    const renderedHtml = renderDocumentBlocksForExport(rendered.blocks);
+    const exportHtml = buildDocumentExportHtml(exportTitle, renderedHtml);
     if (builtIn.id === 'word') {
         downloadBlob(new Blob([`\uFEFF${exportHtml}`], {
             type: 'application/msword;charset=utf-8',
         }), `${baseName}.doc`);
         return;
     }
-    await downloadDocumentAsPdf(htmlToPdfFilename(exportTitle), rendered.html);
+    await downloadDocumentAsPdf(htmlToPdfFilename(exportTitle), renderedHtml);
 }
 function createBuiltInDownloadAction(format) {
     switch (format) {

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

@@ -25,12 +25,35 @@ export interface MarkdownDocumentParseOptions {
     allowHtmlTags?: boolean;
 }
 export interface MarkdownRenderResult {
-    /** Rendered HTML output. */
-    html: string;
     /** Extracted outline items for navigation. */
     outline: MarkdownOutlineItem[];
     /** Extracted code blocks for run/copy features. */
     codeBlocks: MarkdownCodeBlockItem[];
+    /** 阅读态使用的稳定块列表，避免流式更新销毁重型块 DOM。 */
+    blocks: MarkdownDocumentBlock[];
+}
+export type MarkdownDocumentBlock = MarkdownDocumentHtmlBlock | MarkdownDocumentMermaidBlock;
+export interface MarkdownDocumentHtmlBlock {
+    /** 普通 Markdown HTML 块。 */
+    kind: 'html';
+    /** 稳定块 id，用于 Svelte keyed each。 */
+    id: string;
+    /** 已按现有安全策略渲染后的 HTML。 */
+    html: string;
+}
+export interface MarkdownDocumentMermaidBlock {
+    /** 已闭合 Mermaid fence 块。 */
+    kind: 'mermaid';
+    /** 稳定块 id，用于 Svelte keyed each。 */
+    id: string;
+    /** 对应 codeBlocks 中的代码块 id。 */
+    codeBlockId: string;
+    /** Mermaid 源码。 */
+    code: string;
+    /** 原始 fence info string。 */
+    language: string;
+    /** Mermaid 源码签名，源码变化时才需要重渲染。 */
+    signature: string;
 }
 /**
  * Render markdown into HTML and extract outline + code block metadata.

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

@@ -28,6 +28,41 @@ function readHtmlTokenSource(token) {
         ? token.text
         : '';
 }
+/**
+ * 判断 fenced code block 是否已经输出闭合 fence。
+ *
+ * marked 在流式半截内容里也会把未闭合 fence 识别成 code token；如果此时提前
+ * 调用 Mermaid，会把临时语法错误渲染成错误 SVG 并残留在界面上。
+ */
+function isClosedFencedCodeBlock(token) {
+    const firstLineEnd = token.raw.indexOf('\n');
+    const firstLine = firstLineEnd === -1
+        ? token.raw
+        : token.raw.slice(0, firstLineEnd);
+    const openingStart = firstLine.search(/\S/);
+    if (openingStart === -1 || openingStart > 3) {
+        return true;
+    }
+    const markerChar = firstLine[openingStart];
+    if (markerChar !== '`' && markerChar !== '~') {
+        return true;
+    }
+    let markerLength = 0;
+    for (let index = openingStart; firstLine[index] === markerChar; index += 1) {
+        markerLength += 1;
+    }
+    if (markerLength < 3) {
+        return true;
+    }
+    const trimmedRaw = token.raw.trimEnd();
+    const lastLineStart = trimmedRaw.lastIndexOf('\n');
+    if (lastLineStart === -1) {
+        return false;
+    }
+    const closingFence = trimmedRaw.slice(lastLineStart + 1).trim();
+    return closingFence.length >= markerLength
+        && [...closingFence].every(char => char === markerChar);
+}
 /**
  * Create a URL-safe heading slug while keeping letters and digits.
  */
@@ -98,18 +133,21 @@ function createRendererObject(options, state) {
             const headingHtml = this.parser.parseInline(token.tokens);
             return `<h${depth} id="${escapeHtml(id)}" data-heading-id="${escapeHtml(id)}">${headingHtml}</h${depth}>`;
         },
-        code({ text, lang }) {
+        code(token) {
+            const { text, lang } = token;
             // rawLanguage is the original info string from the fence.
             const rawLanguage = lang?.trim() || '';
             // mermaid 块在阅读态自动渲染为图表；只有 code 模式的代码/预览切换才保留源码视图。
-            if (isMermaidLanguage(rawLanguage) && !options.showCodePreviewToggle) {
+            if (isMermaidLanguage(rawLanguage)
+                && !options.showCodePreviewToggle
+                && isClosedFencedCodeBlock(token)) {
                 const mermaidBlockId = `hai-md-code-${state.codeBlocks.length + 1}`;
                 state.codeBlocks.push({
                     id: mermaidBlockId,
                     code: text,
                     language: rawLanguage,
                 });
-                return `<div class="hai-md-mermaid" data-mermaid-host="${escapeHtml(mermaidBlockId)}"></div>`;
+                return `<div class="hai-md-mermaid" contenteditable="false" data-mermaid-host="${escapeHtml(mermaidBlockId)}"></div>`;
             }
             // highlightLanguage is validated against supported languages.
             const highlightLanguage = rawLanguage && isLanguageSupported(rawLanguage)
@@ -236,16 +274,105 @@ function createMarkedInstance(options, state) {
         breaks: options.breaks,
     });
 }
+function createMermaidSourceSignature(blockId, code) {
+    return JSON.stringify([blockId, code]);
+}
+function createEmptyRenderResult() {
+    return {
+        outline: [],
+        codeBlocks: [],
+        blocks: [],
+    };
+}
+function createHtmlBlock(id, html) {
+    return html
+        ? {
+            kind: 'html',
+            id,
+            html,
+        }
+        : null;
+}
+function renderMarkdownDocumentHtmlChunk(content, options, state) {
+    const marked = createMarkedInstance(options, state);
+    const result = marked.parse(content);
+    return {
+        html: typeof result === 'string' ? result : '',
+        codeBlocks: state.codeBlocks,
+    };
+}
+function isClosedMermaidToken(token, options) {
+    if (token.type !== 'code'
+        || !('text' in token)
+        || typeof token.text !== 'string') {
+        return false;
+    }
+    const codeToken = token;
+    const rawLanguage = codeToken.lang?.trim() || '';
+    return isMermaidLanguage(rawLanguage)
+        && !options.showCodePreviewToggle
+        && isClosedFencedCodeBlock(codeToken);
+}
+function renderMarkdownDocumentBlocks(content, options) {
+    const marked = new Marked({
+        extensions: createEditorMarkdownExtensions(),
+        gfm: true,
+        breaks: options.breaks,
+    });
+    const tokens = marked.lexer(content);
+    const blocks = [];
+    let htmlTokens = [];
+    const state = {
+        outline: [],
+        codeBlocks: [],
+        headingIds: new Map(),
+    };
+    let nextBlockIndex = 1;
+    function flushHtmlTokens() {
+        if (htmlTokens.length === 0) {
+            return;
+        }
+        const chunk = htmlTokens.map(token => token.raw).join('');
+        const result = renderMarkdownDocumentHtmlChunk(chunk, options, state);
+        const block = createHtmlBlock(`hai-md-block-${nextBlockIndex}`, result.html);
+        if (block) {
+            blocks.push(block);
+            nextBlockIndex += 1;
+        }
+        htmlTokens = [];
+    }
+    for (const token of tokens) {
+        if (!isClosedMermaidToken(token, options)) {
+            htmlTokens.push(token);
+            continue;
+        }
+        flushHtmlTokens();
+        const codeBlockId = `hai-md-code-${state.codeBlocks.length + 1}`;
+        const rawLanguage = token.lang?.trim() || '';
+        state.codeBlocks.push({
+            id: codeBlockId,
+            code: token.text,
+            language: rawLanguage,
+        });
+        blocks.push({
+            kind: 'mermaid',
+            id: `hai-md-block-${nextBlockIndex}`,
+            codeBlockId,
+            code: token.text,
+            language: rawLanguage,
+            signature: createMermaidSourceSignature(codeBlockId, token.text),
+        });
+        nextBlockIndex += 1;
+    }
+    flushHtmlTokens();
+    return blocks;
+}
 /**
  * Render markdown into HTML and extract outline + code block metadata.
  */
 export function renderMarkdownDocument(content, options) {
     if (!content) {
-        return {
-            html: '',
-            outline: [],
-            codeBlocks: [],
-        };
+        return createEmptyRenderResult();
     }
     // mergedOptions ensures defaults are always applied.
     const mergedOptions = {
@@ -260,11 +387,10 @@ export function renderMarkdownDocument(content, options) {
     };
     // marked instance is scoped to this render call.
     const marked = createMarkedInstance(mergedOptions, state);
-    // result can be sync string or async promise; only sync string is used.
-    const result = marked.parse(content);
+    marked.parse(content);
     return {
-        html: typeof result === 'string' ? result : '',
         outline: createNumberedOutline(state.outline),
         codeBlocks: state.codeBlocks,
+        blocks: renderMarkdownDocumentBlocks(content, mergedOptions),
     };
 }

package/dist/components/scenes/ai/index.d.ts

@@ -10,7 +10,7 @@ export { default as AiDocumentEditor } from './AiDocumentEditor.svelte';
 export { downloadAiDocument, resolveDocumentDownloadActions, resolveDocumentMarkdownContent, } from './document-download.js';
 export type { AiDocumentDownloadFormat, AiDocumentDownloadRequest, AiDocumentResolvedDownloadAction, } from './document-download.js';
 export { renderMarkdownDocument } from './document-parse.js';
-export type { MarkdownDocumentParseOptions, MarkdownRenderResult, } from './document-parse.js';
+export type { MarkdownDocumentBlock, MarkdownDocumentHtmlBlock, MarkdownDocumentMermaidBlock, MarkdownDocumentParseOptions, MarkdownRenderResult, } from './document-parse.js';
 export type { AiDocumentEditorProps, MarkdownBlockFormatKind, MarkdownBlockStyleKind, MarkdownCodeBlockItem, MarkdownCodeRunRequest, MarkdownCodeRunResult, MarkdownColorFormatRequest, MarkdownInlineFormatKind, MarkdownOutlineItem, MarkdownRewriteAction, MarkdownRewriteRequest, MarkdownTextAlignKind, MarkdownToolbarDownloadAction, } from './document-types.js';
 export { parseMarkdown } from './markdown-parse.js';
 export type { MarkdownParseOptions } from './markdown-parse.js';

package/dist/components/scenes/ai/mermaid-host-sync.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Mermaid host 同步状态工具。
+ *
+ * Mermaid 图表通过 {@html} 插入占位节点后异步渲染。流式输出时，HTML 占位可能不变，
+ * 但源码正文会持续变化，因此必须用源码签名判断是否需要重渲染。
+ */
+export interface MermaidHostRenderActionInput {
+    /** 当前 host 上记录的渲染状态。 */
+    status?: string;
+    /** 当前 host 上一次渲染使用的源码签名。 */
+    renderedSignature?: string;
+    /** 本次 Markdown 解析得到的最新源码签名。 */
+    nextSignature: string;
+}
+export type MermaidHostRenderAction = {
+    shouldRender: false;
+} | {
+    shouldRender: true;
+    token: string;
+};
+/**
+ * 为 Mermaid block 生成稳定签名。
+ *
+ * 签名同时包含 block id 与源码正文，避免流式阶段占位 HTML 未变化时漏掉源码更新。
+ */
+export declare function createMermaidSourceSignature(blockId: string, code: string): string;
+/**
+ * 判断 Mermaid host 是否需要发起一次新的异步渲染。
+ */
+export declare function getMermaidHostRenderAction(input: MermaidHostRenderActionInput): MermaidHostRenderAction;
+/**
+ * 判断异步 Mermaid 渲染结果是否仍对应当前 host 源码。
+ */
+export declare function isCurrentMermaidRenderToken(renderToken: string, currentSignature: string | undefined): boolean;

package/dist/components/scenes/ai/mermaid-host-sync.js

@@ -0,0 +1,35 @@
+/**
+ * Mermaid host 同步状态工具。
+ *
+ * Mermaid 图表通过 {@html} 插入占位节点后异步渲染。流式输出时，HTML 占位可能不变，
+ * 但源码正文会持续变化，因此必须用源码签名判断是否需要重渲染。
+ */
+/**
+ * 为 Mermaid block 生成稳定签名。
+ *
+ * 签名同时包含 block id 与源码正文，避免流式阶段占位 HTML 未变化时漏掉源码更新。
+ */
+export function createMermaidSourceSignature(blockId, code) {
+    return JSON.stringify([blockId, code]);
+}
+/**
+ * 判断 Mermaid host 是否需要发起一次新的异步渲染。
+ */
+export function getMermaidHostRenderAction(input) {
+    const status = input.status?.trim();
+    const renderedSignature = input.renderedSignature?.trim();
+    if ((status === 'ready' || status === 'rendering' || status === 'error')
+        && renderedSignature === input.nextSignature) {
+        return { shouldRender: false };
+    }
+    return {
+        shouldRender: true,
+        token: input.nextSignature,
+    };
+}
+/**
+ * 判断异步 Mermaid 渲染结果是否仍对应当前 host 源码。
+ */
+export function isCurrentMermaidRenderToken(renderToken, currentSignature) {
+    return renderToken === currentSignature;
+}

package/dist/components/scenes/ai/mermaid-render.d.ts

@@ -12,3 +12,8 @@ export declare function isMermaidLanguage(language: string | undefined | null):
  * 把 mermaid 源码渲染为 SVG 字符串；语法错误时抛出由调用方兜底展示。
  */
 export declare function renderMermaidDiagram(code: string): Promise<string>;
+/**
+ * Mermaid 11.x 会在 SVG 内写入很长的 style 标签内容；在 contenteditable 预览区里，
+ * 部分浏览器会把这些 CSS 当成正文显示。这里保留 SVG 图形，剥离内联样式文本。
+ */
+export declare function stripMermaidSvgStyleElements(svg: string): string;

package/dist/components/scenes/ai/mermaid-render.js

@@ -40,3 +40,10 @@ export async function renderMermaidDiagram(code) {
     const { svg } = await mermaid.render(renderId, code);
     return svg;
 }
+/**
+ * Mermaid 11.x 会在 SVG 内写入很长的 style 标签内容；在 contenteditable 预览区里，
+ * 部分浏览器会把这些 CSS 当成正文显示。这里保留 SVG 图形，剥离内联样式文本。
+ */
+export function stripMermaidSvgStyleElements(svg) {
+    return svg.replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, '');
+}

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

@@ -7,6 +7,7 @@
   import type { DataAttributes, Size } from '../../../types.js'
   import { uiM } from '../../../messages.js'
   import { cn, getDataAttributes } from '../../../utils.js'
+  import { getFormControlSizeClasses } from '../../control-size.js'
   import BareButton from '../../primitives/BareButton.svelte'
   import BareInput from '../../primitives/BareInput.svelte'
   import Progress from '../../primitives/Progress.svelte'
@@ -76,19 +77,7 @@
 
   const dataAttributes = $derived(getDataAttributes(restProps))
   let showPassword = $state(false)
-
-  // 容器高度（与 Input 组件一致）
-  const containerHeight = $derived(
-    size === 'xs'
-      ? 'h-8'
-      : size === 'sm'
-      ? 'h-9'
-      : size === 'lg'
-      ? 'h-12'
-      : size === 'xl'
-      ? 'h-14'
-      : 'h-10',
-  )
+  const sizeClasses = $derived(getFormControlSizeClasses(size))
 
   // 图标大小
   const iconSize = $derived(
@@ -152,7 +141,7 @@
   <!-- 输入框容器 -->
   <div class={cn(
     'flex items-center w-full rounded-lg border bg-base-100',
-    containerHeight,
+    sizeClasses.height,
     error
       ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
       : 'border-base-content/15 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
@@ -163,7 +152,7 @@
     <BareInput
       type={showPassword ? 'text' : 'password'}
       {id}
-      class='flex-1 h-full px-3 bg-transparent border-none outline-none text-sm placeholder:text-base-content/35'
+      class={cn('flex-1 h-full bg-transparent border-none outline-none placeholder:text-base-content/35', sizeClasses.spacing)}
       bind:value
       bind:inputRef={inputRef}
       {placeholder}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.33",
+  "version": "0.1.0-alpha.34",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -51,7 +51,7 @@
     "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.33"
+    "@h-ai/core": "0.1.0-alpha.34"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",