@remotion/studio 4.0.513 → 4.0.515

package/dist/components/NewComposition/duplicate-composition-api.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.duplicateComposition = void 0;
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const actions_1 = require("../RenderQueue/actions");
+const duplicateComposition = ({ codemod, dryRun, signal, symbolicatedStack, }) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations === null) {
+        return (0, actions_1.applyCodemod)({ codemod, dryRun, signal, symbolicatedStack }).then((result) => (result.success ? result : { ...result, stack: '' }));
+    }
+    return browserStudioOperations.duplicateComposition({
+        codemod,
+        dryRun,
+    });
+};
+exports.duplicateComposition = duplicateComposition;

package/dist/components/NoRegisterRoot.js

@@ -36,7 +36,7 @@ const NoRegisterRoot = () => {
     if (!show) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(remotion_1.AbsoluteFill, { style: container, children: [
+    return (jsx_runtime_1.jsxs(remotion_1.Internals.AbsoluteFillElement, { style: container, children: [
             jsx_runtime_1.jsx("div", { style: label, children: "Waiting for registerRoot() to get called." }), jsx_runtime_1.jsxs("div", { style: label, children: ["Learn more:", ' ', jsx_runtime_1.jsx("a", { target: '_blank', style: link, href: "https://www.remotion.dev/docs/register-root", children: "remotion.dev/docs/register-root" })
                 ] })
         ] }));

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -8,12 +8,13 @@ const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
 const quickSwitcherArea = {
-    padding: '4px 12px',
+    padding: '4px 0 4px 4px',
     borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
+    overflowY: 'auto',
 };
 const quickSwitcherTrigger = {
     backgroundColor: colors_1.WHITE_ALPHA_06,
-    borderRadius: 5,
+    borderRadius: 4,
     padding: '4px 10px',
     color: colors_1.LIGHT_TEXT,
     fontSize: 12,
@@ -40,6 +41,6 @@ const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex }) => {
             compositionSelection: null,
         });
     }, [mode, setSelectedModal]);
