@rowsncolumns/spreadsheet-state 29.2.0 → 29.3.3

package/dist/cjs/components/editors/cell-format/alignment-tab.js

@@ -0,0 +1,83 @@
+import { __assign } from "tslib";
+import { Input } from "@rowsncolumns/ui";
+import React from "react";
+import { CheckboxField, SelectField } from "./list-box";
+/** Excel's Horizontal list, in Excel's order. */
+export var HORIZONTAL_OPTIONS = [
+    { value: "general", label: "General" },
+    { value: "left", label: "Left (Indent)" },
+    { value: "center", label: "Center" },
+    { value: "right", label: "Right (Indent)" },
+    { value: "fill", label: "Fill" },
+    { value: "justify", label: "Justify" },
+    { value: "centerContinuous", label: "Center Across Selection" },
+    { value: "distributed", label: "Distributed (Indent)" },
+];
+/** Excel's Vertical list. */
+export var VERTICAL_OPTIONS = [
+    { value: "top", label: "Top" },
+    { value: "middle", label: "Center" },
+    { value: "bottom", label: "Bottom" },
+    { value: "justify", label: "Justify" },
+    { value: "distributed", label: "Distributed" },
+];
+export var TEXT_DIRECTION_OPTIONS = [
+    { value: "context", label: "Context" },
+    { value: "ltr", label: "Left-to-Right" },
+    { value: "rtl", label: "Right-to-Left" },
+];
+/** Horizontal modes Excel lets you indent. */
+var INDENTABLE = new Set(["left", "right", "distributed"]);
+/** Format Cells → Alignment. */
+export var AlignmentTab = function (_a) {
+    var _b, _c, _d, _e;
+    var format = _a.format, onChange = _a.onChange, merged = _a.merged, onChangeMerged = _a.onChangeMerged;
+    var horizontal = (_b = format.horizontalAlignment) !== null && _b !== void 0 ? _b : "general";
+    var vertical = (_c = format.verticalAlignment) !== null && _c !== void 0 ? _c : "bottom";
+    var rotation = format.textRotation;
+    var stacked = rotation === "vertical";
+    var degrees = typeof rotation === "number" ? rotation : 0;
+    var wrap = format.wrapStrategy === "wrap";
+    var shrink = !!format.shrinkToFit;
+    return (React.createElement("div", { className: "grid grid-cols-[1fr_160px] gap-4" },
+        React.createElement("div", { className: "flex flex-col gap-3" },
+            React.createElement("fieldset", { className: "flex flex-col gap-2 border-0 p-0" },
+                React.createElement("legend", { className: "pb-1 font-system text-sm" }, "Text alignment"),
+                React.createElement("div", { className: "grid grid-cols-[1fr_90px] gap-2" },
+                    React.createElement(SelectField, { label: "Horizontal", value: horizontal, options: HORIZONTAL_OPTIONS, onChange: function (value) {
+                            return onChange(__assign({ horizontalAlignment: value === "general" ? undefined : value }, (INDENTABLE.has(value) ? {} : { indent: 0 })));
+                        } }),
+                    React.createElement("label", { className: "flex flex-col gap-1 font-system text-sm" },
+                        "Indent",
+                        React.createElement(Input, { "aria-label": "Indent", type: "number", min: 0, max: 250, className: "text-xs", disabled: !INDENTABLE.has(horizontal), value: (_d = format.indent) !== null && _d !== void 0 ? _d : 0, onChange: function (event) {
+                                var n = parseInt(event.target.value, 10);
+                                onChange({
+                                    indent: Number.isFinite(n) ? Math.max(0, Math.min(250, n)) : 0,
+                                });
+                            } }))),
+                React.createElement(SelectField, { label: "Vertical", value: vertical, options: VERTICAL_OPTIONS, onChange: function (value) { return onChange({ verticalAlignment: value }); } })),
+            React.createElement("fieldset", { className: "flex flex-col gap-1.5 border-0 p-0" },
+                React.createElement("legend", { className: "pb-1 font-system text-sm" }, "Text control"),
+                React.createElement(CheckboxField, { label: "Wrap text", checked: wrap, onChange: function (checked) {
+                        return onChange(__assign({ wrapStrategy: checked ? "wrap" : "overflow" }, (checked ? { shrinkToFit: false } : {})));
+                    } }),
+                React.createElement(CheckboxField, { label: "Shrink to fit", checked: shrink, disabled: wrap, onChange: function (checked) { return onChange({ shrinkToFit: checked }); } }),
+                React.createElement(CheckboxField, { label: "Merge cells", checked: merged, onChange: onChangeMerged })),
+            React.createElement("fieldset", { className: "flex flex-col gap-1 border-0 p-0" },
+                React.createElement("legend", { className: "pb-1 font-system text-sm" }, "Right-to-left"),
+                React.createElement(SelectField, { label: "Text direction", value: (_e = format.readingOrder) !== null && _e !== void 0 ? _e : "context", options: TEXT_DIRECTION_OPTIONS, onChange: function (value) { return onChange({ readingOrder: value }); } }))),
+        React.createElement("fieldset", { className: "flex flex-col gap-2 border-0 p-0" },
+            React.createElement("legend", { className: "pb-1 font-system text-sm" }, "Orientation"),
+            React.createElement("button", { type: "button", "aria-pressed": stacked, "aria-label": "Vertical text", className: "flex h-20 w-8 flex-col items-center justify-center rounded-sm border border-solid text-xs leading-tight ".concat(stacked ? "border-rnc-primary" : "border-rnc-border"), onClick: function () { return onChange({ textRotation: stacked ? 0 : "vertical" }); } }, "Text".split("").map(function (ch, i) { return (React.createElement("span", { key: i }, ch)); })),
+            React.createElement("input", { "aria-label": "Orientation", type: "range", min: -90, max: 90, step: 1, value: degrees, disabled: stacked, onChange: function (event) {
+                    return onChange({ textRotation: Number(event.target.value) });
+                } }),
+            React.createElement("label", { className: "flex items-center gap-1 font-system text-xs" },
+                React.createElement(Input, { "aria-label": "Degrees", type: "number", min: -90, max: 90, className: "w-16 text-xs", value: degrees, disabled: stacked, onChange: function (event) {
+                        var n = parseInt(event.target.value, 10);
+                        onChange({
+                            textRotation: Number.isFinite(n) ? Math.max(-90, Math.min(90, n)) : 0,
+                        });
+                    } }),
+                "Degrees"))));
+};

