@remotion/studio 4.0.528 → 4.0.529

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 (185) hide show
  1. package/dist/Studio.js +2 -0
  2. package/dist/components/AgentPrompt.js +2 -2
  3. package/dist/components/AppLaunchButton.d.ts +0 -1
  4. package/dist/components/AppLaunchButton.js +2 -5
  5. package/dist/components/AssetAudioVolume.js +2 -2
  6. package/dist/components/AssetSelectorItem.js +5 -5
  7. package/dist/components/Button.d.ts +1 -1
  8. package/dist/components/Button.js +2 -2
  9. package/dist/components/CaptionInspector.js +1 -1
  10. package/dist/components/CaptionTextEditor.js +1 -1
  11. package/dist/components/CheckboardToggle.js +1 -1
  12. package/dist/components/CodingAgentButton.js +1 -1
  13. package/dist/components/ColorPicker/ColorPicker.d.ts +1 -1
  14. package/dist/components/ColorPicker/ColorPicker.js +2 -2
  15. package/dist/components/ColorPicker/ColorPickerPopup.js +1 -1
  16. package/dist/components/CompactExplanation.js +3 -3
  17. package/dist/components/CompositionSelectorItem.js +2 -2
  18. package/dist/components/ConfigSelect.js +1 -1
  19. package/dist/components/ConfigureDefaultEditorModal.js +2 -2
  20. package/dist/components/ControlButton.d.ts +0 -1
  21. package/dist/components/ControlButton.js +2 -2
  22. package/dist/components/CurrentAsset.js +1 -1
  23. package/dist/components/ElementLibrariesSettings.js +1 -1
  24. package/dist/components/ElementLibraryModal.js +1 -1
  25. package/dist/components/FramePersistor.js +3 -3
  26. package/dist/components/FullscreenToggle.js +1 -1
  27. package/dist/components/InitialCompositionLoader.js +3 -3
  28. package/dist/components/InlineAction.d.ts +2 -2
  29. package/dist/components/InlineAction.js +2 -3
  30. package/dist/components/InlineEditableTitle.d.ts +1 -1
  31. package/dist/components/InlineEditableTitle.js +3 -3
  32. package/dist/components/InspectorLocationCopy.js +1 -1
  33. package/dist/components/InspectorOpenInEditor.js +1 -3
  34. package/dist/components/InspectorPanel/AlignmentControls.js +3 -3
  35. package/dist/components/InspectorPanel/CompositionInspector.js +1 -5
  36. package/dist/components/InspectorPanel/CompositionMetadata.js +4 -4
  37. package/dist/components/InspectorPanel/EasingInspector.js +1 -1
  38. package/dist/components/InspectorPanel/ElementLibraryButton.js +3 -14
  39. package/dist/components/InspectorPanel/KeyframeEasingNavigator.js +6 -8
  40. package/dist/components/InspectorPanel/KeyframeInspector.js +1 -1
  41. package/dist/components/InspectorPanel/KeyframeSettings.js +16 -11
  42. package/dist/components/InspectorPanel/MultiSequenceField.js +1 -1
  43. package/dist/components/InspectorPanel/MultiSequenceInspector.js +2 -7
  44. package/dist/components/InspectorPanel/MultiSequenceNumberField.js +2 -2
  45. package/dist/components/InspectorPanel/SequenceInspectorHeader.js +1 -1
  46. package/dist/components/InspectorPanel/SequenceSelectionInspector.js +4 -13
  47. package/dist/components/InspectorPanel/SequenceWrapAction.js +6 -14
  48. package/dist/components/InspectorPanel/common.d.ts +6 -2
  49. package/dist/components/InspectorPanel/common.js +25 -9
  50. package/dist/components/InspectorSequenceSection.js +5 -5
  51. package/dist/components/InspectorSourceLocation.js +2 -2
  52. package/dist/components/KeyboardShortcutsSettings.js +1 -1
  53. package/dist/components/LicenseKeyValidation.js +2 -2
  54. package/dist/components/LoopToggle.js +1 -1
  55. package/dist/components/Menu/MenuSubItem.js +4 -2
  56. package/dist/components/MenuBuildIndicator.js +1 -1
  57. package/dist/components/MenuCompositionName.js +1 -1
  58. package/dist/components/ModelManager.js +1 -1
  59. package/dist/components/MuteToggle.js +1 -1
  60. package/dist/components/NewComposition/ComboBox.d.ts +1 -1
  61. package/dist/components/NewComposition/ComboBox.js +2 -2
  62. package/dist/components/NewComposition/DuplicateComposition.js +1 -1
  63. package/dist/components/NewComposition/InputDragger.d.ts +1 -1
  64. package/dist/components/NewComposition/InputDragger.js +1 -1
  65. package/dist/components/NewComposition/NewComposition.js +1 -1
  66. package/dist/components/OpenIssueButton.js +1 -1
  67. package/dist/components/OutlineToggle.js +1 -1
  68. package/dist/components/PlayPause.js +1 -1
  69. package/dist/components/PlaybackRateSelector.js +1 -1
  70. package/dist/components/Preview.js +2 -3
  71. package/dist/components/PreviewToolbarOverflowButton.js +1 -1
  72. package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js +1 -1
  73. package/dist/components/RenderButton.js +2 -4
  74. package/dist/components/RenderModal/InfoBubble.d.ts +1 -1
  75. package/dist/components/RenderModal/InfoBubble.js +2 -2
  76. package/dist/components/RenderModal/NumberSetting.js +1 -1
  77. package/dist/components/RenderModal/OptionExplainerBubble.js +2 -2
  78. package/dist/components/RenderModal/RenderModalAdvanced.js +2 -2
  79. package/dist/components/RenderModal/RenderModalAudio.js +2 -2
  80. package/dist/components/RenderModal/RenderModalBasic.js +3 -3
  81. package/dist/components/RenderModal/RenderModalEncoding.js +4 -4
  82. package/dist/components/RenderModal/RenderModalOutputName.js +1 -1
  83. package/dist/components/RenderModal/SchemaEditor/SchemaLabel.js +1 -1
  84. package/dist/components/RenderModal/SchemaEditor/ZodDiscriminatedUnionEditor.js +1 -1
  85. package/dist/components/RenderModal/SchemaEditor/ZodEnumEditor.js +1 -1
  86. package/dist/components/RenderModal/SchemaEditor/ZodFieldValidation.js +1 -1
  87. package/dist/components/RenderModal/SchemaEditor/ZodStaticFileEditor.js +1 -1
  88. package/dist/components/RenderModal/WebRenderModalAdvanced.js +2 -2
  89. package/dist/components/RenderModal/WebRenderModalAudio.js +2 -2
  90. package/dist/components/RenderModal/WebRenderModalBasic.js +3 -3
  91. package/dist/components/RenderModal/WebRenderModalPicture.js +1 -1
  92. package/dist/components/RenderQueue/CaptionQueueItem.js +1 -1
  93. package/dist/components/RenderQueue/QueueJobError.js +1 -1
  94. package/dist/components/RenderQueue/RenderQueueError.js +1 -1
  95. package/dist/components/RenderQueue/RenderQueueOutputName.js +1 -1
  96. package/dist/components/RenderQueue/RenderQueueProgressMessage.js +1 -1
  97. package/dist/components/RenderQueue/VideoMattingQueueItem.js +1 -1
  98. package/dist/components/RenderingSettings.js +6 -6
  99. package/dist/components/RulersAndGuidesToggle.js +1 -1
  100. package/dist/components/SegmentedButton.d.ts +0 -2
  101. package/dist/components/SegmentedButton.js +6 -6
  102. package/dist/components/SelectedOutlineOverlay.js +15 -2
  103. package/dist/components/SelectedOutlinePathPoints.js +45 -21
  104. package/dist/components/SelectedOutlineRenderer.js +1 -1
  105. package/dist/components/SettingsButton.js +1 -1
  106. package/dist/components/SettingsModalFooter.js +1 -1
  107. package/dist/components/SizeSelector.js +1 -1
  108. package/dist/components/SkillsSettings.js +2 -2
  109. package/dist/components/SnappingToggle.js +1 -1
  110. package/dist/components/StudioSettings.js +2 -2
  111. package/dist/components/TimeValue.js +1 -3
  112. package/dist/components/Timeline/EasingEditorModal.js +3 -3
  113. package/dist/components/Timeline/TimelineArrayField.js +2 -2
  114. package/dist/components/Timeline/TimelineAssetField.js +3 -3
  115. package/dist/components/Timeline/TimelineColorField.js +2 -2
  116. package/dist/components/Timeline/TimelineDragHandler.js +3 -3
  117. package/dist/components/Timeline/TimelineDuplicateCount.js +1 -1
  118. package/dist/components/Timeline/TimelineEffectItem.js +1 -1
  119. package/dist/components/Timeline/TimelineEnumField.js +1 -1
  120. package/dist/components/Timeline/TimelineFieldLabel.js +1 -1
  121. package/dist/components/Timeline/TimelineFontFamilyField.js +2 -2
  122. package/dist/components/Timeline/TimelineFontWeightField.js +1 -1
  123. package/dist/components/Timeline/TimelineKeyframeControls.js +4 -4
  124. package/dist/components/Timeline/TimelineKeyframeDiamond.js +1 -1
  125. package/dist/components/Timeline/TimelineKeyframeEasingLine.js +1 -1
  126. package/dist/components/Timeline/TimelineLayerChildren.js +1 -1
  127. package/dist/components/Timeline/TimelineList.js +15 -7
  128. package/dist/components/Timeline/TimelineMediaInfo.js +1 -1
  129. package/dist/components/Timeline/TimelineScaleField.js +1 -1
  130. package/dist/components/Timeline/TimelineSchemaField.js +2 -2
  131. package/dist/components/Timeline/TimelineSequence.js +1 -1
  132. package/dist/components/Timeline/TimelineSequenceItem.js +34 -16
  133. package/dist/components/Timeline/TimelineSequenceName.d.ts +1 -0
  134. package/dist/components/Timeline/TimelineSequenceName.js +38 -6
  135. package/dist/components/Timeline/TimelineSequencePropItem.js +6 -4
  136. package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js +2 -2
  137. package/dist/components/Timeline/TimelineZoomControls.js +2 -2
  138. package/dist/components/Timeline/get-sequence-split-menu-item.js +2 -2
  139. package/dist/components/Timeline/use-timeline-expanded-tree.d.ts +1 -1
  140. package/dist/components/Timeline/use-timeline-expanded-tree.js +3 -0
  141. package/dist/components/TimelineCombobox.d.ts +1 -1
  142. package/dist/components/TimelineCombobox.js +5 -6
  143. package/dist/components/TimelineInOutToggle.js +1 -1
  144. package/dist/components/Transcription/TranscriptionModal.js +6 -6
  145. package/dist/components/UndoRedoButtons.js +1 -1
  146. package/dist/components/UpdatesSettings.js +2 -2
  147. package/dist/components/VideoMatting/VideoMattingModal.js +4 -4
  148. package/dist/components/selected-outline-types.d.ts +2 -0
  149. package/dist/error-overlay/remotion-overlay/CompositionIdListItem.js +1 -1
  150. package/dist/error-overlay/remotion-overlay/OpenInEditor.js +1 -1
  151. package/dist/error-overlay/remotion-overlay/StackFrame.js +1 -1
  152. package/dist/esm/{CaptionQueueProcessor-nr7hjcga.mjs → CaptionQueueProcessor-qj37c6r2.mjs} +2 -2
  153. package/dist/esm/{LazyModels-ajkn7fs3.mjs → LazyModels-rjsrgap5.mjs} +4 -4
  154. package/dist/esm/{LazyModels-g1g7cf4e.mjs → LazyModels-rnbjx98t.mjs} +4 -4
  155. package/dist/esm/{TranscriptionModal-e18bzbkb.mjs → TranscriptionModal-y7zeqj2d.mjs} +15 -15
  156. package/dist/esm/{VideoMattingModal-5bz2s4rs.mjs → VideoMattingModal-jzrkhah1.mjs} +13 -13
  157. package/dist/esm/{index-s6qya2gg.mjs → index-19d05w9e.mjs} +1 -1
  158. package/dist/esm/{index-t7tbt980.mjs → index-24wge6y5.mjs} +2 -3
  159. package/dist/esm/{index-wqc43mw0.mjs → index-3qb54r5j.mjs} +4 -5
  160. package/dist/esm/{index-c2wabcdt.mjs → index-cakcjjy2.mjs} +6 -6
  161. package/dist/esm/{index-9q9w8v9p.mjs → index-f9hxt5yh.mjs} +1 -1
  162. package/dist/esm/{index-8nt6a0mw.mjs → index-jc22b2wb.mjs} +1 -1
  163. package/dist/esm/{index-890dd9b3.mjs → index-m01zjph7.mjs} +3 -5
  164. package/dist/esm/{index-x6r9bn12.mjs → index-m2a95v3p.mjs} +925 -237
  165. package/dist/esm/{index-xac20sv4.mjs → index-r9bj4tta.mjs} +7 -7
  166. package/dist/esm/{index-t7xnxdf8.mjs → index-vnc2wdfd.mjs} +4 -5
  167. package/dist/esm/{index-dh3zk2hv.mjs → index-vtr5qzam.mjs} +1 -1
  168. package/dist/esm/{index-dpyss74p.mjs → index-x7kg7jqv.mjs} +814 -723
  169. package/dist/esm/index.mjs +2 -2
  170. package/dist/esm/internals.mjs +9 -9
  171. package/dist/esm/previewEntry.mjs +9 -9
  172. package/dist/esm/renderEntry.mjs +2 -2
  173. package/dist/helpers/checkerboard-background.d.ts +2 -2
  174. package/dist/helpers/checkerboard-background.js +1 -1
  175. package/dist/helpers/colors.d.ts +1 -2
  176. package/dist/helpers/colors.js +7 -8
  177. package/dist/helpers/studio-css-variables.d.ts +1 -1
  178. package/dist/helpers/studio-css-variables.js +2 -3
  179. package/dist/icons/snowflake.js +1 -3
  180. package/dist/icons/{scissors.d.ts → split.d.ts} +1 -1
  181. package/dist/icons/split.js +8 -0
  182. package/dist/icons/trash.js +2 -2
  183. package/dist/icons/wrap.js +1 -1
  184. package/package.json +20 -20
  185. package/dist/icons/scissors.js +0 -8
