@remotion/studio-server 4.0.494 → 4.0.495

package/dist/codemods/update-keyframes/update-keyframes.js

@@ -910,6 +910,23 @@ const getInitialValueForMissingProp = ({ schema, key, newValue, }) => {
     }
     return newValue;
 };
+const shouldRemovePropAfterKeyframeOperation = ({ expression, key, operation, schema, videoConfigValues, }) => {
+    if (operation.type !== 'remove' || !schema) {
+        return false;
+    }
+    const existing = getInterpolationExpression(expression, videoConfigValues);
+    if (!existing || existing.keyframes.length !== 1) {
+        return false;
+    }
+    const field = findFieldInSchema(schema, key);
+    if (!field || field.type === 'hidden' || field.default === undefined) {
+        return false;
+    }
+    const valueAfterRemoval = operation.valueWhenLastKeyframeDeleted === null
+        ? existing.keyframes[0].value
+        : operation.valueWhenLastKeyframeDeleted;
+    return JSON.stringify(valueAfterRemoval) === JSON.stringify(field.default);
+};
 const getObjectExpression = (attr) => {
     if (!attr.value || attr.value.type !== 'JSXExpressionContainer') {
         return null;
@@ -934,7 +951,7 @@ const createMissingPropExpression = (missingPropInitialValue) => {
 const getSequenceWritableProp = ({ attributes, key, missingPropInitialValue, }) => {
     const dotIndex = key.indexOf('.');
     if (dotIndex === -1) {
-        const { attr: topLevelAttr } = findJsxAttribute(attributes, key);
+        const { attrIndex, attr: topLevelAttr } = findJsxAttribute(attributes, key);
         if (!topLevelAttr) {
             if (missingPropInitialValue) {
                 return {
@@ -942,6 +959,7 @@ const getSequenceWritableProp = ({ attributes, key, missingPropInitialValue, })
                     setExpression: (nextExpression) => {
                         attributes.push(createJsxExpressionAttribute(key, nextExpression));
                     },
+                    remove: () => undefined,
                 };
             }
             throw new Error(`Cannot update keyframes: "${key}" is not set`);
@@ -955,11 +973,14 @@ const getSequenceWritableProp = ({ attributes, key, missingPropInitialValue, })
             setExpression: (nextExpression) => {
                 topLevelAttr.value = b.jsxExpressionContainer(nextExpression);
             },
+            remove: () => {
+                attributes.splice(attrIndex, 1);
+            },
         };
     }
     const parentKey = key.slice(0, dotIndex);
     const childKey = key.slice(dotIndex + 1);
-    const { attr: parentAttr } = findJsxAttribute(attributes, parentKey);
+    const { attrIndex: parentAttrIndex, attr: parentAttr } = findJsxAttribute(attributes, parentKey);
     if (!parentAttr) {
         if (missingPropInitialValue) {
             return {
@@ -971,6 +992,7 @@ const getSequenceWritableProp = ({ attributes, key, missingPropInitialValue, })
                         expression: nextExpression,
                     }));
                 },
+                remove: () => undefined,
             };
         }
         throw new Error(`Cannot update keyframes: "${parentKey}" is not set`);
@@ -979,7 +1001,7 @@ const getSequenceWritableProp = ({ attributes, key, missingPropInitialValue, })
     if (!objExpr) {
         throw new Error(`Cannot update keyframes: "${parentKey}" is computed`);
     }
-    const { prop } = findObjectProperty(objExpr, childKey);
+    const { propIndex, prop } = findObjectProperty(objExpr, childKey);
     if (!prop) {
         if (missingPropInitialValue) {
             return {
@@ -987,6 +1009,7 @@ const getSequenceWritableProp = ({ attributes, key, missingPropInitialValue, })
                 setExpression: (nextExpression) => {
                     objExpr.properties.push(createObjectProperty(childKey, nextExpression));
                 },
+                remove: () => undefined,
             };
         }
         throw new Error(`Cannot update keyframes: "${key}" is not set`);
@@ -996,10 +1019,16 @@ const getSequenceWritableProp = ({ attributes, key, missingPropInitialValue, })
         setExpression: (nextExpression) => {
             prop.value = nextExpression;
         },
+        remove: () => {
+            objExpr.properties.splice(propIndex, 1);
+            if (objExpr.properties.length === 0) {
+                attributes.splice(parentAttrIndex, 1);
+            }
+        },
     };
 };
 const getEffectWritableProp = ({ objExpr, key, missingPropInitialValue, }) => {
-    const { prop } = findObjectProperty(objExpr, key);
+    const { propIndex, prop } = findObjectProperty(objExpr, key);
     if (!prop) {
         if (missingPropInitialValue) {
             return {
@@ -1007,6 +1036,7 @@ const getEffectWritableProp = ({ objExpr, key, missingPropInitialValue, }) => {
                 setExpression: (nextExpression) => {
                     objExpr.properties.push(createObjectProperty(key, nextExpression));
                 },
+                remove: () => undefined,
             };
         }
         throw new Error(`Cannot update keyframes: "${key}" is not set`);
@@ -1016,6 +1046,9 @@ const getEffectWritableProp = ({ objExpr, key, missingPropInitialValue, }) => {
         setExpression: (nextExpression) => {
             prop.value = nextExpression;
         },
+        remove: () => {
+            objExpr.properties.splice(propIndex, 1);
+        },
     };
 };
 const getEffectPropsObjectExpression = (call) => {
@@ -1072,7 +1105,18 @@ const updateSequenceKeyframesAst = ({ input, nodePath, updates, schema, videoCon
             videoConfigValues: videoConfigIdentifierValues,
         });
         newValueStrings.push(recast.print(nextExpression).code);
-        prop.setExpression(nextExpression);
+        if (shouldRemovePropAfterKeyframeOperation({
+            expression: prop.expression,
+            key: update.key,
+            operation: update.operation,
+            schema: schema !== null && schema !== void 0 ? schema : null,
+            videoConfigValues: videoConfigIdentifierValues,
+        })) {
+            prop.remove();
+        }
+        else {
+            prop.setExpression(nextExpression);
+        }
         if (introduced.calleeName) {
             requiredImports.add(introduced.calleeName);
         }
@@ -1180,7 +1224,18 @@ const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, update
             videoConfigValues: videoConfigIdentifierValues,
         });
         newValueStrings.push(recast.print(nextExpression).code);
-        prop.setExpression(nextExpression);
+        if (shouldRemovePropAfterKeyframeOperation({
+            expression: prop.expression,
+            key: update.key,
+            operation: update.operation,
+            schema: schema !== null && schema !== void 0 ? schema : null,
+            videoConfigValues: videoConfigIdentifierValues,
+        })) {
+            prop.remove();
+        }
+        else {
+            prop.setExpression(nextExpression);
+        }
         if (introduced.calleeName) {
             requiredImports.add(introduced.calleeName);
         }

package/dist/figma/figma-clipboard.d.ts

@@ -0,0 +1,6 @@
+export declare const getFigmaClipboardPasteSupportError: (zstdDecompressSync: unknown) => "Figma paste is only available with Node.js 22.15 or newer" | null;
+export declare const convertFigmaClipboardToSvg: (html: string) => {
+    height: number;
+    svg: string;
+    width: number;
+};

package/dist/figma/figma-clipboard.js

@@ -0,0 +1,312 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertFigmaClipboardToSvg = exports.getFigmaClipboardPasteSupportError = void 0;
+const node_buffer_1 = require("node:buffer");
+const zlib = __importStar(require("node:zlib"));
+const kiwi_schema_1 = require("kiwi-schema");
+const figma_to_svg_1 = require("./figma-to-svg");
+const figmaMetaStart = '<!--(figmeta)';
+const figmaMetaEnd = '(/figmeta)-->';
+const figmaDataStart = '<!--(figma)';
+const figmaDataEnd = '(/figma)-->';
+const figKiwiPrelude = 'fig-kiwi';
+const maxClipboardHtmlBytes = 25 * 1024 * 1024;
+const maxMetaBytes = 1024 * 1024;
+const maxArchiveBytes = 16 * 1024 * 1024;
+const maxCompressedSchemaBytes = 5 * 1024 * 1024;
+const maxCompressedMessageBytes = 10 * 1024 * 1024;
+const maxSchemaBytes = 10 * 1024 * 1024;
+const maxMessageBytes = 40 * 1024 * 1024;
+const maxSchemaDefinitions = 2000;
+const maxSchemaFields = 50000;
+const maxNodeChanges = 20000;
+const maxBlobs = 20000;
+const nodeVersionRequirement = 'Figma paste is only available with Node.js 22.15 or newer';
+const nativeZstdDecompressSync = zlib.zstdDecompressSync;
+const fail = (message) => {
+    throw new Error(`Cannot import Figma selection: ${message}`);
+};
+const withFriendlyFailure = (operation, fallback) => {
+    try {
+        return operation();
+    }
+    catch (error) {
+        if (error instanceof Error &&
+            error.message.startsWith('Cannot import Figma selection:')) {
+            throw error;
+        }
+        return fail(fallback);
+    }
+};
+const getFigmaClipboardPasteSupportError = (zstdDecompressSync) => {
+    return typeof zstdDecompressSync === 'function'
+        ? null
+        : nodeVersionRequirement;
+};
+exports.getFigmaClipboardPasteSupportError = getFigmaClipboardPasteSupportError;
+const extractMarker = ({ end, html, label, start, }) => {
+    const startIndex = html.indexOf(start);
+    if (startIndex === -1) {
+        fail(`clipboard is missing its ${label}`);
+    }
+    const valueStart = startIndex + start.length;
+    const endIndex = html.indexOf(end, valueStart);
+    if (endIndex === -1) {
+        fail(`clipboard has an incomplete ${label}`);
+    }
+    return html.slice(valueStart, endIndex);
+};
+const decodeBase64 = ({ label, limit, value, }) => {
+    const compact = value.replace(/[\t\n\r ]/g, '');
+    if (compact.length === 0 ||
+        compact.length % 4 !== 0 ||
+        !/^[A-Za-z0-9+/]*={0,2}$/.test(compact)) {
+        fail(`${label} is not valid Base64`);
+    }
+    if (compact.length > Math.ceil(limit / 3) * 4) {
+        fail(`${label} is too large`);
+    }
+    const decoded = node_buffer_1.Buffer.from(compact, 'base64');
+    if (decoded.byteLength > limit) {
+        fail(`${label} is too large`);
+    }
+    return new Uint8Array(decoded.buffer, decoded.byteOffset, decoded.byteLength);
+};
+const parseMeta = (base64) => {
+    const bytes = decodeBase64({
+        label: 'Figma metadata',
+        limit: maxMetaBytes,
+        value: base64,
+    });
+    let parsed;
+    try {
+        parsed = JSON.parse(new TextDecoder().decode(bytes));
+    }
+    catch (_a) {
+        fail('clipboard metadata is invalid');
+    }
+    if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+        fail('clipboard metadata is invalid');
+    }
+    const meta = parsed;
+    if (meta.dataType !== 'scene') {
+        fail('clipboard does not contain a Figma scene');
+    }
+    const { selectedNodeData } = meta;
+    if (typeof selectedNodeData !== 'string') {
+        fail('clipboard does not identify its selected node');
+    }
+    const selectedNodeId = selectedNodeData.split('|')[0];
+    if (!/^\d+:\d+$/.test(selectedNodeId)) {
+        fail('clipboard has an invalid selected node ID');
+    }
+    return selectedNodeId;
+};
+const parseArchive = (base64) => {
+    const bytes = decodeBase64({
+        label: 'Figma scene',
+        limit: maxArchiveBytes,
+        value: base64,
+    });
+    if (bytes.length < figKiwiPrelude.length + 4) {
+        fail('clipboard scene is truncated');
+    }
+    const prelude = new TextDecoder().decode(bytes.subarray(0, figKiwiPrelude.length));
+    if (prelude !== figKiwiPrelude) {
+        fail('clipboard scene has an unknown format');
+    }
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    const version = view.getUint32(figKiwiPrelude.length, true);
+    if (version === 0) {
+        fail('clipboard scene has an invalid archive version');
+    }
+    let offset = figKiwiPrelude.length + 4;
+    const chunks = [];
+    while (offset < bytes.length) {
+        if (offset + 4 > bytes.length) {
+            fail('clipboard scene has a truncated chunk header');
+        }
+        const size = view.getUint32(offset, true);
+        offset += 4;
+        if (size === 0 || offset + size > bytes.length) {
+            fail('clipboard scene has an invalid chunk');
+        }
+        chunks.push(bytes.slice(offset, offset + size));
+        offset += size;
+    }
+    if (chunks.length !== 2) {
+        fail('clipboard scene uses an unsupported archive layout');
+    }
+    if (chunks[0].length > maxCompressedSchemaBytes) {
+        fail('clipboard schema is too large');
+    }
+    if (chunks[1].length > maxCompressedMessageBytes) {
+        fail('clipboard scene is too large');
+    }
+    return { message: chunks[1], schema: chunks[0] };
+};
+const inflateSchema = (compressed) => {
+    const inflated = zlib.inflateRawSync(compressed, {
+        maxOutputLength: maxSchemaBytes,
+    });
+    return new Uint8Array(inflated.buffer, inflated.byteOffset, inflated.byteLength);
+};
+const readLimitedLittleEndian = ({ bytes, limit, length, offset, }) => {
+    let result = 0;
+    for (let index = length - 1; index >= 0; index--) {
+        const nextByte = bytes[offset + index];
+        if (result > Math.floor((limit - nextByte) / 256)) {
+            fail('clipboard scene expands beyond the size limit');
+        }
+        result = result * 256 + nextByte;
+    }
+    return result;
+};
+const getZstandardContentSize = (compressed) => {
+    if (compressed.length < 6 ||
+        compressed[0] !== 0x28 ||
+        compressed[1] !== 0xb5 ||
+        compressed[2] !== 0x2f ||
+        compressed[3] !== 0xfd) {
+        fail('clipboard scene uses an unsupported compression format');
+    }
+    const descriptor = compressed[4];
+    if ((descriptor & 8) !== 0) {
+        fail('clipboard scene has an invalid Zstandard frame');
+    }
+    const singleSegment = (descriptor >> 5) & 1;
+    const dictionaryFlag = descriptor & 3;
+    const contentSizeFlag = descriptor >> 6;
+    const dictionaryBytes = dictionaryFlag === 3 ? 4 : dictionaryFlag;
+    const contentSizeBytes = contentSizeFlag
+        ? 1 << contentSizeFlag
+        : singleSegment;
+    if (contentSizeBytes === 0) {
+        fail('clipboard scene does not declare its expanded size');
+    }
+    const contentSizeOffset = 6 - singleSegment + dictionaryBytes;
+    if (contentSizeOffset + contentSizeBytes > compressed.length) {
+        fail('clipboard scene has a truncated Zstandard header');
+    }
+    let contentSize = readLimitedLittleEndian({
+        bytes: compressed,
+        limit: maxMessageBytes,
+        length: contentSizeBytes,
+        offset: contentSizeOffset,
+    });
+    if (contentSizeFlag === 1) {
+        contentSize += 256;
+    }
+    if (contentSize <= 0 || contentSize > maxMessageBytes) {
+        fail('clipboard scene expands beyond the size limit');
+    }
+    return contentSize;
+};
+const decompressMessage = ({ compressed, zstdDecompressSync, }) => {
+    const expectedBytes = getZstandardContentSize(compressed);
+    const decompressed = zstdDecompressSync(compressed, {
+        maxOutputLength: expectedBytes,
+    });
+    if (decompressed.byteLength !== expectedBytes) {
+        fail('clipboard scene did not match its declared size');
+    }
+    return new Uint8Array(decompressed.buffer, decompressed.byteOffset, decompressed.byteLength);
+};
+const decodeMessage = ({ messageBytes, schemaBytes, }) => {
+    var _a, _b;
+    var _c, _d;
+    const schema = (0, kiwi_schema_1.decodeBinarySchema)(schemaBytes);
+    if (schema.package !== null &&
+        (typeof schema.package !== 'string' ||
+            !/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(schema.package))) {
+        fail('clipboard schema has an invalid package name');
+    }
+    if (schema.definitions.length > maxSchemaDefinitions) {
+        fail('clipboard schema has too many definitions');
+    }
+    const fieldCount = schema.definitions.reduce((total, definition) => total + definition.fields.length, 0);
+    if (fieldCount > maxSchemaFields) {
+        fail('clipboard schema has too many fields');
+    }
+    const compiled = (0, kiwi_schema_1.compileSchema)(schema);
+    const decoded = compiled.decodeMessage(messageBytes);
+    if (typeof decoded !== 'object' ||
+        decoded === null ||
+        Array.isArray(decoded)) {
+        fail('clipboard scene decoded to an invalid message');
+    }
+    const message = decoded;
+    if (((_c = (_a = message.nodeChanges) === null || _a === void 0 ? void 0 : _a.length) !== null && _c !== void 0 ? _c : 0) > maxNodeChanges ||
+        ((_d = (_b = message.blobs) === null || _b === void 0 ? void 0 : _b.length) !== null && _d !== void 0 ? _d : 0) > maxBlobs) {
+        fail('clipboard scene has too many objects');
+    }
+    return message;
+};
+const convertFigmaClipboardToSvg = (html) => {
+    if (typeof html !== 'string' || html.length === 0) {
+        fail('clipboard HTML is empty');
+    }
+    if (node_buffer_1.Buffer.byteLength(html, 'utf8') > maxClipboardHtmlBytes) {
+        fail('clipboard HTML is too large');
+    }
+    const supportError = (0, exports.getFigmaClipboardPasteSupportError)(nativeZstdDecompressSync);
+    if (supportError !== null) {
+        fail(supportError);
+    }
+    const zstdDecompressSync = nativeZstdDecompressSync;
+    const metaBase64 = extractMarker({
+        end: figmaMetaEnd,
+        html,
+        label: 'figmeta section',
+        start: figmaMetaStart,
+    });
+    const figmaBase64 = extractMarker({
+        end: figmaDataEnd,
+        html,
+        label: 'figma section',
+        start: figmaDataStart,
+    });
+    const selectedNodeId = parseMeta(metaBase64);
+    const archive = parseArchive(figmaBase64);
+    const schemaBytes = withFriendlyFailure(() => inflateSchema(archive.schema), 'clipboard schema could not be decompressed');
+    const messageBytes = withFriendlyFailure(() => decompressMessage({
+        compressed: archive.message,
+        zstdDecompressSync,
+    }), 'clipboard scene could not be decompressed');
+    const message = withFriendlyFailure(() => decodeMessage({ messageBytes, schemaBytes }), 'clipboard scene could not be decoded');
+    return (0, figma_to_svg_1.renderFigmaMessageToSvg)({ message, selectedNodeId });
+};
+exports.convertFigmaClipboardToSvg = convertFigmaClipboardToSvg;

