@remotion/studio 4.0.506 → 4.0.507

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineExpandedTree = void 0;
+exports.useTimelineExpandedTree = exports.useTimelineSequenceHasExpandableContent = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -9,6 +9,50 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
+const useTimelineSequenceHasExpandableContent = ({ sequence, nodePathInfo, }) => {
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
+    const selectHasExpandableContent = (0, react_1.useCallback)((runtimeValues) => {
+        const tree = (0, timeline_layout_1.buildTimelineTree)({
+            sequence,
+            nodePathInfo,
+            getDragOverrides,
+            getEffectDragOverrides,
+            propStatuses: visualModePropStatuses,
+            includeTextContent: false,
+            includeSourceControls: false,
+            runtimeValues,
+        });
+        return ((0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
+            nodes: tree,
+            shouldShowNode: (node) => (0, timeline_expanded_filter_1.isTimelineExpandedNodeSelected)({
+                nodePathInfo: node.nodePathInfo,
+                selectedRowKeys,
+            }) ||
+                (0, get_node_keyframes_1.getNodeHasKeyframes)({
+                    node,
+                    nodePath: nodePathInfo.sequenceSubscriptionKey,
+                    propStatuses: visualModePropStatuses,
+                    getDragOverrides,
+                    getEffectDragOverrides,
+                }),
+        }).length > 0);
+    }, [
+        getDragOverrides,
+        getEffectDragOverrides,
+        nodePathInfo,
+        selectedRowKeys,
+        sequence,
+        visualModePropStatuses,
+    ]);
+    return (0, use_runtime_values_1.useRuntimeValueSelector)({
+        controls: sequence.controls,
+        selector: selectHasExpandableContent,
+    });
+};
+exports.useTimelineSequenceHasExpandableContent = useTimelineSequenceHasExpandableContent;
 const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);

package/dist/components/get-open-in-menu-items.d.ts

@@ -0,0 +1,12 @@
+import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, }: {
+    readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
+    readonly editorDisabled: boolean;
+    readonly editorInfo: GetDefaultEditorInfoResponse | null;
+    readonly excludeCodingAgentId: "claude-code" | "codex" | "copilot" | "cursor" | null;
+    readonly excludeEditorId: EditorPickerId | null;
+    readonly onConfigureApps: () => void;
+    readonly onOpenInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", codingAgentName: string) => void;
+    readonly onOpenInEditor: (editorId: EditorPickerId) => void;
+}) => ComboboxValue[];

package/dist/components/get-open-in-menu-items.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOpenInMenuItems = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editor_1 = require("../icons/editor");
+const CodingAgentIcon_1 = require("./CodingAgentIcon");
+const menuLabel = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '16px',
+};
+const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, }) => {
+    var _a, _b;
+    const editors = ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : [])
+        .filter((editor) => editor.id !== excludeEditorId)
+        .map((editor) => ({
+        disabled: editorDisabled,
+        id: `open-in-${editor.id}`,
+        keyHint: null,
+        label: jsx_runtime_1.jsx("span", { style: menuLabel, children: editor.name }),
+        leftItem: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editor.id, size: 18 }),
+        onClick: () => {
+            if (!editorDisabled) {
+                onOpenInEditor(editor.id);
+            }
+        },
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: 'item',
+        value: editor.id,
+    }));
+    const codingAgents = ((_b = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents) !== null && _b !== void 0 ? _b : [])
+        .filter((codingAgent) => codingAgent.id !== excludeCodingAgentId)
+        .map((codingAgent) => ({
+        id: `open-in-coding-agent-${codingAgent.id}`,
+        keyHint: null,
+        label: jsx_runtime_1.jsx("span", { style: menuLabel, children: codingAgent.name }),
+        leftItem: jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { iconDataUrl: codingAgent.iconDataUrl }),
+        onClick: () => onOpenInCodingAgent(codingAgent.id, codingAgent.nameWithType),
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: 'item',
+        value: `coding-agent-${codingAgent.id}`,
+    }));
+    return [
+        ...(editors.length > 0
+            ? [
+                {
+                    type: 'section-header',
+                    id: 'editors-header',
+                    label: 'Editors',
+                },
+                ...editors,
+            ]
+            : []),
+        ...(codingAgents.length > 0
+            ? [
+                {
+                    type: 'section-header',
+                    id: 'agents-header',
+                    label: 'Agents',
+                },
+                ...codingAgents,
+            ]
+            : []),
+        ...(editors.length > 0 || codingAgents.length > 0
+            ? [{ type: 'divider', id: 'open-in-settings-divider' }]
+            : []),
+        {
+            id: 'change-default-apps',
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Change default apps..." }),
+            leftItem: null,
+            onClick: onConfigureApps,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: 'change-default-apps',
+        },
+    ];
+};
+exports.getOpenInMenuItems = getOpenInMenuItems;