package/dist/esm/index.mjs CHANGED
@@ -21,13 +21,13 @@ import {
21
21
  visualControlRef,
22
22
  visualControlStore,
23
23
  watchPublicFolder
24
- } from "./index-s6qya2gg.mjs";
24
+ } from "./index-19d05w9e.mjs";
25
25
  import {
26
26
  getBrowserStudioOperations,
27
27
  writeStaticFile
28
28
  } from "./index-dfy1t576.mjs";
29
29
  import"./index-5zrb1ft4.mjs";
30
- import"./index-wqc43mw0.mjs";
30
+ import"./index-3qb54r5j.mjs";
31
31
  import {
32
32
  __require,
33
33
  __toESM
package/dist/esm/internals.mjs CHANGED
@@ -1,19 +1,19 @@
1
1
  import {
2
2
  Studio
3
- } from "./index-dpyss74p.mjs";
4
- import"./index-xac20sv4.mjs";
5
- import"./index-c2wabcdt.mjs";
6
- import"./index-x6r9bn12.mjs";
7
- import"./index-dh3zk2hv.mjs";
3
+ } from "./index-x7kg7jqv.mjs";
4
+ import"./index-r9bj4tta.mjs";
5
+ import"./index-cakcjjy2.mjs";
6
+ import"./index-m2a95v3p.mjs";
7
+ import"./index-vtr5qzam.mjs";
8
8
  import"./index-hqxc6tzp.mjs";
9
9
  import"./index-5ycb9e9q.mjs";
10
- import"./index-s6qya2gg.mjs";
10
+ import"./index-19d05w9e.mjs";
11
11
  import"./index-dfy1t576.mjs";
12
- import"./index-t7tbt980.mjs";
13
- import"./index-890dd9b3.mjs";
12
+ import"./index-24wge6y5.mjs";
13
+ import"./index-m01zjph7.mjs";
14
14
  import"./index-qve7mdfp.mjs";
15
15
  import"./index-5zrb1ft4.mjs";
16
- import"./index-wqc43mw0.mjs";
16
+ import"./index-3qb54r5j.mjs";
17
17
  import"./index-rcv7qkt5.mjs";
18
18
 
19
19
  // src/internals.ts
