@remotion/studio 4.0.515 → 4.0.516

package/dist/components/Modals.js

@@ -14,7 +14,6 @@ const AskAiModal_1 = require("./AskAiModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
 const FixComputedValueModal_1 = require("./FixComputedValueModal");
-const InstallPackage_1 = require("./InstallPackage");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
@@ -53,10 +52,12 @@ const Modals = ({ readOnlyStudio }) => {
             });
         });
     }, [isBrowserStudio, setSelectedModal, subscribeToEvent]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), !isBrowserStudio &&
-                modalContextType &&
-                modalContextType.type === 'settings' && (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType &&
+                modalContextType.type === 'settings' &&
+                (!isBrowserStudio ||
+                    modalContextType.initialTab === 'packages' ||
+                    modalContextType.initialTab === 'shortcuts') ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, 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, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, 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, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/NewComposition/CodemodFooter.d.ts

@@ -9,7 +9,6 @@ export declare const CodemodFooter: React.FC<{
     readonly codemod: RecastCodemod;
     readonly stack: string | null;
     readonly loadingNotification: React.ReactNode | null;
-    readonly successNotification: React.ReactNode;
     readonly errorNotification: string;
     readonly genericSubmitLabel: string;
     readonly submitLabel: (options: {

package/dist/components/NewComposition/CodemodFooter.js

@@ -21,7 +21,7 @@ const CodemodFooterPresentation = ({ codemodStatus, disabled, genericSubmitLabel
                 ] })
         ] }));
 };
-const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, applyCodemod, applyCodemodForPreview, }) => {
+const CodemodFooter = ({ codemod, stack, valid, loadingNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, applyCodemod, applyCodemodForPreview, }) => {
     var _a;
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
@@ -52,12 +52,7 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
                 }
                 return;
             }
-            if (notification) {
-                notification.replaceContent(successNotification, 2000);
-            }
-            else {
-                (0, NotificationCenter_1.showNotification)(successNotification, 2000);
-            }
+            notification === null || notification === void 0 ? void 0 : notification.dismiss();
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         })
             .catch((err) => {
@@ -75,7 +70,6 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
         loadingNotification,
         onSuccess,
         setSelectedModal,
-        successNotification,
         symbolicatedStack,
     ]);
     const getCanApplyCodemod = (0, react_1.useCallback)(async (signal) => {

package/dist/components/NewComposition/DeleteComposition.js

@@ -39,7 +39,7 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
                             jsx_runtime_1.jsx("br", {}),
                             "The associated ",
                             jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "component" }),
-                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
                                 codemod,
                                 dryRun: false,
                                 signal,

package/dist/components/NewComposition/DeleteFolder.js

