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:T1ff7,"use client" import * as React from "react" import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCorners, useDroppable, useSensor, useSensors, type DragEndEvent, type DragOverEvent, type DragStartEvent, } from "@dnd-kit/core" import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable" import { CSS } from "@dnd-kit/utilities" import { cn } from "@/lib/utils" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/ds-badge" import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area" // ── Types ── export interface KanbanCardData { id: string title: string description?: string tags?: string[] /** Extra content rendered below the description (date, avatar, etc). */ footer?: React.ReactNode } export interface KanbanColumnData { id: string title: string cards: KanbanCardData[] } export interface KanbanBoardProps extends Omit< React.HTMLAttributes, "onChange" > { columns: KanbanColumnData[] onColumnsChange?: (columns: KanbanColumnData[]) => void } // ── Helpers ── function findColumnOfCard(columns: KanbanColumnData[], cardId: string) { return columns.find((col) => col.cards.some((card) => card.id === cardId)) } function findColumnById(columns: KanbanColumnData[], id: string) { return columns.find((col) => col.id === id) } // ── KanbanCardItem (draggable) ── function KanbanCardItem({ card }: { card: KanbanCardData }) { const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: card.id, attributes: { role: "listitem", roleDescription: "draggable card" }, }) return ( {card.tags && card.tags.length > 0 && (

{card.tags.map((tag) => ( {tag} ))}

)} {card.title} {card.description && (

{card.description}

)} {card.footer && ( {card.footer} )} ) } // ── KanbanColumnView (droppable container + sortable list) ── function KanbanColumnView({ column }: { column: KanbanColumnData }) { const { setNodeRef } = useDroppable({ id: column.id }) return (

{column.title}

{column.cards.length}

card.id)} strategy={verticalListSortingStrategy} >

{column.cards.map((card) => ( ))}

) } // ── KanbanBoard ── /** * Drag-and-drop Kanban board: reorder cards within a column or move them * across columns, by pointer or keyboard (Space to lift, arrow keys to * move, Space to drop, Escape to cancel). Controlled-with-callback, like * `Sortable` — pass `columns` and read the result back via * `onColumnsChange`; the board also tracks its own state so it works * without wiring the callback. */ export function KanbanBoard({ className, columns: columnsProp, onColumnsChange, ...props }: KanbanBoardProps) { const [columns, setColumns] = React.useState(columnsProp) const [activeCard, setActiveCard] = React.useState( null ) // eslint-disable-next-line react-hooks/set-state-in-effect React.useEffect(() => setColumns(columnsProp), [columnsProp]) const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }) ) function handleDragStart(event: DragStartEvent) { const activeId = String(event.active.id) const column = findColumnOfCard(columns, activeId) setActiveCard(column?.cards.find((c) => c.id === activeId) ?? null) } function handleDragOver(event: DragOverEvent) { const { active, over } = event if (!over) return const activeId = String(active.id) const overId = String(over.id) if (activeId === overId) return const activeColumn = findColumnOfCard(columns, activeId) const overColumn = findColumnOfCard(columns, overId) ?? findColumnById(columns, overId) if (!activeColumn || !overColumn || activeColumn.id === overColumn.id) { return } setColumns((prev) => prev.map((col) => { if (col.id === activeColumn.id) { return { ...col, cards: col.cards.filter((card) => card.id !== activeId), } } if (col.id === overColumn.id) { const card = activeColumn.cards.find((c) => c.id === activeId) if (!card) return col const overIdx = col.cards.findIndex((c) => c.id === overId) const insertAt = overIdx >= 0 ? overIdx : col.cards.length const nextCards = [...col.cards] nextCards.splice(insertAt, 0, card) return { ...col, cards: nextCards } } return col }) ) } function handleDragEnd(event: DragEndEvent) { const { active, over } = event setActiveCard(null) if (!over) return const activeId = String(active.id) const overId = String(over.id) const activeColumn = findColumnOfCard(columns, activeId) const overColumn = findColumnOfCard(columns, overId) ?? findColumnById(columns, overId) if (!activeColumn || !overColumn) return let next = columns if (activeColumn.id === overColumn.id) { const oldIdx = activeColumn.cards.findIndex((c) => c.id === activeId) const newIdx = activeColumn.cards.findIndex((c) => c.id === overId) if (oldIdx !== -1 && newIdx !== -1 && oldIdx !== newIdx) { next = columns.map((col) => col.id === activeColumn.id ? { ...col, cards: arrayMove(col.cards, oldIdx, newIdx) } : col ) setColumns(next) } } onColumnsChange?.(next) } return (

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

{activeCard ? : null} ) } 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","@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":"@lema-ds","registryDependencies":["card","badge","scroll-area"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ds/kanban-board.tsx","content":"$4e","type":"registry:ui","target":"components/ui/ds-kanban-board.tsx"}],"className":"h-[70svh] min-h-80"}]]}]