@remotion/studio 4.0.291 → 4.0.293

package/.turbo/turbo-make.log

@@ -1,6 +1,6 @@
 
 
-> @remotion/studio@4.0.291 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.293 make /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 
-[90.47ms] Generated.
+[62.19ms] Generated.

package/dist/api/get-zod-schema-from-primitive.js

@@ -8,6 +8,11 @@ const getZodSchemaFromPrimitive = (value, z) => {
     if (typeof value === 'number') {
         return z.number();
     }
-    throw new Error('Unknown primitive type');
+    let stringified;
+    try {
+        stringified = JSON.stringify(value);
+    }
+    catch (_a) { }
+    throw new Error(`visualControl(): Specify a schema for this value: ${stringified !== null && stringified !== void 0 ? stringified : '[non-serializable value]'}. See https://remotion.dev/docs/studio/visual-control`);
 };
 exports.getZodSchemaFromPrimitive = getZodSchemaFromPrimitive;

package/dist/api/save-default-props.js

@@ -56,8 +56,20 @@ const saveDefaultProps = async ({ compositionId, defaultProps, }) => {
         throw new Error('"zod" is required to use saveDefaultProps(), but is not installed.');
     }
     const z = await Promise.resolve().then(() => __importStar(require('zod')));
+    let zodTypes = null;
+    try {
+        zodTypes = await Promise.resolve().then(() => __importStar(require('@remotion/zod-types')));
+    }
+    catch (_b) { }
     const { generatedDefaultProps, composition } = (0, calc_new_props_1.calcNewProps)(compositionId, defaultProps);
-    const res = await (0, actions_1.callUpdateDefaultPropsApi)(compositionId, generatedDefaultProps, composition.schema ? (0, extract_enum_json_paths_1.extractEnumJsonPaths)(composition.schema, z, []) : []);
+    const res = await (0, actions_1.callUpdateDefaultPropsApi)(compositionId, generatedDefaultProps, composition.schema
+        ? (0, extract_enum_json_paths_1.extractEnumJsonPaths)({
+            schema: composition.schema,
+            zodRuntime: z,
+            currentPath: [],
+            zodTypes,
+        })
+        : []);
     if (res.success) {
         return Promise.resolve();
     }

package/dist/api/update-default-props.js

@@ -17,7 +17,7 @@ const updateDefaultProps = ({ compositionId, defaultProps, }) => {
     });
     window.dispatchEvent(new CustomEvent(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY, {
         detail: {
-            resetUnsaved: false,
+            resetUnsaved: null,
         },
     }));
 };

package/dist/api/use-visual-control.js

@@ -8,7 +8,6 @@ const VisualControls_1 = require("../visual-controls/VisualControls");
 const get_zod_schema_from_primitive_1 = require("./get-zod-schema-from-primitive");
 const useVisualControl = () => {
     const { addHook, removeHook, setControl, updateHandles } = (0, react_1.useContext)(VisualControls_1.SetVisualControlsContext);
-    const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
     const changed = (0, react_1.useRef)(false);
     const [stack] = (0, react_1.useState)(() => {
         return new Error().stack;
@@ -53,6 +52,6 @@ const useVisualControl = () => {
             }
             return currentValue;
         },
-    }), [handles, hook, setControl, z]);
+    }), [hook, setControl, z]);
 };
 exports.useVisualControl = useVisualControl;

package/dist/api/use-visual-controls.d.ts

@@ -0,0 +1,7 @@
+import type { z } from 'zod';
+type VisualControl = <T>(key: string, value: T, schema?: z.ZodTypeAny) => T;
+type UseVisualControls = {
+    visualControl: VisualControl;
+};
+export declare const useVisualControls: () => UseVisualControls;
+export {};

