@remotion/studio 4.0.522 → 4.0.524

package/dist/components/SegmentedControl.js

@@ -4,6 +4,7 @@ exports.SegmentedControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
 const z_index_1 = require("../state/z-index");
 const container = {
     display: 'flex',
@@ -19,6 +20,7 @@ const item = {
     fontSize: 15,
     padding: '4px 12px',
     appearance: 'none',
+    cursor: 'default',
     border: 'none',
     flex: 1,
     justifyContent: 'center',
@@ -30,6 +32,12 @@ const compactItem = {
     fontWeight: 400,
     padding: '2px 7px',
 };
+const mediumItem = {
+    ...item,
+    fontSize: 13,
+    fontWeight: 400,
+    padding: '3px 10px',
+};
 const SegmentedControl = ({ items, needsWrapping, size = 'default' }) => {
     const controlStyle = (0, react_1.useMemo)(() => {
         if (needsWrapping) {
@@ -45,26 +53,43 @@ const SegmentedControl = ({ items, needsWrapping, size = 'default' }) => {
             ...container,
         };
     }, [needsWrapping]);
-    return (jsx_runtime_1.jsx("div", { style: controlStyle, children: items.map((i) => {
+    const onKeyDown = (0, react_1.useCallback)((event) => {
+        if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+            return;
+        }
+        const buttons = Array.from(event.currentTarget.querySelectorAll('button:not(:disabled)'));
+        const index = buttons.indexOf(event.target);
+        if (index === -1) {
+            return;
+        }
+        event.preventDefault();
+        const direction = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;
+        const next = buttons[(index + direction + buttons.length) % buttons.length];
+        next.click();
+        requestAnimationFrame(() => next.focus());
+    }, []);
+    return (jsx_runtime_1.jsx("div", { style: controlStyle, onKeyDown: onKeyDown, children: items.map((i) => {
             return (jsx_runtime_1.jsx(Item, { onClick: i.onClick, selected: i.selected, size: size, children: i.label }, i.key));
         }) }));
 };
 exports.SegmentedControl = SegmentedControl;
 const Item = ({ selected, onClick, children, size }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
     const itemStyle = (0, react_1.useMemo)(() => {
         return {
-            ...(size === 'compact' ? compactItem : item),
-            backgroundColor: selected ? colors_1.INPUT_BACKGROUND : colors_1.TRANSPARENT,
-            color: selected ? colors_1.WHITE : hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+            ...(size === 'compact'
+                ? compactItem
+                : size === 'medium'
+                    ? mediumItem
+                    : item),
+            opacity: onClick === null ? 0.5 : 1,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: selected ? colors_1.INPUT_BACKGROUND : colors_1.TRANSPARENT,
+                hoverBackground: selected ? colors_1.INPUT_BACKGROUND : colors_1.TRANSPARENT,
+                idleColor: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+                hoverColor: onClick === null ? colors_1.LIGHT_TEXT : colors_1.WHITE,
+            }),
         };
-    }, [hovered, selected, size]);
-    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
+    }, [onClick, selected, size]);
+    return (jsx_runtime_1.jsx("button", { type: "button", "aria-pressed": selected, disabled: onClick === null, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: itemStyle, tabIndex: tabIndex, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, children: children }));
 };

package/dist/components/SelectedOutlinePolygon.js

@@ -345,7 +345,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         setDragOverrides,
         translateWithCommandKey,
     ]);
-    const onDoubleClick = react_1.default.useCallback((event) => {
+    const performDoubleClick = react_1.default.useCallback((event) => {
         const target = getTarget();
         if (target === undefined) {
             return;
@@ -356,6 +356,12 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         event.preventDefault();
         event.stopPropagation();
     }, [dragAwareDoubleClick, getTarget, onDoubleClickTarget]);
+    const onClick = react_1.default.useCallback((event) => {
+        if (!dragAwareDoubleClick.acceptClickAsDoubleClick(event)) {
+            return;
+        }
+        performDoubleClick(event);
+    }, [dragAwareDoubleClick, performDoubleClick]);
     const onEffectDragOver = react_1.default.useCallback((event) => {
         if (!(0, effect_drag_and_drop_1.hasEffectDragType)(event.dataTransfer)) {
             return;
@@ -411,6 +417,6 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             if (!dragging) {
                 onHoverChange(null);
             }
-        }, onPointerDown: onPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, onDoubleClick: onDoubleClick, onDragOver: onEffectDragOver, onDragLeave: onEffectDragLeave, onDrop: onEffectDrop }));
+        }, onPointerDown: onPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, onClick: onClick, onDragOver: onEffectDragOver, onDragLeave: onEffectDragLeave, onDrop: onEffectDrop }));
 };
 exports.SelectedOutlinePolygon = react_1.default.memo(SelectedOutlinePolygonUnmemoized);

