51: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"] 52: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"] 53:T3392,"use client" import { useCallback, useRef, useState } from "react" import Image from "next/image" import { AnimatePresence, motion, useReducedMotion } from "motion/react" /* ═══════════════════════════════════════════════════════════════════════ DESIGN TOKENS ═══════════════════════════════════════════════════════════════════════ */ const TAG_VARIANTS = { feature: { bg: "rgba(59,130,246,0.10)", color: "#2563eb" }, bug: { bg: "rgba(239,68,68,0.10)", color: "#dc2626" }, design: { bg: "rgba(168,85,247,0.10)", color: "#9333ea" }, done: { bg: "rgba(16,185,129,0.10)", color: "#059669" }, improvement: { bg: "rgba(245,158,11,0.10)", color: "#d97706" }, docs: { bg: "rgba(6,182,212,0.10)", color: "#0891b2" }, } const COLUMN_META = { todo: { icon: ( ), }, "in-progress": { icon: ( ), }, done: { icon: ( ), }, } export type TagVariant = keyof typeof TAG_VARIANTS export type ColumnStatus = keyof typeof COLUMN_META export type CardTag = { label: string variant: TagVariant } export type Assignee = { name: string avatar?: string } export type CardData = { id: string title: string tags?: CardTag[] assignee?: Assignee date?: string } export type ColumnData = { id: ColumnStatus title: string status: ColumnStatus cards: CardData[] } export type DragState = { cardId: string fromColumn: ColumnStatus } | null type TagProps = { label: string variant: TagVariant } type AvatarProps = { src?: string name?: string } type CardProps = { card: CardData isDone: boolean index: number onDragStart: () => void onDragEnd: () => void isDragging: boolean } type DropIndicatorProps = { isActive: boolean } export type ColumnProps = { column: ColumnData onDrop: ( cardId: string, fromColumnId: ColumnStatus, toColumnId: ColumnStatus ) => void dragState: DragState setDragState: React.Dispatch> } const springTransition = { type: "spring" as const, stiffness: 500, damping: 30, } export const gentleSpring = { type: "spring" as const, stiffness: 300, damping: 26, } /* ═══════════════════════════════════════════════════════════════════════ TAG ═══════════════════════════════════════════════════════════════════════ */ function Tag({ label, variant }: TagProps) { const v = TAG_VARIANTS[variant] || TAG_VARIANTS.feature return ( {label} ) } /* ═══════════════════════════════════════════════════════════════════════ AVATAR ═══════════════════════════════════════════════════════════════════════ */ function Avatar({ src, name }: AvatarProps) { if (src) { return ( {name

) } const initials = (name || "?") .split(" ") .map((w) => w[0]) .join("") .slice(0, 2) .toUpperCase() return (

{initials}

) } /* ═══════════════════════════════════════════════════════════════════════ CARD ═══════════════════════════════════════════════════════════════════════ */ const cardVariants = { initial: { opacity: 0, y: 8, scale: 0.97, filter: "blur(4px)" }, animate: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, y: -6, scale: 0.98, filter: "blur(3px)" }, } function Card({ card, isDone, index, onDragStart, onDragEnd, isDragging, }: CardProps) { const shouldReduce = useReducedMotion() const tags = card.tags ?? [] return ( {/* Tags */} {tags.length > 0 && (

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

)} {/* Title — `div` avoids `.prose p` margins when embedded in MDX/docs */}

{card.title}

{/* Footer */} {(card.assignee || card.date) && (

{card.assignee ? ( ) : (

)} {card.date && ( {card.date} )}

)} ) } /* ═══════════════════════════════════════════════════════════════════════ DROP INDICATOR ═══════════════════════════════════════════════════════════════════════ */ function DropIndicator({ isActive }: DropIndicatorProps) { return ( ) } /* ═══════════════════════════════════════════════════════════════════════ COLUMN ═══════════════════════════════════════════════════════════════════════ */ export function Column({ column, onDrop, dragState, setDragState, }: ColumnProps) { const [dragOver, setDragOver] = useState(false) const meta = COLUMN_META[column.status] || COLUMN_META.todo const isDone = column.status === "done" const timeoutRef = useRef | null>(null) const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() e.dataTransfer.dropEffect = "move" if (timeoutRef.current) { clearTimeout(timeoutRef.current) } setDragOver(true) }, []) const handleDragLeave = useCallback(() => { timeoutRef.current = setTimeout(() => setDragOver(false), 60) }, []) const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault() setDragOver(false) if (dragState) { onDrop(dragState.cardId, dragState.fromColumn, column.id) } }, [dragState, onDrop, column.id] ) return (

{/* Header */} {meta.icon} {column.title} {column.cards.length} {/* Card list — flex-1 so drop target spans full column below header (short / empty columns) */} {column.cards.map((card, i) => ( setDragState(null)} onDragStart={() => setDragState({ cardId: card.id, fromColumn: column.id }) } /> ))}

) } 50:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/kanban-board.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]