@remotion/studio 4.0.502 → 4.0.503

package/dist/components/EditorGuides/Guide.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
 const editor_guide_selection_1 = require("../../helpers/editor-guide-selection");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const editor_guides_1 = require("../../state/editor-guides");
 const editor_rulers_1 = require("../../state/editor-rulers");
 const ContextMenu_1 = require("../ContextMenu");
@@ -12,7 +13,7 @@ const should_clear_selection_on_pointer_down_1 = require("../Timeline/should-cle
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const PADDING_FOR_EASY_DRAG = 4;
 const GuideComp = ({ guide, canvasDimensions, scale }) => {
-    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, setDraggingGuideId, setHoveredGuideId, hoveredGuideId, draggingGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, setDraggingGuideId, setHoveredGuideId, hoveredGuideId, draggingGuideId, moveGuidePointerRef, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { clearSelection, onSelect, selected } = (0, TimelineSelection_1.useTimelineGuideSelection)(guide.id);
     const pointerDownPositionRef = (0, react_1.useRef)(null);
     const hasMovedGuideRef = (0, react_1.useRef)(false);
@@ -61,36 +62,6 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
         selected,
         draggingGuideId,
     ]);
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        if (e.button !== 0) {
-            return;
-        }
-        e.stopPropagation();
-        e.currentTarget.setPointerCapture(e.pointerId);
-        hasMovedGuideRef.current = false;
-        pointerDownPositionRef.current = {
-            guideId: guide.id,
-            clientX: e.clientX,
-            clientY: e.clientY,
-        };
-        shouldCreateGuideRef.current = false;
-        setDraggingGuideId(() => guide.id);
-    }, [guide.id, setDraggingGuideId, shouldCreateGuideRef]);
-    const onMouseDown = (0, react_1.useCallback)((e) => {
-        if (e.button !== 0) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        hasMovedGuideRef.current = false;
-        pointerDownPositionRef.current = {
-            guideId: guide.id,
-            clientX: e.clientX,
-            clientY: e.clientY,
-        };
-        shouldCreateGuideRef.current = false;
-        setDraggingGuideId(() => guide.id);
-    }, [guide.id, setDraggingGuideId, shouldCreateGuideRef]);
     const updateHasMovedGuide = (0, react_1.useCallback)((clientX, clientY) => {
         const pointerDownPosition = pointerDownPositionRef.current;
         if (pointerDownPosition === null) {
@@ -105,12 +76,6 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             hasMovedGuideRef.current = true;
         }
     }, [guide.id]);
