@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/embeds/chart-component.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { EmbeddedChart } from "../../types";
+import type { CanvasGridProps, SpreadsheetTheme } from "../canvas-grid/typings";
+export type ChartComponentProps = {
+    sheetId: number;
+    chart: EmbeddedChart;
+    theme: SpreadsheetTheme;
+    backgroundColor?: string;
+    width: number;
+    height: number;
+    isSelected: boolean;
+    readonly?: boolean;
+    onDeleteChart: CanvasGridProps["onDeleteChart"];
+};
+export declare const ChartComponent: React.MemoExoticComponent<({ backgroundColor }: ChartComponentProps) => React.JSX.Element>;
+//# sourceMappingURL=chart-component.d.ts.map

package/dist/esm/components/embeds/chart-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-component.d.ts","sourceRoot":"","sources":["../../../../components/embeds/chart-component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAEhF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,aAAa,CAAC;IACrB,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,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,cAAc,kDACH,mBAAmB,uBAY1C,CAAC"}

package/dist/esm/components/embeds/chart-component.js

@@ -0,0 +1,7 @@
+import React, { memo } from "react";
+export const ChartComponent = memo(({ backgroundColor }) => {
+    return (React.createElement("div", { className: "bg-rnc-background flex-1 flex break-words flex-col", style: {
+            background: backgroundColor,
+        } }, "Customize this embed by using `getChartComponent` prop."));
+});
+ChartComponent.displayName = "ChartComponent";

package/dist/esm/components/embeds/embed-component.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { EmbeddedObject } from "../../types";
+import type { CanvasGridProps, SpreadsheetTheme } from "../canvas-grid/typings";
+export type EmbedComponentProps = {
+    embed: EmbeddedObject;
+    theme: SpreadsheetTheme;
+    backgroundColor?: string;
+    width: number;
+    height: number;
+    isSelected: boolean;
+    sheetId: number;
+    readonly?: boolean;
+    onDeleteEmbed: CanvasGridProps["onDeleteEmbed"];
+    onRequestEditEmbed: CanvasGridProps["onRequestEditEmbed"];
+};
+export declare const EmbedComponent: React.MemoExoticComponent<({ embed, width, height, readonly, isSelected, onDeleteEmbed, onRequestEditEmbed, theme, }: EmbedComponentProps) => React.JSX.Element>;
+//# sourceMappingURL=embed-component.d.ts.map

package/dist/esm/components/embeds/embed-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"embed-component.d.ts","sourceRoot":"","sources":["../../../../components/embeds/embed-component.tsx"],"names":[],"mappings":"AASA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EACV,cAAc,EAIf,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIhF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,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,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,kBAAkB,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,cAAc,wHAUtB,mBAAmB,uBA+LvB,CAAC"}

package/dist/esm/components/embeds/embed-component.js

