@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/api/cf-overlays.js

@@ -0,0 +1,118 @@
+// Helpers for IconSetRule and DataBarRule evaluation.
+//
+// Excel ships ~17 named icon-set families. We render them with Unicode glyphs
+// so no font / SVG asset is required. Each family is an ordered list of
+// glyphs from "worst" → "best"; `reverse` on the rule flips this. The number
+// of glyphs encodes the family's bucket count (3, 4, or 5).
+//
+// Bucket selection: given thresholds[0..n-2] (ascending) and the cell's
+// numeric value, the bucket index is the count of thresholds the value
+// equals-or-exceeds. (i.e. value < thresholds[0] → 0; >= thresholds[n-2] →
+// n-1.) Threshold types follow OOXML cfvo semantics: NUMBER is absolute,
+// PERCENT/PERCENTILE are computed relative to the range.
+export const ICON_SET_GLYPHS = {
+    // 3-icon families (worst → best)
+    "3Arrows": ["▼", "▶", "▲"],
+    "3ArrowsGray": ["▽", "▷", "△"],
+    "3Flags": ["⚑", "⚐", "⚑"],
+    "3TrafficLights1": ["●", "●", "●"],
+    "3TrafficLights2": ["■", "■", "■"],
+    "3Signs": ["◆", "▲", "●"],
+    "3Symbols": ["✖", "❗", "✔"],
+    "3Symbols2": ["✗", "!", "✓"],
+    // 4-icon families
+    "4Arrows": ["▼", "↘", "↗", "▲"],
+    "4ArrowsGray": ["▽", "↘", "↗", "△"],
+    "4RedToBlack": ["●", "●", "●", "●"],
+    "4Rating": ["▁", "▃", "▅", "▇"],
+    "4TrafficLights": ["■", "●", "●", "●"],
+    // 5-icon families
+    "5Arrows": ["▼", "↘", "→", "↗", "▲"],
+    "5ArrowsGray": ["▽", "↘", "→", "↗", "△"],
+    "5Rating": ["▁", "▂", "▄", "▆", "▇"],
+    "5Quarters": ["○", "◔", "◑", "◕", "●"],
+};
+// Per-family default colors for traffic lights / signs / arrows. When the
+// imported rule doesn't carry explicit per-icon colors we use these.
+export const ICON_SET_COLORS = {
+    "3Arrows": ["#dc2626", "#f59e0b", "#16a34a"],
+    "3ArrowsGray": ["#6b7280", "#6b7280", "#6b7280"],
+    "3Flags": ["#dc2626", "#f59e0b", "#16a34a"],
+    "3TrafficLights1": ["#dc2626", "#f59e0b", "#16a34a"],
+    "3TrafficLights2": ["#dc2626", "#f59e0b", "#16a34a"],
+    "3Signs": ["#dc2626", "#f59e0b", "#16a34a"],
+    "3Symbols": ["#dc2626", "#f59e0b", "#16a34a"],
+    "3Symbols2": ["#dc2626", "#f59e0b", "#16a34a"],
+    "4Arrows": ["#dc2626", "#f59e0b", "#84cc16", "#16a34a"],
+    "4ArrowsGray": ["#6b7280", "#6b7280", "#6b7280", "#6b7280"],
+    "4RedToBlack": ["#dc2626", "#f97316", "#525252", "#000000"],
+    "4Rating": ["#6b7280", "#6b7280", "#6b7280", "#6b7280"],
+    "4TrafficLights": ["#dc2626", "#f59e0b", "#84cc16", "#16a34a"],
+    "5Arrows": ["#dc2626", "#f59e0b", "#eab308", "#84cc16", "#16a34a"],
+    "5ArrowsGray": ["#6b7280", "#6b7280", "#6b7280", "#6b7280", "#6b7280"],
+    "5Rating": ["#6b7280", "#6b7280", "#6b7280", "#6b7280", "#6b7280"],
+    "5Quarters": ["#6b7280", "#6b7280", "#6b7280", "#6b7280", "#6b7280"],
+};
+// Resolve a cfvo threshold value against a range's min/max numeric values.
+// Returns NaN when the threshold can't be resolved (e.g. PERCENT against
+// an empty range), which downstream callers should skip.
+export const resolveThreshold = (threshold, rangeMin, rangeMax) => {
+    const raw = threshold.value;
+    const num = typeof raw === "number" ? raw : Number(raw);
+    switch (threshold.type) {
+        case "MIN":
+            return rangeMin;
+        case "MAX":
+            return rangeMax;
+        case "NUMBER":
+            return Number.isFinite(num) ? num : NaN;
+        case "PERCENT": {
+            if (!Number.isFinite(num))
+                return NaN;
+            const span = rangeMax - rangeMin;
+            return rangeMin + (span * num) / 100;
+        }
+        case "PERCENTILE":
+            // Approximate percentile by linear interpolation of min/max — the
+            // engine doesn't have access to the sorted value list here. For tight
+            // OOXML conformance the caller can pass a true percentile separately.
+            if (!Number.isFinite(num))
+                return NaN;
+            return rangeMin + (rangeMax - rangeMin) * (num / 100);
+        case "FORMULA":
+            // FORMULA thresholds aren't evaluated client-side here; the importer
+            // will have substituted a computed number into `value`. If still a
+            // string, skip.
+            return Number.isFinite(num) ? num : NaN;
+        default:
+            return NaN;
+    }
+};
+// Pick the icon bucket index for a value given ordered thresholds.
+// thresholds: length = (iconCount - 1), ascending.
+export const pickIconBucket = (value, sortedThresholds) => {
+    let bucket = 0;
+    for (const t of sortedThresholds) {
+        if (!Number.isFinite(t))
+            break;
+        if (value >= t)
+            bucket++;
+        else
+            break;
+    }
+    return bucket;
+};
+// Compute a 0..1 fill fraction for a data-bar cell value.
+// When `min >= max`, all cells in the range share the same value; return 1
+// so the bar paints full-width rather than collapsing to 0.
+export const computeDataBarFill = (value, min, max) => {
+    if (!Number.isFinite(value) ||
+        !Number.isFinite(min) ||
+        !Number.isFinite(max)) {
+        return 0;
+    }
+    if (max <= min)
+        return 1;
+    const clamped = Math.max(min, Math.min(max, value));
+    return (clamped - min) / (max - min);
+};

