@remotion/studio 4.0.518 → 4.0.520

package/dist/components/composition-drag-data.js

@@ -0,0 +1,232 @@
+"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.compositionDragDataToSymbolicatedStack = exports.parseCompositionDragData = exports.getCompositionDragPreviewMetadata = exports.makeCompositionDragData = void 0;
+const z = __importStar(require("zod/mini"));
+const REMOTION_DRAG_MIME_TYPE = 'application/vnd.remotion.drag+json';
+const DRAG_MIME_VERSION = 1;
+const MAX_MIME_TYPE_LENGTH = 512;
+const MAX_DIMENSION = 100000;
+const MAX_DURATION_IN_FRAMES = 100000000;
+const compositionIdSchema = z
+    .string()
+    .check(z.refine((value) => value.length > 0 &&
+    value.length < 500 &&
+    /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/.test(value)));
+const compositionFileSchema = z.nullable(z
+    .string()
+    .check(z.refine((value) => value.length > 0 &&
+    value.length < 2000 &&
+    !value.includes('\0') &&
+    !value.includes('\\') &&
+    !value.startsWith('/') &&
+    !value.split('/').includes('..'))));
+const compositionDragDataSchema = z.object({
+    type: z.literal('remotion-composition'),
+    version: z.literal(1),
+    compositionId: compositionIdSchema,
+    compositionFile: compositionFileSchema,
+});
+const parsePositiveNumber = (value, max) => {
+    if (!/^(?:[1-9]\d*|0\.\d+|[1-9]\d*\.\d+)$/.test(value)) {
+        return null;
+    }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) && parsed > 0 && parsed <= max ? parsed : null;
+};
+const parsePositiveInteger = (value, max) => {
+    if (!/^[1-9]\d*$/.test(value)) {
+        return null;
+    }
+    const parsed = Number(value);
+    return Number.isInteger(parsed) && parsed <= max ? parsed : null;
+};
+const parseCompositionDragMimeType = (mimeType) => {
+    if (mimeType.length > MAX_MIME_TYPE_LENGTH ||
+        !mimeType.startsWith(`${REMOTION_DRAG_MIME_TYPE};`)) {
+        return null;
+    }
+    const segments = mimeType.split(';');
+    if (segments.shift() !== REMOTION_DRAG_MIME_TYPE) {
+        return null;
+    }
+    const values = new Map();
+    for (const segment of segments) {
+        const separator = segment.indexOf('=');
+        if (separator === -1) {
+            return null;
+        }
+        const key = segment.slice(0, separator);
+        const value = segment.slice(separator + 1);
+        if (!['v', 'type', 'width', 'height', 'duration'].includes(key) ||
+            value === '' ||
+            values.has(key)) {
+            return null;
+        }
+        values.set(key, value);
+    }
+    if (values.get('v') !== String(DRAG_MIME_VERSION) ||
+        values.get('type') !== 'composition') {
+        return null;
+    }
+    const widthValue = values.get('width');
+    const heightValue = values.get('height');
+    if ((widthValue === undefined) !== (heightValue === undefined)) {
+        return null;
+    }
+    const width = widthValue === undefined
+        ? null
+        : parsePositiveNumber(widthValue, MAX_DIMENSION);
+    const height = heightValue === undefined
+        ? null
+        : parsePositiveNumber(heightValue, MAX_DIMENSION);
+    const durationValue = values.get('duration');
+    const durationInFrames = durationValue === undefined
+        ? null
+        : parsePositiveInteger(durationValue, MAX_DURATION_IN_FRAMES);
+    if (widthValue !== undefined && width === null) {
+        return null;
+    }
+    if (heightValue !== undefined && height === null) {
+        return null;
+    }
+    if (durationValue !== undefined && durationInFrames === null) {
+        return null;
+    }
+    return {
+        type: 'composition',
+        width,
+        height,
+        durationInFrames,
+        mimeType,
+    };
+};
+const makeCompositionDragData = ({ compositionFile, compositionId, width, height, durationInFrames, }) => {
+    if ((width === null) !== (height === null)) {
+        throw new TypeError('width and height must either both be numbers or both be null');
+    }
+    if (width !== null &&
+        (!Number.isFinite(width) || width <= 0 || width > MAX_DIMENSION)) {
+        throw new TypeError(`width and height must be numbers between 0 and ${MAX_DIMENSION}`);
+    }
+    if (height !== null &&
+        (!Number.isFinite(height) || height <= 0 || height > MAX_DIMENSION)) {
+        throw new TypeError(`width and height must be numbers between 0 and ${MAX_DIMENSION}`);
+    }
+    if (durationInFrames !== null &&
+        (!Number.isInteger(durationInFrames) ||
+            durationInFrames <= 0 ||
+            durationInFrames > MAX_DURATION_IN_FRAMES)) {
+        throw new TypeError(`durationInFrames must be an integer between 1 and ${MAX_DURATION_IN_FRAMES}`);
+    }
+    const data = {
+        type: 'remotion-composition',
+        version: 1,
+        compositionFile,
+        compositionId,
+    };
+    const segments = [
+        REMOTION_DRAG_MIME_TYPE,
+        `v=${DRAG_MIME_VERSION}`,
+        'type=composition',
+    ];
+    if (width !== null && height !== null) {
+        segments.push(`width=${width}`, `height=${height}`);
+    }
+    if (durationInFrames !== null) {
+        segments.push(`duration=${durationInFrames}`);
+    }
+    return {
+        mimeType: segments.join(';'),
+        payload: JSON.stringify(data),
+        data,
+    };
+};
+exports.makeCompositionDragData = makeCompositionDragData;
+const getCompositionDragPreviewMetadata = (mimeTypes) => {
+    for (let index = 0; index < mimeTypes.length; index++) {
+        const parsed = parseCompositionDragMimeType(mimeTypes[index]);
+        if (parsed !== null) {
+            return parsed;
+        }
+    }
+    return null;
+};
+exports.getCompositionDragPreviewMetadata = getCompositionDragPreviewMetadata;
+const parseCompositionDragData = (source) => {
+    const serialized = 'types' in source
+        ? (() => {
+            const preview = (0, exports.getCompositionDragPreviewMetadata)(source.types);
+            return preview === null
+                ? null
+                : {
+                    mimeType: preview.mimeType,
+                    payload: source.getData(preview.mimeType),
+                };
+        })()
+        : source;
+    if (serialized === null ||
+        parseCompositionDragMimeType(serialized.mimeType) === null) {
+        return null;
+    }
+    try {
+        const parsed = z.safeParse(compositionDragDataSchema, JSON.parse(serialized.payload));
+        return parsed.success
+            ? {
+                type: 'remotion-composition',
+                version: 1,
+                compositionFile: parsed.data.compositionFile,
+                compositionId: parsed.data.compositionId,
+            }
+            : null;
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.parseCompositionDragData = parseCompositionDragData;
+const compositionDragDataToSymbolicatedStack = (dragData) => {
+    if (dragData.compositionFile === null) {
+        return null;
+    }
+    return {
+        originalColumnNumber: null,
+        originalFileName: dragData.compositionFile,
+        originalFunctionName: null,
+        originalLineNumber: null,
+        originalScriptCode: null,
+    };
+};
+exports.compositionDragDataToSymbolicatedStack = compositionDragDataToSymbolicatedStack;

package/dist/components/drop-handler-data.d.ts

@@ -1,4 +1,5 @@
-import { type ComponentDragData, type CompositionDragData } from '@remotion/studio-protocol';
+import { type ComponentDragData } from '@remotion/studio-protocol';
+import { type CompositionDragData } from './composition-drag-data';
 export declare const isFileDragEvent: (event: DragEvent) => boolean;
 export declare const isAssetDragEvent: (event: DragEvent) => boolean;
 export declare const isComponentDragEvent: (event: DragEvent) => boolean;

package/dist/components/drop-handler-data.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSfxDragUrl = exports.getComponentDragData = exports.getCompositionDragData = exports.getAssetDragPath = exports.isSupportedDropEvent = exports.isRemoteAssetDragEvent = exports.isSfxDragEvent = exports.isElementDragEvent = exports.isCompositionDragEvent = exports.isComponentDragEvent = exports.isAssetDragEvent = exports.isFileDragEvent = void 0;
 const studio_protocol_1 = require("@remotion/studio-protocol");
 const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
+const composition_drag_data_1 = require("./composition-drag-data");
 const isFileDragEvent = (event) => {
     var _a;
     var _b;
@@ -23,7 +24,9 @@ const isComponentDragEvent = (event) => {
 };
 exports.isComponentDragEvent = isComponentDragEvent;
 const isCompositionDragEvent = (event) => {
-    return isRemotionDragEvent(event, 'composition');
+    var _a;
+    var _b;
+    return ((0, composition_drag_data_1.getCompositionDragPreviewMetadata)((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []) !== null);
 };
 exports.isCompositionDragEvent = isCompositionDragEvent;
 const isElementDragEvent = (event) => {
@@ -62,10 +65,9 @@ const getAssetDragPath = (event) => {
 };
 exports.getAssetDragPath = getAssetDragPath;
 const getCompositionDragData = (event) => {
-    const parsed = event.dataTransfer
-        ? studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer)
+    return event.dataTransfer
+        ? (0, composition_drag_data_1.parseCompositionDragData)(event.dataTransfer)
         : null;
-    return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'composition' ? parsed.data : null;
 };
 exports.getCompositionDragData = getCompositionDragData;
 const getComponentDragData = (event) => {

package/dist/components/effect-drag-and-drop.d.ts

@@ -1,4 +1,5 @@
 import { type EffectDragData } from '@remotion/studio-protocol';
+import { type EffectDefinition } from '@remotion/studio-shared';
 import type { SequencePropsSubscriptionKey } from 'remotion';
 export declare const hasEffectDragType: (dataTransfer: DataTransfer) => boolean;
 export declare const hasExplicitEffectDragType: (dataTransfer: DataTransfer) => boolean;
@@ -11,11 +12,7 @@ export declare const addEffectFromDragData: ({ clientId, dragData, fileName, nod
 }) => Promise<void>;
 export declare const addEffectToSequence: ({ clientId, effect, fileName, nodePath, }: {
     readonly clientId: string;
-    readonly effect: {
-        name: string;
-        importPath: string;
-        config: Record<string, unknown>;
-    };
+    readonly effect: EffectDefinition;
     readonly fileName: string;
     readonly nodePath: SequencePropsSubscriptionKey;
 }) => Promise<void>;

package/dist/components/get-open-in-menu-items.d.ts

@@ -2,6 +2,10 @@ import type { TerminalId } from '@remotion/studio-shared';
 import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getConfigureDefaultAppsMenuItems: ({ hasPreviousItems, onConfigureApps, }: {
+    readonly hasPreviousItems: boolean;
+    readonly onConfigureApps: (() => void) | null;
+}) => ComboboxValue[];
 export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInTerminal, }: {
     readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
     readonly editorDisabled: boolean;

package/dist/components/get-open-in-menu-items.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOpenInMenuItems = void 0;
+exports.getOpenInMenuItems = exports.getConfigureDefaultAppsMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const no_react_1 = require("remotion/no-react");
 const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
@@ -17,6 +17,28 @@ const menuLabel = {
     fontSize: 13,
     lineHeight: '16px',
 };
+const getConfigureDefaultAppsMenuItems = ({ hasPreviousItems, onConfigureApps, }) => {
+    if (!onConfigureApps) {
+        return [];
+    }
+    return [
+        ...(hasPreviousItems
+            ? [{ type: 'divider', id: 'open-in-settings-divider' }]
+            : []),
+        {
+            id: 'change-default-apps',
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Configure default apps..." }),
+            leftItem: null,
+            onClick: onConfigureApps,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: 'change-default-apps',
+        },
+    ];
+};
+exports.getConfigureDefaultAppsMenuItems = getConfigureDefaultAppsMenuItems;
 const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInTerminal, }) => {
     var _a, _b, _c, _d;
     const showFinder = window.remotion_fileSystemPlatform === 'darwin';
@@ -61,13 +83,7 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
             label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "GitHub.com" }),
             leftItem: jsx_runtime_1.jsx(github_1.GitHubIcon, { size: 18 }),
             onClick: () => {
-                const gitSource = window.remotion_gitSource;
-                if (!gitSource) {
-                    return;
-                }
-                window.open(folder || !location
-                    ? (0, get_git_menu_item_1.getGitSourceBranchUrl)(gitSource)
-                    : (0, get_git_menu_item_1.getGitRefUrl)(gitSource, location, window.remotion_cwd), '_blank');
+                (0, get_git_menu_item_1.openGitSource)({ folder, location });
             },
             quickSwitcherLabel: null,
             subMenu: null,
@@ -174,22 +190,10 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
                 ...systemApps,
             ]
             : []),
