@remotion/studio 4.0.523 → 4.0.525

package/dist/components/Timeline/TimelineAssetField.js

@@ -6,6 +6,8 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const write_static_file_1 = require("../../api/write-static-file");
+const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
 const pen_1 = require("../../icons/pen");
 const modals_1 = require("../../state/modals");
 const import_assets_1 = require("../import-assets");
@@ -13,6 +15,7 @@ const InlineAction_1 = require("../InlineAction");
 const common_1 = require("../InspectorPanel/common");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_static_files_1 = require("../use-static-files");
+const timeline_asset_link_1 = require("./timeline-asset-link");
 const penIcon = {
     display: 'block',
     height: 14,
@@ -37,6 +40,72 @@ const assetTypeToAccept = {
     video: 'video/*',
     image: 'image/*',
 };
+const imageAssetField = {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    gap: 8,
+    minWidth: 0,
+    padding: '4px 12px',
+};
+const thumbnailButton = {
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+    appearance: 'none',
+    border: 'none',
+    cursor: 'default',
+    flexShrink: 0,
+    height: 40,
+    margin: 0,
+    padding: 0,
+    width: 40,
+};
+const thumbnail = {
+    display: 'block',
+    height: '100%',
+    objectFit: 'contain',
+    width: '100%',
+};
+const imageAssetInfo = {
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+    appearance: 'none',
+    border: 'none',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    gap: 2,
+    margin: 0,
+    minWidth: 0,
+    padding: 0,
+    textAlign: 'left',
+};
+const imageAssetName = {
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: '16px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const imageAssetSource = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 11,
+    lineHeight: '14px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
 exports.AssetSelectionContext = (0, react_1.createContext)({
     getSourceAction: () => null,
     sourceAction: null,
@@ -49,6 +118,7 @@ const toFileToken = (name) => {
 };
 exports.toFileToken = toFileToken;
 const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a, _b;
     if (field.fieldSchema.type !== 'asset') {
         throw new Error('TimelineAssetField rendered for non-asset field');
     }
@@ -73,6 +143,15 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
             onDragEnd();
         });
     }, [propStatus.codeValue, onDragValueChange, onSave, onDragEnd]);
+    const onSelectUrl = (0, react_1.useCallback)((url) => {
+        if (url === propStatus.codeValue) {
+            return;
+        }
+        onDragValueChange(url);
+        onSave(url).finally(() => {
+            onDragEnd();
+        });
+    }, [propStatus.codeValue, onDragValueChange, onDragEnd, onSave]);
     const selectFile = (0, react_1.useCallback)(async () => {
         const [file] = await (0, import_assets_1.pickFilesToImport)({
             multiple: false,
@@ -103,25 +182,85 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
         }
     }, [assetType, onSelect, staticFiles]);
     const openAssetSelection = (0, react_1.useCallback)(() => {
+        const assetSelection = {
+            initialQuery,
+            onSelectFile: () => {
+                selectFile().catch(() => undefined);
+            },
+            onSelected: (asset) => onSelect(asset.name, asset.src),
+        };
+        if (assetType !== undefined) {
+            const linkInfo = typeof effectiveValue === 'string'
+                ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(effectiveValue)
+                : null;
+            setSelectedModal({
+                type: 'asset-selection',
+                assetType,
+                initialUrl: (linkInfo === null || linkInfo === void 0 ? void 0 : linkInfo.kind) === 'remote' ? linkInfo.href : null,
+                invocationTimestamp: Date.now(),
+                assetSelection,
+                onSelectedUrl: onSelectUrl,
+            });
+            return;
+        }
         setSelectedModal({
             type: 'quick-switcher',
             mode: 'assets',
             invocationTimestamp: Date.now(),
-            assetSelection: {
-                initialQuery,
-                onSelectFile: () => {
-                    selectFile().catch(() => undefined);
-                },
-                onSelected: (asset) => onSelect(asset.name, asset.src),
-            },
+            assetSelection,
             compositionSelection: null,
         });
-    }, [initialQuery, onSelect, selectFile, setSelectedModal]);
+    }, [
+        assetType,
+        effectiveValue,
+        initialQuery,
+        onSelect,
+        onSelectUrl,
+        selectFile,
+        setSelectedModal,
+    ]);
     const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
