@remotion/cli 4.0.0-alpha10 → 4.0.0-alpha12

package/dist/config/index.d.ts

@@ -17,7 +17,7 @@ declare global {
          */
         readonly setCachingEnabled: (flag: boolean) => void;
         /**
-         * Define on which port Remotion should start it's HTTP servers during preview and rendering.
+         * Define on which port Remotion should start it's HTTP servers.
          * By default, Remotion will try to find a free port.
          * If you specify a port, but it's not available, Remotion will throw an error.
          */
@@ -50,14 +50,14 @@ declare global {
          */
         readonly setNumberOfSharedAudioTags: (numberOfAudioTags: number) => void;
         /**
-         * Enable Webpack polling instead of file system listeners for hot reloading in the preview.
+         * Enable Webpack polling instead of file system listeners for hot reloading in the Studio.
          * This is useful if you are using a remote directory or a virtual machine.
          * @param interval
          * @default null
          */
         readonly setWebpackPollingInMilliseconds: (interval: number | null) => void;
         /**
-         * Whether Remotion should open a browser when starting the Preview.
+         * Whether Remotion should open a browser when starting the Studio.
          * @param should
          * @default true
          */

package/dist/config/log.d.ts

@@ -1 +1 @@
-export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn", setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;
+export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;

package/dist/config/max-timeline-tracks.js

@@ -1,19 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getMaxTimelineTracks = exports.setMaxTimelineTracks = void 0;
-let maxTimelineTracks = 15;
+const MaxTimelineTracks_1 = require("../editor/components/Timeline/MaxTimelineTracks");
+let maxTimelineTracks = MaxTimelineTracks_1.DEFAULT_TIMELINE_TRACKS;
 const setMaxTimelineTracks = (maxTracks) => {
     if (typeof maxTracks !== 'number') {
-        throw new Error(`Need to pass a number to Config.Preview.setMaxTimelineTracks(), got ${typeof maxTracks}`);
+        throw new Error(`Need to pass a number to Config.setMaxTimelineTracks(), got ${typeof maxTracks}`);
     }
     if (Number.isNaN(maxTracks)) {
-        throw new Error(`Need to pass a real number to Config.Preview.setMaxTimelineTracks(), got NaN`);
+        throw new Error(`Need to pass a real number to Config.setMaxTimelineTracks(), got NaN`);
     }
     if (!Number.isFinite(maxTracks)) {
-        throw new Error(`Need to pass a real number to Config.Preview.setMaxTimelineTracks(), got ${maxTracks}`);
+        throw new Error(`Need to pass a real number to Config.setMaxTimelineTracks(), got ${maxTracks}`);
     }
     if (maxTracks < 0) {
-        throw new Error(`Need to pass a non-negative number to Config.Preview.setMaxTimelineTracks(), got ${maxTracks}`);
+        throw new Error(`Need to pass a non-negative number to Config.setMaxTimelineTracks(), got ${maxTracks}`);
     }
     maxTimelineTracks = maxTracks;
 };

package/dist/config/preview-server.js

@@ -4,14 +4,14 @@ exports.getServerPort = exports.setPort = void 0;
 let serverPort;
 const setPort = (port) => {
     if (!['number', 'undefined'].includes(typeof port)) {
-        throw new Error(`Preview server port should be a number. Got ${typeof port} (${JSON.stringify(port)})`);
+        throw new Error(`Studio server port should be a number. Got ${typeof port} (${JSON.stringify(port)})`);
     }
     if (port === undefined) {
         serverPort = undefined;
         return;
     }
     if (port < 1 || port > 65535) {
-        throw new Error(`Preview server port should be a number between 1 and 65535. Got ${port}`);
+        throw new Error(`Studio server port should be a number between 1 and 65535. Got ${port}`);
     }
     serverPort = port;
 };

package/dist/editor/components/AudioWaveform.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 export declare const AudioWaveform: React.FC<{
     src: string;
     visualizationWidth: number;
-    fps: number;
     startFrom: number;
     durationInFrames: number;
     setMaxMediaDuration: React.Dispatch<React.SetStateAction<number>>;

package/dist/editor/components/AudioWaveform.js

@@ -4,6 +4,7 @@ exports.AudioWaveform = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const media_utils_1 = require("@remotion/media-utils");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const AudioWaveformBar_1 = require("./AudioWaveformBar");
 const container = {
@@ -26,10 +27,14 @@ const errorMessage = {
 const canvasStyle = {
     position: 'absolute',
 };
-const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWidth, setMaxMediaDuration, volume, doesVolumeChange, playbackRate, }) => {
+const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, setMaxMediaDuration, volume, doesVolumeChange, playbackRate, }) => {
     const [metadata, setMetadata] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const mountState = (0, react_1.useRef)({ isMounted: true });
+    const vidConf = remotion_1.Internals.useUnsafeVideoConfig();
+    if (vidConf === null) {
+        throw new Error('Expected video config');
+    }
     const canvas = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const { current } = mountState;
@@ -74,7 +79,7 @@ const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWid
         (0, media_utils_1.getAudioData)(src)
             .then((data) => {
             if (mountState.current.isMounted) {
-                setMaxMediaDuration(Math.floor(data.durationInSeconds * fps));
+                setMaxMediaDuration(Math.floor(data.durationInSeconds * vidConf.fps));
                 setMetadata(data);
             }
         })
@@ -84,7 +89,7 @@ const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWid
                 setError(err);
             }
         });
