@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/embeds/shape-geometry.js

@@ -0,0 +1,265 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.presetShapePath = exports.isRenderedShapePreset = void 0;
+var tslib_1 = require("tslib");
+var clamp = function (v, min, max) {
+    return Math.min(max, Math.max(min, v));
+};
+/** Round to 2dp so path output is stable across platforms (and in tests). */
+var n = function (v) { return "".concat(Math.round(v * 100) / 100); };
+var polygon = function (points) {
+    return "M".concat(points.map(function (_a) {
+        var _b = tslib_1.__read(_a, 2), x = _b[0], y = _b[1];
+        return "".concat(n(x), " ").concat(n(y));
+    }).join("L"), "Z");
+};
+var rect = function (w, h) { return polygon([[0, 0], [w, 0], [w, h], [0, h]]); };
+var roundRect = function (w, h, adj) {
+    // Corner radius = shorter side × adj (default 16.667%, max 50%).
+    var r = Math.min(w, h) * (clamp(adj("adj", 16667), 0, 50000) / 100000);
+    var arc = function (x, y) { return "A".concat(n(r), " ").concat(n(r), " 0 0 1 ").concat(n(x), " ").concat(n(y)); };
+    return ("M".concat(n(r), " 0H").concat(n(w - r)).concat(arc(w, r), "V").concat(n(h - r)).concat(arc(w - r, h)) +
+        "H".concat(n(r)).concat(arc(0, h - r), "V").concat(n(r)).concat(arc(r, 0), "Z"));
+};
+var snipSingleCornerRect = function (w, h, adj) {
+    var s = Math.min(w, h) * (clamp(adj("adj", 16667), 0, 50000) / 100000);
+    return polygon([[0, 0], [w - s, 0], [w, s], [w, h], [0, h]]);
+};
+var ellipse = function (w, h) {
+    var rx = w / 2;
+    var ry = h / 2;
+    return ("M0 ".concat(n(ry), "A").concat(n(rx), " ").concat(n(ry), " 0 1 0 ").concat(n(w), " ").concat(n(ry)) +
+        "A".concat(n(rx), " ").concat(n(ry), " 0 1 0 0 ").concat(n(ry), "Z"));
+};
+var triangle = function (w, h, adj) {
+    // adj positions the apex horizontally (default: centered).
+    var apexX = w * (clamp(adj("adj", 50000), 0, 100000) / 100000);
+    return polygon([[apexX, 0], [w, h], [0, h]]);
+};
+var rightTriangle = function (w, h) {
+    return polygon([[0, 0], [w, h], [0, h]]);
+};
+var diamond = function (w, h) {
+    return polygon([[w / 2, 0], [w, h / 2], [w / 2, h], [0, h / 2]]);
+};
+var parallelogram = function (w, h, adj) {
+    var off = Math.min(Math.min(w, h) * (clamp(adj("adj", 25000), 0, 100000) / 100000), w / 2);
+    return polygon([[off, 0], [w, 0], [w - off, h], [0, h]]);
+};
+var trapezoid = function (w, h, adj) {
+    var inset = Math.min(Math.min(w, h) * (clamp(adj("adj", 25000), 0, 100000) / 100000), w / 2);
+    return polygon([[inset, 0], [w - inset, 0], [w, h], [0, h]]);
+};
+var pentagon = function (w, h) {
+    return polygon([
+        [w / 2, 0],
+        [w, h * 0.381],
+        [w * 0.809, h],
+        [w * 0.191, h],
+        [0, h * 0.381],
+    ]);
+};
+var hexagon = function (w, h, adj) {
+    var x = Math.min(Math.min(w, h) * (clamp(adj("adj", 25000), 0, 50000) / 100000), w / 2);
+    return polygon([
+        [x, 0],
+        [w - x, 0],
+        [w, h / 2],
+        [w - x, h],
+        [x, h],
+        [0, h / 2],
+    ]);
+};
+var octagon = function (w, h, adj) {
+    var s = Math.min(Math.min(w, h) * (clamp(adj("adj", 29289), 0, 50000) / 100000), Math.min(w, h) / 2);
+    return polygon([
+        [s, 0],
+        [w - s, 0],
+        [w, s],
+        [w, h - s],
+        [w - s, h],
+        [s, h],
+        [0, h - s],
+        [0, s],
+    ]);
+};
+var star5 = function (w, h, adj) {
+    // Inner radius as a fraction of the outer (OOXML default 19098/50000 ≈ 0.38).
+    var innerRatio = clamp(adj("adj", 19098), 0, 50000) / 50000;
+    var cx = w / 2;
+    var cy = h / 2;
+    var points = [];
+    for (var i = 0; i < 5; i++) {
+        var outer = ((-90 + i * 72) * Math.PI) / 180;
+        var inner = ((-54 + i * 72) * Math.PI) / 180;
+        points.push([cx + (w / 2) * Math.cos(outer), cy + (h / 2) * Math.sin(outer)]);
+        points.push([
+            cx + (w / 2) * innerRatio * Math.cos(inner),
+            cy + (h / 2) * innerRatio * Math.sin(inner),
+        ]);
+    }
+    return polygon(points);
+};
+/**
+ * Horizontal arrow pointing right; the other directions transform its points.
+ * adj1 = shaft thickness as a fraction of the perpendicular extent,
+ * adj2 = head length as a fraction of the shorter side (both default 50%).
+ */
+var arrowPoints = function (length, breadth, ss, adj) {
+    var shaftHalf = (breadth * (clamp(adj("adj1", 50000), 0, 100000) / 100000)) / 2;
+    var head = Math.min(ss * (clamp(adj("adj2", 50000), 0, 200000) / 100000), length);
+    var mid = breadth / 2;
+    return [
+        [0, mid - shaftHalf],
+        [length - head, mid - shaftHalf],
+        [length - head, 0],
+        [length, mid],
+        [length - head, breadth],
+        [length - head, mid + shaftHalf],
+        [0, mid + shaftHalf],
+    ];
+};
+var rightArrow = function (w, h, adj) {
+    return polygon(arrowPoints(w, h, Math.min(w, h), adj));
+};
+var leftArrow = function (w, h, adj) {
+    return polygon(arrowPoints(w, h, Math.min(w, h), adj).map(function (_a) {
+        var _b = tslib_1.__read(_a, 2), x = _b[0], y = _b[1];
+        return [w - x, y];
+    }));
+};
+var downArrow = function (w, h, adj) {
+    return polygon(arrowPoints(h, w, Math.min(w, h), adj).map(function (_a) {
+        var _b = tslib_1.__read(_a, 2), x = _b[0], y = _b[1];
+        return [y, x];
+    }));
+};
+var upArrow = function (w, h, adj) {
+    return polygon(arrowPoints(h, w, Math.min(w, h), adj).map(function (_a) {
+        var _b = tslib_1.__read(_a, 2), x = _b[0], y = _b[1];
+        return [y, h - x];
+    }));
+};
+var leftRightArrow = function (w, h, adj) {
+    var ss = Math.min(w, h);
+    var shaftHalf = (h * (clamp(adj("adj1", 50000), 0, 100000) / 100000)) / 2;
+    var head = Math.min(ss * (clamp(adj("adj2", 50000), 0, 200000) / 100000), w / 2);
+    var mid = h / 2;
+    return polygon([
+        [0, mid],
+        [head, 0],
+        [head, mid - shaftHalf],
+        [w - head, mid - shaftHalf],
+        [w - head, 0],
+        [w, mid],
+        [w - head, h],
+        [w - head, mid + shaftHalf],
+        [head, mid + shaftHalf],
+        [head, h],
+    ]);
+};
+var chevron = function (w, h, adj) {
+    var x = Math.min(Math.min(w, h) * (clamp(adj("adj", 50000), 0, 100000) / 100000), w);
+    return polygon([
+        [0, 0],
+        [w - x, 0],
+        [w, h / 2],
+        [w - x, h],
+        [0, h],
+        [x, h / 2],
+    ]);
+};
+/**
+ * Callout tail: tip at center + (w·adj1, h·adj2) (OOXML wedge defaults point
+ * down-left), base centered on the edge the tip lies beyond.
+ */
+var calloutTail = function (w, h, adj) {
+    var dx = adj("adj1", -20833) / 100000;
+    var dy = adj("adj2", 62500) / 100000;
+    var tip = [w / 2 + w * dx, h / 2 + h * dy];
+    var halfBase = Math.min(w, h) * 0.125;
+    var vertical = Math.abs(dy) >= Math.abs(dx);
+    var edge = vertical
+        ? dy > 0
+            ? "bottom"
+            : "top"
+        : dx > 0
+            ? "right"
+            : "left";
+    var base = vertical
+        ? [
+            [w / 2 - halfBase, edge === "bottom" ? h : 0],
+            [w / 2 + halfBase, edge === "bottom" ? h : 0],
+        ]
+        : [
+            [edge === "right" ? w : 0, h / 2 - halfBase],
+            [edge === "right" ? w : 0, h / 2 + halfBase],
+        ];
+    return { tip: tip, base: base, edge: edge };
+};
+var wedgeRectCallout = function (w, h, adj) {
+    var _a = calloutTail(w, h, adj), tip = _a.tip, base = _a.base, edge = _a.edge;
+    var _b = tslib_1.__read(base, 2), b1 = _b[0], b2 = _b[1];
+    // Walk the rectangle clockwise from (0,0), inserting the tail into its edge.
+    switch (edge) {
+        case "top":
+            return polygon([[0, 0], b1, tip, b2, [w, 0], [w, h], [0, h]]);
+        case "right":
+            return polygon([[0, 0], [w, 0], b1, tip, b2, [w, h], [0, h]]);
+        case "bottom":
+            return polygon([[0, 0], [w, 0], [w, h], b2, tip, b1, [0, h]]);
+        case "left":
+            return polygon([[0, 0], [w, 0], [w, h], [0, h], b2, tip, b1]);
+    }
+};
+// Rounded-rect / ellipse callouts keep the tail as a second subpath overlapping
+// the body: the fill unions correctly; the body stroke crossing the tail base is
+// an accepted approximation (exact OOXML edge insertion isn't worth it here).
+var wedgeRoundRectCallout = function (w, h, adj) {
+    return "".concat(roundRect(w, h, adj)).concat(polygon(tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(calloutTail(w, h, adj).base), false), [calloutTail(w, h, adj).tip], false)));
+};
+var wedgeEllipseCallout = function (w, h, adj) {
+    var _a = calloutTail(w, h, adj), tip = _a.tip, base = _a.base;
+    return "".concat(ellipse(w, h, adj)).concat(polygon(tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(base), false), [tip], false)));
+};
+var BUILDERS = {
+    rect: rect,
+    roundRect: roundRect,
+    snipSingleCornerRect: snipSingleCornerRect,
+    ellipse: ellipse,
+    triangle: triangle,
+    rightTriangle: rightTriangle,
+    diamond: diamond,
+    parallelogram: parallelogram,
+    trapezoid: trapezoid,
+    pentagon: pentagon,
+    hexagon: hexagon,
+    octagon: octagon,
+    star5: star5,
+    rightArrow: rightArrow,
+    leftArrow: leftArrow,
+    upArrow: upArrow,
+    downArrow: downArrow,
+    leftRightArrow: leftRightArrow,
+    chevron: chevron,
+    wedgeRectCallout: wedgeRectCallout,
+    wedgeRoundRectCallout: wedgeRoundRectCallout,
+    wedgeEllipseCallout: wedgeEllipseCallout,
+};
+/** Presets with a dedicated builder (everything else renders as a rectangle). */
+var isRenderedShapePreset = function (preset) {
+    return preset in BUILDERS;
+};
+exports.isRenderedShapePreset = isRenderedShapePreset;
+/**
+ * SVG path data for a preset geometry at the given frame size. Unknown
+ * presets fall back to a plain rectangle so the shape still shows its
+ * fill/outline/text instead of disappearing.
+ */
+var presetShapePath = function (preset, width, height, adjustments) {
+    var _a;
+    var builder = (_a = BUILDERS[preset]) !== null && _a !== void 0 ? _a : rect;
+    var read = function (name, defaultValue) { var _a; return (_a = adjustments === null || adjustments === void 0 ? void 0 : adjustments[name]) !== null && _a !== void 0 ? _a : defaultValue; };
+    return builder(Math.max(width, 1), Math.max(height, 1), read);
+};
+exports.presetShapePath = presetShapePath;

