@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,123 @@
+import type { CalculatorFunction } from "@rowsncolumns/common-types";
+import type { Direction } from "@rowsncolumns/grid";
+import type { OptionItem, ProseMirrorEditorProps, RichTextEditorAttribues, TextEditorRef, TextFormatRun } from "@rowsncolumns/ui";
+import React from "react";
+import type { CanvasGridProps } from "../canvas-grid/typings";
+export type CellInputProps = RichTextEditorAttribues & {
+    error?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    lineHeight?: number;
+    onSubmit?(value: string, textFormatRuns?: TextFormatRun[], direction?: Direction): void;
+    onChange: ProseMirrorEditorProps["onChange"];
+    onCancel?(e?: React.KeyboardEvent<HTMLDivElement>): void;
+    persistFocus?: boolean;
+    editorClassName?: string;
+    value: string;
+    textFormatRuns?: TextFormatRun[] | null;
+    formulaMode?: boolean;
+    defaultFontSizePoint?: number;
+    /**
+     * All calculator functions
+     */
+    functionDescriptions?: CalculatorFunction[] | null;
+    /**
+     * Customize suggestions dropdown
+     */
+    SuggestionsDropdown?: ProseMirrorEditorProps["SuggestionsDropdown"];
+    /**
+     * Get all table names
+     */
+    getTableNames?(): OptionItem[] | undefined;
+    /**
+     * Get names of all named range
+     */
+    getNamedRanges?(): OptionItem[] | undefined;
+    /**
+     * Get column names of a table
+     * @param tableName
+     */
+    getTableColumnNames?(tableName: string | undefined): OptionItem[] | undefined;
+    /**
+     * Get structured properties from cell
+     * @param tableName
+     */
+    getStructuredProperties?(sheetName: string | undefined, rowIndex: number, columnIndex: number): OptionItem[] | undefined;
+    /**
+     * Get mentions
+     */
+    getMentions?: CanvasGridProps["getMentions"];
+    /**
+     * Get function parameters
+     */
+    getFunctionParameterSuggestions?: CanvasGridProps["getFunctionParameterSuggestions"];
+    /**
+     * Predicate
+     */
+    shouldFetchFunctionParameters?: CanvasGridProps["shouldFetchFunctionParameters"];
+    /**
+     * Enable continuous cell selection mode during formula editing
+     */
+    enableContinuousSelection?: boolean;
+};
+export type CellInputRefAttribute = {
+    ref?: React.Ref<TextEditorRef>;
+};
+export declare const CellInput: React.NamedExoticComponent<RichTextEditorAttribues & {
+    error?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    lineHeight?: number;
+    onSubmit?(value: string, textFormatRuns?: TextFormatRun[], direction?: Direction): void;
+    onChange: ProseMirrorEditorProps["onChange"];
+    onCancel?(e?: React.KeyboardEvent<HTMLDivElement>): void;
+    persistFocus?: boolean;
+    editorClassName?: string;
+    value: string;
+    textFormatRuns?: TextFormatRun[] | null;
+    formulaMode?: boolean;
+    defaultFontSizePoint?: number;
+    /**
+     * All calculator functions
+     */
+    functionDescriptions?: CalculatorFunction[] | null;
+    /**
+     * Customize suggestions dropdown
+     */
+    SuggestionsDropdown?: ProseMirrorEditorProps["SuggestionsDropdown"];
+    /**
+     * Get all table names
+     */
+    getTableNames?(): OptionItem[] | undefined;
+    /**
+     * Get names of all named range
+     */
+    getNamedRanges?(): OptionItem[] | undefined;
+    /**
+     * Get column names of a table
+     * @param tableName
+     */
+    getTableColumnNames?(tableName: string | undefined): OptionItem[] | undefined;
+    /**
+     * Get structured properties from cell
+     * @param tableName
+     */
+    getStructuredProperties?(sheetName: string | undefined, rowIndex: number, columnIndex: number): OptionItem[] | undefined;
+    /**
+     * Get mentions
+     */
+    getMentions?: CanvasGridProps["getMentions"];
+    /**
+     * Get function parameters
+     */
+    getFunctionParameterSuggestions?: CanvasGridProps["getFunctionParameterSuggestions"];
+    /**
+     * Predicate
+     */
+    shouldFetchFunctionParameters?: CanvasGridProps["shouldFetchFunctionParameters"];
+    /**
+     * Enable continuous cell selection mode during formula editing
+     */
+    enableContinuousSelection?: boolean;
+} & CellInputRefAttribute>;
+//# sourceMappingURL=cell-input.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,63 @@
+import { cn, ProseMirrorEditor } from "@rowsncolumns/ui";
+import { isAFormula } from "@rowsncolumns/utils";
+import { useImperativeHandle } from "react";
+import React, { forwardRef, memo, useCallback, useMemo, useRef } from "react";
+import { useActiveEditor, useSetActiveEditor, } from "../../atoms/active-editor.atom";
+import { useSetFormulaSelectionState } from "../../atoms/formula-selection-state.atom";
+import { useTokenizer } from "../../atoms/sheet-context.atom";
+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 { 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, ...props }, forwardedRef) => {
+    const formulaMode = isAFormula(value);
+    const editorRef = useRef(null);
+    const isActiveEditor = editorRef.current === useActiveEditor();
+    const setActiveEditor = useSetActiveEditor();
+    const setFormulaState = useSetFormulaSelectionState();
+    // Show formula help dropdown
+    const showFormulaHelp = useShowFormulaHelpValue();
+    const onHideFormulaHelp = useOnHideFormulaHelp();
+    const onShowFormulaHelp = useOnShowFormulaHelp();
+    const tokenizer = useTokenizer();
+    const inputStyles = useMemo(() => ({
+        fontFamily: formulaMode ? FORMULA_FONT_CONFIG.fontFamily : fontFamily,
+        fontSize: formulaMode ? FORMULA_FONT_CONFIG.fontSize : fontSize,
+        lineHeight,
+        height: "100%",
+        flex: 1,
+    }), [formulaMode, fontFamily, fontSize, lineHeight]);
+    useImperativeHandle(forwardedRef, () => editorRef.current, [editorRef]);
+    // Reset active editor
+    const handleEditorTeardown = useCallback(() => {
+        setActiveEditor(undefined);
+    }, [setActiveEditor]);
+    // Handle focus
+    const handleFocus = useCallback((e) => {
+        onFocus?.(e);
+        if (editorRef.current) {
+            setActiveEditor(editorRef.current);
+        }
+    }, [onFocus, setActiveEditor]);
+    // Keydown handler
+    const handleSubmit = useCallback((newValue, textFormatRuns, e) => {
+        const direction = e && getDirectionFromKey(e.key, e.shiftKey);
+        // Submit value
+        onSubmit?.(newValue, textFormatRuns, direction);
+        // Reset active editor
+        setActiveEditor(undefined);
+    }, [onSubmit, setActiveEditor]);
+    const handleCancel = useCallback((e) => {
+        onCancel?.(e);
+        // Reset active editor
+        setActiveEditor(undefined);
+    }, [onCancel, setActiveEditor]);
+    // Handle formula state change
+    const handleFormulaStateChange = useCallback((canSelectCells, selectionMode, selectionIndex) => {
+        setFormulaState({ canSelectCells, selectionMode, selectionIndex });
+    }, [setFormulaState]);
+    return (React.createElement(StyledInputWrapper, { style: inputStyles, className: cn(className, error && "border-rnc-warning") },
+        React.createElement(ProseMirrorEditor, { ref: editorRef, className: cn("pl-[6px] min-h-full", editorClassName), dropdownStyles: dropdownStyles, formulaMode: formulaMode, value: value, disabled: disabled, onChange: onChange, onSubmit: handleSubmit, onCancel: handleCancel, onFocus: handleFocus, onBlur: onBlur, tokenizer: tokenizer, name: "formula", onFormulaStateChange: handleFormulaStateChange, showDropdown: isActiveEditor, isActive: isActiveEditor, functionDescriptions: functionDescriptions, onTeardown: handleEditorTeardown, persistFocus: persistFocus, showFormulaHelp: showFormulaHelp, onShowFormulaHelp: onShowFormulaHelp, onHideFormulaHelp: onHideFormulaHelp, editorZeroOutline: true, SuggestionsDropdown: SuggestionsDropdown, textFormatRuns: textFormatRuns, getMentions: getMentions, getStructuredProperties: getStructuredProperties, ...props })));
+}));
+CellInput.displayName = "CellInput";

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

