@suphark/ui 0.38.0 → 0.40.1

package/src/components/ui/date-picker.tsx

@@ -1,308 +1,10 @@
-"use client";
-
-import { Button } from "@suphark/ui/components/ui/button";
-import { Calendar } from "@suphark/ui/components/ui/calendar";
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@suphark/ui/components/ui/input-group";
-import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
-import { formatRelativeThaiDate, formatThaiFullDate } from "@suphark/ui/lib/formatters";
-import { cn } from "@suphark/ui/lib/utils";
-import { addDays, addMonths, addWeeks, subDays, subMonths, subWeeks } from "date-fns";
-import { CalendarIcon, Check, Clock, X } from "lucide-react";
-import { useMemo, useState } from "react";
-
 /**
- * Smart date parser supporting intuitive Thai & international date inputs:
- * - "1/7" -> 1 July of current year
- * - "1/7/25" -> 1 July 2025 CE
- * - "1/7/68" -> 1 July 2025 CE (BE 2568)
- * - "1/7/2568" -> 1 July 2025 CE (BE 2568)
+ * ย้ายไป `components/shared/date/date-picker.tsx` แล้ว (0.40.0) — ไฟล์นี้ไม่ได้มาจาก shadcn CLI
+ * (registry ของ base-nova ไม่มี date-picker) แต่ยกมาจาก supplychain · คงไว้ให้ import path เดิมใช้ได้
  */