package/dist/figma/figma-to-svg.d.ts

@@ -0,0 +1,116 @@
+type FigmaVector = {
+    x: number;
+    y: number;
+};
+type FigmaGuid = {
+    sessionID?: number;
+    localID?: number;
+};
+type FigmaColor = {
+    r?: number;
+    g?: number;
+    b?: number;
+    a?: number;
+};
+type FigmaPaint = {
+    type?: string;
+    color?: FigmaColor;
+    opacity?: number;
+    visible?: boolean;
+    blendMode?: string;
+};
+type FigmaTransform = {
+    m00?: number;
+    m01?: number;
+    m02?: number;
+    m10?: number;
+    m11?: number;
+    m12?: number;
+};
+type FigmaArcData = {
+    startingAngle?: number;
+    endingAngle?: number;
+    innerRadius?: number;
+};
+export type FigmaNode = {
+    guid?: FigmaGuid;
+    phase?: string;
+    parentIndex?: {
+        guid?: FigmaGuid;
+        position?: string;
+    };
+    type?: string;
+    name?: string;
+    visible?: boolean;
+    opacity?: number;
+    blendMode?: string;
+    size?: FigmaVector;
+    transform?: FigmaTransform;
+    mask?: boolean;
+    maskType?: string;
+    maskIsOutline?: boolean;
+    fillPaints?: FigmaPaint[];
+    backgroundPaints?: FigmaPaint[];
+    strokePaints?: FigmaPaint[];
+    strokeWeight?: number;
+    borderTopWeight?: number;
+    borderBottomWeight?: number;
+    borderLeftWeight?: number;
+    borderRightWeight?: number;
+    borderStrokeWeightsIndependent?: boolean;
+    strokeAlign?: string;
+    strokeCap?: string;
+    strokeJoin?: string;
+    dashPattern?: number[];
+    miterLimit?: number;
+    cornerRadius?: number;
+    cornerSmoothing?: number;
+    rectangleTopLeftCornerRadius?: number;
+    rectangleTopRightCornerRadius?: number;
+    rectangleBottomLeftCornerRadius?: number;
+    rectangleBottomRightCornerRadius?: number;
+    rectangleCornerRadiiIndependent?: boolean;
+    frameMaskDisabled?: boolean;
+    resizeToFit?: boolean;
+    effects?: Array<{
+        visible?: boolean;
+    }>;
+    vectorData?: {
+        vectorNetworkBlob?: number;
+        normalizedSize?: FigmaVector;
+    };
+    arcData?: FigmaArcData;
+};
+export type FigmaMessage = {
+    type?: string;
+    nodeChanges?: FigmaNode[];
+    blobs?: Array<{
+        bytes?: Uint8Array;
+    }>;
+};
+type VectorVertex = FigmaVector;
+type VectorSegment = {
+    start: number;
+    end: number;
+    tangentStart: FigmaVector;
+    tangentEnd: FigmaVector;
+};
+type VectorRegion = {
+    windingRule: 'evenodd' | 'nonzero';
+    loops: number[][];
+};
+type VectorNetwork = {
+    vertices: VectorVertex[];
+    segments: VectorSegment[];
+    regions: VectorRegion[];
+};
+export declare const decodeFigmaVectorNetwork: (data: Uint8Array<ArrayBufferLike>) => VectorNetwork;
+export declare const renderFigmaMessageToSvg: ({ message, selectedNodeId, }: {
+    message: FigmaMessage;
+    selectedNodeId: string;
+}) => {
+    height: number;
+    svg: string;
+    width: number;
+};
+export {};