sanity-plugin-media 4.1.1 → 4.3.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), groq = require("groq"), reactRedux = require("react-redux"), toolkit = require("@reduxjs/toolkit"), nanoid = require("nanoid"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), uuid = require("@sanity/uuid"), styledComponents = require("styled-components"), pluralize = require("pluralize"), reactNprogress = require("@tanem/react-nprogress"), color = require("@sanity/color"), Select = require("react-select"), reactVirtuoso = require("react-virtuoso"), zod = require("@hookform/resolvers/zod"), reactHookForm = require("react-hook-form"), z = require("zod"), dateFns = require("date-fns"), filesize = require("filesize"), copy = require("copy-to-clipboard"), router = require("sanity/router"), reactFileIcon = require("react-file-icon"), CreatableSelect = require("react-select/creatable"), reactDropzone = require("react-dropzone");
+var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), styledComponents = require("styled-components"), reactRedux = require("react-redux"), toolkit = require("@reduxjs/toolkit"), pluralize = require("pluralize"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), groq = require("groq"), nanoid = require("nanoid"), uuid = require("@sanity/uuid"), reactNprogress = require("@tanem/react-nprogress"), color = require("@sanity/color"), Select = require("react-select"), reactVirtuoso = require("react-virtuoso"), zod = require("@hookform/resolvers/zod"), reactHookForm = require("react-hook-form"), z = require("zod"), dateFns = require("date-fns"), filesize = require("filesize"), copy = require("copy-to-clipboard"), router = require("sanity/router"), reactFileIcon = require("react-file-icon"), CreatableSelect = require("react-select/creatable"), reactDropzone = require("react-dropzone");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -19,7 +19,7 @@ function _interopNamespaceCompat(e) {
     }
   }), n.default = e, Object.freeze(n);
 }
-var groq__default = /* @__PURE__ */ _interopDefaultCompat(groq), pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize), Select__default = /* @__PURE__ */ _interopDefaultCompat(Select), z__namespace = /* @__PURE__ */ _interopNamespaceCompat(z), filesize__default = /* @__PURE__ */ _interopDefaultCompat(filesize), copy__default = /* @__PURE__ */ _interopDefaultCompat(copy), CreatableSelect__default = /* @__PURE__ */ _interopDefaultCompat(CreatableSelect);
+var pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize), groq__default = /* @__PURE__ */ _interopDefaultCompat(groq), Select__default = /* @__PURE__ */ _interopDefaultCompat(Select), z__namespace = /* @__PURE__ */ _interopNamespaceCompat(z), filesize__default = /* @__PURE__ */ _interopDefaultCompat(filesize), copy__default = /* @__PURE__ */ _interopDefaultCompat(copy), CreatableSelect__default = /* @__PURE__ */ _interopDefaultCompat(CreatableSelect);
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
 }
