@remotion/studio 4.0.521 → 4.0.523

package/dist/components/RendersTab.js

@@ -25,9 +25,9 @@ const badge = {
     alignItems: 'center',
 };
 const RendersTab = ({ selected, onClick }) => {
-    const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
-    const failedJobs = jobs.filter((j) => j.status === 'failed').length;
-    const jobCount = jobs.length;
+    const { jobs, captionJobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const failedJobs = [...jobs, ...captionJobs].filter((job) => job.status === 'failed').length;
+    const jobCount = jobs.length + captionJobs.length;
     const badgeStyle = (0, react_1.useMemo)(() => {
         return {
             ...badge,
@@ -38,7 +38,7 @@ const RendersTab = ({ selected, onClick }) => {
             borderColor: colors_1.LIGHT_TEXT,
         };
     }, [failedJobs]);
-    return (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: selected, onClick: onClick, children: jsx_runtime_1.jsxs("div", { style: row, children: ["Renders", jobCount > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: selected, onClick: onClick, children: jsx_runtime_1.jsxs("div", { style: row, children: ["Jobs", jobCount > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx("div", { style: badgeStyle, children: jobCount })
                     ] })) : null] }) }));
 };

package/dist/components/SegmentedControl.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 export type SegmentedControlItem = {
     label: React.ReactNode;
-    onClick: () => void;
+    onClick: (() => void) | null;
     key: string;
     selected: boolean;
 };
-type SegmentedControlSize = 'default' | 'compact';
+type SegmentedControlSize = 'default' | 'medium' | 'compact';
 export declare const SegmentedControl: React.FC<{
     readonly items: SegmentedControlItem[];
     readonly needsWrapping: boolean;

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,49 @@
+"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 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
+                    ? 'rendering'
+                    : '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" }) }));
+    }, []);
+    return (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: hasBugfixesAvailable
+            ? 'Bugfixes available'
+            : updateAvailable
+                ? 'Update available'
+                : 'Settings' }));
+};
+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 === '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" })), 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,9 +3,9 @@ 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 InlineAction_1 = require("./InlineAction");
 const TopPanel_1 = require("./TopPanel");