-    const onPointerMove = (0, react_1.useCallback)((e) => {
-        updateHasMovedGuide(e.clientX, e.clientY);
-    }, [updateHasMovedGuide]);
-    const onMouseMove = (0, react_1.useCallback)((e) => {
-        updateHasMovedGuide(e.clientX, e.clientY);
-    }, [updateHasMovedGuide]);
     const finishGuideInteraction = (0, react_1.useCallback)(() => {
         const shouldDeleteGuide = shouldDeleteGuideRef.current;
         setGuidesList((prevState) => {
@@ -136,43 +101,56 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
         shouldCreateGuideRef,
         shouldDeleteGuideRef,
     ]);
-    const onPointerUp = (0, react_1.useCallback)((e) => {
-        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-            e.currentTarget.releasePointerCapture(e.pointerId);
-        }
-        const pointerDownPosition = pointerDownPositionRef.current;
-        pointerDownPositionRef.current = null;
-        const shouldDeleteGuide = shouldDeleteGuideRef.current;
-        finishGuideInteraction();
-        if (shouldDeleteGuide) {
-            return;
-        }
-        if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({
-            pointerDownPosition,
-            guideId: guide.id,
-            clientX: e.clientX,
-            clientY: e.clientY,
-        })) {
-            onSelect();
-        }
-    }, [finishGuideInteraction, guide.id, onSelect, shouldDeleteGuideRef]);
-    const onMouseUp = (0, react_1.useCallback)((e) => {
-        const pointerDownPosition = pointerDownPositionRef.current;
-        pointerDownPositionRef.current = null;
-        const shouldDeleteGuide = shouldDeleteGuideRef.current;
-        finishGuideInteraction();
-        if (shouldDeleteGuide) {
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
             return;
         }
-        if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({
-            pointerDownPosition,
+        e.preventDefault();
+        e.stopPropagation();
+        hasMovedGuideRef.current = false;
+        pointerDownPositionRef.current = {
             guideId: guide.id,
             clientX: e.clientX,
             clientY: e.clientY,
-        })) {
-            onSelect();
-        }
-    }, [finishGuideInteraction, guide.id, onSelect, shouldDeleteGuideRef]);
+        };
+        shouldCreateGuideRef.current = false;
+        setDraggingGuideId(() => guide.id);
+        (0, pointer_session_1.startPointerSession)({
+            event: e.nativeEvent,
+            target: e.currentTarget,
+            onMove: (moveEvent) => {
+                var _a;
+                updateHasMovedGuide(moveEvent.clientX, moveEvent.clientY);
+                (_a = moveGuidePointerRef.current) === null || _a === void 0 ? void 0 : _a.call(moveGuidePointerRef, moveEvent);
+            },
+            onEnd: (reason, endEvent) => {
+                const pointerDownPosition = pointerDownPositionRef.current;
+                pointerDownPositionRef.current = null;
+                const shouldDeleteGuide = shouldDeleteGuideRef.current;
+                finishGuideInteraction();
+                if (shouldDeleteGuide || reason !== 'pointerup' || !endEvent) {
+                    return;
+                }
+                if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({
+                    pointerDownPosition,
+                    guideId: guide.id,
+                    clientX: endEvent.clientX,
+                    clientY: endEvent.clientY,
+                })) {
+                    onSelect();
+                }
+            },
+        });
+    }, [
+        finishGuideInteraction,
+        guide.id,
+        moveGuidePointerRef,
+        onSelect,
+        setDraggingGuideId,
+        shouldCreateGuideRef,
+        shouldDeleteGuideRef,
+        updateHasMovedGuide,
+    ]);
     const onClick = (0, react_1.useCallback)((e) => {
         if (e.button !== 0) {
             return;
@@ -180,10 +158,6 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
         e.preventDefault();
         e.stopPropagation();
     }, []);
-    const onPointerCancel = (0, react_1.useCallback)(() => {
-        pointerDownPositionRef.current = null;
-        finishGuideInteraction();
-    }, [finishGuideInteraction]);
     const isActive = selected || hoveredGuideId === guide.id;
     const activeClassName = isActive ? '__remotion_editor_guide_selected' : null;
     const guideClassName = (0, react_1.useMemo)(() => {
@@ -217,6 +191,6 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             },
         ];
     }, [clearSelection, guide.id, selected, setGuidesList]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, onOpen: null, children: jsx_runtime_1.jsx("div", { style: guideStyle, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, onClick: onClick, className: "__remotion_editor_guide", [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: guideClassName }) }) }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, onOpen: null, children: jsx_runtime_1.jsx("div", { style: guideStyle, onPointerDown: onPointerDown, onClick: onClick, className: "__remotion_editor_guide", [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: guideClassName }) }) }));
 };
 exports.default = (0, react_1.memo)(GuideComp);

package/dist/components/EditorRuler/Ruler.d.ts

@@ -12,6 +12,7 @@ interface RulerProps {
     readonly markingGaps: number;
     readonly orientation: 'horizontal' | 'vertical';
     readonly size: Size;
+    readonly onPointerSessionStart: (event: React.PointerEvent<HTMLCanvasElement>, guideId: string) => void;
 }
 declare const Ruler: React.FC<RulerProps>;
 export default Ruler;

package/dist/components/EditorRuler/Ruler.js

@@ -14,7 +14,7 @@ const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const makeGuideId = () => {
     return Math.random().toString(36).substring(7);
 };
-const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, orientation, }) => {
+const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, orientation, onPointerSessionStart, }) => {
     const rulerCanvasRef = (0, react_1.useRef)(null);
     const isVerticalRuler = orientation === 'vertical';
     const { shouldCreateGuideRef, setGuidesList, draggingGuideId, hoveredGuideId, setDraggingGuideId, guidesList, setEditorShowGuides, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
@@ -94,6 +94,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
                 },
             ];
         });