package/dist/api/use-visual-controls.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVisualControls = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_zod_if_possible_1 = require("../components/get-zod-if-possible");
+const VisualControls_1 = require("../visual-controls/VisualControls");
+const get_zod_schema_from_primitive_1 = require("./get-zod-schema-from-primitive");
+const useVisualControls = () => {
+    const { addHook, removeHook, setControl, updateHandles } = (0, react_1.useContext)(VisualControls_1.SetVisualControlsContext);
+    const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const changedRef = (0, react_1.useRef)(false);
+    const [stack] = (0, react_1.useState)(() => {
+        return new Error().stack;
+    });
+    const [hook] = (0, react_1.useState)(() => {
+        return (0, VisualControls_1.makeHook)(stack);
+    });
+    (0, react_1.useEffect)(() => {
+        if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+            return;
+        }
+        addHook(hook);
+    }, [addHook, hook]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            removeHook(hook);
+        };
+    }, [hook, removeHook]);
+    (0, react_1.useEffect)(() => {
+        if (changedRef.current) {
+            updateHandles();
+            changedRef.current = false;
+        }
+    }, [updateHandles]);
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    return (0, react_1.useMemo)(() => ({
+        visualControl(key, value, schema) {
+            if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+                return value;
+            }
+            if (!z) {
+                return value;
+            }
+            const { changed, currentValue } = setControl(hook, key, {
+                valueInCode: value,
+                schema: schema !== null && schema !== void 0 ? schema : (0, get_zod_schema_from_primitive_1.getZodSchemaFromPrimitive)(value, z),
+                stack: new Error().stack,
+            });
+            if (changed) {
+                changedRef.current = true;
+            }
+            return currentValue;
+        },
+    }), [hook, setControl, handles, z]);
+};
+exports.useVisualControls = useVisualControls;

package/dist/api/visual-control.d.ts

@@ -0,0 +1,2 @@
+import { type VisualControlRef } from '../visual-controls/VisualControls';
+export declare const visualControl: VisualControlRef['globalVisualControl'];

package/dist/api/visual-control.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.visualControl = void 0;
+const VisualControls_1 = require("../visual-controls/VisualControls");
+const visualControl = (key, value, schema) => {
+    if (!VisualControls_1.visualControlRef.current) {
+        throw new Error('visualControlRef is not set');
+    }
+    return VisualControls_1.visualControlRef.current.globalVisualControl(key, value, schema);
+};
+exports.visualControl = visualControl;

package/dist/components/AskAiModal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type AskAiModalRef = {
+    toggle: () => void;
+};
+export declare const askAiModalRef: React.RefObject<AskAiModalRef | null>;
+export declare const AskAiModal: React.FC;
+export {};

package/dist/components/AskAiModal.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AskAiModal = exports.askAiModalRef = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalHeader_1 = require("./ModalHeader");
+const container = {
+    height: 'calc(100vh - 100px)',
+    width: 'calc(100vw - 160px)',
+    maxWidth: 800,
+    maxHeight: 900,
+    display: 'block',
+};
+exports.askAiModalRef = (0, react_1.createRef)();
+const AskAiModal = () => {
+    const [state, setState] = (0, react_1.useState)('never-opened');
+    const iframe = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(exports.askAiModalRef, () => ({
+        toggle: () => {
+            setState((s) => {
+                var _a, _b, _c;
+                if (s === 'visible') {
+                    (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.blur();
+                    (_c = (_b = iframe.current) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.blur();
+                }
+                return s === 'visible' ? 'hidden' : 'visible';
+            });
+        },
+    }), []);
+    (0, react_1.useEffect)(() => {
+        const onMessage = (event) => {
+            var _a;
+            const json = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+            if (json.type === 'cmd-j') {
+                (_a = exports.askAiModalRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
+            }
+        };
+        window.addEventListener('message', onMessage);
+        return () => {
+            window.removeEventListener('message', onMessage);
+        };
+    }, []);
+    const onQuit = (0, react_1.useCallback)(() => {
+        setState('hidden');
+    }, [setState]);
+    // When re-toggling the modal, focus the text box
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!iframe.current) {
+            return;
+        }
+        if (state === 'visible') {
+            (_a = iframe.current.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
+                type: 'focus',
+            }, '*');
+        }
+    }, [state]);
+    if (state === 'never-opened') {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: { display: state === 'visible' ? 'block' : 'none' }, children: (0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { noZIndex: state === 'hidden', onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: "Ask AI", onClose: onQuit }), (0, jsx_runtime_1.jsx)("iframe", { ref: iframe, frameBorder: 0, style: container, src: "https://www.remotion.dev/ai-embed" })] }) }));
+};
+exports.AskAiModal = AskAiModal;

