@remotion/studio 4.0.514 → 4.0.516

package/dist/components/import-assets.js

@@ -187,30 +187,6 @@ exports.getAssetElementForDroppedFile = getAssetElementForDroppedFile;
 const isSvgFile = (file) => file.name.toLowerCase().endsWith('.svg');
 const hasSvgFile = (files) => files.some(isSvgFile);
 exports.hasSvgFile = hasSvgFile;
-const getAssetLabel = (element) => {
-    if (element.type !== 'asset') {
-        throw new Error('Expected asset element');
-    }
-    if (element.assetType === 'image') {
-        return '<CanvasImage>';
-    }
-    if (element.assetType === 'video') {
-        return '<Video>';
-    }
-    if (element.assetType === 'gif') {
-        return '<Gif>';
-    }
-    if (element.assetType === 'animated-image') {
-        return '<AnimatedImage>';
-    }
-    if (element.assetType === 'audio') {
-        return '<Audio>';
-    }
-    throw new Error('Unsupported asset type');
-};
-const getComponentLabel = (component) => {
-    return `<${component.componentName}>`;
-};
 const getCenteredPosition = ({ dimensions, dropPosition, }) => {
     if (dropPosition === null) {
         return null;
@@ -478,14 +454,6 @@ const pickFilesToImport = ({ multiple = true, } = {}) => {
     });
 };
 exports.pickFilesToImport = pickFilesToImport;
-const notifyInsertedAssets = (insertedLabels) => {
-    if (insertedLabels.length === 1) {
-        (0, NotificationCenter_1.showNotification)(`Added ${insertedLabels[0]} to source file`, 2000);
-    }
-    else if (insertedLabels.length > 1) {
-        (0, NotificationCenter_1.showNotification)(`Added ${insertedLabels.length} assets to source file`, 2000);
-    }
-};
 const notifyUnsupportedFiles = (unsupportedFiles) => {
     if (unsupportedFiles.length === 1) {
         (0, NotificationCenter_1.showNotification)(`Cannot add ${unsupportedFiles[0]}: Unsupported file type`, 3000);
@@ -517,6 +485,10 @@ const insertCompositionElement = async ({ compositionFile, compositionId, elemen
     return true;
 };
 const downloadRemoteAsset = (url) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations) {
+        return browserStudioOperations.downloadRemoteAsset({ url });
+    }
     return (0, call_api_1.callApi)('/api/download-remote-asset', { url });
 };
 const importAssets = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, fps, from, preferCompositionStart, svgImportMode, }) => {
@@ -536,7 +508,6 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
         (0, NotificationCenter_1.showNotification)(`File with name ${differentExistingFile.name} already exists and is different`, 4000);
         return;
     }
-    const insertedLabels = [];
     const addedStaticFiles = [];
     const unsupportedFiles = [];
     const notifyAddedStaticFiles = () => {
@@ -576,7 +547,6 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
                     notifyAddedStaticFiles();
                     return;
                 }
-                insertedLabels.push('<Interactive.Svg>');
                 continue;
             }
             const element = (0, exports.getAssetElementForDroppedFile)({
@@ -626,10 +596,8 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
                 notifyAddedStaticFiles();
                 return;
             }
-            insertedLabels.push(getAssetLabel(element));
         }
         notifyAddedStaticFiles();
