@rowsncolumns/spreadsheet 10.4.1 → 10.4.4

package/dist/esm/components/toolbar/merge-cells-selector.js

@@ -1,12 +1,82 @@
 import { areaIntersects, Direction, isEqualCells } from "@rowsncolumns/grid";
-import { AiOutlineMergeCells, MdOutlineArrowDropDown, } from "@rowsncolumns/icons";
-import { DropdownMenuPortal, IconButton, Stack } from "@rowsncolumns/ui";
+import { AiOutlineMergeCells, Cross2Icon, MdOutlineArrowDropDown, } from "@rowsncolumns/icons";
+import { Button, Dialog, DialogBody, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogTitle, DropdownMenuPortal, IconButton, Stack, } from "@rowsncolumns/ui";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@rowsncolumns/ui";
-import React from "react";
-import { useFocusSheet } from "../../atoms";
+import React, { useState } from "react";
+import { useFocusSheet, useGetFormattedValue } from "../../atoms";
 import { DEFAULT_ARRAY } from "../../config";
-export const MergeCellsSelector = ({ activeCell, selections = DEFAULT_ARRAY, sheetId, merges, tables, onMerge, onUnMerge, }) => {
+/** Excel's wording for a merge that would drop cell values. */
+export const MERGE_DISCARDS_VALUES_TITLE = "Merge cells";
+export const MERGE_DISCARDS_VALUES_MESSAGE = "Merging cells only keeps the upper-left value and discards other values.";
+/**
+ * The regions `onMergeCells` merges for a toolbar request: each row (merge
+ * horizontally), each column (merge vertically), every area of a multi-area
+ * selection, or the last selection as one block — the store action's own rules.
+ */
+export const mergeRegionsForSelection = (selections, direction) => {
+    if (!selections.length)
+        return [];
+    const { range } = selections[selections.length - 1];
+    if (direction === Direction.Right) {
+        const rows = [];
+        for (let r = range.startRowIndex; r <= range.endRowIndex; r++) {
+            rows.push({ ...range, startRowIndex: r, endRowIndex: r });
+        }
+        return rows;
+    }
+    if (direction === Direction.Down) {
+        const cols = [];
+        for (let c = range.startColumnIndex; c <= range.endColumnIndex; c++) {
+            cols.push({ ...range, startColumnIndex: c, endColumnIndex: c });
+        }
+        return cols;
+    }
+    if (selections.length > 1)
+        return selections.map((sel) => sel.range);
+    return [range];
+};
+/**
+ * Would this merge discard values? Excel warns when more than one cell of a
+ * merged block holds a value (the merge keeps only the upper-left one). A
+ * headless / programmatic merge never asks — this gate lives in the toolbar.
+ */
+export const mergeDiscardsValues = ({ sheetId, selections, direction, getFormattedValue, }) => {
+    for (const region of mergeRegionsForSelection(selections, direction)) {
+        let filled = 0;
+        for (let r = region.startRowIndex; r <= region.endRowIndex; r++) {
+            for (let c = region.startColumnIndex; c <= region.endColumnIndex; c++) {
+                const value = getFormattedValue(sheetId, r, c);
+                if (value !== null && value !== undefined && value !== "") {
+                    filled++;
+                    if (filled > 1)
+                        return true;
+                }
+            }
+        }
+    }
+    return false;
+};
+export const MergeCellsSelector = ({ activeCell, selections = DEFAULT_ARRAY, sheetId, merges, tables, onMerge, onUnMerge, getFormattedValue: getFormattedValueProp, }) => {
     const focusSheet = useFocusSheet();
+    const gridGetFormattedValue = useGetFormattedValue();
+    const getFormattedValue = getFormattedValueProp ?? gridGetFormattedValue;
+    // A merge waiting on the "discards other values" confirmation.
+    const [pendingMerge, setPendingMerge] = useState(null);
+    const requestMerge = (direction) => {
+        if (getFormattedValue &&
+            mergeDiscardsValues({ sheetId, selections, direction, getFormattedValue })) {
+            setPendingMerge({ direction });
+            return;
+        }
+        onMerge(sheetId, activeCell, selections, direction);
+    };
+    const confirmPendingMerge = () => {
+        if (pendingMerge) {
+            onMerge(sheetId, activeCell, selections, pendingMerge.direction);
+        }
+        setPendingMerge(null);
+        focusSheet?.();
+    };
     const isMerged = !!merges?.find((merge) => isEqualCells({ rowIndex: merge.startRowIndex, columnIndex: merge.startColumnIndex }, activeCell));
     const selection = selections[selections.length - 1];
     // Excel greys the merge controls out for a selection that touches a table.
@@ -23,7 +93,7 @@ export const MergeCellsSelector = ({ activeCell, selections = DEFAULT_ARRAY, she
                     onUnMerge(sheetId, activeCell, selections);
                 }
                 else {
-                    onMerge(sheetId, activeCell, selections);
+                    requestMerge();
                 }
             }, isActive: isMerged, tooltip: isMerged ? "Unmerge All" : "Merge all", disabled: disableMenu },
             React.createElement(AiOutlineMergeCells, null)),
