@remotion/studio 4.0.290 → 4.0.292

package/dist/components/Timeline/TimelineStack/get-stack.d.ts

@@ -1 +1 @@
-export declare const getOriginalLocationFromStack: (stack: string) => Promise<import("../../../error-overlay/react-overlay/utils/get-source-map").OriginalPosition | null>;
+export declare const getOriginalLocationFromStack: (stack: string, type: "sequence" | "visual-control") => Promise<import("../../../error-overlay/react-overlay/utils/get-source-map").OriginalPosition | null>;

package/dist/components/Timeline/TimelineStack/get-stack.js

@@ -39,8 +39,10 @@ const getSourceMapCache = async (fileName) => {
     isCreating[fileName] = false;
     return map;
 };
-const getOriginalLocationFromStack = async (stack) => {
-    const location = (0, get_location_of_sequence_1.getLocationOfSequence)(stack);
+const getOriginalLocationFromStack = async (stack, type) => {
+    const location = type === 'sequence'
+        ? (0, get_location_of_sequence_1.getLocationOfSequence)(stack)
+        : (0, get_location_of_sequence_1.getLocationOfFunctionCall)(stack, 'visualControl');
     if (!location) {
         return null;
     }

package/dist/components/Timeline/TimelineStack/index.js

@@ -50,13 +50,7 @@ const TimelineStack = ({ isCompact, sequence }) => {
         }
         setOpening(true);
         try {
-            await (0, open_in_editor_1.openInEditor)({
-                originalColumnNumber: location.column,
-                originalFileName: location.source,
-                originalFunctionName: null,
-                originalLineNumber: location.line,
-                originalScriptCode: null,
-            });
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(location);
         }
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
@@ -114,7 +108,7 @@ const TimelineStack = ({ isCompact, sequence }) => {
         if (!sequence.stack) {
             return;
         }
-        (0, get_stack_1.getOriginalLocationFromStack)(sequence.stack)
+        (0, get_stack_1.getOriginalLocationFromStack)(sequence.stack, 'sequence')
             .then((frame) => {
             setOriginalLocation(frame);
         })

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

@@ -0,0 +1,13 @@
+import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+export type OriginalFileNameState = {
+    type: 'loaded';
+    originalFileName: OriginalPosition;
+} | {
+    type: 'error';
+    error: Error;
+} | {
+    type: 'loading';
+};
+export declare const ClickableFileName: ({ originalFileName, }: {
+    readonly originalFileName: OriginalFileNameState;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VisualControls/ClickableFileName.js

@@ -0,0 +1,43 @@
+"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 colors_1 = require("../../helpers/colors");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const Fieldset_1 = require("../RenderModal/SchemaEditor/Fieldset");
+const source_attribution_1 = require("../Timeline/TimelineStack/source-attribution");
+const container = {
+    paddingLeft: Fieldset_1.SCHEMA_EDITOR_FIELDSET_PADDING,
+    paddingTop: Fieldset_1.SCHEMA_EDITOR_FIELDSET_PADDING / 2,
+};
+const ClickableFileName = ({ originalFileName, }) => {
+    const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
+    const hoverEffect = titleHovered && originalFileName.type === 'loaded';
+    const onTitlePointerEnter = (0, react_1.useCallback)(() => {
+        setTitleHovered(true);
+    }, []);
+    const onTitlePointerLeave = (0, react_1.useCallback)(() => {
+        setTitleHovered(false);
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            fontSize: 12,
+            cursor: originalFileName.type === 'loaded' ? 'pointer' : undefined,
+            borderBottom: hoverEffect ? '1px solid #fff' : 'none',
+            color: hoverEffect ? '#fff' : colors_1.LIGHT_COLOR,
+        };
+    }, [originalFileName, hoverEffect]);
+    const onClick = (0, react_1.useCallback)(async () => {
+        if (originalFileName.type !== 'loaded') {
+            return;
+        }
+        await (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName.originalFileName);
+    }, [originalFileName]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("span", { style: style, onClick: onClick, onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, children: originalFileName.type === 'loaded'
+                ? (0, source_attribution_1.getOriginalSourceAttribution)(originalFileName.originalFileName)
+                : originalFileName.type === 'loading'
+                    ? 'Loading...'
+                    : 'Error loading' }) }));
+};
+exports.ClickableFileName = ClickableFileName;

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

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

package/dist/components/VisualControls/VisualControlHandle.js

@@ -0,0 +1,96 @@
+"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 remotion_1 = require("remotion");
+const no_react_1 = require("remotion/no-react");
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const get_current_edited_value_1 = require("../../visual-controls/get-current-edited-value");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const ZodSwitch_1 = require("../RenderModal/SchemaEditor/ZodSwitch");
+const extract_enum_json_paths_1 = require("../RenderModal/SchemaEditor/extract-enum-json-paths");
+const local_state_1 = require("../RenderModal/SchemaEditor/local-state");
+const actions_1 = require("../RenderQueue/actions");
+const get_zod_if_possible_1 = require("../get-zod-if-possible");
+const layout_1 = require("../layout");
+const VisualControlHandleHeader_1 = require("./VisualControlHandleHeader");
+const get_original_stack_trace_1 = require("./get-original-stack-trace");
+const VisualControlHandle = ({ value, keyName }) => {
+    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 state = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const { updateValue } = (0, react_1.useContext)(VisualControls_1.SetVisualControlsContext);
+    const { fastRefreshes } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
+    const { increaseManualRefreshes } = (0, react_1.useContext)(remotion_1.Internals.SetNonceContext);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const currentValue = (0, get_current_edited_value_1.getVisualControlEditedValue)({
+        handles: state.handles,
+        key: keyName,
+    });
+    const originalFileName = (0, get_original_stack_trace_1.useOriginalFileName)(value.stack);
+    const { localValue, RevisionContextProvider, onChange } = (0, local_state_1.useLocalState)({
+        schema: value.schema,
+        setValue: (updater) => {
+            updateValue(keyName, updater(currentValue));
+            increaseManualRefreshes();
+        },
+        unsavedValue: currentValue,
+        savedValue: value.valueInCode,
+    });
+    const disableSave = window.remotion_isReadOnlyStudio || originalFileName.type !== 'loaded';
+    const onSave = (0, react_1.useCallback)((updater) => {
+        if (disableSave) {
+            return;
+        }
+        if (originalFileName.type !== 'loaded') {
+            throw new Error('Original file name is not loaded');
+        }
+        const val = updater(value.valueInCode);
+        window.remotion_ignoreFastRefreshUpdate = fastRefreshes + 1;
+        const enumPaths = (0, extract_enum_json_paths_1.extractEnumJsonPaths)({
+            schema: value.schema,
+            zodRuntime: z,
+            currentPath: [],
+            zodTypes,
+        });
+        setSaving(true);
+        Promise.resolve()
+            .then(() => {
+            return (0, actions_1.applyVisualControlChange)({
+                fileName: originalFileName.originalFileName.source,
+                changes: [
+                    {
+                        id: keyName,
+                        newValueSerialized: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
+                            data: val,
+                            indent: 2,
+                            staticBase: window.remotion_staticBase,
+                        }).serializedString,
+                        enumPaths,
+                    },
+                ],
+            });
+        })
+            .catch((e) => {
+            (0, NotificationCenter_1.showNotification)(`Could not save visual control: ${e.message}`, 3000);
+        });
+    }, [
+        disableSave,
+        value.valueInCode,
+        value.schema,
+        fastRefreshes,
+        z,
+        originalFileName,
+        keyName,
+        zodTypes,
+    ]);
+    (0, react_1.useEffect)(() => {
+        setSaving(false);
+    }, [fastRefreshes]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(VisualControlHandleHeader_1.VisualControlHandleHeader, { originalFileName: originalFileName }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { mayPad: true, schema: value.schema, showSaveButton: !disableSave, saving: saving, saveDisabledByParent: false, onSave: onSave, jsonPath: [keyName], value: localValue.value, defaultValue: value.valueInCode, setValue: onChange, onRemove: null }) })] }));
+};
+exports.VisualControlHandle = VisualControlHandle;

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