package/dist/cjs/components/embeds/shape-svg.d.ts

@@ -0,0 +1,56 @@
+import React from "react";
+import type { EmbedShapeSpec, ShapeLineDash } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+/**
+ * Resolved (theme-applied, stringly-colored) drawing properties for a shape.
+ * Resolution precedence mirrors OOXML: an explicit `fill`/`outline`/`shadow`
+ * on the spec wins; otherwise the `<xdr:style>` refs (`styleRefs`) derive one
+ * from the referenced scheme color; otherwise Excel's insert-shape default
+ * (accent1) applies — a spec with nothing set still renders visibly.
+ */
+export type ResolvedShapeFill = {
+    kind: "none";
+} | {
+    kind: "solid";
+    color: string;
+    opacity?: number;
+} | {
+    kind: "gradient";
+    stops: Array<{
+        offset: number;
+        color: string;
+        opacity?: number;
+    }>;
+    angle: number;
+    shading: "linear" | "radial";
+};
+export type ResolvedShapeOutline = {
+    color: string;
+    width: number;
+    dash?: ShapeLineDash;
+    opacity?: number;
+} | null;
+export type ResolvedShapeShadow = {
+    color: string;
+    opacity: number;
+    blurRadius: number;
+    offsetX: number;
+    offsetY: number;
+} | null;
+export declare const resolveShapeFill: (spec: EmbedShapeSpec, theme: SpreadsheetTheme) => ResolvedShapeFill;
+export declare const resolveShapeOutline: (spec: EmbedShapeSpec, theme: SpreadsheetTheme) => ResolvedShapeOutline;
+export declare const resolveShapeShadow: (spec: EmbedShapeSpec, theme: SpreadsheetTheme) => ResolvedShapeShadow;
+export type ShapeSvgProps = {
+    spec: EmbedShapeSpec;
+    width: number;
+    height: number;
+    theme: SpreadsheetTheme;
+};
+/**
+ * Draws a shape spec as an SVG filling its embed frame: preset geometry path,
+ * resolved fill (solid/gradient), outline, drop shadow, and flips. Text is NOT
+ * drawn here — the embed component overlays its textbox renderer, so shape
+ * text gets selection/wrapping behavior identical to a plain text box.
+ */
+export declare const ShapeSvg: ({ spec, width, height, theme }: ShapeSvgProps) => React.JSX.Element;
+//# sourceMappingURL=shape-svg.d.ts.map

