@remotion/studio 4.0.522 → 4.0.523

package/dist/esm/renderEntry.mjs

@@ -2,11 +2,11 @@ import {
   BACKGROUND_HEX,
   TRANSPARENT,
   WHITE
-} from "./chunk-je0h1bgt.js";
+} from "./index-jg13hf2g.mjs";
 import {
   __require,
   __toESM
-} from "./chunk-6jf1natv.js";
+} from "./index-rcv7qkt5.mjs";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -215,7 +215,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-3netyjd9.js").then(({ StudioInternals }) => {
+    import("./internals.mjs").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/esm/{chunk-m0jqdbkr.js → resolve-composition-component-location-14148845.mjs}

@@ -1,4 +1,4 @@
-import"./chunk-6jf1natv.js";
+import"./index-rcv7qkt5.mjs";
 
 // ../studio-codemods/dist/esm/resolve-composition-component-location.mjs
 var __create = Object.create;

package/dist/helpers/drag-aware-double-click.d.ts

@@ -1,6 +1,7 @@
 export type DragAwareDoubleClickTracker = {
-    readonly beginPointerGesture: () => void;
+    readonly beginPointerGesture: (event: Pick<PointerEvent, 'button'>) => void;
     readonly endPointerGesture: (wasDragged: boolean) => void;
     readonly consumePointerGestureWasDragged: () => boolean;
+    readonly acceptClickAsDoubleClick: (event: Pick<MouseEvent, 'button' | 'detail'>) => boolean;
 };
 export declare const createDragAwareDoubleClickTracker: () => DragAwareDoubleClickTracker;

package/dist/helpers/drag-aware-double-click.js

