@lotics/xlsx 0.1.0

package/src/cell_editor.ts

@@ -0,0 +1,558 @@
+// =============================================================================
+// Cell Editor — Inline DOM Overlay
+// =============================================================================
+//
+// Manages a DOM <input> overlay positioned over the active cell on the canvas.
+// The parent component orchestrates the lifecycle:
+// - selection.startEdit() fires edit_start → CellEditor shows
+// - selection.commitEdit() fires edit_end(commit=true) → CellEditor commits + hides
+// - selection.cancelEdit() fires edit_end(commit=false) → CellEditor hides
+//
+// No React dependency — works with any DOM container.
+// =============================================================================
+
+import type { LayoutEngine } from "./canvas_layout";
+import type { SelectionModel, SelectionEvent } from "./selection_model";
+import { cycleReferenceAtCursor } from "./keyboard_nav";
+import { getFormulaSuggestions, applyFormulaSuggestion } from "./formula_suggest";
+import type { FormulaSuggestion } from "./formula_suggest";
+import type { WorkbookModel } from "./workbook_model";
+import type { CommandHistory } from "./command_history";
+import type { FormulaEngine } from "./formula_engine";
+import { setCellValueCommand } from "./spreadsheet_commands";
+import { rowColToRef, refToRowCol } from "./excel_utils";
+import { findValidationForCell, validateCellValue } from "./data_validation";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface CellEditorDeps {
+  workbook: WorkbookModel;
+  sheetIndex: number;
+  selection: SelectionModel;
+  history: CommandHistory;
+  engine: FormulaEngine | undefined;
+  layout: LayoutEngine;
+  /** Called when the editor text changes (for formula bar sync). */
+  onTextChange?: (text: string) => void;
+  /** Called when the editor finishes (for redraw). */
+  onDone?: () => void;
+  /** Called when data validation fails on commit. */
+  onValidationError?: (error: {
+    title: string;
+    message: string;
+    style: "stop" | "warning" | "information";
+    /** Called to retry editing (re-focus editor). */
+    onRetry: () => void;
+  }) => void;
+}
+
+// =============================================================================
+// CellEditor
+// =============================================================================
+
+export class CellEditor {
+  // textarea so multi-line content (Alt+Enter) renders correctly and the
+  // editor can auto-grow vertically beyond the cell's natural height.
+  private input: HTMLTextAreaElement;
+  private container: HTMLElement;
+  private deps: CellEditorDeps;
+  private scrollX = 0;
+  private scrollY = 0;
+  private active = false;
+  /** Cell width at edit start — the editor stays at least this wide while
+   *  growing horizontally with content. */
+  private baseCellW = 0;
+  private baseCellH = 0;
+  private acDropdown: HTMLDivElement;
+  private acItems: string[] = [];
+  private acIndex = -1;
+  /** When the autocomplete is showing function-name suggestions (formula
+   *  mode), this holds the source data so acceptAutocomplete can splice in
+   *  the chosen name correctly. Empty for column-value autocomplete. */
+  private fnSuggestions: FormulaSuggestion[] = [];
+  private fnTokenRange: { start: number; end: number } | null = null;
+
+  constructor(container: HTMLElement, deps: CellEditorDeps) {
+    this.container = container;
+    this.deps = deps;
+
+    this.input = document.createElement("textarea");
+    Object.assign(this.input.style, {
+      position: "absolute",
+      display: "none",
+      border: "2px solid #2563EB",
+      outline: "none",
+      padding: "0 3px",
+      margin: "0",
+      boxSizing: "border-box",
+      fontFamily: "Calibri, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      fontSize: "13px",
+      lineHeight: "1.2",
+      backgroundColor: "#FFFFFF",
+      zIndex: "10",
+      pointerEvents: "auto",
+      // Auto-grow visuals: no scrollbar, single-line by default, hidden
+      // overflow until we recompute size in handleInput.
+      resize: "none",
+      overflow: "hidden",
+      whiteSpace: "pre",
+    });
+    this.input.setAttribute("data-testid", "spreadsheet-cell-editor");
+    this.input.rows = 1;
+
+    this.input.addEventListener("input", this.handleInput);
+    this.input.addEventListener("keydown", this.handleKeyDown);
+    this.input.addEventListener("blur", this.handleBlur);
+
+    // Autocomplete dropdown
+    this.acDropdown = document.createElement("div");
+    Object.assign(this.acDropdown.style, {
+      position: "absolute",
+      display: "none",
+      backgroundColor: "#FFFFFF",
+      border: "1px solid #D1D5DB",
+      borderRadius: "4px",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+      zIndex: "20",
+      maxHeight: "150px",
+      overflowY: "auto",
+      fontSize: "13px",
+      fontFamily: "Calibri, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    });
+    this.acDropdown.setAttribute("data-testid", "spreadsheet-autocomplete");
+
+    container.appendChild(this.input);
+    container.appendChild(this.acDropdown);
+  }
+
+  /** Whether the editor is currently visible. */
+  get isActive(): boolean {
+    return this.active;
+  }
+
+  /** Get the current input value. */
+  get text(): string {
+    return this.input.value;
+  }
+
+  /**
+   * Handle a SelectionEvent from the selection model.
+   * Call this from the parent's onChange handler.
+   */
+  handleSelectionEvent(event: SelectionEvent): void {
+    if (event.type === "edit_start") {
+      this.show(event.text);
+    } else if (event.type === "edit_end") {
+      if (event.commit) {
+        this.commitValue(event.text);
+      }
+      this.hide();
+    }
+  }
+
+  /** Update scroll offsets (call on scroll). */
+  updateScroll(scrollX: number, scrollY: number): void {
+    this.scrollX = scrollX;
+    this.scrollY = scrollY;
+    if (this.active) {
+      this.positionInput();
+    }
+  }
+
+  /** Update dependencies (call on sheet change, layout rebuild, etc.). */
+  updateDeps(deps: Partial<CellEditorDeps>): void {
+    Object.assign(this.deps, deps);
+  }
+
+  /** Clean up DOM elements. */
+  destroy(): void {
+    this.input.removeEventListener("input", this.handleInput);
+    this.input.removeEventListener("keydown", this.handleKeyDown);
+    this.input.removeEventListener("blur", this.handleBlur);
+    if (this.input.parentElement === this.container) {
+      this.container.removeChild(this.input);
+    }
+    if (this.acDropdown.parentElement === this.container) {
+      this.container.removeChild(this.acDropdown);
+    }
+  }
+
+  // ===========================================================================
+  // Private — lifecycle
+  // ===========================================================================
+
+  private show(initialText: string): void {
+    this.active = true;
+    this.input.value = initialText;
+    this.positionInput();
+    this.input.style.display = "block";
+    requestAnimationFrame(() => {
+      this.input.focus();
+      this.input.setSelectionRange(initialText.length, initialText.length);
+    });
+  }
+
+  private hide(): void {
+    this.active = false;
+    this.input.style.display = "none";
+    this.input.value = "";
+    this.hideAutocomplete();
+    this.deps.onDone?.();
+  }
+
+  private positionInput(): void {
+    const { layout, selection, workbook, sheetIndex } = this.deps;
+    const { activeCell } = selection.getState();
+    const { row, col } = activeCell;
+
+    const freezeRow = layout.freeze.row;
+    const freezeCol = layout.freeze.col;
+
+    // Frozen cells don't scroll
+    const isFrozenRow = row <= freezeRow;
+    const isFrozenCol = col <= freezeCol;
+
+    const cellX = layout.colX[col] - (isFrozenCol ? 0 : this.scrollX);
+    const cellY = layout.rowY[row] - (isFrozenRow ? 0 : this.scrollY);
+    const cellW = layout.colW[col];
+    const cellH = layout.rowH[row];
+
+    // Remember the cell's natural box so the auto-grow logic in adjustSize()
+    // can clamp to a minimum and grow from there.
+    this.baseCellW = Math.max(cellW, 60);
+    this.baseCellH = cellH;
+
+    Object.assign(this.input.style, {
+      left: `${cellX}px`,
+      top: `${cellY}px`,
+      width: `${this.baseCellW}px`,
+      height: `${this.baseCellH}px`,
+    });
+
+    // Match cell font
+    const ref = rowColToRef(row, col);
+    const cell = workbook.sheets[sheetIndex].getCell(ref);
+    const style = workbook.styles.get(cell?.styleIndex ?? 0);
+    const fontSize = style.fontSize ?? 11;
+    const fontName = style.fontName ?? "Calibri, sans-serif";
+    const bold = style.fontBold ? "bold" : "normal";
+    const italic = style.fontItalic ? "italic" : "normal";
+    this.input.style.font = `${italic} ${bold} ${fontSize}px ${fontName}`;
+    this.input.style.color = style.fontColor ?? "#000000";
+
+    const hAlign = style.horizontalAlign;
+    this.input.style.textAlign = hAlign === "center" ? "center" : hAlign === "right" ? "right" : "left";
+  }
+
+  private commitValue(text: string): void {
+    const { workbook, sheetIndex, history, engine, selection } = this.deps;
+    const { activeCell } = selection.getState();
+
+    // Skip commit if the text hasn't changed from the cell's current content.
+    // This prevents formula cells from being re-committed on blur (which would
+    // set value=null and lose the cached result when no engine is present).
+    const ref = rowColToRef(activeCell.row, activeCell.col);
+    const cell = workbook.sheets[sheetIndex].getCell(ref);
+    if (cell) {
+      const currentText = cell.formula ? `=${cell.formula}` : String(cell.value ?? "");
+      if (text === currentText) return;
+    }
+
+    // Data validation check
+    const sheet = workbook.sheets[sheetIndex];
+    if (sheet.dataValidations.length > 0 && !text.startsWith("=")) {
+      const dv = findValidationForCell(sheet.dataValidations, activeCell.row, activeCell.col);
+      if (dv && !validateCellValue(text, dv)) {
+        const style = dv.errorStyle ?? "stop";
+        const title = dv.errorTitle ?? "Invalid Value";
+        const message = dv.errorMessage ?? "The value you entered is not valid.";
+        if (style === "stop") {
+          // Stop: block commit, notify parent
+          this.deps.onValidationError?.({
+            title,
+            message,
+            style,
+            onRetry: () => {
+              this.show(text);
+            },
+          });
+          return;
+        }
+        // Warning / Information: commit but notify
+        this.deps.onValidationError?.({
+          title,
+          message,
+          style,
+          onRetry: () => { this.show(text); },
+        });
+      }
+    }
+
+    const cmd = setCellValueCommand(
+      workbook,
+      engine,
+      sheetIndex,
+      activeCell.row,
+      activeCell.col,
+      text,
+    );
+    history.execute(cmd);
+  }
+
+  // ===========================================================================
+  // DOM event handlers (arrow functions for stable `this`)
+  // ===========================================================================
+
+  private handleInput = (): void => {
+    const text = this.input.value;
+    this.deps.selection.updateEditText(text);
+    this.deps.onTextChange?.(text);
+    this.updateAutocomplete(text);
+    this.adjustSize();
+  };
+
+  /**
+   * Auto-grow the textarea to fit its content. Width grows to the longest
+   * line (capped to viewport); height grows for newlines. Falls back to the
+   * cell's natural box on empty input.
+   */
+  private adjustSize(): void {
+    const value = this.input.value;
+    if (!value) {
+      this.input.style.width = `${this.baseCellW}px`;
+      this.input.style.height = `${this.baseCellH}px`;
+      return;
+    }
+    // Measure the widest line via a hidden span using the same font.
+    const measurer = document.createElement("span");
+    measurer.style.position = "absolute";
+    measurer.style.visibility = "hidden";
+    measurer.style.whiteSpace = "pre";
+    measurer.style.font = this.input.style.font;
+    measurer.textContent = value.split("\n").reduce((longest, line) =>
+      line.length > longest.length ? line : longest, "");
+    document.body.appendChild(measurer);
+    const textWidth = measurer.getBoundingClientRect().width;
+    document.body.removeChild(measurer);
+
+    const padX = 8;
+    const newW = Math.max(this.baseCellW, Math.ceil(textWidth) + padX);
+    // Cap at the viewport — long content gets a horizontal scrollbar in the
+    // cell rather than overflowing the page.
+    const containerWidth = this.container.getBoundingClientRect().width || 1200;
+    this.input.style.width = `${Math.min(newW, containerWidth - 20)}px`;
+
+    // Height: scrollHeight includes content height regardless of overflow,
+    // so resetting to 0 first lets it shrink as well as grow.
+    this.input.style.height = "0px";
+    const sh = this.input.scrollHeight;
+    this.input.style.height = `${Math.max(this.baseCellH, sh)}px`;
+    this.input.style.overflow = "hidden";
+  }
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    // Autocomplete navigation
+    if (this.acItems.length > 0) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.acIndex = Math.min(this.acIndex + 1, this.acItems.length - 1);
+        this.renderAutocomplete();
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.acIndex = Math.max(this.acIndex - 1, 0);
+        this.renderAutocomplete();
+        return;
+      }
+      if ((event.key === "Enter" || event.key === "Tab") && this.acIndex >= 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.acceptAutocomplete(this.acItems[this.acIndex]);
+        return;
+      }
+      if (event.key === "Escape") {
+        this.hideAutocomplete();
+        event.stopPropagation();
+        return;
+      }
+    }
+    // F4 cycles the cell reference at the cursor through absolute states
+    // (A1 → $A$1 → A$1 → $A1 → A1) — Excel parity for formula authoring.
+    // Only active in formula mode; outside a formula F4 must fall through so
+    // the host can use it for its own shortcut (e.g., redo).
+    if (event.key === "F4" && this.input.value.startsWith("=")) {
+      event.preventDefault();
+      event.stopPropagation();
+      const cursor = this.input.selectionStart ?? this.input.value.length;
+      const result = cycleReferenceAtCursor(this.input.value, cursor);
+      if (result) {
+        this.input.value = result.text;
+        this.input.setSelectionRange(result.cursor, result.cursor);
+        this.deps.selection.updateEditText(result.text);
+        this.deps.onTextChange?.(result.text);
+        this.adjustSize();
+      }
+      return;
+    }
+    // Alt+Enter inserts a literal newline inside the cell (multi-line text).
+    if (event.key === "Enter" && event.altKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      const start = this.input.selectionStart ?? this.input.value.length;
+      const end = this.input.selectionEnd ?? this.input.value.length;
+      const next = this.input.value.slice(0, start) + "\n" + this.input.value.slice(end);
+      this.input.value = next;
+      this.input.setSelectionRange(start + 1, start + 1);
+      this.deps.selection.updateEditText(next);
+      this.deps.onTextChange?.(next);
+      this.adjustSize();
+      return;
+    }
+    // Enter, Tab, Escape bubble up to the parent's keyboard handler
+    // which calls selection.commitEdit()/cancelEdit()/move().
+    // All other keys stay local to the input.
+    if (event.key !== "Enter" && event.key !== "Tab" && event.key !== "Escape") {
+      event.stopPropagation();
+    }
+  };
+
+  // ===========================================================================
+  // Autocomplete
+  // ===========================================================================
+
+  private updateAutocomplete(text: string): void {
+    // Formula mode: function-name suggestions based on the token at the cursor.
+    if (text.startsWith("=")) {
+      const cursor = this.input.selectionStart ?? text.length;
+      const { suggestions, tokenStart, tokenEnd } = getFormulaSuggestions(text, cursor);
+      if (suggestions.length === 0) {
+        this.hideAutocomplete();
+        return;
+      }
+      this.fnSuggestions = suggestions;
+      this.fnTokenRange = { start: tokenStart, end: tokenEnd };
+      this.acItems = suggestions.map((s) => s.name);
+      this.acIndex = -1;
+      this.renderAutocomplete();
+      return;
+    }
+    // Reset formula-mode state when not in a formula.
+    this.fnSuggestions = [];
+    this.fnTokenRange = null;
+    if (!text) {
+      this.hideAutocomplete();
+      return;
+    }
+    const { workbook, sheetIndex, selection } = this.deps;
+    const sheet = workbook.sheets[sheetIndex];
+    const col = selection.getState().activeCell.col;
+    const currentRow = selection.getState().activeCell.row;
+
+    // Collect unique non-empty string values from this column
+    const seen = new Set<string>();
+    for (const [ref, cell] of sheet.cells) {
+      const rc = refToRowCol(ref);
+      if (!rc || rc.col !== col || rc.row === currentRow) continue;
+      const dv = cell.displayValue;
+      if (dv && typeof cell.value === "string") seen.add(dv);
+    }
+
+    // Filter by case-insensitive prefix
+    const prefix = text.toLowerCase();
+    const matches = Array.from(seen)
+      .filter((v) => v.toLowerCase().startsWith(prefix) && v.toLowerCase() !== prefix)
+      .sort((a, b) => a.localeCompare(b))
+      .slice(0, 8);
+
+    if (matches.length === 0) {
+      this.hideAutocomplete();
+      return;
+    }
+
+    this.acItems = matches;
+    this.acIndex = -1;
+    this.renderAutocomplete();
+  }
+
+  private renderAutocomplete(): void {
+    this.acDropdown.innerHTML = "";
+    for (let i = 0; i < this.acItems.length; i++) {
+      const item = document.createElement("div");
+      item.textContent = this.acItems[i];
+      Object.assign(item.style, {
+        padding: "4px 8px",
+        cursor: "pointer",
+        backgroundColor: i === this.acIndex ? "#EFF6FF" : "transparent",
+        color: "#1F2937",
+      });
+      item.addEventListener("mousedown", (e) => {
+        e.preventDefault(); // prevent blur
+        this.acceptAutocomplete(this.acItems[i]);
+      });
+      item.addEventListener("mouseenter", () => {
+        this.acIndex = i;
+        this.renderAutocomplete();
+      });
+      this.acDropdown.appendChild(item);
+    }
+
+    // Position below the input
+    const inputRect = this.input.getBoundingClientRect();
+    const containerRect = this.container.getBoundingClientRect();
+    Object.assign(this.acDropdown.style, {
+      display: "block",
+      left: `${inputRect.left - containerRect.left}px`,
+      top: `${inputRect.bottom - containerRect.top}px`,
+      width: `${Math.max(inputRect.width, 120)}px`,
+    });
+  }
+
+  private hideAutocomplete(): void {
+    this.acItems = [];
+    this.acIndex = -1;
+    this.fnSuggestions = [];
+    this.fnTokenRange = null;
+    this.acDropdown.style.display = "none";
+    this.acDropdown.innerHTML = "";
+  }
+
+  private acceptAutocomplete(value: string): void {
+    // Formula-mode acceptance splices in the function name + "(" at the
+    // current token range. Column-value mode replaces the whole input.
+    if (this.fnSuggestions.length > 0 && this.fnTokenRange) {
+      const suggestion = this.fnSuggestions.find((s) => s.name === value);
+      if (suggestion) {
+        const { text, cursor } = applyFormulaSuggestion(
+          this.input.value,
+          suggestion,
+          this.fnTokenRange,
+        );
+        this.input.value = text;
+        this.deps.selection.updateEditText(text);
+        this.deps.onTextChange?.(text);
+        this.input.setSelectionRange(cursor, cursor);
+        this.hideAutocomplete();
+        this.adjustSize();
+        return;
+      }
+    }
+    this.input.value = value;
+    this.deps.selection.updateEditText(value);
+    this.deps.onTextChange?.(value);
+    this.hideAutocomplete();
+    // Move cursor to end
+    this.input.setSelectionRange(value.length, value.length);
+    this.adjustSize();
+  }
+
+  private handleBlur = (): void => {
+    if (this.active) {
+      this.deps.selection.commitEdit();
+    }
+  };
+}

