@remotion/cli 4.0.113 → 4.0.115

package/dist/editor/components/Menu/MenuItem.js

@@ -1,96 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItem = 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 colors_1 = require("../../helpers/colors");
-const z_index_1 = require("../../state/z-index");
-const MenuContent_1 = require("../NewComposition/MenuContent");
-const is_menu_item_1 = require("./is-menu-item");
-const portals_1 = require("./portals");
-const styles_1 = require("./styles");
-const container = {
-    fontSize: 13,
-    color: 'white',
-    paddingLeft: 10,
-    paddingRight: 10,
-    cursor: 'default',
-    paddingTop: 8,
-    paddingBottom: 8,
-    userSelect: 'none',
-    border: 'none',
-};
-const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered, onItemQuit, onPreviousMenu, onNextMenu, menu, }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const ref = (0, react_1.useRef)(null);
-    const size = player_1.PlayerInternals.useElementSize(ref, {
-        triggerOnWindowResize: true,
-        shouldApplyCssTransforms: true,
-    });
-    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
-    const containerStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
-                selected,
-            }),
-        };
-    }, [hovered, selected]);
-    const portalStyle = (0, react_1.useMemo)(() => {
-        if (!selected || !size) {
-            return null;
-        }
-        return {
-            ...styles_1.menuContainerTowardsBottom,
-            left: size.left,
-            top: size.top + size.height,
-        };
-    }, [selected, size]);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        onItemHovered(id);
-        setHovered(true);
-    }, [id, onItemHovered]);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        if (e.button !== 0) {
-            return;
-        }
-        onItemSelected(id);
-        window.addEventListener('pointerup', (evt) => {
-            if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
-                onItemQuit();
-            }
-        }, {
-            once: true,
-        });
-    }, [id, onItemQuit, onItemSelected]);
-    const onClick = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-        const isKeyboardInitiated = e.detail === 0;
-        if (!isKeyboardInitiated) {
-            return;
-        }
-        onItemSelected((p) => {
-            return p === null ? id : null;
-        });
-    }, [id, onItemSelected]);
-    const outerStyle = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return {
-            ...styles_1.outerPortal,
-            top: ((_a = size === null || size === void 0 ? void 0 : size.top) !== null && _a !== void 0 ? _a : 0) + ((_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : 0),
-        };
-    }, [size]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onPointerDown: onPointerDown, onClick: onClick, style: containerStyle, type: "button", className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: itemName }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: outerStyle, children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true, fixedHeight: null }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
-                : null] }));
-};
-exports.MenuItem = MenuItem;

package/dist/editor/components/Menu/MenuSubItem.d.ts

@@ -1,19 +0,0 @@
-import type { PointerEvent } from 'react';
-import React from 'react';
-import type { SubMenu } from '../NewComposition/ComboBox';
-export type SubMenuActivated = false | 'with-mouse' | 'without-mouse';
-export declare const MenuSubItem: React.FC<{
-    label: React.ReactNode;
-    id: string;
-    onActionChosen: (id: string, e: PointerEvent<HTMLDivElement>) => void;
-    selected: boolean;
-    onItemSelected: (id: string) => void;
-    keyHint: string | null;
-    leaveLeftSpace: boolean;
-    leftItem: React.ReactNode;
-    subMenu: SubMenu | null;
-    onQuitMenu: () => void;
-    onNextMenu: () => void;
-    subMenuActivated: SubMenuActivated;
-    setSubMenuActivated: React.Dispatch<React.SetStateAction<SubMenuActivated>>;
-}>;

package/dist/editor/components/Menu/MenuSubItem.js

