sanity-plugin-mux-input 2.15.0 → 2.17.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, useDocumentValues, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, useCurrentUser, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { ErrorOutlineIcon, InfoOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, ChevronLeftIcon, ChevronRightIcon, SyncIcon, SortIcon, UploadIcon, TranslateIcon, DownloadIcon, AddIcon, ChevronUpIcon, ChevronDownIcon, TrashIcon, EditIcon, WarningOutlineIcon, PublishIcon, DocumentIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, CheckmarkIcon, LockIcon, PlayIcon, PlugIcon, EllipsisHorizontalIcon, ImageIcon, ResetIcon, WarningFilledIcon, DocumentVideoIcon } from "@sanity/icons";
-import { Dialog, Stack, Card, Text, Button, useTheme_v2, Flex, Box, TextInput, Checkbox, Code, Inline, Spinner, Heading, Label as Label$1, MenuButton, Menu, MenuItem, useToast, Autocomplete, Tooltip, TabList, Tab, TabPanel, Grid, useClickOutsideEvent, Popover, MenuDivider, Radio, rem } from "@sanity/ui";
+import { Dialog, Stack, Card, Text, Button, useTheme_v2, Flex, Box, TextInput, Checkbox, Code, Inline, Spinner, Heading, Label as Label$1, Radio, MenuButton, Menu, MenuItem, useToast, Autocomplete, Tooltip, TabList, Tab, TabPanel, Grid, useClickOutsideEvent, Popover, MenuDivider, rem } from "@sanity/ui";
 import React, { createContext, useContext, useState, useMemo, useCallback, useReducer, useId, memo, useRef, useEffect, Suspense, isValidElement, PureComponent, createElement, forwardRef } from "react";
 import compact from "lodash/compact.js";
 import toLower from "lodash/toLower.js";
@@ -973,7 +973,7 @@ function tryWithSuspend(block, onError) {
     return onError ? onError(errorOrPromise) : void 0;
   }
 }
-const Image = styled.img`
+const Image$1 = styled.img`
   transition: opacity 0.175s ease-out 0s;
   display: block;
   width: 100%;
@@ -1051,7 +1051,7 @@ function VideoThumbnail({
           }
         ),
         /* @__PURE__ */ jsx(
-          Image,
+          Image$1,
           {
             src: thumbnailSrc ?? void 0,
             alt: `Preview for ${staticImage ? "image" : "video"} ${asset.filename || asset.assetId}`,
@@ -1321,6 +1321,26 @@ const PageSelector = (props) => {
     )
   ] });
 };
+function addKeysToMuxData(data) {
+  return {
+    ...data,
+    tracks: data.tracks?.map((track) => ({
+      ...track,
+      _key: uuid()
+    })),
+    playback_ids: data.playback_ids?.map((playbackId) => ({
+      ...playbackId,
+      _key: uuid()
+    })),
+    static_renditions: data.static_renditions ? {
+      ...data.static_renditions,
+      files: data.static_renditions.files?.map((file) => ({
+        ...file,
+        _key: uuid()
+      }))
+    } : void 0
+  };
+}
 function useResyncMuxMetadata() {
   const documentStore = useDocumentStore(), client = useClient$1({
     apiVersion: SANITY_API_VERSION
@@ -1369,6 +1389,27 @@ function useResyncMuxMetadata() {
       }
     }
   }
+  async function syncFullData() {
+    if (matchedAssets) {
+      setResyncState("syncing");
+      try {
+        const tx = client.transaction();
+        matchedAssets.forEach((matched) => {
+          if (!matched.muxAsset) return;
+          const dataWithKeys = addKeysToMuxData(matched.muxAsset);
+          tx.patch(matched.sanityDoc._id, {
+            set: {
+              filename: matched.muxTitle || matched.currentTitle || "",
+              status: matched.muxAsset.status,
+              data: dataWithKeys
+            }
+          });
+        }), await tx.commit({ returnDocuments: !1 }), setResyncState("done");
+      } catch (error) {
+        setResyncState("error"), setResyncError(error);
+      }
+    }
+  }
   return {
     sanityAssetsLoading,
     closeDialog,
@@ -1378,6 +1419,7 @@ function useResyncMuxMetadata() {
     hasSecrets,
     syncAllVideos,
     syncOnlyEmpty,
+    syncFullData,
     matchedAssets,
     muxAssets,
     openDialog
@@ -1393,22 +1435,78 @@ const useSanityAssets = createHookFromObservableFactory(
     }
   )
 );
+function OptionCard({
+  id,
+  selected,
+  onSelect,
+  title,
+  count,
+  description,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      as: "label",
+      padding: 3,
+      radius: 2,
+      border: !0,
+      tone: selected ? "primary" : "default",
+      style: {
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1
+      },
+      children: /* @__PURE__ */ jsxs(Flex, { gap: 3, align: "flex-start", children: [
+        /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(
+          Radio,
+          {
+            checked: selected,
+            onChange: () => onSelect(id),
+            disabled,
+            name: "sync-option"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, flex: 1, children: [
+          /* @__PURE__ */ jsx(Flex, { align: "center", gap: 2, children: /* @__PURE__ */ jsxs(Text, { size: 2, weight: "semibold", children: [
+            title,
+            " (",
+            count,
+            ")"
+          ] }) }),
+          /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: description })
+        ] })
+      ] })
+    }
+  );
+}
 function ResyncMetadataDialog(props) {
-  const { resyncState } = props, canTriggerResync = resyncState === "idle" || resyncState === "error", isResyncing = resyncState === "syncing", isDone = resyncState === "done", videosToUpdate = props.matchedAssets?.filter((m) => m.muxAsset).length || 0, videosWithEmptyOrPlaceholder = props.matchedAssets?.filter(
+  const { resyncState } = props, videosToUpdate = props.matchedAssets?.filter((m) => m.muxAsset).length || 0, videosWithEmptyOrPlaceholder = props.matchedAssets?.filter(
     (m) => m.muxAsset && m.muxTitle && isEmptyOrPlaceholderTitle(m.currentTitle, m.muxAsset.id)
-  ).length || 0;
+  ).length || 0, hasEmptyTitles = videosWithEmptyOrPlaceholder > 0, defaultOption = hasEmptyTitles ? "fillEmpty" : "syncTitles", [selectedOption, setSelectedOption] = useState(defaultOption), canTriggerResync = resyncState === "idle" || resyncState === "error", isResyncing = resyncState === "syncing", isDone = resyncState === "done", isLoading = props.muxAssets.loading || props.sanityAssetsLoading, handleSync = () => {
+    switch (selectedOption) {
+      case "fillEmpty":
+        props.syncOnlyEmpty();
+        break;
+      case "syncTitles":
+        props.syncAllVideos();
+        break;
+      case "fullResync":
+        props.syncFullData();
+        break;
+    }
+  };
   return /* @__PURE__ */ jsx(
     Dialog,
     {
       animate: !0,
-      header: "Resync Metadata from Mux",
+      header: "Sync with Mux",
       zOffset: DIALOGS_Z_INDEX,
       id: "resync-metadata-dialog",
       onClose: props.closeDialog,
       onClickOutside: props.closeDialog,
       width: 1,
       position: "fixed",
-      footer: !isDone && /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
+      footer: !isDone && /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", gap: 2, children: [
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -1416,97 +1514,104 @@ function ResyncMetadataDialog(props) {
             padding: 3,
             mode: "ghost",
             text: "Cancel",
-            tone: "critical",
             onClick: props.closeDialog,
             disabled: isResyncing
           }
         ),
-        /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-          videosWithEmptyOrPlaceholder > 0 && /* @__PURE__ */ jsx(
-            Button,
-            {
-              fontSize: 2,
-              padding: 3,
-              mode: "ghost",
-              text: `Update empty (${videosWithEmptyOrPlaceholder})`,
-              tone: "caution",
-              onClick: props.syncOnlyEmpty,
-              disabled: isResyncing || !canTriggerResync
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              icon: SyncIcon,
-              fontSize: 2,
-              padding: 3,
-              mode: "ghost",
-              text: `Update all (${videosToUpdate})`,
-              tone: "positive",
-              onClick: props.syncAllVideos,
-              iconRight: isResyncing && Spinner,
-              disabled: !canTriggerResync
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: SyncIcon,
+            fontSize: 2,
+            padding: 3,
+            text: "Run sync",
+            tone: "primary",
+            onClick: handleSync,
+            iconRight: isResyncing && Spinner,
+            disabled: !canTriggerResync || isLoading
+          }
+        )
       ] }) }),
       children: /* @__PURE__ */ jsxs(Box, { padding: 4, children: [
-        (props.muxAssets.loading || props.sanityAssetsLoading) && /* @__PURE__ */ jsx(Card, { tone: "primary", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+        isLoading && /* @__PURE__ */ jsx(Card, { tone: "primary", marginBottom: 4, padding: 3, border: !0, radius: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
           /* @__PURE__ */ jsx(Spinner, { muted: !0, size: 4 }),
           /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
             /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "Loading assets from Mux" }),
-            /* @__PURE__ */ jsx(Text, { size: 1, children: "This may take a while." })
+            /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "This may take a while." })
           ] })
         ] }) }),