@@ -3,9 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createDragAwareDoubleClickTracker = void 0;
 const createDragAwareDoubleClickTracker = () => {
     let pointerGestureWasDragged = false;
+    let previousPointerButton = null;
+    let currentPointerButton = null;
     return {
-        beginPointerGesture: () => {
+        beginPointerGesture: (event) => {
             pointerGestureWasDragged = false;
+            previousPointerButton = currentPointerButton;
+            currentPointerButton = event.button;
         },
         endPointerGesture: (wasDragged) => {
             pointerGestureWasDragged = wasDragged;
@@ -15,6 +19,13 @@ const createDragAwareDoubleClickTracker = () => {
             pointerGestureWasDragged = false;
             return wasDragged;
         },
+        acceptClickAsDoubleClick: (event) => {
+            return (event.button === 0 &&
+                event.detail > 0 &&
+                event.detail % 2 === 0 &&
+                (event.detail > 2 ||
+                    (previousPointerButton === 0 && currentPointerButton === 0)));
+        },
     };
 };
 exports.createDragAwareDoubleClickTracker = createDragAwareDoubleClickTracker;

package/dist/helpers/get-asset-metadata.d.ts

@@ -19,6 +19,7 @@ export declare const getAssetPreviewMetadata: ({ canvasContent, metadata, }: {
     metadata: AssetMetadata;
 }) => {
     asset: string;
+    src: string;
     width: number;
     height: number;
     fps: number;

package/dist/helpers/get-asset-metadata.js

@@ -34,6 +34,10 @@ const getAssetPreviewMetadata = ({ canvasContent, metadata, }) => {
         : 30;
     return {
         asset: canvasContent.asset,
+        src: (0, add_asset_cache_bust_1.addAssetCacheBust)({
+            src: (0, remotion_1.staticFile)(canvasContent.asset),
+            fetchedAt: metadata.fetchedAt,
+        }),
         width: dimensions.width,
         height: dimensions.height,
         fps,

package/dist/helpers/hoverable.js

@@ -49,6 +49,10 @@ const makeHoverableCSS = () => `
     color: var(${COLOR_VARIABLE}, inherit);
   }
 
+  ${hoverGroup} ${reveal} {
+    flex-shrink: 0;
+  }
+
   @media (hover: hover) {
     ${hoverable}:hover {
       background-color: var(${HOVER_BG_VARIABLE}, var(${BG_VARIABLE}, ${colors_1.TRANSPARENT}));
@@ -69,10 +73,14 @@ const makeHoverableCSS = () => `
 
     ${hoverGroup} ${reveal} {
       opacity: 0;
+      width: 0;
+      overflow: hidden;
     }
 
     ${hoverGroup}:hover ${reveal} {
       opacity: 1;
+      width: auto;
+      overflow: visible;
     }
   }
 `;

package/dist/helpers/inject-css.js

@@ -5,6 +5,7 @@ const remotion_1 = require("remotion");
 const scroll_to_default_props_path_1 = require("../components/RenderModal/SchemaEditor/scroll-to-default-props-path");
 const colors_1 = require("./colors");
 const hoverable_1 = require("./hoverable");
+const prism_tomorrow_1 = require("./prism-tomorrow");
 const makeDefaultGlobalCSS = () => {
     const dragAreaFactor = 2;
     const fromMiddle = 50 / dragAreaFactor;
@@ -167,6 +168,7 @@ const injectCSS = () => {
     if (injected) {
         return;
     }
+    remotion_1.Internals.CSSUtils.injectCSS(prism_tomorrow_1.prismTomorrow);
     remotion_1.Internals.CSSUtils.injectCSS(makeDefaultGlobalCSS());
     injected = true;
 };

package/dist/helpers/optional-package-dependencies.d.ts

@@ -0,0 +1,3 @@
+import { type PackageInstallSpec } from '@remotion/studio-shared';
+export declare const TRANSFORMERS_PACKAGE = "@huggingface/transformers";
+export declare const withRequiredAuxiliaryPackages: (dependencies: readonly PackageInstallSpec[]) => PackageInstallSpec[];

package/dist/helpers/optional-package-dependencies.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withRequiredAuxiliaryPackages = exports.TRANSFORMERS_PACKAGE = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+exports.TRANSFORMERS_PACKAGE = '@huggingface/transformers';
+const packagesRequiringTransformers = new Set([
+    '@remotion/whisper-webgpu',
+    '@remotion/video-matting',
+]);
+const withRequiredAuxiliaryPackages = (dependencies) => {
+    if (!dependencies.some((dependency) => packagesRequiringTransformers.has(dependency.name)) ||
+        dependencies.some((dependency) => dependency.name === exports.TRANSFORMERS_PACKAGE)) {
+        return [...dependencies];
+    }
+    const transformers = studio_shared_1.extraPackages.find((pkg) => pkg.name === exports.TRANSFORMERS_PACKAGE);
+    if (!transformers) {
+        throw new Error(`No recommended version found for ${exports.TRANSFORMERS_PACKAGE}`);
+    }
+    return [
+        ...dependencies,
+        { name: transformers.name, version: transformers.version },
+    ];
+};
+exports.withRequiredAuxiliaryPackages = withRequiredAuxiliaryPackages;

package/dist/helpers/pointer-session.d.ts

@@ -6,6 +6,12 @@ export declare const startCapturedPointerSession: ({ event, captureTarget, onMov
     onMove?: ((event: PointerEvent) => void) | undefined;
     onEnd: (reason: PointerSessionEndReason, event: PointerEvent | null) => void;
 }) => () => void;
+export declare const startDeferredCapturedPointerSession: ({ event, captureTarget, onMove, onEnd, }: {
+    event: PointerSessionEvent;
+    captureTarget: Element;
+    onMove: (event: PointerEvent, capturePointer: () => void) => void;
+    onEnd: (reason: PointerSessionEndReason, event: PointerEvent | null) => void;
+}) => () => void;
 export declare const observePointerRelease: ({ event, onEnd, }: {
     event: PointerSessionEvent;
     onEnd: (reason: PointerSessionEndReason, event: PointerEvent | null) => void;

package/dist/helpers/pointer-session.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.observePointerRelease = exports.startCapturedPointerSession = void 0;
+exports.observePointerRelease = exports.startDeferredCapturedPointerSession = exports.startCapturedPointerSession = void 0;
 const getButtonMask = (button) => {
     if (button === 0) {
         return 1;
@@ -14,10 +14,24 @@ const getButtonMask = (button) => {
     return 1 << button;
 };
 const startPointerSession = ({ event, captureTarget, onMove, onEnd, }) => {
-    var _a;
     const { pointerId } = event;
     const buttonMask = getButtonMask(event.button);
     let ended = false;
+    let activeCaptureTarget = null;
+    const capturePointer = (target) => {
+        var _a;
+        if (activeCaptureTarget !== null) {
+            return;
+        }
+        activeCaptureTarget = target;
+        try {
+            (_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
+        }
+        catch (_b) {
+            // Capture is best-effort for detached targets.
+        }
+        target.addEventListener('lostpointercapture', handleLostPointerCapture);
+    };
     const cleanup = () => {
         var _a;
         window.removeEventListener('pointermove', handleMove);
@@ -25,10 +39,10 @@ const startPointerSession = ({ event, captureTarget, onMove, onEnd, }) => {
         window.removeEventListener('pointercancel', handleCancel);
         window.removeEventListener('blur', handleBlur);
         document.removeEventListener('visibilitychange', handleVisibilityChange);
-        captureTarget === null || captureTarget === void 0 ? void 0 : captureTarget.removeEventListener('lostpointercapture', handleLostPointerCapture);
-        if ((_a = captureTarget === null || captureTarget === void 0 ? void 0 : captureTarget.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(captureTarget, pointerId)) {
+        activeCaptureTarget === null || activeCaptureTarget === void 0 ? void 0 : activeCaptureTarget.removeEventListener('lostpointercapture', handleLostPointerCapture);
+        if ((_a = activeCaptureTarget === null || activeCaptureTarget === void 0 ? void 0 : activeCaptureTarget.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(activeCaptureTarget, pointerId)) {
             try {
-                captureTarget.releasePointerCapture(pointerId);
+                activeCaptureTarget.releasePointerCapture(pointerId);
             }
             catch (_b) {
                 // The browser may already have released capture.
@@ -51,7 +65,7 @@ const startPointerSession = ({ event, captureTarget, onMove, onEnd, }) => {
             end('buttons-released', moveEvent);
             return;
         }
-        onMove === null || onMove === void 0 ? void 0 : onMove(moveEvent);
+        onMove === null || onMove === void 0 ? void 0 : onMove(moveEvent, capturePointer);
     }
     function handleUp(upEvent) {
         if (upEvent.pointerId === pointerId) {
@@ -77,14 +91,8 @@ const startPointerSession = ({ event, captureTarget, onMove, onEnd, }) => {
             end('visibilitychange', null);
         }
     }
-    if (captureTarget) {
-        try {
-            (_a = captureTarget.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(captureTarget, pointerId);
-        }
-        catch (_b) {
-            // Capture is best-effort for detached targets.
-        }
-        captureTarget.addEventListener('lostpointercapture', handleLostPointerCapture);
+    if (captureTarget !== null) {
+        capturePointer(captureTarget);
     }
     window.addEventListener('pointermove', handleMove);
     window.addEventListener('pointerup', handleUp);
@@ -99,6 +107,20 @@ const startCapturedPointerSession = ({ event, captureTarget, onMove, onEnd, }) =
     return startPointerSession({ event, captureTarget, onMove, onEnd });
 };
 exports.startCapturedPointerSession = startCapturedPointerSession;
+// Use when a click must remain targeted at the element under the pointer, but
+// an actual drag needs a stable capture target. Call `capturePointer()` from
+// `onMove` once the movement qualifies as a drag.
+const startDeferredCapturedPointerSession = ({ event, captureTarget, onMove, onEnd, }) => {
+    return startPointerSession({
+        event,
+        captureTarget: null,
+        onMove: (moveEvent, capturePointer) => {
+            onMove(moveEvent, () => capturePointer(captureTarget));
+        },
+        onEnd,
+    });
+};
+exports.startDeferredCapturedPointerSession = startDeferredCapturedPointerSession;
 // Use when observing a gesture that started elsewhere. This deliberately does
 // not capture the pointer from the element under it.
 const observePointerRelease = ({ event, onEnd, }) => {

package/dist/helpers/prism-tomorrow.d.ts

@@ -0,0 +1 @@
+export declare const prismTomorrow = "/**\n * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML\n * Based on https://github.com/chriskempson/tomorrow-theme\n * @author Rose Pritchard\n */\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tcolor: #ccc;\n\tbackground: none;\n\tfont-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n\tfont-size: 1em;\n\ttext-align: left;\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\tword-wrap: normal;\n\tline-height: 1.5;\n\n\t-moz-tab-size: 4;\n\t-o-tab-size: 4;\n\ttab-size: 4;\n\n\t-webkit-hyphens: none;\n\t-moz-hyphens: none;\n\t-ms-hyphens: none;\n\thyphens: none;\n\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n\tpadding: 1em;\n\tmargin: .5em 0;\n\toverflow: auto;\n}\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tbackground: #2d2d2d;\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n\tpadding: .1em;\n\tborder-radius: .3em;\n\twhite-space: normal;\n}\n\n.token.comment,\n.token.block-comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n\tcolor: #999;\n}\n\n.token.punctuation {\n\tcolor: #ccc;\n}\n\n.token.tag,\n.token.attr-name,\n.token.namespace,\n.token.deleted {\n\tcolor: #e2777a;\n}\n\n.token.function-name {\n\tcolor: #6196cc;\n}\n\n.token.boolean,\n.token.number,\n.token.function {\n\tcolor: #f08d49;\n}\n\n.token.property,\n.token.class-name,\n.token.constant,\n.token.symbol {\n\tcolor: #f8c555;\n}\n\n.token.selector,\n.token.important,\n.token.atrule,\n.token.keyword,\n.token.builtin {\n\tcolor: #cc99cd;\n}\n\n.token.string,\n.token.char,\n.token.attr-value,\n.token.regex,\n.token.variable {\n\tcolor: #7ec699;\n}\n\n.token.operator,\n.token.entity,\n.token.url {\n\tcolor: #67cdcc;\n}\n\n.token.important,\n.token.bold {\n\tfont-weight: bold;\n}\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.entity {\n\tcursor: help;\n}\n\n.token.inserted {\n\tcolor: green;\n}\n";

package/dist/helpers/prism-tomorrow.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prismTomorrow = void 0;
+// Unmodified prismjs@1.30.0/themes/prism-tomorrow.css, stored as a string for
+// Studio’s CSS injection (including Browser Studio, which has no CSS loader).
+/*
+MIT LICENSE
+
+Copyright (c) 2012 Lea Verou
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+exports.prismTomorrow = `/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #ccc;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #2d2d2d;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999;
+}
+
+.token.punctuation {
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+	color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+	color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+	color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+	color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+	color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.inserted {
+	color: green;
+}
+`;

package/dist/helpers/sequence-node-path-mutations.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.takePendingSequenceNodePathMutations = exports.queueSequenceNodePathMutationFromApiResponse = exports.queueSequenceNodePathMutation = void 0;
+const inserted_element_selection_1 = require("./inserted-element-selection");
 const pendingMutations = [];
 const seenMutationIds = new Set();
 const queueSequenceNodePathMutation = (mutation) => {
@@ -9,6 +10,16 @@ const queueSequenceNodePathMutation = (mutation) => {
     }
     seenMutationIds.add(mutation.mutationId);
     pendingMutations.push(mutation);
+    if (mutation.timelineSelection !== null) {
+        (0, inserted_element_selection_1.requestInsertedElementSelection)({
+            compositionId: mutation.timelineSelection.compositionId,
+            nodePath: {
+                absolutePath: mutation.timelineSelection.absolutePath,
+                nodePath: mutation.timelineSelection.nodePath,
+            },
+            notification: null,
+        });
+    }
 };
 exports.queueSequenceNodePathMutation = queueSequenceNodePathMutation;
 const queueSequenceNodePathMutationFromApiResponse = (response) => {

package/dist/helpers/slugify-name.d.ts

@@ -0,0 +1 @@
+export declare const slugifyName: (name: string) => string;

package/dist/helpers/slugify-name.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.slugifyName = void 0;
+const remotion_1 = require("remotion");
+const slugifyName = (name) => {
+    return remotion_1.Internals.isFolderNameValid(name)
+        ? name
+        : name
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .replace(/[^a-zA-Z0-9\u4E00-\u9FFF-]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+};
+exports.slugifyName = slugifyName;

package/dist/helpers/studio-runtime-config.d.ts

@@ -2,5 +2,6 @@ export declare const DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
 export declare const getStudioAskAIEnabled: () => boolean;
 export declare const getStudioInteractivityEnabled: () => boolean;
 export declare const getStudioKeyboardShortcutsEnabled: () => boolean;
+export declare const getStudioKeyboardShortcuts: () => 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" | "toggleRightSidebar" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut", import("@remotion/studio-shared").StudioKeyboardShortcutValue>> | null;
 export declare const getStudioMaxTimelineTracks: () => number | null;
 export declare const getStudioBufferStateDelayInMilliseconds: () => number;

package/dist/helpers/studio-runtime-config.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStudioBufferStateDelayInMilliseconds = exports.getStudioMaxTimelineTracks = exports.getStudioKeyboardShortcutsEnabled = exports.getStudioInteractivityEnabled = exports.getStudioAskAIEnabled = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = void 0;
+exports.getStudioBufferStateDelayInMilliseconds = exports.getStudioMaxTimelineTracks = exports.getStudioKeyboardShortcuts = exports.getStudioKeyboardShortcutsEnabled = exports.getStudioInteractivityEnabled = exports.getStudioAskAIEnabled = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = void 0;
 exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
 const defaultStudioRuntimeConfig = {
     askAIEnabled: false,
@@ -32,6 +32,11 @@ const getStudioKeyboardShortcutsEnabled = () => {
     return getStudioRuntimeConfig().keyboardShortcutsEnabled;
 };
 exports.getStudioKeyboardShortcutsEnabled = getStudioKeyboardShortcutsEnabled;
+const getStudioKeyboardShortcuts = () => {
+    var _a;
+    return (_a = getStudioRuntimeConfig().keyboardShortcuts) !== null && _a !== void 0 ? _a : null;
+};
+exports.getStudioKeyboardShortcuts = getStudioKeyboardShortcuts;
 const getStudioMaxTimelineTracks = () => {
     return getStudioRuntimeConfig().maxTimelineTracks;
 };

package/dist/helpers/use-keybinding.d.ts

@@ -3,13 +3,19 @@ export declare const areKeyboardShortcutsDisabled: () => boolean;
 export declare const useKeybinding: () => {
     registerKeybinding: (options: {
         event: KeyEventType;
-        key: string;
-        commandCtrlKey: boolean;
         callback: (e: KeyboardEvent) => void;
         preventDefault: boolean;
         triggerIfInputFieldFocused: boolean;
         keepRegisteredWhenNotHighestContext: boolean;
-    }) => {
+    } & ({
+        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" | "toggleRightSidebar" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut";
+        key?: undefined;
+        commandCtrlKey?: undefined;
+    } | {
+        action?: undefined;
+        key: string;
+        commandCtrlKey: boolean;
+    })) => {
         unregister: () => void;
     };
     isHighestContext: boolean;

package/dist/helpers/use-keybinding.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useKeybinding = exports.areKeyboardShortcutsDisabled = void 0;
 const react_1 = require("react");
+const keyboard_shortcuts_1 = require("../components/keyboard-shortcuts");
 const keybindings_1 = require("../state/keybindings");
 const z_index_1 = require("../state/z-index");
 const is_mac_1 = require("./is-mac");
@@ -19,25 +20,23 @@ const useKeybinding = () => {
     const context = (0, react_1.useContext)(keybindings_1.KeybindingContext);
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const registerKeybinding = (0, react_1.useCallback)((options) => {
-        if (!(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
-            return {
-                unregister: () => undefined,
-            };
-        }
+        var _a;
         if (!isHighestContext && !options.keepRegisteredWhenNotHighestContext) {
             return {
                 unregister: () => undefined,
             };
         }
         const listener = (e) => {
-            const commandKey = is_mac_1.isMac ? e.metaKey : e.ctrlKey;
             // Apparently, e.key can be undefined in Edge:
             // https://github.com/remotion-dev/remotion/issues/5637
             if (!e.key) {
                 return;
             }
-            if (e.key.toLowerCase() === options.key.toLowerCase() &&
-                options.commandCtrlKey === commandKey) {
+            const matches = options.action
+                ? (0, keyboard_shortcuts_1.keyboardEventMatchesAction)(e, options.action)
+                : e.key.toLowerCase() === options.key.toLowerCase() &&
+                    options.commandCtrlKey === (is_mac_1.isMac ? e.metaKey : e.ctrlKey);
+            if (matches && (0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
                 if (!options.triggerIfInputFieldFocused) {
                     const { activeElement } = document;
                     if (activeElement instanceof HTMLInputElement) {
@@ -56,7 +55,7 @@ const useKeybinding = () => {
         const toRegister = {
             registeredFromPane: paneId,
             event: options.event,
-            key: options.key,
+            key: (_a = options.action) !== null && _a !== void 0 ? _a : options.key,
             callback: listener,
             id: String(Math.random()),
         };

package/dist/helpers/use-keyboard-shortcut-label.d.ts

@@ -0,0 +1,2 @@
+export declare const useKeyboardShortcutLabel: (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" | "toggleRightSidebar" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
+export declare const useKeyboardShortcutAriaKeyShortcuts: (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" | "toggleRightSidebar" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;

package/dist/helpers/use-keyboard-shortcut-label.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardShortcutAriaKeyShortcuts = exports.useKeyboardShortcutLabel = void 0;
+const keyboard_shortcuts_1 = require("../components/keyboard-shortcuts");
+const client_id_1 = require("./client-id");
+const useKeyboardShortcutLabel = (action) => {
+    (0, client_id_1.useStudioConfigRevision)();
+    return (0, keyboard_shortcuts_1.getKeyboardShortcutLabel)(action);
+};
+exports.useKeyboardShortcutLabel = useKeyboardShortcutLabel;
+const useKeyboardShortcutAriaKeyShortcuts = (action) => {
+    (0, client_id_1.useStudioConfigRevision)();
+    return (0, keyboard_shortcuts_1.getKeyboardShortcutAriaKeyShortcuts)(action);
+};
+exports.useKeyboardShortcutAriaKeyShortcuts = useKeyboardShortcutAriaKeyShortcuts;