@h-ai/ui 0.1.0-alpha.26 → 0.1.0-alpha.28

package/README.md

@@ -32,13 +32,21 @@ export default config
 ### 2. 配置 vite.config.ts
 
 ```ts
+import { haiOptimizeExclude, haiPrebundledDeps } from '@h-ai/ui/vite'
 import { sveltekit } from '@sveltejs/kit/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [sveltekit(), tailwindcss()],
-  optimizeDeps: { exclude: ['bits-ui'] },
+  optimizeDeps: {
+    // bits-ui 含 .svelte 源码须 exclude；@internationalized/date 须与 bits-ui 同为原始副本，
+    // 否则日期组件会因双实例 instanceof 失败抛 "Unknown date type"
+    exclude: [...haiOptimizeExclude],
+    // 预打包 @h-ai/ui 的重型纯 JS 依赖（语法高亮 / Mermaid / PDF 等），
+    // 避免首次进入业务路由时触发依赖再优化与整页刷新
+    include: [...haiPrebundledDeps],
+  },
   ssr: { noExternal: [/@h-ai\//] },
 })
 ```

package/auto-import.d.ts

@@ -57,6 +57,9 @@ declare global {
   const Form: typeof import('@h-ai/ui')['Form']
   const FormField: typeof import('@h-ai/ui')['FormField']
   const InfiniteScroll: typeof import('@h-ai/ui')['InfiniteScroll']
+  const MessageContainer: typeof import('@h-ai/ui')['MessageContainer']
+  const MessageBoxContainer: typeof import('@h-ai/ui')['MessageBoxContainer']
+  const MessageBoxDialog: typeof import('@h-ai/ui')['MessageBoxDialog']
   const Modal: typeof import('@h-ai/ui')['Modal']
   const PageHeader: typeof import('@h-ai/ui')['PageHeader']
   const Pagination: typeof import('@h-ai/ui')['Pagination']

package/auto-import.js

@@ -48,6 +48,9 @@ const UI_COMPONENTS = new Set([
   'Form',
   'FormField',
   'InfiniteScroll',
+  'MessageContainer',
+  'MessageBoxContainer',
+  'MessageBoxDialog',
   'Modal',
   'PageHeader',
   'Pagination',

package/dist/components/compounds/Calendar.svelte

@@ -88,7 +88,7 @@
         <BitsCalendar.Grid class='w-full border-collapse'>
           <BitsCalendar.GridHead>
             <BitsCalendar.GridRow class='flex w-full'>
-              {#each weekdays as day (day)}
+              {#each weekdays as day, weekdayIndex (weekdayIndex)}
                 <BitsCalendar.HeadCell class='w-9 text-center text-xs font-medium text-base-content/50'>
                   {day}
                 </BitsCalendar.HeadCell>

package/dist/components/compounds/DatePicker.svelte

@@ -101,7 +101,7 @@
             <BitsDatePicker.Grid class='w-full border-collapse'>
               <BitsDatePicker.GridHead>
                 <BitsDatePicker.GridRow class='flex w-full'>
-                  {#each weekdays as day (day)}
+                  {#each weekdays as day, weekdayIndex (weekdayIndex)}
                     <BitsDatePicker.HeadCell class='w-9 text-center text-xs font-medium text-base-content/50'>
                       {day}
                     </BitsDatePicker.HeadCell>

package/dist/components/compounds/MessageBoxContainer.svelte

@@ -0,0 +1,18 @@
+<!--
+  =============================================================================
+  @h-ai/ui - MessageBoxContainer 组件
+  =============================================================================
+  命令式弹框容器，渲染 messageBox store 中的所有弹框。
+  每个弹框由 MessageBoxDialog 独立管理 showModal()/close()。
+
+  使用 DaisyUI 样式 + tabler icon，不依赖 ElementUI。
+  =============================================================================
+-->
+<script lang='ts'>
+  import { messageBox } from '../../messagebox.svelte.js'
+  import MessageBoxDialog from './MessageBoxDialog.svelte'
+</script>
+
+{#each messageBox.items as item (item.id)}
+  <MessageBoxDialog {item} />
+{/each}

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

@@ -0,0 +1,18 @@
+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>;
+export default MessageBoxContainer;

package/dist/components/compounds/MessageBoxDialog.svelte

@@ -0,0 +1,193 @@
+<!--
+  单个 MessageBox 弹框，由 MessageBoxContainer 渲染。
+  内部使用原生 <dialog>.showModal() 进入浏览器 top layer。
+  行为对标 ElementUI MessageBox：
+    - 始终显示标题（默认"提示"）和右上角关闭按钮；
+    - 遮罩层点击可通过 closeOnClickModal 配置。
+-->
+<script lang='ts'>
+  import type { MessageBoxItem } from '../../messagebox.svelte.js'
+  import { messageBox } from '../../messagebox.svelte.js'
+  import { uiM } from '../../messages.js'
+  import { cn } from '../../utils.js'
+  import Button from '../primitives/Button.svelte'
+
+  const { item }: { item: MessageBoxItem } = $props()
+
+  /** 图标类型到 tabler icon 的映射 */
+  const iconMap: Record<string, string> = {
+    info: 'icon-[tabler--info-circle]',
+    success: 'icon-[tabler--circle-check]',
+    warning: 'icon-[tabler--alert-triangle]',
+    error: 'icon-[tabler--circle-x]',
+  }
+
+  /** 图标背景色映射 */
+  const iconBgMap: Record<string, string> = {
+    info: 'bg-info/15 text-info',
+    success: 'bg-success/15 text-success',
+    warning: 'bg-warning/15 text-warning',
+    error: 'bg-error/15 text-error',
+  }
+
+  let dialogEl: HTMLDialogElement | undefined = $state()
+
+  $effect(() => {
+    if (dialogEl && !dialogEl.open) {
+      dialogEl.showModal()
+    }
+  })
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget && item.closeOnClickModal) {
+      messageBox.handleClose(item)
+    }
+  }
+</script>
+
+<!-- 使用 hai-messagebox 而非 DaisyUI .modal，避免 ::backdrop 被隐藏 -->
+<dialog
+  bind:this={dialogEl}
+  class='hai-messagebox'
+  oncancel={e => e.preventDefault()}
+  onclick={handleBackdropClick}
+>
+  <div class='hai-messagebox__panel'>
+    <!-- 标题栏：始终显示，右侧关闭按钮 -->
+    <div class='hai-messagebox__header'>
+      <h3 class='font-bold text-lg'>{item.title}</h3>
+      <button
+        type='button'
+        class='hai-messagebox__close'
+        aria-label={uiM('common_close')}
+        onclick={() => messageBox.handleClose(item)}
+      >
+        <span class='icon-[tabler--x] size-5'></span>
+      </button>
+    </div>
+
+    <!-- 图标 + 消息内容同行 -->
+    <div class='hai-messagebox__body flex items-center gap-3'>
+      {#if item.iconType}
+        <span class={cn(
+          'inline-flex items-center justify-center rounded-full w-10 h-10 shrink-0',
+          iconBgMap[item.iconType] ?? iconBgMap.info,
+        )}>
+          <span class={cn(iconMap[item.iconType] ?? iconMap.info, 'size-5')}></span>
+        </span>
+      {/if}
+      <p class='flex-1 min-w-0 text-base-content/80 text-sm leading-relaxed'>{item.message}</p>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class='hai-messagebox__footer'>
+      {#if item.showCancel}
+        <Button
+          variant='ghost'
+          disabled={item.loading}
+          onclick={() => messageBox.handleCancel(item)}
+        >
+          {item.cancelText || uiM('confirm_cancel')}
+        </Button>
+      {/if}
+      <Button
+        variant={item.confirmVariant || 'primary'}
+        loading={item.loading}
+        disabled={item.loading}
+        onclick={() => messageBox.handleConfirm(item)}
+      >
+        {item.confirmText || uiM('confirm_ok')}
+      </Button>
+    </div>
+  </div>
+</dialog>
+
+<style>
+  dialog.hai-messagebox {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    outline: none;
+    overflow: visible;
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    z-index: 999;
+  }
+
+  dialog.hai-messagebox::backdrop {
+    background: color-mix(in srgb, var(--color-base-content) 25%, transparent);
+    backdrop-filter: blur(2px);
+  }
+
+  .hai-messagebox__panel {
+    position: relative;
+    width: min(100%, 28rem);
+    max-width: calc(100vw - 2rem);
+    max-height: calc(100vh - 4rem);
+    background: var(--color-base-100);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    box-shadow: 0 25px 50px -12px oklch(0% 0 0 / 0.25);
+    animation: hai-msgbox-enter 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+    overflow-y: auto;
+  }
+
+  .hai-messagebox__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+  }
+
+  .hai-messagebox__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: color-mix(in srgb, var(--color-base-content) 45%, transparent);
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: 0;
+    outline: none;
+    transition: color 160ms ease;
+  }
+
+  .hai-messagebox__close:hover {
+    color: var(--color-base-content);
+  }
+
+  .hai-messagebox__close:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  .hai-messagebox__body {
+    margin-bottom: 1rem;
+  }
+
+  .hai-messagebox__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+  }
+
+  @keyframes hai-msgbox-enter {
+    from {
+      opacity: 0;
+      transform: translateY(10px) scale(0.985);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+</style>

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

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

package/dist/components/compounds/MessageContainer.svelte

@@ -0,0 +1,200 @@
+<!--
+  =============================================================================
+  @h-ai/ui - MessageContainer 组件
+  =============================================================================
+  轻量消息提示容器，渲染 message store 中的消息条目。
+  视觉风格：顶部居中、带类型图标、自动滑入滑出。
+
+  叠加策略与 ToastContainer 一致：
+    - 有打开的 modal dialog 时，寄宿到 dialog 内部（top layer）；
+    - 否则寄宿到 <body> 以 popover 进入 top layer。
+  =============================================================================
+-->
+<script lang='ts'>
+  import { onMount } from 'svelte'
+  import { message } from '../../message.svelte.js'
+  import { cn } from '../../utils.js'
+  import IconButton from '../primitives/IconButton.svelte'
+
+  /** 图标类型到 tabler icon 的映射 */
+  const iconMap: Record<string, string> = {
+    info: 'icon-[tabler--info-circle]',
+    success: 'icon-[tabler--circle-check]',
+    warning: 'icon-[tabler--alert-triangle]',
+    error: 'icon-[tabler--circle-x]',
+  }
+
+  /** 图标颜色映射 */
+  const iconColorMap: 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',
+  }
+
+  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')) {
+        el.showPopover()
+      }
+    }
+    catch { /* 忽略异常 */ }
+  }
+
+  function safeHidePopover(el: HTMLElement) {
+    try {
+      if (typeof el.hidePopover === 'function' && el.matches(':popover-open')) {
+        el.hidePopover()
+      }
+    }
+    catch { /* 忽略异常 */ }
+  }
+
+  function relocate() {
+    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) {
+      safeShowPopover(el)
+    }
+    else {
+      safeHidePopover(el)
+    }
+  }
+
+  onMount(() => {
+    relocate()
+    const observer = new MutationObserver(() => relocate())
+    observer.observe(document.body, { subtree: true, attributes: true, attributeFilter: ['open'] })
+    return () => {
+      observer.disconnect()
+      const el = layerElement
+      if (el) {
+        safeHidePopover(el)
+        el.remove()
+      }
+    }
+  })
+
+  $effect(() => {
+    void hasItems
+    relocate()
+  })
+</script>
+
+<div 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,
+        )}
+        role='alert'
+      >
+        <span class={cn(iconMap[item.type] ?? iconMap.info, 'size-5 shrink-0', iconColorMap[item.type] ?? iconColorMap.info)}></span>
+        <span class='text-sm'>{item.message}</span>
+        {#if item.closable}
+          <IconButton
+            variant='ghost'
+            size='sm'
+            onclick={() => message.remove(item.id)}
+            ariaLabel='close'
+          >
+            ✕
+          </IconButton>
+        {/if}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .hai-message-layer {
+    position: fixed;
+    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;
+  }
+
+  .hai-message-stack {
+    position: absolute;
+    top: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    pointer-events: auto;
+  }
+
+  .hai-message-item {
+    animation: hai-message-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    min-width: 16rem;
+    max-width: 32rem;
+    white-space: nowrap;
+  }
+
+  @keyframes hai-message-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

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

@@ -0,0 +1,3 @@
+declare const MessageContainer: import("svelte").Component<Record<string, never>, {}, "">;
+type MessageContainer = ReturnType<typeof MessageContainer>;
+export default MessageContainer;

package/dist/components/compounds/Modal.svelte

@@ -143,7 +143,6 @@
 >
   <div
     class='hai-modal__viewport'
-    role='button'
     tabindex='-1'
     aria-label={uiM('common_close')}
     onclick={handleDialogClick}