@remotion/studio 4.0.523 → 4.0.525

package/dist/components/ActionTooltip.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const ActionTooltip: React.FC<{
+    readonly label: string;
+    readonly shortcut: string | null;
+    /** Hover delay in milliseconds. Pass null to show immediately. */
+    readonly delay: number | null;
+    readonly dismissOnClick: boolean;
+    readonly side?: 'top' | 'right';
+    readonly triggerStyle?: React.CSSProperties;
+    readonly children: React.ReactNode;
+}>;

package/dist/components/ActionTooltip.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionTooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const portals_1 = require("./Menu/portals");
+const styles_1 = require("./Menu/styles");
+const defaultTriggerStyle = { display: 'inline-flex' };
+const tooltipStyle = {
+    position: 'fixed',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    backgroundColor: colors_1.TIMELINE_BACKGROUND_COLOR,
+    color: colors_1.WHITE_ALPHA_90,
+    borderRadius: 6,
+    padding: '6px 8px',
+    fontSize: 12,
+    lineHeight: '16px',
+    whiteSpace: 'pre-wrap',
+    overflowWrap: 'anywhere',
+    maxWidth: 'calc(100vw - 16px)',
+    boxShadow: styles_1.SHADOW_TOWARDS_TOP,
+    pointerEvents: 'none',
+};
+const labelStyle = {
+    font: 'inherit',
+    color: 'inherit',
+    minWidth: 0,
+};
+const shortcutStyle = {
+    ...labelStyle,
+    backgroundColor: colors_1.WHITE_ALPHA_10,
+    borderRadius: 3,
+    padding: '0 4px',
+    minWidth: 16,
+    textAlign: 'center',
+    whiteSpace: 'nowrap',
+    flexShrink: 0,
+};
+let visibleTooltipCount = 0;
+let lastTooltipHiddenAt = null;
+const TOOLTIP_SKIP_DELAY_WINDOW = 300;
+const ActionTooltip = ({ label, shortcut, delay, dismissOnClick, side = 'top', triggerStyle, children, }) => {
+    var _a, _b;
+    const triggerRef = (0, react_1.useRef)(null);
+    const tooltipRef = (0, react_1.useRef)(null);
+    const timer = (0, react_1.useRef)(null);
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [position, setPosition] = (0, react_1.useState)(null);
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
+    (0, react_1.useLayoutEffect)(() => {
+        if (!visible) {
+            return;
+        }
+        visibleTooltipCount++;
+        return () => {
+            visibleTooltipCount--;
+            lastTooltipHiddenAt = Date.now();
+        };
+    }, [visible]);
+    const hide = (0, react_1.useCallback)(() => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+        setVisible(false);
+        setPosition(null);
+    }, []);
+    const show = (0, react_1.useCallback)(() => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+        setVisible(true);
+    }, []);
+    const onPointerEnter = (0, react_1.useCallback)((event) => {
+        if (event.pointerType === 'touch' ||
+            timer.current !== null ||
+            !event.currentTarget.contains(event.target)) {
+            return;
+        }
+        // Keep adjacent controls instant, including crossing the gap between them.
+        if (!delay ||
+            visibleTooltipCount > 0 ||
+            (lastTooltipHiddenAt !== null &&
+                Date.now() - lastTooltipHiddenAt < TOOLTIP_SKIP_DELAY_WINDOW)) {
+            show();
+            return;
+        }
+        timer.current = setTimeout(show, delay);
+    }, [delay, show]);
+    (0, react_1.useEffect)(() => {
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                hide();
+            }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('blur', hide);
+        window.addEventListener('resize', hide);
+        window.addEventListener('scroll', hide, true);
+        return () => {
+            if (timer.current !== null) {
+                clearTimeout(timer.current);
+            }
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('blur', hide);
+            window.removeEventListener('resize', hide);
+            window.removeEventListener('scroll', hide, true);
+        };
+    }, [hide]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!visible || !triggerRef.current || !tooltipRef.current) {
+            return;
+        }
+        const trigger = triggerRef.current.getBoundingClientRect();
+        const tooltip = tooltipRef.current.getBoundingClientRect();
+        if (side === 'right') {
+            const right = trigger.right + 4;
+            setPosition({
+                left: right + tooltip.width <= window.innerWidth - 8
+                    ? right
+                    : Math.max(8, trigger.left - tooltip.width - 4),
+                top: Math.max(8, Math.min(trigger.top + (trigger.height - tooltip.height) / 2, window.innerHeight - tooltip.height - 8)),
+            });
+            return;
+        }
+        const above = trigger.top - tooltip.height - 4;
+        setPosition({
+            left: Math.max(8, Math.min(trigger.left + (trigger.width - tooltip.width) / 2, window.innerWidth - tooltip.width - 8)),
+            top: Math.max(8, Math.min(above >= 8 ? above : trigger.bottom + 4, window.innerHeight - tooltip.height - 8)),
+        });
+    }, [label, shortcut, side, visible]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("span", { ref: triggerRef, style: { ...defaultTriggerStyle, ...triggerStyle }, onPointerEnter: onPointerEnter, onPointerLeave: hide, onPointerDownCapture: dismissOnClick ? hide : undefined, onClickCapture: dismissOnClick ? hide : undefined, onFocus: (event) => {
+                    if (event.currentTarget.contains(event.target)) {
+                        show();
+                    }
+                }, onBlur: hide, children: children }), visible
+                ? (0, react_dom_1.createPortal)(jsx_runtime_1.jsxs("div", { ref: tooltipRef, role: "tooltip", className: "css-reset", style: {
+                        ...tooltipStyle,
+                        left: (_a = position === null || position === void 0 ? void 0 : position.left) !== null && _a !== void 0 ? _a : 0,
+                        top: (_b = position === null || position === void 0 ? void 0 : position.top) !== null && _b !== void 0 ? _b : 0,
+                        visibility: position ? 'visible' : 'hidden',
+                    }, children: [
+                        jsx_runtime_1.jsx("span", { style: labelStyle, children: label }), shortcut ? jsx_runtime_1.jsx("kbd", { style: shortcutStyle, children: shortcut }) : null] }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+exports.ActionTooltip = ActionTooltip;

package/dist/components/AppLaunchButton.js

@@ -51,6 +51,7 @@ const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAr
                     ? defaultMainSegmentStyle
                     : compactMainSegmentStyle,
                 title,
+                tooltipLabel: null,
                 type: 'action',
             },
             ...(items.length > 0
@@ -67,6 +68,7 @@ const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAr
                         selectedId: null,
                         style: dropdownSegmentStyle,
                         title: menuAriaLabel,
+                        tooltipLabel: null,
                         type: 'menu',
                         values: items,
                     },

package/dist/components/AssetSelectorModal.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type AssetSelectionModalState } from '../state/modals';
+export declare const AssetSelectorModal: React.FC<{
+    readonly state: AssetSelectionModalState;
+    readonly readOnlyStudio: boolean;
+}>;

