@h-ai/ui 0.1.0-alpha.30 → 0.1.0-alpha.32

package/README.md

@@ -135,7 +135,7 @@ components/
 | `Input`          | 输入框       | `type`, `value`, `size`, `error`, `validationMessage`              |
 | `BareInput`      | 无样式输入框 | `type`, `class`, `accept`, `multiple`                              |
 | `Textarea`       | 文本域       | `value`, `rows`, `size`, `autoResize`, `error`                     |
-| `Select`         | 下拉选择     | `options`, `value`, `placeholder`, `size`                          |
+| `Select`         | 下拉选择     | `options`, `value`, `placeholder`, `size`, `clearable`, `filterable` |
 | `Checkbox`       | 复选框       | `checked`, `label`, `size`, `indeterminate`                        |
 | `Switch`         | 开关         | `checked`, `label`, `size`                                         |
 | `Radio`          | 单选组       | `options`, `value`, `direction`, `size`                            |
@@ -283,14 +283,31 @@ components/
 
 | 组件                     | 描述             | 主要属性 / 能力 |
 | ------------------------ | ---------------- | ---------------- |
-| `MarkdownRenderer`       | Markdown 渲染器  | `content`, `showCopyButton`, `enableHighlight` |
+| `MarkdownRenderer`       | Markdown 渲染器  | `content`, `fontSize`, `allowHtmlTags`, `showCopyButton`, `enableHighlight` |
 | `AiDocumentDownloadMenu` | 文档下载菜单     | `actions`, `ondownload` |
-| `AiDocumentEditor`       | AI 文档编辑器    | `content`, `showRunButton`, `showCodePreviewToggle`, `allowUnsafeCodePreview` |
+| `AiDocumentEditor`       | AI 文档编辑器    | `content`, `fontSize`, `allowHtmlTags`, `showRunButton`, `showCodePreviewToggle`, `allowUnsafeCodePreview` |
 | `AiTableEditor`          | AI 表格编辑器    | `columns`, `rows`, `editable`, `ondownload` |
 
 > `AiDocumentEditor` 默认只允许 Markdown 内置预览。HTML / JS / CSS 等高风险预览需要显式设置 `allowUnsafeCodePreview`，或通过 `oncoderun` 返回受控的预览结果。
 >
 > Mermaid 图表开箱即用：文档（`sourceKind='document'`）里的 ```` ```mermaid ```` 代码块在阅读态自动渲染为图表；code 模式（`sourceKind='code'` + `showCodePreviewToggle`）下可在「代码 / 预览」间切换。Mermaid 以 `securityLevel: 'strict'` 渲染为消毒后的 SVG，无需开启 `allowUnsafeCodePreview`。
+>
+> `MarkdownRenderer` 与 `AiDocumentEditor` 还支持展示层配置：
+> - `fontSize` 支持 `number`（按 px 解释）或任意 CSS 长度字符串（如 `1.125rem`）
+> - `allowHtmlTags` 默认关闭；开启后会按安全白名单解析 `<b>` / `<i>` / `<u>` / `<mark>` 等 HTML 标签，危险标签与属性仍会被消毒
+
+```svelte
+<MarkdownRenderer content={markdown} fontSize='1.125rem' allowHtmlTags />
+
+<AiDocumentEditor
+  title='方案文档'
+  content={documentMarkdown}
+  fontSize={18}
+  allowHtmlTags
+  showToolbar
+  showOutline={false}
+/>
+```
 
 #### CRUD 场景（5 个）
 
@@ -340,6 +357,24 @@ components/
 <ToastContainer />
 ```
 
