@remotion/studio 4.0.524 → 4.0.526

package/dist/components/Timeline/TimelineAssetField.js

@@ -6,13 +6,18 @@ 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 asset_context_menu_1 = require("../asset-context-menu");
+const ContextMenu_1 = require("../ContextMenu");
 const import_assets_1 = require("../import-assets");
 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 +42,72 @@ const assetTypeToAccept = {
     video: 'video/*',
     image: 'image/*',
 };
+const imageAssetField = {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    gap: 4,
+    margin: '0 4px',
+    minWidth: 0,
+};
+const imageAssetPreviewContainer = {
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+};
+const imageAssetPreviewButton = {
+    alignItems: 'center',
+    appearance: 'none',
+    border: 'none',
+    borderRadius: 4,
+    cursor: 'default',
+    display: 'flex',
+    flex: 1,
+    gap: 8,
+    height: 40,
+    margin: 0,
+    minWidth: 0,
+    padding: '0 8px',
+    textAlign: 'left',
+};
+const thumbnailContainer = {
+    borderRadius: 4,
+    flexShrink: 0,
+    height: 40,
+    overflow: 'hidden',
+    width: 40,
+};
+const thumbnail = {
+    display: 'block',
+    height: '100%',
+    objectFit: 'contain',
+    width: '100%',
+};
+const imageAssetInfo = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    gap: 2,
+    minWidth: 0,
+};
+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 +120,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');
     }
