64: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"] 65:I[544296,["/_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"],"ItemStyles"] 66:I[8513,["/_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"],"ScrollArea"] 67:I[8513,["/_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"],"ScrollBar"] 68: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"] 69:T4633,"use client"; import { useEffect, useMemo, useRef, useState } from "react"; // --------------------------------------------------------------------------- // GanttAsciiCriticalPath — a project schedule whose critical path is COMPUTED, // not annotated. A real CPM pass (Kahn topological order -> ES/EF forward -> // LS/LF backward -> totalFloat = LS - ES) runs in one useMemo and decides one // thing: a task with zero float draws the heavy accented set (┝━━┥), every // other task the light set (├──┤). Dragging a bar re-runs the pass on the same // frame, so handing slack to a different chain swaps the weights mid-gesture. // // No canvas, no rAF: every recompute is a direct response to pointer or key // input. Empty timeline cells render nothing at all — the ink sits in the bars, // the week ticks and the one `┊` today column. // // NO DEPENDENCY ARROWS. A connector lane anchored to the successor's row can // place a predecessor's corner glyph at the right COLUMN but never at the right // ROW, so every edge reads as leaving whatever task sits directly above. Doing // it truthfully needs vertical routing across intervening rows — more apparatus // than the edge earns: the bar WEIGHT already says which chain the ship date // rides on, and that reads at rest with no pointer. // // PITCH: the timeline grid is laid out in `ch` units, not pixels. In a // monospace face 1ch is exactly one advance width, so consecutive `─`/`━` // glyphs butt up into a continuous rule at ANY font size and in any fallback // font — a hardcoded px pitch dashes the bars the moment the two disagree. // The drag handler needs a pixel figure, so it measures the row grid's real // width / cols at pointerdown rather than assuming one. // --------------------------------------------------------------------------- export interface GanttTask { /** stable id, referenced by other tasks' deps */ id: string; label: string; /** duration in days */ duration: number; /** ids this task cannot start before */ deps?: string[]; } export interface GanttAsciiCriticalPathProps { /** the scheduled tasks */ tasks?: GanttTask[]; /** timeline cells drawn per row */ cols?: number; /** day index marked by the `┊` column. A fixed prop, never new Date() */ today?: number; /** week number printed at the first tick */ startWeek?: number; /** heading above the chart */ title?: string; /** extra classes merged onto the rendered root element */ className?: string; } const LABEL_CHARS = 16; const DEFAULT_TASKS: GanttTask[] = [ { id: "discovery", label: "Discovery interviews", duration: 4, deps: [] }, { id: "wireframes", label: "Wireframe review", duration: 3, deps: ["discovery"] }, { id: "design-system", label: "Design system", duration: 5, deps: ["wireframes"] }, { id: "api-contract", label: "API contract", duration: 3, deps: ["discovery"] }, { id: "integrate-payments", label: "Integrate payments", duration: 7, deps: ["api-contract"] }, { id: "checkout-ui", label: "Checkout UI build", duration: 6, deps: ["design-system"] }, { id: "launch-comms", label: "Launch comms", duration: 2, deps: ["design-system"] }, { id: "qa-regression", label: "QA regression pass", duration: 4, deps: ["checkout-ui", "integrate-payments"], }, { id: "ship", label: "Production rollout", duration: 3, deps: ["qa-regression", "launch-comms"] }, ]; type Computed = { es: number; ef: number; ls: number; lf: number; float: number; critical: boolean; cyclic: boolean; }; function padLabel(label: string): string { if (label.length <= LABEL_CHARS) return label.padEnd(LABEL_CHARS, " "); return `${label.slice(0, LABEL_CHARS - 1)}…`; } export function GanttAsciiCriticalPath({ tasks = DEFAULT_TASKS, cols = 32, today = 9, startWeek = 12, title = "Checkout replatform", className = "", }: GanttAsciiCriticalPathProps) { const [offsets, setOffsets] = useState>({}); const [hovered, setHovered] = useState(null); const [focused, setFocused] = useState(null); const [dragId, setDragId] = useState(null); const dragRef = useRef<{ id: string; startX: number; startOffset: number; prev: number; cellPx: number; } | null>(null); // --- CPM: Kahn topological order, forward pass, backward pass ------------- const { plan, projectEnd, scale, bases } = useMemo(() => { const byId = new Map(tasks.map((t) => [t.id, t])); const indeg = new Map(); const succ = new Map(); for (const t of tasks) { const deps = (t.deps ?? []).filter((d) => byId.has(d) && d !== t.id); indeg.set(t.id, deps.length); for (const d of deps) succ.set(d, [...(succ.get(d) ?? []), t.id]); } const queue = tasks.filter((t) => (indeg.get(t.id) ?? 0) === 0).map((t) => t.id); const order: string[] = []; while (queue.length) { const id = queue.shift() as string; order.push(id); for (const s of succ.get(id) ?? []) { const n = (indeg.get(s) ?? 0) - 1; indeg.set(s, n); if (n === 0) queue.push(s); } } // Anything Kahn never drained sits on a cycle: excluded, never hung on. const inOrder = new Set(order); // FORWARD: ES = max(0, max(EF of deps) + manualOffset), EF = ES + duration const es = new Map(); const ef = new Map(); // earliest day a task could start on dependencies alone, before its manual // offset — the floor an ArrowLeft nudge must not drift below. const base0 = new Map(); for (const id of order) { const t = byId.get(id) as GanttTask; let base = 0; for (const d of t.deps ?? []) if (inOrder.has(d)) base = Math.max(base, ef.get(d) ?? 0); base0.set(id, base); const start = Math.max(0, base + (offsets[id] ?? 0)); es.set(id, start); ef.set(id, start + Math.max(1, t.duration)); } const end = order.reduce((m, id) => Math.max(m, ef.get(id) ?? 0), 1); // BACKWARD, reverse topological: LF = min(LS of successors) or projectEnd const ls = new Map(); const lf = new Map(); for (let i = order.length - 1; i >= 0; i--) { const id = order[i]; const t = byId.get(id) as GanttTask; const outs = (succ.get(id) ?? []).filter((s) => inOrder.has(s)); const late = outs.length ? Math.min(...outs.map((s) => ls.get(s) ?? end)) : end; lf.set(id, late); ls.set(id, late - Math.max(1, t.duration)); } const map = new Map(); for (const t of tasks) { if (!inOrder.has(t.id)) { map.set(t.id, { es: 0, ef: 0, ls: 0, lf: 0, float: 0, critical: false, cyclic: true }); continue; } const f = (ls.get(t.id) as number) - (es.get(t.id) as number); map.set(t.id, { es: es.get(t.id) as number, ef: ef.get(t.id) as number, ls: ls.get(t.id) as number, lf: lf.get(t.id) as number, float: f, // <= rather than ===: a drag can push a task to negative float // mid-gesture, and that row is still the tight one, not a slack one. critical: f <= 0, cyclic: false, }); } return { plan: map, projectEnd: end, bases: base0, scale: Math.max(1, Math.ceil(end / cols)) }; }, [tasks, offsets, cols]); // --- drag: pixel dx -> whole cells -> manualOffset, CPM re-runs live ------ useEffect(() => { if (!dragId) return; const move = (e: PointerEvent) => { const d = dragRef.current; if (!d) return; const cells = Math.round((e.clientX - d.startX) / d.cellPx); setOffsets((o) => ({ ...o, [d.id]: d.startOffset + cells * scale })); }; const end = () => { dragRef.current = null; setDragId(null); }; const key = (e: KeyboardEvent) => { if (e.key !== "Escape") return; const d = dragRef.current; if (d) setOffsets((o) => ({ ...o, [d.id]: d.prev })); dragRef.current = null; setDragId(null); }; window.addEventListener("pointermove", move); window.addEventListener("pointerup", end); window.addEventListener("pointercancel", end); window.addEventListener("keydown", key); return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", end); window.removeEventListener("pointercancel", end); window.removeEventListener("keydown", key); }; }, [dragId, scale]); // Clamped both ways against the task's dependency-earliest start: at −base so // repeated ArrowLeft on a task already sitting at day 0 cannot accumulate // invisible negative offset that a later ArrowRight has to spend itself // unwinding, and at cols*scale − base so held ArrowRight cannot run ES past // aria-valuemax while the bar saturates at the last column. aria-valuenow // (the clamped ES) therefore stays in step with the stored offset. const nudge = (id: string, dir: number) => setOffsets((o) => { const base = bases.get(id) ?? 0; const next = (o[id] ?? 0) + dir * scale; return { ...o, [id]: Math.min(cols * scale - base, Math.max(-base, next)) }; }); const colOf = (day: number) => Math.floor(day / scale); const todayCol = colOf(today); const geom = (id: string) => { const c = plan.get(id) as Computed; const start = Math.min(cols - 2, Math.max(0, colOf(c.es))); const len = Math.max(2, Math.min(cols - start, Math.round((c.ef - c.es) / scale))); return { start, len, c }; }; const active = hovered ?? focused; const readout = (() => { if (!active) { const crit = tasks.filter((t) => plan.get(t.id)?.critical && !plan.get(t.id)?.cyclic).length; const slack = tasks.length - crit; return `${projectEnd} days critical chain ${crit} tasks ${slack} tasks carry float`; } const t = tasks.find((x) => x.id === active) as GanttTask; const c = plan.get(active) as Computed; if (c.cyclic) return `${t.label} × circular dependency, excluded from the pass`; return `${t.label} ES ${c.es} EF ${c.ef} LS ${c.ls} LF ${c.lf} float ${c.float} day${ c.float === 1 ? "" : "s" }`; })(); // 1ch === one monospace advance, so `─` runs join with no seam at any size. const cell = "inline-block text-center"; const cellStyle = { width: "1ch" } as const; const labelStyle = { width: `${LABEL_CHARS}ch` } as const; const trackStyle = { gridTemplateColumns: `repeat(${cols}, 1ch)` } as const; return (