@@ -1,105 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuSubItem = 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 colors_1 = require("../../helpers/colors");
-const use_keybinding_1 = require("../../helpers/use-keybinding");
-const caret_1 = require("../../icons/caret");
-const z_index_1 = require("../../state/z-index");
-const layout_1 = require("../layout");
-const is_menu_item_1 = require("./is-menu-item");
-const portals_1 = require("./portals");
-const styles_1 = require("./styles");
-const SubMenu_1 = require("./SubMenu");
-const container = {
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 12,
-    paddingRight: 8,
-    cursor: 'default',
-};
-const labelStyle = {
-    fontSize: 13,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    flex: 1,
-};
-const keyHintCss = {
-    flexDirection: 'row',
-    color: colors_1.LIGHT_TEXT,
-    fontSize: 13,
-};
-const leftSpace = {
-    width: 24,
-    marginLeft: -6,
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-};
-const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, selected, onItemSelected, keyHint, subMenu, onQuitMenu, subMenuActivated, setSubMenuActivated, }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const ref = (0, react_1.useRef)(null);
-    const size = player_1.PlayerInternals.useElementSize(ref, {
-        triggerOnWindowResize: true,
-        shouldApplyCssTransforms: true,
-    });
-    const { currentZIndex } = (0, z_index_1.useZIndex)();
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            backgroundColor: selected ? colors_1.CLEAR_HOVER : 'transparent',
-        };
-    }, [selected]);
-    const onItemTriggered = (0, react_1.useCallback)((e) => {
-        onActionChosen(id, e);
-    }, [id, onActionChosen]);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        onItemSelected(id);
-        setHovered(true);
-    }, [id, onItemSelected]);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const onQuitSubmenu = (0, react_1.useCallback)(() => {
-        setSubMenuActivated(false);
-    }, [setSubMenuActivated]);
-    const portalStyle = (0, react_1.useMemo)(() => {
-        if (!selected || !size || !subMenu || !subMenuActivated) {
-            return null;
-        }
-        return {
-            ...styles_1.menuContainerTowardsBottom,
-            left: size.left + size.width + styles_1.SUBMENU_LEFT_INSET,
-            top: size.top - styles_1.MENU_VERTICAL_PADDING,
-        };
-    }, [selected, size, subMenu, subMenuActivated]);
-    (0, react_1.useEffect)(() => {
-        if (!hovered || !subMenu) {
-            return;
-        }
-        const hi = setTimeout(() => {
-            setSubMenuActivated('with-mouse');
-        }, 100);
-        return () => clearTimeout(hi);
-    }, [hovered, selected, setSubMenuActivated, subMenu]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (selected) {
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-                // block is vertical alignment, inline is horizontal alignment. So we use "block"
-                block: 'nearest',
-            });
-        }
-    }, [selected]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onPointerUp: onItemTriggered, role: "button", className: is_menu_item_1.MENU_ITEM_CLASSNAME, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: leftSpace, children: leftItem }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: labelStyle, ...{ title: typeof label === 'string' ? label : undefined }, children: label }), ' ', (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : null, keyHint && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsx)("span", { style: keyHintCss, children: keyHint })) : null, portalStyle && subMenu
-                    ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(SubMenu_1.SubMenuComponent, { onQuitFullMenu: onQuitMenu, subMenu: subMenu, onQuitSubMenu: onQuitSubmenu, portalStyle: portalStyle, subMenuActivated: subMenuActivated }), (0, portals_1.getPortal)(currentZIndex))
-                    : null] }) }));
-};
-exports.MenuSubItem = MenuSubItem;

package/dist/editor/components/Menu/SubMenu.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { SubMenu } from '../NewComposition/ComboBox';
-import type { SubMenuActivated } from './MenuSubItem';
-export declare const SubMenuComponent: React.FC<{
-    portalStyle: React.CSSProperties;
-    subMenu: SubMenu;
-    onQuitFullMenu: () => void;
-    onQuitSubMenu: () => void;
-    subMenuActivated: SubMenuActivated;
-}>;

package/dist/editor/components/Menu/SubMenu.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubMenuComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const noop_1 = require("../../helpers/noop");
-const z_index_1 = require("../../state/z-index");
-const MenuContent_1 = require("../NewComposition/MenuContent");
-const SubMenuComponent = ({ portalStyle, subMenuActivated, subMenu, onQuitFullMenu, onQuitSubMenu, }) => {
-    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, className: "css-reset", children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: noop_1.noop, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
-                    typeof subMenu.preselectIndex === 'number'
-                    ? subMenu.preselectIndex
-                    : false, topItemCanBeUnselected: false, fixedHeight: null }) }) }));
-};
-exports.SubMenuComponent = SubMenuComponent;

package/dist/editor/components/Menu/is-menu-item.d.ts

@@ -1,5 +0,0 @@
-export declare const MENU_INITIATOR_CLASSNAME = "__remotion-studio-menu-initiator";
-export declare const MENU_ITEM_CLASSNAME = "__remotion-studio-menu-item";
-export declare const HORIZONTAL_SCROLLBAR_CLASSNAME = "__remotion-horizontal-scrollbar";
-export declare const VERTICAL_SCROLLBAR_CLASSNAME = "__remotion-vertical-scrollbar";
-export declare const isMenuItem: (el: HTMLElement) => boolean;

