@h-ai/ui 0.1.0-alpha.25 → 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\//] },
 })
 ```
@@ -151,7 +159,7 @@ components/
 
 | 组件      | 描述   | 主要属性                                                |
 | --------- | ------ | ------------------------------------------------------- |
-| `Modal`   | 模态框 | `open`, `title`, `size`, `closeOnBackdrop`, `showClose` |
+| `Modal`   | 模态框 | `open`, `title`, `size`, `radius`, `bodyOverflow`, `showClose` |
 | `Drawer`  | 抽屉   | `open`, `position`, `title`, `size`                     |
 | `Confirm` | 确认框 | `open`, `title`, `message`, `variant`, `onconfirm`      |
 | `Popover` | 弹出层 | `open`, `position`, `trigger`, `offset`                 |
@@ -161,7 +169,7 @@ components/
 | 组件        | 描述     | 主要属性                                 |
 | ----------- | -------- | ---------------------------------------- |
 | `Card`      | 卡片容器 | `title`, `bordered`, `shadow`, `padding` |
-| `DataTable` | 数据表格 | `data`, `columns`, `keyField`, `loading` |
+| `DataTable` | 数据表格 | `data`, `columns`, `keyField`, `loading`, `sortKey`, `sortDir`, `onsort`（列 `sortable` 可排序） |
 | `Accordion` | 手风琴   | `items: AccordionItem[]`                 |
 | `Timeline`  | 时间线   | `items: TimelineItem[]`                  |
 
@@ -192,7 +200,7 @@ components/
 | 组件         | 描述     | 主要属性                                     |
 | ------------ | -------- | -------------------------------------------- |
 | `Tabs`       | 标签页   | `items`, `active`, `type`, `size`            |
-| `Pagination` | 分页     | `page`, `total`, `pageSize`, `showTotal`     |
+| `Pagination` | 分页（统一 table 风格） | `page`, `total`, `pageSize`, `showTotal`, `showJumper`, `showSizeChanger` |
 | `Breadcrumb` | 面包屑   | `items`, `separator`                         |
 | `Steps`      | 步骤条   | `items`, `current`, `direction`, `clickable` |
 | `Dropdown`   | 下拉菜单 | `items`, `trigger`, `position`               |
@@ -212,23 +220,25 @@ components/
 | ------------ | -------- | ------------------------------------------- |
 | `PageHeader` | 页面头部 | `title`, `description`，支持 `actions` 插槽 |
 
-### 场景组件 Scenes（30 个）
+### 场景组件 Scenes（33 个）
 
-#### App 应用级（6 个）
+#### App 应用级（7 个）
 
 | 组件             | 描述             | 主要属性           |
 | ---------------- | ---------------- | ------------------ |
 | `FeedbackModal`  | 反馈模态框       | `open`, `onsubmit` |
 | `SettingsModal`  | 设置模态框       | `open`, `onclose`  |
+| `SettingsLayout` | 设置页布局（分区导航 + 内容区） | `title`, `description`, `sections`, `active`, `onselect` |
 | `LanguageSwitch` | 语言切换         | 无需 Props         |
 | `ThemeColorPicker` | 主题色选择器   | `value`, `presets`, `onchange` |
 | `ThemeSelector`  | 完整主题选择面板 | 无需 Props         |
 | `ThemeToggle`    | 明/暗主题切换    | 无需 Props         |
 
-#### IAM 身份认证（8 个）
+#### IAM 身份认证（9 个）
 
 | 组件                 | 描述       | 主要属性                                              |
 | -------------------- | ---------- | ----------------------------------------------------- |
+| `AuthShell`          | 认证页布局（居中卡片 / 左右分栏） | `variant`, `title`, `subtitle`, `brandTitle`, `brandText`, `illustration`, `description`, `highlights` |
 | `LoginForm`          | 登录表单   | `loading`, `errors`, `showRememberMe`, `onsubmit`     |
 | `RegisterForm`       | 注册表单   | `loading`, `errors`, `fields`, `onsubmit`             |
 | `ForgotPasswordForm` | 忘记密码   | `mode`, `loading`, `errors`, `onsubmit`               |
@@ -275,11 +285,19 @@ components/
 | 组件                 | 描述         | 主要属性 / 能力 |
 | -------------------- | ------------ | ---------------- |
 | `CrudPage`           | CRUD 主页面  | `crud`, `data`, `permissions`, `form`, `pagination`, `density`, `nav` |
-| `CrudFilterBar`      | 过滤工具栏   | `filterFields`, `searchValue`, `onsearch`, `onfilterchange` |
+| `CrudFilterBar`      | 过滤工具栏（搜索 + 多类型过滤 + 重置） | `filterFields`, `searchValue`, `onsearch`, `onfilterchange`, `onreset` |
 | `CrudDetailPanel`    | 详情面板（抽屉/弹窗） | `open`, `item`, `fields`, `variant`, `drawerWidth`, `modalSize` |
 | `CrudEditPanel`      | 编辑面板（抽屉/弹窗） | `open`, `fields`, `variant`, `drawerWidth`, `modalSize`, `onsubmit` |
 | `CrudDeleteConfirm`  | 删除确认框   | `open`, `loading`, `onconfirm` |
 
+> 列表列头默认支持点击排序（`DataTable` 内置客户端排序，受控模式可通过 `sortKey`/`sortDir`/`onsort` 接管为服务端排序）；存在搜索/过滤条件时筛选栏显示「重置」按钮。过滤工具栏支持常用控件：`select`、`boolean`、`number`、`date`、`date-range`、`text`。分页栏统一为 shadcn 风格（总数 / 每页 / 第 X / Y 页 / 首末翻页 / 跳转到）。
+
+#### 错误页场景（1 个）
+
+| 组件        | 描述         | 主要属性 / 能力 |
+| ----------- | ------------ | ---------------- |
+| `ErrorPage` | 通用错误页（内置 401/403/404/500/503 预设） | `status`, `code`, `title`, `description`, `homeUrl`, `onhome`, `onback` |
+
 > `CrudPage` 通过 `form` 配置新建/编辑的展示形式：
 >
 > - `form.variant`：`'drawer'`（抽屉，默认）或 `'modal'`（弹出窗口）。
@@ -378,6 +396,8 @@ components/
 <ToastContainer />
 ```
 
