@particle-academy/react-fancy 5.63.0 → 5.64.0

package/CHANGELOG.md

@@ -11,6 +11,37 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.64.0] - 2026-10-26
+
+### Added
+
+- **`ReorderableGrid`: cells reordered in place, row-major, by pointer or
+  keyboard.** Requested by MOIC for a field-order designer. A deal's details
+  are a 2-to-4-column grid of label/value cells, and the designer has to look
+  like that grid. Until now it was faked with one `Kanban.Column`'s vertical
+  list.
+  - **Order is ids.** `value` / `defaultValue` are `string[]`, and `onReorder`
+    gets the full new order once per committed move. It is never called for
+    the live preview, a cancel or a drop back in place. The order is
+    reconciled with `items`: unknown ids are ignored and new items are
+    appended, so a stale saved order never hides a cell.
+  - **Pointer:** a 4px threshold keeps clicks working. The other cells shift
+    live and wrap across rows. Pointer capture is on the root. A release
+    outside the grid cancels. Drag handles via `data-reorderable-handle` or
+    `state.handleProps`. The nearest scroll container auto-scrolls near its
+    edge.
+  - **Keyboard:** one tab stop. Space or Enter picks up and drops, arrows move
+    in 2-D, and Escape cancels through the `useEscapeKey` layer stack, so
+    inside a Modal the pick-up cancels before the Modal closes. An
+    `aria-live` region announces each step ("Moved to position 3 of 8, row 1
+    column 3"). Every message can be overridden through `labels`.
+  - **`locked: true`** pins a cell at its absolute index. Other cells flow
+    around it, and nothing can be dropped on it.
+  - **`moveItem(ids, from, to, { locked })`** is exported: the same rule with no
+    DOM, for agent bridges.
+  - Subpath `@particle-academy/react-fancy/reorderable-grid`. Docs:
+    `docs/ReorderableGrid.md`. New component only; nothing existing changed.
+
 ## [5.63.0] - 2026-10-26
 
 ### Added

package/README.md

@@ -165,6 +165,7 @@ npx vite build                      # Build demo app (verifies imports work)
 | Editor | Toolbar chrome wrapper for contentEditable, with a Source toggle to edit raw HTML/Markdown | [docs](docs/Editor.md) |
 | CodeView | Lightweight syntax-highlighted source view (HTML highlighted; fills height) | [docs](docs/CodeView.md) |
 | Kanban | Drag-and-drop board with columns and cards | [docs](docs/Kanban.md) |
+| ReorderableGrid | Row-major grid of cells reordered in place by pointer or keyboard, with pinned cells and a pure `moveItem` for agents | [docs](docs/ReorderableGrid.md) |
 | ContentRenderer | Markdown/HTML content renderer | [docs](docs/ContentRenderer.md) |
 
 ### Media Viewers

package/dist/chunk-DTOIO42M.js

@@ -0,0 +1,605 @@
+import { composeRefs } from './chunk-SV5BW3IA.js';
+import { useEscapeKey } from './chunk-YX6FTJ6N.js';
+import { useControllableState } from './chunk-EDYAXGUM.js';
+import { cn } from './chunk-MMW2JGKZ.js';
+import { forwardRef, useMemo, useCallback, useState, useRef, useId, useEffect, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ReorderableGrid/move-item.ts
+function lockPredicate(locked) {
+  if (!locked) return null;
+  if (typeof locked === "function") return locked;
+  const set = new Set(locked);
+  return set.size ? (id) => set.has(id) : null;
+}
+function moveItem(ids, fromIndex, toIndex, options = {}) {
+  const n = ids.length;
+  for (const [name, i] of [
+    ["fromIndex", fromIndex],
+    ["toIndex", toIndex]
+  ]) {
+    if (!Number.isInteger(i) || i < 0 || i >= n) {
+      throw new RangeError(`moveItem: ${name} ${i} is outside 0..${n - 1}`);
+    }
+  }
+  const out = ids.slice();
+  if (fromIndex === toIndex) return out;
+  const isLocked = lockPredicate(options.locked);
+  if (!isLocked) {
+    const [moved2] = out.splice(fromIndex, 1);
+    out.splice(toIndex, 0, moved2);
+    return out;
+  }
+  if (isLocked(ids[fromIndex]) || isLocked(ids[toIndex])) return out;
+  const slots = [];
+  for (let i = 0; i < n; i++) if (!isLocked(ids[i])) slots.push(i);
+  const free = slots.map((i) => ids[i]);
+  const [moved] = free.splice(slots.indexOf(fromIndex), 1);
+  free.splice(slots.indexOf(toIndex), 0, moved);
+  slots.forEach((slot, k) => {
+    out[slot] = free[k];
+  });
+  return out;
+}
+var COLUMN_CLASSES = [
+  "grid-cols-1",
+  "grid-cols-2",
+  "grid-cols-3",
+  "grid-cols-4",
+  "grid-cols-5",
+  "grid-cols-6",
+  "grid-cols-7",
+  "grid-cols-8",
+  "grid-cols-9",
+  "grid-cols-10",
+  "grid-cols-11",
+  "grid-cols-12"
+];
+var GAP_CLASSES = { none: "gap-0", sm: "gap-3", md: "gap-6", lg: "gap-10" };
+var FOCUS_RING = "ring-[color:var(--fancy-focus,var(--color-blue-500))] dark:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]";
+var CELL_BASE = "relative min-w-0 select-none touch-none outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--fancy-focus,var(--color-blue-500))] dark:focus-visible:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]";
+var CELL_STYLED = "rounded-lg border p-3 text-sm border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] bg-[color:var(--fancy-surface,var(--color-white))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]";
+var CELL_LOCKED_STYLED = "border-dashed bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]";
+var DRAG_THRESHOLD = 4;
+var EDGE = 48;
+var MAX_SCROLL_STEP = 18;
+var SHIFT_MS = 150;
+var INTERACTIVE = "input, textarea, select, button, a[href], [contenteditable=''], [contenteditable='true']";
+var DEFAULT_LABELS = {
+  instructions: "Press Space or Enter to pick up. Use the arrow keys to move, Space or Enter to drop, Escape to cancel.",
+  roleDescription: "reorderable item",
+  pickedUp: (c) => `Picked up ${c.label} at position ${c.position} of ${c.total}, row ${c.row} column ${c.column}. Arrow keys move it, Space or Enter drops it, Escape cancels`,
+  moved: (c) => `Moved to position ${c.position} of ${c.total}, row ${c.row} column ${c.column}`,
+  dropped: (c) => `Dropped ${c.label} at position ${c.position} of ${c.total}, row ${c.row} column ${c.column}`,
+  cancelled: (c) => `Cancelled. ${c.label} returned to position ${c.position} of ${c.total}, row ${c.row} column ${c.column}`,
+  locked: (c) => `${c.label} is locked and cannot be moved`
+};
+function resolveOrder(order, items) {
+  const ids = items.map((i) => i.id);
+  const known = new Set(ids);
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const id of order ?? []) {
+    if (known.has(id) && !seen.has(id)) {
+      seen.add(id);
+      out.push(id);
+    }
+  }
+  for (const id of ids) {
+    if (!seen.has(id)) {
+      seen.add(id);
+      out.push(id);
+    }
+  }
+  return out;
+}
+function sameOrder(a, b) {
+  return a.length === b.length && a.every((id, i) => id === b[i]);
+}
+function prefersReducedMotion() {
+  return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function scrollParent(el) {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const s = getComputedStyle(p);
+    if (/(auto|scroll)/.test(s.overflowY + s.overflowX)) {
+      if (p.scrollHeight > p.clientHeight || p.scrollWidth > p.clientWidth) return p;
+    }
+  }
+  return document.scrollingElement ?? null;
+}
+function ReorderableGridInner({
+  items,
+  value,
+  defaultValue,
+  onReorder,
+  renderItem,
+  columns = 2,
+  gap = "sm",
+  disabled = false,
+  label,
+  getItemLabel,
+  labels: labelOverrides,
+  unstyled = false,
+  cellClassName,
+  className,
+  ...props
+}, forwardedRef) {
+  const cols = Math.min(12, Math.max(1, Math.round(columns) || 1));
+  const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+  const [stored, setStored] = useControllableState(value, defaultValue, (next) => {
+    if (next) onReorder?.(next);
+  });
+  const committed = useMemo(() => resolveOrder(stored, items), [stored, items]);
+  const byId = useMemo(() => new Map(items.map((i) => [i.id, i])), [items]);
+  const lockedIds = useMemo(() => items.filter((i) => i.locked).map((i) => i.id), [items]);
+  const isLocked = useCallback((id) => byId.get(id)?.locked === true, [byId]);
+  const [session, setSessionState] = useState(null);
+  const sessionRef = useRef(null);
+  const setSession = useCallback((s) => {
+    sessionRef.current = s;
+    setSessionState(s);
+  }, []);
+  const previewOf = useCallback(
+    (s) => s.target === null || s.target === s.originIndex ? s.origin : moveItem(s.origin, s.originIndex, s.target, { locked: lockedIds }),
+    [lockedIds]
+  );
+  const shown = useMemo(
+    () => session ? resolveOrder(previewOf(session), items) : committed,
+    [session, previewOf, items, committed]
+  );
+  const shownRef = useRef(shown);
+  shownRef.current = shown;
+  const [announcement, setAnnouncement] = useState("");
+  const labelOf = useCallback(
+    (id) => {
+      const item = byId.get(id);
+      if (!item) return id;
+      if (getItemLabel) return getItemLabel(item);
+      const l = item.label;
+      return typeof l === "string" ? l : id;
+    },
+    [byId, getItemLabel]
+  );
+  const ctxAt = useCallback(
+    (id, index, total2) => ({
+      id,
+      label: labelOf(id),
+      position: index + 1,
+      total: total2,
+      row: Math.floor(index / cols) + 1,
+      column: index % cols + 1
+    }),
+    [labelOf, cols]
+  );
+  const rootRef = useRef(null);
+  const cellRefs = useRef(/* @__PURE__ */ new Map());
+  const cellRef = useCallback(
+    (id) => (el) => {
+      if (el) cellRefs.current.set(id, el);
+      else cellRefs.current.delete(id);
+    },
+    []
+  );
+  const instructionsId = useId();
+  const [activeId, setActiveId] = useState(null);
+  const tabStop = activeId !== null && shown.includes(activeId) ? activeId : shown[0];
+  const refocus = useRef(null);
+  const drag = useRef(null);
+  const pending = useRef(null);
+  const scrollFrame = useRef(null);
+  const settle = useCallback((id) => {
+    const el = cellRefs.current.get(id);
+    if (!el) return;
+    if (el.style.transform && !prefersReducedMotion()) {
+      el.style.transition = `transform ${SHIFT_MS}ms ease`;
+      window.setTimeout(() => {
+        if (!el.style.transform) el.style.transition = "";
+      }, SHIFT_MS + 50);
+    }
+    el.style.transform = "";
+  }, []);
+  const endPointer = useCallback(() => {
+    const d = drag.current;
+    drag.current = null;
+    pending.current = null;
+    if (scrollFrame.current !== null) {
+      cancelAnimationFrame(scrollFrame.current);
+      scrollFrame.current = null;
+    }
+    if (!d) return;
+    const root = rootRef.current;
+    if (root?.hasPointerCapture?.(d.pointerId)) root.releasePointerCapture?.(d.pointerId);
+    settle(d.id);
+  }, [settle]);
+  const cancel = useCallback(() => {
+    const s = sessionRef.current;
+    if (!s) return;
+    endPointer();
+    setSession(null);
+    if (s.mode === "keyboard") refocus.current = s.id;
+    setAnnouncement(labels.cancelled(ctxAt(s.id, s.originIndex, s.origin.length)));
+  }, [ctxAt, endPointer, labels, setSession]);
+  const drop = useCallback(() => {
+    const s = sessionRef.current;
+    if (!s) return;
+    if (s.target === null) {
+      cancel();
+      return;
+    }
+    const final = previewOf(s);
+    endPointer();
+    setSession(null);
+    if (s.mode === "keyboard") refocus.current = s.id;
+    setAnnouncement(labels.dropped(ctxAt(s.id, s.target, final.length)));
+    if (!sameOrder(final, s.origin)) setStored(final);
+  }, [cancel, ctxAt, endPointer, labels, previewOf, setSession, setStored]);
+  useEscapeKey(cancel, session !== null);
+  useEffect(() => {
+    if (disabled) cancel();
+  }, [disabled, cancel]);
+  useEffect(() => () => endPointer(), [endPointer]);
+  const begin = useCallback(
+    (id, mode) => {
+      const origin = shownRef.current;
+      const index = origin.indexOf(id);
+      if (index < 0) return false;
+      if (isLocked(id)) {
+        setAnnouncement(labels.locked(ctxAt(id, index, origin.length)));
+        return false;
+      }
+      setSession({ id, mode, origin, originIndex: index, target: index });
+      setAnnouncement(labels.pickedUp(ctxAt(id, index, origin.length)));
+      return true;
+    },
+    [ctxAt, isLocked, labels, setSession]
+  );
+  const retarget = useCallback(
+    (target) => {
+      const s = sessionRef.current;
+      if (!s || target === s.target) return;
+      setSession({ ...s, target });
+      if (target !== null) setAnnouncement(labels.moved(ctxAt(s.id, target, s.origin.length)));
+    },
+    [ctxAt, labels, setSession]
+  );
+  const step = useCallback(
+    (order, from, key, skipLocked) => {
+      const n = order.length;
+      const free = (i) => !skipLocked || !isLocked(order[i]);
+      const scan = (start, dir) => {
+        for (let i = start; i >= 0 && i < n; i += dir) if (free(i)) return i;
+        return null;
+      };
+      switch (key) {
+        case "ArrowRight":
+          return scan(from + 1, 1);
+        case "ArrowLeft":
+          return scan(from - 1, -1);
+        case "ArrowDown": {
+          let t = from + cols;
+          if (t > n - 1) {
+            if (Math.floor(from / cols) >= Math.floor((n - 1) / cols)) return null;
+            t = n - 1;
+          }
+          return scan(t, 1);
+        }
+        case "ArrowUp":
+          return from - cols < 0 ? null : scan(from - cols, -1);
+        case "Home":
+          return scan(0, 1);
+        case "End":
+          return scan(n - 1, -1);
+        default:
+          return null;
+      }
+    },
+    [cols, isLocked]
+  );
+  const onCellKeyDown = (e, id) => {
+    if (disabled || e.target !== e.currentTarget) return;
+    const s = sessionRef.current;
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      if (s?.mode === "keyboard") drop();
+      else if (!s) begin(id, "keyboard");
+      return;
+    }
+    if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return;
+    e.preventDefault();
+    if (s?.mode === "keyboard") {
+      if (s.target === null) return;
+      const t2 = step(shownRef.current, s.target, e.key, true);
+      if (t2 !== null) retarget(t2);
+      return;
+    }
+    if (s) return;
+    const order = shownRef.current;
+    const t = step(order, order.indexOf(id), e.key, false);
+    if (t === null) return;
+    const next = order[t];
+    setActiveId(next);
+    cellRefs.current.get(next)?.focus();
+  };
+  const toLocal = (clientX, clientY) => {
+    const root = rootRef.current;
+    const r = root.getBoundingClientRect();
+    return { x: clientX - r.left - root.clientLeft, y: clientY - r.top - root.clientTop, rect: r };
+  };
+  const hitTest = (clientX, clientY) => {
+    const s = sessionRef.current;
+    if (!s) return null;
+    const { x, y, rect } = toLocal(clientX, clientY);
+    if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) return null;
+    const order = shownRef.current;
+    let best = -1;
+    let bestDist = Infinity;
+    order.forEach((id, i) => {
+      const el = cellRefs.current.get(id);
+      if (!el) return;
+      const l = el.offsetLeft;
+      const t = el.offsetTop;
+      const dx = Math.max(l - x, 0, x - (l + el.offsetWidth));
+      const dy = Math.max(t - y, 0, y - (t + el.offsetHeight));
+      const dist = dx * dx + dy * dy;
+      if (dist < bestDist) {
+        bestDist = dist;
+        best = i;
+      }
+    });
+    if (best < 0) return s.target;
+    if (isLocked(order[best])) return s.target ?? s.originIndex;
+    return best;
+  };
+  const applyDragTransform = useCallback(() => {
+    const d = drag.current;
+    const root = rootRef.current;
+    if (!d || !root) return;
+    const el = cellRefs.current.get(d.id);
+    if (!el) return;
+    const r = root.getBoundingClientRect();
+    const px = d.clientX - r.left - root.clientLeft;
+    const py = d.clientY - r.top - root.clientTop;
+    const tx = d.startOffset.x + (px - d.startPos.x) - el.offsetLeft;
+    const ty = d.startOffset.y + (py - d.startPos.y) - el.offsetTop;
+    el.style.transition = "";
+    el.style.transform = `translate3d(${tx}px, ${ty}px, 0)`;
+  }, []);
+  const track = () => {
+    const d = drag.current;
+    if (!d) return;
+    retarget(hitTest(d.clientX, d.clientY));
+    applyDragTransform();
+  };
+  const autoScroll = () => {
+    const d = drag.current;
+    if (!d?.scroller || typeof requestAnimationFrame !== "function") return;
+    const sc = d.scroller;
+    const isDoc = sc === document.scrollingElement;
+    const box = isDoc ? { top: 0, left: 0, bottom: window.innerHeight, right: window.innerWidth } : sc.getBoundingClientRect();
+    const speed = (dist) => dist < EDGE ? Math.ceil((EDGE - dist) / EDGE * MAX_SCROLL_STEP) : 0;
+    let vy = speed(d.clientY - box.top) ? -speed(d.clientY - box.top) : speed(box.bottom - d.clientY);
+    let vx = speed(d.clientX - box.left) ? -speed(d.clientX - box.left) : speed(box.right - d.clientX);
+    if (vy < 0 && sc.scrollTop <= 0 || vy > 0 && sc.scrollTop + sc.clientHeight >= sc.scrollHeight) vy = 0;
+    if (vx < 0 && sc.scrollLeft <= 0 || vx > 0 && sc.scrollLeft + sc.clientWidth >= sc.scrollWidth) vx = 0;
+    if (!vx && !vy) {
+      scrollFrame.current = null;
+      return;
+    }
+    if (scrollFrame.current !== null) return;
+    scrollFrame.current = requestAnimationFrame(() => {
+      scrollFrame.current = null;
+      if (!drag.current) return;
+      sc.scrollTop += vy;
+      sc.scrollLeft += vx;
+      track();
+      autoScroll();
+    });
+  };
+  const onCellPointerDown = (e, id) => {
+    if (disabled || e.button !== 0 || sessionRef.current || isLocked(id)) return;
+    const cellEl = e.currentTarget;
+    const target = e.target;
+    const handle = target.closest("[data-reorderable-handle]");
+    if (handle && cellEl.contains(handle)) ; else if (cellEl.querySelector("[data-reorderable-handle]")) {
+      return;
+    } else {
+      const interactive = target.closest(INTERACTIVE);
+      if (interactive && interactive !== cellEl && cellEl.contains(interactive)) return;
+    }
+    pending.current = { id, pointerId: e.pointerId, clientX: e.clientX, clientY: e.clientY };
+  };
+  const onRootPointerMove = (e) => {
+    const p = pending.current;
+    if (p && p.pointerId === e.pointerId && !drag.current) {
+      if (Math.hypot(e.clientX - p.clientX, e.clientY - p.clientY) < DRAG_THRESHOLD) return;
+      const root = rootRef.current;
+      const el = cellRefs.current.get(p.id);
+      pending.current = null;
+      if (!root || !el || !begin(p.id, "pointer")) return;
+      root.setPointerCapture?.(e.pointerId);
+      window.getSelection?.()?.removeAllRanges();
+      const start = toLocal(p.clientX, p.clientY);
+      drag.current = {
+        id: p.id,
+        pointerId: e.pointerId,
+        startOffset: { x: el.offsetLeft, y: el.offsetTop },
+        startPos: { x: start.x, y: start.y },
+        clientX: e.clientX,
+        clientY: e.clientY,
+        scroller: scrollParent(root)
+      };
+    }
+    const d = drag.current;
+    if (!d || d.pointerId !== e.pointerId) return;
+    d.clientX = e.clientX;
+    d.clientY = e.clientY;
+    track();
+    autoScroll();
+  };
+  const onRootPointerUp = (e) => {
+    if (pending.current?.pointerId === e.pointerId) {
+      pending.current = null;
+      return;
+    }
+    const d = drag.current;
+    if (!d || d.pointerId !== e.pointerId) return;
+    d.clientX = e.clientX;
+    d.clientY = e.clientY;
+    const target = hitTest(e.clientX, e.clientY);
+    const s = sessionRef.current;
+    if (s && target !== s.target) {
+      sessionRef.current = { ...s, target };
+    }
+    drop();
+  };
+  const onRootPointerCancel = (e) => {
+    if (pending.current?.pointerId === e.pointerId) pending.current = null;
+    if (drag.current?.pointerId === e.pointerId) cancel();
+  };
+  const offsets = useRef(/* @__PURE__ */ new Map());
+  const shiftTimers = useRef(/* @__PURE__ */ new Map());
+  const shownKey = shown.join("\0");
+  useLayoutEffect(() => {
+    const prev = offsets.current;
+    const next = /* @__PURE__ */ new Map();
+    for (const [id, el] of cellRefs.current) next.set(id, { x: el.offsetLeft, y: el.offsetTop });
+    offsets.current = next;
+    if (prev.size && !prefersReducedMotion()) {
+      for (const [id, el] of cellRefs.current) {
+        if (id === drag.current?.id) continue;
+        const a = prev.get(id);
+        const b = next.get(id);
+        if (!a || !b || a.x === b.x && a.y === b.y) continue;
+        el.style.transition = "none";
+        el.style.transform = `translate3d(${a.x - b.x}px, ${a.y - b.y}px, 0)`;
+        void el.offsetWidth;
+        el.style.transition = `transform ${SHIFT_MS}ms ease`;
+        el.style.transform = "";
+        const old = shiftTimers.current.get(id);
+        if (old !== void 0) window.clearTimeout(old);
+        shiftTimers.current.set(
+          id,
+          window.setTimeout(() => {
+            shiftTimers.current.delete(id);
+            if (!el.style.transform) el.style.transition = "";
+          }, SHIFT_MS + 50)
+        );
+      }
+    }
+    applyDragTransform();
+    const s = sessionRef.current;
+    const keep = s?.mode === "keyboard" ? s.id : refocus.current;
+    refocus.current = null;
+    if (keep) {
+      const el = cellRefs.current.get(keep);
+      if (el && document.activeElement !== el) el.focus();
+    }
+  }, [shownKey, session, applyDragTransform]);
+  useEffect(() => {
+    const timers = shiftTimers.current;
+    return () => {
+      for (const t of timers.values()) window.clearTimeout(t);
+    };
+  }, []);
+  const state = session ? session.mode === "pointer" ? "dragging" : "picked-up" : "idle";
+  const dropIndex = session && session.target !== null ? session.target : void 0;
+  const total = shown.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref: composeRefs(rootRef, forwardedRef),
+      "data-react-fancy-reorderable-grid": "",
+      "data-columns": cols,
+      "data-state": state,
+      "data-drop-index": dropIndex,
+      "data-disabled": disabled ? "" : void 0,
+      role: "group",
+      "aria-label": label,
+      "aria-disabled": disabled || void 0,
+      onPointerMove: onRootPointerMove,
+      onPointerUp: onRootPointerUp,
+      onPointerCancel: onRootPointerCancel,
+      onLostPointerCapture: (e) => {
+        if (drag.current?.pointerId === e.pointerId) cancel();
+      },
+      className: cn(
+        "relative grid",
+        COLUMN_CLASSES[cols - 1],
+        GAP_CLASSES[gap],
+        session?.mode === "pointer" && "cursor-grabbing select-none",
+        disabled && "opacity-60",
+        className
+      ),
+      children: [
+        shown.map((id, index) => {
+          const item = byId.get(id);
+          if (!item) return null;
+          const locked = item.locked === true;
+          const active = session?.id === id;
+          const dragging = active && session?.mode === "pointer";
+          const pickedUp = active && session?.mode === "keyboard";
+          const dropTarget = active && dropIndex === index;
+          const outside = active && session?.target === null;
+          const itemState = {
+            index,
+            position: index + 1,
+            row: Math.floor(index / cols) + 1,
+            column: index % cols + 1,
+            total,
+            dragging,
+            pickedUp,
+            dropTarget,
+            locked,
+            disabled,
+            handleProps: { "data-reorderable-handle": "" }
+          };
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: cellRef(id),
+              "data-react-fancy-reorderable-grid-item": "",
+              "data-reorderable-id": id,
+              "data-index": index,
+              "data-state": dragging ? "dragging" : pickedUp ? "picked-up" : "idle",
+              "data-locked": locked ? "true" : void 0,
+              "data-drop-target": dropTarget ? "" : void 0,
+              role: "button",
+              "aria-roledescription": labels.roleDescription,
+              "aria-describedby": instructionsId,
+              "aria-pressed": active,
+              "aria-disabled": disabled || locked || void 0,
+              tabIndex: disabled ? -1 : id === tabStop ? 0 : -1,
+              onFocus: (e) => {
+                if (e.target === e.currentTarget) setActiveId(id);
+              },
+              onKeyDown: (e) => onCellKeyDown(e, id),
+              onPointerDown: (e) => onCellPointerDown(e, id),
+              className: cn(
+                CELL_BASE,
+                !unstyled && CELL_STYLED,
+                !unstyled && locked && CELL_LOCKED_STYLED,
+                locked || disabled ? "cursor-default" : "cursor-grab",
+                dragging && cn("z-10 cursor-grabbing shadow-lg ring-2", FOCUS_RING),
+                pickedUp && cn("z-10 shadow-md ring-2", FOCUS_RING),
+                outside && "opacity-60",
+                cellClassName
+              ),
+              children: renderItem ? renderItem(item, itemState) : labelOf(id)
+            },
+            id
+          );
+        }),
+        /* @__PURE__ */ jsx("div", { id: instructionsId, className: "sr-only", children: labels.instructions }),
+        /* @__PURE__ */ jsx("div", { "data-react-fancy-reorderable-grid-live": "", "aria-live": "assertive", "aria-atomic": "true", className: "sr-only", children: announcement })
+      ]
+    }
+  );
+}
+var ReorderableGrid = forwardRef(ReorderableGridInner);
+ReorderableGrid.displayName = "ReorderableGrid";
+
+export { ReorderableGrid, moveItem };
+//# sourceMappingURL=chunk-DTOIO42M.js.map
+//# sourceMappingURL=chunk-DTOIO42M.js.map