@remotion/studio 4.0.506 → 4.0.508

package/dist/esm/renderEntry.mjs

@@ -4,7 +4,7 @@ import {
   WHITE,
   __require,
   __toESM
-} from "./chunk-jefhcs5z.js";
+} from "./chunk-fgedsvhb.js";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -212,7 +212,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-b49ec3nz.js").then(({ StudioInternals }) => {
+    import("./chunk-zpn4m49r.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/are-sequence-node-path-infos-equal.d.ts

@@ -0,0 +1,2 @@
+import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
+export declare const areSequenceNodePathInfosEqual: (first: SequenceNodePathInfo, second: SequenceNodePathInfo) => boolean;

package/dist/helpers/are-sequence-node-path-infos-equal.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.areSequenceNodePathInfosEqual = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const areSequenceNodePathInfosEqual = (first, second) => {
+    if (first.index !== second.index ||
+        first.numberOfSequencesWithThisNodePath !==
+            second.numberOfSequencesWithThisNodePath ||
+        first.supportsEffects !== second.supportsEffects ||
+        (0, studio_shared_1.stringifySequenceSubscriptionKey)(first.sequenceSubscriptionKey) !==
+            (0, studio_shared_1.stringifySequenceSubscriptionKey)(second.sequenceSubscriptionKey) ||
+        first.auxiliaryKeys.length !== second.auxiliaryKeys.length ||
+        !first.auxiliaryKeys.every((key, index) => key === second.auxiliaryKeys[index])) {
+        return false;
+    }
+    const firstVideoConfig = first.sequenceSubscriptionKey.videoConfigValues;
+    const secondVideoConfig = second.sequenceSubscriptionKey.videoConfigValues;
+    return (firstVideoConfig === secondVideoConfig ||
+        (firstVideoConfig !== null &&
+            secondVideoConfig !== null &&
+            firstVideoConfig.durationInFrames ===
+                secondVideoConfig.durationInFrames &&
+            firstVideoConfig.fps === secondVideoConfig.fps &&
+            firstVideoConfig.height === secondVideoConfig.height &&
+            firstVideoConfig.width === secondVideoConfig.width));
+};
+exports.areSequenceNodePathInfosEqual = areSequenceNodePathInfosEqual;

package/dist/helpers/calculate-timeline.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateTimeline = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
 const get_connected_compositions_1 = require("./get-connected-compositions");
 const get_sequence_visible_range_1 = require("./get-sequence-visible-range");
 const get_timeline_nestedness_1 = require("./get-timeline-nestedness");
 const get_timeline_sequence_sort_key_1 = require("./get-timeline-sequence-sort-key");
 const sort_by_nonce_history_1 = require("./sort-by-nonce-history");
+const timeline_node_path_key_1 = require("./timeline-node-path-key");
 const getInheritedLoopDisplay = (sequence, sequences) => {
     if (sequence.loopDisplay) {
         return sequence.loopDisplay;
@@ -113,7 +113,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, compositions = [
         if (track.nodePathInfo === null) {
             return track;
         }
-        const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(track.nodePathInfo.sequenceSubscriptionKey);
+        const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
         const index = (_a = nodePathIndexCounters.get(key)) !== null && _a !== void 0 ? _a : 0;
         nodePathIndexCounters.set(key, index + 1);
         return {
@@ -132,7 +132,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, compositions = [
         if (track.nodePathInfo === null) {
             return track;
         }
-        const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(track.nodePathInfo.sequenceSubscriptionKey);
+        const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
         return {
             ...track,
             nodePathInfo: {

package/dist/helpers/client-id.js

@@ -71,6 +71,7 @@ const PreviewServerConnection = ({ children }) => {
         type: 'init',
     });
     const [configFileChangeRevision, setConfigFileChangeRevision] = react_1.default.useState(0);
+    const clientId = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const handleEvent = (newEvent) => {
             var _a, _b;
@@ -83,12 +84,18 @@ const PreviewServerConnection = ({ children }) => {
                 window.remotion_studioConfig = newEvent.studioRuntimeConfig;
                 window.remotion_editorName = newEvent.editorName;
                 setConfigFileChangeRevision((revision) => revision + 1);
-                (0, NotificationCenter_1.showNotification)((0, studio_shared_1.getConfigFileChangeMessage)(newEvent.changeType), 4000);
+                const isOwnRuntimeConfigChange = newEvent.changeType === 'runtime' &&
+                    newEvent.originatorClientId !== null &&
+                    newEvent.originatorClientId === clientId.current;
+                if (!isOwnRuntimeConfigChange) {
+                    (0, NotificationCenter_1.showNotification)((0, studio_shared_1.getConfigFileChangeMessage)(newEvent.changeType), 4000);
+                }
             }
             if (newEvent.type === 'config-file-reload-failed') {
                 (0, NotificationCenter_1.showNotification)(newEvent.errorMessage, 4000);
             }
             if (newEvent.type === 'init') {
+                clientId.current = newEvent.clientId;
                 latestUndoRedoEvent.current = {
                     type: 'undo-redo-stack-changed',
                     undoFile: newEvent.undoFile,

package/dist/helpers/format-file-location.d.ts

@@ -6,7 +6,7 @@ export declare const formatFileLocation: ({ location, root, }: {
     readonly location: FileLocation | null;
     readonly root: string;
 }) => string | null;
-export declare const formatLocationForAgents: ({ name, location, root, }: {
+export declare const formatContextForAgents: ({ name, location, root, }: {
     readonly name: string | null;
     readonly location: FileLocation | null;
     readonly root: string;

package/dist/helpers/format-file-location.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatLocationForAgents = exports.formatFileLocation = void 0;
+exports.formatContextForAgents = exports.formatFileLocation = void 0;
 const normalizeSlashes = (path) => path.replace(/\\/g, '/');
 const stripTrailingSlashes = (path) => path.replace(/\/+$/, '');
 const stripLeadingDotSlash = (path) => path.replace(/^\.\/+/, '');
@@ -25,11 +25,11 @@ const formatFileLocation = ({ location, root, }) => {
     return `${stripLeadingDotSlash(relativeSource)}:${location.line}`;
 };
 exports.formatFileLocation = formatFileLocation;
-const formatLocationForAgents = ({ name, location, root, }) => {
+const formatContextForAgents = ({ name, location, root, }) => {
     const fileLocation = (0, exports.formatFileLocation)({ location, root });
     if (!name || !fileLocation) {
         return null;
     }
     return `${name} in ${fileLocation}`;
 };
-exports.formatLocationForAgents = formatLocationForAgents;
+exports.formatContextForAgents = formatContextForAgents;

package/dist/helpers/get-box-quads-polyfill-internals.js

@@ -1658,10 +1658,18 @@ function getElementCombinedTransform(element, iframes) {
         m.multiplySelf(new DOMMatrix('translate(' + tr.replaceAll(' ', ',') + ')'));
     }
     if (hasRotate) {
-        m.multiplySelf(new DOMMatrix('rotate(' + s.rotate.replaceAll(' ', ',') + ')'));
+        const rotateParts = s.rotate.trim().split(/\s+/);
+        const rotateTransform = rotateParts.length === 1
+            ? `rotate(${rotateParts[0]})`
+            : rotateParts.length === 2 && /^[xyz]$/i.test(rotateParts[0])
+                ? `rotate${rotateParts[0].toUpperCase()}(${rotateParts[1]})`
+                : `rotate3d(${rotateParts.join(',')})`;
+        m.multiplySelf(new DOMMatrix(rotateTransform));
     }
     if (hasScale) {
-        m.multiplySelf(new DOMMatrix('scale(' + s.scale.replaceAll(' ', ',') + ')'));
+        const scaleParts = s.scale.trim().split(/\s+/);
+        const scaleFunction = scaleParts.length === 3 ? 'scale3d' : 'scale';
+        m.multiplySelf(new DOMMatrix(`${scaleFunction}(${scaleParts.join(',')})`));
     }
     if (hasOffsetPath) {
         m.multiplySelf(computeOffsetTransformMatrix(element));

package/dist/helpers/migrate-expanded-tracks-for-subscription-key.js

@@ -11,12 +11,12 @@ const migrateExpandedTracksForSubscriptionKey = (prev, oldKey, newKey) => {
     let changed = false;
     const next = { ...prev };
     for (const [key, value] of Object.entries(prev)) {
-        if (value !== false || !key.startsWith(oldPrefix + '.')) {
+        if (!value || !key.startsWith(oldPrefix + '.')) {
             continue;
         }
         const migratedKey = newPrefix + key.slice(oldPrefix.length);
-        if (next[migratedKey] === undefined) {
-            next[migratedKey] = false;
+        if (!next[migratedKey]) {
+            next[migratedKey] = true;
         }
         delete next[key];
         changed = true;

package/dist/helpers/open-in-editor.d.ts

@@ -1,6 +1,9 @@
-import type { CompositionComponentInfoResponse, EditorPickerId, SymbolicatedStackFrame } from '@remotion/studio-shared';
+import type { TerminalId } from '@remotion/studio-shared';
+import type { CompositionComponentInfoResponse, EditorPickerId, OpenInTerminalResponse, SymbolicatedStackFrame } from '@remotion/studio-shared';
 import type { CodePosition, OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 export declare const openInEditor: (stack: SymbolicatedStackFrame, editorId: EditorPickerId | null) => Promise<import("@remotion/studio-shared").OpenInEditorResponse>;
+export declare const openInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", prompt: string | null) => Promise<import("@remotion/studio-shared").OpenInCodingAgentResponse>;
+export declare const openInTerminal: (terminalId: TerminalId, directory: string) => Promise<OpenInTerminalResponse>;
 export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition, editorId: EditorPickerId | null) => Promise<void>;
 export declare const openOriginalPositionInEditorAtProperty: ({ originalPosition, property, }: {
     originalPosition: CodePosition;

package/dist/helpers/open-in-editor.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
+exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.openOriginalPositionInEditor = exports.openInTerminal = exports.openInCodingAgent = exports.openInEditor = void 0;
 const react_1 = require("react");
 const call_api_1 = require("../components/call-api");
 const browser_studio_operations_1 = require("./browser-studio-operations");
@@ -18,6 +18,14 @@ const openInEditor = (stack, editorId) => {
     });
 };
 exports.openInEditor = openInEditor;
+const openInCodingAgent = (codingAgentId, prompt) => {
+    return (0, call_api_1.callApi)('/api/open-in-coding-agent', { codingAgentId, prompt });
+};
+exports.openInCodingAgent = openInCodingAgent;
+const openInTerminal = (terminalId, directory) => {
+    return (0, call_api_1.callApi)('/api/open-in-terminal', { directory, terminalId });
+};
+exports.openInTerminal = openInTerminal;
 const openOriginalPositionInEditor = async (originalPosition, editorId) => {
     const response = await (0, exports.openInEditor)({
         originalColumnNumber: originalPosition.column,

package/dist/helpers/preview-server-events.js

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToPreviewServerConnectionState = exports.subscribeToPreviewServerEvents = exports.ensurePreviewServerEventSource = void 0;
 const browser_studio_operations_1 = require("./browser-studio-operations");
+const sequence_node_path_mutations_1 = require("./sequence-node-path-mutations");
 let source = null;
 let unsubscribeFromBrowserStudio = null;
 let browserStudioReadyListenerInstalled = false;
@@ -18,6 +19,9 @@ const notifyConnectionState = () => {
     }
 };
 const dispatch = (event) => {
+    if (event.type === 'sequence-node-paths-remapped') {
+        (0, sequence_node_path_mutations_1.queueSequenceNodePathMutation)(event.mutation);
+    }
     if (event.type === 'init') {
         lastInitEvent = event;
         connectionState = {

package/dist/helpers/sequence-node-path-mutations.d.ts

@@ -0,0 +1,4 @@
+import type { SequenceNodePathMutation } from '@remotion/studio-shared';
+export declare const queueSequenceNodePathMutation: (mutation: SequenceNodePathMutation) => void;
+export declare const queueSequenceNodePathMutationFromApiResponse: (response: unknown) => void;
+export declare const takePendingSequenceNodePathMutations: () => SequenceNodePathMutation[];

package/dist/helpers/sequence-node-path-mutations.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.takePendingSequenceNodePathMutations = exports.queueSequenceNodePathMutationFromApiResponse = exports.queueSequenceNodePathMutation = void 0;
+const pendingMutations = [];
+const seenMutationIds = new Set();
+const queueSequenceNodePathMutation = (mutation) => {
+    if (seenMutationIds.has(mutation.mutationId)) {
+        return;
+    }
+    seenMutationIds.add(mutation.mutationId);
+    pendingMutations.push(mutation);
+};
+exports.queueSequenceNodePathMutation = queueSequenceNodePathMutation;
+const queueSequenceNodePathMutationFromApiResponse = (response) => {
+    if (typeof response !== 'object' ||
+        response === null ||
+        !('nodePathMutation' in response)) {
+        return;
+    }
+    const { nodePathMutation } = response;
+    if (typeof nodePathMutation !== 'object' ||
+        nodePathMutation === null ||
+        !('mutationId' in nodePathMutation) ||
+        typeof nodePathMutation.mutationId !== 'string') {
+        return;
+    }
+    (0, exports.queueSequenceNodePathMutation)(nodePathMutation);
+};
+exports.queueSequenceNodePathMutationFromApiResponse = queueSequenceNodePathMutationFromApiResponse;
+const takePendingSequenceNodePathMutations = () => pendingMutations.splice(0);
+exports.takePendingSequenceNodePathMutations = takePendingSequenceNodePathMutations;

package/dist/helpers/studio-runtime-config.js

@@ -6,9 +6,12 @@ exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
 const defaultStudioRuntimeConfig = {
     askAIEnabled: false,
     bufferStateDelayInMilliseconds: null,
+    defaultCodingAgent: null,
+    defaultEditor: null,
     interactivityEnabled: true,
     keyboardShortcutsEnabled: true,
     maxTimelineTracks: null,
+    publicLicenseKey: null,
 };
 const getStudioRuntimeConfig = () => {
     var _a;

package/dist/helpers/timeline-node-path-key.d.ts

@@ -1,2 +1,4 @@
+import type { SequencePropsSubscriptionKey } from 'remotion';
 import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
+export declare const timelineSequenceNodePathToKey: (key: SequencePropsSubscriptionKey) => string;
 export declare const timelineNodePathInfoToKey: (info: SequenceNodePathInfo) => string;

package/dist/helpers/timeline-node-path-key.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timelineNodePathInfoToKey = void 0;
+exports.timelineNodePathInfoToKey = exports.timelineSequenceNodePathToKey = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const timelineSequenceNodePathToKey = (key) => `${key.absolutePath}:${JSON.stringify(key.nodePath)}`;
+exports.timelineSequenceNodePathToKey = timelineSequenceNodePathToKey;
 const timelineNodePathInfoToKey = (info) => [
     (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
     info.auxiliaryKeys.join('.'),

package/dist/helpers/use-asset-drag-events.d.ts

@@ -1,6 +1,7 @@
-export declare const isFileDragEvent: (event: {
+export declare const isAssetUploadDragEvent: (event: {
     readonly dataTransfer: DataTransfer;
 }) => boolean;
+export declare const getRenderOutputDragData: (dataTransfer: DataTransfer) => import("@remotion/studio-protocol").RenderOutputDragData | null;
 declare function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation }: {
     name: string | null;
     parentFolder: string | null;

package/dist/helpers/use-asset-drag-events.js

@@ -1,12 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isFileDragEvent = void 0;
+exports.getRenderOutputDragData = exports.isAssetUploadDragEvent = void 0;
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
-const isFileDragEvent = (event) => {
-    return Array.from(event.dataTransfer.types).includes('Files');
+const isAssetUploadDragEvent = (event) => {
+    var _a;
+    return (Array.from(event.dataTransfer.types).includes('Files') ||
+        ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) === 'render-output');
 };
-exports.isFileDragEvent = isFileDragEvent;
+exports.isAssetUploadDragEvent = isAssetUploadDragEvent;
+const getRenderOutputDragData = (dataTransfer) => {
+    const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(dataTransfer);
+    return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'render-output' ? parsed.data : null;
+};
+exports.getRenderOutputDragData = getRenderOutputDragData;
 function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation, }) {
     const dragDepthRef = (0, react_1.useRef)(0);
     const combinedParents = (0, react_1.useMemo)(() => {
@@ -16,7 +24,7 @@ function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation,
         return dropLocation === combinedParents;
     }, [combinedParents, dropLocation]);
     const onDragEnter = (0, react_1.useCallback)((event) => {
-        if (!(0, exports.isFileDragEvent)(event)) {
+        if (!(0, exports.isAssetUploadDragEvent)(event)) {
             return;
         }
         if (dragDepthRef.current === 0) {
@@ -27,7 +35,7 @@ function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation,
         dragDepthRef.current++;
     }, [combinedParents, dragDepthRef, setDropLocation]);
     const onDragLeave = (0, react_1.useCallback)((event) => {
-        if (!(0, exports.isFileDragEvent)(event)) {
+        if (!(0, exports.isAssetUploadDragEvent)(event)) {
             return;
         }
         dragDepthRef.current--;

package/dist/helpers/use-menu-structure.js

@@ -1045,7 +1045,7 @@ const itemToSearchResult = (item, setSelectedModal, prefixes) => {
     if (item.subMenu) {
         return item.subMenu.items
             .map((subItem) => {
-            if (subItem.type === 'divider') {
+            if (subItem.type !== 'item') {
                 return null;
             }
             return itemToSearchResult(subItem, setSelectedModal, [
@@ -1072,7 +1072,7 @@ const makeSearchResults = (actions, setSelectedModal) => {
     const items = actions
         .map((menu) => {
         return menu.items.map((item) => {
-            if (item.type === 'divider') {
+            if (item.type !== 'item') {
                 return null;
             }
             return itemToSearchResult(item, setSelectedModal, []);

package/dist/helpers/use-runtime-values.d.ts

@@ -1,11 +1,9 @@
 import type { SequenceRegistrationControls } from 'remotion';
-type RuntimeValueSelectorResult = string | number | boolean | bigint | symbol | null | undefined;
 export declare const useRuntimeValues: (controls: SequenceRegistrationControls | null) => Readonly<Record<string, unknown>>;
 export declare const useRuntimeValue: (controls: SequenceRegistrationControls | null, key: string) => unknown;
-export declare const useRuntimeValueSelector: <T extends RuntimeValueSelectorResult>({ controls, selector, isEqual, }: {
+export declare const useRuntimeValueSelector: <T>({ controls, selector, isEqual, }: {
     controls: SequenceRegistrationControls | null;
     selector: (values: Readonly<Record<string, unknown>>) => T;
     isEqual?: ((first: T, second: T) => boolean) | undefined;
 }) => T;
 export declare const useRuntimeValueSnapshots: (controls: readonly SequenceRegistrationControls[]) => readonly Readonly<Record<string, unknown>>[];
-export {};

package/dist/icons/cube.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const CubeIcon: ({ color, ...props }: SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/cube.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CubeIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CubeIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M234.5 5.7c13.6-7.6 29.3-7.6 42.9 0l192 107.3c14.2 7.9 22.9 22.9 22.9 39.2v207.6c0 16.3-8.8 31.2-22.9 39.2l-192 107.3c-13.6 7.6-29.3 7.6-42.9 0l-192-107.3c-14.2-7.9-22.9-22.9-22.9-39.2V152.2c0-16.3 8.8-31.2 22.9-39.2l192-107.3zM256 50.4L82.2 147.5 256 244.7l173.8-97.2L256 50.4zm-192 137v172.4l168 93.9V281.3L64 187.4zm216 266.3l168-93.9V187.4l-168 93.9v172.4z" }) }));
+exports.CubeIcon = CubeIcon;

package/dist/icons/finder.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const FinderIcon: React.FC<{
+    readonly size: number;
+}>;

package/dist/icons/finder.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FinderIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FinderIcon = ({ size }) => {
+    return (jsx_runtime_1.jsx("img", { alt: "", "aria-hidden": true, "data-file-manager-icon": "finder", draggable: false, src: "/api/app-icon/file-manager/finder.png", style: { flexShrink: 0, height: size, width: size } }));
+};
+exports.FinderIcon = FinderIcon;

package/dist/icons/terminal.d.ts

@@ -0,0 +1,6 @@
+import type { TerminalId } from '@remotion/studio-shared';
+import React from 'react';
+export declare const TerminalIcon: React.FC<{
+    readonly terminalId: TerminalId;
+    readonly size: number;
+}>;

package/dist/icons/terminal.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TerminalIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const apps_1 = require("./apps");
+// Brand shapes adapted from Simple Icons (CC0 1.0):
+// https://github.com/simple-icons/simple-icons/tree/34c22501f9ac9f22b12f825677ccbab1fb22e14b/icons
+const iconStyle = (size) => ({
+    flexShrink: 0,
+    height: size,
+    width: size,
+});
+const simpleTerminalIcons = {
+    warp: {
+        color: '#01A4FF',
+        path: 'M12.035 2.723h9.253A2.712 2.712 0 0 1 24 5.435v10.529a2.712 2.712 0 0 1-2.712 2.713H8.047Zm-1.681 2.6L6.766 19.677h5.598l-.399 1.6H2.712A2.712 2.712 0 0 1 0 18.565V8.036a2.712 2.712 0 0 1 2.712-2.712Z',
+    },
+    wezterm: {
+        color: '#4E49EE',
+        path: 'M3.27 8.524c0-.623.62-1.007 2.123-1.007l-.5 2.757c-.931-.623-1.624-1.199-1.624-1.75zm4.008 6.807c0 .647-.644 1.079-2.123 1.15l.524-2.924c.931.624 1.6 1.175 1.6 1.774zm-2.625 5.992.454-2.708c3.603-.336 5.01-1.798 5.01-3.404 0-1.653-2.004-2.948-3.841-4.074l.668-3.548c.764.072 1.67.216 2.744.432l.31-2.469c-.81-.12-1.575-.168-2.29-.216L8.257 2.7l-2.363-.024-.453 2.684C1.838 5.648.43 7.158.43 8.764c0 1.63 2.004 2.876 3.841 3.954l-.668 3.716c-.859-.048-1.908-.192-3.125-.408L0 18.495c1.026.12 1.98.192 2.84.216l-.525 2.588zm15.553-1.894h2.673c.334-2.804.81-8.46 1.121-14.86h-2.553c-.071 1.51-.334 10.498-.43 11.241h-.071c-.644-2.42-1.169-4.386-1.813-6.782h-1.456c-.62 2.396-1.05 4.194-1.694 6.782h-.096c-.071-.743-.477-9.73-.525-11.24h-2.648c.31 6.399.763 12.055 1.097 14.86h2.625l1.838-7.12z',
+    },
+    alacritty: {
+        color: '#F46D01',
+        path: 'm10.065 0-8.57 21.269h3.595l6.91-16.244 6.91 16.244h3.594l-8.57-21.269zm1.935 9.935c-.76666 1.8547-1.5334 3.7094-2.298 5.565 1.475 4.54 1.475 4.54 2.298 8.5.823-3.96.823-3.96 2.297-8.5-.76637-1.8547-1.5315-3.7099-2.297-5.565z',
+    },
+    'gnome-terminal': {
+        color: colors_1.CURRENT_COLOR,
+        path: 'M1.846 0A1.841 1.841 0 000 1.846v18.463c0 1.022.823 1.845 1.846 1.845h20.308A1.841 1.841 0 0024 20.31V1.846A1.841 1.841 0 0022.154 0H1.846zm0 .924h20.308c.512 0 .922.41.922.922v18.463c0 .511-.41.921-.922.921H1.846a.919.919 0 01-.922-.921V1.846c0-.512.41-.922.922-.922zm0 .922v18.463h20.308V1.846H1.846zm1.845 2.14l3.235 1.758v.836L3.69 8.477V7.385l2.243-1.207v-.033L3.69 5.076v-1.09zM7.846 9.23h3.693v.924H7.846V9.23zM0 21.736v.418C0 23.177.823 24 1.846 24h20.308A1.841 1.841 0 0024 22.154v-.418a2.334 2.334 0 01-1.846.918H1.846A2.334 2.334 0 010 21.736Z',
+    },
+};
+const TerminalIcon = ({ terminalId, size }) => {
+    const hasArtwork = terminalId === 'terminal' ||
+        terminalId === 'iterm2' ||
+        terminalId === 'ghostty' ||
+        terminalId === 'windows-terminal';
+    if (hasArtwork) {
+        return (jsx_runtime_1.jsx("img", { alt: "", "aria-hidden": true, "data-terminal-icon": terminalId, draggable: false, src: `/api/app-icon/terminal/${terminalId}.png`, style: iconStyle(size) }));
+    }
+    const icon = simpleTerminalIcons[terminalId];
+    if (!icon) {
+        return (jsx_runtime_1.jsx(apps_1.AppsIcon, { "aria-hidden": true, "data-terminal-icon": terminalId, height: size, width: size }));
+    }
+    return (jsx_runtime_1.jsx("svg", { "aria-hidden": true, "data-terminal-icon": terminalId, style: iconStyle(size), viewBox: "0 0 24 24", children: jsx_runtime_1.jsx("path", { d: icon.path, fill: icon.color }) }));
+};
+exports.TerminalIcon = TerminalIcon;

package/dist/index.d.ts

@@ -16,6 +16,21 @@ export { watchPublicFolder } from './api/watch-public-folder';
 export { watchStaticFile } from './api/watch-static-file';
 export { writeStaticFile } from './api/write-static-file';
 export declare const StudioInternals: {
+    CodingAgentIcon: import("react").FC<{
+        readonly codingAgentId: "claude-code" | "codex" | "copilot" | "cursor" | null;
+        readonly size: number;
+    }>;
+    EditorIcon: import("react").FC<{
+        readonly editorId: import("@remotion/studio-shared").EditorPickerId | null;
+        readonly size: number | null;
+    }>;
+    FinderIcon: import("react").FC<{
+        readonly size: number;
+    }>;
+    TerminalIcon: import("react").FC<{
+        readonly terminalId: import("@remotion/studio-shared").TerminalId;
+        readonly size: number;
+    }>;
     createComposition: <Schema extends import("remotion").AnyZodObject, Props extends Record<string, unknown>>({ ...other }: import("remotion").CompositionProps<Schema, Props>) => () => import("react/jsx-runtime").JSX.Element;
     createStill: <Schema extends import("remotion").AnyZodObject, Props extends Record<string, unknown>>({ ...other }: import("remotion").StillProps<Schema, Props>) => () => import("react/jsx-runtime").JSX.Element;
 };

package/dist/index.js

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StudioInternals = exports.writeStaticFile = exports.watchStaticFile = exports.watchPublicFolder = exports.visualControl = exports.updateDefaultProps = exports.toggle = exports.seek = exports.saveDefaultProps = exports.restartStudio = exports.reevaluateComposition = exports.play = exports.pause = exports.goToComposition = exports.getStaticFiles = exports.focusDefaultPropsPath = exports.deleteStaticFile = void 0;
 const create_composition_1 = require("./api/create-composition");
+const CodingAgentIcon_1 = require("./components/CodingAgentIcon");
+const editor_1 = require("./icons/editor");
+const finder_1 = require("./icons/finder");
+const terminal_1 = require("./icons/terminal");
 const delete_static_file_1 = require("./api/delete-static-file");
 Object.defineProperty(exports, "deleteStaticFile", { enumerable: true, get: function () { return delete_static_file_1.deleteStaticFile; } });
 const focus_default_props_path_1 = require("./api/focus-default-props-path");
@@ -35,6 +39,10 @@ Object.defineProperty(exports, "watchStaticFile", { enumerable: true, get: funct
 const write_static_file_1 = require("./api/write-static-file");
 Object.defineProperty(exports, "writeStaticFile", { enumerable: true, get: function () { return write_static_file_1.writeStaticFile; } });
 exports.StudioInternals = {
+    CodingAgentIcon: CodingAgentIcon_1.CodingAgentIcon,
+    EditorIcon: editor_1.EditorIcon,
+    FinderIcon: finder_1.FinderIcon,
+    TerminalIcon: terminal_1.TerminalIcon,
     createComposition: create_composition_1.createComposition,
     createStill: create_composition_1.createStill,
 };

package/dist/state/timeline-sequence-hover.d.ts

@@ -2,13 +2,19 @@ import type { Dispatch, SetStateAction } from 'react';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 export type TimelineSequenceHover = {
     readonly key: string;
+    readonly nodePathKey: string;
     readonly source: 'canvas' | 'timeline';
 };
-type TimelineSequenceHoverState = {
-    readonly hoveredSequence: TimelineSequenceHover | null;
+type TimelineSequenceHoverStore = {
+    readonly getSnapshot: () => TimelineSequenceHover | null;
+    readonly subscribe: (listener: () => void) => () => void;
     readonly setHoveredSequence: Dispatch<SetStateAction<TimelineSequenceHover | null>>;
 };
-export declare const TimelineSequenceHoverContext: import("react").Context<TimelineSequenceHoverState>;
+export declare const createTimelineSequenceHoverStore: () => TimelineSequenceHoverStore;
+export declare const TimelineSequenceHoverContext: import("react").Context<TimelineSequenceHoverStore>;
+export declare const useTimelineSequenceHoverState: () => TimelineSequenceHover | null;
+export declare const useSetTimelineSequenceHover: () => Dispatch<SetStateAction<TimelineSequenceHover | null>>;
+export declare const useIsTimelineSequenceHovered: (nodePathKey: string | null) => boolean;
 export declare const useTimelineSequenceHover: (nodePathInfo: SequenceNodePathInfo | null) => {
     hovered: boolean;
     onPointerEnter: () => void;