@rowsncolumns/spreadsheet 10.2.74 → 10.2.75

package/dist/esm/components/goal-seek-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/goal-seek-dialog/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAMtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,MAAM,mBAAmB,GAAG;IAChC,2BAA2B;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,4DAA4D;IAC5D,cAAc,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,OAAO,CACL,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,OAAO,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;CACxC,CAAC;AAKF,qDAAqD;AACrD,eAAO,MAAM,kBAAkB,GAC7B,SAAS,MAAM,EACf,QAAQ,cAAc,GAAG,SAAS,KACjC,MAKF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,8EACyB,mBAAmB,uBAyJtE,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;CAkB9B,CAAC"}

package/dist/esm/components/goal-seek-dialog/index.js

@@ -0,0 +1,125 @@
+import { Cross1Icon } from "@rowsncolumns/icons";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogDescription, DialogTitle, Input, Separator, } from "@rowsncolumns/ui";
+import { addressToCell } from "@rowsncolumns/utils";
+import React, { memo, useCallback, useEffect, useState } from "react";
+import { useGoalSeekDialogState, useRegisterGoalSeekDialogHost, } from "../../atoms/goal-seek-dialog.atom";
+const isCellReference = (text) => /^\$?[A-Za-z]{1,3}\$?\d+$/.test(text.trim()) && addressToCell(text.trim()) != null;
+/** Excel's status sentence for a finished search. */
+export const goalSeekStatusText = (setCell, result) => {
+    if (!result)
+        return `Goal Seeking with Cell ${setCell} finished.`;
+    return result.status === "found"
+        ? `Goal Seeking with Cell ${setCell} found a solution.`
+        : `Goal Seeking with Cell ${setCell} may not have found a solution.`;
+};
+/**
+ * Excel's Goal Seek dialog: Set cell / To value / By changing cell, then the
+ * Goal Seek Status sentence with target and current value.
+ */
+export const GoalSeekDialog = memo(({ open, onOpenChange, initialSetCell, onApply }) => {
+    const [setCell, setSetCell] = useState(initialSetCell);
+    const [target, setTarget] = useState("");
+    const [changingCell, setChangingCell] = useState("");
+    const [error, setError] = useState(undefined);
+    const [busy, setBusy] = useState(false);
+    const [result, setResult] = useState(undefined);
+    useEffect(() => {
+        if (open) {
+            setSetCell(initialSetCell);
+            setTarget("");
+            setChangingCell("");
+            setError(undefined);
+            setBusy(false);
+            setResult(undefined);
+        }
+        // Only reset on open transitions.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const submit = useCallback(async (event) => {
+        event.preventDefault();
+        const targetValue = Number(target.trim());
+        if (!isCellReference(setCell)) {
+            setError("Set cell must be a single cell reference, e.g. B4.");
+            return;
+        }
+        if (target.trim() === "" || !Number.isFinite(targetValue)) {
+            setError("To value must be a number.");
+            return;
+        }
+        if (!isCellReference(changingCell)) {
+            setError("By changing cell must be a single cell reference, e.g. A1.");
+            return;
+        }
+        setError(undefined);
+        setBusy(true);
+        try {
+            const outcome = await onApply(setCell.trim().toUpperCase(), targetValue, changingCell.trim().toUpperCase());
+            setResult({ setCell: setCell.trim().toUpperCase(), result: outcome });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Goal Seek failed.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [setCell, target, changingCell, onApply]);
+    return (React.createElement(Dialog, { open: open, onOpenChange: onOpenChange },
+        React.createElement(DialogContent, { className: "w-[360px] max-w-[92vw] pointer-events-auto" },
+            React.createElement(DialogTitle, null, result ? "Goal Seek Status" : "Goal Seek"),
+            React.createElement(DialogDescription, null, "Find the input value that makes a formula reach a target."),
+            React.createElement(DialogCloseButton, { onClick: () => onOpenChange(false) },
+                React.createElement(Cross1Icon, null)),
+            React.createElement(DialogBody, { className: "flex flex-col gap-3 font-system text-sm" }, result ? (React.createElement("div", { className: "flex flex-col gap-2", role: "status" },
+                React.createElement("div", null, goalSeekStatusText(result.setCell, result.result)),
+                result.result ? (React.createElement("dl", { className: "grid grid-cols-2 gap-1 text-xs" },
+                    React.createElement("dt", { className: "text-rnc-foreground/70" }, "Target value:"),
+                    React.createElement("dd", null, result.result.targetValue),
+                    React.createElement("dt", { className: "text-rnc-foreground/70" }, "Current value:"),
+                    React.createElement("dd", null, result.result.currentValue === undefined
+                        ? "—"
+                        : String(result.result.currentValue)))) : null,
+                React.createElement(Separator, null),
+                React.createElement("div", { className: "flex justify-end gap-2" },
+                    React.createElement(Button, { size: "sm", type: "button", onClick: () => onOpenChange(false) }, "OK")))) : (React.createElement("form", { className: "flex flex-col gap-3", onSubmit: submit },
+                React.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                    "Set cell:",
+                    React.createElement(Input, { autoFocus: true, value: setCell, "aria-label": "Set cell", onChange: (e) => {
+                            setSetCell(e.target.value);
+                            setError(undefined);
+                        } })),
+                React.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                    "To value:",
+                    React.createElement(Input, { value: target, "aria-label": "To value", inputMode: "decimal", onChange: (e) => {
+                            setTarget(e.target.value);
+                            setError(undefined);
+                        } })),
+                React.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                    "By changing cell:",
+                    React.createElement(Input, { value: changingCell, "aria-label": "By changing cell", onChange: (e) => {
+                            setChangingCell(e.target.value);
+                            setError(undefined);
+                        } })),
+                error ? (React.createElement("div", { role: "alert", className: "text-xs text-rnc-destructive" }, error)) : null,
+                React.createElement(Separator, null),
+                React.createElement("div", { className: "flex justify-end gap-2" },
+                    React.createElement(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onOpenChange(false) }, "Cancel"),
+                    React.createElement(Button, { type: "submit", size: "sm", disabled: busy }, busy ? "Seeking…" : "OK"))))))));
+});
+GoalSeekDialog.displayName = "GoalSeekDialog";
+/**
+ * Host-mounted, atom-driven wrapper around {@link GoalSeekDialog}. Mount
+ * once in the host; the context menu opens it via `useOpenGoalSeekDialog`
+ * and only offers the item while a host is mounted.
+ */
+export const GoalSeekDialogHost = () => {
+    useRegisterGoalSeekDialogHost();
+    const [request, setRequest] = useGoalSeekDialogState();
+    const close = useCallback(() => setRequest(null), [setRequest]);
+    return (React.createElement(GoalSeekDialog, { open: request != null, onOpenChange: (open) => {
+            if (!open)
+                close();
+        }, initialSetCell: request?.setCell ?? "", onApply: (setCell, targetValue, changingCell) => request
+            ? request.onApply(setCell, targetValue, changingCell)
+            : Promise.resolve(undefined) }));
+};
+GoalSeekDialogHost.displayName = "GoalSeekDialogHost";