@@ -34,19 +104,33 @@ export const MergeCellsSelector = ({ activeCell, selections = DEFAULT_ARRAY, she
             React.createElement(DropdownMenuPortal, null,
                 React.createElement(DropdownMenuContent, { align: "end" },
                     React.createElement(DropdownMenuItem, { disabled: isMerged || selectionTouchesTable, onClick: () => {
-                            onMerge(sheetId, activeCell, selections);
+                            requestMerge();
                             focusSheet?.();
                         } }, "Merge all"),
                     React.createElement(DropdownMenuItem, { disabled: isMerged || selectionTouchesTable || !canMergeVertically, onClick: () => {
-                            onMerge(sheetId, activeCell, selections, Direction.Down);
+                            requestMerge(Direction.Down);
                             focusSheet?.();
                         } }, "Merge vertically"),
                     React.createElement(DropdownMenuItem, { onClick: () => {
-                            onMerge(sheetId, activeCell, selections, Direction.Right);
+                            requestMerge(Direction.Right);
                             focusSheet?.();
                         }, disabled: isMerged || selectionTouchesTable || !canMergeHorizontally }, "Merge horizontally"),
                     React.createElement(DropdownMenuItem, { disabled: !isMerged, onClick: () => {
                             onUnMerge(sheetId, activeCell, selections);
                             focusSheet?.();
-                        } }, "Unmerge"))))));
+                        } }, "Unmerge")))),
+        React.createElement(Dialog, { modal: true, open: pendingMerge !== null, onOpenChange: (open) => {
+                if (!open)
+                    setPendingMerge(null);
+            } },
+            React.createElement(DialogContent, null,
+                React.createElement(DialogTitle, null, MERGE_DISCARDS_VALUES_TITLE),
+                React.createElement(DialogDescription, null, MERGE_DISCARDS_VALUES_MESSAGE),
+                React.createElement(DialogBody, null,
+                    React.createElement(Stack, { className: "gap-2" },
+                        React.createElement(Button, { variant: "primary", onClick: confirmPendingMerge }, "Continue"),
+                        React.createElement(Button, { onClick: () => setPendingMerge(null) }, "Cancel"))),
+                React.createElement(DialogClose, { asChild: true },
+                    React.createElement(DialogCloseButton, null,
+                        React.createElement(Cross2Icon, null)))))));
 };

package/dist/esm/components/toolbar/table-style-editor.d.ts

