@opengeni/react 0.48.0 → 0.57.0

package/dist/chunk-7WCLAEFV.js

@@ -0,0 +1,2828 @@
+import {
+  ArtifactSurface,
+  EditableArtifactMessage,
+  editableArtifactAccessRevoked,
+  editableArtifactStatusLabel,
+  useEditableArtifactView
+} from "./chunk-KCGXPP5V.js";
+import {
+  cn
+} from "./chunk-22KP6LR5.js";
+
+// src/components/artifacts/spreadsheet-grid.tsx
+import { PlusIcon } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// 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 = displayValue(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, "#3b82f6");
+  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, "#3b82f6");
+  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 displayValue(value) {
+  if (value === null || value === void 0) return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
+  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+  return String(value);
+}
+function columnName(index) {
+  let value = index + 1;
+  let result = "";
+  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-grid.tsx
+import { jsx, 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 useClientLayoutEffect = typeof window === "undefined" ? useEffect : 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 displayValue2(value) {
+  if (value === null || value === void 0) return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
+  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+  return String(value);
+}
+function parseCellInput(input) {
+  if (input === "") return null;
+  const normalized = input.trim();
+  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(input) {
+  if (new TextEncoder().encode(input).byteLength > MAX_CLIPBOARD_INPUT_BYTES) {
+    throw new Error("Clipboard data is too large to paste");
+  }
+  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("Clipboard data contains an unterminated quoted cell");
+  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("Clipboard range is too large to paste");
+  }
+  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", "#3b82f6");
+  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] = useState(() => ({
+    revision: workbook.revision,
+    dimensionRevision: 0
+  }));
+  useEffect(() => {
+    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(workbook) {
+  let index = workbook.worksheets.items.length + 1;
+  while (workbook.worksheets.items.some((sheet) => sheet.name === `Sheet${index}`)) index += 1;
+  return `Sheet${index}`;
+}
+function SpreadsheetArtifactSurface({
+  workbook,
+  title = "Workbook",
+  subtitle,
+  actions,
+  initialSheetId,
+  allowAddSheet = true,
+  readOnly = false,
+  ...gridProps
+}) {
+  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] = useState(initial?.id ?? null);
+  const activeSheet = availableSheets.find((sheet) => sheet.id === activeSheetId) ?? availableSheets[0] ?? null;
+  useEffect(() => {
+    if (!activeSheet && activeSheetId !== null) setActiveSheetId(null);
+    else if (activeSheet && activeSheet.id !== activeSheetId) setActiveSheetId(activeSheet.id);
+  }, [activeSheet, activeSheetId, revision]);
+  const selectSheet = useCallback(
+    (sheet) => {
+      workbook.worksheets.setActiveWorksheet(sheet);
+      setActiveSheetId(sheet.id);
+    },
+    [workbook]
+  );
+  const addSheet = useCallback(() => {
+    const sheet = workbook.worksheets.add(nextAvailableSheetName(workbook));
+    selectSheet(sheet);
+  }, [selectSheet, workbook]);
+  const footer = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-9 items-center gap-1 overflow-x-auto px-2",
+      role: "tablist",
+      "aria-label": "Worksheets",
+      children: [
+        availableSheets.map((sheet) => /* @__PURE__ */ jsx(
+          "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__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: addSheet,
+            "aria-label": "Add worksheet",
+            className: "grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted hover:bg-og-surface-3 hover:text-og-fg [&>svg]:size-3.5",
+            children: /* @__PURE__ */ jsx(PlusIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    ArtifactSurface,
+    {
+      modality: "spreadsheet",
+      title,
+      subtitle: subtitle ?? (activeSheet ? `${availableSheets.length} sheet${availableSheets.length === 1 ? "" : "s"}` : "Empty workbook"),
+      actions,
+      footer,
+      children: activeSheet ? /* @__PURE__ */ jsx(
+        SpreadsheetGrid,
+        {
+          ...gridProps,
+          workbook,
+          worksheet: activeSheet,
+          readOnly
+        },
+        activeSheet.id
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "grid h-full place-items-center bg-og-bg p-6 text-center",
+          style: { minHeight: 224 },
+          children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-og-base font-medium text-og-fg", children: "This workbook has no worksheets." }),
+            !readOnly && allowAddSheet ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: addSheet,
+                className: "mt-3 rounded-og-sm bg-og-accent-deep px-3 py-1.5 text-og-sm font-medium text-og-accent-fg",
+                children: "Add worksheet"
+              }
+            ) : null
+          ] })
+        }
+      )
+    }
+  );
+}
+function SpreadsheetGrid({
+  workbook,
+  worksheet,
+  readOnly = false,
+  rowCount: requestedRowCount,
+  columnCount: requestedColumnCount,
+  overscanRows = 3,
+  overscanColumns = 2,
+  onSelectionChange,
+  onCommit,
+  onViewportChange,
+  className
+}) {
+  const { revision, dimensionRevision } = useWorkbookViewState(workbook);
+  const boundedProjection = requestedRowCount !== void 0 || requestedColumnCount !== void 0;
+  const usedRange = useMemo(() => {
+    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 = useMemo(() => {
+    void dimensionRevision;
+    return [...worksheet.rowHeightEntries()];
+  }, [dimensionRevision, worksheet]);
+  const columnWidths = useMemo(() => {
+    void dimensionRevision;
+    return [...worksheet.columnWidthEntries()];
+  }, [dimensionRevision, worksheet]);
+  const projection = useMemo(() => {
+    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 ?? displayValue2(data.value),
+          format: data.format
+        };
+      }
+    };
+  }, [
+    columnCount,
+    columnWidths,
+    dimensionRevision,
+    revision,
+    rowCount,
+    rowHeights,
+    usedRange,
+    workbook,
+    worksheet
+  ]);
+  const commit = useCallback(
+    (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 = useCallback(
+    (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 = useCallback(
+    (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]
+  );
+  return /* @__PURE__ */ jsx(
+    SpreadsheetProjectionGrid,
+    {
+      projection,
+      readOnly,
+      overscanRows,
+      overscanColumns,
+      onSelectionChange,
+      commit,
+      commitRange,
+      clear,
+      onViewportChange,
+      className
+    }
+  );
+}
+function SpreadsheetProjectionGrid({
+  projection,
+  readOnly = false,
+  overscanRows = 3,
+  overscanColumns = 2,
+  onSelectionChange,
+  commit,
+  commitRange,
+  clear,
+  onCommandError,
+  onViewportChange,
+  className
+}) {
+  const { revision, rowCount, columnCount } = projection;
+  const dimensionRevision = projection.dimensionRevision ?? 0;
+  const editable = !readOnly && commit !== void 0;
+  const rows = useMemo(() => {
+    void dimensionRevision;
+    return buildAxis(rowCount, projection.defaultRowHeight ?? 24, projection.rowHeights ?? []);
+  }, [dimensionRevision, projection.defaultRowHeight, projection.rowHeights, rowCount]);
+  const columns = useMemo(() => {
+    void dimensionRevision;
+    return buildAxis(
+      columnCount,
+      projection.defaultColumnWidth ?? 96,
+      projection.columnWidths ?? []
+    );
+  }, [columnCount, dimensionRevision, projection.columnWidths, projection.defaultColumnWidth]);
+  const canvasRows = useMemo(() => canvasAxis(rows), [rows]);
+  const canvasColumns = useMemo(() => canvasAxis(columns), [columns]);
+  const [selection, setSelection] = useState(() => ({
+    sheetId: projection.sheetId,
+    anchor: { row: 0, col: 0 },
+    focus: { row: 0, col: 0 }
+  }));
+  const [editMode, setEditMode] = useState(null);
+  const [draft, setDraft] = useState(
+    () => projection.readCell(selection.focus.row, selection.focus.col)?.input ?? ""
+  );
+  const [pendingCommands, setPendingCommands] = useState(0);
+  const [commandFailure, setCommandFailure] = useState(null);
+  const [viewport, setViewport] = useState({
+    width: FALLBACK_VIEWPORT_WIDTH,
+    height: FALLBACK_VIEWPORT_HEIGHT,
+    scrollLeft: 0,
+    scrollTop: 0,
+    devicePixelRatio: 1
+  });
+  const [canvasReady, setCanvasReady] = useState(false);
+  const [canvasEpoch, setCanvasEpoch] = useState(0);
+  const viewportRef = useRef(null);
+  const canvasRef = useRef(null);
+  const editorRef = useRef(null);
+  const selectionRef = useRef(selection);
+  const selectingRef = useRef(null);
+  const committingRef = useRef(false);
+  const composingRef = useRef(false);
+  const commitAfterCompositionRef = useRef(false);
+  const selectDraftOnFocusRef = useRef(true);
+  const initialDraftRef = useRef(draft);
+  const optimisticInputRef = useRef(null);
+  const mountedRef = useRef(true);
+  const commandScopeRef = useRef(0);
+  const latestCommandRef = useRef(0);
+  const canvasRendererRef = useRef(null);
+  if (!canvasRendererRef.current) canvasRendererRef.current = new SpreadsheetCanvasRenderer();
+  const reactId = useId().replaceAll(":", "");
+  const updateSelection = useCallback(
+    (next) => {
+      selectionRef.current = next;
+      setSelection(next);
+      onSelectionChange?.(next);
+    },
+    [onSelectionChange]
+  );
+  useEffect(() => {
+    if (selection.sheetId === projection.sheetId) return;
+    commandScopeRef.current += 1;
+    latestCommandRef.current += 1;
+    const next = {
+      sheetId: projection.sheetId,
+      anchor: { row: 0, col: 0 },
+      focus: { row: 0, col: 0 }
+    };
+    optimisticInputRef.current = null;
+    setPendingCommands(0);
+    setCommandFailure(null);
+    setEditMode(null);
+    updateSelection(next);
+  }, [projection.sheetId, selection.sheetId, updateSelection]);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      commandScopeRef.current += 1;
+      latestCommandRef.current += 1;
+    };
+  }, []);
+  useEffect(() => {
+    if (editMode !== null) return;
+    const optimistic = optimisticInputRef.current;
+    if (optimistic?.sheetId === projection.sheetId && optimistic.row === selection.focus.row && optimistic.col === selection.focus.col && optimistic.baseRevision === revision) {
+      setDraft(optimistic.input);
+      return;
+    }
+    if (optimistic && optimistic.baseRevision !== revision) optimisticInputRef.current = null;
+    setDraft(projection.readCell(selection.focus.row, selection.focus.col)?.input ?? "");
+  }, [editMode, projection, revision, selection.focus.col, selection.focus.row]);
+  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);
+    };
+  }, []);
+  useEffect(() => {
+    return () => canvasRendererRef.current?.dispose();
+  }, []);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    let active = true;
+    void document.fonts?.ready.then(() => {
+      if (active) 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();
+    };
+  }, []);
+  useEffect(() => {
+    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 = useCallback(
+    (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 = useCallback(
+    (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 = useCallback(
+    (invoke, retry, rollback) => {
+      const commandId = latestCommandRef.current + 1;
+      latestCommandRef.current = commandId;
+      const scope = commandScopeRef.current;
+      setCommandFailure(null);
+      const fail = (cause) => {
+        if (!mountedRef.current || commandScopeRef.current !== scope || latestCommandRef.current !== commandId) {
+          return;
+        }
+        const error = cause instanceof Error ? cause : new Error(String(cause));
+        rollback();
+        setCommandFailure({ message: error.message || "Spreadsheet change failed", retry });
+        onCommandError?.(error);
+      };
+      let result;
+      try {
+        result = invoke();
+      } catch (cause) {
+        fail(cause);
+        return;
+      }
+      if (!result || typeof result.then !== "function") return;
+      setPendingCommands((current) => current + 1);
+      void Promise.resolve(result).then(
+        () => {
+          if (!mountedRef.current || commandScopeRef.current !== scope) return;
+          setPendingCommands((current) => Math.max(0, current - 1));
+        },
+        (cause) => {
+          if (!mountedRef.current || commandScopeRef.current !== scope) return;
+          setPendingCommands((current) => Math.max(0, current - 1));
+          fail(cause);
+        }
+      );
+    },
+    [onCommandError]
+  );
+  const reportCommandFailure = useCallback(
+    (cause) => {
+      const error = cause instanceof Error ? cause : new Error(String(cause));
+      setCommandFailure({ message: error.message || "Spreadsheet action failed" });
+      onCommandError?.(error);
+    },
+    [onCommandError]
+  );
+  const commitDraft = useCallback(
+    (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 = () => {
+        optimisticInputRef.current = {
+          sheetId: projection.sheetId,
+          row: selection.focus.row,
+          col: selection.focus.col,
+          input,
+          baseRevision: revision
+        };
+        setDraft(input);
+        runCommand(
+          () => commit(next),
+          execute,
+          () => {
+            optimisticInputRef.current = null;
+            const current = selectionRef.current.focus;
+            setDraft(projection.readCell(current.row, current.col)?.input ?? "");
+          }
+        );
+      };
+      execute();
+      initialDraftRef.current = input;
+      setEditMode(null);
+      viewportRef.current?.focus();
+      queueMicrotask(() => {
+        committingRef.current = false;
+      });
+    },
+    [commit, draft, editable, projection, revision, runCommand, selection.focus]
+  );
+  const clearSelection = useCallback(() => {
+    if (!editable || !clear) return;
+    const current = selection;
+    const execute = () => runCommand(
+      () => clear(current),
+      execute,
+      () => {
+      }
+    );
+    execute();
+  }, [clear, editable, runCommand, selection]);
+  const pasteClipboard = useCallback(
+    (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 execute = () => {
+        const previousSelection = selectionRef.current;
+        const invoke = () => {
+          const parsed = parseSpreadsheetClipboard(clipboardText);
+          const anchor = previousSelection.focus;
+          if (anchor.row + parsed.rows > rowCount || anchor.col + parsed.columns > columnCount) {
+            throw new Error("Clipboard range does not fit in this worksheet");
+          }
+          if (!commitRange && parsed.inputs.length !== 1) {
+            throw new Error("This spreadsheet adapter does not support rectangular paste");
+          }
+          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, () => updateSelection(previousSelection));
+      };
+      execute();
+    },
+    [
+      columnCount,
+      commit,
+      commitRange,
+      editMode,
+      editable,
+      ensureVisible,
+      projection.sheetId,
+      rowCount,
+      runCommand,
+      updateSelection
+    ]
+  );
+  const copySelection = useCallback(
+    (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("Selected range is too large to copy"));
+        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("Selected cells are still loading; copy again when ready"));
+        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]
+  );
+  const beginEditing = useCallback(
+    (initial, cell = selectionRef.current.focus) => {
+      if (!editable) return;
+      ensureVisible(cell);
+      const current = projection.readCell(cell.row, cell.col)?.input ?? "";
+      initialDraftRef.current = current;
+      selectDraftOnFocusRef.current = initial === void 0;
+      setDraft(initial ?? current);
+      setEditMode("cell");
+    },
+    [editable, ensureVisible, projection]
+  );
+  const onGridKeyDown = useCallback(
+    (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 = useCallback(
+    (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(projection.readCell(selection.focus.row, selection.focus.col)?.input ?? "");
+        setEditMode(null);
+        viewportRef.current?.focus();
+        queueMicrotask(() => {
+          committingRef.current = false;
+        });
+      }
+    },
+    [commitDraft, projection, selection.focus.col, selection.focus.row]
+  );
+  const onEditorCompositionStart = useCallback(() => {
+    composingRef.current = true;
+  }, []);
+  const onEditorCompositionEnd = useCallback(
+    (input) => {
+      composingRef.current = false;
+      if (!commitAfterCompositionRef.current) return;
+      commitAfterCompositionRef.current = false;
+      commitDraft(input);
+    },
+    [commitDraft]
+  );
+  const commitEditorOnBlur = useCallback(
+    (mode, input) => {
+      if (editMode !== mode) return;
+      if (composingRef.current) {
+        commitAfterCompositionRef.current = true;
+        return;
+      }
+      commitDraft(input);
+    },
+    [commitDraft, editMode]
+  );
+  const selectCell = useCallback(
+    (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 = useCallback(
+    (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 = useCallback(
+    (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 = useCallback(
+    (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 = useCallback((pointerId) => {
+    if (pointerId !== void 0 && selectingRef.current?.pointerId !== pointerId) return;
+    selectingRef.current = null;
+  }, []);
+  useEffect(() => {
+    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;
+  useEffect(() => {
+    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": commandFailure ? "error" : pendingCommands > 0 ? "pending" : "idle",
+      style: { minHeight: 256 },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 shrink-0 items-center border-b border-og-border bg-og-surface-1", children: [
+          /* @__PURE__ */ jsx(
+            "output",
+            {
+              "aria-label": "Selected range",
+              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__ */ jsx("span", { "aria-hidden": true, className: "px-2 font-og-mono text-og-sm italic text-og-fg-subtle", children: "fx" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-label": "Formula or value",
+              readOnly: !editable,
+              "aria-invalid": commandFailure ? "true" : void 0,
+              value: draft,
+              onFocus: () => {
+                if (editable) {
+                  const current = projection.readCell(selection.focus.row, selection.focus.col)?.input ?? "";
+                  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"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: commandFailure?.message ?? (pendingCommands > 0 ? "Saving spreadsheet changes" : "") }),
+        commandFailure ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "alert",
+            className: "absolute bottom-2 left-2 z-50 flex items-center gap-2 rounded-og-sm border border-og-status-failed/30 bg-og-surface-1/95 px-2 py-1 text-og-xs text-og-status-failed shadow-og-sm",
+            style: { maxWidth: "calc(100% - 1rem)" },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: commandFailure.message }),
+              commandFailure.retry ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: commandFailure.retry,
+                  className: "shrink-0 rounded-og-xs px-1.5 py-0.5 font-medium outline-hidden hover:bg-og-surface-3 focus-visible:ring-2 focus-visible:ring-og-accent",
+                  children: "Retry"
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: viewportRef,
+            role: "grid",
+            tabIndex: 0,
+            "aria-label": `${projection.sheetName} spreadsheet`,
+            "aria-rowcount": rowCount,
+            "aria-colcount": columnCount,
+            "aria-multiselectable": "true",
+            "aria-readonly": !editable,
+            "aria-busy": pendingCommands > 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
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "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__ */ jsx(
+                    "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__ */ jsx("div", { role: "row", className: "contents", children: columnLayout.map(({ col, left, width }) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "columnheader",
+                      "aria-colindex": col + 1,
+                      className: "sticky top-0 z-30 grid select-none place-items-center overflow-hidden border-b border-r border-og-border bg-og-surface-2 text-og-xs font-medium text-og-fg-muted",
+                      style: {
+                        position: "absolute",
+                        left,
+                        top: physicalScrollTop,
+                        width,
+                        height: COLUMN_HEADER_HEIGHT,
+                        ...canvasReady ? {
+                          background: "transparent",
+                          borderColor: "transparent",
+                          color: "transparent"
+                        } : void 0
+                      },
+                      children: columnName2(col)
+                    },
+                    `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__ */ jsx(
+                            "div",
+                            {
+                              role: "rowheader",
+                              className: "sticky left-0 z-20 grid h-full select-none place-items-center border-b border-r border-og-border bg-og-surface-2 text-og-xs text-og-fg-muted",
+                              style: {
+                                width: ROW_HEADER_WIDTH,
+                                ...canvasReady ? {
+                                  background: "transparent",
+                                  borderColor: "transparent",
+                                  color: "transparent"
+                                } : void 0
+                              },
+                              children: row + 1
+                            }
+                          ),
+                          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 address = cellName({ row, col });
+                            const error = typeof value === "string" && value.startsWith("#");
+                            return /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                id: `${reactId}-cell-${row}-${col}`,
+                                role: "gridcell",
+                                "aria-colindex": col + 1,
+                                "aria-selected": selected,
+                                "aria-label": `${address}${value === null ? "" : `, ${displayValue2(value)}`}`,
+                                "data-og-cell": address,
+                                className: cn(
+                                  "pointer-events-none absolute top-0 flex h-full min-w-0 overflow-hidden border-b border-r border-og-border px-1.5 text-og-fg",
+                                  !canvasReady && selected && !active && "bg-og-accent/10",
+                                  !canvasReady && active && "z-10 bg-og-accent/10 ring-2 ring-inset ring-og-accent",
+                                  !canvasReady && error && "text-og-status-failed"
+                                ),
+                                style: {
+                                  left,
+                                  width,
+                                  ...cellStyle(data.format),
+                                  ...canvasReady ? {
+                                    background: "transparent",
+                                    borderColor: "transparent",
+                                    color: "transparent"
+                                  } : void 0
+                                },
+                                children: active && editMode === "cell" ? /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    ref: editorRef,
+                                    "aria-label": `Edit ${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__ */ jsx("span", { className: "block min-w-0 overflow-hidden text-ellipsis", children: displayValue2(value) })
+                              },
+                              col
+                            );
+                          })
+                        ]
+                      },
+                      `row-${row}`
+                    );
+                  }),
+                  !activeCellVisible ? /* @__PURE__ */ jsx("div", { role: "row", "aria-rowindex": selection.focus.row + 1, className: "sr-only", children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      id: activeCellId,
+                      role: "gridcell",
+                      "aria-colindex": selection.focus.col + 1,
+                      "aria-selected": "true",
+                      "aria-label": `${cellName(selection.focus)}${hiddenActiveValue == null ? "" : `, ${displayValue2(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 useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+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 = [];
+function EditableSpreadsheetGrid({
+  session,
+  sheet,
+  metadataRevision,
+  readOnly = false,
+  rowCount: requestedRowCount,
+  columnCount: requestedColumnCount,
+  overscanRows = 3,
+  overscanColumns = 2,
+  onSelectionChange,
+  onCommit,
+  onCommandError,
+  onViewportChange,
+  className
+}) {
+  const rowCount = boundedSheetCount(requestedRowCount, EXCEL_MAX_ROWS, sheet.usedBounds?.endRow);
+  const columnCount = boundedSheetCount(
+    requestedColumnCount,
+    EXCEL_MAX_COLUMNS,
+    sheet.usedBounds?.endColumn
+  );
+  const [state, setState] = useState2(() => ({
+    query: initialViewportQuery(sheet.sheetId, rowCount, columnCount),
+    projection: null,
+    error: null
+  }));
+  const activeCellRef = useRef2({ row: 0, column: 0 });
+  useEffect2(() => {
+    setState({
+      query: initialViewportQuery(sheet.sheetId, rowCount, columnCount),
+      projection: null,
+      error: null
+    });
+    activeCellRef.current = { row: 0, column: 0 };
+  }, [columnCount, rowCount, session, sheet.sheetId]);
+  useEffect2(() => {
+    const query = state.query;
+    return session.subscribeSpreadsheetViewport(
+      query,
+      (projection2) => {
+        if (!sameViewport(projection2, query)) return;
+        if (sheet.generationId !== null && projection2.generationId !== sheet.generationId) {
+          setState(
+            (current) => sameViewportQuery(current.query, query) ? {
+              ...current,
+              projection: null,
+              error: new Error("Spreadsheet generation changed; refreshing metadata")
+            } : current
+          );
+          return;
+        }
+        setState(
+          (current) => sameViewportQuery(current.query, query) ? { query, projection: projection2, error: null } : current
+        );
+      },
+      {
+        onError(error) {
+          setState(
+            (current) => sameViewportQuery(current.query, query) ? { ...current, error } : current
+          );
+        }
+      }
+    );
+  }, [session, sheet.generationId, state.query]);
+  const projection = useMemo2(
+    () => projectSdkViewport(
+      sheet,
+      metadataRevision,
+      state.query,
+      state.projection,
+      rowCount,
+      columnCount
+    ),
+    [columnCount, metadataRevision, rowCount, sheet, state.projection, state.query]
+  );
+  const generation = useMemo2(() => sheetGeneration(sheet), [sheet]);
+  const editable = !readOnly && generation !== null;
+  const handleCommit = useCallback2(
+    async (commit) => {
+      if (!generation) throw new Error("This sheet generation is not writable yet");
+      const input = spreadsheetCellInput(commit.input, commit.kind);
+      await session.applySpreadsheetCommands({
+        version: SPREADSHEET_ARTIFACT_COMMAND_VERSION,
+        commands: [
+          {
+            kind: "cells.set",
+            sheet: generation,
+            anchor: { row: commit.cell.row, column: commit.cell.col },
+            rows: 1,
+            columns: 1,
+            cells: [input]
+          }
+        ]
+      });
+      onCommit?.(commit);
+    },
+    [generation, onCommit, session]
+  );
+  const handleClear = useCallback2(
+    async (selection) => {
+      if (!generation) throw new Error("This sheet generation is not writable yet");
+      const top = Math.min(selection.anchor.row, selection.focus.row);
+      const bottom = Math.max(selection.anchor.row, selection.focus.row);
+      const left = Math.min(selection.anchor.col, selection.focus.col);
+      const right = Math.max(selection.anchor.col, selection.focus.col);
+      await session.applySpreadsheetCommands({
+        version: SPREADSHEET_ARTIFACT_COMMAND_VERSION,
+        commands: [
+          {
+            kind: "range.clear",
+            sheet: generation,
+            range: {
+              start: { row: top, column: left },
+              end: { row: bottom, column: right }
+            }
+          }
+        ]
+      });
+    },
+    [generation, session]
+  );
+  const handleCommitRange = useCallback2(
+    async (commit) => {
+      if (!generation) throw new Error("This sheet generation is not writable yet");
+      await session.applySpreadsheetCommands({
+        version: SPREADSHEET_ARTIFACT_COMMAND_VERSION,
+        commands: [
+          {
+            kind: "cells.set",
+            sheet: generation,
+            anchor: { row: commit.anchor.row, column: commit.anchor.col },
+            rows: commit.rows,
+            columns: commit.columns,
+            cells: commit.inputs.map(
+              (input) => spreadsheetCellInput(input, input.startsWith("=") ? "formula" : "value")
+            )
+          }
+        ]
+      });
+    },
+    [generation, session]
+  );
+  const handleSelection = useCallback2(
+    (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 {
+          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 = useCallback2(
+    (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 : { query: next, projection: current.projection, error: null }
+      );
+      onViewportChange?.(viewport);
+    },
+    [columnCount, onViewportChange, rowCount, sheet.sheetId]
+  );
+  return /* @__PURE__ */ jsxs2("div", { className: cn("relative h-full min-h-0", className), children: [
+    /* @__PURE__ */ jsx2(
+      SpreadsheetProjectionGrid,
+      {
+        projection,
+        readOnly: !editable,
+        overscanRows,
+        overscanColumns,
+        onSelectionChange: handleSelection,
+        commit: editable ? handleCommit : void 0,
+        commitRange: editable ? handleCommitRange : void 0,
+        clear: editable ? handleClear : void 0,
+        onCommandError,
+        onViewportChange: handleViewport
+      }
+    ),
+    state.error ? /* @__PURE__ */ jsx2(
+      "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({
+  session,
+  title = "Workbook",
+  subtitle,
+  actions,
+  initialSheetId,
+  allowAddSheet = true,
+  readOnly = false,
+  ...gridProps
+}) {
+  const { metadata, error: metadataError } = useSpreadsheetMetadata(session);
+  const view = useEditableArtifactView(session);
+  const [activeSheetId, setActiveSheetId] = useState2(initialSheetId ?? null);
+  const [creatingSheet, setCreatingSheet] = useState2(false);
+  const [surfaceError, setSurfaceError] = useState2(null);
+  const sheets = metadata?.sheets ?? EMPTY_SHEETS;
+  const activeSheet = sheets.find((sheet) => sheet.sheetId === activeSheetId) ?? (initialSheetId ? sheets.find((sheet) => sheet.sheetId === initialSheetId) : void 0) ?? sheets[0] ?? null;
+  const writable = !readOnly && view.writable;
+  const accessRevoked = editableArtifactAccessRevoked(view);
+  const addSheet = useCallback2(async () => {
+    if (!writable || creatingSheet) return;
+    setCreatingSheet(true);
+    setSurfaceError(null);
+    try {
+      const after = activeSheet ? sheetGeneration(activeSheet) : null;
+      const created = await session.createSpreadsheetSheet({
+        name: nextAvailableSheetName2(sheets),
+        after
+      });
+      setActiveSheetId(created.sheetId);
+    } catch (cause) {
+      setSurfaceError(asError(cause));
+    } finally {
+      setCreatingSheet(false);
+    }
+  }, [activeSheet, creatingSheet, session, sheets, writable]);
+  const footer = /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "flex min-h-9 items-center gap-1 overflow-x-auto px-2",
+      role: "tablist",
+      "aria-label": "Worksheets",
+      children: [
+        sheets.map((sheet) => /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": sheet.sheetId === activeSheet?.sheetId,
+            onClick: () => setActiveSheetId(sheet.sheetId),
+            className: cn(
+              "h-7 shrink-0 rounded-og-sm px-2.5 text-og-sm outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-og-accent",
+              sheet.sheetId === activeSheet?.sheetId ? "bg-og-surface-3 font-medium text-og-fg" : "text-og-fg-muted hover:bg-og-surface-3 hover:text-og-fg"
+            ),
+            children: sheet.name
+          },
+          `${sheet.sheetId}:${sheet.generationId ?? "pending"}`
+        )),
+        writable && allowAddSheet ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => void addSheet(),
+            disabled: creatingSheet,
+            "aria-label": creatingSheet ? "Adding worksheet" : "Add worksheet",
+            className: "grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted outline-hidden hover:bg-og-surface-3 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50 [&>svg]:size-3.5",
+            children: /* @__PURE__ */ jsx2(PlusIcon2, {})
+          }
+        ) : null
+      ]
+    }
+  );
+  const error = surfaceError ?? metadataError;
+  return /* @__PURE__ */ jsx2(
+    ArtifactSurface,
+    {
+      modality: "spreadsheet",
+      title,
+      subtitle: subtitle ?? (accessRevoked ? editableArtifactStatusLabel(view) : metadata ? `${sheets.length} sheet${sheets.length === 1 ? "" : "s"}` : editableArtifactStatusLabel(view)),
+      actions,
+      footer: accessRevoked ? void 0 : footer,
+      busy: !accessRevoked && !metadata && !error,
+      children: accessRevoked ? /* @__PURE__ */ jsx2(
+        EditableArtifactMessage,
+        {
+          title: "Access changed",
+          detail: editableArtifactStatusLabel(view)
+        }
+      ) : activeSheet && metadata ? /* @__PURE__ */ jsx2(
+        EditableSpreadsheetGrid,
+        {
+          ...gridProps,
+          session,
+          sheet: activeSheet,
+          metadataRevision: metadata.revision,
+          readOnly: !writable
+        },
+        `${activeSheet.sheetId}:${activeSheet.generationId ?? "pending"}`
+      ) : error ? /* @__PURE__ */ jsx2(EditableArtifactMessage, { title: "Could not open this workbook", detail: error.message }) : metadata ? /* @__PURE__ */ jsx2("div", { className: "grid h-full place-items-center bg-og-bg p-6 text-center", children: /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("p", { className: "text-og-base font-medium text-og-fg", children: "This workbook has no worksheets." }),
+        writable && allowAddSheet ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => void addSheet(),
+            disabled: creatingSheet,
+            className: "mt-3 rounded-og-sm bg-og-accent-deep px-3 py-1.5 text-og-sm font-medium text-og-accent-fg outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50",
+            children: creatingSheet ? "Adding\u2026" : "Add worksheet"
+          }
+        ) : null
+      ] }) }) : /* @__PURE__ */ jsx2(
+        EditableArtifactMessage,
+        {
+          title: "Opening workbook",
+          detail: editableArtifactStatusLabel(view)
+        }
+      )
+    }
+  );
+}
+function useSpreadsheetMetadata(session) {
+  const [state, setState] = useState2({ metadata: null, error: null });
+  useEffect2(
+    () => session.subscribeSpreadsheetMetadata({}, (metadata) => setState({ metadata, error: null }), {
+      onError: (error) => setState((current) => ({ ...current, error }))
+    }),
+    [session]
+  );
+  return state;
+}
+function projectSdkViewport(sheet, metadataRevision, query, viewport, rowCount, columnCount) {
+  const current = viewport && sameViewport(viewport, query) ? 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: `${metadataRevision}:${current?.revision ?? "loading"}`,
+    dimensionRevision: metadataRevision.toString(),
+    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 ?? displayValue3(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, cached: null };
+  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 displayValue3(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(sheets) {
+  let index = sheets.length + 1;
+  while (sheets.some((sheet) => sheet.name === `Sheet${index}`)) index += 1;
+  return `Sheet${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-7WCLAEFV.js.map