@h-ai/ui 0.1.0-alpha5

package/dist/messages.js

@@ -0,0 +1,42 @@
+/**
+ * @h-ai/ui — 内置消息获取器
+ *
+ * 为 UI 组件提供内置的多语言翻译支持
+ * @module messages
+ */
+import { core } from '@h-ai/core';
+// 导入消息文件
+import messagesEnUS from './messages/en-US.json';
+import messagesZhCN from './messages/zh-CN.json';
+// 创建消息获取器
+const getMessage = core.i18n.createMessageGetter({
+    'zh-CN': messagesZhCN,
+    'en-US': messagesEnUS,
+});
+/**
+ * 获取 UI 组件翻译消息
+ *
+ * @param key - 消息 key
+ * @param params - 可选的插值参数
+ * @returns 当前 locale 对应的翻译文本
+ *
+ * @example
+ * ```ts
+ * uiM('password_show') // => '显示密码' (zh-CN) 或 'Show password' (en-US)
+ * ```
+ */
+export function uiM(key, params) {
+    return getMessage(key, params ? { params } : undefined);
+}
+/**
+ * 获取当前 UI 模块使用的 locale
+ */
+export function getUILocale() {
+    return core.i18n.getGlobalLocale();
+}
+/**
+ * 手动设置 UI 模块的 locale（通常不需要，会自动同步）
+ */
+export function setUILocale(locale) {
+    core.i18n.setGlobalLocale(locale);
+}

package/dist/styles/design-tokens.css

@@ -0,0 +1,58 @@
+/**
+ * =============================================================================
+ * @hai/ui - Design Token 系统
+ * =============================================================================
+ * 所有视觉变量通过 CSS Variables 定义，多端复用。
+ *
+ * 在 app.css 中导入：
+ * @import '@hai/ui/styles/design-tokens.css';
+ * =============================================================================
+ */
+
+:root {
+  /* ─── 间距 ─── */
+  --hai-spacing-xs: 4px;
+  --hai-spacing-sm: 8px;
+  --hai-spacing-md: 16px;
+  --hai-spacing-lg: 24px;
+  --hai-spacing-xl: 32px;
+
+  /* ─── 圆角 ─── */
+  --hai-radius-sm: 4px;
+  --hai-radius-md: 8px;
+  --hai-radius-lg: 16px;
+  --hai-radius-full: 9999px;
+
+  /* ─── 字体大小 ─── */
+  --hai-font-size-xs: 12px;
+  --hai-font-size-sm: 14px;
+  --hai-font-size-md: 16px;
+  --hai-font-size-lg: 18px;
+  --hai-font-size-xl: 20px;
+  --hai-font-size-2xl: 24px;
+
+  /* ─── 最小点击区域 ─── */
+  --hai-touch-target-min: 44px;
+
+  /* ─── 安全区域 ─── */
+  --hai-safe-area-top: env(safe-area-inset-top, 0px);
+  --hai-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --hai-safe-area-left: env(safe-area-inset-left, 0px);
+  --hai-safe-area-right: env(safe-area-inset-right, 0px);
+
+  /* ─── z-index 层级 ─── */
+  --hai-z-dropdown: 1000;
+  --hai-z-modal: 1100;
+  --hai-z-toast: 1200;
+  --hai-z-tooltip: 1300;
+
+  /* ─── 动画时长 ─── */
+  --hai-transition-fast: 150ms;
+  --hai-transition-normal: 250ms;
+  --hai-transition-slow: 350ms;
+
+  /* ─── 阴影 ─── */
+  --hai-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+  --hai-shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1);
+  --hai-shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1);
+}

package/dist/styles/global.css

