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:T4fcf,import * as React from "react" import { defaultDropAnimationSideEffects, DndContext, DragOverlay, KeyboardSensor, MeasuringStrategy, MouseSensor, TouchSensor, useSensor, useSensors, type DraggableAttributes, type DraggableSyntheticListeners, type DragEndEvent, type DragOverEvent, type DragStartEvent, type DropAnimation, type Modifiers, type UniqueIdentifier, } 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 { Slot } from "@radix-ui/react-slot" import { createPortal } from "react-dom" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { cn } from "@/lib/utils" type Columns = Record interface KanbanContextProps { columns: Columns setColumns: (columns: Columns) => void getItemId: (item: T) => string columnIds: string[] activeId: UniqueIdentifier | null setActiveId: (id: UniqueIdentifier | null) => void findContainer: (id: UniqueIdentifier) => string | undefined isColumn: (id: UniqueIdentifier) => boolean modifiers?: Modifiers } const KanbanContext = React.createContext>({ columns: {}, setColumns: () => undefined, getItemId: () => "", columnIds: [], activeId: null, setActiveId: () => undefined, findContainer: () => undefined, isColumn: () => false, modifiers: undefined, }) const ColumnContext = React.createContext<{ attributes: DraggableAttributes listeners: DraggableSyntheticListeners | undefined isDragging?: boolean disabled?: boolean }>({ attributes: {} as DraggableAttributes, listeners: undefined, isDragging: false, disabled: false, }) const ItemContext = React.createContext<{ listeners: DraggableSyntheticListeners | undefined isDragging?: boolean disabled?: boolean }>({ listeners: undefined, isDragging: false, disabled: false, }) const IsOverlayContext = React.createContext(false) const animateLayoutChanges: AnimateLayoutChanges = (args) => defaultAnimateLayoutChanges({ ...args, wasDragging: true }) const dropAnimationConfig: DropAnimation = { sideEffects: defaultDropAnimationSideEffects({ styles: { active: { opacity: "0.4", }, }, }), } function useMediaQuery(query: string) { const [matches, setMatches] = React.useState(false) React.useEffect(() => { const media = window.matchMedia(query) const sync = () => setMatches(media.matches) sync() media.addEventListener("change", sync) return () => media.removeEventListener("change", sync) }, [query]) return matches } export interface KanbanMoveEvent { event: DragEndEvent activeContainer: string activeIndex: number overContainer: string overIndex: number } export interface KanbanRootProps< T, > extends React.HTMLAttributes { value: Columns onValueChange: (value: Columns) => void getItemValue: (item: T) => string children: React.ReactNode onMove?: (event: KanbanMoveEvent) => void asChild?: boolean modifiers?: Modifiers } export function Kanban({ value, onValueChange, getItemValue, children, className, asChild = false, onMove, modifiers, ...props }: KanbanRootProps) { const columns = value const setColumns = onValueChange const [activeId, setActiveId] = React.useState(null) const sensors = useSensors( useSensor(MouseSensor, { activationConstraint: { distance: 10, }, }), useSensor(TouchSensor, { activationConstraint: { delay: 250, tolerance: 5, }, }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }) ) const columnIds = React.useMemo(() => Object.keys(columns), [columns]) const isColumn = React.useCallback( (id: UniqueIdentifier) => columnIds.includes(String(id)), [columnIds] ) const findContainer = React.useCallback( (id: UniqueIdentifier) => { if (isColumn(id)) return String(id) return columnIds.find((key) => columns[key].some((item) => getItemValue(item) === id) ) }, [columnIds, columns, getItemValue, isColumn] ) const handleDragStart = React.useCallback((event: DragStartEvent) => { setActiveId(event.active.id) }, []) const handleDragOver = React.useCallback( (event: DragOverEvent) => { const { active, over } = event if (!over || isColumn(active.id)) return const activeContainer = findContainer(active.id) const overContainer = findContainer(over.id) if (!activeContainer || !overContainer) return if (activeContainer !== overContainer) { const activeItems = columns[activeContainer] const overItems = columns[overContainer] const activeIndex = activeItems.findIndex( (item) => getItemValue(item) === active.id ) let overIndex = overItems.findIndex( (item) => getItemValue(item) === over.id ) if (isColumn(over.id)) { overIndex = overItems.length } const newActiveItems = [...activeItems] const newOverItems = [...overItems] const [movedItem] = newActiveItems.splice(activeIndex, 1) newOverItems.splice(overIndex, 0, movedItem) setColumns({ ...columns, [activeContainer]: newActiveItems, [overContainer]: newOverItems, }) } else { const container = activeContainer const activeIndex = columns[container].findIndex( (item) => getItemValue(item) === active.id ) const overIndex = columns[container].findIndex( (item) => getItemValue(item) === over.id ) if (activeIndex !== overIndex) { setColumns({ ...columns, [container]: arrayMove(columns[container], activeIndex, overIndex), }) } } }, [columns, findContainer, getItemValue, isColumn, setColumns] ) const handleDragCancel = React.useCallback(() => { setActiveId(null) }, []) const handleDragEnd = React.useCallback( (event: DragEndEvent) => { const { active, over } = event setActiveId(null) if (!over) return if (onMove && !isColumn(active.id)) { const activeSortable = active.data.current?.sortable as | { containerId?: UniqueIdentifier; index?: number } | undefined const overSortable = over.data.current?.sortable as | { containerId?: UniqueIdentifier; index?: number } | undefined const activeContainer = (activeSortable?.containerId ? String(activeSortable.containerId) : undefined) ?? findContainer(active.id) const overContainer = (overSortable?.containerId ? String(overSortable.containerId) : undefined) ?? (isColumn(over.id) ? String(over.id) : findContainer(over.id)) if (activeContainer && overContainer) { const activeIndex = typeof activeSortable?.index === "number" ? activeSortable.index : columns[activeContainer].findIndex( (item) => getItemValue(item) === active.id ) const overIndex = isColumn(over.id) ? columns[overContainer].length : typeof overSortable?.index === "number" ? overSortable.index : columns[overContainer].findIndex( (item) => getItemValue(item) === over.id ) onMove({ event, activeContainer, activeIndex, overContainer, overIndex, }) } return } if (isColumn(active.id) && isColumn(over.id)) { const activeIndex = columnIds.indexOf(String(active.id)) const overIndex = columnIds.indexOf(String(over.id)) if (activeIndex !== overIndex) { const newOrder = arrayMove( Object.keys(columns), activeIndex, overIndex ) const newColumns: Columns = {} newOrder.forEach((key) => { newColumns[key] = columns[key] }) setColumns(newColumns) } return } const activeContainer = findContainer(active.id) const overContainer = findContainer(over.id) if ( activeContainer && overContainer && activeContainer === overContainer ) { const container = activeContainer const activeIndex = columns[container].findIndex( (item) => getItemValue(item) === active.id ) const overIndex = columns[container].findIndex( (item) => getItemValue(item) === over.id ) if (activeIndex !== overIndex) { setColumns({ ...columns, [container]: arrayMove(columns[container], activeIndex, overIndex), }) } } }, [ columnIds, columns, findContainer, getItemValue, isColumn, onMove, setColumns, ] ) const contextValue = React.useMemo( () => ({ columns, setColumns, getItemId: getItemValue, columnIds, activeId, setActiveId, findContainer, isColumn, modifiers, }) satisfies KanbanContextProps, [ activeId, columnIds, columns, findContainer, getItemValue, isColumn, modifiers, setColumns, ] ) const Comp = asChild ? Slot : "div" return ( }> {children} ) } export interface KanbanBoardProps extends React.HTMLAttributes { asChild?: boolean mobileMode?: "auto" | "tabs" | "stack" getColumnLabel?: (columnId: string) => React.ReactNode } export function KanbanBoard({ className, asChild = false, mobileMode = "auto", getColumnLabel, children, ...props }: KanbanBoardProps) { const { columnIds } = React.useContext(KanbanContext) const Comp = asChild ? Slot : "div" const childArray = React.Children.toArray(children) const isSmallScreen = useMediaQuery("(max-width: 639px)") const [activeColumn, setActiveColumn] = React.useState( () => columnIds[0] ?? "" ) const selectedColumn = columnIds.includes(activeColumn) ? activeColumn : columnIds[0] React.useEffect(() => { if (!columnIds.includes(activeColumn)) { setActiveColumn(columnIds[0] ?? "") } }, [activeColumn, columnIds]) const showTabs = mobileMode === "tabs" || (mobileMode === "auto" && isSmallScreen) const showStack = mobileMode === "stack" const showDesktopBoard = showStack || (mobileMode === "auto" && !isSmallScreen) const tabs = showTabs ? ( {columnIds.map((columnId) => ( {getColumnLabel?.(columnId) ?? columnId} ))} ) : null const selectedChildren = childArray.filter((child) => { if (!React.isValidElement<{ value?: string; id?: string }>(child)) { return true } const childColumnId = child.props.value ?? child.props.id return childColumnId === selectedColumn }) return ( <> {tabs} {showDesktopBoard ? ( {children} ) : null} {showTabs ? (

{selectedChildren}

) : null} ) } export interface KanbanColumnProps extends React.HTMLAttributes { value: string disabled?: boolean asChild?: boolean } export function KanbanColumn({ value, className, asChild = false, disabled, children, ...props }: KanbanColumnProps) { const isOverlay = React.useContext(IsOverlayContext) const { setNodeRef, transform, transition, attributes, listeners, isDragging: isSortableDragging, } = useSortable({ id: value, disabled: disabled || isOverlay, animateLayoutChanges, }) const { activeId, isColumn } = React.useContext(KanbanContext) const isColumnDragging = activeId ? isColumn(activeId) : false const style = { transition, transform: CSS.Transform.toString(transform), } as React.CSSProperties const Comp = asChild ? Slot : "div" if (isOverlay) { return ( {children} ) } return ( {children} ) } export interface KanbanColumnHandleProps extends React.HTMLAttributes { cursor?: boolean asChild?: boolean } export function KanbanColumnHandle({ className, asChild = false, cursor = true, children, ...props }: KanbanColumnHandleProps) { const { attributes, listeners, isDragging, disabled } = React.useContext(ColumnContext) const Comp = asChild ? Slot : "div" return ( {children} ) } export interface KanbanItemProps extends React.HTMLAttributes { value: string disabled?: boolean asChild?: boolean } export function KanbanItem({ value, className, asChild = false, disabled, children, ...props }: KanbanItemProps) { const isOverlay = React.useContext(IsOverlayContext) const { setNodeRef, transform, transition, attributes, listeners, isDragging: isSortableDragging, } = useSortable({ id: value, disabled: disabled || isOverlay, animateLayoutChanges, }) const { activeId, isColumn } = React.useContext(KanbanContext) const isItemDragging = activeId ? !isColumn(activeId) : false const style = { transition, transform: CSS.Transform.toString(transform), } as React.CSSProperties const Comp = asChild ? Slot : "div" if (isOverlay) { return ( {children} ) } return ( {children} ) } export interface KanbanItemHandleProps extends React.HTMLAttributes { cursor?: boolean asChild?: boolean } export function KanbanItemHandle({ className, asChild = false, cursor = true, children, ...props }: KanbanItemHandleProps) { const { listeners, isDragging, disabled } = React.useContext(ItemContext) const Comp = asChild ? Slot : "div" return ( {children} ) } export interface KanbanColumnContentProps extends React.HTMLAttributes { value: string asChild?: boolean } export function KanbanColumnContent({ value, className, asChild = false, children, ...props }: KanbanColumnContentProps) { const { columns, getItemId } = React.useContext(KanbanContext) const itemIds = React.useMemo( () => (columns[value] ?? []).map(getItemId), [columns, getItemId, value] ) const Comp = asChild ? Slot : "div" return ( {children} ) } export interface KanbanOverlayProps extends Omit< React.ComponentProps, "children" > { children?: | React.ReactNode | ((params: { value: UniqueIdentifier variant: "column" | "item" }) => React.ReactNode) } export function KanbanOverlay({ children, className, ...props }: KanbanOverlayProps) { const { activeId, isColumn, modifiers } = React.useContext(KanbanContext) const [mounted, setMounted] = React.useState(false) React.useLayoutEffect(() => setMounted(true), []) const variant = activeId ? (isColumn(activeId) ? "column" : "item") : "item" const content = activeId && children ? typeof children === "function" ? children({ value: activeId, variant }) : children : null if (!mounted) return null return createPortal( {content} , document.body ) } 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","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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":"@radix-ui/react-slot"}]]}]}]]}],["$","$L4e",null,{"namespace":"@corr","registryDependencies":["tabs"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/corr/components/kanban.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]