package/dist/esm/previewEntry.mjs CHANGED
@@ -5,28 +5,28 @@ import {
5
5
  markErrorMessageAsLoggedByServer,
6
6
  setErrorsRef,
7
7
  startReportingRuntimeErrors
8
- } from "./index-dpyss74p.mjs";
9
- import"./index-xac20sv4.mjs";
10
- import"./index-c2wabcdt.mjs";
8
+ } from "./index-x7kg7jqv.mjs";
9
+ import"./index-r9bj4tta.mjs";
10
+ import"./index-cakcjjy2.mjs";
11
11
  import {
12
12
  reloadUrl,
13
13
  subscribeToPreviewServerEvents
14
- } from "./index-x6r9bn12.mjs";
15
- import"./index-dh3zk2hv.mjs";
14
+ } from "./index-m2a95v3p.mjs";
15
+ import"./index-vtr5qzam.mjs";
16
16
  import"./index-hqxc6tzp.mjs";
17
17
  import"./index-5ycb9e9q.mjs";
18
- import"./index-s6qya2gg.mjs";
18
+ import"./index-19d05w9e.mjs";
19
19
  import"./index-dfy1t576.mjs";
20
20
  import {
21
21
  studioCssVariables
22
- } from "./index-t7tbt980.mjs";
23
- import"./index-890dd9b3.mjs";
22
+ } from "./index-24wge6y5.mjs";
23
+ import"./index-m01zjph7.mjs";
24
24
  import"./index-qve7mdfp.mjs";
25
25
  import"./index-5zrb1ft4.mjs";
26
26
  import {
27
27
  BACKGROUND_HEX,
28
28
  WHITE
29
- } from "./index-wqc43mw0.mjs";
29
+ } from "./index-3qb54r5j.mjs";
30
30
  import"./index-rcv7qkt5.mjs";
31
31
 
32
32
  // src/previewEntry.tsx