package/dist/cjs/components/editors/cell-format/border-edges.d.ts

@@ -0,0 +1,42 @@
+import type { BorderLocation, Borders, BorderStyle, Color } from "@rowsncolumns/spreadsheet";
+export type EdgeKey = "top" | "insideHorizontal" | "bottom" | "left" | "insideVertical" | "right" | "diagonalUp" | "diagonalDown";
+export type EdgeLine = {
+    style: BorderStyle;
+    color: Color;
+};
+/** `null` = no border on that edge. */
+export type EdgeState = EdgeLine | null;
+export type EdgeMap = Partial<Record<EdgeKey, EdgeState>>;
+/** The line style the Line Style list picks; `"none"` removes the edge clicked. */
+export type LineStyleChoice = BorderStyle | "none";
+/** Excel's Line Style list, in Excel's order (None, then thin → thick). */
+export declare const LINE_STYLES: {
+    value: LineStyleChoice;
+    label: string;
+}[];
+export declare const EDGE_LOCATION: Record<EdgeKey, BorderLocation>;
+export declare const ALL_EDGES: EdgeKey[];
+/** The active cell's own edges, as the preview opens on them. */
+export declare const edgesFromBorders: (borders: Borders | null | undefined) => EdgeMap;
+/**
+ * Click an edge: Excel removes it when it already carries the current style
+ * and colour (or the style is None), otherwise draws it in them.
+ */
+export declare const toggleEdge: (shown: EdgeMap, key: EdgeKey, lineStyle: LineStyleChoice, color: Color) => EdgeState;
+/** The None / Outline / Inside presets: the edges they set. */
+export declare const presetEdges: (preset: "none" | "outline" | "inside", lineStyle: LineStyleChoice, color: Color) => EdgeMap;
+export type BorderCommand = {
+    location: BorderLocation;
+    /** Both `undefined` = remove the edge (the `onChangeBorder` clear contract). */
+    color: Color | undefined;
+    style: BorderStyle | undefined;
+};
+/**
+ * The `onChangeBorder` calls for the edited edges. A None preset that touched
+ * every edge is one `"none"` command (clears diagonals too); everything else
+ * is one command per edited edge, removals first so a redraw lands on top.
+ */
+export declare const toBorderCommands: (edits: EdgeMap, options?: {
+    clearedAll?: boolean;
+}) => BorderCommand[];
+//# sourceMappingURL=border-edges.d.ts.map