package/dist/esm/components/subtotal-dialog/index.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { type SubtotalDialogChoices, type SubtotalDialogColumn } from "../../atoms/subtotal-dialog.atom";
+export type { SubtotalDialogChoices, SubtotalDialogColumn };
+export type SubtotalDialogProps = {
+    /** Controls visibility. */
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    /** Columns of the range, in sheet order. */
+    columns: SubtotalDialogColumn[];
+    /** Initial state of "My data has headers". */
+    initialHasHeader?: boolean;
+    /** Emits the choices; the host adds the range and routes to `onSubtotal`. */
+    onApply(choices: SubtotalDialogChoices): void;
+};
+/**
+ * Excel's Subtotal dialog: "At each change in" (group column), "Use
+ * function", "Add subtotal to" (aggregate columns), "Replace current
+ * subtotals". Summary rows are always placed below the data.
+ */
+export declare const SubtotalDialog: React.MemoExoticComponent<({ open, onOpenChange, columns, initialHasHeader, onApply, }: SubtotalDialogProps) => React.JSX.Element>;
+/**
+ * Host-mounted, atom-driven wrapper around {@link SubtotalDialog}. Mount
+ * once in the host; the context menu opens it via `useOpenSubtotalDialog`
+ * and only offers the item while a host is mounted.
+ */
+export declare const SubtotalDialogHost: {
+    (): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/subtotal-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/subtotal-dialog/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAE/E,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EAG1B,MAAM,kCAAkC,CAAC;AAG1C,YAAY,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,CAAC;AAoB5D,MAAM,MAAM,mBAAmB,GAAG;IAChC,2BAA2B;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,4CAA4C;IAC5C,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6EAA6E;IAC7E,OAAO,CAAC,OAAO,EAAE,qBAAqB,GAAG,IAAI,CAAC;CAC/C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,0FAOtB,mBAAmB,uBAoKvB,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;CAe9B,CAAC"}

package/dist/esm/components/subtotal-dialog/index.js

@@ -0,0 +1,115 @@
+import { Cross1Icon } from "@rowsncolumns/icons";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogDescription, DialogTitle, Separator, } from "@rowsncolumns/ui";
+import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { useRegisterSubtotalDialogHost, useSubtotalDialogState, } from "../../atoms/subtotal-dialog.atom";
+import { SUBTOTAL_FUNCTIONS } from "../../types";
+/**
+ * Excel's "Use function" labels. Excel's "Count" is COUNTA (non-empty cells,
+ * `SUBTOTAL(3,…)`) and "Count Numbers" is COUNT (`SUBTOTAL(2,…)`).
+ */
+const FUNCTION_LABELS = {
+    SUM: "Sum",
+    COUNTA: "Count",
+    AVERAGE: "Average",
+    MAX: "Max",
+    MIN: "Min",
+    PRODUCT: "Product",
+    COUNT: "Count Numbers",
+    STDEV: "StdDev",
+    STDEVP: "StdDevp",
+    VAR: "Var",
+    VARP: "Varp",
+};
+/**
+ * Excel's Subtotal dialog: "At each change in" (group column), "Use
+ * function", "Add subtotal to" (aggregate columns), "Replace current
+ * subtotals". Summary rows are always placed below the data.
+ */
+export const SubtotalDialog = memo(({ open, onOpenChange, columns, initialHasHeader = true, onApply, }) => {
+    const [hasHeader, setHasHeader] = useState(initialHasHeader);
+    const [groupBy, setGroupBy] = useState(columns[0]?.columnIndex);
+    const [fn, setFn] = useState("SUM");
+    const [aggregates, setAggregates] = useState(() => new Set(columns.length ? [columns[columns.length - 1].columnIndex] : []));
+    const [replaceCurrent, setReplaceCurrent] = useState(true);
+    // Re-seed when reopened for a different range.
+    useEffect(() => {
+        if (open) {
+            setHasHeader(initialHasHeader);
+            setGroupBy(columns[0]?.columnIndex);
+            setFn("SUM");
+            setAggregates(new Set(columns.length ? [columns[columns.length - 1].columnIndex] : []));
+            setReplaceCurrent(true);
+        }
+        // Only reset on open transitions.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const labelOf = useCallback((column) => hasHeader && column.header ? column.header : column.label, [hasHeader]);
+    const toggleAggregate = useCallback((columnIndex) => {
+        setAggregates((prev) => {
+            const next = new Set(prev);
+            if (next.has(columnIndex))
+                next.delete(columnIndex);
+            else
+                next.add(columnIndex);
+            return next;
+        });
+    }, []);
+    const canApply = groupBy !== undefined && aggregates.size > 0;
+    const orderedAggregates = useMemo(() => columns.map((c) => c.columnIndex).filter((c) => aggregates.has(c)), [columns, aggregates]);
+    const commit = useCallback(() => {
+        if (groupBy === undefined)
+            return;
+        onApply({
+            groupByColumnIndex: groupBy,
+            aggregateColumnIndices: orderedAggregates,
+            fn,
+            hasHeader,
+            replaceCurrent,
+        });
+        onOpenChange(false);
+    }, [groupBy, orderedAggregates, fn, hasHeader, replaceCurrent, onApply, onOpenChange]);
+    return (React.createElement(Dialog, { open: open, onOpenChange: onOpenChange },
+        React.createElement(DialogContent, { className: "w-[420px] max-w-[92vw] pointer-events-auto" },
+            React.createElement(DialogTitle, null, "Subtotal"),
+            React.createElement(DialogDescription, null, "Insert a total row after every change in a column, plus a grand total, and outline the groups."),
+            React.createElement(DialogCloseButton, { onClick: () => onOpenChange(false) },
+                React.createElement(Cross1Icon, null)),
+            React.createElement(DialogBody, { className: "flex flex-col gap-3 font-system text-sm" },
+                React.createElement("label", { className: "flex items-center gap-1" },
+                    React.createElement("input", { type: "checkbox", name: "hasHeader", checked: hasHeader, onChange: (e) => setHasHeader(e.target.checked) }),
+                    "My data has headers"),
+                React.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                    "At each change in:",
+                    React.createElement("select", { className: "h-8 rounded border border-rnc-border bg-transparent px-2 text-sm", "aria-label": "At each change in", value: groupBy ?? "", onChange: (e) => setGroupBy(Number(e.target.value)) }, columns.map((column) => (React.createElement("option", { key: column.columnIndex, value: column.columnIndex }, labelOf(column)))))),
+                React.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                    "Use function:",
+                    React.createElement("select", { className: "h-8 rounded border border-rnc-border bg-transparent px-2 text-sm", "aria-label": "Use function", value: fn, onChange: (e) => setFn(e.target.value) }, SUBTOTAL_FUNCTIONS.map((name) => (React.createElement("option", { key: name, value: name }, FUNCTION_LABELS[name]))))),
+                React.createElement("div", { className: "flex flex-col gap-1" },
+                    React.createElement("span", { className: "text-xs font-medium" }, "Add subtotal to:"),
+                    React.createElement("div", { className: "flex flex-col gap-1 max-h-[180px] overflow-y-auto border border-rnc-border rounded p-2", role: "group", "aria-label": "Add subtotal to" }, columns.map((column) => (React.createElement("label", { key: column.columnIndex, className: "flex items-center gap-1" },
+                        React.createElement("input", { type: "checkbox", name: `subtotal-column-${column.columnIndex}`, checked: aggregates.has(column.columnIndex), onChange: () => toggleAggregate(column.columnIndex) }),
+                        React.createElement("span", { className: "truncate", title: labelOf(column) }, labelOf(column))))))),
+                React.createElement("label", { className: "flex items-center gap-1" },
+                    React.createElement("input", { type: "checkbox", name: "replaceCurrent", checked: replaceCurrent, onChange: (e) => setReplaceCurrent(e.target.checked) }),
+                    "Replace current subtotals"),
+                React.createElement(Separator, null),
+                React.createElement("div", { className: "flex justify-end gap-2" },
+                    React.createElement(Button, { variant: "outline", size: "sm", type: "button", onClick: () => onOpenChange(false) }, "Cancel"),
+                    React.createElement(Button, { size: "sm", type: "button", onClick: commit, disabled: !canApply }, "OK"))))));
+});
+SubtotalDialog.displayName = "SubtotalDialog";
+/**
+ * Host-mounted, atom-driven wrapper around {@link SubtotalDialog}. Mount
+ * once in the host; the context menu opens it via `useOpenSubtotalDialog`
+ * and only offers the item while a host is mounted.
+ */
+export const SubtotalDialogHost = () => {
+    useRegisterSubtotalDialogHost();
+    const [request, setRequest] = useSubtotalDialogState();
+    const close = useCallback(() => setRequest(null), [setRequest]);
+    return (React.createElement(SubtotalDialog, { open: request != null, onOpenChange: (open) => {
+            if (!open)
+                close();
+        }, columns: request?.columns ?? [], initialHasHeader: request?.hasHeader, onApply: (choices) => request?.onApply(choices) }));
+};
+SubtotalDialogHost.displayName = "SubtotalDialogHost";

