@remotion/studio 4.0.463 → 4.0.465

package/dist/components/ColorPicker/SaturationValueArea.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SaturationValueArea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const color_conversion_1 = require("../../helpers/color-conversion");
+const AREA_HEIGHT = 140;
+const containerStyle = {
+    position: 'relative',
+    width: '100%',
+    height: AREA_HEIGHT,
+    cursor: 'crosshair',
+    borderRadius: 3,
+    overflow: 'hidden',
+    touchAction: 'none',
+};
+const valueOverlay = {
+    position: 'absolute',
+    inset: 0,
+    background: 'linear-gradient(to top, #000, transparent)',
+};
+const saturationOverlay = {
+    position: 'absolute',
+    inset: 0,
+    background: 'linear-gradient(to right, #fff, transparent)',
+};
+const SaturationValueArea = ({ hue, saturation, value, onChange, onChangeComplete }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const baseColor = (0, react_1.useMemo)(() => {
+        const { r, g, b } = (0, color_conversion_1.hsvToRgb)({ h: hue, s: 1, v: 1 });
+        return `rgb(${r}, ${g}, ${b})`;
+    }, [hue]);
+    const updateFromEvent = (0, react_1.useCallback)((clientX, clientY, isFinal) => {
+        const { current } = containerRef;
+        if (!current) {
+            return;
+        }
+        const rect = current.getBoundingClientRect();
+        const x = (0, color_conversion_1.clamp)((clientX - rect.left) / rect.width, 0, 1);
+        const y = (0, color_conversion_1.clamp)((clientY - rect.top) / rect.height, 0, 1);
+        const next = { s: x, v: 1 - y };
+        if (isFinal) {
+            onChangeComplete(next);
+        }
+        else {
+            onChange(next);
+        }
+    }, [onChange, onChangeComplete]);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        var _a, _b;
+        if (e.button !== 0) {
+            return;
+        }
+        e.preventDefault();
+        (_b = (_a = e.target).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
+        updateFromEvent(e.clientX, e.clientY, false);
+        const onMove = (ev) => {
+            updateFromEvent(ev.clientX, ev.clientY, false);
+        };
+        const onUp = (ev) => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            updateFromEvent(ev.clientX, ev.clientY, true);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+    }, [updateFromEvent]);
+    const containerWithBg = (0, react_1.useMemo)(() => {
+        return {
+            ...containerStyle,
+            backgroundColor: baseColor,
+        };
+    }, [baseColor]);
+    const handleStyle = (0, react_1.useMemo)(() => {
+        return {
+            position: 'absolute',
+            left: `${saturation * 100}%`,
+            top: `${(1 - value) * 100}%`,
+            width: 12,
+            height: 12,
+            marginLeft: -6,
+            marginTop: -6,
+            borderRadius: '50%',
+            border: '2px solid #fff',
+            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.6)',
+            pointerEvents: 'none',
+        };
+    }, [saturation, value]);
+    return (jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerWithBg, onPointerDown: onPointerDown, children: [
+            jsx_runtime_1.jsx("div", { style: saturationOverlay }), jsx_runtime_1.jsx("div", { style: valueOverlay }), jsx_runtime_1.jsx("div", { style: handleStyle })
+        ] }));
+};
+exports.SaturationValueArea = SaturationValueArea;

package/dist/components/ColorPicker/checker.d.ts

@@ -0,0 +1,4 @@
+export declare const CHECKER_BACKGROUND_IMAGE = "linear-gradient(45deg, #888 25%, transparent 25%), linear-gradient(-45deg, #888 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #888 75%), linear-gradient(-45deg, transparent 75%, #888 75%)";
+export declare const CHECKER_BACKGROUND_SIZE = "8px 8px";
+export declare const CHECKER_BACKGROUND_POSITION = "0 0, 0 4px, 4px -4px, -4px 0";
+export declare const CHECKER_BACKGROUND_COLOR = "#444";