package/dist/esm/api/cf-window.d.ts

@@ -0,0 +1,45 @@
+import type { GridRange, ViewPortProps } from "@rowsncolumns/grid";
+import type { ConditionalFormatRule } from "../types";
+/**
+ * Viewport windowing for conditional formatting.
+ *
+ * `useConditionalFormatting` iterates every cell of every rule range in a
+ * single-threaded memo. Whole-column rules on a million-row sheet mean
+ * millions of cell visits (~1.9s main-thread stall), re-paid whenever the
+ * memo's getter deps change. Intersecting the rule ranges with the visible
+ * viewport (plus a generous pad) bounds that work to O(window).
+ *
+ * The window is tile-quantized so scrolling only produces a NEW window when
+ * a tile boundary is crossed — between crossings the same values come back,
+ * so state updates (and the CF recompute) stay rare and cheap.
+ */
+/**
+ * Below this many covered cells (for the active sheet) rules pass through
+ * untouched, preserving exact full-range semantics — including gradient /
+ * topBottom / distinct / dataBar statistics — for ordinary sheets.
+ */
+export declare const CF_WINDOW_CELL_THRESHOLD = 50000;
+/** Padding beyond the reported viewport, in grid cells. */
+export declare const CF_WINDOW_PAD_ROWS = 512;
+export declare const CF_WINDOW_PAD_COLS = 32;
+/** The window used before the grid reports its first viewport. */
+export declare const CF_INITIAL_WINDOW: GridRange;
+/**
+ * Snap a reported viewport to the padded, tile-quantized window. Any
+ * viewport inside the same tile span maps to identical values.
+ */
+export declare const cfWindowForViewport: (viewport: ViewPortProps) => GridRange;
+export declare const isSameCfWindow: (left: GridRange | null, right: GridRange) => boolean;
+/**
+ * Intersect every rule range on `sheetId` with `window`, dropping rules left
+ * with no ranges. Returns the ORIGINAL array (same identity) when the active
+ * sheet's covered-cell total is under {@link CF_WINDOW_CELL_THRESHOLD}, so
+ * ordinary sheets keep exact current behavior. Ranges on other sheets pass
+ * through untouched (the hook skips them without iterating).
+ */
+export declare const windowConditionalFormatRules: ({ rules, sheetId, window, }: {
+    rules: ConditionalFormatRule[];
+    sheetId: number;
+    window: GridRange;
+}) => ConditionalFormatRule[];
+//# sourceMappingURL=cf-window.d.ts.map

