@rowsncolumns/spreadsheet-state 29.2.0 → 29.3.2

package/dist/esm/components/editors/cell-format-editor.js

@@ -1,635 +1,168 @@
-import { Direction } from "@rowsncolumns/grid";
-import { AiOutlineMergeCells, Cross2Icon, TextOverflowWrapIcon, } from "@rowsncolumns/icons";
-import { BorderColorSelector, BorderLineStyleOptions, BorderLocationOptions, ButtonBold, ButtonItalic, ButtonStrikethrough, ButtonUnderline, FontFamilySelector, FontSizeSelector, TextColorSelector, useFocusSheet, } from "@rowsncolumns/spreadsheet";
-import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, Input, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Stack, } from "@rowsncolumns/ui";
-import { Tabs } from "@rowsncolumns/ui";
-import { TabsList } from "@rowsncolumns/ui";
-import { TabsTrigger } from "@rowsncolumns/ui";
-import { TabsContent } from "@rowsncolumns/ui";
-import { getDefaultDateFormat, getDefaultTimeFormat, ssfFormat, ssfFormatColor, supplant, } from "@rowsncolumns/utils";
-import { useFormik } from "formik";
-import React, { useCallback, useMemo, useState } from "react";
-import { addThousandSeparator, changeDecimals, getCurrentDecimalCountInPattern, hasThousandsSeparator, removeThousandSeparator, } from "../../api/decimals";
+import { Cross2Icon } from "@rowsncolumns/icons";
+import { useFocusSheet } from "@rowsncolumns/spreadsheet";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, Tabs, TabsContent, TabsList, TabsTrigger, } from "@rowsncolumns/ui";
+import React, { useMemo, useState } from "react";
 import { useFormatCellsDialogState, useSetFormatCellsDialogState, } from "../../atoms/dialog-state.atom";