package/dist/components/selected-outline-measurement.d.ts

@@ -1,6 +1,6 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
 import type { OutlinePoint, SelectedOutline } from './selected-outline-geometry';
-import type { SelectedOutlineTarget, SequenceWithSelectedOutline } from './selected-outline-types';
+import type { SelectedOutlineLayoutTarget, SequenceWithSelectedOutline } from './selected-outline-types';
 import { type TimelineSelection, type TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 export declare const pointToString: (point: OutlinePoint) => string;
 export declare const midpoint: (from: OutlinePoint, to: OutlinePoint) => OutlinePoint;
@@ -75,6 +75,6 @@ export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideI
     readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
     readonly timelinePosition: number;
 }) => SequenceWithSelectedOutline[];
-export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineTarget[]) => SelectedOutline[];
+export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[]) => SelectedOutline[];
 export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;
 export {};

package/dist/components/selected-outline-order.d.ts

@@ -0,0 +1,12 @@
+import type { SelectedOutline } from './selected-outline-geometry';
+import type { SelectedOutlineLayoutTarget } from './selected-outline-types';
+type OutlineSequenceParent = {
+    readonly id: string;
+    readonly parent: string | null;
+};
+export declare const orderOutlinesForRendering: ({ outlines, sequences, targetsByKey, }: {
+    readonly outlines: readonly SelectedOutline[];
+    readonly sequences: readonly OutlineSequenceParent[];
+    readonly targetsByKey: ReadonlyMap<string, SelectedOutlineLayoutTarget>;
+}) => readonly SelectedOutline[];
+export {};

package/dist/components/selected-outline-order.js

