@remotion/studio 4.0.525 → 4.0.527

package/dist/components/CurrentAsset.js

@@ -25,6 +25,7 @@ const modals_1 = require("../state/modals");
 const AssetAudioVolume_1 = require("./AssetAudioVolume");
 const InlineEditableTitle_1 = require("./InlineEditableTitle");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
+const CollapsibleInspectorSection_1 = require("./InspectorPanel/CollapsibleInspectorSection");
 const common_1 = require("./InspectorPanel/common");
 const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
 const layout_1 = require("./layout");
@@ -182,6 +183,7 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
             displayName: fileName,
             audioStreamIndex: null,
             requestInit: null,
+            target: null,
         });
     }, [fileName, mutationsDisabled, setSelectedModal, src]);
     const onTrackMatting = (0, react_1.useCallback)(() => {
@@ -246,12 +248,12 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT, padding: contentSized
                     ? `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px`
-                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsxs("div", { style: assetMetadataStyle, children: [mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))), src ? (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Average volume", children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: jsx_runtime_1.jsx(AssetAudioVolume_1.AssetAudioVolume, { src: (_d = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _d !== void 0 ? _d : null, waveformSampleRate: volumeMetadata
+                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "File", sectionId: "asset-file", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Video", sectionId: "asset-video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: mediaSections.audio.length > 0, label: "Audio", sectionId: "asset-audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsxs("div", { style: assetMetadataStyle, children: [mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))), src ? (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Average volume", children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: jsx_runtime_1.jsx(AssetAudioVolume_1.AssetAudioVolume, { src: (_d = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _d !== void 0 ? _d : null, waveformSampleRate: volumeMetadata
                                         ? Math.ceil(volumeMetadata.fps *
                                             get_timeline_max_zoom_1.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM)
-                                        : null }, (_e = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _e !== void 0 ? _e : src) }) })) : null] })) })) : null, jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Actions" }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, src ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTranscribe, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: quickActionIconStyle })), children: "Transcribe" })) : null, fileType === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTrackMatting, renderIcon: (color) => (jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: quickActionIconStyle })), children: "Separate foreground" })) : null, src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
-                            jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
-                        ] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] })
+                                        : null }, (_e = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _e !== void 0 ? _e : src) }) })) : null] })) })) : null, jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "asset-actions", children: jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, src && (mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.hasAudioTrack) !== false ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTranscribe, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: quickActionIconStyle })), children: "Transcribe" })) : null, fileType === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTrackMatting, renderIcon: (color) => (jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: quickActionIconStyle })), children: "Separate foreground" })) : null, src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
+                                jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
+                            ] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] }) })
         ] }));
 };
 exports.AssetInfo = AssetInfo;

package/dist/components/ElementInstallConfirmation.js

