@remotion/cli 4.0.0-webhook.27 → 4.1.0-alpha1

package/dist/editor/components/Timeline/timeline-state-reducer.d.ts

@@ -1,9 +1,9 @@
-export declare type TimelineViewState = {
+export type TimelineViewState = {
     collapsed: {
         [key: string]: boolean;
     };
 };
-export declare type TimelineActionState = {
+export type TimelineActionState = {
     type: 'collapse';
     hash: string;
 } | {

package/dist/editor/components/TimelineInOutToggle.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const truthy_1 = require("../../truthy");
+const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
@@ -144,6 +145,8 @@ const TimelineInOutPointToggle = () => {
                 onInMark(e);
             },
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const oKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -152,6 +155,8 @@ const TimelineInOutPointToggle = () => {
                 onOutMark(e);
             },
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const xKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -160,6 +165,8 @@ const TimelineInOutPointToggle = () => {
                 onInOutClear();
             },
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             oKey.unregister();
@@ -212,12 +219,9 @@ const TimelineInOutPointToggle = () => {
             },
         };
     }, [onInMark, onInOutClear, onOutMark, setInAndOutFrames]);
-    if (!videoConfig) {
-        return null;
-    }
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: !videoConfig || timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : colors_1.BLUE, style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : colors_1.BLUE, style: style }) })] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

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

@@ -1,2 +1,3 @@
 import React from 'react';
+export declare const useResponsiveSidebarStatus: () => 'collapsed' | 'expanded';
 export declare const TopPanel: React.FC;

package/dist/editor/components/TopPanel.js

@@ -1,16 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TopPanel = void 0;
+exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const use_compact_ui_1 = require("../helpers/use-compact-ui");
+const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const sidebar_1 = require("../state/sidebar");
-const Canvas_1 = require("./Canvas");
-const CollapsedCompositionSelector_1 = require("./CollapsedCompositionSelector");
+const CanvasOrLoading_1 = require("./CanvasOrLoading");
 const CompositionSelector_1 = require("./CompositionSelector");
+const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
 const PreviewToolbar_1 = require("./PreviewToolbar");
+const RightPanel_1 = require("./RightPanel");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
 const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