package/dist/components/Canvas.d.ts

@@ -4,5 +4,4 @@ import type { CanvasContent } from 'remotion';
 export declare const Canvas: React.FC<{
     readonly canvasContent: CanvasContent;
     readonly size: Size;
-    readonly isRefreshing: boolean;
 }>;

package/dist/components/Canvas.js

@@ -34,7 +34,7 @@ const resetZoom = {
     right: layout_1.SPACING_UNIT * 2,
 };
 const ZOOM_PX_FACTOR = 0.003;
-const Canvas = ({ canvasContent, size, isRefreshing }) => {
+const Canvas = ({ canvasContent, size }) => {
     const { setSize, size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
@@ -260,6 +260,6 @@ const Canvas = ({ canvasContent, size, isRefreshing }) => {
     (0, react_1.useEffect)(() => {
         fetchMetadata();
     }, [fetchMetadata]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? ((0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, isRefreshing: isRefreshing })) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && ((0, jsx_runtime_1.jsx)(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && ((0, jsx_runtime_1.jsx)(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? ((0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution })) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && ((0, jsx_runtime_1.jsx)(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && ((0, jsx_runtime_1.jsx)(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };
 exports.Canvas = Canvas;

package/dist/components/CanvasOrLoading.js

@@ -46,7 +46,7 @@ const CanvasOrLoading = ({ size }) => {
         const compname = window.location.pathname.replace('/', '');
         return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: RunningCalculateMetadata_1.loaderLabel, children: ["Composition with ID ", compname, " not found."] }) }));
     }
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { isRefreshing: (resolved === null || resolved === void 0 ? void 0 : resolved.type) === 'success-and-refreshing', size: size, canvasContent: canvasContent }), (resolved === null || resolved === void 0 ? void 0 : resolved.type) === 'success-and-refreshing' ? ((0, jsx_runtime_1.jsx)(RefreshCompositionOverlay_1.RefreshCompositionOverlay, {})) : null] }));
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { size: size, canvasContent: canvasContent }), (resolved === null || resolved === void 0 ? void 0 : resolved.type) === 'success-and-refreshing' ? ((0, jsx_runtime_1.jsx)(RefreshCompositionOverlay_1.RefreshCompositionOverlay, {})) : null] }));
     if (canvasContent.type === 'asset' || canvasContent.type === 'output') {
         return content;
     }

package/dist/components/EditorContexts.js

@@ -9,6 +9,7 @@ const highest_z_index_1 = require("../state/highest-z-index");
 const keybindings_1 = require("../state/keybindings");
 const preview_size_1 = require("../state/preview-size");
 const sidebar_1 = require("../state/sidebar");
+const VisualControls_1 = require("../visual-controls/VisualControls");
 const CheckerboardProvider_1 = require("./CheckerboardProvider");
 const get_zod_if_possible_1 = require("./get-zod-if-possible");
 const MediaVolumeProvider_1 = require("./MediaVolumeProvider");
