@remotion/studio 4.0.514 → 4.0.516

package/dist/components/RenderQueue/RenderQueueRemoveItem.js

@@ -26,14 +26,9 @@ const RenderQueueRemoveItem = ({ job }) => {
             }
             removeClientJob(job.id);
             (0, save_render_output_1.unregisterClientRender)(job.id).catch(() => { });
-            (0, NotificationCenter_1.showNotification)('Removed job', 2000);
             return;
         }
-        (0, actions_1.removeRenderJob)(job)
-            .then(() => {
-            (0, NotificationCenter_1.showNotification)('Removed job', 2000);
-        })
-            .catch((err) => {
+        (0, actions_1.removeRenderJob)(job).catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not remove item: ${err.message}`, 2000);
         });
     }, [job, isClientJob, removeClientJob, canvasContent, setCanvasContent]);
@@ -46,6 +41,6 @@ const RenderQueueRemoveItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }));
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, title: "Remove", variant: null }));
 };
 exports.RenderQueueRemoveItem = RenderQueueRemoveItem;

package/dist/components/RenderingSettings.js

@@ -16,7 +16,6 @@ const CrfSetting_1 = require("./RenderModal/CrfSetting");
 const human_readable_codec_1 = require("./RenderModal/human-readable-codec");
 const layout_2 = require("./RenderModal/layout");
 const NumberSetting_1 = require("./RenderModal/NumberSetting");
-const RenderModalHr_1 = require("./RenderModal/RenderModalHr");
 const SegmentedControl_1 = require("./SegmentedControl");
 const SettingsContext_1 = require("./SettingsContext");
 const use_auto_save_config_1 = require("./use-auto-save-config");
@@ -31,6 +30,10 @@ const dividerLabel = {
     margin: 0,
     padding: '4px 16px',
 };
+const sectionTitle = {
+    ...dividerLabel,
+    marginTop: 8,
+};
 const fullWidth = {
     boxSizing: 'border-box',
     width: 180,
@@ -333,7 +336,7 @@ const RenderingSettings = () => {
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Still image format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: stillFormatValues, selectedId: stillImageFormat !== null && stillImageFormat !== void 0 ? stillImageFormat : REMOTION_DEFAULT, title: "Still image format" }) })
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Video frame format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: videoFormatValues, selectedId: videoImageFormat !== null && videoImageFormat !== void 0 ? videoImageFormat : REMOTION_DEFAULT, title: "Video frame format" }) })
-                ] }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Encoding" }), client_1.BrowserSafeApis.codecSupportsCrf(resolvedCodec) &&
+                ] }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Encoding" }), client_1.BrowserSafeApis.codecSupportsCrf(resolvedCodec) &&
                 client_1.BrowserSafeApis.codecSupportsVideoBitrate(resolvedCodec) ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Quality control" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: qualityModeValues, needsWrapping: true }) })
                 ] })) : null, qualityMode === 'crf' &&
@@ -345,9 +348,9 @@ const RenderingSettings = () => {
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ProRes profile" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: profileValues, selectedId: proResProfile !== null && proResProfile !== void 0 ? proResProfile : REMOTION_DEFAULT, title: "ProRes profile" }) })
                 ] })) : null, resolvedCodec === 'h264' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "x264 preset" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: presetValues, selectedId: x264Preset !== null && x264Preset !== void 0 ? x264Preset : REMOTION_DEFAULT, title: "x264 preset" }) })
-                ] })) : null, jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Audio" }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                ] })) : null, jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Audio" }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Audio codec" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecValues, selectedId: audioCodec !== null && audioCodec !== void 0 ? audioCodec : REMOTION_DEFAULT, title: "Audio codec" }) })
-                ] }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Performance" }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Concurrency", value: concurrency, onValueChanged: changeConcurrency, min: renderDefaults.minConcurrency, max: renderDefaults.maxConcurrency, step: 1 }), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Performance" }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Concurrency", value: concurrency, onValueChanged: changeConcurrency, min: renderDefaults.minConcurrency, max: renderDefaults.maxConcurrency, step: 1 }), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: { paddingLeft: 16, paddingRight: 16 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: (_a = error !== null && error !== void 0 ? error : settingsError) !== null && _a !== void 0 ? _a : '', align: "flex-start", type: "error" }) })
                 ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
         ] }));

package/dist/components/RulersAndGuidesToggle.d.ts

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

package/dist/components/RulersAndGuidesToggle.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RulersAndGuidesToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const editor_guides_1 = require("../state/editor-guides");
+const editor_rulers_1 = require("../state/editor-rulers");
+const ControlButton_1 = require("./ControlButton");
+const RulersAndGuidesToggle = () => {
+    const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
+    const rulersOrGuidesAreVisible = editorShowRulers || editorShowGuides;
+    const onClick = (0, react_1.useCallback)(() => {
+        setEditorShowRulers(() => !rulersOrGuidesAreVisible);
+        setEditorShowGuides(() => !rulersOrGuidesAreVisible);
+    }, [rulersOrGuidesAreVisible, setEditorShowGuides, setEditorShowRulers]);
+    const accessibilityLabel = rulersOrGuidesAreVisible
+        ? 'Hide rulers and guides'
+        : 'Show rulers and guides';
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": rulersOrGuidesAreVisible, onClick: onClick, children: (color) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", style: { width: 18, height: 18 }, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { fill: rulersOrGuidesAreVisible ? colors_1.BLUE : color, d: "M525.9 154.2L186.5 493.6c-6.2 6.2-16.4 6.2-22.6 0L50.7 380.5c-6.2-6.2-6.2-16.4 0-22.6l33.9-33.9 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 33.9-33.9c6.2-6.2 16.4-6.2 22.6 0L525.9 131.5c6.2 6.2 6.2 16.4 0 22.6zM73.3 289.9L28.1 335.2c-18.7 18.7-18.7 49.1 0 67.9L141.2 516.2c18.7 18.7 49.1 18.7 67.9 0L548.5 176.8c18.7-18.7 18.7-49.1 0-67.9L435.4-4.2C416.6-23 386.2-23 367.5-4.2 77.1 286.2 140.3 223 73.3 289.9z" }) })) }));
+};
+exports.RulersAndGuidesToggle = RulersAndGuidesToggle;

package/dist/components/SegmentedButton.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+type SegmentedButtonSegmentCommon = {
+    readonly ariaLabel: string;
+    readonly buttonId: string | null;
+    readonly disabled: boolean;
+    readonly idleColor: string;
+    readonly renderContent: (color: string) => React.ReactNode;
+    readonly segmentId: string;
+    readonly style: React.CSSProperties | null;
+    readonly title: string | null;
+};
+export type SegmentedButtonSegment = SegmentedButtonSegmentCommon & ({
+    readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly onPointerDown: React.PointerEventHandler<HTMLButtonElement> | null;
+    readonly type: 'action';
+} | {
+    readonly leaveLeftSpace: boolean;
+    readonly onOpenChange: ((open: boolean) => void) | null;
+    readonly selectedId: string | number | null;
+    readonly type: 'menu';
+    readonly values: ComboboxValue[];
+});
+export declare const SegmentedButton: React.FC<{
+    readonly segments: SegmentedButtonSegment[];
+    readonly style: React.CSSProperties | null;
+    readonly title: string | null;
+}>;
+export {};

package/dist/components/SegmentedButton.js

@@ -0,0 +1,226 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedButton = 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 hoverable_1 = require("../helpers/hoverable");
+const mobile_layout_1 = require("../helpers/mobile-layout");
+const noop_1 = require("../helpers/noop");
+const z_index_1 = require("../state/z-index");
+const is_menu_item_1 = require("./Menu/is-menu-item");
+const portals_1 = require("./Menu/portals");
+const styles_1 = require("./Menu/styles");
+const MenuContent_1 = require("./NewComposition/MenuContent");
+const SEGMENTED_BUTTON_BORDER_RADIUS = 6;
+const containerStyle = {
+    alignItems: 'center',
+    borderRadius: SEGMENTED_BUTTON_BORDER_RADIUS,
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    flexDirection: 'row',
+    flexShrink: 0,
+    gap: 1,
+    height: 24,
+    overflow: 'hidden',
+};
+const segmentStyle = {
+    alignItems: 'center',
+    appearance: 'none',
+    border: 'none',
+    boxSizing: 'border-box',
+    cursor: 'default',
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    height: '100%',
+    justifyContent: 'center',
+    lineHeight: '16px',
+    margin: 0,
+    minWidth: 0,
+    padding: '0 6px',
+    whiteSpace: 'nowrap',
+};
+const getSegmentBorderRadius = ({ index, segmentCount, }) => {
+    if (segmentCount === 1) {
+        return SEGMENTED_BUTTON_BORDER_RADIUS;
+    }
+    if (index === 0) {
+        return `${SEGMENTED_BUTTON_BORDER_RADIUS}px 0 0 ${SEGMENTED_BUTTON_BORDER_RADIUS}px`;
+    }
+    if (index === segmentCount - 1) {
+        return `0 ${SEGMENTED_BUTTON_BORDER_RADIUS}px ${SEGMENTED_BUTTON_BORDER_RADIUS}px 0`;
+    }
+    return 0;
+};
+const preventPointerFocus = (event) => {
+    if (event.button !== 0) {
+        return;
+    }
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+    }
+    event.preventDefault();
+};
+const preventMouseFocus = (event) => {
+    event.stopPropagation();
+    if (event.button !== 0) {
+        return;
+    }
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+    }
+    event.preventDefault();
+};
+const SegmentedButtonAction = ({ index, segment, segmentCount }) => {
+    var _a, _b;
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...segmentStyle,
+            borderRadius: getSegmentBorderRadius({ index, segmentCount }),
+            opacity: segment.disabled ? 0.5 : 1,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: colors_1.TRANSPARENT,
+                hoverBackground: segment.disabled
+                    ? colors_1.TRANSPARENT
+                    : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false }),
+                idleColor: segment.idleColor,
+                hoverColor: segment.disabled ? segment.idleColor : colors_1.WHITE,
+            }),
+            ...segment.style,
+        };
+    }, [index, segment, segmentCount]);
+    const onClick = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        segment.onClick(event);
+    }, [segment]);
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        var _a;
+        event.stopPropagation();
+        (_a = segment.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(segment, event);
+        preventPointerFocus(event);
+    }, [segment]);
+    return (jsx_runtime_1.jsx("button", { "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
+};
+const SegmentedButtonMenu = ({ index, segment, segmentCount }) => {
+    var _a, _b;
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const { currentZIndex, tabIndex } = (0, z_index_1.useZIndex)();
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
+    const onHide = (0, react_1.useCallback)(() => {
+        var _a;
+        setOpened(false);
+        (_a = segment.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(segment, false);
+    }, [segment]);
+    const onOutsideClick = (0, react_1.useCallback)((target) => {
+        var _a;
+        if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
+            return;
+        }
+        onHide();
+    }, [onHide]);
+    const onClick = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (segment.values.length === 0) {
+            return;
+        }
+        refresh === null || refresh === void 0 ? void 0 : refresh();
+        setOpened((currentlyOpened) => {
+            var _a;
+            const next = !currentlyOpened;
+            (_a = segment.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(segment, next);
+            return next;
+        });
+    }, [refresh, segment]);
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        preventPointerFocus(event);
+    }, []);
+    const spaceToBottom = (0, react_1.useMemo)(() => {
+        if (!size || !opened) {
+            return 0;
+        }
+        return size.windowSize.height - (size.top + size.height) - 10;
+    }, [opened, size]);
+    const spaceToTop = (0, react_1.useMemo)(() => {
+        if (!size || !opened) {
+            return 0;
+        }
+        return size.top - 10;
+    }, [opened, size]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (!opened || !size) {
+            return null;
+        }
+        const minSpaceRequired = isMobileLayout
+            ? styles_1.MAX_MOBILE_MENU_WIDTH
+            : styles_1.MAX_MENU_WIDTH;
+        const spaceToRight = size.windowSize.width - size.left;
+        const spaceToLeft = size.left + size.width;
+        const canOpenOnLeft = spaceToLeft >= minSpaceRequired;
+        const canOpenOnRight = spaceToRight >= minSpaceRequired;
+        const openTowardsTop = spaceToTop > spaceToBottom;
+        return {
+            ...(openTowardsTop
+                ? {
+                    ...styles_1.menuContainerTowardsTop,
+                    bottom: size.windowSize.height - size.top,
+                }
+                : {
+                    ...styles_1.menuContainerTowardsBottom,
+                    top: size.top + size.height,
+                }),
+            ...(canOpenOnRight
+                ? { left: size.left }
+                : canOpenOnLeft
+                    ? { right: size.windowSize.width - size.left - size.width }
+                    : { left: 0 }),
+        };
+    }, [isMobileLayout, opened, size, spaceToBottom, spaceToTop]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...segmentStyle,
+            borderRadius: getSegmentBorderRadius({ index, segmentCount }),
+            opacity: segment.disabled ? 0.5 : 1,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: opened
+                    ? (0, colors_1.getBackgroundFromHoverState)({ hovered: false, selected: true })
+                    : colors_1.TRANSPARENT,
+                hoverBackground: segment.disabled
+                    ? colors_1.TRANSPARENT
+                    : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: opened }),
+                idleColor: opened ? colors_1.WHITE : segment.idleColor,
+                hoverColor: segment.disabled ? segment.idleColor : colors_1.WHITE,
+            }),
+            ...segment.style,
+        };
+    }, [index, opened, segment, segmentCount]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("button", { ref: ref, "aria-expanded": opened, "aria-haspopup": "menu", "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${is_menu_item_1.MENU_INITIATOR_CLASSNAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }), portalStyle
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: (event) => event.stopPropagation(), children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { fixedHeight: Math.max(spaceToBottom, spaceToTop), leaveLeftSpace: segment.leaveLeftSpace, onHide: onHide, onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, preselectIndex: segment.selectedId === null
+                                        ? false
+                                        : segment.values.findIndex((value) => value.id === segment.selectedId), topItemCanBeUnselected: false, values: segment.values }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+const SegmentedButton = ({ segments, style, title }) => {
+    return (jsx_runtime_1.jsx("div", { style: { ...containerStyle, ...style }, title: title !== null && title !== void 0 ? title : undefined, children: segments.map((segment, index) => {
+            if (segment.type === 'action') {
+                return (jsx_runtime_1.jsx(SegmentedButtonAction, { index: index, segment: segment, segmentCount: segments.length }, segment.segmentId));
+            }
+            return (jsx_runtime_1.jsx(SegmentedButtonMenu, { index: index, segment: segment, segmentCount: segments.length }, segment.segmentId));
+        }) }));
+};
+exports.SegmentedButton = SegmentedButton;

package/dist/components/SelectedOutlineCanvasRotation.d.ts

@@ -6,4 +6,5 @@ export declare const SelectedOutlineCanvasRotation: React.FC<{
     readonly layoutTarget: SelectedOutlineLayoutTarget;
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly outline: SelectedOutline;
+    readonly transform3DMode: boolean;
 }>;

package/dist/components/SelectedOutlineCanvasRotation.js

@@ -52,10 +52,14 @@ const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const rotationDegreesPerPixel = 0.5;
-const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onDraggingChange, outline }) => {
+const canvas2DRotationCursor = (0, selected_outline_measurement_1.getRotationCursor)(0);
+const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onDraggingChange, outline, transform3DMode, }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const cursor = transform3DMode
+        ? canvas_rotation_cursor_1.canvasRotationCursor
+        : canvas2DRotationCursor;
     const onPointerDown = react_1.default.useCallback((event) => {
         var _a, _b;
         if (event.button !== 0) {
@@ -76,7 +80,10 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
             return;
         }
         const previousSvgCursor = svg.style.cursor;
-        svg.style.cursor = canvas_rotation_cursor_1.canvasRotationCursor;
+        const dragCursor = rotationDrag.transform3DMode
+            ? canvas_rotation_cursor_1.canvasRotationCursor
+            : canvas2DRotationCursor;
+        svg.style.cursor = dragCursor;
         const startPointer = { x: event.clientX, y: event.clientY };
         const center = (0, svg_point_to_client_point_1.svgPointToClientPoint)((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
             dimensions: outline.dimensions,
@@ -106,7 +113,7 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
                     return;
                 }
                 dragStarted = true;
-                (0, ForceSpecificCursor_1.forceSpecificCursor)(canvas_rotation_cursor_1.canvasRotationCursor);
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(dragCursor);
                 onDraggingChange(true);
             }
             if (rotationDrag.transform3DMode) {
@@ -234,6 +241,6 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
         setDragOverrides,
         setPropStatuses,
     ]);
-    return (jsx_runtime_1.jsx("polygon", { points: outline.points.map((point) => `${point.x},${point.y}`).join(' '), fill: colors_1.TRANSPARENT, pointerEvents: "all", cursor: canvas_rotation_cursor_1.canvasRotationCursor, onPointerDown: onPointerDown, "data-remotion-studio-canvas-rotation": true }));
+    return (jsx_runtime_1.jsx("polygon", { points: outline.points.map((point) => `${point.x},${point.y}`).join(' '), fill: colors_1.TRANSPARENT, pointerEvents: "all", cursor: cursor, onPointerDown: onPointerDown, "data-remotion-studio-canvas-rotation": true }));
 };
 exports.SelectedOutlineCanvasRotation = SelectedOutlineCanvasRotation;

package/dist/components/SelectedOutlineEditingHandles.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import type { SelectedOutlineContextMenuOpenHandler, SelectedOutlineLayoutTarget, SelectedOutlineRotationDragTarget, SelectedOutlineScaleDragTarget, SelectedOutlineTarget } from './selected-outline-types';
+import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const SelectedOutlineEditingHandles: React.FC<{
+    readonly dragging: boolean;
+    readonly getAllRotationDragTargets: () => readonly SelectedOutlineRotationDragTarget[];
+    readonly getAllScaleDragTargets: () => readonly SelectedOutlineScaleDragTarget[];
+    readonly getContextMenuOpenByKey: (key: string) => SelectedOutlineContextMenuOpenHandler | undefined;
+    readonly getLatestTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
+    readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
+    readonly onContextMenuOpenChange: (open: boolean) => void;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
+    readonly outline: SelectedOutline;
+}>;

package/dist/components/SelectedOutlineEditingHandles.js

@@ -0,0 +1,66 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedOutlineEditingHandles = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const selected_outline_control_layout_1 = require("./selected-outline-control-layout");
+const SelectedOutlineCropControls_1 = require("./SelectedOutlineCropControls");
+const SelectedOutlineRotationCornerHandle_1 = require("./SelectedOutlineRotationCornerHandle");
+const SelectedOutlineScaleEdgeLine_1 = require("./SelectedOutlineScaleEdgeLine");
+const use_selected_outline_control_target_1 = require("./use-selected-outline-control-target");
+const SelectedOutlineEditingHandles = ({ dragging, getAllRotationDragTargets, getAllScaleDragTargets, getContextMenuOpenByKey, getLatestTargetByKey, layoutTarget, onContextMenuOpenChange, onDraggingChange, onSelect, outline, }) => {
+    const { controlTarget, hovered, onHoverChange } = (0, use_selected_outline_control_target_1.useSelectedOutlineControlTarget)({
+        getLatestTargetByKey,
+        layoutTarget,
+    });
+    const controlLayout = (0, react_1.useMemo)(() => (0, selected_outline_control_layout_1.getSelectedOutlineControlLayout)(outline.points), [outline.points]);
+    const onContextMenuOpen = react_1.default.useCallback(() => {
+        var _a;
+        var _b;
+        return (_b = (_a = getContextMenuOpenByKey(outline.key)) === null || _a === void 0 ? void 0 : _a()) !== null && _b !== void 0 ? _b : false;
+    }, [getContextMenuOpenByKey, outline.key]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
+                ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
+                ? controlLayout.scaleEdges.map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine_1.SelectedOutlineScaleEdgeLine, { getAllScaleDragTargets: getAllScaleDragTargets, dragging: dragging, edge: edge, hitWidth: edge === 'top' || edge === 'bottom'
+                        ? controlLayout.scaleHitWidth.horizontal
+                        : controlLayout.scaleHitWidth.vertical, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, edge)))
+                : null, (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
+                ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
+                ? controlLayout.rotationCorners.map(({ corner, point }) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle_1.SelectedOutlineRotationCornerHandle, { getAllRotationDragTargets: getAllRotationDragTargets, corner: corner, dragging: dragging, handlePoint: point, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, radius: controlLayout.rotationHandleRadius, target: controlTarget }, corner)))
+                : null] }));
+};
+exports.SelectedOutlineEditingHandles = SelectedOutlineEditingHandles;

package/dist/components/SelectedOutlineElement.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
-import { type SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineRotationDragTarget, type SelectedOutlineScaleDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
+import { type SelectedOutlineContextMenuOpenHandler, type SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineTarget } from './selected-outline-types';
 import { type TimelineSelection, type TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 type SelectedOutlineElementProps = {
     readonly compositionHeight: number;
@@ -9,15 +9,13 @@ type SelectedOutlineElementProps = {
     readonly dragging: boolean;
     readonly getAllDragOutlines: () => readonly SelectedOutline[];
     readonly getAllDragTargets: () => readonly SelectedOutlineDragTarget[];
-    readonly getAllRotationDragTargets: () => readonly SelectedOutlineRotationDragTarget[];
-    readonly getAllScaleDragTargets: () => readonly SelectedOutlineScaleDragTarget[];
     readonly getLatestTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
     readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
     readonly outline: SelectedOutline;
     readonly onDraggingChange: (dragging: boolean) => void;
-    readonly onContextMenuOpenChange: (open: boolean) => void;
     readonly onSnapPointsChange: (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
     readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
+    readonly registerContextMenuOpen: (key: string, handler: SelectedOutlineContextMenuOpenHandler | null) => void;
     readonly scale: number;
 };
 export declare const SelectedOutlineElement: React.NamedExoticComponent<SelectedOutlineElementProps>;