@suphark/ui 0.37.0 → 0.39.0

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

@@ -5,11 +5,12 @@ import {
   closestCenter,
   DndContext,
   type DragEndEvent,
+  type DragMoveEvent,
   type DragOverEvent,
   DragOverlay,
   type DragStartEvent,
   type DropAnimation,
-  defaultDropAnimationSideEffects,
+  getClientRect,
   getFirstCollision,
   KeyboardSensor,
   MeasuringStrategy,
@@ -33,10 +34,14 @@ 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 {
+  flatItems,
+  gatherItems,
   groupOfItem,
   moveItemToGroup,
-  reorderGroups,
+  moveItemToRoot,
+  moveRootEntry,
   reorderItems,
+  rootEntries,
   type SortableOrder,
   sameOrder,
   UNGROUPED,
@@ -46,6 +51,8 @@ import { GripVerticalIcon } from "lucide-react";
 import {
   type CSSProperties,
   createContext,
+  type KeyboardEvent,
+  type MouseEvent,
   type ReactNode,
   useCallback,
   useContext,
@@ -54,6 +61,7 @@ import {
   useMemo,
   useRef,
   useState,
+  useSyncExternalStore,
 } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
@@ -72,9 +80,53 @@ const SORT_TRANSITION = { duration: 200, easing: EASING };
 const DROP_ANIMATION: DropAnimation = {
   duration: 200,
   easing: EASING,
-  sideEffects: defaultDropAnimationSideEffects({ styles: { active: { opacity: "0.4" } } }),
+  // ช่องจาง ๆ ของแถวต้นทางเราใส่ผ่าน style ของ React เองแล้ว — side effect ของ dnd-kit จะจำค่า 0.4 นั้น
+  // ไว้เป็น "ค่าเดิม" แล้วเขียนคืนหลังปล่อย ทำให้แถวจางค้าง (เจอกับหัวกลุ่ม)
+  sideEffects: null,
 };
 
+/** สิ่งที่กำลังลาก — `ids` = ทุกรายการที่ลากไปด้วยกัน (ลากแบบ bulk; ลากตัวเดียว = `[id]`) */
+export interface SortableDrag {
+  kind: SortableKind;
+  id: string;
+  ids: string[];
+}
+
+type SelectMode = "toggle" | "range" | "all" | "clear";
+
+/** ระยะเลื่อนของหัวกลุ่มแต่ละกลุ่มระหว่างลากกลุ่ม — แถวรายการในกลุ่มอ่านไปเลื่อนตาม (ทั้งก้อนขยับพร้อมกัน) */
+interface GroupShift {
+  transform: string | undefined;
+  transition: string | undefined;
+}
+
+function createShiftStore() {
+  const shifts = new Map<string, GroupShift>();
+  const listeners = new Set<() => void>();
+  return {
+    get: (id: string) => shifts.get(id),
+    set(id: string, shift: GroupShift | undefined) {
+      const prev = shifts.get(id);
+      if (prev?.transform === shift?.transform && prev?.transition === shift?.transition) return;
+      if (shift) shifts.set(id, shift);
+      else shifts.delete(id);
+      for (const listener of listeners) listener();
+    },
+    clear() {
+      if (shifts.size === 0) return;
+      shifts.clear();
+      for (const listener of listeners) listener();
+    },
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+type ShiftStore = ReturnType<typeof createShiftStore>;
+
 interface SortableState {
   /** กำลังลากชนิดไหนอยู่ (null = ไม่ได้ลาก) — ใช้ปิดที่วางของอีกชนิด */
   dragging: SortableKind | null;
@@ -82,22 +134,57 @@ interface SortableState {
   handleLabel: string;
   /** มี `renderOverlay` = แถวต้นทางเป็นที่ว่างจาง ๆ ส่วนของที่ลอยตามเมาส์คือ overlay */
   overlay: boolean;
+  /** กลุ่มที่กำลังถูกลาก (แถวรายการของกลุ่มนี้จางตามหัวกลุ่ม) */
+  activeGroup: string | null;
+  /** กำลังลากของในชั้นบนสุด (กลุ่ม หรือรายการไม่มีกลุ่มเมื่อ `freeLayout`) — ระยะเลื่อนมาจาก provider */
+  rootDrag: boolean;
+  freeLayout: boolean;
+  /** รายการอื่นที่ลากไปพร้อมกันแบบ bulk (ไม่รวมตัวที่จับ) — แสดงจาง ๆ ระหว่างลาก */
+  carried: ReadonlySet<string>;
+  multiSelect: boolean;
+  selected: ReadonlySet<string>;
+  select: (id: string, mode: SelectMode) => void;
+  groupOf: (itemId: string) => string | undefined;
+  register: (kind: SortableKind, id: string, node: HTMLElement | null) => void;
+  shifts: ShiftStore;
 }
 
+const EMPTY = new Set<string>();
 const SortableStateContext = createContext<SortableState>({
   dragging: null,
   disabled: true,
   handleLabel: "ลากเพื่อจัดลำดับ",
   overlay: false,
+  activeGroup: null,
+  rootDrag: false,
+  freeLayout: false,
+  carried: EMPTY,
+  multiSelect: false,
+  selected: EMPTY,
+  select: () => {},
+  groupOf: () => undefined,
+  register: () => {},
+  shifts: createShiftStore(),
 });
 
 /**
  * สถานะการลากตอนนี้ — ใช้ตัดสินใจเรนเดอร์ที่วางเอง เช่นแถว "ลากมาที่นี่เพื่อเอาออกจากกลุ่ม"
  * ที่ควรโผล่เฉพาะตอน `dragging === "item"` (กลุ่มที่ไม่มีหัวกลุ่มต้องมีที่วางของตัวเอง)
+ * `selected`/`clearSelection` ใช้ทำแถบ "เลือก N รายการ" เมื่อเปิด `multiSelect`
  */
-export function useSortableState(): { dragging: SortableKind | null; disabled: boolean } {
+export function useSortableState(): {
+  dragging: SortableKind | null;
+  disabled: boolean;
+  selected: string[];
+  clearSelection: () => void;
+} {
   const state = useContext(SortableStateContext);
-  return { dragging: state.dragging, disabled: state.disabled };
+  return {
+    dragging: state.dragging,
+    disabled: state.disabled,
+    selected: [...state.selected],
+    clearSelection: () => state.select("", "clear"),
+  };
 }
 
 /** ข้อมูลของสิ่งที่กำลังลาก ส่งให้แอปประกอบข้อความเอง (แอปรู้ชื่อคีย์/ชื่อกลุ่ม แพ็กเกจไม่รู้) */
@@ -109,6 +196,8 @@ export interface SortableAnnouncementContext {
   /** ตำแหน่งในกลุ่ม/ในลำดับกลุ่ม เริ่มที่ 1 */
   index: number;
   total: number;
+  /** จำนวนรายการที่ลากไปด้วยกัน (ลากแบบ bulk > 1) */
+  count: number;
 }
 
 export interface SortableAnnouncements {
@@ -155,7 +244,24 @@ export interface SortableProviderProps {
    * ส่งมา = แถวต้นทางกลายเป็นช่องว่างจาง ๆ บอกตำแหน่งที่จะวาง และมีแอนิเมชันตอนปล่อย
    * วาดใน portal ที่ `body` จึงคืน `<div>` ได้แม้รายการจริงเป็นแถว `<tr>` ของตาราง
    */
-  renderOverlay?: (drag: { kind: SortableKind; id: string }) => ReactNode;
+  renderOverlay?: (drag: SortableDrag) => ReactNode;
+  /**
+   * เลือกหลายรายการแล้วลากไปพร้อมกัน: ⌘/Ctrl+คลิก = เลือกทีละตัว, Shift+คลิก = เลือกเป็นช่วง,
+   * คลิกเฉย ๆ = ล้าง · ที่จับ (คีย์บอร์ด): `x` = เลือก/ไม่เลือก, ⌘/Ctrl+A = ทั้งหมด, Esc = ล้าง
+   * แถวต้องกระจาย `selectProps` จาก `useSortableRow` (มี `data-selected` ไว้ทำสีแถวที่เลือก)
+   * ลากตัวที่เลือกอยู่ = ลากทุกตัวที่เลือกไปรวมที่จุดวาง เรียงตามลำดับเดิม
+   */
+  multiSelect?: boolean;
+  /**
+   * ชั้นบนสุดจัดได้อิสระ: กลุ่มกับรายการที่ไม่มีกลุ่มสลับที่กันได้ทุกแบบ (กลุ่มขึ้นไปเหนือรายการ /
+   * รายการไปอยู่ระหว่างกลุ่ม / เอารายการออกจากกลุ่มไปวางก่อนกลุ่มไหนก็ได้) — แอปต้องเรนเดอร์ตาม
+   * `rootEntries(order)` และบันทึก `sortableOrderToPayload(order).root` · ชี้ครึ่งบนของหัวกลุ่ม = วางก่อนกลุ่ม,
+   * ครึ่งล่าง = เข้ากลุ่มเป็นตัวแรก · ไม่เปิด = รายการไม่มีกลุ่มอยู่บนสุดเสมอ (แบบเดิม)
+   */
+  freeLayout?: boolean;
+  /** รายการที่เลือก (ควบคุมจากภายนอก) — ไม่ส่ง = provider เก็บเอง */
+  selected?: string[];
+  onSelectedChange?: (ids: string[]) => void;
   children: ReactNode;
 }
 
@@ -179,13 +285,26 @@ export function SortableProvider({
   announcements,
   id,
   renderOverlay,
+  multiSelect = false,
+  freeLayout = false,
+  selected: selectedProp,
+  onSelectedChange,
   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);
+  const [activeDrag, setActiveDrag] = useState<SortableDrag | null>(null);
+  const draggingRef = useRef<SortableKind | null>(null);
+  // รายการที่ลากไปด้วยกันแบบ bulk (รวมตัวที่จับ เรียงตามลำดับที่แสดง) — null = ลากตัวเดียว
+  const bulk = useRef<string[] | null>(null);
+  const nodes = useRef({
+    groups: new Map<string, HTMLElement>(),
+    items: new Map<string, HTMLElement>(),
+    groupOfNode: new WeakMap<HTMLElement, string>(),
+  });
+  const shifts = useMemo(createShiftStore, []);
   // กันกระพริบตอนย้ายข้ามกลุ่ม: จำเป้าหมายล่าสุดไว้ใช้ตอนที่ layout กำลังขยับแล้วหาเป้าหมายไม่เจอ
   const lastOverId = useRef<UniqueIdentifier | null>(null);
   const movedAcross = useRef(false);
@@ -194,6 +313,229 @@ export function SortableProvider({
   const latest = useRef(order);
   latest.current = order;
 
+  // ---------- เลือกหลายรายการ ----------
+  const [ownSelected, setOwnSelected] = useState<string[]>([]);
+  const selectedList = selectedProp ?? ownSelected;
+  const selected = useMemo<ReadonlySet<string>>(() => {
+    if (!multiSelect || selectedList.length === 0) return EMPTY;
+    const present = new Set(flatItems(order));
+    return new Set(selectedList.filter((x) => present.has(x)));
+  }, [multiSelect, selectedList, order]);
+  const selectedRef = useRef(selected);
+  selectedRef.current = selected;
+  const anchor = useRef<string | null>(null);
+  const onSelectedChangeRef = useRef(onSelectedChange);
+  onSelectedChangeRef.current = onSelectedChange;
+  const controlled = selectedProp !== undefined;
+
+  const setSelected = useCallback(
+    (ids: string[]) => {
+      if (!controlled) setOwnSelected(ids);
+      onSelectedChangeRef.current?.(ids);
+    },
+    [controlled],
+  );
+
+  const select = useCallback(
+    (itemId: string, mode: SelectMode) => {
+      const all = flatItems(latest.current);
+      // เลือกเป็นช่วง/ทั้งหมด = เฉพาะแถวที่แสดงอยู่ (ไม่หยิบของในกลุ่มที่ย่อไว้โดยไม่รู้ตัว)
+      const visible = all.filter((x) => nodes.current.items.get(x)?.isConnected);
+      const current = selectedRef.current;
+      let next: Set<string>;
+      if (mode === "clear") next = new Set();
+      else if (mode === "all") next = new Set(visible);
+      else if (mode === "toggle") {
+        next = new Set(current);
+        if (next.has(itemId)) next.delete(itemId);
+        else next.add(itemId);
+        anchor.current = itemId;
+      } else {
+        const from = visible.indexOf(anchor.current ?? itemId);
+        const to = visible.indexOf(itemId);
+        next = new Set(current);
+        if (from >= 0 && to >= 0) {
+          for (const x of visible.slice(Math.min(from, to), Math.max(from, to) + 1)) next.add(x);
+        } else next.add(itemId);
+        if (anchor.current === null) anchor.current = itemId;
+      }
+      if (mode === "clear" || mode === "all") anchor.current = null;
+      if (next.size === current.size && [...next].every((x) => current.has(x))) return;
+      setSelected(all.filter((x) => next.has(x)));
+    },
+    [setSelected],
+  );
+
+  // Esc ที่ไหนก็ได้ = ล้างการเลือก (ระหว่างลาก Esc เป็นของการยกเลิกลาก)
+  const hasSelection = selected.size > 0;
+  useEffect(() => {
+    if (!hasSelection) return;
+    function onKey(event: globalThis.KeyboardEvent) {
+      if (event.key === "Escape" && draggingRef.current === null) select("", "clear");
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [hasSelection, select]);
+
+  const register = useCallback((kind: SortableKind, rowId: string, node: HTMLElement | null) => {
+    const map = kind === "group" ? nodes.current.groups : nodes.current.items;
+    if (node) {
+      map.set(rowId, node);
+      if (kind === "group") nodes.current.groupOfNode.set(node, rowId);
+    } else map.delete(rowId);
+  }, []);
+
+  /** กรอบของทั้งก้อน: หัวกลุ่ม + แถวรายการที่แสดงอยู่ (ไม่สนใจ transform ระหว่างลาก) */
+  const blockRect = useCallback((groupId: string, header: HTMLElement) => {
+    let { top, bottom, left, right } = getClientRect(header, { ignoreTransform: true });
+    for (const itemId of latest.current.items[groupId] ?? []) {
+      const node = nodes.current.items.get(itemId);
+      if (!node?.isConnected) continue;
+      const r = getClientRect(node, { ignoreTransform: true });
+      top = Math.min(top, r.top);
+      bottom = Math.max(bottom, r.bottom);
+      left = Math.min(left, r.left);
+      right = Math.max(right, r.right);
+    }
+    return { top, bottom, left, right, width: right - left, height: bottom - top };
+  }, []);
+
+  /**
+   * ขนาดของที่วางตอนลากกลุ่ม = หัวกลุ่ม "รวมแถวรายการของกลุ่มนั้น" ทั้งก้อน
+   * (เดิมวัดแค่หัวกลุ่ม กลุ่มอื่นจึงเลื่อนหลบแค่ความสูงหัวกลุ่มเดียว แถวรายการไม่ขยับ)
+   */
+  const measureDroppable = useCallback(
+    (element: HTMLElement) => {
+      const groupId =
+        draggingRef.current === "group" ? nodes.current.groupOfNode.get(element) : undefined;
+      return groupId
+        ? blockRect(groupId, element)
+        : getClientRect(element, { ignoreTransform: true });
+    },
+    [blockRect],
+  );
+
+  // ---------- เลื่อนทั้งก้อนในชั้นบนสุด (แบบรายการ: ตัวอื่นหลบ ช่องว่างของตัวที่ลากเลื่อนไปจุดวาง) ----------
+  const freeRef = useRef(freeLayout);
+  freeRef.current = freeLayout;
+  const overlayOn = Boolean(renderOverlay);
+
+  /**
+   * ลำดับที่ตัวที่ลากเรียงอยู่ด้วย (เป็น dnd id) — `freeLayout` = ชั้นบนสุดทั้งหมด,
+   * ไม่เปิด = เฉพาะกลุ่ม (รายการไม่มีกลุ่มเรียงกันเองด้วย dnd-kit) · null = ไม่ใช่การลากในชั้นบนสุด
+   */
+  const entryKeys = useCallback((current: SortableOrder, activeKey: string): string[] | null => {
+    if (freeRef.current) {
+      const keys = rootEntries(current).map((e) => dndId(e.kind, e.id));
+      return keys.includes(activeKey) ? keys : null;
+    }
+    return kindOf(activeKey) === "g" ? current.groups.map((g) => dndId("group", g)) : null;
+  }, []);
+
+  /** กรอบของสิ่งหนึ่งในชั้นบนสุด: กลุ่ม = ทั้งก้อน, รายการ = แถวเดียว */
+  const measureKey = useCallback(
+    (key: string) => {
+      const raw = rawOf(key);
+      if (kindOf(key) === "g") {
+        const header = nodes.current.groups.get(raw);
+        return header?.isConnected ? blockRect(raw, header) : null;
+      }
+      const node = nodes.current.items.get(raw);
+      return node?.isConnected ? getClientRect(node, { ignoreTransform: true }) : null;
+    },
+    [blockRect],
+  );
+
+  /** จะวาง "ก่อน" อะไร (dnd id; null = ท้ายสุดของลำดับ) — null ทั้ง object = ไม่ใช่เป้าหมายในชั้นบนสุด */
+  const [target, setTargetState] = useState<{ before: string | null } | null>(null);
+  const targetRef = useRef(target);
+  const setTarget = useCallback((next: { before: string | null } | null) => {
+    const prev = targetRef.current;
+    if (prev === next || (prev && next && prev.before === next.before)) return;
+    targetRef.current = next;
+    setTargetState(next);
+  }, []);
+
+  useEffect(() => {
+    if (!activeDrag) return;
+    const activeKey = dndId(activeDrag.kind, activeDrag.id);
+    const keys = entryKeys(order, activeKey);
+    if (!keys) {
+      // รายการที่ลากเข้าไปอยู่ในกลุ่มแล้ว → dnd-kit ของกลุ่มนั้นคุมต่อ
+      shifts.clear();
+      return;
+    }
+    const rest = keys.filter((k) => k !== activeKey);
+    const at = target
+      ? target.before === null
+        ? rest.length
+        : rest.indexOf(target.before)
+      : keys.indexOf(activeKey);
+    const final = [...rest.slice(0, Math.max(0, at)), activeKey, ...rest.slice(Math.max(0, at))];
+    const rects = new Map(keys.map((k) => [k, measureKey(k)] as const));
+    const first = rects.get(keys[0] ?? "");
+    const second = rects.get(keys[1] ?? "");
+    if (!first) return;
+    // ช่องไฟระหว่างก้อน (ตาราง = 0, การ์ดมีระยะห่าง) — ใช้ระยะจริงระหว่างสองก้อนแรก
+    const gap = second ? Math.max(0, second.top - first.bottom) : 0;
+    const transition = `transform ${SORT_TRANSITION.duration}ms ${EASING}`;
+    let cursor = first.top;
+    for (const key of final) {
+      const rect = rects.get(key);
+      if (!rect) continue;
+      const dy = cursor - rect.top;
+      cursor += rect.height + gap;
+      // ไม่มี overlay = ตัวที่ลากลอยตามเมาส์เอง (กลุ่ม: onDragMove, รายการ: dnd-kit)
+      if (key === activeKey && !overlayOn) continue;
+      shifts.set(key, { transform: `translate3d(0px, ${dy}px, 0)`, transition });
+    }
+  }, [activeDrag, target, order, overlayOn, shifts, entryKeys, measureKey]);
+
+  /** ตั้งเป้าหมายในชั้นบนสุดจากสิ่งที่ชี้อยู่ + ตัวที่ลากเลยครึ่งของมันหรือยัง */
+  function updateTarget(
+    active: DragMoveEvent["active"],
+    over: DragMoveEvent["over"],
+    keyboard: boolean,
+  ) {
+    const activeKey = String(active.id);
+    const keys = entryKeys(latest.current, activeKey);
+    if (!keys) {
+      setTarget(null);
+      return;
+    }
+    if (!over) return;
+    const overKey = String(over.id);
+    const nextAfter = (index: number) => keys.slice(index + 1).find((k) => k !== activeKey) ?? null;
+    if (kindOf(overKey) === "z" && rawOf(overKey) === UNGROUPED) {
+      setTarget({ before: null });
+    } else if (overKey === activeKey) {
+      setTarget({ before: nextAfter(keys.indexOf(activeKey)) });
+    } else if (keys.includes(overKey)) {
+      if (kindOf(activeKey) === "i" && kindOf(overKey) === "g") {
+        // รายการชี้ครึ่งบนของหัวกลุ่ม = วางก่อนกลุ่มนั้น
+        setTarget({ before: overKey });
+        return;
+      }
+      const a = keys.indexOf(activeKey);
+      const o = keys.indexOf(overKey);
+      const rect = measureKey(overKey);
+      const dragged = active.rect.current.translated;
+      // คีย์บอร์ดขยับทีละตำแหน่งไปทับกลางเป้าหมายพอดี → ใช้ทิศทางแทน
+      const after =
+        keyboard || !rect || !dragged
+          ? o > a
+          : dragged.top + dragged.height / 2 > (rect.top + rect.bottom) / 2;
+      setTarget({ before: after ? nextAfter(o) : overKey });
+    } else {
+      setTarget(null);
+    }
+  }
+
+  const measuring = useMemo(
+    () => ({ droppable: { strategy: MeasuringStrategy.Always, measure: measureDroppable } }),
+    [measureDroppable],
+  );
+
   // ย้ายข้ามกลุ่มเสร็จแล้ว (render ลำดับใหม่ไปแล้ว) ค่อยปลดธงในเฟรมถัดไป
   useEffect(() => {
     const frame = requestAnimationFrame(() => {
@@ -212,10 +554,16 @@ export function SortableProvider({
    */
   const collisionDetection: CollisionDetection = useCallback((args) => {
     if (kindOf(args.active.id) === "g") {
-      return closestCenter({
-        ...args,
-        droppableContainers: args.droppableContainers.filter((c) => kindOf(c.id) === "g"),
-      });
+      // freeLayout: กลุ่มเรียงปนกับรายการไม่มีกลุ่ม → เทียบกับทั้งสองอย่าง (สิ่งที่อยู่ใต้เมาส์ก่อน)
+      const loose = new Set(latest.current.items[UNGROUPED] ?? []);
+      const rootLevel = args.droppableContainers.filter(
+        (c) =>
+          kindOf(c.id) === "g" ||
+          (freeRef.current && kindOf(c.id) === "i" && loose.has(rawOf(c.id))),
+      );
+      const scoped = { ...args, droppableContainers: rootLevel };
+      const under = freeRef.current ? pointerWithin(scoped) : [];
+      return under.length > 0 ? under.slice(0, 1) : closestCenter(scoped);
     }
     const candidates = args.droppableContainers.filter((c) => kindOf(c.id) !== "g");
     const scoped = { ...args, droppableContainers: candidates };
@@ -223,14 +571,27 @@ export function SortableProvider({
     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)),
+      const header = kindOf(overId) === "z" ? args.droppableRects.get(overId) : undefined;
+      const pointer = args.pointerCoordinates;
+      if (
+        freeRef.current &&
+        header &&
+        pointer &&
+        rawOf(overId) !== UNGROUPED &&
+        pointer.y < header.top + header.height / 2
+      ) {
+        // freeLayout: ครึ่งบนของหัวกลุ่ม = วาง "ก่อนกลุ่ม" ในชั้นบนสุด (ครึ่งล่าง = เข้ากลุ่มเป็นตัวแรก)
+        overId = dndId("group", rawOf(overId));
+      } else if (kindOf(overId) === "z" && rawOf(overId) !== UNGROUPED) {
+        // (โซนของ UNGROUPED = ที่วาง "ท้ายสุด" ไม่ใช่หัวกลุ่ม — ห้ามเปลี่ยนเป็นรายการแรก)
+        // ชี้หัวกลุ่ม = "บนสุดของกลุ่ม" → เป้าหมายคือรายการแรกที่แสดงอยู่ "รวมตัวที่ลากเอง"
+        // (เดิมเลือกตัวที่ใกล้ที่สุดที่ไม่ใช่ตัวที่ลาก: ลากเข้ากลุ่มแล้วขึ้นเป็นตัวแรกถูก แต่พอปล่อย
+        // onDragEnd ย้ายไปแทนที่ตัวแรกเดิม → กลายเป็นตัวที่สอง วางเป็นรายการแรกไม่ได้)
+        const rendered = new Set(
+          candidates.filter((c) => kindOf(c.id) === "i").map((c) => rawOf(c.id)),
         );
-        if (inGroup.length > 0) {
-          overId = closestCenter({ ...args, droppableContainers: inGroup })[0]?.id ?? overId;
-        }
+        const first = (latest.current.items[rawOf(overId)] ?? []).find((x) => rendered.has(x));
+        if (first !== undefined) overId = dndId("item", first);
       }
       lastOverId.current = overId;
       return [{ id: overId }];
@@ -253,16 +614,82 @@ export function SortableProvider({
     beforeDrag.current = latest.current;
     lastOverId.current = null;
     const kind: SortableKind = kindOf(active.id) === "g" ? "group" : "item";
+    const raw = rawOf(active.id);
+    const chosen = selectedRef.current;
+    bulk.current = null;
+    if (kind === "item" && chosen.has(raw) && chosen.size > 1) {
+      bulk.current = flatItems(latest.current).filter((x) => chosen.has(x));
+    } else if (kind === "item" && chosen.size > 0 && !chosen.has(raw)) {
+      // ลากตัวที่ไม่ได้เลือก = ลากตัวนั้นตัวเดียว และล้างการเลือกเดิม (แบบ Finder)
+      select("", "clear");
+    }
+    draggingRef.current = kind;
+    setTarget(null);
     setDragging(kind);
-    setActiveDrag({ kind, id: rawOf(active.id) });
+    setActiveDrag({ kind, id: raw, ids: bulk.current ?? [raw] });
+  }
+
+  function onDragMove({ active, over, delta, activatorEvent }: DragMoveEvent) {
+    updateTarget(active, over, activatorEvent instanceof KeyboardEvent);
+    // ไม่มี overlay: ก้อนของกลุ่มที่ลากลอยตามเมาส์ทั้งก้อน (หัวกลุ่ม + แถวรายการ)
+    if (overlayOn || kindOf(active.id) !== "g") return;
+    shifts.set(String(active.id), {
+      transform: `translate3d(${delta.x}px, ${delta.y}px, 0)`,
+      transition: undefined,
+    });
+  }
+
+  function endDrag() {
+    draggingRef.current = null;
+    bulk.current = null;
+    setTarget(null);
+    // ล้างระยะเลื่อนพร้อมกับที่ลำดับใหม่ render (รอ effect = มีเฟรมที่แถวใหม่ยังติด transform เก่า → กระพริบ)
+    shifts.clear();
+    setDragging(null);
+    setActiveDrag(null);
   }
 
-  function onDragOver({ active, over }: DragOverEvent) {
-    if (!over || kindOf(active.id) !== "i") return;
+  function onDragOver({ active, over, activatorEvent }: DragOverEvent) {
+    const keyboard = activatorEvent instanceof KeyboardEvent;
+    if (!over || kindOf(active.id) !== "i") {
+      updateTarget(active, over, keyboard);
+      return;
+    }
     const current = latest.current;
+    const raw = rawOf(active.id);
+    const apply = (next: SortableOrder) => {
+      if (next === current) return;
+      movedAcross.current = true;
+      latest.current = next;
+      onOrderChange(next);
+    };
+    // ครึ่งบนของหัวกลุ่ม (freeLayout) = ออกมาวางก่อนกลุ่มนั้นในชั้นบนสุด
+    if (kindOf(over.id) === "g") {
+      if (groupOfItem(current, raw) !== UNGROUPED) {
+        apply(moveItemToRoot(current, raw, { kind: "group", id: rawOf(over.id) }));
+      }
+      updateTarget(active, over, keyboard);
+      return;
+    }
     const from = containerOf(active.id, current);
     const to = containerOf(over.id, current);
-    if (!from || !to || from === to) return;
+    if (!from || !to || from === to) {
+      updateTarget(active, over, keyboard);
+      return;
+    }
+    if (to === UNGROUPED) {
+      // ออกจากกลุ่มมาชั้นบนสุด: ก่อน/หลังรายการที่ชี้ตามครึ่งแถว (ถัดไปอาจเป็นกลุ่ม) หรือท้ายสุด
+      const root = rootEntries(current);
+      let before: (typeof root)[number] | null = null;
+      if (kindOf(over.id) === "i") {
+        const at = root.findIndex((e) => e.kind === "item" && e.id === rawOf(over.id));
+        const dragged = active.rect.current.translated;
+        const below = dragged != null && dragged.top > over.rect.top + over.rect.height / 2;
+        before = root[at + (below ? 1 : 0)] ?? null;
+      }
+      apply(moveItemToRoot(current, raw, before));
+      return;
+    }
     // วางก่อนหรือหลังแถวเป้าหมาย ตามว่าตัวที่ลากเลยครึ่งแถวนั้นลงมาหรือยัง
     // (เดิมแทรก "ก่อน" เสมอ — ลากเข้าจากด้านล่างแล้วรายการกระโดดข้ามขึ้นไป)
     let before: string | null = null;
@@ -272,17 +699,12 @@ export function SortableProvider({
       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) {
+    } else {
       // วางบนหัวโฟลเดอร์ = ขึ้นบนสุดของโฟลเดอร์ (ตรงกับตำแหน่งที่เห็น และไม่กระโดดตอนโฟลเดอร์ที่ย่อไว้เปิดออก)
       // ส่วนโซน "ไม่มีกลุ่ม" อยู่ท้ายตาราง จึงต่อท้าย
       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);
-    }
+    apply(moveItemToGroup(current, raw, to, before));
   }
 
   /** ล้มเหลว = คืนลำดับเดิมเสมอ แล้วส่ง error ต่อให้แอป (ไม่มี `onCommitError` = ขึ้น toast ให้) */
@@ -308,16 +730,39 @@ export function SortableProvider({
 
   function onDragEnd({ active, over }: DragEndEvent) {
     const snapshot = beforeDrag.current;
+    const carried = bulk.current;
+    // อ่านเป้าหมายก่อน endDrag (endDrag ล้างทิ้ง)
+    const finalTarget = targetRef.current;
     beforeDrag.current = null;
-    setDragging(null);
-    setActiveDrag(null);
+    endDrag();
     const current = latest.current;
     let next = current;
-    if (over && kindOf(active.id) === "g" && kindOf(over.id) === "g") {
-      next = reorderGroups(current, rawOf(active.id), rawOf(over.id));
+    const activeKey = String(active.id);
+    const keys = entryKeys(current, activeKey);
+    if (keys && finalTarget) {
+      // ชั้นบนสุด: แปลง "ก่อน X / ท้ายลำดับ" เป็นตำแหน่งใน root (ลำดับที่ไม่รวมตัวที่ลาก)
+      const rootRest = rootEntries(current)
+        .map((e) => dndId(e.kind, e.id))
+        .filter((k) => k !== activeKey);
+      const last = keys.filter((k) => k !== activeKey).at(-1);
+      const index =
+        finalTarget.before !== null
+          ? rootRest.indexOf(finalTarget.before)
+          : last
+            ? rootRest.indexOf(last) + 1
+            : rootRest.length;
+      if (index >= 0) {
+        next = moveRootEntry(
+          current,
+          { kind: kindOf(activeKey) === "g" ? "group" : "item", id: rawOf(activeKey) },
+          index,
+        );
+      }
     } else if (over && kindOf(active.id) === "i" && kindOf(over.id) === "i") {
       next = reorderItems(current, rawOf(active.id), rawOf(over.id));
     }
+    // bulk: ตัวที่เลือกไว้ตัวอื่นตามมารวมที่จุดวางของตัวที่จับ (เรียงตามลำดับเดิม)
+    if (carried) next = gatherItems(next, rawOf(active.id), carried);
     if (next !== current) {
       latest.current = next;
       onOrderChange(next);
@@ -328,8 +773,7 @@ export function SortableProvider({
   function onDragCancel() {
     const snapshot = beforeDrag.current;
     beforeDrag.current = null;
-    setDragging(null);
-    setActiveDrag(null);
+    endDrag();
     if (snapshot) {
       latest.current = snapshot;
       onOrderChange(snapshot);
@@ -351,6 +795,7 @@ export function SortableProvider({
         kind: "group",
         index: current.groups.indexOf(raw) + 1,
         total: current.groups.length,
+        count: 1,
       };
     }
     const group = groupOfItem(current, raw);
@@ -361,6 +806,7 @@ export function SortableProvider({
       groupId: group,
       index: list.indexOf(raw) + 1,
       total: list.length,
+      count: bulk.current?.length ?? 1,
     };
   }, []);
 
@@ -397,12 +843,15 @@ export function SortableProvider({
     ) =>
       (template ?? fallback)
         .replace("{index}", String(ctx.index))
-        .replace("{total}", String(ctx.total));
+        .replace("{total}", String(ctx.total))
+        .replace("{count}", String(ctx.count));
     const announce =
       (
         own: ((context: SortableAnnouncementContext) => string | undefined) | undefined,
         template: string | undefined,
         fallback: string,
+        // ประโยคแทนเมื่อลากหลายรายการพร้อมกัน
+        many: { template: string | undefined; fallback: string } | null,
         // ระหว่างลาก = ตำแหน่งของเป้าหมาย; ตอนปล่อย order อัปเดตแล้ว จึงใช้ตำแหน่งจริงของตัวที่ลาก
         useTarget = false,
       ) =>
@@ -416,39 +865,92 @@ export function SortableProvider({
         const context = useTarget
           ? describeTarget(active.id, over?.id ?? null)
           : describe(active.id);
-        return own?.(context) ?? fill(template, fallback, context);
+        if (own) {
+          const said = own(context);
+          if (said !== undefined) return said;
+        }
+        return many && context.count > 1
+          ? fill(many.template, many.fallback, context)
+          : fill(template, fallback, context);
       };
     return {
       onDragStart: announce(
         announcements?.onDragStart,
         text.sortable?.started,
         "เริ่มลากรายการที่ {index} จาก {total}",
+        { template: text.sortable?.startedMany, fallback: "เริ่มลาก {count} รายการที่เลือกไว้" },
       ),
       onDragOver: announce(
         announcements?.onDragOver,
         text.sortable?.moved,
         "ย้ายไปตำแหน่งที่ {index} จาก {total}",
+        null,
         true,
       ),
       onDragEnd: announce(
         announcements?.onDragEnd,
         text.sortable?.dropped,
         "วางที่ตำแหน่งที่ {index} จาก {total}",
+        null,
+      ),
+      onDragCancel: announce(
+        announcements?.onDragCancel,
+        text.sortable?.cancelled,
+        "ยกเลิกการลาก",
+        null,
       ),
-      onDragCancel: announce(announcements?.onDragCancel, text.sortable?.cancelled, "ยกเลิกการลาก"),
     };
   }, [announcements, describeTarget, text.sortable]);
 
   const groupIds = useMemo(() => order.groups.map((id) => dndId("group", id)), [order.groups]);
 
+  const groupOf = useCallback((itemId: string) => groupOfItem(order, itemId), [order]);
+  const rootDrag =
+    activeDrag !== null &&
+    (activeDrag.kind === "group" ||
+      (freeLayout && groupOfItem(order, activeDrag.id) === UNGROUPED));
+  const carried = useMemo<ReadonlySet<string>>(
+    () =>
+      activeDrag && activeDrag.ids.length > 1
+        ? new Set(activeDrag.ids.filter((x) => x !== activeDrag.id))
+        : EMPTY,
+    [activeDrag],
+  );
+
   const state = useMemo<SortableState>(
     () => ({
       dragging,
       disabled,
       handleLabel: handleLabel ?? text.sortable?.handle ?? "ลากเพื่อจัดลำดับ",
       overlay: Boolean(renderOverlay),
+      activeGroup: activeDrag?.kind === "group" ? activeDrag.id : null,
+      rootDrag,
+      freeLayout,
+      carried,
+      multiSelect,
+      selected,
+      select,
+      groupOf,
+      register,
+      shifts,
     }),
-    [dragging, disabled, handleLabel, text.sortable?.handle, renderOverlay],
+    [
+      dragging,
+      disabled,
+      handleLabel,
+      text.sortable?.handle,
+      renderOverlay,
+      activeDrag,
+      rootDrag,
+      freeLayout,
+      carried,
+      multiSelect,
+      selected,
+      select,
+      groupOf,
+      register,
+      shifts,
+    ],
   );
 
   return (
@@ -458,13 +960,15 @@ export function SortableProvider({
         sensors={sensors}
         collisionDetection={collisionDetection}
         // วัดตำแหน่งที่วางใหม่ตลอดระหว่างลาก — ย้ายข้ามกลุ่มแล้ว layout เปลี่ยน ต้องใช้ตำแหน่งปัจจุบัน
-        measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}
+        // (ตอนลากกลุ่ม วัดหัวกลุ่มรวมแถวรายการทั้งก้อน — ดู measureDroppable)
+        measuring={measuring}
         accessibility={{
           screenReaderInstructions: { draggable: instructions },
           announcements: dndAnnouncements,
         }}
         onDragStart={onDragStart}
         onDragOver={onDragOver}
+        onDragMove={onDragMove}
         onDragEnd={onDragEnd}
         onDragCancel={onDragCancel}
       >
@@ -511,8 +1015,18 @@ export interface SortableRow {
   /** props ที่ต้องแปะที่ "ที่จับ" — ส่งต่อให้ `<DragHandle {...handleProps} />` */
   handleProps: Record<string, unknown>;
   isDragging: boolean;
+  /** รายการนี้ถูกเลือกอยู่ (`multiSelect`) */
+  selected: boolean;
+  /**
+   * กระจายลงแถวเมื่อเปิด `multiSelect`: คลิกพร้อม ⌘/Ctrl/Shift เพื่อเลือก + `data-selected`
+   * สำหรับทำสี (`data-[selected]:bg-primary/10`) — ปิด `multiSelect` หรือเป็นแถวกลุ่ม = object ว่าง
+   */
+  selectProps: Record<string, unknown>;
 }
 
+const INTERACTIVE =
+  "a,button,input,select,textarea,label,[contenteditable=''],[contenteditable='true'],[role=button],[role=checkbox],[role=switch],[role=combobox]";
+
 /**
  * ทำให้แถวหนึ่งลากได้ — แอปเอา `ref`/`style` ไปแปะที่ `<TableRow>` และ `handleProps` ที่ `<DragHandle>`
  * `type: "group"` = ลากทั้งกลุ่ม, `"item"` = ลากรายการในกลุ่ม
@@ -533,21 +1047,117 @@ export function useSortableRow({
     disabled: disabled || state.disabled,
     transition: SORT_TRANSITION,
   });
-  const dragStyle: CSSProperties = !sortable.isDragging
-    ? {}
-    : state.overlay
+  const { register, shifts, select } = state;
+  const { setNodeRef } = sortable;
+  const ref = useCallback(
+    (node: HTMLElement | null) => {
+      setNodeRef(node);
+      register(type, id, node);
+    },
+    [setNodeRef, register, type, id],
+  );
+
+  const transform = CSS.Translate.toString(sortable.transform);
+  // ระหว่างลากกลุ่ม provider คำนวณระยะเลื่อนของแต่ละกลุ่มเอง — หัวกลุ่มและแถวรายการของกลุ่มอ่านค่าเดียวกัน
+  // (หัวกลุ่มมักอยู่ใน `SortableGroup` ซึ่งเป็น context ของรายการ dnd-kit จึงคำนวณให้หัวกลุ่มไม่ได้)
+  const groupId = type === "item" ? state.groupOf(id) : id;
+  const loose = type === "item" && groupId === UNGROUPED;
+  // ระยะเลื่อนในชั้นบนสุด: กลุ่ม/รายการไม่มีกลุ่ม อ่านของตัวเอง, รายการในกลุ่มอ่านของกลุ่ม
+  const shiftKey =
+    type === "group" || loose ? dndId(type, id) : groupId ? dndId("group", groupId) : undefined;
+  const shift = useSyncExternalStore(
+    shifts.subscribe,
+    () => (shiftKey ? shifts.get(shiftKey) : undefined),
+    () => undefined,
+  );
+
+  let style: CSSProperties = { transform, transition: sortable.transition };
+  if (loose && state.freeLayout && state.rootDrag) {
+    style =
+      sortable.isDragging && !state.overlay
+        ? { ...style, position: "relative", zIndex: 1, opacity: 0.85 }
+        : {
+            transform: shift?.transform,
+            transition: shift?.transition,
+            ...(sortable.isDragging || state.carried.has(id) ? { opacity: 0.4 } : {}),
+          };
+  } else if (type === "group" && state.rootDrag) {
+    const own = state.activeGroup === id;
+    style = {
+      transform: shift?.transform,
+      transition: shift?.transition,
+      ...(own
+        ? state.overlay
+          ? { opacity: 0.4 }
+          : { position: "relative", zIndex: 1, opacity: 0.85 }
+        : {}),
+    };
+  } else if (sortable.isDragging) {
+    style = state.overlay
       ? // มี overlay ลอยตามเมาส์แล้ว แถวต้นทางเหลือเป็นช่องจาง ๆ บอกตำแหน่งที่จะวาง
-        { opacity: 0.4 }
-      : { position: "relative", zIndex: 1, opacity: 0.85 };
+        { ...style, opacity: 0.4 }
+      : { ...style, position: "relative", zIndex: 1, opacity: 0.85 };
+  } else if (type === "item" && state.rootDrag && shift) {
+    const own = state.activeGroup !== null && state.activeGroup === groupId;
+    style = {
+      transform: shift.transform,
+      transition: shift.transition,
+      ...(own
+        ? state.overlay
+          ? { opacity: 0.4 }
+          : { position: "relative", zIndex: 1, opacity: 0.85 }
+        : {}),
+    };
+  } else if (type === "item" && state.carried.has(id)) {
+    // ลากแบบ bulk: ตัวที่ตามไปด้วยจางลงตรงที่เดิม แล้วไปรวมที่จุดวางตอนปล่อย
+    style = { ...style, opacity: 0.4 };
+  }
+
+  const selectable = type === "item" && state.multiSelect;
+  const isSelected = selectable && state.selected.has(id);
+  const listeners = sortable.listeners;
+  const handleProps: Record<string, unknown> = { ...sortable.attributes, ...listeners };
+  if (selectable) {
+    handleProps.onKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+      const mod = event.metaKey || event.ctrlKey;
+      if (!mod && !event.altKey && event.key.toLowerCase() === "x") {
+        event.preventDefault();
+        select(id, "toggle");
+        return;
+      }
+      if (mod && event.key.toLowerCase() === "a") {
+        event.preventDefault();
+        select(id, "all");
+        return;
+      }
+      listeners?.onKeyDown?.(event);
+    };
+  }
+  const selectProps: Record<string, unknown> = selectable
+    ? {
+        "data-selected": isSelected ? "" : undefined,
+        onMouseDown: (event: MouseEvent<HTMLElement>) => {
+          // Shift+คลิก ไม่ให้เบราว์เซอร์ลากคลุมข้อความทั้งแถว
+          if (event.shiftKey) event.preventDefault();
+        },
+        onClick: (event: MouseEvent<HTMLElement>) => {
+          const target = event.target as Element;
+          const control = target.closest(INTERACTIVE);
+          if (control && !control.closest("[data-sortable-handle]")) return;
+          if (event.metaKey || event.ctrlKey) select(id, "toggle");
+          else if (event.shiftKey) select(id, "range");
+          else if (state.selected.size > 0) select(id, "clear");
+        },
+      }
+    : {};
+
   return {
-    ref: sortable.setNodeRef,
-    style: {
-      transform: CSS.Translate.toString(sortable.transform),
-      transition: sortable.transition,
-      ...dragStyle,
-    },
-    handleProps: { ...sortable.attributes, ...sortable.listeners },
+    ref,
+    style,
+    handleProps,
     isDragging: sortable.isDragging,
+    selected: isSelected,
+    selectProps,
   };
 }
 
@@ -617,6 +1227,7 @@ export function DragHandle({
       aria-label={label ?? state.handleLabel}
       disabled={off}
       className={cn("cursor-grab touch-none active:cursor-grabbing", className)}
+      data-sortable-handle=""
       {...handleProps}
     >
       <GripVerticalIcon />