@remotion/cli 4.0.0-alpha13 → 4.0.0-alpha14

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

@@ -18,7 +18,7 @@ const ZodOptionalEditor_1 = require("./ZodOptionalEditor");
 const ZodStaticFileEditor_1 = require("./ZodStaticFileEditor");
 const ZodStringEditor_1 = require("./ZodStringEditor");
 const ZodUnionEditor_1 = require("./ZodUnionEditor");
-const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
+const ZodSwitch = ({ schema, jsonPath, value, setValue, defaultValue, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     const def = schema._def;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const typeName = def.typeName;
@@ -29,64 +29,64 @@ const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, o
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     // TODO: (Maybe?) enable saving of inserted input props by cmd+s /ctrl + s (also for JSON view)
     if (typeName === z.ZodFirstPartyTypeKind.ZodObject) {
-        return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, value: value, defaultValue: defaultValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+        return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, value: value, defaultValue: defaultValue, jsonPath: jsonPath, schema: schema, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodString) {
         if (value.startsWith(window.remotion_staticBase)) {
-            return ((0, jsx_runtime_1.jsx)(ZodStaticFileEditor_1.ZodStaticFileEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+            return ((0, jsx_runtime_1.jsx)(ZodStaticFileEditor_1.ZodStaticFileEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
         }
-        return ((0, jsx_runtime_1.jsx)(ZodStringEditor_1.ZodStringEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+        return ((0, jsx_runtime_1.jsx)(ZodStringEditor_1.ZodStringEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodDate) {
-        return ((0, jsx_runtime_1.jsx)(ZodDateEditor_1.ZodDateEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+        return ((0, jsx_runtime_1.jsx)(ZodDateEditor_1.ZodDateEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodNumber) {
-        return ((0, jsx_runtime_1.jsx)(ZodNumberEditor_1.ZodNumberEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+        return ((0, jsx_runtime_1.jsx)(ZodNumberEditor_1.ZodNumberEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodBoolean) {
-        return ((0, jsx_runtime_1.jsx)(ZodBooleanEditor_1.ZodBooleanEditor, { value: value, setValue: setValue, jsonPath: jsonPath, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+        return ((0, jsx_runtime_1.jsx)(ZodBooleanEditor_1.ZodBooleanEditor, { value: value, setValue: setValue, jsonPath: jsonPath, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad, schema: schema }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodUndefined) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'undefined', saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'undefined', saving: saving, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodNull) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'null', saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'null', saving: saving, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodAny) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'any (not editable)', saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'any (not editable)', saving: saving, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodBigInt) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'BigInt (not editable)', saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'BigInt (not editable)', saving: saving, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodUnknown) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'unknown (not editable)', saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'unknown (not editable)', saving: saving, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodArray) {
-        return ((0, jsx_runtime_1.jsx)(ZodArrayEditor_1.ZodArrayEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+        return ((0, jsx_runtime_1.jsx)(ZodArrayEditor_1.ZodArrayEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodEnum) {
-        return ((0, jsx_runtime_1.jsx)(ZodEnumEditor_1.ZodEnumEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodEnumEditor_1.ZodEnumEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodEffects) {
         if (zodTypes &&
             schema._def.description ===
                 zodTypes.ZodZypesInternals.REMOTION_COLOR_BRAND) {
-            return ((0, jsx_runtime_1.jsx)(ZodColorEditor_1.ZodColorEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+            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 }));
         }
-        return ((0, jsx_runtime_1.jsx)(ZodEffectEditor_1.ZodEffectEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+        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) {
-        return ((0, jsx_runtime_1.jsx)(ZodUnionEditor_1.ZodUnionEditor, { schema: schema, showSaveButton: showSaveButton, jsonPath: jsonPath, compact: compact, value: value, defaultValue: defaultValue, setValue: setValue, onSave: onSave, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+        return ((0, jsx_runtime_1.jsx)(ZodUnionEditor_1.ZodUnionEditor, { schema: schema, showSaveButton: showSaveButton, jsonPath: jsonPath, value: value, defaultValue: defaultValue, setValue: setValue, onSave: onSave, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodOptional) {
-        return ((0, jsx_runtime_1.jsx)(ZodOptionalEditor_1.ZodOptionalEditor, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+        return ((0, jsx_runtime_1.jsx)(ZodOptionalEditor_1.ZodOptionalEditor, { jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodNullable) {
-        return ((0, jsx_runtime_1.jsx)(ZodNullableEditor_1.ZodNullableEditor, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+        return ((0, jsx_runtime_1.jsx)(ZodNullableEditor_1.ZodNullableEditor, { jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodDefault) {
-        return ((0, jsx_runtime_1.jsx)(ZodDefaultEditor_1.ZodDefaultEditor, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+        return ((0, jsx_runtime_1.jsx)(ZodDefaultEditor_1.ZodDefaultEditor, { jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
-    return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: `${typeName} (not editable)`, saving: saving }));
+    return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: `${typeName} (not editable)`, saving: saving, mayPad: mayPad }));
 };
 exports.ZodSwitch = ZodSwitch;

package/dist/editor/components/RenderModal/SchemaEditor/ZodUnionEditor.d.ts

@@ -5,7 +5,6 @@ import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodUnionEditor: React.FC<{
     showSaveButton: boolean;
     jsonPath: JSONPath;
-    compact: boolean;
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
@@ -14,4 +13,5 @@ export declare const ZodUnionEditor: React.FC<{
     onRemove: null | (() => void);
     saving: boolean;
     saveDisabledByParent: boolean;
+    mayPad: boolean;
 }>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodUnionEditor.js

@@ -24,26 +24,26 @@ const findNull = (value, zodType) => {
         otherSchemaIsAlsoNullish,
     };
 };
-const ZodUnionEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
+const ZodUnionEditor = ({ jsonPath, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     const { options } = schema._def;
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
     if (options.length > 2) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with more than 2 options not editable', compact: compact, showSaveButton: showSaveButton, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with more than 2 options not editable', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
     }
     if (options.length < 2) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with less than 2 options not editable', compact: compact, showSaveButton: showSaveButton, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with less than 2 options not editable', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
     }
     const nullResult = findNull(options, z);
     if (!nullResult) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union only editable with 1 value being null', compact: compact, showSaveButton: showSaveButton, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union only editable with 1 value being null', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
     }
     const { otherSchema, nullishValue, otherSchemaIsAlsoNullish } = nullResult;
     if (otherSchemaIsAlsoNullish) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Not editable - both union values are nullish', compact: compact, showSaveButton: showSaveButton, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Not editable - both union values are nullish', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
     }
-    return ((0, jsx_runtime_1.jsx)(ZodOrNullishEditor_1.ZodOrNullishEditor, { compact: compact, defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: otherSchema, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: nullishValue, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+    return ((0, jsx_runtime_1.jsx)(ZodOrNullishEditor_1.ZodOrNullishEditor, { defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: schema, innerSchema: otherSchema, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: nullishValue, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
 };
 exports.ZodUnionEditor = ZodUnionEditor;

package/dist/editor/components/RenderModal/SchemaEditor/deep-equal.js

@@ -6,6 +6,9 @@ function deepEqual(a, b) {
     if (a === b) {
         return true;
     }
+    if (a instanceof Date && b instanceof Date) {
+        return a.getTime() === b.getTime();
+    }
     if (typeof a !== 'object' ||
         a === null ||
         typeof b !== 'object' ||

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

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

package/dist/editor/components/RenderModal/SchemaEditor/get-schema-label.js

@@ -6,10 +6,10 @@ const getSchemaLabel = (jsonPath) => {
     if (typeof lastKey === 'number') {
         const secondLastKey = jsonPath[jsonPath.length - 2];
         if (typeof secondLastKey === 'undefined') {
-            return `[${lastKey}]`;
+            return `[${lastKey}]:`;
         }
-        return `${(0, exports.getSchemaLabel)(jsonPath.slice(0, jsonPath.length - 1))}[${lastKey}]`;
+        return `${lastKey}:`;
     }
-    return lastKey;
+    return `${lastKey}:`;
 };
 exports.getSchemaLabel = getSchemaLabel;

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.d.ts

@@ -1,4 +1,4 @@
-export declare type SerializedJSONWithCustomFields = {
+export type SerializedJSONWithCustomFields = {
     serializedString: string;
     customDateUsed: boolean;
     customFileUsed: boolean;

package/dist/editor/components/RenderModal/SchemaEditor/local-state.d.ts

@@ -1,16 +1,21 @@
+import React from 'react';
 import type { z } from 'zod';
 import type { UpdaterFunction } from './ZodSwitch';
-declare type LocalState<T> = {
+export type LocalState<T> = {
     value: T;
     zodValidation: z.SafeParseReturnType<unknown, unknown>;
-    revision: number;
+    keyStabilityRevision: number;
 };
-export declare const useLocalState: <T>({ value, schema, setValue, }: {
+export declare const useLocalState: <T>({ value, schema, setValue, defaultValue, }: {
     value: T;
     schema: z.ZodTypeAny;
     setValue: UpdaterFunction<T>;
+    defaultValue: T;
 }) => {
     localValue: LocalState<T>;
-    onChange: (updater: (oldV: T) => T, forceApply: boolean) => void;
+    onChange: (updater: (oldV: T) => T, forceApply: boolean, increment: boolean) => void;
+    reset: () => void;
+    RevisionContextProvider: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
 };
-export {};

package/dist/editor/components/RenderModal/SchemaEditor/local-state.js

@@ -1,19 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLocalState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const deep_equal_1 = require("./deep-equal");
-const useLocalState = ({ value, schema, setValue, }) => {
+const RevisionContext = (0, react_1.createContext)({
+    childResetRevision: 0,
+});
+const useLocalState = ({ value, schema, setValue, defaultValue, }) => {
+    const parentRevision = (0, react_1.useContext)(RevisionContext).childResetRevision;
+    const [resetRevision, setResetRevision] = (0, react_1.useState)(0);
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
-        return {
-            value,
-            zodValidation: schema.safeParse(value),
-            revision: 0,
-        };
+        return {};
     });
-    const stateRef = (0, react_1.useRef)(localValue);
-    stateRef.current = localValue;
-    const onChange = (0, react_1.useCallback)((updater, forceApply) => {
+    const currentLocalValue = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = localValue[parentRevision]) !== null && _a !== void 0 ? _a : {
+            value: defaultValue,
+            keyStabilityRevision: 0,
+            zodValidation: schema.safeParse(value),
+        });
+    }, [defaultValue, localValue, parentRevision, schema, value]);
+    const stateRef = (0, react_1.useRef)(currentLocalValue);
+    stateRef.current = currentLocalValue;
+    const onChange = (0, react_1.useCallback)(
+    // Increment is to regenerate `key` attributes in array items,
+    // so should increment when changing array items
+    (updater, forceApply, increment) => {
         const newValue = updater(stateRef.current.value);
         const isSame = (0, deep_equal_1.deepEqual)(newValue, stateRef.current.value);
         if (isSame) {
@@ -21,18 +34,46 @@ const useLocalState = ({ value, schema, setValue, }) => {
         }
         const safeParse = schema.safeParse(newValue);
         if (safeParse.success || forceApply) {
-            setValue(updater, forceApply);
+            setValue(updater, forceApply, increment);
         }
-        setLocalValue((oldLocalState) => {
+        setLocalValue(() => {
             const newState = {
-                revision: oldLocalState.revision + 1,
+                keyStabilityRevision: currentLocalValue.keyStabilityRevision + (increment ? 1 : 0),
                 value: newValue,
                 zodValidation: safeParse,
             };
             stateRef.current = newState;
-            return newState;
+            return {
+                ...localValue,
+                [parentRevision]: newState,
+            };
         });
-    }, [schema, setValue]);
-    return { localValue, onChange };
+    }, [
+        currentLocalValue.keyStabilityRevision,
+        localValue,
+        parentRevision,
+        schema,
+        setValue,
+    ]);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            childResetRevision: resetRevision,
+        };
+    }, [resetRevision]);
+    const reset = (0, react_1.useCallback)(() => {
+        // Only need to do key stability for arrays, but
+        // since user is not editing right now, should be fine
+        onChange(() => defaultValue, true, true);
+        setResetRevision((old) => old + 1);
+    }, [defaultValue, onChange]);
+    const RevisionContextProvider = (0, react_1.useCallback)(({ children }) => {
+        return ((0, jsx_runtime_1.jsx)(RevisionContext.Provider, { value: contextValue, children: children }));
+    }, [contextValue]);
+    return {
+        localValue: currentLocalValue,
+        onChange,
+        reset,
+        RevisionContextProvider,
+    };
 };
 exports.useLocalState = useLocalState;

package/dist/editor/components/RenderModal/SchemaEditor/zod-types.d.ts

@@ -1 +1 @@
-export declare type JSONPath = (string | number)[];
+export type JSONPath = (string | number)[];

package/dist/editor/components/RenderModal/get-render-modal-warnings.d.ts

@@ -1,5 +1,5 @@
 import type { PropsEditType } from './DataEditor';
-export declare type TypeCanSaveState = {
+export type TypeCanSaveState = {
     canUpdate: true;
 } | {
     canUpdate: false;

package/dist/editor/components/RenderModal/layout.d.ts

@@ -1,6 +1,5 @@
 import type React from 'react';
 export declare const optionRow: React.CSSProperties;
-export declare const narrowOption: React.CSSProperties;
 export declare const label: React.CSSProperties;
 export declare const rightRow: React.CSSProperties;
 export declare const input: React.CSSProperties;

package/dist/editor/components/RenderModal/layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fieldsetLabel = exports.input = exports.rightRow = exports.label = exports.narrowOption = exports.optionRow = void 0;
+exports.fieldsetLabel = exports.input = exports.rightRow = exports.label = exports.optionRow = void 0;
 const colors_1 = require("../../helpers/colors");
 exports.optionRow = {
     display: 'flex',
@@ -11,10 +11,6 @@ exports.optionRow = {
     paddingTop: 8,
     paddingBottom: 8,
 };
-exports.narrowOption = {
-    display: 'flex',
-    flexDirection: 'column',
-};
 exports.label = {
     width: 170,
     fontSize: 15,
@@ -38,8 +34,6 @@ exports.input = {
 exports.fieldsetLabel = {
     color: colors_1.LIGHT_TEXT,
     fontSize: 14,
-    paddingLeft: 5,
-    paddingRight: 5,
     display: 'flex',
     flexDirection: 'row',
     fontFamily: 'monospace',

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

@@ -6,7 +6,7 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     compositionId: string;
     outName: string;
     imageFormat: StillImageFormat;
-    jpegQuality: number | null;
+    jpegQuality: number;
     frame: number;
     scale: number;
     verbose: boolean;
@@ -55,5 +55,6 @@ export declare const openInFileExplorer: ({ directory }: {
 }) => Promise<void>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("../../../preview-server/render-queue/job").CancelRenderResponse>;
+export declare const updateAvailable: (signal: AbortSignal) => Promise<import("../../../preview-server/render-queue/job").UpdateAvailableResponse>;
 export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown, enumPaths: EnumPath[]) => Promise<import("../../../preview-server/render-queue/job").UpdateDefaultPropsResponse>;
 export declare const canUpdateDefaultProps: (compositionId: string) => Promise<import("../../../preview-server/render-queue/job").CanUpdateDefaultPropsResponse>;

package/dist/editor/components/RenderQueue/actions.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = void 0;
+exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = void 0;
 const input_props_serialization_1 = require("../RenderModal/SchemaEditor/input-props-serialization");
-const callApi = (endpoint, body) => {
+const callApi = (endpoint, body, signal) => {
     return new Promise((resolve, reject) => {
         fetch(endpoint, {
             method: 'post',
             headers: {
                 'content-type': 'application/json',
             },
+            signal,
             body: JSON.stringify(body),
         })
             .then((res) => res.json())
@@ -104,6 +105,10 @@ const cancelRenderJob = (job) => {
     });
 };
 exports.cancelRenderJob = cancelRenderJob;
+const updateAvailable = (signal) => {
+    return callApi('/api/update-available', {}, signal);
+};
+exports.updateAvailable = updateAvailable;
 const updateDefaultProps = (compositionId, defaultProps, enumPaths) => {
     return callApi('/api/update-default-props', {
         compositionId,

package/dist/editor/components/RenderQueue/context.d.ts

@@ -5,7 +5,7 @@ declare global {
         remotion_initialRenderQueue: RenderJob[];
     }
 }
-declare type RenderQueueContextType = {
+type RenderQueueContextType = {
     jobs: RenderJob[];
 };
 export declare const RenderQueueContext: React.Context<RenderQueueContextType>;

package/dist/editor/components/RichTimelineToggle.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RichTimelineToggle: React.FC;

package/dist/editor/components/RichTimelineToggle.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTimelineToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
+const timeline_1 = require("../icons/timeline");
+const rich_timeline_1 = require("../state/rich-timeline");
+const ControlButton_1 = require("./ControlButton");
+const tooltip = 'Enable rich timeline. Go to remotion.dev/docs/timeline for more information.';
+const RichTimelineToggle = () => {
+    const { richTimeline, setRichTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
+    const onClick = (0, react_1.useCallback)(() => {
+        setRichTimeline((c) => {
+            (0, rich_timeline_1.persistRichTimelineOption)(!c);
+            return !c;
+        });
+    }, [setRichTimeline]);
+    if (isStill) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: tooltip, "aria-label": tooltip, onClick: onClick, children: (0, jsx_runtime_1.jsx)(timeline_1.TimelineIcon, { style: {
+                width: 16,
+                height: 16,
+                color: richTimeline ? 'var(--blue)' : 'white',
+            } }) }));
+};
+exports.RichTimelineToggle = RichTimelineToggle;

package/dist/editor/components/RightPanel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type SidebarPanel = 'input-props' | 'renders';
+type SidebarPanel = 'input-props' | 'renders';
 export declare const persistSelectedPanel: (panel: SidebarPanel) => void;
 export declare const rightSidebarTabs: React.RefObject<{
     selectRendersPanel: () => void;

package/dist/editor/components/RightPanel.js

@@ -26,7 +26,7 @@ const PropsEditor = ({ composition }) => {
         });
     }, [composition.defaultProps, composition.id, updateProps]);
     const actualProps = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {}; }, [composition.defaultProps, composition.id, props]);
-    return ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, compact: true, mayShowSaveButton: true, propsEditType: "default-props" }, composition.id));
+    return ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props" }, composition.id));
 };
 const localStorageKey = 'remotion.sidebarPanel';
 const getSelectedPanel = () => {

package/dist/editor/components/SegmentedControl.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type SegmentedControlItem = {
+export type SegmentedControlItem = {
     label: React.ReactNode;
     onClick: () => void;
     key: string;

package/dist/editor/components/SegmentedControl.js

@@ -21,6 +21,8 @@ const item = {
     cursor: 'pointer',
     appearance: 'none',
     border: 'none',
+    flex: 1,
+    justifyContent: 'center',
 };
 const SegmentedControl = ({ items, needsWrapping }) => {
     const controlStyle = (0, react_1.useMemo)(() => {

package/dist/editor/components/Splitter/SplitterContext.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-export declare type SplitterDragState = false | {
+export type SplitterDragState = false | {
     x: number;
     y: number;
 };
-export declare type SplitterOrientation = 'horizontal' | 'vertical';
-export declare type TSplitterContext = {
+export type SplitterOrientation = 'horizontal' | 'vertical';
+export type TSplitterContext = {
     flexValue: number;
     setFlexValue: React.Dispatch<React.SetStateAction<number>>;
     domRect: DOMRect | DOMRectReadOnly | null;

package/dist/editor/components/Thumbnail.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TComposition } from 'remotion';
+export declare const Thumbnail: React.FC<{
+    composition: TComposition<unknown>;
+    targetHeight: number;
+    targetWidth: number;
+    frameToDisplay: number;
+}>;

package/dist/editor/components/Thumbnail.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Thumbnail = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const checkerboard_background_1 = require("../helpers/checkerboard-background");
+const checkerboard_1 = require("../state/checkerboard");
+const Thumbnail = ({ composition, targetHeight, targetWidth, frameToDisplay }) => {
+    const { height, width } = composition;
+    const heightRatio = targetHeight / height;
+    const widthRatio = targetWidth / width;
+    const ratio = Math.min(heightRatio, widthRatio);
+    const scale = ratio;
+    const actualWidth = width * scale;
+    const actualHeight = height * scale;
+    const correction = 0 - (1 - scale) / 2;
+    const xCorrection = correction * width;
+    const yCorrection = correction * height;
+    const [thumbnailId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
+    const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const container = (0, react_1.useMemo)(() => {
+        return {
+            width: targetWidth,
+            height: targetHeight,
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+        };
+    }, [targetHeight, targetWidth]);
+    const outer = (0, react_1.useMemo)(() => {
+        return {
+            width: actualWidth,
+            height: actualHeight,
+            backgroundColor: (0, checkerboard_background_1.checkerboardBackgroundColor)(checkerboard),
+            backgroundImage: (0, checkerboard_background_1.checkerboardBackgroundImage)(checkerboard),
+            backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(25),
+            backgroundSize: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(25),
+        };
+    }, [actualHeight, actualWidth, checkerboard]);
+    const inner = (0, react_1.useMemo)(() => {
+        return {
+            width,
+            height,
+            transform: `scale(${scale}) `,
+            overflow: 'hidden',
+            marginLeft: xCorrection,
+            marginTop: yCorrection,
+            display: 'flex',
+            color: 'black',
+        };
+    }, [height, scale, width, xCorrection, yCorrection]);
+    const timelineState = (0, react_1.useMemo)(() => {
+        return {
+            playing: false,
+            frame: frameToDisplay,
+            rootId: thumbnailId,
+            imperativePlaying: {
+                current: false,
+            },
+            playbackRate: 1,
+            setPlaybackRate: () => {
+                throw new Error('thumbnail');
+            },
+            audioAndVideoTags: { current: [] },
+        };
+    }, [frameToDisplay, thumbnailId]);
+    const props = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {};
+    }, [composition.defaultProps]);
+    const ThumbnailComponent = composition.component;
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineState, children: (0, jsx_runtime_1.jsx)(ThumbnailComponent, { ...props }) }) }) }) }) }));
+};
+exports.Thumbnail = Thumbnail;

package/dist/editor/components/Timeline/LoopedIndicator.js

@@ -10,21 +10,21 @@ const width = {
     position: 'relative',
 };
 const icon = {
-    height: 12,
-    width: 12,
+    height: 14,
+    width: 14,
 };
 const Icon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "repeat", className: "svg-inline--fa fa-repeat fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: icon, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z" }) }));
 const topLine = {
     top: 0,
-    height: 10,
+    height: 5,
     width: 1,
-    background: 'linear-gradient(to top, transparent, rgba(255, 255, 255, 0.7))',
+    background: 'white',
 };
 const bottomLine = {
     top: 0,
-    height: 10,
+    height: 5,
     width: 1,
-    background: 'linear-gradient(to top, rgba(255, 255, 255, 0.7), transparent)',
+    background: 'white',
 };
 const topContainer = {
     justifyContent: 'flex-start',