@remotion/studio 4.0.515 → 4.0.517

package/dist/components/RenderButton.js

@@ -32,15 +32,11 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
@@ -50,48 +46,10 @@ const caret_1 = require("../icons/caret");
 const render_1 = require("../icons/render");
 const in_out_1 = require("../state/in-out");
 const modals_1 = require("../state/modals");
-const z_index_1 = require("../state/z-index");
 const layout_1 = require("./layout");
-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 splitButtonContainer = {
-    display: 'inline-flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: 3,
-    gap: 1,
-    overflow: 'hidden',
-};
-const mainButtonStyle = {
-    paddingLeft: 7,
-    paddingRight: 7,
-    paddingTop: 7,
-    paddingBottom: 7,
-    background: colors_1.TRANSPARENT,
-    border: 'none',
-    borderRadius: '3px 0 0 3px',
-    color: colors_1.WHITE,
-    cursor: 'default',
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: 14,
-    fontFamily: 'inherit',
-};
-const dropdownTriggerStyle = {
-    paddingLeft: 6,
-    paddingRight: 6,
-    paddingTop: 7,
-    paddingBottom: 7,
-    background: colors_1.TRANSPARENT,
-    border: 'none',
-    borderRadius: '0 3px 3px 0',
-    color: colors_1.WHITE,
-    cursor: 'default',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+const SegmentedButton_1 = require("./SegmentedButton");
+const segmentedButtonStyle = {
+    height: 28,
 };
 const mainButtonContent = {
     paddingLeft: 4,
@@ -110,21 +68,21 @@ const label = {
     WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
-const compactSplitButtonSegmentHeight = 24;
-const compactMainButtonStyle = {
-    ...mainButtonStyle,
-    boxSizing: 'border-box',
-    height: compactSplitButtonSegmentHeight,
-    padding: '0 4px',
-    fontSize: 12,
+const compactMainSegmentStyle = {
+    padding: '0 6px',
 };
-const compactDropdownTriggerStyle = {
-    ...dropdownTriggerStyle,
-    boxSizing: 'border-box',
-    height: compactSplitButtonSegmentHeight,
+const defaultMainSegmentStyle = {
+    fontFamily: 'inherit',
+    fontSize: 14,
+    padding: '0 7px',
+};
+const compactDropdownSegmentStyle = {
     padding: 0,
     width: 20,
 };
+const defaultDropdownSegmentStyle = {
+    padding: '0 6px',
+};
 const compactMainButtonContent = {
     ...mainButtonContent,
     paddingLeft: 0,
@@ -155,50 +113,6 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
-    const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const dropdownRef = (0, react_1.useRef)(null);
-    const containerRef = (0, react_1.useRef)(null);
-    const { currentZIndex } = (0, z_index_1.useZIndex)();
-    const size = player_1.PlayerInternals.useElementSize(dropdownRef, {
-        triggerOnWindowResize: true,
-        shouldApplyCssTransforms: true,
-    });
-    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        // Prevent deselection of currently selected items
-        e.stopPropagation();
-        setDropdownOpened((o) => {
-            if (!o) {
-                refresh === null || refresh === void 0 ? void 0 : refresh();
-            }
-            return !o;
-        });
-    }, [refresh]);
-    const onMenuPointerDown = (0, react_1.useCallback)((e) => {
-        // Prevent deselection of currently selected items
-        e.stopPropagation();
-    }, []);
-    const onClickDropdown = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-        const isKeyboardInitiated = e.detail === 0;
-        if (!isKeyboardInitiated) {
-            return;
-        }
-        setDropdownOpened((o) => {
-            if (!o) {
-                refresh === null || refresh === void 0 ? void 0 : refresh();
-                window.addEventListener('pointerup', (evt) => {
-                    if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
-                        setDropdownOpened(false);
-                    }
-                }, {
-                    once: true,
-                });
-            }
-            return !o;
-        });
-    }, [refresh]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
@@ -228,6 +142,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         };
     }, [controlSize]);
     const video = remotion_1.Internals.useVideo();
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { getCurrentFrame } = player_1.PlayerInternals.usePlayerMethods();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     // Read the frame when the modal opens instead of subscribing this button to
@@ -343,9 +258,6 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
             openClientRenderModal();
         }
     }, [renderType, openServerRenderModal, openClientRenderModal]);
