@remotion/studio 4.0.523 → 4.0.524

package/dist/components/ActionTooltip.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const ActionTooltip: React.FC<{
+    readonly label: string;
+    readonly shortcut: string | null;
+    /** Hover delay in milliseconds. Pass null to show immediately. */
+    readonly delay: number | null;
+    readonly dismissOnClick: boolean;
+    readonly children: React.ReactNode;
+}>;

package/dist/components/ActionTooltip.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionTooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const portals_1 = require("./Menu/portals");
+const styles_1 = require("./Menu/styles");
+const triggerStyle = { display: 'inline-flex' };
+const tooltipStyle = {
+    position: 'fixed',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    backgroundColor: colors_1.TIMELINE_BACKGROUND_COLOR,
+    color: colors_1.WHITE_ALPHA_90,
+    borderRadius: 6,
+    padding: '6px 8px',
+    fontSize: 12,
+    lineHeight: '16px',
+    whiteSpace: 'pre-wrap',
+    overflowWrap: 'anywhere',
+    maxWidth: 'calc(100vw - 16px)',
+    boxShadow: styles_1.SHADOW_TOWARDS_TOP,
+    pointerEvents: 'none',
+};
+const labelStyle = {
+    font: 'inherit',
+    color: 'inherit',
+    minWidth: 0,
+};
+const shortcutStyle = {
+    ...labelStyle,
+    backgroundColor: colors_1.WHITE_ALPHA_10,
+    borderRadius: 3,
+    padding: '0 4px',
+    minWidth: 16,
+    textAlign: 'center',
+    whiteSpace: 'nowrap',
+    flexShrink: 0,
+};
+let visibleTooltipCount = 0;
+let lastTooltipHiddenAt = null;
+const TOOLTIP_SKIP_DELAY_WINDOW = 300;
+const ActionTooltip = ({ label, shortcut, delay, dismissOnClick, children }) => {
+    var _a, _b;
+    const triggerRef = (0, react_1.useRef)(null);
+    const tooltipRef = (0, react_1.useRef)(null);
+    const timer = (0, react_1.useRef)(null);
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [position, setPosition] = (0, react_1.useState)(null);
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
+    (0, react_1.useLayoutEffect)(() => {
+        if (!visible) {
+            return;
+        }
+        visibleTooltipCount++;
+        return () => {
+            visibleTooltipCount--;
+            lastTooltipHiddenAt = Date.now();
+        };
+    }, [visible]);
+    const hide = (0, react_1.useCallback)(() => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+        setVisible(false);
+        setPosition(null);
+    }, []);
+    const show = (0, react_1.useCallback)(() => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+        setVisible(true);
+    }, []);
+    const onPointerEnter = (0, react_1.useCallback)((event) => {
+        if (event.pointerType === 'touch' ||
+            timer.current !== null ||
+            !event.currentTarget.contains(event.target)) {
+            return;
+        }
+        // Keep adjacent controls instant, including crossing the gap between them.
+        if (!delay ||
+            visibleTooltipCount > 0 ||
+            (lastTooltipHiddenAt !== null &&
+                Date.now() - lastTooltipHiddenAt < TOOLTIP_SKIP_DELAY_WINDOW)) {
+            show();
+            return;
+        }
+        timer.current = setTimeout(show, delay);
+    }, [delay, show]);
+    (0, react_1.useEffect)(() => {
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                hide();
+            }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('blur', hide);
+        window.addEventListener('resize', hide);
+        window.addEventListener('scroll', hide, true);
+        return () => {
+            if (timer.current !== null) {
+                clearTimeout(timer.current);
+            }
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('blur', hide);
+            window.removeEventListener('resize', hide);
+            window.removeEventListener('scroll', hide, true);
+        };
+    }, [hide]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!visible || !triggerRef.current || !tooltipRef.current) {
+            return;
+        }
+        const trigger = triggerRef.current.getBoundingClientRect();
+        const tooltip = tooltipRef.current.getBoundingClientRect();
+        const above = trigger.top - tooltip.height - 4;
+        setPosition({
+            left: Math.max(8, Math.min(trigger.left + (trigger.width - tooltip.width) / 2, window.innerWidth - tooltip.width - 8)),
+            top: Math.max(8, Math.min(above >= 8 ? above : trigger.bottom + 4, window.innerHeight - tooltip.height - 8)),
+        });
+    }, [label, shortcut, visible]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("span", { ref: triggerRef, style: triggerStyle, onPointerEnter: onPointerEnter, onPointerLeave: hide, onPointerDownCapture: dismissOnClick ? hide : undefined, onClickCapture: dismissOnClick ? hide : undefined, onFocus: (event) => {
+                    if (event.currentTarget.contains(event.target)) {
+                        show();
+                    }
+                }, onBlur: hide, children: children }), visible
+                ? (0, react_dom_1.createPortal)(jsx_runtime_1.jsxs("div", { ref: tooltipRef, role: "tooltip", className: "css-reset", style: {
+                        ...tooltipStyle,
+                        left: (_a = position === null || position === void 0 ? void 0 : position.left) !== null && _a !== void 0 ? _a : 0,
+                        top: (_b = position === null || position === void 0 ? void 0 : position.top) !== null && _b !== void 0 ? _b : 0,
+                        visibility: position ? 'visible' : 'hidden',
+                    }, children: [
+                        jsx_runtime_1.jsx("span", { style: labelStyle, children: label }), shortcut ? jsx_runtime_1.jsx("kbd", { style: shortcutStyle, children: shortcut }) : null] }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+exports.ActionTooltip = ActionTooltip;

package/dist/components/Canvas.js

@@ -622,7 +622,7 @@ const Canvas = ({ canvasContent, size }) => {
     }, [previewServerClientId, subscribeToEvent]);
     (0, react_1.useEffect)(() => {
         const onMessage = (event) => {
-            var _a, _b;
+            var _a, _b, _c;
             const elementLibrary = document.querySelector('iframe[data-remotion-element-library]');
             if (event.source !== (elementLibrary === null || elementLibrary === void 0 ? void 0 : elementLibrary.contentWindow) ||
                 !studio_protocol_1.StudioProtocolInternals.isAllowedStudioProtocolPageOrigin(event.origin)) {
@@ -646,7 +646,8 @@ const Canvas = ({ canvasContent, size }) => {
                     element: {
                         ...payload.element,
                         durationInFrames: (_a = payload.element.durationInFrames) !== null && _a !== void 0 ? _a : null,
-                        installationMode: (_b = payload.element.installationMode) !== null && _b !== void 0 ? _b : null,
+                        initialProps: (_b = payload.element.initialProps) !== null && _b !== void 0 ? _b : null,
+                        installationMode: (_c = payload.element.installationMode) !== null && _c !== void 0 ? _c : null,
                     },
                     from: null,
                     id: crypto.randomUUID(),

package/dist/components/CheckboardToggle.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboardToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const no_react_1 = require("remotion/no-react");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const checkerboard_1 = require("../state/checkerboard");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
 const CheckboardToggle = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
@@ -17,14 +17,11 @@ const CheckboardToggle = () => {
         });
     }, [setCheckerboard]);
     const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleCheckerboard');
-    const accessibilityLabel = [
-        'Show transparency as checkerboard',
-        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || shortcut === '' ? null : `(${shortcut})`,
-    ]
-        .filter(no_react_1.NoReactInternals.truthy)
-        .join(' ');
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": checkerboard, onClick: onClick, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
-                jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : color, d: "M256 48h184c13.3 0 24 10.7 24 24v184H256V48zM48 256h208v208H72c-13.3 0-24-10.7-24-24V256z" }), jsx_runtime_1.jsx("rect", { x: "48", y: "48", width: "416", height: "416", rx: "24", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" }), jsx_runtime_1.jsx("path", { d: "M256 48v416M48 256h416", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" })
-            ] })) }));
+    const ariaKeyShortcuts = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleCheckerboard');
+    const accessibilityLabel = 'Show transparency as checkerboard';
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-pressed": checkerboard, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
+                    jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : color, d: "M256 48h184c13.3 0 24 10.7 24 24v184H256V48zM48 256h208v208H72c-13.3 0-24-10.7-24-24V256z" }), jsx_runtime_1.jsx("rect", { x: "48", y: "48", width: "416", height: "416", rx: "24", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" }), jsx_runtime_1.jsx("path", { d: "M256 48v416M48 256h416", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" })
+                ] })) }) }));
 };
 exports.CheckboardToggle = CheckboardToggle;