@@ -250,7 +250,8 @@ const ElementLibraryAddConfirmation = ({ displayName, origin, url }) => {
 };
 exports.ElementLibraryAddConfirmation = ElementLibraryAddConfirmation;
 const ElementInstallConfirmation = ({ state }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const { currentPlan, missingPackages, newPlan, onClose, request, sourceIsUnverified, sourceLabel, } = state;
     const sourcePreview = (0, react_1.useMemo)(() => makeSourceControlsVisible(request.element.sourceCode), [request.element.sourceCode]);
     const config = remotion_1.Internals.useUnsafeVideoConfig();
@@ -299,7 +300,7 @@ const ElementInstallConfirmation = ({ state }) => {
     const selectedFolderStack = newCompositionValues.folder.stack;
     const resolvedFolderLocation = (0, use_resolved_stack_1.useResolvedStack)(selectedFolderStack);
     const folderSymbolicatedStack = (0, react_1.useMemo)(() => (0, resolved_stack_to_symbolicated_1.resolvedStackToSymbolicated)(resolvedFolderLocation), [resolvedFolderLocation]);
-    const folderCompositionFile = (_a = folderSymbolicatedStack === null || folderSymbolicatedStack === void 0 ? void 0 : folderSymbolicatedStack.originalFileName) !== null && _a !== void 0 ? _a : null;
+    const folderCompositionFile = (_b = folderSymbolicatedStack === null || folderSymbolicatedStack === void 0 ? void 0 : folderSymbolicatedStack.originalFileName) !== null && _b !== void 0 ? _b : null;
     const [newCompositionPlanState, setNewCompositionPlanState] = (0, react_1.useState)({
         folderStack: null,
         type: 'ready',
@@ -388,7 +389,7 @@ const ElementInstallConfirmation = ({ state }) => {
         ? activeNewCompositionPlanState.plan
         : null;
     const selectedPlan = mode === 'current-composition' ? currentPlan : selectedNewCompositionPlan;
-    const elementBaseName = (_b = request.element.slug.split('/').at(-1)) !== null && _b !== void 0 ? _b : '';
+    const elementBaseName = (_c = request.element.slug.split('/').at(-1)) !== null && _c !== void 0 ? _c : '';
     const [refreshPlan, setRefreshPlan] = (0, react_1.useState)(0);
     const [input, setInput] = (0, react_1.useState)({
         basePlan: selectedPlan,
@@ -409,25 +410,42 @@ const ElementInstallConfirmation = ({ state }) => {
         });
     }
     const requestedName = input.name;
-    const [preparation, setPreparation] = (0, react_1.useState)(null);
-    const currentPreparation = (preparation === null || preparation === void 0 ? void 0 : preparation.basePlan) === selectedPlan &&
-        (preparation === null || preparation === void 0 ? void 0 : preparation.refresh) === refreshPlan &&
-        (preparation === null || preparation === void 0 ? void 0 : preparation.requestedName) === requestedName
-        ? preparation
-        : null;
-    const preparedInstallation = (_c = currentPreparation === null || currentPreparation === void 0 ? void 0 : currentPreparation.installation) !== null && _c !== void 0 ? _c : null;
-    const planError = (_d = currentPreparation === null || currentPreparation === void 0 ? void 0 : currentPreparation.error) !== null && _d !== void 0 ? _d : null;
-    const installationName = (_e = requestedName !== null && requestedName !== void 0 ? requestedName : preparedInstallation === null || preparedInstallation === void 0 ? void 0 : preparedInstallation.name) !== null && _e !== void 0 ? _e : elementBaseName;
-    const [existingInstallation, setExistingInstallation] = (0, react_1.useState)(null);
-    const existingDestination = (existingInstallation === null || existingInstallation === void 0 ? void 0 : existingInstallation.basePlan) === selectedPlan &&
-        (existingInstallation === null || existingInstallation === void 0 ? void 0 : existingInstallation.refresh) === refreshPlan
-        ? existingInstallation
-        : null;
+    const [preparations, setPreparations] = (0, react_1.useState)([]);
+    const currentPreparation = (_d = preparations.find((preparation) => preparation.basePlan === selectedPlan &&
+        preparation.refresh === refreshPlan &&
+        preparation.requestedName === requestedName)) !== null && _d !== void 0 ? _d : null;
+    const preparedInstallation = (_e = currentPreparation === null || currentPreparation === void 0 ? void 0 : currentPreparation.installation) !== null && _e !== void 0 ? _e : null;
+    const planError = (_f = currentPreparation === null || currentPreparation === void 0 ? void 0 : currentPreparation.error) !== null && _f !== void 0 ? _f : null;
+    const installationName = (_g = requestedName !== null && requestedName !== void 0 ? requestedName : preparedInstallation === null || preparedInstallation === void 0 ? void 0 : preparedInstallation.name) !== null && _g !== void 0 ? _g : elementBaseName;
+    const [existingInstallations, setExistingInstallations] = (0, react_1.useState)([]);
+    const existingDestination = (_h = existingInstallations.find((installation) => installation.basePlan === selectedPlan &&
+        installation.refresh === refreshPlan)) !== null && _h !== void 0 ? _h : null;
     const overwriteExisting = existingDestination !== null &&
         input.overwritePlan === existingDestination.plan;
     const activePlan = overwriteExisting
         ? existingDestination.plan
-        : ((_f = preparedInstallation === null || preparedInstallation === void 0 ? void 0 : preparedInstallation.plan) !== null && _f !== void 0 ? _f : null);
+        : ((_j = preparedInstallation === null || preparedInstallation === void 0 ? void 0 : preparedInstallation.plan) !== null && _j !== void 0 ? _j : null);
+    const [displayedPlans, setDisplayedPlans] = (0, react_1.useState)([]);
+    const rememberedDisplayedPlan = (_k = (_a = displayedPlans.find((displayed) => displayed.basePlan === selectedPlan &&
+        displayed.refresh === refreshPlan)) === null || _a === void 0 ? void 0 : _a.plan) !== null && _k !== void 0 ? _k : null;
+    const displayedPlan = (_l = activePlan !== null && activePlan !== void 0 ? activePlan : rememberedDisplayedPlan) !== null && _l !== void 0 ? _l : selectedPlan;
+    (0, react_1.useLayoutEffect)(() => {
+        if (activePlan === null || selectedPlan === null) {
+            return;
+        }
+        setDisplayedPlans((previous) => {
+            const existing = previous.find((displayed) => displayed.basePlan === selectedPlan &&
+                displayed.refresh === refreshPlan);
+            if ((existing === null || existing === void 0 ? void 0 : existing.plan) === activePlan) {
+                return previous;
+            }
+            return [
+                ...previous.filter((displayed) => displayed.basePlan !== selectedPlan ||
+                    displayed.refresh !== refreshPlan),
+                { basePlan: selectedPlan, refresh: refreshPlan, plan: activePlan },
+            ];
+        });
+    }, [activePlan, refreshPlan, selectedPlan]);
     (0, react_1.useEffect)(() => {
         if (selectedPlan === null) {
             return;
@@ -462,34 +480,44 @@ const ElementInstallConfirmation = ({ state }) => {
                     plan: result.plan,
                 };
                 if (result.plan.expectedFileState.exists) {
-                    setExistingInstallation((previous) => (previous === null || previous === void 0 ? void 0 : previous.basePlan) === selectedPlan &&
-                        previous.refresh === refreshPlan
+                    setExistingInstallations((previous) => previous.some((installation) => installation.basePlan === selectedPlan &&
+                        installation.refresh === refreshPlan)
                         ? previous
-                        : prepared);
+                        : [...previous, prepared]);
                     if (requestedName === null) {
                         candidate = `${elementBaseName}-copy${copyNumber === 1 ? '' : `-${copyNumber}`}`;
                         copyNumber++;
                         continue;
                     }
                 }
-                setPreparation({
-                    basePlan: selectedPlan,
-                    refresh: refreshPlan,
-                    requestedName,
-                    installation: prepared,
-                    error: null,
-                });
+                setPreparations((previous) => [
+                    ...previous.filter((preparation) => preparation.basePlan !== selectedPlan ||
+                        preparation.refresh !== refreshPlan ||
+                        preparation.requestedName !== requestedName),
+                    {
+                        basePlan: selectedPlan,
+                        refresh: refreshPlan,
+                        requestedName,
+                        installation: prepared,
+                        error: null,
+                    },
+                ]);
                 return;
             }
         })().catch((error) => {
             if (!canceled) {
-                setPreparation({
-                    basePlan: selectedPlan,
-                    refresh: refreshPlan,
-                    requestedName,
-                    installation: null,
-                    error: error instanceof Error ? error.message : String(error),
-                });
+                setPreparations((previous) => [
+                    ...previous.filter((preparation) => preparation.basePlan !== selectedPlan ||
+                        preparation.refresh !== refreshPlan ||
+                        preparation.requestedName !== requestedName),
+                    {
+                        basePlan: selectedPlan,
+                        refresh: refreshPlan,
+                        requestedName,
+                        installation: null,
+                        error: error instanceof Error ? error.message : String(error),
+                    },
+                ]);
             }
         });
         return () => {
@@ -624,9 +652,12 @@ const ElementInstallConfirmation = ({ state }) => {
                                     jsx_runtime_1.jsx("dt", { style: sectionTitleStyle, children: "From" }), jsx_runtime_1.jsx("dd", { style: sourceIsUnverified
                                             ? unverifiedRequestSourceStyle
                                             : requestSourceDescriptionStyle, children: sourceLabel })
-                                ] }), activePlan ? (jsx_runtime_1.jsxs("dl", { style: requestSourceStyle, children: [
-                                    jsx_runtime_1.jsx("dt", { style: sectionTitleStyle, children: "Destination" }), jsx_runtime_1.jsx("dd", { style: requestSourceDescriptionStyle, children: activePlan.filePath })
-                                ] })) : null, jsx_runtime_1.jsxs("div", { style: destinationControlStyle, children: [
+                                ] }), jsx_runtime_1.jsxs("dl", { style: {
+                                    ...requestSourceStyle,
+                                    visibility: displayedPlan === null ? 'hidden' : 'visible',
+                                }, "aria-hidden": displayedPlan === null, children: [
+                                    jsx_runtime_1.jsx("dt", { style: sectionTitleStyle, children: "Destination" }), jsx_runtime_1.jsx("dd", { style: requestSourceDescriptionStyle, children: (_m = displayedPlan === null || displayedPlan === void 0 ? void 0 : displayedPlan.filePath) !== null && _m !== void 0 ? _m : '\u00A0' })
+                                ] }), jsx_runtime_1.jsxs("div", { style: destinationControlStyle, children: [
                                     jsx_runtime_1.jsx("div", { style: sectionTitleStyle, children: "Add to" }), jsx_runtime_1.jsx("div", { "aria-label": "Add to", role: "group", style: { marginLeft: 'auto' }, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: destinationOptions, needsWrapping: false, size: "medium" }) })
                                 ] }), currentPlan === null ? (jsx_runtime_1.jsxs("div", { style: warningStyle, role: "status", children: [
                                     jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: warningDescriptionStyle, children: ["Studio could not find a safe place in \u201C", request.compositionId, "\u201D to insert the Element. Install it into a new composition instead."] })

package/dist/components/FilePreview.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const JSONViewer_1 = require("./JSONViewer");
 const layout_1 = require("./layout");
+const LutPreview_1 = require("./LutPreview");
 const TextViewer_1 = require("./TextViewer");
 const msgStyle = {
     fontSize: 13,
@@ -104,6 +105,9 @@ const FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
     if (fileType === 'font') {
         return jsx_runtime_1.jsx(FontPreview, { src: src });
     }
+    if (fileType === 'lut') {
+        return jsx_runtime_1.jsx(LutPreview_1.LutPreview, { src: src }, src);
+    }
     if (fileType === 'json') {
         return jsx_runtime_1.jsx(JSONViewer_1.JSONViewer, { src: src });
     }

package/dist/components/FixComputedValueModal.js

@@ -3,19 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FixComputedValueModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const resolve_file_source_1 = require("../error-overlay/react-overlay/effects/resolve-file-source");
+const OpenInEditor_1 = require("../error-overlay/remotion-overlay/OpenInEditor");
+const StackFrame_1 = require("../error-overlay/remotion-overlay/StackFrame");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
-const copy_text_1 = require("../helpers/copy-text");
-const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
-const copy_1 = require("../icons/copy");
-const skills_1 = require("../icons/skills");
-const CodingAgentButton_1 = require("./CodingAgentButton");
-const InlineAction_1 = require("./InlineAction");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const AgentPrompt_1 = require("./AgentPrompt");
 const ModalContainer_1 = require("./ModalContainer");
-const ModalFooter_1 = require("./ModalFooter");
 const ModalHeader_1 = require("./ModalHeader");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const SettingsContext_1 = require("./SettingsContext");
+const use_default_editor_info_1 = require("./use-default-editor-info");
 const panelStyle = {
     borderRadius: 6,
     display: 'flex',
@@ -36,99 +34,69 @@ const text = {
     fontSize: 14,
     lineHeight: 1.5,
 };
-const commandField = {
-    alignItems: 'flex-start',
-    background: colors_1.BLACK_ALPHA_30,
-    borderRadius: 6,
-    boxSizing: 'border-box',
-    display: 'flex',
-    gap: 8,
-    marginTop: 10,
-    padding: '8px 8px 8px 10px',
-    width: '100%',
-};
-const code = {
-    color: colors_1.WHITE,
-    flex: 1,
-    fontFamily: 'monospace',
-    fontSize: 13,
-    lineHeight: 1.5,
-    margin: 0,
-    minWidth: 0,
-    overflowWrap: 'anywhere',
-    whiteSpace: 'pre-wrap',
-};
-const copyAction = {
-    flexShrink: 0,
+const sourcePreviewContainer = {
+    marginBottom: 16,
+    marginTop: 4,
 };
-const skillsIcon = {
-    display: 'inline-block',
-    height: 18,
-    width: 18,
-    marginRight: 6,
-    verticalAlign: 'middle',
-};
-const copyIcon = {
-    flexShrink: 0,
-    height: 12,
-    width: 12,
-};
-const footer = {
-    display: 'flex',
-    flex: 'none',
-    minWidth: 0,
-    padding: '12px 16px',
-    justifyContent: 'flex-end',
+const sourcePreviewStatus = {
+    ...text,
+    marginBottom: 16,
+    marginTop: 10,
 };
 const FixComputedValueModal = ({ state }) => {
     var _a;
-    const { codingAgentInfo } = (0, SettingsContext_1.useSettings)();
-    const skillName = '/remotion-interactivity';
-    const promptDetails = ` ${state.context} make "${state.prop}" interactive`;
-    const prompt = `${skillName}${promptDetails}`;
-    const installCommand = 'npx remotion skills add';
-    const hasCodingAgent = ((_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) !== null && _a !== void 0 ? _a : 0) > 0;
-    const { copied: promptCopied, markCopied: markPromptCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
-    const { copied: installCommandCopied, markCopied: markInstallCommandCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
-    const onCopyPrompt = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(prompt)
-            .then(markPromptCopied)
-            .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
-        });
-    }, [markPromptCopied, prompt]);
-    const onCopyInstallCommand = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(installCommand)
-            .then(markInstallCommandCopied)
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { canOpenInEditor, defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
+    const [sourcePreview, setSourcePreview] = (0, react_1.useState)({
+        type: 'loading',
+    });
+    const promptLocation = sourcePreview.type === 'loaded'
+        ? `${sourcePreview.stack.originalFileName}:${sourcePreview.stack.originalLineNumber}:${sourcePreview.stack.originalColumnNumber}`
+        : `${state.location.source}:${state.location.line}:${state.location.column}`;
+    const promptDetails = ` ${promptLocation} make "${state.prop}" interactive`;
+    const canOpenSourceInEditor = sourcePreview.type === 'loaded' &&
+        canOpenInEditor &&
+        defaultEditorId !== null &&
+        defaultEditorName !== null;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        let cancelled = false;
+        setSourcePreview({ type: 'loading' });
+        (0, open_in_editor_1.findOriginalPositionInFileAtProperty)({
+            originalPosition: state.location,
+            property: (_a = state.prop.split('.').at(-1)) !== null && _a !== void 0 ? _a : state.prop,
+        })
+            .then((position) => {
+            return (0, resolve_file_source_1.resolveFileSource)({
+                columnNumber: position.column,
+                fileName: position.source,
+                lineNumber: position.line,
+                message: `Computed value "${state.prop}"`,
+            }, 1);
+        })
+            .then((stack) => {
+            if (!cancelled) {
+                setSourcePreview({ type: 'loaded', stack });
+            }
+        })
             .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+            if (!cancelled) {
+                setSourcePreview({
+                    type: 'error',
+                    message: err instanceof Error ? err.message : String(err),
+                });
+            }
         });
-    }, [installCommand, markInstallCommandCopied]);
-    const renderPromptCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: promptCopied, color: color, style: copyIcon });
-    }, [promptCopied]);
-    const renderInstallCommandCopyAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: installCommandCopied, color: color, style: copyIcon }));
-    }, [installCommandCopied]);
+        return () => {
+            cancelled = true;
+        };
+    }, [state.location, state.prop]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Fix computed value" }), jsx_runtime_1.jsxs("div", { style: container, children: [state.remotionInteractivitySkillAvailable ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx("div", { style: text, children: "First, install the Remotion Agent Skills:" }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                                    jsx_runtime_1.jsx("pre", { style: code, children: installCommand }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { style: copyAction, variant: null, onClick: onCopyInstallCommand, renderAction: renderInstallCommandCopyAction, title: "Copy command" })
-                                ] })
-                        ] })), jsx_runtime_1.jsx("div", { style: {
-                            ...text,
-                            marginTop: state.remotionInteractivitySkillAvailable ? 0 : 16,
-                        }, children: state.remotionInteractivitySkillAvailable
-                            ? 'Paste this prompt into your coding agent to make this value editable in Studio:'
-                            : 'Then, paste this prompt into your coding agent:' }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                            jsx_runtime_1.jsxs("pre", { style: code, children: [
-                                    jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: colors_1.BLUE, style: skillsIcon, "aria-hidden": true }), jsx_runtime_1.jsx("span", { style: {
-                                            color: colors_1.BLUE,
-                                            fontFamily: 'inherit',
-                                            fontSize: 'inherit',
-                                            lineHeight: 'inherit',
-                                        }, children: skillName }), promptDetails] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { style: copyAction, variant: null, onClick: onCopyPrompt, renderAction: renderPromptCopyAction, title: "Copy prompt" })
-                        ] })
-                ] }), hasCodingAgent ? (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsx(CodingAgentButton_1.CodingAgentButton, { label: "Open in", prompt: prompt, size: "compact", style: null }) })) : null] }));
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Fix computed value" }), jsx_runtime_1.jsxs("div", { style: container, children: [
+                    jsx_runtime_1.jsx("div", { style: text, children: "This value cannot be interactively edited because it is computed:" }), sourcePreview.type === 'loaded' ? (jsx_runtime_1.jsx("div", { style: sourcePreviewContainer, children: jsx_runtime_1.jsx(StackFrame_1.StackElement, { collapsible: false, defaultFunctionName: null, editorId: canOpenInEditor ? defaultEditorId : null, fontSize: 13, headerAction: canOpenSourceInEditor ? (jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: false, editorId: defaultEditorId, editorName: defaultEditorName, size: "compact", stack: sourcePreview.stack })) : null, horizontalSpacing: 0, isFirst: true, lineNumberWidth: String(Math.max(0, ...((_a = sourcePreview.stack.originalScriptCode) !== null && _a !== void 0 ? _a : []).map((line) => line.lineNumber))).length, s: sourcePreview.stack }) })) : (jsx_runtime_1.jsx("div", { style: sourcePreviewStatus, children: sourcePreview.type === 'loading'
+                            ? 'Loading code preview...'
+                            : `Could not load code preview: ${sourcePreview.message}` })), jsx_runtime_1.jsx(AgentPrompt_1.AgentPrompt, { availableText: "Use this prompt to make this value editable:", promptDetails: promptDetails, skillId: "remotion-interactivity" })
+                ] })
+        ] }));
 };
 exports.FixComputedValueModal = FixComputedValueModal;