package/dist/cjs/components/editors/cell-format/border-edges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-edges.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/border-edges.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,cAAc,EACd,OAAO,EACP,WAAW,EACX,KAAK,EACN,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,OAAO,GACf,KAAK,GACL,kBAAkB,GAClB,QAAQ,GACR,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,YAAY,GACZ,cAAc,CAAC;AAEnB,MAAM,MAAM,QAAQ,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC;AAC5D,uCAAuC;AACvC,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,IAAI,CAAC;AACxC,MAAM,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;AAE1D,mFAAmF;AACnF,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,MAAM,CAAC;AAEnD,2EAA2E;AAC3E,eAAO,MAAM,WAAW,EAAE;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAelE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,OAAO,EAAE,cAAc,CASzD,CAAC;AAIF,eAAO,MAAM,SAAS,EAAE,OAAO,EAA0D,CAAC;AAE1F,iEAAiE;AACjE,eAAO,MAAM,gBAAgB,GAAI,SAAS,OAAO,GAAG,IAAI,GAAG,SAAS,KAAG,OAOtE,CAAC;AAKF;;;GAGG;AACH,eAAO,MAAM,UAAU,GACrB,OAAO,OAAO,EACd,KAAK,OAAO,EACZ,WAAW,eAAe,EAC1B,OAAO,KAAK,KACX,SAG8B,CAAC;AAElC,+DAA+D;AAC/D,eAAO,MAAM,WAAW,GACtB,QAAQ,MAAM,GAAG,SAAS,GAAG,QAAQ,EACrC,WAAW,eAAe,EAC1B,OAAO,KAAK,KACX,OAYF,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,cAAc,CAAC;IACzB,gFAAgF;IAChF,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IACzB,KAAK,EAAE,WAAW,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,OAAO,EACd,UAAS;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAO,KACrC,aAAa,EAgBf,CAAC"}

package/dist/cjs/components/editors/cell-format/border-edges.js

