@remotion/studio 4.0.527 → 4.0.528

package/dist/esm/{VideoMattingQueueProcessor-t1hgm2rm.mjs → VideoMattingQueueProcessor-4tkj0f4k.mjs}

@@ -1,99 +1,142 @@
 import {
   loadModelForJob
-} from "./index-v4tr1bft.mjs";
+} from "./index-09txs1bj.mjs";
 import {
   RenderQueueContext
-} from "./index-9x6e1dq0.mjs";
+} from "./index-hqxc6tzp.mjs";
 import {
+  callApi,
+  getBrowserStudioOperations,
   writeStaticFile
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/RenderQueue/VideoMattingQueueProcessor.tsx
 import {
   canUseVideoMatting,
   disposeVideoMattingModel,
+  downloadVideoMattingModel,
   isVideoMattingModelCached,
   loadVideoMattingModel,
-  separateVideoLayers
+  VideoMattingInternals
 } from "@remotion/video-matting";
 import { useCallback, useContext, useEffect } from "react";
 var VideoMattingQueueProcessor = () => {
   const {
     markVideoMattingJobDone,
     markVideoMattingJobFailed,
+    markVideoMattingJobCancelled,
+    markVideoMattingJobSaving,
+    getAbortController,
     setProcessVideoMattingJobCallback,
     updateVideoMattingJobProgress
   } = useContext(RenderQueueContext);
   const processJob = useCallback(async (job) => {
-    let outputs = null;
+    const { signal } = getAbortController(job.id);
+    let output = null;
     let processingError = null;
     try {
+      signal.throwIfAborted();
       updateVideoMattingJobProgress(job.id, {
         detail: null,
         message: "Checking WebGPU support...",
         value: 0
       });
       const support = await canUseVideoMatting({ model: job.model });
+      signal.throwIfAborted();
       if (!support.supported) {
         throw new Error(support.detailedReason);
       }
       await loadModelForJob({
+        signal,
         model: job.model,
         progressStart: 0,
         progressSpan: 0.2,
         isModelCached: (model) => isVideoMattingModelCached({ model }),
-        loadModel: (model, onProgress) => loadVideoMattingModel({
-          model,
-          onProgress: (progress) => onProgress(progress.progress)
-        }),
+        loadModel: async (model, onProgress) => {
+          await downloadVideoMattingModel({
+            signal,
+            model,
+            onProgress: (progress) => onProgress(progress.progress)
+          });
+          await loadVideoMattingModel({ model, signal });
+        },
         updateProgress: (progress) => updateVideoMattingJobProgress(job.id, {
           ...progress,
           detail: null
         })
       });
-      outputs = await separateVideoLayers({
+      const mattingOptions = {
+        signal,
         src: job.src,
         model: job.model,
-        audio: job.audio,
         videoBitrate: job.videoBitrate,
         onProgress: (progress) => {
           updateVideoMattingJobProgress(job.id, {
             detail: progress.stage === "finalizing" ? `Processed ${progress.processedFrames} ${progress.processedFrames === 1 ? "frame" : "frames"}` : `Processed ${progress.processedFrames} ${progress.processedFrames === 1 ? "frame" : "frames"} · ${Math.round(progress.progress * 100)}%`,
-            message: progress.stage === "finalizing" ? "Finalizing video layers..." : "Separating foreground...",
+            message: progress.stage === "finalizing" ? "Finalizing video..." : "Removing background...",
             value: 0.2 + (progress.progress ?? 1) * 0.65
           });
         }
+      };
+      output = await VideoMattingInternals.removeVideoBackground({
+        ...mattingOptions,
+        audio: job.audio
       });
+      if (output === null) {
+        throw new Error("Video matting produced no output.");
+      }
+      signal.throwIfAborted();
       updateVideoMattingJobProgress(job.id, {
         detail: null,
-        message: "Saving video layers...",
+        message: "Saving video...",
         value: 0.88
       });
-      const [base, foreground] = await Promise.all([
-        outputs.base.getBlob(),
-        outputs.foreground.getBlob()
-      ]);
-      await Promise.all([
-        base.arrayBuffer().then((contents) => writeStaticFile({ contents, filePath: job.baseOutName })),
-        foreground.arrayBuffer().then((contents) => writeStaticFile({ contents, filePath: job.foregroundOutName }))
-      ]);
+      const video = await output.video.getBlob();
+      signal.throwIfAborted();
+      markVideoMattingJobSaving(job.id);
+      await video.arrayBuffer().then((contents) => writeStaticFile({ contents, filePath: job.outName }));
+      if (job.target !== null) {
+        updateVideoMattingJobProgress(job.id, {
+          detail: null,
+          message: "Replacing video source...",
+          value: 0.97
+        });
+        const browserStudioOperations = getBrowserStudioOperations();
+        const request = {
+          fileName: job.target.fileName,
+          nodePath: job.target.nodePath.nodePath,
+          src: job.outName
+        };
+        const replaceSource = browserStudioOperations?.replaceVideoSource;
+        if (browserStudioOperations && !replaceSource) {
+          throw new Error("Browser Studio cannot replace the video source.");
+        }
+        const response = replaceSource ? await replaceSource(request) : await callApi("/api/replace-video-source", request);
+        if (!response.success) {
+          throw new Error(response.reason);
+        }
+      }
     } catch (error) {
       processingError = error instanceof Error ? error : new Error(String(error));
     }
+    if (output) {
+      await Promise.allSettled([output.video.dispose()]);
+    }
     try {
-      await Promise.all([
-        outputs?.base.dispose(),
-        outputs?.foreground.dispose()
-      ]);
       await disposeVideoMattingModel({ model: job.model });
     } catch {}
-    if (processingError) {
+    if (signal.aborted) {
+      markVideoMattingJobCancelled(job.id);
+    } else if (processingError) {
       markVideoMattingJobFailed(job.id, processingError);
     } else {
       markVideoMattingJobDone(job.id);
     }
   }, [
+    getAbortController,
+    markVideoMattingJobCancelled,
+    markVideoMattingJobSaving,
     markVideoMattingJobDone,
     markVideoMattingJobFailed,
     updateVideoMattingJobProgress

package/dist/esm/{index-v4tr1bft.mjs → index-09txs1bj.mjs}

@@ -3,18 +3,23 @@ var loadModelForJob = async ({
   isModelCached,
   loadModel,
   model,
+  signal,
   progressSpan,
   progressStart,
   updateProgress
 }) => {
+  signal.throwIfAborted();
   const cached = await isModelCached(model);
+  signal.throwIfAborted();
   await loadModel(model, (progress) => {
+    signal.throwIfAborted();
     const percentage = progress === null ? "" : ` ${Math.round(progress * 100)}%`;
     updateProgress({
       message: `${cached ? "Loading" : "Downloading"} ${model}${percentage}`,
       value: progressStart + (progress ?? 0) * progressSpan
     });
   });
+  signal.throwIfAborted();
 };
 
 export { loadModelForJob };

package/dist/esm/{index-n5gmcvhz.mjs → index-5ycb9e9q.mjs}

@@ -1,9 +1,7 @@
 import {
-  callApi
-} from "./index-r1gr3j3a.mjs";
-import {
+  callApi,
   getBrowserStudioOperations
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
 
 // src/api/pause.ts
 import { Internals } from "remotion";

package/dist/esm/{index-5t2dwxsk.mjs → index-890dd9b3.mjs}

@@ -1,21 +1,28 @@
 import {
   HigherZIndex,
+  getPortal,
   useZIndex
-} from "./index-9xxg6218.mjs";
+} from "./index-qve7mdfp.mjs";
 import {
   BACKGROUND,
   BLUE,
   BORDER_BLACK,
   CURRENT_COLOR,
+  CURRENT_COLOR_LOWERCASE,
   FAIL_COLOR,
   LIGHT_TEXT,
   SHADOW_BLACK,
+  SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM,
+  SHADOW_BLACK_ALPHA_50_TOWARDS_TOP,
+  TIMELINE_BACKGROUND_COLOR,
   TRANSPARENT,
   WARNING_COLOR,
   WHITE,
+  WHITE_ALPHA_10,
   WHITE_ALPHA_20,
+  WHITE_ALPHA_90,
   getBackgroundFromHoverState
-} from "./index-k426ye99.mjs";
+} from "./index-wqc43mw0.mjs";
 
 // src/components/layout.tsx
 import { useMemo } from "react";
@@ -84,10 +91,10 @@ var HOVERABLE_CLASS_NAME = "__remotion-hoverable";
 var HOVER_GROUP_CLASS_NAME = "__remotion-hover-group";
 var HOVER_GROUP_REVEAL_CLASS_NAME = "__remotion-hover-group-reveal";
 var FOCUS_VISIBLE_ONLY_CLASS_NAME = "__remotion-focus-visible-only";
-var BG_VARIABLE = "--remotion-hoverable-bg";
-var HOVER_BG_VARIABLE = "--remotion-hoverable-hover-bg";
-var COLOR_VARIABLE = "--remotion-hoverable-color";
-var HOVER_COLOR_VARIABLE = "--remotion-hoverable-hover-color";
+var BG_VARIABLE = "--remotion-studio-hoverable-bg";
+var HOVER_BG_VARIABLE = "--remotion-studio-hoverable-hover-bg";
+var COLOR_VARIABLE = "--remotion-studio-hoverable-color";
+var HOVER_COLOR_VARIABLE = "--remotion-studio-hoverable-hover-color";
 var NO_HOVER_BACKGROUND_STYLE = {
   [HOVER_BG_VARIABLE]: TRANSPARENT
 };
@@ -433,9 +440,240 @@ var flexer = {
   flex: 1
 };
 
+// src/icons/models.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ModelsIcon = ({
+  color,
+  ...props
+}) => /* @__PURE__ */ jsx5("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 512 512",
+  ...props,
+  children: /* @__PURE__ */ jsx5("path", {
+    d: "M176 16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-16c-35.3 0-64 28.7-64 64v16H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v64H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v64H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v16c0 35.3 28.7 64 64 64h16v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h64v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h64v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h16c35.3 0 64-28.7 64-64v-16h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-64h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-64h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-16c0-35.3-28.7-64-64-64h-16V16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-64V16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-64V16ZM416 128v256c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V128c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32ZM192 160c-17.7 0-32 14.3-32 32v128c0 17.7 14.3 32 32 32h128c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H192Zm128 32v128H192V192h128Z",
+    fill: color ?? CURRENT_COLOR_LOWERCASE
+  })
+});
+
+// src/components/Menu/styles.ts
+var MENU_VERTICAL_PADDING = 4;
+var SUBMENU_LEFT_INSET = -8;
+var MAX_MENU_WIDTH = 400;
+var MAX_MOBILE_MENU_WIDTH = 300;
+var menuContainer = {
+  backgroundColor: BACKGROUND,
+  position: "fixed",
+  color: WHITE,
+  userSelect: "none",
+  WebkitUserSelect: "none"
+};
+var SHADOW_TOWARDS_BOTTOM = SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM;
+var SHADOW_TOWARDS_TOP = SHADOW_BLACK_ALPHA_50_TOWARDS_TOP;
+var menuContainerTowardsBottom = {
+  ...menuContainer,
+  boxShadow: SHADOW_TOWARDS_BOTTOM
+};
+var menuContainerTowardsTop = {
+  ...menuContainer,
+  boxShadow: SHADOW_TOWARDS_TOP
+};
+var fullScreenOverlay = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+};
+var outerPortal = {
+  position: "fixed"
+};
+var inlineCodeSnippet = {
+  fontSize: 14,
+  color: BLUE,
+  fontFamily: "monospace"
+};
+
+// src/components/ActionTooltip.tsx
+import {
+  useCallback as useCallback3,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx6, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+var defaultTriggerStyle = { display: "inline-flex" };
+var tooltipStyle = {
+  position: "fixed",
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  backgroundColor: TIMELINE_BACKGROUND_COLOR,
+  color: WHITE_ALPHA_90,
+  borderRadius: 6,
+  padding: "6px 8px",
+  fontSize: 12,
+  lineHeight: "16px",
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere",
+  maxWidth: "calc(100vw - 16px)",
+  boxShadow: SHADOW_TOWARDS_TOP,
+  pointerEvents: "none"
+};
+var labelStyle = {
+  font: "inherit",
+  color: "inherit",
+  minWidth: 0
+};
+var shortcutStyle = {
+  ...labelStyle,
+  backgroundColor: WHITE_ALPHA_10,
+  borderRadius: 3,
+  padding: "0 4px",
+  minWidth: 16,
+  textAlign: "center",
+  whiteSpace: "nowrap",
+  flexShrink: 0
+};
+var visibleTooltipCount = 0;
+var lastTooltipHiddenAt = null;
+var TOOLTIP_SKIP_DELAY_WINDOW = 300;
+var ActionTooltip = ({
+  label: label2,
+  shortcut,
+  delay,
+  dismissOnClick,
+  side = "top",
+  triggerStyle,
+  children
+}) => {
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const timer = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState(null);
+  const { currentZIndex } = useZIndex();
+  useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+    visibleTooltipCount++;
+    return () => {
+      visibleTooltipCount--;
+      lastTooltipHiddenAt = Date.now();
+    };
+  }, [visible]);
+  const hide = useCallback3(() => {
+    if (timer.current !== null) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setVisible(false);
+    setPosition(null);
+  }, []);
+  const show = useCallback3(() => {
+    if (timer.current !== null) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setVisible(true);
+  }, []);
+  const onPointerEnter = useCallback3((event) => {
+    if (event.pointerType === "touch" || timer.current !== null || !event.currentTarget.contains(event.target)) {
+      return;
+    }
+    if (!delay || visibleTooltipCount > 0 || lastTooltipHiddenAt !== null && Date.now() - lastTooltipHiddenAt < TOOLTIP_SKIP_DELAY_WINDOW) {
+      show();
+      return;
+    }
+    timer.current = setTimeout(show, delay);
+  }, [delay, show]);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        hide();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("blur", hide);
+    window.addEventListener("resize", hide);
+    window.addEventListener("scroll", hide, true);
+    return () => {
+      if (timer.current !== null) {
+        clearTimeout(timer.current);
+      }
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("blur", hide);
+      window.removeEventListener("resize", hide);
+      window.removeEventListener("scroll", hide, true);
+    };
+  }, [hide]);
+  useLayoutEffect(() => {
+    if (!visible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const tooltip = tooltipRef.current.getBoundingClientRect();
+    if (side === "right") {
+      const right = trigger.right + 4;
+      setPosition({
+        left: right + tooltip.width <= window.innerWidth - 8 ? right : Math.max(8, trigger.left - tooltip.width - 4),
+        top: Math.max(8, Math.min(trigger.top + (trigger.height - tooltip.height) / 2, window.innerHeight - tooltip.height - 8))
+      });
+      return;
+    }
+    const above = trigger.top - tooltip.height - 4;
+    setPosition({
+      left: Math.max(8, Math.min(trigger.left + (trigger.width - tooltip.width) / 2, window.innerWidth - tooltip.width - 8)),
+      top: Math.max(8, Math.min(above >= 8 ? above : trigger.bottom + 4, window.innerHeight - tooltip.height - 8))
+    });
+  }, [label2, shortcut, side, visible]);
+  return /* @__PURE__ */ jsxs2(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsx6("span", {
+        ref: triggerRef,
+        style: { ...defaultTriggerStyle, ...triggerStyle },
+        onPointerEnter,
+        onPointerLeave: hide,
+        onPointerDownCapture: dismissOnClick ? hide : undefined,
+        onClickCapture: dismissOnClick ? hide : undefined,
+        onFocus: (event) => {
+          if (event.currentTarget.contains(event.target)) {
+            show();
+          }
+        },
+        onBlur: hide,
+        children
+      }),
+      visible ? createPortal(/* @__PURE__ */ jsxs2("div", {
+        ref: tooltipRef,
+        role: "tooltip",
+        className: "css-reset",
+        style: {
+          ...tooltipStyle,
+          left: position?.left ?? 0,
+          top: position?.top ?? 0,
+          visibility: position ? "visible" : "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx6("span", {
+            style: labelStyle,
+            children: label2
+          }),
+          shortcut ? /* @__PURE__ */ jsx6("kbd", {
+            style: shortcutStyle,
+            children: shortcut
+          }) : null
+        ]
+      }), getPortal(currentZIndex)) : null
+    ]
+  });
+};
+
 // src/components/Spinner.tsx
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx5, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3, Fragment as Fragment3 } from "react/jsx-runtime";
 var viewBox = 100;
 var lines = 8;
 var className = "__remotion_spinner_line";
