@suphark/ui 0.38.0 → 0.39.0

package/CHANGELOG.md

@@ -2,7 +2,27 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
-## [0.38.0] — 2026-10-07
+## [0.39.0] — 2026-10-07
+
+### Added
+
+- **`SortableProvider freeLayout` — ชั้นบนสุดจัดได้อิสระ** (เจ้าของแจ้งว่าเดิม "ล็อก" ให้รายการไม่มีกลุ่มอยู่บนเสมอ กลุ่มอยู่ล่างเสมอ): กลุ่มกับรายการไม่มีกลุ่มสลับที่กันได้ทุกแบบ — กลุ่มขึ้นไปเหนือรายการ, รายการไปอยู่ระหว่างกลุ่ม, เอารายการออกจากกลุ่มไปวางก่อนกลุ่มไหนก็ได้ · หัวกลุ่ม: **ครึ่งบน = วางก่อนกลุ่ม, ครึ่งล่าง = เข้ากลุ่มเป็นตัวแรก** · ระหว่างลากทุกอย่างในชั้นบนสุดเลื่อนหลบเป็นก้อน (กลุ่ม = หัว + รายการ) · โซนท้ายตาราง = วางท้ายสุด · ไม่เปิด = แบบเดิม (แอปที่ยังเรนเดอร์รายการไม่มีกลุ่มก่อนไม่เปลี่ยนพฤติกรรม)
+- `SortableOrder.root` (optional) + `rootEntries(order)` (ลำดับชั้นบนสุดสำหรับวนเรนเดอร์), `moveRootEntry`, `moveItemToRoot`, type `SortableRootEntry` · `sortableOrderToPayload(order).root` + `sortableOrderOf(..., { root })` สำหรับบันทึก/โหลด — `groups` / `items[UNGROUPED]` ยังตรงกับ root เสมอ (payload เดิมใช้ต่อได้)
+- showcase: `/components/sortable-list` เปิด `freeLayout` และเรนเดอร์ตาม `rootEntries`
+
+### Fixed
+
+- (จาก 0.38.1 ที่ไม่ได้ขึ้น npm แยก) ลากรายการเข้ากลุ่มแล้ววางเป็นรายการแรกไม่ได้ — ดูด้านล่าง
+- โซน "ท้ายตาราง" (`useSortableDropZone(UNGROUPED)`) ถูก collision เปลี่ยนเป้าหมายเป็นรายการไม่มีกลุ่มตัวแรก → วางแล้วไปโผล่บนสุดแทนท้ายสุด
+
+## [0.38.1] — 2026-10-07
+
+> ประกาศพร้อม publish แล้ว แต่ยังไม่ขึ้น npm — รวมอยู่ใน 0.39.0
+
+### Fixed
+
+- **`@suphark/ui/sortable` ลากรายการเข้ากลุ่มแล้ววางเป็นรายการแรกไม่ได้** (เจ้าของแจ้ง): ระหว่างลากขึ้นเป็นตัวแรกถูก แต่พอปล่อยกลับไปเป็นตัวที่สอง — ตอนชี้หัวกลุ่ม collision เลือก "รายการที่ใกล้ที่สุดที่ไม่ใช่ตัวที่ลาก" (= ตัวแรกเดิม) แล้ว `onDragEnd` ย้ายไปแทนที่ตัวนั้น · ตอนนี้ชี้หัวกลุ่ม = รายการแรกที่แสดงอยู่ **รวมตัวที่ลากเอง** · ยืนยันบน demo: ลากจากนอกกลุ่ม / จากกลุ่มอื่น / จากท้ายกลุ่มเดียวกันขึ้นหัวกลุ่ม → เป็นตัวแรกทุกกรณี, วางครึ่งล่างของแถวยังไปอยู่ "หลัง" แถวนั้นตามเดิม (ทำซ้ำบน production v0.38.0 ได้ก่อนแก้)
+
 
 ### Fixed
 

package/README.md

