@remotion/studio 4.0.515 → 4.0.517

package/dist/components/Preview.js

@@ -2,15 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const media_1 = require("@remotion/media");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
 const ErrorLoader_1 = require("../error-overlay/remotion-overlay/ErrorLoader");
+const add_asset_cache_bust_1 = require("../helpers/add-asset-cache-bust");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
 const colors_1 = require("../helpers/colors");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
+const audio_1 = require("../icons/audio");
 const checkerboard_1 = require("../state/checkerboard");
+const editor_pixel_grid_1 = require("../state/editor-pixel-grid");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const RenderPreview_1 = require("./RenderPreview");
 const SelectedOutlineOverlay_1 = require("./SelectedOutlineOverlay");
@@ -38,9 +43,13 @@ const assetMetadataErrorContainer = {
     overflowY: 'auto',
 };
 const checkerboardSize = 49;
+const PIXEL_GRID_MIN_SCALE = 4;
 const containerStyle = (options) => {
     return {
         transform: `scale(${options.scale})`,
+        // Avoid the background bleeding through opaque compositions at fractional
+        // scales due to Chromium compositing the child and background together.
+        willChange: 'transform',
         marginLeft: options.xCorrection,
         marginTop: options.yCorrection,
         width: options.width,
@@ -54,6 +63,20 @@ const containerStyle = (options) => {
         backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
     };
 };
+const PixelGrid = ({ scale }) => {
+    const { editorShowPixelGrid } = (0, react_1.useContext)(editor_pixel_grid_1.EditorShowPixelGridContext);
+    if (!editorShowPixelGrid || scale < PIXEL_GRID_MIN_SCALE) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("div", { "aria-hidden": "true", className: "css-reset", "data-testid": "pixel-grid", style: {
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+            opacity: 0.35,
+            backgroundImage: `linear-gradient(to right, ${colors_1.RULER_COLOR} 1px, transparent 1px), linear-gradient(to bottom, ${colors_1.RULER_COLOR} 1px, transparent 1px)`,
+            backgroundSize: `${scale}px ${scale}px`,
+        } }));
+};
 const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata, onRetryAssetMetadata, }) => {
     if (assetMetadata && assetMetadata.type === 'not-found') {
         return (jsx_runtime_1.jsx("div", { style: centeredContainer, children: jsx_runtime_1.jsx("div", { style: label, children: "File does not exist" }) }));
@@ -61,7 +84,8 @@ const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetad
     if (assetMetadata && assetMetadata.type === 'metadata-error') {
         return (jsx_runtime_1.jsx("div", { style: assetMetadataErrorContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: false, error: assetMetadata.error, onRetry: onRetryAssetMetadata !== null && onRetryAssetMetadata !== void 0 ? onRetryAssetMetadata : null, calculateMetadata: false }, assetMetadata.error.stack) }));
     }
-    if (contentDimensions === null) {
+    if (contentDimensions === null ||
+        (canvasContent.type !== 'composition' && assetMetadata === null)) {
         return (jsx_runtime_1.jsx("div", { style: centeredContainer, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 24 }) }));
     }
     return (jsx_runtime_1.jsx(CompWhenItHasDimensions, { contentDimensions: contentDimensions, canvasSize: canvasSize, canvasContent: canvasContent, assetMetadata: assetMetadata }));
@@ -69,6 +93,7 @@ const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetad
 exports.VideoPreview = VideoPreview;
 const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
     const { size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
+    const { currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const [canvasHovered, setCanvasHovered] = (0, react_1.useState)(false);
     const compositionContainerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -111,6 +136,17 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
                 previewSize: previewSize.size,
             });
     }, [canvasContent.type, canvasSize, contentDimensions, previewSize.size]);
