@suphark/ui 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -2,6 +2,63 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [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
+
+- **`RelativeDate` hydration mismatch (React #418) บน production** — เดิม render "วันนี้/เมื่อวาน" บน server ด้วย "ตอนนี้" ของ server (UTC และ module ที่โหลดไว้ก่อน) ซึ่งต่างจาก browser ได้ทั้งโซนเวลาและข้ามวัน → บน Vercel หน้า `/shell` (ตารางมี RelativeDate) hydrate พังทั้งหน้าและ React render ใหม่ทั้ง tree (เห็น theme script ซ้ำ 2 ตัว) — ตอนนี้คำนวณเฉพาะฝั่ง client หลัง mount (`useSyncExternalStore` guard แบบเดียวกับ `ClientDateFormatter`) ก่อน mount แสดงไอคอน + ช่องว่างขนาดเดิม
+- `RelativeDate`: เอาข้อความเฉพาะ supplychain ("วันที่อ้างอิงราคาจริง") ออกจาก tooltip → prop ใหม่ `titlePrefix` (ค่าเริ่มต้น "วันที่") และ `emptyText`; สีเป็น semantic token (`text-muted-foreground`) แทน `text-slate-*` ตามกฎ design system (className/iconClassName ทับได้เหมือนเดิม)
+- showcase: launch config `showcase-prod` (:3202, `next start` หลัง build) สำหรับตรวจ production build ในเครื่อง
+
 ## [0.5.0] — 2026-09-19
 
 ยกของที่พิสูจน์แล้วจาก Pi Done (todo/kanban) เข้าแพ็กเกจ — ไม่เปลี่ยน props เดิม

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

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) */
@@ -179,14 +180,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 +222,7 @@ export function AppNavGroupMenu({
                   })}
                 </SidebarMenuSub>
               </CollapsibleContent>
-            </Collapsible>
+            </NavCollapsible>
           );
         })}
       </SidebarMenu>
@@ -235,6 +230,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/pwa/pull-to-refresh.tsx

@@ -46,8 +46,14 @@ export function PullToRefresh({
   const isPullingRef = useRef(false);
   const [pullDistance, setPullDistance] = useState(0);
   const [isRefreshing, setIsRefreshing] = useState(false);
+  // listener อ่านค่าล่าสุดผ่าน ref — ไม่ผูก state เป็น deps ของ effect (เดิมถอด/ใส่ listener ใหม่ทุก touchmove)
+  const pullDistanceRef = useRef(0);
+  const isRefreshingRef = useRef(false);
+  pullDistanceRef.current = pullDistance;
+  isRefreshingRef.current = isRefreshing;
 
   useEffect(() => {
+    const isRefreshing = () => isRefreshingRef.current;
     const isMobileViewport = () => window.innerWidth < MOBILE_BREAKPOINT;
     const getRoot = () => document.querySelector<HTMLElement>(rootSelector);
     const isRootAtTop = (root: HTMLElement) => root.scrollTop <= 0;
@@ -60,7 +66,7 @@ export function PullToRefresh({
 
     const handleTouchStart = (event: TouchEvent) => {
       const touch = event.touches[0];
-      if (!isMobileViewport() || isRefreshing || event.touches.length !== 1 || !touch) {
+      if (!isMobileViewport() || isRefreshing() || event.touches.length !== 1 || !touch) {
         resetPull();
         return;
       }
@@ -76,7 +82,7 @@ export function PullToRefresh({
     const handleTouchMove = (event: TouchEvent) => {
       const start = startRef.current;
       const touch = event.touches[0];
-      if (!start || isRefreshing || event.touches.length !== 1 || !touch) return;
+      if (!start || isRefreshing() || event.touches.length !== 1 || !touch) return;
 
       const root = getRoot();
       if (!root || !isRootAtTop(root)) {
@@ -99,9 +105,9 @@ export function PullToRefresh({
     };
 
     const handleTouchEnd = () => {
-      const shouldRefresh = pullDistance >= ACTIVATION_DISTANCE;
+      const shouldRefresh = pullDistanceRef.current >= ACTIVATION_DISTANCE;
       resetPull();
-      if (!shouldRefresh || isRefreshing) return;
+      if (!shouldRefresh || isRefreshing()) return;
       setIsRefreshing(true);
       router.refresh();
       window.setTimeout(() => setIsRefreshing(false), 700);
@@ -117,7 +123,7 @@ export function PullToRefresh({
       window.removeEventListener("touchend", handleTouchEnd);
       window.removeEventListener("touchcancel", resetPull);
     };
-  }, [isRefreshing, pullDistance, router, rootSelector]);
+  }, [router, rootSelector]);
 
   const isVisible = pullDistance > 0 || isRefreshing;
   const progress = Math.min(1, pullDistance / ACTIVATION_DISTANCE);

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

@@ -0,0 +1,78 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { Card, CardContent } from "@suphark/ui/components/ui/card";
+import { cn } from "@suphark/ui/lib/utils";
+import { type ReactNode, startTransition, useActionState } from "react";
+import { type FormAction, FormMessage, type FormState } from "./form-message";
+import { useUiText } from "./ui-text";
+
+/**
+ * ฟอร์ม inline คู่กับ `FormDialog` (อันนั้นอยู่ในกล่องโต้ตอบ อันนี้อยู่บนหน้า): `useActionState` + `FormMessage` + ปุ่มส่ง
+ * ไม่ใช้ `action=` บน <form> — React 19 รีเซ็ตฟอร์ม uncontrolled หลัง action จบทุกครั้ง (แม้คืน error)
+ * ค่าที่พิมพ์จะหาย; เรียก action ใน transition เองแทน ฟอร์มจึงคงค่าไว้ให้แก้ต่อ (แบบเดียวกับ FormDialog)
+ * ไม่พึ่ง next (ไม่ refresh เอง — ให้ server action `revalidatePath` หรือส่ง `onSuccess`)
+ *
+ *   <ActionForm action={updateName} title="ชื่อองค์กร" submitLabel="บันทึก">
+ *     <LabeledField label="ชื่อ"><Input name="name" defaultValue={org.name} /></LabeledField>
+ *   </ActionForm>
+ */
+export function ActionForm({
+  action,
+  title,
+  submitLabel,
+  children,
+  compact = false,
+  className,
+  onSuccess,
+}: {
+  action: FormAction;
+  title?: ReactNode;
+  submitLabel?: ReactNode;
+  children: ReactNode;
+  /** ฟอร์มเล็กในแถวตาราง — ไม่มีกรอบ Card, ปุ่ม size sm, จัดแนวนอน wrap */
+  compact?: boolean;
+  className?: string;
+  /** เรียกเมื่อ action คืน `ok: true` (เช่น router.refresh, toast) */
+  onSuccess?: (state: Extract<FormState, { ok: true }>) => void;
+}) {
+  const text = useUiText();
+  const [state, formAction, pending] = useActionState<FormState, FormData>(async (prev, fd) => {
+    const next = await action(prev, fd);
+    if (next?.ok) onSuccess?.(next);
+    return next;
+  }, null);
+
+  const form = (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        const fd = new FormData(e.currentTarget);
+        startTransition(() => formAction(fd));
+      }}
+      className={cn(
+        compact ? "flex flex-wrap items-end gap-2" : "flex flex-col gap-3",
+        compact && className,
+      )}
+    >
+      {title && !compact && <h2 className="font-semibold text-sm">{title}</h2>}
+      {children}
+      <FormMessage state={state} className={compact ? "basis-full" : undefined} />
+      <Button
+        type="submit"
+        size={compact ? "sm" : "default"}
+        disabled={pending}
+        className={compact ? undefined : "self-start"}
+      >
+        {submitLabel ?? text.save}
+      </Button>
+    </form>
+  );
+
+  if (compact) return form;
+  return (
+    <Card className={className}>
+      <CardContent>{form}</CardContent>
+    </Card>
+  );
+}

package/src/components/shared/form/form-field-combobox.tsx

@@ -43,8 +43,17 @@ interface FormFieldComboboxProps<T extends FieldValues> {
   onSelect?: (option: { label: string; value: string; [key: string]: any }) => void;
 }
 
-// Singleton client-side cache to persist combobox options across mounts/renders
-const comboboxCache = new Map<any, { label: string; value: string; subLabel?: string }[]>();
+type CacheEntry = { label: string; value: string; subLabel?: string }[];
+// cache ตัวเลือกข้าม mount: key เป็น string (`fetcherKey`) เก็บใน Map; key เป็นฟังก์ชัน (ไม่ส่ง fetcherKey)
+// เก็บใน WeakMap — inline arrow ที่ identity เปลี่ยนทุก render จะถูก GC ไม่โตค้างตลอดอายุแท็บ
+const stringCache = new Map<string, CacheEntry>();
+const fnCache = new WeakMap<object, CacheEntry>();
+const cacheGet = (key: string | object) =>
+  typeof key === "string" ? stringCache.get(key) : fnCache.get(key);
+const cacheSet = (key: string | object, data: CacheEntry) => {
+  if (typeof key === "string") stringCache.set(key, data);
+  else fnCache.set(key, data);
+};
 
 export function FormFieldCombobox<T extends FieldValues>({
   control,
@@ -61,7 +70,7 @@ export function FormFieldCombobox<T extends FieldValues>({
 }: FormFieldComboboxProps<T>) {
   const cacheKey = fetcherKey ?? fetcher;
   const [options, setOptions] = useState<{ label: string; value: string; subLabel?: string }[]>(
-    () => comboboxCache.get(cacheKey) || [],
+    () => cacheGet(cacheKey) || [],
   );
   const [isLoading, startTransition] = useTransition();
   const [open, setOpen] = React.useState(false);
@@ -73,14 +82,14 @@ export function FormFieldCombobox<T extends FieldValues>({
 
   useEffect(() => {
     // แสดงค่าจากแคชก่อนเพื่อลดการกระพริบ แล้วค่อยโหลดค่าล่าสุดทับ
-    const cached = comboboxCache.get(cacheKey);
+    const cached = cacheGet(cacheKey);
     if (cached) setOptions(cached);
 
     startTransition(async () => {
       try {
         const data = await fetcherRef.current();
         setOptions(data);
-        comboboxCache.set(cacheKey, data);
+        cacheSet(cacheKey, data);
       } catch (error) {
         console.error("Failed to fetch combobox options:", error);
       }

package/src/components/shared/form/form-field-radio-cards.tsx

@@ -17,49 +17,95 @@ type RadioCardOption = {
 
 interface FormFieldRadioCardsProps<T extends FieldValues = any> {
   control?: Control<T>;
-  name?: Path<T>;
+  /** กับ react-hook-form = ชื่อ field; ไม่มี `control` = `name` ของ RadioGroup (ส่งค่าใน FormData ของ server action) */
+  name?: Path<T> | string;
   value?: string;
+  /** ค่าเริ่มต้นเมื่อไม่มี control และไม่คุม value เอง (ฟอร์ม server action) */
+  defaultValue?: string;
   onValueChange?: (value: string) => void;
   label?: string;
   options: RadioCardOption[];
   disabled?: boolean;
   className?: string;
   size?: "sm" | "md" | "lg";
+  /**
+   * `grid` (ค่าเริ่มต้น) = การ์ดสี่เหลี่ยมไอคอนกลาง จุดเลือกมุมขวาบน;
+   * `row` = การ์ดแนวนอน: ปุ่มวิทยุจริงซ้าย, ไอคอน+ชื่อบรรทัดบน, คำอธิบายบรรทัดล่าง (แบบ Pi Auth เลือกประเภทแอป)
+   */
+  layout?: "grid" | "row";
 }
 
 export function FormFieldRadioCards<T extends FieldValues = any>({
   control,
   name,
   value: propValue,
+  defaultValue,
   onValueChange: propOnValueChange,
   label,
   options,
   disabled,
   className,
   size = "md",
+  layout = "grid",
 }: FormFieldRadioCardsProps<T>) {
   const baseId = useId();
 
-  const renderContent = (value: string, onChange: (val: string) => void) => (
+  const renderContent = (
+    value: string | undefined,
+    onChange: (val: string) => void,
+    groupName?: string,
+  ) => (
     <div className="space-y-3">
       {label && <Label className="block font-semibold text-base">{label}</Label>}
       <RadioGroup
+        name={groupName}
         onValueChange={(val) => {
-          if (val !== null) onChange(val);
+          if (val !== null) onChange(String(val));
         }}
         value={value}
+        // base-ui-ok: ค่าเริ่มต้นของฟอร์ม server action — ไม่ถูกเปลี่ยนหลัง mount
+        defaultValue={value === undefined ? defaultValue : undefined}
         disabled={disabled}
-        className={cn("grid grid-cols-1 gap-4 md:grid-cols-2", className)}
+        className={cn(
+          "grid grid-cols-1 gap-4",
+          layout === "grid" ? "md:grid-cols-2" : "gap-3 sm:grid-cols-2",
+          className,
+        )}
       >
         {options.map((option) => {
           const id = `${baseId}-${option.value}`;
+          if (layout === "row") {
+            return (
+              <Label
+                key={option.value}
+                htmlFor={id}
+                className={cn(
+                  "flex cursor-pointer items-start gap-3 rounded-lg border p-3 font-normal transition-colors hover:bg-muted/40 has-data-checked:border-primary has-data-checked:bg-primary/5",
+                  disabled && "cursor-not-allowed opacity-50",
+                )}
+              >
+                <RadioGroupItem value={option.value} id={id} className="mt-0.5" />
+                <span className="flex min-w-0 flex-col gap-0.5">
+                  <span className="flex items-center gap-1.5 font-medium text-sm">
+                    {option.icon && (
+                      <span className={cn("[&_svg]:size-4", option.colorClass)}>{option.icon}</span>
+                    )}
+                    {option.label}
+                  </span>
+                  {option.description && (
+                    <span className="text-muted-foreground text-xs">{option.description}</span>
+                  )}
+                </span>
+              </Label>
+            );
+          }
           return (
             <div key={option.value} className="relative">
               <RadioGroupItem value={option.value} id={id} className="peer sr-only" />
               <Label
                 htmlFor={id}
                 className={cn(
-                  "flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 transition-all hover:border-primary hover:bg-accent peer-data-checked:border-primary peer-data-checked:bg-primary/5",
+                  "flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 transition-all hover:border-primary hover:bg-accent peer-data-checked:border-primary peer-data-checked:bg-primary/5 peer-data-checked:[&>[data-dot]]:scale-110 peer-data-checked:[&>[data-dot]]:border-primary peer-data-checked:[&>[data-dot]]:bg-primary peer-data-checked:[&>[data-dot]>span]:opacity-100",
                   size === "sm" && "min-h-[70px] gap-1 p-2",
                   size === "md" && "min-h-[100px] gap-2 p-4",
                   size === "lg" && "min-h-[120px] gap-4 p-6",
@@ -77,29 +123,19 @@ export function FormFieldRadioCards<T extends FieldValues = any>({
                     {option.label}
                   </div>
                   {option.description && (
-                    <div
-                      className={cn(
-                        "font-normal text-muted-foreground leading-tight",
-                        size === "sm" ? "text-xs" : "text-xs",
-                      )}
-                    >
+                    <div className="font-normal text-muted-foreground text-xs leading-tight">
                       {option.description}
                     </div>
                   )}
                 </div>
 
-                <div
-                  className={cn(
-                    "absolute top-2 right-2 h-4 w-4 rounded-full border-2 border-muted transition-all",
-                    value === option.value && "scale-110 border-primary bg-primary",
-                  )}
+                {/* จุดเลือกมุมขวาบน — ตามสถานะจริงของปุ่มวิทยุ (peer) จึงถูกทั้ง controlled/uncontrolled */}
+                <span
+                  data-dot=""
+                  className="absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded-full border-2 border-muted transition-all"
                 >
-                  {value === option.value && (
-                    <div className="flex h-full w-full items-center justify-center">
-                      <div className="h-1.5 w-1.5 rounded-full bg-white" />
-                    </div>
-                  )}
-                </div>
+                  <span className="h-1.5 w-1.5 rounded-full bg-white opacity-0" />
+                </span>
               </Label>
             </div>
           );
@@ -112,7 +148,7 @@ export function FormFieldRadioCards<T extends FieldValues = any>({
     return (
       <FormField
         control={control}
-        name={name}
+        name={name as Path<T>}
         render={({ field }) => (
           <FormItem className="space-y-3">
             <FormControl>{renderContent(field.value, field.onChange)}</FormControl>
@@ -123,5 +159,6 @@ export function FormFieldRadioCards<T extends FieldValues = any>({
     );
   }
 
-  return renderContent(propValue || "", propOnValueChange || (() => {}));
+  // ไม่มี control: คุม value เอง (`value` + `onValueChange`) หรือปล่อย uncontrolled ด้วย `name` + `defaultValue` (server action)
+  return renderContent(propValue, propOnValueChange ?? (() => {}), name);
 }

package/src/components/shared/form/labeled-field.tsx

@@ -0,0 +1,61 @@
+import { Checkbox } from "@suphark/ui/components/ui/checkbox";
+import { Field, FieldDescription, FieldError, FieldLabel } from "@suphark/ui/components/ui/field";
+import { Label } from "@suphark/ui/components/ui/label";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps, ReactNode } from "react";
+
+/**
+ * ช่องฟอร์มสำหรับ server action ธรรมดา (ไม่ใช่ react-hook-form): label + control + hint หรือ error
+ * ประกอบจาก shadcn Field/FieldLabel/FieldDescription/FieldError — ยกจาก Pi Auth (ใช้ 42 ไฟล์ คง API เดิม)
+ * ใช้ได้จาก server component (ไม่มี state)
+ *
+ *   <LabeledField label="ชื่อแอป" hint="แสดงในหน้าเข้าสู่ระบบ" error={state?.errors?.name}>
+ *     <Input name="name" required />
+ *   </LabeledField>
+ */
+export function LabeledField({
+  label,
+  hint,
+  error,
+  children,
+  className,
+}: {
+  label: ReactNode;
+  /** ข้อความช่วยใต้ช่อง — ซ่อนเมื่อมี error */
+  hint?: ReactNode;
+  error?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <Field className={cn("gap-1.5", className)} data-invalid={error ? true : undefined}>
+      <FieldLabel className="w-full flex-col items-stretch gap-1.5 font-normal [&_[data-slot=native-select-wrapper]]:w-full">
+        <span className="font-medium text-sm">{label}</span>
+        {children}
+      </FieldLabel>
+      {error ? (
+        <FieldError className="text-xs">{error}</FieldError>
+      ) : (
+        hint && <FieldDescription className="text-xs">{hint}</FieldDescription>
+      )}
+    </Field>
+  );
+}
+
+/**
+ * Checkbox ของ shadcn + label บรรทัดเดียว — ใส่ `name` แล้วส่ง "on" ใน FormData ของ server action ได้
+ *
+ *   <CheckboxField name="allowSignup" defaultChecked label="เปิดให้สมัครเอง" />
+ */
+export function CheckboxField({
+  label,
+  className,
+  ...props
+}: ComponentProps<typeof Checkbox> & { label: ReactNode }) {
+  return (
+    <Label className={cn("flex items-center gap-2 font-normal", className)}>
+      <Checkbox {...props} />
+      <span className="text-sm">{label}</span>
+    </Label>
+  );
+}