-    const onHideDropdown = (0, react_1.useCallback)(() => {
-        setDropdownOpened(false);
-    }, []);
     const handleRenderTypeChange = (0, react_1.useCallback)((newType) => {
         setPreferredRenderType(newType);
         try {
@@ -354,7 +266,6 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         catch (_a) {
             // localStorage might not be available
         }
-        setDropdownOpened(false);
         if (newType === 'server-render') {
             openServerRenderModal(false);
         }
@@ -421,94 +332,67 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
             },
         ];
     }, [canServerRender, handleRenderTypeChange, readOnlyStudio]);
-    const spaceToBottom = (0, react_1.useMemo)(() => {
-        const margin = 10;
-        if (size && dropdownOpened) {
-            return size.windowSize.height - (size.top + size.height) - margin;
-        }
-        return 0;
-    }, [dropdownOpened, size]);
-    const spaceToTop = (0, react_1.useMemo)(() => {
-        const margin = 10;
-        if (size && dropdownOpened) {
-            return size.top - margin;
-        }
-        return 0;
-    }, [dropdownOpened, size]);
-    const derivedMaxHeight = (0, react_1.useMemo)(() => {
-        return spaceToTop > spaceToBottom ? spaceToTop : spaceToBottom;
-    }, [spaceToBottom, spaceToTop]);
-    const portalStyle = (0, react_1.useMemo)(() => {
-        if (!dropdownOpened || !size) {
-            return null;
-        }
-        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
-        return {
-            ...(verticalLayout === 'top'
-                ? {
-                    ...styles_1.menuContainerTowardsBottom,
-                    top: size.top + size.height,
-                }
-                : {
-                    ...styles_1.menuContainerTowardsTop,
-                    bottom: size.windowSize.height - size.top,
-                }),
-            right: size.windowSize.width - size.left - size.width,
-        };
-    }, [dropdownOpened, size, spaceToBottom, spaceToTop]);
-    const containerStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...splitButtonContainer,
-            borderRadius: controlSize === 'compact' ? 3 : 4,
-            opacity: 1,
-            cursor: 'default',
-        };
-    }, [controlSize]);
     const renderLabel = renderType === 'server-render'
         ? 'Render'
         : renderType === 'render-command'
             ? 'Render via CLI'
             : 'Render on web';
     const showRenderLabel = !narrow || renderType !== 'server-render';
-    const mainHovered = hovered && !dropdownOpened;
-    const mainForegroundColor = mainHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
-    const dropdownForegroundColor = hovered || dropdownOpened ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
-    const mainSegmentBackground = (0, colors_1.getBackgroundFromHoverState)({
-        hovered: mainHovered,
-        selected: false,
-    });
-    const dropdownSegmentBackground = (0, colors_1.getBackgroundFromHoverState)({
-        hovered,
-        selected: dropdownOpened,
-    });
-    if (!video) {
+    const segments = (0, react_1.useMemo)(() => {
+        return [
+            {
+                ariaLabel: renderLabel,
+                buttonId: 'render-modal-button',
+                disabled: false,
+                idleColor: colors_1.WHITE_ALPHA_80,
+                onClick,
+                onPointerDown: null,
+                renderContent: (color) => (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
+                        ? compactMainButtonContent
+                        : mainButtonContent, children: [
+                        jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle }), showRenderLabel ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: controlSize === 'compact' ? compactLabel : label, children: renderLabel })
+                            ] })) : null] })),
+                segmentId: 'render',
+                style: controlSize === 'compact'
+                    ? compactMainSegmentStyle
+                    : defaultMainSegmentStyle,
+                title: tooltip,
+                type: 'action',
+            },
+            {
+                ariaLabel: 'Select render type',
+                buttonId: null,
+                disabled: false,
+                idleColor: colors_1.WHITE_ALPHA_80,
+                leaveLeftSpace: false,
+                onOpenChange: null,
+                renderContent: (color) => jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }),
+                segmentId: 'render-type',
+                selectedId: renderType,
+                style: controlSize === 'compact'
+                    ? compactDropdownSegmentStyle
+                    : defaultDropdownSegmentStyle,
+                title: 'Select render type',
+                type: 'menu',
+                values: dropdownValues,
+            },
+        ];
+    }, [
+        controlSize,
+        dropdownValues,
+        iconStyle,
+        onClick,
+        renderLabel,
+        renderType,
+        showRenderLabel,
+        tooltip,
+    ]);
+    if (!video || (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition') {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
-                    jsx_runtime_1.jsx("button", { type: "button", "aria-label": renderLabel, style: {
-                            ...(controlSize === 'compact'
-                                ? compactMainButtonStyle
-                                : mainButtonStyle),
-                            backgroundColor: mainSegmentBackground,
-                            color: mainForegroundColor,
-                        }, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
-                                ? compactMainButtonContent
-                                : mainButtonContent, children: [
-                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: mainForegroundColor, svgProps: iconStyle }), showRenderLabel ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                        jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: {
-                                                ...(controlSize === 'compact' ? compactLabel : label),
-                                                color: mainForegroundColor,
-                                            }, children: renderLabel })
-                                    ] })) : null] }) }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: {
-                            ...(controlSize === 'compact'
-                                ? compactDropdownTriggerStyle
-                                : dropdownTriggerStyle),
-                            backgroundColor: dropdownSegmentBackground,
-                            color: dropdownForegroundColor,
-                        }, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: dropdownForegroundColor }) })
-                ] }), portalStyle
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
-                : null] }));
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: tooltip })
+        ] }));
 };
 exports.RenderButton = react_1.default.memo(RenderButtonInner);