package/dist/components/GenerateWithAgentModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ModalState } from '../state/modals';
+type State = Extract<ModalState, {
+    type: 'generate-with-agent';
+}>;
+export declare const GenerateWithAgentModal: React.FC<{
+    readonly state: State;
+}>;
+export {};

package/dist/components/GenerateWithAgentModal.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenerateWithAgentModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const format_file_location_1 = require("../helpers/format-file-location");
+const AgentPrompt_1 = require("./AgentPrompt");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalHeader_1 = require("./ModalHeader");
+const DismissableModal_1 = require("./NewComposition/DismissableModal");
+const panelStyle = {
+    borderRadius: 6,
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: (0, ModalContainer_1.getMaxModalHeight)(800),
+    minWidth: 0,
+    overflow: 'hidden',
+    width: (0, ModalContainer_1.getMaxModalWidth)(560),
+};
+const container = { padding: 16 };
+const text = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    marginBottom: 16,
+};
+const GenerateWithAgentModal = ({ state, }) => {
+    const location = (0, format_file_location_1.formatFileLocation)({
+        location: state.location,
+        root: window.remotion_cwd,
+    });
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Generate with agent" }), jsx_runtime_1.jsxs("div", { style: container, children: [
+                    jsx_runtime_1.jsx("div", { style: text, children: "Ask a coding agent to generate content in this composition." }), jsx_runtime_1.jsx(AgentPrompt_1.AgentPrompt, { availableText: "Start your prompt with:", promptDetails: location ? ` ${location}` : '', skillId: "remotion-markup" })
+                ] })
+        ] }));
+};
+exports.GenerateWithAgentModal = GenerateWithAgentModal;