package/dist/components/AssetSelectorModal.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetSelectorModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const modals_1 = require("../state/modals");
+const Button_1 = require("./Button");
+const layout_1 = require("./layout");
+const ModalButton_1 = require("./ModalButton");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalFooter_1 = require("./ModalFooter");
+const ModalHeader_1 = require("./ModalHeader");
+const RemInput_1 = require("./NewComposition/RemInput");
+const QuickSwitcherContent_1 = require("./QuickSwitcher/QuickSwitcherContent");
+const SegmentedControl_1 = require("./SegmentedControl");
+const panel = {
+    maxWidth: 'calc(100vw - 40px)',
+    overflow: 'hidden',
+    width: 400,
+};
+const sourceSelector = {
+    display: 'flex',
+    padding: '12px 16px 0',
+};
+const urlContent = {
+    boxSizing: 'border-box',
+    minHeight: 300,
+    padding: 16,
+};
+const compactUrlContent = {
+    boxSizing: 'border-box',
+    padding: 16,
+};
+const label = {
+    color: colors_1.LIGHT_TEXT,
+    display: 'block',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    marginBottom: 8,
+};
+const previewRow = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 16,
+    minHeight: 112,
+    paddingTop: 16,
+};
+const previewImage = {
+    display: 'block',
+    height: 96,
+    objectFit: 'contain',
+    width: 96,
+};
+const previewStatus = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: 1.5,
+};
+const footer = {
+    display: 'flex',
+    minWidth: 0,
+    width: '100%',
+};
+const isHttpUrl = (value) => {
+    try {
+        const { protocol } = new URL(value.startsWith('//') ? `https:${value}` : value);
+        return protocol === 'http:' || protocol === 'https:';
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const AssetSelectorModal = ({ state, readOnlyStudio }) => {
+    var _a;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const [mode, setMode] = (0, react_1.useState)(() => state.initialUrl === null ? 'project' : 'url');
+    const [draft, setDraft] = (0, react_1.useState)((_a = state.initialUrl) !== null && _a !== void 0 ? _a : '');
+    const [previewState, setPreviewState] = (0, react_1.useState)(() => state.assetType === 'image' && state.initialUrl !== null
+        ? { type: 'loading' }
+        : { type: 'empty' });
+    const close = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    (0, react_1.useEffect)(() => {
+        if (state.assetType !== 'image') {
+            setPreviewState({ type: 'empty' });
+            return;
+        }
+        const value = draft.trim();
+        if (value === '') {
+            setPreviewState({ type: 'empty' });
+            return;
+        }
+        if (!isHttpUrl(value)) {
+            setPreviewState({ type: 'invalid' });
+            return;
+        }
+        let cancelled = false;
+        const image = new Image();
+        setPreviewState({ type: 'loading' });
+        image.onload = () => {
+            if (!cancelled) {
+                setPreviewState({
+                    type: 'loaded',
+                    width: image.naturalWidth,
+                    height: image.naturalHeight,
+                });
+            }
+        };
+        image.onerror = () => {
+            if (!cancelled) {
+                setPreviewState({ type: 'error' });
+            }
+        };
+        image.src = value.startsWith('//') ? `https:${value}` : value;
+        return () => {
+            cancelled = true;
+            image.onload = null;
+            image.onerror = null;
+        };
+    }, [draft, state.assetType]);
+    const items = (0, react_1.useMemo)(() => [
+        {
+            key: 'project',
+            label: 'Project assets',
+            onClick: () => setMode('project'),
+            selected: mode === 'project',
+        },
+        {
+            key: 'url',
+            label: 'URL',
+            onClick: () => setMode('url'),
+            selected: mode === 'url',
+        },
+    ], [mode]);
+    const trimmedDraft = draft.trim();
+    const canApply = isHttpUrl(trimmedDraft);
+    const invalidDraft = trimmedDraft !== '' && !canApply;
+    const apply = (0, react_1.useCallback)(() => {
+        if (!canApply) {
+            return;
+        }
+        state.onSelectedUrl(trimmedDraft);
+        close();
+    }, [canApply, close, state, trimmedDraft]);
+    const onSubmit = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        apply();
+    }, [apply]);
+    const assetTypeLabel = state.assetType.charAt(0).toUpperCase() + state.assetType.slice(1);
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onEscape: close, onOutsideClick: close, panelStyle: panel, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Replace ${state.assetType}`, onClose: close }), jsx_runtime_1.jsx("div", { style: sourceSelector, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: items, needsWrapping: false, size: "compact" }) }), mode === 'project' ? (jsx_runtime_1.jsx(QuickSwitcherContent_1.QuickSwitcherContent, { assetSelection: state.assetSelection, compositionSelection: null, initialMode: "assets", invocationTimestamp: state.invocationTimestamp, readOnlyStudio: readOnlyStudio })) : (jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsxs("div", { style: state.assetType === 'image' ? urlContent : compactUrlContent, children: [
+                            jsx_runtime_1.jsxs("label", { htmlFor: "remotion-asset-url", style: label, children: [assetTypeLabel, " URL"] }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { id: "remotion-asset-url", autoFocus: true, onChange: (event) => setDraft(event.target.value), placeholder: `https://example.com/${state.assetType}`, rightAlign: false, status: invalidDraft ? 'error' : 'ok', type: "url", value: draft }), state.assetType === 'image' ? (jsx_runtime_1.jsxs("div", { style: previewRow, role: "status", children: [previewState.type === 'loaded' ? (jsx_runtime_1.jsx("img", { alt: "Image URL preview", src: trimmedDraft.startsWith('//')
+                                            ? `https:${trimmedDraft}`
+                                            : trimmedDraft, style: previewImage })) : null, jsx_runtime_1.jsx("div", { style: previewState.type === 'error'
+                                            ? { ...previewStatus, color: colors_1.FAIL_COLOR }
+                                            : previewStatus, children: previewState.type === 'empty'
+                                            ? 'Enter an image URL.'
+                                            : previewState.type === 'invalid'
+                                                ? 'Enter an HTTP(S) URL.'
+                                                : previewState.type === 'loading'
+                                                    ? 'Loading preview…'
+                                                    : previewState.type === 'error'
+                                                        ? 'Preview unavailable. You can still replace the source.'
+                                                        : `${previewState.width} × ${previewState.height}` })
+                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", flex: 1, justify: "flex-end", children: [
+                                jsx_runtime_1.jsx(Button_1.Button, { onClick: close, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { disabled: !canApply, onClick: apply, children: ["Replace ", state.assetType] })
+                            ] }) })
+                ] }))] }));
+};
+exports.AssetSelectorModal = AssetSelectorModal;

