@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-X3MWB2QU.js

@@ -0,0 +1,3851 @@
+"use client";
+import {
+  ArtifactSubmissionProvider,
+  ArtifactSurface,
+  EditableArtifactDownloadButton,
+  EditableArtifactMessage,
+  editableArtifactAccessRevoked,
+  editableArtifactStatusLabel,
+  useArtifactSubmissions,
+  useEditableArtifactView
+} from "./chunk-7VMZGLYI.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+import {
+  useOpenGeniText
+} from "./chunk-7T2ZE3VT.js";
+
+// src/components/artifacts/spreadsheet-grid.tsx
+import { PlusIcon } from "lucide-react";
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect3,
+  useId,
+  useLayoutEffect,
+  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 t = useOpenGeniText();
+  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 || t("artifacts.spreadsheetCommandQueue.spreadsheetChangeFailed");
+        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, t]
+  );
+  const first = failures[0];
+  return {
+    run,
+    clearPreflightFailure,
+    pendingCount,
+    error: first ? {
+      message: failures.length > 1 ? t("artifacts.spreadsheetCommandQueue.messageLengthChangesNotSaved", {
+        message: first.message,
+        length: failures.length
+      }) : 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;
+var MAX_CACHE_TILES = 96;
+var MAX_DEVICE_PIXEL_RATIO = 4;
+var MAX_AXIS_MARKS_PER_PAINT = 8192;
+var MAX_CANVAS_EDGE = 8192;
+var MAX_CANVAS_PIXELS = 16e6;
+var MAX_TILES_PER_PAINT = 512;
+var SparseSpreadsheetCellIndex = class {
+  size;
+  rows;
+  constructor(entries) {
+    const sorted = [...entries].sort((left, right) => left.row - right.row || left.col - right.col);
+    this.size = sorted.length;
+    this.rows = [];
+    for (const entry of sorted) {
+      const previous = this.rows.at(-1);
+      if (previous?.row === entry.row) previous.cells.push(entry);
+      else this.rows.push({ row: entry.row, cells: [entry] });
+    }
+  }
+  forEachInRange(rowStart, rowEnd, columnStart, columnEnd, visit) {
+    let rowIndex = lowerBound(this.rows, rowStart, (row) => row.row);
+    while (rowIndex < this.rows.length) {
+      const row = this.rows[rowIndex];
+      if (row.row >= rowEnd) break;
+      let cellIndex = lowerBound(row.cells, columnStart, (cell) => cell.col);
+      while (cellIndex < row.cells.length) {
+        const cell = row.cells[cellIndex];
+        if (cell.col >= columnEnd) break;
+        visit(cell);
+        cellIndex += 1;
+      }
+      rowIndex += 1;
+    }
+  }
+};
+function lowerBound(values, target, valueAt) {
+  let low = 0;
+  let high = values.length;
+  while (low < high) {
+    const middle = low + high >>> 1;
+    if (valueAt(values[middle]) < target) low = middle + 1;
+    else high = middle;
+  }
+  return low;
+}
+function coverageContains(coverage, query) {
+  return coverage === void 0 || coverage.rowStart <= query.rowStart && coverage.rowEnd >= query.rowEnd && coverage.columnStart <= query.columnStart && coverage.columnEnd >= query.columnEnd;
+}
+function intersectCoverage(query, coverage) {
+  if (coverage === void 0) return query;
+  const intersection = {
+    rowStart: Math.max(query.rowStart, coverage.rowStart),
+    rowEnd: Math.min(query.rowEnd, coverage.rowEnd),
+    columnStart: Math.max(query.columnStart, coverage.columnStart),
+    columnEnd: Math.min(query.columnEnd, coverage.columnEnd)
+  };
+  return intersection.rowStart < intersection.rowEnd && intersection.columnStart < intersection.columnEnd ? intersection : null;
+}
+function spreadsheetCanvasDevicePixelRatio(value) {
+  if (!Number.isFinite(value) || value <= 0) return 1;
+  return Math.max(1, Math.min(MAX_DEVICE_PIXEL_RATIO, value));
+}
+function spreadsheetCanvasBackingScale(width, height, devicePixelRatio) {
+  const safeWidth = finiteExtent(width);
+  const safeHeight = finiteExtent(height);
+  const requested = spreadsheetCanvasDevicePixelRatio(devicePixelRatio);
+  return Math.max(
+    Number.EPSILON,
+    Math.min(
+      requested,
+      MAX_CANVAS_EDGE / safeWidth,
+      MAX_CANVAS_EDGE / safeHeight,
+      Math.sqrt(MAX_CANVAS_PIXELS / (safeWidth * safeHeight))
+    )
+  );
+}
+var SpreadsheetCanvasRenderer = class {
+  tiles = /* @__PURE__ */ new Map();
+  generation = "";
+  clock = 0;
+  dispose() {
+    this.tiles.clear();
+    this.generation = "";
+  }
+  paint(input) {
+    const context = safeCanvasContext(input.canvas);
+    if (!context) return null;
+    const width = finiteExtent(input.viewportWidth);
+    const height = finiteExtent(input.viewportHeight);
+    const dpr = spreadsheetCanvasBackingScale(width, height, input.devicePixelRatio);
+    const pixelWidth = Math.max(1, Math.min(MAX_CANVAS_EDGE, Math.round(width * dpr)));
+    const pixelHeight = Math.max(1, Math.min(MAX_CANVAS_EDGE, Math.round(height * dpr)));
+    if (input.canvas.width !== pixelWidth) input.canvas.width = pixelWidth;
+    if (input.canvas.height !== pixelHeight) input.canvas.height = pixelHeight;
+    input.canvas.style.width = `${width}px`;
+    input.canvas.style.height = `${height}px`;
+    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+    context.clearRect(0, 0, width, height);
+    const generation = [
+      input.projection.sheetId,
+      input.projection.generationId ?? "<none>",
+      input.projection.revision,
+      input.dimensionRevision,
+      dpr,
+      input.theme.signature
+    ].join("/");
+    if (generation !== this.generation) {
+      this.tiles.clear();
+      this.generation = generation;
+    }
+    setFill(context, input.theme.background, "#ffffff");
+    context.fillRect(0, 0, width, height);
+    const bodyLeft = input.rowHeaderWidth;
+    const bodyTop = input.columnHeaderHeight;
+    const visibleLeft = clamp(input.logicalScrollLeft, 0, input.columns.total);
+    const visibleTop = clamp(input.logicalScrollTop, 0, input.rows.total);
+    const visibleRight = clamp(
+      input.logicalScrollLeft + width - bodyLeft,
+      visibleLeft,
+      input.columns.total
+    );
+    const visibleBottom = clamp(
+      input.logicalScrollTop + height - bodyTop,
+      visibleTop,
+      input.rows.total
+    );
+    let paintedTiles = 0;
+    let reusedTiles = 0;
+    let uncachedTiles = 0;
+    context.save();
+    context.beginPath();
+    context.rect(bodyLeft, bodyTop, Math.max(0, width - bodyLeft), Math.max(0, height - bodyTop));
+    context.clip();
+    const firstTileColumn = Math.floor(visibleLeft / TILE_SIZE);
+    const lastTileColumn = Math.floor(
+      Math.max(visibleLeft, visibleRight - Number.EPSILON) / TILE_SIZE
+    );
+    const firstTileRow = Math.floor(visibleTop / TILE_SIZE);
+    const lastTileRow = Math.floor(
+      Math.max(visibleTop, visibleBottom - Number.EPSILON) / TILE_SIZE
+    );
+    let visitedTiles = 0;
+    tileLoop: for (let tileRow = firstTileRow; tileRow <= lastTileRow; tileRow += 1) {
+      for (let tileColumn = firstTileColumn; tileColumn <= lastTileColumn; tileColumn += 1) {
+        if (visitedTiles >= MAX_TILES_PER_PAINT) break tileLoop;
+        visitedTiles += 1;
+        const key = `${tileColumn}:${tileRow}`;
+        let tile = this.tiles.get(key);
+        if (!tile) {
+          const painted = this.paintTile(input, tileColumn, tileRow, dpr);
+          tile = {
+            canvas: painted.canvas,
+            lastUsed: ++this.clock
+          };
+          if (painted.cacheable) this.tiles.set(key, tile);
+          else uncachedTiles += 1;
+          paintedTiles += 1;
+        } else {
+          tile.lastUsed = ++this.clock;
+          reusedTiles += 1;
+        }
+        const logicalX = tileColumn * TILE_SIZE;
+        const logicalY = tileRow * TILE_SIZE;
+        context.drawImage(
+          tile.canvas,
+          bodyLeft + logicalX - input.logicalScrollLeft,
+          bodyTop + logicalY - input.logicalScrollTop,
+          TILE_SIZE,
+          TILE_SIZE
+        );
+      }
+    }
+    paintSelection(context, input);
+    paintVisibleGrid(context, input, visibleLeft, visibleTop, visibleRight, visibleBottom);
+    context.restore();
+    paintHeaders(
+      context,
+      input,
+      width,
+      height,
+      visibleLeft,
+      visibleTop,
+      visibleRight,
+      visibleBottom
+    );
+    this.evictTiles(dpr);
+    return {
+      cacheSize: this.tiles.size,
+      paintedTiles,
+      reusedTiles,
+      uncachedTiles,
+      devicePixelRatio: dpr
+    };
+  }
+  paintTile(input, tileColumn, tileRow, dpr) {
+    const tile = input.canvas.ownerDocument.createElement("canvas");
+    tile.width = Math.max(1, Math.round(TILE_SIZE * dpr));
+    tile.height = Math.max(1, Math.round(TILE_SIZE * dpr));
+    const context = safeCanvasContext(tile);
+    if (!context) return { canvas: tile, cacheable: false };
+    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+    setFill(context, input.theme.background, "#ffffff");
+    context.fillRect(0, 0, TILE_SIZE, TILE_SIZE);
+    const tileLeft = tileColumn * TILE_SIZE;
+    const tileTop = tileRow * TILE_SIZE;
+    const tileRight = Math.min(input.columns.total, tileLeft + TILE_SIZE);
+    const tileBottom = Math.min(input.rows.total, tileTop + TILE_SIZE);
+    const firstColumn = input.columns.indexAtOffset(tileLeft);
+    const lastColumn = input.columns.indexAtOffset(Math.max(tileLeft, tileRight - Number.EPSILON));
+    const firstRow = input.rows.indexAtOffset(tileTop);
+    const lastRow = input.rows.indexAtOffset(Math.max(tileTop, tileBottom - Number.EPSILON));
+    const query = {
+      rowStart: firstRow,
+      rowEnd: Math.min(input.rows.count, lastRow + 1),
+      columnStart: firstColumn,
+      columnEnd: Math.min(input.columns.count, lastColumn + 1)
+    };
+    const coveredQuery = intersectCoverage(query, input.projection.coverage);
+    const cacheable = coverageContains(input.projection.coverage, query);
+    const cells = [];
+    if (coveredQuery) {
+      input.projection.cells.forEachInRange(
+        coveredQuery.rowStart,
+        coveredQuery.rowEnd,
+        coveredQuery.columnStart,
+        coveredQuery.columnEnd,
+        (cell) => cells.push(cell)
+      );
+    }
+    for (const cell of cells) {
+      const fill = cell.format.fill;
+      if (!fill) continue;
+      const x = input.columns.offsetAt(cell.col) - tileLeft;
+      const y = input.rows.offsetAt(cell.row) - tileTop;
+      const width = input.columns.sizeAt(cell.col);
+      const height = input.rows.sizeAt(cell.row);
+      setFill(context, fill, input.theme.background);
+      context.fillRect(x, y, width, height);
+    }
+    paintTileGrid(context, input, tileLeft, tileTop, tileRight, tileBottom);
+    for (const cell of cells) {
+      const value = input.projection.valueAt(cell);
+      const text = formatSpreadsheetGeneralDisplay(value);
+      if (!text) continue;
+      paintCellText(context, input, cell, text, tileLeft, tileTop);
+    }
+    return { canvas: tile, cacheable };
+  }
+  evictTiles(dpr) {
+    const pixelsPerTile = Math.max(1, Math.round(TILE_SIZE * dpr)) ** 2;
+    const maximum = Math.max(
+      4,
+      Math.min(MAX_CACHE_TILES, Math.floor(MAX_CACHE_PHYSICAL_PIXELS / pixelsPerTile))
+    );
+    if (this.tiles.size <= maximum) return;
+    const oldest = [...this.tiles.entries()].sort(
+      (left, right) => left[1].lastUsed - right[1].lastUsed
+    );
+    for (let index = 0; index < oldest.length - maximum; index += 1) {
+      this.tiles.delete(oldest[index][0]);
+    }
+  }
+};
+function finiteExtent(value) {
+  if (!Number.isFinite(value) || value <= 0) return 1;
+  return Math.max(1, Math.floor(value));
+}
+function safeCanvasContext(canvas) {
+  try {
+    return canvas.getContext("2d", { alpha: false });
+  } catch {
+    return null;
+  }
+}
+function setFill(context, value, fallback) {
+  context.fillStyle = fallback;
+  try {
+    context.fillStyle = value;
+  } catch {
+  }
+}
+function setStroke(context, value, fallback) {
+  context.strokeStyle = fallback;
+  try {
+    context.strokeStyle = value;
+  } catch {
+  }
+}
+function paintTileGrid(context, input, tileLeft, tileTop, tileRight, tileBottom) {
+  setFill(context, input.theme.border, "#d1d5db");
+  visitAxisBoundaries(input.columns, tileLeft, tileRight, (offset) => {
+    context.fillRect(offset - tileLeft - 1, 0, 1, TILE_SIZE);
+  });
+  visitAxisBoundaries(input.rows, tileTop, tileBottom, (offset) => {
+    context.fillRect(0, offset - tileTop - 1, TILE_SIZE, 1);
+  });
+}
+function paintVisibleGrid(context, input, visibleLeft, visibleTop, visibleRight, visibleBottom) {
+  setFill(context, input.theme.border, "#d1d5db");
+  visitAxisBoundaries(input.columns, visibleLeft, visibleRight, (offset) => {
+    const x = input.rowHeaderWidth + offset - input.logicalScrollLeft;
+    context.fillRect(x - 1, input.columnHeaderHeight, 1, input.viewportHeight);
+  });
+  visitAxisBoundaries(input.rows, visibleTop, visibleBottom, (offset) => {
+    const y = input.columnHeaderHeight + offset - input.logicalScrollTop;
+    context.fillRect(input.rowHeaderWidth, y - 1, input.viewportWidth, 1);
+  });
+}
+function visitAxisBoundaries(axis, start, end, visit) {
+  if (axis.count <= 0 || end < start) return;
+  let index = axis.indexAtOffset(start);
+  let visits = 0;
+  while (index < axis.count && visits < MAX_AXIS_MARKS_PER_PAINT) {
+    const boundary = axis.offsetAt(index + 1);
+    if (boundary > end + 1) break;
+    if (boundary >= start) visit(boundary);
+    index += 1;
+    visits += 1;
+  }
+}
+function paintSelection(context, input) {
+  const { selection } = input;
+  const left = input.rowHeaderWidth + input.columns.offsetAt(selection.left) - input.logicalScrollLeft;
+  const right = input.rowHeaderWidth + input.columns.offsetAt(selection.right + 1) - input.logicalScrollLeft;
+  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, "#545454");
+  context.globalAlpha = 0.1;
+  context.fillRect(left, top, right - left, bottom - top);
+  context.restore();
+  const activeLeft = input.rowHeaderWidth + input.columns.offsetAt(selection.focusColumn) - input.logicalScrollLeft;
+  const activeTop = input.columnHeaderHeight + input.rows.offsetAt(selection.focusRow) - input.logicalScrollTop;
+  const activeWidth = input.columns.sizeAt(selection.focusColumn);
+  const activeHeight = input.rows.sizeAt(selection.focusRow);
+  context.save();
+  setStroke(context, input.theme.accent, "#545454");
+  context.lineWidth = 2;
+  context.strokeRect(
+    activeLeft + 1,
+    activeTop + 1,
+    Math.max(0, activeWidth - 2),
+    Math.max(0, activeHeight - 2)
+  );
+  context.restore();
+}
+function paintHeaders(context, input, width, height, visibleLeft, visibleTop, visibleRight, visibleBottom) {
+  setFill(context, input.theme.headerBackground, "#f3f4f6");
+  context.fillRect(0, 0, width, input.columnHeaderHeight);
+  context.fillRect(0, input.columnHeaderHeight, input.rowHeaderWidth, height);
+  setFill(context, input.theme.border, "#d1d5db");
+  context.fillRect(0, input.columnHeaderHeight - 1, width, 1);
+  context.fillRect(input.rowHeaderWidth - 1, 0, 1, height);
+  context.save();
+  context.beginPath();
+  context.rect(
+    input.rowHeaderWidth,
+    0,
+    Math.max(0, width - input.rowHeaderWidth),
+    input.columnHeaderHeight
+  );
+  context.clip();
+  setFill(context, input.theme.mutedForeground, "#6b7280");
+  context.font = `600 ${input.theme.headerFontSize}px ${input.theme.fontFamily}`;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  visitAxisItems(input.columns, visibleLeft, visibleRight, (column, offset, size) => {
+    const x = input.rowHeaderWidth + offset - input.logicalScrollLeft;
+    setFill(context, input.theme.border, "#d1d5db");
+    context.fillRect(x + size - 1, 0, 1, input.columnHeaderHeight);
+    if (size >= 8) {
+      setFill(context, input.theme.mutedForeground, "#6b7280");
+      context.fillText(columnName(column), x + size / 2, input.columnHeaderHeight / 2);
+    }
+  });
+  context.restore();
+  context.save();
+  context.beginPath();
+  context.rect(
+    0,
+    input.columnHeaderHeight,
+    input.rowHeaderWidth,
+    Math.max(0, height - input.columnHeaderHeight)
+  );
+  context.clip();
+  setFill(context, input.theme.mutedForeground, "#6b7280");
+  context.font = `400 ${input.theme.headerFontSize}px ${input.theme.fontFamily}`;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  visitAxisItems(input.rows, visibleTop, visibleBottom, (row, offset, size) => {
+    const y = input.columnHeaderHeight + offset - input.logicalScrollTop;
+    setFill(context, input.theme.border, "#d1d5db");
+    context.fillRect(0, y + size - 1, input.rowHeaderWidth, 1);
+    if (size >= 8) {
+      setFill(context, input.theme.mutedForeground, "#6b7280");
+      context.fillText(String(row + 1), input.rowHeaderWidth / 2, y + size / 2);
+    }
+  });
+  context.restore();
+}
+function visitAxisItems(axis, start, end, visit) {
+  if (axis.count <= 0 || end < start) return;
+  let index = axis.indexAtOffset(start);
+  let visits = 0;
+  while (index < axis.count && visits < MAX_AXIS_MARKS_PER_PAINT) {
+    const offset = axis.offsetAt(index);
+    if (offset > end) break;
+    visit(index, offset, axis.sizeAt(index));
+    index += 1;
+    visits += 1;
+  }
+}
+function paintCellText(context, input, cell, text, tileLeft, tileTop) {
+  const format = cell.format;
+  const x = input.columns.offsetAt(cell.col) - tileLeft;
+  const y = input.rows.offsetAt(cell.row) - tileTop;
+  const width = input.columns.sizeAt(cell.col);
+  const height = input.rows.sizeAt(cell.row);
+  if (width <= 2 || height <= 2) return;
+  const fontSize = finitePositive(format.font?.size, input.theme.fontSize);
+  const fontFamily = format.font?.name || input.theme.fontFamily;
+  const weight = format.font?.bold ? 600 : 400;
+  const italic = format.font?.italic ? "italic " : "";
+  context.save();
+  context.beginPath();
+  context.rect(x + 1, y + 1, Math.max(0, width - 2), Math.max(0, height - 2));
+  context.clip();
+  context.font = `${italic}${weight} ${fontSize}px ${fontFamily}`;
+  setFill(
+    context,
+    format.font?.color ?? (text.startsWith("#") ? input.theme.error : input.theme.foreground),
+    input.theme.foreground
+  );
+  const alignment = format.horizontalAlignment;
+  context.textAlign = alignment === "center" ? "center" : alignment === "right" ? "right" : "left";
+  context.textBaseline = "alphabetic";
+  const padding = 6;
+  const textX = alignment === "center" ? x + width / 2 : alignment === "right" ? x + width - padding : x + padding;
+  const lineHeight = fontSize * 1.5;
+  const availableWidth = Math.max(0, width - padding * 2);
+  const lines = format.wrapText ? wrapText(context, text, availableWidth, Math.max(1, Math.floor(height / lineHeight))) : [ellipsize(context, text.replaceAll(/\r?\n/g, " "), availableWidth)];
+  const blockHeight = lines.length * lineHeight;
+  const vertical = format.verticalAlignment;
+  const firstBaseline = vertical === "top" ? y + Math.min(height, padding + fontSize) : vertical === "bottom" ? y + height - padding - blockHeight + fontSize : y + (height - blockHeight) / 2 + fontSize;
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    const baseline = firstBaseline + index * lineHeight;
+    context.fillText(line, textX, baseline);
+    if (format.font?.underline && line) {
+      const metrics = context.measureText(line);
+      const textWidth = metrics.width;
+      const startX = alignment === "center" ? textX - textWidth / 2 : alignment === "right" ? textX - textWidth : textX;
+      setFill(context, format.font.color ?? input.theme.foreground, input.theme.foreground);
+      context.fillRect(startX, baseline + 1, textWidth, Math.max(1, fontSize / 14));
+    }
+  }
+  context.restore();
+}
+function wrapText(context, input, maximumWidth, maximumLines) {
+  if (maximumWidth <= 0) return [""];
+  const output = [];
+  for (const paragraph of input.split(/\r?\n/)) {
+    const words = paragraph.split(/\s+/).filter(Boolean);
+    if (words.length === 0) output.push("");
+    let line = "";
+    for (const word of words) {
+      const next = line ? `${line} ${word}` : word;
+      if (!line || context.measureText(next).width <= maximumWidth) line = next;
+      else {
+        output.push(ellipsize(context, line, maximumWidth));
+        line = word;
+      }
+      if (output.length >= maximumLines) break;
+    }
+    if (output.length < maximumLines && line) output.push(ellipsize(context, line, maximumWidth));
+    if (output.length >= maximumLines) break;
+  }
+  return output.slice(0, maximumLines);
+}
+function ellipsize(context, input, maximumWidth) {
+  if (!input || maximumWidth <= 0) return "";
+  if (context.measureText(input).width <= maximumWidth) return input;
+  const suffix = "\u2026";
+  const suffixWidth = context.measureText(suffix).width;
+  if (suffixWidth > maximumWidth) return "";
+  let low = 0;
+  let high = input.length;
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    if (context.measureText(`${input.slice(0, middle)}${suffix}`).width <= maximumWidth)
+      low = middle;
+    else high = middle - 1;
+  }
+  return `${input.slice(0, low)}${suffix}`;
+}
+function finitePositive(value, fallback) {
+  return value !== void 0 && Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function columnName(index) {
+  let value = index + 1;
+  let result = "";
+  while (value > 0) {
+    const remainder = (value - 1) % 26;
+    result = String.fromCharCode(65 + remainder) + result;
+    value = Math.floor((value - 1) / 26);
+  }
+  return result;
+}
+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 t = useOpenGeniText();
+  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 || t("artifacts.spreadsheetResize.spreadsheetResizeFailed"),
+            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);
+      }
+    },
+    [t]
+  );
+  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
+}) {
+  const t = useOpenGeniText();
+  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": t("artifacts.spreadsheetResize.sizePixels", { size }),
+      "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 as jsx2, jsxs } from "react/jsx-runtime";
+var MAX_ROWS = 1048576;
+var MAX_COLUMNS = 16384;
+var ROW_HEADER_WIDTH = 48;
+var COLUMN_HEADER_HEIGHT = 28;
+var FALLBACK_VIEWPORT_WIDTH = 880;
+var FALLBACK_VIEWPORT_HEIGHT = 480;
+var MAX_PHYSICAL_SCROLL_SPAN = 8e6;
+var MIN_PHYSICAL_ITEM_SPAN = 4;
+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 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;
+  return Math.min(max, Math.max(1, Math.floor(value)));
+}
+function buildAxis(count, defaultSize, entries) {
+  const normalizedDefault = Number.isFinite(defaultSize) && defaultSize > 0 ? defaultSize : 1;
+  const sorted = [...entries].filter(
+    ([index, size]) => Number.isInteger(index) && index >= 0 && index < count && Number.isFinite(size) && size > 0
+  ).sort(([left], [right]) => left - right);
+  const overrides = [];
+  let cumulativeDelta = 0;
+  for (const [index, size] of sorted) {
+    const previous = overrides.at(-1);
+    if (previous?.index === index) {
+      cumulativeDelta -= previous.size - normalizedDefault;
+      overrides.pop();
+    }
+    if (size === normalizedDefault) continue;
+    const start = index * normalizedDefault + cumulativeDelta;
+    cumulativeDelta += size - normalizedDefault;
+    overrides.push({
+      index,
+      size,
+      start,
+      end: start + size,
+      cumulativeDelta
+    });
+  }
+  return {
+    count,
+    defaultSize: normalizedDefault,
+    overrides,
+    total: count * normalizedDefault + cumulativeDelta
+  };
+}
+function lowerBoundOverrideIndex(axis, index) {
+  let low = 0;
+  let high = axis.overrides.length;
+  while (low < high) {
+    const middle = low + high >>> 1;
+    if (axis.overrides[middle].index < index) low = middle + 1;
+    else high = middle;
+  }
+  return low;
+}
+function axisOffsetAt(axis, index) {
+  if (index <= 0) return 0;
+  if (index >= axis.count) return axis.total;
+  const insertion = lowerBoundOverrideIndex(axis, index);
+  const delta = insertion > 0 ? axis.overrides[insertion - 1].cumulativeDelta : 0;
+  return index * axis.defaultSize + delta;
+}
+function axisSizeAt(axis, index) {
+  const candidate = axis.overrides[lowerBoundOverrideIndex(axis, index)];
+  return candidate?.index === index ? candidate.size : axis.defaultSize;
+}
+function upperBoundOverrideStart(axis, offset) {
+  let low = 0;
+  let high = axis.overrides.length;
+  while (low < high) {
+    const middle = low + high >>> 1;
+    if (axis.overrides[middle].start <= offset) low = middle + 1;
+    else high = middle;
+  }
+  return low;
+}
+function indexAtOffset(axis, offset) {
+  if (axis.count <= 1) return 0;
+  const target = Math.max(0, Math.min(axis.total - 1, offset));
+  const previousIndex = upperBoundOverrideStart(axis, target) - 1;
+  if (previousIndex < 0) {
+    return Math.min(
+      (axis.overrides[0]?.index ?? axis.count) - 1,
+      Math.floor(target / axis.defaultSize)
+    );
+  }
+  const previous = axis.overrides[previousIndex];
+  if (target < previous.end) return previous.index;
+  const nextOverrideIndex = axis.overrides[previousIndex + 1]?.index ?? axis.count;
+  return Math.min(
+    axis.count - 1,
+    nextOverrideIndex - 1,
+    previous.index + 1 + Math.floor((target - previous.end) / axis.defaultSize)
+  );
+}
+function visibleInterval(axis, startOffset, viewportSize, overscan) {
+  const start = Math.max(0, indexAtOffset(axis, startOffset) - overscan);
+  const end = Math.min(
+    axis.count,
+    indexAtOffset(axis, startOffset + Math.max(1, viewportSize)) + overscan + 1
+  );
+  return { start, end };
+}
+function boundVisibleWindows(rows, columns, focus) {
+  let rowCount = Math.min(MAX_MOUNTED_AXIS_ITEMS, rows.end - rows.start);
+  let columnCount = Math.min(MAX_MOUNTED_AXIS_ITEMS, columns.end - columns.start);
+  if (rowCount * columnCount > MAX_MOUNTED_GRID_CELLS) {
+    const balancedLimit = Math.floor(Math.sqrt(MAX_MOUNTED_GRID_CELLS));
+    if (rowCount > balancedLimit && columnCount > balancedLimit) {
+      rowCount = balancedLimit;
+      columnCount = balancedLimit;
+    } else if (rowCount >= columnCount) {
+      rowCount = Math.max(1, Math.floor(MAX_MOUNTED_GRID_CELLS / columnCount));
+    } else {
+      columnCount = Math.max(1, Math.floor(MAX_MOUNTED_GRID_CELLS / rowCount));
+    }
+  }
+  return {
+    rows: centeredInterval(rows, rowCount, focus.row),
+    columns: centeredInterval(columns, columnCount, focus.col)
+  };
+}
+function centeredInterval(interval, count, focus) {
+  if (count >= interval.end - interval.start) return interval;
+  if (focus < interval.start || focus >= interval.end) {
+    return { start: interval.start, end: interval.start + count };
+  }
+  const start = Math.max(
+    interval.start,
+    Math.min(interval.end - count, focus - Math.floor(count / 2))
+  );
+  return { start, end: start + count };
+}
+function indexesBetween(start, end) {
+  return Array.from({ length: end - start }, (_, index) => start + index);
+}
+function rawBoundaryAt(projection, index) {
+  if (index <= 0) return 0;
+  if (index >= projection.axis.count) {
+    return projection.axis.count * projection.baseItemSpan + projection.proportionalSpan;
+  }
+  return index * projection.baseItemSpan + axisOffsetAt(projection.axis, index) / projection.axis.total * projection.proportionalSpan;
+}
+function rawOffsetAtLogical(projection, offset) {
+  if (offset <= 0) return 0;
+  if (offset >= projection.axis.total) {
+    return rawBoundaryAt(projection, projection.axis.count);
+  }
+  const index = indexAtOffset(projection.axis, offset);
+  const logicalStart = axisOffsetAt(projection.axis, index);
+  const logicalSize = axisSizeAt(projection.axis, index);
+  const fraction = Math.max(0, Math.min(1, (offset - logicalStart) / logicalSize));
+  const rawStart = rawBoundaryAt(projection, index);
+  const rawEnd = rawBoundaryAt(projection, index + 1);
+  return rawStart + fraction * (rawEnd - rawStart);
+}
+function logicalOffsetAtRaw(projection, rawOffset) {
+  const target = Math.max(0, Math.min(projection.rawMax, rawOffset));
+  let low = 0;
+  let high = projection.axis.count;
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    if (rawBoundaryAt(projection, middle) <= target) low = middle;
+    else high = middle - 1;
+  }
+  const index = Math.min(projection.axis.count - 1, low);
+  const rawStart = rawBoundaryAt(projection, index);
+  const rawEnd = rawBoundaryAt(projection, index + 1);
+  const fraction = rawEnd === rawStart ? 0 : (target - rawStart) / (rawEnd - rawStart);
+  return Math.min(
+    projection.logicalMax,
+    axisOffsetAt(projection.axis, index) + fraction * axisSizeAt(projection.axis, index)
+  );
+}
+function buildScrollProjection(axis, headerSize, viewportSize) {
+  const logicalTotal = headerSize + axis.total;
+  const physicalTotal = Math.min(logicalTotal, MAX_PHYSICAL_SCROLL_SPAN);
+  const logicalMax = Math.max(0, logicalTotal - viewportSize);
+  const physicalMax = Math.max(0, physicalTotal - viewportSize);
+  const mode = physicalTotal === logicalTotal ? "identity" : "indexed";
+  const physicalAxisCapacity = Math.max(0, physicalTotal - headerSize);
+  const baseItemSpan = mode === "indexed" ? Math.min(MIN_PHYSICAL_ITEM_SPAN, physicalAxisCapacity / axis.count) : 0;
+  const projection = {
+    axis,
+    mode,
+    physicalTotal,
+    logicalMax,
+    physicalMax,
+    baseItemSpan,
+    proportionalSpan: Math.max(0, physicalAxisCapacity - baseItemSpan * axis.count),
+    rawMax: 0
+  };
+  projection.rawMax = rawOffsetAtLogical(projection, logicalMax);
+  return projection;
+}
+function clampPhysicalScroll(offset, projection) {
+  return Math.max(0, Math.min(projection.physicalMax, offset));
+}
+function physicalToLogicalScroll(offset, projection) {
+  if (projection.logicalMax === 0 || projection.physicalMax === 0) return 0;
+  if (projection.mode === "indexed") {
+    return logicalOffsetAtRaw(
+      projection,
+      clampPhysicalScroll(offset, projection) / projection.physicalMax * projection.rawMax
+    );
+  }
+  return clampPhysicalScroll(offset, projection) / projection.physicalMax * projection.logicalMax;
+}
+function logicalToPhysicalScroll(offset, projection) {
+  if (projection.logicalMax === 0 || projection.physicalMax === 0) return 0;
+  const logical = Math.max(0, Math.min(projection.logicalMax, offset));
+  if (projection.mode === "indexed") {
+    return rawOffsetAtLogical(projection, logical) / projection.rawMax * projection.physicalMax;
+  }
+  return logical / projection.logicalMax * projection.physicalMax;
+}
+function columnName2(index) {
+  let value = index + 1;
+  let result = "";
+  while (value > 0) {
+    const remainder = (value - 1) % 26;
+    result = String.fromCharCode(65 + remainder) + result;
+    value = Math.floor((value - 1) / 26);
+  }
+  return result;
+}
+function cellName(cell) {
+  return `${columnName2(cell.col)}${cell.row + 1}`;
+}
+function normalizeSelection(selection) {
+  return {
+    top: Math.min(selection.anchor.row, selection.focus.row),
+    bottom: Math.max(selection.anchor.row, selection.focus.row),
+    left: Math.min(selection.anchor.col, selection.focus.col),
+    right: Math.max(selection.anchor.col, selection.focus.col)
+  };
+}
+function selectionName(selection) {
+  const normalized = normalizeSelection(selection);
+  const first = cellName({ row: normalized.top, col: normalized.left });
+  const last = cellName({ row: normalized.bottom, col: normalized.right });
+  return first === last ? first : `${first}:${last}`;
+}
+function isCellSelected(selection, row, col) {
+  const normalized = normalizeSelection(selection);
+  return row >= normalized.top && row <= normalized.bottom && col >= normalized.left && col <= normalized.right;
+}
+function parseCellInput(input) {
+  if (input === "") return null;
+  const normalized = input.trim();
+  if (/^(?:true|false)$/i.test(normalized)) return normalized.toLowerCase() === "true";
+  if (/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(normalized)) {
+    const number = Number(normalized);
+    if (Number.isFinite(number)) return number;
+  }
+  return input;
+}
+function parseSpreadsheetClipboard(t, input) {
+  if (new TextEncoder().encode(input).byteLength > MAX_CLIPBOARD_INPUT_BYTES) {
+    throw new Error(t("artifacts.spreadsheetGrid.clipboardDataIsTooLarge"));
+  }
+  const records = [[]];
+  let field = "";
+  let quoted = false;
+  let endedWithRecordSeparator = false;
+  for (let index = 0; index < input.length; index += 1) {
+    const character = input[index];
+    if (quoted) {
+      if (character === '"') {
+        if (input[index + 1] === '"') {
+          field += '"';
+          index += 1;
+        } else {
+          quoted = false;
+        }
+      } else {
+        field += character;
+      }
+      endedWithRecordSeparator = false;
+      continue;
+    }
+    if (character === '"' && field.length === 0) {
+      quoted = true;
+      endedWithRecordSeparator = false;
+    } else if (character === "	") {
+      records.at(-1).push(field);
+      field = "";
+      endedWithRecordSeparator = false;
+    } else if (character === "\r" || character === "\n") {
+      records.at(-1).push(field);
+      field = "";
+      records.push([]);
+      if (character === "\r" && input[index + 1] === "\n") index += 1;
+      endedWithRecordSeparator = true;
+    } else {
+      field += character;
+      endedWithRecordSeparator = false;
+    }
+  }
+  if (quoted) throw new Error(t("artifacts.spreadsheetGrid.clipboardDataContainsAnUnterminated"));
+  if (endedWithRecordSeparator) records.pop();
+  else records.at(-1).push(field);
+  if (records.length === 0) records.push([""]);
+  const columns = Math.max(1, ...records.map((record) => record.length));
+  const cellCount = records.length * columns;
+  if (cellCount > MAX_CLIPBOARD_CELLS) {
+    throw new Error(t("artifacts.spreadsheetGrid.clipboardRangeIsTooLarge"));
+  }
+  const inputs = records.flatMap((record) => [
+    ...record,
+    ...Array.from({ length: columns - record.length }, () => "")
+  ]);
+  return Object.freeze({ rows: records.length, columns, inputs: Object.freeze(inputs) });
+}
+function escapeSpreadsheetClipboardField(input) {
+  return /["\t\r\n]/u.test(input) ? `"${input.replaceAll('"', '""')}"` : input;
+}
+function cellStyle(format) {
+  return {
+    background: format.fill,
+    color: format.font?.color,
+    fontFamily: format.font?.name,
+    fontSize: format.font?.size,
+    fontWeight: format.font?.bold ? 600 : void 0,
+    fontStyle: format.font?.italic ? "italic" : void 0,
+    textDecoration: format.font?.underline ? "underline" : void 0,
+    textAlign: format.horizontalAlignment,
+    justifyContent: format.horizontalAlignment === "center" ? "center" : format.horizontalAlignment === "right" ? "flex-end" : "flex-start",
+    alignItems: format.verticalAlignment === "top" ? "flex-start" : format.verticalAlignment === "bottom" ? "flex-end" : "center",
+    whiteSpace: format.wrapText ? "normal" : "nowrap"
+  };
+}
+function canvasAxis(axis) {
+  return {
+    count: axis.count,
+    total: axis.total,
+    offsetAt: (index) => axisOffsetAt(axis, index),
+    sizeAt: (index) => axisSizeAt(axis, index),
+    indexAtOffset: (offset) => indexAtOffset(axis, offset)
+  };
+}
+function computedToken(style, name, fallback) {
+  return style.getPropertyValue(name).trim() || fallback;
+}
+function computedPixels(style, name, fallback) {
+  const value = Number.parseFloat(style.getPropertyValue(name));
+  return Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function spreadsheetCanvasTheme(element) {
+  const style = getComputedStyle(element);
+  const background = style.backgroundColor || computedToken(style, "--og-color-surface-1", "#ffffff");
+  const headerBackground = computedToken(style, "--og-color-surface-2", "#f3f4f6");
+  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", "#545454");
+  const error = computedToken(style, "--og-color-status-failed", "#dc2626");
+  const fontFamily = style.fontFamily || computedToken(
+    style,
+    "--og-font-sans",
+    'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  );
+  const fontSize = Number.parseFloat(style.fontSize) || computedPixels(style, "--og-font-size-sm", 12);
+  const headerFontSize = computedPixels(style, "--og-font-size-xs", 11);
+  return {
+    background,
+    headerBackground,
+    border,
+    foreground,
+    mutedForeground,
+    accent,
+    error,
+    fontFamily,
+    fontSize,
+    headerFontSize,
+    signature: [
+      background,
+      headerBackground,
+      border,
+      foreground,
+      mutedForeground,
+      accent,
+      error,
+      fontFamily,
+      fontSize,
+      headerFontSize
+    ].join("")
+  };
+}
+function useWorkbookViewState(workbook) {
+  const [view, setView] = useState3(() => ({
+    revision: workbook.revision,
+    dimensionRevision: 0
+  }));
+  useEffect3(() => {
+    setView(
+      (current) => current.revision === workbook.revision ? current : { revision: workbook.revision, dimensionRevision: current.dimensionRevision + 1 }
+    );
+    return workbook.onChange((change) => {
+      setView((current) => ({
+        revision: change.revision,
+        dimensionRevision: change.reason === "dimension" || change.reason === "structure" ? current.dimensionRevision + 1 : current.dimensionRevision
+      }));
+    });
+  }, [workbook]);
+  return view;
+}
+function nextAvailableSheetName(t, workbook) {
+  let index = workbook.worksheets.items.length + 1;
+  while (workbook.worksheets.items.some((sheet) => sheet.name === `Sheet${index}`)) index += 1;
+  return t("artifacts.spreadsheetGrid.sheetIndex", { index });
+}
+function SpreadsheetArtifactSurface({
+  workbook,
+  title: titleProp,
+  subtitle,
+  actions,
+  initialSheetId,
+  allowAddSheet = true,
+  readOnly = false,
+  ...gridProps
+}) {
+  const t = useOpenGeniText();
+  const title = titleProp === void 0 ? t("artifacts.spreadsheetGrid.workbook") : titleProp;
+  const { revision } = useWorkbookViewState(workbook);
+  const availableSheets = workbook.worksheets.items;
+  const initial = (initialSheetId ? availableSheets.find((sheet) => sheet.id === initialSheetId) : void 0) ?? (() => {
+    try {
+      return workbook.worksheets.getActiveWorksheet();
+    } catch {
+      return availableSheets[0];
+    }
+  })();
+  const [activeSheetId, setActiveSheetId] = useState3(initial?.id ?? null);
+  const activeSheet = availableSheets.find((sheet) => sheet.id === activeSheetId) ?? availableSheets[0] ?? null;
+  useEffect3(() => {
+    if (!activeSheet && activeSheetId !== null) setActiveSheetId(null);
+    else if (activeSheet && activeSheet.id !== activeSheetId) setActiveSheetId(activeSheet.id);
+  }, [activeSheet, activeSheetId, revision]);
+  const selectSheet = useCallback3(
+    (sheet) => {
+      workbook.worksheets.setActiveWorksheet(sheet);
+      setActiveSheetId(sheet.id);
+    },
+    [workbook]
+  );
+  const addSheet = useCallback3(() => {
+    const sheet = workbook.worksheets.add(nextAvailableSheetName(t, workbook));
+    selectSheet(sheet);
+  }, [selectSheet, workbook, t]);
+  const footer = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-9 items-center gap-1 overflow-x-auto px-2",
+      role: "tablist",
+      "aria-label": t("artifacts.spreadsheetGrid.worksheets"),
+      children: [
+        availableSheets.map((sheet) => /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": sheet.id === activeSheet?.id,
+            onClick: () => selectSheet(sheet),
+            className: cn(
+              "h-7 shrink-0 rounded-og-sm px-2.5 text-og-sm transition-colors",
+              sheet.id === activeSheet?.id ? "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
+          },
+          sheet.id
+        )),
+        !readOnly && allowAddSheet ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: addSheet,
+            "aria-label": t("artifacts.spreadsheetGrid.addWorksheet"),
+            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__ */ jsx2(PlusIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx2(
+    ArtifactSurface,
+    {
+      modality: "spreadsheet",
+      title,
+      subtitle: subtitle ?? (activeSheet ? t("counts.sheets", { count: availableSheets.length }) : t("artifacts.spreadsheetGrid.emptyWorkbook")),
+      actions,
+      footer,
+      children: activeSheet ? /* @__PURE__ */ jsx2(
+        SpreadsheetGrid,
+        {
+          ...gridProps,
+          workbook,
+          worksheet: activeSheet,
+          readOnly
+        },
+        activeSheet.id
+      ) : /* @__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__ */ jsx2("p", { className: "text-og-base font-medium text-og-fg", children: t("artifacts.spreadsheetGrid.thisWorkbookHasNoWorksheets") }),
+            !readOnly && allowAddSheet ? /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: addSheet,
+                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: t("artifacts.spreadsheetGrid.addWorksheet")
+              }
+            ) : null
+          ] })
+        }
+      )
+    }
+  );
+}
+function SpreadsheetGrid({
+  workbook,
+  worksheet,
+  readOnly = false,
+  rowCount: requestedRowCount,
+  columnCount: requestedColumnCount,
+  overscanRows = 3,
+  overscanColumns = 2,
+  onSelectionChange,
+  onCommit,
+  onResize,
+  onViewportChange,
+  className
+}) {
+  const { revision, dimensionRevision } = useWorkbookViewState(workbook);
+  const boundedProjection = requestedRowCount !== void 0 || requestedColumnCount !== void 0;
+  const usedRange = useMemo2(() => {
+    void revision;
+    return boundedProjection ? worksheet.usedRangeAddress() : null;
+  }, [boundedProjection, revision, worksheet]);
+  const rowCount = boundedInteger(
+    Math.max(
+      requestedRowCount ?? MAX_ROWS,
+      (usedRange?.row ?? 0) + (usedRange?.rowCount ?? 0) + 32
+    ),
+    MAX_ROWS,
+    MAX_ROWS
+  );
+  const columnCount = boundedInteger(
+    Math.max(
+      requestedColumnCount ?? MAX_COLUMNS,
+      (usedRange?.col ?? 0) + (usedRange?.colCount ?? 0) + 8
+    ),
+    MAX_COLUMNS,
+    MAX_COLUMNS
+  );
+  const rowHeights = useMemo2(() => {
+    void dimensionRevision;
+    return [...worksheet.rowHeightEntries()];
+  }, [dimensionRevision, worksheet]);
+  const columnWidths = useMemo2(() => {
+    void dimensionRevision;
+    return [...worksheet.columnWidthEntries()];
+  }, [dimensionRevision, worksheet]);
+  const projection = useMemo2(() => {
+    void dimensionRevision;
+    const cells = new SparseSpreadsheetCellIndex(
+      function* projectedCells() {
+        for (const { row, col, data } of worksheet.cellEntries()) {
+          yield {
+            row,
+            col,
+            value: data.value,
+            formula: data.formula,
+            format: data.format
+          };
+        }
+      }()
+    );
+    return {
+      sheetId: worksheet.id,
+      sheetName: worksheet.name,
+      generationId: worksheet.id,
+      revision,
+      dimensionRevision,
+      rowCount,
+      columnCount,
+      defaultRowHeight: worksheet.defaultRowHeight,
+      defaultColumnWidth: worksheet.defaultColumnWidth,
+      rowHeights,
+      columnWidths,
+      usedRange,
+      cells,
+      valueAt: (cell) => cell.formula ? workbook.valueAt(worksheet, { row: cell.row, col: cell.col }) : cell.value,
+      readCell: (row, col) => {
+        const data = worksheet.cellData(row, col);
+        return {
+          value: data.formula ? workbook.valueAt(worksheet, { row, col }) : data.value,
+          input: data.formula ?? spreadsheetCellEditSource(data.value),
+          format: data.format
+        };
+      }
+    };
+  }, [
+    columnCount,
+    columnWidths,
+    dimensionRevision,
+    revision,
+    rowCount,
+    rowHeights,
+    usedRange,
+    workbook,
+    worksheet
+  ]);
+  const commit = useCallback3(
+    (next) => {
+      const target = worksheet.getCell(next.cell.row, next.cell.col);
+      if (next.kind === "formula") target.formulas = [[next.input]];
+      else target.values = [[parseCellInput(next.input)]];
+      onCommit?.(next);
+    },
+    [onCommit, worksheet]
+  );
+  const commitRange = useCallback3(
+    (next) => {
+      if (next.rows * next.columns !== next.inputs.length) {
+        throw new Error("Spreadsheet paste shape is invalid");
+      }
+      workbook.transact(() => {
+        for (let index = 0; index < next.inputs.length; index += 1) {
+          const input = next.inputs[index];
+          const row = next.anchor.row + Math.floor(index / next.columns);
+          const col = next.anchor.col + index % next.columns;
+          worksheet.setCell(
+            row,
+            col,
+            input.startsWith("=") ? { formula: input, value: null } : { formula: null, value: parseCellInput(input) },
+            "content"
+          );
+        }
+      });
+    },
+    [workbook, worksheet]
+  );
+  const clear = useCallback3(
+    (next) => {
+      const normalized = normalizeSelection(next);
+      worksheet.getRangeByIndexes(
+        normalized.top,
+        normalized.left,
+        normalized.bottom - normalized.top + 1,
+        normalized.right - normalized.left + 1
+      ).clear({ applyTo: "contents" });
+    },
+    [worksheet]
+  );
+  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,
+      readOnly,
+      overscanRows,
+      overscanColumns,
+      onSelectionChange,
+      commit,
+      commitRange,
+      clear,
+      resize,
+      onViewportChange,
+      className
+    }
+  );
+}
+function SpreadsheetProjectionGrid({
+  projection,
+  readOnly = false,
+  overscanRows = 3,
+  overscanColumns = 2,
+  onSelectionChange,
+  commit,
+  commitRange,
+  clear,
+  resize,
+  pendingTransactions = 0,
+  syncStatus,
+  syncError,
+  onCommandError,
+  onViewportChange,
+  className
+}) {
+  const t = useOpenGeniText();
+  const { revision, rowCount, columnCount } = projection;
+  const editable = !readOnly && commit !== void 0;
+  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] = useState3(null);
+  const [draft, setDraft] = useState3(
+    () => projection.readCell(selection.focus.row, selection.focus.col)?.input ?? ""
+  );
+  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 === t("artifacts.editableSpreadsheet.saved") || syncStatus === t("artifacts.editableSpreadsheet.readOnly")) ? t("artifacts.spreadsheetGrid.saving") : 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] = 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 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);
+      onSelectionChange?.(next);
+    },
+    [onSelectionChange]
+  );
+  useEffect3(() => {
+    if (selection.sheetId === projection.sheetId) return;
+    const next = {
+      sheetId: projection.sheetId,
+      anchor: { row: 0, col: 0 },
+      focus: { row: 0, col: 0 }
+    };
+    optimisticInputsRef.current.clear();
+    setCommandFailure(null);
+    setEditMode(null);
+    updateSelection(next);
+  }, [projection.sheetId, selection.sheetId, updateSelection]);
+  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 (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;
+    const measure = () => {
+      setViewport((current) => ({
+        ...current,
+        width: element.clientWidth || FALLBACK_VIEWPORT_WIDTH,
+        height: element.clientHeight || FALLBACK_VIEWPORT_HEIGHT,
+        devicePixelRatio: spreadsheetCanvasDevicePixelRatio(globalThis.devicePixelRatio || 1)
+      }));
+    };
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(element);
+    globalThis.addEventListener?.("resize", measure);
+    return () => {
+      observer?.disconnect();
+      globalThis.removeEventListener?.("resize", measure);
+    };
+  }, []);
+  useEffect3(() => {
+    return () => canvasRendererRef.current?.dispose();
+  }, []);
+  useEffect3(() => {
+    if (typeof document === "undefined") return;
+    let active = true;
+    void document.fonts?.ready.then(() => {
+      if (active) {
+        canvasRendererRef.current?.dispose();
+        setCanvasEpoch((value) => value + 1);
+      }
+    });
+    if (typeof MutationObserver === "undefined") {
+      return () => {
+        active = false;
+      };
+    }
+    const observer = new MutationObserver(() => setCanvasEpoch((value) => value + 1));
+    let ancestor = viewportRef.current;
+    while (ancestor) {
+      observer.observe(ancestor, {
+        attributes: true,
+        attributeFilter: ["class", "style", "data-og-theme", "data-og-density"]
+      });
+      ancestor = ancestor.parentElement;
+    }
+    return () => {
+      active = false;
+      observer.disconnect();
+    };
+  }, []);
+  useEffect3(() => {
+    if (editMode !== "cell") return;
+    const editor = editorRef.current;
+    editor?.focus();
+    if (!editor) return;
+    if (selectDraftOnFocusRef.current) editor.select();
+    else editor.setSelectionRange(editor.value.length, editor.value.length);
+  }, [editMode]);
+  const ensureVisible = useCallback3(
+    (cell) => {
+      const element = viewportRef.current;
+      if (!element) return;
+      const viewportWidth = element.clientWidth || FALLBACK_VIEWPORT_WIDTH;
+      const viewportHeight = element.clientHeight || FALLBACK_VIEWPORT_HEIGHT;
+      const horizontalProjection2 = buildScrollProjection(columns, ROW_HEADER_WIDTH, viewportWidth);
+      const verticalProjection2 = buildScrollProjection(rows, COLUMN_HEADER_HEIGHT, viewportHeight);
+      const left = ROW_HEADER_WIDTH + axisOffsetAt(columns, cell.col);
+      const right = left + axisSizeAt(columns, cell.col);
+      const top = COLUMN_HEADER_HEIGHT + axisOffsetAt(rows, cell.row);
+      const bottom = top + axisSizeAt(rows, cell.row);
+      const logicalScrollLeft2 = physicalToLogicalScroll(element.scrollLeft, horizontalProjection2);
+      const logicalScrollTop2 = physicalToLogicalScroll(element.scrollTop, verticalProjection2);
+      const viewportLeft = logicalScrollLeft2 + ROW_HEADER_WIDTH;
+      const viewportRight = logicalScrollLeft2 + viewportWidth;
+      const viewportTop = logicalScrollTop2 + COLUMN_HEADER_HEIGHT;
+      const viewportBottom = logicalScrollTop2 + viewportHeight;
+      if (left < viewportLeft) {
+        element.scrollLeft = logicalToPhysicalScroll(
+          Math.max(0, left - ROW_HEADER_WIDTH),
+          horizontalProjection2
+        );
+      } else if (right > viewportRight) {
+        element.scrollLeft = logicalToPhysicalScroll(right - viewportWidth, horizontalProjection2);
+      }
+      if (top < viewportTop) {
+        element.scrollTop = logicalToPhysicalScroll(
+          Math.max(0, top - COLUMN_HEADER_HEIGHT),
+          verticalProjection2
+        );
+      } else if (bottom > viewportBottom) {
+        element.scrollTop = logicalToPhysicalScroll(bottom - viewportHeight, verticalProjection2);
+      }
+    },
+    [columns, rows]
+  );
+  const moveSelection = useCallback3(
+    (rowDelta, colDelta, extend) => {
+      const focus = {
+        row: Math.max(0, Math.min(rowCount - 1, selection.focus.row + rowDelta)),
+        col: Math.max(0, Math.min(columnCount - 1, selection.focus.col + colDelta))
+      };
+      const next = {
+        sheetId: projection.sheetId,
+        anchor: extend ? selection.anchor : focus,
+        focus
+      };
+      updateSelection(next);
+      ensureVisible(focus);
+    },
+    [columnCount, ensureVisible, projection.sheetId, rowCount, selection, updateSelection]
+  );
+  const runCommand = useCallback3(
+    (invoke, retry, rollback, target, accepted) => {
+      setCommandFailure(null);
+      runQueuedCommand(invoke, retry, rollback, target, accepted);
+    },
+    [runQueuedCommand]
+  );
+  const reportCommandFailure = useCallback3(
+    (cause) => {
+      const error = cause instanceof Error ? cause : new Error(String(cause));
+      setCommandFailure({
+        message: error.message || t("artifacts.spreadsheetGrid.spreadsheetActionFailed")
+      });
+      onCommandError?.(error);
+    },
+    [onCommandError, t]
+  );
+  const commitDraft = useCallback3(
+    (input = draft) => {
+      if (committingRef.current) return;
+      committingRef.current = true;
+      if (!editable || !commit) {
+        setEditMode(null);
+        queueMicrotask(() => {
+          committingRef.current = false;
+        });
+        return;
+      }
+      if (input === initialDraftRef.current) {
+        setEditMode(null);
+        viewportRef.current?.focus();
+        queueMicrotask(() => {
+          committingRef.current = false;
+        });
+        return;
+      }
+      const next = {
+        sheetId: projection.sheetId,
+        cell: { ...selection.focus },
+        input,
+        kind: input.startsWith("=") ? "formula" : "value"
+      };
+      const execute = () => {
+        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(
+          (commandId) => {
+            optimisticInputsRef.current.set(key, {
+              ...next.cell,
+              input,
+              baseRevision: revision,
+              commandId,
+              pending: true
+            });
+            refreshOptimisticInputs();
+            return commit(next);
+          },
+          execute,
+          (commandId) => {
+            if (optimisticInputsRef.current.get(key)?.commandId !== commandId) return;
+            optimisticInputsRef.current.delete(key);
+            refreshOptimisticInputs();
+            const current = selectionRef.current.focus;
+            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();
+            }
+          }
+        );
+      };
+      execute();
+      initialDraftRef.current = input;
+      setEditMode(null);
+      viewportRef.current?.focus();
+      queueMicrotask(() => {
+        committingRef.current = false;
+      });
+    },
+    [
+      commit,
+      draft,
+      editable,
+      projection,
+      readEditInput,
+      revision,
+      runCommand,
+      selection.focus,
+      refreshOptimisticInputs
+    ]
+  );
+  const clearSelection = useCallback3(() => {
+    if (!editable || !clear) return;
+    const current = selection;
+    const target = normalizeSelection(current);
+    const execute = () => runCommand(
+      () => {
+        forgetOptimisticInputs(target);
+        return clear(current);
+      },
+      execute,
+      () => {
+      },
+      target
+    );
+    execute();
+  }, [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 = () => {
+        let prepared;
+        let target;
+        const prepare = () => {
+          prepared = parseSpreadsheetClipboard(t, clipboardText);
+          if (anchor.row + prepared.rows > rowCount || anchor.col + prepared.columns > columnCount) {
+            throw new Error(t("artifacts.spreadsheetGrid.clipboardRangeDoesNotFit"));
+          }
+          if (!commitRange && prepared.inputs.length !== 1) {
+            throw new Error(t("artifacts.spreadsheetGrid.thisSpreadsheetAdapterDoesNot"));
+          }
+          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
+          };
+          updateSelection({
+            sheetId: projection.sheetId,
+            anchor: { ...anchor },
+            focus: bottomRight
+          });
+          ensureVisible(bottomRight);
+          if (commitRange) {
+            return commitRange({
+              sheetId: projection.sheetId,
+              anchor: { ...anchor },
+              rows: parsed.rows,
+              columns: parsed.columns,
+              inputs: parsed.inputs
+            });
+          }
+          const input = parsed.inputs[0];
+          return commit({
+            sheetId: projection.sheetId,
+            cell: { ...anchor },
+            input,
+            kind: input.startsWith("=") ? "formula" : "value"
+          });
+        };
+        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();
+    },
+    [
+      columnCount,
+      commit,
+      commitRange,
+      editMode,
+      editable,
+      ensureVisible,
+      forgetOptimisticInputs,
+      projection.sheetId,
+      rowCount,
+      runCommand,
+      updateSelection,
+      t
+    ]
+  );
+  const copySelection = useCallback3(
+    (event) => {
+      if (editMode !== null) return;
+      const selected = normalizeSelection(selectionRef.current);
+      const rowsToCopy = selected.bottom - selected.top + 1;
+      const columnsToCopy = selected.right - selected.left + 1;
+      if (rowsToCopy * columnsToCopy > MAX_CLIPBOARD_CELLS) {
+        event.preventDefault();
+        reportCommandFailure(new Error(t("artifacts.spreadsheetGrid.selectedRangeIsTooLarge")));
+        return;
+      }
+      const coverage = projection.coverage;
+      if (coverage && (selected.top < coverage.rowStart || selected.bottom >= coverage.rowEnd || selected.left < coverage.columnStart || selected.right >= coverage.columnEnd)) {
+        event.preventDefault();
+        reportCommandFailure(
+          new Error(t("artifacts.spreadsheetGrid.selectedCellsAreStillLoading"))
+        );
+        return;
+      }
+      const output = [];
+      for (let row = selected.top; row <= selected.bottom; row += 1) {
+        const fields = [];
+        for (let col = selected.left; col <= selected.right; col += 1) {
+          fields.push(escapeSpreadsheetClipboardField(projection.readCell(row, col)?.input ?? ""));
+        }
+        output.push(fields.join("	"));
+      }
+      event.clipboardData.setData("text/plain", output.join("\r\n"));
+      event.preventDefault();
+      setCommandFailure(null);
+    },
+    [editMode, projection, reportCommandFailure, t]
+  );
+  const beginEditing = useCallback3(
+    (initial, cell = selectionRef.current.focus) => {
+      if (!editable) return;
+      ensureVisible(cell);
+      const current = readEditInput(cell);
+      initialDraftRef.current = current;
+      selectDraftOnFocusRef.current = initial === void 0;
+      setDraft(initial ?? current);
+      setEditMode("cell");
+    },
+    [editable, ensureVisible, readEditInput]
+  );
+  const onGridKeyDown = useCallback3(
+    (event) => {
+      if (editMode !== null) return;
+      if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return;
+      switch (event.key) {
+        case "ArrowUp":
+          event.preventDefault();
+          moveSelection(-1, 0, event.shiftKey);
+          return;
+        case "ArrowDown":
+          event.preventDefault();
+          moveSelection(1, 0, event.shiftKey);
+          return;
+        case "ArrowLeft":
+          event.preventDefault();
+          moveSelection(0, -1, event.shiftKey);
+          return;
+        case "ArrowRight":
+          event.preventDefault();
+          moveSelection(0, 1, event.shiftKey);
+          return;
+        case "Tab":
+          event.preventDefault();
+          moveSelection(0, event.shiftKey ? -1 : 1, false);
+          return;
+        case "Enter":
+        case "F2":
+          event.preventDefault();
+          beginEditing();
+          return;
+        case "Backspace":
+        case "Delete":
+          event.preventDefault();
+          clearSelection();
+          return;
+        case "Home": {
+          event.preventDefault();
+          const target = event.metaKey || event.ctrlKey ? { row: 0, col: 0 } : { row: selection.focus.row, col: 0 };
+          updateSelection({ sheetId: projection.sheetId, anchor: target, focus: target });
+          ensureVisible(target);
+          return;
+        }
+        case "End": {
+          event.preventDefault();
+          const used = projection.usedRange;
+          const target = event.metaKey || event.ctrlKey ? {
+            row: Math.min(rowCount - 1, (used?.row ?? 0) + (used?.rowCount ?? 1) - 1),
+            col: Math.min(columnCount - 1, (used?.col ?? 0) + (used?.colCount ?? 1) - 1)
+          } : { row: selection.focus.row, col: columnCount - 1 };
+          updateSelection({ sheetId: projection.sheetId, anchor: target, focus: target });
+          ensureVisible(target);
+          return;
+        }
+      }
+      if (editable && !event.metaKey && !event.ctrlKey && !event.altKey && event.key.length === 1) {
+        event.preventDefault();
+        beginEditing(event.key);
+      }
+    },
+    [
+      beginEditing,
+      clearSelection,
+      columnCount,
+      editMode,
+      ensureVisible,
+      moveSelection,
+      editable,
+      rowCount,
+      selection.focus.row,
+      updateSelection,
+      projection.sheetId,
+      projection.usedRange
+    ]
+  );
+  const onEditorKeyDown = useCallback3(
+    (event) => {
+      if (composingRef.current || event.nativeEvent.isComposing) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        commitDraft();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        committingRef.current = true;
+        setDraft(readEditInput(selection.focus));
+        setEditMode(null);
+        viewportRef.current?.focus();
+        queueMicrotask(() => {
+          committingRef.current = false;
+        });
+      }
+    },
+    [commitDraft, readEditInput, selection.focus]
+  );
+  const onEditorCompositionStart = useCallback3(() => {
+    composingRef.current = true;
+  }, []);
+  const onEditorCompositionEnd = useCallback3(
+    (input) => {
+      composingRef.current = false;
+      if (!commitAfterCompositionRef.current) return;
+      commitAfterCompositionRef.current = false;
+      commitDraft(input);
+    },
+    [commitDraft]
+  );
+  const commitEditorOnBlur = useCallback3(
+    (mode, input) => {
+      if (editMode !== mode) return;
+      if (composingRef.current) {
+        commitAfterCompositionRef.current = true;
+        return;
+      }
+      commitDraft(input);
+    },
+    [commitDraft, editMode]
+  );
+  const selectCell = useCallback3(
+    (cell, extend) => {
+      const current = selectionRef.current;
+      const next = {
+        sheetId: projection.sheetId,
+        anchor: extend ? current.anchor : cell,
+        focus: cell
+      };
+      updateSelection(next);
+      setEditMode(null);
+      viewportRef.current?.focus();
+    },
+    [projection.sheetId, updateSelection]
+  );
+  const hitTestCell = useCallback3(
+    (clientX, clientY) => {
+      const element = viewportRef.current;
+      if (!element) return null;
+      const bounds = element.getBoundingClientRect();
+      const viewportX = clientX - bounds.left;
+      const viewportY = clientY - bounds.top;
+      const viewportWidth = element.clientWidth || FALLBACK_VIEWPORT_WIDTH;
+      const viewportHeight = element.clientHeight || FALLBACK_VIEWPORT_HEIGHT;
+      if (viewportX < ROW_HEADER_WIDTH || viewportY < COLUMN_HEADER_HEIGHT || viewportX >= viewportWidth || viewportY >= viewportHeight) {
+        return null;
+      }
+      const horizontalProjection2 = buildScrollProjection(columns, ROW_HEADER_WIDTH, viewportWidth);
+      const verticalProjection2 = buildScrollProjection(rows, COLUMN_HEADER_HEIGHT, viewportHeight);
+      const logicalX = physicalToLogicalScroll(element.scrollLeft, horizontalProjection2) + viewportX - ROW_HEADER_WIDTH;
+      const logicalY = physicalToLogicalScroll(element.scrollTop, verticalProjection2) + viewportY - COLUMN_HEADER_HEIGHT;
+      if (logicalX < 0 || logicalY < 0 || logicalX >= columns.total || logicalY >= rows.total) {
+        return null;
+      }
+      return {
+        row: Math.min(rowCount - 1, indexAtOffset(rows, logicalY)),
+        col: Math.min(columnCount - 1, indexAtOffset(columns, logicalX))
+      };
+    },
+    [columnCount, columns, rowCount, rows]
+  );
+  const onGridPointerDown = useCallback3(
+    (event) => {
+      if (event.button !== 0) return;
+      const cell = hitTestCell(event.clientX, event.clientY);
+      if (!cell) return;
+      event.preventDefault();
+      const current = selectionRef.current;
+      const anchor = event.shiftKey ? current.anchor : cell;
+      selectingRef.current = { pointerId: event.pointerId, anchor };
+      try {
+        event.currentTarget.setPointerCapture(event.pointerId);
+      } catch {
+      }
+      updateSelection({ sheetId: projection.sheetId, anchor, focus: cell });
+      setEditMode(null);
+      event.currentTarget.focus();
+    },
+    [hitTestCell, projection.sheetId, updateSelection]
+  );
+  const onGridPointerMove = useCallback3(
+    (event) => {
+      const selecting = selectingRef.current;
+      if (!selecting || selecting.pointerId !== event.pointerId) return;
+      const cell = hitTestCell(event.clientX, event.clientY);
+      if (!cell) return;
+      const current = selectionRef.current;
+      if (current.focus.row === cell.row && current.focus.col === cell.col) return;
+      updateSelection({ sheetId: projection.sheetId, anchor: selecting.anchor, focus: cell });
+    },
+    [hitTestCell, projection.sheetId, updateSelection]
+  );
+  const stopPointerSelection = useCallback3((pointerId) => {
+    if (pointerId !== void 0 && selectingRef.current?.pointerId !== pointerId) return;
+    selectingRef.current = null;
+  }, []);
+  useEffect3(() => {
+    if (typeof window === "undefined") return;
+    const stopSelecting = () => stopPointerSelection();
+    window.addEventListener("pointerup", stopSelecting);
+    return () => window.removeEventListener("pointerup", stopSelecting);
+  }, [stopPointerSelection]);
+  const horizontalProjection = buildScrollProjection(columns, ROW_HEADER_WIDTH, viewport.width);
+  const verticalProjection = buildScrollProjection(rows, COLUMN_HEADER_HEIGHT, viewport.height);
+  const physicalScrollLeft = clampPhysicalScroll(viewport.scrollLeft, horizontalProjection);
+  const physicalScrollTop = clampPhysicalScroll(viewport.scrollTop, verticalProjection);
+  const logicalScrollLeft = physicalToLogicalScroll(viewport.scrollLeft, horizontalProjection);
+  const logicalScrollTop = physicalToLogicalScroll(viewport.scrollTop, verticalProjection);
+  const visibleRowWindow = visibleInterval(
+    rows,
+    logicalScrollTop,
+    Math.max(1, viewport.height - COLUMN_HEADER_HEIGHT),
+    0
+  );
+  const visibleColumnWindow = visibleInterval(
+    columns,
+    logicalScrollLeft,
+    Math.max(1, viewport.width - ROW_HEADER_WIDTH),
+    0
+  );
+  const projectedRowWindow = visibleInterval(
+    rows,
+    logicalScrollTop,
+    Math.max(1, viewport.height - COLUMN_HEADER_HEIGHT),
+    Math.max(0, overscanRows)
+  );
+  const projectedColumnWindow = visibleInterval(
+    columns,
+    logicalScrollLeft,
+    Math.max(1, viewport.width - ROW_HEADER_WIDTH),
+    Math.max(0, overscanColumns)
+  );
+  const { rows: rowWindow, columns: columnWindow } = boundVisibleWindows(
+    projectedRowWindow,
+    projectedColumnWindow,
+    selection.focus
+  );
+  const visibleRows = indexesBetween(rowWindow.start, rowWindow.end);
+  const visibleColumns = indexesBetween(columnWindow.start, columnWindow.end);
+  const rowLayout = visibleRows.map((row) => ({
+    row,
+    top: physicalScrollTop + COLUMN_HEADER_HEIGHT + axisOffsetAt(rows, row) - logicalScrollTop,
+    height: axisSizeAt(rows, row)
+  }));
+  const columnLayout = visibleColumns.map((col) => ({
+    col,
+    left: physicalScrollLeft + ROW_HEADER_WIDTH + axisOffsetAt(columns, col) - logicalScrollLeft,
+    width: axisSizeAt(columns, col)
+  }));
+  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;
+  useEffect3(() => {
+    if (!onViewportChange) return;
+    const next = {
+      sheetId: projection.sheetId,
+      rowStart: visibleRowWindow.start,
+      rowEnd: visibleRowWindow.end,
+      columnStart: visibleColumnWindow.start,
+      columnEnd: visibleColumnWindow.end,
+      overscanRowStart: projectedRowWindow.start,
+      overscanRowEnd: projectedRowWindow.end,
+      overscanColumnStart: projectedColumnWindow.start,
+      overscanColumnEnd: projectedColumnWindow.end,
+      logicalScrollLeft,
+      logicalScrollTop,
+      viewportWidth: viewport.width,
+      viewportHeight: viewport.height
+    };
+    let active = true;
+    const notify = () => {
+      if (active) onViewportChange(next);
+    };
+    if (typeof globalThis.requestAnimationFrame === "function") {
+      const frame = globalThis.requestAnimationFrame(notify);
+      return () => {
+        active = false;
+        globalThis.cancelAnimationFrame?.(frame);
+      };
+    }
+    queueMicrotask(notify);
+    return () => {
+      active = false;
+    };
+  }, [
+    logicalScrollLeft,
+    logicalScrollTop,
+    onViewportChange,
+    projectedColumnWindow.end,
+    projectedColumnWindow.start,
+    projectedRowWindow.end,
+    projectedRowWindow.start,
+    viewport.height,
+    viewport.width,
+    visibleColumnWindow.end,
+    visibleColumnWindow.start,
+    visibleRowWindow.end,
+    visibleRowWindow.start,
+    projection.sheetId
+  ]);
+  useClientLayoutEffect(() => {
+    void canvasEpoch;
+    const canvas = canvasRef.current;
+    const viewportElement = viewportRef.current;
+    const renderer = canvasRendererRef.current;
+    if (!canvas || !viewportElement || !renderer) return;
+    const normalized = normalizeSelection(selection);
+    const theme = spreadsheetCanvasTheme(viewportElement);
+    const paintStartedAt = performance.now();
+    const stats = renderer.paint({
+      canvas,
+      projection,
+      rows: canvasRows,
+      columns: canvasColumns,
+      selection: {
+        ...normalized,
+        focusRow: selection.focus.row,
+        focusColumn: selection.focus.col
+      },
+      logicalScrollLeft,
+      logicalScrollTop,
+      viewportWidth: viewport.width,
+      viewportHeight: viewport.height,
+      rowHeaderWidth: ROW_HEADER_WIDTH,
+      columnHeaderHeight: COLUMN_HEADER_HEIGHT,
+      dimensionRevision,
+      devicePixelRatio: viewport.devicePixelRatio,
+      theme
+    });
+    const paintDurationMs = performance.now() - paintStartedAt;
+    if (!stats) {
+      if (canvasReady) setCanvasReady(false);
+      return;
+    }
+    canvas.dataset.ogTileCacheSize = String(stats.cacheSize);
+    canvas.dataset.ogPaintedTiles = String(stats.paintedTiles);
+    canvas.dataset.ogReusedTiles = String(stats.reusedTiles);
+    canvas.dataset.ogUncachedTiles = String(stats.uncachedTiles);
+    canvas.dataset.ogDevicePixelRatio = String(stats.devicePixelRatio);
+    canvas.dataset.ogLogicalScrollLeft = String(logicalScrollLeft);
+    canvas.dataset.ogLogicalScrollTop = String(logicalScrollTop);
+    canvas.dataset.ogPaintDurationMs = String(paintDurationMs);
+    if (!canvasReady) setCanvasReady(true);
+  }, [
+    canvasColumns,
+    canvasEpoch,
+    canvasReady,
+    canvasRows,
+    dimensionRevision,
+    logicalScrollLeft,
+    logicalScrollTop,
+    projection,
+    revision,
+    selection,
+    viewport.devicePixelRatio,
+    viewport.height,
+    viewport.width
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative flex h-full min-w-0 flex-col bg-og-bg", className),
+      "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__ */ jsx2(
+            "output",
+            {
+              "aria-label": t("artifacts.spreadsheetGrid.selectedRange"),
+              className: "shrink-0 border-r border-og-border px-2 font-mono text-og-xs text-og-fg-muted",
+              style: { width: 96 },
+              children: selectionName(selection)
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "px-2 font-og-mono text-og-sm italic text-og-fg-subtle", children: t("artifacts.spreadsheetGrid.fx") }),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              "aria-label": t("artifacts.spreadsheetGrid.formulaOrValue"),
+              readOnly: !editable,
+              "aria-invalid": visibleCommandFailure ? "true" : void 0,
+              value: draft,
+              onFocus: () => {
+                if (editable) {
+                  const current = readEditInput(selection.focus);
+                  initialDraftRef.current = current;
+                  setDraft(current);
+                  setEditMode("formula");
+                }
+              },
+              onInput: (event) => setDraft(event.currentTarget.value),
+              onKeyDown: onEditorKeyDown,
+              onCompositionStart: onEditorCompositionStart,
+              onCompositionEnd: (event) => onEditorCompositionEnd(event.currentTarget.value),
+              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": t("artifacts.spreadsheetGrid.spreadsheetSyncStatus"),
+              className: "shrink-0 px-2 text-og-xs text-og-fg-muted",
+              children: visibleCommandFailure ? t("artifacts.spreadsheetGrid.notSaved") : visibleSyncStatus
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx2("div", { role: "status", "aria-live": "polite", className: "sr-only", children: visibleCommandFailure?.message ?? (pendingCommandCount > 0 ? t("artifacts.spreadsheetGrid.savingSpreadsheetChanges") : "") }),
+        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__ */ jsx2("span", { className: "truncate", children: visibleCommandFailure.message }),
+              visibleCommandFailure.retry ? /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  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: t("artifacts.spreadsheetGrid.retry")
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            ref: viewportRef,
+            role: "grid",
+            tabIndex: 0,
+            "aria-label": t("artifacts.spreadsheetGrid.sheetnameSpreadsheet", {
+              sheetName: projection.sheetName
+            }),
+            "aria-rowcount": rowCount,
+            "aria-colcount": columnCount,
+            "aria-multiselectable": "true",
+            "aria-readonly": !editable,
+            "aria-busy": pendingCommandCount > 0 ? "true" : void 0,
+            "aria-activedescendant": activeCellId,
+            onKeyDown: onGridKeyDown,
+            onCopy: copySelection,
+            onPaste: pasteClipboard,
+            onCompositionEnd: (event) => {
+              if (editMode === null && editable && event.data) beginEditing(event.data);
+            },
+            onPointerDown: onGridPointerDown,
+            onPointerMove: onGridPointerMove,
+            onPointerUp: (event) => stopPointerSelection(event.pointerId),
+            onPointerCancel: (event) => stopPointerSelection(event.pointerId),
+            onDoubleClick: (event) => {
+              const cell = hitTestCell(event.clientX, event.clientY);
+              if (!cell) return;
+              selectCell(cell, event.shiftKey);
+              beginEditing(void 0, cell);
+            },
+            onScroll: (event) => {
+              const element = event.currentTarget;
+              setViewport((current) => ({
+                ...current,
+                scrollLeft: element.scrollLeft,
+                scrollTop: element.scrollTop
+              }));
+            },
+            className: "relative min-h-0 min-w-0 flex-1 overflow-auto overscroll-contain bg-og-surface-1 text-og-sm outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent",
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "rowgroup",
+                className: "relative",
+                style: {
+                  width: horizontalProjection.physicalTotal,
+                  height: verticalProjection.physicalTotal,
+                  // Centered boundary handles must not enlarge the bounded scroll
+                  // extent at the final row/column. Unlike hidden, clip does not
+                  // create another scroll container for the sticky headers.
+                  overflow: "clip"
+                },
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    "canvas",
+                    {
+                      ref: canvasRef,
+                      "aria-hidden": "true",
+                      "data-og-spreadsheet-canvas": "retained-tiles",
+                      className: "pointer-events-none absolute z-0 block",
+                      style: {
+                        left: physicalScrollLeft,
+                        top: physicalScrollTop,
+                        width: viewport.width,
+                        height: viewport.height
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      "aria-hidden": true,
+                      className: "sticky left-0 top-0 z-40 border-b border-r border-og-border bg-og-surface-2",
+                      style: {
+                        width: ROW_HEADER_WIDTH,
+                        height: COLUMN_HEADER_HEIGHT,
+                        ...canvasReady ? { background: "transparent", borderColor: "transparent" } : void 0
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2("div", { role: "row", className: "contents", children: columnLayout.map(({ col, left, width }) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      role: "columnheader",
+                      "aria-colindex": col + 1,
+                      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,
+                        top: physicalScrollTop,
+                        width,
+                        height: COLUMN_HEADER_HEIGHT,
+                        ...canvasReady ? {
+                          background: "transparent",
+                          borderColor: "transparent",
+                          color: "transparent"
+                        } : void 0
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2("span", { className: "max-w-full overflow-hidden", children: columnName2(col) }),
+                        !readOnly && resize ? /* @__PURE__ */ jsx2(
+                          SpreadsheetResizeHandle,
+                          {
+                            axis: "column",
+                            label: t("artifacts.spreadsheetGrid.resizeColumnColumnname", {
+                              columnName: columnName2(col)
+                            }),
+                            size: width,
+                            ...resizing.handleProps("column", col)
+                          }
+                        ) : null
+                      ]
+                    },
+                    `header-${col}`
+                  )) }),
+                  rowLayout.map(({ row, top, height }) => {
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        role: "row",
+                        "aria-rowindex": row + 1,
+                        className: "absolute left-0",
+                        style: {
+                          top,
+                          width: horizontalProjection.physicalTotal,
+                          height
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              role: "rowheader",
+                              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 ? {
+                                  background: "transparent",
+                                  borderColor: "transparent",
+                                  color: "transparent"
+                                } : void 0
+                              },
+                              children: [
+                                row + 1,
+                                !readOnly && resize ? /* @__PURE__ */ jsx2(
+                                  SpreadsheetResizeHandle,
+                                  {
+                                    axis: "row",
+                                    label: t("artifacts.spreadsheetGrid.resizeRowRow", { row: row + 1 }),
+                                    size: height,
+                                    ...resizing.handleProps("row", row)
+                                  }
+                                ) : null
+                              ]
+                            }
+                          ),
+                          columnLayout.map(({ col, left, width }) => {
+                            const active = selection.focus.row === row && selection.focus.col === col;
+                            const selected = isCellSelected(selection, row, col);
+                            const data = projection.readCell(row, col) ?? {
+                              value: null,
+                              input: "",
+                              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__ */ jsx2(
+                              "div",
+                              {
+                                id: `${reactId}-cell-${row}-${col}`,
+                                role: "gridcell",
+                                "aria-colindex": col + 1,
+                                "aria-selected": selected,
+                                "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 || 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 && !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__ */ jsx2(
+                                  "input",
+                                  {
+                                    ref: editorRef,
+                                    "aria-label": t("artifacts.spreadsheetGrid.editAddress", { address }),
+                                    value: draft,
+                                    onInput: (event) => setDraft(event.currentTarget.value),
+                                    onKeyDown: onEditorKeyDown,
+                                    onCompositionStart: onEditorCompositionStart,
+                                    onCompositionEnd: (event) => onEditorCompositionEnd(event.currentTarget.value),
+                                    onBlur: (event) => commitEditorOnBlur("cell", event.currentTarget.value),
+                                    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__ */ jsx2("span", { className: "block min-w-0 overflow-hidden text-ellipsis", children: display })
+                              },
+                              col
+                            );
+                          })
+                        ]
+                      },
+                      `row-${row}`
+                    );
+                  }),
+                  !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 ? "" : `, ${formatSpreadsheetGeneralDisplay(hiddenActiveValue)}`}`
+                    }
+                  ) }) : null
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/artifacts/editable-spreadsheet.tsx
+import {
+  SPREADSHEET_ARTIFACT_COMMAND_VERSION,
+  editableArtifactStableId,
+  spreadsheetSheetId
+} from "@opengeni/sdk/editable-artifacts";
+import { PlusIcon as PlusIcon2 } from "lucide-react";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect4,
+  useId as useId2,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo3,
+  useRef as useRef4,
+  useState as useState4
+} from "react";
+
+// src/components/artifacts/spreadsheet-download.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function SpreadsheetDownloadButton(props) {
+  return /* @__PURE__ */ jsx3(EditableArtifactDownloadButton, { ...props, format: "xlsx" });
+}
+
+// src/components/artifacts/editable-spreadsheet.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var EXCEL_MAX_ROWS = 1048576;
+var EXCEL_MAX_COLUMNS = 16384;
+var INITIAL_VIEWPORT_ROWS = 64;
+var INITIAL_VIEWPORT_COLUMNS = 32;
+var MAX_INTERACTIVE_QUERY_CELLS = 65536;
+var MAX_INTERACTIVE_QUERY_BYTES = 8 * 1024 * 1024;
+var EMPTY_FORMAT = Object.freeze({});
+var EMPTY_SHEETS = [];
+var useClientLayoutEffect2 = typeof window === "undefined" ? useEffect4 : useLayoutEffect2;
+var SESSION_KEYS = /* @__PURE__ */ new WeakMap();
+var nextSessionKey = 0;
+function EditableSpreadsheetGrid(props) {
+  return /* @__PURE__ */ jsx4(
+    EditableSpreadsheetGridSession,
+    {
+      ...props
+    },
+    `${spreadsheetSessionKey(props.session)}:${props.sheet.sheetId}:${props.sheet.generationId ?? "pending"}`
+  );
+}
+function EditableSpreadsheetGridSession({
+  session,
+  sheet,
+  metadataRevision,
+  readOnly = false,
+  rowCount: requestedRowCount,
+  columnCount: requestedColumnCount,
+  overscanRows = 3,
+  overscanColumns = 2,
+  onSelectionChange,
+  onCommit,
+  onResize,
+  onCommandError,
+  onViewportChange,
+  className
+}) {
+  const t = useOpenGeniText();
+  const authoringLifetime = useSpreadsheetAuthoringLifetime();
+  const submissions = useArtifactSubmissions();
+  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] = useState4(() => ({
+    session,
+    generationId: sheet.generationId,
+    query: initialViewportQuery(sheet.sheetId, rowCount, columnCount),
+    projection: null,
+    error: null
+  }));
+  const activeCellRef = useRef4({ row: 0, column: 0 });
+  useEffect4(() => {
+    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.generationId, sheet.sheetId]);
+  useEffect4(() => {
+    const query = state.query;
+    const matchesScope = (current) => current.session === session && current.generationId === sheet.generationId && sameViewportQuery(current.query, query);
+    let active = true;
+    const unsubscribe = session.subscribeSpreadsheetViewport(
+      query,
+      (projection2) => {
+        if (!active || !sameViewport(projection2, query)) return;
+        if (sheet.generationId !== null && projection2.generationId !== sheet.generationId) {
+          setState(
+            (current) => matchesScope(current) ? {
+              ...current,
+              projection: null,
+              error: new Error("Spreadsheet generation changed; refreshing metadata")
+            } : current
+          );
+          return;
+        }
+        setState(
+          (current) => matchesScope(current) ? { ...current, projection: projection2, error: null } : current
+        );
+      },
+      {
+        onError(error) {
+          if (!active) return;
+          setState((current) => matchesScope(current) ? { ...current, error } : current);
+        }
+      }
+    );
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  }, [session, sheet.generationId, state.query]);
+  const projection = useMemo3(
+    () => projectSdkViewport(
+      sheet,
+      metadataRevision,
+      state.query,
+      state.session === session && state.generationId === sheet.generationId ? state.projection : null,
+      rowCount,
+      columnCount
+    ),
+    [columnCount, metadataRevision, rowCount, session, sheet, state]
+  );
+  const generation = useMemo3(() => sheetGeneration(sheet), [sheet]);
+  const editable = !readOnly && view.writable && !view.authoringBlockedReason && generation !== null;
+  const syncStatus = view.authoringBlockedReason ? t("artifacts.editableSpreadsheet.waitingForEarlierEdits") : view.state === "live" ? editable ? t("artifacts.editableSpreadsheet.saved") : t("artifacts.editableSpreadsheet.readOnly") : editableArtifactStatusLabel(t, view);
+  const syncError = view.blockedPending.length > 0 ? t("artifacts.editableSpreadsheet.someEarlierChangesCouldNot") : 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(t("artifacts.editableSpreadsheet.thisSheetGenerationIsNot"));
+      const input = spreadsheetCellInput(commit.input, commit.kind);
+      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);
+    },
+    [authoringLifetime, generation, onCommit, session, submissions, t]
+  );
+  const handleClear = useCallback4(
+    async (selection) => {
+      requireSpreadsheetAuthoringLifetime(authoringLifetime);
+      if (!generation) throw new Error(t("artifacts.editableSpreadsheet.thisSheetGenerationIsNot"));
+      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 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 }
+              }
+            }
+          ]
+        })
+      );
+    },
+    [authoringLifetime, generation, session, submissions, t]
+  );
+  const handleCommitRange = useCallback4(
+    async (commit) => {
+      requireSpreadsheetAuthoringLifetime(authoringLifetime);
+      if (!generation) throw new Error(t("artifacts.editableSpreadsheet.thisSheetGenerationIsNot"));
+      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")
+              )
+            }
+          ]
+        })
+      );
+    },
+    [authoringLifetime, generation, session, submissions, t]
+  );
+  const handleResize = useCallback4(
+    async (change) => {
+      const lifetime = requireSpreadsheetAuthoringLifetime(authoringLifetime);
+      if (!generation) throw new Error(t("artifacts.editableSpreadsheet.thisSheetGenerationIsNot"));
+      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,
+      t
+    ]
+  );
+  const handleSelection = useCallback4(
+    (selection) => {
+      activeCellRef.current = {
+        row: selection.focus.row,
+        column: selection.focus.col
+      };
+      setState((current) => {
+        if (queryContains(current.query, selection.focus.row, selection.focus.col)) return current;
+        return {
+          ...current,
+          query: boundedViewportQuery(
+            sheet.sheetId,
+            selection.focus.row,
+            selection.focus.row + 1,
+            selection.focus.col,
+            selection.focus.col + 1,
+            rowCount,
+            columnCount,
+            activeCellRef.current
+          ),
+          projection: current.projection,
+          error: null
+        };
+      });
+      onSelectionChange?.(selection);
+    },
+    [columnCount, onSelectionChange, rowCount, sheet.sheetId]
+  );
+  const handleViewport = useCallback4(
+    (viewport) => {
+      const next = boundedViewportQuery(
+        sheet.sheetId,
+        viewport.overscanRowStart,
+        viewport.overscanRowEnd,
+        viewport.overscanColumnStart,
+        viewport.overscanColumnEnd,
+        rowCount,
+        columnCount,
+        activeCellRef.current
+      );
+      setState(
+        (current) => sameViewportQuery(current.query, next) ? current : { ...current, query: next, error: null }
+      );
+      onViewportChange?.(viewport);
+    },
+    [columnCount, onViewportChange, rowCount, sheet.sheetId]
+  );
+  if (editableArtifactAccessRevoked(view)) {
+    return /* @__PURE__ */ jsx4(
+      EditableArtifactMessage,
+      {
+        title: t("artifacts.editableSpreadsheet.spreadsheetUnavailable"),
+        detail: t("artifacts.editableSpreadsheet.youNoLongerHaveAccess")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: cn("relative h-full min-h-0", className), children: [
+    /* @__PURE__ */ jsx4(
+      SpreadsheetProjectionGrid,
+      {
+        projection,
+        readOnly: !editable,
+        overscanRows,
+        overscanColumns,
+        onSelectionChange: handleSelection,
+        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 && state.session === session && state.generationId === sheet.generationId ? /* @__PURE__ */ jsx4(
+      "output",
+      {
+        role: "status",
+        className: "pointer-events-none absolute bottom-2 left-2 z-50 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: "min(28rem, calc(100% - 1rem))" },
+        children: state.error.message
+      }
+    ) : null
+  ] });
+}
+function EditableSpreadsheetArtifactSurface(props) {
+  return /* @__PURE__ */ jsx4(ArtifactSubmissionProvider, { children: /* @__PURE__ */ jsx4(EditableSpreadsheetArtifactSurfaceSession, { ...props }) }, spreadsheetSessionKey(props.session));
+}
+function EditableSpreadsheetArtifactSurfaceSession({
+  session,
+  title: titleProp,
+  showHeader,
+  subtitle,
+  actions,
+  download,
+  initialSheetId,
+  allowAddSheet = true,
+  readOnly = false,
+  ...gridProps
+}) {
+  const t = useOpenGeniText();
+  const title = titleProp === void 0 ? t("artifacts.editableSpreadsheet.workbook") : titleProp;
+  const authoringLifetime = useSpreadsheetAuthoringLifetime();
+  const submissions = useArtifactSubmissions();
+  const { metadata, error: metadataError } = useSpreadsheetMetadata(session);
+  const view = useEditableArtifactView(session);
+  const [activeSheetId, setActiveSheetId] = useState4(initialSheetId ?? null);
+  const [creatingSheet, setCreatingSheet] = useState4(false);
+  const [surfaceError, setSurfaceError] = useState4(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 && !view.authoringBlockedReason;
+  const accessRevoked = editableArtifactAccessRevoked(view);
+  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 submissions.run(
+        () => session.createSpreadsheetSheet({
+          name: nextAvailableSheetName2(t, sheets),
+          after
+        })
+      );
+      if (authoringLifetime.current === lifetime) setActiveSheetId(created.sheetId);
+    } catch (cause) {
+      if (authoringLifetime.current === lifetime) setSurfaceError(asError(cause));
+    } finally {
+      if (authoringLifetime.current === lifetime) setCreatingSheet(false);
+    }
+  }, [activeSheet, authoringLifetime, creatingSheet, session, sheets, submissions, writable, t]);
+  const footer = /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "flex min-h-9 items-center gap-1 overflow-x-auto px-2",
+      role: "tablist",
+      "aria-label": t("artifacts.editableSpreadsheet.worksheets"),
+      children: [
+        sheets.map((sheet) => /* @__PURE__ */ jsx4(
+          EditableWorksheetTab,
+          {
+            session,
+            sheet,
+            sheets,
+            selected: sheet.sheetId === activeSheet?.sheetId,
+            writable,
+            onSelect: () => setActiveSheetId(sheet.sheetId),
+            onCommandError: gridProps.onCommandError
+          },
+          `${sheet.sheetId}:${sheet.generationId ?? "pending"}`
+        )),
+        writable && allowAddSheet ? /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            onClick: () => void addSheet(),
+            disabled: creatingSheet,
+            "aria-label": creatingSheet ? t("artifacts.editableSpreadsheet.addingWorksheet") : t("artifacts.editableSpreadsheet.addWorksheet"),
+            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__ */ jsx4(PlusIcon2, {})
+          }
+        ) : null
+      ]
+    }
+  );
+  const error = surfaceError ?? metadataError;
+  return /* @__PURE__ */ jsx4(
+    ArtifactSurface,
+    {
+      modality: "spreadsheet",
+      title,
+      showHeader,
+      subtitle: subtitle ?? (accessRevoked ? editableArtifactStatusLabel(t, view) : metadata ? t("counts.sheets", { count: sheets.length }) : editableArtifactStatusLabel(t, view)),
+      actions: download ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        actions,
+        /* @__PURE__ */ jsx4(SpreadsheetDownloadButton, { session, title, download })
+      ] }) : actions,
+      footer: accessRevoked ? void 0 : footer,
+      busy: !accessRevoked && !metadata && !error,
+      children: accessRevoked ? /* @__PURE__ */ jsx4(
+        EditableArtifactMessage,
+        {
+          title: t("artifacts.editableSpreadsheet.accessChanged"),
+          detail: editableArtifactStatusLabel(t, view)
+        }
+      ) : activeSheet && metadata ? /* @__PURE__ */ jsx4(
+        EditableSpreadsheetGrid,
+        {
+          ...gridProps,
+          session,
+          sheet: activeSheet,
+          metadataRevision: metadata.revision,
+          readOnly: !writable
+        },
+        `${activeSheet.sheetId}:${activeSheet.generationId ?? "pending"}`
+      ) : error ? /* @__PURE__ */ jsx4(
+        EditableArtifactMessage,
+        {
+          title: t("artifacts.editableSpreadsheet.couldNotOpenThisWorkbook"),
+          detail: error.message
+        }
+      ) : metadata ? /* @__PURE__ */ jsx4("div", { className: "grid h-full place-items-center bg-og-bg p-6 text-center", children: /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx4("p", { className: "text-og-base font-medium text-og-fg", children: t("artifacts.editableSpreadsheet.thisWorkbookHasNoWorksheets") }),
+        writable && allowAddSheet ? /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            onClick: () => void addSheet(),
+            disabled: creatingSheet,
+            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 ? t("artifacts.editableSpreadsheet.adding") : t("artifacts.editableSpreadsheet.addWorksheet")
+          }
+        ) : null
+      ] }) }) : /* @__PURE__ */ jsx4(
+        EditableArtifactMessage,
+        {
+          title: t("artifacts.editableSpreadsheet.openingWorkbook"),
+          detail: editableArtifactStatusLabel(t, view)
+        }
+      )
+    }
+  );
+}
+function EditableWorksheetTab({
+  session,
+  sheet,
+  sheets,
+  selected,
+  writable,
+  onSelect,
+  onCommandError
+}) {
+  const t = useOpenGeniText();
+  const submissions = useArtifactSubmissions();
+  const [editing, setEditing] = useState4(false);
+  const [name, setName] = useState4(sheet.name);
+  const [saving, setSaving] = useState4(false);
+  const [accepted, setAccepted] = useState4(false);
+  const [error, setError] = useState4(null);
+  const inputRef = useRef4(null);
+  const tabRef = useRef4(null);
+  const busyRef = useRef4(false);
+  const mountedRef = useRef4(true);
+  const latestRef = useRef4({ session, sheet, writable });
+  latestRef.current = { session, sheet, writable };
+  const errorId = useId2();
+  const canRename = writable && sheet.generationId !== null;
+  const scopeRef = useRef4({
+    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
+    };
+  }
+  useEffect4(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect4(() => {
+    setEditing(false);
+    setSaving(false);
+    setAccepted(false);
+    setError(null);
+    busyRef.current = false;
+  }, [session, sheet.generationId, sheet.sheetId, canRename]);
+  useEffect4(() => {
+    if (!editing) return;
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, [editing]);
+  useEffect4(() => {
+    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(t("artifacts.editableSpreadsheet.use131CharactersWithout"));
+      return;
+    }
+    if (sheets.some((other) => other.sheetId !== sheet.sheetId && other.name === next)) {
+      setError(t("artifacts.editableSpreadsheet.aWorksheetAlreadyHasThis"));
+      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 || t("artifacts.editableSpreadsheet.couldNotRenameWorksheetTry"));
+      onCommandError?.(failure);
+      queueMicrotask(() => inputRef.current?.focus());
+    }
+  };
+  const tab = /* @__PURE__ */ jsx4(
+    "button",
+    {
+      ref: tabRef,
+      type: "button",
+      role: "tab",
+      tabIndex: editing && canRename ? -1 : void 0,
+      "aria-selected": selected,
+      "aria-keyshortcuts": canRename ? "F2" : void 0,
+      title: canRename ? t("artifacts.editableSpreadsheet.doubleClickOrPressF2") : 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 editing && canRename ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4("span", { className: "sr-only", children: tab }),
+    /* @__PURE__ */ jsxs2(
+      "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__ */ jsx4(
+            "input",
+            {
+              ref: inputRef,
+              "aria-label": t("artifacts.editableSpreadsheet.worksheetName"),
+              "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__ */ jsx4("span", { role: "status", className: "text-og-xs text-og-fg-muted", children: t("artifacts.editableSpreadsheet.renaming") }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx4(
+              "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: t("artifacts.editableSpreadsheet.save")
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "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: t("artifacts.editableSpreadsheet.cancel")
+              }
+            )
+          ] }),
+          error ? /* @__PURE__ */ jsx4(
+            "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 = useRef4({});
+  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] = useState4({ session, metadata: null, error: null });
+  useEffect4(() => {
+    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 && viewport.sheetId === sheet.sheetId && viewport.generationId === sheet.generationId ? viewport : null;
+  const projectedCells = (current?.cells ?? []).map((cell) => ({
+    row: cell.row,
+    col: cell.column,
+    value: projectedCellValue(cell.value),
+    formula: cell.formula,
+    format: EMPTY_FORMAT
+  }));
+  const cells = new SparseSpreadsheetCellIndex(projectedCells);
+  const byCoordinate = new Map(
+    projectedCells.map((cell) => [`${cell.row}:${cell.col}`, cell])
+  );
+  const used = sheet.usedBounds;
+  return {
+    sheetId: sheet.sheetId,
+    sheetName: sheet.name,
+    generationId: current?.generationId ?? sheet.generationId,
+    revision: current?.revision.toString() ?? "loading",
+    dimensionRevision: metadataRevision.toString(),
+    defaultRowHeight: sheet.defaultRowHeight,
+    defaultColumnWidth: sheet.defaultColumnWidth,
+    rowHeights: sheet.rowHeights,
+    columnWidths: sheet.columnWidths,
+    rowCount,
+    columnCount,
+    usedRange: used ? {
+      row: used.startRow,
+      col: used.startColumn,
+      rowCount: used.endRow - used.startRow + 1,
+      colCount: used.endColumn - used.startColumn + 1
+    } : null,
+    coverage: current ? {
+      rowStart: current.startRow,
+      rowEnd: current.startRow + current.rowCount,
+      columnStart: current.startColumn,
+      columnEnd: current.startColumn + current.columnCount
+    } : {
+      rowStart: query.startRow,
+      rowEnd: query.startRow,
+      columnStart: query.startColumn,
+      columnEnd: query.startColumn
+    },
+    cells,
+    valueAt: (cell) => cell.value,
+    readCell: (row, column) => {
+      const cell = byCoordinate.get(`${row}:${column}`);
+      return cell ? {
+        value: cell.value,
+        input: cell.formula ?? displayValue(cell.value),
+        format: cell.format
+      } : null;
+    }
+  };
+}
+function initialViewportQuery(sheetId, rowCount, columnCount) {
+  return {
+    sheetId,
+    startRow: 0,
+    startColumn: 0,
+    rowCount: Math.min(rowCount, INITIAL_VIEWPORT_ROWS),
+    columnCount: Math.min(columnCount, INITIAL_VIEWPORT_COLUMNS),
+    maxCells: MAX_INTERACTIVE_QUERY_CELLS,
+    maxBytes: MAX_INTERACTIVE_QUERY_BYTES
+  };
+}
+function boundedViewportQuery(sheetId, desiredRowStart, desiredRowEnd, desiredColumnStart, desiredColumnEnd, totalRows, totalColumns, focus) {
+  let rowStart = clampInteger(desiredRowStart, 0, totalRows - 1);
+  let rowEnd = clampInteger(desiredRowEnd, rowStart + 1, totalRows);
+  let columnStart = clampInteger(desiredColumnStart, 0, totalColumns - 1);
+  let columnEnd = clampInteger(desiredColumnEnd, columnStart + 1, totalColumns);
+  const desiredRows = rowEnd - rowStart;
+  const desiredColumns = columnEnd - columnStart;
+  if (desiredRows * desiredColumns > MAX_INTERACTIVE_QUERY_CELLS) {
+    const columns = Math.min(
+      desiredColumns,
+      Math.max(1, Math.floor(Math.sqrt(MAX_INTERACTIVE_QUERY_CELLS * 2)))
+    );
+    const rows = Math.max(1, Math.floor(MAX_INTERACTIVE_QUERY_CELLS / columns));
+    columnStart = clampWindowStart(columnStart, columnEnd, focus.column, columns, totalColumns);
+    columnEnd = Math.min(totalColumns, columnStart + columns);
+    rowStart = clampWindowStart(rowStart, rowEnd, focus.row, rows, totalRows);
+    rowEnd = Math.min(totalRows, rowStart + rows);
+  }
+  return {
+    sheetId,
+    startRow: rowStart,
+    startColumn: columnStart,
+    rowCount: rowEnd - rowStart,
+    columnCount: columnEnd - columnStart,
+    maxCells: MAX_INTERACTIVE_QUERY_CELLS,
+    maxBytes: MAX_INTERACTIVE_QUERY_BYTES
+  };
+}
+function clampWindowStart(desiredStart, desiredEnd, focus, size, total) {
+  if (desiredEnd - desiredStart <= size) return Math.min(desiredStart, Math.max(0, total - size));
+  const centered = focus - Math.floor(size / 2);
+  return Math.max(desiredStart, Math.min(desiredEnd - size, centered));
+}
+function queryContains(query, row, column) {
+  return row >= query.startRow && row < query.startRow + query.rowCount && column >= query.startColumn && column < query.startColumn + query.columnCount;
+}
+function sameViewport(projection, query) {
+  return projection.sheetId === query.sheetId && projection.startRow === query.startRow && projection.startColumn === query.startColumn && projection.rowCount === query.rowCount && projection.columnCount === query.columnCount;
+}
+function sameViewportQuery(left, right) {
+  return left.sheetId === right.sheetId && left.startRow === right.startRow && left.startColumn === right.startColumn && left.rowCount === right.rowCount && left.columnCount === right.columnCount && left.maxCells === right.maxCells && left.maxBytes === right.maxBytes;
+}
+function sheetGeneration(sheet) {
+  if (sheet.generationId === null) return null;
+  return {
+    kind: "generation",
+    sheetId: spreadsheetSheetId(sheet.sheetId),
+    creationOperationId: editableArtifactStableId(sheet.generationId)
+  };
+}
+function spreadsheetCellInput(input, kind) {
+  if (kind === "formula") return { formula: input };
+  if (input === "") return null;
+  const normalized = input.trim();
+  if (/^(?:true|false)$/i.test(normalized)) return normalized.toLowerCase() === "true";
+  if (/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(normalized)) {
+    const value = Number(normalized);
+    if (Number.isFinite(value)) return value;
+  }
+  return input;
+}
+function projectedCellValue(value) {
+  switch (value.kind) {
+    case "empty":
+      return null;
+    case "boolean":
+    case "number":
+    case "text":
+      return value.value;
+    case "date":
+      return new Date(value.value);
+    case "error":
+      return spreadsheetErrorText(value.value);
+  }
+}
+function spreadsheetErrorText(value) {
+  if (typeof value === "object") return value.custom;
+  return {
+    null: "#NULL!",
+    divide_by_zero: "#DIV/0!",
+    value: "#VALUE!",
+    reference: "#REF!",
+    name: "#NAME?",
+    number: "#NUM!",
+    not_available: "#N/A",
+    spill: "#SPILL!",
+    calculation: "#CALC!"
+  }[value];
+}
+function boundedSheetCount(requested, maximum, usedEnd) {
+  const requestedCount = requested === void 0 || !Number.isFinite(requested) ? maximum : Math.max(1, Math.min(maximum, Math.floor(requested)));
+  const usedCount = usedEnd === void 0 || !Number.isSafeInteger(usedEnd) ? 1 : Math.max(1, Math.min(maximum, usedEnd + 1));
+  return Math.max(requestedCount, usedCount);
+}
+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";
+  return String(value);
+}
+function nextAvailableSheetName2(t, sheets) {
+  let index = sheets.length + 1;
+  while (sheets.some((sheet) => sheet.name === `Sheet${index}`)) index += 1;
+  return t("artifacts.editableSpreadsheet.sheetIndex", { index });
+}
+function clampInteger(value, minimum, maximum) {
+  if (!Number.isFinite(value)) return minimum;
+  return Math.min(maximum, Math.max(minimum, Math.floor(value)));
+}
+function asError(cause) {
+  return cause instanceof Error ? cause : new Error("Spreadsheet change failed");
+}
+
+export {
+  SpreadsheetArtifactSurface,
+  SpreadsheetGrid,
+  SpreadsheetProjectionGrid,
+  EditableSpreadsheetGrid,
+  EditableSpreadsheetArtifactSurface
+};
+//# sourceMappingURL=chunk-X3MWB2QU.js.map