@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/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/cjs/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/cjs/components/cell-structured/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sparkline = exports.StructuredResultRenderer = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var react_konva_1 = require("react-konva");
+var sparkline_1 = require("./sparkline");
+Object.defineProperty(exports, "Sparkline", { enumerable: true, get: function () { return sparkline_1.Sparkline; } });
+var StructuredResultRenderer = function (props) {
+    var _a;
+    var structuredValue = props.structuredValue, textX = props.textX, textY = props.textY, textWidth = props.textWidth, textFill = props.textFill, textVerticalAlign = props.textVerticalAlign, textAlign = props.textAlign, textFontFamily = props.textFontFamily, textFontStyle = props.textFontStyle, textFontSize = props.textFontSize, textDecoration = props.textDecoration, textPadding = props.textPadding, textWrap = props.textWrap, textLineHeight = props.textLineHeight, height = props.height, rest = tslib_1.__rest(props, ["structuredValue", "textX", "textY", "textWidth", "textFill", "textVerticalAlign", "textAlign", "textFontFamily", "textFontStyle", "textFontSize", "textDecoration", "textPadding", "textWrap", "textLineHeight", "height"]);
+    if ((structuredValue === null || structuredValue === void 0 ? void 0 : structuredValue.kind) === "sparkline") {
+        return (react_1.default.createElement(sparkline_1.Sparkline, tslib_1.__assign({}, rest, { height: height }, structuredValue)));
+    }
+    var defaultStructuredStringValue = (_a = structuredValue === null || structuredValue === void 0 ? void 0 : structuredValue.formattedValue) !== null && _a !== void 0 ? _a : structuredValue.title;
+    if (defaultStructuredStringValue) {
+        return (react_1.default.createElement(react_konva_1.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;
+};
+exports.StructuredResultRenderer = StructuredResultRenderer;

package/dist/cjs/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/cjs/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"}

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

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clampToExtents = exports.resolveSparklineExtents = exports.resolveSparklineSeries = void 0;
+var tslib_1 = require("tslib");
+var isNumber = function (item) {
+    return typeof item === "number" && !isNaN(item);
+};
+/**
+ * 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).
+ */
+var resolveSparklineSeries = function (data, options) {
+    var e_1, _a;
+    var emptyMode = (options === null || options === void 0 ? void 0 : options.emptycells) === "gap" ||
+        (options === null || options === void 0 ? void 0 : options.emptycells) === "zero" ||
+        (options === null || options === void 0 ? void 0 : options.emptycells) === "span"
+        ? options.emptycells
+        : undefined;
+    var slots = [];
+    var dataIndex = 0;
+    try {
+        for (var data_1 = tslib_1.__values(data), data_1_1 = data_1.next(); !data_1_1.done; data_1_1 = data_1.next()) {
+            var item = data_1_1.value;
+            if (isNumber(item)) {
+                slots.push({ value: item, dataIndex: dataIndex++ });
+            }
+            else if (emptyMode === "zero") {
+                slots.push({ value: 0, dataIndex: -1 });
+            }
+            else if (emptyMode === "gap" || emptyMode === "span") {
+                slots.push({ value: null, dataIndex: -1 });
+            }
+            // No emptycells option → drop empty cells entirely (legacy shape).
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (data_1_1 && !data_1_1.done && (_a = data_1.return)) _a.call(data_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    if (options === null || options === void 0 ? void 0 : options.rtl) {
+        slots.reverse();
+    }
+    return slots;
+};
+exports.resolveSparklineSeries = resolveSparklineSeries;
+/**
+ * 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).
+ */
+var resolveSparklineExtents = function (slots, options, isWinLoss) {
+    var e_2, _a;
+    var min = Infinity;
+    var max = -Infinity;
+    try {
+        for (var slots_1 = tslib_1.__values(slots), slots_1_1 = slots_1.next(); !slots_1_1.done; slots_1_1 = slots_1.next()) {
+            var slot = slots_1_1.value;
+            if (slot.value == null)
+                continue;
+            if (slot.value < min)
+                min = slot.value;
+            if (slot.value > max)
+                max = slot.value;
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (slots_1_1 && !slots_1_1.done && (_a = slots_1.return)) _a.call(slots_1);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    if (isWinLoss) {
+        min = Math.min(min, 0);
+        max = Math.max(max, 0);
+    }
+    var useManualMin = isNumber(options === null || options === void 0 ? void 0 : options.min) &&
+        ((options === null || options === void 0 ? void 0 : options.minaxistype) === "custom" || (options === null || options === void 0 ? void 0 : options.minaxistype) == null);
+    var useManualMax = isNumber(options === null || options === void 0 ? void 0 : options.max) &&
+        ((options === null || options === void 0 ? void 0 : options.maxaxistype) === "custom" || (options === null || options === void 0 ? void 0 : options.maxaxistype) == null);
+    if (useManualMin)
+        min = options.min;
+    if (useManualMax)
+        max = options.max;
+    if (max < min)
+        max = min;
+    return { min: min, max: max };
+};
+exports.resolveSparklineExtents = resolveSparklineExtents;
+/**
+ * Clamp a value into the axis extents — values outside a manual
+ * min/max are drawn pinned at the axis edge, like Excel.
+ */
+var clampToExtents = function (value, min, max) { return Math.min(Math.max(value, min), max); };
+exports.clampToExtents = clampToExtents;

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

@@ -0,0 +1,6 @@
+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, }: SparklineProps) => React.JSX.Element;
+//# sourceMappingURL=sparkline.d.ts.map

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

@@ -0,0 +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,gDAQvB,cAAc,sBA8QhB,CAAC"}

package/dist/cjs/components/cell-structured/sparkline.js

@@ -0,0 +1,256 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sparkline = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var react_2 = require("react");
+var react_konva_1 = require("react-konva");
+var sparkline_math_1 = require("./sparkline-math");
+// Draw a diamond marker at the specified position
+var drawDiamond = function (ctx, x, y, size, fillColor) {
+    ctx.beginPath();
+    ctx.moveTo(x, y - size); // Top
+    ctx.lineTo(x + size, y); // Right
+    ctx.lineTo(x, y + size); // Bottom
+    ctx.lineTo(x - size, y); // Left
+    ctx.closePath();
+    ctx.fillStyle = fillColor;
+    ctx.fill();
+};
+var Sparkline = function (_a) {
+    var x = _a.x, y = _a.y, width = _a.width, height = _a.height, data = _a.data, options = _a.options, color = _a.color;
+    var sparkLineFunction = (0, react_2.useCallback)(function (ctx, shape) {
+        var _a, _b, _c, _d, _e;
+        // Guard against undefined data (formula not yet evaluated)
+        if (!data || !Array.isArray(data)) {
+            return;
+        }
+        var padding = 4;
+        var paddingTop = 4;
+        var lineColor = (_b = (_a = options === null || options === void 0 ? void 0 : options.color) !== null && _a !== void 0 ? _a : color) !== null && _b !== void 0 ? _b : "#000000";
+        var fillColor = (_d = (_c = options === null || options === void 0 ? void 0 : options.color) !== null && _c !== void 0 ? _c : color) !== null && _d !== void 0 ? _d : "#000000";
+        var lineWidth = typeof (options === null || options === void 0 ? void 0 : options.lineweight) === "number" && options.lineweight > 0
+            ? options.lineweight
+            : 1;
+        var width = shape.width();
+        var height = shape.height();
+        // Resolve raw data into paintable x slots — applies the
+        // `emptycells` (gap/zero/span) and `rtl` options. Without those
+        // options this compacts empties exactly like the legacy
+        // `data.filter(isNumber)` path did.
+        var slots = (0, sparkline_math_1.resolveSparklineSeries)(data, options);
+        var type = (_e = options === null || options === void 0 ? void 0 : options.charttype) !== null && _e !== void 0 ? _e : "line";
+        var minColumnHeight = 1;
+        // For winloss, we need to handle positive/negative differently
+        var isWinLoss = type === "winloss";
+        // Axis extents with Excel's manual-min/max semantics
+        // (minaxistype/maxaxistype "custom" → manual value).
+        var _f = (0, sparkline_math_1.resolveSparklineExtents)(slots, options, isWinLoss), effectiveMin = _f.min, effectiveMax = _f.max;
+        // Calculate scales. Gap/span slots keep their x position, so the
+        // slot count (not the numeric count) drives the x scale.
+        var xScale = (width - 2 * padding) / (slots.length - (type === "line" ? 1 : 0));
+        var availableHeight = height - 2 * paddingTop - minColumnHeight;
+        var yScale = availableHeight / (effectiveMax - effectiveMin || 1); // Avoid division by zero
+        // Calculate zero line position for winloss
+        var zeroY = isWinLoss
+            ? height - paddingTop - (0 - effectiveMin) * yScale
+            : height - paddingTop;
+        // Calculate min/max slot indices for marker highlighting
+        // (first occurrence wins, matching the legacy behavior)
+        var minSlotIndex = -1;
+        var maxSlotIndex = -1;
+        slots.forEach(function (slot, index) {
+            if (slot.value == null)
+                return;
+            if (minSlotIndex === -1 || slot.value < slots[minSlotIndex].value) {
+                minSlotIndex = index;
+            }
+            if (maxSlotIndex === -1 || slot.value > slots[maxSlotIndex].value) {
+                maxSlotIndex = index;
+            }
+        });
+        // Highest data ordinal — `last` follows data order, which under
+        // `rtl` paints at the left edge.
+        var lastDataIndex = slots.reduce(function (m, slot) { return (slot.dataIndex > m ? slot.dataIndex : m); }, -1);
+        // Store points for markers
+        var points = [];
+        // Per-column color resolution for "column" sparklines. Excel
+        // highlights individual columns when `high`/`low`/`first`/`last`/
+        // `negative` flags are on, painting the relevant column with its
+        // dedicated color override. We compute the fill per column rather
+        // than batching every rect into one fill so each column can have
+        // its own color.
+        var pickColumnColor = function (value, slotIndex, dataIndex) {
+            var _a, _b, _c, _d, _e;
+            var isHigh = slotIndex === maxSlotIndex;
+            var isLow = slotIndex === minSlotIndex;
+            var isFirst = dataIndex === 0;
+            var isLast = dataIndex >= 0 && dataIndex === lastDataIndex;
+            var isNegative = value < 0;
+            if ((options === null || options === void 0 ? void 0 : options.negative) && isNegative) {
+                return (_a = options.colorNegative) !== null && _a !== void 0 ? _a : "#FF0000";
+            }
+            if ((options === null || options === void 0 ? void 0 : options.high) && isHigh) {
+                return (_b = options.colorHigh) !== null && _b !== void 0 ? _b : "#00B050";
+            }
+            if ((options === null || options === void 0 ? void 0 : options.low) && isLow) {
+                return (_c = options.colorLow) !== null && _c !== void 0 ? _c : "#FF0000";
+            }
+            if ((options === null || options === void 0 ? void 0 : options.first) && isFirst) {
+                return (_d = options.colorFirst) !== null && _d !== void 0 ? _d : fillColor;
+            }
+            if ((options === null || options === void 0 ? void 0 : options.last) && isLast) {
+                return (_e = options.colorLast) !== null && _e !== void 0 ? _e : fillColor;
+            }
+            return fillColor;
+        };
+        // Draw the horizontal (zero) axis when requested via the `axis`
+        // (displayXAxis) option. Only meaningful when zero falls inside
+        // the vertical extents; winloss already anchors bars on zeroY.
+        if (options === null || options === void 0 ? void 0 : options.axis) {
+            var axisY = isWinLoss
+                ? zeroY
+                : effectiveMin <= 0 && effectiveMax >= 0
+                    ? height -
+                        paddingTop -
+                        ((0 - effectiveMin) * yScale + minColumnHeight)
+                    : undefined;
+            if (axisY !== undefined) {
+                ctx.beginPath();
+                ctx.strokeStyle = "#808080";
+                ctx.lineWidth = 1;
+                ctx.moveTo(padding, axisY);
+                ctx.lineTo(width - padding, axisY);
+                ctx.stroke();
+            }
+        }
+        ctx.beginPath();
+        ctx.strokeStyle = lineColor;
+        ctx.lineWidth = lineWidth;
+        // Draw the sparkline. `penDown` tracks line continuity across
+        // empty slots: `emptycells: "gap"` lifts the pen (breaking the
+        // line) while `"span"` keeps it down so the next point connects
+        // straight across the gap.
+        var penDown = false;
+        slots.forEach(function (slot, index) {
+            var _a, _b;
+            var pointX = padding + index * xScale;
+            if (slot.value == null) {
+                // Empty slot: nothing painted. Gap breaks the line; span
+                // leaves the pen down so the line bridges the gap. Column
+                // and winloss types simply leave the slot blank.
+                if ((options === null || options === void 0 ? void 0 : options.emptycells) === "gap") {
+                    penDown = false;
+                }
+                return;
+            }
+            var value = slot.value;
+            // Pin values outside a manual min/max to the axis edge.
+            var clamped = (0, sparkline_math_1.clampToExtents)(value, effectiveMin, effectiveMax);
+            var columnHeight = (clamped - effectiveMin) * yScale + minColumnHeight;
+            var pointY = height - paddingTop - columnHeight;
+            if (type === "line") {
+                if (!penDown) {
+                    ctx.moveTo(pointX, pointY);
+                    penDown = true;
+                }
+                else {
+                    ctx.lineTo(pointX, pointY);
+                }
+                points.push({
+                    x: pointX,
+                    y: pointY,
+                    value: value,
+                    slotIndex: index,
+                    dataIndex: slot.dataIndex,
+                });
+            }
+            else if (type === "column") {
+                var columnWidth = xScale * 0.8;
+                var columnX = pointX + (xScale - columnWidth) / 2;
+                ctx.fillStyle = pickColumnColor(value, index, slot.dataIndex);
+                ctx.fillRect(columnX, pointY, columnWidth, columnHeight);
+            }
+            else if (type === "winloss") {
+                // Win/loss shows bars above/below zero line
+                var columnWidth = xScale * 0.8;
+                var columnX = pointX + (xScale - columnWidth) / 2;
+                var barHeight = Math.abs(clamped) * yScale;
+                var barY = clamped >= 0 ? zeroY - barHeight : zeroY;
+                // Use different colors for positive/negative
+                ctx.fillStyle =
+                    value >= 0
+                        ? (_a = options === null || options === void 0 ? void 0 : options.color) !== null && _a !== void 0 ? _a : "#00B050"
+                        : (_b = options === null || options === void 0 ? void 0 : options.colorNegative) !== null && _b !== void 0 ? _b : "#FF0000";
+                ctx.fillRect(columnX, barY, columnWidth, Math.max(barHeight, 2));
+                // Store points for diamond markers
+                var markerY = clamped >= 0 ? zeroY - barHeight : zeroY + barHeight;
+                points.push({
+                    x: pointX + xScale / 2,
+                    y: markerY,
+                    value: value,
+                    slotIndex: index,
+                    dataIndex: slot.dataIndex,
+                });
+            }
+        });
+        // Stroke the line for 'line' type. Column sparklines are filled
+        // per-column inline above so each rect can carry its own color.
+        if (type === "line") {
+            ctx.stroke();
+        }
+        // Draw markers - enabled by default for line sparklines, always for winloss
+        // Can be disabled with markers: false
+        var showMarkers = (options === null || options === void 0 ? void 0 : options.markers) !== false && (type === "line" || isWinLoss);
+        if (showMarkers && points.length > 0) {
+            var markerSize_1 = isWinLoss ? 4 : 3;
+            points.forEach(function (point) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                var markerColor;
+                // Determine marker color based on value and position.
+                // First/last follow the data order (dataIndex), so under
+                // `rtl` the "first" marker paints at the right edge.
+                var isFirst = point.dataIndex === 0;
+                var isLast = point.dataIndex >= 0 && point.dataIndex === lastDataIndex;
+                var isHigh = point.slotIndex === maxSlotIndex;
+                var isLow = point.slotIndex === minSlotIndex;
+                var isNegative = point.value < 0;
+                if (isWinLoss) {
+                    // Win/loss: green for positive, red for negative
+                    markerColor = isNegative
+                        ? (_a = options === null || options === void 0 ? void 0 : options.colorNegative) !== null && _a !== void 0 ? _a : "#FF0000"
+                        : (_c = (_b = options === null || options === void 0 ? void 0 : options.colorHigh) !== null && _b !== void 0 ? _b : options === null || options === void 0 ? void 0 : options.color) !== null && _c !== void 0 ? _c : "#00B050";
+                }
+                else {
+                    // Line sparkline: use high/low colors for min/max points
+                    if (isHigh && isLow) {
+                        // Same point is both high and low (single point or all same)
+                        markerColor = (_e = (_d = options === null || options === void 0 ? void 0 : options.colorHigh) !== null && _d !== void 0 ? _d : options === null || options === void 0 ? void 0 : options.color) !== null && _e !== void 0 ? _e : lineColor;
+                    }
+                    else if (isHigh) {
+                        markerColor = (_f = options === null || options === void 0 ? void 0 : options.colorHigh) !== null && _f !== void 0 ? _f : "#00B050";
+                    }
+                    else if (isLow) {
+                        markerColor = (_g = options === null || options === void 0 ? void 0 : options.colorLow) !== null && _g !== void 0 ? _g : "#FF0000";
+                    }
+                    else if (isFirst && (options === null || options === void 0 ? void 0 : options.colorFirst)) {
+                        markerColor = options.colorFirst;
+                    }
+                    else if (isLast && (options === null || options === void 0 ? void 0 : options.colorLast)) {
+                        markerColor = options.colorLast;
+                    }
+                    else if (isNegative) {
+                        markerColor = (_h = options === null || options === void 0 ? void 0 : options.colorNegative) !== null && _h !== void 0 ? _h : "#FF0000";
+                    }
+                    else {
+                        markerColor =
+                            (_k = (_j = options === null || options === void 0 ? void 0 : options.colorMarkers) !== null && _j !== void 0 ? _j : options === null || options === void 0 ? void 0 : options.color) !== null && _k !== void 0 ? _k : lineColor;
+                    }
+                }
+                drawDiamond(ctx, point.x, point.y, markerSize_1, markerColor);
+            });
+        }
+    }, [data, options, color]);
+    return (react_1.default.createElement(react_konva_1.Shape, { x: x, y: y, width: width, height: height, sceneFunc: sparkLineFunction, listening: false }));
+};
+exports.Sparkline = Sparkline;

package/dist/cjs/components/cell-structured/types.d.ts

@@ -0,0 +1,23 @@
+import type { StructuredResult } from "@rowsncolumns/common-types";
+import type { CellProps } from "../cell/typings";
+export type StructuredResultProps<S extends StructuredResult = StructuredResult> = Pick<CellProps<S>, "structuredValue"> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color?: string;
+    textX?: number;
+    textY?: number;
+    textWidth?: number;
+    textFill?: string;
+    textVerticalAlign?: string;
+    textAlign?: string;
+    textFontFamily?: string;
+    textFontStyle?: string;
+    textFontSize?: number;
+    textDecoration?: string;
+    textPadding?: number;
+    textWrap?: string;
+    textLineHeight?: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/cjs/components/cell-structured/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../components/cell-structured/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,MAAM,qBAAqB,CAC/B,CAAC,SAAS,gBAAgB,GAAG,gBAAgB,IAC3C,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,iBAAiB,CAAC,GAAG;IAC1C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC"}

package/dist/cjs/components/cell-structured/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/cell-tooltip/index.d.ts

@@ -0,0 +1,28 @@
+import type { CellInterface } from "@rowsncolumns/grid";
+import type { CellTooltipVariants } from "@rowsncolumns/ui";
+import type { ReactNode } from "react";
+import React from "react";
+import type { DefaultTooltipProps } from "../../hooks/use-tooltip";
+import type { CellData, SheetCoordinate } from "../../types";
+import type { CanvasGridProps } from "../canvas-grid/typings";
+export type CellTooltipProps<T extends CellData = CellData> = DefaultTooltipProps & CellTooltipVariants & {
+    sheetId: number;
+    position?: "top" | "bottom" | "right" | "left";
+    title?: string;
+    content?: string;
+    customContent?: ReactNode | string;
+    hyperlink?: T["hyperlink"];
+    cell: CellInterface;
+    note?: string;
+    noteEditorCell?: SheetCoordinate;
+    onRequestShowNote?(cell: CellInterface | undefined): void;
+    onRequestUpdateNote?(value: string | undefined): void;
+    onRequestCloseNote?(): void;
+    onRemoveLink?: CanvasGridProps["onRemoveLink"];
+    onSelectLink?: CanvasGridProps["onSelectLink"];
+    onRequestPinTooltip(cell: CellInterface): void;
+    onRequestUnpinTooltip(): void;
+    errorResolutionComponent?: (sheetId: number, rowIndex: number, columnIndex: number) => ReactNode;
+};
+export declare const CellTooltip: React.MemoExoticComponent<({ x, y, width, height, scrollLeft, scrollTop, position, variant, content, customContent, title, note, noteEditorCell, hyperlink, cell, sheetId, onRemoveLink, onSelectLink, onRequestShowNote, onRequestUpdateNote, onRequestCloseNote, errorResolutionComponent, onRequestUnpinTooltip, onRequestPinTooltip, }: CellTooltipProps) => React.JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/cell-tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IACxD,mBAAmB,GACjB,mBAAmB,GAAG;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACnC,SAAS,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,iBAAiB,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1D,mBAAmB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACtD,kBAAkB,CAAC,IAAI,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC/C,mBAAmB,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAC/C,qBAAqB,IAAI,IAAI,CAAC;IAC9B,wBAAwB,CAAC,EAAE,CACzB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,SAAS,CAAC;CAChB,CAAC;AAEN,eAAO,MAAM,WAAW,8UA4BnB,gBAAgB,uBA4FpB,CAAC"}

package/dist/cjs/components/cell-tooltip/index.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellTooltip = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var ui_2 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var note_editor_1 = require("./note-editor");
+exports.CellTooltip = (0, react_1.memo)(function (_a) {
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.width, width = _d === void 0 ? 0 : _d, _e = _a.height, height = _e === void 0 ? 0 : _e, _f = _a.scrollLeft, scrollLeft = _f === void 0 ? 0 : _f, _g = _a.scrollTop, scrollTop = _g === void 0 ? 0 : _g, _h = _a.position, position = _h === void 0 ? "right" : _h, variant = _a.variant, content = _a.content, customContent = _a.customContent, title = _a.title, note = _a.note, noteEditorCell = _a.noteEditorCell, hyperlink = _a.hyperlink, cell = _a.cell, sheetId = _a.sheetId, onRemoveLink = _a.onRemoveLink, onSelectLink = _a.onSelectLink, onRequestShowNote = _a.onRequestShowNote, onRequestUpdateNote = _a.onRequestUpdateNote, onRequestCloseNote = _a.onRequestCloseNote, errorResolutionComponent = _a.errorResolutionComponent, 
+    // Pin
+    onRequestUnpinTooltip = _a.onRequestUnpinTooltip, onRequestPinTooltip = _a.onRequestPinTooltip;
+    var posX = position === "right" ? x + width - scrollLeft : x - scrollLeft;
+    var posY = position === "bottom" ? y + height - scrollTop : y - scrollTop;
+    var tooltipTitle = variant === "error" ? "Error" : variant === "invalid" ? "Invalid" : title;
+    var shouldShowErrorResolution = variant === "error" || variant === "invalid";
+    var errorResolution = shouldShowErrorResolution
+        ? errorResolutionComponent === null || errorResolutionComponent === void 0 ? void 0 : errorResolutionComponent(sheetId, cell.rowIndex, cell.columnIndex)
+        : undefined;
+    return (react_1.default.createElement(ui_2.CellTooltip, { style: {
+            transform: "translate(".concat(posX, "px, ").concat(posY, "px)"),
+        }, variant: variant, onMouseMove: function (e) { return e.stopPropagation(); }, onContextMenu: function (e) { return e.stopPropagation(); } },
+        note || noteEditorCell ? (react_1.default.createElement(note_editor_1.NoteEditor, { initialValue: note, onFocus: function () { return onRequestShowNote === null || onRequestShowNote === void 0 ? void 0 : onRequestShowNote(cell); }, onRequestUpdateNote: onRequestUpdateNote, onRequestCloseNote: onRequestCloseNote, noteEditorCell: noteEditorCell })) : null,
+        hyperlink &&
+            typeof hyperlink !== "string" &&
+            hyperlink.tooltip ? (react_1.default.createElement("div", { className: "py-1 text-xs font-system" }, hyperlink.tooltip)) : null,
+        react_1.default.createElement(ui_1.ConditionalWrapper, { condition: Boolean(hyperlink), wrapper: function (children) {
+                if (!hyperlink) {
+                    return null;
+                }
+                var kind = typeof hyperlink === "string" ? "external" : hyperlink.kind;
+                var url = typeof hyperlink === "string"
+                    ? (0, utils_1.normalizeExternalUrl)(hyperlink)
+                    : hyperlink.kind === "external"
+                        ? (0, utils_1.normalizeExternalUrl)(hyperlink.url)
+                        : "#range=".concat(hyperlink.location);
+                return (react_1.default.createElement("div", { className: "flex align-top break-all items-start gap-2" },
+                    react_1.default.createElement("a", { target: kind === "external" ? "_blank" : undefined, href: url, rel: "noopener noreferrer", className: "flex-1 text-xs", onClick: function (event) {
+                            if (onSelectLink) {
+                                onSelectLink(sheetId, cell, hyperlink);
+                                event.preventDefault();
+                            }
+                        } }, children),
+                    react_1.default.createElement(ui_1.IconButton, { size: "sm", onClick: function () {
+                            onRemoveLink === null || onRemoveLink === void 0 ? void 0 : onRemoveLink(sheetId, cell);
+                        } },
+                        react_1.default.createElement(icons_1.Cross1Icon, null))));
+            } }, tooltipTitle ? (react_1.default.createElement(ui_2.CellTooltipTitle, { variant: variant }, tooltipTitle)) : null),
+        content ? (react_1.default.createElement("div", { className: "py-2 text-xs font-system" }, content)) : null,
+        customContent ? (react_1.default.createElement("div", { className: "py-2 text-xs font-system" }, customContent)) : null,
+        errorResolution));
+});
+exports.CellTooltip.displayName = "CellTooltip";

package/dist/cjs/components/cell-tooltip/note-editor.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { SheetCoordinate } from "../../types";
+type NoteEditorProps = {
+    initialValue?: string;
+    noteEditorCell?: SheetCoordinate;
+    onFocus?(): void;
+    onRequestUpdateNote?(value: string | undefined, previousValue?: string | undefined): void;
+    onRequestCloseNote?(): void;
+};
+export declare const NoteEditor: ({ initialValue, noteEditorCell, onFocus, onRequestUpdateNote, onRequestCloseNote, }: NoteEditorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=note-editor.d.ts.map

package/dist/cjs/components/cell-tooltip/note-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"note-editor.d.ts","sourceRoot":"","sources":["../../../../components/cell-tooltip/note-editor.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,KAAK,eAAe,GAAG;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,mBAAmB,CAAC,CAClB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,GACjC,IAAI,CAAC;IACR,kBAAkB,CAAC,IAAI,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,qFAMxB,eAAe,sBA0BjB,CAAC"}

package/dist/cjs/components/cell-tooltip/note-editor.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoteEditor = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var style_1 = require("./style");
+var NoteEditor = function (_a) {
+    var initialValue = _a.initialValue, noteEditorCell = _a.noteEditorCell, onFocus = _a.onFocus, onRequestUpdateNote = _a.onRequestUpdateNote, onRequestCloseNote = _a.onRequestCloseNote;
+    var _b = tslib_1.__read((0, react_1.useState)(initialValue !== null && initialValue !== void 0 ? initialValue : ""), 2), value = _b[0], setValue = _b[1];
+    var inputRef = (0, react_1.useRef)(null);
+    (0, ui_1.useIsomorphicLayoutEffect)(function () {
+        var _a;
+        if (noteEditorCell) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [noteEditorCell]);
+    return (react_1.default.createElement(style_1.StyledNoteTextarea, { ref: inputRef, rows: 3, value: value, onFocus: onFocus, placeholder: "Type a note.", onBlur: function () {
+            onRequestUpdateNote === null || onRequestUpdateNote === void 0 ? void 0 : onRequestUpdateNote(value, initialValue);
+        }, onKeyDown: function (e) {
+            if (e.key === "Escape") {
+                onRequestCloseNote === null || onRequestCloseNote === void 0 ? void 0 : onRequestCloseNote();
+            }
+        }, onChange: function (e) { return setValue(e.target.value); } }));
+};
+exports.NoteEditor = NoteEditor;