@@ -0,0 +1,85 @@
+import React from "react";
+import type { BandingProperties, CustomTableStyle, Maybe } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+/**
+ * The style elements a custom table style can colour — the `rowProperties` fields the grid's
+ * banding resolves (`api/banded-ranges.ts`), in the order of Excel's New Table Style dialog.
+ * The first three are what the gallery swatches show and what every created style carries; the
+ * rest are only written when the user picks a colour for them.
+ */
+export declare const TABLE_STYLE_ELEMENTS: readonly [{
+    readonly key: "header";
+    readonly label: "Header row";
+    readonly property: "headerColor";
+}, {
+    readonly key: "firstBand";
+    readonly label: "First row stripe";
+    readonly property: "firstBandColor";
+}, {
+    readonly key: "secondBand";
+    readonly label: "Second row stripe";
+    readonly property: "secondBandColor";
+}, {
+    readonly key: "firstColumn";
+    readonly label: "First column";
+    readonly property: "firstColumnColor";
+}, {
+    readonly key: "lastColumn";
+    readonly label: "Last column";
+    readonly property: "lastColumnColor";
+}, {
+    readonly key: "totalRow";
+    readonly label: "Total row";
+    readonly property: "totalRowColor";
+}];
+export type TableStyleElementKey = (typeof TABLE_STYLE_ELEMENTS)[number]["key"];
+/** The colour picked for each element; `undefined` leaves the element unpainted. */
+export type TableStyleColors = Partial<Record<TableStyleElementKey, string>>;
+/** The colours a fresh style starts from (the default palette's accent 1 and its light tint). */
+export declare const DEFAULT_TABLE_STYLE_COLORS: TableStyleColors;
+/**
+ * The banding a custom table style paints from its element colours. Header and the two stripes
+ * are always present (unset ones stay unpainted); the optional elements are written only when
+ * coloured, so a style that only picks the first three keeps its historical shape.
+ */
+export declare const buildCustomTableStyle: (name: string, colors: TableStyleColors) => CustomTableStyle;
+/** The element colours of an existing custom style (theme colours resolved to hex). */
+export declare const getTableStyleColors: (style: CustomTableStyle, theme: SpreadsheetTheme) => TableStyleColors;
+/**
+ * Why a style name cannot be used, or `undefined` when it can: empty, a built-in style's name
+ * (the gallery tells the two apart by name), or another custom style's name (case-insensitive,
+ * like Excel). `currentName` is the style being edited, which may keep its own name.
+ */
+export declare const getTableStyleNameError: (name: string, existingNames: readonly string[], currentName?: string) => string | undefined;
+export type TableStyleEditorProps = {
+    /** The custom style being modified; omit to create a new one. */
+    style?: CustomTableStyle;
+    /** The name a new style starts with (ignored when `style` is given). */
+    defaultName?: string;
+    theme: SpreadsheetTheme;
+    /** Names of the workbook's custom styles, for the duplicate-name check. */
+    existingNames?: readonly string[];
+    /** Create (or, when `style` is given, save) — receives the style the picks produce. */
+    onSubmit(style: CustomTableStyle): void;
+    onCancel(): void;
+    /** Offered as "Delete style" while editing; the footer omits it when absent. */
+    onDelete?(style: CustomTableStyle): void;
+    className?: string;
+};
+/**
+ * Excel's New Table Style / Modify Table Style dialog, laid out for the Format as Table gallery:
+ * name row, the table elements with a colour button each (the toolbar's colour popover), a live
+ * preview of the table the picks produce, and an Excel-ordered footer.
+ */
+export declare const TableStyleEditor: ({ style, defaultName, theme, existingNames, onSubmit, onCancel, onDelete, className, }: TableStyleEditorProps) => React.JSX.Element;
+/**
+ * The table a style paints: a header row over four banded rows, with the first / last column and
+ * total row emphasis when the style colours them. Uses the grid's banding rules
+ * (`api/banded-ranges.ts`): the first body row is the first stripe, the last body row is the
+ * total row, and an edge column's colour outranks the stripe under it.
+ */
+export declare const TableStylePreviewCard: ({ rowProperties, theme, }: {
+    rowProperties: Maybe<BandingProperties>;
+    theme: SpreadsheetTheme;
+}) => React.JSX.Element;
+//# sourceMappingURL=table-style-editor.d.ts.map

