@rowsncolumns/spreadsheet 10.6.0 → 10.6.5

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

@@ -1,10 +1,12 @@
 import { CELL_TEXT_PADDING, getTextNodeBounds, Image, } from "@rowsncolumns/grid";
 import { getContrastColor, isNil } from "@rowsncolumns/utils";
 import React, { memo, useCallback } from "react";
-import { Group, Label, Rect, Shape, Tag, Text } from "react-konva";
-import { CELL_HORIZONTAL_ALIGNMENT, CELL_VERTICAL_ALIGNMENT, CF_ICON_SPACING, CF_ICON_WIDTH, CHIP_HEIGHT, CHIP_RADIUS, CHIP_SPACING, COMMENT_COLOR, DEFAULT_CELL_SPACING, ERROR_COLOR, INDENT_SPACING, INVALID_COLOR, NOTE_COLOR, } from "../../config";
+import { Group, Label, Shape, Tag, Text } from "react-konva";
+import { paintDataBar } from "../../api/cf-data-bar";
+import { getCfIcon, paintCfIcon } from "../../api/cf-icons";
+import { ARROW_DOWN_WIDTH, CELL_HORIZONTAL_ALIGNMENT, CELL_VERTICAL_ALIGNMENT, CF_ICON_SPACING, CF_ICON_WIDTH, CHIP_HEIGHT, CHIP_RADIUS, CHIP_SPACING, COMMENT_COLOR, DEFAULT_CELL_SPACING, ERROR_COLOR, INDENT_SPACING, INVALID_COLOR, NOTE_COLOR, } from "../../config";
 import { getChipVerticalPosition, normalizeDisplayText, pointToPixel, } from "../../helpers";
-import { getStringifiedColor } from "../../themes";
+import { getStringifiedColor, resolveThemeFontFamily } from "../../themes";
 import { CellArrow } from "../cell-arrow";
 import { CellCalculated } from "../cell-calculated";
 import { CellCheckbox } from "../cell-checkbox";
@@ -12,18 +14,17 @@ import { CellError, ERROR_TAG_WIDTH } from "../cell-error";
 import { CellExpand } from "../cell-expand";
 import { CellFilter } from "../cell-filter";
 import { CellGroup } from "../cell-group";
+import { alignmentImpliesWrap, computeShrinkToFitFontSize, fillCellText, getKonvaRotationDegrees, getRotatedTextLayout, getScriptTextOffsetY, getUnderlineStrokes, getVerticalSpreadLineHeight, layoutDistributedLines, resolveCanvasTextAlign, resolveCanvasVerticalAlign, resolveReadingOrderAlignment, stackTextVertically, verticalAlignmentImpliesWrap, } from "./alignment";
 import { CellTextRuns } from "./cell-text-runs";
+import { getLeftSpacing, getRightSpacing } from "./helpers";
 import { getLineMetrics } from "./line-height";
+import { layoutNumberFormatParts } from "./number-format-layout";
 import { hasRenderableRuns } from "./rich-text";
-import { alignmentImpliesWrap, computeShrinkToFitFontSize, fillCellText, getKonvaRotationDegrees, getRotatedTextLayout, resolveCanvasTextAlign, stackTextVertically, } from "./alignment";
-import { getLeftSpacing, getRightSpacing } from "./helpers";
 const LOADING_VALUE = "Loading...";
 // CSS-equivalent scale for sup/sub baseline offset (matches browser default).
 const BASELINE_OFFSET_FONT_SCALE = 0.58;
