@remotion/studio-server 4.0.494 → 4.0.496

package/dist/helpers/resolve-composition-component.js

@@ -44,8 +44,10 @@ const recast = __importStar(require("recast"));
 const no_react_1 = require("remotion/no-react");
 const format_file_content_1 = require("../codemods/format-file-content");
 const parse_ast_1 = require("../codemods/parse-ast");
+const strip_parenthesized_extra_1 = require("../codemods/strip-parenthesized-extra");
 const update_nested_prop_1 = require("../codemods/update-nested-prop");
 const imports_1 = require("./imports");
+const svg_to_jsx_1 = require("./svg-to-jsx");
 const allowedFileExtensions = new Set(['.tsx', '.ts', '.jsx', '.js']);
 const extensionsToProbe = ['.tsx', '.ts', '.jsx', '.js'];
 const isInRemotionRoot = ({ remotionRoot, fileName, }) => {
@@ -609,6 +611,35 @@ const createAssetElement = ({ addPositionStyle, localName, staticFileLocalName,
             : []),
     ], true), null, []);
 };
+const createSvgElement = async ({ interactiveLocalName, markup, position, }) => {
+    var _a;
+    var _b;
+    const svgElement = await (0, svg_to_jsx_1.svgMarkupToJsx)(markup);
+    const attributes = (_b = svgElement.openingElement.attributes) !== null && _b !== void 0 ? _b : [];
+    svgElement.openingElement.attributes = attributes;
+    const styleAttribute = attributes.find((attribute) => attribute.type === 'JSXAttribute' &&
+        attribute.name.type === 'JSXIdentifier' &&
+        attribute.name.name === 'style');
+    const positionProperties = getPositionStyleProperties(position);
+    if (styleAttribute === undefined) {
+        attributes.push(createStyleAttribute(positionProperties));
+    }
+    else if (styleAttribute.type === 'JSXAttribute' &&
+        ((_a = styleAttribute.value) === null || _a === void 0 ? void 0 : _a.type) === 'JSXExpressionContainer' &&
+        styleAttribute.value.expression.type === 'ObjectExpression') {
+        styleAttribute.value.expression.properties.push(...positionProperties);
+    }
+    else {
+        throw new Error('Could not convert the root SVG style to JSX');
+    }
+    const interactiveSvgName = () => recast.types.builders.jsxMemberExpression(recast.types.builders.jsxIdentifier(interactiveLocalName), recast.types.builders.jsxIdentifier('Svg'));
+    svgElement.openingElement.name = interactiveSvgName();
+    if (svgElement.closingElement !== null &&
+        svgElement.closingElement !== undefined) {
+        svgElement.closingElement.name = interactiveSvgName();
+    }
+    return svgElement;
+};
 const createFragmentWithElement = (element) => {
     return recast.types.builders.jsxFragment(recast.types.builders.jsxOpeningFragment(), recast.types.builders.jsxClosingFragment(), [element]);
 };
@@ -732,6 +763,36 @@ const ensureSequenceImport = (ast) => {
         localName: getAvailableSequenceLocalName(ast),
     });
 };
