@remotion/studio 4.0.517 → 4.0.518

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -5,32 +5,46 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
 const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const ellipsis_1 = require("../../icons/ellipsis");
 const modals_1 = require("../../state/modals");
+const InlineDropdown_1 = require("../InlineDropdown");
 const quickSwitcherArea = {
-    padding: '4px 4px 4px 8px',
+    padding: '4px 8px',
     borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
-    overflowY: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
 };
 const quickSwitcherTrigger = {
-    backgroundColor: colors_1.WHITE_ALPHA_06,
     borderRadius: 4,
     padding: '4px 10px 4px 12px',
-    color: colors_1.LIGHT_TEXT,
     fontSize: 12,
-    cursor: 'pointer',
+    cursor: 'default',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
     border: 'none',
-    width: '100%',
+    flex: 1,
     appearance: 'none',
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.WHITE_ALPHA_06,
+        hoverBackground: colors_1.WHITE_ALPHA_06,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+};
+const ellipsisSvgProps = {
+    style: {
+        height: 12,
+    },
 };
 const shortcutLabel = {
     fontSize: 11,
     opacity: 0.6,
 };
-const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex }) => {
+const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex, getActions }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const openQuickSwitcher = (0, react_1.useCallback)(() => {
         setSelectedModal({
@@ -41,6 +55,12 @@ const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex }) => {
             compositionSelection: null,
         });
     }, [mode, setSelectedModal]);
-    return (jsx_runtime_1.jsx("div", { style: quickSwitcherArea, className: "__remotion-vertical-scrollbar", children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", showShortcut && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] })) : null] }) }));
+    const renderMoreActions = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { svgProps: ellipsisSvgProps, fill: color });
+    }, []);
+    const moreActionsTitle = mode === 'assets' ? 'More asset actions' : 'More composition actions';
+    return (jsx_runtime_1.jsxs("div", { style: quickSwitcherArea, children: [
+            jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, children: ["Search...", showShortcut && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] })) : null] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: moreActionsTitle, renderAction: renderMoreActions, getItems: getActions, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
+        ] }));
 };
 exports.ExplorerQuickSwitcherTrigger = ExplorerQuickSwitcherTrigger;

package/dist/components/SelectedOutlineKeyboardControls.d.ts

@@ -1,7 +1,7 @@
+import type { CanvasSelectableOutline } from '@remotion/canvas';
 import type React from 'react';
-import type { getSequencesWithSelectableOutlines } from './selected-outline-measurement';
 import { type SelectedOutlineTarget } from './selected-outline-types';
 export declare const SelectedOutlineKeyboardControls: React.FC<{
     readonly getLatestOutlineTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
-    readonly getSelectableOutlines: () => ReturnType<typeof getSequencesWithSelectableOutlines>;
+    readonly getSelectableOutlines: () => readonly CanvasSelectableOutline[];
 }>;

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
-import { orderOutlinesForRendering } from './selected-outline-order';
-export { orderOutlinesForRendering };
 export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutline3DRotationDragValues, getSelectedOutlineActiveSchema, getSelectedOutlineCropDragChanges, getSelectedOutlineCropDragValues, getSelectedOutlineCropFollowingTransformOrigin, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginDragChanges, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