@@ -57,6 +129,14 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
     const { getSourceAction, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
     const { assetType } = field.fieldSchema;
     const initialQuery = assetType ? `type:${assetType} ` : '';
+    const imageLinkInfo = assetType === 'image' && typeof effectiveValue === 'string'
+        ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(effectiveValue)
+        : null;
+    const localAssetPath = (imageLinkInfo === null || imageLinkInfo === void 0 ? void 0 : imageLinkInfo.kind) === 'local' ? imageLinkInfo.assetPath : null;
+    const { getContextMenuItems: getLocalAssetContextMenuItems } = (0, asset_context_menu_1.useAssetContextMenuItems)({
+        relativePath: localAssetPath,
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
     const inlineSourceAction = (0, react_1.useMemo)(() => {
         if (typeof effectiveValue === 'string') {
             return getSourceAction(effectiveValue);
@@ -73,6 +153,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 +192,105 @@ 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 (imageLinkInfo !== null) {
+        const linkInfo = imageLinkInfo;
+        let name;
+        let source;
+        let previewSrc;
+        if (linkInfo.kind === 'local') {
+            name = (_a = linkInfo.assetPath.split('/').pop()) !== null && _a !== void 0 ? _a : linkInfo.assetPath;
+            source = null;
+            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 opensSource = linkInfo.kind === 'local' &&
+            inlineSourceAction !== null &&
+            inlineSourceAction.onClick !== null;
+        const title = (_b = inlineSourceAction === null || inlineSourceAction === void 0 ? void 0 : inlineSourceAction.title) !== null && _b !== void 0 ? _b : linkInfo.title;
+        const onPreviewClick = opensSource
+            ? inlineSourceAction.onClick
+            : openAssetSelection;
+        const previewLabel = `${opensSource ? 'Open' : 'Replace'} ${name}`;
+        const previewDisabled = opensSource
+            ? inlineSourceAction.disabled
+            : window.remotion_isReadOnlyStudio;
+        const previewButtonStyle = {
+            ...imageAssetPreviewButton,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: colors_1.TRANSPARENT,
+                hoverBackground: previewDisabled
+                    ? colors_1.TRANSPARENT
+                    : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false }),
+                idleColor: colors_1.LIGHT_TEXT,
+                hoverColor: previewDisabled ? colors_1.LIGHT_TEXT : colors_1.WHITE,
+            }),
+        };
+        const previewAction = (jsx_runtime_1.jsxs("button", { "aria-label": previewLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: previewDisabled, onClick: onPreviewClick, style: previewButtonStyle, title: title, type: "button", children: [
+                jsx_runtime_1.jsx("span", { style: thumbnailContainer, children: jsx_runtime_1.jsx("img", { alt: "", draggable: false, src: previewSrc, style: thumbnail }) }), jsx_runtime_1.jsxs("span", { style: imageAssetInfo, children: [
+                        jsx_runtime_1.jsx("span", { style: imageAssetName, children: name }), source === null ? null : (jsx_runtime_1.jsx("span", { style: imageAssetSource, children: source }))] })
+            ] }));
+        return (jsx_runtime_1.jsxs("div", { style: imageAssetField, children: [localAssetPath === null ? (jsx_runtime_1.jsx("div", { style: imageAssetPreviewContainer, children: previewAction })) : (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getLocalAssetContextMenuItems, style: imageAssetPreviewContainer, children: previewAction })), 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/TimelineHeightContainer.js

@@ -47,7 +47,17 @@ const baseStyle = {
 };
 const TimelineHeightContainerInner = ({ children }) => {
     const { totalSize } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
+    const onPointerDownCapture = (0, react_1.useCallback)((event) => {
+        const { activeElement } = document;
+        if (event.button === 0 &&
+            activeElement instanceof HTMLButtonElement &&
+            event.target instanceof Node &&
+            !activeElement.contains(event.target)) {
+            // Timeline drags can prevent the browser's default focus change.
+            activeElement.blur();
+        }
+    }, []);
     const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height: totalSize }), [totalSize]);
-    return jsx_runtime_1.jsx("div", { style: style, children: children });
+    return (jsx_runtime_1.jsx("div", { style: style, onPointerDownCapture: onPointerDownCapture, children: children }));
 };
 exports.TimelineHeightContainer = react_1.default.memo(TimelineHeightContainerInner);

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/TimelineKeyframeControls.js

@@ -10,11 +10,13 @@ const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
 const get_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
 const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const normalize_font_weight_for_keyframe_1 = require("./normalize-font-weight-for-keyframe");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
@@ -222,12 +224,19 @@ const getAddChange = (target) => {
     if (value === null) {
         return null;
     }
+    const fieldSchema = target.schema[target.fieldKey];
+    const normalizedValue = (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'font-weight'
+        ? (0, normalize_font_weight_for_keyframe_1.normalizeFontWeightForKeyframe)(value)
+        : value;
+    if (normalizedValue === null) {
+        return null;
+    }
     const change = {
         fileName: target.fileName,
         nodePath: target.nodePath,
         fieldKey: target.fieldKey,
         sourceFrame: target.sourceFrame,
-        value,
+        value: normalizedValue,
         schema: target.schema,
     };
     if (target.effectIndex === null) {
@@ -313,6 +322,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { expandParentTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const tracks = (0, TimelineKeyframeTracksContext_1.useTimelineKeyframeTracks)();
     const clientId = previewServerState.type === 'connected'
@@ -481,6 +491,9 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             setPropStatuses,
             clientId,
         });
+        for (const { target } of addChanges) {
+            expandParentTracks(target.nodePathInfo);
+        }
         if (mode === 'timeline') {
             selectItems(addChanges.map(({ target }) => ({
                 type: 'keyframe',
@@ -491,6 +504,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     }, [
         canToggleKeyframe,
         clientId,
+        expandParentTracks,
         hasKeyframeAtCurrentFrame,
         keyframeToggleTargets,
         mode,

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackWithDisplayGroup } from './timeline-display-groups';
 export declare const TimelineLayerChildrenProvider: React.Provider<{
     readonly collapsed: Record<string, boolean>;
     readonly keys: Map<string, string>;
     readonly parents: Set<string>;
     readonly toggle: (key: string) => void;
 } | null>;
-export declare const useTimelineLayerChildren: (tracks: TimelineTrackData[], sequences: TSequence[], compositionId: string | null) => {
-    visibleTracks: TimelineTrackData[];
+export declare const useTimelineLayerChildren: (tracks: TimelineTrackWithDisplayGroup[], sequences: TSequence[], compositionId: string | null) => {
+    visibleTracks: TimelineTrackWithDisplayGroup[];
     value: {
         collapsed: Record<string, boolean>;
         keys: Map<string, string>;

package/dist/components/Timeline/TimelineLayerChildren.js

@@ -70,17 +70,19 @@ const useTimelineLayerChildren = (tracks, sequences, compositionId) => {
                 parent = (_c = (_a = byId.get(parent)) === null || _a === void 0 ? void 0 : _a.parent) !== null && _c !== void 0 ? _c : null;
             }
             ancestors.set(track.sequence.id, parentIds);
-            // Source identity survives remounts. For layers without source metadata,
-            // use the structural position instead of the ephemeral sequence ID.
+            // Source identity survives remounts. While it is resolving, the stack
+            // gives interactive layers a stable display identity.
             const identity = track.nodePathInfo
                 ? ['source', (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(track.nodePathInfo)]
-                : [
-                    'position',
-                    ...[...parentIds]
-                        .reverse()
-                        .concat(track.sequence.id)
-                        .map((id) => siblingIndices.get(id)),
-                ];
+                : track.displayGroup
+                    ? ['stack', track.displayGroup.key]
+                    : [
+                        'position',
+                        ...[...parentIds]
+                            .reverse()
+                            .concat(track.sequence.id)
+                            .map((id) => siblingIndices.get(id)),
+                    ];
             keys.set(track.sequence.id, JSON.stringify([compositionId, identity]));
         }
         return { keys, parents, ancestors };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const timelineLayerIconContainer: React.CSSProperties;
 export declare const TimelineLayerEye: React.FC<{
-    readonly onInvoked: (type: 'enable' | 'disable') => void;
+    readonly onInvoked: ((type: 'enable' | 'disable') => void) | null;
     readonly hidden: boolean;
     readonly type: 'eye' | 'speaker' | 'effect';
 }>;

package/dist/components/Timeline/TimelineLayerEye.js

@@ -54,6 +54,9 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         }
         e.preventDefault();
         e.stopPropagation();
+        if (onInvoked === null) {
+            return;
+        }
         stopLayerPointerSession === null || stopLayerPointerSession === void 0 ? void 0 : stopLayerPointerSession();
         layerPointedDown = hidden ? 'enable' : 'disable';
         onInvoked(layerPointedDown);
@@ -83,14 +86,14 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         e.stopPropagation();
     }, []);
     const onPointerEnter = (0, react_1.useCallback)(() => {
-        if (layerPointedDown) {
+        if (layerPointedDown && onInvoked !== null) {
             onInvoked(layerPointedDown);
         }
     }, [onInvoked]);
     const registerLayerEye = (0, react_1.useCallback)((element) => {
         if (element) {
             layerEyeActions.set(element, () => {
-                if (layerPointedDown) {
+                if (layerPointedDown && onInvoked !== null) {
                     onInvoked(layerPointedDown);
                 }
             });
@@ -99,7 +102,7 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
     const onDoubleClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx("div", { ref: registerLayerEye, [TIMELINE_LAYER_EYE_ATTR]: true, style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
+    return (jsx_runtime_1.jsx("div", { ref: registerLayerEye, [TIMELINE_LAYER_EYE_ATTR]: true, style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onDoubleClick: onDoubleClick, onPointerEnter: onInvoked === null ? undefined : onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;
 const spacerStyle = {

package/dist/components/Timeline/TimelineList.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
 const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 const TimelineVirtualization_1 = require("./TimelineVirtualization");
@@ -10,11 +14,13 @@ const container = {
     background: colors_1.BACKGROUND,
     position: 'relative',
 };
-const TimelineListTrack = ({ row }) => {
+const noConnectedCompositions = [];
+const TimelineListTrack = react_1.default.memo(({ row }) => {
     var _a;
+    var _b, _c;
     const { afterDropLineOffset, siblingIndex, track } = row;
-    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }));
-};
+    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_b = track.connectedCompositions) !== null && _b !== void 0 ? _b : noConnectedCompositions, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset, numberOfHiddenDuplicates: Math.max(0, ((_c = (_a = track.displayGroup) === null || _a === void 0 ? void 0 : _a.numberOfSequences) !== null && _c !== void 0 ? _c : 1) - 1), showProvisionalVisibilityToggle: track.nodePathInfo === null && track.displayGroup !== null }));
+});
 const TimelineList = () => {
     const { rows, tracksEnd, virtualItems } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
     return (jsx_runtime_1.jsx("div", { style: { ...container, height: tracksEnd }, children: virtualItems.map((virtualItem) => (jsx_runtime_1.jsx("div", { style: {

package/dist/components/Timeline/TimelineSchemaField.js

@@ -39,7 +39,6 @@ const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const hoverable_1 = require("../../helpers/hoverable");
 const modals_1 = require("../../state/modals");
-const SettingsContext_1 = require("../SettingsContext");
 const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const TimelineArrayField_1 = require("./TimelineArrayField");
 const TimelinePrimitiveFieldValue_1 = require("./TimelinePrimitiveFieldValue");
@@ -47,6 +46,8 @@ const unsupportedStatusWrapper = {
     alignItems: 'center',
     display: 'inline-flex',
     gap: 4,
+    maxWidth: '100%',
+    minWidth: 0,
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
@@ -62,7 +63,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 +77,7 @@ const fixLinkBase = {
         hoverColor: colors_1.WHITE,
     }),
     display: 'inline-block',
+    flexShrink: 0,
     fontSize: 10,
     fontStyle: 'normal',
     fontWeight: 600,
@@ -101,7 +107,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();
@@ -110,16 +116,13 @@ const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
 exports.UnsupportedStatus = UnsupportedStatus;
 const TimelineNonEditableStatus = ({ propStatus, field, runtimeValue, validatedLocation }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
     const onFix = (0, react_1.useCallback)(() => {
-        var _a;
         setSelectedModal({
             type: 'fix-computed-value',
             prop: field.key,
-            context: `${validatedLocation.source}:${validatedLocation.line}:${validatedLocation.column}`,
-            remotionInteractivitySkillAvailable: (_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.remotionInteractivitySkillAvailable) !== null && _a !== void 0 ? _a : false,
+            location: validatedLocation,
         });
-    }, [field.key, remotionSkillsInfo, setSelectedModal, validatedLocation]);
+    }, [field.key, setSelectedModal, validatedLocation]);
     if (propStatus.status === 'computed') {
         return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: runtimeValue === undefined
                 ? 'computed'