-    return (jsx_runtime_1.jsx("div", { style: quickSwitcherArea, children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", showShortcut && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] })) : null] }) }));
+    return (jsx_runtime_1.jsx("div", { style: quickSwitcherArea, className: "__remotion-vertical-scrollbar", children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", showShortcut && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] })) : null] }) }));
 };
 exports.ExplorerQuickSwitcherTrigger = ExplorerQuickSwitcherTrigger;

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -353,6 +353,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     const container = (0, react_1.useMemo)(() => {
         return {
             width: showKeyboardShortcuts ? 800 : 400,
+            maxWidth: 'calc(100vw - 40px)',
         };
     }, [showKeyboardShortcuts]);
     const results = (0, react_1.useMemo)(() => {

package/dist/components/QuickSwitcher/fuzzy-search.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fuzzySearch = fuzzySearch;
 function fuzzySearch(query, dataset) {
-    const q = query ? query.trim().toLowerCase() : '';
+    const q = query.trim().toLowerCase().replace(/[\s-]/g, '');
     const matchingIndices = [];
     if (q.length === 0) {
         for (let i = 0; i < dataset.length; i++) {

package/dist/components/RefreshCompositionOverlay.js

@@ -15,6 +15,6 @@ const shadow = {
     boxShadow: colors_1.SHADOW_BLACK,
 };
 const RefreshCompositionOverlay = () => {
-    return (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: exports.container, children: jsx_runtime_1.jsx("div", { style: shadow, children: jsx_runtime_1.jsx(RunningCalculateMetadata_1.RunningCalculateMetadata, {}) }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteFillElement, { style: exports.container, children: jsx_runtime_1.jsx("div", { style: shadow, children: jsx_runtime_1.jsx(RunningCalculateMetadata_1.RunningCalculateMetadata, {}) }) }));
 };
 exports.RefreshCompositionOverlay = RefreshCompositionOverlay;

package/dist/components/RenderButton.js

@@ -42,6 +42,7 @@ const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -200,18 +201,19 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
     }, [refresh]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
-    const canServerRender = connectionStatus === 'connected';
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const canServerRender = connectionStatus === 'connected' && !isBrowserStudio;
     const renderType = (0, react_1.useMemo)(() => {
         if (readOnlyStudio) {
             return preferredRenderType === 'render-command'
                 ? 'render-command'
                 : 'client-render';
         }
-        if (connectionStatus === 'disconnected') {
+        if (connectionStatus === 'disconnected' || isBrowserStudio) {
             return 'client-render';
         }
         return preferredRenderType;
-    }, [connectionStatus, preferredRenderType, readOnlyStudio]);
+    }, [connectionStatus, isBrowserStudio, preferredRenderType, readOnlyStudio]);
     const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
     const tooltip = renderType === 'render-command'
         ? 'Copy a CLI command to render this composition ' + shortcut
@@ -325,6 +327,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
             initialTransparent: null,
             initialMuted: null,
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
+            initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas,
             initialPageResponsiveness: 'medium',
         });
     }, [video, setSelectedModal, props, inFrame, outFrame, getCurrentFrame]);

package/dist/components/RenderModal/GuiRenderStatus.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GuiRenderStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
 const actions_1 = require("../RenderQueue/actions");
@@ -78,6 +79,7 @@ const DownloadsProgress = ({ downloads }) => {
         ] }));
 };
 const OpenFile = ({ job }) => {
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const labelStyle = (0, react_1.useMemo)(() => {
         return {
             ...label,
@@ -93,7 +95,7 @@ const OpenFile = ({ job }) => {
         (0, actions_1.openInFileExplorer)({ directory: job.outName });
     }, [job.outName]);
     return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [
-            jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { style: labelStyle, type: "button", onClick: onClick, children: job.outName }), jsx_runtime_1.jsx("div", { style: right, children: jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) })
+            jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), isBrowserStudio ? (jsx_runtime_1.jsx("div", { style: labelStyle, children: job.outName })) : (jsx_runtime_1.jsx("button", { style: labelStyle, type: "button", onClick: onClick, children: job.outName })), jsx_runtime_1.jsx("div", { style: right, children: jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) })
         ] }));
 };
 const GuiRenderStatus = ({ job }) => {

package/dist/components/RenderModal/RenderModalOutputName.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalOutputName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const get_file_manager_name_1 = require("../../helpers/get-file-manager-name");
 const folder_1 = require("../../icons/folder");
@@ -47,14 +48,13 @@ const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange,
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: openIconStyle, color: color });
     }, []);
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     return (jsx_runtime_1.jsxs("div", { style: outputNameRow, children: [
             jsx_runtime_1.jsx(layout_1.Column, { children: jsx_runtime_1.jsx("div", { style: layout_2.label, children: labelText }) }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { style: outputNameInputContainer, children: [
                         jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage, type: 'error' })
                             ] })) : existence ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [
-                                            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` }),
-                                            "Exists, will be overwritten"] }), type: 'warning' })
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` })), "Exists, will be overwritten"] }), type: 'warning' })
                             ] })) : null] }) })
         ] }));
 };

package/dist/components/RenderModal/WebRenderModal.js

@@ -6,6 +6,7 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const audio_1 = require("../../icons/audio");
 const certificate_1 = require("../../icons/certificate");
 const file_1 = require("../../icons/file");
@@ -79,7 +80,7 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 // TODO: Shortcut: Shift + R
 // TODO: Apply defaultCodec
 // TODO: Apply defaultOutName
-const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialPageResponsiveness, }) => {
+const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialAllowHtmlInCanvas, initialPageResponsiveness, }) => {
     var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
@@ -105,6 +106,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
             ? 'video'
             : 'still');
     const [tab, setTab] = (0, react_1.useState)('general');
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialStillImageFormat !== null && initialStillImageFormat !== void 0 ? initialStillImageFormat : 'png');
     const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
     const [logLevel, setLogLevel] = (0, react_1.useState)(() => initialLogLevel);
@@ -127,6 +129,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     const [transparent, setTransparent] = (0, react_1.useState)(initialTransparent !== null && initialTransparent !== void 0 ? initialTransparent : false);
     const [muted, setMuted] = (0, react_1.useState)(initialMuted !== null && initialMuted !== void 0 ? initialMuted : false);
     const [scale, setScale] = (0, react_1.useState)(initialScale !== null && initialScale !== void 0 ? initialScale : 1);