+        onPointerSessionStart(e, guideId);
     }, [
         shouldCreateGuideRef,
         setEditorShowGuides,
@@ -103,6 +104,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         originOffset,
         unsafeVideoConfig.id,
         cursor,
+        onPointerSessionStart,
     ]);
     return (jsx_runtime_1.jsx("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerDown: onPointerDown }));
 };

package/dist/components/EditorRuler/index.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const editor_ruler_1 = require("../../helpers/editor-ruler");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const use_studio_canvas_dimensions_1 = require("../../helpers/use-studio-canvas-dimensions");
 const editor_guides_1 = require("../../state/editor-guides");
 const editor_rulers_1 = require("../../state/editor-rulers");
@@ -30,7 +31,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         contentDimensions,
         assetMetadata,
     });
-    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, draggingGuideId, setDraggingGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, draggingGuideId, moveGuidePointerRef, setDraggingGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { clearSelection, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const rulerMarkingGaps = (0, react_1.useMemo)(() => {
         const minimumGap = editor_rulers_1.MINIMUM_RULER_MARKING_GAP_PX;
@@ -58,7 +59,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         scale,
     }), [verticalRulerScaleRange, rulerMarkingGaps, scale]);
     const requestAnimationFrameRef = (0, react_1.useRef)(null);
