@rowsncolumns/spreadsheet 10.2.73 → 10.2.75

package/dist/esm/components/toolbar/fill-selectors.js

@@ -0,0 +1,162 @@
+import { Button, ColorPicker, HexColorPicker, Stack } from "@rowsncolumns/ui";
+import React, { useMemo, useState } from "react";
+import { getPatternCanvas } from "../../api/fill-patterns";
+import { getStringifiedColor, STANDARD_COLORS } from "../../themes";
+/** Excel's Format Cells → Fill → Pattern Style menu, in Excel's order. */
+export const FILL_PATTERN_OPTIONS = [
+    { pattern: "gray0625", label: "6.25% Gray" },
+    { pattern: "gray125", label: "12.5% Gray" },
+    { pattern: "lightGray", label: "25% Gray" },
+    { pattern: "mediumGray", label: "50% Gray" },
+    { pattern: "darkGray", label: "75% Gray" },
+    { pattern: "darkHorizontal", label: "Horizontal Stripe" },
+    { pattern: "darkVertical", label: "Vertical Stripe" },
+    { pattern: "darkDown", label: "Reverse Diagonal Stripe" },
+    { pattern: "darkUp", label: "Diagonal Stripe" },
+    { pattern: "darkGrid", label: "Diagonal Crosshatch" },
+    { pattern: "darkTrellis", label: "Thick Diagonal Crosshatch" },
+    { pattern: "lightHorizontal", label: "Thin Horizontal Stripe" },
+    { pattern: "lightVertical", label: "Thin Vertical Stripe" },
+    { pattern: "lightDown", label: "Thin Reverse Diagonal Stripe" },
+    { pattern: "lightUp", label: "Thin Diagonal Stripe" },
+    { pattern: "lightGrid", label: "Thin Horizontal Crosshatch" },
+    { pattern: "lightTrellis", label: "Thin Diagonal Crosshatch" },
+];
+/**
+ * Excel's Fill Effects → Shading styles. `degree` follows OOXML
+ * `<gradientFill degree>`: 0 runs left → right, 90 top → bottom.
+ */
+export const GRADIENT_PRESETS = [
+    { label: "Horizontal", gradient: { type: "linear", degree: 90 } },
+    { label: "Vertical", gradient: { type: "linear", degree: 0 } },
+    { label: "Diagonal up", gradient: { type: "linear", degree: 45 } },
+    { label: "Diagonal down", gradient: { type: "linear", degree: 135 } },
+    {
+        label: "From center",
+        gradient: { type: "path", left: 0.5, right: 0.5, top: 0.5, bottom: 0.5 },
+    },
+];
+/** Two-stop gradient from a preset and two colours. */
+export const buildGradientFill = (preset, color1, color2) => ({
+    ...preset,
+    stops: [
+        { position: 0, color: color1 },
+        { position: 1, color: color2 },
+    ],
+});
+/**
+ * CSS preview of a gradient fill. OOXML measures the linear angle from the
+ * left→right axis; CSS from the bottom→top axis, so CSS = degree + 90.
+ */
+export const gradientToCss = (gradient) => {
+    const stops = gradient.stops
+        .slice()
+        .sort((a, b) => a.position - b.position)
+        .map((stop) => `${stop.color} ${Math.round(stop.position * 100)}%`)
+        .join(", ");
+    if (gradient.type === "path") {
+        return `radial-gradient(circle, ${stops})`;
+    }
+    return `linear-gradient(${((gradient.degree ?? 0) + 90) % 360}deg, ${stops})`;
+};
+const DEFAULT_PATTERN_COLOR = "#000000";
+const PatternSwatch = ({ pattern, foregroundColor, backgroundColor, label, }) => {
+    const url = useMemo(() => {
+        const canvas = getPatternCanvas(pattern, foregroundColor, backgroundColor);
+        try {
+            return canvas?.toDataURL() ?? undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }, [pattern, foregroundColor, backgroundColor]);
+    return (React.createElement("span", { "aria-hidden": "true", className: "block w-full h-full border border-solid border-rnc-border", style: url
+            ? { backgroundImage: `url(${url})`, backgroundRepeat: "repeat" }
+            : { backgroundColor }, title: label }));
+};
+/**
+ * Pattern fill authoring (Excel: Format Cells → Fill → Pattern Color /
+ * Pattern Style). The pattern paints in `foregroundColor` over the solid
+ * `backgroundColor`; a gradient on the cell is cleared, as Excel treats the
+ * two as exclusive.
+ */
+export const PatternFillPicker = ({ fill, theme, onChangeFill, }) => {
+    const background = fill?.backgroundColor
+        ? getStringifiedColor(fill.backgroundColor, theme)
+        : undefined;
+    const patternColor = fill?.foregroundColor
+        ? getStringifiedColor(fill.foregroundColor, theme)
+        : DEFAULT_PATTERN_COLOR;
+    const activePattern = fill?.fillPattern &&
+        fill.fillPattern !== "none" &&
+        fill.fillPattern !== "solid"
+        ? fill.fillPattern
+        : undefined;
+    const apply = (pattern, foregroundColor) => onChangeFill({
+        backgroundColor: fill?.backgroundColor ?? undefined,
+        fillPattern: pattern,
+        foregroundColor: pattern ? foregroundColor : undefined,
+        gradient: undefined,
+    });
+    return (React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+        React.createElement(Button, { variant: "outline", size: "xs", tabIndex: -1, className: "justify-center py-1", onClick: () => apply(undefined, undefined) }, "No pattern"),
+        React.createElement("div", { className: "pt-2 text-xs text-left" }, "Pattern style"),
+        React.createElement("div", { role: "group", "aria-label": "Pattern style", className: "grid grid-cols-6 gap-1" }, FILL_PATTERN_OPTIONS.map(({ pattern, label }) => (React.createElement("button", { type: "button", key: pattern, "aria-label": label, "aria-pressed": activePattern === pattern, className: `w-6 h-6 p-0 border-2 border-solid rounded-sm bg-transparent cursor-pointer ${activePattern === pattern
+                ? "border-rnc-primary"
+                : "border-transparent"}`, onClick: () => apply(pattern, fill?.foregroundColor ? patternColor : undefined) },
+            React.createElement(PatternSwatch, { pattern: pattern, foregroundColor: patternColor, backgroundColor: background, label: label }))))),
+        React.createElement("div", { className: "pt-2 text-xs text-left" }, "Pattern color"),
+        React.createElement(ColorPicker, { value: patternColor, colors: STANDARD_COLORS, onChange: (color) => apply(activePattern ?? "darkGray", color), className: "gap-1" }),
+        React.createElement("div", { className: "flex items-center gap-1" },
+            React.createElement(HexColorPicker, { value: patternColor, onChange: (color) => apply(activePattern ?? "darkGray", color) }))));
+};
+/**
+ * Gradient fill authoring (Excel: Fill Effects → Gradient, two colours +
+ * shading style). Picking a style applies immediately with the two colours;
+ * changing a colour re-applies when the cell already has a gradient.
+ */
+export const GradientFillPicker = ({ fill, theme, onChangeFill, }) => {
+    const existing = fill?.gradient ?? undefined;
+    const [color1, setColor1] = useState(() => existing?.stops?.[0]?.color ??
+        (fill?.backgroundColor
+            ? getStringifiedColor(fill.backgroundColor, theme)
+            : "#FFFFFF"));
+    const [color2, setColor2] = useState(() => existing?.stops?.[existing.stops.length - 1]?.color ?? "#4472C4");
+    const apply = (preset, c1 = color1, c2 = color2) => onChangeFill({
+        backgroundColor: undefined,
+        fillPattern: undefined,
+        foregroundColor: undefined,
+        gradient: buildGradientFill(preset, c1, c2),
+    });
+    const reapply = (c1, c2) => {
+        if (!existing)
+            return;
+        const { stops: _stops, ...preset } = existing;
+        apply(preset, c1, c2);
+    };
+    const isActive = (preset) => !!existing &&
+        existing.type === preset.type &&
+        (preset.type === "path" || (existing.degree ?? 0) === (preset.degree ?? 0));
+    return (React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+        React.createElement(Button, { variant: "outline", size: "xs", tabIndex: -1, className: "justify-center py-1", onClick: () => onChangeFill({
+                backgroundColor: fill?.backgroundColor ?? undefined,
+                fillPattern: fill?.fillPattern ?? undefined,
+                foregroundColor: fill?.foregroundColor ?? undefined,
+                gradient: undefined,
+            }) }, "No gradient"),
+        React.createElement("div", { className: "grid grid-cols-[auto_1fr] items-center gap-2 pt-2 text-xs" },
+            React.createElement("span", null, "Color 1"),
+            React.createElement(HexColorPicker, { value: color1, onChange: (color) => {
+                    setColor1(color);
+                    reapply(color, color2);
+                } }),
+            React.createElement("span", null, "Color 2"),
+            React.createElement(HexColorPicker, { value: color2, onChange: (color) => {
+                    setColor2(color);
+                    reapply(color1, color);
+                } })),
+        React.createElement("div", { className: "pt-2 text-xs text-left" }, "Shading style"),
+        React.createElement("div", { role: "group", "aria-label": "Shading style", className: "grid grid-cols-5 gap-1" }, GRADIENT_PRESETS.map(({ label, gradient }) => (React.createElement("button", { type: "button", key: label, "aria-label": label, "aria-pressed": isActive(gradient), className: `w-8 h-6 p-0 border-2 border-solid rounded-sm cursor-pointer ${isActive(gradient) ? "border-rnc-primary" : "border-rnc-border"}`, style: {
+                backgroundImage: gradientToCss(buildGradientFill(gradient, color1, color2)),
+            }, onClick: () => apply(gradient) }))))));
+};

