61: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"] 62: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"] 63:T4a12,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export type Stage = "applied" | "screen" | "interview" | "offer" | "hired"; export interface Candidate { id: string; name: string; current: string; stage: Stage; rating: number; source: string; days: number; tags?: string[]; color: string; next?: string; } export interface HiringPipelineBoardProps { role?: string; team?: string; candidates?: Candidate[]; onMove?: (id: string, stage: Stage) => void; onReject?: (id: string) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", col: "#101010", card: "#171717", cardHover: "#1C1C1C", border: "rgba(255,255,255,0.08)", input: "#0D0D0D", track: "rgba(255,255,255,0.08)", on: "#F5F4F1", onText: "#0A0A0A", green: "#4ADE80", amber: "#FBBF24", red: "#F87171", star: "#FBBF24", ring: "rgba(245,244,241,0.6)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", col: "#F2F1EE", card: "#FFFFFF", cardHover: "#FFFFFF", border: "rgba(10,10,10,0.09)", input: "#FFFFFF", track: "rgba(10,10,10,0.08)", on: "#0A0A0A", onText: "#FAFAF8", green: "#15803D", amber: "#B45309", red: "#DC2626", star: "#D97706", ring: "rgba(10,10,10,0.5)" }, }; const STAGES: { id: Stage; label: string; color: string }[] = [ { id: "applied", label: "Applied", color: "#A3A3A3" }, { id: "screen", label: "Screening", color: "#60A5FA" }, { id: "interview", label: "Interview", color: "#A78BFA" }, { id: "offer", label: "Offer", color: "#FBBF24" }, { id: "hired", label: "Hired", color: "#4ADE80" }, ]; const COLORS = ["#F472B6", "#60A5FA", "#A78BFA", "#34D399", "#FB923C", "#FBBF24", "#22D3EE", "#F87171"]; const RAW: [string, string, Stage, number, string, number, string[], string?][] = [ ["Nadia Rahman", "Product Designer at Lumio", "applied", 0, "Referral", 1, ["Fintech"]], ["Oscar Lindqvist", "UI Designer at Kiteworks", "applied", 0, "Careers page", 2, []], ["Mei Takahashi", "Designer at Orbitly", "applied", 0, "LinkedIn", 3, ["Motion"]], ["Diego Alvarez", "Freelance", "applied", 0, "Careers page", 9, []], ["Hannah Weiss", "Senior Designer at Pellucid", "screen", 4, "Referral", 2, ["Design systems"], "Call today 15:00"], ["Kwame Mensah", "Product Designer at Northwind", "screen", 3, "LinkedIn", 5, []], ["Lea Fontaine", "UX Lead at Halden", "screen", 4, "Sourced", 8, ["Lead"]], ["Ravi Kapoor", "Senior Designer at Lumio", "interview", 5, "Referral", 3, ["Design systems", "B2B"], "Panel Thu 10:00"], ["Sofia Marino", "Product Designer at Orbitly", "interview", 4, "Careers page", 6, ["Research"], "Portfolio review Fri"], ["Tom Becker", "Designer at Kiteworks", "interview", 3, "LinkedIn", 11, []], ["Ana Costa", "Senior Designer at Northwind", "offer", 5, "Referral", 2, ["B2B"], "Offer sent · expires Mon"], ["Jun Park", "Product Designer at Pellucid", "hired", 5, "Sourced", 0, [], "Starts Dec 1"], ]; const CANDIDATES: Candidate[] = RAW.map(([name, current, stage, rating, source, days, tags, next], i) => ({ id: `c${i + 1}`, name, current, stage, rating, source, days, tags, next, color: COLORS[i % COLORS.length] })); const initials = (n: string) => n .split(" ") .map((w) => w[0]) .join("") .slice(0, 2); type Drag = { id: string; x: number; y: number; offX: number; offY: number; w: number; startX: number; startY: number; active: boolean; over: Stage | null }; export function HiringPipelineBoard({ role = "Senior Product Designer", team = "Design · Berlin or remote", candidates: initial = CANDIDATES, onMove, onReject, theme = "dark", className }: HiringPipelineBoardProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const [items, setItems] = React.useState(initial); const [query, setQuery] = React.useState(""); const [selected, setSelected] = React.useState(null); const [drag, setDrag] = React.useState(null); const [toast, setToast] = React.useState<{ text: string; undo?: Candidate[] } | null>(null); const boardRef = React.useRef(null); React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 3500); return () => clearTimeout(t); }, [toast]); const q = query.trim().toLowerCase(); const visible = items.filter((c) => !q || `${c.name} ${c.current} ${c.source} ${(c.tags ?? []).join(" ")}`.toLowerCase().includes(q)); const counts = STAGES.map((s) => items.filter((c) => c.stage === s.id).length); const total = items.length; const stuck = items.filter((c) => c.days > 7 && c.stage !== "hired").length; const move = (id: string, stage: Stage) => { const c = items.find((x) => x.id === id); if (!c || c.stage === stage) return; const before = items; setItems((list) => [{ ...c, stage, days: 0, next: stage === "hired" ? "Starts in 2 weeks" : stage === "offer" ? "Offer being drafted" : undefined }, ...list.filter((x) => x.id !== id)]); onMove?.(id, stage); setToast({ text: `${c.name.split(" ")[0]} moved to ${STAGES.find((s) => s.id === stage)!.label}`, undo: before }); }; const advance = (c: Candidate) => { const i = STAGES.findIndex((s) => s.id === c.stage); if (i < STAGES.length - 1) move(c.id, STAGES[i + 1].id); }; const reject = (c: Candidate) => { const before = items; setItems((list) => list.filter((x) => x.id !== c.id)); setSelected(null); onReject?.(c.id); setToast({ text: `${c.name.split(" ")[0]} rejected · email queued`, undo: before }); }; // Board-relative coordinates work inside zoomed or scaled containers. const local = (clientX: number, clientY: number) => { const b = boardRef.current; if (!b) return { x: clientX, y: clientY, s: 1 }; const r = b.getBoundingClientRect(); const s = r.width / b.offsetWidth || 1; return { x: (clientX - r.left) / s + b.scrollLeft, y: (clientY - r.top) / s, s }; }; const onDown = (e: React.PointerEvent, c: Candidate) => { if (e.button !== 0 || e.pointerType === "touch") return; const rect = e.currentTarget.getBoundingClientRect(); const pt = local(e.clientX, e.clientY); const s = pt.s; e.currentTarget.setPointerCapture(e.pointerId); setDrag({ id: c.id, x: pt.x, y: pt.y, offX: (e.clientX - rect.left) / s, offY: (e.clientY - rect.top) / s, w: rect.width / s, startX: e.clientX, startY: e.clientY, active: false, over: c.stage }); }; const onMoveP = (e: React.PointerEvent) => { if (!drag) return; const pt = local(e.clientX, e.clientY); const active = drag.active || Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY) > 5; const el = document.elementFromPoint(e.clientX, e.clientY)?.closest("[data-col]"); setDrag({ ...drag, x: pt.x, y: pt.y, active, over: (el?.dataset.col as Stage) ?? null }); }; const onUp = (c: Candidate) => { if (!drag) return; if (drag.active) { if (drag.over) move(c.id, drag.over); } else setSelected((s) => (s === c.id ? null : c.id)); setDrag(null); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.col } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const dragged = drag?.active ? items.find((c) => c.id === drag.id) : null; const cardBody = (c: Candidate, ghost = false) => ( <>

{c.name} {c.current}

{c.next && (

{c.next}

)}

{[1, 2, 3, 4, 5].map((i) => ( ))} {c.source} {c.stage !== "hired" && ( 7 ? p.red : p.faint }} title="Days in stage"> {c.days === 0 ? "new" : `${c.days}d`} )}