package/dist/cjs/components/embeds/shape-svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-svg.d.ts","sourceRoot":"","sources":["../../../../components/embeds/shape-svg.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAEV,cAAc,EAEd,aAAa,EACd,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GACzB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAClD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC9B,CAAC;AAEN,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB,GAAG,IAAI,CAAC;AAWT,eAAO,MAAM,gBAAgB,GAC3B,MAAM,cAAc,EACpB,OAAO,gBAAgB,KACtB,iBA4CF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,MAAM,cAAc,EACpB,OAAO,gBAAgB,KACtB,oBAiBF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,cAAc,EACpB,OAAO,gBAAgB,KACtB,mBAeF,CAAC;AA+BF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,gCAAgC,aAAa,sBA2FrE,CAAC"}

package/dist/cjs/components/embeds/shape-svg.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShapeSvg = exports.resolveShapeShadow = exports.resolveShapeOutline = exports.resolveShapeFill = void 0;
+var tslib_1 = require("tslib");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var themes_1 = require("../../themes");
+var shape_geometry_1 = require("./shape-geometry");
+/** Excel's default style for an inserted shape references accent1. */
+var DEFAULT_STYLE_COLOR = { theme: 4 };
+var stringify = function (color, theme, fallback) { var _a; return (_a = (0, themes_1.getStringifiedColor)(color !== null && color !== void 0 ? color : fallback, theme)) !== null && _a !== void 0 ? _a : fallback; };
+var resolveShapeFill = function (spec, theme) {
+    var _a, _b, _c, _d, _e, _f;
+    var fill = spec.fill;
+    if (fill) {
+        switch (fill.kind) {
+            case "none":
+                return { kind: "none" };
+            case "solid":
+                return {
+                    kind: "solid",
+                    color: stringify(fill.color, theme, "#FFFFFF"),
+                    opacity: (_a = fill.opacity) !== null && _a !== void 0 ? _a : undefined,
+                };
+            case "gradient":
+                return {
+                    kind: "gradient",
+                    stops: fill.stops.map(function (stop) {
+                        var _a;
+                        return ({
+                            offset: stop.position,
+                            color: stringify(stop.color, theme, "#FFFFFF"),
+                            opacity: (_a = stop.opacity) !== null && _a !== void 0 ? _a : undefined,
+                        });
+                    }),
+                    angle: (_b = fill.angle) !== null && _b !== void 0 ? _b : 90,
+                    shading: (_c = fill.shading) !== null && _c !== void 0 ? _c : "linear",
+                };
+        }
+    }
+    var ref = (_d = spec.styleRefs) === null || _d === void 0 ? void 0 : _d.fill;
+    if (ref && ref.index === 0) {
+        return { kind: "none" };
+    }
+    var base = stringify((_e = ref === null || ref === void 0 ? void 0 : ref.color) !== null && _e !== void 0 ? _e : DEFAULT_STYLE_COLOR, theme, "#4472C4");
+    // Format-scheme fills: idx 1 = plain, idx ≥ 2 = the subtle top-lit gradient
+    // Excel paints for its default shape styles.
+    if (!ref || ref.index >= 2) {
+        return {
+            kind: "gradient",
+            stops: [
+                { offset: 0, color: (_f = (0, utils_1.lightenColor)(0.45, base)) !== null && _f !== void 0 ? _f : base },
+                { offset: 1, color: base },
+            ],
+            angle: 90,
+            shading: "linear",
+        };
+    }
+    return { kind: "solid", color: base };
+};
+exports.resolveShapeFill = resolveShapeFill;
+var resolveShapeOutline = function (spec, theme) {
+    var _a, _b, _c, _d, _e, _f;
+    var outline = spec.outline;
+    if (outline) {
+        // width 0 = explicitly no outline.
+        if (outline.width === 0)
+            return null;
+        return {
+            color: stringify(outline.color, theme, "#808080"),
+            width: (_a = outline.width) !== null && _a !== void 0 ? _a : 1,
+            dash: (_b = outline.dash) !== null && _b !== void 0 ? _b : undefined,
+            opacity: (_c = outline.opacity) !== null && _c !== void 0 ? _c : undefined,
+        };
+    }
+    var ref = (_d = spec.styleRefs) === null || _d === void 0 ? void 0 : _d.line;
+    if (ref && ref.index === 0)
+        return null;
+    // Theme line styles stroke a darker take on the scheme color, 1px.
+    var base = stringify((_e = ref === null || ref === void 0 ? void 0 : ref.color) !== null && _e !== void 0 ? _e : DEFAULT_STYLE_COLOR, theme, "#4472C4");
+    return { color: (_f = (0, utils_1.lightenColor)(-0.25, base)) !== null && _f !== void 0 ? _f : base, width: 1 };
+};
+exports.resolveShapeOutline = resolveShapeOutline;
+var resolveShapeShadow = function (spec, theme) {
+    var _a, _b, _c, _d, _e;
+    var shadow = spec.shadow;
+    if (shadow) {
+        return {
+            color: stringify(shadow.color, theme, "#000000"),
+            opacity: (_a = shadow.opacity) !== null && _a !== void 0 ? _a : 0.4,
+            blurRadius: (_b = shadow.blurRadius) !== null && _b !== void 0 ? _b : 4,
+            offsetX: (_c = shadow.offsetXPixels) !== null && _c !== void 0 ? _c : 2,
+            offsetY: (_d = shadow.offsetYPixels) !== null && _d !== void 0 ? _d : 2,
+        };
+    }
+    var ref = (_e = spec.styleRefs) === null || _e === void 0 ? void 0 : _e.effect;
+    if (!ref || ref.index === 0)
+        return null;
+    // Effect refs resolve to Excel's subtle outer shadow.
+    return { color: "#000000", opacity: 0.35, blurRadius: 4, offsetX: 2, offsetY: 2 };
+};
+exports.resolveShapeShadow = resolveShapeShadow;
+/** Dash pattern scaled by stroke width so heavier lines keep their rhythm. */
+var dashArray = function (dash, strokeWidth) {
+    var sw = Math.max(strokeWidth, 1);
+    switch (dash) {
+        case "dot":
+            return "".concat(sw, " ").concat(sw * 3);
+        case "dash":
+            return "".concat(sw * 4, " ").concat(sw * 3);
+        case "dashDot":
+            return "".concat(sw * 4, " ").concat(sw * 3, " ").concat(sw, " ").concat(sw * 3);
+        case "longDash":
+            return "".concat(sw * 8, " ").concat(sw * 3);
+        case "longDashDot":
+            return "".concat(sw * 8, " ").concat(sw * 3, " ").concat(sw, " ").concat(sw * 3);
+        case "longDashDotDot":
+            return "".concat(sw * 8, " ").concat(sw * 3, " ").concat(sw, " ").concat(sw * 3, " ").concat(sw, " ").concat(sw * 3);
+        default:
+            return undefined;
+    }
+};
+/** OOXML gradient angle (degrees clockwise from pointing right, y-down) → SVG endpoints. */
+var gradientVector = function (angle) {
+    var rad = (angle * Math.PI) / 180;
+    var dx = Math.cos(rad) / 2;
+    var dy = Math.sin(rad) / 2;
+    return { x1: 0.5 - dx, y1: 0.5 - dy, x2: 0.5 + dx, y2: 0.5 + dy };
+};
+/**
+ * Draws a shape spec as an SVG filling its embed frame: preset geometry path,
+ * resolved fill (solid/gradient), outline, drop shadow, and flips. Text is NOT
+ * drawn here — the embed component overlays its textbox renderer, so shape
+ * text gets selection/wrapping behavior identical to a plain text box.
+ */
+var ShapeSvg = function (_a) {
+    var _b, _c;
+    var spec = _a.spec, width = _a.width, height = _a.height, theme = _a.theme;
+    var uid = (0, react_1.useId)();
+    var gradientId = "shape-fill-".concat(uid);
+    var shadowId = "shape-shadow-".concat(uid);
+    var fill = (0, exports.resolveShapeFill)(spec, theme);
+    var outline = (0, exports.resolveShapeOutline)(spec, theme);
+    var shadow = (0, exports.resolveShapeShadow)(spec, theme);
+    var d = (0, shape_geometry_1.presetShapePath)(spec.geometry.preset, width, height, spec.geometry.adjustments);
+    var fillAttr = fill.kind === "none"
+        ? "none"
+        : fill.kind === "solid"
+            ? fill.color
+            : "url(#".concat(gradientId, ")");
+    var flips = [];
+    if (spec.flipHorizontal)
+        flips.push("translate(".concat(width, " 0) scale(-1 1)"));
+    if (spec.flipVertical)
+        flips.push("translate(0 ".concat(height, ") scale(1 -1)"));
+    var vector = fill.kind === "gradient" ? gradientVector(fill.angle) : null;
+    return (react_1.default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 ".concat(width, " ").concat(height), preserveAspectRatio: "none", style: { position: "absolute", inset: 0, overflow: "visible" }, "aria-label": (_b = spec.name) !== null && _b !== void 0 ? _b : undefined, role: "img" },
+        react_1.default.createElement("defs", null,
+            fill.kind === "gradient" ? (fill.shading === "radial" ? (react_1.default.createElement("radialGradient", { id: gradientId }, fill.stops.map(function (stop, index) { return (react_1.default.createElement("stop", { key: index, offset: stop.offset, stopColor: stop.color, stopOpacity: stop.opacity })); }))) : (react_1.default.createElement("linearGradient", tslib_1.__assign({ id: gradientId }, vector), fill.stops.map(function (stop, index) { return (react_1.default.createElement("stop", { key: index, offset: stop.offset, stopColor: stop.color, stopOpacity: stop.opacity })); })))) : null,
+            shadow ? (react_1.default.createElement("filter", { id: shadowId, x: "-25%", y: "-25%", width: "150%", height: "150%" },
+                react_1.default.createElement("feDropShadow", { dx: shadow.offsetX, dy: shadow.offsetY, stdDeviation: shadow.blurRadius / 2, floodColor: shadow.color, floodOpacity: shadow.opacity }))) : null),
+        react_1.default.createElement("g", { transform: flips.length ? flips.join(" ") : undefined },
+            react_1.default.createElement("path", { d: d, fill: fillAttr, fillOpacity: fill.kind === "solid" ? fill.opacity : undefined, stroke: (_c = outline === null || outline === void 0 ? void 0 : outline.color) !== null && _c !== void 0 ? _c : "none", strokeWidth: outline === null || outline === void 0 ? void 0 : outline.width, strokeOpacity: outline === null || outline === void 0 ? void 0 : outline.opacity, strokeDasharray: outline ? dashArray(outline.dash, outline.width) : undefined, strokeLinejoin: "round", filter: shadow ? "url(#".concat(shadowId, ")") : undefined }))));
+};
+exports.ShapeSvg = ShapeSvg;

