@rowsncolumns/spreadsheet 10.6.5 → 10.7.0

package/dist/esm/components/cell-editor/index.d.ts

@@ -147,6 +147,12 @@ export type CellEditorProps = SharedEditorProps & {
      * Mention dropdown component
      */
     MentionDropdownItemComponent?: CanvasGridProps["MentionDropdownItemComponent"];
+    /**
+     * Excel's AutoComplete for cell values: the text entries of the edited
+     * cell's column block (read once per edit, on the first keystroke). Omit to
+     * turn AutoComplete off.
+     */
+    getAutoCompleteEntries?: () => string[];
 };
-export declare const CellEditor: React.MemoExoticComponent<({ value, effectiveValue, isNewValue, onChange, sheetId, editingSheetId, cell, position, format, locale, formulaLocale, scale, autoFocus, maxWidth, maxHeight, containerWidth, onSubmit, onCancel, getNextFocusableCell, dataValidation, getRangeValues, getRangeValuesAsync, horizontalAlignment, editingSheetName, address, isScrolling, showFormulaHelp, onHideFormulaHelp, onShowFormulaHelp, onKeyDown, tokenizer, defaultBackgroundColor, defaultTextColor, theme, functionDescriptions, getNamedRanges, getTableNames, getTableColumnNames, getStructuredProperties, onRequestCalculate, editorBorderColor, isPointerDevice, SuggestionsDropdown, stickyEditor, defaultFontSizePoint, textFormatRuns, getMentions, getFunctionParameterSuggestions, shouldFetchFunctionParameters, MentionTagComponent, MentionDropdownItemComponent, navigationMode, readOnly, onCopy, onPaste, onCut, onBlur, }: CellEditorProps) => React.JSX.Element>;
+export declare const CellEditor: React.MemoExoticComponent<({ value, effectiveValue, isNewValue, onChange, sheetId, editingSheetId, cell, position, format, locale, formulaLocale, scale, autoFocus, maxWidth, maxHeight, containerWidth, onSubmit, onCancel, getNextFocusableCell, dataValidation, getRangeValues, getRangeValuesAsync, horizontalAlignment, editingSheetName, address, isScrolling, showFormulaHelp, onHideFormulaHelp, onShowFormulaHelp, onKeyDown, tokenizer, defaultBackgroundColor, defaultTextColor, theme, functionDescriptions, getNamedRanges, getTableNames, getTableColumnNames, getStructuredProperties, onRequestCalculate, editorBorderColor, isPointerDevice, SuggestionsDropdown, stickyEditor, defaultFontSizePoint, textFormatRuns, getMentions, getFunctionParameterSuggestions, shouldFetchFunctionParameters, MentionTagComponent, MentionDropdownItemComponent, navigationMode, readOnly, onCopy, onPaste, onCut, onBlur, getAutoCompleteEntries, }: CellEditorProps) => React.JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/cell-editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-editor/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-editor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,KAAK,EACV,UAAU,EACV,sBAAsB,EAEtB,aAAa,EACd,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAEL,KAAK,aAAa,EAQnB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAyD,MAAM,OAAO,CAAC;AAkB9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAMlE,OAAO,KAAK,EACV,QAAQ,EACR,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,WAAW,EACZ,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAiBhF,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC3C;;OAEG;IACH,mBAAmB,CAAC,EAAE,eAAe,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,EAAE,GAAG,SAAS,CAAC;IACjE;;OAEG;IACH,mBAAmB,CAAC,EAAE,CACpB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,CAAC;IACxC;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,mBAAmB,CAAC,EAAE,sBAAsB,CAAC,qBAAqB,CAAC,CAAC;IACpE;;OAEG;IACH,iBAAiB,CAAC,IAAI,IAAI,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,IAAI,IAAI,CAAC;IAC3B;;OAEG;IACH,oBAAoB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC5C;;OAEG;IACH,cAAc,IAAI,UAAU,EAAE,GAAG,SAAS,CAAC;IAC3C;;OAEG;IACH,aAAa,IAAI,UAAU,EAAE,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,EAAE,GAAG,SAAS,CAAC;IAC7E;;;;;OAKG;IACH,uBAAuB,CACrB,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,UAAU,EAAE,GAAG,SAAS,CAAC;IAC5B;;OAEG;IACH,kBAAkB,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC1D;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IACxC;;OAEG;IACH,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C;;OAEG;IACH,+BAA+B,EAAE,eAAe,CAAC,iCAAiC,CAAC,CAAC;IACpF;;OAEG;IACH,6BAA6B,EAAE,eAAe,CAAC,+BAA+B,CAAC,CAAC;IAChF;;OAEG;IACH,mBAAmB,CAAC,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC7D;;OAEG;IACH,4BAA4B,CAAC,EAAE,eAAe,CAAC,8BAA8B,CAAC,CAAC;IAC/E;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,UAAU,85BA4DlB,eAAe,uBA8hBnB,CAAC"}

package/dist/esm/components/cell-editor/index.js

@@ -1,7 +1,9 @@
 import { ProseMirrorEditor } from "@rowsncolumns/ui";
 import { dataValidationOptionMatchesCellValue, getDataValidationListReference, getDefaultDateFormat, isAnArrowKey, isNil, lightenColor, normalizeColor, ssfFormat, } from "@rowsncolumns/utils";
 import React, { memo, useCallback, useEffect, useRef, useState } from "react";
