@remotion/studio 4.0.522 → 4.0.524

package/dist/esm/renderEntry.mjs

@@ -2,11 +2,11 @@ import {
   BACKGROUND_HEX,
   TRANSPARENT,
   WHITE
-} from "./chunk-je0h1bgt.js";
+} from "./index-k426ye99.mjs";
 import {
   __require,
   __toESM
-} from "./chunk-6jf1natv.js";
+} from "./index-rcv7qkt5.mjs";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -170,7 +170,7 @@ var renderContent = (Root) => {
         logLevel: window.remotion_logLevel ?? "info",
         numberOfAudioTags: 0,
         audioLatencyHint: window.remotion_audioLatencyHint ?? "playback",
-        previewSampleRate: window.remotion_previewSampleRate,
+        previewSampleRate: window.remotion_sampleRate,
         _experimentalKeepAudioContextAlive: false,
         children: /* @__PURE__ */ jsxs(Internals.RenderAssetManagerProvider, {
           collectAssets: null,
@@ -198,7 +198,7 @@ var renderContent = (Root) => {
         logLevel: window.remotion_logLevel ?? "info",
         numberOfAudioTags: 0,
         audioLatencyHint: window.remotion_audioLatencyHint ?? "playback",
-        previewSampleRate: window.remotion_previewSampleRate,
+        previewSampleRate: window.remotion_sampleRate,
         _experimentalKeepAudioContextAlive: false,
         children: /* @__PURE__ */ jsx(Internals.RenderAssetManagerProvider, {
           collectAssets: null,
@@ -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-bt2d6qxq.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/colors.d.ts

@@ -33,6 +33,7 @@ export declare const WHITE_ALPHA_60 = "rgba(255, 255, 255, 0.6)";
 export declare const WHITE_ALPHA_70 = "rgba(255, 255, 255, 0.7)";
 export declare const WHITE_ALPHA_72 = "rgba(255, 255, 255, 0.72)";
 export declare const WHITE_ALPHA_80 = "rgba(255, 255, 255, 0.8)";
+export declare const WHITE_ALPHA_90 = "rgba(255, 255, 255, 0.9)";
 export declare const BLACK_ALPHA_10 = "rgba(0, 0, 0, 0.1)";
 export declare const BLACK_ALPHA_28 = "rgba(0, 0, 0, 0.28)";
 export declare const BLACK_ALPHA_30 = "rgba(0, 0, 0, 0.3)";

package/dist/helpers/colors.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BLUE_DISABLED = exports.BLUE_HOVERED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.BLACK_OPAQUE = exports.BLACK_ALPHA_90 = exports.BLACK_ALPHA_85 = exports.BLACK_ALPHA_80 = exports.BLACK_ALPHA_60 = exports.BLACK_ALPHA_50 = exports.BLACK_ALPHA_40 = exports.BLACK_ALPHA_30 = exports.BLACK_ALPHA_28 = exports.BLACK_ALPHA_10 = exports.WHITE_ALPHA_80 = exports.WHITE_ALPHA_72 = exports.WHITE_ALPHA_70 = exports.WHITE_ALPHA_60 = exports.WHITE_ALPHA_50 = exports.WHITE_ALPHA_45 = exports.WHITE_ALPHA_40 = exports.WHITE_ALPHA_35 = exports.WHITE_ALPHA_30 = exports.WHITE_ALPHA_25 = exports.WHITE_ALPHA_20 = exports.WHITE_ALPHA_15 = exports.WHITE_ALPHA_12 = exports.WHITE_ALPHA_10 = exports.WHITE_ALPHA_08 = exports.WHITE_ALPHA_06 = exports.WHITE_ALPHA_05 = exports.RULER_COLOR = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND__TRANSPARENT = exports.BACKGROUND_HEX = exports.BACKGROUND = exports.BLACK_FULL_HEX = exports.BLACK_HEX = exports.WHITE_FULL_HEX = exports.WHITE_HEX = exports.CURRENT_COLOR_LOWERCASE = exports.CURRENT_COLOR = exports.TRANSPARENT = exports.RED = exports.WHITE = exports.BLACK = void 0;
-exports.FOCUS_BOX_SHADOW = exports.HOT_MIDDLEWARE_WARNING_STYLE = exports.HOT_MIDDLEWARE_ERROR_STYLE = exports.NOTIFICATION_BORDER = exports.COLOR_PICKER_HANDLE_SHADOW = exports.COLOR_PICKER_POPUP_SHADOW = exports.SERVER_DISCONNECTED_SHADOW = exports.NOTIFICATION_SHADOW = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = exports.SHADOW_BLACK = exports.BORDER_TIMELINE_MARQUEE_BLUE = exports.BORDER_TIMELINE_DROP_BLUE = exports.BORDER_INFO_BLUE = exports.BORDER_WHITE_ALPHA_20 = exports.BORDER_WHITE_ALPHA_12 = exports.BORDER_BLACK_ALPHA_60 = exports.BORDER_BLACK_ALPHA_50 = exports.BORDER_TRANSPARENT_2PX = exports.BORDER_CURRENT_COLOR = exports.BORDER_WHITE_2PX = exports.BORDER_WHITE = exports.BORDER_BLACK = exports.INFO_BLUE_BACKGROUND = exports.EASING_SELECTED_BACKGROUND = exports.TIMELINE_MARQUEE_BLUE_ALPHA_75 = exports.TIMELINE_MARQUEE_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_75 = exports.TIMELINE_DROP_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_12 = exports.TIMELINE_PLAYHEAD_COLOR = exports.TIMELINE_BLUE = exports.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = exports.TIMELINE_SELECTED_BACKGROUND_COLOR = exports.TIMELINE_NEGATIVE_START_BORDER_COLOR = exports.TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = exports.TIMELINE_BACKGROUND_COLOR = exports.SERVER_DISCONNECTED_BACKGROUND = exports.INFO_BLUE = exports.ERROR_LINK_COLOR = exports.ERROR_CODE_FRAME_LINE_BACKGROUND = exports.ERROR_CODE_FRAME_BACKGROUND = exports.RENDER_STATUS_BACKGROUND = exports.NOTIFICATION_BACKGROUND = exports.KEYBOARD_SHORTCUT_KEY_COLOR = exports.LIGHT_GRAY = exports.TIMELINE_TRACK_SEPARATOR = exports.LINE_COLOR = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = void 0;
-exports.getBackgroundFromHoverState = exports.TIMELINE_VIDEO_GRADIENT = exports.TIMELINE_AUDIO_GRADIENT = exports.LOOPED_INDICATOR_DROP_SHADOW = exports.SELECTED_OUTLINE_UV_DROP_SHADOW = exports.SELECTED_OUTLINE_DROP_SHADOW = exports.ERROR_MESSAGE_MASK_IMAGE = exports.COLOR_PICKER_HUE_GRADIENT = exports.COLOR_PICKER_ALPHA_TRANSPARENT = exports.COLOR_PICKER_SATURATION_BLACK_GRADIENT = exports.COLOR_PICKER_SATURATION_VALUE_GRADIENT = exports.COLOR_PICKER_CHECKER_BACKGROUND_COLOR = exports.COLOR_PICKER_CHECKER_BACKGROUND_IMAGE = exports.CHECKERBOARD_BACKGROUND_IMAGE = void 0;
+exports.BLUE_HOVERED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.BLACK_OPAQUE = exports.BLACK_ALPHA_90 = exports.BLACK_ALPHA_85 = exports.BLACK_ALPHA_80 = exports.BLACK_ALPHA_60 = exports.BLACK_ALPHA_50 = exports.BLACK_ALPHA_40 = exports.BLACK_ALPHA_30 = exports.BLACK_ALPHA_28 = exports.BLACK_ALPHA_10 = exports.WHITE_ALPHA_90 = exports.WHITE_ALPHA_80 = exports.WHITE_ALPHA_72 = exports.WHITE_ALPHA_70 = exports.WHITE_ALPHA_60 = exports.WHITE_ALPHA_50 = exports.WHITE_ALPHA_45 = exports.WHITE_ALPHA_40 = exports.WHITE_ALPHA_35 = exports.WHITE_ALPHA_30 = exports.WHITE_ALPHA_25 = exports.WHITE_ALPHA_20 = exports.WHITE_ALPHA_15 = exports.WHITE_ALPHA_12 = exports.WHITE_ALPHA_10 = exports.WHITE_ALPHA_08 = exports.WHITE_ALPHA_06 = exports.WHITE_ALPHA_05 = exports.RULER_COLOR = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND__TRANSPARENT = exports.BACKGROUND_HEX = exports.BACKGROUND = exports.BLACK_FULL_HEX = exports.BLACK_HEX = exports.WHITE_FULL_HEX = exports.WHITE_HEX = exports.CURRENT_COLOR_LOWERCASE = exports.CURRENT_COLOR = exports.TRANSPARENT = exports.RED = exports.WHITE = exports.BLACK = void 0;
+exports.HOT_MIDDLEWARE_WARNING_STYLE = exports.HOT_MIDDLEWARE_ERROR_STYLE = exports.NOTIFICATION_BORDER = exports.COLOR_PICKER_HANDLE_SHADOW = exports.COLOR_PICKER_POPUP_SHADOW = exports.SERVER_DISCONNECTED_SHADOW = exports.NOTIFICATION_SHADOW = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = exports.SHADOW_BLACK = exports.BORDER_TIMELINE_MARQUEE_BLUE = exports.BORDER_TIMELINE_DROP_BLUE = exports.BORDER_INFO_BLUE = exports.BORDER_WHITE_ALPHA_20 = exports.BORDER_WHITE_ALPHA_12 = exports.BORDER_BLACK_ALPHA_60 = exports.BORDER_BLACK_ALPHA_50 = exports.BORDER_TRANSPARENT_2PX = exports.BORDER_CURRENT_COLOR = exports.BORDER_WHITE_2PX = exports.BORDER_WHITE = exports.BORDER_BLACK = exports.INFO_BLUE_BACKGROUND = exports.EASING_SELECTED_BACKGROUND = exports.TIMELINE_MARQUEE_BLUE_ALPHA_75 = exports.TIMELINE_MARQUEE_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_75 = exports.TIMELINE_DROP_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_12 = exports.TIMELINE_PLAYHEAD_COLOR = exports.TIMELINE_BLUE = exports.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = exports.TIMELINE_SELECTED_BACKGROUND_COLOR = exports.TIMELINE_NEGATIVE_START_BORDER_COLOR = exports.TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = exports.TIMELINE_BACKGROUND_COLOR = exports.SERVER_DISCONNECTED_BACKGROUND = exports.INFO_BLUE = exports.ERROR_LINK_COLOR = exports.ERROR_CODE_FRAME_LINE_BACKGROUND = exports.ERROR_CODE_FRAME_BACKGROUND = exports.RENDER_STATUS_BACKGROUND = exports.NOTIFICATION_BACKGROUND = exports.KEYBOARD_SHORTCUT_KEY_COLOR = exports.LIGHT_GRAY = exports.TIMELINE_TRACK_SEPARATOR = exports.LINE_COLOR = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = exports.BLUE_DISABLED = void 0;
+exports.getBackgroundFromHoverState = exports.TIMELINE_VIDEO_GRADIENT = exports.TIMELINE_AUDIO_GRADIENT = exports.LOOPED_INDICATOR_DROP_SHADOW = exports.SELECTED_OUTLINE_UV_DROP_SHADOW = exports.SELECTED_OUTLINE_DROP_SHADOW = exports.ERROR_MESSAGE_MASK_IMAGE = exports.COLOR_PICKER_HUE_GRADIENT = exports.COLOR_PICKER_ALPHA_TRANSPARENT = exports.COLOR_PICKER_SATURATION_BLACK_GRADIENT = exports.COLOR_PICKER_SATURATION_VALUE_GRADIENT = exports.COLOR_PICKER_CHECKER_BACKGROUND_COLOR = exports.COLOR_PICKER_CHECKER_BACKGROUND_IMAGE = exports.CHECKERBOARD_BACKGROUND_IMAGE = exports.FOCUS_BOX_SHADOW = void 0;
 exports.BLACK = 'black';
 exports.WHITE = 'white';
 exports.RED = 'red';
@@ -38,6 +38,7 @@ exports.WHITE_ALPHA_60 = 'rgba(255, 255, 255, 0.6)';
 exports.WHITE_ALPHA_70 = 'rgba(255, 255, 255, 0.7)';
 exports.WHITE_ALPHA_72 = 'rgba(255, 255, 255, 0.72)';
 exports.WHITE_ALPHA_80 = 'rgba(255, 255, 255, 0.8)';
+exports.WHITE_ALPHA_90 = 'rgba(255, 255, 255, 0.9)';
 exports.BLACK_ALPHA_10 = 'rgba(0, 0, 0, 0.1)';
 exports.BLACK_ALPHA_28 = 'rgba(0, 0, 0, 0.28)';
 exports.BLACK_ALPHA_30 = 'rgba(0, 0, 0, 0.3)';

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_vsc_dark_plus_1 = require("./prism-vsc-dark-plus");
 const makeDefaultGlobalCSS = () => {
     const dragAreaFactor = 2;
     const fromMiddle = 50 / dragAreaFactor;
@@ -167,6 +168,7 @@ const injectCSS = () => {
     if (injected) {
         return;
     }
+    remotion_1.Internals.CSSUtils.injectCSS(prism_vsc_dark_plus_1.prismVscDarkPlus);
     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-vsc-dark-plus.d.ts

@@ -0,0 +1 @@
+export declare const prismVscDarkPlus = "pre[class*=\"language-\"],\ncode[class*=\"language-\"] {\n\tcolor: #d4d4d4;\n\tfont-size: 13px;\n\ttext-shadow: none;\n\tfont-family: Menlo, Monaco, Consolas, \"Andale Mono\", \"Ubuntu Mono\", \"Courier New\", monospace;\n\tdirection: ltr;\n\ttext-align: left;\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\tline-height: 1.5;\n\t-moz-tab-size: 4;\n\t-o-tab-size: 4;\n\ttab-size: 4;\n\t-webkit-hyphens: none;\n\t-moz-hyphens: none;\n\t-ms-hyphens: none;\n\thyphens: none;\n}\n\npre[class*=\"language-\"]::selection,\ncode[class*=\"language-\"]::selection,\npre[class*=\"language-\"] *::selection,\ncode[class*=\"language-\"] *::selection {\n\ttext-shadow: none;\n\tbackground: #264F78;\n}\n\n@media print {\n\tpre[class*=\"language-\"],\n\tcode[class*=\"language-\"] {\n\t\ttext-shadow: none;\n\t}\n}\n\npre[class*=\"language-\"] {\n\tpadding: 1em;\n\tmargin: .5em 0;\n\toverflow: auto;\n\tbackground: #1e1e1e;\n}\n\n:not(pre) > code[class*=\"language-\"] {\n\tpadding: .1em .3em;\n\tborder-radius: .3em;\n\tcolor: #db4c69;\n\tbackground: #1e1e1e;\n}\n/*********************************************************\n* Tokens\n*/\n.namespace {\n\topacity: .7;\n}\n\n.token.doctype .token.doctype-tag {\n\tcolor: #569CD6;\n}\n\n.token.doctype .token.name {\n\tcolor: #9cdcfe;\n}\n\n.token.comment,\n.token.prolog {\n\tcolor: #6a9955;\n}\n\n.token.punctuation,\n.language-html .language-css .token.punctuation,\n.language-html .language-javascript .token.punctuation {\n\tcolor: #d4d4d4;\n}\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.constant,\n.token.symbol,\n.token.inserted,\n.token.unit {\n\tcolor: #b5cea8;\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.deleted {\n\tcolor: #ce9178;\n}\n\n.language-css .token.string.url {\n\ttext-decoration: underline;\n}\n\n.token.operator,\n.token.entity {\n\tcolor: #d4d4d4;\n}\n\n.token.operator.arrow {\n\tcolor: #569CD6;\n}\n\n.token.atrule {\n\tcolor: #ce9178;\n}\n\n.token.atrule .token.rule {\n\tcolor: #c586c0;\n}\n\n.token.atrule .token.url {\n\tcolor: #9cdcfe;\n}\n\n.token.atrule .token.url .token.function {\n\tcolor: #dcdcaa;\n}\n\n.token.atrule .token.url .token.punctuation {\n\tcolor: #d4d4d4;\n}\n\n.token.keyword {\n\tcolor: #569CD6;\n}\n\n.token.keyword.module,\n.token.keyword.control-flow {\n\tcolor: #c586c0;\n}\n\n.token.function,\n.token.function .token.maybe-class-name {\n\tcolor: #dcdcaa;\n}\n\n.token.regex {\n\tcolor: #d16969;\n}\n\n.token.important {\n\tcolor: #569cd6;\n}\n\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.constant {\n\tcolor: #9cdcfe;\n}\n\n.token.class-name,\n.token.maybe-class-name {\n\tcolor: #4ec9b0;\n}\n\n.token.console {\n\tcolor: #9cdcfe;\n}\n\n.token.parameter {\n\tcolor: #9cdcfe;\n}\n\n.token.interpolation {\n\tcolor: #9cdcfe;\n}\n\n.token.punctuation.interpolation-punctuation {\n\tcolor: #569cd6;\n}\n\n.token.boolean {\n\tcolor: #569cd6;\n}\n\n.token.property,\n.token.variable,\n.token.imports .token.maybe-class-name,\n.token.exports .token.maybe-class-name {\n\tcolor: #9cdcfe;\n}\n\n.token.selector {\n\tcolor: #d7ba7d;\n}\n\n.token.escape {\n\tcolor: #d7ba7d;\n}\n\n.token.tag {\n\tcolor: #569cd6;\n}\n\n.token.tag .token.punctuation {\n\tcolor: #808080;\n}\n\n.token.cdata {\n\tcolor: #808080;\n}\n\n.token.attr-name {\n\tcolor: #9cdcfe;\n}\n\n.token.attr-value,\n.token.attr-value .token.punctuation {\n\tcolor: #ce9178;\n}\n\n.token.attr-value .token.punctuation.attr-equals {\n\tcolor: #d4d4d4;\n}\n\n.token.entity {\n\tcolor: #569cd6;\n}\n\n.token.namespace {\n\tcolor: #4ec9b0;\n}\n/*********************************************************\n* Language Specific\n*/\n\npre[class*=\"language-javascript\"],\ncode[class*=\"language-javascript\"],\npre[class*=\"language-jsx\"],\ncode[class*=\"language-jsx\"],\npre[class*=\"language-typescript\"],\ncode[class*=\"language-typescript\"],\npre[class*=\"language-tsx\"],\ncode[class*=\"language-tsx\"] {\n\tcolor: #9cdcfe;\n}\n\npre[class*=\"language-css\"],\ncode[class*=\"language-css\"] {\n\tcolor: #ce9178;\n}\n\npre[class*=\"language-html\"],\ncode[class*=\"language-html\"] {\n\tcolor: #d4d4d4;\n}\n\n.language-regex .token.anchor {\n\tcolor: #dcdcaa;\n}\n\n.language-html .token.punctuation {\n\tcolor: #808080;\n}\n/*********************************************************\n* Line highlighting\n*/\npre[class*=\"language-\"] > code[class*=\"language-\"] {\n\tposition: relative;\n\tz-index: 1;\n}\n\n.line-highlight.line-highlight {\n\tbackground: #f7ebc6;\n\tbox-shadow: inset 5px 0 0 #f7d87c;\n\tz-index: 0;\n}\n";

package/dist/helpers/prism-vsc-dark-plus.js

@@ -0,0 +1,305 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prismVscDarkPlus = void 0;
+// Unmodified prism-themes@1.9.0/themes/prism-vsc-dark-plus.css, stored as a
+// string for Studio’s CSS injection (including Browser Studio, which has no
+// CSS loader).
+/*
+The MIT License (MIT)
+
+Copyright (c) 2015 PrismJS
+
+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.prismVscDarkPlus = `pre[class*="language-"],
+code[class*="language-"] {
+	color: #d4d4d4;
+	font-size: 13px;
+	text-shadow: none;
+	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: 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;
+}
+
+pre[class*="language-"]::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"] *::selection,
+code[class*="language-"] *::selection {
+	text-shadow: none;
+	background: #264F78;
+}
+
+@media print {
+	pre[class*="language-"],
+	code[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	background: #1e1e1e;
+}
+
+:not(pre) > code[class*="language-"] {
+	padding: .1em .3em;
+	border-radius: .3em;
+	color: #db4c69;
+	background: #1e1e1e;
+}
+/*********************************************************
+* Tokens
+*/
+.namespace {
+	opacity: .7;
+}
+
+.token.doctype .token.doctype-tag {
+	color: #569CD6;
+}
+
+.token.doctype .token.name {
+	color: #9cdcfe;
+}
+
+.token.comment,
+.token.prolog {
+	color: #6a9955;
+}
+
+.token.punctuation,
+.language-html .language-css .token.punctuation,
+.language-html .language-javascript .token.punctuation {
+	color: #d4d4d4;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.inserted,
+.token.unit {
+	color: #b5cea8;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.deleted {
+	color: #ce9178;
+}
+
+.language-css .token.string.url {
+	text-decoration: underline;
+}
+
+.token.operator,
+.token.entity {
+	color: #d4d4d4;
+}
+
+.token.operator.arrow {
+	color: #569CD6;
+}
+
+.token.atrule {
+	color: #ce9178;
+}
+
+.token.atrule .token.rule {
+	color: #c586c0;
+}
+
+.token.atrule .token.url {
+	color: #9cdcfe;
+}
+
+.token.atrule .token.url .token.function {
+	color: #dcdcaa;
+}
+
+.token.atrule .token.url .token.punctuation {
+	color: #d4d4d4;
+}
+
+.token.keyword {
+	color: #569CD6;
+}
+
+.token.keyword.module,
+.token.keyword.control-flow {
+	color: #c586c0;
+}
+
+.token.function,
+.token.function .token.maybe-class-name {
+	color: #dcdcaa;
+}
+
+.token.regex {
+	color: #d16969;
+}
+
+.token.important {
+	color: #569cd6;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.constant {
+	color: #9cdcfe;
+}
+
+.token.class-name,
+.token.maybe-class-name {
+	color: #4ec9b0;
+}
+
+.token.console {
+	color: #9cdcfe;
+}
+
+.token.parameter {
+	color: #9cdcfe;
+}
+
+.token.interpolation {
+	color: #9cdcfe;
+}
+
+.token.punctuation.interpolation-punctuation {
+	color: #569cd6;
+}
+
+.token.boolean {
+	color: #569cd6;
+}
+
+.token.property,
+.token.variable,
+.token.imports .token.maybe-class-name,
+.token.exports .token.maybe-class-name {
+	color: #9cdcfe;
+}
+
+.token.selector {
+	color: #d7ba7d;
+}
+
+.token.escape {
+	color: #d7ba7d;
+}
+
+.token.tag {
+	color: #569cd6;
+}
+
+.token.tag .token.punctuation {
+	color: #808080;
+}
+
+.token.cdata {
+	color: #808080;
+}
+
+.token.attr-name {
+	color: #9cdcfe;
+}
+
+.token.attr-value,
+.token.attr-value .token.punctuation {
+	color: #ce9178;
+}
+
+.token.attr-value .token.punctuation.attr-equals {
+	color: #d4d4d4;
+}
+
+.token.entity {
+	color: #569cd6;
+}
+
+.token.namespace {
+	color: #4ec9b0;
+}
+/*********************************************************
+* Language Specific
+*/
+
+pre[class*="language-javascript"],
+code[class*="language-javascript"],
+pre[class*="language-jsx"],
+code[class*="language-jsx"],
+pre[class*="language-typescript"],
+code[class*="language-typescript"],
+pre[class*="language-tsx"],
+code[class*="language-tsx"] {
+	color: #9cdcfe;
+}
+
+pre[class*="language-css"],
+code[class*="language-css"] {
+	color: #ce9178;
+}
+
+pre[class*="language-html"],
+code[class*="language-html"] {
+	color: #d4d4d4;
+}
+
+.language-regex .token.anchor {
+	color: #dcdcaa;
+}
+
+.language-html .token.punctuation {
+	color: #808080;
+}
+/*********************************************************
+* Line highlighting
+*/
+pre[class*="language-"] > code[class*="language-"] {
+	position: relative;
+	z-index: 1;
+}
+
+.line-highlight.line-highlight {
+	background: #f7ebc6;
+	box-shadow: inset 5px 0 0 #f7d87c;
+	z-index: 0;
+}
+`;

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;