package/dist/components/SettingsButton.d.ts

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

package/dist/components/SettingsButton.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsButton = 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 gear_1 = require("../icons/gear");
+const modals_1 = require("../state/modals");
+const ActionTooltip_1 = require("./ActionTooltip");
+const InlineAction_1 = require("./InlineAction");
+const UpdateStatusContext_1 = require("./UpdateStatusContext");
+const SettingsButton = ({ showUpdates }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { info, knownBugs } = (0, UpdateStatusContext_1.useUpdateStatus)();
+    const updateAvailable = showUpdates &&
+        Boolean((info === null || info === void 0 ? void 0 : info.updateAvailable) || (info === null || info === void 0 ? void 0 : info.skillsUpdateAvailable));
+    const hasBugfixesAvailable = showUpdates &&
+        Boolean((info === null || info === void 0 ? void 0 : info.updateAvailable) && knownBugs && knownBugs.length > 0);
+    const openModal = (0, react_1.useCallback)(() => {
+        var _a;
+        var _b;
+        setSelectedModal({
+            type: 'settings',
+            initialTab: updateAvailable
+                ? 'updates'
+                : (0, browser_studio_operations_1.getBrowserStudioOperations)() === null
+                    ? 'studio'
+                    : 'shortcuts',
+            initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+        });
+    }, [setSelectedModal, updateAvailable]);
+    const renderGearIcon = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, width: 16, height: 16 });
+    }, []);
+    const renderUpdateIcon = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                height: 16,
+                width: 16,
+                color,
+                flexShrink: 0,
+            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM377 231L273 127c-9.4-9.4-24.6-9.4-33.9 0L135 231c-6.9 6.9-8.9 17.2-5.2 26.2S142.3 272 152 272l40 0 0 72c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-72 40 0c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2z" }) }));
+    }, []);
+    const label = hasBugfixesAvailable
+        ? 'Bugfixes available'
+        : updateAvailable
+            ? 'Update available'
+            : 'Settings';
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: label, shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openModal, renderAction: updateAvailable ? renderUpdateIcon : renderGearIcon, unhoveredColor: hasBugfixesAvailable ? colors_1.WARNING_COLOR : colors_1.WHITE_ALPHA_80, title: "", "aria-label": label }) }));
+};
+exports.SettingsButton = SettingsButton;

package/dist/components/SettingsModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type SettingsTab = 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'skills' | 'license' | 'updates';
+type SettingsTab = 'apps' | 'rendering' | 'studio' | 'packages' | 'models' | 'shortcuts' | 'skills' | 'license' | 'updates';
 export declare const SettingsModal: React.FC<{
     readonly initialTab: SettingsTab;
     readonly initialPublicLicenseKey: string | null;

package/dist/components/SettingsModal.js

@@ -10,6 +10,7 @@ const apps_1 = require("../icons/apps");
 const cloud_download_1 = require("../icons/cloud-download");
 const keyboard_1 = require("../icons/keyboard");
 const license_1 = require("../icons/license");
+const models_1 = require("../icons/models");
 const package_1 = require("../icons/package");
 const remotion_triangle_1 = require("../icons/remotion-triangle");
 const skills_1 = require("../icons/skills");
@@ -21,6 +22,7 @@ const InstallPackage_1 = require("./InstallPackage");
 const KeyboardShortcutsSettings_1 = require("./KeyboardShortcutsSettings");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const ModalHeader_1 = require("./ModalHeader");
+const ModelsSettings_1 = require("./ModelsSettings");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
 const RenderingSettings_1 = require("./RenderingSettings");
 const render_modals_1 = require("./RenderModal/render-modals");
@@ -102,6 +104,6 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     }, [initialPublicLicenseKey, setPublicLicenseKey]);
     return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: render_modals_1.outerModalStyle, children: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                 jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Settings", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), showPackages ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })), showUpdates ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'updates', onClick: () => selectTab('updates'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: render_modals_1.icon }) })), children: "Updates" })) : null] }), openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null, showUpdates && openedTabs.includes('updates') ? (jsx_runtime_1.jsx("div", { style: tab === 'updates' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(UpdatesSettings_1.UpdatesSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio || tab === 'updates' ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
