@opengeni/react 3.3.2 → 3.4.1-canary.38960406141001

package/dist/{chunk-ICA6R6TW.js → chunk-WNN7NO2N.js}

@@ -1,26 +1,186 @@
+"use client";
 import {
   ArtifactSurface,
   EditableArtifactMessage,
   editableArtifactAccessRevoked,
   editableArtifactStatusLabel,
   useEditableArtifactView
-} from "./chunk-KCGXPP5V.js";
+} from "./chunk-PYEOPA4M.js";
+import {
+  ArtifactButton
+} from "./chunk-TGXK4BAZ.js";
 import {
   cn
-} from "./chunk-22KP6LR5.js";
+} from "./chunk-TXS65BB2.js";
 
 // src/components/artifacts/spreadsheet-grid.tsx
 import { PlusIcon } from "lucide-react";
 import {
-  useCallback,
-  useEffect,
+  useCallback as useCallback3,
+  useEffect as useEffect3,
   useId,
   useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState3
 } from "react";
 
+// src/components/artifacts/spreadsheet-command-queue.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function overlaps(a, b) {
+  return a.top <= b.bottom && a.bottom >= b.top && a.left <= b.right && a.right >= b.left;
+}
+function contains(a, b) {
+  return a.top <= b.top && a.bottom >= b.bottom && a.left <= b.left && a.right >= b.right;
+}
+function useSpreadsheetCommandQueue({
+  scopeKey,
+  enabled,
+  onCommandError
+}) {
+  const [pendingCount, setPendingCount] = useState(0);
+  const [failures, setFailures] = useState([]);
+  const commandsRef = useRef(/* @__PURE__ */ new Map());
+  const nextIdRef = useRef(0);
+  const mountedRef = useRef(true);
+  const optionsRef = useRef({ scopeKey, enabled, onCommandError });
+  optionsRef.current = { scopeKey, enabled, onCommandError };
+  const scopeRef = useRef({ key: scopeKey, epoch: 0 });
+  if (scopeRef.current.key !== scopeKey) {
+    scopeRef.current = { key: scopeKey, epoch: scopeRef.current.epoch + 1 };
+  }
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    commandsRef.current.clear();
+    setPendingCount(0);
+    setFailures([]);
+  }, [scopeKey]);
+  const refreshFailures = useCallback(() => {
+    setFailures(
+      [...commandsRef.current.values()].filter(
+        (command) => command.message !== void 0 && !command.covered
+      )
+    );
+  }, []);
+  const clearPreflightFailure = useCallback(() => {
+    let changed = false;
+    for (const previous of commandsRef.current.values()) {
+      if (previous.target === null && previous.message !== void 0) {
+        commandsRef.current.delete(previous.id);
+        changed = true;
+      }
+    }
+    if (changed) refreshFailures();
+  }, [refreshFailures]);
+  const run = useCallback(
+    (invoke, retry, rollback, target, accepted) => {
+      if (!optionsRef.current.enabled) return;
+      const scope = optionsRef.current.scopeKey;
+      const epoch = scopeRef.current.epoch;
+      const id = ++nextIdRef.current;
+      clearPreflightFailure();
+      const command = { id, target: null, overlapped: false, covered: false };
+      commandsRef.current.set(id, command);
+      const current = () => mountedRef.current && optionsRef.current.scopeKey === scope && scopeRef.current.epoch === epoch;
+      const fail = (cause) => {
+        if (!current()) return;
+        rollback(id);
+        if (command.covered) {
+          commandsRef.current.delete(id);
+          return;
+        }
+        const error = cause instanceof Error ? cause : new Error(String(cause));
+        command.message = error.message || "Spreadsheet change failed";
+        command.retry = () => {
+          if (!current() || !optionsRef.current.enabled || command.overlapped) return;
+          commandsRef.current.delete(id);
+          refreshFailures();
+          retry();
+        };
+        refreshFailures();
+        optionsRef.current.onCommandError?.(error);
+      };
+      let result;
+      try {
+        command.target = typeof target === "function" ? target() : target ?? null;
+        if (command.target) {
+          for (const previous of commandsRef.current.values()) {
+            if (previous.id === id || !previous.target || !overlaps(command.target, previous.target))
+              continue;
+            previous.overlapped = true;
+            previous.covered ||= contains(command.target, previous.target);
+            if (previous.covered && previous.message !== void 0)
+              commandsRef.current.delete(previous.id);
+          }
+          refreshFailures();
+        }
+        result = invoke(id);
+      } catch (cause) {
+        fail(cause);
+        return;
+      }
+      const succeed = () => {
+        if (!current()) return;
+        commandsRef.current.delete(id);
+        accepted?.(id);
+      };
+      if (!result || typeof result.then !== "function") {
+        succeed();
+        return;
+      }
+      setPendingCount((count) => count + 1);
+      void Promise.resolve(result).then(
+        () => {
+          if (!current()) return;
+          setPendingCount((count) => Math.max(0, count - 1));
+          succeed();
+        },
+        (cause) => {
+          if (!current()) return;
+          setPendingCount((count) => Math.max(0, count - 1));
+          fail(cause);
+        }
+      );
+    },
+    [clearPreflightFailure, refreshFailures]
+  );
+  const first = failures[0];
+  return {
+    run,
+    clearPreflightFailure,
+    pendingCount,
+    error: first ? {
+      message: failures.length > 1 ? `${first.message} (${failures.length} changes not saved)` : first.message,
+      retry: enabled && !first.overlapped ? first.retry : void 0
+    } : null
+  };
+}
+
+// src/components/artifacts/spreadsheet-general-display.ts
+function formatSpreadsheetGeneralDisplay(value) {
+  if (value === null || value === void 0) return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
+  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+  if (typeof value === "number") {
+    if (Object.is(value, -0) || value === 0) return "0";
+    if (!Number.isFinite(value)) return String(value);
+    const rounded = Number(value.toPrecision(15));
+    return String(Number.isFinite(rounded) ? rounded : value);
+  }
+  return String(value);
+}
+function spreadsheetCellEditSource(value) {
+  if (value === null || value === void 0) return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
+  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+  return String(value);
+}
+
 // src/components/artifacts/spreadsheet-canvas.ts
 var TILE_SIZE = 256;
 var MAX_CACHE_PHYSICAL_PIXELS = 32e6;