package/dist/components/RenderModal/DataEditor.js

@@ -48,6 +48,7 @@ const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const SegmentedControl_1 = require("../SegmentedControl");
 const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
 const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
+const infer_zod_schema_from_value_1 = require("./SchemaEditor/infer-zod-schema-from-value");
 const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
 const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
 const zod_schema_type_1 = require("./SchemaEditor/zod-schema-type");
@@ -196,19 +197,21 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
         setDefaultProps((p) => p, { shouldSave: true });
     }, [setDefaultProps]);
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     const schema = (0, react_1.useMemo)(() => {
-        if (!z) {
-            return 'no-zod';
-        }
-        if (!unresolvedComposition.schema) {
-            return 'no-schema';
-        }
-        if (!(typeof unresolvedComposition.schema
-            .safeParse === 'function')) {
-            throw new Error('A value which is not a Zod schema was passed to `schema`');
-        }
-        return unresolvedComposition.schema;
-    }, [unresolvedComposition.schema, z]);
+        var _a;
+        return (0, infer_zod_schema_from_value_1.resolveCompositionSchema)({
+            explicitSchema: unresolvedComposition.schema,
+            defaultProps: (_a = unresolvedComposition.defaultProps) !== null && _a !== void 0 ? _a : {},
+            z,
+            zodTypes,
+        });
+    }, [
+        unresolvedComposition.defaultProps,
+        unresolvedComposition.schema,
+        z,
+        zodTypes,
+    ]);
     const zodValidationResult = (0, react_1.useMemo)(() => {
         if (schema === 'no-zod') {
             return 'no-zod';

package/dist/components/RenderModal/RenderStatusModal.js

@@ -68,7 +68,6 @@ const RenderStatusModal = ({ jobId, }) => {
         setSelectedModal(null);
         if (isClientJob) {
             removeClientJob(job.id);
-            (0, NotificationCenter_1.showNotification)('Removed render', 2000);
         }
         else {
             (0, actions_1.removeRenderJob)(job).catch((err) => {

package/dist/components/RenderModal/SchemaEditor/ZodSwitch.js

@@ -36,7 +36,9 @@ const ZodSwitch = ({ schema, jsonPath, value, setValue, onRemove, mayPad }) => {
             description === zodTypes.ZodZypesInternals.REMOTION_COLOR_BRAND) {
             return (jsx_runtime_1.jsx(ZodColorEditor_1.ZodColorEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onRemove: onRemove, mayPad: mayPad }));
         }
-        if (value.startsWith(window.remotion_staticBase)) {
+        if ((window.remotion_staticBase !== '' &&
+            value.startsWith(window.remotion_staticBase)) ||
+            window.remotion_staticFiles.some((file) => file.src === value)) {
             return (jsx_runtime_1.jsx(ZodStaticFileEditor_1.ZodStaticFileEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, onRemove: onRemove, mayPad: mayPad }));
         }
         if (zodTypes &&

package/dist/components/RenderModal/SchemaEditor/infer-zod-schema-from-value.d.ts

@@ -0,0 +1,15 @@
+import type { ZodType as ZodNamespace, ZodTypesType } from '../../get-zod-if-possible';
+import type { AnyZodSchema } from './zod-schema-type';
+export declare function inferZodSchemaFromValue({ value, z, zodTypes, path }: {
+    readonly value: unknown;
+    readonly z: ZodNamespace;
+    readonly zodTypes: ZodTypesType | null;
+    readonly path: readonly string[];
+}): AnyZodSchema;
+export type ResolvedCompositionSchema = AnyZodSchema | 'no-schema' | 'no-zod';
+export declare function resolveCompositionSchema({ explicitSchema, defaultProps, z, zodTypes }: {
+    readonly explicitSchema: unknown;
+    readonly defaultProps: Record<string, unknown>;
+    readonly z: ZodNamespace | null;
+    readonly zodTypes: ZodTypesType | null;
+}): ResolvedCompositionSchema;

package/dist/components/RenderModal/SchemaEditor/infer-zod-schema-from-value.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inferZodSchemaFromValue = inferZodSchemaFromValue;
+exports.resolveCompositionSchema = resolveCompositionSchema;
+const zod_schema_type_1 = require("./zod-schema-type");
+const hasUnambiguousColorSyntax = (value) => {
+    return /^(?:#|(?:rgb|hsl|hwb|lab|lch|oklab|oklch|color)\()/i.test(value.trim());
+};
+const isPlainObject = (value) => {
+    if (value === null || typeof value !== 'object') {
+        return false;
+    }
+    const prototype = Object.getPrototypeOf(value);
+    return prototype === Object.prototype || prototype === null;
+};
+function inferZodSchemaFromValue({ value, z, zodTypes, path, }) {
+    var _a;
+    if (typeof value === 'string') {
+        const key = (_a = path.at(-1)) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        if (key === 'type') {
+            return z.literal(value);
+        }
+        const keySuggestsColor = key === null || key === void 0 ? void 0 : key.includes('color');
+        if (zodTypes && (keySuggestsColor || hasUnambiguousColorSyntax(value))) {
+            try {
+                zodTypes.ZodZypesInternals.parseColor(value);
+                return zodTypes.zColor();
+            }
+            catch (_b) { }
+        }
+        return z.string();
+    }
+    if (typeof value === 'number') {
+        return z.number();
+    }
+    if (typeof value === 'boolean') {
+        return z.boolean();
+    }
+    if (value === null) {
+        return z.null();
+    }
+    if (typeof value === 'undefined') {
+        return z.undefined();
+    }
+    if (value instanceof Date) {
+        return z.date();
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return z.any();
+        }
+        const elementSchema = inferZodSchemaFromValue({
+            value: value[0],
+            z,
+            zodTypes,
+            path,
+        });
+        if (!value.every((item) => (0, zod_schema_type_1.zodSafeParse)(elementSchema, item).success)) {
+            return z.any();
+        }
+        return z.array(elementSchema);
+    }
+    if (isPlainObject(value)) {
+        return z.object(Object.fromEntries(Object.entries(value).map(([key, child]) => [
+            key,
+            inferZodSchemaFromValue({
+                value: child,
+                z,
+                zodTypes,
+                path: [...path, key],
+            }),
+        ])));
+    }
+    return z.any();
+}
+function resolveCompositionSchema({ explicitSchema, defaultProps, z, zodTypes, }) {
+    if (!z) {
+        return 'no-zod';
+    }
+    if (explicitSchema) {
+        if (typeof explicitSchema.safeParse !== 'function') {
+            throw new Error('A value which is not a Zod schema was passed to `schema`');
+        }
+        return explicitSchema;
+    }
+    if (Object.keys(defaultProps).length === 0) {
+        return 'no-schema';
+    }
+    return inferZodSchemaFromValue({
+        value: defaultProps,
+        z,
+        zodTypes,
+        path: [],
+    });
+}

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]);

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,4 @@
+import React from 'react';
+export declare const RulersAndGuidesToggle: React.FC<{
+    readonly showGuides: boolean;
+}>;

package/dist/components/RulersAndGuidesToggle.js

@@ -0,0 +1,34 @@
+"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 = ({ showGuides }) => {
+    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 || (showGuides && editorShowGuides);
+    const onClick = (0, react_1.useCallback)(() => {
+        setEditorShowRulers(() => !rulersOrGuidesAreVisible);
+        if (showGuides) {
+            setEditorShowGuides(() => !rulersOrGuidesAreVisible);
+        }
+    }, [
+        rulersOrGuidesAreVisible,
+        setEditorShowGuides,
+        setEditorShowRulers,
+        showGuides,
+    ]);
+    const accessibilityLabel = showGuides
+        ? rulersOrGuidesAreVisible
+            ? 'Hide rulers and guides'
+            : 'Show rulers and guides'
+        : editorShowRulers
+            ? 'Hide rulers'
+            : 'Show rulers';
+    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 {};