60: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"] 61: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"] 62:T5cb0,"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 interface GanttTask { id: string; phase: string; name: string; start: number; // days from projectStart duration: number; // 0 = milestone progress: number; // 0–100 owner?: string; dependsOn?: string[]; } export interface GanttPhase { id: string; name: string; color: string; } export interface GanttChartProps { title?: string; projectStart?: string; // YYYY-MM-DD, a Monday days?: number; today?: number; // day index phases?: GanttPhase[]; tasks?: GanttTask[]; onTasksChange?: (tasks: GanttTask[]) => 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)", panel: "#0E0E0E", card: "#141414", border: "rgba(255,255,255,0.08)", grid: "rgba(255,255,255,0.05)", weekend: "rgba(255,255,255,0.025)", sel: "rgba(255,255,255,0.05)", on: "#F5F4F1", onText: "#0A0A0A", red: "#F87171", line: "rgba(245,244,241,0.35)", ring: "rgba(245,244,241,0.6)", track: "rgba(255,255,255,0.08)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", panel: "#F4F4F1", card: "#FFFFFF", border: "rgba(10,10,10,0.09)", grid: "rgba(10,10,10,0.06)", weekend: "rgba(10,10,10,0.03)", sel: "rgba(10,10,10,0.04)", on: "#0A0A0A", onText: "#FAFAF8", red: "#DC2626", line: "rgba(10,10,10,0.35)", ring: "rgba(10,10,10,0.5)", track: "rgba(10,10,10,0.08)" }, }; const PHASES: GanttPhase[] = [ { id: "discovery", name: "Discovery", color: "#60A5FA" }, { id: "design", name: "Design", color: "#A78BFA" }, { id: "build", name: "Build", color: "#34D399" }, { id: "launch", name: "Launch", color: "#FBBF24" }, ]; const TASKS: GanttTask[] = [ { id: "research", phase: "discovery", name: "User interviews", start: 0, duration: 5, progress: 100, owner: "Lena Brandt" }, { id: "audit", phase: "discovery", name: "Content audit", start: 2, duration: 4, progress: 100, owner: "Tomás Ferreira" }, { id: "scope", phase: "discovery", name: "Define scope", start: 6, duration: 3, progress: 80, owner: "Lena Brandt", dependsOn: ["research", "audit"] }, { id: "wire", phase: "design", name: "Wireframes", start: 9, duration: 5, progress: 60, owner: "Mia Okafor", dependsOn: ["scope"] }, { id: "visual", phase: "design", name: "Visual design", start: 14, duration: 7, progress: 15, owner: "Mia Okafor", dependsOn: ["wire"] }, { id: "review", phase: "design", name: "Design sign-off", start: 21, duration: 0, progress: 0, dependsOn: ["visual"] }, { id: "api", phase: "build", name: "CMS and API", start: 9, duration: 10, progress: 35, owner: "Daniel Reyes", dependsOn: ["scope"] }, { id: "front", phase: "build", name: "Frontend", start: 21, duration: 10, progress: 0, owner: "Tomás Ferreira", dependsOn: ["visual"] }, { id: "migrate", phase: "build", name: "Content migration", start: 19, duration: 6, progress: 0, owner: "Daniel Reyes", dependsOn: ["api"] }, { id: "qa", phase: "launch", name: "QA and fixes", start: 31, duration: 5, progress: 0, owner: "Lena Brandt", dependsOn: ["front", "migrate"] }, { id: "launch", phase: "launch", name: "Go live", start: 36, duration: 0, progress: 0, dependsOn: ["qa"] }, ]; const RH = 36; const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const dayDate = (base: string, n: number) => { const [y, m, d] = base.split("-").map(Number); return new Date(Date.UTC(y, m - 1, d + n)); }; const short = (base: string, n: number) => { const d = dayDate(base, n); return `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}`; }; const initials = (n: string) => n .split(" ") .map((w) => w[0]) .join("") .slice(0, 2); const end = (t: GanttTask) => t.start + t.duration; /** Push every task to start no earlier than the end of what it depends on (one pass in dependency order). */ function autoSchedule(tasks: GanttTask[]) { const byId = new Map(tasks.map((t) => [t.id, { ...t }])); const done = new Set(); const visit = (id: string) => { if (done.has(id)) return; done.add(id); const t = byId.get(id)!; for (const d of t.dependsOn ?? []) visit(d); const earliest = Math.max(t.start, ...(t.dependsOn ?? []).map((d) => end(byId.get(d)!))); t.start = earliest; }; tasks.forEach((t) => visit(t.id)); return tasks.map((t) => byId.get(t.id)!); } export function GanttChart({ title = "Website relaunch", projectStart = "2026-11-02", days = 42, today = 10, phases = PHASES, tasks: initial = TASKS, onTasksChange, theme = "dark", className }: GanttChartProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [tasks, setTasks] = React.useState(initial); const [zoom, setZoom] = React.useState<"day" | "week">("day"); const [collapsed, setCollapsed] = React.useState>({}); const [selected, setSelected] = React.useState("wire"); const [drag, setDrag] = React.useState(null); const scrollRef = React.useRef(null); const dw = zoom === "day" ? 30 : 13; const W = days * dw; const commit = (next: GanttTask[]) => { setTasks(next); onTasksChange?.(next); }; const byId = new Map(tasks.map((t) => [t.id, t])); const color = (t: GanttTask) => phases.find((ph) => ph.id === t.phase)?.color ?? p.on; // Visible rows type Row = { kind: "phase"; phase: GanttPhase } | { kind: "task"; task: GanttTask }; const rows: Row[] = phases.flatMap((ph) => [{ kind: "phase", phase: ph } as Row, ...(collapsed[ph.id] ? [] : tasks.filter((t) => t.phase === ph.id).map((t) => ({ kind: "task", task: t }) as Row))]); const rowIndex = new Map(); rows.forEach((r, i) => r.kind === "task" && rowIndex.set(r.task.id, i)); const links = tasks.flatMap((t) => (t.dependsOn ?? []).map((d) => ({ from: byId.get(d)!, to: t }))).filter((l) => l.from); const conflicts = links.filter((l) => l.to.start < end(l.from)); const update = (id: string, patch: Partial) => tasks.map((t) => (t.id === id ? { ...t, ...patch } : t)); const onPointerDown = (e: React.PointerEvent, t: GanttTask, mode: "move" | "resize") => { if (e.button !== 0) return; e.stopPropagation(); const el = e.currentTarget as HTMLElement; el.setPointerCapture(e.pointerId); const host = scrollRef.current!; const scale = host.getBoundingClientRect().width / host.offsetWidth || 1; setDrag({ id: t.id, mode, x0: e.clientX, start0: t.start, dur0: t.duration, scale, moved: false }); setSelected(t.id); }; const onPointerMove = (e: React.PointerEvent) => { if (!drag) return; const delta = Math.round((e.clientX - drag.x0) / drag.scale / dw); const moved = drag.moved || Math.abs(e.clientX - drag.x0) > 3; if (moved !== drag.moved) setDrag({ ...drag, moved }); const t = byId.get(drag.id)!; if (drag.mode === "move") { const start = Math.min(Math.max(0, drag.start0 + delta), days - Math.max(1, t.duration)); if (start !== t.start) setTasks(update(drag.id, { start })); } else { const duration = Math.min(Math.max(1, drag.dur0 + delta), days - t.start); if (duration !== t.duration) setTasks(update(drag.id, { duration })); } }; const onPointerUp = () => { if (drag?.moved) onTasksChange?.(tasks); setDrag(null); }; const onBarKey = (e: React.KeyboardEvent, t: GanttTask) => { const step = e.key === "ArrowLeft" ? -1 : e.key === "ArrowRight" ? 1 : 0; if (!step) return; e.preventDefault(); if (e.shiftKey && t.duration > 0) commit(update(t.id, { duration: Math.min(Math.max(1, t.duration + step), days - t.start) })); else commit(update(t.id, { start: Math.min(Math.max(0, t.start + step), days - Math.max(1, t.duration)) })); }; const scrollToToday = () => { const el = scrollRef.current; if (!el) return; const left = el.querySelector("[data-left]")?.offsetWidth ?? 0; el.scrollTo({ left: Math.max(0, today * dw - (el.clientWidth - left) / 2), behavior: reduce ? "auto" : "smooth" }); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.bg } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const btn = cn("flex h-8 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3 text-[13px] font-medium disabled:cursor-not-allowed disabled:opacity-40", focus); const sel = selected ? byId.get(selected) : undefined; // Header cells const weeks = Array.from({ length: Math.ceil(days / 7) }, (_, i) => i * 7); const linkPath = (from: GanttTask, to: GanttTask) => { const y1 = rowIndex.get(from.id)! * RH + RH / 2; const y2 = rowIndex.get(to.id)! * RH + RH / 2; const x1 = end(from) * dw + (from.duration ? 0 : 6); const x2 = to.start * dw - (to.duration ? 0 : 6); if (x2 - x1 >= 12) { const mx = x1 + 6; return `M${x1} ${y1} H${mx} V${y2} H${x2 - 1}`; } const midY = y1 + (y2 > y1 ? RH / 2 : -RH / 2); return `M${x1} ${y1} H${x1 + 6} V${midY} H${x2 - 8} V${y2} H${x2 - 1}`; }; return (

{/* Toolbar */}

{title}

{short(projectStart, 0)} – {short(projectStart, days - 1)} · {tasks.filter((t) => t.duration).length} tasks · {tasks.filter((t) => !t.duration).length} milestones

{conflicts.length > 0 && ( commit(autoSchedule(tasks))} className={cn(btn, "border bg-transparent")} style={{ borderColor: `${p.red}66`, color: p.red, ...ring }} > )}