-export { getOutlineSelectionInteraction, getSelectedCropInfo, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
+export { getOutlineSelectionInteraction, getSelectedCropInfo, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';
 type SelectedOutlineOverlayProps = {

package/dist/components/SelectedOutlineOverlay.js

@@ -33,8 +33,9 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getSelectedCropInfo = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineActiveSchema = exports.getSelectedOutline3DRotationDragValues = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = exports.orderOutlinesForRendering = void 0;
+exports.SelectedOutlineOverlay = exports.selectedOutlineDragThresholdPx = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getSelectedCropInfo = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineActiveSchema = exports.getSelectedOutline3DRotationDragValues = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -50,8 +51,6 @@ const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
-const selected_outline_order_1 = require("./selected-outline-order");
-Object.defineProperty(exports, "orderOutlinesForRendering", { enumerable: true, get: function () { return selected_outline_order_1.orderOutlinesForRendering; } });
 const selected_outline_types_1 = require("./selected-outline-types");
 const SelectedOutlineKeyboardControls_1 = require("./SelectedOutlineKeyboardControls");
 const SelectedOutlineRenderer_1 = require("./SelectedOutlineRenderer");
@@ -94,8 +93,6 @@ Object.defineProperty(exports, "getSelectedOutlineRotationCornerInfo", { enumera
 Object.defineProperty(exports, "getSelectedOutlineRotationDeltaDegrees", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationDeltaDegrees; } });
 Object.defineProperty(exports, "getSelectedOutlineRotationPivot", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationPivot; } });
 Object.defineProperty(exports, "getSelectedSequenceKeys", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedSequenceKeys; } });
-Object.defineProperty(exports, "getSequencesWithSelectableOutlines", { enumerable: true, get: function () { return selected_outline_measurement_2.getSequencesWithSelectableOutlines; } });
-Object.defineProperty(exports, "getTransformedSvgViewportPoints", { enumerable: true, get: function () { return selected_outline_measurement_2.getTransformedSvgViewportPoints; } });
 const selected_outline_types_2 = require("./selected-outline-types");
 Object.defineProperty(exports, "selectedOutlineDragThresholdPx", { enumerable: true, get: function () { return selected_outline_types_2.selectedOutlineDragThresholdPx; } });
 const getEffectiveCropValue = ({ activeSchema, dragOverrides, fieldKey, frame, propStatuses, runtimeValues, }) => {
@@ -263,6 +260,7 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
             key,
             containsSelection,
             crop,
+            includeOutsideContainer: showSelectedOutline,
             keyframeDisplayOffset: nodeKeyframeDisplayOffset,
             nodePathInfo,
             ref: sequence.refForOutline,
@@ -533,25 +531,31 @@ const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurr
         controls.runtimeValues,
         outlineRuntimeSnapshots[index],
     ])), [outlineRuntimeControls, outlineRuntimeSnapshots]);
-    const outlineTargets = (0, react_1.useMemo)(() => calculateOutlineTargetsForCurrentState({
-        mode: 'layout',
-        runtimeValuesByStore: outlineRuntimeValuesByStore,
-        selectableOutlines: selectableOutlinesForLayout,
-        targetKey: null,
-        targetTimelinePosition: timelinePosition,
-    }), [
+    const outlineTargets = (0, react_1.useMemo)(() => {
+        const targets = calculateOutlineTargetsForCurrentState({
+            mode: 'layout',
+            runtimeValuesByStore: outlineRuntimeValuesByStore,
+            selectableOutlines: selectableOutlinesForLayout,
+            targetKey: null,
+            targetTimelinePosition: timelinePosition,
+        });
+        return targets.map((target) => {
+            const hovered = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(target.nodePathInfo.sequenceSubscriptionKey) === hoveredTimelineNodePathKey;
+            return hovered && !target.includeOutsideContainer
+                ? { ...target, includeOutsideContainer: true }
+                : target;
+        });
+    }, [
         calculateOutlineTargetsForCurrentState,
+        hoveredTimelineNodePathKey,
         outlineRuntimeValuesByStore,
         selectableOutlinesForLayout,
         timelinePosition,
     ]);
-    const outlineTargetsRef = (0, react_1.useRef)(outlineTargets);
-    const getOutlineTargets = (0, react_1.useCallback)(() => outlineTargetsRef.current, []);
     (0, react_1.useLayoutEffect)(() => {
-        outlineTargetsRef.current = outlineTargets;
         updateOutlinesRef.current();
     }, [outlineTargets, scale, translationX, translationY]);
-    return (jsx_runtime_1.jsx(SelectedOutlineRenderer_1.SelectedOutlineRenderer, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getOutlineTargets: getOutlineTargets, onDraggingChange: onDraggingChange, onContextMenuOpenChange: onContextMenuOpenChange, onSelect: onSelect, scale: scale, sequences: sequences, updateOutlinesRef: updateOutlinesRef }));
+    return (jsx_runtime_1.jsx(SelectedOutlineRenderer_1.SelectedOutlineRenderer, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, outlineTargets: outlineTargets, onDraggingChange: onDraggingChange, onContextMenuOpenChange: onContextMenuOpenChange, onSelect: onSelect, scale: scale, sequences: sequences, updateOutlinesRef: updateOutlinesRef }));
 };
 const ActiveSelectedOutlineOverlay = react_1.default.memo(ActiveSelectedOutlineOverlayUnmemoized);
 const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, compositionWidth, scale, translationX, translationY, }) => {
@@ -585,7 +589,7 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
             !editorShowOutlines) {
             return [];
         }
