construction-gantt 0.1.0 → 0.3.0

package/dist/index.js

@@ -7,8 +7,8 @@ function __insertCSS(code) {
   ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
 }
 
-import { useRef, useReducer, useMemo, forwardRef, useImperativeHandle } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useReducer, useMemo, useState, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Gantt as Gantt$1 } from '@svar-ui/react-gantt';
 import '@svar-ui/react-gantt/style.css';
 import { XMLParser, XMLBuilder } from 'fast-xml-parser';
@@ -1907,7 +1907,182 @@ function reducer(state, action) {
     };
 }
 
-__insertCSS(".construction-gantt-non-working{background:rgba(241,245,249,.65)}.construction-gantt-marker-today{background:#ef4444;color:#fff;font-weight:600}.construction-gantt-marker-milestone{background:#2563eb;color:#fff;font-weight:500}");
+__insertCSS(".construction-gantt-non-working{background:rgba(241,245,249,.65)}.construction-gantt-marker-today{background:#ef4444;color:#fff;font-weight:600}.construction-gantt-marker-milestone{background:#2563eb;color:#fff;font-weight:500}.bode-baseline-ghost{display:flex;align-items:center;gap:6px;height:60%;margin-top:15%;padding:0 8px;border-radius:3px;font-size:9px;font-style:italic;color:#fff;opacity:.85;white-space:nowrap}.bode-baseline-0{background:#6b7280}.bode-baseline-1{background:#3b82f6}.bode-baseline-2{background:#8b5cf6}.bode-baseline-3{background:#14b8a6;color:#0f172a}.bode-baseline-4{background:#f59e0b;color:#0f172a}.bode-baseline-5{background:#ec4899}.bode-baseline-6{background:#06b6d4;color:#0f172a}.bode-baseline-7{background:#84cc16;color:#0f172a}.bode-baseline-8{background:#f97316;color:#0f172a}.bode-baseline-9{background:#a855f7}.bode-baseline-10{background:#dc2626}.bode-edit-preview{height:60%;margin-top:15%;background:repeating-linear-gradient(45deg,rgba(59,130,246,.35) 0,rgba(59,130,246,.35) 6px,rgba(59,130,246,.15) 6px,rgba(59,130,246,.15) 12px);border:1.5px dashed rgba(59,130,246,.7);border-radius:3px;pointer-events:none}.construction-gantt-drag-handle{position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:rgba(59,130,246,.85);cursor:crosshair;opacity:0;transition:opacity .15s;z-index:10}.wx-task:hover .construction-gantt-drag-handle{opacity:1}");
+
+const DRAG_INITIAL = {
+    status: 'idle'
+};
+function startDrag(sourceId, startX, startY) {
+    return {
+        status: 'dragging',
+        sourceId,
+        startX,
+        startY,
+        cursorX: startX,
+        cursorY: startY
+    };
+}
+function moveDrag(state, cursorX, cursorY) {
+    if (state.status !== 'dragging') return state;
+    return {
+        ...state,
+        cursorX,
+        cursorY
+    };
+}
+function cancelDrag(_state) {
+    return DRAG_INITIAL;
+}
+function isDragInvalid(sourceId, targetId, existingLinks, summaryIds) {
+    if (String(sourceId) === String(targetId)) return true;
+    if ([
+        ...summaryIds
+    ].some((id)=>String(id) === String(targetId))) return true;
+    return existingLinks.some((l)=>String(l.source) === String(sourceId) && String(l.target) === String(targetId));
+}
+
+function parseFieldValue(field, value) {
+    switch(field){
+        case 'text':
+            return {
+                text: value
+            };
+        case 'start':
+            {
+                const d = new Date(`${value}T08:00:00`);
+                if (Number.isNaN(d.getTime())) return {};
+                return {
+                    start: d
+                };
+            }
+        case 'end':
+            {
+                const d = new Date(`${value}T08:00:00`);
+                if (Number.isNaN(d.getTime())) return {};
+                return {
+                    end: d
+                };
+            }
+        case 'duration':
+            {
+                const n = Number(value);
+                if (!Number.isFinite(n) || n < 0) return {};
+                return {
+                    duration: Math.round(n * 8 * 60)
+                };
+            }
+        case 'progress':
+            {
+                const n = Number(value);
+                if (!Number.isFinite(n)) return {};
+                return {
+                    progress: Math.min(100, Math.max(0, n))
+                };
+            }
+        case 'scheduleMode':
+            {
+                if (value !== 'auto' && value !== 'manual') return {};
+                return {
+                    scheduleMode: value
+                };
+            }
+    }
+}
+function useEditState() {
+    const [state, setState] = useState({
+        activeCell: null,
+        dirtyValue: ''
+    });
+    // stateRef lets commitCell read the latest state without stale closures.
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const activateCell = useCallback((taskId, field, initialValue)=>{
+        setState({
+            activeCell: {
+                taskId,
+                field
+            },
+            dirtyValue: initialValue
+        });
+    }, []);
+    const setValue = useCallback((value)=>{
+        setState((prev)=>({
+                ...prev,
+                dirtyValue: value
+            }));
+    }, []);
+    const commitCell = useCallback((onTaskEdit)=>{
+        const { activeCell, dirtyValue } = stateRef.current;
+        if (activeCell === null) return;
+        const patch = parseFieldValue(activeCell.field, dirtyValue);
+        onTaskEdit?.(activeCell.taskId, patch);
+        setState({
+            activeCell: null,
+            dirtyValue: ''
+        });
+    }, []);
+    const cancelCell = useCallback(()=>{
+        setState({
+            activeCell: null,
+            dirtyValue: ''
+        });
+    }, []);
+    return {
+        activeCell: state.activeCell,
+        dirtyValue: state.dirtyValue,
+        activateCell,
+        setValue,
+        commitCell,
+        cancelCell
+    };
+}
+
+function usePreviewEngine(committed, activeCell, dirtyValue, debounceMs = 80) {
+    const [ghostProject, setGhostProject] = useState(null);
+    const timerRef = useRef(null);
+    useEffect(()=>{
+        const CPM_IRRELEVANT_FIELDS = new Set([
+            'text',
+            'progress',
+            'scheduleMode'
+        ]);
+        if (activeCell === null || CPM_IRRELEVANT_FIELDS.has(activeCell.field)) {
+            setGhostProject(null);
+            return;
+        }
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(()=>{
+            const patch = parseFieldValue(activeCell.field, dirtyValue);
+            if (Object.keys(patch).length === 0) {
+                setGhostProject(null); // invalid input — suppress ghost
+                return;
+            }
+            const patchedTasks = committed.tasks.map((t)=>t.id === activeCell.taskId ? {
+                    ...t,
+                    ...patch
+                } : t);
+            setGhostProject(schedule({
+                ...committed,
+                tasks: patchedTasks
+            }));
+        }, debounceMs);
+        return ()=>{
+            if (timerRef.current !== null) clearTimeout(timerRef.current);
+        };
+    }, [
+        committed,
+        activeCell,
+        dirtyValue,
+        debounceMs
+    ]);
+    // Clear immediately when cell deactivates (don't wait for debounce timeout).
+    useEffect(()=>{
+        if (activeCell === null) setGhostProject(null);
+    }, [
+        activeCell
+    ]);
+    return ghostProject;
+}
 
 // Render-only visibility filter for <Gantt> tasks.
 //
