@remotion/studio 4.0.523 → 4.0.524

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.
Files changed (98) hide show
  1. package/dist/components/ActionTooltip.d.ts +9 -0
  2. package/dist/components/ActionTooltip.js +143 -0
  3. package/dist/components/Canvas.js +3 -2
  4. package/dist/components/CheckboardToggle.js +7 -10
  5. package/dist/components/ElementInstallConfirmation.js +6 -41
  6. package/dist/components/FullscreenToggle.js +5 -8
  7. package/dist/components/GlobalKeybindings.js +57 -0
  8. package/dist/components/InspectorSequenceSection.js +5 -5
  9. package/dist/components/LazySyntaxHighlightedSource.d.ts +4 -0
  10. package/dist/components/LazySyntaxHighlightedSource.js +43 -0
  11. package/dist/components/LoopToggle.js +8 -2
  12. package/dist/components/MenuToolbar.js +6 -4
  13. package/dist/components/MuteToggle.d.ts +1 -0
  14. package/dist/components/MuteToggle.js +16 -6
  15. package/dist/components/NewComposition/NewComposition.d.ts +1 -0
  16. package/dist/components/NewComposition/NewComposition.js +5 -4
  17. package/dist/components/NewComposition/NewFolder.js +2 -4
  18. package/dist/components/NewComposition/RenameComposition.js +3 -2
  19. package/dist/components/NewComposition/RenameFolder.js +2 -4
  20. package/dist/components/NewComposition/SlugPreview.d.ts +7 -0
  21. package/dist/components/NewComposition/SlugPreview.js +18 -0
  22. package/dist/components/OutlineToggle.js +16 -10
  23. package/dist/components/PlayPause.js +7 -1
  24. package/dist/components/PlaybackKeyboardShortcutsManager.d.ts +2 -0
  25. package/dist/components/PlaybackKeyboardShortcutsManager.js +36 -1
  26. package/dist/components/PlaybackRateSelector.js +2 -2
  27. package/dist/components/PreviewToolbar.js +1 -1
  28. package/dist/components/PreviewToolbarOverflowButton.js +8 -2
  29. package/dist/components/RenderQueue/CaptionQueueItem.js +2 -1
  30. package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js +2 -1
  31. package/dist/components/RenderQueue/RenderQueueDownloadItem.js +2 -1
  32. package/dist/components/RenderQueue/RenderQueueItemCancelButton.js +2 -1
  33. package/dist/components/RenderQueue/RenderQueueOpenInFolder.js +2 -1
  34. package/dist/components/RenderQueue/RenderQueueRemoveItem.js +2 -1
  35. package/dist/components/RenderQueue/RenderQueueRepeat.js +2 -1
  36. package/dist/components/RenderQueue/VideoMattingQueueItem.js +2 -1
  37. package/dist/components/RulersAndGuidesToggle.js +7 -1
  38. package/dist/components/SettingsButton.js +8 -6
  39. package/dist/components/SettingsModal.js +1 -1
  40. package/dist/components/SidebarCollapserControls.js +13 -16
  41. package/dist/components/SizeSelector.js +2 -2
  42. package/dist/components/SnappingToggle.js +6 -8
  43. package/dist/components/StudioSettings.js +32 -18
  44. package/dist/components/SyntaxHighlightedSource.d.ts +5 -0
  45. package/dist/components/{HighlightedElementSource.js → SyntaxHighlightedSource.js} +2 -2
  46. package/dist/components/Timeline/Timeline.js +47 -39
  47. package/dist/components/Timeline/TimelineLayerChildren.js +12 -9
  48. package/dist/components/Timeline/TimelineZoomControls.js +2 -1
  49. package/dist/components/Timeline/timeline-field-display-utils.js +8 -5
  50. package/dist/components/TimelineCombobox.d.ts +1 -0
  51. package/dist/components/TimelineCombobox.js +8 -4
  52. package/dist/components/TimelineInOutToggle.js +8 -15
  53. package/dist/components/handle-drop.js +3 -2
  54. package/dist/components/keyboard-shortcuts.d.ts +4 -4
  55. package/dist/components/keyboard-shortcuts.js +23 -9
  56. package/dist/error-overlay/remotion-overlay/CodeFrame.js +29 -18
  57. package/dist/esm/LazyModels-hc33szyn.mjs +11 -0
  58. package/dist/esm/LazyModels-sg40rjw6.mjs +11 -0
  59. package/dist/esm/{HighlightedElementSource-jfc66k4p.mjs → SyntaxHighlightedSource-3xks91rz.mjs} +4 -4
  60. package/dist/esm/{TranscriptionModal-916jqhry.mjs → TranscriptionModal-3ctnxpt6.mjs} +7 -7
  61. package/dist/esm/{VideoMattingModal-2tm79s9b.mjs → VideoMattingModal-b0r7e60n.mjs} +7 -7
  62. package/dist/esm/{index-te66vvrp.mjs → index-1b9skrrd.mjs} +4 -4
  63. package/dist/esm/{index-1x7bsdh6.mjs → index-2j3d1g81.mjs} +2 -2
  64. package/dist/esm/{index-hy4xcgty.mjs → index-9qtvmwtx.mjs} +1 -1
  65. package/dist/esm/{index-6cvm9a65.mjs → index-c37kme2v.mjs} +842 -556
  66. package/dist/esm/{index-5qddp5h7.mjs → index-e3zwf3e7.mjs} +1 -1
  67. package/dist/esm/{index-x7t2y7ws.mjs → index-er3mh6em.mjs} +3584 -3090
  68. package/dist/esm/{index-jg13hf2g.mjs → index-k426ye99.mjs} +2 -1
  69. package/dist/esm/{index-sgtmgc4h.mjs → index-q2epbw93.mjs} +3 -3
  70. package/dist/esm/{index-3hgr6gjx.mjs → index-q5xv20xx.mjs} +1 -1
  71. package/dist/esm/{index-czwvnn9g.mjs → index-wbmp5srk.mjs} +1 -1
  72. package/dist/esm/{index-xhe2m2qr.mjs → index-yfrysr5f.mjs} +18 -10
  73. package/dist/esm/index.mjs +3 -3
  74. package/dist/esm/internals.mjs +8 -8
  75. package/dist/esm/previewEntry.mjs +8 -8
  76. package/dist/esm/renderEntry.mjs +3 -3
  77. package/dist/helpers/colors.d.ts +1 -0
  78. package/dist/helpers/colors.js +4 -3
  79. package/dist/helpers/inject-css.js +2 -2
  80. package/dist/helpers/prism-vsc-dark-plus.d.ts +1 -0
  81. package/dist/helpers/prism-vsc-dark-plus.js +305 -0
  82. package/dist/helpers/studio-runtime-config.d.ts +1 -1
  83. package/dist/helpers/use-create-composition.d.ts +1 -0
  84. package/dist/helpers/use-create-composition.js +12 -7
  85. package/dist/helpers/use-keybinding.d.ts +1 -1
  86. package/dist/helpers/use-keyboard-shortcut-label.d.ts +2 -2
  87. package/dist/helpers/use-menu-structure.js +1 -1
  88. package/dist/helpers/use-rename-composition.d.ts +1 -0
  89. package/dist/helpers/use-rename-composition.js +11 -5
  90. package/dist/icons/skills.js +1 -1
  91. package/dist/renderEntry.js +2 -2
  92. package/package.json +20 -20
  93. package/dist/components/HighlightedElementSource.d.ts +0 -5
  94. package/dist/esm/LazyModels-2trdm224.mjs +0 -11
  95. package/dist/esm/LazyModels-fjb5ckaq.mjs +0 -11
  96. package/dist/helpers/prism-tomorrow.d.ts +0 -1
  97. package/dist/helpers/prism-tomorrow.js +0 -151
  98. /package/dist/esm/{resolve-composition-component-location-14148845.mjs → resolve-composition-component-location-bt2d6qxq.mjs} +0 -0