@@ -0,0 +1,124 @@
+import { DotsVerticalIcon } from "@rowsncolumns/icons";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger, IconButton, } from "@rowsncolumns/ui";
+import React, { memo } from "react";
+import { getStringifiedColor } from "../../themes";
+import { ShapeSvg } from "./shape-svg";
+export const EmbedComponent = memo(({ embed, width, height, readonly, isSelected, onDeleteEmbed, onRequestEditEmbed, theme, }) => {
+    const renderTextBox = (spec) => {
+        const backgroundColor = spec.backgroundColor
+            ? getStringifiedColor(spec.backgroundColor, theme)
+            : undefined;
+        const textColor = spec.textFormat?.color
+            ? getStringifiedColor(spec.textFormat.color, theme)
+            : undefined;
+        const textStyle = {
+            fontFamily: spec.textFormat?.fontFamily || undefined,
+            fontSize: spec.textFormat?.fontSize
+                ? `${spec.textFormat.fontSize * (spec.textFormat?.baselineOffset ? 0.58 : 1)}px`
+                : spec.textFormat?.baselineOffset
+                    ? "0.58em"
+                    : undefined,
+            verticalAlign: spec.textFormat?.baselineOffset === "superscript"
+                ? "super"
+                : spec.textFormat?.baselineOffset === "subscript"
+                    ? "sub"
+                    : undefined,
+            fontWeight: spec.textFormat?.bold ? "bold" : undefined,
+            fontStyle: spec.textFormat?.italic ? "italic" : undefined,
+            textDecoration: [
+                spec.textFormat?.strikethrough ? "line-through" : "",
+                spec.textFormat?.underline ? "underline" : "",
+            ]
+                .filter(Boolean)
+                .join(" ") || undefined,
+            color: textColor,
+            margin: 0,
+        };
+        const containerStyle = {
+            width: "100%",
+            height: "100%",
+            backgroundColor,
+            padding: spec.padding ? `${spec.padding}px` : "4px",
+            textAlign: spec.horizontalAlignment || undefined,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: spec.verticalAlignment === "top"
+                ? "flex-start"
+                : spec.verticalAlignment === "bottom"
+                    ? "flex-end"
+                    : "center",
+            wordWrap: spec.wrapStrategy === "wrap" ? "break-word" : undefined,
+            overflow: spec.wrapStrategy === "clip" ? "hidden" : undefined,
+            whiteSpace: spec.wrapStrategy === "overflow" ? "nowrap" : "pre-wrap",
+            borderTop: spec.borders?.top
+                ? `${spec.borders.top.width}px ${spec.borders.top.style} ${getStringifiedColor(spec.borders.top.color, theme)}`
+                : undefined,
+            borderRight: spec.borders?.right
+                ? `${spec.borders.right.width}px ${spec.borders.right.style} ${getStringifiedColor(spec.borders.right.color, theme)}`
+                : undefined,
+            borderBottom: spec.borders?.bottom
+                ? `${spec.borders.bottom.width}px ${spec.borders.bottom.style} ${getStringifiedColor(spec.borders.bottom.color, theme)}`
+                : undefined,
+            borderLeft: spec.borders?.left
+                ? `${spec.borders.left.width}px ${spec.borders.left.style} ${getStringifiedColor(spec.borders.left.color, theme)}`
+                : undefined,
+            lineHeight: 1.15,
+        };
+        // Render rich text if available
+        if (spec.richText && spec.richText.length > 0) {
+            return (React.createElement("div", { style: containerStyle },
+                React.createElement("div", { style: textStyle }, spec.richText.map((run, index) => {
+                    const runStyle = {
+                        fontFamily: run.format?.fontFamily || undefined,
+                        fontSize: run.format?.fontSize
+                            ? `${run.format.fontSize * (run.format?.baselineOffset ? 0.58 : 1)}px`
+                            : run.format?.baselineOffset
+                                ? "0.58em"
+                                : undefined,
+                        verticalAlign: run.format?.baselineOffset === "superscript"
+                            ? "super"
+                            : run.format?.baselineOffset === "subscript"
+                                ? "sub"
+                                : undefined,
+                        fontWeight: run.format?.bold ? "bold" : undefined,
+                        fontStyle: run.format?.italic ? "italic" : undefined,
+                        textDecoration: [
+                            run.format?.strikethrough ? "line-through" : "",
+                            run.format?.underline ? "underline" : "",
+                        ]
+                            .filter(Boolean)
+                            .join(" ") || undefined,
+                        color: run.format?.color
+                            ? getStringifiedColor(run.format.color, theme)
+                            : undefined,
+                    };
+                    return (React.createElement("span", { key: index, style: runStyle }, run.text));
+                }))));
+        }
+        // Render plain text
+        return (React.createElement("div", { style: containerStyle },
+            React.createElement("div", { style: textStyle }, spec.text || "")));
+    };
+    return (React.createElement("div", { className: "flex-1 flex break-words flex-col" },
+        embed?.spec.type === "image" ? (React.createElement("img", { className: "max-w-full max-h-full", alt: embed.spec.description, draggable: false, width: width, height: height, src: embed.spec.imageUrl, crossOrigin: "anonymous" })) : null,
+        embed?.spec.type === "textbox"
+            ? renderTextBox(embed.spec)
+            : null,
+        embed?.spec.type === "shape" ? (React.createElement("div", { style: { position: "relative", width: "100%", height: "100%" } },
+            React.createElement(ShapeSvg, { spec: embed.spec, width: width, height: height, theme: theme }),
+            embed.spec.textBody ? (React.createElement("div", { style: { position: "absolute", inset: 0 } }, renderTextBox({
+                type: "textbox",
+                ...embed.spec.textBody,
+            }))) : null)) : null,
+        readonly || !isSelected ? null : (React.createElement(DropdownMenu, null,
+            React.createElement(DropdownMenuTrigger, { asChild: true, className: "print:hidden" },
+                React.createElement(IconButton, { className: "absolute right-1 top-1 z-10" },
+                    React.createElement(DotsVerticalIcon, null))),
+            React.createElement(DropdownMenuPortal, null,
+                React.createElement(DropdownMenuContent, { align: "start" },
+                    React.createElement(DropdownMenuItem, { onClick: () => onRequestEditEmbed?.(embed) }, "Edit"),
+                    React.createElement(DropdownMenuItem, { onClick: () => {
+                            onDeleteEmbed?.(embed.embedId);
+                        } }, "Delete")))))));
+});
+EmbedComponent.displayName = "EmbedComponent";