@@ -235,6 +235,7 @@ const [order, setOrder] = useState(() =>
 - `onCommit` ล้มเหลว (throw หรือ `{ ok: false, error }`) = คืนลำดับเดิม + toast; ถ้าอยากจัดการ error เองใส่ `onCommitError`
 - การ์ดลอยตามเมาส์: `renderOverlay={(drag) => drag.kind === "item" ? <ItemCard id={drag.id} /> : <GroupCard id={drag.id} />}` (วาดใน portal จึงเป็น `div` ได้ ไม่ต้องเป็น `<tr>`) — ไม่ใส่ = แถวขยับเองแบบเดิม · โฟลเดอร์ที่ย่ออยู่: `useSortableDropZone(id, { onDwell: collapsed ? open : undefined })` ลากค้าง 600ms แล้วเปิดให้ · วางบนหัวกลุ่ม = ขึ้นบนสุดของกลุ่ม, วางบนโซนของ `UNGROUPED` = ต่อท้าย
 - เลือกหลายรายการแล้วลากพร้อมกัน: `SortableProvider multiSelect` แล้วกระจาย `row.selectProps` ลงแถว (ทำสีด้วย `data-[selected]:bg-primary/10`) — ⌘/Ctrl+คลิก, Shift+คลิก, ที่จับกด `x` / ⌘/Ctrl+A, Esc ล้าง · แถบนับใช้ `SelectionBar` + `useSortableState().selected/clearSelection` · `renderOverlay` ได้ `drag.ids` ไว้ทำการ์ดซ้อน
+- จัดชั้นบนสุดอิสระ (กลุ่มกับรายการไม่มีกลุ่มสลับกันได้): `SortableProvider freeLayout` + เรนเดอร์ตาม `rootEntries(order)` (ครอบทั้งหมดด้วย `<SortableGroup itemIds={order.items[UNGROUPED]}>` แล้วแต่ละกลุ่มมี `SortableGroup` ของตัวเองข้างใน) + บันทึก `payload.root` และส่งกลับ `sortableOrderOf(..., { root })` ตอนโหลด · หัวกลุ่มครึ่งบน = ก่อนกลุ่ม, ครึ่งล่าง = เข้ากลุ่ม
 - `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.38.0",
+  "version": "0.39.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/sortable/sortable-list.tsx

@@ -38,8 +38,10 @@ import {
   gatherItems,
   groupOfItem,
   moveItemToGroup,
-  reorderGroups,
+  moveItemToRoot,
+  moveRootEntry,
   reorderItems,
+  rootEntries,
   type SortableOrder,
   sameOrder,
   UNGROUPED,
@@ -110,6 +112,11 @@ function createShiftStore() {
       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 () => {
@@ -129,6 +136,9 @@ interface SortableState {
   overlay: boolean;
   /** กลุ่มที่กำลังถูกลาก (แถวรายการของกลุ่มนี้จางตามหัวกลุ่ม) */
   activeGroup: string | null;
+  /** กำลังลากของในชั้นบนสุด (กลุ่ม หรือรายการไม่มีกลุ่มเมื่อ `freeLayout`) — ระยะเลื่อนมาจาก provider */
+  rootDrag: boolean;
+  freeLayout: boolean;
   /** รายการอื่นที่ลากไปพร้อมกันแบบ bulk (ไม่รวมตัวที่จับ) — แสดงจาง ๆ ระหว่างลาก */
   carried: ReadonlySet<string>;
   multiSelect: boolean;
@@ -146,6 +156,8 @@ const SortableStateContext = createContext<SortableState>({
   handleLabel: "ลากเพื่อจัดลำดับ",
   overlay: false,
   activeGroup: null,
+  rootDrag: false,
+  freeLayout: false,
   carried: EMPTY,
   multiSelect: false,
   selected: EMPTY,
@@ -240,6 +252,13 @@ export interface SortableProviderProps {
    * ลากตัวที่เลือกอยู่ = ลากทุกตัวที่เลือกไปรวมที่จุดวาง เรียงตามลำดับเดิม
    */
   multiSelect?: boolean;
+  /**
+   * ชั้นบนสุดจัดได้อิสระ: กลุ่มกับรายการที่ไม่มีกลุ่มสลับที่กันได้ทุกแบบ (กลุ่มขึ้นไปเหนือรายการ /
+   * รายการไปอยู่ระหว่างกลุ่ม / เอารายการออกจากกลุ่มไปวางก่อนกลุ่มไหนก็ได้) — แอปต้องเรนเดอร์ตาม
+   * `rootEntries(order)` และบันทึก `sortableOrderToPayload(order).root` · ชี้ครึ่งบนของหัวกลุ่ม = วางก่อนกลุ่ม,
+   * ครึ่งล่าง = เข้ากลุ่มเป็นตัวแรก · ไม่เปิด = รายการไม่มีกลุ่มอยู่บนสุดเสมอ (แบบเดิม)
+   */
+  freeLayout?: boolean;
   /** รายการที่เลือก (ควบคุมจากภายนอก) — ไม่ส่ง = provider เก็บเอง */
   selected?: string[];
   onSelectedChange?: (ids: string[]) => void;
@@ -267,6 +286,7 @@ export function SortableProvider({
   id,
   renderOverlay,
   multiSelect = false,
+  freeLayout = false,
   selected: selectedProp,
   onSelectedChange,
   children,
@@ -395,40 +415,122 @@ export function SortableProvider({
     [blockRect],
   );
 
-  // ---------- เลื่อนทั้งก้อนระหว่างลากกลุ่ม (แบบรายการ: กลุ่มอื่นหลบ ช่องว่างของกลุ่มที่ลากเลื่อนไปจุดวาง) ----------
-  const blocks = useRef(new Map<string, { top: number; bottom: number }>());
-  const [overGroup, setOverGroup] = useState<string | null>(null);
+  // ---------- เลื่อนทั้งก้อนในชั้นบนสุด (แบบรายการ: ตัวอื่นหลบ ช่องว่างของตัวที่ลากเลื่อนไปจุดวาง) ----------
+  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(() => {
-    const active = activeDrag?.kind === "group" ? activeDrag.id : null;
-    const groups = order.groups;
-    if (!active) {
-      for (const g of groups) shifts.set(g, undefined);
+    if (!activeDrag) return;
+    const activeKey = dndId(activeDrag.kind, activeDrag.id);
+    const keys = entryKeys(order, activeKey);
+    if (!keys) {
+      // รายการที่ลากเข้าไปอยู่ในกลุ่มแล้ว → dnd-kit ของกลุ่มนั้นคุมต่อ
+      shifts.clear();
       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 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}`;
-    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]);
+    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],
@@ -452,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 };
@@ -463,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 }];
@@ -503,21 +624,16 @@ export function SortableProvider({
       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);
-    }
+    setTarget(null);
     setDragging(kind);
     setActiveDrag({ kind, id: raw, ids: bulk.current ?? [raw] });
   }
 