package/dist/esm/renderEntry.mjs CHANGED
@@ -1,11 +1,11 @@
1
1
  import {
2
2
  studioCssVariables
3
- } from "./index-t7tbt980.mjs";
3
+ } from "./index-24wge6y5.mjs";
4
4
  import {
5
5
  BACKGROUND_HEX,
6
6
  TRANSPARENT,
7
7
  WHITE
8
- } from "./index-wqc43mw0.mjs";
8
+ } from "./index-3qb54r5j.mjs";
9
9
  import {
10
10
  __require,
11
11
  __toESM
package/dist/helpers/checkerboard-background.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export declare const getCheckerboardBackgroundSize: (size: number) => string;
2
2
  export declare const getCheckerboardBackgroundPos: (size: number) => string;
3
- export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "var(--remotion-studio-black)" | "var(--remotion-studio-white)";
4
- export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n linear-gradient(\n 45deg,\n var(--remotion-studio-black-alpha-10) 25%,\n var(--remotion-studio-transparent) 25%\n ),\n linear-gradient(135deg, var(--remotion-studio-black-alpha-10) 25%, var(--remotion-studio-transparent) 25%),\n linear-gradient(45deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-black-alpha-10) 75%),\n linear-gradient(135deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-black-alpha-10) 75%)\n " | undefined;
3
+ export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "var(--remotion-studio-background)" | "var(--remotion-studio-black)";
4
+ export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n linear-gradient(\n 45deg,\n var(--remotion-studio-white-alpha-15) 25%,\n var(--remotion-studio-transparent) 25%\n ),\n linear-gradient(135deg, var(--remotion-studio-white-alpha-15) 25%, var(--remotion-studio-transparent) 25%),\n linear-gradient(45deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-white-alpha-15) 75%),\n linear-gradient(135deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-white-alpha-15) 75%)\n " | undefined;
package/dist/helpers/checkerboard-background.js CHANGED
@@ -8,7 +8,7 @@ const getCheckerboardBackgroundPos = (size) => `0 0, ${size / 2}px 0, ${size / 2
8
8
  exports.getCheckerboardBackgroundPos = getCheckerboardBackgroundPos;
9
9
  const checkerboardBackgroundColor = (checkerboard) => {
10
10
  if (checkerboard) {
11
- return colors_1.WHITE;
11
+ return colors_1.BACKGROUND;
12
12
  }
13
13
  return colors_1.BLACK;
14
14
  };
package/dist/helpers/colors.d.ts CHANGED
@@ -34,7 +34,6 @@ export declare const WHITE_ALPHA_70 = "var(--remotion-studio-white-alpha-70)";
34
34
  export declare const WHITE_ALPHA_72 = "var(--remotion-studio-white-alpha-72)";
35
35
  export declare const WHITE_ALPHA_80 = "var(--remotion-studio-white-alpha-80)";
36
36
  export declare const WHITE_ALPHA_90 = "var(--remotion-studio-white-alpha-90)";
37
- export declare const BLACK_ALPHA_10 = "var(--remotion-studio-black-alpha-10)";
38
37
  export declare const BLACK_ALPHA_28 = "var(--remotion-studio-black-alpha-28)";
39
38
  export declare const BLACK_ALPHA_30 = "var(--remotion-studio-black-alpha-30)";
40
39
  export declare const BLACK_ALPHA_40 = "var(--remotion-studio-black-alpha-40)";
@@ -119,7 +118,7 @@ export declare const COLOR_PICKER_POPUP_SHADOW = "0 4px 16px var(--remotion-stud
119
118
  export declare const COLOR_PICKER_HANDLE_SHADOW = "0 0 0 1px var(--remotion-studio-black-alpha-60)";
120
119
  export declare const NOTIFICATION_BORDER = "0.25px solid var(--remotion-studio-white-alpha-10)";
121
120
  export declare const FOCUS_BOX_SHADOW: string;
122
- export declare const CHECKERBOARD_BACKGROUND_IMAGE = "\n linear-gradient(\n 45deg,\n var(--remotion-studio-black-alpha-10) 25%,\n var(--remotion-studio-transparent) 25%\n ),\n linear-gradient(135deg, var(--remotion-studio-black-alpha-10) 25%, var(--remotion-studio-transparent) 25%),\n linear-gradient(45deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-black-alpha-10) 75%),\n linear-gradient(135deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-black-alpha-10) 75%)\n ";
121
+ export declare const CHECKERBOARD_BACKGROUND_IMAGE = "\n linear-gradient(\n 45deg,\n var(--remotion-studio-white-alpha-15) 25%,\n var(--remotion-studio-transparent) 25%\n ),\n linear-gradient(135deg, var(--remotion-studio-white-alpha-15) 25%, var(--remotion-studio-transparent) 25%),\n linear-gradient(45deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-white-alpha-15) 75%),\n linear-gradient(135deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-white-alpha-15) 75%)\n ";
123
122
  export declare const COLOR_PICKER_CHECKER_BACKGROUND_IMAGE: string;
124
123
  export declare const COLOR_PICKER_CHECKER_BACKGROUND_COLOR = "var(--remotion-studio-color-picker-checker-background-color)";
125
124
  export declare const COLOR_PICKER_SATURATION_VALUE_GRADIENT = "linear-gradient(to right, var(--remotion-studio-white), var(--remotion-studio-transparent))";
package/dist/helpers/colors.js CHANGED
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.BLUE_HOVERED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.BLACK_OPAQUE = exports.BLACK_ALPHA_90 = exports.BLACK_ALPHA_85 = exports.BLACK_ALPHA_80 = exports.BLACK_ALPHA_60 = exports.BLACK_ALPHA_50 = exports.BLACK_ALPHA_40 = exports.BLACK_ALPHA_30 = exports.BLACK_ALPHA_28 = exports.BLACK_ALPHA_10 = exports.WHITE_ALPHA_90 = exports.WHITE_ALPHA_80 = exports.WHITE_ALPHA_72 = exports.WHITE_ALPHA_70 = exports.WHITE_ALPHA_60 = exports.WHITE_ALPHA_50 = exports.WHITE_ALPHA_45 = exports.WHITE_ALPHA_40 = exports.WHITE_ALPHA_35 = exports.WHITE_ALPHA_30 = exports.WHITE_ALPHA_25 = exports.WHITE_ALPHA_20 = exports.WHITE_ALPHA_15 = exports.WHITE_ALPHA_12 = exports.WHITE_ALPHA_10 = exports.WHITE_ALPHA_08 = exports.WHITE_ALPHA_06 = exports.WHITE_ALPHA_05 = exports.RULER_COLOR = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND__TRANSPARENT = exports.BACKGROUND_HEX = exports.BACKGROUND = exports.BLACK_FULL_HEX = exports.BLACK_HEX = exports.WHITE_FULL_HEX = exports.WHITE_HEX = exports.CURRENT_COLOR_LOWERCASE = exports.CURRENT_COLOR = exports.TRANSPARENT = exports.RED = exports.WHITE = exports.BLACK = void 0;
4
- exports.PRISM_LINE_HIGHLIGHT_BORDER_COLOR = exports.PRISM_LINE_HIGHLIGHT_BACKGROUND = exports.PRISM_SELECTOR_COLOR = exports.PRISM_CLASS_NAME_COLOR = exports.PRISM_REGEX_COLOR = exports.PRISM_FUNCTION_COLOR = exports.PRISM_CONTROL_FLOW_COLOR = exports.PRISM_STRING_COLOR = exports.PRISM_NUMBER_COLOR = exports.PRISM_COMMENT_COLOR = exports.PRISM_VARIABLE_COLOR = exports.PRISM_KEYWORD_COLOR = exports.PRISM_INLINE_COLOR = exports.PRISM_BACKGROUND = exports.PRISM_SELECTION_BACKGROUND = exports.PRISM_TEXT_COLOR = exports.SELECTED_OUTLINE_SNAP_COLOR = exports.FONT_FAMILY_ERROR_COLOR = exports.BLACK_ALPHA_22 = exports.INFO_BLUE_BORDER_COLOR = exports.COLOR_PICKER_CHECKER_COLOR = exports.FOCUS_COLOR = exports.INFO_BLUE_BACKGROUND = exports.EASING_SELECTED_BACKGROUND = exports.TIMELINE_MARQUEE_BLUE_ALPHA_75 = exports.TIMELINE_MARQUEE_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_75 = exports.TIMELINE_DROP_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_12 = exports.TIMELINE_PLAYHEAD_COLOR = exports.TIMELINE_BLUE = exports.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = exports.TIMELINE_SELECTED_BACKGROUND_COLOR = exports.TIMELINE_NEGATIVE_START_BORDER_COLOR = exports.TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = exports.TIMELINE_BACKGROUND_COLOR = exports.SERVER_DISCONNECTED_BACKGROUND = exports.INFO_BLUE = exports.ERROR_LINK_COLOR = exports.ERROR_CODE_FRAME_LINE_BACKGROUND = exports.ERROR_CODE_FRAME_BACKGROUND = exports.RENDER_STATUS_BACKGROUND = exports.NOTIFICATION_BACKGROUND = exports.KEYBOARD_SHORTCUT_KEY_COLOR = exports.LIGHT_GRAY = exports.TIMELINE_TRACK_SEPARATOR = exports.LINE_COLOR = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = exports.BLUE_DISABLED = void 0;
5
- exports.getBackgroundFromHoverState = exports.TIMELINE_VIDEO_GRADIENT = exports.TIMELINE_AUDIO_GRADIENT = exports.LOOPED_INDICATOR_DROP_SHADOW = exports.SELECTED_OUTLINE_UV_DROP_SHADOW = exports.SELECTED_OUTLINE_DROP_SHADOW = exports.ERROR_MESSAGE_MASK_IMAGE = exports.COLOR_PICKER_HUE_GRADIENT = exports.COLOR_PICKER_ALPHA_TRANSPARENT = exports.COLOR_PICKER_SATURATION_BLACK_GRADIENT = exports.COLOR_PICKER_SATURATION_VALUE_GRADIENT = exports.COLOR_PICKER_CHECKER_BACKGROUND_COLOR = exports.COLOR_PICKER_CHECKER_BACKGROUND_IMAGE = exports.CHECKERBOARD_BACKGROUND_IMAGE = exports.FOCUS_BOX_SHADOW = exports.NOTIFICATION_BORDER = exports.COLOR_PICKER_HANDLE_SHADOW = exports.COLOR_PICKER_POPUP_SHADOW = exports.SERVER_DISCONNECTED_SHADOW = exports.NOTIFICATION_SHADOW = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = exports.SHADOW_BLACK = exports.BORDER_TIMELINE_MARQUEE_BLUE = exports.BORDER_TIMELINE_DROP_BLUE = exports.BORDER_INFO_BLUE = exports.BORDER_WHITE_ALPHA_20 = exports.BORDER_WHITE_ALPHA_12 = exports.BORDER_BLACK_ALPHA_60 = exports.BORDER_BLACK_ALPHA_50 = exports.BORDER_TRANSPARENT_2PX = exports.BORDER_CURRENT_COLOR = exports.BORDER_WHITE_2PX = exports.BORDER_WHITE = exports.BORDER_BLACK = void 0;
3
+ exports.BLUE_DISABLED = exports.BLUE_HOVERED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.BLACK_OPAQUE = exports.BLACK_ALPHA_90 = exports.BLACK_ALPHA_85 = exports.BLACK_ALPHA_80 = exports.BLACK_ALPHA_60 = exports.BLACK_ALPHA_50 = exports.BLACK_ALPHA_40 = exports.BLACK_ALPHA_30 = exports.BLACK_ALPHA_28 = exports.WHITE_ALPHA_90 = exports.WHITE_ALPHA_80 = exports.WHITE_ALPHA_72 = exports.WHITE_ALPHA_70 = exports.WHITE_ALPHA_60 = exports.WHITE_ALPHA_50 = exports.WHITE_ALPHA_45 = exports.WHITE_ALPHA_40 = exports.WHITE_ALPHA_35 = exports.WHITE_ALPHA_30 = exports.WHITE_ALPHA_25 = exports.WHITE_ALPHA_20 = exports.WHITE_ALPHA_15 = exports.WHITE_ALPHA_12 = exports.WHITE_ALPHA_10 = exports.WHITE_ALPHA_08 = exports.WHITE_ALPHA_06 = exports.WHITE_ALPHA_05 = exports.RULER_COLOR = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND__TRANSPARENT = exports.BACKGROUND_HEX = exports.BACKGROUND = exports.BLACK_FULL_HEX = exports.BLACK_HEX = exports.WHITE_FULL_HEX = exports.WHITE_HEX = exports.CURRENT_COLOR_LOWERCASE = exports.CURRENT_COLOR = exports.TRANSPARENT = exports.RED = exports.WHITE = exports.BLACK = void 0;
4
+ exports.BORDER_BLACK = exports.PRISM_LINE_HIGHLIGHT_BORDER_COLOR = exports.PRISM_LINE_HIGHLIGHT_BACKGROUND = exports.PRISM_SELECTOR_COLOR = exports.PRISM_CLASS_NAME_COLOR = exports.PRISM_REGEX_COLOR = exports.PRISM_FUNCTION_COLOR = exports.PRISM_CONTROL_FLOW_COLOR = exports.PRISM_STRING_COLOR = exports.PRISM_NUMBER_COLOR = exports.PRISM_COMMENT_COLOR = exports.PRISM_VARIABLE_COLOR = exports.PRISM_KEYWORD_COLOR = exports.PRISM_INLINE_COLOR = exports.PRISM_BACKGROUND = exports.PRISM_SELECTION_BACKGROUND = exports.PRISM_TEXT_COLOR = exports.SELECTED_OUTLINE_SNAP_COLOR = exports.FONT_FAMILY_ERROR_COLOR = exports.BLACK_ALPHA_22 = exports.INFO_BLUE_BORDER_COLOR = exports.COLOR_PICKER_CHECKER_COLOR = exports.FOCUS_COLOR = exports.INFO_BLUE_BACKGROUND = exports.EASING_SELECTED_BACKGROUND = exports.TIMELINE_MARQUEE_BLUE_ALPHA_75 = exports.TIMELINE_MARQUEE_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_75 = exports.TIMELINE_DROP_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_12 = exports.TIMELINE_PLAYHEAD_COLOR = exports.TIMELINE_BLUE = exports.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = exports.TIMELINE_SELECTED_BACKGROUND_COLOR = exports.TIMELINE_NEGATIVE_START_BORDER_COLOR = exports.TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = exports.TIMELINE_BACKGROUND_COLOR = exports.SERVER_DISCONNECTED_BACKGROUND = exports.INFO_BLUE = exports.ERROR_LINK_COLOR = exports.ERROR_CODE_FRAME_LINE_BACKGROUND = exports.ERROR_CODE_FRAME_BACKGROUND = exports.RENDER_STATUS_BACKGROUND = exports.NOTIFICATION_BACKGROUND = exports.KEYBOARD_SHORTCUT_KEY_COLOR = exports.LIGHT_GRAY = exports.TIMELINE_TRACK_SEPARATOR = exports.LINE_COLOR = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = void 0;
5
+ exports.getBackgroundFromHoverState = exports.TIMELINE_VIDEO_GRADIENT = exports.TIMELINE_AUDIO_GRADIENT = exports.LOOPED_INDICATOR_DROP_SHADOW = exports.SELECTED_OUTLINE_UV_DROP_SHADOW = exports.SELECTED_OUTLINE_DROP_SHADOW = exports.ERROR_MESSAGE_MASK_IMAGE = exports.COLOR_PICKER_HUE_GRADIENT = exports.COLOR_PICKER_ALPHA_TRANSPARENT = exports.COLOR_PICKER_SATURATION_BLACK_GRADIENT = exports.COLOR_PICKER_SATURATION_VALUE_GRADIENT = exports.COLOR_PICKER_CHECKER_BACKGROUND_COLOR = exports.COLOR_PICKER_CHECKER_BACKGROUND_IMAGE = exports.CHECKERBOARD_BACKGROUND_IMAGE = exports.FOCUS_BOX_SHADOW = exports.NOTIFICATION_BORDER = exports.COLOR_PICKER_HANDLE_SHADOW = exports.COLOR_PICKER_POPUP_SHADOW = exports.SERVER_DISCONNECTED_SHADOW = exports.NOTIFICATION_SHADOW = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = exports.SHADOW_BLACK = exports.BORDER_TIMELINE_MARQUEE_BLUE = exports.BORDER_TIMELINE_DROP_BLUE = exports.BORDER_INFO_BLUE = exports.BORDER_WHITE_ALPHA_20 = exports.BORDER_WHITE_ALPHA_12 = exports.BORDER_BLACK_ALPHA_60 = exports.BORDER_BLACK_ALPHA_50 = exports.BORDER_TRANSPARENT_2PX = exports.BORDER_CURRENT_COLOR = exports.BORDER_WHITE_2PX = exports.BORDER_WHITE = void 0;
6
6
  // The palette lives in studio-css-variables.ts. Equivalent legacy names share
7
7
  // one variable so changing a color updates every Studio consumer.
8
8
  exports.BLACK = 'var(--remotion-studio-black)';
@@ -41,7 +41,6 @@ exports.WHITE_ALPHA_70 = 'var(--remotion-studio-white-alpha-70)';
41
41
  exports.WHITE_ALPHA_72 = 'var(--remotion-studio-white-alpha-72)';
42
42
  exports.WHITE_ALPHA_80 = 'var(--remotion-studio-white-alpha-80)';
43
43
  exports.WHITE_ALPHA_90 = 'var(--remotion-studio-white-alpha-90)';
44
- exports.BLACK_ALPHA_10 = 'var(--remotion-studio-black-alpha-10)';
45
44
  exports.BLACK_ALPHA_28 = 'var(--remotion-studio-black-alpha-28)';
46
45
  exports.BLACK_ALPHA_30 = 'var(--remotion-studio-black-alpha-30)';
47
46
  exports.BLACK_ALPHA_40 = 'var(--remotion-studio-black-alpha-40)';
@@ -133,12 +132,12 @@ exports.FOCUS_BOX_SHADOW = `inset 1px 1px ${exports.FOCUS_COLOR}, inset -1px -1p
133
132
  exports.CHECKERBOARD_BACKGROUND_IMAGE = `
134
133
  linear-gradient(
135
134
  45deg,
136
- ${exports.BLACK_ALPHA_10} 25%,
135
+ ${exports.WHITE_ALPHA_15} 25%,
137
136
  ${exports.TRANSPARENT} 25%
138
137
  ),
139
- linear-gradient(135deg, ${exports.BLACK_ALPHA_10} 25%, ${exports.TRANSPARENT} 25%),
140
- linear-gradient(45deg, ${exports.TRANSPARENT} 75%, ${exports.BLACK_ALPHA_10} 75%),
141
- linear-gradient(135deg, ${exports.TRANSPARENT} 75%, ${exports.BLACK_ALPHA_10} 75%)
138
+ linear-gradient(135deg, ${exports.WHITE_ALPHA_15} 25%, ${exports.TRANSPARENT} 25%),
139
+ linear-gradient(45deg, ${exports.TRANSPARENT} 75%, ${exports.WHITE_ALPHA_15} 75%),
140
+ linear-gradient(135deg, ${exports.TRANSPARENT} 75%, ${exports.WHITE_ALPHA_15} 75%)
142
141
  `;