package/dist/components/InitialCompositionLoader.js

@@ -95,7 +95,7 @@ const InitialCompositionLoader = () => {
         if (!compositionListIsReady) {
             return;
         }
-        if (compositions.length > 0) {
+        if (compositions.length > 0 && !window.remotion_isReadOnlyStudio) {
             selectComposition(compositions[0], true);
         }
         else {

package/dist/components/InlineDropdown.js

@@ -13,6 +13,7 @@ const mobile_layout_1 = require("../helpers/mobile-layout");
 const noop_1 = require("../helpers/noop");
 const z_index_1 = require("../state/z-index");
 const InlineAction_1 = require("./InlineAction");
+const menu_tree_context_1 = require("./Menu/menu-tree-context");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
@@ -23,6 +24,7 @@ const container = {
 const InlineDropdown = ({ values, getItems, onOpenChange, unhoveredColor, ...props }) => {
     var _a, _b;
     const ref = (0, react_1.useRef)(null);
+    const [menuTreeId] = (0, react_1.useState)(menu_tree_context_1.getNextMenuTreeId);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const size = player_1.PlayerInternals.useElementSize(ref, {
@@ -96,9 +98,31 @@ const InlineDropdown = ({ values, getItems, onOpenChange, unhoveredColor, ...pro
         setOpened({ type: 'not-open' });
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
     }, [onOpenChange]);
+    (0, react_1.useEffect)(() => {
+        if (opened.type === 'not-open') {
+            return;
+        }
+        const dismissWithoutClickThrough = (event) => {
+            if (event.button !== 0) {
+                return;
+            }
+            const target = event.target;
+            if ((0, menu_tree_context_1.isNodeInMenuTree)(target, menuTreeId)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            onHide();
+        };
+        window.addEventListener('pointerdown', dismissWithoutClickThrough, true);
+        return () => {
+            window.removeEventListener('pointerdown', dismissWithoutClickThrough, true);
+        };
+    }, [menuTreeId, onHide, opened.type]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: ref, style: container, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, unhoveredColor: opened.type === 'open' ? colors_1.WHITE : unhoveredColor, ...props }) }), portalStyle && opened.type === 'open'
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: (_b = (_a = opened.values) !== null && _a !== void 0 ? _a : values) !== null && _b !== void 0 ? _b : [], onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+            jsx_runtime_1.jsx("div", { ref: ref, style: container, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, unhoveredColor: opened.type === 'open' ? colors_1.WHITE : unhoveredColor, ...props, "aria-expanded": opened.type === 'open' }) }), portalStyle && opened.type === 'open'
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { "data-remotion-menu-tree-id": menuTreeId, style: portalStyle, onPointerDown: (event) => event.stopPropagation(), children: jsx_runtime_1.jsx(menu_tree_context_1.MenuTreeContext.Provider, { value: menuTreeId, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: (_b = (_a = opened.values) !== null && _a !== void 0 ? _a : values) !== null && _b !== void 0 ? _b : [], onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.InlineDropdown = InlineDropdown;

package/dist/components/InlineEditableTitle.js

@@ -35,6 +35,8 @@ const titleGridItem = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const titleInput = {
@@ -52,6 +54,7 @@ const titleInput = {
     outline: 'none',
     overflow: 'hidden',
     padding: 0,
+    userSelect: 'text',
     WebkitAppearance: 'none',
     width: '100%',
 };

package/dist/components/InspectorOpenInEditor.js

@@ -78,14 +78,16 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
     ]);
     const menuItems = (0, react_1.useMemo)(() => {
         const items = (0, get_open_in_menu_items_1.getOpenInMenuItems)({
+            canOpenDesktopApps: canConfigureApps,
             codingAgentInfo,
             editorDisabled: location === null || !canOpenInEditor,
             editorInfo,
             excludeCodingAgentId: null,
             excludeEditorId: defaultEditorId,
+            excludeGitSource: defaultOpenInTarget === 'git-source',
             fileManagerDisabled: !(location === null || location === void 0 ? void 0 : location.source) || previewServerState.type !== 'connected',
             folder: locationType === 'folder',
-            location,
+            gitSourceDisabled: location === null,
             onConfigureApps: configureDefaultApps,
             onOpenInCodingAgent: (codingAgentId, codingAgentName) => {
                 openWithCodingAgent(codingAgentId, codingAgentName).catch(() => undefined);
@@ -112,6 +114,9 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                     (0, NotificationCenter_1.showNotification)(`Could not open Git client: ${err.message}`, 2000);
                 });
             },
+            onOpenInGitSource: () => {
+                (0, get_git_menu_item_1.openGitSource)({ folder: locationType === 'folder', location });
+            },
             onOpenInTerminal: (terminalId) => {
                 if (!(location === null || location === void 0 ? void 0 : location.source) || locationType !== 'folder') {
                     return;
@@ -127,11 +132,10 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 });
             },
         });
-        return defaultOpenInTarget === 'git-source'
-            ? items.filter((item) => item.id !== 'open-in-github')
-            : items;
+        return items;
     }, [
         codingAgentInfo,
+        canConfigureApps,
         canOpenInEditor,
         configureDefaultApps,
         defaultEditorId,

package/dist/components/InspectorPanel/CollapsibleInspectorSection.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const CollapsibleInspectorSection: React.FC<{
+    readonly children: React.ReactNode;
+    readonly collapsible: boolean;
+    readonly label: string;
+    readonly sectionId: string;
+}>;

package/dist/components/InspectorPanel/CollapsibleInspectorSection.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleInspectorSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CollapsibleInspectorSectionHeader_1 = require("./CollapsibleInspectorSectionHeader");
+const common_1 = require("./common");
+const use_inspector_section_expanded_1 = require("./use-inspector-section-expanded");
+const CollapsibleInspectorSection = ({ children, collapsible, label, sectionId }) => {
+    const [expanded, setExpanded] = (0, use_inspector_section_expanded_1.useInspectorSectionExpanded)(sectionId);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: null, expanded: expanded, label: label, onToggle: collapsible ? () => setExpanded(!expanded) : null }) }), jsx_runtime_1.jsx(common_1.InspectorSectionBody, { expanded: !collapsible || expanded, children: children })
+        ] }));
+};
+exports.CollapsibleInspectorSection = CollapsibleInspectorSection;

package/dist/components/InspectorPanel/CollapsibleInspectorSectionHeader.d.ts

@@ -3,5 +3,5 @@ export declare const CollapsibleInspectorSectionHeader: React.FC<{
     readonly action: React.ReactNode;
     readonly expanded: boolean;
     readonly label: string;
-    readonly onToggle: () => void;
+    readonly onToggle: (() => void) | null;
 }>;