@suphark/ui 0.33.0 → 0.37.0

package/CHANGELOG.md

@@ -2,6 +2,57 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.37.0] — 2026-10-07
+
+### 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
+
+- **`SortableProvider` ทำ hydration mismatch ทุกหน้าที่ SSR** (รายงานจาก Pi Config ตอนลากบนของจริง): ไม่ได้ส่ง `id` ให้ `DndContext` → dnd-kit สร้าง `aria-describedby="DndDescribedBy-N"` จากตัวนับที่เดินไม่ตรงกันระหว่าง server กับ client, React 19 ขึ้น error และ **ไม่ซ่อมให้** — attribute ค้างชี้ element ที่ไม่มีอยู่ ผู้ใช้ screen reader จึงไม่ได้ยินคำอธิบายวิธีลาก · ตอนนี้ค่าเริ่มต้นเป็น `useId()` (ตรงกันทั้งสองฝั่ง) และรับ prop **`id`** สำหรับ id ที่สื่อความหมาย — กระทบทุกแอปที่ใช้ `@suphark/ui/sortable` ใน Next.js
+- `@suphark/ui/sortable`: เสียงประกาศระหว่างลากในกลุ่มเดียวกันบอกตำแหน่ง **เดิม** ซ้ำ ("ย้ายไปตำแหน่งที่ 1 จาก 2" ทั้งที่เลื่อนลงแล้ว) เพราะลำดับจริงเปลี่ยนตอนปล่อย — ตอนนี้ระหว่างลากประกาศตำแหน่งของเป้าหมาย และตอนปล่อยประกาศตำแหน่งจริงหลังย้าย (เจอระหว่างทดสอบลากด้วยคีย์บอร์ดตามที่ Pi Config ถาม; ลากด้วยคีย์บอร์ดเองทำงานถูกอยู่แล้ว)
+- showcase: `/components/sortable-list` ย้ายแถว "ลากมาที่นี่เพื่อเอาออกจากกลุ่ม" ไปท้ายตาราง — เดิมโผล่เหนือกลุ่มตอนเริ่มลาก ดันแถวที่กำลังลากลง จนลากคีย์ในกลุ่มด้วยคีย์บอร์ดไม่ขยับ (README เพิ่มคำเตือนนี้ + เรื่อง `id`)
+
 ## [0.33.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="ตรวจสอบอีกครั้ง"` |