package/dist/esm/api/cf-window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cf-window.d.ts","sourceRoot":"","sources":["../../../api/cf-window.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD;;;;;;;;;;;;GAYG;AAEH;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,QAAS,CAAC;AAE/C,2DAA2D;AAC3D,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAMrC,kEAAkE;AAClE,eAAO,MAAM,iBAAiB,EAAE,SAK/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,UAAU,aAAa,KAAG,SAuB7D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,MAAM,SAAS,GAAG,IAAI,EACtB,OAAO,SAAS,KACf,OAQF,CAAC;AASF;;;;;;GAMG;AACH,eAAO,MAAM,4BAA4B,GAAI,6BAI1C;IACD,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,SAAS,CAAC;CACnB,KAAG,qBAAqB,EA6CxB,CAAC"}

package/dist/esm/api/cf-window.js

@@ -0,0 +1,109 @@
+/**
+ * Viewport windowing for conditional formatting.
+ *
+ * `useConditionalFormatting` iterates every cell of every rule range in a
+ * single-threaded memo. Whole-column rules on a million-row sheet mean
+ * millions of cell visits (~1.9s main-thread stall), re-paid whenever the
+ * memo's getter deps change. Intersecting the rule ranges with the visible
+ * viewport (plus a generous pad) bounds that work to O(window).
+ *
+ * The window is tile-quantized so scrolling only produces a NEW window when
+ * a tile boundary is crossed — between crossings the same values come back,
+ * so state updates (and the CF recompute) stay rare and cheap.
+ */
+/**
+ * Below this many covered cells (for the active sheet) rules pass through
+ * untouched, preserving exact full-range semantics — including gradient /
+ * topBottom / distinct / dataBar statistics — for ordinary sheets.
+ */
+export const CF_WINDOW_CELL_THRESHOLD = 50_000;
+/** Padding beyond the reported viewport, in grid cells. */
+export const CF_WINDOW_PAD_ROWS = 512;
+export const CF_WINDOW_PAD_COLS = 32;
+/** Quantization tile — window bounds snap outward to multiples of these. */
+const CF_WINDOW_TILE_ROWS = 256;
+const CF_WINDOW_TILE_COLS = 16;
+/** The window used before the grid reports its first viewport. */
+export const CF_INITIAL_WINDOW = {
+    startRowIndex: 0,
+    endRowIndex: 2 * CF_WINDOW_TILE_ROWS + CF_WINDOW_PAD_ROWS,
+    startColumnIndex: 0,
+    endColumnIndex: 2 * CF_WINDOW_TILE_COLS + CF_WINDOW_PAD_COLS,
+};
+/**
+ * Snap a reported viewport to the padded, tile-quantized window. Any
+ * viewport inside the same tile span maps to identical values.
+ */
+export const cfWindowForViewport = (viewport) => {
+    return {
+        startRowIndex: Math.max(0, Math.floor((viewport.rowStartIndex - CF_WINDOW_PAD_ROWS) / CF_WINDOW_TILE_ROWS) * CF_WINDOW_TILE_ROWS),
+        endRowIndex: Math.ceil((viewport.rowStopIndex + CF_WINDOW_PAD_ROWS) / CF_WINDOW_TILE_ROWS) * CF_WINDOW_TILE_ROWS,
+        startColumnIndex: Math.max(0, Math.floor((viewport.columnStartIndex - CF_WINDOW_PAD_COLS) / CF_WINDOW_TILE_COLS) * CF_WINDOW_TILE_COLS),
+        endColumnIndex: Math.ceil((viewport.columnStopIndex + CF_WINDOW_PAD_COLS) / CF_WINDOW_TILE_COLS) * CF_WINDOW_TILE_COLS,
+    };
+};
+export const isSameCfWindow = (left, right) => {
+    return (left !== null &&
+        left.startRowIndex === right.startRowIndex &&
+        left.endRowIndex === right.endRowIndex &&
+        left.startColumnIndex === right.startColumnIndex &&
+        left.endColumnIndex === right.endColumnIndex);
+};
+const rangeCellCount = (range) => {
+    const rows = range.endRowIndex - range.startRowIndex + 1;
+    const columns = range.endColumnIndex - range.startColumnIndex + 1;
+    if (rows <= 0 || columns <= 0)
+        return 0;
+    return rows * columns;
+};
+/**
+ * Intersect every rule range on `sheetId` with `window`, dropping rules left
+ * with no ranges. Returns the ORIGINAL array (same identity) when the active
+ * sheet's covered-cell total is under {@link CF_WINDOW_CELL_THRESHOLD}, so
+ * ordinary sheets keep exact current behavior. Ranges on other sheets pass
+ * through untouched (the hook skips them without iterating).
+ */
+export const windowConditionalFormatRules = ({ rules, sheetId, window, }) => {
+    let coveredCells = 0;
+    for (const rule of rules) {
+        for (const range of rule.ranges ?? []) {
+            if (range?.sheetId !== sheetId)
+                continue;
+            coveredCells += rangeCellCount(range);
+            if (coveredCells > CF_WINDOW_CELL_THRESHOLD)
+                break;
+        }
+        if (coveredCells > CF_WINDOW_CELL_THRESHOLD)
+            break;
+    }
+    if (coveredCells <= CF_WINDOW_CELL_THRESHOLD) {
+        return rules;
+    }
+    const windowed = [];
+    for (const rule of rules) {
+        const ranges = (rule.ranges ?? []).flatMap((range) => {
+            if (range?.sheetId !== sheetId)
+                return [range];
+            const startRowIndex = Math.max(range.startRowIndex, window.startRowIndex);
+            const endRowIndex = Math.min(range.endRowIndex, window.endRowIndex);
+            const startColumnIndex = Math.max(range.startColumnIndex, window.startColumnIndex);
+            const endColumnIndex = Math.min(range.endColumnIndex, window.endColumnIndex);
+            if (startRowIndex > endRowIndex || startColumnIndex > endColumnIndex) {
+                return [];
+            }
+            return [
+                {
+                    ...range,
+                    startRowIndex,
+                    endRowIndex,
+                    startColumnIndex,
+                    endColumnIndex,
+                },
+            ];
+        });
+        if (ranges.length === 0)
+            continue;
+        windowed.push({ ...rule, ranges });
+    }
+    return windowed;
+};