143
142
  exports.COLOR_PICKER_CHECKER_BACKGROUND_IMAGE = `linear-gradient(45deg, ${exports.COLOR_PICKER_CHECKER_COLOR} 25%, ${exports.TRANSPARENT} 25%), ` +
144
143
  `linear-gradient(-45deg, ${exports.COLOR_PICKER_CHECKER_COLOR} 25%, ${exports.TRANSPARENT} 25%), ` +
package/dist/helpers/studio-css-variables.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const studioCssVariables = "\n:where(:root) {\n --remotion-studio-black: black;\n --remotion-studio-white: white;\n --remotion-studio-red: red;\n --remotion-studio-transparent: transparent;\n --remotion-studio-current-color: currentColor;\n --remotion-studio-background: rgb(31,36,40);\n --remotion-studio-background-transparent: rgba(31,36,40, 0);\n --remotion-studio-input-background: #2f363d;\n --remotion-studio-light-color: #ddd;\n --remotion-studio-light-text: #A6A7A9;\n --remotion-studio-ruler-color: #808080;\n --remotion-studio-white-alpha-05: rgba(255, 255, 255, 0.05);\n --remotion-studio-white-alpha-06: rgba(255, 255, 255, 0.06);\n --remotion-studio-white-alpha-08: rgba(255, 255, 255, 0.08);\n --remotion-studio-white-alpha-10: rgba(255, 255, 255, 0.1);\n --remotion-studio-white-alpha-12: rgba(255, 255, 255, 0.12);\n --remotion-studio-white-alpha-15: rgba(255, 255, 255, 0.15);\n --remotion-studio-white-alpha-20: rgba(255, 255, 255, 0.2);\n --remotion-studio-white-alpha-25: rgba(255, 255, 255, 0.25);\n --remotion-studio-white-alpha-30: rgba(255, 255, 255, 0.3);\n --remotion-studio-white-alpha-35: rgba(255, 255, 255, 0.35);\n --remotion-studio-white-alpha-40: rgba(255, 255, 255, 0.4);\n --remotion-studio-white-alpha-45: rgba(255, 255, 255, 0.45);\n --remotion-studio-white-alpha-50: rgba(255, 255, 255, 0.5);\n --remotion-studio-white-alpha-60: rgba(255, 255, 255, 0.6);\n --remotion-studio-white-alpha-70: rgba(255, 255, 255, 0.7);\n --remotion-studio-white-alpha-72: rgba(255, 255, 255, 0.72);\n --remotion-studio-white-alpha-80: rgba(255, 255, 255, 0.8);\n --remotion-studio-white-alpha-90: rgba(255, 255, 255, 0.9);\n --remotion-studio-black-alpha-10: rgba(0, 0, 0, 0.1);\n --remotion-studio-black-alpha-28: rgba(0, 0, 0, 0.28);\n --remotion-studio-black-alpha-30: rgba(0, 0, 0, 0.3);\n --remotion-studio-black-alpha-40: rgba(0, 0, 0, 0.4);\n --remotion-studio-black-alpha-50: rgba(0, 0, 0, 0.5);\n --remotion-studio-black-alpha-60: rgba(0, 0, 0, 0.6);\n --remotion-studio-black-alpha-80: rgba(0, 0, 0, 0.8);\n --remotion-studio-black-alpha-85: rgba(0, 0, 0, 0.85);\n --remotion-studio-black-alpha-90: rgba(0, 0, 0, 0.9);\n --remotion-studio-fail-color: #ff3232;\n --remotion-studio-warning-color: #f1c40f;\n --remotion-studio-blue: #0b84f3;\n --remotion-studio-blue-hovered: #4da3f7;\n --remotion-studio-blue-disabled: #284f73;\n --remotion-studio-unselected-guide: #7e1219;\n --remotion-studio-selected-guide: #d22d3a;\n --remotion-studio-line-color: #363A3E;\n --remotion-studio-timeline-track-separator: #13161B;\n --remotion-studio-light-gray: #ccc;\n --remotion-studio-keyboard-shortcut-key-color: #eee;\n --remotion-studio-notification-background: #111111;\n --remotion-studio-render-status-background: #222;\n --remotion-studio-error-code-frame-background: #070707;\n --remotion-studio-error-code-frame-line-background: #121212;\n --remotion-studio-error-link-color: #58a6ff;\n --remotion-studio-info-blue: #60a5fa;\n --remotion-studio-server-disconnected-background: #e74c3c;\n --remotion-studio-timeline-background-color: #15181B;\n --remotion-studio-timeline-negative-start-background-color: #2C2F32;\n --remotion-studio-timeline-negative-start-border-color: #414446;\n --remotion-studio-timeline-selected-background-color: #3B3F42;\n --remotion-studio-timeline-selected-label-background-color: #B0B0B0;\n --remotion-studio-timeline-blue: #0b84ff;\n --remotion-studio-timeline-playhead-color: #f02c00;\n --remotion-studio-timeline-drop-blue-alpha-12: rgba(0, 155, 255, 0.12);\n --remotion-studio-timeline-drop-blue-alpha-16: rgba(0, 155, 255, 0.16);\n --remotion-studio-timeline-drop-blue-alpha-75: rgba(0, 155, 255, 0.75);\n --remotion-studio-timeline-marquee-blue-alpha-16: rgba(70, 130, 255, 0.16);\n --remotion-studio-timeline-marquee-blue-alpha-75: rgba(70, 130, 255, 0.75);\n --remotion-studio-easing-selected-background: rgba(11, 132, 243, 0.18);\n --remotion-studio-info-blue-background: rgba(59, 130, 246, 0.15);\n --remotion-studio-color-picker-checker-background-color: #444;\n --remotion-studio-color-picker-hue-gradient: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n --remotion-studio-timeline-audio-gradient: linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%);\n --remotion-studio-timeline-video-gradient: linear-gradient(to top, #8e44ad, #9b59b6);\n --remotion-studio-focus-color: #555;\n --remotion-studio-color-picker-checker-color: #888;\n --remotion-studio-info-blue-border-color: rgba(59, 130, 246, 0.4);\n --remotion-studio-black-alpha-22: rgba(0, 0, 0, 0.22);\n --remotion-studio-font-family-error-color: #ff8a8a;\n --remotion-studio-selected-outline-snap-color: #ff00ff;\n --remotion-studio-prism-text-color: #d4d4d4;\n --remotion-studio-prism-selection-background: #264f78;\n --remotion-studio-prism-background: #1e1e1e;\n --remotion-studio-prism-inline-color: #db4c69;\n --remotion-studio-prism-keyword-color: #569cd6;\n --remotion-studio-prism-variable-color: #9cdcfe;\n --remotion-studio-prism-comment-color: #6a9955;\n --remotion-studio-prism-number-color: #b5cea8;\n --remotion-studio-prism-string-color: #ce9178;\n --remotion-studio-prism-control-flow-color: #c586c0;\n --remotion-studio-prism-function-color: #dcdcaa;\n --remotion-studio-prism-regex-color: #d16969;\n --remotion-studio-prism-class-name-color: #4ec9b0;\n --remotion-studio-prism-selector-color: #d7ba7d;\n --remotion-studio-prism-line-highlight-background: #f7ebc6;\n --remotion-studio-prism-line-highlight-border-color: #f7d87c;\n}\n";
1
+ export declare const studioCssVariables = "\n:where(:root) {\n --remotion-studio-black: black;\n --remotion-studio-white: white;\n --remotion-studio-red: red;\n --remotion-studio-transparent: transparent;\n --remotion-studio-current-color: currentColor;\n --remotion-studio-background: rgb(31,36,40);\n --remotion-studio-background-transparent: rgba(31,36,40, 0);\n --remotion-studio-input-background: #2f363d;\n --remotion-studio-light-color: #ddd;\n --remotion-studio-light-text: #A6A7A9;\n --remotion-studio-ruler-color: #808080;\n --remotion-studio-white-alpha-05: rgba(255, 255, 255, 0.05);\n --remotion-studio-white-alpha-06: rgba(255, 255, 255, 0.06);\n --remotion-studio-white-alpha-08: rgba(255, 255, 255, 0.08);\n --remotion-studio-white-alpha-10: rgba(255, 255, 255, 0.1);\n --remotion-studio-white-alpha-12: rgba(255, 255, 255, 0.12);\n --remotion-studio-white-alpha-15: rgba(255, 255, 255, 0.15);\n --remotion-studio-white-alpha-20: rgba(255, 255, 255, 0.2);\n --remotion-studio-white-alpha-25: rgba(255, 255, 255, 0.25);\n --remotion-studio-white-alpha-30: rgba(255, 255, 255, 0.3);\n --remotion-studio-white-alpha-35: rgba(255, 255, 255, 0.35);\n --remotion-studio-white-alpha-40: rgba(255, 255, 255, 0.4);\n --remotion-studio-white-alpha-45: rgba(255, 255, 255, 0.45);\n --remotion-studio-white-alpha-50: rgba(255, 255, 255, 0.5);\n --remotion-studio-white-alpha-60: rgba(255, 255, 255, 0.6);\n --remotion-studio-white-alpha-70: rgba(255, 255, 255, 0.7);\n --remotion-studio-white-alpha-72: rgba(255, 255, 255, 0.72);\n --remotion-studio-white-alpha-80: rgba(255, 255, 255, 0.8);\n --remotion-studio-white-alpha-90: rgba(255, 255, 255, 0.9);\n --remotion-studio-black-alpha-28: rgba(0, 0, 0, 0.28);\n --remotion-studio-black-alpha-30: rgba(0, 0, 0, 0.3);\n --remotion-studio-black-alpha-40: rgba(0, 0, 0, 0.4);\n --remotion-studio-black-alpha-50: rgba(0, 0, 0, 0.5);\n --remotion-studio-black-alpha-60: rgba(0, 0, 0, 0.6);\n --remotion-studio-black-alpha-80: rgba(0, 0, 0, 0.8);\n --remotion-studio-black-alpha-85: rgba(0, 0, 0, 0.85);\n --remotion-studio-black-alpha-90: rgba(0, 0, 0, 0.9);\n --remotion-studio-fail-color: #ff3232;\n --remotion-studio-warning-color: #f1c40f;\n --remotion-studio-blue: #0b84f3;\n --remotion-studio-blue-hovered: #4da3f7;\n --remotion-studio-blue-disabled: #284f73;\n --remotion-studio-unselected-guide: #7e1219;\n --remotion-studio-selected-guide: #d22d3a;\n --remotion-studio-line-color: #363A3E;\n --remotion-studio-timeline-track-separator: #13161B;\n --remotion-studio-light-gray: #ccc;\n --remotion-studio-keyboard-shortcut-key-color: #eee;\n --remotion-studio-notification-background: #111111;\n --remotion-studio-render-status-background: #222;\n --remotion-studio-error-code-frame-background: #070707;\n --remotion-studio-error-code-frame-line-background: #121212;\n --remotion-studio-error-link-color: #58a6ff;\n --remotion-studio-info-blue: #60a5fa;\n --remotion-studio-server-disconnected-background: #e74c3c;\n --remotion-studio-timeline-background-color: #15181B;\n --remotion-studio-timeline-negative-start-background-color: #2C2F32;\n --remotion-studio-timeline-negative-start-border-color: #414446;\n --remotion-studio-timeline-selected-background-color: #3B3F42;\n --remotion-studio-timeline-selected-label-background-color: #B0B0B0;\n --remotion-studio-timeline-blue: #0b84ff;\n --remotion-studio-timeline-playhead-color: #f02c00;\n --remotion-studio-timeline-drop-blue-alpha-12: rgba(0, 155, 255, 0.12);\n --remotion-studio-timeline-drop-blue-alpha-16: rgba(0, 155, 255, 0.16);\n --remotion-studio-timeline-drop-blue-alpha-75: rgba(0, 155, 255, 0.75);\n --remotion-studio-timeline-marquee-blue-alpha-16: rgba(70, 130, 255, 0.16);\n --remotion-studio-timeline-marquee-blue-alpha-75: rgba(70, 130, 255, 0.75);\n --remotion-studio-easing-selected-background: rgba(11, 132, 243, 0.18);\n --remotion-studio-info-blue-background: rgba(59, 130, 246, 0.15);\n --remotion-studio-color-picker-checker-background-color: var(--remotion-studio-background);\n --remotion-studio-color-picker-hue-gradient: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n --remotion-studio-timeline-audio-gradient: linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%);\n --remotion-studio-timeline-video-gradient: linear-gradient(to top, #8e44ad, #9b59b6);\n --remotion-studio-focus-color: #555;\n --remotion-studio-color-picker-checker-color: var(--remotion-studio-white-alpha-15);\n --remotion-studio-info-blue-border-color: rgba(59, 130, 246, 0.4);\n --remotion-studio-black-alpha-22: rgba(0, 0, 0, 0.22);\n --remotion-studio-font-family-error-color: #ff8a8a;\n --remotion-studio-selected-outline-snap-color: #ff00ff;\n --remotion-studio-prism-text-color: #d4d4d4;\n --remotion-studio-prism-selection-background: #264f78;\n --remotion-studio-prism-background: #1e1e1e;\n --remotion-studio-prism-inline-color: #db4c69;\n --remotion-studio-prism-keyword-color: #569cd6;\n --remotion-studio-prism-variable-color: #9cdcfe;\n --remotion-studio-prism-comment-color: #6a9955;\n --remotion-studio-prism-number-color: #b5cea8;\n --remotion-studio-prism-string-color: #ce9178;\n --remotion-studio-prism-control-flow-color: #c586c0;\n --remotion-studio-prism-function-color: #dcdcaa;\n --remotion-studio-prism-regex-color: #d16969;\n --remotion-studio-prism-class-name-color: #4ec9b0;\n --remotion-studio-prism-selector-color: #d7ba7d;\n --remotion-studio-prism-line-highlight-background: #f7ebc6;\n --remotion-studio-prism-line-highlight-border-color: #f7d87c;\n}\n";
package/dist/helpers/studio-css-variables.js CHANGED
@@ -34,7 +34,6 @@ exports.studioCssVariables = `
34
34
  --remotion-studio-white-alpha-72: rgba(255, 255, 255, 0.72);
35
35
  --remotion-studio-white-alpha-80: rgba(255, 255, 255, 0.8);
36
36
  --remotion-studio-white-alpha-90: rgba(255, 255, 255, 0.9);
37
- --remotion-studio-black-alpha-10: rgba(0, 0, 0, 0.1);
38
37
  --remotion-studio-black-alpha-28: rgba(0, 0, 0, 0.28);
39
38
  --remotion-studio-black-alpha-30: rgba(0, 0, 0, 0.3);
40
39
  --remotion-studio-black-alpha-40: rgba(0, 0, 0, 0.4);
@@ -75,12 +74,12 @@ exports.studioCssVariables = `
75
74
  --remotion-studio-timeline-marquee-blue-alpha-75: rgba(70, 130, 255, 0.75);