@@ -217,8 +230,10 @@ const [order, setOrder] = useState(() =>
 </SortableProvider>
 ```
 
-- กลุ่มที่ไม่มีหัวกลุ่ม (เช่น "ยังไม่จัดกลุ่ม") ใช้ `useSortableDropZone(groupId)` แปะกับแถว placeholder ของตัวเอง และดูว่าควรแสดงเมื่อไหร่จาก `useSortableState().dragging`
+- กลุ่มที่ไม่มีหัวกลุ่ม (เช่น "ยังไม่จัดกลุ่ม") ใช้ `useSortableDropZone(groupId)` แปะกับแถว placeholder ของตัวเอง และดูว่าควรแสดงเมื่อไหร่จาก `useSortableState().dragging` — **วางแถวนี้ไว้ใต้แถวที่ลากได้ทั้งหมด (ท้ายตาราง)** ถ้ามันโผล่ขึ้นเหนือแถวที่กำลังลาก layout จะเลื่อนตอนเริ่มลาก แล้วการลากด้วยคีย์บอร์ดจะไม่ขยับ
+- ตั้ง `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` = ต่อท้าย
 - `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.33.0",
+  "version": "0.37.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

@@ -71,6 +71,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,6 +250,7 @@ export const UI_TEXT_TH: UiText = {
     viewAll: "ดูทั้งหมด",
   },
   selection: { selected: "เลือก {count} รายการ", clear: "ล้างการเลือก" },
+  invalidForm: { fields: "กรุณากรอกหรือแก้ไข: {fields}", generic: "กรุณากรอกข้อมูลให้ครบถ้วน" },
   sortable: {
     handle: "ลากเพื่อจัดลำดับ",
     instructions: "กด Space เพื่อเริ่มลาก ใช้ปุ่มลูกศรเลื่อน แล้วกด Space อีกครั้งเพื่อวาง (Esc = ยกเลิก)",
@@ -413,6 +416,10 @@ 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:

package/src/components/sortable/sortable-list.tsx

@@ -6,9 +6,16 @@ import {
   DndContext,
   type DragEndEvent,
   type DragOverEvent,
+  DragOverlay,
   type DragStartEvent,
+  type DropAnimation,
+  defaultDropAnimationSideEffects,
+  getFirstCollision,
   KeyboardSensor,
+  MeasuringStrategy,
   PointerSensor,
+  pointerWithin,
+  rectIntersection,
   type UniqueIdentifier,
   useDroppable,
   useSensor,
@@ -23,6 +30,7 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 import { Button } from "@suphark/ui/components/shared/button/button";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { useMounted } from "@suphark/ui/hooks/use-mounted";
 import { errorMessage } from "@suphark/ui/lib/action-result";
 import {
   groupOfItem,
@@ -41,10 +49,13 @@ import {
   type ReactNode,
   useCallback,
   useContext,
+  useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
 } from "react";
+import { createPortal } from "react-dom";
 import { toast } from "sonner";
 
 export type SortableKind = "group" | "item";
@@ -55,15 +66,13 @@ const dndId = (kind: SortableKind | "zone", id: string) =>
 const kindOf = (id: UniqueIdentifier) => String(id).slice(0, 1);
 const rawOf = (id: UniqueIdentifier) => String(id).slice(2);
 
-/** ลากกลุ่มชนได้แค่กลุ่ม ลากรายการชนได้แค่รายการกับหัวกลุ่ม — ไม่งั้น closestCenter สลับชนิดกันมั่ว */
-const collision: CollisionDetection = (args) => {
-  const draggingGroup = kindOf(args.active.id) === "g";
-  return closestCenter({
-    ...args,
-    droppableContainers: args.droppableContainers.filter(
-      (container) => (kindOf(container.id) === "g") === draggingGroup,
-    ),
-  });
+/** จังหวะเดียวกันทั้งแถวที่เลื่อนหลบและตอนปล่อย — ease-out สั้น ๆ แบบบอร์ดงาน (Trello/Todoist) */
+const EASING = "cubic-bezier(0.25, 1, 0.5, 1)";
+const SORT_TRANSITION = { duration: 200, easing: EASING };
+const DROP_ANIMATION: DropAnimation = {
+  duration: 200,
+  easing: EASING,
+  sideEffects: defaultDropAnimationSideEffects({ styles: { active: { opacity: "0.4" } } }),
 };
 
 interface SortableState {
@@ -71,12 +80,15 @@ interface SortableState {
   dragging: SortableKind | null;
   disabled: boolean;
   handleLabel: string;
+  /** มี `renderOverlay` = แถวต้นทางเป็นที่ว่างจาง ๆ ส่วนของที่ลอยตามเมาส์คือ overlay */
+  overlay: boolean;
 }
 
 const SortableStateContext = createContext<SortableState>({
   dragging: null,
   disabled: true,
   handleLabel: "ลากเพื่อจัดลำดับ",
+  overlay: false,
 });
 
 /**
@@ -131,6 +143,19 @@ export interface SortableProviderProps {
    * ไม่ส่ง = แม่แบบจาก `UiText.sortable` (`{index}` / `{total}`)
    */
   announcements?: SortableAnnouncements;
+  /**
+   * id ของ `DndContext` — ต้องคงที่ระหว่าง SSR กับ client ไม่งั้น `aria-describedby="DndDescribedBy-N"`
+   * ที่ dnd-kit สร้างจากตัวนับจะไม่ตรงกัน (hydration mismatch ที่ React ไม่ซ่อมให้ → screen reader
+   * ไม่ได้ยินคำอธิบายวิธีลาก) · ไม่ส่ง = `useId()` ซึ่งตรงกันทั้งสองฝั่งอยู่แล้ว · ส่ง id ที่สื่อความหมาย
+   * (เช่น `values-${environmentId}`) ช่วยตอนไล่ปัญหา
+   */
+  id?: string;
+  /**
+   * สิ่งที่ลอยตามเมาส์ระหว่างลาก (แบบการ์ดใน Trello/Todoist) — ไม่ส่ง = ลากตัวแถวเองเหมือนเดิม
+   * ส่งมา = แถวต้นทางกลายเป็นช่องว่างจาง ๆ บอกตำแหน่งที่จะวาง และมีแอนิเมชันตอนปล่อย
+   * วาดใน portal ที่ `body` จึงคืน `<div>` ได้แม้รายการจริงเป็นแถว `<tr>` ของตาราง
+   */
+  renderOverlay?: (drag: { kind: SortableKind; id: string }) => ReactNode;
   children: ReactNode;
 }
 
@@ -152,15 +177,68 @@ export function SortableProvider({
   onCommitError,
   screenReaderInstructions,
   announcements,
+  id,
+  renderOverlay,
   children,
 }: SortableProviderProps) {
+  const fallbackId = useId();
   const text = useUiText();
+  const mounted = useMounted();
   const [dragging, setDragging] = useState<SortableKind | null>(null);
+  const [activeDrag, setActiveDrag] = useState<{ kind: SortableKind; id: string } | null>(null);
+  // กันกระพริบตอนย้ายข้ามกลุ่ม: จำเป้าหมายล่าสุดไว้ใช้ตอนที่ layout กำลังขยับแล้วหาเป้าหมายไม่เจอ
+  const lastOverId = useRef<UniqueIdentifier | null>(null);
+  const movedAcross = useRef(false);
   const beforeDrag = useRef<SortableOrder | null>(null);
   // อ่านลำดับล่าสุดตอนปล่อย (onDragOver เปลี่ยนไปหลายรอบแล้ว prop ยังไม่ทัน)
   const latest = useRef(order);
   latest.current = order;
 
+  // ย้ายข้ามกลุ่มเสร็จแล้ว (render ลำดับใหม่ไปแล้ว) ค่อยปลดธงในเฟรมถัดไป
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      movedAcross.current = false;
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [order]);
+
+  /**
+   * เลือกเป้าหมายแบบบอร์ดงาน (สูตรเดียวกับตัวอย่าง multiple containers ของ dnd-kit):
+   * - ลากกลุ่ม → เทียบกับกลุ่มด้วยกันเท่านั้น
+   * - ลากรายการ → ใช้ "สิ่งที่อยู่ใต้เมาส์จริง" ก่อน (pointerWithin) ไม่ใช่ตัวที่ใกล้ที่สุดทั้งตาราง
+   *   (เดิมใช้ closestCenter ทั้งตาราง ทำให้แถวรับวางท้ายตารางแย่งเป้าหมาย รายการกระโดดไปไกลจากเมาส์)
+   * - ชี้หัวกลุ่มที่เปิดอยู่ → เลือกรายการในกลุ่มที่ใกล้ที่สุดแทน (วางลงในกลุ่มตรงตำแหน่ง)
+   * - หาไม่เจอชั่วขณะตอน layout ขยับ → ใช้เป้าหมายล่าสุด ไม่ให้แถวสั่นไปมา
+   */
+  const collisionDetection: CollisionDetection = useCallback((args) => {
+    if (kindOf(args.active.id) === "g") {
+      return closestCenter({
+        ...args,
+        droppableContainers: args.droppableContainers.filter((c) => kindOf(c.id) === "g"),
+      });
+    }
+    const candidates = args.droppableContainers.filter((c) => kindOf(c.id) !== "g");
+    const scoped = { ...args, droppableContainers: candidates };
+    const underPointer = pointerWithin(scoped);
+    const hits = underPointer.length > 0 ? underPointer : rectIntersection(scoped);
+    let overId = getFirstCollision(hits, "id");
+    if (overId != null) {
+      if (kindOf(overId) === "z") {
+        const ids = new Set(latest.current.items[rawOf(overId)] ?? []);
+        const inGroup = candidates.filter(
+          (c) => kindOf(c.id) === "i" && c.id !== args.active.id && ids.has(rawOf(c.id)),
+        );
+        if (inGroup.length > 0) {
+          overId = closestCenter({ ...args, droppableContainers: inGroup })[0]?.id ?? overId;
+        }
+      }
+      lastOverId.current = overId;
+      return [{ id: overId }];
+    }
+    if (movedAcross.current) lastOverId.current = args.active.id;
+    return lastOverId.current != null ? [{ id: lastOverId.current }] : [];
+  }, []);
+
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
@@ -173,7 +251,10 @@ export function SortableProvider({
 
   function onDragStart({ active }: DragStartEvent) {
     beforeDrag.current = latest.current;
-    setDragging(kindOf(active.id) === "g" ? "group" : "item");
+    lastOverId.current = null;
+    const kind: SortableKind = kindOf(active.id) === "g" ? "group" : "item";
+    setDragging(kind);
+    setActiveDrag({ kind, id: rawOf(active.id) });
   }
 
   function onDragOver({ active, over }: DragOverEvent) {
@@ -182,13 +263,23 @@ export function SortableProvider({
     const from = containerOf(active.id, current);
     const to = containerOf(over.id, current);
     if (!from || !to || from === to) return;
-    const next = moveItemToGroup(
-      current,
-      rawOf(active.id),
-      to,
-      kindOf(over.id) === "i" ? rawOf(over.id) : null,
-    );
+    // วางก่อนหรือหลังแถวเป้าหมาย ตามว่าตัวที่ลากเลยครึ่งแถวนั้นลงมาหรือยัง
+    // (เดิมแทรก "ก่อน" เสมอ — ลากเข้าจากด้านล่างแล้วรายการกระโดดข้ามขึ้นไป)
+    let before: string | null = null;
+    if (kindOf(over.id) === "i") {
+      const list = current.items[to] ?? [];
+      const at = list.indexOf(rawOf(over.id));
+      const dragged = active.rect.current.translated;
+      const below = dragged != null && dragged.top > over.rect.top + over.rect.height / 2;
+      before = list[at + (below ? 1 : 0)] ?? null;
+    } else if (to !== UNGROUPED) {
+      // วางบนหัวโฟลเดอร์ = ขึ้นบนสุดของโฟลเดอร์ (ตรงกับตำแหน่งที่เห็น และไม่กระโดดตอนโฟลเดอร์ที่ย่อไว้เปิดออก)
+      // ส่วนโซน "ไม่มีกลุ่ม" อยู่ท้ายตาราง จึงต่อท้าย
+      before = current.items[to]?.[0] ?? null;
+    }
+    const next = moveItemToGroup(current, rawOf(active.id), to, before);
     if (next !== current) {
+      movedAcross.current = true;
       latest.current = next;
       onOrderChange(next);
     }
@@ -219,6 +310,7 @@ export function SortableProvider({
     const snapshot = beforeDrag.current;
     beforeDrag.current = null;
     setDragging(null);
+    setActiveDrag(null);
     const current = latest.current;
     let next = current;
     if (over && kindOf(active.id) === "g" && kindOf(over.id) === "g") {
@@ -237,6 +329,7 @@ export function SortableProvider({
     const snapshot = beforeDrag.current;
     beforeDrag.current = null;
     setDragging(null);
+    setActiveDrag(null);
     if (snapshot) {
       latest.current = snapshot;
       onOrderChange(snapshot);
@@ -271,6 +364,31 @@ export function SortableProvider({
     };
   }, []);
 
+  /**
+   * ตำแหน่งที่ "จะไปวาง" ระหว่างลาก — ในกลุ่มเดียวกันลำดับจริงยังไม่เปลี่ยนจนกว่าจะปล่อย
+   * (เดิมประกาศตำแหน่งเดิมซ้ำ เช่น "ตำแหน่งที่ 1" ทั้งที่เลื่อนลงมาแล้ว) จึงใช้ตำแหน่งของเป้าหมายแทน
+   * ข้ามกลุ่มไม่ต้องทำอะไร — onDragOver ย้ายเข้ากลุ่มใหม่ใน order ไปแล้ว
+   */
+  const describeTarget = useCallback(
+    (activeId: UniqueIdentifier, overId: UniqueIdentifier | null): SortableAnnouncementContext => {
+      const base = describe(activeId);
+      if (overId === null || overId === activeId) return base;
+      const current = latest.current;
+      if (base.kind === "group" && kindOf(overId) === "g") {
+        const at = current.groups.indexOf(rawOf(overId));
+        return at >= 0 ? { ...base, index: at + 1 } : base;
+      }
+      if (base.kind === "item" && kindOf(overId) === "i") {
+        const group = groupOfItem(current, rawOf(overId));
+        if (!group || group !== base.groupId) return base;
+        const at = (current.items[group] ?? []).indexOf(rawOf(overId));
+        return at >= 0 ? { ...base, index: at + 1 } : base;
+      }
+      return base;
+    },
+    [describe],
+  );
+
   const dndAnnouncements = useMemo(() => {
     const fill = (
       template: string | undefined,
@@ -285,9 +403,19 @@ export function SortableProvider({
         own: ((context: SortableAnnouncementContext) => string | undefined) | undefined,
         template: string | undefined,
         fallback: string,
+        // ระหว่างลาก = ตำแหน่งของเป้าหมาย; ตอนปล่อย order อัปเดตแล้ว จึงใช้ตำแหน่งจริงของตัวที่ลาก
+        useTarget = false,
       ) =>
-      ({ active }: { active: { id: UniqueIdentifier } }) => {
-        const context = describe(active.id);
+      ({
+        active,
+        over,
+      }: {
+        active: { id: UniqueIdentifier };
+        over?: { id: UniqueIdentifier } | null;
+      }) => {
+        const context = useTarget
+          ? describeTarget(active.id, over?.id ?? null)
+          : describe(active.id);
         return own?.(context) ?? fill(template, fallback, context);
       };
     return {
@@ -300,6 +428,7 @@ export function SortableProvider({
         announcements?.onDragOver,
         text.sortable?.moved,
         "ย้ายไปตำแหน่งที่ {index} จาก {total}",
+        true,
       ),
       onDragEnd: announce(
         announcements?.onDragEnd,
@@ -308,7 +437,7 @@ export function SortableProvider({
       ),
       onDragCancel: announce(announcements?.onDragCancel, text.sortable?.cancelled, "ยกเลิกการลาก"),
     };
-  }, [announcements, describe, text.sortable]);
+  }, [announcements, describeTarget, text.sortable]);
 
   const groupIds = useMemo(() => order.groups.map((id) => dndId("group", id)), [order.groups]);
 
@@ -317,15 +446,19 @@ export function SortableProvider({
       dragging,
       disabled,
       handleLabel: handleLabel ?? text.sortable?.handle ?? "ลากเพื่อจัดลำดับ",
+      overlay: Boolean(renderOverlay),
     }),
-    [dragging, disabled, handleLabel, text.sortable?.handle],
+    [dragging, disabled, handleLabel, text.sortable?.handle, renderOverlay],
   );
 
   return (
     <SortableStateContext.Provider value={state}>
       <DndContext
+        id={id ?? fallbackId}
         sensors={sensors}
-        collisionDetection={collision}
+        collisionDetection={collisionDetection}
+        // วัดตำแหน่งที่วางใหม่ตลอดระหว่างลาก — ย้ายข้ามกลุ่มแล้ว layout เปลี่ยน ต้องใช้ตำแหน่งปัจจุบัน
+        measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}
         accessibility={{
           screenReaderInstructions: { draggable: instructions },
           announcements: dndAnnouncements,
@@ -340,6 +473,16 @@ export function SortableProvider({
         <SortableContext items={groupIds} strategy={verticalListSortingStrategy}>
           {children}
         </SortableContext>
+        {renderOverlay &&
+          mounted &&
+          createPortal(
+            <DragOverlay dropAnimation={DROP_ANIMATION}>
+              {activeDrag ? (
+                <div className="cursor-grabbing">{renderOverlay(activeDrag)}</div>
+              ) : null}
+            </DragOverlay>,
+            document.body,
+          )}
       </DndContext>
     </SortableStateContext.Provider>
   );
@@ -388,13 +531,20 @@ export function useSortableRow({
   const sortable = useSortable({
     id: dndId(type, id),
     disabled: disabled || state.disabled,
+    transition: SORT_TRANSITION,
   });
+  const dragStyle: CSSProperties = !sortable.isDragging
+    ? {}
+    : state.overlay
+      ? // มี overlay ลอยตามเมาส์แล้ว แถวต้นทางเหลือเป็นช่องจาง ๆ บอกตำแหน่งที่จะวาง
+        { opacity: 0.4 }
+      : { position: "relative", zIndex: 1, opacity: 0.85 };
   return {
     ref: sortable.setNodeRef,
     style: {
       transform: CSS.Translate.toString(sortable.transform),
       transition: sortable.transition,
-      ...(sortable.isDragging ? { position: "relative", zIndex: 1, opacity: 0.85 } : {}),
+      ...dragStyle,
     },
     handleProps: { ...sortable.attributes, ...sortable.listeners },
     isDragging: sortable.isDragging,
@@ -405,7 +555,18 @@ export function useSortableRow({
  * ทำให้หัวกลุ่ม (หรือพื้นที่ว่างของกลุ่ม) รับการวางรายการได้ — กลุ่มที่ย่ออยู่ก็ยังรับได้
  * ปิดเองเมื่อกำลังลากกลุ่ม (ไม่ใช่รายการ)
  */
-export function useSortableDropZone(groupId: string | null): {
+export function useSortableDropZone(
+  groupId: string | null,
+  options?: {
+    /**
+     * ลากรายการค้างไว้เหนือที่วางนี้นานพอ — ใช้เปิดกลุ่มที่ย่ออยู่ให้เองแบบโฟลเดอร์ใน Finder/Todoist
+     * (ไม่ส่ง = ไม่ทำอะไร)
+     */
+    onDwell?: () => void;
+    /** นานเท่าไรถึงนับว่าค้าง (ms) — ค่าเริ่มต้น 600 */
+    dwellMs?: number;
+  },
+): {
   ref: (node: HTMLElement | null) => void;
   isOver: boolean;
 } {
@@ -415,6 +576,17 @@ export function useSortableDropZone(groupId: string | null): {
     id: dndId("zone", groupId ?? UNGROUPED),
     disabled: state.disabled || state.dragging !== "item",
   });
+  const onDwell = options?.onDwell;
+  const dwellMs = options?.dwellMs ?? 600;
+  const hovering = droppable.isOver && state.dragging === "item";
+  // เก็บ callback ล่าสุดไว้ใน ref — แอปส่งฟังก์ชันใหม่ทุก render ก็ไม่ทำให้นับเวลาใหม่
+  const dwellRef = useRef(onDwell);
+  dwellRef.current = onDwell;
+  useEffect(() => {
+    if (!hovering || !dwellRef.current) return;
+    const timer = setTimeout(() => dwellRef.current?.(), dwellMs);
+    return () => clearTimeout(timer);
+  }, [hovering, dwellMs]);
   return { ref: droppable.setNodeRef, isOver: droppable.isOver };
 }
 

package/src/index.ts

@@ -115,6 +115,11 @@ export {
 export { FormFieldRadioCards } from "./components/shared/form/form-field-radio-cards";
 export { FormFieldRadioGroup } from "./components/shared/form/form-field-radio-group";
 export { FormFieldSelect, type SelectOption } from "./components/shared/form/form-field-select";
+export {
+  FormInvalidNet,
+  type FormInvalidNotice,
+  useFormInvalidNotice,
+} from "./components/shared/form/form-invalid-notice";
 export { CheckboxField, LabeledField } from "./components/shared/form/labeled-field";
 export { NumberInput } from "./components/shared/form/number-input";
 export { SearchInput, type SearchInputProps } from "./components/shared/form/search-input";