@remotion/studio 4.0.279 → 4.0.282

package/.turbo/turbo-make.log

@@ -1,6 +1,6 @@
 
 
-> @remotion/studio@4.0.279 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.282 make /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 
-[170.43ms] Generated.
+[54.39ms] Generated.

package/dist/api/get-zod-schema-from-primitive.d.ts

@@ -0,0 +1,2 @@
+import type { ZodType } from '../components/get-zod-if-possible';
+export declare const getZodSchemaFromPrimitive: (value: unknown, z: ZodType) => import("zod").ZodString | import("zod").ZodNumber;

package/dist/api/get-zod-schema-from-primitive.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getZodSchemaFromPrimitive = void 0;
+const getZodSchemaFromPrimitive = (value, z) => {
+    if (typeof value === 'string') {
+        return z.string();
+    }
+    if (typeof value === 'number') {
+        return z.number();
+    }
+    throw new Error('Unknown primitive type');
+};
+exports.getZodSchemaFromPrimitive = getZodSchemaFromPrimitive;

package/dist/api/use-visual-control.d.ts

@@ -0,0 +1,7 @@
+import type { z } from 'zod';
+type VisualControl = <T>(key: string, value: T, schema?: z.ZodTypeAny) => T;
+type UseVisualControl = {
+    visualControl: VisualControl;
+};
+export declare const useVisualControl: () => UseVisualControl;
+export {};

package/dist/api/use-visual-control.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVisualControl = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_zod_if_possible_1 = require("../components/get-zod-if-possible");
+const VisualControls_1 = require("../visual-controls/VisualControls");
+const get_zod_schema_from_primitive_1 = require("./get-zod-schema-from-primitive");
+const useVisualControl = () => {
+    const { addHook, removeHook, setControl, updateHandles } = (0, react_1.useContext)(VisualControls_1.SetVisualControlsContext);
+    const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const changed = (0, react_1.useRef)(false);
+    const [stack] = (0, react_1.useState)(() => {
+        return new Error().stack;
+    });
+    const [hook] = (0, react_1.useState)(() => {
+        return (0, VisualControls_1.makeHook)(stack);
+    });
+    (0, react_1.useEffect)(() => {
+        if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+            return;
+        }
+        addHook(hook);
+    }, [addHook, hook]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            removeHook(hook);
+        };
+    }, [hook, removeHook]);
+    (0, react_1.useEffect)(() => {
+        if (changed.current) {
+            updateHandles();
+            changed.current = false;
+        }
+    }, [updateHandles]);
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    return (0, react_1.useMemo)(() => ({
+        visualControl(key, value, schema) {
+            if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+                return value;
+            }
+            if (!z) {
+                return value;
+            }
+            const { same, currentValue } = setControl(hook, key, {
+                valueInCode: value,
+                unsavedValue: value,
+                schema: schema !== null && schema !== void 0 ? schema : (0, get_zod_schema_from_primitive_1.getZodSchemaFromPrimitive)(value, z),
+                stack: new Error().stack,
+            });
+            if (!same) {
+                changed.current = true;
+            }
+            return currentValue;
+        },
+    }), [handles, hook, setControl, z]);
+};
+exports.useVisualControl = useVisualControl;

package/dist/components/AudioWaveform.js

@@ -100,6 +100,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, s
             startTimeInSeconds: startFrom / vidConf.fps,
             durationInSeconds: Math.min((durationInFrames / vidConf.fps) * playbackRate, metadata.durationInSeconds),
             numberOfSamples,