package/dist/esm/components/toolbar/table-style-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-style-editor.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-style-editor.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAIxD,OAAO,KAAK,EACV,iBAAiB,EAEjB,gBAAgB,EAChB,KAAK,EACN,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG/D;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;EAW/B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;AAEhF,oFAAoF;AACpF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE7E,iGAAiG;AACjG,eAAO,MAAM,0BAA0B,EAAE,gBAIxC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAChC,MAAM,MAAM,EACZ,QAAQ,gBAAgB,KACvB,gBAUF,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,gBAAgB,EACvB,OAAO,gBAAgB,KACtB,gBAWF,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GACjC,MAAM,MAAM,EACZ,eAAe,SAAS,MAAM,EAAE,EAChC,cAAc,MAAM,KACnB,MAAM,GAAG,SAaX,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,iEAAiE;IACjE,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;IACxB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,uFAAuF;IACvF,QAAQ,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,QAAQ,IAAI,IAAI,CAAC;IACjB,gFAAgF;IAChF,QAAQ,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,wFAS9B,qBAAqB,sBAuIvB,CAAC;AAkEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,2BAGnC;IACD,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACxC,KAAK,EAAE,gBAAgB,CAAC;CACzB,sBA2EA,CAAC"}

package/dist/esm/components/toolbar/table-style-editor.js

