@remotion/studio 4.0.516 → 4.0.518

package/dist/components/RadioButton.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
+const row = {
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: (0, colors_1.getBackgroundFromHoverState)({
+            hovered: true,
+            selected: false,
+        }),
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+    alignItems: 'center',
+    appearance: 'none',
+    border: 'none',
+    borderRadius: 4,
+    boxSizing: 'border-box',
+    cursor: 'default',
+    display: 'flex',
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    gap: 8,
+    lineHeight: '20px',
+    margin: '5px -8px',
+    padding: '4px 8px',
+    textAlign: 'left',
+    userSelect: 'none',
+    width: 'calc(100% + 16px)',
+};
+const circle = {
+    alignItems: 'center',
+    border: `1px solid ${colors_1.CURRENT_COLOR}`,
+    borderRadius: '50%',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexShrink: 0,
+    height: 20,
+    justifyContent: 'center',
+    width: 20,
+};
+const bullet = {
+    backgroundColor: colors_1.CURRENT_COLOR,
+    borderRadius: '50%',
+    height: 8,
+    width: 8,
+};
+const label = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: '20px',
+};
+const RadioButton = ({ checked, children, onClick }) => {
+    return (jsx_runtime_1.jsxs("button", { "aria-checked": checked, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onClick, role: "radio", style: row, type: "button", children: [
+            jsx_runtime_1.jsx("span", { style: circle, children: checked ? jsx_runtime_1.jsx("span", { style: bullet }) : null }), jsx_runtime_1.jsx("span", { style: label, children: children })
+        ] }));
+};
+exports.RadioButton = RadioButton;

package/dist/components/RenderButton.js

@@ -142,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
@@ -387,7 +388,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         showRenderLabel,
         tooltip,
     ]);
-    if (!video) {
+    if (!video || (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition') {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/RulersAndGuidesToggle.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const RulersAndGuidesToggle: React.FC;
+export declare const RulersAndGuidesToggle: React.FC<{
+    readonly showGuides: boolean;
+}>;

package/dist/components/RulersAndGuidesToggle.js

@@ -7,17 +7,28 @@ 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 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 || editorShowGuides;
+    const rulersOrGuidesAreVisible = editorShowRulers || (showGuides && 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';
+        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/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/SelectedOutlinePolygon.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import type { SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
 import { type SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineTarget } from './selected-outline-types';
-import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 export declare const SELECTED_OUTLINE_KEY_ATTR = "data-remotion-studio-selected-outline-key";
 export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly compositionHeight: number;
@@ -20,7 +19,7 @@ export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly onHoverChange: (key: string | null) => void;
     readonly onSnapPointsChange: (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
-    readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
+    readonly onSelect: (item: import("@remotion/canvas").CanvasSelectionItem, interaction: import("@remotion/canvas").CanvasSelectionInteraction) => void;
     readonly onDoubleClickTarget: (target: SelectedOutlineTarget, button: number, sequenceWasDragged: boolean) => boolean;
     readonly scale: number;
     readonly showSelectedOutline: boolean;

package/dist/components/SelectedOutlineRenderer.d.ts

@@ -1,15 +1,14 @@
 import React from 'react';
 import type { SelectedOutlineLayoutTarget, SelectedOutlineTarget } from './selected-outline-types';
-import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 export declare const SelectedOutlineRenderer: React.NamedExoticComponent<{
     readonly compositionHeight: number;
     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: TimelineSelection, interaction?: TimelineSelectionInteraction | undefined) => void;
+    readonly onSelect: (item: import("@remotion/canvas").CanvasSelectionItem, interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
     readonly scale: number;
     readonly sequences: readonly {
         readonly id: string;

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/SelectedOutlineUvControls.d.ts

@@ -7,7 +7,7 @@ export declare const getSelectedOutlineUvHandleTimelineSelection: ({ effectIndex
     readonly effectIndex: number;
     readonly fieldKey: string;
     readonly nodePathInfo: SequenceNodePathInfo;
-}) => TimelineSelection;
+}) => import("@remotion/canvas").CanvasSelectionItem;
 export declare const SelectedOutlineUvHandleConnectionLayer: React.FC<{
     readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
     readonly outline: SelectedOutline;

package/dist/components/SettingsModal.js

@@ -83,6 +83,6 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     }, [initialPublicLicenseKey, setPublicLicenseKey]);
     return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: render_modals_1.outerModalStyle, children: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                 jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Settings", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), showPackages ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" }))] }), openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, {}))] }) }));