+            normalize: false,
         });
     }, [
         durationInFrames,

package/dist/components/RenderModal/SchemaEditor/ZodMatrixEditor.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { UpdaterFunction } from './ZodSwitch';
+import type { JSONPath } from './zod-types';
+export declare const ZodMatrixEditor: React.FC<{
+    readonly schema: z.ZodTypeAny;
+    readonly jsonPath: JSONPath;
+    readonly value: unknown[];
+    readonly defaultValue: unknown[];
+    readonly setValue: UpdaterFunction<unknown[]>;
+    readonly onSave: UpdaterFunction<unknown[]>;
+    readonly showSaveButton: boolean;
+    readonly onRemove: null | (() => void);
+    readonly saving: boolean;
+    readonly saveDisabledByParent: boolean;
+    readonly mayPad: boolean;
+}>;

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

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodMatrixEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const Fieldset_1 = require("./Fieldset");
+const SchemaLabel_1 = require("./SchemaLabel");
+const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
+const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
+const ZodArrayItemEditor_1 = require("./ZodArrayItemEditor");
+const ZodFieldValidation_1 = require("./ZodFieldValidation");
+const create_zod_values_1 = require("./create-zod-values");
+const deep_equal_1 = require("./deep-equal");
+const local_state_1 = require("./local-state");
+const rowStyle = {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+};
+const ZodMatrixEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
+    const { localValue, onChange, RevisionContextProvider, reset } = (0, local_state_1.useLocalState)({
+        unsavedValue: value,
+        schema,
+        setValue,
+        savedValue: defaultValue,
+    });
+    const [expanded, setExpanded] = (0, react_1.useState)(true);
+    const def = schema._def;
+    const suffix = (0, react_1.useMemo)(() => {
+        return expanded ? ' [' : ' [...] ';
+    }, [expanded]);
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
+    const isDefaultValue = (0, react_1.useMemo)(() => {
+        return (0, deep_equal_1.deepEqual)(localValue.value, defaultValue);
+    }, [defaultValue, localValue]);
+    const dimensions = Math.sqrt(localValue.value.length);
+    if (!Number.isInteger(dimensions)) {
+        throw new Error('Invalid matrix');
+    }
+    const chunkedItems = (0, react_1.useMemo)(() => {
+        return localValue.value.reduce((acc, item, index) => {
+            const chunkIndex = Math.floor(index / dimensions);
+            acc[chunkIndex] = acc[chunkIndex] || [];
+            acc[chunkIndex].push(item);
+            return acc;
+        }, []);
+    }, [localValue.value, dimensions]);
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                }, children: (0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { onReset: reset, isDefaultValue: isDefaultValue, jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, onSave: () => {
+                        onSave(() => localValue.value, false, false);
+                    }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? ((0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsxs)(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [chunkedItems.map((row, rowIndex) => {
+                            return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment
+                            // eslint-disable-next-line react/no-array-index-key
+                            , { children: (0, jsx_runtime_1.jsx)("div", { style: rowStyle, children: row.map((item, _index) => {
+                                        var _a;
+                                        const actualIndex = rowIndex * dimensions + _index;
+                                        return ((0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor, { onChange: onChange, value: item, def: def, index: actualIndex, jsonPath: jsonPath, defaultValue: (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[actualIndex]) !== null && _a !== void 0 ? _a : (0, create_zod_values_1.createZodValues)(def.type, z, zodTypes), onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad, mayRemove: false }) }, `${_index}${localValue.keyStabilityRevision}`));
+                                    }) }) }, `${rowIndex}${localValue.keyStabilityRevision}`));
+                        }), value.length === 0 ? ((0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: 0, onChange: onChange, isLast: true, showAddButton: true })) : null] }) })) : null, (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] }));
+};
+exports.ZodMatrixEditor = ZodMatrixEditor;

package/dist/components/VisualControls/ClickableFileName.d.ts