package/dist/components/ElementInstallConfirmation.js

@@ -1,37 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ElementInstallConfirmation = exports.ElementLibraryAddConfirmation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -50,6 +17,7 @@ const Button_1 = require("./Button");
 const element_install_api_1 = require("./element-install-api");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
+const LazySyntaxHighlightedSource_1 = require("./LazySyntaxHighlightedSource");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const portals_1 = require("./Menu/portals");
 const ModalButton_1 = require("./ModalButton");
@@ -63,7 +31,6 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const RadioButton_1 = require("./RadioButton");
 const SegmentedControl_1 = require("./SegmentedControl");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-const HighlightedElementSource = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./HighlightedElementSource'))));
 const container = {
     display: 'flex',
     flexDirection: 'column',
@@ -402,7 +369,7 @@ const ElementInstallConfirmation = ({ state }) => {
             canceled = true;
         };
     }, [folderCompositionFile, newPlan, request.element, selectedFolderStack]);
-    const { createComposition, heightValidationMessage, nameValidationMessage, valid: newCompositionValuesAreValid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
+    const { compositionId: newCompositionId, createComposition, heightValidationMessage, nameValidationMessage, valid: newCompositionValuesAreValid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
         canvasCapture: null,
         compositions,
         durationInFrames: newCompositionValues.durationInFrames,
@@ -582,9 +549,7 @@ const ElementInstallConfirmation = ({ state }) => {
             compositionFile: mode === 'new-composition'
                 ? selectedPlan.compositionFile
                 : request.compositionFile,
-            compositionId: mode === 'new-composition'
-                ? newCompositionValues.id
-                : request.compositionId,
+            compositionId: mode === 'new-composition' ? newCompositionId : request.compositionId,
             element: request.element,
             // The insert operation revalidates this even if the name preflight is pending.
             expectedFileState: (_b = activePlan === null || activePlan === void 0 ? void 0 : activePlan.expectedFileState) !== null && _b !== void 0 ? _b : { exists: false },
@@ -609,7 +574,7 @@ const ElementInstallConfirmation = ({ state }) => {
         createComposition,
         folderSymbolicatedStack,
         mode,
-        newCompositionValues.id,
+        newCompositionId,
         onClose,
         request,
         selectedFolderStack,
@@ -658,7 +623,7 @@ const ElementInstallConfirmation = ({ state }) => {
                                 ] }), currentPlan === null ? (jsx_runtime_1.jsxs("div", { style: warningStyle, role: "status", children: [
                                     jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: warningDescriptionStyle, children: ["Studio could not find a safe place in \u201C", request.compositionId, "\u201D to insert the Element. Install it into a new composition instead."] })
                                 ] })) : null, mode === 'new-composition' ? (jsx_runtime_1.jsxs("section", { style: { ...sectionStyle, marginInline: -16 }, "aria-label": "New composition settings", children: [
-                                    jsx_runtime_1.jsx(NewComposition_1.NewCompositionFields, { heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: compositionAlreadyCreated ? null : nameValidationMessage, setValues: setNewCompositionValues, values: newCompositionValues, widthValidationMessage: widthValidationMessage }), (activeNewCompositionPlanState === null || activeNewCompositionPlanState === void 0 ? void 0 : activeNewCompositionPlanState.type) === 'error' ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: activeNewCompositionPlanState.reason, type: "error" })) : null] })) : null, jsx_runtime_1.jsx("section", { style: sectionStyle, "aria-label": "Element implementation", children: existingDestination ? (jsx_runtime_1.jsxs("div", { role: "radiogroup", "aria-label": "Existing Element file", style: sectionStyle, children: [
+                                    jsx_runtime_1.jsx(NewComposition_1.NewCompositionFields, { compositionId: newCompositionId, heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: compositionAlreadyCreated ? null : nameValidationMessage, setValues: setNewCompositionValues, values: newCompositionValues, widthValidationMessage: widthValidationMessage }), (activeNewCompositionPlanState === null || activeNewCompositionPlanState === void 0 ? void 0 : activeNewCompositionPlanState.type) === 'error' ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: activeNewCompositionPlanState.reason, type: "error" })) : null] })) : null, jsx_runtime_1.jsx("section", { style: sectionStyle, "aria-label": "Element implementation", children: existingDestination ? (jsx_runtime_1.jsxs("div", { role: "radiogroup", "aria-label": "Existing Element file", style: sectionStyle, children: [
                                         jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: !overwriteExisting, disabled: submitting, onClick: () => setInput((previous) => ({ ...previous, overwritePlan: null })), children: "Create a copy" }), !overwriteExisting ? (jsx_runtime_1.jsxs("div", { style: {
                                                 ...sectionStyle,
                                                 paddingLeft: 28,
@@ -686,7 +651,7 @@ const ElementInstallConfirmation = ({ state }) => {
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: warningStyle, children: [
                                     jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsx("p", { style: warningDescriptionStyle, children: "Installed code can access your files and network." })
                                 ] }), jsx_runtime_1.jsxs("details", { style: sourceDetailsStyle, children: [
-                                    jsx_runtime_1.jsx("summary", { className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sourceSummaryStyle, children: "Source code" }), jsx_runtime_1.jsx("div", { style: sourceCodeContainerStyle, children: jsx_runtime_1.jsx("pre", { className: `language-tsx ${is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME} ${is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: sourcePreview, children: jsx_runtime_1.jsx(HighlightedElementSource, { source: sourcePreview }) }) }) }) })
+                                    jsx_runtime_1.jsx("summary", { className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sourceSummaryStyle, children: "Source code" }), jsx_runtime_1.jsx("div", { style: sourceCodeContainerStyle, children: jsx_runtime_1.jsx("pre", { className: `language-tsx ${is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME} ${is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: jsx_runtime_1.jsx(LazySyntaxHighlightedSource_1.LazySyntaxHighlightedSource, { source: sourcePreview }) }) }) })
                                 ] })
                         ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footerStyle, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                 jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { disabled: submitting, onClick: cancel, style: cancelStyle, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { autoFocus: mode === 'current-composition', disabled: !canSubmit, onClick: submit, children: [submitting

package/dist/components/FullscreenToggle.js

@@ -4,11 +4,11 @@ exports.FullScreenToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const no_react_1 = require("remotion/no-react");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const fullscreen_1 = require("../icons/fullscreen");
 const canvas_ref_1 = require("../state/canvas-ref");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
 const FullScreenToggle = ({ hidden }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
@@ -26,12 +26,9 @@ const FullScreenToggle = ({ hidden }) => {
             }));
     }, [setSize]);
     const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('enterFullscreen');
-    const accessibilityLabel = [
-        'Enter fullscreen preview',
-        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || shortcut === '' ? null : `(${shortcut})`,
-    ]
-        .filter(no_react_1.NoReactInternals.truthy)
-        .join(' ');
+    const ariaKeyShortcuts = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('enterFullscreen');
+    const accessibilityLabel = 'Enter fullscreen preview';
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     (0, react_1.useEffect)(() => {
         const f = keybindings.registerKeybinding({
             event: 'keydown',
@@ -45,6 +42,6 @@ const FullScreenToggle = ({ hidden }) => {
             f.unregister();
         };
     }, [keybindings, onClick]);
-    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: { width: 18, height: 18 } })) }));
+    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: { width: 18, height: 18 } })) }) }));
 };
 exports.FullScreenToggle = FullScreenToggle;

