@remotion/studio 4.0.527 → 4.0.528

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

@@ -1,7 +1,7 @@
 import type { Guide } from '../state/editor-guides';
 import type { SelectedOutline } from './selected-outline-geometry';
 export declare const selectedOutlineSnapThresholdPx = 10;
-export declare const selectedOutlineSnapIndicatorColor = "#ff00ff";
+export declare const selectedOutlineSnapIndicatorColor = "var(--remotion-studio-selected-outline-snap-color)";
 export type SelectedOutlineSnapAxis = 'x' | 'y';
 export type SelectedOutlineSnapTargetType = 'canvas-left' | 'canvas-right' | 'canvas-top' | 'canvas-bottom' | 'canvas-horizontal-center' | 'canvas-vertical-center' | 'guide-vertical' | 'guide-horizontal';
 export type SelectedOutlineSnapTarget = {

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findSelectedOutlineSnap = exports.getSelectedOutlineSnapTargets = exports.selectedOutlineSnapIndicatorColor = exports.selectedOutlineSnapThresholdPx = void 0;
+const colors_1 = require("../helpers/colors");
 exports.selectedOutlineSnapThresholdPx = 10;
-exports.selectedOutlineSnapIndicatorColor = '#ff00ff';
+exports.selectedOutlineSnapIndicatorColor = colors_1.SELECTED_OUTLINE_SNAP_COLOR;
 const EPSILON = 0.000001;
 const getSelectedOutlineSnapTargets = ({ compositionHeight, compositionWidth, guides, }) => {
     return [

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

@@ -1,39 +1,31 @@
-import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey, TSequence } from 'remotion';
-import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
+import type { CanvasOutlineCrop, CanvasOutlineLayoutTarget, CanvasSelectableOutline } from '@remotion/canvas';
+import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey } from 'remotion';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-import type { TimelineSelection } from './Timeline/TimelineSelection';
+import type { KeyframeSourceFrame } from './Timeline/get-timeline-keyframes';
 export type SelectedOutlineContextMenuOpenResult = false | readonly ComboboxValue[];
 export type SelectedOutlineContextMenuOpenHandler = () => SelectedOutlineContextMenuOpenResult | Promise<SelectedOutlineContextMenuOpenResult>;
-export type SelectedOutlineLayoutTarget = {
-    readonly key: string;
-    readonly containsSelection: boolean;
-    readonly keyframeDisplayOffset: number;
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly ref: React.RefObject<Element | null>;
-    readonly selected: boolean;
+export type SelectedOutlineLayoutTarget = CanvasOutlineLayoutTarget & {
     readonly selectedForCrop: boolean;
     readonly selectedForRotation: boolean;
     readonly selectedForTransformOrigin: boolean;
     readonly selectedForUvHandles: boolean;
-    readonly showSelectedOutline: boolean;
     readonly transformOriginValue: string;
-    readonly selection: TimelineSelection;
-    readonly sequence: TSequence;
-    readonly crop: {
-        readonly left: number;
-        readonly right: number;
-        readonly top: number;
-        readonly bottom: number;
-    };
+    readonly crop: CanvasOutlineCrop;
 };
 export type SelectedOutlineTarget = SelectedOutlineLayoutTarget & {
     readonly canCrop: boolean;
+    readonly pathDrag: SelectedOutlinePathDragTarget | null;
     readonly cropDrag: SelectedOutlineCropDragTarget | null;
     readonly drag: SelectedOutlineDragTarget | null;
     readonly scaleDrag: SelectedOutlineScaleDragTarget | null;
     readonly rotationDrag: SelectedOutlineRotationDragTarget | null;
     readonly transformOriginDrag: SelectedOutlineTransformOriginDragTarget | null;
 };
+export type SelectedOutlinePathDragTarget = {
+    readonly clientId: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: InteractivitySchema;
+};
 export declare const cropFieldKeys: {
     readonly left: "cropLeft";
     readonly right: "cropRight";
@@ -61,7 +53,7 @@ export type SelectedOutlineCropDragTarget = {
     readonly fields: Record<SelectedOutlineCropFieldKey, SelectedOutlineCropField>;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
-    readonly sourceFrame: number;
+    readonly sourceFrame: KeyframeSourceFrame;
     readonly transformOrigin: {
         readonly defaultValue: string | undefined;
         readonly propStatus: CanUpdateSequencePropStatus;
@@ -73,12 +65,14 @@ export type SelectedOutlineDragTarget = {
     readonly clientId: string;
     readonly fieldDefault: string | undefined;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
 };
 export type SelectedOutlineTransformOriginDragTarget = {
     readonly clientId: string;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly originDefault: string | undefined;
     readonly originPropStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
@@ -86,7 +80,7 @@ export type SelectedOutlineTransformOriginDragTarget = {
     readonly rotateValue: string;
     readonly scaleValue: number | string;
     readonly schema: InteractivitySchema;
-    readonly sourceFrame: number;
+    readonly sourceFrame: KeyframeSourceFrame;
     readonly translateDefault: string | undefined;
     readonly translatePropStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly translateValue: string;
@@ -103,6 +97,7 @@ export type SelectedOutlineScaleDragTarget = {
     readonly fieldDefault: number | string | undefined;
     readonly fieldSchema: ScaleFieldSchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly linked: boolean;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
@@ -113,6 +108,7 @@ export type SelectedOutlineRotationDragTarget = {
     readonly fieldDefault: string | undefined;
     readonly fieldSchema: RotationFieldSchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
     readonly transform3DMode: boolean;
@@ -145,13 +141,7 @@ export type SelectedOutlineRotationDragState = {
     readonly startValue: string;
     readonly target: SelectedOutlineRotationDragTarget;
 };
-export type SequenceWithSelectedOutline = {
-    readonly depth: number;
-    readonly keyframeDisplayOffset: number;
-    readonly key: string;
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly sequence: TSequence;
-};
+export type SequenceWithSelectedOutline = CanvasSelectableOutline;
 export declare const translateFieldKey = "style.translate";
 export declare const scaleFieldKey = "style.scale";
 export declare const rotateFieldKey = "style.rotate";

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

@@ -1,5 +1,7 @@
 import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, GetEffectDragOverrides, PropStatuses, InteractivitySchemaField, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import { type OutlinePoint } from './selected-outline-geometry';
+import { type KeyframeSourceFrame } from './Timeline/get-timeline-keyframes';
+export declare const getUvHandlePosition: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], uv: import("@remotion/canvas").CanvasOutlineUv) => OutlinePoint, getUvCoordinateForPoint: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], point: OutlinePoint) => import("@remotion/canvas").CanvasOutlineUv;
 export type UvCoordinate = readonly [number, number];
 type UvEllipseDimensions = {
     readonly width: number;
@@ -36,7 +38,7 @@ export type SelectedOutlineUvHandle = {
     readonly isSelected: boolean;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
-    readonly sourceFrame: number;
+    readonly sourceFrame: KeyframeSourceFrame;
     readonly value: UvCoordinate;
 };
 type UvConnectionHandle = Pick<SelectedOutlineUvHandle, 'effectIndex' | 'fieldKey' | 'fieldSchema' | 'value'> & {
@@ -87,7 +89,6 @@ type SelectedEffectFields = {
     readonly fieldKeys: ReadonlySet<string>;
 };
 export declare const tuplesEqual: (left: unknown, right: UvCoordinate) => boolean;
-export declare const getUvHandlePosition: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], uv: UvCoordinate) => OutlinePoint;
 export declare const getUvHandleConnectionLines: ({ handles, points, }: {
     readonly handles: readonly UvConnectionHandle[];
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
@@ -102,7 +103,6 @@ export declare const getUvEllipseInteractiveControls: ({ handles, dimensions, po
     readonly dimensions?: UvEllipseDimensions | null | undefined;
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
 }) => UvEllipseInteractiveControls[];
-export declare const getUvCoordinateForPoint: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], point: OutlinePoint) => UvCoordinate;
 export declare function constrainUv(value: UvCoordinate, schema: UvCoordinateFieldSchema): UvCoordinate;
 export declare function roundUvCoordinate(value: UvCoordinate, schema: UvCoordinateFieldSchema): UvCoordinate;
 export declare const roundNumericUvEllipseValue: (value: number, schema: NumericUvEllipseFieldSchema) => number;
@@ -113,6 +113,6 @@ export declare const getSelectedUvHandles: ({ propStatuses, clientId, getEffectD
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly selectedEffects: Map<number, SelectedEffectFields> | undefined;
     readonly sequence: TSequence;
-    readonly sourceFrame: number;
+    readonly sourceFrame: KeyframeSourceFrame;
 }) => SelectedOutlineUvHandle[];
 export {};

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

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSelectedUvHandles = exports.roundNumericUvEllipseValue = exports.getUvCoordinateForPoint = exports.getUvEllipseInteractiveControls = exports.getUvHandleConnectionEllipses = exports.getUvHandleConnectionLines = exports.getUvHandlePosition = exports.tuplesEqual = void 0;
+exports.getSelectedUvHandles = exports.roundNumericUvEllipseValue = exports.getUvEllipseInteractiveControls = exports.getUvHandleConnectionEllipses = exports.getUvHandleConnectionLines = exports.tuplesEqual = exports.getUvCoordinateForPoint = exports.getUvHandlePosition = void 0;
 exports.constrainUv = constrainUv;
 exports.roundUvCoordinate = roundUvCoordinate;
+const canvas_1 = require("@remotion/canvas");
 const remotion_1 = require("remotion");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
+const get_timeline_keyframes_1 = require("./Timeline/get-timeline-keyframes");
 const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
+({ getCanvasOutlinePoint: exports.getUvHandlePosition, getCanvasOutlineUv: exports.getUvCoordinateForPoint } = canvas_1.CanvasInternals);
 const parseUvCoordinate = (value) => {
     if (Array.isArray(value) &&
         value.length === 2 &&
@@ -91,56 +94,6 @@ const tuplesEqual = (left, right) => {
     return left[0] === right[0] && left[1] === right[1];
 };
 exports.tuplesEqual = tuplesEqual;
-const getBilinearUvHandlePosition = (points, uv) => {
-    const [tl, tr, br, bl] = points;
-    const top = (0, selected_outline_geometry_1.mixPoint)(tl, tr, uv[0]);
-    const bottom = (0, selected_outline_geometry_1.mixPoint)(bl, br, uv[0]);
-    return (0, selected_outline_geometry_1.mixPoint)(top, bottom, uv[1]);
-};
-const projectiveEpsilon = 0.000001;
-const getProjectiveTransform = (points) => {
-    const [tl, tr, br, bl] = points;
-    const dx1 = tr.x - br.x;
-    const dx2 = bl.x - br.x;
-    const dx3 = tl.x - tr.x + br.x - bl.x;
-    const dy1 = tr.y - br.y;
-    const dy2 = bl.y - br.y;
-    const dy3 = tl.y - tr.y + br.y - bl.y;
-    let g = 0;
-    let h = 0;
-    if (Math.abs(dx3) > projectiveEpsilon || Math.abs(dy3) > projectiveEpsilon) {
-        const determinant = dx1 * dy2 - dx2 * dy1;
-        if (Math.abs(determinant) < projectiveEpsilon) {
-            return null;
-        }
-        g = (dx3 * dy2 - dx2 * dy3) / determinant;
-        h = (dx1 * dy3 - dx3 * dy1) / determinant;
-    }
-    return {
-        a: tr.x - tl.x + g * tr.x,
-        b: bl.x - tl.x + h * bl.x,
-        c: tl.x,
-        d: tr.y - tl.y + g * tr.y,
-        e: bl.y - tl.y + h * bl.y,
-        f: tl.y,
-        g,
-        h,
-    };
-};
-const applyProjectiveTransform = (transform, uv) => {
-    const denominator = transform.g * uv[0] + transform.h * uv[1] + 1;
-    return {
-        x: (transform.a * uv[0] + transform.b * uv[1] + transform.c) / denominator,
-        y: (transform.d * uv[0] + transform.e * uv[1] + transform.f) / denominator,
-    };
-};
-const getUvHandlePosition = (points, uv) => {
-    const transform = getProjectiveTransform(points);
-    return transform === null
-        ? getBilinearUvHandlePosition(points, uv)
-        : applyProjectiveTransform(transform, uv);
-};
-exports.getUvHandlePosition = getUvHandlePosition;
 const getUvHandleConnectionLines = ({ handles, points, }) => {
     const handlesByField = new Map(handles.map((handle) => [
         `${handle.effectIndex}\u0000${handle.fieldKey}`,
@@ -337,64 +290,6 @@ const getUvEllipseInteractiveControls = ({ handles, dimensions, points, }) => {
     return controls;
 };
 exports.getUvEllipseInteractiveControls = getUvEllipseInteractiveControls;
-const vectorBetween = (from, to) => {
-    return { x: to.x - from.x, y: to.y - from.y };
-};
-const getBilinearUvCoordinateForPoint = (points, point) => {
-    const [tl, tr, br, bl] = points;
-    let u = 0.5;
-    let v = 0.5;
-    for (let i = 0; i < 8; i++) {
-        const current = getBilinearUvHandlePosition(points, [u, v]);
-        const errorX = current.x - point.x;
-        const errorY = current.y - point.y;
-        if (Math.abs(errorX) + Math.abs(errorY) < 0.001) {
-            break;
-        }
-        const du = {
-            x: (0, selected_outline_geometry_1.mix)(tr.x - tl.x, br.x - bl.x, v),
-            y: (0, selected_outline_geometry_1.mix)(tr.y - tl.y, br.y - bl.y, v),
-        };
-        const dv = vectorBetween((0, selected_outline_geometry_1.mixPoint)(tl, tr, u), (0, selected_outline_geometry_1.mixPoint)(bl, br, u));
-        const determinant = du.x * dv.y - du.y * dv.x;
-        if (Math.abs(determinant) < 0.000001) {
-            break;
-        }
-        u -= (errorX * dv.y - errorY * dv.x) / determinant;
-        v -= (du.x * errorY - du.y * errorX) / determinant;
-    }
-    return [u, v];
-};
-const getUvCoordinateForPoint = (points, point) => {
-    const transform = getProjectiveTransform(points);
-    if (transform === null) {
-        return getBilinearUvCoordinateForPoint(points, point);
-    }
-    const determinant = transform.a * (transform.e - transform.f * transform.h) -
-        transform.b * (transform.d - transform.f * transform.g) +
-        transform.c * (transform.d * transform.h - transform.e * transform.g);
-    if (Math.abs(determinant) < projectiveEpsilon) {
-        return getBilinearUvCoordinateForPoint(points, point);
-    }
-    const inverseA = transform.e - transform.f * transform.h;
-    const inverseB = transform.c * transform.h - transform.b;
-    const inverseC = transform.b * transform.f - transform.c * transform.e;
-    const inverseD = transform.f * transform.g - transform.d;
-    const inverseE = transform.a - transform.c * transform.g;
-    const inverseF = transform.c * transform.d - transform.a * transform.f;
-    const inverseG = transform.d * transform.h - transform.e * transform.g;
-    const inverseH = transform.b * transform.g - transform.a * transform.h;
-    const inverseI = transform.a * transform.e - transform.b * transform.d;
-    const denominator = inverseG * point.x + inverseH * point.y + inverseI;
-    if (Math.abs(denominator) < projectiveEpsilon) {
-        return getBilinearUvCoordinateForPoint(points, point);
-    }
-    return [
-        (inverseA * point.x + inverseB * point.y + inverseC) / denominator,
-        (inverseD * point.x + inverseE * point.y + inverseF) / denominator,
-    ];
-};
-exports.getUvCoordinateForPoint = getUvCoordinateForPoint;
 function constrainUv(value, schema) {
     var _a, _b;
     const min = (_a = schema.min) !== null && _a !== void 0 ? _a : -Infinity;
@@ -515,7 +410,7 @@ const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides,
                 propStatus,
                 dragOverrideValue: dragOverrides[key],
                 defaultValue: undefined,
-                frame: sourceFrame,
+                frame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(sourceFrame, propStatus),
                 shouldResortToDefaultValueIfUndefined: false,
             });
         });
@@ -533,7 +428,7 @@ const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides,
                 propStatus,
                 dragOverrideValue: dragOverrides[fieldKey],
                 defaultValue: fieldSchema.default,
-                frame: sourceFrame,
+                frame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(sourceFrame, propStatus),
                 shouldResortToDefaultValueIfUndefined: true,
             });
         }

package/dist/components/sequence-props-api.js

@@ -9,19 +9,9 @@ const flushSequencePropsSubscriptions = () => {
     sequencePropsSubscriptionTimer = null;
     const pending = pendingSequencePropsSubscriptions;
     pendingSequencePropsSubscriptions = [];
-    const firstRequest = pending[0].request;
     (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
-        ...firstRequest,
         requests: pending.map(({ request }) => request),
     }).then((response) => {
-        if (!Array.isArray(response.results)) {
-            pending[0].resolve(response);
-            const error = new Error('Legacy single subscription response received for a batched request');
-            for (const item of pending.slice(1)) {
-                item.reject(error);
-            }
-            return;
-        }
         if (response.results.length !== pending.length) {
             const error = new Error(`Expected ${pending.length} sequence prop subscription results, got ${response.results.length}`);
             for (const item of pending) {

package/dist/components/use-selected-outline-control-target.js

@@ -34,11 +34,12 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectedOutlineControlTarget = void 0;
+const canvas_1 = require("@remotion/canvas");
 const react_1 = __importStar(require("react"));
-const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const useSelectedOutlineControlTarget = ({ getLatestTargetByKey, layoutTarget, }) => {
-    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
+    var _a;
+    const hoverController = (0, react_1.useContext)(timeline_sequence_hover_1.TimelineSequenceHoverContext);
     const targetRef = (0, react_1.useRef)(layoutTarget);
     (0, react_1.useLayoutEffect)(() => {
         targetRef.current = layoutTarget;
@@ -51,29 +52,19 @@ const useSelectedOutlineControlTarget = ({ getLatestTargetByKey, layoutTarget, }
         return getLatestTargetByKey(currentTarget.key);
     }, [getLatestTargetByKey]);
     const getLayoutTarget = react_1.default.useCallback(() => targetRef.current, []);
-    const hoveredNodePathKey = (0, react_1.useMemo)(() => layoutTarget === undefined
-        ? null
-        : (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(layoutTarget.nodePathInfo.sequenceSubscriptionKey), [layoutTarget]);
-    const hovered = (0, timeline_sequence_hover_1.useIsTimelineSequenceHovered)(hoveredNodePathKey);
+    const { hovered, onPointerEnter, onPointerLeave } = (0, canvas_1.useCanvasSequenceHover)(hoverController, (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.nodePathInfo) !== null && _a !== void 0 ? _a : null, 'canvas');
     const controlTarget = layoutTarget !== undefined && (layoutTarget.containsSelection || hovered)
         ? getLatestTargetByKey(layoutTarget.key)
         : undefined;
     const onHoverChange = react_1.default.useCallback((key) => {
-        setHoveredSequence((currentHover) => {
-            if (key !== null) {
-                const hoverTarget = targetRef.current;
-                if (hoverTarget === undefined || hoverTarget.key !== key) {
-                    return currentHover;
-                }
-                return {
-                    key,
-                    nodePathKey: (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(hoverTarget.nodePathInfo.sequenceSubscriptionKey),
-                    source: 'canvas',
-                };
-            }
-            return (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover;
-        });
-    }, [setHoveredSequence]);
+        var _a;
+        if (key === null) {
+            onPointerLeave();
+        }
+        else if (((_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.key) === key) {
+            onPointerEnter();
+        }
+    }, [onPointerEnter, onPointerLeave]);
     return { controlTarget, getLayoutTarget, getTarget, hovered, onHoverChange };
 };
 exports.useSelectedOutlineControlTarget = useSelectedOutlineControlTarget;

package/dist/components/wrap-jsx-node-api.d.ts

@@ -0,0 +1,2 @@
+import type { WrapJsxNodeRequest, WrapJsxNodeResponse } from '@remotion/studio-shared';
+export declare const wrapJsxNode: (request: WrapJsxNodeRequest) => Promise<WrapJsxNodeResponse>;

package/dist/components/wrap-jsx-node-api.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapJsxNode = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const wrapJsxNode = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations) {
+        return browserStudioOperations.wrapJsxNode(request);
+    }
+    return (0, call_api_1.callApi)('/api/wrap-jsx-node', request);
+};
+exports.wrapJsxNode = wrapJsxNode;

package/dist/error-overlay/remotion-overlay/OpenInEditor.js

@@ -7,9 +7,13 @@ const AppLaunchButton_1 = require("../../components/AppLaunchButton");
 const NotificationCenter_1 = require("../../components/Notifications/NotificationCenter");
 const SettingsContext_1 = require("../../components/SettingsContext");
 const use_configure_default_apps_1 = require("../../components/use-configure-default-apps");
+const colors_1 = require("../../helpers/colors");
+const copy_text_1 = require("../../helpers/copy-text");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const clipboard_1 = require("../../icons/clipboard");
 const editor_1 = require("../../icons/editor");
+const format_location_1 = require("./format-location");
 const ShortcutHint_1 = require("./ShortcutHint");
 const menuLabel = {
     color: 'inherit',
@@ -17,10 +21,14 @@ const menuLabel = {
     fontSize: 13,
     lineHeight: '16px',
 };
+const copyIcon = { height: 16, width: 16 };
 const OpenInEditor = ({ stack, canHaveKeyboardShortcuts, editorId, editorName, size }) => {
     const { editorInfo } = (0, SettingsContext_1.useSettings)();
     const configureDefaultApps = (0, use_configure_default_apps_1.useConfigureDefaultApps)();
     const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    const sourcePath = stack.originalFileName
+        ? (0, format_location_1.formatLocation)(stack.originalFileName)
+        : null;
     const openWithEditor = (0, react_1.useCallback)(async (selectedEditorId, selectedEditorName) => {
         try {
             const response = await (0, open_in_editor_1.openInEditor)(stack, selectedEditorId);
@@ -35,6 +43,16 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts, editorId, editorName, s
     const openPreferredEditor = (0, react_1.useCallback)(() => {
         openWithEditor(editorId, editorName).catch(() => undefined);
     }, [editorId, editorName, openWithEditor]);
+    const copyPath = (0, react_1.useCallback)(() => {
+        if (sourcePath === null) {
+            return;
+        }
+        (0, copy_text_1.copyText)(sourcePath)
+            .then(() => (0, NotificationCenter_1.showNotification)('Copied path', 1500))
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy path: ${err.message}`, 2000);
+        });
+    }, [sourcePath]);
     (0, react_1.useEffect)(() => {
         if (!canHaveKeyboardShortcuts) {
             return;
@@ -66,8 +84,33 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts, editorId, editorName, s
             type: 'item',
             value: editor.id,
         }));
-        return editorItems;
-    }, [editorId, editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors, openWithEditor]);
+        if (sourcePath === null) {
+            return editorItems;
+        }
+        return [
+            ...editorItems,
+            ...(editorItems.length > 0
+                ? [{ type: 'divider', id: 'copy-path-divider' }]
+                : []),
+            {
+                id: 'copy-path',
+                keyHint: null,
+                label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Copy path" }),
+                leftItem: jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: colors_1.LIGHT_TEXT, style: copyIcon }),
+                onClick: copyPath,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'copy-path',
+            },
+        ];
+    }, [
+        copyPath,
+        editorId,
+        editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors,
+        openWithEditor,
+        sourcePath,
+    ]);
     return (jsx_runtime_1.jsxs(AppLaunchButton_1.AppLaunchButton, { actionButtonId: "error-overlay-open-in-editor", ariaLabel: `Open in ${editorName}`, disabled: false, menuAriaLabel: "Open in another app", menuButtonId: "error-overlay-open-in-another-app", menuItems: menuItems, onConfigureApps: configureDefaultApps, onClick: openPreferredEditor, size: size, style: null, title: `Open in ${editorName}`, children: [
             jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editorId, size: size === 'default' ? 14 : 18 }),
             "Open in ", editorName, canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "o", cmdOrCtrl: true })) : null] }));

package/dist/error-overlay/remotion-overlay/StackFrame.js

@@ -13,7 +13,15 @@ const format_location_1 = require("./format-location");
 const location = {
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'monospace',
-    overflowWrap: 'anywhere',
+    textAlign: 'left',
+    whiteSpace: 'nowrap',
+};
+const locationMask = 'linear-gradient(to right, black calc(100% - 20px), transparent)';
+const locationContainer = {
+    ...location,
+    maskImage: locationMask,
+    overflow: 'hidden',
+    WebkitMaskImage: locationMask,
 };
 const header = {
     paddingTop: 10,
@@ -39,6 +47,27 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
             !((_b = s.originalFileName) === null || _b === void 0 ? void 0 : _b.startsWith('webpack/'))) ||
             isFirst;
     });
+    const locationRef = (0, react_1.useRef)(null);
+    const [locationOverflows, setLocationOverflows] = (0, react_1.useState)(false);
+    const fileLocation = s.originalFileName
+        ? `${(0, format_location_1.formatLocation)(s.originalFileName)}:${s.originalLineNumber}`
+        : null;
+    (0, react_1.useLayoutEffect)(() => {
+        const element = locationRef.current;
+        if (!element) {
+            return;
+        }
+        const update = () => {
+            setLocationOverflows(element.scrollWidth > element.clientWidth);
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(element);
+        if (element.firstElementChild) {
+            observer.observe(element.firstElementChild);
+        }
+        return () => observer.disconnect();
+    }, [fileLocation, fontSize]);
     const canOpenFileLocation = Boolean(editorId && s.originalFileName);
     const onOpenFileLocation = (0, react_1.useCallback)(() => {
         if (!canOpenFileLocation) {
@@ -64,7 +93,7 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
                     paddingLeft: horizontalSpacing,
                     paddingRight: horizontalSpacing,
                 }, children: [
-                    jsx_runtime_1.jsxs("div", { style: left, children: [functionName === null ? null : (jsx_runtime_1.jsx("div", { style: { ...fnName, fontSize }, children: functionName })), s.originalFileName ? (jsx_runtime_1.jsx("div", { style: { ...location, fontSize }, children: canOpenFileLocation ? (jsx_runtime_1.jsxs("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onOpenFileLocation, style: {
+                    jsx_runtime_1.jsxs("div", { style: left, children: [functionName === null ? null : (jsx_runtime_1.jsx("div", { style: { ...fnName, fontSize }, children: functionName })), fileLocation ? (jsx_runtime_1.jsx("div", { ref: locationRef, style: { ...locationContainer, fontSize }, title: locationOverflows ? fileLocation : undefined, children: canOpenFileLocation ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onOpenFileLocation, style: {
                                         ...location,
                                         ...(0, hoverable_1.hoverableStyle)({
                                             idleBackground: colors_1.TRANSPARENT,
@@ -78,7 +107,7 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
                                         cursor: 'default',
                                         fontSize,
                                         padding: 0,
-                                    }, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) })) : null] }), headerAction, collapsible &&
+                                    }, children: fileLocation })) : (fileLocation) })) : null] }), headerAction, collapsible &&
                         s.originalScriptCode &&
                         s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: jsx_runtime_1.jsx("div", { style: {
                                 display: 'flex',