construction-gantt 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "construction-gantt",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "MIT React Gantt for construction project management — PRO-equivalent scheduling engine + construction-vertical extensions on free SVAR React Gantt",
   "type": "module",
   "license": "MIT",

package/src/Gantt.css

@@ -60,3 +60,41 @@
 .bode-baseline-8  { background: #f97316; color: #0f172a; }  /* orange */
 .bode-baseline-9  { background: #a855f7; }  /* purple */
 .bode-baseline-10 { background: #dc2626; }  /* red */
+
+/* Edit preview ghost bar — shows live CPM cascade preview while editing.
+ * Matches baseline ghost sizing (60% height, 15% top margin) so preview
+ * phantoms read as secondary/tentative alongside the live bar. */
+.bode-edit-preview {
+  height: 60%;
+  margin-top: 15%;
+  background: repeating-linear-gradient(
+    45deg,
+    rgba(59, 130, 246, 0.35) 0px,
+    rgba(59, 130, 246, 0.35) 6px,
+    rgba(59, 130, 246, 0.15) 6px,
+    rgba(59, 130, 246, 0.15) 12px
+  );
+  border: 1.5px dashed rgba(59, 130, 246, 0.7);
+  border-radius: 3px;
+  pointer-events: none;
+}
+
+/* Drag handle — appears at right edge of task bar in editMode */
+.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, 0.85);
+  cursor: crosshair;
+  opacity: 0;
+  transition: opacity 0.15s;
+  z-index: 10;
+}
+
+.wx-task:hover .construction-gantt-drag-handle {
+  opacity: 1;
+}

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,
@@ -162,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;
@@ -178,6 +216,8 @@ interface SvarTaskWithComputed extends ITask {
   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 {
@@ -186,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,
@@ -199,6 +291,10 @@ export const Gantt = forwardRef<GanttHandle, GanttProps>(function Gantt(
     showBaselineBars,
     columns,
     visibleTaskIds,
+    editMode = false,
+    onTaskEdit,
+    onLinkCreate,
+    onLinkDelete,
   },
   ref,
 ) {
@@ -226,6 +322,32 @@ export const Gantt = forwardRef<GanttHandle, GanttProps>(function Gantt(
     [scheduled.calendars, scheduled.defaultCalendarId],
   );
 
+  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 { dragState, onBarMouseDown, onMouseMove, onMouseUp, cancelDragLink } = useDragLink();
+
+  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.
@@ -237,8 +359,15 @@ export const Gantt = forwardRef<GanttHandle, GanttProps>(function Gantt(
   const ghostBarsEnabled = resolvedBaselines.length > 0 && (showBaselineBars ?? true);
 
   const svarTasks: ITask[] = useMemo(
-    () => buildSvarTasks(renderableTasks, resolvedBaselines, calendar, ghostBarsEnabled),
-    [renderableTasks, resolvedBaselines, calendar, ghostBarsEnabled],
+    () =>
+      buildSvarTasks(
+        renderableTasks,
+        resolvedBaselines,
+        calendar,
+        ghostBarsEnabled,
+        editGhostProject ?? undefined,
+      ),
+    [renderableTasks, resolvedBaselines, calendar, ghostBarsEnabled, editGhostProject],
   );
   const svarLinks: ILink[] = useMemo(() => scheduled.links.map(toSvarLink), [scheduled.links]);
 
@@ -257,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,
@@ -322,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}
@@ -332,14 +519,40 @@ 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>
   );
 });
 
 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;
@@ -569,6 +782,21 @@ function makeBaselinePhantom(
   };
 }
 
+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,
+  };
+}
+
 function toSvarLink(l: Link): ILink {
   return {
     id: l.id,
@@ -687,10 +915,26 @@ export function buildSvarTasks(
   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];
-    return renderableTasks.map((t) => toSvarTask(t, primary, calendar));
+    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) {
@@ -701,6 +945,14 @@ export function buildSvarTasks(
       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;
 }
@@ -767,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 {

package/src/editing/dragLink.ts

@@ -0,0 +1,47 @@
+import type { Link, TaskId } from '../types.js';
+
+export type DragLinkState =
+  | { status: 'idle' }
+  | {
+      status: 'dragging';
+      sourceId: TaskId;
+      startX: number;
+      startY: number;
+      cursorX: number;
+      cursorY: number;
+    }
+  | { status: 'dropped'; sourceId: TaskId; targetId: TaskId };
+
+export const DRAG_INITIAL: DragLinkState = { status: 'idle' };
+
+export function startDrag(sourceId: TaskId, startX: number, startY: number): DragLinkState {
+  return { status: 'dragging', sourceId, startX, startY, cursorX: startX, cursorY: startY };
+}
+
+export function moveDrag(state: DragLinkState, cursorX: number, cursorY: number): DragLinkState {
+  if (state.status !== 'dragging') return state;
+  return { ...state, cursorX, cursorY };
+}
+
+export function completeDrop(state: DragLinkState, targetId: TaskId | null): DragLinkState {
+  if (state.status !== 'dragging') return DRAG_INITIAL;
+  if (targetId === null) return DRAG_INITIAL;
+  return { status: 'dropped', sourceId: state.sourceId, targetId };
+}
+
+export function cancelDrag(_state: DragLinkState): DragLinkState {
+  return DRAG_INITIAL;
+}
+
+export function isDragInvalid(
+  sourceId: TaskId,
+  targetId: TaskId,
+  existingLinks: Link[],
+  summaryIds: Set<TaskId>,
+): boolean {
+  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),
+  );
+}

package/src/editing/useEditState.ts

@@ -0,0 +1,98 @@
+import { useCallback, useRef, useState } from 'react';
+// biome-ignore lint/correctness/noUnusedImports: ScheduleMode is implicitly used in TaskEditPatch return type
+import type { ScheduleMode, Task, TaskId } from '../types.js';
+
+export type EditableField = 'text' | 'start' | 'end' | 'duration' | 'progress' | 'scheduleMode';
+
+export interface ActiveCell {
+  taskId: TaskId;
+  field: EditableField;
+}
+
+export type TaskEditPatch = Partial<
+  Pick<Task, 'text' | 'start' | 'end' | 'duration' | 'progress' | 'scheduleMode'>
+>;
+
+export interface EditState {
+  activeCell: ActiveCell | null;
+  dirtyValue: string;
+  activateCell(taskId: TaskId, field: EditableField, initialValue: string): void;
+  setValue(value: string): void;
+  commitCell(onTaskEdit?: (id: TaskId, patch: TaskEditPatch) => void): void;
+  cancelCell(): void;
+}
+
+export function parseFieldValue(field: EditableField, value: string): TaskEditPatch {
+  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 };
+    }
+  }
+}
+
+interface EditStateInternal {
+  activeCell: ActiveCell | null;
+  dirtyValue: string;
+}
+
+export function useEditState(): EditState {
+  const [state, setState] = useState<EditStateInternal>({
+    activeCell: null,
+    dirtyValue: '',
+  });
+  // stateRef lets commitCell read the latest state without stale closures.
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  const activateCell = useCallback((taskId: TaskId, field: EditableField, initialValue: string) => {
+    setState({ activeCell: { taskId, field }, dirtyValue: initialValue });
+  }, []);
+
+  const setValue = useCallback((value: string) => {
+    setState((prev) => ({ ...prev, dirtyValue: value }));
+  }, []);
+
+  const commitCell = useCallback((onTaskEdit?: (id: TaskId, patch: TaskEditPatch) => void) => {
+    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,
+  };
+}