sanity-plugin-image-resizer 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tristan Bagot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,91 @@
+# sanity-plugin-image-resizer
+
+> This is a **Sanity Studio v3** plugin.
+
+Batch-optimise image assets in your Sanity dataset. Scans all `sanity.imageAsset` documents for constraint violations (TIFF format, oversized width or filesize) and lets editors resize, compress and convert them in-place — re-encoding via the Sanity Image API, uploading the optimised version, re-linking all references and cleaning up the old asset.
+
+## Features
+
+- **Format conversion** — TIFF → WebP (or JPG), optional PNG → WebP
+- **Resize** — caps images to a configurable max width
+- **Compress** — progressively lowers quality until the file fits within the size budget
+- **Batch processing** — process all violating assets in parallel
+- **Reference patching** — automatically updates every document referencing the old asset
+- **Configurable** — override accepted types, max size and max width from plugin config
+- **Validation helper** — export a `validateImageSize` custom validator for your schemas
+
+## Installation
+
+```sh
+npm install sanity-plugin-image-resizer
+```
+
+## Usage
+
+Add it as a plugin in `sanity.config.ts` (or .js):
+
+```ts
+import { defineConfig } from 'sanity'
+import { imageResizerPlugin } from 'sanity-plugin-image-resizer'
+
+export default defineConfig({
+  // ...
+  plugins: [
+    imageResizerPlugin({
+      // All options are optional — these are the defaults:
+      imageAccept: 'image/jpeg, image/png, image/gif, image/webp',
+      imageMaxSize: 20 * 1024 * 1024, // 20 MB
+      imageMaxWidth: 6000,
+    }),
+  ],
+})
+```
+
+### Image validation in schemas
+
+The plugin exports a `validateImageSize` custom validator you can attach to any image field to enforce the same constraints at document level:
+
+```ts
+import { defineType, defineField } from 'sanity'
+import { validateImageSize } from 'sanity-plugin-image-resizer'
+
+export default defineType({
+  name: 'myDocument',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'photo',
+      type: 'image',
+      validation: (rule) => rule.custom(validateImageSize),
+    }),
+  ],
+})
+```
+
+### Using the tool
+
+1. Open your Sanity Studio.
+2. Navigate to the **Image Optimiser** tool in the Studio sidebar.
+3. The tool automatically scans all image assets and shows those violating constraints.
+4. Click **Process All** to batch-optimise, or process individual assets.
+5. Use the ⚙ Settings button to toggle PNG → WebP and TIFF → JPG conversions.
+
+## Configuration options
+
+| Option          | Type     | Default                                          | Description                           |
+| --------------- | -------- | ------------------------------------------------ | ------------------------------------- |
+| `imageAccept`   | `string` | `'image/jpeg, image/png, image/gif, image/webp'` | Accepted MIME types (comma-separated) |
+| `imageMaxSize`  | `number` | `20971520` (20 MB)                               | Max file size in bytes                |
+| `imageMaxWidth` | `number` | `6000`                                           | Max image width in pixels             |
+
+## License
+
+[MIT](LICENSE) © Tristan Bagot
+
+## Develop & test
+
+This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
+with default configuration for build & watch scripts.
+
+See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
+on how to run this plugin with hotreload in the studio.

package/dist/_chunks-cjs/resources.js

@@ -0,0 +1,4 @@
+"use strict";
+var resources = {};
+exports.default = resources;
+//# sourceMappingURL=resources.js.map

package/dist/_chunks-cjs/resources.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resources.js","sources":["../../src/i18n/resources.ts"],"sourcesContent":["export default {}\n"],"names":[],"mappings":";AAAA,IAAA,YAAe,CAAA;;"}

package/dist/_chunks-es/resources.mjs

@@ -0,0 +1,5 @@
+var resources = {};
+export {
+  resources as default
+};
+//# sourceMappingURL=resources.mjs.map

package/dist/_chunks-es/resources.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resources.mjs","sources":["../../src/i18n/resources.ts"],"sourcesContent":["export default {}\n"],"names":[],"mappings":"AAAA,IAAA,YAAe,CAAA;"}

package/dist/index.d.mts