+    const assetFileType = canvasContent.type === 'asset'
+        ? (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset)
+        : null;
+    const mediaCompositionFileType = (assetFileType === 'audio' || assetFileType === 'video') &&
+        (assetMetadata === null || assetMetadata === void 0 ? void 0 : assetMetadata.type) === 'found' &&
+        assetMetadata.mediaMetadata !== null &&
+        canvasContent.type === 'asset' &&
+        (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset &&
+        contentDimensions !== 'none'
+        ? assetFileType
+        : null;
     const outer = (0, react_1.useMemo)(() => {
         return {
             width: contentDimensions === 'none' ? '100%' : contentDimensions.width * scale,
@@ -123,9 +159,12 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
             left: centerX - previewSize.translation.x,
             top: centerY - previewSize.translation.y,
             overflow: canvasContent.type === 'composition' ? 'visible' : 'hidden',
-            justifyContent: canvasContent.type === 'asset' ? 'center' : 'flex-start',
+            justifyContent: canvasContent.type === 'asset' && mediaCompositionFileType === null
+                ? 'center'
+                : 'flex-start',
             alignItems: canvasContent.type === 'asset' &&
-                (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset) === 'audio'
+                mediaCompositionFileType === null &&
+                assetFileType === 'audio'
                 ? 'center'
                 : 'normal',
         };
@@ -137,8 +176,25 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
         previewSize.translation.y,
         centerY,
         canvasContent,
+        mediaCompositionFileType,
+        assetFileType,
     ]);
     if (canvasContent.type === 'asset') {
+        if (mediaCompositionFileType !== null &&
+            (assetMetadata === null || assetMetadata === void 0 ? void 0 : assetMetadata.type) === 'found' &&
+            contentDimensions !== 'none') {
+            return (jsx_runtime_1.jsxs("div", { ref: compositionContainerRef, className: "remotion-studio-composition-container", style: outer, children: [mediaCompositionFileType === 'audio' ? (jsx_runtime_1.jsx(audio_1.AudioFileIcon, { "aria-label": "Audio asset", color: colors_1.LIGHT_TEXT, role: "img", style: {
+                            height: 64,
+                            left: '50%',
+                            opacity: 0.25,
+                            pointerEvents: 'none',
+                            position: 'absolute',
+                            top: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            width: 64,
+                        } })) : null, jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, offscreen: mediaCompositionFileType === 'audio', scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(AssetMediaComposition, { asset: canvasContent.asset, fetchedAt: assetMetadata.fetchedAt, fileType: mediaCompositionFileType })
+                ] }));
+        }
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(StaticFilePreview_1.StaticFilePreview, { assetMetadata: assetMetadata, currentAsset: canvasContent.asset }) }));
     }
     if (canvasContent.type === 'output') {
@@ -148,14 +204,35 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
     }
     return (jsx_runtime_1.jsxs("div", { ref: compositionContainerRef, className: "remotion-studio-composition-container", style: outer, children: [
-            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { canvasHovered: canvasHovered, compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
+            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, offscreen: false, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(PixelGrid, { scale: scale }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { canvasHovered: canvasHovered, compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
         ] }));
 };
-const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
+const AssetMediaComposition = ({ asset, fetchedAt, fileType }) => {
+    const src = (0, add_asset_cache_bust_1.addAssetCacheBust)({
+        fetchedAt,
+        src: (0, remotion_1.staticFile)(asset),
+    });
+    const style = {
+        width: '100%',
+        height: '100%',
+    };
+    return (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.DisableInteractivityProvider, { children: jsx_runtime_1.jsx("div", { "data-testid": "asset-media-preview", style: style, children: fileType === 'video' ? (jsx_runtime_1.jsx(media_1.Video, { name: asset, src: src, style: style })) : (jsx_runtime_1.jsx(media_1.Audio, { name: asset, src: src })) }) }) }), remotion_1.Internals.portalNode());
+};
+const PortalContainer = ({ offscreen, scale, xCorrection, yCorrection, contentDimensions }) => {
     const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
     const portalContainer = (0, react_1.useRef)(null);
     const style = (0, react_1.useMemo)(() => {
+        if (offscreen) {
+            return {
+                height: contentDimensions.height,
+                left: -999999,
+                overflow: 'hidden',
+                position: 'fixed',
+                top: 0,
+                width: contentDimensions.width,
+            };
+        }
         return containerStyle({
             checkerboard,
             scale,
@@ -168,6 +245,7 @@ const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions })
         checkerboard,
         contentDimensions.height,
         contentDimensions.width,
+        offscreen,
         scale,
         xCorrection,
         yCorrection,

package/dist/components/PreviewToolbar.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const check_fullscreen_support_1 = require("../helpers/check-fullscreen-support");
 const colors_1 = require("../helpers/colors");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const timeline_layout_1 = require("../helpers/timeline-layout");
@@ -23,6 +24,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");
@@ -73,6 +75,10 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const { setPlayerMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
+    const showCompositionControls = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition';
+    const showCanvasViewControls = showCompositionControls ||
+        ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
+            (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset) === 'video');
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
@@ -83,12 +89,15 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                     jsx_runtime_1.jsx("div", { style: padding }), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) })), !isMobileLayout && (isStill || isVideoComposition) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })
                         ] })) : null, isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            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 })
