2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T4fe6,"use client"; import { MotionConfig, animate, motion, useMotionValue, type MotionValue } from "motion/react"; import { GripVertical } from "lucide-react"; import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type ComponentProps, type KeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactNode, } from "react"; import { cn } from "@/lib/utils"; type Layout = "list" | "grid"; type Axis = "x" | "y"; type Point = { x: number; y: number }; type Box = { left: number; top: number; width: number; height: number }; type ListSnap = { box: Box; pad: Point; gap: Point; ids: string[]; rects: Record }; type Drag = { id: string; from: string; fromIndex: number; to: string; toIndex: number; mode: "pointer" | "keyboard"; offset: Point }; type ItemCtl = { el: HTMLElement; x: MotionValue; y: MotionValue }; type ListCtl = { el: HTMLElement; layout: Layout; axis: Axis; setExtra: (px: number) => void }; const SPRINGS = { smooth: { type: "spring", bounce: 0, duration: 0.35 }, bouncy: { type: "spring", bounce: 0.35, duration: 0.5 }, } as const; type Group = { ids: Record; dragId: string | null; lifted: string | null; spring: keyof typeof SPRINGS; version: number; pending: Map; registerItem: (id: string, ctl: ItemCtl) => () => void; registerList: (id: string, ctl: ListCtl) => () => void; pointerDown: (e: ReactPointerEvent, id: string) => void; keyDown: (e: KeyboardEvent, id: string) => void; cancel: () => void; instructions: string; }; const GroupContext = createContext(null); const ListContext = createContext(""); const ItemContext = createContext<{ id: string; bind: { onPointerDown: (e: ReactPointerEvent) => void; onKeyDown: (e: KeyboardEvent) => void } } | null>(null); const idOf = (item: unknown) => (typeof item === "object" && item !== null && "id" in item ? String((item as { id: unknown }).id) : String(item)); const box = (el: HTMLElement): Box => { const r = el.getBoundingClientRect(); return { left: r.left, top: r.top, width: r.width, height: r.height }; }; export interface SortableGroupProps { /** Items per list, keyed by each Sortable's id. Items are ids, or objects with an id. */ value: Record; onValueChange: (value: Record) => void; /** smooth: settles without overshoot · bouncy: a little spring when items land. */ spring?: keyof typeof SPRINGS; children: ReactNode; } /** Lets items move between several Sortable lists, e.g. kanban columns. */ export function SortableGroup({ value, onValueChange, spring = "smooth", children }: SortableGroupProps) { const ids = useMemo(() => Object.fromEntries(Object.entries(value).map(([k, v]) => [k, v.map(idOf)])), [value]); const byId = useMemo(() => new Map(Object.values(value).flat().map((v) => [idOf(v), v])), [value]); const items = useRef(new Map()); const lists = useRef(new Map()); const pending = useRef(new Map()); const snap = useRef>({}); const drag = useRef(null); const [dragId, setDragId] = useState(null); const [lifted, setLifted] = useState(null); const [version, setVersion] = useState(0); const [announce, setAnnounce] = useState(""); const transition = SPRINGS[spring]; const instructions = useId(); const listOf = useCallback((id: string) => Object.keys(ids).find((k) => ids[k].includes(id)), [ids]); const snapshot = () => { const out: Record = {}; for (const [key, list] of lists.current) { const style = getComputedStyle(list.el); const rects: Record = {}; for (const id of ids[key] ?? []) { const ctl = items.current.get(id); if (ctl) { const b = box(ctl.el); rects[id] = { ...b, left: b.left - ctl.x.get(), top: b.top - ctl.y.get() }; } } out[key] = { box: box(list.el), pad: { x: parseFloat(style.paddingLeft) || 0, y: parseFloat(style.paddingTop) || 0 }, gap: { x: parseFloat(style.columnGap) || 0, y: parseFloat(style.rowGap) || 0 }, ids: ids[key] ?? [], rects, }; } snap.current = out; }; const orders = (d: Drag) => { const next: Record = { ...ids, [d.from]: ids[d.from].filter((id) => id !== d.id) }; const target = [...next[d.to]]; target.splice(d.toIndex, 0, d.id); next[d.to] = target; return next; }; const dragBox = (d: Drag) => snap.current[d.from].rects[d.id]; const slot = (list: string, order: string[], k: number, d: Drag): Point => { const s = snap.current[list]; const ctl = lists.current.get(list); const size = (id: string) => (id === d.id ? dragBox(d) : s.rects[id]); const first = s.ids.find((id) => s.rects[id]); const origin = first ? { x: s.rects[first].left, y: s.rects[first].top } : { x: s.box.left + s.pad.x, y: s.box.top + s.pad.y }; if (ctl?.layout === "grid") { const cell = dragBox(d); const tops = s.ids.map((id) => s.rects[id]?.top); const cols = Math.max(1, tops.filter((t) => Math.abs(t - tops[0]) < 2).length || Math.floor((s.box.width - s.pad.x * 2 + s.gap.x) / (cell.width + s.gap.x))); return { x: origin.x + (k % cols) * (cell.width + s.gap.x), y: origin.y + Math.floor(k / cols) * (cell.height + s.gap.y) }; } const axis = ctl?.axis ?? "y"; let along = axis === "y" ? origin.y : origin.x; for (let i = 0; i < k; i++) { const r = size(order[i]); along += (axis === "y" ? r.height : r.width) + (axis === "y" ? s.gap.y : s.gap.x); } return axis === "y" ? { x: origin.x, y: along } : { x: along, y: origin.y }; }; const preview = (d: Drag) => { const next = orders(d); for (const [list, order] of Object.entries(ids)) { if (list === d.from || list === d.to) continue; for (const id of order) { const ctl = items.current.get(id); if (ctl && (ctl.x.get() || ctl.y.get())) { animate(ctl.x, 0, transition); animate(ctl.y, 0, transition); } } } for (const list of new Set([d.from, d.to])) { next[list].forEach((id, k) => { const ctl = items.current.get(id); const orig = id === d.id ? dragBox(d) : snap.current[list].rects[id]; if (!ctl || !orig || (id === d.id && d.mode === "pointer")) return; const p = slot(list, next[list], k, d); animate(ctl.x, p.x - orig.left, transition); animate(ctl.y, p.y - orig.top, transition); }); } for (const [key, list] of lists.current) { const r = dragBox(d); list.setExtra(key === d.to && d.to !== d.from ? (list.axis === "y" ? r.height : r.width) : 0); } }; const reset = () => { for (const ctl of items.current.values()) { animate(ctl.x, 0, transition); animate(ctl.y, 0, transition); } for (const list of lists.current.values()) list.setExtra(0); }; const finish = (commit: boolean) => { const d = drag.current; drag.current = null; setDragId(null); setLifted(null); if (!d) return; const moved = d.to !== d.from || d.toIndex !== d.fromIndex; if (!commit || !moved) { reset(); setAnnounce(commit ? "Dropped in place." : "Move cancelled."); if (d.mode === "keyboard") items.current.get(d.id)?.el.focus(); return; } const next = orders(d); for (const list of new Set([d.from, d.to])) { for (const id of next[list]) { const ctl = items.current.get(id); if (!ctl) continue; if (id === d.id && d.mode === "pointer") { const orig = dragBox(d); const p = slot(list, next[list], next[list].indexOf(id), d); pending.current.set(id, { x: orig.left + d.offset.x - p.x, y: orig.top + d.offset.y - p.y }); } else pending.current.set(id, { x: 0, y: 0, focus: id === d.id }); } } for (const list of lists.current.values()) list.setExtra(0); setVersion((v) => v + 1); setAnnounce(`Dropped at position ${d.toIndex + 1} of ${next[d.to].length}.`); onValueChange(Object.fromEntries(Object.entries(next).map(([k, v]) => [k, v.map((id) => byId.get(id) as T)]))); }; const pointerDown = (e: ReactPointerEvent, id: string) => { if (e.button !== 0 || drag.current) return; const target = e.target as HTMLElement; if (target.closest("input, textarea, select, a, button:not([data-sortable-handle]), [data-no-drag]")) return; const from = listOf(id); if (!from) return; const start = { x: e.clientX, y: e.clientY }; let active = false; const move = (ev: PointerEvent) => { const off = { x: ev.clientX - start.x, y: ev.clientY - start.y }; if (!active) { if (Math.hypot(off.x, off.y) < 4) return; active = true; snapshot(); const fromIndex = ids[from].indexOf(id); drag.current = { id, from, fromIndex, to: from, toIndex: fromIndex, mode: "pointer", offset: off }; setDragId(id); document.body.style.cursor = "grabbing"; } const d = drag.current!; d.offset = off; const ctl = items.current.get(id); ctl?.x.jump(off.x); ctl?.y.jump(off.y); const r = dragBox(d); const center = { x: r.left + off.x + r.width / 2, y: r.top + off.y + r.height / 2 }; const over = Object.keys(snap.current).find((k) => { const b = snap.current[k].box; return ev.clientX >= b.left && ev.clientX <= b.left + b.width && ev.clientY >= b.top - 24 && ev.clientY <= b.top + b.height + 48; }) ?? d.to; const s = snap.current[over]; const others = s.ids.filter((x) => x !== id); const list = lists.current.get(over); let index: number; if (list?.layout === "grid") { let best = Infinity; index = 0; for (let k = 0; k <= others.length; k++) { const p = slot(over, [...others.slice(0, k), id, ...others.slice(k)], k, d); const dist = Math.hypot(p.x - (r.left + off.x), p.y - (r.top + off.y)); if (dist < best) { best = dist; index = k; } } } else { const axis = list?.axis ?? "y"; index = others.filter((x) => { const o = s.rects[x]; return axis === "y" ? o.top + o.height / 2 < center.y : o.left + o.width / 2 < center.x; }).length; } if (over !== d.to || index !== d.toIndex) { d.to = over; d.toIndex = index; preview(d); } }; const up = () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", cancelUp); document.body.style.cursor = ""; if (active) finish(true); }; const cancelUp = () => { up(); finish(false); }; window.addEventListener("pointermove", move); window.addEventListener("pointerup", up); window.addEventListener("pointercancel", cancelUp); }; const keyDown = (e: KeyboardEvent, id: string) => { const d = drag.current; if (!d) { if (e.key !== " " && e.key !== "Enter") return; if ((e.target as HTMLElement).closest("input, textarea, select")) return; e.preventDefault(); const from = listOf(id); if (!from) return; snapshot(); const fromIndex = ids[from].indexOf(id); drag.current = { id, from, fromIndex, to: from, toIndex: fromIndex, mode: "keyboard", offset: { x: 0, y: 0 } }; setLifted(id); setDragId(id); setAnnounce(`Picked up. Position ${fromIndex + 1} of ${ids[from].length}. Use the arrow keys to move, Space to drop, Escape to cancel.`); return; } if (d.mode !== "keyboard") return; if (e.key === " " || e.key === "Enter") { e.preventDefault(); finish(true); return; } if (e.key === "Escape" || e.key === "Tab") { if (e.key === "Escape") e.preventDefault(); finish(false); return; } const list = lists.current.get(d.to); const keys = Object.keys(snap.current); const length = orders(d)[d.to].length; let { to, toIndex } = d; if (list?.layout === "grid") { const s = snap.current[d.to]; const tops = s.ids.map((x) => s.rects[x]?.top); const cols = Math.max(1, tops.filter((t) => Math.abs(t - tops[0]) < 2).length); const step = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -cols, ArrowDown: cols }[e.key]; if (step === undefined) return; toIndex = Math.min(length - 1, Math.max(0, toIndex + step)); } else { const back = list?.axis === "x" ? "ArrowLeft" : "ArrowUp"; const fwd = list?.axis === "x" ? "ArrowRight" : "ArrowDown"; const side: Record = list?.axis === "x" ? { ArrowUp: -1, ArrowDown: 1 } : { ArrowLeft: -1, ArrowRight: 1 }; if (e.key === back) toIndex = Math.max(0, toIndex - 1); else if (e.key === fwd) toIndex = Math.min(length - 1, toIndex + 1); else if (e.key in side && keys.length > 1) { const k = keys.indexOf(d.to) + side[e.key]; if (k < 0 || k >= keys.length) return; to = keys[k]; toIndex = Math.min(toIndex, to === d.from ? ids[to].length - 1 : ids[to].length); } else return; } e.preventDefault(); if (to === d.to && toIndex === d.toIndex) return; d.to = to; d.toIndex = toIndex; preview(d); setAnnounce(`Position ${toIndex + 1} of ${orders(d)[to].length}${keys.length > 1 ? ` in ${to}` : ""}.`); }; const registerItem = useCallback((id: string, ctl: ItemCtl) => { items.current.set(id, ctl); return () => { if (items.current.get(id) === ctl) items.current.delete(id); }; }, []); const registerList = useCallback((id: string, ctl: ListCtl) => { lists.current.set(id, ctl); return () => { if (lists.current.get(id) === ctl) lists.current.delete(id); }; }, []); return ( finish(false), instructions }} > {children} Press Space to pick up, the arrow keys to move, Space to drop and Escape to cancel. {announce} ); } export interface SortableProps extends Omit, "id" | "defaultValue"> { /** Inside a SortableGroup: which list this is. */ id?: string; /** On its own: the items, as ids or objects with an id. */ value?: T[]; onValueChange?: (value: T[]) => void; /** list: one row or column · grid: equal-sized cells that wrap. */ layout?: Layout; /** Direction of a list: y (default) or x. */ axis?: Axis; spring?: keyof typeof SPRINGS; } /** A list whose items can be dragged, or picked up with Space and moved with the arrow keys. */ export function Sortable({ id, value, onValueChange, layout = "list", axis = "y", spring, ...props }: SortableProps) { const group = useContext(GroupContext); if (group) return ; return ( onValueChange?.(v.list)} spring={spring}> ); } function SortableList({ id, layout, axis, className, children, ...props }: ComponentProps<"div"> & { id: string; layout: Layout; axis: Axis }) { const group = useContext(GroupContext)!; const ref = useRef(null); const [extra, setExtra] = useState(0); useEffect(() => (ref.current ? group.registerList(id, { el: ref.current, layout, axis, setExtra }) : undefined), [group.registerList, id, layout, axis]); return (

{children} {extra > 0 && ( )}

); } export interface SortableItemProps extends Omit, "id"> { id: string; /** Only a SortableHandle inside the item starts a drag. */ handle?: boolean; disabled?: boolean; } export function SortableItem({ id, handle, disabled, className, style, children, ...props }: SortableItemProps) { const group = useContext(GroupContext); if (!group) throw new Error("SortableItem must be used inside ."); const ref = useRef(null); const x = useMotionValue(0); const y = useMotionValue(0); const dragging = group.dragId === id; const { registerItem, pending, version } = group; useLayoutEffect(() => (ref.current ? registerItem(id, { el: ref.current, x, y }) : undefined), [registerItem, id, x, y]); useLayoutEffect(() => { const p = pending.get(id); if (!p) return; pending.delete(id); x.jump(p.x); y.jump(p.y); if (p.x || p.y) { animate(x, 0, SPRINGS[group.spring]); animate(y, 0, SPRINGS[group.spring]); } if (p.focus) (ref.current?.querySelector("[data-sortable-handle]") ?? ref.current)?.focus(); }, [version, id, pending, x, y, group.spring]); const bind = { onPointerDown: (e: ReactPointerEvent) => !disabled && group.pointerDown(e, id), onKeyDown: (e: KeyboardEvent) => !disabled && group.keyDown(e, id), }; return ( !handle && group.lifted === id && !e.currentTarget.contains(e.relatedTarget as Node) && group.cancel()} animate={{ scale: dragging ? 1.03 : 1 }} transition={SPRINGS[group.spring]} style={{ x, y, zIndex: dragging ? 20 : undefined, ...style }} className={cn("relative outline-none", !handle && !disabled && "cursor-grab touch-none select-none active:cursor-grabbing", className)} {...props} > {children} ); } export function SortableHandle({ className, children, ...props }: ComponentProps<"button">) { const item = useContext(ItemContext); const group = useContext(GroupContext); if (!item || !group) throw new Error("SortableHandle must be used inside ."); return ( ); } export default Sortable; 2e:T3c337,

