@suphark/ui 0.4.3 → 0.5.1

package/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.5.1] — 2026-09-20
+
+### Fixed
+
+- **`RelativeDate` hydration mismatch (React #418) บน production** — เดิม render "วันนี้/เมื่อวาน" บน server ด้วย "ตอนนี้" ของ server (UTC และ module ที่โหลดไว้ก่อน) ซึ่งต่างจาก browser ได้ทั้งโซนเวลาและข้ามวัน → บน Vercel หน้า `/shell` (ตารางมี RelativeDate) hydrate พังทั้งหน้าและ React render ใหม่ทั้ง tree (เห็น theme script ซ้ำ 2 ตัว) — ตอนนี้คำนวณเฉพาะฝั่ง client หลัง mount (`useSyncExternalStore` guard แบบเดียวกับ `ClientDateFormatter`) ก่อน mount แสดงไอคอน + ช่องว่างขนาดเดิม
+- `RelativeDate`: เอาข้อความเฉพาะ supplychain ("วันที่อ้างอิงราคาจริง") ออกจาก tooltip → prop ใหม่ `titlePrefix` (ค่าเริ่มต้น "วันที่") และ `emptyText`; สีเป็น semantic token (`text-muted-foreground`) แทน `text-slate-*` ตามกฎ design system (className/iconClassName ทับได้เหมือนเดิม)
+- showcase: launch config `showcase-prod` (:3202, `next start` หลัง build) สำหรับตรวจ production build ในเครื่อง
+
+## [0.5.0] — 2026-09-19
+
+ยกของที่พิสูจน์แล้วจาก Pi Done (todo/kanban) เข้าแพ็กเกจ — ไม่เปลี่ยน props เดิม
+
+### Added
+
+- **`DialogsProvider` + `useDialogs()`** (`@suphark/ui`): กล่องโต้ตอบแบบ promise ทั้งแอปบน AlertDialog — `alert / confirm / prompt / choose / checklist` ครอบครั้งเดียวที่ root แล้วเรียกได้ทุกที่โดยไม่ต้อง render อะไรในผู้เรียก (ต่างจาก `useConfirm()` ที่ยังอยู่เหมือนเดิม); เปิดคำขอใหม่ขณะกล่องเปิด → คำขอเดิม resolve เป็นค่ายกเลิก; `UiText` เพิ่ม optional `ok`, `alertTitle`, `promptTitle`, `chooseTitle`, `checklistTitle` (มีค่าใน `UI_TEXT_TH`/`UI_TEXT_EN`)
+- **`createKanbanCollisionDetection()`** (`@suphark/ui/kanban` — entry แยกเพราะ @dnd-kit/core สร้าง context ตอน import ใช้จาก server component ไม่ได้): collision detection ของ dnd-kit สำหรับบอร์ดหลายคอลัมน์ — pointer ในช่องว่างระหว่างการ์ด/ใต้การ์ดสุดท้ายแปลงเป็น "การ์ดที่ใกล้ที่สุดในคอลัมน์" (ไม่นับการ์ดที่ลาก) แทนการรายงานคอลัมน์ซึ่งทำให้ dnd-kit ล้าง transform (การ์ดเด้งกลับ, drop ไปท้ายคอลัมน์); คอลัมน์ว่างรายงาน droppable ของรายการ; รองรับ droppable อื่นของคอลัมน์ผ่าน `resolveColumnId` (เช่น handle ลากเรียงคอลัมน์)
+- **`useTrackedState()`** (`@suphark/ui`): `useState` + `getLatest()` ที่อัปเดต synchronous — mutation ติดกันใน tick เดียว (drag-drop, automation, bulk) อ่านค่าล่าสุดแทน closure ตอน render
+- **`@suphark/ui/pwa`** (entry ใหม่): `PwaServiceWorkerRegistration` (ลงทะเบียน SW + เก็บ `beforeinstallprompt` + `watchServiceWorkerUpdates`: เช็คอัปเดตตอนโหลด/กลับมาที่แท็บ/ทุก 15 นาที แล้ว reload ครั้งเดียวเมื่อ worker ใหม่คุมหน้า เลื่อนขณะพิมพ์ ไม่ reload ตอนติดตั้งครั้งแรก), `PwaInstallCard` (`appName`, `text` ค่าเริ่มต้นไทย + `PWA_INSTALL_CARD_TEXT_EN`), `PullToRefresh` (มือถือ, `router.refresh()`, `PULL_TO_REFRESH_TEXT_EN`), install-prompt store; `PullToRefresh` ใช้ next/navigation จึงอยู่ entry นี้ไม่ใช่ barrel หลัก
+- showcase: หน้า `dialogs`, `kanban-board` (บอร์ด 3 คอลัมน์ลากได้จริง), `pwa-install-card`
+
+## [0.4.4] — 2026-09-19
+
+รอบแก้บั๊กจาก code review ทั้ง codebase + audit Web Interface Guidelines — ไม่เปลี่ยน props เดิม
+
+### Fixed
+
+- **`DeleteManyButton`**: `AlertDialogAction` ของ Base UI เป็นปุ่มธรรมดา (ไม่ใช่ Close) → ลบสำเร็จแล้วกล่องค้างเปิด กด Delete ซ้ำได้ด้วย ids ที่ลบไปแล้ว — คุม `open` เอง ปิดหลังสำเร็จ + `table.resetRowSelection()`; ปิดไม่ได้ระหว่าง pending
+- **`useDataTable`**: effect sync `initialPageSize` ทับ `pagination.pageSize` ที่ควบคุมจาก prop/URL ตอน mount (URL=50 แต่ตารางกลายเป็น 25 และตัดแถวที่ server ส่งมา) — ข้ามเมื่อ `pagination` ถูกส่งมา (controlled)
+- **`FormFieldSelect`**: `onValueChange` ไม่ถูกเรียกเลยเมื่อไม่ส่ง `variant` (ค่าเริ่มต้น select)
+- **`FormFieldInput isNumeric`**: แปลงเป็น number ทันทีทำให้ศูนย์ท้ายทศนิยมหายขณะพิมพ์ ("1.0" → "1" พิมพ์ 1.05 ไม่ได้) — คงเป็น string จนทศนิยมจบ
+- **`ErrorState`**: hardcode `/api/auth/get-session` + `/sign-in` ของ supplychain → แอปอื่นได้ 404 แล้วถูกตีความว่า "เซสชันหมดอายุ" พร้อมลิงก์ที่ไม่มี — ตรวจเซสชันเฉพาะเมื่อส่ง prop ใหม่ `sessionCheckUrl` (และ `signInHref` ค่าเริ่มต้น `/sign-in`); response ที่ไม่ใช่ 401/ok ไม่ถือว่าหมดอายุ (supplychain ส่ง `sessionCheckUrl="/api/auth/get-session"` เมื่อย้ายมาใช้)
+- **`formatRelativeThaiDate`**: `Math.abs` ทำให้วันพรุ่งนี้เป็น "เมื่อวาน" — ใช้ `differenceInCalendarDays` คงเครื่องหมาย เพิ่ม "พรุ่งนี้"; ไกลกว่านั้น date-fns บอกทิศทางเอง
+- **data attribute ของ Radix ที่หลงมาบน Base UI** (ไม่เคยทำงาน): `AppNav` ลูกศรกลุ่มเมนูไม่หมุน (`data-[state=open]` → `data-open`), `FormFieldRadioCards` การ์ดที่เลือกไม่ไฮไลต์ (`peer-data-[state=checked]` → `peer-data-checked`), trigger เปิดเมนูไม่มีพื้นหลัง (`UserMenu`, `DataTableColumnHeader`, `DataTableRowActions`, `HeaderCrumb` → `data-popup-open`), แท็บ `DesignSystemShowcase` ไม่ไฮไลต์ (`data-[state=active]` → `data-active`)
+- **`ConfirmActionButton` / `RowActions`**: action โยน error → เด้ง error boundary ทั้งหน้าและ dialog ค้าง — จับแล้ว `toast.error(message)` (ข้อความจาก `UiText.actionFailed` optional) คง dialog ไว้ให้ลองใหม่
+- **`HeaderBreadcrumbs hideIds`**: regex `[0-9a-z]{16,}` ซ่อน segment คำธรรมดายาว ≥16 (เช่น `organizationmembers`) — ต้องมีตัวเลขปนจึงถือเป็น id
+- **`RowActions` รายการ `href`** render เป็น `<Link>` จริง (Ctrl/⌘+click, คลิกกลาง, เปิดแท็บใหม่ได้) ยกเว้นมี `confirm`; **`TransitionLink`** ไม่ดัก modifier keys/คลิกกลางแล้ว
+- **`RefreshButton`**: `{...props}` ทับ `isLoading` ที่รวม pending ของ `router.refresh()` เมื่อผู้เรียกส่ง `isLoading={false}`
+- **cmdk value ชนกันเมื่อ label ซ้ำ** (`Combobox`, `FormFieldCombobox`, `FormFieldSelect variant="combobox"`, `FormFieldInput variant="autocomplete"`): ต่อ `value` ท้าย label ให้ระบุรายการได้ (ค้นด้วยรหัสได้ด้วย)
+
+### Added (Web Interface Guidelines)
+
+- **`AppShell`**: กล่องเนื้อหาเป็น `<main id="app-main" tabIndex={-1}>` (export `APP_MAIN_ID`) + skip link "ข้ามไปเนื้อหา" (มองเห็นเมื่อกด Tab ตัวแรก) ทั้ง layout sidebar และ top
+- `styles.css`: `@media (prefers-reduced-motion: reduce)` ตัด animation/transition ทุก component (tw-animate, animate-spin, dialog zoom)
+- `SubNav`/`TopTabs`: `focus-visible:ring-2` ให้เท่ากับ HeaderCrumb; `<select>` ของ SubNav ใส่ `text-foreground` (Windows dark mode); `ConfirmDialog` ปุ่มยืนยัน `aria-busy` ตอน pending; ข้อความ "ไม่พบ" ใช้ curly quotes
+- showcase: `/login` กัน `next=//host` (protocol-relative) ; `LayoutSwitch` ป้ายเป็น `sr-only` บนจอแคบ; demo `form-fields` เพิ่มช่อง isNumeric + `onValueChange`
+
 ## [0.4.3] — 2026-09-19
 
 ### Added

package/README.md

@@ -67,6 +67,12 @@ import { AppShell, UserMenu, filterNav, FormDialog, RowActions, LinkButton, Refr
 // ตารางข้อมูล (ต้องติดตั้ง @tanstack/react-table เอง)
 import { DataTable, DataTableColumnHeader, useDataTable } from "@suphark/ui/data-table";
 
+// PWA (PullToRefresh ใช้ next/navigation)
+import { PwaServiceWorkerRegistration, PwaInstallCard, PullToRefresh } from "@suphark/ui/pwa";
+
+// บอร์ด Kanban บน dnd-kit (แยก entry เหมือน data-table)
+import { createKanbanCollisionDetection } from "@suphark/ui/kanban";
+
 // import ตรงรายไฟล์ก็ได้ (เช่น chart ที่ต้องมี recharts)
 import { ChartContainer } from "@suphark/ui/components/ui/chart";
 ```
@@ -78,6 +84,7 @@ import { ChartContainer } from "@suphark/ui/components/ui/chart";
 | `src/components/ui/*` | shadcn/ui ต้นฉบับ 59 ตัว (+ `__tests__`) | **ห้ามแก้มือ** — เพิ่ม/อัปเดตด้วย `pnpm dlx shadcn@latest add <name>` ใน `packages/ui` (`components.json` ตั้ง alias ไว้แล้ว) |
 | `src/components/shared/*` | ของที่เราประกอบเอง: ปุ่มมาตรฐาน (`button/`), form-field บน react-hook-form (`form/`), layout, theme, combobox, และชุดจาก Pi Auth (FormDialog, NameIdFields, StatusBadge, RowMenu, …) | แก้ได้ แต่คง props เดิมให้มากที่สุด (minor = เพิ่ม, major = เปลี่ยน) |
 | `src/components/data-table/*` | DataTable บน tanstack (toolbar, faceted filter, pagination, view options, row actions, ลากเรียงแถว) | entry `@suphark/ui/data-table` |
+| `src/components/pwa/*` | PWA: ลงทะเบียน/อัปเดต service worker, การ์ดชวนติดตั้ง, ดึงลงเพื่อรีเฟรช | entry `@suphark/ui/pwa` |
 | `src/components/app-shell/*` | AppShell (sidebar + header + เนื้อหา), AppNav, AppBrand, UserMenu, HeaderBreadcrumbs, NavLink, filterNav/searchNav | export ผ่าน `@suphark/ui/next` (ใช้ next/link, next/navigation) |
 | `src/components/design-system/*` | หน้า showcase (render ใน `apps/showcase`) | ไม่อยู่ใน barrel |
 | `src/lib/*`, `src/hooks/*` | `cn`, formatter วันที่ไทย, สีสถานะ, permission context, `useIsMobile`, `useCopyToClipboard` | |
@@ -157,6 +164,24 @@ webview/automation บางตัวปิด `window.confirm` ทิ้ง (
 
 ข้อความค่าเริ่มต้น (หัว/ปุ่ม) มาจาก `UiText.confirmTitle` / `UiText.confirm`
 
+ต้องการ `alert` / `prompt` / `choose` (หลายปุ่ม) / `checklist` ด้วย หรือไม่อยาก render `confirmDialog` ทุกที่: ครอบ `<DialogsProvider>` ที่ root แล้ว `const dialogs = useDialogs()` — `await dialogs.prompt({ description: "ชื่อใหม่", defaultValue })` คืน string หรือ null; หัว/ปุ่มค่าเริ่มต้นจาก `UiText.ok/alertTitle/promptTitle/chooseTitle/checklistTitle`
+
+### PWA (`@suphark/ui/pwa`)
+
+```tsx
+// layout ("use client" หรือ component ลูก) — ครั้งเดียว
+<PwaServiceWorkerRegistration url="/sw.js" />
+// ที่ไหนก็ได้
+<PwaInstallCard appName="Pi Done" text={PWA_INSTALL_CARD_TEXT_EN} />
+<PullToRefresh /> // + data-pull-to-refresh-root บน element ที่เลื่อนได้
+```
+
+`PwaServiceWorkerRegistration` เช็คอัปเดตตอนโหลด / กลับมาที่แท็บ / ทุก 15 นาที และ reload หน้าครั้งเดียวเมื่อ worker ใหม่คุมหน้า (เลื่อนขณะผู้ใช้กำลังพิมพ์, ไม่ reload ตอนติดตั้งครั้งแรก) — ฝั่ง worker ของแอปต้อง: ฝัง deployment id ใน script (เช่น `process.env.VERCEL_DEPLOYMENT_ID`) ให้ byte เปลี่ยนทุก deploy, `self.skipWaiting()` ใน `install` โดยไม่ขึ้นกับผล precache, `self.clients.claim()` ใน `activate`, และเสิร์ฟ script ด้วย `Cache-Control: no-cache`
+
+### Kanban (dnd-kit)
+
+`createKanbanCollisionDetection({ columnItems, resolveColumnId })` (จาก `@suphark/ui/kanban`) ใช้เป็น `collisionDetection` ของ `DndContext` เมื่อมีหลายคอลัมน์ (SortableContext ต่อคอลัมน์) — ตัวอย่างบอร์ดเต็มที่ ui.suphark.com/components/kanban-board; wrapper ของการ์ด**ห้าม** `overflow-hidden` (dnd-kit ใส่ transform ที่ node ที่ `setNodeRef` ถ้าถูกครอบด้วย overflow-hidden การ์ดที่ขยับหลบจะถูก clip)
+
 ### สิทธิ์ (ActionButton/LinkButton `permission` prop)
 
 แพ็กเกจไม่รู้จักระบบสิทธิ์ของแอป — ครอบด้วย `UiPermissionProvider` แล้วส่งฟังก์ชัน `check(requirement, options)` ของแอปเข้ามา ถ้าไม่ครอบ = อนุญาตทุกอย่าง

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",
@@ -39,6 +39,8 @@
     ".": "./src/index.ts",
     "./next": "./src/next.ts",
     "./data-table": "./src/data-table.ts",
+    "./pwa": "./src/pwa.ts",
+    "./kanban": "./src/kanban.ts",
     "./styles.css": "./src/styles.css",
     "./components/shared/button": "./src/components/shared/button/index.ts",
     "./components/shared/theme": "./src/components/shared/theme/index.ts",

package/src/components/app-shell/app-nav.tsx

@@ -192,7 +192,7 @@ export function AppNavGroupMenu({
               >
                 {item.icon}
                 <MenuTitle title={item.title} isLabs={item.isLabs} />
-                <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                <ChevronRight className="ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90" />
               </CollapsibleTrigger>
               <CollapsibleContent suppressHydrationWarning>
                 <SidebarMenuSub>

package/src/components/app-shell/app-shell.tsx

@@ -114,6 +114,21 @@ export function AppShell(props: AppShellProps) {
   return <SidebarShell {...props} />;
 }
 
+/** id ของ <main> ที่ AppShell สร้าง — ใช้อ้างจาก skip link / anchor */
+export const APP_MAIN_ID = "app-main";
+
+/** ลิงก์ "ข้ามไปเนื้อหา" สำหรับคีย์บอร์ด/screen reader — มองไม่เห็นจนกด Tab ตัวแรก */
+function SkipToMain() {
+  return (
+    <a
+      href={`#${APP_MAIN_ID}`}
+      className="sr-only z-[60] rounded-md bg-background px-3 py-2 text-sm font-medium ring-2 ring-ring focus:not-sr-only focus:fixed focus:top-2 focus:left-2"
+    >
+      ข้ามไปเนื้อหา
+    </a>
+  );
+}
+
 function SidebarShell({
   brand,
   nav,
@@ -152,6 +167,7 @@ function SidebarShell({
   return (
     // base-ui-ok: defaultOpen อ่านจาก cookie ครั้งเดียวตอน mount — หลังจากนั้น Sidebar จัดการ state เอง (ตั้งใจให้ uncontrolled)
     <SidebarProvider defaultOpen={defaultOpen} style={style}>
+      <SkipToMain />
       <ShellSidebar
         brand={brand}
         nav={nav}
@@ -200,15 +216,17 @@ function SidebarShell({
             </header>
           </div>
         )}
-        <div
+        <main
+          id={APP_MAIN_ID}
+          tabIndex={-1}
           className={cn(
-            "flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6 print:overflow-visible",
+            "flex flex-1 flex-col gap-4 p-4 outline-none md:gap-6 md:p-6 print:overflow-visible",
             contentMaxWidth && cn("mx-auto w-full", contentMaxWidth),
             contentClassName,
           )}
         >
           {children}
-        </div>
+        </main>
       </SidebarInset>
     </SidebarProvider>
   );
@@ -262,6 +280,7 @@ function TopShell({
 
   return (
     <div style={style} className="flex min-h-svh flex-col bg-background">
+      <SkipToMain />
       {header !== false && (
         <div className="sticky top-0 z-40 bg-background print:static">
           {headerOpts.banner}
@@ -301,10 +320,17 @@ function TopShell({
             searchPlaceholder={searchPlaceholder}
           />
         )}
-        <div className={cn("flex min-w-0 flex-1 flex-col gap-4 md:gap-6", contentClassName)}>
+        <main
+          id={APP_MAIN_ID}
+          tabIndex={-1}
+          className={cn(
+            "flex min-w-0 flex-1 flex-col gap-4 outline-none md:gap-6",
+            contentClassName,
+          )}
+        >
           {breadcrumbs}
           {children}
-        </div>
+        </main>
       </div>
     </div>
   );

package/src/components/app-shell/header-breadcrumbs.tsx

@@ -30,7 +30,8 @@ export interface HeaderBreadcrumbsProps {
   hideIds?: boolean;
 }
 
-const ID_LIKE = /^(\d+|[0-9a-f]{8}-[0-9a-f-]{27}|c[a-z0-9]{20,}|[0-9a-z]{16,})$/i;
+// ตัวเลขล้วน / uuid / cuid / ตัวอักษร+ตัวเลขปน ≥16 ตัว (ต้องมีตัวเลขอย่างน้อย 1 — คำธรรมดายาว ๆ ไม่ใช่ id)
+const ID_LIKE = /^(\d+|[0-9a-f]{8}-[0-9a-f-]{27}|c[a-z0-9]{20,}|(?=[a-z]*\d)[0-9a-z]{16,})$/i;
 
 function labelOf(segment: string, href: string, labels?: HeaderBreadcrumbsProps["labels"]) {
   const known = typeof labels === "function" ? labels(segment, href) : labels?.[segment];

package/src/components/app-shell/header-crumb.tsx

@@ -34,7 +34,7 @@ export function HeaderCrumb({
     <button
       type="button"
       className={cn(
-        "inline-flex h-8 max-w-56 items-center gap-1.5 rounded-md px-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50 data-[popup-open]:bg-accent data-[state=open]:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+        "inline-flex h-8 max-w-56 items-center gap-1.5 rounded-md px-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50 data-popup-open:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
         className,
       )}
       {...props}

package/src/components/app-shell/index.ts

@@ -1,6 +1,6 @@
 export { AppBrand, type AppBrandProps } from "./app-brand";
 export { AppNav, AppNavGroupMenu, type AppNavPinProps } from "./app-nav";
-export { AppShell, type AppShellProps } from "./app-shell";
+export { APP_MAIN_ID, AppShell, type AppShellProps } from "./app-shell";
 export { HeaderBreadcrumbs, type HeaderBreadcrumbsProps } from "./header-breadcrumbs";
 export { HeaderCrumb, HeaderCrumbs } from "./header-crumb";
 export { NavLink } from "./nav-link";

package/src/components/app-shell/sub-nav.tsx

@@ -63,7 +63,7 @@ export function SubNav({
       <label className="flex flex-col gap-1 lg:hidden">
         {title && <span className="text-muted-foreground text-xs">{title}</span>}
         <select
-          className="h-9 rounded-md border bg-background px-2 text-sm"
+          className="h-9 rounded-md border bg-background px-2 text-foreground text-sm"
           value={current?.href ?? ""}
           onChange={(e) => e.target.value && router.push(e.target.value)}
           aria-label={typeof title === "string" ? title : "เมนูย่อย"}
@@ -120,7 +120,7 @@ export function SubNav({
                   href={i.href}
                   aria-current={active ? "page" : undefined}
                   className={cn(
-                    "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm no-underline transition-colors [&_svg:not([class*='size-'])]:size-4",
+                    "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm no-underline outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 [&_svg:not([class*='size-'])]:size-4",
                     active
                       ? "bg-accent font-medium text-accent-foreground"
                       : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
@@ -139,7 +139,7 @@ export function SubNav({
           </div>
         ))}
         {sections.length === 0 && (
-          <p className="px-2 text-muted-foreground text-xs">ไม่พบ "{query}"</p>
+          <p className="px-2 text-muted-foreground text-xs">ไม่พบ “{query}”</p>
         )}
       </nav>
     </>

package/src/components/app-shell/top-tabs.tsx

@@ -47,7 +47,7 @@ export function TopTabs({ nav, className }: { nav: AppNavGroup[]; className?: st
             href={tab.href}
             aria-current={active ? "page" : undefined}
             className={cn(
-              "flex shrink-0 items-center gap-1.5 border-b-2 px-3 py-2.5 text-sm no-underline transition-colors [&_svg:not([class*='size-'])]:size-4",
+              "flex shrink-0 items-center gap-1.5 rounded-t-md border-b-2 px-3 py-2.5 text-sm no-underline outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 [&_svg:not([class*='size-'])]:size-4",
               active
                 ? "border-foreground font-medium text-foreground"
                 : "border-transparent text-muted-foreground hover:border-border hover:text-foreground",

package/src/components/app-shell/user-menu.tsx

@@ -65,7 +65,7 @@ export function UserMenu({
             className={cn(
               variant === "sidebar"
                 ? "h-auto w-full justify-start gap-2.5 px-2 py-2 text-left group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:p-0"
-                : "h-9 min-w-0 gap-2 px-1.5 data-[state=open]:bg-accent sm:px-2",
+                : "h-9 min-w-0 gap-2 px-1.5 data-popup-open:bg-accent sm:px-2",
               className,
             )}
           />

package/src/components/data-table/data-table-column-header.tsx

@@ -31,7 +31,7 @@ export function DataTableColumnHeader<TData, TValue>({
       <DropdownMenu>
         <DropdownMenuTrigger
           render={
-            <Button variant="ghost" size="sm" className="-ml-3 h-8 data-[state=open]:bg-accent" />
+            <Button variant="ghost" size="sm" className="-ml-3 h-8 data-popup-open:bg-accent" />
           }
         >
           <span>{title}</span>

package/src/components/data-table/data-table-row-actions.tsx

@@ -105,9 +105,7 @@ export function DataTableRowActions<TData>({
     <div className="flex justify-end">
       <DropdownMenu>
         <DropdownMenuTrigger
-          render={
-            <Button variant="ghost" className="flex h-8 w-8 p-0 data-[state=open]:bg-muted" />
-          }
+          render={<Button variant="ghost" className="flex h-8 w-8 p-0 data-popup-open:bg-muted" />}
         >
           <Ellipsis className="h-4 w-4" />
           <span className="sr-only">Open menu</span>

package/src/components/data-table/use-data-table.ts

@@ -115,7 +115,10 @@ export function useDataTable<TData, TValue>({
   }, [pageIndexProp, pageSizeProp]);
 
   // Sync initialPageSize when it loads asynchronously (e.g. from user preferences)
+  // เฉพาะตอน pagination ไม่ได้ถูกควบคุมจาก prop — ไม่งั้นจะทับ pageSize จาก URL ตอน mount
+  const paginationControlled = paginationProp !== undefined;
   React.useEffect(() => {
+    if (paginationControlled) return;
     setPagination((prev) => {
       // Only update if the size actually changed
       if (prev.pageSize !== initialPageSize) {
@@ -123,7 +126,7 @@ export function useDataTable<TData, TValue>({
       }
       return prev;
     });
-  }, [initialPageSize]);
+  }, [initialPageSize, paginationControlled]);
 
   const finalGlobalFilterFn = React.useMemo(() => {
     if (globalFilterFn) {

package/src/components/design-system/design-system-showcase.tsx

@@ -87,7 +87,7 @@ export function DesignSystemShowcase({
                 <TabsTrigger
                   key={tab.value}
                   value={tab.value}
-                  className="gap-2 px-3 py-2 text-sm data-[state=active]:bg-card data-[state=active]:shadow-xs"
+                  className="gap-2 px-3 py-2 text-sm data-active:bg-card data-active:shadow-xs"
                 >
                   <Icon className="size-4" />
                   {tab.label}

package/src/components/pwa/install-prompt-store.ts

@@ -0,0 +1,26 @@
+/** เก็บ `beforeinstallprompt` ไว้ใช้ทีหลัง (browser ยิงครั้งเดียวตอนโหลด ก่อน UI ที่จะแสดงปุ่มติดตั้งจะ mount) */
+export type BeforeInstallPromptEvent = Event & {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: "accepted" | "dismissed"; platform: string }>;
+};
+
+let installPrompt: BeforeInstallPromptEvent | null = null;
+const listeners = new Set<(event: BeforeInstallPromptEvent | null) => void>();
+
+export function getInstallPrompt() {
+  return installPrompt;
+}
+
+export function setInstallPrompt(event: BeforeInstallPromptEvent | null) {
+  installPrompt = event;
+  for (const listener of listeners) listener(installPrompt);
+}
+
+export function subscribeToInstallPrompt(
+  listener: (event: BeforeInstallPromptEvent | null) => void,
+) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}

package/src/components/pwa/pull-to-refresh.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { cn } from "@suphark/ui/lib/utils";
+import { Loader2, RefreshCw } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+
+const ACTIVATION_DISTANCE = 72;
+const MAX_PULL_DISTANCE = 112;
+const MOBILE_BREAKPOINT = 768;
+
+export interface PullToRefreshText {
+  pull: string;
+  release: string;
+  refreshing: string;
+}
+
+export const PULL_TO_REFRESH_TEXT_TH: PullToRefreshText = {
+  pull: "ดึงลงเพื่อรีเฟรช",
+  release: "ปล่อยเพื่อรีเฟรช",
+  refreshing: "กำลังรีเฟรช",
+};
+
+export const PULL_TO_REFRESH_TEXT_EN: PullToRefreshText = {
+  pull: "Pull to refresh",
+  release: "Release to refresh",
+  refreshing: "Refreshing",
+};
+
+/**
+ * ดึงลงเพื่อรีเฟรช (มือถือ, < 768px) — เรียก `router.refresh()` เมื่อดึงเกินระยะ
+ * ใส่ `data-pull-to-refresh-root` บน element ที่เลื่อนได้ของหน้า (ดึงได้เมื่อเลื่อนอยู่บนสุดเท่านั้น)
+ *
+ *   <main data-pull-to-refresh-root className="overflow-y-auto">…</main>
+ *   <PullToRefresh />
+ */
+export function PullToRefresh({
+  text = PULL_TO_REFRESH_TEXT_TH,
+  rootSelector = "[data-pull-to-refresh-root]",
+}: {
+  text?: PullToRefreshText;
+  rootSelector?: string;
+}) {
+  const router = useRouter();
+  const startRef = useRef<{ x: number; y: number } | null>(null);
+  const isPullingRef = useRef(false);
+  const [pullDistance, setPullDistance] = useState(0);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  useEffect(() => {
+    const isMobileViewport = () => window.innerWidth < MOBILE_BREAKPOINT;
+    const getRoot = () => document.querySelector<HTMLElement>(rootSelector);
+    const isRootAtTop = (root: HTMLElement) => root.scrollTop <= 0;
+
+    const resetPull = () => {
+      startRef.current = null;
+      isPullingRef.current = false;
+      setPullDistance(0);
+    };
+
+    const handleTouchStart = (event: TouchEvent) => {
+      const touch = event.touches[0];
+      if (!isMobileViewport() || isRefreshing || event.touches.length !== 1 || !touch) {
+        resetPull();
+        return;
+      }
+      const root = getRoot();
+      if (!root || !isRootAtTop(root)) {
+        resetPull();
+        return;
+      }
+      startRef.current = { x: touch.clientX, y: touch.clientY };
+      isPullingRef.current = false;
+    };
+
+    const handleTouchMove = (event: TouchEvent) => {
+      const start = startRef.current;
+      const touch = event.touches[0];
+      if (!start || isRefreshing || event.touches.length !== 1 || !touch) return;
+
+      const root = getRoot();
+      if (!root || !isRootAtTop(root)) {
+        resetPull();
+        return;
+      }
+
+      const deltaX = touch.clientX - start.x;
+      const deltaY = touch.clientY - start.y;
+      if (deltaY <= 0) {
+        resetPull();
+        return;
+      }
+      if (!isPullingRef.current) {
+        if (Math.abs(deltaX) > deltaY || deltaY < 10) return;
+        isPullingRef.current = true;
+      }
+      event.preventDefault();
+      setPullDistance(Math.min(MAX_PULL_DISTANCE, deltaY * 0.62));
+    };
+
+    const handleTouchEnd = () => {
+      const shouldRefresh = pullDistance >= ACTIVATION_DISTANCE;
+      resetPull();
+      if (!shouldRefresh || isRefreshing) return;
+      setIsRefreshing(true);
+      router.refresh();
+      window.setTimeout(() => setIsRefreshing(false), 700);
+    };
+
+    window.addEventListener("touchstart", handleTouchStart, { passive: true });
+    window.addEventListener("touchmove", handleTouchMove, { passive: false });
+    window.addEventListener("touchend", handleTouchEnd, { passive: true });
+    window.addEventListener("touchcancel", resetPull, { passive: true });
+    return () => {
+      window.removeEventListener("touchstart", handleTouchStart);
+      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("touchend", handleTouchEnd);
+      window.removeEventListener("touchcancel", resetPull);
+    };
+  }, [isRefreshing, pullDistance, router, rootSelector]);
+
+  const isVisible = pullDistance > 0 || isRefreshing;
+  const progress = Math.min(1, pullDistance / ACTIVATION_DISTANCE);
+  const label = isRefreshing ? text.refreshing : progress >= 1 ? text.release : text.pull;
+
+  return (
+    <div
+      aria-live="polite"
+      className={cn(
+        "pointer-events-none fixed top-3 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-full border bg-card/95 px-3.5 py-2 text-xs font-medium text-foreground shadow-lg backdrop-blur-md transition-all duration-150 md:hidden",
+        isVisible ? "translate-y-0 opacity-100" : "-translate-y-8 opacity-0",
+      )}
+      style={{ transform: `translate(-50%, ${isRefreshing ? 0 : progress * 18}px)` }}
+    >
+      {isRefreshing ? (
+        <Loader2 className="size-3.5 animate-spin" aria-hidden="true" />
+      ) : (
+        <RefreshCw
+          className="size-3.5 transition-transform"
+          style={{ transform: `rotate(${progress * 180}deg)` }}
+          aria-hidden="true"
+        />
+      )}
+      <span>{label}</span>
+    </div>
+  );
+}