-    }, [fps, setMaxMediaDuration, src]);
+    }, [setMaxMediaDuration, src, vidConf.fps]);
     const normalized = (0, react_1.useMemo)(() => {
         if (!metadata || metadata.numberOfChannels === 0) {
             return [];
@@ -92,13 +97,13 @@ const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWid
         const numberOfSamples = Math.floor(visualizationWidth / (AudioWaveformBar_1.WAVEFORM_BAR_LENGTH + AudioWaveformBar_1.WAVEFORM_BAR_MARGIN));
         return (0, media_utils_1.getWaveformPortion)({
             audioData: metadata,
-            startTimeInSeconds: startFrom / fps,
-            durationInSeconds: (durationInFrames / fps) * playbackRate,
+            startTimeInSeconds: startFrom / vidConf.fps,
+            durationInSeconds: (durationInFrames / vidConf.fps) * playbackRate,
             numberOfSamples,
         });
     }, [
         durationInFrames,
-        fps,
+        vidConf.fps,
         metadata,
         playbackRate,
         startFrom,

package/dist/editor/components/CurrentCompositionSideEffects.js

@@ -27,7 +27,7 @@ const CurrentCompositionKeybindings = () => {
             return;
         }
         if (type !== 'connected') {
-            (0, NotificationCenter_1.sendErrorNotification)('Preview server is offline');
+            (0, NotificationCenter_1.sendErrorNotification)('Studio server is offline');
             return;
         }
         const renderButton = document.getElementById('render-modal-button');

package/dist/editor/components/KeyboardShortcutsExplainer.js

@@ -52,6 +52,6 @@ const li = {
     fontSize: 14,
 };
 const KeyboardShortcutsExplainer = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Sidebar" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "B" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle left sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle right sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle both sidebars" })] }), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "R" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Render composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Sidebar" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "B" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle left sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle right sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle both sidebars" })] }), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "R" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Render composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] })] })] })] }));
 };
 exports.KeyboardShortcutsExplainer = KeyboardShortcutsExplainer;

package/dist/editor/components/Menu/is-menu-item.d.ts

@@ -1,5 +1,5 @@
-export declare const MENU_INITIATOR_CLASSNAME = "__remotion-preview-menu-initiator";
-export declare const MENU_ITEM_CLASSNAME = "__remotion-preview-menu-item";
+export declare const MENU_INITIATOR_CLASSNAME = "__remotion-studio-menu-initiator";
+export declare const MENU_ITEM_CLASSNAME = "__remotion-studio-menu-item";
 export declare const HORIZONTAL_SCROLLBAR_CLASSNAME = "__remotion-horizontal-scrollbar";
 export declare const VERTICAL_SCROLLBAR_CLASSNAME = "__remotion-vertical-scrollbar";
 export declare const isMenuItem: (el: HTMLElement) => boolean;