+const ensureInteractiveImport = (ast) => {
+    var _a;
+    var _b, _c;
+    for (const statement of ast.program.body) {
+        if (statement.type !== 'ImportDeclaration' ||
+            statement.source.type !== 'StringLiteral' ||
+            statement.source.value !== 'remotion') {
+            continue;
+        }
+        for (const specifier of (_b = statement.specifiers) !== null && _b !== void 0 ? _b : []) {
+            if (specifier.type === 'ImportSpecifier' &&
+                (0, imports_1.getImportedName)(specifier) === 'Interactive') {
+                return (_c = (_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) !== null && _c !== void 0 ? _c : 'Interactive';
+            }
+        }
+    }
+    const candidates = ['Interactive', 'RemotionInteractive'];
+    const localName = candidates.find((candidate) => {
+        return !hasTopLevelBinding({ ast, name: candidate });
+    });
+    if (localName === undefined) {
+        throw new Error('Cannot add <Interactive.Svg> because Interactive is already defined');
+    }
+    return (0, imports_1.ensureNamedImport)({
+        ast,
+        importedName: 'Interactive',
+        sourcePath: 'remotion',
+        localName,
+    });
+};
 const getImportDeclarations = ({ ast, sourcePath, }) => {
     return ast.program.body.filter((node) => node.type === 'ImportDeclaration' &&
         node.source.type === 'StringLiteral' &&
@@ -785,12 +846,12 @@ const ensureStaticFileImport = (ast) => {
         label: 'staticFile()',
     });
 };
-const ensureImgImport = (ast) => {
+const ensureCanvasImageImport = (ast) => {
     return ensureOfficialNamedImport({
         ast,
-        importedName: 'Img',
+        importedName: 'CanvasImage',
         sourcePath: 'remotion',
-        label: '<Img>',
+        label: '<CanvasImage>',
     });
 };
 const ensureAnimatedImageImport = (ast) => {
@@ -1050,7 +1111,7 @@ const addElementToComponentRoot = ({ ast, exportName, element, }) => {
     if (rootNode.type === 'JSXElement' && rootNode.openingElement.selfClosing) {
         const fragment = recast.types.builders.jsxFragment(recast.types.builders.jsxOpeningFragment(), recast.types.builders.jsxClosingFragment(), [
             createSequenceWithChild({
-                child: rootNode,
+                child: (0, strip_parenthesized_extra_1.stripParenthesizedExtra)(rootNode),
                 sequenceLocalName: ensureSequenceImport(ast),
             }),
             element,
@@ -1280,6 +1341,13 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinat
             position: element.position,
         });
     }
+    if (element.type === 'svg') {
+        return createSvgElement({
+            interactiveLocalName: ensureInteractiveImport(ast),
+            markup: element.markup,
+            position: element.position,
+        });
+    }
     if (element.type === 'composition') {
         return Promise.resolve(ensureCompositionComponentImport({
             ast,
@@ -1302,7 +1370,7 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinat
         const staticFileLocalName = element.srcType === 'remote' ? null : ensureStaticFileImport(ast);
         let localName;
         if (element.assetType === 'image') {
-            localName = ensureImgImport(ast);
+            localName = ensureCanvasImageImport(ast);
         }
         else if (element.assetType === 'video') {
             localName = ensureVideoImport(ast);

package/dist/helpers/svg-to-jsx.d.ts

@@ -0,0 +1,2 @@
+import type { namedTypes } from 'ast-types';
+export declare const svgMarkupToJsx: (markup: string) => Promise<namedTypes.JSXElement>;

package/dist/helpers/svg-to-jsx.js

@@ -0,0 +1,70 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.svgMarkupToJsx = void 0;
+const core_1 = require("@svgr/core");
+const plugin_jsx_1 = __importDefault(require("@svgr/plugin-jsx"));
+const recast = __importStar(require("recast"));
+const parse_ast_1 = require("../codemods/parse-ast");
+const svgMarkupToJsx = async (markup) => {
+    const componentCode = await (0, core_1.transform)(markup, {
+        expandProps: false,
+        jsxRuntime: 'automatic',
+        plugins: [plugin_jsx_1.default],
+        prettier: false,
+        typescript: true,
+    }, { componentName: 'PastedSvg' });
+    const ast = (0, parse_ast_1.parseAst)(componentCode);
+    let svgElement = null;
+    recast.types.visit(ast, {
+        visitJSXElement(path) {
+            const { name } = path.node.openingElement;
+            if (name.type === 'JSXIdentifier' && name.name === 'svg') {
+                svgElement = path.node;
+                return false;
+            }
+            this.traverse(path);
+            return undefined;
+        },
+    });
+    if (svgElement === null) {
+        throw new Error('The pasted markup does not contain an <svg> root element');
+    }
+    return svgElement;
+};
+exports.svgMarkupToJsx = svgMarkupToJsx;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { ApiRoutes, CopyStillToClipboardRequest, getDefaultOutLocation, OpenInFi
 export type { AggregateRenderProgress, BundlingState, CopyingState, DownloadProgress, HotMiddlewareOptions, JobProgressCallback, ModuleMap, PackageManager, ProjectInfo, RenderingProgressInput, RenderJob, RenderJobWithCleanup, RequiredChromiumOptions, StitchingProgressInput, UiOpenGlOptions, } from '@remotion/studio-shared';
 import { AnsiDiff } from './ansi-diff';
 export declare const StudioServerInternals: {
-    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, getStudioRuntimeConfig, }: {
+    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, getNumberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, getStudioRuntimeConfig, }: {
         browserArgs: string;
         browserFlag: string;
         logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -20,9 +20,9 @@ export declare const StudioServerInternals: {
         poll: number | null;
         getRenderDefaults: () => import("@remotion/studio-shared").RenderDefaults;
         getRenderQueue: () => import("@remotion/studio-shared").RenderJob[];
-        numberOfAudioTags: number;
-        audioLatencyHint: AudioContextLatencyCategory | null;
-        previewSampleRate: number | null;
+        getNumberOfAudioTags: () => number;
+        getAudioLatencyHint: () => AudioContextLatencyCategory | null;
+        getPreviewSampleRate: () => number | null;
         enableCrossSiteIsolation: boolean;
         queueMethods: import("./preview-server/api-types").QueueMethods;
         previewEntry: string;
@@ -56,6 +56,7 @@ export declare const StudioServerInternals: {
     };
     getMaxTimelineTracks: () => number;
     setMaxTimelineTracks: (maxTracks: number) => void;
+    resetMaxTimelineTracks: () => void;
     getLatestRemotionVersion: () => Promise<any>;
     installFileWatcher: (options: {
         file: string;

package/dist/index.js

@@ -26,6 +26,7 @@ exports.StudioServerInternals = {
     getPackageManager: get_package_manager_1.getPackageManager,
     getMaxTimelineTracks: max_timeline_tracks_1.getMaxTimelineTracks,
     setMaxTimelineTracks: max_timeline_tracks_1.setMaxTimelineTracks,
+    resetMaxTimelineTracks: max_timeline_tracks_1.resetMaxTimelineTracks,
     getLatestRemotionVersion: get_latest_remotion_version_1.getLatestRemotionVersion,
     installFileWatcher: file_watcher_1.installFileWatcher,
     writeFileAndNotifyFileWatchers: file_watcher_1.writeFileAndNotifyFileWatchers,

package/dist/max-timeline-tracks.d.ts

@@ -1,2 +1,3 @@
 export declare const setMaxTimelineTracks: (maxTracks: number) => void;
 export declare const getMaxTimelineTracks: () => number;
+export declare const resetMaxTimelineTracks: () => void;

package/dist/max-timeline-tracks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMaxTimelineTracks = exports.setMaxTimelineTracks = void 0;
+exports.resetMaxTimelineTracks = exports.getMaxTimelineTracks = exports.setMaxTimelineTracks = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 let maxTimelineTracks = studio_shared_1.DEFAULT_TIMELINE_TRACKS;
 const setMaxTimelineTracks = (maxTracks) => {
@@ -23,3 +23,7 @@ const getMaxTimelineTracks = () => {
     return maxTimelineTracks;
 };
 exports.getMaxTimelineTracks = getMaxTimelineTracks;
+const resetMaxTimelineTracks = () => {
+    maxTimelineTracks = studio_shared_1.DEFAULT_TIMELINE_TRACKS;
+};
+exports.resetMaxTimelineTracks = resetMaxTimelineTracks;

package/dist/preview-server/api-routes.js

@@ -10,6 +10,7 @@ const apply_codemod_1 = require("./routes/apply-codemod");
 const apply_visual_control_change_1 = require("./routes/apply-visual-control-change");
 const cancel_render_1 = require("./routes/cancel-render");
 const composition_component_info_1 = require("./routes/composition-component-info");
+const convert_figma_clipboard_to_svg_1 = require("./routes/convert-figma-clipboard-to-svg");
 const delete_effect_1 = require("./routes/delete-effect");
 const delete_jsx_node_1 = require("./routes/delete-jsx-node");
 const delete_keyframes_1 = require("./routes/delete-keyframes");
@@ -51,6 +52,7 @@ const update_element_install_target_1 = require("./routes/update-element-install
 const update_sequence_keyframe_settings_1 = require("./routes/update-sequence-keyframe-settings");
 exports.allApiRoutes = {
     '/api/composition-component-info': composition_component_info_1.compositionComponentInfoHandler,
+    '/api/convert-figma-clipboard-to-svg': convert_figma_clipboard_to_svg_1.convertFigmaClipboardToSvgHandler,
     '/api/cancel': cancel_render_1.handleCancelRender,
     '/api/render': add_render_1.handleAddRender,
     '/api/unsubscribe-from-file-existence': unsubscribe_from_file_existence_1.unsubscribeFromFileExistence,

package/dist/preview-server/dev-middleware/middleware.js

@@ -7,7 +7,6 @@ exports.getValueContentRangeHeader = getValueContentRangeHeader;
 exports.middleware = middleware;
 const node_path_1 = __importDefault(require("node:path"));
 const node_querystring_1 = __importDefault(require("node:querystring"));
-const node_url_1 = require("node:url");
 const renderer_1 = require("@remotion/renderer");
 const compatible_api_1 = require("./compatible-api");
 const get_paths_1 = require("./get-paths");
@@ -30,15 +29,18 @@ const mem = (fn, { cache = new Map() } = {}) => {
     cacheStore.set(memoized, cache);
     return memoized;
 };
-const memoizedParse = mem(node_url_1.parse);
+const memoizedParse = mem((url) => new URL(url, 'http://localhost'));
 function getFilenameFromUrl(context, url) {
     var _a, _b;
     const paths = (0, get_paths_1.getPaths)(context);
     let foundFilename;
     let urlObject;
+    if (!url) {
+        return;
+    }
     try {
         // The `url` property of the `request` is contains only  `pathname`, `search` and `hash`
-        urlObject = memoizedParse(url, false, true);
+        urlObject = memoizedParse(url);
     }
     catch (_c) {
         return;
@@ -47,7 +49,7 @@ function getFilenameFromUrl(context, url) {
         let filename;
         let publicPathObject;
         try {
-            publicPathObject = memoizedParse(publicPath !== 'auto' && publicPath ? publicPath : '/', false, true);
+            publicPathObject = memoizedParse(publicPath !== 'auto' && publicPath ? publicPath : '/');
         }
         catch (_d) {
             continue;

package/dist/preview-server/routes/convert-figma-clipboard-to-svg.d.ts

@@ -0,0 +1,3 @@
+import type { ConvertFigmaClipboardToSvgRequest, ConvertFigmaClipboardToSvgResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const convertFigmaClipboardToSvgHandler: ApiHandler<ConvertFigmaClipboardToSvgRequest, ConvertFigmaClipboardToSvgResponse>;

package/dist/preview-server/routes/convert-figma-clipboard-to-svg.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertFigmaClipboardToSvgHandler = void 0;
+const figma_clipboard_1 = require("../../figma/figma-clipboard");
+const convertFigmaClipboardToSvgHandler = ({ input }) => {
+    try {
+        const { svg } = (0, figma_clipboard_1.convertFigmaClipboardToSvg)(input.html);
+        return Promise.resolve({ success: true, svg });
+    }
+    catch (error) {
+        const reason = error instanceof Error ? error.message : String(error);
+        return Promise.resolve({
+            reason: reason.replace(/^Cannot import Figma selection:\s*/i, ''),
+            success: false,
+        });
+    }
+};
+exports.convertFigmaClipboardToSvgHandler = convertFigmaClipboardToSvgHandler;

package/dist/preview-server/routes/delete-keyframes.js

@@ -96,6 +96,7 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
             const result = await (0, update_keyframes_1.updateSequenceKeyframes)({
                 input: output,
                 nodePath: firstSequenceKeyframe.nodePath.nodePath,
+                schema: firstSequenceKeyframe.schema,
                 videoConfigValues: firstSequenceKeyframe.nodePath.videoConfigValues,
                 updates: keyframeGroup.map((keyframe) => {
                     var _a;
@@ -131,6 +132,7 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
                 input: output,
                 sequenceNodePath: firstEffectKeyframe.sequenceNodePath.nodePath,
                 effectIndex: firstEffectKeyframe.effectIndex,
+                schema: firstEffectKeyframe.schema,
                 videoConfigValues: firstEffectKeyframe.sequenceNodePath.videoConfigValues,
                 updates: keyframeGroup.map((keyframe) => {
                     var _a;

package/dist/preview-server/routes/insert-jsx-element.js

@@ -53,6 +53,12 @@ const validateElement = (element, remotionRoot) => {
         validateDimension('height', element.height);
         return;
     }
+    if (element.type === 'svg') {
+        if (typeof element.markup !== 'string' || element.markup.trim() === '') {
+            throw new Error('SVG markup must be a non-empty string');
+        }
+        return;
+    }
     if (element.type === 'asset') {
         if (element.srcType === 'remote') {
             if (!(0, studio_shared_1.isUrl)(element.src)) {
@@ -111,9 +117,12 @@ const getElementLabel = (element) => {
     if (element.type === 'solid') {
         return '<Solid>';
     }
+    if (element.type === 'svg') {
+        return '<Interactive.Svg>';
+    }
     if (element.type === 'asset') {
         if (element.assetType === 'image') {
-            return '<Img>';
+            return '<CanvasImage>';
         }
         if (element.assetType === 'video') {
             return '<Video>';

package/dist/preview-server/start-server.d.ts

@@ -31,13 +31,13 @@ export declare const startServer: (options: {
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
     getRenderQueue: () => RenderJob[];
     getRenderDefaults: () => RenderDefaults;
-    numberOfAudioTags: number;
+    getNumberOfAudioTags: () => number;
     queueMethods: QueueMethods;
     gitSource: GitSource | null;
     binariesDirectory: string | null;
     forceIPv4: boolean;
-    audioLatencyHint: AudioContextLatencyCategory | null;
-    previewSampleRate: number | null;
+    getAudioLatencyHint: () => AudioContextLatencyCategory | null;
+    getPreviewSampleRate: () => number | null;
     enableCrossSiteIsolation: boolean;
     askAIEnabled: boolean;
     interactivityEnabled: boolean;

package/dist/preview-server/start-server.js

@@ -97,12 +97,12 @@ const startServer = async (options) => {
                 logLevel: options.logLevel,
                 getRenderQueue: options.getRenderQueue,
                 getRenderDefaults: options.getRenderDefaults,
-                numberOfAudioTags: options.numberOfAudioTags,
+                getNumberOfAudioTags: options.getNumberOfAudioTags,
                 queueMethods: options.queueMethods,
                 gitSource: options.gitSource,
                 binariesDirectory: options.binariesDirectory,
-                audioLatencyHint: options.audioLatencyHint,
-                previewSampleRate: options.previewSampleRate,
+                getAudioLatencyHint: options.getAudioLatencyHint,
+                getPreviewSampleRate: options.getPreviewSampleRate,
                 enableCrossSiteIsolation: options.enableCrossSiteIsolation,
                 getStudioRuntimeConfig: options.getStudioRuntimeConfig,
             });

package/dist/routes.d.ts

@@ -2,7 +2,7 @@ import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { GitSource, RenderDefaults, RenderJob, StudioRuntimeConfig } from '@remotion/studio-shared';
 import type { QueueMethods } from './preview-server/api-types';
 import type { LiveEventsServer } from './preview-server/live-events';
-export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, numberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, }: {
+export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, }: {
     staticHash: string;
     staticHashPrefix: string;
     outputHash: string;
@@ -18,12 +18,12 @@ export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash,
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
     getRenderQueue: () => RenderJob[];
     getRenderDefaults: () => RenderDefaults;
-    numberOfAudioTags: number;
+    getNumberOfAudioTags: () => number;
     queueMethods: QueueMethods;
     gitSource: GitSource | null;
     binariesDirectory: string | null;
-    audioLatencyHint: AudioContextLatencyCategory | null;
-    previewSampleRate: number | null;
+    getAudioLatencyHint: () => AudioContextLatencyCategory | null;
+    getPreviewSampleRate: () => number | null;
     enableCrossSiteIsolation: boolean;
     getStudioRuntimeConfig: () => StudioRuntimeConfig;
 }) => Promise<void>;

package/dist/routes.js

@@ -225,8 +225,8 @@ const handleRequestElementInstall = async ({ liveEventsServer, request, response
         response.end(JSON.stringify({ success: false, reason: err.message }));
     }
 };
-const handleFallback = async ({ remotionRoot, hash, response, request, getCurrentInputProps, getEnvVariables, publicDir, getRenderQueue, getRenderDefaults, numberOfAudioTags, audioLatencyHint, previewSampleRate, gitSource, logLevel, enableCrossSiteIsolation, getStudioRuntimeConfig, }) => {
-    var _a;
+const handleFallback = async ({ remotionRoot, hash, response, request, getCurrentInputProps, getEnvVariables, publicDir, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, getAudioLatencyHint, getPreviewSampleRate, gitSource, logLevel, enableCrossSiteIsolation, getStudioRuntimeConfig, }) => {
+    var _a, _b;
     const acceptsHtml = ((_a = request.headers.accept) !== null && _a !== void 0 ? _a : '').includes('text/html');
     if (request.method === 'GET' && acceptsHtml) {
         await (0, watch_ignore_next_change_1.reloadPreviouslySuppressedFiles)();
@@ -272,7 +272,7 @@ const handleFallback = async ({ remotionRoot, hash, response, request, getCurren
         studioServerCommand: packageManager === 'unknown' ? null : packageManager.startCommand,
         renderQueue: getRenderQueue(),
         completedClientRenders: (0, client_render_queue_1.getCompletedClientRenders)(),
-        numberOfAudioTags,
+        numberOfAudioTags: getNumberOfAudioTags(),
         publicFiles: (0, public_folder_1.getFiles)(),
         includeFavicon: true,
         title: 'Remotion Studio',
@@ -289,8 +289,8 @@ const handleFallback = async ({ remotionRoot, hash, response, request, getCurren
         packageManager: packageManager === 'unknown' ? 'unknown' : packageManager.manager,
         logLevel,
         mode: 'dev',
-        audioLatencyHint: audioLatencyHint !== null && audioLatencyHint !== void 0 ? audioLatencyHint : 'playback',
-        sampleRate: previewSampleRate,
+        audioLatencyHint: (_b = getAudioLatencyHint()) !== null && _b !== void 0 ? _b : 'playback',
+        sampleRate: getPreviewSampleRate(),
         studioRuntimeConfig: getStudioRuntimeConfig(),
     }));
 };
@@ -394,7 +394,7 @@ const handleBeep = (_, response) => {
     readStream.pipe(response);
     return Promise.resolve();
 };
-const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, numberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, }) => {
+const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, }) => {
     const url = new URL(request.url, 'http://localhost');
     if (url.pathname === '/api/file-source') {
         return handleFileSource({
@@ -506,11 +506,11 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
         publicDir,
         getRenderQueue,
         getRenderDefaults,
-        numberOfAudioTags,
+        getNumberOfAudioTags,
         gitSource,
         logLevel,
-        audioLatencyHint,
-        previewSampleRate,
+        getAudioLatencyHint,
+        getPreviewSampleRate,
         enableCrossSiteIsolation,
         getStudioRuntimeConfig,
     });

package/dist/start-studio.d.ts

@@ -6,7 +6,7 @@ export type StartStudioResult = {
 } | {
     type: 'already-running';
 };
-export declare const startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, getStudioRuntimeConfig, }: {
+export declare const startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, getNumberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, getStudioRuntimeConfig, }: {
     browserArgs: string;
     browserFlag: string;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -24,9 +24,9 @@ export declare const startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser
     poll: number | null;
     getRenderDefaults: () => RenderDefaults;
     getRenderQueue: () => RenderJob[];
-    numberOfAudioTags: number;
-    audioLatencyHint: AudioContextLatencyCategory | null;
-    previewSampleRate: number | null;
+    getNumberOfAudioTags: () => number;
+    getAudioLatencyHint: () => AudioContextLatencyCategory | null;
+    getPreviewSampleRate: () => number | null;
     enableCrossSiteIsolation: boolean;
     queueMethods: QueueMethods;
     previewEntry: string;

package/dist/start-studio.js

@@ -19,7 +19,7 @@ const public_folder_1 = require("./preview-server/public-folder");
 const start_server_1 = require("./preview-server/start-server");
 const server_ready_1 = require("./server-ready");
 const watch_root_file_1 = require("./watch-root-file");
-const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, getStudioRuntimeConfig, }) => {
+const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, getNumberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, getStudioRuntimeConfig, }) => {
     try {
         if (typeof Bun === 'undefined') {
             process.title = 'node (npx remotion studio)';
@@ -82,14 +82,14 @@ const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEn
         logLevel,
         getRenderDefaults,
         getRenderQueue,
-        numberOfAudioTags,
+        getNumberOfAudioTags,
         queueMethods,
         gitSource,
         bufferStateDelayInMilliseconds,
         binariesDirectory,
         forceIPv4,
-        audioLatencyHint,
-        previewSampleRate,
+        getAudioLatencyHint,
+        getPreviewSampleRate,
         enableCrossSiteIsolation,
         askAIEnabled,
         interactivityEnabled,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-server"
 	},
 	"name": "@remotion/studio-server",
-	"version": "4.0.494",
+	"version": "4.0.496",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -25,13 +25,16 @@
 	"dependencies": {
 		"@babel/types": "7.24.0",
 		"@babel/parser": "7.24.1",
+		"@svgr/core": "8.1.0",
+		"@svgr/plugin-jsx": "8.1.0",
+		"kiwi-schema": "0.5.0",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.494",
+		"remotion": "4.0.496",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.494",
-		"@remotion/renderer": "4.0.494",
-		"@remotion/studio-shared": "4.0.494",
+		"@remotion/bundler": "4.0.496",
+		"@remotion/renderer": "4.0.496",
+		"@remotion/studio-shared": "4.0.496",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -39,7 +42,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.494",
+		"@remotion/eslint-config-internal": "4.0.496",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"