-    const onMouseMove = (0, react_1.useCallback)((e) => {
+    const onMouseMove = (0, react_1.useCallback)((e, guideId) => {
         if (requestAnimationFrameRef.current) {
             cancelAnimationFrame(requestAnimationFrameRef.current);
         }
@@ -75,7 +76,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                 }
                 setGuidesList((prevState) => {
                     const newGuides = prevState.map((guide) => {
-                        if (guide.id !== draggingGuideId) {
+                        if (guide.id !== guideId) {
                             return guide;
                         }
                         const desiredCursor = guide.orientation === 'vertical' ? 'ew-resize' : 'ns-resize';
@@ -96,7 +97,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                 setGuidesList((prevState) => {
                     // Intentionally no persist, only persist on mouse up
                     return prevState.map((guide) => {
-                        if (guide.id !== draggingGuideId) {
+                        if (guide.id !== guideId) {
                             return guide;
                         }
                         const position = guide.orientation === 'vertical'
@@ -119,24 +120,27 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         containerRef,
         shouldDeleteGuideRef,
         setGuidesList,
-        draggingGuideId,
         scale,
         canvasPosition.left,
         canvasPosition.top,
     ]);
-    const onMouseUp = (0, react_1.useCallback)(() => {
+    const finishGuideInteraction = (0, react_1.useCallback)((guideId) => {
+        if (requestAnimationFrameRef.current) {
+            cancelAnimationFrame(requestAnimationFrameRef.current);
+            requestAnimationFrameRef.current = null;
+        }
         const shouldDeleteGuide = shouldDeleteGuideRef.current;
         setGuidesList((prevState) => {
             const newGuides = prevState.filter((selected) => {
                 if (!shouldDeleteGuide) {
                     return true;
                 }
-                return selected.id !== draggingGuideId;
+                return selected.id !== guideId;
             });
             (0, editor_guides_1.persistGuidesList)(newGuides);
             return newGuides;
         });
-        const deletedGuideWasSelected = selectedItems.some((item) => item.type === 'guide' && item.guideId === draggingGuideId);
+        const deletedGuideWasSelected = selectedItems.some((item) => item.type === 'guide' && item.guideId === guideId);
         if (shouldDeleteGuide && deletedGuideWasSelected) {
             clearSelection();
         }
@@ -144,36 +148,35 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         shouldCreateGuideRef.current = false;
         setDraggingGuideId(() => null);
-        document.removeEventListener('pointerup', onMouseUp);
-        document.removeEventListener('pointercancel', onMouseUp);
-        document.removeEventListener('pointermove', onMouseMove);
     }, [
         clearSelection,
-        draggingGuideId,
         shouldCreateGuideRef,
         shouldDeleteGuideRef,
         setDraggingGuideId,
         setGuidesList,
-        onMouseMove,
         selectedItems,
     ]);
     (0, react_1.useLayoutEffect)(() => {
-        if (draggingGuideId !== null) {
-            document.addEventListener('pointermove', onMouseMove);
-            document.addEventListener('pointerup', onMouseUp);
-            document.addEventListener('pointercancel', onMouseUp);
-        }
+        moveGuidePointerRef.current = (event) => {
+            onMouseMove(event, draggingGuideId);
+        };
         return () => {
-            document.removeEventListener('pointermove', onMouseMove);
-            document.removeEventListener('pointerup', onMouseUp);
-            document.removeEventListener('pointercancel', onMouseUp);
+            moveGuidePointerRef.current = null;
             if (requestAnimationFrameRef.current) {
                 cancelAnimationFrame(requestAnimationFrameRef.current);
             }
         };
-    }, [draggingGuideId, onMouseMove, onMouseUp]);
+    }, [draggingGuideId, moveGuidePointerRef, onMouseMove]);
+    const onPointerSessionStart = (0, react_1.useCallback)((event, guideId) => {
+        (0, pointer_session_1.startPointerSession)({
+            event: event.nativeEvent,
+            target: event.currentTarget,
+            onMove: (moveEvent) => onMouseMove(moveEvent, guideId),
+            onEnd: () => finishGuideInteraction(guideId),
+        });
+    }, [finishGuideInteraction, onMouseMove]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { style: originBlockStyles }), jsx_runtime_1.jsx(Ruler_1.default, { orientation: "horizontal", scale: scale, points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.left, size: canvasSize }), jsx_runtime_1.jsx(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.top, size: canvasSize })
+            jsx_runtime_1.jsx("div", { style: originBlockStyles }), jsx_runtime_1.jsx(Ruler_1.default, { orientation: "horizontal", scale: scale, points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.left, size: canvasSize, onPointerSessionStart: onPointerSessionStart }), jsx_runtime_1.jsx(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.top, size: canvasSize, onPointerSessionStart: onPointerSessionStart })
         ] }));
 };
 exports.EditorRulers = EditorRulers;

package/dist/components/ElementInstallConfirmation.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const ElementInstallConfirmation: React.FC<{
+    readonly displayName: string;
+    readonly sourceLabel: string;
+    readonly sourceIsUnverified: boolean;
+    readonly compositionId: string;
+    readonly filePath: string;
+    readonly overwritesExistingFile: boolean;
+    readonly dependenciesToReview: string[];
+    readonly missingPackages: string[];
+    readonly sourceCode: string;
+}>;

package/dist/components/ElementInstallConfirmation.js

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementInstallConfirmation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const container = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 20,
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: 1.5,
+};
+const sectionStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+};
+const sectionTitleStyle = {
+    margin: 0,
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 600,
+    lineHeight: 1.5,
+};
+const metadataStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    margin: 0,
+};
+const metadataRowStyle = {
+    display: 'grid',
+    gridTemplateColumns: '100px minmax(0, 1fr)',
+    alignItems: 'baseline',
+    gap: 12,
+};
+const metadataTermStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 500,
+    lineHeight: 1.5,
+};
+const metadataDescriptionStyle = {
+    margin: 0,
+    minWidth: 0,
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 400,
+    lineHeight: 1.5,
+    overflowWrap: 'anywhere',
+};
+const unverifiedSourceStyle = {
+    ...metadataDescriptionStyle,
+    color: colors_1.WARNING_COLOR,
+};
+const codeStyle = {
+    color: 'inherit',
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: 1.5,
+};
+const overwriteStyle = {
+    margin: 0,
+    color: colors_1.WARNING_COLOR,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 500,
+    lineHeight: 1.5,
+};
+const dependencyListStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    margin: 0,
+    padding: 0,
+    listStyleType: 'none',
+};
+const dependencyRowStyle = {
+    display: 'flex',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    gap: 16,
+    minWidth: 0,
+};
+const dependencyNameStyle = {
+    minWidth: 0,
+    color: colors_1.WHITE,
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: 1.5,
+    overflowWrap: 'anywhere',
+};
+const dependencyInstallStatusStyle = {
+    flexShrink: 0,
+    color: colors_1.WARNING_COLOR,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 500,
+    lineHeight: 1.5,
+};
+const dependencyInstalledStatusStyle = {
+    ...dependencyInstallStatusStyle,
+    color: colors_1.LIGHT_TEXT,
+};
+const warningStyle = {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: 10,
+    minWidth: 0,
+};
+const warningIconStyle = {
+    width: 16,
+    height: 16,
+    marginTop: 1,
+    flexShrink: 0,
+    fill: colors_1.WARNING_COLOR,
+};
+const warningDescriptionStyle = {
+    margin: 0,
+    minWidth: 0,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 400,
+    lineHeight: 1.5,
+};
+const sourceDetailsStyle = {
+    paddingTop: 2,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: 1.5,
+};
+const sourceSummaryStyle = {
+    cursor: 'pointer',
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 500,
+    lineHeight: 1.5,
+};
+const sourceCodeBlockStyle = {
+    marginTop: 10,
+    marginBottom: 0,
+    maxHeight: 240,
+    overflow: 'auto',
+    padding: 12,
+    border: `1px solid ${colors_1.WHITE_ALPHA_12}`,
+    borderRadius: 6,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    color: colors_1.WHITE,
+    fontFamily: 'monospace',
+    fontSize: 12,
+    lineHeight: 1.5,
+    whiteSpace: 'pre',
+};
+const sourceCodeStyle = {
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+};
+const makeSourceControlsVisible = (sourceCode) => {
+    return sourceCode.replace(/[\u200b-\u200f\u202a-\u202e\u2066-\u2069\ufeff]/g, (character) => {
+        var _a;
+        return `\\u${(_a = character.codePointAt(0)) === null || _a === void 0 ? void 0 : _a.toString(16).padStart(4, '0')}`;
+    });
+};
+const ElementInstallConfirmation = ({ displayName, sourceLabel, sourceIsUnverified, compositionId, filePath, overwritesExistingFile, dependenciesToReview, missingPackages, sourceCode, }) => {
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsxs("dl", { style: metadataStyle, "aria-label": "Installation details", children: [
+                    jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Element" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: displayName })
+                        ] }), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Request source" }), jsx_runtime_1.jsx("dd", { style: sourceIsUnverified
+                                    ? unverifiedSourceStyle
+                                    : metadataDescriptionStyle, children: sourceLabel })
+                        ] }), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Composition" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: jsx_runtime_1.jsx("code", { style: codeStyle, children: compositionId }) })
+                        ] }), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Destination" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: jsx_runtime_1.jsx("code", { style: codeStyle, children: filePath }) })
+                        ] }), overwritesExistingFile ? (jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "File change" }), jsx_runtime_1.jsx("dd", { style: overwriteStyle, children: "Replace existing source file" })
+                        ] })) : null] }), dependenciesToReview.length > 0 ? (jsx_runtime_1.jsxs("section", { style: sectionStyle, "aria-labelledby": "element-install-dependencies", children: [
+                    jsx_runtime_1.jsx("h3", { id: "element-install-dependencies", style: sectionTitleStyle, children: "Dependencies" }), jsx_runtime_1.jsx("ul", { style: dependencyListStyle, role: "list", children: dependenciesToReview.map((packageName) => {
+                            const willInstall = missingPackages.includes(packageName);
+                            return (jsx_runtime_1.jsxs("li", { style: dependencyRowStyle, children: [
+                                    jsx_runtime_1.jsx("div", { style: dependencyNameStyle, children: packageName }), jsx_runtime_1.jsx("div", { style: willInstall
+                                            ? dependencyInstallStatusStyle
+                                            : dependencyInstalledStatusStyle, children: willInstall ? 'Will be installed' : 'Installed' })
+                                ] }, packageName));
+                        }) })
+                ] })) : null, jsx_runtime_1.jsxs("div", { style: warningStyle, children: [
+                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsx("p", { style: warningDescriptionStyle, children: "This adds executable source code to your project. Package lifecycle scripts may also run during installation, with access to your files and the network." })
+                ] }), jsx_runtime_1.jsxs("details", { style: sourceDetailsStyle, children: [
+                    jsx_runtime_1.jsx("summary", { style: sourceSummaryStyle, children: "Source code" }), jsx_runtime_1.jsx("pre", { style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: makeSourceControlsVisible(sourceCode) }) })
+                ] })
+        ] }));
+};
+exports.ElementInstallConfirmation = ElementInstallConfirmation;