+    const [allowHtmlInCanvas, setAllowHtmlInCanvas] = (0, react_1.useState)(initialAllowHtmlInCanvas !== null && initialAllowHtmlInCanvas !== void 0 ? initialAllowHtmlInCanvas : false);
     const [pageResponsiveness, setPageResponsiveness] = (0, react_1.useState)(initialPageResponsiveness !== null && initialPageResponsiveness !== void 0 ? initialPageResponsiveness : 'medium');
     const encodableAudioCodecs = (0, use_encodable_audio_codecs_1.useEncodableAudioCodecs)(container);
     const encodableVideoCodecs = (0, use_encodable_video_codecs_1.useEncodableVideoCodecs)(container);
@@ -340,6 +343,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 logLevel,
                 licenseKey: publicLicenseKey,
                 scale,
+                allowHtmlInCanvas,
             }, compositionRef);
         }
         else {
@@ -366,6 +370,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 logLevel,
                 licenseKey: publicLicenseKey,
                 scale,
+                allowHtmlInCanvas,
                 pageResponsiveness,
             }, compositionRef);
         }
@@ -407,6 +412,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         addClientStillJob,
         addClientVideoJob,
         scale,
+        allowHtmlInCanvas,
         pageResponsiveness,
     ]);
     return (jsx_runtime_1.jsxs("div", { style: render_modals_1.outerModalStyle, children: [
@@ -414,15 +420,15 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
+                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
                                     type: 'settings',
                                     initialTab: 'license',
                                     initialPublicLicenseKey: publicLicenseKey,
-                                }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
+                                }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" }))] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,
-                            } })) : tab === 'picture' ? (jsx_runtime_1.jsx(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(WebRenderModalAudio_1.WebRenderModalAudio, { renderMode: renderMode, muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? (jsx_runtime_1.jsx(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, pageResponsiveness: pageResponsiveness, setPageResponsiveness: setPageResponsiveness })) : null })
+                            } })) : tab === 'picture' ? (jsx_runtime_1.jsx(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(WebRenderModalAudio_1.WebRenderModalAudio, { renderMode: renderMode, muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? (jsx_runtime_1.jsx(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, allowHtmlInCanvas: allowHtmlInCanvas, setAllowHtmlInCanvas: setAllowHtmlInCanvas, pageResponsiveness: pageResponsiveness, setPageResponsiveness: setPageResponsiveness })) : null })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/WebRenderModalAdvanced.d.ts

@@ -9,6 +9,8 @@ type WebRenderModalAdvancedProps = {
     readonly setMediaCacheSizeInBytes: React.Dispatch<React.SetStateAction<number | null>>;
     readonly hardwareAcceleration: 'no-preference' | 'prefer-hardware' | 'prefer-software';
     readonly setHardwareAcceleration: (value: 'no-preference' | 'prefer-hardware' | 'prefer-software') => void;
+    readonly allowHtmlInCanvas: boolean;
+    readonly setAllowHtmlInCanvas: React.Dispatch<React.SetStateAction<boolean>>;
     readonly pageResponsiveness: WebRendererPageResponsiveness;
     readonly setPageResponsiveness: React.Dispatch<React.SetStateAction<WebRendererPageResponsiveness>>;
 };

package/dist/components/RenderModal/WebRenderModalAdvanced.js

@@ -30,7 +30,7 @@ const PageResponsivenessDescription = () => {
                     " to give the browser more chances to update."] })
         ] }));
 };