@@ -33,25 +34,38 @@ const canvasContainer = {
 const leftContainer = {
     flex: 1,
     display: 'flex',
+    maxWidth: '100%',
 };
-const TopPanel = () => {
-    const compactUi = (0, use_compact_ui_1.useCompactUI)();
-    const { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
-    const actualState = (0, react_1.useMemo)(() => {
-        if (sidebarCollapsedState === 'collapsed') {
+const useResponsiveSidebarStatus = () => {
+    const { sidebarCollapsedStateLeft } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const responsiveLeftStatus = (0, use_breakpoint_1.useBreakpoint)(1200) ? 'collapsed' : 'expanded';
+    const actualStateLeft = (0, react_1.useMemo)(() => {
+        if (sidebarCollapsedStateLeft === 'collapsed') {
             return 'collapsed';
         }
-        if (sidebarCollapsedState === 'expanded') {
+        if (sidebarCollapsedStateLeft === 'expanded') {
             return 'expanded';
         }
-        return compactUi ? 'collapsed' : 'expanded';
-    }, [compactUi, sidebarCollapsedState]);
-    const onCollapse = (0, react_1.useCallback)(() => {
-        setSidebarCollapsedState('collapsed');
+        return responsiveLeftStatus;
+    }, [sidebarCollapsedStateLeft, responsiveLeftStatus]);
+    return actualStateLeft;
+};
+exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
+const TopPanel = () => {
+    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
+    const actualStateRight = (0, react_1.useMemo)(() => {
+        if (sidebarCollapsedStateRight === 'collapsed') {
+            return 'collapsed';
+        }
+        return 'expanded';
+    }, [sidebarCollapsedStateRight]);
+    const onCollapseLeft = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({ left: 'collapsed', right: null });
     }, [setSidebarCollapsedState]);
-    const onExpand = (0, react_1.useCallback)(() => {
-        setSidebarCollapsedState('expanded');
+    const onCollapseRight = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [actualState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(CollapsedCompositionSelector_1.CollapsedCompositionSelector, { onExpand: onExpand })) : null, (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualState === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) })) : null, actualState === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: true, onCollapse: onCollapse })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}) }) })] })] }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(RightPanel_1.RightPanel, {}) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PackageManager } from '../../preview-server/get-package-manager';
-export declare type UpdateInfo = {
+export type UpdateInfo = {
     currentVersion: string;
     latestVersion: string;
     updateAvailable: boolean;

package/dist/editor/components/UpdateCheck.js

@@ -3,11 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UpdateCheck = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
+const actions_1 = require("./RenderQueue/actions");
 const buttonStyle = {
     appearance: 'none',
-    color: 'var(--blue)',
+    color: colors_1.BLUE,
     border: 'none',
     fontWeight: 'bold',
     backgroundColor: 'transparent',
@@ -20,10 +22,7 @@ const UpdateCheck = () => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const checkForUpdates = (0, react_1.useCallback)(() => {
         const controller = new AbortController();
-        fetch('/api/update', {
-            signal: controller.signal,
-        })
-            .then((res) => res.json())
+        (0, actions_1.updateAvailable)(controller.signal)
             .then((d) => {
             setInfo(d);
         })

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ZoomGesturesProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/ZoomGesturesProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomGesturesProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
+const ZoomGesturesProvider = ({ children }) => {
+    const [editorZoomGestures, setEditorZoomGesturesState] = (0, react_1.useState)(() => (0, editor_zoom_gestures_1.loadEditorZoomGesturesOption)());
+    const setEditorZoomGestures = (0, react_1.useCallback)((newValue) => {
+        setEditorZoomGesturesState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_zoom_gestures_1.persistEditorZoomGesturesOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorZoomGesturesCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorZoomGestures,
+            setEditorZoomGestures,
+        };
+    }, [editorZoomGestures, setEditorZoomGestures]);
+    return ((0, jsx_runtime_1.jsx)(editor_zoom_gestures_1.EditorZoomGesturesContext.Provider, { value: editorZoomGesturesCtx, children: children }));
+};
+exports.ZoomGesturesProvider = ZoomGesturesProvider;

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

@@ -1,4 +1,3 @@
 import type React from 'react';
-export declare const persistCurrentZoom: (zoom: number) => void;
 export declare const getZoomForComposition: (composition: string) => number;
 export declare const ZoomPersistor: React.FC;

package/dist/editor/components/ZoomPersistor.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomPersistor = exports.getZoomForComposition = exports.persistCurrentZoom = void 0;
+exports.ZoomPersistor = exports.getZoomForComposition = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_zoom_1 = require("../state/timeline-zoom");
@@ -15,7 +15,6 @@ const persistCurrentZoom = (zoom) => {
     }
     localStorage.setItem(makeKey(currentComposition), String(zoom));
 };
-exports.persistCurrentZoom = persistCurrentZoom;
 const getZoomForComposition = (composition) => {
     const zoom = localStorage.getItem(makeKey(composition));
     return zoom ? Number(zoom) : 0;
@@ -30,7 +29,7 @@ const ZoomPersistor = () => {
         if (!isActive) {
             return;
         }
-        (0, exports.persistCurrentZoom)(zoom);
+        persistCurrentZoom(zoom);
     }, [zoom, isActive, playing]);
     return null;
 };

package/dist/editor/components/get-zod-if-possible.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type ZodType = Awaited<typeof import('zod')>['z'];
+export type ZodTypesType = Awaited<typeof import('@remotion/zod-types')>;
+export declare const getZodIfPossible: () => Promise<ZodType | null>;
+export declare const getZTypesIfPossible: () => Promise<ZodTypesType | null>;
+export declare const useZodIfPossible: () => typeof import("zod/lib/external") | null;
+export declare const useZodTypesIfPossible: () => typeof import("@remotion/zod-types") | null;
+export declare const ZodProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/get-zod-if-possible.js

@@ -0,0 +1,79 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodProvider = exports.useZodTypesIfPossible = exports.useZodIfPossible = exports.getZTypesIfPossible = exports.getZodIfPossible = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const getZodIfPossible = async () => {
+    try {
+        const { z } = await Promise.resolve().then(() => __importStar(require('zod')));
+        return z;
+    }
+    catch (err) {
+        return null;
+    }
+};
+exports.getZodIfPossible = getZodIfPossible;
+const getZTypesIfPossible = async () => {
+    try {
+        const mod = await Promise.resolve().then(() => __importStar(require('@remotion/zod-types')));
+        return mod;
+    }
+    catch (err) {
+        return null;
+    }
+};
+exports.getZTypesIfPossible = getZTypesIfPossible;
+const useZodIfPossible = () => {
+    var _a;
+    const context = (0, react_1.useContext)(ZodContext);
+    return (_a = context === null || context === void 0 ? void 0 : context.zod) !== null && _a !== void 0 ? _a : null;
+};
+exports.useZodIfPossible = useZodIfPossible;
+const useZodTypesIfPossible = () => {
+    var _a;
+    const context = (0, react_1.useContext)(ZodContext);
+    return (_a = context === null || context === void 0 ? void 0 : context.zodTypes) !== null && _a !== void 0 ? _a : null;
+};
+exports.useZodTypesIfPossible = useZodTypesIfPossible;
+const ZodContext = (0, react_1.createContext)(null);
+const ZodProvider = ({ children }) => {
+    const [zod, setZod] = (0, react_1.useState)(null);
+    const [zodTypes, setZodTypes] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        (0, exports.getZodIfPossible)().then((z) => setZod(z));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        (0, exports.getZTypesIfPossible)().then((z) => setZodTypes(z));
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            zod,
+            zodTypes,
+        };
+    }, [zod, zodTypes]);
+    return ((0, jsx_runtime_1.jsx)(ZodContext.Provider, { value: contextValue, children: children }));
+};
+exports.ZodProvider = ZodProvider;

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