package/dist/components/ColorPicker/checker.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHECKER_BACKGROUND_COLOR = exports.CHECKER_BACKGROUND_POSITION = exports.CHECKER_BACKGROUND_SIZE = exports.CHECKER_BACKGROUND_IMAGE = void 0;
+// Checkerboard background used to indicate transparency in color swatches
+// and the alpha slider. Rendered as a CSS gradient so we don't need an asset.
+exports.CHECKER_BACKGROUND_IMAGE = 'linear-gradient(45deg, #888 25%, transparent 25%), linear-gradient(-45deg, #888 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #888 75%), linear-gradient(-45deg, transparent 75%, #888 75%)';
+exports.CHECKER_BACKGROUND_SIZE = '8px 8px';
+exports.CHECKER_BACKGROUND_POSITION = '0 0, 0 4px, 4px -4px, -4px 0';
+exports.CHECKER_BACKGROUND_COLOR = '#444';

package/dist/components/ExpandedTracksProvider.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { SequencePropsSubscriptionKey } from 'remotion';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 export type GetIsExpanded = (nodePathInfo: SequenceNodePathInfo) => boolean;
 type ExpandedTracksGetterContextValue = {
@@ -6,6 +7,7 @@ type ExpandedTracksGetterContextValue = {
 };
 type ExpandedTracksSetterContextValue = {
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
+    readonly migrateExpandedTracksForSubscriptionKey: (oldKey: SequencePropsSubscriptionKey, newKey: SequencePropsSubscriptionKey) => void;
 };
 export declare const ExpandedTracksGetterContext: React.Context<ExpandedTracksGetterContextValue>;
 export declare const ExpandedTracksSetterContext: React.Context<ExpandedTracksSetterContextValue>;

package/dist/components/ExpandedTracksProvider.js

@@ -4,6 +4,7 @@ exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.E
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
+const migrate_expanded_tracks_for_subscription_key_1 = require("../helpers/migrate-expanded-tracks-for-subscription-key");
 const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
 const nodePathInfoToExpandedKey = (info) => [
     (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
@@ -23,6 +24,9 @@ exports.ExpandedTracksSetterContext = (0, react_1.createContext)({
     toggleTrack: () => {
         throw new Error('ExpandedTracksSetterContext not initialized');
     },
+    migrateExpandedTracksForSubscriptionKey: () => {
+        throw new Error('ExpandedTracksSetterContext not initialized');
+    },
 });
 const ExpandedTracksProvider = ({ children }) => {
     const [expandedTracks, setExpandedTracks] = (0, react_1.useState)(loadExpandedTracks);
@@ -34,13 +38,26 @@ const ExpandedTracksProvider = ({ children }) => {
             return next;
         });
     }, []);
+    const migrateExpandedTracks = (0, react_1.useCallback)((oldKey, newKey) => {
+        setExpandedTracks((prev) => {
+            const next = (0, migrate_expanded_tracks_for_subscription_key_1.migrateExpandedTracksForSubscriptionKey)(prev, oldKey, newKey);
+            if (!next) {
+                return prev;
+            }
+            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
+            return next;
+        });
+    }, []);
     const getterValue = (0, react_1.useMemo)(() => ({
         getIsExpanded: (nodePathInfo) => {
             var _a;
             return (_a = expandedTracks[nodePathInfoToExpandedKey(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
         },
     }), [expandedTracks]);
-    const setterValue = (0, react_1.useMemo)(() => ({ toggleTrack }), [toggleTrack]);
+    const setterValue = (0, react_1.useMemo)(() => ({
+        toggleTrack,
+        migrateExpandedTracksForSubscriptionKey: migrateExpandedTracks,
+    }), [toggleTrack, migrateExpandedTracks]);
     return (jsx_runtime_1.jsx(exports.ExpandedTracksSetterContext.Provider, { value: setterValue, children: jsx_runtime_1.jsx(exports.ExpandedTracksGetterContext.Provider, { value: getterValue, children: children }) }));
 };
 exports.ExpandedTracksProvider = ExpandedTracksProvider;

package/dist/components/NewComposition/CodemodFooter.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 export declare const CodemodFooter: React.FC<{
     readonly valid: boolean;
     readonly codemod: RecastCodemod;
+    readonly stack: string | null;
     readonly loadingNotification: React.ReactNode;
     readonly successNotification: React.ReactNode;
     readonly errorNotification: string;

package/dist/components/NewComposition/CodemodFooter.js

@@ -4,33 +4,25 @@ exports.CodemodFooter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
+const resolved_stack_to_symbolicated_1 = require("../../helpers/resolved-stack-to-symbolicated");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
 const layout_1 = require("../layout");
 const ModalButton_1 = require("../ModalButton");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
+const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const DiffPreview_1 = require("./DiffPreview");
-const CodemodFooter = ({ codemod, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, }) => {
+const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, }) => {
+    var _a;
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [codemodStatus, setCanApplyCodemod] = (0, react_1.useState)({
         type: 'loading',
     });
-    const [projectInfo, setProjectInfo] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        const controller = new AbortController();
-        (0, actions_1.getProjectInfo)(controller.signal)
-            .then((info) => {
-            setProjectInfo(info.projectInfo);
-        })
-            .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not get project info: ${err.message}. Unable to duplicate composition`, 3000);
-        });
-        return () => {
-            controller.abort();
-        };
-    }, []);
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    const symbolicatedStack = (0, react_1.useMemo)(() => (0, resolved_stack_to_symbolicated_1.resolvedStackToSymbolicated)(resolvedLocation), [resolvedLocation]);
+    const relativeFilePath = (_a = symbolicatedStack === null || symbolicatedStack === void 0 ? void 0 : symbolicatedStack.originalFileName) !== null && _a !== void 0 ? _a : null;
     const trigger = (0, react_1.useCallback)(() => {
         setSubmitting(true);
         setSelectedModal(null);
@@ -38,6 +30,7 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
         (0, actions_1.applyCodemod)({
             codemod,
             dryRun: false,
+            symbolicatedStack,
             signal: new AbortController().signal,
         })
             .then(() => {
@@ -54,11 +47,13 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
         onSuccess,
         setSelectedModal,
         successNotification,
+        symbolicatedStack,
     ]);
     const getCanApplyCodemod = (0, react_1.useCallback)(async (signal) => {
         const res = await (0, actions_1.applyCodemod)({
             codemod,
             dryRun: true,
+            symbolicatedStack,
             signal,
         });
         if (res.success) {
@@ -70,8 +65,25 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
                 error: res.reason,
             });
         }
-    }, [codemod]);
+    }, [codemod, symbolicatedStack]);
     (0, react_1.useEffect)(() => {
+        if (!stack) {
+            setCanApplyCodemod({
+                type: 'fail',
+                error: 'Could not determine where this composition is defined',
+            });
+            return;
+        }
+        if (!(0, use_resolved_stack_1.hasResolvedStack)(stack)) {
+            return;
+        }
+        if (!symbolicatedStack) {
+            setCanApplyCodemod({
+                type: 'fail',
+                error: 'Could not resolve the source location of this composition',
+            });
+            return;
+        }
         const abortController = new AbortController();
         let aborted = false;
         getCanApplyCodemod(abortController.signal)
@@ -80,16 +92,16 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
             if (aborted) {
                 return;
             }
-            (0, NotificationCenter_1.showNotification)(`Cannot duplicate composition: ${err.message}`, 3000);
+            (0, NotificationCenter_1.showNotification)(`${errorNotification}: ${err.message}`, 3000);
         });
         return () => {
             aborted = true;
             abortController.abort();
         };
-    }, [getCanApplyCodemod]);
+    }, [errorNotification, getCanApplyCodemod, stack, symbolicatedStack]);
     const disabled = !valid ||
         submitting ||
-        projectInfo === null ||
+        symbolicatedStack === null ||
         codemodStatus.type !== 'success';
     const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
@@ -100,7 +112,7 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
             callback() {
                 trigger();
             },
-            commandCtrlKey: true,
+            commandCtrlKey: false,
             key: 'Enter',
             event: 'keydown',
             preventDefault: true,
@@ -112,9 +124,9 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
         };
     }, [disabled, registerKeybinding, trigger, valid]);
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-            jsx_runtime_1.jsx(DiffPreview_1.CodemodDiffPreview, { status: codemodStatus }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, x: 2 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: trigger, disabled: disabled, children: [projectInfo && projectInfo.relativeRootFile
-                        ? submitLabel({ relativeRootPath: projectInfo.relativeRootFile })
-                        : genericSubmitLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
+            jsx_runtime_1.jsx(DiffPreview_1.CodemodDiffPreview, { status: codemodStatus }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, x: 2 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: trigger, disabled: disabled, children: [relativeFilePath
+                        ? submitLabel({ relativeRootPath: relativeFilePath })
+                        : genericSubmitLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: false })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DeleteComposition.js

@@ -16,11 +16,13 @@ const content = {
     minWidth: 500,
 };
 const DeleteCompositionLoaded = ({ compositionId }) => {
+    var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Resolved composition context');
     }
     const { unresolved } = context;
+    const compositionStack = (_a = unresolved.stack) !== null && _a !== void 0 ? _a : null;
     const codemod = (0, react_1.useMemo)(() => {
         return {
             type: 'delete-composition',
@@ -36,7 +38,7 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
                             jsx_runtime_1.jsx("br", {}),
                             "The associated ",
                             jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "component" }),
-                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, valid: true, onSuccess: null }) })
+                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DiffPreview.js

@@ -11,7 +11,7 @@ const CodemodDiffPreview = ({ status }) => {
         return (jsx_runtime_1.jsx("span", { style: { color: colors_1.FAIL_COLOR, fontSize: 13, lineHeight: 1.2 }, children: status.error }));
     }
     return (jsx_runtime_1.jsxs("div", { style: { lineHeight: 1.2 }, children: [
-            jsx_runtime_1.jsx("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: "This will edit your Root file." }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsxs("span", { style: { color: colors_1.BLUE, fontSize: 13, lineHeight: 1.2 }, children: [status.diff.additions, " addition", status.diff.additions === 1 ? '' : 's', ","] }), ' ', jsx_runtime_1.jsxs("span", { style: {
+            jsx_runtime_1.jsx("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: "This will edit your codebase." }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsxs("span", { style: { color: colors_1.BLUE, fontSize: 13, lineHeight: 1.2 }, children: [status.diff.additions, " addition", status.diff.additions === 1 ? '' : 's', ","] }), ' ', jsx_runtime_1.jsxs("span", { style: {
                     color: colors_1.SELECTED_GUIDE,
                     fontSize: 13,
                     lineHeight: 1.2,

package/dist/components/NewComposition/DuplicateComposition.js

@@ -29,11 +29,13 @@ const comboBoxStyle = {
     width: 190,
 };
 const DuplicateCompositionLoaded = ({ initialType }) => {
+    var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Resolved composition context');
     }
     const { resolved, unresolved } = context;
+    const compositionStack = (_a = unresolved.stack) !== null && _a !== void 0 ? _a : null;
     const [initialCompType] = (0, react_1.useState)(initialType);
     const hadDimensionsDefined = unresolved.width && unresolved.height;
     const hadFpsDefined = unresolved.fps !== undefined;
@@ -199,7 +201,7 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                                         ] })
                                 ] })) : null, type === 'composition' && hadDurationDefined ? (jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
-                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, valid: valid, onSuccess: onDuplicateSuccess }) })
+                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/RenameComposition.js

@@ -22,11 +22,13 @@ const content = {
     minWidth: 500,
 };
 const RenameCompositionLoaded = () => {
+    var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Resolved composition context');
     }
-    const { resolved } = context;
+    const { resolved, unresolved } = context;
+    const compositionStack = (_a = unresolved.stack) !== null && _a !== void 0 ? _a : null;
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const [newId, setName] = (0, react_1.useState)(() => {
         return resolved.result.id;
@@ -55,7 +57,7 @@ const RenameCompositionLoaded = () => {
                                             jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
-                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, valid: valid, onSuccess: null }) })
+                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: null }) })
                 ] })
         ] }));
 };

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

@@ -3,12 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodColorEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const color_math_1 = require("../../../helpers/color-math");
-const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const ColorPicker_1 = require("../../ColorPicker/ColorPicker");
 const layout_1 = require("../../layout");
-const InputDragger_1 = require("../../NewComposition/InputDragger");
 const RemInput_1 = require("../../NewComposition/RemInput");
-const RemInputTypeColor_1 = require("../../NewComposition/RemInputTypeColor");
 const Fieldset_1 = require("./Fieldset");
 const SchemaLabel_1 = require("./SchemaLabel");
 const zod_schema_type_1 = require("./zod-schema-type");
@@ -17,25 +14,13 @@ const fullWidth = {
     width: '100%',
 };
 const ZodColorEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad }) => {
-    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)();
-    if (!zodTypes) {
-        throw new Error('expected zod color');
-    }
     const localValue = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
-    const { a, b, g, r } = localValue.success
-        ? zodTypes.ZodZypesInternals.parseColor(value)
-        : { a: 1, b: 0, g: 0, r: 0 };
-    const onChange = (0, react_1.useCallback)((e) => {
-        const newColor = (0, color_math_1.colorWithNewOpacity)(e.target.value, Math.round(a), zodTypes);
-        setValue(() => newColor, { shouldSave: false });
-    }, [a, setValue, zodTypes]);
-    const onColorBlur = (0, react_1.useCallback)(() => {
-        setValue(() => value, { shouldSave: true });
-    }, [setValue, value]);
+    const onPickerChange = (0, react_1.useCallback)((next) => {
+        setValue(() => next, { shouldSave: false });
+    }, [setValue]);
+    const onPickerComplete = (0, react_1.useCallback)((next) => {
+        setValue(() => next, { shouldSave: true });
+    }, [setValue]);
     const onTextChange = (0, react_1.useCallback)((e) => {
         const newValue = e.target.value;
         setValue(() => newValue, { shouldSave: false });
@@ -43,35 +28,11 @@ const ZodColorEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad })
     const onTextBlur = (0, react_1.useCallback)(() => {
         setValue(() => value, { shouldSave: true });
     }, [setValue, value]);
-    const rgb = `#${r.toString(16).padStart(2, '0')}${g
-        .toString(16)
-        .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
     const status = localValue.success ? 'ok' : 'error';
-    const colorPicker = (0, react_1.useMemo)(() => {
-        return {
-            height: 39,
-            width: 45,
-            display: 'inline-block',
-        };
-    }, []);
-    const onOpacityChange = (0, react_1.useCallback)((newValue) => {
-        const newColor = (0, color_math_1.colorWithNewOpacity)(value, Math.round((Number(newValue) / 100) * 255), zodTypes);
-        setValue(() => newColor, { shouldSave: true });
-    }, [setValue, value, zodTypes]);
-    const onOpacityValueChange = (0, react_1.useCallback)((newValue) => {
-        const newColor = (0, color_math_1.colorWithNewOpacity)(value, Math.round((Number(newValue) / 100) * 255), zodTypes);
-        setValue(() => newColor, { shouldSave: false });
-    }, [setValue, value, zodTypes]);
-    const onOpacityValueChangeEnd = (0, react_1.useCallback)((newValue) => {
-        const newColor = (0, color_math_1.colorWithNewOpacity)(value, Math.round((Number(newValue) / 100) * 255), zodTypes);
-        setValue(() => newColor, { shouldSave: true });
-    }, [setValue, value, zodTypes]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
             jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: localValue.success, suffix: null }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
                     jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                            jsx_runtime_1.jsx("div", { style: colorPicker, children: jsx_runtime_1.jsx(RemInputTypeColor_1.RemInputTypeColor, { type: "color", style: {
-                                        height: 39,
-                                    }, value: rgb, onChange: onChange, onBlur: onColorBlur, className: "__remotion_color_picker", status: status, name: jsonPath.join('.') }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1, block: true }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange, onBlur: onTextBlur, rightAlign: false }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { onTextChange: onOpacityChange, onValueChange: onOpacityValueChange, onValueChangeEnd: onOpacityValueChangeEnd, status: status, value: (a / 255) * 100, min: 0, max: 100, step: 1, formatter: (v) => `${Math.round(Number(v))}%`, rightAlign: false })
+                            jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: value, status: status, onChange: onPickerChange, onChangeComplete: onPickerComplete, width: 45, height: 39, name: jsonPath.join('.') }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1, block: true }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange, onBlur: onTextBlur, rightAlign: false })
                         ] }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: localValue })
                 ] })
         ] }));

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