-        props.muxAssets.error && /* @__PURE__ */ jsx(Card, { tone: "critical", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+        props.muxAssets.error && /* @__PURE__ */ jsx(Card, { tone: "critical", marginBottom: 4, padding: 3, border: !0, radius: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
           /* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }),
           /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
             /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "There was an error getting data from Mux" }),
             /* @__PURE__ */ jsx(Text, { size: 1, children: "Please try again or contact a developer for help." })
           ] })
         ] }) }),
-        resyncState === "syncing" && /* @__PURE__ */ jsx(Card, { tone: "primary", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+        resyncState === "syncing" && /* @__PURE__ */ jsx(Card, { tone: "primary", marginBottom: 4, padding: 3, border: !0, radius: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
           /* @__PURE__ */ jsx(Spinner, { muted: !0, size: 4 }),
           /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "Updating video metadata" }),
-            /* @__PURE__ */ jsx(Text, { size: 1, children: "Syncing titles from Mux..." })
+            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "Syncing metadata" }),
+            /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "Updating videos from Mux..." })
           ] })
         ] }) }),
-        resyncState === "error" && /* @__PURE__ */ jsx(Card, { tone: "critical", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+        resyncState === "error" && /* @__PURE__ */ jsx(Card, { tone: "critical", marginBottom: 4, padding: 3, border: !0, radius: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
           /* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }),
           /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
             /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "There was an error syncing metadata" }),
             /* @__PURE__ */ jsx(Text, { size: 1, children: props.resyncError ? `Error: ${props.resyncError}` : "Please try again or contact a developer for help." })
           ] })
         ] }) }),
-        resyncState === "done" && /* @__PURE__ */ jsxs(Stack, { paddingY: 5, marginBottom: 4, space: 3, style: { textAlign: "center" }, children: [
+        resyncState === "done" && /* @__PURE__ */ jsxs(Stack, { paddingY: 5, space: 3, style: { textAlign: "center" }, children: [
           /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, { fontSize: 48 }) }),
-          /* @__PURE__ */ jsx(Heading, { size: 2, children: "Metadata synced successfully" }),
-          /* @__PURE__ */ jsx(Text, { size: 2, children: "All video titles have been updated from Mux." })
+          /* @__PURE__ */ jsx(Heading, { size: 2, children: "Sync completed" }),
+          /* @__PURE__ */ jsx(Text, { size: 2, muted: !0, children: "Videos have been updated from Mux." })
         ] }),
-        resyncState === "idle" && !props.muxAssets.loading && !props.sanityAssetsLoading && /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
-          /* @__PURE__ */ jsxs(Heading, { size: 1, children: [
-            "There ",
-            videosToUpdate === 1 ? "is" : "are",
-            " ",
+        !isDone && !isLoading && !props.muxAssets.error && /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
+          /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+            "Found ",
             videosToUpdate,
             " video",
             videosToUpdate === 1 ? "" : "s",
-            " with Mux metadata"
+            " linked to Mux."
           ] }),
-          /* @__PURE__ */ jsx(Text, { size: 2, children: "This will update video titles in Sanity to match those in Mux. No new videos will be created." }),
-          videosWithEmptyOrPlaceholder > 0 && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "caution", border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "flex-start", gap: 2, children: [
-            /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(ErrorOutlineIcon, {}) }),
-            /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-              /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "Videos with empty or placeholder titles" }),
-              /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
-                videosWithEmptyOrPlaceholder,
-                " video",
-                videosWithEmptyOrPlaceholder === 1 ? "" : "s",
-                ' without titles or with placeholder titles (e.g., "Asset #123") can be updated selectively.'
-              ] })
-            ] })
-          ] }) })
+          /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+            hasEmptyTitles && /* @__PURE__ */ jsx(
+              OptionCard,
+              {
+                id: "fillEmpty",
+                selected: selectedOption === "fillEmpty",
+                onSelect: setSelectedOption,
+                title: "Fill missing titles only",
+                count: videosWithEmptyOrPlaceholder,
+                description: "Updates only videos without a title or with placeholder titles (e.g., 'Asset #123') using the title from Mux.",
+                disabled: isResyncing
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              OptionCard,
+              {
+                id: "syncTitles",
+                selected: selectedOption === "syncTitles",
+                onSelect: setSelectedOption,
+                title: "Sync all titles",
+                count: videosToUpdate,
+                description: "Replaces the title in Sanity with the title from Mux for all videos.",
+                disabled: isResyncing
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              OptionCard,
+              {
+                id: "fullResync",
+                selected: selectedOption === "fullResync",
+                onSelect: setSelectedOption,
+                title: "Full resync",
+                count: videosToUpdate,
+                description: "Updates all fields from Mux including status, duration, tracks, captions, and renditions.",
+                disabled: isResyncing
+              }
+            )
+          ] })
         ] })
       ] })
     }
@@ -1515,7 +1620,7 @@ function ResyncMetadataDialog(props) {
 function ResyncMetadata() {
   const resyncMetadata = useResyncMuxMetadata();
   if (resyncMetadata.hasSecrets)
-    return resyncMetadata.dialogOpen ? /* @__PURE__ */ jsx(ResyncMetadataDialog, { ...resyncMetadata }) : /* @__PURE__ */ jsx(Button, { mode: "bleed", text: "Resync Metadata", onClick: resyncMetadata.openDialog });
+    return resyncMetadata.dialogOpen ? /* @__PURE__ */ jsx(ResyncMetadataDialog, { ...resyncMetadata }) : /* @__PURE__ */ jsx(Button, { mode: "bleed", text: "Sync with Mux", onClick: resyncMetadata.openDialog });
 }
 const CONTEXT_MENU_POPOVER_PROPS = {
   constrainSize: !0,
@@ -1596,6 +1701,55 @@ function StopWatchIcon(props) {
     }
   );
 }
