@remotion/studio 4.0.460 → 4.0.462

package/dist/Studio.d.ts

@@ -2,5 +2,4 @@ import React from 'react';
 export declare const Studio: React.FC<{
     readonly rootComponent: React.FC;
     readonly readOnly: boolean;
-    readonly visualModeEnabled: boolean;
 }>;

package/dist/Studio.js

@@ -15,17 +15,17 @@ const ResolveCompositionConfigInStudio_1 = require("./ResolveCompositionConfigIn
 const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };
-const StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
+const StudioInner = ({ rootComponent, readOnly }) => {
     var _a, _b;
-    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { visualModeEnabled: visualModeEnabled, frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
+    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
                             jsx_runtime_1.jsx(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
                                 ? null
                                 : (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }) }));
 };
-const Studio = ({ rootComponent, readOnly, visualModeEnabled }) => {
+const Studio = ({ rootComponent, readOnly }) => {
     (0, react_1.useLayoutEffect)(() => {
         (0, inject_css_1.injectCSS)();
     }, []);
-    return (jsx_runtime_1.jsx(FastRefreshProvider_1.FastRefreshProvider, { children: jsx_runtime_1.jsx(StudioInner, { rootComponent: rootComponent, readOnly: readOnly, visualModeEnabled: visualModeEnabled }) }));
+    return (jsx_runtime_1.jsx(FastRefreshProvider_1.FastRefreshProvider, { children: jsx_runtime_1.jsx(StudioInner, { rootComponent: rootComponent, readOnly: readOnly }) }));
 };
 exports.Studio = Studio;

package/dist/components/AudioWaveform.js

@@ -7,10 +7,6 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
-const make_audio_waveform_worker_1 = require("../make-audio-waveform-worker");
-const draw_peaks_1 = require("./draw-peaks");
-const load_waveform_peaks_1 = require("./load-waveform-peaks");
-const slice_waveform_peaks_1 = require("./slice-waveform-peaks");
 const EMPTY_PEAKS = new Float32Array(0);
 // Recreate the canvas after Fast Refresh because an already transferred canvas
 // cannot be handed to OffscreenCanvas again.
@@ -56,7 +52,13 @@ const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWid
     const targetCanvas = document.createElement('canvas');
     targetCanvas.width = Math.max(1, Math.ceil(loopWidth));
     targetCanvas.height = h;
-    (0, draw_peaks_1.drawBars)(targetCanvas, peaks, 'rgba(255, 255, 255, 0.6)', volume, targetCanvas.width);
+    (0, timeline_utils_1.drawBars)({
+        canvas: targetCanvas,
+        peaks,
+        color: 'rgba(255, 255, 255, 0.6)',
+        volume,
+        width: targetCanvas.width,
+    });
     canvas.width = w;
     canvas.height = h;
     const ctx = canvas.getContext('2d');
@@ -94,7 +96,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         const controller = new AbortController();
         setPeaks(null);
         setError(null);
-        (0, load_waveform_peaks_1.loadWaveformPeaks)(src, controller.signal)
+        (0, timeline_utils_1.loadWaveformPeaks)(src, controller.signal)
             .then((p) => {
             if (!controller.signal.aborted) {
                 setPeaks(p);
@@ -115,7 +117,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         if (!canvasElement || hasTransferredCanvas.current) {
             return;
         }
-        const worker = (0, make_audio_waveform_worker_1.makeAudioWaveformWorker)();
+        const worker = (0, timeline_utils_1.makeAudioWaveformWorker)();
         waveformWorker.current = worker;
         worker.addEventListener('message', (event) => {
             if (event.data.type === 'error') {
@@ -151,7 +153,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         if (canUseWorkerPath || !peaks) {
             return null;
         }
-        return (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
+        return (0, timeline_utils_1.sliceWaveformPeaks)({
             durationInFrames: (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay)
                 ? loopDisplay.durationInFrames
                 : durationInFrames,
@@ -216,7 +218,13 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
             });
         }
         else {
-            (0, draw_peaks_1.drawBars)(canvasElement, portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS, 'rgba(255, 255, 255, 0.6)', vol, w);
+            (0, timeline_utils_1.drawBars)({
+                canvas: canvasElement,
+                peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
+                color: 'rgba(255, 255, 255, 0.6)',
+                volume: vol,
+                width: w,
+            });
         }
     }, [
         canUseWorkerPath,

package/dist/components/ExpandedTracksProvider.js

@@ -2,8 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.ExpandedTracksGetterContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
-const nodePathInfoToKey = (info) => JSON.stringify([info.nodePath, info.index]);
+const nodePathInfoToExpandedKey = (info) => [
+    (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
+    info.auxiliaryKeys.join('.'),
+    info.index,
+].join('.');
 const LOCAL_STORAGE_KEY = 'remotion.editor.expandedTracks';
 const loadExpandedTracks = () => {
     if (typeof window === 'undefined') {
@@ -38,7 +43,7 @@ const ExpandedTracksProvider = ({ children }) => {
     const [expandedTracks, setExpandedTracks] = (0, react_1.useState)(loadExpandedTracks);
     const toggleTrack = (0, react_1.useCallback)((nodePathInfo) => {
         setExpandedTracks((prev) => {
-            const key = nodePathInfoToKey(nodePathInfo);
+            const key = nodePathInfoToExpandedKey(nodePathInfo);
             const next = { ...prev, [key]: !prev[key] };
             window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(next));
             return next;
@@ -47,7 +52,7 @@ const ExpandedTracksProvider = ({ children }) => {
     const getterValue = (0, react_1.useMemo)(() => ({
         getIsExpanded: (nodePathInfo) => {
             var _a;
-            return (_a = expandedTracks[nodePathInfoToKey(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
+            return (_a = expandedTracks[nodePathInfoToExpandedKey(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
         },
     }), [expandedTracks]);
     const setterValue = (0, react_1.useMemo)(() => ({ toggleTrack }), [toggleTrack]);

package/dist/components/MenuBuildIndicator.js

@@ -94,7 +94,7 @@ const MenuBuildIndicator = () => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }) : null, isClickable ? (jsx_runtime_1.jsx("a", { style: projectNameHovered ? projectNameLinkHovered : projectNameLink, title: projectNameTitle, onClick: handleProjectNameClick, onPointerEnter: () => setProjectNameHovered(true), onPointerLeave: () => setProjectNameHovered(false), children: window.remotion_projectName })) : (window.remotion_projectName), jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {})
+    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), isClickable ? (jsx_runtime_1.jsx("a", { style: projectNameHovered ? projectNameLinkHovered : projectNameLink, title: projectNameTitle, onClick: handleProjectNameClick, onPointerEnter: () => setProjectNameHovered(true), onPointerLeave: () => setProjectNameHovered(false), children: window.remotion_projectName })) : (window.remotion_projectName), jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {})
         ] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;

package/dist/components/MenuCompositionName.js

@@ -14,6 +14,7 @@ const baseStyle = {
     textDecoration: 'none',
     fontSize: 'inherit',
     textUnderlineOffset: 2,
+    whiteSpace: 'nowrap',
 };
 const compositionNameStyle = {
     ...baseStyle,

package/dist/components/RenderButton.js

@@ -166,7 +166,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
         };
     }, []);
     const video = remotion_1.Internals.useVideo();
-    const getCurrentFrame = player_1.PlayerInternals.useFrameImperative();
+    const { getCurrentFrame } = player_1.PlayerInternals.usePlayer();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const openServerRenderModal = (0, react_1.useCallback)((copyCommandOnly) => {
         var _a;

package/dist/components/Timeline/SequencePropsObserver.js

@@ -12,7 +12,7 @@ const SequencePropsObserver = () => {
             if (event.type !== 'sequence-props-updated') {
                 return;
             }
-            setCodeValues(event.nodePath, event.result);
+            setCodeValues(event.nodePath, () => event.result);
         };
         const unsubscribe = subscribeToEvent('sequence-props-updated', handleEvent);
         return () => {

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

@@ -1,7 +1,8 @@
-import type React from 'react';
-import type { SequenceSchema } from 'remotion';
-export declare const SubscribeToNodePaths: React.FC<{
+import { type FC } from 'react';
+import type { EffectDefinition, SequenceSchema } from 'remotion';
+export declare const SubscribeToNodePaths: FC<{
     readonly overrideId: string;
     readonly schema: SequenceSchema;
     readonly stack: string;
+    readonly effects: readonly EffectDefinition<unknown>[];
 }>;

package/dist/components/Timeline/SubscribeToNodePaths.js

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

package/dist/components/Timeline/Timeline.js

@@ -93,17 +93,18 @@ const TimelineInner = () => {
             t.sequence.duration > 0 &&
             t.sequence.showInTimeline);
     }, [durationInFrames, timeline]);
-    const shown = filtered.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS);
+    const shown = (0, react_1.useMemo)(() => {
+        return filtered.length > MaxTimelineTracks_1.MAX_TIMELINE_TRACKS
+            ? filtered.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS)
+            : filtered;
+    }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
-    const visualModeEnvEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
-    return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [visualModeEnvEnabled
-                ? sequences.map((sequence) => {
-                    if (!sequence.controls || !previewConnected || !sequence.stack) {
-                        return null;
-                    }
-                    return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, stack: sequence.stack }, sequence.id));
-                })
-                : null, jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+    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) {
+                    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));
+            }), 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: [
                                             jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineBooleanField: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly codeValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatus;
     readonly effectiveValue: unknown;
-    readonly canUpdate: boolean;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
+    readonly onSave: TimelineFieldOnSave;
 }>;

package/dist/components/Timeline/TimelineBooleanField.js

@@ -7,14 +7,14 @@ const Checkbox_1 = require("../Checkbox");
 const checkboxContainer = {
     marginLeft: 8,
 };
-const TimelineBooleanField = ({ field, codeValue, effectiveValue, canUpdate, onSave }) => {
+const TimelineBooleanField = ({ field, propStatus, effectiveValue, onSave }) => {
     const checked = Boolean(effectiveValue);
     const onChange = (0, react_1.useCallback)(() => {
         const newValue = !checked;
-        if (canUpdate && newValue !== codeValue) {
-            onSave(field.key, newValue);
+        if (propStatus.canUpdate && newValue !== propStatus.codeValue) {
+            onSave(newValue);
         }
-    }, [canUpdate, onSave, field.key, checked, codeValue]);
-    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !canUpdate, variant: "small" }) }));
+    }, [propStatus, onSave, checked]);
+    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !propStatus.canUpdate, variant: "small" }) }));
 };
 exports.TimelineBooleanField = TimelineBooleanField;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineColorField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly effectiveValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineColorField.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineColorField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../../helpers/colors");