-// Vertical inset of data-bar rect from cell edges (top/bottom).
-const CF_DATABAR_INSET_Y = 2;
 export const Cell = memo((props) => {
-    const { x, y, width, height, value, padding = CELL_TEXT_PADDING, scale = 1, lineHeight = 1.2, lineHeightMode = "fontMetrics", imageUrl, cellFormat, chipBackgroundColor, defaultColor, defaultBackgroundColor, sheetId, rowIndex, columnIndex, onRequestEdit, onArrowClick, isChecked, isInvalid, isError, showCheckbox, showArrow, showFilter, showChip, showNote, showComment, isFilterActive, filterIconColor, onFilterClick, onCheckboxClick, enableOverflow, cellWidth, textWidth: _textWidth, theme, showCalculatedColumnIcon, isCalculatedColumn, expandable, expanded, columnSpans, overflowRight, showGridLines, structuredValue, sparklineGroupAxis, defaultFontSizePoint, sortOrder, textFormatRuns, StructuredResult, readonly = false, onExpandCollapse, getDefaultHorizontalAlignment, } = props;
+    const { x, y, width, height, value, padding = CELL_TEXT_PADDING, scale = 1, lineHeight = 1.2, lineHeightMode = "fontMetrics", imageUrl, cellFormat, chipBackgroundColor, defaultColor, defaultBackgroundColor, sheetId, rowIndex, columnIndex, onRequestEdit, onArrowClick, isChecked, isInvalid, isError, showCheckbox, showArrow, showFilter, showChip, showNote, showComment, isFilterActive, filterIconColor, onFilterClick, onCheckboxClick, enableOverflow, cellWidth, textWidth: _textWidth, theme, showCalculatedColumnIcon, isCalculatedColumn, expandable, expanded, columnSpans, overflowRight, overflowLeft, centerOnSpan = false, arrowOutside = false, showGridLines, structuredValue, sparklineGroupAxis, defaultFontSizePoint, sortOrder, textFormatRuns, numberFormatLayout, StructuredResult, readonly = false, onExpandCollapse, getDefaultHorizontalAlignment, } = props;
     const { textFormat, wrapStrategy } = cellFormat ?? {};
     // openpyxl's `relativeIndent` is an additive delta on top of `indent`.
     const indent = (cellFormat?.indent ?? 0) + (cellFormat?.relativeIndent ?? 0);
@@ -33,25 +34,37 @@ export const Cell = memo((props) => {
     // we cross-package-duplicate the sentinel so apps/spreadsheet doesn't
     // depend on spreadsheet-state.
     const isLoading = value === LOADING_VALUE;
+    // Format Cells → Alignment → Text direction: a right-to-left reading
+    // order starts General-aligned text at the right edge.
+    const readingOrder = cellFormat?.readingOrder;
     const horizontalAlignment = isLoading
         ? "center"
         : cellFormat?.horizontalAlignment ??
-            (getDefaultHorizontalAlignment(sheetId, rowIndex, columnIndex) ||
+            (resolveReadingOrderAlignment(readingOrder, getDefaultHorizontalAlignment(sheetId, rowIndex, columnIndex)) ||
                 CELL_HORIZONTAL_ALIGNMENT);
-    const verticalAlignment = cellFormat?.verticalAlignment || CELL_VERTICAL_ALIGNMENT;
+    // Excel's vertical justify / distributed paint as top / middle for one
+    // line and spread wrapped lines over the cell height (below).
+    const cellVerticalAlignment = cellFormat?.verticalAlignment || CELL_VERTICAL_ALIGNMENT;
+    const verticalAlignment = resolveCanvasVerticalAlign(cellVerticalAlignment);
+    const isVerticalSpread = verticalAlignmentImpliesWrap(cellVerticalAlignment);
     // Excel-only modes (justify / distributed / fill / centerContinuous)
     // collapse onto what the canvas text node can paint.
     const canvasTextAlign = resolveCanvasTextAlign(horizontalAlignment);
     const isFillAlignment = horizontalAlignment === "fill";
     // Text format
-    const { color: colorObject, bold, italic, strikethrough, underline, baselineOffset, } = textFormat ?? {};
+    const { color: colorObject, bold, italic, strikethrough, underline, underlineStyle, baselineOffset, } = textFormat ?? {};
     const fontSizePt = textFormat?.fontSize ?? defaultFontSizePoint;
     // Fall back to the theme's body font so the painter agrees with the
     // sizer (AutoSizerCanvas measures with theme.primaryFontFamily).
-    const fontFamily = textFormat?.fontFamily ?? theme?.primaryFontFamily;
+    const fontFamily = resolveThemeFontFamily(textFormat?.fontFamily, theme) ??
+        theme?.primaryFontFamily;
     const color = getStringifiedColor(colorObject, theme);
-    // Text decoration
-    const textDecoration = `${underline ? "underline" : ""} ${strikethrough ? "line-through" : ""}`;
+    // Text decoration. Konva draws only a single underline; the double and
+    // accounting underlines (Format Cells → Font → Underline) are stroked by
+    // `underlineSceneFunc` below, where the text is one unrotated line.
+    const hasStyledUnderline = !!underline && !!underlineStyle && underlineStyle !== "single";
+    const textDecorationFor = (konvaUnderline) => `${konvaUnderline ? "underline" : ""} ${strikethrough ? "line-through" : ""}`;
+    const textDecoration = textDecorationFor(!!underline);
     /* Because of 1px + 0.5px (gridline width + spacing )*/
     const borderWidth = 1;
     const cellSpacingY = borderWidth;
@@ -59,18 +72,21 @@ export const Cell = memo((props) => {
     const fontSize = baselineOffset
         ? baseFontSize * BASELINE_OFFSET_FONT_SCALE
         : baseFontSize;
-    const effectiveVerticalAlignment = baselineOffset === "superscript"
-        ? "top"
-        : baselineOffset === "subscript"
-            ? "bottom"
-            : verticalAlignment;
+    // Superscript / subscript keep the cell's alignment and move the
+    // baseline instead (`scriptOffsetY` below), as Excel does.
+    const effectiveVerticalAlignment = verticalAlignment;
     const textStyle = `${bold ? "bold" : "normal"} ${italic ? "italic" : "normal"}`;
     const showText = !isNil(structuredValue) ? false : !isNil(value);
     // Overflow line
     const overflowFillFunc = useCallback((context, shape) => {
-        for (const [_, columnOffset, columnWidth, cellBackground,] of columnSpans) {
+        for (const [spanColumnIndex, columnOffset, columnWidth, cellBackground,] of columnSpans) {
             context.beginPath();
-            const x = columnOffset - shape.x() + (overflowRight ? columnWidth : 0) + 0.5;
+            // A column left of the cell hides the gridline on its right edge,
+            // one to the right the gridline on its left edge.
+            const x = columnOffset -
+                shape.x() +
+                (spanColumnIndex < columnIndex ? columnWidth : 0) +
+                0.5;
             const strokeColor = cellBackground
                 ? getStringifiedColor(cellBackground, theme)
                 : defaultBackgroundColor;
@@ -81,7 +97,7 @@ export const Cell = memo((props) => {
             context.stroke();
             context.closePath();
         }
-    }, [defaultBackgroundColor, columnSpans, theme, overflowRight, scale]);
+    }, [defaultBackgroundColor, columnSpans, theme, columnIndex, scale]);
     // Show error tag
     const showError = isError || isInvalid;
     // Calculated
@@ -89,13 +105,26 @@ export const Cell = memo((props) => {
     // Alignment
     const isRightAligned = horizontalAlignment === "right";
     // Spacing
-    const indentSpacing = indent ? indent * INDENT_SPACING : 0;
+    const indentSpacing = indent ? indent * INDENT_SPACING * scale : 0;
     const iconSpacing = DEFAULT_CELL_SPACING;
     const showExpand = false;
     const leftSpacing = getLeftSpacing(isCalculatedCell, expandable, isRightAligned ? showExpand : false, iconSpacing, scale);
-    const rightSpacing = getRightSpacing(showFilter, showArrow, isRightAligned ? false : showExpand, iconSpacing, scale);
+    const rightSpacing = getRightSpacing(showFilter, showArrow && !arrowOutside, isRightAligned ? false : showExpand, iconSpacing, scale);
     // final cell width
     const finalCellWidth = cellWidth ?? 0;
+    // Centred overflow: the spill area is `[x - overflowLeft, x - overflowLeft
+    // + cellWidth]`. Centred text stays centred on its own cell (a blocked
+    // side clips it); Center Across Selection centres on the whole span.
+    const centredSpill = enableOverflow && overflowLeft !== undefined
+        ? (() => {
+            const spanLeft = x - overflowLeft;
+            if (centerOnSpan) {
+                return { spanLeft, boxLeft: spanLeft, boxWidth: finalCellWidth };
+            }
+            const reach = Math.max(overflowLeft, finalCellWidth - width - overflowLeft);
+            return { spanLeft, boxLeft: x - reach, boxWidth: width + 2 * reach };
+        })()
+        : undefined;
     // text
     const textWidth = _textWidth + indentSpacing;
     // Reserve room for the CF icon on the left side of the cell. Only adds
@@ -107,7 +136,11 @@ export const Cell = memo((props) => {
     // doesn't render past the cell's right edge when an iconSet is present.
     const finalTextWidth = (overflowRight
         ? Math.max(textWidth, width)
-        : (enableOverflow ? finalCellWidth : width) -
+        : (centredSpill
+            ? centredSpill.boxWidth
+            : enableOverflow
+                ? finalCellWidth
+                : width) -
             rightSpacing -
             leftSpacing -
             indentSpacing) - cfIconReserve;
@@ -116,8 +149,10 @@ export const Cell = memo((props) => {
         ? textWidth > width
             ? x - (textWidth - width)
             : x
-        : x +
-            (isRightAligned ? -indentSpacing - Math.floor((padding * scale) / 2) : 0);
+        : centredSpill
+            ? centredSpill.boxLeft
+            : x +
+                (isRightAligned ? -indentSpacing - Math.floor((padding * scale) / 2) : 0);
     // Text left padding
     const textLeftPadding = textX +
         leftSpacing +
@@ -131,7 +166,9 @@ export const Cell = memo((props) => {
         ? enableOverflow
             ? textX + (textWidth - finalCellWidth)
             : textX
-        : textX;
+        : centredSpill
+            ? centredSpill.spanLeft
+            : textX;
     const overflowWidth = finalCellWidth;
     // Clip
     const clipX = (enableOverflow ? overflowX : x) +
@@ -158,7 +195,9 @@ export const Cell = memo((props) => {
         : fontSize;
     // Wrap — disabled in stacked, shrink, or rotated modes. Justify /
     // distributed alignment wraps implicitly, as in Excel.
-    const wrapRequested = wrapStrategy === "wrap" || alignmentImpliesWrap(horizontalAlignment);
+    const wrapRequested = wrapStrategy === "wrap" ||
+        alignmentImpliesWrap(horizontalAlignment) ||
+        isVerticalSpread;
     const textWrapStrategy = isStackedVertical || shrinkEnabled || hasNumericRotation
         ? "none"
         : wrapRequested
@@ -178,7 +217,7 @@ export const Cell = memo((props) => {
     // the same numbers (#1141). Konva's `lineHeight` is a multiple of the
     // font size.
     const textLineMetrics = getLineMetrics({ fontFamily, fontSize: effectiveFontSize, bold, italic }, lineHeightMode, lineHeight, scale);
-    const textLineHeight = effectiveFontSize > 0
+    const baseTextLineHeight = effectiveFontSize > 0
         ? textLineMetrics.advance / effectiveFontSize
         : lineHeight;
     // The sizer fitted the row to Konva's text block exactly — one advance
@@ -186,6 +225,16 @@ export const Cell = memo((props) => {
     // by the padding on both sides, its padding box is the cell, and every
     // fitted line shows (#1182, #1199).
     const textNode = getTextNodeBounds(y + cellSpacingY, height, padding);
+    // Vertical justify / distributed: spread the wrapped lines over the
+    // cell's inner height. The line count is estimated from the natural
+    // width against the wrap width (and any hard line breaks).
+    const wrapWidth = Math.max(1, finalTextWidth - 2 * padding);
+    const estimatedLineCount = shouldWrap
+        ? Math.max((displayValue ?? "").split("\n").length, Math.ceil(_textWidth / wrapWidth))
+        : 1;
+    const textLineHeight = isVerticalSpread
+        ? getVerticalSpreadLineHeight(estimatedLineCount, textNode.height - 2 * padding, effectiveFontSize, baseTextLineHeight)
+        : baseTextLineHeight;
     // For rotated text, anchor the rotation pivot to an alignment-aware
     // corner of the cell so the text stays inside instead of sliding off
     // (Konva otherwise rotates around the Text's top-left at x/y).
@@ -208,16 +257,37 @@ export const Cell = memo((props) => {
         })
         : undefined;
     const rotationDegrees = rotatedLayout?.rotation ?? getKonvaRotationDegrees(textRotation);
-    // CF data-bar geometry. Painted behind the text Group so the cell value
-    // remains readable on top of the bar. We inset 2px vertically so the bar
-    // doesn't touch the borders.
-    const dataBarHeight = Math.max(0, height - 2 * CF_DATABAR_INSET_Y * scale);
-    const dataBarMaxWidth = Math.max(0, width - 2);
-    const dataBarFill = conditionalDataBar
-        ? Math.max(0, Math.min(1, conditionalDataBar.fillFraction))
-        : 0;
-    const dataBarWidth = dataBarMaxWidth * dataBarFill;
-    const dataBarFromRight = conditionalDataBar?.direction === "rightToLeft";
+    // CF data bar — painted behind the text Group so the cell value stays
+    // readable on top of the bar (`paintDataBar` owns the geometry).
+    const dataBarSceneFunc = useCallback((context, shape) => {
+        if (!conditionalDataBar)
+            return;
+        const barStart = conditionalDataBar.barStart ??
+            (conditionalDataBar.direction === "rightToLeft"
+                ? 1 - conditionalDataBar.fillFraction
+                : 0);
+        const barEnd = conditionalDataBar.barEnd ??
+            barStart + Math.max(0, Math.min(1, conditionalDataBar.fillFraction));
+        paintDataBar(context, { width: shape.width(), height: shape.height(), scale }, { ...conditionalDataBar, barStart, barEnd });
+    }, [conditionalDataBar, scale]);
+    // CF icon — Excel's vector icon at the cell's left edge, aligned with the
+    // cell's vertical alignment.
+    const cfIconShape = conditionalIcon
+        ? getCfIcon(conditionalIcon.iconSet, conditionalIcon.iconId)
+        : undefined;
+    const cfIconSceneFunc = useCallback((context, shape) => {
+        if (!cfIconShape)
+            return;
+        const size = Math.min(CF_ICON_WIDTH * scale, shape.height() - 2 * scale);
+        if (size <= 0)
+            return;
+        const iconY = verticalAlignment === "top"
+            ? scale
+            : verticalAlignment === "middle"
+                ? (shape.height() - size) / 2
+                : shape.height() - size - 2 * scale;
+        paintCfIcon(context, cfIconShape, 2 * scale, iconY, size);
+    }, [cfIconShape, scale, verticalAlignment]);
     // Use the segment-based renderer only when per-segment formatting
     // exists AND none of the unsupported display modes are active.
     // Rotation, stacked-vertical, shrink-to-fit, and chips stay on the
@@ -229,15 +299,249 @@ export const Cell = memo((props) => {
     // own styling instead of being flattened; plain no-run cells with
     // a cell-level baselineOffset keep the single-style approximation
     // below (scaled font + top/bottom alignment).
+    // Shrink-to-fit and rotated cells keep their runs: the run painter takes
+    // the shrink factor and the rotated layout (stacked text stays plain).
     const useRichTextRunPath = !showChip &&
+        !isStackedVertical &&
+        hasRenderableRuns(textFormatRuns ?? undefined);
+    const shrinkFactor = fontSize > 0 ? effectiveFontSize / fontSize : 1;
+    const scriptOffsetY = getScriptTextOffsetY({
+        baselineOffset,
+        verticalAlign: effectiveVerticalAlignment,
+        baseFontSize: baseFontSize * shrinkFactor,
+        scriptFontSize: effectiveFontSize,
+        lineHeight: textLineHeight,
+    });
+    // Double / accounting underlines on a single unrotated line (the default
+    // Text path); wrapped, rotated or rich-text cells keep Konva's single line.
+    const paintStyledUnderline = hasStyledUnderline &&
+        !useRichTextRunPath &&
+        !showChip &&
+        !shouldWrap &&
+        !isStackedVertical &&
+        !hasNumericRotation;
+    const textDirection = readingOrder === "rtl" ? "rtl" : readingOrder === "ltr" ? "ltr" : "inherit";
+    const underlineSceneFunc = useCallback((context) => {
+        if (!paintStyledUnderline || !underlineStyle)
+            return;
+        const advance = textLineMetrics.advance;
+        const innerLeft = textLeftPadding + padding;
+        const innerWidth = Math.max(0, finalTextWidth - 2 * padding);
+        const glyphWidth = Math.min(_textWidth, innerWidth);
+        const textStart = canvasTextAlign === "right"
+            ? innerLeft + innerWidth - glyphWidth
+            : canvasTextAlign === "center"
+                ? innerLeft + (innerWidth - glyphWidth) / 2
+                : innerLeft;
+        const innerTop = textNode.y + padding;
+        const innerHeight = textNode.height - 2 * padding;
+        const lineTop = effectiveVerticalAlignment === "top"
+            ? innerTop
+            : effectiveVerticalAlignment === "middle"
+                ? innerTop + (innerHeight - advance) / 2
+                : innerTop + innerHeight - advance;
+        const strokes = getUnderlineStrokes({
+            style: underlineStyle,
+            textX: textStart,
+            textWidth: glyphWidth,
+            cellX: x,
+            cellWidth: width,
+            baselineY: lineTop + advance / 2 + effectiveFontSize * 0.35,
+            fontSize: effectiveFontSize,
+            scale,
+        });
+        context.beginPath();
+        for (const { x1, x2, y: strokeY } of strokes) {
+            const yy = Math.round(strokeY) + 0.5;
+            context.moveTo(x1, yy);
+            context.lineTo(x2, yy);
+        }
+        context.setAttr("strokeStyle", color ?? defaultColor);
+        context.setAttr("lineWidth", Math.max(1, scale));
+        context.stroke();
+    }, [
+        paintStyledUnderline,
+        underlineStyle,
+        textLineMetrics.advance,
+        textLeftPadding,
+        padding,
+        finalTextWidth,
+        _textWidth,
+        canvasTextAlign,
+        textNode.y,
+        textNode.height,
+        effectiveVerticalAlignment,
+        x,
+        width,
+        effectiveFontSize,
+        scale,
+        color,
+        defaultColor,
+    ]);
+    // Excel's `*x` fill and `_x` / `?` reserves (accounting `$` left, number
+    // right): one unrotated, unwrapped line whose parts are placed with
+    // measured glyph widths. Every other display mode keeps the plain string.
+    const paintNumberFormatLayout = !!numberFormatLayout &&
+        !useRichTextRunPath &&
+        !showChip &&
+        !shouldWrap &&
+        !isStackedVertical &&
+        !hasNumericRotation &&
         !shrinkEnabled &&
+        !isFillAlignment &&
+        !enableOverflow &&
+        textDirection !== "rtl";
+    const numberFormatSceneFunc = useCallback((context, shape) => {
+        if (!numberFormatLayout)
+            return;
+        const ctx = context;
+        ctx.setAttr("font", `${textStyle} normal ${effectiveFontSize}px ${fontFamily ?? "sans-serif"}`);
+        ctx.setAttr("textBaseline", "alphabetic");
+        ctx.setAttr("textAlign", "left");
+        ctx.setAttr("fillStyle", color ?? defaultColor);
+        const innerWidth = Math.max(0, shape.width() - 2 * padding);
+        const measure = (text) => ctx.measureText(text).width;
+        const layout = layoutNumberFormatParts({
+            parts: numberFormatLayout,
+            measure,
+            availableWidth: innerWidth,
+            align: canvasTextAlign,
+        }) ?? {
+            // The fixed parts alone overflow the cell: paint the plain string
+            // aligned the way the text node would (the group clips it).
+            runs: [
+                {
+                    text: value ?? "",
+                    x: canvasTextAlign === "right"
+                        ? innerWidth - measure(value ?? "")
+                        : canvasTextAlign === "center"
+                            ? (innerWidth - measure(value ?? "")) / 2
+                            : 0,
+                    width: measure(value ?? ""),
+                },
+            ],
+            start: 0,
+            end: innerWidth,
+        };
+        // Konva's text baseline: the line box is `lineHeight × fontSize` tall,
+        // aligned in the node, glyphs centred on it by the font's M box.
+        const lineHeightPx = textLineHeight * effectiveFontSize;
+        const metrics = ctx.measureText("M");
+        const ascent = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent ?? 0;
+        const descent = metrics.fontBoundingBoxDescent ??
+            metrics.actualBoundingBoxDescent ??
+            0;
+        const alignY = effectiveVerticalAlignment === "top"
+            ? 0
+            : effectiveVerticalAlignment === "middle"
+                ? (shape.height() - lineHeightPx - 2 * padding) / 2
+                : shape.height() - lineHeightPx - 2 * padding;
+        const baselineY = padding + alignY + (ascent - descent) / 2 + lineHeightPx / 2;
+        for (const run of layout.runs) {
+            ctx.fillText(run.text, padding + run.x, baselineY);
+        }
+        if (!underline && !strikethrough)
+            return;
+        context.beginPath();
+        const textStart = padding + layout.start;
+        const textWidthPx = layout.end - layout.start;
+        if (underline) {
+            for (const { x1, x2, y: strokeY } of getUnderlineStrokes({
+                style: underlineStyle ?? "single",
+                textX: textStart,
+                textWidth: textWidthPx,
+                cellX: x - shape.x(),
+                cellWidth: width,
+                baselineY,
+                fontSize: effectiveFontSize,
+                scale,
+            })) {
+                const yy = Math.round(strokeY) + 0.5;
+                context.moveTo(x1, yy);
+                context.lineTo(x2, yy);
+            }
+        }
+        if (strikethrough) {
+            const yy = Math.round(baselineY - effectiveFontSize * 0.3) + 0.5;
+            context.moveTo(textStart, yy);
+            context.lineTo(textStart + textWidthPx, yy);
+        }
+        ctx.setAttr("strokeStyle", color ?? defaultColor);
+        ctx.setAttr("lineWidth", Math.max(1, scale));
+        context.stroke();
+    }, [
+        numberFormatLayout,
+        textStyle,
+        effectiveFontSize,
+        fontFamily,
+        color,
+        defaultColor,
+        padding,
+        canvasTextAlign,
+        value,
+        textLineHeight,
+        effectiveVerticalAlignment,
+        underline,
+        strikethrough,
+        underlineStyle,
+        x,
+        width,
+        scale,
+    ]);
+    // Excel's horizontal `distributed`: wrapped lines spread edge to edge
+    // (the last one too), a lone word centred, the indent kept on both sides.
+    const paintDistributed = horizontalAlignment === "distributed" &&
+        !useRichTextRunPath &&
+        !showChip &&
         !isStackedVertical &&
         !hasNumericRotation &&
-        hasRenderableRuns(textFormatRuns ?? undefined);
+        !shrinkEnabled;
+    const distributedSceneFunc = useCallback((context, shape) => {
+        const ctx = context;
+        ctx.setAttr("font", `${textStyle} normal ${effectiveFontSize}px ${fontFamily ?? "sans-serif"}`);
+        ctx.setAttr("textBaseline", "alphabetic");
+        ctx.setAttr("textAlign", "left");
+        ctx.setAttr("fillStyle", color ?? defaultColor);
+        const innerWidth = Math.max(0, shape.width() - 2 * padding - indentSpacing);
+        const lines = layoutDistributedLines(displayValue ?? "", innerWidth, (text) => ctx.measureText(text).width);
+        const lineHeightPx = textLineHeight * effectiveFontSize;
+        const metrics = ctx.measureText("M");
+        const ascent = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent ?? 0;
+        const descent = metrics.fontBoundingBoxDescent ??
+            metrics.actualBoundingBoxDescent ??
+            0;
+        const blockHeight = lines.length * lineHeightPx;
+        const alignY = effectiveVerticalAlignment === "top"
+            ? 0
+            : effectiveVerticalAlignment === "middle"
+                ? (shape.height() - blockHeight - 2 * padding) / 2
+                : shape.height() - blockHeight - 2 * padding;
+        lines.forEach((words, lineIndex) => {
+            const baselineY = padding +
+                alignY +
+                lineIndex * lineHeightPx +
+                (ascent - descent) / 2 +
+                lineHeightPx / 2;
+            for (const word of words) {
+                ctx.fillText(word.text, padding + word.x, baselineY);
+            }
+        });
+    }, [
+        textStyle,
+        effectiveFontSize,
+        fontFamily,
+        color,
+        defaultColor,
+        padding,
+        indentSpacing,
+        displayValue,
+        textLineHeight,
+        effectiveVerticalAlignment,
+    ]);
     return (React.createElement(React.Fragment, null,
         enableOverflow && showGridLines ? (React.createElement(Shape, { x: x, y: y, width: width, height: height, sceneFunc: overflowFillFunc, listening: false })) : null,
-        conditionalDataBar && dataBarWidth > 0 ? (React.createElement(Rect, { x: dataBarFromRight ? x + width - 1 - dataBarWidth : x + 1, y: y + CF_DATABAR_INSET_Y * scale, width: dataBarWidth, height: dataBarHeight, fill: conditionalDataBar.color, stroke: conditionalDataBar.borderColor, strokeWidth: conditionalDataBar.borderColor ? 1 : 0, listening: false, perfectDrawEnabled: false })) : null,
-        conditionalIcon ? (React.createElement(Text, { x: x + 2, y: y, width: CF_ICON_WIDTH * scale, height: height, text: conditionalIcon.glyph, fill: conditionalIcon.color ?? color ?? defaultColor, verticalAlign: "middle", align: "center", fontSize: fontSize, listening: false, perfectDrawEnabled: false })) : null,
+        conditionalDataBar ? (React.createElement(Shape, { x: x, y: y, width: width, height: height, sceneFunc: dataBarSceneFunc, listening: false, perfectDrawEnabled: false })) : null,
+        conditionalIcon && cfIconShape ? (React.createElement(Shape, { x: x, y: y, width: width, height: height, sceneFunc: cfIconSceneFunc, listening: false, perfectDrawEnabled: false })) : null,
         showCheckbox ? (React.createElement(CellCheckbox, { x: x, y: y, scale: scale, width: width, height: height, checked: isChecked, onChange: onCheckboxClick, rowIndex: props.rowIndex, columnIndex: props.columnIndex, verticalAlignment: verticalAlignment, horizontalAlignment: horizontalAlignment })) : showText ? (React.createElement(Group, { clipY: y + borderWidth, clipHeight: height, clipX: clipX, clipWidth: clipWidth }, showChip ? (React.createElement(Label, { width: width - CHIP_SPACING * scale, height: CHIP_HEIGHT * scale, x: textLeftPadding, y: getChipVerticalPosition(y, height, scale, verticalAlignment), offsetX: -CHIP_SPACING * scale, offsetY: -CHIP_SPACING * scale },
             React.createElement(Tag, { height: CHIP_HEIGHT * scale, fill: chipBackgroundColor, cornerRadius: CHIP_RADIUS * scale, perfectDrawEnabled: false, hitStrokeWidth: 0 }),
             React.createElement(Text, { text: displayValue, fill: color ?? defaultColor, verticalAlign: effectiveVerticalAlignment, align: canvasTextAlign, fontFamily: fontFamily, fontStyle: textStyle, fontSize: fontSize, textDecoration: textDecoration, padding: padding, lineHeight: 1, offsetY: -1, perfectDrawEnabled: false, wrap: "none" }))) : useRichTextRunPath ? (
@@ -251,14 +555,16 @@ export const Cell = memo((props) => {
         // lines, and `textFormatRuns` indices reference the raw
         // string. `normalizeDisplayText` is bypassed because the
         // renderer handles multi-line layout itself.
-        React.createElement(CellTextRuns, { x: textLeftPadding, y: textNode.y, width: finalTextWidth, height: textNode.height, padding: padding, value: displayValue ?? "", runs: textFormatRuns ?? [], baseColor: color ?? defaultColor, baseFontFamily: fontFamily, 
+        React.createElement(CellTextRuns, { x: rotatedLayout?.x ?? textLeftPadding, y: rotatedLayout?.y ?? textNode.y, width: rotatedLayout?.width ?? finalTextWidth, height: rotatedLayout ? approxTextHeight : textNode.height, rotation: rotatedLayout ? rotationDegrees : undefined, fontScale: scale * shrinkFactor, padding: padding, value: displayValue ?? "", runs: textFormatRuns ?? [], baseColor: color ?? defaultColor, baseFontFamily: fontFamily, 
             // UN-scaled size on purpose: when the cell carries a
             // baselineOffset the segment resolver applies the
             // sup/sub font scale itself (exactly once). Shrink-to-
             // fit never reaches this path, so `baseFontSize` equals
             // `effectiveFontSize` for every other cell.
-            baseFontSize: baseFontSize, baseBold: !!bold, baseItalic: !!italic, baseUnderline: !!underline, baseStrikethrough: !!strikethrough, baseBaselineOffset: baselineOffset ?? undefined, horizontalAlign: canvasTextAlign, verticalAlign: effectiveVerticalAlignment, lineHeight: lineHeight, lineHeightMode: lineHeightMode, scale: scale, wrap: shouldWrap, theme: theme })) : (React.createElement(Text, { x: rotatedLayout?.x ?? textLeftPadding, y: rotatedLayout?.y ?? textNode.y, offsetX: rotatedLayout?.offsetX, offsetY: rotatedLayout?.offsetY, height: rotatedLayout ? approxTextHeight : textNode.height, width: rotatedLayout?.width ?? finalTextWidth, text: displayValue, fill: color ?? defaultColor, verticalAlign: rotatedLayout ? "top" : effectiveVerticalAlignment, align: rotatedLayout ? "left" : canvasTextAlign, fontFamily: fontFamily, fontStyle: textStyle, fontSize: effectiveFontSize, textDecoration: textDecoration, padding: padding, wrap: textWrapStrategy, lineHeight: textLineHeight, rotation: rotationDegrees, hitStrokeWidth: 0, perfectDrawEnabled: false })))) : imageUrl ? (React.createElement(Image, { x: x, y: y, spacing: 1, width: width, height: height, url: imageUrl, perfectDrawEnabled: false, horizontalAlignment: canvasTextAlign === "justify" ? "left" : canvasTextAlign, verticalAlignment: verticalAlignment })) : null,
-        showFilter ? (React.createElement(CellFilter, { scale: scale, isActive: isFilterActive, onClick: readonly ? undefined : onFilterClick, rowIndex: props.rowIndex, columnIndex: props.columnIndex, x: x, y: y, height: height, width: width, filterIconColor: filterIconColor, verticalAlignment: verticalAlignment, backgroundColor: defaultBackgroundColor, sortOrder: sortOrder })) : showArrow && !readonly ? (React.createElement(CellArrow, { scale: scale, onClick: onArrowClick ?? onRequestEdit, rowIndex: rowIndex, columnIndex: columnIndex, x: x, y: y, height: height, width: width, verticalAlignment: verticalAlignment })) : null,
+            baseFontSize: baseFontSize * shrinkFactor, baseBold: !!bold, baseItalic: !!italic, baseUnderline: !!underline, baseStrikethrough: !!strikethrough, baseBaselineOffset: baselineOffset ?? undefined, horizontalAlign: rotatedLayout ? "left" : canvasTextAlign, verticalAlign: rotatedLayout ? "top" : effectiveVerticalAlignment, lineHeight: lineHeight, lineHeightMode: lineHeightMode, scale: scale, wrap: shouldWrap && !rotatedLayout, theme: theme })) : paintDistributed ? (React.createElement(Shape, { x: textLeftPadding, y: textNode.y, width: finalTextWidth, height: textNode.height, sceneFunc: distributedSceneFunc, listening: false, perfectDrawEnabled: false })) : paintNumberFormatLayout ? (React.createElement(Shape, { x: textLeftPadding, y: textNode.y, width: finalTextWidth, height: textNode.height, sceneFunc: numberFormatSceneFunc, listening: false, perfectDrawEnabled: false })) : (React.createElement(React.Fragment, null,
+            React.createElement(Text, { x: rotatedLayout?.x ?? textLeftPadding, y: rotatedLayout?.y ?? textNode.y, offsetX: rotatedLayout?.offsetX, offsetY: (rotatedLayout?.offsetY ?? 0) + scriptOffsetY, height: rotatedLayout ? approxTextHeight : textNode.height, width: rotatedLayout?.width ?? finalTextWidth, text: displayValue, fill: color ?? defaultColor, verticalAlign: rotatedLayout ? "top" : effectiveVerticalAlignment, align: rotatedLayout ? "left" : canvasTextAlign, fontFamily: fontFamily, fontStyle: textStyle, fontSize: effectiveFontSize, textDecoration: paintStyledUnderline ? textDecorationFor(false) : textDecoration, padding: padding, wrap: textWrapStrategy, lineHeight: textLineHeight, rotation: rotationDegrees, direction: textDirection, hitStrokeWidth: 0, perfectDrawEnabled: false }),
+            paintStyledUnderline ? (React.createElement(Shape, { sceneFunc: underlineSceneFunc, listening: false, perfectDrawEnabled: false })) : null)))) : imageUrl ? (React.createElement(Image, { x: x, y: y, spacing: 1, width: width, height: height, url: imageUrl, perfectDrawEnabled: false, horizontalAlignment: canvasTextAlign === "justify" ? "left" : canvasTextAlign, verticalAlignment: verticalAlignment })) : null,
+        showFilter ? (React.createElement(CellFilter, { scale: scale, isActive: isFilterActive, onClick: readonly ? undefined : onFilterClick, rowIndex: props.rowIndex, columnIndex: props.columnIndex, x: x, y: y, height: height, width: width, filterIconColor: filterIconColor, verticalAlignment: verticalAlignment, backgroundColor: defaultBackgroundColor, sortOrder: sortOrder })) : showArrow && !readonly ? (React.createElement(CellArrow, { scale: scale, onClick: onArrowClick ?? onRequestEdit, rowIndex: rowIndex, columnIndex: columnIndex, x: arrowOutside ? x + (ARROW_DOWN_WIDTH + 4) * scale : x, y: y, height: height, width: width, verticalAlignment: verticalAlignment })) : null,
         expandable ? (React.createElement(CellGroup, { scale: scale, onClick: (cell) => {
                 onExpandCollapse?.(cell, !expanded);
             }, rowIndex: rowIndex, columnIndex: columnIndex, x: x + indentSpacing, y: y, height: height, width: width, verticalAlignment: verticalAlignment, expanded: expanded, theme: theme })) : null,

package/dist/esm/components/cell/number-format-layout.d.ts

@@ -0,0 +1,35 @@
+import { type NumberFormatLayoutPart } from "@rowsncolumns/utils";
+export type NumberFormatRun = {
+    text: string;
+    x: number;
+    width: number;
+};
+export type NumberFormatRunLayout = {
+    runs: NumberFormatRun[];
+    /** Left edge of the first painted glyph (or reserve). */
+    start: number;
+    /** Right edge of the last one. */
+    end: number;
+};
+/**
+ * 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 declare const layoutNumberFormatParts: ({ parts, measure, availableWidth, align, }: {
+    parts: readonly NumberFormatLayoutPart[];
+    measure: (text: string) => number;
+    availableWidth: number;
+    align: "left" | "center" | "right" | "justify";
+}) => NumberFormatRunLayout | undefined;
+/**
+ * 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 declare const getCellNumberFormatLayout: (pattern: string | null | undefined, value: number | string | null | undefined, formattedValue: string | null | undefined, locale?: string) => NumberFormatLayoutPart[] | undefined;
+//# sourceMappingURL=number-format-layout.d.ts.map

package/dist/esm/components/cell/number-format-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-format-layout.d.ts","sourceRoot":"","sources":["../../../../components/cell/number-format-layout.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,sBAAsB,EAG5B,MAAM,qBAAqB,CAAC;AAE7B,MAAM,MAAM,eAAe,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzE,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAAI,4CAKrC;IACD,KAAK,EAAE,SAAS,sBAAsB,EAAE,CAAC;IACzC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;CAChD,KAAG,qBAAqB,GAAG,SA+D3B,CAAC;AAKF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,GACpC,SAAS,MAAM,GAAG,IAAI,GAAG,SAAS,EAClC,OAAO,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EACzC,gBAAgB,MAAM,GAAG,IAAI,GAAG,SAAS,EACzC,SAAS,MAAM,KACd,sBAAsB,EAAE,GAAG,SAa7B,CAAC"}