@h-ai/ui 0.1.0-alpha.10

package/auto-import.js

@@ -0,0 +1,263 @@
+/**
+ * =============================================================================
+ * @h-ai/ui - 自动导入预处理器
+ * =============================================================================
+ * 目标：在 Svelte 编译阶段自动注入 @h-ai/ui 组件 import，避免页面显式引入。
+ * 说明：该预处理器会在 svelte-check 与 Vite 编译时生效。
+ * =============================================================================
+ */
+
+const UI_COMPONENTS = new Set([
+  // primitives
+  'Avatar',
+  'Badge',
+  'BareButton',
+  'BareInput',
+  'Button',
+  'Checkbox',
+  'IconButton',
+  'Input',
+  'Progress',
+  'Radio',
+  'Range',
+  'Rating',
+  'Select',
+  'Spinner',
+  'Switch',
+  'Tag',
+  'Textarea',
+  'ToggleCheckbox',
+  'ToggleInput',
+  'ToggleRadio',
+  // compounds
+  'Accordion',
+  'ActionSheet',
+  'Alert',
+  'AppBar',
+  'BottomNav',
+  'Breadcrumb',
+  'Calendar',
+  'Card',
+  'Combobox',
+  'Confirm',
+  'DataTable',
+  'DatePicker',
+  'Drawer',
+  'Dropdown',
+  'Empty',
+  'Form',
+  'FormField',
+  'InfiniteScroll',
+  'Modal',
+  'PageHeader',
+  'Pagination',
+  'Popover',
+  'PullRefresh',
+  'Result',
+  'SafeArea',
+  'Skeleton',
+  'Steps',
+  'SwipeCell',
+  'Tabs',
+  'TagInput',
+  'Timeline',
+  'ToastContainer',
+  'Tooltip',
+  // scenes - app
+  'FeedbackModal',
+  'LanguageSwitch',
+  'SettingsModal',
+  'ThemeSelector',
+  'ThemeToggle',
+  // scenes - iam
+  'ChangePasswordForm',
+  'ForgotPasswordForm',
+  'LoginForm',
+  'PasswordInput',
+  'PermGuard',
+  'RegisterForm',
+  'ResetPasswordForm',
+  'UserProfile',
+  // scenes - storage
+  'AvatarUpload',
+  'FileList',
+  'FileUpload',
+  'ImageUpload',
+  // scenes - crypto
+  'EncryptedInput',
+  'HashDisplay',
+  'SignatureDisplay',
+  // scenes - ai
+  'AiDocumentEditor',
+  'MarkdownRenderer',
+])
+
+const TAG_REGEX = /<([A-Z][A-Za-z0-9]*)\b/g
+const SCRIPT_REGEX = /<script\b([^>]*)>([\s\S]*?)<\/script>/g
+const UI_IMPORT_REGEX = /import\s*\{([^}]+)\}\s*from\s*['"]@h-ai\/ui['"];?/
+const IMPORT_ALIAS_SPLIT_REGEX = /\s+as\s+/i
+const WINDOWS_PATH_SEPARATOR_REGEX = /\\/g
+const MODULE_CONTEXT_ATTR_REGEX = /context\s*=\s*['"]module['"]/i
+const TYPE_IMPORT_PREFIX_REGEX = /^type\s+/
+
+function collectUsedComponents(content) {
+  const used = new Set()
+  for (const match of content.matchAll(TAG_REGEX)) {
+    const name = match[1]
+    if (UI_COMPONENTS.has(name)) {
+      used.add(name)
+    }
+  }
+  return used
+}
+
+function collectImportedNames(scriptContent) {
+  const imported = new Set()
+  const lines = scriptContent.split('\n')
+  let buffer = ''
+
+  const flushImport = (statement) => {
+    const fromIndex = statement.lastIndexOf(' from ')
+    if (fromIndex === -1)
+      return
+
+    let clause = statement.slice('import '.length, fromIndex).trim()
+    clause = clause.replace(TYPE_IMPORT_PREFIX_REGEX, '')
+    if (!clause)
+      return
+
+    // default + named: Button, { Input as UiInput }
+    if (clause.includes('{')) {
+      const [defaultPart, namedPart] = clause.split('{')
+      const defaultName = defaultPart.replace(',', '').trim()
+      if (defaultName)
+        imported.add(defaultName)
+
+      const raw = namedPart.replace('}', '')
+      for (const segment of raw.split(',')) {
+        const cleaned = segment.trim().replace(TYPE_IMPORT_PREFIX_REGEX, '')
+        if (!cleaned)
+          continue
+        const [original] = cleaned.split(IMPORT_ALIAS_SPLIT_REGEX)
+        if (original)
+          imported.add(original.trim())
+      }
+      return
+    }
+
+    // namespace import: * as name
+    if (clause.startsWith('* as ')) {
+      const name = clause.replace('* as ', '').trim()
+      if (name)
+        imported.add(name)
+      return
+    }
+
+    // default import
+    imported.add(clause)
+  }
+
+  for (const line of lines) {
+    const trimmed = line.trim()
+    if (!buffer) {
+      if (!trimmed.startsWith('import '))
+        continue
+      buffer = trimmed
+      if (trimmed.endsWith(';')) {
+        flushImport(buffer)
+        buffer = ''
+      }
+      continue
+    }
+
+    buffer += ` ${trimmed}`
+    if (trimmed.endsWith(';')) {
+      flushImport(buffer)
+      buffer = ''
+    }
+  }
+
+  if (buffer)
+    flushImport(buffer)
+
+  return imported
+}
+
+function mergeHaiUiImport(scriptContent, components) {
+  if (components.length === 0)
+    return scriptContent
+
+  const existingMatch = scriptContent.match(UI_IMPORT_REGEX)
+  if (existingMatch) {
+    const existing = existingMatch[1]
+      .split(',')
+      .map(name => name.trim())
+      .filter(Boolean)
+
+    const merged = [...existing, ...components.filter(name => !existing.includes(name))]
+    const updated = `import { ${merged.join(', ')} } from '@h-ai/ui'`
+    return scriptContent.replace(UI_IMPORT_REGEX, updated)
+  }
+
+  return `import { ${components.join(', ')} } from '@h-ai/ui'\n${scriptContent}`
+}
+
+function updateScriptBlock(scriptContent, usedComponents) {
+  const imported = collectImportedNames(scriptContent)
+  const missing = [...usedComponents].filter(name => !imported.has(name))
+  return mergeHaiUiImport(scriptContent, missing)
+}
+
+function autoImportHaiUi() {
+  return {
+    name: 'auto-import-hai-ui',
+    markup({ content, filename }) {
+      if (!filename || !filename.endsWith('.svelte')) {
+        return { code: content }
+      }
+
+      // 跳过 @h-ai/ui 包自身的文件，避免重复导入
+      const normalizedPath = filename.replace(WINDOWS_PATH_SEPARATOR_REGEX, '/')
+      if (normalizedPath.includes('/packages/ui/') || normalizedPath.includes('/@h-ai/ui/')) {
+        return { code: content }
+      }
+
+      const usedComponents = collectUsedComponents(content)
+      if (usedComponents.size === 0) {
+        return { code: content }
+      }
+
+      let lastIndex = 0
+      let updated = ''
+      let applied = false
+
+      for (const match of content.matchAll(SCRIPT_REGEX)) {
+        const [fullMatch, attrs, scriptContent] = match
+        const isModule = MODULE_CONTEXT_ATTR_REGEX.test(attrs)
+        const start = match.index ?? 0
+
+        updated += content.slice(lastIndex, start)
+        lastIndex = start + fullMatch.length
+
+        if (!applied && !isModule) {
+          const newScript = updateScriptBlock(scriptContent, usedComponents)
+          updated += `<script${attrs}>${newScript}</script>`
+          applied = true
+        }
+        else {
+          updated += fullMatch
+        }
+      }
+
+      if (!applied) {
+        const scriptBlock = `<script lang="ts">${updateScriptBlock('', usedComponents)}</script>\n`
+        return { code: scriptBlock + content }
+      }
+
+      updated += content.slice(lastIndex)
+      return { code: updated }
+    },
+  }
+}
+
+export { autoImportHaiUi }

package/dist/components/compounds/Accordion.svelte

@@ -0,0 +1,142 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Accordion 组件
+  =============================================================================
+  手风琴/折叠面板组件，支持单选/多选模式、多种样式变体
+
+  使用 Svelte 5 Runes ($props, $state, $derived)
+  使用 DaisyUI collapse 类
+  =============================================================================
+-->
+
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import type { AccordionItem } from './accordion-types.js'
+  import { cn } from '../../utils.js'
+  import ToggleCheckbox from '../primitives/ToggleCheckbox.svelte'
+  import ToggleRadio from '../primitives/ToggleRadio.svelte'
+
+  interface Props {
+    /** 折叠项数据 */
+    items: AccordionItem[]
+    /** 当前展开的项（单选模式为 string，多选模式为 string[]） */
+    value?: string | string[]
+    /** 是否允许多选 */
+    multiple?: boolean
+    /** 样式变体 */
+    variant?: 'default' | 'bordered' | 'shadow' | 'joined'
+    /** 图标样式 */
+    icon?: 'arrow' | 'plus' | 'none'
+    /** 是否有分隔线 */
+    divider?: boolean
+    /** 变化事件 */
+    onchange?: (value: string | string[]) => void
+    /** 自定义类名 */
+    class?: string
+    /** 自定义内容渲染 */
+    children?: Snippet<[AccordionItem]>
+  }
+
+  let {
+    items,
+    value = $bindable(undefined),
+    multiple = false,
+    variant = 'default',
+    icon = 'arrow',
+    divider = false,
+    onchange,
+    class: className = '',
+    children,
+  }: Props = $props()
+
+  const groupName = `accordion-${Math.random().toString(36).slice(2, 9)}`
+
+  function isExpanded(itemId: string): boolean {
+    if (value === undefined)
+      return false
+    if (multiple) {
+      return Array.isArray(value) && value.includes(itemId)
+    }
+    return value === itemId
+  }
+
+  function toggleItem(itemId: string) {
+    if (multiple) {
+      const current = Array.isArray(value) ? value : []
+      const newValue = current.includes(itemId)
+        ? current.filter(id => id !== itemId)
+        : [...current, itemId]
+      value = newValue
+      onchange?.(newValue)
+    }
+    else {
+      const newValue = value === itemId ? undefined : itemId
+      value = newValue as string
+      onchange?.(newValue as string)
+    }
+  }
+
+  const iconClass = $derived({
+    arrow: 'collapse-arrow',
+    plus: 'collapse-plus',
+    none: '',
+  }[icon] || 'collapse-arrow')
+
+  const containerClass = $derived(
+    cn(
+      variant === 'joined' && 'join join-vertical w-full',
+      className,
+    ),
+  )
+
+  function getItemClass(item: AccordionItem): string {
+    return cn(
+      'collapse',
+      iconClass,
+      variant === 'bordered' && 'collapse-bordered border border-base-300',
+      variant === 'shadow' && 'shadow-md',
+      variant === 'joined' && 'join-item border border-base-300',
+      variant === 'default' && 'bg-base-100',
+      divider && variant !== 'joined' && 'border-b border-base-300',
+      item.disabled && 'opacity-50 pointer-events-none',
+    )
+  }
+</script>
+
+<div class={containerClass}>
+  {#each items as item (item.id)}
+    <div class={getItemClass(item)}>
+      {#if multiple}
+        <!-- 多选模式 - 使用 checkbox -->
+        <ToggleCheckbox
+          checked={isExpanded(item.id)}
+          disabled={item.disabled}
+          onchange={() => toggleItem(item.id)}
+        />
+      {:else}
+        <!-- 单选模式 - 使用 radio -->
+        <ToggleRadio
+          name={groupName}
+          checked={isExpanded(item.id)}
+          disabled={item.disabled}
+          onchange={() => toggleItem(item.id)}
+        />
+      {/if}
+
+      <div class='collapse-title font-semibold flex items-center gap-2'>
+        {#if item.icon}
+          <span class='text-lg'>{item.icon}</span>
+        {/if}
+        {item.title}
+      </div>
+
+      <div class='collapse-content text-sm'>
+        {#if children}
+          {@render children(item)}
+        {:else if item.content}
+          <p>{item.content}</p>
+        {/if}
+      </div>
+    </div>
+  {/each}
+</div>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { AccordionItem } from './accordion-types.js';
+interface Props {
+    /** 折叠项数据 */
+    items: AccordionItem[];
+    /** 当前展开的项（单选模式为 string，多选模式为 string[]） */
+    value?: string | string[];
+    /** 是否允许多选 */
+    multiple?: boolean;
+    /** 样式变体 */
+    variant?: 'default' | 'bordered' | 'shadow' | 'joined';
+    /** 图标样式 */
+    icon?: 'arrow' | 'plus' | 'none';
+    /** 是否有分隔线 */
+    divider?: boolean;
+    /** 变化事件 */
+    onchange?: (value: string | string[]) => void;
+    /** 自定义类名 */
+    class?: string;
+    /** 自定义内容渲染 */
+    children?: Snippet<[AccordionItem]>;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/compounds/ActionSheet.svelte

@@ -0,0 +1,116 @@
+<!--
+  @h-ai/ui — ActionSheet（底部操作菜单）
+
+  用法：
+  <ActionSheet
+    open={showActions}
+    items={[
+      { id: 'edit', label: '编辑' },
+      { id: 'delete', label: '删除', destructive: true },
+    ]}
+    onselect={(id) => handleAction(id)}
+    onclose={() => showActions = false}
+  />
+-->
+<script lang='ts'>
+  import type { ActionSheetItem } from './action-sheet-types.js'
+  import { cn } from '../../utils.js'
+
+  // eslint-disable-next-line no-import-assign -- type re-export
+  export type { ActionSheetItem }
+
+  interface Props {
+    /** 是否显示 */
+    open?: boolean
+    /** 操作列表 */
+    items: ActionSheetItem[]
+    /** 标题 */
+    title?: string
+    /** 取消按钮文字 */
+    cancelText?: string
+    /** 选择回调 */
+    onselect?: (id: string) => void
+    /** 关闭回调 */
+    onclose?: () => void
+    /** 额外 CSS 类 */
+    class?: string
+  }
+
+  const {
+    open = false,
+    items,
+    title,
+    cancelText = 'Cancel',
+    onselect,
+    onclose,
+    class: className,
+  }: Props = $props()
+
+  function handleSelect(id: string) {
+    onselect?.(id)
+    onclose?.()
+  }
+</script>
+
+{#if open}
+  <!-- 遮罩层 -->
+  <div
+    class='fixed inset-0 bg-black/50 z-50 transition-opacity'
+    role='button'
+    tabindex='-1'
+    onclick={onclose}
+    onkeydown={e => e.key === 'Escape' && onclose?.()}
+  ></div>
+
+  <!-- 操作面板 -->
+  <div
+    class={cn(
+      'fixed bottom-0 left-0 right-0 z-50 bg-base-100 rounded-t-2xl hai-safe-bottom',
+      'animate-[slideUp_0.25s_ease-out]',
+      className,
+    )}
+  >
+    {#if title}
+      <div class='text-center text-sm text-base-content/60 py-3 border-b border-base-200'>
+        {title}
+      </div>
+    {/if}
+
+    <div class='py-1'>
+      {#each items as item (item.id)}
+        <button
+          type='button'
+          class={cn(
+            'w-full py-3.5 text-center text-base transition-colors',
+            'active:bg-base-200',
+            item.destructive && 'text-error',
+            item.disabled && 'opacity-50 cursor-not-allowed',
+            !item.destructive && !item.disabled && 'text-base-content',
+          )}
+          disabled={item.disabled}
+          onclick={() => handleSelect(item.id)}
+        >
+          {item.label}
+        </button>
+      {/each}
+    </div>
+
+    <!-- 取消按钮 -->
+    <div class='border-t-4 border-base-200'>
+      <button
+        type='button'
+        class='w-full py-3.5 text-center text-base font-medium text-base-content active:bg-base-200'
+        onclick={onclose}
+      >
+        {cancelText}
+      </button>
+    </div>
+  </div>
+{/if}
+
+<style>
+  @keyframes slideUp {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+</style>

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

@@ -0,0 +1,22 @@
+import type { ActionSheetItem } from './action-sheet-types.js';
+interface Props {
+    /** 是否显示 */
+    open?: boolean;
+    /** 操作列表 */
+    items: ActionSheetItem[];
+    /** 标题 */
+    title?: string;
+    /** 取消按钮文字 */
+    cancelText?: string;
+    /** 选择回调 */
+    onselect?: (id: string) => void;
+    /** 关闭回调 */
+    onclose?: () => void;
+    /** 额外 CSS 类 */
+    class?: string;
+}
+declare const ActionSheet: import("svelte").Component<Props, {
+    ActionSheetItem: typeof ActionSheetItem;
+}, "">;
+type ActionSheet = ReturnType<typeof ActionSheet>;
+export default ActionSheet;

package/dist/components/compounds/Alert.svelte

@@ -0,0 +1,67 @@
+<!--
+  @component Alert
+  警告框组件，使用 tabler icon 替代 emoji，更精致。
+-->
+<script lang='ts'>
+  import type { AlertProps } from '../../types.js'
+  import { uiM } from '../../messages.js'
+  import { cn, getAlertVariantClass } from '../../utils.js'
+  import IconButton from '../primitives/IconButton.svelte'
+
+  const {
+    variant = 'info',
+    title = '',
+    dismissible = false,
+    class: className = '',
+    onclose,
+    children,
+  }: AlertProps = $props()
+
+  let visible = $state(true)
+
+  const alertClass = $derived(
+    cn(
+      'alert',
+      getAlertVariantClass(variant),
+      className,
+    ),
+  )
+
+  // 图标映射：使用 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]',
+  }
+
+  function handleClose() {
+    visible = false
+    onclose?.()
+  }
+</script>
+
+{#if visible}
+  <div class={alertClass} role='alert'>
+    <span class='{iconMap[variant] ?? iconMap.info} size-5 shrink-0'></span>
+
+    <div>
+      {#if title}
+        <h3 class='font-semibold text-sm'>{title}</h3>
+      {/if}
+      {#if children}
+        <div class='text-sm'>
+          {@render children()}
+        </div>
+      {/if}
+    </div>
+
+    {#if dismissible}
+      <IconButton size='sm' variant='ghost' label={uiM('common_close')} onclick={handleClose}>
+        {#snippet children()}
+          <span class='icon-[tabler--x] size-4'></span>
+        {/snippet}
+      </IconButton>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { AlertProps } from '../../types.js';
+/**
+ * Alert
+ * 警告框组件，使用 tabler icon 替代 emoji，更精致。
+ */
+declare const Alert: import("svelte").Component<AlertProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;