@@ -0,0 +1,251 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.orderOutlinesForRendering = void 0;
+const outlinePointEqualityTolerance = 0.5;
+const outlineAreaEqualityTolerance = 0.5;
+const outlineBoundsOverlapTolerance = 0.5;
+const outlinePointsAreEquivalent = (a, b) => {
+    return (Math.abs(a.x - b.x) <= outlinePointEqualityTolerance &&
+        Math.abs(a.y - b.y) <= outlinePointEqualityTolerance);
+};
+const outlinesHaveEquivalentHitArea = (a, b) => {
+    if (a.points.length !== b.points.length) {
+        return false;
+    }
+    for (let startIndex = 0; startIndex < b.points.length; startIndex++) {
+        for (const direction of [1, -1]) {
+            const pointsMatch = a.points.every((point, index) => {
+                const bIndex = (startIndex + direction * index + b.points.length) % b.points.length;
+                return outlinePointsAreEquivalent(point, b.points[bIndex]);
+            });
+            if (pointsMatch) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+const getOutlineHitArea = (outline) => {
+    let area = 0;
+    for (let i = 0; i < outline.points.length; i++) {
+        const current = outline.points[i];
+        const next = outline.points[(i + 1) % outline.points.length];
+        area += current.x * next.y - next.x * current.y;
+    }
+    return Math.abs(area) / 2;
+};
+const getOutlineBounds = (outline) => {
+    const xs = outline.points.map((point) => point.x);
+    const ys = outline.points.map((point) => point.y);
+    return {
+        maxX: Math.max(...xs),
+        maxY: Math.max(...ys),
+        minX: Math.min(...xs),
+        minY: Math.min(...ys),
+    };
+};
+const outlineBoundsOverlap = (a, b) => {
+    const aBounds = getOutlineBounds(a);
+    const bBounds = getOutlineBounds(b);
+    return (aBounds.minX <= bBounds.maxX + outlineBoundsOverlapTolerance &&
+        aBounds.maxX + outlineBoundsOverlapTolerance >= bBounds.minX &&
+        aBounds.minY <= bBounds.maxY + outlineBoundsOverlapTolerance &&
+        aBounds.maxY + outlineBoundsOverlapTolerance >= bBounds.minY);
+};
+const getSequenceId = (target) => {
+    var _a;
+    var _b;
+    return (_b = (_a = target === null || target === void 0 ? void 0 : target.sequence) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
+};
+const getParentBySequenceId = ({ sequences, targetsByKey, }) => {
+    const parentBySequenceId = new Map();
+    for (const sequence of sequences) {
+        parentBySequenceId.set(sequence.id, sequence.parent);
+    }
+    for (const target of targetsByKey.values()) {
+        const sequenceId = getSequenceId(target);
+        if (sequenceId !== null && !parentBySequenceId.has(sequenceId)) {
+            parentBySequenceId.set(sequenceId, target.sequence.parent);
+        }
+    }
+    return parentBySequenceId;
+};
+const isAncestorTarget = ({ ancestor, descendant, parentBySequenceId, }) => {
+    var _a;
+    var _b, _c;
+    const ancestorId = getSequenceId(ancestor);
+    if (ancestorId === null) {
+        return false;
+    }
+    let parentId = (_b = (_a = descendant.sequence) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
+    while (parentId !== null) {
+        if (parentId === ancestorId) {
+            return true;
+        }
+        parentId = (_c = parentBySequenceId.get(parentId)) !== null && _c !== void 0 ? _c : null;
+    }
+    return false;
+};
+const orderOutlineGroup = ({ outlines, parentBySequenceId, targetsByKey, }) => {
+    var _a;
+    var _b, _c, _d, _e;
+    const incomingEdges = new Map();
+    const outgoingEdges = new Map();
+    const outlinesByKey = new Map(outlines.map((outline) => [outline.key, outline]));
+    for (const outline of outlines) {
+        incomingEdges.set(outline.key, new Set());
+        outgoingEdges.set(outline.key, new Set());
+    }
+    const hasPath = ({ fromKey, seen, toKey, }) => {
+        var _a;
+        if (fromKey === toKey) {
+            return true;
+        }
+        if (seen.has(fromKey)) {
+            return false;
+        }
+        seen.add(fromKey);
+        for (const nextKey of (_a = outgoingEdges.get(fromKey)) !== null && _a !== void 0 ? _a : []) {
+            if (hasPath({ fromKey: nextKey, seen, toKey })) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const addEdge = (before, after, options) => {
+        if (before.key === after.key) {
+            return;
+        }
+        const incoming = incomingEdges.get(after.key);
+        const outgoing = outgoingEdges.get(before.key);
+        if (incoming === undefined || outgoing === undefined) {
+            throw new Error('Expected outline to be registered before adding edge');
+        }
+        if (outgoing.has(after.key)) {
+            return;
+        }
+        if (hasPath({ fromKey: after.key, seen: new Set(), toKey: before.key })) {
+            if (options === null || options === void 0 ? void 0 : options.skipIfCycle) {
+                return;
+            }
+            throw new Error('Could not determine a stable outline rendering order');
+        }
+        incoming.add(before.key);
+        outgoing.add(after.key);
+    };
+    const addAncestorConstraint = ({ ancestor, descendant, descendantContainsSelection, equivalentHitArea, }) => {
+        // Usually, children should be above parents so nested elements are directly
+        // selectable. If an unselected child has the same hit area as its parent, put
+        // it below the parent so the wrapper can be selected. Once the child or
+        // one of its properties is selected, keep it above the parent so it remains
+        // directly draggable.
+        if (equivalentHitArea && !descendantContainsSelection) {
+            addEdge(descendant, ancestor);
+        }
+        else {
+            addEdge(ancestor, descendant);
+        }
+    };
+    const outlineBySequenceId = new Map();
+    for (const outline of outlines) {
+        const sequenceId = getSequenceId(targetsByKey.get(outline.key));
+        if (sequenceId !== null) {
+            outlineBySequenceId.set(sequenceId, outline);
+        }
+    }
+    // Only constrain each outline against its nearest rendered ancestor. The
+    // resulting graph follows the sequence tree, so pairwise subpixel equivalence
+    // cannot introduce contradictory edges across three nested outlines.
+    for (const descendant of outlines) {
+        const descendantTarget = targetsByKey.get(descendant.key);
+        let parentId = (_b = (_a = descendantTarget === null || descendantTarget === void 0 ? void 0 : descendantTarget.sequence) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
+        while (parentId !== null) {
+            const ancestor = outlineBySequenceId.get(parentId);
+            if (ancestor !== undefined) {
+                addAncestorConstraint({
+                    ancestor,
+                    descendant,
+                    descendantContainsSelection: ((_c = descendantTarget === null || descendantTarget === void 0 ? void 0 : descendantTarget.selected) !== null && _c !== void 0 ? _c : false) ||
+                        ((_d = descendantTarget === null || descendantTarget === void 0 ? void 0 : descendantTarget.containsSelection) !== null && _d !== void 0 ? _d : false),
+                    equivalentHitArea: outlinesHaveEquivalentHitArea(ancestor, descendant),
+                });
+                break;
+            }
+            parentId = (_e = parentBySequenceId.get(parentId)) !== null && _e !== void 0 ? _e : null;
+        }
+    }
+    // For unrelated overlapping outlines, put broader hit targets below
+    // smaller ones so a large selected sequence cannot swallow clicks on
+    // a more specific element in the same canvas area.
+    for (let i = 0; i < outlines.length; i++) {
+        for (let j = i + 1; j < outlines.length; j++) {
+            const a = outlines[i];
+            const b = outlines[j];
+            const aTarget = targetsByKey.get(a.key);
+            const bTarget = targetsByKey.get(b.key);
+            if (aTarget === undefined || bTarget === undefined) {
+                continue;
+            }
+            const aAncestorOfB = isAncestorTarget({
+                ancestor: aTarget,
+                descendant: bTarget,
+                parentBySequenceId,
+            });
+            const bAncestorOfA = isAncestorTarget({
+                ancestor: bTarget,
+                descendant: aTarget,
+                parentBySequenceId,
+            });
+            if (aAncestorOfB || bAncestorOfA || !outlineBoundsOverlap(a, b)) {
+                continue;
+            }
+            const aArea = getOutlineHitArea(a);
+            const bArea = getOutlineHitArea(b);
+            if (Math.abs(aArea - bArea) <= outlineAreaEqualityTolerance) {
+                continue;
+            }
+            if (aArea > bArea) {
+                addEdge(a, b, { skipIfCycle: true });
+            }
+            else {
+                addEdge(b, a, { skipIfCycle: true });
+            }
+        }
+    }
+    const emitted = new Set();
+    const visiting = new Set();
+    const ordered = [];
+    const visit = (outline) => {
+        var _a;
+        if (emitted.has(outline.key)) {
+            return;
+        }
+        if (visiting.has(outline.key)) {
+            throw new Error('Could not determine a stable outline rendering order');
+        }
+        visiting.add(outline.key);
+        for (const dependencyKey of (_a = incomingEdges.get(outline.key)) !== null && _a !== void 0 ? _a : []) {
+            const dependency = outlinesByKey.get(dependencyKey);
+            if (dependency === undefined) {
+                throw new Error('Expected outline dependency to exist');
+            }
+            visit(dependency);
+        }
+        visiting.delete(outline.key);
+        emitted.add(outline.key);
+        ordered.push(outline);
+    };
+    for (const outline of outlines) {
+        visit(outline);
+    }
+    return ordered;
+};
+const orderOutlinesForRendering = ({ outlines, sequences, targetsByKey, }) => {
+    const parentBySequenceId = getParentBySequenceId({ sequences, targetsByKey });
+    return orderOutlineGroup({
+        outlines,
+        parentBySequenceId,
+        targetsByKey,
+    });
+};
+exports.orderOutlinesForRendering = orderOutlinesForRendering;

package/dist/components/selected-outline-types.d.ts

@@ -1,18 +1,20 @@
 import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-import type { SelectedOutlineUvHandle } from './selected-outline-uv';
 import type { TimelineSelection } from './Timeline/TimelineSelection';
 export type SelectedOutlineContextMenuOpenResult = false | readonly ComboboxValue[];
 export type SelectedOutlineContextMenuOpenHandler = () => SelectedOutlineContextMenuOpenResult | Promise<SelectedOutlineContextMenuOpenResult>;
-export type SelectedOutlineTarget = {
+export type SelectedOutlineLayoutTarget = {
     readonly key: string;
-    readonly canCrop: boolean;
     readonly containsSelection: boolean;
-    readonly effectDrop: SelectedOutlineEffectDropTarget | null;
+    readonly keyframeDisplayOffset: number;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly ref: React.RefObject<Element | null>;
     readonly selected: boolean;
+    readonly selectedForCrop: boolean;
+    readonly selectedForTransformOrigin: boolean;
+    readonly selectedForUvHandles: boolean;
+    readonly showSelectedOutline: boolean;
     readonly selection: TimelineSelection;
     readonly sequence: TSequence;
     readonly crop: {
@@ -21,12 +23,14 @@ export type SelectedOutlineTarget = {
         readonly top: number;
         readonly bottom: number;
     };
+};
+export type SelectedOutlineTarget = SelectedOutlineLayoutTarget & {
+    readonly canCrop: boolean;
     readonly cropDrag: SelectedOutlineCropDragTarget | null;
     readonly drag: SelectedOutlineDragTarget | null;
     readonly scaleDrag: SelectedOutlineScaleDragTarget | null;
     readonly rotationDrag: SelectedOutlineRotationDragTarget | null;
     readonly transformOriginDrag: SelectedOutlineTransformOriginDragTarget | null;
-    readonly uvHandles: readonly SelectedOutlineUvHandle[];
 };
 export declare const cropFieldKeys: {
     readonly left: "cropLeft";
@@ -62,11 +66,6 @@ export type SelectedOutlineCropDragTarget = {
         readonly value: string;
     } | null;
 };
-export type SelectedOutlineEffectDropTarget = {
-    readonly clientId: string;
-    readonly fileName: string;
-    readonly nodePath: SequencePropsSubscriptionKey;
-};
 export type SelectedOutlineDragTarget = {
     readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly clientId: string;

package/dist/components/svg-point-to-client-point.d.ts

@@ -0,0 +1,2 @@
+import type { OutlinePoint } from './selected-outline-geometry';
+export declare const svgPointToClientPoint: (point: OutlinePoint, rect: DOMRect) => OutlinePoint;

package/dist/components/svg-point-to-client-point.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.svgPointToClientPoint = void 0;
+const svgPointToClientPoint = (point, rect) => {
+    return {
+        x: point.x + rect.left,
+        y: point.y + rect.top,
+    };
+};
+exports.svgPointToClientPoint = svgPointToClientPoint;

package/dist/components/use-auto-save-config.d.ts

@@ -0,0 +1,8 @@
+import type { ConfigUpdate } from '@remotion/studio-shared';
+export declare const useAutoSaveConfig: ({ enabled, onError, ready, syncRevision, updates, }: {
+    readonly enabled: boolean;
+    readonly onError: (error: string | null) => void;
+    readonly ready: boolean;
+    readonly syncRevision: number;
+    readonly updates: ConfigUpdate[];
+}) => void;

package/dist/components/use-auto-save-config.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoSaveConfig = void 0;
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const call_api_1 = require("./call-api");
+const useAutoSaveConfig = ({ enabled, onError, ready, syncRevision, updates, }) => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const serializedUpdates = (0, react_1.useMemo)(() => JSON.stringify(updates), [updates]);
+    const initialUpdates = (0, react_1.useRef)(null);
+    const lastQueuedUpdates = (0, react_1.useRef)(null);
+    const lastSyncRevision = (0, react_1.useRef)(null);
+    const syncGeneration = (0, react_1.useRef)(0);
+    const saveQueue = (0, react_1.useRef)(Promise.resolve());
+    const mounted = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!ready) {
+            return;
+        }
+        if (initialUpdates.current === null ||
+            lastSyncRevision.current !== syncRevision) {
+            initialUpdates.current = serializedUpdates;
+            lastQueuedUpdates.current = serializedUpdates;
+            lastSyncRevision.current = syncRevision;
+            syncGeneration.current++;
+            return;
+        }
+        if (!enabled ||
+            previewServerState.type !== 'connected' ||
+            lastQueuedUpdates.current === serializedUpdates) {
+            return;
+        }
+        lastQueuedUpdates.current = serializedUpdates;
+        onError(null);
+        const generation = syncGeneration.current;
+        saveQueue.current = saveQueue.current.then(async () => {
+            if (generation !== syncGeneration.current) {
+                return;
+            }
+            try {
+                const response = await (0, call_api_1.callApi)('/api/update-config', {
+                    clientId: previewServerState.clientId,
+                    updates,
+                });
+                if (!response.success &&
+                    mounted.current &&
+                    lastQueuedUpdates.current === serializedUpdates) {
+                    onError(response.reason);
+                }
+            }
+            catch (err) {
+                if (mounted.current &&
+                    lastQueuedUpdates.current === serializedUpdates) {
+                    onError(err.message);
+                }
+            }
+        });
+    }, [
+        enabled,
+        onError,
+        previewServerState,
+        ready,
+        serializedUpdates,
+        syncRevision,
+        updates,
+    ]);
+};
+exports.useAutoSaveConfig = useAutoSaveConfig;

package/dist/components/use-default-editor-info.d.ts

@@ -2,3 +2,4 @@ import type { EditorPickerId, GetDefaultEditorInfoResponse } from '@remotion/stu
 export declare const canUseEditorPicker: (previewServerConnected: boolean) => boolean;
 export declare const getPreferredEditorId: (editorInfo: GetDefaultEditorInfoResponse | null) => EditorPickerId | null;
 export declare const useDefaultEditorInfo: (enabled: boolean) => GetDefaultEditorInfoResponse | null;
+export declare const useDefaultCodingAgentInfo: (enabled: boolean) => import("@remotion/studio-shared").GetDefaultCodingAgentInfoResponse | null;

package/dist/components/use-default-editor-info.js

@@ -1,17 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDefaultEditorInfo = exports.getPreferredEditorId = exports.canUseEditorPicker = void 0;
-const react_1 = require("react");
+exports.useDefaultCodingAgentInfo = exports.useDefaultEditorInfo = exports.getPreferredEditorId = exports.canUseEditorPicker = void 0;
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
-const call_api_1 = require("./call-api");
-let editorInfoPromise = null;
-const loadDefaultEditorInfo = () => {
-    editorInfoPromise !== null && editorInfoPromise !== void 0 ? editorInfoPromise : (editorInfoPromise = (0, call_api_1.callApi)('/api/default-editor-info', {}).catch((err) => {
-        editorInfoPromise = null;
-        throw err;
-    }));
-    return editorInfoPromise;
-};
+const SettingsContext_1 = require("./SettingsContext");
 const canUseEditorPicker = (previewServerConnected) => {
     return (previewServerConnected &&
         !window.remotion_isReadOnlyStudio &&
@@ -21,27 +12,16 @@ exports.canUseEditorPicker = canUseEditorPicker;
 const getPreferredEditorId = (editorInfo) => {
     var _a;
     var _b;
-    return ((_b = (_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.name === window.remotion_editorName)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
+    return ((_b = (_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.nameWithType === window.remotion_editorName)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
 };
 exports.getPreferredEditorId = getPreferredEditorId;
 const useDefaultEditorInfo = (enabled) => {
-    const [editorInfo, setEditorInfo] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (!enabled) {
-            return;
-        }
-        let cancelled = false;
-        loadDefaultEditorInfo()
-            .then((response) => {
-            if (!cancelled) {
-                setEditorInfo(response);
-            }
-        })
-            .catch(() => undefined);
-        return () => {
-            cancelled = true;
-        };
-    }, [enabled]);
-    return editorInfo;
+    const { editorInfo } = (0, SettingsContext_1.useSettings)();
+    return enabled ? editorInfo : null;
 };
 exports.useDefaultEditorInfo = useDefaultEditorInfo;
+const useDefaultCodingAgentInfo = (enabled) => {
+    const { codingAgentInfo } = (0, SettingsContext_1.useSettings)();
+    return enabled ? codingAgentInfo : null;
+};
+exports.useDefaultCodingAgentInfo = useDefaultCodingAgentInfo;