package/dist/components/Canvas.js

@@ -155,6 +155,7 @@ const Canvas = ({ canvasContent, size }) => {
     const [pendingElementInstallRequests, setPendingElementInstallRequests] = (0, react_1.useState)([]);
     const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
     const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
+    const unsupportedDropNotifiedRef = (0, react_1.useRef)(false);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
     const metadataRequestRef = (0, react_1.useRef)(0);
     const currentCompositionId = canvasContent.type === 'composition' ? canvasContent.compositionId : null;
@@ -622,7 +623,7 @@ const Canvas = ({ canvasContent, size }) => {
     }, [previewServerClientId, subscribeToEvent]);
     (0, react_1.useEffect)(() => {
         const onMessage = (event) => {
-            var _a, _b;
+            var _a, _b, _c;
             const elementLibrary = document.querySelector('iframe[data-remotion-element-library]');
             if (event.source !== (elementLibrary === null || elementLibrary === void 0 ? void 0 : elementLibrary.contentWindow) ||
                 !studio_protocol_1.StudioProtocolInternals.isAllowedStudioProtocolPageOrigin(event.origin)) {
@@ -646,7 +647,8 @@ const Canvas = ({ canvasContent, size }) => {
                     element: {
                         ...payload.element,
                         durationInFrames: (_a = payload.element.durationInFrames) !== null && _a !== void 0 ? _a : null,
-                        installationMode: (_b = payload.element.installationMode) !== null && _b !== void 0 ? _b : null,
+                        initialProps: (_b = payload.element.initialProps) !== null && _b !== void 0 ? _b : null,
+                        installationMode: (_c = payload.element.installationMode) !== null && _c !== void 0 ? _c : null,
                     },
                     from: null,
                     id: crypto.randomUUID(),
@@ -842,10 +844,17 @@ const Canvas = ({ canvasContent, size }) => {
         var _a;
         var _b;
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
+            unsupportedDropNotifiedRef.current = false;
             setCompositionDropPreview(null);
             return;
         }
         const mayBeCanvasCapture = (0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio;
+        const shouldNotifyAboutUnsupportedDrop = cannotAddSequence && !mayBeCanvasCapture;
+        if (shouldNotifyAboutUnsupportedDrop &&
+            !unsupportedDropNotifiedRef.current) {
+            (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
+        }
+        unsupportedDropNotifiedRef.current = shouldNotifyAboutUnsupportedDrop;
         if (!canDropAssets && !cannotAddSequence && !mayBeCanvasCapture) {
             setCompositionDropPreview(null);
             return;
@@ -938,14 +947,18 @@ const Canvas = ({ canvasContent, size }) => {
                 return;
             }
         }
+        unsupportedDropNotifiedRef.current = false;
         setCompositionDropPreview(null);
     }, []);
     const onDragEnd = (0, react_1.useCallback)(() => {
+        unsupportedDropNotifiedRef.current = false;
         setCompositionDropPreview(null);
     }, []);
     const onDrop = (0, react_1.useCallback)(async (event) => {
         var _a, _b;
         var _c, _d;
+        const unsupportedDropWasNotified = unsupportedDropNotifiedRef.current;
+        unsupportedDropNotifiedRef.current = false;
         setCompositionDropPreview(null);
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
@@ -974,7 +987,9 @@ const Canvas = ({ canvasContent, size }) => {
         if (cannotAddSequence) {
             event.preventDefault();
             event.stopPropagation();
-            (0, NotificationCenter_1.showNotification)('Cannot insert items into this composition component', 3000);
+            if (!unsupportedDropWasNotified) {
+                (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
+            }
             return;
         }
         if (!canDropAssets ||

package/dist/components/CheckboardToggle.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboardToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const no_react_1 = require("remotion/no-react");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const checkerboard_1 = require("../state/checkerboard");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
+const buttonStyle = { width: 26 };
 const CheckboardToggle = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const onClick = (0, react_1.useCallback)(() => {
@@ -17,14 +18,11 @@ const CheckboardToggle = () => {
         });
     }, [setCheckerboard]);
     const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleCheckerboard');
-    const accessibilityLabel = [
-        'Show transparency as checkerboard',
-        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || shortcut === '' ? null : `(${shortcut})`,
-    ]
-        .filter(no_react_1.NoReactInternals.truthy)
-        .join(' ');
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": checkerboard, onClick: onClick, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
-                jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : color, d: "M256 48h184c13.3 0 24 10.7 24 24v184H256V48zM48 256h208v208H72c-13.3 0-24-10.7-24-24V256z" }), jsx_runtime_1.jsx("rect", { x: "48", y: "48", width: "416", height: "416", rx: "24", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" }), jsx_runtime_1.jsx("path", { d: "M256 48v416M48 256h416", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" })
-            ] })) }));
+    const ariaKeyShortcuts = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleCheckerboard');
+    const accessibilityLabel = 'Show transparency as checkerboard';
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Checkerboard", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-pressed": checkerboard, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
+                    jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : color, d: "M256 48h184c13.3 0 24 10.7 24 24v184H256V48zM48 256h208v208H72c-13.3 0-24-10.7-24-24V256z" }), jsx_runtime_1.jsx("rect", { x: "48", y: "48", width: "416", height: "416", rx: "24", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" }), jsx_runtime_1.jsx("path", { d: "M256 48v416M48 256h416", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" })
+                ] })) }) }));
 };
 exports.CheckboardToggle = CheckboardToggle;