@@ -0,0 +1,3 @@
+export declare const ClickableFileName: ({ stack }: {
+    readonly stack: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VisualControls/ClickableFileName.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClickableFileName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const source_attribution_1 = require("../Timeline/TimelineStack/source-attribution");
+const get_original_stack_trace_1 = require("./get-original-stack-trace");
+const label = {
+    fontSize: 13,
+};
+const ClickableFileName = ({ stack }) => {
+    const originalFileName = (0, get_original_stack_trace_1.useOriginalFileName)(stack);
+    const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
+    const hoverEffect = titleHovered && originalFileName;
+    const onTitlePointerEnter = (0, react_1.useCallback)(() => {
+        setTitleHovered(true);
+    }, []);
+    const onTitlePointerLeave = (0, react_1.useCallback)(() => {
+        setTitleHovered(false);
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...label,
+            cursor: originalFileName ? 'pointer' : undefined,
+            borderBottom: hoverEffect ? '1px solid #fff' : 'none',
+        };
+    }, [originalFileName, hoverEffect]);
+    const onClick = (0, react_1.useCallback)(async () => {
+        if (!originalFileName) {
+            return;
+        }
+        await (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName);
+    }, [originalFileName]);
+    return ((0, jsx_runtime_1.jsx)("span", { style: style, onClick: onClick, onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, children: originalFileName
+            ? (0, source_attribution_1.getOriginalSourceAttribution)(originalFileName)
+            : 'Loading...' }));
+};
+exports.ClickableFileName = ClickableFileName;

package/dist/components/VisualControls/VisualControlHandle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { VisualControlHook } from '../../visual-controls/VisualControls';
+import { type VisualControlValue } from '../../visual-controls/VisualControls';
+export declare const VisualControlHandle: React.FC<{
+    readonly value: VisualControlValue;
+    readonly keyName: string;
+    readonly hook: VisualControlHook;
+}>;

package/dist/components/VisualControls/VisualControlHandle.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlHandle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const get_current_edited_value_1 = require("../../visual-controls/get-current-edited-value");
+const ZodSwitch_1 = require("../RenderModal/SchemaEditor/ZodSwitch");
+const local_state_1 = require("../RenderModal/SchemaEditor/local-state");
+const get_zod_if_possible_1 = require("../get-zod-if-possible");
+const container = {
+    marginBottom: 10,
+};
+const VisualControlHandle = ({ value, keyName, hook }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const state = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const { updateValue } = (0, react_1.useContext)(VisualControls_1.SetVisualControlsContext);
+    const currentValue = (0, get_current_edited_value_1.getVisualControlEditedValue)({
+        handles: state.handles,
+        hook,
+        key: keyName,
+    });
+    const { localValue, RevisionContextProvider, onChange } = (0, local_state_1.useLocalState)({
+        schema: value.schema,
+        setValue: (updater) => updateValue(hook, keyName, updater(currentValue)),
+        unsavedValue: currentValue,
+        savedValue: value.valueInCode,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { mayPad: true, schema: value.schema, showSaveButton: true, saving: false, saveDisabledByParent: false, onSave: () => undefined, jsonPath: [keyName], value: localValue.value, defaultValue: value.valueInCode, setValue: onChange, onRemove: null }) }) }));
+};
+exports.VisualControlHandle = VisualControlHandle;

package/dist/components/VisualControls/VisualControlsContent.d.ts

@@ -0,0 +1 @@
+export declare const VisualControlsContent: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/VisualControls/VisualControlsContent.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlsContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const ClickableFileName_1 = require("./ClickableFileName");
+const VisualControlHandle_1 = require("./VisualControlHandle");
+const Control = ({ hook }) => {
+    const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const handle = handles[hook.id];
+    if (!handle) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ClickableFileName_1.ClickableFileName, { stack: hook.stack }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 1 }), Object.entries(handle).map(([key, value]) => {
+                return ((0, jsx_runtime_1.jsx)(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value, hook: hook }, key));
+            })] }, hook.id));
+};
+const container = {
+    padding: 12,
+    overflowY: 'auto',
+};
+const VisualControlsContent = () => {
+    const { hooks: controls } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: controls.map((hook) => ((0, jsx_runtime_1.jsx)(Control, { hook: hook }, hook.id))) }));
+};
+exports.VisualControlsContent = VisualControlsContent;

package/dist/components/VisualControls/VisualControlsTabs.d.ts

@@ -0,0 +1 @@
+export declare const VisualControlsContent: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/VisualControls/VisualControlsTabs.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlsContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const VisualControlsContent = () => {
+    const { controls } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    return ((0, jsx_runtime_1.jsx)("div", { children: controls.map((control) => ((0, jsx_runtime_1.jsx)("div", { children: control.id }, control.id))) }));
+};
+exports.VisualControlsContent = VisualControlsContent;

package/dist/components/VisualControls/get-original-stack-trace.d.ts

@@ -0,0 +1,2 @@
+import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+export declare const useOriginalFileName: (stack: string) => OriginalPosition | null;

package/dist/components/VisualControls/get-original-stack-trace.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOriginalFileName = void 0;
+const react_1 = require("react");
+const get_stack_1 = require("../Timeline/TimelineStack/get-stack");
+const useOriginalFileName = (stack) => {
+    const [originalFileName, setOriginalFileName] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!stack) {
+            return;
+        }
+        (0, get_stack_1.getOriginalLocationFromStack)(stack, 'visual-control')
+            .then((frame) => {
+            setOriginalFileName(frame);
+        })
+            .catch((err) => {
+            // eslint-disable-next-line no-console
+            console.error('Could not get original location of Sequence', err);
+        });
+    }, [stack]);
+    return originalFileName;
+};
+exports.useOriginalFileName = useOriginalFileName;