+                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), showPackages ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => selectTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" }), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })), showUpdates ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'updates', onClick: () => selectTab('updates'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: render_modals_1.icon }) })), children: "Updates" })) : null] }), openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('models') ? (jsx_runtime_1.jsx("div", { style: tab === 'models' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ModelsSettings_1.ModelsSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null, showUpdates && openedTabs.includes('updates') ? (jsx_runtime_1.jsx("div", { style: tab === 'updates' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(UpdatesSettings_1.UpdatesSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio || tab === 'models' || tab === 'updates' ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/ShowOutlinesProvider.js

@@ -5,9 +5,21 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const editor_outlines_1 = require("../state/editor-outlines");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
+const browserStudioPointerLeaveEvent = 'remotion-browser-studio-pointerleave';
 const ShowOutlinesProvider = ({ children }) => {
     const [editorShowOutlines, setEditorShowOutlinesState] = (0, react_1.useState)(() => (0, editor_outlines_1.loadEditorShowOutlinesOption)());
     const timelineSequenceHoverStore = (0, react_1.useMemo)(() => (0, timeline_sequence_hover_1.createTimelineSequenceHoverStore)(), []);
+    (0, react_1.useEffect)(() => {
+        const onPointerLeave = () => {
+            timelineSequenceHoverStore.setHoveredSequence((hover) => (hover === null || hover === void 0 ? void 0 : hover.source) === 'timeline' ? null : hover);
+        };
+        window.addEventListener('pointerleave', onPointerLeave);
+        window.addEventListener(browserStudioPointerLeaveEvent, onPointerLeave);
+        return () => {
+            window.removeEventListener('pointerleave', onPointerLeave);
+            window.removeEventListener(browserStudioPointerLeaveEvent, onPointerLeave);
+        };
+    }, [timelineSequenceHoverStore]);
     const setEditorShowOutlines = (0, react_1.useCallback)((newValue) => {
         setEditorShowOutlinesState((prevState) => {
             const newVal = newValue(prevState);

package/dist/components/SidebarCollapserControls.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidebarCollapserControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 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 sidebar_1 = require("../state/sidebar");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineAction_1 = require("./InlineAction");
 const TopPanel_1 = require("./TopPanel");
 const style = {
@@ -92,8 +93,7 @@ const SidebarCollapserControl = ({ side }) => {
         if (side === 'left') {
             const left = keybindings.registerKeybinding({
                 event: 'keydown',
-                key: 'b',
-                commandCtrlKey: true,
+                action: 'toggleLeftSidebar',
                 callback: toggleLeft,
                 preventDefault: true,
                 triggerIfInputFieldFocused: false,
@@ -101,8 +101,7 @@ const SidebarCollapserControl = ({ side }) => {
             });
             const zen = keybindings.registerKeybinding({
                 event: 'keydown',
-                key: 'g',
-                commandCtrlKey: true,
+                action: 'toggleBothSidebars',
                 callback: toggleBoth,
                 preventDefault: true,
                 triggerIfInputFieldFocused: false,
@@ -115,8 +114,7 @@ const SidebarCollapserControl = ({ side }) => {
         }
         const right = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'j',
-            commandCtrlKey: true,
+            action: 'toggleRightSidebar',
             callback: toggleRight,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -126,12 +124,13 @@ const SidebarCollapserControl = ({ side }) => {
             right.unregister();
         };
     }, [keybindings, side, toggleBoth, toggleLeft, toggleRight]);
-    const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
-        ? 'Toggle Left Sidebar'
-        : `Toggle Left Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+B)`;
-    const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
-        ? 'Toggle Right Sidebar'
-        : `Toggle Right Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+J)`;
+    const action = side === 'left' ? 'toggleLeftSidebar' : 'toggleRightSidebar';
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)(action);
+    const ariaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)(action);
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
+    const expanded = (side === 'left' ? leftSidebarStatus : sidebarCollapsedStateRight) ===
+        'expanded' && sidebarCollapsedDuringDrag !== side;
+    const label = `${expanded ? 'Collapse' : 'Expand'} ${side} sidebar`;
     const colorStyle = (0, react_1.useCallback)((color) => {
         return {
             ...style,
@@ -139,14 +138,11 @@ const SidebarCollapserControl = ({ side }) => {
         };
     }, []);
     const toggleLeftAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "left", style: colorStyle(color), title: toggleLeftTooltip, children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
-    }, [colorStyle, leftIcon, toggleLeftTooltip]);
+        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "left", style: colorStyle(color), children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
+    }, [colorStyle, leftIcon]);
     const toggleRightAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
-    }, [colorStyle, rightIcon, toggleRightTooltip]);
-    if (side === 'left') {
-        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleLeft, renderAction: toggleLeftAction, style: { marginRight: 4 } }));
-    }
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleRight, renderAction: toggleRightAction }));
+        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
+    }, [colorStyle, rightIcon]);
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: label, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: side === 'left' ? toggleLeft : toggleRight, renderAction: side === 'left' ? toggleLeftAction : toggleRightAction, style: side === 'left' ? { marginRight: 4 } : undefined, "aria-label": label, "aria-expanded": expanded, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined }) }));
 };
 exports.SidebarCollapserControl = SidebarCollapserControl;

