@remotion/studio 4.0.443 → 4.0.445

package/dist/components/Canvas.js

@@ -21,13 +21,14 @@ const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
 const ResetZoomButton_1 = require("./ResetZoomButton");
-const container = {
+const getContainerStyle = (editorZoomGestures) => ({
     flex: 1,
     display: 'flex',
     overflow: 'hidden',
     position: 'relative',
     backgroundColor: colors_1.BACKGROUND,
-};
+    ...(editorZoomGestures ? { touchAction: 'none' } : {}),
+});
 const resetZoom = {
     position: 'absolute',
     top: layout_1.SPACING_UNIT * 2,
@@ -37,6 +38,14 @@ const ZOOM_PX_FACTOR = 0.003;
 const Canvas = ({ canvasContent, size }) => {
     const { setSize, size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
+    const previewSnapshotRef = (0, react_1.useRef)({
+        previewSize,
+        canvasSize: size,
+        contentDimensions: null,
+    });
+    const pinchBaseZoomRef = (0, react_1.useRef)(null);
+    const suppressWheelFromWebKitPinchRef = (0, react_1.useRef)(false);
+    const touchPinchRef = (0, react_1.useRef)(null);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
@@ -56,7 +65,13 @@ const Canvas = ({ canvasContent, size }) => {
         return null;
     }, [assetResolution, config, canvasContent]);
     const isFit = previewSize.size === 'auto';
+    previewSnapshotRef.current = {
+        previewSize,
+        canvasSize: size,
+        contentDimensions,
+    };
     const onWheel = (0, react_1.useCallback)((e) => {
+        const ev = e;
         if (!editorZoomGestures) {
             return;
         }
@@ -66,11 +81,15 @@ const Canvas = ({ canvasContent, size }) => {
         if (!contentDimensions || contentDimensions === 'none') {
             return;
         }
-        const wantsToZoom = e.ctrlKey || e.metaKey;
+        const wantsToZoom = ev.ctrlKey || ev.metaKey;
         if (!wantsToZoom && isFit) {
             return;
         }
-        e.preventDefault();
+        if (suppressWheelFromWebKitPinchRef.current && wantsToZoom) {
+            ev.preventDefault();
+            return;
+        }
+        ev.preventDefault();
         setSize((prevSize) => {
             const scale = remotion_1.Internals.calculateScale({
                 canvasSize: size,
@@ -78,41 +97,20 @@ const Canvas = ({ canvasContent, size }) => {
                 compositionWidth: contentDimensions.width,
                 previewSize: prevSize.size,
             });
-            // Zoom in/out
             if (wantsToZoom) {
                 const oldSize = prevSize.size === 'auto' ? scale : prevSize.size;
                 const smoothened = (0, smooth_zoom_1.smoothenZoom)(oldSize);
-                const added = smoothened + e.deltaY * ZOOM_PX_FACTOR;
+                const added = smoothened + ev.deltaY * ZOOM_PX_FACTOR;
                 const unsmoothened = (0, smooth_zoom_1.unsmoothenZoom)(added);
-                const { centerX, centerY } = (0, get_effective_translation_1.getCenterPointWhileScrolling)({
-                    size,
-                    clientX: e.clientX,
-                    clientY: e.clientY,
-                    compositionWidth: contentDimensions.width,
-                    compositionHeight: contentDimensions.height,
-                    scale,
-                    translation: prevSize.translation,
+                return (0, get_effective_translation_1.applyZoomAroundFocalPoint)({
+                    canvasSize: size,
+                    contentDimensions,
+                    previewSizeBefore: prevSize,
+                    oldNumericSize: oldSize,
+                    newNumericSize: unsmoothened,
+                    clientX: ev.clientX,
+                    clientY: ev.clientY,
                 });
-                const zoomDifference = unsmoothened - oldSize;
-                const uvCoordinatesX = centerX / contentDimensions.width;
-                const uvCoordinatesY = centerY / contentDimensions.height;
-                const correctionLeft = -uvCoordinatesX * (zoomDifference * contentDimensions.width) +
-                    (1 - uvCoordinatesX) * zoomDifference * contentDimensions.width;
-                const correctionTop = -uvCoordinatesY * (zoomDifference * contentDimensions.height) +
-                    (1 - uvCoordinatesY) * zoomDifference * contentDimensions.height;
-                return {
-                    translation: (0, get_effective_translation_1.getEffectiveTranslation)({
-                        translation: {
-                            x: prevSize.translation.x - correctionLeft / 2,
-                            y: prevSize.translation.y - correctionTop / 2,
-                        },
-                        canvasSize: size,
-                        compositionHeight: contentDimensions.height,
-                        compositionWidth: contentDimensions.width,
-                        scale,
-                    }),
-                    size: unsmoothened,
-                };
             }
             const effectiveTranslation = (0, get_effective_translation_1.getEffectiveTranslation)({
                 translation: prevSize.translation,
@@ -121,13 +119,12 @@ const Canvas = ({ canvasContent, size }) => {
                 compositionWidth: contentDimensions.width,
                 scale,
             });
-            // Pan
             return {
                 ...prevSize,
                 translation: (0, get_effective_translation_1.getEffectiveTranslation)({
                     translation: {
-                        x: effectiveTranslation.x + e.deltaX,
-                        y: effectiveTranslation.y + e.deltaY,
+                        x: effectiveTranslation.x + ev.deltaX,
+                        y: effectiveTranslation.y + ev.deltaY,
                     },
                     canvasSize: size,
                     compositionHeight: contentDimensions.height,
@@ -143,12 +140,170 @@ const Canvas = ({ canvasContent, size }) => {
             return;
         }
         current.addEventListener('wheel', onWheel, { passive: false });
-        return () => 
-        // @ts-expect-error
-        current.removeEventListener('wheel', onWheel, {
+        return () => {
+            current.removeEventListener('wheel', onWheel);
+        };
+    }, [onWheel]);
+    const supportsWebKitPinch = typeof window !== 'undefined' && 'GestureEvent' in window;
+    (0, react_1.useEffect)(() => {
+        const { current } = canvas_ref_1.canvasRef;
+        if (!current || !editorZoomGestures || !supportsWebKitPinch) {
+            return;
+        }
+        const endWebKitPinch = () => {
+            pinchBaseZoomRef.current = null;
+            suppressWheelFromWebKitPinchRef.current = false;
+        };
+        const onGestureStart = (event) => {
+            const e = event;
+            const snap = previewSnapshotRef.current;
+            const canvasSz = snap.canvasSize;
+            const cdim = snap.contentDimensions;
+            if (!canvasSz || !cdim || cdim === 'none') {
+                return;
+            }
+            e.preventDefault();
+            suppressWheelFromWebKitPinchRef.current = true;
+            const fitted = remotion_1.Internals.calculateScale({
+                canvasSize: canvasSz,
+                compositionHeight: cdim.height,
+                compositionWidth: cdim.width,
+                previewSize: snap.previewSize.size,
+            });
+            pinchBaseZoomRef.current =
+                snap.previewSize.size === 'auto' ? fitted : snap.previewSize.size;
+        };
+        const onGestureChange = (event) => {
+            const e = event;
+            const base = pinchBaseZoomRef.current;
+            const snap = previewSnapshotRef.current;
+            const canvasSz = snap.canvasSize;
+            const cdim = snap.contentDimensions;
+            if (base === null || !canvasSz || !cdim || cdim === 'none') {
+                return;
+            }
+            const dimensions = cdim;
+            e.preventDefault();
+            setSize((prevSize) => {
+                const scale = remotion_1.Internals.calculateScale({
+                    canvasSize: canvasSz,
+                    compositionHeight: dimensions.height,
+                    compositionWidth: dimensions.width,
+                    previewSize: prevSize.size,
+                });
+                const oldNumeric = prevSize.size === 'auto' ? scale : prevSize.size;
+                return (0, get_effective_translation_1.applyZoomAroundFocalPoint)({
+                    canvasSize: canvasSz,
+                    contentDimensions: dimensions,
+                    previewSizeBefore: prevSize,
+                    oldNumericSize: oldNumeric,
+                    newNumericSize: base * e.scale,
+                    clientX: e.clientX,
+                    clientY: e.clientY,
+                });
+            });
+        };
+        const onGestureEnd = () => {
+            endWebKitPinch();
+        };
+        current.addEventListener('gesturestart', onGestureStart, {
             passive: false,
         });
-    }, [onWheel]);
+        current.addEventListener('gesturechange', onGestureChange, {
+            passive: false,
+        });
+        current.addEventListener('gestureend', onGestureEnd);
+        current.addEventListener('gesturecancel', onGestureEnd);
+        return () => {
+            current.removeEventListener('gesturestart', onGestureStart);
+            current.removeEventListener('gesturechange', onGestureChange);
+            current.removeEventListener('gestureend', onGestureEnd);
+            current.removeEventListener('gesturecancel', onGestureEnd);
+        };
+    }, [editorZoomGestures, setSize, supportsWebKitPinch]);
+    (0, react_1.useEffect)(() => {
+        const { current } = canvas_ref_1.canvasRef;
+        if (!current || !editorZoomGestures) {
+            return;
+        }
+        const onTouchStart = (event) => {
+            if (event.touches.length !== 2) {
+                touchPinchRef.current = null;
+                return;
+            }
+            const snap = previewSnapshotRef.current;
+            if (!snap.canvasSize ||
+                !snap.contentDimensions ||
+                snap.contentDimensions === 'none') {
+                return;
+            }
+            const [t0, t1] = [event.touches[0], event.touches[1]];
+            const initialDistance = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
+            if (initialDistance < 1e-6) {
+                return;
+            }
+            const fitted = remotion_1.Internals.calculateScale({
+                canvasSize: snap.canvasSize,
+                compositionHeight: snap.contentDimensions.height,
+                compositionWidth: snap.contentDimensions.width,
+                previewSize: snap.previewSize.size,
+            });
+            const initialZoom = snap.previewSize.size === 'auto' ? fitted : snap.previewSize.size;
+            touchPinchRef.current = { initialDistance, initialZoom };
+        };
+        const onTouchMove = (event) => {
+            const pinch = touchPinchRef.current;
+            const snap = previewSnapshotRef.current;
+            if (pinch === null ||
+                event.touches.length !== 2 ||
+                !snap.canvasSize ||
+                !snap.contentDimensions ||
+                snap.contentDimensions === 'none') {
+                return;
+            }
+            event.preventDefault();
+            const [t0, t1] = [event.touches[0], event.touches[1]];
+            const dist = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
+            const ratio = dist / pinch.initialDistance;
+            const clientX = (t0.clientX + t1.clientX) / 2;
+            const clientY = (t0.clientY + t1.clientY) / 2;
+            setSize((prevSize) => {
+                const canvasSz = snap.canvasSize;
+                const cdim = snap.contentDimensions;
+                const scale = remotion_1.Internals.calculateScale({
+                    canvasSize: canvasSz,
+                    compositionHeight: cdim.height,
+                    compositionWidth: cdim.width,
+                    previewSize: prevSize.size,
+                });
+                const oldNumeric = prevSize.size === 'auto' ? scale : prevSize.size;
+                return (0, get_effective_translation_1.applyZoomAroundFocalPoint)({
+                    canvasSize: canvasSz,
+                    contentDimensions: cdim,
+                    previewSizeBefore: prevSize,
+                    oldNumericSize: oldNumeric,
+                    newNumericSize: pinch.initialZoom * ratio,
+                    clientX,
+                    clientY,
+                });
+            });
+        };
+        const onTouchEnd = (event) => {
+            if (event.touches.length < 2) {
+                touchPinchRef.current = null;
+            }
+        };
+        current.addEventListener('touchstart', onTouchStart, { passive: true });
+        current.addEventListener('touchmove', onTouchMove, { passive: false });
+        current.addEventListener('touchend', onTouchEnd);
+        current.addEventListener('touchcancel', onTouchEnd);
+        return () => {
+            current.removeEventListener('touchstart', onTouchStart);
+            current.removeEventListener('touchmove', onTouchMove);
+            current.removeEventListener('touchend', onTouchEnd);
+            current.removeEventListener('touchcancel', onTouchEnd);
+        };
+    }, [editorZoomGestures, setSize]);
     const onReset = (0, react_1.useCallback)(() => {
         setSize(() => {
             return {
@@ -263,6 +418,6 @@ const Canvas = ({ canvasContent, size }) => {
         fetchMetadata();
     }, [fetchMetadata]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution })) : null, isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
+            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution })) : null, isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };
 exports.Canvas = Canvas;

package/dist/components/CanvasOrLoading.js

@@ -11,6 +11,7 @@ const Canvas_1 = require("./Canvas");
 const FramePersistor_1 = require("./FramePersistor");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const RefreshCompositionOverlay_1 = require("./RefreshCompositionOverlay");
+const RenderErrorContext_1 = require("./RenderErrorContext");
 const RunningCalculateMetadata_1 = require("./RunningCalculateMetadata");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
@@ -28,6 +29,7 @@ const CanvasOrLoading = ({ size }) => {
     const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
     const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { error: renderError } = (0, react_1.useContext)(RenderErrorContext_1.RenderErrorContext);
     (0, react_1.useEffect)(() => {
         if ((resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success' &&
             (resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success-and-refreshing') {
@@ -42,6 +44,9 @@ const CanvasOrLoading = ({ size }) => {
             });
         });
     }, [resolved, setZoom]);
+    if (renderError) {
+        return jsx_runtime_1.jsx(ErrorLoading, { error: renderError });
+    }
     if (!canvasContent) {
         const compname = window.location.pathname.replace('/', '');
         return (jsx_runtime_1.jsx("div", { style: container, className: "css-reset", children: jsx_runtime_1.jsxs("div", { style: RunningCalculateMetadata_1.loaderLabel, children: ["Composition with ID ", compname, " not found."] }) }));

package/dist/components/Editor.js

@@ -48,6 +48,7 @@ const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const Modals_1 = require("./Modals");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const RenderErrorContext_1 = require("./RenderErrorContext");
 const TopPanel_1 = require("./TopPanel");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
@@ -83,10 +84,17 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const MemoRoot = (0, react_1.useMemo)(() => {
         return react_1.default.memo(Root);
     }, [Root]);
+    const [renderError, setRenderError] = (0, react_1.useState)(null);
+    const clearError = (0, react_1.useCallback)(() => {
+        setRenderError(null);
+    }, []);
+    const compositionRenderErrorContextValue = (0, react_1.useMemo)(() => ({ setError: setRenderError, clearError }), [clearError]);
+    const renderErrorContextValue = (0, react_1.useMemo)(() => ({ error: renderError }), [renderError]);
     return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsxs(timeline_zoom_1.TimelineZoomContext, { children: [
                 jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
-                        jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsxs("div", { style: background, children: [canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null, jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
-                                        jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
+                        jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsxs("div", { style: background, children: [
+                                jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
+                                        jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
                                     ] })
                             ] })
                     ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})

package/dist/components/RenderErrorContext.d.ts

@@ -0,0 +1,4 @@
+export type RenderErrorContextType = {
+    error: Error | null;
+};
+export declare const RenderErrorContext: import("react").Context<RenderErrorContextType>;

package/dist/components/RenderErrorContext.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderErrorContext = void 0;
+const react_1 = require("react");
+exports.RenderErrorContext = (0, react_1.createContext)({
+    error: null,
+});

package/dist/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -112,11 +112,13 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, ser
         };
     }, [subscribeToEvent, compositionId, schema]);
     (0, react_1.useEffect)(() => {
-        if (localValue.validJSON && (0, deep_equal_1.deepEqual)(value, localValue.value)) {
-            return;
-        }
-        setLocalValue(parseJS(value, schema));
-    }, [value, schema, localValue]);
+        setLocalValue((prev) => {
+            if (prev.validJSON && (0, deep_equal_1.deepEqual)(value, prev.value)) {
+                return prev;
+            }
+            return parseJS(value, schema);
+        });
+    }, [value, schema]);
     const onPretty = (0, react_1.useCallback)(() => {
         if (!localValue.validJSON) {
             return;

package/dist/components/RenderModal/SchemaEditor/SchemaEditor.js

@@ -7,6 +7,7 @@ const is_menu_item_1 = require("../../Menu/is-menu-item");
 const SchemaErrorMessages_1 = require("./SchemaErrorMessages");
 const scroll_to_default_props_path_1 = require("./scroll-to-default-props-path");
 const zod_schema_type_1 = require("./zod-schema-type");
+const ZodDiscriminatedUnionEditor_1 = require("./ZodDiscriminatedUnionEditor");
 const ZodObjectEditor_1 = require("./ZodObjectEditor");
 const scrollable = {
     display: 'flex',
@@ -19,9 +20,12 @@ const SchemaEditor = ({ schema, value, setValue }) => {
         throw new Error('expected zod');
     }
     const typeName = (0, zod_schema_type_1.getZodSchemaType)(schema);
-    if (typeName !== 'object') {
+    if (typeName !== 'object' && typeName !== 'discriminatedUnion') {
         return jsx_runtime_1.jsx(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName });
     }
+    if (typeName === 'discriminatedUnion') {
+        return (jsx_runtime_1.jsx("div", { ref: scroll_to_default_props_path_1.defaultPropsEditorScrollableAreaRef, style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ZodDiscriminatedUnionEditor_1.ZodDiscriminatedUnionEditor, { schema: schema, setValue: setValue, value: value, mayPad: true, jsonPath: [], onRemove: null }) }));
+    }
     return (jsx_runtime_1.jsx("div", { ref: scroll_to_default_props_path_1.defaultPropsEditorScrollableAreaRef, style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ZodObjectEditor_1.ZodObjectEditor, { discriminatedUnionReplacement: null, value: value, setValue: setValue, jsonPath: [], schema: schema, onRemove: null, mayPad: true }) }));
 };
 exports.SchemaEditor = SchemaEditor;

package/dist/components/RenderModal/SchemaEditor/SchemaErrorMessages.js

@@ -78,9 +78,11 @@ const InvalidSchema = ({ zodValidationResult }) => {
 exports.InvalidSchema = InvalidSchema;
 const TopLevelZodValue = ({ typeReceived }) => {
     return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
-            jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["The top-level type of the schema must be a pure", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: "z.object" }),
-                    ". Instead got a schema of type", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: typeReceived })
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "Fix the schema by changing the top-level Zod type to an object." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), jsx_runtime_1.jsx(Button_1.Button, { onClick: openDocs, children: "Learn more" })
+            jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["The top-level type of the schema must be", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: "z.object()" }),
+                    " or", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: "z.discriminatedUnion()" }),
+                    ". Instead got a schema of type ",
+                    jsx_runtime_1.jsx("code", { style: codeSnippet, children: typeReceived })
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "Fix the schema by changing the top-level Zod type to an object or discriminated union." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), jsx_runtime_1.jsx(Button_1.Button, { onClick: openDocs, children: "Learn more" })
         ] }));
 };
 exports.TopLevelZodValue = TopLevelZodValue;

