@remotion/studio 4.0.518 → 4.0.519

package/dist/helpers/get-box-quads-ponyfill.d.ts

@@ -0,0 +1,10 @@
+export type GetBoxQuadsBox = 'margin' | 'border' | 'padding' | 'content';
+export type GetBoxQuadsPonyfillOptions = {
+    readonly box?: GetBoxQuadsBox;
+    readonly relativeTo?: Element;
+};
+/**
+ * Returns border/margin/padding/content box quads for an element.
+ * Uses the native API when available, otherwise the getBoxQuads ponyfill.
+ */
+export declare const getBoxQuadsPonyfill: (element: Element, options?: GetBoxQuadsPonyfillOptions | undefined) => readonly DOMQuad[] | null;

package/dist/helpers/get-box-quads-ponyfill.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBoxQuadsPonyfill = void 0;
+const get_box_quads_polyfill_internals_js_1 = require("./get-box-quads-polyfill-internals.js");
+const hasNativeGetBoxQuads = (element) => {
+    return (typeof element.getBoxQuads === 'function');
+};
+/**
+ * Returns border/margin/padding/content box quads for an element.
+ * Uses the native API when available, otherwise the getBoxQuads ponyfill.
+ */
+const getBoxQuadsPonyfill = (element, options) => {
+    try {
+        if (hasNativeGetBoxQuads(element)) {
+            return element.getBoxQuads(options);
+        }
+        return (0, get_box_quads_polyfill_internals_js_1.getBoxQuads)(element, options);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.getBoxQuadsPonyfill = getBoxQuadsPonyfill;

package/dist/helpers/get-git-menu-item.d.ts

@@ -4,4 +4,9 @@ import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-
 export declare const getGitSourceName: (gitSource: GitSource) => string;
 export declare const getGitSourceBranchUrl: (gitSource: GitSource) => string;
 export declare const getGitRefUrl: (gitSource: GitSource, originalLocation: OriginalPosition, remotionRoot: string) => string;
+export declare const hasReadOnlyGitSource: () => boolean;
+export declare const openGitSource: ({ folder, location, }: {
+    folder: boolean;
+    location: OriginalPosition | null;
+}) => void;
 export declare const getGitMenuItem: () => ComboboxValue | null;

package/dist/helpers/get-git-menu-item.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getGitMenuItem = exports.getGitRefUrl = exports.getGitSourceBranchUrl = exports.getGitSourceName = void 0;
+exports.getGitMenuItem = exports.openGitSource = exports.hasReadOnlyGitSource = exports.getGitRefUrl = exports.getGitSourceBranchUrl = exports.getGitSourceName = void 0;
 const getGitSourceName = (gitSource) => {
     if (gitSource.type === 'github') {
         return 'GitHub';
@@ -52,6 +52,20 @@ const getGitRefUrl = (gitSource, originalLocation, remotionRoot) => {
     throw new Error('Unknown git source type');
 };
 exports.getGitRefUrl = getGitRefUrl;
+const hasReadOnlyGitSource = () => {
+    return Boolean(window.remotion_isReadOnlyStudio && window.remotion_gitSource);
+};
+exports.hasReadOnlyGitSource = hasReadOnlyGitSource;
+const openGitSource = ({ folder, location, }) => {
+    const gitSource = window.remotion_gitSource;
+    if (!gitSource) {
+        return;
+    }
+    window.open(folder || !location
+        ? (0, exports.getGitSourceBranchUrl)(gitSource)
+        : (0, exports.getGitRefUrl)(gitSource, location, window.remotion_cwd), '_blank');
+};
+exports.openGitSource = openGitSource;
 const getGitMenuItem = () => {
     if (!window.remotion_gitSource) {
         return null;

package/dist/helpers/hoverable.js

@@ -50,18 +50,23 @@ const makeHoverableCSS = () => `
   }
 
   @media (hover: hover) {
-    ${hoverable}:hover,
-    ${hoverGroup}:hover ${hoverable} {
+    ${hoverable}:hover {
       background-color: var(${HOVER_BG_VARIABLE}, var(${BG_VARIABLE}, ${colors_1.TRANSPARENT}));
     }
 
     ${hoverable}:hover,
-    ${hoverable}:hover *,
-    ${hoverGroup}:hover ${hoverable},
-    ${hoverGroup}:hover ${hoverable} * {
+    ${hoverable}:hover * {
       color: var(${HOVER_COLOR_VARIABLE}, var(${COLOR_VARIABLE}, inherit));
     }
 
+    /* An outer hoverable must not put a nested inline action into its hover
+       state. The nested action should only use its hover color when the
+       pointer is over the action itself. */
+    ${hoverable}:hover ${hoverable}:not(:hover),
+    ${hoverable}:hover ${hoverable}:not(:hover) * {
+      color: var(${COLOR_VARIABLE}, inherit);
+    }
+
     ${hoverGroup} ${reveal} {
       opacity: 0;
     }

package/dist/helpers/open-in-editor.js

@@ -1,8 +1,42 @@
 "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.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.openOriginalPositionInEditor = exports.openInGitClient = exports.openInTerminal = exports.openInCodingAgent = exports.openInEditor = void 0;
 const react_1 = require("react");
 const call_api_1 = require("../components/call-api");
+const get_stack_1 = require("../components/Timeline/TimelineStack/get-stack");
 const browser_studio_operations_1 = require("./browser-studio-operations");
 const openInEditor = (stack, editorId) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
@@ -125,7 +159,23 @@ const loadCompositionComponentInfo = async ({ compositionFile, compositionId, })
         const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
         const body = browserStudioOperations
             ? await browserStudioOperations.getCompositionComponentInfo(request)
-            : await (0, call_api_1.callApi)('/api/composition-component-info', request);
+            : typeof window !== 'undefined' && window.remotion_isReadOnlyStudio
+                ? await (async () => {
+                    const files = (0, get_stack_1.getSourceMapFilesForSource)(compositionFile);
+                    if (files === null) {
+                        throw new Error(`Could not find source map contents for ${compositionFile}`);
+                    }
+                    const { resolveCompositionComponentLocation } = await Promise.resolve().then(() => __importStar(require('@remotion/studio-codemods/resolve-composition-component-location')));
+                    return {
+                        canAddSequence: false,
+                        location: resolveCompositionComponentLocation({
+                            compositionFile,
+                            compositionId,
+                            project: { files, rootDir: '.' },
+                        }),
+                    };
+                })()
+                : await (0, call_api_1.callApi)('/api/composition-component-info', request);
         const result = {
             location: body.location,
             canAddSequence: body.canAddSequence,

package/dist/helpers/preview-server-events.js

@@ -90,6 +90,9 @@ const ensurePreviewServerEventSource = () => {
     if (connectToBrowserStudio()) {
         return;
     }
+    if (window.remotion_isReadOnlyStudio) {
+        return;
+    }
     if (typeof EventSource === 'undefined') {
         return;
     }

package/dist/helpers/timeline-layout.d.ts

@@ -62,7 +62,6 @@ export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExp
 export declare const TIMELINE_LAYER_FILMSTRIP_HEIGHT = 26;
 export declare const TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 17;
 export declare const TIMELINE_LAYER_HEIGHT_VIDEO: number;
-export declare const TIMELINE_LAYER_HEIGHT_IMAGE = 26;
 export declare const TIMELINE_LAYER_HEIGHT_AUDIO = 34;
 export declare const TIMELINE_LAYER_HEIGHT_DEFAULT = 21;
 export declare const TIMELINE_LIST_ITEM_ROW_HEIGHT = 21;

package/dist/helpers/timeline-layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineLayerHeight = exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = exports.TIMELINE_LAYER_HEIGHT_DEFAULT = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getSchemaFieldGroup = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_GROUPS = void 0;
+exports.getTimelineLayerHeight = exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = exports.TIMELINE_LAYER_HEIGHT_DEFAULT = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getSchemaFieldGroup = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_GROUPS = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const studio_shared_2 = require("@remotion/studio-shared");
 Object.defineProperty(exports, "SCHEMA_FIELD_GROUPS", { enumerable: true, get: function () { return studio_shared_2.SCHEMA_FIELD_GROUPS; } });
@@ -162,7 +162,6 @@ exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = 26;
 // The waveform stripe rendered underneath the filmstrip in TimelineVideoInfo.
 exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 17;
 exports.TIMELINE_LAYER_HEIGHT_VIDEO = 2 + exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT + exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT;
-exports.TIMELINE_LAYER_HEIGHT_IMAGE = 26;
 exports.TIMELINE_LAYER_HEIGHT_AUDIO = 34;
 exports.TIMELINE_LAYER_HEIGHT_DEFAULT = 21;
 // The horizontal row inside a timeline list item (eye + arrow + label).
@@ -171,9 +170,6 @@ const getTimelineLayerHeight = (type) => {
     if (type === 'video') {
         return exports.TIMELINE_LAYER_HEIGHT_VIDEO;
     }
-    if (type === 'image') {
-        return exports.TIMELINE_LAYER_HEIGHT_IMAGE;
-    }
     if (type === 'audio') {
         return exports.TIMELINE_LAYER_HEIGHT_AUDIO;
     }

package/dist/helpers/url-state.d.ts

@@ -1,3 +1,4 @@
+export declare const getNavigationWindow: () => Window;
 export declare const getUrlForRoute: (route: string) => string;
 export declare const pushUrl: (url: string) => void;
 export declare const replaceUrl: (url: string) => void;

package/dist/helpers/url-state.js

@@ -1,25 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRoute = exports.reloadUrl = exports.clearUrl = exports.replaceUrl = exports.pushUrl = exports.getUrlForRoute = void 0;
+exports.getRoute = exports.reloadUrl = exports.clearUrl = exports.replaceUrl = exports.pushUrl = exports.getUrlForRoute = exports.getNavigationWindow = void 0;
 const getUrlHandlingType = () => {
     if (window.remotion_isReadOnlyStudio || window.remotion_browserStudio) {
         return 'query-string';
     }
     return 'spa';
 };
+const getNavigationWindow = () => {
+    if (window.remotion_browserStudio && window.parent !== window) {
+        return window.parent;
+    }
+    return window;
+};
+exports.getNavigationWindow = getNavigationWindow;
 const getUrlForRoute = (route) => {
     if (getUrlHandlingType() === 'query-string') {
-        return `${window.location.pathname}?${route}`;
+        return `${(0, exports.getNavigationWindow)().location.pathname}?${route}`;
     }
     return route;
 };
 exports.getUrlForRoute = getUrlForRoute;
 const pushUrl = (url) => {
-    window.history.pushState({}, 'Studio', (0, exports.getUrlForRoute)(url));
+    (0, exports.getNavigationWindow)().history.pushState({}, 'Studio', (0, exports.getUrlForRoute)(url));
 };
 exports.pushUrl = pushUrl;
 const replaceUrl = (url) => {
-    window.history.replaceState({}, 'Studio', (0, exports.getUrlForRoute)(url));
+    (0, exports.getNavigationWindow)().history.replaceState({}, 'Studio', (0, exports.getUrlForRoute)(url));
 };
 exports.replaceUrl = replaceUrl;
 const clearUrl = () => {
@@ -32,7 +39,7 @@ const reloadUrl = () => {
 exports.reloadUrl = reloadUrl;
 const getRoute = () => {
     if (getUrlHandlingType() === 'query-string') {
-        const route = window.location.search.substring(1);
+        const route = (0, exports.getNavigationWindow)().location.search.substring(1);
         return route.startsWith('/') ? route : '';
     }
     return window.location.pathname;

package/dist/renderEntry.js

@@ -202,9 +202,11 @@ const renderContent = (Root) => {
         }
         renderToDOM(jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(DelayedSpinner, {}) }));
         Promise.resolve().then(() => __importStar(require('./internals'))).then(({ StudioInternals }) => {
+            var _a;
             window.remotion_isStudio = true;
             window.remotion_isReadOnlyStudio = true;
             window.remotion_inputProps = '{}';
+            (_a = window.remotion_enableSequenceStackTraces) === null || _a === void 0 ? void 0 : _a.call(window);
             renderToDOM(jsx_runtime_1.jsx(StudioInternals.Studio, { readOnly: true, rootComponent: Root }));
         })
             .catch((err) => {

package/dist/state/folders.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 import type { ExpandedFoldersState } from '../helpers/persist-open-folders';
+export type CompositionSortOrder = 'registration' | 'alphabetical';
 type TFolderContext = {
     compositionFoldersExpanded: ExpandedFoldersState;
     setCompositionFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
     assetFoldersExpanded: ExpandedFoldersState;
     setAssetFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
+    compositionSortOrder: CompositionSortOrder;
+    setCompositionSortOrder: (sortOrder: CompositionSortOrder) => void;
 };
 export declare const FolderContext: React.Context<TFolderContext>;
 export declare const FolderContextProvider: React.FC<{

package/dist/state/folders.js

@@ -4,6 +4,29 @@ exports.FolderContextProvider = exports.FolderContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
+const compositionSortOrderKey = 'remotion.compositionSortOrder';
+const loadCompositionSortOrder = () => {
+    if (typeof window === 'undefined') {
+        return 'registration';
+    }
+    try {
+        return window.localStorage.getItem(compositionSortOrderKey) ===
+            'alphabetical'
+            ? 'alphabetical'
+            : 'registration';
+    }
+    catch (_a) {
+        return 'registration';
+    }
+};
+const persistCompositionSortOrder = (sortOrder) => {
+    try {
+        window.localStorage.setItem(compositionSortOrderKey, sortOrder);
+    }
+    catch (_a) {
+        // Ignore quota errors or disabled storage.
+    }
+};
 exports.FolderContext = (0, react_1.createContext)({
     compositionFoldersExpanded: {},
     setCompositionFoldersExpanded: () => {
@@ -13,18 +36,34 @@ exports.FolderContext = (0, react_1.createContext)({
     setAssetFoldersExpanded: () => {
         throw new Error('default state');
     },
+    compositionSortOrder: 'registration',
+    setCompositionSortOrder: () => {
+        throw new Error('default state');
+    },
 });
 const FolderContextProvider = ({ children }) => {
     const [compositionFoldersExpanded, setCompositionFoldersExpanded] = (0, react_1.useState)(() => (0, persist_open_folders_1.loadExpandedFolders)('compositions'));
     const [assetFoldersExpanded, setAssetFoldersExpanded] = (0, react_1.useState)(() => (0, persist_open_folders_1.loadExpandedFolders)('assets'));
+    const [compositionSortOrder, setCompositionSortOrderState] = (0, react_1.useState)(loadCompositionSortOrder);
+    const setCompositionSortOrder = (0, react_1.useCallback)((sortOrder) => {
+        persistCompositionSortOrder(sortOrder);
+        setCompositionSortOrderState(sortOrder);
+    }, []);
     const value = (0, react_1.useMemo)(() => {
         return {
             compositionFoldersExpanded,
             setCompositionFoldersExpanded,
             assetFoldersExpanded,
             setAssetFoldersExpanded,
+            compositionSortOrder,
+            setCompositionSortOrder,
         };
-    }, [assetFoldersExpanded, compositionFoldersExpanded]);
+    }, [
+        assetFoldersExpanded,
+        compositionFoldersExpanded,
+        compositionSortOrder,
+        setCompositionSortOrder,
+    ]);
     return (jsx_runtime_1.jsx(exports.FolderContext.Provider, { value: value, children: children }));
 };
 exports.FolderContextProvider = FolderContextProvider;

package/dist/state/modals.d.ts

@@ -8,7 +8,6 @@ import type { StaticFile } from '../api/get-static-files';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
-import type { Bug, UpdateInfo } from '../components/UpdateCheck';
 export type WebRenderModalState = {
     type: 'web-render';
     initialFrame: number;
@@ -154,15 +153,11 @@ export type ModalState = {
     type: 'input-props-override';
 } | {
     type: 'settings';
-    initialTab: 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'license';
+    initialTab: 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'skills' | 'updates' | 'license';
     initialPublicLicenseKey: string | null;
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;
-} | {
-    type: 'update';
-    info: UpdateInfo;
-    knownBugs: Bug[];
 } | {
     type: 'fix-computed-value';
     prop: string;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,19 +25,20 @@
 	},
 	"dependencies": {
 		"@tanstack/react-virtual": "3.14.9",
-		"@remotion/canvas": "4.0.518",
-		"@remotion/studio-protocol": "4.0.518",
+		"@remotion/canvas": "4.0.519",
+		"@remotion/studio-protocol": "4.0.519",
+		"@remotion/studio-codemods": "4.0.519",
 		"semver": "7.5.3",
-		"remotion": "4.0.518",
-		"@remotion/captions": "4.0.518",
-		"@remotion/media": "4.0.518",
-		"@remotion/player": "4.0.518",
-		"@remotion/media-utils": "4.0.518",
-		"@remotion/renderer": "4.0.518",
-		"@remotion/web-renderer": "4.0.518",
-		"@remotion/studio-shared": "4.0.518",
-		"@remotion/timeline-utils": "4.0.518",
-		"@remotion/zod-types": "4.0.518",
+		"remotion": "4.0.519",
+		"@remotion/captions": "4.0.519",
+		"@remotion/media": "4.0.519",
+		"@remotion/player": "4.0.519",
+		"@remotion/media-utils": "4.0.519",
+		"@remotion/renderer": "4.0.519",
+		"@remotion/web-renderer": "4.0.519",
+		"@remotion/studio-shared": "4.0.519",
+		"@remotion/timeline-utils": "4.0.519",
+		"@remotion/zod-types": "4.0.519",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.55.1",
 		"memfs": "3.4.3",
@@ -45,10 +46,12 @@
 		"zod": "4.4.3"
 	},
 	"devDependencies": {
+		"@happy-dom/global-registrator": "14.5.1",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
+		"@testing-library/react": "16.1.0",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.518",
+		"@remotion/eslint-config-internal": "4.0.519",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/UpdateModal/UpdateModal.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { Bug, UpdateInfo } from '../UpdateCheck';
-export declare const UpdateModal: React.FC<{
-    readonly info: UpdateInfo;
-    readonly knownBugs: Bug[];
-}>;

package/dist/components/UpdateModal/UpdateModal.js

@@ -1,104 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UpdateModal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const copy_text_1 = require("../../helpers/copy-text");
-const clipboard_1 = require("../../icons/clipboard");
-const InlineAction_1 = require("../InlineAction");
-const KnownBugs_1 = require("../KnownBugs");
-const ModalHeader_1 = require("../ModalHeader");
-const DismissableModal_1 = require("../NewComposition/DismissableModal");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const container = {
-    padding: '0 16px 8px',
-};
-const panelStyle = {
-    borderRadius: 6,
-    overflow: 'hidden',
-};
-const text = {
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    fontSize: 14,
-    lineHeight: 1.5,
-};
-const title = {
-    paddingTop: 12,
-    paddingBottom: 8,
-    ...text,
-};
-const commandField = {
-    alignItems: 'center',
-    background: colors_1.SELECTED_BACKGROUND,
-    borderRadius: 6,
-    boxSizing: 'border-box',
-    display: 'flex',
-    marginBottom: 10,
-    marginTop: 10,
-    padding: '8px 8px 8px 10px',
-    width: '100%',
-};
-const code = {
-    color: colors_1.WHITE,
-    flex: 1,
-    fontFamily: 'monospace',
-    fontSize: 14,
-    lineHeight: 1.5,
-    margin: 0,
-    minWidth: 0,
-    overflowX: 'auto',
-    whiteSpace: 'pre',
-};
-const copyIcon = {
-    flexShrink: 0,
-    height: 12,
-    width: 12,
-};
-const link = {
-    ...text,
-    fontWeight: 'bold',
-    color: colors_1.BLUE,
-    textDecoration: 'none',
-};
-const commands = {
-    npm: 'npx remotion upgrade',
-    yarn: 'yarn remotion upgrade',
-    pnpm: 'pnpm exec remotion upgrade',
-    bun: 'bun remotion upgrade',
-    unknown: 'npx remotion upgrade',
-};
-const skillsUpdateCommand = 'npx remotion skills update';
-const remotionUpgradeSkill = '/remotion-upgrade';
-const UpdateModal = ({ info, knownBugs }) => {
-    const hasKnownBugs = (0, react_1.useMemo)(() => {
-        return knownBugs && (knownBugs === null || knownBugs === void 0 ? void 0 : knownBugs.length) > 0;
-    }, [knownBugs]);
-    const updateAction = info.remotionUpgradeSkillAvailable
-        ? remotionUpgradeSkill
-        : info.updateAvailable
-            ? commands[info.packageManager]
-            : skillsUpdateCommand;
-    const updateActionType = info.remotionUpgradeSkillAvailable
-        ? 'skill'
-        : 'command';
-    const onClick = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(updateAction).catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
-        });
-    }, [updateAction]);
-    const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
-    }, []);
-    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Update available" }), jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["To upgrade, run the following ", updateActionType, ":"] })
-                        ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: title, children: ["A new update for Remotion is available! Run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: title, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                            jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, title: "Copy command" })
-                        ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, info.skillsUpdateAvailable
-                                ? ' and update your project Remotion Agent Skills.'
-                                : '.'] })) : null, info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Read the", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })) : null] })
-        ] }));
-};
-exports.UpdateModal = UpdateModal;