@remotion/studio 4.0.290 → 4.0.292

package/dist/helpers/get-location-of-sequence.d.ts

@@ -1 +1,2 @@
 export declare const getLocationOfSequence: (stack: string | null) => import("@remotion/studio-shared").StackFrame | null;
+export declare const getLocationOfFunctionCall: (stack: string | null, functionName: string) => import("@remotion/studio-shared").StackFrame | null;

package/dist/helpers/get-location-of-sequence.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLocationOfSequence = void 0;
+exports.getLocationOfFunctionCall = exports.getLocationOfSequence = void 0;
 const parser_1 = require("../error-overlay/react-overlay/utils/parser");
 const getLocationOfSequence = (stack) => {
     if (!stack) {
@@ -19,3 +19,20 @@ const getLocationOfSequence = (stack) => {
     return null;
 };
 exports.getLocationOfSequence = getLocationOfSequence;
+const getLocationOfFunctionCall = (stack, functionName) => {
+    if (!stack) {
+        return null;
+    }
+    const parsed = (0, parser_1.parseStack)(stack.split('\n'));
+    let i = 0;
+    while (i < parsed.length) {
+        const frame = parsed[i];
+        if (frame.functionName !== functionName) {
+            i++;
+            continue;
+        }
+        return parsed[i + 1];
+    }
+    return null;
+};
+exports.getLocationOfFunctionCall = getLocationOfFunctionCall;

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

@@ -1,2 +1,4 @@
 import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<Response>;
+export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition) => Promise<void>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openInEditor = void 0;
+exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
 const openInEditor = (stack) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
     return fetch(`/api/open-in-editor`, {
@@ -20,3 +20,13 @@ const openInEditor = (stack) => {
     });
 };
 exports.openInEditor = openInEditor;
+const openOriginalPositionInEditor = async (originalPosition) => {
+    await (0, exports.openInEditor)({
+        originalColumnNumber: originalPosition.column,
+        originalFileName: originalPosition.source,
+        originalFunctionName: null,
+        originalLineNumber: originalPosition.line,
+        originalScriptCode: null,
+    });
+};
+exports.openOriginalPositionInEditor = openOriginalPositionInEditor;

package/dist/helpers/retry-payload.js

@@ -37,7 +37,7 @@ const makeRetryPayload = (job) => {
             initialOpenGlRenderer: job.chromiumOptions.gl,
             initialHeadless: job.chromiumOptions.headless,
             initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
-            defaultProps: no_react_1.NoReactInternals.deserializeJSONWithCustomFields(job.serializedInputPropsWithCustomSchema),
+            defaultProps: no_react_1.NoReactInternals.deserializeJSONWithSpecialTypes(job.serializedInputPropsWithCustomSchema),
             inFrameMark: null,
             outFrameMark: null,
             initialOffthreadVideoCacheSizeInBytes: job.offthreadVideoCacheSizeInBytes,
@@ -84,7 +84,7 @@ const makeRetryPayload = (job) => {
             initialOpenGlRenderer: job.chromiumOptions.gl,
             initialHeadless: job.chromiumOptions.headless,
             initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
-            defaultProps: no_react_1.NoReactInternals.deserializeJSONWithCustomFields(job.serializedInputPropsWithCustomSchema),
+            defaultProps: no_react_1.NoReactInternals.deserializeJSONWithSpecialTypes(job.serializedInputPropsWithCustomSchema),
             initialStillImageFormat: defaults.stillImageFormat,
             inFrameMark: job.startFrame,
             outFrameMark: job.endFrame,
@@ -134,7 +134,7 @@ const makeRetryPayload = (job) => {
             initialOpenGlRenderer: job.chromiumOptions.gl,
             initialHeadless: job.chromiumOptions.headless,
             initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
-            defaultProps: no_react_1.NoReactInternals.deserializeJSONWithCustomFields(job.serializedInputPropsWithCustomSchema),
+            defaultProps: no_react_1.NoReactInternals.deserializeJSONWithSpecialTypes(job.serializedInputPropsWithCustomSchema),
             inFrameMark: job.startFrame,
             outFrameMark: job.endFrame,
             initialOffthreadVideoCacheSizeInBytes: job.offthreadVideoCacheSizeInBytes,

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

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const restart_studio_1 = require("../api/restart-studio");
+const AskAiModal_1 = require("../components/AskAiModal");
 const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
 const SizeSelector_1 = require("../components/SizeSelector");
 const TimelineInOutToggle_1 = require("../components/TimelineInOutToggle");
@@ -541,6 +542,21 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                 label: 'Tools',
                 leaveLeftPadding: false,
                 items: [
+                    {
+                        id: 'ask-ai',
+                        value: 'ask-ai',
+                        label: 'Ask AI',
+                        onClick: () => {
+                            var _a;
+                            closeMenu();
+                            (_a = AskAiModal_1.askAiModalRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
+                        },
+                        leftItem: null,
+                        keyHint: `${ShortcutHint_1.cmdOrCtrlCharacter}+J`,
+                        subMenu: null,
+                        type: 'item',
+                        quickSwitcherLabel: 'Ask AI',
+                    },
                     'EyeDropper' in window
                         ? {
                             id: 'color-picker',

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { saveDefaultProps } from './api/save-default-props';
 export { seek } from './api/seek';
 export { toggle } from './api/toggle';
 export { updateDefaultProps } from './api/update-default-props';
+export { visualControl } from './api/visual-control';
 export { watchPublicFolder } from './api/watch-public-folder';
 export { watchStaticFile } from './api/watch-static-file';
 export { writeStaticFile } from './api/write-static-file';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StudioInternals = exports.writeStaticFile = exports.watchStaticFile = exports.watchPublicFolder = 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;
+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");
 var delete_static_file_1 = require("./api/delete-static-file");
 Object.defineProperty(exports, "deleteStaticFile", { enumerable: true, get: function () { return delete_static_file_1.deleteStaticFile; } });
@@ -26,6 +26,8 @@ var toggle_1 = require("./api/toggle");
 Object.defineProperty(exports, "toggle", { enumerable: true, get: function () { return toggle_1.toggle; } });
 var update_default_props_1 = require("./api/update-default-props");
 Object.defineProperty(exports, "updateDefaultProps", { enumerable: true, get: function () { return update_default_props_1.updateDefaultProps; } });
+var visual_control_1 = require("./api/visual-control");
+Object.defineProperty(exports, "visualControl", { enumerable: true, get: function () { return visual_control_1.visualControl; } });
 var watch_public_folder_1 = require("./api/watch-public-folder");
 Object.defineProperty(exports, "watchPublicFolder", { enumerable: true, get: function () { return watch_public_folder_1.watchPublicFolder; } });
 var watch_static_file_1 = require("./api/watch-static-file");

package/dist/renderEntry.js

@@ -173,7 +173,7 @@ const renderContent = (Root) => {
     const bundleMode = getBundleMode();
     if (bundleMode.type === 'composition') {
         const markup = ((0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionRoot, { logLevel: window.remotion_logLevel, numberOfAudioTags: 0, onlyRenderComposition: bundleMode.compositionName, currentCompositionMetadata: {
-                props: no_react_1.NoReactInternals.deserializeJSONWithCustomFields(bundleMode.serializedResolvedPropsWithSchema),
+                props: no_react_1.NoReactInternals.deserializeJSONWithSpecialTypes(bundleMode.serializedResolvedPropsWithSchema),
                 durationInFrames: bundleMode.compositionDurationInFrames,
                 fps: bundleMode.compositionFps,
                 height: bundleMode.compositionHeight,
@@ -266,12 +266,12 @@ if (typeof window !== 'undefined') {
             const { props, defaultProps, ...data } = resolved;
             return {
                 ...data,
-                serializedResolvedPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithDate({
+                serializedResolvedPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
                     data: props,
                     indent: undefined,
                     staticBase: null,
                 }).serializedString,
-                serializedDefaultPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithDate({
+                serializedDefaultPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
                     data: defaultProps,
                     indent: undefined,
                     staticBase: null,
@@ -315,12 +315,12 @@ if (typeof window !== 'undefined') {
         const { props, defaultProps, ...data } = prom;
         return {
             ...data,
-            serializedResolvedPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithDate({
+            serializedResolvedPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
                 data: props,
                 indent: undefined,
                 staticBase: null,
             }).serializedString,
-            serializedDefaultPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithDate({
+            serializedDefaultPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
                 data: defaultProps,
                 indent: undefined,
                 staticBase: null,

package/dist/state/z-index.d.ts

@@ -3,6 +3,7 @@ export declare const HigherZIndex: React.FC<{
     readonly onEscape: () => void;
     readonly onOutsideClick: (target: Node) => void;
     readonly children: React.ReactNode;
+    readonly disabled?: boolean;
 }>;
 export declare const useZIndex: () => {
     currentZIndex: number;

package/dist/state/z-index.js

@@ -31,16 +31,24 @@ const EscapeHook = ({ onEscape }) => {
     }, [keybindings, onEscape]);
     return null;
 };
-const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
+const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
     const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
     const containerRef = (0, react_1.useRef)(null);
-    const currentIndex = context.currentIndex + 1;
+    const currentIndex = disabled
+        ? context.currentIndex
+        : context.currentIndex + 1;
     (0, react_1.useEffect)(() => {
+        if (disabled) {
+            return;
+        }
         highestContext.registerZIndex(currentIndex);
         return () => highestContext.unregisterZIndex(currentIndex);
-    }, [currentIndex, highestContext]);
+    }, [currentIndex, highestContext, disabled]);
     (0, react_1.useEffect)(() => {
+        if (disabled) {
+            return;
+        }
         let onUp = null;
         const listener = (downEvent) => {
             var _a;
@@ -72,13 +80,13 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
             onUp = null;
             return window.removeEventListener('pointerdown', listener);
         };
-    }, [currentIndex, highestContext.highestIndex, onOutsideClick]);
+    }, [currentIndex, disabled, highestContext.highestIndex, onOutsideClick]);
     const value = (0, react_1.useMemo)(() => {
         return {
             currentIndex,
         };
     }, [currentIndex]);
-    return ((0, jsx_runtime_1.jsxs)(ZIndexContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: margin, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(ZIndexContext.Provider, { value: value, children: [disabled ? null : (0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: margin, children: children })] }));
 };
 exports.HigherZIndex = HigherZIndex;
 const useZIndex = () => {

package/dist/visual-controls/VisualControls.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { z, ZodTypeAny } from 'zod';
+export type VisualControlValueWithoutUnsaved = {
+    valueInCode: unknown;
+    schema: ZodTypeAny;
+    stack: string;
+};
+export type VisualControlValue = VisualControlValueWithoutUnsaved & {
+    unsavedValue: unknown;
+};
+export type Handles = Record<string, VisualControlValue>;
+export type VisualControlsContextType = {
+    handles: Handles;
+};
+export declare const VisualControlsTabActivatedContext: React.Context<boolean>;
+export type SetVisualControlsContextType = {
+    updateHandles: () => void;
+    updateValue: (key: string, value: unknown) => void;
+    visualControl: <T>(key: string, value: T, schema?: z.ZodTypeAny) => T;
+};
+export declare const VisualControlsContext: React.Context<VisualControlsContextType>;
+export type VisualControlRef = {
+    globalVisualControl: <T>(key: string, value: T, schema?: z.ZodTypeAny) => T;
+};
+export declare const visualControlRef: React.RefObject<VisualControlRef | null>;
+export declare const SetVisualControlsContext: React.Context<SetVisualControlsContextType>;
+export declare const VisualControlsProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/visual-controls/VisualControls.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlsProvider = exports.SetVisualControlsContext = exports.visualControlRef = exports.VisualControlsContext = exports.VisualControlsTabActivatedContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_zod_schema_from_primitive_1 = require("../api/get-zod-schema-from-primitive");
+const get_zod_if_possible_1 = require("../components/get-zod-if-possible");
+const get_current_edited_value_1 = require("./get-current-edited-value");
+exports.VisualControlsTabActivatedContext = (0, react_1.createContext)(false);
+exports.VisualControlsContext = (0, react_1.createContext)({
+    handles: {},
+});
+exports.visualControlRef = (0, react_1.createRef)();
+exports.SetVisualControlsContext = (0, react_1.createContext)({
+    updateHandles: () => {
+        throw new Error('updateHandles is not implemented');
+    },
+    updateValue: () => {
+        throw new Error('updateValue is not implemented');
+    },
+    visualControl: () => {
+        throw new Error('visualControl is not implemented');
+    },
+});
+const VisualControlsProvider = ({ children }) => {
+    const imperativeHandles = (0, react_1.useRef)({});
+    const [handles, setHandles] = (0, react_1.useState)({});
+    const state = (0, react_1.useMemo)(() => {
+        return {
+            handles,
+        };
+    }, [handles]);
+    const setControl = (0, react_1.useCallback)((key, value) => {
+        var _a, _b, _c, _d;
+        const currentUnsaved = (_b = (_a = imperativeHandles.current) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.unsavedValue;
+        const currentSavedState = (_d = (_c = imperativeHandles.current) === null || _c === void 0 ? void 0 : _c[key]) === null || _d === void 0 ? void 0 : _d.valueInCode;
+        const changedSavedValue = value.valueInCode !== currentSavedState;
+        const changedUnsavedValue = currentUnsaved === undefined && value.valueInCode !== undefined;
+        imperativeHandles.current = {
+            ...imperativeHandles.current,
+            [key]: {
+                ...value,
+                unsavedValue: currentUnsaved !== null && currentUnsaved !== void 0 ? currentUnsaved : value.valueInCode,
+                valueInCode: value.valueInCode,
+            },
+        };
+        return {
+            changed: changedSavedValue || changedUnsavedValue,
+            currentValue: (0, get_current_edited_value_1.getVisualControlEditedValue)({
+                key,
+                handles: imperativeHandles.current,
+            }),
+        };
+    }, []);
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    const changedRef = (0, react_1.useRef)(false);
+    const visualControl = (0, react_1.useCallback)(
+    // eslint-disable-next-line prefer-arrow-callback
+    function (key, value, schema) {
+        // eslint-disable-next-line no-constant-condition
+        if (handles && false) {
+            /** Intentional: State is managed imperatively */
+        }
+        if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+            return value;
+        }
+        if (!z) {
+            return value;
+        }
+        const { changed, currentValue } = setControl(key, {
+            valueInCode: value,
+            schema: schema !== null && schema !== void 0 ? schema : (0, get_zod_schema_from_primitive_1.getZodSchemaFromPrimitive)(value, z),
+            stack: new Error().stack,
+        });
+        if (changed) {
+            changedRef.current = true;
+        }
+        return currentValue;
+    }, [setControl, handles, z]);
+    const updateHandles = (0, react_1.useCallback)(() => {
+        setHandles(() => {
+            return imperativeHandles.current;
+        });
+    }, []);
+    const updateValue = (0, react_1.useCallback)((key, value) => {
+        imperativeHandles.current = {
+            ...imperativeHandles.current,
+            [key]: {
+                ...imperativeHandles.current[key],
+                unsavedValue: value,
+            },
+        };
+        updateHandles();
+    }, [updateHandles]);
+    (0, react_1.useImperativeHandle)(exports.visualControlRef, () => {
+        return {
+            globalVisualControl: visualControl,
+        };
+    }, [visualControl]);
+    (0, react_1.useEffect)(() => {
+        const callback = () => {
+            if (imperativeHandles.current) {
+                updateHandles();
+                changedRef.current = false;
+            }
+        };
+        const interval = setInterval(callback, 100);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [updateHandles]);
+    const setState = (0, react_1.useMemo)(() => {
+        return {
+            setControl,
+            updateHandles,
+            updateValue,
+            visualControl,
+        };
+    }, [setControl, updateHandles, updateValue, visualControl]);
+    return ((0, jsx_runtime_1.jsx)(exports.VisualControlsTabActivatedContext.Provider, { value: Object.keys(state.handles).length > 0, children: (0, jsx_runtime_1.jsx)(exports.VisualControlsContext.Provider, { value: state, children: (0, jsx_runtime_1.jsx)(exports.SetVisualControlsContext.Provider, { value: setState, children: children }) }) }));
+};
+exports.VisualControlsProvider = VisualControlsProvider;

package/dist/visual-controls/get-current-edited-value.d.ts

@@ -0,0 +1,5 @@
+import type { Handles } from './VisualControls';
+export declare const getVisualControlEditedValue: ({ handles, key, }: {
+    handles: Handles;
+    key: string;
+}) => unknown;

package/dist/visual-controls/get-current-edited-value.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVisualControlEditedValue = void 0;
+const getVisualControlEditedValue = ({ handles, key, }) => {
+    var _a, _b;
+    // TODO: What if z.null()
+    return (_b = (_a = handles === null || handles === void 0 ? void 0 : handles[key]) === null || _a === void 0 ? void 0 : _a.unsavedValue) !== null && _b !== void 0 ? _b : null;
+};
+exports.getVisualControlEditedValue = getVisualControlEditedValue;

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.290",
+  "version": "4.0.292",
   "description": "APIs for interacting with the Remotion Studio",
   "main": "dist",
   "sideEffects": false,
@@ -23,20 +23,20 @@
     "source-map": "0.7.3",
     "open": "^8.4.2",
     "zod": "3.22.3",
-    "@remotion/player": "4.0.290",
-    "remotion": "4.0.290",
-    "@remotion/media-utils": "4.0.290",
-    "@remotion/media-parser": "4.0.290",
-    "@remotion/studio-shared": "4.0.290",
-    "@remotion/renderer": "4.0.290",
-    "@remotion/zod-types": "4.0.290"
+    "@remotion/player": "4.0.292",
+    "remotion": "4.0.292",
+    "@remotion/media-utils": "4.0.292",
+    "@remotion/media-parser": "4.0.292",
+    "@remotion/studio-shared": "4.0.292",
+    "@remotion/zod-types": "4.0.292",
+    "@remotion/renderer": "4.0.292"
   },
   "devDependencies": {
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "@types/semver": "^7.3.4",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.290"
+    "@remotion/eslint-config-internal": "4.0.292"
   },
   "publishConfig": {
     "access": "public"