@@ -97,9 +97,10 @@ export declare const subscribeToFileExistenceWatcher: ({ file, clientId, }: {
 export declare const openInFileExplorer: ({ directory }: {
     directory: string;
 }) => Promise<void>;
-export declare const applyCodemod: ({ codemod, dryRun, signal, }: {
+export declare const applyCodemod: ({ codemod, dryRun, symbolicatedStack, signal, }: {
     codemod: RecastCodemod;
     dryRun: boolean;
+    symbolicatedStack: import("@remotion/studio-shared").SymbolicatedStackFrame | null;
     signal: AbortSignal;
 }) => Promise<import("@remotion/studio-shared").ApplyCodemodResponse>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;

package/dist/components/RenderQueue/actions.js

@@ -133,10 +133,11 @@ const openInFileExplorer = ({ directory }) => {
     return (0, call_api_1.callApi)('/api/open-in-file-explorer', body);
 };
 exports.openInFileExplorer = openInFileExplorer;
-const applyCodemod = ({ codemod, dryRun, signal, }) => {
+const applyCodemod = ({ codemod, dryRun, symbolicatedStack, signal, }) => {
     const body = {
         codemod,
         dryRun,
+        symbolicatedStack,
     };
     return (0, call_api_1.callApi)('/api/apply-codemod', body, signal);
 };

package/dist/components/Timeline/Padder.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Padder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const TimelineListItem_1 = require("./TimelineListItem");
+const timeline_indent_1 = require("./timeline-indent");
 const Padder = ({ depth }) => {
     const style = (0, react_1.useMemo)(() => ({
-        width: TimelineListItem_1.INDENT * depth,
+        width: timeline_indent_1.TIMELINE_INDENT * depth,
         flexShrink: 0,
     }), [depth]);
     return jsx_runtime_1.jsx("div", { style: style });

package/dist/components/Timeline/SubscribeToNodePaths.d.ts

@@ -3,6 +3,6 @@ import type { EffectDefinition, SequenceSchema } from 'remotion';
 export declare const SubscribeToNodePaths: FC<{
     readonly overrideId: string;
     readonly schema: SequenceSchema;
-    readonly stack: string;
+    readonly getStack: () => string | null;
     readonly effects: readonly EffectDefinition<unknown>[];
 }>;

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -2,12 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubscribeToNodePaths = void 0;
 const react_1 = require("react");
-const use_resolved_stack_1 = require("./use-resolved-stack");
+const no_react_1 = require("remotion/no-react");
+const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
-const SubscribeToNodePaths = ({ overrideId, schema, stack, effects }) => {
-    const originalLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+const SubscribeToNodePaths = ({ overrideId, schema, getStack, effects }) => {
+    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack);
     const effectSubscriptions = (0, react_1.useMemo)(() => {
-        return effects.map((effect) => effect.schema);
+        return effects
+            .map((effect) => {
+            return effect.schema;
+        })
+            .filter(no_react_1.NoReactInternals.truthy);
     }, [effects]);
     (0, use_sequence_props_subscription_1.useSequencePropsSubscription)({
         overrideId,

package/dist/components/Timeline/Timeline.js

@@ -44,9 +44,9 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
-const is_collapsed_1 = require("./is-collapsed");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const SequencePropsObserver_1 = require("./SequencePropsObserver");
+const should_show_track_in_timeline_1 = require("./should-show-track-in-timeline");
 const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
@@ -88,10 +88,7 @@ const TimelineInner = () => {
     }, [sequences, videoConfigIsNull, overrideIdToNodePathMappings]);
     const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
     const filtered = (0, react_1.useMemo)(() => {
-        return timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t) &&
-            t.sequence.from <= durationInFrames &&
-            t.sequence.duration > 0 &&
-            t.sequence.showInTimeline);
+        return timeline.filter((t) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames));
     }, [durationInFrames, timeline]);
     const shown = (0, react_1.useMemo)(() => {
         return filtered.length > MaxTimelineTracks_1.MAX_TIMELINE_TRACKS
@@ -100,10 +97,10 @@ const TimelineInner = () => {
     }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
     return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [sequences.map((sequence) => {
-                if (!sequence.controls || !previewConnected || !sequence.stack) {
+                if (!sequence.controls || !previewConnected || !sequence.getStack()) {
                     return null;
                 }
-                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, stack: sequence.stack, effects: sequence.effects }, sequence.id));
+                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
             }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
                     jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
                                 jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [