sanity-plugin-image-field 0.0.1

package/dist/index.js

@@ -0,0 +1,1513 @@
+// src/ImageFieldInput.tsx
+import { useEffect, useRef as useRef2, useState as useState3 } from "react";
+import {
+  Box as Box2,
+  Button as Button2,
+  Card as Card2,
+  Flex as Flex2,
+  Inline,
+  Menu,
+  MenuButton,
+  MenuItem,
+  Spinner,
+  Stack as Stack2,
+  Text as Text2
+} from "@sanity/ui";
+import {
+  CropIcon,
+  ImageIcon,
+  ImagesIcon,
+  TrashIcon,
+  UploadIcon
+} from "@sanity/icons";
+import {
+  ObjectInputMembers,
+  set,
+  setIfMissing,
+  unset,
+  useClient,
+  useWorkspace
+} from "sanity";
+
+// src/cropMath.ts
+import "sanity";
+
+// src/utils.ts
+var validateAspectRatio = (input) => {
+  if (typeof input === "number") {
+    if (!Number.isFinite(input) || input <= 0) {
+      throw new Error("aspectRatio must be a finite number greater than 0.");
+    }
+    return;
+  }
+  if (Array.isArray(input)) {
+    if (input.length === 0) {
+      throw new Error("aspectRatio must not be an empty array.");
+    }
+    if (input.some((ratio) => !Number.isFinite(ratio) || ratio <= 0)) {
+      throw new Error(
+        "aspectRatio array values must be finite numbers greater than 0."
+      );
+    }
+    return;
+  }
+  if (!Number.isFinite(input.min) || !Number.isFinite(input.max)) {
+    throw new Error("aspectRatio min/max must be finite numbers.");
+  }
+  if (input.min <= 0 || input.max <= 0) {
+    throw new Error("aspectRatio min and max must be greater than 0.");
+  }
+  if (input.max < input.min) {
+    throw new Error("aspectRatio max must be greater than or equal to min.");
+  }
+};
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var clampRatio = (ratio, range) => clamp(ratio, range.min, range.max);
+var nearestRatio = (ratio, ratios) => ratios.reduce(
+  (best, candidate) => Math.abs(candidate - ratio) < Math.abs(best - ratio) ? candidate : best
+);
+
+// src/cropMath.ts
+var MIN_CROP_SIZE = 24;
+var FREE_ASPECT_RATIO_RANGE = {
+  min: 0.01,
+  max: 100
+};
+var resolveAspectRatio = (input) => {
+  if (input === void 0) {
+    return { aspectRatioRange: FREE_ASPECT_RATIO_RANGE };
+  }
+  if (typeof input === "number") {
+    return { aspectRatioRange: { min: input, max: input } };
+  }
+  if (Array.isArray(input)) {
+    const snapRatios = Array.from(new Set(input)).toSorted((a, b) => a - b);
+    return {
+      aspectRatioRange: {
+        min: Math.min(...snapRatios),
+        max: Math.max(...snapRatios)
+      },
+      snapRatios
+    };
+  }
+  return { aspectRatioRange: { min: input.min, max: input.max } };
+};
+var largestRectForRatio = (source, ratio) => {
+  let width = source.width;
+  let height = width / ratio;
+  if (height > source.height) {
+    height = source.height;
+    width = height * ratio;
+  }
+  return {
+    x: (source.width - width) / 2,
+    y: (source.height - height) / 2,
+    width,
+    height
+  };
+};
+var defaultCrop = (source, range, snapRatios) => {
+  const sourceRatio = source.width / source.height;
+  const ratio = snapRatios ? nearestRatio(sourceRatio, snapRatios) : clampRatio(sourceRatio, range);
+  return largestRectForRatio(source, ratio);
+};
+var moveRect = (rect, deltaX, deltaY, source) => ({
+  ...rect,
+  x: clamp(rect.x + deltaX, 0, source.width - rect.width),
+  y: clamp(rect.y + deltaY, 0, source.height - rect.height)
+});
+var resize = (rect, dir, pointer, source, range, opts = {}) => {
+  const { lockRatio = false, mirror = false, snapRatios } = opts;
+  const centeredX = mirror || dir.dx === 0;
+  const centeredY = mirror || dir.dy === 0;
+  const anchorX = centeredX ? rect.x + rect.width / 2 : dir.dx > 0 ? rect.x : rect.x + rect.width;
+  const anchorY = centeredY ? rect.y + rect.height / 2 : dir.dy > 0 ? rect.y : rect.y + rect.height;
+  const pointerX = clamp(pointer.x, 0, source.width);
+  const pointerY = clamp(pointer.y, 0, source.height);
+  const availWidth = centeredX ? 2 * Math.min(anchorX, source.width - anchorX) : dir.dx > 0 ? source.width - anchorX : anchorX;
+  const availHeight = centeredY ? 2 * Math.min(anchorY, source.height - anchorY) : dir.dy > 0 ? source.height - anchorY : anchorY;
+  const desiredWidth = (centeredX ? 2 : 1) * Math.abs(pointerX - anchorX);
+  const desiredHeight = (centeredY ? 2 : 1) * Math.abs(pointerY - anchorY);
+  const askedRatio = lockRatio ? rect.width / rect.height : dir.dx === 0 ? desiredHeight === 0 ? range.max : rect.width / desiredHeight : dir.dy === 0 ? desiredWidth / rect.height : desiredHeight === 0 ? range.max : desiredWidth / desiredHeight;
+  const ratio = snapRatios ? nearestRatio(askedRatio, snapRatios) : clampRatio(askedRatio, range);
+  const targetWidth = dir.dx !== 0 ? desiredWidth : desiredHeight * ratio;
+  let width = Math.min(targetWidth, availWidth);
+  let height = width / ratio;
+  if (height > availHeight) {
+    height = availHeight;
+    width = height * ratio;
+  }
+  const minWidth = Math.min(MIN_CROP_SIZE, availWidth, availHeight * ratio);
+  if (width < minWidth) {
+    width = minWidth;
+    height = width / ratio;
+  }
+  return {
+    x: centeredX ? anchorX - width / 2 : dir.dx > 0 ? anchorX : anchorX - width,
+    y: centeredY ? anchorY - height / 2 : dir.dy > 0 ? anchorY : anchorY - height,
+    width,
+    height
+  };
+};
+var applyRatio = (rect, ratio, source) => {
+  const centerX = rect.x + rect.width / 2;
+  const centerY = rect.y + rect.height / 2;
+  const width = Math.min(rect.width, rect.height * ratio);
+  const height = width / ratio;
+  return {
+    x: clamp(centerX - width / 2, 0, source.width - width),
+    y: clamp(centerY - height / 2, 0, source.height - height),
+    width,
+    height
+  };
+};
+var toNormalizedPoint = (pointer, box) => ({
+  x: clamp((pointer.x - box.left) / box.width, 0, 1),
+  y: clamp((pointer.y - box.top) / box.height, 0, 1)
+});
+var hotspotToFocalPoint = (hotspot, rect, source) => ({
+  x: clamp((hotspot.x * source.width - rect.x) / rect.width, 0, 1),
+  y: clamp((hotspot.y * source.height - rect.y) / rect.height, 0, 1)
+});
+var focalPointToHotspot = (point, rect, source, base) => ({
+  ...base,
+  x: (rect.x + point.x * rect.width) / source.width,
+  y: (rect.y + point.y * rect.height) / source.height,
+  width: Math.min(base.width, rect.width / source.width),
+  height: Math.min(base.height, rect.height / source.height)
+});
+var pixelRectToCrop = (rect, source) => ({
+  _type: "sanity.imageCrop",
+  top: Math.max(0, rect.y / source.height),
+  left: Math.max(0, rect.x / source.width),
+  right: Math.max(0, (source.width - rect.x - rect.width) / source.width),
+  bottom: Math.max(0, (source.height - rect.y - rect.height) / source.height)
+});
+var cropToPixelRect = (crop, source) => ({
+  x: crop.left * source.width,
+  y: crop.top * source.height,
+  width: (1 - crop.left - crop.right) * source.width,
+  height: (1 - crop.top - crop.bottom) * source.height
+});
+var croppedDimensions = (rect) => ({
+  width: Math.round(rect.width),
+  height: Math.round(rect.height)
+});
+var dimensionsAtLeast = (dimensions, threshold) => dimensions.width >= threshold.width && dimensions.height >= threshold.height;
+var formatAspectRatio = (ratio) => {
+  for (let height = 1; height <= 16; height++) {
+    const width = ratio * height;
+    const rounded = Math.round(width);
+    if (rounded >= 1 && Math.abs(width - rounded) < 0.02) {
+      return `${rounded}:${height}`;
+    }
+  }
+  return `${ratio.toFixed(2)}:1`;
+};
+
+// src/CropDialog.tsx
+import { useState as useState2 } from "react";
+import { Box, Button, Card, Dialog, Flex, Stack, Text } from "@sanity/ui";
+import {
+  CheckmarkCircleIcon,
+  ErrorOutlineIcon,
+  ResetIcon,
+  WarningOutlineIcon
+} from "@sanity/icons";
+import "sanity";
+
+// src/CropArea.tsx
+import { useCallback, useRef } from "react";
+
+// src/useContentWidth.ts
+import { useLayoutEffect, useState } from "react";
+function useContentWidth(ref) {
+  const [width, setWidth] = useState(0);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return void 0;
+    }
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) {
+        return;
+      }
+      setWidth(entry.contentRect.width);
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+  return width;
+}
+
+// src/CropArea.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var HANDLES = [
+  { dx: -1, dy: -1 },
+  { dx: 0, dy: -1 },
+  { dx: 1, dy: -1 },
+  { dx: 1, dy: 0 },
+  { dx: 1, dy: 1 },
+  { dx: 0, dy: 1 },
+  { dx: -1, dy: 1 },
+  { dx: -1, dy: 0 }
+];
+var HANDLE_SIZE = 14;
+var BAR_LENGTH = 22;
+var BAR_THICKNESS = 8;
+var HOTSPOT_SIZE = 22;
+var KEYBOARD_STEP = 0.02;
+var CROP_ARIA_LABEL = "Crop selection. Use arrow keys to move, hold Shift with arrow keys to resize.";
+function usePointerDrag(onMove) {
+  const dragRef = useRef(null);
+  const start = useCallback(
+    (event, state, { stopPropagation = false } = {}) => {
+      event.preventDefault();
+      if (stopPropagation) {
+        event.stopPropagation();
+      }
+      event.currentTarget.setPointerCapture(event.pointerId);
+      dragRef.current = state;
+    },
+    []
+  );
+  const handlePointerMove = useCallback(
+    (event) => {
+      const state = dragRef.current;
+      if (state === null) {
+        return;
+      }
+      onMove(state, event);
+    },
+    [onMove]
+  );
+  const handleLostPointerCapture = useCallback(() => {
+    dragRef.current = null;
+  }, []);
+  return { start, handlePointerMove, handleLostPointerCapture };
+}
+var CropArea = ({
+  imageUrl,
+  sourceDimensions: sourceDimensions2,
+  range,
+  snapRatios,
+  rect,
+  onChange,
+  focalPoint,
+  onFocalPointChange,
+  maxHeight = 460
+}) => {
+  const frameRef = useRef(null);
+  const imageBoxRef = useRef(null);
+  const frameWidth = useContentWidth(frameRef);
+  const scale = displayScale(sourceDimensions2, frameWidth, maxHeight);
+  const displayWidth = sourceDimensions2.width * scale;
+  const displayHeight = sourceDimensions2.height * scale;
+  const cropBox = {
+    left: rect.x * scale,
+    top: rect.y * scale,
+    width: rect.width * scale,
+    height: rect.height * scale
+  };
+  const pointerToSource = useCallback(
+    (event) => {
+      const box = imageBoxRef.current?.getBoundingClientRect();
+      if (!box || scale === 0) {
+        return { x: 0, y: 0 };
+      }
+      return {
+        x: (event.clientX - box.left) / scale,
+        y: (event.clientY - box.top) / scale
+      };
+    },
+    [scale]
+  );
+  const pointerToFocal = useCallback(
+    (event) => {
+      const box = imageBoxRef.current?.getBoundingClientRect();
+      if (!box || cropBox.width === 0 || cropBox.height === 0) {
+        return { x: 0, y: 0 };
+      }
+      return toNormalizedPoint(
+        { x: event.clientX, y: event.clientY },
+        {
+          left: box.left + cropBox.left,
+          top: box.top + cropBox.top,
+          width: cropBox.width,
+          height: cropBox.height
+        }
+      );
+    },
+    [cropBox.left, cropBox.top, cropBox.width, cropBox.height]
+  );
+  const onCropMove = useCallback(
+    (drag, event) => {
+      const pointer = pointerToSource(event);
+      const next = drag.mode === "move" ? moveRect(
+        drag.startRect,
+        pointer.x - drag.startPointer.x,
+        pointer.y - drag.startPointer.y,
+        sourceDimensions2
+      ) : (
+        // Modifier keys are read at move time so they can change mid-drag.
+        // Shift locks the ratio; Option/Alt resizes from center. With
+        // snapRatios, the crop snaps to the nearest allowed ratio.
+        resize(drag.startRect, drag.dir, pointer, sourceDimensions2, range, {
+          lockRatio: event.shiftKey,
+          mirror: event.altKey,
+          snapRatios
+        })
+      );
+      onChange(next);
+    },
+    [onChange, pointerToSource, range, snapRatios, sourceDimensions2]
+  );
+  const cropDrag = usePointerDrag(onCropMove);
+  const onFocalMove = useCallback(
+    (_active, event) => {
+      if (!onFocalPointChange) {
+        return;
+      }
+      onFocalPointChange(pointerToFocal(event));
+    },
+    [onFocalPointChange, pointerToFocal]
+  );
+  const focalDrag = usePointerDrag(onFocalMove);
+  const handleKeyDown = (event) => {
+    const stepX = sourceDimensions2.width * KEYBOARD_STEP;
+    const stepY = sourceDimensions2.height * KEYBOARD_STEP;
+    if (event.shiftKey) {
+      const ratio = rect.width / rect.height;
+      const widthSteps = /* @__PURE__ */ new Map([
+        ["ArrowRight", stepX],
+        ["ArrowLeft", -stepX],
+        ["ArrowDown", stepY * ratio],
+        ["ArrowUp", -stepY * ratio]
+      ]);
+      const widthStep = widthSteps.get(event.key);
+      if (widthStep === void 0) {
+        return;
+      }
+      event.preventDefault();
+      const east = rect.x + rect.width;
+      const south = rect.y + rect.height;
+      onChange(
+        resize(
+          rect,
+          { dx: 1, dy: 1 },
+          { x: east + widthStep, y: south },
+          sourceDimensions2,
+          range,
+          { lockRatio: true, snapRatios }
+        )
+      );
+      return;
+    }
+    const moves = /* @__PURE__ */ new Map([
+      ["ArrowLeft", [-stepX, 0]],
+      ["ArrowRight", [stepX, 0]],
+      ["ArrowUp", [0, -stepY]],
+      ["ArrowDown", [0, stepY]]
+    ]);
+    const delta = moves.get(event.key);
+    if (!delta) {
+      return;
+    }
+    event.preventDefault();
+    onChange(moveRect(rect, delta[0], delta[1], sourceDimensions2));
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: frameRef,
+      style: {
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        userSelect: "none",
+        touchAction: "none"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: imageBoxRef,
+          style: {
+            position: "relative",
+            width: displayWidth,
+            height: displayHeight,
+            maxWidth: "100%"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: imageUrl,
+                alt: "",
+                draggable: false,
+                style: {
+                  display: "block",
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "fill"
+                }
+              }
+            ),
+            scale > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    overflow: "hidden",
+                    pointerEvents: "none"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        ...cropBox,
+                        boxShadow: "0 0 0 9999px rgba(0, 0, 0, 0.55)"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "group",
+                  "aria-label": CROP_ARIA_LABEL,
+                  tabIndex: 0,
+                  onPointerDown: (event) => {
+                    cropDrag.start(event, {
+                      mode: "move",
+                      startRect: rect,
+                      startPointer: pointerToSource(event)
+                    });
+                  },
+                  onPointerMove: cropDrag.handlePointerMove,
+                  onLostPointerCapture: cropDrag.handleLostPointerCapture,
+                  onKeyDown: handleKeyDown,
+                  style: {
+                    position: "absolute",
+                    ...cropBox,
+                    cursor: "move",
+                    outline: "1px solid rgba(255, 255, 255, 0.9)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(ThirdsGuides, {}),
+                    HANDLES.map((dir) => /* @__PURE__ */ jsx(
+                      Handle,
+                      {
+                        dir,
+                        onPointerDown: (event) => {
+                          cropDrag.start(
+                            event,
+                            { mode: "resize", dir, startRect: rect },
+                            { stopPropagation: true }
+                          );
+                        },
+                        onPointerMove: cropDrag.handlePointerMove,
+                        onLostPointerCapture: cropDrag.handleLostPointerCapture
+                      },
+                      `${dir.dx},${dir.dy}`
+                    ))
+                  ]
+                }
+              ),
+              focalPoint && onFocalPointChange && /* @__PURE__ */ jsx(
+                HotspotMarker,
+                {
+                  left: cropBox.left + focalPoint.x * cropBox.width,
+                  top: cropBox.top + focalPoint.y * cropBox.height,
+                  onPointerDown: (event) => {
+                    focalDrag.start(event, true, { stopPropagation: true });
+                  },
+                  onPointerMove: focalDrag.handlePointerMove,
+                  onLostPointerCapture: focalDrag.handleLostPointerCapture
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+var displayScale = (sourceDimensions2, frameWidth, maxHeight) => {
+  if (frameWidth === 0) {
+    return 0;
+  }
+  return Math.min(
+    frameWidth / sourceDimensions2.width,
+    maxHeight / sourceDimensions2.height
+  );
+};
+var ThirdsGuides = () => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none",
+      backgroundImage: `
+          linear-gradient(to right, transparent 33.33%, rgba(255, 255, 255, 0.35) 33.33%, rgba(255, 255, 255, 0.35) calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%, rgba(255, 255, 255, 0.35) 66.66%, rgba(255, 255, 255, 0.35) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
+          linear-gradient(to bottom, transparent 33.33%, rgba(255, 255, 255, 0.35) 33.33%, rgba(255, 255, 255, 0.35) calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%, rgba(255, 255, 255, 0.35) 66.66%, rgba(255, 255, 255, 0.35) calc(66.66% + 1px), transparent calc(66.66% + 1px))
+        `
+    }
+  }
+);
+var cursorForDirection = (dir) => {
+  if (dir.dx === 0) {
+    return "ns-resize";
+  }
+  if (dir.dy === 0) {
+    return "ew-resize";
+  }
+  return dir.dx === dir.dy ? "nwse-resize" : "nesw-resize";
+};
+var Handle = ({
+  dir,
+  onPointerDown,
+  onPointerMove,
+  onLostPointerCapture
+}) => {
+  const isCorner = dir.dx !== 0 && dir.dy !== 0;
+  const horizontalBar = dir.dx === 0;
+  const width = isCorner ? HANDLE_SIZE : horizontalBar ? BAR_LENGTH : BAR_THICKNESS;
+  const height = isCorner ? HANDLE_SIZE : horizontalBar ? BAR_THICKNESS : BAR_LENGTH;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onPointerDown,
+      onPointerMove,
+      onLostPointerCapture,
+      style: {
+        position: "absolute",
+        left: `${(dir.dx + 1) * 50}%`,
+        top: `${(dir.dy + 1) * 50}%`,
+        transform: "translate(-50%, -50%)",
+        width,
+        height,
+        borderRadius: isCorner ? "50%" : BAR_THICKNESS / 2,
+        background: "#fff",
+        boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.4)",
+        cursor: cursorForDirection(dir),
+        touchAction: "none"
+      }
+    }
+  );
+};
+var HotspotMarker = ({
+  left,
+  top,
+  onPointerDown,
+  onPointerMove,
+  onLostPointerCapture
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    title: "Focal point",
+    onPointerDown,
+    onPointerMove,
+    onLostPointerCapture,
+    style: {
+      position: "absolute",
+      left,
+      top,
+      transform: "translate(-50%, -50%)",
+      width: HOTSPOT_SIZE,
+      height: HOTSPOT_SIZE,
+      borderRadius: "50%",
+      border: "2px solid #fff",
+      background: "rgba(255, 255, 255, 0.2)",
+      boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.5)",
+      cursor: "grab",
+      touchAction: "none"
+    },
+    children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          width: 4,
+          height: 4,
+          borderRadius: "50%",
+          background: "#fff",
+          boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.5)"
+        }
+      }
+    )
+  }
+);
+
+// src/imageUrl.ts
+import { buildSrc, parseImageId } from "@sanity-image/url-builder";
+import "sanity";
+var sourceDimensions = (assetRef) => parseImageId(assetRef).dimensions;
+var isSvg = (ref) => /^image-[a-f0-9]+(?:-\d+x\d+)?-svg$/.test(ref);
+var isCroppable = (assetRef) => Boolean(assetRef && /-\d+x\d+-\w+$/.test(assetRef) && !isSvg(assetRef));
+var isImageAssetRef = (ref) => {
+  if (isSvg(ref)) {
+    return true;
+  }
+  try {
+    const { assetId, format } = parseImageId(ref);
+    return Boolean(assetId && format);
+  } catch {
+    return false;
+  }
+};
+var croppedDimensionsFromValue = (value) => {
+  if (!isCroppable(value?.asset?._ref)) {
+    return null;
+  }
+  const source = sourceDimensions(value.asset._ref);
+  if (!value.crop) {
+    return source;
+  }
+  return croppedDimensions(cropToPixelRect(value.crop, source));
+};
+var cdnBaseUrl = (source) => `https://cdn.sanity.io/images/${source.projectId}/${source.dataset}/`;
+var sourceImageUrl = (assetRef, source) => {
+  const { assetId, dimensions, format } = parseImageId(assetRef);
+  const filename = `${assetId}-${dimensions.width}x${dimensions.height}.${format}`;
+  return `${cdnBaseUrl(source)}${filename}`;
+};
+var croppedImageUrl = (value, source, displayWidth) => {
+  const assetRef = value.asset?._ref;
+  if (!assetRef) {
+    return null;
+  }
+  if (isSvg(assetRef)) {
+    const assetId = assetRef.slice("image-".length, -"-svg".length);
+    return `${cdnBaseUrl(source)}${assetId}.svg`;
+  }
+  const { src } = buildSrc({
+    baseUrl: cdnBaseUrl(source),
+    id: assetRef,
+    width: Math.round(displayWidth),
+    crop: value.crop
+  });
+  return src;
+};
+
+// src/CropDialog.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CENTERED_HOTSPOT = {
+  _type: "sanity.imageHotspot",
+  x: 0.5,
+  y: 0.5,
+  width: 0.01,
+  height: 0.01
+};
+var CropDialog = ({
+  assetRef,
+  imageSource,
+  sourceDimensions: sourceDimensions2,
+  config,
+  initialCrop,
+  hotspotEnabled,
+  initialHotspot,
+  onConfirm,
+  onClose
+}) => {
+  const {
+    aspectRatioRange,
+    snapRatios,
+    recommendedDimensions,
+    requiredDimensions
+  } = config;
+  const [rect, setRect] = useState2(() => {
+    if (!initialCrop) {
+      return defaultCrop(sourceDimensions2, aspectRatioRange, snapRatios);
+    }
+    const loaded = cropToPixelRect(initialCrop, sourceDimensions2);
+    return snapRatios ? applyRatio(
+      loaded,
+      nearestRatio(loaded.width / loaded.height, snapRatios),
+      sourceDimensions2
+    ) : loaded;
+  });
+  const [focalPoint, setFocalPoint] = useState2(
+    () => initialHotspot ? hotspotToFocalPoint(initialHotspot, rect, sourceDimensions2) : { x: 0.5, y: 0.5 }
+  );
+  const dimensions = croppedDimensions(rect);
+  const belowRequired = requiredDimensions && !dimensionsAtLeast(dimensions, requiredDimensions);
+  const belowRecommended = recommendedDimensions && !dimensionsAtLeast(dimensions, recommendedDimensions);
+  return /* @__PURE__ */ jsx2(
+    Dialog,
+    {
+      id: "aspect-ratio-crop-dialog",
+      header: "Crop image",
+      width: 2,
+      onClose,
+      footer: /* @__PURE__ */ jsxs2(Flex, { padding: 3, justify: "space-between", align: "center", gap: 3, children: [
+        /* @__PURE__ */ jsx2(
+          Button,
+          {
+            mode: "bleed",
+            icon: ResetIcon,
+            text: "Reset crop",
+            fontSize: 1,
+            onClick: () => {
+              setRect(
+                defaultCrop(sourceDimensions2, aspectRatioRange, snapRatios)
+              );
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs2(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx2(Button, { mode: "ghost", text: "Cancel", onClick: onClose }),
+          /* @__PURE__ */ jsx2(
+            Button,
+            {
+              tone: "primary",
+              text: "Confirm crop",
+              disabled: belowRequired,
+              onClick: () => {
+                onConfirm({
+                  crop: pixelRectToCrop(rect, sourceDimensions2),
+                  hotspot: hotspotEnabled ? focalPointToHotspot(
+                    focalPoint,
+                    rect,
+                    sourceDimensions2,
+                    initialHotspot ?? CENTERED_HOTSPOT
+                  ) : void 0
+                });
+              }
+            }
+          )
+        ] })
+      ] }),
+      children: /* @__PURE__ */ jsxs2(Stack, { gap: 3, padding: 3, children: [
+        /* @__PURE__ */ jsx2(
+          CropArea,
+          {
+            imageUrl: sourceImageUrl(assetRef, imageSource),
+            sourceDimensions: sourceDimensions2,
+            range: aspectRatioRange,
+            snapRatios,
+            rect,
+            onChange: setRect,
+            focalPoint: hotspotEnabled ? focalPoint : void 0,
+            onFocalPointChange: hotspotEnabled ? setFocalPoint : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxs2(Flex, { justify: "space-between", align: "center", gap: 3, wrap: "wrap", children: [
+          /* @__PURE__ */ jsxs2(Text, { size: 1, muted: true, children: [
+            "Allowed aspect ratio: ",
+            describeAspectRatio(config)
+          ] }),
+          /* @__PURE__ */ jsxs2(Text, { size: 1, weight: "medium", children: [
+            dimensions.width,
+            " \xD7 ",
+            dimensions.height,
+            " px"
+          ] })
+        ] }),
+        hotspotEnabled && /* @__PURE__ */ jsx2(Text, { size: 1, muted: true, children: "Drag the circle to set the focal point. It governs how cover-mode crops frame the image downstream, not this preview." }),
+        /* @__PURE__ */ jsx2(
+          DimensionStatusMessage,
+          {
+            requiredDimensions,
+            recommendedDimensions,
+            belowRequired,
+            belowRecommended
+          }
+        )
+      ] })
+    }
+  );
+};
+var StatusMessage = ({
+  tone,
+  icon,
+  message
+}) => /* @__PURE__ */ jsx2(Card, { tone, padding: 3, radius: 2, border: true, children: /* @__PURE__ */ jsxs2(Flex, { gap: 3, align: "center", children: [
+  /* @__PURE__ */ jsx2(Text, { size: 1, children: icon }),
+  /* @__PURE__ */ jsx2(Box, { flex: 1, children: /* @__PURE__ */ jsx2(Text, { size: 1, textOverflow: "ellipsis", children: message }) })
+] }) });
+var DimensionStatusMessage = ({
+  requiredDimensions,
+  recommendedDimensions,
+  belowRequired,
+  belowRecommended
+}) => {
+  if (requiredDimensions && belowRequired) {
+    return /* @__PURE__ */ jsx2(
+      StatusMessage,
+      {
+        tone: "critical",
+        icon: /* @__PURE__ */ jsx2(ErrorOutlineIcon, {}),
+        message: `Crop must be at least ${describeDimensions(requiredDimensions)}.`
+      }
+    );
+  }
+  if (recommendedDimensions && belowRecommended) {
+    return /* @__PURE__ */ jsx2(
+      StatusMessage,
+      {
+        tone: "caution",
+        icon: /* @__PURE__ */ jsx2(WarningOutlineIcon, {}),
+        message: `For best results, keep the crop at least ${describeDimensions(
+          recommendedDimensions
+        )}.`
+      }
+    );
+  }
+  if (requiredDimensions || recommendedDimensions) {
+    return /* @__PURE__ */ jsx2(
+      StatusMessage,
+      {
+        tone: "positive",
+        icon: /* @__PURE__ */ jsx2(CheckmarkCircleIcon, {}),
+        message: "Crop size looks good."
+      }
+    );
+  }
+  return null;
+};
+var describeDimensions = (dimensions) => `${dimensions.width} \xD7 ${dimensions.height} px`;
+var describeAspectRatio = ({
+  aspectRatioRange,
+  snapRatios
+}) => {
+  if (snapRatios) {
+    if (snapRatios.length <= 3) {
+      return snapRatios.map(formatAspectRatio).join(", ");
+    }
+    const lo = formatAspectRatio(Math.min(...snapRatios));
+    const hi = formatAspectRatio(Math.max(...snapRatios));
+    return `${snapRatios.length} ratios (${lo} \u2013 ${hi})`;
+  }
+  return aspectRatioRange.min === aspectRatioRange.max ? formatAspectRatio(aspectRatioRange.min) : `${formatAspectRatio(aspectRatioRange.min)} \u2013 ${formatAspectRatio(
+    aspectRatioRange.max
+  )}`;
+};
+
+// src/upload.ts
+var acceptsType = (mimeType, accept) => {
+  const type = mimeType.trim().toLowerCase();
+  const patterns = accept.split(",").map((entry) => entry.trim().toLowerCase()).filter(Boolean);
+  if (patterns.length === 0) {
+    return true;
+  }
+  return patterns.some((pattern) => {
+    if (pattern === "*" || pattern === "*/*") {
+      return true;
+    }
+    if (pattern.endsWith("/*")) {
+      return type.startsWith(pattern.slice(0, -1));
+    }
+    return type === pattern;
+  });
+};
+var isTextEntryTarget = (target) => {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+  if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+    return true;
+  }
+  const attribute = target.getAttribute("contenteditable");
+  return target.isContentEditable || attribute === "" || attribute === "true";
+};
+
+// src/ImageFieldInput.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var API_VERSION = "2025-02-19";
+var ImageFieldInput = ({
+  value,
+  onChange,
+  path,
+  members,
+  readOnly,
+  schemaType,
+  ...renderObjectProps
+}) => {
+  const client = useClient({ apiVersion: API_VERSION });
+  const { projectId, dataset } = client.config();
+  const assetSources = useWorkspace().form.image.assetSources;
+  const imageFieldOptions = schemaType.options?.imageField;
+  const aspectRatio = imageFieldOptions?.aspectRatio;
+  const hasAspectConstraint = aspectRatio !== void 0;
+  const hotspotEnabled = Boolean(schemaType.options?.hotspot);
+  const resolved = resolveAspectRatio(aspectRatio);
+  const config = {
+    aspectRatioRange: resolved.aspectRatioRange,
+    snapRatios: resolved.snapRatios,
+    recommendedDimensions: imageFieldOptions?.recommendedDimensions,
+    requiredDimensions: imageFieldOptions?.requiredDimensions
+  };
+  const accept = schemaType.options?.accept ?? "image/*";
+  const [upload, setUpload] = useState3({ status: "idle" });
+  const [dialogOpen, setDialogOpen] = useState3(false);
+  const [pendingAsset, setPendingAsset] = useState3(null);
+  const [draggingOver, setDraggingOver] = useState3(false);
+  const [browsingSource, setBrowsingSource] = useState3(null);
+  const fileInputRef = useRef2(null);
+  const dragDepth = useRef2(0);
+  const subscription = useRef2(null);
+  useEffect(() => () => subscription.current?.unsubscribe(), []);
+  const assetRef = value?.asset?._ref;
+  const assetCrop = value?.crop;
+  const assetHotspot = value?.hotspot;
+  const activeAssetRef = pendingAsset ?? assetRef;
+  const dialogSource = activeAssetRef && isCroppable(activeAssetRef) ? sourceDimensions(activeAssetRef) : null;
+  const imageSource = projectId && dataset ? { projectId, dataset } : null;
+  const customFieldMembers = members.filter(isCustomFieldMember);
+  const commitAsset = (ref, extraPatches = []) => {
+    onChange([
+      setIfMissing({ _type: "image" }),
+      set({ _type: "reference", _ref: ref }, ["asset"]),
+      ...extraPatches
+    ]);
+    setUpload({ status: "idle" });
+  };
+  const applyAsset = (selectedAssetRef) => {
+    if (isSvg(selectedAssetRef)) {
+      commitAsset(selectedAssetRef, [unset(["crop"])]);
+      return;
+    }
+    const dimensions = isCroppable(selectedAssetRef) ? sourceDimensions(selectedAssetRef) : null;
+    const openEditor = Boolean(dimensions) && (hasAspectConstraint || hotspotEnabled);
+    if (openEditor) {
+      setPendingAsset(selectedAssetRef);
+      setUpload({ status: "idle" });
+      setDialogOpen(true);
+      return;
+    }
+    if (dimensions && config.requiredDimensions && !dimensionsAtLeast(dimensions, config.requiredDimensions)) {
+      setUpload({
+        status: "error",
+        message: `That image is too small. It must be at least ${config.requiredDimensions.width} \xD7 ${config.requiredDimensions.height} px.`
+      });
+      return;
+    }
+    commitAsset(selectedAssetRef, [unset(["crop"])]);
+  };
+  const uploadFile = (file) => {
+    if (!acceptsType(file.type, accept)) {
+      setUpload({
+        status: "error",
+        message: "That file type isn't accepted here. Choose a supported image."
+      });
+      return;
+    }
+    setUpload({ status: "uploading", progress: 0 });
+    subscription.current?.unsubscribe();
+    subscription.current = client.observable.assets.upload("image", file, { filename: file.name }).subscribe({
+      next: (event) => {
+        if (event.type === "progress") {
+          setUpload({ status: "uploading", progress: event.percent });
+        } else {
+          applyAsset(event.body.document._id);
+        }
+      },
+      error: () => {
+        setUpload({
+          status: "error",
+          message: "Upload failed. Please try again."
+        });
+      }
+    });
+  };
+  const selectAsset = (assets) => {
+    setBrowsingSource(null);
+    const chosen = assets.at(0);
+    if (chosen?.kind === "assetDocumentId" && typeof chosen.value === "string" && isImageAssetRef(chosen.value)) {
+      applyAsset(chosen.value);
+      return;
+    }
+    setUpload({
+      status: "error",
+      message: "That selection can't be used here. Choose an uploaded image."
+    });
+  };
+  const confirmCropAndHotspot = ({
+    crop,
+    hotspot
+  }) => {
+    const assetPatches = pendingAsset ? [
+      setIfMissing({ _type: "image" }),
+      set({ _type: "reference", _ref: pendingAsset }, ["asset"])
+    ] : [];
+    onChange([
+      ...assetPatches,
+      set(crop, ["crop"]),
+      ...hotspot ? [set(hotspot, ["hotspot"])] : []
+    ]);
+    setPendingAsset(null);
+    setDialogOpen(false);
+  };
+  const removeImage = () => {
+    const keys = Object.keys(value ?? {});
+    const hasMemberFields = keys.some((key) => !RESERVED_KEYS.has(key));
+    const isArrayElement = typeof path.at(-1) !== "string";
+    const removeKeys = ["asset", "media"].concat(keys.filter((key) => ASSET_BOUND_KEYS.has(key))).map((key) => unset([key]));
+    onChange(hasMemberFields || isArrayElement ? removeKeys : unset());
+    setUpload({ status: "idle" });
+  };
+  const onFilePicked = (event) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      uploadFile(file);
+    }
+    event.target.value = "";
+  };
+  const handlePaste = (event) => {
+    if (readOnly || upload.status === "uploading") {
+      return;
+    }
+    if (isTextEntryTarget(event.target)) {
+      return;
+    }
+    const file = Array.from(event.clipboardData.files).find(
+      (item) => acceptsType(item.type, accept)
+    );
+    if (!file) {
+      return;
+    }
+    event.preventDefault();
+    uploadFile(file);
+  };
+  const dropHandlers = useDropHandlers({
+    disabled: readOnly || upload.status === "uploading",
+    dragDepth,
+    setDraggingOver,
+    onFile: uploadFile
+  });
+  if (!imageSource) {
+    return /* @__PURE__ */ jsx3(Card2, { padding: 4, radius: 2, tone: "critical", border: true, children: /* @__PURE__ */ jsx3(Text2, { size: 1, children: "Image input unavailable: missing project configuration." }) });
+  }
+  return /* @__PURE__ */ jsxs3(Stack2, { gap: 3, ...dropHandlers, onPaste: handlePaste, children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept,
+        hidden: true,
+        "aria-label": "Upload image",
+        onChange: onFilePicked
+      }
+    ),
+    upload.status === "uploading" ? /* @__PURE__ */ jsx3(UploadingCard, { progress: upload.progress }) : value?.asset ? /* @__PURE__ */ jsx3(
+      ConfirmedPreview,
+      {
+        value,
+        imageSource,
+        config,
+        croppable: Boolean(assetRef && isCroppable(assetRef)),
+        readOnly,
+        draggingOver,
+        onEditCrop: () => {
+          setDialogOpen(true);
+        },
+        onReplace: () => fileInputRef.current?.click(),
+        onRemove: removeImage,
+        selectAffordance: /* @__PURE__ */ jsx3(
+          SelectExistingButton,
+          {
+            sources: assetSources,
+            disabled: readOnly,
+            fontSize: 1,
+            onBrowse: setBrowsingSource
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx3(
+      EmptyDropzone,
+      {
+        readOnly,
+        draggingOver,
+        onUploadClick: () => fileInputRef.current?.click(),
+        selectAffordance: /* @__PURE__ */ jsx3(
+          SelectExistingButton,
+          {
+            sources: assetSources,
+            disabled: readOnly,
+            onBrowse: setBrowsingSource
+          }
+        )
+      }
+    ),
+    upload.status === "error" && /* @__PURE__ */ jsx3(Card2, { padding: 3, radius: 2, tone: "critical", border: true, children: /* @__PURE__ */ jsx3(Text2, { size: 1, children: upload.message }) }),
+    customFieldMembers.length > 0 && /* @__PURE__ */ jsx3(
+      ObjectInputMembers,
+      {
+        members: customFieldMembers,
+        ...renderObjectProps
+      }
+    ),
+    browsingSource && /* @__PURE__ */ jsx3(
+      browsingSource.component,
+      {
+        assetSource: browsingSource,
+        action: "select",
+        assetType: "image",
+        accept,
+        selectionType: "single",
+        selectedAssets: [],
+        dialogHeaderTitle: "Select image",
+        onClose: () => {
+          setBrowsingSource(null);
+        },
+        onSelect: selectAsset
+      }
+    ),
+    dialogOpen && activeAssetRef && dialogSource && /* @__PURE__ */ jsx3(
+      CropDialog,
+      {
+        assetRef: activeAssetRef,
+        imageSource,
+        sourceDimensions: dialogSource,
+        config,
+        initialCrop: pendingAsset ? void 0 : assetCrop,
+        hotspotEnabled,
+        initialHotspot: pendingAsset ? void 0 : assetHotspot,
+        onConfirm: confirmCropAndHotspot,
+        onClose: () => {
+          setPendingAsset(null);
+          setDialogOpen(false);
+        }
+      },
+      activeAssetRef
+    )
+  ] });
+};
+var UploadingCard = ({ progress }) => /* @__PURE__ */ jsx3(Card2, { padding: 5, radius: 2, border: true, children: /* @__PURE__ */ jsxs3(Flex2, { direction: "column", align: "center", gap: 3, children: [
+  /* @__PURE__ */ jsx3(Spinner, { muted: true }),
+  /* @__PURE__ */ jsxs3(Text2, { size: 1, muted: true, children: [
+    "Uploading\u2026 ",
+    Math.round(progress),
+    "%"
+  ] })
+] }) });
+var EmptyDropzone = ({
+  readOnly,
+  draggingOver,
+  onUploadClick,
+  selectAffordance
+}) => /* @__PURE__ */ jsx3(
+  Card2,
+  {
+    padding: 5,
+    radius: 2,
+    border: true,
+    tone: draggingOver ? "primary" : "default",
+    style: { borderStyle: "dashed" },
+    children: /* @__PURE__ */ jsxs3(Flex2, { direction: "column", align: "center", gap: 4, children: [
+      /* @__PURE__ */ jsx3(Text2, { size: 4, muted: true, children: /* @__PURE__ */ jsx3(ImageIcon, {}) }),
+      /* @__PURE__ */ jsx3(Stack2, { gap: 2, children: /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, align: "center", children: draggingOver ? "Drop the image to upload" : "Drag and drop an image here, or" }) }),
+      /* @__PURE__ */ jsxs3(Inline, { gap: 2, children: [
+        /* @__PURE__ */ jsx3(
+          Button2,
+          {
+            icon: UploadIcon,
+            text: "Upload",
+            mode: "ghost",
+            disabled: readOnly,
+            onClick: onUploadClick
+          }
+        ),
+        selectAffordance
+      ] })
+    ] })
+  }
+);
+var ConfirmedPreview = ({
+  value,
+  imageSource,
+  config,
+  croppable,
+  readOnly,
+  draggingOver,
+  onEditCrop,
+  onReplace,
+  onRemove,
+  selectAffordance
+}) => {
+  const previewUrl = croppedImageUrl(value, imageSource, 640);
+  const dimensions = croppedDimensionsFromValue(value);
+  const dimensionIssue = dimensions ? getDimensionIssue(dimensions, config) : void 0;
+  return /* @__PURE__ */ jsxs3(Stack2, { gap: 3, children: [
+    /* @__PURE__ */ jsx3(
+      Card2,
+      {
+        radius: 2,
+        border: true,
+        tone: draggingOver ? "primary" : "default",
+        style: { overflow: "hidden" },
+        children: previewUrl ? /* @__PURE__ */ jsx3(Flex2, { justify: "center", children: /* @__PURE__ */ jsx3(
+          "img",
+          {
+            src: previewUrl,
+            alt: "",
+            style: { display: "block", maxWidth: "100%", maxHeight: 300 }
+          }
+        ) }) : /* @__PURE__ */ jsx3(Box2, { padding: 4, children: /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: "Preview unavailable." }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs3(Flex2, { justify: "space-between", align: "center", gap: 3, wrap: "wrap", children: [
+      dimensions && /* @__PURE__ */ jsxs3(Text2, { size: 1, muted: true, children: [
+        dimensions.width,
+        " \xD7 ",
+        dimensions.height,
+        " px"
+      ] }),
+      /* @__PURE__ */ jsxs3(Inline, { gap: 2, children: [
+        croppable && /* @__PURE__ */ jsx3(
+          Button2,
+          {
+            icon: CropIcon,
+            text: "Edit crop",
+            mode: "ghost",
+            fontSize: 1,
+            disabled: readOnly,
+            onClick: onEditCrop
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Button2,
+          {
+            icon: ImageIcon,
+            text: "Replace",
+            mode: "ghost",
+            fontSize: 1,
+            disabled: readOnly,
+            onClick: onReplace
+          }
+        ),
+        selectAffordance,
+        /* @__PURE__ */ jsx3(
+          Button2,
+          {
+            icon: TrashIcon,
+            text: "Remove",
+            mode: "bleed",
+            tone: "critical",
+            fontSize: 1,
+            disabled: readOnly,
+            onClick: onRemove
+          }
+        )
+      ] })
+    ] }),
+    dimensionIssue && /* @__PURE__ */ jsx3(Card2, { padding: 3, radius: 2, tone: dimensionIssue.tone, border: true, children: /* @__PURE__ */ jsx3(Text2, { size: 1, children: dimensionIssue.message }) })
+  ] });
+};
+var SelectExistingButton = ({
+  sources,
+  disabled,
+  fontSize,
+  onBrowse
+}) => {
+  const [firstSource] = sources;
+  if (!firstSource) {
+    return null;
+  }
+  if (sources.length === 1) {
+    return /* @__PURE__ */ jsx3(
+      Button2,
+      {
+        icon: ImagesIcon,
+        text: "Select existing",
+        mode: "ghost",
+        fontSize,
+        disabled,
+        onClick: () => {
+          onBrowse(firstSource);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    MenuButton,
+    {
+      id: "image-field-select-existing",
+      button: /* @__PURE__ */ jsx3(
+        Button2,
+        {
+          icon: ImagesIcon,
+          text: "Select existing",
+          mode: "ghost",
+          fontSize,
+          disabled
+        }
+      ),
+      menu: /* @__PURE__ */ jsx3(Menu, { children: sources.map((source) => /* @__PURE__ */ jsx3(
+        MenuItem,
+        {
+          text: source.title ?? source.name,
+          icon: source.icon,
+          fontSize,
+          onClick: () => {
+            onBrowse(source);
+          }
+        },
+        source.name
+      )) })
+    }
+  );
+};
+var ASSET_MANAGED_FIELDS = /* @__PURE__ */ new Set(["asset", "media", "crop", "hotspot"]);
+var isCustomFieldMember = (member) => member.kind !== "field" || !ASSET_MANAGED_FIELDS.has(member.name);
+var RESERVED_KEYS = /* @__PURE__ */ new Set([
+  "_type",
+  "_key",
+  "_upload",
+  "asset",
+  "crop",
+  "hotspot",
+  "media"
+]);
+var ASSET_BOUND_KEYS = /* @__PURE__ */ new Set(["crop", "hotspot", "_upload"]);
+var getDimensionIssue = (dimensions, config) => {
+  const { requiredDimensions, recommendedDimensions } = config;
+  if (requiredDimensions && !dimensionsAtLeast(dimensions, requiredDimensions)) {
+    return {
+      tone: "critical",
+      message: `Cropped image is below the required ${requiredDimensions.width} \xD7 ${requiredDimensions.height} px. Edit the crop to enlarge it.`
+    };
+  }
+  if (recommendedDimensions && !dimensionsAtLeast(dimensions, recommendedDimensions)) {
+    return {
+      tone: "caution",
+      message: `Cropped image is below the recommended ${recommendedDimensions.width} \xD7 ${recommendedDimensions.height} px.`
+    };
+  }
+  return void 0;
+};
+var hasFiles = (event) => Array.from(event.dataTransfer.types).includes("Files");
+var useDropHandlers = ({
+  disabled,
+  dragDepth,
+  setDraggingOver,
+  onFile
+}) => {
+  return {
+    onDragEnter: (event) => {
+      if (disabled || !hasFiles(event)) {
+        return;
+      }
+      event.preventDefault();
+      dragDepth.current += 1;
+      setDraggingOver(true);
+    },
+    onDragOver: (event) => {
+      if (disabled || !hasFiles(event)) {
+        return;
+      }
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "copy";
+    },
+    onDragLeave: (event) => {
+      if (disabled) {
+        return;
+      }
+      event.preventDefault();
+      dragDepth.current = Math.max(0, dragDepth.current - 1);
+      if (dragDepth.current === 0) {
+        setDraggingOver(false);
+      }
+    },
+    onDrop: (event) => {
+      if (disabled) {
+        return;
+      }
+      event.preventDefault();
+      dragDepth.current = 0;
+      setDraggingOver(false);
+      const file = event.dataTransfer.files.item(0);
+      if (file) {
+        onFile(file);
+      }
+    }
+  };
+};
+
+// src/defineImageField.ts
+import { defineField } from "sanity";
+var defineImageField = ({
+  aspectRatio,
+  recommendedDimensions,
+  requiredDimensions,
+  options,
+  validation,
+  ...overrides
+}) => {
+  if (aspectRatio !== void 0) {
+    validateAspectRatio(aspectRatio);
+  }
+  const imageField = {
+    aspectRatio,
+    recommendedDimensions,
+    requiredDimensions
+  };
+  return defineField({
+    ...overrides,
+    type: "image",
+    options: { ...options, imageField },
+    components: { input: ImageFieldInput },
+    validation: (rule, context) => {
+      const rules = [];
+      if (requiredDimensions) {
+        rules.push(
+          rule.custom(
+            (value) => validateCroppedSize(value, requiredDimensions, "error")
+          )
+        );
+      }
+      if (recommendedDimensions) {
+        rules.push(
+          rule.custom(
+            (value) => validateCroppedSize(value, recommendedDimensions, "warning")
+          ).warning()
+        );
+      }
+      if (validation) {
+        const userRules = validation(rule, context);
+        rules.push(...Array.isArray(userRules) ? userRules : [userRules]);
+      }
+      return rules;
+    }
+  });
+};
+var validateCroppedSize = (value, threshold, level) => {
+  const dimensions = croppedDimensionsFromValue(value);
+  if (!dimensions || dimensionsAtLeast(dimensions, threshold)) {
+    return true;
+  }
+  const verb = level === "warning" ? "should" : "must";
+  const suffix = level === "warning" ? " for best results" : "";
+  return `Cropped image ${verb} be at least ${threshold.width} \xD7 ${threshold.height} px${suffix}`;
+};
+
+// src/formComponents.tsx
+import "sanity";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var isImageInput = (props) => {
+  for (let current = props.schemaType; current; current = current.type ?? void 0) {
+    if (current.name === "image") {
+      return true;
+    }
+  }
+  return false;
+};
+var imageFieldFormInput = (props) => isImageInput(props) ? /* @__PURE__ */ jsx4(ImageFieldInput, { ...props }) : props.renderDefault(props);
+export {
+  ImageFieldInput,
+  defineImageField,
+  imageFieldFormInput
+};
+//# sourceMappingURL=index.js.map