+    if (assetType === 'image' && typeof effectiveValue === 'string') {
+        const linkInfo = (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(effectiveValue);
+        if (linkInfo !== null) {
+            let name;
+            let source;
+            let previewSrc;
+            if (linkInfo.kind === 'local') {
+                name = (_a = linkInfo.assetPath.split('/').pop()) !== null && _a !== void 0 ? _a : linkInfo.assetPath;
+                source = 'Project asset';
+                previewSrc = (0, remotion_1.staticFile)(linkInfo.assetPath);
+            }
+            else {
+                previewSrc = linkInfo.href.startsWith('//')
+                    ? `https:${linkInfo.href}`
+                    : linkInfo.href;
+                try {
+                    const url = new URL(previewSrc);
+                    const encodedName = url.pathname.split('/').filter(Boolean).pop();
+                    name = encodedName ? decodeURIComponent(encodedName) : url.hostname;
+                    source = url.hostname;
+                }
+                catch (_c) {
+                    name = 'Remote image';
+                    source = linkInfo.href;
+                }
+            }
+            const title = (_b = inlineSourceAction === null || inlineSourceAction === void 0 ? void 0 : inlineSourceAction.title) !== null && _b !== void 0 ? _b : linkInfo.title;
+            return (jsx_runtime_1.jsxs("div", { style: imageAssetField, children: [
+                    jsx_runtime_1.jsx("button", { "aria-label": `Replace ${name}`, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: window.remotion_isReadOnlyStudio, onClick: openAssetSelection, style: thumbnailButton, title: title, type: "button", children: jsx_runtime_1.jsx("img", { alt: "", src: previewSrc, style: thumbnail }) }), jsx_runtime_1.jsxs("button", { "aria-label": `Replace ${name}`, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: window.remotion_isReadOnlyStudio, onClick: openAssetSelection, style: imageAssetInfo, title: title, type: "button", children: [
+                            jsx_runtime_1.jsx("span", { style: imageAssetName, children: name }), jsx_runtime_1.jsx("span", { style: imageAssetSource, children: source })
+                        ] }), action] }));
+        }
+    }
     if (inlineSourceAction === null) {
         return action;
     }
     return (jsx_runtime_1.jsxs("div", { style: sourceActions, children: [
-            jsx_runtime_1.jsx(common_1.InspectorQuickAction, { ...inlineSourceAction, size: "compact", style: standaloneSourceActionStyle }), action] }));
+            jsx_runtime_1.jsx(common_1.InspectorQuickAction, { ...inlineSourceAction, disabled: assetType === undefined
+                    ? inlineSourceAction.disabled
+                    : window.remotion_isReadOnlyStudio, onClick: assetType === undefined
+                    ? inlineSourceAction.onClick
+                    : openAssetSelection, size: "compact", style: standaloneSourceActionStyle }), action] }));
 };
 exports.TimelineAssetField = TimelineAssetField;

package/dist/components/Timeline/TimelineDragHandler.js

@@ -279,8 +279,7 @@ const TimelineDragHandlerInner = () => {
             captureTarget: dragging.target,
             onMove: onPointerMoveScrubbing,
             onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                    endEvent) {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onPointerUpScrubbing(endEvent);
                 }
                 else {

package/dist/components/Timeline/TimelineEffectItem.d.ts

@@ -13,6 +13,7 @@ export declare const TimelineEffectItem: React.FC<{
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;
     readonly labelNextToToggle: boolean;
+    readonly revealInInspector: boolean;
     readonly getIsExpanded: GetIsExpanded;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
 }>;

package/dist/components/Timeline/TimelineEffectItem.js

@@ -75,7 +75,7 @@ const getEffectReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, labelNextToToggle, getIsExpanded, toggleTrack, }) => {
+const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, labelNextToToggle, revealInInspector, getIsExpanded, toggleTrack, }) => {
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -83,7 +83,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     const canMutateEffects = (0, browser_studio_operations_1.canUseEffectOperations)();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo, revealInInspector);
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [dropIndicator, setDropIndicator] = (0, react_1.useState)(null);
     const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectPropStatusesCtx({

package/dist/components/Timeline/TimelineEffectPropItem.d.ts

@@ -19,5 +19,6 @@ export declare const TimelineEffectPropItem: React.FC<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
     readonly keyframeControlsMode: TimelineKeyframeControlsMode;
+    readonly revealInInspector: boolean;
     readonly runtimeValueStore: RuntimeValueStore | null;
 }>;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -232,7 +232,7 @@ const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocat
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset, runtimeValueStore: runtimeValueStore }));
 };