package/dist/components/ForceSpecificCursor.js

@@ -40,7 +40,19 @@ const ref = react_1.default.createRef();
 const removeAutomaticCleanupListeners = () => {
     window.removeEventListener('pointerup', exports.stopForcingSpecificCursor, true);
     window.removeEventListener('pointercancel', exports.stopForcingSpecificCursor, true);
+    window.removeEventListener('pointermove', stopIfNoButtonsArePressed, true);
     window.removeEventListener('blur', exports.stopForcingSpecificCursor, true);
+    document.removeEventListener('visibilitychange', stopIfDocumentIsHidden);
+};
+const stopIfNoButtonsArePressed = (event) => {
+    if (event.buttons === 0) {
+        (0, exports.stopForcingSpecificCursor)();
+    }
+};
+const stopIfDocumentIsHidden = () => {
+    if (document.visibilityState === 'hidden') {
+        (0, exports.stopForcingSpecificCursor)();
+    }
 };
 const forceSpecificCursor = (cursor) => {
     if (!ref.current) {
@@ -53,7 +65,9 @@ const forceSpecificCursor = (cursor) => {
     // initiator so the cursor overlay can never remain stuck.
     window.addEventListener('pointerup', exports.stopForcingSpecificCursor, true);
     window.addEventListener('pointercancel', exports.stopForcingSpecificCursor, true);
+    window.addEventListener('pointermove', stopIfNoButtonsArePressed, true);
     window.addEventListener('blur', exports.stopForcingSpecificCursor, true);
+    document.addEventListener('visibilitychange', stopIfDocumentIsHidden);
 };
 exports.forceSpecificCursor = forceSpecificCursor;
 const stopForcingSpecificCursor = () => {

package/dist/components/InlineAction.d.ts

@@ -6,5 +6,6 @@ export type InlineActionProps = {
     readonly renderAction: RenderInlineAction;
     readonly title?: string;
     readonly unhoveredColor?: string;
+    readonly variant: 'compact' | null;
 };
-export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, variant, }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineAction.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, }) => {
+const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, variant, }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -21,7 +21,7 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
                 ? colors_1.TRANSPARENT
                 : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
             height: 24,
