sanity-plugin-hotspot-array 4.0.0 → 5.0.0

package/dist/index.d.ts

@@ -1,54 +1,36 @@
-import {ArrayOfObjectsInputProps} from 'sanity'
-import {ComponentType} from 'react'
-import {ObjectSchemaType} from 'sanity'
-import {Plugin as Plugin_2} from 'sanity'
-import {ReactNode} from 'react'
-import {RenderPreviewCallback} from 'sanity'
-
-export declare type HotspotItem<
-  HotspotFields = {
-    [key: string]: unknown
-  },
-> = {
-  _key: string
-  _type: string
-  x: number
-  y: number
-} & HotspotFields
-
-export declare interface HotspotTooltipProps<
-  HotspotFields = {
-    [key: string]: unknown
-  },
-> {
-  value: HotspotItem<HotspotFields>
-  schemaType: ObjectSchemaType
-  renderPreview: RenderPreviewCallback
+import { ComponentType, ReactNode } from "react";
+import { ArrayOfObjectsInputProps, ObjectSchemaType, RenderPreviewCallback } from "sanity";
+interface HotspotTooltipProps<HotspotFields = {
+  [key: string]: unknown;
+}> {
+  value: HotspotItem<HotspotFields>;
+  schemaType: ObjectSchemaType;
+  renderPreview: RenderPreviewCallback;
 }
-
-export declare function ImageHotspotArray(
-  props: ArrayOfObjectsInputProps<HotspotItem> & {
-    imageHotspotOptions: ImageHotspotOptions
-  },
-): ReactNode
-
-export declare const imageHotspotArrayPlugin: Plugin_2<void>
-
-export declare interface ImageHotspotOptions<
-  HotspotFields = {
-    [key: string]: unknown
-  },
-> {
-  pathRoot?: 'document' | 'parent'
-  imagePath: string
-  descriptionPath?: string
-  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>
+interface ImageHotspotOptions<HotspotFields = {
+  [key: string]: unknown;
+}> {
+  pathRoot?: 'document' | 'parent';
+  imagePath: string;
+  descriptionPath?: string;
+  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>;
 }
-
-export {}
-
 declare module 'sanity' {
   interface ArrayOptions {
-    imageHotspot?: ImageHotspotOptions
+    imageHotspot?: ImageHotspotOptions;
   }
 }
+declare const imageHotspotArrayPlugin: import("sanity").Plugin<void>;
+type HotspotItem<HotspotFields = {
+  [key: string]: unknown;
+}> = {
+  _key: string;
+  _type: string;
+  x: number;
+  y: number;
+} & HotspotFields;
+declare function ImageHotspotArray(props: ArrayOfObjectsInputProps<HotspotItem> & {
+  imageHotspotOptions: ImageHotspotOptions;
+}): ReactNode;
+export { type HotspotItem, type HotspotTooltipProps, ImageHotspotArray, type ImageHotspotOptions, imageHotspotArrayPlugin };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/Spot.tsx","../src/plugin.tsx","../src/ImageHotspotArray.tsx"],"mappings":";;UA0EiB,mBAAA;EAAA,CAAsC,GAAA;AAAA;EACrD,KAAA,EAAO,WAAA,CAAY,aAAA;EACnB,UAAA,EAAY,gBAAA;EACZ,aAAA,EAAe,qBAAA;AAAA;AAAA,UCvEA,mBAAA;EAAA,CAAsC,GAAA;AAAA;EACrD,QAAA;EACA,SAAA;EACA,eAAA;EACA,OAAA,GAAU,aAAA,CAAc,mBAAA,CAAoB,aAAA;AAAA;AAAA;EAAA,UAI3B,YAAA;IACf,YAAA,GAAe,mBAAmB;EAAA;AAAA;AAAA,cAIzB,uBAAA,mBAAuB,MAAA;AAAA,KCYxB,WAAA;EAAA,CAA8B,GAAA;AAAA;EACxC,IAAA;EACA,KAAA;EACA,CAAA;EACA,CAAA;AAAA,IACE,aAAa;AAAA,iBAED,iBAAA,CACd,KAAA,EAAO,wBAAA,CAAyB,WAAA;EAAgB,mBAAA,EAAqB,mBAAA;AAAA,IACpE,SAAA"}

package/dist/index.js

@@ -1,14 +1,19 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
 import { getImageDimensions } from "@sanity/asset-utils";
-import imageUrlBuilder from "@sanity/image-url";
-import { Card, Text, Tooltip, Box, Stack, Flex } from "@sanity/ui";
+import { createImageUrlBuilder } from "@sanity/image-url";
+import { Card, Text, Box, Tooltip, Flex, Stack } from "@sanity/ui";
 import { randomKey } from "@sanity/util/content";
-import { get } from "lodash-es";
-import { useState, useEffect, useCallback, createElement, useRef, useMemo } from "react";
+import get from "lodash-es/get.js";
+import { useState, useEffect, useRef, useMemo } from "react";
 import { useClient, useFormValue, useResolveInitialValueForType, PatchEvent, setIfMissing, insert, set, definePlugin } from "sanity";
 import { useMotionValue, motion } from "framer-motion";
-function Feedback({ children }) {
-  return /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsx(Text, { children }) });
+function Feedback(t0) {
+  const $ = c(2), {
+    children
+  } = t0;
+  let t1;
+  return $[0] !== children ? (t1 = /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsx(Text, { children }) }), $[0] = children, $[1] = t1) : t1 = $[1], t1;
 }
 const dragStyle = {
   width: "1.4rem",
@@ -54,79 +59,107 @@ const dragStyle = {
 }, labelStyleWhileActive = {
   visibility: "hidden"
 }, round = (num) => Math.round(num * 100) / 100;
-function Spot({
-  value,
-  bounds,
-  update,
-  hotspotDescriptionPath,
-  tooltip,
-  index,
-  schemaType,
-  renderPreview
-}) {
-  const [isDragging, setIsDragging] = useState(!1), [isHovering, setIsHovering] = useState(!1), x = useMotionValue(round(bounds.width * (value.x / 100))), y = useMotionValue(round(bounds.height * (value.y / 100)));
-  useEffect(() => {
+function Spot(t0) {
+  const $ = c(67), {
+    value,
+    bounds,
+    update,
+    hotspotDescriptionPath,
+    tooltip: TooltipComponent,
+    index,
+    schemaType,
+    renderPreview
+  } = t0, [isDragging, setIsDragging] = useState(!1), [isHovering, setIsHovering] = useState(!1), t1 = bounds.width * (value.x / 100);
+  let t2;
+  $[0] !== t1 ? (t2 = round(t1), $[0] = t1, $[1] = t2) : t2 = $[1];
+  const x = useMotionValue(t2), t3 = bounds.height * (value.y / 100);
+  let t4;
+  $[2] !== t3 ? (t4 = round(t3), $[2] = t3, $[3] = t4) : t4 = $[3];
+  const y = useMotionValue(t4);
+  let t5;
+  $[4] !== bounds.height || $[5] !== bounds.width || $[6] !== value.x || $[7] !== value.y || $[8] !== x || $[9] !== y ? (t5 = () => {
     x.set(round(bounds.width * (value.x / 100))), y.set(round(bounds.height * (value.y / 100)));
-  }, [x, y, value, bounds]);
-  const handleDragEnd = useCallback(() => {
+  }, $[4] = bounds.height, $[5] = bounds.width, $[6] = value.x, $[7] = value.y, $[8] = x, $[9] = y, $[10] = t5) : t5 = $[10];
+  let t6;
+  $[11] !== bounds || $[12] !== value || $[13] !== x || $[14] !== y ? (t6 = [x, y, value, bounds], $[11] = bounds, $[12] = value, $[13] = x, $[14] = y, $[15] = t6) : t6 = $[15], useEffect(t5, t6);
+  let t7;
+  $[16] !== bounds.height || $[17] !== bounds.width || $[18] !== update || $[19] !== value._key || $[20] !== x || $[21] !== y ? (t7 = () => {
     setIsDragging(!1);
     const currentX = x.get(), currentY = y.get(), newX = round(currentX * 100 / bounds.width), newY = round(currentY * 100 / bounds.height), safeX = Math.max(0, Math.min(100, newX)), safeY = Math.max(0, Math.min(100, newY));
     update(value._key, safeX, safeY);
-  }, [x, y, value, update, bounds]), handleDragStart = useCallback(() => setIsDragging(!0), []), handleHoverStart = useCallback(() => setIsHovering(!0), []), handleHoverEnd = useCallback(() => setIsHovering(!1), []);
-  return !x || !y ? null : /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      drag: !0,
-      dragConstraints: bounds,
-      dragElastic: 0,
-      dragMomentum: !1,
-      onDragEnd: handleDragEnd,
-      onDragStart: handleDragStart,
-      onHoverStart: handleHoverStart,
-      onHoverEnd: handleHoverEnd,
-      style: {
-        ...dragStyle,
-        x,
-        y,
-        ...isDragging && { ...dragStyleWhileDrag },
-        ...isHovering && { ...dragStyleWhileHover }
-      },
-      children: /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          disabled: isDragging,
-          portal: !0,
-          content: tooltip && typeof tooltip == "function" ? createElement(tooltip, { value, renderPreview, schemaType }) : /* @__PURE__ */ jsx(Box, { padding: 2, style: { maxWidth: 200, pointerEvents: "none" }, children: /* @__PURE__ */ jsx(Text, { textOverflow: "ellipsis", children: hotspotDescriptionPath ? get(value, hotspotDescriptionPath) : `${value.x}% x ${value.y}%` }) }),
-          children: /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                style: {
-                  ...dotStyle,
-                  ...(isDragging || isHovering) && { ...dotStyleWhileActive }
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  ...labelStyle,
-                  ...(isDragging || isHovering) && { ...labelStyleWhileActive }
-                },
-                children: index + 1
-              }
-            )
-          ] })
-        },
-        value._key
-      )
-    }
-  );
+  }, $[16] = bounds.height, $[17] = bounds.width, $[18] = update, $[19] = value._key, $[20] = x, $[21] = y, $[22] = t7) : t7 = $[22];
+  const handleDragEnd = t7;
+  let t8;
+  $[23] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t8 = () => setIsDragging(!0), $[23] = t8) : t8 = $[23];
+  const handleDragStart = t8;
+  let t9;
+  $[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t9 = () => setIsHovering(!0), $[24] = t9) : t9 = $[24];
+  const handleHoverStart = t9;
+  let t10;
+  $[25] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t10 = () => setIsHovering(!1), $[25] = t10) : t10 = $[25];
+  const handleHoverEnd = t10;
+  if (!x || !y)
+    return null;
+  let t11;
+  $[26] !== isDragging ? (t11 = isDragging && {
+    ...dragStyleWhileDrag
+  }, $[26] = isDragging, $[27] = t11) : t11 = $[27];
+  let t12;
+  $[28] !== isHovering ? (t12 = isHovering && {
+    ...dragStyleWhileHover
+  }, $[28] = isHovering, $[29] = t12) : t12 = $[29];
+  let t13;
+  $[30] !== t11 || $[31] !== t12 || $[32] !== x || $[33] !== y ? (t13 = {
+    ...dragStyle,
+    x,
+    y,
+    ...t11,
+    ...t12
+  }, $[30] = t11, $[31] = t12, $[32] = x, $[33] = y, $[34] = t13) : t13 = $[34];
+  let t14;
+  $[35] !== TooltipComponent || $[36] !== hotspotDescriptionPath || $[37] !== renderPreview || $[38] !== schemaType || $[39] !== value ? (t14 = TooltipComponent && typeof TooltipComponent == "function" ? /* @__PURE__ */ jsx(TooltipComponent, { value, renderPreview, schemaType }) : /* @__PURE__ */ jsx(Box, { padding: 2, style: {
+    maxWidth: 200,
+    pointerEvents: "none"
+  }, children: /* @__PURE__ */ jsx(Text, { textOverflow: "ellipsis", children: hotspotDescriptionPath ? get(value, hotspotDescriptionPath) : `${value.x}% x ${value.y}%` }) }), $[35] = TooltipComponent, $[36] = hotspotDescriptionPath, $[37] = renderPreview, $[38] = schemaType, $[39] = value, $[40] = t14) : t14 = $[40];
+  let t15;
+  $[41] !== isDragging || $[42] !== isHovering ? (t15 = (isDragging || isHovering) && {
+    ...dotStyleWhileActive
+  }, $[41] = isDragging, $[42] = isHovering, $[43] = t15) : t15 = $[43];
+  let t16;
+  $[44] !== t15 ? (t16 = /* @__PURE__ */ jsx(Box, { style: {
+    ...dotStyle,
+    ...t15
+  } }), $[44] = t15, $[45] = t16) : t16 = $[45];
+  let t17;
+  $[46] !== isDragging || $[47] !== isHovering ? (t17 = (isDragging || isHovering) && {
+    ...labelStyleWhileActive
+  }, $[46] = isDragging, $[47] = isHovering, $[48] = t17) : t17 = $[48];
+  let t18;
+  $[49] !== t17 ? (t18 = {
+    ...labelStyle,
+    ...t17
+  }, $[49] = t17, $[50] = t18) : t18 = $[50];
+  const t19 = index + 1;
+  let t20;
+  $[51] !== t18 || $[52] !== t19 ? (t20 = /* @__PURE__ */ jsx("div", { style: t18, children: t19 }), $[51] = t18, $[52] = t19, $[53] = t20) : t20 = $[53];
+  let t21;
+  $[54] !== t16 || $[55] !== t20 ? (t21 = /* @__PURE__ */ jsxs("div", { children: [
+    t16,
+    t20
+  ] }), $[54] = t16, $[55] = t20, $[56] = t21) : t21 = $[56];
+  let t22;
+  $[57] !== isDragging || $[58] !== t14 || $[59] !== t21 || $[60] !== value._key ? (t22 = /* @__PURE__ */ jsx(Tooltip, { disabled: isDragging, portal: !0, content: t14, children: t21 }, value._key), $[57] = isDragging, $[58] = t14, $[59] = t21, $[60] = value._key, $[61] = t22) : t22 = $[61];
+  let t23;
+  return $[62] !== bounds || $[63] !== handleDragEnd || $[64] !== t13 || $[65] !== t22 ? (t23 = /* @__PURE__ */ jsx(motion.div, { drag: !0, dragConstraints: bounds, dragElastic: 0, dragMomentum: !1, onDragEnd: handleDragEnd, onDragStart: handleDragStart, onHoverStart: handleHoverStart, onHoverEnd: handleHoverEnd, style: t13, children: t22 }), $[62] = bounds, $[63] = handleDragEnd, $[64] = t13, $[65] = t22, $[66] = t23) : t23 = $[66], t23;
 }
 function useUnmountEffect(effect) {
-  const effectRef = useRef(effect);
-  effectRef.current = effect, useEffect(() => () => effectRef.current(), []);
+  const $ = c(5), effectRef = useRef(effect);
+  let t0, t1;
+  $[0] !== effect ? (t0 = () => {
+    effectRef.current = effect;
+  }, t1 = [effect], $[0] = effect, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1);
+  let t2, t3;
+  $[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = () => () => effectRef.current(), t3 = [], $[3] = t2, $[4] = t3) : (t2 = $[3], t3 = $[4]), useEffect(t2, t3);
 }
 function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
   const timeout = useRef(void 0), waitTimeout = useRef(void 0), cb = useRef(callback), lastCall = useRef(void 0), clear = () => {
@@ -140,11 +173,18 @@ function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
       const context = lastCall.current;
       lastCall.current = void 0, cb.current.apply(context.this, context.args);
     }, wrapped = function(...args) {
-      timeout.current && clearTimeout(timeout.current), lastCall.current = { args, this: this }, timeout.current = setTimeout(execute, delay), maxWait > 0 && !waitTimeout.current && (waitTimeout.current = setTimeout(execute, maxWait));
+      timeout.current && clearTimeout(timeout.current), lastCall.current = {
+        args,
+        this: this
+      }, timeout.current = setTimeout(execute, delay), maxWait > 0 && !waitTimeout.current && (waitTimeout.current = setTimeout(execute, maxWait));
     };
     return Object.defineProperties(wrapped, {
-      length: { value: callback.length },
-      name: { value: `${callback.name || "anonymous"}__debounced__${delay}` }
+      length: {
+        value: callback.length
+      },
+      name: {
+        value: `${callback.name || "anonymous"}__debounced__${delay}`
+      }
     }), wrapped;
   }, [delay, maxWait, ...deps]);
 }