@@ -0,0 +1,118 @@
+import { __read, __spreadArray, __values } from "tslib";
+/** Excel's Line Style list, in Excel's order (None, then thin → thick). */
+export var LINE_STYLES = [
+    { value: "none", label: "None" },
+    { value: "hair", label: "Hair" },
+    { value: "dotted", label: "Dotted" },
+    { value: "dashDotDot", label: "Dash dot dot" },
+    { value: "dashDot", label: "Dash dot" },
+    { value: "dashed", label: "Dashed" },
+    { value: "solid", label: "Thin" },
+    { value: "mediumDashDotDot", label: "Medium dash dot dot" },
+    { value: "slantDashDot", label: "Slanted dash dot" },
+    { value: "mediumDashDot", label: "Medium dash dot" },
+    { value: "mediumDashed", label: "Medium dashed" },
+    { value: "solid_medium", label: "Medium" },
+    { value: "solid_thick", label: "Thick" },
+    { value: "double", label: "Double" },
+];
+export var EDGE_LOCATION = {
+    top: "top",
+    insideHorizontal: "horizontal",
+    bottom: "bottom",
+    left: "left",
+    insideVertical: "vertical",
+    right: "right",
+    diagonalUp: "diagonalUp",
+    diagonalDown: "diagonalDown",
+};
+var OUTLINE = ["top", "bottom", "left", "right"];
+var INSIDE = ["insideHorizontal", "insideVertical"];
+export var ALL_EDGES = __spreadArray(__spreadArray(__spreadArray([], __read(OUTLINE), false), __read(INSIDE), false), ["diagonalUp", "diagonalDown"], false);
+/** The active cell's own edges, as the preview opens on them. */
+export var edgesFromBorders = function (borders) {
+    var e_1, _a;
+    var _b;
+    var map = {};
+    try {
+        for (var _c = __values(["top", "bottom", "left", "right", "diagonalUp", "diagonalDown"]), _d = _c.next(); !_d.done; _d = _c.next()) {
+            var key = _d.value;
+            var b = borders === null || borders === void 0 ? void 0 : borders[key];
+            if (b === null || b === void 0 ? void 0 : b.style)
+                map[key] = { style: b.style, color: (_b = b.color) !== null && _b !== void 0 ? _b : "#000000" };
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return map;
+};
+var sameLine = function (a, b) {
+    return !!a && a.style === b.style && JSON.stringify(a.color) === JSON.stringify(b.color);
+};
+/**
+ * Click an edge: Excel removes it when it already carries the current style
+ * and colour (or the style is None), otherwise draws it in them.
+ */
+export var toggleEdge = function (shown, key, lineStyle, color) {
+    return lineStyle === "none" || sameLine(shown[key], { style: lineStyle, color: color })
+        ? null
+        : { style: lineStyle, color: color };
+};
+/** The None / Outline / Inside presets: the edges they set. */
+export var presetEdges = function (preset, lineStyle, color) {
+    if (preset === "none" || lineStyle === "none") {
+        return Object.fromEntries((preset === "none" ? ALL_EDGES : preset === "outline" ? OUTLINE : INSIDE).map(function (k) { return [k, null]; }));
+    }
+    var line = { style: lineStyle, color: color };
+    return Object.fromEntries((preset === "outline" ? OUTLINE : INSIDE).map(function (k) { return [k, line]; }));
+};
+/**
+ * The `onChangeBorder` calls for the edited edges. A None preset that touched
+ * every edge is one `"none"` command (clears diagonals too); everything else
+ * is one command per edited edge, removals first so a redraw lands on top.
+ */
+export var toBorderCommands = function (edits, options) {
+    var e_2, _a, e_3, _b;
+    if (options === void 0) { options = {}; }
+    var commands = [];
+    if (options.clearedAll) {
+        commands.push({ location: "none", color: undefined, style: undefined });
+    }
+    var keys = ALL_EDGES.filter(function (k) { return k in edits; });
+    try {
+        for (var keys_1 = __values(keys), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
+            var key = keys_1_1.value;
+            if (edits[key] === null && !options.clearedAll) {
+                commands.push({ location: EDGE_LOCATION[key], color: undefined, style: undefined });
+            }
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (keys_1_1 && !keys_1_1.done && (_a = keys_1.return)) _a.call(keys_1);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    try {
+        for (var keys_2 = __values(keys), keys_2_1 = keys_2.next(); !keys_2_1.done; keys_2_1 = keys_2.next()) {
+            var key = keys_2_1.value;
+            var line = edits[key];
+            if (line)
+                commands.push({ location: EDGE_LOCATION[key], color: line.color, style: line.style });
+        }
+    }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    finally {
+        try {
+            if (keys_2_1 && !keys_2_1.done && (_b = keys_2.return)) _b.call(keys_2);
+        }
+        finally { if (e_3) throw e_3.error; }
+    }
+    return commands;
+};

package/dist/cjs/components/editors/cell-format/border-tab.d.ts

@@ -0,0 +1,21 @@
+import type { Color, SpreadsheetTheme } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import { type EdgeMap, type LineStyleChoice } from "./border-edges";
+export type BorderTabProps = {
+    /** The edges as shown: the active cell's, with the user's edits on top. */
+    edges: EdgeMap;
+    onEdit(edits: EdgeMap, options?: {
+        clearedAll?: boolean;
+    }): void;
+    lineStyle: LineStyleChoice;
+    onLineStyle(style: LineStyleChoice): void;
+    color: Color;
+    onColor(color: Color): void;
+    /** Inside edges exist only for a multi-row / multi-column selection. */
+    hasInsideRows: boolean;
+    hasInsideColumns: boolean;
+    theme: SpreadsheetTheme;
+};
+/** Format Cells → Border. */
+export declare const BorderTab: ({ edges, onEdit, lineStyle, onLineStyle, color, onColor, hasInsideRows, hasInsideColumns, theme, }: BorderTabProps) => React.JSX.Element;
+//# sourceMappingURL=border-tab.d.ts.map

package/dist/cjs/components/editors/cell-format/border-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-tab.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/border-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,KAAK,OAAO,EAEZ,KAAK,eAAe,EAGrB,MAAM,gBAAgB,CAAC;AA2FxB,MAAM,MAAM,cAAc,GAAG;IAC3B,2EAA2E;IAC3E,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;IACjE,SAAS,EAAE,eAAe,CAAC;IAC3B,WAAW,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B,wEAAwE;IACxE,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,6BAA6B;AAC7B,eAAO,MAAM,SAAS,GAAI,oGAUvB,cAAc,sBA+HhB,CAAC"}

package/dist/cjs/components/editors/cell-format/border-tab.js

@@ -0,0 +1,123 @@
+import { __read } from "tslib";
+import { BorderColorSelector, getStringifiedColor } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import { LINE_STYLES, presetEdges, toggleEdge, } from "./border-edges";
+import { ListBox } from "./list-box";
+var DASH = {
+    hair: "1 1",
+    dotted: "1 2",
+    dashDotDot: "4 2 1 2 1 2",
+    dashDot: "4 2 1 2",
+    dashed: "3 2",
+    mediumDashDotDot: "4 2 1 2 1 2",
+    slantDashDot: "4 2 1 2",
+    mediumDashDot: "4 2 1 2",
+    mediumDashed: "4 2",
+};
+var WIDTH = {
+    mediumDashDotDot: 2,
+    slantDashDot: 2,
+    mediumDashDot: 2,
+    mediumDashed: 2,
+    solid_medium: 2,
+    solid_thick: 3,
+};
+/** One SVG line in a style's dash / weight (double = two thin lines). */
+var StyledLine = function (_a) {
+    var _b;
+    var x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2, style = _a.style, color = _a.color;
+    if (style === "none")
+        return null;
+    if (style === "double") {
+        var dx = y2 - y1;
+        var dy = x1 - x2;
+        var len = Math.hypot(dx, dy) || 1;
+        var _c = __read([(dx / len) * 1.5, (dy / len) * 1.5], 2), ox = _c[0], oy = _c[1];
+        return (React.createElement(React.Fragment, null,
+            React.createElement("line", { x1: x1 + ox, y1: y1 + oy, x2: x2 + ox, y2: y2 + oy, stroke: color, strokeWidth: 1 }),
+            React.createElement("line", { x1: x1 - ox, y1: y1 - oy, x2: x2 - ox, y2: y2 - oy, stroke: color, strokeWidth: 1 })));
+    }
+    return (React.createElement("line", { x1: x1, y1: y1, x2: x2, y2: y2, stroke: color, strokeWidth: (_b = WIDTH[style]) !== null && _b !== void 0 ? _b : 1, strokeDasharray: DASH[style] }));
+};
+/** Preview geometry (a 2×2 grid when the selection has inside edges). */
+var W = 160;
+var H = 100;
+var EDGE_GEOMETRY = {
+    top: [10, 10, W - 10, 10],
+    insideHorizontal: [10, H / 2, W - 10, H / 2],
+    bottom: [10, H - 10, W - 10, H - 10],
+    left: [10, 10, 10, H - 10],
+    insideVertical: [W / 2, 10, W / 2, H - 10],
+    right: [W - 10, 10, W - 10, H - 10],
+    diagonalUp: [10, H - 10, W - 10, 10],
+    diagonalDown: [10, 10, W - 10, H - 10],
+};
+var EDGE_BUTTONS = [
+    { key: "top", label: "Top border" },
+    { key: "insideHorizontal", label: "Inside horizontal border" },
+    { key: "bottom", label: "Bottom border" },
+    { key: "diagonalUp", label: "Diagonal up border" },
+    { key: "left", label: "Left border" },
+    { key: "insideVertical", label: "Inside vertical border" },
+    { key: "right", label: "Right border" },
+    { key: "diagonalDown", label: "Diagonal down border" },
+];
+/** Format Cells → Border. */
+export var BorderTab = function (_a) {
+    var edges = _a.edges, onEdit = _a.onEdit, lineStyle = _a.lineStyle, onLineStyle = _a.onLineStyle, color = _a.color, onColor = _a.onColor, hasInsideRows = _a.hasInsideRows, hasInsideColumns = _a.hasInsideColumns, theme = _a.theme;
+    var enabled = function (key) {
+        return key === "insideHorizontal" ? hasInsideRows : key === "insideVertical" ? hasInsideColumns : true;
+    };
+    var cssColor = function (c) { var _a; return (_a = getStringifiedColor(c, theme)) !== null && _a !== void 0 ? _a : "#000000"; };
+    return (React.createElement("div", { className: "grid grid-cols-[150px_1fr] gap-4" },
+        React.createElement("div", { className: "flex flex-col gap-2" },
+            React.createElement("span", { className: "font-system text-sm" }, "Line style"),
+            React.createElement(ListBox, { label: "Line style", value: lineStyle, className: "max-h-[220px]", items: LINE_STYLES.map(function (_a) {
+                    var value = _a.value, label = _a.label;
+                    return ({
+                        value: value,
+                        label: (React.createElement("span", { className: "flex items-center gap-1", title: label }, value === "none" ? ("None") : (React.createElement("svg", { width: "90", height: "8", "aria-label": label },
+                            React.createElement(StyledLine, { x1: 0, y1: 4, x2: 90, y2: 4, style: value, color: "currentColor" }))))),
+                    });
+                }), onChange: onLineStyle }),
+            React.createElement("span", { className: "font-system text-sm" }, "Color"),
+            React.createElement(BorderColorSelector, { color: color, onChange: onColor, theme: theme })),
+        React.createElement("div", { className: "flex flex-col gap-2" },
+            React.createElement("span", { className: "font-system text-sm" }, "Presets"),
+            React.createElement("div", { className: "flex gap-2" }, [
+                ["none", "None"],
+                ["outline", "Outline"],
+                ["inside", "Inside"],
+            ].map(function (_a) {
+                var _b = __read(_a, 2), preset = _b[0], label = _b[1];
+                return (React.createElement("button", { type: "button", key: preset, className: "rounded-sm border border-solid border-rnc-border px-2 py-1 text-xs", disabled: preset === "inside" && !hasInsideRows && !hasInsideColumns, onClick: function () {
+                        return onEdit(presetEdges(preset, lineStyle, color), {
+                            clearedAll: preset === "none",
+                        });
+                    } }, label));
+            })),
+            React.createElement("span", { className: "font-system text-sm" }, "Border"),
+            React.createElement("div", { className: "flex gap-2" },
+                React.createElement("div", { className: "grid grid-cols-2 gap-1", role: "group", "aria-label": "Border edges" }, EDGE_BUTTONS.map(function (_a) {
+                    var key = _a.key, label = _a.label;
+                    return (React.createElement("button", { type: "button", key: key, "aria-label": label, "aria-pressed": !!edges[key], disabled: !enabled(key), className: "h-7 w-7 rounded-sm border border-solid text-[10px] ".concat(edges[key] ? "border-rnc-primary bg-rnc-muted" : "border-rnc-border"), onClick: function () {
+                            var _a;
+                            return onEdit((_a = {}, _a[key] = toggleEdge(edges, key, lineStyle, color), _a));
+                        } },
+                        React.createElement("svg", { width: "16", height: "16", "aria-hidden": "true" }, (function () {
+                            var _a = __read(EDGE_GEOMETRY[key], 4), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+                            return (React.createElement("line", { x1: (x1 / W) * 16, y1: (y1 / H) * 16, x2: (x2 / W) * 16, y2: (y2 / H) * 16, stroke: "currentColor" }));
+                        })())));
+                })),
+                React.createElement("svg", { "data-testid": "border-preview", width: W, height: H, className: "rounded-sm border border-solid border-rnc-border bg-rnc-background" },
+                    React.createElement("text", { x: W / 2, y: H / 2 + 4, textAnchor: "middle", fontSize: "11", fill: "currentColor" }, "Text"),
+                    Object.keys(EDGE_GEOMETRY).map(function (key) {
+                        var line = edges[key];
+                        if (!line || !enabled(key))
+                            return null;
+                        var _a = __read(EDGE_GEOMETRY[key], 4), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+                        return (React.createElement("g", { key: key, "data-edge": key },
+                            React.createElement(StyledLine, { x1: x1, y1: y1, x2: x2, y2: y2, style: line.style, color: cssColor(line.color) })));
+                    }))),
+            React.createElement("p", { className: "font-system text-xs text-rnc-muted-foreground" }, "The selected border style can be applied by clicking the presets, preview diagram or the buttons above."))));
+};

package/dist/cjs/components/editors/cell-format/fill-tab.d.ts

@@ -0,0 +1,14 @@
+import type { CellFill, SpreadsheetTheme } from "@rowsncolumns/spreadsheet";
+import React from "react";
+export type FillTabProps = {
+    fill: CellFill;
+    onChange(fill: CellFill): void;
+    theme: SpreadsheetTheme;
+};
+/**
+ * Format Cells → Fill: Background Color (No Color, the palette, More
+ * Colors…), Fill Effects… (two-colour gradient), Pattern Color and Pattern
+ * Style, and a Sample. A solid colour replaces a gradient, as in Excel.
+ */
+export declare const FillTab: ({ fill, onChange, theme }: FillTabProps) => React.JSX.Element;
+//# sourceMappingURL=fill-tab.d.ts.map

package/dist/cjs/components/editors/cell-format/fill-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill-tab.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/fill-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAS5E,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC/B,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAYF;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,2BAA2B,YAAY,sBA8E9D,CAAC"}

package/dist/cjs/components/editors/cell-format/fill-tab.js

@@ -0,0 +1,54 @@
+import { __assign, __read } from "tslib";
+import { getStringifiedColor, gradientToCss, GradientFillPicker, PatternFillPicker, STANDARD_COLORS, } from "@rowsncolumns/spreadsheet";
+import { Button, ColorPicker, HexColorPicker } from "@rowsncolumns/ui";
+import React, { useState } from "react";
+/** CSS for the Sample box (gradient, else the solid colour; patterns show their base colour). */
+var sampleStyle = function (fill, theme) {
+    var _a, _b;
+    return ((_b = (_a = fill.gradient) === null || _a === void 0 ? void 0 : _a.stops) === null || _b === void 0 ? void 0 : _b.length)
+        ? { backgroundImage: gradientToCss(fill.gradient) }
+        : {
+            backgroundColor: fill.backgroundColor
+                ? getStringifiedColor(fill.backgroundColor, theme)
+                : undefined,
+        };
+};
+/**
+ * Format Cells → Fill: Background Color (No Color, the palette, More
+ * Colors…), Fill Effects… (two-colour gradient), Pattern Color and Pattern
+ * Style, and a Sample. A solid colour replaces a gradient, as in Excel.
+ */
+export var FillTab = function (_a) {
+    var fill = _a.fill, onChange = _a.onChange, theme = _a.theme;
+    var _b = __read(useState("none"), 2), panel = _b[0], setPanel = _b[1];
+    var solid = fill.backgroundColor
+        ? getStringifiedColor(fill.backgroundColor, theme)
+        : undefined;
+    var pickSolid = function (color) {
+        return onChange(__assign(__assign({}, fill), { backgroundColor: color, gradient: undefined }));
+    };
+    return (React.createElement("div", { className: "grid grid-cols-[1fr_200px] gap-4" },
+        React.createElement("div", { className: "flex flex-col gap-2" },
+            React.createElement("span", { className: "font-system text-sm" }, "Background Color"),
+            React.createElement(Button, { size: "xs", variant: "outline", className: "justify-center", onClick: function () {
+                    return onChange({
+                        backgroundColor: undefined,
+                        fillPattern: undefined,
+                        foregroundColor: undefined,
+                        gradient: undefined,
+                    });
+                } }, "No Color"),
+            React.createElement("div", { role: "group", "aria-label": "Background color", className: "flex flex-col gap-1" },
+                React.createElement(ColorPicker, { value: solid, onChange: pickSolid, className: "flex-wrap gap-1" }),
+                React.createElement(ColorPicker, { value: solid, colors: STANDARD_COLORS, onChange: pickSolid, className: "gap-1" })),
+            React.createElement("div", { className: "flex gap-2" },
+                React.createElement(Button, { size: "xs", variant: "outline", "aria-expanded": panel === "effects", onClick: function () { return setPanel(panel === "effects" ? "none" : "effects"); } }, "Fill Effects..."),
+                React.createElement(Button, { size: "xs", variant: "outline", "aria-expanded": panel === "more", onClick: function () { return setPanel(panel === "more" ? "none" : "more"); } }, "More Colors...")),
+            panel === "more" ? (React.createElement(HexColorPicker, { value: solid !== null && solid !== void 0 ? solid : "#FFFFFF", onChange: pickSolid })) : null,
+            panel === "effects" ? (React.createElement("div", { "data-testid": "fill-effects" },
+                React.createElement(GradientFillPicker, { fill: fill, theme: theme, onChangeFill: onChange }))) : null),
+        React.createElement("div", { className: "flex flex-col gap-2" },
+            React.createElement(PatternFillPicker, { fill: fill, theme: theme, onChangeFill: onChange }),
+            React.createElement("span", { className: "font-system text-sm" }, "Sample"),
+            React.createElement("div", { "data-testid": "fill-sample", className: "h-10 rounded-sm border border-solid border-rnc-border", style: sampleStyle(fill, theme) }))));
+};

package/dist/cjs/components/editors/cell-format/font-tab.d.ts

@@ -0,0 +1,18 @@
+import type { SpreadsheetTheme, TextFormat, UnderlineStyle } from "@rowsncolumns/spreadsheet";
+import React from "react";
+type UnderlineChoice = "none" | UnderlineStyle;
+/** Excel's Underline list. */
+export declare const UNDERLINE_OPTIONS: {
+    value: UnderlineChoice;
+    label: string;
+}[];
+export type FontTabProps = {
+    textFormat: TextFormat;
+    onChange(patch: Partial<TextFormat>): void;
+    theme: SpreadsheetTheme;
+    isDarkMode?: boolean;
+};
+/** Format Cells → Font. */
+export declare const FontTab: ({ textFormat, onChange, theme, isDarkMode, }: FontTabProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=font-tab.d.ts.map

package/dist/cjs/components/editors/cell-format/font-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-tab.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/font-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACf,MAAM,2BAA2B,CAAC;AAOnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,eAAe,GAAG,MAAM,GAAG,cAAc,CAAC;AAS/C,8BAA8B;AAC9B,eAAO,MAAM,iBAAiB,EAAE;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAMxE,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;IAC3C,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAoCF,2BAA2B;AAC3B,eAAO,MAAM,OAAO,GAAI,8CAKrB,YAAY,sBA2Gd,CAAC"}

package/dist/cjs/components/editors/cell-format/font-tab.js

@@ -0,0 +1,99 @@
+import { FontFamilySelector, FontSizeSelector, getStringifiedColor, TextColorSelector, } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import { CheckboxField, ListBox, SelectField } from "./list-box";
+var FONT_STYLES = [
+    { value: "regular", label: "Regular" },
+    { value: "italic", label: "Italic" },
+    { value: "bold", label: "Bold" },
+    { value: "boldItalic", label: "Bold Italic" },
+];
+/** Excel's Underline list. */
+export var UNDERLINE_OPTIONS = [
+    { value: "none", label: "None" },
+    { value: "single", label: "Single" },
+    { value: "double", label: "Double" },
+    { value: "singleAccounting", label: "Single Accounting" },
+    { value: "doubleAccounting", label: "Double Accounting" },
+];
+/** CSS for the Preview box: the double / accounting underlines as CSS decorations. */
+var previewStyle = function (tf, theme) {
+    var _a, _b;
+    var style = tf.underline ? (_a = tf.underlineStyle) !== null && _a !== void 0 ? _a : "single" : undefined;
+    var lines = [
+        style ? "underline" : "",
+        tf.strikethrough ? "line-through" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return {
+        fontFamily: (_b = tf.fontFamily) !== null && _b !== void 0 ? _b : undefined,
+        fontSize: tf.fontSize ? "".concat(tf.fontSize, "pt") : undefined,
+        fontWeight: tf.bold ? "bold" : undefined,
+        fontStyle: tf.italic ? "italic" : undefined,
+        color: tf.color ? getStringifiedColor(tf.color, theme) : undefined,
+        textDecorationLine: lines || undefined,
+        textDecorationStyle: style === "double" || style === "doubleAccounting" ? "double" : undefined,
+        textUnderlineOffset: style === "singleAccounting" || style === "doubleAccounting"
+            ? "0.3em"
+            : undefined,
+        verticalAlign: tf.baselineOffset === "superscript"
+            ? "super"
+            : tf.baselineOffset === "subscript"
+                ? "sub"
+                : undefined,
+    };
+};
+/** Format Cells → Font. */
+export var FontTab = function (_a) {
+    var _b;
+    var textFormat = _a.textFormat, onChange = _a.onChange, theme = _a.theme, isDarkMode = _a.isDarkMode;
+    var fontStyle = textFormat.bold && textFormat.italic
+        ? "boldItalic"
+        : textFormat.bold
+            ? "bold"
+            : textFormat.italic
+                ? "italic"
+                : "regular";
+    var underline = textFormat.underline
+        ? (_b = textFormat.underlineStyle) !== null && _b !== void 0 ? _b : "single"
+        : "none";
+    return (React.createElement("div", { className: "flex flex-col gap-3" },
+        React.createElement("div", { className: "grid grid-cols-[1fr_120px_80px] gap-2" },
+            React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Font"),
+                React.createElement(FontFamilySelector, { theme: theme, value: textFormat.fontFamily, onChange: function (fontFamily) { return onChange({ fontFamily: fontFamily }); }, triggerVariant: "outline" })),
+            React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Font style"),
+                React.createElement(ListBox, { label: "Font style", value: fontStyle, items: FONT_STYLES, onChange: function (value) {
+                        return onChange({
+                            bold: value === "bold" || value === "boldItalic",
+                            italic: value === "italic" || value === "boldItalic",
+                        });
+                    } })),
+            React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Size"),
+                React.createElement(FontSizeSelector, { value: textFormat.fontSize, onChange: function (fontSize) { return onChange({ fontSize: fontSize }); } }))),
+        React.createElement("div", { className: "grid grid-cols-2 gap-2" },
+            React.createElement(SelectField, { label: "Underline", value: underline, options: UNDERLINE_OPTIONS, onChange: function (value) {
+                    return onChange(value === "none"
+                        ? { underline: false }
+                        : { underline: true, underlineStyle: value });
+                } }),
+            React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Color"),
+                React.createElement(TextColorSelector, { color: textFormat.color, theme: theme, isDarkMode: isDarkMode, onChange: function (color) { return onChange({ color: color }); } }))),
+        React.createElement("div", { className: "grid grid-cols-2 gap-2" },
+            React.createElement("fieldset", { className: "flex flex-col gap-1.5 border-0 p-0" },
+                React.createElement("legend", { className: "pb-1 font-system text-sm" }, "Effects"),
+                React.createElement(CheckboxField, { label: "Strikethrough", checked: !!textFormat.strikethrough, onChange: function (strikethrough) { return onChange({ strikethrough: strikethrough }); } }),
+                React.createElement(CheckboxField, { label: "Superscript", checked: textFormat.baselineOffset === "superscript", onChange: function (on) {
+                        return onChange({ baselineOffset: on ? "superscript" : null });
+                    } }),
+                React.createElement(CheckboxField, { label: "Subscript", checked: textFormat.baselineOffset === "subscript", onChange: function (on) {
+                        return onChange({ baselineOffset: on ? "subscript" : null });
+                    } })),
+            React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Preview"),
+                React.createElement("div", { "data-testid": "font-preview", className: "flex h-14 items-center justify-center overflow-hidden rounded-sm border border-solid border-rnc-border bg-rnc-background" },
+                    React.createElement("span", { style: previewStyle(textFormat, theme) }, "AaBbCcYyZz"))))));
+};

package/dist/cjs/components/editors/cell-format/list-box.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+export type ListBoxItem<T extends string> = {
+    value: T;
+    label: React.ReactNode;
+};
+/**
+ * Excel's always-open selection lists (Category, Type, Font style, Line
+ * style …): a listbox with arrow-key navigation, not a dropdown.
+ */
+export declare const ListBox: <T extends string>({ label, items, value, onChange, className, }: {
+    label: string;
+    items: ListBoxItem<T>[];
+    value: T | undefined;
+    onChange(value: T): void;
+    className?: string;
+}) => React.JSX.Element;
+/** A labelled native checkbox (Excel's Text control / Effects / Protection boxes). */
+export declare const CheckboxField: ({ label, checked, disabled, onChange, }: {
+    label: string;
+    checked: boolean;
+    disabled?: boolean;
+    onChange(checked: boolean): void;
+}) => React.JSX.Element;
+/** A labelled native select for the short option lists. */
+export declare const SelectField: <T extends string>({ label, value, options, onChange, disabled, }: {
+    label: string;
+    value: T;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    onChange(value: T): void;
+    disabled?: boolean;
+}) => React.JSX.Element;
+//# sourceMappingURL=list-box.d.ts.map