"use client";

import { MotionConfig, animate, motion, useMotionValue, type MotionValue } from "motion/react";
import { GripVertical } from "lucide-react";
import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useId,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
  type ComponentProps,
  type KeyboardEvent,
  type PointerEvent as ReactPointerEvent,
  type ReactNode,
} from "react";
import { cn } from "@/lib/utils";

type Layout = "list" | "grid";
type Axis = "x" | "y";
type Point = { x: number; y: number };
type Box = { left: number; top: number; width: number; height: number };

type ListSnap = { box: Box; pad: Point; gap: Point; ids: string[]; rects: Record<string, Box> };
type Drag = { id: string; from: string; fromIndex: number; to: string; toIndex: number; mode: "pointer" | "keyboard"; offset: Point };
type ItemCtl = { el: HTMLElement; x: MotionValue<number>; y: MotionValue<number> };
type ListCtl = { el: HTMLElement; layout: Layout; axis: Axis; setExtra: (px: number) => void };

const SPRINGS = {
  smooth: { type: "spring", bounce: 0, duration: 0.35 },
  bouncy: { type: "spring", bounce: 0.35, duration: 0.5 },
} as const;

type Group = {
  ids: Record<string, string[]>;
  dragId: string | null;
  lifted: string | null;
  spring: keyof typeof SPRINGS;
  version: number;
  pending: Map<string, Point & { focus?: boolean }>;
  registerItem: (id: string, ctl: ItemCtl) => () => void;
  registerList: (id: string, ctl: ListCtl) => () => void;
  pointerDown: (e: ReactPointerEvent, id: string) => void;
  keyDown: (e: KeyboardEvent, id: string) => void;
  cancel: () => void;
  instructions: string;
};