package/dist/esm/components/toolbar/index.d.ts

@@ -4,12 +4,14 @@ export * from "./scale-selector";
 export * from "./font-size-selector";
 export * from "./text-color-selector";
 export * from "./background-color-selector";
+export * from "./fill-selectors";
 export * from "./merge-cells-selector";
 export * from "./border-selector";
 export * from "./font-family-selector";
 export * from "./text-horizontal-align-selector";
 export * from "./text-vertical-align-selector";
 export * from "./text-wrap-selector";
+export * from "./text-rotation-selector";
 export * from "./text-format-selector";
 export * from "./theme-selector";
 export * from "./table-actions";

package/dist/esm/components/toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}

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

@@ -4,12 +4,14 @@ export * from "./scale-selector";
 export * from "./font-size-selector";
 export * from "./text-color-selector";
 export * from "./background-color-selector";
+export * from "./fill-selectors";
 export * from "./merge-cells-selector";
 export * from "./border-selector";
 export * from "./font-family-selector";
 export * from "./text-horizontal-align-selector";
 export * from "./text-vertical-align-selector";
 export * from "./text-wrap-selector";
+export * from "./text-rotation-selector";
 export * from "./text-format-selector";
 export * from "./theme-selector";
 export * from "./table-actions";

package/dist/esm/components/toolbar/text-horizontal-align-selector.d.ts