{(["day", "week"] as const).map((z) => ( ))}

{/* Chart */}

{/* Header */}

Task Owner Done

{weeks.map((w) => ( {short(projectStart, w)} ))}

{zoom === "day" && Array.from({ length: days }, (_, i) => ( 4 ? p.faint : p.muted, fontWeight: i === today ? 600 : 400 }}> {dayDate(projectStart, i).getUTCDate()} ))}

{/* Left column */}

{rows.map((r) => r.kind === "phase" ? ( ) : (

setSelected(r.task.id)} className="flex cursor-pointer items-center gap-2 px-3 text-[13px] @[640px]:pr-4 @[640px]:pl-[38px]" style={{ height: RH, background: selected === r.task.id ? p.sel : "transparent", color: selected === r.task.id ? p.text : p.muted }}> {!r.task.duration && } {r.task.name} {r.task.owner && ( {initials(r.task.owner)} )} {r.task.duration ? `${r.task.progress}%` : "—"}

), )}

{/* Timeline */}

{/* weekends + grid */} {Array.from({ length: days }, (_, i) => i % 7 > 4 || i % 7 === 0 ? : null, )} {rows.map((r, i) => ( ))} {/* today */} {/* dependency links */} {/* bars */} {rows.map((r, i) => { if (r.kind === "phase") { const list = tasks.filter((t) => t.phase === r.phase.id); const s = Math.min(...list.map((t) => t.start)); const e = Math.max(...list.map(end)); return ; } const t = r.task; const c = color(t); const isSel = selected === t.id; const bad = conflicts.some((l) => l.to.id === t.id); const label = `${t.name}, ${short(projectStart, t.start)}${t.duration ? ` to ${short(projectStart, end(t) - 1)}, ${t.duration} days, ${t.progress}% done` : ", milestone"}. Arrow keys move${t.duration ? ", Shift + arrows resize" : ""}.`; if (!t.duration) return ( onPointerDown(e, t, "move")} onKeyDown={(e) => onBarKey(e, t)} onFocus={() => setSelected(t.id)} initial={false} animate={{ left: t.start * dw - 8 }} transition={{ duration: drag || reduce ? 0 : 0.3 }} className={cn("absolute z-[7] h-4 w-4 cursor-grab touch-none rounded-[3px] border-0 active:cursor-grabbing", focus)} style={{ top: i * RH + RH / 2 - 8, rotate: 45, background: c, boxShadow: isSel ? `0 0 0 2px ${p.bg}, 0 0 0 3.5px ${c}` : "0 0 0 0 transparent", ...ring }} /> ); return ( onPointerDown(e, t, "resize")} className="absolute inset-y-0 -right-1 w-3 cursor-ew-resize touch-none" aria-hidden="true"> ); })}

{/* Selected task */}

{sel ? ( <>

{sel.name}

{sel.duration ? `${short(projectStart, sel.start)} – ${short(projectStart, end(sel) - 1)} · ${sel.duration} days` : `Milestone · ${short(projectStart, sel.start)}`} {sel.dependsOn?.length ? ` · after ${sel.dependsOn.map((d) => byId.get(d)?.name).join(", ")}` : ""}

{sel.duration > 0 && ( Progress commit(update(sel.id, { progress: Number(e.target.value) }))} className="w-32 cursor-pointer @[640px]:w-44" style={{ accentColor: color(sel) }} /> {sel.progress}% )} ) : (

Select a bar to see its details.

)}

); } export default GanttChart; 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/new-york/gantt-chart/gantt-chart.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]