@remotion/studio 4.0.290 → 4.0.292

package/dist/components/Preview.js

@@ -68,17 +68,17 @@ const containerStyle = (options) => {
         backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
     };
 };
-const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata, isRefreshing, }) => {
+const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata }) => {
     if (assetMetadata && assetMetadata.type === 'not-found') {
         return ((0, jsx_runtime_1.jsx)("div", { style: centeredContainer, children: (0, jsx_runtime_1.jsx)("div", { style: label, children: "File does not exist" }) }));
     }
     if (contentDimensions === null) {
         return ((0, jsx_runtime_1.jsx)("div", { style: centeredContainer, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: 24 }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(CompWhenItHasDimensions, { contentDimensions: contentDimensions, canvasSize: canvasSize, canvasContent: canvasContent, assetMetadata: assetMetadata, isRefreshing: isRefreshing }));
+    return ((0, jsx_runtime_1.jsx)(CompWhenItHasDimensions, { contentDimensions: contentDimensions, canvasSize: canvasSize, canvasContent: canvasContent, assetMetadata: assetMetadata }));
 };
 exports.VideoPreview = VideoPreview;
-const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata, isRefreshing, }) => {
+const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
     const { size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { centerX, centerY, yCorrection, xCorrection, scale } = (0, react_1.useMemo)(() => {
         if (contentDimensions === 'none') {
@@ -114,7 +114,6 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
                 (0, exports.getPreviewFileType)(canvasContent.asset) === 'audio'
                 ? 'center'
                 : 'normal',
-            opacity: isRefreshing ? 0.5 : 1,
         };
     }, [
         contentDimensions,
@@ -124,7 +123,6 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
         previewSize.translation.y,
         centerY,
         canvasContent,
-        isRefreshing,
     ]);
     return ((0, jsx_runtime_1.jsx)("div", { style: outer, children: canvasContent.type === 'asset' ? ((0, jsx_runtime_1.jsx)(StaticFilePreview_1.StaticFilePreview, { assetMetadata: assetMetadata, currentAsset: canvasContent.asset })) : canvasContent.type === 'output' ? ((0, jsx_runtime_1.jsx)(RenderPreview_1.RenderPreview, { path: canvasContent.path, assetMetadata: assetMetadata })) : ((0, jsx_runtime_1.jsx)(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection })) }));
 };

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -62,7 +62,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
             commandCtrlKey: false,
             event: 'keydown',
             preventDefault: true,
-            // Input will be focused while sleection
+            // Input will be focused while selection
             triggerIfInputFieldFocused: true,
             keepRegisteredWhenNotHighestContext: false,
         });

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.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,98 @@
+"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.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)(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/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);