package/dist/components/SizeSelector.js

@@ -6,6 +6,8 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const canvas_zoom_1 = require("../icons/canvas-zoom");
 const Checkmark_1 = require("../icons/Checkmark");
 const TimelineCombobox_1 = require("./TimelineCombobox");
@@ -46,7 +48,7 @@ const getPreviewSizeLabel = (previewSize) => {
     return `${(previewSize.size * 100).toFixed(0)}%`;
 };
 exports.getPreviewSizeLabel = getPreviewSizeLabel;
-const accessibilityLabel = 'Preview Size';
+const accessibilityLabel = 'Zoom';
 const getUniqueSizes = (size) => {
     const customPreviewSizes = [size, ...commonPreviewSizes];
     const uniqueSizes = [];
@@ -87,6 +89,10 @@ const usePreviewSizeMenuItems = () => {
         }
         return false;
     }, [canvasContent]);
+    const configuredResetZoomShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('resetZoom');
+    const resetZoomShortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? ''
+        : configuredResetZoomShortcut;
     const items = (0, react_1.useMemo)(() => {
         return (0, exports.getUniqueSizes)(size).map((newSize) => {
             return {
@@ -99,13 +105,15 @@ const usePreviewSizeMenuItems = () => {
                 },
                 type: 'item',
                 value: newSize.size,
-                keyHint: newSize.size === 'auto' ? '0' : null,
+                keyHint: newSize.size === 'auto' && resetZoomShortcut !== ''
+                    ? resetZoomShortcut
+                    : null,
                 leftItem: String(size.size) === String(newSize.size) ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,
             };
         });
-    }, [setSize, size]);
+    }, [resetZoomShortcut, setSize, size]);
     return {
         items,
         selectedId: String(size.size),
@@ -118,6 +126,6 @@ const SizeSelector = () => {
     if (!zoomable) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, selectedId: selectedId, values: items, renderLeftItem: (color) => selectedId === 'auto' ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasFitIcon, { color: color })) : Number(selectedId) < 1 ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color })) : (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, tooltipDelay: 800, selectedId: selectedId, values: items, renderLeftItem: (color) => selectedId === 'auto' ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasFitIcon, { color: color })) : Number(selectedId) < 1 ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color })) : (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/SkillsSettings.js

@@ -8,7 +8,6 @@ const copy_text_1 = require("../helpers/copy-text");
 const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
 const check_circle_filled_1 = require("../icons/check-circle-filled");
 const copy_1 = require("../icons/copy");
-const minus_1 = require("../icons/minus");
 const InlineAction_1 = require("./InlineAction");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -126,8 +125,8 @@ const SkillsSettings = () => {
                                 : 'Not installed';
                     return (jsx_runtime_1.jsxs("div", { role: "listitem", style: index === remotionSkillsInfo.skills.length - 1
                             ? lastSkillRow
-                            : skillRow, children: [installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : (jsx_runtime_1.jsx(minus_1.Minus, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: statusIcon })), jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), jsx_runtime_1.jsx("span", { style: status, children: installedLocation })
-                        ] }, skill.name));
+                            : skillRow, children: [
+                            jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), jsx_runtime_1.jsx("span", { style: status, children: installedLocation }), installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null] }, skill.name));
                 }) })) : null] }));
 };
 exports.SkillsSettings = SkillsSettings;

