@remotion/studio 4.0.515 → 4.0.517

package/dist/icons/keyboard.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license (Commercial License)
+const KeyboardIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M96 192l64 0 0 128-64 0c-53 0-96 43-96 96s43 96 96 96 96-43 96-96l0-64 128 0 0 64c0 53 43 96 96 96s96-43 96-96-43-96-96-96l-64 0 0-128 64 0c53 0 96-43 96-96s-43-96-96-96-96 43-96 96l0 64-128 0 0-64c0-53-43-96-96-96S0 43 0 96 43 192 96 192zM256 320l-64 0 0-128 128 0 0 128-64 0zM96 160c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64l0 64-64 0zm64 256c0 35.3-28.7 64-64 64s-64-28.7-64-64 28.7-64 64-64l64 0 0 64zM352 160l0-64c0-35.3 28.7-64 64-64s64 28.7 64 64-28.7 64-64 64l-64 0zm64 192c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64l0-64 64 0z" }) }));
+};
+exports.KeyboardIcon = KeyboardIcon;

package/dist/icons/license.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const LicenseIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/license.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LicenseIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LicenseIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -40 512 593", children: jsx_runtime_1.jsx("path", { fill: color, d: "M309.4-7.4L256-40 202.6-7.4 140-8.9 110 46 55.1 76 56.6 138.6 24 192 56.6 245.4 55.1 308 110 338 128 371 128 552.3c1-.4 43.6-18.7 128-54.9 84.4 36.2 127 54.4 128 54.9l0-181.3 18-33 54.9-30-1.5-62.6 32.6-53.4-32.6-53.4 1.5-62.6-54.9-30-30-54.9-62.6 1.5zM160 503.7l0-111.3 42.6-1 53.4 32.6 53.4-32.6 42.6 1 0 111.3-89.7-38.4-6.3-2.7-6.3 2.7-89.7 38.4zM353.3 23.5l20.7 37.8 4.5 8.2c.6 .3 15.9 8.7 46 25.2-.8 34.3-1.2 51.8-1.2 52.5 .3 .5 9.4 15.5 27.3 44.8-17.9 29.3-27 44.3-27.3 44.8 0 .6 .4 18.1 1.2 52.5l-37.8 20.7-8.2 4.5-4.5 8.2-20.7 37.8c-34.3-.8-51.8-1.2-52.5-1.2-.5 .3-15.5 9.4-44.8 27.3-29.3-17.9-44.3-27-44.8-27.3-.6 0-18.1 .4-52.5 1.2-16.5-30.1-24.9-45.5-25.2-46l-8.2-4.5-37.8-20.7c.8-34.3 1.2-51.8 1.2-52.5-.3-.5-9.4-15.5-27.3-44.8 17.9-29.3 27-44.3 27.3-44.8 0-.6-.4-18.1-1.2-52.5 30.1-16.5 45.5-24.9 46-25.2 .3-.6 8.7-15.9 25.2-46 34.3 .8 51.8 1.2 52.5 1.2 .5-.3 15.5-9.4 44.8-27.3 29.3 17.9 44.3 27 44.8 27.3 .6 0 18.1-.4 52.5-1.2zM336 192a80 80 0 1 1 -160 0 80 80 0 1 1 160 0zM256 80a112 112 0 1 0 0 224 112 112 0 1 0 0-224z" }) }));
+};
+exports.LicenseIcon = LicenseIcon;

package/dist/icons/package.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const PackageIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/package.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PackageIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PackageIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -16 512 544", children: jsx_runtime_1.jsx("path", { fill: color, d: "M240.3 25.2L64.5 126.8 256.3 237.5 448.2 126.8 272.3 25.2c-9.9-5.7-22.1-5.7-32 0zM48.5 154.5l0 203c0 11.4 6.1 22 16 27.7l175.8 101.5 0-221.5-191.8-110.8zM272.3 486.8L448.2 385.2c9.9-5.7 16-16.3 16-27.7l0-203-191.8 110.8 0 221.5zM224.3-2.5c19.8-11.4 44.2-11.4 64 0L464.2 99c19.8 11.4 32 32.6 32 55.4l0 203c0 22.9-12.2 44-32 55.4L288.3 514.5c-19.8 11.4-44.2 11.4-64 0L48.5 413c-19.8-11.4-32-32.6-32-55.4l0-203c0-22.9 12.2-44 32-55.4L224.3-2.5z" }) }));
+};
+exports.PackageIcon = PackageIcon;