@@ -33,7 +33,7 @@ const DeleteFolder = ({ folderName, parentName, stack }) => {
                     jsx_runtime_1.jsxs("div", { style: content, children: ["Do you want to delete the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "Folder" }),
                             " with ID ", '"', folderId, '"', "?",
                             jsx_runtime_1.jsx("br", {}),
-                            "The compositions and nested folders inside it will stay in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete folder`, loadingNotification: 'Deleting folder', successNotification: `Deleted folder ${folderId}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: stack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                            "The compositions and nested folders inside it will stay in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete folder`, loadingNotification: 'Deleting folder', genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: stack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
                                 codemod,
                                 dryRun: false,
                                 signal,

package/dist/components/NewComposition/DuplicateComposition.js

@@ -203,7 +203,7 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                                         ] })
                                 ] })) : null, type === 'composition' && hadDurationDefined ? (jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
-                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess, applyCodemod: ({ signal, symbolicatedStack }) => (0, duplicate_composition_api_1.duplicateComposition)({
+                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess, applyCodemod: ({ signal, symbolicatedStack }) => (0, duplicate_composition_api_1.duplicateComposition)({
                                 codemod,
                                 dryRun: false,
                                 signal,

package/dist/components/NewComposition/InputDragger.js

@@ -53,6 +53,15 @@ exports.inputDraggerContainerStyle = {
     outline: 'none',
     padding: '4px 6px',
 };
+const compactInputDraggerStyle = {
+    fontSize: 12,
+    lineHeight: '16px',
+    padding: '0 6px',
+};
+const compactInputDraggerContainerStyle = {
+    ...exports.inputDraggerContainerStyle,
+    ...compactInputDraggerStyle,
+};
 const isInt = (num) => {
     return num % 1 === 0;
 };
@@ -295,7 +304,7 @@ const deriveInputDraggerValueDiff = ({ dragSensitivity, step, xDistance, }) => {
     return (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step * dragSensitivity, 0, 0, 0, step * dragSensitivity]);
 };
 exports.deriveInputDraggerValueDiff = deriveInputDraggerValueDiff;
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), formatterStyle, formatterSubtitle, formatterSubtitleStyle, buttonStyle, status, rightAlign, small, allowStepMismatch = false, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), formatterStyle, formatterSubtitle, formatterSubtitleStyle, buttonStyle, style: inputStyle, status, rightAlign, small, allowStepMismatch = false, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
@@ -314,6 +323,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         userSelect: 'none',
         WebkitUserSelect: 'none',
         fontSize: small ? 12 : 14,
+        lineHeight: small ? '16px' : undefined,
         fontVariantNumeric: 'tabular-nums',
         ...formatterStyle,
     }), [dragging, formatterStyle, small]);
@@ -484,11 +494,24 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         }
     }, [inputFallback]);
     if (inputFallback) {
-        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyDown: onInputKeyDown, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: validationStep, defaultValue: value, status: status, rightAlign: rightAlign, small: small, ...props, type: "text" }) }));
+        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyDown: onInputKeyDown, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: validationStep, defaultValue: value, status: status, rightAlign: rightAlign, small: small, ...props, style: small
+                    ? {
+                        ...compactInputDraggerStyle,
+                        display: 'block',
+                        ...inputStyle,
+                    }
+                    : inputStyle, type: "text" }) }));
     }
     return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], className: '__remotion_input_dragger', style: buttonStyle
-            ? { ...exports.inputDraggerContainerStyle, ...buttonStyle }
-            : exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: [
+            ? {
+                ...(small
+                    ? compactInputDraggerContainerStyle
+                    : exports.inputDraggerContainerStyle),
+                ...buttonStyle,
+            }
+            : small
+                ? compactInputDraggerContainerStyle
+                : exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }), formatterSubtitle ? (jsx_runtime_1.jsx("span", { style: formatterSubtitleStyle, children: formatterSubtitle(value) })) : null] }));
 };
 exports.InputDragger = react_1.default.forwardRef(InputDraggerForwardRefFn);

package/dist/components/NewComposition/NewComposition.js

@@ -157,7 +157,7 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
                                 ] }), jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
                                 ] })
-                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
                                 signal,
                                 symbolicatedStack,
                             }), applyCodemodForPreview: null, fallbackToRootFile: true }) })

package/dist/components/NewComposition/NewFolder.js

@@ -4,7 +4,6 @@ exports.NewFolder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const get_folder_id_1 = require("../../helpers/get-folder-id");
 const validate_new_folder_name_1 = require("../../helpers/validate-new-folder-name");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
@@ -63,7 +62,6 @@ const NewFolder = ({ parentName, stack }) => {
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
-    const folderId = (0, get_folder_id_1.getFolderId)({ folderName: newName, parentName });
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New folder" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsxs("div", { style: content, children: [parentName ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
@@ -74,7 +72,7 @@ const NewFolder = ({ parentName, stack }) => {
                                                         jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: folderNameErrMessage, type: "error" })
                                                     ] })) : null] }) })
                                 ] })
-                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Creating folder...', errorNotification: 'Could not create folder', successNotification: `Created folder ${folderId}`, genericSubmitLabel: 'Add to root file', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, fallbackToRootFile: true, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Creating folder...', errorNotification: 'Could not create folder', genericSubmitLabel: 'Add to root file', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, fallbackToRootFile: true, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
                                 codemod,
                                 dryRun: false,
                                 signal,

package/dist/components/NewComposition/RenameComposition.js

@@ -59,7 +59,7 @@ const RenameCompositionLoaded = () => {
                                             jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
-                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => renameComposition({
+                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => renameComposition({
                                 newCompositionId: newId,
                                 signal,
                                 symbolicatedStack,

package/dist/components/NewComposition/RenameFolder.js

@@ -62,7 +62,7 @@ const RenameFolder = ({ folderName, parentName, stack }) => {
                                             jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), folderNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: folderNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
-                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming folder...', errorNotification: 'Could not rename folder', successNotification: `Renamed folder to ${newName}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming folder...', errorNotification: 'Could not rename folder', genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
                                 codemod,
                                 dryRun: false,
                                 signal,

package/dist/components/NewComposition/use-rename-static-file.js

@@ -78,7 +78,7 @@ const useRenameStaticFile = ({ relativePath, staticFiles, }) => {
                 setCanvasContent({ type: 'asset', asset: newRelativePath });
                 (0, url_state_1.replaceUrl)(`/assets/${newRelativePath}`);
             }
-            notification.replaceContent(`Renamed to ${newRelativePath}`, 2000);
+            notification.dismiss();
             return true;
         }
         catch (err) {

package/dist/components/Notifications/NotificationCenter.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 type CreatedNotification = {
+    dismiss: () => void;
     replaceContent: (newContent: React.ReactNode, durationInMs: number | null) => void;
 };
 export declare const showNotification: (content: React.ReactNode, durationInMs: number | null) => CreatedNotification;

package/dist/components/Notifications/NotificationCenter.js

@@ -45,6 +45,11 @@ const NotificationCenter = () => {
             return [...previousNotifications, notification];
         });
         return {
+            dismiss: () => {
+                setNotifications((oldNotifications) => {
+                    return oldNotifications.filter((notificationToFilter) => notificationToFilter.id !== notification.id);
+                });
+            },
             replaceContent: (newContent, durationInMs) => {
                 setNotifications((oldNotifications) => {
                     return oldNotifications.map((notificationToMap) => {

package/dist/components/OptionsPanel.js

@@ -12,6 +12,7 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const options_sidebar_tabs_1 = require("./options-sidebar-tabs");
 const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const extract_enum_json_paths_1 = require("./RenderModal/SchemaEditor/extract-enum-json-paths");
+const infer_zod_schema_from_value_1 = require("./RenderModal/SchemaEditor/infer-zod-schema-from-value");
 const SchemaResetButton_1 = require("./RenderModal/SchemaEditor/SchemaResetButton");
 const RenderQueue_1 = require("./RenderQueue");
 const actions_1 = require("./RenderQueue/actions");
@@ -80,21 +81,17 @@ const OptionsPanel = ({ readOnlyStudio }) => {
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     const noComposition = !composition;
     const schema = (0, react_1.useMemo)(() => {
-        if (!z) {
-            return 'no-zod';
-        }
+        var _a;
         if (noComposition) {
             return 'no-composition';
         }
-        if (!composition.schema) {
-            return 'no-schema';
-        }
-        if (!(typeof composition.schema.safeParse ===
-            'function')) {
-            throw new Error('A value which is not a Zod schema was passed to `schema`');
-        }
-        return composition.schema;
-    }, [composition === null || composition === void 0 ? void 0 : composition.schema, noComposition, z]);
+        return (0, infer_zod_schema_from_value_1.resolveCompositionSchema)({
+            explicitSchema: composition.schema,
+            defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
+            z,
+            zodTypes,
+        });
+    }, [composition, noComposition, z, zodTypes]);
     const currentDefaultProps = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (composition === null) {

package/dist/components/PreviewToolbar.js

@@ -23,6 +23,7 @@ const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
 const PlayPause_1 = require("./PlayPause");
 const PreviewToolbarOverflowButton_1 = require("./PreviewToolbarOverflowButton");
 const RenderButton_1 = require("./RenderButton");
+const RulersAndGuidesToggle_1 = require("./RulersAndGuidesToggle");
 const SizeSelector_1 = require("./SizeSelector");
 const SnappingToggle_1 = require("./SnappingToggle");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
@@ -86,9 +87,11 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                             jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCompositionControls: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition', playbackRate: playbackRate, setPlaybackRate: setPlaybackRate, loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                         ] })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) })) : null] }), jsx_runtime_1.jsx(layout_1.Flex, {}), isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx("div", { style: centeredPlayButton, children: playPause })) : null, isVideoComposition && !isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.75 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
-                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), readOnlyStudio || isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RulersAndGuidesToggle_1.RulersAndGuidesToggle, {}) })
+                        ] })), readOnlyStudio || isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) })
-                        ] }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
+                        ] }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", narrow: isMobileLayout }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
         ] }));

