@remotion/cli 4.0.0-lambda.3 → 4.0.0-newpaths.1

package/dist/editor/components/RenderQueue/context.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { RenderJob } from '../../../preview-server/render-queue/job';
+declare global {
+    interface Window {
+        remotion_initialRenderQueue: RenderJob[];
+    }
+}
+declare type RenderQueueContextType = {
+    jobs: RenderJob[];
+};
+export declare const RenderQueueContext: React.Context<RenderQueueContextType>;
+export declare const useShouldRenderLeftSidebarTabs: () => boolean;
+export declare const renderJobsRef: React.RefObject<{
+    updateRenderJobs: (jobs: RenderJob[]) => void;
+}>;
+export declare const RenderQueueContextProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/editor/components/RenderQueue/context.js

@@ -0,0 +1,56 @@
+"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.RenderQueueContextProvider = exports.renderJobsRef = exports.useShouldRenderLeftSidebarTabs = exports.RenderQueueContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const client_id_1 = require("../../helpers/client-id");
+exports.RenderQueueContext = react_1.default.createContext({
+    jobs: [],
+});
+const useShouldRenderLeftSidebarTabs = () => {
+    const context = (0, react_1.useContext)(exports.RenderQueueContext);
+    const previewServer = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    return context.jobs.length > 0 && previewServer.type === 'connected';
+};
+exports.useShouldRenderLeftSidebarTabs = useShouldRenderLeftSidebarTabs;
+exports.renderJobsRef = (0, react_1.createRef)();
+const RenderQueueContextProvider = ({ children }) => {
+    const [jobs, setJobs] = (0, react_1.useState)(window.remotion_initialRenderQueue);
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            jobs,
+        };
+    }, [jobs]);
+    (0, react_1.useImperativeHandle)(exports.renderJobsRef, () => {
+        return {
+            updateRenderJobs: (newJobs) => {
+                setJobs(newJobs);
+            },
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.RenderQueueContext.Provider, { value: value, children: children }));
+};
+exports.RenderQueueContextProvider = RenderQueueContextProvider;

package/dist/editor/components/RenderQueue/index.d.ts

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

package/dist/editor/components/RenderQueue/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const context_1 = require("./context");
+const RenderQueueItem_1 = require("./RenderQueueItem");
+const separatorStyle = {
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+};
+const RenderQueue = () => {
+    const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    return ((0, jsx_runtime_1.jsx)("div", { children: jobs.map((j, index) => {
+            return ((0, jsx_runtime_1.jsx)("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: (0, jsx_runtime_1.jsx)(RenderQueueItem_1.RenderQueueItem, { job: j }) }, j.id));
+        }) }));
+};
+exports.RenderQueue = RenderQueue;

package/dist/editor/components/RenderQueue/item-style.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const renderQueueItemSubtitleStyle: React.CSSProperties;

package/dist/editor/components/RenderQueue/item-style.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderQueueItemSubtitleStyle = void 0;
+const colors_1 = require("../../helpers/colors");
+const layout_1 = require("../layout");
+exports.renderQueueItemSubtitleStyle = {
+    fontSize: 13,
+    color: colors_1.LIGHT_TEXT,
+    appearance: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    lineHeight: 1.2,
+    textAlign: 'left',
+    whiteSpace: 'nowrap',
+    marginRight: layout_1.SPACING_UNIT,
+    overflowX: 'hidden',
+    // size smaller than viewport causes actual ellipse
+    maxWidth: 500,
+    textOverflow: 'ellipsis',
+};

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

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

package/dist/editor/components/RenderToolbarIcon.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderStillButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_default_out_name_1 = require("../../get-default-out-name");
+const get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
+const client_id_1 = require("../helpers/client-id");
+const render_1 = require("../icons/render");
+const modals_1 = require("../state/modals");
+const ControlButton_1 = require("./ControlButton");
+const RenderStillButton = () => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { type } = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    const iconStyle = (0, react_1.useMemo)(() => {
+        return {
+            style: {
+                height: 15,
+            },
+        };
+    }, []);
+    const tooltip = type === 'connected'
+        ? 'Export the current frame as a still image'
+        : 'Connect to the preview server to render';
+    const video = remotion_1.Internals.useVideo();
+    const frame = (0, remotion_1.useCurrentFrame)();
+    const onClick = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        if (!video) {
+            return null;
+        }
+        const isVideo = video.durationInFrames > 1;
+        const defaults = window.remotion_renderDefaults;
+        if (!defaults) {
+            throw new TypeError('Expected defaults');
+        }
+        const { initialAudioCodec, initialRenderType, initialVideoCodec } = (0, get_default_video_contexts_1.getDefaultCodecs)({
+            defaultCodec: defaults.codec,
+            isStill: !isVideo,
+        });
+        setSelectedModal({
+            type: 'render',
+            compositionId: video.id,
+            initialFrame: frame,
+            initialStillImageFormat: defaults.stillImageFormat,
+            initialVideoImageFormat: defaults.videoImageFormat,
+            initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
+                compositionName: video.id,
+                defaultExtension: isVideo ? 'mp4' : 'png',
+                type: 'asset',
+            }),
+            initialQuality: defaults.quality,
+            initialScale: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1,
+            initialVerbose: defaults.logLevel === 'verbose',
+            initialAudioCodec,
+            initialRenderType,
+            initialVideoCodec,
+            initialConcurrency: defaults.concurrency,
+            maxConcurrency: defaults.maxConcurrency,
+            minConcurrency: defaults.minConcurrency,
+            initialMuted: defaults.muted,
+            initialEnforceAudioTrack: defaults.enforceAudioTrack,
+            initialProResProfile: defaults.proResProfile,
+            initialPixelFormat: defaults.pixelFormat,
+            initialAudioBitrate: defaults.audioBitrate,
+            initialVideoBitrate: defaults.videoBitrate,
+            initialEveryNthFrame: defaults.everyNthFrame,
+            initialNumberOfGifLoops: defaults.numberOfGifLoops,
+            initialDelayRenderTimeout: defaults.delayRenderTimeout,
+        });
+    }, [video, frame, setSelectedModal]);
+    if (!video) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { id: "render-modal-button", disabled: type !== 'connected', title: tooltip, "aria-label": tooltip, onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }) }));
+};
+exports.RenderStillButton = RenderStillButton;

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