@@ -448,9 +686,9 @@ var Spinner = ({ size, duration, color = LIGHT_TEXT }) => {
       height: size
     };
   }, [size]);
-  return /* @__PURE__ */ jsxs2(Fragment2, {
+  return /* @__PURE__ */ jsxs3(Fragment3, {
     children: [
-      /* @__PURE__ */ jsx5("style", {
+      /* @__PURE__ */ jsx7("style", {
         type: "text/css",
         children: `
 				@keyframes ${remotionSpinnerAnimation} {
@@ -467,11 +705,11 @@ var Spinner = ({ size, duration, color = LIGHT_TEXT }) => {
         }        
 			`
       }),
-      /* @__PURE__ */ jsx5("svg", {
+      /* @__PURE__ */ jsx7("svg", {
         style: style2,
         viewBox: `0 0 ${viewBox} ${viewBox}`,
         children: new Array(lines).fill(true).map((_, index) => {
-          return /* @__PURE__ */ jsx5("path", {
+          return /* @__PURE__ */ jsx7("path", {
             className,
             style: {
               rotate: `${index * Math.PI * 2 / lines}rad`,
@@ -488,13 +726,13 @@ var Spinner = ({ size, duration, color = LIGHT_TEXT }) => {
 };
 
 // src/icons/trash.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var TrashIcon = ({ color, ...props }) => {
-  return /* @__PURE__ */ jsx6("svg", {
+  return /* @__PURE__ */ jsx8("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 448 512",
     ...props,
-    children: /* @__PURE__ */ jsx6("path", {
+    children: /* @__PURE__ */ jsx8("path", {
       fill: color,
       d: "M160.5 27.4C162.5 20.6 168.8 16 175.8 16h96.4c7.1 0 13.3 4.6 15.3 11.4l11 36.6h-149l11-36.6zM116.1 64H16C7.2 64 0 71.2 0 80s7.2 16 16 16h416c8.8 0 16-7.2 16-16s-7.2-16-16-16H331.9l-13.7-45.8C312.1-2.1 293.4-16 272.2-16h-96.4c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144l22.9 308.7c2.5 33.4 30.3 59.3 63.8 59.3h217.1c33.5 0 61.3-25.9 63.8-59.3L419.2 144h-32.1l-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6H115.4c-16.8 0-30.7-12.9-31.9-29.6L60.8 144H28.7z"
     })
@@ -502,13 +740,13 @@ var TrashIcon = ({ color, ...props }) => {
 };
 
 // src/icons/cloud-download.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var CloudDownloadIcon = ({ color, ...props }) => {
-  return /* @__PURE__ */ jsx7("svg", {
+  return /* @__PURE__ */ jsx9("svg", {
     ...props,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 576 512",
-    children: /* @__PURE__ */ jsx7("path", {
+    children: /* @__PURE__ */ jsx9("path", {
       fill: color,
       d: "M128 176c0-61.9 50.1-112 112-112 39.3 0 73.8 20.2 93.8 50.8 4.4 6.7 13.1 9.1 20.3 5.7 11.4-5.5 24.3-8.5 37.9-8.5 48.6 0 88 39.4 88 88 0 14.1-3.3 27.4-9.2 39.2-2 4.1-2.2 8.9-.5 13.1s5.2 7.6 9.5 9.1c37.4 13.1 64.2 48.8 64.2 90.6 0 53-43 96-96 96l-304 0c-61.9 0-112-50.1-112-112 0-53.7 37.8-98.6 88.2-109.5 4.3-.9 8.1-3.6 10.3-7.4s2.9-8.3 1.7-12.6c-2.7-9.7-4.2-19.9-4.2-30.5zM240 32c-79.5 0-144 64.5-144 144 0 8 .7 15.9 1.9 23.5-56.9 19.2-97.9 73-97.9 136.5 0 79.5 64.5 144 144 144l304 0c70.7 0 128-57.3 128-128 0-49.9-28.5-93-70.1-114.2 3.9-11.9 6.1-24.6 6.1-37.8 0-66.3-53.7-120-120-120-13.7 0-26.9 2.3-39.2 6.5-26.4-33.2-67.1-54.5-112.8-54.5zM371.3 307.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L304 329.4 304 208c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 121.4-44.7-44.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l72 72c6.2 6.2 16.4 6.2 22.6 0l72-72z"
     })
@@ -516,15 +754,15 @@ var CloudDownloadIcon = ({ color, ...props }) => {
 };
 
 // src/icons/check-circle-filled.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var CheckCircleFilled = (props) => /* @__PURE__ */ jsx8("svg", {
+import { jsx as jsx10 } from "react/jsx-runtime";
+var CheckCircleFilled = (props) => /* @__PURE__ */ jsx10("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   style: { width: 14, height: 14 },
   viewBox: "0 0 512 512",
   ...props,
-  children: /* @__PURE__ */ jsx8("path", {
+  children: /* @__PURE__ */ jsx10("path", {
     d: "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zM374 145.7c-10.7-7.8-25.7-5.4-33.5 5.3L221.1 315.2 169 263.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c5 5 11.8 7.5 18.8 7s13.4-4.1 17.5-9.8L379.3 179.2c7.8-10.7 5.4-25.7-5.3-33.5z"
   })
 });
 
-export { SPACING_UNIT, COMPACT_CONTROL_ROW_HEIGHT, COMPACT_INLINE_ROW_HEIGHT, Spacing, Flex, Row, Column, getMaxModalWidth, getMaxModalHeight, ModalContainer, HOVERABLE_CLASS_NAME, HOVER_GROUP_CLASS_NAME, HOVER_GROUP_REVEAL_CLASS_NAME, FOCUS_VISIBLE_ONLY_CLASS_NAME, NO_HOVER_BACKGROUND_STYLE, hoverableStyle, makeHoverableCSS, InlineAction, MENU_INITIATOR_CLASSNAME, MENU_ITEM_CLASSNAME, HORIZONTAL_SCROLLBAR_CLASSNAME, VERTICAL_SCROLLBAR_CLASSNAME, isMenuItem, Spinner, TrashIcon, WarningTriangle, ValidationMessage, CloudDownloadIcon, CheckCircleFilled, outerModalStyle, container2 as container, optionsPanel, horizontalLayout, leftSidebar, horizontalTab, iconContainer, icon, buttonStyle, flexer };
+export { SPACING_UNIT, COMPACT_CONTROL_ROW_HEIGHT, COMPACT_INLINE_ROW_HEIGHT, Spacing, Flex, Row, Column, getMaxModalWidth, getMaxModalHeight, ModalContainer, HOVERABLE_CLASS_NAME, HOVER_GROUP_CLASS_NAME, HOVER_GROUP_REVEAL_CLASS_NAME, FOCUS_VISIBLE_ONLY_CLASS_NAME, NO_HOVER_BACKGROUND_STYLE, hoverableStyle, makeHoverableCSS, InlineAction, MENU_VERTICAL_PADDING, SUBMENU_LEFT_INSET, MAX_MENU_WIDTH, MAX_MOBILE_MENU_WIDTH, SHADOW_TOWARDS_BOTTOM, SHADOW_TOWARDS_TOP, menuContainerTowardsBottom, menuContainerTowardsTop, fullScreenOverlay, outerPortal, inlineCodeSnippet, MENU_INITIATOR_CLASSNAME, MENU_ITEM_CLASSNAME, HORIZONTAL_SCROLLBAR_CLASSNAME, VERTICAL_SCROLLBAR_CLASSNAME, isMenuItem, ActionTooltip, Spinner, TrashIcon, WarningTriangle, ValidationMessage, CloudDownloadIcon, CheckCircleFilled, outerModalStyle, container2 as container, optionsPanel, horizontalLayout, leftSidebar, horizontalTab, iconContainer, icon, buttonStyle, flexer, ModelsIcon };

package/dist/esm/{index-ac5550e7.mjs → index-8nt6a0mw.mjs}

@@ -1,12 +1,12 @@
 import {
   ModelManager
-} from "./index-r0ejh5sy.mjs";
+} from "./index-t7xnxdf8.mjs";
 
 // src/components/VideoMatting/Models.tsx
 import {
+  downloadVideoMattingModel,
   getAvailableModels,
   isVideoMattingModelCached,
-  loadVideoMattingModel,
   removeVideoMattingModel
 } from "@remotion/video-matting";
 import { useCallback } from "react";
@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 var AVAILABLE_MODELS = getAvailableModels();
 var Models = ({ description, indent, visible }) => {
   const isModelCached = useCallback((model) => isVideoMattingModelCached({ model }), []);
-  const loadModel = useCallback((model, onProgress) => loadVideoMattingModel({
+  const loadModel = useCallback((model, onProgress) => downloadVideoMattingModel({
     model,
     onProgress: (progress) => onProgress(progress.progress)
   }), []);

package/dist/esm/{index-614tdz2q.mjs → index-9q9w8v9p.mjs}

@@ -1,13 +1,13 @@
 import {
   ModelManager
-} from "./index-r0ejh5sy.mjs";
+} from "./index-t7xnxdf8.mjs";
 
 // src/components/Transcription/Models.tsx
 import {
   clearStaleModels,
+  downloadWhisperModel,
   getAvailableModels,
   isWhisperModelCached,
-  loadWhisperModel,
   removeWhisperModel
 } from "@remotion/whisper-webgpu";
 import { useCallback } from "react";
@@ -15,7 +15,7 @@ import { jsx } from "react/jsx-runtime";
 var AVAILABLE_MODELS = getAvailableModels();
 var Models = ({ description, indent, visible }) => {
   const isModelCached = useCallback((model) => isWhisperModelCached({ model }), []);
-  const loadModel = useCallback((model, onProgress) => loadWhisperModel({
+  const loadModel = useCallback((model, onProgress) => downloadWhisperModel({
     model,
     onProgress: (progress) => onProgress(progress.progress)
   }), []);

package/dist/esm/{index-s7qa3xbw.mjs → index-c2wabcdt.mjs}

@@ -5,25 +5,25 @@ import {
   label,
   optionRow,
   rightRow
-} from "./index-ppspzgn9.mjs";
+} from "./index-x6r9bn12.mjs";
 import {
   showNotification
-} from "./index-21hxsfaa.mjs";
+} from "./index-dh3zk2hv.mjs";
 import {
   openInFileExplorer
-} from "./index-e855w59j.mjs";
+} from "./index-s6qya2gg.mjs";
 import {
   getBrowserStudioOperations
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
 import {
   Column,
   InlineAction,
   Spacing,
   ValidationMessage
-} from "./index-5t2dwxsk.mjs";
+} from "./index-890dd9b3.mjs";
 import {
   WHITE
-} from "./index-k426ye99.mjs";
+} from "./index-wqc43mw0.mjs";
 
 // src/components/RenderModal/RenderModalOutputName.tsx
 import { useCallback } from "react";