@rowsncolumns/spreadsheet 10.6.0 → 10.6.5

package/dist/esm/components/cell/number-format-layout.js

@@ -0,0 +1,99 @@
+// Paint-time expansion of Excel's width-aware number-format tokens: `*x`
+// repeats `x` across the cell's free width, `_x` reserves the width of `x`
+// and `?` reserves a digit's width ("Number format codes",
+// support.microsoft.com). The formatter keeps those as parts
+// (`ssfFormatLayout`); this module turns them into positioned text runs once
+// the glyph widths are known.
+import { numberFormatLayoutText, ssfFormatLayout, } from "@rowsncolumns/utils";
+/**
+ * Position the parts inside `availableWidth`. Parts before the (first) fill
+ * start at the left edge and parts after it end at the right edge, with the
+ * fill character repeated in between as many whole times as it fits —
+ * Excel's accounting format (`$` left, number right). Without a fill the
+ * block is aligned by `align`. Returns `undefined` when the fixed parts
+ * alone do not fit, so the caller keeps its plain-text paint.
+ */
+export const layoutNumberFormatParts = ({ parts, measure, availableWidth, align, }) => {
+    const widthOf = (part) => {
+        switch (part.type) {
+            case "text":
+                return measure(part.text);
+            case "skip":
+                return measure(part.char);
+            case "digit":
+                return measure("0");
+            default:
+                return 0;
+        }
+    };
+    const fillIndex = parts.findIndex((part) => part.type === "fill");
+    // Excel honours one `*` per section; a later one paints nothing.
+    const widths = parts.map(widthOf);
+    const fixedWidth = widths.reduce((total, width) => total + width, 0);
+    if (fixedWidth > availableWidth + 0.5)
+        return undefined;
+    const runs = [];
+    const pushRuns = (from, to, startX) => {
+        let cursor = startX;
+        for (let i = from; i < to; i++) {
+            const part = parts[i];
+            if (part.type === "text" && part.text) {
+                runs.push({ text: part.text, x: cursor, width: widths[i] });
+            }
+            cursor += widths[i];
+        }
+        return cursor;
+    };
+    if (fillIndex < 0) {
+        const offset = align === "right"
+            ? availableWidth - fixedWidth
+            : align === "center"
+                ? (availableWidth - fixedWidth) / 2
+                : 0;
+        const end = pushRuns(0, parts.length, offset);
+        return { runs, start: offset, end };
+    }
+    const fill = parts[fillIndex];
+    const leftEnd = pushRuns(0, fillIndex, 0);
+    const rightWidth = widths
+        .slice(fillIndex + 1)
+        .reduce((total, width) => total + width, 0);
+    const rightStart = availableWidth - rightWidth;
+    const fillCharWidth = measure(fill.char);
+    const gap = rightStart - leftEnd;
+    const copies = fillCharWidth > 0 ? Math.max(0, Math.floor(gap / fillCharWidth + 1e-6)) : 0;
+    const leftRunCount = runs.length;
+    pushRuns(fillIndex + 1, parts.length, rightStart);
+    if (copies > 0 && fill.char.trim()) {
+        runs.splice(leftRunCount, 0, {
+            text: fill.char.repeat(copies),
+            x: leftEnd,
+            width: copies * fillCharWidth,
+        });
+    }
+    return { runs, start: 0, end: availableWidth };
+};
+const LAYOUT_CACHE_LIMIT = 2048;
+const layoutCache = new Map();
+/**
+ * The layout parts for a cell, or `undefined` when the pattern has no
+ * width-aware token or when the parts would paint a different string than
+ * the cell's formatted value (another engine, locale or conditional number
+ * format produced it) — the plain string then stays authoritative.
+ */
+export const getCellNumberFormatLayout = (pattern, value, formattedValue, locale) => {
+    if (!pattern || value === null || value === undefined || !formattedValue) {
+        return undefined;
+    }
+    const key = `${locale ?? ""}\u0000${pattern}\u0000${typeof value}\u0000${value}`;
+    let parts = layoutCache.get(key);
+    if (parts === undefined) {
+        parts = ssfFormatLayout(pattern, value, locale) ?? null;
+        if (layoutCache.size >= LAYOUT_CACHE_LIMIT)
+            layoutCache.clear();
+        layoutCache.set(key, parts);
+    }
+    if (!parts)
+        return undefined;
+    return numberFormatLayoutText(parts) === formattedValue ? parts : undefined;
+};

package/dist/esm/components/cell/typings.d.ts

@@ -2,6 +2,7 @@ import type { StructuredResult } from "@rowsncolumns/common-types";
 import type { SparklineAxisExtents } from "../cell-structured/sparkline-math";
 import type { CellInterface, LineHeightMode, RendererProps } from "@rowsncolumns/grid";
 import type { TextFormatRun } from "@rowsncolumns/ui";
+import type { NumberFormatLayoutPart } from "@rowsncolumns/utils";
 import type { CellFormat, Color, SortOrder, WrapStrategy } from "../../types";
 import type { CanvasGridProps, SpreadsheetTheme } from "../canvas-grid/typings";
 import { CellRendererProps } from "../../hooks/use-cell-renderer";