package/dist/esm/components/text-to-columns-dialog/index.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import type { SplitTextOptions } from "../../types";
+export type TextToColumnsMode = "delimited" | "fixed";
+export type TextToColumnsDialogProps = {
+    /** Controls visibility. */
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    /** Texts of the first cells of the selected column — the preview / ruler. */
+    preview: string[];
+    /** Initial wizard step-1 choice (default Delimited). */
+    initialMode?: TextToColumnsMode;
+    /**
+     * Emits the chosen delimiter (Delimited) or column breaks (Fixed width).
+     * The host routes it to `onSplitTextToColumns`.
+     */
+    onApply(options: {
+        delimiter: string;
+    } & SplitTextOptions): void;
+};
+/**
+ * Excel's Convert Text to Columns wizard, condensed: choose Delimited (pick
+ * a delimiter or type another) or Fixed width (click the ruler to add or
+ * remove break lines, or type the positions), with a live preview of the
+ * first rows.
+ */
+export declare const TextToColumnsDialog: React.MemoExoticComponent<({ open, onOpenChange, preview, initialMode, onApply, }: TextToColumnsDialogProps) => React.JSX.Element>;
+/**
+ * Host-mounted, atom-driven wrapper around {@link TextToColumnsDialog}.
+ * Mount once in the host (alongside the other editor dialogs); the context
+ * menu opens it via `useOpenTextToColumnsDialog`. Without a host the menu
+ * keeps its one-click delimiter items only.
+ */
+export declare const TextToColumnsDialogHost: {
+    (): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/text-to-columns-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/text-to-columns-dialog/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAM/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,wBAAwB,GAAG;IACrC,2BAA2B;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,6EAA6E;IAC7E,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,wDAAwD;IACxD,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,GAAG,gBAAgB,GAAG,IAAI,CAAC;CAClE,CAAC;AAiCF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,qFAO3B,wBAAwB,uBAgO5B,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB;;;CAenC,CAAC"}

package/dist/esm/components/text-to-columns-dialog/index.js

@@ -0,0 +1,147 @@
+import { Cross1Icon } from "@rowsncolumns/icons";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogDescription, DialogTitle, Input, Separator, } from "@rowsncolumns/ui";
+import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { useRegisterTextToColumnsDialogHost, useTextToColumnsDialogState, } from "../../atoms/text-to-columns-dialog.atom";
+const DELIMITERS = [
+    { label: "Comma", value: "," },
+    { label: "Semicolon", value: ";" },
+    { label: "Tab", value: "\t" },
+    { label: "Space", value: " " },
+    { label: "Period", value: "." },
+    { label: "Pipe", value: "|" },
+];
+/** Cuts `text` at ascending character positions (the dialog's own preview). */
+const cutAt = (text, breaks) => {
+    const parts = [];
+    let start = 0;
+    for (const position of breaks) {
+        parts.push(text.slice(start, position));
+        start = position;
+    }
+    parts.push(text.slice(start));
+    return parts;
+};
+const parseBreaks = (text) => [
+    ...new Set(text
+        .split(/[\s,;]+/)
+        .map((part) => Number.parseInt(part, 10))
+        .filter((n) => Number.isInteger(n) && n > 0)),
+].sort((a, b) => a - b);
+/**
+ * Excel's Convert Text to Columns wizard, condensed: choose Delimited (pick
+ * a delimiter or type another) or Fixed width (click the ruler to add or
+ * remove break lines, or type the positions), with a live preview of the
+ * first rows.
+ */
+export const TextToColumnsDialog = memo(({ open, onOpenChange, preview, initialMode = "delimited", onApply, }) => {
+    const [mode, setMode] = useState(initialMode);
+    const [delimiter, setDelimiter] = useState(",");
+    const [customDelimiter, setCustomDelimiter] = useState("");
+    const [breaks, setBreaks] = useState([]);
+    const [breaksText, setBreaksText] = useState("");
+    useEffect(() => {
+        if (open) {
+            setMode(initialMode);
+            setDelimiter(",");
+            setCustomDelimiter("");
+            setBreaks([]);
+            setBreaksText("");
+        }
+        // Only reset on open transitions.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const sample = useMemo(() => preview.slice(0, 6), [preview]);
+    const rulerLength = useMemo(() => Math.min(120, Math.max(10, ...sample.map((text) => text.length))), [sample]);
+    const toggleBreak = useCallback((position) => {
+        setBreaks((prev) => {
+            const next = prev.includes(position)
+                ? prev.filter((p) => p !== position)
+                : [...prev, position].sort((a, b) => a - b);
+            setBreaksText(next.join(", "));
+            return next;
+        });
+    }, []);
+    const effectiveDelimiter = delimiter === "custom" ? customDelimiter : delimiter;
+    const canApply = mode === "delimited" ? effectiveDelimiter.length > 0 : breaks.length > 0;
+    const commit = useCallback(() => {
+        if (mode === "fixed") {
+            onApply({ delimiter: ",", columnBreaks: breaks });
+        }
+        else {
+            onApply({ delimiter: effectiveDelimiter });
+        }
+        onOpenChange(false);
+    }, [mode, breaks, effectiveDelimiter, onApply, onOpenChange]);
+    return (React.createElement(Dialog, { open: open, onOpenChange: onOpenChange },
+        React.createElement(DialogContent, { className: "w-[520px] max-w-[92vw] pointer-events-auto" },
+            React.createElement(DialogTitle, null, "Text to columns"),
+            React.createElement(DialogDescription, null, "Split the selected column into several columns."),
+            React.createElement(DialogCloseButton, { onClick: () => onOpenChange(false) },
+                React.createElement(Cross1Icon, null)),
+            React.createElement(DialogBody, { className: "flex flex-col gap-3 font-system text-sm" },
+                React.createElement("div", { className: "flex gap-4", role: "radiogroup", "aria-label": "Original data type" },
+                    React.createElement("label", { className: "flex items-center gap-1" },
+                        React.createElement("input", { type: "radio", name: "text-to-columns-mode", value: "delimited", checked: mode === "delimited", onChange: () => setMode("delimited") }),
+                        "Delimited"),
+                    React.createElement("label", { className: "flex items-center gap-1" },
+                        React.createElement("input", { type: "radio", name: "text-to-columns-mode", value: "fixed", checked: mode === "fixed", onChange: () => setMode("fixed") }),
+                        "Fixed width")),
+                mode === "delimited" ? (React.createElement("div", { className: "flex flex-col gap-2" },
+                    React.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                        "Delimiter",
+                        React.createElement("select", { className: "h-8 rounded border border-rnc-border bg-transparent px-2 text-sm", value: delimiter, onChange: (e) => setDelimiter(e.target.value), "aria-label": "Delimiter" },
+                            DELIMITERS.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label))),
+                            React.createElement("option", { value: "custom" }, "Other\u2026"))),
+                    delimiter === "custom" ? (React.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                        "Other delimiter",
+                        React.createElement(Input, { value: customDelimiter, maxLength: 5, "aria-label": "Other delimiter", onChange: (e) => setCustomDelimiter(e.target.value) }))) : null)) : (React.createElement("div", { className: "flex flex-col gap-2" },
+                    React.createElement("div", { className: "text-xs text-rnc-foreground/70" }, "Click the ruler to create a break line; click it again to remove it."),
+                    React.createElement("div", { className: "overflow-x-auto rounded border border-rnc-border p-2 font-mono text-xs leading-5", "data-testid": "fixed-width-ruler" },
+                        React.createElement("div", { className: "flex select-none" }, Array.from({ length: rulerLength }, (_, index) => {
+                            const position = index + 1;
+                            const active = breaks.includes(position);
+                            return (React.createElement("button", { key: position, type: "button", "aria-label": `Break after character ${position}`, "aria-pressed": active, className: `w-[1ch] shrink-0 border-r ${active ? "border-rnc-primary bg-rnc-primary/20" : "border-transparent"} hover:bg-rnc-accent`, onClick: () => toggleBreak(position) }, position % 10 === 0 ? String(position / 10) : "·"));
+                        })),
+                        sample.map((text, rowIndex) => (React.createElement("div", { key: rowIndex, className: "flex whitespace-pre" }, Array.from({ length: rulerLength }, (_, index) => {
+                            const position = index + 1;
+                            const active = breaks.includes(position);
+                            return (React.createElement("span", { key: position, className: `w-[1ch] shrink-0 border-r ${active ? "border-rnc-primary" : "border-transparent"}` }, text[index] ?? " "));
+                        }))))),
+                    React.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                        "Break positions (characters before each break)",
+                        React.createElement(Input, { value: breaksText, placeholder: "e.g. 4, 10", "aria-label": "Break positions", onChange: (e) => {
+                                setBreaksText(e.target.value);
+                                setBreaks(parseBreaks(e.target.value));
+                            } })))),
+                React.createElement("div", { className: "flex flex-col gap-1" },
+                    React.createElement("span", { className: "text-xs font-medium" }, "Data preview"),
+                    React.createElement("div", { className: "max-h-[120px] overflow-auto rounded border border-rnc-border p-2 font-mono text-xs", "data-testid": "text-to-columns-preview" }, sample.map((text, rowIndex) => {
+                        const parts = mode === "fixed"
+                            ? cutAt(text, breaks)
+                            : effectiveDelimiter
+                                ? text.split(effectiveDelimiter)
+                                : [text];
+                        return (React.createElement("div", { key: rowIndex, className: "flex gap-1 whitespace-pre" }, parts.map((part, partIndex) => (React.createElement("span", { key: partIndex, className: "border-r border-rnc-border pr-1 last:border-r-0" }, part.trim() || " ")))));
+                    }))),
+                React.createElement(Separator, null),
+                React.createElement("div", { className: "flex justify-end gap-2" },
+                    React.createElement(Button, { variant: "outline", size: "sm", type: "button", onClick: () => onOpenChange(false) }, "Cancel"),
+                    React.createElement(Button, { size: "sm", type: "button", onClick: commit, disabled: !canApply }, "Finish"))))));
+});
+TextToColumnsDialog.displayName = "TextToColumnsDialog";
+/**
+ * Host-mounted, atom-driven wrapper around {@link TextToColumnsDialog}.
+ * Mount once in the host (alongside the other editor dialogs); the context
+ * menu opens it via `useOpenTextToColumnsDialog`. Without a host the menu
+ * keeps its one-click delimiter items only.
+ */
+export const TextToColumnsDialogHost = () => {
+    useRegisterTextToColumnsDialogHost();
+    const [request, setRequest] = useTextToColumnsDialogState();
+    const close = useCallback(() => setRequest(null), [setRequest]);
+    return (React.createElement(TextToColumnsDialog, { open: request != null, onOpenChange: (open) => {
+            if (!open)
+                close();
+        }, preview: request?.preview ?? [], initialMode: "fixed", onApply: (options) => request?.onApply(options) }));
+};
+TextToColumnsDialogHost.displayName = "TextToColumnsDialogHost";