+function useResyncAsset(options) {
+  const client = useClient(), toast = useToast(), [resyncState, setResyncState] = useState("idle"), [resyncError, setResyncError] = useState(null), showToast = options?.showToast ?? !1, resyncAsset = useCallback(
+    async (asset) => {
+      if (!asset.assetId) {
+        showToast && toast.push({
+          title: "Cannot resync",
+          description: "Asset has no Mux ID",
+          status: "error"
+        }), options?.onError?.(new Error("Asset has no Mux ID"));
+        return;
+      }
+      if (!asset._id) {
+        showToast && toast.push({
+          title: "Cannot resync",
+          description: "Asset has no document ID",
+          status: "error"
+        }), options?.onError?.(new Error("Asset has no document ID"));
+        return;
+      }
+      setResyncState("syncing"), setResyncError(null);
+      try {
+        const muxData = (await getAsset(client, asset.assetId)).data, dataWithKeys = addKeysToMuxData(muxData);
+        return await client.patch(asset._id).set({
+          status: muxData.status,
+          data: dataWithKeys,
+          ...muxData.meta?.title && { filename: muxData.meta.title }
+        }).commit({ returnDocuments: !1 }), setResyncState("success"), showToast && toast.push({
+          title: "Asset synced",
+          description: "Data has been updated from Mux",
+          status: "success"
+        }), options?.onSuccess?.(muxData), muxData;
+      } catch (error) {
+        setResyncState("error"), setResyncError(error), console.error("Failed to refresh asset data:", error), showToast && toast.push({
+          title: "Sync failed",
+          description: "Could not sync asset from Mux",
+          status: "error"
+        }), options?.onError?.(error);
+        return;
+      }
+    },
+    [client, toast, options, showToast]
+  );
+  return {
+    resyncState,
+    resyncError,
+    resyncAsset,
+    isResyncing: resyncState === "syncing"
+  };
+}
 function extractErrorMessage(error, defaultMessage = "Failed to process request") {
   let message = "";
   if (error && typeof error == "object") {
@@ -2498,20 +2652,7 @@ function TextTracksManager({
   tracks: propTracks,
   collapseTracks = !1
 }) {
-  const client = useClient(), toast = useToast(), dialogId = `DeleteCaptionDialog${useId()}`, [downloadingTrackId, setDownloadingTrackId] = useState(null), [deletingTrackId, setDeletingTrackId] = useState(null), [addedTracks, setAddedTracks] = useState([]), [updatedTracks, setUpdatedTracks] = useState(/* @__PURE__ */ new Map()), [trackActivityOrder, setTrackActivityOrder] = useState(/* @__PURE__ */ new Map()), [autogeneratedTrackIds, setAutogeneratedTrackIds] = useState(/* @__PURE__ */ new Set()), [trackToDelete, setTrackToDelete] = useState(null), [trackToEdit, setTrackToEdit] = useState(null), [showAddDialog, setShowAddDialog] = useState(!1), [isExpanded, setIsExpanded] = useState(!1), MAX_VISIBLE_TRACKS = 4;
-  useEffect(() => {
-    if (!asset.assetId || !asset._id) return;
-    const assetId = asset.assetId, documentId = asset._id;
-    (async () => {
-      try {
-        const response = await getAsset(client, assetId);
-        await client.patch(documentId).set({ data: response.data, status: response.data.status }).commit();
-      } catch (error) {
-        console.error("Failed to refresh asset data:", error);
-      }
-    })();
-  }, [asset.assetId, asset._id, client]);
-  const activeTracks = (propTracks || asset.data?.tracks?.filter((track) => track.type === "text") || []).filter(
+  const client = useClient(), toast = useToast(), dialogId = `DeleteCaptionDialog${useId()}`, { resyncAsset } = useResyncAsset(), [downloadingTrackId, setDownloadingTrackId] = useState(null), [deletingTrackId, setDeletingTrackId] = useState(null), [addedTracks, setAddedTracks] = useState([]), [updatedTracks, setUpdatedTracks] = useState(/* @__PURE__ */ new Map()), [trackActivityOrder, setTrackActivityOrder] = useState(/* @__PURE__ */ new Map()), [autogeneratedTrackIds, setAutogeneratedTrackIds] = useState(/* @__PURE__ */ new Set()), [trackToDelete, setTrackToDelete] = useState(null), [trackToEdit, setTrackToEdit] = useState(null), [showAddDialog, setShowAddDialog] = useState(!1), [isExpanded, setIsExpanded] = useState(!1), MAX_VISIBLE_TRACKS = 4, activeTracks = (propTracks || asset.data?.tracks?.filter((track) => track.type === "text") || []).filter(
     (track) => track.id && (track.status === "ready" || track.status === "preparing" || track.status === "errored")
   ), allTracks = useMemo(() => {
     const tracksWithUpdates = activeTracks.map((track) => updatedTracks.get(track.id) || track), isMockTrackReplaced = (mockTrack, realTracksList) => !mockTrack.id || !mockTrack.id.startsWith("generating-") ? !1 : realTracksList.some((realTrack) => {
@@ -2542,11 +2683,11 @@ function TextTracksManager({
   }, [activeTracks, addedTracks]), useEffect(() => {
     if (allTracks.filter((track) => track.status === "preparing").length === 0 || !asset.assetId || !asset._id)
       return;
-    const assetId = asset.assetId, documentId = asset._id, interval = setInterval(async () => {
+    const interval = setInterval(async () => {
       try {
-        const response = await getAsset(client, assetId);
-        await client.patch(documentId).set({ data: response.data, status: response.data.status }).commit();
-        const fetchedTracks = response.data.tracks?.filter((track) => track.type === "text") || [], isMockTrackReplaced = (mockTrack, fetchedTracksList) => !mockTrack.id || !mockTrack.id.startsWith("generating-") ? !1 : fetchedTracksList.some((realTrack) => {
+        const muxData = await resyncAsset(asset);
+        if (!muxData) return;
+        const fetchedTracks = muxData.tracks?.filter((track) => track.type === "text") || [], isMockTrackReplaced = (mockTrack, fetchedTracksList) => !mockTrack.id || !mockTrack.id.startsWith("generating-") ? !1 : fetchedTracksList.some((realTrack) => {
           const nameMatches = realTrack.name === mockTrack.name, languageMatches = realTrack.language_code === mockTrack.language_code;
           return !nameMatches || !languageMatches ? !1 : realTrack.status === "ready" ? realTrack.text_source === "generated_live" || realTrack.text_source === "generated_live_final" || realTrack.text_source === "generated_vod" : realTrack.status === "preparing";
         }), newAutogeneratedIds = /* @__PURE__ */ new Set();
@@ -2583,7 +2724,7 @@ function TextTracksManager({
       }
     }, 3e3);
     return () => clearInterval(interval);
-  }, [allTracks, asset.assetId, asset._id, client]);
+  }, [allTracks, asset, resyncAsset]);
   const visibleTracks = allTracks.filter(
     (track) => track.status === "ready" || track.status === "preparing" || track.status === "errored"
   ).sort((a2, b) => {
@@ -2619,14 +2760,7 @@ function TextTracksManager({
     try {
       if (!asset.assetId)
         throw new Error("Asset ID is required");
-      if (await deleteTextTrack(client, asset.assetId, track.id), asset._id)
-        try {
-          const response = await getAsset(client, asset.assetId);
-          await client.patch(asset._id).set({ data: response.data, status: response.data.status }).commit();
-        } catch (refreshError) {
-          console.error("Failed to refresh asset data:", refreshError);
-        }
-      toast.push({
+      await deleteTextTrack(client, asset.assetId, track.id), await resyncAsset(asset), toast.push({
         title: "Successfully deleted caption track",
         status: "success"
       }), setAddedTracks((prev) => prev.filter((t) => t.id !== track.id)), setUpdatedTracks((prev) => {
@@ -2654,7 +2788,7 @@ function TextTracksManager({
       return newMap.set(track.id, prev.size + 1), newMap;
     }), setShowAddDialog(!1);
   }, handleUpdateTrack = async (updatedTrack, oldTrackId) => {
-    if (oldTrackId && (setAddedTracks((prev) => prev.filter((t) => t.id !== oldTrackId)), setUpdatedTracks((prev) => {
+    oldTrackId && (setAddedTracks((prev) => prev.filter((t) => t.id !== oldTrackId)), setUpdatedTracks((prev) => {
       const newMap = new Map(prev);
       return newMap.delete(oldTrackId), newMap;
     }), setTrackActivityOrder((prev) => {
@@ -2669,13 +2803,7 @@ function TextTracksManager({
     }), setTrackActivityOrder((prev) => {
       const newMap = new Map(prev);
       return newMap.set(updatedTrack.id, prev.size + 1), newMap;
-    }), setTrackToEdit(null), asset._id && asset.assetId)
-      try {
-        const response = await getAsset(client, asset.assetId);
-        await client.patch(asset._id).set({ data: response.data, status: response.data.status }).commit();
-      } catch (refreshError) {
-        console.error("Failed to refresh asset data:", refreshError);
-      }
+    }), setTrackToEdit(null), await resyncAsset(asset);
   }, getTrackSourceLabel = (track) => track.id && track.id.startsWith("generating-") || track.id && autogeneratedTrackIds.has(track.id) || track.text_source === "generated_live_final" || track.text_source === "generated_live" || track.text_source === "generated_vod" ? "Auto-generated" : track.text_source === "uploaded" ? "Uploaded" : "Custom";
   if (visibleTracks.length === 0 && !showAddDialog)
     return /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
@@ -2931,7 +3059,7 @@ function VideoPlayer({
   hlsConfig,
   ...props
 }) {
-  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = useRef(null), [error, setError] = useState(), playbackId = useMemo(() => {
+  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = useRef(null), playerContainerRef = useRef(null), [error, setError] = useState(), playbackId = useMemo(() => {
     try {
       return getPlaybackId(asset, ["public", "signed", "drm"]);
     } catch {
@@ -2989,6 +3117,7 @@ function VideoPlayer({
     /* @__PURE__ */ jsxs(
       Card,
       {
+        ref: playerContainerRef,
         tone: "transparent",
         style: {
           aspectRatio,
@@ -3025,7 +3154,7 @@ function VideoPlayer({
                   crossOrigin: "anonymous",
                   metadata: {
                     player_name: "Sanity Admin Dashboard",
-                    player_version: "2.15.0",
+                    player_version: "2.17.0",
                     page_type: "Preview Player"
                   },
                   audio: isAudio,
@@ -3342,7 +3471,10 @@ function getVideoMetadata(doc) {
 function useVideoDetails(props) {
   const documentStore = useDocumentStore(), toast = useToast(), client = useClient(), [references, referencesLoading] = useDocReferences(
     useMemo(() => ({ documentStore, id: props.asset._id }), [documentStore, props.asset._id])
-  ), [originalAsset, setOriginalAsset] = useState(() => props.asset), [filename, setFilename] = useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({ ...props.asset, filename }), [state, setState] = useState("idle");
+  ), [originalAsset, setOriginalAsset] = useState(() => props.asset), [filename, setFilename] = useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({ ...props.asset, filename }), [state, setState] = useState("idle"), { resyncAsset, isResyncing } = useResyncAsset({ showToast: !0 });
+  async function handleResync() {
+    state === "idle" && (setState("resyncing"), await resyncAsset(props.asset), setState("idle"));
+  }
   function handleClose() {
     if (state === "idle") {
       if (modified) {
@@ -3385,7 +3517,9 @@ function useVideoDetails(props) {
     setState,
     handleClose,
     confirmClose,
-    saveChanges
+    saveChanges,
+    handleResync,
+    isResyncing
   };
 }
 const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.label, description: props.description, inputId: props.label, children: /* @__PURE__ */ jsx(
@@ -3409,7 +3543,9 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
     setState,
     handleClose,
     confirmClose,
-    saveChanges
+    saveChanges,
+    handleResync,
+    isResyncing
   } = useVideoDetails(props), isSaving = state === "saving", [containerHeight, setContainerHeight] = useState(null), contentsRef = React.useRef(null);
   return useEffect(() => {
     !contentsRef.current || !("getBoundingClientRect" in contentsRef.current) || setContainerHeight(contentsRef.current.getBoundingClientRect().height);
@@ -3425,19 +3561,35 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
       width: 2,
       position: "fixed",
       footer: /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            icon: TrashIcon,
-            fontSize: 2,
-            padding: 3,
-            mode: "bleed",
-            text: "Delete",
-            tone: "critical",
-            onClick: () => setState("deleting"),
-            disabled: isSaving
-          }
-        ),
+        /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: TrashIcon,
+              fontSize: 2,
+              padding: 3,
+              mode: "bleed",
+              text: "Delete",
+              tone: "critical",
+              onClick: () => setState("deleting"),
+              disabled: isSaving || isResyncing
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: SyncIcon,
+              fontSize: 2,
+              padding: 3,
+              mode: "bleed",
+              text: "Resync",
+              tone: "primary",
+              onClick: handleResync,
+              disabled: isSaving || isResyncing,
+              iconRight: isResyncing && Spinner
+            }
+          )
+        ] }),
         modified && /* @__PURE__ */ jsx(
           Button,
           {
@@ -3449,7 +3601,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
             tone: "positive",
             onClick: saveChanges,
             iconRight: isSaving && Spinner,
-            disabled: isSaving
+            disabled: isSaving || isResyncing
           }
         )
       ] }) }),
@@ -4164,6 +4316,33 @@ function createUpChunkObservable(uuid2, uploadUrl2, source) {
     return upchunk.on("success", successHandler), upchunk.on("error", errorHandler), upchunk.on("progress", progressHandler), upchunk.on("offline", offlineHandler), upchunk.on("online", onlineHandler), () => upchunk.abort();
   });
 }
+function roundPxString(value) {
+  if (typeof value != "string") return;
+  const trimmed = value.trim();
+  if (!trimmed.endsWith("px")) return;
+  const n = Number(trimmed.slice(0, -2));
+  if (!Number.isFinite(n)) return;
+  let rounded = Math.round(n);
+  return rounded === 0 && (rounded = n < 0 ? -1 : 1), `${rounded}px`;
+}
+function sanitizeOverlaySettingsInPlace(settings) {
+  const inputs = settings.input;
+  if (inputs)
+    for (const input of inputs) {
+      const overlay = input.overlay_settings;
+      if (!overlay) continue;
+      const hm = roundPxString(overlay.horizontal_margin), vm = roundPxString(overlay.vertical_margin), w = roundPxString(overlay.width);
+      hm && (overlay.horizontal_margin = hm), vm && (overlay.vertical_margin = vm), w && (overlay.width = w);
+    }
+}
+function sanitizePxStringsInJson(json) {
+  return json.replace(/"(-?\d+(?:\.\d+)?)px"/g, (_match, num) => {
+    const n = Number(num);
+    if (!Number.isFinite(n)) return _match;
+    let rounded = Math.round(n);
+    return rounded === 0 && (rounded = n < 0 ? -1 : 1), `"${rounded}px"`;
+  });
+}
 function cancelUpload(client, uuid2) {
   return client.observable.request({
     url: `/addons/mux/uploads/${client.config().dataset}/${uuid2}`,
@@ -4174,7 +4353,8 @@ function cancelUpload(client, uuid2) {
 function uploadUrl({
   url,
   settings,
-  client
+  client,
+  watermark
 }) {
   return testUrl(url).pipe(
     switchMap((validUrl) => concat(
@@ -4184,9 +4364,9 @@ function uploadUrl({
           if (!json || !json.status)
             return throwError(new Error("Invalid credentials"));
           const uuid$1 = uuid(), muxBody = settings;
-          muxBody.input || (muxBody.input = [{ type: "video" }]), muxBody.input[0].url = validUrl;
+          muxBody.input || (muxBody.input = [{ type: "video" }]), muxBody.input[0].url = validUrl, sanitizeOverlaySettingsInPlace(muxBody);
           const query = {
-            muxBody: JSON.stringify(muxBody),
+            muxBody: sanitizePxStringsInJson(JSON.stringify(muxBody)),
             filename: validUrl.split("/").slice(-1)[0]
           }, dataset = client.config().dataset;
           return defer(
@@ -4214,7 +4394,8 @@ function uploadUrl({
 function uploadFile({
   settings,
   client,
-  file
+  file,
+  watermark
 }) {
   return testFile(file).pipe(
     switchMap((fileOptions) => concat(
@@ -4224,7 +4405,7 @@ function uploadFile({
           if (!json || !json.status)
             return throwError(() => new Error("Invalid credentials"));
           const uuid$1 = uuid(), body = settings;
-          return concat(
+          return sanitizeOverlaySettingsInPlace(body), concat(
             of({ type: "uuid", uuid: uuid$1 }),
             defer(
               () => client.observable.request({
@@ -4278,7 +4459,7 @@ function pollUpload(client, uuid2) {
     }, 2e3);
   });
 }
-async function updateAssetDocumentFromUpload(client, uuid2) {
+async function updateAssetDocumentFromUpload(client, uuid2, _watermark) {
   let upload, asset;
   try {
     upload = await pollUpload(client, uuid2);
@@ -4643,7 +4824,9 @@ const FileButton = styled(MenuItem)(({ theme }) => {
   color: white;
 `, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
 function PlayerActionsMenu(props) {
-  const { asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = useMemo(() => getPlaybackPolicy(asset)?.policy === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]);
+  const { asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = useMemo(() => getPlaybackPolicy(asset)?.policy === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), { resyncAsset, isResyncing } = useResyncAsset({ showToast: !0 }), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]), handleResync = useCallback(async () => {
+    setOpen(!1), await resyncAsset(asset);
+  }, [resyncAsset, asset]);
   return useEffect(() => {
     open && dialogState && setOpen(!1);
   }, [dialogState, open]), useClickOutsideEvent(
@@ -4701,6 +4884,15 @@ function PlayerActionsMenu(props) {
                 text: "Captions",
                 onClick: () => setDialogState("edit-captions")
               }
+            ),
+            /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                icon: SyncIcon,
+                text: "Resync from Mux",
+                onClick: handleResync,
+                disabled: readOnly || isResyncing
+              }
             )
           ] }),
           /* @__PURE__ */ jsx(MenuDivider, {}),
@@ -4789,13 +4981,14 @@ function useMediaMetadata(stagedUpload) {
         setIsLoadingMetadata(!1);
       },
       () => {
-        const duration = videoElement.duration, width = videoElement.videoWidth, height = videoElement.videoHeight, isAudioOnly = width <= 0 && height <= 0;
+        const duration = videoElement.duration, width = videoElement.videoWidth, height = videoElement.videoHeight, isAudioOnly = width <= 0 && height <= 0, aspectRatio = width / height;
         setVideoAssetMetadata((old) => ({
           ...old,
           duration,
           width,
           height,
-          isAudioOnly
+          isAudioOnly,
+          aspectRatio
         }));
       }
     ], cleanupVideo = (videoEl) => {
@@ -4817,6 +5010,51 @@ function useMediaMetadata(stagedUpload) {
     isLoadingMetadata
   };
 }
+function convertWatermarkToMuxOverlay(watermark, options) {
+  if (!watermark.enabled || !watermark.imageUrl)
+    return null;
+  const size = watermark.size || 20, opacity = watermark.opacity ?? 0.7, toPxString = (valuePercent, axis) => {
+    const videoAspectRatio2 = options?.videoAspectRatio ?? 1.7777777777777777, isVertical = videoAspectRatio2 > 0 && videoAspectRatio2 < 1, base = axis === "x" ? isVertical ? 1080 : 1920 : isVertical ? 1920 : 1080, px = valuePercent / 100 * base;
+    let rounded = Math.round(px);
+    return rounded === 0 && (rounded = px < 0 ? -1 : 1), `${rounded}px`;
+  }, normalizeToPixels = (value, axis) => {
+    if (!value) return value;
+    const trimmed = value.trim();
+    if (trimmed.endsWith("px"))
+      return roundPxString(trimmed);
+    if (trimmed.endsWith("%")) {
+      const n = Number(trimmed.slice(0, -1));
+      return Number.isFinite(n) ? toPxString(n, axis) : value;
+    }
+    return value;
+  };
+  if (watermark.overlay_settings) {
+    const widthValue = watermark.overlay_settings.width, widthNormalized = options?.units === "px" ? normalizeToPixels(widthValue, "x") : widthValue;
+    return {
+      ...watermark.overlay_settings,
+      horizontal_margin: options?.units === "px" ? normalizeToPixels(watermark.overlay_settings.horizontal_margin, "x") ?? watermark.overlay_settings.horizontal_margin : watermark.overlay_settings.horizontal_margin,
+      vertical_margin: options?.units === "px" ? normalizeToPixels(watermark.overlay_settings.vertical_margin, "y") ?? watermark.overlay_settings.vertical_margin : watermark.overlay_settings.vertical_margin,
+      width: widthNormalized ?? `${size}%`,
+      opacity: watermark.overlay_settings.opacity ?? `${Math.round(opacity * 100)}%`
+    };
+  }
+  const position = watermark.position || { x: 50, y: 50 }, clampPercent = (value) => Math.max(-100, Math.min(100, value)), toPercentString = (value) => `${value === 0 || Object.is(value, -0) || Math.abs(value) < 1e-9 ? 0.01 : value}%`, watermarkWidthPercentOfVideoWidth = size, videoAspectRatio = options?.videoAspectRatio ?? 16 / 9, imageAspectRatio = watermark.imageAspectRatio ?? 1, watermarkHeightPercentOfVideoHeight = Math.max(
+    0,
+    Math.min(100, size * videoAspectRatio / imageAspectRatio)
+  ), halfWidth = watermarkWidthPercentOfVideoWidth / 2, halfHeight = watermarkHeightPercentOfVideoHeight / 2, leftMargin = clampPercent(
+    Math.min(position.x - halfWidth, 100 - watermarkWidthPercentOfVideoWidth)
+  ), topMargin = clampPercent(
+    Math.min(position.y - halfHeight, 100 - watermarkHeightPercentOfVideoHeight)
+  ), units = options?.units ?? "%", marginX = units === "px" ? toPxString(leftMargin, "x") : toPercentString(leftMargin), marginY = units === "px" ? toPxString(topMargin, "y") : toPercentString(topMargin), width = units === "px" ? toPxString(size, "x") : `${size}%`;
+  return {
+    vertical_align: "top",
+    vertical_margin: marginY,
+    horizontal_align: "left",
+    horizontal_margin: marginX,
+    width,
+    opacity: `${Math.round(opacity * 100)}%`
+  };
+}
 function formatBytes(bytes, si = !1, dp = 1) {
   const thresh = si ? 1e3 : 1024;
   if (Math.abs(bytes) < thresh)
@@ -4829,6 +5067,566 @@ function formatBytes(bytes, si = !1, dp = 1) {
   while (Math.round(Math.abs(bytes) * r) / r >= thresh && u2 < units.length - 1);
   return bytes.toFixed(dp) + " " + units[u2];
 }
+const RangeInput = styled.input`
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--card-border-color);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--card-focus-ring-color, #2276fc);
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  &::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--card-focus-ring-color, #2276fc);
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  &:hover::-webkit-slider-thumb {
+    background: var(--card-focus-ring-color, #1a5fc7);
+  }
+
+  &:hover::-moz-range-thumb {
+    background: var(--card-focus-ring-color, #1a5fc7);
+  }
+`, WatermarkOverlay = styled.div`
+  position: absolute;
+  max-width: 200px;
+  opacity: ${(props) => props.$opacity};
+  cursor: move;
+  user-select: none;
+  z-index: 10;
+  pointer-events: auto;
+
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+    pointer-events: none;
+  }
+
+  &:hover {
+    outline: 2px dashed rgba(255, 255, 255, 0.8);
+    outline-offset: 4px;
+  }
+`;
+function DraggableWatermark({
+  watermark,
+  onChange,
+  containerRef,
+  videoElementRef
+}) {
+  const [isDragging, setIsDragging] = useState(!1), [dragStart, setDragStart] = useState({ x: 0, y: 0 }), [startPosition, setStartPosition] = useState({ x: 0, y: 0 }), watermarkRef = useRef(null), debounceTimeoutRef = useRef(null), [localPosition, setLocalPosition] = useState(watermark.position || { x: 50, y: 50 }), position = localPosition, size = watermark.size || 20, opacity = watermark.opacity ?? 0.7, parseOpacityPercent = (value) => {
+    if (!value) return null;
+    const trimmed = value.trim();
+    if (!trimmed.endsWith("%")) return null;
+    const num = Number(trimmed.slice(0, -1));
+    return Number.isFinite(num) ? Math.max(0, Math.min(1, num / 100)) : null;
+  }, getVideoContentBox = useCallback(() => {
+    const container = containerRef?.current;
+    if (!container) return { x: 0, y: 0, width: 0, height: 0 };
+    const rect = container.getBoundingClientRect(), containerW = rect.width, containerH = rect.height, videoEl = videoElementRef?.current, videoW = videoEl?.videoWidth || 0, videoH = videoEl?.videoHeight || 0;
+    if (!videoW || !videoH || !containerW || !containerH)
+      return { x: 0, y: 0, width: containerW, height: containerH };
+    const scale = Math.min(containerW / videoW, containerH / videoH), contentW = videoW * scale, contentH = videoH * scale, offsetX = (containerW - contentW) / 2, offsetY = (containerH - contentH) / 2;
+    return { x: offsetX, y: offsetY, width: contentW, height: contentH };
+  }, [containerRef, videoElementRef]), parseOverlayValue = (value) => {
+    if (!value) return null;
+    const trimmed = value.trim(), px = trimmed.endsWith("px"), pct = trimmed.endsWith("%"), num = Number(trimmed.replace(/px|%/g, ""));
+    return Number.isFinite(num) ? px ? { n: num, unit: "px" } : pct ? { n: num, unit: "%" } : null : null;
+  }, computeManualStyle = (overlay) => {
+    const rect = containerRef?.current?.getBoundingClientRect(), w = rect?.width ?? 0, h = rect?.height ?? 0, isVertical = h > w, baseW = isVertical ? 1080 : 1920, baseH = isVertical ? 1920 : 1080, hm = parseOverlayValue(overlay.horizontal_margin), vm = parseOverlayValue(overlay.vertical_margin), ww = parseOverlayValue(overlay.width), manualOpacity = parseOpacityPercent(overlay.opacity), toCss = (v, axis) => {
+      if (v)
+        return v.unit === "%" ? `${v.n}%` : axis === "x" ? `${v.n * w / baseW}px` : `${v.n * h / baseH}px`;
+    }, computeHorizontalStyle = () => overlay.horizontal_align === "left" ? { left: toCss(hm, "x"), right: void 0, transform: "translate(0, 0)" } : overlay.horizontal_align === "right" ? { right: toCss(hm, "x"), left: void 0, transform: "translate(0, 0)" } : { left: "50%", right: void 0, transform: "translate(-50%, 0)" }, computeVerticalStyle = () => overlay.vertical_align === "top" ? { top: toCss(vm, "y"), bottom: void 0 } : overlay.vertical_align === "bottom" ? { bottom: toCss(vm, "y"), top: void 0 } : { top: "50%", bottom: void 0 }, hStyle = computeHorizontalStyle(), vStyle = computeVerticalStyle();
+    let transform = hStyle.transform;
+    return overlay.vertical_align === "middle" && (transform = overlay.horizontal_align === "center" ? "translate(-50%, -50%)" : "translate(0, -50%)"), {
+      position: "absolute",
+      ...hStyle,
+      ...vStyle,
+      transform,
+      width: ww ? toCss(ww, "x") : `${size}%`,
+      opacity: manualOpacity ?? opacity,
+      cursor: "default"
+    };
+  }, debouncedOnChange = useCallback(
+    (newWatermark) => {
+      debounceTimeoutRef.current && clearTimeout(debounceTimeoutRef.current), debounceTimeoutRef.current = setTimeout(() => {
+        onChange(newWatermark);
+      }, 300);
+    },
+    [onChange]
+  );
+  useEffect(() => () => {
+    debounceTimeoutRef.current && clearTimeout(debounceTimeoutRef.current);
+  }, []), useEffect(() => {
+    !isDragging && watermark.position && setLocalPosition(watermark.position);
+  }, [watermark.position, isDragging]);
+  const handleMouseDown = useCallback(
+    (e) => {
+      e.preventDefault(), setIsDragging(!0), setDragStart({ x: e.clientX, y: e.clientY }), setStartPosition({ x: position.x, y: position.y });
+    },
+    [position]
+  ), handleMouseMove = useCallback(
+    (e) => {
+      if (!isDragging || !containerRef?.current) return;
+      const rect = containerRef.current.getBoundingClientRect(), content = getVideoContentBox(), contentW = content.width || rect.width, contentH = content.height || rect.height, dx = e.clientX - dragStart.x, dy = e.clientY - dragStart.y, deltaXPercent = dx / contentW * 100, deltaYPercent = dy / contentH * 100;
+      let newX = startPosition.x + deltaXPercent, newY = startPosition.y + deltaYPercent;
+      newX = Math.max(0, Math.min(100, newX)), newY = Math.max(0, Math.min(100, newY)), setLocalPosition({ x: newX, y: newY }), debouncedOnChange({
+        ...watermark,
+        position: { x: newX, y: newY }
+      });
+    },
+    [
+      isDragging,
+      dragStart,
+      startPosition,
+      containerRef,
+      watermark,
+      debouncedOnChange,
+      getVideoContentBox
+    ]
+  ), handleMouseUp = useCallback(() => {
+    setIsDragging(!1), debounceTimeoutRef.current && (clearTimeout(debounceTimeoutRef.current), debounceTimeoutRef.current = null), onChange({
+      ...watermark,
+      position: localPosition
+    });
+  }, [watermark, localPosition, onChange]);
+  if (useEffect(() => {
+    if (isDragging)
+      return document.addEventListener("mousemove", handleMouseMove), document.addEventListener("mouseup", handleMouseUp), () => {
+        document.removeEventListener("mousemove", handleMouseMove), document.removeEventListener("mouseup", handleMouseUp);
+      };
+  }, [isDragging, handleMouseMove, handleMouseUp]), !watermark.imageUrl)
+    return null;
+  const hasManualOverlay = !!watermark.overlay_settings, opacityForRender = hasManualOverlay ? parseOpacityPercent(watermark.overlay_settings?.opacity) ?? opacity : opacity, contentBox = getVideoContentBox(), hasContentBox = contentBox.width > 0 && contentBox.height > 0;
+  return /* @__PURE__ */ jsx(
+    WatermarkOverlay,
+    {
+      ref: watermarkRef,
+      $opacity: opacityForRender,
+      onMouseDown: hasManualOverlay ? void 0 : handleMouseDown,
+      style: hasManualOverlay ? computeManualStyle(watermark.overlay_settings) : hasContentBox ? {
+        left: `${contentBox.x + position.x / 100 * contentBox.width}px`,
+        top: `${contentBox.y + position.y / 100 * contentBox.height}px`,
+        transform: "translate(-50%, -50%)",
+        width: `${Math.max(1, size / 100 * contentBox.width)}px`,
+        cursor: isDragging ? "grabbing" : "grab"
+      } : {
+        left: `${position.x}%`,
+        top: `${position.y}%`,
+        transform: "translate(-50%, -50%)",
+        width: `${size}%`,
+        cursor: isDragging ? "grabbing" : "grab"
+      },
+      children: /* @__PURE__ */ jsx("img", { src: watermark.imageUrl, alt: "Watermark", draggable: !1 })
+    }
+  );
+}
+function WatermarkControls({
+  watermark,
+  onChange,
+  onValidationChange,
+  previewContainerRef,
+  previewVideoRef
+}) {
+  const [urlInput, setUrlInput] = useState(watermark.imageUrl || ""), [urlError, setUrlError] = useState(null), [isValidating, setIsValidating] = useState(!1), [isValid, setIsValid] = useState(null), validationTimeoutRef = useRef(null), [mode, setMode] = useState(
+    watermark.overlay_settings ? "manual" : "canvas"
+  ), isUpdatingRef = useRef(!1), isValidExtension = (extension) => extension.endsWith(".png") || extension.endsWith(".jpg") || extension.endsWith(".jpeg"), validateUrl = useCallback(
+    (url) => {
+      if (validationTimeoutRef.current && clearTimeout(validationTimeoutRef.current), !url) {
+        setUrlError(null), setIsValid(null), setIsValidating(!1), onValidationChange?.(null), isUpdatingRef.current = !0, onChange({
+          ...watermark,
+          enabled: !1,
+          imageUrl: void 0,
+          overlay_settings: void 0
+        });
+        return;
+      }
+      setIsValidating(!0), setIsValid(null), setUrlError(null), validationTimeoutRef.current = setTimeout(() => {
+        try {
+          const pathname = new URL(url).pathname.toLowerCase();
+          if (isValidExtension(pathname)) {
+            setIsValid(!0), setUrlError(null), onValidationChange?.(null);
+            const img = new Image();
+            img.onload = () => {
+              const imageAspectRatio = img.naturalWidth && img.naturalHeight ? img.naturalWidth / img.naturalHeight : 1;
+              isUpdatingRef.current = !0, onChange({
+                ...watermark,
+                enabled: !0,
+                imageUrl: url,
+                imageAspectRatio
+              });
+            }, img.onerror = () => {
+              isUpdatingRef.current = !0, onChange({
+                ...watermark,
+                enabled: !0,
+                imageUrl: url,
+                imageAspectRatio: watermark.imageAspectRatio
+              });
+            }, img.src = url;
+          } else {
+            const errorMsg = "Mux only supports PNG and JPG watermark images. Please use a .png or .jpg file.";
+            setIsValid(!1), setUrlError(errorMsg), onValidationChange?.(errorMsg), isUpdatingRef.current = !0, onChange({
+              ...watermark,
+              enabled: !1,
+              imageUrl: void 0,
+              imageAspectRatio: void 0,
+              overlay_settings: void 0
+            });
+          }
+        } catch {
+          setIsValid(!1);
+          const errorMsg = "Please enter a valid URL (e.g., https://example.com/watermark.png)";
+          setUrlError(errorMsg), onValidationChange?.(errorMsg), isUpdatingRef.current = !0, onChange({
+            ...watermark,
+            enabled: !1,
+            imageUrl: void 0,
+            imageAspectRatio: void 0,
+            overlay_settings: void 0
+          });
+        } finally {
+          setIsValidating(!1);
+        }
+      }, 500);
+    },
+    [watermark, onChange, onValidationChange]
+  );
+  useEffect(() => () => {
+    validationTimeoutRef.current && clearTimeout(validationTimeoutRef.current);
+  }, []), useEffect(() => {
+    setMode(watermark.overlay_settings ? "manual" : "canvas");
+  }, [watermark.overlay_settings]);
+  const handleUrlChange = (e) => {
+    const url = e.target.value;
+    setUrlInput(url), watermark.imageUrl && url !== watermark.imageUrl && (isUpdatingRef.current = !0, onChange({
+      ...watermark,
+      enabled: !1,
+      imageUrl: void 0,
+      imageAspectRatio: void 0,
+      overlay_settings: void 0
+    })), validateUrl(url);
+  }, normalizeZeroPercent = (value) => {
+    if (!value) return value;
+    const trimmed = value.trim();
+    if (!trimmed.endsWith("%")) return value;
+    const n = Number(trimmed.slice(0, -1));
+    return Number.isFinite(n) ? n === 0 || Object.is(n, -0) || Math.abs(n) < 1e-9 ? "0.01%" : `${n}%` : value;
+  }, updateOverlaySettings = (next) => {
+    const merged = {
+      ...watermark.overlay_settings ?? {
+        vertical_align: "bottom",
+        vertical_margin: "2%",
+        horizontal_align: "right",
+        horizontal_margin: "2%",
+        width: `${watermark.size ?? 20}%`,
+        opacity: `${Math.round((watermark.opacity ?? 0.7) * 100)}%`
+      },
+      ...next
+    };
+    onChange({
+      ...watermark,
+      enabled: !0,
+      overlay_settings: {
+        ...merged,
+        horizontal_margin: normalizeZeroPercent(merged.horizontal_margin) || merged.horizontal_margin,
+        vertical_margin: normalizeZeroPercent(merged.vertical_margin) || merged.vertical_margin
+      }
+    });
+  }, getVideoContentBox = () => {
+    const container = previewContainerRef?.current;
+    if (!container) return { x: 0, y: 0, width: 0, height: 0 };
+    const rect = container.getBoundingClientRect(), containerW = rect.width, containerH = rect.height, videoEl = previewVideoRef?.current, videoW = videoEl?.videoWidth || 0, videoH = videoEl?.videoHeight || 0;
+    if (!videoW || !videoH || !containerW || !containerH)
+      return { x: 0, y: 0, width: containerW, height: containerH };
+    const scale = Math.min(containerW / videoW, containerH / videoH), contentW = videoW * scale, contentH = videoH * scale, offsetX = (containerW - contentW) / 2, offsetY = (containerH - contentH) / 2;
+    return { x: offsetX, y: offsetY, width: contentW, height: contentH };
+  };
+  return /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+      /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: "Watermark Image URL" }),
+      /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "Enter a URL to a PNG or JPG image. Mux will download this image and overlay it on your video." }),
+      /* @__PURE__ */ jsxs(Box, { style: { position: "relative", width: "100%" }, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "url",
+            value: urlInput,
+            onChange: handleUrlChange,
+            placeholder: "https://example.com/watermark.png",
+            style: {
+              padding: "8px 12px",
+              paddingRight: urlInput ? "96px" : isValid !== null ? "36px" : "12px",
+              border: urlError || isValid === !1 ? "1px solid #e74c3c" : isValid === !0 ? "1px solid #4caf50" : "1px solid #ccc",
+              borderRadius: "4px",
+              width: "100%",
+              maxWidth: "100%",
+              boxSizing: "border-box",
+              fontSize: "14px"
+            }
+          }
+        ),
+        (urlInput || isValidating || isValid !== null) && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            style: {
+              position: "absolute",
+              right: "8px",
+              top: "50%",
+              transform: "translateY(-50%)",
+              display: "flex",
+              alignItems: "center",
+              gap: "4px"
+            },
+            children: [
+              urlInput && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  text: "Clear",
+                  mode: "bleed",
+                  tone: "critical",
+                  onClick: () => {
+                    setUrlInput(""), validateUrl("");
+                  },
+                  disabled: isValidating,
+                  style: { fontSize: "11px", height: "24px" }
+                }
+              ),
+              isValidating && /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "Validating..." }),
+              isValid === !0 && !isValidating && /* @__PURE__ */ jsx(CheckmarkCircleIcon, { style: { color: "#4caf50", fontSize: "18px" } }),
+              isValid === !1 && !isValidating && /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { color: "#e74c3c", fontSize: "18px" } })
+            ]
+          }
+        )
+      ] }),
+      urlError && /* @__PURE__ */ jsx(Card, { padding: 2, tone: "critical", radius: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { color: "#e74c3c", flexShrink: 0 } }),
+        /* @__PURE__ */ jsx(Text, { size: 0, style: { color: "#e74c3c" }, children: urlError })
+      ] }) })
+    ] }),
+    watermark.imageUrl && /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+      /* @__PURE__ */ jsx(Card, { padding: 3, tone: "transparent", border: !0, radius: 2, children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          align: "center",
+          justify: "space-between",
+          gap: 3,
+          style: { flexWrap: "wrap", alignItems: "flex-start" },
+          children: [
+            /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 240, flex: 1 }, children: [
+              /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: "Positioning mode" }),
+              /* @__PURE__ */ jsxs(Text, { size: 0, muted: !0, children: [
+                "Choose between dragging on the canvas or manually editing the Mux",
+                " ",
+                /* @__PURE__ */ jsx("code", { children: "overlay_settings" }),
+                " fields (as in",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: "https://www.mux.com/docs/guides/add-watermarks-to-your-videos",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    children: "the docs"
+                  }
+                ),
+                ")."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, style: { flexWrap: "wrap" }, children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  text: "Canvas",
+                  mode: mode === "canvas" ? "default" : "ghost",
+                  onClick: () => {
+                    setMode("canvas"), onChange({ ...watermark, enabled: !0, overlay_settings: void 0 });
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  text: "Manual",
+                  mode: mode === "manual" ? "default" : "ghost",
+                  onClick: () => {
+                    setMode("manual");
+                    const overlay = convertWatermarkToMuxOverlay({ ...watermark, enabled: !0 });
+                    updateOverlaySettings(overlay ?? {});
+                  }
+                }
+              )
+            ] })
+          ]
+        }
+      ) }),
+      mode === "manual" && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "transparent", border: !0, radius: 2, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+        /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: "Mux overlay_settings" }),
+        /* @__PURE__ */ jsxs(Grid, { columns: [1, 2], gap: 3, style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "horizontal_align" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: watermark.overlay_settings?.horizontal_align || "right",
+                onChange: (e) => updateOverlaySettings({
+                  horizontal_align: e.target.value || "right"
+                }),
+                style: {
+                  width: "100%",
+                  padding: "8px 10px",
+                  border: "1px solid #ccc",
+                  borderRadius: 4
+                },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "left", children: "left" }),
+                  /* @__PURE__ */ jsx("option", { value: "center", children: "center" }),
+                  /* @__PURE__ */ jsx("option", { value: "right", children: "right" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "horizontal_margin (e.g. 2% or 40px)" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: watermark.overlay_settings?.horizontal_margin || "2%",
+                onChange: (e) => updateOverlaySettings({ horizontal_margin: e.currentTarget.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "vertical_align" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: watermark.overlay_settings?.vertical_align || "bottom",
+                onChange: (e) => updateOverlaySettings({
+                  vertical_align: e.target.value || "bottom"
+                }),
+                style: {
+                  width: "100%",
+                  padding: "8px 10px",
+                  border: "1px solid #ccc",
+                  borderRadius: 4
+                },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "top", children: "top" }),
+                  /* @__PURE__ */ jsx("option", { value: "middle", children: "middle" }),
+                  /* @__PURE__ */ jsx("option", { value: "bottom", children: "bottom" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "vertical_margin (e.g. 2% or 40px)" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: watermark.overlay_settings?.vertical_margin || "2%",
+                onChange: (e) => updateOverlaySettings({ vertical_margin: e.currentTarget.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "width (e.g. 25% or 80px)" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: watermark.overlay_settings?.width || `${watermark.size ?? 20}%`,
+                onChange: (e) => updateOverlaySettings({ width: e.currentTarget.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "opacity (e.g. 90%)" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: watermark.overlay_settings?.opacity || `${Math.round((watermark.opacity ?? 0.7) * 100)}%`,
+                onChange: (e) => updateOverlaySettings({ opacity: e.currentTarget.value })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "Margins and width accept either percentages or pixels, per the Mux guide." })
+      ] }) }),
+      mode === "canvas" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: (() => {
+            const sizePct = watermark.size || 20, contentW = getVideoContentBox().width;
+            return contentW ? `Size: ${Math.max(1, Math.round(sizePct / 100 * contentW))}px` : `Size: ${sizePct}%`;
+          })() }),
+          /* @__PURE__ */ jsx(
+            RangeInput,
+            {
+              type: "range",
+              value: (() => {
+                const sizePct = watermark.size || 20, contentW = getVideoContentBox().width;
+                return contentW ? Math.max(1, Math.round(sizePct / 100 * contentW)) : sizePct;
+              })(),
+              min: (() => {
+                const contentW = getVideoContentBox().width;
+                return contentW ? Math.max(1, Math.round(contentW * 0.05)) : 5;
+              })(),
+              max: (() => {
+                const contentW = getVideoContentBox().width;
+                return contentW ? Math.max(1, Math.round(contentW * 0.5)) : 50;
+              })(),
+              step: 1,
+              onChange: (e) => {
+                const raw = Number(e.target.value), contentW = getVideoContentBox().width, nextPct = contentW ? raw / contentW * 100 : raw, clampedPct = Math.max(5, Math.min(50, nextPct));
+                onChange({
+                  ...watermark,
+                  size: clampedPct
+                });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(Text, { size: 1, weight: "medium", children: [
+            "Opacity: ",
+            Math.round((watermark.opacity ?? 0.7) * 100),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx(
+            RangeInput,
+            {
+              type: "range",
+              value: watermark.opacity ?? 0.7,
+              min: 0,
+              max: 1,
+              step: 0.05,
+              onChange: (e) => onChange({
+                ...watermark,
+                opacity: Number(e.target.value)
+              })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Card, { padding: 2, tone: "transparent", border: !0, radius: 2, children: /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: mode === "manual" ? "Manual mode: edit the overlay_settings fields above" : "\u{1F4A1} Drag the watermark on the preview to position it" }) })
+    ] })
+  ] });
+}
 const ALL_LANGUAGE_CODES = LanguagesList.getAllCodes().map((code) => ({
   value: code,
   label: LanguagesList.getNativeName(code)
@@ -5270,7 +6068,7 @@ function UploadConfiguration({
   startUpload,
   onClose
 }) {
-  const id = useId(), autoTextTracks = useRef(
+  const id = useId(), [watermarkValidationError, setWatermarkValidationError] = useState(null), watermarkPreviewContainerRef = useRef(null), watermarkPreviewVideoRef = useRef(null), autoTextTracks = useRef(
     pluginConfig.video_quality === "plus" && pluginConfig.defaultAutogeneratedSubtitleLang ? [
       {
         _id: uuid(),
@@ -5306,6 +6104,8 @@ function UploadConfiguration({
           return Object.assign({}, prev, { [action.action]: action.value });
         case "drm_policy":
           return Object.assign({}, prev, { [action.action]: action.value });
+        case "watermark":
+          return Object.assign({}, prev, { watermark: action.value });
         // Updating individual tracks
         case "track": {
           const text_tracks = [...prev.text_tracks], target_track_i = text_tracks.findIndex(({ _id: _id2 }) => _id2 === action.id);
@@ -5373,7 +6173,12 @@ function UploadConfiguration({
   ]);
   const { disableTextTrackConfig, disableUploadConfig } = pluginConfig, skipConfig = disableTextTrackConfig && disableUploadConfig;
   if (useEffect(() => {
-    skipConfig && startUpload(formatUploadConfig(config, secrets));
+    if (skipConfig) {
+      const { settings, watermark } = formatUploadConfig(config, secrets, {
+        videoAspectRatio: videoAssetMetadata?.aspectRatio
+      });
+      startUpload(settings, watermark);
+    }
   }, []), skipConfig) return null;
   const basicConfig = config.video_quality !== "plus" && config.video_quality !== "premium", playbackPolicySelected = config.public_policy || config.signed_policy || config.drm_policy, maxSupportedResolution = RESOLUTION_TIERS.findIndex(
     (rt) => rt.value === pluginConfig.max_resolution_tier
@@ -5389,11 +6194,11 @@ function UploadConfiguration({
       header: "Configure Mux Upload",
       onClose,
       children: /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 2, children: [
-        validationError && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "critical", radius: 2, marginBottom: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "flex-start", children: [
+        (validationError || watermarkValidationError) && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "critical", radius: 2, marginBottom: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "flex-start", children: [
           /* @__PURE__ */ jsx(ErrorOutlineIcon, { width: 20, height: 20 }),
           /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
             /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Validation Error" }),
-            /* @__PURE__ */ jsx(Text, { size: 1, children: validationError })
+            /* @__PURE__ */ jsx(Text, { size: 1, children: validationError || watermarkValidationError })
           ] })
         ] }) }),
         /* @__PURE__ */ jsx(Label$1, { size: 3, children: "FILE TO UPLOAD" }),
@@ -5460,27 +6265,41 @@ function UploadConfiguration({
               }) })
             }
           ),
-          !basicConfig && /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-            /* @__PURE__ */ jsx(PlaybackPolicy, { id, config, secrets, dispatch }),
-            maxSupportedResolution > 0 && /* @__PURE__ */ jsx(
-              ResolutionTierSelector,
+          !basicConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+              /* @__PURE__ */ jsx(PlaybackPolicy, { id, config, secrets, dispatch }),
+              maxSupportedResolution > 0 && /* @__PURE__ */ jsx(
+                ResolutionTierSelector,
+                {
+                  id,
+                  config,
+                  dispatch,
+                  maxSupportedResolution
+                }
+              ),
+              /* @__PURE__ */ jsx(StaticRenditionSelector, { id, config, dispatch }),
+              !disableTextTrackConfig && /* @__PURE__ */ jsx(
+                TextTracksEditor,
+                {
+                  tracks: config.text_tracks,
+                  dispatch,
+                  defaultLang: pluginConfig.defaultAutogeneratedSubtitleLang
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              WatermarkSection,
               {
-                id,
                 config,
                 dispatch,
-                maxSupportedResolution
-              }
-            ),
-            /* @__PURE__ */ jsx(StaticRenditionSelector, { id, config, dispatch }),
-            !disableTextTrackConfig && /* @__PURE__ */ jsx(
-              TextTracksEditor,
-              {
-                tracks: config.text_tracks,
-                dispatch,
-                defaultLang: pluginConfig.defaultAutogeneratedSubtitleLang
+                stagedUpload,
+                videoAssetMetadata,
+                watermarkPreviewContainerRef,
+                watermarkPreviewVideoRef,
+                onValidationChange: setWatermarkValidationError
               }
             )
-          ] }) })
+          ] })
         ] }),
         /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
           Button,
@@ -5490,7 +6309,12 @@ function UploadConfiguration({
             text: "Upload",
             tone: "positive",
             onClick: () => {
-              validationError || startUpload(formatUploadConfig(config, secrets));
+              if (!validationError) {
+                const { settings, watermark } = formatUploadConfig(config, secrets, {
+                  videoAspectRatio: videoAssetMetadata?.aspectRatio
+                });
+                startUpload(settings, watermark);
+              }
             }
           }
         ) })
@@ -5505,36 +6329,178 @@ function setAdvancedPlaybackPolicy(config, secrets) {
     drm_configuration_id: secrets.drmConfigId ?? void 0
   }) : console.error("Selected DRM Policy but missing DRM Configuration Id")), advanced_playback_policies;
 }
-function formatUploadConfig(config, secrets) {
+function formatUploadConfig(config, secrets, options) {
   const generated_subtitles = config.text_tracks.filter(isAutogeneratedTrack).map((track) => ({
     name: track.name,
     language_code: track.language_code
-  }));
+  })), inputs = [
+    {
+      type: "video",
+      generated_subtitles: generated_subtitles.length > 0 ? generated_subtitles : void 0
+    },
+    ...config.text_tracks.filter(isCustomTextTrack).reduce(
+      (acc, track) => (track.language_code && track.file && track.name && acc.push({
+        url: track.file.contents,
+        type: "text",
+        text_type: track.type === "subtitles" ? "subtitles" : void 0,
+        language_code: track.language_code,
+        name: track.name,
+        closed_captions: track.type === "captions"
+      }), acc),
+      []
+    )
+  ];
+  if (config.watermark?.imageUrl) {
+    const watermarkForMux = { ...config.watermark, enabled: !0 }, overlaySettings = convertWatermarkToMuxOverlay(watermarkForMux, {
+      videoAspectRatio: options?.videoAspectRatio ?? void 0,
+      units: "px"
+    });
+    overlaySettings && inputs.push({
+      url: config.watermark.imageUrl,
+      overlay_settings: overlaySettings
+    });
+  }
   return {
-    input: [
-      {
-        type: "video",
-        generated_subtitles: generated_subtitles.length > 0 ? generated_subtitles : void 0
-      },
-      ...config.text_tracks.filter(isCustomTextTrack).reduce(
-        (acc, track) => (track.language_code && track.file && track.name && acc.push({
-          url: track.file.contents,
-          type: "text",
-          text_type: track.type === "subtitles" ? "subtitles" : void 0,
-          language_code: track.language_code,
-          name: track.name,
-          closed_captions: track.type === "captions"
-        }), acc),
-        []
-      )
-    ],
-    static_renditions: config.static_renditions.length > 0 ? config.static_renditions.map((resolution) => ({ resolution })) : void 0,
-    advanced_playback_policies: setAdvancedPlaybackPolicy(config, secrets),
-    max_resolution_tier: config.max_resolution_tier,
-    video_quality: config.video_quality,
-    normalize_audio: config.normalize_audio
+    settings: {
+      input: inputs,
+      static_renditions: config.static_renditions.length > 0 ? config.static_renditions.map((resolution) => ({ resolution })) : void 0,
+      advanced_playback_policies: setAdvancedPlaybackPolicy(config, secrets),
+      max_resolution_tier: config.max_resolution_tier,
+      video_quality: config.video_quality,
+      normalize_audio: config.normalize_audio
+    },
+    watermark: config.watermark?.imageUrl ? { ...config.watermark, enabled: !0 } : void 0
   };
 }
+function WatermarkSection({
+  config,
+  dispatch,
+  stagedUpload,
+  videoAssetMetadata,
+  watermarkPreviewContainerRef,
+  watermarkPreviewVideoRef,
+  onValidationChange
+}) {
+  return videoAssetMetadata?.isAudioOnly !== !1 ? null : /* @__PURE__ */ jsx(
+    FormField$2,
+    {
+      title: "Watermark",
+      description: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Add a watermark overlay to your video using Mux's native watermark support.",
+        " ",
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "https://www.mux.com/docs/guides/add-watermarks-to-your-videos",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "Learn more about Mux watermarks."
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+        /* @__PURE__ */ jsx(
+          WatermarkControls,
+          {
+            watermark: config.watermark || { enabled: !1 },
+            onChange: (watermark) => {
+              dispatch({ action: "watermark", value: watermark });
+            },
+            onValidationChange,
+            previewContainerRef: watermarkPreviewContainerRef,
+            previewVideoRef: watermarkPreviewVideoRef
+          }
+        ),
+        config.watermark?.imageUrl && stagedUpload.type === "file" && // Canvas preview is only shown in "Canvas" mode (no explicit overlay_settings)
+        !config.watermark.overlay_settings && /* @__PURE__ */ jsx(
+          WatermarkPreview,
+          {
+            stagedUpload,
+            watermark: config.watermark,
+            videoAspectRatio: videoAssetMetadata.aspectRatio,
+            onWatermarkChange: (watermark) => {
+              dispatch({ action: "watermark", value: watermark });
+            },
+            previewContainerRef: watermarkPreviewContainerRef,
+            videoRef: watermarkPreviewVideoRef
+          }
+        )
+      ] })
+    }
+  );
+}
+const WatermarkPreview = memo(function({
+  stagedUpload,
+  watermark,
+  onWatermarkChange,
+  videoAspectRatio,
+  previewContainerRef,
+  videoRef
+}) {
+  useEffect(() => {
+    if (videoRef.current && stagedUpload.type === "file") {
+      const file = stagedUpload.files[0], url = URL.createObjectURL(file);
+      return videoRef.current.src = url, () => {
+        URL.revokeObjectURL(url);
+      };
+    }
+  }, [stagedUpload, videoRef]);
+  const isVertical = videoAspectRatio != null && videoAspectRatio < 1;
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      tone: "transparent",
+      border: !0,
+      style: {
+        overflow: "hidden",
+        // For vertical videos, center the preview and limit its width
+        display: "flex",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: previewContainerRef,
+          style: {
+            position: "relative",
+            // For vertical videos: limit width so the preview doesn't get too tall
+            // For horizontal videos: use full width
+            width: isVertical ? "auto" : "100%",
+            aspectRatio: videoAspectRatio ? String(videoAspectRatio) : "16/9",
+            ...isVertical ? { height: "400px", maxHeight: "50vh" } : { minHeight: "200px" },
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "video",
+              {
+                ref: videoRef,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "fill",
+                  display: "block"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DraggableWatermark,
+              {
+                watermark,
+                onChange: onWatermarkChange,
+                containerRef: previewContainerRef,
+                videoElementRef: videoRef
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
 function withFocusRing(component) {
   return styled(component)((props) => {
     const border = {
@@ -5773,7 +6739,7 @@ function Uploader(props) {
       window.removeEventListener("beforeunload", handleBeforeUnload), window.removeEventListener("pagehide", handleBeforeUnload), cleanup();
     };
   }, [props.client, props.asset?._id]);
-  const startUpload = (settings) => {
+  const startUpload = (settings, watermark) => {
     const { stagedUpload } = state;
     if (!stagedUpload || uploadRef.current) return;
     dispatch({ action: "commitUpload" });
@@ -5783,14 +6749,16 @@ function Uploader(props) {
         uploadObservable = uploadUrl({
           client: props.client,
           url: stagedUpload.url,
-          settings
+          settings,
+          watermark
         });
         break;
       case "file":
         uploadObservable = uploadFile({
           client: props.client,
           file: stagedUpload.files[0],
-          settings
+          settings,
+          watermark
         }).pipe(
           takeUntil(
             cancelUploadButton.observable.pipe(
@@ -6051,7 +7019,12 @@ const muxVideoSchema = {
     { type: "number", name: "max_width" },
     { type: "number", name: "max_frame_rate" },
     { type: "number", name: "duration" },
-    { type: "number", name: "max_height" }
+    { type: "number", name: "max_height" },
+    { type: "string", name: "language_code" },
+    { type: "string", name: "name" },
+    { type: "string", name: "status" },
+    { type: "string", name: "text_source" },
+    { type: "string", name: "text_type" }
   ]
 }, muxPlaybackId = {
   name: "mux.playbackId",