{title} ━ critical ─ has float

{/* week labels */}

{Array.from({ length: cols }, (_, i) => { const day = i * scale; if (day % 7 !== 0) return null; return ( {`W${startWeek + day / 7}`} ); })}

{/* ruler: `┬` every 7 days over a `─` rule, `┊` at today */}

┌

{Array.from({ length: cols }, (_, i) => { const day = i * scale; const tick = day % 7 === 0; const isToday = i === todayCol; return ( {isToday ? "┊" : tick ? "┬" : "─"} ); })}

{tasks.map((t) => { const { start, len, c } = geom(t.id); const isActive = active === t.id; const barGlyphs = c.critical ? `┝${"━".repeat(Math.max(0, len - 2))}┥` : `├${"─".repeat(Math.max(0, len - 2))}┤`; const todayFree = todayCol < start || todayCol >= start + len; return (

setHovered(t.id)} onPointerLeave={() => setHovered((h) => (h === t.id ? null : h))} > {padLabel(t.label)} │ {c.cyclic ? ( × cycle — excluded ) : (

{todayFree && todayCol >= 0 && todayCol < cols && ( ┊ )}

)}

); })}

{readout}

); } 63:["$","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":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/gantt-ascii-critical-path/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/gantt-ascii-critical-path.tsx"}],"className":"h-[70svh] min-h-80"}]]}]