-        return (0, selected_outline_measurement_1.getSequencesWithSelectableOutlines)({
+        return (0, canvas_1.getCanvasSelectableOutlines)({
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
             compositions,

package/dist/components/SelectedOutlineRenderer.d.ts

@@ -5,7 +5,7 @@ export declare const SelectedOutlineRenderer: React.NamedExoticComponent<{
     readonly compositionWidth: number;
     readonly dragging: boolean;
     readonly getLatestOutlineTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
-    readonly getOutlineTargets: () => readonly SelectedOutlineLayoutTarget[];
+    readonly outlineTargets: readonly SelectedOutlineLayoutTarget[];
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly onContextMenuOpenChange: (open: boolean) => void;
     readonly onSelect: (item: import("@remotion/canvas").CanvasSelectionItem, interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;

package/dist/components/SelectedOutlineRenderer.js

@@ -35,12 +35,11 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectedOutlineRenderer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const react_1 = __importStar(require("react"));
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const ContextMenu_1 = require("./ContextMenu");
-const selected_outline_measurement_1 = require("./selected-outline-measurement");
-const selected_outline_order_1 = require("./selected-outline-order");
 const SelectedOutlineEditingHandles_1 = require("./SelectedOutlineEditingHandles");
 const SelectedOutlineElement_1 = require("./SelectedOutlineElement");
 const SelectedOutlinePolygon_1 = require("./SelectedOutlinePolygon");
@@ -53,17 +52,11 @@ const outlineContainer = {
     pointerEvents: 'none',
     overflow: 'visible',
 };
-const emptyRenderState = {
-    outlines: [],
-    targets: [],
-};
-const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getLatestOutlineTargetByKey, getOutlineTargets, onDraggingChange, onContextMenuOpenChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
+const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getLatestOutlineTargetByKey, outlineTargets, onDraggingChange, onContextMenuOpenChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
     var _a;
-    const [renderState, setRenderState] = (0, react_1.useState)(emptyRenderState);
+    const outlinesController = (0, canvas_1.useCanvasOutlinesController)();
+    const renderState = (0, canvas_1.useCanvasOutlines)(outlinesController);
     const overlayRef = (0, react_1.useRef)(null);
-    const resizeObserverRef = (0, react_1.useRef)(null);
-    const resizeObserverAnimationFrameRef = (0, react_1.useRef)(null);
-    const observedOutlineElementsRef = (0, react_1.useRef)(new Set());
     const contextMenuOpenHandlersRef = (0, react_1.useRef)(new Map());
     const registerContextMenuOpen = (0, react_1.useCallback)((key, handler) => {
         if (handler === null) {
@@ -90,24 +83,9 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const hoveredSequence = (0, timeline_sequence_hover_1.useTimelineSequenceHoverState)();
     const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
     const hoveredNodePathKey = (_a = hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.nodePathKey) !== null && _a !== void 0 ? _a : null;
-    const hoveredTimelineNodePathKey = (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline' ? hoveredNodePathKey : null;
     const updateOutlines = (0, react_1.useCallback)(() => {
-        const targets = getOutlineTargets();
-        if (overlayRef.current === null || targets.length === 0) {
-            setRenderState((prevState) => prevState.targets.length === 0 ? prevState : emptyRenderState);
-            return;
-        }
-        const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, targets, hoveredTimelineNodePathKey);
-        setRenderState((prevState) => {
-            const outlines = (0, selected_outline_measurement_1.outlinesAreEqual)(prevState.outlines, nextOutlines)
-                ? prevState.outlines
-                : nextOutlines;
-            if (prevState.targets === targets && prevState.outlines === outlines) {
-                return prevState;
-            }
-            return { outlines, targets };
-        });
-    }, [getOutlineTargets, hoveredTimelineNodePathKey]);
+        outlinesController.update(overlayRef.current, outlineTargets);
+    }, [outlineTargets, outlinesController]);
     (0, react_1.useLayoutEffect)(() => {
         updateOutlinesRef.current = updateOutlines;
         updateOutlines();
@@ -118,55 +96,8 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
         };
     }, [updateOutlines, updateOutlinesRef]);
     (0, react_1.useLayoutEffect)(() => {
-        if (typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        const resizeObserver = new ResizeObserver(() => {
-            if (resizeObserverAnimationFrameRef.current !== null) {
-                return;
-            }
-            resizeObserverAnimationFrameRef.current = requestAnimationFrame(() => {
-                resizeObserverAnimationFrameRef.current = null;
-                updateOutlinesRef.current();
-            });
-        });
-        resizeObserverRef.current = resizeObserver;
-        return () => {
-            if (resizeObserverAnimationFrameRef.current !== null) {
-                cancelAnimationFrame(resizeObserverAnimationFrameRef.current);
-                resizeObserverAnimationFrameRef.current = null;
-            }
-            resizeObserver.disconnect();
-            resizeObserverRef.current = null;
-            observedOutlineElementsRef.current = new Set();
-        };
-    }, [updateOutlinesRef]);
-    (0, react_1.useLayoutEffect)(() => {
-        const resizeObserver = resizeObserverRef.current;
-        if (resizeObserver === null) {
-            return;
-        }
-        const nextObservedElements = new Set();
-        if (overlayRef.current !== null) {
-            nextObservedElements.add(overlayRef.current);
-        }
-        for (const target of renderState.targets) {
-            if (target.ref.current !== null) {
-                nextObservedElements.add(target.ref.current);
-            }
-        }
-        for (const element of observedOutlineElementsRef.current) {
-            if (!nextObservedElements.has(element)) {
-                resizeObserver.unobserve(element);
-            }
-        }
-        for (const element of nextObservedElements) {
-            if (!observedOutlineElementsRef.current.has(element)) {
-                resizeObserver.observe(element);
-            }
-        }
-        observedOutlineElementsRef.current = nextObservedElements;
-    }, [renderState.targets]);
+        return () => outlinesController.disconnect();
+    }, [outlinesController]);
     const targetsByKey = (0, react_1.useMemo)(() => {
         return new Map(renderState.targets.map((target) => [target.key, target]));
     }, [renderState.targets]);
@@ -180,7 +111,7 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const outlineRenderingOrderRef = (0, react_1.useRef)([]);
     const outlinesForRendering = (0, react_1.useMemo)(() => {
         if (!dragging || outlineRenderingOrderRef.current.length === 0) {
-            const orderedOutlines = (0, selected_outline_order_1.orderOutlinesForRendering)({
+            const orderedOutlines = (0, canvas_1.orderCanvasOutlinesForRendering)({
                 outlines: renderState.outlines,
                 sequences,
                 targetsByKey,

package/dist/components/SidebarRenderButton.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
+const hoverable_1 = require("../helpers/hoverable");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
 const InlineAction_1 = require("./InlineAction");
@@ -87,6 +88,6 @@ const SidebarRenderButton = ({ composition, visible }) => {
     if (!visible || connectionStatus !== 'connected') {
         return null;
     }
-    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, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }));
 };
 exports.SidebarRenderButton = SidebarRenderButton;

package/dist/components/WebMcp.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const WebMcp: FC;