@remotion/studio-shared 4.0.488 → 4.0.490

package/dist/api-requests.d.ts

@@ -1,6 +1,6 @@
 import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
-import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, ExtrapolateType, InteractivitySchema, JsxComponentIdentity, SequenceNodePath, SequencePropsSubscriptionKey } from 'remotion';
+import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, ExtrapolateType, InteractivitySchema, InterpolateOutputOption, JsxComponentIdentity, SequenceNodePath, SequencePropsSubscriptionKey } from 'remotion';
 import type { RecastCodemod, VisualControlChange } from './codemods';
 import type { ComponentProp } from './component-drag-data';
 import type { EffectClipboardParam, EffectClipboardPasteType, EffectClipboardSnapshot } from './effect-clipboard-data';
@@ -430,6 +430,7 @@ export type KeyframeSettings = {
         right: ExtrapolateType;
     } | undefined;
     posterize: number | undefined;
+    output: InterpolateOutputOption | undefined;
 } | {
     type: 'easing';
     segmentIndex: number;
@@ -594,6 +595,7 @@ export type ElementInstallRequest = {
     position: InsertableCompositionElementPosition | null;
 };
 export type UpdateElementInstallTargetRequest = {
+    requestId: string | null;
     clientId: string;
     compositionFile: string | null;
     compositionId: string | null;

package/dist/effect-catalog.js

@@ -534,6 +534,28 @@ exports.EFFECT_CATALOG = [
             },
         },
     },