package/dist/esm/components/toolbar/background-color-selector.d.ts

@@ -4,16 +4,28 @@ import type { Color } from "../../types";
 import type { SpreadsheetTheme } from "../canvas-grid/typings";
 import type { ColorSelectorProps } from "./color-selector";
 import { ColorSelector } from "./color-selector";
+import { type CellFill } from "./fill-selectors";
 type BackgroundColorSelectorProps = {
     disabled?: boolean;
     color?: Color | null;
     theme?: SpreadsheetTheme;
     onChange?(color: Color | undefined): void;
+    /**
+     * The active cell's fill (pattern / gradient fields) — enables the
+     * Pattern and Gradient tabs together with `onChangeFill`. Without
+     * `onChangeFill` the popover is the solid colour picker only.
+     */
+    fill?: CellFill | null;
+    /**
+     * Apply a pattern or gradient fill (Excel: Format Cells → Fill → Pattern /
+     * Fill Effects). Receives the full fill slice so cleared fields reset.
+     */
+    onChangeFill?(fill: CellFill): void;
     /**
      * Custom color selector component
      */
     ColorSelector?: ComponentType<ColorSelectorProps>;
 } & Pick<ComponentProps<typeof ColorSelector>, "userDefinedColors" | "onAddUserDefinedColor">;