+                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), showPackages ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" }))] }), openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/SettingsModalFooter.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const SettingsModalFooter: React.FC;
+export declare const SettingsModalFooter: React.FC<{
+    readonly showLicenseFaq: boolean;
+}>;

package/dist/components/SettingsModalFooter.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const InspectorOpenInEditor_1 = require("./InspectorOpenInEditor");
+const common_1 = require("./InspectorPanel/common");
 const layout_1 = require("./layout");
 const ModalFooter_1 = require("./ModalFooter");
 const footer = {
@@ -13,6 +14,7 @@ const footer = {
 const footerRow = {
     alignItems: 'center',
     display: 'flex',
+    justifyContent: 'space-between',
 };
 const configFileHint = {
     alignItems: 'center',
@@ -30,7 +32,14 @@ const configFileName = {
     fontWeight: 'bold',
     lineHeight: '20px',
 };
-const SettingsModalFooter = () => {
+const externalLinkIndicator = {
+    display: 'inline-block',
+    height: 12,
+    marginLeft: 4,
+    verticalAlign: -2,
+    width: 12,
+};
+const SettingsModalFooter = ({ showLicenseFaq }) => {
     const configFileLocation = (0, react_1.useMemo)(() => {
         return {
             source: 'remotion.config.ts',
@@ -38,8 +47,14 @@ const SettingsModalFooter = () => {
             column: 1,
         };
     }, []);
-    return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsx("div", { style: footerRow, children: jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
-                ] }) }) }));
+    const openLicenseFaq = (0, react_1.useCallback)(() => {
+        window.open('https://www.remotion.dev/docs/license/faq', '_blank', 'noopener,noreferrer');
+    }, []);
+    return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs("div", { style: footerRow, children: [
+                jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
+                    ] }), showLicenseFaq ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: openLicenseFaq, style: { flex: 'none', width: 'fit-content' }, title: "Open the Remotion License FAQ in a new tab", children: ["License FAQ",
+                        jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
+                    ] })) : null] }) }));
 };
 exports.SettingsModalFooter = SettingsModalFooter;

package/dist/components/ShowPixelGridProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ShowPixelGridProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/ShowPixelGridProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowPixelGridProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_pixel_grid_1 = require("../state/editor-pixel-grid");
+const ShowPixelGridProvider = ({ children }) => {
+    const [editorShowPixelGrid, setEditorShowPixelGridState] = (0, react_1.useState)(() => (0, editor_pixel_grid_1.loadEditorShowPixelGridOption)());
+    const setEditorShowPixelGrid = (0, react_1.useCallback)((newValue) => {
+        setEditorShowPixelGridState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_pixel_grid_1.persistEditorShowPixelGridOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorShowPixelGridCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorShowPixelGrid,
+            setEditorShowPixelGrid,
+        };
+    }, [editorShowPixelGrid, setEditorShowPixelGrid]);
+    return (jsx_runtime_1.jsx(editor_pixel_grid_1.EditorShowPixelGridContext.Provider, { value: editorShowPixelGridCtx, children: children }));
+};
+exports.ShowPixelGridProvider = ShowPixelGridProvider;

package/dist/components/SidebarCollapserControls.js

@@ -139,8 +139,8 @@ const SidebarCollapserControl = ({ side }) => {
         return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
     }, [colorStyle, rightIcon, toggleRightTooltip]);
     if (side === 'left') {
-        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleLeft, renderAction: toggleLeftAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleLeft, renderAction: toggleLeftAction, style: { marginRight: 4 } }));
     }
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleRight, renderAction: toggleRightAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleRight, renderAction: toggleRightAction }));
 };
 exports.SidebarCollapserControl = SidebarCollapserControl;

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;