package/dist/icons/react.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReactIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ReactIcon = ({ color, ...props }) => {
-    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", children: jsx_runtime_1.jsx("path", { fill: color, d: "M392.8 65.2C375.8 60.3 358.1 70.2 353.2 87.2L225.2 535.2C220.3 552.2 230.2 569.9 247.2 574.8C264.2 579.7 281.9 569.8 286.8 552.8L414.8 104.8C419.7 87.8 409.8 70.1 392.8 65.2zM457.4 201.3C444.9 213.8 444.9 234.1 457.4 246.6L530.8 320L457.4 393.4C444.9 405.9 444.9 426.2 457.4 438.7C469.9 451.2 490.2 451.2 502.7 438.7L598.7 342.7C611.2 330.2 611.2 309.9 598.7 297.4L502.7 201.4C490.2 188.9 469.9 188.9 457.4 201.4zM182.7 201.3C170.2 188.8 149.9 188.8 137.4 201.3L41.4 297.3C28.9 309.8 28.9 330.1 41.4 342.6L137.4 438.6C149.9 451.1 170.2 451.1 182.7 438.6C195.2 426.1 195.2 405.8 182.7 393.3L109.3 320L182.6 246.6C195.1 234.1 195.1 213.8 182.6 201.3z" }) }));
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M144 32c-44.2 0-80 35.8-80 80l0 53.5c0 12.7-5.1 24.9-14.1 33.9L4.7 244.7c-3 3-4.7 7.1-4.7 11.3s1.7 8.3 4.7 11.3l45.3 45.3c9 9 14.1 21.2 14.1 33.9L64 400c0 44.2 35.8 80 80 80l64 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-64 0c-26.5 0-48-21.5-48-48l0-53.5c0-21.2-8.4-41.6-23.4-56.6L38.6 256 72.6 222.1c15-15 23.4-35.4 23.4-56.6L96 112c0-26.5 21.5-48 48-48l64 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-64 0zm288 0l-64 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l64 0c26.5 0 48 21.5 48 48l0 53.5c0 21.2 8.4 41.6 23.4 56.6l33.9 33.9-33.9 33.9c-15 15-23.4 35.4-23.4 56.6l0 53.5c0 26.5-21.5 48-48 48l-64 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l64 0c44.2 0 80-35.8 80-80l0-53.5c0-12.7 5.1-24.9 14.1-33.9l45.3-45.3c3-3 4.7-7.1 4.7-11.3s-1.7-8.3-4.7-11.3l-45.3-45.3c-9-9-14.1-21.2-14.1-33.9l0-53.5c0-44.2-35.8-80-80-80z" }) }));
 };
 exports.ReactIcon = ReactIcon;

package/dist/icons/remotion-convert.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const RemotionConvertIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/remotion-convert.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemotionConvertIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license (Commercial License)
+const RemotionConvertIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M427.3 36.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l52.7 52.7-97.4 0c-30.2 0-58.7 14.2-76.8 38.4l-29.2 38.9 20 26.7 34.8-46.4C320.9 153.5 339.9 144 360 144l97.4 0-52.7 52.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l80-80c6.2-6.2 6.2-16.4 0-22.6l-80-80zM139.2 342.4C127.1 358.5 108.1 368 88 368l-72 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l72 0c30.2 0 58.7-14.2 76.8-38.4l29.2-38.9-20-26.7-34.8 46.4zM404.7 475.3c6.2 6.2 16.4 6.2 22.6 0l80-80c6.2-6.2 6.2-16.4 0-22.6l-80-80c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l52.7 52.7-93.4 0c-22.7 0-44-10.7-57.6-28.8L167.2 153.6C147.6 127.4 116.7 112 84 112l-68 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l68 0c22.7 0 44 10.7 57.6 28.8L280.8 358.4C300.4 384.6 331.3 400 364 400l93.4 0-52.7 52.7c-6.2 6.2-6.2 16.4 0 22.6z" }) }));
+};
+exports.RemotionConvertIcon = RemotionConvertIcon;

package/dist/icons/skills.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const SkillsIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/skills.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkillsIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SkillsIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsxs("svg", { ...props, fill: "none", viewBox: "0 0 16 16", children: [
+            jsx_runtime_1.jsx("path", { d: "M8 0.9 14.05 4.35v7.3L8 15.1 1.95 11.65v-7.3L8 0.9Z", stroke: color, strokeLinejoin: "round", strokeWidth: "1.1" }), jsx_runtime_1.jsx("path", { d: "m1.95 4.35 6.05 3.55 6.05-3.55M8 7.9v7.2M1.95 8 8 11.55 14.05 8", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.1" })
+        ] }));
+};
+exports.SkillsIcon = SkillsIcon;

package/dist/state/editor-pixel-grid.d.ts

