@remotion/studio 4.0.527 → 4.0.529

package/dist/esm/{index-9xxg6218.mjs → index-qve7mdfp.mjs}

@@ -644,4 +644,22 @@ var useZIndex = () => {
   }), [context.currentIndex, highestContext.highestIndex, isHighestContext]);
 };
 
-export { isPointerSessionRelease, startCapturedPointerSession, startDeferredCapturedPointerSession, isMac, defaultKeyboardShortcuts, keyboardShortcutGroups, askAIKeyboardShortcutGroup, getKeyboardShortcutsForAction, keyboardShortcutsOverlap, formatKeyboardShortcut, getKeyboardShortcutLabel, getKeyboardShortcutAriaKeyShortcuts, shortcutFromKeyboardEvent, KeybindingContextProvider, areKeyboardShortcutsDisabled, useKeybinding, HighestZIndexProvider, getClickLock, setClickLock, HigherZIndex, useZIndex };
+// src/components/Menu/portals.ts
+var portalIds = [
+  "menuportal-0",
+  "menuportal-1",
+  "menuportal-2",
+  "menuportal-3",
+  "menuportal-4",
+  "menuportal-5"
+];
+var portals = typeof document === "undefined" ? [] : portalIds.map((id) => document.getElementById(id));
+var getPortal = (i) => {
+  const portal = portals[i];
+  if (!portal) {
+    throw new Error(`Expected menu portal ${i} to exist`);
+  }
+  return portal;
+};
+
+export { isPointerSessionRelease, startCapturedPointerSession, startDeferredCapturedPointerSession, isMac, defaultKeyboardShortcuts, keyboardShortcutGroups, askAIKeyboardShortcutGroup, getKeyboardShortcutsForAction, keyboardShortcutsOverlap, formatKeyboardShortcut, getKeyboardShortcutLabel, getKeyboardShortcutAriaKeyShortcuts, shortcutFromKeyboardEvent, KeybindingContextProvider, areKeyboardShortcutsDisabled, useKeybinding, HighestZIndexProvider, getClickLock, setClickLock, HigherZIndex, useZIndex, portals, getPortal };

package/dist/esm/{index-vxwg66ar.mjs → index-r9bj4tta.mjs}

