@rowsncolumns/spreadsheet 10.2.73 → 10.2.75

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

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

@@ -1 +1 @@
-{"version":3,"file":"cell-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/cell-style-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,OAAO,KAAK,EAAE,UAAU,EAAuB,MAAM,aAAa,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,KAAK,cAAc,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAClD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,UAAU,IAAI,CAC/C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KACjB,IAAI,CAAC;AAEV,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC;IAC3C,cAAc,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACnC,qBAAqB,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAClB,GAAG,IAAI,EAAE,UAAU,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,UAAU,CAAC,CAAC,KAClE,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,UAAU;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,gBAAgB,EACvB,iBAAiB,MAAM,6BAgYxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qIASzB,sBAAsB,uBAwM1B,CAAC"}
+{"version":3,"file":"cell-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/cell-style-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,OAAO,KAAK,EACV,UAAU,EAEV,cAAc,EAEf,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,KAAK,cAAc,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAClD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,UAAU,IAAI,CAC/C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KACjB,IAAI,CAAC;AAEV,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC;IAC3C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACnC,qBAAqB,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAClB,GAAG,IAAI,EAAE,UAAU,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,UAAU,CAAC,CAAC,KAClE,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,UAAU;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,yBAAyB,GACpC,iBAAiB,cAAc,EAAE,GAAG,IAAI,GAAG,SAAS,KACnD,KAAK,CAAC,cAAc,GAAG;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,CAQ7C,CAAC;AAcJ,oEAAoE;AACpE,eAAO,MAAM,wBAAwB,GACnC,QAAQ,UAAU,GAAG,SAAS,EAC9B,OAAO,gBAAgB,KACtB,KAAK,CAAC,aAqBR,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,gBAAgB,EACvB,iBAAiB,MAAM,6BAgYxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,sJAUzB,sBAAsB,uBAsO1B,CAAC"}

package/dist/esm/components/toolbar/cell-style-selector.js

@@ -8,6 +8,45 @@ import React, { memo, useMemo, useRef } from "react";
 import { useFocusSheet } from "../../atoms";
 import { getCurrencySymbol } from "../../helpers";
 import { getStringifiedColor } from "../../themes";