@@ -0,0 +1,31 @@
+import { CustomValidator } from 'sanity'
+import { Plugin as Plugin_2 } from 'sanity'
+
+/** @public */
+export declare let IMAGE_ACCEPT: string
+
+/** @public */
+export declare let IMAGE_MAX_SIZE: number
+
+/** @public */
+export declare let IMAGE_MAX_WIDTH: number
+
+/** @public */
+export declare interface ImageResizerOptions {
+  /** Accepted image MIME types (comma-separated). Default: 'image/jpeg, image/png, image/gif, image/webp' */
+  imageAccept?: string
+  /** Max file size in bytes. Default: 20 * 1024 * 1024 (20 MB) */
+  imageMaxSize?: number
+  /** Max image width in pixels. Default: 10000 */
+  imageMaxWidth?: number
+}
+
+/**
+ * @public
+ */
+export declare const imageResizerPlugin: Plugin_2<void | ImageResizerOptions>
+
+/** @public */
+export declare const validateImageSize: CustomValidator
+
+export {}

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import { CustomValidator } from 'sanity'
+import { Plugin as Plugin_2 } from 'sanity'
+
+/** @public */
+export declare let IMAGE_ACCEPT: string
+
+/** @public */
+export declare let IMAGE_MAX_SIZE: number
+
+/** @public */
+export declare let IMAGE_MAX_WIDTH: number
+
+/** @public */
+export declare interface ImageResizerOptions {
+  /** Accepted image MIME types (comma-separated). Default: 'image/jpeg, image/png, image/gif, image/webp' */
+  imageAccept?: string
+  /** Max file size in bytes. Default: 20 * 1024 * 1024 (20 MB) */
+  imageMaxSize?: number
+  /** Max image width in pixels. Default: 10000 */
+  imageMaxWidth?: number
+}
+
+/**
+ * @public
+ */
+export declare const imageResizerPlugin: Plugin_2<void | ImageResizerOptions>
+
+/** @public */
+export declare const validateImageSize: CustomValidator
+
+export {}

package/dist/index.js