package/dist/editor/components/Menu/is-menu-item.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMenuItem = exports.VERTICAL_SCROLLBAR_CLASSNAME = exports.HORIZONTAL_SCROLLBAR_CLASSNAME = exports.MENU_ITEM_CLASSNAME = exports.MENU_INITIATOR_CLASSNAME = void 0;
-exports.MENU_INITIATOR_CLASSNAME = '__remotion-studio-menu-initiator';
-exports.MENU_ITEM_CLASSNAME = '__remotion-studio-menu-item';
-exports.HORIZONTAL_SCROLLBAR_CLASSNAME = '__remotion-horizontal-scrollbar';
-exports.VERTICAL_SCROLLBAR_CLASSNAME = '__remotion-vertical-scrollbar';
-const isMenuItem = (el) => {
-    return Boolean(el.classList.contains(exports.MENU_ITEM_CLASSNAME) ||
-        el.closest(`.${exports.MENU_ITEM_CLASSNAME}`) ||
-        el.classList.contains(exports.MENU_INITIATOR_CLASSNAME) ||
-        el.closest(`.${exports.MENU_INITIATOR_CLASSNAME}`));
-};
-exports.isMenuItem = isMenuItem;

package/dist/editor/components/Menu/portals.d.ts

@@ -1 +0,0 @@
-export declare const getPortal: (i: number) => Element;

package/dist/editor/components/Menu/portals.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPortal = void 0;
-const portals = [
-    document.getElementById('menuportal-0'),
-    document.getElementById('menuportal-1'),
-    document.getElementById('menuportal-2'),
-    document.getElementById('menuportal-3'),
-    document.getElementById('menuportal-4'),
-    document.getElementById('menuportal-5'),
-];
-const getPortal = (i) => {
-    return portals[i];
-};
-exports.getPortal = getPortal;

package/dist/editor/components/Menu/styles.d.ts

@@ -1,11 +0,0 @@
-import type React from 'react';
-export declare const MENU_VERTICAL_PADDING = 4;
-export declare const SUBMENU_LEFT_INSET = -8;
-export declare const MAX_MENU_WIDTH = 400;
-export declare const SHADOW_TOWARDS_BOTTOM = "0 2px 8px rgba(0, 0, 0, 0.5)";
-export declare const SHADOW_TOWARDS_TOP = "0 -2px 8px rgba(0, 0, 0, 0.5)";
-export declare const menuContainerTowardsBottom: React.CSSProperties;
-export declare const menuContainerTowardsTop: React.CSSProperties;
-export declare const fullScreenOverlay: React.CSSProperties;
-export declare const outerPortal: React.CSSProperties;
-export declare const inlineCodeSnippet: React.CSSProperties;

package/dist/editor/components/Menu/styles.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.inlineCodeSnippet = exports.outerPortal = exports.fullScreenOverlay = exports.menuContainerTowardsTop = exports.menuContainerTowardsBottom = exports.SHADOW_TOWARDS_TOP = exports.SHADOW_TOWARDS_BOTTOM = exports.MAX_MENU_WIDTH = exports.SUBMENU_LEFT_INSET = exports.MENU_VERTICAL_PADDING = void 0;
-const colors_1 = require("../../helpers/colors");
-exports.MENU_VERTICAL_PADDING = 4;
-exports.SUBMENU_LEFT_INSET = -8;
-exports.MAX_MENU_WIDTH = 400;
-const menuContainer = {
-    backgroundColor: colors_1.BACKGROUND,
-    position: 'fixed',
-    color: 'white',
-    userSelect: 'none',
-};
-exports.SHADOW_TOWARDS_BOTTOM = '0 2px 8px rgba(0, 0, 0, 0.5)';
-exports.SHADOW_TOWARDS_TOP = '0 -2px 8px rgba(0, 0, 0, 0.5)';
-exports.menuContainerTowardsBottom = {
-    ...menuContainer,
-    boxShadow: exports.SHADOW_TOWARDS_BOTTOM,
-};
-exports.menuContainerTowardsTop = {
-    ...menuContainer,
-    boxShadow: exports.SHADOW_TOWARDS_TOP,
-};
-exports.fullScreenOverlay = {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-};
-exports.outerPortal = {
-    position: 'fixed',
-};
-exports.inlineCodeSnippet = {
-    fontSize: 14,
-    color: colors_1.BLUE,
-    fontFamily: 'monospace',
-};

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

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