package/dist/esm/components/embeds/embed-draggable.d.ts

@@ -0,0 +1,43 @@
+import type { CellInterface } from "@rowsncolumns/grid";
+import React from "react";
+import type { DraggableBounds } from "react-draggable";
+type EmbedDraggableProps = Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "onResize" | "children"> & {
+    id: string | number;
+    height: number;
+    width: number;
+    offsetXPixels: number;
+    offsetYPixels: number;
+    isSelected: boolean;
+    borderColor?: string;
+    lockAspectRatio?: boolean;
+    bounds?: DraggableBounds;
+    scale?: number;
+    resizable?: boolean;
+    draggable?: boolean;
+    rotatable?: boolean;
+    /**
+     * Callback when user moves an embed
+     * @param top
+     * @param left
+     */
+    onMove?(id: string | number, x: number, y: number): void;
+    /**
+     * Callback when user resizes
+     * @param width
+     * @param height
+     */
+    onResize?(id: string | number, x: number, y: number, width: number, height: number): void;
+    /**
+     * On delete
+     * @param id
+     */
+    onDelete?(id: string | number): void;
+    /**
+     * Anchor cell
+     */
+    anchorCell: CellInterface;
+    children: (width: number, height: number) => React.ReactNode;
+};
+export declare const EmbedDraggable: ({ id, scale, height, width, offsetXPixels, offsetYPixels, isSelected, borderColor, lockAspectRatio, resizable, draggable, children, onMove, onResize, onDelete, onMouseMove, onPointerDown, bounds, anchorCell, }: EmbedDraggableProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=embed-draggable.d.ts.map

package/dist/esm/components/embeds/embed-draggable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"embed-draggable.d.ts","sourceRoot":"","sources":["../../../../components/embeds/embed-draggable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,iBAAiB,CAAC;AAOzB,KAAK,mBAAmB,GAAG,IAAI,CAC7B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,IAAI,GAAG,UAAU,GAAG,UAAU,CAC/B,GAAG;IACF,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzD;;;;OAIG;IACH,QAAQ,CAAC,CACP,EAAE,EAAE,MAAM,GAAG,MAAM,EACnB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,IAAI,CAAC;IACR;;;OAGG;IACH,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACrC;;OAEG;IACH,UAAU,EAAE,aAAa,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D,CAAC;AAoBF,eAAO,MAAM,cAAc,GAAI,mNAoB5B,mBAAmB,sBA0KrB,CAAC"}

package/dist/esm/components/embeds/embed-draggable.js

@@ -0,0 +1,115 @@
+import { useGridContext } from "@rowsncolumns/grid";
+import { cn } from "@rowsncolumns/ui";
+import React, { useCallback, useRef, useState } from "react";
+import Draggable from "react-draggable";
+import { Resizable } from "react-resizable";
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
+const resizeHandles = [
+    "se",
+    "n",
+    "w",
+    "s",
+    "e",
+    "ne",
+    "nw",
+    "sw",
+];
+export const EmbedDraggable = ({ id, scale = 1, height, width, offsetXPixels, offsetYPixels, isSelected, borderColor, lockAspectRatio, resizable = true, draggable = true, children, onMove, onResize, onDelete, onMouseMove, onPointerDown, bounds, anchorCell, }) => {
+    const { getCellOffsetFromCoords } = useGridContext();
+    const position = getCellOffsetFromCoords?.(anchorCell);
+    const x = (position?.x ?? 0) + offsetXPixels;
+    const y = (position?.y ?? 0) + offsetYPixels;
+    const [dimensions, setDimensions] = useState(() => ({
+        internalWidth: width,
+        internalHeight: height,
+        internalX: x,
+        internalY: y,
+    }));
+    const { internalWidth, internalHeight, internalX, internalY } = dimensions;
+    const incomingDimensionRef = useRef(undefined);
+    const nodeRef = useRef(null);
+    // Focus if selected index changes
+    useIsomorphicLayoutEffect(() => {
+        if (isSelected && document.activeElement !== nodeRef.current) {
+            nodeRef.current?.focus({ preventScroll: true });
+        }
+    }, [isSelected]);
+    // Handle move. Update internal state
+    const handleMove = useCallback((e, data) => {
+        setDimensions((prev) => ({
+            ...prev,
+            internalX: data.x,
+            internalY: data.y,
+        }));
+    }, []);
+    // Ends moving
+    const handleMoveEnd = useCallback((e, data) => {
+        if (incomingDimensionRef.current?.x === data.x &&
+            incomingDimensionRef.current?.y === data.y) {
+            return;
+        }
+        onMove?.(id, data.x, data.y);
+    }, [onMove, id]);
+    // Resizing: Update internal state
+    const handleResize = useCallback((e, { size, handle }) => {
+        setDimensions((prev) => {
+            let internalY = prev.internalY;
+            let internalX = prev.internalX;
+            const deltaHeight = size.height - prev.internalHeight;
+            const deltaWidth = size.width - prev.internalWidth;
+            if (handle[0] === "n") {
+                internalY -= deltaHeight;
+            }
+            if (handle[handle.length - 1] === "w") {
+                internalX -= deltaWidth;
+            }
+            return {
+                ...prev,
+                internalX,
+                internalY,
+                internalHeight: size.height,
+                internalWidth: size.width,
+            };
+        });
+    }, []);
+    // Resize ends
+    const handleResizeEnd = useCallback((e, { size }) => {
+        if (incomingDimensionRef.current?.width === size.width &&
+            incomingDimensionRef.current?.height === size.height) {
+            return;
+        }
+        onResize?.(id, dimensions.internalX, dimensions.internalY, size.width / scale, size.height / scale);
+    }, [onResize, id, scale, dimensions]);
+    // When state is saved, update internal state
+    useIsomorphicLayoutEffect(() => {
+        incomingDimensionRef.current = {
+            x,
+            y,
+            width,
+            height,
+        };
+        setDimensions({
+            internalX: x,
+            internalY: y,
+            internalHeight: height,
+            internalWidth: width,
+        });
+    }, [width, height, x, y]);
+    return (React.createElement(Draggable, { nodeRef: nodeRef, position: {
+            x: internalX,
+            y: internalY,
+        }, bounds: bounds, onDrag: handleMove, onStop: handleMoveEnd, cancel: ".react-resizable-handle, .rnc-draggable-ignore, .plot-container .draglayer", scale: 1, disabled: !draggable },
+        React.createElement(Resizable, { width: internalWidth, height: internalHeight, onResize: handleResize, onResizeStop: handleResizeEnd, lockAspectRatio: lockAspectRatio, resizeHandles: resizable ? resizeHandles : [] },
+            React.createElement("div", { className: cn("text-rnc-foreground text-sm pointer-events-auto border border-solid border-transparent flex select-none box-content absolute rnc-embed-component outline-none", isSelected ? "[&_.react-resizable-handle]:bg-[#1a73e8]" : undefined, isSelected ? "rnc-embed-active" : undefined), style: {
+                    width: internalWidth,
+                    height: internalHeight,
+                    borderColor,
+                    zIndex: isSelected ? 1 : undefined,
+                }, tabIndex: 0, onKeyDown: (e) => {
+                    if (e.key === "Backspace" || e.key === "Delete") {
+                        onDelete?.(id);
+                    }
+                }, ref: nodeRef, onMouseMove: onMouseMove, onPointerDown: onPointerDown, onContextMenu: (e) => {
+                    e.stopPropagation();
+                } }, children(internalWidth, internalHeight)))));
+};

package/dist/esm/components/embeds/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./embed-draggable";
+export * from "./chart-component";
+export * from "./embed-component";
+export * from "./slicer-component";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/embeds/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/embeds/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}