package/dist/components/ColorPicker/AlphaSlider.js

@@ -67,7 +67,7 @@ const AlphaSlider = ({ hue, saturation, value, alpha, onChange, onChangeComplete
                 updateFromEvent(ev.clientX, false);
             },
             onEnd: (reason, ev) => {
-                const shouldUseEndEvent = reason === 'pointerup' || reason === 'buttons-released';
+                const shouldUseEndEvent = (0, pointer_session_1.isPointerSessionRelease)(reason, ev);
                 updateFromEvent(shouldUseEndEvent && ev ? ev.clientX : lastClientX, true);
             },
         });

package/dist/components/ColorPicker/HueSlider.js

@@ -49,7 +49,7 @@ const HueSlider = ({ hue, onChange, onChangeComplete }) => {
                 updateFromEvent(ev.clientX, false);
             },
             onEnd: (reason, ev) => {
-                const shouldUseEndEvent = reason === 'pointerup' || reason === 'buttons-released';
+                const shouldUseEndEvent = (0, pointer_session_1.isPointerSessionRelease)(reason, ev);
                 updateFromEvent(shouldUseEndEvent && ev ? ev.clientX : lastClientX, true);
             },
         });

package/dist/components/ColorPicker/SaturationValueArea.js

@@ -63,7 +63,7 @@ const SaturationValueArea = ({ hue, saturation, value, onChange, onChangeComplet
                 updateFromEvent(ev.clientX, ev.clientY, false);
             },
             onEnd: (reason, ev) => {
-                const shouldUseEndEvent = reason === 'pointerup' || reason === 'buttons-released';
+                const shouldUseEndEvent = (0, pointer_session_1.isPointerSessionRelease)(reason, ev);
                 updateFromEvent(shouldUseEndEvent && ev ? ev.clientX : lastPosition.clientX, shouldUseEndEvent && ev ? ev.clientY : lastPosition.clientY, true);
             },
         });

package/dist/components/CompositionSelector.js

@@ -238,6 +238,7 @@ const CompositionSelector = () => {
                 dryRun: false,
                 signal: controller.signal,
                 symbolicatedStack: (0, composition_selector_drag_data_1.compositionSelectorDragDataToSymbolicatedStack)(dragData),
+                undoRedoNavigation: null,
             });
             if (result.success) {
                 notification.dismiss();

package/dist/components/CompositionSelectorItem.js

@@ -408,6 +408,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 dryRun: false,
                 signal: new AbortController().signal,
                 symbolicatedStack: (0, composition_selector_drag_data_1.compositionSelectorDragDataToSymbolicatedStack)(dragData),
+                undoRedoNavigation: null,
             });
             if (result.success) {
                 notification.dismiss();

package/dist/components/EditorGuides/Guide.js

@@ -128,7 +128,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
                 pointerDownPositionRef.current = null;
                 const shouldDeleteGuide = shouldDeleteGuideRef.current;
                 finishGuideInteraction();
-                if (shouldDeleteGuide || reason !== 'pointerup' || !endEvent) {
+                if (shouldDeleteGuide || !(0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     return;
                 }
                 if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({