-export declare const BackgroundColorSelector: ({ color, theme, onChange, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent, }: BackgroundColorSelectorProps) => React.JSX.Element;
+export declare const BackgroundColorSelector: ({ color, theme, onChange, fill, onChangeFill, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent, }: BackgroundColorSelectorProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=background-color-selector.d.ts.map

package/dist/esm/components/toolbar/background-color-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background-color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/background-color-selector.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,KAAK,4BAA4B,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC;AACF,eAAO,MAAM,uBAAuB,GAAI,wHAQrC,4BAA4B,sBAqC9B,CAAC"}
+{"version":3,"file":"background-color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/background-color-selector.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,kBAAkB,CAAC;AAE1B,KAAK,4BAA4B,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC;AACF,eAAO,MAAM,uBAAuB,GAAI,4IAUrC,4BAA4B,sBA+G9B,CAAC"}

package/dist/esm/components/toolbar/background-color-selector.js

@@ -1,28 +1,78 @@
 import { IoMdColorFill } from "@rowsncolumns/icons";
 import { Popover, PopoverContent, PopoverTrigger } from "@rowsncolumns/ui";
-import { IconButton } from "@rowsncolumns/ui";
+import { IconButton, Tabs, TabsContent, TabsList, TabsTrigger, } from "@rowsncolumns/ui";
 import React from "react";
 import { useState } from "react";
 import { useFocusSheet } from "../../atoms";
 import { defaultSpreadsheetTheme } from "../../config";
 import { getStringifiedColor } from "../../themes";
 import { ColorSelector } from "./color-selector";
-export const BackgroundColorSelector = ({ color = "transparent", theme = defaultSpreadsheetTheme, onChange, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent = ColorSelector, }) => {
+import { gradientToCss, GradientFillPicker, PatternFillPicker, } from "./fill-selectors";
+export const BackgroundColorSelector = ({ color = "transparent", theme = defaultSpreadsheetTheme, onChange, fill, onChangeFill, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent = ColorSelector, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const close = () => setIsOpen(false);
     const open = () => setIsOpen(true);
     const colorString = getStringifiedColor(color, theme);
     const focusSheet = useFocusSheet();
+    // The trigger underline previews the effective fill: gradient, then the
+    // pattern colour, then the solid colour.
+    const swatchStyle = fill?.gradient
+        ? {
+            borderBottom: "4px solid transparent",
+            borderImage: `${gradientToCss(fill.gradient)} 1`,
+        }
+        : {
+            borderBottom: `4px ${fill?.fillPattern &&
+                fill.fillPattern !== "none" &&
+                fill.foregroundColor
+                ? getStringifiedColor(fill.foregroundColor, theme)
+                : colorString} solid`,
+        };
+    const solidPicker = (React.createElement(ColorSelectorComponent, { color: color, onChange: (color) => {
+            // A solid pick replaces a gradient (Excel keeps them exclusive) and,
+            // with "No fill", clears the pattern too.
+            if (onChangeFill && (fill?.gradient || (!color && fill?.fillPattern))) {
+                onChangeFill({
+                    backgroundColor: color,
+                    fillPattern: color ? fill?.fillPattern ?? undefined : undefined,
+                    foregroundColor: color
+                        ? fill?.foregroundColor ?? undefined
+                        : undefined,
+                    gradient: undefined,
+                });
+            }
+            else {
+                onChange?.(color);
+            }
+            focusSheet?.();
+            close();
+        }, theme: theme, resetButtonTitle: "No fill", userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }));
+    const applyFill = (next) => {
+        onChangeFill?.(next);
+        focusSheet?.();
+    };
     return (React.createElement(Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
         React.createElement(PopoverTrigger, { asChild: true },
-            React.createElement(IconButton, { className: "text-base flex-row", style: {
-                    borderBottom: `4px ${colorString} solid`,
-                }, tooltip: "Fill color", onClick: open, disabled: disabled },
+            React.createElement(IconButton, { className: "text-base flex-row", style: swatchStyle, tooltip: "Fill color", "aria-label": "Fill color", onClick: open, disabled: disabled },
                 React.createElement(IoMdColorFill, null))),
-        React.createElement(PopoverContent, { align: "start" },
-            React.createElement(ColorSelectorComponent, { color: color, onChange: (color) => {
-                    onChange?.(color);
-                    focusSheet?.();
-                    close();
-                }, theme: theme, resetButtonTitle: "No fill", userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }))));
+        React.createElement(PopoverContent, { align: "start" }, onChangeFill ? (React.createElement(Tabs, { defaultValue: fill?.gradient
+                ? "gradient"
+                : fill?.fillPattern && fill.fillPattern !== "none"
+                    ? "pattern"
+                    : "solid" },
+            React.createElement(TabsList, { className: "grid-cols-3 mb-2" },
+                React.createElement(TabsTrigger, { value: "solid" }, "Solid"),
+                React.createElement(TabsTrigger, { value: "pattern" }, "Pattern"),
+                React.createElement(TabsTrigger, { value: "gradient" }, "Gradient")),
+            React.createElement(TabsContent, { value: "solid" }, solidPicker),
+            React.createElement(TabsContent, { value: "pattern" },
+                React.createElement(PatternFillPicker, { fill: {
+                        ...fill,
+                        backgroundColor: fill?.backgroundColor ?? color,
+                    }, theme: theme, onChangeFill: applyFill })),
+            React.createElement(TabsContent, { value: "gradient" },
+                React.createElement(GradientFillPicker, { fill: {
+                        ...fill,
+                        backgroundColor: fill?.backgroundColor ?? color,
+                    }, theme: theme, onChangeFill: applyFill })))) : (solidPicker))));
 };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CellFormat } from "../../types";
+import type { CellFormat, NamedCellStyle } from "../../types";
 import type { SpreadsheetTheme } from "../canvas-grid/typings";
 type WithCellFormat = (value: CellFormat) => void;
 type WithTypeValue<T extends keyof CellFormat> = (type: T, value: CellFormat[T]) => void;
@@ -8,6 +8,13 @@ export type CellStyleSelectorProps = {
     locale?: string;
     theme: SpreadsheetTheme;
     userDefinedStyles?: [string, CellFormat][];
+    /**
+     * Workbook named cell styles imported from `<cellStyles>` ("Heading 1",
+     * "Good", "Accent 1", …). Shown as a "Workbook styles" section ahead of
+     * the built-in gallery; hidden entries and the "Normal" base style are
+     * skipped, as is any entry whose xf resolved to no formatting.
+     */
+    namedCellStyles?: NamedCellStyle[] | null;
     selectedFormat?: CellFormat | null;
     onAddUserDefinedStyle?(name: string): void;
     onChangeFormatting: (...args: Parameters<WithCellFormat | WithTypeValue<keyof CellFormat>>) => void;
@@ -19,7 +26,13 @@ type StyleList = [
     format: CellFormat,
     style?: React.CSSProperties
 ];
+/** Named styles worth showing in the gallery (see `namedCellStyles` prop). */
+export declare const getGalleryNamedCellStyles: (namedCellStyles: NamedCellStyle[] | null | undefined) => Array<NamedCellStyle & {
+    format: CellFormat;
+}>;
+/** CSS preview of a named style's format for the gallery swatch. */
+export declare const getNamedCellStylePreview: (format: CellFormat | undefined, theme: SpreadsheetTheme) => React.CSSProperties;
 export declare const getCellStyles: (theme: SpreadsheetTheme, currencySymbol?: string) => Map<string, StyleList[]>;
-export declare const CellStyleSelector: React.MemoExoticComponent<({ currency, locale, theme, selectedFormat, canAddCustomStyle, onChangeFormatting, onClearFormatting, }: CellStyleSelectorProps) => React.JSX.Element>;
+export declare const CellStyleSelector: React.MemoExoticComponent<({ currency, locale, theme, selectedFormat, namedCellStyles, canAddCustomStyle, onChangeFormatting, onClearFormatting, }: CellStyleSelectorProps) => React.JSX.Element>;
 export {};
 //# sourceMappingURL=cell-style-selector.d.ts.map