@suphark/ui 0.5.1 → 0.6.1

package/CHANGELOG.md

@@ -2,6 +2,66 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.6.1] — 2026-09-20
+
+### Added
+
+- **`npx suphark-ui-audit`** (`bin` ของแพ็กเกจ, `scripts/audit.mjs`) — ตรวจโค้ดแอปปลายทางตามกติกา design system ในคำสั่งเดียว: error = `window-dialog` (window.confirm/alert/prompt), `radix-state` (`data-[state=…]` ที่ Base UI ไม่มี), `arbitrary-text` (`text-[Npx]`), `base-ui-props` (สคริปต์เดิม); warning = `raw-palette` (bg-red-500 …), `important` (utility ลงท้าย `!` — เฉพาะ `--important` สำหรับโค้ดแพ็กเกจ); `--strict` ให้ warning เป็น error; ยกเว้น `// ui-audit-ok: เหตุผล` / `/* ui-audit-ok-file: เหตุผล */`; ข้าม `components/ui/**`, tests, generated; README + `docs/agent-rules.md` มีวิธีใช้ — repo นี้รัน `pnpm audit:ui` ใน `verify` และ CI (0 error 0 warning)
+- `FormFieldRadioCards`: prop `aria-label` ส่งต่อไป RadioGroup เมื่อไม่แสดง `label` (ข้อสังเกตจาก Pi Auth หลังย้ายมาใช้ — ของเดิมมี aria-label)
+
+### Changed
+
+- ล้าง raw palette ในแพ็กเกจเป็น semantic token: labs badge ใน `AppNav` → `text-warning-muted-foreground`, `FloatingSaveButton` สำเร็จ → `bg-success`, `FormMessage` สำเร็จ → `text-success`, ดอกจัน/ข้อความ error ใน `FormField*` → `text-destructive`, ไอคอน `ThemeToggle` → `text-warning`/`text-primary`/`text-muted-foreground`, ตัวอย่างใน design-system; ที่ยังใช้ palette โดยตั้งใจและจดไว้ (`ui-audit-ok-file`): `Notice`/`StatusBadge` (โทน 50/900 คู่ dark — รอตัดสินใจ token ระดับ tone), `lib/status-colors.ts` (ชุดสีให้ผู้ใช้เลือก)
+
+## [0.6.0] — 2026-09-20
+
+component สำเร็จรูปสำหรับฟอร์ม server action ที่ Pi Auth ประกอบเองอยู่ (DueBell/Mail/Files ใช้ได้เหมือนกัน) — ไม่เปลี่ยน API เดิม; **รวม 0.5.2 ที่ยังไม่ได้ publish**
+
+### Added
+
+- **`LabeledField`** + **`CheckboxField`** (barrel) — ช่องฟอร์มสำหรับ server action ธรรมดา (ไม่ใช่ react-hook-form): label ครอบ control + `hint` หรือ `error` (ตั้ง `data-invalid`) ประกอบจาก shadcn `Field/FieldLabel/FieldDescription/FieldError`; `CheckboxField` = Checkbox + label บรรทัดเดียว ใส่ `name` แล้วส่ง "on" ใน FormData — ยกจาก Pi Auth (42 ไฟล์) คง API เดิมเป๊ะ; ใช้จาก server component ได้ (ชื่อ `LabeledField` เพราะ `Field` ชนกับ shadcn และ `FormField` ชนกับ react-hook-form)
+- **`ActionForm`** (barrel — ไม่พึ่ง next) — ฟอร์ม inline คู่กับ `FormDialog`: `useActionState` + `FormMessage` + ปุ่มส่ง (ป้ายค่าเริ่มต้น `UiText.save`), ไม่ใช้ `action=` บน `<form>` จึงคงค่าที่พิมพ์เมื่อ action คืน error; props `action`, `title?`, `submitLabel?`, `compact?` (ไม่มี Card, ปุ่ม sm, จัดแนวนอน wrap สำหรับแถวตาราง), `className?`, `onSuccess?(state)`; export type **`FormAction`** จาก barrel (FormDialog ใช้ชนิดเดียวกัน)
+- **`Stepper`** (`@suphark/ui/next` — ใช้ next/link) — แถบขั้นตอน wizard ทุกขั้นกดเข้าได้: `steps[{ key, href, label, status: done|todo|problem, statusLabel? }]`, `current`, `ariaLabel?`; แนวนอนเลื่อนได้บนจอแคบ แนวตั้งบน lg; วงกลม เลข/✓/⚠ + `StatusBadge` ใต้ชื่อ; `aria-current="step"`; server component ได้; types `StepperStep`, `StepStatus`
+- **`FormFieldRadioCards`** (backward-compatible): ใช้ **โดยไม่มี `control`** ในฟอร์ม server action ได้ — `name` ส่งต่อไป `RadioGroup` (มี hidden input ใน FormData) + `defaultValue` (uncontrolled) หรือ `value`+`onValueChange` (controlled); **`layout="row"`** = การ์ดแนวนอน ปุ่มวิทยุจริงซ้าย ไอคอน+ชื่อบรรทัดบน คำอธิบายบรรทัดล่าง (`grid sm:grid-cols-2`, checked = `border-primary bg-primary/5`); layout `grid` เดิม จุดเลือกมุมขวาบนตอนนี้ตามสถานะจริงของปุ่มวิทยุ (CSS `peer-data-checked`) จึงถูกทั้ง controlled/uncontrolled
+- showcase: หน้า `labeled-field`, `action-form`, `stepper`, `form-field-radio-cards`; tests 8 กรณี (labeled-field, action-form ส่ง FormData/คงค่า/onSuccess/compact, stepper, radio-cards FormData + row)
+
+## [0.5.2] — 2026-09-20 (ไม่ได้ publish แยก — รวมใน 0.6.0)
+
+รอบรีวิวประสิทธิภาพ + บั๊กที่เหลือ — ไม่เปลี่ยน props
+
+### Fixed
+
+- **`PullToRefresh`** (`@suphark/ui/pwa`): effect ผูก `pullDistance`/`isRefreshing` เป็น deps → ถอด/ใส่ listener 4 ตัวบน `window` ใหม่ทุก `touchmove` และ `touchend` หลุดได้ระหว่างนั้น (ดึงแล้วไม่รีเฟรช/ป้ายค้าง) — อ่านค่าผ่าน ref ลงทะเบียนครั้งเดียว
+- **`ThemeToggle`** เมื่อส่ง `persistedTheme`: effect ผูก `theme` ด้วย → ผู้ใช้กดเปลี่ยนแล้วถูก set กลับเป็นค่าที่บันทึกไว้ทันที (server action ยังไม่กลับ) — sync เฉพาะเมื่อ `persistedTheme` เปลี่ยน (รวมครั้งแรก)
+- **`DataTableRowActions`**: `EditDialog` ถูก mount ทุกแถวตลอดเวลา (50 แถว = 50 Dialog+ฟอร์ม และ `initialData` stale) — mount เฉพาะตอนเปิด
+- **`useDataTable`**: `onGlobalFilterChange` อ่านค่าเก่าจาก closure (พิมพ์เร็วใน tick เดียวหายตัวอักษร) → อ่านจาก `table.getState()`; `getPaginationRowModel` ไม่ใส่เมื่อ `manualPagination` (server แบ่งหน้าแล้ว ไม่ตัดซ้ำ); ตัด `useMemo` ที่ไม่มีผล
+- **`FormFieldCombobox`**: cache ตัวเลือก key ด้วย function identity ใน `Map` module-level → inline fetcher ทำให้โตไม่จำกัด (memory leak) และไม่เคย hit — key ที่เป็นฟังก์ชันเก็บใน `WeakMap` (ส่ง `fetcherKey` ยังดีที่สุด)
+
+### Changed (ประสิทธิภาพ)
+
+- **`ClientDateFormatter`**: ทุก instance เคยมี `setInterval` ของตัวเอง + render เพิ่ม 1 รอบตอน mount → ใช้ **`useTicker()`** นาฬิกากลางแชร์ timer เดียวต่อ interval + `useMounted()` (ไม่มี render เพิ่ม) + cache `Intl.DateTimeFormat`
+- **`FormattedNumber`**: จาก state + 2 effects (3 renders/เซลล์) และ `new Intl.NumberFormat` ทุกครั้ง → `useMounted()` + `useMemo` + cache formatter ต่อ locale+options (ตารางหลายร้อยเซลล์เห็นผล)
+- **`DataTableFacetedFilter`**: `selectedValues` Set ใหม่ทุก render ทำให้ `useMemo` เรียง options ไม่เคย hit → memo จาก `filterValue` จริง
+- **`AppNav`**: กลุ่มเมนูที่กางได้เปลี่ยนจาก remount ทั้ง subtree ด้วย `key` เมื่อลูก active/ค้นหา → Collapsible แบบ controlled (`NavCollapsible`) เปิดอัตโนมัติเมื่อสถานะเปลี่ยน ผู้ใช้กาง/หุบเองได้ ไม่ mount ใหม่ มี animation
+- **`RelativeDate`** ใช้ `useMounted()` กลาง
+
+### Added
+
+- **`useMounted()`** (barrel) — true เฉพาะฝั่ง client หลัง hydrate ผ่าน `useSyncExternalStore` (ไม่มี render เพิ่ม) — ใช้กับค่าที่ server/browser ต่างกัน (เวลา, โซนเวลา, localStorage)
+- **`useTicker(intervalMs)`** (barrel) — ตัวนับที่เพิ่มทุก interval, ทุก instance แชร์ `setInterval` เดียวต่อ interval (เริ่ม/หยุดตามผู้ใช้ตัวแรก/สุดท้าย); 0 = ไม่ tick
+- **`getNumberFormat` / `getDateTimeFormat`** (`@suphark/ui/lib/intl-cache`, barrel) — Intl formatter ที่ cache ต่อ locale+options
+- tests: `use-ticker` (แชร์ timer/หยุดเมื่อถอดหมด), `intl-cache`
+
+### ไม่ได้แก้ตามที่ประเมินไว้ (0.5.2)
+
+- `DataTableToolbar` render ชุดตัวกรอง 2 ครั้ง (desktop + Sheet มือถือ): ตรวจแล้ว `SheetContent` ของ Base UI ไม่ mount ลูกเมื่อปิด ชุดใน Sheet จึงมีเฉพาะตอนเปิด — ต้นทุนจริงมีแค่ชุด desktop ที่ `hidden` บนมือถือ (ปุ่ม + trigger ไม่มี popup) ไม่คุ้มเสี่ยง hydration flash จากการ gate ด้วย `useIsMobile()`
+
+### Added (showcase/เครื่องมือ)
+
+
+- showcase: หน้า **`/changelog`** render `packages/ui/CHANGELOG.md` ตอน build (parser เล็ก ๆ ไม่เพิ่ม dep: รุ่น/หมวด Added-Changed-Fixed/รายการ/inline code-bold-link) + ลิงก์ในเมนูบน
+- **`pnpm check:changelog`** (`scripts/check-changelog.mjs`) — ทุกการเปลี่ยนแปลงใน `packages/ui/src`, `package.json`, `README.md`, `apps/showcase/src` ต้องมีบรรทัดใน CHANGELOG; ตรวจ working tree ก่อน commit (อยู่ใน `pnpm verify`) และช่วง commit ใน CI (`CHANGELOG_RANGE`)
+
 ## [0.5.1] — 2026-09-20
 
 ### Fixed