package/dist/components/SnappingToggle.js

@@ -3,23 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SnappingToggle = 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 magnet_1 = require("../icons/magnet");
 const editor_snapping_1 = require("../state/editor-snapping");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
 const SnappingToggle = () => {
     const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const onClick = (0, react_1.useCallback)(() => {
         setEditorSnapping((current) => !current);
     }, [setEditorSnapping]);
-    const accessibilityLabel = [
-        editorSnapping ? 'Disable snapping' : 'Enable snapping',
-        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(Shift+M)',
-    ]
-        .filter(no_react_1.NoReactInternals.truthy)
-        .join(' ');
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: (color) => (jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 18, height: 18, transform: 'translateY(1px)' }, color: editorSnapping ? colors_1.BLUE : color, "aria-hidden": "true", focusable: "false" })) }));
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleSnapping');
+    const ariaKeyShortcuts = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleSnapping');
+    const accessibilityLabel = editorSnapping
+        ? 'Disable snapping'
+        : 'Enable snapping';
+    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": editorSnapping, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 18, height: 18, transform: 'translateY(1px)' }, color: editorSnapping ? colors_1.BLUE : color, "aria-hidden": "true", focusable: "false" })) }) }));
 };
 exports.SnappingToggle = SnappingToggle;

package/dist/components/StudioSettings.js

@@ -3,20 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StudioSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@remotion/renderer/client");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const undo_1 = require("../icons/undo");
 const Button_1 = require("./Button");
+const Checkbox_1 = require("./Checkbox");
 const ConfigSelect_1 = require("./ConfigSelect");
 const styles_1 = require("./InspectorPanel/styles");
 const layout_1 = require("./layout");
 const InputDragger_1 = require("./NewComposition/InputDragger");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const InfoBubble_1 = require("./RenderModal/InfoBubble");
 const layout_2 = require("./RenderModal/layout");
 const SettingsContext_1 = require("./SettingsContext");
 const use_auto_save_config_1 = require("./use-auto-save-config");
 const container = {
+    alignSelf: 'flex-start',
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
@@ -47,11 +49,10 @@ const initialSettings = {
     numberOfSharedAudioTags: null,
     rspack: null,
 };
-const ConfigNumber = ({ defaultLabel, defaultValue, name, onChange, onChangeEnd, value, }) => {
-    const resolvedDefaultLabel = defaultLabel !== null && defaultLabel !== void 0 ? defaultLabel : String(defaultValue);
+const ConfigNumber = ({ defaultValue, name, onChange, onChangeEnd, value, }) => {
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
             jsx_runtime_1.jsx("div", { style: layout_2.label, children: name }), jsx_runtime_1.jsxs("div", { style: { ...layout_2.rightRow, gap: 6 }, children: [
-                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": name, buttonStyle: { textAlign: 'right', width: 140 }, formatter: () => value === null ? `Default (${resolvedDefaultLabel})` : String(value), min: 0, onTextChange: () => undefined, onValueChange: onChange, onValueChangeEnd: onChangeEnd, placeholder: `Default (${resolvedDefaultLabel})`, rightAlign: true, status: "ok", step: 1, value: value !== null && value !== void 0 ? value : defaultValue }), jsx_runtime_1.jsx(Button_1.Button, { disabled: value === null, onClick: () => onChangeEnd(null), size: "compact", style: { color: colors_1.LIGHT_TEXT }, title: `Use default (${resolvedDefaultLabel})`, children: jsx_runtime_1.jsx(undo_1.UndoIcon, { style: resetIcon }) })
+                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": name, buttonStyle: { textAlign: 'right', width: 140 }, formatter: () => value === null ? `Default (${defaultValue})` : String(value), min: 0, onTextChange: () => undefined, onValueChange: onChange, onValueChangeEnd: onChangeEnd, placeholder: `Default (${defaultValue})`, rightAlign: true, status: "ok", step: 1, value: value !== null && value !== void 0 ? value : defaultValue }), jsx_runtime_1.jsx(Button_1.Button, { disabled: value === null, onClick: () => onChangeEnd(null), size: "compact", style: { color: colors_1.LIGHT_TEXT }, title: `Use default (${defaultValue})`, children: jsx_runtime_1.jsx(undo_1.UndoIcon, { style: resetIcon }) })
                 ] })
         ] }));
 };
