@opengeni/react 3.1.0 → 3.1.3-canary.38890816741001

package/src/components/artifacts/spreadsheet-grid.tsx

@@ -17,6 +17,10 @@ import {
 
 import { cn } from "../../lib/cn";
 import { ArtifactSurface } from "./artifact-surface";
+import {
+  useSpreadsheetCommandQueue,
+  type SpreadsheetCommandTarget,
+} from "./spreadsheet-command-queue";
 import {
   SparseSpreadsheetCellIndex,
   SpreadsheetCanvasRenderer,
@@ -26,6 +30,17 @@ import {
   type SpreadsheetCanvasProjection,
   type SpreadsheetCanvasTheme,
 } from "./spreadsheet-canvas";
+import {
+  formatSpreadsheetGeneralDisplay,
+  spreadsheetCellEditSource,
+} from "./spreadsheet-general-display";
+import {
+  SpreadsheetResizeHandle,
+  useSpreadsheetResizing,
+  type SpreadsheetDimensionCommit,
+} from "./spreadsheet-resize";
+
+export type { SpreadsheetDimensionCommit } from "./spreadsheet-resize";
 
 const MAX_ROWS = 1_048_576;
 const MAX_COLUMNS = 16_384;
@@ -45,6 +60,7 @@ const MAX_MOUNTED_AXIS_ITEMS = 512;
 const MAX_MOUNTED_GRID_CELLS = 2_048;
 const MAX_CLIPBOARD_INPUT_BYTES = 4 * 1024 * 1024;
 const MAX_CLIPBOARD_CELLS = 65_536;
+const EMPTY_DIMENSIONS: readonly (readonly [number, number])[] = [];
 
 type CellCoordinate = { row: number; col: number };
 
@@ -99,6 +115,7 @@ export type SpreadsheetGridProps = {
   overscanColumns?: number | undefined;
   onSelectionChange?: ((selection: SpreadsheetSelection) => void) | undefined;
   onCommit?: ((commit: SpreadsheetCommit) => void) | undefined;
+  onResize?: ((change: SpreadsheetDimensionCommit) => void) | undefined;
   onViewportChange?: ((viewport: SpreadsheetViewport) => void) | undefined;
   className?: string | undefined;
 };
@@ -136,6 +153,11 @@ export type SpreadsheetProjectionGridProps = {
   commit?: ((commit: SpreadsheetCommit) => void | Promise<void>) | undefined;
   commitRange?: ((commit: SpreadsheetRangeCommit) => void | Promise<void>) | undefined;
   clear?: ((selection: SpreadsheetSelection) => void | Promise<void>) | undefined;
+  resize?: ((change: SpreadsheetDimensionCommit) => void | Promise<void>) | undefined;
+  /** Server-unacknowledged changes, distinct from local command acceptance. */
+  pendingTransactions?: number | undefined;
+  syncStatus?: string | undefined;
+  syncError?: string | undefined;
   onCommandError?: ((error: Error) => void) | undefined;
   onViewportChange?: ((viewport: SpreadsheetViewport) => void) | undefined;
   className?: string | undefined;
@@ -494,13 +516,6 @@ function isCellSelected(selection: SpreadsheetSelection, row: number, col: numbe
   );
 }
 
-function displayValue(value: unknown): string {
-  if (value === null || value === undefined) return "";
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
-  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
-  return String(value);
-}
-
 function parseCellInput(input: string): string | number | boolean | null {
   if (input === "") return null;
   const normalized = input.trim();
@@ -634,7 +649,7 @@ function spreadsheetCanvasTheme(element: HTMLElement): SpreadsheetCanvasTheme {
   const border = computedToken(style, "--og-color-border", "#d1d5db");
   const foreground = style.color || computedToken(style, "--og-color-fg", "#111827");
   const mutedForeground = computedToken(style, "--og-color-fg-muted", "#6b7280");
-  const accent = computedToken(style, "--og-color-accent", "#3b82f6");
+  const accent = computedToken(style, "--og-color-accent", "#545454");
   const error = computedToken(style, "--og-color-status-failed", "#dc2626");
   const fontFamily =
     style.fontFamily ||
@@ -816,7 +831,7 @@ export function SpreadsheetArtifactSurface({
               <button
                 type="button"
                 onClick={addSheet}
-                className="mt-3 rounded-og-sm bg-og-accent-deep px-3 py-1.5 text-og-sm font-medium text-og-accent-fg"
+                className="mt-3 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-1.5 text-og-sm font-medium hover:bg-og-primary-hover"
               >
                 Add worksheet
               </button>
@@ -838,6 +853,7 @@ export function SpreadsheetGrid({
   overscanColumns = 2,
   onSelectionChange,
   onCommit,
+  onResize,
   onViewportChange,
   className,
 }: SpreadsheetGridProps) {
@@ -906,7 +922,7 @@ export function SpreadsheetGrid({
         const data = worksheet.cellData(row, col);
         return {
           value: data.formula ? workbook.valueAt(worksheet, { row, col }) : data.value,
-          input: data.formula ?? displayValue(data.value),
+          input: data.formula ?? spreadsheetCellEditSource(data.value),
           format: data.format,
         };
       },
@@ -968,6 +984,14 @@ export function SpreadsheetGrid({
     },
     [worksheet],
   );
+  const resize = useCallback(
+    (change: SpreadsheetDimensionCommit) => {
+      if (change.axis === "column") worksheet.setColumnWidth(change.index, change.size);
+      else worksheet.setRowHeight(change.index, change.size);
+      onResize?.(change);
+    },
+    [onResize, worksheet],
+  );
 
   return (
     <SpreadsheetProjectionGrid
@@ -979,6 +1003,7 @@ export function SpreadsheetGrid({
       commit={commit}
       commitRange={commitRange}
       clear={clear}
+      resize={resize}
       onViewportChange={onViewportChange}
       className={className}
     />
@@ -998,25 +1023,50 @@ export function SpreadsheetProjectionGrid({
   commit,
   commitRange,
   clear,
+  resize,
+  pendingTransactions = 0,
+  syncStatus,
+  syncError,
   onCommandError,
   onViewportChange,
   className,
 }: SpreadsheetProjectionGridProps) {
   const { revision, rowCount, columnCount } = projection;
-  const dimensionRevision = projection.dimensionRevision ?? 0;
   const editable = !readOnly && commit !== undefined;
+  const commandQueue = useSpreadsheetCommandQueue({
+    scopeKey: `${projection.sheetId}:${projection.generationId ?? "none"}`,
+    enabled: editable,
+    onCommandError,
+  });
+  const [commandFailure, setCommandFailure] = useState<{
+    message: string;
+    retry?: (() => void) | undefined;
+  } | null>(null);
+  const clearPreflightFailure = commandQueue.clearPreflightFailure;
+  const clearCommandFailure = useCallback(() => {
+    setCommandFailure(null);
+    clearPreflightFailure();
+  }, [clearPreflightFailure]);
+  const resizing = useSpreadsheetResizing({
+    sheetId: projection.sheetId,
+    generationId: projection.generationId,
+    revision: projection.dimensionRevision ?? revision,
+    rowHeights: projection.rowHeights ?? EMPTY_DIMENSIONS,
+    columnWidths: projection.columnWidths ?? EMPTY_DIMENSIONS,
+    defaultRowHeight: projection.defaultRowHeight ?? 24,
+    defaultColumnWidth: projection.defaultColumnWidth ?? 96,
+    enabled: !readOnly && resize !== undefined,
+    commit: resize,
+    onCommandError,
+    onStart: clearCommandFailure,
+  });
+  const dimensionRevision = `${projection.dimensionRevision ?? 0}:${resizing.previewKey}`;
   const rows = useMemo(() => {
-    void dimensionRevision;
-    return buildAxis(rowCount, projection.defaultRowHeight ?? 24, projection.rowHeights ?? []);
-  }, [dimensionRevision, projection.defaultRowHeight, projection.rowHeights, rowCount]);
+    return buildAxis(rowCount, projection.defaultRowHeight ?? 24, resizing.rowHeights);
+  }, [projection.defaultRowHeight, resizing.rowHeights, rowCount]);
   const columns = useMemo(() => {
-    void dimensionRevision;
-    return buildAxis(
-      columnCount,
-      projection.defaultColumnWidth ?? 96,
-      projection.columnWidths ?? [],
-    );
-  }, [columnCount, dimensionRevision, projection.columnWidths, projection.defaultColumnWidth]);
+    return buildAxis(columnCount, projection.defaultColumnWidth ?? 96, resizing.columnWidths);
+  }, [columnCount, resizing.columnWidths, projection.defaultColumnWidth]);
   const canvasRows = useMemo(() => canvasAxis(rows), [rows]);
   const canvasColumns = useMemo(() => canvasAxis(columns), [columns]);
   const [selection, setSelection] = useState<SpreadsheetSelection>(() => ({
@@ -1028,11 +1078,18 @@ export function SpreadsheetProjectionGrid({
   const [draft, setDraft] = useState(
     () => projection.readCell(selection.focus.row, selection.focus.col)?.input ?? "",
   );
-  const [pendingCommands, setPendingCommands] = useState(0);
-  const [commandFailure, setCommandFailure] = useState<{
-    message: string;
-    retry?: (() => void) | undefined;
-  } | null>(null);
+  const visibleCommandFailure =
+    resizing.error ??
+    commandQueue.error ??
+    commandFailure ??
+    (syncError ? { message: syncError, retry: undefined } : null);
+  const pendingCommandCount =
+    commandQueue.pendingCount + resizing.pendingCount + pendingTransactions;
+  const visibleSyncStatus =
+    pendingCommandCount > 0 && (!syncStatus || syncStatus === "Saved" || syncStatus === "Read only")
+      ? "Saving…"
+      : syncStatus;
+  const runQueuedCommand = commandQueue.run;
   const [viewport, setViewport] = useState<ViewportState>({
     width: FALLBACK_VIEWPORT_WIDTH,
     height: FALLBACK_VIEWPORT_HEIGHT,
@@ -1052,19 +1109,59 @@ export function SpreadsheetProjectionGrid({
   const commitAfterCompositionRef = useRef(false);
   const selectDraftOnFocusRef = useRef(true);
   const initialDraftRef = useRef(draft);
-  const optimisticInputRef = useRef<{
-    sheetId: string;
-    row: number;
-    col: number;
-    input: string;
-    baseRevision: string | number;
-  } | null>(null);
-  const mountedRef = useRef(true);
-  const commandScopeRef = useRef(0);
-  const latestCommandRef = useRef(0);
+  const optimisticInputsRef = useRef(
+    new Map<
+      string,
+      {
+        row: number;
+        col: number;
+        input: string;
+        baseRevision: string | number;
+        commandId: number;
+        pending: boolean;
+      }
+    >(),
+  );
+  const [optimisticEpoch, setOptimisticEpoch] = useState(0);
+  const refreshOptimisticInputs = useCallback(() => setOptimisticEpoch((value) => value + 1), []);
+  const optimisticScope = `${projection.sheetId}:${projection.generationId ?? "none"}`;
+  const optimisticScopeRef = useRef(optimisticScope);
+  if (optimisticScopeRef.current !== optimisticScope) {
+    optimisticScopeRef.current = optimisticScope;
+    optimisticInputsRef.current.clear();
+  }
+  const projectionRef = useRef(projection);
+  projectionRef.current = projection;
+  const editModeRef = useRef(editMode);
+  editModeRef.current = editMode;
   const canvasRendererRef = useRef<SpreadsheetCanvasRenderer | null>(null);
   if (!canvasRendererRef.current) canvasRendererRef.current = new SpreadsheetCanvasRenderer();
   const reactId = useId().replaceAll(":", "");
+  const readEditInput = useCallback(
+    (cell: CellCoordinate) =>
+      optimisticInputsRef.current.get(`${cell.row}:${cell.col}`)?.input ??
+      projectionRef.current.readCell(cell.row, cell.col)?.input ??
+      "",
+    [],
+  );
+  const forgetOptimisticInputs = useCallback(
+    (target: SpreadsheetCommandTarget) => {
+      let changed = false;
+      for (const [key, entry] of optimisticInputsRef.current) {
+        if (
+          entry.row >= target.top &&
+          entry.row <= target.bottom &&
+          entry.col >= target.left &&
+          entry.col <= target.right
+        ) {
+          optimisticInputsRef.current.delete(key);
+          changed = true;
+        }
+      }
+      if (changed) refreshOptimisticInputs();
+    },
+    [refreshOptimisticInputs],
+  );
 
   const updateSelection = useCallback(
     (next: SpreadsheetSelection) => {
@@ -1077,44 +1174,54 @@ export function SpreadsheetProjectionGrid({
 
   useEffect(() => {
     if (selection.sheetId === projection.sheetId) return;
-    commandScopeRef.current += 1;
-    latestCommandRef.current += 1;
     const next = {
       sheetId: projection.sheetId,
       anchor: { row: 0, col: 0 },
       focus: { row: 0, col: 0 },
     };
-    optimisticInputRef.current = null;
-    setPendingCommands(0);
+    optimisticInputsRef.current.clear();
     setCommandFailure(null);
     setEditMode(null);
     updateSelection(next);
   }, [projection.sheetId, selection.sheetId, updateSelection]);
 
   useEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-      commandScopeRef.current += 1;
-      latestCommandRef.current += 1;
-    };
-  }, []);
+    optimisticInputsRef.current.clear();
+    refreshOptimisticInputs();
+  }, [projection.generationId, projection.sheetId, refreshOptimisticInputs]);
 
-  useEffect(() => {
-    if (editMode !== null) return;
-    const optimistic = optimisticInputRef.current;
-    if (
-      optimistic?.sheetId === projection.sheetId &&
-      optimistic.row === selection.focus.row &&
-      optimistic.col === selection.focus.col &&
-      optimistic.baseRevision === revision
-    ) {
-      setDraft(optimistic.input);
-      return;
+  useClientLayoutEffect(() => {
+    let changed = false;
+    for (const [key, optimistic] of optimisticInputsRef.current) {
+      const coverage = projection.coverage;
+      const covered =
+        !coverage ||
+        (optimistic.row >= coverage.rowStart &&
+          optimistic.row < coverage.rowEnd &&
+          optimistic.col >= coverage.columnStart &&
+          optimistic.col < coverage.columnEnd);
+      if (
+        !optimistic.pending &&
+        covered &&
+        (projection.readCell(optimistic.row, optimistic.col)?.input === optimistic.input ||
+          revision !== optimistic.baseRevision)
+      ) {
+        optimisticInputsRef.current.delete(key);
+        changed = true;
+      }
     }
-    if (optimistic && optimistic.baseRevision !== revision) optimisticInputRef.current = null;
-    setDraft(projection.readCell(selection.focus.row, selection.focus.col)?.input ?? "");
-  }, [editMode, projection, revision, selection.focus.col, selection.focus.row]);
+    if (changed) refreshOptimisticInputs();
+    if (editMode === null) setDraft(readEditInput(selection.focus));
+  }, [
+    commandQueue.pendingCount,
+    editMode,
+    projection,
+    readEditInput,
+    revision,
+    selection.focus,
+    refreshOptimisticInputs,
+    optimisticEpoch,
+  ]);
 
   useClientLayoutEffect(() => {
     const element = viewportRef.current;
@@ -1232,46 +1339,17 @@ export function SpreadsheetProjectionGrid({
   );
 
   const runCommand = useCallback(
-    (invoke: () => void | Promise<void>, retry: () => void, rollback: () => void) => {
-      const commandId = latestCommandRef.current + 1;
-      latestCommandRef.current = commandId;
-      const scope = commandScopeRef.current;
+    (
+      invoke: (id: number) => void | Promise<void>,
+      retry: () => void,
+      rollback: (id: number) => void,
+      target?: SpreadsheetCommandTarget | (() => SpreadsheetCommandTarget),
+      accepted?: (id: number) => void,
+    ) => {
       setCommandFailure(null);
-      const fail = (cause: unknown) => {
-        if (
-          !mountedRef.current ||
-          commandScopeRef.current !== scope ||
-          latestCommandRef.current !== commandId
-        ) {
-          return;
-        }
-        const error = cause instanceof Error ? cause : new Error(String(cause));
-        rollback();
-        setCommandFailure({ message: error.message || "Spreadsheet change failed", retry });
-        onCommandError?.(error);
-      };
-      let result: void | Promise<void>;
-      try {
-        result = invoke();
-      } catch (cause) {
-        fail(cause);
-        return;
-      }
-      if (!result || typeof result.then !== "function") return;
-      setPendingCommands((current) => current + 1);
-      void Promise.resolve(result).then(
-        () => {
-          if (!mountedRef.current || commandScopeRef.current !== scope) return;
-          setPendingCommands((current) => Math.max(0, current - 1));
-        },
-        (cause) => {
-          if (!mountedRef.current || commandScopeRef.current !== scope) return;
-          setPendingCommands((current) => Math.max(0, current - 1));
-          fail(cause);
-        },
-      );
+      runQueuedCommand(invoke, retry, rollback, target, accepted);
     },
-    [onCommandError],
+    [runQueuedCommand],
   );
 
   const reportCommandFailure = useCallback(
@@ -1309,21 +1387,49 @@ export function SpreadsheetProjectionGrid({
         kind: input.startsWith("=") ? "formula" : "value",
       } satisfies SpreadsheetCommit;
       const execute = () => {
-        optimisticInputRef.current = {
-          sheetId: projection.sheetId,
-          row: selection.focus.row,
-          col: selection.focus.col,
-          input,
-          baseRevision: revision,
-        };
-        setDraft(input);
+        const retryFocus = selectionRef.current.focus;
+        if (
+          editModeRef.current === null &&
+          retryFocus.row === next.cell.row &&
+          retryFocus.col === next.cell.col
+        ) {
+          setDraft(input);
+        }
+        const key = `${next.cell.row}:${next.cell.col}`;
         runCommand(
-          () => commit(next),
+          (commandId) => {
+            optimisticInputsRef.current.set(key, {
+              ...next.cell,
+              input,
+              baseRevision: revision,
+              commandId,
+              pending: true,
+            });
+            refreshOptimisticInputs();
+            return commit(next);
+          },
           execute,
-          () => {
-            optimisticInputRef.current = null;
+          (commandId) => {
+            if (optimisticInputsRef.current.get(key)?.commandId !== commandId) return;
+            optimisticInputsRef.current.delete(key);
+            refreshOptimisticInputs();
             const current = selectionRef.current.focus;
-            setDraft(projection.readCell(current.row, current.col)?.input ?? "");
+            if (
+              editModeRef.current === null &&
+              current.row === next.cell.row &&
+              current.col === next.cell.col
+            ) {
+              setDraft(readEditInput(current));
+            }
+          },
+          { top: next.cell.row, bottom: next.cell.row, left: next.cell.col, right: next.cell.col },
+          (commandId) => {
+            const optimistic = optimisticInputsRef.current.get(key);
+            if (optimistic?.commandId === commandId) {
+              optimistic.pending = false;
+              optimistic.baseRevision = projectionRef.current.revision;
+              refreshOptimisticInputs();
+            }
           },
         );
       };
@@ -1335,20 +1441,35 @@ export function SpreadsheetProjectionGrid({
         committingRef.current = false;
       });
     },
-    [commit, draft, editable, projection, revision, runCommand, selection.focus],
+    [
+      commit,
+      draft,
+      editable,
+      projection,
+      readEditInput,
+      revision,
+      runCommand,
+      selection.focus,
+      refreshOptimisticInputs,
+    ],
   );
 
   const clearSelection = useCallback(() => {
     if (!editable || !clear) return;
     const current = selection;
+    const target = normalizeSelection(current);
     const execute = () =>
       runCommand(
-        () => clear(current),
+        () => {
+          forgetOptimisticInputs(target);
+          return clear(current);
+        },
         execute,
         () => {},
+        target,
       );
     execute();
-  }, [clear, editable, runCommand, selection]);
+  }, [clear, editable, forgetOptimisticInputs, runCommand, selection]);
 
   const pasteClipboard = useCallback(
     (event: ReactClipboardEvent<HTMLDivElement>) => {
@@ -1356,17 +1477,33 @@ export function SpreadsheetProjectionGrid({
       const clipboardText = event.clipboardData.getData("text/plain");
       if (!clipboardText && !event.clipboardData.types.includes("text/plain")) return;
       event.preventDefault();
+      const previousSelection = selectionRef.current;
+      const anchor = previousSelection.focus;
       const execute = () => {
-        const previousSelection = selectionRef.current;
-        const invoke = () => {
-          const parsed = parseSpreadsheetClipboard(clipboardText);
-          const anchor = previousSelection.focus;
-          if (anchor.row + parsed.rows > rowCount || anchor.col + parsed.columns > columnCount) {
+        let prepared: ReturnType<typeof parseSpreadsheetClipboard>;
+        let target: SpreadsheetCommandTarget;
+        const prepare = () => {
+          prepared = parseSpreadsheetClipboard(clipboardText);
+          if (
+            anchor.row + prepared.rows > rowCount ||
+            anchor.col + prepared.columns > columnCount
+          ) {
             throw new Error("Clipboard range does not fit in this worksheet");
           }
-          if (!commitRange && parsed.inputs.length !== 1) {
+          if (!commitRange && prepared.inputs.length !== 1) {
             throw new Error("This spreadsheet adapter does not support rectangular paste");
           }
+          target = {
+            top: anchor.row,
+            left: anchor.col,
+            bottom: anchor.row + prepared.rows - 1,
+            right: anchor.col + prepared.columns - 1,
+          };
+          return target;
+        };
+        const invoke = () => {
+          const parsed = prepared;
+          forgetOptimisticInputs(target);
           const bottomRight = {
             row: anchor.row + parsed.rows - 1,
             col: anchor.col + parsed.columns - 1,
@@ -1394,7 +1531,23 @@ export function SpreadsheetProjectionGrid({
             kind: input.startsWith("=") ? "formula" : "value",
           });
         };
-        runCommand(invoke, execute, () => updateSelection(previousSelection));
+        runCommand(
+          invoke,
+          execute,
+          () => {
+            const current = selectionRef.current;
+            if (
+              target &&
+              current.anchor.row === anchor.row &&
+              current.anchor.col === anchor.col &&
+              current.focus.row === target.bottom &&
+              current.focus.col === target.right
+            ) {
+              updateSelection(previousSelection);
+            }
+          },
+          prepare,
+        );
       };
       execute();
     },
@@ -1405,6 +1558,7 @@ export function SpreadsheetProjectionGrid({
       editMode,
       editable,
       ensureVisible,
+      forgetOptimisticInputs,
       projection.sheetId,
       rowCount,
       runCommand,
@@ -1454,13 +1608,13 @@ export function SpreadsheetProjectionGrid({
     (initial?: string, cell: CellCoordinate = selectionRef.current.focus) => {
       if (!editable) return;
       ensureVisible(cell);
-      const current = projection.readCell(cell.row, cell.col)?.input ?? "";
+      const current = readEditInput(cell);
       initialDraftRef.current = current;
       selectDraftOnFocusRef.current = initial === undefined;
       setDraft(initial ?? current);
       setEditMode("cell");
     },
-    [editable, ensureVisible, projection],
+    [editable, ensureVisible, readEditInput],
   );
 
   const onGridKeyDown = useCallback(
@@ -1553,7 +1707,7 @@ export function SpreadsheetProjectionGrid({
       } else if (event.key === "Escape") {
         event.preventDefault();
         committingRef.current = true;
-        setDraft(projection.readCell(selection.focus.row, selection.focus.col)?.input ?? "");
+        setDraft(readEditInput(selection.focus));
         setEditMode(null);
         viewportRef.current?.focus();
         queueMicrotask(() => {
@@ -1561,7 +1715,7 @@ export function SpreadsheetProjectionGrid({
         });
       }
     },
-    [commitDraft, projection, selection.focus.col, selection.focus.row],
+    [commitDraft, readEditInput, selection.focus],
   );
 
   const onEditorCompositionStart = useCallback(() => {
@@ -1857,7 +2011,9 @@ export function SpreadsheetProjectionGrid({
   return (
     <div
       className={cn("relative flex h-full min-w-0 flex-col bg-og-bg", className)}
-      data-og-command-state={commandFailure ? "error" : pendingCommands > 0 ? "pending" : "idle"}
+      data-og-command-state={
+        visibleCommandFailure ? "error" : pendingCommandCount > 0 ? "pending" : "idle"
+      }
       style={{ minHeight: 256 }}
     >
       <div className="flex min-h-9 shrink-0 items-center border-b border-og-border bg-og-surface-1">
@@ -1874,12 +2030,11 @@ export function SpreadsheetProjectionGrid({
         <input
           aria-label="Formula or value"
           readOnly={!editable}
-          aria-invalid={commandFailure ? "true" : undefined}
+          aria-invalid={visibleCommandFailure ? "true" : undefined}
           value={draft}
           onFocus={() => {
             if (editable) {
-              const current =
-                projection.readCell(selection.focus.row, selection.focus.col)?.input ?? "";
+              const current = readEditInput(selection.focus);
               initialDraftRef.current = current;
               setDraft(current);
               setEditMode("formula");
@@ -1892,21 +2047,30 @@ export function SpreadsheetProjectionGrid({
           onBlur={(event) => commitEditorOnBlur("formula", event.currentTarget.value)}
           className="h-8 min-w-0 flex-1 bg-transparent px-1 font-mono text-og-sm text-og-fg outline-hidden placeholder:text-og-fg-subtle"
         />
+        {visibleSyncStatus ? (
+          <output
+            aria-label="Spreadsheet sync status"
+            className="shrink-0 px-2 text-og-xs text-og-fg-muted"
+          >
+            {visibleCommandFailure ? "Not saved" : visibleSyncStatus}
+          </output>
+        ) : null}
       </div>
       <div role="status" aria-live="polite" className="sr-only">
-        {commandFailure?.message ?? (pendingCommands > 0 ? "Saving spreadsheet changes" : "")}
+        {visibleCommandFailure?.message ??
+          (pendingCommandCount > 0 ? "Saving spreadsheet changes" : "")}
       </div>
-      {commandFailure ? (
+      {visibleCommandFailure ? (
         <div
           role="alert"
           className="absolute bottom-2 left-2 z-50 flex items-center gap-2 rounded-og-sm border border-og-status-failed/30 bg-og-surface-1/95 px-2 py-1 text-og-xs text-og-status-failed shadow-og-sm"
           style={{ maxWidth: "calc(100% - 1rem)" }}
         >
-          <span className="truncate">{commandFailure.message}</span>
-          {commandFailure.retry ? (
+          <span className="truncate">{visibleCommandFailure.message}</span>
+          {visibleCommandFailure.retry ? (
             <button
               type="button"
-              onClick={commandFailure.retry}
+              onClick={visibleCommandFailure.retry}
               className="shrink-0 rounded-og-xs px-1.5 py-0.5 font-medium outline-hidden hover:bg-og-surface-3 focus-visible:ring-2 focus-visible:ring-og-accent"
             >
               Retry
@@ -1924,7 +2088,7 @@ export function SpreadsheetProjectionGrid({
         aria-colcount={columnCount}
         aria-multiselectable="true"
         aria-readonly={!editable}
-        aria-busy={pendingCommands > 0 ? "true" : undefined}
+        aria-busy={pendingCommandCount > 0 ? "true" : undefined}
         aria-activedescendant={activeCellId}
         onKeyDown={onGridKeyDown}
         onCopy={copySelection}
@@ -1958,6 +2122,10 @@ export function SpreadsheetProjectionGrid({
           style={{
             width: horizontalProjection.physicalTotal,
             height: verticalProjection.physicalTotal,
+            // Centered boundary handles must not enlarge the bounded scroll
+            // extent at the final row/column. Unlike hidden, clip does not
+            // create another scroll container for the sticky headers.
+            overflow: "clip",
           }}
         >
           <canvas
@@ -1990,7 +2158,7 @@ export function SpreadsheetProjectionGrid({
                 key={`header-${col}`}
                 role="columnheader"
                 aria-colindex={col + 1}
-                className="sticky top-0 z-30 grid select-none place-items-center overflow-hidden border-b border-r border-og-border bg-og-surface-2 text-og-xs font-medium text-og-fg-muted"
+                className="pointer-events-none sticky top-0 z-30 grid select-none place-items-center border-b border-r border-og-border bg-og-surface-2 text-og-xs font-medium text-og-fg-muted"
                 style={{
                   position: "absolute",
                   left,
@@ -2006,7 +2174,15 @@ export function SpreadsheetProjectionGrid({
                     : undefined),
                 }}
               >
-                {columnName(col)}
+                <span className="max-w-full overflow-hidden">{columnName(col)}</span>
+                {!readOnly && resize ? (
+                  <SpreadsheetResizeHandle
+                    axis="column"
+                    label={`Resize column ${columnName(col)}`}
+                    size={width}
+                    {...resizing.handleProps("column", col)}
+                  />
+                ) : null}
               </div>
             ))}
           </div>
@@ -2026,7 +2202,7 @@ export function SpreadsheetProjectionGrid({
               >
                 <div
                   role="rowheader"
-                  className="sticky left-0 z-20 grid h-full select-none place-items-center border-b border-r border-og-border bg-og-surface-2 text-og-xs text-og-fg-muted"
+                  className="pointer-events-none sticky left-0 z-20 grid h-full select-none place-items-center border-b border-r border-og-border bg-og-surface-2 text-og-xs text-og-fg-muted"
                   style={{
                     width: ROW_HEADER_WIDTH,
                     ...(canvasReady
@@ -2039,6 +2215,14 @@ export function SpreadsheetProjectionGrid({
                   }}
                 >
                   {row + 1}
+                  {!readOnly && resize ? (
+                    <SpreadsheetResizeHandle
+                      axis="row"
+                      label={`Resize row ${row + 1}`}
+                      size={height}
+                      {...resizing.handleProps("row", row)}
+                    />
+                  ) : null}
                 </div>
 
                 {columnLayout.map(({ col, left, width }) => {
@@ -2050,6 +2234,13 @@ export function SpreadsheetProjectionGrid({
                     format: {},
                   };
                   const value = data.value;
+                  // Submitted input is a transient overlay, not a calculated or saved value.
+                  const optimistic = editable
+                    ? optimisticInputsRef.current.get(`${row}:${col}`)
+                    : undefined;
+                  const display = optimistic
+                    ? optimistic.input
+                    : formatSpreadsheetGeneralDisplay(value);
                   const address = cellName({ row, col });
                   const error = typeof value === "string" && value.startsWith("#");
                   return (
@@ -2059,12 +2250,13 @@ export function SpreadsheetProjectionGrid({
                       role="gridcell"
                       aria-colindex={col + 1}
                       aria-selected={selected}
-                      aria-label={`${address}${value === null ? "" : `, ${displayValue(value)}`}`}
+                      aria-label={`${address}${display ? `, ${display}` : ""}${optimistic ? (optimistic.input.startsWith("=") ? ", pending formula, awaiting calculation" : ", pending edit") : ""}`}
+                      data-og-pending-input={optimistic ? "true" : undefined}
                       data-og-cell={address}
                       className={cn(
                         "pointer-events-none absolute top-0 flex h-full min-w-0 overflow-hidden border-b border-r border-og-border px-1.5 text-og-fg",
-                        !canvasReady && selected && !active && "bg-og-accent/10",
-                        !canvasReady &&
+                        (!canvasReady || optimistic) && selected && !active && "bg-og-accent/10",
+                        (!canvasReady || optimistic) &&
                           active &&
                           "z-10 bg-og-accent/10 ring-2 ring-inset ring-og-accent",
                         !canvasReady && error && "text-og-status-failed",
@@ -2073,13 +2265,19 @@ export function SpreadsheetProjectionGrid({
                         left,
                         width,
                         ...cellStyle(data.format),
-                        ...(canvasReady
+                        ...(canvasReady && !optimistic
                           ? {
                               background: "transparent",
                               borderColor: "transparent",
                               color: "transparent",
                             }
                           : undefined),
+                        ...(optimistic
+                          ? {
+                              background: data.format.fill ?? "var(--og-color-surface-1)",
+                              zIndex: 10,
+                            }
+                          : undefined),
                       }}
                     >
                       {active && editMode === "cell" ? (
@@ -2099,7 +2297,7 @@ export function SpreadsheetProjectionGrid({
                         />
                       ) : (
                         <span className="block min-w-0 overflow-hidden text-ellipsis">
-                          {displayValue(value)}
+                          {display}
                         </span>
                       )}
                     </div>
@@ -2117,7 +2315,9 @@ export function SpreadsheetProjectionGrid({
                 aria-colindex={selection.focus.col + 1}
                 aria-selected="true"
                 aria-label={`${cellName(selection.focus)}${
-                  hiddenActiveValue == null ? "" : `, ${displayValue(hiddenActiveValue)}`
+                  hiddenActiveValue == null
+                    ? ""
+                    : `, ${formatSpreadsheetGeneralDisplay(hiddenActiveValue)}`
                 }`}
               />
             </div>