@@ -0,0 +1,8 @@
+type State = {
+    editorShowPixelGrid: boolean;
+    setEditorShowPixelGrid: (cb: (prevState: boolean) => boolean) => void;
+};
+export declare const persistEditorShowPixelGridOption: (option: boolean) => void;
+export declare const loadEditorShowPixelGridOption: () => boolean;
+export declare const EditorShowPixelGridContext: import("react").Context<State>;
+export {};

package/dist/state/editor-pixel-grid.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorShowPixelGridContext = exports.loadEditorShowPixelGridOption = exports.persistEditorShowPixelGridOption = void 0;
+const react_1 = require("react");
+const key = 'remotion.editorShowPixelGrid';
+const persistEditorShowPixelGridOption = (option) => {
+    localStorage.setItem(key, String(option));
+};
+exports.persistEditorShowPixelGridOption = persistEditorShowPixelGridOption;
+const loadEditorShowPixelGridOption = () => {
+    const item = localStorage.getItem(key);
+    return item !== 'false';
+};
+exports.loadEditorShowPixelGridOption = loadEditorShowPixelGridOption;
+exports.EditorShowPixelGridContext = (0, react_1.createContext)({
+    editorShowPixelGrid: true,
+    setEditorShowPixelGrid: () => undefined,
+});

package/dist/state/modals.d.ts

@@ -1,6 +1,6 @@
 import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
-import type { CanvasCaptureData, PackageManager, RenderDefaults } from '@remotion/studio-shared';
+import type { CanvasCaptureData, RenderDefaults } from '@remotion/studio-shared';
 import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererHardwareAcceleration, WebRendererPageResponsiveness, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type React from 'react';
 import type { SequencePropsSubscriptionKey, _InternalTypes } from 'remotion';
