@remotion/cli 4.0.63 → 4.0.65

package/dist/better-opn/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="node" />
+/// <reference types="bun-types" />
 export declare const openBrowser: ({ url, browserFlag, browserArgs, }: {
     url: string;
     browserFlag: string | undefined;

package/dist/config/index.d.ts

@@ -307,7 +307,7 @@ export declare const ConfigInternals: {
     getBrowser: () => null;
     getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
     getProResProfile: () => "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
-    getPresetProfile: () => "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
+    getPresetProfile: () => "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
     getShouldOverwrite: ({ defaultValue, }: {
         defaultValue: boolean;
     }) => boolean;

package/dist/editor/components/AudioWaveform.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const media_utils_1 = require("@remotion/media-utils");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const AudioWaveformBar_1 = require("./AudioWaveformBar");
 const container = {
@@ -71,7 +72,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, s
                 context.lineTo(x, y);
             }
         });
-        context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
+        context.strokeStyle = colors_1.LIGHT_TRANSPARENT;
         context.stroke();
     }, [visualizationWidth, metadata, startFrom, volume, doesVolumeChange]);
     (0, react_1.useEffect)(() => {

package/dist/editor/components/Canvas.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -11,8 +14,12 @@ const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
+const editor_guides_1 = require("../state/editor-guides");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const preview_size_1 = require("../state/preview-size");
+const EditorGuides_1 = __importDefault(require("./EditorGuides"));
+const EditorRuler_1 = require("./EditorRuler");
+const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
 const ResetZoomButton_1 = require("./ResetZoomButton");
@@ -34,6 +41,8 @@ const Canvas = ({ canvasContent }) => {
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
+    const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
+    const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
     const contentDimensions = (0, react_1.useMemo)(() => {
         if ((canvasContent.type === 'asset' || canvasContent.type === 'output') &&
@@ -243,6 +252,6 @@ const Canvas = ({ canvasContent }) => {
     (0, react_1.useEffect)(() => {
         fetchMetadata();
     }, [fetchMetadata]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? ((0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution })) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? ((0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution })) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && ((0, jsx_runtime_1.jsx)(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && ((0, jsx_runtime_1.jsx)(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };
 exports.Canvas = Canvas;

package/dist/editor/components/CompositionSelectorItem.js

@@ -8,7 +8,9 @@ const is_composition_still_1 = require("../helpers/is-composition-still");
 const folder_1 = require("../icons/folder");
 const still_1 = require("../icons/still");
 const video_1 = require("../icons/video");
+const ContextMenu_1 = require("./ContextMenu");
 const layout_1 = require("./layout");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 const COMPOSITION_ITEM_HEIGHT = 32;
 const itemStyle = {
@@ -78,6 +80,45 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
             toggleFolder(item.folderName, item.parentName);
         }
     }, [item, selectComposition, toggleFolder]);
+    const contextMenu = (0, react_1.useMemo)(() => {
+        if (item.type === 'composition') {
+            return [
+                {
+                    id: '1',
+                    keyHint: null,
+                    label: `Copy ID`,
+                    leftItem: null,
+                    onClick: () => {
+                        navigator.clipboard
+                            .writeText(item.composition.id)
+                            .catch((err) => {
+                            var _a;
+                            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                                content: `Could not copy to clipboard: ${err.message}`,
+                                created: Date.now(),
+                                duration: 1000,
+                                id: String(Math.random()),
+                            });
+                        })
+                            .then(() => {
+                            var _a;
+                            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                                content: 'Copied to clipboard',
+                                created: Date.now(),
+                                duration: 1000,
+                                id: String(Math.random()),
+                            });
+                        });
+                    },
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    type: 'item',
+                    value: 'remove',
+                },
+            ];
+        }
+        return [];
+    }, [item]);
     if (item.type === 'folder') {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? ((0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : ((0, jsx_runtime_1.jsx)(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.folderName })] }), item.expanded
                     ? item.items.map((childItem) => {
@@ -85,6 +126,6 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                     })
                     : null] }));
     }