package/dist/editor/components/MenuBuildIndicator.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuBuildIndicator = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const client_id_1 = require("../helpers/client-id");
-const layout_1 = require("./layout");
-const OpenEditorButton_1 = require("./OpenEditorButton");
-const Spinner_1 = require("./Spinner");
-const cwd = {
-    fontSize: 13,
-    opacity: 0.8,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-};
-const spinnerSize = 14;
-const spinner = {
-    position: 'relative',
-    width: spinnerSize,
-    marginTop: 4,
-};
-const noSpinner = {
-    position: 'relative',
-    width: spinnerSize,
-};
-const MenuBuildIndicator = () => {
-    const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
-    const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const showButton = window.remotion_editorName && ctx.type === 'connected';
-    (0, react_1.useEffect)(() => {
-        window.remotion_isBuilding = () => {
-            setIsBuilding(true);
-        };
-        window.remotion_finishedBuilding = () => {
-            setIsBuilding(false);
-        };
-        return () => {
-            window.remotion_isBuilding = undefined;
-            window.remotion_finishedBuilding = undefined;
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: cwd, title: window.remotion_cwd, children: [showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }) : null, isBuilding ? ((0, jsx_runtime_1.jsx)("div", { style: spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : ((0, jsx_runtime_1.jsx)("div", { style: noSpinner })), showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }) : null, window.remotion_projectName, showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.25 }) : null, showButton ? (0, jsx_runtime_1.jsx)(OpenEditorButton_1.OpenEditorButton, {}) : null] }));
-};
-exports.MenuBuildIndicator = MenuBuildIndicator;

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

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

package/dist/editor/components/MenuToolbar.js

@@ -1,82 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuToolbar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const use_menu_structure_1 = require("../helpers/use-menu-structure");
-const layout_1 = require("./layout");
-const MenuItem_1 = require("./Menu/MenuItem");
-const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
-const SidebarCollapserControls_1 = require("./SidebarCollapserControls");
-const UpdateCheck_1 = require("./UpdateCheck");
-const row = {
-    alignItems: 'center',
-    flexDirection: 'row',
-    display: 'flex',
-    color: 'white',
-    borderBottom: '1px solid black',
-    fontSize: 13,
-    paddingLeft: 6,
-    paddingRight: 10,
-    backgroundColor: colors_1.BACKGROUND,
-};
-const fixedWidthRight = {
-    width: '330px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-};
-const fixedWidthLeft = {
-    minWidth: '330px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-};
-const flex = {
-    flex: 1,
-};
-const MenuToolbar = () => {
-    const [selected, setSelected] = (0, react_1.useState)(null);
-    const itemClicked = (0, react_1.useCallback)((itemId) => {
-        setSelected(itemId);
-    }, [setSelected]);
-    const itemHovered = (0, react_1.useCallback)((itemId) => {
-        if (selected) {
-            setSelected(itemId);
-        }
-    }, [selected, setSelected]);
-    const closeMenu = (0, react_1.useCallback)(() => {
-        setSelected(null);
-    }, []);
-    const structure = (0, use_menu_structure_1.useMenuStructure)(closeMenu);
-    const menus = (0, react_1.useMemo)(() => {
-        return structure.map((s) => s.id);
-    }, [structure]);
-    const onPreviousMenu = (0, react_1.useCallback)(() => {
-        setSelected((s) => {
-            if (s === null) {
-                return null;
-            }
-            return menus[(menus.indexOf(s) + 1) % menus.length];
-        });
-    }, [menus]);
-    const onNextMenu = (0, react_1.useCallback)(() => {
-        setSelected((s) => {
-            if (s === null) {
-                return null;
-            }
-            if (menus.indexOf(s) === 0) {
-                return menus[menus.length - 1];
-            }
-            return menus[(menus.indexOf(s) - 1) % menus.length];
-        });
-    }, [menus]);
-    const onItemQuit = (0, react_1.useCallback)(() => {
-        setSelected(null);
-    }, [setSelected]);
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", className: "css-reset", style: row, children: [(0, jsx_runtime_1.jsxs)("div", { style: fixedWidthLeft, children: [structure.map((s) => {
-                        return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-                    }), (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {})] }), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)(MenuBuildIndicator_1.MenuBuildIndicator, {}), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)("div", { style: fixedWidthRight, children: (0, jsx_runtime_1.jsx)(SidebarCollapserControls_1.SidebarCollapserControls, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
-};
-exports.MenuToolbar = MenuToolbar;

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

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare const getMaxModalWidth: (width: number) => string;
-export declare const getMaxModalHeight: (height: number) => string;
-export declare const ModalContainer: React.FC<{
-    onEscape: () => void;
-    onOutsideClick: () => void;
-    children: React.ReactNode;
-}>;

package/dist/editor/components/ModalContainer.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalContainer = exports.getMaxModalHeight = exports.getMaxModalWidth = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const colors_1 = require("../helpers/colors");
-const z_index_1 = require("../state/z-index");
-const padding = 20;
-const getMaxModalWidth = (width) => {
-    return `min(calc(100vw - ${padding * 2}px), calc(${width}px - ${padding * 2}px))`;
-};
-exports.getMaxModalWidth = getMaxModalWidth;
-const getMaxModalHeight = (height) => {
-    return `min(calc(100vh - ${padding * 2}px), calc(${height}px - ${padding * 2}px))`;
-};
-exports.getMaxModalHeight = getMaxModalHeight;
-const backgroundOverlay = {
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    backdropFilter: `blur(1px)`,
-    position: 'fixed',
-    height: '100%',
-    width: '100%',
-    display: 'flex',
-    padding,
-};
-const panel = {
-    backgroundColor: colors_1.BACKGROUND,
-    boxShadow: '0 0 4px black',
-    color: 'white',
-    margin: 'auto',
-};
-const ModalContainer = ({ children, onEscape, onOutsideClick }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onEscape, children: (0, jsx_runtime_1.jsx)("div", { style: panel, children: children }) }) }));
-};
-exports.ModalContainer = ModalContainer;

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

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const NewCompHeader: React.FC<{
-    title: string;
-}>;