@@ -3,14 +3,16 @@ export declare const SPACING_UNIT = 8;
 export declare const Spacing: React.FC<{
     x?: number;
     y?: number;
+    block?: boolean;
 }>;
 export declare const Flex: React.FC<{
     children?: React.ReactNode;
 }>;
 export declare const Row: React.FC<{
-    justify?: 'center';
+    justify?: 'center' | 'flex-start' | 'flex-end';
     align?: 'center';
     style?: React.CSSProperties;
+    flex?: number;
     className?: string;
     children: React.ReactNode;
 }>;

package/dist/editor/components/layout.js

@@ -4,21 +4,22 @@ exports.Column = exports.Row = exports.Flex = exports.Spacing = exports.SPACING_
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.SPACING_UNIT = 8;
-const Spacing = ({ x = 0, y = 0 }) => {
+const Spacing = ({ x = 0, y = 0, block = false }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
-            display: 'inline-block',
+            display: block ? 'block' : 'inline-block',
             width: x * exports.SPACING_UNIT,
             height: y * exports.SPACING_UNIT,
+            flexShrink: 0,
         };
-    }, [x, y]);
+    }, [block, x, y]);
     return (0, jsx_runtime_1.jsx)("div", { style: style });
 };
 exports.Spacing = Spacing;
-const flex = { flex: 1 };
-const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flex, children: children });
+const flexCss = { flex: 1 };
+const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flexCss, children: children });
 exports.Flex = Flex;
-const Row = ({ children, justify, className, align, style = {} }) => {
+const Row = ({ children, justify, className, align, flex, style = {} }) => {
     const finalStyle = (0, react_1.useMemo)(() => {
         return {
             ...style,
@@ -26,8 +27,9 @@ const Row = ({ children, justify, className, align, style = {} }) => {
             flexDirection: 'row',
             justifyContent: justify !== null && justify !== void 0 ? justify : 'flex-start',
             alignItems: align !== null && align !== void 0 ? align : 'flex-start',
+            flex: flex !== null && flex !== void 0 ? flex : undefined,
         };
-    }, [align, justify, style]);
+    }, [align, flex, justify, style]);
     return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }));
 };
 exports.Row = Row;

package/dist/editor/helpers/calculate-timeline.d.ts

@@ -1,9 +1,5 @@
 import type { TSequence } from 'remotion';
 import type { TrackWithHash } from './get-timeline-sequence-sort-key';