-  /** ไม่มี overlay: ก้อนของกลุ่มที่ลากลอยตามเมาส์ทั้งก้อน (หัวกลุ่ม + แถวรายการ) */
-  function onDragMove({ active, delta }: DragMoveEvent) {
+  function onDragMove({ active, over, delta, activatorEvent }: DragMoveEvent) {
+    updateTarget(active, over, activatorEvent instanceof KeyboardEvent);
+    // ไม่มี overlay: ก้อนของกลุ่มที่ลากลอยตามเมาส์ทั้งก้อน (หัวกลุ่ม + แถวรายการ)
     if (overlayOn || kindOf(active.id) !== "g") return;
-    shifts.set(rawOf(active.id), {
+    shifts.set(String(active.id), {
       transform: `translate3d(${delta.x}px, ${delta.y}px, 0)`,
       transition: undefined,
     });
@@ -526,23 +642,54 @@ export function SortableProvider({
   function endDrag() {
     draggingRef.current = null;
     bulk.current = null;
-    setOverGroup(null);
+    setTarget(null);
     // ล้างระยะเลื่อนพร้อมกับที่ลำดับใหม่ render (รอ effect = มีเฟรมที่แถวใหม่ยังติด transform เก่า → กระพริบ)
-    for (const g of nodes.current.groups.keys()) shifts.set(g, undefined);
+    shifts.clear();
     setDragging(null);
     setActiveDrag(null);
   }
 
-  function onDragOver({ active, over }: DragOverEvent) {
-    if (over && kindOf(active.id) === "g" && kindOf(over.id) === "g") {
-      setOverGroup(rawOf(over.id));
+  function onDragOver({ active, over, activatorEvent }: DragOverEvent) {
+    const keyboard = activatorEvent instanceof KeyboardEvent;
+    if (!over || kindOf(active.id) !== "i") {
+      updateTarget(active, over, keyboard);
       return;
     }
-    if (!over || kindOf(active.id) !== "i") 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;
@@ -552,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 ให้) */
@@ -589,12 +731,33 @@ 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;
     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));
     }
@@ -742,6 +905,10 @@ export function SortableProvider({
   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
@@ -757,6 +924,8 @@ export function SortableProvider({
       handleLabel: handleLabel ?? text.sortable?.handle ?? "ลากเพื่อจัดลำดับ",
       overlay: Boolean(renderOverlay),
       activeGroup: activeDrag?.kind === "group" ? activeDrag.id : null,
+      rootDrag,
+      freeLayout,
       carried,
       multiSelect,
       selected,
@@ -772,6 +941,8 @@ export function SortableProvider({
       text.sortable?.handle,
       renderOverlay,
       activeDrag,
+      rootDrag,
+      freeLayout,
       carried,
       multiSelect,
       selected,
@@ -887,18 +1058,30 @@ export function useSortableRow({
   );
 
   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 loose = type === "item" && groupId === UNGROUPED;
+  // ระยะเลื่อนในชั้นบนสุด: กลุ่ม/รายการไม่มีกลุ่ม อ่านของตัวเอง, รายการในกลุ่มอ่านของกลุ่ม
+  const shiftKey =
+    type === "group" || loose ? dndId(type, id) : groupId ? dndId("group", groupId) : undefined;
   const shift = useSyncExternalStore(
     shifts.subscribe,
-    () => (groupId ? shifts.get(groupId) : undefined),
+    () => (shiftKey ? shifts.get(shiftKey) : undefined),
     () => undefined,
   );
 
   let style: CSSProperties = { transform, transition: sortable.transition };
-  if (type === "group" && groupDrag) {
+  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,
@@ -914,7 +1097,7 @@ export function useSortableRow({
       ? // มี overlay ลอยตามเมาส์แล้ว แถวต้นทางเหลือเป็นช่องจาง ๆ บอกตำแหน่งที่จะวาง
         { ...style, opacity: 0.4 }
       : { ...style, position: "relative", zIndex: 1, opacity: 0.85 };
-  } else if (type === "item" && groupDrag && shift) {
+  } else if (type === "item" && state.rootDrag && shift) {
     const own = state.activeGroup !== null && state.activeGroup === groupId;
     style = {
       transform: shift.transform,

package/src/lib/sortable-order.ts

@@ -1,18 +1,57 @@
 /**
  * ลำดับของรายการ 2 ระดับ (กลุ่ม → รายการในกลุ่ม) แบบ pure — ไม่พึ่ง dnd-kit และไม่พึ่ง React
  * ใช้โดย `@suphark/ui/sortable` และเทสต์ได้ตรง ๆ; แอปเอาไปสร้าง payload ตอนบันทึกได้เลย
+ *
+ * ชั้นบนสุด (root) มีทั้งกลุ่มและรายการที่ไม่มีกลุ่มปนกันได้ตามใจ — `root` เก็บลำดับนั้น
+ * ส่วน `groups` / `items[UNGROUPED]` เป็นมุมมองเดิมที่ได้จาก root (แอปเก่าที่ไม่รู้จัก root ยังอ่านได้)
  */
 
-/** รายการที่ยังไม่อยู่กลุ่มไหน — เก็บในถังนี้ (แสดงเป็นกลุ่มไม่มีชื่อ) */
+/** รายการที่ยังไม่อยู่กลุ่มไหน — เก็บในถังนี้ */
 export const UNGROUPED = "__ungrouped__";
 
+/** สิ่งหนึ่งในชั้นบนสุด: กลุ่ม หรือรายการที่ไม่มีกลุ่ม */
+export interface SortableRootEntry {
+  kind: "group" | "item";
+  id: string;
+}
+
 export interface SortableOrder {
   /** ลำดับของกลุ่ม (ไม่รวม `UNGROUPED`) */
   groups: string[];
   /** id ของรายการในแต่ละกลุ่ม — key เป็น id ของกลุ่มหรือ `UNGROUPED` */
   items: Record<string, string[]>;
+  /**
+   * ลำดับชั้นบนสุดที่กลุ่มกับรายการไม่มีกลุ่มสลับกันได้ — ไม่มี = รายการไม่มีกลุ่มอยู่บนสุดแล้วตามด้วยกลุ่ม
+   * (รูปแบบเดิม) · ใช้ `rootEntries(order)` อ่าน แทนการอ่านฟิลด์นี้ตรง ๆ
+   */
+  root?: SortableRootEntry[];
 }
 
+/** ลำดับชั้นบนสุด (กลุ่ม + รายการไม่มีกลุ่ม) — แอปใช้วนเรนเดอร์ตามลำดับนี้ */
+export function rootEntries(order: SortableOrder): SortableRootEntry[] {
+  if (order.root) return order.root;
+  return [
+    ...(order.items[UNGROUPED] ?? []).map((id) => ({ kind: "item" as const, id })),
+    ...order.groups.map((id) => ({ kind: "group" as const, id })),
+  ];
+}
+
+/** ตั้งชั้นบนสุดใหม่ แล้วให้ `groups` / `items[UNGROUPED]` ตรงกับมันเสมอ */
+function withRoot(order: SortableOrder, root: SortableRootEntry[]): SortableOrder {
+  return {
+    ...order,
+    root,
+    groups: root.filter((e) => e.kind === "group").map((e) => e.id),
+    items: {
+      ...order.items,
+      [UNGROUPED]: root.filter((e) => e.kind === "item").map((e) => e.id),
+    },
+  };
+}
+
+const sameEntry = (a: SortableRootEntry, b: SortableRootEntry) =>
+  a.kind === b.kind && a.id === b.id;
+
 /** สร้างลำดับเริ่มต้นจากข้อมูลที่โหลดมา (กลุ่มเรียงตามที่ส่งมา รายการเรียงตามที่ส่งมา) */
 export function sortableOrderOf<TGroup, TItem>(
   groups: ReadonlyArray<TGroup>,
@@ -23,6 +62,13 @@ export function sortableOrderOf<TGroup, TItem>(
     /** รายการนี้อยู่กลุ่มไหน — `null`/`undefined` = ยังไม่อยู่กลุ่มไหน */
     itemGroupId: (item: TItem) => string | null | undefined;
   },
+  options?: {
+    /**
+     * ลำดับชั้นบนสุดที่บันทึกไว้ (จาก `sortableOrderToPayload(order).root`) — ไม่ส่ง = รายการไม่มีกลุ่มก่อน
+     * แล้วตามด้วยกลุ่ม · ของที่ไม่มีใน root ต่อท้าย ของใน root ที่ไม่มีอยู่แล้วถูกทิ้ง
+     */
+    root?: ReadonlyArray<SortableRootEntry>;
+  },
 ): SortableOrder {
   const order: SortableOrder = { groups: [], items: { [UNGROUPED]: [] } };
   for (const group of groups) {
@@ -36,10 +82,14 @@ export function sortableOrderOf<TGroup, TItem>(
     if (list) list.push(select.itemId(item));
     else order.items[container] = [select.itemId(item)];
   }
-  return order;
+  if (!options?.root) return order;
+  const known = rootEntries(order);
+  const kept = options.root.filter((e) => known.some((k) => sameEntry(k, e)));
+  const rest = known.filter((k) => !kept.some((e) => sameEntry(k, e)));
+  return withRoot(order, [...kept, ...rest]);
 }
 
-/** กลุ่มที่รายการนี้อยู่ (ไม่เจอ = undefined) */
+/** กลุ่มที่รายการนี้อยู่ (`UNGROUPED` = ชั้นบนสุด; ไม่เจอ = undefined) */
 export function groupOfItem(order: SortableOrder, itemId: string): string | undefined {
   return Object.keys(order.items).find((group) => order.items[group]?.includes(itemId));
 }
@@ -53,19 +103,42 @@ export function moveWithin<T>(list: ReadonlyArray<T>, from: number, to: number):
   return next;
 }
 
-/** เรียงกลุ่มใหม่: ย้าย `groupId` ไปอยู่ตำแหน่งของ `overGroupId` */
+/**
+ * ย้ายสิ่งหนึ่งในชั้นบนสุดไปที่ตำแหน่ง `index` (นับในรายการที่ "เอาตัวมันออกแล้ว")
+ * ใช้ได้ทั้งกลุ่มและรายการไม่มีกลุ่ม — กลุ่มลงไปอยู่ระหว่างรายการไม่มีกลุ่มได้
+ */
+export function moveRootEntry(
+  order: SortableOrder,
+  entry: SortableRootEntry,
+  index: number,
+): SortableOrder {
+  const root = rootEntries(order);
+  const from = root.findIndex((e) => sameEntry(e, entry));
+  if (from < 0) return order;
+  const rest = root.filter((_, i) => i !== from);
+  const at = Math.max(0, Math.min(index, rest.length));
+  if (at === from) return order;
+  return withRoot(order, [
+    ...rest.slice(0, at),
+    root[from] as SortableRootEntry,
+    ...rest.slice(at),
+  ]);
+}
+
+/** เรียงกลุ่มใหม่: ย้าย `groupId` ไปอยู่ตำแหน่งของ `overGroupId` (ในชั้นบนสุด) */
 export function reorderGroups(
   order: SortableOrder,
   groupId: string,
   overGroupId: string,
 ): SortableOrder {
-  const from = order.groups.indexOf(groupId);
-  const to = order.groups.indexOf(overGroupId);
+  const root = rootEntries(order);
+  const from = root.findIndex((e) => e.kind === "group" && e.id === groupId);
+  const to = root.findIndex((e) => e.kind === "group" && e.id === overGroupId);
   if (from < 0 || to < 0 || from === to) return order;
-  return { ...order, groups: moveWithin(order.groups, from, to) };
+  return withRoot(order, moveWithin(root, from, to));
 }
 
-/** เรียงรายการในกลุ่มเดียวกัน: ย้าย `itemId` ไปอยู่ตำแหน่งของ `overItemId` */
+/** เรียงรายการในกลุ่มเดียวกัน (รวมรายการไม่มีกลุ่มในชั้นบนสุด): ย้าย `itemId` ไปอยู่ตำแหน่งของ `overItemId` */
 export function reorderItems(
   order: SortableOrder,
   itemId: string,
@@ -73,6 +146,13 @@ export function reorderItems(
 ): SortableOrder {
   const group = groupOfItem(order, itemId);
   if (!group || group !== groupOfItem(order, overItemId)) return order;
+  if (group === UNGROUPED) {
+    const root = rootEntries(order);
+    const from = root.findIndex((e) => e.kind === "item" && e.id === itemId);
+    const to = root.findIndex((e) => e.kind === "item" && e.id === overItemId);
+    if (from < 0 || to < 0 || from === to) return order;
+    return withRoot(order, moveWithin(root, from, to));
+  }
   const list = order.items[group] ?? [];
   const from = list.indexOf(itemId);
   const to = list.indexOf(overItemId);
@@ -80,8 +160,25 @@ export function reorderItems(
   return { ...order, items: { ...order.items, [group]: moveWithin(list, from, to) } };
 }
 
+/** เอารายการออกจากที่อยู่ปัจจุบัน (กลุ่ม หรือชั้นบนสุด) */
+function removeItem(order: SortableOrder, itemId: string): SortableOrder {
+  const from = groupOfItem(order, itemId);
+  if (!from) return order;
+  if (from === UNGROUPED) {
+    return withRoot(
+      order,
+      rootEntries(order).filter((e) => !(e.kind === "item" && e.id === itemId)),
+    );
+  }
+  return {
+    ...order,
+    items: { ...order.items, [from]: (order.items[from] ?? []).filter((id) => id !== itemId) },
+  };
+}
+
 /**
  * ย้ายรายการไปกลุ่มอื่น — แทรกก่อน `beforeItemId` (ไม่ส่ง = ต่อท้ายกลุ่มปลายทาง)
+ * `toGroup = UNGROUPED` = ออกมาอยู่ชั้นบนสุด (ก่อนรายการ `beforeItemId` หรือท้ายสุด) — จะวางก่อนกลุ่มใช้ `moveItemToRoot`
  * เรียกระหว่างลากได้ (ให้แถวไปโผล่ในกลุ่มใหม่ทันที) เพราะคืน object ใหม่เมื่อมีอะไรเปลี่ยนจริงเท่านั้น
  */
 export function moveItemToGroup(
@@ -92,27 +189,72 @@ export function moveItemToGroup(
 ): SortableOrder {
   const from = groupOfItem(order, itemId);
   if (!from || from === toGroup) return order;
-  const target = order.items[toGroup] ?? [];
+  if (toGroup === UNGROUPED) {
+    const root = rootEntries(order);
+    const at = beforeItemId
+      ? root.findIndex((e) => e.kind === "item" && e.id === beforeItemId)
+      : -1;
+    return moveItemToRoot(order, itemId, at >= 0 ? (root[at] as SortableRootEntry) : null);
+  }
+  const removed = removeItem(order, itemId);
+  const target = removed.items[toGroup] ?? [];
   const at = beforeItemId ? target.indexOf(beforeItemId) : -1;
   const index = at >= 0 ? at : target.length;
   return {
-    ...order,
+    ...removed,
     items: {
-      ...order.items,
-      [from]: (order.items[from] ?? []).filter((id) => id !== itemId),
+      ...removed.items,
       [toGroup]: [...target.slice(0, index), itemId, ...target.slice(index)],
     },
   };
 }
 
-/** รายการทั้งหมดเรียงตามที่แสดง: ของที่ไม่มีกลุ่มก่อน แล้วไล่ตามลำดับกลุ่ม */
+/** ย้ายรายการออกมาอยู่ชั้นบนสุด ก่อน `before` (กลุ่มหรือรายการ; `null` = ท้ายสุด) */
+export function moveItemToRoot(
+  order: SortableOrder,
+  itemId: string,
+  before: SortableRootEntry | null,
+): SortableOrder {
+  const from = groupOfItem(order, itemId);
+  if (!from) return order;
+  const removed = removeItem(order, itemId);
+  const root = rootEntries(removed);
+  const at = before ? root.findIndex((e) => sameEntry(e, before)) : -1;
+  const index = at >= 0 ? at : root.length;
+  const entry: SortableRootEntry = { kind: "item", id: itemId };
+  const next = [...root.slice(0, index), entry, ...root.slice(index)];
+  if (from === UNGROUPED && sameRoot(next, rootEntries(order))) return order;
+  return withRoot(removed, next);
+}
+
+function sameRoot(a: ReadonlyArray<SortableRootEntry>, b: ReadonlyArray<SortableRootEntry>) {
+  return a.length === b.length && a.every((e, i) => sameEntry(e, b[i] as SortableRootEntry));
+}
+
+/** ลำดับเหมือนกันไหม (ใช้ตัดสินว่าต้องบันทึกหรือไม่) */
+export function sameOrder(a: SortableOrder, b: SortableOrder): boolean {
+  if (a === b) return true;
+  if (!sameRoot(rootEntries(a), rootEntries(b))) return false;
+  const keys = new Set([...Object.keys(a.items), ...Object.keys(b.items)]);
+  for (const key of keys) {
+    const left = a.items[key] ?? [];
+    const right = b.items[key] ?? [];
+    if (left.length !== right.length) return false;
+    if (left.some((id, i) => right[i] !== id)) return false;
+  }
+  return true;
+}
+
+/** รายการทั้งหมดเรียงตามที่แสดง: ไล่ชั้นบนสุด กลุ่มคลี่รายการของมันออกมา */
 export function flatItems(order: SortableOrder): string[] {
-  return [UNGROUPED, ...order.groups].flatMap((group) => order.items[group] ?? []);
+  return rootEntries(order).flatMap((e) =>
+    e.kind === "item" ? [e.id] : (order.items[e.id] ?? []),
+  );
 }
 
 /**
  * ลากหลายรายการพร้อมกัน (bulk): ดึงรายการใน `ids` ทั้งหมดมารวมที่ตำแหน่งของ `activeId`
- * (ตัวที่ผู้ใช้จับลาก) เรียงตามลำดับใน `ids` — ตัวอื่นหายจากที่เดิม ไม่ว่าจะอยู่กลุ่มไหน
+ * (ตัวที่ผู้ใช้จับลาก) เรียงตามลำดับใน `ids` — ตัวอื่นหายจากที่เดิม ไม่ว่าจะอยู่กลุ่มไหนหรือชั้นบนสุด
  */
 export function gatherItems(
   order: SortableOrder,
@@ -123,26 +265,15 @@ export function gatherItems(
   const moving = ids.filter((id) => present.has(id));
   if (moving.length <= 1 || !moving.includes(activeId)) return order;
   const others = new Set(moving.filter((id) => id !== activeId));
+  const expand = (id: string) => (others.has(id) ? [] : id === activeId ? moving : [id]);
   const items: Record<string, string[]> = {};
   for (const [group, list] of Object.entries(order.items)) {
-    items[group] = list.flatMap((id) => (others.has(id) ? [] : id === activeId ? moving : [id]));
-  }
-  return { ...order, items };
-}
-
-/** ลำดับเหมือนกันไหม (ใช้ตัดสินว่าต้องบันทึกหรือไม่) */
-export function sameOrder(a: SortableOrder, b: SortableOrder): boolean {
-  if (a === b) return true;
-  if (a.groups.length !== b.groups.length) return false;
-  if (a.groups.some((id, i) => b.groups[i] !== id)) return false;
-  const keys = new Set([...Object.keys(a.items), ...Object.keys(b.items)]);
-  for (const key of keys) {
-    const left = a.items[key] ?? [];
-    const right = b.items[key] ?? [];
-    if (left.length !== right.length) return false;
-    if (left.some((id, i) => right[i] !== id)) return false;
+    if (group !== UNGROUPED) items[group] = list.flatMap(expand);
   }
-  return true;
+  const root = rootEntries(order).flatMap((e) =>
+    e.kind === "group" ? [e] : expand(e.id).map((id) => ({ kind: "item" as const, id })),
+  );
+  return withRoot({ ...order, items: { ...order.items, ...items } }, root);
 }
 
 export interface SortableOrderPayload {
@@ -150,10 +281,15 @@ export interface SortableOrderPayload {
   groups: string[];
   /** รายการในแต่ละกลุ่ม เรียงตามลำดับกลุ่ม โดยของที่ไม่มีกลุ่มมาก่อนด้วย `groupId: null` */
   items: Array<{ groupId: string | null; itemIds: string[] }>;
+  /**
+   * ลำดับชั้นบนสุด (กลุ่มกับรายการไม่มีกลุ่มปนกัน) — เก็บเป็นตำแหน่งเดียวกันของทั้งสองชนิด
+   * แล้วส่งกลับเข้า `sortableOrderOf(..., { root })` ตอนโหลด
+   */
+  root: SortableRootEntry[];
 }
 
 /**
- * แปลงเป็นรูปที่ส่งเข้า server action ได้ — คืนทั้งลำดับกลุ่มและรายการในกลุ่ม
+ * แปลงเป็นรูปที่ส่งเข้า server action ได้ — คืนทั้งลำดับกลุ่ม รายการในกลุ่ม และชั้นบนสุด
  * ชื่อฟิลด์เป็นศัพท์กลางของแพ็กเกจ (`groupId`) แอปที่ใช้ศัพท์อื่น (เช่น `sectionId`) rename ชั้นเดียวที่ปลายทาง
  */
 export function sortableOrderToPayload(order: SortableOrder): SortableOrderPayload {
@@ -163,5 +299,6 @@ export function sortableOrderToPayload(order: SortableOrder): SortableOrderPaylo
       groupId: group === UNGROUPED ? null : group,
       itemIds: order.items[group] ?? [],
     })),
+    root: rootEntries(order).map((e) => ({ ...e })),
   };
 }

package/src/sortable.ts

@@ -22,11 +22,15 @@ export {
   gatherItems,
   groupOfItem,
   moveItemToGroup,
+  moveItemToRoot,
+  moveRootEntry,
   moveWithin,
   reorderGroups,
   reorderItems,
+  rootEntries,
   type SortableOrder,
   type SortableOrderPayload,
+  type SortableRootEntry,
   sameOrder,
   sortableOrderOf,
   sortableOrderToPayload,