package/dist/components/GlobalKeybindings.js

@@ -4,10 +4,14 @@ exports.GlobalKeybindings = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 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 editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
@@ -27,6 +31,59 @@ const GlobalKeybindings = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
+    const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const showGuides = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition';
+    const showCanvasViewControls = showGuides ||
+        ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
+            (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset) === 'video');
+    (0, react_1.useEffect)(() => {
+        if (!showCanvasViewControls)
+            return;
+        const outlines = showGuides
+            ? keybindings.registerKeybinding({
+                event: 'keydown',
+                action: 'toggleOutlines',
+                callback: (event) => {
+                    if (!event.repeat)
+                        setEditorShowOutlines((current) => !current);
+                },
+                preventDefault: true,
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+            })
+            : null;
+        const rulers = keybindings.registerKeybinding({
+            event: 'keydown',
+            action: 'toggleRulersAndGuides',
+            callback: (event) => {
+                if (event.repeat)
+                    return;
+                const visible = editorShowRulers || (showGuides && editorShowGuides);
+                setEditorShowRulers(() => !visible);
+                if (showGuides)
+                    setEditorShowGuides(() => !visible);
+            },
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            outlines === null || outlines === void 0 ? void 0 : outlines.unregister();
+            rulers.unregister();
+        };
+    }, [
+        keybindings,
+        showCanvasViewControls,
+        showGuides,
+        editorShowRulers,
+        editorShowGuides,
+        setEditorShowOutlines,
+        setEditorShowRulers,
+        setEditorShowGuides,
+    ]);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();

package/dist/components/InspectorSequenceSection.js

@@ -484,11 +484,11 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         return node.kind === 'field' && ((_a = node.field) === null || _a === void 0 ? void 0 : _a.key) === border_radius_representation_1.BORDER_RADIUS_SHORTHAND_KEY;
     });
     const borderRadiusConversion = (0, border_radius_representation_1.getBorderRadiusConversion)(sequencePropStatuses, getDragOverrides(nodePathInfo.sequenceSubscriptionKey));
