@remotion/cli 3.3.81 → 3.3.83

package/dist/editor/components/RenderModal/SchemaEditor/create-zod-values.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createZodValues = void 0;
+const remotion_1 = require("remotion");
+const createZodValues = (schema) => {
+    if (!schema) {
+        throw new Error('Invalid zod schema');
+    }
+    const def = schema._def;
+    const typeName = def.typeName;
+    switch (typeName) {
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodString:
+            return '';
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodNumber:
+            return 0;
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodBigInt:
+            return BigInt(0);
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodBoolean:
+            return false;
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodNaN:
+            return NaN;
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodDate:
+            return new Date();
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodSymbol:
+            return Symbol('remotion');
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodUndefined:
+            return undefined;
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodNull:
+            return null;
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodAny:
+            throw new Error('Cannot create a value for type z.any()');
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodUnknown:
+            throw new Error('Cannot create a value for type z.unknown()');
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodNever:
+            throw new Error('Cannot create a value for type z.never()');
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodVoid:
+            return undefined;
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodObject: {
+            const shape = def.shape();
+            const keys = Object.keys(shape);
+            const returnValue = keys.reduce((existing, key) => {
+                existing[key] = (0, exports.createZodValues)(shape[key]);
+                return existing;
+            }, {});
+            return returnValue;
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodArray: {
+            return [(0, exports.createZodValues)(def.type)];
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodUnion: {
+            const firstOptions = def.options[0];
+            return firstOptions ? (0, exports.createZodValues)(firstOptions) : undefined;
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodDiscriminatedUnion: {
+            const options = def.options[0];
+            return (0, exports.createZodValues)(options);
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodLiteral: {
+            return def.value;
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodEffects: {
+            if (schema._def.description === remotion_1.Internals.REMOTION_COLOR_BRAND) {
+                return '#ffffff';
+            }
+            return (0, exports.createZodValues)(def.schema);
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodIntersection: {
+            const { left, right } = def;
+            const leftValue = (0, exports.createZodValues)(left);
+            if (typeof leftValue !== 'object') {
+                throw new Error('Cannot create value for type z.intersection: Left side is not an object');
+            }
+            const rightValue = (0, exports.createZodValues)(right);
+            if (typeof rightValue !== 'object') {
+                throw new Error('Cannot create value for type z.intersection: Right side is not an object');
+            }
+            return { ...leftValue, ...rightValue };
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodTuple: {
+            const items = def.items.map((item) => (0, exports.createZodValues)(item));
+            return items;
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodRecord: {
+            const values = (0, exports.createZodValues)(def.valueType);
+            return { key: values };
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodMap: {
+            const defType = def;
+            const values = (0, exports.createZodValues)(defType.valueType);
+            const key = (0, exports.createZodValues)(defType.keyType);
+            return new Map([[key, values]]);
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodLazy: {
+            const defType = def;
+            const type = defType.getter();
+            return (0, exports.createZodValues)(type);
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodSet: {
+            const defType = def;
+            const values = (0, exports.createZodValues)(defType.valueType);
+            return new Set([values]);
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodFunction: {
+            throw new Error('Cannot create a value for type function');
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodEnum: {
+            const { values } = def;
+            return values[0];
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodNativeEnum: {
+            return 0;
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodOptional: {
+            const defType = def;
+            const value = (0, exports.createZodValues)(defType.innerType);
+            return value;
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodNullable: {
+            const defType = def;
+            const value = (0, exports.createZodValues)(defType.innerType);
+            return value;
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodDefault: {
+            const defType = def;
+            return defType.defaultValue();
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodCatch: {
+            const defType = def;
+            const value = (0, exports.createZodValues)(defType.innerType);
+            return value;
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodPromise: {
+            const defType = def;
+            const value = (0, exports.createZodValues)(defType.type);
+            return Promise.resolve(value);
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodBranded: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const defType = def;
+            const value = (0, exports.createZodValues)(defType.type);
+            return value;
+        }
+        case remotion_1.z.ZodFirstPartyTypeKind.ZodPipeline: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const defType = def;
+            const value = (0, exports.createZodValues)(defType.out);
+            return value;
+        }
+        default:
+            throw new Error('Not implemented: ' + typeName);
+    }
+};
+exports.createZodValues = createZodValues;

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -3,11 +3,11 @@ import type { ApiRoutes } from '../../../preview-server/api-types';
 import type { RenderJob } from '../../../preview-server/render-queue/job';
 import type { RequiredChromiumOptions } from '../../../required-chromium-options';
 export declare const callApi: <Endpoint extends keyof ApiRoutes>(endpoint: Endpoint, body: ApiRoutes[Endpoint]["Request"]) => Promise<ApiRoutes[Endpoint]["Response"]>;
-export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, quality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }: {
+export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }: {
     compositionId: string;
     outName: string;
     imageFormat: StillImageFormat;
-    quality: number | null;
+    jpegQuality: number | null;
     frame: number;
     scale: number;
     verbose: boolean;
@@ -16,11 +16,11 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     envVariables: Record<string, string>;
     inputProps: unknown;
 }) => Promise<undefined>;
-export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }: {
+export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }: {
     compositionId: string;
     outName: string;
     imageFormat: VideoImageFormat;
-    quality: number | null;
+    jpegQuality: number | null;
     scale: number;
     verbose: boolean;
     codec: Codec;
@@ -57,3 +57,4 @@ export declare const openInFileExplorer: ({ directory }: {
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("../../../preview-server/render-queue/job").CancelRenderResponse>;
 export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown) => Promise<void>;
+export declare const canUpdateDefaultProps: (compositionId: string) => Promise<import("../../../preview-server/render-queue/job").CanUpdateDefaultPropsResponse>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateDefaultProps = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = exports.callApi = void 0;
+exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = exports.callApi = void 0;
 const date_serialization_1 = require("../RenderModal/SchemaEditor/date-serialization");
 const callApi = (endpoint, body) => {
     return new Promise((resolve, reject) => {
@@ -26,13 +26,13 @@ const callApi = (endpoint, body) => {
     });
 };
 exports.callApi = callApi;
-const addStillRenderJob = ({ compositionId, outName, imageFormat, quality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }) => {
+const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }) => {
     return (0, exports.callApi)('/api/render', {
         compositionId,
         type: 'still',
         outName,
         imageFormat,
-        quality,
+        jpegQuality,
         frame,
         scale,
         verbose,
@@ -43,13 +43,13 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, quality, frame
     });
 };
 exports.addStillRenderJob = addStillRenderJob;
-const addVideoRenderJob = ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }) => {
+const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }) => {
     return (0, exports.callApi)('/api/render', {
         compositionId,
         type: 'video',
         outName,
         imageFormat,
-        quality,
+        jpegQuality,
         scale,
         verbose,
         codec,
@@ -112,3 +112,9 @@ const updateDefaultProps = (compositionId, defaultProps) => {
     });
 };
 exports.updateDefaultProps = updateDefaultProps;
+const canUpdateDefaultProps = (compositionId) => {
+    return (0, exports.callApi)('/api/can-update-default-props', {
+        compositionId,
+    });
+};
+exports.canUpdateDefaultProps = canUpdateDefaultProps;

package/dist/editor/components/RenderToolbarIcon.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const get_default_out_name_1 = require("../../get-default-out-name");
 const get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
 const client_id_1 = require("../helpers/client-id");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
 const ControlButton_1 = require("./ControlButton");
@@ -20,8 +21,9 @@ const RenderButton = () => {
             },
         };
     }, []);
+    const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
     const tooltip = type === 'connected'
-        ? 'Export the current composition'
+        ? 'Export the current composition ' + shortcut
         : 'Connect to the preview server to render';
     const video = remotion_1.Internals.useVideo();
     const frame = (0, remotion_1.useCurrentFrame)();
@@ -50,7 +52,7 @@ const RenderButton = () => {
                 defaultExtension: isVideo ? 'mp4' : 'png',
                 type: 'asset',
             }),
-            initialQuality: defaults.quality,
+            initialJpegQuality: defaults.jpegQuality,
             initialScale: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1,
             initialVerbose: defaults.logLevel === 'verbose',
             initialVideoCodecForAudioTab: initialAudioCodec,

package/dist/editor/components/RendersTab.js

@@ -11,14 +11,14 @@ const row = {
     display: 'flex',
     flexDirection: 'row',
     fontSize: 14,
-    justifyContent: 'center',
     color: 'inherit',
     alignItems: 'center',
+    flex: 1,
 };
 const badge = {
     height: 16,
     width: 16,
-    borderRadius: 8,
+    borderRadius: 3,
     fontSize: 10,
     display: 'inline-flex',
     justifyContent: 'center',
@@ -38,6 +38,6 @@ const RendersTab = ({ selected, onClick }) => {
             borderColor: colors_1.LIGHT_TEXT,
         };
     }, [failedJobs]);
-    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: selected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: selected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
 };
 exports.RendersTab = RendersTab;

package/dist/editor/components/RightPanel.js

@@ -4,7 +4,6 @@ exports.RightPanel = exports.rightSidebarTabs = exports.persistSelectedPanel = v
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const colors_1 = require("../helpers/colors");
 const RenderModalData_1 = require("./RenderModal/RenderModalData");
 const RenderQueue_1 = require("./RenderQueue");
 const RendersTab_1 = require("./RendersTab");
@@ -19,8 +18,6 @@ const container = {
 const PropsEditor = ({ composition }) => {
     var _a;
     const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    // TODO: Warn if inputProps were specified to the CLI, then
-    // they take priority over defaultProps
     const setInputProps = (0, react_1.useCallback)((newProps) => {
         updateProps({
             id: composition.id,
@@ -28,7 +25,7 @@ const PropsEditor = ({ composition }) => {
             newProps: newProps,
         });
     }, [composition.defaultProps, composition.id, updateProps]);
-    return ((0, jsx_runtime_1.jsx)(RenderModalData_1.RenderModalData, { composition: composition, inputProps: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps, setInputProps: setInputProps, compact: true, showSaveButton: true }));
+    return ((0, jsx_runtime_1.jsx)(RenderModalData_1.RenderModalData, { composition: composition, inputProps: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps, setInputProps: setInputProps, compact: true, mayShowSaveButton: true }));
 };
 const localStorageKey = 'remotion.sidebarPanel';
 const getSelectedPanel = () => {
@@ -38,9 +35,7 @@ const getSelectedPanel = () => {
     }
     return 'input-props';
 };
-const tabsContainer = {
-    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
-};
+const tabsContainer = {};
 const persistSelectedPanel = (panel) => {
     localStorage.setItem(localStorageKey, panel);
 };
@@ -76,6 +71,6 @@ const RightPanel = () => {
     if (composition === null) {
         return null;
     }
-    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: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, children: "Default Props" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(PropsEditor, { composition: composition }))] }));
+    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: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, children: "Props" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(PropsEditor, { composition: composition }))] }));
 };
 exports.RightPanel = RightPanel;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SetTimelineInOutProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/SetTimelineInOutProvider.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SetTimelineInOutProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const in_out_1 = require("../state/in-out");
+const SetTimelineInOutProvider = ({ children }) => {
+    const [inAndOutFrames, setInAndOutFrames] = (0, react_1.useState)({
+        inFrame: null,
+        outFrame: null,
+    });
+    const setTimelineInOutContextValue = (0, react_1.useMemo)(() => {
+        return {
+            setInAndOutFrames,
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: inAndOutFrames, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: children }) }));
+};
+exports.SetTimelineInOutProvider = SetTimelineInOutProvider;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SidebarCollapserControls: React.FC<{}>;