-const getNumberFormatCategories = (locale) => [
-    {
-        name: "General",
-        value: "GENERAL",
-        description: "General format cells have no specific number format.",
-    },
-    {
-        name: "Number",
-        value: "NUMBER",
-        description: "Number is used for general display of numbers.",
-        pattern: "#.00",
-        options: ["Decimal", "ThousandSeparator"],
-    },
-    {
-        name: "Currency",
-        value: "CURRENCY",
-        description: "Currency formats are used for general monetary values.",
-        pattern: `"{currencySymbol}"* #,##0.00;"{currencySymbol}"* (#,##0.00);"{currencySymbol}"* "-"??;@`,
-        options: ["CurrencySymbol", "Decimal"],
-    },
-    {
-        name: "Accounting",
-        value: "ACCOUNTING",
-        pattern: `"{currencySymbol}"* #,##0.00;"{currencySymbol}"* (#,##0.00);"{currencySymbol}"* "-"??;@`,
-        options: ["CurrencySymbol", "Decimal"],
-    },
-    {
-        name: "Date",
-        value: "DATE",
-        description: "Date formats display date and time serial numbers as date values.",
-        pattern: getDefaultDateFormat(locale),
-    },
-    {
-        name: "Time",
-        value: "DATE_TIME",
-        description: "Time formats display date and time serial numbers as date values.",
-        pattern: getDefaultTimeFormat(locale),
-    },
-    {
-        name: "Percentage",
-        value: "PERCENT",
-        pattern: "0%",
-        options: ["Decimal"],
-    },
-    {
-        name: "Fraction",
-        value: "FRACTION",
-        pattern: "#/#",
-    },
-    {
-        name: "Scientific",
-        value: "SCIENTIFIC",
-        pattern: "0.00E+00",
-        options: ["Decimal"],
-    },
-    {
-        name: "Text",
-        value: "TEXT",
-    },
-    {
-        name: "Custom",
-        value: "CUSTOM",
-        pattern: "General",
-    },
-];
-const horizontalAlignments = [
-    {
-        name: "General",
-        value: undefined,
-    },
-    {
-        name: "Left",
-        value: "left",
-    },
-    {
-        name: "Center",
-        value: "center",
-    },
-    {
-        name: "Right",
-        value: "right",
-    },
-];
-const verticalAlignments = [
-    {
-        name: "Top",
-        value: "top",
-    },
-    {
-        name: "Center",
-        value: "middle",
-    },
-    {
-        name: "Bottom",
-        value: "bottom",
-    },
-];
-const customFormats = [
-    {
-        type: "GENERAL",
-    },
-    {
-        type: "NUMBER",
-        pattern: "0",
-    },
-    {
-        type: "NUMBER",
-        pattern: "##.00",
-    },
-    {
-        type: "NUMBER",
-        pattern: "#,##0",
-    },
-    {
-        type: "NUMBER",
-        pattern: "#,##0.00",
-    },
-    {
-        type: "NUMBER",
-        pattern: "#,##0;(#,##0)",
-    },
-    {
-        type: "NUMBER",
-        pattern: "#,##0;[Red](#,##0)",
-    },
-    {
-        type: "NUMBER",
-        pattern: "#,##0.00;(#,##0.00)",
-    },
-    {
-        type: "NUMBER",
-        pattern: "#,##0.00;[Red](#,##0.00)",
-    },
-    {
-        type: "CURRENCY",
-        pattern: '"{currencySymbol}"#,##0;("{currencySymbol}"#,##0)',
-    },
-    {
-        type: "CURRENCY",
-        pattern: '"{currencySymbol}"#,##0;[Red]("{currencySymbol}"#,##0)',
-    },
-    {
-        type: "CURRENCY",
-        pattern: '"{currencySymbol}"#,##0.00;("{currencySymbol}"#,##0.00)',
-    },
-    {
-        type: "CURRENCY",
-        pattern: '"{currencySymbol}"#,##0.00;[Red]("{currencySymbol}"#,##0.00)',
-    },
-    {
-        type: "PERCENT",
-        pattern: "0%",
-    },
-    {
-        type: "PERCENT",
-        pattern: "0.00%",
-    },
-    {
-        type: "SCIENTIFIC",
-        pattern: "0.00E+00",
-    },
-    {
-        type: "SCIENTIFIC",
-        pattern: "##0.0E+0",
-    },
-    {
-        type: "FRACTION",
-        pattern: "# ?/?",
-    },
-    {
-        type: "FRACTION",
-        pattern: "# ??/??",
-    },
-    {
-        type: "DATE",
-        pattern: "d/m/yy",
-    },
-    {
-        type: "DATE",
-        pattern: "d-mmm-yy",
-    },
-    {
-        type: "DATE",
-        pattern: "d-mmm",
-    },
-    {
-        type: "DATE",
-        pattern: "mmm-yy",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "h:mm AM/PM",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "h:mm:ss AM/PM",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "h:mm",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "h:mm:ss",
-    },
-    {
-        type: "DATE",
-        pattern: "d/m/yy h:mm",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "mm:ss",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "mm:ss.0",
-    },
-    {
-        type: "TEXT",
-        pattern: "@",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "[h]:mm:ss",
-    },
-    {
-        type: "CURRENCY",
-        pattern: '"{currencySymbol}"* #,##0;"{currencySymbol}"* (#,##0);"{currencySymbol}"* "-";@',
-    },
-    {
-        type: "ACCOUNTING",
-        pattern: '* #,##0;* (#,##0);* "-";@',
-    },
-    {
-        type: "CURRENCY",
-        pattern: `"{currencySymbol}"* #,##0.00;"{currencySymbol}"* (#,##0.00);"{currencySymbol}"* "-"??;@`,
-    },
-    {
-        type: "ACCOUNTING",
-        pattern: '* #,##0.00;* (#,##0.00);* "-"??;@',
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "[$-en-US]h:mm:ss AM/PM",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "[$-en-US]hh:mm:ss AM/PM;@",
-    },
-    {
-        type: "DATE",
-        pattern: "[$-en-US]m/d/yy h:mm AM/PM;@",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "[$-en-US]h:mm AM/PM;@",
-    },
-    {
-        type: "DATE",
-        pattern: "d/m/yyyy",
-    },
-    {
-        type: "NUMBER",
-        pattern: "00000",
-    },
-];
-const dateFormats = [
-    {
-        pattern: "dd/m/yy",
-        type: "DATE",
-    },
-    {
-        pattern: "dddd, dd mmmm yyyy",
-        type: "DATE",
-    },
-    {
-        pattern: "dd/mm/yyyy",
-        type: "DATE",
-    },
-    {
-        pattern: "dd/mm/yy",
-        type: "DATE",
-    },
-    {
-        pattern: "dd\\.mm\\.yyyy",
-        type: "DATE",
-    },
-    {
-        pattern: "yyyy-mm-dd",
-        type: "DATE",
-    },
-    {
-        pattern: "dd mmmm yyyy",
-        type: "DATE",
-    },
-    {
-        pattern: "dd-mmm",
-        type: "DATE",
-    },
-    {
-        pattern: "dd-mmm-yy",
-        type: "DATE",
-    },
-    {
-        pattern: "mmm-dd",
-        type: "DATE",
-    },
-    {
-        pattern: "mmmm-dd",
-        type: "DATE",
-    },
-    {
-        pattern: "mmm-dd, yyyy",
-        type: "DATE",
-    },
-];
-const timeFormats = [
-    {
-        pattern: "hh:mm",
-        type: "DATE_TIME",
-    },
-    {
-        pattern: "h:mm AM/PM",
-        type: "DATE_TIME",
-    },
-    {
-        pattern: "hh:mm:ss",
-        type: "DATE_TIME",
-    },
-    {
-        pattern: "h:mm:ss AM/PM",
-        type: "DATE_TIME",
-    },
-    {
-        pattern: "d/m/yy h:mm AM/PM",
-        type: "DATE",
-    },
-    {
-        pattern: "d/m/yy hh:mm",
-        type: "DATE",
-    },
-];
-export const CellFormatEditor = ({ locale, cellFormat, sheetId, activeCell, selections, currencySymbol = "$", theme, isDarkMode, onMergeCells, onChangeFormatting, onChangeBorder, onCancel, getEffectiveValue, }) => {
-    const [isCustom, setIsCustom] = useState(false);
-    const [color, setColorState] = useState(undefined);
-    const [borderStyle, setStyleState] = useState("solid");
-    const [borderLocation, setBorderLocationState] = useState();
+import { AlignmentTab } from "./cell-format/alignment-tab";
+import { edgesFromBorders, toBorderCommands, } from "./cell-format/border-edges";
+import { BorderTab } from "./cell-format/border-tab";
+import { FillTab } from "./cell-format/fill-tab";
+import { FontTab } from "./cell-format/font-tab";
+import { NumberTab } from "./cell-format/number-tab";
+import { ProtectionTab, } from "./cell-format/protection-tab";
+const same = (a, b) => JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+/**
+ * The properties the dialog changed, and only those — Excel's Format Cells
+ * applies what you edited to every selected cell and leaves the rest of each
+ * cell's format alone. A removed value is sent as `undefined` (the engines'
+ * clear for that property).
+ */
+export const diffCellFormat = (initial, draft) => {
+    const patch = {};
+    const keys = new Set([...Object.keys(initial), ...Object.keys(draft)]);
+    for (const key of keys) {
+        if (key === "textFormat" || key === "borders")
+            continue;
+        const before = initial[key];
+        const after = draft[key];
+        if (!same(before, after))
+            patch[key] = after;
+    }
+    const tfBefore = (initial.textFormat ?? {});
+    const tfAfter = (draft.textFormat ?? {});
+    const textFormat = {};
+    for (const key of new Set([
+        ...Object.keys(tfBefore),
+        ...Object.keys(tfAfter),
+    ])) {
+        if (!same(tfBefore[key], tfAfter[key]))
+            textFormat[key] = tfAfter[key];
+    }
+    if (Object.keys(textFormat).length)
+        patch.textFormat = textFormat;
+    return patch;
+};
+const selectionSpans = (activeCell, selections) => {
+    const ranges = selections.length
+        ? selections.map((s) => s.range)
+        : [
+            {
+                startRowIndex: activeCell.rowIndex,
+                endRowIndex: activeCell.rowIndex,
+                startColumnIndex: activeCell.columnIndex,
+                endColumnIndex: activeCell.columnIndex,
+            },
+        ];
+    return {
+        rows: ranges.some((r) => r.endRowIndex > r.startRowIndex),
+        columns: ranges.some((r) => r.endColumnIndex > r.startColumnIndex),
+    };
+};
+/**
+ * Excel's Format Cells dialog (Ctrl+1 / ⌘1): Number, Alignment, Font,
+ * Border, Fill and Protection. Every tab edits a draft; OK applies the
+ * edits to the selection, Cancel drops them.
+ */
+export const CellFormatEditor = ({ locale, cellFormat, sheetId, activeCell, selections, currencySymbol = "$", theme, isDarkMode, onMergeCells, onUnMergeCells, isMerged = false, cellProtection, onChangeCellProtection, onChangeFormatting, onChangeBorder, onCancel, getEffectiveValue, defaultTab = "number", }) => {
     const setFormatCellDialogState = useSetFormatCellsDialogState();
-    // close dialog
     const onRequestCloseDialog = () => setFormatCellDialogState(false);
+    const initial = useMemo(() => cellFormat ?? {}, [cellFormat]);
+    const [draft, setDraft] = useState(initial);
+    const patchDraft = (patch) => setDraft((prev) => ({ ...prev, ...patch }));
+    const patchText = (patch) => setDraft((prev) => ({
+        ...prev,
+        textFormat: { ...(prev.textFormat ?? {}), ...patch },
+    }));
+    const [merged, setMerged] = useState(isMerged);
+    const initialProtection = {
+        locked: cellProtection?.locked !== false,
+        hidden: cellProtection?.hidden === true,
+    };
+    const [protection, setProtection] = useState(initialProtection);
+    // Border: the edges the user edited, on top of the active cell's own.
+    const initialEdges = useMemo(() => edgesFromBorders(cellFormat?.borders), [cellFormat?.borders]);
+    const [edgeEdits, setEdgeEdits] = useState({});
+    const [clearedAll, setClearedAll] = useState(false);
+    const [lineStyle, setLineStyle] = useState("solid");
+    const [borderColor, setBorderColor] = useState(() => ({
+        theme: 1,
+        tint: isDarkMode ? 1 : 0,
+    }));
+    const shownEdges = clearedAll
+        ? { ...edgeEdits }
+        : { ...initialEdges, ...edgeEdits };
+    const spans = selectionSpans(activeCell, selections);
     const effectiveValue = getEffectiveValue(sheetId, activeCell.rowIndex, activeCell.columnIndex);
-    const [customFormatValue, setCustomFormatValue] = useState();
-    const numberCategories = useMemo(() => getNumberFormatCategories(locale), [locale]);
-    const getDefaultBorderColor = useCallback(() => {
-        return { theme: 1, tint: isDarkMode ? 1 : 0 };
-    }, [isDarkMode]);
-    const overflowDivClass = "grid grid-cols-1 max-h-[200px] overflow-auto border-rnc-border border-solid rounded-sm border";
-    const sampleDate = new Date();
-    const { handleSubmit, resetForm, setFieldValue, values } = useFormik({
-        initialValues: cellFormat ?? {},
-        onSubmit(values) {
-            // Formatting
-            onChangeFormatting?.(sheetId, activeCell, selections, values);
-            // Border TBD
-            // Merge cells TBD
-            onRequestCloseDialog();
-        },
-    });
-    const type = values?.numberFormat?.type;
-    const pattern = values?.numberFormat?.pattern;
-    const formattedValue = ssfFormat(pattern ?? "General", effectiveValue) || "\u00A0";
-    const formattedColor = ssfFormatColor(pattern ?? "General", effectiveValue);
-    const selectedNumberFormat = type ?? "GENERAL";
-    const selectedOption = numberCategories.find((opt) => opt.value === selectedNumberFormat);
-    const decimalCount = getCurrentDecimalCountInPattern(pattern ?? undefined);
-    const thousandsSeparator = hasThousandsSeparator(pattern ?? undefined);
-    // Cancel
+    const fill = {
+        backgroundColor: draft.backgroundColor,
+        fillPattern: draft.fillPattern,
+        foregroundColor: draft.foregroundColor,
+        gradient: draft.gradient,
+    };
+    const onSave = () => {
+        const patch = diffCellFormat(initial, draft);
+        if (Object.keys(patch).length) {
+            onChangeFormatting?.(sheetId, activeCell, selections, patch);
+        }
+        for (const command of toBorderCommands(edgeEdits, { clearedAll })) {
+            onChangeBorder?.(sheetId, activeCell, selections, command.location, command.color, command.style);
+        }
+        if (merged !== isMerged) {
+            if (merged)
+                onMergeCells?.(sheetId, activeCell, selections);
+            else
+                onUnMergeCells?.(sheetId, activeCell, selections);
+        }
+        if (protection.locked !== initialProtection.locked ||
+            protection.hidden !== initialProtection.hidden) {
+            onChangeCellProtection?.(sheetId, activeCell, selections, {
+                ...(protection.locked !== initialProtection.locked
+                    ? { locked: protection.locked }
+                    : {}),
+                ...(protection.hidden !== initialProtection.hidden
+                    ? { hidden: protection.hidden }
+                    : {}),
+            });
+        }
+        onRequestCloseDialog();
+    };
     const onCancelForm = () => {
-        resetForm();
         onRequestCloseDialog();
         onCancel?.();
     };
-    return (React.createElement("form", { onSubmit: handleSubmit },
-        React.createElement(Tabs, { defaultValue: "number" },
+    return (React.createElement("form", { onSubmit: (event) => {
+            event.preventDefault();
+            onSave();
+        } },
+        React.createElement(Tabs, { defaultValue: defaultTab },
             React.createElement(TabsList, null,
                 React.createElement(TabsTrigger, { value: "number" }, "Number"),
                 React.createElement(TabsTrigger, { value: "alignment" }, "Alignment"),
                 React.createElement(TabsTrigger, { value: "font" }, "Font"),
-                React.createElement(TabsTrigger, { value: "border" }, "Border")),
+                React.createElement(TabsTrigger, { value: "border" }, "Border"),
+                React.createElement(TabsTrigger, { value: "fill" }, "Fill"),
+                React.createElement(TabsTrigger, { value: "protection" }, "Protection")),
             React.createElement(TabsContent, { value: "number" },
-                React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
-                    React.createElement("label", { className: "font-system text-sm" }, "Sample"),
-                    React.createElement("div", { className: "text-rnc-foreground p-1 px-2 bg-rnc-muted rounded-sm", style: {
-                            color: formattedColor,
-                        } }, formattedValue)),
-                React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
-                    React.createElement("label", { className: "font-system text-sm" }, "Choose category"),
-                    React.createElement(Select, { value: isCustom ? "CUSTOM" : selectedNumberFormat, onValueChange: (value) => {
-                            const format = numberCategories.find((n) => n.value === value);
-                            if (format?.value === "CUSTOM") {
-                                // Show custom options
-                                setIsCustom(true);
-                                setCustomFormatValue(values.numberFormat);
-                            }
-                            else if (format) {
-                                // Toggle custom
-                                setIsCustom(false);
-                                // Apply formatting
-                                setFieldValue("numberFormat", {
-                                    pattern: format.pattern
-                                        ? supplant(format.pattern, { currencySymbol })
-                                        : undefined,
-                                    type: format.value,
-                                });
-                            }
-                        } },
-                        React.createElement(SelectTrigger, { className: "mb-1" },
-                            React.createElement(SelectValue, { placeholder: "None" })),
-                        React.createElement(SelectPortal, null,
-                            React.createElement(SelectContent, null, numberCategories.map(({ name, value }) => {
-                                return (React.createElement(SelectItem, { value: value, key: name }, name));
-                            }))))),
-                isCustom ? null : (React.createElement(Stack, { className: "grid grid-cols-2 gap-2" }, selectedOption?.options?.map((opt) => {
-                    return opt === "Decimal" ? (React.createElement(Stack, { direction: "vertical", key: opt, className: "gap-1 pb-3" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Decimal places"),
-                        React.createElement(Input, { min: 0, max: 10, type: "number", className: "text-xs", value: decimalCount, onChange: (event) => {
-                                const numDecimals = parseInt(event.target.value, 10);
-                                if (type) {
-                                    setFieldValue("numberFormat", {
-                                        type,
-                                        pattern: changeDecimals(pattern ?? "#,##0.00", numDecimals, false),
-                                    });
-                                }
-                            } }))) : opt === "ThousandSeparator" ? (React.createElement(Stack, { direction: "vertical", key: opt, className: "gap-1 pb-3" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Thousands separator"),
-                        React.createElement("label", { className: "font-system text-xs flex items-center gap-1", key: opt },
-                            React.createElement("input", { type: "checkbox", checked: thousandsSeparator, onChange: (e) => {
-                                    const checked = e.target.checked;
-                                    const newPattern = checked
-                                        ? addThousandSeparator(pattern ?? undefined)
-                                        : removeThousandSeparator(pattern ?? undefined);
-                                    setFieldValue("numberFormat", {
-                                        type: type ?? "NUMBER",
-                                        pattern: newPattern,
-                                    });
-                                } }),
-                            "Use 1000 Separator (,)"))) : opt === "CurrencySymbol" ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3", key: opt },
-                        React.createElement("label", { className: "font-system text-sm" }, "Currency Symbol"),
-                        React.createElement(Input, { type: "text", defaultValue: currencySymbol, className: "text-xs", onChange: (event) => {
-                                const currencyPattern = numberCategories.find((n) => n.value === "CURRENCY");
-                                if (currencyPattern && currencyPattern.pattern) {
-                                    setFieldValue("numberFormat", {
-                                        type: "CURRENCY",
-                                        pattern: supplant(currencyPattern.pattern, {
-                                            currencySymbol: event.target.value,
-                                        }),
-                                    });
-                                }
-                            } }))) : null;
-                }))),
-                isCustom ? (React.createElement("div", { className: "flex flex-col gap-2" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Type"),
-                        React.createElement(Input, { type: "text", className: "text-xs", value: customFormatValue?.pattern ?? undefined, onChange: (e) => {
-                                setCustomFormatValue((prev) => {
-                                    return {
-                                        type: prev?.type ?? "GENERAL",
-                                        pattern: e.target.value,
-                                    };
-                                });
-                                setFieldValue("numberFormat", {
-                                    type: customFormatValue?.type ?? "GENERAL",
-                                    pattern: e.target.value,
-                                });
-                            } })),
-                    React.createElement("div", { className: overflowDivClass }, customFormats.map((format, idx) => {
-                        return (React.createElement(Button, { key: idx, className: "text-xs py-1 px-1.5", onClick: () => {
-                                setFieldValue("numberFormat", {
-                                    type: format.type,
-                                    pattern: supplant(format.pattern ?? "General", {
-                                        currencySymbol,
-                                    }),
-                                });
-                                // Set current format type
-                                setCustomFormatValue({
-                                    type: format.type,
-                                    pattern: supplant(format.pattern ?? "General", {
-                                        currencySymbol,
-                                    }),
-                                });
-                            } }, supplant(format.pattern ?? format.type, {
-                            currencySymbol,
-                        })));
-                    })))) : null,
-                type === "DATE" && !isCustom ? (React.createElement("div", { className: overflowDivClass }, dateFormats.map((format, idx) => {
-                    return (React.createElement(Button, { key: idx, className: "text-xs py-1 px-1.5", onClick: () => {
-                            setFieldValue("numberFormat", {
-                                type: format.type,
-                                pattern: supplant(format.pattern ?? "General", {
-                                    currencySymbol,
-                                }),
-                            });
-                        } }, ssfFormat(format.pattern ?? getDefaultDateFormat(locale), sampleDate)));
-                }))) : null,
-                type === "DATE_TIME" && !isCustom ? (React.createElement("div", { className: overflowDivClass }, timeFormats.map((format, idx) => {
-                    return (React.createElement(Button, { key: idx, className: "text-xs py-1 px-1.5", onClick: () => {
-                            setFieldValue("numberFormat", {
-                                type: format.type,
-                                pattern: supplant(format.pattern ?? "General", {
-                                    currencySymbol,
-                                }),
-                            });
-                        } }, ssfFormat(format.pattern ?? getDefaultDateFormat(locale), sampleDate)));
-                }))) : null),
+                React.createElement(NumberTab, { numberFormat: draft.numberFormat, onChange: (numberFormat) => patchDraft({ numberFormat }), sampleValue: effectiveValue, locale: locale, currencySymbol: currencySymbol })),
             React.createElement(TabsContent, { value: "alignment" },
-                React.createElement(Stack, { className: "grid grid-cols-2 gap-2 pb-3" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Horizontal Alignment"),
-                        React.createElement(Select, { value: values?.horizontalAlignment ?? "General", onValueChange: (value) => setFieldValue("horizontalAlignment", value) },
-                            React.createElement(SelectTrigger, { className: "mb-1" },
-                                React.createElement(SelectValue, { placeholder: "General" })),
-                            React.createElement(SelectPortal, null,
-                                React.createElement(SelectContent, null, horizontalAlignments.map(({ name, value = "General" }) => {
-                                    return (React.createElement(SelectItem, { value: value, key: value }, name));
-                                }))))),
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Indent"),
-                        React.createElement(Input, { value: values?.indent ?? 0, min: 0, max: 10, type: "number", className: "text-xs", onChange: (event) => {
-                                setFieldValue("indent", Number(event.target.value));
-                            } }))),
-                React.createElement(Stack, { className: "grid grid-cols-2 gap-2" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Vertical Alignment"),
-                        React.createElement(Select, { value: values?.verticalAlignment ?? "bottom", onValueChange: (value) => setFieldValue("verticalAlignment", value) },
-                            React.createElement(SelectTrigger, { className: "mb-1" },
-                                React.createElement(SelectValue, { placeholder: "General" })),
-                            React.createElement(SelectPortal, null,
-                                React.createElement(SelectContent, null, verticalAlignments.map(({ name, value }) => {
-                                    return (React.createElement(SelectItem, { value: value, key: value }, name));
-                                })))))),
-                React.createElement("label", { className: "font-system text-sm pb-3" }, "Text control"),
-                React.createElement(Stack, { className: "grid grid-cols-2 gap-2" },
-                    React.createElement(Button, { className: "flex items-center gap-2", onClick: () => {
-                            setFieldValue("wrapStrategy", "wrap");
-                        }, variant: "ghost" },
-                        React.createElement("span", { className: "text-lg leading-none" },
-                            React.createElement(TextOverflowWrapIcon, null)),
-                        "Wrap text"),
-                    React.createElement(Button, { className: "flex items-center  gap-2", onClick: () => {
-                            onMergeCells?.(sheetId, activeCell, selections, Direction.Right);
-                        }, variant: "ghost" },
-                        React.createElement("span", { className: "text-lg leading-none" },
-                            React.createElement(AiOutlineMergeCells, null)),
-                        "Merge"))),
+                React.createElement(AlignmentTab, { format: draft, onChange: patchDraft, merged: merged, onChangeMerged: setMerged })),
             React.createElement(TabsContent, { value: "font" },
-                React.createElement(Stack, { className: "grid grid-cols-2 gap-2 pb-3" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Font"),
-                        React.createElement(FontFamilySelector, { theme: theme, value: values?.textFormat?.fontFamily, onChange: (fontFamily) => {
-                                setFieldValue("textFormat.fontFamily", fontFamily);
-                            }, triggerVariant: "outline" })),
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Font size"),
-                        React.createElement(FontSizeSelector, { value: values?.textFormat?.fontSize, onChange: (fontSize) => {
-                                setFieldValue("textFormat.fontSize", fontSize);
-                            } }))),
-                React.createElement(Stack, { className: "grid grid-cols-2 gap-2 pb-3" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Effects"),
-                        React.createElement(Stack, { direction: "horizontal", className: "gap-2" },
-                            React.createElement(ButtonBold, { isActive: values?.textFormat?.bold, onClick: () => {
-                                    setFieldValue("textFormat.bold", !values?.textFormat?.bold);
-                                } }),
-                            React.createElement(ButtonItalic, { isActive: values?.textFormat?.italic, onClick: () => {
-                                    setFieldValue("textFormat.italic", !values?.textFormat?.italic);
-                                } }),
-                            React.createElement(ButtonUnderline, { isActive: values?.textFormat?.underline, onClick: () => {
-                                    setFieldValue("textFormat.underline", !values?.textFormat?.underline);
-                                } }),
-                            React.createElement(ButtonStrikethrough, { isActive: values?.textFormat?.strikethrough, onClick: () => {
-                                    setFieldValue("textFormat.strikethrough", !values?.textFormat?.strikethrough);
-                                } }))),
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Color"),
-                        React.createElement("div", null,
-                            React.createElement(TextColorSelector, { color: values?.textFormat?.color, theme: theme, isDarkMode: isDarkMode, onChange: (color) => {
-                                    setFieldValue("textFormat.color", color);
-                                } }))))),
+                React.createElement(FontTab, { textFormat: draft.textFormat ?? {}, onChange: patchText, theme: theme, isDarkMode: isDarkMode })),
             React.createElement(TabsContent, { value: "border" },
-                React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
-                    React.createElement("label", { className: "font-system text-sm" }, "Border style"),
-                    React.createElement(Stack, { direction: "horizontal", className: "flex flex-wrap gap-2 pb-3" },
-                        React.createElement(BorderLocationOptions, { borderLocation: borderLocation, onChange: (value) => {
-                                setBorderLocationState(value);
-                                // Update border
-                                onChangeBorder?.(sheetId, activeCell, selections, value, color ?? getDefaultBorderColor(), borderStyle);
-                            }, onClear: () => {
-                                // Update border
-                                onChangeBorder?.(sheetId, activeCell, selections, "all", undefined, undefined);
-                            } }))),
-                React.createElement(Stack, { className: "grid grid-cols-3 gap-2" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3 col-span-2" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Border Style"),
-                        React.createElement("div", { className: "flex flex-wrap gap-2" },
-                            React.createElement(BorderLineStyleOptions, { borderStyle: borderStyle, onChange: (value) => {
-                                    setStyleState(value);
-                                    // Update border
-                                    onChangeBorder?.(sheetId, activeCell, selections, borderLocation ?? "all", color ?? getDefaultBorderColor(), value);
-                                } }))),
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Border color"),
-                        React.createElement("div", null,
-                            React.createElement(BorderColorSelector, { color: color ?? getDefaultBorderColor(), onChange: (value) => {
-                                    setColorState(value);
-                                    // Update border
-                                    onChangeBorder?.(sheetId, activeCell, selections, borderLocation ?? "all", value, borderStyle);
-                                }, theme: theme })))))),
+                React.createElement(BorderTab, { edges: shownEdges, onEdit: (edits, options) => {
+                        if (options?.clearedAll) {
+                            setClearedAll(true);
+                            setEdgeEdits({});
+                            return;
+                        }
+                        setEdgeEdits((prev) => ({ ...prev, ...edits }));
+                    }, lineStyle: lineStyle, onLineStyle: setLineStyle, color: borderColor, onColor: setBorderColor, hasInsideRows: spans.rows, hasInsideColumns: spans.columns, theme: theme })),
+            React.createElement(TabsContent, { value: "fill" },
+                React.createElement(FillTab, { fill: fill, onChange: (next) => patchDraft(next), theme: theme })),
+            React.createElement(TabsContent, { value: "protection" },
+                React.createElement(ProtectionTab, { protection: protection, onChange: setProtection }))),
         React.createElement("div", { className: "flex gap-1 py-2" },
-            React.createElement(Button, { type: "submit", variant: "primary", size: "xs" }, "Save"),
+            React.createElement(Button, { type: "submit", variant: "primary", size: "xs" }, "OK"),
             React.createElement(Button, { size: "xs", onClick: onCancelForm, type: "button" }, "Cancel"))));
 };
 export const CellFormatEditorDialog = ({ children, }) => {