{!ghost && (c.tags?.length ?? 0) > 0 && (

{c.tags!.map((t) => ( {t} ))}

)} ); return (

{team}

{role}

{total} candidates · {counts[4]} hired of 1 opening {stuck > 0 && · {stuck} waiting over a week}

setQuery(e.target.value)} placeholder="Search candidates or tags" aria-label="Search candidates" className="h-full min-w-0 flex-1 border-0 bg-transparent text-[13px] outline-none" style={{ color: p.text }} />

{/* Funnel */}

`${s.label} ${counts[i]}`).join(", ")}> {STAGES.map((s, i) => ( ))}

{STAGES.map((s, i) => { const list = visible.filter((c) => c.stage === s.id); const isOver = drag?.active && drag.over === s.id && dragged?.stage !== s.id; return (

{s.label} {counts[i]} {i > 0 && counts[i - 1] + counts[i] > 0 && ( {Math.round((STAGES.slice(i).reduce((a, _, j) => a + counts[i + j], 0) / total) * 100)}% )}

{list.map((c) => { const isSel = selected === c.id; const lifted = drag?.active && drag.id === c.id; return (

onDown(e, c)} onPointerMove={onMoveP} onPointerUp={() => onUp(c)} onPointerCancel={() => setDrag(null)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setSelected(isSel ? null : c.id); } else if (e.key === "ArrowRight" && e.shiftKey) advance(c); }} className={cn("cursor-grab touch-pan-x touch-pan-y rounded-lg border p-2.5 select-none active:cursor-grabbing", focus)} style={{ background: isSel ? p.cardHover : p.card, borderColor: isSel ? p.ring.replace(/[\d.]+\)$/, "0.35)") : p.border, ...ring }} > {cardBody(c)}

{isSel && (

{s.id !== "hired" && ( )}

)} ); })}

{q ? "No matches" : "Drop candidates here"}

); })}

{dragged && drag && ( )}

Drag cards between stages, or select one and use Move to. Shift + → also advances a focused card.

{toast && ( {toast.text} {toast.undo && ( )} )}

); } export default HiringPipelineBoard; 60:["$","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"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/hiring-pipeline-board/hiring-pipeline-board.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]