@rowsncolumns/spreadsheet-state 29.2.0 → 29.3.2

package/dist/esm/components/editors/cell-format/alignment-tab.d.ts

@@ -0,0 +1,27 @@
+import type { CellFormat, HorizontalAlign, ReadingOrder, VerticalAlign } from "@rowsncolumns/spreadsheet";
+import React from "react";
+type HorizontalChoice = HorizontalAlign | "general";
+/** Excel's Horizontal list, in Excel's order. */
+export declare const HORIZONTAL_OPTIONS: {
+    value: HorizontalChoice;
+    label: string;
+}[];
+/** Excel's Vertical list. */
+export declare const VERTICAL_OPTIONS: {
+    value: VerticalAlign;
+    label: string;
+}[];
+export declare const TEXT_DIRECTION_OPTIONS: {
+    value: ReadingOrder;
+    label: string;
+}[];
+export type AlignmentTabProps = {
+    format: CellFormat;
+    onChange(patch: Partial<CellFormat>): void;
+    merged: boolean;
+    onChangeMerged(merged: boolean): void;
+};
+/** Format Cells → Alignment. */
+export declare const AlignmentTab: ({ format, onChange, merged, onChangeMerged, }: AlignmentTabProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=alignment-tab.d.ts.map

package/dist/esm/components/editors/cell-format/alignment-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alignment-tab.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/alignment-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EACf,YAAY,EACZ,aAAa,EACd,MAAM,2BAA2B,CAAC;AAEnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,gBAAgB,GAAG,eAAe,GAAG,SAAS,CAAC;AAEpD,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,EAAE;IAAE,KAAK,EAAE,gBAAgB,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAS1E,CAAC;AAEF,6BAA6B;AAC7B,eAAO,MAAM,gBAAgB,EAAE;IAAE,KAAK,EAAE,aAAa,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAMrE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAI1E,CAAC;AAKF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;IAC3C,MAAM,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;CACvC,CAAC;AAEF,gCAAgC;AAChC,eAAO,MAAM,YAAY,GAAI,+CAK1B,iBAAiB,sBA2InB,CAAC"}

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

@@ -0,0 +1,81 @@
+import { Input } from "@rowsncolumns/ui";
+import React from "react";
+import { CheckboxField, SelectField } from "./list-box";
+/** Excel's Horizontal list, in Excel's order. */
+export const 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 const VERTICAL_OPTIONS = [
+    { value: "top", label: "Top" },
+    { value: "middle", label: "Center" },
+    { value: "bottom", label: "Bottom" },
+    { value: "justify", label: "Justify" },
+    { value: "distributed", label: "Distributed" },
+];
+export const 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. */
+const INDENTABLE = new Set(["left", "right", "distributed"]);
+/** Format Cells → Alignment. */
+export const AlignmentTab = ({ format, onChange, merged, onChangeMerged, }) => {
+    const horizontal = format.horizontalAlignment ?? "general";
+    const vertical = format.verticalAlignment ?? "bottom";
+    const rotation = format.textRotation;
+    const stacked = rotation === "vertical";
+    const degrees = typeof rotation === "number" ? rotation : 0;
+    const wrap = format.wrapStrategy === "wrap";
+    const 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: (value) => onChange({
+                            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: format.indent ?? 0, onChange: (event) => {
+                                const 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: (value) => 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: (checked) => onChange({
+                        wrapStrategy: checked ? "wrap" : "overflow",
+                        // Excel: wrap and shrink to fit are exclusive.
+                        ...(checked ? { shrinkToFit: false } : {}),
+                    }) }),
+                React.createElement(CheckboxField, { label: "Shrink to fit", checked: shrink, disabled: wrap, onChange: (checked) => 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: format.readingOrder ?? "context", options: TEXT_DIRECTION_OPTIONS, onChange: (value) => 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 ${stacked ? "border-rnc-primary" : "border-rnc-border"}`, onClick: () => onChange({ textRotation: stacked ? 0 : "vertical" }) }, "Text".split("").map((ch, i) => (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: (event) => 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: (event) => {
+                        const n = parseInt(event.target.value, 10);
+                        onChange({
+                            textRotation: Number.isFinite(n) ? Math.max(-90, Math.min(90, n)) : 0,
+                        });
+                    } }),
+                "Degrees"))));
+};

package/dist/esm/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/esm/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/esm/components/editors/cell-format/border-edges.js

@@ -0,0 +1,79 @@
+/** Excel's Line Style list, in Excel's order (None, then thin → thick). */
+export const 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 const EDGE_LOCATION = {
+    top: "top",
+    insideHorizontal: "horizontal",
+    bottom: "bottom",
+    left: "left",
+    insideVertical: "vertical",
+    right: "right",
+    diagonalUp: "diagonalUp",
+    diagonalDown: "diagonalDown",
+};
+const OUTLINE = ["top", "bottom", "left", "right"];
+const INSIDE = ["insideHorizontal", "insideVertical"];
+export const ALL_EDGES = [...OUTLINE, ...INSIDE, "diagonalUp", "diagonalDown"];
+/** The active cell's own edges, as the preview opens on them. */
+export const edgesFromBorders = (borders) => {
+    const map = {};
+    for (const key of ["top", "bottom", "left", "right", "diagonalUp", "diagonalDown"]) {
+        const b = borders?.[key];
+        if (b?.style)
+            map[key] = { style: b.style, color: b.color ?? "#000000" };
+    }
+    return map;
+};
+const sameLine = (a, b) => !!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 const toggleEdge = (shown, key, lineStyle, color) => lineStyle === "none" || sameLine(shown[key], { style: lineStyle, color })
+    ? null
+    : { style: lineStyle, color };
+/** The None / Outline / Inside presets: the edges they set. */
+export const presetEdges = (preset, lineStyle, color) => {
+    if (preset === "none" || lineStyle === "none") {
+        return Object.fromEntries((preset === "none" ? ALL_EDGES : preset === "outline" ? OUTLINE : INSIDE).map((k) => [k, null]));
+    }
+    const line = { style: lineStyle, color };
+    return Object.fromEntries((preset === "outline" ? OUTLINE : INSIDE).map((k) => [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 const toBorderCommands = (edits, options = {}) => {
+    const commands = [];
+    if (options.clearedAll) {
+        commands.push({ location: "none", color: undefined, style: undefined });
+    }
+    const keys = ALL_EDGES.filter((k) => k in edits);
+    for (const key of keys) {
+        if (edits[key] === null && !options.clearedAll) {
+            commands.push({ location: EDGE_LOCATION[key], color: undefined, style: undefined });
+        }
+    }
+    for (const key of keys) {
+        const line = edits[key];
+        if (line)
+            commands.push({ location: EDGE_LOCATION[key], color: line.color, style: line.style });
+    }
+    return commands;
+};

package/dist/esm/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/esm/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/esm/components/editors/cell-format/border-tab.js

@@ -0,0 +1,103 @@
+import { BorderColorSelector, getStringifiedColor } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import { LINE_STYLES, presetEdges, toggleEdge, } from "./border-edges";
+import { ListBox } from "./list-box";
+const 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",
+};
+const 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). */
+const StyledLine = ({ x1, y1, x2, y2, style, color, }) => {
+    if (style === "none")
+        return null;
+    if (style === "double") {
+        const dx = y2 - y1;
+        const dy = x1 - x2;
+        const len = Math.hypot(dx, dy) || 1;
+        const [ox, oy] = [(dx / len) * 1.5, (dy / len) * 1.5];
+        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: WIDTH[style] ?? 1, strokeDasharray: DASH[style] }));
+};
+/** Preview geometry (a 2×2 grid when the selection has inside edges). */
+const W = 160;
+const H = 100;
+const 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],
+};
+const 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 const BorderTab = ({ edges, onEdit, lineStyle, onLineStyle, color, onColor, hasInsideRows, hasInsideColumns, theme, }) => {
+    const enabled = (key) => key === "insideHorizontal" ? hasInsideRows : key === "insideVertical" ? hasInsideColumns : true;
+    const cssColor = (c) => getStringifiedColor(c, theme) ?? "#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(({ value, label }) => ({
+                    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(([preset, label]) => (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: () => 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(({ key, label }) => (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] ${edges[key] ? "border-rnc-primary bg-rnc-muted" : "border-rnc-border"}`, onClick: () => onEdit({ [key]: toggleEdge(edges, key, lineStyle, color) }) },
+                    React.createElement("svg", { width: "16", height: "16", "aria-hidden": "true" }, (() => {
+                        const [x1, y1, x2, y2] = EDGE_GEOMETRY[key];
+                        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((key) => {
+                        const line = edges[key];
+                        if (!line || !enabled(key))
+                            return null;
+                        const [x1, y1, x2, y2] = EDGE_GEOMETRY[key];
+                        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/esm/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/esm/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/esm/components/editors/cell-format/fill-tab.js

@@ -0,0 +1,49 @@
+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). */
+const sampleStyle = (fill, theme) => fill.gradient?.stops?.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 const FillTab = ({ fill, onChange, theme }) => {
+    const [panel, setPanel] = useState("none");
+    const solid = fill.backgroundColor
+        ? getStringifiedColor(fill.backgroundColor, theme)
+        : undefined;
+    const pickSolid = (color) => onChange({
+        ...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: () => 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: () => setPanel(panel === "effects" ? "none" : "effects") }, "Fill Effects..."),
+                React.createElement(Button, { size: "xs", variant: "outline", "aria-expanded": panel === "more", onClick: () => setPanel(panel === "more" ? "none" : "more") }, "More Colors...")),
+            panel === "more" ? (React.createElement(HexColorPicker, { value: 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/esm/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/esm/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/esm/components/editors/cell-format/font-tab.js

@@ -0,0 +1,88 @@
+import { FontFamilySelector, FontSizeSelector, getStringifiedColor, TextColorSelector, } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import { CheckboxField, ListBox, SelectField } from "./list-box";
+const FONT_STYLES = [
+    { value: "regular", label: "Regular" },
+    { value: "italic", label: "Italic" },
+    { value: "bold", label: "Bold" },
+    { value: "boldItalic", label: "Bold Italic" },
+];
+/** Excel's Underline list. */
+export const 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. */
+const previewStyle = (tf, theme) => {
+    const style = tf.underline ? tf.underlineStyle ?? "single" : undefined;
+    const lines = [
+        style ? "underline" : "",
+        tf.strikethrough ? "line-through" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return {
+        fontFamily: tf.fontFamily ?? undefined,
+        fontSize: tf.fontSize ? `${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 const FontTab = ({ textFormat, onChange, theme, isDarkMode, }) => {
+    const fontStyle = textFormat.bold && textFormat.italic
+        ? "boldItalic"
+        : textFormat.bold
+            ? "bold"
+            : textFormat.italic
+                ? "italic"
+                : "regular";
+    const underline = textFormat.underline
+        ? textFormat.underlineStyle ?? "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: (fontFamily) => onChange({ 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: (value) => 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: (fontSize) => onChange({ fontSize }) }))),
+        React.createElement("div", { className: "grid grid-cols-2 gap-2" },
+            React.createElement(SelectField, { label: "Underline", value: underline, options: UNDERLINE_OPTIONS, onChange: (value) => 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: (color) => onChange({ 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: (strikethrough) => onChange({ strikethrough }) }),
+                React.createElement(CheckboxField, { label: "Superscript", checked: textFormat.baselineOffset === "superscript", onChange: (on) => onChange({ baselineOffset: on ? "superscript" : null }) }),
+                React.createElement(CheckboxField, { label: "Subscript", checked: textFormat.baselineOffset === "subscript", onChange: (on) => 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/esm/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

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-box.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/list-box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,IAAI;IAC1C,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,MAAM,EAAE,+CAMvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAoCA,CAAC;AAEF,sFAAsF;AACtF,eAAO,MAAM,aAAa,GAAI,yCAK3B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CAClC,sBAcA,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAAE,gDAM3C;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,OAAO,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,sBAiBA,CAAC"}

package/dist/esm/components/editors/cell-format/list-box.js

@@ -0,0 +1,30 @@
+import React from "react";
+/**
+ * Excel's always-open selection lists (Category, Type, Font style, Line
+ * style …): a listbox with arrow-key navigation, not a dropdown.
+ */
+export const ListBox = ({ label, items, value, onChange, className = "", }) => {
+    const index = items.findIndex((item) => item.value === value);
+    return (React.createElement("div", { role: "listbox", "aria-label": label, tabIndex: 0, className: `max-h-[180px] overflow-auto rounded-sm border border-solid border-rnc-border text-xs outline-none focus-visible:ring-1 focus-visible:ring-rnc-primary ${className}`, onKeyDown: (event) => {
+            if (event.key !== "ArrowDown" && event.key !== "ArrowUp")
+                return;
+            event.preventDefault();
+            const step = event.key === "ArrowDown" ? 1 : -1;
+            const next = items[Math.max(0, Math.min(items.length - 1, index + step))];
+            if (next)
+                onChange(next.value);
+        } }, items.map((item) => {
+        const selected = item.value === value;
+        return (React.createElement("div", { key: item.value, role: "option", "aria-selected": selected, className: `cursor-default px-1.5 py-0.5 ${selected
+                ? "bg-rnc-primary text-rnc-primary-foreground"
+                : "hover:bg-rnc-muted"}`, onClick: () => onChange(item.value) }, item.label));
+    })));
+};
+/** A labelled native checkbox (Excel's Text control / Effects / Protection boxes). */
+export const CheckboxField = ({ label, checked, disabled, onChange, }) => (React.createElement("label", { className: `flex items-center gap-1.5 font-system text-xs ${disabled ? "opacity-50" : ""}` },
+    React.createElement("input", { type: "checkbox", checked: checked, disabled: disabled, onChange: (event) => onChange(event.target.checked) }),
+    label));
+/** A labelled native select for the short option lists. */
+export const SelectField = ({ label, value, options, onChange, disabled, }) => (React.createElement("label", { className: "flex flex-col gap-1 font-system text-sm" },
+    label,
+    React.createElement("select", { "aria-label": label, className: "rounded-sm border border-solid border-rnc-border bg-rnc-background px-1 py-1 text-xs text-rnc-foreground", value: value, disabled: disabled, onChange: (event) => onChange(event.target.value) }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label))))));