@@ -0,0 +1,487 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ui = require("@sanity/ui"), icons = require("@sanity/icons");
+const imageResizerLocaleNamespace = "image-resizer", imageResizerUsEnglishLocaleBundle = sanity.defineLocaleResourceBundle({
+  locale: "en-US",
+  namespace: imageResizerLocaleNamespace,
+  resources: () => Promise.resolve().then(function() {
+    return require("./_chunks-cjs/resources.js");
+  })
+}), DEFAULT_SETTINGS = {
+  pngToWebp: !1,
+  tiffToJpg: !1
+}, DEFAULTS = {
+  imageAccept: "image/jpeg, image/png, image/gif, image/webp",
+  imageMaxSize: 20 * 1024 * 1024,
+  imageMaxWidth: 6e3
+};
+exports.IMAGE_ACCEPT = DEFAULTS.imageAccept;
+exports.IMAGE_MAX_SIZE = DEFAULTS.imageMaxSize;
+exports.IMAGE_MAX_WIDTH = DEFAULTS.imageMaxWidth;
+function applyConfig(options) {
+  const resolved = { ...DEFAULTS, ...options };
+  exports.IMAGE_ACCEPT = resolved.imageAccept, exports.IMAGE_MAX_SIZE = resolved.imageMaxSize, exports.IMAGE_MAX_WIDTH = resolved.imageMaxWidth;
+}
+const MIME_FORMAT_MAP = {
+  "image/jpeg": "jpg",
+  "image/png": "png",
+  "image/webp": "webp",
+  "image/gif": "gif"
+}, QUALITY_STEPS = [92, 80, 70, 60, 50, 40], CONCURRENCY = 3;
+function getViolations(asset, settings) {
+  const v = [];
+  return asset.mimeType === "image/tiff" && v.push("format"), settings.pngToWebp && asset.mimeType === "image/png" && v.push("format"), asset.width > exports.IMAGE_MAX_WIDTH && v.push("width"), asset.size > exports.IMAGE_MAX_SIZE && v.push("size"), v;
+}
+function outputFormat(inputMimeType, settings) {
+  return inputMimeType === "image/tiff" ? settings.tiffToJpg ? "jpg" : "webp" : inputMimeType === "image/png" && settings.pngToWebp ? "webp" : MIME_FORMAT_MAP[inputMimeType] ?? "png";
+}
+async function processImage(url, inputMimeType, currentWidth, settings) {
+  const outFormat = outputFormat(inputMimeType, settings), transformUrl = new URL(url);
+  transformUrl.searchParams.set("fm", outFormat), transformUrl.searchParams.set(
+    "w",
+    String(Math.min(currentWidth, exports.IMAGE_MAX_WIDTH))
+  );
+  const maxSizeMB = exports.IMAGE_MAX_SIZE / 1024 / 1024;
+  for (const q of QUALITY_STEPS) {
+    transformUrl.searchParams.set("q", String(q));
+    const res = await fetch(transformUrl.toString());
+    if (!res.ok) throw new Error(`Fetch failed (HTTP ${res.status})`);
+    const blob = await res.blob();
+    if (blob.size <= exports.IMAGE_MAX_SIZE)
+      return { blob, outFormat };
+  }
+  throw new Error(`Cannot compress image below ${maxSizeMB} MB`);
+}
+function buildReplacementPatch(obj, oldId, newId, path = "") {
+  if (!obj || typeof obj != "object") return {};
+  if (Array.isArray(obj))
+    return obj.reduce(
+      (acc, item, i) => {
+        const key = item && typeof item == "object" && typeof item._key == "string" ? `_key=="${item._key}"` : String(i), childPath = path ? `${path}[${key}]` : `[${key}]`;
+        return Object.assign(
+          acc,
+          buildReplacementPatch(item, oldId, newId, childPath)
+        );
+      },
+      {}
+    );
+  const record = obj;
+  return record.asset?._ref === oldId ? { [path ? `${path}.asset` : "asset"]: { _type: "reference", _ref: newId } } : Object.keys(record).filter((k) => !k.startsWith("_")).reduce(
+    (acc, key) => {
+      const childPath = path ? `${path}.${key}` : key;
+      return Object.assign(
+        acc,
+        buildReplacementPatch(record[key], oldId, newId, childPath)
+      );
+    },
+    {}
+  );
+}
+const validateImageSize = async (value, context) => {
+  if (!value?.asset?._ref) return !0;
+  const asset = await context.getClient({ apiVersion: "2025-02-19" }).fetch(
+    '*[_id == $id][0]{ size, "width": metadata.dimensions.width, mimeType }',
+    { id: value.asset._ref }
+  );
+  if (!asset) return !0;
+  const allowedMimeTypes = exports.IMAGE_ACCEPT.split(",").map((s) => s.trim());
+  if (asset.mimeType && !allowedMimeTypes.includes(asset.mimeType))
+    return `File type "${asset.mimeType}" is not allowed. Accepted types: ${allowedMimeTypes.join(", ")}`;
+  if (asset.size && asset.size > exports.IMAGE_MAX_SIZE) {
+    const sizeMB = (asset.size / 1048576).toFixed(1), maxMB = (exports.IMAGE_MAX_SIZE / (1024 * 1024)).toFixed(0);
+    return `Image size (${sizeMB}MB) exceeds the maximum of ${maxMB}MB`;
+  }
+  return asset.width && asset.width > exports.IMAGE_MAX_WIDTH ? `Image width (${asset.width}px) exceeds the maximum of ${exports.IMAGE_MAX_WIDTH}px` : !0;
+}, MAX_SIZE_MB$1 = exports.IMAGE_MAX_SIZE / 1024 / 1024, VIOLATION_LABELS = {
+  format: "TIFF \u2192 WebP",
+  width: `> ${exports.IMAGE_MAX_WIDTH}px`,
+  size: `> ${MAX_SIZE_MB$1} MB`
+};
+function formatViolationLabel(settings) {
+  const parts = [];
+  return parts.push(settings.tiffToJpg ? "TIFF \u2192 JPG" : "TIFF \u2192 WebP"), settings.pngToWebp && parts.push("PNG \u2192 WebP"), parts.join(", ");
+}
+function ViolationBadge({
+  type,
+  settings
+}) {
+  const label = type === "format" ? formatViolationLabel(settings) : VIOLATION_LABELS[type];
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { tone: "caution", size: 1, children: label });
+}
+function statusTone(status) {
+  return {
+    done: "positive",
+    error: "critical",
+    processing: "primary",
+    idle: "default"
+  }[status];
+}
+function AssetCard({
+  asset,
+  onProcess,
+  settings
+}) {
+  const isDone = asset.status === "done" && asset.newUrl, thumbUrl = isDone ? asset.newUrl : asset.url, sizeReduction = isDone && asset.newSize != null ? Math.round((1 - asset.newSize / asset.size) * 100) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Card,
+    {
+      tone: statusTone(asset.status),
+      style: { width: "calc(100vw - 1.25rem * 2)" },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, align: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { width: 64, height: 64, flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: `${thumbUrl}?w=128&h=128&fit=crop&auto=format`,
+            alt: "",
+            loading: "lazy",
+            style: {
+              width: 64,
+              height: 64,
+              objectFit: "cover",
+              borderRadius: 4
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { width: "100%", minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "semibold", children: isDone ? asset.newFilename || asset.originalFilename || asset._id : asset.originalFilename || asset._id }) }),
+          isDone ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, muted: !0, style: { wordBreak: "break-word" }, children: [
+              (asset.size / 1024 / 1024).toFixed(1),
+              " MB \u2192",
+              " ",
+              (asset.newSize / 1024 / 1024).toFixed(1),
+              " MB",
+              sizeReduction !== null && sizeReduction > 0 ? ` (\u2212${sizeReduction}%)` : "",
+              " ",
+              "\u2014 ",
+              asset.newWidth,
+              "px wide"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 2, wrap: "wrap", children: asset.newWidth != null && asset.newWidth < asset.width && /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { tone: "positive", size: 1, children: [
+              asset.width,
+              "px \u2192 ",
+              asset.newWidth,
+              "px"
+            ] }) })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 2, wrap: "wrap", children: asset.violations.map((v) => /* @__PURE__ */ jsxRuntime.jsx(ViolationBadge, { type: v, settings }, v)) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, muted: !0, style: { wordBreak: "break-word" }, children: [
+              (asset.size / 1024 / 1024).toFixed(1),
+              " MB \u2014 ",
+              asset.width,
+              "px wide"
+            ] })
+          ] }),
+          asset.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text,
+            {
+              size: 1,
+              style: {
+                color: "var(--card-badge-critical-dot-color)",
+                wordBreak: "break-word"
+              },
+              children: asset.error
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { style: { flexShrink: 0 }, children: [
+          asset.status === "idle" && /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              text: "Process",
+              mode: "ghost",
+              tone: "primary",
+              onClick: () => onProcess(asset)
+            }
+          ),
+          asset.status === "processing" && /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {}),
+          asset.status === "done" && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { tone: "positive", children: "Done" }),
+          asset.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              text: "Retry",
+              mode: "ghost",
+              tone: "critical",
+              onClick: () => onProcess(asset)
+            }
+          )
+        ] })
+      ] })
+    },
+    asset._id
+  );
+}
+const MAX_SIZE_MB = exports.IMAGE_MAX_SIZE / 1024 / 1024, KV_SETTINGS_KEY = "image-resizer-settings";
+function loadSettings() {
+  try {
+    const raw = localStorage.getItem(KV_SETTINGS_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      return {
+        pngToWebp: typeof parsed.pngToWebp == "boolean" ? parsed.pngToWebp : DEFAULT_SETTINGS.pngToWebp,
+        tiffToJpg: typeof parsed.tiffToJpg == "boolean" ? parsed.tiffToJpg : DEFAULT_SETTINGS.tiffToJpg
+      };
+    }
+  } catch {
+  }
+  return DEFAULT_SETTINGS;
+}
+function ImageResizerView() {
+  const client = sanity.useClient({ apiVersion: "2025-02-19" }), [assets, setAssets] = react.useState([]), [loading, setLoading] = react.useState(!0), [processingAll, setProcessingAll] = react.useState(!1), [settings, setSettings] = react.useState(loadSettings), [showSettings, setShowSettings] = react.useState(!1), updateSettings = react.useCallback(
+    (updater) => {
+      setSettings((prev) => {
+        const next = updater(prev);
+        return localStorage.setItem(KV_SETTINGS_KEY, JSON.stringify(next)), next;
+      });
+    },
+    []
+  ), assetsRef = react.useRef(assets);
+  react.useEffect(() => {
+    assetsRef.current = assets;
+  }, [assets]);
+  const fetchAssets = react.useCallback(async () => {
+    setLoading(!0);
+    try {
+      const raw = await client.fetch(
+        `*[_type == "sanity.imageAsset" && (
+            mimeType == "image/tiff" ||
+            metadata.dimensions.width > ${exports.IMAGE_MAX_WIDTH} ||
+            size > ${exports.IMAGE_MAX_SIZE}
+          )][] {
+            _id, url, originalFilename, mimeType, size,
+            "width": metadata.dimensions.width
+          }`
+      );
+      setAssets(
+        raw.map((a) => ({
+          ...a,
+          violations: getViolations(a, settings),
+          status: "idle"
+        }))
+      );
+    } finally {
+      setLoading(!1);
+    }
+  }, [client, settings]);
+  react.useEffect(() => {
+    fetchAssets();
+  }, [fetchAssets]);
+  const updateAsset = react.useCallback(
+    (id, patch) => setAssets(
+      (prev) => prev.map((a) => a._id === id ? { ...a, ...patch } : a)
+    ),
+    []
+  ), processAsset = react.useCallback(
+    async (asset) => {
+      updateAsset(asset._id, { status: "processing", error: void 0 });
+      try {
+        const { blob, outFormat } = await processImage(
+          asset.url,
+          asset.mimeType,
+          asset.width,
+          settings
+        );
+        if (blob.size >= asset.size) {
+          updateAsset(asset._id, {
+            status: "error",
+            error: `Skipped: optimised file (${(blob.size / 1024 / 1024).toFixed(1)} MB) is not smaller than original (${(asset.size / 1024 / 1024).toFixed(1)} MB)`
+          });
+          return;
+        }
+        const baseName = asset.originalFilename?.replace(/\.[^.]+$/, "") || "image", newAsset = await client.assets.upload("image", blob, {
+          filename: `${baseName}.${outFormat}`,
+          contentType: `image/${outFormat}`
+        }), refs = await client.fetch(
+          "*[references($id)]{ _id }",
+          { id: asset._id }
+        );
+        for (const { _id } of refs) {
+          const doc = await client.getDocument(_id);
+          if (!doc) continue;
+          const patch = buildReplacementPatch(doc, asset._id, newAsset._id);
+          Object.keys(patch).length > 0 && await client.patch(_id).set(patch).commit();
+        }
+        await client.delete(asset._id);
+        const newMeta = await client.fetch(
+          '*[_id == $id][0]{ url, size, originalFilename, "width": metadata.dimensions.width }',
+          { id: newAsset._id }
+        );
+        updateAsset(asset._id, {
+          status: "done",
+          newUrl: newMeta?.url ?? newAsset.url,
+          newSize: newMeta?.size ?? blob.size,
+          newWidth: newMeta?.width ?? Math.min(asset.width, exports.IMAGE_MAX_WIDTH),
+          newFilename: newMeta?.originalFilename ?? `${baseName}.${outFormat}`
+        });
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        updateAsset(asset._id, { status: "error", error: message });
+      }
+    },
+    [client, updateAsset, settings]
+  ), processAll = react.useCallback(async () => {
+    setProcessingAll(!0);
+    const pending = assetsRef.current.filter(
+      (a) => a.status === "idle" || a.status === "error"
+    );
+    let idx = 0;
+    const next = async () => {
+      for (; idx < pending.length; ) {
+        const asset = pending[idx++];
+        await processAsset(asset);
+      }
+    };
+    await Promise.all(Array.from({ length: CONCURRENCY }, () => next())), setProcessingAll(!1);
+  }, [processAsset]), counts = react.useMemo(
+    () => ({
+      pending: assets.filter((a) => a.status === "idle").length,
+      processing: assets.filter((a) => a.status === "processing").length,
+      done: assets.filter((a) => a.status === "done").length,
+      error: assets.filter((a) => a.status === "error").length
+    }),
+    [assets]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Container,
+    {
+      width: 4,
+      padding: 4,
+      style: { width: "calc(100vw - 1.25rem * 2)" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 5, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "flex-start", justify: "space-between", gap: 4, wrap: "wrap", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { size: 2, children: "Image Optimiser" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, muted: !0, style: { wordBreak: "break-word" }, children: [
+                "Converts TIFF images to WebP. Resizes/compresses all images to fit within ",
+                exports.IMAGE_MAX_WIDTH,
+                "px / ",
+                MAX_SIZE_MB,
+                " MB."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, align: "center", wrap: "wrap", style: { flexShrink: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  icon: icons.CogIcon,
+                  mode: "ghost",
+                  onClick: () => setShowSettings(!0),
+                  disabled: processingAll
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  text: "Refresh",
+                  mode: "ghost",
+                  onClick: fetchAssets,
+                  disabled: loading || processingAll
+                }
+              ),
+              counts.pending > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  text: processingAll ? "Processing\u2026" : `Process All (${counts.pending})`,
+                  tone: "primary",
+                  onClick: processAll,
+                  disabled: processingAll || loading,
+                  icon: processingAll ? ui.Spinner : void 0
+                }
+              )
+            ] })
+          ] }),
+          !loading && assets.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, wrap: "wrap", children: [
+            counts.pending > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { tone: "caution", children: [
+              counts.pending,
+              " pending"
+            ] }),
+            counts.processing > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { tone: "primary", children: [
+              counts.processing,
+              " processing"
+            ] }),
+            counts.done > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { tone: "positive", children: [
+              counts.done,
+              " done"
+            ] }),
+            counts.error > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { tone: "critical", children: [
+              counts.error,
+              " failed"
+            ] })
+          ] }),
+          loading ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { padding: 6, justify: "center", align: "center", gap: 3, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, children: "Scanning assets\u2026" })
+          ] }) : assets.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 5, radius: 2, tone: "positive", border: !0, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", children: "All images meet the requirements." }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 2, children: assets.map((asset) => /* @__PURE__ */ jsxRuntime.jsx(
+            AssetCard,
+            {
+              asset,
+              onProcess: processAsset,
+              settings
+            },
+            asset._id
+          )) })
+        ] }),
+        showSettings && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Dialog,
+          {
+            id: "image-optimiser-settings",
+            header: "Conversion Settings",
+            onClose: () => setShowSettings(!1),
+            width: 1,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 4, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Switch,
+                  {
+                    id: "png-to-webp",
+                    checked: settings.pngToWebp,
+                    onChange: (e) => {
+                      const checked = e.currentTarget.checked;
+                      updateSettings((s) => ({ ...s, pngToWebp: checked }));
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "png-to-webp", style: { cursor: "pointer" }, children: "Convert PNG \u2192 WebP" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Switch,
+                  {
+                    id: "tiff-to-jpg",
+                    checked: settings.tiffToJpg,
+                    onChange: (e) => {
+                      const checked = e.currentTarget.checked;
+                      updateSettings((s) => ({ ...s, tiffToJpg: checked }));
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "tiff-to-jpg", style: { cursor: "pointer" }, children: "Convert TIFF \u2192 JPG (instead of WebP)" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: "Changes apply on next Refresh." })
+            ] }) })
+          }
+        )
+      ]
+    }
+  );
+}
+const imageResizerPlugin = sanity.definePlugin(
+  (options) => (applyConfig(options ?? void 0), {
+    name: "sanity-plugin-image-resizer",
+    tools: (prev) => [
+      ...prev,
+      {
+        name: "image-resizer",
+        title: "Image Optimiser",
+        component: ImageResizerView
+      }
+    ],
+    i18n: {
+      bundles: [imageResizerUsEnglishLocaleBundle]
+    }
+  })
+);
+exports.imageResizerPlugin = imageResizerPlugin;
+exports.validateImageSize = validateImageSize;
+//# sourceMappingURL=index.js.map