package/dist/editor/components/SidebarCollapserControls.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarCollapserControls = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const sidebar_1 = require("../state/sidebar");
+const InlineAction_1 = require("./InlineAction");
+const layout_1 = require("./layout");
+const TopPanel_1 = require("./TopPanel");
+const style = {
+    width: 16,
+    height: 16,
+    border: '1px solid white',
+    borderRadius: 3,
+    position: 'relative',
+};
+const SidebarCollapserControls = () => {
+    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const leftSidebarStatus = (0, TopPanel_1.useResponsiveSidebarStatus)();
+    const leftIcon = (0, react_1.useMemo)(() => {
+        return {
+            width: '35%',
+            height: '100%',
+            borderRight: '1px solid white',
+            background: leftSidebarStatus === 'expanded' ? 'white' : 'transparent',
+        };
+    }, [leftSidebarStatus]);
+    const rightIcon = (0, react_1.useMemo)(() => {
+        return {
+            width: '35%',
+            height: '100%',
+            right: 0,
+            position: 'absolute',
+            borderLeft: '1px solid white',
+            background: sidebarCollapsedStateRight === 'expanded' ? 'white' : 'transparent',
+        };
+    }, [sidebarCollapsedStateRight]);
+    const toggleLeft = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({
+            left: (s) => {
+                if (s === 'responsive') {
+                    return leftSidebarStatus === 'collapsed' ? 'expanded' : 'collapsed';
+                }
+                return s === 'collapsed' ? 'expanded' : 'collapsed';
+            },
+            right: null,
+        });
+    }, [leftSidebarStatus, setSidebarCollapsedState]);
+    const toggleRight = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({
+            right: (s) => (s === 'collapsed' ? 'expanded' : 'collapsed'),
+            left: null,
+        });
+    }, [setSidebarCollapsedState]);
+    const toggleBoth = (0, react_1.useCallback)(() => {
+        if (sidebarCollapsedStateRight === leftSidebarStatus) {
+            setSidebarCollapsedState({
+                left: (s) => {
+                    if (s === 'responsive') {
+                        return leftSidebarStatus === 'collapsed' ? 'expanded' : 'collapsed';
+                    }
+                    return s === 'collapsed' ? 'expanded' : 'collapsed';
+                },
+                right: (s) => (s === 'collapsed' ? 'expanded' : 'collapsed'),
+            });
+        }
+        else if (sidebarCollapsedStateRight === 'expanded') {
+            toggleRight();
+        }
+        else if (leftSidebarStatus === 'expanded') {
+            toggleLeft();
+        }
+    }, [
+        leftSidebarStatus,
+        setSidebarCollapsedState,
+        sidebarCollapsedStateRight,
+        toggleLeft,
+        toggleRight,
+    ]);
+    (0, react_1.useEffect)(() => {
+        const left = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'b',
+            commandCtrlKey: true,
+            callback: toggleLeft,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+        const right = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'j',
+            commandCtrlKey: true,
+            callback: toggleRight,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+        const zen = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'g',
+            commandCtrlKey: true,
+            callback: toggleBoth,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+        return () => {
+            left.unregister();
+            right.unregister();
+            zen.unregister();
+        };
+    }, [keybindings, toggleBoth, toggleLeft, toggleRight]);
+    const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? 'Toggle Left Sidebar'
+        : `Toggle Left Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+B)`;
+    const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? 'Toggle Right Sidebar'
+        : `Toggle Right Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+J)`;
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleLeft, children: (0, jsx_runtime_1.jsx)("div", { style: style, title: toggleLeftTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: leftIcon }) }) }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleRight, children: (0, jsx_runtime_1.jsx)("div", { style: style, title: toggleRightTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: rightIcon }) }) })] }));
+};
+exports.SidebarCollapserControls = SidebarCollapserControls;