const GroupContext = createContext<Group | null>(null);
const ListContext = createContext<string>("");
const ItemContext = createContext<{ id: string; bind: { onPointerDown: (e: ReactPointerEvent) => void; onKeyDown: (e: KeyboardEvent) => void } } | null>(null);

const idOf = (item: unknown) => (typeof item === "object" && item !== null && "id" in item ? String((item as { id: unknown }).id) : String(item));
const box = (el: HTMLElement): Box => {
  const r = el.getBoundingClientRect();
  return { left: r.left, top: r.top, width: r.width, height: r.height };
};

export interface SortableGroupProps<T> {
  /** Items per list, keyed by each Sortable's id. Items are ids, or objects with an id. */
  value: Record<string, T[]>;
  onValueChange: (value: Record<string, T[]>) => void;
  /** smooth: settles without overshoot · bouncy: a little spring when items land. */
  spring?: keyof typeof SPRINGS;
  children: ReactNode;
}

/** Lets items move between several Sortable lists, e.g. kanban columns. */
export function SortableGroup<T>({ value, onValueChange, spring = "smooth", children }: SortableGroupProps<T>) {
  const ids = useMemo(() => Object.fromEntries(Object.entries(value).map(([k, v]) => [k, v.map(idOf)])), [value]);
  const byId = useMemo(() => new Map(Object.values(value).flat().map((v) => [idOf(v), v])), [value]);
  const items = useRef(new Map<string, ItemCtl>());
  const lists = useRef(new Map<string, ListCtl>());
  const pending = useRef(new Map<string, Point & { focus?: boolean }>());
  const snap = useRef<Record<string, ListSnap>>({});
  const drag = useRef<Drag | null>(null);
  const [dragId, setDragId] = useState<string | null>(null);
  const [lifted, setLifted] = useState<string | null>(null);
  const [version, setVersion] = useState(0);
  const [announce, setAnnounce] = useState("");
  const transition = SPRINGS[spring];
  const instructions = useId();

  const listOf = useCallback((id: string) => Object.keys(ids).find((k) => ids[k].includes(id)), [ids]);

  const snapshot = () => {
    const out: Record<string, ListSnap> = {};
    for (const [key, list] of lists.current) {
      const style = getComputedStyle(list.el);
      const rects: Record<string, Box> = {};
      for (const id of ids[key] ?? []) {
        const ctl = items.current.get(id);
        if (ctl) {
          const b = box(ctl.el);
          rects[id] = { ...b, left: b.left - ctl.x.get(), top: b.top - ctl.y.get() };
        }
      }
      out[key] = {
        box: box(list.el),
        pad: { x: parseFloat(style.paddingLeft) || 0, y: parseFloat(style.paddingTop) || 0 },
        gap: { x: parseFloat(style.columnGap) || 0, y: parseFloat(style.rowGap) || 0 },
        ids: ids[key] ?? [],
        rects,
      };
    }
    snap.current = out;
  };

  const orders = (d: Drag) => {
    const next: Record<string, string[]> = { ...ids, [d.from]: ids[d.from].filter((id) => id !== d.id) };
    const target = [...next[d.to]];
    target.splice(d.toIndex, 0, d.id);
    next[d.to] = target;
    return next;
  };

  const dragBox = (d: Drag) => snap.current[d.from].rects[d.id];

  const slot = (list: string, order: string[], k: number, d: Drag): Point => {
    const s = snap.current[list];
    const ctl = lists.current.get(list);
    const size = (id: string) => (id === d.id ? dragBox(d) : s.rects[id]);
    const first = s.ids.find((id) => s.rects[id]);
    const origin = first ? { x: s.rects[first].left, y: s.rects[first].top } : { x: s.box.left + s.pad.x, y: s.box.top + s.pad.y };
    if (ctl?.layout === "grid") {
      const cell = dragBox(d);
      const tops = s.ids.map((id) => s.rects[id]?.top);
      const cols = Math.max(1, tops.filter((t) => Math.abs(t - tops[0]) < 2).length || Math.floor((s.box.width - s.pad.x * 2 + s.gap.x) / (cell.width + s.gap.x)));
      return { x: origin.x + (k % cols) * (cell.width + s.gap.x), y: origin.y + Math.floor(k / cols) * (cell.height + s.gap.y) };
    }
    const axis = ctl?.axis ?? "y";
    let along = axis === "y" ? origin.y : origin.x;
    for (let i = 0; i < k; i++) {
      const r = size(order[i]);
      along += (axis === "y" ? r.height : r.width) + (axis === "y" ? s.gap.y : s.gap.x);
    }
    return axis === "y" ? { x: origin.x, y: along } : { x: along, y: origin.y };
  };

  const preview = (d: Drag) => {
    const next = orders(d);
    for (const [list, order] of Object.entries(ids)) {
      if (list === d.from || list === d.to) continue;
      for (const id of order) {
        const ctl = items.current.get(id);
        if (ctl && (ctl.x.get() || ctl.y.get())) {
          animate(ctl.x, 0, transition);
          animate(ctl.y, 0, transition);
        }
      }
    }
    for (const list of new Set([d.from, d.to])) {
      next[list].forEach((id, k) => {
        const ctl = items.current.get(id);
        const orig = id === d.id ? dragBox(d) : snap.current[list].rects[id];
        if (!ctl || !orig || (id === d.id && d.mode === "pointer")) return;
        const p = slot(list, next[list], k, d);
        animate(ctl.x, p.x - orig.left, transition);
        animate(ctl.y, p.y - orig.top, transition);
      });
    }
    for (const [key, list] of lists.current) {
      const r = dragBox(d);
      list.setExtra(key === d.to && d.to !== d.from ? (list.axis === "y" ? r.height : r.width) : 0);
    }
  };

  const reset = () => {
    for (const ctl of items.current.values()) {
      animate(ctl.x, 0, transition);
      animate(ctl.y, 0, transition);
    }
    for (const list of lists.current.values()) list.setExtra(0);
  };

  const finish = (commit: boolean) => {
    const d = drag.current;
    drag.current = null;
    setDragId(null);
    setLifted(null);
    if (!d) return;
    const moved = d.to !== d.from || d.toIndex !== d.fromIndex;
    if (!commit || !moved) {
      reset();
      setAnnounce(commit ? "Dropped in place." : "Move cancelled.");
      if (d.mode === "keyboard") items.current.get(d.id)?.el.focus();
      return;
    }
    const next = orders(d);
    for (const list of new Set([d.from, d.to])) {
      for (const id of next[list]) {
        const ctl = items.current.get(id);
        if (!ctl) continue;
        if (id === d.id && d.mode === "pointer") {
          const orig = dragBox(d);
          const p = slot(list, next[list], next[list].indexOf(id), d);
          pending.current.set(id, { x: orig.left + d.offset.x - p.x, y: orig.top + d.offset.y - p.y });
        } else pending.current.set(id, { x: 0, y: 0, focus: id === d.id });
      }
    }
    for (const list of lists.current.values()) list.setExtra(0);
    setVersion((v) => v + 1);
    setAnnounce(`Dropped at position ${d.toIndex + 1} of ${next[d.to].length}.`);
    onValueChange(Object.fromEntries(Object.entries(next).map(([k, v]) => [k, v.map((id) => byId.get(id) as T)])));
  };

  const pointerDown = (e: ReactPointerEvent, id: string) => {
    if (e.button !== 0 || drag.current) return;
    const target = e.target as HTMLElement;
    if (target.closest("input, textarea, select, a, button:not([data-sortable-handle]), [data-no-drag]")) return;
    const from = listOf(id);
    if (!from) return;
    const start = { x: e.clientX, y: e.clientY };
    let active = false;
    const move = (ev: PointerEvent) => {
      const off = { x: ev.clientX - start.x, y: ev.clientY - start.y };
      if (!active) {
        if (Math.hypot(off.x, off.y) < 4) return;
        active = true;
        snapshot();
        const fromIndex = ids[from].indexOf(id);
        drag.current = { id, from, fromIndex, to: from, toIndex: fromIndex, mode: "pointer", offset: off };
        setDragId(id);
        document.body.style.cursor = "grabbing";
      }
      const d = drag.current!;
      d.offset = off;
      const ctl = items.current.get(id);
      ctl?.x.jump(off.x);
      ctl?.y.jump(off.y);
      const r = dragBox(d);
      const center = { x: r.left + off.x + r.width / 2, y: r.top + off.y + r.height / 2 };
      const over =
        Object.keys(snap.current).find((k) => {
          const b = snap.current[k].box;
          return ev.clientX >= b.left && ev.clientX <= b.left + b.width && ev.clientY >= b.top - 24 && ev.clientY <= b.top + b.height + 48;
        }) ?? d.to;
      const s = snap.current[over];
      const others = s.ids.filter((x) => x !== id);
      const list = lists.current.get(over);
      let index: number;
      if (list?.layout === "grid") {
        let best = Infinity;
        index = 0;
        for (let k = 0; k <= others.length; k++) {
          const p = slot(over, [...others.slice(0, k), id, ...others.slice(k)], k, d);
          const dist = Math.hypot(p.x - (r.left + off.x), p.y - (r.top + off.y));
          if (dist < best) {
            best = dist;
            index = k;
          }
        }
      } else {
        const axis = list?.axis ?? "y";
        index = others.filter((x) => {
          const o = s.rects[x];
          return axis === "y" ? o.top + o.height / 2 < center.y : o.left + o.width / 2 < center.x;
        }).length;
      }
      if (over !== d.to || index !== d.toIndex) {
        d.to = over;
        d.toIndex = index;
        preview(d);
      }
    };
    const up = () => {
      window.removeEventListener("pointermove", move);
      window.removeEventListener("pointerup", up);
      window.removeEventListener("pointercancel", cancelUp);
      document.body.style.cursor = "";
      if (active) finish(true);
    };
    const cancelUp = () => {
      up();
      finish(false);
    };
    window.addEventListener("pointermove", move);
    window.addEventListener("pointerup", up);
    window.addEventListener("pointercancel", cancelUp);
  };

  const keyDown = (e: KeyboardEvent, id: string) => {
    const d = drag.current;
    if (!d) {
      if (e.key !== " " && e.key !== "Enter") return;
      if ((e.target as HTMLElement).closest("input, textarea, select")) return;
      e.preventDefault();
      const from = listOf(id);
      if (!from) return;
      snapshot();
      const fromIndex = ids[from].indexOf(id);
      drag.current = { id, from, fromIndex, to: from, toIndex: fromIndex, mode: "keyboard", offset: { x: 0, y: 0 } };
      setLifted(id);
      setDragId(id);
      setAnnounce(`Picked up. Position ${fromIndex + 1} of ${ids[from].length}. Use the arrow keys to move, Space to drop, Escape to cancel.`);
      return;
    }
    if (d.mode !== "keyboard") return;
    if (e.key === " " || e.key === "Enter") {
      e.preventDefault();
      finish(true);
      return;
    }
    if (e.key === "Escape" || e.key === "Tab") {
      if (e.key === "Escape") e.preventDefault();
      finish(false);
      return;
    }
    const list = lists.current.get(d.to);
    const keys = Object.keys(snap.current);
    const length = orders(d)[d.to].length;
    let { to, toIndex } = d;
    if (list?.layout === "grid") {
      const s = snap.current[d.to];
      const tops = s.ids.map((x) => s.rects[x]?.top);
      const cols = Math.max(1, tops.filter((t) => Math.abs(t - tops[0]) < 2).length);
      const step = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -cols, ArrowDown: cols }[e.key];
      if (step === undefined) return;
      toIndex = Math.min(length - 1, Math.max(0, toIndex + step));
    } else {
      const back = list?.axis === "x" ? "ArrowLeft" : "ArrowUp";
      const fwd = list?.axis === "x" ? "ArrowRight" : "ArrowDown";
      const side: Record<string, number> = list?.axis === "x" ? { ArrowUp: -1, ArrowDown: 1 } : { ArrowLeft: -1, ArrowRight: 1 };
      if (e.key === back) toIndex = Math.max(0, toIndex - 1);
      else if (e.key === fwd) toIndex = Math.min(length - 1, toIndex + 1);
      else if (e.key in side && keys.length > 1) {
        const k = keys.indexOf(d.to) + side[e.key];
        if (k < 0 || k >= keys.length) return;
        to = keys[k];
        toIndex = Math.min(toIndex, to === d.from ? ids[to].length - 1 : ids[to].length);
      } else return;
    }
    e.preventDefault();
    if (to === d.to && toIndex === d.toIndex) return;
    d.to = to;
    d.toIndex = toIndex;
    preview(d);
    setAnnounce(`Position ${toIndex + 1} of ${orders(d)[to].length}${keys.length > 1 ? ` in ${to}` : ""}.`);
  };

  const registerItem = useCallback((id: string, ctl: ItemCtl) => {
    items.current.set(id, ctl);
    return () => {
      if (items.current.get(id) === ctl) items.current.delete(id);
    };
  }, []);
  const registerList = useCallback((id: string, ctl: ListCtl) => {
    lists.current.set(id, ctl);
    return () => {
      if (lists.current.get(id) === ctl) lists.current.delete(id);
    };
  }, []);

  return (
    <GroupContext.Provider
      value={{ ids, dragId, lifted, spring, version, pending: pending.current, registerItem, registerList, pointerDown, keyDown, cancel: () => finish(false), instructions }}
    >
      <MotionConfig reducedMotion="user">{children}</MotionConfig>
      <span id={instructions} className="sr-only">
        Press Space to pick up, the arrow keys to move, Space to drop and Escape to cancel.
      </span>
      <span aria-live="assertive" className="sr-only">
        {announce}
      </span>
    </GroupContext.Provider>
  );
}

