@remotion/studio-server 4.0.494 → 4.0.496

package/dist/figma/figma-to-svg.js

@@ -0,0 +1,1300 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderFigmaMessageToSvg = exports.decodeFigmaVectorNetwork = void 0;
+const maxVectorItems = 100000;
+const maxRenderingDepth = 256;
+const supportedContainers = new Set(['FRAME', 'GROUP']);
+const fullCircle = Math.PI * 2;
+const fullCircleTolerance = 0.00001;
+const fail = (message) => {
+    throw new Error(`Cannot import Figma selection: ${message}`);
+};
+const guidKey = (guid) => {
+    if (guid === undefined ||
+        !Number.isInteger(guid.sessionID) ||
+        !Number.isInteger(guid.localID)) {
+        return null;
+    }
+    return `${guid.sessionID}:${guid.localID}`;
+};
+const nodeLabel = (node) => {
+    var _a;
+    return node.name ? `“${node.name}”` : ((_a = node.type) !== null && _a !== void 0 ? _a : 'unknown node');
+};
+const finiteNumber = ({ fallback, label, value, }) => {
+    const resolved = value !== null && value !== void 0 ? value : fallback;
+    if (!Number.isFinite(resolved)) {
+        fail(`${label} is not finite`);
+    }
+    return resolved;
+};
+const unitInterval = ({ fallback, label, value, }) => {
+    const resolved = finiteNumber({ fallback, label, value });
+    if (resolved < 0 || resolved > 1) {
+        fail(`${label} must be between 0 and 1`);
+    }
+    return resolved;
+};
+const formatNumber = (value) => {
+    const normalized = Math.abs(value) < 5e-7 ? 0 : value;
+    return normalized
+        .toFixed(6)
+        .replace(/\.0+$/, '')
+        .replace(/(\.\d*?)0+$/, '$1');
+};
+const escapeAttribute = (value) => {
+    return value
+        .replaceAll('&', '&amp;')
+        .replaceAll('"', '&quot;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;');
+};
+const readCount = ({ data, label, offset, view, }) => {
+    if (offset + 4 > data.length) {
+        fail(`vector geometry ended while reading ${label}`);
+    }
+    const count = view.getUint32(offset, true);
+    if (count > maxVectorItems) {
+        fail(`vector geometry has too many ${label}`);
+    }
+    return count;
+};
+const readFloat = ({ data, label, offset, view, }) => {
+    if (offset + 4 > data.length) {
+        fail(`vector geometry ended while reading ${label}`);
+    }
+    const value = view.getFloat32(offset, true);
+    if (!Number.isFinite(value)) {
+        fail(`vector geometry contains an invalid ${label}`);
+    }
+    return value;
+};
+const decodeFigmaVectorNetwork = (data) => {
+    if (data.length < 12) {
+        fail('vector geometry is truncated');
+    }
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+    const vertexCount = readCount({
+        data,
+        label: 'vertices',
+        offset: 0,
+        view,
+    });
+    const segmentCount = readCount({
+        data,
+        label: 'segments',
+        offset: 4,
+        view,
+    });
+    const regionCount = readCount({
+        data,
+        label: 'regions',
+        offset: 8,
+        view,
+    });
+    let itemCount = vertexCount + segmentCount + regionCount;
+    const countItems = (count) => {
+        if (count > maxVectorItems - itemCount) {
+            fail('vector geometry has too many items');
+        }
+        itemCount += count;
+    };
+    if (itemCount > maxVectorItems) {
+        fail('vector geometry has too many items');
+    }
+    const fixedLength = 12 + vertexCount * 12 + segmentCount * 28;
+    if (fixedLength > data.length) {
+        fail('vector geometry is truncated');
+    }
+    let offset = 12;
+    const vertices = [];
+    for (let index = 0; index < vertexCount; index++) {
+        offset += 4;
+        const x = readFloat({ data, label: 'vertex x', offset, view });
+        offset += 4;
+        const y = readFloat({ data, label: 'vertex y', offset, view });
+        offset += 4;
+        vertices.push({ x, y });
+    }
+    const segments = [];
+    for (let index = 0; index < segmentCount; index++) {
+        offset += 4;
+        const start = view.getUint32(offset, true);
+        offset += 4;
+        const tangentStartX = readFloat({
+            data,
+            label: 'start tangent x',
+            offset,
+            view,
+        });
+        offset += 4;
+        const tangentStartY = readFloat({
+            data,
+            label: 'start tangent y',
+            offset,
+            view,
+        });
+        offset += 4;
+        const end = view.getUint32(offset, true);
+        offset += 4;
+        const tangentEndX = readFloat({
+            data,
+            label: 'end tangent x',
+            offset,
+            view,
+        });
+        offset += 4;
+        const tangentEndY = readFloat({
+            data,
+            label: 'end tangent y',
+            offset,
+            view,
+        });
+        offset += 4;
+        if (start >= vertices.length || end >= vertices.length) {
+            fail('vector geometry references a missing vertex');
+        }
+        segments.push({
+            start,
+            end,
+            tangentStart: { x: tangentStartX, y: tangentStartY },
+            tangentEnd: { x: tangentEndX, y: tangentEndY },
+        });
+    }
+    const regions = [];
+    for (let regionIndex = 0; regionIndex < regionCount; regionIndex++) {
+        if (offset + 8 > data.length) {
+            fail('vector region is truncated');
+        }
+        const windingRuleValue = view.getUint32(offset, true);
+        offset += 4;
+        if (windingRuleValue !== 0 && windingRuleValue !== 1) {
+            fail('vector geometry has an unknown winding rule');
+        }
+        const loopCount = readCount({
+            data,
+            label: 'region loops',
+            offset,
+            view,
+        });
+        countItems(loopCount);
+        offset += 4;
+        const loops = [];
+        for (let loopIndex = 0; loopIndex < loopCount; loopIndex++) {
+            const segmentIndexCount = readCount({
+                data,
+                label: 'loop segments',
+                offset,
+                view,
+            });
+            countItems(segmentIndexCount);
+            offset += 4;
+            if (offset + segmentIndexCount * 4 > data.length) {
+                fail('vector loop is truncated');
+            }
+            const loop = [];
+            for (let index = 0; index < segmentIndexCount; index++) {
+                const segmentIndex = view.getUint32(offset, true);
+                offset += 4;
+                if (segmentIndex >= segments.length) {
+                    fail('vector loop references a missing segment');
+                }
+                loop.push(segmentIndex);
+            }
+            loops.push(loop);
+        }
+        regions.push({
+            windingRule: windingRuleValue === 1 ? 'evenodd' : 'nonzero',
+            loops,
+        });
+    }
+    if (offset !== data.length) {
+        fail('vector geometry uses a newer unsupported format');
+    }
+    return { vertices, segments, regions };
+};
+exports.decodeFigmaVectorNetwork = decodeFigmaVectorNetwork;
+const segmentCommand = ({ network, reversed, segment, }) => {
+    const originalStart = network.vertices[segment.start];
+    const originalEnd = network.vertices[segment.end];
+    const end = reversed ? originalStart : originalEnd;
+    const control1 = reversed
+        ? {
+            x: originalEnd.x + segment.tangentEnd.x,
+            y: originalEnd.y + segment.tangentEnd.y,
+        }
+        : {
+            x: originalStart.x + segment.tangentStart.x,
+            y: originalStart.y + segment.tangentStart.y,
+        };
+    const control2 = reversed
+        ? {
+            x: originalStart.x + segment.tangentStart.x,
+            y: originalStart.y + segment.tangentStart.y,
+        }
+        : {
+            x: originalEnd.x + segment.tangentEnd.x,
+            y: originalEnd.y + segment.tangentEnd.y,
+        };
+    const hasCurve = segment.tangentStart.x !== 0 ||
+        segment.tangentStart.y !== 0 ||
+        segment.tangentEnd.x !== 0 ||
+        segment.tangentEnd.y !== 0;
+    if (!hasCurve) {
+        return `L ${formatNumber(end.x)} ${formatNumber(end.y)}`;
+    }
+    return `C ${formatNumber(control1.x)} ${formatNumber(control1.y)} ${formatNumber(control2.x)} ${formatNumber(control2.y)} ${formatNumber(end.x)} ${formatNumber(end.y)}`;
+};
+const buildOrderedPath = ({ close, network, segmentIndices, }) => {
+    if (segmentIndices.length === 0) {
+        return null;
+    }
+    for (const reverseFirst of [false, true]) {
+        const firstSegment = network.segments[segmentIndices[0]];
+        const startIndex = reverseFirst ? firstSegment.end : firstSegment.start;
+        let endIndex = reverseFirst ? firstSegment.start : firstSegment.end;
+        const start = network.vertices[startIndex];
+        const commands = [
+            `M ${formatNumber(start.x)} ${formatNumber(start.y)}`,
+            segmentCommand({
+                network,
+                reversed: reverseFirst,
+                segment: firstSegment,
+            }),
+        ];
+        let valid = true;
+        for (let index = 1; index < segmentIndices.length; index++) {
+            const segment = network.segments[segmentIndices[index]];
+            const reversed = segment.end === endIndex;
+            if (segment.start !== endIndex && !reversed) {
+                valid = false;
+                break;
+            }
+            commands.push(segmentCommand({ network, reversed, segment }));
+            endIndex = reversed ? segment.start : segment.end;
+        }
+        if (valid && (!close || endIndex === startIndex)) {
+            if (close) {
+                commands.push('Z');
+            }
+            return commands.join(' ');
+        }
+    }
+    return null;
+};
+const traceNetworkPaths = (network) => {
+    const degree = Array.from({ length: network.vertices.length }, () => 0);
+    for (const segment of network.segments) {
+        degree[segment.start]++;
+        degree[segment.end]++;
+    }
+    if (degree.some((value) => value > 2)) {
+        fail('branched vector networks are not supported yet');
+    }
+    const unvisited = new Set(network.segments.map((_, index) => index));
+    const paths = [];
+    while (unvisited.size > 0) {
+        let firstIndex = unvisited.values().next().value;
+        for (const candidate of unvisited) {
+            const segment = network.segments[candidate];
+            if (degree[segment.start] === 1 || degree[segment.end] === 1) {
+                firstIndex = candidate;
+                break;
+            }
+        }
+        const first = network.segments[firstIndex];
+        const reverseFirst = degree[first.end] === 1 && degree[first.start] !== 1;
+        const startIndex = reverseFirst ? first.end : first.start;
+        let endIndex = reverseFirst ? first.start : first.end;
+        const start = network.vertices[startIndex];
+        const commands = [
+            `M ${formatNumber(start.x)} ${formatNumber(start.y)}`,
+            segmentCommand({ network, reversed: reverseFirst, segment: first }),
+        ];
+        unvisited.delete(firstIndex);
+        while (true) {
+            let nextIndex = null;
+            for (const candidate of unvisited) {
+                const candidateSegment = network.segments[candidate];
+                if (candidateSegment.start === endIndex ||
+                    candidateSegment.end === endIndex) {
+                    nextIndex = candidate;
+                    break;
+                }
+            }
+            if (nextIndex === null) {
+                break;
+            }
+            const segment = network.segments[nextIndex];
+            const reversed = segment.end === endIndex;
+            commands.push(segmentCommand({ network, reversed, segment }));
+            endIndex = reversed ? segment.start : segment.end;
+            unvisited.delete(nextIndex);
+        }
+        const closed = endIndex === startIndex;
+        if (closed) {
+            commands.push('Z');
+        }
+        paths.push({ closed, d: commands.join(' ') });
+    }
+    return paths;
+};
+const getVisiblePaint = ({ kind, node, paints, }) => {
+    const visible = (paints !== null && paints !== void 0 ? paints : []).filter((candidatePaint) => candidatePaint.visible !== false);
+    if (visible.length > 1) {
+        fail(`${nodeLabel(node)} has multiple visible ${kind}s`);
+    }
+    const paint = visible[0];
+    if (paint === undefined) {
+        return null;
+    }
+    if (paint.type !== 'SOLID' || paint.color === undefined) {
+        fail(`${nodeLabel(node)} uses an unsupported ${kind} type`);
+    }
+    if (paint.blendMode !== undefined && paint.blendMode !== 'NORMAL') {
+        fail(`${nodeLabel(node)} uses an unsupported ${kind} blend mode`);
+    }
+    return paint;
+};
+const getPaintAttributes = ({ kind, paint, }) => {
+    const color = paint.color;
+    const r = Math.round(unitInterval({ fallback: 0, label: `${kind} red`, value: color.r }) * 255);
+    const g = Math.round(unitInterval({ fallback: 0, label: `${kind} green`, value: color.g }) * 255);
+    const b = Math.round(unitInterval({ fallback: 0, label: `${kind} blue`, value: color.b }) * 255);
+    const alpha = unitInterval({ fallback: 1, label: `${kind} alpha`, value: color.a }) *
+        unitInterval({
+            fallback: 1,
+            label: `${kind} opacity`,
+            value: paint.opacity,
+        });
+    const hex = `#${r.toString(16).padStart(2, '0')}${g
+        .toString(16)
+        .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    const attributes = [`${kind}="${hex}"`];
+    if (alpha < 1) {
+        attributes.push(`${kind}-opacity="${formatNumber(alpha)}"`);
+    }
+    return attributes;
+};
+const getTransform = (node) => {
+    const { transform } = node;
+    const values = {
+        m00: finiteNumber({
+            fallback: 1,
+            label: `${nodeLabel(node)} transform`,
+            value: transform === null || transform === void 0 ? void 0 : transform.m00,
+        }),
+        m01: finiteNumber({
+            fallback: 0,
+            label: `${nodeLabel(node)} transform`,
+            value: transform === null || transform === void 0 ? void 0 : transform.m01,
+        }),
+        m02: finiteNumber({
+            fallback: 0,
+            label: `${nodeLabel(node)} transform`,
+            value: transform === null || transform === void 0 ? void 0 : transform.m02,
+        }),
+        m10: finiteNumber({
+            fallback: 0,
+            label: `${nodeLabel(node)} transform`,
+            value: transform === null || transform === void 0 ? void 0 : transform.m10,
+        }),
+        m11: finiteNumber({
+            fallback: 1,
+            label: `${nodeLabel(node)} transform`,
+            value: transform === null || transform === void 0 ? void 0 : transform.m11,
+        }),
+        m12: finiteNumber({
+            fallback: 0,
+            label: `${nodeLabel(node)} transform`,
+            value: transform === null || transform === void 0 ? void 0 : transform.m12,
+        }),
+    };
+    const identity = values.m00 === 1 &&
+        values.m01 === 0 &&
+        values.m02 === 0 &&
+        values.m10 === 0 &&
+        values.m11 === 1 &&
+        values.m12 === 0;
+    return {
+        identity,
+        value: `matrix(${formatNumber(values.m00)} ${formatNumber(values.m10)} ${formatNumber(values.m01)} ${formatNumber(values.m11)} ${formatNumber(values.m02)} ${formatNumber(values.m12)})`,
+    };
+};
+const getNodeSize = (node) => {
+    var _a, _b;
+    const width = finiteNumber({
+        fallback: 0,
+        label: `${nodeLabel(node)} width`,
+        value: (_a = node.size) === null || _a === void 0 ? void 0 : _a.x,
+    });
+    const height = finiteNumber({
+        fallback: 0,
+        label: `${nodeLabel(node)} height`,
+        value: (_b = node.size) === null || _b === void 0 ? void 0 : _b.y,
+    });
+    if (width < 0 || height < 0) {
+        fail(`${nodeLabel(node)} has negative dimensions`);
+    }
+    return { height, width };
+};
+const getCornerRadius = (node) => {
+    const cornerSmoothing = finiteNumber({
+        fallback: 0,
+        label: `${nodeLabel(node)} corner smoothing`,
+        value: node.cornerSmoothing,
+    });
+    if (cornerSmoothing !== 0) {
+        fail(`${nodeLabel(node)} uses unsupported corner smoothing`);
+    }
+    const independentRadii = [
+        node.rectangleTopLeftCornerRadius,
+        node.rectangleTopRightCornerRadius,
+        node.rectangleBottomRightCornerRadius,
+        node.rectangleBottomLeftCornerRadius,
+    ].map((value) => finiteNumber({
+        fallback: 0,
+        label: `${nodeLabel(node)} corner radius`,
+        value,
+    }));
+    if (node.rectangleCornerRadiiIndependent === true &&
+        independentRadii.some((corner) => corner !== 0)) {
+        fail(`${nodeLabel(node)} uses independent corner radii`);
+    }
+    const radius = finiteNumber({
+        fallback: 0,
+        label: `${nodeLabel(node)} corner radius`,
+        value: node.cornerRadius,
+    });
+    if (radius < 0) {
+        fail(`${nodeLabel(node)} has a negative corner radius`);
+    }
+    if (independentRadii.some((corner) => corner < 0)) {
+        fail(`${nodeLabel(node)} has a negative corner radius`);
+    }
+    return radius;
+};
+const renderFrameShape = ({ node }) => {
+    const fill = getVisiblePaint({ kind: 'fill', node, paints: node.fillPaints });
+    const stroke = getVisiblePaint({
+        kind: 'stroke',
+        node,
+        paints: node.strokePaints,
+    });
+    if (fill === null && stroke === null) {
+        return '';
+    }
+    const { height, width } = getNodeSize(node);
+    const radius = getCornerRadius(node);
+    const attributes = [
+        'x="0"',
+        'y="0"',
+        `width="${formatNumber(width)}"`,
+        `height="${formatNumber(height)}"`,
+    ];
+    if (radius > 0) {
+        attributes.push(`rx="${formatNumber(radius)}"`);
+    }
+    if (fill) {
+        attributes.push(...getPaintAttributes({
+            kind: 'fill',
+            paint: fill,
+        }));
+    }
+    else {
+        attributes.push('fill="none"');
+    }
+    if (stroke) {
+        if (node.strokeAlign !== undefined && node.strokeAlign !== 'CENTER') {
+            fail(`${nodeLabel(node)} uses non-centered frame strokes`);
+        }
+        const strokeWidth = finiteNumber({
+            fallback: 1,
+            label: `${nodeLabel(node)} stroke width`,
+            value: node.strokeWeight,
+        });
+        if (strokeWidth < 0) {
+            fail(`${nodeLabel(node)} has a negative stroke width`);
+        }
+        attributes.push(...getPaintAttributes({
+            kind: 'stroke',
+            paint: stroke,
+        }), `stroke-width="${formatNumber(strokeWidth)}"`);
+        if (node.dashPattern && node.dashPattern.length > 0) {
+            const dashes = node.dashPattern.map((dash) => finiteNumber({
+                fallback: 0,
+                label: `${nodeLabel(node)} stroke dash`,
+                value: dash,
+            }));
+            if (dashes.some((dash) => dash < 0)) {
+                fail(`${nodeLabel(node)} has a negative stroke dash`);
+            }
+            attributes.push(`stroke-dasharray="${dashes.map(formatNumber).join(' ')}"`);
+        }
+        const miterLimit = finiteNumber({
+            fallback: 4,
+            label: `${nodeLabel(node)} miter limit`,
+            value: node.miterLimit,
+        });
+        if (miterLimit <= 0) {
+            fail(`${nodeLabel(node)} has an invalid miter limit`);
+        }
+        if (miterLimit !== 4) {
+            attributes.push(`stroke-miterlimit="${formatNumber(miterLimit)}"`);
+        }
+    }
+    return `<rect ${attributes.join(' ')} />`;
+};
+const pointOnEllipse = ({ angle, centerX, centerY, radiusX, radiusY, scale, }) => {
+    return {
+        x: centerX + radiusX * scale * Math.cos(angle),
+        y: centerY + radiusY * scale * Math.sin(angle),
+    };
+};
+const formatPoint = (point) => {
+    return `${formatNumber(point.x)} ${formatNumber(point.y)}`;
+};
+const getEllipseGeometry = (node) => {
+    var _a, _b, _c;
+    const { height, width } = getNodeSize(node);
+    if (width === 0 || height === 0) {
+        return null;
+    }
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const radiusX = width / 2;
+    const radiusY = height / 2;
+    const startingAngle = finiteNumber({
+        fallback: 0,
+        label: `${nodeLabel(node)} starting angle`,
+        value: (_a = node.arcData) === null || _a === void 0 ? void 0 : _a.startingAngle,
+    });
+    const endingAngle = finiteNumber({
+        fallback: fullCircle,
+        label: `${nodeLabel(node)} ending angle`,
+        value: (_b = node.arcData) === null || _b === void 0 ? void 0 : _b.endingAngle,
+    });
+    const innerRadius = unitInterval({
+        fallback: 0,
+        label: `${nodeLabel(node)} inner radius`,
+        value: (_c = node.arcData) === null || _c === void 0 ? void 0 : _c.innerRadius,
+    });
+    const rawSweep = finiteNumber({
+        fallback: 0,
+        label: `${nodeLabel(node)} arc sweep`,
+        value: endingAngle - startingAngle,
+    });
+    const isFullCircle = Math.abs(rawSweep) >= fullCircle - fullCircleTolerance;
+    if (isFullCircle && innerRadius === 0) {
+        return {
+            attributes: [
+                `cx="${formatNumber(centerX)}"`,
+                `cy="${formatNumber(centerY)}"`,
+                `rx="${formatNumber(radiusX)}"`,
+                `ry="${formatNumber(radiusY)}"`,
+            ],
+            fillRule: null,
+            tagName: 'ellipse',
+        };
+    }
+    let sweep = rawSweep % fullCircle;
+    if (sweep < 0) {
+        sweep += fullCircle;
+    }
+    if (!isFullCircle && sweep < fullCircleTolerance) {
+        return null;
+    }
+    const outerStart = pointOnEllipse({
+        angle: startingAngle,
+        centerX,
+        centerY,
+        radiusX,
+        radiusY,
+        scale: 1,
+    });
+    if (isFullCircle) {
+        const outerOpposite = pointOnEllipse({
+            angle: startingAngle + Math.PI,
+            centerX,
+            centerY,
+            radiusX,
+            radiusY,
+            scale: 1,
+        });
+        const fullInnerStart = pointOnEllipse({
+            angle: startingAngle,
+            centerX,
+            centerY,
+            radiusX,
+            radiusY,
+            scale: innerRadius,
+        });
+        const innerOpposite = pointOnEllipse({
+            angle: startingAngle + Math.PI,
+            centerX,
+            centerY,
+            radiusX,
+            radiusY,
+            scale: innerRadius,
+        });
+        return {
+            attributes: [
+                `d="M ${formatPoint(outerStart)} A ${formatNumber(radiusX)} ${formatNumber(radiusY)} 0 0 1 ${formatPoint(outerOpposite)} A ${formatNumber(radiusX)} ${formatNumber(radiusY)} 0 0 1 ${formatPoint(outerStart)} Z M ${formatPoint(fullInnerStart)} A ${formatNumber(radiusX * innerRadius)} ${formatNumber(radiusY * innerRadius)} 0 0 0 ${formatPoint(innerOpposite)} A ${formatNumber(radiusX * innerRadius)} ${formatNumber(radiusY * innerRadius)} 0 0 0 ${formatPoint(fullInnerStart)} Z"`,
+            ],
+            fillRule: 'evenodd',
+            tagName: 'path',
+        };
+    }
+    const endingAngleAfterWrap = startingAngle + sweep;
+    const outerEnd = pointOnEllipse({
+        angle: endingAngleAfterWrap,
+        centerX,
+        centerY,
+        radiusX,
+        radiusY,
+        scale: 1,
+    });
+    const largeArc = sweep > Math.PI ? 1 : 0;
+    if (innerRadius === 0) {
+        return {
+            attributes: [
+                `d="M ${formatNumber(centerX)} ${formatNumber(centerY)} L ${formatPoint(outerStart)} A ${formatNumber(radiusX)} ${formatNumber(radiusY)} 0 ${largeArc} 1 ${formatPoint(outerEnd)} Z"`,
+            ],
+            fillRule: null,
+            tagName: 'path',
+        };
+    }
+    const innerEnd = pointOnEllipse({
+        angle: endingAngleAfterWrap,
+        centerX,
+        centerY,
+        radiusX,
+        radiusY,
+        scale: innerRadius,
+    });
+    const innerStart = pointOnEllipse({
+        angle: startingAngle,
+        centerX,
+        centerY,
+        radiusX,
+        radiusY,
+        scale: innerRadius,
+    });
+    return {
+        attributes: [
+            `d="M ${formatPoint(outerStart)} A ${formatNumber(radiusX)} ${formatNumber(radiusY)} 0 ${largeArc} 1 ${formatPoint(outerEnd)} L ${formatPoint(innerEnd)} A ${formatNumber(radiusX * innerRadius)} ${formatNumber(radiusY * innerRadius)} 0 ${largeArc} 0 ${formatPoint(innerStart)} Z"`,
+        ],
+        fillRule: 'evenodd',
+        tagName: 'path',
+    };
+};
+const getRoundedRectangleGeometry = (node) => {
+    const { height, width } = getNodeSize(node);
+    if (width === 0 || height === 0) {
+        return null;
+    }
+    const cornerSmoothing = finiteNumber({
+        fallback: 0,
+        label: `${nodeLabel(node)} corner smoothing`,
+        value: node.cornerSmoothing,
+    });
+    if (cornerSmoothing !== 0) {
+        fail(`${nodeLabel(node)} uses unsupported corner smoothing`);
+    }
+    const uniformRadius = finiteNumber({
+        fallback: 0,
+        label: `${nodeLabel(node)} corner radius`,
+        value: node.cornerRadius,
+    });
+    const rawRadii = node.rectangleCornerRadiiIndependent === true
+        ? [
+            node.rectangleTopLeftCornerRadius,
+            node.rectangleTopRightCornerRadius,
+            node.rectangleBottomRightCornerRadius,
+            node.rectangleBottomLeftCornerRadius,
+        ].map((value) => finiteNumber({
+            fallback: uniformRadius,
+            label: `${nodeLabel(node)} corner radius`,
+            value,
+        }))
+        : [uniformRadius, uniformRadius, uniformRadius, uniformRadius];
+    if (rawRadii.some((radius) => radius < 0)) {
+        fail(`${nodeLabel(node)} has a negative corner radius`);
+    }
+    const maxRadius = Math.min(width / 2, height / 2);
+    const [topLeft, topRight, bottomRight, bottomLeft] = rawRadii.map((radius) => Math.min(radius, maxRadius));
+    const baseAttributes = [
+        'x="0"',
+        'y="0"',
+        `width="${formatNumber(width)}"`,
+        `height="${formatNumber(height)}"`,
+    ];
+    if (topLeft === topRight &&
+        topLeft === bottomRight &&
+        topLeft === bottomLeft) {
+        if (topLeft > 0) {
+            baseAttributes.push(`rx="${formatNumber(topLeft)}"`);
+        }
+        return { attributes: baseAttributes, fillRule: null, tagName: 'rect' };
+    }
+    const corner = ({ radius, x, y }) => {
+        return radius === 0
+            ? `L ${formatNumber(x)} ${formatNumber(y)}`
+            : `A ${formatNumber(radius)} ${formatNumber(radius)} 0 0 1 ${formatNumber(x)} ${formatNumber(y)}`;
+    };
+    return {
+        attributes: [
+            `d="M ${formatNumber(topLeft)} 0 H ${formatNumber(width - topRight)} ${corner({ radius: topRight, x: width, y: topRight })} V ${formatNumber(height - bottomRight)} ${corner({ radius: bottomRight, x: width - bottomRight, y: height })} H ${formatNumber(bottomLeft)} ${corner({ radius: bottomLeft, x: 0, y: height - bottomLeft })} V ${formatNumber(topLeft)} ${corner({ radius: topLeft, x: topLeft, y: 0 })} Z"`,
+        ],
+        fillRule: null,
+        tagName: 'path',
+    };
+};
+const renderShapeGeometry = ({ attributes, geometry, useClipRule, }) => {
+    const fillRule = geometry.fillRule
+        ? [`${useClipRule ? 'clip-rule' : 'fill-rule'}="${geometry.fillRule}"`]
+        : [];
+    return `<${geometry.tagName} ${[...geometry.attributes, ...attributes, ...fillRule].join(' ')} />`;
+};
+const getShapeStrokeAttributes = ({ node, paint, strokeWidth, }) => {
+    const cap = node.strokeCap === undefined || node.strokeCap === 'NONE'
+        ? 'butt'
+        : node.strokeCap === 'ROUND'
+            ? 'round'
+            : node.strokeCap === 'SQUARE'
+                ? 'square'
+                : null;
+    if (cap === null) {
+        fail(`${nodeLabel(node)} uses an unsupported stroke cap`);
+    }
+    const join = node.strokeJoin === undefined || node.strokeJoin === 'MITER'
+        ? 'miter'
+        : node.strokeJoin === 'ROUND'
+            ? 'round'
+            : node.strokeJoin === 'BEVEL'
+                ? 'bevel'
+                : null;
+    if (join === null) {
+        fail(`${nodeLabel(node)} uses an unsupported stroke join`);
+    }
+    const miterLimit = finiteNumber({
+        fallback: 4,
+        label: `${nodeLabel(node)} miter limit`,
+        value: node.miterLimit,
+    });
+    if (miterLimit <= 0) {
+        fail(`${nodeLabel(node)} has an invalid miter limit`);
+    }
+    const attributes = [
+        'fill="none"',
+        ...getPaintAttributes({
+            kind: 'stroke',
+            paint,
+        }),
+        `stroke-width="${formatNumber(strokeWidth)}"`,
+        `stroke-linecap="${cap}"`,
+        `stroke-linejoin="${join}"`,
+    ];
+    if (miterLimit !== 4) {
+        attributes.push(`stroke-miterlimit="${formatNumber(miterLimit)}"`);
+    }
+    if (node.dashPattern && node.dashPattern.length > 0) {
+        const dashes = node.dashPattern.map((dash) => finiteNumber({
+            fallback: 0,
+            label: `${nodeLabel(node)} stroke dash`,
+            value: dash,
+        }));
+        if (dashes.some((dash) => dash < 0)) {
+            fail(`${nodeLabel(node)} has a negative stroke dash`);
+        }
+        attributes.push(`stroke-dasharray="${dashes.map(formatNumber).join(' ')}"`);
+    }
+    return attributes;
+};
+const getShapeStrokeWidth = (node) => {
+    const strokeWidth = finiteNumber({
+        fallback: 1,
+        label: `${nodeLabel(node)} stroke width`,
+        value: node.strokeWeight,
+    });
+    if (strokeWidth < 0) {
+        fail(`${nodeLabel(node)} has a negative stroke width`);
+    }
+    if (node.borderStrokeWeightsIndependent !== true) {
+        return strokeWidth;
+    }
+    const borderWidths = [
+        node.borderTopWeight,
+        node.borderRightWeight,
+        node.borderBottomWeight,
+        node.borderLeftWeight,
+    ].map((value) => finiteNumber({
+        fallback: strokeWidth,
+        label: `${nodeLabel(node)} border width`,
+        value,
+    }));
+    if (borderWidths.some((width) => width < 0)) {
+        fail(`${nodeLabel(node)} has a negative border width`);
+    }
+    if (borderWidths.some((width) => width !== borderWidths[0])) {
+        fail(`${nodeLabel(node)} uses unsupported independent stroke weights`);
+    }
+    return borderWidths[0];
+};
+const renderPaintedShape = ({ context, getGeometry, idPrefix, node, shapeLabel, }) => {
+    var _a;
+    const fill = getVisiblePaint({ kind: 'fill', node, paints: node.fillPaints });
+    const stroke = getVisiblePaint({
+        kind: 'stroke',
+        node,
+        paints: node.strokePaints,
+    });
+    if (fill === null && stroke === null) {
+        return '';
+    }
+    const geometry = getGeometry();
+    if (geometry === null) {
+        return '';
+    }
+    const fillAttributes = fill
+        ? getPaintAttributes({
+            kind: 'fill',
+            paint: fill,
+        })
+        : ['fill="none"'];
+    if (stroke === null) {
+        return renderShapeGeometry({
+            attributes: fillAttributes,
+            geometry,
+            useClipRule: false,
+        });
+    }
+    const strokeWidth = getShapeStrokeWidth(node);
+    const strokeAlign = (_a = node.strokeAlign) !== null && _a !== void 0 ? _a : 'CENTER';
+    if (strokeAlign !== 'CENTER' && strokeAlign !== 'INSIDE') {
+        fail(`${nodeLabel(node)} uses an unsupported ${shapeLabel} stroke alignment`);
+    }
+    if (strokeAlign === 'CENTER') {
+        return renderShapeGeometry({
+            attributes: [
+                ...fillAttributes,
+                ...getShapeStrokeAttributes({
+                    node,
+                    paint: stroke,
+                    strokeWidth,
+                }).filter((attribute) => attribute !== 'fill="none"'),
+            ],
+            geometry,
+            useClipRule: false,
+        });
+    }
+    const id = `figma-${idPrefix}-stroke-${context.nextId++}`;
+    context.defs.push(`<clipPath id="${id}" clipPathUnits="userSpaceOnUse">${renderShapeGeometry({ attributes: [], geometry, useClipRule: true })}</clipPath>`);
+    const fillMarkup = fill
+        ? renderShapeGeometry({
+            attributes: fillAttributes,
+            geometry,
+            useClipRule: false,
+        })
+        : '';
+    const strokeMarkup = renderShapeGeometry({
+        attributes: getShapeStrokeAttributes({
+            node,
+            paint: stroke,
+            strokeWidth: strokeWidth * 2,
+        }),
+        geometry,
+        useClipRule: false,
+    });
+    return [fillMarkup, `<g clip-path="url(#${id})">${strokeMarkup}</g>`]
+        .filter(Boolean)
+        .join('\n');
+};
+const renderEllipse = ({ context, node, }) => {
+    return renderPaintedShape({
+        context,
+        getGeometry: () => getEllipseGeometry(node),
+        idPrefix: 'ellipse',
+        node,
+        shapeLabel: 'ellipse',
+    });
+};
+const renderRoundedRectangle = ({ context, node, }) => {
+    return renderPaintedShape({
+        context,
+        getGeometry: () => getRoundedRectangleGeometry(node),
+        idPrefix: 'rounded-rectangle',
+        node,
+        shapeLabel: 'rounded rectangle',
+    });
+};
+const getVectorNetwork = ({ context, node, }) => {
+    var _a, _b;
+    const blobIndex = (_a = node.vectorData) === null || _a === void 0 ? void 0 : _a.vectorNetworkBlob;
+    if (typeof blobIndex !== 'number' || !Number.isInteger(blobIndex)) {
+        fail(`${nodeLabel(node)} has no supported vector geometry`);
+    }
+    const blob = context.scene.blobs[blobIndex];
+    if (blob === undefined) {
+        fail(`${nodeLabel(node)} references missing vector geometry`);
+    }
+    const network = (0, exports.decodeFigmaVectorNetwork)(blob);
+    const normalizedSize = (_b = node.vectorData) === null || _b === void 0 ? void 0 : _b.normalizedSize;
+    const { height, width } = getNodeSize(node);
+    if (normalizedSize !== undefined) {
+        const normalizedWidth = finiteNumber({
+            fallback: width,
+            label: `${nodeLabel(node)} normalized width`,
+            value: normalizedSize.x,
+        });
+        const normalizedHeight = finiteNumber({
+            fallback: height,
+            label: `${nodeLabel(node)} normalized height`,
+            value: normalizedSize.y,
+        });
+        const scaleX = normalizedWidth === 0 ? 1 : width / normalizedWidth;
+        const scaleY = normalizedHeight === 0 ? 1 : height / normalizedHeight;
+        if (scaleX !== 1 || scaleY !== 1) {
+            for (const vertex of network.vertices) {
+                vertex.x *= scaleX;
+                vertex.y *= scaleY;
+            }
+            for (const segment of network.segments) {
+                segment.tangentStart.x *= scaleX;
+                segment.tangentStart.y *= scaleY;
+                segment.tangentEnd.x *= scaleX;
+                segment.tangentEnd.y *= scaleY;
+            }
+        }
+    }
+    return network;
+};
+const getFillPaths = (network) => {
+    if (network.regions.length === 0) {
+        return [
+            {
+                d: traceNetworkPaths(network)
+                    .map(({ closed, d }) => (closed ? d : `${d} Z`))
+                    .join(' '),
+                windingRule: 'nonzero',
+            },
+        ];
+    }
+    return network.regions.map((region) => {
+        const paths = region.loops.map((loop) => {
+            const path = buildOrderedPath({
+                close: true,
+                network,
+                segmentIndices: loop,
+            });
+            if (path === null) {
+                fail('a vector fill loop is disconnected');
+            }
+            return path;
+        });
+        return { d: paths.join(' '), windingRule: region.windingRule };
+    });
+};
+const renderVector = ({ context, node, }) => {
+    const fill = getVisiblePaint({ kind: 'fill', node, paints: node.fillPaints });
+    const stroke = getVisiblePaint({
+        kind: 'stroke',
+        node,
+        paints: node.strokePaints,
+    });
+    if (fill === null && stroke === null) {
+        return '';
+    }
+    const network = getVectorNetwork({ context, node });
+    const paths = [];
+    if (fill) {
+        for (const fillPath of getFillPaths(network)) {
+            paths.push(`<path d="${escapeAttribute(fillPath.d)}" ${getPaintAttributes({ kind: 'fill', paint: fill }).join(' ')} fill-rule="${fillPath.windingRule}" />`);
+        }
+    }
+    if (stroke) {
+        if (node.strokeAlign !== undefined && node.strokeAlign !== 'CENTER') {
+            fail(`${nodeLabel(node)} uses non-centered vector strokes`);
+        }
+        const strokeWidth = finiteNumber({
+            fallback: 1,
+            label: `${nodeLabel(node)} stroke width`,
+            value: node.strokeWeight,
+        });
+        if (strokeWidth < 0) {
+            fail(`${nodeLabel(node)} has a negative stroke width`);
+        }
+        const cap = node.strokeCap === undefined || node.strokeCap === 'NONE'
+            ? 'butt'
+            : node.strokeCap === 'ROUND'
+                ? 'round'
+                : node.strokeCap === 'SQUARE'
+                    ? 'square'
+                    : null;
+        if (cap === null) {
+            fail(`${nodeLabel(node)} uses an unsupported stroke cap`);
+        }
+        const join = node.strokeJoin === undefined || node.strokeJoin === 'MITER'
+            ? 'miter'
+            : node.strokeJoin === 'ROUND'
+                ? 'round'
+                : node.strokeJoin === 'BEVEL'
+                    ? 'bevel'
+                    : null;
+        if (join === null) {
+            fail(`${nodeLabel(node)} uses an unsupported stroke join`);
+        }
+        const miterLimit = finiteNumber({
+            fallback: 4,
+            label: `${nodeLabel(node)} miter limit`,
+            value: node.miterLimit,
+        });
+        if (miterLimit <= 0) {
+            fail(`${nodeLabel(node)} has an invalid miter limit`);
+        }
+        const strokePaths = traceNetworkPaths(network);
+        for (const { d } of strokePaths) {
+            const attributes = [
+                `d="${escapeAttribute(d)}"`,
+                'fill="none"',
+                ...getPaintAttributes({
+                    kind: 'stroke',
+                    paint: stroke,
+                }),
+                `stroke-width="${formatNumber(strokeWidth)}"`,
+                `stroke-linecap="${cap}"`,
+                `stroke-linejoin="${join}"`,
+            ];
+            if (miterLimit !== 4) {
+                attributes.push(`stroke-miterlimit="${formatNumber(miterLimit)}"`);
+            }
+            if (node.dashPattern && node.dashPattern.length > 0) {
+                const dashes = node.dashPattern.map((dash) => finiteNumber({
+                    fallback: 0,
+                    label: `${nodeLabel(node)} stroke dash`,
+                    value: dash,
+                }));
+                if (dashes.some((dash) => dash < 0)) {
+                    fail(`${nodeLabel(node)} has a negative stroke dash`);
+                }
+                attributes.push(`stroke-dasharray="${dashes.map(formatNumber).join(' ')}"`);
+            }
+            paths.push(`<path ${attributes.join(' ')} />`);
+        }
+    }
+    return paths.join('\n');
+};
+const validateNodeFeatures = (node) => {
+    var _a, _b;
+    if (((_a = node.backgroundPaints) === null || _a === void 0 ? void 0 : _a.some((paint) => paint.visible !== false)) ||
+        ((_b = node.effects) === null || _b === void 0 ? void 0 : _b.some((effect) => effect.visible !== false)) ||
+        (node.blendMode !== undefined &&
+            node.blendMode !== 'NORMAL' &&
+            node.blendMode !== 'PASS_THROUGH')) {
+        fail(`${nodeLabel(node)} uses unsupported effects or blending`);
+    }
+    unitInterval({
+        fallback: 1,
+        label: `${nodeLabel(node)} opacity`,
+        value: node.opacity,
+    });
+};
+const renderChildren = ({ context, node, }) => {
+    var _a;
+    const children = (_a = context.scene.children.get(node)) !== null && _a !== void 0 ? _a : [];
+    return children
+        .map((child) => renderNode({
+        context,
+        includeTransform: true,
+        node: child,
+    }))
+        .filter(Boolean)
+        .join('\n');
+};
+const renderContainerChildren = ({ childrenMarkup, context, node, }) => {
+    if (childrenMarkup === '' ||
+        node.frameMaskDisabled !== false ||
+        // Figma serializes auto-bounds groups as frames with resizeToFit. Their
+        // bounds describe their children; they are not clipping rectangles.
+        node.resizeToFit === true) {
+        return childrenMarkup;
+    }
+    const { height, width } = getNodeSize(node);
+    if (width === 0 || height === 0) {
+        return childrenMarkup;
+    }
+    const id = `figma-clip-${context.nextId++}`;
+    const radius = getCornerRadius(node);
+    context.defs.push(`<clipPath id="${id}" clipPathUnits="userSpaceOnUse"><rect x="0" y="0" width="${formatNumber(width)}" height="${formatNumber(height)}"${radius > 0 ? ` rx="${formatNumber(radius)}"` : ''} /></clipPath>`);
+    return `<g clip-path="url(#${id})">${childrenMarkup}</g>`;
+};
+const renderNode = ({ context, includeTransform, node, }) => {
+    var _a, _b, _c;
+    if (node.visible === false) {
+        return '';
+    }
+    if (context.renderingDepth >= maxRenderingDepth) {
+        fail('clipboard scene is nested too deeply');
+    }
+    context.renderingDepth++;
+    try {
+        validateNodeFeatures(node);
+        let content = '';
+        if (supportedContainers.has((_a = node.type) !== null && _a !== void 0 ? _a : '')) {
+            const childrenMarkup = renderContainerChildren({
+                childrenMarkup: renderChildren({ context, node }),
+                context,
+                node,
+            });
+            content = [renderFrameShape({ node }), childrenMarkup]
+                .filter(Boolean)
+                .join('\n');
+        }
+        else if (node.type === 'VECTOR' ||
+            node.type === 'ELLIPSE' ||
+            node.type === 'ROUNDED_RECTANGLE') {
+            if (((_b = context.scene.children.get(node)) !== null && _b !== void 0 ? _b : []).length > 0) {
+                fail(`${nodeLabel(node)} has unsupported nested content`);
+            }
+            content =
+                node.type === 'VECTOR'
+                    ? renderVector({ context, node })
+                    : node.type === 'ELLIPSE'
+                        ? renderEllipse({ context, node })
+                        : renderRoundedRectangle({ context, node });
+        }
+        else {
+            fail(`${nodeLabel(node)} has unsupported type ${(_c = node.type) !== null && _c !== void 0 ? _c : 'UNKNOWN'}`);
+        }
+        const opacity = unitInterval({
+            fallback: 1,
+            label: `${nodeLabel(node)} opacity`,
+            value: node.opacity,
+        });
+        if (opacity < 1 && content !== '') {
+            content = `<g opacity="${formatNumber(opacity)}">${content}</g>`;
+        }
+        if (includeTransform && content !== '') {
+            const transform = getTransform(node);
+            if (!transform.identity) {
+                content = `<g transform="${transform.value}">${content}</g>`;
+            }
+        }
+        return content;
+    }
+    finally {
+        context.renderingDepth--;
+    }
+};
+const buildScene = ({ message, selectedNodeId, }) => {
+    var _a;
+    var _b, _c;
+    if (message.type !== 'NODE_CHANGES') {
+        fail('clipboard data is not a Figma scene');
+    }
+    const { blobs: messageBlobs, nodeChanges } = message;
+    if (!Array.isArray(nodeChanges) || !Array.isArray(messageBlobs)) {
+        fail('Pasting images from Figma is not supported');
+    }
+    const validNodeChanges = nodeChanges;
+    const validMessageBlobs = messageBlobs;
+    const nodesById = new Map();
+    const orderByNode = new Map();
+    for (let index = 0; index < validNodeChanges.length; index++) {
+        const change = validNodeChanges[index];
+        const key = guidKey(change.guid);
+        if (key === null) {
+            continue;
+        }
+        if (change.phase === 'DELETED') {
+            nodesById.delete(key);
+            continue;
+        }
+        const previous = nodesById.get(key);
+        const node = previous ? { ...previous, ...change } : change;
+        nodesById.set(key, node);
+        orderByNode.set(node, index);
+    }
+    const root = (_b = nodesById.get(selectedNodeId)) !== null && _b !== void 0 ? _b : fail('the selected Figma node is missing from the clipboard');
+    const children = new Map();
+    for (const node of nodesById.values()) {
+        const parentKey = guidKey((_a = node.parentIndex) === null || _a === void 0 ? void 0 : _a.guid);
+        const parent = parentKey ? nodesById.get(parentKey) : undefined;
+        if (parent === undefined) {
+            continue;
+        }
+        const siblings = (_c = children.get(parent)) !== null && _c !== void 0 ? _c : [];
+        siblings.push(node);
+        children.set(parent, siblings);
+    }
+    for (const siblings of children.values()) {
+        siblings.sort((left, right) => {
+            var _a, _b;
+            var _c, _d, _e, _f;
+            const leftPosition = (_c = (_a = left.parentIndex) === null || _a === void 0 ? void 0 : _a.position) !== null && _c !== void 0 ? _c : '';
+            const rightPosition = (_d = (_b = right.parentIndex) === null || _b === void 0 ? void 0 : _b.position) !== null && _d !== void 0 ? _d : '';
+            const positionDifference = leftPosition < rightPosition
+                ? -1
+                : leftPosition > rightPosition
+                    ? 1
+                    : 0;
+            return (positionDifference ||
+                ((_e = orderByNode.get(left)) !== null && _e !== void 0 ? _e : 0) - ((_f = orderByNode.get(right)) !== null && _f !== void 0 ? _f : 0));
+        });
+    }
+    const blobs = validMessageBlobs.map((blob) => {
+        const { bytes } = blob;
+        if (!(bytes instanceof Uint8Array)) {
+            fail('clipboard scene contains an invalid geometry blob');
+        }
+        return bytes;
+    });
+    return { blobs, children, root };
+};
+const assertNoMasks = (scene) => {
+    var _a;
+    const pending = [scene.root];
+    const visited = new Set();
+    while (pending.length > 0) {
+        const node = pending.pop();
+        if (visited.has(node)) {
+            continue;
+        }
+        visited.add(node);
+        if (node.mask === true || node.maskIsOutline === true) {
+            fail('Pasting Figma selections with masks is not supported');
+        }
+        pending.push(...((_a = scene.children.get(node)) !== null && _a !== void 0 ? _a : []));
+    }
+};
+const renderFigmaMessageToSvg = ({ message, selectedNodeId, }) => {
+    const scene = buildScene({ message, selectedNodeId });
+    assertNoMasks(scene);
+    const { height, width } = getNodeSize(scene.root);
+    if (width <= 0 || height <= 0) {
+        fail('the selected node has empty bounds');
+    }
+    const context = {
+        defs: [],
+        nextId: 0,
+        renderingDepth: 0,
+        scene,
+    };
+    const content = renderNode({
+        context,
+        includeTransform: false,
+        node: scene.root,
+    });
+    if (content === '') {
+        fail('the selected node has no visible supported content');
+    }
+    const defs = context.defs.length === 0
+        ? ''
+        : `<defs>\n${context.defs.join('\n')}\n</defs>\n`;
+    return {
+        height,
+        svg: `<svg xmlns="http://www.w3.org/2000/svg" width="${formatNumber(width)}" height="${formatNumber(height)}" viewBox="0 0 ${formatNumber(width)} ${formatNumber(height)}">\n${defs}${content}\n</svg>`,
+        width,
+    };
+};
+exports.renderFigmaMessageToSvg = renderFigmaMessageToSvg;