@remotion/studio 4.0.522 → 4.0.524

package/dist/esm/index-2j3d1g81.mjs

@@ -0,0 +1,261 @@
+import {
+  CheckCircleFilled,
+  CloudDownloadIcon,
+  InlineAction,
+  Spinner,
+  TrashIcon,
+  VERTICAL_SCROLLBAR_CLASSNAME,
+  ValidationMessage,
+  optionsPanel
+} from "./index-yfrysr5f.mjs";
+import {
+  BLUE,
+  BORDER_WHITE_ALPHA_12,
+  LIGHT_TEXT,
+  WHITE
+} from "./index-k426ye99.mjs";
+
+// src/components/ModelManager.tsx
+import { formatBytes } from "@remotion/studio-shared";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var modelPanel = {
+  ...optionsPanel,
+  flexDirection: "column"
+};
+var hiddenPanel = { display: "none" };
+var container = {
+  boxSizing: "border-box",
+  flex: 1,
+  fontFamily: "sans-serif",
+  minWidth: 0,
+  padding: "16px 16px 0",
+  width: "100%"
+};
+var flushContainer = {
+  ...container,
+  padding: "16px 0 0"
+};
+var descriptionStyle = {
+  color: LIGHT_TEXT,
+  fontSize: 13,
+  lineHeight: 1.5,
+  margin: 0,
+  whiteSpace: "pre-line"
+};
+var list = { marginTop: 14 };
+var modelRow = {
+  alignItems: "center",
+  borderBottom: BORDER_WHITE_ALPHA_12,
+  display: "flex",
+  gap: 10,
+  minHeight: 38,
+  padding: "0 10px"
+};
+var lastModelRow = {
+  ...modelRow,
+  borderBottom: "none"
+};
+var statusIcon = {
+  flexShrink: 0,
+  height: 14,
+  width: 14
+};
+var modelName = {
+  color: WHITE,
+  flex: 1,
+  fontFamily: "monospace",
+  fontSize: 13,
+  lineHeight: 1.4,
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var status = {
+  color: LIGHT_TEXT,
+  fontSize: 12,
+  fontVariantNumeric: "tabular-nums",
+  lineHeight: 1.4,
+  whiteSpace: "nowrap"
+};
+var actionIcon = { height: 14, width: 14 };
+var actionSlot = {
+  alignItems: "center",
+  display: "inline-flex",
+  flexShrink: 0,
+  height: 24,
+  justifyContent: "center",
+  width: 24
+};
+var ModelManager = ({
+  ariaLabel,
+  availableModels,
+  description,
+  indent,
+  isModelCached,
+  loadModel,
+  prepare,
+  removeModel,
+  visible
+}) => {
+  const mounted = useRef(true);
+  const initialized = useRef(false);
+  const [cachedModels, setCachedModels] = useState(null);
+  const [actionState, setActionState] = useState({
+    type: "idle"
+  });
+  const [cacheCheckError, setCacheCheckError] = useState(null);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (!visible || initialized.current) {
+      return;
+    }
+    initialized.current = true;
+    Promise.resolve().then(() => prepare?.()).then(() => Promise.all(availableModels.map(async ({ name }) => await isModelCached(name) ? name : null))).then((models) => {
+      if (mounted.current) {
+        const cached = new Set;
+        for (const model of models) {
+          if (model !== null) {
+            cached.add(model);
+          }
+        }
+        setCachedModels(cached);
+      }
+    }).catch((error) => {
+      if (mounted.current) {
+        setCachedModels(new Set);
+        setCacheCheckError(error instanceof Error ? error.message : String(error));
+      }
+    });
+  }, [availableModels, isModelCached, prepare, visible]);
+  const downloadModel = useCallback((model) => {
+    setActionState({ type: "downloading", model, progress: 0 });
+    loadModel(model, (progress) => {
+      if (mounted.current) {
+        setActionState({ type: "downloading", model, progress });
+      }
+    }).then(() => {
+      if (mounted.current) {
+        setCachedModels((current) => new Set([...current ?? [], model]));
+        setActionState({ type: "idle" });
+      }
+    }).catch((error) => {
+      if (mounted.current) {
+        setActionState({
+          type: "error",
+          model,
+          message: error instanceof Error ? error.message : String(error)
+        });
+      }
+    });
+  }, [loadModel]);
+  const remove = useCallback((model) => {
+    setActionState({ type: "removing", model });
+    removeModel(model).then(() => {
+      if (mounted.current) {
+        setCachedModels((current) => {
+          const next = new Set(current ?? []);
+          next.delete(model);
+          return next;
+        });
+        setActionState({ type: "idle" });
+      }
+    }).catch((error) => {
+      if (mounted.current) {
+        setActionState({
+          type: "error",
+          model,
+          message: error instanceof Error ? error.message : String(error)
+        });
+      }
+    });
+  }, [removeModel]);
+  const renderDownloadIcon = useCallback((color) => {
+    return /* @__PURE__ */ jsx(CloudDownloadIcon, {
+      color,
+      style: actionIcon
+    });
+  }, []);
+  const renderRemoveIcon = useCallback((color) => {
+    return /* @__PURE__ */ jsx(TrashIcon, {
+      color,
+      style: actionIcon
+    });
+  }, []);
+  const actionInProgress = actionState.type === "downloading" || actionState.type === "removing";
+  return /* @__PURE__ */ jsx("div", {
+    style: visible ? modelPanel : hiddenPanel,
+    className: VERTICAL_SCROLLBAR_CLASSNAME,
+    children: /* @__PURE__ */ jsxs("div", {
+      style: indent ? container : flushContainer,
+      children: [
+        description === null ? null : /* @__PURE__ */ jsx("p", {
+          style: descriptionStyle,
+          children: description
+        }),
+        cacheCheckError ? /* @__PURE__ */ jsx(ValidationMessage, {
+          align: "flex-start",
+          message: cacheCheckError,
+          type: "error"
+        }) : null,
+        /* @__PURE__ */ jsx("div", {
+          style: description === null ? undefined : list,
+          role: "list",
+          "aria-label": ariaLabel,
+          children: availableModels.map((model, index) => {
+            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,
+              children: [
+                /* @__PURE__ */ jsx("span", {
+                  style: modelName,
+                  children: model.name
+                }),
+                /* @__PURE__ */ jsx("span", {
+                  style: status,
+                  title: modelStatus,
+                  children: modelStatus
+                }),
+                cached ? /* @__PURE__ */ jsx(CheckCircleFilled, {
+                  "aria-hidden": true,
+                  style: { ...statusIcon, fill: BLUE }
+                }) : null,
+                processingThisModel ? /* @__PURE__ */ jsx("span", {
+                  style: actionSlot,
+                  children: /* @__PURE__ */ jsx(Spinner, {
+                    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
+                })
+              ]
+            }, model.name);
+          })
+        })
+      ]
+    })
+  });
+};
+
+export { ModelManager };