package/dist/editor/components/Menu/is-menu-item.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isMenuItem = exports.VERTICAL_SCROLLBAR_CLASSNAME = exports.HORIZONTAL_SCROLLBAR_CLASSNAME = exports.MENU_ITEM_CLASSNAME = exports.MENU_INITIATOR_CLASSNAME = void 0;
-exports.MENU_INITIATOR_CLASSNAME = '__remotion-preview-menu-initiator';
-exports.MENU_ITEM_CLASSNAME = '__remotion-preview-menu-item';
+exports.MENU_INITIATOR_CLASSNAME = '__remotion-studio-menu-initiator';
+exports.MENU_ITEM_CLASSNAME = '__remotion-studio-menu-item';
 exports.HORIZONTAL_SCROLLBAR_CLASSNAME = '__remotion-horizontal-scrollbar';
 exports.VERTICAL_SCROLLBAR_CLASSNAME = '__remotion-vertical-scrollbar';
 const isMenuItem = (el) => {

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.05)" | "rgba(0, 0, 0, 0.6)" | "#ff3232" | "#f1c40f";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -3,5 +3,5 @@ import type { RemInputStatus } from './RemInput';
 declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     status: RemInputStatus;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/ValidationMessage.d.ts

@@ -1,4 +1,6 @@
+import type { SVGProps } from 'react';
 import React from 'react';
+export declare const WarningTriangle: React.FC<SVGProps<SVGSVGElement>>;
 export declare const ValidationMessage: React.FC<{
     message: string;
     align: 'flex-start' | 'flex-end';

package/dist/editor/components/NewComposition/ValidationMessage.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValidationMessage = void 0;
+exports.ValidationMessage = exports.WarningTriangle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
@@ -8,6 +8,7 @@ const layout_1 = require("../layout");
 const WarningTriangle = (props) => {
     return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
 };
+exports.WarningTriangle = WarningTriangle;
 const style = {
     width: 12,
     height: 12,
@@ -28,6 +29,6 @@ const ValidationMessage = ({ message, align, type }) => {
             fill: type === 'warning' ? colors_1.WARNING_COLOR : colors_1.FAIL_COLOR,
         };
     }, [type]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", justify: align, children: [(0, jsx_runtime_1.jsx)(WarningTriangle, { style: finalStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", justify: align, children: [(0, jsx_runtime_1.jsx)(exports.WarningTriangle, { style: finalStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
 };
 exports.ValidationMessage = ValidationMessage;

package/dist/editor/components/Notifications/ServerDisconnected.js

@@ -44,6 +44,6 @@ const ServerDisconnected = () => {
     if (pageIsGoingToReload) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: message, children: ["The preview server has disconnected. ", (0, jsx_runtime_1.jsx)("br", {}), window.remotion_studioServerCommand ? ((0, jsx_runtime_1.jsxs)("span", { children: ["Run", ' ', (0, jsx_runtime_1.jsx)("code", { style: inlineCode, children: window.remotion_studioServerCommand }), ' ', "to run it again."] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Fast refresh will not work." }))] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: message, children: ["The studio server has disconnected. ", (0, jsx_runtime_1.jsx)("br", {}), window.remotion_studioServerCommand ? ((0, jsx_runtime_1.jsxs)("span", { children: ["Run", ' ', (0, jsx_runtime_1.jsx)("code", { style: inlineCode, children: window.remotion_studioServerCommand }), ' ', "to run it again."] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Fast refresh will not work." }))] }) }));
 };
 exports.ServerDisconnected = ServerDisconnected;

package/dist/editor/components/RenderButton.js

