@suphark/ui 0.26.0 → 0.26.1

package/CHANGELOG.md

@@ -2,6 +2,46 @@
 
 รูปแบบตาม [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 ขอ — เพิ่มอย่างเดียว

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.26.0",
+  "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",
@@ -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

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

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

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

package/src/components/shared/button/confirm-action-button.tsx

@@ -10,23 +10,13 @@ import {
   normalizeConfirm,
 } from "@suphark/ui/components/shared/confirm-dialog";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { errorMessage, failedResult, isNavigationError } from "@suphark/ui/lib/action-result";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { toast } from "sonner";
 
-/** ข้อความจาก error ที่แสดงให้ผู้ใช้ได้ (Error.message ที่ไม่ว่าง ไม่งั้นใช้ fallback) */
-export function errorMessage(err: unknown, fallback: string): string {
-  return err instanceof Error && err.message ? err.message : fallback;
-}
-
-/** action คืน `FormState` แบบ `{ ok: false, error }` (ไม่ได้ throw) = ล้มเหลว → ข้อความ error; อย่างอื่น = null */
-export function failedResult(result: unknown, fallback: string): string | null {
-  if (result && typeof result === "object" && "ok" in result && result.ok === false) {
-    const error = "error" in result ? result.error : undefined;
-    return typeof error === "string" && error ? error : fallback;
-  }
-  return null;
-}
+// ตัวช่วยตีความผล action ย้ายไป lib/action-result (ไม่พึ่ง next — ใช้ได้จาก barrel) — คง export เดิมไว้
+export { errorMessage, failedResult } from "@suphark/ui/lib/action-result";
 
 /**
  * ปุ่มเดี่ยวที่ถามยืนยัน (ConfirmDialog) ก่อนเรียก server action — ใช้แทน `<form action>` + window.confirm
@@ -92,6 +82,12 @@ export function ConfirmActionButton({
                 return;
               }
             } catch (err) {
+              // action redirect() = สำเร็จ (Next นำทางให้แล้ว) — ปิด dialog เงียบ ๆ ไม่แสดง "NEXT_REDIRECT"
+              if (isNavigationError(err)) {
+                onDone?.();
+                setOpen(false);
+                return;
+              }
               toast.error(errorMessage(err, fallback));
               return;
             }

package/src/components/shared/chat-thread.tsx

@@ -24,6 +24,7 @@ import {
   MessageScrollerViewport,
 } from "@suphark/ui/components/ui/message-scroller";
 import { Spinner } from "@suphark/ui/components/ui/spinner";
+import { errorMessage, failedResult, isNavigationError } from "@suphark/ui/lib/action-result";
 import { cn } from "@suphark/ui/lib/utils";
 import { ArrowDown, SendHorizontal } from "lucide-react";
 import { type ReactNode, useState } from "react";
@@ -156,15 +157,21 @@ function ChatComposer({
 
   const send = async () => {
     if (!canSend) return;
+    const sent = value;
     setPending(true);
+    // ล้างช่องเฉพาะเมื่อผู้ใช้ยังไม่ได้พิมพ์ต่อระหว่างรอส่ง (ไม่ทิ้งข้อความใหม่)
+    const clearSent = () => setValue((current) => (current === sent ? "" : current));
     try {
-      await onSend(value.trim());
-      setValue("");
+      const failed = failedResult(await onSend(sent.trim()), failedText ?? "ดำเนินการไม่สำเร็จ");
+      if (failed) toast.error(failed);
+      else clearSent();
     } catch (err) {
-      // ส่งไม่สำเร็จ: คงข้อความไว้ในช่องให้ลองใหม่ + แจ้งผู้ใช้ (เดิมเงียบ — unhandled rejection)
-      toast.error(
-        err instanceof Error && err.message ? err.message : (failedText ?? "ดำเนินการไม่สำเร็จ"),
-      );
+      if (isNavigationError(err)) {
+        clearSent();
+        return;
+      }
+      // ส่งไม่สำเร็จ: คงข้อความไว้ในช่องให้ลองใหม่ + แจ้งผู้ใช้
+      toast.error(errorMessage(err, failedText ?? "ดำเนินการไม่สำเร็จ"));
     } finally {
       setPending(false);
     }

package/src/components/shared/client-redirect.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { safeNavigableUrl } from "@suphark/ui/lib/safe-url";
 import { useEffect } from "react";
 
 /**
@@ -9,17 +10,12 @@ import { useEffect } from "react";
  */
 export function ClientRedirect({ to }: { to: string }) {
   useEffect(() => {
-    let url: URL;
-    try {
-      url = new URL(to, window.location.href);
-    } catch {
+    const url = safeNavigableUrl(to);
+    if (!url) {
+      console.error("ClientRedirect: ปฏิเสธปลายทางที่ไม่ใช่ http(s)");
       return;
     }
-    if (url.protocol !== "http:" && url.protocol !== "https:") {
-      console.error(`ClientRedirect: ปฏิเสธปลายทางที่ไม่ใช่ http(s): ${url.protocol}`);
-      return;
-    }
-    window.location.replace(url.href);
+    window.location.replace(url);
   }, [to]);
 
   return null;

package/src/components/shared/dialogs-provider.tsx

@@ -12,11 +12,13 @@ import {
 } from "@suphark/ui/components/ui/alert-dialog";
 import { Checkbox } from "@suphark/ui/components/ui/checkbox";
 import { Input } from "@suphark/ui/components/ui/input";
+import { Label } from "@suphark/ui/components/ui/label";
 import {
   createContext,
   type ReactNode,
   useCallback,
   useContext,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -104,6 +106,7 @@ export function DialogsProvider({ children }: { children: ReactNode }) {
     setRequest(next);
   }, []);
 
+  const typeToConfirmId = useId();
   const settle = useCallback((value: Result) => {
     resolveRef.current?.(value);
     resolveRef.current = null;
@@ -120,6 +123,7 @@ export function DialogsProvider({ children }: { children: ReactNode }) {
         }),
       confirm: (spec) =>
         new Promise((resolve) => {
+          setPromptValue(""); // ช่องพิมพ์ยืนยัน (requireText) เริ่มว่างทุกครั้ง
           open({ ...normalizeConfirm(spec), mode: "confirm" }, (value) => resolve(value === true));
         }),
       prompt: (spec) =>
@@ -196,6 +200,28 @@ export function DialogsProvider({ children }: { children: ReactNode }) {
               />
             )}
 
+            {request.mode === "confirm" && request.requireText && (
+              // พิมพ์ข้อความยืนยันก่อนกด (เหมือน ConfirmDialog — เดิม useDialogs().confirm ข้าม requireText ไปเงียบ ๆ)
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor={typeToConfirmId} className="font-normal text-sm">
+                  {request.requireTextLabel ?? (
+                    <>
+                      {text.confirmTypeToConfirm ?? "พิมพ์"}{" "}
+                      <span className="font-medium">{request.requireText}</span>{" "}
+                      {text.confirmTypeToConfirmSuffix ?? "เพื่อยืนยัน"}
+                    </>
+                  )}
+                </Label>
+                <Input
+                  id={typeToConfirmId}
+                  value={promptValue}
+                  onChange={(event) => setPromptValue(event.target.value)}
+                  autoComplete="off"
+                  spellCheck={false}
+                />
+              </div>
+            )}
+
             {request.mode === "checklist" && (
               <div className="flex flex-col gap-2">
                 {request.options?.map((option) => {
@@ -247,6 +273,11 @@ export function DialogsProvider({ children }: { children: ReactNode }) {
               ) : (
                 <AlertDialogAction
                   variant={request.destructive ? "destructive" : "default"}
+                  disabled={
+                    request.mode === "confirm" &&
+                    Boolean(request.requireText) &&
+                    promptValue.trim() !== request.requireText
+                  }
                   onClick={() => settle(confirmResult())}
                 >
                   {request.confirmLabel ?? confirmLabelByMode[request.mode]}

package/src/components/shared/form/number-input.tsx

@@ -3,7 +3,7 @@
 import { NumberField } from "@base-ui/react/number-field";
 import { cn } from "@suphark/ui/lib/utils";
 import { MinusIcon, PlusIcon } from "lucide-react";
-import type { ReactNode, Ref } from "react";
+import { type ReactNode, type Ref, useCallback, useEffect, useRef } from "react";
 import { useUiText } from "../ui-text";
 
 /**
@@ -14,9 +14,11 @@ import { useUiText } from "../ui-text";
 function relaxHiddenStep(el: HTMLInputElement | null) {
   if (el) el.step = "any";
 }
+// หมายเหตุ: เมื่อ prop step เปลี่ยน React เขียน attribute step ใหม่ → effect ใน NumberInput ตั้ง "any" ซ้ำ
 
 const SIZE = {
-  sm: { group: "h-7", button: "w-7 [&_svg]:size-3.5", text: "text-sm" },
+  // มือถือ ≥16px (iOS ไม่ซูมตอนโฟกัส) — จอกว้างค่อยเล็กลง
+  sm: { group: "h-7", button: "w-7 [&_svg]:size-3.5", text: "text-base md:text-sm" },
   default: { group: "h-8", button: "w-8 [&_svg]:size-4", text: "text-body" },
 } as const;
 
@@ -91,6 +93,16 @@ export function NumberInput({
   autoFocus?: boolean;
 }) {
   const text = useUiText().number;
+  const hiddenEl = useRef<HTMLInputElement | null>(null);
+  const hiddenRef = useCallback((el: HTMLInputElement | null) => {
+    hiddenEl.current = el;
+    relaxHiddenStep(el);
+  }, []);
+  // step เปลี่ยนหลัง mount → React เขียน attribute step ใหม่ → ตั้ง "any" ซ้ำ
+  // biome-ignore lint/correctness/useExhaustiveDependencies: step เป็นตัวกระตุ้น — React เขียน attribute step ใหม่ทุกครั้งที่ prop เปลี่ยน
+  useEffect(() => {
+    relaxHiddenStep(hiddenEl.current);
+  }, [step]);
   const s = SIZE[size];
   const buttonClass = cn(
     "flex shrink-0 items-center justify-center text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-50",
@@ -113,25 +125,16 @@ export function NumberInput({
       required={required}
       disabled={disabled}
       readOnly={readOnly}
-      inputRef={relaxHiddenStep}
+      inputRef={hiddenRef}
       className={cn("w-full", className)}
     >
       <NumberField.Group
         data-slot="number-input"
         className={cn(
-          "flex w-full min-w-0 items-stretch overflow-hidden rounded-lg border border-input bg-transparent transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-disabled:opacity-50 dark:bg-input/30",
+          "flex w-full min-w-0 items-stretch overflow-hidden rounded-lg border border-input bg-transparent transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-[input:disabled]:opacity-50 dark:bg-input/30",
           s.group,
         )}
       >
-        {!hideButtons && (
-          <NumberField.Decrement
-            aria-label={text?.decrement ?? "ลด"}
-            className={cn(buttonClass, "border-r border-input")}
-          >
-            <MinusIcon />
-          </NumberField.Decrement>
-        )}
-        {prefix && <span className={cn(affix, !hideButtons && "pr-0")}>{prefix}</span>}
         <NumberField.Input
           ref={inputRef}
           autoFocus={autoFocus}
@@ -146,6 +149,18 @@ export function NumberInput({
             inputClassName,
           )}
         />
+        {/* ปุ่มลด/prefix อยู่หลัง input ใน DOM (label ที่ครอบช่องนี้คลิกแล้วเลือก input ไม่ใช่ปุ่มลด) แต่แสดงด้านซ้ายด้วย order */}
+        {!hideButtons && (
+          <NumberField.Decrement
+            aria-label={text?.decrement ?? "ลด"}
+            className={cn(buttonClass, "order-first border-r border-input")}
+          >
+            <MinusIcon />
+          </NumberField.Decrement>
+        )}
+        {prefix && (
+          <span className={cn(affix, "order-first", !hideButtons && "pr-0")}>{prefix}</span>
+        )}
         {suffix && <span className={cn(affix, !hideButtons && "pl-0")}>{suffix}</span>}
         {!hideButtons && (
           <NumberField.Increment

package/src/components/shared/form/tags-input.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@suphark/ui/lib/utils";
 import { XIcon } from "lucide-react";
-import { type ClipboardEvent, type KeyboardEvent, useId, useRef, useState } from "react";
+import { type ClipboardEvent, type KeyboardEvent, useEffect, useId, useRef, useState } from "react";
 import { useUiText } from "../ui-text";
 
 /**
@@ -59,6 +59,10 @@ export function TagsInput({
   const [error, setError] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const errorId = useId();
+  // ค่าที่ถูกปฏิเสธยังค้างในช่อง = ช่อง invalid จริง → ฟอร์มไม่ส่งรายการที่ขาดค่านี้ไปเงียบ ๆ
+  useEffect(() => {
+    inputRef.current?.setCustomValidity(error && draft.trim() ? error : "");
+  }, [error, draft]);
   const full = max != null && tags.length >= max;
 
   const commit = (next: string[]) => {
@@ -144,6 +148,27 @@ export function TagsInput({
           disabled && "pointer-events-none opacity-50",
         )}
       >
+        {/* ช่องพิมพ์อยู่ก่อนป้ายใน DOM (label ที่ครอบอยู่คลิกแล้วเลือกช่องพิมพ์ ไม่ใช่ปุ่มลบป้ายแรก) แต่แสดงท้ายด้วย order-last */}
+        <input
+          ref={inputRef}
+          id={id}
+          value={draft}
+          disabled={disabled || full}
+          placeholder={full ? undefined : (placeholder ?? text?.placeholder ?? "พิมพ์แล้วกด Enter")}
+          aria-label={ariaLabel}
+          aria-describedby={describedBy}
+          aria-invalid={error || ariaInvalid ? true : undefined}
+          onChange={(e) => {
+            setDraft(e.currentTarget.value);
+            if (error) setError(null);
+          }}
+          onKeyDown={onKeyDown}
+          onPaste={onPaste}
+          onBlur={() => {
+            if (draft.trim()) setDraft(add([draft]));
+          }}
+          className="order-last h-6 min-w-24 flex-1 bg-transparent px-1 text-body outline-none placeholder:text-muted-foreground"
+        />
         {tags.map((tag, i) => (
           <span
             // biome-ignore lint/suspicious/noArrayIndexKey: allowDuplicates ทำให้ค่าซ้ำได้ ใช้ตำแหน่งร่วม
@@ -166,26 +191,6 @@ export function TagsInput({
             {name && <input type="hidden" name={name} value={tag} />}
           </span>
         ))}
-        <input
-          ref={inputRef}
-          id={id}
-          value={draft}
-          disabled={disabled || full}
-          placeholder={full ? undefined : (placeholder ?? text?.placeholder ?? "พิมพ์แล้วกด Enter")}
-          aria-label={ariaLabel}
-          aria-describedby={describedBy}
-          aria-invalid={error || ariaInvalid ? true : undefined}
-          onChange={(e) => {
-            setDraft(e.currentTarget.value);
-            if (error) setError(null);
-          }}
-          onKeyDown={onKeyDown}
-          onPaste={onPaste}
-          onBlur={() => {
-            if (draft.trim()) setDraft(add([draft]));
-          }}
-          className="h-6 min-w-24 flex-1 bg-transparent px-1 text-body outline-none placeholder:text-muted-foreground"
-        />
       </div>
       {error && (
         <p id={errorId} role="alert" className="text-destructive text-xs">

package/src/components/shared/form/time-picker.tsx

@@ -308,7 +308,7 @@ export function TimePicker({
                 size="xs"
                 variant="ghost"
                 onClick={() => {
-                  setTime(nowTime());
+                  setTime(roundTime(nowTime(), roundToStep ? minuteStep : 1));
                   setDraft(null);
                 }}
               >

package/src/components/shared/month-stepper.tsx

@@ -31,6 +31,9 @@ export interface MonthStepperProps {
   className?: string;
 }
 
+/** "เดือนนี้" ของ MonthStepper/useMonthCursor คิดตามเวลาไทย — แอปของเราใช้ในไทย และต้องได้ค่าเดียวกันทั้ง server และ browser */
+const APP_TIME_ZONE = "Asia/Bangkok";
+
 /**
  * เลือกเดือนแบบ ‹ เดือน › — กดชื่อเดือนเพื่อกลับเดือนนี้ (ยกจาก DueBell `MonthSelector`)
  * ใช้คู่กับ `CalendarMonthGrid month` ได้เลย (รูปแบบ `"YYYY-MM"` เดียวกัน)
@@ -38,9 +41,6 @@ export interface MonthStepperProps {
  *   const { month, setMonth } = useMonthCursor();
  *   <MonthStepper value={month} onValueChange={setMonth} />
  */
-/** "เดือนนี้" ของ MonthStepper/useMonthCursor คิดตามเวลาไทย — แอปของเราใช้ในไทย และต้องได้ค่าเดียวกันทั้ง server และ browser */
-const APP_TIME_ZONE = "Asia/Bangkok";
-
 export function MonthStepper({
   value,
   onValueChange,

package/src/components/shared/row-actions.tsx

@@ -8,12 +8,12 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@suphark/ui/components/ui/dropdown-menu";
+import { errorMessage, failedResult, isNavigationError } from "@suphark/ui/lib/action-result";
 import { MoreHorizontalIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { toast } from "sonner";
-import { errorMessage, failedResult } from "./button/confirm-action-button";
 import { ConfirmDialog, type ConfirmSpec, normalizeConfirm } from "./confirm-dialog";
 import { useUiText } from "./ui-text";
 
@@ -44,12 +44,15 @@ export function RowActions({ items, label }: { items: RowAction[]; label?: strin
   const [open, setOpen] = useState(false);
   const [confirming, setConfirming] = useState<RowActionItem | null>(null);
 
-  function run(it: RowActionItem) {
+  /** `done` = เรียกเมื่อสำเร็จ (ใช้ปิด ConfirmDialog — ล้มเหลวคง dialog ไว้ให้ลองใหม่) */
+  function run(it: RowActionItem, done?: () => void) {
     if (it.href) {
+      done?.();
       router.push(it.href);
       return;
     }
     if (it.onSelect) {
+      done?.();
       it.onSelect();
       return;
     }
@@ -67,9 +70,15 @@ export function RowActions({ items, label }: { items: RowAction[]; label?: strin
             return;
           }
         } catch (err) {
+          // action redirect() = สำเร็จ (Next นำทางให้แล้ว) — ไม่แสดง "NEXT_REDIRECT"
+          if (isNavigationError(err)) {
+            done?.();
+            return;
+          }
           toast.error(errorMessage(err, fallback));
           return;
         }
+        done?.();
         router.refresh();
       });
     }
@@ -126,11 +135,8 @@ export function RowActions({ items, label }: { items: RowAction[]; label?: strin
           requireText={spec.requireText}
           requireTextLabel={spec.requireTextLabel}
           destructive={spec.destructive ?? confirming.destructive}
-          onConfirm={() => {
-            const it = confirming;
-            setConfirming(null);
-            run(it);
-          }}
+          pending={pending}
+          onConfirm={() => run(confirming, () => setConfirming(null))}
         />
       )}
     </>

package/src/components/shared/rule-builder.tsx

@@ -160,6 +160,12 @@ function keyOf(item: object): string {
   return k;
 }
 
+/** object ใหม่ที่มาแทนของเดิม (แก้ค่าในเงื่อนไข) ใช้ key เดิม — ไม่งั้นช่องที่กำลังพิมพ์ re-mount แล้วหลุดโฟกัสทุกตัวอักษร */
+function keepKey<T extends object>(prev: object, next: T): T {
+  if (prev !== next && !keys.has(next)) keys.set(next, keyOf(prev));
+  return next;
+}
+
 export interface RuleBuilderProps<F extends string = string> {
   value: RuleCondition<F>;
   /** ส่งต้นไม้ใหม่ทั้งก้อน (immutable) */
@@ -317,7 +323,10 @@ function ConditionNode<F extends string>({
               <ConditionNode
                 value={item}
                 onChange={(next) =>
-                  onChange({ ...value, items: value.items.map((x, j) => (j === i ? next : x)) })
+                  onChange({
+                    ...value,
+                    items: value.items.map((x, j) => (j === i ? keepKey(x, next) : x)),
+                  })
                 }
                 ctx={ctx}
                 depth={depth + 1}

package/src/components/shared/settings-layout.tsx

@@ -82,9 +82,14 @@ export function SettingsLayout({
   /** มือถือ: กลับไปรายการ — ปุ่ม "กลับ" ถูกซ่อน จึงคืนโฟกัสให้หัวข้อที่เพิ่งเปิด (ไม่งั้นโฟกัสหลุดไป body) */
   const back = (id: string) => {
     setMobileDetail(false);
-    requestAnimationFrame(() =>
-      navRef.current?.querySelector<HTMLElement>(`[data-section-id="${CSS.escape(id)}"]`)?.focus(),
-    );
+    requestAnimationFrame(() => {
+      const nav = navRef.current;
+      // หัวข้อที่เปิดอยู่ถูกกรองออกจากรายการด้วยคำค้น → โฟกัสช่องค้นหา/หัวข้อแรกแทน (ไม่ปล่อยหลุดไป body)
+      const target =
+        nav?.querySelector<HTMLElement>(`[data-section-id="${CSS.escape(id)}"]`) ??
+        nav?.querySelector<HTMLElement>("input, [data-section-id]");
+      target?.focus();
+    });
   };
 
   if (!current) return null;

package/src/components/shared/step-form.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from "@suphark/ui/components/ui/button";
 import { Spinner } from "@suphark/ui/components/ui/spinner";
+import { errorMessage, failedResult, isNavigationError } from "@suphark/ui/lib/action-result";
 import { cn } from "@suphark/ui/lib/utils";
 import { CheckIcon } from "lucide-react";
 import { type FormEvent, type ReactNode, useEffect, useRef, useState } from "react";
@@ -19,6 +20,21 @@ export interface StepFormStep {
 
 const CONTROLS = "input, select, textarea";
 
+const FOCUSABLE = 'input, select, textarea, button, [tabindex]:not([tabindex="-1"])';
+
+/** สิ่งที่โฟกัสได้ (มองเห็น ไม่ใช่ตัวแทนที่ซ่อน) ตัวก่อนหน้าที่ใกล้ `el` ที่สุดในกล่อง */
+function precedingFocusable(section: HTMLElement, el: Element): HTMLElement | undefined {
+  const all = [...section.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(
+    (c) =>
+      c !== el &&
+      c.getAttribute("aria-hidden") !== "true" &&
+      (c as HTMLInputElement).type !== "hidden" &&
+      !(c as HTMLButtonElement).disabled &&
+      c.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING,
+  );
+  return all[all.length - 1];
+}
+
 /**
  * ตรวจ constraint ของ input ในกล่อง (required, pattern, min…) — แสดง bubble ของเบราว์เซอร์ที่ช่องแรกที่ผิด
  * input ที่ซ่อนไว้ (ตัวแทนของ Base UI เช่น NumberField, aria-hidden) แสดง bubble ไม่ได้ → คืนข้อความให้แสดงใต้ฟอร์มแทน
@@ -27,16 +43,13 @@ const CONTROLS = "input, select, textarea";
 function reportSection(section: HTMLElement | null): true | false | string {
   if (!section) return true;
   const controls = [...section.querySelectorAll<HTMLInputElement>(CONTROLS)];
-  for (const [i, el] of controls.entries()) {
+  for (const el of controls) {
     if (el.type === "hidden" || el.disabled) continue;
     if (!el.checkValidity()) {
       if (el.getAttribute("aria-hidden") === "true") {
-        // input ซ่อนของ Base UI อยู่ถัดจากช่องที่มองเห็นของมัน → โฟกัสช่องที่มองเห็นตัวก่อนหน้าที่ใกล้ที่สุด
-        controls
-          .slice(0, i)
-          .reverse()
-          .find((c) => c.getAttribute("aria-hidden") !== "true" && c.type !== "hidden")
-          ?.focus();
+        // input ซ่อนของ Base UI (NumberField/Select/Checkbox/Switch/Radio) อยู่ถัดจากตัวควบคุมที่มองเห็นของมัน
+        // → โฟกัสสิ่งที่โฟกัสได้ตัวก่อนหน้าที่ใกล้ที่สุด (ปุ่ม combobox/checkbox ก็นับ ไม่ใช่แค่ input)
+        precedingFocusable(section, el)?.focus();
         return el.validationMessage || "ค่าไม่ถูกต้อง";
       }
       el.reportValidity();
@@ -92,6 +105,8 @@ export function StepForm({
   const busy = useRef(false);
   /** เวลาที่เปลี่ยนขั้นล่าสุด — คลิกที่สองของดับเบิลคลิก "ถัดไป" ตกที่ปุ่ม "ส่ง" ตำแหน่งเดิม */
   const movedAt = useRef(0);
+  /** เวลาที่ส่งเสร็จล่าสุด — กันคลิกซ้ำเมื่อ onSubmit จบเร็ว */
+  const submittedAt = useRef(0);
   const last = steps.length - 1;
   const step = steps[current];
 
@@ -132,8 +147,10 @@ export function StepForm({
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (busy.current) return;
-    // ปุ่ม "ถัดไป" กลายเป็น "ส่ง" ที่ตำแหน่งเดิม — คลิกที่มาเร็วเกินหลังเปลี่ยนขั้นไม่นับเป็นการส่ง (ผู้ใช้ยังไม่ได้เห็นหน้าตรวจทาน)
-    if (current === last && Date.now() - movedAt.current < 500) return;
+    // คลิกที่สองของดับเบิลคลิก: หลังเปลี่ยนขั้น (ปุ่มเดิมกลายเป็น "ถัดไป"/"ส่ง" ของขั้นใหม่ — ข้ามขั้นหรือข้ามหน้าตรวจทาน)
+    // และหลังส่งเสร็จ (onSubmit ที่ sync/เร็ว ปล่อย busy ก่อนคลิกที่สองมาถึง) ไม่นับ
+    const now = Date.now();
+    if (now - movedAt.current < 500 || now - submittedAt.current < 500) return;
     busy.current = true;
     try {
       await submitStep();
@@ -174,13 +191,16 @@ export function StepForm({
     }
     if (!formRef.current) return;
     setPending(true);
+    const fallback = ui.actionFailed ?? "ดำเนินการไม่สำเร็จ";
     try {
-      await onSubmit(new FormData(formRef.current));
+      // server action ที่คืน { ok: false, error } (FormState) = ล้มเหลว เหมือน throw
+      const failed = failedResult(await onSubmit(new FormData(formRef.current)), fallback);
+      if (failed) setError(failed);
     } catch (err) {
-      setError(
-        err instanceof Error && err.message ? err.message : (ui.actionFailed ?? "ดำเนินการไม่สำเร็จ"),
-      );
+      // redirect() ใน server action = สำเร็จ (Next นำทางให้แล้ว)
+      if (!isNavigationError(err)) setError(errorMessage(err, fallback));
     } finally {
+      submittedAt.current = Date.now();
       setPending(false);
     }
   };

package/src/hooks/use-table-search-params.ts

@@ -45,7 +45,8 @@ export function useTableSearchParams(defaults?: { pageSize?: number }) {
   const [isPending, startTransition] = useTransition();
 
   const state = useMemo<TableSearchState>(() => {
-    const filters: Record<string, string[]> = {};
+    // ไม่มี prototype: key จาก URL อย่าง "__proto__"/"constructor" เป็นแค่ตัวกรองชื่อหนึ่ง ไม่ไปทับ prototype
+    const filters: Record<string, string[]> = Object.create(null);
     for (const key of new Set(searchParams.keys())) {
       if (RESERVED.has(key)) continue;
       const values = searchParams
@@ -73,16 +74,20 @@ export function useTableSearchParams(defaults?: { pageSize?: number }) {
 
   // setter หลายตัวในจังหวะเดียว (เช่น setFilter แล้ว setSort) ต้องต่อจากค่าที่เพิ่งตั้ง ไม่ใช่ searchParams ตอน render
   // (router.replace ยังไม่ทันเปลี่ยน URL → ตัวหลังเขียนทับตัวแรก) — ล้างเมื่อ URL เปลี่ยนจริงแล้ว
-  const latest = useRef<string | null>(null);
+  // จำ URL ที่เราเพิ่งสั่ง (value) คู่กับ URL ตอนสั่ง (base) — ใช้ต่อเฉพาะเมื่อ URL ยังเป็น base เดิม
+  // (เดิมล้างตามตัวอ้างอิงของ searchParams ซึ่ง Next คืนตัวเดิมเมื่อ URL ไม่เปลี่ยน → ค่าเก่าค้าง)
+  const latest = useRef<{ base: string; value: string } | null>(null);
   useEffect(() => {
     latest.current = null;
   }, [searchParams]);
 
   const push = useCallback(
     (mutate: (params: URLSearchParams) => void) => {
-      const params = new URLSearchParams(latest.current ?? searchParams.toString());
+      const base = searchParams.toString();
+      const pending = latest.current?.base === base ? latest.current.value : base;
+      const params = new URLSearchParams(pending);
       mutate(params);
-      latest.current = params.toString();
+      latest.current = { base, value: params.toString() };
       startTransition(() => {
         router.replace(`${pathname}?${params.toString()}`, { scroll: false });
       });

package/src/lib/action-result.ts

@@ -0,0 +1,33 @@
+/**
+ * ตีความผลของ action (server action / async handler) ให้เหมือนกันทุก component — ไม่พึ่ง next
+ */
+
+/** ข้อความจาก error ที่ throw (ไม่มี = fallback) */
+export function errorMessage(err: unknown, fallback: string): string {
+  return err instanceof Error && err.message ? err.message : fallback;
+}
+
+/** action คืน `FormState` แบบ `{ ok: false, error }` (ไม่ได้ throw) = ล้มเหลว → ข้อความ error; อย่างอื่น = null */
+export function failedResult(result: unknown, fallback: string): string | null {
+  if (result && typeof result === "object" && "ok" in result && result.ok === false) {
+    const error = "error" in result ? result.error : undefined;
+    return typeof error === "string" && error ? error : fallback;
+  }
+  return null;
+}
+
+/**
+ * error ที่ Next ใช้สั่งนำทาง (`redirect()`, `notFound()`, `forbidden()`/`unauthorized()`) — ไม่ใช่ความล้มเหลว
+ * server action ที่ redirect ทำให้ promise ฝั่ง client reject ด้วย error นี้ขณะที่ router นำทางให้แล้ว
+ * → ห้ามแสดงเป็น toast "NEXT_REDIRECT" (ดูจาก `digest` จึงไม่ต้อง import next)
+ */
+export function isNavigationError(err: unknown): boolean {
+  if (!err || typeof err !== "object" || !("digest" in err)) return false;
+  const digest = (err as { digest: unknown }).digest;
+  return (
+    typeof digest === "string" &&
+    (digest.startsWith("NEXT_REDIRECT") ||
+      digest === "NEXT_NOT_FOUND" ||
+      digest.startsWith("NEXT_HTTP_ERROR_FALLBACK"))
+  );
+}

package/src/lib/safe-url.ts

@@ -0,0 +1,15 @@
+/**
+ * URL ที่นำทางด้วย script ได้อย่างปลอดภัย (`location.assign/replace`, `window.open`)
+ * — ช่องทางเหล่านี้ไม่มีตัวกัน `javascript:` แบบ `<a href>` ของ React หรือ router ของ Next
+ * รับเฉพาะ http(s) และ path ภายใน (relative); คืน URL ที่ resolve แล้ว หรือ null ถ้าไม่ปลอดภัย
+ * ไม่ได้กัน open redirect ไปโดเมนอื่น — ถ้าค่ามาจาก URL/ผู้ใช้ แอปต้องเช็กปลายทางเอง
+ */
+export function safeNavigableUrl(href: string | null | undefined): string | null {
+  if (!href || typeof window === "undefined") return null;
+  try {
+    const url = new URL(href, window.location.href);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.href : null;
+  } catch {
+    return null;
+  }
+}

package/src/styles.css

@@ -297,25 +297,28 @@
   scrollbar-color: var(--scrollbar-thumb) transparent;
 }
 
-/* Global scrollbar styling */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb);
-  border-radius: 9999px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--scrollbar-thumb-hover);
-}
+/* Global scrollbar styling — อยู่ใน @layer base ให้ utility (no-scrollbar, scrollbar-thin, className ของแอป) ชนะได้
+   (เดิมไม่มี layer → `*{scrollbar-width:thin}` ทับ no-scrollbar ทุกที่ เช่นคอลัมน์ TimePicker แถบแท็บ) */
+@layer base {
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    border-radius: 9999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover);
+  }
 
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-thumb) transparent;
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+  }
 }
 
 html,