package/dist/esm/api/colors.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Get header fill
+ * @param isCorner
+ * @param isEntireRowColumnSelected
+ * @param isActive
+ */
+export declare const getHeaderFill: (isCorner: boolean, isEntireRowColumnSelected: boolean, isActive: boolean, containsTable: boolean | undefined, headerBackgroundColor: string, headerActiveBackgroundColor: string, headerSelectedBackgroundColor: string, headerTableBackgroundColor: string, headerTableActiveBackgroundColor: string, headerTableSelectedBackgroundColor: string) => string;
+//# sourceMappingURL=colors.d.ts.map

package/dist/esm/api/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../api/colors.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,UAAU,OAAO,EACjB,2BAA2B,OAAO,EAClC,UAAU,OAAO,EACjB,eAAe,OAAO,GAAG,SAAS,EAClC,uBAAuB,MAAM,EAC7B,6BAA6B,MAAM,EACnC,+BAA+B,MAAM,EACrC,4BAA4B,MAAM,EAClC,kCAAkC,MAAM,EACxC,oCAAoC,MAAM,WA0B3C,CAAC"}

package/dist/esm/api/colors.js

@@ -0,0 +1,27 @@
+/**
+ * Get header fill
+ * @param isCorner
+ * @param isEntireRowColumnSelected
+ * @param isActive
+ */
+export const getHeaderFill = (isCorner, isEntireRowColumnSelected, isActive, containsTable, headerBackgroundColor, headerActiveBackgroundColor, headerSelectedBackgroundColor, headerTableBackgroundColor, headerTableActiveBackgroundColor, headerTableSelectedBackgroundColor) => {
+    if (isCorner) {
+        return headerBackgroundColor;
+    }
+    if (isEntireRowColumnSelected && containsTable) {
+        return headerTableSelectedBackgroundColor;
+    }
+    if (isEntireRowColumnSelected) {
+        return headerSelectedBackgroundColor;
+    }
+    if (isActive && containsTable) {
+        return headerTableActiveBackgroundColor;
+    }
+    if (isActive) {
+        return headerActiveBackgroundColor;
+    }
+    if (containsTable) {
+        return headerTableBackgroundColor;
+    }
+    return headerBackgroundColor;
+};

