@rowsncolumns/spreadsheet 10.6.0 → 10.6.4

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

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCellNumberFormatLayout = exports.layoutNumberFormatParts = void 0;
+// 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.
+var utils_1 = require("@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.
+ */
+var layoutNumberFormatParts = function (_a) {
+    var parts = _a.parts, measure = _a.measure, availableWidth = _a.availableWidth, align = _a.align;
+    var widthOf = function (part) {
+        switch (part.type) {
+            case "text":
+                return measure(part.text);
+            case "skip":
+                return measure(part.char);
+            case "digit":
+                return measure("0");
+            default:
+                return 0;
+        }
+    };
+    var fillIndex = parts.findIndex(function (part) { return part.type === "fill"; });
+    // Excel honours one `*` per section; a later one paints nothing.
+    var widths = parts.map(widthOf);
+    var fixedWidth = widths.reduce(function (total, width) { return total + width; }, 0);
+    if (fixedWidth > availableWidth + 0.5)
+        return undefined;
+    var runs = [];
+    var pushRuns = function (from, to, startX) {
+        var cursor = startX;
+        for (var i = from; i < to; i++) {
+            var 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) {
+        var offset = align === "right"
+            ? availableWidth - fixedWidth
+            : align === "center"
+                ? (availableWidth - fixedWidth) / 2
+                : 0;
+        var end = pushRuns(0, parts.length, offset);
+        return { runs: runs, start: offset, end: end };
+    }
+    var fill = parts[fillIndex];
+    var leftEnd = pushRuns(0, fillIndex, 0);
+    var rightWidth = widths
+        .slice(fillIndex + 1)
+        .reduce(function (total, width) { return total + width; }, 0);
+    var rightStart = availableWidth - rightWidth;
+    var fillCharWidth = measure(fill.char);
+    var gap = rightStart - leftEnd;
+    var copies = fillCharWidth > 0 ? Math.max(0, Math.floor(gap / fillCharWidth + 1e-6)) : 0;
+    var 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: runs, start: 0, end: availableWidth };
+};
+exports.layoutNumberFormatParts = layoutNumberFormatParts;
+var LAYOUT_CACHE_LIMIT = 2048;
+var 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.
+ */
+var getCellNumberFormatLayout = function (pattern, value, formattedValue, locale) {
+    var _a;
+    if (!pattern || value === null || value === undefined || !formattedValue) {
+        return undefined;
+    }
+    var key = "".concat(locale !== null && locale !== void 0 ? locale : "", "\0").concat(pattern, "\0").concat(typeof value, "\0").concat(value);
+    var parts = layoutCache.get(key);
+    if (parts === undefined) {
+        parts = (_a = (0, utils_1.ssfFormatLayout)(pattern, value, locale)) !== null && _a !== void 0 ? _a : null;
+        if (layoutCache.size >= LAYOUT_CACHE_LIMIT)
+            layoutCache.clear();
+        layoutCache.set(key, parts);
+    }
+    if (!parts)
+        return undefined;
+    return (0, utils_1.numberFormatLayoutText)(parts) === formattedValue ? parts : undefined;
+};
+exports.getCellNumberFormatLayout = getCellNumberFormatLayout;

package/dist/cjs/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/cjs/components/cell/typings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typings.d.ts","sourceRoot":"","sources":["../../../../components/cell/typings.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"typings.d.ts","sourceRoot":"","sources":["../../../../components/cell/typings.ts"],"names":[],"mappings":"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"}

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