@@ -4,6 +4,7 @@ exports.useCreateComposition = exports.getUniqueCompositionName = void 0;
4
4
  const react_1 = require("react");
5
5
  const InitialCompositionLoader_1 = require("../components/InitialCompositionLoader");
6
6
  const actions_1 = require("../components/RenderQueue/actions");
7
+ const slugify_name_1 = require("./slugify-name");
7
8
  const validate_new_comp_data_1 = require("./validate-new-comp-data");
8
9
  const toPascalCase = (value) => {
9
10
  var _a;
@@ -33,10 +34,13 @@ const getUniqueCompositionName = (compositions) => {
33
34
  exports.getUniqueCompositionName = getUniqueCompositionName;
34
35
  const useCreateComposition = ({ compositions, durationInFrames, folderName, newId, parentName, selectedFrameRate, size, canvasCapture, }) => {
35
36
  const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
36
- const componentName = (0, react_1.useMemo)(() => toPascalCase(newId), [newId]);
37
+ const compositionId = (0, slugify_name_1.slugifyName)(newId);
38
+ const componentName = (0, react_1.useMemo)(() => toPascalCase(compositionId), [compositionId]);
37
39
  const nameValidationMessage = (0, react_1.useMemo)(() => {
38
- return (0, validate_new_comp_data_1.validateCompositionName)(newId, compositions);
39
- }, [compositions, newId]);
40
+ return compositionId
41
+ ? (0, validate_new_comp_data_1.validateCompositionName)(compositionId, compositions)
42
+ : 'Enter an ID containing letters or numbers.';
43
+ }, [compositionId, compositions]);
40
44
  const widthValidationMessage = (0, react_1.useMemo)(() => {
41
45
  return (0, validate_new_comp_data_1.validateCompositionDimension)('Width', size.width);
42
46
  }, [size.width]);
@@ -50,7 +54,7 @@ const useCreateComposition = ({ compositions, durationInFrames, folderName, newI
50
54
  newFps: Number(selectedFrameRate),
51
55
  newHeight: Number(size.height),
52
56
  newWidth: Number(size.width),
53
- newId,
57
+ newId: compositionId,
54
58
  componentName,
55
59
  componentImportPath: `./${componentName}`,
56
60
  folderName,
@@ -68,9 +72,9 @@ const useCreateComposition = ({ compositions, durationInFrames, folderName, newI
68
72
  }, [
69
73
  canvasCapture,
70
74
  componentName,
75
+ compositionId,
71
76
  durationInFrames,
72
77
  folderName,
73
- newId,
74
78
  parentName,
75
79
  selectedFrameRate,
76
80
  size.height,
@@ -88,15 +92,16 @@ const useCreateComposition = ({ compositions, durationInFrames, folderName, newI
88
92
  });
89
93
  if (result.success) {
90
94
  selectComposition({
91
- id: newId,
95
+ id: compositionId,
92
96
  folderName,
93
97
  parentFolderName: parentName,
94
98
  }, true);
95
99
  }
96
100
  return result;
97
- }, [codemod, folderName, newId, parentName, selectComposition]);
101
+ }, [codemod, compositionId, folderName, parentName, selectComposition]);
98
102
  return {
99
103
  codemod,
104
+ compositionId,
100
105
  createComposition,
101
106
  heightValidationMessage,
102
107
  nameValidationMessage,
@@ -8,7 +8,7 @@ export declare const useKeybinding: () => {
8
8
  triggerIfInputFieldFocused: boolean;
9
9
  keepRegisteredWhenNotHighestContext: boolean;
10
10
  } & ({
11
- action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleRightSidebar" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut";
11
+ action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut";
12
12
  key?: undefined;
13
13
  commandCtrlKey?: undefined;
14
14
  } | {
@@ -1,2 +1,2 @@
1
- export declare const useKeyboardShortcutLabel: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleRightSidebar" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
2
- export declare const useKeyboardShortcutAriaKeyShortcuts: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleRightSidebar" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
1
+ export declare const useKeyboardShortcutLabel: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
2
+ export declare const useKeyboardShortcutAriaKeyShortcuts: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
@@ -329,7 +329,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
329
329
  closeMenu();
330
330
  setSelectedModal({
331
331
  type: 'settings',
332
- initialTab: browserStudioOperations === null ? 'rendering' : 'shortcuts',
332
+ initialTab: browserStudioOperations === null ? 'studio' : 'shortcuts',
333
333
  initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
334
334
  });
335
335
  },
@@ -5,6 +5,7 @@ export declare const useRenameComposition: ({ compositions, currentId, newId, }:
5
5
  newId: string;
6
6
  }) => {
7
7
  codemod: RecastCodemod;
8
+ compositionId: string;
8
9
  getValidationMessage: (value: string) => string | null;
9
10
  renameComposition: ({ newCompositionId, signal, symbolicatedStack, }: {
10
11
  newCompositionId: string;
@@ -3,29 +3,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useRenameComposition = void 0;
4
4
  const react_1 = require("react");
5
5
  const actions_1 = require("../components/RenderQueue/actions");
6
+ const slugify_name_1 = require("./slugify-name");
6
7
  const url_state_1 = require("./url-state");
7
8
  const validate_new_comp_data_1 = require("./validate-new-comp-data");
8
9
  const useRenameComposition = ({ compositions, currentId, newId, }) => {
9
10
  const getValidationMessage = (0, react_1.useCallback)((value) => {
10
- if (value === currentId) {
11
+ const slug = (0, slugify_name_1.slugifyName)(value);
12
+ if (slug === currentId) {
11
13
  return null;
12
14
  }
13
- return (0, validate_new_comp_data_1.validateCompositionName)(value, compositions);
15
+ return slug
16
+ ? (0, validate_new_comp_data_1.validateCompositionName)(slug, compositions)
17
+ : 'Enter an ID containing letters or numbers.';
14
18
  }, [compositions, currentId]);
15
19
  const getCodemod = (0, react_1.useCallback)((value) => {
16
20
  return {
17
21
  type: 'rename-composition',
18
22
  idToRename: currentId,
19
- newId: value,
23
+ newId: (0, slugify_name_1.slugifyName)(value),
20
24
  };
21
25
  }, [currentId]);
26
+ const compositionId = (0, slugify_name_1.slugifyName)(newId);
22
27
  const validationMessage = (0, react_1.useMemo)(() => {
23
28
  return getValidationMessage(newId);
24
29
  }, [getValidationMessage, newId]);
25
30
  const codemod = (0, react_1.useMemo)(() => {
26
31
  return getCodemod(newId);
27
32
  }, [getCodemod, newId]);
28
- const valid = validationMessage === null && currentId !== newId;
33
+ const valid = validationMessage === null && currentId !== compositionId;
29
34
  const renameComposition = (0, react_1.useCallback)(async ({ newCompositionId, signal, symbolicatedStack, }) => {
30
35
  const result = await (0, actions_1.applyCodemod)({
31
36
  codemod: getCodemod(newCompositionId),
@@ -34,12 +39,13 @@ const useRenameComposition = ({ compositions, currentId, newId, }) => {
34
39
  symbolicatedStack,
35
40
  });
36
41
  if (result.success) {
37
- (0, url_state_1.pushUrl)(`/${newCompositionId}`);
42
+ (0, url_state_1.pushUrl)(`/${(0, slugify_name_1.slugifyName)(newCompositionId)}`);
38
43
  }
39
44
  return result;
40
45
  }, [getCodemod]);
41
46
  return {
42
47
  codemod,
48
+ compositionId,
43
49
  getValidationMessage,
44
50
  renameComposition,
45
51
  valid,
@@ -4,7 +4,7 @@ exports.SkillsIcon = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const SkillsIcon = ({ color, ...props }) => {
6
6
  return (jsx_runtime_1.jsxs("svg", { ...props, fill: "none", viewBox: "0 0 16 16", children: [
7
- jsx_runtime_1.jsx("path", { d: "M8 0.9 14.05 4.35v7.3L8 15.1 1.95 11.65v-7.3L8 0.9Z", stroke: color, strokeLinejoin: "round", strokeWidth: "1.1" }), jsx_runtime_1.jsx("path", { d: "m1.95 4.35 6.05 3.55 6.05-3.55M8 7.9v7.2M1.95 8 8 11.55 14.05 8", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.1" })
7
+ jsx_runtime_1.jsx("path", { d: "M8 0.9 14.05 4.35v7.3L8 15.1 1.95 11.65v-7.3L8 0.9Z", stroke: color, strokeLinejoin: "round", strokeWidth: "0.85" }), jsx_runtime_1.jsx("path", { d: "m1.95 4.35 6.05 3.55 6.05-3.55M8 7.9v7.2M1.95 8 8 11.55 14.05 8", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "0.85" })
8
8
  ] }));
9
9
  };
10
10
  exports.SkillsIcon = SkillsIcon;
@@ -187,13 +187,13 @@ const renderContent = (Root) => {
187
187
  defaultPixelFormat: bundleMode.compositionDefaultPixelFormat,
188
188
  defaultProResProfile: bundleMode.compositionDefaultProResProfile,
189
189
  defaultSampleRate: bundleMode.compositionDefaultSampleRate,
190
- }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, _experimentalKeepAudioContextAlive: false, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
190
+ }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_sampleRate, _experimentalKeepAudioContextAlive: false, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
191
191
  jsx_runtime_1.jsx(Root, {}), jsx_runtime_1.jsx(GetVideoComposition, { state: bundleMode })
192
192
  ] }) }) }));
193
193
  renderToDOM(markup);
194
194
  }
195
195
  if (bundleMode.type === 'evaluation') {
196
- const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', previewSampleRate: window.remotion_previewSampleRate, _experimentalKeepAudioContextAlive: false, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
196
+ const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', previewSampleRate: window.remotion_sampleRate, _experimentalKeepAudioContextAlive: false, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
197
197
  renderToDOM(markup);
198
198
  }
199
199
  if (bundleMode.type === 'index') {
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
4
4
  },
5
5
  "name": "@remotion/studio",
6
- "version": "4.0.523",
6
+ "version": "4.0.524",
7
7
  "description": "APIs for interacting with the Remotion Studio",
8
8
  "main": "dist",
9
9
  "scripts": {
@@ -20,8 +20,8 @@
20
20
  "url": "https://github.com/remotion-dev/remotion/issues"
21
21
  },
22
22
  "peerDependencies": {
23
- "@remotion/video-matting": "4.0.523",
24
- "@remotion/whisper-webgpu": "4.0.523",
23
+ "@remotion/video-matting": "4.0.524",
24
+ "@remotion/whisper-webgpu": "4.0.524",
25
25
  "react": ">=16.8.0",
26
26
  "react-dom": ">=16.8.0"
27
27
  },
@@ -35,32 +35,32 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@jridgewell/trace-mapping": "0.3.31",
38
- "@remotion/canvas": "4.0.523",
39
- "@remotion/captions": "4.0.523",
40
- "@remotion/media": "4.0.523",
41
- "@remotion/media-utils": "4.0.523",
42
- "@remotion/player": "4.0.523",
43
- "@remotion/renderer": "4.0.523",
44
- "@remotion/studio-codemods": "4.0.523",
45
- "@remotion/studio-protocol": "4.0.523",
46
- "@remotion/studio-shared": "4.0.523",
47
- "@remotion/timeline-utils": "4.0.523",
48
- "@remotion/web-renderer": "4.0.523",
49
- "@remotion/zod-types": "4.0.523",
38
+ "@remotion/canvas": "4.0.524",
39
+ "@remotion/captions": "4.0.524",
40
+ "@remotion/media": "4.0.524",
41
+ "@remotion/media-utils": "4.0.524",
42
+ "@remotion/player": "4.0.524",
43
+ "@remotion/renderer": "4.0.524",
44
+ "@remotion/studio-codemods": "4.0.524",
45
+ "@remotion/studio-protocol": "4.0.524",
46
+ "@remotion/studio-shared": "4.0.524",
47
+ "@remotion/timeline-utils": "4.0.524",
48
+ "@remotion/web-renderer": "4.0.524",
49
+ "@remotion/zod-types": "4.0.524",
50
50
  "@tanstack/react-virtual": "3.14.9",
51
- "mediabunny": "1.55.5",
51
+ "mediabunny": "1.56.1",
52
52
  "memfs": "3.4.3",
53
53
  "open": "8.4.2",
54
54
  "prismjs": "1.30.0",
55
- "remotion": "4.0.523",
55
+ "remotion": "4.0.524",
56
56
  "semver": "7.5.3",
57
57
  "zod": "4.5.4"
58
58
  },