package/dist/components/Timeline/Timeline.js

@@ -52,6 +52,7 @@ const timeline_refs_1 = require("./timeline-refs");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineList_1 = require("./TimelineList");
+const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
 const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSlider_1 = require("./TimelineSlider");
@@ -116,10 +117,12 @@ const TimelineInner = () => {
             overflowX: 'hidden',
         };
     }, [hasBeenCut, shown, expandedTracks, visualModeEnabled]);
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(TimelineWidthProvider_1.TimelineWidthProvider, { children: jsx_runtime_1.jsx("div", { style: inner, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
-                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
-                                    jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
-                                ] }) })
-                    ] }) }) }) }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+                jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsx("div", { style: inner, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
+                            jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                        jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                    ] }) })
+                        ] }) })
+            ] }) }));
 };
 exports.Timeline = react_1.default.memo(TimelineInner);

package/dist/components/Timeline/TimelineListItem.js

@@ -7,7 +7,10 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const call_api_1 = require("../call-api");
+const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineStack_1 = require("./TimelineStack");
@@ -39,13 +42,73 @@ const arrowButton = {
 const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     var _a, _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
-        previewServerState.type === 'connected';
+    const visualModeEnvEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
+    const previewConnected = previewServerState.type === 'connected';
+    const visualModeActive = visualModeEnvEnabled && previewConnected;
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
     const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
     const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = sequence.stack) !== null && _a !== void 0 ? _a : null);