@@ -0,0 +1,21 @@
+import type { CalculatorFunction } from "@rowsncolumns/common-types";
+import type { CellInterface } from "@rowsncolumns/grid";
+import React from "react";
+import type { CellInputProps } from "./cell-input";
+type FormulaBarInputProps = Omit<CellInputProps, "value" | "onChange"> & {
+    /**
+     * Active cell
+     */
+    activeCell?: CellInterface | null;
+    /**
+     * List of function descriptions that should appear in teh dropdown
+     */
+    functionDescriptions?: CalculatorFunction[];
+    /**
+     * ID of the active sheet
+     */
+    sheetId: number;
+};
+export declare const FormulaBarInput: React.MemoExoticComponent<({ activeCell, functionDescriptions, onKeyDown, sheetId, SuggestionsDropdown, editorClassName, ...props }: FormulaBarInputProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=formula-bar-cell-input.d.ts.map

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

@@ -0,0 +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;AAUlE,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,uBAiHxB,CAAC"}

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

@@ -0,0 +1,57 @@
+import { cn } from "@rowsncolumns/ui";
+import React, { memo, useCallback, useMemo, useRef } from "react";
+import { useCellInputContext } from "../../atoms/cell-input-context.atom";
+import { useEditingCellCoordinate } from "../../atoms/editing-cell.atom";
+import { useFormulabarEditorValue, useFormulaBarTextFormatRuns, useSetFormulaBarEditorInstance, } from "../../atoms/formula-bar-editor-value.atom";
+import { useMergeRefs } from "../../hooks/use-merge.refs";
+import { CellInput } from "./cell-input";
+export const FormulaBarInput = memo(({ activeCell, functionDescriptions, onKeyDown, sheetId, SuggestionsDropdown, editorClassName, ...props }) => {
+    const editorRef = useRef(null);
+    const [value] = useFormulabarEditorValue();
+    const [textFormatRuns] = useFormulaBarTextFormatRuns();
+    const setFormulaBarEditorInstance = useSetFormulaBarEditorInstance();
+    const mergedEditorRef = useMergeRefs(editorRef, setFormulaBarEditorInstance);
+    const editingCellCoordinate = useEditingCellCoordinate();
+    const isEditInProgress = Boolean(editingCellCoordinate);
+    const editingCell = editingCellCoordinate ?? activeCell;
+    const editingSheetId = editingCellCoordinate?.sheetId ?? sheetId;
+    const { makeEditable, getNextFocusableCell, submitEditor, cancelEditor, onEditorKeyDown, canEditCell, setEditorValue, getTableNames, getNamedRanges, getTableColumnNames, getStructuredProperties, getMentions, } = useCellInputContext();
+    const isProtected = useMemo(() => {
+        const canEdit = editingSheetId && editingCell
+            ? canEditCell?.(editingSheetId, editingCell)
+            : true;
+        return !canEdit;
+    }, [editingCell, editingSheetId, canEditCell]);
+    const handleChange = useCallback((value, textFormatRuns) => {
+        if (editingCell) {
+            // This will update formula bar editor value too
+            setEditorValue?.(value, textFormatRuns, editingSheetId, editingCell);
+        }
+    }, [setEditorValue, editingSheetId, editingCell]);
+    // Focus, show cell editor
+    const handleFocus = useCallback(() => {
+        if (editingCell && !isEditInProgress) {
+            makeEditable?.(sheetId, editingCell, undefined, { autoFocus: false });
+        }
+    }, [sheetId, editingCell, makeEditable, isEditInProgress]);
+    // User submits a value
+    const handleSubmit = useCallback((value, textFormatRuns, direction) => {
+        if (editingCell) {
+            submitEditor?.(value, textFormatRuns, editingSheetId, editingCell, getNextFocusableCell?.(editingSheetId, editingCell, direction));
+        }
+    }, [getNextFocusableCell, submitEditor, editingSheetId, editingCell]);
+    // Keydown event
+    const handleKeyDown = useCallback((e) => {
+        // Pass it on to main editor, for cell navigation
+        onEditorKeyDown?.(e);
+        onKeyDown?.(e);
+    }, [onEditorKeyDown, onKeyDown]);
+    return (React.createElement(CellInput, { ref: mergedEditorRef, value: value, onChange: handleChange, onFocus: handleFocus, onSubmit: handleSubmit, onCancel: cancelEditor, onKeyDown: handleKeyDown, disabled: isProtected, functionDescriptions: functionDescriptions, getNamedRanges: getNamedRanges, getTableNames: getTableNames, getTableColumnNames: getTableColumnNames, SuggestionsDropdown: SuggestionsDropdown, 
+        // Excel parity: the formula bar always renders plain-colored text —
+        // run color marks stay in the doc (and the in-cell editor) but must
+        // not paint here, where a light run color on the light bar background
+        // (e.g. a white banner title) reads as an empty formula bar. The
+        // `!important` class outranks the mark's inline `style="color: …"`.
+        editorClassName: cn("[&_span]:!text-current", editorClassName), textFormatRuns: textFormatRuns, getMentions: getMentions, getStructuredProperties: getStructuredProperties, enableContinuousSelection: false, ...props }));
+});
+FormulaBarInput.displayName = "FormulaBarInput";

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

@@ -0,0 +1,3 @@
+export * from "./cell-input";
+export * from "./formula-bar-cell-input";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-input/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from "./cell-input";
+export * from "./formula-bar-cell-input";

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

@@ -0,0 +1,6 @@
+import { Stack } from "@rowsncolumns/ui";
+import type { ComponentProps, CSSProperties } from "react";
+import React from "react";
+export declare const StyledInputWrapper: ({ className, ...props }: ComponentProps<typeof Stack>) => React.JSX.Element;
+export declare const dropdownStyles: CSSProperties;
+//# sourceMappingURL=style.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/cell-input/style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,kBAAkB,GAAI,yBAGhC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAQ9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAE5B,CAAC"}

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

@@ -0,0 +1,6 @@
+import { cn, Stack } from "@rowsncolumns/ui";
+import React from "react";
+export const StyledInputWrapper = ({ className, ...props }) => (React.createElement(Stack, { className: cn("m-0 box-border outline-none resize-none align-top bg-transparent whitespace-pre-wrap cursor-text flex-1 relative block font-system min-w-0", className), ...props }));
+export const dropdownStyles = {
+    left: 3,
+};

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

@@ -0,0 +1,25 @@
+import type { RendererProps } from "@rowsncolumns/grid";
+import React from "react";
+import type { BorderStyle } from "../../types";
+export type CellOverlayRendererProps = RendererProps & {
+    strokeTopStyle?: BorderStyle;
+    strokeBottomStyle?: BorderStyle;
+    strokeLeftStyle?: BorderStyle;
+    strokeRightStyle?: BorderStyle;
+    strokeDiagonalUpStyle?: BorderStyle;
+    strokeDiagonalDownStyle?: BorderStyle;
+    cellBackgroundColor: string;
+    strokeDoubleInsetWidth: number;
+};
+export type StrokeCellProps = Omit<CellOverlayRendererProps, "key" | "rowIndex" | "columnIndex">;
+/**
+ * Offset helps multiple borders to align properly
+ * @param width
+ */
+export declare const getOffsetFromWidth: (width: number) => number;
+/**
+ * Default CellRenderer
+ * @param props
+ */
+export declare const CellOverlayRenderer: (props: CellOverlayRendererProps) => React.JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-overlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,wBAAwB,GAAG,aAAa,GAAG;IACrD,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,qBAAqB,CAAC,EAAE,WAAW,CAAC;IACpC,uBAAuB,CAAC,EAAE,WAAW,CAAC;IACtC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,sBAAsB,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,wBAAwB,EACxB,KAAK,GAAG,UAAU,GAAG,aAAa,CACnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,WAE/C,CAAC;AA6MF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,6BA+ElE,CAAC"}

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

@@ -0,0 +1,155 @@
+import React, { memo } from "react";
+import { Shape } from "react-konva";
+import { DEFAULT_ARRAY } from "../../config";
+/**
+ * Offset helps multiple borders to align properly
+ * @param width
+ */
+export const getOffsetFromWidth = (width) => {
+    return width / 2 - 0.5;
+};
+/**
+ * Only used for strokes
+ */
+const CellOverlay = memo((props) => {
+    const { x, y, width, height, strokeDoubleInsetWidth, strokeTopColor, strokeRightColor, strokeBottomColor, strokeLeftColor, strokeDiagonalUpColor, strokeDiagonalDownColor, strokeTopDash = DEFAULT_ARRAY, strokeRightDash = DEFAULT_ARRAY, strokeBottomDash = DEFAULT_ARRAY, strokeLeftDash = DEFAULT_ARRAY, strokeDiagonalUpDash = DEFAULT_ARRAY, strokeDiagonalDownDash = DEFAULT_ARRAY, strokeTopWidth = 0, strokeRightWidth = 0, strokeBottomWidth = 0, strokeLeftWidth = 0, strokeDiagonalUpWidth = 0, strokeDiagonalDownWidth = 0, lineCap, strokeTopStyle, strokeBottomStyle, strokeLeftStyle, strokeRightStyle, cellBackgroundColor, } = props;
+    const userStroke = strokeTopColor ||
+        strokeRightColor ||
+        strokeBottomColor ||
+        strokeLeftColor ||
+        strokeDiagonalUpColor ||
+        strokeDiagonalDownColor;
+    if (!userStroke) {
+        return null;
+    }
+    return (React.createElement(Shape, { x: x, y: y, width: width, height: height, listening: false, perfectDrawEnabled: false, sceneFunc: (context, shape) => {
+            /* Top border */
+            if (strokeTopColor) {
+                context.beginPath();
+                context.moveTo(strokeLeftColor ? -getOffsetFromWidth(strokeLeftWidth) : 0, 0.5);
+                context.lineTo(shape.width() +
+                    (strokeRightColor ? getOffsetFromWidth(strokeRightWidth) + 1 : 1), 0.5);
+                context.setAttr("strokeStyle", strokeTopColor);
+                context.setAttr("lineWidth", strokeTopWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeTopDash);
+                context.stroke();
+            }
+            /* Bottom border */
+            if (strokeBottomColor) {
+                context.beginPath();
+                context.moveTo(strokeLeftColor ? -getOffsetFromWidth(strokeLeftWidth) : 0, shape.height() + 0.5);
+                context.lineTo(shape.width() +
+                    (strokeRightColor ? getOffsetFromWidth(strokeRightWidth) + 1 : 1), shape.height() + 0.5);
+                context.setAttr("lineWidth", strokeBottomWidth);
+                context.setAttr("strokeStyle", strokeBottomColor);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeBottomDash);
+                context.stroke();
+            }
+            /* Left border */
+            if (strokeLeftColor) {
+                context.beginPath();
+                context.moveTo(0.5, strokeTopColor ? -getOffsetFromWidth(strokeTopWidth) : 0);
+                context.lineTo(0.5, shape.height() +
+                    (strokeBottomColor
+                        ? getOffsetFromWidth(strokeBottomWidth) + 1
+                        : 1));
+                context.setAttr("strokeStyle", strokeLeftColor);
+                context.setAttr("lineWidth", strokeLeftWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeLeftDash);
+                context.stroke();
+            }
+            /* Right border */
+            if (strokeRightColor) {
+                context.beginPath();
+                context.moveTo(shape.width() + 0.5, strokeTopColor ? -getOffsetFromWidth(strokeTopWidth) : 0);
+                context.lineTo(shape.width() + 0.5, shape.height() +
+                    (strokeBottomColor
+                        ? getOffsetFromWidth(strokeBottomWidth) + 1
+                        : 1));
+                context.setAttr("strokeStyle", strokeRightColor);
+                context.setAttr("lineWidth", strokeRightWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeRightDash);
+                context.stroke();
+            }
+            // Double borders
+            if (strokeTopStyle === "double" ||
+                strokeRightStyle === "double" ||
+                strokeBottomStyle === "double" ||
+                strokeLeftStyle === "double") {
+                context.beginPath();
+                if (strokeTopStyle === "double") {
+                    context.beginPath();
+                    context.moveTo(0, 0.5);
+                    context.lineTo(shape.width() + 1, 0.5);
+                    context.setAttr("lineWidth", strokeDoubleInsetWidth);
+                    context.setAttr("strokeStyle", cellBackgroundColor);
+                    context.stroke();
+                }
+                if (strokeBottomStyle === "double") {
+                    context.moveTo(0, shape.height() + 0.5);
+                    context.lineTo(shape.width() + 1, shape.height() + 0.5);
+                    context.setAttr("lineWidth", strokeDoubleInsetWidth);
+                    context.setAttr("strokeStyle", cellBackgroundColor);
+                    context.stroke();
+                }
+                if (strokeLeftStyle === "double") {
+                    context.moveTo(0.5, 0);
+                    context.lineTo(0.5, shape.height() + 1);
+                    context.setAttr("lineWidth", strokeDoubleInsetWidth);
+                    context.setAttr("strokeStyle", cellBackgroundColor);
+                    context.stroke();
+                }
+                if (strokeRightStyle === "double") {
+                    context.moveTo(shape.width() + 0.5, 0);
+                    context.lineTo(shape.width() + 0.5, shape.height() + 1);
+                    context.setAttr("lineWidth", strokeDoubleInsetWidth);
+                    context.setAttr("strokeStyle", cellBackgroundColor);
+                    context.stroke();
+                }
+                context.closePath();
+            }
+            /* Diagonal: top-left to bottom-right (diagonalDown) */
+            if (strokeDiagonalDownColor) {
+                context.beginPath();
+                context.moveTo(0, 0);
+                context.lineTo(shape.width(), shape.height());
+                context.setAttr("strokeStyle", strokeDiagonalDownColor);
+                context.setAttr("lineWidth", strokeDiagonalDownWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeDiagonalDownDash);
+                context.stroke();
+            }
+            /* Diagonal: bottom-left to top-right (diagonalUp) */
+            if (strokeDiagonalUpColor) {
+                context.beginPath();
+                context.moveTo(0, shape.height());
+                context.lineTo(shape.width(), 0);
+                context.setAttr("strokeStyle", strokeDiagonalUpColor);
+                context.setAttr("lineWidth", strokeDiagonalUpWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeDiagonalUpDash);
+                context.stroke();
+            }
+        } }));
+});
+/**
+ * Default CellRenderer
+ * @param props
+ */
+export const CellOverlayRenderer = (props) => {
+    const { x, y, width, height, stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeLeftColor = stroke, strokeDiagonalUpColor, strokeDiagonalDownColor, strokeDash = DEFAULT_ARRAY, strokeTopDash = DEFAULT_ARRAY, strokeRightDash = DEFAULT_ARRAY, strokeBottomDash = DEFAULT_ARRAY, strokeLeftDash = DEFAULT_ARRAY, strokeDiagonalUpDash = DEFAULT_ARRAY, strokeDiagonalDownDash = DEFAULT_ARRAY, strokeWidth = 1, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, strokeDiagonalUpWidth = strokeWidth, strokeDiagonalDownWidth = strokeWidth, strokeTopStyle, strokeBottomStyle, strokeLeftStyle, strokeRightStyle, cellBackgroundColor, lineCap = "butt", key, strokeDoubleInsetWidth = 1, } = props;
+    const userStroke = strokeTopColor ||
+        strokeRightColor ||
+        strokeBottomColor ||
+        strokeLeftColor ||
+        strokeDiagonalUpColor ||
+        strokeDiagonalDownColor;
+    if (!userStroke)
+        return null;
+    return (React.createElement(CellOverlay, { key: key, x: x, y: y, strokeDoubleInsetWidth: strokeDoubleInsetWidth, width: width, height: height, strokeTopColor: strokeTopColor, strokeRightColor: strokeRightColor, strokeBottomColor: strokeBottomColor, strokeLeftColor: strokeLeftColor, strokeDiagonalUpColor: strokeDiagonalUpColor, strokeDiagonalDownColor: strokeDiagonalDownColor, strokeDash: strokeDash, strokeTopDash: strokeTopDash, strokeRightDash: strokeRightDash, strokeBottomDash: strokeBottomDash, strokeLeftDash: strokeLeftDash, strokeDiagonalUpDash: strokeDiagonalUpDash, strokeDiagonalDownDash: strokeDiagonalDownDash, strokeTopWidth: strokeTopWidth, strokeRightWidth: strokeRightWidth, strokeBottomWidth: strokeBottomWidth, strokeLeftWidth: strokeLeftWidth, strokeDiagonalUpWidth: strokeDiagonalUpWidth, strokeDiagonalDownWidth: strokeDiagonalDownWidth, lineCap: lineCap, strokeTopStyle: strokeTopStyle, strokeBottomStyle: strokeBottomStyle, strokeLeftStyle: strokeLeftStyle, strokeRightStyle: strokeRightStyle, cellBackgroundColor: cellBackgroundColor }));
+};
+CellOverlay.displayName = "CellOverlay";

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