-export function parseSmartDateInput(input: string): Date | null {
-  if (!input?.trim()) return null;
-  const clean = input.trim().replace(/\s+/g, "");
-
-  const parts = clean.split(/[/\-.]/);
-  if (parts.length < 2 || parts.length > 3) return null;
-
-  const day = parseInt(parts[0] ?? "", 10);
-  const month = parseInt(parts[1] ?? "", 10);
-  if (Number.isNaN(day) || Number.isNaN(month) || day < 1 || day > 31 || month < 1 || month > 12) {
-    return null;
-  }
-
-  const currentYear = new Date().getFullYear();
-  let year = currentYear;
-
-  if (parts.length === 3 && parts[2]) {
-    const rawYear = parseInt(parts[2], 10);
-    if (Number.isNaN(rawYear)) return null;
-
-    if (rawYear > 2400) {
-      // Full Buddhist Era year (e.g. 2568 -> 2025 CE)
-      year = rawYear - 543;
-    } else if (rawYear >= 50 && rawYear < 100) {
-      // Short BE year (e.g. 68 -> 2568 -> 2025 CE)
-      year = 2500 + rawYear - 543;
-    } else if (rawYear < 50) {
-      // Short AD year (e.g. 25 -> 2025 CE)
-      year = 2000 + rawYear;
-    } else {
-      year = rawYear;
-    }
-  }
-
-  const d = new Date(year, month - 1, day);
-  if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {
-    return d;
-  }
-
-  return null;
-}
-
-interface DatePickerProps {
-  id?: string;
-  value: Date | string | number | null | undefined;
-  onChange: (date: Date | null) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-  allowClear?: boolean;
-  showPresets?: boolean;
-  showSmartInput?: boolean;
-}
-
-export function DatePicker({
-  id,
-  value,
-  onChange,
-  placeholder = "เลือกวันที่อ้างอิงราคา...",
-  disabled = false,
-  className,
-  allowClear = true,
-  showPresets = true,
-  showSmartInput = true,
-}: DatePickerProps) {
-  const [open, setOpen] = useState(false);
-  const [smartText, setSmartText] = useState("");
-
-  const selectedDate = value ? new Date(value) : undefined;
-  const isValidDate = selectedDate && !Number.isNaN(selectedDate.getTime());
-
-  const parsedSmartDate = useMemo(() => parseSmartDateInput(smartText), [smartText]);
-
-  const handleSelectDate = (date: Date | undefined) => {
-    onChange(date || null);
-    setOpen(false);
-    setSmartText("");
-  };
-
-  const applyPreset = (date: Date | null) => {
-    onChange(date);
-    setOpen(false);
-    setSmartText("");
-  };
-
-  const handleSmartSubmit = () => {
-    if (parsedSmartDate) {
-      onChange(parsedSmartDate);
-      setOpen(false);
-      setSmartText("");
-    }
-  };
-
-  const today = new Date();
-  const displayMonth = parsedSmartDate || (isValidDate ? selectedDate : undefined);
-
-  return (
-    <Popover
-      open={open}
-      onOpenChange={(o) => {
-        setOpen(o);
-        if (!o) setSmartText("");
-      }}
-    >
-      <PopoverTrigger
-        render={
-          <Button
-            id={id}
-            variant="outline"
-            disabled={disabled}
-            className={cn(
-              "h-8 w-full justify-between bg-background pr-2 pl-3 text-left font-normal text-xs",
-              !isValidDate && "text-muted-foreground",
-              className,
-            )}
-          />
-        }
-      >
-        <div className="flex items-center gap-2 truncate">
-          <CalendarIcon className="h-3.5 w-3.5 shrink-0 text-slate-500" />
-          <span className="truncate">
-            {isValidDate ? (
-              <>
-                <span className="font-medium text-foreground">
-                  {formatThaiFullDate(selectedDate)}
-                </span>
-                <span className="ml-1 text-muted-foreground text-xs">
-                  ({formatRelativeThaiDate(selectedDate)})
-                </span>
-              </>
-            ) : (
-              <span>{placeholder}</span>
-            )}
-          </span>
-        </div>
-        {allowClear && isValidDate && !disabled && (
-          <span
-            role="button"
-            tabIndex={0}
-            className="ml-1 cursor-pointer rounded p-0.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
-            onClick={(e) => {
-              e.stopPropagation();
-              onChange(null);
-            }}
-          >
-            <X className="h-3.5 w-3.5" />
-          </span>
-        )}
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-[320px] border bg-background p-3 shadow-xl sm:w-[340px]"
-        align="start"
-      >
-        {/* Smart Date Text Input */}
-        {showSmartInput && (
-          <div className="mb-3 flex flex-col gap-1.5 border-b pb-2.5">
-            <InputGroup className="h-8">
-              <InputGroupInput
-                value={smartText}
-                onChange={(e) => setSmartText(e.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    handleSmartSubmit();
-                  }
-                }}
-                placeholder="เช่น 1/7, 1/7/25, 1-7-2568..."
-                className="h-8 text-xs"
-              />
-              <InputGroupAddon align="inline-end">
-                <InputGroupButton
-                  type="submit"
-                  variant="default"
-                  size="xs"
-                  onClick={handleSmartSubmit}
-                  disabled={!parsedSmartDate}
-                >
-                  ตกลง
-                </InputGroupButton>
-              </InputGroupAddon>
-            </InputGroup>
-            {parsedSmartDate && (
-              <span className="flex items-center gap-1 font-medium text-emerald-600 text-xs">
-                <Check className="size-3" />
-                {formatThaiFullDate(parsedSmartDate)}
-              </span>
-            )}
-          </div>
-        )}
-
-        {/* Quick Presets Section (Flex Wrap & Clean Spacing) */}
-        {showPresets && (
-          <div className="mb-3 border-b pb-2.5">
-            <div className="mb-1.5 flex items-center gap-1 font-semibold text-muted-foreground text-xs">
-              <Clock className="h-3 w-3" />
-              Quick Preset
-            </div>
-            <div className="flex flex-wrap items-center gap-1.5">
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(today)}
-              >
-                Today
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(subDays(today, 1))}
-              >
-                Yesterday
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(addDays(today, 1))}
-              >
-                Tomorrow
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(addWeeks(today, 1))}
-              >
-                +1 Week
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(subWeeks(today, 1))}
-              >
-                -1 Week
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(addMonths(today, 1))}
-              >
-                +1 Month
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(subMonths(today, 1))}
-              >
-                -1 Month
-              </Button>
-            </div>
-          </div>
-        )}
-
-        {/* Visual DayPicker Calendar */}
-        <div className="flex w-full justify-center">
-          <Calendar
-            mode="single"
-            selected={isValidDate ? selectedDate : undefined}
-            onSelect={handleSelectDate}
-            disabled={disabled}
-            captionLayout="dropdown"
-            startMonth={new Date(1990, 0)}
-            endMonth={new Date(2040, 11)}
-            defaultMonth={displayMonth}
-            className="p-0"
-          />
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
+export {
+  DatePicker,
+  type DatePickerProps,
+  parseSmartDateInput,
+  toDateInputValue,
+} from "@suphark/ui/components/shared/date/date-picker";

package/src/index.ts

@@ -76,6 +76,12 @@ export {
 } from "./components/shared/confirm-dialog";
 export { CountBadge } from "./components/shared/count-badge";
 export { DataList, DataRow } from "./components/shared/data-list";
+export {
+  DatePicker,
+  type DatePickerProps,
+  parseSmartDateInput,
+  toDateInputValue,
+} from "./components/shared/date/date-picker";
 export { DateRangePicker } from "./components/shared/date/date-range-picker";
 export { DescriptionList } from "./components/shared/description-list";
 export {
@@ -403,7 +409,6 @@ export {
   ContextMenuSubTrigger,
   ContextMenuTrigger,
 } from "./components/ui/context-menu";
-export { DatePicker, parseSmartDateInput } from "./components/ui/date-picker";
 export {
   Dialog,
   DialogClose,

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,