@@ -0,0 +1,6 @@
+import type { MouseEventHandler } from 'react';
+import React from 'react';
+export declare const RendersTab: React.FC<{
+    selected: boolean;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}>;

package/dist/editor/components/RendersTab.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RendersTab = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const layout_1 = require("./layout");
+const context_1 = require("./RenderQueue/context");
+const Tabs_1 = require("./Tabs");
+const row = {
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 13,
+    justifyContent: 'center',
+    color: 'inherit',
+    alignItems: 'center',
+};
+const badge = {
+    height: 16,
+    width: 16,
+    borderRadius: 8,
+    fontSize: 10,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const RendersTab = ({ selected, onClick }) => {
+    const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const failedJobs = jobs.filter((j) => j.status === 'failed').length;
+    const jobCount = jobs.length;
+    const badgeStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...badge,
+            backgroundColor: failedJobs > 0 ? colors_1.FAIL_COLOR : 'transparent',
+            color: failedJobs > 0 ? 'white' : colors_1.LIGHT_TEXT,
+            borderWidth: failedJobs > 0 ? 0 : 1,
+            borderStyle: 'solid',
+            borderColor: colors_1.LIGHT_TEXT,
+        };
+    }, [failedJobs]);
+    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: selected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
+};
+exports.RendersTab = RendersTab;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ResetZoomButton: React.FC<{
+    onClick: () => void;
+}>;

package/dist/editor/components/ResetZoomButton.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetZoomButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
+const ResetZoomButton = ({ onClick }) => {
+    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, children: "Reset zoom" });
+};
+exports.ResetZoomButton = ResetZoomButton;

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

@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+export declare type SegmentedControlItem = {
+    label: React.ReactNode;
+    onClick: () => void;
+    key: string;
+    selected: boolean;
+};
+export declare const SegmentedControl: React.FC<{
+    items: SegmentedControlItem[];
+    needsWrapping: boolean;
+}>;
+export declare const Item: React.FC<PropsWithChildren<{
+    selected: boolean;
+    onClick: () => void;
+}>>;

