@remotion/cli 4.0.111 → 4.0.113

package/dist/editor/components/CompositionSelectorItem.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionSelectorItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const is_composition_still_1 = require("../helpers/is-composition-still");
+const folder_1 = require("../icons/folder");
+const still_1 = require("../icons/still");
+const video_1 = require("../icons/video");
+const ContextMenu_1 = require("./ContextMenu");
+const layout_1 = require("./layout");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const SidebarRenderButton_1 = require("./SidebarRenderButton");
+const COMPOSITION_ITEM_HEIGHT = 32;
+const itemStyle = {
+    paddingRight: 10,
+    paddingTop: 6,
+    paddingBottom: 6,
+    fontSize: 13,
+    display: 'flex',
+    textDecoration: 'none',
+    cursor: 'default',
+    alignItems: 'center',
+    marginBottom: 1,
+    appearance: 'none',
+    border: 'none',
+    width: '100%',
+    textAlign: 'left',
+    backgroundColor: colors_1.BACKGROUND,
+    height: COMPOSITION_ITEM_HEIGHT,
+};
+const labelStyle = {
+    textAlign: 'left',
+    textDecoration: 'none',
+    fontSize: 13,
+    flex: 1,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+};
+const iconStyle = {
+    width: 18,
+    height: 18,
+    flexShrink: 0,
+};
+const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, selectComposition, toggleFolder, }) => {
+    const selected = (0, react_1.useMemo)(() => {
+        if (item.type === 'composition') {
+            return currentComposition === item.composition.id;
+        }
+        return false;
+    }, [item, currentComposition]);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...itemStyle,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({ hovered, selected }),
+            paddingLeft: 12 + level * 8,
+        };
+    }, [hovered, level, selected]);
+    const label = (0, react_1.useMemo)(() => {
+        return {
+            ...labelStyle,
+            color: selected || hovered ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [hovered, selected]);
+    const onClick = (0, react_1.useCallback)((evt) => {
+        evt.preventDefault();
+        if (item.type === 'composition') {
+            selectComposition(item.composition, true);
+        }
+        else {
+            toggleFolder(item.folderName, item.parentName);
+        }
+    }, [item, selectComposition, toggleFolder]);
+    const contextMenu = (0, react_1.useMemo)(() => {
+        if (item.type === 'composition') {
+            return [
+                {
+                    id: '1',
+                    keyHint: null,
+                    label: `Copy ID`,
+                    leftItem: null,
+                    onClick: () => {
+                        navigator.clipboard
+                            .writeText(item.composition.id)
+                            .catch((err) => {
+                            var _a;
+                            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                                content: `Could not copy to clipboard: ${err.message}`,
+                                created: Date.now(),
+                                duration: 1000,
+                                id: String(Math.random()),
+                            });
+                        })
+                            .then(() => {
+                            var _a;
+                            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                                content: 'Copied to clipboard',
+                                created: Date.now(),
+                                duration: 1000,
+                                id: String(Math.random()),
+                            });
+                        });
+                    },
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    type: 'item',
+                    value: 'remove',
+                },
+            ];
+        }
+        return [];
+    }, [item]);
+    if (item.type === 'folder') {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? ((0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : ((0, jsx_runtime_1.jsx)(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.folderName })] }), item.expanded
+                    ? item.items.map((childItem) => {
+                        return ((0, jsx_runtime_1.jsx)(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder }, childItem.key + childItem.type));
+                    })
+                    : null] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: contextMenu, children: (0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.composition.id }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition }) })] }) }) }));
+};
+exports.CompositionSelectorItem = CompositionSelectorItem;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const ContextMenu: React.FC<{
+    children: React.ReactNode;
+    values: ComboboxValue[];
+}>;

package/dist/editor/components/ContextMenu.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const noop_1 = require("../helpers/noop");
+const z_index_1 = require("../state/z-index");
+const portals_1 = require("./Menu/portals");
+const styles_1 = require("./Menu/styles");
+const MenuContent_1 = require("./NewComposition/MenuContent");
+const ContextMenu = ({ children, values }) => {
+    const ref = (0, react_1.useRef)(null);
+    const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        return {};
+    }, []);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+            return false;
+        };
+        current.addEventListener('contextmenu', onClick);
+        return () => {
+            current.removeEventListener('contextmenu', onClick);
+        };
+    }, [size]);
+    const spaceToBottom = (0, react_1.useMemo)(() => {
+        if (size && opened.type === 'open') {
+            return size.windowSize.height - opened.top;
+        }
+        return 0;
+    }, [opened, size]);
+    const spaceToTop = (0, react_1.useMemo)(() => {
+        if (size && opened.type === 'open') {
+            return opened.top;
+        }
+        return 0;
+    }, [opened, size]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (opened.type === 'not-open') {
+            return;
+        }
+        if (!size) {
+            return;
+        }
+        const spaceToRight = size.windowSize.width - (opened.left + size.width);
+        const minSpaceToRightRequired = styles_1.MAX_MENU_WIDTH;
+        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
+        const horizontalLayout = spaceToRight >= minSpaceToRightRequired ? 'left' : 'right';
+        return {
+            ...styles_1.menuContainerTowardsTop,
+            ...(verticalLayout === 'top'
+                ? {
+                    top: opened.top,
+                }
+                : {
+                    bottom: size.windowSize.height - opened.top,
+                }),
+            ...(horizontalLayout === 'left'
+                ? {
+                    left: opened.left,
+                }
+                : {
+                    right: size.windowSize.width - opened.left,
+                }),
+        };
+    }, [opened, spaceToBottom, spaceToTop, size]);
+    const onHide = (0, react_1.useCallback)(() => {
+        setOpened({ type: 'not-open' });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: ref, onContextMenu: () => false, style: style, children: children }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+exports.ContextMenu = ContextMenu;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CONTROL_BUTTON_PADDING = 6;
+export declare const ControlButton: (props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+    title: string;
+}) => JSX.Element;