@@ -0,0 +1,8 @@
+import type { StructuredResult } from "@rowsncolumns/common-types";
+import React from "react";
+import { Sparkline, type SparklineProps } from "./sparkline";
+import type { StructuredResultProps } from "./types";
+export declare const StructuredResultRenderer: <S extends StructuredResult>(props: StructuredResultProps<S>) => React.JSX.Element | null;
+export { Sparkline };
+export { type SparklineProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-structured/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,gBAAgB,EACjB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,eAAO,MAAM,wBAAwB,GAAI,CAAC,SAAS,gBAAgB,EACjE,OAAO,qBAAqB,CAAC,CAAC,CAAC,6BA2DhC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,OAAO,EAAE,KAAK,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Text } from "react-konva";
+import { Sparkline } from "./sparkline";
+export const StructuredResultRenderer = (props) => {
+    const { structuredValue, textX, textY, textWidth, textFill, textVerticalAlign, textAlign, textFontFamily, textFontStyle, textFontSize, textDecoration, textPadding, textWrap, textLineHeight, height, ...rest } = props;
+    if (structuredValue?.kind === "sparkline") {
+        return (React.createElement(Sparkline, { ...rest, height: height, ...structuredValue }));
+    }
+    const defaultStructuredStringValue = structuredValue?.formattedValue ??
+        structuredValue.title;
+    if (defaultStructuredStringValue) {
+        return (React.createElement(Text, { x: textX, y: textY, height: height, width: textWidth, text: defaultStructuredStringValue, fill: textFill, verticalAlign: textVerticalAlign, align: textAlign, fontFamily: textFontFamily, fontStyle: textFontStyle, fontSize: textFontSize, textDecoration: textDecoration, padding: textPadding, wrap: textWrap, lineHeight: textLineHeight, hitStrokeWidth: 0, perfectDrawEnabled: false }));
+    }
+    return null;
+};
+export { Sparkline };

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