-    const inlineCaptionValue = ((_a = schema.captions) === null || _a === void 0 ? void 0 : _a.type) === 'remotion-captions'
-        ? runtimeValues.captions
-        : null;
-    const inlineCaptions = Array.isArray(inlineCaptionValue)
-        ? inlineCaptionValue
+    const hasCaptionsSchema = ((_a = schema.captions) === null || _a === void 0 ? void 0 : _a.type) === 'remotion-captions';
+    const inlineCaptions = hasCaptionsSchema
+        ? Array.isArray(runtimeValues.captions)
+            ? runtimeValues.captions
+            : []
         : null;
     const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
     const canAddEffect = nodePathInfo.supportsEffects &&

package/dist/components/LazySyntaxHighlightedSource.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const LazySyntaxHighlightedSource: React.FC<{
+    readonly source: string;
+}>;

package/dist/components/LazySyntaxHighlightedSource.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazySyntaxHighlightedSource = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SyntaxHighlightedSource = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SyntaxHighlightedSource'))));
+const LazySyntaxHighlightedSource = ({ source }) => {
+    return (jsx_runtime_1.jsx(react_1.Suspense, { fallback: source, children: jsx_runtime_1.jsx(SyntaxHighlightedSource, { source: source }) }));
+};
+exports.LazySyntaxHighlightedSource = LazySyntaxHighlightedSource;