package/dist/esm/internals.mjs

@@ -19364,7 +19364,8 @@ var AudioWaveform = ({
       audioData: metadata,
       startTimeInSeconds: startFrom / vidConf.fps,
       durationInSeconds: Math.min(durationInFrames / vidConf.fps * playbackRate, metadata.durationInSeconds),
-      numberOfSamples
+      numberOfSamples,
+      normalize: false
     });
   }, [
     durationInFrames,

package/dist/esm/previewEntry.mjs

@@ -19646,7 +19646,8 @@ var AudioWaveform = ({
       audioData: metadata,
       startTimeInSeconds: startFrom / vidConf.fps,
       durationInSeconds: Math.min(durationInFrames / vidConf.fps * playbackRate, metadata.durationInSeconds),
-      numberOfSamples
+      numberOfSamples,
+      normalize: false
     });
   }, [
     durationInFrames,

package/dist/esm/renderEntry.mjs

@@ -19993,7 +19993,8 @@ var container39, errorMessage, canvasStyle, AudioWaveform = ({
       audioData: metadata,
       startTimeInSeconds: startFrom / vidConf.fps,
       durationInSeconds: Math.min(durationInFrames / vidConf.fps * playbackRate, metadata.durationInSeconds),
-      numberOfSamples
+      numberOfSamples,
+      normalize: false
     });
   }, [
     durationInFrames,

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { ZodTypeAny } from 'zod';
+export type VisualControlValue = {
+    valueInCode: unknown;
+    unsavedValue: unknown;
+    schema: ZodTypeAny;
+    stack: string;
+};
+export type VisualControlHook = {
+    id: number;
+    stack: string;
+};
+type Handle = Record<string, VisualControlValue>;
+export type Handles = Record<number, Handle>;
+export type VisualControlsContextType = {
+    hooks: VisualControlHook[];
+    handles: Handles;
+};
+export declare const VisualControlsTabActivatedContext: React.Context<boolean>;
+export type SetVisualControlsContextType = {
+    addHook: (hook: VisualControlHook) => void;
+    removeHook: (hook: VisualControlHook) => void;
+    setControl: (hook: VisualControlHook, key: string, value: VisualControlValue) => {
+        same: boolean;
+        currentValue: unknown;
+    };
+    updateHandles: () => void;
+    updateValue: (hook: VisualControlHook, key: string, value: unknown) => void;
+};
+export declare const makeHook: (stack: string) => VisualControlHook;
+export declare const VisualControlsContext: React.Context<VisualControlsContextType>;
+export declare const SetVisualControlsContext: React.Context<SetVisualControlsContextType>;
+export declare const VisualControlsProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export {};

package/dist/visual-controls/VisualControls.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlsProvider = exports.SetVisualControlsContext = exports.VisualControlsContext = exports.makeHook = exports.VisualControlsTabActivatedContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const get_current_edited_value_1 = require("./get-current-edited-value");
+exports.VisualControlsTabActivatedContext = (0, react_1.createContext)(false);
+const makeHook = (stack) => {
+    return { id: Math.random(), stack };
+};
+exports.makeHook = makeHook;
+exports.VisualControlsContext = (0, react_1.createContext)({
+    hooks: [],
+    handles: {},
+});
+exports.SetVisualControlsContext = (0, react_1.createContext)({
+    addHook: () => {
+        throw new Error('addControl is not implemented');
+    },
+    removeHook: () => {
+        throw new Error('removeControl is not implemented');
+    },
+    setControl: () => {
+        throw new Error('addControl is not implemented');
+    },
+    updateHandles: () => {
+        throw new Error('updateHandles is not implemented');
+    },
+    updateValue: () => {
+        throw new Error('updateValue is not implemented');
+    },
+});
+const VisualControlsProvider = ({ children }) => {
+    const [hooks, setHooks] = (0, react_1.useState)([]);
+    const imperativeHandles = (0, react_1.useRef)({});
+    const [handles, setHandles] = (0, react_1.useState)({});
+    const [tabActivated, setTabActivated] = (0, react_1.useState)(false);
+    const addHook = (0, react_1.useCallback)((hook) => {
+        setHooks((prev) => {
+            if (prev.find((c) => c.id === hook.id)) {
+                return prev;
+            }
+            return [...prev, hook];
+        });
+        setTabActivated(true);
+    }, [setHooks]);
+    const removeHook = (0, react_1.useCallback)((hook) => {
+        setHooks((prev) => prev.filter((c) => c !== hook));
+    }, [setHooks]);
+    const state = (0, react_1.useMemo)(() => {
+        return {
+            hooks,
+            handles,
+        };
+    }, [hooks, handles]);
+    const setControl = (0, react_1.useCallback)((hook, key, value) => {
+        var _a, _b, _c, _d, _e, _f;
+        const currentSaved = (_c = (_b = (_a = imperativeHandles.current) === null || _a === void 0 ? void 0 : _a[hook.id]) === null || _b === void 0 ? void 0 : _b[key]) === null || _c === void 0 ? void 0 : _c.valueInCode;
+        const currentUnsaved = (_f = (_e = (_d = imperativeHandles.current) === null || _d === void 0 ? void 0 : _d[hook.id]) === null || _e === void 0 ? void 0 : _e[key]) === null || _f === void 0 ? void 0 : _f.unsavedValue;
+        if (currentSaved === value.valueInCode) {
+            return {
+                same: true,
+                currentValue: (0, get_current_edited_value_1.getVisualControlEditedValue)({
+                    hook,
+                    key,
+                    handles: imperativeHandles.current,
+                }),
+            };
+        }
+        imperativeHandles.current = {
+            ...imperativeHandles.current,
+            [hook.id]: {
+                ...imperativeHandles.current[hook.id],
+                [key]: {
+                    ...value,
+                    unsavedValue: currentUnsaved !== null && currentUnsaved !== void 0 ? currentUnsaved : value.valueInCode,
+                },
+            },
+        };
+        return {
+            same: false,
+            currentValue: (0, get_current_edited_value_1.getVisualControlEditedValue)({
+                hook,
+                key,
+                handles: imperativeHandles.current,
+            }),
+        };
+    }, []);
+    const updateHandles = (0, react_1.useCallback)(() => {
+        setHandles(() => {
+            return imperativeHandles.current;
+        });
+    }, []);
+    const updateValue = (0, react_1.useCallback)((hook, key, value) => {
+        imperativeHandles.current = {
+            ...imperativeHandles.current,
+            [hook.id]: {
+                ...imperativeHandles.current[hook.id],
+                [key]: {
+                    ...imperativeHandles.current[hook.id][key],
+                    unsavedValue: value,
+                },
+            },
+        };
+        updateHandles();
+    }, [updateHandles]);
+    const setState = (0, react_1.useMemo)(() => {
+        return {
+            addHook,
+            removeHook,
+            setControl,
+            updateHandles,
+            updateValue,
+        };
+    }, [addHook, removeHook, setControl, updateHandles, updateValue]);
+    return ((0, jsx_runtime_1.jsx)(exports.VisualControlsTabActivatedContext.Provider, { value: tabActivated, 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,6 @@
+import type { Handles, VisualControlHook } from './VisualControls';
+export declare const getVisualControlEditedValue: ({ handles, hook, key, }: {
+    handles: Handles;
+    hook: VisualControlHook;
+    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, hook, key, }) => {
+    var _a, _b, _c;
+    // TODO: What if z.null()
+    return (_c = (_b = (_a = handles === null || handles === void 0 ? void 0 : handles[hook.id]) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.unsavedValue) !== null && _c !== void 0 ? _c : 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.279",
+  "version": "4.0.282",
   "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": "4.0.279",
-    "@remotion/player": "4.0.279",
-    "@remotion/media-parser": "4.0.279",
-    "@remotion/media-utils": "4.0.279",
-    "@remotion/renderer": "4.0.279",
-    "@remotion/studio-shared": "4.0.279",
-    "@remotion/zod-types": "4.0.279"
+    "remotion": "4.0.282",
+    "@remotion/player": "4.0.282",
+    "@remotion/media-parser": "4.0.282",
+    "@remotion/media-utils": "4.0.282",
+    "@remotion/studio-shared": "4.0.282",
+    "@remotion/zod-types": "4.0.282",
+    "@remotion/renderer": "4.0.282"
   },
   "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.279"
+    "@remotion/eslint-config-internal": "4.0.282"
   },
   "publishConfig": {
     "access": "public"