@@ -19,6 +20,6 @@ const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
 const ShowRulersProvider_1 = require("./ShowRulersProvider");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children, readOnlyStudio }) => {
-    return ((0, jsx_runtime_1.jsx)(get_zod_if_possible_1.ZodProvider, { children: (0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: (0, jsx_runtime_1.jsx)(context_1.RenderQueueContextProvider, { children: (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(ShowRulersProvider_1.ShowRulersProvider, { children: (0, jsx_runtime_1.jsx)(ShowGuidesProvider_1.ShowGuidesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(get_zod_if_possible_1.ZodProvider, { children: (0, jsx_runtime_1.jsx)(VisualControls_1.VisualControlsProvider, { children: (0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: (0, jsx_runtime_1.jsx)(context_1.RenderQueueContextProvider, { children: (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(ShowRulersProvider_1.ShowRulersProvider, { children: (0, jsx_runtime_1.jsx)(ShowGuidesProvider_1.ShowGuidesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.EditorContexts = EditorContexts;

package/dist/components/GlobalKeybindings.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const checkerboard_1 = require("../state/checkerboard");
 const modals_1 = require("../state/modals");
+const AskAiModal_1 = require("./AskAiModal");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const GlobalKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
@@ -37,6 +38,18 @@ const GlobalKeybindings = () => {
             commandCtrlKey: true,
             preventDefault: true,
         });
+        const cmdJKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'j',
+            callback: () => {
+                var _a;
+                (_a = AskAiModal_1.askAiModalRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
+            },
+            triggerIfInputFieldFocused: true,
+            keepRegisteredWhenNotHighestContext: true,
+            commandCtrlKey: true,
+            preventDefault: true,
+        });
         const cKey = keybindings.registerKeybinding({
             event: 'keypress',
             key: 't',
@@ -68,6 +81,7 @@ const GlobalKeybindings = () => {
             cKey.unregister();
             questionMark.unregister();
             cmdKKey.unregister();
+            cmdJKey.unregister();
         };
     }, [keybindings, setCheckerboard, setSelectedModal]);
     return null;

package/dist/components/GlobalPropsEditorUpdateButton.js

@@ -64,8 +64,12 @@ const GlobalPropsEditorUpdateButton = ({ compositionId, currentDefaultProps }) =
     }, [compositionId, currentDefaultProps, fastRefreshes]);
     const onReset = (0, react_1.useCallback)(() => {
         window.remotion_ignoreFastRefreshUpdate = null;
-        window.dispatchEvent(new CustomEvent(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY));
-    }, []);
+        window.dispatchEvent(new CustomEvent(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY, {
+            detail: {
+                resetUnsaved: compositionId,
+            },
+        }));
+    }, [compositionId]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), (0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { disabled: disabled, onClick: onClicked })] }));
 };
 exports.GlobalPropsEditorUpdateButton = GlobalPropsEditorUpdateButton;

package/dist/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.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: "G" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Go to 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: "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)("div", { style: title, children: "View" }), (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: "F" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Enter fullscreen" })] }), (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: "Esc" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Exit fullscreen" })] })] }), (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: "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 background" })] }), (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" })] }), ' ', (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Props Editor" }), (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: "S" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Save" })] })] })] })] }));
+    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: "G" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Go to 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: "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)("div", { style: title, children: "View" }), (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: "F" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Enter fullscreen" })] }), (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: "Esc" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Exit fullscreen" })] })] }), (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: "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 background" })] }), (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" })] }), ' ', (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Props Editor" }), (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: "S" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Save" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "AI" }), (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: "Ask AI" })] })] })] })] }));
 };
 exports.KeyboardShortcutsExplainer = KeyboardShortcutsExplainer;

package/dist/components/ModalContainer.d.ts

@@ -5,4 +5,5 @@ export declare const ModalContainer: React.FC<{
     readonly onEscape: () => void;
     readonly onOutsideClick: () => void;
     readonly children: React.ReactNode;
+    readonly noZIndex?: boolean;
 }>;

package/dist/components/ModalContainer.js

@@ -28,7 +28,7 @@ const panel = {
     color: 'white',
     margin: 'auto',
 };