@@ -31,7 +31,7 @@ const RenderButton = () => {
     const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
     const tooltip = type === 'connected'
         ? 'Export the current composition ' + shortcut
-        : 'Connect to the preview server to render';
+        : 'Connect to the Studio server to render';
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {

package/dist/editor/components/RenderModal/DataEditor.js

@@ -260,7 +260,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
         serializedJSON,
     ]);
     if (connectionStatus === 'disconnected') {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The preview server has disconnected. Reconnect to edit the schema." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The studio server has disconnected. Reconnect to edit the schema." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
     }
     if (schema === 'no-zod') {
         return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.ZodNotInstalled, {});

package/dist/editor/components/RenderModal/RenderModalData.d.ts

@@ -4,15 +4,14 @@ export declare type State = {
     str: string;
     value: Record<string, unknown>;
     validJSON: true;
-    zodValidation: Zod.SafeParseReturnType<unknown, unknown>;
 } | {
     str: string;
     validJSON: false;
     error: string;
 };
 export declare type PropsEditType = 'input-props' | 'default-props';
-export declare const DataEditor: React.FC<{
-    unresolvedComposition: AnyComposition;
+export declare const RenderModalData: React.FC<{
+    composition: AnyComposition;
     inputProps: Record<string, unknown>;
     setInputProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     compact: boolean;

package/dist/editor/components/RenderModal/RenderModalData.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataEditor = void 0;
+exports.RenderModalData = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -62,7 +62,6 @@ const outer = {
     flexDirection: 'column',
     flex: 1,
     overflow: 'hidden',
-    backgroundColor: colors_1.BACKGROUND,
 };
 const controlContainer = {
     flexDirection: 'column',
@@ -77,6 +76,15 @@ const tabWrapper = {
     alignItems: 'center',
 };
 const persistanceKey = 'remotion.show-render-modalwarning';
+const parseJSON = (str) => {
+    try {
+        const value = (0, input_props_serialization_1.deserializeJSONWithCustomFields)(str);
+        return { str, value, validJSON: true };
+    }
+    catch (e) {
+        return { str, validJSON: false, error: e.message };
+    }
+};
 const getPersistedShowWarningState = () => {
     const val = localStorage.getItem(persistanceKey);
     if (!val) {
@@ -87,7 +95,7 @@ const getPersistedShowWarningState = () => {
 const setPersistedShowWarningState = (val) => {
     localStorage.setItem(persistanceKey, String(Boolean(val)));
 };
-const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact, mayShowSaveButton, propsEditType, }) => {
+const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayShowSaveButton, propsEditType, }) => {
     const [mode, setMode] = (0, react_1.useState)('schema');
     const [valBeforeSafe, setValBeforeSafe] = (0, react_1.useState)(inputProps);
     const [saving, setSaving] = (0, react_1.useState)(false);
@@ -106,21 +114,21 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
     }, [inJSONEditor, inputProps]);
     const cliProps = (0, remotion_1.getInputProps)();
     const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = (0, react_1.useState)({
-        [unresolvedComposition.id]: get_render_modal_warnings_1.defaultTypeCanSaveState,
+        [composition.id]: get_render_modal_warnings_1.defaultTypeCanSaveState,
     });
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     const schema = (0, react_1.useMemo)(() => {
         if (!z) {
             return 'no-zod';
         }
-        if (!unresolvedComposition.schema) {
+        if (!composition.schema) {
             return z.object({});
         }
-        if (!(typeof unresolvedComposition.schema.safeParse === 'function')) {
+        if (!(typeof composition.schema.safeParse === 'function')) {
             throw new Error('A value which is not a Zod schema was passed to `schema`');
         }
-        return unresolvedComposition.schema;
-    }, [unresolvedComposition.schema, z]);
+        return composition.schema;
+    }, [composition.schema, z]);
     const zodValidationResult = (0, react_1.useMemo)(() => {
         if (schema === 'no-zod') {
             return 'no-zod';
@@ -138,19 +146,19 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
         });
     }, []);
     const canSaveDefaultProps = (0, react_1.useMemo)(() => {
-        return canSaveDefaultPropsObjectState[unresolvedComposition.id]
-            ? canSaveDefaultPropsObjectState[unresolvedComposition.id]
+        return canSaveDefaultPropsObjectState[composition.id]
+            ? canSaveDefaultPropsObjectState[composition.id]
             : get_render_modal_warnings_1.defaultTypeCanSaveState;
-    }, [canSaveDefaultPropsObjectState, unresolvedComposition.id]);
+    }, [canSaveDefaultPropsObjectState, composition.id]);
     const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
     const { fastRefreshes } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
     (0, react_1.useEffect)(() => {
-        (0, actions_1.canUpdateDefaultProps)(unresolvedComposition.id)
+        (0, actions_1.canUpdateDefaultProps)(composition.id)
             .then((can) => {
             if (can.canUpdate) {
                 setCanSaveDefaultProps((prevState) => ({
                     ...prevState,
-                    [unresolvedComposition.id]: {
+                    [composition.id]: {
                         canUpdate: true,
                     },
                 }));
@@ -158,7 +166,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
             else {
                 setCanSaveDefaultProps((prevState) => ({
                     ...prevState,
-                    [unresolvedComposition.id]: {
+                    [composition.id]: {
                         canUpdate: false,
                         reason: can.reason,
                         determined: true,
@@ -169,14 +177,14 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
             .catch((err) => {
             setCanSaveDefaultProps((prevState) => ({
                 ...prevState,
-                [unresolvedComposition.id]: {
+                [composition.id]: {
                     canUpdate: false,
                     reason: err.message,
                     determined: true,
                 },
             }));
         });
-    }, [unresolvedComposition.id]);
+    }, [composition.id]);
     const modeItems = (0, react_1.useMemo)(() => {
         return [
             {
@@ -197,18 +205,21 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
             },
         ];
     }, [mode]);
+    const switchToSchema = (0, react_1.useCallback)(() => {
+        setMode('schema');
+    }, []);
     const onUpdate = (0, react_1.useCallback)(() => {
         if (schema === 'no-zod' || z === null) {
             (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
             return;
         }
         setValBeforeSafe(inputProps);
-        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).then((response) => {
+        (0, actions_1.updateDefaultProps)(composition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).then((response) => {
             if (!response.success) {
                 (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: ' + response.reason);
             }
         });
-    }, [unresolvedComposition.id, inputProps, schema, z]);
+    }, [composition.id, inputProps, schema, z]);
     (0, react_1.useEffect)(() => {
         setSaving(false);
     }, [fastRefreshes]);
@@ -218,7 +229,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
             return;
         }
         setSaving(true);
-        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater(unresolvedComposition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
+        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
             .then((response) => {
             if (!response.success) {
                 console.log(response.stack);
@@ -229,7 +240,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
             (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
             setSaving(false);
         });
-    }, [unresolvedComposition.defaultProps, unresolvedComposition.id, schema, z]);
+    }, [composition.defaultProps, composition.id, schema, z]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type;
     const warnings = (0, react_1.useMemo)(() => {
         return (0, get_render_modal_warnings_1.getRenderModalWarnings)({
@@ -267,11 +278,11 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
     if (typeName === z.ZodFirstPartyTypeKind.ZodAny) {
         return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoSchemaDefined, {});
     }
-    if (!unresolvedComposition.defaultProps) {
+    if (!composition.defaultProps) {
         return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoDefaultProps, {});
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: tabWrapper, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), warnings.length > 0 ? ((0, jsx_runtime_1.jsx)(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
                         ? warnings.map((warning) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })] }, warning)))
-                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
+                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: composition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, parseJSON: parseJSON }))] }));
 };