@@ -266,7 +426,7 @@ var SpreadsheetCanvasRenderer = class {
     paintTileGrid(context, input, tileLeft, tileTop, tileRight, tileBottom);
     for (const cell of cells) {
       const value = input.projection.valueAt(cell);
-      const text = displayValue(value);
+      const text = formatSpreadsheetGeneralDisplay(value);
       if (!text) continue;
       paintCellText(context, input, cell, text, tileLeft, tileTop);
     }
@@ -351,7 +511,7 @@ function paintSelection(context, input) {
   const top = input.columnHeaderHeight + input.rows.offsetAt(selection.top) - input.logicalScrollTop;
   const bottom = input.columnHeaderHeight + input.rows.offsetAt(selection.bottom + 1) - input.logicalScrollTop;
   context.save();
-  setFill(context, input.theme.accent, "#3b82f6");
+  setFill(context, input.theme.accent, "#545454");
   context.globalAlpha = 0.1;
   context.fillRect(left, top, right - left, bottom - top);
   context.restore();
@@ -360,7 +520,7 @@ function paintSelection(context, input) {
   const activeWidth = input.columns.sizeAt(selection.focusColumn);
   const activeHeight = input.rows.sizeAt(selection.focusRow);
   context.save();
-  setStroke(context, input.theme.accent, "#3b82f6");
+  setStroke(context, input.theme.accent, "#545454");
   context.lineWidth = 2;
   context.strokeRect(
     activeLeft + 1,
@@ -522,12 +682,6 @@ function ellipsize(context, input, maximumWidth) {
 function finitePositive(value, fallback) {
   return value !== void 0 && Number.isFinite(value) && value > 0 ? value : fallback;
 }
-function displayValue(value) {
-  if (value === null || value === void 0) return "";
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
-  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
-  return String(value);
-}
 function columnName(index) {
   let value = index + 1;
   let result = "";
@@ -542,8 +696,330 @@ function clamp(value, minimum, maximum) {
   return Math.max(minimum, Math.min(maximum, value));
 }
 
+// src/components/artifacts/spreadsheet-resize.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var MIN_SIZE = 8;
+var MAX_SIZE = 4096;
+function keyOf(change) {
+  return `${change.axis}:${change.index}`;
+}
+function boundedSize(size) {
+  return Math.max(MIN_SIZE, Math.min(MAX_SIZE, Math.round(size)));
+}
+function useSpreadsheetResizing(options) {
+  const optionsRef = useRef2(options);
+  optionsRef.current = options;
+  const [gesture, setGesture] = useState2(null);
+  const [pending, setPending] = useState2([]);
+  const [inFlightCount, setInFlightCount] = useState2(0);
+  const [errors, setErrors] = useState2([]);
+  const errorsRef = useRef2(/* @__PURE__ */ new Map());
+  const activeRef = useRef2(null);
+  const pendingRef = useRef2(/* @__PURE__ */ new Map());
+  const frameRef = useRef2(null);
+  const nextIdRef = useRef2(0);
+  const scopeRef = useRef2(0);
+  const mountedRef = useRef2(true);
+  const clearError = useCallback2(() => {
+    errorsRef.current.clear();
+    setErrors([]);
+  }, []);
+  const cancelFrame = useCallback2(() => {
+    if (frameRef.current !== null) globalThis.cancelAnimationFrame?.(frameRef.current);
+    frameRef.current = null;
+  }, []);
+  const cancel = useCallback2(() => {
+    cancelFrame();
+    activeRef.current = null;
+    setGesture(null);
+  }, [cancelFrame]);
+  useEffect2(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      scopeRef.current += 1;
+      cancelFrame();
+    };
+  }, [cancelFrame]);
+  useEffect2(() => {
+    scopeRef.current += 1;
+    cancel();
+    pendingRef.current.clear();
+    setPending([]);
+    setInFlightCount(0);
+    clearError();
+  }, [cancel, clearError, options.enabled, options.generationId, options.sheetId]);
+  const authoritativeSize = useCallback2((axis, index) => {
+    const current = optionsRef.current;
+    const entries = axis === "row" ? current.rowHeights : current.columnWidths;
+    return entries.find(([at]) => at === index)?.[1] ?? (axis === "row" ? current.defaultRowHeight : current.defaultColumnWidth);
+  }, []);
+  useEffect2(() => {
+    let changed = false;
+    for (const [key, entry] of pendingRef.current) {
+      if (entry.settled && (authoritativeSize(entry.axis, entry.index) === entry.size || options.revision !== entry.baseRevision)) {
+        pendingRef.current.delete(key);
+        changed = true;
+      }
+    }
+    if (changed) setPending([...pendingRef.current.values()]);
+  }, [authoritativeSize, options.columnWidths, options.revision, options.rowHeights, pending]);
+  const submit = useCallback2((change) => {
+    const current = optionsRef.current;
+    if (!current.enabled || !current.commit || change.sheetId !== current.sheetId) return;
+    const scope = scopeRef.current;
+    const id = ++nextIdRef.current;
+    const key = keyOf(change);
+    const entry = { ...change, id, baseRevision: current.revision, settled: false };
+    pendingRef.current.set(key, entry);
+    setPending([...pendingRef.current.values()]);
+    errorsRef.current.delete(key);
+    setErrors([...errorsRef.current.values()]);
+    current.onStart?.();
+    let asynchronous = false;
+    const settle = (failed, cause) => {
+      if (!mountedRef.current || scopeRef.current !== scope) return;
+      if (asynchronous) setInFlightCount((count) => Math.max(0, count - 1));
+      const latest = pendingRef.current.get(key);
+      if (latest?.id !== id) return;
+      if (failed) {
+        pendingRef.current.delete(key);
+        const failure = cause instanceof Error ? cause : new Error(String(cause));
+        errorsRef.current.set(key, {
+          key,
+          message: failure.message || "Spreadsheet resize failed",
+          retry: () => {
+            if (!mountedRef.current || scopeRef.current !== scope) return;
+            submit(change);
+          }
+        });
+        setErrors([...errorsRef.current.values()]);
+        optionsRef.current.onCommandError?.(failure);
+      } else {
+        pendingRef.current.set(key, {
+          ...entry,
+          baseRevision: optionsRef.current.revision,
+          settled: true
+        });
+      }
+      setPending([...pendingRef.current.values()]);
+    };
+    try {
+      const result = current.commit(change);
+      if (result && typeof result.then === "function") {
+        asynchronous = true;
+        setInFlightCount((count) => count + 1);
+        void Promise.resolve(result).then(
+          () => settle(false),
+          (cause) => settle(true, cause)
+        );
+      } else {
+        settle(false);
+      }
+    } catch (cause) {
+      settle(true, cause);
+    }
+  }, []);
+  const update = useCallback2((next) => {
+    activeRef.current = next;
+    if (frameRef.current !== null) return;
+    if (typeof globalThis.requestAnimationFrame !== "function") {
+      setGesture(next);
+      return;
+    }
+    frameRef.current = globalThis.requestAnimationFrame(() => {
+      frameRef.current = null;
+      if (mountedRef.current) setGesture(activeRef.current);
+    });
+  }, []);
+  const finish = useCallback2(() => {
+    const active = activeRef.current;
+    cancel();
+    if (!active || active.size === active.startSize) return;
+    submit({ sheetId: active.sheetId, axis: active.axis, index: active.index, size: active.size });
+  }, [cancel, submit]);
+  const begin = useCallback2(
+    (axis, index, pointerId, position) => {
+      const current = optionsRef.current;
+      if (!current.enabled || !current.commit) return;
+      const existing = pendingRef.current.get(keyOf({ axis, index }));
+      const size = existing?.size ?? authoritativeSize(axis, index);
+      cancel();
+      const next = {
+        sheetId: current.sheetId,
+        axis,
+        index,
+        size,
+        startSize: size,
+        startPosition: position,
+        pointerId
+      };
+      activeRef.current = next;
+      setGesture(next);
+      current.onStart?.();
+    },
+    [authoritativeSize, cancel]
+  );
+  const handleProps = useCallback2(
+    (axis, index) => ({
+      onPointerDown(event) {
+        if (event.button !== 0 || event.isPrimary === false) return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget.focus({ preventScroll: true });
+        begin(axis, index, event.pointerId, axis === "column" ? event.clientX : event.clientY);
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+      },
+      onPointerMove(event) {
+        const active = activeRef.current;
+        if (!active || active.pointerId !== event.pointerId || active.axis !== axis || active.index !== index)
+          return;
+        event.preventDefault();
+        event.stopPropagation();
+        const position = axis === "column" ? event.clientX : event.clientY;
+        update({
+          ...active,
+          size: boundedSize(active.startSize + position - active.startPosition)
+        });
+      },
+      onPointerUp(event) {
+        const active = activeRef.current;
+        if (!active || active.pointerId !== event.pointerId || active.axis !== axis || active.index !== index)
+          return;
+        event.preventDefault();
+        event.stopPropagation();
+        const position = axis === "column" ? event.clientX : event.clientY;
+        activeRef.current = {
+          ...active,
+          size: boundedSize(active.startSize + position - active.startPosition)
+        };
+        finish();
+        if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+          event.currentTarget.releasePointerCapture?.(event.pointerId);
+        }
+      },
+      onPointerCancel(event) {
+        const active = activeRef.current;
+        if (active?.pointerId === event.pointerId && active.axis === axis && active.index === index)
+          cancel();
+        event.stopPropagation();
+      },
+      onLostPointerCapture(event) {
+        const active = activeRef.current;
+        if (active?.pointerId === event.pointerId && active.axis === axis && active.index === index)
+          cancel();
+      },
+      onKeyDown(event) {
+        event.stopPropagation();
+        if (event.key === "Escape") {
+          event.preventDefault();
+          cancel();
+          return;
+        }
+        if (event.key === "Enter") {
+          event.preventDefault();
+          finish();
+          return;
+        }
+        const negative = axis === "column" ? "ArrowLeft" : "ArrowUp";
+        const positive = axis === "column" ? "ArrowRight" : "ArrowDown";
+        if (event.key !== negative && event.key !== positive && event.key !== "Home") return;
+        event.preventDefault();
+        if (activeRef.current?.pointerId !== null || activeRef.current.axis !== axis || activeRef.current.index !== index) {
+          begin(axis, index, null, 0);
+        }
+        const active = activeRef.current;
+        if (!active) return;
+        const current = optionsRef.current;
+        const size = event.key === "Home" ? axis === "row" ? current.defaultRowHeight : current.defaultColumnWidth : active.size + (event.key === negative ? -1 : 1) * (event.shiftKey ? 1 : 8);
+        update({ ...active, size: boundedSize(size) });
+      },
+      onKeyUp(event) {
+        event.stopPropagation();
+        const active = activeRef.current;
+        if (active?.axis === axis && active.index === index && (event.key === "Home" || event.key.startsWith("Arrow")))
+          finish();
+      },
+      onBlur() {
+        const active = activeRef.current;
+        if (active?.pointerId === null && active.axis === axis && active.index === index) finish();
+      }
+    }),
+    [begin, cancel, finish, update]
+  );
+  const pendingRows = useMemo(() => pending.filter((entry) => entry.axis === "row"), [pending]);
+  const pendingColumns = useMemo(
+    () => pending.filter((entry) => entry.axis === "column"),
+    [pending]
+  );
+  const rowGesture = gesture?.axis === "row" ? gesture : null;
+  const columnGesture = gesture?.axis === "column" ? gesture : null;
+  const rowHeights = useMemo(
+    () => previewDimensions(options.rowHeights, pendingRows, rowGesture),
+    [options.rowHeights, pendingRows, rowGesture]
+  );
+  const columnWidths = useMemo(
+    () => previewDimensions(options.columnWidths, pendingColumns, columnGesture),
+    [options.columnWidths, pendingColumns, columnGesture]
+  );
+  const previewKey = [
+    ...pending.map((entry) => `${entry.axis}:${entry.index}:${entry.size}`),
+    ...gesture ? [`${gesture.axis}:${gesture.index}:${gesture.size}`] : []
+  ].join(";");
+  return {
+    rowHeights,
+    columnWidths,
+    previewKey,
+    handleProps,
+    pendingCount: inFlightCount,
+    error: errors[0] ? { message: errors[0].message, retry: options.enabled ? errors[0].retry : void 0 } : null,
+    clearError
+  };
+}
+function previewDimensions(entries, pending, gesture) {
+  if (!pending.length && !gesture) return entries;
+  const projected = new Map(entries);
+  for (const entry of pending) projected.set(entry.index, entry.size);
+  if (gesture) projected.set(gesture.index, gesture.size);
+  return [...projected.entries()];
+}
+function SpreadsheetResizeHandle({
+  axis,
+  label,
+  size,
+  ...handlers
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...handlers,
+      role: "separator",
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-orientation": axis === "column" ? "vertical" : "horizontal",
+      "aria-valuemin": MIN_SIZE,
+      "aria-valuemax": MAX_SIZE,
+      "aria-valuenow": size,
+      "aria-valuetext": `${size} pixels`,
+      "data-og-resize-axis": axis,
+      style: { [axis === "column" ? "right" : "bottom"]: "calc(var(--spacing) * -1)" },
+      className: cn(
+        "pointer-events-auto absolute z-40 touch-none outline-hidden hover:bg-og-accent/20 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent",
+        axis === "column" ? "top-0 h-full w-2 cursor-col-resize" : "left-0 h-2 w-full cursor-row-resize"
+      )
+    }
+  );
+}
+
 // src/components/artifacts/spreadsheet-grid.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var MAX_ROWS = 1048576;
 var MAX_COLUMNS = 16384;
 var ROW_HEADER_WIDTH = 48;
@@ -556,7 +1032,8 @@ var MAX_MOUNTED_AXIS_ITEMS = 512;
 var MAX_MOUNTED_GRID_CELLS = 2048;
 var MAX_CLIPBOARD_INPUT_BYTES = 4 * 1024 * 1024;
 var MAX_CLIPBOARD_CELLS = 65536;
-var useClientLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+var EMPTY_DIMENSIONS = [];
+var useClientLayoutEffect = typeof window === "undefined" ? useEffect3 : useLayoutEffect;
 function boundedInteger(value, fallback, max) {
   if (value === void 0) return fallback;
   if (!Number.isFinite(value)) return fallback;
@@ -795,12 +1272,6 @@ function isCellSelected(selection, row, col) {
   const normalized = normalizeSelection(selection);
   return row >= normalized.top && row <= normalized.bottom && col >= normalized.left && col <= normalized.right;
 }
-function displayValue2(value) {
-  if (value === null || value === void 0) 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) {
   if (input === "") return null;
   const normalized = input.trim();
@@ -909,7 +1380,7 @@ function spreadsheetCanvasTheme(element) {
   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 || computedToken(
     style,
@@ -944,11 +1415,11 @@ function spreadsheetCanvasTheme(element) {
   };
 }
 function useWorkbookViewState(workbook) {
-  const [view, setView] = useState(() => ({
+  const [view, setView] = useState3(() => ({
     revision: workbook.revision,
     dimensionRevision: 0
   }));
-  useEffect(() => {
+  useEffect3(() => {
     setView(
       (current) => current.revision === workbook.revision ? current : { revision: workbook.revision, dimensionRevision: current.dimensionRevision + 1 }
     );
@@ -985,20 +1456,20 @@ function SpreadsheetArtifactSurface({
       return availableSheets[0];
     }
   })();
-  const [activeSheetId, setActiveSheetId] = useState(initial?.id ?? null);
+  const [activeSheetId, setActiveSheetId] = useState3(initial?.id ?? null);
   const activeSheet = availableSheets.find((sheet) => sheet.id === activeSheetId) ?? availableSheets[0] ?? null;
-  useEffect(() => {
+  useEffect3(() => {
     if (!activeSheet && activeSheetId !== null) setActiveSheetId(null);
     else if (activeSheet && activeSheet.id !== activeSheetId) setActiveSheetId(activeSheet.id);
   }, [activeSheet, activeSheetId, revision]);
-  const selectSheet = useCallback(
+  const selectSheet = useCallback3(
     (sheet) => {
       workbook.worksheets.setActiveWorksheet(sheet);
       setActiveSheetId(sheet.id);
     },
     [workbook]
   );
-  const addSheet = useCallback(() => {
+  const addSheet = useCallback3(() => {
     const sheet = workbook.worksheets.add(nextAvailableSheetName(workbook));
     selectSheet(sheet);
   }, [selectSheet, workbook]);
@@ -1009,7 +1480,7 @@ function SpreadsheetArtifactSurface({
       role: "tablist",
       "aria-label": "Worksheets",
       children: [
-        availableSheets.map((sheet) => /* @__PURE__ */ jsx(
+        availableSheets.map((sheet) => /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
@@ -1024,20 +1495,20 @@ function SpreadsheetArtifactSurface({
           },
           sheet.id
         )),
-        !readOnly && allowAddSheet ? /* @__PURE__ */ jsx(
+        !readOnly && allowAddSheet ? /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
             onClick: addSheet,
             "aria-label": "Add worksheet",
             className: "grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted hover:bg-og-surface-3 hover:text-og-fg [&>svg]:size-3.5",
-            children: /* @__PURE__ */ jsx(PlusIcon, {})
+            children: /* @__PURE__ */ jsx2(PlusIcon, {})
           }
         ) : null
       ]
     }
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     ArtifactSurface,
     {
       modality: "spreadsheet",
@@ -1045,7 +1516,7 @@ function SpreadsheetArtifactSurface({
       subtitle: subtitle ?? (activeSheet ? `${availableSheets.length} sheet${availableSheets.length === 1 ? "" : "s"}` : "Empty workbook"),
       actions,
       footer,
-      children: activeSheet ? /* @__PURE__ */ jsx(
+      children: activeSheet ? /* @__PURE__ */ jsx2(
         SpreadsheetGrid,
         {
           ...gridProps,
@@ -1054,19 +1525,19 @@ function SpreadsheetArtifactSurface({
           readOnly
         },
         activeSheet.id
-      ) : /* @__PURE__ */ jsx(
+      ) : /* @__PURE__ */ jsx2(
         "div",
         {
           className: "grid h-full place-items-center bg-og-bg p-6 text-center",
           style: { minHeight: 224 },
           children: /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-og-base font-medium text-og-fg", children: "This workbook has no worksheets." }),
-            !readOnly && allowAddSheet ? /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2("p", { className: "text-og-base font-medium text-og-fg", children: "This workbook has no worksheets." }),
+            !readOnly && allowAddSheet ? /* @__PURE__ */ jsx2(
               "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",
                 children: "Add worksheet"
               }
             ) : null
@@ -1086,12 +1557,13 @@ function SpreadsheetGrid({
   overscanColumns = 2,
   onSelectionChange,
   onCommit,
+  onResize,
   onViewportChange,
   className
 }) {
   const { revision, dimensionRevision } = useWorkbookViewState(workbook);
   const boundedProjection = requestedRowCount !== void 0 || requestedColumnCount !== void 0;
-  const usedRange = useMemo(() => {
+  const usedRange = useMemo2(() => {
     void revision;
     return boundedProjection ? worksheet.usedRangeAddress() : null;
   }, [boundedProjection, revision, worksheet]);
@@ -1111,15 +1583,15 @@ function SpreadsheetGrid({
     MAX_COLUMNS,
     MAX_COLUMNS
   );
-  const rowHeights = useMemo(() => {
+  const rowHeights = useMemo2(() => {
     void dimensionRevision;
     return [...worksheet.rowHeightEntries()];
   }, [dimensionRevision, worksheet]);
-  const columnWidths = useMemo(() => {
+  const columnWidths = useMemo2(() => {
     void dimensionRevision;
     return [...worksheet.columnWidthEntries()];
   }, [dimensionRevision, worksheet]);
-  const projection = useMemo(() => {
+  const projection = useMemo2(() => {
     void dimensionRevision;
     const cells = new SparseSpreadsheetCellIndex(
       function* projectedCells() {
@@ -1153,7 +1625,7 @@ function SpreadsheetGrid({
         const data = worksheet.cellData(row, col);
         return {
           value: data.formula ? workbook.valueAt(worksheet, { row, col }) : data.value,
-          input: data.formula ?? displayValue2(data.value),
+          input: data.formula ?? spreadsheetCellEditSource(data.value),
           format: data.format
         };
       }
@@ -1169,7 +1641,7 @@ function SpreadsheetGrid({
     workbook,
     worksheet
   ]);
-  const commit = useCallback(
+  const commit = useCallback3(
     (next) => {
       const target = worksheet.getCell(next.cell.row, next.cell.col);
       if (next.kind === "formula") target.formulas = [[next.input]];
@@ -1178,7 +1650,7 @@ function SpreadsheetGrid({
     },
     [onCommit, worksheet]
   );
-  const commitRange = useCallback(
+  const commitRange = useCallback3(
     (next) => {
       if (next.rows * next.columns !== next.inputs.length) {
         throw new Error("Spreadsheet paste shape is invalid");
@@ -1199,7 +1671,7 @@ function SpreadsheetGrid({
     },
     [workbook, worksheet]
   );
-  const clear = useCallback(
+  const clear = useCallback3(
     (next) => {
       const normalized = normalizeSelection(next);
       worksheet.getRangeByIndexes(
@@ -1211,7 +1683,15 @@ function SpreadsheetGrid({
     },
     [worksheet]
   );
-  return /* @__PURE__ */ jsx(
+  const resize = useCallback3(
+    (change) => {
+      if (change.axis === "column") worksheet.setColumnWidth(change.index, change.size);
+      else worksheet.setRowHeight(change.index, change.size);
+      onResize?.(change);
+    },
+    [onResize, worksheet]
+  );
+  return /* @__PURE__ */ jsx2(
     SpreadsheetProjectionGrid,
     {
       projection,
@@ -1222,6 +1702,7 @@ function SpreadsheetGrid({
       commit,
       commitRange,
       clear,
+      resize,
       onViewportChange,
       className
     }
@@ -1236,65 +1717,117 @@ function SpreadsheetProjectionGrid({
   commit,
   commitRange,
   clear,
+  resize,
+  pendingTransactions = 0,
+  syncStatus,
+  syncError,
   onCommandError,
   onViewportChange,
   className
 }) {
   const { revision, rowCount, columnCount } = projection;
-  const dimensionRevision = projection.dimensionRevision ?? 0;
   const editable = !readOnly && commit !== void 0;
-  const rows = useMemo(() => {
-    void dimensionRevision;
-    return buildAxis(rowCount, projection.defaultRowHeight ?? 24, projection.rowHeights ?? []);
-  }, [dimensionRevision, projection.defaultRowHeight, projection.rowHeights, rowCount]);
-  const columns = useMemo(() => {
-    void dimensionRevision;
-    return buildAxis(
-      columnCount,
-      projection.defaultColumnWidth ?? 96,
-      projection.columnWidths ?? []
-    );
-  }, [columnCount, dimensionRevision, projection.columnWidths, projection.defaultColumnWidth]);
-  const canvasRows = useMemo(() => canvasAxis(rows), [rows]);
-  const canvasColumns = useMemo(() => canvasAxis(columns), [columns]);
-  const [selection, setSelection] = useState(() => ({
+  const commandQueue = useSpreadsheetCommandQueue({
+    scopeKey: `${projection.sheetId}:${projection.generationId ?? "none"}`,
+    enabled: editable,
+    onCommandError
+  });
+  const [commandFailure, setCommandFailure] = useState3(null);
+  const clearPreflightFailure = commandQueue.clearPreflightFailure;
+  const clearCommandFailure = useCallback3(() => {
+    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 !== void 0,
+    commit: resize,
+    onCommandError,
+    onStart: clearCommandFailure
+  });
+  const dimensionRevision = `${projection.dimensionRevision ?? 0}:${resizing.previewKey}`;
+  const rows = useMemo2(() => {
+    return buildAxis(rowCount, projection.defaultRowHeight ?? 24, resizing.rowHeights);
+  }, [projection.defaultRowHeight, resizing.rowHeights, rowCount]);
+  const columns = useMemo2(() => {
+    return buildAxis(columnCount, projection.defaultColumnWidth ?? 96, resizing.columnWidths);
+  }, [columnCount, resizing.columnWidths, projection.defaultColumnWidth]);
+  const canvasRows = useMemo2(() => canvasAxis(rows), [rows]);
+  const canvasColumns = useMemo2(() => canvasAxis(columns), [columns]);
+  const [selection, setSelection] = useState3(() => ({
     sheetId: projection.sheetId,
     anchor: { row: 0, col: 0 },
     focus: { row: 0, col: 0 }
   }));
-  const [editMode, setEditMode] = useState(null);
-  const [draft, setDraft] = useState(
+  const [editMode, setEditMode] = useState3(null);
+  const [draft, setDraft] = useState3(
     () => projection.readCell(selection.focus.row, selection.focus.col)?.input ?? ""
   );
-  const [pendingCommands, setPendingCommands] = useState(0);
-  const [commandFailure, setCommandFailure] = useState(null);
-  const [viewport, setViewport] = useState({
+  const visibleCommandFailure = resizing.error ?? commandQueue.error ?? commandFailure ?? (syncError ? { message: syncError, retry: void 0 } : null);
+  const pendingCommandCount = commandQueue.pendingCount + resizing.pendingCount + pendingTransactions;
+  const visibleSyncStatus = pendingCommandCount > 0 && (!syncStatus || syncStatus === "Saved" || syncStatus === "Read only") ? "Saving\u2026" : syncStatus;
+  const runQueuedCommand = commandQueue.run;
+  const [viewport, setViewport] = useState3({
     width: FALLBACK_VIEWPORT_WIDTH,
     height: FALLBACK_VIEWPORT_HEIGHT,
     scrollLeft: 0,
     scrollTop: 0,
     devicePixelRatio: 1
   });
-  const [canvasReady, setCanvasReady] = useState(false);
-  const [canvasEpoch, setCanvasEpoch] = useState(0);
-  const viewportRef = useRef(null);
-  const canvasRef = useRef(null);
-  const editorRef = useRef(null);
-  const selectionRef = useRef(selection);
-  const selectingRef = useRef(null);
-  const committingRef = useRef(false);
-  const composingRef = useRef(false);
-  const commitAfterCompositionRef = useRef(false);
-  const selectDraftOnFocusRef = useRef(true);
-  const initialDraftRef = useRef(draft);
-  const optimisticInputRef = useRef(null);
-  const mountedRef = useRef(true);
-  const commandScopeRef = useRef(0);
-  const latestCommandRef = useRef(0);
-  const canvasRendererRef = useRef(null);
+  const [canvasReady, setCanvasReady] = useState3(false);
+  const [canvasEpoch, setCanvasEpoch] = useState3(0);
+  const viewportRef = useRef3(null);
+  const canvasRef = useRef3(null);
+  const editorRef = useRef3(null);
+  const selectionRef = useRef3(selection);
+  const selectingRef = useRef3(null);
+  const committingRef = useRef3(false);
+  const composingRef = useRef3(false);
+  const commitAfterCompositionRef = useRef3(false);
+  const selectDraftOnFocusRef = useRef3(true);
+  const initialDraftRef = useRef3(draft);
+  const optimisticInputsRef = useRef3(
+    /* @__PURE__ */ new Map()
+  );
+  const [optimisticEpoch, setOptimisticEpoch] = useState3(0);
+  const refreshOptimisticInputs = useCallback3(() => setOptimisticEpoch((value) => value + 1), []);
+  const optimisticScope = `${projection.sheetId}:${projection.generationId ?? "none"}`;
+  const optimisticScopeRef = useRef3(optimisticScope);
+  if (optimisticScopeRef.current !== optimisticScope) {
+    optimisticScopeRef.current = optimisticScope;
+    optimisticInputsRef.current.clear();
+  }
+  const projectionRef = useRef3(projection);
+  projectionRef.current = projection;
+  const editModeRef = useRef3(editMode);
+  editModeRef.current = editMode;
+  const canvasRendererRef = useRef3(null);
   if (!canvasRendererRef.current) canvasRendererRef.current = new SpreadsheetCanvasRenderer();
   const reactId = useId().replaceAll(":", "");
-  const updateSelection = useCallback(
+  const readEditInput = useCallback3(
+    (cell) => optimisticInputsRef.current.get(`${cell.row}:${cell.col}`)?.input ?? projectionRef.current.readCell(cell.row, cell.col)?.input ?? "",
+    []
+  );
+  const forgetOptimisticInputs = useCallback3(
+    (target) => {
+      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 = useCallback3(
     (next) => {
       selectionRef.current = next;
       setSelection(next);
@@ -1302,39 +1835,44 @@ function SpreadsheetProjectionGrid({
     },
     [onSelectionChange]
   );
-  useEffect(() => {
+  useEffect3(() => {
     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;
-    };
-  }, []);
-  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;
+  useEffect3(() => {
+    optimisticInputsRef.current.clear();
+    refreshOptimisticInputs();
+  }, [projection.generationId, projection.sheetId, refreshOptimisticInputs]);
+  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;
     if (!element) return;
@@ -1355,10 +1893,10 @@ function SpreadsheetProjectionGrid({
       globalThis.removeEventListener?.("resize", measure);
     };
   }, []);
-  useEffect(() => {
+  useEffect3(() => {
     return () => canvasRendererRef.current?.dispose();
   }, []);
-  useEffect(() => {
+  useEffect3(() => {
     if (typeof document === "undefined") return;
     let active = true;
     void document.fonts?.ready.then(() => {
@@ -1383,7 +1921,7 @@ function SpreadsheetProjectionGrid({
       observer.disconnect();
     };
   }, []);
-  useEffect(() => {
+  useEffect3(() => {
     if (editMode !== "cell") return;
     const editor = editorRef.current;
     editor?.focus();
@@ -1391,7 +1929,7 @@ function SpreadsheetProjectionGrid({
     if (selectDraftOnFocusRef.current) editor.select();
     else editor.setSelectionRange(editor.value.length, editor.value.length);
   }, [editMode]);
-  const ensureVisible = useCallback(
+  const ensureVisible = useCallback3(
     (cell) => {
       const element = viewportRef.current;
       if (!element) return;
@@ -1428,7 +1966,7 @@ function SpreadsheetProjectionGrid({
     },
     [columns, rows]
   );
-  const moveSelection = useCallback(
+  const moveSelection = useCallback3(
     (rowDelta, colDelta, extend) => {
       const focus = {
         row: Math.max(0, Math.min(rowCount - 1, selection.focus.row + rowDelta)),
@@ -1444,45 +1982,14 @@ function SpreadsheetProjectionGrid({
     },
     [columnCount, ensureVisible, projection.sheetId, rowCount, selection, updateSelection]
   );
-  const runCommand = useCallback(
-    (invoke, retry, rollback) => {
-      const commandId = latestCommandRef.current + 1;
-      latestCommandRef.current = commandId;
-      const scope = commandScopeRef.current;
+  const runCommand = useCallback3(
+    (invoke, retry, rollback, target, accepted) => {
       setCommandFailure(null);
-      const fail = (cause) => {
-        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;
-      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(
+  const reportCommandFailure = useCallback3(
     (cause) => {
       const error = cause instanceof Error ? cause : new Error(String(cause));
       setCommandFailure({ message: error.message || "Spreadsheet action failed" });
@@ -1490,7 +1997,7 @@ function SpreadsheetProjectionGrid({
     },
     [onCommandError]
   );
-  const commitDraft = useCallback(
+  const commitDraft = useCallback3(
     (input = draft) => {
       if (committingRef.current) return;
       committingRef.current = true;
@@ -1516,21 +2023,41 @@ function SpreadsheetProjectionGrid({
         kind: input.startsWith("=") ? "formula" : "value"
       };
       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();
+            }
           }
         );
       };
@@ -1542,36 +2069,64 @@ 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(() => {
+  const clearSelection = useCallback3(() => {
     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]);
-  const pasteClipboard = useCallback(
+  }, [clear, editable, forgetOptimisticInputs, runCommand, selection]);
+  const pasteClipboard = useCallback3(
     (event) => {
       if (!editable || editMode !== null) return;
       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;
+        let target;
+        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
@@ -1599,7 +2154,17 @@ 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();
     },
@@ -1610,13 +2175,14 @@ function SpreadsheetProjectionGrid({
       editMode,
       editable,
       ensureVisible,
+      forgetOptimisticInputs,
       projection.sheetId,
       rowCount,
       runCommand,
       updateSelection
     ]
   );
-  const copySelection = useCallback(
+  const copySelection = useCallback3(
     (event) => {
       if (editMode !== null) return;
       const selected = normalizeSelection(selectionRef.current);
@@ -1647,19 +2213,19 @@ function SpreadsheetProjectionGrid({
     },
     [editMode, projection, reportCommandFailure]
   );
-  const beginEditing = useCallback(
+  const beginEditing = useCallback3(
     (initial, cell = 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 === void 0;
       setDraft(initial ?? current);
       setEditMode("cell");
     },
-    [editable, ensureVisible, projection]
+    [editable, ensureVisible, readEditInput]
   );
-  const onGridKeyDown = useCallback(
+  const onGridKeyDown = useCallback3(
     (event) => {
       if (editMode !== null) return;
       if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return;
@@ -1733,7 +2299,7 @@ function SpreadsheetProjectionGrid({
       projection.usedRange
     ]
   );
-  const onEditorKeyDown = useCallback(
+  const onEditorKeyDown = useCallback3(
     (event) => {
       if (composingRef.current || event.nativeEvent.isComposing) return;
       if (event.key === "Enter") {
@@ -1742,7 +2308,7 @@ 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(() => {
@@ -1750,12 +2316,12 @@ function SpreadsheetProjectionGrid({
         });
       }
     },
-    [commitDraft, projection, selection.focus.col, selection.focus.row]
+    [commitDraft, readEditInput, selection.focus]
   );
-  const onEditorCompositionStart = useCallback(() => {
+  const onEditorCompositionStart = useCallback3(() => {
     composingRef.current = true;
   }, []);
-  const onEditorCompositionEnd = useCallback(
+  const onEditorCompositionEnd = useCallback3(
     (input) => {
       composingRef.current = false;
       if (!commitAfterCompositionRef.current) return;
@@ -1764,7 +2330,7 @@ function SpreadsheetProjectionGrid({
     },
     [commitDraft]
   );
-  const commitEditorOnBlur = useCallback(
+  const commitEditorOnBlur = useCallback3(
     (mode, input) => {
       if (editMode !== mode) return;
       if (composingRef.current) {
@@ -1775,7 +2341,7 @@ function SpreadsheetProjectionGrid({
     },
     [commitDraft, editMode]
   );
-  const selectCell = useCallback(
+  const selectCell = useCallback3(
     (cell, extend) => {
       const current = selectionRef.current;
       const next = {
@@ -1789,7 +2355,7 @@ function SpreadsheetProjectionGrid({
     },
     [projection.sheetId, updateSelection]
   );
-  const hitTestCell = useCallback(
+  const hitTestCell = useCallback3(
     (clientX, clientY) => {
       const element = viewportRef.current;
       if (!element) return null;
@@ -1815,7 +2381,7 @@ function SpreadsheetProjectionGrid({
     },
     [columnCount, columns, rowCount, rows]
   );
-  const onGridPointerDown = useCallback(
+  const onGridPointerDown = useCallback3(
     (event) => {
       if (event.button !== 0) return;
       const cell = hitTestCell(event.clientX, event.clientY);
@@ -1834,7 +2400,7 @@ function SpreadsheetProjectionGrid({
     },
     [hitTestCell, projection.sheetId, updateSelection]
   );
-  const onGridPointerMove = useCallback(
+  const onGridPointerMove = useCallback3(
     (event) => {
       const selecting = selectingRef.current;
       if (!selecting || selecting.pointerId !== event.pointerId) return;
@@ -1846,11 +2412,11 @@ function SpreadsheetProjectionGrid({
     },
     [hitTestCell, projection.sheetId, updateSelection]
   );
-  const stopPointerSelection = useCallback((pointerId) => {
+  const stopPointerSelection = useCallback3((pointerId) => {
     if (pointerId !== void 0 && selectingRef.current?.pointerId !== pointerId) return;
     selectingRef.current = null;
   }, []);
-  useEffect(() => {
+  useEffect3(() => {
     if (typeof window === "undefined") return;
     const stopSelecting = () => stopPointerSelection();
     window.addEventListener("pointerup", stopSelecting);
@@ -1906,7 +2472,7 @@ function SpreadsheetProjectionGrid({
   const activeCellVisible = selection.focus.row >= rowWindow.start && selection.focus.row < rowWindow.end && selection.focus.col >= columnWindow.start && selection.focus.col < columnWindow.end;
   const activeCellId = `${reactId}-cell-${selection.focus.row}-${selection.focus.col}`;
   const hiddenActiveValue = activeCellVisible ? null : projection.readCell(selection.focus.row, selection.focus.col)?.value;
-  useEffect(() => {
+  useEffect3(() => {
     if (!onViewportChange) return;
     const next = {
       sheetId: projection.sheetId,
@@ -2016,11 +2582,11 @@ function SpreadsheetProjectionGrid({
     "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 },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 shrink-0 items-center border-b border-og-border bg-og-surface-1", children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "output",
             {
               "aria-label": "Selected range",
@@ -2029,17 +2595,17 @@ function SpreadsheetProjectionGrid({
               children: selectionName(selection)
             }
           ),
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "px-2 font-og-mono text-og-sm italic text-og-fg-subtle", children: "fx" }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "px-2 font-og-mono text-og-sm italic text-og-fg-subtle", children: "fx" }),
+          /* @__PURE__ */ jsx2(
             "input",
             {
               "aria-label": "Formula or value",
               readOnly: !editable,
-              "aria-invalid": commandFailure ? "true" : void 0,
+              "aria-invalid": visibleCommandFailure ? "true" : void 0,
               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");
@@ -2052,22 +2618,30 @@ 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 ? /* @__PURE__ */ jsx2(
+            "output",
+            {
+              "aria-label": "Spreadsheet sync status",
+              className: "shrink-0 px-2 text-og-xs text-og-fg-muted",
+              children: visibleCommandFailure ? "Not saved" : visibleSyncStatus
+            }
+          ) : null
         ] }),
-        /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: commandFailure?.message ?? (pendingCommands > 0 ? "Saving spreadsheet changes" : "") }),
-        commandFailure ? /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx2("div", { role: "status", "aria-live": "polite", className: "sr-only", children: visibleCommandFailure?.message ?? (pendingCommandCount > 0 ? "Saving spreadsheet changes" : "") }),
+        visibleCommandFailure ? /* @__PURE__ */ jsxs(
           "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)" },
             children: [
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: commandFailure.message }),
-              commandFailure.retry ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2("span", { className: "truncate", children: visibleCommandFailure.message }),
+              visibleCommandFailure.retry ? /* @__PURE__ */ jsx2(
                 "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",
                   children: "Retry"
                 }
@@ -2075,7 +2649,7 @@ function SpreadsheetProjectionGrid({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "div",
           {
             ref: viewportRef,
@@ -2086,7 +2660,7 @@ function SpreadsheetProjectionGrid({
             "aria-colcount": columnCount,
             "aria-multiselectable": "true",
             "aria-readonly": !editable,
-            "aria-busy": pendingCommands > 0 ? "true" : void 0,
+            "aria-busy": pendingCommandCount > 0 ? "true" : void 0,
             "aria-activedescendant": activeCellId,
             onKeyDown: onGridKeyDown,
             onCopy: copySelection,
@@ -2120,10 +2694,14 @@ function SpreadsheetProjectionGrid({
                 className: "relative",
                 style: {
                   width: horizontalProjection.physicalTotal,
-                  height: verticalProjection.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"
                 },
                 children: [
-                  /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx2(
                     "canvas",
                     {
                       ref: canvasRef,
@@ -2138,7 +2716,7 @@ function SpreadsheetProjectionGrid({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx2(
                     "div",
                     {
                       "aria-hidden": true,
@@ -2150,12 +2728,12 @@ function SpreadsheetProjectionGrid({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { role: "row", className: "contents", children: columnLayout.map(({ col, left, width }) => /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx2("div", { role: "row", className: "contents", children: columnLayout.map(({ col, left, width }) => /* @__PURE__ */ jsxs(
                     "div",
                     {
                       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,
@@ -2168,7 +2746,18 @@ function SpreadsheetProjectionGrid({
                           color: "transparent"
                         } : void 0
                       },
-                      children: columnName2(col)
+                      children: [
+                        /* @__PURE__ */ jsx2("span", { className: "max-w-full overflow-hidden", children: columnName2(col) }),
+                        !readOnly && resize ? /* @__PURE__ */ jsx2(
+                          SpreadsheetResizeHandle,
+                          {
+                            axis: "column",
+                            label: `Resize column ${columnName2(col)}`,
+                            size: width,
+                            ...resizing.handleProps("column", col)
+                          }
+                        ) : null
+                      ]
                     },
                     `header-${col}`
                   )) }),
@@ -2185,11 +2774,11 @@ function SpreadsheetProjectionGrid({
                           height
                         },
                         children: [
-                          /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsxs(
                             "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 ? {
@@ -2198,7 +2787,18 @@ function SpreadsheetProjectionGrid({
                                   color: "transparent"
                                 } : void 0
                               },
-                              children: row + 1
+                              children: [
+                                row + 1,
+                                !readOnly && resize ? /* @__PURE__ */ jsx2(
+                                  SpreadsheetResizeHandle,
+                                  {
+                                    axis: "row",
+                                    label: `Resize row ${row + 1}`,
+                                    size: height,
+                                    ...resizing.handleProps("row", row)
+                                  }
+                                ) : null
+                              ]
                             }
                           ),
                           columnLayout.map(({ col, left, width }) => {
@@ -2210,34 +2810,41 @@ function SpreadsheetProjectionGrid({
                               format: {}
                             };
                             const value = data.value;
+                            const optimistic = editable ? optimisticInputsRef.current.get(`${row}:${col}`) : void 0;
+                            const display = optimistic ? optimistic.input : formatSpreadsheetGeneralDisplay(value);
                             const address = cellName({ row, col });
                             const error = typeof value === "string" && value.startsWith("#");
-                            return /* @__PURE__ */ jsx(
+                            return /* @__PURE__ */ jsx2(
                               "div",
                               {
                                 id: `${reactId}-cell-${row}-${col}`,
                                 role: "gridcell",
                                 "aria-colindex": col + 1,
                                 "aria-selected": selected,
-                                "aria-label": `${address}${value === null ? "" : `, ${displayValue2(value)}`}`,
+                                "aria-label": `${address}${display ? `, ${display}` : ""}${optimistic ? optimistic.input.startsWith("=") ? ", pending formula, awaiting calculation" : ", pending edit" : ""}`,
+                                "data-og-pending-input": optimistic ? "true" : void 0,
                                 "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 && active && "z-10 bg-og-accent/10 ring-2 ring-inset ring-og-accent",
+                                  (!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"
                                 ),
                                 style: {
                                   left,
                                   width,
                                   ...cellStyle(data.format),
-                                  ...canvasReady ? {
+                                  ...canvasReady && !optimistic ? {
                                     background: "transparent",
                                     borderColor: "transparent",
                                     color: "transparent"
+                                  } : void 0,
+                                  ...optimistic ? {
+                                    background: data.format.fill ?? "var(--og-color-surface-1)",
+                                    zIndex: 10
                                   } : void 0
                                 },
-                                children: active && editMode === "cell" ? /* @__PURE__ */ jsx(
+                                children: active && editMode === "cell" ? /* @__PURE__ */ jsx2(
                                   "input",
                                   {
                                     ref: editorRef,
@@ -2251,7 +2858,7 @@ function SpreadsheetProjectionGrid({
                                     onPointerDown: (event) => event.stopPropagation(),
                                     className: "pointer-events-auto absolute inset-0 size-full bg-og-surface-1 px-1.5 font-mono text-og-sm text-og-fg outline-hidden ring-2 ring-inset ring-og-accent"
                                   }
-                                ) : /* @__PURE__ */ jsx("span", { className: "block min-w-0 overflow-hidden text-ellipsis", children: displayValue2(value) })
+                                ) : /* @__PURE__ */ jsx2("span", { className: "block min-w-0 overflow-hidden text-ellipsis", children: display })
                               },
                               col
                             );
@@ -2261,14 +2868,14 @@ function SpreadsheetProjectionGrid({
                       `row-${row}`
                     );
                   }),
-                  !activeCellVisible ? /* @__PURE__ */ jsx("div", { role: "row", "aria-rowindex": selection.focus.row + 1, className: "sr-only", children: /* @__PURE__ */ jsx(
+                  !activeCellVisible ? /* @__PURE__ */ jsx2("div", { role: "row", "aria-rowindex": selection.focus.row + 1, className: "sr-only", children: /* @__PURE__ */ jsx2(
                     "div",
                     {
                       id: activeCellId,
                       role: "gridcell",
                       "aria-colindex": selection.focus.col + 1,
                       "aria-selected": "true",
-                      "aria-label": `${cellName(selection.focus)}${hiddenActiveValue == null ? "" : `, ${displayValue2(hiddenActiveValue)}`}`
+                      "aria-label": `${cellName(selection.focus)}${hiddenActiveValue == null ? "" : `, ${formatSpreadsheetGeneralDisplay(hiddenActiveValue)}`}`
                     }
                   ) }) : null
                 ]
@@ -2288,8 +2895,140 @@ import {
   spreadsheetSheetId
 } from "@opengeni/sdk/editable-artifacts";
 import { PlusIcon as PlusIcon2 } from "lucide-react";
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect5,
+  useId as useId2,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo3,
+  useRef as useRef5,
+  useState as useState6
+} from "react";
+
+// src/components/artifacts/spreadsheet-download.tsx
+import { DownloadIcon, LoaderCircleIcon } from "lucide-react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState5, useSyncExternalStore } from "react";
+
+// src/components/artifacts/spreadsheet-submissions.tsx
+import { createContext, useContext, useState as useState4 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function createSubmissionQueue() {
+  let pending = 0;
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => {
+    for (const listener of listeners) listener();
+  };
+  return {
+    getPending: () => pending,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    async run(invoke) {
+      pending++;
+      emit();
+      try {
+        return await invoke();
+      } finally {
+        pending--;
+        emit();
+      }
+    }
+  };
+}
+var standaloneQueue = {
+  getPending: () => 0,
+  subscribe: (_listener) => () => {
+  },
+  run: (invoke) => invoke()
+};
+var SubmissionContext = createContext(null);
+function SpreadsheetSubmissionProvider({ children }) {
+  const [queue] = useState4(createSubmissionQueue);
+  return /* @__PURE__ */ jsx3(SubmissionContext.Provider, { value: queue, children });
+}
+function useSpreadsheetSubmissions() {
+  return useContext(SubmissionContext) ?? standaloneQueue;
+}
+
+// src/components/artifacts/spreadsheet-download.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function SpreadsheetDownloadButton({
+  session,
+  title,
+  download
+}) {
+  const view = useEditableArtifactView(session);
+  const submissions = useSpreadsheetSubmissions();
+  const submitting = useSyncExternalStore(
+    submissions.subscribe,
+    submissions.getPending,
+    submissions.getPending
+  );
+  const active = useRef4(null);
+  const [busy, setBusy] = useState5(false);
+  const [error, setError] = useState5(false);
+  const ready = view.state === "live" && submitting === 0 && view.pendingTransactions === 0 && view.blockedPending.length === 0 && !view.authoringBlockedReason;
+  useEffect4(() => () => active.current?.abort(), [session]);
+  useEffect4(() => {
+    if (view.state === "failed" || view.state === "closed") {
+      active.current?.abort();
+      active.current = null;
+      setBusy(false);
+    }
+  }, [view.state]);
+  const start = async () => {
+    if (active.current || !ready || submissions.getPending()) return;
+    const current = session.getView();
+    if (current.state !== "live" || current.pendingTransactions || current.blockedPending.length || current.authoringBlockedReason)
+      return;
+    const controller = new AbortController();
+    active.current = controller;
+    setBusy(true);
+    setError(false);
+    try {
+      const blob = await download(controller.signal);
+      if (controller.signal.aborted) return;
+      const url = URL.createObjectURL(blob);
+      try {
+        const anchor = document.createElement("a");
+        anchor.href = url;
+        anchor.download = `${title.replace(/[\\/:*?"<>|\u0000-\u001f]/g, "_").replace(/\.xlsx$/i, "").trim() || "Workbook"}.xlsx`;
+        anchor.rel = "noopener";
+        anchor.click();
+      } finally {
+        setTimeout(() => URL.revokeObjectURL(url), 0);
+      }
+    } catch {
+      if (!controller.signal.aborted) setError(true);
+    } finally {
+      if (!controller.signal.aborted) {
+        active.current = null;
+        setBusy(false);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    error ? /* @__PURE__ */ jsx4("span", { role: "alert", className: "text-og-xs text-og-fg-muted", children: "Download failed. Try again." }) : null,
+    /* @__PURE__ */ jsxs2(
+      ArtifactButton,
+      {
+        onClick: () => void start(),
+        disabled: busy || !ready,
+        title: ready ? "Download workbook as XLSX" : "Wait for workbook changes to sync",
+        children: [
+          busy ? /* @__PURE__ */ jsx4(LoaderCircleIcon, { className: "animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx4(DownloadIcon, { "aria-hidden": true }),
+          busy ? "Preparing\u2026" : "Download"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/artifacts/editable-spreadsheet.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var EXCEL_MAX_ROWS = 1048576;
 var EXCEL_MAX_COLUMNS = 16384;
 var INITIAL_VIEWPORT_ROWS = 64;
@@ -2298,7 +3037,19 @@ var MAX_INTERACTIVE_QUERY_CELLS = 65536;
 var MAX_INTERACTIVE_QUERY_BYTES = 8 * 1024 * 1024;
 var EMPTY_FORMAT = Object.freeze({});
 var EMPTY_SHEETS = [];
-function EditableSpreadsheetGrid({
+var useClientLayoutEffect2 = typeof window === "undefined" ? useEffect5 : useLayoutEffect2;
+var SESSION_KEYS = /* @__PURE__ */ new WeakMap();
+var nextSessionKey = 0;
+function EditableSpreadsheetGrid(props) {
+  return /* @__PURE__ */ jsx5(
+    EditableSpreadsheetGridSession,
+    {
+      ...props
+    },
+    `${spreadsheetSessionKey(props.session)}:${props.sheet.sheetId}:${props.sheet.generationId ?? "pending"}`
+  );
+}
+function EditableSpreadsheetGridSession({
   session,
   sheet,
   metadataRevision,
@@ -2309,39 +3060,51 @@ function EditableSpreadsheetGrid({
   overscanColumns = 2,
   onSelectionChange,
   onCommit,
+  onResize,
   onCommandError,
   onViewportChange,
   className
 }) {
+  const authoringLifetime = useSpreadsheetAuthoringLifetime();
+  const submissions = useSpreadsheetSubmissions();
+  const view = useEditableArtifactView(session);
   const rowCount = boundedSheetCount(requestedRowCount, EXCEL_MAX_ROWS, sheet.usedBounds?.endRow);
   const columnCount = boundedSheetCount(
     requestedColumnCount,
     EXCEL_MAX_COLUMNS,
     sheet.usedBounds?.endColumn
   );
-  const [state, setState] = useState2(() => ({
+  const [state, setState] = useState6(() => ({
+    session,
+    generationId: sheet.generationId,
     query: initialViewportQuery(sheet.sheetId, rowCount, columnCount),
     projection: null,
     error: null
   }));
-  const activeCellRef = useRef2({ row: 0, column: 0 });
-  useEffect2(() => {
-    setState({
-      query: initialViewportQuery(sheet.sheetId, rowCount, columnCount),
-      projection: null,
-      error: null
-    });
+  const activeCellRef = useRef5({ row: 0, column: 0 });
+  useEffect5(() => {
+    setState(
+      (current) => current.session === session && current.generationId === sheet.generationId && current.query.sheetId === sheet.sheetId ? current : {
+        session,
+        generationId: sheet.generationId,
+        query: initialViewportQuery(sheet.sheetId, rowCount, columnCount),
+        projection: null,
+        error: null
+      }
+    );
     activeCellRef.current = { row: 0, column: 0 };
-  }, [columnCount, rowCount, session, sheet.sheetId]);
-  useEffect2(() => {
+  }, [columnCount, rowCount, session, sheet.generationId, sheet.sheetId]);
+  useEffect5(() => {
     const query = state.query;
-    return session.subscribeSpreadsheetViewport(
+    const matchesScope = (current) => current.session === session && current.generationId === sheet.generationId && sameViewportQuery(current.query, query);
+    let active = true;
+    const unsubscribe = session.subscribeSpreadsheetViewport(
       query,
       (projection2) => {
-        if (!sameViewport(projection2, query)) return;
+        if (!active || !sameViewport(projection2, query)) return;
         if (sheet.generationId !== null && projection2.generationId !== sheet.generationId) {
           setState(
-            (current) => sameViewportQuery(current.query, query) ? {
+            (current) => matchesScope(current) ? {
               ...current,
               projection: null,
               error: new Error("Spreadsheet generation changed; refreshing metadata")
@@ -2350,97 +3113,146 @@ function EditableSpreadsheetGrid({
           return;
         }
         setState(
-          (current) => sameViewportQuery(current.query, query) ? { query, projection: projection2, error: null } : current
+          (current) => matchesScope(current) ? { ...current, projection: projection2, error: null } : current
         );
       },
       {
         onError(error) {
-          setState(
-            (current) => sameViewportQuery(current.query, query) ? { ...current, error } : current
-          );
+          if (!active) return;
+          setState((current) => matchesScope(current) ? { ...current, error } : current);
         }
       }
     );
+    return () => {
+      active = false;
+      unsubscribe();
+    };
   }, [session, sheet.generationId, state.query]);
-  const projection = useMemo2(
+  const projection = useMemo3(
     () => projectSdkViewport(
       sheet,
       metadataRevision,
       state.query,
-      state.projection,
+      state.session === session && state.generationId === sheet.generationId ? state.projection : null,
       rowCount,
       columnCount
     ),
-    [columnCount, metadataRevision, rowCount, sheet, state.projection, state.query]
+    [columnCount, metadataRevision, rowCount, session, sheet, state]
   );
-  const generation = useMemo2(() => sheetGeneration(sheet), [sheet]);
-  const editable = !readOnly && generation !== null;
-  const handleCommit = useCallback2(
+  const generation = useMemo3(() => sheetGeneration(sheet), [sheet]);
+  const editable = !readOnly && view.writable && !view.authoringBlockedReason && generation !== null;
+  const syncStatus = view.authoringBlockedReason ? "Waiting for earlier edits\u2026" : view.state === "live" ? editable ? "Saved" : "Read only" : editableArtifactStatusLabel(view);
+  const syncError = view.blockedPending.length > 0 ? "Some earlier changes could not sync." : view.lastError?.message;
+  const resizable = editable && sheet.defaultRowHeight !== void 0 && sheet.defaultColumnWidth !== void 0;
+  const handleCommit = useCallback4(
     async (commit) => {
+      const lifetime = requireSpreadsheetAuthoringLifetime(authoringLifetime);
       if (!generation) throw new Error("This sheet generation is not writable yet");
       const input = spreadsheetCellInput(commit.input, commit.kind);
-      await session.applySpreadsheetCommands({
-        version: SPREADSHEET_ARTIFACT_COMMAND_VERSION,
-        commands: [
-          {
-            kind: "cells.set",
-            sheet: generation,
-            anchor: { row: commit.cell.row, column: commit.cell.col },
-            rows: 1,
-            columns: 1,
-            cells: [input]
-          }
-        ]
-      });
-      onCommit?.(commit);
+      await submissions.run(
+        () => session.applySpreadsheetCommands({
+          version: SPREADSHEET_ARTIFACT_COMMAND_VERSION,
+          commands: [
+            {
+              kind: "cells.set",
+              sheet: generation,
+              anchor: { row: commit.cell.row, column: commit.cell.col },
+              rows: 1,
+              columns: 1,
+              cells: [input]
+            }
+          ]
+        })
+      );
+      if (authoringLifetime.current === lifetime) onCommit?.(commit);
     },
-    [generation, onCommit, session]
+    [authoringLifetime, generation, onCommit, session, submissions]
   );
-  const handleClear = useCallback2(
+  const handleClear = useCallback4(
     async (selection) => {
+      requireSpreadsheetAuthoringLifetime(authoringLifetime);
       if (!generation) throw new Error("This sheet generation is not writable yet");
       const top = Math.min(selection.anchor.row, selection.focus.row);
       const bottom = Math.max(selection.anchor.row, selection.focus.row);
       const left = Math.min(selection.anchor.col, selection.focus.col);
       const right = Math.max(selection.anchor.col, selection.focus.col);
-      await session.applySpreadsheetCommands({
-        version: SPREADSHEET_ARTIFACT_COMMAND_VERSION,
-        commands: [
-          {
-            kind: "range.clear",
-            sheet: generation,
-            range: {
-              start: { row: top, column: left },
-              end: { row: bottom, column: right }
+      await submissions.run(
+        () => session.applySpreadsheetCommands({
+          version: SPREADSHEET_ARTIFACT_COMMAND_VERSION,
+          commands: [
+            {
+              kind: "range.clear",
+              sheet: generation,
+              range: {
+                start: { row: top, column: left },
+                end: { row: bottom, column: right }
+              }
             }
-          }
-        ]
-      });
+          ]
+        })
+      );
     },
-    [generation, session]
+    [authoringLifetime, generation, session, submissions]
   );
-  const handleCommitRange = useCallback2(
+  const handleCommitRange = useCallback4(
     async (commit) => {
+      requireSpreadsheetAuthoringLifetime(authoringLifetime);
       if (!generation) throw new Error("This sheet generation is not writable yet");
-      await session.applySpreadsheetCommands({
-        version: SPREADSHEET_ARTIFACT_COMMAND_VERSION,
-        commands: [
-          {
-            kind: "cells.set",
-            sheet: generation,
-            anchor: { row: commit.anchor.row, column: commit.anchor.col },
-            rows: commit.rows,
-            columns: commit.columns,
-            cells: commit.inputs.map(
-              (input) => spreadsheetCellInput(input, input.startsWith("=") ? "formula" : "value")
-            )
-          }
-        ]
-      });
+      await submissions.run(
+        () => session.applySpreadsheetCommands({
+          version: SPREADSHEET_ARTIFACT_COMMAND_VERSION,
+          commands: [
+            {
+              kind: "cells.set",
+              sheet: generation,
+              anchor: { row: commit.anchor.row, column: commit.anchor.col },
+              rows: commit.rows,
+              columns: commit.columns,
+              cells: commit.inputs.map(
+                (input) => spreadsheetCellInput(input, input.startsWith("=") ? "formula" : "value")
+              )
+            }
+          ]
+        })
+      );
     },
-    [generation, session]
+    [authoringLifetime, generation, session, submissions]
   );
-  const handleSelection = useCallback2(
+  const handleResize = useCallback4(
+    async (change) => {
+      const lifetime = requireSpreadsheetAuthoringLifetime(authoringLifetime);
+      if (!generation) throw new Error("This sheet generation is not writable yet");
+      await submissions.run(
+        () => session.applySpreadsheetCommands({
+          version: SPREADSHEET_ARTIFACT_COMMAND_VERSION,
+          commands: [
+            change.axis === "column" ? {
+              kind: "column.width.set",
+              sheet: generation,
+              column: change.index,
+              width: change.size === sheet.defaultColumnWidth ? null : change.size
+            } : {
+              kind: "row.height.set",
+              sheet: generation,
+              row: change.index,
+              height: change.size === sheet.defaultRowHeight ? null : change.size
+            }
+          ]
+        })
+      );
+      if (authoringLifetime.current === lifetime) onResize?.(change);
+    },
+    [
+      authoringLifetime,
+      generation,
+      onResize,
+      session,
+      sheet.defaultColumnWidth,
+      sheet.defaultRowHeight,
+      submissions
+    ]
+  );
+  const handleSelection = useCallback4(
     (selection) => {
       activeCellRef.current = {
         row: selection.focus.row,
@@ -2449,6 +3261,7 @@ function EditableSpreadsheetGrid({
       setState((current) => {
         if (queryContains(current.query, selection.focus.row, selection.focus.col)) return current;
         return {
+          ...current,
           query: boundedViewportQuery(
             sheet.sheetId,
             selection.focus.row,
@@ -2467,7 +3280,7 @@ function EditableSpreadsheetGrid({
     },
     [columnCount, onSelectionChange, rowCount, sheet.sheetId]
   );
-  const handleViewport = useCallback2(
+  const handleViewport = useCallback4(
     (viewport) => {
       const next = boundedViewportQuery(
         sheet.sheetId,
@@ -2480,14 +3293,23 @@ function EditableSpreadsheetGrid({
         activeCellRef.current
       );
       setState(
-        (current) => sameViewportQuery(current.query, next) ? current : { query: next, projection: current.projection, error: null }
+        (current) => sameViewportQuery(current.query, next) ? current : { ...current, query: next, error: null }
       );
       onViewportChange?.(viewport);
     },
     [columnCount, onViewportChange, rowCount, sheet.sheetId]
   );
-  return /* @__PURE__ */ jsxs2("div", { className: cn("relative h-full min-h-0", className), children: [
-    /* @__PURE__ */ jsx2(
+  if (editableArtifactAccessRevoked(view)) {
+    return /* @__PURE__ */ jsx5(
+      EditableArtifactMessage,
+      {
+        title: "Spreadsheet unavailable",
+        detail: "You no longer have access to this artifact"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: cn("relative h-full min-h-0", className), children: [
+    /* @__PURE__ */ jsx5(
       SpreadsheetProjectionGrid,
       {
         projection,
@@ -2498,11 +3320,15 @@ function EditableSpreadsheetGrid({
         commit: editable ? handleCommit : void 0,
         commitRange: editable ? handleCommitRange : void 0,
         clear: editable ? handleClear : void 0,
+        resize: resizable ? handleResize : void 0,
+        pendingTransactions: view.pendingTransactions,
+        syncStatus,
+        syncError,
         onCommandError,
         onViewportChange: handleViewport
       }
     ),
-    state.error ? /* @__PURE__ */ jsx2(
+    state.error && state.session === session && state.generationId === sheet.generationId ? /* @__PURE__ */ jsx5(
       "output",
       {
         role: "status",
@@ -2513,65 +3339,73 @@ function EditableSpreadsheetGrid({
     ) : null
   ] });
 }
-function EditableSpreadsheetArtifactSurface({
+function EditableSpreadsheetArtifactSurface(props) {
+  return /* @__PURE__ */ jsx5(SpreadsheetSubmissionProvider, { children: /* @__PURE__ */ jsx5(EditableSpreadsheetArtifactSurfaceSession, { ...props }) }, spreadsheetSessionKey(props.session));
+}
+function EditableSpreadsheetArtifactSurfaceSession({
   session,
   title = "Workbook",
+  showHeader,
   subtitle,
   actions,
+  download,
   initialSheetId,
   allowAddSheet = true,
   readOnly = false,
   ...gridProps
 }) {
+  const authoringLifetime = useSpreadsheetAuthoringLifetime();
+  const submissions = useSpreadsheetSubmissions();
   const { metadata, error: metadataError } = useSpreadsheetMetadata(session);
   const view = useEditableArtifactView(session);
-  const [activeSheetId, setActiveSheetId] = useState2(initialSheetId ?? null);
-  const [creatingSheet, setCreatingSheet] = useState2(false);
-  const [surfaceError, setSurfaceError] = useState2(null);
+  const [activeSheetId, setActiveSheetId] = useState6(initialSheetId ?? null);
+  const [creatingSheet, setCreatingSheet] = useState6(false);
+  const [surfaceError, setSurfaceError] = useState6(null);
   const sheets = metadata?.sheets ?? EMPTY_SHEETS;
   const activeSheet = sheets.find((sheet) => sheet.sheetId === activeSheetId) ?? (initialSheetId ? sheets.find((sheet) => sheet.sheetId === initialSheetId) : void 0) ?? sheets[0] ?? null;
-  const writable = !readOnly && view.writable;
+  const writable = !readOnly && view.writable && !view.authoringBlockedReason;
   const accessRevoked = editableArtifactAccessRevoked(view);
-  const addSheet = useCallback2(async () => {
+  const addSheet = useCallback4(async () => {
     if (!writable || creatingSheet) return;
+    const lifetime = requireSpreadsheetAuthoringLifetime(authoringLifetime);
     setCreatingSheet(true);
     setSurfaceError(null);
     try {
       const after = activeSheet ? sheetGeneration(activeSheet) : null;
-      const created = await session.createSpreadsheetSheet({
-        name: nextAvailableSheetName2(sheets),
-        after
-      });
-      setActiveSheetId(created.sheetId);
+      const created = await submissions.run(
+        () => session.createSpreadsheetSheet({
+          name: nextAvailableSheetName2(sheets),
+          after
+        })
+      );
+      if (authoringLifetime.current === lifetime) setActiveSheetId(created.sheetId);
     } catch (cause) {
-      setSurfaceError(asError(cause));
+      if (authoringLifetime.current === lifetime) setSurfaceError(asError(cause));
     } finally {
-      setCreatingSheet(false);
+      if (authoringLifetime.current === lifetime) setCreatingSheet(false);
     }
-  }, [activeSheet, creatingSheet, session, sheets, writable]);
-  const footer = /* @__PURE__ */ jsxs2(
+  }, [activeSheet, authoringLifetime, creatingSheet, session, sheets, submissions, writable]);
+  const footer = /* @__PURE__ */ jsxs3(
     "div",
     {
       className: "flex min-h-9 items-center gap-1 overflow-x-auto px-2",
       role: "tablist",
       "aria-label": "Worksheets",
       children: [
-        sheets.map((sheet) => /* @__PURE__ */ jsx2(
-          "button",
+        sheets.map((sheet) => /* @__PURE__ */ jsx5(
+          EditableWorksheetTab,
           {
-            type: "button",
-            role: "tab",
-            "aria-selected": sheet.sheetId === activeSheet?.sheetId,
-            onClick: () => setActiveSheetId(sheet.sheetId),
-            className: cn(
-              "h-7 shrink-0 rounded-og-sm px-2.5 text-og-sm outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-og-accent",
-              sheet.sheetId === activeSheet?.sheetId ? "bg-og-surface-3 font-medium text-og-fg" : "text-og-fg-muted hover:bg-og-surface-3 hover:text-og-fg"
-            ),
-            children: sheet.name
+            session,
+            sheet,
+            sheets,
+            selected: sheet.sheetId === activeSheet?.sheetId,
+            writable,
+            onSelect: () => setActiveSheetId(sheet.sheetId),
+            onCommandError: gridProps.onCommandError
           },
           `${sheet.sheetId}:${sheet.generationId ?? "pending"}`
         )),
-        writable && allowAddSheet ? /* @__PURE__ */ jsx2(
+        writable && allowAddSheet ? /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
@@ -2579,29 +3413,33 @@ function EditableSpreadsheetArtifactSurface({
             disabled: creatingSheet,
             "aria-label": creatingSheet ? "Adding worksheet" : "Add worksheet",
             className: "grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted outline-hidden hover:bg-og-surface-3 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50 [&>svg]:size-3.5",
-            children: /* @__PURE__ */ jsx2(PlusIcon2, {})
+            children: /* @__PURE__ */ jsx5(PlusIcon2, {})
           }
         ) : null
       ]
     }
   );
   const error = surfaceError ?? metadataError;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx5(
     ArtifactSurface,
     {
       modality: "spreadsheet",
       title,
+      showHeader,
       subtitle: subtitle ?? (accessRevoked ? editableArtifactStatusLabel(view) : metadata ? `${sheets.length} sheet${sheets.length === 1 ? "" : "s"}` : editableArtifactStatusLabel(view)),
-      actions,
+      actions: download ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        actions,
+        /* @__PURE__ */ jsx5(SpreadsheetDownloadButton, { session, title, download })
+      ] }) : actions,
       footer: accessRevoked ? void 0 : footer,
       busy: !accessRevoked && !metadata && !error,
-      children: accessRevoked ? /* @__PURE__ */ jsx2(
+      children: accessRevoked ? /* @__PURE__ */ jsx5(
         EditableArtifactMessage,
         {
           title: "Access changed",
           detail: editableArtifactStatusLabel(view)
         }
-      ) : activeSheet && metadata ? /* @__PURE__ */ jsx2(
+      ) : activeSheet && metadata ? /* @__PURE__ */ jsx5(
         EditableSpreadsheetGrid,
         {
           ...gridProps,
@@ -2611,19 +3449,19 @@ function EditableSpreadsheetArtifactSurface({
           readOnly: !writable
         },
         `${activeSheet.sheetId}:${activeSheet.generationId ?? "pending"}`
-      ) : error ? /* @__PURE__ */ jsx2(EditableArtifactMessage, { title: "Could not open this workbook", detail: error.message }) : metadata ? /* @__PURE__ */ jsx2("div", { className: "grid h-full place-items-center bg-og-bg p-6 text-center", children: /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx2("p", { className: "text-og-base font-medium text-og-fg", children: "This workbook has no worksheets." }),
-        writable && allowAddSheet ? /* @__PURE__ */ jsx2(
+      ) : error ? /* @__PURE__ */ jsx5(EditableArtifactMessage, { title: "Could not open this workbook", detail: error.message }) : metadata ? /* @__PURE__ */ jsx5("div", { className: "grid h-full place-items-center bg-og-bg p-6 text-center", children: /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx5("p", { className: "text-og-base font-medium text-og-fg", children: "This workbook has no worksheets." }),
+        writable && allowAddSheet ? /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
             onClick: () => void addSheet(),
             disabled: creatingSheet,
-            className: "mt-3 rounded-og-sm bg-og-accent-deep px-3 py-1.5 text-og-sm font-medium text-og-accent-fg outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50",
+            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 outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50",
             children: creatingSheet ? "Adding\u2026" : "Add worksheet"
           }
         ) : null
-      ] }) }) : /* @__PURE__ */ jsx2(
+      ] }) }) : /* @__PURE__ */ jsx5(
         EditableArtifactMessage,
         {
           title: "Opening workbook",
@@ -2633,18 +3471,272 @@ function EditableSpreadsheetArtifactSurface({
     }
   );
 }
-function useSpreadsheetMetadata(session) {
-  const [state, setState] = useState2({ metadata: null, error: null });
-  useEffect2(
-    () => session.subscribeSpreadsheetMetadata({}, (metadata) => setState({ metadata, error: null }), {
-      onError: (error) => setState((current) => ({ ...current, error }))
-    }),
-    [session]
+function EditableWorksheetTab({
+  session,
+  sheet,
+  sheets,
+  selected,
+  writable,
+  onSelect,
+  onCommandError
+}) {
+  const submissions = useSpreadsheetSubmissions();
+  const [editing, setEditing] = useState6(false);
+  const [name, setName] = useState6(sheet.name);
+  const [saving, setSaving] = useState6(false);
+  const [accepted, setAccepted] = useState6(false);
+  const [error, setError] = useState6(null);
+  const inputRef = useRef5(null);
+  const tabRef = useRef5(null);
+  const busyRef = useRef5(false);
+  const mountedRef = useRef5(true);
+  const latestRef = useRef5({ session, sheet, writable });
+  latestRef.current = { session, sheet, writable };
+  const errorId = useId2();
+  const canRename = writable && sheet.generationId !== null;
+  const scopeRef = useRef5({
+    session,
+    sheetId: sheet.sheetId,
+    generationId: sheet.generationId,
+    canRename
+  });
+  if (scopeRef.current.session !== session || scopeRef.current.sheetId !== sheet.sheetId || scopeRef.current.generationId !== sheet.generationId || scopeRef.current.canRename !== canRename) {
+    scopeRef.current = {
+      session,
+      sheetId: sheet.sheetId,
+      generationId: sheet.generationId,
+      canRename
+    };
+  }
+  useEffect5(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect5(() => {
+    setEditing(false);
+    setSaving(false);
+    setAccepted(false);
+    setError(null);
+    busyRef.current = false;
+  }, [session, sheet.generationId, sheet.sheetId, canRename]);
+  useEffect5(() => {
+    if (!editing) return;
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, [editing]);
+  useEffect5(() => {
+    if (!accepted || !editing || sheet.name !== name) return;
+    const restoreFocus = document.activeElement === document.body || document.activeElement === inputRef.current;
+    setEditing(false);
+    setSaving(false);
+    setAccepted(false);
+    busyRef.current = false;
+    if (restoreFocus) queueMicrotask(() => tabRef.current?.focus({ preventScroll: true }));
+  }, [accepted, editing, name, sheet.name]);
+  const start = () => {
+    if (!canRename || busyRef.current) return;
+    onSelect();
+    setName(sheet.name);
+    setError(null);
+    setAccepted(false);
+    setEditing(true);
+  };
+  const cancel = () => {
+    if (busyRef.current) return;
+    setEditing(false);
+    setError(null);
+    queueMicrotask(() => tabRef.current?.focus({ preventScroll: true }));
+  };
+  const rename = async () => {
+    if (!canRename || busyRef.current) return;
+    const generation = sheetGeneration(sheet);
+    if (!generation) return;
+    const next = name.trim();
+    if (!next || next.length > 31 || /[\\/?*[\]:\0]/u.test(next)) {
+      setError("Use 1\u201331 characters without \\ / ? * [ ] :.");
+      return;
+    }
+    if (sheets.some((other) => other.sheetId !== sheet.sheetId && other.name === next)) {
+      setError("A worksheet already has this name.");
+      return;
+    }
+    if (next === sheet.name) {
+      cancel();
+      return;
+    }
+    setName(next);
+    setError(null);
+    setSaving(true);
+    busyRef.current = true;
+    const scope = scopeRef.current;
+    const current = () => mountedRef.current && scopeRef.current === scope && latestRef.current.writable;
+    try {
+      await submissions.run(
+        () => session.applySpreadsheetCommands({
+          version: SPREADSHEET_ARTIFACT_COMMAND_VERSION,
+          commands: [{ kind: "sheet.rename", sheet: generation, name: next }]
+        })
+      );
+      if (current()) setAccepted(true);
+    } catch (cause) {
+      if (!current()) return;
+      const failure = asError(cause);
+      busyRef.current = false;
+      setSaving(false);
+      setError(failure.message || "Could not rename worksheet. Try again.");
+      onCommandError?.(failure);
+      queueMicrotask(() => inputRef.current?.focus());
+    }
+  };
+  const tab = /* @__PURE__ */ jsx5(
+    "button",
+    {
+      ref: tabRef,
+      type: "button",
+      role: "tab",
+      tabIndex: editing && canRename ? -1 : void 0,
+      "aria-selected": selected,
+      "aria-keyshortcuts": canRename ? "F2" : void 0,
+      title: canRename ? "Double-click or press F2 to rename" : void 0,
+      onClick: onSelect,
+      onDoubleClick: start,
+      onKeyDown: (event) => {
+        if (event.key === "F2") {
+          event.preventDefault();
+          start();
+        }
+      },
+      className: cn(
+        "h-7 shrink-0 rounded-og-sm px-2.5 text-og-sm outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-og-accent",
+        selected ? "bg-og-surface-3 font-medium text-og-fg" : "text-og-fg-muted hover:bg-og-surface-3 hover:text-og-fg"
+      ),
+      children: sheet.name
+    }
   );
-  return state;
+  return editing && canRename ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("span", { className: "sr-only", children: tab }),
+    /* @__PURE__ */ jsxs3(
+      "form",
+      {
+        className: "flex min-w-0 flex-wrap items-center gap-1 py-1",
+        style: { width: "min(18rem, 100%)" },
+        onSubmit: (event) => {
+          event.preventDefault();
+          void rename();
+        },
+        children: [
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              ref: inputRef,
+              "aria-label": "Worksheet name",
+              "aria-invalid": error ? "true" : void 0,
+              "aria-describedby": error ? errorId : void 0,
+              disabled: saving,
+              value: name,
+              onInput: (event) => {
+                setName(event.currentTarget.value);
+                setError(null);
+              },
+              onKeyDown: (event) => {
+                if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+                if (event.key === "Escape") {
+                  event.preventDefault();
+                  cancel();
+                }
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  void rename();
+                }
+              },
+              className: "h-7 w-40 rounded-og-sm border border-og-border bg-og-surface-1 px-2 text-og-sm text-og-fg outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50"
+            }
+          ),
+          saving ? /* @__PURE__ */ jsx5("span", { role: "status", className: "text-og-xs text-og-fg-muted", children: "Renaming\u2026" }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "submit",
+                className: "rounded-og-sm px-2 py-1 text-og-xs text-og-fg outline-hidden hover:bg-og-surface-3 focus-visible:ring-2 focus-visible:ring-og-accent",
+                children: "Save"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: cancel,
+                className: "rounded-og-sm px-2 py-1 text-og-xs text-og-fg-muted outline-hidden hover:bg-og-surface-3 focus-visible:ring-2 focus-visible:ring-og-accent",
+                children: "Cancel"
+              }
+            )
+          ] }),
+          error ? /* @__PURE__ */ jsx5(
+            "span",
+            {
+              id: errorId,
+              role: "alert",
+              className: "text-og-xs text-og-status-failed",
+              style: { flexBasis: "100%", overflowWrap: "anywhere" },
+              children: error
+            }
+          ) : null
+        ]
+      }
+    )
+  ] }) : tab;
+}
+function spreadsheetSessionKey(session) {
+  let key = SESSION_KEYS.get(session);
+  if (key === void 0) {
+    key = ++nextSessionKey;
+    SESSION_KEYS.set(session, key);
+  }
+  return key;
+}
+function useSpreadsheetAuthoringLifetime() {
+  const lifetime = useRef5({});
+  useClientLayoutEffect2(() => {
+    lifetime.current = {};
+    return () => {
+      lifetime.current = null;
+    };
+  }, []);
+  return lifetime;
+}
+function requireSpreadsheetAuthoringLifetime(lifetime) {
+  if (!lifetime.current) throw new Error("Spreadsheet authoring session changed");
+  return lifetime.current;
+}
+function useSpreadsheetMetadata(session) {
+  const [state, setState] = useState6({ session, metadata: null, error: null });
+  useEffect5(() => {
+    let active = true;
+    const unsubscribe = session.subscribeSpreadsheetMetadata(
+      {},
+      (metadata) => {
+        if (active) setState({ session, metadata, error: null });
+      },
+      {
+        onError: (error) => {
+          if (active)
+            setState(
+              (current) => current.session === session ? { ...current, error } : { session, metadata: null, error }
+            );
+        }
+      }
+    );
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  }, [session]);
+  return state.session === session ? state : { metadata: null, error: null };
 }
 function projectSdkViewport(sheet, metadataRevision, query, viewport, rowCount, columnCount) {
-  const current = viewport && sameViewport(viewport, query) ? viewport : null;
+  const current = viewport && viewport.sheetId === sheet.sheetId && viewport.generationId === sheet.generationId ? viewport : null;
   const projectedCells = (current?.cells ?? []).map((cell) => ({
     row: cell.row,
     col: cell.column,
@@ -2661,8 +3753,12 @@ function projectSdkViewport(sheet, metadataRevision, query, viewport, rowCount,
     sheetId: sheet.sheetId,
     sheetName: sheet.name,
     generationId: current?.generationId ?? sheet.generationId,
-    revision: `${metadataRevision}:${current?.revision ?? "loading"}`,
+    revision: current?.revision.toString() ?? "loading",
     dimensionRevision: metadataRevision.toString(),
+    defaultRowHeight: sheet.defaultRowHeight,
+    defaultColumnWidth: sheet.defaultColumnWidth,
+    rowHeights: sheet.rowHeights,
+    columnWidths: sheet.columnWidths,
     rowCount,
     columnCount,
     usedRange: used ? {
@@ -2688,7 +3784,7 @@ function projectSdkViewport(sheet, metadataRevision, query, viewport, rowCount,
       const cell = byCoordinate.get(`${row}:${column}`);
       return cell ? {
         value: cell.value,
-        input: cell.formula ?? displayValue3(cell.value),
+        input: cell.formula ?? displayValue(cell.value),
         format: cell.format
       } : null;
     }
@@ -2799,7 +3895,7 @@ function boundedSheetCount(requested, maximum, usedEnd) {
   const usedCount = usedEnd === void 0 || !Number.isSafeInteger(usedEnd) ? 1 : Math.max(1, Math.min(maximum, usedEnd + 1));
   return Math.max(requestedCount, usedCount);
 }
-function displayValue3(value) {
+function displayValue(value) {
   if (value === null || value === void 0) return "";
   if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toISOString();
   if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
@@ -2825,4 +3921,4 @@ export {
   EditableSpreadsheetGrid,
   EditableSpreadsheetArtifactSurface
 };
-//# sourceMappingURL=chunk-ICA6R6TW.js.map
+//# sourceMappingURL=chunk-WNN7NO2N.js.map