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

package/dist/components/compounds/DatePicker.svelte

@@ -22,7 +22,9 @@
 -->
 <script lang='ts'>
   import type { DateValue } from '@internationalized/date'
+  import type { DataAttributes } from '../../types.js'
   import { DatePicker as BitsDatePicker } from 'bits-ui'
+  import { getDataAttributes } from '../../utils.js'
 
   interface Props {
     /** 选中日期（双向绑定） */
@@ -55,10 +57,13 @@
     error,
     class: className = '',
     onchange,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
+
+  const dataAttributes = $derived(getDataAttributes(restProps))
 </script>
 
-<div class='fieldset w-full {className}'>
+<div {...dataAttributes} class='fieldset w-full {className}'>
   <BitsDatePicker.Root
     bind:value
     {minValue}

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

@@ -1,4 +1,5 @@
 import type { DateValue } from '@internationalized/date';
+import type { DataAttributes } from '../../types.js';
 interface Props {
     /** 选中日期（双向绑定） */
     value?: DateValue;
@@ -19,6 +20,7 @@ interface Props {
     /** 日期变更回调 */
     onchange?: (value: DateValue | undefined) => void;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * DatePicker
  * 日期选择器组件，基于 Bits UI headless + DaisyUI 样式。
@@ -41,6 +43,6 @@ interface Props {
  * <DatePicker bind:value={date} />
  * ```
  */
-declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
 type DatePicker = ReturnType<typeof DatePicker>;
 export default DatePicker;

package/dist/components/compounds/Drawer.svelte

@@ -9,9 +9,9 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { DrawerProps } from '../../types.js'
+  import type { DataAttributes, DrawerProps } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn, generateId } from '../../utils.js'
+  import { cn, generateId, getDataAttributes } from '../../utils.js'
   import IconButton from '../primitives/IconButton.svelte'
   import ToggleCheckbox from '../primitives/ToggleCheckbox.svelte'
 
@@ -26,8 +26,10 @@
     class: className = '',
     onclose,
     children,
-  }: DrawerProps = $props()
+    ...restProps
+  }: DrawerProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const id = generateId('drawer')
 
   const sizeMap = {
@@ -78,7 +80,7 @@
   }
 </script>
 
-<div class={drawerClass}>
+<div {...dataAttributes} class={drawerClass}>
   <ToggleCheckbox {id} class='drawer-toggle' bind:checked={open} />
 
   <div class={sideClass}>

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

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

package/dist/components/compounds/Dropdown.svelte

@@ -3,8 +3,8 @@
   下拉菜单组件，支持 click/hover 触发。
 -->
 <script lang='ts'>
-  import type { DropdownProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, DropdownProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
   import BareButton from '../primitives/BareButton.svelte'
 
   const {
@@ -15,8 +15,10 @@
     class: className = '',
     onselect,
     children,
-  }: DropdownProps = $props()
+    ...restProps
+  }: DropdownProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let isOpen = $state(false)
 
   const positionMap = {
@@ -55,7 +57,7 @@
   }
 </script>
 
-<div class={dropdownClass}>
+<div {...dataAttributes} class={dropdownClass}>
   <BareButton
     tabindex={0}
     role='button'

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

@@ -1,8 +1,9 @@
-import type { DropdownProps } from '../../types.js';
+import type { DataAttributes, DropdownProps } from '../../types.js';
+type $$ComponentProps = DropdownProps & DataAttributes;
 /**
  * Dropdown
  * 下拉菜单组件，支持 click/hover 触发。
  */
-declare const Dropdown: import("svelte").Component<DropdownProps, {}, "">;
+declare const Dropdown: import("svelte").Component<$$ComponentProps, {}, "">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;

package/dist/components/compounds/Empty.svelte

@@ -8,9 +8,9 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { EmptyProps } from '../../types.js'
+  import type { DataAttributes, EmptyProps } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     title,
@@ -20,8 +20,10 @@
     class: className = '',
     action,
     children,
-  }: EmptyProps = $props()
+    ...restProps
+  }: EmptyProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const displayTitle = $derived(title ?? uiM('empty_title'))
 
   const containerClass = $derived(
@@ -42,7 +44,7 @@
   )
 </script>
 
-<div class={containerClass}>
+<div {...dataAttributes} class={containerClass}>
   <!-- 图标区域 -->
   <div class='text-base-content/30 mb-4 {iconSize}'>
     {#if children}

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

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

package/dist/components/compounds/Form.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { FormProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, FormProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     id = '',
@@ -20,8 +20,10 @@
     onreset,
     onerror,
     children,
-  }: FormProps = $props()
+    ...restProps
+  }: FormProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let formElement: HTMLFormElement
 
   const formClass = $derived(
@@ -85,12 +87,12 @@
   }
 </script>
 
-<form
-  bind:this={formElement}
-  id={id || undefined}
-  class={formClass}
-  onsubmit={handleSubmit}
-  onreset={handleReset}
+<form {...dataAttributes}
+      bind:this={formElement}
+      id={id || undefined}
+      class={formClass}
+      onsubmit={handleSubmit}
+      onreset={handleReset}
 >
   {#if children}
     {@render children()}

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

@@ -1,5 +1,6 @@
-import type { FormProps } from '../../types.js';
-declare const Form: import("svelte").Component<FormProps, {
+import type { DataAttributes, FormProps } from '../../types.js';
+type $$ComponentProps = FormProps & DataAttributes;
+declare const Form: import("svelte").Component<$$ComponentProps, {
     reset: () => void;
     getData: () => Record<string, unknown>;
 }, "">;

package/dist/components/compounds/FormField.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { FormFieldProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, FormFieldProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     label = '',
@@ -18,8 +18,10 @@
     required = false,
     class: className = '',
     children,
-  }: FormFieldProps = $props()
+    ...restProps
+  }: FormFieldProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const fieldClass = $derived(
     cn(
       'fieldset w-full',
@@ -28,7 +30,7 @@
   )
 </script>
 
-<div class={fieldClass}>
+<div {...dataAttributes} class={fieldClass}>
   {#if label}
     <legend class='fieldset-legend'>
       {label}

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

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

package/dist/components/compounds/InfiniteScroll.svelte

@@ -10,7 +10,8 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   interface Props {
     /** 加载更多回调 */
@@ -40,8 +41,10 @@
     noMoreText = 'No more data',
     class: className,
     children,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let loading = $state(false)
   let containerRef: HTMLDivElement | undefined = $state()
 
@@ -62,11 +65,11 @@
   }
 </script>
 
-<div
-  bind:this={containerRef}
-  class={cn('overflow-y-auto', className)}
-  onscroll={checkAndLoad}
-  role='feed'
+<div {...dataAttributes}
+     bind:this={containerRef}
+     class={cn('overflow-y-auto', className)}
+     onscroll={checkAndLoad}
+     role='feed'
 >
   {@render children()}
 

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../types.js';
 interface Props {
     /** 加载更多回调 */
     onloadmore?: () => Promise<void>;
@@ -17,6 +18,7 @@ interface Props {
     /** 列表内容 */
     children: Snippet;
 }
-declare const InfiniteScroll: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & DataAttributes;
+declare const InfiniteScroll: import("svelte").Component<$$ComponentProps, {}, "">;
 type InfiniteScroll = ReturnType<typeof InfiniteScroll>;
 export default InfiniteScroll;

package/dist/components/compounds/MessageBoxContainer.svelte

@@ -9,10 +9,15 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../types.js'
   import { messageBox } from '../../messagebox.svelte.js'
+  import { getDataAttributes } from '../../utils.js'
   import MessageBoxDialog from './MessageBoxDialog.svelte'
+
+  const { ...restProps }: DataAttributes = $props()
+  const dataAttributes = $derived(getDataAttributes(restProps))
 </script>
 
 {#each messageBox.items as item (item.id)}
-  <MessageBoxDialog {item} />
+  <MessageBoxDialog {...dataAttributes} {item} />
 {/each}

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

@@ -1,18 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MessageBoxContainer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MessageBoxContainer = InstanceType<typeof MessageBoxContainer>;
+import type { DataAttributes } from '../../types.js';
+declare const MessageBoxContainer: import("svelte").Component<DataAttributes, {}, "">;
+type MessageBoxContainer = ReturnType<typeof MessageBoxContainer>;
 export default MessageBoxContainer;

package/dist/components/compounds/MessageBoxDialog.svelte

@@ -7,13 +7,15 @@
 -->
 <script lang='ts'>
   import type { MessageBoxItem } from '../../messagebox.svelte.js'
+  import type { DataAttributes } from '../../types.js'
   import { messageBox } from '../../messagebox.svelte.js'
   import { uiM } from '../../messages.js'
-  import { cn } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
   import Button from '../primitives/Button.svelte'
 
-  const { item }: { item: MessageBoxItem } = $props()
+  const { item, ...restProps }: { item: MessageBoxItem } & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   /** 图标类型到 tabler icon 的映射 */
   const iconMap: Record<string, string> = {
     info: 'icon-[tabler--info-circle]',
@@ -46,11 +48,11 @@
 </script>
 
 <!-- 使用 hai-messagebox 而非 DaisyUI .modal，避免 ::backdrop 被隐藏 -->
-<dialog
-  bind:this={dialogEl}
-  class='hai-messagebox'
-  oncancel={e => e.preventDefault()}
-  onclick={handleBackdropClick}
+<dialog {...dataAttributes}
+        bind:this={dialogEl}
+        class='hai-messagebox'
+        oncancel={e => e.preventDefault()}
+        onclick={handleBackdropClick}
 >
   <div class='hai-messagebox__panel'>
     <!-- 标题栏：始终显示，右侧关闭按钮 -->

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

@@ -1,7 +1,8 @@
 import type { MessageBoxItem } from '../../messagebox.svelte.js';
+import type { DataAttributes } from '../../types.js';
 type $$ComponentProps = {
     item: MessageBoxItem;
-};
+} & DataAttributes;
 declare const MessageBoxDialog: import("svelte").Component<$$ComponentProps, {}, "">;
 type MessageBoxDialog = ReturnType<typeof MessageBoxDialog>;
 export default MessageBoxDialog;

package/dist/components/compounds/MessageContainer.svelte

@@ -5,17 +5,19 @@
   轻量消息提示容器，渲染 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'>
+  import type { DataAttributes } from '../../types.js'
   import { onMount } from 'svelte'
   import { message } from '../../message.svelte.js'
-  import { cn } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
   import IconButton from '../primitives/IconButton.svelte'
 
+  const { ...restProps }: DataAttributes = $props()
+  const dataAttributes = $derived(getDataAttributes(restProps))
+
   /** 图标类型到 tabler icon 的映射 */
   const iconMap: Record<string, string> = {
     info: 'icon-[tabler--info-circle]',
@@ -32,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)
@@ -117,20 +96,16 @@
       }
     }
   })
-
-  $effect(() => {
-    void hasItems
-    relocate()
-  })
 </script>
 
-<div bind:this={layerElement} popover='manual' class='hai-message-layer'>
+<div {...dataAttributes} bind:this={layerElement} popover='manual' class='hai-message-layer'>
   <div class='hai-message-stack'>
     {#each message.items as item (item.id)}
       <div
         class={cn(
           'hai-message-item alert shadow-lg border',
           bgMap[item.type] ?? bgMap.info,
+          textColorMap[item.type] ?? textColorMap.info,
         )}
         role='alert'
       >
@@ -157,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/MessageContainer.svelte.d.ts

@@ -1,3 +1,4 @@
-declare const MessageContainer: import("svelte").Component<Record<string, never>, {}, "">;
+import type { DataAttributes } from '../../types.js';
+declare const MessageContainer: import("svelte").Component<DataAttributes, {}, "">;
 type MessageContainer = ReturnType<typeof MessageContainer>;
 export default MessageContainer;