76
75
  --remotion-studio-easing-selected-background: rgba(11, 132, 243, 0.18);
77
76
  --remotion-studio-info-blue-background: rgba(59, 130, 246, 0.15);
78
- --remotion-studio-color-picker-checker-background-color: #444;
77
+ --remotion-studio-color-picker-checker-background-color: var(--remotion-studio-background);
79
78
  --remotion-studio-color-picker-hue-gradient: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
80
79
  --remotion-studio-timeline-audio-gradient: linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%);
81
80
  --remotion-studio-timeline-video-gradient: linear-gradient(to top, #8e44ad, #9b59b6);
82
81
  --remotion-studio-focus-color: #555;
83
- --remotion-studio-color-picker-checker-color: #888;
82
+ --remotion-studio-color-picker-checker-color: var(--remotion-studio-white-alpha-15);
84
83
  --remotion-studio-info-blue-border-color: rgba(59, 130, 246, 0.4);
85
84
  --remotion-studio-black-alpha-22: rgba(0, 0, 0, 0.22);
86
85
  --remotion-studio-font-family-error-color: #ff8a8a;
package/dist/icons/snowflake.js CHANGED
@@ -2,9 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.SnowflakeIcon = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
- // Font Awesome Free v7.3.1, Copyright 2026 Fonticons, Inc.
6
- // https://fontawesome.com/license/free
7
5
  const SnowflakeIcon = ({ color, ...props }) => {
8
- return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M344.1 56C344.1 42.7 333.4 32 320.1 32C306.8 32 296.1 42.7 296.1 56L296.1 134.1L273.1 111.1C263.7 101.7 248.5 101.7 239.2 111.1C229.9 120.5 229.8 135.7 239.2 145L296.2 202L296.2 278.5L230 240.3L209.1 162.5C205.7 149.7 192.5 142.1 179.7 145.5C166.9 148.9 159.2 162 162.7 174.8L171.1 206.3L103.5 167.3C92 160.6 77.3 164.5 70.7 176C64.1 187.5 68 202.2 79.5 208.8L147.1 247.8L115.6 256.2C102.8 259.6 95.2 272.8 98.6 285.6C102 298.4 115.2 306 128 302.6L205.8 281.7L272 319.9L205.8 358.1L128 337.2C115.2 333.8 102 341.4 98.6 354.2C95.2 367 102.8 380.2 115.6 383.6L147.1 392L79.5 431C68 437.8 64.1 452.5 70.7 464C77.3 475.5 92 479.4 103.5 472.8L171.1 433.8L162.7 465.3C159.3 478.1 166.9 491.3 179.7 494.7C192.5 498.1 205.7 490.5 209.1 477.7L230 399.9L296.2 361.7L296.2 438.2L239.2 495.2C229.8 504.6 229.8 519.8 239.2 529.1C248.6 538.4 263.8 538.5 273.1 529.1L296.1 506.1L296.1 584.2C296.1 597.5 306.8 608.2 320.1 608.2C333.4 608.2 344.1 597.5 344.1 584.2L344.1 506.1L367.1 529.1C376.5 538.5 391.7 538.5 401 529.1C410.3 519.7 410.4 504.5 401 495.2L344 438.2L344 361.7L410.2 399.9L431.1 477.7C434.5 490.5 447.7 498.1 460.5 494.7C473.3 491.3 480.9 478.1 477.5 465.3L469.1 433.8L536.7 472.8C548.2 479.4 562.9 475.5 569.5 464C576.1 452.5 572.2 437.8 560.7 431.2L493.1 392.2L524.6 383.8C537.4 380.4 545 367.2 541.6 354.4C538.2 341.6 525 334 512.2 337.4L434.4 358.3L368.2 320.1L434.4 281.9L512.2 302.8C525 306.2 538.2 298.6 541.6 285.8C545 273 537.4 259.8 524.6 256.4L493.1 248L560.7 209C572.2 202.4 576.1 187.7 569.5 176.2C562.9 164.7 548.2 160.8 536.7 167.4L469.1 206.4L477.5 174.9C480.9 162.1 473.3 148.9 460.5 145.5C447.7 142.1 434.5 149.7 431.1 162.5L410.2 240.3L344 278.5L344 202L401 145C410.4 135.6 410.4 120.4 401 111.1C391.6 101.8 376.4 101.7 367.1 111.1L344.1 134.1L344.1 56z" }) }));
6
+ return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { d: "M320 80V560M112 200L528 440M112 440L528 200M272 112L320 160L368 112M272 528L320 480L368 528M181 184L181 240L128 264M459 184L459 240L512 264M181 456L181 400L128 376M459 456L459 400L512 376", fill: "none", stroke: color, strokeWidth: 28, strokeLinecap: "round", strokeLinejoin: "round" }) }));
9
7
  };