@@ -0,0 +1,189 @@
+import { ChevronDownIcon } from "@rowsncolumns/icons";
+import { Button, cn, Input, Popover, PopoverContent, PopoverTrigger, Separator, } from "@rowsncolumns/ui";
+import { getContrastColor } from "@rowsncolumns/utils";
+import React, { useId, useMemo, useState } from "react";
+import { parseTintedColor } from "../../api/banded-ranges";
+import { getStringifiedColor } from "../../themes";
+import { ColorSelector } from "./color-selector";
+/**
+ * The style elements a custom table style can colour — the `rowProperties` fields the grid's
+ * banding resolves (`api/banded-ranges.ts`), in the order of Excel's New Table Style dialog.
+ * The first three are what the gallery swatches show and what every created style carries; the
+ * rest are only written when the user picks a colour for them.
+ */
+export const TABLE_STYLE_ELEMENTS = [
+    { key: "header", label: "Header row", property: "headerColor" },
+    { key: "firstBand", label: "First row stripe", property: "firstBandColor" },
+    { key: "secondBand", label: "Second row stripe", property: "secondBandColor" },
+    { key: "firstColumn", label: "First column", property: "firstColumnColor" },
+    { key: "lastColumn", label: "Last column", property: "lastColumnColor" },
+    { key: "totalRow", label: "Total row", property: "totalRowColor" },
+];
+/** The colours a fresh style starts from (the default palette's accent 1 and its light tint). */
+export const DEFAULT_TABLE_STYLE_COLORS = {
+    header: "#4472c4",
+    firstBand: "#b4c6e7",
+    secondBand: "#ffffff",
+};
+/**
+ * The banding a custom table style paints from its element colours. Header and the two stripes
+ * are always present (unset ones stay unpainted); the optional elements are written only when
+ * coloured, so a style that only picks the first three keeps its historical shape.
+ */
+export const buildCustomTableStyle = (name, colors) => {
+    const rowProperties = {
+        headerColor: colors.header,
+        firstBandColor: colors.firstBand,
+        secondBandColor: colors.secondBand,
+    };
+    if (colors.firstColumn)
+        rowProperties.firstColumnColor = colors.firstColumn;
+    if (colors.lastColumn)
+        rowProperties.lastColumnColor = colors.lastColumn;
+    if (colors.totalRow)
+        rowProperties.totalRowColor = colors.totalRow;
+    return { name, bandedRange: { rowProperties } };
+};
+/** The element colours of an existing custom style (theme colours resolved to hex). */
+export const getTableStyleColors = (style, theme) => {
+    const rowProperties = style.bandedRange.rowProperties ?? {};
+    const colors = {};
+    for (const { key, property } of TABLE_STYLE_ELEMENTS) {
+        const color = getStringifiedColor(parseTintedColor(rowProperties[property]), theme);
+        if (color)
+            colors[key] = color;
+    }
+    return colors;
+};
+const BUILT_IN_STYLE_NAME = /^TableStyle(Light|Medium|Dark)\d+$/i;
+/**
+ * Why a style name cannot be used, or `undefined` when it can: empty, a built-in style's name
+ * (the gallery tells the two apart by name), or another custom style's name (case-insensitive,
+ * like Excel). `currentName` is the style being edited, which may keep its own name.
+ */
+export const getTableStyleNameError = (name, existingNames, currentName) => {
+    const trimmed = name.trim();
+    if (!trimmed)
+        return "Enter a name for the style.";
+    if (BUILT_IN_STYLE_NAME.test(trimmed)) {
+        return "That name belongs to a built-in style.";
+    }
+    const lower = trimmed.toLowerCase();
+    const taken = existingNames.some((existing) => existing.toLowerCase() === lower &&
+        existing.toLowerCase() !== currentName?.toLowerCase());
+    return taken ? `A table style named “${trimmed}” already exists.` : undefined;
+};
+/**
+ * Excel's New Table Style / Modify Table Style dialog, laid out for the Format as Table gallery:
+ * name row, the table elements with a colour button each (the toolbar's colour popover), a live
+ * preview of the table the picks produce, and an Excel-ordered footer.
+ */
+export const TableStyleEditor = ({ style, defaultName = "", theme, existingNames = [], onSubmit, onCancel, onDelete, className, }) => {
+    const isEditing = !!style;
+    const nameId = useId();
+    const [name, setName] = useState(style?.name ?? defaultName);
+    const [colors, setColors] = useState(() => style ? getTableStyleColors(style, theme) : DEFAULT_TABLE_STYLE_COLORS);
+    const nameError = getTableStyleNameError(name, existingNames, style?.name);
+    const preview = useMemo(() => buildCustomTableStyle(name.trim(), colors), [name, colors]);
+    const setColor = (key, color) => setColors((prev) => ({ ...prev, [key]: color }));
+    const hasAnyColor = TABLE_STYLE_ELEMENTS.some(({ key }) => colors[key]);
+    return (React.createElement("form", { "data-testid": "table-style-editor", "aria-label": isEditing ? "Edit table style" : "New table style", className: cn("m-0 p-2 flex flex-col gap-3 font-system text-xs", className), 
+        // The gallery is a Radix menu: keep typing in the fields from driving its typeahead.
+        onKeyDown: (event) => event.stopPropagation(), onSubmit: (event) => {
+            event.preventDefault();
+            if (!nameError) {
+                onSubmit(preview);
+            }
+        } },
+        React.createElement("div", { className: "font-medium text-sm" }, isEditing ? "Edit table style" : "New table style"),
+        React.createElement("div", { className: "grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-x-3 gap-y-1" },
+            React.createElement("label", { htmlFor: nameId, className: "truncate whitespace-nowrap" }, "Name"),
+            React.createElement(Input, { id: nameId, value: name, onChange: (event) => setName(event.target.value), autoComplete: "off", "aria-invalid": nameError ? true : undefined, "aria-describedby": nameError ? `${nameId}-error` : undefined, className: "text-xs" }),
+            nameError ? (React.createElement(React.Fragment, null,
+                React.createElement("span", { "aria-hidden": "true" }),
+                React.createElement("p", { id: `${nameId}-error`, role: "alert", className: "m-0 text-rnc-destructive" }, nameError))) : null),
+        React.createElement("div", { className: "flex items-start gap-4" },
+            React.createElement("div", { role: "group", "aria-label": "Table elements", className: "flex-1 min-w-0 flex flex-col gap-1.5" },
+                React.createElement("div", { className: "text-rnc-muted-foreground" }, "Table element"),
+                TABLE_STYLE_ELEMENTS.map(({ key, label }) => (React.createElement("div", { key: key, className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 h-7" },
+                    React.createElement("span", { className: "truncate whitespace-nowrap", title: label }, label),
+                    React.createElement(ElementColorButton, { label: label, color: colors[key], theme: theme, onChange: (color) => setColor(key, color) }))))),
+            React.createElement("div", { className: "w-[180px] shrink-0 flex flex-col gap-1.5" },
+                React.createElement("div", { className: "text-rnc-muted-foreground" }, "Preview"),
+                React.createElement(TableStylePreviewCard, { rowProperties: preview.bandedRange.rowProperties, theme: theme }),
+                React.createElement(Button, { type: "button", variant: "link", size: "xs", className: "self-start no-underline hover:underline", disabled: !hasAnyColor, onClick: () => setColors({}) }, "Clear all colors"))),
+        React.createElement(Separator, null),
+        React.createElement("div", { className: "flex items-center gap-2" },
+            isEditing && onDelete ? (React.createElement(Button, { type: "button", variant: "ghost", size: "xs", className: "text-rnc-destructive hover:text-rnc-destructive", onClick: () => onDelete(style) }, "Delete style")) : null,
+            React.createElement("div", { className: "ml-auto flex items-center gap-2" },
+                React.createElement(Button, { type: "button", variant: "ghost", size: "xs", onClick: onCancel }, "Cancel"),
+                React.createElement(Button, { type: "submit", variant: "primary", size: "xs", disabled: !!nameError }, isEditing ? "Save" : "Create")))));
+};
+/** "No colour" swatch: a red diagonal on the popover background, as the toolbar's fill button. */
+const NO_COLOR_BACKGROUND = "linear-gradient(to top right, transparent 44%, #d32f2f 44%, #d32f2f 56%, transparent 56%)";
+/**
+ * One element's colour: a swatch button (current colour + chevron) opening the shared colour
+ * popover the toolbar's fill / text colour buttons use (theme colours, standard colours, custom,
+ * and "No color").
+ */
+const ElementColorButton = ({ label, color, theme, onChange, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (React.createElement(Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(Button, { type: "button", variant: "outline", size: "xs", "aria-label": `${label} color: ${color ? color.toUpperCase() : "No color"}`, "aria-haspopup": "dialog", "aria-expanded": isOpen, className: "h-7 w-14 px-1 py-0 gap-1 justify-between rounded-sm" },
+                React.createElement("span", { "data-testid": "element-color-swatch", "aria-hidden": "true", className: "block w-5 h-5 rounded-sm border border-solid border-rnc-border", style: color
+                        ? { backgroundColor: color }
+                        : { backgroundImage: NO_COLOR_BACKGROUND } }),
+                React.createElement(ChevronDownIcon, { className: "w-3 h-3 text-rnc-muted-foreground" }))),
+        React.createElement(PopoverContent, { align: "end" },
+            React.createElement(ColorSelector, { color: color, theme: theme, resetButtonTitle: "No color", onChange: (next) => {
+                    onChange(next ? getStringifiedColor(next, theme) : undefined);
+                    setIsOpen(false);
+                } }))));
+};
+const PREVIEW_COLUMNS = 5;
+const PREVIEW_BODY_ROWS = 4;
+/**
+ * The table a style paints: a header row over four banded rows, with the first / last column and
+ * total row emphasis when the style colours them. Uses the grid's banding rules
+ * (`api/banded-ranges.ts`): the first body row is the first stripe, the last body row is the
+ * total row, and an edge column's colour outranks the stripe under it.
+ */
+export const TableStylePreviewCard = ({ rowProperties, theme, }) => {
+    const resolve = (color) => getStringifiedColor(parseTintedColor(color), theme) ?? undefined;
+    const headerColor = resolve(rowProperties?.headerColor);
+    const firstBand = resolve(rowProperties?.firstBandColor);
+    const secondBand = resolve(rowProperties?.secondBandColor);
+    const firstColumn = resolve(rowProperties?.firstColumnColor);
+    const lastColumn = resolve(rowProperties?.lastColumnColor);
+    const totalRow = resolve(rowProperties?.totalRowColor);
+    const dark = getStringifiedColor({ theme: 1 }, theme);
+    const light = getStringifiedColor({ theme: 0 }, theme);
+    const barColor = (background) => background ? getContrastColor(background, dark, light) : undefined;
+    const cellClass = "table-cell border border-solid border-rnc-border/70 align-middle px-1.5";
+    return (React.createElement("div", { "data-testid": "table-style-preview", className: "table border-collapse table-fixed w-full h-[108px] rounded-sm bg-rnc-popover" },
+        React.createElement("div", { className: "table-row", "data-testid": "preview-header-row" }, Array.from({ length: PREVIEW_COLUMNS }, (_, column) => (React.createElement("div", { key: column, className: cellClass, style: { backgroundColor: headerColor } },
+            React.createElement("span", { className: "block h-1.5 w-3/4 rounded-full", style: {
+                    backgroundColor: barColor(headerColor) ?? dark,
+                    opacity: headerColor ? 0.9 : 0.6,
+                } }))))),
+        Array.from({ length: PREVIEW_BODY_ROWS }, (_, row) => {
+            const isTotalRow = row === PREVIEW_BODY_ROWS - 1;
+            const stripe = row % 2 === 0 ? firstBand : secondBand;
+            const rowBackground = isTotalRow ? totalRow ?? stripe : stripe;
+            return (React.createElement("div", { className: "table-row", key: row, "data-testid": "preview-body-row" }, Array.from({ length: PREVIEW_COLUMNS }, (_, column) => {
+                const edge = column === 0
+                    ? firstColumn
+                    : column === PREVIEW_COLUMNS - 1
+                        ? lastColumn
+                        : undefined;
+                const background = edge ?? rowBackground;
+                return (React.createElement("div", { key: column, className: cellClass, style: { backgroundColor: background } },
+                    React.createElement("span", { className: "block h-1 rounded-full", style: {
+                            width: `${55 + ((row * 3 + column * 5) % 4) * 10}%`,
+                            backgroundColor: barColor(background) ?? dark,
+                            opacity: 0.35,
+                        } })));
+            })));
+        })));
+};

package/dist/esm/components/toolbar/table-style-selector.d.ts

@@ -2,6 +2,7 @@ import type { CellInterface, SelectionArea } from "@rowsncolumns/grid";
 import { findMatchingBandProperty } from "@rowsncolumns/utils";
 import React from "react";
 export { findMatchingBandProperty };
+export { buildCustomTableStyle } from "./table-style-editor";
 import type { BandedDefinition, CustomTableStyle, TableStylePreview, TableTheme, TableView } from "../../types";
 import type { CanvasGridProps, SelectionAttributes, SpreadsheetTheme } from "../canvas-grid/typings";
 export type TableStyleSelectorProps = {
@@ -26,6 +27,11 @@ export type TableStyleSelectorProps = {
      * without it the selector keeps the styles it created for the session.
      */
     onCreateCustomTableStyle?(style: CustomTableStyle): void;
+    /**
+     * Called with a host-kept custom style the user deletes from the style editor (right-click a
+     * Custom swatch → Delete style); without it host-kept styles cannot be deleted from the gallery.
+     */
+    onDeleteCustomTableStyle?(style: CustomTableStyle): void;
 };
 /** Excel's Table Style Options (Table Design tab), in ribbon order. */
 declare const STYLE_OPTIONS: Array<{
@@ -39,12 +45,6 @@ declare const STYLE_OPTIONS: Array<{
  * does); a custom style has no palette to re-resolve from and keeps its banding.
  */
 export declare const getStyleOptionUpdate: (table: TableView, key: (typeof STYLE_OPTIONS)[number]["key"], checked: boolean) => Partial<TableView>;
-/** The banding a New Table Style paints from its three colours (unset elements stay unpainted). */
-export declare const buildCustomTableStyle: (name: string, colors: {
-    header?: string;
-    firstBand?: string;
-    secondBand?: string;
-}) => CustomTableStyle;
 type TableStyleList = [
     theme: TableTheme,
     firtBandStripeTint: number | undefined,
@@ -57,5 +57,5 @@ type TableStyleList = [
  * importers and both engines resolve a theme name into) plus a per-swatch preview style.
  */
 export declare const getTableBorderStyles: (showRowStripes: boolean | undefined, showColumnStripes: boolean | undefined, theme?: SpreadsheetTheme) => Map<string, TableStyleList[]>;
-export declare const TableStyleSelector: React.MemoExoticComponent<({ tables, sheetId, theme, activeCell, selections, onUpdateTable, onCreateTable, onRequestCreateTable, onPreviewTableStyle, customTableStyles, onCreateCustomTableStyle, }: TableStyleSelectorProps) => React.JSX.Element>;
+export declare const TableStyleSelector: React.MemoExoticComponent<({ tables, sheetId, theme, activeCell, selections, onUpdateTable, onCreateTable, onRequestCreateTable, onPreviewTableStyle, customTableStyles, onCreateCustomTableStyle, onDeleteCustomTableStyle, }: TableStyleSelectorProps) => React.JSX.Element>;
 //# sourceMappingURL=table-style-selector.d.ts.map

package/dist/esm/components/toolbar/table-style-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-style-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAkBvE,OAAO,EACL,wBAAwB,EAGzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAuD,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,wBAAwB,EAAE,CAAC;AAKpC,OAAO,KAAK,EACV,gBAAgB,EAEhB,gBAAgB,EAEhB,iBAAiB,EACjB,UAAU,EACV,SAAS,EACV,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,EACxB,YAAY,EAAE,OAAO,CAAC,SAAS,CAAC,GAC/B,IAAI,CAAC;IACR,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,4FAA4F;IAC5F,oBAAoB,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC/D;;;OAGG;IACH,mBAAmB,CAAC,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC;IAC9D,uFAAuF;IACvF,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACvC;;;OAGG;IACH,wBAAwB,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC1D,CAAC;AAEF,uEAAuE;AACvE,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC;IACzB,GAAG,EACC,WAAW,GACX,UAAU,GACV,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB,CAQA,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,SAAS,EAChB,KAAK,CAAC,OAAO,aAAa,EAAE,MAAM,CAAC,CAAC,KAAK,CAAC,EAC1C,SAAS,OAAO,KACf,OAAO,CAAC,SAAS,CAqBnB,CAAC;AAsBF,mGAAmG;AACnG,eAAO,MAAM,qBAAqB,GAChC,MAAM,MAAM,EACZ,QAAQ;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,KACnE,gBASD,CAAC;AAEH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,UAAU;IACjB,kBAAkB,EAAE,MAAM,GAAG,SAAS;IACtC,cAAc,EAAE,MAAM,GAAG,SAAS;IAClC,cAAc,EAAE,gBAAgB,GAAG,SAAS;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAKF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAC/B,gBAAgB,OAAO,GAAG,SAAS,EACnC,mBAAmB,OAAO,GAAG,SAAS,EACtC,QAAQ,gBAAgB,kCAoBzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,wMAa1B,uBAAuB,uBAoS3B,CAAC"}
+{"version":3,"file":"table-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-style-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAevE,OAAO,EACL,wBAAwB,EAGzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAuD,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,wBAAwB,EAAE,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,OAAO,KAAK,EACV,gBAAgB,EAEhB,gBAAgB,EAEhB,iBAAiB,EACjB,UAAU,EACV,SAAS,EACV,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAGhC,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,EACxB,YAAY,EAAE,OAAO,CAAC,SAAS,CAAC,GAC/B,IAAI,CAAC;IACR,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,4FAA4F;IAC5F,oBAAoB,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC/D;;;OAGG;IACH,mBAAmB,CAAC,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC;IAC9D,uFAAuF;IACvF,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACvC;;;OAGG;IACH,wBAAwB,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACzD;;;OAGG;IACH,wBAAwB,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC1D,CAAC;AAEF,uEAAuE;AACvE,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC;IACzB,GAAG,EACC,WAAW,GACX,UAAU,GACV,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB,CAQA,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,SAAS,EAChB,KAAK,CAAC,OAAO,aAAa,EAAE,MAAM,CAAC,CAAC,KAAK,CAAC,EAC1C,SAAS,OAAO,KACf,OAAO,CAAC,SAAS,CAqBnB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,UAAU;IACjB,kBAAkB,EAAE,MAAM,GAAG,SAAS;IACtC,cAAc,EAAE,MAAM,GAAG,SAAS;IAClC,cAAc,EAAE,gBAAgB,GAAG,SAAS;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAKF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAC/B,gBAAgB,OAAO,GAAG,SAAS,EACnC,mBAAmB,OAAO,GAAG,SAAS,EACtC,QAAQ,gBAAgB,kCAoBzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,kOAc1B,uBAAuB,uBA+W3B,CAAC"}