@@ -157,11 +158,32 @@ export type CellProps<S extends StructuredResult = StructuredResult> = RendererP
      */
     expanded?: boolean;
     overflowRight?: boolean;
+    /**
+     * Centred overflow: pixels the text claims left of the cell (the rest of
+     * `cellWidth` lies to its right). Unset for left / right spills.
+     */
+    overflowLeft?: number;
+    /**
+     * Center Across Selection: centre on the whole span instead of on the
+     * cell itself.
+     */
+    centerOnSpan?: boolean;
+    /**
+     * The dropdown button paints beside the cell, past its right edge, and
+     * reserves no room inside it (a data-validation list on the active cell).
+     */
+    arrowOutside?: boolean;
     defaultFontSizePoint: number;
     /**
      * Text formatting options of a cell
      */
     textFormatRuns?: TextFormatRun[] | null;
+    /**
+     * Width-aware parts of the cell's number format (`*x` fill, `_x` and
+     * `?` reserves) when its pattern has any; the painter expands them with
+     * measured glyph widths instead of painting `value` as one string.
+     */
+    numberFormatLayout?: NumberFormatLayoutPart[];
     /**
      * Structured result
      */

package/dist/esm/components/cell/typings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typings.d.ts","sourceRoot":"","sources":["../../../../components/cell/typings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EACL,iBAAiB,EAElB,MAAM,+BAA+B,CAAC;AAEvC,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB,IACjE,aAAa,GAAG;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,EAAE,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE;QACX,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE,MAAM;QACpB,WAAW,EAAE,MAAM;QACnB,cAAc,CAAC,EAAE,KAAK,GAAG,IAAI;KAC9B,EAAE,CAAC;IACJ;;OAEG;IACH,KAAK,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IACxC;;OAEG;IACH,gBAAgB,EAAE,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACnE;;;OAGG;IACH,aAAa,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1C;;;;OAIG;IACH,eAAe,CAAC,CAAC,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9D;;;OAGG;IACH,aAAa,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1C;;;;;OAKG;IACH,YAAY,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE;;OAEG;IACH,6BAA6B,EAAE,iBAAiB,CAAC,+BAA+B,CAAC,CAAC;IAClF;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC"}
+{"version":3,"file":"typings.d.ts","sourceRoot":"","sources":["../../../../components/cell/typings.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/cell-editor/index.js

@@ -262,10 +262,10 @@ export const CellEditor = memo(({ value = "", effectiveValue, isNewValue, onChan
             minWidth,
             minHeight,
             paddingLeft: finalHorizontalAlignment === "left"
-                ? INDENT_SPACING * indent + 1
+                ? INDENT_SPACING * indent * scale + 1
                 : 0,
             paddingRight: finalHorizontalAlignment === "right"
-                ? INDENT_SPACING * indent + 1
+                ? INDENT_SPACING * indent * scale + 1
                 : 0,
             maxWidth,
             maxHeight,

package/dist/esm/components/cell-filter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-filter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAgC,MAAM,OAAO,CAAC;AAYrD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,KAAK,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,aAAa,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmGhD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-filter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAgC,MAAM,OAAO,CAAC;AAerD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,KAAK,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,aAAa,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkGhD,CAAC"}

package/dist/esm/components/cell-filter/index.js

@@ -1,12 +1,12 @@
 import { lightenColor } from "@rowsncolumns/utils";
 import React, { useCallback, useState } from "react";
 import { Group, Path, Rect } from "react-konva";
-import { DEFAULT_CELL_SPACING, FILTER_ICON_WIDTH, FITLER_ICON_PATH, FUNNEL_ICON_PATH, SORT_ASCENDING_ICON_PATH, SORT_DESCENDING_ICON_PATH, } from "../../config";
+import { DEFAULT_CELL_SPACING, FILTER_BUTTON_BORDER_COLOR, FILTER_BUTTON_FILL_COLOR, FILTER_BUTTON_GLYPH_COLOR, FILTER_ICON_WIDTH, FITLER_ICON_PATH, FUNNEL_ICON_PATH, SORT_ASCENDING_ICON_PATH, SORT_DESCENDING_ICON_PATH, } from "../../config";
 import { getIconSpacing } from "../../helpers";
 /**
  * Filter icon
  */
-export const CellFilter = ({ x = 0, y = 0, width = 0, height = 0, rowIndex, columnIndex, scale, onClick, isActive, filterIconColor = "green", backgroundColor, verticalAlignment, sortOrder, }) => {
+export const CellFilter = ({ x = 0, y = 0, width = 0, height = 0, rowIndex, columnIndex, scale, onClick, isActive, filterIconColor = FILTER_BUTTON_GLYPH_COLOR, verticalAlignment, sortOrder, }) => {
     const cellSpacing = DEFAULT_CELL_SPACING;
     // Without a click handler (a readonly grid) the icon is a pure state indicator —
     // no hover highlight, or it reads as clickable.
@@ -38,8 +38,8 @@ export const CellFilter = ({ x = 0, y = 0, width = 0, height = 0, rowIndex, colu
             event.evt.stopPropagation();
         }, perfectDrawEnabled: false, onMouseDown: (e) => e.evt.preventDefault() },
         React.createElement(Rect, { x: posX, y: posY, width: FILTER_ICON_WIDTH * scale, height: FILTER_ICON_WIDTH * scale, fill: isHovered
-                ? lightenColor(0.2, filterIconColor ?? "green")
-                : backgroundColor ?? undefined, cornerRadius: 0, perfectDrawEnabled: false, stroke: filterIconColor ?? undefined, strokeWidth: 1, hitStrokeWidth: 0 }),
+                ? lightenColor(0.2, filterIconColor ?? FILTER_BUTTON_GLYPH_COLOR)
+                : FILTER_BUTTON_FILL_COLOR, cornerRadius: 0, perfectDrawEnabled: false, stroke: FILTER_BUTTON_BORDER_COLOR, strokeWidth: 1, hitStrokeWidth: 0 }),
         sortIconPath ? (React.createElement(Path, { data: sortIconPath, x: posX + 0.5, y: posY + 0.5, fill: iconFill, scaleY: 0.4 * scale, scaleX: 0.4 * scale, perfectDrawEnabled: false })) : null,
         React.createElement(Path, { data: isActive ? FUNNEL_ICON_PATH : FITLER_ICON_PATH, x: posX + 0.5 + glyphOffset, y: posY + 0.5 + glyphOffset, fill: iconFill, scaleY: glyphScale, scaleX: glyphScale, perfectDrawEnabled: false })));
 };

package/dist/esm/components/cell-overlay/index.d.ts

@@ -17,6 +17,26 @@ export type StrokeCellProps = Omit<CellOverlayRendererProps, "key" | "rowIndex"
  * @param width
  */
 export declare const getOffsetFromWidth: (width: number) => number;
+export type SlantQuad = [number, number][];
+/**
+ * Excel paints `slantDashDot` as dash-dot runs whose ends slant: each run of
+ * `dash` (on/off lengths, already zoomed) along an edge becomes a
+ * parallelogram `width` thick, its top edge shifted forward by half the
+ * width and its bottom edge back. `at` is the edge's cross-axis position.
+ */
+export declare const getSlantDashQuads: (axis: "horizontal" | "vertical", length: number, at: number, width: number, dash: readonly number[]) => SlantQuad[];
+export type DiagonalStroke = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+/**
+ * The line(s) of a diagonal border across a `width` × `height` cell. A
+ * non-zero `doubleGap` gives the two parallel lines of a double diagonal,
+ * each `doubleGap` away from the corner-to-corner line.
+ */
+export declare const getDiagonalStrokes: (direction: "up" | "down", width: number, height: number, doubleGap?: number) => DiagonalStroke[];
 /**
  * Default CellRenderer
  * @param props

package/dist/esm/components/cell-overlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-overlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,wBAAwB,GAAG,aAAa,GAAG;IACrD,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,qBAAqB,CAAC,EAAE,WAAW,CAAC;IACpC,uBAAuB,CAAC,EAAE,WAAW,CAAC;IACtC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,sBAAsB,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,wBAAwB,EACxB,KAAK,GAAG,UAAU,GAAG,aAAa,CACnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,WAE/C,CAAC;AA6MF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,6BA+ElE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-overlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,wBAAwB,GAAG,aAAa,GAAG;IACrD,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,qBAAqB,CAAC,EAAE,WAAW,CAAC;IACpC,uBAAuB,CAAC,EAAE,WAAW,CAAC;IACtC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,sBAAsB,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,wBAAwB,EACxB,KAAK,GAAG,UAAU,GAAG,aAAa,CACnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,WAE/C,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAC5B,MAAM,YAAY,GAAG,UAAU,EAC/B,QAAQ,MAAM,EACd,IAAI,MAAM,EACV,OAAO,MAAM,EACb,MAAM,SAAS,MAAM,EAAE,KACtB,SAAS,EAyBX,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,IAAI,GAAG,MAAM,EACxB,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,kBAAa,KACZ,cAAc,EAgBhB,CAAC;AAwRF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,6BAmFlE,CAAC"}

package/dist/esm/components/cell-overlay/index.js

@@ -8,11 +8,64 @@ import { DEFAULT_ARRAY } from "../../config";
 export const getOffsetFromWidth = (width) => {
     return width / 2 - 0.5;
 };
+/**
+ * Excel paints `slantDashDot` as dash-dot runs whose ends slant: each run of
+ * `dash` (on/off lengths, already zoomed) along an edge becomes a
+ * parallelogram `width` thick, its top edge shifted forward by half the
+ * width and its bottom edge back. `at` is the edge's cross-axis position.
+ */
+export const getSlantDashQuads = (axis, length, at, width, dash) => {
+    const quads = [];
+    if (!dash.length || width <= 0)
+        return quads;
+    const half = width / 2;
+    let cursor = 0;
+    for (let i = 0; cursor < length && i < 100000; i++) {
+        const run = dash[i % dash.length];
+        if (i % 2 === 0 && run > 0) {
+            const a = cursor;
+            const b = Math.min(length, cursor + run);
+            const points = [
+                [a + half, at - half],
+                [b + half, at - half],
+                [b - half, at + half],
+                [a - half, at + half],
+            ];
+            quads.push(axis === "horizontal"
+                ? points
+                : points.map(([along, across]) => [across, along]));
+        }
+        cursor += run;
+    }
+    return quads;
+};
+/**
+ * The line(s) of a diagonal border across a `width` × `height` cell. A
+ * non-zero `doubleGap` gives the two parallel lines of a double diagonal,
+ * each `doubleGap` away from the corner-to-corner line.
+ */
+export const getDiagonalStrokes = (direction, width, height, doubleGap = 0) => {
+    const base = direction === "down"
+        ? { x1: 0, y1: 0, x2: width, y2: height }
+        : { x1: 0, y1: height, x2: width, y2: 0 };
+    if (!doubleGap)
+        return [base];
+    const length = Math.hypot(width, height) || 1;
+    // Unit normal of the line.
+    const nx = (base.y2 - base.y1) / length;
+    const ny = -(base.x2 - base.x1) / length;
+    return [-1, 1].map((side) => ({
+        x1: base.x1 + side * doubleGap * nx,
+        y1: base.y1 + side * doubleGap * ny,
+        x2: base.x2 + side * doubleGap * nx,
+        y2: base.y2 + side * doubleGap * ny,
+    }));
+};
 /**
  * Only used for strokes
  */
 const CellOverlay = memo((props) => {
-    const { x, y, width, height, strokeDoubleInsetWidth, strokeTopColor, strokeRightColor, strokeBottomColor, strokeLeftColor, strokeDiagonalUpColor, strokeDiagonalDownColor, strokeTopDash = DEFAULT_ARRAY, strokeRightDash = DEFAULT_ARRAY, strokeBottomDash = DEFAULT_ARRAY, strokeLeftDash = DEFAULT_ARRAY, strokeDiagonalUpDash = DEFAULT_ARRAY, strokeDiagonalDownDash = DEFAULT_ARRAY, strokeTopWidth = 0, strokeRightWidth = 0, strokeBottomWidth = 0, strokeLeftWidth = 0, strokeDiagonalUpWidth = 0, strokeDiagonalDownWidth = 0, lineCap, strokeTopStyle, strokeBottomStyle, strokeLeftStyle, strokeRightStyle, cellBackgroundColor, } = props;
+    const { x, y, width, height, strokeDoubleInsetWidth, strokeTopColor, strokeRightColor, strokeBottomColor, strokeLeftColor, strokeDiagonalUpColor, strokeDiagonalDownColor, strokeTopDash = DEFAULT_ARRAY, strokeRightDash = DEFAULT_ARRAY, strokeBottomDash = DEFAULT_ARRAY, strokeLeftDash = DEFAULT_ARRAY, strokeDiagonalUpDash = DEFAULT_ARRAY, strokeDiagonalDownDash = DEFAULT_ARRAY, strokeTopWidth = 0, strokeRightWidth = 0, strokeBottomWidth = 0, strokeLeftWidth = 0, strokeDiagonalUpWidth = 0, strokeDiagonalDownWidth = 0, lineCap, strokeTopStyle, strokeBottomStyle, strokeLeftStyle, strokeRightStyle, strokeDiagonalUpStyle, strokeDiagonalDownStyle, cellBackgroundColor, } = props;
     const userStroke = strokeTopColor ||
         strokeRightColor ||
         strokeBottomColor ||
@@ -23,8 +76,20 @@ const CellOverlay = memo((props) => {
         return null;
     }
     return (React.createElement(Shape, { x: x, y: y, width: width, height: height, listening: false, perfectDrawEnabled: false, sceneFunc: (context, shape) => {
+            const fillSlant = (quads, color) => {
+                context.beginPath();
+                for (const quad of quads) {
+                    quad.forEach(([px, py], index) => index ? context.lineTo(px, py) : context.moveTo(px, py));
+                    context.closePath();
+                }
+                context.setAttr("fillStyle", color);
+                context.fill();
+            };
             /* Top border */
-            if (strokeTopColor) {
+            if (strokeTopColor && strokeTopStyle === "slantDashDot") {
+                fillSlant(getSlantDashQuads("horizontal", shape.width() + 1, 0.5, strokeTopWidth, strokeTopDash), strokeTopColor);
+            }
+            else if (strokeTopColor) {
                 context.beginPath();
                 context.moveTo(strokeLeftColor ? -getOffsetFromWidth(strokeLeftWidth) : 0, 0.5);
                 context.lineTo(shape.width() +
@@ -36,7 +101,10 @@ const CellOverlay = memo((props) => {
                 context.stroke();
             }
             /* Bottom border */
-            if (strokeBottomColor) {
+            if (strokeBottomColor && strokeBottomStyle === "slantDashDot") {
+                fillSlant(getSlantDashQuads("horizontal", shape.width() + 1, shape.height() + 0.5, strokeBottomWidth, strokeBottomDash), strokeBottomColor);
+            }
+            else if (strokeBottomColor) {
                 context.beginPath();
                 context.moveTo(strokeLeftColor ? -getOffsetFromWidth(strokeLeftWidth) : 0, shape.height() + 0.5);
                 context.lineTo(shape.width() +
@@ -48,7 +116,10 @@ const CellOverlay = memo((props) => {
                 context.stroke();
             }
             /* Left border */
-            if (strokeLeftColor) {
+            if (strokeLeftColor && strokeLeftStyle === "slantDashDot") {
+                fillSlant(getSlantDashQuads("vertical", shape.height() + 1, 0.5, strokeLeftWidth, strokeLeftDash), strokeLeftColor);
+            }
+            else if (strokeLeftColor) {
                 context.beginPath();
                 context.moveTo(0.5, strokeTopColor ? -getOffsetFromWidth(strokeTopWidth) : 0);
                 context.lineTo(0.5, shape.height() +
@@ -62,7 +133,10 @@ const CellOverlay = memo((props) => {
                 context.stroke();
             }
             /* Right border */
-            if (strokeRightColor) {
+            if (strokeRightColor && strokeRightStyle === "slantDashDot") {
+                fillSlant(getSlantDashQuads("vertical", shape.height() + 1, shape.width() + 0.5, strokeRightWidth, strokeRightDash), strokeRightColor);
+            }
+            else if (strokeRightColor) {
                 context.beginPath();
                 context.moveTo(shape.width() + 0.5, strokeTopColor ? -getOffsetFromWidth(strokeTopWidth) : 0);
                 context.lineTo(shape.width() + 0.5, shape.height() +
@@ -112,26 +186,38 @@ const CellOverlay = memo((props) => {
                 }
                 context.closePath();
             }
-            /* Diagonal: top-left to bottom-right (diagonalDown) */
-            if (strokeDiagonalDownColor) {
+            /* Diagonals: top-left → bottom-right (diagonalDown), bottom-left →
+               top-right (diagonalUp). A double diagonal is two thin parallel
+               lines, as Excel draws it. */
+            const diagonals = [
+                {
+                    direction: "down",
+                    color: strokeDiagonalDownColor,
+                    width: strokeDiagonalDownWidth,
+                    dash: strokeDiagonalDownDash,
+                    style: strokeDiagonalDownStyle,
+                },
+                {
+                    direction: "up",
+                    color: strokeDiagonalUpColor,
+                    width: strokeDiagonalUpWidth,
+                    dash: strokeDiagonalUpDash,
+                    style: strokeDiagonalUpStyle,
+                },
+            ];
+            for (const diagonal of diagonals) {
+                if (!diagonal.color)
+                    continue;
+                const isDouble = diagonal.style === "double";
                 context.beginPath();
-                context.moveTo(0, 0);
-                context.lineTo(shape.width(), shape.height());
-                context.setAttr("strokeStyle", strokeDiagonalDownColor);
-                context.setAttr("lineWidth", strokeDiagonalDownWidth);
-                context.setAttr("lineCap", lineCap);
-                context.setLineDash(strokeDiagonalDownDash);
-                context.stroke();
-            }
-            /* Diagonal: bottom-left to top-right (diagonalUp) */
-            if (strokeDiagonalUpColor) {
-                context.beginPath();
-                context.moveTo(0, shape.height());
-                context.lineTo(shape.width(), 0);
-                context.setAttr("strokeStyle", strokeDiagonalUpColor);
-                context.setAttr("lineWidth", strokeDiagonalUpWidth);
+                for (const line of getDiagonalStrokes(diagonal.direction, shape.width(), shape.height(), isDouble ? diagonal.width / 3 : 0)) {
+                    context.moveTo(line.x1, line.y1);
+                    context.lineTo(line.x2, line.y2);
+                }
+                context.setAttr("strokeStyle", diagonal.color);
+                context.setAttr("lineWidth", isDouble ? diagonal.width / 3 : diagonal.width);
                 context.setAttr("lineCap", lineCap);
-                context.setLineDash(strokeDiagonalUpDash);
+                context.setLineDash(diagonal.dash);
                 context.stroke();
             }
         } }));
@@ -141,7 +227,7 @@ const CellOverlay = memo((props) => {
  * @param props
  */
 export const CellOverlayRenderer = (props) => {
-    const { x, y, width, height, stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeLeftColor = stroke, strokeDiagonalUpColor, strokeDiagonalDownColor, strokeDash = DEFAULT_ARRAY, strokeTopDash = DEFAULT_ARRAY, strokeRightDash = DEFAULT_ARRAY, strokeBottomDash = DEFAULT_ARRAY, strokeLeftDash = DEFAULT_ARRAY, strokeDiagonalUpDash = DEFAULT_ARRAY, strokeDiagonalDownDash = DEFAULT_ARRAY, strokeWidth = 1, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, strokeDiagonalUpWidth = strokeWidth, strokeDiagonalDownWidth = strokeWidth, strokeTopStyle, strokeBottomStyle, strokeLeftStyle, strokeRightStyle, cellBackgroundColor, lineCap = "butt", key, strokeDoubleInsetWidth = 1, } = props;
+    const { x, y, width, height, stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeLeftColor = stroke, strokeDiagonalUpColor, strokeDiagonalDownColor, strokeDash = DEFAULT_ARRAY, strokeTopDash = DEFAULT_ARRAY, strokeRightDash = DEFAULT_ARRAY, strokeBottomDash = DEFAULT_ARRAY, strokeLeftDash = DEFAULT_ARRAY, strokeDiagonalUpDash = DEFAULT_ARRAY, strokeDiagonalDownDash = DEFAULT_ARRAY, strokeWidth = 1, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, strokeDiagonalUpWidth = strokeWidth, strokeDiagonalDownWidth = strokeWidth, strokeTopStyle, strokeBottomStyle, strokeLeftStyle, strokeRightStyle, strokeDiagonalUpStyle, strokeDiagonalDownStyle, cellBackgroundColor, lineCap = "butt", key, strokeDoubleInsetWidth = 1, } = props;
     const userStroke = strokeTopColor ||
         strokeRightColor ||
         strokeBottomColor ||
@@ -150,6 +236,6 @@ export const CellOverlayRenderer = (props) => {
         strokeDiagonalDownColor;
     if (!userStroke)
         return null;
-    return (React.createElement(CellOverlay, { key: key, x: x, y: y, strokeDoubleInsetWidth: strokeDoubleInsetWidth, width: width, height: height, strokeTopColor: strokeTopColor, strokeRightColor: strokeRightColor, strokeBottomColor: strokeBottomColor, strokeLeftColor: strokeLeftColor, strokeDiagonalUpColor: strokeDiagonalUpColor, strokeDiagonalDownColor: strokeDiagonalDownColor, strokeDash: strokeDash, strokeTopDash: strokeTopDash, strokeRightDash: strokeRightDash, strokeBottomDash: strokeBottomDash, strokeLeftDash: strokeLeftDash, strokeDiagonalUpDash: strokeDiagonalUpDash, strokeDiagonalDownDash: strokeDiagonalDownDash, strokeTopWidth: strokeTopWidth, strokeRightWidth: strokeRightWidth, strokeBottomWidth: strokeBottomWidth, strokeLeftWidth: strokeLeftWidth, strokeDiagonalUpWidth: strokeDiagonalUpWidth, strokeDiagonalDownWidth: strokeDiagonalDownWidth, lineCap: lineCap, strokeTopStyle: strokeTopStyle, strokeBottomStyle: strokeBottomStyle, strokeLeftStyle: strokeLeftStyle, strokeRightStyle: strokeRightStyle, cellBackgroundColor: cellBackgroundColor }));
+    return (React.createElement(CellOverlay, { key: key, x: x, y: y, strokeDoubleInsetWidth: strokeDoubleInsetWidth, width: width, height: height, strokeTopColor: strokeTopColor, strokeRightColor: strokeRightColor, strokeBottomColor: strokeBottomColor, strokeLeftColor: strokeLeftColor, strokeDiagonalUpColor: strokeDiagonalUpColor, strokeDiagonalDownColor: strokeDiagonalDownColor, strokeDash: strokeDash, strokeTopDash: strokeTopDash, strokeRightDash: strokeRightDash, strokeBottomDash: strokeBottomDash, strokeLeftDash: strokeLeftDash, strokeDiagonalUpDash: strokeDiagonalUpDash, strokeDiagonalDownDash: strokeDiagonalDownDash, strokeTopWidth: strokeTopWidth, strokeRightWidth: strokeRightWidth, strokeBottomWidth: strokeBottomWidth, strokeLeftWidth: strokeLeftWidth, strokeDiagonalUpWidth: strokeDiagonalUpWidth, strokeDiagonalDownWidth: strokeDiagonalDownWidth, lineCap: lineCap, strokeTopStyle: strokeTopStyle, strokeBottomStyle: strokeBottomStyle, strokeLeftStyle: strokeLeftStyle, strokeRightStyle: strokeRightStyle, strokeDiagonalUpStyle: strokeDiagonalUpStyle, strokeDiagonalDownStyle: strokeDiagonalDownStyle, cellBackgroundColor: cellBackgroundColor }));
 };
 CellOverlay.displayName = "CellOverlay";

package/dist/esm/components/cf-icon-preview/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { type CfIconPaintContext } from "../../api/cf-icons";
+/** A DOM 2D context exposed through the painter's `setAttr` contract. */
+export declare const toCfIconPaintContext: (ctx: CanvasRenderingContext2D) => CfIconPaintContext;
+export type CfIconPreviewProps = {
+    iconSet: string;
+    iconId: number;
+    /** CSS pixel size of the square icon. */
+    size?: number;
+};
+/**
+ * One conditional-format icon, drawn by the same painter the grid uses — for
+ * the rule editor's icon-style and per-icon pickers.
+ */
+export declare const CfIconPreview: ({ iconSet, iconId, size, }: CfIconPreviewProps) => React.JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/cf-icon-preview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cf-icon-preview/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EACL,KAAK,kBAAkB,EAGxB,MAAM,oBAAoB,CAAC;AAE5B,yEAAyE;AACzE,eAAO,MAAM,oBAAoB,GAC/B,KAAK,wBAAwB,KAC5B,kBAsBD,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,4BAI3B,kBAAkB,6BAuBpB,CAAC"}

package/dist/esm/components/cf-icon-preview/index.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from "react";
+import { getCfIcon, paintCfIcon, } from "../../api/cf-icons";
+/** A DOM 2D context exposed through the painter's `setAttr` contract. */
+export const toCfIconPaintContext = (ctx) => ({
+    save: () => ctx.save(),
+    restore: () => ctx.restore(),
+    beginPath: () => ctx.beginPath(),
+    closePath: () => ctx.closePath(),
+    moveTo: (x, y) => ctx.moveTo(x, y),
+    lineTo: (x, y) => ctx.lineTo(x, y),
+    arc: (x, y, r, start, end, ccw) => ctx.arc(x, y, r, start, end, ccw),
+    rect: (x, y, w, h) => ctx.rect(x, y, w, h),
+    fill: () => ctx.fill(),
+    stroke: () => ctx.stroke(),
+    clip: () => ctx.clip(),
+    setAttr: (attr, value) => {
+        ctx[attr] = value;
+    },
+});
+/**
+ * One conditional-format icon, drawn by the same painter the grid uses — for
+ * the rule editor's icon-style and per-icon pickers.
+ */
+export const CfIconPreview = ({ iconSet, iconId, size = 16, }) => {
+    const ref = useRef(null);
+    const icon = getCfIcon(iconSet, iconId);
+    useEffect(() => {
+        const canvas = ref.current;
+        const ctx = canvas?.getContext("2d");
+        if (!canvas || !ctx || !icon)
+            return;
+        const ratio = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+        canvas.width = size * ratio;
+        canvas.height = size * ratio;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        paintCfIcon(toCfIconPaintContext(ctx), icon, 0, 0, size * ratio);
+    }, [icon, size]);
+    if (!icon)
+        return null;
+    return (React.createElement("canvas", { ref: ref, "data-cf-icon": `${iconSet}:${iconId}`, style: { width: size, height: size, display: "inline-block" }, "aria-hidden": true }));
+};

package/dist/esm/components/embeds/embed-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"embed-component.d.ts","sourceRoot":"","sources":["../../../../components/embeds/embed-component.tsx"],"names":[],"mappings":"AASA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EACV,cAAc,EAKf,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKhF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,gBAAgB,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,kBAAkB,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,cAAc,wHAUtB,mBAAmB,uBA4NvB,CAAC"}
+{"version":3,"file":"embed-component.d.ts","sourceRoot":"","sources":["../../../../components/embeds/embed-component.tsx"],"names":[],"mappings":"AASA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EACV,cAAc,EAKf,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKhF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,gBAAgB,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,kBAAkB,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,cAAc,wHAUtB,mBAAmB,uBA+NvB,CAAC"}

package/dist/esm/components/embeds/embed-component.js

@@ -1,7 +1,7 @@
 import { DotsVerticalIcon } from "@rowsncolumns/icons";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger, IconButton, } from "@rowsncolumns/ui";
 import React, { memo } from "react";
-import { getStringifiedColor } from "../../themes";
+import { getStringifiedColor, resolveThemeFontFamily } from "../../themes";
 import { resolveCanvasTextAlign } from "../cell/alignment";
 import { ShapeSvg } from "./shape-svg";
 export const EmbedComponent = memo(({ embed, width, height, readonly, isSelected, onDeleteEmbed, onRequestEditEmbed, theme, }) => {
@@ -13,7 +13,7 @@ export const EmbedComponent = memo(({ embed, width, height, readonly, isSelected
             ? getStringifiedColor(spec.textFormat.color, theme)
             : undefined;
         const textStyle = {
-            fontFamily: spec.textFormat?.fontFamily || undefined,
+            fontFamily: resolveThemeFontFamily(spec.textFormat?.fontFamily, theme) || undefined,
             fontSize: spec.textFormat?.fontSize
                 ? `${spec.textFormat.fontSize * (spec.textFormat?.baselineOffset ? 0.58 : 1)}px`
                 : spec.textFormat?.baselineOffset
@@ -72,7 +72,8 @@ export const EmbedComponent = memo(({ embed, width, height, readonly, isSelected
             return (React.createElement("div", { style: containerStyle },
                 React.createElement("div", { style: textStyle }, spec.richText.map((run, index) => {
                     const runStyle = {
-                        fontFamily: run.format?.fontFamily || undefined,
+                        fontFamily: resolveThemeFontFamily(run.format?.fontFamily, theme) ||
+                            undefined,
                         fontSize: run.format?.fontSize
                             ? `${run.format.fontSize * (run.format?.baselineOffset ? 0.58 : 1)}px`
                             : run.format?.baselineOffset

package/dist/esm/components/hidden-markers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/hidden-markers/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,UAAU,GAAG;IAChB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,kBAAkB,EAAE,MAAM,EAAE,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG;IAClD,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG;IAC/C,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,yDAIjC,wBAAwB,sBAyB1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,sDAI9B,qBAAqB,sBA6BvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/hidden-markers/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,UAAU,GAAG;IAChB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,kBAAkB,EAAE,MAAM,EAAE,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG;IAClD,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG;IAC/C,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,yDAIjC,wBAAwB,sBA0B1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,sDAI9B,qBAAqB,sBA8BvB,CAAC"}

package/dist/esm/components/hidden-markers/index.js

@@ -1,7 +1,6 @@
 import { useGridContext } from "@rowsncolumns/grid";
-import { TriangleDownIcon, TriangleLeftIcon, TriangleRightIcon, TriangleUpIcon, } from "@rowsncolumns/icons";
 import React from "react";
-import { StyledHiddenMarkerButton } from "./style";
+import { HiddenDoubleLine, StyledHiddenMarkerButton } from "./style";
 export const HiddenColumnMarkers = ({ hiddenDimensions, expandedDimensions, onShowColumn, }) => {
     const { getCellOffsetFromCoords } = useGridContext();
     const markers = hiddenDimensions.map((columnIndex, index) => {
@@ -9,12 +8,13 @@ export const HiddenColumnMarkers = ({ hiddenDimensions, expandedDimensions, onSh
             rowIndex: 0,
             columnIndex,
         });
-        const { x = 0, y = 0 } = position ?? {};
+        const { x = 0, y = 0, height = 0 } = position ?? {};
+        // Excel marks hidden columns with a double line on the header boundary.
         return (React.createElement(StyledHiddenMarkerButton, { style: {
                 transform: `translate3d(${x}px, ${y}px, 0)`,
+                height,
             }, key: columnIndex, onClick: () => onShowColumn?.(expandedDimensions[index]), "aria-label": "Show column", tooltip: "Show column" },
-            React.createElement(TriangleLeftIcon, null),
-            React.createElement(TriangleRightIcon, null)));
+            React.createElement(HiddenDoubleLine, null)));
     });
     return React.createElement(React.Fragment, null, markers);
 };
@@ -25,15 +25,16 @@ export const HiddenRowMarkers = ({ hiddenDimensions, expandedDimensions, onShowR
             rowIndex,
             columnIndex: 0,
         });
-        const { x = 0, y = 0 } = position ?? {};
+        const { x = 0, y = 0, width = 0 } = position ?? {};
+        // Excel marks hidden rows with a double line on the header boundary.
         return (React.createElement(StyledHiddenMarkerButton, { style: {
                 position: "absolute",
                 left: x,
                 top: y,
+                width,
                 pointerEvents: "all",
             }, key: rowIndex, onClick: () => onShowRow?.(expandedDimensions[index]), isVertical: true, "aria-label": "Show row", tooltip: "Show row" },
-            React.createElement(TriangleUpIcon, null),
-            React.createElement(TriangleDownIcon, null)));
+            React.createElement(HiddenDoubleLine, { isVertical: true })));
     });
     return React.createElement(React.Fragment, null, markers);
 };

package/dist/esm/components/hidden-markers/style.d.ts

@@ -2,4 +2,11 @@ import React from "react";
 export declare const StyledHiddenMarkerButton: React.ForwardRefExoticComponent<Omit<import("@rowsncolumns/ui").IconButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
     isVertical?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Two 1 px lines with a 1 px gap — Excel's marker for hidden rows / columns
+ * in the headers.
+ */
+export declare const HiddenDoubleLine: ({ isVertical }: {
+    isVertical?: boolean;
+}) => React.JSX.Element;
 //# sourceMappingURL=style.d.ts.map

package/dist/esm/components/hidden-markers/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/hidden-markers/style.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,wBAAwB;iBAEgC,OAAO;2CAY1E,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/hidden-markers/style.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,wBAAwB;iBAEgC,OAAO;2CAY1E,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,gBAAgB;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,sBAWxE,CAAC"}

package/dist/esm/components/hidden-markers/style.js

@@ -1,4 +1,11 @@
 import { cn, IconButton } from "@rowsncolumns/ui";
 import React from "react";
-export const StyledHiddenMarkerButton = React.forwardRef(({ className, isVertical, ...props }, ref) => (React.createElement(IconButton, { ref: ref, className: cn("flex absolute border-none p-0 rounded-sm bg-none left-0 top-0 pointer-events-auto w-[30px] h-[15px] mt-[5px] -ml-[15px]", "bg-transparent text-rnc-foreground hover:bg-rnc-background hover:shadow-md print:hidden min-h-0 min-w-0", isVertical ? "w-[15px] h-[30px] ml-px -mt-[15px] flex-col" : undefined, className), ...props })));
+export const StyledHiddenMarkerButton = React.forwardRef(({ className, isVertical, ...props }, ref) => (React.createElement(IconButton, { ref: ref, className: cn("flex absolute border-none p-0 rounded-none left-0 top-0 pointer-events-auto w-[5px] -ml-[2px] justify-center items-stretch", "bg-transparent hover:bg-transparent print:hidden min-h-0 min-w-0", isVertical ? "h-[5px] -mt-[2px] ml-0 flex-col" : undefined, className), ...props })));
 StyledHiddenMarkerButton.displayName = "StyledHiddenMarkerButton";
+/**
+ * Two 1 px lines with a 1 px gap — Excel's marker for hidden rows / columns
+ * in the headers.
+ */
+export const HiddenDoubleLine = ({ isVertical }) => (React.createElement("span", { "aria-hidden": true, "data-hidden-double-line": "", className: cn("block border-rnc-foreground/60", isVertical
+        ? "w-full h-[3px] border-y border-solid"
+        : "h-full w-[3px] border-x border-solid") }));