export interface SortableProps<T> extends Omit<ComponentProps<"div">, "id" | "defaultValue"> {
  /** Inside a SortableGroup: which list this is. */
  id?: string;
  /** On its own: the items, as ids or objects with an id. */
  value?: T[];
  onValueChange?: (value: T[]) => void;
  /** list: one row or column · grid: equal-sized cells that wrap. */
  layout?: Layout;
  /** Direction of a list: y (default) or x. */
  axis?: Axis;
  spring?: keyof typeof SPRINGS;
}

/** A list whose items can be dragged, or picked up with Space and moved with the arrow keys. */
export function Sortable<T>({ id, value, onValueChange, layout = "list", axis = "y", spring, ...props }: SortableProps<T>) {
  const group = useContext(GroupContext);
  if (group) return <SortableList id={id ?? ""} layout={layout} axis={axis} {...props} />;
  return (
    <SortableGroup value={{ list: value ?? [] }} onValueChange={(v) => onValueChange?.(v.list)} spring={spring}>
      <SortableList id="list" layout={layout} axis={axis} {...props} />
    </SortableGroup>
  );
}

function SortableList({ id, layout, axis, className, children, ...props }: ComponentProps<"div"> & { id: string; layout: Layout; axis: Axis }) {
  const group = useContext(GroupContext)!;
  const ref = useRef<HTMLDivElement>(null);
  const [extra, setExtra] = useState(0);
  useEffect(() => (ref.current ? group.registerList(id, { el: ref.current, layout, axis, setExtra }) : undefined), [group.registerList, id, layout, axis]);
  return (
    <div ref={ref} role="list" data-sortable-list={id} className={cn(layout === "grid" ? "grid" : cn("flex", axis === "y" ? "flex-col" : "flex-row"), className)} {...props}>
      <ListContext.Provider value={id}>{children}</ListContext.Provider>
      {extra > 0 && (
        <motion.div
          aria-hidden
          className="shrink-0"
          initial={axis === "y" ? { height: 0 } : { width: 0 }}
          animate={axis === "y" ? { height: extra } : { width: extra }}
          transition={SPRINGS[group.spring]}
        />
      )}
    </div>
  );
}

