@remotion/studio-shared 4.0.489 → 4.0.491

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
2
2
  import type { HardwareAccelerationOption } from '@remotion/renderer/client';
3
- import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, ExtrapolateType, InteractivitySchema, JsxComponentIdentity, SequenceNodePath, SequencePropsSubscriptionKey } from 'remotion';
3
+ import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, ExtrapolateType, InteractivitySchema, InterpolateOutputOption, JsxComponentIdentity, SequenceNodePath, SequencePropsSubscriptionKey, VideoConfigValues } from 'remotion';
4
4
  import type { RecastCodemod, VisualControlChange } from './codemods';
5
5
  import type { ComponentProp } from './component-drag-data';
6
6
  import type { EffectClipboardParam, EffectClipboardPasteType, EffectClipboardSnapshot } from './effect-clipboard-data';
@@ -206,6 +206,7 @@ export type SubscribeToSequencePropsRequest = {
206
206
  keys: string[];
207
207
  effects: string[][];
208
208
  clientId: string;
209
+ videoConfigValues: VideoConfigValues;
209
210
  };
210
211
  export type SubscribeToSequencePropsResponse = {
211
212
  success: true;
@@ -430,6 +431,7 @@ export type KeyframeSettings = {
430
431
  right: ExtrapolateType;
431
432
  } | undefined;
432
433
  posterize: number | undefined;
434
+ output: InterpolateOutputOption | undefined;
433
435
  } | {
434
436
  type: 'easing';
435
437
  segmentIndex: number;
@@ -478,6 +480,7 @@ export type PasteEffectsRequest = {
478
480
  type: EffectClipboardPasteType;
479
481
  effects: EffectClipboardSnapshot[];
480
482
  clientId: string;
483
+ insertAtIndices: number[] | null;
481
484
  };
482
485
  export type PasteEffectsResponse = {
483
486
  success: true;
@@ -601,6 +604,7 @@ export type UpdateElementInstallTargetRequest = {
601
604
  canInstall: boolean;
602
605
  lastFocusedAt: number | null;
603
606
  readOnly: boolean;
607
+ studioUrl: string;
604
608
  };
605
609
  export type UpdateElementInstallTargetResponse = {};
606
610
  export type DownloadRemoteAssetRequest = {
@@ -1,15 +1,13 @@
1
- export declare const getDefinePluginDefinitions: ({ maxTimelineTracks, askAIEnabled, interactivityEnabled, keyboardShortcutsEnabled, bufferStateDelayInMilliseconds, experimentalClientSideRenderingEnabled, }: {
1
+ export declare const getDefinePluginDefinitions: ({ maxTimelineTracks, askAIEnabled, interactivityEnabled, keyboardShortcutsEnabled, bufferStateDelayInMilliseconds, }: {
2
2
  maxTimelineTracks: number | null;
3
3
  askAIEnabled: boolean;
4
4
  interactivityEnabled: boolean;
5
5
  keyboardShortcutsEnabled: boolean;
6
6
  bufferStateDelayInMilliseconds: number | null;
7
- experimentalClientSideRenderingEnabled: boolean;
8
7
  }) => {
9
8
  'process.env.MAX_TIMELINE_TRACKS': number | null;
10
9
  'process.env.ASK_AI_ENABLED': boolean;
11
10
  'process.env.INTERACTIVITY_ENABLED': boolean;
12
11
  'process.env.KEYBOARD_SHORTCUTS_ENABLED': boolean;
13
12
  'process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS': number | null;
14
- 'process.env.EXPERIMENTAL_CLIENT_SIDE_RENDERING_ENABLED': boolean;
15
13
  };
@@ -1,12 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.getDefinePluginDefinitions = void 0;
4
- const getDefinePluginDefinitions = ({ maxTimelineTracks, askAIEnabled, interactivityEnabled, keyboardShortcutsEnabled, bufferStateDelayInMilliseconds, experimentalClientSideRenderingEnabled, }) => ({
4
+ const getDefinePluginDefinitions = ({ maxTimelineTracks, askAIEnabled, interactivityEnabled, keyboardShortcutsEnabled, bufferStateDelayInMilliseconds, }) => ({
5
5
  'process.env.MAX_TIMELINE_TRACKS': maxTimelineTracks,
6
6
  'process.env.ASK_AI_ENABLED': askAIEnabled,
7
7
  'process.env.INTERACTIVITY_ENABLED': interactivityEnabled,
8
8
  'process.env.KEYBOARD_SHORTCUTS_ENABLED': keyboardShortcutsEnabled,
9
9
  'process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS': bufferStateDelayInMilliseconds,
10
- 'process.env.EXPERIMENTAL_CLIENT_SIDE_RENDERING_ENABLED': experimentalClientSideRenderingEnabled,
11
10
  });
12
11
  exports.getDefinePluginDefinitions = getDefinePluginDefinitions;
@@ -400,6 +400,17 @@ exports.EFFECT_CATALOG = [
400
400
  config: {},
401
401
  },
402
402
  },
403
+ {
404
+ id: 'effects-skew',
405
+ category: 'Distort',
406
+ label: 'skew()',
407
+ description: 'Skew the source on two axes',
408
+ effect: {
409
+ name: 'skew',
410
+ importPath: '@remotion/effects/skew',
411
+ config: {},
412
+ },
413
+ },
403
414
  {
404
415
  id: 'effects-burlap',
405
416
  category: 'Stylize',
@@ -534,6 +545,28 @@ exports.EFFECT_CATALOG = [
534
545
  },
535
546
  },
536
547
  },
548
+ {
549
+ id: 'effects-linear-progressive-pixelate',
550
+ category: 'Stylize',
551
+ label: 'linearProgressivePixelate()',
552
+ description: 'Gradient-controlled pixelation',
553
+ effect: {
554
+ name: 'linearProgressivePixelate',
555
+ importPath: '@remotion/effects/linear-progressive-pixelate',
556
+ config: {},
557
+ },
558
+ },
559
+ {
560
+ id: 'effects-radial-progressive-pixelate',
561
+ category: 'Stylize',
562
+ label: 'radialProgressivePixelate()',
563
+ description: 'Ellipse-controlled pixelation',
564
+ effect: {
565
+ name: 'radialProgressivePixelate',
566
+ importPath: '@remotion/effects/radial-progressive-pixelate',
567
+ config: {},
568
+ },
569
+ },
537
570
  {
538
571
  id: 'effects-scanlines',
539
572
  category: 'Stylize',
@@ -608,6 +641,17 @@ exports.EFFECT_CATALOG = [
608
641
  config: {},
609
642
  },
610
643
  },
644
+ {
645
+ id: 'effects-liquid-contours',
646
+ category: 'Generate',
647
+ label: 'liquidContours()',
648
+ description: 'Two-color liquid contour background',
649
+ effect: {
650
+ name: 'liquidContours',
651
+ importPath: '@remotion/effects/liquid-contours',
652
+ config: {},
653
+ },
654
+ },
611
655
  {
612
656
  id: 'effects-checkerboard',
613
657
  category: 'Generate',
@@ -16,12 +16,14 @@ export type EffectClipboardClamping = {
16
16
  readonly left: EffectClipboardExtrapolateType;
17
17
  readonly right: EffectClipboardExtrapolateType;
18
18
  };
19
+ export type EffectClipboardOutput = 'linear' | 'perceptual-scale';
19
20
  export type EffectClipboardKeyframedParam = {
20
21
  readonly type: 'keyframed';
21
22
  readonly interpolationFunction: EffectClipboardInterpolationFunction;
22
23
  readonly keyframes: EffectClipboardKeyframe[];
23
24
  readonly easing: EffectClipboardEasing[];
24
25
  readonly clamping: EffectClipboardClamping;
26
+ readonly output?: EffectClipboardOutput;
25
27
  readonly posterize?: number;
26
28
  };
27
29
  export type EffectClipboardParam = EffectClipboardStaticParam | EffectClipboardKeyframedParam;
@@ -6,6 +6,7 @@ const isRecord = (value) => {
6
6
  return typeof value === 'object' && value !== null && !Array.isArray(value);
7
7
  };
8
8
  const extrapolateTypes = new Set(['extend', 'identity', 'clamp', 'wrap']);
9
+ const outputOptions = new Set(['linear', 'perceptual-scale']);
9
10
  const isFiniteNumber = (value) => {
10
11
  return typeof value === 'number' && Number.isFinite(value);
11
12
  };
@@ -79,6 +80,7 @@ const isEffectClipboardParam = (value) => {
79
80
  return false;
80
81
  }
81
82
  const { posterize } = value;
83
+ const { output } = value;
82
84
  const easingLength = Array.isArray(value.keyframes) && value.keyframes.length > 0
83
85
  ? value.keyframes.length - 1
84
86
  : null;
@@ -91,6 +93,10 @@ const isEffectClipboardParam = (value) => {
91
93
  value.easing.length === easingLength &&
92
94
  value.easing.every(isEasing) &&
93
95
  isClamping(value.clamping) &&
96
+ (output === undefined ||
97
+ (value.interpolationFunction === 'interpolate' &&
98
+ typeof output === 'string' &&
99
+ outputOptions.has(output))) &&
94
100
  (posterize === undefined || (isFiniteNumber(posterize) && posterize > 0)));
95
101
  };
96
102
  const isEffectClipboardSnapshotV3 = (value) => {
@@ -4,6 +4,7 @@ export type ElementDragData = {
4
4
  type: 'remotion-element';
5
5
  version: 1;
6
6
  element: {
7
+ dependencies: string[];
7
8
  slug: string;
8
9
  displayName: string;
9
10
  sourceCode: string;
@@ -13,7 +14,8 @@ export type ElementDragData = {
13
14
  export declare const isLowercaseElementFileName: (value: unknown) => value is string;
14
15
  export declare const makeElementFileNameFromSlug: (slug: string) => string | null;
15
16
  export declare const getElementComponentNameFromSourceCode: (sourceCode: string) => string | null;
16
- export declare const makeElementDragData: ({ dimensions, displayName, slug, sourceCode, }: {
17
+ export declare const makeElementDragData: ({ dependencies, dimensions, displayName, slug, sourceCode, }: {
18
+ dependencies: string[];
17
19
  slug: string;
18
20
  displayName: string;
19
21
  sourceCode: string;
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.parseElementDragData = exports.makeElementDragData = exports.getElementComponentNameFromSourceCode = exports.makeElementFileNameFromSlug = exports.isLowercaseElementFileName = exports.ELEMENT_DRAG_MIME_TYPE = void 0;
4
4
  const component_drag_data_1 = require("./component-drag-data");
5
+ const package_name_1 = require("./package-name");
5
6
  const drag_mime_types_1 = require("./drag-mime-types");
6
7
  Object.defineProperty(exports, "ELEMENT_DRAG_MIME_TYPE", { enumerable: true, get: function () { return drag_mime_types_1.ELEMENT_DRAG_MIME_TYPE; } });
7
8
  const isRecord = (value) => {
@@ -48,6 +49,11 @@ const isSourceCode = (value) => {
48
49
  value.trim().length > 0 &&
49
50
  value.length < 200000);
50
51
  };
52
+ const isDependencies = (value) => {
53
+ return (Array.isArray(value) &&
54
+ value.length <= 100 &&
55
+ value.every((dependency) => typeof dependency === 'string' && (0, package_name_1.isValidPackageName)(dependency)));
56
+ };
51
57
  const isDimensions = (value) => {
52
58
  if (!isRecord(value)) {
53
59
  return false;
@@ -69,11 +75,12 @@ const getElementComponentNameFromSourceCode = (sourceCode) => {
69
75
  return (0, component_drag_data_1.isComponentIdentifier)(componentName) ? componentName : null;
70
76
  };
71
77
  exports.getElementComponentNameFromSourceCode = getElementComponentNameFromSourceCode;
72
- const makeElementDragData = ({ dimensions, displayName, slug, sourceCode, }) => {
78
+ const makeElementDragData = ({ dependencies, dimensions, displayName, slug, sourceCode, }) => {
73
79
  return {
74
80
  type: 'remotion-element',
75
81
  version: 1,
76
82
  element: {
83
+ dependencies: Array.from(new Set(dependencies)),
77
84
  slug,
78
85
  displayName,
79
86
  sourceCode,
@@ -94,18 +101,20 @@ const parseElementDragData = (value) => {
94
101
  if (!isRecord(parsed.element)) {
95
102
  return null;
96
103
  }
97
- const { dimensions, displayName, slug, sourceCode } = parsed.element;
104
+ const { dependencies, dimensions, displayName, slug, sourceCode } = parsed.element;
98
105
  if (!isSlug(slug) ||
99
106
  !isDisplayName(displayName) ||
100
107
  !isSourceCode(sourceCode) ||
101
108
  (0, exports.getElementComponentNameFromSourceCode)(sourceCode) === null ||
102
109
  (0, exports.makeElementFileNameFromSlug)(slug) === null ||
110
+ (dependencies !== undefined && !isDependencies(dependencies)) ||
103
111
  (dimensions !== undefined &&
104
112
  dimensions !== null &&
105
113
  !isDimensions(dimensions))) {
106
114
  return null;
107
115
  }
108
116
  return (0, exports.makeElementDragData)({
117
+ dependencies: dependencies !== null && dependencies !== void 0 ? dependencies : [],
109
118
  slug,
110
119
  displayName,
111
120
  sourceCode,
package/dist/index.d.ts CHANGED
@@ -31,7 +31,7 @@ export { ProjectInfo } from './project-info';
31
31
  export type { RenderDefaults } from './render-defaults';
32
32
  export { AggregateRenderProgress, ArtifactProgress, BrowserDownloadState, BrowserProgressLog, BundlingState, CopyingState, DownloadProgress, JobProgressCallback, RenderJob, RenderJobWithCleanup, RenderingProgressInput, RequiredChromiumOptions, StitchingProgressInput, UiOpenGlOptions, } from './render-job';
33
33
  export type { CompletedClientRender } from './render-job';
34
- export { getRequiredPackageForEffectImportPath, getRequiredPackageForInsertableElement, } from './required-package';
34
+ export { getRequiredPackageForEffectImportPath, getRequiredPackageForInsertableElement, isValidPackageName, } from './required-package';
35
35
  export { SCHEMA_FIELD_GROUPS, SCHEMA_FIELD_ROW_HEIGHT, getEffectFieldsToShow, getFieldsToShow, getSchemaFieldGroup, } from './schema-field-info';
36
36
  export type { AnySchemaFieldInfo, DragOverrides, EffectSchemaFieldInfo, InteractivitySchemaFieldInfo, PropStatuses, SchemaFieldGroup, SchemaFieldGroupInfo, SchemaFieldInfo, SequenceControls, } from './schema-field-info';
37
37
  export { SFX_DRAG_MIME_TYPE, parseSfxDragData, type SfxDragData, } from './sfx-drag-data';
package/dist/index.js CHANGED
@@ -15,7 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  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;
18
- 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;
18
+ 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;
19
19
  const ansi_1 = require("./ansi");
20
20
  Object.defineProperty(exports, "splitAnsi", { enumerable: true, get: function () { return ansi_1.splitAnsi; } });
21
21
  Object.defineProperty(exports, "stripAnsi", { enumerable: true, get: function () { return ansi_1.stripAnsi; } });
@@ -113,6 +113,7 @@ Object.defineProperty(exports, "parseSpringEasingConfig", { enumerable: true, ge
113
113
  const required_package_1 = require("./required-package");
114
114
  Object.defineProperty(exports, "getRequiredPackageForEffectImportPath", { enumerable: true, get: function () { return required_package_1.getRequiredPackageForEffectImportPath; } });
115
115
  Object.defineProperty(exports, "getRequiredPackageForInsertableElement", { enumerable: true, get: function () { return required_package_1.getRequiredPackageForInsertableElement; } });
116
+ Object.defineProperty(exports, "isValidPackageName", { enumerable: true, get: function () { return required_package_1.isValidPackageName; } });
116
117
  const schema_field_info_1 = require("./schema-field-info");
117
118
  Object.defineProperty(exports, "SCHEMA_FIELD_GROUPS", { enumerable: true, get: function () { return schema_field_info_1.SCHEMA_FIELD_GROUPS; } });
118
119
  Object.defineProperty(exports, "SCHEMA_FIELD_ROW_HEIGHT", { enumerable: true, get: function () { return schema_field_info_1.SCHEMA_FIELD_ROW_HEIGHT; } });
@@ -56,6 +56,7 @@ const addKeyframeToPropStatus = ({ status, fieldKey, frame, value, schema, }) =>
56
56
  easing: [],
57
57
  clamping: { left: 'clamp', right: 'clamp' },
58
58
  posterize: undefined,
59
+ output: undefined,
59
60
  };
60
61
  }
61
62
  return status;
@@ -25,6 +25,7 @@ const applySettingsToStatus = (status, settings) => {
25
25
  ? { clamping: settings.clamping }
26
26
  : {}),
27
27
  ...(settings.type === 'settings' ? { posterize: settings.posterize } : {}),
28
+ ...(settings.type === 'settings' ? { output: settings.output } : {}),
28
29
  ...(settings.type === 'easing'
29
30
  ? {
30
31
  easing: updateEasing({
@@ -1,4 +1,4 @@
1
- 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"];
1
+ export declare const packages: readonly ["svg-3d-engine", "animation-utils", "animated-emoji", "astro-example", "babel-loader", "bugs", "brand", "bundler", "browser-studio", "canvas-capture", "claude-code-plugin", "cli", "cloudrun", "codex-plugin", "kimi-code-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"];
2
2
  export type Pkgs = (typeof packages)[number];
3
3
  export type ExtraPackage = {
4
4
  name: string;
@@ -12,9 +12,11 @@ exports.packages = [
12
12
  'bundler',
13
13
  'browser-studio',
14
14
  'canvas-capture',
15
+ 'claude-code-plugin',
15
16
  'cli',
16
17
  'cloudrun',
17
18
  'codex-plugin',
19
+ 'kimi-code-plugin',
18
20
  'compositor-darwin-arm64',
19
21
  'compositor-darwin-x64',
20
22
  'compositor-linux-arm64-gnu',
@@ -95,6 +97,7 @@ exports.packages = [
95
97
  'web-renderer',
96
98
  'design',
97
99
  'light-leaks',
100
+ 'rough-notation',
98
101
  'starburst',
99
102
  'vercel',
100
103
  'sfx',
@@ -130,7 +133,9 @@ exports.descriptions = {
130
133
  compositor: 'Rust binary for Remotion',
131
134
  player: 'React component for embedding a Remotion preview into your app',
132
135
  cloudrun: 'Render Remotion videos on Google Cloud Run',
136
+ 'claude-code-plugin': null,
133
137
  'codex-plugin': null,
138
+ 'kimi-code-plugin': null,
134
139
  renderer: 'Render Remotion videos using Node.js or Bun',
135
140
  cli: 'Control Remotion features using the `npx remotion` command',
136
141
  core: 'Make videos programmatically',
@@ -216,10 +221,11 @@ exports.descriptions = {
216
221
  'serverless-client': null,
217
222
  media: 'Experimental WebCodecs-based media tags',
218
223
  'remotion-media': null,
219
- 'web-renderer': 'Render videos in the browser (not yet released)',
224
+ 'web-renderer': 'Render videos in the browser',
220
225
  design: 'Design system',
221
226
  'light-leaks': 'Light leak effects for Remotion',
222
- 'player-a11y': 'Accessible wrapper around @remotion/player with WCAG 2.1 AA controls',
227
+ 'rough-notation': 'Rough annotation primitives for Remotion',
228
+ 'player-a11y': 'Internal accessibility wrapper around @remotion/player',
223
229
  starburst: 'Starburst ray effect for Remotion',
224
230
  vercel: 'Render Remotion videos on Vercel Sandbox',
225
231
  sfx: 'Sound effect library',
@@ -238,7 +244,9 @@ exports.installableMap = {
238
244
  'canvas-capture': false,
239
245
  cli: false,
240
246
  cloudrun: true,
247
+ 'claude-code-plugin': false,
241
248
  'codex-plugin': false,
249
+ 'kimi-code-plugin': false,
242
250
  'lambda-client': false,
243
251
  'serverless-client': false,
244
252
  'compositor-darwin-arm64': false,
@@ -283,7 +291,7 @@ exports.installableMap = {
283
291
  noise: true,
284
292
  paths: true,
285
293
  'player-example': false,
286
- 'player-a11y': true,
294
+ 'player-a11y': false,
287
295
  player: true,
288
296
  preload: true,
289
297
  renderer: true,
@@ -319,6 +327,7 @@ exports.installableMap = {
319
327
  'web-renderer': false,
320
328
  design: false,
321
329
  'light-leaks': true,
330
+ 'rough-notation': true,
322
331
  starburst: true,
323
332
  vercel: true,
324
333
  sfx: true,
@@ -327,7 +336,9 @@ exports.installableMap = {
327
336
  exports.apiDocs = {
328
337
  player: 'https://www.remotion.dev/docs/player',
329
338
  cloudrun: 'https://www.remotion.dev/docs/cloudrun',
339
+ 'claude-code-plugin': null,
330
340
  'codex-plugin': null,
341
+ 'kimi-code-plugin': null,
331
342
  renderer: 'https://www.remotion.dev/docs/renderer',
332
343
  cli: 'https://www.remotion.dev/docs/cli',
333
344
  core: 'https://www.remotion.dev/docs/remotion',
@@ -375,7 +386,7 @@ exports.apiDocs = {
375
386
  'lambda-python': null,
376
387
  'lambda-ruby': 'https://www.remotion.dev/docs/lambda/ruby',
377
388
  'player-example': null,
378
- 'player-a11y': 'https://www.remotion.dev/docs/player-a11y',
389
+ 'player-a11y': null,
379
390
  'astro-example': null,
380
391
  'lambda-go-example': null,
381
392
  'test-utils': null,
@@ -418,6 +429,7 @@ exports.apiDocs = {
418
429
  'web-renderer': 'https://www.remotion.dev/docs/web-renderer/',
419
430
  design: 'https://www.remotion.dev/design',
420
431
  'light-leaks': 'https://www.remotion.dev/docs/light-leaks',
432
+ 'rough-notation': 'https://www.remotion.dev/docs/rough-notation',
421
433
  starburst: 'https://www.remotion.dev/docs/starburst',
422
434
  vercel: 'https://www.remotion.dev/docs/vercel/api',
423
435
  sfx: 'https://www.remotion.dev/docs/sfx',
@@ -0,0 +1 @@
1
+ export declare const isValidPackageName: (packageName: string) => boolean;
@@ -0,0 +1,82 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.isValidPackageName = void 0;
4
+ const nodeBuiltinPackages = new Set([
5
+ 'assert',
6
+ 'async_hooks',
7
+ 'buffer',
8
+ 'child_process',
9
+ 'cluster',
10
+ 'console',
11
+ 'constants',
12
+ 'crypto',
13
+ 'dgram',
14
+ 'diagnostics_channel',
15
+ 'dns',
16
+ 'domain',
17
+ 'events',
18
+ 'fs',
19
+ 'http',
20
+ 'http2',
21
+ 'https',
22
+ 'inspector',
23
+ 'module',
24
+ 'net',
25
+ 'os',
26
+ 'path',
27
+ 'perf_hooks',
28
+ 'process',
29
+ 'punycode',
30
+ 'querystring',
31
+ 'readline',
32
+ 'repl',
33
+ 'sea',
34
+ 'sqlite',
35
+ 'stream',
36
+ 'string_decoder',
37
+ 'sys',
38
+ 'test',
39
+ 'timers',
40
+ 'tls',
41
+ 'trace_events',
42
+ 'tty',
43
+ 'url',
44
+ 'util',
45
+ 'v8',
46
+ 'vm',
47
+ 'wasi',
48
+ 'worker_threads',
49
+ 'zlib',
50
+ ]);
51
+ const scopedPackagePattern = /^(?:@([^/]+?)\/)?([^/]+?)$/;
52
+ const reservedPackageNames = new Set(['node_modules', 'favicon.ico']);
53
+ const isValidPackageName = (packageName) => {
54
+ var _a;
55
+ if (packageName.length === 0 ||
56
+ packageName.length > 214 ||
57
+ packageName.startsWith('.') ||
58
+ packageName.startsWith('_') ||
59
+ // npm permits leading hyphens, but package-manager CLIs interpret them as
60
+ // options instead of package names.
61
+ packageName.startsWith('-') ||
62
+ packageName.trim() !== packageName ||
63
+ packageName.toLowerCase() !== packageName ||
64
+ reservedPackageNames.has(packageName) ||
65
+ nodeBuiltinPackages.has(packageName) ||
66
+ /[~'!()*]/.test((_a = packageName.split('/').at(-1)) !== null && _a !== void 0 ? _a : '')) {
67
+ return false;
68
+ }
69
+ if (encodeURIComponent(packageName) === packageName) {
70
+ return true;
71
+ }
72
+ const match = packageName.match(scopedPackagePattern);
73
+ if (!match) {
74
+ return false;
75
+ }
76
+ const [, scope, name] = match;
77
+ return (scope !== undefined &&
78
+ name !== undefined &&
79
+ encodeURIComponent(scope) === scope &&
80
+ encodeURIComponent(name) === name);
81
+ };
82
+ exports.isValidPackageName = isValidPackageName;
@@ -47,7 +47,6 @@ export type RenderDefaults = {
47
47
  chromeMode: ChromeMode;
48
48
  publicLicenseKey: string | null;
49
49
  outputLocation: string | null;
50
- allowHtmlInCanvas: boolean;
51
50
  sampleRate: number;
52
51
  };
53
52
  declare global {
@@ -1,4 +1,5 @@
1
1
  import type { InsertableCompositionElement } from './api-requests';
2
+ export { isValidPackageName } from './package-name';
2
3
  export declare const getRequiredPackageForImportPath: (importPath: string) => string | null;
3
4
  export declare const getRequiredPackageForInsertableElement: (element: InsertableCompositionElement) => string | null;
4
5
  export declare const getRequiredPackageForEffectImportPath: (importPath: string) => string | null;
@@ -1,16 +1,22 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getRequiredPackageForEffectImportPath = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForImportPath = void 0;
3
+ exports.getRequiredPackageForEffectImportPath = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForImportPath = exports.isValidPackageName = void 0;
4
+ const package_name_1 = require("./package-name");
5
+ const package_name_2 = require("./package-name");
6
+ Object.defineProperty(exports, "isValidPackageName", { enumerable: true, get: function () { return package_name_2.isValidPackageName; } });
4
7
  const getRequiredPackageForImportPath = (importPath) => {
5
8
  if (importPath === 'remotion' || importPath.startsWith('.')) {
6
9
  return null;
7
10
  }
8
11
  if (importPath.startsWith('@')) {
9
12
  const [scope, scopedPackageName] = importPath.split('/');
10
- return scope && scopedPackageName ? `${scope}/${scopedPackageName}` : null;
13
+ const scopedPackage = scope && scopedPackageName ? `${scope}/${scopedPackageName}` : null;
14
+ return scopedPackage && (0, package_name_1.isValidPackageName)(scopedPackage)
15
+ ? scopedPackage
16
+ : null;
11
17
  }
12
18
  const [packageName] = importPath.split('/');
13
- return packageName || null;
19
+ return packageName && (0, package_name_1.isValidPackageName)(packageName) ? packageName : null;
14
20
  };
15
21
  exports.getRequiredPackageForImportPath = getRequiredPackageForImportPath;
16
22
  const getRequiredPackageForInsertableElement = (element) => {
@@ -84,9 +84,6 @@ const getSchemaFieldRowHeight = ({ fieldSchema, value, }) => {
84
84
  value,
85
85
  }) * exports.SCHEMA_FIELD_ROW_HEIGHT);
86
86
  }
87
- if (fieldSchema.type === 'text-content') {
88
- return exports.SCHEMA_FIELD_ROW_HEIGHT * 2;
89
- }
90
87
  return exports.SCHEMA_FIELD_ROW_HEIGHT;
91
88
  };
92
89
  const getEffectFieldValue = ({ key, dragOverrides, effectStatus, }) => {
@@ -4,5 +4,4 @@ export type StudioRuntimeConfig = {
4
4
  readonly interactivityEnabled: boolean;
5
5
  readonly keyboardShortcutsEnabled: boolean;
6
6
  readonly bufferStateDelayInMilliseconds: number | null;
7
- readonly experimentalClientSideRenderingEnabled: boolean;
8
7
  };
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-shared"
4
4
  },
5
5
  "name": "@remotion/studio-shared",
6
- "version": "4.0.489",
6
+ "version": "4.0.491",
7
7
  "description": "Internal package for shared objects between the Studio backend and frontend",
8
8
  "main": "dist",
9
9
  "scripts": {
@@ -20,11 +20,11 @@
20
20
  "url": "https://github.com/remotion-dev/remotion/issues"
21
21
  },
22
22
  "dependencies": {
23
- "remotion": "4.0.489"
23
+ "remotion": "4.0.491"
24
24
  },
25
25
  "devDependencies": {
26
- "@remotion/renderer": "4.0.489",
27
- "@remotion/eslint-config-internal": "4.0.489",
26
+ "@remotion/renderer": "4.0.491",
27
+ "@remotion/eslint-config-internal": "4.0.491",
28
28
  "eslint": "9.19.0",
29
29
  "@typescript/native-preview": "7.0.0-dev.20260217.1"
30
30
  },