package/dist/editor/components/SegmentedControl.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = exports.SegmentedControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    overflow: 'hidden',
+    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    flexWrap: 'wrap',
+    maxWidth: '295px',
+    justifyContent: 'flex-end',
+};
+const item = {
+    display: 'flex',
+    fontSize: 15,
+    padding: '4px 12px',
+    cursor: 'pointer',
+    appearance: 'none',
+    border: 'none',
+};
+const SegmentedControl = ({ items, needsWrapping }) => {
+    const controlStyle = (0, react_1.useMemo)(() => {
+        if (needsWrapping) {
+            return {
+                ...container,
+                flexWrap: 'wrap',
+                maxWidth: '248px',
+                justifyContent: 'flex-end',
+                marginBottom: '8px',
+            };
+        }
+        return {
+            ...container,
+        };
+    }, [needsWrapping]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: controlStyle, children: items.map((i) => {
+            return ((0, jsx_runtime_1.jsx)(exports.Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
+        }) }));
+};
+exports.SegmentedControl = SegmentedControl;
+const Item = ({ selected, onClick, children }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const itemStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...item,
+            backgroundColor: selected ? colors_1.INPUT_BACKGROUND : 'transparent',
+            color: selected ? 'white' : hovered ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [hovered, selected]);
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
+};
+exports.Item = Item;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const leftSidebarTabs: React.RefObject<{
+    selectRendersPanel: () => void;
+}>;
+export declare const SidebarContent: React.FC;

package/dist/editor/components/SidebarContent.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarContent = exports.leftSidebarTabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const CompositionSelector_1 = require("./CompositionSelector");
+const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
+const RenderQueue_1 = require("./RenderQueue");
+const context_1 = require("./RenderQueue/context");
+const RendersTab_1 = require("./RendersTab");
+const Tabs_1 = require("./Tabs");
+const container = {
+    width: '100%',
+};
+const tabsContainer = {
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+};
+exports.leftSidebarTabs = (0, react_1.createRef)();
+const localStorageKey = 'remotion.sidebarPanel';
+const persistSelectedPanel = (panel) => {
+    localStorage.setItem(localStorageKey, panel);
+};
+const getSelectedPanel = (shouldRender) => {
+    const panel = localStorage.getItem(localStorageKey);
+    if (panel === 'renders' && shouldRender) {
+        return 'renders';
+    }
+    return 'compositions';
+};
+const SidebarContent = () => {
+    const shouldRender = (0, context_1.useShouldRenderLeftSidebarTabs)();
+    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel(shouldRender));
+    const onCompositionsSelected = (0, react_1.useCallback)(() => {
+        setPanel('compositions');
+        persistSelectedPanel('compositions');
+    }, []);
+    const onRendersSelected = (0, react_1.useCallback)(() => {
+        setPanel('renders');
+        persistSelectedPanel('renders');
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.leftSidebarTabs, () => {
+        return {
+            selectRendersPanel: () => {
+                setPanel('renders');
+                persistSelectedPanel('renders');
+            },
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [shouldRender ? ((0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) })) : null, panel === 'renders' && shouldRender ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {})), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+};
+exports.SidebarContent = SidebarContent;

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

@@ -1,5 +1,6 @@
-import { PreviewSize } from '@remotion/player';
+import type { PreviewSize } from '@remotion/player';
 import React from 'react';
 export declare const commonPreviewSizes: PreviewSize[];
-export declare const getPreviewSizeLabel: (previewSize: PreviewSize) => "100%" | "50%" | "25%" | "Fit" | undefined;
+export declare const getPreviewSizeLabel: (previewSize: PreviewSize) => string;
+export declare const getUniqueSizes: (size: PreviewSize) => PreviewSize[];
 export declare const SizeSelector: React.FC;

package/dist/editor/components/SizeSelector.js

@@ -1,30 +1,70 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SizeSelector = exports.getPreviewSizeLabel = exports.commonPreviewSizes = void 0;
+exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = exports.commonPreviewSizes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkmark_1 = require("../icons/Checkmark");
 const preview_size_1 = require("../state/preview-size");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
