@remotion/studio 4.0.499 → 4.0.500

package/dist/components/QuickSwitcher/QuickSwitcher.js

@@ -3,7 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DismissableModal_1 = require("../NewComposition/DismissableModal");
 const QuickSwitcherContent_1 = require("./QuickSwitcherContent");
-const QuickSwitcher = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(QuickSwitcherContent_1.QuickSwitcherContent, { readOnlyStudio: readOnlyStudio, invocationTimestamp: invocationTimestamp, initialMode: initialMode }) }));
+const panelStyle = {
+    borderRadius: 6,
+    overflow: 'hidden',
+};
+const QuickSwitcher = ({ initialMode, invocationTimestamp, readOnlyStudio, assetSelection }) => {
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: jsx_runtime_1.jsx(QuickSwitcherContent_1.QuickSwitcherContent, { readOnlyStudio: readOnlyStudio, invocationTimestamp: invocationTimestamp, initialMode: initialMode, assetSelection: assetSelection }) }));
 };
 exports.default = QuickSwitcher;

package/dist/components/QuickSwitcher/QuickSwitcherContent.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
+import type { StaticFile } from '../../api/get-static-files';
 import type { QuickSwitcherMode } from './NoResults';
 export declare const QuickSwitcherContent: React.FC<{
     readonly initialMode: QuickSwitcherMode;
     readonly invocationTimestamp: number;
     readonly readOnlyStudio: boolean;
+    readonly assetSelection: {
+        readonly initialQuery: string;
+        readonly onSelected: (asset: StaticFile) => void;
+    } | null;
 }>;

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -5,7 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
+const get_preview_file_type_1 = require("../../helpers/get-preview-file-type");
 const is_composition_still_1 = require("../../helpers/is-composition-still");
+const url_state_1 = require("../../helpers/url-state");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const use_menu_structure_1 = require("../../helpers/use-menu-structure");
 const modals_1 = require("../../state/modals");
@@ -14,14 +16,18 @@ const KeyboardShortcutsExplainer_1 = require("../KeyboardShortcutsExplainer");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const RemInput_1 = require("../NewComposition/RemInput");
+const use_select_asset_1 = require("../use-select-asset");
+const use_static_files_1 = require("../use-static-files");
 const algolia_search_1 = require("./algolia-search");
 const AlgoliaCredit_1 = require("./AlgoliaCredit");
+const asset_search_1 = require("./asset-search");
 const fuzzy_search_1 = require("./fuzzy-search");
 const NoResults_1 = require("./NoResults");
 const QuickSwitcherResult_1 = require("./QuickSwitcherResult");
 const shared_1 = require("./shared");
 const input = {
     width: '100%',
+    borderRadius: 4,
 };
 const modeSelector = {
     paddingLeft: 16,
@@ -57,8 +63,12 @@ const content = {
     flexDirection: 'row',
     alignItems: 'center',
 };
+const contentWithoutModeSelector = {
+    ...content,
+    paddingTop: 16,
+};
 const stripQuery = (query) => {
-    if (query.startsWith('>') || query.startsWith('?')) {
+    if (query.startsWith('$') || query.startsWith('>') || query.startsWith('?')) {
         return query.substring(1).trim();
     }
     return query.trim();
@@ -68,9 +78,14 @@ const mapQueryToMode = (query) => {
         ? 'commands'
         : query.startsWith('?')
             ? 'docs'
-            : 'compositions';
+            : query.startsWith('$')
+                ? 'assets'
+                : 'compositions';
 };
 const mapModeToQuery = (mode) => {
+    if (mode === 'assets') {
+        return '$ ';
+    }
     if (mode === 'commands') {
         return '> ';
     }
@@ -82,28 +97,34 @@ const mapModeToQuery = (mode) => {
     }
     throw new Error('no mode' + mode);
 };
-const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
+const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio, assetSelection }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const [state, setState] = (0, react_1.useState)(() => {
         return {
-            query: mapModeToQuery(initialMode),
+            query: assetSelection === null
+                ? mapModeToQuery(initialMode)
+                : assetSelection.initialQuery,
             selectedIndex: 0,
         };
     });
     (0, react_1.useEffect)(() => {
         setState({
-            query: mapModeToQuery(initialMode),
+            query: assetSelection === null
+                ? mapModeToQuery(initialMode)
+                : assetSelection.initialQuery,
             selectedIndex: 0,
         });
-    }, [initialMode, invocationTimestamp]);
+    }, [assetSelection, initialMode, invocationTimestamp]);
     const inputRef = (0, react_1.useRef)(null);
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const closeMenu = (0, react_1.useCallback)(() => undefined, []);
     const actions = (0, use_menu_structure_1.useMenuStructure)(closeMenu, readOnlyStudio);
     const [docResults, setDocResults] = (0, react_1.useState)({ type: 'initial' });
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const mode = mapQueryToMode(state.query);
+    const mode = assetSelection !== null ? 'assets' : mapQueryToMode(state.query);
     const actualQuery = (0, react_1.useMemo)(() => {
         return stripQuery(state.query);
     }, [state.query]);
