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

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/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/ToastContainer.svelte

@@ -4,10 +4,17 @@
   =============================================================================
   Toast 容器组件，显示所有 Toast 通知
 
-  使用 Svelte 5 Runes ($derived)
+  使用 Svelte 5 Runes ($derived / $effect)
+
+  叠加策略（关键）：原生 <dialog>.showModal() 处于浏览器 top layer，且在 Chromium 中
+  始终渲染在 Popover 之上。为保证 Toast 永远可见、不被弹窗遮挡：
+    - 当存在已打开的 modal dialog 时，将 Toast 层寄宿到该 dialog 内部（同处 top layer，
+      作为最后子节点渲染在其内容之上）；
+    - 否则寄宿到 <body> 并以 Popover 进入 top layer，叠加在普通内容之上。
   =============================================================================
 -->
 <script lang='ts'>
+  import { onMount } from 'svelte'
   import { uiM } from '../../messages.js'
   import { toast } from '../../toast.svelte.js'
   import { cn, getAlertVariantClass } from '../../utils.js'
@@ -22,6 +29,11 @@
     'bottom-center': 'toast-bottom toast-center',
   }
 
+  // 容器根元素引用。
+  let layerElement: HTMLDivElement | undefined = $state()
+
+  const hasItems = $derived(toast.items.length > 0)
+
   // 按位置分组
   const groupedItems = $derived(() => {
     const groups: Record<string, typeof toast.items> = {}
@@ -36,24 +48,151 @@
 
     return groups
   })
+
+  /** 找到最顶层处于打开状态的原生 modal dialog（位于浏览器 top layer）。 */
+  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 {
+    // 同上，忽略异常。
+    }
+  }
+
+  /**
+   * 将 Toast 层寄宿到正确的容器：
+   * - 有打开的 modal dialog 时，去掉 popover 属性并寄宿到该 dialog 内部，渲染在其内容之上；
+   * - 否则寄宿到 <body>，恢复 popover 属性并按需进入 / 退出 top layer。
+   */
+  function relocate() {
+    const el = layerElement
+    if (!el) {
+      return
+    }
+
+    const modal = hasItems ? findTopModalDialog() : null
+
+    if (modal) {
+      // 寄宿到 dialog：popover 元素未显示时会 display:none，故先移除 popover 属性。
+      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()
+
+    // dialog 通过 showModal()/close() 切换 `open` 属性；据此重新寄宿 Toast 层。
+    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()
+      }
+    }
+  })
+
+  // Toast 数量变化时重新寄宿（出现 / 消失、以及在 dialog 与 body 之间切换）。
+  $effect(() => {
+    void hasItems
+    relocate()
+  })
 </script>
 
