4e: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"] 4f: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"] 50:T1ee2,// Sortable from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, type DraggableAttributes, type DraggableSyntheticListeners, type DragEndEvent, } from '@dnd-kit/core'; import { SortableContext, arrayMove, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; import { GripVertical } from 'lucide-react'; import { cn } from '@/lib/utils'; type Orientation = 'vertical' | 'horizontal'; const INTERACTIVE = 'button, a, input, textarea, select, [contenteditable]:not([contenteditable="false"])'; // Presses on controls inside an item (an edit button, a link) stay clicks; only the handle or the item itself drags. const startsDrag = (target: EventTarget | null) => target instanceof Element && (!target.closest(INTERACTIVE) || target.closest('[data-drag-handle]') !== null); class ItemPointerSensor extends PointerSensor { static activators = [ { eventName: 'onPointerDown' as const, handler: ({ nativeEvent }: React.PointerEvent) => nativeEvent.button === 0 && startsDrag(nativeEvent.target), }, ]; } class ItemKeyboardSensor extends KeyboardSensor { static activators = [ { eventName: 'onKeyDown' as const, handler: (event: React.KeyboardEvent) => (event.code === 'Space' || event.code === 'Enter') && event.target === event.currentTarget && (event.preventDefault(), true), }, ]; } /** Pointer and keyboard sensors that leave controls inside a draggable item clickable. Shared with Kanban. */ const useSortableSensors = () => useSensors( useSensor(ItemPointerSensor, { activationConstraint: { distance: 4 } }), useSensor(ItemKeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }), ); interface SortableCtx { order: string[]; } const SortableOrderContext = React.createContext(null); interface SortableItemCtx { attributes: DraggableAttributes; listeners: DraggableSyntheticListeners; setActivatorNodeRef: (el: HTMLElement | null) => void; setHasHandle: (has: boolean) => void; dragging: boolean; disabled: boolean; } const SortableItemContext = React.createContext(null); export interface SortableProps extends Omit, 'defaultValue' | 'onChange'> { /** Item values in their current order. */ value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; orientation?: Orientation; disabled?: boolean; } const Sortable = ({ value: valueProp, defaultValue, onValueChange, orientation = 'vertical', disabled = false, className, children, ...props }: SortableProps) => { const [internal, setInternal] = React.useState(defaultValue ?? []); const order = valueProp ?? internal; const id = React.useId(); const sensors = useSortableSensors(); const handleDragEnd = ({ active, over }: DragEndEvent) => { if (!over || active.id === over.id) return; const next = arrayMove(order, order.indexOf(String(active.id)), order.indexOf(String(over.id))); if (valueProp === undefined) setInternal(next); onValueChange?.(next); }; const ctx = React.useMemo(() => ({ order }), [order]); return (

{children}

); }; export interface SortableItemProps extends React.ComponentProps<'div'> { /** This item's value in the `Sortable` order. */ value: string; disabled?: boolean; } const SortableItem = ({ value, disabled = false, className, style, ...props }: SortableItemProps) => { const ctx = React.useContext(SortableOrderContext); if (!ctx) throw new Error('SortableItem must be used inside '); const [hasHandle, setHasHandle] = React.useState(false); const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({ id: value, disabled, }); const index = ctx.order.indexOf(value); const itemCtx = React.useMemo( () => ({ attributes, listeners, setActivatorNodeRef, setHasHandle, dragging: isDragging, disabled, }), [attributes, listeners, setActivatorNodeRef, isDragging, disabled], ); return (

); }; const SortableHandle = ({ className, children, ...props }: React.ComponentProps<'button'>) => { const ctx = React.useContext(SortableItemContext); if (!ctx) throw new Error('SortableHandle must be used inside '); const { attributes, listeners, setActivatorNodeRef, setHasHandle, dragging, disabled } = ctx; React.useLayoutEffect(() => { setHasHandle(true); return () => setHasHandle(false); }, [setHasHandle]); return ( ); }; export { Sortable, SortableItem, SortableHandle, useSortableSensors }; 4d:["$","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","@dnd-kit/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","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":"@dnd-kit/core"}]]}]}],["$","li","@dnd-kit/sortable",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fsortable","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":"@dnd-kit/sortable"}]]}]}],["$","li","@dnd-kit/utilities",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Futilities","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":"@dnd-kit/utilities"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hirael","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/hirael/bases/radix/components/sortable.tsx","content":"$50","type":"registry:component","target":"components/sortable.tsx"}],"className":"h-[70svh] min-h-80"}]]}]