+    {
+        id: 'effects-linear-progressive-pixelate',
+        category: 'Stylize',
+        label: 'linearProgressivePixelate()',
+        description: 'Gradient-controlled pixelation',
+        effect: {
+            name: 'linearProgressivePixelate',
+            importPath: '@remotion/effects/linear-progressive-pixelate',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-radial-progressive-pixelate',
+        category: 'Stylize',
+        label: 'radialProgressivePixelate()',
+        description: 'Ellipse-controlled pixelation',
+        effect: {
+            name: 'radialProgressivePixelate',
+            importPath: '@remotion/effects/radial-progressive-pixelate',
+            config: {},
+        },
+    },
     {
         id: 'effects-scanlines',
         category: 'Stylize',

package/dist/effect-clipboard-data.d.ts

@@ -16,12 +16,14 @@ export type EffectClipboardClamping = {
     readonly left: EffectClipboardExtrapolateType;
     readonly right: EffectClipboardExtrapolateType;
 };
+export type EffectClipboardOutput = 'linear' | 'perceptual-scale';
 export type EffectClipboardKeyframedParam = {
     readonly type: 'keyframed';
     readonly interpolationFunction: EffectClipboardInterpolationFunction;
     readonly keyframes: EffectClipboardKeyframe[];
     readonly easing: EffectClipboardEasing[];
     readonly clamping: EffectClipboardClamping;
+    readonly output?: EffectClipboardOutput;
     readonly posterize?: number;
 };
 export type EffectClipboardParam = EffectClipboardStaticParam | EffectClipboardKeyframedParam;

package/dist/effect-clipboard-data.js

@@ -6,6 +6,7 @@ const isRecord = (value) => {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 };
 const extrapolateTypes = new Set(['extend', 'identity', 'clamp', 'wrap']);
+const outputOptions = new Set(['linear', 'perceptual-scale']);
 const isFiniteNumber = (value) => {
     return typeof value === 'number' && Number.isFinite(value);
 };
@@ -79,6 +80,7 @@ const isEffectClipboardParam = (value) => {
         return false;
     }
     const { posterize } = value;
+    const { output } = value;
     const easingLength = Array.isArray(value.keyframes) && value.keyframes.length > 0
         ? value.keyframes.length - 1
         : null;
@@ -91,6 +93,10 @@ const isEffectClipboardParam = (value) => {
         value.easing.length === easingLength &&
         value.easing.every(isEasing) &&
         isClamping(value.clamping) &&
+        (output === undefined ||
+            (value.interpolationFunction === 'interpolate' &&
+                typeof output === 'string' &&
+                outputOptions.has(output))) &&
         (posterize === undefined || (isFiniteNumber(posterize) && posterize > 0)));
 };
 const isEffectClipboardSnapshotV3 = (value) => {

package/dist/element-drag-data.d.ts

@@ -4,6 +4,7 @@ export type ElementDragData = {
     type: 'remotion-element';
     version: 1;
     element: {
+        dependencies: string[];
         slug: string;
         displayName: string;
         sourceCode: string;
@@ -13,7 +14,8 @@ export type ElementDragData = {
 export declare const isLowercaseElementFileName: (value: unknown) => value is string;
 export declare const makeElementFileNameFromSlug: (slug: string) => string | null;
 export declare const getElementComponentNameFromSourceCode: (sourceCode: string) => string | null;
-export declare const makeElementDragData: ({ dimensions, displayName, slug, sourceCode, }: {
+export declare const makeElementDragData: ({ dependencies, dimensions, displayName, slug, sourceCode, }: {
+    dependencies: string[];
     slug: string;
     displayName: string;
     sourceCode: string;

package/dist/element-drag-data.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseElementDragData = exports.makeElementDragData = exports.getElementComponentNameFromSourceCode = exports.makeElementFileNameFromSlug = exports.isLowercaseElementFileName = exports.ELEMENT_DRAG_MIME_TYPE = void 0;
 const component_drag_data_1 = require("./component-drag-data");
+const package_name_1 = require("./package-name");
 const drag_mime_types_1 = require("./drag-mime-types");
 Object.defineProperty(exports, "ELEMENT_DRAG_MIME_TYPE", { enumerable: true, get: function () { return drag_mime_types_1.ELEMENT_DRAG_MIME_TYPE; } });
 const isRecord = (value) => {
@@ -48,6 +49,11 @@ const isSourceCode = (value) => {
         value.trim().length > 0 &&
         value.length < 200000);
 };
+const isDependencies = (value) => {
+    return (Array.isArray(value) &&
+        value.length <= 100 &&
+        value.every((dependency) => typeof dependency === 'string' && (0, package_name_1.isValidPackageName)(dependency)));
+};
 const isDimensions = (value) => {
     if (!isRecord(value)) {
         return false;
@@ -69,11 +75,12 @@ const getElementComponentNameFromSourceCode = (sourceCode) => {
     return (0, component_drag_data_1.isComponentIdentifier)(componentName) ? componentName : null;
 };
 exports.getElementComponentNameFromSourceCode = getElementComponentNameFromSourceCode;
-const makeElementDragData = ({ dimensions, displayName, slug, sourceCode, }) => {
+const makeElementDragData = ({ dependencies, dimensions, displayName, slug, sourceCode, }) => {
     return {
         type: 'remotion-element',
         version: 1,
         element: {
+            dependencies: Array.from(new Set(dependencies)),
             slug,
             displayName,
             sourceCode,
@@ -94,18 +101,20 @@ const parseElementDragData = (value) => {
         if (!isRecord(parsed.element)) {
             return null;
         }
-        const { dimensions, displayName, slug, sourceCode } = parsed.element;
+        const { dependencies, dimensions, displayName, slug, sourceCode } = parsed.element;
         if (!isSlug(slug) ||
             !isDisplayName(displayName) ||
             !isSourceCode(sourceCode) ||
             (0, exports.getElementComponentNameFromSourceCode)(sourceCode) === null ||
             (0, exports.makeElementFileNameFromSlug)(slug) === null ||
+            (dependencies !== undefined && !isDependencies(dependencies)) ||
             (dimensions !== undefined &&
                 dimensions !== null &&
                 !isDimensions(dimensions))) {
             return null;
         }
         return (0, exports.makeElementDragData)({
+            dependencies: dependencies !== null && dependencies !== void 0 ? dependencies : [],
             slug,
             displayName,
             sourceCode,

package/dist/event-source-event.d.ts

@@ -54,6 +54,9 @@ export type EventSourceEvent = {
     type: 'undo-redo-stack-changed';
     undoFile: string | null;
     redoFile: string | null;
+} | {
+    type: 'request-element-install-target';
+    requestId: string;
 } | {
     type: 'element-install-request';
     request: ElementInstallRequest;

package/dist/index.d.ts

@@ -31,7 +31,7 @@ export { ProjectInfo } from './project-info';
 export type { RenderDefaults } from './render-defaults';
 export { AggregateRenderProgress, ArtifactProgress, BrowserDownloadState, BrowserProgressLog, BundlingState, CopyingState, DownloadProgress, JobProgressCallback, RenderJob, RenderJobWithCleanup, RenderingProgressInput, RequiredChromiumOptions, StitchingProgressInput, UiOpenGlOptions, } from './render-job';
 export type { CompletedClientRender } from './render-job';
-export { getRequiredPackageForEffectImportPath, getRequiredPackageForInsertableElement, } from './required-package';
+export { getRequiredPackageForEffectImportPath, getRequiredPackageForInsertableElement, isValidPackageName, } from './required-package';
 export { SCHEMA_FIELD_GROUPS, SCHEMA_FIELD_ROW_HEIGHT, getEffectFieldsToShow, getFieldsToShow, getSchemaFieldGroup, } from './schema-field-info';
 export type { AnySchemaFieldInfo, DragOverrides, EffectSchemaFieldInfo, InteractivitySchemaFieldInfo, PropStatuses, SchemaFieldGroup, SchemaFieldGroupInfo, SchemaFieldInfo, SequenceControls, } from './schema-field-info';
 export { SFX_DRAG_MIME_TYPE, parseSfxDragData, type SfxDragData, } from './sfx-drag-data';
@@ -39,6 +39,7 @@ export { ScriptLine, SomeStackFrame, StackFrame, SymbolicatedStackFrame, } from
 export { EnumPath, stringifyDefaultProps } from './stringify-default-props';
 export { getStudioEntryPoints, type StudioEntryPointPaths, } from './studio-entry-points';
 export { studioHtml, type StudioHtmlOptions } from './studio-html';
+export type { StudioRuntimeConfig } from './studio-runtime-config';
 export type { VisualControlChange } from './codemods';
 export { optimisticAddEffectKeyframe, optimisticAddSequenceKeyframe, } from './optimistic-add-keyframe';
 export { optimisticDeleteEffectKeyframe, optimisticDeleteEffectKeyframes, optimisticDeleteSequenceKeyframe, optimisticDeleteSequenceKeyframes, } from './optimistic-delete-keyframe';

package/dist/index.js

@@ -15,7 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KEYFRAME_EASING_PRESETS = exports.EASE_KEYFRAME_EASING = exports.CUBIC_KEYFRAME_EASING = exports.hotMiddlewareOptions = exports.getProjectName = exports.getLocationFromBuildError = exports.getDefaultOutLocation = exports.getAllSchemaKeys = exports.formatBytes = exports.parseElementDragData = exports.makeElementFileNameFromSlug = exports.makeElementDragData = exports.isLowercaseElementFileName = exports.getElementComponentNameFromSourceCode = exports.ELEMENT_DRAG_MIME_TYPE = exports.parseEffectDragData = exports.EFFECT_DRAG_MIME_TYPE = exports.parseEffectPropClipboardDataResult = exports.parseEffectPropClipboardData = exports.parseEffectClipboardDataResult = exports.parseEffectClipboardData = exports.makeEffectDragDataFromCatalogItem = exports.getEffectPreviewSource = exports.getEffectPreviewAlt = exports.getEffectDocumentationPath = exports.getEffectDocumentationLink = exports.getEffectCatalogCategories = exports.EFFECT_CATALOG = exports.parseEasingClipboardDataResult = exports.parseEasingClipboardData = exports.isRemotionDragMimeType = exports.REMOTION_DRAG_MIME_TYPES = exports.isImageFileType = exports.detectFileType = exports.getDefinePluginDefinitions = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = exports.parseCompositionDragData = exports.makeCompositionDragData = exports.COMPOSITION_DRAG_MIME_TYPE = exports.parseComponentDragData = exports.makeComponentDragData = exports.isComponentImportPath = exports.isComponentIdentifier = exports.areComponentProps = exports.COMPONENT_DRAG_MIME_TYPE = exports.parseAssetDragData = exports.makeAssetDragData = exports.ASSET_DRAG_MIME_TYPE = exports.stripAnsi = exports.splitAnsi = void 0;
-exports.isUrl = exports.stringifySequenceSubscriptionKey = exports.stringifySequenceExpandedRowKey = exports.optimisticUpdateSequenceKeyframeSettings = exports.optimisticUpdateEffectKeyframeSettings = exports.optimisticUpdateForPropStatuses = exports.optimisticUpdateForEffectPropStatuses = exports.optimisticMoveSequenceKeyframes = exports.optimisticMoveEffectKeyframes = exports.moveKeyframesInPropStatus = exports.canMoveKeyframesWithoutCollisions = exports.optimisticDeleteSequenceKeyframes = exports.optimisticDeleteSequenceKeyframe = exports.optimisticDeleteEffectKeyframes = exports.optimisticDeleteEffectKeyframe = exports.optimisticAddSequenceKeyframe = exports.optimisticAddEffectKeyframe = exports.studioHtml = exports.getStudioEntryPoints = exports.stringifyDefaultProps = exports.parseSfxDragData = exports.SFX_DRAG_MIME_TYPE = exports.getSchemaFieldGroup = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.SCHEMA_FIELD_GROUPS = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForEffectImportPath = exports.parseSpringEasingConfig = exports.DEFAULT_SPRING_EASING = exports.packages = exports.installableMap = exports.extraPackages = exports.descriptions = exports.apiDocs = exports.DEFAULT_TIMELINE_TRACKS = exports.keyframeInterpolationFunctions = exports.isSchemaFieldKeyframable = exports.isKeyframeInterpolationFunction = exports.isInteractivitySchemaFieldKeyframable = exports.getKeyframeInterpolationFunctionForSchemaField = exports.getKeyframeInterpolationFunction = exports.getPolyKeyframeEasing = exports.getOutKeyframeEasing = exports.getBackKeyframeEasing = exports.QUAD_KEYFRAME_EASING = exports.LINEAR_KEYFRAME_EASING = void 0;
+exports.isUrl = exports.stringifySequenceSubscriptionKey = exports.stringifySequenceExpandedRowKey = exports.optimisticUpdateSequenceKeyframeSettings = exports.optimisticUpdateEffectKeyframeSettings = exports.optimisticUpdateForPropStatuses = exports.optimisticUpdateForEffectPropStatuses = exports.optimisticMoveSequenceKeyframes = exports.optimisticMoveEffectKeyframes = exports.moveKeyframesInPropStatus = exports.canMoveKeyframesWithoutCollisions = exports.optimisticDeleteSequenceKeyframes = exports.optimisticDeleteSequenceKeyframe = exports.optimisticDeleteEffectKeyframes = exports.optimisticDeleteEffectKeyframe = exports.optimisticAddSequenceKeyframe = exports.optimisticAddEffectKeyframe = exports.studioHtml = exports.getStudioEntryPoints = exports.stringifyDefaultProps = exports.parseSfxDragData = exports.SFX_DRAG_MIME_TYPE = exports.getSchemaFieldGroup = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.SCHEMA_FIELD_GROUPS = exports.isValidPackageName = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForEffectImportPath = exports.parseSpringEasingConfig = exports.DEFAULT_SPRING_EASING = exports.packages = exports.installableMap = exports.extraPackages = exports.descriptions = exports.apiDocs = exports.DEFAULT_TIMELINE_TRACKS = exports.keyframeInterpolationFunctions = exports.isSchemaFieldKeyframable = exports.isKeyframeInterpolationFunction = exports.isInteractivitySchemaFieldKeyframable = exports.getKeyframeInterpolationFunctionForSchemaField = exports.getKeyframeInterpolationFunction = exports.getPolyKeyframeEasing = exports.getOutKeyframeEasing = exports.getBackKeyframeEasing = exports.QUAD_KEYFRAME_EASING = exports.LINEAR_KEYFRAME_EASING = void 0;
 const ansi_1 = require("./ansi");
 Object.defineProperty(exports, "splitAnsi", { enumerable: true, get: function () { return ansi_1.splitAnsi; } });
 Object.defineProperty(exports, "stripAnsi", { enumerable: true, get: function () { return ansi_1.stripAnsi; } });
@@ -113,6 +113,7 @@ Object.defineProperty(exports, "parseSpringEasingConfig", { enumerable: true, ge
 const required_package_1 = require("./required-package");
 Object.defineProperty(exports, "getRequiredPackageForEffectImportPath", { enumerable: true, get: function () { return required_package_1.getRequiredPackageForEffectImportPath; } });
 Object.defineProperty(exports, "getRequiredPackageForInsertableElement", { enumerable: true, get: function () { return required_package_1.getRequiredPackageForInsertableElement; } });
+Object.defineProperty(exports, "isValidPackageName", { enumerable: true, get: function () { return required_package_1.isValidPackageName; } });
 const schema_field_info_1 = require("./schema-field-info");
 Object.defineProperty(exports, "SCHEMA_FIELD_GROUPS", { enumerable: true, get: function () { return schema_field_info_1.SCHEMA_FIELD_GROUPS; } });
 Object.defineProperty(exports, "SCHEMA_FIELD_ROW_HEIGHT", { enumerable: true, get: function () { return schema_field_info_1.SCHEMA_FIELD_ROW_HEIGHT; } });

package/dist/optimistic-add-keyframe.js

@@ -56,6 +56,7 @@ const addKeyframeToPropStatus = ({ status, fieldKey, frame, value, schema, }) =>
             easing: [],
             clamping: { left: 'clamp', right: 'clamp' },
             posterize: undefined,
+            output: undefined,
         };
     }
     return status;

package/dist/optimistic-update-keyframe-settings.js

@@ -25,6 +25,7 @@ const applySettingsToStatus = (status, settings) => {
             ? { clamping: settings.clamping }
             : {}),
         ...(settings.type === 'settings' ? { posterize: settings.posterize } : {}),
+        ...(settings.type === 'settings' ? { output: settings.output } : {}),
         ...(settings.type === 'easing'
             ? {
                 easing: updateEasing({

package/dist/package-info.d.ts

@@ -1,4 +1,4 @@
-export declare const packages: readonly ["svg-3d-engine", "animation-utils", "animated-emoji", "astro-example", "babel-loader", "bugs", "brand", "bundler", "browser-studio", "canvas-capture", "cli", "cloudrun", "codex-plugin", "compositor-darwin-arm64", "compositor-darwin-x64", "compositor-linux-arm64-gnu", "compositor-linux-arm64-musl", "compositor-linux-x64-gnu", "compositor-linux-x64-musl", "compositor-win32-x64-msvc", "core", "create-video", "discord-poster", "docusaurus-plugin", "docs", "enable-scss", "eslint-config", "eslint-config-flat", "eslint-config-internal", "eslint-plugin", "example-without-zod", "example", "fonts", "gif", "google-fonts", "install-whisper-cpp", "it-tests", "react18-tests", "lambda-go-example", "lambda-go", "lambda-php", "lambda-ruby", "lambda-python", "lambda", "lambda-client", "layout-utils", "rounded-text-box", "licensing", "lottie", "mcp", "media-utils", "motion-blur", "noise", "paths", "player-a11y", "player-example", "player", "preload", "renderer", "rive", "shapes", "skia", "promo-pages", "streaming", "serverless", "serverless-client", "skills", "skills-evals", "studio-server", "studio-shared", "studio", "tailwind", "tailwind-v4", "timeline-utils", "test-utils", "three", "transitions", "media-parser", "zod-types", "zod-types-v3", "webcodecs", "convert", "captions", "openai-whisper", "elevenlabs", "compositor", "example-videos", "whisper-web", "media", "remotion-media", "web-renderer", "design", "light-leaks", "starburst", "vercel", "sfx", "effects"];
+export declare const packages: readonly ["svg-3d-engine", "animation-utils", "animated-emoji", "astro-example", "babel-loader", "bugs", "brand", "bundler", "browser-studio", "canvas-capture", "cli", "cloudrun", "codex-plugin", "compositor-darwin-arm64", "compositor-darwin-x64", "compositor-linux-arm64-gnu", "compositor-linux-arm64-musl", "compositor-linux-x64-gnu", "compositor-linux-x64-musl", "compositor-win32-x64-msvc", "core", "create-video", "discord-poster", "docusaurus-plugin", "docs", "enable-scss", "eslint-config", "eslint-config-flat", "eslint-config-internal", "eslint-plugin", "example-without-zod", "example", "fonts", "gif", "google-fonts", "install-whisper-cpp", "it-tests", "react18-tests", "lambda-go-example", "lambda-go", "lambda-php", "lambda-ruby", "lambda-python", "lambda", "lambda-client", "layout-utils", "rounded-text-box", "licensing", "lottie", "mcp", "media-utils", "motion-blur", "noise", "paths", "player-a11y", "player-example", "player", "preload", "renderer", "rive", "shapes", "skia", "promo-pages", "streaming", "serverless", "serverless-client", "skills", "skills-evals", "studio-server", "studio-shared", "studio", "tailwind", "tailwind-v4", "timeline-utils", "test-utils", "three", "transitions", "media-parser", "zod-types", "zod-types-v3", "webcodecs", "convert", "captions", "openai-whisper", "elevenlabs", "compositor", "example-videos", "whisper-web", "media", "remotion-media", "web-renderer", "design", "light-leaks", "rough-notation", "starburst", "vercel", "sfx", "effects"];
 export type Pkgs = (typeof packages)[number];
 export type ExtraPackage = {
     name: string;

package/dist/package-info.js

@@ -95,6 +95,7 @@ exports.packages = [
     'web-renderer',
     'design',
     'light-leaks',
+    'rough-notation',
     'starburst',
     'vercel',
     'sfx',
@@ -219,7 +220,8 @@ exports.descriptions = {
     'web-renderer': 'Render videos in the browser (not yet released)',
     design: 'Design system',
     'light-leaks': 'Light leak effects for Remotion',
-    'player-a11y': 'Accessible wrapper around @remotion/player with WCAG 2.1 AA controls',
+    'rough-notation': 'Rough annotation primitives for Remotion',
+    'player-a11y': 'Internal accessibility wrapper around @remotion/player',
     starburst: 'Starburst ray effect for Remotion',
     vercel: 'Render Remotion videos on Vercel Sandbox',
     sfx: 'Sound effect library',
@@ -283,7 +285,7 @@ exports.installableMap = {
     noise: true,
     paths: true,
     'player-example': false,
-    'player-a11y': true,
+    'player-a11y': false,
     player: true,
     preload: true,
     renderer: true,
@@ -319,6 +321,7 @@ exports.installableMap = {
     'web-renderer': false,
     design: false,
     'light-leaks': true,
+    'rough-notation': true,
     starburst: true,
     vercel: true,
     sfx: true,
@@ -375,7 +378,7 @@ exports.apiDocs = {
     'lambda-python': null,
     'lambda-ruby': 'https://www.remotion.dev/docs/lambda/ruby',
     'player-example': null,
-    'player-a11y': 'https://www.remotion.dev/docs/player-a11y',
+    'player-a11y': null,
     'astro-example': null,
     'lambda-go-example': null,
     'test-utils': null,
@@ -418,6 +421,7 @@ exports.apiDocs = {
     'web-renderer': 'https://www.remotion.dev/docs/web-renderer/',
     design: 'https://www.remotion.dev/design',
     'light-leaks': 'https://www.remotion.dev/docs/light-leaks',
+    'rough-notation': 'https://www.remotion.dev/docs/rough-notation',
     starburst: 'https://www.remotion.dev/docs/starburst',
     vercel: 'https://www.remotion.dev/docs/vercel/api',
     sfx: 'https://www.remotion.dev/docs/sfx',

package/dist/package-name.d.ts

@@ -0,0 +1 @@
+export declare const isValidPackageName: (packageName: string) => boolean;

package/dist/package-name.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidPackageName = void 0;
+const nodeBuiltinPackages = new Set([
+    'assert',
+    'async_hooks',
+    'buffer',
+    'child_process',
+    'cluster',
+    'console',
+    'constants',
+    'crypto',
+    'dgram',
+    'diagnostics_channel',
+    'dns',
+    'domain',
+    'events',
+    'fs',
+    'http',
+    'http2',
+    'https',
+    'inspector',
+    'module',
+    'net',
+    'os',
+    'path',
+    'perf_hooks',
+    'process',
+    'punycode',
+    'querystring',
+    'readline',
+    'repl',
+    'sea',
+    'sqlite',
+    'stream',
+    'string_decoder',
+    'sys',
+    'test',
+    'timers',
+    'tls',
+    'trace_events',
+    'tty',
+    'url',
+    'util',
+    'v8',
+    'vm',
+    'wasi',
+    'worker_threads',
+    'zlib',
+]);
+const scopedPackagePattern = /^(?:@([^/]+?)\/)?([^/]+?)$/;
+const reservedPackageNames = new Set(['node_modules', 'favicon.ico']);
+const isValidPackageName = (packageName) => {
+    var _a;
+    if (packageName.length === 0 ||
+        packageName.length > 214 ||
+        packageName.startsWith('.') ||
+        packageName.startsWith('_') ||
+        // npm permits leading hyphens, but package-manager CLIs interpret them as
+        // options instead of package names.
+        packageName.startsWith('-') ||
+        packageName.trim() !== packageName ||
+        packageName.toLowerCase() !== packageName ||
+        reservedPackageNames.has(packageName) ||
+        nodeBuiltinPackages.has(packageName) ||
+        /[~'!()*]/.test((_a = packageName.split('/').at(-1)) !== null && _a !== void 0 ? _a : '')) {
+        return false;
+    }
+    if (encodeURIComponent(packageName) === packageName) {
+        return true;
+    }
+    const match = packageName.match(scopedPackagePattern);
+    if (!match) {
+        return false;
+    }
+    const [, scope, name] = match;
+    return (scope !== undefined &&
+        name !== undefined &&
+        encodeURIComponent(scope) === scope &&
+        encodeURIComponent(name) === name);
+};
+exports.isValidPackageName = isValidPackageName;

package/dist/render-defaults.d.ts

@@ -3,6 +3,7 @@ import type { HardwareAccelerationOption } from '@remotion/renderer/client';
 import type { _InternalTypes } from 'remotion';
 import type { GitSource } from './git-source';
 import type { PackageManager } from './package-manager';
+import type { StudioRuntimeConfig } from './studio-runtime-config';
 export type RenderDefaults = {
     jpegQuality: number;
     scale: number;
@@ -55,5 +56,6 @@ declare global {
         remotion_gitSource: GitSource | null;
         remotion_installedPackages: string[] | null;
         remotion_packageManager: PackageManager | 'unknown';
+        remotion_studioConfig: StudioRuntimeConfig | null;
     }
 }

package/dist/required-package.d.ts

@@ -1,4 +1,5 @@
 import type { InsertableCompositionElement } from './api-requests';
+export { isValidPackageName } from './package-name';
 export declare const getRequiredPackageForImportPath: (importPath: string) => string | null;
 export declare const getRequiredPackageForInsertableElement: (element: InsertableCompositionElement) => string | null;
 export declare const getRequiredPackageForEffectImportPath: (importPath: string) => string | null;

package/dist/required-package.js

@@ -1,16 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRequiredPackageForEffectImportPath = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForImportPath = void 0;
+exports.getRequiredPackageForEffectImportPath = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForImportPath = exports.isValidPackageName = void 0;
+const package_name_1 = require("./package-name");
+const package_name_2 = require("./package-name");
+Object.defineProperty(exports, "isValidPackageName", { enumerable: true, get: function () { return package_name_2.isValidPackageName; } });
 const getRequiredPackageForImportPath = (importPath) => {
     if (importPath === 'remotion' || importPath.startsWith('.')) {
         return null;
     }
     if (importPath.startsWith('@')) {
         const [scope, scopedPackageName] = importPath.split('/');
-        return scope && scopedPackageName ? `${scope}/${scopedPackageName}` : null;
+        const scopedPackage = scope && scopedPackageName ? `${scope}/${scopedPackageName}` : null;
+        return scopedPackage && (0, package_name_1.isValidPackageName)(scopedPackage)
+            ? scopedPackage
+            : null;
     }
     const [packageName] = importPath.split('/');
-    return packageName || null;
+    return packageName && (0, package_name_1.isValidPackageName)(packageName) ? packageName : null;
 };
 exports.getRequiredPackageForImportPath = getRequiredPackageForImportPath;
 const getRequiredPackageForInsertableElement = (element) => {

package/dist/studio-html.d.ts

@@ -2,6 +2,7 @@ import type { LogLevel, StaticFile } from 'remotion';
 import type { GitSource } from './git-source';
 import type { PackageManager } from './package-manager';
 import type { RenderDefaults } from './render-defaults';
+import type { StudioRuntimeConfig } from './studio-runtime-config';
 export type StudioHtmlOptions = {
     staticHash: string;
     publicPath: string;
@@ -28,5 +29,6 @@ export type StudioHtmlOptions = {
     mode: 'dev' | 'bundle';
     bundleScriptUrl?: string;
     readOnlyStudio?: boolean;
+    studioRuntimeConfig?: StudioRuntimeConfig;
 };
-export declare const studioHtml: ({ publicPath, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, completedClientRenders, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, publicFolderExists, gitSource, projectName, installedDependencies, packageManager, audioLatencyHint, sampleRate, logLevel, mode, bundleScriptUrl, readOnlyStudio, }: StudioHtmlOptions) => string;
+export declare const studioHtml: ({ publicPath, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, completedClientRenders, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, publicFolderExists, gitSource, projectName, installedDependencies, packageManager, audioLatencyHint, sampleRate, logLevel, mode, bundleScriptUrl, readOnlyStudio, studioRuntimeConfig, }: StudioHtmlOptions) => string;

package/dist/studio-html.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.studioHtml = void 0;
 const remotion_1 = require("remotion");
-const studioHtml = ({ publicPath, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, completedClientRenders, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, publicFolderExists, gitSource, projectName, installedDependencies, packageManager, audioLatencyHint, sampleRate, logLevel, mode, bundleScriptUrl, readOnlyStudio, }) => {
+const studioHtml = ({ publicPath, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, completedClientRenders, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, publicFolderExists, gitSource, projectName, installedDependencies, packageManager, audioLatencyHint, sampleRate, logLevel, mode, bundleScriptUrl, readOnlyStudio, studioRuntimeConfig, }) => {
     const scriptUrl = bundleScriptUrl !== null && bundleScriptUrl !== void 0 ? bundleScriptUrl : `${publicPath}bundle.js`;
     return `
 <!DOCTYPE html>
@@ -29,6 +29,7 @@ const studioHtml = ({ publicPath, editorName, inputProps, envVariables, staticHa
 		<script>window.remotion_publicPath = ${JSON.stringify(publicPath)};</script>
 		<script>window.remotion_audioEnabled = true;</script>
 		<script>window.remotion_videoEnabled = true;</script>
+		<script>window.remotion_studioConfig = ${JSON.stringify(studioRuntimeConfig !== null && studioRuntimeConfig !== void 0 ? studioRuntimeConfig : null)};</script>
 		<script>window.remotion_renderDefaults = ${JSON.stringify(renderDefaults)};</script>
 		<script>window.remotion_cwd = ${JSON.stringify(remotionRoot)};</script>
 		<script>window.remotion_studioServerCommand = ${studioServerCommand ? JSON.stringify(studioServerCommand) : 'null'};</script>

package/dist/studio-runtime-config.d.ts

@@ -0,0 +1,8 @@
+export type StudioRuntimeConfig = {
+    readonly maxTimelineTracks: number | null;
+    readonly askAIEnabled: boolean;
+    readonly interactivityEnabled: boolean;
+    readonly keyboardShortcutsEnabled: boolean;
+    readonly bufferStateDelayInMilliseconds: number | null;
+    readonly experimentalClientSideRenderingEnabled: boolean;
+};

package/dist/studio-runtime-config.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-shared"
 	},
 	"name": "@remotion/studio-shared",
-	"version": "4.0.488",
+	"version": "4.0.490",
 	"description": "Internal package for shared objects between the Studio backend and frontend",
 	"main": "dist",
 	"scripts": {
@@ -20,11 +20,11 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.488"
+		"remotion": "4.0.490"
 	},
 	"devDependencies": {
-		"@remotion/renderer": "4.0.488",
-		"@remotion/eslint-config-internal": "4.0.488",
+		"@remotion/renderer": "4.0.490",
+		"@remotion/eslint-config-internal": "4.0.490",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/shape-drag-data.d.ts

@@ -1,22 +0,0 @@
-export declare const SHAPE_DRAG_MIME_TYPE = "application/vnd.remotion.shape+json";
-export declare const shapeNames: readonly ["Arrow", "Circle", "Ellipse", "Heart", "Pie", "Polygon", "Rect", "Star", "Triangle"];
-export type ShapeName = (typeof shapeNames)[number];
-export type ShapeAttribute = {
-    name: string;
-    value: string | number | boolean;
-};
-export type ShapeDragData = {
-    type: 'remotion-shape';
-    version: 1;
-    shape: ShapeName;
-    attributes: ShapeAttribute[];
-};
-export declare const isShapeName: (value: unknown) => value is "Arrow" | "Circle" | "Ellipse" | "Heart" | "Pie" | "Polygon" | "Rect" | "Star" | "Triangle";
-export declare const isShapeAttributeName: (value: unknown) => value is string;
-export declare const isShapeAttribute: (value: unknown) => value is ShapeAttribute;
-export declare const areShapeAttributes: (value: unknown) => value is ShapeAttribute[];
-export declare const makeShapeDragData: ({ attributes, shape, }: {
-    attributes: ShapeAttribute[];
-    shape: "Arrow" | "Circle" | "Ellipse" | "Heart" | "Pie" | "Polygon" | "Rect" | "Star" | "Triangle";
-}) => ShapeDragData;
-export declare const parseShapeDragData: (value: string) => ShapeDragData | null;

package/dist/shape-drag-data.js

@@ -1,90 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseShapeDragData = exports.makeShapeDragData = exports.areShapeAttributes = exports.isShapeAttribute = exports.isShapeAttributeName = exports.isShapeName = exports.shapeNames = exports.SHAPE_DRAG_MIME_TYPE = void 0;
-exports.SHAPE_DRAG_MIME_TYPE = 'application/vnd.remotion.shape+json';
-exports.shapeNames = [
-    'Arrow',
-    'Circle',
-    'Ellipse',
-    'Heart',
-    'Pie',
-    'Polygon',
-    'Rect',
-    'Star',
-    'Triangle',
-];
-const isRecord = (value) => {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
-};
-const isShapeName = (value) => {
-    return typeof value === 'string' && exports.shapeNames.includes(value);
-};
-exports.isShapeName = isShapeName;
-const isShapeAttributeName = (value) => {
-    return (typeof value === 'string' &&
-        value !== 'style' &&
-        /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(value));
-};
-exports.isShapeAttributeName = isShapeAttributeName;
-const isShapeAttribute = (value) => {
-    if (!isRecord(value)) {
-        return false;
-    }
-    if (!(0, exports.isShapeAttributeName)(value.name)) {
-        return false;
-    }
-    return (typeof value.value === 'string' ||
-        typeof value.value === 'boolean' ||
-        (typeof value.value === 'number' && Number.isFinite(value.value)));
-};
-exports.isShapeAttribute = isShapeAttribute;
-const areShapeAttributes = (value) => {
-    if (!Array.isArray(value)) {
-        return false;
-    }
-    const seen = new Set();
-    for (const attribute of value) {
-        if (!(0, exports.isShapeAttribute)(attribute) || seen.has(attribute.name)) {
-            return false;
-        }
-        seen.add(attribute.name);
-    }
-    return true;
-};
-exports.areShapeAttributes = areShapeAttributes;
-const makeShapeDragData = ({ attributes, shape, }) => {
-    return {
-        type: 'remotion-shape',
-        version: 1,
-        shape,
-        attributes,
-    };
-};
-exports.makeShapeDragData = makeShapeDragData;
-const parseShapeDragData = (value) => {
-    try {
-        const parsed = JSON.parse(value);
-        if (!isRecord(parsed)) {
-            return null;
-        }
-        if (parsed.type !== 'remotion-shape' || parsed.version !== 1) {
-            return null;
-        }
-        if (!(0, exports.isShapeName)(parsed.shape)) {
-            return null;
-        }
-        if (!(0, exports.areShapeAttributes)(parsed.attributes)) {
-            return null;
-        }
-        return {
-            type: 'remotion-shape',
-            version: 1,
-            shape: parsed.shape,
-            attributes: parsed.attributes,
-        };
-    }
-    catch (_a) {
-        return null;
-    }
-};
-exports.parseShapeDragData = parseShapeDragData;