package/dist/esm/index-5zrb1ft4.mjs

@@ -0,0 +1,39 @@
+// src/helpers/studio-runtime-config.ts
+var DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
+var defaultStudioRuntimeConfig = {
+  askAIEnabled: false,
+  bufferStateDelayInMilliseconds: null,
+  defaultCodingAgent: null,
+  defaultEditor: null,
+  interactivityEnabled: true,
+  keyboardShortcutsEnabled: true,
+  maxTimelineTracks: null,
+  publicLicenseKey: null,
+  configFileStudioSettings: null
+};
+var getStudioRuntimeConfig = () => {
+  if (typeof window === "undefined") {
+    return defaultStudioRuntimeConfig;
+  }
+  return window.remotion_studioConfig ?? defaultStudioRuntimeConfig;
+};
+var getStudioAskAIEnabled = () => {
+  return getStudioRuntimeConfig().askAIEnabled;
+};
+var getStudioInteractivityEnabled = () => {
+  return getStudioRuntimeConfig().interactivityEnabled;
+};
+var getStudioKeyboardShortcutsEnabled = () => {
+  return getStudioRuntimeConfig().keyboardShortcutsEnabled;
+};
+var getStudioKeyboardShortcuts = () => {
+  return getStudioRuntimeConfig().keyboardShortcuts ?? null;
+};
+var getStudioMaxTimelineTracks = () => {
+  return getStudioRuntimeConfig().maxTimelineTracks;
+};
+var getStudioBufferStateDelayInMilliseconds = () => {
+  return getStudioRuntimeConfig().bufferStateDelayInMilliseconds ?? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS;
+};
+
+export { getStudioAskAIEnabled, getStudioInteractivityEnabled, getStudioKeyboardShortcutsEnabled, getStudioKeyboardShortcuts, getStudioMaxTimelineTracks, getStudioBufferStateDelayInMilliseconds };

package/dist/esm/index-7tt71e8n.mjs

@@ -0,0 +1,36 @@
+// src/components/use-model-cache-status.ts
+import { useEffect, useState } from "react";
+var useModelCacheStatus = ({
+  isModelCached,
+  models,
+  refreshKey
+}) => {
+  const [cachedModels, setCachedModels] = useState(new Set);
+  useEffect(() => {
+    let cancelled = false;
+    Promise.all(models.map(async ({ name }) => ({
+      cached: await isModelCached(name),
+      name
+    }))).then((results) => {
+      if (!cancelled) {
+        const nextCachedModels = new Set;
+        for (const result of results) {
+          if (result.cached) {
+            nextCachedModels.add(result.name);
+          }
+        }
+        setCachedModels(nextCachedModels);
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setCachedModels(new Set);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isModelCached, models, refreshKey]);
+  return cachedModels;
+};
+
+export { useModelCacheStatus };