-import { useSetCellEditorInstance } from "../../atoms";
+import { findAutoCompleteMatch } from "../../api/autocomplete";
+import { usePickList, useSetCellEditorInstance } from "../../atoms";
+import { useEnterKeyDirection } from "../../atoms/enter-key-direction.atom";
 import { useActiveEditor, useSetActiveEditor, } from "../../atoms/active-editor.atom";
 import { useFormulaModeValue } from "../../atoms/formula-mode.atom";
 import { useSetFormulaSelectionState } from "../../atoms/formula-selection-state.atom";
@@ -14,9 +16,9 @@ import { getStringifiedColor } from "../../themes";
 import { resolveCanvasTextAlign } from "../cell/alignment";
 import { CalendarPopup } from "./calendar-popup";
 import { FormulaResultPreview } from "./formula-result-preview";
-import { getDirectionFromKey, isFillSelectionCommit, shouldShowCalendarPopup, } from "./helpers";
+import { getDirectionFromKey, isArrayFormulaCommit, isFillSelectionCommit, shouldShowCalendarPopup, } from "./helpers";
 import { dropdownStyles, StyledAddress, StyledAddressContainer, StyledEditor, } from "./style";
-export const CellEditor = memo(({ value = "", effectiveValue, isNewValue, onChange, sheetId, editingSheetId, cell, position, format, locale, formulaLocale, scale = 1, autoFocus, maxWidth, maxHeight, containerWidth, onSubmit, onCancel, getNextFocusableCell, dataValidation, getRangeValues, getRangeValuesAsync, horizontalAlignment, editingSheetName, address, isScrolling, showFormulaHelp, onHideFormulaHelp, onShowFormulaHelp, onKeyDown, tokenizer, defaultBackgroundColor, defaultTextColor, theme, functionDescriptions, getNamedRanges, getTableNames, getTableColumnNames, getStructuredProperties, onRequestCalculate, editorBorderColor, isPointerDevice, SuggestionsDropdown, stickyEditor, defaultFontSizePoint, textFormatRuns, getMentions, getFunctionParameterSuggestions, shouldFetchFunctionParameters, MentionTagComponent, MentionDropdownItemComponent, navigationMode, readOnly = false, onCopy, onPaste, onCut, onBlur, }) => {
+export const CellEditor = memo(({ value = "", effectiveValue, isNewValue, onChange, sheetId, editingSheetId, cell, position, format, locale, formulaLocale, scale = 1, autoFocus, maxWidth, maxHeight, containerWidth, onSubmit, onCancel, getNextFocusableCell, dataValidation, getRangeValues, getRangeValuesAsync, horizontalAlignment, editingSheetName, address, isScrolling, showFormulaHelp, onHideFormulaHelp, onShowFormulaHelp, onKeyDown, tokenizer, defaultBackgroundColor, defaultTextColor, theme, functionDescriptions, getNamedRanges, getTableNames, getTableColumnNames, getStructuredProperties, onRequestCalculate, editorBorderColor, isPointerDevice, SuggestionsDropdown, stickyEditor, defaultFontSizePoint, textFormatRuns, getMentions, getFunctionParameterSuggestions, shouldFetchFunctionParameters, MentionTagComponent, MentionDropdownItemComponent, navigationMode, readOnly = false, onCopy, onPaste, onCut, onBlur, getAutoCompleteEntries, }) => {
     const editorBorderOutlineColor = editorBorderColor
         ? lightenColor(0.5, editorBorderColor)
         : undefined;
@@ -26,6 +28,7 @@ export const CellEditor = memo(({ value = "", effectiveValue, isNewValue, onChan
     const setCellEditorInstance = useSetCellEditorInstance();
     const mergedEditorRef = useMergeRefs(editorRef, setCellEditorInstance);
     const setActiveEditor = useSetActiveEditor();
+    const enterKeyDirection = useEnterKeyDirection();
     const setFormulaState = useSetFormulaSelectionState();
     const activeEditor = useActiveEditor();
     const isActiveEditor = editorRef.current === activeEditor;
@@ -122,25 +125,49 @@ export const CellEditor = memo(({ value = "", effectiveValue, isNewValue, onChan
         }
         onChange?.(newValue, textFormatRuns, editingSheetId, cell);
     }, [onChange, editingSheetId, cell]);
+    // The AutoComplete entry last written after the caret (see `getAutoComplete`).
+    const lastCompletionRef = useRef(undefined);
     // Submit handler
     const handleSubmit = useCallback((newValue, textFormatRuns, e) => {
         if (!cell || isNil(editingSheetId)) {
             return;
         }
+        // An accepted AutoComplete entry is committed as the column spells it
+        // ("ap" + Enter over "Apple" enters "Apple"), as Excel does.
+        const completion = lastCompletionRef.current;
+        lastCompletionRef.current = undefined;
+        const acceptsCompletion = completion !== undefined &&
+            newValue !== completion &&
+            newValue.toLowerCase() === completion.toLowerCase();
+        const submittedValue = acceptsCompletion ? completion : newValue;
+        const submittedRuns = acceptsCompletion ? undefined : textFormatRuns;
         // Ctrl+Enter commits into the whole selection and stays put (Excel); every other
         // commit key moves the active cell in its direction.
         const fillSelection = isFillSelectionCommit(e);
-        const direction = e && !fillSelection
-            ? getDirectionFromKey(e.key, e.shiftKey)
+        // Ctrl+Shift+Enter / ⇧⌘Return / ⌃⇧Return: a legacy array over the selection, in place.
+        const arrayFormula = isArrayFormulaCommit(e);
+        const direction = e && !fillSelection && !arrayFormula
+            ? getDirectionFromKey(e.key, e.shiftKey, enterKeyDirection)
             : undefined;
         const nextActiveCell = direction
             ? getNextFocusableCell?.(editingSheetId, cell, direction)
             : undefined;
         // Submit value
-        onSubmit?.(newValue, textFormatRuns, editingSheetId, cell, nextActiveCell, undefined, fillSelection ? { fillSelection: true } : undefined);
+        onSubmit?.(submittedValue, submittedRuns, editingSheetId, cell, nextActiveCell, undefined, arrayFormula
+            ? { arrayFormula: true }
+            : fillSelection
+                ? { fillSelection: true }
+                : undefined);
         // Reset active editor
         setActiveEditor(undefined);
-    }, [onSubmit, editingSheetId, cell, getNextFocusableCell, setActiveEditor]);
+    }, [
+        onSubmit,
+        editingSheetId,
+        cell,
+        getNextFocusableCell,
+        setActiveEditor,
+        enterKeyDirection,
+    ]);
     // A read-only view has no caret for an arrow to move: the arrow leaves
     // the view and moves the active cell, as it does with no editor open.
     // Routed through the submit path, which a read-only view turns into
@@ -158,8 +185,52 @@ export const CellEditor = memo(({ value = "", effectiveValue, isNewValue, onChan
     }, [readOnly, value, handleSubmit, onKeyDown]);
     // Prevent grid contextmenu from popping up
     const onContextMenu = useCallback((e) => e.stopPropagation(), []);
+    // AutoComplete for cell values: the column block's entries, read once per
+    // edited cell on the first keystroke. Not over a list validation (its own
+    // dropdown offers the entries) and never in formula mode.
+    const autoCompleteRef = useRef(null);
+    const editingKey = cell
+        ? `${editingSheetId ?? sheetId}:${cell.rowIndex}:${cell.columnIndex}`
+        : "";
+    const hasListValidation = dataValidation?.condition?.type === "ONE_OF_LIST" ||
+        dataValidation?.condition?.type === "ONE_OF_RANGE";
+    const getAutoComplete = useCallback((typed) => {
+        lastCompletionRef.current = undefined;
+        if (!getAutoCompleteEntries || readOnly || hasListValidation) {
+            return undefined;
+        }
+        if (autoCompleteRef.current?.key !== editingKey) {
+            autoCompleteRef.current = {
+                key: editingKey,
+                entries: getAutoCompleteEntries(),
+            };
+        }
+        const match = findAutoCompleteMatch(typed, autoCompleteRef.current.entries);
+        lastCompletionRef.current = match;
+        return match;
+    }, [getAutoCompleteEntries, readOnly, hasListValidation, editingKey]);
+    // Excel's Pick From Drop-down List (Alt+↓): the column's entries as this
+    // cell's dropdown, until the editor moves to another cell.
+    const [pickList, setPickList] = usePickList();
+    const pickListOptions = pickList &&
+        cell &&
+        pickList.sheetId === (editingSheetId ?? sheetId) &&
+        pickList.cell.rowIndex === cell.rowIndex &&
+        pickList.cell.columnIndex === cell.columnIndex
+        ? pickList.entries.map((title) => ({ title }))
+        : undefined;
+    useEffect(() => {
+        if (pickList && !pickListOptions) {
+            setPickList(null);
+        }
+    }, [pickList, pickListOptions, setPickList]);
+    const handleCancel = useCallback((e) => {
+        setPickList(null);
+        onCancel?.(e);
+    }, [onCancel, setPickList]);
     // Dropdown options
-    const [options, setOptions] = useState(undefined);
+    const [validationOptions, setOptions] = useState(undefined);
+    const options = validationOptions ?? pickListOptions;
     useEffect(() => {
         let isActive = true;
         const type = dataValidation?.condition?.type;
@@ -300,7 +371,7 @@ export const CellEditor = memo(({ value = "", effectiveValue, isNewValue, onChan
                     : "",
                 address)) : null,
             formulaMode && onRequestCalculate ? (React.createElement(FormulaResultPreview, { value: value, formulaLocale: formulaLocale, onRequestCalculate: onRequestCalculate })) : null)) : null,
-        React.createElement(ProseMirrorEditor, { ref: mergedEditorRef, formulaMode: formulaMode, autoFocus: autoFocus, value: value, isNewValue: isNewValue, onFocus: handleFocus, onBlur: onBlur, onChange: handleChange, onKeyDown: handleKeyDown, onSubmit: handleSubmit, onCancel: onCancel, disabled: readOnly, tokenizer: tokenizer, formulaLocale: formulaLocale, onFormulaStateChange: handleFormulaStateChange, name: "celleditor", showDropdown: isActiveEditor && !readOnly, isActive: isActiveEditor, dropdownStyles: dropdownStyles, options: readOnly ? undefined : options, isOptionSelected: options?.length && !readOnly ? isOptionSelected : undefined, functionDescriptions: functionDescriptions, getNamedRanges: getNamedRanges, getTableNames: getTableNames, getTableColumnNames: getTableColumnNames, showFormulaHelp: showFormulaHelp, onHideFormulaHelp: onHideFormulaHelp, onShowFormulaHelp: onShowFormulaHelp, SuggestionsDropdown: SuggestionsDropdown, stickyEditor: stickyEditor, textFormatRuns: textFormatRuns, resolveRunColor: resolveRunColor, getMentions: getMentions, getFunctionParameterSuggestions: getFunctionParameterSuggestions, shouldFetchFunctionParameters: shouldFetchFunctionParameters, MentionTagComponent: MentionTagComponent, MentionDropdownItemComponent: MentionDropdownItemComponent, getStructuredProperties: getStructuredProperties, navigationMode: navigationMode, onCopy: onCopy, onCut: onCut, onPaste: onPaste, cellFontFamily: formulaMode ? undefined : cellfontFamily ?? undefined }),
+        React.createElement(ProseMirrorEditor, { ref: mergedEditorRef, formulaMode: formulaMode, autoFocus: autoFocus, value: value, isNewValue: isNewValue, onFocus: handleFocus, onBlur: onBlur, onChange: handleChange, onKeyDown: handleKeyDown, onSubmit: handleSubmit, onCancel: handleCancel, disabled: readOnly, tokenizer: tokenizer, formulaLocale: formulaLocale, locale: locale, onFormulaStateChange: handleFormulaStateChange, name: "celleditor", showDropdown: isActiveEditor && !readOnly, isActive: isActiveEditor, dropdownStyles: dropdownStyles, options: readOnly ? undefined : options, isOptionSelected: options?.length && !readOnly ? isOptionSelected : undefined, functionDescriptions: functionDescriptions, getNamedRanges: getNamedRanges, getTableNames: getTableNames, getTableColumnNames: getTableColumnNames, showFormulaHelp: showFormulaHelp, onHideFormulaHelp: onHideFormulaHelp, onShowFormulaHelp: onShowFormulaHelp, SuggestionsDropdown: SuggestionsDropdown, stickyEditor: stickyEditor, textFormatRuns: textFormatRuns, resolveRunColor: resolveRunColor, getMentions: getMentions, getFunctionParameterSuggestions: getFunctionParameterSuggestions, shouldFetchFunctionParameters: shouldFetchFunctionParameters, MentionTagComponent: MentionTagComponent, MentionDropdownItemComponent: MentionDropdownItemComponent, getStructuredProperties: getStructuredProperties, navigationMode: navigationMode, onCopy: onCopy, onCut: onCut, onPaste: onPaste, cellFontFamily: formulaMode ? undefined : cellfontFamily ?? undefined, getAutoComplete: getAutoCompleteEntries ? getAutoComplete : undefined }),
         !formulaMode &&
             !readOnly &&
             isPointerDevice &&

package/dist/esm/components/cell-indicator/index.d.ts

@@ -0,0 +1,41 @@
+import type { Context as CanvasContext } from "konva/lib/Context";
+import React from "react";
+/**
+ * Excel's in-cell markers, painted at the current zoom (`scale`):
+ * - a note: red ◥ in the top-right corner;
+ * - a threaded comment: a purple speech-bubble tab in the top-right corner;
+ * - an error-checking flag: green ◤ in the top-left corner (formula errors, numbers stored as text);
+ * - "Circle Invalid Data": a red ellipse around a cell that fails its data validation.
+ *
+ * Excel does not mark a cell that fails data validation unless Data → Data Validation →
+ * Circle Invalid Data is on.
+ */
+type CornerProps = {
+    /** The cell's top-left corner on the canvas. */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    scale: number;
+};
+/** Red ◥ in the cell's top-right corner. */
+export declare const paintNoteIndicator: (context: Pick<CanvasContext, "beginPath" | "moveTo" | "lineTo" | "closePath" | "fill" | "setAttr">, { x, y, width, scale }: Omit<CornerProps, "height">) => void;
+/**
+ * Purple threaded-comment marker in the cell's top-right corner: a small speech bubble tucked in
+ * the corner, its tail pointing down-left into the cell.
+ */
+export declare const paintCommentIndicator: (context: Pick<CanvasContext, "beginPath" | "moveTo" | "lineTo" | "closePath" | "fill" | "setAttr">, { x, y, width, scale }: Omit<CornerProps, "height">) => void;
+/** Green ◤ in the cell's top-left corner. */
+export declare const paintErrorIndicator: (context: Pick<CanvasContext, "beginPath" | "moveTo" | "lineTo" | "closePath" | "fill" | "setAttr">, { x, y, scale }: Omit<CornerProps, "height" | "width">) => void;
+/** Red ellipse around the cell ("Circle Invalid Data"). */
+export declare const paintInvalidCircle: (context: Pick<CanvasContext, "beginPath" | "ellipse" | "stroke" | "setAttr">, { x, y, width, height, scale }: CornerProps) => void;
+export type CellIndicatorsProps = CornerProps & {
+    showNote?: boolean;
+    showComment?: boolean;
+    showErrorIndicator?: boolean;
+    circleInvalid?: boolean;
+};
+/** Every marker a cell carries, in one Konva shape. */
+export declare const CellIndicators: ({ x, y, width, height, scale, showNote, showComment, showErrorIndicator, circleInvalid, }: CellIndicatorsProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/cell-indicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-indicator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B;;;;;;;;;GASG;AAEH,KAAK,WAAW,GAAG;IACjB,gDAAgD;IAChD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,4CAA4C;AAC5C,eAAO,MAAM,kBAAkB,GAC7B,SAAS,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,EAClG,wBAAwB,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,SAWpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GAChC,SAAS,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,EAClG,wBAAwB,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,SAgBpD,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,mBAAmB,GAC9B,SAAS,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,EAClG,iBAAiB,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,OAAO,CAAC,SAUvD,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,kBAAkB,GAC7B,SAAS,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC,EAC5E,gCAAgC,WAAW,SAe5C,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,cAAc,GAAI,2FAU5B,mBAAmB,6BAyBrB,CAAC"}

package/dist/esm/components/cell-indicator/index.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { Shape } from "react-konva";
+import { COMMENT_COLOR, ERROR_COLOR, INDICATOR_SIZE, INVALID_COLOR, NOTE_COLOR, } from "../../config";
+/** Red ◥ in the cell's top-right corner. */
+export const paintNoteIndicator = (context, { x, y, width, scale }) => {
+    const size = INDICATOR_SIZE * scale;
+    const right = x + width;
+    context.beginPath();
+    context.setAttr("fillStyle", NOTE_COLOR);
+    context.moveTo(right - size, y);
+    context.lineTo(right, y);
+    context.lineTo(right, y + size);
+    context.closePath();
+    context.fill();
+};
+/**
+ * Purple threaded-comment marker in the cell's top-right corner: a small speech bubble tucked in
+ * the corner, its tail pointing down-left into the cell.
+ */
+export const paintCommentIndicator = (context, { x, y, width, scale }) => {
+    const size = INDICATOR_SIZE * scale;
+    const right = x + width;
+    const bubbleHeight = size * 0.75;
+    const tail = size * 0.35;
+    context.beginPath();
+    context.setAttr("fillStyle", COMMENT_COLOR);
+    context.moveTo(right - size, y);
+    context.lineTo(right, y);
+    context.lineTo(right, y + bubbleHeight);
+    context.lineTo(right - size + tail, y + bubbleHeight);
+    // Tail
+    context.lineTo(right - size, y + size);
+    context.closePath();
+    context.fill();
+};
+/** Green ◤ in the cell's top-left corner. */
+export const paintErrorIndicator = (context, { x, y, scale }) => {
+    const size = INDICATOR_SIZE * scale;
+    context.beginPath();
+    context.setAttr("fillStyle", ERROR_COLOR);
+    context.moveTo(x, y);
+    context.lineTo(x + size, y);
+    context.lineTo(x, y + size);
+    context.closePath();
+    context.fill();
+};
+/** Red ellipse around the cell ("Circle Invalid Data"). */
+export const paintInvalidCircle = (context, { x, y, width, height, scale }) => {
+    context.beginPath();
+    context.setAttr("strokeStyle", INVALID_COLOR);
+    context.setAttr("lineWidth", 1.5 * scale);
+    context.ellipse(x + width / 2, y + height / 2, width / 2 + 3 * scale, height / 2 + 2 * scale, 0, 0, Math.PI * 2);
+    context.stroke();
+};
+/** Every marker a cell carries, in one Konva shape. */
+export const CellIndicators = ({ x, y, width, height, scale, showNote, showComment, showErrorIndicator, circleInvalid, }) => {
+    if (!showNote && !showComment && !showErrorIndicator && !circleInvalid) {
+        return null;
+    }
+    return (React.createElement(Shape, { sceneFunc: (context) => {
+            // Inside the 1 px grid line at the cell's top / left edge.
+            const top = y + 1;
+            if (showErrorIndicator) {
+                paintErrorIndicator(context, { x: x + 1, y: top, scale });
+            }
+            if (showComment) {
+                paintCommentIndicator(context, { x, y: top, width, scale });
+            }
+            else if (showNote) {
+                paintNoteIndicator(context, { x, y: top, width, scale });
+            }
+            if (circleInvalid) {
+                paintInvalidCircle(context, { x, y, width, height, scale });
+            }
+        }, listening: false, perfectDrawEnabled: false }));
+};

package/dist/esm/components/cell-input/cell-input.d.ts

@@ -9,7 +9,11 @@ export type CellInputProps = RichTextEditorAttribues & {
     fontFamily?: string;
     fontSize?: number;
     lineHeight?: number;
-    onSubmit?(value: string, textFormatRuns?: TextFormatRun[], direction?: Direction): void;
+    /**
+     * `direction` is where the commit key moves the active cell: `null` for an Enter that stays put
+     * (`enterKeyDirection: "none"`), `undefined` for a commit without a key.
+     */
+    onSubmit?(value: string, textFormatRuns?: TextFormatRun[], direction?: Direction | null, e?: React.KeyboardEvent<HTMLDivElement>): void;
     onChange: ProseMirrorEditorProps["onChange"];
     onCancel?(e?: React.KeyboardEvent<HTMLDivElement>): void;
     persistFocus?: boolean;
@@ -75,7 +79,11 @@ export declare const CellInput: React.NamedExoticComponent<RichTextEditorAttribu
     fontFamily?: string;
     fontSize?: number;
     lineHeight?: number;
-    onSubmit?(value: string, textFormatRuns?: TextFormatRun[], direction?: Direction): void;
+    /**
+     * `direction` is where the commit key moves the active cell: `null` for an Enter that stays put
+     * (`enterKeyDirection: "none"`), `undefined` for a commit without a key.
+     */
+    onSubmit?(value: string, textFormatRuns?: TextFormatRun[], direction?: Direction | null, e?: React.KeyboardEvent<HTMLDivElement>): void;
     onChange: ProseMirrorEditorProps["onChange"];
     onCancel?(e?: React.KeyboardEvent<HTMLDivElement>): void;
     persistFocus?: boolean;

package/dist/esm/components/cell-input/cell-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell-input.d.ts","sourceRoot":"","sources":["../../../../components/cell-input/cell-input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"cell-input.d.ts","sourceRoot":"","sources":["../../../../components/cell-input/cell-input.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/cell-input/cell-input.js

@@ -8,6 +8,7 @@ import { useLocaleTokenizer, useTokenizer, } from "../../atoms/sheet-context.ato
 import { useOnHideFormulaHelp, useOnShowFormulaHelp, useShowFormulaHelpValue, } from "../../atoms/show-formula-help.atom";
 import { DEFAULT_CELL_INPUT_LINE_HEIGHT, DEFAULT_FONT_SIZE_PT, FORMULA_FONT_CONFIG, } from "../../config";
 import { pointToPixel } from "../../helpers";
+import { useEnterKeyDirection } from "../../atoms/enter-key-direction.atom";
 import { getDirectionFromKey } from "../cell-editor/helpers";
 import { dropdownStyles, StyledInputWrapper } from "./style";
 export const CellInput = memo(forwardRef(({ fontFamily, defaultFontSizePoint = DEFAULT_FONT_SIZE_PT, fontSize = pointToPixel(defaultFontSizePoint), lineHeight = DEFAULT_CELL_INPUT_LINE_HEIGHT, onSubmit, onChange, onCancel, onFocus, onBlur, value, disabled, functionDescriptions, className, editorClassName, persistFocus = true, error, SuggestionsDropdown, textFormatRuns, getMentions, getStructuredProperties, formulaLocale, ...props }, forwardedRef) => {
@@ -15,6 +16,7 @@ export const CellInput = memo(forwardRef(({ fontFamily, defaultFontSizePoint = D
     const editorRef = useRef(null);
     const isActiveEditor = editorRef.current === useActiveEditor();
     const setActiveEditor = useSetActiveEditor();
+    const enterKeyDirection = useEnterKeyDirection();
     const setFormulaState = useSetFormulaSelectionState();
     // Show formula help dropdown
     const showFormulaHelp = useShowFormulaHelpValue();
@@ -47,12 +49,12 @@ export const CellInput = memo(forwardRef(({ fontFamily, defaultFontSizePoint = D
     }, [onFocus, setActiveEditor]);
     // Keydown handler
     const handleSubmit = useCallback((newValue, textFormatRuns, e) => {
-        const direction = e && getDirectionFromKey(e.key, e.shiftKey);
+        const direction = e && getDirectionFromKey(e.key, e.shiftKey, enterKeyDirection);
         // Submit value
-        onSubmit?.(newValue, textFormatRuns, direction);
+        onSubmit?.(newValue, textFormatRuns, direction, e);
         // Reset active editor
         setActiveEditor(undefined);
-    }, [onSubmit, setActiveEditor]);
+    }, [onSubmit, setActiveEditor, enterKeyDirection]);
     const handleCancel = useCallback((e) => {
         onCancel?.(e);
         // Reset active editor

package/dist/esm/components/cell-input/formula-bar-cell-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formula-bar-cell-input.d.ts","sourceRoot":"","sources":["../../../../components/cell-input/formula-bar-cell-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAa,MAAM,oBAAoB,CAAC;AAGnE,OAAO,KAA6C,MAAM,OAAO,CAAC;AAalE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAClC;;OAEG;IACH,oBAAoB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC5C;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,eAAe,uIASvB,oBAAoB,uBAgLxB,CAAC"}
+{"version":3,"file":"formula-bar-cell-input.d.ts","sourceRoot":"","sources":["../../../../components/cell-input/formula-bar-cell-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAa,MAAM,oBAAoB,CAAC;AAGnE,OAAO,KAA6C,MAAM,OAAO,CAAC;AAclE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAClC;;OAEG;IACH,oBAAoB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC5C;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,eAAe,uIASvB,oBAAoB,uBAwLxB,CAAC"}

package/dist/esm/components/cell-input/formula-bar-cell-input.js

@@ -6,6 +6,7 @@ import { useEditingCellCoordinate } from "../../atoms/editing-cell.atom";
 import { useFormulaLocale } from "../../atoms/sheet-context.atom";
 import { useCellEditorInstance, useFormulabarEditorValue, useFormulaBarTextFormatRuns, useSetFormulaBarEditorInstance, } from "../../atoms/formula-bar-editor-value.atom";
 import { useMergeRefs } from "../../hooks/use-merge.refs";
+import { isArrayFormulaCommit } from "../cell-editor/helpers";
 import { CellInput } from "./cell-input";
 export const FormulaBarInput = memo(({ activeCell, functionDescriptions, onKeyDown, sheetId, SuggestionsDropdown, editorClassName, ...props }) => {
     const editorRef = useRef(null);
@@ -76,9 +77,15 @@ export const FormulaBarInput = memo(({ activeCell, functionDescriptions, onKeyDo
         }
     }, [sheetId, editingCell, makeEditable, isEditInProgress]);
     // User submits a value
-    const handleSubmit = useCallback((value, textFormatRuns, direction) => {
+    const handleSubmit = useCallback((value, textFormatRuns, direction, e) => {
         if (editingCell) {
-            submitEditor?.(value, textFormatRuns, editingSheetId, editingCell, getNextFocusableCell?.(editingSheetId, editingCell, direction));
+            // Ctrl+Shift+Enter / ⇧⌘Return from the bar enters an array, in place (Excel).
+            const arrayFormula = isArrayFormulaCommit(e);
+            submitEditor?.(value, textFormatRuns, editingSheetId, editingCell, 
+            // `null`: an Enter that commits in place ("After pressing Enter, move selection" off).
+            arrayFormula || direction === null
+                ? undefined
+                : getNextFocusableCell?.(editingSheetId, editingCell, direction), undefined, arrayFormula ? { arrayFormula: true } : undefined);
         }
         returnFocusToSheet();
     }, [

package/dist/esm/components/cell-structured/sparkline-math.d.ts

@@ -1,4 +1,4 @@
-import type { CellInterface, SparkLineResult, SparkLineResultOptions, StructuredResult } from "@rowsncolumns/common-types";
+import type { CellInterface, ColorIndex, SparkLineResult, SparkLineResultOptions, StructuredResult } from "@rowsncolumns/common-types";
 /**
  * Pure geometry/series helpers for the in-cell sparkline painter.
  * Kept free of canvas/react imports so the math is unit-testable.
@@ -74,4 +74,30 @@ export declare const sparklineGroupAxisFor: (sparkline: SparkLineResult, getGrou
  * min/max are drawn pinned at the axis edge, like Excel.
  */
 export declare const clampToExtents: (value: number, min: number, max: number) => number;
+/** The colours a sparkline paints with where its options carry none. */
+export type SparklineDefaultColors = {
+    series: string;
+    negative: string;
+    markers: string;
+    high: string;
+    low: string;
+    first: string;
+    last: string;
+};
+/** A theme slot and Excel tint, as `<x14:color* theme="N" tint="…"/>` writes it. */
+export type SparklineThemeColor = {
+    theme: ColorIndex;
+    tint?: number;
+};
+/**
+ * Excel's Sparkline Style 1, what Excel gives every new sparkline group: Accent 1 darker 50% for the
+ * series and markers, Accent 2 for negative points, Accent 1 for high/low, Accent 1 lighter 40% for
+ * first/last. Theme references, so they resolve through the workbook's theme.
+ */
+export declare const EXCEL_DEFAULT_SPARKLINE_STYLE: Record<keyof SparklineDefaultColors, SparklineThemeColor>;
+/** Style 1 under the Office 2013–2022 theme (Accent 1 #4472C4, Accent 2 #ED7D31): the painter's
+ * fallback when no theme resolves it. */
+export declare const OFFICE_DEFAULT_SPARKLINE_COLORS: SparklineDefaultColors;
+/** Excel's default sparkline colours resolved through a theme (`resolve` maps a theme colour to CSS). */
+export declare const resolveDefaultSparklineColors: (resolve: (color: SparklineThemeColor) => string | undefined) => SparklineDefaultColors;
 //# sourceMappingURL=sparkline-math.d.ts.map

package/dist/esm/components/cell-structured/sparkline-math.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline-math.d.ts","sourceRoot":"","sources":["../../../../components/cell-structured/sparkline-math.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,4BAA4B,CAAC;AAEpC;;;GAGG;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;OAIG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAKF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB,GACjC,MAAM,aAAa,CAAC,OAAO,CAAC,EAC5B,UAAU,sBAAsB,KAC/B,aAAa,EA0Bf,CAAC;AAEF,gGAAgG;AAChG,MAAM,MAAM,oBAAoB,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,aAAa,CAAC,aAAa,CAAC,EACnC,SAAS,sBAAsB,GAAG,SAAS,EAC3C,WAAW,OAAO,EAClB,QAAQ,oBAAoB,KAC3B;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CA2B5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,GACpC,YAAY,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,EACjD,SAAS,sBAAsB,GAAG,SAAS,EAC3C,WAAW,OAAO,KACjB,oBAAoB,GAAG,SAgBzB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,WAAW,eAAe,EAC1B,UAAU,MAAM;IAAE,OAAO,EAAE,aAAa,CAAC;QAAE,IAAI,EAAE,aAAa,CAAA;KAAE,CAAC,CAAA;CAAE,GAAG,SAAS,EAC/E,oBAAoB,CAAC,IAAI,EAAE,aAAa,KAAK,gBAAgB,GAAG,SAAS,GAAG,IAAI,KAC/E,oBAAoB,GAAG,SAmBzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GACzB,OAAO,MAAM,EACb,KAAK,MAAM,EACX,KAAK,MAAM,KACV,MAA6C,CAAC"}
+{"version":3,"file":"sparkline-math.d.ts","sourceRoot":"","sources":["../../../../components/cell-structured/sparkline-math.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,4BAA4B,CAAC;AAEpC;;;GAGG;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;OAIG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAKF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB,GACjC,MAAM,aAAa,CAAC,OAAO,CAAC,EAC5B,UAAU,sBAAsB,KAC/B,aAAa,EA0Bf,CAAC;AAEF,gGAAgG;AAChG,MAAM,MAAM,oBAAoB,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,aAAa,CAAC,aAAa,CAAC,EACnC,SAAS,sBAAsB,GAAG,SAAS,EAC3C,WAAW,OAAO,EAClB,QAAQ,oBAAoB,KAC3B;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CA2B5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,GACpC,YAAY,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,EACjD,SAAS,sBAAsB,GAAG,SAAS,EAC3C,WAAW,OAAO,KACjB,oBAAoB,GAAG,SAgBzB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,WAAW,eAAe,EAC1B,UAAU,MAAM;IAAE,OAAO,EAAE,aAAa,CAAC;QAAE,IAAI,EAAE,aAAa,CAAA;KAAE,CAAC,CAAA;CAAE,GAAG,SAAS,EAC/E,oBAAoB,CAAC,IAAI,EAAE,aAAa,KAAK,gBAAgB,GAAG,SAAS,GAAG,IAAI,KAC/E,oBAAoB,GAAG,SAmBzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GACzB,OAAO,MAAM,EACb,KAAK,MAAM,EACX,KAAK,MAAM,KACV,MAA6C,CAAC;AAEjD,wEAAwE;AACxE,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oFAAoF;AACpF,MAAM,MAAM,mBAAmB,GAAG;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,6BAA6B,EAAE,MAAM,CAChD,MAAM,sBAAsB,EAC5B,mBAAmB,CASpB,CAAC;AAEF;yCACyC;AACzC,eAAO,MAAM,+BAA+B,EAAE,sBAQ7C,CAAC;AAEF,yGAAyG;AACzG,eAAO,MAAM,6BAA6B,GACxC,SAAS,CAAC,KAAK,EAAE,mBAAmB,KAAK,MAAM,GAAG,SAAS,KAC1D,sBAOF,CAAC"}

package/dist/esm/components/cell-structured/sparkline-math.js

@@ -132,3 +132,38 @@ export const sparklineGroupAxisFor = (sparkline, getGroup, getStructuredValue) =
  * min/max are drawn pinned at the axis edge, like Excel.
  */
 export const clampToExtents = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+ * Excel's Sparkline Style 1, what Excel gives every new sparkline group: Accent 1 darker 50% for the
+ * series and markers, Accent 2 for negative points, Accent 1 for high/low, Accent 1 lighter 40% for
+ * first/last. Theme references, so they resolve through the workbook's theme.
+ */
+export const EXCEL_DEFAULT_SPARKLINE_STYLE = {
+    series: { theme: 4, tint: -0.499984740745262 },
+    negative: { theme: 5 },
+    markers: { theme: 4, tint: -0.499984740745262 },
+    high: { theme: 4 },
+    low: { theme: 4 },
+    first: { theme: 4, tint: 0.39997558519241921 },
+    last: { theme: 4, tint: 0.39997558519241921 },
+};
+/** Style 1 under the Office 2013–2022 theme (Accent 1 #4472C4, Accent 2 #ED7D31): the painter's
+ * fallback when no theme resolves it. */
+export const OFFICE_DEFAULT_SPARKLINE_COLORS = {
+    series: "#203864",
+    negative: "#ED7D31",
+    markers: "#203864",
+    high: "#4472C4",
+    low: "#4472C4",
+    first: "#8FAADC",
+    last: "#8FAADC",
+};
+/** Excel's default sparkline colours resolved through a theme (`resolve` maps a theme colour to CSS). */
+export const resolveDefaultSparklineColors = (resolve) => {
+    const out = { ...OFFICE_DEFAULT_SPARKLINE_COLORS };
+    for (const key of Object.keys(EXCEL_DEFAULT_SPARKLINE_STYLE)) {
+        const color = resolve(EXCEL_DEFAULT_SPARKLINE_STYLE[key]);
+        if (color)
+            out[key] = color;
+    }
+    return out;
+};

package/dist/esm/components/cell-structured/sparkline.d.ts

@@ -2,5 +2,5 @@ import type { SparkLineResult } from "@rowsncolumns/common-types";
 import React from "react";
 import type { StructuredResultProps } from "./types";
 export type SparklineProps = StructuredResultProps & SparkLineResult;
-export declare const Sparkline: ({ x, y, width, height, data, options, color, sparklineGroupAxis, }: SparklineProps) => React.JSX.Element;
+export declare const Sparkline: ({ x, y, width, height, data, options, sparklineGroupAxis, sparklineDefaultColors: defaultColors, }: SparklineProps) => React.JSX.Element;
 //# sourceMappingURL=sparkline.d.ts.map

package/dist/esm/components/cell-structured/sparkline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline.d.ts","sourceRoot":"","sources":["../../../../components/cell-structured/sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG,eAAe,CAAC;AAoBrE,eAAO,MAAM,SAAS,GAAI,oEASvB,cAAc,sBA8QhB,CAAC"}
+{"version":3,"file":"sparkline.d.ts","sourceRoot":"","sources":["../../../../components/cell-structured/sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG,eAAe,CAAC;AAoBrE,eAAO,MAAM,SAAS,GAAI,oGASvB,cAAc,sBA4NhB,CAAC"}