@@ -0,0 +1,218 @@
+/**
+ * =============================================================================
+ * @hai/ui - 全局样式
+ * =============================================================================
+ * 可选的全局样式增强，消费应用可通过以下方式导入：
+ *
+ * 在 app.css 中：
+ * @import '@hai/ui/styles/global.css';
+ * =============================================================================
+ */
+
+/* ─── 滚动条 ─── */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: oklch(0.7 0 0 / 0.2);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.55 0 0 / 0.35);
+}
+
+/* ─── 基础 ─── */
+html {
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ─── 表单焦点 ─── */
+.input:focus,
+.select:focus,
+.textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px oklch(var(--p) / 0.15);
+}
+
+/* ─── 隐藏浏览器原生密码显示按钮（使用自定义切换） ─── */
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
+
+/* ─── 卡片 ─── */
+.card {
+  transition:
+    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ─── 按钮 ─── */
+.btn {
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ─── 动画 keyframes ─── */
+@keyframes hai-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes hai-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes hai-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes hai-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes hai-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes hai-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@keyframes hai-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes hai-slide-out-right {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes hai-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* ─── 动画工具类 ─── */
+.hai-fade-in {
+  animation: hai-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+.hai-fade-out {
+  animation: hai-fade-out 0.15s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+.hai-slide-up {
+  animation: hai-slide-up 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.hai-slide-down {
+  animation: hai-slide-down 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.hai-scale-in {
+  animation: hai-scale-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.hai-scale-out {
+  animation: hai-scale-out 0.1s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+.hai-slide-in-right {
+  animation: hai-slide-in-right 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.hai-slide-out-right {
+  animation: hai-slide-out-right 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+/* 兼容旧动画类名 */
+.animate-slide-in-from-right {
+  animation: hai-slide-in-right 0.3s ease-out;
+}
+.animate-slide-out-to-right {
+  animation: hai-slide-out-right 0.3s ease-in forwards;
+}
+.animate-fade-in {
+  animation: hai-fade-in 0.2s ease-out;
+}
+.animate-fade-out {
+  animation: hai-fade-out 0.2s ease-in forwards;
+}
+.animate-in {
+  animation-duration: 0.3s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+.slide-in-from-right {
+  animation-name: hai-slide-in-right;
+}
+.slide-in-from-left {
+  animation-name: hai-slide-in-right;
+  animation-direction: reverse;
+}
+.fade-in {
+  animation-name: hai-fade-in;
+}

package/dist/styles/mobile.css

@@ -0,0 +1,105 @@
+/**
+ * =============================================================================
+ * @hai/ui - 移动端全局样式
+ * =============================================================================
+ * 触摸优化、安全区域、点击区域增强。
+ *
+ * 在 app.css 中导入：
+ * @import '@hai/ui/styles/mobile.css';
+ * =============================================================================
+ */
+
+/* ─── 全局触摸优化 ─── */
+* {
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+/* ─── Hover 仅在支持鼠标设备上生效 ─── */
+@media (hover: hover) and (pointer: fine) {
+  .hai-hover\:opacity:hover {
+    opacity: 0.8;
+  }
+}
+
+/* ─── 移动端最小点击区域（Apple HIG 44x44） ─── */
+@media (pointer: coarse) {
+  .btn,
+  .input,
+  .select,
+  .checkbox,
+  .radio,
+  .toggle {
+    min-height: var(--hai-touch-target-min, 44px);
+  }
+
+  /* DaisyUI btn 尺寸覆盖 */
+  .btn-sm {
+    min-height: 36px;
+  }
+
+  .btn-xs {
+    min-height: 32px;
+  }
+}
+
+/* ─── 安全区域 padding 工具类 ─── */
+.hai-safe-top {
+  padding-top: var(--hai-safe-area-top);
+}
+
+.hai-safe-bottom {
+  padding-bottom: var(--hai-safe-area-bottom);
+}
+
+.hai-safe-left {
+  padding-left: var(--hai-safe-area-left);
+}
+
+.hai-safe-right {
+  padding-right: var(--hai-safe-area-right);
+}
+
+.hai-safe-x {
+  padding-left: var(--hai-safe-area-left);
+  padding-right: var(--hai-safe-area-right);
+}
+
+.hai-safe-y {
+  padding-top: var(--hai-safe-area-top);
+  padding-bottom: var(--hai-safe-area-bottom);
+}
+
+.hai-safe-all {
+  padding-top: var(--hai-safe-area-top);
+  padding-bottom: var(--hai-safe-area-bottom);
+  padding-left: var(--hai-safe-area-left);
+  padding-right: var(--hai-safe-area-right);
+}
+
+/* ─── 虚拟键盘适配 ─── */
+.hai-keyboard-aware {
+  transition: padding-bottom var(--hai-transition-normal, 250ms) ease;
+}
+
+/* ─── 禁止文本选择（在交互元素上） ─── */
+.hai-no-select {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* ─── 移动端滚动容器 ─── */
+.hai-scroll-x {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.hai-scroll-x::-webkit-scrollbar {
+  display: none;
+}
+
+.hai-scroll-y {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}

package/dist/theme-config.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @h-ai/ui — 主题配置
+ *
+ * DaisyUI 主题元数据和配置
+ * @module theme-config
+ */
+import type { UIMessageKey } from './messages.js';
+/**
+ * 主题信息
+ */
+export interface ThemeInfo {
+    /** 主题标识符 */
+    id: string;
+    /** 显示名称 */
+    name: string;
+    /** 是否为暗色主题 */
+    dark: boolean;
+    /** 主题色（用于预览） */
+    primaryColor: string;
+    /** 背景色（用于预览） */
+    bgColor: string;
+}
+/**
+ * 主题分组
+ */
+export interface ThemeGroup {
+    /** 分组标识 */
+    id: string;
+    /** 分组名称 i18n key */
+    nameKey: UIMessageKey;
+    /** 分组内的主题 */
+    themes: ThemeInfo[];
+}
+/**
+ * DaisyUI 内置主题配置（精选）
+ */
+export declare const THEMES: ThemeInfo[];
+/**
+ * 主题分组配置
+ */
+export declare const THEME_GROUPS: ThemeGroup[];
+/**
+ * 暗色主题列表
+ */
+export declare const DARK_THEMES: string[];
+/**
+ * 获取主题信息
+ */
+export declare function getThemeInfo(themeId: string): ThemeInfo | undefined;
+/**
+ * 检查是否为暗色主题
+ */
+export declare function isDarkTheme(themeId: string): boolean;
+/**
+ * 默认主题
+ */
+export declare const DEFAULT_THEME = "light";
+/**
+ * 主题存储键名
+ */
+export declare const THEME_STORAGE_KEY = "theme";
+/**
+ * 获取主题初始化脚本（用于 app.html 防闪烁）
+ *
+ * 使用方式：在 app.html 的 <head> 中添加 <script>{getThemeInitScript()}</script>
+ */
+export declare function getThemeInitScript(): string;
+/**
+ * 应用主题
+ * @param theme - 主题 ID
+ * @param persist - 是否持久化到 localStorage
+ */
+export declare function applyTheme(theme: string, persist?: boolean): void;
+/**
+ * 获取当前主题
+ */
+export declare function getCurrentTheme(): string;
+/**
+ * 获取保存的主题（从 localStorage）
+ */
+export declare function getSavedTheme(): string;
+/**
+ * DaisyUI 主题配置字符串（用于 app.css）
+ *
+ * 注意：Tailwind CSS v4 要求主题在 CSS 中声明，无法通过 JS 动态注入
+ * 消费应用需要在 app.css 中添加：
+ *
+ * @plugin "daisyui" {
+ *   themes: light --default, dark --prefersdark, cupcake, bumblebee, ...
+ * }
+ */
+export declare const DAISYUI_THEMES_CONFIG: string;

package/dist/theme-config.js

@@ -0,0 +1,122 @@
+/**
+ * @h-ai/ui — 主题配置
+ *
+ * DaisyUI 主题元数据和配置
+ * @module theme-config
+ */
+/**
+ * DaisyUI 内置主题配置（精选）
+ */
+export const THEMES = [
+    // 亮色主题
+    { id: 'light', name: 'Light', dark: false, primaryColor: '#570df8', bgColor: '#ffffff' },
+    { id: 'cupcake', name: 'Cupcake', dark: false, primaryColor: '#65c3c8', bgColor: '#faf7f5' },
+    { id: 'emerald', name: 'Emerald', dark: false, primaryColor: '#66cc8a', bgColor: '#ffffff' },
+    { id: 'corporate', name: 'Corporate', dark: false, primaryColor: '#4b6bfb', bgColor: '#ffffff' },
+    { id: 'lofi', name: 'Lo-Fi', dark: false, primaryColor: '#0d0d0d', bgColor: '#ffffff' },
+    { id: 'winter', name: 'Winter', dark: false, primaryColor: '#047aff', bgColor: '#ffffff' },
+    { id: 'nord', name: 'Nord', dark: false, primaryColor: '#5e81ac', bgColor: '#eceff4' },
+    // 暗色主题
+    { id: 'dark', name: 'Dark', dark: true, primaryColor: '#661ae6', bgColor: '#1d232a' },
+    { id: 'dracula', name: 'Dracula', dark: true, primaryColor: '#ff79c6', bgColor: '#282a36' },
+    { id: 'business', name: 'Business', dark: true, primaryColor: '#1c4f82', bgColor: '#202020' },
+    { id: 'night', name: 'Night', dark: true, primaryColor: '#38bdf8', bgColor: '#0f172a' },
+    { id: 'dim', name: 'Dim', dark: true, primaryColor: '#9fe88d', bgColor: '#2a303c' },
+    { id: 'sunset', name: 'Sunset', dark: true, primaryColor: '#ff865b', bgColor: '#1a1919' },
+    { id: 'luxury', name: 'Luxury', dark: true, primaryColor: '#c9a53d', bgColor: '#171618' },
+    { id: 'coffee', name: 'Coffee', dark: true, primaryColor: '#db924b', bgColor: '#20161f' },
+];
+/**
+ * 主题分组配置
+ */
+export const THEME_GROUPS = [
+    {
+        id: 'light',
+        nameKey: 'theme_group_light',
+        themes: THEMES.filter(t => !t.dark),
+    },
+    {
+        id: 'dark',
+        nameKey: 'theme_group_dark',
+        themes: THEMES.filter(t => t.dark),
+    },
+];
+/**
+ * 暗色主题列表
+ */
+export const DARK_THEMES = THEMES.filter(t => t.dark).map(t => t.id);
+/**
+ * 获取主题信息
+ */
+export function getThemeInfo(themeId) {
+    return THEMES.find(t => t.id === themeId);
+}
+/**
+ * 检查是否为暗色主题
+ */
+export function isDarkTheme(themeId) {
+    return DARK_THEMES.includes(themeId);
+}
+// ─── 主题初始化工具 ───
+/**
+ * 默认主题
+ */
+export const DEFAULT_THEME = 'light';
+/**
+ * 主题存储键名
+ */
+export const THEME_STORAGE_KEY = 'theme';
+/**
+ * 获取主题初始化脚本（用于 app.html 防闪烁）
+ *
+ * 使用方式：在 app.html 的 <head> 中添加 <script>{getThemeInitScript()}</script>
+ */
+export function getThemeInitScript() {
+    return `(function(){var t=localStorage.getItem('${THEME_STORAGE_KEY}')||'${DEFAULT_THEME}';document.documentElement.setAttribute('data-theme',t)})()`;
+}
+/**
+ * 应用主题
+ * @param theme - 主题 ID
+ * @param persist - 是否持久化到 localStorage
+ */
+export function applyTheme(theme, persist = true) {
+    if (typeof document === 'undefined')
+        return;
+    document.documentElement.setAttribute('data-theme', theme);
+    if (persist && typeof localStorage !== 'undefined') {
+        localStorage.setItem(THEME_STORAGE_KEY, theme);
+    }
+}
+/**
+ * 获取当前主题
+ */
+export function getCurrentTheme() {
+    if (typeof document === 'undefined')
+        return DEFAULT_THEME;
+    return document.documentElement.getAttribute('data-theme') ?? DEFAULT_THEME;
+}
+/**
+ * 获取保存的主题（从 localStorage）
+ */
+export function getSavedTheme() {
+    if (typeof localStorage === 'undefined')
+        return DEFAULT_THEME;
+    return localStorage.getItem(THEME_STORAGE_KEY) ?? DEFAULT_THEME;
+}
+/**
+ * DaisyUI 主题配置字符串（用于 app.css）
+ *
+ * 注意：Tailwind CSS v4 要求主题在 CSS 中声明，无法通过 JS 动态注入
+ * 消费应用需要在 app.css 中添加：
+ *
+ * @plugin "daisyui" {
+ *   themes: light --default, dark --prefersdark, cupcake, bumblebee, ...
+ * }
+ */
+export const DAISYUI_THEMES_CONFIG = THEMES.map((t, i) => {
+    if (i === 0)
+        return `${t.id} --default`;
+    if (t.id === 'dark')
+        return `${t.id} --prefersdark`;
+    return t.id;
+}).join(',\n    ');

package/dist/toast.svelte.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @h-ai/ui — Toast 状态管理
+ *
+ * Toast 通知的状态管理，使用 Svelte 5 Runes
+ * @module toast.svelte
+ */
+import type { ToastProps } from './types.js';
+/**
+ * Toast 项
+ */
+export interface ToastItem extends ToastProps {
+    id: string;
+}
+/**
+ * Toast 状态
+ */
+declare class ToastState {
+    items: ToastItem[];
+    /** 自动关闭定时器 */
+    private timers;
+    /**
+     * 添加 Toast
+     */
+    add(props: Omit<ToastProps, 'onclose'>): string;
+    /**
+     * 移除 Toast
+     */
+    remove(id: string): void;
+    /**
+     * 清空所有 Toast
+     */
+    clear(): void;
+    /**
+     * 快捷方法
+     */
+    success(message: string, duration?: number): string;
+    error(message: string, duration?: number): string;
+    warning(message: string, duration?: number): string;
+    info(message: string, duration?: number): string;
+}
+/**
+ * Toast 单例
+ */
+export declare const toast: ToastState;
+export {};