@@ -19,7 +19,7 @@ const style = {
     position: 'relative',
 };
 const SidebarCollapserControl = ({ side }) => {
-    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const { setSidebarCollapsedState, sidebarCollapsedStateRight, sidebarCollapsedDuringDrag, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const leftSidebarStatus = (0, TopPanel_1.useResponsiveSidebarStatus)();
     const leftIcon = (0, react_1.useCallback)((color) => {
@@ -27,9 +27,12 @@ const SidebarCollapserControl = ({ side }) => {
             width: '35%',
             height: '100%',
             borderRight: '1px solid ' + color,
-            background: leftSidebarStatus === 'expanded' ? color : colors_1.TRANSPARENT,
+            background: leftSidebarStatus === 'expanded' &&
+                sidebarCollapsedDuringDrag !== 'left'
+                ? color
+                : colors_1.TRANSPARENT,
         };
-    }, [leftSidebarStatus]);
+    }, [leftSidebarStatus, sidebarCollapsedDuringDrag]);
     const rightIcon = (0, react_1.useCallback)((color) => {
         return {
             width: '35%',
@@ -37,9 +40,12 @@ const SidebarCollapserControl = ({ side }) => {
             right: 0,
             position: 'absolute',
             borderLeft: '1px solid ' + color,
-            background: sidebarCollapsedStateRight === 'expanded' ? color : colors_1.TRANSPARENT,
+            background: sidebarCollapsedStateRight === 'expanded' &&
+                sidebarCollapsedDuringDrag !== 'right'
+                ? color
+                : colors_1.TRANSPARENT,
         };
-    }, [sidebarCollapsedStateRight]);
+    }, [sidebarCollapsedStateRight, sidebarCollapsedDuringDrag]);
     const toggleLeft = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({
             left: (s) => {
@@ -86,8 +92,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,
@@ -95,8 +100,7 @@ const SidebarCollapserControl = ({ side }) => {
             });
             const zen = keybindings.registerKeybinding({
                 event: 'keydown',
-                key: 'g',
-                commandCtrlKey: true,
+                action: 'toggleBothSidebars',
                 callback: toggleBoth,
                 preventDefault: true,
                 triggerIfInputFieldFocused: false,
@@ -109,8 +113,7 @@ const SidebarCollapserControl = ({ side }) => {
         }
         const right = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'j',
-            commandCtrlKey: true,
+            action: 'toggleRightSidebar',
             callback: toggleRight,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -120,12 +123,14 @@ const SidebarCollapserControl = ({ side }) => {
             right.unregister();
         };
     }, [keybindings, side, toggleBoth, toggleLeft, toggleRight]);
-    const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+    const leftShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleLeftSidebar');
+    const rightShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleRightSidebar');
+    const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || leftShortcut === ''
         ? 'Toggle Left Sidebar'
-        : `Toggle Left Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+B)`;
-    const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        : `Toggle Left Sidebar (${leftShortcut})`;
+    const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || rightShortcut === ''
         ? 'Toggle Right Sidebar'
-        : `Toggle Right Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+J)`;
+        : `Toggle Right Sidebar (${rightShortcut})`;
     const colorStyle = (0, react_1.useCallback)((color) => {
         return {
             ...style,

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");
@@ -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),

package/dist/components/SkillsSettings.js

@@ -5,9 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 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 clipboard_1 = require("../icons/clipboard");
-const minus_1 = require("../icons/minus");
+const copy_1 = require("../icons/copy");
 const InlineAction_1 = require("./InlineAction");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -94,19 +94,22 @@ const loading = {
 const SkillsSettings = () => {
     var _a;
     const { error, remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const installedSkills = (0, react_1.useMemo)(() => {
         var _a;
         return ((_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.skills.filter(({ installedGlobally, installedInProject }) => installedGlobally || installedInProject).length) !== null && _a !== void 0 ? _a : 0);
     }, [remotionSkillsInfo]);
     const missingSkills = ((_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.skills.length) !== null && _a !== void 0 ? _a : 0) - installedSkills;
     const onCopy = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(INSTALL_COMMAND).catch((err) => {
+        (0, copy_text_1.copyText)(INSTALL_COMMAND)
+            .then(markCopied)
+            .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
-    }, []);
+    }, [markCopied]);
     const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
-    }, []);
+        return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, color: color, style: copyIcon });
+    }, [copied]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [remotionSkillsInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: loading, children: "Checking installed skills..." })) : null, remotionSkillsInfo === null && error ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 ? (jsx_runtime_1.jsxs("div", { children: [
                     jsx_runtime_1.jsx("p", { style: description, children: "Not all skills are installed. Run this command in the project directory, then reload Studio and restart your coding agent." }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                             jsx_runtime_1.jsx("pre", { style: command, children: INSTALL_COMMAND }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy install command" })
@@ -122,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

@@ -6,6 +6,7 @@ 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 ControlButton_1 = require("./ControlButton");
@@ -14,12 +15,14 @@ const SnappingToggle = () => {
     const onClick = (0, react_1.useCallback)(() => {
         setEditorSnapping((current) => !current);
     }, [setEditorSnapping]);
+    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',
-        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(Shift+M)',
+        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || shortcut === '' ? null : `(${shortcut})`,
     ]
         .filter(no_react_1.NoReactInternals.truthy)
         .join(' ');
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": 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" })) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": 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/Splitter/SplitterContainer.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitterContainer = exports.containerColumn = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const timeline_1 = require("../../state/timeline");
 const SplitterContext_1 = require("./SplitterContext");
 const SplitterHandle_1 = require("./SplitterHandle");
@@ -21,8 +54,10 @@ exports.containerColumn = {
     height: 0,
 };
 const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, minFlexerSize, maxAntiFlexerSize, minAntiFlexerSize, id, }) => {
+    const parentLayout = (0, react_1.useContext)(SplitterContext_1.SplitterLayoutContext);
     const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);
     const [flexValue, setFlexValue] = (0, react_1.useState)(initialTimelineFlex !== null && initialTimelineFlex !== void 0 ? initialTimelineFlex : defaultFlex);
+    const [collapsedDuringDrag, setCollapsedDuringDrag] = (0, react_1.useState)(null);
     const ref = (0, react_1.useRef)(null);
     const isDragging = (0, react_1.useRef)(false);
     const size = player_1.PlayerInternals.useElementSize(ref, {
@@ -46,6 +81,8 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
     const value = (0, react_1.useMemo)(() => {
         return {
             flexValue: effectiveFlexValue,
+            collapsedDuringDrag,
+            setCollapsedDuringDrag,
             ref,
             setFlexValue,
             isDragging,
@@ -62,6 +99,7 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         };
     }, [
         defaultFlex,
+        collapsedDuringDrag,
         effectiveFlexValue,
         id,
         maxFlex,
@@ -74,14 +112,29 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         persistFlex,
         ref,
     ]);
-    (0, react_1.useEffect)(() => {
-        const frame = requestAnimationFrame(() => {
-            player_1.PlayerInternals.updateAllElementsSizes();
-        });
-        return () => {
-            cancelAnimationFrame(frame);
-        };
-    });
-    return (jsx_runtime_1.jsx(SplitterContext_1.SplitterContext.Provider, { value: value, children: jsx_runtime_1.jsx("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }));
+    const childCount = react_1.default.Children.toArray(children).length;
+    const layout = (0, react_1.useMemo)(() => ({
+        parentLayout,
+        effectiveFlexValue,
+        collapsedDuringDrag,
+        orientation,
+        width: size === null || size === void 0 ? void 0 : size.width,
+        height: size === null || size === void 0 ? void 0 : size.height,
+        childCount,
+    }), [
+        parentLayout,
+        effectiveFlexValue,
+        collapsedDuringDrag,
+        orientation,
+        size === null || size === void 0 ? void 0 : size.width,
+        size === null || size === void 0 ? void 0 : size.height,
+        childCount,
+    ]);
+    const refreshSize = size === null || size === void 0 ? void 0 : size.refresh;
+    (0, react_1.useLayoutEffect)(() => {
+        // Remeasure this splitter when its own or an ancestor's layout changes.
+        refreshSize === null || refreshSize === void 0 ? void 0 : refreshSize();
+    }, [layout, refreshSize]);
+    return (jsx_runtime_1.jsx(SplitterContext_1.SplitterLayoutContext.Provider, { value: layout, children: jsx_runtime_1.jsx(SplitterContext_1.SplitterContext.Provider, { value: value, children: jsx_runtime_1.jsx("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }) }));
 };
 exports.SplitterContainer = SplitterContainer;

package/dist/components/Splitter/SplitterContext.d.ts

@@ -6,6 +6,8 @@ export type SplitterDragState = false | {
 export type SplitterOrientation = 'horizontal' | 'vertical';
 export type TSplitterContext = {
     flexValue: number;
+    collapsedDuringDrag: 'left' | 'right' | null;
+    setCollapsedDuringDrag: (side: 'left' | 'right' | null) => void;
     setFlexValue: React.Dispatch<React.SetStateAction<number>>;
     orientation: SplitterOrientation;
     ref: React.RefObject<HTMLDivElement | null>;
@@ -36,4 +38,5 @@ export declare const getClampedSplitterFlex: ({ flexValue, ...bounds }: Pick<TSp
     readonly flexValue: number;
 }) => number;
 export declare const SplitterContext: React.Context<TSplitterContext>;
+export declare const SplitterLayoutContext: React.Context<object | null>;
 export {};