@suphark/ui 0.34.0 → 0.38.0

package/CHANGELOG.md

@@ -2,6 +2,63 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.38.0] — 2026-10-07
+
+### Fixed
+
+- **`@suphark/ui/sortable` ลากกลุ่มแล้วไม่เห็นอะไรขยับ** (เจ้าของแจ้ง): หัวกลุ่มมักอยู่ใน `SortableGroup` ซึ่งเป็น context ของรายการ dnd-kit จึงหากลุ่มในลำดับไม่เจอ ไม่มีแถวไหนได้ transform เลยจนปล่อย · ตอนนี้ provider คำนวณระยะเลื่อนของกลุ่มเอง และเลื่อน **ทั้งก้อน** (หัวกลุ่ม + แถวรายการ) — กลุ่มอื่นหลบเท่าความสูงทั้งก้อน, ช่องจาง ๆ ของกลุ่มที่ลากเลื่อนไปจุดวาง (ไม่มี overlay = ทั้งก้อนลอยตามเมาส์) · ที่วางของกลุ่มวัดรวมแถวรายการ ใช้ได้ทุกโครงสร้างโดยไม่ต้องแก้ call site · วัดบนหน้า demo: ลาก "ฐานข้อมูล" ลงเลย "อีเมล" → ฐานข้อมูลทั้งก้อน +134px, อีเมลทั้งก้อน −135px, ปล่อยแล้วไม่มี style ค้าง
+- แถวต้นทางจางค้างหลังปล่อย (เจอกับหัวกลุ่ม): side effect ของ drop animation ใน dnd-kit จำ opacity ที่เราตั้งไว้เป็นค่าเดิมแล้วเขียนคืน — ปิด side effect นั้น (opacity คุมผ่าน style ของ React อยู่แล้ว)
+
+### Added
+
+- `SortableProvider multiSelect` (+ `selected`/`onSelectedChange` ถ้าจะคุมเอง): เลือกหลายรายการแล้วลากไปพร้อมกัน — ⌘/Ctrl+คลิก ทีละตัว, Shift+คลิก เป็นช่วง (เฉพาะแถวที่แสดง), คลิกเฉย ๆ ล้าง (คลิกปุ่ม/ช่องกรอกในแถวไม่นับ) · ที่จับ: `x` เลือก/ไม่เลือก, ⌘/Ctrl+A ทั้งหมด, Esc ล้าง · ลากตัวที่เลือก = ทุกตัวที่เลือกจางลงตรงที่เดิมแล้วไปรวมที่จุดวาง เรียงตามลำดับเดิม (ข้ามกลุ่มได้) · ลากตัวที่ไม่ได้เลือก = ลากตัวเดียวและล้างการเลือก
+- `useSortableRow` คืน `selected` + `selectProps` (กระจายลงแถว มี `data-selected` ไว้ทำสี) · `useSortableState` คืน `selected`/`clearSelection` (ใช้คู่ `SelectionBar`)
+- `renderOverlay` ได้ `SortableDrag` = `{ kind, id, ids }` (`ids` = ทุกตัวที่ลากไปด้วยกัน — ทำการ์ดซ้อน + จำนวน) · `SortableAnnouncementContext.count` + `UiText.sortable.startedMany` ("เริ่มลาก {count} รายการที่เลือกไว้")
+- helper pure: `flatItems(order)`, `gatherItems(order, activeId, ids)`
+- showcase: `/components/sortable-list` เปิด `multiSelect` + `SelectionBar` + การ์ดซ้อนตอนลากหลายคีย์
+
+
+### Added
+
+- **`FormInvalidNet`** (ข้อเสนอจาก Pi Auth — มี `<form action>` เขียนเอง ~60 จุด): ตาข่ายฟอร์ม invalid ระดับแอป วางครั้งเดียว ฟัง `invalid` ทั้ง document แล้วแจ้งเป็น toast ข้อความเดียวกับ `UiText.invalidForm` + พาไปช่องแรกที่โฟกัสไม่ได้ · ข้ามฟอร์มที่มีตาข่ายของตัวเอง (`FormDialog`/`ActionForm`/`useFormInvalidNotice` ใส่ `data-invalid-notice` ให้; ใส่เองที่ฟอร์มเพื่อปิดได้) · วางซ้ำหลายที่ก็ไม่ขึ้น toast ซ้อน
+- `AppShell` วาง `FormInvalidNet` ให้เอง — หน้านอก AppShell (เช่น /login) วางใน root layout ใต้ `Toaster`
+- `useFormInvalidNotice().formProps` มี `data-invalid-notice` แล้ว
+- showcase: root layout วาง `FormInvalidNet`; `/components/action-form` มีตัวอย่าง `<form>` ดิบ
+
+## [0.36.0] — 2026-10-07
+
+> ประกาศพร้อม publish แล้ว แต่ยังไม่ขึ้น npm — รวมอยู่ใน 0.37.0
+
+มาตรฐานใหม่ (ขอจาก Pi Auth): **ปุ่มที่มีงานค้างต้องหมุน และฟอร์มที่ส่งไม่ได้ต้องบอกผู้ใช้เสมอ — ห้ามเงียบ**
+
+### Added
+
+- `Button loading`: ไอคอนนำหน้าเปลี่ยนเป็น spinner (ไม่มีไอคอน = เติมหน้าข้อความ ความกว้างปุ่มไม่กระตุก), กดซ้ำไม่ได้, `aria-busy="true"`, ปุ่มยังรับโฟกัส (`focusableWhenDisabled` — โฟกัสไม่หลุดไป body ตอนกด) · ไม่ใส่ `loading` + `type="submit"` ภายใน `<form action={…}>` = หมุนเองจาก `useFormStatus()` (ทุกปุ่ม submit ในฟอร์มนั้น) · `loading={false}` ปิดการตรวจอัตโนมัติ
+- `useFormInvalidNotice()` → `{ formProps, message, notice }`: จับ event `invalid` ของฟอร์ม รวมชื่อช่องที่ไม่ผ่านเป็นข้อความเดียว "กรุณากรอกหรือแก้ไข: ชื่อ, อีเมล" (`role="alert"`) — รวมช่องที่เบราว์เซอร์โฟกัสไม่ได้ (ซ่อนในแท็บ/ขั้นที่ปิด, input ซ่อนของ Select) ซึ่งปกติไม่มีอะไรขึ้นเลยนอกจาก console · เลื่อนไปที่ Field ของช่องแรกและโฟกัส control ที่กดได้ในนั้น · หายเองเมื่อแก้ครบ · ชื่อช่องจาก `<label>` (รวมแบบครอบของ `LabeledField`), `aria-label`, `aria-labelledby`, label ของ `Field`, placeholder, `name`
+- `UiText.invalidForm` (`fields` ใช้ `{fields}`, `generic`) — ไทย/อังกฤษในตัว
+
+### Changed
+
+- `FormDialog` / `ActionForm`: ปุ่มส่งใช้ `loading` ระหว่างรอ action (เดิมแค่ disabled จาง ๆ) และใส่ตาข่าย `useFormInvalidNotice` ให้เอง — แอปไม่ต้องแก้อะไร
+
+## [0.35.0] — 2026-10-07
+
+> ประกาศพร้อม publish แล้ว แต่ยังไม่ขึ้น npm — publish 0.36.0 ทีเดียวได้ทั้งสองรุ่น
+
+### Added
+
+- `SortableProvider renderOverlay={(drag) => …}`: วาดการ์ดลอยตามเมาส์แบบ Trello/Todoist (portal ไป `document.body` + drop animation 200ms) แถวต้นทางเหลือเป็นช่องจาง ๆ บอกตำแหน่งที่จะวาง · `useSortableState().overlay` บอกว่ากำลังใช้ overlay
+- `useSortableDropZone(groupId, { onDwell, dwellMs = 600 })`: ลากค้างเหนือโซนครบเวลาแล้วเรียก `onDwell` — ใช้เปิดโฟลเดอร์ที่ย่ออยู่ให้เอง
+
+### Changed
+
+- **`@suphark/ui/sortable` ลากลื่นขึ้น** (ผู้ใช้แจ้งว่าสะดุดตอนเอาเข้าโฟลเดอร์): หาเป้าหมายจากตำแหน่งเมาส์ (`pointerWithin` → `rectIntersection`) แทน `closestCenter` ทั้งตาราง, จำเป้าหมายล่าสุดกันสั่นตอนรายการย้ายข้ามกลุ่ม, ย้ายข้ามกลุ่มแทรก **ก่อนหรือหลัง** แถวเป้าหมายตามครึ่งแถว (เดิมแทรกก่อนเสมอ → ลากเข้าจากด้านล่างแล้วกระโดดข้าม), วางบนหัวโฟลเดอร์ = ขึ้นบนสุดของโฟลเดอร์ (เดิมไปท้ายกลุ่ม/ท้ายตาราง), วัดตำแหน่งใหม่ทุกครั้งที่ layout เปลี่ยน (`MeasuringStrategy.Always`) และ transition 200ms แบบ ease-out · วัดด้วย probe ลาก APP_URL ลง 222px: เดิมกระโดดไปท้ายกลุ่มแล้วไปท้ายตาราง, ตอนนี้ลงตรงใต้เมาส์และไม่เปลี่ยนเลยระหว่างค้างนิ่ง
+- showcase: `/components/sortable-list` ใช้การ์ดลอย + ลากค้างเหนือโฟลเดอร์ที่ย่ออยู่แล้วเปิดให้เอง
+
+### Docs
+
+- README (`@suphark/ui/sortable`): วิธีตรวจว่า `id` ทำงาน — `aria-describedby` ของที่จับเป็น id ที่ส่งเข้าไปตรง ๆ ไม่มี prefix `DndDescribedBy-` (prefix มีเฉพาะตอน dnd-kit สร้างเอง) และ element คำอธิบายถูกสร้างหลัง hydrate ต้องรอ mount ก่อน query (Pi Config ยืนยันบนของจริงหลัง bump 0.34.0)
+
 ## [0.34.0] — 2026-10-06
 
 ### Fixed