package/dist/esm/api/copy-paste.d.ts

@@ -0,0 +1,10 @@
+import type { CellInterface, SelectionArea } from "@rowsncolumns/grid";
+export type ClipBoardFormat = "text/html" | "text/csv" | "text/plain" | "application/json";
+/**
+ * Create selection from cell by extending original bounds
+ * @param param0
+ * @param bounds
+ * @returns
+ */
+export declare const createSelectionFromCell: ({ rowIndex, columnIndex }: CellInterface, selections?: SelectionArea[]) => SelectionArea[];
+//# sourceMappingURL=copy-paste.d.ts.map

package/dist/esm/api/copy-paste.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-paste.d.ts","sourceRoot":"","sources":["../../../api/copy-paste.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEvE,MAAM,MAAM,eAAe,GACvB,WAAW,GACX,UAAU,GACV,YAAY,GACZ,kBAAkB,CAAC;AAEvB;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAClC,2BAA2B,aAAa,EACxC,aAAa,aAAa,EAAE,KAC3B,aAAa,EAiBf,CAAC"}

package/dist/esm/api/copy-paste.js

@@ -0,0 +1,23 @@
+/**
+ * Create selection from cell by extending original bounds
+ * @param param0
+ * @param bounds
+ * @returns
+ */
+export const createSelectionFromCell = ({ rowIndex, columnIndex }, selections) => {
+    const lastSelection = selections?.[selections?.length - 1];
+    if (!lastSelection) {
+        return [];
+    }
+    const { range } = lastSelection;
+    return [
+        {
+            range: {
+                startRowIndex: rowIndex,
+                startColumnIndex: columnIndex,
+                endRowIndex: rowIndex + (range.endRowIndex - range.startRowIndex),
+                endColumnIndex: columnIndex + (range.endColumnIndex - range.startColumnIndex),
+            },
+        },
+    ];
+};

package/dist/esm/api/fill-patterns.d.ts

@@ -0,0 +1,5 @@
+import type { FillPattern } from "../types";
+export declare const PATTERN_TILES: Partial<Record<FillPattern, number[]>>;
+export declare const PATTERN_TILE_SIZE = 8;
+export declare const getPatternCanvas: (pattern: FillPattern, foregroundColor: string, backgroundColor: string | undefined) => HTMLCanvasElement | null;
+//# sourceMappingURL=fill-patterns.d.ts.map

package/dist/esm/api/fill-patterns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill-patterns.d.ts","sourceRoot":"","sources":["../../../api/fill-patterns.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAwJ5C,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC,CAkBhE,CAAC;AAEF,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAOnC,eAAO,MAAM,gBAAgB,GAC3B,SAAS,WAAW,EACpB,iBAAiB,MAAM,EACvB,iBAAiB,MAAM,GAAG,SAAS,KAClC,iBAAiB,GAAG,IA8BtB,CAAC"}

package/dist/esm/api/fill-patterns.js