-        notifyInsertedAssets(insertedLabels);
         notifyUnsupportedFiles(unsupportedFiles);
     }
     catch (error) {
@@ -678,7 +646,7 @@ const insertSvgMarkup = async ({ compositionFile, compositionId, destinationDime
         catch (_a) {
             dimensions = null;
         }
-        const inserted = await insertCompositionElement({
+        await insertCompositionElement({
             compositionFile,
             compositionId,
             from: null,
@@ -692,9 +660,6 @@ const insertSvgMarkup = async ({ compositionFile, compositionId, destinationDime
                 }),
             },
         });
-        if (inserted) {
-            notifyInsertedAssets(['<Interactive.Svg>']);
-        }
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add SVG: ${error instanceof Error ? error.message : String(error)}`, 4000);
@@ -720,7 +685,7 @@ const importRemoteAsset = async ({ compositionFile, compositionId, destinationDi
                 fps,
             })
             : null;
-        const inserted = await insertCompositionElement({
+        await insertCompositionElement({
             compositionFile,
             compositionId,
             from: (0, exports.getFromForDrop)({
@@ -739,10 +704,6 @@ const importRemoteAsset = async ({ compositionFile, compositionId, destinationDi
                 }),
             },
         });
-        if (!inserted) {
-            return;
-        }
-        notifyInsertedAssets([getAssetLabel(element)]);
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add remote asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
@@ -768,7 +729,7 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, fps, from, pr
             }),
             position: null,
         };
-        const inserted = await insertCompositionElement({
+        await insertCompositionElement({
             compositionFile,
             compositionId,
             element,
@@ -778,10 +739,6 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, fps, from, pr
                 preferCompositionStart,
             }),
         });
-        if (!inserted) {
-            return;
-        }
-        notifyInsertedAssets([getAssetLabel(element)]);
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add sound effect: ${error instanceof Error ? error.message : String(error)}`, 4000);
@@ -793,7 +750,6 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
     if (assetPaths.length === 0) {
         return;
     }
-    const insertedLabels = [];
     const unsupportedFiles = [];
     try {
         for (const assetPath of assetPaths) {
@@ -832,9 +788,7 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
             if (!inserted) {
                 return;
             }
-            insertedLabels.push(getAssetLabel(element));
         }
-        notifyInsertedAssets(insertedLabels);
         notifyUnsupportedFiles(unsupportedFiles);
     }
     catch (error) {
@@ -844,7 +798,7 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
 exports.insertExistingAssets = insertExistingAssets;
 const insertComponent = async ({ component, compositionFile, compositionId, dropPosition, from, preferCompositionStart, }) => {
     try {
-        const inserted = await insertCompositionElement({
+        await insertCompositionElement({
             compositionFile,
             compositionId,
             from: (0, exports.getFromForDrop)({
@@ -864,10 +818,6 @@ const insertComponent = async ({ component, compositionFile, compositionId, drop
                 }),
             },
         });
-        if (!inserted) {
-            return;
-        }
-        (0, NotificationCenter_1.showNotification)(`Added ${getComponentLabel(component)} to source file`, 2000);
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add component: ${error instanceof Error ? error.message : String(error)}`, 4000);
@@ -900,7 +850,7 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
             width: calculated.width,
             height: calculated.height,
         };
-        const inserted = await insertCompositionElement({
+        await insertCompositionElement({
             compositionFile,
             compositionId,
             from: (0, exports.getFromForDrop)({
@@ -922,10 +872,6 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
                 }),
             },
         });
-        if (!inserted) {
-            return;
-        }
-        (0, NotificationCenter_1.showNotification)(`Added ${composition.compositionId} to ${compositionId}`, 2000);
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add composition: ${error instanceof Error ? error.message : String(error)}`, 4000);
@@ -951,9 +897,7 @@ const insertElement = async ({ compositionFile, compositionId, element, expected
                 ? response.reason
                 : `Element file changed: ${response.conflict.filePath}`;
             (0, NotificationCenter_1.showNotification)(`Could not add Element: ${reason}`, 4000);
-            return;
         }
-        (0, NotificationCenter_1.showNotification)(`Added ${element.displayName} to source file`, 2000);
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add Element: ${error instanceof Error ? error.message : String(error)}`, 4000);

package/dist/components/keyboard-shortcuts.d.ts

@@ -0,0 +1,10 @@
+export type KeyboardShortcut = {
+    readonly action: string;
+    readonly chords: readonly (readonly string[])[];
+};
+export type KeyboardShortcutGroup = {
+    readonly name: string;
+    readonly shortcuts: readonly KeyboardShortcut[];
+};
+export declare const keyboardShortcutGroups: readonly KeyboardShortcutGroup[];
+export declare const askAIKeyboardShortcutGroup: KeyboardShortcutGroup;

package/dist/components/keyboard-shortcuts.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.askAIKeyboardShortcutGroup = exports.keyboardShortcutGroups = void 0;
+const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const is_mac_1 = require("../helpers/is-mac");
+exports.keyboardShortcutGroups = [
+    {
+        name: 'Playback',
+        shortcuts: [
+            { action: '1 second back', chords: [['Shift', '←']] },
+            { action: 'Previous frame', chords: [['←']] },
+            { action: 'Play / Pause', chords: [['Space']] },
+            { action: 'Next frame', chords: [['→']] },
+            { action: '1 second forward', chords: [['Shift', '→']] },
+            { action: 'Jump to beginning', chords: [['A']] },
+            { action: 'Jump to end', chords: [['E']] },
+            { action: 'Reverse playback', chords: [['J']] },
+            { action: 'Pause', chords: [['K']] },
+            { action: 'Play / Speed up', chords: [['L']] },
+            { action: 'Go to frame', chords: [['G']] },
+            {
+                action: 'Pause & return to playback start',
+                chords: [['Enter']],
+            },
+        ],
+    },
+    {
+        name: 'Sidebar',
+        shortcuts: [
+            {
+                action: 'Toggle left sidebar',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'B']],
+            },
+            {
+                action: 'Toggle right sidebar',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'J']],
+            },
+            {
+                action: 'Toggle both sidebars',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'G']],
+            },
+        ],
+    },
+    {
+        name: 'View',
+        shortcuts: [
+            { action: 'Enter fullscreen', chords: [['F']] },
+            { action: 'Exit fullscreen', chords: [['Esc']] },
+            { action: 'Enable snapping', chords: [['Shift', 'M']] },
+        ],
+    },
+    {
+        name: 'Navigation',
+        shortcuts: [
+            { action: 'Previous composition', chords: [['PageUp']] },
+            { action: 'Next composition', chords: [['PageDown']] },
+            {
+                action: 'Render, unless a sequence or prop is selected',
+                chords: [['R']],
+            },
+            {
+                action: 'Checkerboard, unless a sequence or prop is selected',
+                chords: [['T']],
+            },
+            { action: 'Show keyboard shortcuts', chords: [['?']] },
+            {
+                action: 'Quick Switcher',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'K']],
+            },
+        ],
+    },
+    {
+        name: 'Playback range',
+        shortcuts: [
+            { action: 'Set In Point', chords: [['I']] },
+            { action: 'Set Out Point', chords: [['O']] },
+            { action: 'Clear In/Out Points', chords: [['X']] },
+        ],
+    },
+    {
+        name: 'Zoom',
+        shortcuts: [
+            { action: 'Zoom in', chords: [['+']] },
+            { action: 'Zoom out', chords: [['-']] },
+            { action: 'Reset zoom', chords: [['0']] },
+        ],
+    },
+    {
+        name: 'Props Editor',
+        shortcuts: [
+            { action: 'Undo', chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'Z']] },
+            {
+                action: 'Redo',
+                chords: [
+                    is_mac_1.isMac
+                        ? [ShortcutHint_1.cmdOrCtrlCharacter, 'Shift', 'Z']
+                        : [ShortcutHint_1.cmdOrCtrlCharacter, 'Y'],
+                ],
+            },
+        ],
+    },
+    {
+        name: 'Interactivity',
+        shortcuts: [
+            { action: 'Select range / axis lock drag', chords: [['Shift']] },
+            { action: 'Toggle selection', chords: [[ShortcutHint_1.cmdOrCtrlCharacter]] },
+            {
+                action: 'Select sequence rows',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'A']],
+            },
+            { action: 'Select translate prop', chords: [['P']] },
+            { action: 'Select opacity prop', chords: [['T']] },
+            { action: 'Select rotate prop', chords: [['R']] },
+            { action: 'Select scale prop', chords: [['S']] },
+            {
+                action: 'Duplicate sequences',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'D']],
+            },
+            {
+                action: 'Copy effects / values',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'C']],
+            },
+            { action: 'Cut effects', chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'X']] },
+            {
+                action: 'Paste effects / values',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'V']],
+            },
+            { action: 'Delete / reset selection', chords: [['Del'], ['⌫']] },
+        ],
+    },
+];
+exports.askAIKeyboardShortcutGroup = {
+    name: 'AI',
+    shortcuts: [{ action: 'Ask AI', chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'I']] }],
+};

package/dist/components/selected-outline-control-layout.js

@@ -64,14 +64,10 @@ const getSelectedOutlineControlLayout = (points) => {
     const targetHalfSizeY = isSmallY ? targetHalfSize / 2 : targetHalfSize;
     const rotationHandleRadius = Math.max(targetHalfSizeX, targetHalfSizeY) * 1.5;
     const scaleEdges = ['top', 'right', 'bottom', 'left'].filter((edge) => {
-        // Preserve one scale control per axis when opposite edge targets would overlap.
-        if (edge === 'top') {
+        if (edge === 'top' || edge === 'bottom') {
             return !isTinyY;
         }
-        if (edge === 'left') {
-            return !isTinyX;
-        }
-        return true;
+        return !isTinyX;
     });
     const rotationCorners = ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => ({
         corner,

package/dist/components/selected-outline-measurement.d.ts

@@ -80,6 +80,6 @@ export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideI
     readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
     readonly timelinePosition: number;
 }) => SequenceWithSelectedOutline[];
-export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[]) => SelectedOutline[];
+export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[], hoveredTimelineNodePathKey: string | null) => SelectedOutline[];
 export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;
 export {};

package/dist/components/selected-outline-measurement.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedRotationInfo = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.cropOutlinePoints = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const colors_1 = require("../helpers/colors");
+const get_box_quads_polyfill_internals_js_1 = require("../helpers/get-box-quads-polyfill-internals.js");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
 const selected_outline_types_1 = require("./selected-outline-types");
 const selected_outline_uv_1 = require("./selected-outline-uv");
@@ -186,11 +188,18 @@ const getSvgSvgElementOutlinePoints = (element, containerRect) => {
         containerRect,
     });
 };
-const getElementOutlinePoints = (element, containerRect) => {
+const getElementOutlinePoints = (element, containerRect, includeOutsideContainer) => {
     const elementRect = element.getBoundingClientRect();
     if (elementRect.width === 0 && elementRect.height === 0) {
         return null;
     }
+    if (!includeOutsideContainer &&
+        (elementRect.right <= containerRect.left ||
+            elementRect.left >= containerRect.right ||
+            elementRect.bottom <= containerRect.top ||
+            elementRect.top >= containerRect.bottom)) {
+        return null;
+    }
     if (isSvgSvgElement(element)) {
         return getSvgSvgElementOutlinePoints(element, containerRect);
     }
@@ -410,7 +419,9 @@ const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths,
     });
 };
 exports.getSequencesWithSelectableOutlines = getSequencesWithSelectableOutlines;
-const measureOutlines = (container, targets) => {
+const measureOutlines = (container, targets, hoveredTimelineNodePathKey) => {
+    // Reuse shared ancestor geometry within this synchronous batch only.
+    (0, get_box_quads_polyfill_internals_js_1.useCache)();
     const containerRect = container.getBoundingClientRect();
     const outlines = [];
     for (const target of targets) {
@@ -418,7 +429,9 @@ const measureOutlines = (container, targets) => {
         if (element === null) {
             continue;
         }
-        const uncroppedPoints = getElementOutlinePoints(element, containerRect);
+        const includeOutsideContainer = target.showSelectedOutline ||
+            (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(target.nodePathInfo.sequenceSubscriptionKey) === hoveredTimelineNodePathKey;
+        const uncroppedPoints = getElementOutlinePoints(element, containerRect, includeOutsideContainer);
         if (uncroppedPoints === null) {
             continue;
         }

package/dist/components/use-delete-asset.d.ts

@@ -0,0 +1 @@
+export declare const useDeleteAsset: (relativePath: string | null) => () => void;

package/dist/components/use-delete-asset.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeleteAsset = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const delete_static_file_1 = require("../api/delete-static-file");
+const ConfirmationDialog_1 = require("./ConfirmationDialog");
+const styles_1 = require("./Menu/styles");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const useDeleteAsset = (relativePath) => {
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    return (0, react_1.useCallback)(() => {
+        if (relativePath === null) {
+            return;
+        }
+        confirm({
+            title: 'Delete asset',
+            message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Do you want to delete the asset", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: relativePath }),
+                    " from your public folder?"] })),
+            confirmLabel: 'Delete',
+        })
+            .then((confirmed) => {
+            if (!confirmed) {
+                return;
+            }
+            const notification = (0, NotificationCenter_1.showNotification)(`Deleting ${relativePath}...`, null);
+            (0, delete_static_file_1.deleteStaticFile)(relativePath)
+                .then(() => {
+                notification.dismiss();
+            })
+                .catch((err) => {
+                notification.replaceContent(`Could not delete ${relativePath}: ${err.message}`, 3000);
+            });
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not delete ${relativePath}: ${err.message}`, 3000);
+        });
+    }, [confirm, relativePath]);
+};
+exports.useDeleteAsset = useDeleteAsset;

package/dist/components/use-selected-outline-control-target.d.ts

@@ -0,0 +1,11 @@
+import type { SelectedOutlineLayoutTarget, SelectedOutlineTarget } from './selected-outline-types';
+export declare const useSelectedOutlineControlTarget: ({ getLatestTargetByKey, layoutTarget, }: {
+    readonly getLatestTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
+    readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
+}) => {
+    controlTarget: SelectedOutlineTarget | undefined;
+    getLayoutTarget: () => SelectedOutlineLayoutTarget | undefined;
+    getTarget: () => SelectedOutlineTarget | undefined;
+    hovered: boolean;
+    onHoverChange: (key: string | null) => void;
+};

package/dist/components/use-selected-outline-control-target.js

@@ -0,0 +1,79 @@
+"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.useSelectedOutlineControlTarget = void 0;
+const react_1 = __importStar(require("react"));
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
+const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
+const useSelectedOutlineControlTarget = ({ getLatestTargetByKey, layoutTarget, }) => {
+    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
+    const targetRef = (0, react_1.useRef)(layoutTarget);
+    (0, react_1.useLayoutEffect)(() => {
+        targetRef.current = layoutTarget;
+    }, [layoutTarget]);
+    const getTarget = react_1.default.useCallback(() => {
+        const currentTarget = targetRef.current;
+        if (currentTarget === undefined) {
+            return undefined;
+        }
+        return getLatestTargetByKey(currentTarget.key);
+    }, [getLatestTargetByKey]);
+    const getLayoutTarget = react_1.default.useCallback(() => targetRef.current, []);
+    const hoveredNodePathKey = (0, react_1.useMemo)(() => layoutTarget === undefined
+        ? null
+        : (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(layoutTarget.nodePathInfo.sequenceSubscriptionKey), [layoutTarget]);
+    const hovered = (0, timeline_sequence_hover_1.useIsTimelineSequenceHovered)(hoveredNodePathKey);
+    const controlTarget = layoutTarget !== undefined && (layoutTarget.containsSelection || hovered)
+        ? getLatestTargetByKey(layoutTarget.key)
+        : undefined;
+    const onHoverChange = react_1.default.useCallback((key) => {
+        setHoveredSequence((currentHover) => {
+            if (key !== null) {
+                const hoverTarget = targetRef.current;
+                if (hoverTarget === undefined || hoverTarget.key !== key) {
+                    return currentHover;
+                }
+                return {
+                    key,
+                    nodePathKey: (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(hoverTarget.nodePathInfo.sequenceSubscriptionKey),
+                    source: 'canvas',
+                };
+            }
+            return (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover;
+        });
+    }, [setHoveredSequence]);
+    return { controlTarget, getLayoutTarget, getTarget, hovered, onHoverChange };
+};
+exports.useSelectedOutlineControlTarget = useSelectedOutlineControlTarget;

package/dist/error-overlay/remotion-overlay/log-studio-error.js

@@ -2,9 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logStudioError = exports.logStudioErrorData = void 0;
 const call_api_1 = require("../../components/call-api");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const loggedErrors = new Set();
 const maxLoggedErrors = 100;
 const logStudioErrorData = (data) => {
+    if ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+        return;
+    }
     const key = JSON.stringify([data.name, data.message, data.stack]);
     if (loggedErrors.has(key)) {
         return;

package/dist/esm/{chunk-r46yxrjr.js → chunk-4bxz1d3g.js}

@@ -78,7 +78,6 @@ var SELECTED_GUIDE = "#d22d3a";
 var LINE_COLOR = "#363A3E";
 var TIMELINE_TRACK_SEPARATOR = "#13161B";
 var LIGHT_GRAY = "#ccc";
-var KEYBOARD_SHORTCUT_KEY_COLOR = "#eee";
 var NOTIFICATION_BACKGROUND = "#111111";
 var RENDER_STATUS_BACKGROUND = "#222";
 var ERROR_CODE_FRAME_BACKGROUND = "#070707";
@@ -87,7 +86,9 @@ var ERROR_LINK_COLOR = "#58a6ff";
 var INFO_BLUE = "#60a5fa";
 var SERVER_DISCONNECTED_BACKGROUND = "#e74c3c";
 var STACK_FRAME_BORDER_BLUE = "rgb(66, 144, 245)";
-var TIMELINE_BACKGROUND_COLOR = "#0F1113";
+var TIMELINE_BACKGROUND_COLOR = "#15181B";
+var TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = "#2C2F32";
+var TIMELINE_NEGATIVE_START_BORDER_COLOR = "#414446";
 var TIMELINE_SELECTED_BACKGROUND_COLOR = "#3B3F42";
 var TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = "#B0B0B0";
 var TIMELINE_BLUE = "#0b84ff";
@@ -159,4 +160,4 @@ var getBackgroundFromHoverState = ({
   return TRANSPARENT;
 };
 
-export { __toESM, __require, BLACK, WHITE, RED, TRANSPARENT, CURRENT_COLOR, CURRENT_COLOR_LOWERCASE, WHITE_HEX, WHITE_FULL_HEX, BLACK_HEX, BLACK_FULL_HEX, BACKGROUND, BACKGROUND_HEX, BACKGROUND__TRANSPARENT, INPUT_BACKGROUND, LIGHT_COLOR, SELECTED_BACKGROUND, LIGHT_TEXT, RULER_COLOR, WHITE_ALPHA_05, WHITE_ALPHA_06, WHITE_ALPHA_08, WHITE_ALPHA_10, WHITE_ALPHA_12, WHITE_ALPHA_15, WHITE_ALPHA_20, WHITE_ALPHA_25, WHITE_ALPHA_30, WHITE_ALPHA_35, WHITE_ALPHA_40, WHITE_ALPHA_45, WHITE_ALPHA_50, WHITE_ALPHA_60, WHITE_ALPHA_70, WHITE_ALPHA_72, WHITE_ALPHA_80, BLACK_ALPHA_30, BLACK_ALPHA_40, BLACK_ALPHA_50, BLACK_ALPHA_60, FAIL_COLOR, WARNING_COLOR, BLUE, BLUE_HOVERED, BLUE_DISABLED, UNSELECTED_GUIDE, SELECTED_GUIDE, LINE_COLOR, TIMELINE_TRACK_SEPARATOR, LIGHT_GRAY, KEYBOARD_SHORTCUT_KEY_COLOR, NOTIFICATION_BACKGROUND, RENDER_STATUS_BACKGROUND, ERROR_CODE_FRAME_BACKGROUND, ERROR_CODE_FRAME_LINE_BACKGROUND, ERROR_LINK_COLOR, INFO_BLUE, SERVER_DISCONNECTED_BACKGROUND, TIMELINE_BACKGROUND_COLOR, TIMELINE_SELECTED_BACKGROUND_COLOR, TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR, TIMELINE_BLUE, TIMELINE_PLAYHEAD_COLOR, TIMELINE_DROP_BLUE_ALPHA_12, TIMELINE_DROP_BLUE_ALPHA_16, TIMELINE_MARQUEE_BLUE_ALPHA_16, INFO_BLUE_BACKGROUND, BORDER_BLACK, BORDER_WHITE, BORDER_WHITE_2PX, BORDER_CURRENT_COLOR, BORDER_TRANSPARENT_2PX, BORDER_BLACK_ALPHA_50, BORDER_BLACK_ALPHA_60, BORDER_WHITE_ALPHA_12, BORDER_WHITE_ALPHA_20, BORDER_INFO_BLUE, BORDER_STACK_FRAME_BLUE, BORDER_TIMELINE_DROP_BLUE, BORDER_TIMELINE_MARQUEE_BLUE, SHADOW_BLACK, SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM, SHADOW_BLACK_ALPHA_50_TOWARDS_TOP, NOTIFICATION_SHADOW, SERVER_DISCONNECTED_SHADOW, COLOR_PICKER_POPUP_SHADOW, COLOR_PICKER_HANDLE_SHADOW, NOTIFICATION_BORDER, FOCUS_BOX_SHADOW, CHECKERBOARD_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_COLOR, COLOR_PICKER_SATURATION_VALUE_GRADIENT, COLOR_PICKER_SATURATION_BLACK_GRADIENT, COLOR_PICKER_ALPHA_TRANSPARENT, COLOR_PICKER_HUE_GRADIENT, ERROR_MESSAGE_MASK_IMAGE, SELECTED_OUTLINE_DROP_SHADOW, SELECTED_OUTLINE_UV_DROP_SHADOW, LOOPED_INDICATOR_DROP_SHADOW, TIMELINE_AUDIO_GRADIENT, TIMELINE_VIDEO_GRADIENT, TIMELINE_IMAGE_GRADIENT, getBackgroundFromHoverState };
+export { __toESM, __require, BLACK, WHITE, RED, TRANSPARENT, CURRENT_COLOR, CURRENT_COLOR_LOWERCASE, WHITE_HEX, WHITE_FULL_HEX, BLACK_HEX, BLACK_FULL_HEX, BACKGROUND, BACKGROUND_HEX, BACKGROUND__TRANSPARENT, INPUT_BACKGROUND, LIGHT_COLOR, SELECTED_BACKGROUND, LIGHT_TEXT, RULER_COLOR, WHITE_ALPHA_05, WHITE_ALPHA_06, WHITE_ALPHA_08, WHITE_ALPHA_10, WHITE_ALPHA_12, WHITE_ALPHA_15, WHITE_ALPHA_20, WHITE_ALPHA_25, WHITE_ALPHA_30, WHITE_ALPHA_35, WHITE_ALPHA_40, WHITE_ALPHA_45, WHITE_ALPHA_50, WHITE_ALPHA_60, WHITE_ALPHA_70, WHITE_ALPHA_72, WHITE_ALPHA_80, BLACK_ALPHA_30, BLACK_ALPHA_40, BLACK_ALPHA_50, BLACK_ALPHA_60, FAIL_COLOR, WARNING_COLOR, BLUE, BLUE_HOVERED, BLUE_DISABLED, UNSELECTED_GUIDE, SELECTED_GUIDE, LINE_COLOR, TIMELINE_TRACK_SEPARATOR, LIGHT_GRAY, NOTIFICATION_BACKGROUND, RENDER_STATUS_BACKGROUND, ERROR_CODE_FRAME_BACKGROUND, ERROR_CODE_FRAME_LINE_BACKGROUND, ERROR_LINK_COLOR, INFO_BLUE, SERVER_DISCONNECTED_BACKGROUND, TIMELINE_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BORDER_COLOR, TIMELINE_SELECTED_BACKGROUND_COLOR, TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR, TIMELINE_BLUE, TIMELINE_PLAYHEAD_COLOR, TIMELINE_DROP_BLUE_ALPHA_12, TIMELINE_DROP_BLUE_ALPHA_16, TIMELINE_MARQUEE_BLUE_ALPHA_16, INFO_BLUE_BACKGROUND, BORDER_BLACK, BORDER_WHITE, BORDER_WHITE_2PX, BORDER_CURRENT_COLOR, BORDER_TRANSPARENT_2PX, BORDER_BLACK_ALPHA_50, BORDER_BLACK_ALPHA_60, BORDER_WHITE_ALPHA_12, BORDER_WHITE_ALPHA_20, BORDER_INFO_BLUE, BORDER_STACK_FRAME_BLUE, BORDER_TIMELINE_DROP_BLUE, BORDER_TIMELINE_MARQUEE_BLUE, SHADOW_BLACK, SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM, SHADOW_BLACK_ALPHA_50_TOWARDS_TOP, NOTIFICATION_SHADOW, SERVER_DISCONNECTED_SHADOW, COLOR_PICKER_POPUP_SHADOW, COLOR_PICKER_HANDLE_SHADOW, NOTIFICATION_BORDER, FOCUS_BOX_SHADOW, CHECKERBOARD_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_COLOR, COLOR_PICKER_SATURATION_VALUE_GRADIENT, COLOR_PICKER_SATURATION_BLACK_GRADIENT, COLOR_PICKER_ALPHA_TRANSPARENT, COLOR_PICKER_HUE_GRADIENT, ERROR_MESSAGE_MASK_IMAGE, SELECTED_OUTLINE_DROP_SHADOW, SELECTED_OUTLINE_UV_DROP_SHADOW, LOOPED_INDICATOR_DROP_SHADOW, TIMELINE_AUDIO_GRADIENT, TIMELINE_VIDEO_GRADIENT, TIMELINE_IMAGE_GRADIENT, getBackgroundFromHoverState };