export interface SortableItemProps extends Omit<ComponentProps<typeof motion.div>, "id"> {
  id: string;
  /** Only a SortableHandle inside the item starts a drag. */
  handle?: boolean;
  disabled?: boolean;
}

export function SortableItem({ id, handle, disabled, className, style, children, ...props }: SortableItemProps) {
  const group = useContext(GroupContext);
  if (!group) throw new Error("SortableItem must be used inside <Sortable>.");
  const ref = useRef<HTMLDivElement>(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const dragging = group.dragId === id;
  const { registerItem, pending, version } = group;

  useLayoutEffect(() => (ref.current ? registerItem(id, { el: ref.current, x, y }) : undefined), [registerItem, id, x, y]);
  useLayoutEffect(() => {
    const p = pending.get(id);
    if (!p) return;
    pending.delete(id);
    x.jump(p.x);
    y.jump(p.y);
    if (p.x || p.y) {
      animate(x, 0, SPRINGS[group.spring]);
      animate(y, 0, SPRINGS[group.spring]);
    }
    if (p.focus) (ref.current?.querySelector<HTMLElement>("[data-sortable-handle]") ?? ref.current)?.focus();
  }, [version, id, pending, x, y, group.spring]);

  const bind = {
    onPointerDown: (e: ReactPointerEvent) => !disabled && group.pointerDown(e, id),
    onKeyDown: (e: KeyboardEvent) => !disabled && group.keyDown(e, id),
  };
  return (
    <ItemContext.Provider value={{ id, bind }}>
      <motion.div
        ref={ref}
        role="listitem"
        data-sortable-item={id}
        data-dragging={dragging || undefined}
        data-lifted={group.lifted === id || undefined}
        tabIndex={handle || disabled ? undefined : 0}
        aria-roledescription={handle ? undefined : "sortable item"}
        aria-describedby={handle ? undefined : group.instructions}
        {...(handle ? {} : bind)}
        onBlur={(e) => !handle && group.lifted === id && !e.currentTarget.contains(e.relatedTarget as Node) && group.cancel()}
        animate={{ scale: dragging ? 1.03 : 1 }}
        transition={SPRINGS[group.spring]}
        style={{ x, y, zIndex: dragging ? 20 : undefined, ...style }}
        className={cn("relative outline-none", !handle && !disabled && "cursor-grab touch-none select-none active:cursor-grabbing", className)}
        {...props}
      >
        {children}
      </motion.div>
    </ItemContext.Provider>
  );
}

export function SortableHandle({ className, children, ...props }: ComponentProps<"button">) {
  const item = useContext(ItemContext);
  const group = useContext(GroupContext);
  if (!item || !group) throw new Error("SortableHandle must be used inside <SortableItem handle>.");
  return (
    <button
      type="button"
      data-sortable-handle=""
      aria-label="Drag to reorder"
      aria-roledescription="sortable handle"
      aria-describedby={group.instructions}
      aria-pressed={group.lifted === item.id}
      {...item.bind}
      onBlur={() => group.lifted === item.id && group.cancel()}
      className={cn(
        "flex size-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-[8px] text-neutral-400 outline-none transition-colors hover:bg-neutral-950/[0.05] hover:text-neutral-700 focus-visible:bg-neutral-950/[0.07] focus-visible:text-neutral-900 active:cursor-grabbing aria-pressed:bg-neutral-950/[0.08] aria-pressed:text-neutral-950 dark:hover:bg-white/[0.08] dark:hover:text-neutral-200 dark:focus-visible:bg-white/[0.1] dark:aria-pressed:bg-white/[0.12] dark:aria-pressed:text-white",
        className,
      )}
      {...props}
    >
      {children ?? <GripVertical className="size-4" />}
    </button>
  );
}

export default Sortable;

2f:T955,"use client"; import { BarChart3, CalendarDays, Inbox, LayoutGrid, Users } from "lucide-react"; import { useState } from "react"; import { Sortable, SortableItem } from "@/components/scalar-ui/sortable"; const initial = [ { id: "inbox", name: "Inbox", icon: Inbox, count: 12 }, { id: "calendar", name: "Calendar", icon: CalendarDays }, { id: "projects", name: "Projects", icon: LayoutGrid, count: 4 }, { id: "reports", name: "Reports", icon: BarChart3 }, { id: "team", name: "Team", icon: Users }, ]; export default function Demo() { const [items, setItems] = useState(initial); return (

Favourites

{items.map(({ id, name, icon: Icon, count }, i) => ( {name} {count && {count}} {i + 1} ))}

Drag a row, or focus one and press Space.

); } 30:T4310,

"use client";

import { BarChart3, CalendarDays, Inbox, LayoutGrid, Users } from "lucide-react";
import { useState } from "react";
import { Sortable, SortableItem } from "@/components/scalar-ui/sortable";

const initial = [
  { id: "inbox", name: "Inbox", icon: Inbox, count: 12 },
  { id: "calendar", name: "Calendar", icon: CalendarDays },
  { id: "projects", name: "Projects", icon: LayoutGrid, count: 4 },
  { id: "reports", name: "Reports", icon: BarChart3 },
  { id: "team", name: "Team", icon: Users },
];

export default function Demo() {
  const [items, setItems] = useState(initial);
  return (
    <div className="w-full max-w-[300px] rounded-[20px] bg-white p-2 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_8px_24px_-12px_rgb(0_0_0/0.12)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <p className="px-2.5 pb-2 pt-1.5 text-[11.5px] font-medium uppercase tracking-[0.06em] text-neutral-400">Favourites</p>
      <Sortable value={items} onValueChange={setItems} className="gap-1">
        {items.map(({ id, name, icon: Icon, count }, i) => (
          <SortableItem
            key={id}
            id={id}
            className="flex h-10 items-center gap-2.5 rounded-[12px] bg-white px-2.5 text-[13.5px] text-neutral-700 transition-shadow focus-visible:bg-neutral-950/[0.04] data-dragging:shadow-[0_10px_30px_-8px_rgb(0_0_0/0.25),0_1px_2px_rgb(0_0_0/0.08)] data-dragging:ring-1 data-dragging:ring-black/[0.06] dark:bg-neutral-900 dark:text-neutral-300 dark:focus-visible:bg-white/[0.06] dark:data-dragging:bg-neutral-800 dark:data-dragging:ring-white/[0.1]"
          >
            <span className="flex size-6 items-center justify-center rounded-[7px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.07] dark:bg-neutral-800 dark:ring-white/[0.1]">
              <Icon className="size-3.5 text-neutral-600 dark:text-neutral-300" />
            </span>
            <span className="flex-1 truncate">{name}</span>
            {count && <span className="text-[11.5px] tabular-nums text-neutral-400">{count}</span>}
            <span className="w-4 text-right font-mono text-[11px] text-neutral-300 dark:text-neutral-600">{i + 1}</span>
          </SortableItem>
        ))}
      </Sortable>
      <p className="px-2.5 pb-1 pt-2.5 text-[12px] text-neutral-400">Drag a row, or focus one and press Space.</p>
    </div>
  );
}

31:T772,"use client"; import { Check } from "lucide-react"; import { useState } from "react"; import { Sortable, SortableHandle, SortableItem } from "@/components/scalar-ui/sortable"; export default function Example() { const [tasks, setTasks] = useState([ { id: "a", title: "Write launch email", done: true }, { id: "b", title: "Record product walkthrough", done: false }, { id: "c", title: "Update pricing table", done: false }, { id: "d", title: "Schedule social posts", done: false }, ]); return ( {tasks.map((t) => ( {t.title} ))} ); } 32:T3f1a,

"use client";

import { Check } from "lucide-react";
import { useState } from "react";
import { Sortable, SortableHandle, SortableItem } from "@/components/scalar-ui/sortable";

export default function Example() {
  const [tasks, setTasks] = useState([
    { id: "a", title: "Write launch email", done: true },
    { id: "b", title: "Record product walkthrough", done: false },
    { id: "c", title: "Update pricing table", done: false },
    { id: "d", title: "Schedule social posts", done: false },
  ]);
  return (
    <Sortable value={tasks} onValueChange={setTasks} className="w-full max-w-[360px] gap-2">
      {tasks.map((t) => (
        <SortableItem
          key={t.id}
          id={t.id}
          handle
          className="flex h-11 items-center gap-2 rounded-[14px] bg-white pl-1.5 pr-3 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] transition-shadow data-dragging:shadow-[0_12px_32px_-8px_rgb(0_0_0/0.22)] dark:bg-neutral-900 dark:ring-white/[0.08]"
        >
          <SortableHandle />
          <button
            onClick={() => setTasks((list) => list.map((x) => (x.id === t.id ? { ...x, done: !x.done } : x)))}
            aria-label={t.done ? "Mark as not done" : "Mark as done"}
            className={
              t.done
                ? "flex size-[18px] items-center justify-center rounded-full bg-neutral-950 text-white dark:bg-white dark:text-neutral-950"
                : "size-[18px] rounded-full shadow-[inset_0_0_0_1.5px_rgb(0_0_0/0.2)] dark:shadow-[inset_0_0_0_1.5px_rgb(255_255_255/0.25)]"
            }
          >
            {t.done && <Check className="size-3" strokeWidth={3} />}
          </button>
          <span className={t.done ? "flex-1 truncate text-[13.5px] text-neutral-400 line-through" : "flex-1 truncate text-[13.5px] text-neutral-800 dark:text-neutral-200"}>{t.title}</span>
        </SortableItem>
      ))}
    </Sortable>
  );
}

33:T730,"use client"; import { useState } from "react"; import { Sortable, SortableItem } from "@/components/scalar-ui/sortable"; const photo = (id: string) => `https://images.unsplash.com/${id}?w=240&h=240&fit=crop&auto=format&q=70`; export default function Example() { const [photos, setPhotos] = useState([ { id: "photo-1501785888041-af3ef285b470", alt: "Lake and mountains" }, { id: "photo-1470071459604-3b5ec3a7fe05", alt: "Misty hills" }, { id: "photo-1469474968028-56623f02e42e", alt: "Sunlit valley" }, { id: "photo-1500530855697-b586d89ba3ee", alt: "Coastal road" }, { id: "photo-1441974231531-c6227db76b6e", alt: "Forest path" }, { id: "photo-1472214103451-9374bd1c798e", alt: "Green field" }, ]); return (

{photos.map((p, i) => ( {p.alt}

{i === 0 && Cover} ))}

The first photo is the cover.

); } 34:T39d5,

"use client";

import { useState } from "react";
import { Sortable, SortableItem } from "@/components/scalar-ui/sortable";

const photo = (id: string) => `https://images.unsplash.com/${id}?w=240&h=240&fit=crop&auto=format&q=70`;

export default function Example() {
  const [photos, setPhotos] = useState([
    { id: "photo-1501785888041-af3ef285b470", alt: "Lake and mountains" },
    { id: "photo-1470071459604-3b5ec3a7fe05", alt: "Misty hills" },
    { id: "photo-1469474968028-56623f02e42e", alt: "Sunlit valley" },
    { id: "photo-1500530855697-b586d89ba3ee", alt: "Coastal road" },
    { id: "photo-1441974231531-c6227db76b6e", alt: "Forest path" },
    { id: "photo-1472214103451-9374bd1c798e", alt: "Green field" },
  ]);
  return (
    <div className="flex flex-col items-center gap-3">
      <Sortable value={photos} onValueChange={setPhotos} layout="grid" spring="bouncy" className="grid-cols-3 gap-2.5">
        {photos.map((p, i) => (
          <SortableItem
            key={p.id}
            id={p.id}
            className="size-[92px] overflow-hidden rounded-[16px] bg-neutral-100 shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.06] transition-shadow focus-visible:ring-2 focus-visible:ring-neutral-950/30 data-dragging:shadow-[0_16px_36px_-10px_rgb(0_0_0/0.35)] dark:bg-neutral-800 dark:ring-white/[0.08] dark:focus-visible:ring-white/40"
          >
            <img src={photo(p.id)} alt={p.alt} draggable={false} className="size-full object-cover" />
            {i === 0 && <span className="absolute left-1.5 top-1.5 rounded-[6px] bg-white/90 px-1.5 py-0.5 text-[10.5px] font-medium text-neutral-900 backdrop-blur">Cover</span>}
          </SortableItem>
        ))}
      </Sortable>
      <p className="text-[12px] text-neutral-500 dark:text-neutral-400">The first photo is the cover.</p>
    </div>
  );
}

35:T452,"use client"; import { useState } from "react"; import { Sortable, SortableItem } from "@/components/scalar-ui/sortable"; export default function Example() { const [columns, setColumns] = useState(["Name", "Status", "Owner", "Due date", "Priority"]); return (

{columns.map((c) => ( {c} ))}

Column order: {columns.join(" → ")}

); } 36:T25c6,

"use client";

import { useState } from "react";
import { Sortable, SortableItem } from "@/components/scalar-ui/sortable";

export default function Example() {
  const [columns, setColumns] = useState(["Name", "Status", "Owner", "Due date", "Priority"]);
  return (
    <div className="flex flex-col items-center gap-3">
      <Sortable value={columns} onValueChange={setColumns} axis="x" className="gap-1.5 rounded-[14px] bg-neutral-100 p-1.5 dark:bg-white/[0.05]">
        {columns.map((c) => (
          <SortableItem
            key={c}
            id={c}
            className="flex h-8 items-center rounded-[10px] bg-white px-3 text-[13px] font-medium text-neutral-700 shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.05] focus-visible:ring-neutral-950/30 data-dragging:shadow-[0_10px_24px_-8px_rgb(0_0_0/0.3)] dark:bg-neutral-800 dark:text-neutral-200 dark:ring-white/[0.08]"
          >
            {c}
          </SortableItem>
        ))}
      </Sortable>
      <p className="text-[12px] text-neutral-500 dark:text-neutral-400">Column order: {columns.join(" → ")}</p>
    </div>
  );
}

37:T94e,"use client"; import { useState } from "react"; import { Sortable, SortableGroup, SortableItem } from "@/components/scalar-ui/sortable"; type Card = { id: string; title: string; tag: string }; const titles: Record = { todo: "To do", doing: "In progress", done: "Done" }; export default function Example() { const [board, setBoard] = useState>({ todo: [ { id: "1", title: "Audit onboarding emails", tag: "Growth" }, { id: "2", title: "Dark mode for charts", tag: "Design" }, { id: "3", title: "Rate-limit public API", tag: "Backend" }, ], doing: [ { id: "4", title: "Billing settings page", tag: "Frontend" }, { id: "5", title: "Usage alerts", tag: "Backend" }, ], done: [{ id: "6", title: "SSO with Okta", tag: "Security" }], }); return (

{Object.entries(board).map(([column, cards]) => (

{titles[column]} {cards.length}

{cards.map((c) => (

{c.title}

{c.tag} ))}

))}

); } 38:T5417,

"use client";

import { useState } from "react";
import { Sortable, SortableGroup, SortableItem } from "@/components/scalar-ui/sortable";

type Card = { id: string; title: string; tag: string };

const titles: Record<string, string> = { todo: "To do", doing: "In progress", done: "Done" };

export default function Example() {
  const [board, setBoard] = useState<Record<string, Card[]>>({
    todo: [
      { id: "1", title: "Audit onboarding emails", tag: "Growth" },
      { id: "2", title: "Dark mode for charts", tag: "Design" },
      { id: "3", title: "Rate-limit public API", tag: "Backend" },
    ],
    doing: [
      { id: "4", title: "Billing settings page", tag: "Frontend" },
      { id: "5", title: "Usage alerts", tag: "Backend" },
    ],
    done: [{ id: "6", title: "SSO with Okta", tag: "Security" }],
  });
  return (
    <SortableGroup value={board} onValueChange={setBoard} spring="bouncy">
      <div className="grid w-full max-w-[640px] grid-cols-3 gap-3">
        {Object.entries(board).map(([column, cards]) => (
          <div key={column} className="rounded-[18px] bg-neutral-100/80 p-2 dark:bg-white/[0.04]">
            <div className="flex items-center justify-between px-1.5 pb-2 pt-0.5">
              <span className="text-[12.5px] font-semibold text-neutral-800 dark:text-neutral-200">{titles[column]}</span>
              <span className="text-[11.5px] tabular-nums text-neutral-400">{cards.length}</span>
            </div>
            <Sortable id={column} className="min-h-[60px] gap-2">
              {cards.map((c) => (
                <SortableItem
                  key={c.id}
                  id={c.id}
                  className="rounded-[12px] bg-white p-2.5 shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.05] focus-visible:ring-neutral-950/30 data-dragging:shadow-[0_14px_32px_-10px_rgb(0_0_0/0.3)] dark:bg-neutral-900 dark:ring-white/[0.08]"
                >
                  <p className="text-[12.5px] font-medium leading-snug text-neutral-900 dark:text-white">{c.title}</p>
                  <span className="mt-2 inline-flex h-5 items-center rounded-[6px] bg-neutral-950/[0.05] px-1.5 text-[11px] text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300">{c.tag}</span>
                </SortableItem>
              ))}
            </Sortable>
          </div>
        ))}
      </div>
    </SortableGroup>
  );
}

29:["$","section","sortable",{"id":"sortable","aria-labelledby":"sortable-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"sortable-title","className":"sr-only","children":"Sortable"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"sortable","gated":{"unlocked":true,"files":[{"name":"sortable.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"handle":{"name":"handle.tsx","code":"$31","html":"$32"},"grid":{"name":"grid.tsx","code":"$33","html":"$34"},"horizontal":{"name":"horizontal.tsx","code":"$35","html":"$36"},"between-lists":{"name":"between-lists.tsx","code":"$37","html":"$38"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add sortable","shadcn":"npx shadcn@latest add https://scalarui.com/r/sortable.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L39","toolbar":"$L3a"}]}],["$L3b","$L3c","$L3d","$L3e"]]}]

Sortables

Sortables

Handle

Grid

Horizontal

Between Lists