@@ -11,32 +11,19 @@ import {
   rightRow,
   useCopyFeedback,
   validatePublicOutputName
-} from "./index-ppspzgn9.mjs";
+} from "./index-m2a95v3p.mjs";
 import {
   showNotification
-} from "./index-21hxsfaa.mjs";
+} from "./index-vtr5qzam.mjs";
 import {
   Spacing
-} from "./index-5t2dwxsk.mjs";
+} from "./index-m01zjph7.mjs";
 import {
   BLUE,
-  CURRENT_COLOR_LOWERCASE,
   INPUT_BACKGROUND,
   LIGHT_TEXT,
   WHITE
-} from "./index-k426ye99.mjs";
-
-// src/icons/gear.tsx
-import { jsx } from "react/jsx-runtime";
-var GearIcon = ({ color, ...props }) => /* @__PURE__ */ jsx("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 512 512",
-  ...props,
-  children: /* @__PURE__ */ jsx("path", {
-    fill: color ?? CURRENT_COLOR_LOWERCASE,
-    d: "M168 255.1c0-47.7 39.4-88 88-88s88 40.3 88 88c0 49.5-39.4 88.9-88 88.9s-88-39.4-88-88.9zm88-56c-30.9 0-56 26-56 56 0 31.8 25.1 56 56 56s56-24.2 56-56c0-30-25.1-56-56-56zM65.67 230.6l-40.33-36.8c-11.12-10.1-13.68-26.6-6.16-39.6l30.24-52.4c7.52-13.02 23.09-19.05 37.42-14.48l51.96 16.58c13.4-10.34 28.2-18.94 44-25.47l11.7-53.27C197.7 10.47 210.7 0 225.8 0h60.4c15.1 0 28.1 10.47 31.3 25.16l11.7 53.27c14.9 6.53 30.6 15.13 44 25.47l52-16.58c14.3-4.57 29.9 1.46 37.4 14.48l30.2 52.4c7.5 13 5 29.5-6.1 39.6l-40.4 36.8c1.1 8.3 1.7 16.8 1.7 24.5 0 9.5-.6 18-1.7 26.3l40.4 36.8c11.1 10.1 13.6 26.6 6.1 39.6l-30.2 52.4c-7.5 13-23.1 19-37.4 14.5l-52-16.6c-13.4 10.3-29.1 18.9-44 25.5l-11.7 53.2c-3.2 14.7-16.2 25.2-31.3 25.2h-60.4c-15.1 0-28.1-10.5-31.3-25.2l-11.7-53.2c-15.8-6.6-30.6-15.2-44-25.5l-51.96 16.6c-14.33 4.5-29.9-1.5-37.42-14.5l-30.24-52.4c-7.52-13-4.96-29.5 6.16-39.6l40.33-36.8c-1.1-8.3-1.67-16.8-1.67-26.3 0-7.7.57-16.2 1.67-24.5zm92.73-101.4-13.3 10.3-67.97-21.7-30.24 52.4 52.69 48-2.19 16.6c-.92 6.9-1.39 14-1.39 20.3 0 8.1.47 15.2 1.39 22.1l2.19 16.6-52.69 48 30.24 52.4 67.97-21.7 13.3 10.3c11.1 8.6 23.5 15.8 36.6 20.3l15.5 7.3 15.3 69.6h60.4l15.3-69.6 14.6-7.3c14-4.5 26.4-11.7 37.5-20.3l13.3-10.3 68 21.7 30.2-52.4-52.7-48 2.2-16.6c.9-6.9 1.4-14 1.4-21.2 0-7.2-.5-14.3-1.4-21.2l-2.2-16.6 52.7-48-30.2-52.4-68 21.7-13.3-10.3c-11.1-8.6-23.5-15.8-37.5-21.2l-14.6-6.4L286.2 32h-60.4l-15.3 69.6L195 108c-13.1 5.4-25.5 12.6-36.6 21.2z"
-  })
-});
+} from "./index-3qb54r5j.mjs";
 
 // src/components/Transcription/caption-output-name.ts
 var getDefaultCaptionOutputName = (src, displayName = "captions") => {
@@ -52,7 +39,7 @@ import { BrowserSafeApis } from "@remotion/renderer/client";
 
 // src/components/RenderModal/CliCopyButton.tsx
 import { useCallback, useMemo, useState } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var svgStyle = {
   width: 16,
   height: 16,
@@ -75,7 +62,7 @@ var CliCopyButton = ({
   const fillColor = useMemo(() => {
     return hovered ? WHITE : LIGHT_TEXT;
   }, [hovered]);
-  const copyIcon = /* @__PURE__ */ jsx2(CopyIcon, {
+  const copyIcon = /* @__PURE__ */ jsx(CopyIcon, {
     copied,
     color: fillColor,
     style: svgStyle
@@ -86,7 +73,7 @@ var CliCopyButton = ({
   const onPointerLeave = useCallback(() => {
     setHovered(false);
   }, []);
-  return /* @__PURE__ */ jsx2("button", {
+  return /* @__PURE__ */ jsx("button", {
     type: "button",
     onPointerEnter,
     onPointerLeave,
@@ -101,7 +88,7 @@ var CliCopyButton = ({
 };
 
 // src/components/RenderModal/OptionExplainer.tsx
-import { jsx as jsx3, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs, Fragment } from "react/jsx-runtime";
 var container = {
   fontSize: 14,
   paddingTop: 10,
@@ -168,16 +155,16 @@ var OptionExplainer = ({
         children: [
           /* @__PURE__ */ jsxs("div", {
             children: [
-              /* @__PURE__ */ jsx3("strong", {
+              /* @__PURE__ */ jsx2("strong", {
                 style: title,
                 children: option.name
               }),
               option.docLink ? /* @__PURE__ */ jsxs(Fragment, {
                 children: [
-                  /* @__PURE__ */ jsx3(Spacing, {
+                  /* @__PURE__ */ jsx2(Spacing, {
                     x: 1
                   }),
-                  /* @__PURE__ */ jsx3("a", {
+                  /* @__PURE__ */ jsx2("a", {
                     style: link,
                     href: option.docLink,
                     target: "_blank",
@@ -190,7 +177,7 @@ var OptionExplainer = ({
           /* @__PURE__ */ jsxs("div", {
             style: description,
             children: [
-              /* @__PURE__ */ jsx3("style", {
+              /* @__PURE__ */ jsx2("style", {
                 children: `
 							.__remotion-option-explainer-description,
 							.__remotion-option-explainer-description * {
@@ -210,7 +197,7 @@ var OptionExplainer = ({
 							}
 						`
               }),
-              /* @__PURE__ */ jsx3("div", {
+              /* @__PURE__ */ jsx2("div", {
                 className: "__remotion-option-explainer-description",
                 children: option.description("ssr")
               })
@@ -220,12 +207,12 @@ var OptionExplainer = ({
       }),
       hasInfoRows ? /* @__PURE__ */ jsxs(Fragment, {
         children: [
-          /* @__PURE__ */ jsx3(Spacing, {
+          /* @__PURE__ */ jsx2(Spacing, {
             y: 0.5,
             block: true
           }),
-          /* @__PURE__ */ jsx3(MenuDivider, {}),
-          /* @__PURE__ */ jsx3(Spacing, {
+          /* @__PURE__ */ jsx2(MenuDivider, {}),
+          /* @__PURE__ */ jsx2(Spacing, {
             y: 0.5,
             block: true
           }),
@@ -234,19 +221,19 @@ var OptionExplainer = ({
               extraInfoRows.map((row) => /* @__PURE__ */ jsxs("div", {
                 style: infoRow,
                 children: [
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: infoRowLabel,
                     children: row.label
                   }),
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: flexSpacer
                   }),
-                  /* @__PURE__ */ jsx3("code", {
+                  /* @__PURE__ */ jsx2("code", {
                     children: row.value
                   }),
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: copyWrapper,
-                    children: /* @__PURE__ */ jsx3(CliCopyButton, {
+                    children: /* @__PURE__ */ jsx2(CliCopyButton, {
                       valueToCopy: row.value
                     })
                   })
@@ -255,11 +242,11 @@ var OptionExplainer = ({
               shouldShowCliFlag ? /* @__PURE__ */ jsxs("div", {
                 style: infoRow,
                 children: [
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: infoRowLabel,
                     children: "CLI flag"
                   }),
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: flexSpacer
                   }),
                   /* @__PURE__ */ jsxs("code", {
@@ -268,9 +255,9 @@ var OptionExplainer = ({
                       option.cliFlag
                     ]
                   }),
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: copyWrapper,
-                    children: /* @__PURE__ */ jsx3(CliCopyButton, {
+                    children: /* @__PURE__ */ jsx2(CliCopyButton, {
                       valueToCopy: option.cliFlag
                     })
                   })
@@ -279,22 +266,22 @@ var OptionExplainer = ({
               shouldShowApiOption ? /* @__PURE__ */ jsxs("div", {
                 style: infoRow,
                 children: [
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: infoRowLabel,
                     children: "API option"
                   }),
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: flexSpacer
                   }),
-                  /* @__PURE__ */ jsx3("code", {
+                  /* @__PURE__ */ jsx2("code", {
                     children: option.ssrName
                   }),
-                  /* @__PURE__ */ jsx3(Spacing, {
+                  /* @__PURE__ */ jsx2(Spacing, {
                     x: 3.75
                   })
                 ]
               }) : null,
-              /* @__PURE__ */ jsx3("div", {
+              /* @__PURE__ */ jsx2("div", {
                 style: infoRow
               })
             ]
@@ -306,12 +293,12 @@ var OptionExplainer = ({
 };
 
 // src/components/RenderModal/OptionExplainerBubble.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var OptionExplainerBubble = ({ id, extraInfoRows, showApiOption, showCliFlag }) => {
   const option = BrowserSafeApis.options[id];
-  return /* @__PURE__ */ jsx4(InfoBubble, {
-    title: "Learn more about this option",
-    children: /* @__PURE__ */ jsx4(OptionExplainer, {
+  return /* @__PURE__ */ jsx3(InfoBubble, {
+    "aria-label": "Learn more about this option",
+    children: /* @__PURE__ */ jsx3(OptionExplainer, {
       extraInfoRows,
       option,
       showApiOption,
@@ -320,7 +307,7 @@ var OptionExplainerBubble = ({ id, extraInfoRows, showApiOption, showCliFlag })
   });
 };
 var WebRendererOptionExplainerBubble = ({ id, apiName }) => {
-  return /* @__PURE__ */ jsx4(OptionExplainerBubble, {
+  return /* @__PURE__ */ jsx3(OptionExplainerBubble, {
     extraInfoRows: [{ label: "API option", value: apiName }],
     id,
     showApiOption: false,
@@ -334,9 +321,9 @@ var WebRendererCustomOptionExplainerBubble = ({ apiName, description: descriptio
     name,
     ssrName: null
   };
-  return /* @__PURE__ */ jsx4(InfoBubble, {
-    title: "Learn more about this option",
-    children: /* @__PURE__ */ jsx4(OptionExplainer, {
+  return /* @__PURE__ */ jsx3(InfoBubble, {
+    "aria-label": "Learn more about this option",
+    children: /* @__PURE__ */ jsx3(OptionExplainer, {
       extraInfoRows: [{ label: "API option", value: apiName }],
       option,
       showApiOption: false,
@@ -346,7 +333,7 @@ var WebRendererCustomOptionExplainerBubble = ({ apiName, description: descriptio
 };
 
 // src/components/RenderModal/NumberSetting.tsx
-import { jsx as jsx5, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
 var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, formatter }) => {
   const onTextChanged = useCallback2((e) => {
     onValueChanged((q) => {
@@ -369,23 +356,23 @@ var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, format
           name,
           hint ? /* @__PURE__ */ jsxs2(Fragment2, {
             children: [
-              /* @__PURE__ */ jsx5(Spacing, {
+              /* @__PURE__ */ jsx4(Spacing, {
                 x: 0.5
               }),
-              typeof hint === "string" ? /* @__PURE__ */ jsx5(OptionExplainerBubble, {
+              typeof hint === "string" ? /* @__PURE__ */ jsx4(OptionExplainerBubble, {
                 id: hint
-              }) : /* @__PURE__ */ jsx5(InfoBubble, {
-                title: hint.title,
+              }) : /* @__PURE__ */ jsx4(InfoBubble, {
+                "aria-label": hint.title,
                 children: hint.content
               })
             ]
           }) : null
         ]
       }),
-      /* @__PURE__ */ jsx5("div", {
+      /* @__PURE__ */ jsx4("div", {
         style: rightRow,
-        children: /* @__PURE__ */ jsx5(RightAlignInput, {
-          children: /* @__PURE__ */ jsx5(InputDragger, {
+        children: /* @__PURE__ */ jsx4(RightAlignInput, {
+          children: /* @__PURE__ */ jsx4(InputDragger, {
             value,
             name: name.toLowerCase(),
             "aria-label": `${name}: ${formatter ? formatter(value) : value}`,
@@ -405,4 +392,4 @@ var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, format
   });
 };
 
-export { GearIcon, getDefaultCaptionOutputName, validateCaptionOutputName, OptionExplainerBubble, WebRendererOptionExplainerBubble, WebRendererCustomOptionExplainerBubble, NumberSetting };
+export { getDefaultCaptionOutputName, validateCaptionOutputName, OptionExplainerBubble, WebRendererOptionExplainerBubble, WebRendererCustomOptionExplainerBubble, NumberSetting };

package/dist/esm/{index-r0ejh5sy.mjs → index-vnc2wdfd.mjs}

@@ -1,19 +1,19 @@
 import {
+  ActionTooltip,
   CheckCircleFilled,
   CloudDownloadIcon,
   InlineAction,
+  ModelsIcon,
   Spinner,
   TrashIcon,
   VERTICAL_SCROLLBAR_CLASSNAME,
   ValidationMessage,
   optionsPanel
-} from "./index-5t2dwxsk.mjs";
+} from "./index-m01zjph7.mjs";
 import {
   BLUE,
-  BORDER_WHITE_ALPHA_12,
-  LIGHT_TEXT,
-  WHITE
-} from "./index-k426ye99.mjs";
+  LIGHT_TEXT
+} from "./index-3qb54r5j.mjs";
 
 // src/components/ModelManager.tsx
 import { formatBytes } from "@remotion/studio-shared";
@@ -46,15 +46,14 @@ var descriptionStyle = {
 var list = { marginTop: 14 };
 var modelRow = {
   alignItems: "center",
-  borderBottom: BORDER_WHITE_ALPHA_12,
   display: "flex",
   gap: 10,
-  minHeight: 38,
-  padding: "0 10px"
+  minHeight: 38
 };
-var lastModelRow = {
-  ...modelRow,
-  borderBottom: "none"
+var modelIcon = {
+  flexShrink: 0,
+  height: 16,
+  width: 16
 };
 var statusIcon = {
   flexShrink: 0,
@@ -62,7 +61,7 @@ var statusIcon = {
   width: 14
 };
 var modelName = {
-  color: WHITE,
+  color: LIGHT_TEXT,
   flex: 1,
   fontFamily: "monospace",
   fontSize: 13,
@@ -208,22 +207,28 @@ var ModelManager = ({
           style: description === null ? undefined : list,
           role: "list",
           "aria-label": ariaLabel,
-          children: availableModels.map((model, index) => {
+          children: availableModels.map((model) => {
             const cached = cachedModels?.has(model.name) ?? false;
             const processingThisModel = actionState.type !== "idle" && actionState.type !== "error" && actionState.model === model.name;
             const progress = actionState.type === "downloading" && actionState.model === model.name ? actionState.progress : null;
             const modelStatus = processingThisModel ? actionState.type === "removing" ? "Removing…" : `Downloading${progress === null ? "…" : ` ${Math.round(progress * 100)}%`}` : actionState.type === "error" && actionState.model === model.name ? actionState.message : formatBytes(model.webGpuDownloadSize);
             return /* @__PURE__ */ jsxs("div", {
               role: "listitem",
-              style: index === availableModels.length - 1 ? lastModelRow : modelRow,
+              style: modelRow,
               children: [
+                /* @__PURE__ */ jsx(ModelsIcon, {
+                  "aria-hidden": true,
+                  color: LIGHT_TEXT,
+                  style: modelIcon
+                }),
                 /* @__PURE__ */ jsx("span", {
                   style: modelName,
                   children: model.name
                 }),
                 /* @__PURE__ */ jsx("span", {
+                  role: "group",
                   style: status,
-                  title: modelStatus,
+                  "aria-label": modelStatus,
                   children: modelStatus
                 }),
                 cached ? /* @__PURE__ */ jsx(CheckCircleFilled, {
@@ -236,18 +241,30 @@ var ModelManager = ({
                     duration: 0.5,
                     size: 14
                   })
-                }) : cached ? /* @__PURE__ */ jsx(InlineAction, {
-                  disabled: actionInProgress,
-                  onClick: () => remove(model.name),
-                  renderAction: renderRemoveIcon,
-                  title: `Remove ${model.name}`,
-                  variant: null
-                }) : /* @__PURE__ */ jsx(InlineAction, {
-                  disabled: cachedModels === null || actionInProgress,
-                  onClick: () => downloadModel(model.name),
-                  renderAction: renderDownloadIcon,
-                  title: `Download ${model.name}`,
-                  variant: null
+                }) : cached ? /* @__PURE__ */ jsx(ActionTooltip, {
+                  label: "Uninstall",
+                  shortcut: null,
+                  delay: 800,
+                  dismissOnClick: true,
+                  children: /* @__PURE__ */ jsx(InlineAction, {
+                    "aria-label": `Remove ${model.name}`,
+                    disabled: actionInProgress,
+                    onClick: () => remove(model.name),
+                    renderAction: renderRemoveIcon,
+                    variant: null
+                  })
+                }) : /* @__PURE__ */ jsx(ActionTooltip, {
+                  label: "Install",
+                  shortcut: null,
+                  delay: 800,
+                  dismissOnClick: true,
+                  children: /* @__PURE__ */ jsx(InlineAction, {
+                    "aria-label": `Download ${model.name}`,
+                    disabled: cachedModels === null || actionInProgress,
+                    onClick: () => downloadModel(model.name),
+                    renderAction: renderDownloadIcon,
+                    variant: null
+                  })
                 })
               ]
             }, model.name);

package/dist/esm/{index-21hxsfaa.mjs → index-vtr5qzam.mjs}

@@ -1,19 +1,18 @@
 import {
-  callApi
-} from "./index-r1gr3j3a.mjs";
-import {
+  callApi,
   getBrowserStudioOperations
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
 import {
+  getPortal,
   useZIndex
-} from "./index-9xxg6218.mjs";
+} from "./index-qve7mdfp.mjs";
 import {
   NOTIFICATION_BACKGROUND,
   NOTIFICATION_BORDER,
   NOTIFICATION_SHADOW,
   TRANSPARENT,
   WHITE_HEX
-} from "./index-k426ye99.mjs";
+} from "./index-3qb54r5j.mjs";
 
 // src/components/Notifications/NotificationCenter.tsx
 import {
@@ -24,24 +23,6 @@ import {
 } from "react";
 import ReactDOM from "react-dom";
 
-// src/components/Menu/portals.ts
-var portalIds = [
-  "menuportal-0",
-  "menuportal-1",
-  "menuportal-2",
-  "menuportal-3",
-  "menuportal-4",
-  "menuportal-5"
-];
-var portals = typeof document === "undefined" ? [] : portalIds.map((id) => document.getElementById(id));
-var getPortal = (i) => {
-  const portal = portals[i];
-  if (!portal) {
-    throw new Error(`Expected menu portal ${i} to exist`);
-  }
-  return portal;
-};
-
 // src/components/Notifications/Notification.tsx
 import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -236,4 +217,4 @@ var installRequiredPackages = async (dependencies) => {
   await queuedInstall;
 };
 
-export { portals, getPortal, showNotification, NotificationCenter, TRANSFORMERS_PACKAGE, withRequiredAuxiliaryPackages, installPackages, getMissingPackages, installRequiredPackages };
+export { showNotification, NotificationCenter, TRANSFORMERS_PACKAGE, withRequiredAuxiliaryPackages, installPackages, getMissingPackages, installRequiredPackages };