-const ModalContainer = ({ children, onEscape, onOutsideClick }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onEscape, children: (0, jsx_runtime_1.jsx)("div", { style: panel, children: children }) }) }));
+const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: (0, jsx_runtime_1.jsx)("div", { style: panel, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;

package/dist/components/ModalHeader.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const ModalHeader: React.FC<{
     readonly title: string;
+    readonly onClose?: () => void;
 }>;

package/dist/components/ModalHeader.js

@@ -22,11 +22,11 @@ const icon = {
     height: 20,
     width: 20,
 };
-const ModalHeader = ({ title }) => {
+const ModalHeader = ({ title, onClose }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onPress = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: titleStyle, children: title }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: titleStyle, children: title }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onClose !== null && onClose !== void 0 ? onClose : onPress })] }));
 };
 exports.ModalHeader = ModalHeader;

package/dist/components/Modals.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const modals_1 = require("../state/modals");
+const AskAiModal_1 = require("./AskAiModal");
 const InstallPackage_1 = require("./InstallPackage");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
@@ -22,6 +23,6 @@ const Modals = ({ readOnlyStudio }) => {
         'connected';
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialChromeMode: modalContextType.initialChromeMode })), modalContextType &&
                 canRender &&
-                modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && ((0, jsx_runtime_1.jsx)(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
+                modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && ((0, jsx_runtime_1.jsx)(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), (0, jsx_runtime_1.jsx)(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/OptionsPanel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type OptionsSidebarPanel = 'input-props' | 'renders';
+type OptionsSidebarPanel = 'input-props' | 'renders' | 'visual-controls';
 export declare const persistSelectedOptionsSidebarPanel: (panel: OptionsSidebarPanel) => void;
 export declare const optionsSidebarTabs: React.RefObject<{
     selectRendersPanel: () => void;

package/dist/components/OptionsPanel.js

@@ -6,12 +6,14 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
+const VisualControls_1 = require("../visual-controls/VisualControls");
 const GlobalPropsEditorUpdateButton_1 = require("./GlobalPropsEditorUpdateButton");
 const DataEditor_1 = require("./RenderModal/DataEditor");
 const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const RenderQueue_1 = require("./RenderQueue");
 const RendersTab_1 = require("./RendersTab");
 const Tabs_1 = require("./Tabs");
+const VisualControlsContent_1 = require("./VisualControls/VisualControlsContent");
 const localStorageKey = 'remotion.sidebarPanel';
 const getSelectedPanel = (readOnlyStudio) => {
     if (readOnlyStudio) {
@@ -21,6 +23,9 @@ const getSelectedPanel = (readOnlyStudio) => {
     if (panel === 'renders') {
         return 'renders';
     }
+    if (panel === 'visual-controls') {
+        return 'visual-controls';
+    }
     return 'input-props';
 };
 const tabsContainer = {
@@ -35,6 +40,7 @@ const OptionsPanel = ({ readOnlyStudio }) => {
     const { props, updateProps, resetUnsaved } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const [saving, setSaving] = (0, react_1.useState)(false);
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const visualControlsTabActivated = (0, react_1.useContext)(VisualControls_1.VisualControlsTabActivatedContext);
     const container = (0, react_1.useMemo)(() => ({
         height: '100%',
         width: '100%',
@@ -52,6 +58,10 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         setPanel('renders');
         (0, exports.persistSelectedOptionsSidebarPanel)('renders');
     }, []);
+    const onVisualControlsSelected = (0, react_1.useCallback)(() => {
+        setPanel('visual-controls');
+        (0, exports.persistSelectedOptionsSidebarPanel)('visual-controls');
+    }, []);
     (0, react_1.useImperativeHandle)(exports.optionsSidebarTabs, () => {
         return {
             selectRendersPanel: () => {
@@ -98,7 +108,7 @@ const OptionsPanel = ({ readOnlyStudio }) => {
     }, [currentDefaultProps, composition]);
     const reset = (0, react_1.useCallback)((e) => {
         if (e.detail.resetUnsaved) {
-            resetUnsaved();
+            resetUnsaved(e.detail.resetUnsaved);
         }
     }, [resetUnsaved]);
     (0, react_1.useEffect)(() => {
@@ -107,6 +117,6 @@ const OptionsPanel = ({ readOnlyStudio }) => {
             window.removeEventListener(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY, reset);
         };
     }, [reset]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [composition ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)(GlobalPropsEditorUpdateButton_1.GlobalPropsEditorUpdateButton, { compositionId: composition.id, currentDefaultProps: currentDefaultProps })) : null] })) : null, readOnlyStudio ? null : ((0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' }))] }) }), panel === `input-props` && composition ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving, readOnlyStudio: readOnlyStudio }, composition.id)) : readOnlyStudio ? null : ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {}))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [visualControlsTabActivated ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'visual-controls', onClick: onVisualControlsSelected, children: "Controls" })) : null, composition ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)(GlobalPropsEditorUpdateButton_1.GlobalPropsEditorUpdateButton, { compositionId: composition.id, currentDefaultProps: currentDefaultProps })) : null] })) : null, readOnlyStudio ? null : ((0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' }))] }) }), panel === `input-props` && composition ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving, readOnlyStudio: readOnlyStudio }, composition.id)) : panel === 'visual-controls' && visualControlsTabActivated ? ((0, jsx_runtime_1.jsx)(VisualControlsContent_1.VisualControlsContent, {})) : readOnlyStudio ? null : ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/components/Preview.d.ts

