51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1ea9,"use client"; import { useCallback, useId, useRef, useState } from "react"; import { Reorder, useReducedMotion } from "motion/react"; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const INSTANT = { duration: 0 } as const; const moveItem = (list: readonly T[], from: number, to: number): T[] => { const next = [...list]; const [taken] = next.splice(from, 1); next.splice(to, 0, taken); return next; }; export type UseReorderListOptions = { items: readonly T[]; getId: (item: T) => string; getLabel: (item: T) => string; onReorder: (next: T[]) => void; onCommit?: (next: T[]) => void; disabled?: boolean; }; export function useReorderList({ items, getId, getLabel, onReorder, onCommit, disabled = false, }: UseReorderListOptions) { const [grabbed, setGrabbed] = useState(null); const [dragging, setDragging] = useState(null); const [spoken, setSpoken] = useState(""); const emit = useRef(onReorder); emit.current = onReorder; const settle = useRef(onCommit); settle.current = onCommit; const live = useRef(items); live.current = items; const snapshot = useRef(null); const indexOf = useCallback( (id: string) => live.current.findIndex((item) => getId(item) === id), [getId], ); const grab = useCallback( (id: string) => { snapshot.current = live.current; setGrabbed(id); const at = indexOf(id); const item = live.current[at]; setSpoken( `${getLabel(item)} grabbed, position ${at + 1} of ${live.current.length}.`, ); }, [getLabel, indexOf], ); const drop = useCallback( (id: string) => { snapshot.current = null; setGrabbed(null); const at = indexOf(id); const item = live.current[at]; setSpoken(`${getLabel(item)} dropped at position ${at + 1}.`); settle.current?.([...live.current]); }, [getLabel, indexOf], ); const cancel = useCallback(() => { if (snapshot.current) emit.current([...snapshot.current]); snapshot.current = null; setGrabbed(null); setSpoken("Reorder cancelled, original order restored."); }, []); const step = useCallback( (id: string, delta: -1 | 1) => { const from = indexOf(id); const to = from + delta; if (from < 0 || to < 0 || to >= live.current.length) return; const next = moveItem(live.current, from, to); emit.current(next); const item = next[to]; setSpoken( `${getLabel(item)}, position ${to + 1} of ${next.length}.`, ); if (snapshot.current === null) settle.current?.(next); }, [getLabel, indexOf], ); const rowKeyDown = useCallback( (id: string) => (event: React.KeyboardEvent) => { if (disabled || event.target !== event.currentTarget) return; const held = grabbed === id; if (event.key === " " || event.key === "Enter") { event.preventDefault(); if (held) drop(id); else grab(id); return; } if ((event.key === "ArrowUp" || event.key === "ArrowDown") && held) { event.preventDefault(); step(id, event.key === "ArrowUp" ? -1 : 1); return; } if (event.key === "Escape" && held) { event.preventDefault(); cancel(); } }, [disabled, grabbed, grab, drop, step, cancel], ); const onDragStart = useCallback( (id: string) => { snapshot.current = live.current; setDragging(id); }, [], ); const onDragEnd = useCallback( (id: string) => { snapshot.current = null; setDragging(null); const at = indexOf(id); const item = live.current[at]; setSpoken(`${getLabel(item)} dropped at position ${at + 1}.`); settle.current?.([...live.current]); }, [getLabel, indexOf], ); return { grabbed, dragging, spoken, grab, drop, cancel, step, rowKeyDown, onDragStart, onDragEnd, }; } export type ReorderListProps = UseReorderListOptions & { children: (item: T) => React.ReactNode; label: string; className?: string; }; const GRIP = ( ); export function ReorderList({ children, label, className = "", ...options }: ReorderListProps) { const { items, getId, getLabel, onReorder, disabled = false } = options; const list = useReorderList(options); const reduced = useReducedMotion() === true; const hintId = useId(); return (

{items.map((item) => { const id = getId(item); const held = list.grabbed === id; const lifted = held || list.dragging === id; return ( list.onDragStart(id)} onDragEnd={() => list.onDragEnd(id)} onBlur={() => held && list.cancel()} transition={reduced ? INSTANT : CELL} whileDrag={reduced ? undefined : { scale: 1.02 }} style={{ touchAction: "pan-x" }} className={`relative flex items-center gap-2.5 rounded-[9px] border bg-white px-3 py-2.5 outline-none transition-[border-color,box-shadow,background-color] duration-150 focus-visible:outline-none dark:bg-[#1D1D1A] ${ lifted ? "z-10 cursor-grabbing border-stone-200 shadow-[0_1px_2px_rgba(28,25,23,0.08),0_14px_28px_-16px_rgba(28,25,23,0.5)] dark:border-white/[0.16] dark:shadow-[0_2px_14px_rgba(0,0,0,0.55)]" : "cursor-grab border-stone-200 shadow-[0_1px_2px_rgba(28,25,23,0.06)] dark:border-white/[0.16] dark:shadow-[0_1px_6px_rgba(0,0,0,0.45)]" } ${ held ? "border-[#4568FF] bg-[#4568FF]/[0.04] dark:border-[#93B0FF] dark:bg-[#93B0FF]/[0.08]" : "focus-visible:bg-[#4568FF]/[0.06] focus-visible:shadow-[inset_0_0_0_1px_#4568FF] dark:focus-visible:bg-[#93B0FF]/[0.1] dark:focus-visible:shadow-[inset_0_0_0_1px_#93B0FF]" }`} > {GRIP} {getLabel(item)}

{children(item)}

); })} Drag to reorder. With the keyboard, Space grabs the row, the arrow keys move it, Space drops it, and Escape puts everything back. {list.spoken}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/interior/reorder-list.tsx","content":"$53","type":"registry:ui","target":"components/interior/reorder-list.tsx"}],"className":"h-[70svh] min-h-80"}]]}]