@@ -281,9 +281,9 @@ exports.CellEditor = (0, react_1.memo)(function (_a) {
     return (react_1.default.createElement(style_1.StyledEditor, { "aria-readonly": readOnly || undefined, style: tslib_1.__assign({ top: y, left: isRightAligned ? "auto" : x, right: isRightAligned
                 ? containerWidth - (x + cellWidth + borderWidth / 2)
                 : "auto", minWidth: minWidth, minHeight: minHeight, paddingLeft: finalHorizontalAlignment === "left"
-                ? config_1.INDENT_SPACING * indent + 1
+                ? config_1.INDENT_SPACING * indent * scale + 1
                 : 0, paddingRight: finalHorizontalAlignment === "right"
-                ? config_1.INDENT_SPACING * indent + 1
+                ? config_1.INDENT_SPACING * indent * scale + 1
                 : 0, maxWidth: maxWidth, maxHeight: maxHeight, backgroundColor: finalEditorBackgroundColor, borderColor: editorBorderColor, outlineColor: editorBorderOutlineColor, outlineWidth: 2, color: formulaMode ? defaultTextColor : editorColor, fontSize: fontSize * scale, fontFamily: fontFamily, textAlign: (0, alignment_1.resolveCanvasTextAlign)(finalHorizontalAlignment), fontWeight: fontWeight, fontStyle: fontStyle, textDecoration: textDecoration, justifyContent: justifyContent, lineHeight: "normal" }, (isInvisible
             ? {
                 width: 0,

package/dist/cjs/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/cjs/components/cell-filter/index.js

@@ -11,7 +11,7 @@ var helpers_1 = require("../../helpers");
  * Filter icon
  */
 var CellFilter = function (_a) {
-    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.width, width = _d === void 0 ? 0 : _d, _e = _a.height, height = _e === void 0 ? 0 : _e, rowIndex = _a.rowIndex, columnIndex = _a.columnIndex, scale = _a.scale, onClick = _a.onClick, isActive = _a.isActive, _f = _a.filterIconColor, filterIconColor = _f === void 0 ? "green" : _f, backgroundColor = _a.backgroundColor, verticalAlignment = _a.verticalAlignment, sortOrder = _a.sortOrder;
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.width, width = _d === void 0 ? 0 : _d, _e = _a.height, height = _e === void 0 ? 0 : _e, rowIndex = _a.rowIndex, columnIndex = _a.columnIndex, scale = _a.scale, onClick = _a.onClick, isActive = _a.isActive, _f = _a.filterIconColor, filterIconColor = _f === void 0 ? config_1.FILTER_BUTTON_GLYPH_COLOR : _f, verticalAlignment = _a.verticalAlignment, sortOrder = _a.sortOrder;
     var cellSpacing = config_1.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.
@@ -43,8 +43,8 @@ var CellFilter = function (_a) {
             event.evt.stopPropagation();
         }, perfectDrawEnabled: false, onMouseDown: function (e) { return e.evt.preventDefault(); } },
         react_1.default.createElement(react_konva_1.Rect, { x: posX, y: posY, width: config_1.FILTER_ICON_WIDTH * scale, height: config_1.FILTER_ICON_WIDTH * scale, fill: isHovered
-                ? (0, utils_1.lightenColor)(0.2, filterIconColor !== null && filterIconColor !== void 0 ? filterIconColor : "green")
-                : backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : undefined, cornerRadius: 0, perfectDrawEnabled: false, stroke: filterIconColor !== null && filterIconColor !== void 0 ? filterIconColor : undefined, strokeWidth: 1, hitStrokeWidth: 0 }),
+                ? (0, utils_1.lightenColor)(0.2, filterIconColor !== null && filterIconColor !== void 0 ? filterIconColor : config_1.FILTER_BUTTON_GLYPH_COLOR)
+                : config_1.FILTER_BUTTON_FILL_COLOR, cornerRadius: 0, perfectDrawEnabled: false, stroke: config_1.FILTER_BUTTON_BORDER_COLOR, strokeWidth: 1, hitStrokeWidth: 0 }),
         sortIconPath ? (react_1.default.createElement(react_konva_1.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_1.default.createElement(react_konva_1.Path, { data: isActive ? config_1.FUNNEL_ICON_PATH : config_1.FITLER_ICON_PATH, x: posX + 0.5 + glyphOffset, y: posY + 0.5 + glyphOffset, fill: iconFill, scaleY: glyphScale, scaleX: glyphScale, perfectDrawEnabled: false })));
 };

package/dist/cjs/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/cjs/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/cjs/components/cell-overlay/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CellOverlayRenderer = exports.getOffsetFromWidth = void 0;
+exports.CellOverlayRenderer = exports.getDiagonalStrokes = exports.getSlantDashQuads = exports.getOffsetFromWidth = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_konva_1 = require("react-konva");
@@ -13,11 +13,70 @@ var getOffsetFromWidth = function (width) {
     return width / 2 - 0.5;
 };
 exports.getOffsetFromWidth = getOffsetFromWidth;
+/**
+ * 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.
+ */
+var getSlantDashQuads = function (axis, length, at, width, dash) {
+    var quads = [];
+    if (!dash.length || width <= 0)
+        return quads;
+    var half = width / 2;
+    var cursor = 0;
+    for (var i = 0; cursor < length && i < 100000; i++) {
+        var run = dash[i % dash.length];
+        if (i % 2 === 0 && run > 0) {
+            var a = cursor;
+            var b = Math.min(length, cursor + run);
+            var points = [
+                [a + half, at - half],
+                [b + half, at - half],
+                [b - half, at + half],
+                [a - half, at + half],
+            ];
+            quads.push(axis === "horizontal"
+                ? points
+                : points.map(function (_a) {
+                    var _b = tslib_1.__read(_a, 2), along = _b[0], across = _b[1];
+                    return [across, along];
+                }));
+        }
+        cursor += run;
+    }
+    return quads;
+};
+exports.getSlantDashQuads = getSlantDashQuads;
+/**
+ * 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.
+ */
+var getDiagonalStrokes = function (direction, width, height, doubleGap) {
+    if (doubleGap === void 0) { doubleGap = 0; }
+    var base = direction === "down"
+        ? { x1: 0, y1: 0, x2: width, y2: height }
+        : { x1: 0, y1: height, x2: width, y2: 0 };
+    if (!doubleGap)
+        return [base];
+    var length = Math.hypot(width, height) || 1;
+    // Unit normal of the line.
+    var nx = (base.y2 - base.y1) / length;
+    var ny = -(base.x2 - base.x1) / length;
+    return [-1, 1].map(function (side) { return ({
+        x1: base.x1 + side * doubleGap * nx,
+        y1: base.y1 + side * doubleGap * ny,
+        x2: base.x2 + side * doubleGap * nx,
+        y2: base.y2 + side * doubleGap * ny,
+    }); });
+};
+exports.getDiagonalStrokes = getDiagonalStrokes;
 /**
  * Only used for strokes
  */
 var CellOverlay = (0, react_1.memo)(function (props) {
-    var x = props.x, y = props.y, width = props.width, height = props.height, strokeDoubleInsetWidth = props.strokeDoubleInsetWidth, strokeTopColor = props.strokeTopColor, strokeRightColor = props.strokeRightColor, strokeBottomColor = props.strokeBottomColor, strokeLeftColor = props.strokeLeftColor, strokeDiagonalUpColor = props.strokeDiagonalUpColor, strokeDiagonalDownColor = props.strokeDiagonalDownColor, _a = props.strokeTopDash, strokeTopDash = _a === void 0 ? config_1.DEFAULT_ARRAY : _a, _b = props.strokeRightDash, strokeRightDash = _b === void 0 ? config_1.DEFAULT_ARRAY : _b, _c = props.strokeBottomDash, strokeBottomDash = _c === void 0 ? config_1.DEFAULT_ARRAY : _c, _d = props.strokeLeftDash, strokeLeftDash = _d === void 0 ? config_1.DEFAULT_ARRAY : _d, _e = props.strokeDiagonalUpDash, strokeDiagonalUpDash = _e === void 0 ? config_1.DEFAULT_ARRAY : _e, _f = props.strokeDiagonalDownDash, strokeDiagonalDownDash = _f === void 0 ? config_1.DEFAULT_ARRAY : _f, _g = props.strokeTopWidth, strokeTopWidth = _g === void 0 ? 0 : _g, _h = props.strokeRightWidth, strokeRightWidth = _h === void 0 ? 0 : _h, _j = props.strokeBottomWidth, strokeBottomWidth = _j === void 0 ? 0 : _j, _k = props.strokeLeftWidth, strokeLeftWidth = _k === void 0 ? 0 : _k, _l = props.strokeDiagonalUpWidth, strokeDiagonalUpWidth = _l === void 0 ? 0 : _l, _m = props.strokeDiagonalDownWidth, strokeDiagonalDownWidth = _m === void 0 ? 0 : _m, lineCap = props.lineCap, strokeTopStyle = props.strokeTopStyle, strokeBottomStyle = props.strokeBottomStyle, strokeLeftStyle = props.strokeLeftStyle, strokeRightStyle = props.strokeRightStyle, cellBackgroundColor = props.cellBackgroundColor;
+    var x = props.x, y = props.y, width = props.width, height = props.height, strokeDoubleInsetWidth = props.strokeDoubleInsetWidth, strokeTopColor = props.strokeTopColor, strokeRightColor = props.strokeRightColor, strokeBottomColor = props.strokeBottomColor, strokeLeftColor = props.strokeLeftColor, strokeDiagonalUpColor = props.strokeDiagonalUpColor, strokeDiagonalDownColor = props.strokeDiagonalDownColor, _a = props.strokeTopDash, strokeTopDash = _a === void 0 ? config_1.DEFAULT_ARRAY : _a, _b = props.strokeRightDash, strokeRightDash = _b === void 0 ? config_1.DEFAULT_ARRAY : _b, _c = props.strokeBottomDash, strokeBottomDash = _c === void 0 ? config_1.DEFAULT_ARRAY : _c, _d = props.strokeLeftDash, strokeLeftDash = _d === void 0 ? config_1.DEFAULT_ARRAY : _d, _e = props.strokeDiagonalUpDash, strokeDiagonalUpDash = _e === void 0 ? config_1.DEFAULT_ARRAY : _e, _f = props.strokeDiagonalDownDash, strokeDiagonalDownDash = _f === void 0 ? config_1.DEFAULT_ARRAY : _f, _g = props.strokeTopWidth, strokeTopWidth = _g === void 0 ? 0 : _g, _h = props.strokeRightWidth, strokeRightWidth = _h === void 0 ? 0 : _h, _j = props.strokeBottomWidth, strokeBottomWidth = _j === void 0 ? 0 : _j, _k = props.strokeLeftWidth, strokeLeftWidth = _k === void 0 ? 0 : _k, _l = props.strokeDiagonalUpWidth, strokeDiagonalUpWidth = _l === void 0 ? 0 : _l, _m = props.strokeDiagonalDownWidth, strokeDiagonalDownWidth = _m === void 0 ? 0 : _m, lineCap = props.lineCap, strokeTopStyle = props.strokeTopStyle, strokeBottomStyle = props.strokeBottomStyle, strokeLeftStyle = props.strokeLeftStyle, strokeRightStyle = props.strokeRightStyle, strokeDiagonalUpStyle = props.strokeDiagonalUpStyle, strokeDiagonalDownStyle = props.strokeDiagonalDownStyle, cellBackgroundColor = props.cellBackgroundColor;
     var userStroke = strokeTopColor ||
         strokeRightColor ||
         strokeBottomColor ||
@@ -28,8 +87,35 @@ var CellOverlay = (0, react_1.memo)(function (props) {
         return null;
     }
     return (react_1.default.createElement(react_konva_1.Shape, { x: x, y: y, width: width, height: height, listening: false, perfectDrawEnabled: false, sceneFunc: function (context, shape) {
+            var e_1, _a, e_2, _b;
+            var fillSlant = function (quads, color) {
+                var e_3, _a;
+                context.beginPath();
+                try {
+                    for (var quads_1 = tslib_1.__values(quads), quads_1_1 = quads_1.next(); !quads_1_1.done; quads_1_1 = quads_1.next()) {
+                        var quad = quads_1_1.value;
+                        quad.forEach(function (_a, index) {
+                            var _b = tslib_1.__read(_a, 2), px = _b[0], py = _b[1];
+                            return index ? context.lineTo(px, py) : context.moveTo(px, py);
+                        });
+                        context.closePath();
+                    }
+                }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                finally {
+                    try {
+                        if (quads_1_1 && !quads_1_1.done && (_a = quads_1.return)) _a.call(quads_1);
+                    }
+                    finally { if (e_3) throw e_3.error; }
+                }
+                context.setAttr("fillStyle", color);
+                context.fill();
+            };
             /* Top border */
-            if (strokeTopColor) {
+            if (strokeTopColor && strokeTopStyle === "slantDashDot") {
+                fillSlant((0, exports.getSlantDashQuads)("horizontal", shape.width() + 1, 0.5, strokeTopWidth, strokeTopDash), strokeTopColor);
+            }
+            else if (strokeTopColor) {
                 context.beginPath();
                 context.moveTo(strokeLeftColor ? -(0, exports.getOffsetFromWidth)(strokeLeftWidth) : 0, 0.5);
                 context.lineTo(shape.width() +
@@ -41,7 +127,10 @@ var CellOverlay = (0, react_1.memo)(function (props) {
                 context.stroke();
             }
             /* Bottom border */
-            if (strokeBottomColor) {
+            if (strokeBottomColor && strokeBottomStyle === "slantDashDot") {
+                fillSlant((0, exports.getSlantDashQuads)("horizontal", shape.width() + 1, shape.height() + 0.5, strokeBottomWidth, strokeBottomDash), strokeBottomColor);
+            }
+            else if (strokeBottomColor) {
                 context.beginPath();
                 context.moveTo(strokeLeftColor ? -(0, exports.getOffsetFromWidth)(strokeLeftWidth) : 0, shape.height() + 0.5);
                 context.lineTo(shape.width() +
@@ -53,7 +142,10 @@ var CellOverlay = (0, react_1.memo)(function (props) {
                 context.stroke();
             }
             /* Left border */
-            if (strokeLeftColor) {
+            if (strokeLeftColor && strokeLeftStyle === "slantDashDot") {
+                fillSlant((0, exports.getSlantDashQuads)("vertical", shape.height() + 1, 0.5, strokeLeftWidth, strokeLeftDash), strokeLeftColor);
+            }
+            else if (strokeLeftColor) {
                 context.beginPath();
                 context.moveTo(0.5, strokeTopColor ? -(0, exports.getOffsetFromWidth)(strokeTopWidth) : 0);
                 context.lineTo(0.5, shape.height() +
@@ -67,7 +159,10 @@ var CellOverlay = (0, react_1.memo)(function (props) {
                 context.stroke();
             }
             /* Right border */
-            if (strokeRightColor) {
+            if (strokeRightColor && strokeRightStyle === "slantDashDot") {
+                fillSlant((0, exports.getSlantDashQuads)("vertical", shape.height() + 1, shape.width() + 0.5, strokeRightWidth, strokeRightDash), strokeRightColor);
+            }
+            else if (strokeRightColor) {
                 context.beginPath();
                 context.moveTo(shape.width() + 0.5, strokeTopColor ? -(0, exports.getOffsetFromWidth)(strokeTopWidth) : 0);
                 context.lineTo(shape.width() + 0.5, shape.height() +
@@ -117,27 +212,59 @@ var CellOverlay = (0, react_1.memo)(function (props) {
                 }
                 context.closePath();
             }
-            /* Diagonal: top-left to bottom-right (diagonalDown) */
-            if (strokeDiagonalDownColor) {
-                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();
+            /* Diagonals: top-left → bottom-right (diagonalDown), bottom-left →
+               top-right (diagonalUp). A double diagonal is two thin parallel
+               lines, as Excel draws it. */
+            var diagonals = [
+                {
+                    direction: "down",
+                    color: strokeDiagonalDownColor,
+                    width: strokeDiagonalDownWidth,
+                    dash: strokeDiagonalDownDash,
+                    style: strokeDiagonalDownStyle,
+                },
+                {
+                    direction: "up",
+                    color: strokeDiagonalUpColor,
+                    width: strokeDiagonalUpWidth,
+                    dash: strokeDiagonalUpDash,
+                    style: strokeDiagonalUpStyle,
+                },
+            ];
+            try {
+                for (var diagonals_1 = tslib_1.__values(diagonals), diagonals_1_1 = diagonals_1.next(); !diagonals_1_1.done; diagonals_1_1 = diagonals_1.next()) {
+                    var diagonal = diagonals_1_1.value;
+                    if (!diagonal.color)
+                        continue;
+                    var isDouble = diagonal.style === "double";
+                    context.beginPath();
+                    try {
+                        for (var _c = (e_2 = void 0, tslib_1.__values((0, exports.getDiagonalStrokes)(diagonal.direction, shape.width(), shape.height(), isDouble ? diagonal.width / 3 : 0))), _d = _c.next(); !_d.done; _d = _c.next()) {
+                            var line = _d.value;
+                            context.moveTo(line.x1, line.y1);
+                            context.lineTo(line.x2, line.y2);
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                    context.setAttr("strokeStyle", diagonal.color);
+                    context.setAttr("lineWidth", isDouble ? diagonal.width / 3 : diagonal.width);
+                    context.setAttr("lineCap", lineCap);
+                    context.setLineDash(diagonal.dash);
+                    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);
-                context.setAttr("lineCap", lineCap);
-                context.setLineDash(strokeDiagonalUpDash);
-                context.stroke();
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (diagonals_1_1 && !diagonals_1_1.done && (_a = diagonals_1.return)) _a.call(diagonals_1);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
         } }));
 });
@@ -146,7 +273,7 @@ var CellOverlay = (0, react_1.memo)(function (props) {
  * @param props
  */
 var CellOverlayRenderer = function (props) {
-    var x = props.x, y = props.y, width = props.width, height = props.height, stroke = props.stroke, _a = props.strokeTopColor, strokeTopColor = _a === void 0 ? stroke : _a, _b = props.strokeRightColor, strokeRightColor = _b === void 0 ? stroke : _b, _c = props.strokeBottomColor, strokeBottomColor = _c === void 0 ? stroke : _c, _d = props.strokeLeftColor, strokeLeftColor = _d === void 0 ? stroke : _d, strokeDiagonalUpColor = props.strokeDiagonalUpColor, strokeDiagonalDownColor = props.strokeDiagonalDownColor, _e = props.strokeDash, strokeDash = _e === void 0 ? config_1.DEFAULT_ARRAY : _e, _f = props.strokeTopDash, strokeTopDash = _f === void 0 ? config_1.DEFAULT_ARRAY : _f, _g = props.strokeRightDash, strokeRightDash = _g === void 0 ? config_1.DEFAULT_ARRAY : _g, _h = props.strokeBottomDash, strokeBottomDash = _h === void 0 ? config_1.DEFAULT_ARRAY : _h, _j = props.strokeLeftDash, strokeLeftDash = _j === void 0 ? config_1.DEFAULT_ARRAY : _j, _k = props.strokeDiagonalUpDash, strokeDiagonalUpDash = _k === void 0 ? config_1.DEFAULT_ARRAY : _k, _l = props.strokeDiagonalDownDash, strokeDiagonalDownDash = _l === void 0 ? config_1.DEFAULT_ARRAY : _l, _m = props.strokeWidth, strokeWidth = _m === void 0 ? 1 : _m, _o = props.strokeTopWidth, strokeTopWidth = _o === void 0 ? strokeWidth : _o, _p = props.strokeRightWidth, strokeRightWidth = _p === void 0 ? strokeWidth : _p, _q = props.strokeBottomWidth, strokeBottomWidth = _q === void 0 ? strokeWidth : _q, _r = props.strokeLeftWidth, strokeLeftWidth = _r === void 0 ? strokeWidth : _r, _s = props.strokeDiagonalUpWidth, strokeDiagonalUpWidth = _s === void 0 ? strokeWidth : _s, _t = props.strokeDiagonalDownWidth, strokeDiagonalDownWidth = _t === void 0 ? strokeWidth : _t, strokeTopStyle = props.strokeTopStyle, strokeBottomStyle = props.strokeBottomStyle, strokeLeftStyle = props.strokeLeftStyle, strokeRightStyle = props.strokeRightStyle, cellBackgroundColor = props.cellBackgroundColor, _u = props.lineCap, lineCap = _u === void 0 ? "butt" : _u, key = props.key, _v = props.strokeDoubleInsetWidth, strokeDoubleInsetWidth = _v === void 0 ? 1 : _v;
+    var x = props.x, y = props.y, width = props.width, height = props.height, stroke = props.stroke, _a = props.strokeTopColor, strokeTopColor = _a === void 0 ? stroke : _a, _b = props.strokeRightColor, strokeRightColor = _b === void 0 ? stroke : _b, _c = props.strokeBottomColor, strokeBottomColor = _c === void 0 ? stroke : _c, _d = props.strokeLeftColor, strokeLeftColor = _d === void 0 ? stroke : _d, strokeDiagonalUpColor = props.strokeDiagonalUpColor, strokeDiagonalDownColor = props.strokeDiagonalDownColor, _e = props.strokeDash, strokeDash = _e === void 0 ? config_1.DEFAULT_ARRAY : _e, _f = props.strokeTopDash, strokeTopDash = _f === void 0 ? config_1.DEFAULT_ARRAY : _f, _g = props.strokeRightDash, strokeRightDash = _g === void 0 ? config_1.DEFAULT_ARRAY : _g, _h = props.strokeBottomDash, strokeBottomDash = _h === void 0 ? config_1.DEFAULT_ARRAY : _h, _j = props.strokeLeftDash, strokeLeftDash = _j === void 0 ? config_1.DEFAULT_ARRAY : _j, _k = props.strokeDiagonalUpDash, strokeDiagonalUpDash = _k === void 0 ? config_1.DEFAULT_ARRAY : _k, _l = props.strokeDiagonalDownDash, strokeDiagonalDownDash = _l === void 0 ? config_1.DEFAULT_ARRAY : _l, _m = props.strokeWidth, strokeWidth = _m === void 0 ? 1 : _m, _o = props.strokeTopWidth, strokeTopWidth = _o === void 0 ? strokeWidth : _o, _p = props.strokeRightWidth, strokeRightWidth = _p === void 0 ? strokeWidth : _p, _q = props.strokeBottomWidth, strokeBottomWidth = _q === void 0 ? strokeWidth : _q, _r = props.strokeLeftWidth, strokeLeftWidth = _r === void 0 ? strokeWidth : _r, _s = props.strokeDiagonalUpWidth, strokeDiagonalUpWidth = _s === void 0 ? strokeWidth : _s, _t = props.strokeDiagonalDownWidth, strokeDiagonalDownWidth = _t === void 0 ? strokeWidth : _t, strokeTopStyle = props.strokeTopStyle, strokeBottomStyle = props.strokeBottomStyle, strokeLeftStyle = props.strokeLeftStyle, strokeRightStyle = props.strokeRightStyle, strokeDiagonalUpStyle = props.strokeDiagonalUpStyle, strokeDiagonalDownStyle = props.strokeDiagonalDownStyle, cellBackgroundColor = props.cellBackgroundColor, _u = props.lineCap, lineCap = _u === void 0 ? "butt" : _u, key = props.key, _v = props.strokeDoubleInsetWidth, strokeDoubleInsetWidth = _v === void 0 ? 1 : _v;
     var userStroke = strokeTopColor ||
         strokeRightColor ||
         strokeBottomColor ||
@@ -155,7 +282,7 @@ var CellOverlayRenderer = function (props) {
         strokeDiagonalDownColor;
     if (!userStroke)
         return null;
-    return (react_1.default.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_1.default.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 }));
 };
 exports.CellOverlayRenderer = CellOverlayRenderer;
 CellOverlay.displayName = "CellOverlay";

package/dist/cjs/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/cjs/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/cjs/components/cf-icon-preview/index.js

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

package/dist/cjs/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/cjs/components/embeds/embed-component.js

@@ -20,7 +20,7 @@ exports.EmbedComponent = (0, react_1.memo)(function (_a) {
             ? (0, themes_1.getStringifiedColor)(spec.textFormat.color, theme)
             : undefined;
         var textStyle = {
-            fontFamily: ((_b = spec.textFormat) === null || _b === void 0 ? void 0 : _b.fontFamily) || undefined,
+            fontFamily: (0, themes_1.resolveThemeFontFamily)((_b = spec.textFormat) === null || _b === void 0 ? void 0 : _b.fontFamily, theme) || undefined,
             fontSize: ((_c = spec.textFormat) === null || _c === void 0 ? void 0 : _c.fontSize)
                 ? "".concat(spec.textFormat.fontSize * (((_d = spec.textFormat) === null || _d === void 0 ? void 0 : _d.baselineOffset) ? 0.58 : 1), "px")
                 : ((_e = spec.textFormat) === null || _e === void 0 ? void 0 : _e.baselineOffset)
@@ -80,7 +80,8 @@ exports.EmbedComponent = (0, react_1.memo)(function (_a) {
                 react_1.default.createElement("div", { style: textStyle }, spec.richText.map(function (run, index) {
                     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
                     var runStyle = {
-                        fontFamily: ((_a = run.format) === null || _a === void 0 ? void 0 : _a.fontFamily) || undefined,
+                        fontFamily: (0, themes_1.resolveThemeFontFamily)((_a = run.format) === null || _a === void 0 ? void 0 : _a.fontFamily, theme) ||
+                            undefined,
                         fontSize: ((_b = run.format) === null || _b === void 0 ? void 0 : _b.fontSize)
                             ? "".concat(run.format.fontSize * (((_c = run.format) === null || _c === void 0 ? void 0 : _c.baselineOffset) ? 0.58 : 1), "px")
                             : ((_d = run.format) === null || _d === void 0 ? void 0 : _d.baselineOffset)

package/dist/cjs/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"}