+### Message 消息提示
+
+```svelte
+<script>
+  import { message, MessageContainer } from '@h-ai/ui'
+
+  function showMessage() {
+    message.success('操作成功')
+    message.error('操作失败')
+    message.warning('请注意')
+    message.info('提示信息', 5000)
+  }
+</script>
+
+<button onclick={showMessage}>消息</button>
+<MessageContainer />
+```
+
 ### 典型 CRUD 页面
 
 ```svelte

package/dist/components/compounds/Combobox.svelte

@@ -36,7 +36,7 @@
   import type { DataAttributes } from '../../types.js'
   import { Combobox } from 'bits-ui'
   import { uiM } from '../../messages.js'
-  import { getDataAttributes } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
   import BareButton from '../primitives/BareButton.svelte'
 
   /** 选项定义 */
@@ -93,8 +93,18 @@
     value = ''
   }
 
+  // ─── 统一视觉样式（与 Select 对齐：rounded-lg / 柔和边框 / focus ring） ───
+  const controlStateClass = $derived(
+    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',
+  )
+  const contentClass = 'z-[1200] mt-1.5 max-h-60 w-(--bits-combobox-anchor-width) overflow-y-auto rounded-xl border border-base-content/10 bg-base-100 p-1.5 shadow-xl shadow-base-content/10'
+  const itemClass = 'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2.5 text-sm transition-colors hover:bg-base-content/5 data-highlighted:bg-base-content/5 data-disabled:cursor-not-allowed data-disabled:opacity-40'
+
   let searchValue = $state('')
   let open = $state(false)
+  let inputRef = $state<HTMLInputElement | null>(null)
 
   /** 根据搜索关键词过滤选项 */
   const filteredOptions = $derived(
@@ -131,6 +141,19 @@
   /** 单选模式：提供给 Combobox.Root 的类型安全值 */
   const singleVal = $derived(typeof value === 'string' ? value : '')
 
+  function syncInputElementValue() {
+    if (!inputRef)
+      return
+    const nextValue = multiple ? multiInputValue : singleInputValue
+    if (inputRef.value !== nextValue) {
+      inputRef.value = nextValue
+    }
+  }
+
+  $effect(() => {
+    syncInputElementValue()
+  })
+
   function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
     searchValue = e.currentTarget.value
     if (!open)
@@ -145,11 +168,19 @@
   function handleMultiValueChange(v: string[]) {
     value = v
     onchange?.(v)
+    setTimeout(() => {
+      searchValue = ''
+      syncInputElementValue()
+    }, 0)
   }
 
   function handleSingleValueChange(v: string) {
     value = v
     onchange?.(v)
+    setTimeout(() => {
+      searchValue = ''
+      syncInputElementValue()
+    }, 0)
   }
 
   /** 多选模式下移除某个已选项 */
@@ -182,18 +213,20 @@
     >
       <div class='relative'>
         <div
-          class="min-h-10 px-2 py-1.5 pr-8 border rounded-lg bg-base-100 flex flex-wrap gap-1.5 items-center transition-colors
-            {disabled ? 'opacity-50 cursor-not-allowed bg-base-200' : 'cursor-text'}
-            {error ? 'border-error focus-within:border-error' : 'border-base-content/20 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/20'}"
+          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',
+            disabled ? 'opacity-50 cursor-not-allowed bg-base-200' : 'cursor-text',
+            controlStateClass,
+          )}
         >
           {#each selectedOptions as opt (opt.value)}
-            <span class='inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary text-sm rounded-md'>
+            <span class='inline-flex items-center gap-1 rounded-md bg-primary/10 px-2 py-0.5 text-sm text-primary'>
               <span class='truncate max-w-32'>{opt.label}</span>
               {#if !disabled}
                 <BareButton
                   type='button'
-                  class='hover:bg-primary/20 rounded p-0.5 transition-colors'
-                  onclick={e => removeItem(opt.value, e)}
+                  class='rounded p-0.5 transition-colors hover:bg-primary/20'
+                  onclick={(e: MouseEvent) => removeItem(opt.value, e)}
                   ariaLabel="{uiM('combobox_remove')} {opt.label}"
                 >
                   <span class='icon-[tabler--x] size-3'></span>
@@ -203,7 +236,8 @@
           {/each}
 
           <Combobox.Input
-            class='flex-1 min-w-20 bg-transparent outline-none text-sm py-0.5'
+            bind:ref={inputRef}
+            class='flex-1 min-w-20 bg-transparent py-0.5 text-sm outline-none placeholder:text-base-content/40'
             placeholder={selectedOptions.length === 0 ? placeholder : ''}
             {disabled}
             oninput={handleInput}
@@ -215,7 +249,7 @@
         </div>
 
         <Combobox.Trigger
-          class='absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs btn-circle'
+          class='absolute right-2.5 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center text-base-content/40 transition-colors hover:text-base-content/70'
         >
           <span class="icon-[tabler--chevron-down] size-4 transition-transform {open ? 'rotate-180' : ''}"></span>
         </Combobox.Trigger>
@@ -223,11 +257,11 @@
 
       <Combobox.Portal>
         <Combobox.Content
-          class='z-50 mt-1 max-h-60 w-[var(--bits-combobox-anchor-width)] overflow-y-auto rounded-lg border border-base-content/10 bg-base-100 p-1 shadow-lg'
+          class={contentClass}
           sideOffset={4}
         >
           {#if filteredOptions.length === 0}
-            <div class='px-3 py-2 text-sm text-base-content/50'>
+            <div class='px-3 py-2.5 text-sm text-base-content/50'>
               {uiM('combobox_no_match')}
             </div>
           {:else}
@@ -236,10 +270,10 @@
                 value={opt.value}
                 label={opt.label}
                 disabled={opt.disabled}
-                class='flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-base-200 data-[highlighted]:bg-base-200 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+                class={itemClass}
               >
                 {#snippet children({ selected })}
-                  <span class="size-4 shrink-0 rounded border border-base-content/30 flex items-center justify-center {selected ? 'bg-primary border-primary' : ''}">
+                  <span class="flex size-4 shrink-0 items-center justify-center rounded border border-base-content/30 {selected ? 'border-primary bg-primary' : ''}">
                     {#if selected}
                       <span class='icon-[tabler--check] size-3 text-primary-content'></span>
                     {/if}
@@ -247,7 +281,7 @@
                   <div class='flex-1 min-w-0'>
                     <span>{opt.label}</span>
                     {#if opt.description}
-                      <div class='text-xs text-base-content/50 truncate'>{opt.description}</div>
+                      <div class='truncate text-xs text-base-content/50'>{opt.description}</div>
                     {/if}
                   </div>
                 {/snippet}
@@ -271,7 +305,12 @@
     >
       <div class='relative'>
         <Combobox.Input
-          class="input w-full pr-8 {error ? 'input-error' : ''}"
+          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',
+            controlStateClass,
+            disabled && 'opacity-50 cursor-not-allowed',
+          )}
           {placeholder}
           {disabled}
           oninput={handleInput}
@@ -281,7 +320,7 @@
           }}
         />
         <Combobox.Trigger
-          class='absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs btn-circle'
+          class='absolute right-2.5 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center text-base-content/40 transition-colors hover:text-base-content/70'
         >
           <span class="icon-[tabler--chevron-down] size-4 transition-transform {open ? 'rotate-180' : ''}"></span>
         </Combobox.Trigger>
@@ -289,11 +328,11 @@
 
       <Combobox.Portal>
         <Combobox.Content
-          class='z-50 mt-1 max-h-60 w-[var(--bits-combobox-anchor-width)] overflow-y-auto rounded-lg border border-base-content/10 bg-base-100 p-1 shadow-lg'
+          class={contentClass}
           sideOffset={4}
         >
           {#if filteredOptions.length === 0}
-            <div class='px-3 py-2 text-sm text-base-content/50'>
+            <div class='px-3 py-2.5 text-sm text-base-content/50'>
               {uiM('combobox_no_match')}
             </div>
           {:else}
@@ -302,7 +341,7 @@
                 value={opt.value}
                 label={opt.label}
                 disabled={opt.disabled}
-                class='flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-base-200 data-[highlighted]:bg-base-200 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+                class={cn(itemClass, 'data-selected:bg-primary/10 data-selected:text-primary data-selected:font-medium')}
               >
                 {#snippet children({ selected })}
                   <span class='size-4 shrink-0'>
@@ -313,7 +352,7 @@
                   <div class='flex-1 min-w-0'>
                     <span>{opt.label}</span>
                     {#if opt.description}
-                      <div class='text-xs text-base-content/50 truncate'>{opt.description}</div>
+                      <div class='truncate text-xs text-base-content/50'>{opt.description}</div>
                     {/if}
                   </div>
                 {/snippet}

package/dist/components/compounds/MessageContainer.svelte

@@ -5,9 +5,7 @@
   轻量消息提示容器，渲染 message store 中的消息条目。
   视觉风格：顶部居中、带类型图标、自动滑入滑出。
 
-  叠加策略与 ToastContainer 一致：
-    - 有打开的 modal dialog 时，寄宿到 dialog 内部（top layer）；
-    - 否则寄宿到 <body> 以 popover 进入 top layer。
+  叠加策略：消息层始终挂载到 `document.body`，使用 fixed overlay + 超高 z-index（高于 Modal 的 `--hai-z-modal`），保证不被任何弹层遮挡；空消息时隐藏容器避免拦截交互。
   =============================================================================
 -->
 <script lang='ts'>
@@ -36,84 +34,61 @@
     error: 'text-error',
   }
 
+  /** 文案颜色映射 */
+  const textColorMap: Record<string, string> = {
+    info: 'text-info',
+    success: 'text-success',
+    warning: 'text-warning',
+    error: 'text-error',
+  }
+
   /** 背景/边框映射 */
   const bgMap: Record<string, string> = {
-    info: 'border-info/20 bg-info/5',
-    success: 'border-success/20 bg-success/5',
-    warning: 'border-warning/20 bg-warning/5',
-    error: 'border-error/20 bg-error/5',
+    info: 'border-info/30 bg-info/15',
+    success: 'border-success/30 bg-success/15',
+    warning: 'border-warning/30 bg-warning/15',
+    error: 'border-error/30 bg-error/15',
   }
 
   let layerElement: HTMLDivElement | undefined = $state()
-
   const hasItems = $derived(message.items.length > 0)
 
-  /** 找到最顶层处于打开状态的原生 modal dialog。 */
-  function findTopModalDialog(): HTMLDialogElement | null {
-    if (typeof document === 'undefined')
-      return null
-    const dialogs = document.querySelectorAll<HTMLDialogElement>('dialog')
-    let top: HTMLDialogElement | null = null
-    for (const dialog of dialogs) {
-      if (dialog.open && typeof dialog.matches === 'function' && dialog.matches(':modal')) {
-        top = dialog
-      }
-    }
-    return top
-  }
-
   function safeShowPopover(el: HTMLElement) {
     try {
-      if (typeof el.showPopover === 'function' && el.isConnected && !el.matches(':popover-open')) {
+      if (typeof el.showPopover === 'function' && el.isConnected && !el.matches(':popover-open'))
         el.showPopover()
-      }
     }
-    catch { /* 忽略异常 */ }
+    catch {
+    // 元素未连接或重复调用时忽略。
+    }
   }
 
   function safeHidePopover(el: HTMLElement) {
     try {
-      if (typeof el.hidePopover === 'function' && el.matches(':popover-open')) {
+      if (typeof el.hidePopover === 'function' && el.matches(':popover-open'))
         el.hidePopover()
-      }
     }
-    catch { /* 忽略异常 */ }
+    catch {
+    // 同上，忽略异常。
+    }
   }
 
-  function relocate() {
+  $effect(() => {
     const el = layerElement
     if (!el)
       return
-
-    const modal = hasItems ? findTopModalDialog() : null
-
-    if (modal) {
-      safeHidePopover(el)
-      if (el.hasAttribute('popover'))
-        el.removeAttribute('popover')
-      if (el.parentElement !== modal)
-        modal.appendChild(el)
-      return
-    }
-
-    if (el.parentElement !== document.body)
-      document.body.appendChild(el)
-    if (!el.hasAttribute('popover'))
-      el.setAttribute('popover', 'manual')
-    if (hasItems) {
+    if (hasItems)
       safeShowPopover(el)
-    }
-    else {
+    else
       safeHidePopover(el)
-    }
-  }
+  })
 
   onMount(() => {
-    relocate()
-    const observer = new MutationObserver(() => relocate())
-    observer.observe(document.body, { subtree: true, attributes: true, attributeFilter: ['open'] })
+    const el = layerElement
+    if (el && document.body && el.parentElement !== document.body)
+      document.body.appendChild(el)
+
     return () => {
-      observer.disconnect()
       const el = layerElement
       if (el) {
         safeHidePopover(el)
@@ -121,11 +96,6 @@
       }
     }
   })
-
-  $effect(() => {
-    void hasItems
-    relocate()
-  })
 </script>
 
 <div {...dataAttributes} bind:this={layerElement} popover='manual' class='hai-message-layer'>
@@ -135,6 +105,7 @@
         class={cn(
           'hai-message-item alert shadow-lg border',
           bgMap[item.type] ?? bgMap.info,
+          textColorMap[item.type] ?? textColorMap.info,
         )}
         role='alert'
       >
@@ -161,22 +132,24 @@
     inset: 0;
     width: 100%;
     height: 100%;
-    max-width: none;
-    max-height: none;
     margin: 0;
     padding: 0;
     border: 0;
     background: transparent;
     overflow: visible;
     pointer-events: none;
-    z-index: 9999;
+    z-index: 2147483647;
   }
 
   .hai-message-stack {
     position: absolute;
     top: 1rem;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: max-content;
+    max-width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;

package/dist/components/compounds/Modal.svelte

@@ -28,9 +28,8 @@
   }: ModalProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
-  // modalElement 持有原生 dialog 引用；
-  // 只有调用 `showModal()` 进入 top-layer 后，弹框才不会被父级布局和 overflow 裁剪。
-  let modalElement: HTMLDialogElement | undefined = $state()
+  // modalElement 持有 overlay 容器引用；不再依赖原生 `<dialog>`，改用 fixed + z-index 叠加。
+  let modalElement: HTMLDivElement | undefined = $state()
 
   // 标题区仅在显式提供标题或自定义 header 时出现；
   // 仅需关闭按钮的场景改为右上角悬浮按钮，避免业务侧额外占一整行头部。
@@ -111,37 +110,17 @@
     }
   }
 
-  function handleDialogCancel(event: Event) {
-    // 原生 dialog 在按下 Escape 时会先触发 cancel；
-    // 这里统一接管关闭逻辑，避免浏览器直接 close 后跳过组件自己的 onclose 回调。
-    event.preventDefault()
-    if (closeOnEscape) {
-      handleClose()
-    }
-  }
-
-  $effect(() => {
-    if (!modalElement) {
-      return
-    }
-
-    if (open) {
-      if (!modalElement.open) {
-        modalElement.showModal()
-      }
-      return
-    }
-
-    if (modalElement.open) {
-      modalElement.close()
-    }
-  })
 </script>
 
-<dialog {...dataAttributes}
-        bind:this={modalElement}
-        class='hai-modal'
-        oncancel={handleDialogCancel}
+<div {...dataAttributes}
+     bind:this={modalElement}
+     class='hai-modal'
+     style:display={open ? '' : 'none'}
+     aria-hidden={open ? undefined : 'true'}
+     onkeydown={(e) => {
+       if (closeOnEscape && e.key === 'Escape')
+         handleClose()
+     }}
 >
   <div
     class='hai-modal__viewport'
@@ -223,11 +202,10 @@
       {/if}
     </div>
   </div>
-</dialog>
+</div>
 
 <style>
-  dialog.hai-modal,
-  dialog.hai-modal:modal {
+  .hai-modal {
     margin: 0;
     padding: 0;
     border: 0;
@@ -237,17 +215,23 @@
     box-sizing: border-box;
   }
 
+  .hai-modal {
+    position: fixed;
+    inset: 0;
+    z-index: var(--hai-z-modal, 1100);
+    display: block;
+    pointer-events: none;
+  }
+
   .hai-modal__viewport {
     position: fixed;
     inset: 0;
     display: grid;
     place-items: center;
     padding: clamp(1rem, 2.6vw, 2rem);
-  }
-
-  dialog.hai-modal::backdrop {
+    pointer-events: auto;
     background: rgb(15 23 42 / 0.26);
-    background: color-mix(in srgb, var(--color-base-content) 22%, transparent);
+    background: color-mix(in srgb, var(--color-base-content) 15%, transparent);
     backdrop-filter: blur(2px);
   }
 
@@ -373,7 +357,7 @@
   }
 
   @media (max-width: 768px) {
-    dialog.hai-modal {
+    .hai-modal {
       padding: 0.85rem;
     }
 

package/dist/components/compounds/Pagination.svelte

@@ -41,6 +41,7 @@
   const controlSize = $derived(size === 'xs' ? 'xs' : 'sm')
   const jumperControlSize = 'xs'
   const sizeChangerClass = $derived(size === 'xs' ? 'w-17 shrink-0' : 'w-18 shrink-0')
+  const pageSizeSelectOptions = $derived(pageSizeOptions.map(opt => ({ value: String(opt), label: String(opt) })))
   const jumperWrapClass = $derived(size === 'xs' ? 'flex min-w-fit items-center gap-1.5 whitespace-nowrap' : 'flex min-w-fit items-center gap-2 whitespace-nowrap')
   const jumperInputClass = $derived(
     size === 'xs'
@@ -105,12 +106,9 @@
           <Select
             size={controlSize}
             value={String(pageSize)}
+            options={pageSizeSelectOptions}
             onchange={handlePageSizeChange}
-          >
-            {#each pageSizeOptions as opt (opt)}
-              <option value={String(opt)}>{opt}</option>
-            {/each}
-          </Select>
+          />
         </div>
       </div>
     {/if}