-exports.commonPreviewSizes = ['auto', 0.25, 0.5, 1];
+exports.commonPreviewSizes = [
+    {
+        size: 'auto',
+        translation: {
+            x: 0,
+            y: 0,
+        },
+    },
+    {
+        size: 0.25,
+        translation: {
+            x: 0,
+            y: 0,
+        },
+    },
+    {
+        size: 0.5,
+        translation: {
+            x: 0,
+            y: 0,
+        },
+    },
+    {
+        size: 1,
+        translation: {
+            x: 0,
+            y: 0,
+        },
+    },
+];
 const getPreviewSizeLabel = (previewSize) => {
-    if (previewSize === 1) {
-        return '100%';
-    }
-    if (previewSize === 0.5) {
-        return '50%';
-    }
-    if (previewSize === 0.25) {
-        return '25%';
-    }
-    if (previewSize === 'auto') {
+    if (previewSize.size === 'auto') {
         return 'Fit';
     }
+    return `${(previewSize.size * 100).toFixed(0)}%`;
 };
 exports.getPreviewSizeLabel = getPreviewSizeLabel;
 const accessibilityLabel = 'Preview Size';
 const comboStyle = { width: 80 };
+const getUniqueSizes = (size) => {
+    const customPreviewSizes = [size, ...exports.commonPreviewSizes];
+    const uniqueSizes = [];
+    customPreviewSizes.forEach((p) => {
+        if (!uniqueSizes.find((s) => s.size === p.size)) {
+            uniqueSizes.push(p);
+        }
+    });
+    return uniqueSizes.sort((a, b) => {
+        if (a.size === 'auto') {
+            return -1;
+        }
+        if (b.size === 'auto') {
+            return 1;
+        }
+        return a.size - b.size;
+    });
+};
+exports.getUniqueSizes = getUniqueSizes;
 const SizeSelector = () => {
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
     const style = (0, react_1.useMemo)(() => {
@@ -33,9 +73,9 @@ const SizeSelector = () => {
         };
     }, []);
     const items = (0, react_1.useMemo)(() => {
-        return exports.commonPreviewSizes.map((newSize) => {
+        return (0, exports.getUniqueSizes)(size).map((newSize) => {
             return {
-                id: String(newSize),
+                id: String(newSize.size),
                 label: (0, exports.getPreviewSizeLabel)(newSize),
                 onClick: () => {
                     return setSize(() => {
@@ -43,13 +83,14 @@ const SizeSelector = () => {
                     });
                 },
                 type: 'item',
-                value: newSize,
-                keyHint: null,
-                leftItem: String(size) === String(newSize) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                value: newSize.size,
+                keyHint: newSize.size === 1 ? '0' : null,
+                leftItem: String(size.size) === String(newSize.size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
+                quickSwitcherLabel: null,
             };
         });
     }, [setSize, size]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size), values: items }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/editor/components/Splitter/SplitterContainer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SplitterOrientation } from './SplitterContext';
+import type { SplitterOrientation } from './SplitterContext';
 export declare const SplitterContainer: React.FC<{
     orientation: SplitterOrientation;
     maxFlex: number;

package/dist/editor/components/Splitter/SplitterElement.js

@@ -13,6 +13,7 @@ const SplitterElement = ({ children, type }) => {
             (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 1000,
             display: 'flex',
             position: 'relative',
+            overflow: 'hidden',
         };
     }, [context.flexValue, type]);
     return (0, jsx_runtime_1.jsx)("div", { style: style, children: children });

package/dist/editor/components/Tabs/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const Tabs: React.FC<{
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}>;
+export declare const Tab: React.FC<{
+    children: React.ReactNode;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    style?: React.CSSProperties;
+    selected: boolean;
+}>;

package/dist/editor/components/Tabs/index.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = exports.Tabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const tabsContainer = {
+    display: 'flex',
+    flexDirection: 'row',
+};
+const Tabs = ({ children, style }) => {
+    const definiteStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...tabsContainer,
+            ...style,
+        };
+    }, [style]);
+    return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
+};
+exports.Tabs = Tabs;
+const selectorButton = {
+    border: 'none',
+    flex: 1,
+    padding: 8,
+    fontSize: 13,
+};
+const Tab = ({ children, onClick, style, selected }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const definiteStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...selectorButton,
+            backgroundColor: selected
+                ? colors_1.SELECTED_BACKGROUND
+                : hovered
+                    ? colors_1.CLEAR_HOVER
+                    : 'transparent',
+            color: selected ? 'white' : colors_1.LIGHT_TEXT,
+            ...style,
+        };
+    }, [hovered, selected, style]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+};
+exports.Tab = Tab;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TComposition } from 'remotion';
+import type { TComposition } from 'remotion';
 export declare const Thumbnail: React.FC<{
     composition: TComposition<unknown>;
     targetHeight: number;