-export declare type SequenceWithOverlap = {
-    sequence: TSequence;
-    overlaps: TSequence[];
-};
 export declare const calculateTimeline: ({ sequences, sequenceDuration, }: {
     sequences: TSequence[];
     sequenceDuration: number;

package/dist/editor/helpers/calculate-timeline.js

@@ -29,7 +29,7 @@ const calculateTimeline = ({ sequences, sequenceDuration, }) => {
                     rootId: '-',
                     showInTimeline: true,
                     nonce: 0,
-                    showLoopTimesInTimeline: undefined,
+                    loopDisplay: undefined,
                 },
                 depth: 0,
                 hash: '-',

package/dist/editor/helpers/client-id.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+type PreviewServerState = {
+    type: 'init';
+} | {
+    type: 'connected';
+    clientId: string;
+} | {
+    type: 'disconnected';
+};
+export declare const StudioServerConnectionCtx: React.Context<PreviewServerState>;
+export declare const studioServerConnectionRef: React.RefObject<{
+    set: (jobs: PreviewServerState) => void;
+}>;
+export declare const PreviewServerConnection: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/{preview-server/dev-middleware/is-color-supported.js → editor/helpers/client-id.js}

@@ -22,16 +22,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isColorSupported = void 0;
-const tty = __importStar(require("tty"));
-const argv = process.argv || [];
-const env = process.env || {};
-const isDisabled = 'NO_COLOR' in env || argv.includes('--no-color');
-const isForced = 'FORCE_COLOR' in env || argv.includes('--color');
-const isWindows = process.platform === 'win32';
-const isCompatibleTerminal = ((_a = tty === null || tty === void 0 ? void 0 : tty.isatty) === null || _a === void 0 ? void 0 : _a.call(tty, 1)) && env.TERM && env.TERM !== 'dumb';
-const isCI = 'CI' in env &&
-    ('GITHUB_ACTIONS' in env || 'GITLAB_CI' in env || 'CIRCLECI' in env);
-exports.isColorSupported = !isDisabled && (isForced || isWindows || isCompatibleTerminal || isCI);
+exports.PreviewServerConnection = exports.studioServerConnectionRef = exports.StudioServerConnectionCtx = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.StudioServerConnectionCtx = react_1.default.createContext({
+    type: 'init',
+});
+exports.studioServerConnectionRef = (0, react_1.createRef)();
+const PreviewServerConnection = ({ children }) => {
+    const [state, setState] = react_1.default.useState({
+        type: 'init',
+    });
+    (0, react_1.useImperativeHandle)(exports.studioServerConnectionRef, () => {
+        return {
+            set: (newState) => {
+                setState(newState);
+            },
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.StudioServerConnectionCtx.Provider, { value: state, children: children }));
+};
+exports.PreviewServerConnection = PreviewServerConnection;

package/dist/editor/helpers/colors.d.ts

@@ -3,12 +3,16 @@ export declare const INPUT_BACKGROUND = "#2f363d";
 export declare const BORDER_COLOR = "#000";
 export declare const LIGHT_COLOR = "#ddd";
 export declare const SELECTED_BACKGROUND = "hsla(0, 0%, 100%, 0.15)";
-export declare const LIGHT_TEXT = "rgba(255, 255, 255, 0.6)";
-export declare const SELECTED_HOVER_BACKGROUND = "hsla(0, 0%, 100%, 0.25)";
+export declare const LIGHT_TEXT = "#A6A7A9";
+export declare const VERY_LIGHT_TEXT = "rgba(255, 255, 255, 0.3)";
 export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
 export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";
 export declare const INPUT_BORDER_COLOR_HOVERED = "rgba(255, 255, 255, 0.05)";
 export declare const TIMELINE_BACKGROUND = "#111";
+export declare const FAIL_COLOR = "#ff3232";
+export declare const WARNING_COLOR = "#f1c40f";
+export declare const BLUE = "#0b84f3";
+export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;

package/dist/editor/helpers/colors.js

@@ -1,21 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.SELECTED_HOVER_BACKGROUND = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
+exports.getBackgroundFromHoverState = exports.BLUE_DISABLED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
 exports.BACKGROUND = '#1f2428';
 exports.INPUT_BACKGROUND = '#2f363d';
 exports.BORDER_COLOR = '#000';
 exports.LIGHT_COLOR = '#ddd';
 exports.SELECTED_BACKGROUND = 'hsla(0, 0%, 100%, 0.15)';
-exports.LIGHT_TEXT = 'rgba(255, 255, 255, 0.6)';
-exports.SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
+exports.LIGHT_TEXT = '#A6A7A9';
+exports.VERY_LIGHT_TEXT = 'rgba(255, 255, 255, 0.3)';
+const SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
 exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
 exports.INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
 exports.INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
 exports.TIMELINE_BACKGROUND = '#111';
+exports.FAIL_COLOR = '#ff3232';
+exports.WARNING_COLOR = '#f1c40f';
+exports.BLUE = '#0b84f3';
+exports.BLUE_DISABLED = '#284f73';
 const getBackgroundFromHoverState = ({ selected, hovered, }) => {
     if (selected) {
         if (hovered) {
-            return exports.SELECTED_HOVER_BACKGROUND;
+            return SELECTED_HOVER_BACKGROUND;
         }
         return exports.SELECTED_BACKGROUND;
     }

package/dist/editor/helpers/convert-env-variables.d.ts

@@ -0,0 +1,2 @@
+export declare const envVariablesObjectToArray: (envVariables: Record<string, string>) => [string, string][];
+export declare const envVariablesArrayToObject: (envVariables: [string, string][]) => Record<string, string>;

package/dist/editor/helpers/convert-env-variables.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.envVariablesArrayToObject = exports.envVariablesObjectToArray = void 0;
+const envVariablesObjectToArray = (envVariables) => {
+    return Object.entries(envVariables).map(([key, one]) => [
+        key.trim().toUpperCase(),
+        one.trim(),
+    ]);
+};
+exports.envVariablesObjectToArray = envVariablesObjectToArray;
+const envVariablesArrayToObject = (envVariables) => {
+    return envVariables
+        .map(([key, val]) => [key.trim(), val.trim()])
+        .filter(([key, val]) => key && val)
+        .reduce((acc, [key, value]) => {
+        acc[key.toUpperCase()] = value;
+        return acc;
+    }, {});
+};
+exports.envVariablesArrayToObject = envVariablesArrayToObject;

package/dist/editor/helpers/create-folder-tree.d.ts

@@ -1,8 +1,7 @@
-import type { TComposition, TFolder } from 'remotion';
+import type { AnyComposition, TFolder } from 'remotion';
 import type { CompositionSelectorItemType } from '../components/CompositionSelectorItem';
 export declare const splitParentIntoNameAndParent: (name: string | null) => {
     name: string | null;
     parent: string | null;
 };
-export declare const findItemListToPush: (items: CompositionSelectorItemType[], folderName: string | null, parentName: string | null) => CompositionSelectorItemType[];
-export declare const createFolderTree: (comps: TComposition<unknown>[], folders: TFolder[], foldersExpanded: Record<string, boolean>) => CompositionSelectorItemType[];
+export declare const createFolderTree: (comps: AnyComposition[], folders: TFolder[], foldersExpanded: Record<string, boolean>) => CompositionSelectorItemType[];

package/dist/editor/helpers/create-folder-tree.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createFolderTree = exports.findItemListToPush = exports.splitParentIntoNameAndParent = void 0;
+exports.createFolderTree = exports.splitParentIntoNameAndParent = void 0;
 const persist_open_folders_1 = require("./persist-open-folders");
 const splitParentIntoNameAndParent = (name) => {
     if (name === null) {
@@ -44,7 +44,6 @@ const findItemListToPush = (items, folderName, parentName) => {
     }
     return folder;
 };
-exports.findItemListToPush = findItemListToPush;
 const createFolderIfDoesNotExist = (items, availableFolders, folderItem, foldersExpanded) => {
     var _a;
     if (doesFolderExist(items, folderItem.name, folderItem.parent)) {
@@ -58,7 +57,7 @@ const createFolderIfDoesNotExist = (items, availableFolders, folderItem, folders
         }
         createFolderIfDoesNotExist(items, availableFolders, parent, foldersExpanded);
     }
-    const itemList = (0, exports.findItemListToPush)(items, splitted.name, splitted.parent);
+    const itemList = findItemListToPush(items, splitted.name, splitted.parent);
     if (!itemList) {
         throw new Error('why did folder not exist? ' + folderItem.name);
     }
@@ -93,7 +92,7 @@ const createFolderTree = (comps, folders, foldersExpanded) => {
             composition: item,
             key: item.id,
         };
-        const list = (0, exports.findItemListToPush)(items, item.folderName, item.parentFolderName);
+        const list = findItemListToPush(items, item.folderName, item.parentFolderName);
         list.push(toPush);
     }
     return items;

package/dist/editor/helpers/get-left-of-timeline-slider.d.ts

@@ -1,5 +1 @@
-export declare const useGetXPositionOfItemInTimeline: () => {
-    get: (frame: number) => number;
-    width: number;
-};
 export declare const getXPositionOfItemInTimelineImperatively: (frame: number, duration: number, width: number) => number;