@suphark/ui 0.25.1 → 0.26.1

package/CHANGELOG.md

@@ -2,6 +2,67 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [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 ขอ — เพิ่มอย่างเดียว
+
+### Added
+
+- `NumberInput`: `inputRef` (ref ของช่องที่พิมพ์ — focus เองได้) และ `autoFocus` (คำขอจาก DueBell)
+- `TimePicker`: `roundToStep` — ปัดนาทีที่พิมพ์ลงตาม `minuteStep` (เช่น step 60 + พิมพ์ 14:30 → 14:00); ค่าเริ่มต้นเก็บตามที่พิมพ์เหมือนเดิม (คำขอจาก DueBell)
+
+### Changed
+
+- **ช่องกรอกใช้ขนาดตัวอักษรตามบทบาท `text-body`** (16px มือถือ / 15px จอกว้าง) — `Input`, `Textarea`, `SelectTrigger`, `NativeSelect` (+ `NumberInput`, `TagsInput`): เดิม `text-base md:text-sm` = 14px บนจอกว้าง เล็กกว่าข้อความรอบข้าง 1px และ `text-body` ที่แอปใส่ให้ช่องได้ผลแค่มือถือ (pi-done ต้องเติม `md:text-body` เอง 19 จุด — ลบได้แล้ว); `SelectTrigger`/`NativeSelect` เดิม 14px แม้บนมือถือ (iOS ซูมเมื่อโฟกัส) — แก้ไฟล์ shadcn 4 ไฟล์เป็นข้อยกเว้น (เพิ่มในรายการคืนไฟล์หลัง `shadcn add --overwrite` ใน CLAUDE.md); `className` ของแอปยังแทนได้ (`cn` รู้จักคลาสตามบทบาท)
+- ปุ่ม `ActionButton`/`LinkButton` ที่มี tooltip ไม่สร้าง `TooltipProvider` ต่อปุ่มแล้ว (ตาราง 50 แถว = 100+ provider) — ใช้ `delay={0}` ที่ trigger แทน หน้าตา/จังหวะเหมือนเดิม
+- `DesignSystemShowcase`: แท็บอื่นนอกจาก "ภาพรวม" โหลดแบบ lazy เมื่อเปิดแท็บ (เดิม import ทุกแท็บ ~1 MB) — ลิงก์ข้ามแท็บไปหัวข้อรอแท็บโหลดเสร็จก่อนเลื่อน
+- ลบ dependency `cn` ที่ไม่ได้ใช้ (แอปไม่ต้องติดตั้งเพิ่ม)
+- docs: agent-rules — barrel ที่ client import ห้าม re-export schema ของ zod (ค่า) ให้ export แค่ type (DueBell −18% ต่อหน้า); `ChartConfig` ใช้เฉพาะค่าที่แอปกำหนดเอง (ค่าถูกเขียนลง `<style>` ตรง ๆ)
+- CI: `permissions: contents: read` (+ `pull-requests: read` ให้ gitleaks) — GITHUB_TOKEN อ่านได้อย่างเดียว; pin action ด้วย commit SHA (checkout v4.4.0, gitleaks-action v2.3.9, pnpm/action-setup v4.3.0, setup-node v4.4.0)
+- showcase: `/components/[slug]` โหลด demo แบบ `next/dynamic` ต่อ slug (`src/docs/demos.tsx` + `DemoView`) — เดิมทุกหน้าโหลด demo ทั้ง 129 ตัว (~409 kB gzip ต่อหน้า เช่น `/components/badge` พก recharts)
+- showcase: demo `code-block`/`secret-reveal` ใช้ค่า `example_…` แทน `sk_live_…` (ไม่ให้ secret scanner แจ้งเตือนผิด)
+- showcase: `@suphark/auth-client` ^0.1.7 → **^0.6.1** (แก้ open redirect ใน `safeNextPath` ของ handler `/auth/login|callback|logout` — ทดสอบ `/auth/logout?next=/%09/evil.com` แล้วไม่ออกนอกโดเมน); breaking ระหว่างทาง (ลบ Prisma adapter, เปลี่ยนชื่อ `ACCESS_DENIED`) ไม่กระทบ showcase
+
 ## [0.25.1] — 2026-10-02
 
 แก้ตามผลรีวิว codebase (bug / security / performance) — ไม่เปลี่ยน props

package/README.md

@@ -218,7 +218,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 +228,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 +237,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.25.1",
+  "version": "0.26.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 เอง",
@@ -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",
@@ -72,7 +74,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "cn": "^0.3.0",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
@@ -118,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

@@ -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-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

@@ -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

@@ -12,14 +12,38 @@ import {
   Zap,
 } from "lucide-react";
 import * as React from "react";
-import { ShowcaseDataDisplay } from "./sections/showcase-data-display";
-import { ShowcaseFeedback } from "./sections/showcase-feedback";
-import { ShowcaseForms } from "./sections/showcase-forms";
-import { ShowcaseFoundations } from "./sections/showcase-foundations";
-import { ShowcaseGuidelinesRecipes } from "./sections/showcase-guidelines-recipes";
-import { ShowcaseOverlaysNavigation } from "./sections/showcase-overlays-navigation";
 import { ShowcaseOverview } from "./sections/showcase-overview";
-import { ShowcasePrimitives } from "./sections/showcase-primitives";
+
+// แท็บอื่นนอกจากภาพรวมโหลดเมื่อเปิดแท็บนั้น — เดิม import ทุกแท็บ (ปฏิทิน, ตาราง, dnd-kit, cmdk …) ~1 MB ทั้งที่เห็นทีละแท็บ
+const ShowcaseDataDisplay = React.lazy(() =>
+  import("./sections/showcase-data-display").then((m) => ({ default: m.ShowcaseDataDisplay })),
+);
+const ShowcaseFeedback = React.lazy(() =>
+  import("./sections/showcase-feedback").then((m) => ({ default: m.ShowcaseFeedback })),
+);
+const ShowcaseForms = React.lazy(() =>
+  import("./sections/showcase-forms").then((m) => ({ default: m.ShowcaseForms })),
+);
+const ShowcaseFoundations = React.lazy(() =>
+  import("./sections/showcase-foundations").then((m) => ({ default: m.ShowcaseFoundations })),
+);
+const ShowcaseGuidelinesRecipes = React.lazy(() =>
+  import("./sections/showcase-guidelines-recipes").then((m) => ({
+    default: m.ShowcaseGuidelinesRecipes,
+  })),
+);
+const ShowcaseOverlaysNavigation = React.lazy(() =>
+  import("./sections/showcase-overlays-navigation").then((m) => ({
+    default: m.ShowcaseOverlaysNavigation,
+  })),
+);
+const ShowcasePrimitives = React.lazy(() =>
+  import("./sections/showcase-primitives").then((m) => ({ default: m.ShowcasePrimitives })),
+);
+
+function SectionLoading() {
+  return <div className="h-96 animate-pulse rounded-xl bg-muted/40" aria-busy="true" />;
+}
 
 export function DesignSystemShowcase({
   links,
@@ -32,10 +56,14 @@ export function DesignSystemShowcase({
 
   /** สลับแท็บแล้วเลื่อนไปหัวข้อ — เลื่อนใน effect หลังแท็บใหม่ render แล้ว (ตำแหน่งจึงถูก) ชดเชย header ที่ sticky */
   const [pendingAnchor, setPendingAnchor] = React.useState<string | null>(null);
+  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__");
   }, []);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: retry ใช้เป็นตัวกระตุ้นให้ลองหาหัวข้อซ้ำระหว่างรอแท็บ lazy
   React.useEffect(() => {
     if (!pendingAnchor) return;
     // หน่วงเล็กน้อยให้ Tabs โฟกัส trigger ใหม่เสร็จก่อน (การโฟกัสเลื่อนหน้าไปที่แถบแท็บ) แล้วค่อยเลื่อนไปหัวข้อ
@@ -47,15 +75,22 @@ export function DesignSystemShowcase({
       }
       const el = document.getElementById(pendingAnchor);
       if (!el) {
+        // แท็บที่โหลดแบบ lazy อาจยัง render ไม่เสร็จ — ลองใหม่ได้ถึง ~2 วินาที
+        if (tries.current++ < 25) {
+          setRetry((r) => r + 1);
+          return;
+        }
+        tries.current = 0;
         setPendingAnchor(null);
         return;
       }
+      tries.current = 0;
       el.style.scrollMarginTop = "88px"; // ชดเชย header ที่ sticky
       el.scrollIntoView({ behavior: "smooth", block: "start" });
       setPendingAnchor(null);
     }, 80);
     return () => window.clearTimeout(timer);
-  }, [pendingAnchor]);
+  }, [pendingAnchor, retry]);
 
   const tabItems = [
     { value: "overview", label: "ภาพรวม", icon: LayoutGrid },
@@ -109,31 +144,45 @@ export function DesignSystemShowcase({
         </TabsContent>
 
         <TabsContent value="foundations" className="mt-0 outline-none">
-          <ShowcaseFoundations />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseFoundations />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="primitives" className="mt-0 outline-none">
-          <ShowcasePrimitives />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcasePrimitives />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="forms" className="mt-0 outline-none">
-          <ShowcaseForms />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseForms />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="data-display" className="mt-0 outline-none">
-          <ShowcaseDataDisplay />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseDataDisplay />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="overlays" className="mt-0 outline-none">
-          <ShowcaseOverlaysNavigation />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseOverlaysNavigation />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="feedback" className="mt-0 outline-none">
-          <ShowcaseFeedback />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseFeedback />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="guidelines-recipes" className="mt-0 outline-none">
-          <ShowcaseGuidelinesRecipes />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseGuidelinesRecipes />
+          </React.Suspense>
         </TabsContent>
       </Tabs>
     </div>

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

@@ -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

@@ -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}
           >