-const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode, runtimeValueStore, }) => {
+const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode, revealInInspector, runtimeValueStore, }) => {
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -240,7 +240,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo, revealInInspector);
     const style = (0, react_1.useMemo)(() => {
         return field.typeName === 'text-content'
             ? fieldRowBase

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -40,7 +40,7 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
         if (node.effectInfo) {
             return (
             // A single effect
-            jsx_runtime_1.jsx(TimelineEffectItem_1.TimelineEffectItem, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, labelNextToToggle: isInspector, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
+            jsx_runtime_1.jsx(TimelineEffectItem_1.TimelineEffectItem, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, labelNextToToggle: isInspector, revealInInspector: !isInspector, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
         }
         // Group like "Effects"
         const isExpanded = getIsExpanded(node.nodePathInfo);
@@ -50,7 +50,7 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: isInspector ? rowDepth - 1 : rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValueStore: node.runtimeValueStore }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: isInspector ? rowDepth - 1 : rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, revealInInspector: !isInspector, runtimeValueStore: node.runtimeValueStore }));
         }
         if (node.field.kind === 'sequence-field') {
             return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -279,8 +279,7 @@ const TimelineInOutDragHandlerInner = () => {
             captureTarget: inOutDragging.target,
             onMove: onPointerMoveInOut,
             onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                    endEvent) {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onPointerUpInOut(endEvent);
                 }
                 else {

package/dist/components/Timeline/TimelineLayerChildren.js

@@ -8,7 +8,16 @@ const hoverable_1 = require("../../helpers/hoverable");
 const persist_boolean_map_1 = require("../../helpers/persist-boolean-map");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const TimelineCollapseToggle_1 = require("./TimelineCollapseToggle");
-const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+// Reserve the same space before and after children register or unregister.
+const toggleLayout = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 12,
+    height: 16,
+    marginRight: 0,
+    flexShrink: 0,
+};
 const STORAGE_KEY = 'remotion.editor.collapsedLayerChildren.v1';
 const TimelineLayerChildrenContext = (0, react_1.createContext)(null);
 exports.TimelineLayerChildrenProvider = TimelineLayerChildrenContext.Provider;
@@ -104,7 +113,7 @@ const TimelineLayerChildrenToggle = ({ sequence }) => {
     }, [context, key]);
     const stopPropagation = (0, react_1.useCallback)((event) => event.stopPropagation(), []);
     if (!(context === null || context === void 0 ? void 0 : context.parents.has(sequence.id)) || key === undefined) {
-        return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
+        return jsx_runtime_1.jsx("div", { style: toggleLayout });
     }
     const label = `${isCollapsed ? 'Expand' : 'Collapse'} children of ${sequence.displayName}`;
     return (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, "aria-label": label, "aria-expanded": !isCollapsed, title: label, onClick: onClick, onPointerDown: stopPropagation, onDoubleClick: stopPropagation, style: {
@@ -114,16 +123,10 @@ const TimelineLayerChildrenToggle = ({ sequence }) => {
                 idleColor: colors_1.LIGHT_TEXT,
                 hoverColor: colors_1.WHITE,
             }),
+            ...toggleLayout,
             border: 'none',
             padding: 0,
             cursor: 'default',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 12,
-            height: 16,
-            marginRight: 0,
-            flexShrink: 0,
         }, children: jsx_runtime_1.jsx(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: isCollapsed, color: "currentColor" }) }));
 };
 exports.TimelineLayerChildrenToggle = TimelineLayerChildrenToggle;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -47,6 +47,8 @@ const unsupportedStatusWrapper = {
     alignItems: 'center',
     display: 'inline-flex',
     gap: 4,
+    maxWidth: '100%',
+    minWidth: 0,
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
@@ -62,7 +64,11 @@ const computedValue = {
     fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
     lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
     pointerEvents: 'none',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
 };
 const fixLinkBase = {
     ...(0, hoverable_1.hoverableStyle)({
@@ -72,6 +78,7 @@ const fixLinkBase = {
         hoverColor: colors_1.WHITE,
     }),
     display: 'inline-block',
+    flexShrink: 0,
     fontSize: 10,
     fontStyle: 'normal',
     fontWeight: 600,
@@ -101,7 +108,7 @@ const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
     const stopPointerPropagation = (event) => {
         event.stopPropagation();
     };
-    return (jsx_runtime_1.jsxs("span", { style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
+    return (jsx_runtime_1.jsxs("span", { style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), title: formattedValue && typeof label === 'string' ? label : undefined, children: [
             jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${hoverable_1.HOVERABLE_CLASS_NAME}`, style: fixLink, title: "Fix computed Studio value", onClick: (event) => {
                     stopMousePropagation(event);
                     onFix();

package/dist/components/Timeline/TimelineSelection.d.ts

@@ -91,6 +91,7 @@ export declare const extendTimelineMarqueeSelection: ({ currentSelection, marque
 }) => readonly CanvasSelectionItem[];
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
+    readonly inspectorRevealRequest: TimelineSelectionRevealRequest | null;
     readonly revealRequest: TimelineSelectionRevealRequest | null;
     readonly selectedItems: readonly TimelineSelection[];
     readonly isSelected: (item: TimelineSelection) => boolean;
@@ -111,6 +112,7 @@ export declare const TimelineSelectionOrderProvider: React.FC<{
 }>;
 type TimelineSelectionOptions = {
     readonly reveal?: boolean;
+    readonly revealInInspector?: boolean;
 };
 type TimelineSelectionRevealRequest = {
     readonly item: TimelineSelection;
@@ -152,7 +154,7 @@ export declare const useTimelineMarqueeSelection: () => {
     onPointerDownCapture: (event: React.PointerEvent<HTMLDivElement>) => void;
 };
 export declare const useTimelineMarqueeSelectableItem: (item: CanvasSelectionItem | null, ref: React.RefObject<Element | null>) => void;
-export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
+export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null, revealInInspector?: boolean) => {
     onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
     selectionItem: CanvasSelectionItem | null;

package/dist/components/Timeline/TimelineSelection.js

@@ -209,6 +209,7 @@ const extendTimelineMarqueeSelection = ({ currentSelection, marqueeSelection, })
 exports.extendTimelineMarqueeSelection = extendTimelineMarqueeSelection;
 const defaultTimelineSelectionContextValue = {
     canSelect: false,
+    inspectorRevealRequest: null,
     revealRequest: null,
     selectedItems: [],
     isSelected: () => false,
@@ -542,9 +543,12 @@ const TimelineSelectionProvider = ({ children }) => {
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
     const marqueeRegistrationCounter = (0, react_1.useRef)(0);
     const [revealRequest, setRevealRequest] = (0, react_1.useState)(null);
+    const [inspectorRevealRequest, setInspectorRevealRequest] = (0, react_1.useState)(null);
+    const inspectorRevealTokenCounter = (0, react_1.useRef)(0);
     (0, react_1.useEffect)(() => {
         if (!canSelect) {
             selectionScope.current = null;
+            setInspectorRevealRequest(null);
             setRevealRequest(null);
             selectionController.clear();
         }
@@ -566,6 +570,13 @@ const TimelineSelectionProvider = ({ children }) => {
             });
         });
     }, []);
+    const requestRevealSelectionItemInInspector = (0, react_1.useCallback)((item) => {
+        inspectorRevealTokenCounter.current += 1;
+        setInspectorRevealRequest({
+            item,
+            token: inspectorRevealTokenCounter.current,
+        });
+    }, []);
     const expandParentsForSelectionItems = (0, react_1.useCallback)((items) => {
         for (const item of items) {
             if (item.type === 'guide') {
@@ -603,6 +614,12 @@ const TimelineSelectionProvider = ({ children }) => {
         if (options.reveal) {
             requestRevealSelectionItem(item);
         }
+        if (options.revealInInspector) {
+            requestRevealSelectionItemInInspector(item);
+        }
+        else {
+            setInspectorRevealRequest(null);
+        }
         if (selectionScope.current !== timelineSelectionScope) {
             selectionController.clear();
         }
@@ -611,6 +628,7 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [
         canSelectItem,
         expandParentsForSelectionItem,
+        requestRevealSelectionItemInInspector,
         requestRevealSelectionItem,
         selectionController,
         timelineSelectionScope,
@@ -627,10 +645,17 @@ const TimelineSelectionProvider = ({ children }) => {
         if (options.reveal && items.length === 1) {
             requestRevealSelectionItem(items[0]);
         }
+        if (options.revealInInspector && items.length === 1) {
+            requestRevealSelectionItemInInspector(items[0]);
+        }
+        else {
+            setInspectorRevealRequest(null);
+        }
         selectionController.setSelectedItems(items);
     }, [
         canSelectItem,
         expandParentsForSelectionItems,
+        requestRevealSelectionItemInInspector,
         requestRevealSelectionItem,
         selectionController,
         timelineSelectionScope,
@@ -679,6 +704,7 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [canSelectItem]);
     const clearSelection = (0, react_1.useCallback)(() => {
         selectionScope.current = null;
+        setInspectorRevealRequest(null);
         selectionController.clear();
     }, [selectionController]);
     const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
@@ -737,6 +763,7 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [selectionController]);
     const value = (0, react_1.useMemo)(() => ({
         canSelect,
+        inspectorRevealRequest,
         revealRequest,
         selectedItems: availableSelectedItems,
         isSelected,
@@ -749,6 +776,7 @@ const TimelineSelectionProvider = ({ children }) => {
         clearSelection,
     }), [
         canSelect,
+        inspectorRevealRequest,
         revealRequest,
         availableSelectedItems,
         isSelected,
@@ -929,8 +957,7 @@ const useTimelineMarqueeSelection = () => {
             captureTarget: target,
             onMove: onPointerMove,
             onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                    endEvent) {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     updateSelection(endEvent.clientX, endEvent.clientY);
                 }
                 cleanup();
@@ -960,7 +987,7 @@ const useTimelineMarqueeSelectableItem = (item, ref) => {
     }, [item, ref, registerMarqueeSelectableItem]);
 };
 exports.useTimelineMarqueeSelectableItem = useTimelineMarqueeSelectableItem;
-const useTimelineRowSelection = (nodePathInfo) => {
+const useTimelineRowSelection = (nodePathInfo, revealInInspector = false) => {
     const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
     const selectableTimelineItemsRef = (0, react_1.useContext)(SelectableTimelineItemsContext);
     const selectionItem = (0, react_1.useMemo)(() => (0, exports.getTimelineSelectionFromNodePathInfo)(nodePathInfo), [nodePathInfo]);
@@ -969,8 +996,8 @@ const useTimelineRowSelection = (nodePathInfo) => {
         if (selectionItem === null) {
             return;
         }
-        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current);
-    }, [selectItem, selectableTimelineItemsRef, selectionItem]);
+        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current, { revealInInspector });
+    }, [revealInInspector, selectItem, selectableTimelineItemsRef, selectionItem]);
     return {
         onSelect,
         selectable: canSelect && selectionItem !== null,

package/dist/components/Timeline/TimelineSequence.js

@@ -263,7 +263,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         ? Infinity
         : naturalMediaDuration;
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
-    const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(s);
+    const { canConfigureApps, canOpenInEditor, canOpenSource, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, openSource, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(s);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -321,7 +321,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
             button: e.button,
-            canOpenInEditor,
+            canOpenSource,
             numberOfConnectedCompositions: connectedCompositions.length,
             sequenceWasDragged: dragAwareDoubleClick.consumePointerGestureWasDragged(),
         });
@@ -338,12 +338,12 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             }));
             return;
         }
-        openInEditor(null);
+        openSource();
     }, [
-        canOpenInEditor,
+        canOpenSource,
         connectedCompositions,
         dragAwareDoubleClick,
-        openInEditor,
+        openSource,
         s,
         selectComposition,
         sequenceFrameOffset,
@@ -354,7 +354,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         performSequenceDoubleClick(e);
     }, [dragAwareDoubleClick, performSequenceDoubleClick]);
-    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
+    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenSource;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = !previewInteractive || !s.controls || !canDeleteFromSource;
     const isProgrammaticallyDuplicated = ((_h = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _h !== void 0 ? _h : 1) > 1;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -204,7 +204,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const sequenceReorderWrapperRef = (0, react_1.useRef)(null);
     const stopSequencePointerSession = (0, react_1.useRef)(null);
     const suppressNextClick = (0, react_1.useRef)(false);
-    const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
+    const { canConfigureApps, canOpenInEditor, canOpenSource, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, openSource, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -477,10 +477,10 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 updateDropTarget(currentClientY);
             },
         });
-        stopSequencePointerSession.current = (0, pointer_session_1.startCapturedPointerSession)({
+        stopSequencePointerSession.current = (0, pointer_session_1.startDeferredCapturedPointerSession)({
             captureTarget: sourceElement,
             event: e.nativeEvent,
-            onMove: (pointerEvent) => {
+            onMove: (pointerEvent, capturePointer) => {
                 currentClientY = pointerEvent.clientY;
                 if (!didDrag &&
                     Math.hypot(pointerEvent.clientX - startX, pointerEvent.clientY - startY) < SEQUENCE_REORDER_POINTER_THRESHOLD) {
@@ -488,6 +488,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 }
                 if (!didDrag) {
                     didDrag = true;
+                    capturePointer();
                     previousUserSelect = document.body.style.userSelect;
                     previousWebkitUserSelect = document.body.style.webkitUserSelect;
                     document.body.style.userSelect = 'none';
@@ -515,7 +516,8 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 autoScroll.update({ clientX: startX, clientY: pointerEvent.clientY });
             },
             onEnd: (reason, pointerEvent) => {
-                if (reason === 'pointerup' && pointerEvent && didDrag) {
+                const released = (0, pointer_session_1.isPointerSessionRelease)(reason, pointerEvent);
+                if (released && didDrag) {
                     updateDropTarget(pointerEvent.clientY);
                 }
                 autoScroll.stop();
@@ -531,7 +533,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 setTimeout(() => {
                     suppressNextClick.current = false;
                 }, 0);
-                if (reason === 'pointerup' && pointerEvent && activeDrop) {
+                if (released && activeDrop) {
                     activeDropTarget === null || activeDropTarget === void 0 ? void 0 : activeDropTarget.reorder(activeDrop);
                 }
             },
@@ -646,7 +648,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         }
         const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
             button: e.button,
-            canOpenInEditor,
+            canOpenSource,
             numberOfConnectedCompositions: connectedCompositions.length,
             // The track list row reorders via native drag-and-drop, which
             // already suppresses `dblclick` after a drag.
@@ -665,16 +667,16 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             }));
             return;
         }
-        openInEditor(null);
+        openSource();
     }, [
-        canOpenInEditor,
+        canOpenSource,
         connectedCompositions,
-        openInEditor,
+        openSource,
         selectComposition,
         sequence,
         sequenceFrameOffset,
     ]);
-    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
+    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenSource;
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&