package/dist/components/PreviewToolbarOverflowButton.js

@@ -8,7 +8,9 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const Checkmark_1 = require("../icons/Checkmark");
 const ellipsis_1 = require("../icons/ellipsis");
 const checkerboard_1 = require("../state/checkerboard");
+const editor_guides_1 = require("../state/editor-guides");
 const editor_outlines_1 = require("../state/editor-outlines");
+const editor_rulers_1 = require("../state/editor-rulers");
 const InlineDropdown_1 = require("./InlineDropdown");
 const LoopToggle_1 = require("./LoopToggle");
 const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
@@ -21,6 +23,8 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
     const keyboardShortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
     const { items: previewSizeItems, selectedId: selectedPreviewSize, zoomable, } = (0, SizeSelector_1.usePreviewSizeMenuItems)();
     const { items: playbackRateItems, selectedId: selectedPlaybackRate } = (0, PlaybackRateSelector_1.usePlaybackRateMenuItems)({ playbackRate, setPlaybackRate });
     const iconStyle = (0, react_1.useMemo)(() => {
@@ -105,6 +109,28 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 subMenu: null,
                 quickSwitcherLabel: null,
             });
+            items.push({
+                type: 'item',
+                id: 'rulers',
+                label: 'Rulers',
+                value: 'rulers',
+                onClick: () => setEditorShowRulers((current) => !current),
+                keyHint: null,
+                leftItem: editorShowRulers ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            });
+            items.push({
+                type: 'item',
+                id: 'guides',
+                label: 'Guides',
+                value: 'guides',
+                onClick: () => setEditorShowGuides((current) => !current),
+                keyHint: null,
+                leftItem: editorShowGuides ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            });
         }
         if (showFullscreen) {
             items.push({
@@ -131,9 +157,13 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
         showCompositionControls,
         loop,
         checkerboard,
+        editorShowGuides,
         editorShowOutlines,
+        editorShowRulers,
         setCheckerboard,
+        setEditorShowGuides,
         setEditorShowOutlines,
+        setEditorShowRulers,
         setLoop,
         zoomable,
         keyboardShortcutsDisabled,

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -8,14 +8,14 @@ const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
 const quickSwitcherArea = {
-    padding: '4px 0 4px 4px',
+    padding: '4px 4px 4px 8px',
     borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
     overflowY: 'auto',
 };
 const quickSwitcherTrigger = {
     backgroundColor: colors_1.WHITE_ALPHA_06,
     borderRadius: 4,
-    padding: '4px 10px',
+    padding: '4px 10px 4px 12px',
     color: colors_1.LIGHT_TEXT,
     fontSize: 12,
     cursor: 'pointer',

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -12,14 +12,12 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const use_menu_structure_1 = require("../../helpers/use-menu-structure");
 const modals_1 = require("../../state/modals");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
-const KeyboardShortcutsExplainer_1 = require("../KeyboardShortcutsExplainer");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const RemInput_1 = require("../NewComposition/RemInput");
 const use_select_asset_1 = require("../use-select-asset");
 const use_static_files_1 = require("../use-static-files");
 const algolia_search_1 = require("./algolia-search");
-const AlgoliaCredit_1 = require("./AlgoliaCredit");
 const asset_search_1 = require("./asset-search");
 const fuzzy_search_1 = require("./fuzzy-search");
 const NoResults_1 = require("./NoResults");
@@ -66,6 +64,14 @@ const contentWithoutModeSelector = {
     ...content,
     paddingTop: 16,
 };
+const container = {
+    width: 400,
+    maxWidth: 'calc(100vw - 40px)',
+};
+const results = {
+    overflowY: 'auto',
+    height: 300,
+};
 const stripQuery = (query) => {
     if (query.startsWith('$') || query.startsWith('>') || query.startsWith('?')) {
         return query.substring(1).trim();
@@ -151,8 +157,8 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         if (mode === 'commands') {
             return (0, fuzzy_search_1.fuzzySearch)(actualQuery, menuActions);
         }
-        if (mode === 'docs' && docResults.type === 'results') {
-            return docResults.results;
+        if (mode === 'docs') {
+            return docResults.type === 'results' ? docResults.results : [];
         }
         if (mode === 'assets') {
             const assetResults = (0, fuzzy_search_1.fuzzySearch)(assetSearch.query, assetSearch.assets.map((asset) => {
@@ -341,8 +347,8 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         setDocResults({ type: 'initial' });
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
-    const showKeyboardShortcuts = mode === 'docs' && actualQuery.trim() === '';
     const showSearchLoadingState = mode === 'docs' && docResults.type === 'loading';
+    const showEmptyDocSearch = mode === 'docs' && actualQuery.trim() === '';
     const placeholder = mode === 'assets'
         ? 'Search assets...'
         : mode === 'commands'
@@ -350,34 +356,12 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
             : mode === 'docs'
                 ? 'Search documentation...'
                 : 'Search compositions...';
-    const container = (0, react_1.useMemo)(() => {
-        return {
-            width: showKeyboardShortcuts ? 800 : 400,
-            maxWidth: 'calc(100vw - 40px)',
-        };
-    }, [showKeyboardShortcuts]);
-    const results = (0, react_1.useMemo)(() => {
-        if (showKeyboardShortcuts) {
-            return {
-                maxHeight: 600,
-                overflowY: 'auto',
-            };
-        }
-        return {
-            overflowY: 'auto',
-            height: 300,
-        };
-    }, [showKeyboardShortcuts]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [assetSelection === null && compositionSelection === null && (jsx_runtime_1.jsxs("div", { style: modeSelector, children: [
                     jsx_runtime_1.jsx("button", { onClick: onCompositionsSelected, style: mode === 'compositions' ? modeActive : modeInactive, type: "button", children: "Compositions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onAssetsSelected, style: mode === 'assets' ? modeActive : modeInactive, type: "button", children: "Assets" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onActionsSelected, style: mode === 'commands' ? modeActive : modeInactive, type: "button", children: "Actions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onDocSearchSelected, style: mode === 'docs' ? modeActive : modeInactive, type: "button", children: "Documentation" })
-                ] })), jsx_runtime_1.jsxs("div", { style: assetSelection === null && compositionSelection === null
+                ] })), jsx_runtime_1.jsx("div", { style: assetSelection === null && compositionSelection === null
                     ? content
-                    : contentWithoutModeSelector, children: [
-                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: input, autoFocus: true, status: "ok", value: state.query, onChange: onTextChange, placeholder: placeholder, rightAlign: false }), showKeyboardShortcuts ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }),
-                            " ",
-                            jsx_runtime_1.jsx(AlgoliaCredit_1.AlgoliaCredit, {})
-                        ] })) : null] }), jsx_runtime_1.jsx("div", { style: results, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: showKeyboardShortcuts ? (jsx_runtime_1.jsx(KeyboardShortcutsExplainer_1.KeyboardShortcutsExplainer, {})) : showSearchLoadingState ? null : resultsArray.length === 0 ? (jsx_runtime_1.jsx(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : (resultsArray.map((result, i) => {
+                    : contentWithoutModeSelector, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: input, autoFocus: true, status: "ok", value: state.query, onChange: onTextChange, placeholder: placeholder, rightAlign: false }) }), jsx_runtime_1.jsx("div", { style: results, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: showEmptyDocSearch ||
+                    showSearchLoadingState ? null : resultsArray.length === 0 ? (jsx_runtime_1.jsx(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : (resultsArray.map((result, i) => {
                     return (jsx_runtime_1.jsx(QuickSwitcherResult_1.QuickSwitcherResult, { selected: selectedIndexRounded === i, result: result }, result.id));
                 })) })
         ] }));