62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T13f1,"use client"; import { useState } from "react"; import { DndContext, DragOverlay, PointerSensor, closestCorners, useSensor, useSensors, type DragStartEvent, type DragOverEvent, type DragEndEvent, } from "@dnd-kit/core"; import { arrayMove } from "@dnd-kit/sortable"; import { Card } from "@/components/ui/card"; import KanbanColumn from "@/components/shadcn-dashboard/blocks/kanban-application-01/kanban-column"; import { initialColumns } from "@/components/shadcn-dashboard/blocks/kanban-application-01/data"; import { Column, Task } from "@/components/shadcn-dashboard/blocks/kanban-application-01/types"; const KanbanApplication = () => { const [columns, setColumns] = useState(initialColumns); const [activeTask, setActiveTask] = useState(null); const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 6 } }) ); const findColumn = (id: string): Column | null => { const byId = columns.find((col) => col.id === id); if (byId) return byId; return columns.find((col) => col.tasks.some((task) => task.id === id)) ?? null; }; const handleDragStart = (event: DragStartEvent) => { const column = findColumn(event.active.id as string); const task = column?.tasks.find((t) => t.id === event.active.id) ?? null; setActiveTask(task); }; const handleDragOver = (event: DragOverEvent) => { const { active, over } = event; if (!over || active.id === over.id) return; const activeColumn = findColumn(active.id as string); const overColumn = findColumn(over.id as string); if (!activeColumn || !overColumn || activeColumn.id === overColumn.id) return; setColumns((prev) => { const activeItems = activeColumn.tasks; const overItems = overColumn.tasks; const activeIndex = activeItems.findIndex((t) => t.id === active.id); const activeTaskItem = activeItems[activeIndex]; if (!activeTaskItem) return prev; const overIndex = overItems.findIndex((t) => t.id === over.id); const insertAt = overIndex >= 0 ? overIndex : overItems.length; return prev.map((col) => { if (col.id === activeColumn.id) { return { ...col, tasks: activeItems.filter((t) => t.id !== active.id) }; } if (col.id === overColumn.id) { const newTasks = [...overItems]; newTasks.splice(insertAt, 0, activeTaskItem); return { ...col, tasks: newTasks }; } return col; }); }); }; const handleDragEnd = (event: DragEndEvent) => { const { active, over } = event; setActiveTask(null); if (!over) return; const activeColumn = findColumn(active.id as string); const overColumn = findColumn(over.id as string); if (!activeColumn || !overColumn || activeColumn.id !== overColumn.id) return; const activeIndex = activeColumn.tasks.findIndex((t) => t.id === active.id); const overIndex = overColumn.tasks.findIndex((t) => t.id === over.id); if (overIndex === -1 || activeIndex === overIndex) return; setColumns((prev) => prev.map((col) => col.id === activeColumn.id ? { ...col, tasks: arrayMove(col.tasks, activeIndex, overIndex) } : col ) ); }; const handleAddTask = (columnId: string, content: string) => { setColumns((prev) => prev.map((col) => col.id === columnId ? { ...col, tasks: [ ...col.tasks, { id: `task-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`, content }, ], } : col ) ); }; const handleDeleteTask = (columnId: string, taskId: string) => { setColumns((prev) => prev.map((col) => col.id === columnId ? { ...col, tasks: col.tasks.filter((t) => t.id !== taskId) } : col ) ); }; return (

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

{activeTask ? (

{activeTask.content}

) : null}

); }; export default KanbanApplication; 65:Tcf8,"use client"; import { useState } from "react"; import { useDroppable } from "@dnd-kit/core"; import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"; import { Plus } from "lucide-react"; import { Input } from "@/components/ui/input"; import TaskCard from "@/components/shadcn-dashboard/blocks/kanban-application-01/task-card"; import { Column } from "@/components/shadcn-dashboard/blocks/kanban-application-01/types"; import { Card } from "@/components/ui/card"; type Props = { column: Column; onAddTask: (columnId: string, content: string) => void; onDeleteTask: (columnId: string, taskId: string) => void; }; const KanbanColumn = ({ column, onAddTask, onDeleteTask }: Props) => { const { setNodeRef } = useDroppable({ id: column.id }); const [isAdding, setIsAdding] = useState(false); const [value, setValue] = useState(""); const Icon = column.icon; const commitAdd = () => { if (value.trim()) { onAddTask(column.id, value.trim()); } setValue(""); setIsAdding(false); }; return (

