@dimarborda/xlsx-editor 0.1.0 → 0.3.0

package/src/engine.js

@@ -73,6 +73,12 @@ function columnNumber(col) {
   throw new TypeError(`Columna no válida: ${col} (usa una letra como 'B' o un número desde 1).`);
 }
 
+/** A row or column number, or a count, for the engine */
+function lineNumber(value, what) {
+  if (!Number.isInteger(value) || value < 0) throw new TypeError(`${what} debe ser un entero positivo: ${value}`);
+  return value;
+}
+
 /** One worksheet of a workbook */
 export class Sheet {
   /**
@@ -96,6 +102,11 @@ export class Sheet {
     return this.getCell(ref).value;
   }
 
+  /** The cells of a range (`A1:C3`), by row: their type, value and formula, if any */
+  getCells(range) {
+    return JSON.parse(call(() => this.workbook._engine.range_json(this.index, range))).map(row => row.map(toCell));
+  }
+
   /** The values of a range (`A1:C3`), by row */
   getValues(range) {
     return JSON.parse(call(() => this.workbook._engine.range_json(this.index, range))).map(row => row.map(c => toCell(c).value));
@@ -132,8 +143,9 @@ export class Sheet {
 
   /**
    * Drawing API: every cell that shows something, with the text Excel shows for it in the
-   * language `locale`, as `[row, col, style, text, kind, color?]` (`kind`: `n`, `s`, `b`, `e`
-   * or `''` for an empty cell with a format; `style` indexes `workbook.styleView().xfs`)
+   * language `locale`, as `[row, col, style, text, kind, color?, number?]` (`kind`: `n`, `s`,
+   * `b`, `e` or `''` for an empty cell with a format; `style` indexes
+   * `workbook.styleView().xfs`; `number` is the value of `n` cells, dates as serial numbers)
    * @param {string} [locale]
    */
   cellViews(locale = 'en') {
@@ -183,6 +195,114 @@ export class Sheet {
     call(() => this.workbook._engine.set_column_width(this.index, columnNumber(a), columnNumber(b), width));
   }
 
+  /**
+   * Moves whole rows, as Excel's "cut and insert": `count` rows from `first` go before the row
+   * `before` (numbered as they are now). Formats, heights, merged cells, formulas of the whole
+   * workbook, defined names, charts, tables, validations, conditional formats, images and
+   * comments follow. Throws, and changes nothing, when it would tear merged cells, an array
+   * formula, a table or a filter. Returns where the first row ends up.
+   * @param {number} first
+   * @param {number} count
+   * @param {number} before
+   */
+  moveRows(first, count, before) {
+    const [a, n, b] = [lineNumber(first, 'La fila'), lineNumber(count, 'La cantidad'), lineNumber(before, 'El destino')];
+    return call(() => this.workbook._engine.move_rows(this.index, a, n, b));
+  }
+
+  /**
+   * Moves whole columns (see `moveRows`); `first` and `before` are letters (`'B'`) or numbers
+   * @param {string | number} first
+   * @param {number} count
+   * @param {string | number} before
+   */
+  moveColumns(first, count, before) {
+    const [a, n, b] = [columnNumber(first), lineNumber(count, 'La cantidad'), columnNumber(before)];
+    return call(() => this.workbook._engine.move_columns(this.index, a, n, b));
+  }
+
+  /**
+   * Inserts `count` empty rows before the row `before`, with the height and format of the one
+   * above. Formulas, names, charts and everything that `moveRows` follows are updated; ranges and
+   * merged cells that the new rows fall inside grow, also tables. Returns `before`.
+   * @param {number} before
+   * @param {number} [count]
+   */
+  insertRows(before, count = 1) {
+    const [b, n] = [lineNumber(before, 'La fila'), lineNumber(count, 'La cantidad')];
+    return call(() => this.workbook._engine.insert_rows(this.index, b, n));
+  }
+
+  /** Inserts empty columns before `before` (letters or number), like the one to their left */
+  insertColumns(before, count = 1) {
+    const [b, n] = [columnNumber(before), lineNumber(count, 'La cantidad')];
+    return call(() => this.workbook._engine.insert_columns(this.index, b, n));
+  }
+
+  /**
+   * Deletes `count` rows from `first`. What pointed only at them becomes `#REF!`; ranges and
+   * merged cells shrink, also tables. Returns `first`.
+   * @param {number} first
+   * @param {number} [count]
+   */
+  deleteRows(first, count = 1) {
+    const [a, n] = [lineNumber(first, 'La fila'), lineNumber(count, 'La cantidad')];
+    return call(() => this.workbook._engine.delete_rows(this.index, a, n));
+  }
+
+  /** Deletes columns from `first` (letters or number), see `deleteRows` */
+  deleteColumns(first, count = 1) {
+    const [a, n] = [columnNumber(first), lineNumber(count, 'La cantidad')];
+    return call(() => this.workbook._engine.delete_columns(this.index, a, n));
+  }
+
+  /**
+   * Height of a row or rows (`3`, `'3:5'`) in points; `null` goes back to the automatic height
+   * @param {string | number} rows
+   * @param {number | null} height
+   */
+  setRowHeight(rows, height) {
+    const [a, b = a] = typeof rows === 'string' ? rows.split(':').map(Number) : [rows];
+    if (height !== null && (typeof height !== 'number' || !Number.isFinite(height))) throw new TypeError('El alto debe ser un número de puntos o null.');
+    const [first, last] = [lineNumber(a, 'La fila'), lineNumber(b, 'La fila')];
+    call(() => this.workbook._engine.set_row_height(this.index, first, last, height ?? undefined));
+  }
+
+  /**
+   * Hides or shows rows (`3`, `'3:5'`); they keep their cells and height
+   * @param {string | number} rows
+   * @param {boolean} hidden
+   */
+  setRowsHidden(rows, hidden) {
+    const [a, b = a] = typeof rows === 'string' ? rows.split(':').map(Number) : [rows];
+    const [first, last] = [lineNumber(a, 'La fila'), lineNumber(b, 'La fila')];
+    call(() => this.workbook._engine.set_rows_hidden(this.index, first, last, !!hidden));
+  }
+
+  /**
+   * Hides or shows columns (`'B'`, `'B:D'`, `2`); they keep their cells and width
+   * @param {string | number} columns
+   * @param {boolean} hidden
+   */
+  setColumnsHidden(columns, hidden) {
+    const [a, b = a] = typeof columns === 'string' ? columns.split(':') : [columns];
+    const [first, last] = [columnNumber(a), columnNumber(b)];
+    call(() => this.workbook._engine.set_columns_hidden(this.index, first, last, !!hidden));
+  }
+
+  /**
+   * Fills `target` from `source`, the cells at one of its ends, as Excel's fill handle: formats
+   * repeat, formulas move their references, and with `series` (by default) numbers continue their
+   * trend, one date goes on day by day, texts ending in a number count on and names of months and
+   * days follow their order. Refuses to fill over merged cells.
+   * @param {string} source e.g. `A1:A2`
+   * @param {string} target e.g. `A1:A20`
+   * @param {{series?: boolean}} [options]
+   */
+  fill(source, target, { series = true } = {}) {
+    call(() => this.workbook._engine.fill_range(this.index, source, target, !!series));
+  }
+
   /** Merges a range into one cell; only its first cell may hold a value */
   mergeCells(range) {
     call(() => this.workbook._engine.merge_cells(this.index, range));
@@ -223,6 +343,16 @@ export class Workbook {
     return JSON.parse(call(() => this._engine.styles_view_json()));
   }
 
+  /**
+   * Numbers as a cell format shows them: `style` indexes `styleView().xfs`
+   * @param {number} style
+   * @param {number[]} values
+   * @param {string} [locale]
+   */
+  formatNumbers(style, values, locale = 'en') {
+    return call(() => this._engine.format_numbers(style, Float64Array.from(values), locale));
+  }
+
   /**
    * A worksheet by name (ignoring case) or by tab position, from 0
    * @param {string | number} nameOrIndex
@@ -241,6 +371,43 @@ export class Workbook {
     return new Sheet(this, index, all[index].name);
   }
 
+  /**
+   * Adds an empty worksheet after the tab `after` (name or position; at the end without it).
+   * Names follow Excel's rules: 1–31 characters, none of `[ ] : * ? / \`, unique ignoring case.
+   * Returns the new sheet.
+   * @param {string} name
+   * @param {string | number} [after]
+   */
+  addSheet(name, after) {
+    const index = call(() => this._engine.add_sheet(String(name), after === undefined || after === null ? undefined : this.#tabIndex(after)));
+    return this.sheet(index);
+  }
+
+  /**
+   * Renames a tab (name or position) and the references to it in formulas, defined names,
+   * data validations, conditional formats and charts; returns how many of those changed
+   * @param {string | number} sheet
+   * @param {string} name
+   */
+  renameSheet(sheet, name) {
+    return call(() => this._engine.rename_sheet(this.#tabIndex(sheet), String(name)));
+  }
+
+  /** Position of a tab by name (ignoring case) or position */
+  #tabIndex(nameOrIndex) {
+    const all = JSON.parse(this._engine.sheets_json());
+    if (typeof nameOrIndex === 'number') {
+      if (!Number.isInteger(nameOrIndex) || nameOrIndex < 0 || nameOrIndex >= all.length) {
+        throw new RangeError(`El libro tiene ${all.length} hoja(s); no existe la hoja ${nameOrIndex}.`);
+      }
+      return nameOrIndex;
+    }
+    let index = all.findIndex(s => s.name === nameOrIndex);
+    if (index < 0) index = all.findIndex(s => s.name.toLowerCase() === String(nameOrIndex).toLowerCase());
+    if (index < 0) throw new Error(`El libro no tiene ninguna hoja llamada '${nameOrIndex}'.`);
+    return index;
+  }
+
   /**
    * Replaces `{{FIELD}}` placeholders (also `{{ FIELD }}` and `{{FIELD: hint}}`) in every text
    * of the workbook; returns how many

package/src/find.js

@@ -0,0 +1,37 @@
+// Searching cell texts as Excel does: `*` any text, `?` one character, `~` takes either literally.
+// No DOM here, so it is testable in Node.
+
+/**
+ * The search as a global regular expression; null for an empty search
+ * @param {string} query
+ * @param {{matchCase?: boolean, wholeCell?: boolean}} [options]
+ */
+export function searchPattern(query, { matchCase = false, wholeCell = false } = {}) {
+  if (!query) return null;
+  // With the `u` flag only characters with a meaning may be escaped
+  const literal = c => c.replace(/[.*+?^${}()|[\]\\/]/gu, '\\$&');
+  let source = '';
+  const chars = [...query];
+  for (let i = 0; i < chars.length; i++) {
+    const c = chars[i];
+    if (c === '~' && '*?~'.includes(chars[i + 1] ?? ' ')) source += literal(chars[++i]);
+    else if (c === '*') source += '[\\s\\S]*';
+    else if (c === '?') source += '[\\s\\S]';
+    else source += literal(c);
+  }
+  return new RegExp(wholeCell ? `^(?:${source})$` : source, matchCase ? 'gu' : 'giu');
+}
+
+/** Whether the pattern is in a text (a global expression remembers where it stopped: not here) */
+export function matches(pattern, text) {
+  pattern.lastIndex = 0;
+  const found = pattern.test(text);
+  pattern.lastIndex = 0;
+  return found;
+}
+
+/** The text with what the pattern finds replaced, taken literally */
+export function replaceMatches(pattern, text, replacement) {
+  pattern.lastIndex = 0;
+  return text.replace(pattern, found => (found === '' ? '' : replacement));
+}

package/src/grid.js

@@ -12,6 +12,11 @@ export function colWidthToPx(width, mdw) {
   return Math.trunc(((256 * width + Math.trunc(128 / mdw)) / 256) * mdw);
 }
 
+/** Pixels to the width in characters `colWidthToPx` turns back into those pixels */
+export function pxToColWidth(px, mdw) {
+  return Math.round((px / mdw) * 256) / 256;
+}
+
 /**
  * Default column width in pixels: `defaultColWidth` when the sheet sets it, otherwise
  * `baseColWidth` characters (8 by default) plus 5 pixels of padding, rounded up to a multiple
@@ -65,6 +70,12 @@ export class Axis {
     return this.offset(this.count + 1);
   }
 
+  /** The same axis with room for `count` rows/columns, up to `max` (sizes are kept) */
+  grown(count, max) {
+    const next = Math.min(max, Math.max(this.count, count));
+    return next === this.count ? this : new Axis(next, this.defaultSize, this.custom);
+  }
+
   /** The row/column under position `pos` (clamped to the grid) */
   indexAt(pos) {
     if (pos <= 0) return 1;
@@ -79,6 +90,10 @@ export class Axis {
   }
 }
 
+/** Last row and column of a worksheet */
+export const MAX_ROWS = 1_048_576;
+export const MAX_COLS = 16_384;
+
 /** Column letters: 1 → A, 27 → AA */
 export function columnName(col) {
   let name = '';
@@ -133,7 +148,91 @@ export function sheetAxes(layout, used, mdw, defaultRowPt = 15) {
     lastRow = Math.max(lastRow, last.row);
     lastCol = Math.max(lastCol, last.col);
   }
-  const rows = Math.min(1_048_576, Math.max(lastRow + 100, 200));
-  const cols = Math.min(16_384, Math.max(lastCol, used.maxCol) + 12, 16_384);
+  const rows = Math.min(MAX_ROWS, Math.max(lastRow + 100, 200));
+  const cols = Math.min(MAX_COLS, Math.max(lastCol, used.maxCol) + 12);
   return { rows: new Axis(rows, rowPx, rowSizes), cols: new Axis(Math.max(cols, 26), colPx, colSizes) };
 }
+
+/**
+ * What Excel's status bar says about the cells of a range: how many have something and the sum,
+ * average, smallest and largest of the numbers. Hidden rows and columns do not count, and any
+ * error leaves only the count (as Excel does). `style` is the format of the first number. `null`
+ * when the range is empty.
+ * @param {Map<number, {kind: string, style: number, number?: number}>} cells by `row * 16385 + col`
+ * @param {{first: {row: number, col: number}, last: {row: number, col: number}}} range
+ * @param {{rows?: Axis, cols?: Axis}} [axes]
+ */
+export function rangeStats(cells, { first, last }, { rows, cols } = {}) {
+  let count = 0;
+  let numbers = 0;
+  let sum = 0;
+  let min = Infinity;
+  let max = -Infinity;
+  let error = false;
+  let style = 0;
+  let firstAt = Infinity;
+  const visit = (cell, row, col) => {
+    if (!cell || !cell.kind || rows?.size(row) === 0 || cols?.size(col) === 0) return;
+    count++;
+    if (cell.kind === 'e') error = true;
+    if (cell.number === undefined) return;
+    numbers++;
+    sum += cell.number;
+    min = Math.min(min, cell.number);
+    max = Math.max(max, cell.number);
+    const at = row * 16_385 + col;
+    if (at < firstAt) {
+      firstAt = at;
+      style = cell.style;
+    }
+  };
+  // Whichever is smaller: the cells of the range or those of the sheet
+  if ((last.row - first.row + 1) * (last.col - first.col + 1) <= cells.size) {
+    for (let r = first.row; r <= last.row; r++) {
+      for (let c = first.col; c <= last.col; c++) visit(cells.get(r * 16_385 + c), r, c);
+    }
+  } else {
+    for (const [at, cell] of cells) {
+      const r = Math.floor(at / 16_385);
+      const c = at - r * 16_385;
+      if (r >= first.row && r <= last.row && c >= first.col && c <= last.col) visit(cell, r, c);
+    }
+  }
+  if (!count) return null;
+  if (error || !numbers) return { count, numbers: error ? 0 : numbers, sum: null, average: null, min: null, max: null, style };
+  return { count, numbers, sum, average: sum / numbers, min, max, style };
+}
+
+/**
+ * Where Ctrl+arrow lands from the line `from`, as Excel does: to the end of the block of filled
+ * cells it is in, else to the next filled cell, else to the end of the sheet
+ * @param {(line: number) => boolean} filled
+ * @param {number} from
+ * @param {1 | -1} step
+ * @param {number} limit last line of the sheet
+ */
+export function dataEdge(filled, from, step, limit) {
+  const inside = i => i >= 1 && i <= limit;
+  if (!inside(from + step)) return from;
+  let i = from;
+  if (filled(from) && filled(from + step)) {
+    while (inside(i + step) && filled(i + step)) i += step;
+    return i;
+  }
+  for (i = from + step; inside(i); i += step) if (filled(i)) return i;
+  return step < 0 ? 1 : limit;
+}
+
+/**
+ * The far end of the run of numbers next to the line `from`, going by `step`; null when the next
+ * line has none. Autosum takes that run.
+ * @param {(line: number) => boolean} isNumber
+ * @param {number} from
+ * @param {1 | -1} step
+ * @param {number} limit last line of the sheet
+ */
+export function numberRun(isNumber, from, step, limit) {
+  let end = null;
+  for (let i = from + step; i >= 1 && i <= limit && isNumber(i); i += step) end = i;
+  return end;
+}

package/src/index.d.ts

@@ -11,6 +11,8 @@ export interface XlsxEditorOptions {
   tabs?: boolean;
   /** Bar above the grid with the selected cell and its content; default true */
   formulaBar?: boolean;
+  /** Bar below the tabs with the count, sum and average of the selection; default true */
+  statusBar?: boolean;
   /** A viewer: cells are selected and copied but not edited; default false */
   readOnly?: boolean;
   /** Where `xlsx_engine_bg.wasm` is served from, when the bundler does not serve it */
@@ -30,6 +32,41 @@ export interface Selection {
   active: CellPosition;
   /** Text the active cell shows */
   text: string;
+  /** Whole rows, whole columns or the whole sheet selected from the headers */
+  whole: 'row' | 'col' | 'all' | null;
+}
+
+/** What the status bar says about the selection */
+export interface SelectionStats {
+  /** Cells that have something */
+  count: number;
+  /** Of them, numbers (dates count, as serial numbers) */
+  numbers: number;
+  /** `null` without numbers, or when an error is selected */
+  sum: number | null;
+  average: number | null;
+  min: number | null;
+  max: number | null;
+}
+
+export interface FindOptions {
+  matchCase?: boolean;
+  /** Only cells whose whole text matches */
+  wholeCell?: boolean;
+  /** The active sheet (default) or every worksheet */
+  scope?: 'sheet' | 'workbook';
+  /** Look in the formula of formula cells instead of the text they show */
+  inFormulas?: boolean;
+}
+
+export interface FindHit {
+  sheet: number;
+  sheetName: string;
+  ref: string;
+  row: number;
+  col: number;
+  /** The text that matched */
+  text: string;
 }
 
 /** Cells changed from the grid (typing, deleting, pasting, cutting) or by undo and redo */
@@ -39,9 +76,9 @@ export interface ChangeDetail {
   index: number;
   /** Range changed, e.g. `B3` or `A1:C4` */
   range: string;
-  /** Every cell of `range` with its new value (`null` when empty) */
+  /** Every cell of `range` with its new value (`null` when empty); empty above 200 000 cells */
   cells: { ref: string; value: CellValue }[];
-  source: 'edit' | 'clear' | 'paste' | 'cut' | 'undo' | 'redo';
+  source: 'edit' | 'clear' | 'paste' | 'cut' | 'move' | 'insert' | 'delete' | 'fill' | 'replace' | 'undo' | 'redo';
 }
 
 export interface XlsxEditorEventMap {
@@ -49,7 +86,7 @@ export interface XlsxEditorEventMap {
   sheetchange: CustomEvent<{ index: number; name: string }>;
   selectionchange: CustomEvent<Selection>;
   change: CustomEvent<ChangeDetail>;
-  /** A change the engine refused (e.g. overwriting the source of a shared formula) */
+  /** A change the engine refused (e.g. moving a row through merged cells) */
   error: CustomEvent<{ error: Error }>;
 }
 
@@ -65,10 +102,55 @@ export class XlsxEditor extends EventTarget {
   readonly sheetIndex: number;
   readonly sheetName: string | null;
   readonly selection: Selection | null;
+  /** Count, sum, average, smallest and largest of the selected cells; `null` when they are empty */
+  readonly selectionStats: SelectionStats | null;
   /** Without editing from the grid (selecting and copying still work) */
   readOnly: boolean;
   readonly canUndo: boolean;
   readonly canRedo: boolean;
+  /**
+   * Moves `count` whole rows from `first` before the row `before` (numbered as they are now), as
+   * one undo step, and selects them. False when nothing changed: it stays where it is, it is
+   * read-only, or the engine refused (an `error` event says why).
+   */
+  moveRows(first: number, count: number, before: number): boolean;
+  /** Moves whole columns, by number (see `moveRows`) */
+  moveColumns(first: number, count: number, before: number): boolean;
+  /** Inserts rows before the row `before`, as one undo step, and selects them; false if refused */
+  insertRows(before: number, count?: number): boolean;
+  /** Inserts columns, by number (see `insertRows`) */
+  insertColumns(before: number, count?: number): boolean;
+  /** Deletes rows from `first`, as one undo step; false if refused */
+  deleteRows(first: number, count?: number): boolean;
+  /** Deletes columns, by number (see `deleteRows`) */
+  deleteColumns(first: number, count?: number): boolean;
+  /** Fits columns to their content, as one undo step; false if they are empty, read-only or refused. Needs the editor: it measures the text as drawn */
+  autofitColumns(first: number, count?: number): boolean;
+  /** Fits rows to their content (empty ones go back to the automatic height), as one undo step; false if read-only or refused */
+  autofitRows(first: number, count?: number): boolean;
+  /** Hides `count` rows from `first`, as one undo step */
+  hideRows(first: number, count?: number): boolean;
+  /** Shows hidden rows among the `count` from `first` */
+  showRows(first: number, count?: number): boolean;
+  /** Hides columns, by number */
+  hideColumns(first: number, count?: number): boolean;
+  /** Shows hidden columns, by number */
+  showColumns(first: number, count?: number): boolean;
+  /**
+   * Fills `target` (`A1:A20`) from the selected cells, which must be at one of its ends, as one
+   * undo step, and selects it. False if refused.
+   */
+  fill(target: string, options?: { series?: boolean }): boolean;
+  /** Where a text is, row by row: `*` is any text, `?` one character and `~` takes them literally */
+  find(query: string, options?: FindOptions): FindHit[];
+  /**
+   * Replaces a text in cells with text and in formulas (never in numbers or dates), as one undo
+   * step; returns how many cells changed. Formatted runs of a rich text become plain.
+   */
+  replaceAll(query: string, replacement: string, options?: Omit<FindOptions, 'inFormulas'>): number;
+  /** Opens the search panel, with the row to replace when asked */
+  openFind(options?: { replace?: boolean }): void;
+  closeFind(): void;
   /** Undoes the last change; false when there is nothing to undo */
   undo(): boolean;
   /** Redoes the last undone change */
@@ -105,7 +187,7 @@ export class XlsxEditor extends EventTarget {
   addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
 }
 
-/** `<xlsx-editor src="…" locale zoom sheet tabs formula-bar readonly wasm-url blank quiet>` */
+/** `<xlsx-editor src="…" locale zoom sheet tabs formula-bar status-bar readonly wasm-url blank quiet>` */
 export class XlsxEditorElement extends HTMLElement {
   /** The editor, once the `ready` event fired */
   editor: XlsxEditor | null;

package/src/style.css

@@ -27,7 +27,8 @@ xlsx-editor {
 }
 
 .xlsx-editor-bar[hidden],
-.xlsx-editor-tabs[hidden] {
+.xlsx-editor-tabs[hidden],
+.xlsx-editor-status[hidden] {
   display: none;
 }
 
@@ -159,3 +160,155 @@ xlsx-editor {
   opacity: 0.5;
   cursor: default;
 }
+
+/* Below the tabs: what went wrong on the left, the sum and average of the selection on the right */
+.xlsx-editor-status {
+  display: flex;
+  align-items: center;
+  gap: 1.5em;
+  min-height: 22px;
+  padding: 0 10px;
+  border-top: 1px solid var(--xlsx-border, #d1d5db);
+  background: var(--xlsx-tabs-bg, #f3f4f6);
+  font-size: 12px;
+  color: #4b5563;
+  white-space: nowrap;
+}
+
+.xlsx-editor-status-message {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #b91c1c;
+}
+
+.xlsx-editor-status-stats {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 1.25em;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Right click on cells and headers */
+.xlsx-editor-menu {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  min-width: 14rem;
+  padding: 4px;
+  background: #ffffff;
+  border: 1px solid var(--xlsx-border, #d1d5db);
+  border-radius: var(--xlsx-radius, 6px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: #1f2937;
+}
+
+.xlsx-editor-menu[hidden] {
+  display: none;
+}
+
+.xlsx-editor-menu-item {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+  padding: 5px 10px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.xlsx-editor-menu-item:hover,
+.xlsx-editor-menu-item:focus-visible {
+  outline: none;
+  background: rgba(33, 115, 70, 0.12);
+}
+
+.xlsx-editor-menu-keys {
+  color: #6b7280;
+}
+
+.xlsx-editor-menu-line {
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--xlsx-border, #d1d5db);
+}
+
+/* Search panel, over the top right corner of the grid */
+.xlsx-editor-find {
+  position: absolute;
+  z-index: 3;
+  top: 6px;
+  right: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: min(22rem, calc(100% - 44px));
+  padding: 8px;
+  background: #ffffff;
+  border: 1px solid var(--xlsx-border, #d1d5db);
+  border-radius: var(--xlsx-radius, 6px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+  font-size: 12px;
+}
+
+.xlsx-editor-find[hidden],
+.xlsx-editor-find-row[hidden] {
+  display: none;
+}
+
+.xlsx-editor-find-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.xlsx-editor-find input[type="text"] {
+  flex: 1 1 6rem;
+  min-width: 0;
+  padding: 3px 6px;
+  border: 1px solid var(--xlsx-border, #d1d5db);
+  border-radius: 4px;
+  font: inherit;
+}
+
+.xlsx-editor-find input[type="text"]:focus {
+  outline: 2px solid var(--xlsx-accent, #217346);
+  outline-offset: -1px;
+}
+
+.xlsx-editor-find button,
+.xlsx-editor-find select {
+  padding: 3px 7px;
+  border: 1px solid var(--xlsx-border, #d1d5db);
+  border-radius: 4px;
+  background: #ffffff;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.xlsx-editor-find button:hover {
+  background: rgba(33, 115, 70, 0.12);
+}
+
+.xlsx-editor-find label {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  cursor: pointer;
+}
+
+.xlsx-editor-find-count {
+  margin-left: auto;
+  color: #4b5563;
+  font-variant-numeric: tabular-nums;
+}