package/dist/components/LoopToggle.js

@@ -4,9 +4,12 @@ exports.LoopToggle = exports.toggleLoop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const loop_1 = require("../state/loop");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = 'Loop video';
+const accessibilityLabel = 'Loop';
 const toggleLoop = (setLoop) => {
     setLoop((currentLoop) => {
         (0, loop_1.persistLoopOption)(!currentLoop);
@@ -15,9 +18,12 @@ const toggleLoop = (setLoop) => {
 };
 exports.toggleLoop = toggleLoop;
 const LoopToggle = ({ loop, setLoop }) => {
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleLoop');
+    const ariaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleLoop');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const onClick = (0, react_1.useCallback)(() => {
         (0, exports.toggleLoop)(setLoop);
     }, [setLoop]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": loop, onClick: onClick, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/components/MenuToolbar.js

@@ -13,6 +13,7 @@ const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-
 const use_menu_structure_1 = require("../helpers/use-menu-structure");
 const search_1 = require("../icons/search");
 const modals_1 = require("../state/modals");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineAction_1 = require("./InlineAction");
 const layout_1 = require("./layout");
 const menu_toolbar_height_1 = require("./menu-toolbar-height");
@@ -133,11 +134,12 @@ const MenuToolbar = ({ readOnlyStudio }) => {
         return jsx_runtime_1.jsx(search_1.SearchIcon, { color: color, width: 18, height: 18 });
     }, []);
     const quickSwitcherShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('quickSwitcher');
-    const searchTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || quickSwitcherShortcut === ''
-        ? 'Quick Switcher'
-        : `Quick Switcher (${quickSwitcherShortcut})`;
+    const quickSwitcherAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('quickSwitcher');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, onPointerDown: onPointerDown, children: [
-            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, title: searchTooltip })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), jsx_runtime_1.jsx("div", { style: menuItems, children: structure.map((s) => {
+            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Quick switcher", shortcut: shortcutsDisabled ? null : quickSwitcherShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, "aria-label": "Quick switcher", "aria-keyshortcuts": shortcutsDisabled
+                                ? undefined
+                                : quickSwitcherAriaShortcut || undefined }) })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), jsx_runtime_1.jsx("div", { style: menuItems, children: structure.map((s) => {
                             return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
                         }) })
                 ] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SettingsButton_1.SettingsButton, { showUpdates: showUpdates }), jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })

package/dist/components/MuteToggle.d.ts

@@ -1,3 +1,4 @@
+export declare const toggleMute: (setMuted: import("react").Dispatch<import("react").SetStateAction<boolean>>) => void;
 export declare const MuteToggle: React.FC<{
     muted: boolean;
     setMuted: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/components/MuteToggle.js

@@ -1,20 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MuteToggle = void 0;
+exports.MuteToggle = exports.toggleMute = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const media_volume_1 = require("../icons/media-volume");
 const mute_1 = require("../state/mute");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
+const toggleMute = (setMuted) => {
+    setMuted((muted) => {
+        (0, mute_1.persistMuteOption)(!muted);
+        return !muted;
+    });
+};
+exports.toggleMute = toggleMute;
 const MuteToggle = ({ muted, setMuted }) => {
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleMute');
+    const ariaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleMute');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const onClick = (0, react_1.useCallback)(() => {
-        setMuted((m) => {
-            (0, mute_1.persistMuteOption)(!m);
-            return !m;
-        });
+        (0, exports.toggleMute)(setMuted);
     }, [setMuted]);
     const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => muted ? jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE }) : jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, onClick: onClick, children: (color) => muted ? (jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE })) : (jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color })) }) }));
 };
 exports.MuteToggle = MuteToggle;

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

@@ -16,6 +16,7 @@ export type NewCompositionFormValues = {
     };
 };
 export declare const NewCompositionFields: React.FC<{
+    readonly compositionId: string;
     readonly heightValidationMessage: string | null;
     readonly inputRef: RefObject<HTMLInputElement | null>;
     readonly nameValidationMessage: string | null;