-            width: 24,
+            width: variant === 'compact' ? 14 : 24,
             padding: 0,
             display: 'inline-flex',
             justifyContent: 'center',
@@ -30,7 +30,7 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
             opacity: disabled ? 0.5 : 1,
             pointerEvents: disabled ? 'none' : 'auto',
         };
-    }, [disabled, hovered]);
+    }, [disabled, hovered, variant]);
     return (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InspectorLocationCopy.d.ts

@@ -4,4 +4,5 @@ export declare const InspectorLocationCopy: React.FC<{
     readonly children: React.ReactNode;
     readonly location: OriginalPosition | null;
     readonly name: string | null;
+    readonly openInEditorLocation: OriginalPosition | null;
 }>;

package/dist/components/InspectorLocationCopy.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const format_file_location_1 = require("../helpers/format-file-location");
 const clipboard_1 = require("../icons/clipboard");
 const InlineAction_1 = require("./InlineAction");
+const InspectorOpenInEditor_1 = require("./InspectorOpenInEditor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const row = {
     alignItems: 'center',
@@ -22,6 +23,8 @@ const content = {
     overflow: 'hidden',
 };
 const action = {
+    alignItems: 'center',
+    display: 'flex',
     flexShrink: 0,
     height: 24,
     marginLeft: 0,
@@ -32,7 +35,7 @@ const icon = {
     height: 12,
     width: 12,
 };
-const InspectorLocationCopy = ({ children, location, name }) => {
+const InspectorLocationCopy = ({ children, location, name, openInEditorLocation }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [focusedWithin, setFocusedWithin] = (0, react_1.useState)(false);
     const textToCopy = (0, react_1.useMemo)(() => {
@@ -56,10 +59,11 @@ const InspectorLocationCopy = ({ children, location, name }) => {
     }, [textToCopy]);
     const showAction = hovered || focusedWithin;
     return (jsx_runtime_1.jsxs("div", { style: row, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocus: () => setFocusedWithin(true), onBlur: () => setFocusedWithin(false), children: [
-            jsx_runtime_1.jsx("div", { style: content, children: children }), textToCopy ? (jsx_runtime_1.jsx("div", { style: {
+            jsx_runtime_1.jsx("div", { style: content, children: children }), textToCopy || openInEditorLocation ? (jsx_runtime_1.jsxs("div", { style: {
                     ...action,
                     opacity: showAction ? 1 : 0,
                     pointerEvents: showAction ? 'auto' : 'none',
-                }, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onCopy, renderAction: renderCopyAction, title: "Copy location for agents" }) })) : null] }));
+                }, children: [
+                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: openInEditorLocation }), textToCopy ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy location for agents" })) : null] })) : null] }));
 };
 exports.InspectorLocationCopy = InspectorLocationCopy;