construction-gantt 0.1.0 → 0.3.0

package/src/Gantt.tsx

@@ -14,8 +14,32 @@ import {
 } from '@svar-ui/react-gantt';
 import '@svar-ui/react-gantt/style.css';
 import './Gantt.css';
-import { type FC, forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+  type FC,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { getTaskBaselineVariance } from './baseline';
+import {
+  cancelDrag,
+  DRAG_INITIAL,
+  type DragLinkState,
+  isDragInvalid,
+  moveDrag,
+  startDrag,
+} from './editing/dragLink.js';
+import {
+  type EditableField,
+  type EditState,
+  type TaskEditPatch,
+  useEditState,
+} from './editing/useEditState.js';
+import { usePreviewEngine } from './editing/usePreviewEngine.js';
 import type {
   GanttHandle,
   PdfExportOptions,
@@ -29,6 +53,7 @@ import type {
   Calendar,
   DependencyType,
   Link,
+  LinkId,
   Project,
   Task,
   TaskId,
@@ -98,6 +123,26 @@ export interface GanttProps {
    */
   markers?: GanttMarker[];
   /**
+   * Baselines to overlay as phantom ghost rows beneath each live task.
+   *
+   * - Single-baseline mode (length 1): the live bar carries the variance pill,
+   *   matching the existing single-baseline behaviour.
+   * - Multi-baseline mode (length > 1): each phantom row carries its own
+   *   variance pill against the live task; the live bar has no pill.
+   * - Indices not present on `project.baselines` are silently skipped (no
+   *   throw) so consumers can pass a fixed shape regardless of how many
+   *   baselines a particular project has captured.
+   *
+   * Phantom rows render in array order — consumers wanting chronological
+   * order should sort by `baseline.capturedAt` before passing.
+   */
+  baselineIndices?: ReadonlyArray<BaselineIndex>;
+  /**
+   * @deprecated Use `baselineIndices: [N]`. Single-index convenience prop
+   * kept as a no-friction alias for v0.x consumers. Removed at v1.0.
+   * If both `baselineIndex` and `baselineIndices` are set, `baselineIndices`
+   * takes precedence.
+   *
    * Show variance against this baseline index. If unset (or no matching
    * baseline exists on `project.baselines`), bars render without variance
    * pills. Construction-vertical use case (ADR-003): comparing the live
@@ -108,8 +153,9 @@ export interface GanttProps {
   /**
    * Render the baseline as a separate "ghost" bar beneath each live task.
    * Matches the MS Project baseline-view idiom construction PMs expect
-   * when reviewing variation claims. Default true when `baselineIndex`
-   * is set; pass `false` to keep variance shown only as in-bar pills.
+   * when reviewing variation claims. Default true when either
+   * `baselineIndex` or `baselineIndices` is set; pass `false` to keep
+   * variance shown only as in-bar pills.
    */
   showBaselineBars?: boolean;
   /**
@@ -141,8 +187,21 @@ export interface GanttProps {
    * `visibility.ts` for the contract test.
    */
   visibleTaskIds?: ReadonlySet<TaskId>;
+  // --- v0.4 editing ---
+  editMode?: boolean;
+  onTaskEdit?: (id: TaskId, patch: TaskEditPatch) => void;
+  onLinkCreate?: (source: TaskId, target: TaskId, type: DependencyType) => void;
+  onLinkDelete?: (linkId: LinkId) => void;
 }
 
+const DEFAULT_EDIT_COLUMNS: GanttColumn[] = [
+  { id: 'text', header: 'Task Name', field: 'text', width: 220 },
+  { id: 'start', header: 'Start', field: 'start', width: 100, align: 'center' },
+  { id: 'end', header: 'Finish', field: 'end', width: 100, align: 'center' },
+  { id: 'duration', header: 'Days', field: 'duration', width: 60, align: 'right' },
+  { id: 'progress', header: '%', field: 'progress', width: 50, align: 'right' },
+];
+
 interface SvarTaskWithComputed extends ITask {
   is_critical?: boolean;
   is_late?: boolean;
@@ -155,6 +214,10 @@ interface SvarTaskWithComputed extends ITask {
   is_ahead?: boolean;
   /** True for phantom rows representing a baseline snapshot's position. */
   is_baseline_ghost?: boolean;
+  /** When set, identifies which baseline (0..10) this phantom row mirrors. */
+  baseline_index?: BaselineIndex;
+  /** True for phantom rows representing a live recalc preview position. */
+  is_edit_preview?: boolean;
 }
 
 interface SvarMarker {
@@ -163,6 +226,58 @@ interface SvarMarker {
   css?: string;
 }
 
+function useDragLink() {
+  const [dragState, setDragState] = useState<DragLinkState>(DRAG_INITIAL);
+  const dragRef = useRef(dragState);
+  dragRef.current = dragState;
+
+  const onBarMouseDown = useCallback((sourceId: TaskId, e: React.MouseEvent) => {
+    e.preventDefault();
+    setDragState(startDrag(sourceId, e.clientX, e.clientY));
+  }, []);
+
+  const onMouseMove = useCallback((e: MouseEvent) => {
+    setDragState((s) => moveDrag(s, e.clientX, e.clientY));
+  }, []);
+
+  const onMouseUp = useCallback(
+    (
+      e: MouseEvent,
+      project: Project,
+      onLinkCreate: ((s: TaskId, t: TaskId, type: DependencyType) => void) | undefined,
+    ) => {
+      const current = dragRef.current;
+      if (current.status !== 'dragging') return;
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      const barEl = el?.closest('[data-task-id]');
+      const targetAttr = barEl?.getAttribute('data-task-id') ?? null;
+      // Resolve to a real task — rejects phantom row ids (e.g. "t1__baseline_0")
+      // and preserves the original typed TaskId (fixes numeric id loss via DOM attribute).
+      const targetTask = targetAttr
+        ? project.tasks.find((t) => String(t.id) === targetAttr)
+        : undefined;
+      if (!targetTask) {
+        setDragState(cancelDrag(current));
+        return;
+      }
+      const summaryIds = new Set<TaskId>(
+        project.tasks.filter((t) => t.type === 'summary').map((t) => t.id),
+      );
+      if (isDragInvalid(current.sourceId, targetTask.id, project.links, summaryIds)) {
+        setDragState(cancelDrag(current));
+        return;
+      }
+      onLinkCreate?.(current.sourceId, targetTask.id, 'FS');
+      setDragState(DRAG_INITIAL);
+    },
+    [],
+  );
+
+  const cancelDragLink = useCallback(() => setDragState(DRAG_INITIAL), []);
+
+  return { dragState, onBarMouseDown, onMouseMove, onMouseUp, cancelDragLink };
+}
+
 export const Gantt = forwardRef<GanttHandle, GanttProps>(function Gantt(
   {
     project,
@@ -172,14 +287,24 @@ export const Gantt = forwardRef<GanttHandle, GanttProps>(function Gantt(
     preScheduled = false,
     markers,
     baselineIndex,
+    baselineIndices,
     showBaselineBars,
     columns,
     visibleTaskIds,
+    editMode = false,
+    onTaskEdit,
+    onLinkCreate,
+    onLinkDelete,
   },
   ref,
 ) {
   const containerRef = useRef<HTMLDivElement>(null);
 
+  const effectiveBaselineIndices = useMemo<ReadonlyArray<BaselineIndex>>(
+    () => resolveEffectiveBaselineIndices(baselineIndices, baselineIndex),
+    [baselineIndices, baselineIndex],
+  );
+
   const scheduled = useMemo(
     () => (preScheduled ? project : schedule(project)),
     [project, preScheduled],
@@ -197,29 +322,53 @@ export const Gantt = forwardRef<GanttHandle, GanttProps>(function Gantt(
     [scheduled.calendars, scheduled.defaultCalendarId],
   );
 
-  const baseline = useMemo<Baseline | undefined>(() => {
-    if (baselineIndex === undefined) return undefined;
-    return scheduled.baselines.find((b) => b.index === baselineIndex);
-  }, [scheduled.baselines, baselineIndex]);
+  const editState = useEditState();
+  const editStateRef = useRef<typeof editState>(editState);
+  editStateRef.current = editState;
+  const onTaskEditRef = useRef(onTaskEdit);
+  onTaskEditRef.current = onTaskEdit;
+  const editGhostProject = usePreviewEngine(scheduled, editState.activeCell, editState.dirtyValue);
 
-  const ghostBarsEnabled = baseline !== undefined && (showBaselineBars ?? true);
+  const { dragState, onBarMouseDown, onMouseMove, onMouseUp, cancelDragLink } = useDragLink();
 
-  const svarTasks: ITask[] = useMemo(() => {
-    if (!ghostBarsEnabled || !baseline) {
-      return renderableTasks.map((t) => toSvarTask(t, baseline, calendar));
-    }
-    // Interleave each real task with its baseline-snapshot ghost row.
-    // Phantoms share the real task's `parent` so they stay grouped under
-    // the same summary in hierarchy views.
-    const out: SvarTaskWithComputed[] = [];
-    for (const t of renderableTasks) {
-      out.push(toSvarTask(t, baseline, calendar));
-      if (t.type === 'summary') continue;
-      const phantom = makeBaselinePhantom(t, baseline);
-      if (phantom) out.push(phantom);
-    }
-    return out;
-  }, [renderableTasks, baseline, calendar, ghostBarsEnabled]);
+  useEffect(() => {
+    if (!editMode || dragState.status !== 'dragging') return;
+    const handleMove = (e: MouseEvent) => onMouseMove(e);
+    const handleUp = (e: MouseEvent) => onMouseUp(e, scheduled, onLinkCreate);
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') cancelDragLink();
+    };
+    window.addEventListener('mousemove', handleMove);
+    window.addEventListener('mouseup', handleUp);
+    window.addEventListener('keydown', handleEsc);
+    return () => {
+      window.removeEventListener('mousemove', handleMove);
+      window.removeEventListener('mouseup', handleUp);
+      window.removeEventListener('keydown', handleEsc);
+    };
+  }, [editMode, dragState.status, onMouseMove, onMouseUp, cancelDragLink, scheduled, onLinkCreate]);
+
+  // Resolve effective indices → actual Baseline records, dropping any that
+  // don't exist on the project. Preserves caller order so phantom rows
+  // render in the array order the consumer passed.
+  const resolvedBaselines = useMemo<Baseline[]>(
+    () => resolveBaselines(scheduled.baselines, effectiveBaselineIndices),
+    [scheduled.baselines, effectiveBaselineIndices],
+  );
+
+  const ghostBarsEnabled = resolvedBaselines.length > 0 && (showBaselineBars ?? true);
+
+  const svarTasks: ITask[] = useMemo(
+    () =>
+      buildSvarTasks(
+        renderableTasks,
+        resolvedBaselines,
+        calendar,
+        ghostBarsEnabled,
+        editGhostProject ?? undefined,
+      ),
+    [renderableTasks, resolvedBaselines, calendar, ghostBarsEnabled, editGhostProject],
+  );
   const svarLinks: ILink[] = useMemo(() => scheduled.links.map(toSvarLink), [scheduled.links]);
 
   const projectEnd = useMemo(() => getProjectEnd(scheduled), [scheduled]);
@@ -237,11 +386,51 @@ export const Gantt = forwardRef<GanttHandle, GanttProps>(function Gantt(
   // undefined → don't pass columns to SVAR (use SVAR defaults).
   // [] → pass false to SVAR (hide grid entirely).
   // [...] → convert each column.
+  // In editMode, inject interactive cell renderers for known editable fields.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: editState.activeCell is intentionally used as a dep — editStateRef/onTaskEditRef are accessed at event time via refs, so only activeCell (which changes cell-to-cell) drives column recompute
   const svarColumns: IColumnConfig[] | false | undefined = useMemo(() => {
-    if (columns === undefined) return undefined;
-    if (columns.length === 0) return false;
-    return columns.map(toSvarColumn);
-  }, [columns]);
+    if (!editMode) {
+      if (columns === undefined) return undefined;
+      if (columns.length === 0) return false;
+      return columns.map(toSvarColumn);
+    }
+    const effectiveCols = columns ?? DEFAULT_EDIT_COLUMNS;
+    if (effectiveCols.length === 0) return false;
+    return effectiveCols.map((col) => {
+      if (col.render || !col.field || !EDITABLE_FIELDS.has(col.field as string)) {
+        return toSvarColumn(col);
+      }
+      const base = toSvarColumn(col);
+      return {
+        ...base,
+        cell: buildEditableCell(col.field as EditableField, editStateRef, onTaskEditRef),
+      };
+    });
+  }, [columns, editMode, editState.activeCell]);
+
+  const taskTemplate = useMemo(() => {
+    if (!editMode) return ConstructionBar as FC<{ data: ITask }>;
+    // Wrap ConstructionBar with a drag handle at the right edge of each task bar.
+    const EditableBar: FC<{ data: SvarTaskWithComputed }> = ({ data }) => (
+      <div
+        data-task-id={data.id !== undefined ? String(data.id) : undefined}
+        style={{ position: 'relative', width: '100%', height: '100%' }}
+      >
+        <ConstructionBar data={data} />
+        {!data.is_baseline_ghost && !data.is_edit_preview && (
+          // biome-ignore lint/a11y/noStaticElementInteractions: drag handle — pointer-down initiates link drag; keyboard alternative (Escape) handled at window level
+          <div
+            className="construction-gantt-drag-handle"
+            onMouseDown={(e) => {
+              if (data.id !== undefined) onBarMouseDown(data.id, e);
+            }}
+            title="Drag to create link"
+          />
+        )}
+      </div>
+    );
+    return EditableBar as FC<{ data: ITask }>;
+  }, [editMode, onBarMouseDown]);
 
   useImperativeHandle(
     ref,
@@ -255,6 +444,7 @@ export const Gantt = forwardRef<GanttHandle, GanttProps>(function Gantt(
             cellHeight,
             markers,
             baselineIndex,
+            baselineIndices,
             showBaselineBars,
             columns,
             height,
@@ -272,6 +462,7 @@ export const Gantt = forwardRef<GanttHandle, GanttProps>(function Gantt(
             cellHeight,
             markers,
             baselineIndex,
+            baselineIndices,
             showBaselineBars,
             columns,
             height,
@@ -291,6 +482,7 @@ export const Gantt = forwardRef<GanttHandle, GanttProps>(function Gantt(
       cellHeight,
       markers,
       baselineIndex,
+      baselineIndices,
       showBaselineBars,
       columns,
       height,
@@ -299,7 +491,25 @@ export const Gantt = forwardRef<GanttHandle, GanttProps>(function Gantt(
   );
 
   return (
-    <div ref={containerRef} style={{ height }}>
+    // biome-ignore lint/a11y/noStaticElementInteractions: gantt container — link-delete click is an optional editing affordance, not a primary interaction target
+    // biome-ignore lint/a11y/useKeyWithClickEvents: keyboard alternative (Delete key) is out of scope for v0.4; Escape already handled in drag listener
+    <div
+      ref={containerRef}
+      style={{ position: 'relative', height }}
+      onClick={
+        editMode && onLinkDelete
+          ? (e) => {
+              // SVAR-internal: dependency arrows render as <polyline class="wx-line ..."> with
+              // data-link-id holding the link id. Re-verify on SVAR upgrades by searching
+              // node_modules/@svar-ui/react-gantt/dist/index.es.js for "wx-line" + "data-link-id".
+              const el = (e.target as Element).closest('.wx-line');
+              if (!el) return;
+              const linkId = el.getAttribute('data-link-id');
+              if (linkId) onLinkDelete(linkId);
+            }
+          : undefined
+      }
+    >
       <SvarGantt
         tasks={svarTasks}
         links={svarLinks}
@@ -309,35 +519,85 @@ export const Gantt = forwardRef<GanttHandle, GanttProps>(function Gantt(
         cellHeight={cellHeight}
         markers={svarMarkers}
         highlightTime={highlightTime}
-        taskTemplate={ConstructionBar}
+        taskTemplate={taskTemplate}
         {...(svarColumns !== undefined ? { columns: svarColumns as IColumnConfig[] } : {})}
       />
+      {editMode && dragState.status === 'dragging' && (
+        <svg
+          aria-hidden="true"
+          style={{
+            position: 'fixed',
+            inset: 0,
+            width: '100vw',
+            height: '100vh',
+            pointerEvents: 'none',
+            zIndex: 9999,
+          }}
+        >
+          <line
+            x1={dragState.startX}
+            y1={dragState.startY}
+            x2={dragState.cursorX}
+            y2={dragState.cursorY}
+            stroke="rgba(59,130,246,0.8)"
+            strokeWidth={2}
+            strokeDasharray="6 3"
+          />
+        </svg>
+      )}
     </div>
   );
 });
 
-const ConstructionBar: FC<{ data: SvarTaskWithComputed }> = ({ data }) => {
+export const ConstructionBar: FC<{ data: SvarTaskWithComputed }> = ({ data }) => {
+  if (data.is_edit_preview) {
+    return <div className="bode-edit-preview" />;
+  }
   // Phantom baseline row — render a slim outlined ghost bar.
   if (data.is_baseline_ghost) {
+    const baselineIdx = data.baseline_index ?? 0;
+    const phantomSlipped = data.is_slipped ?? false;
+    const phantomAhead = data.is_ahead ?? false;
     return (
       <div
-        style={{
-          height: '60%',
-          marginTop: '15%',
-          border: '1.5px dashed #94a3b8',
-          background: 'transparent',
-          borderRadius: 3,
-          fontSize: 9,
-          color: '#64748b',
-          display: 'flex',
-          alignItems: 'center',
-          padding: '0 6px',
-          fontStyle: 'italic',
-          whiteSpace: 'nowrap',
-        }}
+        className={`bode-baseline-ghost bode-baseline-${baselineIdx}`}
         title="Baseline position — where this task was when the baseline was captured"
       >
-        baseline
+        <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>{data.text}</span>
+        {phantomSlipped && (
+          <span
+            style={{
+              padding: '0 6px',
+              background: '#fed7aa',
+              color: '#7c2d12',
+              borderRadius: 3,
+              fontSize: 10,
+              fontWeight: 700,
+              lineHeight: '16px',
+              whiteSpace: 'nowrap',
+            }}
+            title="Drifted later than the baseline"
+          >
+            +{workingMinutesToShortLabel(data.start_variance ?? 0)}
+          </span>
+        )}
+        {phantomAhead && (
+          <span
+            style={{
+              padding: '0 6px',
+              background: '#bbf7d0',
+              color: '#14532d',
+              borderRadius: 3,
+              fontSize: 10,
+              fontWeight: 700,
+              lineHeight: '16px',
+              whiteSpace: 'nowrap',
+            }}
+            title="Ahead of the baseline"
+          >
+            −{workingMinutesToShortLabel(data.start_variance ?? 0)}
+          </span>
+        )}
       </div>
     );
   }
@@ -496,12 +756,18 @@ function toSvarTask(
   return base;
 }
 
-function makeBaselinePhantom(t: Task, baseline: Baseline): SvarTaskWithComputed | null {
+function makeBaselinePhantom(
+  t: Task,
+  baseline: Baseline,
+  calendar: Calendar | undefined,
+): SvarTaskWithComputed | null {
   const snap = baseline.tasks.get(t.id);
   if (!snap) return null;
+  const variance = calendar ? getTaskBaselineVariance(t, baseline, calendar) : undefined;
+  const startVariance = variance?.startVariance ?? 0;
   return {
-    id: `${t.id}-baseline-${baseline.index}`,
-    text: '(baseline)',
+    id: `${t.id}__baseline_${baseline.index}`,
+    text: formatBaselineLabel(baseline),
     start: snap.start,
     end: snap.end,
     duration: snap.duration,
@@ -509,6 +775,25 @@ function makeBaselinePhantom(t: Task, baseline: Baseline): SvarTaskWithComputed
     type: 'task',
     parent: t.parent,
     is_baseline_ghost: true,
+    baseline_index: baseline.index,
+    start_variance: startVariance,
+    is_slipped: startVariance >= 30,
+    is_ahead: startVariance <= -30,
+  };
+}
+
+function makeEditPreviewPhantom(liveTask: Task, ghostTask: Task): SvarTaskWithComputed {
+  return {
+    id: `${liveTask.id}__edit_preview`,
+    text: 'Preview',
+    start: ghostTask.start,
+    end: ghostTask.end,
+    duration: ghostTask.duration,
+    progress: 0,
+    type: 'task',
+    parent: liveTask.parent,
+    is_baseline_ghost: true,
+    is_edit_preview: true,
   };
 }
 
@@ -535,6 +820,30 @@ function dependencyTypeToSvar(t: DependencyType): ILink['type'] {
   }
 }
 
+/**
+ * Format a baseline's metadata for display in the phantom row's label.
+ * Returns "${name ?? `Baseline ${index}`} — captured ${formatShortDate(capturedAt)}".
+ *
+ * Exported for testing. Not part of the public surface.
+ */
+export function formatBaselineLabel(baseline: Baseline): string {
+  const name = baseline.name ?? `Baseline ${baseline.index}`;
+  return `${name} — captured ${formatShortDate(baseline.capturedAt)}`;
+}
+
+/**
+ * Format a Date as YYYY-MM-DD using local-time components. Deterministic
+ * across locales (no Intl.DateTimeFormat — those vary by host locale).
+ *
+ * Exported for testing. Not part of the public surface.
+ */
+export function formatShortDate(d: Date): string {
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
 function getProjectEnd(p: Project): Date {
   if (p.end) return p.end;
   let latestMs = Number.NEGATIVE_INFINITY;
@@ -546,6 +855,108 @@ function getProjectEnd(p: Project): Date {
   return Number.isFinite(latestMs) ? new Date(latestMs + cushion) : new Date(p.start);
 }
 
+/**
+ * Resolve the effective baseline indices from the two GanttProps inputs.
+ *
+ * - `baselineIndices` takes precedence when set (including when empty —
+ *   passing `[]` is an explicit opt-out signal).
+ * - When `baselineIndices` is undefined, fall back to wrapping `baselineIndex`
+ *   in a single-element array.
+ * - When both are undefined, return an empty array.
+ *
+ * Exported for testing. Not part of the public surface; consumers don't
+ * call this directly.
+ */
+export function resolveEffectiveBaselineIndices(
+  baselineIndices: ReadonlyArray<BaselineIndex> | undefined,
+  baselineIndex: BaselineIndex | undefined,
+): ReadonlyArray<BaselineIndex> {
+  return baselineIndices ?? (baselineIndex !== undefined ? [baselineIndex] : []);
+}
+
+/**
+ * Map effective baseline indices to actual Baseline records on a project,
+ * preserving caller order. Indices not present on the project are silently
+ * dropped (per spec — consumers can pass a fixed shape across projects
+ * with varying baseline counts).
+ *
+ * Exported for testing. Not part of the public surface.
+ */
+export function resolveBaselines(
+  allBaselines: Baseline[],
+  effectiveIndices: ReadonlyArray<BaselineIndex>,
+): Baseline[] {
+  if (effectiveIndices.length === 0) return [];
+  const byIndex = new Map(allBaselines.map((b) => [b.index, b]));
+  const out: Baseline[] = [];
+  for (const idx of effectiveIndices) {
+    const b = byIndex.get(idx);
+    if (b) out.push(b);
+  }
+  return out;
+}
+
+/**
+ * Convert the rendered tasks + resolved baselines into the SVAR ITask[]
+ * shape, including phantom ghost rows for each (task × baseline) pair
+ * when ghost bars are enabled.
+ *
+ * In single-baseline mode (resolvedBaselines.length === 1), the live row
+ * carries the variance pill (`start_variance` / `is_slipped` / `is_ahead`
+ * are populated relative to that one baseline). In multi-baseline mode
+ * (length > 1), the live row gets no variance fields (would require a
+ * "primary" baseline concept that the spec rejects); each phantom row
+ * gets its own.
+ *
+ * Exported for testing. Not part of the public surface.
+ */
+export function buildSvarTasks(
+  renderableTasks: Task[],
+  resolvedBaselines: Baseline[],
+  calendar: Calendar | undefined,
+  ghostBarsEnabled: boolean,
+  editGhostProject?: Project,
+): SvarTaskWithComputed[] {
+  const ghostById = new Map<TaskId, Task>(editGhostProject?.tasks.map((t) => [t.id, t]) ?? []);
+
+  if (!ghostBarsEnabled || resolvedBaselines.length === 0) {
+    const primary = resolvedBaselines[0];
+    const out = renderableTasks.map((t) => toSvarTask(t, primary, calendar));
+    if (ghostById.size > 0) {
+      for (const t of renderableTasks) {
+        if (t.type === 'summary') continue;
+        const ghost = ghostById.get(t.id);
+        if (
+          ghost &&
+          (ghost.start.getTime() !== t.start.getTime() || ghost.end.getTime() !== t.end.getTime())
+        ) {
+          out.push(makeEditPreviewPhantom(t, ghost));
+        }
+      }
+    }
+    return out;
+  }
+  const out: SvarTaskWithComputed[] = [];
+  for (const t of renderableTasks) {
+    const liveBarBaseline = resolvedBaselines.length === 1 ? resolvedBaselines[0] : undefined;
+    out.push(toSvarTask(t, liveBarBaseline, calendar));
+    if (t.type === 'summary') continue;
+    for (const b of resolvedBaselines) {
+      const phantom = makeBaselinePhantom(t, b, calendar);
+      if (phantom) out.push(phantom);
+    }
+    // Edit preview phantom goes last (renders below baseline phantoms).
+    const ghost = ghostById.get(t.id);
+    if (
+      ghost &&
+      (ghost.start.getTime() !== t.start.getTime() || ghost.end.getTime() !== t.end.getTime())
+    ) {
+      out.push(makeEditPreviewPhantom(t, ghost));
+    }
+  }
+  return out;
+}
+
 function resolveMarkers(
   userMarkers: GanttMarker[] | undefined,
   projectStart: Date,
@@ -608,6 +1019,110 @@ function toSvarColumn(c: GanttColumn): IColumnConfig {
   return config;
 }
 
+function getInputType(field: EditableField): string {
+  if (field === 'start' || field === 'end') return 'date';
+  if (field === 'duration' || field === 'progress') return 'number';
+  return 'text';
+}
+
+function getInputValue(task: Task, field: EditableField): string {
+  switch (field) {
+    case 'text':
+      return task.text;
+    case 'start':
+      return formatShortDate(task.start);
+    case 'end':
+      return formatShortDate(task.end);
+    case 'duration':
+      return String(Math.round(task.duration / 60 / 8));
+    case 'progress':
+      return String(task.progress);
+    case 'scheduleMode':
+      return task.scheduleMode;
+  }
+}
+
+const EDITABLE_FIELDS = new Set<string>([
+  'text',
+  'start',
+  'end',
+  'duration',
+  'progress',
+  'scheduleMode',
+]);
+
+function buildEditableCell(
+  field: EditableField,
+  editStateRef: { readonly current: EditState },
+  onTaskEditRef: { readonly current: GanttProps['onTaskEdit'] },
+): IColumnConfig['cell'] {
+  return ({ row }: { row: unknown }) => {
+    const editState = editStateRef.current;
+    const task = row as SvarTaskWithComputed;
+    if (task.is_baseline_ghost || (task as { is_edit_preview?: boolean }).is_edit_preview) {
+      return <span />;
+    }
+    const isReadOnly =
+      task.type === 'summary' && (field === 'start' || field === 'end' || field === 'duration');
+
+    const isActive =
+      editState.activeCell?.taskId === task.id && editState.activeCell?.field === field;
+
+    if (isActive) {
+      return (
+        <input
+          // biome-ignore lint/a11y/noAutofocus: intentional — cell was clicked
+          autoFocus
+          key={`${editState.activeCell?.taskId}-${field}`}
+          type={getInputType(field)}
+          defaultValue={editState.dirtyValue}
+          style={{ width: '100%', boxSizing: 'border-box' }}
+          onChange={(e) => editStateRef.current.setValue(e.target.value)}
+          onBlur={() => editStateRef.current.commitCell(onTaskEditRef.current)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === 'Tab') {
+              e.preventDefault();
+              editStateRef.current.commitCell(onTaskEditRef.current);
+            } else if (e.key === 'Escape') {
+              editStateRef.current.cancelCell();
+            }
+          }}
+        />
+      );
+    }
+
+    const displayValue = (() => {
+      if (field === 'start' || field === 'end') {
+        const d = task[field as 'start' | 'end'];
+        return d instanceof Date ? formatShortDate(d) : '';
+      }
+      if (field === 'duration') return String(Math.round((task.duration ?? 0) / 60 / 8));
+      if (field === 'progress') return String(task.progress ?? 0);
+      return String((task as Record<string, unknown>)[field] ?? '');
+    })();
+
+    if (isReadOnly || task.id === undefined) {
+      return <span>{displayValue}</span>;
+    }
+
+    const taskId = task.id as TaskId;
+    const activate = () =>
+      editStateRef.current.activateCell(
+        taskId,
+        field,
+        getInputValue(task as unknown as Task, field),
+      );
+
+    return (
+      // biome-ignore lint/a11y/useKeyWithClickEvents: cell activation via keyboard handled by the input that renders on activate
+      // biome-ignore lint/a11y/noStaticElementInteractions: grid cell — role="gridcell" would be on the parent SVAR element
+      <span style={{ cursor: 'text', display: 'block', width: '100%' }} onClick={activate}>
+        {displayValue}
+      </span>
+    );
+  };
+}
+
 function buildHighlightTime(
   calendar: Calendar | undefined,
 ): ((date: Date, unit: 'day' | 'hour') => string) | undefined {