@suphark/ui 0.26.0 → 0.27.0

package/CHANGELOG.md

@@ -2,6 +2,61 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.27.0] — 2026-10-05
+
+### Added
+
+- **`Button`: tooltip อัตโนมัติสำหรับปุ่มไอคอน** — มาตรฐานใหม่ของทุกโครงการ (เจ้าของสั่ง 2026-10-05): ไอคอนที่ไม่มีข้อความกำกับต้องบอกได้ว่าคืออะไรเมื่อวางเมาส์ ถ้า `Button` มี `aria-label` และ children ไม่มีข้อความ (ไอคอน/`sr-only` ไม่นับ) จะห่อ `Tooltip` ให้เองจาก `aria-label` — ทำที่ `Button` ชั้นในสุดที่เดียว **call site ทุกที่ของทุกแอปได้ทันทีโดยไม่ต้องแก้โค้ด** รวมถึงปุ่มที่ส่งเข้า `render=`/`trigger` ของ `FormDialog`/`SimpleDialog`/`DropdownMenu`/`RowActions` (เคสที่ห่อ `SimpleTooltip` เองไม่ได้เพราะ trigger ส่ง ref/props ให้)
+  - props ใหม่: `tooltip` (ทับข้อความ, `false` = ปิด), `tooltipSide`, `tooltipDelay` — ไม่ต้องมี `TooltipProvider` ใน tree (ใส่ได้ถ้าอยากคุม delay ร่วมกัน)
+  - `SimpleTooltip` ปิด tooltip อัตโนมัติของ `Button` ที่ห่ออยู่ให้แล้ว (ไม่ขึ้นสองชั้น) — แอปที่ห่อ tooltip ด้วยกลไกอื่นใช้ `ButtonTooltipSuppress` (export ใหม่) หรือ `tooltip={false}`
+  - barrel export `Button` จาก `components/shared/button/button.tsx` (ครอบ `components/ui/button.tsx` ที่ยังเป็นไฟล์ shadcn ดิบ ไม่ถูกแก้มือ); `buttonVariants` เหมือนเดิม; props อื่นและหน้าตาไม่เปลี่ยน
+- `DataTablePagination`: ปุ่มเลื่อนหน้าทั้ง 4 ใช้ `aria-label` จาก `UiText` (เดิมเป็นข้อความอังกฤษตายตัวใน `sr-only`); `ThemeToggle` ใช้ `aria-label` จาก `UiText.theme.label` แทน `title` (เลิก tooltip ซ้อนของเบราว์เซอร์)
+- README หัวข้อ "ปุ่มไอคอน — tooltip มาให้เอง (มาตรฐานทุกโครงการ)" + แถวใหม่ใน `docs/agent-rules.md`
+- ใช้ข้อความใน `<span className="sr-only">` (รูปแบบของ shadcn) เป็น tooltip ได้เมื่อไม่มี `aria-label`
+- **ปุ่มไอคอนในแพ็กเกจเองได้ tooltip ครบ**: `RowActions`, `ActionMenu`, `SimpleDialog`/`SimpleSheet` (ปุ่มปิด), `SimplePagination`, `DataTablePagination`, `DataTableToolbar`, `CommandPalette`, `ThemeToggle`/`ThemeSwitch`, `Notice`, `UploadList`, `SecretReveal`, `TimePicker`, `MonthStepper`, `RuleBuilder`, `ResourcePropertyFilter`, `AuthParts` (17 ไฟล์เปลี่ยนมา import `Button` ตัวที่มี tooltip)
+- `UiText.pagination` เพิ่ม `first` / `last` (หน้าแรก/หน้าสุดท้าย)
+- showcase: หน้า `/components/button` เพิ่มแถวปุ่มไอคอน (auto / `tooltip="…"` / `tooltip={false}` / trigger ของ dialog / ห่อ `SimpleTooltip`)
+
+## [0.26.1] — 2026-10-03
+
+แก้ตามผล audit 2026-10-03 (`docs/reports/audit-2026-10-03.md`) — ไม่เปลี่ยน props
+
+### Fixed
+
+- **`RuleBuilder`**: แก้ค่าในเงื่อนไขแล้ว element ถูกสร้างใหม่ทุกครั้ง (key ผูกกับ object) → ช่องที่กำลังพิมพ์หลุดโฟกัสทุกตัวอักษร — object ใหม่ที่มาแทนใช้ key เดิม
+- **`RowActions` / `ConfirmActionButton` / `ActionMenu` / `StepForm` / `ChatThread`**: server action ที่ `redirect()`/`notFound()` เคยขึ้น toast "NEXT_REDIRECT" — ถือว่าสำเร็จ (Next นำทางให้แล้ว); `ActionMenu`/`StepForm`/`ChatThread` ถือ `{ ok: false, error }` เป็นล้มเหลวด้วย (ตัวช่วยใหม่ใน `lib/action-result.ts`: `errorMessage`, `failedResult`, `isNavigationError` — `@suphark/ui/next` ยัง export สองตัวแรกจาก confirm-action-button เหมือนเดิม)
+- **`RowActions` + `confirm`**: เคยปิด dialog ก่อนรัน action — ตอนนี้ปุ่มยืนยันหมุนระหว่างรอ ล้มเหลวคง dialog ไว้ให้ลองใหม่ สำเร็จค่อยปิด (ตามที่ 0.25.1 ตั้งใจ)
+- **`useDialogs().confirm`** รองรับ `requireText` (เดิมข้ามการพิมพ์ยืนยันไปเงียบ ๆ)
+- **`DataTable` / `useDataTable`**: เลือกแถวตาม `row.id` เป็นค่าเริ่มต้น (ไม่มี id = index เหมือนเดิม) — เดิมใช้ลำดับแถว ข้อมูลเปลี่ยน/แทรกแถวแล้วแถวที่เลือกกลายเป็นแถวอื่น (`DeleteManyButton` ลบผิดรายการ); การลากเรียงเทียบ id แบบ string
+- **`useDataTable` `columnFilters` (regression 0.25.1)**: เทียบด้วยค่าแต่ตั้ง state เป็นค่าจริงจาก prop — เดิม `JSON.parse` ทำให้ `Date` กลายเป็น string; ค่าที่ stringify ไม่ได้ (BigInt/วงอ้างอิง) ไม่ throw ตอน render
+- **`DataTable` ช่องค้นหา**: Enter ไม่ส่งซ้ำอีกรอบหลัง 250 ms; ปุ่มล้างตัวกรองล้างข้อความที่พิมพ์ค้างด้วย
+- **`NumberInput` / `TagsInput` ใน `<label>` ที่ครอบ** (`LabeledField` ไม่ใส่ `htmlFor`): คลิกข้อความ label เคยกดปุ่ม "ลด"/ลบป้ายแรก — ช่องพิมพ์อยู่ก่อนปุ่มใน DOM แล้ววางตำแหน่งด้วย CSS `order`
+- `NumberInput`: ทั้งช่องเคยจางเหมือนปิดใช้งานเมื่อค่าเท่ากับ `min`/`max` (`has-disabled` จับปุ่ม −/+ ที่ปิด) — จางเฉพาะเมื่อช่องปิดจริง; `step` ที่เปลี่ยนหลัง mount ไม่ทำให้ทศนิยมถูกปฏิเสธอีก; `size="sm"` 16px บนมือถือ (iOS ไม่ซูม)
+- `TagsInput`: ค่าที่ถูกปฏิเสธค้างในช่อง = ช่อง invalid (ฟอร์มไม่ส่งรายการที่ขาดค่านั้นไปเงียบ ๆ)
+- `TimePicker`: ปุ่ม "ตอนนี้" ปัดตาม `roundToStep`
+- **`StepForm`**: ดับเบิลคลิก "ถัดไป" ไม่ข้ามขั้นกลาง; `onSubmit` ที่จบเร็ว/sync ไม่ถูกส่งซ้ำ; ตัวควบคุม Base UI ที่ไม่ผ่าน (Select/Checkbox/Switch) โฟกัสตัวมันเอง ไม่ใช่ช่องอื่น
+- **`CommandPalette`**: เช็ก Ctrl/⌘ ก่อนอ่าน `e.key` (keydown จาก autofill ไม่มี key ไม่ throw); ไม่เปิดด้วย AltGr (ctrl+alt); แป้นละตินเทียบ `e.key` (Dvorak ฯลฯ) แป้นไทยใช้ `e.code`; 2 ตัวในหน้าเดียวเปิดทีละตัว
+- `ChatThread`: ข้อความที่พิมพ์ระหว่างรอส่งไม่ถูกล้างทิ้ง
+- `SettingsLayout`: มือถือกด "กลับ" ขณะหัวข้อที่เปิดถูกกรองด้วยคำค้น โฟกัสไปช่องค้นหาแทนหลุดไป body
+- **service worker (PWA)**: reload หลังมีเวอร์ชันใหม่เคยเกิดทุก `focusout` (ย้ายช่อง/กดบันทึก = reload กลางฟอร์ม) — รอนิ่ง 2 วินาทีหลังออกจากช่อง ยกเลิกเมื่อมีการคลิก/พิมพ์/โฟกัสใหม่
+- `PullToRefresh`: ฟัง scroll แบบ capture ที่ document (root ที่ mount ทีหลัง/หน้าเลื่อนทั้ง document ใช้ได้)
+- `ProviderButtons`: ลิงก์ที่ปิดอยู่ดูปิดจริงและถอด `href` (กันคลิกกลาง); `aria-busy` ทั้งสองแบบ
+- `useTableSearchParams`: ค่าที่รอส่งไม่ค้างเมื่อ URL ไม่เปลี่ยน; key `__proto__` จาก URL ไม่ทับ prototype
+- `MonthStepper`: JSDoc กลับมาแสดงใน editor; `DesignSystemShowcase` กระโดดข้ามแท็บรอบใหม่ได้เวลารอเต็ม
+- CSS: scrollbar ทั้งหน้า (`*{scrollbar-width}`) ย้ายเข้า `@layer base` — เดิมทับ `no-scrollbar`/className ของแอปทุกที่ (เช่น คอลัมน์ TimePicker)
+
+### Security
+
+- **`ActionMenu` href + confirm**: นำทางผ่าน `location.assign`/`window.open` ซึ่งไม่กัน `javascript:` แบบ `<a href>` — รับเฉพาะ http(s)/path ภายใน (`lib/safe-url.ts` `safeNavigableUrl` ใช้ร่วมกับ `ClientRedirect`); ลิงก์แท็บใหม่ที่ไม่มี onClick เปิดทันทีในคลิก (ไม่โดน popup blocker)
+- `check:barrel` จับ `export *` ทุกรูปแบบ (alias `@suphark/ui/...`, แพ็กเกจ, quote เดี่ยว, comment ท้ายบรรทัด) และรันใน `verify` ของแพ็กเกจ + `prepublishOnly` (publish ไม่ผ่าน CI ก็ยังถูกตรวจ); README สอนขั้นตอนที่ถูก (`fix:barrel`)
+- showcase: demo ไม่มีค่าที่หน้าตาเหมือนคีย์จริง (`pk_live_`) แล้ว; หน้า time-picker บอกรูปแบบค่า DateTimePicker ที่มี offset
+- tests 12 กรณี (`fixes-0-26-1.test.tsx`, RuleBuilder, service worker)
+
+- showcase (security): `next` ^16.3.5 → ^16.3.8 — 16.3.5 มี advisory **critical** GHSA-vcvr-r3jv-pc5j (RCE ใน `next/og` ImageResponse; showcase ไม่ได้ใช้ `next/og` จึงไม่ถูกโจมตีได้จริง แต่ `pnpm audit` แจ้ง) — `pnpm audit --prod` เหลือ 0; devDependency `next` ของแพ็กเกจ bump ตาม (peer ยัง `>=15`)
+- showcase (security): `@suphark/auth-client` ^0.6.1 → **^0.6.2** (แก้ dot segment ต้นทาง) — ลบตัวกรอง `?next=` ชั่วคราวใน `/auth/[...pi]` ออก; ทดสอบ `/auth/logout` 7 กรณี (`/.//`, `/..//`, `/%2e%2e//`, `/./../..//`, tab, `//`, `/brand`) ด้วย server จริงบนเครื่องแล้ว — ปลายทางไม่ออกนอกโดเมน
+- showcase: `@suphark/config-client` ^0.3.0 → ^0.9.2 (CLI `pi-config pull` ตอน build บน Vercel — ข้าม 0.9.0 ที่ pull ค่าหลายบรรทัด CRLF ไม่ได้; 0.9.x บังคับ `PI_CONFIG_URL` เป็น https, ไม่ตาม redirect, timeout 30s; 0.9.2 แก้ crash exit 127 บน Windows) — ทดสอบ pull ด้วย token จาก env (แบบ Vercel) ได้ 6 คีย์; diff/--check บน Windows exit 0/1 ถูกต้อง 10 รอบไม่ crash
+- showcase (security): `safeNextPath` ปฏิเสธผลที่ normalize แล้วเป็น `//host` — dot segment `/.//evil.com`, `/..//evil.com`, `/%2e%2e//evil.com` เคยผ่าน (origin ตอน parse ยังเดิม) แล้ว redirect ไป evil.com; `/auth/[...pi]` กรอง `?next=` ด้วยตัวนี้ก่อนส่งให้ handler ของ `@suphark/auth-client` 0.6.1 ที่มีช่องเดียวกัน (แก้ต้นทางใน 0.6.2 — ลบตัวกรองได้หลัง bump) — production ก่อน deploy นี้: `curl /auth/logout?next=/.//evil.com` → 303 https://evil.com/ (รายงานโดย pi-auth และ pi-config)
+
 ## [0.26.0] — 2026-10-03
 
 ปิดงานค้างจากผลรีวิว + prop ที่ DueBell ขอ — เพิ่มอย่างเดียว