+`Modal` 不传 `title` / `header` 时会保留右上角关闭按钮，但不额外渲染整条头部。需要调整圆角时可传 `radius="1.4rem"`，内部下拉等浮层需要越界显示时可传 `bodyOverflow="visible"`。
+
 ### 声明式 CRUD 页面（CrudPage）
 
 ```svelte

package/auto-import.d.ts

@@ -76,12 +76,14 @@ declare global {
   // scenes - app
   const FeedbackModal: typeof import('@h-ai/ui')['FeedbackModal']
   const LanguageSwitch: typeof import('@h-ai/ui')['LanguageSwitch']
+  const SettingsLayout: typeof import('@h-ai/ui')['SettingsLayout']
   const SettingsModal: typeof import('@h-ai/ui')['SettingsModal']
   const ThemeColorPicker: typeof import('@h-ai/ui')['ThemeColorPicker']
   const ThemeSelector: typeof import('@h-ai/ui')['ThemeSelector']
   const ThemeToggle: typeof import('@h-ai/ui')['ThemeToggle']
 
   // scenes - iam
+  const AuthShell: typeof import('@h-ai/ui')['AuthShell']
   const ChangePasswordForm: typeof import('@h-ai/ui')['ChangePasswordForm']
   const ForgotPasswordForm: typeof import('@h-ai/ui')['ForgotPasswordForm']
   const LoginForm: typeof import('@h-ai/ui')['LoginForm']
@@ -114,6 +116,9 @@ declare global {
   const CrudEditPanel: typeof import('@h-ai/ui')['CrudEditPanel']
   const CrudFilterBar: typeof import('@h-ai/ui')['CrudFilterBar']
   const CrudPage: typeof import('@h-ai/ui')['CrudPage']
+
+  // scenes - error
+  const ErrorPage: typeof import('@h-ai/ui')['ErrorPage']
 }
 
 export {}

package/auto-import.js

@@ -66,11 +66,13 @@ const UI_COMPONENTS = new Set([
   // scenes - app
   'FeedbackModal',
   'LanguageSwitch',
+  'SettingsLayout',
   'SettingsModal',
   'ThemeColorPicker',
   'ThemeSelector',
   'ThemeToggle',
   // scenes - iam
+  'AuthShell',
   'ChangePasswordForm',
   'ForgotPasswordForm',
   'LoginForm',
@@ -99,6 +101,8 @@ const UI_COMPONENTS = new Set([
   'CrudEditPanel',
   'CrudFilterBar',
   'CrudPage',
+  // scenes - error
+  'ErrorPage',
 ])
 
 const TAG_REGEX = /<([A-Z][A-Za-z0-9]*)\b/g

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

@@ -41,10 +41,13 @@
     striped = true,
     hoverable = true,
     density = 'normal',
+    sortKey,
+    sortDir,
+    onsort,
     class: className = '',
   }: {
     data: T[]
-    columns: { key: keyof T | string, label: string, width?: string, align?: 'left' | 'center' | 'right', render?: (item: T) => string }[]
+    columns: { key: keyof T | string, label: string, width?: string, align?: 'left' | 'center' | 'right', sortable?: boolean, render?: (item: T) => string }[]
     keyField: keyof T
     actions?: Snippet<[T]>
     empty?: Snippet
@@ -52,10 +55,66 @@
     striped?: boolean
     hoverable?: boolean
     density?: 'normal' | 'compact'
+    /** 受控排序字段（提供 onsort 时由外部驱动，通常用于服务端排序） */
+    sortKey?: string
+    /** 受控排序方向 */
+    sortDir?: 'asc' | 'desc' | null
+    /** 排序回调；提供时为受控模式（不再对 data 做本地排序），否则组件内部对当前数据做客户端排序 */
+    onsort?: (key: string, dir: 'asc' | 'desc') => void
     class?: string
   } = $props()
 
-  type Column = { key: keyof T | string, label: string, width?: string, align?: 'left' | 'center' | 'right', render?: (item: T) => string }
+  type Column = { key: keyof T | string, label: string, width?: string, align?: 'left' | 'center' | 'right', sortable?: boolean, render?: (item: T) => string }
+
+  // ─── 排序状态 ───
+  const controlled = $derived(typeof onsort === 'function')
+  // 非受控模式下的内部排序状态
+  let localSortKey = $state<string | null>(null)
+  let localSortDir = $state<'asc' | 'desc'>('asc')
+
+  const activeSortKey = $derived(controlled ? (sortKey ?? null) : localSortKey)
+  const activeSortDir = $derived<'asc' | 'desc' | null>(controlled ? (sortDir ?? null) : (localSortKey ? localSortDir : null))
+
+  function toggleSort(col: Column) {
+    if (!col.sortable)
+      return
+    const key = String(col.key)
+    const nextDir: 'asc' | 'desc' = activeSortKey === key && activeSortDir === 'asc' ? 'desc' : 'asc'
+    if (controlled) {
+      onsort?.(key, nextDir)
+      return
+    }
+    localSortKey = key
+    localSortDir = nextDir
+  }
+
+  // 非受控模式：对当前数据做客户端排序（受控模式直接使用外部已排序数据）
+  const sortedData = $derived.by(() => {
+    if (controlled || !localSortKey)
+      return data
+    const key = localSortKey
+    const dir = localSortDir
+    const copy = [...data]
+    copy.sort((a, b) => {
+      const av = (a as Record<string, unknown>)[key]
+      const bv = (b as Record<string, unknown>)[key]
+      if (av === bv)
+        return 0
+      if (av === null || av === undefined)
+        return 1
+      if (bv === null || bv === undefined)
+        return -1
+      let cmp: number
+      if (typeof av === 'number' && typeof bv === 'number') {
+        cmp = av - bv
+      }
+      else {
+        cmp = String(av).localeCompare(String(bv), undefined, { numeric: true })
+      }
+      return dir === 'asc' ? cmp : -cmp
+    })
+    return copy
+  })
 
   const tableClass = $derived(
     density === 'compact'
@@ -108,11 +167,29 @@
     <thead>
       <tr class={headerRowClass}>
         {#each columns as col (String(col.key))}
+          {@const isSorted = activeSortKey === String(col.key)}
           <th
             style={col.width ? `width: ${col.width}` : ''}
             class='{getAlignClass(col.align)} font-medium'
           >
-            {col.label}
+            {#if col.sortable}
+              <button
+                type='button'
+                class='group inline-flex select-none items-center gap-1 rounded-md px-1.5 py-0.5 -mx-1.5 font-medium transition-colors hover:bg-base-content/5 {isSorted ? 'text-base-content' : ''}'
+                onclick={() => toggleSort(col)}
+              >
+                <span>{col.label}</span>
+                {#if isSorted && activeSortDir === 'asc'}
+                  <span class='icon-[tabler--arrow-narrow-up] size-3.5 text-base-content/70'></span>
+                {:else if isSorted && activeSortDir === 'desc'}
+                  <span class='icon-[tabler--arrow-narrow-down] size-3.5 text-base-content/70'></span>
+                {:else}
+                  <span class='icon-[tabler--arrows-sort] size-3.5 text-base-content/30 group-hover:text-base-content/50'></span>
+                {/if}
+              </button>
+            {:else}
+              {col.label}
+            {/if}
           </th>
         {/each}
         {#if actions}
@@ -138,7 +215,7 @@
           </td>
         </tr>
       {:else}
-        {#each data as item (item[keyField])}
+        {#each sortedData as item (item[keyField])}
           <tr class={rowClass}>
             {#each columns as col (String(col.key))}
               <td class={getAlignClass(col.align)}>{getValue(item, col)}</td>

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

@@ -7,6 +7,7 @@ declare function $$render<T>(): {
             label: string;
             width?: string;
             align?: "left" | "center" | "right";
+            sortable?: boolean;
             render?: (item: T) => string;
         }[];
         keyField: keyof T;
@@ -16,6 +17,12 @@ declare function $$render<T>(): {
         striped?: boolean;
         hoverable?: boolean;
         density?: "normal" | "compact";
+        /** 受控排序字段（提供 onsort 时由外部驱动，通常用于服务端排序） */
+        sortKey?: string;
+        /** 受控排序方向 */
+        sortDir?: "asc" | "desc" | null;
+        /** 排序回调；提供时为受控模式（不再对 data 做本地排序），否则组件内部对当前数据做客户端排序 */
+        onsort?: (key: string, dir: "asc" | "desc") => void;
         class?: string;
     };
     exports: {};

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

@@ -11,6 +11,7 @@
     open = $bindable(false),
     title = '',
     size = 'md',
+    radius = '1rem',
     closeOnBackdrop = true,
     closeOnEscape = true,
     showClose = true,
@@ -29,8 +30,10 @@
   // 只有调用 `showModal()` 进入 top-layer 后，弹框才不会被父级布局和 overflow 裁剪。
   let modalElement: HTMLDialogElement | undefined = $state()
 
-  // 只要存在标题、自定义 header 或关闭按钮，就渲染顶部栏位，保证弹框结构稳定。
-  const hasHeader = $derived(Boolean(header || title || showClose))
+  // 标题区仅在显式提供标题或自定义 header 时出现；
+  // 仅需关闭按钮的场景改为右上角悬浮按钮，避免业务侧额外占一整行头部。
+  const hasHeader = $derived(Boolean(header || title))
+  const hasFloatingClose = $derived(showClose && !hasHeader)
   const sizeMap: Record<string, string> = {
     'xs': 'hai-modal__panel--xs',
     'sm': 'hai-modal__panel--sm',
@@ -55,12 +58,21 @@
       styles.push(`--hai-modal-height: ${height.trim()}`)
     }
 
+    if (typeof radius === 'string' && radius.trim().length > 0) {
+      styles.push(`--hai-modal-radius: ${radius.trim()}`)
+    }
+
+    if (bodyOverflow === 'visible') {
+      styles.push('--hai-modal-panel-overflow: visible')
+    }
+
     return styles.length > 0 ? styles.join('; ') : undefined
   })
 
   const modalBoxClass = $derived(
     cn(
       'hai-modal__panel flex min-h-0 flex-col',
+      'relative',
       'bg-base-100 p-0',
       sizeMap[size],
       className,
@@ -138,6 +150,25 @@
     onkeydown={handleViewportKeydown}
   >
     <div class={modalBoxClass} style={panelStyle}>
+      {#if hasFloatingClose}
+        <button
+          type='button'
+          class='hai-modal__close hai-modal__close--floating'
+          aria-label={uiM('common_close')}
+          onclick={handleClose}
+        >
+          <svg viewBox='0 0 24 24' class='hai-modal__close-icon' aria-hidden='true'>
+            <path
+              d='M6 6l12 12M18 6L6 18'
+              fill='none'
+              stroke='currentColor'
+              stroke-width='1.9'
+              stroke-linecap='round'
+            ></path>
+          </svg>
+        </button>
+      {/if}
+
       {#if hasHeader}
         <!-- 顶部栏单独固定，保证滚动时标题和关闭操作始终可见。 -->
         <div class='hai-modal__header flex flex-none items-start justify-between gap-4 px-6 py-5 sm:px-7'>
@@ -225,8 +256,8 @@
     height: var(--hai-modal-height, auto);
     max-height: calc(100vh - clamp(2rem, 5.2vw, 4rem));
     max-height: calc(100dvh - clamp(2rem, 5.2vw, 4rem));
-    border-radius: 1.4rem;
-    overflow: hidden;
+    border-radius: var(--hai-modal-radius, 1rem);
+    overflow: var(--hai-modal-panel-overflow, hidden);
     color: var(--color-base-content);
     outline: none;
     box-shadow:
@@ -247,7 +278,7 @@
     border-bottom-right-radius: inherit;
     border-bottom-left-radius: inherit;
     box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-base-content) 6%, transparent);
-    border-radius: 0 0 1.4rem 1.4rem;
+    border-radius: 0 0 var(--hai-modal-radius, 1rem) var(--hai-modal-radius, 1rem);
   }
 
   .hai-modal__close {
@@ -284,6 +315,13 @@
     height: 1rem;
   }
 
+  .hai-modal__close--floating {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    z-index: 1;
+  }
+
   .hai-modal__panel--xs {
     --hai-modal-width: min(100%, 24rem);
   }
@@ -342,7 +380,7 @@
       max-width: 100%;
       max-height: calc(100vh - 1.7rem);
       max-height: calc(100dvh - 1.7rem);
-      border-radius: 1rem;
+      border-radius: min(var(--hai-modal-radius, 1rem), 1rem);
     }
   }
 </style>

package/dist/components/compounds/Pagination.svelte

@@ -10,7 +10,7 @@
 <script lang='ts'>
   import type { PaginationProps } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn, getSizeClass } from '../../utils.js'
+  import { cn } from '../../utils.js'
   import BareButton from '../primitives/BareButton.svelte'
 
   import Input from '../primitives/Input.svelte'
@@ -36,63 +36,10 @@
   // 计算总页数（至少 1 页，保证分页栏在空数据时仍可渲染）
   const totalPages = $derived(Math.max(1, 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),
-    ),
-  )
-
   const controlSize = $derived(size === 'xs' ? 'xs' : 'sm')
   const jumperControlSize = 'xs'
-  const wrapperClass = $derived(size === 'xs' ? 'flex flex-wrap items-center justify-center gap-1.5 text-xs' : 'flex flex-wrap items-center justify-center gap-2.5 text-sm')
-  const totalClass = $derived(size === 'xs' ? 'text-xs text-base-content/70' : 'text-sm text-base-content/70')
-  const sizeChangerClass = $derived(size === 'xs' ? 'w-22 shrink-0' : 'w-24 shrink-0')
-  const jumperWrapClass = $derived(size === 'xs' ? 'flex min-w-fit items-center gap-1.5 whitespace-nowrap' : 'flex min-w-fit items-center gap-1.5 whitespace-nowrap')
+  const sizeChangerClass = $derived(size === 'xs' ? 'w-17 shrink-0' : 'w-18 shrink-0')
+  const jumperWrapClass = $derived(size === 'xs' ? 'flex min-w-fit items-center gap-1.5 whitespace-nowrap' : 'flex min-w-fit items-center gap-2 whitespace-nowrap')
   const jumperInputClass = $derived(
     size === 'xs'
       ? 'w-[2.25rem] shrink-0 [&>.fieldset]:m-0 [&>.fieldset]:min-w-0'
@@ -122,77 +69,83 @@
       onpagesizechange?.(next)
     }
   }
+
+  // 统一 table 风格：首/上/下/末 导航按钮样式（等比例缩小）
+  const navBtnClass = $derived(
+    size === 'xs'
+      ? 'inline-flex h-6 w-6 items-center justify-center rounded-md border border-base-content/12 text-base-content/55 transition-colors hover:bg-base-content/5 hover:text-base-content disabled:pointer-events-none disabled:opacity-40'
+      : 'inline-flex h-7 w-7 items-center justify-center rounded-md border border-base-content/12 text-base-content/55 transition-colors hover:bg-base-content/5 hover:text-base-content disabled:pointer-events-none disabled:opacity-40',
+  )
+  const navIconClass = $derived(size === 'xs' ? 'size-3.5' : 'size-3.5')
+  const tableTextClass = $derived(size === 'xs' ? 'text-xs text-base-content/60' : 'text-sm text-base-content/60')
+  const rowGapClass = $derived(size === 'xs' ? 'flex flex-wrap items-center gap-3 sm:gap-4' : 'flex flex-wrap items-center gap-4 sm:gap-6')
+  const pageInfoText = $derived(
+    (labels.pageInfo ?? uiM('pagination_page_info'))
+      .replace('{page}', String(page))
+      .replace('{total}', String(totalPages)),
+  )
 </script>
 
-<div class={wrapperClass}>
+<div class={cn('flex flex-wrap items-center justify-between gap-4', className)}>
   {#if showTotal}
-    <span class={totalClass}>
+    <span class={tableTextClass}>
       {(labels.total ?? uiM('pagination_total')).replace('{count}', String(total))}
     </span>
+  {:else}
+    <span></span>
   {/if}
 
-  {#if showSizeChanger}
-    <div class={sizeChangerClass}>
-      <Select
-        size={controlSize}
-        value={String(pageSize)}
-        onchange={handlePageSizeChange}
-      >
-        {#each pageSizeOptions as opt (opt)}
-          <option value={String(opt)}>
-            {(labels.pageSize ?? uiM('pagination_page_size')).replace('{size}', String(opt))}
-          </option>
-        {/each}
-      </Select>
+  <div class={rowGapClass}>
+    {#if showSizeChanger}
+      <div class='flex items-center gap-2'>
+        <span class={tableTextClass}>{labels.rowsPerPage ?? uiM('pagination_rows_per_page')}</span>
+        <div class={sizeChangerClass}>
+          <Select
+            size={controlSize}
+            value={String(pageSize)}
+            onchange={handlePageSizeChange}
+          >
+            {#each pageSizeOptions as opt (opt)}
+              <option value={String(opt)}>{opt}</option>
+            {/each}
+          </Select>
+        </div>
+      </div>
+    {/if}
+
+    <span class={tableTextClass}>{pageInfoText}</span>
+
+    <div class='flex items-center gap-1'>
+      <BareButton class={navBtnClass} disabled={page === 1} onclick={() => goToPage(1)} ariaLabel='First page'>
+        <span class={cn('icon-[tabler--chevrons-left]', navIconClass)}></span>
+      </BareButton>
+      <BareButton class={navBtnClass} disabled={page === 1} onclick={() => goToPage(page - 1)} ariaLabel='Previous page'>
+        <span class={cn('icon-[tabler--chevron-left]', navIconClass)}></span>
+      </BareButton>
+      <BareButton class={navBtnClass} disabled={page === totalPages} onclick={() => goToPage(page + 1)} ariaLabel='Next page'>
+        <span class={cn('icon-[tabler--chevron-right]', navIconClass)}></span>
+      </BareButton>
+      <BareButton class={navBtnClass} disabled={page === totalPages} onclick={() => goToPage(totalPages)} ariaLabel='Last page'>
+        <span class={cn('icon-[tabler--chevrons-right]', navIconClass)}></span>
+      </BareButton>
     </div>
-  {/if}
-
-  <div class={joinClass}>
-    <BareButton
-      class={btnClass}
-      disabled={page === 1}
-      onclick={() => goToPage(page - 1)}
-    >
-      «
-    </BareButton>
-
-    {#each pages() as p, index (typeof p === 'number' ? p : `ellipsis-${index}`)}
-      {#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={jumperWrapClass}>
-      <span class={totalClass}>{labels.jumpTo ?? uiM('pagination_jump_to')}</span>
-      <div class={jumperInputClass}>
-        <Input
-          type='number'
-          size={jumperControlSize}
-          class='h-7 w-full rounded-md [&_input]:px-1.5 [&_input]:text-center [&_input]:text-[12px]'
-          min={1}
-          max={totalPages}
-          bind:value={jumperValue}
-          onkeydown={(e: KeyboardEvent & { currentTarget: HTMLInputElement }) => e.key === 'Enter' && handleJump()}
-        />
+    {#if showJumper}
+      <div class={jumperWrapClass}>
+        <span class={tableTextClass}>{labels.jumpTo ?? uiM('pagination_jump_to')}</span>
+        <div class={jumperInputClass}>
+          <Input
+            type='number'
+            size={jumperControlSize}
+            class='h-7 w-full rounded-md [&_input]:px-1.5 [&_input]:text-center [&_input]:text-[12px]'
+            min={1}
+            max={totalPages}
+            bind:value={jumperValue}
+            onkeydown={(e: KeyboardEvent & { currentTarget: HTMLInputElement }) => e.key === 'Enter' && handleJump()}
+          />
+        </div>
+        <span class={tableTextClass}>{labels.page ?? uiM('pagination_page')}</span>
       </div>
-      <span class={totalClass}>{labels.page ?? uiM('pagination_page')}</span>
-    </div>
-  {/if}
+    {/if}
+  </div>
 </div>