-    return ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.composition.id }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: contextMenu, children: (0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.composition.id }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition }) })] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const ContextMenu: React.FC<{
+    children: React.ReactNode;
+    values: ComboboxValue[];
+}>;

package/dist/editor/components/ContextMenu.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const noop_1 = require("../helpers/noop");
+const z_index_1 = require("../state/z-index");
+const portals_1 = require("./Menu/portals");
+const styles_1 = require("./Menu/styles");
+const MenuContent_1 = require("./NewComposition/MenuContent");
+const ContextMenu = ({ children, values }) => {
+    const ref = (0, react_1.useRef)(null);
+    const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        return {};
+    }, []);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+            return false;
+        };
+        current.addEventListener('contextmenu', onClick);
+        return () => {
+            current.removeEventListener('contextmenu', onClick);
+        };
+    }, [size]);
+    const spaceToBottom = (0, react_1.useMemo)(() => {
+        if (size && opened.type === 'open') {
+            return size.windowSize.height - opened.top;
+        }
+        return 0;
+    }, [opened, size]);
+    const spaceToTop = (0, react_1.useMemo)(() => {
+        if (size && opened.type === 'open') {
+            return opened.top;
+        }
+        return 0;
+    }, [opened, size]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (opened.type === 'not-open') {
+            return;
+        }
+        if (!size) {
+            return;
+        }
+        const spaceToRight = size.windowSize.width - (opened.left + size.width);
+        const minSpaceToRightRequired = styles_1.MAX_MENU_WIDTH;
+        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
+        const horizontalLayout = spaceToRight >= minSpaceToRightRequired ? 'left' : 'right';
+        return {
+            ...styles_1.menuContainerTowardsTop,
+            ...(verticalLayout === 'top'
+                ? {
+                    top: opened.top,
+                }
+                : {
+                    bottom: size.windowSize.height - opened.top,
+                }),
+            ...(horizontalLayout === 'left'
+                ? {
+                    left: opened.left,
+                }
+                : {
+                    right: size.windowSize.width - opened.left,
+                }),
+        };
+    }, [opened, spaceToBottom, spaceToTop, size]);
+    const onHide = (0, react_1.useCallback)(() => {
+        setOpened({ type: 'not-open' });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: ref, onContextMenu: () => false, style: style, children: children }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+exports.ContextMenu = ContextMenu;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 export declare const CURRENT_COMPOSITION_HEIGHT = 80;
 export declare const CurrentComposition: () => JSX.Element;

package/dist/editor/components/EditorContexts.js

@@ -15,8 +15,10 @@ const ModalsProvider_1 = require("./ModalsProvider");
 const PlayerEmitterContext_1 = require("./PlayerEmitterContext");
 const context_1 = require("./RenderQueue/context");
 const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
+const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
+const ShowRulersProvider_1 = require("./ShowRulersProvider");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children }) => {
-    return ((0, jsx_runtime_1.jsx)(get_zod_if_possible_1.ZodProvider, { children: (0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { children: (0, jsx_runtime_1.jsx)(context_1.RenderQueueContextProvider, { children: (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(PlayerEmitterContext_1.PlayerEmitterContext, { children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(get_zod_if_possible_1.ZodProvider, { children: (0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { children: (0, jsx_runtime_1.jsx)(context_1.RenderQueueContextProvider, { children: (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(ShowRulersProvider_1.ShowRulersProvider, { children: (0, jsx_runtime_1.jsx)(ShowGuidesProvider_1.ShowGuidesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(PlayerEmitterContext_1.PlayerEmitterContext, { children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.EditorContexts = EditorContexts;

package/dist/editor/components/EditorGuides/Guide.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { Guide } from '../../state/editor-guides';
+declare const _default: import("react").NamedExoticComponent<{
+    guide: Guide;
+    canvasDimensions: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    scale: number;
+}>;
+export default _default;

package/dist/editor/components/EditorGuides/Guide.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const truthy_1 = require("../../../truthy");
+const colors_1 = require("../../helpers/colors");
+const editor_guides_1 = require("../../state/editor-guides");
+const editor_rulers_1 = require("../../state/editor-rulers");
+const ContextMenu_1 = require("../ContextMenu");
+const PADDING_FOR_EASY_DRAG = 4;
+const GuideComp = ({ guide, canvasDimensions, scale }) => {
+    const { shouldCreateGuideRef, setGuidesList, setSelectedGuideId, selectedGuideId, setHoveredGuideId, hoveredGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHoveredGuideId(() => guide.id);
+    }, [guide.id, setHoveredGuideId]);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHoveredGuideId(() => null);
+    }, [setHoveredGuideId]);
+    const isVerticalGuide = guide.orientation === 'vertical';
+    const guideStyle = (0, react_1.useMemo)(() => {
+        const canvasPosition = isVerticalGuide
+            ? canvasDimensions.left
+            : canvasDimensions.top;
+        const guidePosition = guide.position * scale + canvasPosition;
+        return {
+            position: 'absolute',
+            width: `${isVerticalGuide ? '1px' : '100%'}`,
+            height: `${isVerticalGuide ? '100%' : '1px'}`,
+            left: `${isVerticalGuide ? guidePosition - PADDING_FOR_EASY_DRAG : 0}px`,
+            top: `${isVerticalGuide ? 0 : guidePosition - PADDING_FOR_EASY_DRAG}px`,
+            cursor: `${isVerticalGuide ? 'ew-resize' : 'ns-resize'}`,
+            padding: isVerticalGuide
+                ? `0 ${PADDING_FOR_EASY_DRAG}px`
+                : `${PADDING_FOR_EASY_DRAG}px 0`,
+        };
+    }, [guide, scale, canvasDimensions, isVerticalGuide]);
+    const guideContentStyle = (0, react_1.useMemo)(() => {
+        return {
+            position: 'relative',
+            minWidth: `${isVerticalGuide ? '1px' : `calc(100% + ${editor_rulers_1.RULER_WIDTH}px`}`,
+            minHeight: `${isVerticalGuide ? `calc(100% + ${editor_rulers_1.RULER_WIDTH}px` : '1px'}`,
+            top: `${isVerticalGuide ? `-${editor_rulers_1.RULER_WIDTH}px` : '0px'}`,
+            left: `${isVerticalGuide ? '0px' : `-${editor_rulers_1.RULER_WIDTH}px`}`,
+            display: guide.show ? 'block' : 'none',
+            backgroundColor: selectedGuideId === guide.id || hoveredGuideId === guide.id
+                ? colors_1.SELECTED_GUIDE
+                : colors_1.UNSELECTED_GUIDE,
+        };
+    }, [isVerticalGuide, guide.show, guide.id, selectedGuideId, hoveredGuideId]);
+    const onMouseDown = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        if (e.button !== 0) {
+            return;
+        }
+        shouldCreateGuideRef.current = true;
+        document.body.style.cursor = 'no-drop';
+        setSelectedGuideId(() => guide.id);
+    }, [shouldCreateGuideRef, setSelectedGuideId, guide.id]);
+    const values = (0, react_1.useMemo)(() => {
+        return [
+            {
+                id: '1',
+                keyHint: null,
+                label: 'Remove guide',
+                leftItem: null,
+                onClick: () => {
+                    setGuidesList((prevState) => {
+                        const newGuides = prevState.filter((selected) => {
+                            return selected.id !== guide.id;
+                        });
+                        (0, editor_guides_1.persistGuidesList)(newGuides);
+                        return newGuides;
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'remove',
+            },
+        ];
+    }, [guide.id, setGuidesList]);
+    return ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: values, children: (0, jsx_runtime_1.jsx)("div", { style: guideStyle, onMouseDown: onMouseDown, className: "__remotion_editor_guide", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: (0, jsx_runtime_1.jsx)("div", { style: guideContentStyle, className: [
+                    '__remotion_editor_guide_content',
+                    selectedGuideId === guide.id || hoveredGuideId === guide.id
+                        ? '__remotion_editor_guide_selected'
+                        : null,
+                ]
+                    .filter(truthy_1.truthy)
+                    .join(' ') }) }) }));
+};
+exports.default = (0, react_1.memo)(GuideComp);

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { type Size } from '@remotion/player';
+import type { AssetMetadata } from '../../helpers/get-asset-metadata';
+import type { Dimensions } from '../../helpers/is-current-selected-still';
+declare const EditorGuides: React.FC<{
+    canvasSize: Size | null;
+    contentDimensions: Dimensions | 'none' | null;
+    assetMetadata: AssetMetadata | null;
+}>;
+export default EditorGuides;

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const use_studio_canvas_dimensions_1 = require("../../helpers/use-studio-canvas-dimensions");
+const editor_guides_1 = require("../../state/editor-guides");
+const Guide_1 = __importDefault(require("./Guide"));
+const EditorGuides = ({ canvasSize, contentDimensions, assetMetadata }) => {
+    const { canvasDimensions, scale } = (0, use_studio_canvas_dimensions_1.useStudioCanvasDimensions)({
+        canvasSize,
+        contentDimensions,
+        assetMetadata,
+    });
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    if (canvasContent === null || canvasContent.type !== 'composition') {
+        throw new Error('Expected to be in a composition');
+    }
+    const { guidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const guidesForThisComposition = (0, react_1.useMemo)(() => {
+        return guidesList.filter((guide) => {
+            return guide.compositionId === canvasContent.compositionId;
+        });
+    }, [canvasContent.compositionId, guidesList]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: guidesForThisComposition.map((guide) => {
+            return ((0, jsx_runtime_1.jsx)(Guide_1.default, { guide: guide, canvasDimensions: canvasDimensions, scale: scale }, guide.id));
+        }) }));
+};
+exports.default = EditorGuides;

package/dist/editor/components/EditorRuler/Ruler.d.ts

@@ -12,5 +12,6 @@ interface RulerProps {
     markingGaps: number;
     orientation: 'horizontal' | 'vertical';
 }
+export declare const makeGuideId: () => string;
 declare const Ruler: React.FC<RulerProps>;
 export default Ruler;

package/dist/editor/components/EditorRuler/Ruler.js

@@ -1,12 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeGuideId = void 0;
 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 editor_ruler_1 = require("../../helpers/editor-ruler");
+const editor_guides_1 = require("../../state/editor-guides");
 const editor_rulers_1 = require("../../state/editor-rulers");
+const makeGuideId = () => {
+    return Math.random().toString(36).substring(7);
+};
+exports.makeGuideId = makeGuideId;
 const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markingGaps, orientation, }) => {
-    var _a, _b, _c, _d;
+    var _a;
     const rulerCanvasRef = (0, react_1.useRef)(null);
+    const isVerticalRuler = orientation === 'vertical';
+    const { shouldCreateGuideRef, setGuidesList, selectedGuideId, hoveredGuideId, setSelectedGuideId, guidesList, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const unsafeVideoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    if (!unsafeVideoConfig) {
+        throw new Error('Video config not set');
+    }
+    const [cursor, setCursor] = (0, react_1.useState)(isVerticalRuler ? 'ew-resize' : 'ns-resize');
+    const selectedOrHoveredGuide = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return ((_b = (_a = guidesList.find((guide) => guide.id === selectedGuideId)) !== null && _a !== void 0 ? _a : guidesList.find((guide) => guide.id === hoveredGuideId)) !== null && _b !== void 0 ? _b : null);
+    }, [guidesList, hoveredGuideId, selectedGuideId]);
     (0, react_1.useEffect)(() => {
         (0, editor_ruler_1.drawMarkingOnRulerCanvas)({
             scale,
@@ -16,25 +35,71 @@ const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markin
             markingGaps,
             orientation,
             rulerCanvasRef,
+            selectedGuide: selectedOrHoveredGuide,
         });
-    }, [scale, points, startMarking, originOffset, markingGaps, orientation]);
-    const canvasContainerWidth = ((_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
-    const canvasContainerHeight = ((_d = (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.height) || 0;
-    const rulerWidth = orientation === 'horizontal' ? canvasContainerWidth : editor_rulers_1.RULER_WIDTH;
-    const rulerHeight = orientation === 'horizontal' ? editor_rulers_1.RULER_WIDTH : canvasContainerHeight;
+    }, [
+        scale,
+        points,
+        startMarking,
+        originOffset,
+        markingGaps,
+        orientation,
+        selectedOrHoveredGuide,
+    ]);
+    const { width: canvasContainerWidth, height: canvasContainerHeight } = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { width: 0, height: 0 };
+    const rulerWidth = isVerticalRuler ? editor_rulers_1.RULER_WIDTH : canvasContainerWidth;
+    const rulerHeight = isVerticalRuler ? canvasContainerHeight : editor_rulers_1.RULER_WIDTH;
     const rulerStyle = (0, react_1.useMemo)(() => ({
         position: 'absolute',
-        background: '#000000',
+        background: colors_1.BACKGROUND,
         width: `${rulerWidth}px`,
         height: `${rulerHeight}px`,
-        ...(orientation === 'vertical'
-            ? {
-                left: 0,
-            }
-            : {
-                top: 0,
-            }),
-    }), [orientation, rulerWidth, rulerHeight]);
-    return ((0, jsx_runtime_1.jsx)("canvas", { ref: rulerCanvasRef, width: rulerWidth * devicePixelRatio, height: rulerHeight * devicePixelRatio, style: rulerStyle }));
+        left: isVerticalRuler ? 0 : 'unset',
+        top: isVerticalRuler ? 'unset' : 0,
+        borderBottom: isVerticalRuler ? undefined : '1px solid ' + colors_1.RULER_COLOR,
+        borderRight: isVerticalRuler ? '1px solid ' + colors_1.RULER_COLOR : undefined,
+        cursor,
+    }), [rulerWidth, rulerHeight, cursor, isVerticalRuler]);
+    const onMouseDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        e.preventDefault();
+        shouldCreateGuideRef.current = true;
+        document.body.style.cursor = 'no-drop';
+        const guideId = (0, exports.makeGuideId)();
+        setSelectedGuideId(() => guideId);
+        setGuidesList((prevState) => {
+            return [
+                ...prevState,
+                {
+                    orientation,
+                    position: -originOffset,
+                    show: false,
+                    id: guideId,
+                    compositionId: unsafeVideoConfig.id,
+                },
+            ];
+        });
+    }, [
+        shouldCreateGuideRef,
+        setSelectedGuideId,
+        setGuidesList,
+        orientation,
+        originOffset,
+        unsafeVideoConfig.id,
+    ]);
+    const changeCursor = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        if (selectedGuideId !== null) {
+            setCursor('no-drop');
+        }
+    }, [setCursor, selectedGuideId]);
+    (0, react_1.useEffect)(() => {
+        if (selectedGuideId === null) {
+            setCursor(isVerticalRuler ? 'ew-resize' : 'ns-resize');
+        }
+    }, [selectedGuideId, isVerticalRuler]);
+    return ((0, jsx_runtime_1.jsx)("canvas", { ref: rulerCanvasRef, width: rulerWidth * devicePixelRatio, height: rulerHeight * devicePixelRatio, style: rulerStyle, onPointerDown: onMouseDown, onPointerEnter: changeCursor, onPointerLeave: changeCursor }));
 };
 exports.default = Ruler;