@@ -0,0 +1,196 @@
+// 8x8 bitmap tiles for OOXML pattern fills. Each entry is a flat 64-byte
+// array where 1 paints the foreground color and 0 paints the background.
+// Tiles are designed to look correct at 1:1 device-pixel rendering and tile
+// seamlessly across the cell. The renderer composes these into a Konva
+// `fillPatternImage` (offscreen-canvas-backed) cached by pattern × fg × bg.
+// Helpers for legibility.
+const _ = 0; // background
+const X = 1; // foreground
+// 50% checker — `mediumGray`.
+const CHECKER_50 = [
+    X, _, X, _, X, _, X, _,
+    _, X, _, X, _, X, _, X,
+    X, _, X, _, X, _, X, _,
+    _, X, _, X, _, X, _, X,
+    X, _, X, _, X, _, X, _,
+    _, X, _, X, _, X, _, X,
+    X, _, X, _, X, _, X, _,
+    _, X, _, X, _, X, _, X,
+];
+// 25% dot — `lightGray`. One foreground pixel per 2x2 tile.
+const DOT_25 = [
+    X, _, X, _, X, _, X, _,
+    _, _, _, _, _, _, _, _,
+    X, _, X, _, X, _, X, _,
+    _, _, _, _, _, _, _, _,
+    X, _, X, _, X, _, X, _,
+    _, _, _, _, _, _, _, _,
+    X, _, X, _, X, _, X, _,
+    _, _, _, _, _, _, _, _,
+];
+// 75% — `darkGray`: inverse of DOT_25.
+const DOT_75 = DOT_25.map((v) => (v ? 0 : 1));
+// `gray125` = 12.5% — one filled pixel per 2x4 block.
+const GRAY_125 = [
+    X, _, _, _, X, _, _, _,
+    _, _, _, _, _, _, _, _,
+    _, _, X, _, _, _, X, _,
+    _, _, _, _, _, _, _, _,
+    X, _, _, _, X, _, _, _,
+    _, _, _, _, _, _, _, _,
+    _, _, X, _, _, _, X, _,
+    _, _, _, _, _, _, _, _,
+];
+// `gray0625` = 6.25% — one filled pixel per 4x4 block.
+const GRAY_0625 = [
+    X, _, _, _, _, _, _, _,
+    _, _, _, _, _, _, _, _,
+    _, _, _, _, X, _, _, _,
+    _, _, _, _, _, _, _, _,
+    X, _, _, _, _, _, _, _,
+    _, _, _, _, _, _, _, _,
+    _, _, _, _, X, _, _, _,
+    _, _, _, _, _, _, _, _,
+];
+// Dark horizontal — every other row solid.
+const DARK_HORIZONTAL = [
+    X, X, X, X, X, X, X, X,
+    _, _, _, _, _, _, _, _,
+    X, X, X, X, X, X, X, X,
+    _, _, _, _, _, _, _, _,
+    X, X, X, X, X, X, X, X,
+    _, _, _, _, _, _, _, _,
+    X, X, X, X, X, X, X, X,
+    _, _, _, _, _, _, _, _,
+];
+// Light horizontal — one row solid per 4 rows.
+const LIGHT_HORIZONTAL = [
+    X, X, X, X, X, X, X, X,
+    _, _, _, _, _, _, _, _,
+    _, _, _, _, _, _, _, _,
+    _, _, _, _, _, _, _, _,
+    X, X, X, X, X, X, X, X,
+    _, _, _, _, _, _, _, _,
+    _, _, _, _, _, _, _, _,
+    _, _, _, _, _, _, _, _,
+];
+// Transpose helpers — vertical patterns are horizontal-rotated 90°.
+const transpose = (rows) => {
+    const out = new Array(64);
+    for (let y = 0; y < 8; y++) {
+        for (let x = 0; x < 8; x++) {
+            out[y * 8 + x] = rows[x * 8 + y];
+        }
+    }
+    return out;
+};
+const DARK_VERTICAL = transpose(DARK_HORIZONTAL);
+const LIGHT_VERTICAL = transpose(LIGHT_HORIZONTAL);
+// Diagonal `\` (top-left to bottom-right) — thick.
+const DARK_DOWN = [
+    X, _, _, _, _, _, _, X,
+    X, X, _, _, _, _, _, _,
+    _, X, X, _, _, _, _, _,
+    _, _, X, X, _, _, _, _,
+    _, _, _, X, X, _, _, _,
+    _, _, _, _, X, X, _, _,
+    _, _, _, _, _, X, X, _,
+    _, _, _, _, _, _, X, X,
+];
+// Diagonal `/` (bottom-left to top-right) — thick.
+const DARK_UP = [
+    _, _, _, _, _, _, X, X,
+    _, _, _, _, _, X, X, _,
+    _, _, _, _, X, X, _, _,
+    _, _, _, X, X, _, _, _,
+    _, _, X, X, _, _, _, _,
+    _, X, X, _, _, _, _, _,
+    X, X, _, _, _, _, _, _,
+    X, _, _, _, _, _, _, X,
+];
+// Diagonal `\` (top-left to bottom-right) — thin.
+const LIGHT_DOWN = [
+    X, _, _, _, _, _, _, _,
+    _, X, _, _, _, _, _, _,
+    _, _, X, _, _, _, _, _,
+    _, _, _, X, _, _, _, _,
+    _, _, _, _, X, _, _, _,
+    _, _, _, _, _, X, _, _,
+    _, _, _, _, _, _, X, _,
+    _, _, _, _, _, _, _, X,
+];
+// Diagonal `/` thin.
+const LIGHT_UP = [
+    _, _, _, _, _, _, _, X,
+    _, _, _, _, _, _, X, _,
+    _, _, _, _, _, X, _, _,
+    _, _, _, _, X, _, _, _,
+    _, _, _, X, _, _, _, _,
+    _, _, X, _, _, _, _, _,
+    _, X, _, _, _, _, _, _,
+    X, _, _, _, _, _, _, _,
+];
+// OR-combine helper for grid/trellis patterns.
+const orTiles = (a, b) => a.map((v, i) => (v || b[i] ? 1 : 0));
+const DARK_GRID = orTiles(DARK_HORIZONTAL, DARK_VERTICAL);
+const LIGHT_GRID = orTiles(LIGHT_HORIZONTAL, LIGHT_VERTICAL);
+const DARK_TRELLIS = orTiles(DARK_DOWN, DARK_UP);
+const LIGHT_TRELLIS = orTiles(LIGHT_DOWN, LIGHT_UP);
+export const PATTERN_TILES = {
+    mediumGray: CHECKER_50,
+    lightGray: DOT_25,
+    darkGray: DOT_75,
+    gray125: GRAY_125,
+    gray0625: GRAY_0625,
+    darkHorizontal: DARK_HORIZONTAL,
+    lightHorizontal: LIGHT_HORIZONTAL,
+    darkVertical: DARK_VERTICAL,
+    lightVertical: LIGHT_VERTICAL,
+    darkDown: DARK_DOWN,
+    darkUp: DARK_UP,
+    lightDown: LIGHT_DOWN,
+    lightUp: LIGHT_UP,
+    darkGrid: DARK_GRID,
+    lightGrid: LIGHT_GRID,
+    darkTrellis: DARK_TRELLIS,
+    lightTrellis: LIGHT_TRELLIS,
+};
+export const PATTERN_TILE_SIZE = 8;
+// LRU-style cache keyed by `pattern|fg|bg`. Image elements survive multiple
+// render passes; we never exceed ~17 patterns × handful of color combos so
+// a flat Map is sufficient.
+const tileCache = new Map();
+export const getPatternCanvas = (pattern, foregroundColor, backgroundColor) => {
+    if (typeof document === "undefined")
+        return null;
+    const tile = PATTERN_TILES[pattern];
+    if (!tile)
+        return null;
+    const key = `${pattern}|${foregroundColor}|${backgroundColor ?? ""}`;
+    const cached = tileCache.get(key);
+    if (cached)
+        return cached;
+    const canvas = document.createElement("canvas");
+    canvas.width = PATTERN_TILE_SIZE;
+    canvas.height = PATTERN_TILE_SIZE;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        return null;
+    if (backgroundColor) {
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, PATTERN_TILE_SIZE, PATTERN_TILE_SIZE);
+    }
+    else {
+        ctx.clearRect(0, 0, PATTERN_TILE_SIZE, PATTERN_TILE_SIZE);
+    }
+    ctx.fillStyle = foregroundColor;
+    for (let y = 0; y < PATTERN_TILE_SIZE; y++) {
+        for (let x = 0; x < PATTERN_TILE_SIZE; x++) {
+            if (tile[y * PATTERN_TILE_SIZE + x]) {
+                ctx.fillRect(x, y, 1, 1);
+            }
+        }
+    }
+    tileCache.set(key, canvas);
+    return canvas;
+};