10
8
  exports.SnowflakeIcon = SnowflakeIcon;
package/dist/icons/{scissors.d.ts → split.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  import type { SVGProps } from 'react';
2
2
  import React from 'react';
3
- export declare const ScissorsIcon: React.FC<SVGProps<SVGSVGElement> & {
3
+ export declare const SplitIcon: React.FC<SVGProps<SVGSVGElement> & {
4
4
  readonly color: string;
5
5
  }>;
package/dist/icons/split.js ADDED
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.SplitIcon = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const SplitIcon = ({ color, ...props }) => {
6
+ return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { d: "M152 112h72c26.5 0 48 21.5 48 48v320c0 26.5-21.5 48-48 48h-72M488 112h-72c-26.5 0-48 21.5-48 48v320c0 26.5 21.5 48 48 48h72", fill: "none", stroke: color, strokeWidth: 32, strokeLinecap: "round", strokeLinejoin: "round" }) }));
7
+ };
8
+ exports.SplitIcon = SplitIcon;
package/dist/icons/trash.js CHANGED
@@ -2,7 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.TrashIcon = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
- const TrashIcon = ({ color, ...props }) => {
6
- return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M160.5 27.4C162.5 20.6 168.8 16 175.8 16h96.4c7.1 0 13.3 4.6 15.3 11.4l11 36.6h-149l11-36.6zM116.1 64H16C7.2 64 0 71.2 0 80s7.2 16 16 16h416c8.8 0 16-7.2 16-16s-7.2-16-16-16H331.9l-13.7-45.8C312.1-2.1 293.4-16 272.2-16h-96.4c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144l22.9 308.7c2.5 33.4 30.3 59.3 63.8 59.3h217.1c33.5 0 61.3-25.9 63.8-59.3L419.2 144h-32.1l-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6H115.4c-16.8 0-30.7-12.9-31.9-29.6L60.8 144H28.7z" }) }));
5
+ const TrashIcon = ({ color, style, ...props }) => {
6
+ return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, style: { overflow: 'visible', ...style }, children: jsx_runtime_1.jsx("path", { fill: color, d: "M160.5 27.4C162.5 20.6 168.8 16 175.8 16h96.4c7.1 0 13.3 4.6 15.3 11.4l11 36.6h-149l11-36.6zM116.1 64H16C7.2 64 0 71.2 0 80s7.2 16 16 16h416c8.8 0 16-7.2 16-16s-7.2-16-16-16H331.9l-13.7-45.8C312.1-2.1 293.4-16 272.2-16h-96.4c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144l22.9 308.7c2.5 33.4 30.3 59.3 63.8 59.3h217.1c33.5 0 61.3-25.9 63.8-59.3L419.2 144h-32.1l-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6H115.4c-16.8 0-30.7-12.9-31.9-29.6L60.8 144H28.7z" }) }));
7
7
  };