package/dist/esm/components/embeds/index.js

@@ -0,0 +1,4 @@
+export * from "./embed-draggable";
+export * from "./chart-component";
+export * from "./embed-component";
+export * from "./slicer-component";

package/dist/esm/components/embeds/shape-geometry.d.ts

@@ -0,0 +1,10 @@
+import type { Maybe } from "../../types";
+/** Presets with a dedicated builder (everything else renders as a rectangle). */
+export declare const isRenderedShapePreset: (preset: string) => boolean;
+/**
+ * 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.
+ */
+export declare const presetShapePath: (preset: string, width: number, height: number, adjustments?: Maybe<Record<string, number>>) => string;
+//# sourceMappingURL=shape-geometry.d.ts.map

package/dist/esm/components/embeds/shape-geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-geometry.d.ts","sourceRoot":"","sources":["../../../../components/embeds/shape-geometry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAiSzC,iFAAiF;AACjF,eAAO,MAAM,qBAAqB,GAAI,QAAQ,MAAM,KAAG,OACnC,CAAC;AAErB;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAC1B,QAAQ,MAAM,EACd,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,cAAc,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAC1C,MAKF,CAAC"}

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

@@ -0,0 +1,224 @@
+const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+/** Round to 2dp so path output is stable across platforms (and in tests). */
+const n = (v) => `${Math.round(v * 100) / 100}`;
+const polygon = (points) => `M${points.map(([x, y]) => `${n(x)} ${n(y)}`).join("L")}Z`;
+const rect = (w, h) => polygon([[0, 0], [w, 0], [w, h], [0, h]]);
+const roundRect = (w, h, adj) => {
+    // Corner radius = shorter side × adj (default 16.667%, max 50%).
+    const r = Math.min(w, h) * (clamp(adj("adj", 16667), 0, 50000) / 100000);
+    const arc = (x, y) => `A${n(r)} ${n(r)} 0 0 1 ${n(x)} ${n(y)}`;
+    return (`M${n(r)} 0H${n(w - r)}${arc(w, r)}V${n(h - r)}${arc(w - r, h)}` +
+        `H${n(r)}${arc(0, h - r)}V${n(r)}${arc(r, 0)}Z`);
+};
+const snipSingleCornerRect = (w, h, adj) => {
+    const 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]]);
+};
+const ellipse = (w, h) => {
+    const rx = w / 2;
+    const ry = h / 2;
+    return (`M0 ${n(ry)}A${n(rx)} ${n(ry)} 0 1 0 ${n(w)} ${n(ry)}` +
+        `A${n(rx)} ${n(ry)} 0 1 0 0 ${n(ry)}Z`);
+};
+const triangle = (w, h, adj) => {
+    // adj positions the apex horizontally (default: centered).
+    const apexX = w * (clamp(adj("adj", 50000), 0, 100000) / 100000);
+    return polygon([[apexX, 0], [w, h], [0, h]]);
+};
+const rightTriangle = (w, h) => polygon([[0, 0], [w, h], [0, h]]);
+const diamond = (w, h) => polygon([[w / 2, 0], [w, h / 2], [w / 2, h], [0, h / 2]]);
+const parallelogram = (w, h, adj) => {
+    const 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]]);
+};
+const trapezoid = (w, h, adj) => {
+    const 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]]);
+};
+const pentagon = (w, h) => polygon([
+    [w / 2, 0],
+    [w, h * 0.381],
+    [w * 0.809, h],
+    [w * 0.191, h],
+    [0, h * 0.381],
+]);
+const hexagon = (w, h, adj) => {
+    const 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],
+    ]);
+};
+const octagon = (w, h, adj) => {
+    const 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],
+    ]);
+};
+const star5 = (w, h, adj) => {
+    // Inner radius as a fraction of the outer (OOXML default 19098/50000 ≈ 0.38).
+    const innerRatio = clamp(adj("adj", 19098), 0, 50000) / 50000;
+    const cx = w / 2;
+    const cy = h / 2;
+    const points = [];
+    for (let i = 0; i < 5; i++) {
+        const outer = ((-90 + i * 72) * Math.PI) / 180;
+        const 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%).
+ */
+const arrowPoints = (length, breadth, ss, adj) => {
+    const shaftHalf = (breadth * (clamp(adj("adj1", 50000), 0, 100000) / 100000)) / 2;
+    const head = Math.min(ss * (clamp(adj("adj2", 50000), 0, 200000) / 100000), length);
+    const 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],
+    ];
+};
+const rightArrow = (w, h, adj) => polygon(arrowPoints(w, h, Math.min(w, h), adj));
+const leftArrow = (w, h, adj) => polygon(arrowPoints(w, h, Math.min(w, h), adj).map(([x, y]) => [w - x, y]));
+const downArrow = (w, h, adj) => polygon(arrowPoints(h, w, Math.min(w, h), adj).map(([x, y]) => [y, x]));
+const upArrow = (w, h, adj) => polygon(arrowPoints(h, w, Math.min(w, h), adj).map(([x, y]) => [y, h - x]));
+const leftRightArrow = (w, h, adj) => {
+    const ss = Math.min(w, h);
+    const shaftHalf = (h * (clamp(adj("adj1", 50000), 0, 100000) / 100000)) / 2;
+    const head = Math.min(ss * (clamp(adj("adj2", 50000), 0, 200000) / 100000), w / 2);
+    const 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],
+    ]);
+};
+const chevron = (w, h, adj) => {
+    const 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.
+ */
+const calloutTail = (w, h, adj) => {
+    const dx = adj("adj1", -20833) / 100000;
+    const dy = adj("adj2", 62500) / 100000;
+    const tip = [w / 2 + w * dx, h / 2 + h * dy];
+    const halfBase = Math.min(w, h) * 0.125;
+    const vertical = Math.abs(dy) >= Math.abs(dx);
+    const edge = vertical
+        ? dy > 0
+            ? "bottom"
+            : "top"
+        : dx > 0
+            ? "right"
+            : "left";
+    const 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, base, edge };
+};
+const wedgeRectCallout = (w, h, adj) => {
+    const { tip, base, edge } = calloutTail(w, h, adj);
+    const [b1, b2] = base;
+    // 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).
+const wedgeRoundRectCallout = (w, h, adj) => `${roundRect(w, h, adj)}${polygon([...calloutTail(w, h, adj).base, calloutTail(w, h, adj).tip])}`;
+const wedgeEllipseCallout = (w, h, adj) => {
+    const { tip, base } = calloutTail(w, h, adj);
+    return `${ellipse(w, h, adj)}${polygon([...base, tip])}`;
+};
+const BUILDERS = {
+    rect,
+    roundRect,
+    snipSingleCornerRect,
+    ellipse,
+    triangle,
+    rightTriangle,
+    diamond,
+    parallelogram,
+    trapezoid,
+    pentagon,
+    hexagon,
+    octagon,
+    star5,
+    rightArrow,
+    leftArrow,
+    upArrow,
+    downArrow,
+    leftRightArrow,
+    chevron,
+    wedgeRectCallout,
+    wedgeRoundRectCallout,
+    wedgeEllipseCallout,
+};
+/** Presets with a dedicated builder (everything else renders as a rectangle). */
+export const isRenderedShapePreset = (preset) => preset in BUILDERS;
+/**
+ * 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.
+ */
+export const presetShapePath = (preset, width, height, adjustments) => {
+    const builder = BUILDERS[preset] ?? rect;
+    const read = (name, defaultValue) => adjustments?.[name] ?? defaultValue;
+    return builder(Math.max(width, 1), Math.max(height, 1), read);
+};

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