@suphark/ui 0.34.0 → 0.38.0

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

@@ -5,10 +5,18 @@ import {
   closestCenter,
   DndContext,
   type DragEndEvent,
+  type DragMoveEvent,
   type DragOverEvent,
+  DragOverlay,
   type DragStartEvent,
+  type DropAnimation,
+  getClientRect,
+  getFirstCollision,
   KeyboardSensor,
+  MeasuringStrategy,
   PointerSensor,
+  pointerWithin,
+  rectIntersection,
   type UniqueIdentifier,
   useDroppable,
   useSensor,
@@ -23,8 +31,11 @@ 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 {
+  flatItems,
+  gatherItems,
   groupOfItem,
   moveItemToGroup,
   reorderGroups,
@@ -38,14 +49,19 @@ import { GripVerticalIcon } from "lucide-react";
 import {
   type CSSProperties,
   createContext,
+  type KeyboardEvent,
+  type MouseEvent,
   type ReactNode,
   useCallback,
   useContext,
+  useEffect,
   useId,
   useMemo,
   useRef,
   useState,
+  useSyncExternalStore,
 } from "react";
+import { createPortal } from "react-dom";
 import { toast } from "sonner";
 
 export type SortableKind = "group" | "item";
@@ -56,37 +72,107 @@ 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,
+  // ช่องจาง ๆ ของแถวต้นทางเราใส่ผ่าน 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();
+    },
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+type ShiftStore = ReturnType<typeof createShiftStore>;
+
 interface SortableState {
   /** กำลังลากชนิดไหนอยู่ (null = ไม่ได้ลาก) — ใช้ปิดที่วางของอีกชนิด */
   dragging: SortableKind | null;
   disabled: boolean;
   handleLabel: string;
+  /** มี `renderOverlay` = แถวต้นทางเป็นที่ว่างจาง ๆ ส่วนของที่ลอยตามเมาส์คือ overlay */
+  overlay: boolean;
+  /** กลุ่มที่กำลังถูกลาก (แถวรายการของกลุ่มนี้จางตามหัวกลุ่ม) */
+  activeGroup: string | null;
+  /** รายการอื่นที่ลากไปพร้อมกันแบบ 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,
+  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"),
+  };
 }
 
 /** ข้อมูลของสิ่งที่กำลังลาก ส่งให้แอปประกอบข้อความเอง (แอปรู้ชื่อคีย์/ชื่อกลุ่ม แพ็กเกจไม่รู้) */
@@ -98,6 +184,8 @@ export interface SortableAnnouncementContext {
   /** ตำแหน่งในกลุ่ม/ในลำดับกลุ่ม เริ่มที่ 1 */
   index: number;
   total: number;
+  /** จำนวนรายการที่ลากไปด้วยกัน (ลากแบบ bulk > 1) */
+  count: number;
 }
 
 export interface SortableAnnouncements {
@@ -139,6 +227,22 @@ export interface SortableProviderProps {
    * (เช่น `values-${environmentId}`) ช่วยตอนไล่ปัญหา
    */
   id?: string;
+  /**
+   * สิ่งที่ลอยตามเมาส์ระหว่างลาก (แบบการ์ดใน Trello/Todoist) — ไม่ส่ง = ลากตัวแถวเองเหมือนเดิม
+   * ส่งมา = แถวต้นทางกลายเป็นช่องว่างจาง ๆ บอกตำแหน่งที่จะวาง และมีแอนิเมชันตอนปล่อย
+   * วาดใน portal ที่ `body` จึงคืน `<div>` ได้แม้รายการจริงเป็นแถว `<tr>` ของตาราง
+   */
+  renderOverlay?: (drag: SortableDrag) => ReactNode;
+  /**
+   * เลือกหลายรายการแล้วลากไปพร้อมกัน: ⌘/Ctrl+คลิก = เลือกทีละตัว, Shift+คลิก = เลือกเป็นช่วง,
+   * คลิกเฉย ๆ = ล้าง · ที่จับ (คีย์บอร์ด): `x` = เลือก/ไม่เลือก, ⌘/Ctrl+A = ทั้งหมด, Esc = ล้าง
+   * แถวต้องกระจาย `selectProps` จาก `useSortableRow` (มี `data-selected` ไว้ทำสีแถวที่เลือก)
+   * ลากตัวที่เลือกอยู่ = ลากทุกตัวที่เลือกไปรวมที่จุดวาง เรียงตามลำดับเดิม
+   */
+  multiSelect?: boolean;
+  /** รายการที่เลือก (ควบคุมจากภายนอก) — ไม่ส่ง = provider เก็บเอง */
+  selected?: string[];
+  onSelectedChange?: (ids: string[]) => void;
   children: ReactNode;
 }
 
@@ -161,16 +265,220 @@ export function SortableProvider({
   screenReaderInstructions,
   announcements,
   id,
+  renderOverlay,
+  multiSelect = 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<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);
   const beforeDrag = useRef<SortableOrder | null>(null);
   // อ่านลำดับล่าสุดตอนปล่อย (onDragOver เปลี่ยนไปหลายรอบแล้ว prop ยังไม่ทัน)
   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 blocks = useRef(new Map<string, { top: number; bottom: number }>());
+  const [overGroup, setOverGroup] = useState<string | null>(null);
+  const overlayOn = Boolean(renderOverlay);
+  useEffect(() => {
+    const active = activeDrag?.kind === "group" ? activeDrag.id : null;
+    const groups = order.groups;
+    if (!active) {
+      for (const g of groups) shifts.set(g, undefined);
+      return;
+    }
+    const a = groups.indexOf(active);
+    const o = overGroup ? groups.indexOf(overGroup) : a;
+    const at = (i: number) => blocks.current.get(groups[i] ?? "");
+    const self = at(a);
+    if (!self || o < 0) return;
+    // ระยะที่กลุ่มอื่นหลบ = จากหัวของกลุ่มที่ลากไปถึงหัวของกลุ่มถัดไป (รวมช่องไฟ)
+    const step = (at(a + 1)?.top ?? self.bottom) - self.top;
+    const transition = `transform ${SORT_TRANSITION.duration}ms ${EASING}`;
+    groups.forEach((g, i) => {
+      let dy = 0;
+      if (i === a) {
+        if (!overlayOn) return; // ไม่มี overlay = หัวกลุ่มลอยตามเมาส์ (onDragMove)
+        dy =
+          o > a
+            ? (at(o)?.bottom ?? self.bottom) - self.bottom
+            : o < a
+              ? (at(o)?.top ?? self.top) - self.top
+              : 0;
+      } else if (a < o && i > a && i <= o) dy = -step;
+      else if (o < a && i >= o && i < a) dy = step;
+      shifts.set(g, { transform: `translate3d(0px, ${dy}px, 0)`, transition });
+    });
+  }, [activeDrag, overGroup, order.groups, overlayOn, shifts]);
+  const measuring = useMemo(
+    () => ({ droppable: { strategy: MeasuringStrategy.Always, measure: measureDroppable } }),
+    [measureDroppable],
+  );
+
+  // ย้ายข้ามกลุ่มเสร็จแล้ว (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 }),
@@ -183,22 +491,75 @@ 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";
+    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;
+    if (kind === "group") {
+      blocks.current.clear();
+      for (const [groupId, header] of nodes.current.groups) {
+        if (header.isConnected) blocks.current.set(groupId, blockRect(groupId, header));
+      }
+      setOverGroup(raw);
+    }
+    setDragging(kind);
+    setActiveDrag({ kind, id: raw, ids: bulk.current ?? [raw] });
+  }
+
+  /** ไม่มี overlay: ก้อนของกลุ่มที่ลากลอยตามเมาส์ทั้งก้อน (หัวกลุ่ม + แถวรายการ) */
+  function onDragMove({ active, delta }: DragMoveEvent) {
+    if (overlayOn || kindOf(active.id) !== "g") return;
+    shifts.set(rawOf(active.id), {
+      transform: `translate3d(${delta.x}px, ${delta.y}px, 0)`,
+      transition: undefined,
+    });
+  }
+
+  function endDrag() {
+    draggingRef.current = null;
+    bulk.current = null;
+    setOverGroup(null);
+    // ล้างระยะเลื่อนพร้อมกับที่ลำดับใหม่ render (รอ effect = มีเฟรมที่แถวใหม่ยังติด transform เก่า → กระพริบ)
+    for (const g of nodes.current.groups.keys()) shifts.set(g, undefined);
+    setDragging(null);
+    setActiveDrag(null);
   }
 
   function onDragOver({ active, over }: DragOverEvent) {
+    if (over && kindOf(active.id) === "g" && kindOf(over.id) === "g") {
+      setOverGroup(rawOf(over.id));
+      return;
+    }
     if (!over || kindOf(active.id) !== "i") return;
     const current = latest.current;
     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);
     }
@@ -227,8 +588,9 @@ export function SortableProvider({
 
   function onDragEnd({ active, over }: DragEndEvent) {
     const snapshot = beforeDrag.current;
+    const carried = bulk.current;
     beforeDrag.current = null;
-    setDragging(null);
+    endDrag();
     const current = latest.current;
     let next = current;
     if (over && kindOf(active.id) === "g" && kindOf(over.id) === "g") {
@@ -236,6 +598,8 @@ export function SortableProvider({
     } 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);
@@ -246,7 +610,7 @@ export function SortableProvider({
   function onDragCancel() {
     const snapshot = beforeDrag.current;
     beforeDrag.current = null;
-    setDragging(null);
+    endDrag();
     if (snapshot) {
       latest.current = snapshot;
       onOrderChange(snapshot);
@@ -268,6 +632,7 @@ export function SortableProvider({
         kind: "group",
         index: current.groups.indexOf(raw) + 1,
         total: current.groups.length,
+        count: 1,
       };
     }
     const group = groupOfItem(current, raw);
@@ -278,6 +643,7 @@ export function SortableProvider({
       groupId: group,
       index: list.indexOf(raw) + 1,
       total: list.length,
+      count: bulk.current?.length ?? 1,
     };
   }, []);
 
@@ -314,12 +680,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,
       ) =>
@@ -333,38 +702,84 @@ 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 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,
+      carried,
+      multiSelect,
+      selected,
+      select,
+      groupOf,
+      register,
+      shifts,
     }),
-    [dragging, disabled, handleLabel, text.sortable?.handle],
+    [
+      dragging,
+      disabled,
+      handleLabel,
+      text.sortable?.handle,
+      renderOverlay,
+      activeDrag,
+      carried,
+      multiSelect,
+      selected,
+      select,
+      groupOf,
+      register,
+      shifts,
+    ],
   );
 
   return (
@@ -372,13 +787,17 @@ export function SortableProvider({
       <DndContext
         id={id ?? fallbackId}
         sensors={sensors}
-        collisionDetection={collision}
+        collisionDetection={collisionDetection}
+        // วัดตำแหน่งที่วางใหม่ตลอดระหว่างลาก — ย้ายข้ามกลุ่มแล้ว layout เปลี่ยน ต้องใช้ตำแหน่งปัจจุบัน
+        // (ตอนลากกลุ่ม วัดหัวกลุ่มรวมแถวรายการทั้งก้อน — ดู measureDroppable)
+        measuring={measuring}
         accessibility={{
           screenReaderInstructions: { draggable: instructions },
           announcements: dndAnnouncements,
         }}
         onDragStart={onDragStart}
         onDragOver={onDragOver}
+        onDragMove={onDragMove}
         onDragEnd={onDragEnd}
         onDragCancel={onDragCancel}
       >
@@ -387,6 +806,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>
   );
@@ -415,8 +844,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"` = ลากรายการในกลุ่ม
@@ -435,16 +874,107 @@ export function useSortableRow({
   const sortable = useSortable({
     id: dndId(type, id),
     disabled: disabled || state.disabled,
+    transition: SORT_TRANSITION,
   });
-  return {
-    ref: sortable.setNodeRef,
-    style: {
-      transform: CSS.Translate.toString(sortable.transform),
-      transition: sortable.transition,
-      ...(sortable.isDragging ? { position: "relative", zIndex: 1, opacity: 0.85 } : {}),
+  const { register, shifts, select } = state;
+  const { setNodeRef } = sortable;
+  const ref = useCallback(
+    (node: HTMLElement | null) => {
+      setNodeRef(node);
+      register(type, id, node);
     },
-    handleProps: { ...sortable.attributes, ...sortable.listeners },
+    [setNodeRef, register, type, id],
+  );
+
+  const transform = CSS.Translate.toString(sortable.transform);
+  const groupDrag = state.dragging === "group";
+  // ระหว่างลากกลุ่ม provider คำนวณระยะเลื่อนของแต่ละกลุ่มเอง — หัวกลุ่มและแถวรายการของกลุ่มอ่านค่าเดียวกัน
+  // (หัวกลุ่มมักอยู่ใน `SortableGroup` ซึ่งเป็น context ของรายการ dnd-kit จึงคำนวณให้หัวกลุ่มไม่ได้)
+  const groupId = type === "item" ? state.groupOf(id) : id;
+  const shift = useSyncExternalStore(
+    shifts.subscribe,
+    () => (groupId ? shifts.get(groupId) : undefined),
+    () => undefined,
+  );
+
+  let style: CSSProperties = { transform, transition: sortable.transition };
+  if (type === "group" && groupDrag) {
+    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 ลอยตามเมาส์แล้ว แถวต้นทางเหลือเป็นช่องจาง ๆ บอกตำแหน่งที่จะวาง
+        { ...style, opacity: 0.4 }
+      : { ...style, position: "relative", zIndex: 1, opacity: 0.85 };
+  } else if (type === "item" && groupDrag && 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,
+    style,
+    handleProps,
     isDragging: sortable.isDragging,
+    selected: isSelected,
+    selectProps,
   };
 }
 
@@ -452,7 +982,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;
 } {
@@ -462,6 +1003,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 };
 }
 
@@ -492,6 +1044,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 />