package/dist/editor/components/SizeSelector.js

@@ -84,7 +84,7 @@ const SizeSelector = () => {
                 },
                 type: 'item',
                 value: newSize.size,
-                keyHint: newSize.size === 1 ? '0' : null,
+                keyHint: newSize.size === 'auto' ? '0' : null,
                 leftItem: String(size.size) === String(newSize.size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,

package/dist/editor/components/Tabs/index.d.ts

@@ -3,6 +3,7 @@ export declare const Tabs: React.FC<{
     children: React.ReactNode;
     style?: React.CSSProperties;
 }>;
+export declare const selectorButton: React.CSSProperties;
 export declare const Tab: React.FC<{
     children: React.ReactNode;
     onClick: React.MouseEventHandler<HTMLButtonElement>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tab = exports.Tabs = void 0;
+exports.Tab = exports.selectorButton = exports.Tabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
@@ -19,11 +19,16 @@ const Tabs = ({ children, style }) => {
     return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
 };
 exports.Tabs = Tabs;
-const selectorButton = {
+exports.selectorButton = {
     border: 'none',
     flex: 1,
     padding: 8,
+    paddingLeft: 16,
+    display: 'flex',
+    flexDirection: 'row',
     fontSize: 14,
+    color: 'inherit',
+    alignItems: 'center',
 };
 const Tab = ({ children, onClick, style, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
@@ -36,13 +41,15 @@ const Tab = ({ children, onClick, style, selected }) => {
     }, []);
     const definiteStyle = (0, react_1.useMemo)(() => {
         return {
-            ...selectorButton,
+            ...exports.selectorButton,
             backgroundColor: selected
-                ? colors_1.SELECTED_BACKGROUND
+                ? 'transparent'
                 : hovered
                     ? colors_1.CLEAR_HOVER
-                    : 'transparent',
+                    : colors_1.INPUT_BACKGROUND,
             color: selected ? 'white' : colors_1.LIGHT_TEXT,
+            borderTop: selected ? '2px solid var(--blue)' : '2px solid transparent',
+            boxShadow: selected ? 'none' : undefined,
             ...style,
         };
     }, [hovered, selected, style]);

package/dist/editor/components/Tabs/vertical.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const VerticalTabs: React.FC<{
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}>;
+export declare const selectorButton: React.CSSProperties;
+export declare const VerticalTab: React.FC<{
+    children: React.ReactNode;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    style?: React.CSSProperties;
+    selected: boolean;
+}>;

package/dist/editor/components/Tabs/vertical.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalTab = exports.selectorButton = exports.VerticalTabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const tabsContainer = {
+    display: 'flex',
+    flexDirection: 'row',
+};
+const VerticalTabs = ({ children, style }) => {
+    const definiteStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...tabsContainer,
+            ...style,
+        };
+    }, [style]);
+    return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
+};
+exports.VerticalTabs = VerticalTabs;
+exports.selectorButton = {
+    border: 'none',
+    flex: 1,
+    padding: 8,
+    paddingLeft: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 14,
+    color: 'inherit',
+    alignItems: 'center',
+};
+const VerticalTab = ({ children, onClick, style, selected }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const definiteStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...exports.selectorButton,
+            backgroundColor: selected
+                ? colors_1.SELECTED_BACKGROUND
+                : hovered
+                    ? colors_1.CLEAR_HOVER
+                    : 'transparent',
+            color: selected ? 'white' : colors_1.LIGHT_TEXT,
+            boxShadow: selected ? 'none' : undefined,
+            ...style,
+        };
+    }, [hovered, selected, style]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+};
+exports.VerticalTab = VerticalTab;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ZoomGesturesProvider: React.FC<{
+    children: React.ReactNode;
+}>;