@h-ai/ui 0.1.0-alpha.12 → 0.1.0-alpha.15

package/README.md

@@ -49,7 +49,8 @@ export default defineConfig({
 @import 'tailwindcss';
 @import '@h-ai/ui/styles/global.css';
 @import '@h-ai/ui/styles/theme.css';
-@source "../node_modules/@h-ai/ui/dist/**/*.{svelte,ts}";
+@source "../node_modules/@h-ai/ui/dist/**/*.{svelte,js,ts}";
+@source "../../../node_modules/@h-ai/ui/dist/**/*.{svelte,js,ts}";
 
 @plugin "daisyui" {
   themes: light --default, dark --prefersdark, cupcake, emerald, corporate, nord, dracula, night;
@@ -61,7 +62,7 @@ export default defineConfig({
 }
 ```
 
-> `@source` 让 TailwindCSS 扫描 `@h-ai/ui` 组件中使用的 class 名，否则组件样式会丢失。
+> `@source` 让 TailwindCSS 扫描 `@h-ai/ui` 组件中使用的 class 名，否则组件样式会丢失。嵌套应用位于 monorepo 中时，依赖包可能被提升到工作区根 `node_modules`，所以建议同时保留两条路径。
 
 ### 4. 使用组件
 
@@ -236,6 +237,8 @@ components/
 | `HashDisplay`      | 哈希展示 | `value`, `algorithm`, `copyable`, `truncate`            |
 | `SignatureDisplay` | 签名展示 | `signature`, `publicKey`, `algorithm`, `verified`       |
 
+默认算法与 `@h-ai/crypto` 对齐：加密输入使用 `SM4`，哈希展示使用 `SM3`，签名展示使用 `SM2`。
+
 ## 使用示例
 
 ### Toast 通知
@@ -376,7 +379,8 @@ components/
 @import 'tailwindcss';
 @import '@h-ai/ui/styles/global.css';   /* 基础重置、滚动条、焦点样式 */
 @import '@h-ai/ui/styles/theme.css';    /* Tailwind v4 @theme Token（品牌色/阴影/动效） */
-@source "../node_modules/@h-ai/ui/dist/**/*.{svelte,ts}";
+@source "../node_modules/@h-ai/ui/dist/**/*.{svelte,js,ts}";
+@source "../../../node_modules/@h-ai/ui/dist/**/*.{svelte,js,ts}";
 
 /* 移动端项目追加（可选） */
 @import '@h-ai/ui/styles/design-tokens.css'; /* CSS 自定义属性 */
@@ -391,7 +395,19 @@ components/
 - `global.css`：基础 HTML 重置、滚动条美化、表单焦点环
 - `theme.css`：Tailwind v4 `@theme` 块，包含品牌色、阴影层级、动效曲线、字体特性
 - `design-tokens.css`：CSS 自定义属性（间距/圆角/z-index/过渡），移动端推荐
-- `mobile.css`：安全区域 padding、momentum 滚动、虚拟键盘适配
+- `mobile.css`：安全区域 padding、momentum 滚动、虚拟键盘适配、移动端 App 壳布局工具（`hai-mobile-viewport` / `hai-mobile-shell` / `hai-mobile-main`）
+
+移动端页面推荐让 `BottomNav` 与页面壳宽度一致，避免桌面预览时底栏横跨整个视口：
+
+```svelte
+<div class="hai-mobile-viewport">
+  <div class="hai-mobile-shell max-w-lg">
+    <AppBar title="Home" fixed={false} safeArea />
+    <main class="hai-mobile-main">...</main>
+    <BottomNav items={items} active="home" centered maxWidth="lg" safeArea />
+  </div>
+</div>
+```
 
 ### 图标
 

package/dist/components/compounds/BottomNav.svelte

@@ -11,6 +11,16 @@
   // eslint-disable-next-line no-import-assign -- type re-export
   export type { BottomNavItem }
 
+  type BottomNavMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'none'
+
+  const MAX_WIDTH_CLASS: Record<BottomNavMaxWidth, string> = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    none: '',
+  }
+
   interface Props {
     /** 导航项列表 */
     items: BottomNavItem[]
@@ -20,6 +30,10 @@
     onchange?: (id: string) => void
     /** 是否适配底部安全区域 */
     safeArea?: boolean
+    /** 是否将 fixed 导航居中，适用于移动端仿真器/桌面预览中的窄屏壳 */
+    centered?: boolean
+    /** fixed 导航最大宽度，centered=true 时生效 */
+    maxWidth?: BottomNavMaxWidth
     /** 额外 CSS 类 */
     class?: string
   }
@@ -29,13 +43,19 @@
     active,
     onchange,
     safeArea = true,
+    centered = false,
+    maxWidth = 'none',
     class: className,
   }: Props = $props()
+
+  const constrained = $derived(centered && maxWidth !== 'none')
 </script>
 
 <nav
   class={cn(
-    'fixed bottom-0 left-0 right-0 bg-base-100 border-t border-base-200 z-40',
+    'fixed bottom-0 bg-base-100 border-t border-base-200 z-40',
+    constrained ? 'left-1/2 right-auto w-full -translate-x-1/2' : 'left-0 right-0',
+    constrained && MAX_WIDTH_CLASS[maxWidth],
     safeArea && 'hai-safe-bottom',
     className,
   )}

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

@@ -1,4 +1,5 @@
 import type { BottomNavItem } from './bottom-nav-types.js';
+type BottomNavMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'none';
 interface Props {
     /** 导航项列表 */
     items: BottomNavItem[];
@@ -8,6 +9,10 @@ interface Props {
     onchange?: (id: string) => void;
     /** 是否适配底部安全区域 */
     safeArea?: boolean;
+    /** 是否将 fixed 导航居中，适用于移动端仿真器/桌面预览中的窄屏壳 */
+    centered?: boolean;
+    /** fixed 导航最大宽度，centered=true 时生效 */
+    maxWidth?: BottomNavMaxWidth;
     /** 额外 CSS 类 */
     class?: string;
 }

package/dist/components/primitives/Switch.svelte

@@ -22,10 +22,15 @@
 
   const id = generateId('switch')
 
+  const hasToggleColorVariant = $derived(
+    /\btoggle-(?:primary|secondary|accent|neutral|success|warning|info|error)\b/.test(className),
+  )
+
   const toggleClass = $derived(
     cn(
       'toggle',
       getSizeClass(size, 'toggle'),
+      !hasToggleColorVariant && 'toggle-primary',
       className,
     ),
   )

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

@@ -172,6 +172,7 @@
       tabindex='-1'
       onmousedown={event => event.preventDefault()}
       onclick={event => event.stopPropagation()}
+      onkeydown={event => event.stopPropagation()}
     >
       {#each resolvedActions as action}
         <button