package/dist/editor/components/ControlButton.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlButton = exports.CONTROL_BUTTON_PADDING = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const z_index_1 = require("../state/z-index");
+exports.CONTROL_BUTTON_PADDING = 6;
+const ControlButton = (props) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            opacity: props.disabled ? 0.5 : 1,
+            display: 'inline-flex',
+            background: 'none',
+            border: 'none',
+            padding: exports.CONTROL_BUTTON_PADDING,
+        };
+    }, [props.disabled]);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', tabIndex: tabIndex, ...props, style: style }));
+};
+exports.ControlButton = ControlButton;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const CopyButton: React.FC<{
+    textToCopy: string;
+    label: string;
+    labelWhenCopied: string;
+}>;

package/dist/editor/components/CopyButton.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
+const copy_text_1 = require("../helpers/copy-text");
+const layout_1 = require("./layout");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const iconStyle = {
+    width: 16,
+    height: 16,
+    color: 'white',
+};
+const buttonContainerStyle = {
+    display: 'flex',
+    minWidth: '114px',
+};
+const copyIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
+const labelStyle = {
+    fontSize: 14,
+};
+const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const onClick = (0, react_1.useCallback)(() => {
+        (0, copy_text_1.copyText)(textToCopy)
+            .then(() => {
+            setCopied(Date.now());
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
+        });
+    }, [textToCopy]);
+    (0, react_1.useEffect)(() => {
+        if (!copied) {
+            return;
+        }
+        const to = setTimeout(() => setCopied(false), 2000);
+        return () => clearTimeout(to);
+    }, [copied]);
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, buttonContainerStyle: buttonContainerStyle, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }));
+};
+exports.CopyButton = CopyButton;

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

@@ -0,0 +1,2 @@
+export declare const CURRENT_COMPOSITION_HEIGHT = 80;
+export declare const CurrentComposition: () => JSX.Element;

package/dist/editor/components/CurrentComposition.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrentComposition = exports.CURRENT_COMPOSITION_HEIGHT = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const is_composition_still_1 = require("../helpers/is-composition-still");
+const render_frame_1 = require("../state/render-frame");
+exports.CURRENT_COMPOSITION_HEIGHT = 80;
+const container = {
+    height: exports.CURRENT_COMPOSITION_HEIGHT,
+    display: 'block',
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+    padding: 12,
+    color: 'white',
+    backgroundColor: colors_1.BACKGROUND,
+};
+const title = {
+    fontWeight: 'bold',
+    fontSize: 12,
+    whiteSpace: 'nowrap',
+    lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
+};
+const subtitle = {
+    fontSize: 12,
+    opacity: 0.8,
+    whiteSpace: 'nowrap',
+    lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
+};
+const row = {
+    display: 'flex',
+    flexDirection: 'row',
+    lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
+};
+const CurrentComposition = () => {
+    const video = remotion_1.Internals.useVideo();
+    if (!video) {
+        return (0, jsx_runtime_1.jsx)("div", { style: container });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: video.id }), (0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? ((0, jsx_runtime_1.jsx)("div", { style: subtitle, children: "Still" })) : ((0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] }) }) }));
+};
+exports.CurrentComposition = CurrentComposition;

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

@@ -0,0 +1,3 @@
+import type React from 'react';
+export declare const TitleUpdater: React.FC;
+export declare const CurrentCompositionKeybindings: React.FC;