+                            jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCanvasViewControls: showCanvasViewControls, showCompositionControls: showCompositionControls, 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, showCanvasViewControls ? (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 || !showCompositionControls ? 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: [showCompositionControls ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }) : null, jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RulersAndGuidesToggle_1.RulersAndGuidesToggle, { showGuides: showCompositionControls }) })
+                        ] })), readOnlyStudio ||
+                        isMobileLayout ||
+                        !showCompositionControls ? 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.d.ts

@@ -3,6 +3,7 @@ export declare const PreviewToolbarOverflowButton: React.FC<{
     readonly showFullscreen: boolean;
     readonly showPlaybackRate: boolean;
     readonly showLoop: boolean;
+    readonly showCanvasViewControls: boolean;
     readonly showCompositionControls: boolean;
     readonly playbackRate: number;
     readonly setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;

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");
@@ -17,10 +19,12 @@ const clickButton = (id) => {
     var _a;
     (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
 };
-const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLoop, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
+const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLoop, showCanvasViewControls, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
     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)(() => {
@@ -82,7 +86,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 quickSwitcherLabel: null,
             });
         }
-        if (showCompositionControls) {
+        if (showCanvasViewControls) {
             items.push({
                 type: 'item',
                 id: 'checkerboard',
@@ -94,6 +98,8 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 subMenu: null,
                 quickSwitcherLabel: null,
             });
+        }
+        if (showCompositionControls) {
             items.push({
                 type: 'item',
                 id: 'outlines',
@@ -106,6 +112,32 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 quickSwitcherLabel: null,
             });
         }
+        if (showCanvasViewControls) {
+            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,
+            });
+        }
+        if (showCompositionControls) {
+            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({
                 type: 'item',
@@ -128,12 +160,17 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
         showFullscreen,
         showLoop,
         showPlaybackRate,
+        showCanvasViewControls,
         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));
                 })) })
         ] }));

package/dist/components/RadioButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const RadioButton: React.FC<{
+    readonly checked: boolean;
+    readonly children: React.ReactNode;
+    readonly onClick: () => void;
+}>;

package/dist/components/RadioButton.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
+const row = {
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: (0, colors_1.getBackgroundFromHoverState)({
+            hovered: true,
+            selected: false,
+        }),
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+    alignItems: 'center',
+    appearance: 'none',
+    border: 'none',
+    borderRadius: 4,
+    boxSizing: 'border-box',
+    cursor: 'default',
+    display: 'flex',
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    gap: 8,
+    lineHeight: '20px',
+    margin: '5px -8px',
+    padding: '4px 8px',
+    textAlign: 'left',
+    userSelect: 'none',
+    width: 'calc(100% + 16px)',
+};
+const circle = {
+    alignItems: 'center',
+    border: `1px solid ${colors_1.CURRENT_COLOR}`,
+    borderRadius: '50%',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexShrink: 0,
+    height: 20,
+    justifyContent: 'center',
+    width: 20,
+};
+const bullet = {
+    backgroundColor: colors_1.CURRENT_COLOR,
+    borderRadius: '50%',
+    height: 8,
+    width: 8,
+};
+const label = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: '20px',
+};
+const RadioButton = ({ checked, children, onClick }) => {
+    return (jsx_runtime_1.jsxs("button", { "aria-checked": checked, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onClick, role: "radio", style: row, type: "button", children: [
+            jsx_runtime_1.jsx("span", { style: circle, children: checked ? jsx_runtime_1.jsx("span", { style: bullet }) : null }), jsx_runtime_1.jsx("span", { style: label, children: children })
+        ] }));
+};
+exports.RadioButton = RadioButton;