package/src/clipboard.test.ts

@@ -0,0 +1,145 @@
+import {
+  copyRange,
+  pasteRange,
+  clipboardToText,
+  clipboardToHtml,
+  adjustFormulaRefs,
+} from "./clipboard";
+import { WorkbookModel, SheetModel, StyleRegistry } from "./workbook_model";
+
+function makeWorkbook(): WorkbookModel {
+  const styles = new StyleRegistry();
+  const sheet = new SheetModel("Sheet1", styles);
+  return new WorkbookModel({ sheets: [sheet], activeSheetIndex: 0, styles });
+}
+
+describe("copyRange", () => {
+  test("copies cell data", () => {
+    const wb = makeWorkbook();
+    wb.sheets[0].set("A1", 10);
+    wb.sheets[0].set("B1", 20);
+    wb.sheets[0].set("A2", 30);
+
+    const clip = copyRange(wb, 0, 1, 1, 2, 2);
+    expect(clip.rowCount).toBe(2);
+    expect(clip.colCount).toBe(2);
+    expect(clip.cells[0][0]?.value).toBe(10);
+    expect(clip.cells[0][1]?.value).toBe(20);
+    expect(clip.cells[1][0]?.value).toBe(30);
+    expect(clip.cells[1][1]).toBeUndefined(); // B2 is empty
+  });
+
+  test("copies formulas", () => {
+    const wb = makeWorkbook();
+    wb.sheets[0].set("A1", null, undefined, undefined, "SUM(B1:B5)");
+
+    const clip = copyRange(wb, 0, 1, 1, 1, 1);
+    expect(clip.cells[0][0]?.formula).toBe("SUM(B1:B5)");
+  });
+
+  test("isCut flag", () => {
+    const wb = makeWorkbook();
+    wb.sheets[0].set("A1", 10);
+
+    const copy = copyRange(wb, 0, 1, 1, 1, 1, false);
+    expect(copy.isCut).toBe(false);
+
+    const cut = copyRange(wb, 0, 1, 1, 1, 1, true);
+    expect(cut.isCut).toBe(true);
+  });
+});
+
+describe("pasteRange", () => {
+  test("pastes cell data to target", () => {
+    const wb = makeWorkbook();
+    wb.sheets[0].set("A1", 10);
+    wb.sheets[0].set("B1", 20);
+
+    const clip = copyRange(wb, 0, 1, 1, 1, 2);
+    const result = pasteRange(wb, clip, 0, 3, 1); // Paste to row 3
+
+    expect(wb.sheets[0].getCell("A3")?.value).toBe(10);
+    expect(wb.sheets[0].getCell("B3")?.value).toBe(20);
+    expect(result.written).toHaveLength(2);
+  });
+
+  test("adjusts formula references on copy-paste", () => {
+    const wb = makeWorkbook();
+    wb.sheets[0].set("A1", null, undefined, undefined, "SUM(B1:B5)");
+
+    const clip = copyRange(wb, 0, 1, 1, 1, 1);
+    pasteRange(wb, clip, 0, 3, 3); // Paste to C3 (dRow=2, dCol=2)
+
+    expect(wb.sheets[0].getCell("C3")?.formula).toBe("SUM(D3:D7)");
+  });
+
+  test("does not adjust formula on cut-paste", () => {
+    const wb = makeWorkbook();
+    wb.sheets[0].set("A1", null, undefined, undefined, "SUM(B1:B5)");
+
+    const clip = copyRange(wb, 0, 1, 1, 1, 1, true);
+    pasteRange(wb, clip, 0, 3, 3);
+
+    expect(wb.sheets[0].getCell("C3")?.formula).toBe("SUM(B1:B5)");
+  });
+});
+
+describe("clipboardToText", () => {
+  test("converts to tab-separated text", () => {
+    const wb = makeWorkbook();
+    wb.sheets[0].set("A1", "Hello");
+    wb.sheets[0].set("B1", "World");
+    wb.sheets[0].set("A2", 42);
+
+    const clip = copyRange(wb, 0, 1, 1, 2, 2);
+    const text = clipboardToText(clip);
+    expect(text).toBe("Hello\tWorld\n42\t");
+  });
+});
+
+describe("clipboardToHtml", () => {
+  test("generates HTML table", () => {
+    const wb = makeWorkbook();
+    const boldIdx = wb.styles.intern({ fontBold: true });
+    wb.sheets[0].set("A1", "Bold", wb.styles.get(boldIdx));
+    wb.sheets[0].set("B1", "Normal");
+
+    const clip = copyRange(wb, 0, 1, 1, 1, 2);
+    const html = clipboardToHtml(clip, wb.styles);
+
+    expect(html).toContain("<table>");
+    expect(html).toContain("font-weight:bold");
+    expect(html).toContain("Bold");
+    expect(html).toContain("Normal");
+  });
+});
+
+describe("adjustFormulaRefs", () => {
+  test("adjusts simple cell ref", () => {
+    expect(adjustFormulaRefs("A1+B2", 2, 3)).toBe("D3+E4");
+  });
+
+  test("adjusts range ref", () => {
+    expect(adjustFormulaRefs("SUM(A1:A10)", 5, 0)).toBe("SUM(A6:A15)");
+  });
+
+  test("preserves absolute column ($A)", () => {
+    expect(adjustFormulaRefs("$A1", 0, 3)).toBe("$A1");
+  });
+
+  test("preserves absolute row ($1)", () => {
+    expect(adjustFormulaRefs("A$1", 3, 0)).toBe("A$1");
+  });
+
+  test("preserves fully absolute ($A$1)", () => {
+    expect(adjustFormulaRefs("$A$1", 5, 5)).toBe("$A$1");
+  });
+
+  test("returns #REF! for out-of-bounds", () => {
+    expect(adjustFormulaRefs("A1", -1, 0)).toBe("#REF!");
+  });
+
+  test("handles mixed refs in formula", () => {
+    expect(adjustFormulaRefs("A1+$B$2+C3", 1, 1)).toBe("B2+$B$2+D4");
+  });
+});