4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2ce7,'use client' /* eslint-disable @typescript-eslint/no-explicit-any */ import * as React from 'react' import type { CSSProperties, ReactElement, ReactNode } from 'react' import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useMemo, useState, useSyncExternalStore, } from 'react' import { mergeProps } from '@base-ui/react/merge-props' import { useRender } from '@base-ui/react/use-render' import type { DragCancelEvent, DragEndEvent, DragStartEvent, DropAnimation, Modifiers, UniqueIdentifier, } from '@dnd-kit/core' import { defaultDropAnimationSideEffects, DndContext, DragOverlay, KeyboardSensor, MeasuringStrategy, MouseSensor, TouchSensor, useSensor, useSensors, type DraggableSyntheticListeners, } from '@dnd-kit/core' import { arrayMove, defaultAnimateLayoutChanges, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, type AnimateLayoutChanges, } from '@dnd-kit/sortable' import { CSS } from '@dnd-kit/utilities' import { createPortal } from 'react-dom' import { cn } from '@/lib/utils' // Sortable Item Context const SortableItemContext = createContext<{ listeners: DraggableSyntheticListeners | undefined isDragging?: boolean disabled?: boolean }>({ listeners: undefined, isDragging: false, disabled: false, }) const IsOverlayContext = createContext(false) const SortableInternalContext = createContext<{ activeId: UniqueIdentifier | null modifiers?: Modifiers }>({ activeId: null, modifiers: undefined, }) const animateLayoutChanges: AnimateLayoutChanges = (args) => defaultAnimateLayoutChanges({ ...args, wasDragging: true }) const dropAnimationConfig: DropAnimation = { sideEffects: defaultDropAnimationSideEffects({ styles: { active: { opacity: '0.4', }, }, }), } /** * Client-mount gate for the `createPortal` calls below, which need * `document.body` and so must not run on the server or during hydration. * * A never-notifying subscription makes `useSyncExternalStore` return the server * snapshot (`false`) while rendering on the server and while hydrating, then the * client snapshot (`true`) once mounted - the same gate the previous * `useLayoutEffect(() => setMounted(true), [])` provided, minus the extra render * pass that `react-hooks/set-state-in-effect` flags. All three functions are * module-scoped so their identities stay stable; an inline `getSnapshot` is the * classic cause of an infinite re-subscribe loop. */ const subscribeToNothing = () => () => {} const getIsMounted = () => true const getIsMountedOnServer = () => false const MOUSE_SENSOR_OPTIONS = { activationConstraint: { distance: 10 } } const TOUCH_SENSOR_OPTIONS = { activationConstraint: { delay: 250, tolerance: 5 }, } const KEYBOARD_SENSOR_OPTIONS = { coordinateGetter: sortableKeyboardCoordinates, } const MEASURING_CONFIG = { droppable: { strategy: MeasuringStrategy.Always }, } const STRATEGY_MAP = { horizontal: rectSortingStrategy, grid: rectSortingStrategy, vertical: verticalListSortingStrategy, } as const // Multipurpose Sortable Component export interface SortableCommitMeta { event: DragEndEvent activeIndex: number overIndex: number previousValue: T[] } export interface SortableRootProps extends Omit< useRender.ComponentProps<'div'>, 'onDragStart' | 'onDragEnd' | 'children' > { value: T[] onValueChange: (value: T[]) => void getItemValue: (item: T) => string children: ReactNode onMove?: (event: { event: DragEndEvent; activeIndex: number; overIndex: number }) => void onValueCommit?: (value: T[], meta: SortableCommitMeta) => void strategy?: 'horizontal' | 'vertical' | 'grid' onDragStart?: (event: DragStartEvent) => void onDragEnd?: (event: DragEndEvent) => void onDragCancel?: (event: DragCancelEvent) => void accessibility?: React.ComponentProps['accessibility'] modifiers?: Modifiers } function Sortable({ value, onValueChange, getItemValue, className, render, onMove, onValueCommit, strategy = 'vertical', onDragStart, onDragEnd, onDragCancel, accessibility, modifiers, children, ...props }: SortableRootProps) { const [activeId, setActiveId] = useState(null) const mounted = useSyncExternalStore(subscribeToNothing, getIsMounted, getIsMountedOnServer) const sensors = useSensors( useSensor(MouseSensor, MOUSE_SENSOR_OPTIONS), useSensor(TouchSensor, TOUCH_SENSOR_OPTIONS), useSensor(KeyboardSensor, KEYBOARD_SENSOR_OPTIONS), ) const handleDragStart = useCallback( (event: DragStartEvent) => { setActiveId(event.active.id) onDragStart?.(event) }, [onDragStart], ) const handleDragEnd = useCallback( (event: DragEndEvent) => { const { active, over } = event setActiveId(null) onDragEnd?.(event) if (!over) return // Handle item reordering const activeIndex = value.findIndex((item: T) => getItemValue(item) === active.id) const overIndex = value.findIndex((item: T) => getItemValue(item) === over.id) if (activeIndex === -1 || overIndex === -1) return if (activeIndex !== overIndex) { if (onMove) { onMove({ event, activeIndex, overIndex }) } else { const newValue = arrayMove(value, activeIndex, overIndex) onValueChange(newValue) onValueCommit?.(newValue, { event, activeIndex, overIndex, previousValue: value, }) } } }, [value, getItemValue, onValueChange, onMove, onDragEnd, onValueCommit], ) const handleDragCancel = useCallback( (event: DragCancelEvent) => { setActiveId(null) onDragCancel?.(event) }, [onDragCancel], ) const itemIds = useMemo(() => { const ids = value.map(getItemValue) if (process.env.NODE_ENV !== 'production') { const seen = new Set() for (const id of ids) { if (seen.has(id)) { console.warn( `[Sortable] Duplicate item id "${id}". Item ids must be unique, or drag and drop will misbehave.`, ) break } seen.add(id) } } return ids }, [value, getItemValue]) const contextValue = useMemo(() => ({ activeId, modifiers }), [activeId, modifiers]) const defaultProps = { 'data-slot': 'sortable', 'data-dragging': activeId !== null, className: cn(activeId !== null && 'cursor-grabbing!', className), children, } // Find the active child for the overlay const overlayContent = useMemo(() => { if (!activeId) return null let result: ReactNode = null Children.forEach(children, (child) => { if (isValidElement(child) && (child.props as any).value === activeId) { result = cloneElement(child as ReactElement, { ...(child.props as any), className: cn((child.props as any).className, 'z-50'), }) } }) return result }, [activeId, children]) return ( {useRender({ defaultTagName: 'div', render, props: mergeProps<'div'>(defaultProps, props), })} {mounted && createPortal( {overlayContent} , document.body, )} ) } export interface SortableItemProps extends useRender.ComponentProps<'div'> { value: string disabled?: boolean } function SortableItem({ value, className, render, disabled, ...props }: SortableItemProps) { const isOverlay = useContext(IsOverlayContext) const { setNodeRef, transform, transition, attributes, listeners, isDragging: isSortableDragging, } = useSortable({ id: value, disabled: disabled || isOverlay, animateLayoutChanges, }) const style = { transition, transform: CSS.Transform.toString(transform), } as CSSProperties const defaultProps = isOverlay ? { 'data-slot': 'sortable-item', 'data-value': value, 'data-dragging': true, className: cn(className), children: props.children, } : { 'data-slot': 'sortable-item', 'data-value': value, 'data-dragging': isSortableDragging, 'data-disabled': disabled, ref: setNodeRef, style, ...attributes, className: cn(isSortableDragging && 'opacity-50 z-50', disabled && 'opacity-50', className), children: props.children, } return ( {useRender({ defaultTagName: 'div', render, props: mergeProps<'div'>(defaultProps, props), })} ) } export interface SortableItemHandleProps extends useRender.ComponentProps<'div'> { cursor?: boolean } function SortableItemHandle({ className, render, cursor = true, ...props }: SortableItemHandleProps) { const { listeners, isDragging, disabled } = useContext(SortableItemContext) const defaultProps = { 'data-slot': 'sortable-item-handle', 'data-dragging': isDragging, 'data-disabled': disabled, ...listeners, className: cn(cursor && (isDragging ? 'cursor-grabbing!' : 'cursor-grab!'), className), children: props.children, } return useRender({ defaultTagName: 'div', render, props: mergeProps<'div'>(defaultProps, props), }) } export interface SortableOverlayProps extends Omit, 'children'> { children?: ReactNode | ((params: { value: UniqueIdentifier }) => ReactNode) } function SortableOverlay({ children, className, ...props }: SortableOverlayProps) { const { activeId, modifiers } = useContext(SortableInternalContext) const mounted = useSyncExternalStore(subscribeToNothing, getIsMounted, getIsMountedOnServer) const content = activeId && children ? (typeof children === 'function' ? children({ value: activeId }) : children) : null if (!mounted) return null return createPortal( {content} , document.body, ) } export { Sortable, SortableItem, SortableItemHandle, SortableOverlay } 4b:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/lib-utils.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/registry/components/spaceui/sortable/index.tsx","content":"$4e","type":"registry:component","target":"components/spaceui/sortable.tsx"}],"className":"h-[70svh] min-h-80"}]]}]