{column.title}

{String(column.tasks.length).padStart(2, "0")}

task.id)} strategy={verticalListSortingStrategy} > {column.tasks.map((task) => ( onDeleteTask(column.id, task.id)} /> ))} {isAdding && ( setValue(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") commitAdd(); if (e.key === "Escape") { setValue(""); setIsAdding(false); } }} onBlur={commitAdd} placeholder="Task title" className="bg-card text-sm shadow-sm" /> )}

); }; export default KanbanColumn; 66:T68e,"use client"; import { useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { Trash2 } from "lucide-react"; import { Task } from "@/components/shadcn-dashboard/blocks/kanban-application-01/types"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; type Props = { task: Task; onDelete: () => void; }; const TaskCard = ({ task, onDelete }: Props) => { const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: task.id }); const style = { transform: CSS.Transform.toString(transform), transition, }; return (

{task.content}

); }; export default TaskCard; 67:T46c,import { CircleDot, CircleCheck, CircleDashed } from "lucide-react"; import { Column } from "@/components/shadcn-dashboard/blocks/kanban-application-01/types"; export const initialColumns: Column[] = [ { id: "todo", title: "To Do", icon: CircleDashed, iconClassName: "text-muted-foreground fill-muted-foreground", tasks: [ { id: "task-1", content: "Configure Shadcn & Tailwind" }, { id: "task-2", content: "Design drag-and-drop" }, { id: "task-3", content: "Implement dark mode" }, ], }, { id: "in-progress", title: "In Progress", icon: CircleDot, iconClassName: "text-orange-400", tasks: [ { id: "task-4", content: "Animate card drops" }, { id: "task-5", content: "Sync state to local storage" }, ], }, { id: "done", title: "Done", icon: CircleCheck, iconClassName: "text-chart-2", tasks: [ { id: "task-6", content: "Add Auth.js middleware" }, { id: "task-7", content: "Scaffold sidebar layout" }, { id: "task-8", content: "Init Next.js TS project" }, ], }, ]; 61:["$","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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["card","input","button"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"src/components/shadcn-dashboard/blocks/kanban-application-01/page.tsx","content":"import KanbanApplication from \"@/components/shadcn-dashboard/blocks/kanban-application-01\";\r\n\r\nexport default function page() {\r\n return ;\r\n}","type":"registry:page","target":"app/kanban-application-01/page.tsx"},{"path":"src/components/shadcn-dashboard/blocks/kanban-application-01/index.tsx","content":"$64","type":"registry:component","target":"components/shadcn-dashboard/blocks/kanban-application-01/index.tsx"},{"path":"src/components/shadcn-dashboard/blocks/kanban-application-01/kanban-column.tsx","content":"$65","type":"registry:component","target":"components/shadcn-dashboard/blocks/kanban-application-01/kanban-column.tsx"},{"path":"src/components/shadcn-dashboard/blocks/kanban-application-01/task-card.tsx","content":"$66","type":"registry:component","target":"components/shadcn-dashboard/blocks/kanban-application-01/task-card.tsx"},{"path":"src/components/shadcn-dashboard/blocks/kanban-application-01/data.ts","content":"$67","type":"registry:component","target":"components/shadcn-dashboard/blocks/kanban-application-01/data.ts"},{"path":"src/components/shadcn-dashboard/blocks/kanban-application-01/types.ts","content":"import { LucideIcon } from \"lucide-react\";\r\n\r\nexport type Task = {\r\n id: string;\r\n content: string;\r\n};\r\n\r\nexport type Column = {\r\n id: string;\r\n title: string;\r\n icon: LucideIcon;\r\n iconClassName: string;\r\n tasks: Task[];\r\n};\r\n","type":"registry:component","target":"components/shadcn-dashboard/blocks/kanban-application-01/types.ts"}],"className":"h-[70svh] min-h-80"}]]}]