-    const nodePath = (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation);
-    const isExpanded = visualModeEnabled && ((_b = expandedTracks[sequence.id]) !== null && _b !== void 0 ? _b : false);
+    const nodePath = (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation, visualModeActive);
+    const validatedLocation = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!originalLocation ||
+            !originalLocation.source ||
+            !originalLocation.line) {
+            return null;
+        }
+        return {
+            source: originalLocation.source,
+            line: originalLocation.line,
+            column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
+        };
+    }, [originalLocation]);
+    const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
+    const deleteDisabled = (0, react_1.useMemo)(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
+    const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
+        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
+            return;
+        }
+        try {
+            const result = await (0, call_api_1.callApi)('/api/delete-jsx-node', {
+                fileName: validatedLocation.source,
+                nodePath,
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        if (!visualModeEnvEnabled) {
+            return [];
+        }
+        return [
+            {
+                type: 'item',
+                id: 'delete-sequence',
+                keyHint: null,
+                label: 'Delete',
+                leftItem: null,
+                disabled: deleteDisabled,
+                onClick: () => {
+                    if (deleteDisabled) {
+                        return;
+                    }
+                    onDeleteSequenceFromSource();
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'delete-sequence',
+            },
+        ];
+    }, [deleteDisabled, onDeleteSequenceFromSource, visualModeEnvEnabled]);
+    const isExpanded = visualModeActive && ((_b = expandedTracks[sequence.id]) !== null && _b !== void 0 ? _b : false);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         toggleTrack(sequence.id);
     }, [sequence.id, toggleTrack]);
@@ -87,9 +150,9 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
         };
     }, [isExpanded]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { style: outer, children: [
-                    jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeEnabled ? (sequence.controls ? (jsx_runtime_1.jsx("button", { type: "button", style: arrowStyle, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} track`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: { display: 'block' }, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) })) : (jsx_runtime_1.jsx("div", { style: arrowButton }))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
-                ] }), visualModeEnabled && isExpanded && sequence.controls ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nestedDepth: nestedDepth, nodePath: nodePath })) : null] }));
+    const trackRow = (jsx_runtime_1.jsxs("div", { style: outer, children: [
+            jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeActive ? (sequence.controls ? (jsx_runtime_1.jsx("button", { type: "button", style: arrowStyle, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} track`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: { display: 'block' }, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) })) : (jsx_runtime_1.jsx("div", { style: arrowButton }))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
+        ] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [visualModeEnvEnabled ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), visualModeActive && isExpanded && sequence.controls ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nestedDepth: nestedDepth, nodePath: nodePath })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/components/Timeline/TimelinePinchZoom.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const TimelinePinchZoom: FC;