59
59
  "devDependencies": {
60
60
  "@happy-dom/global-registrator": "14.5.1",
61
- "@remotion/eslint-config-internal": "4.0.523",
62
- "@remotion/video-matting": "4.0.523",
63
- "@remotion/whisper-webgpu": "4.0.523",
61
+ "@remotion/eslint-config-internal": "4.0.524",
62
+ "@remotion/video-matting": "4.0.524",
63
+ "@remotion/whisper-webgpu": "4.0.524",
64
64
  "@testing-library/react": "16.1.0",
65
65
  "@types/prismjs": "1.26.4",
66
66
  "@types/semver": "7.5.3",
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- declare const HighlightedElementSource: React.FC<{
3
- readonly source: string;
4
- }>;
5
- export default HighlightedElementSource;
@@ -1,11 +0,0 @@
1
- import {
2
- Models
3
- } from "./index-5qddp5h7.mjs";
4
- import"./index-1x7bsdh6.mjs";
5
- import"./index-xhe2m2qr.mjs";
6
- import"./index-5zrb1ft4.mjs";
7
- import"./index-jg13hf2g.mjs";
8
- import"./index-rcv7qkt5.mjs";
9
- export {
10
- Models as default
11
- };
@@ -1,11 +0,0 @@
1
- import {
2
- Models
3
- } from "./index-czwvnn9g.mjs";
4
- import"./index-1x7bsdh6.mjs";
5
- import"./index-xhe2m2qr.mjs";
6
- import"./index-5zrb1ft4.mjs";
7
- import"./index-jg13hf2g.mjs";
8
- import"./index-rcv7qkt5.mjs";
9
- export {
10
- Models as default
11
- };
@@ -1 +0,0 @@
1
- export declare const prismTomorrow = "/**\n * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML\n * Based on https://github.com/chriskempson/tomorrow-theme\n * @author Rose Pritchard\n */\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tcolor: #ccc;\n\tbackground: none;\n\tfont-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n\tfont-size: 1em;\n\ttext-align: left;\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\tword-wrap: normal;\n\tline-height: 1.5;\n\n\t-moz-tab-size: 4;\n\t-o-tab-size: 4;\n\ttab-size: 4;\n\n\t-webkit-hyphens: none;\n\t-moz-hyphens: none;\n\t-ms-hyphens: none;\n\thyphens: none;\n\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n\tpadding: 1em;\n\tmargin: .5em 0;\n\toverflow: auto;\n}\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tbackground: #2d2d2d;\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n\tpadding: .1em;\n\tborder-radius: .3em;\n\twhite-space: normal;\n}\n\n.token.comment,\n.token.block-comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n\tcolor: #999;\n}\n\n.token.punctuation {\n\tcolor: #ccc;\n}\n\n.token.tag,\n.token.attr-name,\n.token.namespace,\n.token.deleted {\n\tcolor: #e2777a;\n}\n\n.token.function-name {\n\tcolor: #6196cc;\n}\n\n.token.boolean,\n.token.number,\n.token.function {\n\tcolor: #f08d49;\n}\n\n.token.property,\n.token.class-name,\n.token.constant,\n.token.symbol {\n\tcolor: #f8c555;\n}\n\n.token.selector,\n.token.important,\n.token.atrule,\n.token.keyword,\n.token.builtin {\n\tcolor: #cc99cd;\n}\n\n.token.string,\n.token.char,\n.token.attr-value,\n.token.regex,\n.token.variable {\n\tcolor: #7ec699;\n}\n\n.token.operator,\n.token.entity,\n.token.url {\n\tcolor: #67cdcc;\n}\n\n.token.important,\n.token.bold {\n\tfont-weight: bold;\n}\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.entity {\n\tcursor: help;\n}\n\n.token.inserted {\n\tcolor: green;\n}\n";
@@ -1,151 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.prismTomorrow = void 0;
4
- // Unmodified prismjs@1.30.0/themes/prism-tomorrow.css, stored as a string for
5
- // Studio’s CSS injection (including Browser Studio, which has no CSS loader).
6
- /*
7
- MIT LICENSE
8
-
9
- Copyright (c) 2012 Lea Verou
10
-
11
- Permission is hereby granted, free of charge, to any person obtaining a copy
12
- of this software and associated documentation files (the "Software"), to deal
13
- in the Software without restriction, including without limitation the rights
14
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
- copies of the Software, and to permit persons to whom the Software is
16
- furnished to do so, subject to the following conditions:
17
-
18
- The above copyright notice and this permission notice shall be included in
19
- all copies or substantial portions of the Software.
20
-
21
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
27
- THE SOFTWARE.
28
- */
29
- exports.prismTomorrow = `/**
30
- * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
31
- * Based on https://github.com/chriskempson/tomorrow-theme
32
- * @author Rose Pritchard
33
- */
34
-
35
- code[class*="language-"],
36
- pre[class*="language-"] {
37
- color: #ccc;
38
- background: none;
39
- font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
40
- font-size: 1em;
41
- text-align: left;
42
- white-space: pre;
43
- word-spacing: normal;
44
- word-break: normal;
45
- word-wrap: normal;
46
- line-height: 1.5;
47
-
48
- -moz-tab-size: 4;
49
- -o-tab-size: 4;
50
- tab-size: 4;
51
-
52
- -webkit-hyphens: none;
53
- -moz-hyphens: none;
54
- -ms-hyphens: none;
55
- hyphens: none;
56
-
57
- }
58
-
59
- /* Code blocks */
60
- pre[class*="language-"] {
61
- padding: 1em;
62
- margin: .5em 0;
63
- overflow: auto;
64
- }
65
-
66
- :not(pre) > code[class*="language-"],
67
- pre[class*="language-"] {
68
- background: #2d2d2d;
69
- }
70
-
71
- /* Inline code */
72
- :not(pre) > code[class*="language-"] {
73
- padding: .1em;
74
- border-radius: .3em;
75
- white-space: normal;
76
- }
77
-
78
- .token.comment,
79
- .token.block-comment,
80
- .token.prolog,
81
- .token.doctype,
82
- .token.cdata {
83
- color: #999;
84
- }
85
-
86
- .token.punctuation {
87
- color: #ccc;
88
- }
89
-
90
- .token.tag,
91
- .token.attr-name,
92
- .token.namespace,
93
- .token.deleted {
94
- color: #e2777a;
95
- }
96
-
97
- .token.function-name {
98
- color: #6196cc;
99
- }
100
-
101
- .token.boolean,
102
- .token.number,
103
- .token.function {
104
- color: #f08d49;
105
- }
106
-
107
- .token.property,
108
- .token.class-name,
109
- .token.constant,
110
- .token.symbol {
111
- color: #f8c555;
112
- }
113
-
114
- .token.selector,
115
- .token.important,
116
- .token.atrule,
117
- .token.keyword,
118
- .token.builtin {
119
- color: #cc99cd;
120
- }
121
-
122
- .token.string,
123
- .token.char,
124
- .token.attr-value,
125
- .token.regex,
126
- .token.variable {
127
- color: #7ec699;
128
- }
129
-
130
- .token.operator,
131
- .token.entity,
132
- .token.url {
133
- color: #67cdcc;
134
- }
135
-
136
- .token.important,
137
- .token.bold {
138
- font-weight: bold;
139
- }
140
- .token.italic {
141
- font-style: italic;
142
- }
143
-
144
- .token.entity {
145
- cursor: help;
146
- }
147
-
148
- .token.inserted {
149
- color: green;
150
- }
151
- `;