-exports.DataEditor = DataEditor;
+exports.RenderModalData = RenderModalData;

package/dist/editor/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -130,7 +130,7 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, val
             borderColor: colors_1.FAIL_COLOR,
         };
     }, [localValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: scrollable, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: textAreaStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : localValue.zodValidation.success === false ? ((0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: localValue.zodValidation })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON ||
+    return ((0, jsx_runtime_1.jsxs)("div", { style: scrollable, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: textAreaStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : localValue.zodValidation.success === false ? ((0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: localValue.zodValidation, viewTab: "json" })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON ||
                             !(localValue.validJSON && !localValue.zodValidation.success), onClick: reset, children: "Reset" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, children: "Format" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, disabled: !(localValue.validJSON && localValue.zodValidation.success) ||
                             !localValue.validJSON ||
                             !hasChanged ||

package/dist/editor/components/RenderModal/SchemaEditor/SchemaErrorMessages.js

@@ -51,11 +51,11 @@ const NoDefaultProps = () => {
 exports.NoDefaultProps = NoDefaultProps;
 const InvalidDefaultProps = ({ zodValidationResult }) => {
     // TODO: Does not react to when schema is updated
-    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " is not valid:"] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by changing the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in your composition so it does not give a type error."] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " is not valid:"] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult, viewTab: "schema" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by changing the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in your composition so it does not give a type error."] })] }));
 };
 exports.InvalidDefaultProps = InvalidDefaultProps;
 const InvalidSchema = ({ zodValidationResult, reset }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult, viewTab: "schema" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
 };
 exports.InvalidSchema = InvalidSchema;
 const TopLevelZodValue = ({ typeReceived }) => {

package/dist/editor/components/RenderModal/SchemaEditor/ZodErrorMessages.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import type { z } from 'zod';
 export declare const ZodErrorMessages: React.FC<{
     zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
+    viewTab: 'schema' | 'json';
 }>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodErrorMessages.js

@@ -2,22 +2,47 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodErrorMessages = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const colors_1 = require("../../../helpers/colors");
-const label = {
+const layout_1 = require("../../layout");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const schemaLabel = {
     fontSize: 14,
     color: colors_1.LIGHT_TEXT,
+};
+const jsonLabel = {
+    color: 'white',
+    fontSize: 13,
     fontFamily: 'sans-serif',
+    display: 'flex',
+    alignItems: 'center',
 };
-const code = {
-    ...label,
-    fontFamily: 'monospace',
+const triangleStyle = {
+    width: 12,
+    height: 12,
+    flexShrink: 0,
+    fill: colors_1.FAIL_COLOR,
 };
-const ZodErrorMessages = ({ zodValidationResult }) => {
+const ZodErrorMessages = ({ zodValidationResult, viewTab }) => {
     if (zodValidationResult.success) {
         throw new Error('Expected error');
     }
+    const style = (0, react_1.useMemo)(() => {
+        return viewTab === 'json' ? jsonLabel : schemaLabel;
+    }, [viewTab]);
+    const code = (0, react_1.useMemo)(() => {
+        return {
+            ...schemaLabel,
+            fontFamily: 'monospace',
+        };
+    }, []);
+    if (viewTab === 'json') {
+        return ((0, jsx_runtime_1.jsx)("div", { children: zodValidationResult.error.errors.map((error) => {
+                return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: [(0, jsx_runtime_1.jsx)(ValidationMessage_1.WarningTriangle, { style: triangleStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), error.path.length === 0 ? 'Root' : error.path.join('.'), ":", ' ', error.message] }, error.path.join('.')));
+            }) }));
+    }
     return ((0, jsx_runtime_1.jsx)("div", { children: zodValidationResult.error.errors.map((error) => {
-            return ((0, jsx_runtime_1.jsxs)("div", { style: label, children: ["-", ' ', (0, jsx_runtime_1.jsx)("code", { style: code, children: error.path.length === 0 ? 'Root' : error.path.join('.') }), ": ", error.message] }, error.path.join('.')));
+            return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["-", ' ', (0, jsx_runtime_1.jsx)("code", { style: code, children: error.path.length === 0 ? 'Root' : error.path.join('.') }), ": ", error.message] }, error.path.join('.')));
         }) }));
 };
 exports.ZodErrorMessages = ZodErrorMessages;

package/dist/editor/components/RenderQueue/index.js

@@ -38,7 +38,7 @@ const RenderQueue = () => {
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const jobCount = jobs.length;
     if (connectionStatus === 'disconnected') {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The preview server has disconnected." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The studio server has disconnected." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
     }
     if (jobCount === 0) {
         return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "No renders in the queue." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));