@remotion/studio 4.0.522 → 4.0.523

package/dist/esm/{chunk-je0h1bgt.js → index-jg13hf2g.mjs}

@@ -94,6 +94,8 @@ var SERVER_DISCONNECTED_SHADOW = `0 2px 4px ${BLACK_ALPHA_40}`;
 var COLOR_PICKER_POPUP_SHADOW = `0 4px 16px ${BLACK_ALPHA_50}`;
 var COLOR_PICKER_HANDLE_SHADOW = `0 0 0 1px ${BLACK_ALPHA_60}`;
 var NOTIFICATION_BORDER = `0.25px solid ${WHITE_ALPHA_10}`;
+var HOT_MIDDLEWARE_ERROR_STYLE = "color: #ff0000;";
+var HOT_MIDDLEWARE_WARNING_STYLE = "color: #999933;";
 var FOCUS_BOX_SHADOW = `inset 1px 1px #555, inset -1px -1px #555, ` + `inset 1px -1px #555, inset -1px 1px #555`;
 var CHECKERBOARD_BACKGROUND_IMAGE = `
      linear-gradient(
@@ -133,4 +135,4 @@ var getBackgroundFromHoverState = ({
   return TRANSPARENT;
 };
 
-export { BLACK, WHITE, RED, TRANSPARENT, CURRENT_COLOR, CURRENT_COLOR_LOWERCASE, WHITE_HEX, WHITE_FULL_HEX, BLACK_HEX, BLACK_FULL_HEX, BACKGROUND, BACKGROUND_HEX, BACKGROUND__TRANSPARENT, INPUT_BACKGROUND, LIGHT_COLOR, SELECTED_BACKGROUND, LIGHT_TEXT, RULER_COLOR, WHITE_ALPHA_05, WHITE_ALPHA_06, WHITE_ALPHA_08, WHITE_ALPHA_10, WHITE_ALPHA_12, WHITE_ALPHA_15, WHITE_ALPHA_20, WHITE_ALPHA_25, WHITE_ALPHA_30, WHITE_ALPHA_35, WHITE_ALPHA_40, WHITE_ALPHA_45, WHITE_ALPHA_50, WHITE_ALPHA_60, WHITE_ALPHA_70, WHITE_ALPHA_72, WHITE_ALPHA_80, BLACK_ALPHA_30, BLACK_ALPHA_40, BLACK_ALPHA_50, BLACK_ALPHA_60, FAIL_COLOR, WARNING_COLOR, BLUE, BLUE_HOVERED, BLUE_DISABLED, UNSELECTED_GUIDE, SELECTED_GUIDE, LINE_COLOR, TIMELINE_TRACK_SEPARATOR, LIGHT_GRAY, NOTIFICATION_BACKGROUND, RENDER_STATUS_BACKGROUND, ERROR_CODE_FRAME_BACKGROUND, ERROR_CODE_FRAME_LINE_BACKGROUND, ERROR_LINK_COLOR, INFO_BLUE, SERVER_DISCONNECTED_BACKGROUND, TIMELINE_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BORDER_COLOR, TIMELINE_SELECTED_BACKGROUND_COLOR, TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR, TIMELINE_BLUE, TIMELINE_PLAYHEAD_COLOR, TIMELINE_DROP_BLUE_ALPHA_12, TIMELINE_DROP_BLUE_ALPHA_16, TIMELINE_MARQUEE_BLUE_ALPHA_16, INFO_BLUE_BACKGROUND, BORDER_BLACK, BORDER_WHITE, BORDER_WHITE_2PX, BORDER_CURRENT_COLOR, BORDER_TRANSPARENT_2PX, BORDER_BLACK_ALPHA_50, BORDER_BLACK_ALPHA_60, BORDER_WHITE_ALPHA_12, BORDER_WHITE_ALPHA_20, BORDER_INFO_BLUE, BORDER_TIMELINE_DROP_BLUE, BORDER_TIMELINE_MARQUEE_BLUE, SHADOW_BLACK, SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM, SHADOW_BLACK_ALPHA_50_TOWARDS_TOP, NOTIFICATION_SHADOW, SERVER_DISCONNECTED_SHADOW, COLOR_PICKER_POPUP_SHADOW, COLOR_PICKER_HANDLE_SHADOW, NOTIFICATION_BORDER, FOCUS_BOX_SHADOW, CHECKERBOARD_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_COLOR, COLOR_PICKER_SATURATION_VALUE_GRADIENT, COLOR_PICKER_SATURATION_BLACK_GRADIENT, COLOR_PICKER_ALPHA_TRANSPARENT, COLOR_PICKER_HUE_GRADIENT, ERROR_MESSAGE_MASK_IMAGE, SELECTED_OUTLINE_DROP_SHADOW, SELECTED_OUTLINE_UV_DROP_SHADOW, LOOPED_INDICATOR_DROP_SHADOW, TIMELINE_AUDIO_GRADIENT, TIMELINE_VIDEO_GRADIENT, getBackgroundFromHoverState };
+export { BLACK, WHITE, RED, TRANSPARENT, CURRENT_COLOR, CURRENT_COLOR_LOWERCASE, WHITE_HEX, WHITE_FULL_HEX, BLACK_HEX, BLACK_FULL_HEX, BACKGROUND, BACKGROUND_HEX, BACKGROUND__TRANSPARENT, INPUT_BACKGROUND, LIGHT_COLOR, SELECTED_BACKGROUND, LIGHT_TEXT, RULER_COLOR, WHITE_ALPHA_05, WHITE_ALPHA_06, WHITE_ALPHA_08, WHITE_ALPHA_10, WHITE_ALPHA_12, WHITE_ALPHA_15, WHITE_ALPHA_20, WHITE_ALPHA_25, WHITE_ALPHA_30, WHITE_ALPHA_35, WHITE_ALPHA_40, WHITE_ALPHA_45, WHITE_ALPHA_50, WHITE_ALPHA_60, WHITE_ALPHA_70, WHITE_ALPHA_72, WHITE_ALPHA_80, BLACK_ALPHA_30, BLACK_ALPHA_40, BLACK_ALPHA_50, BLACK_ALPHA_60, FAIL_COLOR, WARNING_COLOR, BLUE, BLUE_HOVERED, BLUE_DISABLED, UNSELECTED_GUIDE, SELECTED_GUIDE, LINE_COLOR, TIMELINE_TRACK_SEPARATOR, LIGHT_GRAY, NOTIFICATION_BACKGROUND, RENDER_STATUS_BACKGROUND, ERROR_CODE_FRAME_BACKGROUND, ERROR_CODE_FRAME_LINE_BACKGROUND, ERROR_LINK_COLOR, INFO_BLUE, SERVER_DISCONNECTED_BACKGROUND, TIMELINE_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BORDER_COLOR, TIMELINE_SELECTED_BACKGROUND_COLOR, TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR, TIMELINE_BLUE, TIMELINE_PLAYHEAD_COLOR, TIMELINE_DROP_BLUE_ALPHA_12, TIMELINE_DROP_BLUE_ALPHA_16, TIMELINE_MARQUEE_BLUE_ALPHA_16, INFO_BLUE_BACKGROUND, BORDER_BLACK, BORDER_WHITE, BORDER_WHITE_2PX, BORDER_CURRENT_COLOR, BORDER_TRANSPARENT_2PX, BORDER_BLACK_ALPHA_50, BORDER_BLACK_ALPHA_60, BORDER_WHITE_ALPHA_12, BORDER_WHITE_ALPHA_20, BORDER_INFO_BLUE, BORDER_TIMELINE_DROP_BLUE, BORDER_TIMELINE_MARQUEE_BLUE, SHADOW_BLACK, SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM, SHADOW_BLACK_ALPHA_50_TOWARDS_TOP, NOTIFICATION_SHADOW, SERVER_DISCONNECTED_SHADOW, COLOR_PICKER_POPUP_SHADOW, COLOR_PICKER_HANDLE_SHADOW, NOTIFICATION_BORDER, HOT_MIDDLEWARE_ERROR_STYLE, HOT_MIDDLEWARE_WARNING_STYLE, FOCUS_BOX_SHADOW, CHECKERBOARD_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_COLOR, COLOR_PICKER_SATURATION_VALUE_GRADIENT, COLOR_PICKER_SATURATION_BLACK_GRADIENT, COLOR_PICKER_ALPHA_TRANSPARENT, COLOR_PICKER_HUE_GRADIENT, ERROR_MESSAGE_MASK_IMAGE, SELECTED_OUTLINE_DROP_SHADOW, SELECTED_OUTLINE_UV_DROP_SHADOW, LOOPED_INDICATOR_DROP_SHADOW, TIMELINE_AUDIO_GRADIENT, TIMELINE_VIDEO_GRADIENT, getBackgroundFromHoverState };

package/dist/esm/{chunk-6jf1natv.js → index-rcv7qkt5.mjs}

@@ -2,6 +2,7 @@ var __create = Object.create;
 var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __toESM = (mod, isNodeMode, target) => {
   target = mod != null ? __create(__getProtoOf(mod)) : {};
@@ -14,6 +15,22 @@ var __toESM = (mod, isNodeMode, target) => {
       });
   return to;
 };
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
@@ -22,4 +39,4 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
-export { __toESM, __require };
+export { __toESM, __toCommonJS, __commonJS, __esm, __require };

package/dist/esm/index-sgtmgc4h.mjs

@@ -0,0 +1,423 @@
+import {
+  CopyIcon,
+  InfoBubble,
+  InputDragger,
+  MenuDivider,
+  RightAlignInput,
+  getDefaultOutputBaseName,
+  label,
+  optionRow,
+  rightRow,
+  showNotification,
+  useCopyFeedback,
+  validatePublicOutputName
+} from "./index-6cvm9a65.mjs";
+import {
+  Spacing
+} from "./index-xhe2m2qr.mjs";
+import {
+  BLUE,
+  CURRENT_COLOR_LOWERCASE,
+  INPUT_BACKGROUND,
+  LIGHT_TEXT,
+  WHITE
+} from "./index-jg13hf2g.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"
+  })
+});
+
+// src/components/Transcription/caption-output-name.ts
+var getDefaultCaptionOutputName = (src, displayName = "captions") => {
+  return `${getDefaultOutputBaseName(src, displayName, "captions")}-captions.json`;
+};
+var validateCaptionOutputName = (outName) => validatePublicOutputName({ extension: ".json", outName });
+
+// src/components/RenderModal/NumberSetting.tsx
+import { useCallback as useCallback2 } from "react";
+
+// src/components/RenderModal/OptionExplainerBubble.tsx
+import { BrowserSafeApis } from "@remotion/renderer/client";
+
+// src/components/RenderModal/CliCopyButton.tsx
+import { useCallback, useMemo, useState } from "react";
+
+// src/helpers/copy-text.ts
+var copyText = (cmd) => {
+  const permissionName = "clipboard-write";
+  return new Promise((resolve, reject) => {
+    navigator.permissions.query({ name: permissionName }).then((result) => {
+      if (result.state === "granted" || result.state === "prompt") {
+        navigator.clipboard.writeText(cmd).then(resolve).catch(reject);
+      } else {
+        reject(new Error("Permission to copy not granted"));
+      }
+    }).catch((err) => {
+      reject(err);
+    });
+  });
+};
+
+// src/components/RenderModal/CliCopyButton.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var svgStyle = {
+  width: 16,
+  height: 16,
+  verticalAlign: "sub"
+};
+var buttonStyle = {
+  width: "30px",
+  height: "30px",
+  border: "none",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var CliCopyButton = ({
+  valueToCopy
+}) => {
+  const { copied, markCopied } = useCopyFeedback();
+  const [hovered, setHovered] = useState(false);
+  const fillColor = useMemo(() => {
+    return hovered ? WHITE : LIGHT_TEXT;
+  }, [hovered]);
+  const copyIcon = /* @__PURE__ */ jsx2(CopyIcon, {
+    copied,
+    color: fillColor,
+    style: svgStyle
+  });
+  const onPointerEnter = useCallback(() => {
+    setHovered(true);
+  }, []);
+  const onPointerLeave = useCallback(() => {
+    setHovered(false);
+  }, []);
+  return /* @__PURE__ */ jsx2("button", {
+    type: "button",
+    onPointerEnter,
+    onPointerLeave,
+    style: buttonStyle,
+    onClick: () => {
+      copyText(valueToCopy).then(markCopied).catch((err) => {
+        showNotification(`Could not copy: ${err.message}`, 2000);
+      });
+    },
+    children: copyIcon
+  });
+};
+
+// src/components/RenderModal/OptionExplainer.tsx
+import { jsx as jsx3, jsxs, Fragment } from "react/jsx-runtime";
+var container = {
+  fontSize: 14,
+  paddingTop: 10,
+  paddingBottom: 10,
+  backgroundColor: INPUT_BACKGROUND,
+  color: WHITE
+};
+var padding = {
+  paddingLeft: 20,
+  paddingRight: 20
+};
+var title = {
+  fontSize: 14
+};
+var DESCRIPTION_FONT_SIZE_PX = 14;
+var description = {
+  color: LIGHT_TEXT,
+  fontSize: DESCRIPTION_FONT_SIZE_PX,
+  lineHeight: 1.5,
+  maxWidth: 400
+};
+var link = {
+  fontSize: 14,
+  maxWidth: 200,
+  color: BLUE,
+  wordWrap: "break-word",
+  textDecoration: "none"
+};
+var infoRow = {
+  ...padding,
+  fontSize: 14,
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center"
+};
+var infoRowLabel = {
+  width: 150,
+  fontSize: 14,
+  color: WHITE
+};
+var flexSpacer = {
+  display: "flex",
+  flex: 1
+};
+var copyWrapper = {
+  display: "flex",
+  justifyContent: "flex-end"
+};
+var OptionExplainer = ({
+  option,
+  extraInfoRows = [],
+  showApiOption = true,
+  showCliFlag = true
+}) => {
+  const shouldShowApiOption = showApiOption && option.ssrName !== null;
+  const shouldShowCliFlag = showCliFlag && option.cliFlag !== undefined;
+  const hasInfoRows = extraInfoRows.length > 0 || shouldShowCliFlag || shouldShowApiOption;
+  return /* @__PURE__ */ jsxs("div", {
+    style: container,
+    className: "__remotion-info-button-container",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        style: padding,
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            children: [
+              /* @__PURE__ */ jsx3("strong", {
+                style: title,
+                children: option.name
+              }),
+              option.docLink ? /* @__PURE__ */ jsxs(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsx3(Spacing, {
+                    x: 1
+                  }),
+                  /* @__PURE__ */ jsx3("a", {
+                    style: link,
+                    href: option.docLink,
+                    target: "_blank",
+                    children: "Docs"
+                  })
+                ]
+              }) : null
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            style: description,
+            children: [
+              /* @__PURE__ */ jsx3("style", {
+                children: `
+							.__remotion-option-explainer-description,
+							.__remotion-option-explainer-description * {
+								color: inherit;
+								font-size: ${DESCRIPTION_FONT_SIZE_PX}px;
+								line-height: inherit;
+							}
+
+							.__remotion-option-explainer-description a {
+								color: ${BLUE};
+								text-decoration: none;
+							}
+
+							.__remotion-option-explainer-description code {
+								color: ${BLUE};
+								font-family: monospace;
+							}
+						`
+              }),
+              /* @__PURE__ */ jsx3("div", {
+                className: "__remotion-option-explainer-description",
+                children: option.description("ssr")
+              })
+            ]
+          })
+        ]
+      }),
+      hasInfoRows ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx3(Spacing, {
+            y: 0.5,
+            block: true
+          }),
+          /* @__PURE__ */ jsx3(MenuDivider, {}),
+          /* @__PURE__ */ jsx3(Spacing, {
+            y: 0.5,
+            block: true
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            children: [
+              extraInfoRows.map((row) => /* @__PURE__ */ jsxs("div", {
+                style: infoRow,
+                children: [
+                  /* @__PURE__ */ jsx3("div", {
+                    style: infoRowLabel,
+                    children: row.label
+                  }),
+                  /* @__PURE__ */ jsx3("div", {
+                    style: flexSpacer
+                  }),
+                  /* @__PURE__ */ jsx3("code", {
+                    children: row.value
+                  }),
+                  /* @__PURE__ */ jsx3("div", {
+                    style: copyWrapper,
+                    children: /* @__PURE__ */ jsx3(CliCopyButton, {
+                      valueToCopy: row.value
+                    })
+                  })
+                ]
+              }, row.label)),
+              shouldShowCliFlag ? /* @__PURE__ */ jsxs("div", {
+                style: infoRow,
+                children: [
+                  /* @__PURE__ */ jsx3("div", {
+                    style: infoRowLabel,
+                    children: "CLI flag"
+                  }),
+                  /* @__PURE__ */ jsx3("div", {
+                    style: flexSpacer
+                  }),
+                  /* @__PURE__ */ jsxs("code", {
+                    children: [
+                      "--",
+                      option.cliFlag
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx3("div", {
+                    style: copyWrapper,
+                    children: /* @__PURE__ */ jsx3(CliCopyButton, {
+                      valueToCopy: option.cliFlag
+                    })
+                  })
+                ]
+              }) : null,
+              shouldShowApiOption ? /* @__PURE__ */ jsxs("div", {
+                style: infoRow,
+                children: [
+                  /* @__PURE__ */ jsx3("div", {
+                    style: infoRowLabel,
+                    children: "API option"
+                  }),
+                  /* @__PURE__ */ jsx3("div", {
+                    style: flexSpacer
+                  }),
+                  /* @__PURE__ */ jsx3("code", {
+                    children: option.ssrName
+                  }),
+                  /* @__PURE__ */ jsx3(Spacing, {
+                    x: 3.75
+                  })
+                ]
+              }) : null,
+              /* @__PURE__ */ jsx3("div", {
+                style: infoRow
+              })
+            ]
+          })
+        ]
+      }) : null
+    ]
+  });
+};
+
+// src/components/RenderModal/OptionExplainerBubble.tsx
+import { jsx as jsx4 } 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, {
+      extraInfoRows,
+      option,
+      showApiOption,
+      showCliFlag
+    })
+  });
+};
+var WebRendererOptionExplainerBubble = ({ id, apiName }) => {
+  return /* @__PURE__ */ jsx4(OptionExplainerBubble, {
+    extraInfoRows: [{ label: "API option", value: apiName }],
+    id,
+    showApiOption: false,
+    showCliFlag: false
+  });
+};
+var WebRendererCustomOptionExplainerBubble = ({ apiName, description: description2, docLink, name }) => {
+  const option = {
+    description: () => description2,
+    docLink,
+    name,
+    ssrName: null
+  };
+  return /* @__PURE__ */ jsx4(InfoBubble, {
+    title: "Learn more about this option",
+    children: /* @__PURE__ */ jsx4(OptionExplainer, {
+      extraInfoRows: [{ label: "API option", value: apiName }],
+      option,
+      showApiOption: false,
+      showCliFlag: false
+    })
+  });
+};
+
+// src/components/RenderModal/NumberSetting.tsx
+import { jsx as jsx5, 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) => {
+      const newSetting = step < 1 ? parseFloat(e) : parseInt(e, 10);
+      if (Number.isNaN(newSetting)) {
+        return q;
+      }
+      return Math.min(max ?? Infinity, Math.max(newSetting, min));
+    });
+  }, [max, min, onValueChanged, step]);
+  const onValueChange = useCallback2((newConcurrency) => {
+    onValueChanged(newConcurrency);
+  }, [onValueChanged]);
+  return /* @__PURE__ */ jsxs2("div", {
+    style: optionRow,
+    children: [
+      /* @__PURE__ */ jsxs2("div", {
+        style: label,
+        children: [
+          name,
+          hint ? /* @__PURE__ */ jsxs2(Fragment2, {
+            children: [
+              /* @__PURE__ */ jsx5(Spacing, {
+                x: 0.5
+              }),
+              typeof hint === "string" ? /* @__PURE__ */ jsx5(OptionExplainerBubble, {
+                id: hint
+              }) : /* @__PURE__ */ jsx5(InfoBubble, {
+                title: hint.title,
+                children: hint.content
+              })
+            ]
+          }) : null
+        ]
+      }),
+      /* @__PURE__ */ jsx5("div", {
+        style: rightRow,
+        children: /* @__PURE__ */ jsx5(RightAlignInput, {
+          children: /* @__PURE__ */ jsx5(InputDragger, {
+            value,
+            name: name.toLowerCase(),
+            "aria-label": `${name}: ${formatter ? formatter(value) : value}`,
+            onTextChange: onTextChanged,
+            onValueChange,
+            step,
+            placeholder: [min, max].map((f) => f !== null && f !== undefined ? f : "").join("-"),
+            min,
+            max,
+            formatter,
+            status: "ok",
+            rightAlign: true
+          })
+        })
+      })
+    ]
+  });
+};
+
+export { copyText, GearIcon, getDefaultCaptionOutputName, validateCaptionOutputName, OptionExplainerBubble, WebRendererOptionExplainerBubble, WebRendererCustomOptionExplainerBubble, NumberSetting };

package/dist/esm/index-te66vvrp.mjs

@@ -0,0 +1,142 @@
+import {
+  ExpandedFolderIconSolid,
+  RemotionInput,
+  getFileManagerName,
+  label,
+  optionRow,
+  rightRow,
+  showNotification
+} from "./index-6cvm9a65.mjs";
+import {
+  openInFileExplorer
+} from "./index-hy4xcgty.mjs";
+import {
+  getBrowserStudioOperations
+} from "./index-cw0pnpg5.mjs";
+import {
+  Column,
+  InlineAction,
+  Spacing,
+  ValidationMessage
+} from "./index-xhe2m2qr.mjs";
+import {
+  WHITE
+} from "./index-jg13hf2g.mjs";
+
+// src/components/RenderModal/RenderModalOutputName.tsx
+import { useCallback } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var existsMessageStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  minWidth: 0,
+  fontFamily: "sans-serif",
+  fontSize: 13,
+  lineHeight: "18px",
+  color: WHITE,
+  whiteSpace: "nowrap"
+};
+var openIconStyle = {
+  width: 12,
+  height: 12,
+  flexShrink: 0
+};
+var outputNameRow = {
+  ...optionRow,
+  columnGap: 16
+};
+var outputNameInputContainer = {
+  flex: 1,
+  minWidth: 0,
+  maxWidth: 280
+};
+var RenderModalOutputName = ({
+  ariaLabel,
+  existingOutputPath,
+  existence,
+  inputStyle,
+  outName,
+  onValueChange,
+  validationMessage,
+  label: labelText
+}) => {
+  const openExistingOutput = useCallback(() => {
+    openInFileExplorer({ directory: existingOutputPath ?? outName }).catch((err) => {
+      showNotification(`Could not open file: ${err.message}`, 2000);
+    });
+  }, [existingOutputPath, outName]);
+  const renderOpenIcon = useCallback((color) => {
+    return /* @__PURE__ */ jsx(ExpandedFolderIconSolid, {
+      style: openIconStyle,
+      color
+    });
+  }, []);
+  const fileManagerName = getFileManagerName(window.remotion_fileSystemPlatform);
+  const isBrowserStudio = getBrowserStudioOperations() !== null;
+  return /* @__PURE__ */ jsxs("div", {
+    style: outputNameRow,
+    children: [
+      /* @__PURE__ */ jsx(Column, {
+        children: /* @__PURE__ */ jsx("div", {
+          style: label,
+          children: labelText
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        style: rightRow,
+        children: /* @__PURE__ */ jsxs("div", {
+          style: outputNameInputContainer,
+          children: [
+            /* @__PURE__ */ jsx(RemotionInput, {
+              "aria-label": ariaLabel ?? undefined,
+              status: validationMessage ? "error" : existence ? "warning" : "ok",
+              style: inputStyle,
+              type: "text",
+              value: outName,
+              onChange: onValueChange,
+              rightAlign: true
+            }),
+            validationMessage ? /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                /* @__PURE__ */ jsx(Spacing, {
+                  y: 1,
+                  block: true
+                }),
+                /* @__PURE__ */ jsx(ValidationMessage, {
+                  align: "flex-end",
+                  message: validationMessage,
+                  type: "error"
+                })
+              ]
+            }) : existence ? /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                /* @__PURE__ */ jsx(Spacing, {
+                  y: 1,
+                  block: true
+                }),
+                /* @__PURE__ */ jsx(ValidationMessage, {
+                  align: "flex-end",
+                  message: /* @__PURE__ */ jsxs("span", {
+                    style: existsMessageStyle,
+                    children: [
+                      isBrowserStudio ? null : /* @__PURE__ */ jsx(InlineAction, {
+                        variant: null,
+                        onClick: openExistingOutput,
+                        renderAction: renderOpenIcon,
+                        title: `Open in ${fileManagerName}`
+                      }),
+                      "Exists, will be overwritten"
+                    ]
+                  }),
+                  type: "warning"
+                })
+              ]
+            }) : null
+          ]
+        })
+      })
+    ]
+  });
+};
+
+export { RenderModalOutputName };

package/dist/esm/index-v4tr1bft.mjs

@@ -0,0 +1,20 @@
+// src/components/RenderQueue/load-model-for-job.ts
+var loadModelForJob = async ({
+  isModelCached,
+  loadModel,
+  model,
+  progressSpan,
+  progressStart,
+  updateProgress
+}) => {
+  const cached = await isModelCached(model);
+  await loadModel(model, (progress) => {
+    const percentage = progress === null ? "" : ` ${Math.round(progress * 100)}%`;
+    updateProgress({
+      message: `${cached ? "Loading" : "Downloading"} ${model}${percentage}`,
+      value: progressStart + (progress ?? 0) * progressSpan
+    });
+  });
+};
+
+export { loadModelForJob };