@@ -5,6 +5,14 @@ type TextHorizontalAlignSelectorProps = {
     value: HorizontalAlign | undefined | null;
     onChange(value: HorizontalAlign): void;
 };
+/**
+ * Excel's remaining Format Cells → Alignment → Horizontal entries. They have
+ * no toolbar glyph, so they render as labelled buttons under the icon row.
+ */
+export declare const EXTENDED_HORIZONTAL_ALIGNMENTS: ReadonlyArray<{
+    value: HorizontalAlign;
+    label: string;
+}>;
 export declare const TextHorizontalAlignSelector: ({ value, onChange, disabled, }: TextHorizontalAlignSelectorProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=text-horizontal-align-selector.d.ts.map

package/dist/esm/components/toolbar/text-horizontal-align-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-horizontal-align-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-horizontal-align-selector.tsx"],"names":[],"mappings":"AASA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,KAAK,gCAAgC,GAAG;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,gCAIzC,gCAAgC,sBA0DlC,CAAC"}
+{"version":3,"file":"text-horizontal-align-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-horizontal-align-selector.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,KAAK,gCAAgC,GAAG;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;CACxC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,8BAA8B,EAAE,aAAa,CAAC;IACzD,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAGA,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,gCAIzC,gCAAgC,sBA6FlC,CAAC"}

package/dist/esm/components/toolbar/text-horizontal-align-selector.js

@@ -1,17 +1,30 @@
-import { MdFormatAlignCenter, MdFormatAlignLeft, MdFormatAlignRight, MdOutlineArrowDropDown, } from "@rowsncolumns/icons";
-import { IconButton } from "@rowsncolumns/ui";
+import { MdFormatAlignCenter, MdFormatAlignJustify, MdFormatAlignLeft, MdFormatAlignRight, MdOutlineArrowDropDown, } from "@rowsncolumns/icons";
+import { Button, IconButton } from "@rowsncolumns/ui";
 import { Popover, PopoverContent, PopoverTrigger } from "@rowsncolumns/ui";
 import { Stack } from "@rowsncolumns/ui";
 import React, { useState } from "react";
 import { useFocusSheet } from "../../atoms";
+/**
+ * Excel's remaining Format Cells → Alignment → Horizontal entries. They have
+ * no toolbar glyph, so they render as labelled buttons under the icon row.
+ */
+export const EXTENDED_HORIZONTAL_ALIGNMENTS = [
+    { value: "distributed", label: "Distributed" },
+    { value: "fill", label: "Fill" },
+];
 export const TextHorizontalAlignSelector = ({ value = "left", onChange, disabled, }) => {
     const focusSheet = useFocusSheet();
     const [isOpen, onOpenChange] = useState(false);
     const close = () => onOpenChange(false);
+    const select = (next) => {
+        onChange(next);
+        focusSheet?.();
+        close();
+    };
     return (React.createElement(Popover, { open: isOpen, onOpenChange: onOpenChange },
         React.createElement(PopoverTrigger, { asChild: true },
-            React.createElement(IconButton, { size: "lg", tooltip: "Horizontal align", disabled: disabled },
-                value === "right" ? (React.createElement(MdFormatAlignRight, null)) : value === "center" ? (React.createElement(MdFormatAlignCenter, null)) : (React.createElement(MdFormatAlignLeft, null)),
+            React.createElement(IconButton, { size: "lg", tooltip: "Horizontal align", "aria-label": "Horizontal align", disabled: disabled },
+                value === "right" ? (React.createElement(MdFormatAlignRight, null)) : value === "center" || value === "centerContinuous" ? (React.createElement(MdFormatAlignCenter, null)) : value === "justify" || value === "distributed" ? (React.createElement(MdFormatAlignJustify, null)) : (React.createElement(MdFormatAlignLeft, null)),
                 React.createElement(MdOutlineArrowDropDown, null))),
         React.createElement(PopoverContent, { align: "start" },
             React.createElement(Stack, { direction: "horizontal", className: "gap-1 max-w-[140px] flex-wrap" },
@@ -32,5 +45,8 @@ export const TextHorizontalAlignSelector = ({ value = "left", onChange, disabled
                         focusSheet?.();
                         close();
                     } },
-                    React.createElement(MdFormatAlignRight, null))))));
+                    React.createElement(MdFormatAlignRight, null)),
+                React.createElement(IconButton, { size: "lg", tooltip: "Justify", "aria-label": "Justify", isActive: value === "justify", onClick: () => select("justify") },
+                    React.createElement(MdFormatAlignJustify, null))),
+            React.createElement(Stack, { direction: "horizontal", className: "gap-1 pt-1 max-w-[140px]" }, EXTENDED_HORIZONTAL_ALIGNMENTS.map(({ value: option, label }) => (React.createElement(Button, { key: option, type: "button", variant: value === option ? "secondary" : "ghost", size: "xs", "aria-pressed": value === option, onClick: () => select(option) }, label)))))));
 };