package/dist/esm/api/font-loader.d.ts

@@ -0,0 +1,8 @@
+export declare class FontLoader {
+    private readonly BASE_URL;
+    loadFonts(fonts: string[]): Promise<void>;
+    private loadFont;
+    private checkFontLoaded;
+    private loadCSS;
+}
+//# sourceMappingURL=font-loader.d.ts.map

package/dist/esm/api/font-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-loader.d.ts","sourceRoot":"","sources":["../../../api/font-loader.ts"],"names":[],"mappings":"AAAA,qBAAa,UAAU;IACrB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA+C;IAElE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;YAKjC,QAAQ;YAwBR,eAAe;YAsCf,OAAO;CAWtB"}

package/dist/esm/api/font-loader.js

@@ -0,0 +1,67 @@
+export class FontLoader {
+    BASE_URL = "https://fonts.googleapis.com/css2?family=";
+    async loadFonts(fonts) {
+        const fontPromises = fonts.map((font) => this.loadFont(font));
+        await Promise.allSettled(fontPromises);
+    }
+    async loadFont(font) {
+        const [fontFamily, weights] = font.split(":");
+        const weightList = weights ? weights.split(",") : ["400"];
+        const url = `${this.BASE_URL}${fontFamily}:ital,wght@${weightList
+            .map((w) => `0,${w}`)
+            .join(";")};${weightList.map((w) => `1,${w}`).join(";")}&display=swap`;
+        // Load the CSS
+        try {
+            await this.loadCSS(url);
+        }
+        catch (err) {
+            console.warn("Error loading fonts", url, err);
+        }
+        await document.fonts.ready;
+        // Check if the fonts are actually loaded
+        const fontLoaded = await this.checkFontLoaded(fontFamily, weightList);
+        if (!fontLoaded) {
+            throw new Error(`Font ${fontFamily} failed to load properly`);
+        }
+    }
+    async checkFontLoaded(fontFamily, weights) {
+        const testString = "abcdefghijklmnopqrstuvwxyz0123456789";
+        const testElement = document.createElement("span");
+        testElement.style.position = "absolute";
+        testElement.style.left = "-9999px";
+        testElement.style.fontSize = "12px";
+        testElement.style.fontFamily = `${fontFamily}, monospace`;
+        testElement.textContent = testString;
+        document.body.appendChild(testElement);
+        try {
+            for (const weight of weights) {
+                testElement.style.fontWeight = weight;
+                // Check both normal and italic
+                for (const style of ["normal", "italic"]) {
+                    testElement.style.fontStyle = style;
+                    // Force a reflow
+                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                    testElement.offsetHeight;
+                    const loaded = await document.fonts.ready;
+                    if (!loaded) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+        finally {
+            document.body.removeChild(testElement);
+        }
+    }
+    async loadCSS(url) {
+        return new Promise((resolve, reject) => {
+            const link = document.createElement("link");
+            link.href = url;
+            link.rel = "stylesheet";
+            link.onload = () => resolve();
+            link.onerror = (e) => reject(new Error(`Failed to load CSS: ${url}. Error: ${e}`));
+            document.head.appendChild(link);
+        });
+    }
+}

package/dist/esm/api/heatmap.d.ts

@@ -0,0 +1,4 @@
+import type { SpreadsheetTheme } from "../components/canvas-grid/typings";
+import type { GradientRule } from "../types";
+export declare const getGradientColors: (values: (number | undefined)[][][], gradientRule: GradientRule, theme: SpreadsheetTheme) => (string | undefined)[][][];
+//# sourceMappingURL=heatmap.d.ts.map

package/dist/esm/api/heatmap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap.d.ts","sourceRoot":"","sources":["../../../api/heatmap.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,EAAE,EAClC,cAAc,YAAY,EAC1B,OAAO,gBAAgB,+BAgExB,CAAC"}