@h-ai/ui 0.1.0-alpha5

package/dist/components/compounds/InfiniteScroll.svelte

@@ -0,0 +1,82 @@
+<!--
+  @h-ai/ui — InfiniteScroll（无限滚动 / 上拉加载更多）
+
+  用法：
+  <InfiniteScroll onloadmore={async () => await loadNextPage()} hasMore={hasMoreData}>
+    {#each items as item}
+      <div>{item.name}</div>
+    {/each}
+  </InfiniteScroll>
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import { cn } from '../../utils.js'
+
+  interface Props {
+    /** 加载更多回调 */
+    onloadmore?: () => Promise<void>
+    /** 是否还有更多数据 */
+    hasMore?: boolean
+    /** 触发距离（距底部 px） */
+    threshold?: number
+    /** 是否禁用 */
+    disabled?: boolean
+    /** 加载中文本 */
+    loadingText?: string
+    /** 无更多数据文本 */
+    noMoreText?: string
+    /** 额外 CSS 类 */
+    class?: string
+    /** 列表内容 */
+    children: Snippet
+  }
+
+  const {
+    onloadmore,
+    hasMore = true,
+    threshold = 100,
+    disabled = false,
+    loadingText = 'Loading...',
+    noMoreText = 'No more data',
+    class: className,
+    children,
+  }: Props = $props()
+
+  let loading = $state(false)
+  let containerRef: HTMLDivElement | undefined = $state()
+
+  async function checkAndLoad() {
+    if (loading || disabled || !hasMore || !containerRef || !onloadmore)
+      return
+
+    const { scrollTop, scrollHeight, clientHeight } = containerRef
+    if (scrollHeight - scrollTop - clientHeight < threshold) {
+      loading = true
+      try {
+        await onloadmore()
+      }
+      finally {
+        loading = false
+      }
+    }
+  }
+</script>
+
+<div
+  bind:this={containerRef}
+  class={cn('overflow-y-auto', className)}
+  onscroll={checkAndLoad}
+  role='feed'
+>
+  {@render children()}
+
+  <!-- 底部状态 -->
+  <div class='flex items-center justify-center py-4 text-sm text-base-content/50'>
+    {#if loading}
+      <span class='loading loading-spinner loading-sm mr-2'></span>
+      {loadingText}
+    {:else if !hasMore}
+      {noMoreText}
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** 加载更多回调 */
+    onloadmore?: () => Promise<void>;
+    /** 是否还有更多数据 */
+    hasMore?: boolean;
+    /** 触发距离（距底部 px） */
+    threshold?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 加载中文本 */
+    loadingText?: string;
+    /** 无更多数据文本 */
+    noMoreText?: string;
+    /** 额外 CSS 类 */
+    class?: string;
+    /** 列表内容 */
+    children: Snippet;
+}
+declare const InfiniteScroll: import("svelte").Component<Props, {}, "">;
+type InfiniteScroll = ReturnType<typeof InfiniteScroll>;
+export default InfiniteScroll;

package/dist/components/compounds/Modal.svelte

@@ -0,0 +1,123 @@
+<!--
+  @component Modal
+  模态框组件，支持 backdrop-blur 和 scale-in 动画。
+-->
+<script lang='ts'>
+  import type { ModalProps } from '../../types.js'
+  import { uiM } from '../../messages.js'
+  import { cn } from '../../utils.js'
+  import IconButton from '../primitives/IconButton.svelte'
+
+  let {
+    open = $bindable(false),
+    title = '',
+    size = 'md',
+    closeOnBackdrop = true,
+    closeOnEscape = true,
+    showClose = true,
+    class: className = '',
+    onclose,
+    header,
+    footer,
+    children,
+  }: ModalProps = $props()
+
+  const sizeMap: Record<string, string> = {
+    'xs': 'max-w-xs',
+    'sm': 'max-w-sm',
+    'md': 'max-w-md',
+    'lg': 'max-w-lg',
+    'xl': 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    '3xl': 'max-w-3xl',
+    '4xl': 'max-w-4xl',
+    'full': 'max-w-full h-full',
+  }
+
+  const modalBoxClass = $derived(
+    cn(
+      'modal-box border border-base-content/6 shadow-xl',
+      'animate-[hai-scale-in_0.2s_cubic-bezier(0.16,1,0.3,1)]',
+      sizeMap[size],
+      className,
+    ),
+  )
+
+  function handleClose() {
+    open = false
+    onclose?.()
+  }
+
+  function handleBackdropClick() {
+    if (closeOnBackdrop) {
+      handleClose()
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (closeOnEscape && e.key === 'Escape') {
+      handleClose()
+    }
+  }
+
+  // ESC 键处理
+  $effect(() => {
+    if (open) {
+      document.addEventListener('keydown', handleKeydown)
+      return () => document.removeEventListener('keydown', handleKeydown)
+    }
+    return undefined
+  })
+</script>
+
+<dialog class='modal backdrop-blur-xs' class:modal-open={open}>
+  <div class={modalBoxClass}>
+    <!-- 头部：标题 + 关闭按钮 -->
+    <div class='flex items-start justify-between gap-4'>
+      {#if header}
+        <div class='font-semibold text-base flex-1'>
+          {@render header()}
+        </div>
+      {:else if title}
+        <h3 class='font-semibold text-base flex-1'>{title}</h3>
+      {:else}
+        <div class='flex-1'></div>
+      {/if}
+
+      {#if showClose}
+        <IconButton
+          size='sm'
+          variant='ghost'
+          label={uiM('common_close')}
+          onclick={handleClose}
+          class='-mt-1 -mr-2'
+        >
+          {#snippet children()}
+            <span class='icon-[tabler--x] size-4.5'></span>
+          {/snippet}
+        </IconButton>
+      {/if}
+    </div>
+
+    <div class='py-4'>
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+
+    {#if footer}
+      <div class='modal-action'>
+        {@render footer()}
+      </div>
+    {/if}
+  </div>
+
+  <button
+    type='button'
+    class='modal-backdrop'
+    aria-label={uiM('modal_close')}
+    onclick={handleBackdropClick}
+  >
+    {uiM('common_close')}
+  </button>
+</dialog>

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

@@ -0,0 +1,8 @@
+import type { ModalProps } from '../../types.js';
+/**
+ * Modal
+ * 模态框组件，支持 backdrop-blur 和 scale-in 动画。
+ */
+declare const Modal: import("svelte").Component<ModalProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/compounds/PageHeader.svelte

@@ -0,0 +1,44 @@
+<!--
+  @component PageHeader
+  页面头部组件，包含标题、描述和操作按钮区域。
+
+  @prop {string} title - 页面标题
+  @prop {string} description - 页面描述
+  @prop {Snippet} actions - 右侧操作按钮插槽
+
+  @example
+  <PageHeader title="用户管理" description="管理系统用户">
+    {#snippet actions()}
+      <Button onclick={createUser}>
+        <span class='icon-[tabler--plus] size-4'></span>
+        新建用户
+      </Button>
+    {/snippet}
+  </PageHeader>
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    title: string
+    description?: string
+    actions?: Snippet
+    class?: string
+  }
+
+  const { title, description, actions, class: className = '' }: Props = $props()
+</script>
+
+<div class='flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5 {className}'>
+  <div>
+    <h1 class='text-xl font-semibold tracking-tight'>{title}</h1>
+    {#if description}
+      <p class='text-sm text-base-content/45 mt-0.5'>{description}</p>
+    {/if}
+  </div>
+  {#if actions}
+    <div class='flex items-center gap-2'>
+      {@render actions()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    class?: string;
+}
+/**
+ * PageHeader
+ * 页面头部组件，包含标题、描述和操作按钮区域。
+ *
+ * @prop {string} title - 页面标题
+ * @prop {string} description - 页面描述
+ * @prop {Snippet} actions - 右侧操作按钮插槽
+ *
+ * @example
+ * <PageHeader title="用户管理" description="管理系统用户">
+ *   {#snippet actions()}
+ *     <Button onclick={createUser}>
+ *       <span class='icon-[tabler--plus] size-4'></span>
+ *       新建用户
+ *     </Button>
+ *   {/snippet}
+ * </PageHeader>
+ */
+declare const PageHeader: import("svelte").Component<Props, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/compounds/Pagination.svelte

@@ -0,0 +1,157 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Pagination 组件
+  =============================================================================
+  分页组件
+
+  使用 Svelte 5 Runes ($props, $derived, $bindable)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { PaginationProps } from '../../types.js'
+  import { uiM } from '../../messages.js'
+  import { cn, getSizeClass } from '../../utils.js'
+  import BareButton from '../primitives/BareButton.svelte'
+
+  import Input from '../primitives/Input.svelte'
+
+  let {
+    page = $bindable(1),
+    total,
+    pageSize = 10,
+    size = 'md',
+    showTotal = true,
+    showJumper = false,
+    labels = {},
+    class: className = '',
+    onchange,
+  }: PaginationProps = $props()
+
+  // labels 优先，缺省回退到内置消息 uiM(...)
+
+  // 计算总页数
+  const totalPages = $derived(Math.ceil(total / pageSize))
+
+  // 生成页码列表
+  const pages = $derived(() => {
+    const result: (number | string)[] = []
+    const maxVisible = 7
+
+    if (totalPages <= maxVisible) {
+      for (let i = 1; i <= totalPages; i++) {
+        result.push(i)
+      }
+    }
+    else {
+      // 始终显示第一页
+      result.push(1)
+
+      if (page > 3) {
+        result.push('...')
+      }
+
+      // 中间页码
+      const start = Math.max(2, page - 1)
+      const end = Math.min(totalPages - 1, page + 1)
+
+      for (let i = start; i <= end; i++) {
+        result.push(i)
+      }
+
+      if (page < totalPages - 2) {
+        result.push('...')
+      }
+
+      // 始终显示最后一页
+      result.push(totalPages)
+    }
+
+    return result
+  })
+
+  const joinClass = $derived(
+    cn(
+      'join',
+      className,
+    ),
+  )
+
+  const btnClass = $derived(
+    cn(
+      'join-item btn',
+      getSizeClass(size),
+    ),
+  )
+
+  function goToPage(p: number) {
+    if (p >= 1 && p <= totalPages && p !== page) {
+      page = p
+      onchange?.(p)
+    }
+  }
+
+  let jumperValue = $state('')
+
+  function handleJump() {
+    const p = Number.parseInt(jumperValue, 10)
+    if (!Number.isNaN(p)) {
+      goToPage(p)
+      jumperValue = ''
+    }
+  }
+</script>
+
+<div class='flex items-center gap-4'>
+  {#if showTotal}
+    <span class='text-sm text-base-content/70'>
+      {(labels.total ?? uiM('pagination_total')).replace('{count}', String(total))}
+    </span>
+  {/if}
+
+  <div class={joinClass}>
+    <BareButton
+      class={btnClass}
+      disabled={page === 1}
+      onclick={() => goToPage(page - 1)}
+    >
+      «
+    </BareButton>
+
+    {#each pages() as p}
+      {#if typeof p === 'number'}
+        <BareButton
+          class={cn(btnClass, page === p && 'btn-active')}
+          onclick={() => goToPage(p)}
+        >
+          {p}
+        </BareButton>
+      {:else}
+        <BareButton class={cn(btnClass, 'btn-disabled')} disabled>...</BareButton>
+      {/if}
+    {/each}
+
+    <BareButton
+      class={btnClass}
+      disabled={page === totalPages}
+      onclick={() => goToPage(page + 1)}
+    >
+      »
+    </BareButton>
+  </div>
+
+  {#if showJumper}
+    <div class='flex items-center gap-2'>
+      <span class='text-sm'>{labels.jumpTo ?? uiM('pagination_jump_to')}</span>
+      <Input
+        type='number'
+        size='sm'
+        class='w-16'
+        min={1}
+        max={totalPages}
+        bind:value={jumperValue}
+        onkeydown={(e: KeyboardEvent & { currentTarget: HTMLInputElement }) => e.key === 'Enter' && handleJump()}
+      />
+      <span class='text-sm'>{labels.page ?? uiM('pagination_page')}</span>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { PaginationProps } from '../../types.js';
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/compounds/Popover.svelte

@@ -0,0 +1,137 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Popover 组件
+  =============================================================================
+  弹出层组件
+
+  使用 Svelte 5 Runes ($props, $state, $effect)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { PopoverProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+
+  let {
+    open = $bindable(false),
+    position = 'bottom',
+    trigger = 'click',
+    offset = 8,
+    class: className = '',
+    onopen,
+    onclose,
+    triggerContent,
+    children,
+  }: PopoverProps = $props()
+
+  let triggerElement = $state<HTMLDivElement | null>(null)
+  let popoverElement = $state<HTMLDivElement | null>(null)
+
+  const positionClass = $derived({
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+  }[position])
+
+  const arrowClass = $derived({
+    top: 'top-full left-1/2 -translate-x-1/2 border-t-base-100 border-l-transparent border-r-transparent border-b-transparent',
+    bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-base-100 border-l-transparent border-r-transparent border-t-transparent',
+    left: 'left-full top-1/2 -translate-y-1/2 border-l-base-100 border-t-transparent border-r-transparent border-b-transparent',
+    right: 'right-full top-1/2 -translate-y-1/2 border-r-base-100 border-t-transparent border-l-transparent border-b-transparent',
+  }[position])
+
+  function handleOpen() {
+    open = true
+    onopen?.()
+  }
+
+  function handleClose() {
+    open = false
+    onclose?.()
+  }
+
+  function handleTriggerClick() {
+    if (trigger === 'click') {
+      if (open) {
+        handleClose()
+      }
+      else {
+        handleOpen()
+      }
+    }
+  }
+
+  function handleMouseEnter() {
+    if (trigger === 'hover') {
+      handleOpen()
+    }
+  }
+
+  function handleMouseLeave() {
+    if (trigger === 'hover') {
+      handleClose()
+    }
+  }
+
+  function handleClickOutside(e: MouseEvent) {
+    if (
+      open
+      && triggerElement
+      && popoverElement
+      && !triggerElement.contains(e.target as Node)
+      && !popoverElement.contains(e.target as Node)
+    ) {
+      handleClose()
+    }
+  }
+
+  $effect(() => {
+    if (open) {
+      document.addEventListener('click', handleClickOutside)
+    }
+    return () => {
+      document.removeEventListener('click', handleClickOutside)
+    }
+  })
+</script>
+
+<div
+  class={cn('relative inline-block', className)}
+  role='group'
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+>
+  <!-- 触发器 -->
+  <div
+    bind:this={triggerElement}
+    class='inline-block'
+    onclick={handleTriggerClick}
+    role='button'
+    tabindex='0'
+    onkeydown={e => e.key === 'Enter' && handleTriggerClick()}
+  >
+    {#if triggerContent}
+      {@render triggerContent()}
+    {/if}
+  </div>
+
+  <!-- 弹出内容 -->
+  {#if open}
+    <div
+      bind:this={popoverElement}
+      class={cn(
+        'absolute z-50 bg-base-100 rounded-box shadow-lg border border-base-200 p-4',
+        positionClass,
+      )}
+      style='--offset: {offset}px'
+      role='dialog'
+    >
+      <!-- 箭头 -->
+      <div class={cn('absolute w-0 h-0 border-8', arrowClass)}></div>
+
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { PopoverProps } from '../../types.js';
+declare const Popover: import("svelte").Component<PopoverProps, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;