package/dist/esm/components/toolbar/text-rotation-selector.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { CellFormat } from "../../types";
+export type TextRotationValue = NonNullable<CellFormat["textRotation"]>;
+type TextRotationPreset = {
+    label: string;
+    value: TextRotationValue;
+};
+/**
+ * Excel's Orientation menu. Degrees are counter-clockwise positive (Excel's
+ * convention, what the renderer and the xlsx round-trip use), so "clockwise"
+ * presets are negative. `0` is horizontal — used instead of clearing the
+ * property so both engines apply it as a plain format write.
+ */
+export declare const TEXT_ROTATION_PRESETS: TextRotationPreset[];
+export declare const MIN_TEXT_ROTATION = -90;
+export declare const MAX_TEXT_ROTATION = 90;
+/**
+ * Coerce free-form degree input into the supported -90…90 range. Returns
+ * `undefined` for input that is not a finite number.
+ */
+export declare const clampTextRotation: (input: string | number) => number | undefined;
+type TextRotationSelectorProps = {
+    disabled?: boolean;
+    value?: CellFormat["textRotation"];
+    onChange(value: TextRotationValue): void;
+};
+export declare const TextRotationSelector: ({ value, onChange, disabled, }: TextRotationSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=text-rotation-selector.d.ts.map

package/dist/esm/components/toolbar/text-rotation-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-rotation-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-rotation-selector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC;AAExE,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,kBAAkB,EAOrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,MAAM,GAAG,MAAM,uBAMvD,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IACnC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,gCAIlC,yBAAyB,sBAoF3B,CAAC"}

package/dist/esm/components/toolbar/text-rotation-selector.js

@@ -0,0 +1,71 @@
+import { MdOutlineArrowDropDown, RotateCounterClockwiseIcon, } from "@rowsncolumns/icons";
+import { Button, IconButton, Input, Popover, PopoverContent, PopoverTrigger, Stack, } from "@rowsncolumns/ui";
+import React, { useEffect, useState } from "react";
+import { useFocusSheet } from "../../atoms";
+/**
+ * Excel's Orientation menu. Degrees are counter-clockwise positive (Excel's
+ * convention, what the renderer and the xlsx round-trip use), so "clockwise"
+ * presets are negative. `0` is horizontal — used instead of clearing the
+ * property so both engines apply it as a plain format write.
+ */
+export const TEXT_ROTATION_PRESETS = [
+    { label: "Horizontal", value: 0 },
+    { label: "Angle counterclockwise", value: 45 },
+    { label: "Angle clockwise", value: -45 },
+    { label: "Vertical text", value: "vertical" },
+    { label: "Rotate text up", value: 90 },
+    { label: "Rotate text down", value: -90 },
+];
+export const MIN_TEXT_ROTATION = -90;
+export const MAX_TEXT_ROTATION = 90;
+/**
+ * Coerce free-form degree input into the supported -90…90 range. Returns
+ * `undefined` for input that is not a finite number.
+ */
+export const clampTextRotation = (input) => {
+    const value = typeof input === "number" ? input : Number(input);
+    if (!Number.isFinite(value)) {
+        return undefined;
+    }
+    return Math.max(MIN_TEXT_ROTATION, Math.min(MAX_TEXT_ROTATION, value));
+};
+export const TextRotationSelector = ({ value, onChange, disabled, }) => {
+    const focusSheet = useFocusSheet();
+    const [isOpen, onOpenChange] = useState(false);
+    const current = value ?? 0;
+    const [degrees, setDegrees] = useState(typeof current === "number" ? String(current) : "");
+    // Reflect the active cell's rotation in the custom-degrees field whenever
+    // the popover opens on a different value.
+    useEffect(() => {
+        if (isOpen) {
+            setDegrees(typeof current === "number" ? String(current) : "");
+        }
+    }, [isOpen, current]);
+    const close = () => onOpenChange(false);
+    const apply = (next) => {
+        onChange(next);
+        focusSheet?.();
+        close();
+    };
+    const applyDegrees = () => {
+        const next = clampTextRotation(degrees);
+        if (next !== undefined) {
+            apply(next);
+        }
+    };
+    return (React.createElement(Popover, { open: isOpen, onOpenChange: onOpenChange },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { size: "lg", tooltip: "Text orientation", "aria-label": "Text orientation", disabled: disabled },
+                React.createElement(RotateCounterClockwiseIcon, null),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(PopoverContent, { align: "start" },
+            React.createElement(Stack, { direction: "vertical", className: "gap-1 min-w-[200px]" },
+                TEXT_ROTATION_PRESETS.map((preset) => (React.createElement(Button, { key: preset.label, size: "xs", variant: current === preset.value ? "primary" : "ghost", className: "justify-start", "aria-pressed": current === preset.value, onClick: () => apply(preset.value) }, preset.label))),
+                React.createElement("form", { className: "flex items-center gap-1 pt-1 m-0", onSubmit: (e) => {
+                        e.preventDefault();
+                        applyDegrees();
+                    } },
+                    React.createElement("label", { className: "font-system text-xs shrink-0", htmlFor: "rnc-text-rotation-degrees" }, "Degrees"),
+                    React.createElement(Input, { id: "rnc-text-rotation-degrees", type: "number", min: MIN_TEXT_ROTATION, max: MAX_TEXT_ROTATION, step: 1, value: degrees, onChange: (e) => setDegrees(e.target.value), className: "w-[72px]" }),
+                    React.createElement(Button, { size: "xs", type: "submit" }, "Apply"))))));
+};

package/dist/esm/components/toolbar/text-wrap-selector.d.ts

@@ -3,7 +3,13 @@ import type { WrapStrategy } from "../../types";
 type TextWrapSelectorProps = {
     value?: WrapStrategy | null;
     onChange(value: WrapStrategy): void;
+    /**
+     * Excel's "Shrink to fit": scale the font down so the text fits the cell.
+     * The toggle only renders when `onChangeShrinkToFit` is provided.
+     */
+    shrinkToFit?: boolean | null;
+    onChangeShrinkToFit?(value: boolean): void;
 };
-export declare const TextWrapSelector: ({ value, onChange, }: TextWrapSelectorProps) => React.JSX.Element;
+export declare const TextWrapSelector: ({ value, onChange, shrinkToFit, onChangeShrinkToFit, }: TextWrapSelectorProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=text-wrap-selector.d.ts.map

package/dist/esm/components/toolbar/text-wrap-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-wrap-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-wrap-selector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,KAAK,qBAAqB,GAAG;IAC3B,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,sBAG9B,qBAAqB,sBA8DvB,CAAC"}
+{"version":3,"file":"text-wrap-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-wrap-selector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,KAAK,qBAAqB,GAAG;IAC3B,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,mBAAmB,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,wDAK9B,qBAAqB,sBAoFvB,CAAC"}

package/dist/esm/components/toolbar/text-wrap-selector.js

@@ -3,13 +3,13 @@ import { MdOutlineArrowDropDown } from "@rowsncolumns/icons";
 import { IconButton, Popover, PopoverContent, PopoverTrigger, Stack, } from "@rowsncolumns/ui";
 import React, { useState } from "react";
 import { useFocusSheet } from "../../atoms";
-export const TextWrapSelector = ({ value = "overflow", onChange, }) => {
+export const TextWrapSelector = ({ value = "overflow", onChange, shrinkToFit, onChangeShrinkToFit, }) => {
     const focusSheet = useFocusSheet();
     const [isOpen, onOpenChange] = useState(false);
     const close = () => onOpenChange(false);
     return (React.createElement(Popover, { open: isOpen, onOpenChange: onOpenChange },
         React.createElement(PopoverTrigger, { asChild: true },
-            React.createElement(IconButton, { size: "lg", tooltip: "Text wrapping" },
+            React.createElement(IconButton, { size: "lg", tooltip: "Text wrapping", "aria-label": "Text wrapping" },
                 value === "overflow" ? (React.createElement(TextOverflowIcon, null)) : value === "wrap" ? (React.createElement(TextOverflowWrapIcon, null)) : (React.createElement(TextoverflowClipIcon, null)),
                 React.createElement(MdOutlineArrowDropDown, null))),
         React.createElement(PopoverContent, { align: "start" },
@@ -31,5 +31,12 @@ export const TextWrapSelector = ({ value = "overflow", onChange, }) => {
                         focusSheet?.();
                         close();
                     } },
-                    React.createElement(TextoverflowClipIcon, null))))));
+                    React.createElement(TextoverflowClipIcon, null)),
+                onChangeShrinkToFit ? (React.createElement(IconButton, { size: "lg", isActive: !!shrinkToFit, "aria-pressed": !!shrinkToFit, tooltip: "Shrink text to fit the cell", "aria-label": "Shrink text to fit the cell", className: "w-full justify-start gap-1", onClick: () => {
+                        onChangeShrinkToFit(!shrinkToFit);
+                        focusSheet?.();
+                        close();
+                    } },
+                    React.createElement(TextoverflowClipIcon, null),
+                    React.createElement("span", { className: "text-xs" }, "Shrink to fit"))) : null))));
 };