@@ -59,20 +60,19 @@ const StudioSettings = () => {
     var _a;
     const { error: settingsError, revision, studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
     const [settings, setSettings] = (0, react_1.useState)(initialSettings);
-    const [committedNumberSettings, setCommittedNumberSettings] = (0, react_1.useState)({ maxTimelineTracks: null, numberOfSharedAudioTags: null });
+    const [committedNumberSettings, setCommittedNumberSettings] = (0, react_1.useState)({ numberOfSharedAudioTags: null });
     const [editedSetters, setEditedSetters] = (0, react_1.useState)(() => new Set());
     const [syncedRevision, setSyncedRevision] = (0, react_1.useState)(-1);
     const [error, setError] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
-        var _a, _b;
-        var _c, _d, _e;
+        var _a;
+        var _b, _c;
         if (studioRuntimeConfig === null) {
             return;
         }
-        setSettings((_c = studioRuntimeConfig.configFileStudioSettings) !== null && _c !== void 0 ? _c : initialSettings);
+        setSettings((_b = studioRuntimeConfig.configFileStudioSettings) !== null && _b !== void 0 ? _b : initialSettings);
         setCommittedNumberSettings({
-            maxTimelineTracks: (_d = (_a = studioRuntimeConfig.configFileStudioSettings) === null || _a === void 0 ? void 0 : _a.maxTimelineTracks) !== null && _d !== void 0 ? _d : null,
-            numberOfSharedAudioTags: (_e = (_b = studioRuntimeConfig.configFileStudioSettings) === null || _b === void 0 ? void 0 : _b.numberOfSharedAudioTags) !== null && _e !== void 0 ? _e : null,
+            numberOfSharedAudioTags: (_c = (_a = studioRuntimeConfig.configFileStudioSettings) === null || _a === void 0 ? void 0 : _a.numberOfSharedAudioTags) !== null && _c !== void 0 ? _c : null,
         });
         setEditedSetters(new Set());
         setSyncedRevision(revision);
@@ -96,7 +96,6 @@ const StudioSettings = () => {
             update('setAskAIEnabled', settings.askAIEnabled),
             update('setEnableCrossSiteIsolation', settings.enableCrossSiteIsolation),
             update('setBeepOnFinish', settings.beepOnFinish),
-            update('setMaxTimelineTracks', committedNumberSettings.maxTimelineTracks),
             update('setAudioLatencyHint', settings.audioLatencyHint),
             update('setNumberOfSharedAudioTags', committedNumberSettings.numberOfSharedAudioTags),
             update('setRspack', settings.rspack),
@@ -126,17 +125,32 @@ const StudioSettings = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Interface" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Enabled", name: "Ask AI enabled", onChange: (value) => changeSetting('askAIEnabled', 'setAskAIEnabled', value), options: ConfigSelect_1.booleanOptions, value: settings.askAIEnabled }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Enabled", name: "Interactivity enabled", onChange: (value) => changeSetting('interactivityEnabled', 'setInteractivityEnabled', value), options: ConfigSelect_1.booleanOptions, value: settings.interactivityEnabled }), jsx_runtime_1.jsx(ConfigNumber, { defaultLabel: "Unlimited", defaultValue: studio_shared_1.DEFAULT_TIMELINE_TRACKS, name: "Max timeline tracks", onChange: (value) => previewNumberSetting('maxTimelineTracks', value), onChangeEnd: (value) => commitNumberSetting('maxTimelineTracks', 'setMaxTimelineTracks', value), value: settings.maxTimelineTracks }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Audio" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Playback", name: "Audio latency hint", onChange: (value) => changeSetting('audioLatencyHint', 'setAudioLatencyHint', value), options: [
-                    { label: 'Interactive', value: 'interactive' },
-                    { label: 'Balanced', value: 'balanced' },
-                    { label: 'Playback', value: 'playback' },
-                ], value: settings.audioLatencyHint }), jsx_runtime_1.jsx(ConfigNumber, { defaultValue: 0, name: "Number of shared audio tags", onChange: (value) => previewNumberSetting('numberOfSharedAudioTags', value), onChangeEnd: (value) => commitNumberSetting('numberOfSharedAudioTags', 'setNumberOfSharedAudioTags', value), value: settings.numberOfSharedAudioTags }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Disabled", name: "Beep on finish", onChange: (value) => changeSetting('beepOnFinish', 'setBeepOnFinish', value), options: ConfigSelect_1.booleanOptions, value: settings.beepOnFinish }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Development" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Webpack", name: "Bundler", onChange: (value) => changeSetting('rspack', 'setRspack', value), options: [
+            jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Development" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Webpack", name: "Bundler", onChange: (value) => changeSetting('rspack', 'setRspack', value), options: [
                     { label: 'Rspack', value: true },
                     { label: 'Webpack', value: false },
-                ], value: settings.rspack }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Disabled", name: "Cross-site isolation", onChange: (value) => changeSetting('enableCrossSiteIsolation', 'setEnableCrossSiteIsolation', value), options: ConfigSelect_1.booleanOptions, value: settings.enableCrossSiteIsolation }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Info", name: "Log level", onChange: (value) => changeSetting('logLevel', 'setLogLevel', value), options: client_1.BrowserSafeApis.logLevels.map((value) => ({
+                ], value: settings.rspack }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Cross-site isolation",
+                            jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "About cross-site isolation", horizontalAlignment: "right", children: jsx_runtime_1.jsx("div", { style: {
+                                        padding: 12,
+                                        maxWidth: 280,
+                                        fontSize: 14,
+                                        lineHeight: 1.5,
+                                    }, children: "Isolates Studio from other websites to enable shared memory and multithreading. Required for @remotion/whisper-web and can speed up ProRes decoding. Media from other websites that requires cookies or authentication may not load. Disabled by default." }) })
+                        ] }), jsx_runtime_1.jsx("label", { style: layout_2.rightRow, "aria-label": "Cross-site isolation", children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: settings.enableCrossSiteIsolation === true, name: "Cross-site isolation", onChange: (event) => changeSetting('enableCrossSiteIsolation', 'setEnableCrossSiteIsolation', event.target.checked ? true : null) }) })
+                ] }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Info", name: "Log level", onChange: (value) => changeSetting('logLevel', 'setLogLevel', value), options: client_1.BrowserSafeApis.logLevels.map((value) => ({
                     label: value[0].toUpperCase() + value.slice(1),
                     value,