@@ -0,0 +1,4 @@
+import type { OriginalFileNameState } from './ClickableFileName';
+export declare const VisualControlHandleHeader: React.FC<{
+    readonly originalFileName: OriginalFileNameState;
+}>;

package/dist/components/VisualControls/VisualControlHandleHeader.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlHandleHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ClickableFileName_1 = require("./ClickableFileName");
+const VisualControlHandleHeader = ({ originalFileName }) => {
+    return (0, jsx_runtime_1.jsx)(ClickableFileName_1.ClickableFileName, { originalFileName: originalFileName });
+};
+exports.VisualControlHandleHeader = VisualControlHandleHeader;

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,53 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlsContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const SchemaSeparationLine_1 = require("../RenderModal/SchemaEditor/SchemaSeparationLine");
+const VisualControlHandle_1 = require("./VisualControlHandle");
+const container = {
+    overflowY: 'auto',
+};
+const VisualControlsContent = () => {
+    const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const entries = Object.entries(handles);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: entries.map(([key, value], i) => {
+            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value }), i === entries.length - 1 ? null : (0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
+        }) }));
+};
+exports.VisualControlsContent = VisualControlsContent;

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

@@ -0,0 +1,2 @@
+import type { OriginalFileNameState } from './ClickableFileName';
+export declare const useOriginalFileName: (stack: string) => OriginalFileNameState;

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