@@ -154,12 +194,9 @@ function getResizeObserver() {
   if (!isBrowser) return;
   if (observerSingleton) return observerSingleton;
   const callbacks = /* @__PURE__ */ new Map(), observer = new ResizeObserver((entries) => {
-    for (const entry of entries)
-      callbacks.get(entry.target)?.forEach(
-        (cb) => setTimeout(() => {
-          cb(entry);
-        }, 0)
-      );
+    for (const entry of entries) callbacks.get(entry.target)?.forEach((cb) => setTimeout(() => {
+      cb(entry);
+    }, 0));
   });
   return observerSingleton = {
     observer,
@@ -175,7 +212,9 @@ function getResizeObserver() {
 }
 function useResizeObserver(target, callback, enabled = !0) {
   const ro = enabled && getResizeObserver(), cb = useRef(callback);
-  cb.current = callback;
+  useEffect(() => {
+    cb.current = callback;
+  }, [callback]);
   const tgt = target && "current" in target ? target.current : target;
   useEffect(() => {
     const _tgt = target && "current" in target ? target.current : target;
@@ -189,96 +228,126 @@ function useResizeObserver(target, callback, enabled = !0) {
     };
   }, [tgt, ro]);
 }
-const imageStyle = { width: "100%", height: "auto" }, VALID_ROOT_PATHS = ["document", "parent"];
+const imageStyle = {
+  width: "100%",
+  height: "auto"
+}, VALID_ROOT_PATHS = ["document", "parent"];
 function ImageHotspotArray(props) {
-  const { value, onChange, imageHotspotOptions, schemaType, renderPreview } = props, sanityClient = useClient({ apiVersion: "2022-01-01" }), imageHotspotPathRoot = useMemo(() => (VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot ?? "") ? imageHotspotOptions.pathRoot : "document") === "document" ? [] : props.path.slice(0, -1), [imageHotspotOptions.pathRoot, props.path]), rootObject = useFormValue(imageHotspotPathRoot), resolveInitialValueForType = useResolveInitialValueForType(), resolveInitialValue = useCallback(
-    async (type) => resolveInitialValueForType(type, {}).then((initialValue) => initialValue).catch(() => {
-    }),
-    [resolveInitialValueForType]
-  ), hotspotImage = useMemo(() => imageHotspotOptions.imagePath ? get(rootObject, imageHotspotOptions.imagePath) : rootObject, [rootObject, imageHotspotOptions.imagePath]), displayImage = useMemo(() => {
-    const builder = imageUrlBuilder(sanityClient).dataset(sanityClient.config().dataset ?? ""), urlFor = (source) => builder.image(source);
-    if (hotspotImage?.asset?._ref) {
-      const { aspectRatio } = getImageDimensions(hotspotImage.asset._ref), width = 1200, height = Math.round(width / aspectRatio), url = urlFor(hotspotImage).width(width).url();
-      return { width, height, url };
+  const $ = c(49), {
+    value,
+    onChange,
+    imageHotspotOptions,
+    schemaType,
+    renderPreview
+  } = props;
+  let t0;
+  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = {
+    apiVersion: "2022-01-01"
+  }, $[0] = t0) : t0 = $[0];
+  const sanityClient = useClient(t0), pathRoot = VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot ?? "") ? imageHotspotOptions.pathRoot : "document";
+  let t1;
+  $[1] !== pathRoot || $[2] !== props.path ? (t1 = pathRoot === "document" ? [] : props.path.slice(0, -1), $[1] = pathRoot, $[2] = props.path, $[3] = t1) : t1 = $[3];
+  const rootObject = useFormValue(t1), resolveInitialValueForType = useResolveInitialValueForType();
+  let t2;
+  $[4] !== resolveInitialValueForType ? (t2 = async (type) => resolveInitialValueForType(type, {}).then(_temp).catch(_temp2), $[4] = resolveInitialValueForType, $[5] = t2) : t2 = $[5];
+  const resolveInitialValue = t2;
+  let t3;
+  $[6] !== imageHotspotOptions.imagePath || $[7] !== rootObject ? (t3 = imageHotspotOptions.imagePath ? get(rootObject, imageHotspotOptions.imagePath) : rootObject, $[6] = imageHotspotOptions.imagePath, $[7] = rootObject, $[8] = t3) : t3 = $[8];
+  const hotspotImage = t3;
+  let t4;
+  if ($[9] !== hotspotImage || $[10] !== sanityClient) {
+    bb0: {
+      const builder = createImageUrlBuilder(sanityClient).dataset(sanityClient.config().dataset ?? ""), urlFor = (source) => builder.image(source);
+      if (hotspotImage?.asset?._ref) {
+        let t52;
+        $[12] !== hotspotImage.asset._ref ? (t52 = getImageDimensions(hotspotImage.asset._ref), $[12] = hotspotImage.asset._ref, $[13] = t52) : t52 = $[13];
+        const {
+          aspectRatio
+        } = t52;
+        let t62;
+        $[14] !== aspectRatio ? (t62 = Math.round(1200 / aspectRatio), $[14] = aspectRatio, $[15] = t62) : t62 = $[15];
+        const height = t62, url = urlFor(hotspotImage).width(1200).url();
+        let t72;
+        $[16] !== height || $[17] !== url ? (t72 = {
+          width: 1200,
+          height,
+          url
+        }, $[16] = height, $[17] = url, $[18] = t72) : t72 = $[18], t4 = t72;
+        break bb0;
+      }
+      t4 = null;
     }
-    return null;
-  }, [hotspotImage, sanityClient]), handleHotspotImageClick = useCallback(
-    async (event) => {
-      const { nativeEvent, currentTarget } = event, x = Number((nativeEvent.offsetX * 100 / currentTarget.width).toFixed(2)), y = Number((nativeEvent.offsetY * 100 / currentTarget.height).toFixed(2)), description = `New Hotspot at ${x}% x ${y}%`, initialValues = await resolveInitialValue(schemaType.of[0].type), newRow = {
-        _key: randomKey(12),
-        _type: schemaType.of[0].name,
-        ...initialValues,
-        x,
-        y
-      };
-      imageHotspotOptions?.descriptionPath && (newRow[imageHotspotOptions.descriptionPath] = description), onChange(PatchEvent.from([setIfMissing([]), insert([newRow], "after", [-1])]));
-    },
-    [imageHotspotOptions, onChange, resolveInitialValue, schemaType]
-  ), handleHotspotMove = useCallback(
-    (key, x, y) => {
-      onChange(
-        PatchEvent.from([
-          // Set the `x` value of this array key item
-          set(x, [{ _key: key }, "x"]),
-          // Set the `y` value of this array key item
-          set(y, [{ _key: key }, "y"])
-        ])
-      );
-    },
-    [onChange]
-  ), hotspotImageRef = useRef(null), [imageRect, setImageRect] = useState();
-  return useResizeObserver(
-    hotspotImageRef,
-    useDebouncedCallback(
-      (e) => setImageRect(e.contentRect),
-      [setImageRect],
-      200
-    )
-  ), /* @__PURE__ */ jsxs(Stack, { space: [2, 2, 3], children: [
-    displayImage?.url ? /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-      imageRect && (value?.length ?? 0) > 0 && value?.map((spot, index) => /* @__PURE__ */ jsx(
-        Spot,
-        {
-          index,
-          value: spot,
-          bounds: imageRect,
-          update: handleHotspotMove,
-          hotspotDescriptionPath: imageHotspotOptions?.descriptionPath,
-          tooltip: imageHotspotOptions?.tooltip,
-          renderPreview,
-          schemaType: schemaType.of[0]
-        },
-        spot._key
-      )),
-      /* @__PURE__ */ jsx(Card, { __unstable_checkered: !0, shadow: 1, children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsx(
-        "img",
-        {
-          ref: hotspotImageRef,
-          src: displayImage.url,
-          width: displayImage.width,
-          height: displayImage.height,
-          alt: "",
-          style: imageStyle,
-          onClick: handleHotspotImageClick
-        }
-      ) }) })
-    ] }) : /* @__PURE__ */ jsx(Feedback, { children: imageHotspotOptions.imagePath ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      "No Hotspot image found at path ",
-      /* @__PURE__ */ jsx("code", { children: imageHotspotOptions.imagePath })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Define a path in this field using to the image field in this document at",
-      " ",
-      /* @__PURE__ */ jsx("code", { children: "options.hotspotImagePath" })
-    ] }) }),
-    imageHotspotOptions.pathRoot && !VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && /* @__PURE__ */ jsxs(Feedback, { children: [
-      'The supplied imageHotspotPathRoot "',
-      imageHotspotOptions.pathRoot,
-      '" is not valid, falling back to "document". Available values are "',
-      VALID_ROOT_PATHS.join(", "),
-      '".'
-    ] }),
-    props.renderDefault(props)
-  ] });
+    $[9] = hotspotImage, $[10] = sanityClient, $[11] = t4;
+  } else
+    t4 = $[11];
+  const displayImage = t4;
+  let t5;
+  $[19] !== imageHotspotOptions.descriptionPath || $[20] !== onChange || $[21] !== resolveInitialValue || $[22] !== schemaType.of[0] ? (t5 = async (event) => {
+    const spotType = schemaType.of[0];
+    if (!spotType)
+      return;
+    const {
+      nativeEvent,
+      currentTarget
+    } = event, x = Number((nativeEvent.offsetX * 100 / currentTarget.width).toFixed(2)), y = Number((nativeEvent.offsetY * 100 / currentTarget.height).toFixed(2)), description = `New Hotspot at ${x}% x ${y}%`, initialValues = await resolveInitialValue(spotType.type), newRow = {
+      _key: randomKey(12),
+      _type: spotType.name,
+      ...initialValues,
+      x,
+      y
+    };
+    imageHotspotOptions?.descriptionPath && (newRow[imageHotspotOptions.descriptionPath] = description), onChange(PatchEvent.from([setIfMissing([]), insert([newRow], "after", [-1])]));
+  }, $[19] = imageHotspotOptions.descriptionPath, $[20] = onChange, $[21] = resolveInitialValue, $[22] = schemaType.of[0], $[23] = t5) : t5 = $[23];
+  const handleHotspotImageClick = t5;
+  let t6;
+  $[24] !== onChange ? (t6 = (key, x_0, y_0) => {
+    onChange(PatchEvent.from([set(x_0, [{
+      _key: key
+    }, "x"]), set(y_0, [{
+      _key: key
+    }, "y"])]));
+  }, $[24] = onChange, $[25] = t6) : t6 = $[25];
+  const handleHotspotMove = t6, hotspotImageRef = useRef(null), [imageRect, setImageRect] = useState();
+  let t7, t8;
+  $[26] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t7 = (e) => setImageRect(e.contentRect), t8 = [setImageRect], $[26] = t7, $[27] = t8) : (t7 = $[26], t8 = $[27]), useResizeObserver(hotspotImageRef, useDebouncedCallback(t7, t8, 200));
+  let t9;
+  $[28] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t9 = [2, 2, 3], $[28] = t9) : t9 = $[28];
+  let t10;
+  $[29] !== displayImage || $[30] !== handleHotspotImageClick || $[31] !== handleHotspotMove || $[32] !== imageHotspotOptions.descriptionPath || $[33] !== imageHotspotOptions.imagePath || $[34] !== imageHotspotOptions.tooltip || $[35] !== imageRect || $[36] !== renderPreview || $[37] !== schemaType.of[0] || $[38] !== value ? (t10 = displayImage?.url ? /* @__PURE__ */ jsxs("div", { style: {
+    position: "relative"
+  }, children: [
+    imageRect && (value?.length ?? 0) > 0 && value?.map((spot, index) => /* @__PURE__ */ jsx(Spot, { index, value: spot, bounds: imageRect, update: handleHotspotMove, hotspotDescriptionPath: imageHotspotOptions?.descriptionPath, tooltip: imageHotspotOptions?.tooltip, renderPreview, schemaType: schemaType.of[0] }, spot._key)),
+    /* @__PURE__ */ jsx(Card, { __unstable_checkered: !0, shadow: 1, children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsx("img", { ref: hotspotImageRef, src: displayImage.url, width: displayImage.width, height: displayImage.height, alt: "", style: imageStyle, onClick: handleHotspotImageClick }) }) })
+  ] }) : /* @__PURE__ */ jsx(Feedback, { children: imageHotspotOptions.imagePath ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    "No Hotspot image found at path ",
+    /* @__PURE__ */ jsx("code", { children: imageHotspotOptions.imagePath })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    "Define a path in this field using to the image field in this document at",
+    " ",
+    /* @__PURE__ */ jsx("code", { children: "options.hotspotImagePath" })
+  ] }) }), $[29] = displayImage, $[30] = handleHotspotImageClick, $[31] = handleHotspotMove, $[32] = imageHotspotOptions.descriptionPath, $[33] = imageHotspotOptions.imagePath, $[34] = imageHotspotOptions.tooltip, $[35] = imageRect, $[36] = renderPreview, $[37] = schemaType.of[0], $[38] = value, $[39] = t10) : t10 = $[39];
+  let t11;
+  $[40] !== imageHotspotOptions.pathRoot ? (t11 = imageHotspotOptions.pathRoot && !VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && /* @__PURE__ */ jsxs(Feedback, { children: [
+    'The supplied imageHotspotPathRoot "',
+    imageHotspotOptions.pathRoot,
+    '" is not valid, falling back to "document". Available values are "',
+    VALID_ROOT_PATHS.join(", "),
+    '".'
+  ] }), $[40] = imageHotspotOptions.pathRoot, $[41] = t11) : t11 = $[41];
+  const t12 = props;
+  let t13;
+  $[42] !== props.renderDefault || $[43] !== t12 ? (t13 = props.renderDefault(t12), $[42] = props.renderDefault, $[43] = t12, $[44] = t13) : t13 = $[44];
+  let t14;
+  return $[45] !== t10 || $[46] !== t11 || $[47] !== t13 ? (t14 = /* @__PURE__ */ jsxs(Stack, { gap: t9, children: [
+    t10,
+    t11,
+    t13
+  ] }), $[45] = t10, $[46] = t11, $[47] = t13, $[48] = t14) : t14 = $[48], t14;
+}
+function _temp2() {
+}
+function _temp(initialValue) {
+  return initialValue;
 }
 const imageHotspotArrayPlugin = definePlugin({
   name: "image-hotspot-array",