@remotion/studio 4.0.429 → 4.0.431

package/dist/esm/internals.mjs

@@ -119,184 +119,6 @@ var setCurrentFps = (d) => {
 // src/components/Timeline/timeline-scroll-logic.ts
 import { interpolate } from "remotion";
 
-// src/components/RenderModal/SchemaEditor/zod-schema-type.ts
-var zodSafeParse = (schema, data) => {
-  return schema.safeParse(data);
-};
-var getZodDef = (schema) => {
-  if (schema._def)
-    return schema._def;
-  if (schema._zod)
-    return schema._zod.def;
-  throw new Error("Invalid zod schema: missing _def and _zod");
-};
-var v3TypeNameMap = {
-  ZodString: "string",
-  ZodNumber: "number",
-  ZodBoolean: "boolean",
-  ZodObject: "object",
-  ZodArray: "array",
-  ZodEnum: "enum",
-  ZodUnion: "union",
-  ZodDiscriminatedUnion: "discriminatedUnion",
-  ZodOptional: "optional",
-  ZodNullable: "nullable",
-  ZodDefault: "default",
-  ZodTuple: "tuple",
-  ZodDate: "date",
-  ZodAny: "any",
-  ZodUnknown: "unknown",
-  ZodBigInt: "bigint",
-  ZodNull: "null",
-  ZodUndefined: "undefined",
-  ZodEffects: "effects",
-  ZodLiteral: "literal",
-  ZodRecord: "record",
-  ZodNever: "never",
-  ZodVoid: "void",
-  ZodNaN: "nan",
-  ZodSymbol: "symbol",
-  ZodIntersection: "intersection",
-  ZodMap: "map",
-  ZodSet: "set",
-  ZodLazy: "lazy",
-  ZodFunction: "function",
-  ZodNativeEnum: "nativeEnum",
-  ZodCatch: "catch",
-  ZodPromise: "promise",
-  ZodBranded: "branded",
-  ZodPipeline: "pipeline"
-};
-var isZodV3Schema = (schema) => {
-  const def = getZodDef(schema);
-  return "typeName" in def;
-};
-var getZodSchemaType = (schema) => {
-  const def = getZodDef(schema);
-  if ("typeName" in def) {
-    const { typeName } = def;
-    return v3TypeNameMap[typeName] ?? typeName;
-  }
-  const { type } = def;
-  if (type === "union" && def.discriminator !== undefined) {
-    return "discriminatedUnion";
-  }
-  return type;
-};
-var getZodSchemaDescription = (schema) => {
-  if (isZodV3Schema(schema)) {
-    return getZodDef(schema).description;
-  }
-  return schema.description;
-};
-var getObjectShape = (schema) => {
-  const { shape } = getZodDef(schema);
-  return typeof shape === "function" ? shape() : shape;
-};
-var getArrayElement = (schema) => {
-  const def = getZodDef(schema);
-  return isZodV3Schema(schema) ? def.type : def.element;
-};
-var getInnerType = (schema) => {
-  return getZodDef(schema).innerType;
-};
-var getEffectsInner = (schema) => {
-  return getZodDef(schema).schema;
-};
-var getLiteralValue = (schema) => {
-  const def = getZodDef(schema);
-  if (isZodV3Schema(schema)) {
-    return def.value;
-  }
-  return def.values?.[0];
-};
-var getEnumValues = (schema) => {
-  const def = getZodDef(schema);
-  if (isZodV3Schema(schema)) {
-    return def.values;
-  }
-  const { entries } = def;
-  return Object.values(entries);
-};
-var getFirstEnumValue = (schema) => {
-  const def = getZodDef(schema);
-  if (isZodV3Schema(schema)) {
-    if (def.typeName === "ZodNativeEnum") {
-      const vals = Object.values(def.values);
-      return vals[0];
-    }
-    return def.values[0];
-  }
-  const { entries } = def;
-  const pairs = Object.entries(entries);
-  const hasReverseMapping = pairs.some(([key, value]) => key !== String(value));
-  if (hasReverseMapping) {
-    const forwardPairs = pairs.filter(([key]) => Number.isNaN(Number(key)));
-    if (forwardPairs.length > 0) {
-      return forwardPairs[0][1];
-    }
-  }
-  return Object.values(entries)[0];
-};
-var getUnionOptions = (schema) => {
-  return getZodDef(schema).options;
-};
-var getDefaultValue = (schema) => {
-  const dv = getZodDef(schema).defaultValue;
-  return typeof dv === "function" ? dv() : dv;
-};
-var getDiscriminator = (schema) => {
-  return getZodDef(schema).discriminator;
-};
-var getDiscriminatedOptionKeys = (schema) => {
-  const def = getZodDef(schema);
-  const discriminator = getDiscriminator(schema);
-  if (isZodV3Schema(schema) && def.optionsMap) {
-    return [...def.optionsMap.keys()];
-  }
-  const options = getUnionOptions(schema);
-  return options.map((option) => {
-    const shape = getObjectShape(option);
-    const discriminatorSchema = shape[discriminator];
-    return getLiteralValue(discriminatorSchema);
-  });
-};
-var getDiscriminatedOption = (schema, discriminatorValue) => {
-  const def = getZodDef(schema);
-  const discriminator = getDiscriminator(schema);
-  if (isZodV3Schema(schema) && def.optionsMap) {
-    return def.optionsMap.get(discriminatorValue);
-  }
-  const options = getUnionOptions(schema);
-  return options.find((option) => {
-    const shape = getObjectShape(option);
-    const discriminatorSchema = shape[discriminator];
-    return getLiteralValue(discriminatorSchema) === discriminatorValue;
-  });
-};
-var getIntersectionSchemas = (schema) => {
-  const def = getZodDef(schema);
-  return { left: def.left, right: def.right };
-};
-var getTupleItems = (schema) => {
-  return getZodDef(schema).items;
-};
-var getRecordValueType = (schema) => {
-  return getZodDef(schema).valueType;
-};
-var getRecordKeyType = (schema) => {
-  return getZodDef(schema).keyType;
-};
-var getPipelineOutput = (schema) => {
-  return getZodDef(schema).out;
-};
-var getPipelineInput = (schema) => {
-  return getZodDef(schema).in;
-};
-var getBrandedInner = (schema) => {
-  return isZodV3Schema(schema) ? getZodDef(schema).type : schema;
-};
-
 // src/helpers/timeline-layout.ts
 var TIMELINE_PADDING = 16;
 var TIMELINE_BORDER = 1;
@@ -304,28 +126,17 @@ var TIMELINE_ITEM_BORDER_BOTTOM = 1;
 var TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
 var SCHEMA_FIELD_ROW_HEIGHT = 26;
 var UNSUPPORTED_FIELD_ROW_HEIGHT = 26;
-var SUPPORTED_SCHEMA_TYPES = new Set([
-  "number",
-  "string",
-  "boolean",
-  "enum",
-  "date",
-  "array",
-  "object",
-  "optional",
-  "nullable",
-  "default"
-]);
+var SUPPORTED_SCHEMA_TYPES = new Set(["number", "boolean"]);
 var getSchemaFields = (controls) => {
   if (!controls) {
     return null;
   }
-  const shape = getObjectShape(controls.schema);
-  return Object.entries(shape).map(([key, fieldSchema]) => {
-    const typeName = getZodSchemaType(fieldSchema);
+  return Object.entries(controls.schema).map(([key, fieldSchema]) => {
+    const typeName = fieldSchema.type;
     const supported = SUPPORTED_SCHEMA_TYPES.has(typeName);
     return {
       key,
+      description: fieldSchema.description,
       typeName,
       supported,
       rowHeight: supported ? SCHEMA_FIELD_ROW_HEIGHT : UNSUPPORTED_FIELD_ROW_HEIGHT,
@@ -11278,6 +11089,184 @@ import { Internals as Internals30 } from "remotion";
 // src/api/save-default-props.ts
 import { getRemotionEnvironment as getRemotionEnvironment4 } from "remotion";
 
+// src/components/RenderModal/SchemaEditor/zod-schema-type.ts
+var zodSafeParse = (schema, data) => {
+  return schema.safeParse(data);
+};
+var getZodDef = (schema) => {
+  if (schema._def)
+    return schema._def;
+  if (schema._zod)
+    return schema._zod.def;
+  throw new Error("Invalid zod schema: missing _def and _zod");
+};
+var v3TypeNameMap = {
+  ZodString: "string",
+  ZodNumber: "number",
+  ZodBoolean: "boolean",
+  ZodObject: "object",
+  ZodArray: "array",
+  ZodEnum: "enum",
+  ZodUnion: "union",
+  ZodDiscriminatedUnion: "discriminatedUnion",
+  ZodOptional: "optional",
+  ZodNullable: "nullable",
+  ZodDefault: "default",
+  ZodTuple: "tuple",
+  ZodDate: "date",
+  ZodAny: "any",
+  ZodUnknown: "unknown",
+  ZodBigInt: "bigint",
+  ZodNull: "null",
+  ZodUndefined: "undefined",
+  ZodEffects: "effects",
+  ZodLiteral: "literal",
+  ZodRecord: "record",
+  ZodNever: "never",
+  ZodVoid: "void",
+  ZodNaN: "nan",
+  ZodSymbol: "symbol",
+  ZodIntersection: "intersection",
+  ZodMap: "map",
+  ZodSet: "set",
+  ZodLazy: "lazy",
+  ZodFunction: "function",
+  ZodNativeEnum: "nativeEnum",
+  ZodCatch: "catch",
+  ZodPromise: "promise",
+  ZodBranded: "branded",
+  ZodPipeline: "pipeline"
+};
+var isZodV3Schema = (schema) => {
+  const def = getZodDef(schema);
+  return "typeName" in def;
+};
+var getZodSchemaType = (schema) => {
+  const def = getZodDef(schema);
+  if ("typeName" in def) {
+    const { typeName } = def;
+    return v3TypeNameMap[typeName] ?? typeName;
+  }
+  const { type } = def;
+  if (type === "union" && def.discriminator !== undefined) {
+    return "discriminatedUnion";
+  }
+  return type;
+};
+var getZodSchemaDescription = (schema) => {
+  if (isZodV3Schema(schema)) {
+    return getZodDef(schema).description;
+  }
+  return schema.description;
+};
+var getObjectShape = (schema) => {
+  const { shape } = getZodDef(schema);
+  return typeof shape === "function" ? shape() : shape;
+};
+var getArrayElement = (schema) => {
+  const def = getZodDef(schema);
+  return isZodV3Schema(schema) ? def.type : def.element;
+};
+var getInnerType = (schema) => {
+  return getZodDef(schema).innerType;
+};
+var getEffectsInner = (schema) => {
+  return getZodDef(schema).schema;
+};
+var getLiteralValue = (schema) => {
+  const def = getZodDef(schema);
+  if (isZodV3Schema(schema)) {
+    return def.value;
+  }
+  return def.values?.[0];
+};
+var getEnumValues = (schema) => {
+  const def = getZodDef(schema);
+  if (isZodV3Schema(schema)) {
+    return def.values;
+  }
+  const { entries } = def;
+  return Object.values(entries);
+};
+var getFirstEnumValue = (schema) => {
+  const def = getZodDef(schema);
+  if (isZodV3Schema(schema)) {
+    if (def.typeName === "ZodNativeEnum") {
+      const vals = Object.values(def.values);
+      return vals[0];
+    }
+    return def.values[0];
+  }
+  const { entries } = def;
+  const pairs = Object.entries(entries);
+  const hasReverseMapping = pairs.some(([key, value]) => key !== String(value));
+  if (hasReverseMapping) {
+    const forwardPairs = pairs.filter(([key]) => Number.isNaN(Number(key)));
+    if (forwardPairs.length > 0) {
+      return forwardPairs[0][1];
+    }
+  }
+  return Object.values(entries)[0];
+};
+var getUnionOptions = (schema) => {
+  return getZodDef(schema).options;
+};
+var getDefaultValue = (schema) => {
+  const dv = getZodDef(schema).defaultValue;
+  return typeof dv === "function" ? dv() : dv;
+};
+var getDiscriminator = (schema) => {
+  return getZodDef(schema).discriminator;
+};
+var getDiscriminatedOptionKeys = (schema) => {
+  const def = getZodDef(schema);
+  const discriminator = getDiscriminator(schema);
+  if (isZodV3Schema(schema) && def.optionsMap) {
+    return [...def.optionsMap.keys()];
+  }
+  const options = getUnionOptions(schema);
+  return options.map((option) => {
+    const shape = getObjectShape(option);
+    const discriminatorSchema = shape[discriminator];
+    return getLiteralValue(discriminatorSchema);
+  });
+};
+var getDiscriminatedOption = (schema, discriminatorValue) => {
+  const def = getZodDef(schema);
+  const discriminator = getDiscriminator(schema);
+  if (isZodV3Schema(schema) && def.optionsMap) {
+    return def.optionsMap.get(discriminatorValue);
+  }
+  const options = getUnionOptions(schema);
+  return options.find((option) => {
+    const shape = getObjectShape(option);
+    const discriminatorSchema = shape[discriminator];
+    return getLiteralValue(discriminatorSchema) === discriminatorValue;
+  });
+};
+var getIntersectionSchemas = (schema) => {
+  const def = getZodDef(schema);
+  return { left: def.left, right: def.right };
+};
+var getTupleItems = (schema) => {
+  return getZodDef(schema).items;
+};
+var getRecordValueType = (schema) => {
+  return getZodDef(schema).valueType;
+};
+var getRecordKeyType = (schema) => {
+  return getZodDef(schema).keyType;
+};
+var getPipelineOutput = (schema) => {
+  return getZodDef(schema).out;
+};
+var getPipelineInput = (schema) => {
+  return getZodDef(schema).in;
+};
+var getBrandedInner = (schema) => {
+  return isZodV3Schema(schema) ? getZodDef(schema).type : schema;
+};
+
 // src/components/RenderModal/SchemaEditor/extract-enum-json-paths.ts
 var extractEnumJsonPaths = ({
   schema,
@@ -13629,7 +13618,8 @@ var InputDraggerForwardRefFn = ({
     return {
       ...inputBaseStyle,
       backgroundColor: "transparent",
-      borderColor: "transparent"
+      borderColor: "transparent",
+      padding: "4px 6px"
     };
   }, []);
   const span = useMemo69(() => ({
@@ -21175,7 +21165,7 @@ var Inner2 = () => {
 
 // src/components/Timeline/TimelineList.tsx
 import { PlayerInternals as PlayerInternals18 } from "@remotion/player";
-import { useRef as useRef39 } from "react";
+import { useRef as useRef40 } from "react";
 
 // src/components/Timeline/TimelineListItem.tsx
 import {
@@ -21220,6 +21210,7 @@ import {
   useContext as useContext67,
   useEffect as useEffect67,
   useMemo as useMemo104,
+  useRef as useRef37,
   useState as useState70
 } from "react";
 import { Internals as Internals49 } from "remotion";
@@ -21237,19 +21228,15 @@ var draggerStyle = {
   width: 80,
   marginLeft: "auto"
 };
+var checkboxContainer = {
+  marginLeft: "auto"
+};
 var notEditableBackground = {
   backgroundColor: "rgba(255, 0, 0, 0.2)",
   borderRadius: 3,
   padding: "0 4px"
 };
-var TimelineNumberField = ({
-  field,
-  canUpdate,
-  onSave,
-  onSavingChange,
-  onDragValueChange,
-  onDragEnd
-}) => {
+var TimelineNumberField = ({ field, codeValue, canUpdate, onSave, onDragValueChange, onDragEnd }) => {
   const [dragValue, setDragValue] = useState69(null);
   const dragging = useRef36(false);
   const onValueChange = useCallback98((newVal) => {
@@ -21259,56 +21246,60 @@ var TimelineNumberField = ({
   }, [onDragValueChange, field.key]);
   useEffect66(() => {
     setDragValue(null);
-    onSavingChange(false);
     onDragEnd();
-  }, [field.currentValue, onSavingChange, onDragEnd]);
+  }, [field.currentValue, onDragEnd]);
   const onValueChangeEnd = useCallback98((newVal) => {
-    if (canUpdate && newVal !== field.currentValue) {
-      onSavingChange(true);
+    if (canUpdate && newVal !== codeValue) {
       onSave(field.key, newVal).catch(() => {
-        onSavingChange(false);
         setDragValue(null);
       });
     } else {
       setDragValue(null);
     }
-  }, [canUpdate, onSave, onSavingChange, field.key, field.currentValue]);
+  }, [canUpdate, onSave, field.key, codeValue]);
   const onTextChange = useCallback98((newVal) => {
     if (canUpdate) {
       const parsed = Number(newVal);
-      if (!Number.isNaN(parsed) && parsed !== field.currentValue) {
+      if (!Number.isNaN(parsed) && parsed !== codeValue) {
         setDragValue(parsed);
-        onSavingChange(true);
         onSave(field.key, parsed).catch(() => {
-          onSavingChange(false);
           setDragValue(null);
         });
       }
     }
-  }, [canUpdate, onSave, onSavingChange, field.key, field.currentValue]);
+  }, [canUpdate, onSave, field.key, codeValue]);
   return /* @__PURE__ */ jsx192(InputDragger, {
     type: "number",
-    value: dragValue ?? field.currentValue,
+    value: dragValue ?? codeValue,
     style: draggerStyle,
     status: "ok",
     onValueChange,
     onValueChangeEnd,
     onTextChange,
-    min: getZodNumberMinimum(field.fieldSchema),
-    max: getZodNumberMaximum(field.fieldSchema),
-    step: getZodNumberStep(field.fieldSchema),
+    min: field.fieldSchema.type === "number" ? field.fieldSchema.min ?? -Infinity : -Infinity,
+    max: field.fieldSchema.type === "number" ? field.fieldSchema.max ?? Infinity : Infinity,
+    step: field.fieldSchema.type === "number" ? field.fieldSchema.step ?? 1 : 1,
     rightAlign: true
   });
 };
-var TimelineFieldValue = ({
-  field,
-  onSave,
-  onSavingChange,
-  onDragValueChange,
-  onDragEnd,
-  propStatus,
-  canUpdate
-}) => {
+var TimelineBooleanField = ({ field, codeValue, canUpdate, onSave }) => {
+  const checked = Boolean(codeValue);
+  const onChange = useCallback98(() => {
+    if (canUpdate) {
+      onSave(field.key, !checked);
+    }
+  }, [canUpdate, onSave, field.key, checked]);
+  return /* @__PURE__ */ jsx192("div", {
+    style: checkboxContainer,
+    children: /* @__PURE__ */ jsx192(Checkbox, {
+      checked,
+      onChange,
+      name: field.key,
+      disabled: !canUpdate
+    })
+  });
+};
+var TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate }) => {
   const wrapperStyle = canUpdate === null || canUpdate === false ? notEditableBackground : undefined;
   if (!field.supported) {
     return /* @__PURE__ */ jsx192("span", {
@@ -21331,31 +21322,34 @@ var TimelineFieldValue = ({
       })
     });
   }
+  const effectiveCodeValue = propStatus.codeValue ?? field.currentValue ?? field.fieldSchema.default;
   if (field.typeName === "number") {
     return /* @__PURE__ */ jsx192("span", {
       style: wrapperStyle,
       children: /* @__PURE__ */ jsx192(TimelineNumberField, {
         field,
+        codeValue: effectiveCodeValue,
         canUpdate,
         onSave,
-        onSavingChange,
         onDragValueChange,
         onDragEnd
       })
     });
   }
+  if (field.typeName === "boolean") {
+    return /* @__PURE__ */ jsx192("span", {
+      style: wrapperStyle,
+      children: /* @__PURE__ */ jsx192(TimelineBooleanField, {
+        field,
+        codeValue: effectiveCodeValue,
+        canUpdate,
+        onSave
+      })
+    });
+  }
   return /* @__PURE__ */ jsx192("span", {
     style: { ...unsupportedLabel, fontStyle: "normal" },
-    children: String(field.currentValue)
-  });
-};
-var TimelineFieldSavingSpinner = ({ saving }) => {
-  if (!saving) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx192(Spinner, {
-    duration: 0.5,
-    size: 12
+    children: String(effectiveCodeValue)
   });
 };
 
@@ -21387,30 +21381,20 @@ var fieldLabelRow = {
   gap: 6
 };
 var TimelineFieldRow = ({ field, onSave, onDragValueChange, onDragEnd, propStatus }) => {
-  const [saving, setSaving] = useState70(false);
-  const onSavingChange = useCallback99((s) => {
-    setSaving(s);
-  }, []);
   return /* @__PURE__ */ jsxs92("div", {
     style: { ...fieldRow, height: field.rowHeight },
     children: [
-      /* @__PURE__ */ jsxs92("div", {
+      /* @__PURE__ */ jsx193("div", {
         style: fieldLabelRow,
-        children: [
-          /* @__PURE__ */ jsx193("span", {
-            style: fieldName,
-            children: field.key
-          }),
-          /* @__PURE__ */ jsx193(TimelineFieldSavingSpinner, {
-            saving
-          })
-        ]
+        children: /* @__PURE__ */ jsx193("span", {
+          style: fieldName,
+          children: field.description ?? field.key
+        })
       }),
       /* @__PURE__ */ jsx193(TimelineFieldValue, {
         field,
         propStatus,
         onSave,
-        onSavingChange,
         onDragValueChange,
         onDragEnd,
         canUpdate: propStatus?.canUpdate ?? false
@@ -21420,6 +21404,8 @@ var TimelineFieldRow = ({ field, onSave, onDragValueChange, onDragEnd, propStatu
 };
 var TimelineExpandedSection = ({ sequence, originalLocation }) => {
   const [propStatuses, setPropStatuses] = useState70(null);
+  const { previewServerState: state, subscribeToEvent } = useContext67(StudioServerConnectionCtx);
+  const clientId = state.type === "connected" ? state.clientId : undefined;
   const schemaFields = useMemo104(() => getSchemaFields(sequence.controls), [sequence.controls]);
   const validatedLocation = useMemo104(() => {
     if (!originalLocation || !originalLocation.source || !originalLocation.line) {
@@ -21431,17 +21417,32 @@ var TimelineExpandedSection = ({ sequence, originalLocation }) => {
       column: originalLocation.column ?? 0
     };
   }, [originalLocation]);
+  const locationSource = validatedLocation?.source ?? null;
+  const locationLine = validatedLocation?.line ?? null;
+  const locationColumn = validatedLocation?.column ?? null;
+  const schemaKeysString = useMemo104(() => schemaFields ? schemaFields.map((f) => f.key).join(",") : null, [schemaFields]);
+  const currentLocationSource = useRef37(locationSource);
+  currentLocationSource.current = locationSource;
+  const currentLocationLine = useRef37(locationLine);
+  currentLocationLine.current = locationLine;
+  const currentLocationColumn = useRef37(locationColumn);
+  currentLocationColumn.current = locationColumn;
   useEffect67(() => {
-    if (!sequence.controls || !validatedLocation || !schemaFields) {
+    if (!clientId || !locationSource || !locationLine || locationColumn === null || !schemaKeysString) {
       setPropStatuses(null);
       return;
     }
-    callApi("/api/can-update-sequence-props", {
-      fileName: validatedLocation.source,
-      line: validatedLocation.line,
-      column: validatedLocation.column,
-      keys: schemaFields.map((f) => f.key)
+    const keys = schemaKeysString.split(",");
+    callApi("/api/subscribe-to-sequence-props", {
+      fileName: locationSource,
+      line: locationLine,
+      column: locationColumn,
+      keys,
+      clientId
     }).then((result) => {
+      if (currentLocationSource.current !== locationSource || currentLocationLine.current !== locationLine || currentLocationColumn.current !== locationColumn) {
+        return;
+      }
       if (result.canUpdate) {
         setPropStatuses(result.props);
       } else {
@@ -21450,7 +21451,43 @@ var TimelineExpandedSection = ({ sequence, originalLocation }) => {
     }).catch(() => {
       setPropStatuses(null);
     });
-  }, [sequence.controls, validatedLocation, schemaFields]);
+    return () => {
+      callApi("/api/unsubscribe-from-sequence-props", {
+        fileName: locationSource,
+        line: locationLine,
+        column: locationColumn,
+        clientId
+      }).catch(() => {});
+    };
+  }, [
+    clientId,
+    locationSource,
+    locationLine,
+    locationColumn,
+    schemaKeysString
+  ]);
+  useEffect67(() => {
+    if (!locationSource || !locationLine || locationColumn === null) {
+      return;
+    }
+    const listener = (event) => {
+      if (event.type !== "sequence-props-updated") {
+        return;
+      }
+      if (event.fileName !== currentLocationSource.current || event.line !== currentLocationLine.current || event.column !== currentLocationColumn.current) {
+        return;
+      }
+      if (event.result.canUpdate) {
+        setPropStatuses(event.result.props);
+      } else {
+        setPropStatuses(null);
+      }
+    };
+    const unsub = subscribeToEvent("sequence-props-updated", listener);
+    return () => {
+      unsub();
+    };
+  }, [locationSource, locationLine, locationColumn, subscribeToEvent]);
   const expandedHeight = useMemo104(() => getExpandedTrackHeight(sequence.controls), [sequence.controls]);
   const { setOverride, clearOverrides } = useContext67(Internals49.SequenceControlOverrideContext);
   const onSave = useCallback99((key4, value) => {
@@ -21461,23 +21498,27 @@ var TimelineExpandedSection = ({ sequence, originalLocation }) => {
     if (!status || !status.canUpdate) {
       return Promise.reject(new Error("Cannot save"));
     }
+    const field = schemaFields?.find((f) => f.key === key4);
+    const defaultValue = field && field.fieldSchema.default !== undefined ? JSON.stringify(field.fieldSchema.default) : null;
     return callApi("/api/save-sequence-props", {
       fileName: validatedLocation.source,
       line: validatedLocation.line,
       column: validatedLocation.column,
       key: key4,
       value: JSON.stringify(value),
-      enumPaths: []
+      enumPaths: [],
+      defaultValue
     }).then(() => {
       return;
     });
-  }, [propStatuses, validatedLocation]);
+  }, [propStatuses, validatedLocation, schemaFields]);
+  const overrideId = sequence.controls?.overrideId ?? sequence.id;
   const onDragValueChange = useCallback99((key4, value) => {
-    setOverride(sequence.id, key4, value);
-  }, [setOverride, sequence.id]);
+    setOverride(overrideId, key4, value);
+  }, [setOverride, overrideId]);
   const onDragEnd = useCallback99(() => {
-    clearOverrides(sequence.id);
-  }, [clearOverrides, sequence.id]);
+    clearOverrides(overrideId);
+  }, [clearOverrides, overrideId]);
   return /* @__PURE__ */ jsx193("div", {
     style: { ...expandedSectionBase, height: expandedHeight },
     children: schemaFields ? schemaFields.map((field) => /* @__PURE__ */ jsx193(TimelineFieldRow, {
@@ -21752,7 +21793,8 @@ var arrowButton = {
   lineHeight: 1
 };
 var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
-  const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
+  const { previewServerState } = useContext69(StudioServerConnectionCtx);
+  const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) && previewServerState.type === "connected";
   const { hidden, setHidden } = useContext69(Internals50.SequenceVisibilityToggleContext);
   const { expandedTracks, toggleTrack } = useContext69(ExpandedTracksContext);
   const [originalLocation, setOriginalLocation] = useState72(null);
@@ -21766,7 +21808,7 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
       console.error("Could not get original location of Sequence", err);
     });
   }, [sequence.stack]);
-  const isExpanded = expandedTracks[sequence.id] ?? false;
+  const isExpanded = visualModeEnabled && (expandedTracks[sequence.id] ?? false);
   const onToggleExpand = useCallback102(() => {
     toggleTrack(sequence.id);
   }, [sequence.id, toggleTrack]);
@@ -21858,7 +21900,7 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext70, useEffect as useEffect70, useMemo as useMemo107, useRef as useRef38 } from "react";
+import { useContext as useContext70, useEffect as useEffect70, useMemo as useMemo107, useRef as useRef39 } from "react";
 import { Internals as Internals52 } from "remotion";
 
 // src/components/TimeValue.tsx
@@ -21867,7 +21909,7 @@ import {
   useCallback as useCallback103,
   useEffect as useEffect69,
   useImperativeHandle as useImperativeHandle13,
-  useRef as useRef37
+  useRef as useRef38
 } from "react";
 import { Internals as Internals51, useCurrentFrame } from "remotion";
 import { jsx as jsx197, jsxs as jsxs95 } from "react/jsx-runtime";
@@ -21900,7 +21942,7 @@ var TimeValue = () => {
   const isStill = useIsStill();
   const { seek, play, pause, toggle } = PlayerInternals17.usePlayer();
   const keybindings = useKeybinding();
-  const ref = useRef37(null);
+  const ref = useRef38(null);
   const onTextChange = useCallback103((newVal) => {
     seek(parseInt(newVal, 10));
   }, [seek]);
@@ -22028,7 +22070,7 @@ var TimelineTimeIndicators = () => {
   });
 };
 var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
-  const ref = useRef38(null);
+  const ref = useRef39(null);
   useEffect70(() => {
     const currentRef = ref.current;
     if (!currentRef) {
@@ -22111,7 +22153,7 @@ var container42 = {
   background: BACKGROUND
 };
 var TimelineList = ({ timeline }) => {
-  const ref = useRef39(null);
+  const ref = useRef40(null);
   const size4 = PlayerInternals18.useElementSize(ref, {
     shouldApplyCssTransforms: false,
     triggerOnWindowResize: false
@@ -22260,21 +22302,10 @@ var getTimelineSequenceLayout = ({
   postmountDisplay
 }) => {
   const maxMediaSequenceDuration = (maxMediaDuration ?? Infinity) - startFromMedia;
-  const lastFrame = (video.durationInFrames ?? 1) - 1;
-  let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom);
-  let naturalSpatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
-  const shouldAddHalfAFrameAtEnd = startFrom + durationInFrames < lastFrame;
-  const shouldAddHalfAFrameAtStart = startFrom > 0;
-  if (shouldAddHalfAFrameAtEnd) {
-    spatialDuration += 0.5;
-    naturalSpatialDuration += 0.5;
-  }
-  if (shouldAddHalfAFrameAtStart) {
-    spatialDuration += 0.5;
-    naturalSpatialDuration += 0.5;
-  }
-  const startFromWithOffset = shouldAddHalfAFrameAtStart ? startFrom - 0.5 : startFrom;
-  const marginLeft = lastFrame === 0 ? 0 : startFromWithOffset / lastFrame * (windowWidth - TIMELINE_PADDING * 2);
+  const lastFrame = video.durationInFrames ?? 1;
+  const spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames, lastFrame - startFrom);
+  const naturalSpatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames);
+  const marginLeft = lastFrame === 0 ? 0 : startFrom / lastFrame * (windowWidth - TIMELINE_PADDING * 2);
   const nonNegativeMarginLeft = Math.min(marginLeft, 0);
   const width = getWidthOfTrack({
     durationInFrames,
@@ -22363,7 +22394,7 @@ var useMaxMediaDuration = (s, fps) => {
 
 // src/components/AudioWaveform.tsx
 import { getAudioData, getWaveformPortion } from "@remotion/media-utils";
-import { useEffect as useEffect73, useMemo as useMemo110, useRef as useRef40, useState as useState74 } from "react";
+import { useEffect as useEffect73, useMemo as useMemo110, useRef as useRef41, useState as useState74 } from "react";
 import { Internals as Internals54 } from "remotion";
 
 // src/components/AudioWaveformBar.tsx
@@ -22422,12 +22453,12 @@ var AudioWaveform = ({
 }) => {
   const [metadata, setMetadata] = useState74(null);
   const [error, setError] = useState74(null);
-  const mountState = useRef40({ isMounted: true });
+  const mountState = useRef41({ isMounted: true });
   const vidConf = Internals54.useUnsafeVideoConfig();
   if (vidConf === null) {
     throw new Error("Expected video config");
   }
-  const canvas = useRef40(null);
+  const canvas = useRef41(null);
   useEffect73(() => {
     const { current } = mountState;
     current.isMounted = true;
@@ -22627,7 +22658,8 @@ var relativeFrameStyle = {
   fontSize: 11,
   fontFamily: "Arial, Helvetica, sans-serif",
   color: "white",
-  opacity: 0.5
+  opacity: 0.5,
+  whiteSpace: "nowrap"
 };
 var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
   return /* @__PURE__ */ jsx205("div", {
@@ -22637,7 +22669,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
 };
 
 // src/components/Timeline/TimelineVideoInfo.tsx
-import { useEffect as useEffect74, useRef as useRef41, useState as useState75 } from "react";
+import { useEffect as useEffect74, useRef as useRef42, useState as useState75 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/extract-frames.ts
@@ -22685,15 +22717,22 @@ async function extractFrames({
       return;
     }
     const sink = new VideoSampleSink(videoTrack);
-    for await (const videoSample of sink.samplesAtTimestamps(timestamps)) {
-      if (signal?.aborted) {
-        videoSample?.close();
-        break;
-      }
-      if (!videoSample) {
-        continue;
+    const sampleIterator = sink.samplesAtTimestamps(timestamps);
+    try {
+      for await (const videoSample of sampleIterator) {
+        if (signal?.aborted) {
+          videoSample?.close();
+          break;
+        }
+        if (!videoSample) {
+          continue;
+        }
+        onVideoSample(videoSample);
       }
-      onVideoSample(videoSample);
+    } finally {
+      try {
+        await sampleIterator.return?.();
+      } catch {}
     }
   } catch (error) {
     if (error instanceof InputDisposedError2) {
@@ -22966,9 +23005,9 @@ var TimelineVideoInfo = ({
   playbackRate
 }) => {
   const { fps } = useVideoConfig5();
-  const ref = useRef41(null);
+  const ref = useRef42(null);
   const [error, setError] = useState75(null);
-  const aspectRatio = useRef41(getAspectRatioFromCache(src));
+  const aspectRatio = useRef42(getAspectRatioFromCache(src));
   useEffect74(() => {
     return () => {
       clearFramesForSrc(src);
@@ -23036,46 +23075,59 @@ var TimelineVideoInfo = ({
       },
       src,
       onVideoSample: (sample) => {
-        const frame2 = sample.toVideoFrame();
-        const scale = HEIGHT / frame2.displayHeight * window.devicePixelRatio;
-        const transformed = resizeVideoFrame({
-          frame: frame2,
-          scale
-        });
-        if (transformed !== frame2) {
-          frame2.close();
-        }
-        const databaseKey = makeFrameDatabaseKey(src, transformed.timestamp);
-        const existingFrame = frameDatabase.get(databaseKey);
-        if (existingFrame) {
-          existingFrame.frame.close();
-        }
-        frameDatabase.set(databaseKey, {
-          frame: transformed,
-          lastUsed: Date.now()
-        });
-        if (aspectRatio.current === null) {
-          throw new Error("Aspect ratio is not set");
+        let frame2;
+        try {
+          frame2 = sample.toVideoFrame();
+          const scale = HEIGHT / frame2.displayHeight * window.devicePixelRatio;
+          const transformed = resizeVideoFrame({
+            frame: frame2,
+            scale
+          });
+          if (transformed !== frame2) {
+            frame2.close();
+          }
+          frame2 = undefined;
+          const databaseKey = makeFrameDatabaseKey(src, transformed.timestamp);
+          const existingFrame = frameDatabase.get(databaseKey);
+          if (existingFrame) {
+            existingFrame.frame.close();
+          }
+          frameDatabase.set(databaseKey, {
+            frame: transformed,
+            lastUsed: Date.now()
+          });
+          if (aspectRatio.current === null) {
+            throw new Error("Aspect ratio is not set");
+          }
+          ensureSlots({
+            filledSlots,
+            fromSeconds,
+            toSeconds,
+            naturalWidth,
+            aspectRatio: aspectRatio.current
+          });
+          fillFrameWhereItFits({
+            ctx,
+            filledSlots,
+            visualizationWidth: naturalWidth,
+            frame: transformed,
+            segmentDuration: toSeconds - fromSeconds,
+            fromSeconds
+          });
+        } catch (e) {
+          if (frame2) {
+            frame2.close();
+          }
+          throw e;
+        } finally {
+          sample.close();
         }
-        ensureSlots({
-          filledSlots,
-          fromSeconds,
-          toSeconds,
-          naturalWidth,
-          aspectRatio: aspectRatio.current
-        });
-        fillFrameWhereItFits({
-          ctx,
-          filledSlots,
-          visualizationWidth: naturalWidth,
-          frame: transformed,
-          segmentDuration: toSeconds - fromSeconds,
-          fromSeconds
-        });
-        sample.close();
       },
       signal: controller.signal
     }).then(() => {
+      if (controller.signal.aborted) {
+        return;
+      }
       fillWithCachedFrames({
         ctx,
         naturalWidth,
@@ -23251,7 +23303,8 @@ var getExpandedPlaceholderStyle = (controls) => ({
 });
 var TimelineTracks = ({ timeline, hasBeenCut }) => {
   const { expandedTracks } = useContext73(ExpandedTracksContext);
-  const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
+  const { previewServerState } = useContext73(StudioServerConnectionCtx);
+  const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) && previewServerState.type === "connected";
   const timelineStyle = useMemo112(() => {
     return {
       ...timelineContent,
@@ -24892,7 +24945,7 @@ import {
   useContext as useContext85,
   useEffect as useEffect80,
   useMemo as useMemo121,
-  useRef as useRef43,
+  useRef as useRef44,
   useState as useState81
 } from "react";
 import { Internals as Internals63 } from "remotion";
@@ -25765,7 +25818,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect79, useMemo as useMemo120, useRef as useRef42, useState as useState80 } from "react";
+import { useEffect as useEffect79, useMemo as useMemo120, useRef as useRef43, useState as useState80 } from "react";
 import { jsx as jsx227, jsxs as jsxs116, Fragment as Fragment36 } from "react/jsx-runtime";
 var container50 = {
   paddingLeft: 16,
@@ -25795,7 +25848,7 @@ var labelContainer = {
 };
 var QuickSwitcherResult = ({ result, selected }) => {
   const [hovered, setIsHovered] = useState80(false);
-  const ref = useRef42(null);
+  const ref = useRef43(null);
   const keybindings = useKeybinding();
   useEffect79(() => {
     const { current } = ref;
@@ -25973,7 +26026,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       selectedIndex: 0
     });
   }, [initialMode, invocationTimestamp]);
-  const inputRef = useRef43(null);
+  const inputRef = useRef44(null);
   const selectComposition = useSelectComposition();
   const closeMenu = useCallback112(() => {
     return;
@@ -26733,7 +26786,7 @@ import {
   useEffect as useEffect83,
   useMemo as useMemo132,
   useReducer as useReducer2,
-  useRef as useRef45,
+  useRef as useRef46,
   useState as useState87
 } from "react";
 
@@ -28476,12 +28529,12 @@ import { BrowserSafeApis as BrowserSafeApis6 } from "@remotion/renderer/client";
 import { useCallback as useCallback124, useMemo as useMemo127 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext87, useEffect as useEffect82, useRef as useRef44, useState as useState86 } from "react";
+import { useContext as useContext87, useEffect as useEffect82, useRef as useRef45, useState as useState86 } from "react";
 var useFileExistence = (outName) => {
   const [exists, setExists] = useState86(false);
   const { previewServerState: state, subscribeToEvent } = useContext87(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
-  const currentOutName = useRef44("");
+  const currentOutName = useRef45("");
   currentOutName.current = outName;
   useEffect82(() => {
     if (!clientId) {
@@ -29869,7 +29922,7 @@ var RenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const isMounted = useRef45(true);
+  const isMounted = useRef46(true);
   const [isVideo] = useState87(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
@@ -30864,9 +30917,9 @@ import {
   getEncodableAudioCodecs,
   getSupportedAudioCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect84, useRef as useRef46, useState as useState88 } from "react";
+import { useEffect as useEffect84, useRef as useRef47, useState as useState88 } from "react";
 var useEncodableAudioCodecs = (container61) => {
-  const cacheRef = useRef46({});
+  const cacheRef = useRef47({});
   const [codecsByContainer, setCodecsByContainer] = useState88(() => {
     return {
       [container61]: getSupportedAudioCodecsForContainer(container61)
@@ -30906,9 +30959,9 @@ import {
   getEncodableVideoCodecs,
   getSupportedVideoCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect85, useRef as useRef47, useState as useState89 } from "react";
+import { useEffect as useEffect85, useRef as useRef48, useState as useState89 } from "react";
 var useEncodableVideoCodecs = (container61) => {
-  const cacheRef = useRef47({});
+  const cacheRef = useRef48({});
   const [codecsByContainer, setCodecsByContainer] = useState89(() => {
     return {
       [container61]: getSupportedVideoCodecsForContainer(container61)
@@ -33247,15 +33300,15 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback143, useMemo as useMemo146, useRef as useRef48, useState as useState99 } from "react";
+import { useCallback as useCallback143, useMemo as useMemo146, useRef as useRef49, useState as useState99 } from "react";
 import { jsx as jsx286 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState99(() => loadGuidesList());
   const [selectedGuideId, setSelectedGuideId] = useState99(null);
   const [hoveredGuideId, setHoveredGuideId] = useState99(null);
   const [editorShowGuides, setEditorShowGuidesState] = useState99(() => loadEditorShowGuidesOption());
-  const shouldCreateGuideRef = useRef48(false);
-  const shouldDeleteGuideRef = useRef48(false);
+  const shouldCreateGuideRef = useRef49(false);
+  const shouldDeleteGuideRef = useRef49(false);
   const setEditorShowGuides = useCallback143((newValue) => {
     setEditorShowGuidesState((prevState) => {
       const newVal = newValue(prevState);