@remotion/studio 4.0.80

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+const remotion_1 = require("remotion");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const timeline_refs_1 = require("./timeline-refs");
+const TimelineSlider_1 = require("./TimelineSlider");
+const canScrollTimelineIntoDirection = () => {
+    const current = timeline_refs_1.scrollableRef.current;
+    const { scrollWidth, scrollLeft, clientWidth } = current;
+    const canScrollRight = scrollWidth - scrollLeft - clientWidth > timeline_layout_1.TIMELINE_PADDING;
+    const canScrollLeft = scrollLeft > timeline_layout_1.TIMELINE_PADDING;
+    return { canScrollRight, canScrollLeft };
+};
+exports.canScrollTimelineIntoDirection = canScrollTimelineIntoDirection;
+const SCROLL_INCREMENT = 200;
+const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft, }) => {
+    var _a;
+    return ((0, exports.getFrameFromX)({
+        clientX: scrollLeft,
+        durationInFrames,
+        width,
+        extrapolate: 'clamp',
+    }) +
+        Math.ceil((((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) - timeline_layout_1.TIMELINE_PADDING) /
+            getFrameIncrement(durationInFrames)));
+};
+const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
+    var _a, _b;
+    const nextFrame = (0, exports.getFrameFromX)({
+        clientX: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) - SCROLL_INCREMENT,
+        durationInFrames,
+        width,
+        extrapolate: 'clamp',
+    });
+    const currentFrame = (0, exports.getFrameFromX)({
+        clientX: (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft,
+        durationInFrames,
+        width,
+        extrapolate: 'clamp',
+    });
+    // Should go back at least 1 frame, but not less than 0
+    return Math.max(0, Math.min(currentFrame - 1, nextFrame));
+};
+exports.getFrameWhileScrollingLeft = getFrameWhileScrollingLeft;
+const isCursorInViewport = ({ frame, durationInFrames, }) => {
+    var _a, _b, _c, _d;
+    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
+    const scrollLeft = (_d = (_c = timeline_refs_1.scrollableRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) !== null && _d !== void 0 ? _d : 0;
+    const scrollPosOnRightEdge = (0, exports.getScrollPositionForCursorOnRightEdge)({
+        nextFrame: frame,
+        durationInFrames,
+    });
+    const scrollPosOnLeftEdge = (0, exports.getScrollPositionForCursorOnLeftEdge)({
+        nextFrame: frame,
+        durationInFrames,
+    });
+    const currentFrameRight = calculateFrameWhileScrollingRight({
+        durationInFrames,
+        scrollLeft,
+        width,
+    });
+    return !(scrollPosOnRightEdge >=
+        (0, exports.getScrollPositionForCursorOnRightEdge)({
+            nextFrame: currentFrameRight,
+            durationInFrames,
+        }) || scrollPosOnLeftEdge < scrollLeft);
+};
+exports.isCursorInViewport = isCursorInViewport;
+const ensureFrameIsInViewport = ({ direction, durationInFrames, frame, }) => {
+    var _a, _b, _c, _d, _e;
+    (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(frame);
+    const width = (_c = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _c !== void 0 ? _c : 0;
+    const scrollLeft = (_e = (_d = timeline_refs_1.scrollableRef.current) === null || _d === void 0 ? void 0 : _d.scrollLeft) !== null && _e !== void 0 ? _e : 0;
+    if (direction === 'fit-left') {
+        const currentFrameLeft = (0, exports.getFrameFromX)({
+            clientX: scrollLeft,
+            durationInFrames,
+            width,
+            extrapolate: 'clamp',
+        });
+        const scrollPos = (0, exports.getScrollPositionForCursorOnLeftEdge)({
+            nextFrame: frame,
+            durationInFrames,
+        });
+        const needsToScrollLeft = scrollPos <=
+            (0, exports.getScrollPositionForCursorOnLeftEdge)({
+                nextFrame: currentFrameLeft,
+                durationInFrames,
+            });
+        if (needsToScrollLeft) {
+            (0, exports.scrollToTimelineXOffset)(scrollPos);
+        }
+    }
+    if (direction === 'fit-right') {
+        const currentFrameRight = calculateFrameWhileScrollingRight({
+            durationInFrames,
+            scrollLeft,
+            width,
+        });
+        const scrollPos = (0, exports.getScrollPositionForCursorOnRightEdge)({
+            nextFrame: frame,
+            durationInFrames,
+        });
+        const needsToScrollRight = scrollPos >=
+            (0, exports.getScrollPositionForCursorOnRightEdge)({
+                nextFrame: currentFrameRight,
+                durationInFrames,
+            });
+        if (needsToScrollRight) {
+            (0, exports.scrollToTimelineXOffset)(scrollPos);
+        }
+    }
+    if (direction === 'page-right' || direction === 'page-left') {
+        if (!(0, exports.isCursorInViewport)({ frame, durationInFrames })) {
+            (0, exports.scrollToTimelineXOffset)(direction === 'page-left'
+                ? (0, exports.getScrollPositionForCursorOnRightEdge)({
+                    nextFrame: frame,
+                    durationInFrames,
+                })
+                : (0, exports.getScrollPositionForCursorOnLeftEdge)({
+                    nextFrame: frame,
+                    durationInFrames,
+                }));
+        }
+    }
+    if (direction === 'center') {
+        const scrollPosOnRightEdge = (0, exports.getScrollPositionForCursorOnRightEdge)({
+            nextFrame: frame,
+            durationInFrames,
+        });
+        const scrollPosOnLeftEdge = (0, exports.getScrollPositionForCursorOnLeftEdge)({
+            nextFrame: frame,
+            durationInFrames,
+        });
+        (0, exports.scrollToTimelineXOffset)((scrollPosOnLeftEdge + scrollPosOnRightEdge) / 2);
+    }
+};
+exports.ensureFrameIsInViewport = ensureFrameIsInViewport;
+const scrollToTimelineXOffset = (scrollPos) => {
+    var _a;
+    (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scroll({
+        left: scrollPos,
+    });
+};
+exports.scrollToTimelineXOffset = scrollToTimelineXOffset;
+const getScrollPositionForCursorOnLeftEdge = ({ nextFrame, durationInFrames, }) => {
+    const frameIncrement = getFrameIncrement(durationInFrames);
+    const scrollPos = frameIncrement * nextFrame;
+    return scrollPos;
+};
+exports.getScrollPositionForCursorOnLeftEdge = getScrollPositionForCursorOnLeftEdge;
+const getScrollPositionForCursorOnRightEdge = ({ nextFrame, durationInFrames, }) => {
+    var _a, _b;
+    const frameIncrement = getFrameIncrement(durationInFrames);
+    const framesRemaining = durationInFrames - 1 - nextFrame;
+    const fromRight = framesRemaining * frameIncrement + timeline_layout_1.TIMELINE_PADDING;
+    const scrollPos = ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) -
+        fromRight -
+        ((_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) +
+        timeline_layout_1.TIMELINE_PADDING +
+        4; // clearfix;
+    return scrollPos;
+};
+exports.getScrollPositionForCursorOnRightEdge = getScrollPositionForCursorOnRightEdge;
+const getFrameIncrement = (durationInFrames) => {
+    var _a, _b;
+    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
+    return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
+};
+const getFrameIncrementFromWidth = (durationInFrames, width) => {
+    return (width - timeline_layout_1.TIMELINE_PADDING * 2) / (durationInFrames - 1);
+};
+exports.getFrameIncrementFromWidth = getFrameIncrementFromWidth;
+const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
+    var _a, _b;
+    const nextFrame = calculateFrameWhileScrollingRight({
+        durationInFrames,
+        width,
+        scrollLeft: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + SCROLL_INCREMENT,
+    });
+    const currentFrame = calculateFrameWhileScrollingRight({
+        durationInFrames,
+        width,
+        scrollLeft: (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft,
+    });
+    // Should scroll by at least 1 frame, but not overshoot duration
+    return Math.min(durationInFrames - 1, Math.max(nextFrame, currentFrame + 1));
+};
+exports.getFrameWhileScrollingRight = getFrameWhileScrollingRight;
+const getFrameFromX = ({ clientX, durationInFrames, width, extrapolate, }) => {
+    var _a;
+    const pos = clientX - timeline_layout_1.TIMELINE_PADDING;
+    const frame = Math.round((0, remotion_1.interpolate)(pos, [0, width - timeline_layout_1.TIMELINE_PADDING * 2], [0, (_a = durationInFrames - 1) !== null && _a !== void 0 ? _a : 0], {
+        extrapolateLeft: extrapolate,
+        extrapolateRight: extrapolate,
+    }));
+    return frame;
+};
+exports.getFrameFromX = getFrameFromX;
+const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, }) => {
+    var _a, _b, _c;
+    const ratio = newZoom / oldZoom;
+    if (ratio === 1) {
+        return;
+    }
+    const { current } = timeline_refs_1.scrollableRef;
+    if (!current) {
+        return;
+    }
+    const frameIncrement = getFrameIncrement(currentDurationInFrames);
+    const prevCursorPosition = frameIncrement * currentFrame + timeline_layout_1.TIMELINE_PADDING;
+    const newCursorPosition = ratio * (prevCursorPosition - timeline_layout_1.TIMELINE_PADDING) + timeline_layout_1.TIMELINE_PADDING;
+    current.scrollLeft += newCursorPosition - prevCursorPosition;
+    (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(currentFrame, ((_c = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0) * ratio);
+};
+exports.zoomAndPreserveCursor = zoomAndPreserveCursor;

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

@@ -0,0 +1,19 @@
+export type TimelineViewState = {
+    collapsed: {
+        [key: string]: boolean;
+    };
+};
+export type TimelineActionState = {
+    type: 'collapse';
+    hash: string;
+} | {
+    type: 'expand';
+    hash: string;
+} | {
+    type: 'expand-all';
+    allHashes: string[];
+} | {
+    type: 'collapse-all';
+    allHashes: string[];
+};
+export declare const timelineStateReducer: (state: TimelineViewState, action: TimelineActionState) => TimelineViewState;

package/dist/components/Timeline/timeline-state-reducer.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.timelineStateReducer = void 0;
+const timelineStateReducer = (state, action) => {
+    if (action.type === 'collapse') {
+        return {
+            ...state,
+            collapsed: {
+                ...state.collapsed,
+                [action.hash]: true,
+            },
+        };
+    }
+    if (action.type === 'expand') {
+        return {
+            ...state,
+            collapsed: {
+                ...state.collapsed,
+                [action.hash]: false,
+            },
+        };
+    }
+    if (action.type === 'collapse-all') {
+        return {
+            ...state,
+            collapsed: action.allHashes.reduce((a, b) => {
+                return {
+                    ...[a],
+                    [b]: true,
+                };
+            }, {}),
+        };
+    }
+    if (action.type === 'expand-all') {
+        return {
+            ...state,
+            collapsed: action.allHashes.reduce((a, b) => {
+                return {
+                    ...a,
+                    [b]: false,
+                };
+            }, {}),
+        };
+    }
+    return state;
+};
+exports.timelineStateReducer = timelineStateReducer;

package/dist/components/TimelineInOutToggle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { InOutValue } from '../state/in-out';
+export declare const inOutHandles: React.RefObject<{
+    inMarkClick: (e: KeyboardEvent | null) => void;
+    outMarkClick: (e: KeyboardEvent | null) => void;
+    clearMarks: () => void;
+}>;
+export declare const defaultInOutValue: InOutValue;
+export declare const TimelineInOutPointToggle: React.FC;

package/dist/components/TimelineInOutToggle.js

@@ -0,0 +1,240 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineInOutPointToggle = exports.defaultInOutValue = exports.inOutHandles = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
+const in_out_1 = require("../state/in-out");
+const ControlButton_1 = require("./ControlButton");
+const getTooltipText = (pointType, key) => [
+    `Mark ${pointType}`,
+    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : `(${key})`,
+    '- right click to clear',
+]
+    .filter(no_react_1.NoReactInternals.truthy)
+    .join(' ');
+const style = {
+    width: 16,
+    height: 16,
+};
+exports.inOutHandles = (0, react_1.createRef)();
+exports.defaultInOutValue = { inFrame: null, outFrame: null };
+const TimelineInOutPointToggle = () => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
+    const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const onInOutClear = (0, react_1.useCallback)((composition) => {
+        setInAndOutFrames((prev) => {
+            return {
+                ...prev,
+                [composition]: {
+                    inFrame: null,
+                    outFrame: null,
+                },
+            };
+        });
+    }, [setInAndOutFrames]);
+    const onInMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        if (e === null || e === void 0 ? void 0 : e.shiftKey) {
+            setInAndOutFrames((prev) => {
+                var _a;
+                return {
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                        inFrame: null,
+                    },
+                };
+            });
+            return null;
+        }
+        setInAndOutFrames((prev) => {
+            var _a, _b, _c, _d, _e;
+            const prevOut = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.outFrame;
+            const biggestPossible = prevOut === undefined || prevOut === null ? Infinity : prevOut - 1;
+            const selected = Math.min(timelinePosition, biggestPossible);
+            if (selected === 0) {
+                return {
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        inFrame: null,
+                    },
+                };
+            }
+            const prevIn = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.inFrame;
+            if (prevIn !== null && prevIn !== undefined) {
+                // Disable if already at this position
+                if (prevIn === selected) {
+                    return {
+                        ...prev,
+                        [videoConfig.id]: {
+                            ...((_d = prev[videoConfig.id]) !== null && _d !== void 0 ? _d : exports.defaultInOutValue),
+                            inFrame: null,
+                        },
+                    };
+                }
+            }
+            return {
+                ...prev,
+                [videoConfig.id]: {
+                    ...((_e = prev[videoConfig.id]) !== null && _e !== void 0 ? _e : exports.defaultInOutValue),
+                    inFrame: selected,
+                },
+            };
+        });
+    }, [setInAndOutFrames, timelinePosition, videoConfig]);
+    const clearInMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        e.preventDefault();
+        setInAndOutFrames((f) => {
+            var _a;
+            return {
+                ...f,
+                [videoConfig.id]: {
+                    ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                    inFrame: null,
+                },
+            };
+        });
+    }, [setInAndOutFrames, videoConfig]);
+    const clearOutMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        setInAndOutFrames((f) => {
+            var _a;
+            return {
+                ...f,
+                [videoConfig.id]: {
+                    ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                    outFrame: null,
+                },
+            };
+        });
+    }, [setInAndOutFrames, videoConfig]);
+    const onOutMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        if (e === null || e === void 0 ? void 0 : e.shiftKey) {
+            setInAndOutFrames((f) => {
+                var _a;
+                return {
+                    ...f,
+                    [videoConfig.id]: {
+                        ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                        outFrame: null,
+                    },
+                };
+            });
+            return;
+        }
+        setInAndOutFrames((prev) => {
+            var _a, _b, _c, _d, _e;
+            const prevInFrame = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.inFrame;
+            const smallestPossible = prevInFrame === null || prevInFrame === undefined
+                ? -Infinity
+                : prevInFrame + 1;
+            const selected = Math.max(timelinePosition, smallestPossible);
+            if (selected === videoConfig.durationInFrames - 1) {
+                return {
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        outFrame: null,
+                    },
+                };
+            }
+            const prevOut = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.outFrame;
+            if (prevOut !== null && prevOut !== undefined) {
+                if (prevOut === selected) {
+                    return {
+                        ...prev,
+                        [videoConfig.id]: {
+                            ...((_d = prev[videoConfig.id]) !== null && _d !== void 0 ? _d : exports.defaultInOutValue),
+                            outFrame: null,
+                        },
+                    };
+                }
+            }
+            return {
+                ...prev,
+                [videoConfig.id]: {
+                    ...((_e = prev[videoConfig.id]) !== null && _e !== void 0 ? _e : exports.defaultInOutValue),
+                    outFrame: selected,
+                },
+            };
+        });
+    }, [setInAndOutFrames, timelinePosition, videoConfig]);
+    const confId = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.id;
+    (0, react_1.useEffect)(() => {
+        if (!confId) {
+            return;
+        }
+        const iKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'i',
+            callback: (e) => {
+                onInMark(e);
+            },
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const oKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'o',
+            callback: (e) => {
+                onOutMark(e);
+            },
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const xKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'x',
+            callback: () => {
+                onInOutClear(confId);
+            },
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            oKey.unregister();
+            iKey.unregister();
+            xKey.unregister();
+        };
+    }, [confId, keybindings, onInMark, onInOutClear, onOutMark]);
+    (0, react_1.useImperativeHandle)(exports.inOutHandles, () => {
+        return {
+            clearMarks: () => {
+                if (!confId) {
+                    return;
+                }
+                onInOutClear(confId);
+            },
+            inMarkClick: onInMark,
+            outMarkClick: onOutMark,
+        };
+    }, [confId, onInMark, onInOutClear, onOutMark]);
+    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/components/TopPanel.d.ts

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