package/dist/cjs/components/embeds/slicer-component.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import type { PivotTable, Slicer, TableView } from "../../types";
+import type { CanvasGridProps, SpreadsheetTheme } from "../canvas-grid/typings";
+export type SlicerComponentProps = {
+    sheetId: number;
+    slicer: Slicer;
+    theme: SpreadsheetTheme;
+    backgroundColor?: string;
+    width: number;
+    height: number;
+    isSelected: boolean;
+    readonly?: boolean;
+    onDeleteSlicer: CanvasGridProps["onDeleteSlicer"];
+    onFilterTable?: CanvasGridProps["onFilterTable"];
+    /**
+     * Apply the slicer's selection to bound pivot tables. Mirrors
+     * `usePivot.applySlicerSelectionToPivots` — pass an empty array to
+     * clear the pivot's filter on the slicer's field, or a non-empty
+     * list of values to keep only those.
+     */
+    onFilterPivot?(pivotTableIds: (string | number)[], fieldName: string, selectedValues: string[]): void;
+    tables?: TableView[] | null;
+    pivotTables?: PivotTable[] | null;
+    getFormattedValue?: CanvasGridProps["getFormattedValue"];
+};
+export declare const SlicerComponent: React.MemoExoticComponent<({ slicer, tables, pivotTables, getFormattedValue, onFilterTable, onFilterPivot, onDeleteSlicer, readonly, }: SlicerComponentProps) => React.JSX.Element>;
+//# sourceMappingURL=slicer-component.d.ts.map

package/dist/cjs/components/embeds/slicer-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slicer-component.d.ts","sourceRoot":"","sources":["../../../../components/embeds/slicer-component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAMhF,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,gBAAgB,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAClD,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD;;;;;OAKG;IACH,aAAa,CAAC,CACZ,aAAa,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAClC,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,MAAM,EAAE,GACvB,IAAI,CAAC;IAER,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAClC,iBAAiB,CAAC,EAAE,eAAe,CAAC,mBAAmB,CAAC,CAAC;CAC1D,CAAC;AAEF,eAAO,MAAM,eAAe,0IAUvB,oBAAoB,uBA2UxB,CAAC"}