@remotion/studio 4.0.291 → 4.0.293

package/dist/components/RenderModal/DataEditor.js

@@ -107,7 +107,7 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, mayS
             return null;
         }
         const value = defaultProps;
-        return no_react_1.NoReactInternals.serializeJSONWithDate({
+        return no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
             data: value,
             indent: 2,
             staticBase: window.remotion_staticBase,
@@ -118,6 +118,7 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, mayS
         [unresolvedComposition.id]: get_render_modal_warnings_1.defaultTypeCanSaveState,
     });
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     const schema = (0, react_1.useMemo)(() => {
         if (!z) {
             return 'no-zod';
@@ -224,12 +225,12 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, mayS
             (0, NotificationCenter_1.showNotification)('Cannot update default props: No Zod schema', 2000);
             return;
         }
-        (0, actions_1.callUpdateDefaultPropsApi)(unresolvedComposition.id, defaultProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).then((response) => {
+        (0, actions_1.callUpdateDefaultPropsApi)(unresolvedComposition.id, defaultProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)({ schema, zodRuntime: z, currentPath: [], zodTypes })).then((response) => {
             if (!response.success) {
                 (0, NotificationCenter_1.showNotification)(`Cannot update default props: ${response.reason}`, 2000);
             }
         });
-    }, [unresolvedComposition.id, defaultProps, schema, z]);
+    }, [schema, z, unresolvedComposition.id, defaultProps, zodTypes]);
     const onSave = (0, react_1.useCallback)((updater) => {
         var _a;
         if (schema === 'no-zod' || schema === 'no-schema' || z === null) {
@@ -239,7 +240,12 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, mayS
         window.remotion_ignoreFastRefreshUpdate = fastRefreshes + 1;
         setSaving(true);
         const newDefaultProps = updater((_a = unresolvedComposition.defaultProps) !== null && _a !== void 0 ? _a : {});
-        (0, actions_1.callUpdateDefaultPropsApi)(unresolvedComposition.id, newDefaultProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
+        (0, actions_1.callUpdateDefaultPropsApi)(unresolvedComposition.id, newDefaultProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)({
+            schema,
+            zodRuntime: z,
+            currentPath: [],
+            zodTypes,
+        }))
             .then((response) => {
             if (!response.success) {
                 // eslint-disable-next-line no-console
@@ -257,6 +263,7 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, mayS
     }, [
         schema,
         z,
+        zodTypes,
         fastRefreshes,
         setSaving,
         unresolvedComposition.defaultProps,

package/dist/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -58,7 +58,7 @@ const scrollable = {
 };
 const parseJSON = (str, schema) => {
     try {
-        const value = no_react_1.NoReactInternals.deserializeJSONWithCustomFields(str);
+        const value = no_react_1.NoReactInternals.deserializeJSONWithSpecialTypes(str);
         const zodValidation = schema.safeParse(value);
         return { str, value, validJSON: true, zodValidation };
     }

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

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const SCHEMA_EDITOR_FIELDSET_PADDING = 10;
 export declare const Fieldset: React.FC<{
     readonly children: React.ReactNode;
     readonly success: boolean;

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

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Fieldset = void 0;
+exports.Fieldset = exports.SCHEMA_EDITOR_FIELDSET_PADDING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const SCHEMA_EDITOR_FIELDSET_PADDING = 10;
+exports.SCHEMA_EDITOR_FIELDSET_PADDING = 10;
 const AlreadyPaddedRightContext = (0, react_1.createContext)(false);
 const Fieldset = ({ children, shouldPad }) => {
     const alreadyPadded = (0, react_1.useContext)(AlreadyPaddedRightContext);
     const style = (0, react_1.useMemo)(() => {
         if (shouldPad) {
             return {
-                padding: SCHEMA_EDITOR_FIELDSET_PADDING,
-                paddingTop: SCHEMA_EDITOR_FIELDSET_PADDING / 2,
-                paddingRight: alreadyPadded ? 0 : SCHEMA_EDITOR_FIELDSET_PADDING,
+                padding: exports.SCHEMA_EDITOR_FIELDSET_PADDING,
+                paddingTop: exports.SCHEMA_EDITOR_FIELDSET_PADDING / 2,
+                paddingRight: alreadyPadded ? 0 : exports.SCHEMA_EDITOR_FIELDSET_PADDING,
             };
         }
         return {};

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

@@ -43,6 +43,6 @@ const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton
     const labelContent = ((0, jsx_runtime_1.jsxs)("span", { style: labelStyle, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), " ", suffix ? suffix : null] }));
     return ((0, jsx_runtime_1.jsxs)("div", { style: compactStyles, className: scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_CLASSNAME, "data-json-path": jsonPath.join('.'), children: [handleClick ? (
             // Minus the padding that a button has (user agent padding-line-start)
-            (0, jsx_runtime_1.jsx)("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', marginLeft: -6 }, children: labelContent })) : (labelContent), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
+            (0, jsx_runtime_1.jsx)("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', padding: 0 }, children: labelContent })) : (labelContent), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
 };
 exports.SchemaLabel = SchemaLabel;

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

@@ -79,7 +79,7 @@ const ZodArrayEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSav
                             var _a;
                             return (
                             // eslint-disable-next-line react/no-array-index-key
-                            (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor, { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, defaultValue: (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[i]) !== 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 }), (0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: i, onChange: onChange, isLast: i === localValue.value.length - 1, showAddButton: true })] }, `${i}${localValue.keyStabilityRevision}`));
+                            (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor, { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, defaultValue: (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[i]) !== 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: true }), (0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: i, onChange: onChange, isLast: i === localValue.value.length - 1, showAddButton: true })] }, `${i}${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.ZodArrayEditor = ZodArrayEditor;

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

@@ -12,4 +12,5 @@ export declare const ZodArrayItemEditor: React.FC<{
     saving: boolean;
     saveDisabledByParent: boolean;
     mayPad: boolean;
+    mayRemove: boolean;
 }>;

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

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const ZodSwitch_1 = require("./ZodSwitch");
-const ZodArrayItemEditor = ({ def, onChange, jsonPath, index, value, defaultValue, onSave: onSaveObject, showSaveButton, saving, saveDisabledByParent, mayPad, }) => {
+const ZodArrayItemEditor = ({ def, onChange, jsonPath, index, value, defaultValue, onSave: onSaveObject, showSaveButton, saving, saveDisabledByParent, mayPad, mayRemove, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
@@ -28,6 +28,6 @@ const ZodArrayItemEditor = ({ def, onChange, jsonPath, index, value, defaultValu
             ...oldV.slice(index + 1),
         ], false, false);
     }, [index, onSaveObject]);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: newJsonPath, schema: def.type, value: value, setValue: setValue, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: newJsonPath, schema: def.type, value: value, setValue: setValue, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: mayRemove ? onRemove : null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }) }));
 };
 exports.ZodArrayItemEditor = ZodArrayItemEditor;

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

@@ -83,12 +83,9 @@ const ZodMatrixEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSa
             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.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, 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) => {

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

@@ -11,6 +11,7 @@ const ZodDefaultEditor_1 = require("./ZodDefaultEditor");
 const ZodDiscriminatedUnionEditor_1 = require("./ZodDiscriminatedUnionEditor");
 const ZodEffectEditor_1 = require("./ZodEffectEditor");
 const ZodEnumEditor_1 = require("./ZodEnumEditor");
+const ZodMatrixEditor_1 = require("./ZodMatrixEditor");
 const ZodNonEditableValue_1 = require("./ZodNonEditableValue");
 const ZodNullableEditor_1 = require("./ZodNullableEditor");
 const ZodNumberEditor_1 = require("./ZodNumberEditor");
@@ -80,6 +81,11 @@ const ZodSwitch = ({ schema, jsonPath, value, setValue, defaultValue, onSave, sh
                 zodTypes.ZodZypesInternals.REMOTION_COLOR_BRAND) {
             return ((0, jsx_runtime_1.jsx)(ZodColorEditor_1.ZodColorEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
         }
+        if (zodTypes &&
+            schema._def.description ===
+                zodTypes.ZodZypesInternals.REMOTION_MATRIX_BRAND) {
+            return ((0, jsx_runtime_1.jsx)(ZodMatrixEditor_1.ZodMatrixEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema._def.schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+        }
         return ((0, jsx_runtime_1.jsx)(ZodEffectEditor_1.ZodEffectEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodUnion) {

package/dist/components/RenderModal/SchemaEditor/create-zod-values.js

@@ -81,6 +81,15 @@ const createZodValues = (schema, zodRuntime, zodTypes) => {
                     zodTypes.ZodZypesInternals.REMOTION_TEXTAREA_BRAND) {
                 return '';
             }
+            if (zodTypes &&
+                schema._def.description ===
+                    zodTypes.ZodZypesInternals.REMOTION_MATRIX_BRAND) {
+                return [
+                    [1, 0, 0],
+                    [0, 1, 0],
+                    [0, 0, 1],
+                ];
+            }
             return (0, exports.createZodValues)(def.schema, zodRuntime, zodTypes);
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodIntersection: {

package/dist/components/RenderModal/SchemaEditor/extract-enum-json-paths.d.ts

@@ -1,2 +1,7 @@
-import type { ZodType } from '../../get-zod-if-possible';
-export declare const extractEnumJsonPaths: (schema: Zod.ZodTypeAny, zodRuntime: ZodType, currentPath: (string | number)[]) => (string | number)[][];
+import type { ZodType, ZodTypesType } from '../../get-zod-if-possible';
+export declare const extractEnumJsonPaths: ({ schema, zodRuntime, currentPath, zodTypes, }: {
+    schema: Zod.ZodTypeAny;
+    zodRuntime: ZodType;
+    zodTypes: ZodTypesType | null;
+    currentPath: (string | number)[];
+}) => (string | number)[][];

package/dist/components/RenderModal/SchemaEditor/extract-enum-json-paths.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractEnumJsonPaths = void 0;
-const extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
+const extractEnumJsonPaths = ({ schema, zodRuntime, currentPath, zodTypes, }) => {
     const def = schema._def;
     const typeName = def.typeName;
     switch (typeName) {
@@ -10,30 +10,44 @@ const extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
             const keys = Object.keys(shape);
             return keys
                 .map((key) => {
-                return (0, exports.extractEnumJsonPaths)(shape[key], zodRuntime, [
-                    ...currentPath,
-                    key,
-                ]);
+                return (0, exports.extractEnumJsonPaths)({
+                    schema: shape[key],
+                    zodRuntime,
+                    currentPath: [...currentPath, key],
+                    zodTypes,
+                });
             })
                 .flat(1);
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodArray: {
-            return (0, exports.extractEnumJsonPaths)(def.type, zodRuntime, [
-                ...currentPath,
-                '[]',
-            ]);
+            return (0, exports.extractEnumJsonPaths)({
+                schema: def.type,
+                zodRuntime,
+                currentPath: [...currentPath, '[]'],
+                zodTypes,
+            });
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodUnion: {
             return def.options
                 .map((option) => {
-                return (0, exports.extractEnumJsonPaths)(option, zodRuntime, currentPath);
+                return (0, exports.extractEnumJsonPaths)({
+                    schema: option,
+                    zodRuntime,
+                    currentPath,
+                    zodTypes,
+                });
             })
                 .flat(1);
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodDiscriminatedUnion: {
             return def.options
                 .map((op) => {
-                return (0, exports.extractEnumJsonPaths)(op, zodRuntime, currentPath);
+                return (0, exports.extractEnumJsonPaths)({
+                    schema: op,
+                    zodRuntime,
+                    currentPath,
+                    zodTypes,
+                });
             })
                 .flat(1);
         }
@@ -41,21 +55,51 @@ const extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
             return [currentPath];
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodEffects: {
-            return (0, exports.extractEnumJsonPaths)(def.schema, zodRuntime, currentPath);
+            if (zodTypes &&
+                schema._def.description ===
+                    zodTypes.ZodZypesInternals.REMOTION_MATRIX_BRAND) {
+                return [currentPath];
+            }
+            return (0, exports.extractEnumJsonPaths)({
+                schema: def.schema,
+                zodRuntime,
+                currentPath,
+                zodTypes,
+            });
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodIntersection: {
             const { left, right } = def;
-            const leftValue = (0, exports.extractEnumJsonPaths)(left, zodRuntime, currentPath);
-            const rightValue = (0, exports.extractEnumJsonPaths)(right, zodRuntime, currentPath);
+            const leftValue = (0, exports.extractEnumJsonPaths)({
+                schema: left,
+                zodRuntime,
+                currentPath,
+                zodTypes,
+            });
+            const rightValue = (0, exports.extractEnumJsonPaths)({
+                schema: right,
+                zodRuntime,
+                currentPath,
+                zodTypes,
+            });
             return [...leftValue, ...rightValue];
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodTuple: {
             return def.items
-                .map((item, i) => (0, exports.extractEnumJsonPaths)(item, zodRuntime, [...currentPath, i]))
+                .map((item, i) => (0, exports.extractEnumJsonPaths)({
+                schema: item,
+                zodRuntime,
+                currentPath: [...currentPath, i],
+                zodTypes,
+            }))
                 .flat(1);
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodRecord: {
-            const values = (0, exports.extractEnumJsonPaths)(def.valueType, zodRuntime, [...currentPath, '{}']);
+            const values = (0, exports.extractEnumJsonPaths)({
+                schema: def.valueType,
+                zodRuntime,
+                currentPath: [...currentPath, '{}'],
+                zodTypes,
+            });
             return values;
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodFunction: {
@@ -69,21 +113,41 @@ const extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodOptional: {
             const defType = def;
-            const value = (0, exports.extractEnumJsonPaths)(defType.innerType, zodRuntime, currentPath);
+            const value = (0, exports.extractEnumJsonPaths)({
+                schema: defType.innerType,
+                zodRuntime,
+                currentPath,
+                zodTypes,
+            });
             return value;
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodNullable: {
             const defType = def;
-            const value = (0, exports.extractEnumJsonPaths)(defType.innerType, zodRuntime, currentPath);
+            const value = (0, exports.extractEnumJsonPaths)({
+                schema: defType.innerType,
+                zodRuntime,
+                currentPath,
+                zodTypes,
+            });
             return value;
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodDefault: {
             const defType = def;
-            return (0, exports.extractEnumJsonPaths)(defType.innerType, zodRuntime, currentPath);
+            return (0, exports.extractEnumJsonPaths)({
+                schema: defType.innerType,
+                zodRuntime,
+                currentPath,
+                zodTypes,
+            });
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodCatch: {
             const defType = def;
-            return (0, exports.extractEnumJsonPaths)(defType.innerType, zodRuntime, currentPath);
+            return (0, exports.extractEnumJsonPaths)({
+                schema: defType.innerType,
+                zodRuntime,
+                currentPath,
+                zodTypes,
+            });
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodPromise: {
             return [];
@@ -91,13 +155,23 @@ const extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
         case zodRuntime.ZodFirstPartyTypeKind.ZodBranded: {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const defType = def;
-            const value = (0, exports.extractEnumJsonPaths)(defType.type, zodRuntime, currentPath);
+            const value = (0, exports.extractEnumJsonPaths)({
+                schema: defType.type,
+                zodRuntime,
+                currentPath,
+                zodTypes,
+            });
             return value;
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodPipeline: {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const defType = def;
-            const value = (0, exports.extractEnumJsonPaths)(defType.out, zodRuntime, currentPath);
+            const value = (0, exports.extractEnumJsonPaths)({
+                schema: defType.out,
+                zodRuntime,
+                currentPath,
+                zodTypes,
+            });
             return value;
         }
         case zodRuntime.ZodFirstPartyTypeKind.ZodString:

package/dist/components/RenderQueue/actions.d.ts

@@ -1,6 +1,6 @@
 import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
-import type { CanUpdateDefaultPropsResponse, EnumPath, RecastCodemod, RenderJob, RequiredChromiumOptions } from '@remotion/studio-shared';
+import type { CanUpdateDefaultPropsResponse, EnumPath, RecastCodemod, RenderJob, RequiredChromiumOptions, VisualControlChange } from '@remotion/studio-shared';
 export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, }: {
     compositionId: string;
     outName: string;
@@ -106,3 +106,7 @@ export declare const updateAvailable: (signal: AbortSignal) => Promise<import("@
 export declare const getProjectInfo: (signal: AbortSignal) => Promise<import("@remotion/studio-shared").ProjectInfoResponse>;
 export declare const callUpdateDefaultPropsApi: (compositionId: string, defaultProps: Record<string, unknown>, enumPaths: EnumPath[]) => Promise<import("@remotion/studio-shared").UpdateDefaultPropsResponse>;
 export declare const canUpdateDefaultProps: (compositionId: string, readOnlyStudio: boolean) => Promise<CanUpdateDefaultPropsResponse>;
+export declare const applyVisualControlChange: ({ fileName, changes, }: {
+    fileName: string;
+    changes: VisualControlChange[];
+}) => Promise<import("@remotion/studio-shared").ApplyVisualControlResponse>;

package/dist/components/RenderQueue/actions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.canUpdateDefaultProps = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
+exports.applyVisualControlChange = exports.canUpdateDefaultProps = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
 const no_react_1 = require("remotion/no-react");
 const call_api_1 = require("../call-api");
 const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, }) => {
@@ -16,7 +16,7 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
         chromiumOptions,
         delayRenderTimeout,
         envVariables,
-        serializedInputPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithDate({
+        serializedInputPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
             data: inputProps,
             staticBase: window.remotion_staticBase,
             indent: undefined,
@@ -45,7 +45,7 @@ const addSequenceRenderJob = ({ compositionId, outName, imageFormat, startFrame,
         delayRenderTimeout,
         envVariables,
         concurrency,
-        serializedInputPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithDate({
+        serializedInputPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
             data: inputProps,
             staticBase: window.remotion_staticBase,
             indent: undefined,
@@ -89,7 +89,7 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
         disallowParallelEncoding,
         chromiumOptions,
         envVariables,
-        serializedInputPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithDate({
+        serializedInputPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
             data: inputProps,
             staticBase: window.remotion_staticBase,
             indent: undefined,
@@ -160,7 +160,7 @@ exports.getProjectInfo = getProjectInfo;
 const callUpdateDefaultPropsApi = (compositionId, defaultProps, enumPaths) => {
     return (0, call_api_1.callApi)('/api/update-default-props', {
         compositionId,
-        defaultProps: no_react_1.NoReactInternals.serializeJSONWithDate({
+        defaultProps: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
             data: defaultProps,
             indent: undefined,
             staticBase: window.remotion_staticBase,
@@ -181,3 +181,10 @@ const canUpdateDefaultProps = (compositionId, readOnlyStudio) => {
     });
 };
 exports.canUpdateDefaultProps = canUpdateDefaultProps;
+const applyVisualControlChange = ({ fileName, changes, }) => {
+    return (0, call_api_1.callApi)('/api/apply-visual-control-change', {
+        fileName,
+        changes,
+    });
+};
+exports.applyVisualControlChange = applyVisualControlChange;

package/dist/components/Tabs/index.js

@@ -22,13 +22,15 @@ exports.Tabs = Tabs;
 const selectorButton = {
     border: 'none',
     flex: 1,
-    padding: 8,
+    padding: 4,
+    height: 40,
     paddingLeft: 16,
     display: 'flex',
     flexDirection: 'row',
     fontSize: 14,
     color: 'inherit',
     alignItems: 'center',
+    cursor: 'default',
 };
 const Tab = ({ children, onClick, style, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);

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

@@ -1,3 +1,13 @@
-export declare const ClickableFileName: ({ stack }: {
-    readonly stack: string;
+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

@@ -3,16 +3,17 @@ 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 get_original_stack_trace_1 = require("./get-original-stack-trace");
-const label = {
-    fontSize: 13,
+const container = {
+    paddingLeft: Fieldset_1.SCHEMA_EDITOR_FIELDSET_PADDING,
+    paddingTop: Fieldset_1.SCHEMA_EDITOR_FIELDSET_PADDING / 2,
 };
-const ClickableFileName = ({ stack }) => {
-    const originalFileName = (0, get_original_stack_trace_1.useOriginalFileName)(stack);
+const ClickableFileName = ({ originalFileName, }) => {
     const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
-    const hoverEffect = titleHovered && originalFileName;
+    const hoverEffect = titleHovered && originalFileName.type === 'loaded';
     const onTitlePointerEnter = (0, react_1.useCallback)(() => {
         setTitleHovered(true);
     }, []);
@@ -21,19 +22,22 @@ const ClickableFileName = ({ stack }) => {
     }, []);
     const style = (0, react_1.useMemo)(() => {
         return {
-            ...label,
-            cursor: originalFileName ? 'pointer' : undefined,
+            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) {
+        if (originalFileName.type !== 'loaded') {
             return;
         }
-        await (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName);
+        await (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName.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...' }));
+    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

@@ -1,8 +1,6 @@
 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;
 }>;