package/dist/esm/components/watch-window/index.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { type WatchWindowContext, type WatchWindowEntry } from "../../atoms/watch-window.atom";
+import type { SheetCoordinate } from "../../types";
+export type WatchWindowProps = {
+    entries: WatchWindowEntry[];
+    context: WatchWindowContext | null;
+    onRemove(cell: SheetCoordinate): void;
+    onClose(): void;
+};
+/**
+ * Excel's Watch Window: a floating list of cells with their sheet, address,
+ * current value and formula, refreshed with the grid. Double-click a row to
+ * jump to the cell. Presentational; {@link WatchWindowHost} wires the atoms.
+ */
+export declare const WatchWindow: React.MemoExoticComponent<({ entries, context, onRemove, onClose }: WatchWindowProps) => React.JSX.Element>;
+/**
+ * Host-mounted, atom-driven Watch Window. Mount once alongside the other
+ * dialogs; the grid's context menu offers "Add to Watch Window" while a
+ * host is mounted and republishes live getters on each render.
+ */
+export declare const WatchWindowHost: {
+    (): React.JSX.Element | null;
+    displayName: string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/watch-window/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/watch-window/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IACtC,OAAO,IAAI,IAAI,CAAC;CACjB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,sEACoB,gBAAgB,uBA6E3D,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;CAgB3B,CAAC"}

package/dist/esm/components/watch-window/index.js

@@ -0,0 +1,54 @@
+import { Button, IconButton } from "@rowsncolumns/ui";
+import { Cross1Icon } from "@rowsncolumns/icons";
+import { cellToAddress } from "@rowsncolumns/utils";
+import React, { memo, useCallback } from "react";
+import { useRegisterWatchWindowHost, useRemoveWatch, useWatchWindowContext, useWatchWindowEntries, useWatchWindowOpen, } from "../../atoms/watch-window.atom";
+/**
+ * Excel's Watch Window: a floating list of cells with their sheet, address,
+ * current value and formula, refreshed with the grid. Double-click a row to
+ * jump to the cell. Presentational; {@link WatchWindowHost} wires the atoms.
+ */
+export const WatchWindow = memo(({ entries, context, onRemove, onClose }) => (React.createElement("div", { role: "dialog", "aria-label": "Watch Window", className: "fixed bottom-4 right-4 z-50 w-[420px] max-w-[92vw] rounded-md border border-rnc-border bg-rnc-background text-rnc-foreground shadow-lg pointer-events-auto" },
+    React.createElement("div", { className: "flex items-center justify-between px-3 py-2 border-b border-rnc-border" },
+        React.createElement("span", { className: "text-sm font-medium" }, "Watch Window"),
+        React.createElement(IconButton, { "aria-label": "Close Watch Window", onClick: onClose },
+            React.createElement(Cross1Icon, null))),
+    entries.length === 0 ? (React.createElement("div", { className: "px-3 py-4 text-xs text-rnc-foreground/60" }, "No cells are being watched. Right-click a cell \u2192 Add to Watch Window.")) : (React.createElement("table", { className: "w-full text-xs border-collapse" },
+        React.createElement("thead", null,
+            React.createElement("tr", { className: "text-left text-rnc-foreground/70" },
+                React.createElement("th", { className: "px-3 py-1 font-medium" }, "Sheet"),
+                React.createElement("th", { className: "px-2 py-1 font-medium" }, "Cell"),
+                React.createElement("th", { className: "px-2 py-1 font-medium" }, "Value"),
+                React.createElement("th", { className: "px-2 py-1 font-medium" }, "Formula"),
+                React.createElement("th", { className: "px-2 py-1" }))),
+        React.createElement("tbody", null, entries.map((entry) => {
+            const address = cellToAddress(entry) ?? "";
+            const sheetName = context?.getSheetName?.(entry.sheetId) ?? String(entry.sheetId);
+            const value = context?.getFormattedValue(entry.sheetId, entry.rowIndex, entry.columnIndex);
+            const formula = context?.getFormula(entry.sheetId, entry.rowIndex, entry.columnIndex);
+            return (React.createElement("tr", { key: `${entry.sheetId}:${entry.rowIndex}:${entry.columnIndex}`, className: "cursor-default hover:bg-rnc-accent", onDoubleClick: () => context?.onNavigate(entry), "data-testid": "watch-row" },
+                React.createElement("td", { className: "px-3 py-1 truncate max-w-[110px]" }, sheetName),
+                React.createElement("td", { className: "px-2 py-1 font-mono" }, address),
+                React.createElement("td", { className: "px-2 py-1 truncate max-w-[120px]" }, value ?? ""),
+                React.createElement("td", { className: "px-2 py-1 font-mono truncate max-w-[140px]" }, formula ?? ""),
+                React.createElement("td", { className: "px-2 py-1 text-right" },
+                    React.createElement(Button, { variant: "ghost", size: "xs", "aria-label": `Remove watch ${sheetName}!${address}`, onClick: () => onRemove(entry) }, "Delete"))));
+        })))))));
+WatchWindow.displayName = "WatchWindow";
+/**
+ * Host-mounted, atom-driven Watch Window. Mount once alongside the other
+ * dialogs; the grid's context menu offers "Add to Watch Window" while a
+ * host is mounted and republishes live getters on each render.
+ */
+export const WatchWindowHost = () => {
+    useRegisterWatchWindowHost();
+    const [entries] = useWatchWindowEntries();
+    const [open, setOpen] = useWatchWindowOpen();
+    const context = useWatchWindowContext();
+    const removeWatch = useRemoveWatch();
+    const close = useCallback(() => setOpen(false), [setOpen]);
+    if (!open)
+        return null;
+    return (React.createElement(WatchWindow, { entries: entries, context: context, onRemove: removeWatch, onClose: close }));
+};
+WatchWindowHost.displayName = "WatchWindowHost";

package/dist/esm/hooks/use-cell-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-cell-renderer.d.ts","sourceRoot":"","sources":["../../../hooks/use-cell-renderer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-cell-renderer.d.ts","sourceRoot":"","sources":["../../../hooks/use-cell-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAe3C,OAAO,KAAK,EACV,QAAQ,EACR,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,SAAS,EACT,UAAU,EACX,MAAM,UAAU,CAAC;AAGlB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1C,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1C,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5C,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/C,mBAAmB,EAAE,MAAM,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,2BAA2B,EAAE,MAAM,CAAC;IACpC,6BAA6B,EAAE,MAAM,CAAC;IACtC,gCAAgC,EAAE,MAAM,CAAC;IACzC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,0BAA0B,EAAE,MAAM,CAAC;IACnC,kCAAkC,EAAE,MAAM,CAAC;IAC3C,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,wBAAwB,EAAE,OAAO,CAAC;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9D,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IAC9D,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACzD,wBAAwB,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IACzE,yBAAyB,CACvB,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,uBAAuB,EAAE,CACvB,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAClC,oBAAoB,CAClB,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,qBAAqB,CAAC,QAAQ,EAAE,aAAa,GAAG,OAAO,CAAC;IACxD,iBAAiB,CACf,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,kBAAkB,GAAG,SAAS,GAAG,IAAI,CAAC;IACzC,iBAAiB,CACf,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACvB,iBAAiB,CACf,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,MAAM,GAAG,SAAS,CAAC;IACtB;;;;OAIG;IACH,aAAa,CACX,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,UAAU,GAAG,SAAS,CAAC;IAC1B;;;;OAIG;IACH,sBAAsB,CACpB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,IAAI,EAAE,aAAa,GAAG;QAClC,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;QACpB,gBAAgB,EAAE,MAAM,CAAC;QACzB,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;IAEF;;;;OAIG;IACH,eAAe,CACb,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,MAAM,GAAG,SAAS,CAAC;IACtB;;;;OAIG;IACH,eAAe,CACb,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,CAAC,CAAC,UAAU,CAAC,CAAC;IACjB;;;OAGG;IACH,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3C;;;OAGG;IACH,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IACjD;;;;OAIG;IACH,OAAO,CACL,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,MAAM,GAAG,SAAS,CAAC;IACtB;;;;OAIG;IACH,UAAU,CACR,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,CAAC,CAAC,iBAAiB,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC;IAC3C;;;;;OAKG;IACH;;;;OAIG;IACH,iBAAiB,EAAE,eAAe,CAAC,mBAAmB,CAAC,CAAC;IACxD;;;;OAIG;IACH,2BAA2B,CACzB,cAAc,EAAE,MAAM,GAAG,SAAS,EAClC,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,qBAAqB,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,OAAO,EACvD,UAAU,EAAE,UAAU,GAAG,SAAS,GAAG,IAAI,EACzC,UAAU,EAAE,OAAO,GAAG,SAAS,EAC/B,SAAS,EAAE,SAAS,GACnB;QACD,MAAM;QACN;YACE,WAAW,EAAE,MAAM;YACnB,YAAY,EAAE,MAAM;YACpB,WAAW,EAAE,MAAM;YACnB,cAAc,CAAC,EAAE,KAAK,GAAG,IAAI;SAC9B,EAAE;KACJ,CAAC;IACF;;;;;;OAMG;IACH,gBAAgB,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAClE;;;OAGG;IACH,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1D;;;OAGG;IACH,aAAa,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IACzC;;;;OAIG;IACH,eAAe,CAAC,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7D;;;;OAIG;IACH,mBAAmB,CACjB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,SAAS,CAAC,UAAU,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;IAC7E;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3C;;OAEG;IACH,UAAU,EAAE,WAAW,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC,CAAC;IACvD;;OAEG;IACH,gBAAgB,EAAE,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACnE;;OAEG;IACH,KAAK,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B;;OAEG;IACH,oBAAoB,EAAE,WAAW,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAC3E;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,CACf,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,aAAa,EACnB,aAAa,EAAE,OAAO,GACrB,IAAI,CAAC;IACR,UAAU,CAAC,EAAE,CACX,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CACZ,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,QAAQ,GAAG,IAAI,CAAC;IAErB;;;;;OAKG;IACH,6BAA6B,CAC3B,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,eAAe,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAAE,qsCAmE5D,iBAAiB,CAAC,CAAC,CAAC,cAwVX,aAAa,4CAuRxB,CAAC"}

package/dist/esm/hooks/use-cell-renderer.js

@@ -3,6 +3,7 @@ import { isNil } from "@rowsncolumns/utils";
 import React, { useCallback } from "react";
 import { getHeaderFill } from "../api/colors";
 import { showValidationDropdownArrow } from "../api/validation";
+import { alignmentImpliesWrap, isFillAlignment, } from "../components/cell/alignment";
 import { CellBackground } from "../components/cell/cell-background";
 import { CellDiff as CellDiffRenderer } from "../components/cell-diff";
 import { CellOverlayRenderer } from "../components/cell-overlay";
@@ -50,10 +51,17 @@ export const useCellRenderer = ({ sheetId, scale, showGridLines, showZeros, isRo
         // Calculated column
         const isCalculatedColumn = isTableHeader(rowIndex, columnIndex) &&
             isCalculatedColumnHeader(rowIndex, columnIndex);
-        // Cell overflow
+        // Cell overflow. Excel's justify / distributed alignments wrap inside
+        // the cell's own width even without `wrapStrategy: "wrap"`, and fill
+        // repeats the text to the cell edge — none of them ever spill into
+        // the neighbouring cells.
         const wrapStrategy = effectiveCellFormat?.wrapStrategy;
-        const shouldWrap = wrapStrategy === "wrap";
-        const isWrapEnabled = (wrapStrategy ?? "overflow") === "overflow";
+        const wrapsByAlignment = alignmentImpliesWrap(horizontalAlignment);
+        const fillsCell = isFillAlignment(horizontalAlignment);
+        const shouldWrap = wrapStrategy === "wrap" || wrapsByAlignment;
+        const isWrapEnabled = (wrapStrategy ?? "overflow") === "overflow" &&
+            !wrapsByAlignment &&
+            !fillsCell;
         // Normalize display value for both rendering and overflow calculation
         const displayFormattedValue = normalizeDisplayText(formattedValue, shouldWrap);
         const shouldRecalcTextWidth = isWrapEnabled || wrapStrategy === "clip";
@@ -105,9 +113,12 @@ export const useCellRenderer = ({ sheetId, scale, showGridLines, showZeros, isRo
         }
         // shrinkToFit needs the natural text width to compare against the
         // cell's available width; rotated text uses it to size the (unrotated)
-        // text box that gets pivoted around the cell edge. Without this, the
-        // Konva Text renders with width 0 and the text disappears.
-        const textWidth = (overflowRight && shouldRecalcTextWidth) || containsTextInside
+        // text box that gets pivoted around the cell edge; fill alignment
+        // repeats the text `floor(cell / natural)` times. Without this, the
+        // Konva Text renders with width 0 (rotation) or a single unfilled copy.
+        const textWidth = (overflowRight && shouldRecalcTextWidth) ||
+            containsTextInside ||
+            fillsCell
             ? getTextDimension(sheetId, rowIndex, columnIndex, displayFormattedValue).width
             : 0;
         const enableOverflow = shouldOverflow && cellWidth > props.width;

package/dist/esm/hooks/use-copy-paste-cut.d.ts

@@ -31,11 +31,30 @@ export type UseCopyPasteCutProps = {
     onCut: CanvasGridProps["onCut"];
 };
 export type PasteSpecialType = "Transposed" | "Formatting" | "Value" | "Formula" | "Link";
+/** Excel Paste Special → Operation: combine each pasted cell with the cell it lands on. */
+export type PasteSpecialOperation = "add" | "subtract" | "multiply" | "divide";
+/**
+ * Excel's Paste Special dialog as one request. `paste` picks what is
+ * pasted (all / values / formulas / formats), `operation` combines the pasted
+ * value with the destination (`=dest+source`, formulas stay formulas),
+ * `skipBlanks` leaves the destination untouched where the clipboard cell is
+ * empty and `transpose` swaps rows and columns. Every flag composes with the
+ * others; the legacy single-mode {@link PasteSpecialType} strings map onto
+ * the same fields.
+ */
+export type PasteSpecialOptions = {
+    paste?: "all" | "values" | "formulas" | "formats";
+    operation?: PasteSpecialOperation;
+    skipBlanks?: boolean;
+    transpose?: boolean;
+};
+/** Argument accepted by `paste()` — a legacy single mode or the full dialog request. */
+export type PasteSpecialRequest = PasteSpecialType | PasteSpecialOptions;
 export declare const useCopyPasteCut: ({ selections, activeCell, sheetId, onPaste, onCopy, onCut, focusSheet, }: UseCopyPasteCutProps) => {
     selections: SelectionArea[];
     copy: () => void;
     cut: () => void;
-    paste: (pasteSpecialType?: PasteSpecialType) => Promise<void>;
+    paste: (pasteSpecial?: PasteSpecialRequest) => Promise<void>;
     copiedSelections: any[];
     clearCopiedSelections: () => void;
     onInternalCopy: (e: ClipboardEvent, isCutOperation?: boolean) => boolean;