@@ -154,7 +154,7 @@ export type ModalState = {
     type: 'input-props-override';
 } | {
     type: 'settings';
-    initialTab: 'apps' | 'rendering' | 'studio' | 'license';
+    initialTab: 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'license';
     initialPublicLicenseKey: string | null;
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
@@ -168,9 +168,6 @@ export type ModalState = {
     prop: string;
     context: string;
     remotionInteractivitySkillAvailable: boolean;
-} | {
-    type: 'install-packages';
-    packageManager: PackageManager | null;
 } | {
     type: 'quick-switcher';
     mode: QuickSwitcherMode;
@@ -184,6 +181,10 @@ export type ModalState = {
         excludeCompositionId: string;
         onSelected: (composition: _InternalTypes['AnyComposition']) => void;
     } | null;
+} | {
+    type: 'element-library';
+    name: string;
+    url: string;
 } | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
 export type SetSelectedModalContextType = {
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.515",
+	"version": "4.0.517",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,17 +25,19 @@
 	},
 	"dependencies": {
 		"@tanstack/react-virtual": "3.14.9",
-		"@remotion/studio-protocol": "4.0.515",
+		"@remotion/canvas": "4.0.517",
+		"@remotion/studio-protocol": "4.0.517",
 		"semver": "7.5.3",
-		"remotion": "4.0.515",
-		"@remotion/captions": "4.0.515",
-		"@remotion/player": "4.0.515",
-		"@remotion/media-utils": "4.0.515",
-		"@remotion/renderer": "4.0.515",
-		"@remotion/web-renderer": "4.0.515",
-		"@remotion/studio-shared": "4.0.515",
-		"@remotion/timeline-utils": "4.0.515",
-		"@remotion/zod-types": "4.0.515",
+		"remotion": "4.0.517",
+		"@remotion/captions": "4.0.517",
+		"@remotion/media": "4.0.517",
+		"@remotion/player": "4.0.517",
+		"@remotion/media-utils": "4.0.517",
+		"@remotion/renderer": "4.0.517",
+		"@remotion/web-renderer": "4.0.517",
+		"@remotion/studio-shared": "4.0.517",
+		"@remotion/timeline-utils": "4.0.517",
+		"@remotion/zod-types": "4.0.517",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.55.1",
 		"memfs": "3.4.3",
@@ -46,7 +48,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.515",
+		"@remotion/eslint-config-internal": "4.0.517",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/KeyboardShortcutsExplainer.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const KeyboardShortcutsExplainer: React.FC;

package/dist/components/KeyboardShortcutsExplainer.js

@@ -1,194 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyboardShortcutsExplainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
-const colors_1 = require("../helpers/colors");
-const is_mac_1 = require("../helpers/is-mac");
-const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const keys_1 = require("../icons/keys");
-const layout_1 = require("./layout");
-const left = {
-    width: 85,
-    paddingTop: 8,
-    paddingBottom: 8,
-};
-const key = {
-    background: colors_1.INPUT_BACKGROUND,
-    padding: '3px 6px',
-    color: colors_1.WHITE,
-    borderRadius: 3,
-    border: '1px solid ' + colors_1.BLACK_ALPHA_60,
-    borderBottomWidth: 3,
-    fontSize: 14,
-    fontFamily: 'monospace',
-};
-const right = {
-    fontSize: 14,
-    color: colors_1.KEYBOARD_SHORTCUT_KEY_COLOR,
-};
-const container = {
-    paddingLeft: 20,
-    paddingRight: 40,
-    paddingTop: 10,
-    paddingBottom: 10,
-};
-const title = {
-    fontWeight: 'bold',
-    color: colors_1.WHITE,
-    fontSize: 14,
-    marginBottom: 10,
-};
-const keyboardShortcutsDisabled = {
-    padding: 12,
-    width: '100%',
-    fontSize: 14,
-    backgroundColor: colors_1.WHITE_ALPHA_10,
-};
-const ul = {
-    marginTop: 0,
-    marginBottom: 0,
-};
-const li = {
-    fontSize: 14,
-};
-const KeyboardShortcutsExplainer = () => {
-    return (jsx_runtime_1.jsxs("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:",
-                    jsx_runtime_1.jsxs("ul", { style: ul, children: [
-                            jsx_runtime_1.jsx("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), jsx_runtime_1.jsx("li", { style: li, children: "b) Config.setKeyboardShortcutsEnabled(false) being set or" }), jsx_runtime_1.jsx("li", { style: li, children: " c) a Remotion version mismatch." })
-                        ] })
-                ] })) : null, jsx_runtime_1.jsxs(layout_1.Row, { style: container, children: [
-                    jsx_runtime_1.jsxs(layout_1.Column, { children: [
-                            jsx_runtime_1.jsx("div", { style: title, children: "Playback" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ShiftIcon, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ArrowLeft, {}) })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "1 second back" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ArrowLeft, {}) }) }), jsx_runtime_1.jsx("div", { style: right, children: "Previous frame" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "Space" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Play / Pause" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ArrowRight, {}) }) }), jsx_runtime_1.jsx("div", { style: right, children: "Next frame" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ShiftIcon, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ArrowRight, {}) })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "1 second forward" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "A" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Jump to beginning" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "E" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Jump to end" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "J" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Reverse playback" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "K" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Pause" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "L" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Play / Speed up" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "G" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Go to frame" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "Enter" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Pause & return to playback start" })
-                                ] }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Sidebar" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "B" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Toggle left sidebar" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "J" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Toggle right sidebar" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "G" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Toggle both sidebars" })
-                                ] }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "View" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "F" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Enter fullscreen" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "Esc" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Exit fullscreen" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ShiftIcon, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "M" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Enable snapping" })
-                                ] })
-                        ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 8 }), jsx_runtime_1.jsxs(layout_1.Column, { children: [
-                            jsx_runtime_1.jsx("div", { style: title, children: "Navigation" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "PageUp" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Previous composition" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "PageDown" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Next composition" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "R" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Render, unless a sequence or prop is selected" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "T" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Checkerboard, unless a sequence or prop is selected" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "?" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Show keyboard shortcuts" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "K" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Quick Switcher" })
-                                ] }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Playback range" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "I" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Set In Point" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "O" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Set Out Point" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "X" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Clear In/Out Points" })
-                                ] }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Zoom" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "+" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Zoom in" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "-" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Zoom out" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "0" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Reset zoom" })
-                                ] }), ' ', jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Props Editor" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "Z" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Undo" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), is_mac_1.isMac ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                                    jsx_runtime_1.jsx("kbd", { style: key, children: "Shift" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "Z" })
-                                                ] })) : (jsx_runtime_1.jsx("kbd", { style: key, children: "Y" }))] }), jsx_runtime_1.jsx("div", { style: right, children: "Redo" })
-                                ] }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Interactivity" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "Shift" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select range / axis lock drag" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }) }), jsx_runtime_1.jsx("div", { style: right, children: "Toggle selection" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "A" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Select sequence rows" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "P" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select translate prop" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "T" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select opacity prop" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "R" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select rotate prop" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "S" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select scale prop" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "D" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Duplicate sequences" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "C" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Copy effects / values" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "X" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Cut effects" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "V" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Paste effects / values" })
-                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: "Del" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "\u232B" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Delete / reset selection" })
-                                ] }), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "AI" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                            jsx_runtime_1.jsxs("div", { style: left, children: [
-                                                    jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "I" })
-                                                ] }), jsx_runtime_1.jsx("div", { style: right, children: "Ask AI" })
-                                        ] })
-                                ] }))] })
-                ] })
-        ] }));
-};
-exports.KeyboardShortcutsExplainer = KeyboardShortcutsExplainer;