-const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRenderTimeout, mediaCacheSizeInBytes, setMediaCacheSizeInBytes, hardwareAcceleration, setHardwareAcceleration, pageResponsiveness, setPageResponsiveness, }) => {
+const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRenderTimeout, mediaCacheSizeInBytes, setMediaCacheSizeInBytes, hardwareAcceleration, setHardwareAcceleration, allowHtmlInCanvas, setAllowHtmlInCanvas, pageResponsiveness, setPageResponsiveness, }) => {
     const toggleCustomMediaCacheSizeInBytes = (0, react_1.useCallback)(() => {
         setMediaCacheSizeInBytes((previous) => {
             if (previous === null) {
@@ -39,6 +39,9 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
             return null;
         });
     }, [setMediaCacheSizeInBytes]);
+    const toggleAllowHtmlInCanvas = (0, react_1.useCallback)(() => {
+        setAllowHtmlInCanvas((previous) => !previous);
+    }, [setAllowHtmlInCanvas]);
     const changeMediaCacheSizeInBytes = (0, react_1.useCallback)((cb) => {
         setMediaCacheSizeInBytes((prev) => {
             if (prev === null) {
@@ -160,7 +163,11 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })
                 ] }), mediaCacheSizeInBytes === null ? null : (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "@remotion/media cache size", formatter: (w) => `${w} bytes`, min: 0, max: 10000000000, step: 10 * 1024 * 1024, value: mediaCacheSizeInBytes, onValueChanged: changeMediaCacheSizeInBytes })), renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Hardware Acceleration" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: hardwareAccelerationOptions, selectedId: hardwareAcceleration, title: "Hardware Acceleration" }) })
-                ] })) : null, renderMode === 'still' ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Allow HTML-in-canvas ",
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "allowHtmlInCanvas", id: "allowHtmlInCanvasOption" })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: allowHtmlInCanvas, onChange: toggleAllowHtmlInCanvas, name: "allow-html-in-canvas" }) })
+                ] }), renderMode === 'still' ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Page Responsiveness ",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererCustomOptionExplainerBubble, { apiName: "pageResponsiveness", description: jsx_runtime_1.jsx(PageResponsivenessDescription, {}), docLink: "https://www.remotion.dev/docs/client-side-rendering/page-responsiveness", name: "Page responsiveness" })

package/dist/components/RenderModal/render-modals.js

@@ -20,15 +20,19 @@ exports.container = {
 exports.optionsPanel = {
     display: 'flex',
     flex: 1,
+    minHeight: 0,
     minWidth: 0,
+    overflowY: 'auto',
 };
 exports.horizontalLayout = {
     display: 'flex',
     flexDirection: 'row',
-    overflowY: 'auto',
     flex: 1,
+    minHeight: 0,
+    overflow: 'hidden',
 };
 exports.leftSidebar = {
+    flexShrink: 0,
     padding: 6,
 };
 exports.horizontalTab = {

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -4,6 +4,7 @@ exports.ClientRenderQueueProcessor = void 0;
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
 const save_render_output_1 = require("../../api/save-render-output");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const download_blob_1 = require("../../helpers/download-blob");
 const context_1 = require("./context");
 const ClientRenderQueueProcessor = () => {
@@ -33,6 +34,7 @@ const ClientRenderQueueProcessor = () => {
             licenseKey: (_b = job.licenseKey) !== null && _b !== void 0 ? _b : undefined,
             scale: job.scale,
             signal,
+            allowHtmlInCanvas: job.allowHtmlInCanvas,
         })).blob({ format: job.imageFormat });
         return {
             getBlob: () => Promise.resolve(blob),
@@ -86,6 +88,7 @@ const ClientRenderQueueProcessor = () => {
             outputTarget: 'web-fs',
             licenseKey: (_c = job.licenseKey) !== null && _c !== void 0 ? _c : undefined,
             pageResponsiveness: job.pageResponsiveness,
+            allowHtmlInCanvas: job.allowHtmlInCanvas,
         });
         return {
             getBlob,
@@ -118,7 +121,8 @@ const ClientRenderQueueProcessor = () => {
                 (0, download_blob_1.downloadBlob)(blob, job.outName);
                 markClientJobDone(job.id, metadata, getBlob);
             };
-            if (window.remotion_isReadOnlyStudio) {
+            if (window.remotion_isReadOnlyStudio ||
+                (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
                 downloadAndFinish();
             }
             else {

package/dist/components/RenderQueue/RenderQueueItem.js

@@ -4,6 +4,7 @@ exports.RenderQueueItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const url_state_1 = require("../../helpers/url-state");
 const layout_1 = require("../layout");
@@ -54,6 +55,7 @@ const RenderQueueItem = ({ job, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const { canDrag, isDragging, onDragEnd, onDragStart } = (0, use_render_output_file_drag_1.useRenderOutputFileDrag)(job);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
@@ -147,6 +149,6 @@ const RenderQueueItem = ({ job, selected }) => {
     return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, draggable: canDrag, onDragStart: onDragStart, onDragEnd: onDragEnd, className: selected ? SELECTED_CLASSNAME : undefined, children: [
             jsx_runtime_1.jsx(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [
                     jsx_runtime_1.jsx("div", { style: title, children: job.compositionId }), jsx_runtime_1.jsx("div", { style: subtitle, children: job.status === 'done' ? (jsx_runtime_1.jsx(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? (jsx_runtime_1.jsx(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : job.status === 'saving' ? (jsx_runtime_1.jsx(RenderQueueSavingMessage_1.RenderQueueSavingMessage, {})) : job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : null })
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [canCopyToClipboard ? (jsx_runtime_1.jsx(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, canRepeat ? jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : (jsx_runtime_1.jsx(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (clientBlobInfo ? (jsx_runtime_1.jsx(RenderQueueDownloadItem_1.RenderQueueDownloadItem, { job: job })) : (jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }))) : null] })) : null] }));
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [canCopyToClipboard ? (jsx_runtime_1.jsx(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, canRepeat ? jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (clientBlobInfo ? (jsx_runtime_1.jsx(RenderQueueDownloadItem_1.RenderQueueDownloadItem, { job: job })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }))) : null] })) : null] }));
 };
 exports.RenderQueueItem = RenderQueueItem;

package/dist/components/RenderQueue/RenderQueueOpenInFolder.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueOpenInFinderItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const folder_1 = require("../../icons/folder");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
 const RenderQueueOpenInFinderItem = ({ job }) => {
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         (0, actions_1.openInFileExplorer)({ directory: job.outName }).catch((err) => {
@@ -24,6 +26,6 @@ const RenderQueueOpenInFinderItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: icon, color: color });
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
+    return isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.RenderQueueOpenInFinderItem = RenderQueueOpenInFinderItem;

package/dist/components/RenderQueue/RenderQueueRemoveItem.js

@@ -46,6 +46,6 @@ const RenderQueueRemoveItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }));
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, title: "Remove", variant: null }));
 };
 exports.RenderQueueRemoveItem = RenderQueueRemoveItem;

