@remotion/studio 4.0.524 → 4.0.526

package/dist/components/ElementInstallConfirmation.js

@@ -10,12 +10,14 @@ const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint")
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const resolved_stack_to_symbolicated_1 = require("../helpers/resolved-stack-to-symbolicated");
+const url_state_1 = require("../helpers/url-state");
 const use_create_composition_1 = require("../helpers/use-create-composition");
 const validate_new_comp_data_1 = require("../helpers/validate-new-comp-data");
 const z_index_1 = require("../state/z-index");
 const Button_1 = require("./Button");
 const element_install_api_1 = require("./element-install-api");
 const import_assets_1 = require("./import-assets");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const layout_1 = require("./layout");
 const LazySyntaxHighlightedSource_1 = require("./LazySyntaxHighlightedSource");
 const is_menu_item_1 = require("./Menu/is-menu-item");
@@ -27,7 +29,6 @@ const ModalHeader_1 = require("./ModalHeader");
 const NewComposition_1 = require("./NewComposition/NewComposition");
 const RemInput_1 = require("./NewComposition/RemInput");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const RadioButton_1 = require("./RadioButton");
 const SegmentedControl_1 = require("./SegmentedControl");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
@@ -249,11 +250,13 @@ 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();
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const currentCompositionMetadata = config === null ||
         (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition' ||
         canvasContent.compositionId !== request.compositionId
@@ -297,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',
@@ -369,7 +372,7 @@ const ElementInstallConfirmation = ({ state }) => {
             canceled = true;
         };
     }, [folderCompositionFile, newPlan, request.element, selectedFolderStack]);
-    const { compositionId: newCompositionId, createComposition, heightValidationMessage, nameValidationMessage, valid: newCompositionValuesAreValid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
+    const { codemod: newCompositionCodemod, compositionId: newCompositionId, heightValidationMessage, nameValidationMessage, valid: newCompositionValuesAreValid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
         canvasCapture: null,
         compositions,
         durationInFrames: newCompositionValues.durationInFrames,
@@ -386,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,
@@ -407,28 +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);
-    const [createdComposition, setCreatedComposition] = (0, react_1.useState)(null);
-    const creationKey = JSON.stringify(newCompositionValues);
-    const compositionAlreadyCreated = createdComposition === creationKey;
+        : ((_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;
@@ -463,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 () => {
@@ -521,7 +548,7 @@ const ElementInstallConfirmation = ({ state }) => {
                     : requestedName !== null))) &&
         (mode === 'current-composition'
             ? currentPlan !== null
-            : (newCompositionValuesAreValid || compositionAlreadyCreated) &&
+            : newCompositionValuesAreValid &&
                 folderTargetIsReady &&
                 selectedNewCompositionPlan !== null);
     const submit = (0, react_1.useCallback)(async () => {
@@ -530,18 +557,6 @@ const ElementInstallConfirmation = ({ state }) => {
             return;
         }
         setSubmitting(true);
-        if (mode === 'new-composition' && !compositionAlreadyCreated) {
-            const created = await createComposition({
-                signal: new AbortController().signal,
-                symbolicatedStack: selectedFolderStack === null ? null : folderSymbolicatedStack,
-            });
-            if (!created.success) {
-                (0, NotificationCenter_1.showNotification)(`Could not create composition: ${created.reason}`, 4000);
-                setSubmitting(false);
-                return;
-            }
-            setCreatedComposition(creationKey);
-        }
         const installed = await (0, import_assets_1.insertElement)({
             installationName: overwriteExisting
                 ? ((_a = existingDestination === null || existingDestination === void 0 ? void 0 : existingDestination.name) !== null && _a !== void 0 ? _a : installationName)
@@ -556,9 +571,29 @@ const ElementInstallConfirmation = ({ state }) => {
             from: mode === 'new-composition' ? null : request.from,
             overwriteExisting,
             position: mode === 'new-composition' ? null : request.position,
+            undoRedoNavigation: mode === 'new-composition'
+                ? {
+                    undoRoute: (0, url_state_1.getRoute)(),
+                    redoRoute: `/${newCompositionId}`,
+                }
+                : null,
+            newComposition: mode === 'new-composition'
+                ? {
+                    codemod: newCompositionCodemod,
+                    symbolicatedStack: selectedFolderStack === null ? null : folderSymbolicatedStack,
+                }
+                : null,
         });
-        if (installed)
+        if (installed) {
+            if (mode === 'new-composition') {
+                selectComposition({
+                    id: newCompositionId,
+                    folderName: newCompositionValues.folder.folderName,
+                    parentFolderName: newCompositionValues.folder.parentName,
+                }, true);
+            }
             onClose();
+        }
         else {
             setSubmitting(false);
             setRefreshPlan((value) => value + 1);
@@ -566,19 +601,20 @@ const ElementInstallConfirmation = ({ state }) => {
     }, [
         activePlan,
         existingDestination,
-        compositionAlreadyCreated,
-        creationKey,
         installationName,
         overwriteExisting,
         canSubmit,
-        createComposition,
         folderSymbolicatedStack,
         mode,
+        newCompositionCodemod,
         newCompositionId,
         onClose,
         request,
         selectedFolderStack,
         selectedPlan,
+        selectComposition,
+        newCompositionValues.folder.folderName,
+        newCompositionValues.folder.parentName,
     ]);
     const cancel = (0, react_1.useCallback)(() => {
         if (!submitting) {
@@ -616,14 +652,17 @@ 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."] })
                                 ] })) : null, mode === 'new-composition' ? (jsx_runtime_1.jsxs("section", { style: { ...sectionStyle, marginInline: -16 }, "aria-label": "New composition settings", children: [
-                                    jsx_runtime_1.jsx(NewComposition_1.NewCompositionFields, { compositionId: newCompositionId, heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: compositionAlreadyCreated ? null : nameValidationMessage, setValues: setNewCompositionValues, values: newCompositionValues, widthValidationMessage: widthValidationMessage }), (activeNewCompositionPlanState === null || activeNewCompositionPlanState === void 0 ? void 0 : activeNewCompositionPlanState.type) === 'error' ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: activeNewCompositionPlanState.reason, type: "error" })) : null] })) : null, jsx_runtime_1.jsx("section", { style: sectionStyle, "aria-label": "Element implementation", children: existingDestination ? (jsx_runtime_1.jsxs("div", { role: "radiogroup", "aria-label": "Existing Element file", style: sectionStyle, children: [
+                                    jsx_runtime_1.jsx(NewComposition_1.NewCompositionFields, { compositionId: newCompositionId, heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: nameValidationMessage, setValues: setNewCompositionValues, values: newCompositionValues, widthValidationMessage: widthValidationMessage }), (activeNewCompositionPlanState === null || activeNewCompositionPlanState === void 0 ? void 0 : activeNewCompositionPlanState.type) === 'error' ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: activeNewCompositionPlanState.reason, type: "error" })) : null] })) : null, jsx_runtime_1.jsx("section", { style: sectionStyle, "aria-label": "Element implementation", children: existingDestination ? (jsx_runtime_1.jsxs("div", { role: "radiogroup", "aria-label": "Existing Element file", style: sectionStyle, children: [
                                         jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: !overwriteExisting, disabled: submitting, onClick: () => setInput((previous) => ({ ...previous, overwritePlan: null })), children: "Create a copy" }), !overwriteExisting ? (jsx_runtime_1.jsxs("div", { style: {
                                                 ...sectionStyle,
                                                 paddingLeft: 28,

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

@@ -42,6 +42,6 @@ const FullScreenToggle = ({ hidden }) => {
             f.unregister();
         };
     }, [keybindings, onClick]);
-    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: { width: 18, height: 18 } })) }) }));
+    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Fullscreen", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: { width: 18, height: 18 } })) }) }));
 };
 exports.FullScreenToggle = FullScreenToggle;

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

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const pick_color_1 = require("../helpers/pick-color");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -184,6 +185,18 @@ const GlobalKeybindings = () => {
                 preventDefault: true,
             })
             : null;