@@ -169,7 +169,71 @@ const useKeyPress = (hotkey, onPress) => {
   return react.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 = react.createContext(void 0), AssetBrowserDispatchProvider = (props) => {
+  const { children, onSelect } = props, contextValue = {
+    onSelect
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AssetSourceDispatchContext.Provider, { value: contextValue, children });
+}, useAssetSourceActions = () => {
+  const context = react.useContext(AssetSourceDispatchContext);
+  if (context === void 0)
+    throw new Error("useAssetSourceActions must be used within an AssetSourceDispatchProvider");
+  return context;
+}, useVersionedClient = () => sanity.useClient({ apiVersion: "2025-10-02" }), customScrollbar = styledComponents.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 = styledComponents.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 = reactRedux.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",
@@ -532,38 +596,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 = react.createContext(void 0), AssetBrowserDispatchProvider = (props) => {
-  const { children, onSelect } = props, contextValue = {
-    onSelect
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(AssetSourceDispatchContext.Provider, { value: contextValue, children });
-}, useAssetSourceActions = () => {
-  const context = react.useContext(AssetSourceDispatchContext);
-  if (context === void 0)
-    throw new Error("useAssetSourceActions must be used within an AssetSourceDispatchProvider");
-  return context;
-}, useVersionedClient = () => sanity.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 rxjs.iif(
     () => !!throttled,
     source.pipe(
@@ -1607,40 +1640,7 @@ const UPLOADS_ACTIONS = {
   (assetsPicked) => assetsPicked.length
 ), assetsActions = { ...assetsSlice.actions };
 var assetsReducer = assetsSlice.reducer;
-const customScrollbar = styledComponents.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 = styledComponents.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 = reactRedux.useSelector, initialState$4 = {
+const initialState$4 = {
   items: []
 }, dialogSlice = toolkit.createSlice({
   name: "dialog",
@@ -2361,18 +2361,22 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
       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__ */ jsxRuntime.jsx(ToolOptionsContext.Provider, { value, children });
 }, useToolOptions = () => {
@@ -2651,21 +2655,35 @@ const DebugControls = () => {
       ] })
     }
   ) : null;
-}, tagOptionSchema = z__namespace.object({
+};
+function localizedStringSchema(locales) {
+  if (!locales || locales.length === 0)
+    return z__namespace.string().trim().optional();
+  const shape = {};
+  for (const locale of locales)
+    shape[locale.id] = z__namespace.string().trim().optional();
+  return z__namespace.object(shape).passthrough();
+}
+const tagOptionSchema = z__namespace.object({
   label: z__namespace.string().trim().min(1, { message: "Label cannot be empty" }),
   value: z__namespace.string().trim().min(1, { message: "Value cannot be empty" })
-}), assetFormSchema = z__namespace.object({
-  altText: z__namespace.string().trim().optional(),
-  creditLine: z__namespace.string().trim().optional(),
-  description: z__namespace.string().trim().optional(),
-  opt: z__namespace.object({
-    media: z__namespace.object({
-      tags: z__namespace.array(tagOptionSchema).nullable()
-    })
-  }),
-  originalFilename: z__namespace.string().trim().min(1, { message: "Filename cannot be empty" }),
-  title: z__namespace.string().trim().optional()
-}), tagFormSchema = z__namespace.object({
+});
+function getAssetFormSchema(locales) {
+  return z__namespace.object({
+    altText: localizedStringSchema(locales),
+    creditLine: localizedStringSchema(locales),
+    description: localizedStringSchema(locales),
+    opt: z__namespace.object({
+      media: z__namespace.object({
+        tags: z__namespace.array(tagOptionSchema).nullable()
+      })
+    }),
+    originalFilename: z__namespace.string().trim().min(1, { message: "Filename cannot be empty" }),
+    title: localizedStringSchema(locales)
+  });
+}
+getAssetFormSchema();
+const tagFormSchema = z__namespace.object({
   name: z__namespace.string().min(1, { message: "Name cannot be empty" })
 });
 function getUniqueDocuments(documents) {
@@ -3100,6 +3118,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,
@@ -3109,8 +3132,10 @@ function Details({
   allTagOptions,
   assetTagOptions,
   currentAsset,
-  creditLine
+  creditLine,
+  locales
 }) {
+  const hasLocales = locales && locales.length > 0, [activeLocaleTab, setActiveLocaleTab] = react.useState(0);
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       FormFieldInputTags,
@@ -3137,51 +3162,117 @@ function Details({
         value: currentAsset?.originalFilename
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormFieldInputText,
-      {
-        ...register("title"),
-        disabled: formUpdating,
-        error: errors?.title?.message,
-        label: "Title",
-        name: "title",
-        value: currentAsset?.title
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormFieldInputText,
-      {
-        ...register("altText"),
-        disabled: formUpdating,
-        error: errors?.altText?.message,
-        label: "Alt Text",
-        name: "altText",
-        value: currentAsset?.altText
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormFieldInputTextarea,
-      {
-        ...register("description"),
-        disabled: formUpdating,
-        error: errors?.description?.message,
-        label: "Description",
-        name: "description",
-        rows: 5,
-        value: currentAsset?.description
-      }
-    ),
-    creditLine?.enabled && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Card, { marginTop: 2, shadow: 1, padding: 3, radius: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.TabList, { space: 2, children: locales.map((locale, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        ui.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__ */ jsxRuntime.jsx(
+        ui.TabPanel,
+        {
+          id: `locale-panel-${locale.id}`,
+          "aria-labelledby": `locale-tab-${locale.id}`,
+          hidden: activeLocaleTab !== idx,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FormFieldInputText,
+              {
+                ...register(`title.${locale.id}`),
+                disabled: formUpdating,
+                error: errors?.title?.[locale.id]?.message,
+                label: "Title",
+                name: `title.${locale.id}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FormFieldInputText,
+              {
+                ...register(`altText.${locale.id}`),
+                disabled: formUpdating,
+                error: errors?.altText?.[locale.id]?.message,
+                label: "Alt Text",
+                name: `altText.${locale.id}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormFieldInputText,
+        {
+          ...register("title"),
+          disabled: formUpdating,
+          error: errors?.title?.message,
+          label: "Title",
+          name: "title",
+          value: toStringField(currentAsset?.title)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormFieldInputText,
+        {
+          ...register("altText"),
+          disabled: formUpdating,
+          error: errors?.altText?.message,
+          label: "Alt Text",
+          name: "altText",
+          value: toStringField(currentAsset?.altText)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormFieldInputTextarea,
+        {
+          ...register("description"),
+          disabled: formUpdating,
+          error: errors?.description?.message,
+          label: "Description",
+          name: "description",
+          rows: 5,
+          value: toStringField(currentAsset?.description)
+        }
+      ),
+      creditLine?.enabled && /* @__PURE__ */ jsxRuntime.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) {
@@ -3191,16 +3282,37 @@ const DialogAssetEdit = (props) => {
   const {
     children,
     dialog: { assetId, id, lastCreatedTag, lastRemovedTagIds }
-  } = props, client = useVersionedClient(), scheme = sanity.useColorSchemeValue(), documentStore = sanity.useDocumentStore(), dispatch = reactRedux.useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = react.useRef(void 0), [assetSnapshot, setAssetSnapshot] = react.useState(assetItem?.asset), [tabSection, setTabSection] = react.useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine, components: { details: CustomDetails } = {} } = useToolOptions(), generateDefaultValues = react.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 = sanity.useColorSchemeValue(), documentStore = sanity.useDocumentStore(), dispatch = reactRedux.useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = react.useRef(void 0), [assetSnapshot, setAssetSnapshot] = react.useState(assetItem?.asset), [tabSection, setTabSection] = react.useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine, components: { details: CustomDetails } = {}, locales } = useToolOptions(), generateDefaultValues = react.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
@@ -3213,7 +3325,7 @@ const DialogAssetEdit = (props) => {
   } = reactHookForm.useForm({
     defaultValues: generateDefaultValues(assetItem?.asset),
     mode: "onChange",
-    resolver: zod.zodResolver(assetFormSchema)
+    resolver: zod.zodResolver(getAssetFormSchema(locales))
   }), formUpdating = !assetItem || assetItem?.updating, handleClose = react.useCallback(() => {
     dispatch(dialogActions.remove({ id }));
   }, [dispatch, id]), handleDelete = react.useCallback(() => {
@@ -3236,7 +3348,39 @@ const DialogAssetEdit = (props) => {
       );
     },
     [currentAsset?._id, dispatch]
-  ), onSubmit = react.useCallback(
+  ), hasOrphanedLocales = react.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 = react.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 = react.useCallback(
     (formData) => {
       if (!assetItem?.asset)
         return;
@@ -3284,27 +3428,42 @@ const DialogAssetEdit = (props) => {
   }, [getValues, lastRemovedTagIds, setValue]), react.useEffect(() => {
     assetUpdatedPrev.current !== assetItem?.asset._updatedAt && reset(generateDefaultValues(assetItem?.asset)), assetUpdatedPrev.current = assetItem?.asset._updatedAt;
   }, [assetItem?.asset, generateDefaultValues, reset]);
-  const Footer = () => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Button,
-      {
-        disabled: formUpdating,
-        fontSize: 1,
-        mode: "bleed",
-        onClick: handleDelete,
-        text: "Delete",
-        tone: "critical"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormSubmitButton,
-      {
-        disabled: formUpdating || !isDirty || !isValid,
-        isValid,
-        lastUpdated: currentAsset?._updatedAt,
-        onClick: handleSubmit(onSubmit)
-      }
-    )
+  const Footer = () => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+    hasOrphanedLocales && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 3, radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", justify: "space-between", gap: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "This asset has localized fields that are no longer configured. Clean them up to avoid validation errors." }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          fontSize: 1,
+          mode: "ghost",
+          onClick: handleCleanupLocales,
+          text: "Cleanup localized fields",
+          tone: "caution"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          disabled: formUpdating,
+          fontSize: 1,
+          mode: "bleed",
+          onClick: handleDelete,
+          text: "Delete",
+          tone: "critical"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormSubmitButton,
+        {
+          disabled: formUpdating || !isDirty || !isValid || hasOrphanedLocales,
+          isValid,
+          lastUpdated: currentAsset?._updatedAt,
+          onClick: handleSubmit(onSubmit)
+        }
+      )
+    ] })
   ] }) });
   if (!currentAsset)
     return null;
@@ -3318,7 +3477,8 @@ const DialogAssetEdit = (props) => {
     allTagOptions,
     handleCreateTag,
     currentAsset,
-    creditLine
+    creditLine,
+    locales
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Dialog,
@@ -5104,6 +5264,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 = toolkit.createSlice({
@@ -5190,11 +5353,11 @@ const initialState = {
     uploadsActions.uploadError.type
   ),
   operators$1.mergeMap((action) => {
-    const error = action.payload?.error;
+    const title = `An error occurred: ${messageFromGenericErrorPayload(action.payload)}`;
     return rxjs.of(
       notificationsSlice.actions.add({
         status: "error",
-        title: `An error occured: ${error.message}`
+        title
       })
     );
   })
@@ -5442,24 +5605,81 @@ const UploadDropzone = (props) => {
     isDragActive && /* @__PURE__ */ jsxRuntime.jsx(DragActiveContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", justify: "center", style: { color: color.white.hex }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 3, style: { color: "inherit" }, children: "Drop files to upload" }) }) }),
     children
   ] }) });
-}, BrowserContent = ({ onClose }) => {
-  const client = useVersionedClient(), [portalElement, setPortalElement] = react.useState(null), dispatch = reactRedux.useDispatch();
-  return react.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 = reactRedux.useDispatch(), tagsByIds = reactRedux.useSelector((state) => state.tags.byIds), tagsFetchCount = reactRedux.useSelector((state) => state.tags.fetchCount), tagNames = getMediaTagNames(schemaType), hasMediaTags = tagNames.length > 0;
+  react.useEffect(() => {
+    hasMediaTags || dispatch(searchActions.facetsClear()), dispatch(tagsActions.fetchRequest());
+    const assetSubscription = client.listen(
       groq__default.default`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`
-    ).subscribe(handleAssetUpdate), subscriptionTag = client.listen(groq__default.default`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`).subscribe(handleTagUpdate);
+    ).subscribe(createAssetHandler(dispatch)), tagSubscription = client.listen(groq__default.default`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`).subscribe(createTagHandler(dispatch));
     return () => {
-      subscriptionAsset?.unsubscribe(), subscriptionTag?.unsubscribe();
+      assetSubscription.unsubscribe(), tagSubscription.unsubscribe();
     };
-  }, [client, dispatch]), /* @__PURE__ */ jsxRuntime.jsx(ui.PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxRuntime.jsxs(UploadDropzone, { children: [
+  }, [client, dispatch, hasMediaTags]), react.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] = react.useState(null);
+  return useBrowserInit(client, schemaType), /* @__PURE__ */ jsxRuntime.jsx(ui.PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxRuntime.jsxs(UploadDropzone, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Dialogs, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Notifications, {}),
     /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { display: "flex", height: "fill", ref: setPortalElement, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", flex: 1, children: [
@@ -5486,7 +5706,7 @@ const UploadDropzone = (props) => {
       selectedAssets: props?.selectedAssets,
       children: /* @__PURE__ */ jsxRuntime.jsxs(AssetBrowserDispatchProvider, { onSelect: props?.onSelect, children: [
         /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(BrowserContent, { onClose: props?.onClose })
+        /* @__PURE__ */ jsxRuntime.jsx(BrowserContent, { onClose: props?.onClose, schemaType: props?.schemaType })
       ] })
     }
   );
@@ -5513,7 +5733,7 @@ const UploadDropzone = (props) => {
         width: "100%",
         zIndex
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(Browser, { document: currentDocument, ...props })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Browser, { document: currentDocument, schemaType: props.schemaType, ...props })
     }
   ) }) });
 }, useRootPortalElement = () => {
@@ -5578,7 +5798,76 @@ 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__default.default`*[_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__default.default`*[_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.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 = ui.useToast(), mediaTags = mediaTagsProp ?? schemaType?.options?.mediaTags, client = useVersionedClient(), { createTagsOnUpload } = useToolOptions(), prevAssetRef = react.useRef(void 0), isInitialMount = react.useRef(!0), currentAssetRef = value?.asset?._ref;
+  return react.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, ...rest } = config;
+  return {
+    ...rest,
+    options: { ...options, mediaTags },
+    components: { ...components, input: AutoTagInput }
+  };
+}
+exports.AutoTagInput = AutoTagInput;
 exports.media = media;
 exports.mediaAssetSource = mediaAssetSource;
+exports.mediaField = mediaField;
 //# sourceMappingURL=index.js.map