@@ -0,0 +1,31 @@
+"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)({ type: 'loading' });
+    (0, react_1.useEffect)(() => {
+        if (!stack) {
+            return;
+        }
+        (0, get_stack_1.getOriginalLocationFromStack)(stack, 'visual-control')
+            .then((frame) => {
+            if (frame === null) {
+                setOriginalFileName({
+                    type: 'error',
+                    error: new Error('No frame found'),
+                });
+            }
+            else {
+                setOriginalFileName({ type: 'loaded', originalFileName: 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/index.mjs

@@ -202,7 +202,12 @@ var restartStudio = () => {
 import { getRemotionEnvironment as getRemotionEnvironment4 } from "remotion";
 
 // src/components/RenderModal/SchemaEditor/extract-enum-json-paths.ts
-var extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
+var extractEnumJsonPaths = ({
+  schema,
+  zodRuntime,
+  currentPath,
+  zodTypes
+}) => {
   const def = schema._def;
   const typeName = def.typeName;
   switch (typeName) {
@@ -210,45 +215,87 @@ var extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
       const shape = def.shape();
       const keys = Object.keys(shape);
       return keys.map((key) => {
-        return extractEnumJsonPaths(shape[key], zodRuntime, [
-          ...currentPath,
-          key
-        ]);
+        return extractEnumJsonPaths({
+          schema: shape[key],
+          zodRuntime,
+          currentPath: [...currentPath, key],
+          zodTypes
+        });
       }).flat(1);
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodArray: {
-      return extractEnumJsonPaths(def.type, zodRuntime, [
-        ...currentPath,
-        "[]"
-      ]);
+      return extractEnumJsonPaths({
+        schema: def.type,
+        zodRuntime,
+        currentPath: [...currentPath, "[]"],
+        zodTypes
+      });
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodUnion: {
       return def.options.map((option) => {
-        return extractEnumJsonPaths(option, zodRuntime, currentPath);
+        return extractEnumJsonPaths({
+          schema: option,
+          zodRuntime,
+          currentPath,
+          zodTypes
+        });
       }).flat(1);
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodDiscriminatedUnion: {
       return def.options.map((op) => {
-        return extractEnumJsonPaths(op, zodRuntime, currentPath);
+        return extractEnumJsonPaths({
+          schema: op,
+          zodRuntime,
+          currentPath,
+          zodTypes
+        });
       }).flat(1);
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodLiteral: {
       return [currentPath];
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodEffects: {
-      return extractEnumJsonPaths(def.schema, zodRuntime, currentPath);
+      if (zodTypes && schema._def.description === zodTypes.ZodZypesInternals.REMOTION_MATRIX_BRAND) {
+        return [currentPath];
+      }
+      return extractEnumJsonPaths({
+        schema: def.schema,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodIntersection: {
       const { left, right } = def;
-      const leftValue = extractEnumJsonPaths(left, zodRuntime, currentPath);
-      const rightValue = extractEnumJsonPaths(right, zodRuntime, currentPath);
+      const leftValue = extractEnumJsonPaths({
+        schema: left,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
+      const rightValue = extractEnumJsonPaths({
+        schema: right,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
       return [...leftValue, ...rightValue];
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodTuple: {
-      return def.items.map((item, i) => extractEnumJsonPaths(item, zodRuntime, [...currentPath, i])).flat(1);
+      return def.items.map((item, i) => extractEnumJsonPaths({
+        schema: item,
+        zodRuntime,
+        currentPath: [...currentPath, i],
+        zodTypes
+      })).flat(1);
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodRecord: {
-      const values = extractEnumJsonPaths(def.valueType, zodRuntime, [...currentPath, "{}"]);
+      const values = extractEnumJsonPaths({
+        schema: def.valueType,
+        zodRuntime,
+        currentPath: [...currentPath, "{}"],
+        zodTypes
+      });
       return values;
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodFunction: {
@@ -262,33 +309,63 @@ var extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodOptional: {
       const defType = def;
-      const value = extractEnumJsonPaths(defType.innerType, zodRuntime, currentPath);
+      const value = extractEnumJsonPaths({
+        schema: defType.innerType,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
       return value;
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodNullable: {
       const defType = def;
-      const value = extractEnumJsonPaths(defType.innerType, zodRuntime, currentPath);
+      const value = extractEnumJsonPaths({
+        schema: defType.innerType,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
       return value;
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodDefault: {
       const defType = def;
-      return extractEnumJsonPaths(defType.innerType, zodRuntime, currentPath);
+      return extractEnumJsonPaths({
+        schema: defType.innerType,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodCatch: {
       const defType = def;
-      return extractEnumJsonPaths(defType.innerType, zodRuntime, currentPath);
+      return extractEnumJsonPaths({
+        schema: defType.innerType,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodPromise: {
       return [];
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodBranded: {
       const defType = def;
-      const value = extractEnumJsonPaths(defType.type, zodRuntime, currentPath);
+      const value = extractEnumJsonPaths({
+        schema: defType.type,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
       return value;
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodPipeline: {
       const defType = def;
-      const value = extractEnumJsonPaths(defType.out, zodRuntime, currentPath);
+      const value = extractEnumJsonPaths({
+        schema: defType.out,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
       return value;
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodString:
@@ -319,7 +396,7 @@ import { NoReactInternals } from "remotion/no-react";
 var callUpdateDefaultPropsApi = (compositionId, defaultProps, enumPaths) => {
   return callApi("/api/update-default-props", {
     compositionId,
-    defaultProps: NoReactInternals.serializeJSONWithDate({
+    defaultProps: NoReactInternals.serializeJSONWithSpecialTypes({
       data: defaultProps,
       indent: undefined,
       staticBase: window.remotion_staticBase
@@ -345,8 +422,17 @@ var saveDefaultProps = async ({
     throw new Error('"zod" is required to use saveDefaultProps(), but is not installed.');
   }
   const z = await import("zod");
+  let zodTypes = null;
+  try {
+    zodTypes = await import("@remotion/zod-types");
+  } catch {}
   const { generatedDefaultProps, composition } = calcNewProps(compositionId, defaultProps);
-  const res = await callUpdateDefaultPropsApi(compositionId, generatedDefaultProps, composition.schema ? extractEnumJsonPaths(composition.schema, z, []) : []);
+  const res = await callUpdateDefaultPropsApi(compositionId, generatedDefaultProps, composition.schema ? extractEnumJsonPaths({
+    schema: composition.schema,
+    zodRuntime: z,
+    currentPath: [],
+    zodTypes
+  }) : []);
   if (res.success) {
     return Promise.resolve();
   }
@@ -383,15 +469,52 @@ var updateDefaultProps = ({
   });
   window.dispatchEvent(new CustomEvent(Internals8.PROPS_UPDATED_EXTERNALLY, {
     detail: {
-      resetUnsaved: false
+      resetUnsaved: null
     }
   }));
 };
-// src/api/watch-public-folder.ts
+// src/visual-controls/VisualControls.tsx
+import {
+  createContext,
+  createRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import { getRemotionEnvironment as getRemotionEnvironment5 } from "remotion";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var VisualControlsTabActivatedContext = createContext(false);
+var VisualControlsContext = createContext({
+  handles: {}
+});
+var visualControlRef = createRef();
+var SetVisualControlsContext = 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");
+  }
+});
+
+// src/api/visual-control.ts
+var visualControl = (key, value, schema) => {
+  if (!visualControlRef.current) {
+    throw new Error("visualControlRef is not set");
+  }
+  return visualControlRef.current.globalVisualControl(key, value, schema);
+};
+// src/api/watch-public-folder.ts
+import { getRemotionEnvironment as getRemotionEnvironment6 } from "remotion";
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 var watchPublicFolder = (callback) => {
-  if (!getRemotionEnvironment5().isStudio) {
+  if (!getRemotionEnvironment6().isStudio) {
     console.warn("The watchPublicFolder() API is only available while using the Remotion Studio.");
     return { cancel: () => {
       return;
@@ -410,9 +533,9 @@ var watchPublicFolder = (callback) => {
   return { cancel };
 };
 // src/api/watch-static-file.ts
-import { getRemotionEnvironment as getRemotionEnvironment6 } from "remotion";
+import { getRemotionEnvironment as getRemotionEnvironment7 } from "remotion";
 var watchStaticFile = (fileName, callback) => {
-  if (!getRemotionEnvironment6().isStudio) {
+  if (!getRemotionEnvironment7().isStudio) {
     console.warn("watchStaticFile() is only available while using the Remotion Studio.");
     return { cancel: () => {
       return;
@@ -477,6 +600,7 @@ export {
   writeStaticFile,
   watchStaticFile,
   watchPublicFolder,
+  visualControl,
   updateDefaultProps,
   toggle,
   seek,