+        const colorPicker = 'EyeDropper' in window
+            ? keybindings.registerKeybinding({
+                event: 'keydown',
+                action: 'pickColor',
+                callback: () => {
+                    (0, pick_color_1.pickColor)();
+                },
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+                preventDefault: true,
+            })
+            : null;
         const sequencePropKeys = sequencePropShortcuts.map(({ action, fieldKey }) => keybindings.registerKeybinding({
             event: 'keydown',
             action,
@@ -274,6 +287,7 @@ const GlobalKeybindings = () => {
             cmdKKey.unregister();
             cmdSKey.unregister();
             cmdIKey === null || cmdIKey === void 0 ? void 0 : cmdIKey.unregister();
+            colorPicker === null || colorPicker === void 0 ? void 0 : colorPicker.unregister();
             pageDown.unregister();
             pageUp.unregister();
             shiftMKey.unregister();

package/dist/components/InlineEditableTitle.js

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

package/dist/components/InspectorLocationCopy.js

@@ -69,6 +69,6 @@ const InspectorLocationCopy = ({ children, location, name, openInEditorLocation
                     opacity: showAction ? 1 : 0,
                     pointerEvents: showAction ? 'auto' : 'none',
                 }, children: [
-                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, contextForAgents: contextForAgents, location: openInEditorLocation }), contextForAgents ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy context for agents" })) : null] })) : null] }));
+                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, contextForAgents: contextForAgents, location: openInEditorLocation, showTooltips: false }), contextForAgents ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy context for agents" })) : null] })) : null] }));
 };
 exports.InspectorLocationCopy = InspectorLocationCopy;

package/dist/components/InspectorOpenInEditor.d.ts

@@ -5,4 +5,5 @@ export declare const InspectorOpenInEditor: React.FC<{
     readonly location: OriginalPosition | null;
     readonly label?: React.ReactNode;
     readonly locationType: 'file' | 'folder' | null;
+    readonly showTooltips: boolean;
 }>;