@@ -0,0 +1,54 @@
+import type { SparkLineResultOptions } 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.
+ */
+export type SparklineSlot = {
+    /**
+     * Numeric value painted at this x slot, or `null` for an empty
+     * source cell rendered as a gap (`emptycells: "gap"`) or spanned
+     * over (`emptycells: "span"`).
+     */
+    value: number | null;
+    /**
+     * Ordinal of this value among the numeric data points in ORIGINAL
+     * (pre-RTL) order — `first`/`last` highlighting follows the data
+     * order, not the paint order. `-1` for empty/synthesized slots
+     * (gaps and zero-substituted cells), which never count as
+     * first/last.
+     */
+    dataIndex: number;
+};
+/**
+ * Resolve raw sparkline data into paintable x slots, applying the
+ * `emptycells` (displayEmptyCellsAs) and `rtl` (rightToLeft) options.
+ *
+ * - no `emptycells` option: empty cells are compacted out — the legacy
+ *   behavior, byte-identical for existing sparklines.
+ * - `"zero"`: empty cells become 0-valued slots.
+ * - `"gap"` / `"span"`: empty cells keep their x slot as `value: null`;
+ *   the painter breaks the line at gaps and draws through for span.
+ * - `rtl`: slots are painted right-to-left (data order is reversed).
+ */
+export declare const resolveSparklineSeries: (data: ReadonlyArray<unknown>, options?: SparkLineResultOptions) => SparklineSlot[];
+/**
+ * Resolve the vertical axis extents, mirroring Excel's x14 semantics:
+ * - `minaxistype`/`maxaxistype` `"custom"` → use the manual `min`/`max`
+ *   value.
+ * - A bare `min`/`max` with no axis type also counts as custom (that's
+ *   how Sheets' SPARKLINE options behave).
+ * - `"group"` has no meaning for a single cell (we have no group
+ *   context at paint time) and `"individual"` is the default — both
+ *   fall back to the data extents.
+ * - winloss always includes 0 in the range (the zero baseline).
+ */
+export declare const resolveSparklineExtents: (slots: ReadonlyArray<SparklineSlot>, options: SparkLineResultOptions | undefined, isWinLoss: boolean) => {
+    min: number;
+    max: number;
+};
+/**
+ * Clamp a value into the axis extents — values outside a manual
+ * min/max are drawn pinned at the axis edge, like Excel.
+ */
+export declare const clampToExtents: (value: number, min: number, max: number) => number;
+//# sourceMappingURL=sparkline-math.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline-math.d.ts","sourceRoot":"","sources":["../../../../components/cell-structured/sparkline-math.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEzE;;;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;;;;;;;;;;GAUG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,aAAa,CAAC,aAAa,CAAC,EACnC,SAAS,sBAAsB,GAAG,SAAS,EAC3C,WAAW,OAAO,KACjB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAyB5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GACzB,OAAO,MAAM,EACb,KAAK,MAAM,EACX,KAAK,MAAM,KACV,MAA6C,CAAC"}