package/README.md

@@ -154,6 +154,33 @@ export default async function Layout({ children }) {
 <div style={{ "--brand": tenant.color, "--brand-foreground": "oklch(0.985 0 0)" } as React.CSSProperties}>…</div>
 ```
 
+### ปุ่มไอคอน — tooltip มาให้เอง (มาตรฐานทุกโครงการ)
+
+ไอคอนที่ไม่มีข้อความกำกับ ต้องบอกได้ว่าคืออะไรเมื่อวางเมาส์ — `Button` ของแพ็กเกจ **ห่อ `Tooltip` ให้เองเมื่อมี `aria-label` และ children ไม่มีข้อความ** (ไอคอนหรือ `<span className="sr-only">` ไม่นับเป็นข้อความ) ทุก call site จึงได้ทันทีโดยไม่ต้องแก้อะไร รวมถึงปุ่มที่เป็น trigger ของ dialog/menu เพราะปุ่มอยู่ชั้นในสุดของ `render=`
+
+```tsx
+<Button variant="ghost" size="icon-sm" aria-label="ดู client secret"><KeySquareIcon /></Button>
+// → hover/focus แล้วขึ้น "ดู client secret" โดยไม่ต้องห่อ SimpleTooltip
+
+<FormDialog trigger={<Button size="icon-sm" aria-label="แก้ไข"><PencilIcon /></Button>} … />
+// → ได้ tooltip ด้วย (ไม่ต้องมี prop ใหม่ที่ FormDialog/RowActions)
+```
+
+| ต้องการ | เขียน |
+| --- | --- |
+| ข้อความอื่นที่ไม่ใช่ `aria-label` (หรือปุ่มที่มีข้อความแล้วแต่อยากอธิบายเพิ่ม) | `tooltip="ตรวจสอบอีกครั้ง"` |
+| ปิด (เช่นปุ่มในเมนูที่มีข้อความอยู่แล้ว) | `tooltip={false}` |
+| เปลี่ยนด้าน / หน่วงเวลา | `tooltipSide="bottom"`, `tooltipDelay={0}` |
+
+- **ไม่ต้องมี `TooltipProvider`** — Base UI ไม่บังคับ; ใส่ที่ root layout ได้ถ้าอยากคุม delay ร่วมกันทุก tooltip (ค่าเริ่มต้นของ Base UI = 600ms, `TooltipProvider` ของแพ็กเกจตั้ง 0)
+- ปุ่มที่ถูกห่อ `SimpleTooltip` อยู่แล้ว **ไม่ขึ้นสองชั้น** (`SimpleTooltip` ปิดตัวอัตโนมัติให้ด้วย `ButtonTooltipSuppress`) — ถ้าแอปห่อ tooltip ด้วยกลไกอื่นเอง ครอบ `<ButtonTooltipSuppress>` หรือใส่ `tooltip={false}`
+- จอสัมผัสไม่มี hover — `aria-label` ยังทำหน้าที่เดิมให้ screen reader; ข้อความที่ "ต้องอ่านได้ทุกคน" อย่าเก็บไว้ใน tooltip เท่านั้น
+- ไม่มี `aria-label` แต่ใช้รูปแบบ shadcn `<span className="sr-only">ข้อความ</span>` ข้างไอคอน ก็ใช้ข้อความนั้นเป็น tooltip ให้เหมือนกัน
+- ปุ่มที่ `disabled` ไม่ขึ้น tooltip (ปุ่มที่ปิดอยู่ไม่รับ pointer ตามสไตล์ของ shadcn) — ถ้าต้องอธิบายว่าทำไมกดไม่ได้ ให้ห่อ `SimpleTooltip` ที่ `<span>` ครอบปุ่มแทน
+- มี `title="…"` อยู่เดิมให้เอาออก ไม่งั้นจะได้ tooltip ซ้อนกับของเบราว์เซอร์
+- `<button>` ดิบ (ไม่ผ่าน `Button`) ไม่ได้ของนี้ — อีกเหตุผลที่ห้ามเขียนปุ่มเอง
+- ปุ่มไอคอนของแพ็กเกจเอง (`RowActions`, `ActionMenu`, `SimpleDialog` ปุ่มปิด, `DataTable` แบ่งหน้า, `ThemeToggle`, `Notice`, `UploadList`, `TimePicker`, `MonthStepper`, `SecretReveal`, `CommandPalette` …) ได้ tooltip ไปพร้อมกันตั้งแต่ 0.27.0
+
 ### ยืนยันก่อนทำ — ห้ามใช้ `window.confirm`
 
 webview/automation บางตัวปิด `window.confirm` ทิ้ง (กดแล้วไม่เกิดอะไร) และไม่เข้า design system — ใช้ 3 ตัวนี้แทน
@@ -218,7 +245,7 @@ npx suphark-ui-audit --strict   # warning นับเป็น error (ใช้
 ```bash
 pnpm install
 pnpm dev                    # apps/showcase → http://localhost:3200/design-system
-pnpm verify                 # typecheck + biome + lint:base-ui + check:typography + vitest
+pnpm verify                 # typecheck + biome + lint:base-ui + check:typography + check:changelog + check:barrel + audit + vitest
 pnpm --filter @suphark/ui test
 ```
 
@@ -228,7 +255,7 @@ pnpm --filter @suphark/ui test
 cd packages/ui && pnpm dlx shadcn@latest add <name>
 ```
 
-แล้วเพิ่ม `export * from "./components/ui/<name>"` ใน `src/index.ts`
+แล้วเพิ่ม `export * from "./components/ui/<name>"` ใน `src/index.ts` **แล้วรัน `pnpm fix:barrel` ทันที** (แปลงเป็นรายชื่อ export) — ห้ามมี `export *` ค้างใน `src`: server component ที่ import barrel แบบ `export *` ทำให้ทุกหน้าโหลด client component ทั้งแพ็กเกจ (`pnpm check:barrel` ตรวจใน verify, CI และก่อน publish); CLI เขียน `import { cn } from "cn"` ให้เปลี่ยนเป็น `@suphark/ui/lib/utils`
 
 ## Versioning
 
@@ -237,8 +264,9 @@ semver — patch = หน้าตา/บั๊ก, minor = component/prop ใ
 ## Publish
 
 ```bash
+pnpm verify                       # จาก root ก่อนทุกครั้ง (หลัง commit/push แล้ว)
 cd packages/ui
-pnpm publish --access public
+npm publish --access public       # Windows: npm.cmd — prepublishOnly รัน check:barrel + typecheck ให้อีกรอบ
 ```
 
 (ผู้ใช้ `npm login` เอง; ไม่มีขั้น build เพราะส่ง source)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "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 เอง",
@@ -61,7 +61,9 @@
     "test:watch": "vitest",
     "lint:base-ui": "node scripts/audit-base-ui-props.mjs",
     "check:typography": "node scripts/audit-tailwind-typography.mjs",
-    "verify": "pnpm typecheck && pnpm lint:base-ui && pnpm check:typography && pnpm test"
+    "verify": "pnpm typecheck && pnpm check:barrel && pnpm lint:base-ui && pnpm check:typography && pnpm test",
+    "check:barrel": "node ../../scripts/barrel-exports.mjs",
+    "prepublishOnly": "node ../../scripts/barrel-exports.mjs && tsc --noEmit"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -117,7 +119,7 @@
     "@vitejs/plugin-react": "^6.1.0",
     "jsdom": "^29.1.1",
     "lucide-react": "^1.45.0",
-    "next": "^16.3.5",
+    "next": "^16.3.8",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-hook-form": "^7.86.0",

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

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
   CommandDialog,
@@ -155,11 +155,19 @@ export function CommandPalette({
         ? `Digit${key}`
         : null;
     const onKey = (e: KeyboardEvent) => {
-      const matches = e.key.toLowerCase() === key || (code !== null && e.code === code);
-      if ((e.metaKey || e.ctrlKey) && matches) {
-        e.preventDefault();
-        setOpenRef.current(!openRef.current);
-      }
+      // ต้องมี Ctrl/⌘ และไม่ใช่ AltGr (Windows ส่ง AltGr เป็น ctrl+alt — พิมพ์อักษรพิเศษในบางภาษา)
+      if (!(e.metaKey || e.ctrlKey) || e.altKey) return;
+      // palette ตัวอื่น (เช่น 2 ตัวในหน้าเดียว) จัดการปุ่มนี้ไปแล้ว — เปิดได้ทีละตัว
+      if (e.defaultPrevented) return;
+      const pressed = typeof e.key === "string" ? e.key.toLowerCase() : ""; // autofill ส่ง keydown ที่ไม่มี key
+      // อักษรละติน/ตัวเลขเทียบตาม e.key (เคารพแป้นอย่าง Dvorak) — แป้นที่ไม่ใช่ละติน (ไทย "า") ใช้ตำแหน่งปุ่ม e.code
+      const latin = /^[a-z0-9]$/.test(pressed);
+      const matches = latin
+        ? pressed === key
+        : pressed === key || (code !== null && e.code === code);
+      if (!matches) return;
+      e.preventDefault();
+      setOpenRef.current(!openRef.current);
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);

package/src/components/data-table/data-table-pagination.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   Select,
   SelectContent,
@@ -23,6 +24,7 @@ export function DataTablePagination<TData>({
   pageSizeOptions = [10, 20, 30, 40, 50],
   onPageSizeChange,
 }: DataTablePaginationProps<TData>) {
+  const text = useUiText();
   const isRowSelectionEnabled = table.options.enableRowSelection !== false;
 
   return (
@@ -71,40 +73,40 @@ export function DataTablePagination<TData>({
             variant="outline"
             size="icon"
             className="hidden size-8 lg:flex"
+            aria-label={text.pagination?.first ?? "หน้าแรก"}
             onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
           >
-            <span className="sr-only">Go to first page</span>
             <ChevronsLeft />
           </Button>
           <Button
             variant="outline"
             size="icon"
             className="size-8"
+            aria-label={text.pagination?.previous ?? "ก่อนหน้า"}
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
           >
-            <span className="sr-only">Go to previous page</span>
             <ChevronLeft />
           </Button>
           <Button
             variant="outline"
             size="icon"
             className="size-8"
+            aria-label={text.pagination?.next ?? "ถัดไป"}
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
           >
-            <span className="sr-only">Go to next page</span>
             <ChevronRight />
           </Button>
           <Button
             variant="outline"
             size="icon"
             className="hidden size-8 lg:flex"
+            aria-label={text.pagination?.last ?? "หน้าสุดท้าย"}
             onClick={() => table.setPageIndex(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >
-            <span className="sr-only">Go to last page</span>
             <ChevronsRight />
           </Button>
         </div>

package/src/components/data-table/data-table-sortable.tsx

@@ -135,10 +135,11 @@ export function SortableTableProvider<TData>({
 
     const { active, over } = event;
     if (over && active.id !== over.id) {
-      const idOf = (item: TData) =>
-        getRowId ? getRowId(item) : (item as { id?: string | number }).id;
-      const oldIndex = data.findIndex((item) => idOf(item) === active.id);
-      const newIndex = data.findIndex((item) => idOf(item) === over.id);
+      // id ของแถวใน tanstack เป็น string เสมอ (getRowId / row.id / index) — เทียบแบบ string
+      const idOf = (item: TData, index: number) =>
+        String(getRowId ? getRowId(item) : ((item as { id?: string | number }).id ?? index));
+      const oldIndex = data.findIndex((item, i) => idOf(item, i) === String(active.id));
+      const newIndex = data.findIndex((item, i) => idOf(item, i) === String(over.id));
 
       if (oldIndex !== -1 && newIndex !== -1) {
         onReorder(arrayMove(data, oldIndex, newIndex));

package/src/components/data-table/data-table-toolbar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   InputGroup,
   InputGroupAddon,
@@ -56,16 +56,25 @@ export function DataTableToolbar<TData>({
       setSearchDraft(external);
     }
   }, [globalFilter]);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {
     if (searchDraft === committed.current) return;
-    const timer = setTimeout(() => {
+    timer.current = setTimeout(() => {
+      timer.current = null;
       committed.current = searchDraft;
       table.setGlobalFilter(searchDraft);
     }, 250);
-    return () => clearTimeout(timer);
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = null;
+    };
   }, [searchDraft, table]);
+  /** ส่งทันที (Enter / ปุ่มล้าง / ล้างตัวกรอง) — ยกเลิกตัวนับเวลาที่ค้าง ไม่ให้ส่งซ้ำอีกรอบ */
   const commitSearch = (value: string) => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
     setSearchDraft(value);
+    if (committed.current === value) return;
     committed.current = value;
     table.setGlobalFilter(value);
   };
@@ -73,7 +82,7 @@ export function DataTableToolbar<TData>({
   const userColumnFilters = table
     .getState()
     .columnFilters.filter((filter) => !preservedFilterIdSet.has(filter.id));
-  const activeFilterCount = userColumnFilters.length + (globalFilter ? 1 : 0);
+  const activeFilterCount = userColumnFilters.length + (globalFilter || searchDraft ? 1 : 0);
 
   const isFiltered = activeFilterCount > 0;
 
@@ -81,6 +90,8 @@ export function DataTableToolbar<TData>({
     table.setColumnFilters((filters) =>
       filters.filter((filter) => preservedFilterIdSet.has(filter.id)),
     );
+    // ล้างทั้งข้อความที่พิมพ์ค้าง (ยังไม่ถึง 250 ms) และค่าที่ส่งแล้ว
+    commitSearch("");
     table.setGlobalFilter("");
   };
 

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

@@ -30,6 +30,33 @@ function getNestedValue<TData>(obj: TData, path: string): unknown {
   return current;
 }
 
+let refSeq = 0;
+const refKeys = new WeakMap<object, string>();
+/** key สำหรับเทียบค่า: JSON ถ้าได้ ไม่งั้นใช้ตัวอ้างอิงของ object */
+function stableKey(value: unknown): string | undefined {
+  if (value === undefined) return undefined;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    if (value && typeof value === "object") {
+      let k = refKeys.get(value);
+      if (!k) {
+        k = `ref:${++refSeq}`;
+        refKeys.set(value, k);
+      }
+      return k;
+    }
+    return String(value);
+  }
+}
+
+function defaultRowId<T>(row: T, index: number, parent?: { id: string }): string {
+  const id = (row as { id?: unknown } | null)?.id;
+  if (typeof id === "string" || typeof id === "number")
+    return parent ? `${parent.id}.${id}` : String(id);
+  return parent ? `${parent.id}.${index}` : String(index);
+}
+
 export function useDataTable<TData, TValue>({
   columns,
   data,
@@ -68,12 +95,16 @@ export function useDataTable<TData, TValue>({
 
   // Sync with prop if provided — เทียบด้วยค่าเหมือน sorting/pagination: ผู้เรียกมักส่ง array literal ใหม่ทุก render
   // ถ้าผูกกับตัวอ้างอิง effect จะรันทุก render → render ซ้ำ + ล้าง memo ของ row model + ทับตัวกรองที่ผู้ใช้เพิ่งเลือก
-  const columnFiltersKey = columnFiltersProp ? JSON.stringify(columnFiltersProp) : undefined;
+  // ใช้ key แค่ตัดสินว่า "เปลี่ยนจริงไหม" แต่ตั้ง state เป็นค่าจริงจาก prop (Date/Set ฯลฯ ไม่กลายเป็น string)
+  // ค่าที่ stringify ไม่ได้ (BigInt, วงอ้างอิง) ถอยไปเทียบด้วยตัวอ้างอิงแทน throw ตอน render
+  const columnFiltersKey = stableKey(columnFiltersProp);
+  const columnFiltersPropRef = React.useRef(columnFiltersProp);
+  columnFiltersPropRef.current = columnFiltersProp;
   React.useEffect(() => {
     if (columnFiltersKey === undefined) return;
-    setColumnFilters((current) =>
-      JSON.stringify(current) === columnFiltersKey ? current : JSON.parse(columnFiltersKey),
-    );
+    const next = columnFiltersPropRef.current;
+    if (next)
+      setColumnFilters((current) => (stableKey(current) === columnFiltersKey ? current : next));
   }, [columnFiltersKey]);
   const [sorting, setSorting] = React.useState<SortingState>(
     () => sortingProp ?? (initialState?.sorting as SortingState | undefined) ?? [],
@@ -188,7 +219,9 @@ export function useDataTable<TData, TValue>({
     },
     meta,
     getSubRows: getSubRows,
-    getRowId: getRowId,
+    // ค่าเริ่มต้นใช้ `row.id` ถ้ามี — tanstack ใช้ลำดับแถว (index) ทำให้แถวที่เลือกไว้กลายเป็นแถวอื่นเมื่อข้อมูลเปลี่ยน
+    // (DeleteManyButton ลบผิดรายการ) — ไม่มี id = ใช้ index เหมือนเดิม
+    getRowId: getRowId ?? defaultRowId,
     getExpandedRowModel: getExpandedRowModel(),
     filterFromLeafRows: true,
     enableRowSelection,

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

@@ -59,6 +59,7 @@ export function DesignSystemShowcase({
   const tries = React.useRef(0);
   const [retry, setRetry] = React.useState(0);
   const jumpTo = React.useCallback((tab: string, anchor?: string) => {
+    tries.current = 0; // การกระโดดครั้งใหม่ได้เวลารอแท็บ lazy เต็มรอบ
     setActiveTab(tab);
     setPendingAnchor(anchor ?? "__top__");
   }, []);

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

@@ -56,7 +56,11 @@ export function PullToRefresh({
     const isRefreshing = () => isRefreshingRef.current;
     const isMobileViewport = () => window.innerWidth < MOBILE_BREAKPOINT;
     const getRoot = () => document.querySelector<HTMLElement>(rootSelector);
-    const isRootAtTop = (root: HTMLElement) => root.scrollTop <= 0;
+    // root เป็น <html>/<body> = หน้าเลื่อนทั้ง document → ดูตำแหน่งของ window
+    const isRootAtTop = (root: HTMLElement) =>
+      root === document.documentElement || root === document.body
+        ? window.scrollY <= 0
+        : root.scrollTop <= 0;
 
     const resetPull = () => {
       startRef.current = null;
@@ -65,6 +69,8 @@ export function PullToRefresh({
     };
 
     const handleTouchStart = (event: TouchEvent) => {
+      // root ที่ mount หลัง PullToRefresh และไม่เคย scroll: ตรวจตอนเริ่มแตะด้วย (ครั้งถัดไปดึงได้แน่นอน)
+      syncMoveListener();
       const touch = event.touches[0];
       if (!isMobileViewport() || isRefreshing() || event.touches.length !== 1 || !touch) {
         resetPull();
@@ -127,16 +133,17 @@ export function PullToRefresh({
         moveAttached = false;
       }
     };
-    const root = getRoot();
     syncMoveListener();
-    root?.addEventListener("scroll", syncMoveListener, { passive: true });
+    // ฟัง scroll แบบ capture ที่ document: ได้ทั้ง root ที่ mount ทีหลัง/ถูกแทนที่ และหน้าที่เลื่อนทั้ง document
+    // (หา root ใหม่ทุกครั้งใน syncMoveListener — เดิมผูกกับ root ที่เจอตอน mount ครั้งเดียว)
+    document.addEventListener("scroll", syncMoveListener, { capture: true, passive: true });
     window.addEventListener("resize", syncMoveListener, { passive: true });
 
     window.addEventListener("touchstart", handleTouchStart, { passive: true });
     window.addEventListener("touchend", handleTouchEnd, { passive: true });
     window.addEventListener("touchcancel", resetPull, { passive: true });
     return () => {
-      root?.removeEventListener("scroll", syncMoveListener);
+      document.removeEventListener("scroll", syncMoveListener, { capture: true });
       window.removeEventListener("resize", syncMoveListener);
       window.removeEventListener("touchstart", handleTouchStart);
       window.removeEventListener("touchmove", handleTouchMove);

package/src/components/pwa/service-worker-updates.ts

@@ -1,4 +1,6 @@
 const UPDATE_CHECK_INTERVAL_MS = 15 * 60_000;
+/** หลังออกจากช่องกรอก รอให้นิ่งก่อน reload — ระหว่างย้ายช่อง/กดปุ่มบันทึก activeElement เป็น body ชั่วขณะ */
+const IDLE_RELOAD_MS = 2000;
 
 const isEditableElement = (element: Element | null) => {
   if (!element) return false;
@@ -16,7 +18,7 @@ export const canReloadNow = (doc: Document) =>
  *
  * - ขอให้ browser เช็ค script ใหม่ตอนโหลด, ทุกครั้งที่กลับมาที่แท็บ, และทุก 15 นาที
  * - worker ฝั่งแอปต้อง `skipWaiting()` + `clients.claim()` (ดู README) → ตัวใหม่คุมหน้าเมื่อติดตั้งเสร็จ
- *   แล้ว `controllerchange` จะ reload หน้าให้ bundle ใหม่ทำงานทันที — เลื่อน reload เฉพาะขณะผู้ใช้กำลังพิมพ์
+ *   แล้ว `controllerchange` จะ reload หน้าให้ bundle ใหม่ทำงานทันที — ขณะผู้ใช้กำลังพิมพ์เลื่อนไปจนออกจากช่องและนิ่ง 2 วินาที
  *   และไม่ reload ตอนติดตั้งครั้งแรก
  *
  * คืนฟังก์ชัน cleanup
@@ -42,6 +44,22 @@ export function watchServiceWorkerUpdates(
     if (canReloadNow(doc)) reload();
   };
 
+  // ออกจากช่องกรอก: ไม่ reload ทันที (focusout เกิดก่อน focus ไปช่องถัดไป และก่อน click ของปุ่มบันทึก
+  // → reload กลางการกรอก/ทิ้งการบันทึก) — รอ 2 วินาทีที่ไม่มีการกด/พิมพ์/โฟกัสใหม่ แล้วค่อยลอง
+  let idleTimer: number | null = null;
+  const cancelIdleReload = () => {
+    if (idleTimer !== null) win.clearTimeout(idleTimer);
+    idleTimer = null;
+  };
+  const scheduleIdleReload = () => {
+    cancelIdleReload();
+    if (!reloadPending) return;
+    idleTimer = win.setTimeout(() => {
+      idleTimer = null;
+      tryReload();
+    }, IDLE_RELOAD_MS);
+  };
+
   const handleControllerChange = () => {
     // ติดตั้งครั้งแรก: หน้านี้รัน bundle ปัจจุบันอยู่แล้ว
     if (!hadController) return;
@@ -63,14 +81,19 @@ export function watchServiceWorkerUpdates(
 
   container.addEventListener("controllerchange", handleControllerChange);
   doc.addEventListener("visibilitychange", handleVisibilityChange);
-  doc.addEventListener("focusout", tryReload);
+  doc.addEventListener("focusout", scheduleIdleReload);
+  // ผู้ใช้ยังทำอะไรอยู่ = เลื่อนออกไป (focusout ครั้งถัดไปจะนับใหม่)
+  const activity = ["focusin", "pointerdown", "keydown"] as const;
+  for (const type of activity) doc.addEventListener(type, cancelIdleReload, true);
   const interval = win.setInterval(checkForUpdate, UPDATE_CHECK_INTERVAL_MS);
   checkForUpdate();
 
   return () => {
     container.removeEventListener("controllerchange", handleControllerChange);
     doc.removeEventListener("visibilitychange", handleVisibilityChange);
-    doc.removeEventListener("focusout", tryReload);
+    doc.removeEventListener("focusout", scheduleIdleReload);
+    for (const type of activity) doc.removeEventListener(type, cancelIdleReload, true);
+    cancelIdleReload();
     win.clearInterval(interval);
   };
 }

package/src/components/shared/action-menu.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,6 +11,8 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "@suphark/ui/components/ui/dropdown-menu";
+import { errorMessage, failedResult, isNavigationError } from "@suphark/ui/lib/action-result";
+import { safeNavigableUrl } from "@suphark/ui/lib/safe-url";
 import { MoreHorizontal } from "lucide-react";
 import { type ReactElement, type ReactNode, useState } from "react";
 import { toast } from "sonner";
@@ -70,25 +72,32 @@ export function ActionMenu({
     if (!fn) return true;
     setPending(true);
     try {
-      await fn();
+      // คืน { ok: false, error } (FormState) ก็ถือว่าล้มเหลวเหมือน throw
+      const failed = failedResult(await fn(), text.actionFailed ?? "ดำเนินการไม่สำเร็จ");
+      if (failed) {
+        toast.error(failed);
+        return false;
+      }
       return true;
     } catch (err) {
-      toast.error(
-        err instanceof Error && err.message
-          ? err.message
-          : (text.actionFailed ?? "ดำเนินการไม่สำเร็จ"),
-      );
+      // server action ที่ redirect() = สำเร็จ (Next นำทางให้แล้ว) — ไม่แสดง "NEXT_REDIRECT"
+      if (isNavigationError(err)) return true;
+      toast.error(errorMessage(err, text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
       return false;
     } finally {
       setPending(false);
     }
   };
 
-  /** ลิงก์ที่มี confirm: ไปหลังยืนยันแล้วเท่านั้น */
+  /**
+   * ลิงก์ที่มี confirm: ไปหลังยืนยันแล้วเท่านั้น — ไม่ได้ผ่าน `<a href>` (ที่ React กัน javascript: ให้)
+   * จึงต้องรับเฉพาะ http(s) และ path ภายในเอง
+   */
   const follow = (item: ActionMenuCommand) => {
-    if (!item.href) return;
-    if (item.external) window.open(item.href, "_blank", "noopener,noreferrer");
-    else window.location.assign(item.href);
+    const url = safeNavigableUrl(item.href);
+    if (!url) return;
+    if (item.external) window.open(url, "_blank", "noopener,noreferrer");
+    else window.location.assign(url);
   };
 
   const spec = confirming?.confirm ? normalizeConfirm(confirming.confirm) : null;
@@ -164,6 +173,12 @@ export function ActionMenu({
           destructive={spec.destructive ?? confirming.destructive}
           pending={pending}
           onConfirm={async () => {
+            // ลิงก์แท็บใหม่ที่ไม่มี onClick: เปิดทันทีใน event คลิก (หลัง await เบราว์เซอร์บล็อก popup)
+            if (confirming.external && !confirming.onClick) {
+              setConfirming(null);
+              follow(confirming);
+              return;
+            }
             // ล้มเหลว = คง dialog ไว้ให้ลองใหม่ (toast แจ้งแล้วใน run)
             if (!(await run(confirming.onClick))) return;
             setConfirming(null);

package/src/components/shared/auth-parts.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   InputGroup,
   InputGroupAddon,
@@ -104,11 +104,12 @@ export function ProviderButtons({
           <Button
             key={p.id}
             variant="outline"
-            className={buttonClass}
+            // ลิงก์ที่ปิดอยู่: Button ใช้ :disabled ที่ <a> ไม่มี → ทำให้ดูปิดเอง และถอด href (กันคลิกกลาง/เปิดแท็บใหม่)
+            className={cn(buttonClass, (disabled || busy) && "pointer-events-none opacity-50")}
             disabled={disabled || busy}
             aria-busy={busy || undefined}
             nativeButton={false}
-            render={<a href={p.href} {...a11y} />}
+            render={<a href={disabled || busy ? undefined : p.href} {...a11y} />}
           >
             {content}
           </Button>
@@ -119,6 +120,7 @@ export function ProviderButtons({
             variant="outline"
             className={buttonClass}
             disabled={disabled || busy}
+            aria-busy={busy || undefined}
             {...a11y}
             onClick={p.onClick}
           >