@@ -113,6 +134,12 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         }
         return (0, use_menu_structure_1.makeSearchResults)(actions, setSelectedModal);
     }, [actions, mode, setSelectedModal]);
+    const assetSearch = (0, react_1.useMemo)(() => {
+        return (0, asset_search_1.filterAssetsByType)({
+            assets: staticFiles,
+            query: actualQuery,
+        });
+    }, [actualQuery, staticFiles]);
     const resultsArray = (0, react_1.useMemo)(() => {
         if (mode === 'commands') {
             return (0, fuzzy_search_1.fuzzySearch)(actualQuery, menuActions);
@@ -120,6 +147,26 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         if (mode === 'docs' && docResults.type === 'results') {
             return docResults.results;
         }
+        if (mode === 'assets') {
+            return (0, fuzzy_search_1.fuzzySearch)(assetSearch.query, assetSearch.assets.map((asset) => {
+                return {
+                    id: 'asset-' + asset.name,
+                    title: asset.name,
+                    type: 'asset',
+                    fileType: (0, get_preview_file_type_1.getPreviewFileType)(asset.name),
+                    onSelected: () => {
+                        if (assetSelection !== null) {
+                            assetSelection.onSelected(asset);
+                        }
+                        else {
+                            selectAsset(asset.name);
+                            (0, url_state_1.pushUrl)(`/assets/${asset.name}`);
+                        }
+                        setSelectedModal(null);
+                    },
+                };
+            }));
+        }
         return (0, fuzzy_search_1.fuzzySearch)(actualQuery, compositions.map((c) => {
             return {
                 id: 'composition-' + c.id,
@@ -146,6 +193,9 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         compositions,
         menuActions,
         docResults,
+        assetSearch,
+        assetSelection,
+        selectAsset,
         selectComposition,
         setSelectedModal,
     ]);
@@ -244,6 +294,14 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         }));
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
+    const onAssetsSelected = (0, react_1.useCallback)(() => {
+        var _a;
+        setState((s) => ({
+            query: `$ ${stripQuery(s.query)}`,
+            selectedIndex: 0,
+        }));
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
     const onDocSearchSelected = (0, react_1.useCallback)(() => {
         var _a;
         setState((s) => ({
@@ -255,6 +313,13 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     }, []);
     const showKeyboardShortcuts = mode === 'docs' && actualQuery.trim() === '';
     const showSearchLoadingState = mode === 'docs' && docResults.type === 'loading';
+    const placeholder = mode === 'assets'
+        ? 'Search assets...'
+        : mode === 'commands'
+            ? 'Search actions...'
+            : mode === 'docs'
+                ? 'Search documentation...'
+                : 'Search compositions...';
     const container = (0, react_1.useMemo)(() => {
         return {
             width: showKeyboardShortcuts ? 800 : 500,
@@ -272,11 +337,10 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
             height: 300,
         };
     }, [showKeyboardShortcuts]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsxs("div", { style: modeSelector, children: [
-                    jsx_runtime_1.jsx("button", { onClick: onCompositionsSelected, style: mode === 'compositions' ? modeActive : modeInactive, type: "button", children: "Compositions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onActionsSelected, style: mode === 'commands' ? modeActive : modeInactive, type: "button", children: "Actions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onDocSearchSelected, style: mode === 'docs' ? modeActive : modeInactive, type: "button", children: "Documentation" })
-                ] }), jsx_runtime_1.jsxs("div", { style: content, children: [
-                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: input, autoFocus: true, status: "ok", value: state.query, onChange: onTextChange, placeholder: "Search compositions...", rightAlign: false }), showKeyboardShortcuts ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [assetSelection === null && (jsx_runtime_1.jsxs("div", { style: modeSelector, children: [
+                    jsx_runtime_1.jsx("button", { onClick: onCompositionsSelected, style: mode === 'compositions' ? modeActive : modeInactive, type: "button", children: "Compositions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onAssetsSelected, style: mode === 'assets' ? modeActive : modeInactive, type: "button", children: "Assets" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onActionsSelected, style: mode === 'commands' ? modeActive : modeInactive, type: "button", children: "Actions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onDocSearchSelected, style: mode === 'docs' ? modeActive : modeInactive, type: "button", children: "Documentation" })
+                ] })), jsx_runtime_1.jsxs("div", { style: assetSelection === null ? content : contentWithoutModeSelector, children: [
+                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: input, autoFocus: true, status: "ok", value: state.query, onChange: onTextChange, placeholder: placeholder, rightAlign: false }), showKeyboardShortcuts ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }),
                             " ",
                             jsx_runtime_1.jsx(AlgoliaCredit_1.AlgoliaCredit, {})

package/dist/components/QuickSwitcher/QuickSwitcherResult.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
+import type { AssetFileType } from '../../helpers/get-preview-file-type';
 type QuickSwitcherResultDetail = {
+    type: 'asset';
+    fileType: AssetFileType;
+} | {
     type: 'composition';
     compositionType: 'composition' | 'still';
 } | {

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -7,6 +7,7 @@ const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const still_1 = require("../../icons/still");
 const video_1 = require("../../icons/video");
+const AssetFileIcon_1 = require("../AssetFileIcon");
 const layout_1 = require("../layout");
 const shared_1 = require("./shared");
 const container = {
@@ -15,7 +16,11 @@ const container = {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    cursor: 'pointer',
+    cursor: 'default',
+    marginBottom: 1,
+    marginLeft: 4,
+    marginRight: 4,
+    borderRadius: 4,
 };
 const label = {
     whiteSpace: 'nowrap',
@@ -26,8 +31,9 @@ const searchLabel = {
     lineHeight: 1.25,
 };
 const iconStyle = {
-    width: 14,
-    height: 14,
+    width: 18,
+    height: 18,
+    flexShrink: 0,
 };
 const labelContainer = {
     overflow: 'hidden',
@@ -75,10 +81,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
-                selected,
-            }),
+            backgroundColor: hovered || selected ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
         };
     }, [hovered, selected]);
     const labelStyle = (0, react_1.useMemo)(() => {
@@ -92,7 +95,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
             fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
         };
     }, [hovered, result.type, selected]);
-    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : result.type === 'asset' ? (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: result.fileType, color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx("div", { 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {

package/dist/components/QuickSwitcher/asset-search.d.ts

@@ -0,0 +1,9 @@
+import type { StaticFile } from '../../api/get-static-files';
+export declare const filterAssetsByType: ({ assets, query, }: {
+    readonly assets: StaticFile[];
+    readonly query: string;
+}) => {
+    readonly assets: StaticFile[];
+    readonly query: string;
+};
+export declare const getAssetSearchQueryForComponent: (componentIdentity: string | null) => string;

package/dist/components/QuickSwitcher/asset-search.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAssetSearchQueryForComponent = exports.filterAssetsByType = void 0;
+const get_preview_file_type_1 = require("../../helpers/get-preview-file-type");
+const typeFilterRegex = /(^|\s)type:([^\s]+)/gi;
+const filterAssetsByType = ({ assets, query, }) => {
+    const typeFilters = [];
+    const queryWithoutTypeFilters = query
+        .replace(typeFilterRegex, (_match, whitespace, type) => {
+        typeFilters.push(type.toLowerCase());
+        return whitespace;
+    })
+        .replace(/\s+/g, ' ')
+        .trim();
+    if (typeFilters.length === 0) {
+        return {
+            assets,
+            query: queryWithoutTypeFilters,
+        };
+    }
+    return {
+        assets: assets.filter((asset) => {
+            return typeFilters.includes((0, get_preview_file_type_1.getPreviewFileType)(asset.name));
+        }),
+        query: queryWithoutTypeFilters,
+    };
+};
+exports.filterAssetsByType = filterAssetsByType;
+const componentAssetTypes = {
+    'dev.remotion.media.Audio': 'audio',
+    'dev.remotion.media.Video': 'video',
+    'dev.remotion.remotion.AnimatedImage': 'image',
+    'dev.remotion.remotion.Img': 'image',
+};
+const getAssetSearchQueryForComponent = (componentIdentity) => {
+    if (componentIdentity === null) {
+        return '';
+    }
+    const assetType = componentAssetTypes[componentIdentity];
+    return assetType ? `type:${assetType} ` : '';
+};
+exports.getAssetSearchQueryForComponent = getAssetSearchQueryForComponent;

package/dist/components/SelectedOutlineCropControls.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineTarget } from './selected-outline-types';
+export declare const SelectedOutlineCropControls: React.FC<{
+    readonly outline: SelectedOutline;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly target: SelectedOutlineTarget | undefined;
+}>;

package/dist/components/SelectedOutlineCropControls.js

@@ -0,0 +1,299 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedOutlineCropControls = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const selected_outline_drag_1 = require("./selected-outline-drag");
+const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_types_1 = require("./selected-outline-types");
+const selected_outline_uv_1 = require("./selected-outline-uv");
+const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const CROP_HANDLE_THICKNESS = 5;
+const CROP_HANDLE_LENGTH = 20;
+const CROP_HANDLE_HIT_WIDTH = 14;
+const CROPPED_AWAY_OPACITY = 0.35;
+const cropHandles = [
+    'top-left',
+    'top-right',
+    'bottom-left',
+    'bottom-right',
+    'top',
+    'right',
+    'bottom',
+    'left',
+];
+const cursorForHandle = (handle) => {
+    if (handle === 'top' || handle === 'bottom') {
+        return 'ns-resize';
+    }
+    if (handle === 'left' || handle === 'right') {
+        return 'ew-resize';
+    }
+    return handle === 'top-left' || handle === 'bottom-right'
+        ? 'nwse-resize'
+        : 'nesw-resize';
+};
+const moveTowards = (from, to, distance) => {
+    const vector = (0, selected_outline_measurement_1.vectorBetween)(from, to);
+    const length = (0, selected_outline_measurement_1.vectorLength)(vector);
+    if (length === 0) {
+        return from;
+    }
+    const progress = Math.min(1, distance / length);
+    return {
+        x: from.x + vector.x * progress,
+        y: from.y + vector.y * progress,
+    };
+};
+const pointString = (point) => `${point.x} ${point.y}`;
+const getCropHandlePath = ({ handle, points, }) => {
+    const [topLeft, topRight, bottomRight, bottomLeft] = points;
+    const cornerInfo = {
+        'top-left': { corner: topLeft, first: topRight, second: bottomLeft },
+        'top-right': { corner: topRight, first: topLeft, second: bottomRight },
+        'bottom-left': { corner: bottomLeft, first: topLeft, second: bottomRight },
+        'bottom-right': { corner: bottomRight, first: topRight, second: bottomLeft },
+    };
+    if (handle in cornerInfo) {
+        const info = cornerInfo[handle];
+        const length = Math.min(CROP_HANDLE_LENGTH, (0, selected_outline_measurement_1.vectorLength)((0, selected_outline_measurement_1.vectorBetween)(info.corner, info.first)) / 4, (0, selected_outline_measurement_1.vectorLength)((0, selected_outline_measurement_1.vectorBetween)(info.corner, info.second)) / 4);
+        const first = moveTowards(info.corner, info.first, length);
+        const second = moveTowards(info.corner, info.second, length);
+        return `M ${pointString(first)} L ${pointString(info.corner)} L ${pointString(second)}`;
+    }
+    const edgeInfo = {
+        top: [topLeft, topRight],
+        right: [topRight, bottomRight],
+        bottom: [bottomLeft, bottomRight],
+        left: [topLeft, bottomLeft],
+    };
+    const [start, end] = edgeInfo[handle];
+    const center = (0, selected_outline_measurement_1.midpoint)(start, end);
+    const halfLength = Math.min(CROP_HANDLE_LENGTH / 2, (0, selected_outline_measurement_1.vectorLength)((0, selected_outline_measurement_1.vectorBetween)(start, end)) / 8);
+    const pathStart = moveTowards(center, start, halfLength);
+    const pathEnd = moveTowards(center, end, halfLength);
+    return `M ${pointString(pathStart)} L ${pointString(pathEnd)}`;
+};
+const getCropValues = (target) => ({
+    cropLeft: target.fields.cropLeft.value,
+    cropRight: target.fields.cropRight.value,
+    cropTop: target.fields.cropTop.value,
+    cropBottom: target.fields.cropBottom.value,
+});
+const makeCropPreviewMask = (crop) => {
+    const x = crop.left * 100;
+    const y = crop.top * 100;
+    const width = Math.max(0, 1 - crop.left - crop.right) * 100;
+    const height = Math.max(0, 1 - crop.top - crop.bottom) * 100;
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none"><rect width="100" height="100" fill="white" fill-opacity="${CROPPED_AWAY_OPACITY}"/><rect x="${x}" y="${y}" width="${width}" height="${height}" fill="white"/></svg>`;
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+};
+const cropPreviewAttribute = 'data-remotion-studio-crop-preview';
+let cropPreviewId = 0;
+const useCropPreview = (target) => {
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        if (target === undefined || target.cropDrag === null) {
+            return;
+        }
+        const element = target.ref.current;
+        if (!(element instanceof HTMLElement || element instanceof SVGElement)) {
+            return;
+        }
+        const mask = makeCropPreviewMask(target.crop);
+        const previewId = String(++cropPreviewId);
+        const styleElement = element.ownerDocument.createElement('style');
+        styleElement.textContent = `
+[${cropPreviewAttribute}="${previewId}"] {
+	clip-path: none !important;
+	mask-image: ${mask} !important;
+	-webkit-mask-image: ${mask} !important;
+	mask-position: 0 0 !important;
+	-webkit-mask-position: 0 0 !important;
+	mask-repeat: no-repeat !important;
+	-webkit-mask-repeat: no-repeat !important;
+	mask-size: 100% 100% !important;
+	-webkit-mask-size: 100% 100% !important;
+}`;
+        // Do not mutate the inline crop style: React would still consider its
+        // clipPath prop applied and may not restore it when crop mode is closed.
+        element.setAttribute(cropPreviewAttribute, previewId);
+        ((_a = element.ownerDocument.head) !== null && _a !== void 0 ? _a : element.ownerDocument.documentElement).append(styleElement);
+        return () => {
+            if (element.getAttribute(cropPreviewAttribute) === previewId) {
+                element.removeAttribute(cropPreviewAttribute);
+            }
+            styleElement.remove();
+        };
+    }, [target]);
+};
+const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { cropDrag } = target;
+    const cursor = cursorForHandle(handle);
+    const path = (0, react_1.useMemo)(() => getCropHandlePath({ handle, points: outline.points }), [handle, outline.points]);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        var _a;
+        if (event.button !== 0 || cropDrag === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const svgRect = svg.getBoundingClientRect();
+        const uncroppedPoints = (_a = outline.uncroppedPoints) !== null && _a !== void 0 ? _a : outline.points;
+        const initialValues = getCropValues(cropDrag);
+        let lastValues = initialValues;
+        let dragStarted = false;
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            if (!dragStarted) {
+                dragStarted = true;
+                onDraggingChange(true);
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(cursor !== null && cursor !== void 0 ? cursor : 'default');
+            }
+            const uv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(uncroppedPoints, {
+                x: moveEvent.clientX - svgRect.left,
+                y: moveEvent.clientY - svgRect.top,
+            });
+            lastValues = (0, selected_outline_drag_1.getSelectedOutlineCropDragValues)({
+                crop: initialValues,
+                dimensions: outline.dimensions,
+                handle,
+                uv,
+            });
+            const transformOrigin = (0, selected_outline_drag_1.getSelectedOutlineCropFollowingTransformOrigin)({
+                dimensions: outline.dimensions,
+                initialCrop: initialValues,
+                nextCrop: lastValues,
+                transformOrigin: cropDrag.transformOrigin,
+            });
+            for (const fieldKey of Object.values(selected_outline_types_1.cropFieldKeys)) {
+                const field = cropDrag.fields[fieldKey];
+                const value = lastValues[fieldKey];
+                if (value === field.value) {
+                    continue;
+                }
+                setDragOverrides(cropDrag.nodePath, fieldKey, field.propStatus.status === 'keyframed'
+                    ? remotion_1.Internals.makeKeyframedDragOverride({
+                        status: field.propStatus,
+                        frame: cropDrag.sourceFrame,
+                        value,
+                    })
+                    : remotion_1.Internals.makeStaticDragOverride(value));
+            }
+            if (transformOrigin !== null) {
+                setDragOverrides(cropDrag.nodePath, selected_outline_types_1.transformOriginFieldKey, remotion_1.Internals.makeStaticDragOverride(transformOrigin));
+            }
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerUp);
+            if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
+            const changes = (0, selected_outline_drag_1.getSelectedOutlineCropDragChanges)({
+                dimensions: outline.dimensions,
+                target: cropDrag,
+                values: lastValues,
+            });
+            const staticChanges = changes.filter((change) => change.type === 'static');
+            const keyframedChanges = changes.filter((change) => change.type === 'keyframed');
+            const promise = staticChanges.length === 0
+                ? (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
+                    setPropStatuses,
+                    clientId: cropDrag.clientId,
+                })
+                : (0, save_sequence_prop_1.saveSequenceProps)({
+                    changes: staticChanges,
+                    addedKeyframes: keyframedChanges,
+                    movedKeyframes: null,
+                    setPropStatuses,
+                    clientId: cropDrag.clientId,
+                    undoLabel: 'Crop sequence',
+                    redoLabel: 'Crop sequence back',
+                });
+            promise
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not save crop: ${err instanceof Error ? err.message : String(err)}`, 4000);
+            })
+                .finally(() => {
+                clearDragOverrides(cropDrag.nodePath);
+            });
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    }, [
+        clearDragOverrides,
+        cropDrag,
+        cursor,
+        handle,
+        onDraggingChange,
+        outline.dimensions,
+        outline.points,
+        outline.uncroppedPoints,
+        setDragOverrides,
+        setPropStatuses,
+    ]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.TRANSPARENT, strokeWidth: CROP_HANDLE_HIT_WIDTH, strokeLinejoin: "miter", vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: cursor, onPointerDown: onPointerDown }), jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.BLUE, strokeWidth: CROP_HANDLE_THICKNESS, strokeLinejoin: "miter", strokeLinecap: "butt", vectorEffect: "non-scaling-stroke", pointerEvents: "none", style: { filter: colors_1.SELECTED_OUTLINE_DROP_SHADOW } })
+        ] }));
+};
+const SelectedOutlineCropControls = ({ outline, onDraggingChange, target }) => {
+    useCropPreview(target);
+    if ((target === null || target === void 0 ? void 0 : target.cropDrag) === null || (target === null || target === void 0 ? void 0 : target.cropDrag) === undefined) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("g", { "aria-hidden": "true", children: cropHandles.map((handle) => (jsx_runtime_1.jsx(CropHandle, { handle: handle, outline: outline, onDraggingChange: onDraggingChange, target: target }, handle))) }));
+};
+exports.SelectedOutlineCropControls = SelectedOutlineCropControls;