+const eyedropper_1 = require("../../icons/eyedropper");
+const z_index_1 = require("../../state/z-index");
+const SWATCH_WIDTH = 20;
+const SWATCH_HEIGHT = 15;
+const containerStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 3,
+};
+const swatchWrapperBase = {
+    position: 'relative',
+    width: SWATCH_WIDTH,
+    height: SWATCH_HEIGHT,
+    display: 'inline-block',
+    borderRadius: 3,
+    overflow: 'hidden',
+    cursor: 'pointer',
+    borderStyle: 'solid',
+    borderWidth: 1,
+};
+const hiddenInputStyle = {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    opacity: 0,
+    cursor: 'pointer',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+};
+const swatchFillStyle = {
+    width: '100%',
+    height: '100%',
+};
+const eyedropperButtonBase = {
+    background: 'transparent',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 20,
+    height: 20,
+    color: 'rgba(255, 255, 255, 0.7)',
+};
+const eyedropperIconStyle = {
+    width: 16,
+    height: 16,
+};
+// Normalizes any color string the user provided (e.g. `red`, `rgb(...)`, `#fff`)
+// into a `#rrggbb` string that `<input type="color">` accepts.
+const toHex = (value) => {
+    try {
+        const argb = no_react_1.NoReactInternals.processColor(value);
+        const r = (argb >>> 16) & 0xff;
+        const g = (argb >>> 8) & 0xff;
+        const b = argb & 0xff;
+        return `#${r.toString(16).padStart(2, '0')}${g
+            .toString(16)
+            .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    }
+    catch (_a) {
+        return '#000000';
+    }
+};
+const hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;
+const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
+    const inputRef = (0, react_1.useRef)(null);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const commitTimeoutRef = (0, react_1.useRef)(null);
+    const pendingCommitRef = (0, react_1.useRef)(null);
+    // `<input type="color">` doesn't fire an event when dismissed; debounce
+    // commits and flush any pending commit on unmount so we never lose the
+    // final value.
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (commitTimeoutRef.current) {
+                clearTimeout(commitTimeoutRef.current);
+            }
+            if (pendingCommitRef.current) {
+                pendingCommitRef.current();
+            }
+        };
+    }, []);
+    const currentValue = typeof effectiveValue === 'string'
+        ? effectiveValue
+        : field.fieldSchema.type === 'color'
+            ? field.fieldSchema.default
+            : '';
+    const hexValue = (0, react_1.useMemo)(() => toHex(currentValue), [currentValue]);
+    const onColorChange = (0, react_1.useCallback)((e) => {
+        const newValue = e.target.value;
+        if (!propStatus.canUpdate) {
+            return;
+        }
+        onDragValueChange(newValue);
+        if (commitTimeoutRef.current) {
+            clearTimeout(commitTimeoutRef.current);
+        }
+        const commit = () => {
+            pendingCommitRef.current = null;
+            if (propStatus.canUpdate && newValue !== propStatus.codeValue) {
+                onSave(newValue);
+            }
+            onDragEnd();
+        };
+        pendingCommitRef.current = commit;
+        commitTimeoutRef.current = setTimeout(() => {
+            commitTimeoutRef.current = null;
+            commit();
+        }, 500);
+    }, [onSave, onDragValueChange, onDragEnd, propStatus]);
+    const onPickColor = (0, react_1.useCallback)(() => {
+        // `EyeDropper` is a Chromium-only API; it's feature-detected at render
+        // time so this only runs in supported browsers.
+        const EyeDropperCtor = typeof window !== 'undefined'
+            ? window.EyeDropper
+            : undefined;
+        if (!EyeDropperCtor) {
+            return;
+        }
+        const eyeDropper = new EyeDropperCtor();
+        eyeDropper
+            .open()
+            .then((result) => {
+            if (propStatus.canUpdate && result.sRGBHex !== propStatus.codeValue) {
+                onSave(result.sRGBHex);
+            }
+        })
+            .catch(() => {
+            // User aborted or picker failed; safe to ignore.
+        });
+    }, [onSave, propStatus]);
+    const swatchWrapperStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...swatchWrapperBase,
+            borderColor: isHovered || isFocused
+                ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            cursor: propStatus.canUpdate ? 'pointer' : 'not-allowed',
+            marginLeft: 5,
+        };
+    }, [isFocused, isHovered, propStatus.canUpdate]);
+    const swatchFill = (0, react_1.useMemo)(() => {
+        return {
+            ...swatchFillStyle,
+            backgroundColor: currentValue || hexValue,
+            position: 'absolute',
+            display: 'block',
+        };
+    }, [currentValue, hexValue]);
+    const onMouseEnter = (0, react_1.useCallback)(() => setIsHovered(true), []);
+    const onMouseLeave = (0, react_1.useCallback)(() => setIsHovered(false), []);
+    const onFocus = (0, react_1.useCallback)(() => setIsFocused(true), []);
+    const onBlur = (0, react_1.useCallback)(() => setIsFocused(false), []);
+    const onSwatchClick = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!propStatus.canUpdate) {
+            return;
+        }
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, [propStatus.canUpdate]);
+    const showEyeDropper = hasEyeDropper();
+    return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
+            jsx_runtime_1.jsxs("span", { style: swatchWrapperStyle, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onSwatchClick, title: currentValue, children: [
+                    jsx_runtime_1.jsx("span", { style: swatchFill }), jsx_runtime_1.jsx("input", { ref: inputRef, type: "color", value: hexValue, onChange: onColorChange, onFocus: onFocus, onBlur: onBlur, disabled: !propStatus.canUpdate, name: field.key, tabIndex: tabIndex, style: hiddenInputStyle })
+                ] }), showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", onClick: onPickColor, disabled: !propStatus.canUpdate, style: eyedropperButtonBase, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: eyedropperIconStyle }) })) : null] }));
+};
+exports.TimelineColorField = TimelineColorField;

package/dist/components/Timeline/TimelineDragHandler.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineDragHandler = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -59,10 +92,10 @@ const TimelineDragHandler = () => {
     if (!canvasContent || canvasContent.type !== 'composition') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? jsx_runtime_1.jsx(Inner, {}) : null }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {}) : null }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;
-const Inner = () => {
+const TimelineDragHandlerInner = () => {
     var _a;
     var _b, _c;
     const videoConfig = (0, remotion_1.useVideoConfig)();
@@ -470,3 +503,4 @@ const Inner = () => {
     return (jsx_runtime_1.jsxs("div", { style: style, onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: inContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: outContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }) }))] }));
 };
+const TimelineDragHandlerInnerMemo = react_1.default.memo(TimelineDragHandlerInner);

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SequencePropsSubscriptionKey } from 'remotion';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { EffectSchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineEffectFieldRow: React.FC<{
+    readonly field: EffectSchemaFieldInfo;
+    readonly validatedLocation: CodePosition;
+    readonly paddingLeft: number;
+    readonly nestedDepth: number;
+    readonly nodePath: SequencePropsSubscriptionKey;
+}>;