package/README.md

@@ -166,6 +166,19 @@ export default async function Layout({ children }) {
 // → ได้ tooltip ด้วย (ไม่ต้องมี prop ใหม่ที่ FormDialog/RowActions)
 ```
 
+**งานค้างต้องหมุน ห้ามเงียบ** (0.36.0): `<Button loading={saving}><SaveIcon /> บันทึก</Button>` — ไอคอนกลายเป็น spinner, กดซ้ำไม่ได้, `aria-busy` · `type="submit"` ใน `<form action={…}>` หมุนเองจาก `useFormStatus` · `FormDialog`/`ActionForm` ทำให้ทั้งปุ่มหมุนและตาข่ายฟอร์ม invalid · ฟอร์มเขียนเอง:
+
+```tsx
+const invalid = useFormInvalidNotice();
+<form action={save} {...invalid.formProps}>
+  …
+  {invalid.notice /* "กรุณากรอกหรือแก้ไข: ชื่อ, รหัสสาขา" — รวมช่องที่ซ่อน/โฟกัสไม่ได้ */}
+  <Button type="submit">บันทึก</Button>
+</form>
+```
+
+ไม่อยากใส่ทีละฟอร์ม: `<FormInvalidNet />` (0.37.0) แจ้งเป็น toast ให้ทุก `<form>` ที่ไม่มีตาข่ายของตัวเอง — `AppShell` ใส่ให้แล้ว หน้านอก AppShell วางใน root layout ใต้ `Toaster`
+
 | ต้องการ | เขียน |
 | --- | --- |
 | ข้อความอื่นที่ไม่ใช่ `aria-label` (หรือปุ่มที่มีข้อความแล้วแต่อยากอธิบายเพิ่ม) | `tooltip="ตรวจสอบอีกครั้ง"` |
@@ -218,8 +231,10 @@ const [order, setOrder] = useState(() =>
 ```
 
 - กลุ่มที่ไม่มีหัวกลุ่ม (เช่น "ยังไม่จัดกลุ่ม") ใช้ `useSortableDropZone(groupId)` แปะกับแถว placeholder ของตัวเอง และดูว่าควรแสดงเมื่อไหร่จาก `useSortableState().dragging` — **วางแถวนี้ไว้ใต้แถวที่ลากได้ทั้งหมด (ท้ายตาราง)** ถ้ามันโผล่ขึ้นเหนือแถวที่กำลังลาก layout จะเลื่อนตอนเริ่มลาก แล้วการลากด้วยคีย์บอร์ดจะไม่ขยับ
-- ตั้ง `id` ของ `SortableProvider` ได้ (ไม่ตั้ง = `useId()`) — ต้องคงที่ระหว่าง SSR กับ client ไม่งั้น `aria-describedby` ของ dnd-kit จะ hydration mismatch
+- ตั้ง `id` ของ `SortableProvider` ได้ (ไม่ตั้ง = `useId()`) — ต้องคงที่ระหว่าง SSR กับ client ไม่งั้น `aria-describedby` ของ dnd-kit จะ hydration mismatch · ตรวจได้จากที่จับ: `aria-describedby` จะเป็น **id ที่ส่งเข้าไปตรง ๆ** (ไม่มี prefix) และต้องชี้ element ที่มีข้อความวิธีลาก — element นี้สร้างหลัง hydrate จึงต้องรอหน้า mount ก่อนค่อย query
 - `onCommit` ล้มเหลว (throw หรือ `{ ok: false, error }`) = คืนลำดับเดิม + toast; ถ้าอยากจัดการ error เองใส่ `onCommitError`
+- การ์ดลอยตามเมาส์: `renderOverlay={(drag) => drag.kind === "item" ? <ItemCard id={drag.id} /> : <GroupCard id={drag.id} />}` (วาดใน portal จึงเป็น `div` ได้ ไม่ต้องเป็น `<tr>`) — ไม่ใส่ = แถวขยับเองแบบเดิม · โฟลเดอร์ที่ย่ออยู่: `useSortableDropZone(id, { onDwell: collapsed ? open : undefined })` ลากค้าง 600ms แล้วเปิดให้ · วางบนหัวกลุ่ม = ขึ้นบนสุดของกลุ่ม, วางบนโซนของ `UNGROUPED` = ต่อท้าย
+- เลือกหลายรายการแล้วลากพร้อมกัน: `SortableProvider multiSelect` แล้วกระจาย `row.selectProps` ลงแถว (ทำสีด้วย `data-[selected]:bg-primary/10`) — ⌘/Ctrl+คลิก, Shift+คลิก, ที่จับกด `x` / ⌘/Ctrl+A, Esc ล้าง · แถบนับใช้ `SelectionBar` + `useSortableState().selected/clearSelection` · `renderOverlay` ได้ `drag.ids` ไว้ทำการ์ดซ้อน
 - `sortableOrderToPayload(order)` คืน `{ groups, items }` — `groups` คือลำดับของกลุ่ม, `items` คือรายการในแต่ละกลุ่มเรียงตามนั้น (ของที่ยังไม่มีกลุ่มมาก่อนด้วย `groupId: null`)
 - `SortableProvider disabled` (เช่นระหว่างกรอง ซึ่งลำดับที่เห็นไม่ใช่ลำดับจริง) ทำให้ `DragHandle` จางลงและกดไม่ได้ — ไม่อยากให้เห็นเลยใส่ `hideWhenDisabled`
 - ข้อความ screen reader: ใส่ `announcements`/`screenReaderInstructions` เป็น prop (callback ได้ `{ id, kind, groupId, index, total }`) หรือปล่อยให้ใช้แม่แบบจาก `UiText.sortable`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.34.0",
+  "version": "0.38.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-shell.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/shared/button/button";
+import { FormInvalidNet } from "@suphark/ui/components/shared/form/form-invalid-notice";
 import { SkipLink } from "@suphark/ui/components/shared/skip-link";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
@@ -133,7 +134,13 @@ export const APP_MAIN_ID = "app-main";
 
 /** ลิงก์ "ข้ามไปเนื้อหา" ของ AppShell — ใช้ `SkipLink` ตัวเดียวกับที่ export ให้แอปใช้นอก AppShell */
 function SkipToMain() {
-  return <SkipLink href={`#${APP_MAIN_ID}`} />;
+  return (
+    <>
+      <SkipLink href={`#${APP_MAIN_ID}`} />
+      {/* ตาข่ายฟอร์ม invalid ทั้งแอป — วางคู่กับ skip link เพราะทั้งสองแบบของ shell เรียกตัวนี้ */}
+      <FormInvalidNet />
+    </>
+  );
 }
 
 function SidebarShell({

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

@@ -4,6 +4,7 @@ import { Button } from "@suphark/ui/components/shared/button/button";
 import { Card, CardContent } from "@suphark/ui/components/ui/card";
 import { cn } from "@suphark/ui/lib/utils";
 import { type ComponentProps, type ReactNode, startTransition, useActionState } from "react";
+import { useFormInvalidNotice } from "./form/form-invalid-notice";
 import {
   type FormAction,
   FormMessage,
@@ -56,6 +57,7 @@ export function ActionForm<TData = undefined>({
   submitProps?: Omit<ComponentProps<typeof Button>, "type" | "disabled" | "children">;
 }) {
   const text = useUiText();
+  const invalid = useFormInvalidNotice();
   const [state, formAction, pending] = useActionState<FormState<TData>, FormData>(
     async (prev, fd) => {
       const next = await action(prev, fd);
@@ -67,6 +69,7 @@ export function ActionForm<TData = undefined>({
 
   const form = (
     <form
+      {...invalid.formProps}
       onSubmit={(e) => {
         e.preventDefault();
         const fd = new FormData(e.currentTarget);
@@ -79,6 +82,7 @@ export function ActionForm<TData = undefined>({
     >
       {title && !compact && <h2 className="font-semibold text-sm">{title}</h2>}
       {typeof children === "function" ? children(formRenderContext(state, pending)) : children}
+      {invalid.notice && <div className={compact ? "basis-full" : undefined}>{invalid.notice}</div>}
       {!(hideSuccessMessage && state?.ok) && (
         <FormMessage state={state} className={compact ? "basis-full" : undefined} />
       )}
@@ -87,7 +91,8 @@ export function ActionForm<TData = undefined>({
         className={compact ? undefined : "self-start"}
         {...submitProps}
         type="submit"
-        disabled={pending || submitDisabled}
+        disabled={submitDisabled}
+        loading={pending}
       >
         {submitLabel ?? text.save}
       </Button>

package/src/components/shared/button/button.tsx

@@ -2,6 +2,8 @@
 
 import { Button as ButtonBase } from "@suphark/ui/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
+import { cn } from "@suphark/ui/lib/utils";
+import { Loader2Icon } from "lucide-react";
 import {
   Children,
   type ComponentProps,
@@ -11,6 +13,7 @@ import {
   type ReactNode,
   useContext,
 } from "react";
+import { useFormStatus } from "react-dom";
 
 export type ButtonTooltipSide = "top" | "bottom" | "left" | "right";
 
@@ -24,6 +27,12 @@ export interface ButtonProps extends ComponentProps<typeof ButtonBase> {
   tooltipSide?: ButtonTooltipSide;
   /** หน่วงก่อนโชว์ (ms) — ไม่ใส่ = ตาม `TooltipProvider` ของแอป หรือ 600 ตามค่าของ Base UI */
   tooltipDelay?: number;
+  /**
+   * กำลังทำงาน — ไอคอนนำหน้าเปลี่ยนเป็น spinner (ไม่มีไอคอน = เติม spinner หน้าข้อความ), กดซ้ำไม่ได้, `aria-busy`
+   * ปุ่มยังรับโฟกัสอยู่ (ไม่หลุดไป body ตอนกด) · ไม่ใส่ + `type="submit"` = ใช้ `useFormStatus()` ของ `<form action={…}>` ให้เอง
+   * (ทุกปุ่ม submit ในฟอร์มนั้นหมุนพร้อมกัน) · `false` = ปิดการตรวจอัตโนมัติ
+   */
+  loading?: boolean;
 }
 
 const NoAutoTooltip = createContext(false);
@@ -61,6 +70,37 @@ function srOnlyText(children: ReactNode): string | null {
   return found;
 }
 
+function isSrOnly(node: ReactNode): boolean {
+  if (!isValidElement(node)) return false;
+  const className = (node.props as { className?: unknown }).className;
+  return typeof className === "string" && className.split(/\s+/).includes("sr-only");
+}
+
+/** แทนไอคอนนำหน้า (child ตัวแรกที่เป็น element) ด้วย spinner — ความกว้างปุ่มจึงไม่กระตุก; ไม่มีไอคอน = เติมหน้าข้อความ */
+function withSpinner(children: ReactNode): ReactNode {
+  const list = Children.toArray(children);
+  const first = list[0];
+  const leadingIcon =
+    isValidElement(first) && first.type !== Fragment && !isSrOnly(first) ? first : null;
+  // คง data-icon เดิมของไอคอน (padding ของปุ่มขึ้นกับมัน) — เติมใหม่ = inline-start
+  const dataIcon = leadingIcon
+    ? (leadingIcon.props as { "data-icon"?: string })["data-icon"]
+    : "inline-start";
+  const iconClass = leadingIcon
+    ? (leadingIcon.props as { className?: unknown }).className
+    : undefined;
+  const spinner = (
+    <Loader2Icon
+      key="loading"
+      aria-hidden
+      data-icon={dataIcon}
+      data-slot="button-spinner"
+      className={cn(typeof iconClass === "string" && iconClass, "animate-spin")}
+    />
+  );
+  return leadingIcon ? [spinner, ...list.slice(1)] : [spinner, ...list];
+}
+
 /** มี children ที่เป็นข้อความจริง ๆ ไหม (ไอคอน/`<span className="sr-only">` ไม่นับ) */
 function hasTextChild(children: ReactNode): boolean {
   let found = false;
@@ -91,8 +131,26 @@ function hasTextChild(children: ReactNode): boolean {
  * ปิดเป็นรายปุ่มด้วย `tooltip={false}`; ทับข้อความด้วย `tooltip="…"`
  * ไฟล์ shadcn ดิบอยู่ที่ `components/ui/button.tsx` (ห้ามแก้มือ) — barrel export ตัวนี้
  */
-export function Button({ tooltip, tooltipSide = "top", tooltipDelay, ...props }: ButtonProps) {
+export function Button({
+  tooltip,
+  tooltipSide = "top",
+  tooltipDelay,
+  loading,
+  ...rest
+}: ButtonProps) {
   const suppressed = useContext(NoAutoTooltip);
+  // นอก <form> หรือฟอร์มที่ไม่ได้ใช้ `action=` → pending เป็น false เสมอ
+  const form = useFormStatus();
+  const busy = loading ?? (rest.type === "submit" && form.pending);
+  const props: ComponentProps<typeof ButtonBase> = busy
+    ? {
+        ...rest,
+        disabled: true,
+        focusableWhenDisabled: true,
+        "aria-busy": true,
+        children: withSpinner(rest.children),
+      }
+    : rest;
   const label =
     typeof props["aria-label"] === "string" && props["aria-label"].trim() !== ""
       ? props["aria-label"]

package/src/components/shared/form/form-invalid-notice.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import { type FormEvent, type ReactNode, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { UI_TEXT_TH, type UiText, useUiText } from "../ui-text";
+
+type Control = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+const CONTROL_SELECTOR =
+  "input:not([type=hidden]):not([aria-hidden=true]),select:not([aria-hidden=true]),textarea,button,[role=combobox],[tabindex]:not([tabindex='-1'])";
+
+export interface FormInvalidNotice {
+  /** กระจายลง `<form>` — จับ event `invalid` (ไม่ bubble จึงต้อง capture) + ล้างเมื่อแก้ครบหรือส่งผ่าน */
+  formProps: {
+    /** เครื่องหมายให้ `FormInvalidNet` ข้ามฟอร์มนี้ (มีตาข่ายของตัวเองแล้ว) */
+    "data-invalid-notice": "";
+    onInvalidCapture: (event: FormEvent<HTMLFormElement>) => void;
+    onInputCapture: () => void;
+    onChangeCapture: () => void;
+    onSubmitCapture: () => void;
+  };
+  /** ข้อความที่จะแสดง (null = ไม่มีช่องผิด) */
+  message: string | null;
+  /** `<p role="alert">` สำเร็จรูป — วางไว้ใกล้ปุ่มส่ง */
+  notice: ReactNode;
+}
+
+/**
+ * ตาข่ายกัน "กดส่งแล้วเงียบ": เบราว์เซอร์บล็อกการส่งเมื่อมีช่อง `required`/`pattern`/… ไม่ผ่าน แต่ถ้าช่องนั้น
+ * โฟกัสไม่ได้ (ซ่อนอยู่ในแท็บ/ขั้นที่ปิด, input ซ่อนของ Select/Combobox) จะไม่มีอะไรขึ้นให้ผู้ใช้เห็นเลย มีแค่ใน console
+ * hook นี้รวมชื่อช่องที่ผิดเป็นข้อความเดียว ("กรุณากรอกหรือแก้ไข: ชื่อ, อีเมล") และเลื่อนไปที่ช่องแรกให้ —
+ * `FormDialog`/`ActionForm` ใส่ให้แล้ว ฟอร์มเขียนเองใช้:
+ *
+ *   const invalid = useFormInvalidNotice();
+ *   <form action={save} {...invalid.formProps}>… {invalid.notice} <Button type="submit">บันทึก</Button></form>
+ *
+ * ชื่อช่องหาจาก `<label>` (รวมแบบที่ครอบ control ของ `LabeledField`), `aria-label`, `aria-labelledby`,
+ * label ของ `Field` ที่ครอบอยู่, placeholder แล้วค่อย `name` · ข้อความจาก `UiText.invalidForm`
+ */
+export function useFormInvalidNotice(): FormInvalidNotice {
+  const text = useUiText();
+  const [labels, setLabels] = useState<string[] | null>(null);
+  const batch = useRef<Control[]>([]);
+  const invalid = useRef<Control[]>([]);
+
+  function onInvalidCapture(event: FormEvent<HTMLFormElement>) {
+    const target = event.target as Control;
+    // เบราว์เซอร์ยิง invalid ทีละช่องแบบ synchronous ในรอบตรวจเดียว → รวบแล้วค่อยแสดงทีเดียว
+    if (batch.current.length === 0) queueMicrotask(flush);
+    batch.current.push(target);
+  }
+
+  function flush() {
+    const controls = batch.current;
+    batch.current = [];
+    invalid.current = controls;
+    setLabels(unique(controls.map(labelOf).filter((l): l is string => l !== null)));
+    const first = controls[0];
+    if (first && !canShowNativeBubble(first)) reveal(first);
+  }
+
+  function recheck() {
+    if (invalid.current.length === 0) return;
+    const still = invalid.current.filter((c) => c.isConnected && !c.validity.valid);
+    invalid.current = still;
+    setLabels(
+      still.length === 0 ? null : unique(still.map(labelOf).filter((l): l is string => l !== null)),
+    );
+  }
+
+  function clear() {
+    invalid.current = [];
+    setLabels(null);
+  }
+
+  const message = labels === null ? null : invalidMessage(text, labels);
+
+  return {
+    formProps: {
+      "data-invalid-notice": "",
+      onInvalidCapture,
+      onInputCapture: recheck,
+      onChangeCapture: recheck,
+      onSubmitCapture: clear,
+    },
+    message,
+    notice: message ? (
+      <p role="alert" data-slot="form-invalid-notice" className="text-destructive text-xs">
+        {message}
+      </p>
+    ) : null,
+  };
+}
+
+function invalidMessage(text: UiText, labels: string[]): string {
+  const t = { ...UI_TEXT_TH.invalidForm, ...text.invalidForm };
+  return labels.length > 0
+    ? (t.fields ?? "").replace("{fields}", labels.join(", "))
+    : (t.generic ?? "");
+}
+
+/** event ที่ net ตัวไหนจัดการไปแล้ว — วาง net ซ้ำ (root layout + AppShell) ก็ไม่ขึ้น toast ซ้อน */
+const handled = new WeakSet<Event>();
+
+/**
+ * ตาข่ายระดับแอป วางครั้งเดียว (AppShell ใส่ให้แล้ว; หน้านอก AppShell เช่น /login วางใน root layout ใต้ `Toaster`):
+ * ฟัง `invalid` ทั้ง document แล้วแจ้งเป็น toast "กรุณากรอกหรือแก้ไข: …" + พาไปช่องแรกที่โฟกัสไม่ได้
+ * ข้ามฟอร์มที่มีตาข่ายของตัวเอง (`FormDialog`/`ActionForm`/`useFormInvalidNotice` — มี `data-invalid-notice`)
+ * และฟอร์มที่ใส่ `data-invalid-notice` เองเพื่อปิด · ต้องมี `Toaster` ของ sonner ในหน้า
+ */
+export function FormInvalidNet() {
+  const text = useUiText();
+  const textRef = useRef(text);
+  textRef.current = text;
+
+  useEffect(() => {
+    let batch: Control[] = [];
+    function flush() {
+      const controls = batch;
+      batch = [];
+      const labels = unique(controls.map(labelOf).filter((l): l is string => l !== null));
+      toast.error(invalidMessage(textRef.current, labels), { id: "suphark-form-invalid" });
+      const first = controls[0];
+      if (first && !canShowNativeBubble(first)) reveal(first);
+    }
+    function onInvalid(event: Event) {
+      const target = event.target;
+      if (handled.has(event)) return;
+      if (
+        !(target instanceof HTMLInputElement) &&
+        !(target instanceof HTMLSelectElement) &&
+        !(target instanceof HTMLTextAreaElement)
+      )
+        return;
+      handled.add(event);
+      // ฟอร์มที่มีตาข่ายของตัวเอง (หรือ control ที่ไม่อยู่ในฟอร์ม แต่อยู่ใต้ element ที่ทำเครื่องหมาย)
+      if (
+        target.form?.hasAttribute("data-invalid-notice") ||
+        target.closest("[data-invalid-notice]")
+      )
+        return;
+      if (batch.length === 0) queueMicrotask(flush);
+      batch.push(target);
+    }
+    document.addEventListener("invalid", onInvalid, true);
+    return () => document.removeEventListener("invalid", onInvalid, true);
+  }, []);
+
+  return null;
+}
+
+function unique(list: string[]): string[] {
+  return [...new Set(list)];
+}
+
+function isShown(el: Element): boolean {
+  return el.getClientRects().length > 0;
+}
+
+/** เบราว์เซอร์จะโฟกัสช่องนี้และขึ้น bubble เองไหม — ถ้าไม่ เราต้องพาผู้ใช้ไปเอง */
+function canShowNativeBubble(el: Control): boolean {
+  return isShown(el) && el.getAttribute("aria-hidden") !== "true" && el.tabIndex >= 0;
+}
+
+/** เลื่อนไปที่ช่อง (หรือ Field ที่ครอบ / บรรพบุรุษตัวแรกที่มองเห็น) แล้วโฟกัส control ที่กดได้ในนั้น */
+function reveal(el: Control) {
+  const field = el.closest<HTMLElement>("[data-slot=field],[data-slot=form-item]");
+  let anchor: HTMLElement | null = field && isShown(field) ? field : el;
+  while (anchor && !isShown(anchor)) anchor = anchor.parentElement;
+  if (!anchor) return;
+  anchor.scrollIntoView?.({ block: "center" });
+  const focusable = [...anchor.querySelectorAll<HTMLElement>(CONTROL_SELECTOR)].find(
+    (c) => c !== el && isShown(c) && !(c as HTMLButtonElement).disabled,
+  );
+  focusable?.focus({ preventScroll: true });
+}
+
+function clean(value: string | null | undefined): string | null {
+  const text = value
+    ?.replace(/\s+/g, " ")
+    .replace(/\s*\*$/, "")
+    .trim();
+  return text ? text : null;
+}
+
+/** ข้อความของ label โดยไม่เอาข้อความของ control ที่อยู่ข้างใน (label ที่ครอบ select จะมีข้อความ option ปนมา) */
+function labelText(label: Element): string | null {
+  const parts: string[] = [];
+  for (const node of label.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE) parts.push(node.textContent ?? "");
+    else if (
+      node instanceof Element &&
+      !node.matches(CONTROL_SELECTOR) &&
+      !node.querySelector(CONTROL_SELECTOR)
+    )
+      parts.push(node.textContent ?? "");
+  }
+  return clean(parts.join(" "));
+}
+
+function labelOf(el: Control): string | null {
+  const own = el.labels?.[0];
+  if (own) {
+    const t = labelText(own);
+    if (t) return t;
+  }
+  const aria = clean(el.getAttribute("aria-label"));
+  if (aria) return aria;
+  const labelledBy = el.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    const t = clean(
+      labelledBy
+        .split(/\s+/)
+        .map((id) => el.ownerDocument.getElementById(id)?.textContent ?? "")
+        .join(" "),
+    );
+    if (t) return t;
+  }
+  const field = el.closest("[data-slot=field],[data-slot=form-item]");
+  const fieldLabel = field?.querySelector("label,[data-slot=field-label],[data-slot=form-label]");
+  if (fieldLabel) {
+    const t = labelText(fieldLabel);
+    if (t) return t;
+  }
+  return clean(el.getAttribute("placeholder")) ?? clean(el.getAttribute("name"));
+}

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

@@ -21,6 +21,7 @@ import {
   useEffect,
   useState,
 } from "react";
+import { useFormInvalidNotice } from "./form/form-invalid-notice";
 import {
   type FormAction,
   FormMessage,
@@ -140,6 +141,7 @@ function FormDialogBody<TData>({
 }) {
   const router = useRouter();
   const text = useUiText();
+  const invalid = useFormInvalidNotice();
   const [state, formAction, pending] = useActionState<FormState<TData>, FormData>(action, null);
   const [submitted, setSubmitted] = useState(0);
 
@@ -178,6 +180,7 @@ function FormDialogBody<TData>({
 
   return (
     <form
+      {...invalid.formProps}
       // ไม่ใช้ `action=` — React 19 รีเซ็ตฟอร์ม uncontrolled หลัง action จบทุกครั้ง (แม้คืน error)
       // ทำให้ค่าที่พิมพ์หาย; เรียก action ใน transition เองแทน ฟอร์มจึงคงค่าไว้ให้แก้ต่อได้
       onSubmit={(e) => {
@@ -195,12 +198,13 @@ function FormDialogBody<TData>({
       <div className="-mx-1 flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-1">
         {typeof children === "function" ? children(formRenderContext(state, pending)) : children}
       </div>
+      {invalid.notice}
       <FormMessage state={state} />
       <DialogFooter>
         <Button type="button" variant="ghost" onClick={close}>
           {text.cancel}
         </Button>
-        <Button type="submit" disabled={pending}>
+        <Button type="submit" loading={pending}>
           {submitLabel ?? text.save}
         </Button>
       </DialogFooter>

package/src/components/shared/ui-text.tsx

@@ -28,6 +28,8 @@ export interface UiText {
     instructions: string;
     /** ใช้ `{index}` / `{total}` */
     started: string;
+    /** เริ่มลากหลายรายการที่เลือกไว้ — ใช้ `{count}` */
+    startedMany: string;
     moved: string;
     dropped: string;
     cancelled: string;
@@ -71,6 +73,8 @@ export interface UiText {
   notifications?: Partial<{ title: string; empty: string; viewAll: string }>;
   /** SelectionBar (optional) — `selected` ใช้ `{count}` */
   selection?: Partial<{ selected: string; clear: string }>;
+  /** ตาข่ายฟอร์มที่ไม่ผ่าน validation (`useFormInvalidNotice`, FormDialog, ActionForm) — `fields` ใช้ `{fields}` */
+  invalidForm?: Partial<{ fields: string; generic: string }>;
   /** DataTable (optional) — `rowsSelected` ใช้ `{selected}`/`{total}`, `pageOf` ใช้ `{page}`/`{pages}` */
   table?: Partial<{
     rowsPerPage: string;
@@ -248,10 +252,12 @@ export const UI_TEXT_TH: UiText = {
     viewAll: "ดูทั้งหมด",
   },
   selection: { selected: "เลือก {count} รายการ", clear: "ล้างการเลือก" },
+  invalidForm: { fields: "กรุณากรอกหรือแก้ไข: {fields}", generic: "กรุณากรอกข้อมูลให้ครบถ้วน" },
   sortable: {
     handle: "ลากเพื่อจัดลำดับ",
     instructions: "กด Space เพื่อเริ่มลาก ใช้ปุ่มลูกศรเลื่อน แล้วกด Space อีกครั้งเพื่อวาง (Esc = ยกเลิก)",
     started: "เริ่มลากรายการที่ {index} จาก {total}",
+    startedMany: "เริ่มลาก {count} รายการที่เลือกไว้",
     moved: "ย้ายไปตำแหน่งที่ {index} จาก {total}",
     dropped: "วางที่ตำแหน่งที่ {index} จาก {total}",
     cancelled: "ยกเลิกการลาก",
@@ -413,11 +419,16 @@ export const UI_TEXT_EN: UiText = {
     viewAll: "View all",
   },
   selection: { selected: "{count} selected", clear: "Clear selection" },
+  invalidForm: {
+    fields: "Please fill in or fix: {fields}",
+    generic: "Please complete the required fields",
+  },
   sortable: {
     handle: "Drag to reorder",
     instructions:
       "Press Space to start dragging, use arrow keys to move, Space again to drop (Esc to cancel)",
     started: "Picked up item {index} of {total}",
+    startedMany: "Picked up {count} selected items",
     moved: "Moved to position {index} of {total}",
     dropped: "Dropped at position {index} of {total}",
     cancelled: "Dragging cancelled",