package/dist/components/RenderQueue/actions.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyVisualControlChange = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
 const no_react_1 = require("remotion/no-react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
 const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, licenseKey, }) => {
     return (0, call_api_1.callApi)('/api/render', {
@@ -142,6 +143,10 @@ const applyCodemod = ({ codemod, dryRun, symbolicatedStack, signal, }) => {
         dryRun,
         symbolicatedStack,
     };
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations !== null) {
+        return browserStudioOperations.applyCodemod(body);
+    }
     return (0, call_api_1.callApi)('/api/apply-codemod', body, signal);
 };
 exports.applyCodemod = applyCodemod;
@@ -166,7 +171,7 @@ const getProjectInfo = (signal) => {
 };
 exports.getProjectInfo = getProjectInfo;
 const callUpdateDefaultPropsApi = (compositionId, defaultProps, enumPaths) => {
-    return (0, call_api_1.callApi)('/api/update-default-props', {
+    const body = {
         compositionId,
         defaultProps: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
             data: defaultProps,
@@ -174,7 +179,12 @@ const callUpdateDefaultPropsApi = (compositionId, defaultProps, enumPaths) => {
             staticBase: window.remotion_staticBase,
         }).serializedString,
         enumPaths,
-    });
+    };
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations !== null) {
+        return browserStudioOperations.updateDefaultProps(body);
+    }
+    return (0, call_api_1.callApi)('/api/update-default-props', body);
 };
 exports.callUpdateDefaultPropsApi = callUpdateDefaultPropsApi;
 const applyVisualControlChange = ({ fileName, changes, }) => {

package/dist/components/RenderQueue/client-side-render-types.d.ts

@@ -40,6 +40,7 @@ type ClientRenderJobBase = {
     logLevel: LogLevel;
     licenseKey: string | null;
     scale: number;
+    allowHtmlInCanvas: boolean;
 };
 export type ClientStillRenderJob = ClientRenderJobBase & {
     type: 'client-still';

package/dist/components/RenderingSettings.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RenderingSettings: React.FC;