-{#each Object.entries(groupedItems()) as [position, items] (position)}
-  <div class={cn('toast z-50', positionMap[position as keyof typeof positionMap])}>
-    {#each items as item (item.id)}
-      <div class={cn('alert', getAlertVariantClass(item.variant ?? 'info'))}>
-        <span>{item.message}</span>
-        {#if item.dismissible}
-          <IconButton
-            variant='ghost'
-            size='sm'
-            onclick={() => toast.remove(item.id)}
-            ariaLabel={uiM('toast_dismiss')}
-          >
-            ✕
-          </IconButton>
-        {/if}
-      </div>
-    {/each}
-  </div>
-{/each}
+<div bind:this={layerElement} popover='manual' class='hai-toast-layer'>
+  {#each Object.entries(groupedItems()) as [position, items] (position)}
+    <div class={cn('toast', positionMap[position as keyof typeof positionMap])}>
+      {#each items as item (item.id)}
+        <div class={cn('alert', getAlertVariantClass(item.variant ?? 'info'))}>
+          <span>{item.message}</span>
+          {#if item.dismissible}
+            <IconButton
+              variant='ghost'
+              size='sm'
+              onclick={() => toast.remove(item.id)}
+              ariaLabel={uiM('toast_dismiss')}
+            >
+              ✕
+            </IconButton>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/each}
+</div>
+
+<style>
+  /* 容器铺满视口但不拦截交互；仅 toast 本体接收指针事件。 */
+  .hai-toast-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;
+  }
+
+  /* 未支持 Popover API 的浏览器忽略 popover 属性，容器常驻文档流；
+     此时无 toast 项则内部不渲染任何内容，容器透明且不拦截交互。 */
+
+  .hai-toast-layer :global(.toast) {
+    pointer-events: auto;
+  }
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.27",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -15,6 +15,10 @@
       "types": "./auto-import.d.ts",
       "import": "./auto-import.js"
     },
+    "./vite": {
+      "types": "./vite.d.ts",
+      "import": "./vite.js"
+    },
     "./components/*": {
       "types": "./dist/components/*.d.ts",
       "svelte": "./dist/components/*.js",
@@ -27,7 +31,9 @@
   "files": [
     "auto-import.d.ts",
     "auto-import.js",
-    "dist"
+    "dist",
+    "vite.d.ts",
+    "vite.js"
   ],
   "publishConfig": {
     "access": "public"
@@ -45,7 +51,7 @@
     "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.26"
+    "@h-ai/core": "0.1.0-alpha.27"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",

package/vite.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 类型声明：@h-ai/ui/vite 开发优化辅助。
+ */
+
+/**
+ * hai 框架在开发态需要提前预打包的纯 JS 依赖清单。
+ */
+export declare const haiPrebundledDeps: readonly string[]
+
+/**
+ * 需要从 Vite 依赖预打包中排除的依赖清单（bits-ui 及其 @internationalized/date 单实例）。
+ */
+export declare const haiOptimizeExclude: readonly string[]

package/vite.js

@@ -0,0 +1,95 @@
+/**
+ * =============================================================================
+ * @h-ai/ui - Vite 开发优化辅助
+ * =============================================================================
+ * 说明：
+ *   @h-ai/ui 的 barrel 入口会静态引入语法高亮（shiki + 27 种语言定义）、
+ *   Mermaid、Markdown、PDF 等较重的运行时依赖。这些依赖以纯 JS 形态存在，
+ *   若在首次进入相关路由时才被 Vite 依赖优化器发现，会触发一次
+ *   "new dependencies optimized -> reloading" 的整页刷新（并伴随 daisyUI
+ *   CSS 重新编译），表现为"点击后要等一会才刷新可用"。
+ *
+ *   将这些依赖加入各应用 `optimizeDeps.include`，让 Vite 在开发服务器启动时
+ *   一次性预打包，即可消除运行中途的再优化与整页刷新。
+ *
+ * 用法（应用 vite.config.ts）：
+ *   import { haiPrebundledDeps } from '@h-ai/ui/vite'
+ *   optimizeDeps: {
+ *     exclude: ['bits-ui'],
+ *     include: [...haiPrebundledDeps],
+ *   }
+ * =============================================================================
+ */
+
+/**
+ * hai 框架在开发态需要提前预打包的纯 JS 依赖清单。
+ *
+ * 这些依赖经由 @h-ai/ui 等框架包间接引入（如语法高亮、Mermaid、PDF、加密传输等），
+ * 若延迟到首次进入业务路由时才被 Vite 依赖优化器发现，会触发整页刷新。
+ * shiki 语言列表需与 `src/lib/components/scenes/ai/highlight.ts` 保持一致。
+ *
+ * @type {readonly string[]}
+ */
+export const haiPrebundledDeps = Object.freeze([
+  // ─── 语法高亮（shiki 核心 + 引擎 + 语言定义） ───
+  'shiki/core',
+  'shiki/engine/javascript',
+  '@shikijs/langs/bash',
+  '@shikijs/langs/c',
+  '@shikijs/langs/cpp',
+  '@shikijs/langs/csharp',
+  '@shikijs/langs/css',
+  '@shikijs/langs/diff',
+  '@shikijs/langs/go',
+  '@shikijs/langs/graphql',
+  '@shikijs/langs/html',
+  '@shikijs/langs/java',
+  '@shikijs/langs/javascript',
+  '@shikijs/langs/json',
+  '@shikijs/langs/kotlin',
+  '@shikijs/langs/lua',
+  '@shikijs/langs/markdown',
+  '@shikijs/langs/php',
+  '@shikijs/langs/python',
+  '@shikijs/langs/ruby',
+  '@shikijs/langs/rust',
+  '@shikijs/langs/scss',
+  '@shikijs/langs/shellscript',
+  '@shikijs/langs/sql',
+  '@shikijs/langs/swift',
+  '@shikijs/langs/toml',
+  '@shikijs/langs/typescript',
+  '@shikijs/langs/xml',
+  '@shikijs/langs/yaml',
+  // ─── 文档 / 图表 / 导出 ───
+  'marked',
+  'mermaid',
+  'jspdf',
+  'html2canvas',
+  // ─── 工具 ───
+  'tailwind-merge',
+  // ─── 框架运行时（@h-ai/core / @h-ai/crypto / @h-ai/kit 在登录等路径引入） ───
+  'nanoid',
+  'process',
+  'sm-crypto',
+  // ─── bits-ui 的纯 JS 传递依赖（bits-ui 自身因含 .svelte 仍需 exclude） ───
+  'bits-ui > @floating-ui/dom',
+  'bits-ui > @floating-ui/core',
+  'bits-ui > tabbable',
+  'bits-ui > esm-env',
+])
+
+/**
+ * 需要从 Vite 依赖预打包中排除的依赖清单。
+ *
+ * - bits-ui：自带 .svelte 源码，无法被 esbuild 预打包，须交给 vite-plugin-svelte。
+ * - @internationalized/date：bits-ui（被 exclude，按源码加载）内部用 `instanceof CalendarDate`
+ *   判别日期类型。若应用侧用「已优化」副本、bits-ui 用「原始」副本，会产生两个模块实例导致
+ *   instanceof 失败并抛 "Unknown date type"。统一排除，使两侧都加载同一份原始 ESM，单实例。
+ *
+ * @type {readonly string[]}
+ */
+export const haiOptimizeExclude = Object.freeze([
+  'bits-ui',
+  '@internationalized/date',
+])