@remotion/studio 4.0.524 → 4.0.525

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -29,6 +29,7 @@ const useTimelineAssetDrop = () => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [assetDropFrame, setAssetDropFrame] = (0, react_1.useState)(null);
+    const unsupportedDropNotifiedRef = (0, react_1.useRef)(false);
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -71,9 +72,18 @@ const useTimelineAssetDrop = () => {
             dataTransfer === null ||
             !(0, drop_handler_data_1.isSupportedDropEvent)(event) ||
             !isEventTargetInsideElement(event, timeline)) {
+            unsupportedDropNotifiedRef.current = false;
             setAssetDropFrame(null);
             return;
         }
+        const mayBeCanvasCapture = (0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio;
+        const shouldNotifyAboutUnsupportedDrop = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false &&
+            !mayBeCanvasCapture;
+        if (shouldNotifyAboutUnsupportedDrop &&
+            !unsupportedDropNotifiedRef.current) {
+            (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
+        }
+        unsupportedDropNotifiedRef.current = shouldNotifyAboutUnsupportedDrop;
         event.preventDefault();
         event.stopPropagation();
         dataTransfer.dropEffect = canInsertAsset ? 'copy' : 'none';
@@ -82,8 +92,10 @@ const useTimelineAssetDrop = () => {
             scrollable !== null &&
             isEventTargetInsideElement(event, scrollable);
         setAssetDropFrame(shouldShowDropFrame ? getDropFrame(event) : null);
-    }, [canInsertAsset, getDropFrame]);
+    }, [canInsertAsset, compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence, getDropFrame]);
     const onAssetDrop = (0, react_1.useCallback)(async (event) => {
+        const unsupportedDropWasNotified = unsupportedDropNotifiedRef.current;
+        unsupportedDropNotifiedRef.current = false;
         setAssetDropFrame(null);
         const timeline = timeline_refs_1.timelineVerticalScroll.current;
         const { dataTransfer } = event;
@@ -122,8 +134,9 @@ const useTimelineAssetDrop = () => {
             currentCompositionId === null ||
             compositionFile === null ||
             videoConfig === null) {
-            if ((compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false) {
-                (0, NotificationCenter_1.showNotification)('Cannot insert items into this composition component', 3000);
+            if ((compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false &&
+                !unsupportedDropWasNotified) {
+                (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
             }
             return;
         }
@@ -166,6 +179,7 @@ const useTimelineAssetDrop = () => {
         videoConfig,
     ]);
     const clearAssetDropFrame = (0, react_1.useCallback)(() => {
+        unsupportedDropNotifiedRef.current = false;
         setAssetDropFrame(null);
     }, []);
     (0, react_1.useEffect)(() => {

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -450,8 +450,8 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             event: e,
             captureTarget: e.currentTarget,
             onMove: onPointerMove,
-            onEnd: (reason) => {
-                if (reason === 'pointerup' || reason === 'buttons-released') {
+            onEnd: (reason, endEvent) => {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onPointerUp();
                 }
                 else {
@@ -657,8 +657,8 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
             event: e,
             captureTarget: e.currentTarget,
             onMove: onPointerMove,
-            onEnd: (reason) => {
-                if (reason === 'pointerup' || reason === 'buttons-released') {
+            onEnd: (reason, endEvent) => {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onPointerUp();
                 }
                 else {

package/dist/components/TimelineCombobox.js

@@ -41,6 +41,7 @@ const TimelineCombobox = ({ values, selectedId, title, tooltipDelay, labelWidth
             selectedId,
             style: { fontFamily: 'inherit', padding: '0 4px' },
             title: tooltipDelay === null ? title : null,
+            tooltipLabel: null,
             type: 'menu',
             values,
         },

package/dist/components/UndoRedoButtons.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const url_state_1 = require("../helpers/url-state");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const redo_1 = require("../icons/redo");
@@ -43,6 +44,11 @@ const UndoRedoButtons = () => {
             ? browserStudioOperations.undo()
             : (0, call_api_1.callApi)('/api/undo', {});
         promise
+            .then((response) => {
+            if (response.success && response.route !== null) {
+                (0, url_state_1.pushUrl)(response.route);
+            }
+        })
             .catch(() => {
             // Ignore errors
         })
@@ -60,6 +66,11 @@ const UndoRedoButtons = () => {
             ? browserStudioOperations.redo()
             : (0, call_api_1.callApi)('/api/redo', {});
         promise
+            .then((response) => {
+            if (response.success && response.route !== null) {
+                (0, url_state_1.pushUrl)(response.route);
+            }
+        })
             .catch(() => {
             // Ignore errors
         })

package/dist/components/composition-menu-items.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositionContextMenuItems = exports.getCompositionMenuItems = void 0;
 const no_react_1 = require("remotion/no-react");
 const format_file_location_1 = require("../helpers/format-file-location");
+const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const open_in_new_window_1 = require("./open-in-new-window");
@@ -22,6 +23,13 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
         connectionStatus !== 'connected' ||
         !resolvedLocation;
     const openComponentInEditorDisabled = showInEditorDisabled || !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source);
+    const gitSourceName = window.remotion_gitSource
+        ? (0, get_git_menu_item_1.getGitSourceName)(window.remotion_gitSource)
+        : null;
+    const openCompositionInGitSourceDisabled = !composition || !resolvedLocation;
+    const openComponentInGitSourceDisabled = openCompositionInGitSourceDisabled ||
+        !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) ||
+        (!readOnlyStudio && connectionStatus !== 'connected');
     const copyFileLocationDisabled = !composition || !fileLocation;
     return [
         editorName
@@ -78,7 +86,53 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 disabled: openComponentInEditorDisabled,
             }
             : null,
-        editorName && includeCompositionManagementItems
+        gitSourceName
+            ? {
+                id: 'open-composition-in-git-source',
+                keyHint: null,
+                label: `Open composition in ${gitSourceName}`,
+                leftItem: null,
+                onClick: () => {
+                    closeMenu();
+                    (0, get_git_menu_item_1.openGitSource)({ folder: false, location: resolvedLocation });
+                },
+                quickSwitcherLabel: `Open composition in ${gitSourceName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'open-composition-in-git-source',
+                disabled: openCompositionInGitSourceDisabled,
+            }
+            : null,
+        gitSourceName
+            ? {
+                id: 'open-component-in-git-source',
+                keyHint: null,
+                label: `Open component in ${gitSourceName}`,
+                leftItem: null,
+                onClick: async () => {
+                    closeMenu();
+                    if (!composition || !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source)) {
+                        return;
+                    }
+                    try {
+                        const info = await (0, open_in_editor_1.loadCompositionComponentInfo)({
+                            compositionFile: resolvedLocation.source,
+                            compositionId: composition.id,
+                        });
+                        (0, get_git_menu_item_1.openGitSource)({ folder: false, location: info.location });
+                    }
+                    catch (err) {
+                        (0, NotificationCenter_1.showNotification)(err.message, 2000);
+                    }
+                },
+                quickSwitcherLabel: `Open composition component in ${gitSourceName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'open-component-in-git-source',
+                disabled: openComponentInGitSourceDisabled,
+            }
+            : null,
+        (editorName || gitSourceName) && includeCompositionManagementItems
             ? {
                 type: 'divider',
                 id: 'show-in-editor-divider',
@@ -154,7 +208,7 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 disabled: !composition || readOnlyStudio,
             }
             : null,
-        editorName || includeCompositionManagementItems
+        editorName || gitSourceName || includeCompositionManagementItems
             ? {
                 type: 'divider',
                 id: 'copy-actions-divider',

package/dist/components/folder-menu-items.js

@@ -15,6 +15,11 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
         location: resolvedLocation,
         root: window.remotion_cwd,
     });
+    const contextForAgents = (0, format_file_location_1.formatContextForAgents)({
+        location: resolvedLocation,
+        name: folderId,
+        root: window.remotion_cwd,
+    });
     const showInEditorDisabled = !editorId || connectionStatus !== 'connected' || !resolvedLocation;
     const copyFileLocationDisabled = !fileLocation;
     const codemodDisabled = readOnlyStudio || !folder.stack;
@@ -44,6 +49,26 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
                 disabled: showInEditorDisabled,
             }
             : null,
+        {
+            id: 'copy-context-for-agents',
+            keyHint: null,
+            label: `Copy context for agents`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                if (!contextForAgents) {
+                    return;
+                }
+                navigator.clipboard.writeText(contextForAgents).catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: 'copy-context-for-agents',
+            disabled: !contextForAgents,
+        },
         {
             id: 'copy-folder-file-location',
             keyHint: null,
@@ -96,6 +121,25 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
             value: 'new-composition-in-folder',
             disabled: codemodDisabled,
         },
+        {
+            id: 'new-folder-in-folder',
+            keyHint: null,
+            label: `New folder...`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                setSelectedModal({
+                    type: 'new-folder',
+                    parentName: folderId,
+                    stack: folder.stack,
+                });
+            },
+            quickSwitcherLabel: 'New folder in folder...',
+            subMenu: null,
+            type: 'item',
+            value: 'new-folder-in-folder',
+            disabled: codemodDisabled,
+        },
         {
             id: 'rename-folder',
             keyHint: null,

package/dist/components/get-open-in-menu-items.js

@@ -81,7 +81,7 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
             id: 'open-in-github',
             keyHint: null,
             label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "GitHub.com" }),
-            leftItem: jsx_runtime_1.jsx(github_1.GitHubIcon, { size: 18 }),
+            leftItem: jsx_runtime_1.jsx(github_1.GitHubIcon, { size: 16 }),
             onClick: () => {
                 (0, get_git_menu_item_1.openGitSource)({ folder, location });
             },

package/dist/components/import-assets.d.ts

@@ -156,7 +156,7 @@ export declare const insertComposition: ({ composition, compositionFile, composi
     from: number | null;
     preferCompositionStart: boolean | null;
 }) => Promise<void>;
-export declare const insertElement: ({ installationName, compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }: {
+export declare const insertElement: ({ installationName, compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, undoRedoNavigation, newComposition, }: {
     installationName: string | null;
     compositionFile: string;
     compositionId: string;
@@ -165,4 +165,27 @@ export declare const insertElement: ({ installationName, compositionFile, compos
     position: InsertableCompositionElementPosition | null;
     from: number | null;
     overwriteExisting: boolean;
+    undoRedoNavigation: import("@remotion/studio-shared").UndoRedoNavigation | null;
+    newComposition: {
+        codemod: {
+            type: "new-composition";
+            newId: string;
+            componentName: string;
+            componentImportPath: string;
+            folderName: string | null;
+            parentName: string | null;
+            newHeight: number;
+            newWidth: number;
+            newFps: number;
+            newDurationInFrames: number;
+            canvasCapture: {
+                readonly videoFileName: string;
+                readonly videoHeight: number;
+                readonly videoWidth: number;
+                readonly keyframeFps: number;
+                readonly data: import("@remotion/studio-shared").CanvasCaptureData;
+            } | null;
+        };
+        symbolicatedStack: import("@remotion/studio-shared").SymbolicatedStackFrame | null;
+    } | null;
 }) => Promise<boolean>;

package/dist/components/import-assets.js

@@ -875,7 +875,7 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
     }
 };
 exports.insertComposition = insertComposition;
-const insertElement = async ({ installationName, compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }) => {
+const insertElement = async ({ installationName, compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, undoRedoNavigation, newComposition, }) => {
     try {
         if ((0, browser_studio_operations_1.getBrowserStudioOperations)() === null) {
             await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
@@ -889,6 +889,8 @@ const insertElement = async ({ installationName, compositionFile, compositionId,
             from,
             overwriteExisting,
             position,
+            undoRedoNavigation,
+            newComposition,
         });
         if (!response.success) {
             const reason = response.type === 'error'

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

@@ -12,15 +12,15 @@ export type KeyboardShortcutGroup = {
 export declare const defaultKeyboardShortcuts: Record<StudioKeyboardShortcutAction, readonly StudioKeyboardShortcut[]>;
 export declare const keyboardShortcutGroups: readonly KeyboardShortcutGroup[];
 export declare const askAIKeyboardShortcutGroup: KeyboardShortcutGroup;
-export declare const getKeyboardShortcutsForAction: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut", configured?: Partial<Record<"askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut", StudioKeyboardShortcutValue>> | null) => readonly StudioKeyboardShortcut[];
+export declare const getKeyboardShortcutsForAction: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut", configured?: Partial<Record<"askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut", StudioKeyboardShortcutValue>> | null) => readonly StudioKeyboardShortcut[];
 export declare const keyboardEventMatchesShortcut: ({ event, shortcut: value, }: {
     readonly event: KeyboardEvent;
     readonly shortcut: StudioKeyboardShortcut;
 }) => boolean;
 export declare const keyboardShortcutsOverlap: (first: StudioKeyboardShortcut, second: StudioKeyboardShortcut) => boolean;
-export declare const keyboardEventMatchesAction: (event: KeyboardEvent, action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => boolean;
+export declare const keyboardEventMatchesAction: (event: KeyboardEvent, action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => boolean;
 export declare const formatKeyboardShortcut: (value: StudioKeyboardShortcut) => readonly string[];
 export declare const formatKeyboardShortcutForAria: (value: StudioKeyboardShortcut) => string;
-export declare const getKeyboardShortcutLabel: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
-export declare const getKeyboardShortcutAriaKeyShortcuts: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
+export declare const getKeyboardShortcutLabel: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
+export declare const getKeyboardShortcutAriaKeyShortcuts: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
 export declare const shortcutFromKeyboardEvent: (event: KeyboardEvent) => StudioKeyboardShortcut | null;

package/dist/components/keyboard-shortcuts.js

@@ -50,6 +50,7 @@ exports.defaultKeyboardShortcuts = {
     cutEffects: [{ key: 'x', commandOrControl: true }],
     deleteSelection: [{ key: 'Backspace' }, { key: 'Delete' }],
     askAI: [{ key: 'i', commandOrControl: true }],
+    pickColor: [{ key: 'c', shift: true }],
 };
 exports.keyboardShortcutGroups = [
     {
@@ -116,6 +117,10 @@ exports.keyboardShortcutGroups = [
             shortcut('Reset zoom', 'resetZoom'),
         ],
     },
+    {
+        name: 'Tools',
+        shortcuts: [shortcut('Color Picker', 'pickColor')],
+    },
     {
         name: 'Props Editor',
         shortcuts: [shortcut('Undo', 'undo'), shortcut('Redo', 'redo')],

package/dist/esm/{LazyModels-hc33szyn.mjs → LazyModels-gfmpcy4h.mjs}

@@ -1,8 +1,8 @@
 import {
   Models
-} from "./index-e3zwf3e7.mjs";
-import"./index-2j3d1g81.mjs";
-import"./index-yfrysr5f.mjs";
+} from "./index-vsxrxfpj.mjs";
+import"./index-jrw61pkj.mjs";
+import"./index-0x13f28h.mjs";
 import"./index-5zrb1ft4.mjs";
 import"./index-k426ye99.mjs";
 import"./index-rcv7qkt5.mjs";

package/dist/esm/{LazyModels-sg40rjw6.mjs → LazyModels-m1rf06wh.mjs}

@@ -1,8 +1,8 @@
 import {
   Models
-} from "./index-wbmp5srk.mjs";
-import"./index-2j3d1g81.mjs";
-import"./index-yfrysr5f.mjs";
+} from "./index-hbezgbbq.mjs";
+import"./index-jrw61pkj.mjs";
+import"./index-0x13f28h.mjs";
 import"./index-5zrb1ft4.mjs";
 import"./index-k426ye99.mjs";
 import"./index-rcv7qkt5.mjs";

package/dist/esm/{TranscriptionModal-3ctnxpt6.mjs → TranscriptionModal-8pvrehg4.mjs}

@@ -6,7 +6,7 @@ import {
   NumberSetting,
   getDefaultCaptionOutputName,
   validateCaptionOutputName
-} from "./index-q2epbw93.mjs";
+} from "./index-1089795y.mjs";
 import {
   Button,
   Checkbox,
@@ -32,20 +32,20 @@ import {
   rightRow,
   showNotification,
   useStaticFiles
-} from "./index-c37kme2v.mjs";
+} from "./index-ggqpre9v.mjs";
 import {
   RenderQueueContext
 } from "./index-9x6e1dq0.mjs";
 import {
   openInFileExplorer
-} from "./index-9qtvmwtx.mjs";
+} from "./index-41kqns5c.mjs";
 import {
   getBrowserStudioOperations
 } from "./index-cw0pnpg5.mjs";
 import {
   Models
-} from "./index-e3zwf3e7.mjs";
-import"./index-2j3d1g81.mjs";
+} from "./index-vsxrxfpj.mjs";
+import"./index-jrw61pkj.mjs";
 import {
   InlineAction,
   Spacing,
@@ -61,7 +61,7 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-yfrysr5f.mjs";
+} from "./index-0x13f28h.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED,

package/dist/esm/{VideoMattingModal-b0r7e60n.mjs → VideoMattingModal-fefbzgka.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./index-7tt71e8n.mjs";
 import {
   RenderModalOutputName
-} from "./index-1b9skrrd.mjs";
+} from "./index-mww32xc8.mjs";
 import {
   Button,
   Checkmark,
@@ -25,16 +25,16 @@ import {
   rightRow,
   useStaticFiles,
   validatePublicOutputName
-} from "./index-c37kme2v.mjs";
+} from "./index-ggqpre9v.mjs";
 import {
   RenderQueueContext
 } from "./index-9x6e1dq0.mjs";
-import"./index-9qtvmwtx.mjs";
+import"./index-41kqns5c.mjs";
 import"./index-cw0pnpg5.mjs";
 import {
   Models
-} from "./index-wbmp5srk.mjs";
-import"./index-2j3d1g81.mjs";
+} from "./index-hbezgbbq.mjs";
+import"./index-jrw61pkj.mjs";
 import {
   VERTICAL_SCROLLBAR_CLASSNAME,
   ValidationMessage,
@@ -48,7 +48,7 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-yfrysr5f.mjs";
+} from "./index-0x13f28h.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED

package/dist/esm/{index-yfrysr5f.mjs → index-0x13f28h.mjs}

@@ -163,6 +163,12 @@ import {
 } from "react";
 
 // src/helpers/pointer-session.ts
+var isPointerSessionRelease = (reason, event) => {
+  if (event === null) {
+    return false;
+  }
+  return reason === "pointerup" || reason === "buttons-released" || reason === "lostpointercapture" && event.buttons === 0;
+};
 var getButtonMask = (button) => {
   if (button === 0) {
     return 1;
@@ -347,7 +353,8 @@ var defaultKeyboardShortcuts = {
   copyEffectsAndValues: [{ key: "c", commandOrControl: true }],
   cutEffects: [{ key: "x", commandOrControl: true }],
   deleteSelection: [{ key: "Backspace" }, { key: "Delete" }],
-  askAI: [{ key: "i", commandOrControl: true }]
+  askAI: [{ key: "i", commandOrControl: true }],
+  pickColor: [{ key: "c", shift: true }]
 };
 var keyboardShortcutGroups = [
   {
@@ -414,6 +421,10 @@ var keyboardShortcutGroups = [
       shortcut("Reset zoom", "resetZoom")
     ]
   },
+  {
+    name: "Tools",
+    shortcuts: [shortcut("Color Picker", "pickColor")]
+  },
   {
     name: "Props Editor",
     shortcuts: [shortcut("Undo", "undo"), shortcut("Redo", "redo")]
@@ -733,7 +744,7 @@ var HigherZIndex = ({
         event: downEvent,
         onEnd: (reason, upEvent) => {
           endPointerSession = null;
-          if ((reason === "pointerup" || reason === "buttons-released") && upEvent && !getClickLock()) {
+          if (isPointerSessionRelease(reason, upEvent) && !getClickLock()) {
             const target = document.elementFromPoint(upEvent.clientX, upEvent.clientY) ?? upEvent.target;
             if (document.contains(target)) {
               upEvent.stopPropagation();
@@ -1021,9 +1032,12 @@ var horizontalLayout = {
 };
 var leftSidebar = {
   flexShrink: 0,
+  display: "flex",
+  flexDirection: "column",
   padding: 6
 };
 var horizontalTab = {
+  flex: "none",
   width: 150,
   display: "flex",
   flexDirection: "row",
@@ -1151,4 +1165,4 @@ var CheckCircleFilled = (props) => /* @__PURE__ */ jsx11("svg", {
   })
 });
 
-export { startCapturedPointerSession, startDeferredCapturedPointerSession, isMac, defaultKeyboardShortcuts, keyboardShortcutGroups, askAIKeyboardShortcutGroup, getKeyboardShortcutsForAction, keyboardShortcutsOverlap, formatKeyboardShortcut, getKeyboardShortcutLabel, getKeyboardShortcutAriaKeyShortcuts, shortcutFromKeyboardEvent, KeybindingContextProvider, areKeyboardShortcutsDisabled, useKeybinding, HighestZIndexProvider, getClickLock, setClickLock, HigherZIndex, useZIndex, getMaxModalWidth, getMaxModalHeight, ModalContainer, SPACING_UNIT, COMPACT_CONTROL_ROW_HEIGHT, COMPACT_INLINE_ROW_HEIGHT, Spacing, Flex, Row, Column, HOVERABLE_CLASS_NAME, HOVER_GROUP_CLASS_NAME, HOVER_GROUP_REVEAL_CLASS_NAME, FOCUS_VISIBLE_ONLY_CLASS_NAME, NO_HOVER_BACKGROUND_STYLE, hoverableStyle, makeHoverableCSS, InlineAction, MENU_INITIATOR_CLASSNAME, MENU_ITEM_CLASSNAME, HORIZONTAL_SCROLLBAR_CLASSNAME, VERTICAL_SCROLLBAR_CLASSNAME, isMenuItem, Spinner, TrashIcon, WarningTriangle, ValidationMessage, CloudDownloadIcon, outerModalStyle, container2 as container, optionsPanel, horizontalLayout, leftSidebar, horizontalTab, iconContainer, icon, buttonStyle, flexer, CheckCircleFilled };
+export { isPointerSessionRelease, startCapturedPointerSession, startDeferredCapturedPointerSession, isMac, defaultKeyboardShortcuts, keyboardShortcutGroups, askAIKeyboardShortcutGroup, getKeyboardShortcutsForAction, keyboardShortcutsOverlap, formatKeyboardShortcut, getKeyboardShortcutLabel, getKeyboardShortcutAriaKeyShortcuts, shortcutFromKeyboardEvent, KeybindingContextProvider, areKeyboardShortcutsDisabled, useKeybinding, HighestZIndexProvider, getClickLock, setClickLock, HigherZIndex, useZIndex, SPACING_UNIT, COMPACT_CONTROL_ROW_HEIGHT, COMPACT_INLINE_ROW_HEIGHT, Spacing, Flex, Row, Column, getMaxModalWidth, getMaxModalHeight, ModalContainer, HOVERABLE_CLASS_NAME, HOVER_GROUP_CLASS_NAME, HOVER_GROUP_REVEAL_CLASS_NAME, FOCUS_VISIBLE_ONLY_CLASS_NAME, NO_HOVER_BACKGROUND_STYLE, hoverableStyle, makeHoverableCSS, InlineAction, MENU_INITIATOR_CLASSNAME, MENU_ITEM_CLASSNAME, HORIZONTAL_SCROLLBAR_CLASSNAME, VERTICAL_SCROLLBAR_CLASSNAME, isMenuItem, Spinner, TrashIcon, WarningTriangle, ValidationMessage, CloudDownloadIcon, outerModalStyle, container2 as container, optionsPanel, horizontalLayout, leftSidebar, horizontalTab, iconContainer, icon, buttonStyle, flexer, CheckCircleFilled };

package/dist/esm/{index-q2epbw93.mjs → index-1089795y.mjs}

@@ -11,10 +11,10 @@ import {
   showNotification,
   useCopyFeedback,
   validatePublicOutputName
-} from "./index-c37kme2v.mjs";
+} from "./index-ggqpre9v.mjs";
 import {
   Spacing
-} from "./index-yfrysr5f.mjs";
+} from "./index-0x13f28h.mjs";
 import {
   BLUE,
   CURRENT_COLOR_LOWERCASE,

package/dist/esm/{index-9qtvmwtx.mjs → index-41kqns5c.mjs}

@@ -652,12 +652,14 @@ var applyCodemod = ({
   codemod,
   dryRun,
   symbolicatedStack,
-  signal
+  signal,
+  undoRedoNavigation
 }) => {
   const body = {
     codemod,
     dryRun,
-    symbolicatedStack
+    symbolicatedStack,
+    undoRedoNavigation
   };
   const browserStudioOperations = getBrowserStudioOperations();
   if (browserStudioOperations !== null) {