package/dist/editor/components/CurrentCompositionSideEffects.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrentCompositionKeybindings = exports.TitleUpdater = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
+const document_title_1 = require("../helpers/document-title");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const context_1 = require("./RenderQueue/context");
+const TitleUpdater = () => {
+    const renderQueue = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { jobs } = renderQueue;
+    (0, react_1.useEffect)(() => {
+        if (!canvasContent) {
+            (0, document_title_1.setCurrentCanvasContentId)(null);
+            return;
+        }
+        if (canvasContent.type === 'composition') {
+            (0, document_title_1.setCurrentCanvasContentId)(canvasContent.compositionId);
+            return;
+        }
+        if (canvasContent.type === 'output') {
+            (0, document_title_1.setCurrentCanvasContentId)(canvasContent.path);
+            return;
+        }
+        (0, document_title_1.setCurrentCanvasContentId)(canvasContent.asset);
+    }, [canvasContent]);
+    (0, react_1.useEffect)(() => {
+        (0, document_title_1.setRenderJobs)(jobs);
+    }, [jobs]);
+    return null;
+};
+exports.TitleUpdater = TitleUpdater;
+const CurrentCompositionKeybindings = () => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const video = remotion_1.Internals.useVideo();
+    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const openRenderModal = (0, react_1.useCallback)(() => {
+        if (!video) {
+            return;
+        }
+        if (type !== 'connected') {
+            (0, NotificationCenter_1.sendErrorNotification)('Studio server is offline');
+            return;
+        }
+        const renderButton = document.getElementById('render-modal-button');
+        renderButton.click();
+    }, [type, video]);
+    (0, react_1.useEffect)(() => {
+        const binding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'r',
+            commandCtrlKey: false,
+            callback: openRenderModal,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            binding.unregister();
+        };
+    }, [keybindings, openRenderModal]);
+    return null;
+};
+exports.CurrentCompositionKeybindings = CurrentCompositionKeybindings;

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

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

package/dist/editor/components/Editor.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const noop_1 = require("../helpers/noop");
+const timeline_zoom_1 = require("../state/timeline-zoom");
+const z_index_1 = require("../state/z-index");
+const EditorContent_1 = require("./EditorContent");
+const GlobalKeybindings_1 = require("./GlobalKeybindings");
+const Modals_1 = require("./Modals");
+const NoRegisterRoot_1 = require("./NoRegisterRoot");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const background = {
+    backgroundColor: colors_1.BACKGROUND,
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    flexDirection: 'column',
+    position: 'absolute',
+};
+const Editor = () => {
+    const [Root, setRoot] = (0, react_1.useState)(() => remotion_1.Internals.getRoot());
+    const [waitForRoot] = (0, react_1.useState)(() => {
+        if (Root) {
+            return 0;
+        }
+        return (0, remotion_1.delayRender)('Waiting for registerRoot()');
+    });
+    (0, react_1.useEffect)(() => {
+        const listenToChanges = (e) => {
+            if (window.remotion_unsavedProps) {
+                e.returnValue = 'Are you sure you want to leave?';
+            }
+        };
+        window.addEventListener('beforeunload', listenToChanges);
+        return () => {
+            window.removeEventListener('beforeunload', listenToChanges);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (Root) {
+            return;
+        }
+        const cleanup = remotion_1.Internals.waitForRoot((NewRoot) => {
+            setRoot(() => NewRoot);
+            (0, remotion_1.continueRender)(waitForRoot);
+        });
+        return () => {
+            cleanup();
+        };
+    }, [Root, waitForRoot]);
+    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [Root === null ? (0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {}) : (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, {})] }) }));
+};
+exports.Editor = Editor;

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

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

package/dist/editor/components/EditorContent.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
+const SplitterContainer_1 = require("./Splitter/SplitterContainer");
+const SplitterElement_1 = require("./Splitter/SplitterElement");
+const SplitterHandle_1 = require("./Splitter/SplitterHandle");
+const Timeline_1 = require("./Timeline/Timeline");
+const TopPanel_1 = require("./TopPanel");
+const noop = () => undefined;
+const EditorContent = () => {
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    if (canvasContent === null ||
+        isStill ||
+        canvasContent.type !== 'composition') {
+        return (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }));
+};
+exports.EditorContent = EditorContent;

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

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

package/dist/editor/components/EditorContexts.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorContexts = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_id_1 = require("../helpers/client-id");
+const folders_1 = require("../state/folders");
+const highest_z_index_1 = require("../state/highest-z-index");
+const keybindings_1 = require("../state/keybindings");
+const preview_size_1 = require("../state/preview-size");
+const sidebar_1 = require("../state/sidebar");
+const CheckerboardProvider_1 = require("./CheckerboardProvider");
+const get_zod_if_possible_1 = require("./get-zod-if-possible");
+const MediaVolumeProvider_1 = require("./MediaVolumeProvider");
+const ModalsProvider_1 = require("./ModalsProvider");
+const PlayerEmitterContext_1 = require("./PlayerEmitterContext");
+const context_1 = require("./RenderQueue/context");
+const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
+const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
+const ShowRulersProvider_1 = require("./ShowRulersProvider");
+const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
+const EditorContexts = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(get_zod_if_possible_1.ZodProvider, { children: (0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { children: (0, jsx_runtime_1.jsx)(context_1.RenderQueueContextProvider, { children: (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(ShowRulersProvider_1.ShowRulersProvider, { children: (0, jsx_runtime_1.jsx)(ShowGuidesProvider_1.ShowGuidesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(PlayerEmitterContext_1.PlayerEmitterContext, { children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+};
+exports.EditorContexts = EditorContexts;

package/dist/editor/components/EditorGuides/Guide.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { Guide } from '../../state/editor-guides';
+declare const _default: import("react").NamedExoticComponent<{
+    guide: Guide;
+    canvasDimensions: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    scale: number;
+}>;
+export default _default;