8
8
  exports.TrashIcon = TrashIcon;
package/dist/icons/wrap.js CHANGED
@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  // Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
6
6
  // https://fontawesome.com/license (Commercial License)
7
7
  const WrapIcon = ({ color, ...props }) => {
8
- return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", children: jsx_runtime_1.jsx("path", { fill: color, d: "M480 128C497.7 128 512 142.3 512 160L512 224C512 241.7 497.7 256 480 256L160 256C142.3 256 128 241.7 128 224L128 160C128 142.3 142.3 128 160 128L480 128zM208 288L480 288C515.3 288 544 259.3 544 224L544 160C544 124.7 515.3 96 480 96L160 96C124.7 96 96 124.7 96 160L96 224C96 259.3 124.7 288 160 288L176 288L176 384C176 428.2 211.8 464 256 464L288 464L288 480C288 515.3 316.7 544 352 544L480 544C515.3 544 544 515.3 544 480L544 416C544 380.7 515.3 352 480 352L352 352C316.7 352 288 380.7 288 416L288 432L256 432C229.5 432 208 410.5 208 384L208 288zM320 432L320 416C320 398.3 334.3 384 352 384L480 384C497.7 384 512 398.3 512 416L512 480C512 497.7 497.7 512 480 512L352 512C334.3 512 320 497.7 320 480L320 432z" }) }));
8
+ return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", children: jsx_runtime_1.jsx("path", { d: "M160 112h320c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H160c-26.5 0-48-21.5-48-48v-64c0-26.5 21.5-48 48-48ZM192 272v112c0 35.3 28.7 64 64 64h48M352 368h128c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H352c-26.5 0-48-21.5-48-48v-64c0-26.5 21.5-48 48-48Z", fill: "none", stroke: color, strokeWidth: 28, strokeLinecap: "round", strokeLinejoin: "round" }) }));
9
9
  };
10
10
  exports.WrapIcon = WrapIcon;
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.528",
6
+ "version": "4.0.529",
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.528",
24
- "@remotion/whisper-webgpu": "4.0.528",
23
+ "@remotion/video-matting": "4.0.529",
24
+ "@remotion/whisper-webgpu": "4.0.529",
25
25
  "react": ">=16.8.0",
26
26
  "react-dom": ">=16.8.0"
27
27
  },
@@ -35,33 +35,33 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@jridgewell/trace-mapping": "0.3.31",
38
- "@remotion/canvas": "4.0.528",
39
- "@remotion/captions": "4.0.528",
40
- "@remotion/media": "4.0.528",
41
- "@remotion/media-utils": "4.0.528",
42
- "@remotion/paths": "4.0.528",
43
- "@remotion/player": "4.0.528",
44
- "@remotion/renderer": "4.0.528",
45
- "@remotion/codemods": "4.0.528",
46
- "@remotion/studio-protocol": "4.0.528",
47
- "@remotion/studio-shared": "4.0.528",
48
- "@remotion/timeline-utils": "4.0.528",
49
- "@remotion/web-renderer": "4.0.528",
50
- "@remotion/zod-types": "4.0.528",
38
+ "@remotion/canvas": "4.0.529",
39
+ "@remotion/captions": "4.0.529",
40
+ "@remotion/media": "4.0.529",
41
+ "@remotion/media-utils": "4.0.529",
42
+ "@remotion/paths": "4.0.529",
43
+ "@remotion/player": "4.0.529",
44
+ "@remotion/renderer": "4.0.529",
45
+ "@remotion/codemods": "4.0.529",
46
+ "@remotion/studio-protocol": "4.0.529",
47
+ "@remotion/studio-shared": "4.0.529",
48
+ "@remotion/timeline-utils": "4.0.529",
49
+ "@remotion/web-renderer": "4.0.529",
50
+ "@remotion/zod-types": "4.0.529",
51
51
  "@tanstack/react-virtual": "3.14.9",
52
52
  "mediabunny": "1.56.1",
53
53
  "memfs": "3.4.3",
54
54
  "open": "8.4.2",
55
55
  "prismjs": "1.30.0",
56
- "remotion": "4.0.528",
56
+ "remotion": "4.0.529",
57
57
  "semver": "7.5.3",
58
58
  "zod": "4.5.4"
59
59
  },
60
60
  "devDependencies": {
61
61
  "@happy-dom/global-registrator": "14.5.1",
62
- "@remotion/eslint-config-internal": "4.0.528",
63
- "@remotion/video-matting": "4.0.528",
64
- "@remotion/whisper-webgpu": "4.0.528",
62
+ "@remotion/eslint-config-internal": "4.0.529",
63
+ "@remotion/video-matting": "4.0.529",
64
+ "@remotion/whisper-webgpu": "4.0.529",
65
65
  "@testing-library/react": "16.1.0",
66
66
  "@types/prismjs": "1.26.4",
67
67
  "@types/semver": "7.5.3",
package/dist/icons/scissors.js DELETED
@@ -1,8 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ScissorsIcon = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const ScissorsIcon = ({ color, ...props }) => {
6
- return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M48 112a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zm176 0C224 50.1 173.9 0 112 0S0 50.1 0 112 50.1 224 112 224c24 0 46.3-7.6 64.5-20.4l57.3 52.4-57.3 52.4C158.3 295.6 136 288 112 288 50.1 288 0 338.1 0 400s50.1 112 112 112 112-50.1 112-112c0-20.5-5.5-39.6-15.1-56.2L504.2 73.7c9.8-8.9 10.5-24.1 1.5-33.9s-24.1-10.5-33.9-1.5l-202.4 185.2-60.5-55.3c9.6-16.5 15.1-35.7 15.1-56.2zM471.8 473.7c9.8 8.9 25 8.3 33.9-1.5s8.3-25-1.5-33.9L338.6 286.8 302.7 319 471.8 473.7zM48 400a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z" }) }));
7
- };
8
- exports.ScissorsIcon = ScissorsIcon;