@@ -10,5 +10,4 @@ export declare const VideoPreview: React.FC<{
     readonly contentDimensions: Dimensions | 'none' | null;
     readonly canvasContent: CanvasContent;
     readonly assetMetadata: AssetMetadata | null;
-    readonly isRefreshing: boolean;
 }>;

package/dist/components/Preview.js

@@ -68,17 +68,17 @@ const containerStyle = (options) => {
         backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
     };
 };
-const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata, isRefreshing, }) => {
+const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata }) => {
     if (assetMetadata && assetMetadata.type === 'not-found') {
         return ((0, jsx_runtime_1.jsx)("div", { style: centeredContainer, children: (0, jsx_runtime_1.jsx)("div", { style: label, children: "File does not exist" }) }));
     }
     if (contentDimensions === null) {
         return ((0, jsx_runtime_1.jsx)("div", { style: centeredContainer, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: 24 }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(CompWhenItHasDimensions, { contentDimensions: contentDimensions, canvasSize: canvasSize, canvasContent: canvasContent, assetMetadata: assetMetadata, isRefreshing: isRefreshing }));
+    return ((0, jsx_runtime_1.jsx)(CompWhenItHasDimensions, { contentDimensions: contentDimensions, canvasSize: canvasSize, canvasContent: canvasContent, assetMetadata: assetMetadata }));
 };
 exports.VideoPreview = VideoPreview;
-const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata, isRefreshing, }) => {
+const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
     const { size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { centerX, centerY, yCorrection, xCorrection, scale } = (0, react_1.useMemo)(() => {
         if (contentDimensions === 'none') {
@@ -114,7 +114,6 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
                 (0, exports.getPreviewFileType)(canvasContent.asset) === 'audio'
                 ? 'center'
                 : 'normal',
-            opacity: isRefreshing ? 0.5 : 1,
         };
     }, [
         contentDimensions,
@@ -124,7 +123,6 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
         previewSize.translation.y,
         centerY,
         canvasContent,
-        isRefreshing,
     ]);
     return ((0, jsx_runtime_1.jsx)("div", { style: outer, children: canvasContent.type === 'asset' ? ((0, jsx_runtime_1.jsx)(StaticFilePreview_1.StaticFilePreview, { assetMetadata: assetMetadata, currentAsset: canvasContent.asset })) : canvasContent.type === 'output' ? ((0, jsx_runtime_1.jsx)(RenderPreview_1.RenderPreview, { path: canvasContent.path, assetMetadata: assetMetadata })) : ((0, jsx_runtime_1.jsx)(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection })) }));
 };

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -62,7 +62,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
             commandCtrlKey: false,
             event: 'keydown',
             preventDefault: true,
-            // Input will be focused while sleection
+            // Input will be focused while selection
             triggerIfInputFieldFocused: true,
             keepRegisteredWhenNotHighestContext: false,
         });