package/README.md

@@ -182,6 +182,26 @@ webview/automation บางตัวปิด `window.confirm` ทิ้ง (
 
 `createKanbanCollisionDetection({ columnItems, resolveColumnId })` (จาก `@suphark/ui/kanban`) ใช้เป็น `collisionDetection` ของ `DndContext` เมื่อมีหลายคอลัมน์ (SortableContext ต่อคอลัมน์) — ตัวอย่างบอร์ดเต็มที่ ui.suphark.com/components/kanban-board; wrapper ของการ์ด**ห้าม** `overflow-hidden` (dnd-kit ใส่ transform ที่ node ที่ `setNodeRef` ถ้าถูกครอบด้วย overflow-hidden การ์ดที่ขยับหลบจะถูก clip)
 
+### ตรวจกติกาในแอป — `npx suphark-ui-audit`
+
+แพ็กเกจมี `bin` ให้รันในแอปปลายทาง (ตรวจ `src` ค่าเริ่มต้น; ข้าม `components/ui/**`, tests, generated):
+
+```bash
+npx suphark-ui-audit            # หรือใส่ใน package.json: "audit:ui": "suphark-ui-audit src"
+npx suphark-ui-audit --strict   # warning นับเป็น error (ใช้ใน CI เมื่อล้างหมดแล้ว)
+```
+
+| กฎ | ระดับ | เจอ → ใช้แทน |
+| --- | --- | --- |
+| `window-dialog` | error | `window.confirm/alert/prompt(` → `ConfirmDialog` / `useConfirm()` / `useDialogs()` |
+| `radix-state` | error | `data-[state=open\|checked\|active…]` → `data-open` / `data-checked` / `data-active` / `data-popup-open` (Base UI ไม่มี data-state) |
+| `arbitrary-text` | error | `text-[Npx]` → `text-xs … text-3xl` |
+| `base-ui-props` | error | `default*` ที่ค่าเปลี่ยนได้ / `onSelect` บนเมนู (ดู `scripts/audit-base-ui-props.mjs`) |
+| `raw-palette` | warning | `bg-red-500`, `text-slate-600` … → `bg-destructive`, `text-muted-foreground`, `bg-success`, `bg-warning`, `text-primary` |
+| `important` | warning (เฉพาะ `--important`) | utility ลงท้าย `!` ในโค้ดแพ็กเกจ |
+
+ยกเว้นรายบรรทัด `// ui-audit-ok: <เหตุผล>` (บรรทัดเดียวกันหรือบรรทัดก่อน) — ยกเว้นทั้งไฟล์ `/* ui-audit-ok-file: <เหตุผล> */`
+
 ### สิทธิ์ (ActionButton/LinkButton `permission` prop)
 
 แพ็กเกจไม่รู้จักระบบสิทธิ์ของแอป — ครอบด้วย `UiPermissionProvider` แล้วส่งฟังก์ชัน `check(requirement, options)` ของแอปเข้ามา ถ้าไม่ครอบ = อนุญาตทุกอย่าง

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.5.1",
+  "version": "0.6.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 เอง",
@@ -22,6 +22,9 @@
   "sideEffects": [
     "*.css"
   ],
+  "bin": {
+    "suphark-ui-audit": "scripts/audit.mjs"
+  },
   "files": [
     "src",
     "!src/**/__tests__",
@@ -116,6 +119,7 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
+    "audit": "node scripts/audit.mjs src --important",
     "test": "vitest run",
     "test:watch": "vitest",
     "lint:base-ui": "node scripts/audit-base-ui-props.mjs",

package/scripts/audit.mjs

@@ -0,0 +1,218 @@
+#!/usr/bin/env node
+/**
+ * suphark-ui-audit — ตรวจโค้ดแอปปลายทางตามกติกา design system (docs/agent-rules.md) ในคำสั่งเดียว
+ *
+ *   npx suphark-ui-audit                 # ตรวจ src (ค่าเริ่มต้น)
+ *   npx suphark-ui-audit src apps/web    # หลายโฟลเดอร์
+ *   npx suphark-ui-audit --strict        # warning นับเป็น error ด้วย (ใช้ใน CI เมื่อล้างหมดแล้ว)
+ *   npx suphark-ui-audit --no-palette    # ปิดกฎ raw palette ชั่วคราว
+ *   npx suphark-ui-audit --important     # เปิดกฎ utility ลงท้าย ! (ค่าเริ่มต้นตรวจเฉพาะโค้ดของแพ็กเกจเอง)
+ *
+ * กฎ (error = พังบน Base UI / ผิดกติกาชัดเจน, warning = ควรแก้แต่ไม่บล็อก):
+ *   window-dialog   error    window.confirm/alert/prompt → ConfirmDialog / useConfirm() / useDialogs()
+ *   radix-state     error    data-[state=open|checked|active|…] ไม่มีบน Base UI → data-open / data-checked / data-active / data-popup-open
+ *   arbitrary-text  error    text-[Npx] → ใช้ scale (text-xs … text-3xl)
+ *   important       warning  utility ที่ลงท้าย ! (size-3.5!) — เฉพาะโค้ดแพ็กเกจ (--important): Tailwind ของแอปที่ scan ผ่าน @source อาจไม่ generate
+ *   raw-palette     warning  bg-red-500 / text-slate-600 … → semantic token (bg-destructive, text-muted-foreground, bg-success …)
+ *   base-ui-props   error    default* ที่ค่าเปลี่ยนได้ / onSelect บน Base UI (สคริปต์ audit-base-ui-props)
+ *
+ * ยกเว้นเป็นบรรทัด: ใส่ `// ui-audit-ok: <เหตุผล>` ท้ายบรรทัดหรือบรรทัดก่อนหน้า
+ * ยกเว้นทั้งไฟล์: `/* ui-audit-ok-file: <เหตุผล> *\/` ที่หัวไฟล์
+ * ข้ามอัตโนมัติ: node_modules, .next, dist, build, generated, __tests__, *.test.*, components/ui/** (ไฟล์ shadcn)
+ */
+import { spawnSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const args = process.argv.slice(2);
+const flags = new Set(args.filter((a) => a.startsWith("--")));
+const roots = args.filter((a) => !a.startsWith("--"));
+if (roots.length === 0) roots.push("src");
+const STRICT = flags.has("--strict");
+const PALETTE = !flags.has("--no-palette");
+const SKIP_BASE_UI = flags.has("--no-base-ui");
+const IMPORTANT = flags.has("--important");
+
+const SKIP_DIRS = new Set([
+  "node_modules",
+  ".next",
+  "dist",
+  "build",
+  "generated",
+  "__tests__",
+  ".git",
+]);
+const LINE_MARKER = "ui-audit-ok:";
+const FILE_MARKER = "ui-audit-ok-file:";
+
+const PALETTE_COLORS =
+  "red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|slate|gray|zinc|neutral|stone";
+const RULES = [
+  {
+    id: "window-dialog",
+    level: "error",
+    regex: /\bwindow\.(confirm|alert|prompt)\s*\(/g,
+    message:
+      "ใช้ ConfirmDialog / useConfirm() / useDialogs() ของ @suphark/ui แทน window dialog (webview บางตัวปิดทิ้ง)",
+  },
+  {
+    id: "radix-state",
+    level: "error",
+    regex:
+      /data-\[state=(?:open|closed|checked|unchecked|active|inactive|on|off|visible|hidden|delayed-open|instant-open)\]/g,
+    message:
+      "Base UI ไม่ใส่ data-state — ใช้ data-open / data-closed / data-checked / data-active / data-popup-open",
+  },
+  {
+    id: "arbitrary-text",
+    level: "error",
+    regex: /\btext-\[\d+(?:px|rem|em)\]/g,
+    message: "ห้าม text-[Npx] — ใช้ typography scale (text-xs … text-3xl) ตาม docs/design-system.md",
+  },
+  {
+    id: "important",
+    level: "warning",
+    regex: /(?<=["'`\s])[a-z][\w:/[\]().%=,-]*!(?=["'`\s])/g,
+    message:
+      "utility ที่ลงท้าย ! — แอปที่ scan แพ็กเกจผ่าน @source อาจไม่ generate class นี้ ปรับ specificity แทน",
+  },
+  {
+    id: "raw-palette",
+    level: "warning",
+    regex: new RegExp(
+      `(?<![\\w-])(?:[a-z-]+:)*(?:bg|text|border|ring|fill|stroke|from|to|via|outline|decoration|divide|shadow|accent|caret|placeholder)-(?:${PALETTE_COLORS})-(?:50|100|200|300|400|500|600|700|800|900|950)(?:/\\d+)?(?![\\w-])`,
+      "g",
+    ),
+    message:
+      "raw palette → semantic token (bg-muted, text-muted-foreground, bg-destructive, bg-success, bg-warning, text-primary …)",
+  },
+];
+
+/** ปิดส่วนที่ไม่ใช่โค้ด (comment, <code>/<pre>, template ตัวอย่างในเอกสาร) ด้วยช่องว่างเพื่อคง offset */
+function mask(content) {
+  return content
+    .replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, " "))
+    .replace(/(^|[^:\\])\/\/.*$/gm, (m, p1) => p1 + " ".repeat(m.length - p1.length))
+    .replace(/<code[\s\S]*?<\/code>/g, (m) => m.replace(/[^\n]/g, " "))
+    .replace(/<pre[\s\S]*?<\/pre>/g, (m) => m.replace(/[^\n]/g, " "));
+}
+
+function walk(dir, out) {
+  let entries;
+  try {
+    entries = fs.readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return out;
+  }
+  for (const e of entries) {
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) {
+      if (SKIP_DIRS.has(e.name)) continue;
+      walk(full, out);
+    } else if (/\.(tsx?|jsx?|mdx?)$/.test(e.name) && !/\.test\.[jt]sx?$/.test(e.name)) {
+      // ไฟล์ shadcn ของแอป (สำเนา CLI) ไม่ตรวจ — ควรใช้ของแพ็กเกจแทนอยู่แล้ว
+      if (/[\\/]components[\\/]ui[\\/]/.test(full)) continue;
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+const files = roots.flatMap((r) => walk(path.resolve(process.cwd(), r), []));
+const findings = [];
+let skippedFiles = 0;
+
+for (const file of files) {
+  const raw = fs.readFileSync(file, "utf8");
+  if (raw.includes(FILE_MARKER)) {
+    skippedFiles++;
+    continue;
+  }
+  const lines = raw.split("\n");
+  const masked = mask(raw).split("\n");
+  for (const rule of RULES) {
+    if (rule.id === "raw-palette" && !PALETTE) continue;
+    if (rule.id === "important" && !IMPORTANT) continue;
+    for (let i = 0; i < masked.length; i++) {
+      const line = masked[i] ?? "";
+      rule.regex.lastIndex = 0;
+      let m = rule.regex.exec(line);
+      if (!m) continue;
+      const rawLine = lines[i] ?? "";
+      const prev = lines[i - 1] ?? "";
+      if (
+        rawLine.includes(LINE_MARKER) ||
+        (prev.trim().startsWith("//") && prev.includes(LINE_MARKER))
+      )
+        continue;
+      const hits = [];
+      while (m) {
+        hits.push(m[0]);
+        m = rule.regex.exec(line);
+      }
+      findings.push({
+        file: path.relative(process.cwd(), file),
+        line: i + 1,
+        rule: rule.id,
+        level: STRICT ? "error" : rule.level,
+        hits: [...new Set(hits)],
+        message: rule.message,
+      });
+    }
+  }
+}
+
+// base-ui props audit ของแพ็กเกจ (รันเป็นโปรเซสลูกเพื่อคง UI_DIR ชี้ที่ shadcn ของแพ็กเกจ)
+let baseUiExit = 0;
+let baseUiOutput = "";
+if (!SKIP_BASE_UI) {
+  const here = path.dirname(fileURLToPath(import.meta.url));
+  const uiDir = path.resolve(here, "..", "src", "components", "ui");
+  const r = spawnSync(process.execPath, [path.join(here, "audit-base-ui-props.mjs"), ...roots], {
+    encoding: "utf8",
+    env: { ...process.env, UI_DIR: uiDir },
+  });
+  baseUiExit = r.status ?? 1;
+  baseUiOutput = `${r.stdout ?? ""}${r.stderr ?? ""}`.trim();
+}
+
+// ---------- รายงาน ----------
+const byRule = new Map();
+for (const f of findings) byRule.set(f.rule, (byRule.get(f.rule) ?? 0) + 1);
+const errors = findings.filter((f) => f.level === "error");
+const warnings = findings.filter((f) => f.level === "warning");
+
+findings.sort((a, b) => (a.file === b.file ? a.line - b.line : a.file.localeCompare(b.file)));
+let lastFile = "";
+for (const f of findings) {
+  if (f.file !== lastFile) {
+    console.log(`\n${f.file}`);
+    lastFile = f.file;
+  }
+  const tag = f.level === "error" ? "✗" : "△";
+  console.log(`  ${tag} :${f.line}  ${f.rule}  ${f.hits.join(", ")}`);
+}
+if (baseUiOutput && baseUiExit !== 0) console.log(`\n${baseUiOutput}`);
+
+console.log(
+  `\nsuphark-ui-audit — ตรวจ ${files.length} ไฟล์ใน ${roots.join(", ")}${skippedFiles ? ` (ข้าม ${skippedFiles} ไฟล์ที่ทำเครื่องหมาย ${FILE_MARKER})` : ""}`,
+);
+for (const rule of RULES) {
+  const n = byRule.get(rule.id) ?? 0;
+  if (rule.id === "raw-palette" && !PALETTE) continue;
+  if (rule.id === "important" && !IMPORTANT) continue;
+  console.log(
+    `  ${n === 0 ? "✓" : rule.level === "error" || STRICT ? "✗" : "△"} ${rule.id.padEnd(15)} ${n}${n ? `  — ${rule.message}` : ""}`,
+  );
+}
+console.log(
+  `  ${baseUiExit === 0 ? "✓" : "✗"} base-ui-props    ${baseUiExit === 0 ? "ผ่าน" : "พบปัญหา (ดูข้างบน)"}`,
+);
+console.log(`\n${errors.length} error, ${warnings.length} warning${STRICT ? " (--strict)" : ""}`);
+if (errors.length || warnings.length) {
+  console.log(
+    `ยกเว้นรายบรรทัด: // ${LINE_MARKER} <เหตุผล>   ยกเว้นทั้งไฟล์: /* ${FILE_MARKER} <เหตุผล> */`,
+  );
+}
+process.exit(errors.length > 0 || baseUiExit !== 0 ? 1 : 0);

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

@@ -65,6 +65,7 @@ export function AppBrand({
       <SidebarMenuItem className={cn("flex items-center", className)}>
         <SidebarMenuButton
           size="lg"
+          // ui-audit-ok: class เดียวกับ size=lg ของ sidebar.tsx (shadcn) จึงถูก generate แน่นอน
           className="min-w-0 flex-1 group-data-[collapsible=icon]:p-0!"
           render={<Link href={href} onClick={closeMobile} />}
         >

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

@@ -32,6 +32,7 @@ import { cn } from "@suphark/ui/lib/utils";
 import { ChevronRight, FlaskConical, Pin } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { type ReactNode, useEffect, useState } from "react";
 import { type AppNavGroup, type AppNavItem, isNavActive } from "./types";
 
 /** ปุ่ม pin — แสดงเมื่อแอปส่ง `pinnedHrefs` + `onTogglePin` (supplychain เก็บใน user preferences) */
@@ -48,12 +49,10 @@ function MenuTitle({ title, isLabs }: { title: string; isLabs?: boolean }) {
       <TooltipTrigger
         render={<span className="flex w-full items-center gap-1.5 overflow-hidden" />}
       >
-        <span
-          className={cn("truncate", isLabs && "font-medium text-amber-600 dark:text-amber-500")}
-        >
+        <span className={cn("truncate", isLabs && "font-medium text-warning-muted-foreground")}>
           {title}
         </span>
-        {isLabs && <FlaskConical className="h-3 w-3 shrink-0 text-amber-600 dark:text-amber-500" />}
+        {isLabs && <FlaskConical className="h-3 w-3 shrink-0 text-warning-muted-foreground" />}
       </TooltipTrigger>
       <TooltipContent side="right" align="center" className="max-w-xs break-words">
         {title}
@@ -179,14 +178,8 @@ export function AppNavGroupMenu({
           }
 
           // กางปกติ — เปิดค้างเมื่อลูกตัวใดตัวหนึ่ง active หรือกำลังค้นหา
-          const open = forceOpen || childActive;
           return (
-            <Collapsible
-              key={`${item.title}-${open}`}
-              render={<SidebarMenuItem />}
-              defaultOpen={open}
-              className="group/collapsible"
-            >
+            <NavCollapsible key={item.title} autoOpen={forceOpen || childActive}>
               <CollapsibleTrigger
                 render={<SidebarMenuButton tooltip={item.title} suppressHydrationWarning />}
               >
@@ -227,7 +220,7 @@ export function AppNavGroupMenu({
                   })}
                 </SidebarMenuSub>
               </CollapsibleContent>
-            </Collapsible>
+            </NavCollapsible>
           );
         })}
       </SidebarMenu>
@@ -235,6 +228,27 @@ export function AppNavGroupMenu({
   );
 }
 
+/**
+ * กลุ่มย่อยที่กางได้: เปิดอัตโนมัติเมื่อ `autoOpen` เปลี่ยนเป็น true/false (ลูก active หรือกำลังค้นหา)
+ * แต่ผู้ใช้ยังกาง/หุบเองได้ระหว่างนั้น — ควบคุม state เอง (เดิม remount ทั้ง subtree ด้วย key ทุกครั้งที่ค่าเปลี่ยน)
+ */
+function NavCollapsible({ autoOpen, children }: { autoOpen: boolean; children: ReactNode }) {
+  const [open, setOpen] = useState(autoOpen);
+  useEffect(() => {
+    setOpen(autoOpen);
+  }, [autoOpen]);
+  return (
+    <Collapsible
+      render={<SidebarMenuItem />}
+      open={open}
+      onOpenChange={setOpen}
+      className="group/collapsible"
+    >
+      {children}
+    </Collapsible>
+  );
+}
+
 /** ทุกกลุ่มเมนู */
 export function AppNav({
   nav,

package/src/components/data-table/data-table-faceted-filter.tsx

@@ -39,19 +39,20 @@ export function DataTableFacetedFilter<TData, TValue>({
 }: DataTableFacetedFilterProps<TData, TValue>) {
   const facets = column?.getFacetedUniqueValues();
   const filterValue = column?.getFilterValue();
-  const selectedValues = new Set(Array.isArray(filterValue) ? filterValue.map(String) : []);
-
-  const areAllSelected = options.length > 0 && selectedValues.size === options.length;
-
-  const sortedOptions = React.useMemo(() => {
-    return [...options].sort((a, b) => {
-      const aSelected = selectedValues.has(String(a.value));
-      const bSelected = selectedValues.has(String(b.value));
+  // Set + ลำดับ memo จากค่า filter จริง (เดิมสร้าง Set ใหม่ทุก render ทำให้ memo ไม่เคย hit)
+  const { selectedValues, sortedOptions } = React.useMemo(() => {
+    const selected = new Set(Array.isArray(filterValue) ? filterValue.map(String) : []);
+    const sorted = [...options].sort((a, b) => {
+      const aSelected = selected.has(String(a.value));
+      const bSelected = selected.has(String(b.value));
       if (aSelected && !bSelected) return -1;
       if (!aSelected && bSelected) return 1;
       return 0;
     });
-  }, [options, selectedValues]);
+    return { selectedValues: selected, sortedOptions: sorted };
+  }, [options, filterValue]);
+
+  const areAllSelected = options.length > 0 && selectedValues.size === options.length;
 
   return (
     <Popover>
@@ -117,12 +118,10 @@ export function DataTableFacetedFilter<TData, TValue>({
                   <CommandItem
                     key={valueAsString}
                     onSelect={() => {
-                      if (isSelected) {
-                        selectedValues.delete(valueAsString);
-                      } else {
-                        selectedValues.add(valueAsString);
-                      }
-                      const filterValues = Array.from(selectedValues);
+                      const next = new Set(selectedValues);
+                      if (isSelected) next.delete(valueAsString);
+                      else next.add(valueAsString);
+                      const filterValues = Array.from(next);
                       column?.setFilterValue(filterValues.length ? filterValues : undefined);
                     }}
                   >

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

@@ -137,7 +137,8 @@ export function DataTableRowActions<TData>({
         </DropdownMenuContent>
       </DropdownMenu>
 
-      {EditDialog && (
+      {/* mount เฉพาะตอนเปิด — ไม่งั้นทุกแถว mount Dialog+ฟอร์มค้างไว้ (50 แถว = 50 ฟอร์ม) และ initialData stale */}
+      {EditDialog && isEditDialogOpen && (
         <EditDialog initialData={item} open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen} />
       )}
 

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

@@ -154,12 +154,9 @@ export function useDataTable<TData, TValue>({
     return undefined;
   }, [globalFilterFn, globalFilterKeys]);
 
-  const memoizedData = React.useMemo(() => data, [data]);
-  const memoizedColumns = React.useMemo(() => columns, [columns]);
-
   const table = useReactTable({
-    data: memoizedData,
-    columns: memoizedColumns,
+    data,
+    columns,
     pageCount: pageCount ?? (manualPagination ? -1 : undefined),
     rowCount,
     manualPagination,
@@ -205,7 +202,9 @@ export function useDataTable<TData, TValue>({
     onGlobalFilterChange: (updater) => {
       setGlobalFilter(updater);
       if (onGlobalFilterChange) {
-        const next = typeof updater === "function" ? updater(globalFilter) : updater;
+        // อ่านค่าปัจจุบันจาก table ไม่ใช่ closure ของ render ก่อน (พิมพ์เร็วสองตัวอักษรใน tick เดียวจะหายตัว)
+        const current = table.getState().globalFilter as string;
+        const next = typeof updater === "function" ? updater(current) : updater;
         onGlobalFilterChange((next as string) ?? "");
       }
     },
@@ -218,15 +217,12 @@ export function useDataTable<TData, TValue>({
     globalFilterFn: finalGlobalFilterFn,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
+    // server แบ่งหน้าให้แล้ว (manualPagination) → ไม่ต้องตัดซ้ำฝั่ง client
+    getPaginationRowModel: manualPagination ? undefined : getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValuesProp,
   });
 
-  // NOTE: If manualPagination is true, getPaginationRowModel might not be needed?
-  // TanStack docs say: if manualPagination is true, you don't need getPaginationRowModel IF you only provide the current page data.
-  // But usage of getPaginationRowModel is safe even with manualPagination as it just slices.
-
   return { table, initialColumnFilters };
 }

package/src/components/design-system/sections/showcase-data-display.tsx

@@ -414,7 +414,7 @@ export function ShowcaseDataDisplay() {
 
               <Item variant="outline" className="p-3">
                 <ItemMedia variant="icon">
-                  <AlertTriangle className="size-4 text-amber-500" />
+                  <AlertTriangle className="size-4 text-warning" />
                 </ItemMedia>
                 <ItemContent>
                   <ItemTitle className="text-xs">หนังสือค้ำประกันผลงาน (Performance Bond)</ItemTitle>
@@ -444,7 +444,7 @@ export function ShowcaseDataDisplay() {
             <AttachmentGroup>
               <Attachment state="done" size="default">
                 <AttachmentMedia variant="icon">
-                  <FileSpreadsheet className="size-4 text-emerald-600" />
+                  <FileSpreadsheet className="size-4 text-success" />
                 </AttachmentMedia>
                 <AttachmentContent>
                   <AttachmentTitle>BOQ_Facade_Rev2.xlsx</AttachmentTitle>

package/src/components/design-system/sections/showcase-guidelines-recipes.tsx

@@ -296,7 +296,7 @@ export function ApprovePackageButton({ id }: { id: string }) {
                   <span className="font-bold">✕ หลีกเลี่ยง:</span>
                   <span className="line-through">{item.bad}</span>
                 </div>
-                <div className="flex items-start gap-2 text-emerald-600 font-medium">
+                <div className="flex items-start gap-2 text-success font-medium">
                   <span className="font-bold">✓ แนะนำ:</span>
                   <span>{item.good}</span>
                 </div>

package/src/components/design-system/sections/showcase-overlays-navigation.tsx

@@ -252,11 +252,11 @@ export function ShowcaseOverlaysNavigation() {
                     <div className="p-4 flex flex-col gap-2 text-xs">
                       <div className="flex justify-between border-b pb-2">
                         <span>ส่งมอบตรงเวลา (On-Time Delivery)</span>
-                        <span className="font-semibold text-emerald-600">96.5%</span>
+                        <span className="font-semibold text-success">96.5%</span>
                       </div>
                       <div className="flex justify-between border-b pb-2">
                         <span>มาตรฐานคุณภาพวัสดุ (Quality Pass Rate)</span>
-                        <span className="font-semibold text-emerald-600">98.2%</span>
+                        <span className="font-semibold text-success">98.2%</span>
                       </div>
                     </div>
                     <DrawerFooter>

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

@@ -91,7 +91,7 @@ export function ShowcasePrimitives() {
       label: "Pending Vendor / รอผู้ขาย",
       variant: "outline",
       icon: AlertCircle,
-      className: "border-amber-500/40 text-amber-600 bg-amber-50/50 dark:bg-amber-950/20",
+      className: "border-warning/40 text-warning-muted-foreground bg-warning/10",
     },
   ];