-        ...(onConfigureApps && (hasCategorizedApps || systemApps.length > 0)
-            ? [{ type: 'divider', id: 'open-in-settings-divider' }]
-            : []),
-        onConfigureApps
-            ? {
-                id: 'change-default-apps',
-                keyHint: null,
-                label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Change default apps..." }),
-                leftItem: null,
-                onClick: onConfigureApps,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'change-default-apps',
-            }
-            : null,
+        ...(0, exports.getConfigureDefaultAppsMenuItems)({
+            hasPreviousItems: hasCategorizedApps || systemApps.length > 0,
+            onConfigureApps,
+        }),
     ].filter(no_react_1.NoReactInternals.truthy);
 };
 exports.getOpenInMenuItems = getOpenInMenuItems;

package/dist/components/handle-drop.js

@@ -8,7 +8,7 @@ const element_install_request_1 = require("./element-install-request");
 const import_assets_1 = require("./import-assets");
 const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, localFiles, preferCompositionStart, }) => {
     var _a;
-    var _b;
+    var _b, _c, _d;
     if (localFiles !== null || (0, drop_handler_data_1.isFileDragEvent)(event)) {
         const files = localFiles !== null && localFiles !== void 0 ? localFiles : Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
         if (files.length === 0) {
@@ -88,7 +88,11 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             createdAt: Date.now(),
             compositionFile,
             compositionId,
-            element: element.element,
+            element: {
+                ...element.element,
+                durationInFrames: (_c = element.element.durationInFrames) !== null && _c !== void 0 ? _c : null,
+                installationMode: (_d = element.element.installationMode) !== null && _d !== void 0 ? _d : null,
+            },
             from: (0, import_assets_1.getFromForDrop)({
                 durationInFrames: element.element.durationInFrames,
                 from,

package/dist/components/import-assets.d.ts

@@ -1,6 +1,6 @@
-import { type CompositionDragData, type ComponentProp } from '@remotion/studio-protocol';
-import { type ElementInstallExpectedFileState, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
+import { type ElementInstallExpectedFileState, type FileType, type InsertableCompositionElementPosition, type InstallableElement } from '@remotion/studio-shared';
 import type { Dimensions } from '../helpers/is-current-selected-still';
+import type { CompositionDragData } from './composition-drag-data';
 export type InsertElementDropPosition = {
     readonly centerX: number;
     readonly centerY: number;
@@ -71,7 +71,7 @@ export declare const getComponentDimensions: (component: {
     dimensions?: import("@remotion/studio-protocol").ComponentDimensions | undefined;
     importName: string;
     importPath: string;
-    props: ComponentProp[];
+    props: import("@remotion/studio-protocol").ComponentProp[];
 }) => Dimensions | null;
 export declare const getDurationInFrames: ({ durationInSeconds, fps, }: {
     durationInSeconds: number | null;
@@ -139,7 +139,7 @@ export declare const insertComponent: ({ component, compositionFile, composition
         dimensions?: import("@remotion/studio-protocol").ComponentDimensions | undefined;
         importName: string;
         importPath: string;
-        props: ComponentProp[];
+        props: import("@remotion/studio-protocol").ComponentProp[];
     };
     compositionFile: string;
     compositionId: string;
@@ -158,15 +158,7 @@ export declare const insertComposition: ({ composition, compositionFile, composi
 export declare const insertElement: ({ compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }: {
     compositionFile: string;
     compositionId: string;
-    element: {
-        dependencies: import("@remotion/studio-protocol").ElementDependency[];
-        durationInFrames?: number | undefined;
-        installationMode?: import("@remotion/studio-protocol").ElementInstallationMode | undefined;
-        slug: string;
-        displayName: string;
-        sourceCode: string;
-        dimensions: import("@remotion/studio-protocol").ComponentDimensions | null;
-    };
+    element: InstallableElement;
     expectedFileState: ElementInstallExpectedFileState;
     position: InsertableCompositionElementPosition | null;
     from: number | null;

package/dist/components/root-composition-menu-items.d.ts

@@ -1,8 +1,11 @@
 import type { SetStateAction } from 'react';
+import type { CompositionSortOrder } from '../state/folders';
 import type { ModalState } from '../state/modals';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const getRootCompositionMenuItems: ({ connectionStatus, readOnlyStudio, setSelectedModal, }: {
+export declare const getRootCompositionMenuItems: ({ connectionStatus, readOnlyStudio, setSelectedModal, compositionSortOrder, setCompositionSortOrder, }: {
     connectionStatus: "connected" | "disconnected" | "init";
     readOnlyStudio: boolean;
     setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
+    compositionSortOrder: CompositionSortOrder;
+    setCompositionSortOrder: (sortOrder: CompositionSortOrder) => void;
 }) => ComboboxValue[];

package/dist/components/root-composition-menu-items.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRootCompositionMenuItems = void 0;
-const getRootCompositionMenuItems = ({ connectionStatus, readOnlyStudio, setSelectedModal, }) => {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Checkmark_1 = require("../icons/Checkmark");
+const getRootCompositionMenuItems = ({ connectionStatus, readOnlyStudio, setSelectedModal, compositionSortOrder, setCompositionSortOrder, }) => {
     return [
         {
             id: 'new-root-composition',
@@ -41,6 +43,41 @@ const getRootCompositionMenuItems = ({ connectionStatus, readOnlyStudio, setSele
             value: 'new-root-folder',
             disabled: readOnlyStudio || connectionStatus !== 'connected',
         },
+        {
+            id: 'sort-compositions-divider',
+            type: 'divider',
+        },
+        {
+            id: 'sort-compositions-header',
+            label: 'Sort',
+            type: 'section-header',
+        },
+        {
+            id: 'sort-compositions-registration',
+            keyHint: null,
+            label: 'As registered',
+            leftItem: compositionSortOrder === 'registration' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            onClick: () => {
+                setCompositionSortOrder('registration');
+            },
+            quickSwitcherLabel: 'Sort compositions as registered',
+            subMenu: null,
+            type: 'item',
+            value: 'registration',
+        },
+        {
+            id: 'sort-compositions-alphabetical',
+            keyHint: null,
+            label: 'Alphabetically',
+            leftItem: compositionSortOrder === 'alphabetical' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            onClick: () => {
+                setCompositionSortOrder('alphabetical');
+            },
+            quickSwitcherLabel: 'Sort compositions alphabetically',
+            subMenu: null,
+            type: 'item',
+            value: 'alphabetical',
+        },
     ];
 };
 exports.getRootCompositionMenuItems = getRootCompositionMenuItems;

package/dist/components/selected-outline-geometry.d.ts

@@ -1,2 +1,21 @@
-export { clampCanvasOutlineValue as clamp, mixCanvasOutlinePoints as mixPoint, mixCanvasOutlineValues as mix, } from '@remotion/canvas';
-export type { CanvasOutline as SelectedOutline, CanvasOutlinePoint as OutlinePoint, } from '@remotion/canvas';
+export type OutlinePoint = {
+    readonly x: number;
+    readonly y: number;
+};
+export type SelectedOutline = {
+    readonly key: string;
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    } | null;
+    readonly uncroppedPoints: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint] | null;
+    readonly points: readonly [
+        OutlinePoint,
+        OutlinePoint,
+        OutlinePoint,
+        OutlinePoint
+    ];
+};
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const mix: (from: number, to: number, progress: number) => number;
+export declare const mixPoint: (from: OutlinePoint, to: OutlinePoint, progress: number) => OutlinePoint;

package/dist/components/selected-outline-geometry.js

@@ -1,7 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mix = exports.mixPoint = exports.clamp = void 0;
-const canvas_1 = require("@remotion/canvas");
-Object.defineProperty(exports, "clamp", { enumerable: true, get: function () { return canvas_1.clampCanvasOutlineValue; } });
-Object.defineProperty(exports, "mixPoint", { enumerable: true, get: function () { return canvas_1.mixCanvasOutlinePoints; } });
-Object.defineProperty(exports, "mix", { enumerable: true, get: function () { return canvas_1.mixCanvasOutlineValues; } });
+exports.mixPoint = exports.mix = exports.clamp = void 0;
+const clamp = (value, min, max) => {
+    return Math.min(max, Math.max(min, value));
+};
+exports.clamp = clamp;
+const mix = (from, to, progress) => {
+    return from + (to - from) * progress;
+};
+exports.mix = mix;
+const mixPoint = (from, to, progress) => {
+    return {
+        x: (0, exports.mix)(from.x, to.x, progress),
+        y: (0, exports.mix)(from.y, to.y, progress),
+    };
+};
+exports.mixPoint = mixPoint;

package/dist/components/selected-outline-measurement.d.ts

@@ -1,4 +1,6 @@
-import type { OutlinePoint } from './selected-outline-geometry';
+import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+import type { OutlinePoint, SelectedOutline } from './selected-outline-geometry';
+import type { SelectedOutlineLayoutTarget, SequenceWithSelectedOutline } from './selected-outline-types';
 export declare const pointToString: (point: OutlinePoint) => string;
 export declare const midpoint: (from: OutlinePoint, to: OutlinePoint) => OutlinePoint;
 export declare const getOutlineCenter: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint]) => OutlinePoint;
@@ -26,6 +28,24 @@ export declare const getSelectedOutlineRotationPivot: ({ dimensions, points, tra
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
     readonly transformOriginValue: string;
 }) => OutlinePoint;
+type SvgViewport = {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+};
+type SvgScreenCtm = Pick<DOMMatrixReadOnly, 'a' | 'b' | 'c' | 'd' | 'e' | 'f'>;
+export declare const getTransformedSvgViewportPoints: ({ viewport, ctm, containerRect, }: {
+    readonly viewport: SvgViewport;
+    readonly ctm: SvgScreenCtm;
+    readonly containerRect: Pick<DOMRect, "left" | "top">;
+}) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+export declare const cropOutlinePoints: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], crop: {
+    readonly left: number;
+    readonly right: number;
+    readonly top: number;
+    readonly bottom: number;
+}) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
 export declare const getSelectedSequenceKeys: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Set<string>;
 export declare const getSequenceKeysContainingSelection: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Set<string>;
 export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
@@ -53,4 +73,23 @@ export type SelectedCropInfo = {
 export declare const getSelectedCropInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedCropInfo | null;
 export declare const getSelectedTransformOriginInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedTransformOriginInfo | null;
 export declare const getSelectedRotationInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedRotationInfo | null;
+export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, timelinePosition, }: {
+    readonly sequences: readonly TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
+    readonly timelinePosition: number;
+}) => SequenceWithSelectedOutline[];
+export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[], hoveredTimelineNodePathKey: string | null) => SelectedOutline[];
+export declare const measureOutlineTargets: (container: Element, targets: readonly {
+    readonly crop: {
+        readonly left: number;
+        readonly right: number;
+        readonly top: number;
+        readonly bottom: number;
+    };
+    readonly includeOutsideContainer: boolean;
+    readonly key: string;
+    readonly ref: import("react").RefObject<Element | null>;
+}[]) => SelectedOutline[];
+export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;
 export {};