@@ -1916,11 +2091,9 @@ __insertCSS(".construction-gantt-non-working{background:rgba(241,245,249,.65)}.c
 // This is the canonical example: the engine always runs on the full task
 // set; the visibility filter applies only to the rendered output.
 //
-// Direct lift from the CM domain rule (FrappeGanttView.tsx:366-371 in
-// Bode-Builds): "Hiding a predecessor would otherwise make a dependent
-// task's early-start collapse to 0, which is wrong." We honour the rule
-// by structure — the filter sits AFTER schedule() in the pipeline, so
-// computed fields on the visible tasks reflect the full schedule.
+// The filter sits AFTER schedule() in the pipeline so computed fields on
+// the visible tasks reflect the full schedule — hiding a predecessor must
+// not cause a dependent task's early-start to collapse to 0.
 /**
  * Return the subset of `tasks` whose ids appear in `visibleTaskIds`.
  *
@@ -1938,8 +2111,89 @@ __insertCSS(".construction-gantt-non-working{background:rgba(241,245,249,.65)}.c
     return tasks.filter((t)=>visibleTaskIds.has(t.id));
 }
 
-const Gantt = /*#__PURE__*/ forwardRef(function Gantt({ project, height = 500, cellWidth = 48, cellHeight = 42, preScheduled = false, markers, baselineIndex, showBaselineBars, columns, visibleTaskIds }, ref) {
+const DEFAULT_EDIT_COLUMNS = [
+    {
+        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'
+    }
+];
+function useDragLink() {
+    const [dragState, setDragState] = useState(DRAG_INITIAL);
+    const dragRef = useRef(dragState);
+    dragRef.current = dragState;
+    const onBarMouseDown = useCallback((sourceId, e)=>{
+        e.preventDefault();
+        setDragState(startDrag(sourceId, e.clientX, e.clientY));
+    }, []);
+    const onMouseMove = useCallback((e)=>{
+        setDragState((s)=>moveDrag(s, e.clientX, e.clientY));
+    }, []);
+    const onMouseUp = useCallback((e, project, onLinkCreate)=>{
+        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());
+            return;
+        }
+        const summaryIds = new Set(project.tasks.filter((t)=>t.type === 'summary').map((t)=>t.id));
+        if (isDragInvalid(current.sourceId, targetTask.id, project.links, summaryIds)) {
+            setDragState(cancelDrag());
+            return;
+        }
+        onLinkCreate?.(current.sourceId, targetTask.id, 'FS');
+        setDragState(DRAG_INITIAL);
+    }, []);
+    const cancelDragLink = useCallback(()=>setDragState(DRAG_INITIAL), []);
+    return {
+        dragState,
+        onBarMouseDown,
+        onMouseMove,
+        onMouseUp,
+        cancelDragLink
+    };
+}
+const Gantt = /*#__PURE__*/ forwardRef(function Gantt({ project, height = 500, cellWidth = 48, cellHeight = 42, preScheduled = false, markers, baselineIndex, baselineIndices, showBaselineBars, columns, visibleTaskIds, editMode = false, onTaskEdit, onLinkCreate, onLinkDelete }, ref) {
     const containerRef = useRef(null);
+    const effectiveBaselineIndices = useMemo(()=>resolveEffectiveBaselineIndices(baselineIndices, baselineIndex), [
+        baselineIndices,
+        baselineIndex
+    ]);
     const scheduled = useMemo(()=>preScheduled ? project : schedule(project), [
         project,
         preScheduled
@@ -1954,34 +2208,51 @@ const Gantt = /*#__PURE__*/ forwardRef(function Gantt({ project, height = 500, c
         scheduled.calendars,
         scheduled.defaultCalendarId
     ]);
-    const baseline = useMemo(()=>{
-        if (baselineIndex === undefined) return undefined;
-        return scheduled.baselines.find((b)=>b.index === baselineIndex);
+    const editState = useEditState();
+    const editStateRef = useRef(editState);
+    editStateRef.current = editState;
+    const onTaskEditRef = useRef(onTaskEdit);
+    onTaskEditRef.current = onTaskEdit;
+    const editGhostProject = usePreviewEngine(scheduled, editState.activeCell, editState.dirtyValue);
+    const { dragState, onBarMouseDown, onMouseMove, onMouseUp, cancelDragLink } = useDragLink();
+    useEffect(()=>{
+        if (!editMode || dragState.status !== 'dragging') return;
+        const handleMove = (e)=>onMouseMove(e);
+        const handleUp = (e)=>onMouseUp(e, scheduled, onLinkCreate);
+        const handleEsc = (e)=>{
+            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(()=>resolveBaselines(scheduled.baselines, effectiveBaselineIndices), [
         scheduled.baselines,
-        baselineIndex
+        effectiveBaselineIndices
     ]);
-    const ghostBarsEnabled = baseline !== undefined && (showBaselineBars ?? true);
-    const svarTasks = 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 = [];
-        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;
-    }, [
+    const ghostBarsEnabled = resolvedBaselines.length > 0 && (showBaselineBars ?? true);
+    const svarTasks = useMemo(()=>buildSvarTasks(renderableTasks, resolvedBaselines, calendar, ghostBarsEnabled, editGhostProject ?? undefined), [
         renderableTasks,
-        baseline,
+        resolvedBaselines,
         calendar,
-        ghostBarsEnabled
+        ghostBarsEnabled,
+        editGhostProject
     ]);
     const svarLinks = useMemo(()=>scheduled.links.map(toSvarLink), [
         scheduled.links
@@ -2001,16 +2272,63 @@ const Gantt = /*#__PURE__*/ forwardRef(function Gantt({ project, height = 500, c
     // 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 = useMemo(()=>{
-        if (columns === undefined) return undefined;
-        if (columns.length === 0) return false;
-        return columns.map(toSvarColumn);
+        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)) {
+                return toSvarColumn(col);
+            }
+            const base = toSvarColumn(col);
+            return {
+                ...base,
+                cell: buildEditableCell(col.field, editStateRef, onTaskEditRef)
+            };
+        });
+    }, [
+        columns,
+        editMode,
+        editState.activeCell
+    ]);
+    const taskTemplate = useMemo(()=>{
+        if (!editMode) return ConstructionBar;
+        // Wrap ConstructionBar with a drag handle at the right edge of each task bar.
+        const EditableBar = ({ data })=>/*#__PURE__*/ jsxs("div", {
+                "data-task-id": data.id !== undefined ? String(data.id) : undefined,
+                style: {
+                    position: 'relative',
+                    width: '100%',
+                    height: '100%'
+                },
+                children: [
+                    /*#__PURE__*/ jsx(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
+                    /*#__PURE__*/ jsx("div", {
+                        className: "construction-gantt-drag-handle",
+                        onMouseDown: (e)=>{
+                            if (data.id !== undefined) onBarMouseDown(data.id, e);
+                        },
+                        title: "Drag to create link"
+                    })
+                ]
+            });
+        return EditableBar;
     }, [
-        columns
+        editMode,
+        onBarMouseDown
     ]);
     useImperativeHandle(ref, ()=>({
             async exportPNG (options) {
-                const { exportPNG } = await import('./png-DKZeKnRh.js');
+                const { exportPNG } = await import('./png-C2poOLQo.js');
                 return exportPNG({
                     scheduled,
                     ganttProps: {
@@ -2018,6 +2336,7 @@ const Gantt = /*#__PURE__*/ forwardRef(function Gantt({ project, height = 500, c
                         cellHeight,
                         markers,
                         baselineIndex,
+                        baselineIndices,
                         showBaselineBars,
                         columns,
                         height,
@@ -2027,7 +2346,7 @@ const Gantt = /*#__PURE__*/ forwardRef(function Gantt({ project, height = 500, c
                 });
             },
             async exportPDF (options) {
-                const { exportPDF } = await import('./pdf-CBaoJRTI.js');
+                const { exportPDF } = await import('./pdf-BsFqo2UW.js');
                 return exportPDF({
                     scheduled,
                     ganttProps: {
@@ -2035,6 +2354,7 @@ const Gantt = /*#__PURE__*/ forwardRef(function Gantt({ project, height = 500, c
                         cellHeight,
                         markers,
                         baselineIndex,
+                        baselineIndices,
                         showBaselineBars,
                         columns,
                         height,
@@ -2056,52 +2376,125 @@ const Gantt = /*#__PURE__*/ forwardRef(function Gantt({ project, height = 500, c
         cellHeight,
         markers,
         baselineIndex,
+        baselineIndices,
         showBaselineBars,
         columns,
         height,
         visibleTaskIds
     ]);
-    return /*#__PURE__*/ jsx("div", {
+    return(// 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
+    /*#__PURE__*/ jsxs("div", {
         ref: containerRef,
         style: {
+            position: 'relative',
             height
         },
-        children: /*#__PURE__*/ jsx(Gantt$1, {
-            tasks: svarTasks,
-            links: svarLinks,
-            start: scheduled.start,
-            end: projectEnd,
-            cellWidth: cellWidth,
-            cellHeight: cellHeight,
-            markers: svarMarkers,
-            highlightTime: highlightTime,
-            taskTemplate: ConstructionBar,
-            ...svarColumns !== undefined ? {
-                columns: svarColumns
-            } : {}
-        })
-    });
+        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.closest('.wx-line');
+            if (!el) return;
+            const linkId = el.getAttribute('data-link-id');
+            if (linkId) onLinkDelete(linkId);
+        } : undefined,
+        children: [
+            /*#__PURE__*/ jsx(Gantt$1, {
+                tasks: svarTasks,
+                links: svarLinks,
+                start: scheduled.start,
+                end: projectEnd,
+                cellWidth: cellWidth,
+                cellHeight: cellHeight,
+                markers: svarMarkers,
+                highlightTime: highlightTime,
+                taskTemplate: taskTemplate,
+                ...svarColumns !== undefined ? {
+                    columns: svarColumns
+                } : {}
+            }),
+            editMode && dragState.status === 'dragging' && /*#__PURE__*/ jsx("svg", {
+                "aria-hidden": "true",
+                style: {
+                    position: 'fixed',
+                    inset: 0,
+                    width: '100vw',
+                    height: '100vh',
+                    pointerEvents: 'none',
+                    zIndex: 9999
+                },
+                children: /*#__PURE__*/ jsx("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"
+                })
+            })
+        ]
+    }));
 });
 const ConstructionBar = ({ data })=>{
+    if (data.is_edit_preview) {
+        return /*#__PURE__*/ jsx("div", {
+            className: "bode-edit-preview"
+        });
+    }
     // Phantom baseline row — render a slim outlined ghost bar.
     if (data.is_baseline_ghost) {
-        return /*#__PURE__*/ jsx("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'
-            },
+        const baselineIdx = data.baseline_index ?? 0;
+        const phantomSlipped = data.is_slipped ?? false;
+        const phantomAhead = data.is_ahead ?? false;
+        return /*#__PURE__*/ jsxs("div", {
+            className: `bode-baseline-ghost bode-baseline-${baselineIdx}`,
             title: "Baseline position — where this task was when the baseline was captured",
-            children: "baseline"
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    style: {
+                        flex: 1,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis'
+                    },
+                    children: data.text
+                }),
+                phantomSlipped && /*#__PURE__*/ jsxs("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",
+                    children: [
+                        "+",
+                        workingMinutesToShortLabel(data.start_variance ?? 0)
+                    ]
+                }),
+                phantomAhead && /*#__PURE__*/ jsxs("span", {
+                    style: {
+                        padding: '0 6px',
+                        background: '#bbf7d0',
+                        color: '#14532d',
+                        borderRadius: 3,
+                        fontSize: 10,
+                        fontWeight: 700,
+                        lineHeight: '16px',
+                        whiteSpace: 'nowrap'
+                    },
+                    title: "Ahead of the baseline",
+                    children: [
+                        "−",
+                        workingMinutesToShortLabel(data.start_variance ?? 0)
+                    ]
+                })
+            ]
         });
     }
     const isCritical = data.is_critical ?? false;
@@ -2252,19 +2645,39 @@ function toSvarTask(t, baseline, calendar) {
     if (t.type === 'summary') base.open = t.open ?? true;
     return base;
 }
-function makeBaselinePhantom(t, baseline) {
+function makeBaselinePhantom(t, baseline, calendar) {
     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,
         progress: 0,
         type: 'task',
         parent: t.parent,
-        is_baseline_ghost: true
+        is_baseline_ghost: true,
+        baseline_index: baseline.index,
+        start_variance: startVariance,
+        is_slipped: startVariance >= 30,
+        is_ahead: startVariance <= -30
+    };
+}
+function makeEditPreviewPhantom(liveTask, ghostTask) {
+    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
     };
 }
 function toSvarLink(l) {
@@ -2288,6 +2701,26 @@ function dependencyTypeToSvar(t) {
             return 's2e';
     }
 }
+/**
+ * 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.
+ */ function formatBaselineLabel(baseline) {
+    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.
+ */ function formatShortDate(d) {
+    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) {
     if (p.end) return p.end;
     let latestMs = Number.NEGATIVE_INFINITY;
@@ -2298,6 +2731,91 @@ function getProjectEnd(p) {
     const cushion = 24 * 60 * 60 * 1000; // 1 day
     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.
+ */ function resolveEffectiveBaselineIndices(baselineIndices, 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.
+ */ function resolveBaselines(allBaselines, effectiveIndices) {
+    if (effectiveIndices.length === 0) return [];
+    const byIndex = new Map(allBaselines.map((b)=>[
+            b.index,
+            b
+        ]));
+    const out = [];
+    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.
+ */ function buildSvarTasks(renderableTasks, resolvedBaselines, calendar, ghostBarsEnabled, editGhostProject) {
+    const ghostById = new Map(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 = [];
+    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, projectStart, projectEnd) {
     if (userMarkers) return userMarkers.map(toSvarMarker);
     // Default: today line, only if today falls within the project window.
@@ -2366,6 +2884,95 @@ function toSvarMarker(m) {
     };
     return config;
 }
+function getInputType(field) {
+    if (field === 'start' || field === 'end') return 'date';
+    if (field === 'duration' || field === 'progress') return 'number';
+    return 'text';
+}
+function getInputValue(task, field) {
+    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([
+    'text',
+    'start',
+    'end',
+    'duration',
+    'progress',
+    'scheduleMode'
+]);
+function buildEditableCell(field, editStateRef, onTaskEditRef) {
+    return ({ row })=>{
+        const editState = editStateRef.current;
+        const task = row;
+        if (task.is_baseline_ghost || task.is_edit_preview) {
+            return /*#__PURE__*/ jsx("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 /*#__PURE__*/ jsx("input", {
+                // biome-ignore lint/a11y/noAutofocus: intentional — cell was clicked
+                autoFocus: true,
+                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();
+                    }
+                }
+            }, `${editState.activeCell?.taskId}-${field}`);
+        }
+        const displayValue = (()=>{
+            if (field === 'start' || field === 'end') {
+                const d = task[field];
+                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[field] ?? '');
+        })();
+        if (isReadOnly || task.id === undefined) {
+            return /*#__PURE__*/ jsx("span", {
+                children: displayValue
+            });
+        }
+        const taskId = task.id;
+        const activate = ()=>editStateRef.current.activateCell(taskId, field, getInputValue(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
+        /*#__PURE__*/ jsx("span", {
+            style: {
+                cursor: 'text',
+                display: 'block',
+                width: '100%'
+            },
+            onClick: activate,
+            children: displayValue
+        }));
+    };
+}
 function buildHighlightTime(calendar) {
     if (!calendar) return undefined;
     return (date, unit)=>{
@@ -2411,6 +3018,7 @@ const KNOWN_TASK_FIELDS = new Set([
     'Finish',
     'Duration',
     'ConstraintType',
+    'ConstraintDate',
     'Milestone',
     'Summary',
     'OutlineLevel',
@@ -2594,6 +3202,7 @@ function parseMspdi(xml) {
     }
     const tasks = [];
     const links = [];
+    const outlineStack = [];
     // Per-task baseline snapshots, keyed by baseline Number (BaselineIndex).
     // Flattened into project.baselines below.
     const baselineAccum = new Map();
@@ -2614,7 +3223,10 @@ function parseMspdi(xml) {
         const isMilestone = String(raw.Milestone ?? '0') === '1';
         const isSummary = String(raw.Summary ?? '0') === '1';
         const taskType = isSummary ? 'summary' : isMilestone ? 'milestone' : 'task';
-        tasks.push({
+        const outlineLevel = Math.max(1, Number(raw.OutlineLevel ?? '1'));
+        const parentId = outlineLevel > 1 ? outlineStack[outlineLevel - 2] : undefined;
+        const constraint = parseConstraint(raw);
+        const parsedTask = {
             id: uid,
             text: name,
             type: taskType,
@@ -2622,8 +3234,13 @@ function parseMspdi(xml) {
             duration,
             start,
             end,
-            progress: 0
-        });
+            progress: Number(raw.PercentComplete ?? '0')
+        };
+        if (parentId !== undefined) parsedTask.parent = parentId;
+        if (constraint !== undefined) parsedTask.constraint = constraint;
+        tasks.push(parsedTask);
+        outlineStack[outlineLevel - 1] = uid;
+        outlineStack.length = outlineLevel;
         // Walk predecessor links nested inside the task.
         const preds = Array.isArray(raw.PredecessorLink) ? raw.PredecessorLink : raw.PredecessorLink !== undefined ? [
             raw.PredecessorLink
@@ -3025,9 +3642,31 @@ const MSPDI_TYPE_TO_DEPENDENCY = {
     2: 'SF',
     3: 'SS'
 };
+const MSPDI_CONSTRAINT_TO_INTERNAL = {
+    0: 'ASAP',
+    1: 'ALAP',
+    2: 'MSO',
+    3: 'MFO',
+    4: 'SNET',
+    5: 'SNLT',
+    6: 'FNET',
+    7: 'FNLT'
+};
 function mspdiTypeToDependencyType(t) {
     return MSPDI_TYPE_TO_DEPENDENCY[t] ?? 'FS';
 }
+function parseConstraint(raw) {
+    const value = Number(raw.ConstraintType ?? '0');
+    const type = MSPDI_CONSTRAINT_TO_INTERNAL[value];
+    if (!type || type === 'ASAP') return undefined;
+    const constraint = {
+        type
+    };
+    if (raw.ConstraintDate !== undefined && raw.ConstraintDate !== '') {
+        constraint.date = parseMspdiDate(String(raw.ConstraintDate));
+    }
+    return constraint;
+}
 function parseMspdiDate(s) {
     // MSPDI emits ISO 8601 like `2026-01-05T08:00:00` (no timezone in
     // practice; MS Project writes local time). We treat it as local.
@@ -3137,6 +3776,7 @@ function serializeMspdi(project, options = {}) {
     // Group baselines by taskId. Each task may have one snapshot per baseline
     // (0-10), emitted as <Baseline> children nested inside the task.
     const baselinesByTask = buildBaselinesByTask(project.baselines);
+    const outlineLevelByTask = buildOutlineLevels(project.tasks);
     const tasksOut = project.tasks.map((t, idx)=>{
         const taskOut = {
             UID: String(t.id),
@@ -3145,11 +3785,15 @@ function serializeMspdi(project, options = {}) {
             Start: formatMspdiDate(t.start),
             Finish: formatMspdiDate(t.end),
             Duration: formatMspdiDuration(t.duration),
-            ConstraintType: 0,
+            ConstraintType: constraintTypeToMspdi(t.constraint?.type),
             Milestone: t.type === 'milestone' ? 1 : 0,
             Summary: t.type === 'summary' ? 1 : 0,
-            OutlineLevel: 1
+            OutlineLevel: outlineLevelByTask.get(t.id) ?? 1,
+            PercentComplete: t.progress
         };
+        if (t.constraint?.date) {
+            taskOut.ConstraintDate = formatMspdiDate(t.constraint.date);
+        }
         const incoming = linksByTarget.get(String(t.id));
         if (incoming?.length) {
             taskOut.PredecessorLink = incoming.map(toMspdiLink);
@@ -3226,6 +3870,46 @@ function dependencyTypeToMspdi(t) {
             return 3;
     }
 }
+function constraintTypeToMspdi(t) {
+    switch(t){
+        case undefined:
+        case 'ASAP':
+            return 0;
+        case 'ALAP':
+            return 1;
+        case 'MSO':
+            return 2;
+        case 'MFO':
+            return 3;
+        case 'SNET':
+            return 4;
+        case 'SNLT':
+            return 5;
+        case 'FNET':
+            return 6;
+        case 'FNLT':
+            return 7;
+    }
+}
+function buildOutlineLevels(tasks) {
+    const parentById = new Map(tasks.map((t)=>[
+            t.id,
+            t.parent
+        ]));
+    const cache = new Map();
+    function depth(taskId) {
+        const cached = cache.get(taskId);
+        if (cached !== undefined) return cached;
+        const parentId = parentById.get(taskId);
+        const value = parentId === undefined ? 1 : depth(parentId) + 1;
+        cache.set(taskId, value);
+        return value;
+    }
+    return new Map(tasks.map((t)=>[
+            t.id,
+            depth(t.id)
+        ]));
+}
 function formatMspdiDate(d) {
     // MSPDI emits local time without timezone (e.g. `2026-01-05T08:00:00`).
     const pad = (n)=>String(n).padStart(2, '0');