@remotion/studio 4.0.522 → 4.0.524

package/dist/api/install-package.js

@@ -4,14 +4,16 @@ exports.installPackages = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../components/call-api");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const optional_package_dependencies_1 = require("../helpers/optional-package-dependencies");
 const installPackages = async (dependencies) => {
     if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
         throw new Error('installPackages() is only available in the Studio');
     }
+    const dependenciesWithAuxiliaryPackages = (0, optional_package_dependencies_1.withRequiredAuxiliaryPackages)(dependencies);
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     if (browserStudioOperations !== null) {
         const response = await browserStudioOperations.packageInstallation.installPackages({
-            dependencies: [...dependencies],
+            dependencies: dependenciesWithAuxiliaryPackages,
         });
         if (!response.success) {
             const error = new Error(response.reason);
@@ -24,7 +26,7 @@ const installPackages = async (dependencies) => {
         throw new Error('installPackages() is not available in Read-Only Studio');
     }
     return (0, call_api_1.callApi)('/api/install-package', {
-        dependencies: [...dependencies],
+        dependencies: dependenciesWithAuxiliaryPackages,
     });
 };
 exports.installPackages = installPackages;

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/AssetAudioVolume.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const AssetAudioVolume: React.FC<{
+    readonly src: string | null;
+    readonly waveformSampleRate: number | null;
+}>;

package/dist/components/AssetAudioVolume.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetAudioVolume = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const timeline_utils_1 = require("@remotion/timeline-utils");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const AssetAudioVolume = ({ src, waveformSampleRate }) => {
+    const [value, setValue] = (0, react_1.useState)('Calculating…');
+    (0, react_1.useEffect)(() => {
+        setValue('Calculating…');
+        if (src === null || waveformSampleRate === null) {
+            return;
+        }
+        return (0, timeline_utils_1.subscribeToWaveformPeaks)({
+            src,
+            waveformSampleRate,
+            onPeaks: (_peaks, final, averageVolume) => {
+                if (final) {
+                    setValue((0, timeline_utils_1.formatAverageAudioVolume)(averageVolume));
+                }
+            },
+            onError: () => setValue('Unavailable'),
+        });
+    }, [src, waveformSampleRate]);
+    return (jsx_runtime_1.jsx("span", { style: {
+            fontFamily: 'sans-serif',
+            fontSize: 13,
+            lineHeight: '20px',
+            color: colors_1.LIGHT_TEXT,
+        }, title: "RMS level across all channels over the full audio track, including silence.", children: value }));
+};
+exports.AssetAudioVolume = AssetAudioVolume;

package/dist/components/Canvas.js

@@ -510,8 +510,7 @@ const Canvas = ({ canvasContent, size }) => {
     (0, react_1.useEffect)(() => {
         const resetBinding = keybindings.registerKeybinding({
             event: 'keydown',
-            key: '0',
-            commandCtrlKey: false,
+            action: 'resetZoom',
             callback: onReset,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -519,8 +518,7 @@ const Canvas = ({ canvasContent, size }) => {
         });
         const zoomIn = keybindings.registerKeybinding({
             event: 'keydown',
-            key: '+',
-            commandCtrlKey: false,
+            action: 'zoomIn',
             callback: onZoomIn,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -528,8 +526,7 @@ const Canvas = ({ canvasContent, size }) => {
         });
         const zoomOut = keybindings.registerKeybinding({
             event: 'keydown',
-            key: '-',
-            commandCtrlKey: false,
+            action: 'zoomOut',
             callback: onZoomOut,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -625,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)) {
@@ -649,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(),
@@ -773,6 +771,7 @@ const Canvas = ({ canvasContent, size }) => {
             try {
                 const [newPreflight, currentPreflight] = await Promise.all([
                     (0, element_install_api_1.prepareElementInstall)({
+                        installationName: null,
                         destination: {
                             type: 'new-composition',
                             compositionFile: null,
@@ -780,6 +779,7 @@ const Canvas = ({ canvasContent, size }) => {
                         element: activeElementInstallRequest.element,
                     }),
                     (0, element_install_api_1.prepareElementInstall)({
+                        installationName: null,
                         destination: {
                             type: 'current-composition',
                             compositionFile: activeElementInstallRequest.compositionFile,

package/dist/components/CaptionInspector.js

@@ -1,12 +1,47 @@
 "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.CaptionInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
 const upload_1 = require("../icons/upload");
-const Button_1 = require("./Button");
+const modals_1 = require("../state/modals");
 const CaptionTextEditor_1 = require("./CaptionTextEditor");
+const InlineAction_1 = require("./InlineAction");
 const CollapsibleInspectorSectionHeader_1 = require("./InspectorPanel/CollapsibleInspectorSectionHeader");
 const common_1 = require("./InspectorPanel/common");
 const styles_1 = require("./InspectorPanel/styles");
@@ -26,38 +61,57 @@ const readOnlyStatus = {
 const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onTextCancel, onReplaceCaptions, onToggle, readOnly, readOnlyTitle, }) => {
     const fileInput = (0, react_1.useRef)(null);
     const [isImporting, setIsImporting] = (0, react_1.useState)(false);
-    const importCaptions = (0, react_1.useCallback)(async (event) => {
-        var _a;
-        const file = (_a = event.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
-        event.currentTarget.value = '';
-        if (!file || onReplaceCaptions === null) {
+    const { setSelectedModal } = react_1.default.useContext(modals_1.SetSelectedModalContext);
+    const importCaptions = (0, react_1.useCallback)(async ({ fileName, contents, }) => {
+        if (onReplaceCaptions === null) {
             return;
         }
         setIsImporting(true);
         try {
             onReplaceCaptions((0, parse_caption_file_1.parseCaptionFile)({
-                fileName: file.name,
-                contents: await file.text(),
+                fileName,
+                contents: await contents,
             }));
         }
         catch (error) {
-            (0, NotificationCenter_1.showNotification)(`Could not import ${file.name}: ${error instanceof Error ? error.message : String(error)}`, 5000);
+            (0, NotificationCenter_1.showNotification)(`Could not import ${fileName}: ${error instanceof Error ? error.message : String(error)}`, 5000);
         }
         finally {
             setIsImporting(false);
         }
     }, [onReplaceCaptions]);
+    const onFileSelected = (0, react_1.useCallback)((event) => {
+        var _a;
+        const file = (_a = event.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
+        event.currentTarget.value = '';
+        if (!file) {
+            return;
+        }
+        importCaptions({ fileName: file.name, contents: file.text() }).catch(() => undefined);
+    }, [importCaptions]);
+    const openCaptionSelection = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode: 'assets',
+            invocationTimestamp: Date.now(),
+            assetSelection: {
+                initialQuery: 'type:json',
+                onSelectFile: () => {
+                    var _a;
+                    return (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
+                },
+                onSelected: (asset) => {
+                    return importCaptions({
+                        fileName: asset.name,
+                        contents: fetch(asset.src).then((response) => response.text()),
+                    }).catch(() => undefined);
+                },
+            },
+            compositionSelection: null,
+        });
+    }, [importCaptions, setSelectedModal]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderEnd, children: [onReplaceCaptions === null ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: importCaptions, type: "file" }), jsx_runtime_1.jsxs(Button_1.Button, { buttonContainerStyle: {
-                                            alignItems: 'center',
-                                            display: 'flex',
-                                            gap: 4,
-                                        }, disabled: isImporting, onClick: () => {
-                                            var _a;
-                                            return (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
-                                        }, size: "condensed", title: importTooltip, children: [
-                                            jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: colors_1.CURRENT_COLOR, focusable: "false", style: { height: 12, width: 12 } }), isImporting ? 'Importing…' : 'Import'] })
-                                ] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
+                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: onFileSelected, type: "file" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Import captions", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: isImporting, onClick: openCaptionSelection, renderAction: (color) => (jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: color, focusable: "false", style: { height: 14, width: 14 } })), title: importTooltip, variant: null })] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
 };
 exports.CaptionInspector = CaptionInspector;

package/dist/components/CheckboardToggle.js

@@ -3,17 +3,12 @@ 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 accessibilityLabel = [
-    'Show transparency as checkerboard',
-    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(T)',
-]
-    .filter(no_react_1.NoReactInternals.truthy)
-    .join(' ');
 const CheckboardToggle = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const onClick = (0, react_1.useCallback)(() => {
@@ -21,8 +16,12 @@ const CheckboardToggle = () => {
             return !c;
         });
     }, [setCheckerboard]);
-    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 shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleCheckerboard');
+    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/Checkbox.d.ts

@@ -8,6 +8,7 @@ export declare const Checkbox: React.FC<{
     readonly checked: boolean;
     readonly onChange: React.ChangeEventHandler<HTMLInputElement>;
     readonly name: string;
+    readonly inputId?: string;
     readonly disabled?: boolean;
     readonly variant?: CheckboxVariant;
 }>;

package/dist/components/Checkbox.js

@@ -13,7 +13,7 @@ const CHECKMARK_SIZES = {
     default: 14,
     small: 13,
 };
-const Checkbox = ({ checked, onChange, disabled, name, variant = 'default' }) => {
+const Checkbox = ({ checked, onChange, disabled, inputId, name, variant = 'default' }) => {
     const size = SIZES[variant];
     const checkmarkSize = CHECKMARK_SIZES[variant];
     const background = (0, react_1.useMemo)(() => ({
@@ -47,7 +47,7 @@ const Checkbox = ({ checked, onChange, disabled, name, variant = 'default' }) =>
         };
     }, [disabled, size]);
     return (jsx_runtime_1.jsxs("div", { style: background, children: [
-            jsx_runtime_1.jsx("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: checkmarkSize }) : null })
+            jsx_runtime_1.jsx("input", { id: inputId, style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: checkmarkSize }) : null })
         ] }));
 };
 exports.Checkbox = Checkbox;

package/dist/components/CompositionContextButton.js

@@ -7,6 +7,7 @@ const client_id_1 = require("../helpers/client-id");
 const hoverable_1 = require("../helpers/hoverable");
 const ellipsis_1 = require("../icons/ellipsis");
 const InlineDropdown_1 = require("./InlineDropdown");
+const layout_1 = require("./layout");
 const revealStyle = {
     display: 'flex',
 };
@@ -26,6 +27,8 @@ const CompositionContextButton = ({ visible, getItems, readOnlyStudio }) => {
     if (!visible || (connectionStatus !== 'connected' && !readOnlyStudio)) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: revealStyle, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }) }));
+    return (jsx_runtime_1.jsxs("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: revealStyle, children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
+        ] }));
 };
 exports.CompositionContextButton = CompositionContextButton;

package/dist/components/CompositionSelectorItem.js

@@ -513,7 +513,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     if (item.type === 'folder') {
         const folderPath = getFolderPath(item);
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { style: reorderWrapper, children: [reorderLineStyle ? (jsx_runtime_1.jsx("div", { "data-composition-reorder-line": true, style: reorderLineStyle })) : null, jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: `__remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onItemDragStart, onDragEnd: onItemDragEnd, onDragOver: onRowDragOver, onDragLeave: onRowDragLeave, onDrop: onRowDrop, title: item.folderName, role: "button", "aria-expanded": item.expanded, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: colors_1.CURRENT_COLOR })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.CURRENT_COLOR, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: true, readOnlyStudio: window.remotion_isReadOnlyStudio })
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { style: reorderWrapper, children: [reorderLineStyle ? (jsx_runtime_1.jsx("div", { "data-composition-reorder-line": true, style: reorderLineStyle })) : null, jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: `__remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onItemDragStart, onDragEnd: onItemDragEnd, onDragOver: onRowDragOver, onDragLeave: onRowDragLeave, onDrop: onRowDrop, title: item.folderName, role: "button", "aria-expanded": item.expanded, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: colors_1.CURRENT_COLOR })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.CURRENT_COLOR, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.folderName }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: true, readOnlyStudio: window.remotion_isReadOnlyStudio })
                                     ] }) })
                         ] }) }), item.expanded ? (jsx_runtime_1.jsx("div", { onDragOver: onFolderChildListDragOver, onDrop: onFolderChildListDrop, children: item.items.map((childItem, index) => {
                         return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, canReorder: canReorder, activeDragRef: activeDragRef, parentFolderPath: folderPath, previousSibling: index === 0 ? null : item.items[index - 1], nextSibling: index === item.items.length - 1
@@ -522,7 +522,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                     }) })) : null] }));
     }
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { style: reorderWrapper, children: [reorderLineStyle ? (jsx_runtime_1.jsx("div", { "data-composition-reorder-line": true, style: reorderLineStyle })) : null, jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onItemDragStart, onDragEnd: onItemDragEnd, onDragOver: onRowDragOver, onDragLeave: onRowDragLeave, onDrop: onRowDrop, type: "button", title: item.composition.id, className: `__remotion-composition __remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, "data-compname": item.composition.id, children: [
-                            jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: colors_1.CURRENT_COLOR, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: !isDragging, readOnlyStudio: window.remotion_isReadOnlyStudio }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: !isDragging, composition: item.composition, readOnlyStudio: window.remotion_isReadOnlyStudio })
+                            jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: colors_1.CURRENT_COLOR, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.composition.id }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: !isDragging, readOnlyStudio: window.remotion_isReadOnlyStudio }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: !isDragging, composition: item.composition, readOnlyStudio: window.remotion_isReadOnlyStudio })
                         ] }) })
             ] }) }));
 };

package/dist/components/ConfigureLicenseModal.js

@@ -171,7 +171,7 @@ const LicenseSettings = () => {
     const displayedError = error !== null && error !== void 0 ? error : settingsError;
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { style: content, children: [
                 jsx_runtime_1.jsx(LicenseExplanation_1.LicenseExplanation, {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { "aria-label": "License type", role: "radiogroup", children: [
-                        jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'free', onClick: toggleFreeLicense, children: "I am eligible for the Free License" }), licenseType === 'free' ? (jsx_runtime_1.jsx("p", { style: freeLicenseMessage, children: "That's it! Enjoy Remotion." })) : null, jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'company', onClick: toggleCompanyLicense, children: "I need a Company License" }), licenseType === 'company' ? (jsx_runtime_1.jsxs("div", { style: companyLicenseContent, children: [
+                        jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'free', disabled: false, onClick: toggleFreeLicense, children: "I am eligible for the Free License" }), licenseType === 'free' ? (jsx_runtime_1.jsx("p", { style: freeLicenseMessage, children: "That's it! Enjoy Remotion." })) : null, jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'company', disabled: false, onClick: toggleCompanyLicense, children: "I need a Company License" }), licenseType === 'company' ? (jsx_runtime_1.jsxs("div", { style: companyLicenseContent, children: [
                                 jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsxs("a", { style: externalDescriptionLink, href: "https://remotion.pro/license", target: "_blank", rel: "noopener noreferrer", children: ["remotion.pro/license",
                                                 jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.BLUE, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
                                             ] }), ' ', "to obtain a license key. Then enter it here."] }), jsx_runtime_1.jsxs("label", { style: inputLabel, children: ["Public license key",