-                })), value: settings.logLevel }), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                })), value: settings.logLevel }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Interface" }), jsx_runtime_1.jsxs("label", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Ask AI enabled" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: settings.askAIEnabled !== false, name: "Ask AI enabled", onChange: (event) => changeSetting('askAIEnabled', 'setAskAIEnabled', event.target.checked ? null : false) }) })
+                ] }), jsx_runtime_1.jsxs("label", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Interactivity enabled" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: settings.interactivityEnabled !== false, name: "Interactivity enabled", onChange: (event) => changeSetting('interactivityEnabled', 'setInteractivityEnabled', event.target.checked ? null : false) }) })
+                ] }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Audio" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Playback", name: "Audio latency hint", onChange: (value) => changeSetting('audioLatencyHint', 'setAudioLatencyHint', value), options: [
+                    { label: 'Interactive', value: 'interactive' },
+                    { label: 'Balanced', value: 'balanced' },
+                    { label: 'Playback', value: 'playback' },
+                ], value: settings.audioLatencyHint }), jsx_runtime_1.jsx(ConfigNumber, { defaultValue: 0, name: "Number of shared audio tags", onChange: (value) => previewNumberSetting('numberOfSharedAudioTags', value), onChangeEnd: (value) => commitNumberSetting('numberOfSharedAudioTags', 'setNumberOfSharedAudioTags', value), value: settings.numberOfSharedAudioTags }), jsx_runtime_1.jsxs("label", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Beep on finish" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: settings.beepOnFinish === true, name: "Beep on finish", onChange: (event) => changeSetting('beepOnFinish', 'setBeepOnFinish', event.target.checked ? true : null) }) })
+                ] }), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: { paddingLeft: 16, paddingRight: 16 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: (_a = error !== null && error !== void 0 ? error : settingsError) !== null && _a !== void 0 ? _a : '', type: "error" }) })
                 ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
         ] }));

package/dist/components/SyntaxHighlightedSource.d.ts

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