package/dist/editor/components/ModalHeader.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewCompHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const modals_1 = require("../state/modals");
-const layout_1 = require("./layout");
-const CancelButton_1 = require("./NewComposition/CancelButton");
-const container = {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: '12px 16px',
-    width: '100%',
-    borderBottom: '1px solid black',
-};
-const titleStyle = {
-    fontSize: 14,
-    color: 'white',
-};
-const icon = {
-    height: 20,
-    width: 20,
-};
-const NewCompHeader = ({ title }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onPress = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: titleStyle, children: title }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress })] }));
-};
-exports.NewCompHeader = NewCompHeader;

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

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

package/dist/editor/components/Modals.js

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modals = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const client_id_1 = require("../helpers/client-id");
-const modals_1 = require("../state/modals");
-const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
-const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
-const RenderModal_1 = require("./RenderModal/RenderModal");
-const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
-const UpdateModal_1 = require("./UpdateModal/UpdateModal");
-const Modals = () => {
-    const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type === 'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec })), modalContextType &&
-                canRender &&
-                modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
-};
-exports.Modals = Modals;

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

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

package/dist/editor/components/ModalsProvider.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalsProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const modals_1 = require("../state/modals");
-const ModalsProvider = ({ children }) => {
-    const [modalContextType, setModalContextType] = (0, react_1.useState)(null);
-    const modalsContext = (0, react_1.useMemo)(() => {
-        return {
-            selectedModal: modalContextType,
-            setSelectedModal: setModalContextType,
-        };
-    }, [modalContextType]);
-    return ((0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: children }));
-};
-exports.ModalsProvider = ModalsProvider;

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const MuteToggle: React.FC<{
-    muted: boolean;
-    setMuted: React.Dispatch<React.SetStateAction<boolean>>;
-}>;

package/dist/editor/components/MuteToggle.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MuteToggle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const media_volume_1 = require("../icons/media-volume");
-const mute_1 = require("../state/mute");
-const ControlButton_1 = require("./ControlButton");
-const MuteToggle = ({ muted, setMuted }) => {
-    const onClick = (0, react_1.useCallback)(() => {
-        setMuted((m) => {
-            (0, mute_1.persistMuteOption)(!m);
-            return !m;
-        });
-    }, [setMuted]);
-    const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: muted ? (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOnIcon, {}) }));
-};
-exports.MuteToggle = MuteToggle;