sanity-plugin-media 4.1.1 → 4.3.0

package/dist/index.mjs

@@ -3,16 +3,16 @@ import { useClient, useColorSchemeValue, useSchema, Preview, useDocumentStore, W
 import { ThLargeIcon, ThListIcon, SortIcon, CloseIcon, SelectIcon, AddIcon, SearchIcon, PlugIcon, ClipboardIcon, DownloadIcon, ChevronDownIcon, ErrorOutlineIcon, WarningOutlineIcon, EditIcon, ArrowUpIcon, ArrowDownIcon, TrashIcon, ComposeIcon, Icon, UploadIcon, WarningFilledIcon, CheckmarkCircleIcon, ChevronUpIcon, ImageIcon } from "@sanity/icons";
 import { Inline, Button, usePortal, MenuButton, Menu as Menu$2, MenuItem, MenuDivider, Box, studioTheme, rem, Flex, Label, Text, TextInput, Card, MenuGroup, useMediaIndex, Tooltip, Switch, Popover, Stack, Dialog as Dialog$1, TextArea, TabList, Tab, TabPanel, Container as Container$2, Spinner, Checkbox, Grid, useToast, PortalProvider, useLayer, Portal } from "@sanity/ui";
 import { useRef, useCallback, useEffect, createContext, useContext, useMemo, useState, forwardRef, memo, Component } from "react";
-import groq from "groq";
+import { css, createGlobalStyle, styled } from "styled-components";
 import { useSelector, useDispatch, Provider } from "react-redux";
 import { createAction, createSlice, isAnyOf, createSelector, combineReducers, configureStore } from "@reduxjs/toolkit";
-import { nanoid } from "nanoid";
+import pluralize from "pluralize";
 import { ofType, combineEpics, createEpicMiddleware } from "redux-observable";
 import { iif, throwError, of, from, EMPTY, Subject, Observable, merge, empty } from "rxjs";
 import { delay, mergeMap, filter, withLatestFrom, catchError, switchMap, bufferTime, debounceTime, first, map, takeUntil } from "rxjs/operators";
+import groq from "groq";
+import { nanoid } from "nanoid";
 import { uuid } from "@sanity/uuid";
-import { css, createGlobalStyle, styled } from "styled-components";
-import pluralize from "pluralize";
 import { useNProgress } from "@tanem/react-nprogress";
 import { hues, white } from "@sanity/color";
 import Select, { components } from "react-select";
@@ -176,7 +176,71 @@ const useKeyPress = (hotkey, onPress) => {
   return useEffect(() => (window.addEventListener("keydown", downHandler), window.addEventListener("keyup", upHandler), () => {
     window.removeEventListener("keydown", downHandler), window.removeEventListener("keyup", upHandler);
   }), [downHandler, upHandler]), keyPressed;
-}, divider = { type: "divider" }, inputs = {
+}, AssetSourceDispatchContext = createContext(void 0), AssetBrowserDispatchProvider = (props) => {
+  const { children, onSelect } = props, contextValue = {
+    onSelect
+  };
+  return /* @__PURE__ */ jsx(AssetSourceDispatchContext.Provider, { value: contextValue, children });
+}, useAssetSourceActions = () => {
+  const context = useContext(AssetSourceDispatchContext);
+  if (context === void 0)
+    throw new Error("useAssetSourceActions must be used within an AssetSourceDispatchProvider");
+  return context;
+}, useVersionedClient = () => useClient({ apiVersion: "2025-10-02" }), customScrollbar = css`
+  ::-webkit-scrollbar {
+    width: 14px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    border: 4px solid rgba(0, 0, 0, 0);
+    background: var(--card-border-color);
+    background-clip: padding-box;
+
+    &:hover {
+      background: var(--card-muted-fg-color);
+      background-clip: padding-box;
+    }
+  }
+`, GlobalStyle = createGlobalStyle`
+  .media__custom-scrollbar {
+    ${customScrollbar}
+  }
+
+  // @sanity/ui overrides
+
+  // Custom scrollbar on Box (used in Dialogs)
+  div[data-ui="Box"] {
+    ${customScrollbar}
+  }
+
+  // Dialog background color
+  div[data-ui="Dialog"] {
+    background-color: rgba(15, 17, 18, 0.9);
+  }
+
+`, useTypedSelector = useSelector, ORDER_DICTIONARY = {
+  _createdAt: {
+    asc: "Last created: Oldest first",
+    desc: "Last created: Newest first"
+  },
+  _updatedAt: {
+    asc: "Last updated: Oldest first",
+    desc: "Last updated: Newest first"
+  },
+  mimeType: {
+    asc: "MIME type: A to Z",
+    desc: "MIME type: Z to A"
+  },
+  originalFilename: {
+    asc: "File name: A to Z",
+    desc: "File name: Z to A"
+  },
+  size: {
+    asc: "File size: Smallest first",
+    desc: "File size: Largest first"
+  }
+}, getOrderTitle = (field, direction) => ORDER_DICTIONARY[field][direction], divider = { type: "divider" }, inputs = {
   altText: {
     assetTypes: ["file", "image"],
     field: "altText",
@@ -539,38 +603,7 @@ const useKeyPress = (hotkey, onPress) => {
 ], GRID_TEMPLATE_COLUMNS = {
   SMALL: "3rem 100px auto 1.5rem",
   LARGE: "3rem 100px auto 5.5rem 5.5rem 3.5rem 8.5rem 4.75rem 2rem"
-}, PANEL_HEIGHT = 32, TAG_DOCUMENT_NAME = "media.tag", TAGS_PANEL_WIDTH = 250, AssetSourceDispatchContext = createContext(void 0), AssetBrowserDispatchProvider = (props) => {
-  const { children, onSelect } = props, contextValue = {
-    onSelect
-  };
-  return /* @__PURE__ */ jsx(AssetSourceDispatchContext.Provider, { value: contextValue, children });
-}, useAssetSourceActions = () => {
-  const context = useContext(AssetSourceDispatchContext);
-  if (context === void 0)
-    throw new Error("useAssetSourceActions must be used within an AssetSourceDispatchProvider");
-  return context;
-}, useVersionedClient = () => useClient({ apiVersion: "2022-10-01" }), ORDER_DICTIONARY = {
-  _createdAt: {
-    asc: "Last created: Oldest first",
-    desc: "Last created: Newest first"
-  },
-  _updatedAt: {
-    asc: "Last updated: Oldest first",
-    desc: "Last updated: Newest first"
-  },
-  mimeType: {
-    asc: "MIME type: A to Z",
-    desc: "MIME type: Z to A"
-  },
-  originalFilename: {
-    asc: "File name: A to Z",
-    desc: "File name: Z to A"
-  },
-  size: {
-    asc: "File size: Smallest first",
-    desc: "File size: Largest first"
-  }
-}, getOrderTitle = (field, direction) => ORDER_DICTIONARY[field][direction], debugThrottle = (throttled) => function(source) {
+}, PANEL_HEIGHT = 32, TAG_DOCUMENT_NAME = "media.tag", TAGS_PANEL_WIDTH = 250, debugThrottle = (throttled) => function(source) {
   return iif(
     () => !!throttled,
     source.pipe(
@@ -1614,40 +1647,7 @@ const UPLOADS_ACTIONS = {
   (assetsPicked) => assetsPicked.length
 ), assetsActions = { ...assetsSlice.actions };
 var assetsReducer = assetsSlice.reducer;
-const customScrollbar = css`
-  ::-webkit-scrollbar {
-    width: 14px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    border: 4px solid rgba(0, 0, 0, 0);
-    background: var(--card-border-color);
-    background-clip: padding-box;
-
-    &:hover {
-      background: var(--card-muted-fg-color);
-      background-clip: padding-box;
-    }
-  }
-`, GlobalStyle = createGlobalStyle`
-  .media__custom-scrollbar {
-    ${customScrollbar}
-  }
-
-  // @sanity/ui overrides
-
-  // Custom scrollbar on Box (used in Dialogs)
-  div[data-ui="Box"] {
-    ${customScrollbar}
-  }
-
-  // Dialog background color
-  div[data-ui="Dialog"] {
-    background-color: rgba(15, 17, 18, 0.9);
-  }
-
-`, useTypedSelector = useSelector, initialState$4 = {
+const initialState$4 = {
   items: []
 }, dialogSlice = createSlice({
   name: "dialog",
@@ -2368,18 +2368,22 @@ const Container$1 = styled(Box)(({ $scheme, theme }) => css`
       components: {
         details: options?.components?.details
       },
+      createTagsOnUpload: options?.createTagsOnUpload ?? !0,
       creditLine: {
         enabled: options?.creditLine?.enabled || !1,
         excludeSources: creditLineExcludeSources
       },
-      directUploads: options?.directUploads ?? !0
+      directUploads: options?.directUploads ?? !0,
+      locales: options?.locales
     };
   }, [
     options?.creditLine?.enabled,
     options?.components,
+    options?.createTagsOnUpload,
     options?.creditLine?.excludeSources,
     options?.maximumUploadSize,
-    options?.directUploads
+    options?.directUploads,
+    options?.locales
   ]);
   return /* @__PURE__ */ jsx(ToolOptionsContext.Provider, { value, children });
 }, useToolOptions = () => {
@@ -2658,21 +2662,35 @@ const DebugControls = () => {
       ] })
     }
   ) : null;
-}, tagOptionSchema = z.object({
+};
+function localizedStringSchema(locales) {
+  if (!locales || locales.length === 0)
+    return z.string().trim().optional();
+  const shape = {};
+  for (const locale of locales)
+    shape[locale.id] = z.string().trim().optional();
+  return z.object(shape).passthrough();
+}
+const tagOptionSchema = z.object({
   label: z.string().trim().min(1, { message: "Label cannot be empty" }),
   value: z.string().trim().min(1, { message: "Value cannot be empty" })
-}), assetFormSchema = z.object({
-  altText: z.string().trim().optional(),
-  creditLine: z.string().trim().optional(),
-  description: z.string().trim().optional(),
-  opt: z.object({
-    media: z.object({
-      tags: z.array(tagOptionSchema).nullable()
-    })
-  }),
-  originalFilename: z.string().trim().min(1, { message: "Filename cannot be empty" }),
-  title: z.string().trim().optional()
-}), tagFormSchema = z.object({
+});
+function getAssetFormSchema(locales) {
+  return z.object({
+    altText: localizedStringSchema(locales),
+    creditLine: localizedStringSchema(locales),
+    description: localizedStringSchema(locales),
+    opt: z.object({
+      media: z.object({
+        tags: z.array(tagOptionSchema).nullable()
+      })
+    }),
+    originalFilename: z.string().trim().min(1, { message: "Filename cannot be empty" }),
+    title: localizedStringSchema(locales)
+  });
+}
+getAssetFormSchema();
+const tagFormSchema = z.object({
   name: z.string().min(1, { message: "Name cannot be empty" })
 });
 function getUniqueDocuments(documents) {
@@ -3107,6 +3125,11 @@ const imageDprUrl = (asset, options) => {
     )
   ] });
 });
+function toStringField(value) {
+  if (typeof value == "string") return value;
+  if (typeof value == "object" && value !== null)
+    return Object.values(value).find((v) => v) || void 0;
+}
 function Details({
   formUpdating,
   handleCreateTag,
@@ -3116,8 +3139,10 @@ function Details({
   allTagOptions,
   assetTagOptions,
   currentAsset,
-  creditLine
+  creditLine,
+  locales
 }) {
+  const hasLocales = locales && locales.length > 0, [activeLocaleTab, setActiveLocaleTab] = useState(0);
   return /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
     /* @__PURE__ */ jsx(
       FormFieldInputTags,
@@ -3144,51 +3169,117 @@ function Details({
         value: currentAsset?.originalFilename
       }
     ),
-    /* @__PURE__ */ jsx(
-      FormFieldInputText,
-      {
-        ...register("title"),
-        disabled: formUpdating,
-        error: errors?.title?.message,
-        label: "Title",
-        name: "title",
-        value: currentAsset?.title
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FormFieldInputText,
-      {
-        ...register("altText"),
-        disabled: formUpdating,
-        error: errors?.altText?.message,
-        label: "Alt Text",
-        name: "altText",
-        value: currentAsset?.altText
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FormFieldInputTextarea,
-      {
-        ...register("description"),
-        disabled: formUpdating,
-        error: errors?.description?.message,
-        label: "Description",
-        name: "description",
-        rows: 5,
-        value: currentAsset?.description
-      }
-    ),
-    creditLine?.enabled && /* @__PURE__ */ jsx(
-      FormFieldInputText,
-      {
-        ...register("creditLine"),
-        error: errors?.creditLine?.message,
-        label: "Credit",
-        name: "creditLine",
-        value: currentAsset?.creditLine,
-        disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
-      }
-    )
+    hasLocales ? /* @__PURE__ */ jsx(Card, { marginTop: 2, shadow: 1, padding: 3, radius: 1, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+      /* @__PURE__ */ jsx(TabList, { space: 2, children: locales.map((locale, idx) => /* @__PURE__ */ jsx(
+        Tab,
+        {
+          id: `locale-tab-${locale.id}`,
+          "aria-controls": `locale-panel-${locale.id}`,
+          selected: activeLocaleTab === idx,
+          onClick: () => setActiveLocaleTab(idx),
+          label: locale.title
+        },
+        locale.id
+      )) }),
+      locales.map((locale, idx) => /* @__PURE__ */ jsx(
+        TabPanel,
+        {
+          id: `locale-panel-${locale.id}`,
+          "aria-labelledby": `locale-tab-${locale.id}`,
+          hidden: activeLocaleTab !== idx,
+          children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+            /* @__PURE__ */ jsx(
+              FormFieldInputText,
+              {
+                ...register(`title.${locale.id}`),
+                disabled: formUpdating,
+                error: errors?.title?.[locale.id]?.message,
+                label: "Title",
+                name: `title.${locale.id}`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FormFieldInputText,
+              {
+                ...register(`altText.${locale.id}`),
+                disabled: formUpdating,
+                error: errors?.altText?.[locale.id]?.message,
+                label: "Alt Text",
+                name: `altText.${locale.id}`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FormFieldInputTextarea,
+              {
+                ...register(`description.${locale.id}`),
+                disabled: formUpdating,
+                error: errors?.description?.[locale.id]?.message,
+                label: "Description",
+                name: `description.${locale.id}`,
+                rows: 5
+              }
+            ),
+            creditLine?.enabled && /* @__PURE__ */ jsx(
+              FormFieldInputText,
+              {
+                ...register(`creditLine.${locale.id}`),
+                error: errors?.creditLine?.[locale.id]?.message,
+                label: "Credit",
+                name: `creditLine.${locale.id}`,
+                disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+              }
+            )
+          ] })
+        },
+        locale.id
+      ))
+    ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        FormFieldInputText,
+        {
+          ...register("title"),
+          disabled: formUpdating,
+          error: errors?.title?.message,
+          label: "Title",
+          name: "title",
+          value: toStringField(currentAsset?.title)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormFieldInputText,
+        {
+          ...register("altText"),
+          disabled: formUpdating,
+          error: errors?.altText?.message,
+          label: "Alt Text",
+          name: "altText",
+          value: toStringField(currentAsset?.altText)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormFieldInputTextarea,
+        {
+          ...register("description"),
+          disabled: formUpdating,
+          error: errors?.description?.message,
+          label: "Description",
+          name: "description",
+          rows: 5,
+          value: toStringField(currentAsset?.description)
+        }
+      ),
+      creditLine?.enabled && /* @__PURE__ */ jsx(
+        FormFieldInputText,
+        {
+          ...register("creditLine"),
+          error: errors?.creditLine?.message,
+          label: "Credit",
+          name: "creditLine",
+          value: toStringField(currentAsset?.creditLine),
+          disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+        }
+      )
+    ] })
   ] });
 }
 function renderDefaultDetails(props) {
@@ -3198,16 +3289,37 @@ const DialogAssetEdit = (props) => {
   const {
     children,
     dialog: { assetId, id, lastCreatedTag, lastRemovedTagIds }
-  } = props, client = useVersionedClient(), scheme = useColorSchemeValue(), documentStore = useDocumentStore(), dispatch = useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = useRef(void 0), [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset), [tabSection, setTabSection] = useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine, components: { details: CustomDetails } = {} } = useToolOptions(), generateDefaultValues = useCallback(
-    (asset) => ({
-      altText: asset?.altText || "",
-      creditLine: asset?.creditLine || "",
-      description: asset?.description || "",
-      originalFilename: asset?.originalFilename || "",
-      opt: { media: { tags: assetTagOptions } },
-      title: asset?.title || ""
-    }),
-    [assetTagOptions]
+  } = props, client = useVersionedClient(), scheme = useColorSchemeValue(), documentStore = useDocumentStore(), dispatch = useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = useRef(void 0), [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset), [tabSection, setTabSection] = useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine, components: { details: CustomDetails } = {}, locales } = useToolOptions(), generateDefaultValues = useCallback(
+    (asset) => {
+      if (locales && locales.length > 0) {
+        const makeLocaleObj = (field) => {
+          const obj = {};
+          for (let i = 0; i < locales.length; i++) {
+            const locale = locales[i];
+            typeof field == "object" && field && field[locale.id] ? obj[locale.id] = field[locale.id] : typeof field == "string" ? obj[locale.id] = i === 0 ? field : "" : obj[locale.id] = "";
+          }
+          return obj;
+        };
+        return {
+          altText: makeLocaleObj(asset?.altText),
+          creditLine: makeLocaleObj(asset?.creditLine),
+          description: makeLocaleObj(asset?.description),
+          originalFilename: asset?.originalFilename || "",
+          opt: { media: { tags: assetTagOptions } },
+          title: makeLocaleObj(asset?.title)
+        };
+      }
+      const flattenField = (field) => typeof field == "string" ? field : typeof field == "object" && field !== null && Object.values(field).find((v) => v) || "";
+      return {
+        altText: flattenField(asset?.altText),
+        creditLine: flattenField(asset?.creditLine),
+        description: flattenField(asset?.description),
+        originalFilename: asset?.originalFilename || "",
+        opt: { media: { tags: assetTagOptions } },
+        title: flattenField(asset?.title)
+      };
+    },
+    [assetTagOptions, locales]
   ), {
     control,
     // Read the formState before render to subscribe the form state through Proxy
@@ -3220,7 +3332,7 @@ const DialogAssetEdit = (props) => {
   } = useForm({
     defaultValues: generateDefaultValues(assetItem?.asset),
     mode: "onChange",
-    resolver: zodResolver(assetFormSchema)
+    resolver: zodResolver(getAssetFormSchema(locales))
   }), formUpdating = !assetItem || assetItem?.updating, handleClose = useCallback(() => {
     dispatch(dialogActions.remove({ id }));
   }, [dispatch, id]), handleDelete = useCallback(() => {
@@ -3243,7 +3355,39 @@ const DialogAssetEdit = (props) => {
       );
     },
     [currentAsset?._id, dispatch]
-  ), onSubmit = useCallback(
+  ), hasOrphanedLocales = useMemo(() => {
+    if (!currentAsset) return !1;
+    const isLocaleObj = (v) => typeof v == "object" && v !== null && !Array.isArray(v), fields = [
+      currentAsset.title,
+      currentAsset.altText,
+      currentAsset.description,
+      ...currentAsset._type === "sanity.imageAsset" ? [currentAsset.creditLine] : []
+    ];
+    if (!fields.some((f) => isLocaleObj(f))) return !1;
+    if (!locales || locales.length === 0) return !0;
+    const configuredIds = new Set(locales.map((l) => l.id));
+    return fields.some((f) => isLocaleObj(f) ? Object.keys(f).some((k) => !configuredIds.has(k)) : !1);
+  }, [currentAsset, locales]), handleCleanupLocales = useCallback(async () => {
+    if (!currentAsset) return;
+    const cleanField = (field) => {
+      if (typeof field != "object" || field === null || Array.isArray(field)) return field;
+      const obj = field;
+      if (!locales || locales.length === 0)
+        return Object.keys(obj).sort().map((k) => obj[k]).find((v) => v) || "";
+      const configuredIds = new Set(locales.map((l) => l.id)), cleaned = {};
+      for (const [key, val] of Object.entries(obj))
+        configuredIds.has(key) && (cleaned[key] = val);
+      return cleaned;
+    };
+    await client.patch(currentAsset._id).set({
+      title: cleanField(currentAsset.title),
+      altText: cleanField(currentAsset.altText),
+      description: cleanField(currentAsset.description),
+      ...currentAsset._type === "sanity.imageAsset" && {
+        creditLine: cleanField(currentAsset.creditLine)
+      }
+    }).commit();
+  }, [client, currentAsset, locales]), onSubmit = useCallback(
     (formData) => {
       if (!assetItem?.asset)
         return;
@@ -3291,27 +3435,42 @@ const DialogAssetEdit = (props) => {
   }, [getValues, lastRemovedTagIds, setValue]), useEffect(() => {
     assetUpdatedPrev.current !== assetItem?.asset._updatedAt && reset(generateDefaultValues(assetItem?.asset)), assetUpdatedPrev.current = assetItem?.asset._updatedAt;
   }, [assetItem?.asset, generateDefaultValues, reset]);
-  const Footer = () => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        disabled: formUpdating,
-        fontSize: 1,
-        mode: "bleed",
-        onClick: handleDelete,
-        text: "Delete",
-        tone: "critical"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FormSubmitButton,
-      {
-        disabled: formUpdating || !isDirty || !isValid,
-        isValid,
-        lastUpdated: currentAsset?._updatedAt,
-        onClick: handleSubmit(onSubmit)
-      }
-    )
+  const Footer = () => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    hasOrphanedLocales && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", gap: 3, children: [
+      /* @__PURE__ */ jsx(Text, { size: 1, children: "This asset has localized fields that are no longer configured. Clean them up to avoid validation errors." }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          fontSize: 1,
+          mode: "ghost",
+          onClick: handleCleanupLocales,
+          text: "Cleanup localized fields",
+          tone: "caution"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: formUpdating,
+          fontSize: 1,
+          mode: "bleed",
+          onClick: handleDelete,
+          text: "Delete",
+          tone: "critical"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormSubmitButton,
+        {
+          disabled: formUpdating || !isDirty || !isValid || hasOrphanedLocales,
+          isValid,
+          lastUpdated: currentAsset?._updatedAt,
+          onClick: handleSubmit(onSubmit)
+        }
+      )
+    ] })
   ] }) });
   if (!currentAsset)
     return null;
@@ -3325,7 +3484,8 @@ const DialogAssetEdit = (props) => {
     allTagOptions,
     handleCreateTag,
     currentAsset,
-    creditLine
+    creditLine,
+    locales
   };
   return /* @__PURE__ */ jsxs(
     Dialog,
@@ -5109,6 +5269,9 @@ const TableRowUpload = (props) => {
   reducers: {}
 });
 var selectedReducer = selectedSlice.reducer;
+function messageFromGenericErrorPayload(payload) {
+  return !payload || typeof payload != "object" ? "Unknown error" : "error" in payload && payload.error && typeof payload.error == "object" && payload.error !== null && "message" in payload.error ? String(payload.error.message) : "message" in payload && typeof payload.message == "string" ? String(payload.message) : "Unknown error";
+}
 const initialState = {
   items: []
 }, notificationsSlice = createSlice({
@@ -5195,11 +5358,11 @@ const initialState = {
     uploadsActions.uploadError.type
   ),
   mergeMap((action) => {
-    const error = action.payload?.error;
+    const title = `An error occurred: ${messageFromGenericErrorPayload(action.payload)}`;
     return of(
       notificationsSlice.actions.add({
         status: "error",
-        title: `An error occured: ${error.message}`
+        title
       })
     );
   })
@@ -5447,24 +5610,81 @@ const UploadDropzone = (props) => {
     isDragActive && /* @__PURE__ */ jsx(DragActiveContainer, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", justify: "center", style: { color: white.hex }, children: /* @__PURE__ */ jsx(Text, { size: 3, style: { color: "inherit" }, children: "Drop files to upload" }) }) }),
     children
   ] }) });
-}, BrowserContent = ({ onClose }) => {
-  const client = useVersionedClient(), [portalElement, setPortalElement] = useState(null), dispatch = useDispatch();
-  return useEffect(() => {
-    const handleAssetUpdate = (update) => {
-      const { documentId, result, transition } = update;
-      transition === "appear" && dispatch(assetsActions.listenerCreateQueue({ asset: result })), transition === "disappear" && dispatch(assetsActions.listenerDeleteQueue({ assetId: documentId })), transition === "update" && dispatch(assetsActions.listenerUpdateQueue({ asset: result }));
-    }, handleTagUpdate = (update) => {
-      const { documentId, result, transition } = update;
-      transition === "appear" && dispatch(tagsActions.listenerCreateQueue({ tag: result })), transition === "disappear" && dispatch(tagsActions.listenerDeleteQueue({ tagId: documentId })), transition === "update" && dispatch(tagsActions.listenerUpdateQueue({ tag: result }));
-    };
-    dispatch(assetsActions.loadPageIndex({ pageIndex: 0 })), dispatch(tagsActions.fetchRequest());
-    const subscriptionAsset = client.listen(
+};
+function getMediaTagNames(schemaType) {
+  const mediaTags = schemaType?.options?.mediaTags;
+  if (!mediaTags?.length) return [];
+  const unique = new Set(
+    mediaTags.map((t) => t?.trim()).filter((t) => !!t?.length)
+  );
+  return Array.from(unique);
+}
+function createAssetHandler(dispatch) {
+  return (update) => {
+    const { documentId, result, transition } = update;
+    switch (transition) {
+      case "appear":
+        dispatch(assetsActions.listenerCreateQueue({ asset: result }));
+        break;
+      case "disappear":
+        dispatch(assetsActions.listenerDeleteQueue({ assetId: documentId }));
+        break;
+      case "update":
+        dispatch(assetsActions.listenerUpdateQueue({ asset: result }));
+        break;
+    }
+  };
+}
+function createTagHandler(dispatch) {
+  return (update) => {
+    const { documentId, result, transition } = update;
+    switch (transition) {
+      case "appear":
+        dispatch(tagsActions.listenerCreateQueue({ tag: result }));
+        break;
+      case "disappear":
+        dispatch(tagsActions.listenerDeleteQueue({ tagId: documentId }));
+        break;
+      case "update":
+        dispatch(tagsActions.listenerUpdateQueue({ tag: result }));
+        break;
+    }
+  };
+}
+function useBrowserInit(client, schemaType) {
+  const dispatch = useDispatch(), tagsByIds = useSelector((state) => state.tags.byIds), tagsFetchCount = useSelector((state) => state.tags.fetchCount), tagNames = getMediaTagNames(schemaType), hasMediaTags = tagNames.length > 0;
+  useEffect(() => {
+    hasMediaTags || dispatch(searchActions.facetsClear()), dispatch(tagsActions.fetchRequest());
+    const assetSubscription = client.listen(
       groq`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`
-    ).subscribe(handleAssetUpdate), subscriptionTag = client.listen(groq`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`).subscribe(handleTagUpdate);
+    ).subscribe(createAssetHandler(dispatch)), tagSubscription = client.listen(groq`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`).subscribe(createTagHandler(dispatch));
     return () => {
-      subscriptionAsset?.unsubscribe(), subscriptionTag?.unsubscribe();
+      assetSubscription.unsubscribe(), tagSubscription.unsubscribe();
     };
-  }, [client, dispatch]), /* @__PURE__ */ jsx(PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxs(UploadDropzone, { children: [
+  }, [client, dispatch, hasMediaTags]), useEffect(() => {
+    if (!hasMediaTags || tagsFetchCount < 0) return;
+    const tagFacetInput = inputs.tag;
+    if (tagFacetInput.type !== "searchable") return;
+    const resolvedTags = tagNames.map((name) => Object.values(tagsByIds).find((item) => item.tag.name.current === name)).filter((item) => !!item);
+    dispatch(searchActions.facetsClear());
+    for (const tagItem of resolvedTags)
+      dispatch(
+        searchActions.facetsAdd({
+          facet: {
+            ...tagFacetInput,
+            operatorType: "references",
+            value: { label: tagItem.tag.name.current, value: tagItem.tag._id }
+          }
+        })
+      );
+  }, [tagsFetchCount, hasMediaTags]);
+}
+const BrowserContent = ({
+  onClose,
+  schemaType
+}) => {
+  const client = useVersionedClient(), [portalElement, setPortalElement] = useState(null);
+  return useBrowserInit(client, schemaType), /* @__PURE__ */ jsx(PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxs(UploadDropzone, { children: [
     /* @__PURE__ */ jsx(Dialogs, {}),
     /* @__PURE__ */ jsx(Notifications, {}),
     /* @__PURE__ */ jsx(Card, { display: "flex", height: "fill", ref: setPortalElement, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", flex: 1, children: [
@@ -5491,7 +5711,7 @@ const UploadDropzone = (props) => {
       selectedAssets: props?.selectedAssets,
       children: /* @__PURE__ */ jsxs(AssetBrowserDispatchProvider, { onSelect: props?.onSelect, children: [
         /* @__PURE__ */ jsx(GlobalStyle, {}),
-        /* @__PURE__ */ jsx(BrowserContent, { onClose: props?.onClose })
+        /* @__PURE__ */ jsx(BrowserContent, { onClose: props?.onClose, schemaType: props?.schemaType })
       ] })
     }
   );
@@ -5518,7 +5738,7 @@ const UploadDropzone = (props) => {
         width: "100%",
         zIndex
       },
-      children: /* @__PURE__ */ jsx(Browser, { document: currentDocument, ...props })
+      children: /* @__PURE__ */ jsx(Browser, { document: currentDocument, schemaType: props.schemaType, ...props })
     }
   ) }) });
 }, useRootPortalElement = () => {
@@ -5583,9 +5803,78 @@ const plugin = {
     types: [mediaTag]
   },
   tools: (prev) => [...prev, tool]
-}));
+})), pendingByAsset = /* @__PURE__ */ new Map();
+function applyMediaTags(options) {
+  const { assetId } = options, chain = (pendingByAsset.get(assetId) ?? Promise.resolve()).then(
+    () => doApplyMediaTags(options)
+  ), cleanup = chain.catch(() => {
+  }).finally(() => {
+    pendingByAsset.get(assetId) === cleanup && pendingByAsset.delete(assetId);
+  });
+  return pendingByAsset.set(assetId, cleanup), chain;
+}
+async function doApplyMediaTags({
+  client,
+  assetId,
+  mediaTags,
+  createTagsOnUpload = !0
+}) {
+  if (!mediaTags || mediaTags.length === 0) return;
+  const validTags = (await Promise.all(
+    mediaTags.map(async (tagName) => await client.fetch(
+      groq`*[_type == "${TAG_DOCUMENT_NAME}" && name.current == $tagName][0]`,
+      { tagName }
+    ) || (createTagsOnUpload ? await client.create({
+      _type: TAG_DOCUMENT_NAME,
+      name: { _type: "slug", current: tagName }
+    }) : null))
+  )).filter((tag) => tag !== null);
+  if (validTags.length === 0) return;
+  const existing = await client.fetch(
+    groq`*[_id == $assetId][0]{'tagIds': opt.media.tags[]._ref}`,
+    { assetId },
+    { useCdn: !1 }
+    // bypass CDN cache so we see the latest committed tag refs
+  ), existingIds = new Set(existing?.tagIds ?? []), tagReferences = validTags.filter((tag) => !existingIds.has(tag._id)).map((tag) => ({
+    _key: nanoid(),
+    _ref: tag._id,
+    _type: "reference",
+    _weak: !0
+  }));
+  tagReferences.length !== 0 && await client.patch(assetId).setIfMissing({ opt: {} }).setIfMissing({ "opt.media": {} }).setIfMissing({ "opt.media.tags": [] }).append("opt.media.tags", tagReferences).commit();
+}
+function AutoTagInput(props) {
+  const { renderDefault, schemaType, value, mediaTags: mediaTagsProp } = props, toast = useToast(), mediaTags = mediaTagsProp ?? schemaType?.options?.mediaTags, client = useVersionedClient(), { createTagsOnUpload } = useToolOptions(), prevAssetRef = useRef(void 0), isInitialMount = useRef(!0), currentAssetRef = value?.asset?._ref;
+  return useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = !1, prevAssetRef.current = currentAssetRef;
+      return;
+    }
+    const previousRef = prevAssetRef.current;
+    prevAssetRef.current = currentAssetRef, !(!mediaTags?.length || !currentAssetRef || currentAssetRef === previousRef) && applyMediaTags({
+      client,
+      assetId: currentAssetRef,
+      mediaTags,
+      createTagsOnUpload
+    }).catch((err) => {
+      console.error("[sanity-plugin-media] Failed to apply auto-tags:", err);
+      const label = mediaTags.length === 1 ? "tag" : "tags";
+      toast.push({ closable: !0, status: "error", title: `Failed to apply the media ${label} ${mediaTags.join(", ")}` });
+    });
+  }, [currentAssetRef, mediaTags, client, createTagsOnUpload]), renderDefault(props);
+}
+function mediaField(config) {
+  const { mediaTags, options, components: components2, ...rest } = config;
+  return {
+    ...rest,
+    options: { ...options, mediaTags },
+    components: { ...components2, input: AutoTagInput }
+  };
+}
 export {
+  AutoTagInput,
   media,
-  mediaAssetSource
+  mediaAssetSource,
+  mediaField
 };
 //# sourceMappingURL=index.mjs.map