package/dist/components/TopPanel.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_breakpoint_1 = require("../helpers/use-breakpoint");
+const editor_rulers_1 = require("../state/editor-rulers");
+const sidebar_1 = require("../state/sidebar");
+const CanvasOrLoading_1 = require("./CanvasOrLoading");
+const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
+const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
+const ExplorerPanel_1 = require("./ExplorerPanel");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
+const MenuToolbar_1 = require("./MenuToolbar");
+const OptionsPanel_1 = require("./OptionsPanel");
+const PreviewToolbar_1 = require("./PreviewToolbar");
+const SplitterContainer_1 = require("./Splitter/SplitterContainer");
+const SplitterElement_1 = require("./Splitter/SplitterElement");
+const SplitterHandle_1 = require("./Splitter/SplitterHandle");
+const container = {
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+};
+const row = {
+    display: 'flex',
+    flexDirection: 'row',
+    flex: 1,
+    minHeight: 0,
+};
+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 (sidebarCollapsedStateLeft === 'expanded') {
+            return 'expanded';
+        }
+        return responsiveLeftStatus;
+    }, [sidebarCollapsedStateLeft, responsiveLeftStatus]);
+    return actualStateLeft;
+};
+exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
+const TopPanel = () => {
+    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
+    const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
+    const actualStateRight = (0, react_1.useMemo)(() => {
+        if (sidebarCollapsedStateRight === 'collapsed') {
+            return 'collapsed';
+        }
+        return 'expanded';
+    }, [sidebarCollapsedStateRight]);
+    const canvasContainerStyle = (0, react_1.useMemo)(() => ({
+        flex: 1,
+        display: 'flex',
+        paddingTop: rulersAreVisible ? editor_rulers_1.RULER_WIDTH : 0,
+        paddingLeft: rulersAreVisible ? editor_rulers_1.RULER_WIDTH : 0,
+    }), [rulersAreVisible]);
+    const onCollapseLeft = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({ left: 'collapsed', right: null });
+    }, [setSidebarCollapsedState]);
+    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.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, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, {}) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, 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, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainerStyle, 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, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, {}) })) : 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/components/UpdateCheck.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { PackageManager } from '../preview-server/get-package-manager';
+export type UpdateInfo = {
+    currentVersion: string;
+    latestVersion: string;
+    updateAvailable: boolean;
+    timedOut: boolean;
+    packageManager: PackageManager | 'unknown';
+};
+export type Bug = {
+    title: string;
+    description: string;
+    link: string;
+    versions: string[];
+};
+export declare const UpdateCheck: () => JSX.Element | null;