+/** Named styles worth showing in the gallery (see `namedCellStyles` prop). */
+export const getGalleryNamedCellStyles = (namedCellStyles) => (namedCellStyles ?? []).filter((style) => !style.hidden &&
+    style.builtinId !== 0 &&
+    style.name !== "Normal" &&
+    !!style.format &&
+    Object.keys(style.format).length > 0);
+const previewBorder = (border, theme) => border
+    ? `${border.width ?? 1}px ${border.style === "double" ? "double" : "solid"} ${getStringifiedColor(border.color, theme)}`
+    : undefined;
+/** CSS preview of a named style's format for the gallery swatch. */
+export const getNamedCellStylePreview = (format, theme) => {
+    if (!format)
+        return {};
+    const style = {};
+    if (format.backgroundColor) {
+        style.backgroundColor = getStringifiedColor(format.backgroundColor, theme);
+    }
+    const text = format.textFormat;
+    if (text?.color)
+        style.color = getStringifiedColor(text.color, theme);
+    if (text?.bold)
+        style.fontWeight = "bold";
+    if (text?.italic)
+        style.fontStyle = "italic";
+    if (text?.underline)
+        style.textDecoration = "underline";
+    if (text?.fontSize)
+        style.fontSize = text.fontSize;
+    if (text?.fontFamily)
+        style.fontFamily = text.fontFamily;
+    const borders = format.borders;
+    if (borders) {
+        style.borderTop = previewBorder(borders.top, theme);
+        style.borderBottom = previewBorder(borders.bottom, theme);
+        style.borderLeft = previewBorder(borders.left, theme);
+        style.borderRight = previewBorder(borders.right, theme);
+    }
+    return style;
+};
 export const getCellStyles = (theme, currencySymbol) => {
     return new Map([
         [
@@ -383,13 +422,14 @@ export const getCellStyles = (theme, currencySymbol) => {
         ],
     ]);
 };
-export const CellStyleSelector = memo(({ currency, locale, theme, selectedFormat, canAddCustomStyle = false, onChangeFormatting, onClearFormatting, }) => {
+export const CellStyleSelector = memo(({ currency, locale, theme, selectedFormat, namedCellStyles, canAddCustomStyle = false, onChangeFormatting, onClearFormatting, }) => {
     const colorIndexes = [4, 5, 6, 7, 8, 9];
     const colorTints = [0.8, 0.6, 0.4, 0];
     const currencySymbol = getCurrencySymbol(locale, currency);
     const shouldFocusSheetRef = useRef(true);
     const focusSheet = useFocusSheet();
     const cellStyles = useMemo(() => [...getCellStyles(theme, currencySymbol).entries()], [theme, currencySymbol]);
+    const workbookStyles = useMemo(() => getGalleryNamedCellStyles(namedCellStyles), [namedCellStyles]);
     // Number formats
     const numberFormats = [
         [
@@ -434,7 +474,7 @@ export const CellStyleSelector = memo(({ currency, locale, theme, selectedFormat
     const gridClass = "grid grid-cols-3 md:grid-cols-6 gap-1 pb-1";
     return (React.createElement(DropdownMenu, { modal: false },
         React.createElement(DropdownMenuTrigger, { asChild: true },
-            React.createElement(IconButton, { size: "xl", tooltip: "Cell styles", className: "gap-1" },
+            React.createElement(IconButton, { size: "xl", tooltip: "Cell styles", "aria-label": "Cell styles", className: "gap-1" },
                 React.createElement(MdBrush, null),
                 React.createElement("div", { className: "text-xs" }, "Cell styles"),
                 React.createElement(MdOutlineArrowDropDown, null))),
@@ -448,6 +488,10 @@ export const CellStyleSelector = memo(({ currency, locale, theme, selectedFormat
                     shouldFocusSheetRef.current = false;
                 } },
                 React.createElement("div", { className: "max-w-dropdown md:min-w-[400px] p-2 pt-0" },
+                    workbookStyles.length ? (React.createElement("div", null,
+                        React.createElement("div", { className: headingClass }, "Workbook styles"),
+                        React.createElement(Separator, { className: "mb-2" }),
+                        React.createElement("div", { className: gridClass }, workbookStyles.map((namedStyle) => (React.createElement(DropdownMenuItem, { onClick: () => onChangeFormatting(namedStyle.format), className: hoverClass, key: `${namedStyle.name}-${namedStyle.xfId}`, style: getNamedCellStylePreview(namedStyle.format, theme) }, namedStyle.name)))))) : null,
                     cellStyles.map(([category, cellStyleList]) => {
                         return (React.createElement("div", { key: category },
                             React.createElement("div", { className: headingClass }, category),

package/dist/esm/components/toolbar/fill-selectors.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import type { CellFormat, FillPattern, GradientFill } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+/** The fill-related slice of a cell format the fill popover authors. */
+export type CellFill = Pick<CellFormat, "backgroundColor" | "fillPattern" | "foregroundColor" | "gradient">;
+/** Excel's Format Cells → Fill → Pattern Style menu, in Excel's order. */
+export declare const FILL_PATTERN_OPTIONS: ReadonlyArray<{
+    pattern: FillPattern;
+    label: string;
+}>;
+/**
+ * Excel's Fill Effects → Shading styles. `degree` follows OOXML
+ * `<gradientFill degree>`: 0 runs left → right, 90 top → bottom.
+ */
+export declare const GRADIENT_PRESETS: ReadonlyArray<{
+    label: string;
+    gradient: Omit<GradientFill, "stops">;
+}>;
+/** Two-stop gradient from a preset and two colours. */
+export declare const buildGradientFill: (preset: Omit<GradientFill, "stops">, color1: string, color2: string) => GradientFill;
+/**
+ * CSS preview of a gradient fill. OOXML measures the linear angle from the
+ * left→right axis; CSS from the bottom→top axis, so CSS = degree + 90.
+ */
+export declare const gradientToCss: (gradient: GradientFill) => string;
+export type PatternFillPickerProps = {
+    fill?: CellFill | null;
+    theme: SpreadsheetTheme;
+    onChangeFill(fill: CellFill): void;
+};
+/**
+ * Pattern fill authoring (Excel: Format Cells → Fill → Pattern Color /
+ * Pattern Style). The pattern paints in `foregroundColor` over the solid
+ * `backgroundColor`; a gradient on the cell is cleared, as Excel treats the
+ * two as exclusive.
+ */
+export declare const PatternFillPicker: ({ fill, theme, onChangeFill, }: PatternFillPickerProps) => React.JSX.Element;
+export type GradientFillPickerProps = {
+    fill?: CellFill | null;
+    theme: SpreadsheetTheme;
+    onChangeFill(fill: CellFill): void;
+};
+/**
+ * Gradient fill authoring (Excel: Fill Effects → Gradient, two colours +
+ * shading style). Picking a style applies immediately with the two colours;
+ * changing a colour re-applies when the cell already has a gradient.
+ */
+export declare const GradientFillPicker: ({ fill, theme, onChangeFill, }: GradientFillPickerProps) => React.JSX.Element;
+//# sourceMappingURL=fill-selectors.d.ts.map

package/dist/esm/components/toolbar/fill-selectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill-selectors.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/fill-selectors.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,wEAAwE;AACxE,MAAM,MAAM,QAAQ,GAAG,IAAI,CACzB,UAAU,EACV,iBAAiB,GAAG,aAAa,GAAG,iBAAiB,GAAG,UAAU,CACnE,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,oBAAoB,EAAE,aAAa,CAAC;IAC/C,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAkBA,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;CACvC,CASA,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,EACnC,QAAQ,MAAM,EACd,QAAQ,MAAM,KACb,YAMD,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,UAAU,YAAY,KAAG,MAUtD,CAAC;AAqCF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;CACpC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,gCAI/B,sBAAsB,sBA+ExB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;CACpC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,gCAIhC,uBAAuB,sBA8FzB,CAAC"}