npm - sanity-plugin-hotspot-array - Versions diffs - 3.0.2 → 4.0.0 - Mend

sanity-plugin-hotspot-array 3.0.2 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/LICENSE CHANGED Viewed

@@ -1,6 +1,6 @@
 MIT License
-Copyright (c) 2025 Sanity.io
+Copyright (c) 2026 Sanity.io
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.js CHANGED Viewed

@@ -1,12 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: !0 });
-var jsxRuntime = require("react/jsx-runtime"), assetUtils = require("@sanity/asset-utils"), imageUrlBuilder = require("@sanity/image-url"), ui = require("@sanity/ui"), content = require("@sanity/util/content"), lodashEs = require("lodash-es"), react = require("react"), sanity = require("sanity"), framerMotion = require("framer-motion");
-function _interopDefaultCompat(e) {
-  return e && typeof e == "object" && "default" in e ? e : { default: e };
-}
-var imageUrlBuilder__default = /* @__PURE__ */ _interopDefaultCompat(imageUrlBuilder);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { getImageDimensions } from "@sanity/asset-utils";
+import imageUrlBuilder from "@sanity/image-url";
+import { Card, Text, Tooltip, Box, Stack, Flex } from "@sanity/ui";
+import { randomKey } from "@sanity/util/content";
+import { get } from "lodash-es";
+import { useState, useEffect, useCallback, createElement, 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__ */ jsxRuntime.jsx(ui.Card, { padding: 4, radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children }) });
+  return /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsx(Text, { children }) });
 }
 const dragStyle = {
   width: "1.4rem",
@@ -62,17 +64,17 @@ function Spot({
   schemaType,
   renderPreview
 }) {
-  const [isDragging, setIsDragging] = react.useState(!1), [isHovering, setIsHovering] = react.useState(!1), x = framerMotion.useMotionValue(round(bounds.width * (value.x / 100))), y = framerMotion.useMotionValue(round(bounds.height * (value.y / 100)));
-  react.useEffect(() => {
+  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(() => {
     x.set(round(bounds.width * (value.x / 100))), y.set(round(bounds.height * (value.y / 100)));
   }, [x, y, value, bounds]);
-  const handleDragEnd = react.useCallback(() => {
+  const handleDragEnd = useCallback(() => {
     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 = react.useCallback(() => setIsDragging(!0), []), handleHoverStart = react.useCallback(() => setIsHovering(!0), []), handleHoverEnd = react.useCallback(() => setIsHovering(!1), []);
-  return !x || !y ? null : /* @__PURE__ */ jsxRuntime.jsx(
-    framerMotion.motion.div,
+  }, [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,
@@ -89,15 +91,15 @@ function Spot({
         ...isDragging && { ...dragStyleWhileDrag },
         ...isHovering && { ...dragStyleWhileHover }
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Tooltip,
+      children: /* @__PURE__ */ jsx(
+        Tooltip,
         {
           disabled: isDragging,
           portal: !0,
-          content: tooltip && typeof tooltip == "function" ? react.createElement(tooltip, { value, renderPreview, schemaType }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, style: { maxWidth: 200, pointerEvents: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { textOverflow: "ellipsis", children: hotspotDescriptionPath ? lodashEs.get(value, hotspotDescriptionPath) : `${value.x}% x ${value.y}%` }) }),
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Box,
+          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,
@@ -105,7 +107,7 @@ function Spot({
                 }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsx(
               "div",
               {
                 style: {
@@ -123,16 +125,16 @@ function Spot({
   );
 }
 function useUnmountEffect(effect) {
-  const effectRef = react.useRef(effect);
-  effectRef.current = effect, react.useEffect(() => () => effectRef.current(), []);
+  const effectRef = useRef(effect);
+  effectRef.current = effect, useEffect(() => () => effectRef.current(), []);
 }
 function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
-  const timeout = react.useRef(void 0), waitTimeout = react.useRef(void 0), cb = react.useRef(callback), lastCall = react.useRef(void 0), clear = () => {
+  const timeout = useRef(void 0), waitTimeout = useRef(void 0), cb = useRef(callback), lastCall = useRef(void 0), clear = () => {
     timeout.current && (clearTimeout(timeout.current), timeout.current = void 0), waitTimeout.current && (clearTimeout(waitTimeout.current), waitTimeout.current = void 0);
   };
-  return useUnmountEffect(clear), react.useEffect(() => {
+  return useUnmountEffect(clear), useEffect(() => {
     cb.current = callback;
-  }, deps), react.useMemo(() => {
+  }, deps), useMemo(() => {
     const execute = () => {
       if (clear(), !lastCall.current) return;
       const context = lastCall.current;
@@ -172,10 +174,10 @@ function getResizeObserver() {
   }, observerSingleton;
 }
 function useResizeObserver(target, callback, enabled = !0) {
-  const ro = enabled && getResizeObserver(), cb = react.useRef(callback);
+  const ro = enabled && getResizeObserver(), cb = useRef(callback);
   cb.current = callback;
   const tgt = target && "current" in target ? target.current : target;
-  react.useEffect(() => {
+  useEffect(() => {
     const _tgt = target && "current" in target ? target.current : target;
     if (!ro || !_tgt) return;
     let subscribed = !0;
@@ -189,42 +191,42 @@ function useResizeObserver(target, callback, enabled = !0) {
 }
 const imageStyle = { width: "100%", height: "auto" }, VALID_ROOT_PATHS = ["document", "parent"];
 function ImageHotspotArray(props) {
-  const { value, onChange, imageHotspotOptions, schemaType, renderPreview } = props, sanityClient = sanity.useClient({ apiVersion: "2022-01-01" }), imageHotspotPathRoot = react.useMemo(() => (VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot ?? "") ? imageHotspotOptions.pathRoot : "document") === "document" ? [] : props.path.slice(0, -1), [imageHotspotOptions.pathRoot, props.path]), rootObject = sanity.useFormValue(imageHotspotPathRoot), resolveInitialValueForType = sanity.useResolveInitialValueForType(), resolveInitialValue = react.useCallback(
+  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 = react.useMemo(() => imageHotspotOptions.imagePath ? lodashEs.get(rootObject, imageHotspotOptions.imagePath) : rootObject, [rootObject, imageHotspotOptions.imagePath]), displayImage = react.useMemo(() => {
-    const builder = imageUrlBuilder__default.default(sanityClient).dataset(sanityClient.config().dataset ?? ""), urlFor = (source) => builder.image(source);
+  ), 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 } = assetUtils.getImageDimensions(hotspotImage.asset._ref), width = 1200, height = Math.round(width / aspectRatio), url = urlFor(hotspotImage).width(width).url();
+      const { aspectRatio } = getImageDimensions(hotspotImage.asset._ref), width = 1200, height = Math.round(width / aspectRatio), url = urlFor(hotspotImage).width(width).url();
       return { width, height, url };
     }
     return null;
-  }, [hotspotImage, sanityClient]), handleHotspotImageClick = react.useCallback(
+  }, [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: content.randomKey(12),
+        _key: randomKey(12),
         _type: schemaType.of[0].name,
         ...initialValues,
         x,
         y
       };
-      imageHotspotOptions?.descriptionPath && (newRow[imageHotspotOptions.descriptionPath] = description), onChange(sanity.PatchEvent.from([sanity.setIfMissing([]), sanity.insert([newRow], "after", [-1])]));
+      imageHotspotOptions?.descriptionPath && (newRow[imageHotspotOptions.descriptionPath] = description), onChange(PatchEvent.from([setIfMissing([]), insert([newRow], "after", [-1])]));
     },
     [imageHotspotOptions, onChange, resolveInitialValue, schemaType]
-  ), handleHotspotMove = react.useCallback(
+  ), handleHotspotMove = useCallback(
     (key, x, y) => {
       onChange(
-        sanity.PatchEvent.from([
+        PatchEvent.from([
           // Set the `x` value of this array key item
-          sanity.set(x, [{ _key: key }, "x"]),
+          set(x, [{ _key: key }, "x"]),
           // Set the `y` value of this array key item
-          sanity.set(y, [{ _key: key }, "y"])
+          set(y, [{ _key: key }, "y"])
         ])
       );
     },
     [onChange]
-  ), hotspotImageRef = react.useRef(null), [imageRect, setImageRect] = react.useState();
+  ), hotspotImageRef = useRef(null), [imageRect, setImageRect] = useState();
   return useResizeObserver(
     hotspotImageRef,
     useDebouncedCallback(
@@ -232,9 +234,9 @@ function ImageHotspotArray(props) {
       [setImageRect],
       200
     )
-  ), /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: [2, 2, 3], children: [
-    displayImage?.url ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
-      imageRect && (value?.length ?? 0) > 0 && value?.map((spot, index) => /* @__PURE__ */ jsxRuntime.jsx(
+  ), /* @__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,
@@ -248,7 +250,7 @@ function ImageHotspotArray(props) {
         },
         spot._key
       )),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { __unstable_checkered: !0, shadow: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(Card, { __unstable_checkered: !0, shadow: 1, children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsx(
         "img",
         {
           ref: hotspotImageRef,
@@ -260,15 +262,15 @@ function ImageHotspotArray(props) {
           onClick: handleHotspotImageClick
         }
       ) }) })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx(Feedback, { children: imageHotspotOptions.imagePath ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    ] }) : /* @__PURE__ */ jsx(Feedback, { children: imageHotspotOptions.imagePath ? /* @__PURE__ */ jsxs(Fragment, { children: [
       "No Hotspot image found at path ",
-      /* @__PURE__ */ jsxRuntime.jsx("code", { children: imageHotspotOptions.imagePath })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__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__ */ jsxRuntime.jsx("code", { children: "options.hotspotImagePath" })
+      /* @__PURE__ */ jsx("code", { children: "options.hotspotImagePath" })
     ] }) }),
-    imageHotspotOptions.pathRoot && !VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && /* @__PURE__ */ jsxRuntime.jsxs(Feedback, { children: [
+    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 "',
@@ -278,7 +280,7 @@ function ImageHotspotArray(props) {
     props.renderDefault(props)
   ] });
 }
-const imageHotspotArrayPlugin = sanity.definePlugin({
+const imageHotspotArrayPlugin = definePlugin({
   name: "image-hotspot-array",
   form: {
     components: {
@@ -286,7 +288,7 @@ const imageHotspotArrayPlugin = sanity.definePlugin({
         if (props.schemaType.jsonType === "array" && props.schemaType.options?.imageHotspot) {
           const imageHotspotOptions = props.schemaType.options?.imageHotspot;
           if (imageHotspotOptions)
-            return /* @__PURE__ */ jsxRuntime.jsx(
+            return /* @__PURE__ */ jsx(
               ImageHotspotArray,
               {
                 ...props,
@@ -299,6 +301,8 @@ const imageHotspotArrayPlugin = sanity.definePlugin({
     }
   }
 });
-exports.ImageHotspotArray = ImageHotspotArray;
-exports.imageHotspotArrayPlugin = imageHotspotArrayPlugin;
+export {
+  ImageHotspotArray,
+  imageHotspotArrayPlugin
+};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../src/Feedback.tsx","../src/Spot.tsx","../src/useDebouncedCallback.ts","../src/useResizeObserver.ts","../src/ImageHotspotArray.tsx","../src/plugin.tsx"],"sourcesContent":["import {Card, Text} from '@sanity/ui'\n\nexport default function Feedback({children}: {children: React.ReactNode}): React.JSX.Element {\n return (\n <Card padding={4} radius={2} shadow={1} tone=\"caution\">\n <Text>{children}</Text>\n </Card>\n )\n}\n","import {Box, Text, Tooltip} from '@sanity/ui'\nimport {motion, useMotionValue} from 'framer-motion'\nimport {get} from 'lodash-es'\nimport {\n ComponentType,\n createElement,\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useState,\n} from 'react'\nimport {type ObjectSchemaType, type RenderPreviewCallback} from 'sanity'\n\nimport {FnHotspotMove, HotspotItem} from './ImageHotspotArray'\n\nconst dragStyle: CSSProperties = {\n width: '1.4rem',\n height: '1.4rem',\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n margin: '-0.7rem 0 0 -0.7rem',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '50%',\n background: '#000',\n color: 'white',\n}\n\nconst dragStyleWhileDrag: CSSProperties = {\n background: 'rgba(0, 0, 0, 0.1)',\n border: '1px solid #fff',\n cursor: 'none',\n}\n\nconst dragStyleWhileHover: CSSProperties = {\n background: 'rgba(0, 0, 0, 0.1)',\n border: '1px solid #fff',\n}\n\nconst dotStyle: CSSProperties = {\n position: 'absolute',\n left: '50%',\n top: '50%',\n height: '0.2rem',\n width: '0.2rem',\n margin: '-0.1rem 0 0 -0.1rem',\n background: '#fff',\n visibility: 'hidden',\n borderRadius: '50%',\n // make sure pointer events only run on the parent\n pointerEvents: 'none',\n}\n\nconst dotStyleWhileActive: CSSProperties = {\n visibility: 'visible',\n}\n\nconst labelStyle: CSSProperties = {\n color: 'white',\n fontSize: '0.7rem',\n fontWeight: 600,\n lineHeight: '1',\n}\n\nconst labelStyleWhileActive: CSSProperties = {\n visibility: 'hidden',\n}\n\nconst round = (num: number) => Math.round(num * 100) / 100\n\nexport interface HotspotTooltipProps<HotspotFields = {[key: string]: unknown}> {\n value: HotspotItem<HotspotFields>\n schemaType: ObjectSchemaType\n renderPreview: RenderPreviewCallback\n}\n\ninterface HotspotProps<HotspotFields = {[key: string]: unknown}> {\n value: HotspotItem\n bounds: DOMRectReadOnly\n update: FnHotspotMove\n hotspotDescriptionPath?: string\n tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n index: number\n schemaType: ObjectSchemaType\n renderPreview: RenderPreviewCallback\n}\n\nexport default function Spot({\n value,\n bounds,\n update,\n hotspotDescriptionPath,\n tooltip,\n index,\n schemaType,\n renderPreview,\n}: HotspotProps): ReactNode {\n const [isDragging, setIsDragging] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n\n // x/y are stored as % but need to be converted to px\n const x = useMotionValue(round(bounds.width * (value.x / 100)))\n const y = useMotionValue(round(bounds.height * (value.y / 100)))\n\n /*\n update x/y if the bounds change when resizing the window\n /\n useEffect(() => {\n x.set(round(bounds.width (value.x / 100)))\n y.set(round(bounds.height * (value.y / 100)))\n }, [x, y, value, bounds])\n\n const handleDragEnd = useCallback(() => {\n setIsDragging(false)\n\n // get current values for x/y in px\n const currentX = x.get()\n const currentY = y.get()\n\n // Which we need to convert back to `%` to patch the document\n const newX = round((currentX * 100) / bounds.width)\n const newY = round((currentY * 100) / bounds.height)\n\n // Don't go below 0 or above 100\n const safeX = Math.max(0, Math.min(100, newX))\n const safeY = Math.max(0, Math.min(100, newY))\n\n update(value._key, safeX, safeY)\n }, [x, y, value, update, bounds])\n const handleDragStart = useCallback(() => setIsDragging(true), [])\n\n const handleHoverStart = useCallback(() => setIsHovering(true), [])\n const handleHoverEnd = useCallback(() => setIsHovering(false), [])\n\n if (!x \|\| !y) {\n return null\n }\n\n return (\n <motion.div\n drag\n dragConstraints={bounds}\n dragElastic={0}\n dragMomentum={false}\n onDragEnd={handleDragEnd}\n onDragStart={handleDragStart}\n onHoverStart={handleHoverStart}\n onHoverEnd={handleHoverEnd}\n style={{\n ...dragStyle,\n x,\n y,\n ...(isDragging && {...dragStyleWhileDrag}),\n ...(isHovering && {...dragStyleWhileHover}),\n }}\n >\n <Tooltip\n key={value._key}\n disabled={isDragging}\n portal\n content={\n tooltip && typeof tooltip === 'function' ? (\n createElement(tooltip, {value, renderPreview, schemaType})\n ) : (\n <Box padding={2} style={{maxWidth: 200, pointerEvents: `none`}}>\n <Text textOverflow=\"ellipsis\">\n {hotspotDescriptionPath\n ? (get(value, hotspotDescriptionPath) as string)\n : `${value.x}% x ${value.y}%`}\n </Text>\n </Box>\n )\n }\n >\n <div>\n {/* Dot /}\n <Box\n style={{\n ...dotStyle,\n ...((isDragging \|\| isHovering) && {...dotStyleWhileActive}),\n }}\n />\n {/ Label /}\n <div\n style={{\n ...labelStyle,\n ...((isDragging \|\| isHovering) && {...labelStyleWhileActive}),\n }}\n >\n {index + 1}\n </div>\n </div>\n </Tooltip>\n </motion.div>\n )\n}\n","// copied from react-hookz/web\n// https://github.com/react-hookz/web/blob/579a445fcc9f4f4bb5b9d5e670b2e57448b4ee50/src/useDebouncedCallback/index.ts\nimport {type DependencyList, useEffect, useMemo, useRef} from 'react'\n\n/\n Run effect only when component is unmounted.\n \n @param effect Effector to run on unmount\n /\nexport function useUnmountEffect(effect: CallableFunction): void {\n const effectRef = useRef(effect)\n effectRef.current = effect\n useEffect(() => () => effectRef.current(), [])\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DebouncedFunction<Fn extends (...args: any[]) => any> = (\n this: ThisParameterType<Fn>,\n ...args: Parameters<Fn>\n) => void\n\n/\n Makes passed function debounced, otherwise acts like `useCallback`.\n \n @param callback Function that will be debounced.\n * @param deps Dependencies list when to update callback. It also replaces invoked\n * \tcallback for scheduled debounced invocations.\n * @param delay Debounce delay.\n * @param maxWait The maximum time `callback` is allowed to be delayed before\n * it's invoked. 0 means no max wait.\n /\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useDebouncedCallback<Fn extends (...args: any[]) => any>(\n callback: Fn,\n deps: DependencyList,\n delay: number,\n maxWait = 0,\n): DebouncedFunction<Fn> {\n const timeout = useRef<ReturnType<typeof setTimeout>>(undefined)\n const waitTimeout = useRef<ReturnType<typeof setTimeout>>(undefined)\n const cb = useRef(callback)\n const lastCall = useRef<{args: Parameters<Fn>; this: ThisParameterType<Fn>}>(undefined)\n\n const clear = () => {\n if (timeout.current) {\n clearTimeout(timeout.current)\n timeout.current = undefined\n }\n\n if (waitTimeout.current) {\n clearTimeout(waitTimeout.current)\n waitTimeout.current = undefined\n }\n }\n\n // Cancel scheduled execution on unmount\n useUnmountEffect(clear)\n\n useEffect(() => {\n cb.current = callback\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps)\n\n return useMemo(() => {\n const execute = () => {\n clear()\n\n // Barely possible to test this line\n / istanbul ignore next /\n if (!lastCall.current) return\n\n const context = lastCall.current\n lastCall.current = undefined\n\n cb.current.apply(context.this, context.args)\n }\n\n const wrapped = function (this, ...args) {\n if (timeout.current) {\n clearTimeout(timeout.current)\n }\n\n lastCall.current = {args, this: this}\n\n // Plan regular execution\n timeout.current = setTimeout(execute, delay)\n\n // Plan maxWait execution if required\n if (maxWait > 0 && !waitTimeout.current) {\n waitTimeout.current = setTimeout(execute, maxWait)\n }\n } as DebouncedFunction<Fn>\n\n Object.defineProperties(wrapped, {\n length: {value: callback.length},\n name: {value: `${callback.name \|\| 'anonymous'}__debounced__${delay}`},\n })\n\n return wrapped\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [delay, maxWait, ...deps])\n}\n","// copied from react-hookz/web\n// https://github.com/react-hookz/web/blob/579a445fcc9f4f4bb5b9d5e670b2e57448b4ee50/src/useResizeObserver/index.ts\nimport {type RefObject, useEffect, useRef} from 'react'\n\nconst isBrowser =\n typeof window !== 'undefined' &&\n typeof navigator !== 'undefined' &&\n typeof document !== 'undefined'\n\nexport type UseResizeObserverCallback = (entry: ResizeObserverEntry) => void\n\ntype ResizeObserverSingleton = {\n observer: ResizeObserver\n subscribe: (target: Element, callback: UseResizeObserverCallback) => void\n unsubscribe: (target: Element, callback: UseResizeObserverCallback) => void\n}\n\nlet observerSingleton: ResizeObserverSingleton\n\nfunction getResizeObserver(): ResizeObserverSingleton \| undefined {\n if (!isBrowser) return undefined\n\n if (observerSingleton) return observerSingleton\n\n const callbacks = new Map<Element, Set<UseResizeObserverCallback>>()\n\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries)\n callbacks.get(entry.target)?.forEach((cb) =>\n setTimeout(() => {\n cb(entry)\n }, 0),\n )\n })\n\n observerSingleton = {\n observer,\n subscribe(target, callback) {\n let cbs = callbacks.get(target)\n\n if (!cbs) {\n // If target has no observers yet - register it\n cbs = new Set<UseResizeObserverCallback>()\n callbacks.set(target, cbs)\n observer.observe(target)\n }\n\n // As Set is duplicate-safe - simply add callback on each call\n cbs.add(callback)\n },\n unsubscribe(target, callback) {\n const cbs = callbacks.get(target)\n\n // Else branch should never occur in case of normal execution\n // because callbacks map is hidden in closure - it is impossible to\n // simulate situation with non-existent `cbs` Set\n / istanbul ignore else /\n if (cbs) {\n // Remove current observer\n cbs.delete(callback)\n\n if (cbs.size === 0) {\n // If no observers left unregister target completely\n callbacks.delete(target)\n observer.unobserve(target)\n }\n }\n },\n }\n\n return observerSingleton\n}\n\n/\n Invokes a callback whenever ResizeObserver detects a change to target's size.\n \n @param target React reference or Element to track.\n * @param callback Callback that will be invoked on resize.\n * @param enabled Whether resize observer is enabled or not.\n /\nexport function useResizeObserver<T extends Element>(\n target: RefObject<T \| null>,\n callback: UseResizeObserverCallback,\n enabled = true,\n): void {\n const ro = enabled && getResizeObserver()\n const cb = useRef(callback)\n cb.current = callback\n\n const tgt = target && 'current' in target ? target.current : target\n\n useEffect(() => {\n // This secondary target resolve required for case when we receive ref object, which, most\n // likely, contains null during render stage, but already populated with element during\n // effect stage.\n\n const _tgt = target && 'current' in target ? target.current : target\n\n if (!ro \|\| !_tgt) return undefined\n\n // As unsubscription in internals of our ResizeObserver abstraction can\n // happen a bit later than effect cleanup invocation - we need a marker,\n // that this handler should not be invoked anymore\n let subscribed = true\n\n const handler: UseResizeObserverCallback = (...args) => {\n // It is reinsurance for the highly asynchronous invocations, almost\n // impossible to achieve in tests, thus excluding from LOC\n / istanbul ignore else /\n if (subscribed) {\n cb.current(...args)\n }\n }\n\n ro.subscribe(_tgt, handler)\n\n return () => {\n subscribed = false\n ro.unsubscribe(_tgt, handler)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [tgt, ro])\n}\n","import {getImageDimensions} from '@sanity/asset-utils'\nimport imageUrlBuilder from '@sanity/image-url'\nimport {Card, Flex, Stack} from '@sanity/ui'\nimport {randomKey} from '@sanity/util/content'\nimport {get} from 'lodash-es'\nimport {type MouseEvent, type ReactNode, useCallback, useMemo, useRef, useState} from 'react'\nimport {\n ArrayOfObjectsInputProps,\n ImageValue,\n insert,\n ObjectSchemaType,\n PatchEvent,\n SchemaType,\n set,\n setIfMissing,\n useClient,\n useFormValue,\n useResolveInitialValueForType,\n} from 'sanity'\n\nimport Feedback from './Feedback'\nimport {ImageHotspotOptions} from './plugin'\nimport Spot from './Spot'\nimport {useDebouncedCallback} from './useDebouncedCallback'\nimport {useResizeObserver} from './useResizeObserver'\n\nconst imageStyle = {width: `100%`, height: `auto`}\n\nconst VALID_ROOT_PATHS = ['document', 'parent']\n\nexport type FnHotspotMove = (key: string, x: number, y: number) => void\n\nexport type HotspotItem<HotspotFields = {[key: string]: unknown}> = {\n _key: string\n _type: string\n x: number\n y: number\n} & HotspotFields\n\nexport function ImageHotspotArray(\n props: ArrayOfObjectsInputProps<HotspotItem> & {imageHotspotOptions: ImageHotspotOptions},\n): ReactNode {\n const {value, onChange, imageHotspotOptions, schemaType, renderPreview} = props\n\n const sanityClient = useClient({apiVersion: '2022-01-01'})\n\n const imageHotspotPathRoot = useMemo(() => {\n const pathRoot = VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot ?? '')\n ? imageHotspotOptions.pathRoot\n : 'document'\n return pathRoot === 'document' ? [] : props.path.slice(0, -1)\n }, [imageHotspotOptions.pathRoot, props.path])\n\n const rootObject = useFormValue(imageHotspotPathRoot)\n\n const resolveInitialValueForType = useResolveInitialValueForType()\n const resolveInitialValue = useCallback(\n async (type: ObjectSchemaType) => {\n return resolveInitialValueForType(type as unknown as SchemaType, {})\n .then((initialValue) => {\n return initialValue\n })\n .catch(() => {\n return undefined\n })\n },\n [resolveInitialValueForType],\n )\n\n /\n Finding the image from the imageHotspotPathRoot (defaults to document),\n * using the path from the hotspot's `options` field\n \n when changes in imageHotspotPathRoot (e.g. document) occur,\n * check if there are any changes to the hotspotImage and update the reference\n /\n const hotspotImage = useMemo(() => {\n return (\n imageHotspotOptions.imagePath ? get(rootObject, imageHotspotOptions.imagePath) : rootObject\n ) as ImageValue \| undefined\n }, [rootObject, imageHotspotOptions.imagePath])\n\n const displayImage = useMemo(() => {\n const builder = imageUrlBuilder(sanityClient).dataset(sanityClient.config().dataset ?? '')\n const urlFor = (source: ImageValue) => builder.image(source)\n\n if (hotspotImage?.asset?._ref) {\n const {aspectRatio} = getImageDimensions(hotspotImage.asset._ref)\n const width = 1200\n const height = Math.round(width / aspectRatio)\n const url = urlFor(hotspotImage).width(width).url()\n\n return {width, height, url}\n }\n\n return null\n }, [hotspotImage, sanityClient])\n\n const handleHotspotImageClick = useCallback(\n async (event: MouseEvent<HTMLImageElement>) => {\n const {nativeEvent, currentTarget} = event\n\n // Calculate the x/y percentage of the click position\n const x = Number(((nativeEvent.offsetX 100) / currentTarget.width).toFixed(2))\n const y = Number(((nativeEvent.offsetY * 100) / currentTarget.height).toFixed(2))\n const description = `New Hotspot at ${x}% x ${y}%`\n\n const initialValues = await resolveInitialValue(schemaType.of[0].type as ObjectSchemaType)\n\n const newRow: HotspotItem = {\n _key: randomKey(12),\n _type: schemaType.of[0].name,\n ...initialValues,\n x,\n y,\n }\n\n if (imageHotspotOptions?.descriptionPath) {\n newRow[imageHotspotOptions.descriptionPath] = description\n }\n\n onChange(PatchEvent.from([setIfMissing([]), insert([newRow], 'after', [-1])]))\n },\n [imageHotspotOptions, onChange, resolveInitialValue, schemaType],\n )\n\n const handleHotspotMove: FnHotspotMove = useCallback(\n (key, x, y) => {\n onChange(\n PatchEvent.from([\n // Set the `x` value of this array key item\n set(x, [{_key: key}, 'x']),\n // Set the `y` value of this array key item\n set(y, [{_key: key}, 'y']),\n ]),\n )\n },\n [onChange],\n )\n\n const hotspotImageRef = useRef<HTMLImageElement \| null>(null)\n\n const [imageRect, setImageRect] = useState<DOMRectReadOnly>()\n\n useResizeObserver<HTMLImageElement>(\n hotspotImageRef,\n useDebouncedCallback(\n (e: ResizeObserverEntry) => setImageRect(e.contentRect),\n [setImageRect],\n 200,\n ),\n )\n\n return (\n <Stack space={[2, 2, 3]}>\n {displayImage?.url ? (\n <div style={{position: `relative`}}>\n {imageRect &&\n (value?.length ?? 0) > 0 &&\n value?.map((spot, index) => (\n <Spot\n index={index}\n key={spot._key}\n value={spot}\n bounds={imageRect}\n update={handleHotspotMove}\n hotspotDescriptionPath={imageHotspotOptions?.descriptionPath}\n tooltip={imageHotspotOptions?.tooltip}\n renderPreview={renderPreview}\n schemaType={schemaType.of[0] as ObjectSchemaType}\n />\n ))}\n\n <Card __unstable_checkered shadow={1}>\n <Flex align=\"center\" justify=\"center\">\n <img\n ref={hotspotImageRef}\n src={displayImage.url}\n width={displayImage.width}\n height={displayImage.height}\n alt=\"\"\n style={imageStyle}\n onClick={handleHotspotImageClick}\n />\n </Flex>\n </Card>\n </div>\n ) : (\n <Feedback>\n {imageHotspotOptions.imagePath ? (\n <>\n No Hotspot image found at path <code>{imageHotspotOptions.imagePath}</code>\n </>\n ) : (\n <>\n Define a path in this field using to the image field in this document at{' '}\n <code>options.hotspotImagePath</code>\n </>\n )}\n </Feedback>\n )}\n {imageHotspotOptions.pathRoot && !VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && (\n <Feedback>\n The supplied imageHotspotPathRoot "{imageHotspotOptions.pathRoot}" is not valid,\n falling back to "document". Available values are "\n {VALID_ROOT_PATHS.join(', ')}".\n </Feedback>\n )}\n {props.renderDefault(props as unknown as ArrayOfObjectsInputProps)}\n </Stack>\n )\n}\n","import {ComponentType} from 'react'\nimport {type ArrayOfObjectsInputProps, definePlugin} from 'sanity'\n\nimport {type HotspotItem, ImageHotspotArray} from './ImageHotspotArray'\nimport {type HotspotTooltipProps} from './Spot'\n\nexport interface ImageHotspotOptions<HotspotFields = {[key: string]: unknown}> {\n pathRoot?: 'document' \| 'parent'\n imagePath: string\n descriptionPath?: string\n tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n}\n\ndeclare module 'sanity' {\n export interface ArrayOptions {\n imageHotspot?: ImageHotspotOptions\n }\n}\n\nexport const imageHotspotArrayPlugin = definePlugin({\n name: 'image-hotspot-array',\n form: {\n components: {\n input: (props) => {\n if (props.schemaType.jsonType === 'array' && props.schemaType.options?.imageHotspot) {\n const imageHotspotOptions = props.schemaType.options?.imageHotspot\n if (imageHotspotOptions) {\n return (\n <ImageHotspotArray\n {...(props as unknown as ArrayOfObjectsInputProps<HotspotItem>)}\n imageHotspotOptions={imageHotspotOptions}\n />\n )\n }\n }\n return props.renderDefault(props)\n },\n },\n },\n})\n"],"names":["jsx","Card","Text","useState","useMotionValue","useEffect","useCallback","motion","Tooltip","createElement","Box","get","useRef","useMemo","useClient","useFormValue","useResolveInitialValueForType","imageUrlBuilder","getImageDimensions","randomKey","PatchEvent","setIfMissing","insert","set","Stack","jsxs","Flex","Fragment","definePlugin"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../src/Feedback.tsx","../src/Spot.tsx","../src/useDebouncedCallback.ts","../src/useResizeObserver.ts","../src/ImageHotspotArray.tsx","../src/plugin.tsx"],"sourcesContent":["import {Card, Text} from '@sanity/ui'\n\nexport default function Feedback({children}: {children: React.ReactNode}): React.JSX.Element {\n return (\n <Card padding={4} radius={2} shadow={1} tone=\"caution\">\n <Text>{children}</Text>\n </Card>\n )\n}\n","import {Box, Text, Tooltip} from '@sanity/ui'\nimport {motion, useMotionValue} from 'framer-motion'\nimport {get} from 'lodash-es'\nimport {\n ComponentType,\n createElement,\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useState,\n} from 'react'\nimport {type ObjectSchemaType, type RenderPreviewCallback} from 'sanity'\n\nimport {FnHotspotMove, HotspotItem} from './ImageHotspotArray'\n\nconst dragStyle: CSSProperties = {\n width: '1.4rem',\n height: '1.4rem',\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n margin: '-0.7rem 0 0 -0.7rem',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '50%',\n background: '#000',\n color: 'white',\n}\n\nconst dragStyleWhileDrag: CSSProperties = {\n background: 'rgba(0, 0, 0, 0.1)',\n border: '1px solid #fff',\n cursor: 'none',\n}\n\nconst dragStyleWhileHover: CSSProperties = {\n background: 'rgba(0, 0, 0, 0.1)',\n border: '1px solid #fff',\n}\n\nconst dotStyle: CSSProperties = {\n position: 'absolute',\n left: '50%',\n top: '50%',\n height: '0.2rem',\n width: '0.2rem',\n margin: '-0.1rem 0 0 -0.1rem',\n background: '#fff',\n visibility: 'hidden',\n borderRadius: '50%',\n // make sure pointer events only run on the parent\n pointerEvents: 'none',\n}\n\nconst dotStyleWhileActive: CSSProperties = {\n visibility: 'visible',\n}\n\nconst labelStyle: CSSProperties = {\n color: 'white',\n fontSize: '0.7rem',\n fontWeight: 600,\n lineHeight: '1',\n}\n\nconst labelStyleWhileActive: CSSProperties = {\n visibility: 'hidden',\n}\n\nconst round = (num: number) => Math.round(num * 100) / 100\n\nexport interface HotspotTooltipProps<HotspotFields = {[key: string]: unknown}> {\n value: HotspotItem<HotspotFields>\n schemaType: ObjectSchemaType\n renderPreview: RenderPreviewCallback\n}\n\ninterface HotspotProps<HotspotFields = {[key: string]: unknown}> {\n value: HotspotItem\n bounds: DOMRectReadOnly\n update: FnHotspotMove\n hotspotDescriptionPath?: string\n tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n index: number\n schemaType: ObjectSchemaType\n renderPreview: RenderPreviewCallback\n}\n\nexport default function Spot({\n value,\n bounds,\n update,\n hotspotDescriptionPath,\n tooltip,\n index,\n schemaType,\n renderPreview,\n}: HotspotProps): ReactNode {\n const [isDragging, setIsDragging] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n\n // x/y are stored as % but need to be converted to px\n const x = useMotionValue(round(bounds.width * (value.x / 100)))\n const y = useMotionValue(round(bounds.height * (value.y / 100)))\n\n /*\n update x/y if the bounds change when resizing the window\n /\n useEffect(() => {\n x.set(round(bounds.width (value.x / 100)))\n y.set(round(bounds.height * (value.y / 100)))\n }, [x, y, value, bounds])\n\n const handleDragEnd = useCallback(() => {\n setIsDragging(false)\n\n // get current values for x/y in px\n const currentX = x.get()\n const currentY = y.get()\n\n // Which we need to convert back to `%` to patch the document\n const newX = round((currentX * 100) / bounds.width)\n const newY = round((currentY * 100) / bounds.height)\n\n // Don't go below 0 or above 100\n const safeX = Math.max(0, Math.min(100, newX))\n const safeY = Math.max(0, Math.min(100, newY))\n\n update(value._key, safeX, safeY)\n }, [x, y, value, update, bounds])\n const handleDragStart = useCallback(() => setIsDragging(true), [])\n\n const handleHoverStart = useCallback(() => setIsHovering(true), [])\n const handleHoverEnd = useCallback(() => setIsHovering(false), [])\n\n if (!x \|\| !y) {\n return null\n }\n\n return (\n <motion.div\n drag\n dragConstraints={bounds}\n dragElastic={0}\n dragMomentum={false}\n onDragEnd={handleDragEnd}\n onDragStart={handleDragStart}\n onHoverStart={handleHoverStart}\n onHoverEnd={handleHoverEnd}\n style={{\n ...dragStyle,\n x,\n y,\n ...(isDragging && {...dragStyleWhileDrag}),\n ...(isHovering && {...dragStyleWhileHover}),\n }}\n >\n <Tooltip\n key={value._key}\n disabled={isDragging}\n portal\n content={\n tooltip && typeof tooltip === 'function' ? (\n createElement(tooltip, {value, renderPreview, schemaType})\n ) : (\n <Box padding={2} style={{maxWidth: 200, pointerEvents: `none`}}>\n <Text textOverflow=\"ellipsis\">\n {hotspotDescriptionPath\n ? (get(value, hotspotDescriptionPath) as string)\n : `${value.x}% x ${value.y}%`}\n </Text>\n </Box>\n )\n }\n >\n <div>\n {/* Dot /}\n <Box\n style={{\n ...dotStyle,\n ...((isDragging \|\| isHovering) && {...dotStyleWhileActive}),\n }}\n />\n {/ Label /}\n <div\n style={{\n ...labelStyle,\n ...((isDragging \|\| isHovering) && {...labelStyleWhileActive}),\n }}\n >\n {index + 1}\n </div>\n </div>\n </Tooltip>\n </motion.div>\n )\n}\n","// copied from react-hookz/web\n// https://github.com/react-hookz/web/blob/579a445fcc9f4f4bb5b9d5e670b2e57448b4ee50/src/useDebouncedCallback/index.ts\nimport {type DependencyList, useEffect, useMemo, useRef} from 'react'\n\n/\n Run effect only when component is unmounted.\n \n @param effect Effector to run on unmount\n /\nexport function useUnmountEffect(effect: CallableFunction): void {\n const effectRef = useRef(effect)\n effectRef.current = effect\n useEffect(() => () => effectRef.current(), [])\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DebouncedFunction<Fn extends (...args: any[]) => any> = (\n this: ThisParameterType<Fn>,\n ...args: Parameters<Fn>\n) => void\n\n/\n Makes passed function debounced, otherwise acts like `useCallback`.\n \n @param callback Function that will be debounced.\n * @param deps Dependencies list when to update callback. It also replaces invoked\n * \tcallback for scheduled debounced invocations.\n * @param delay Debounce delay.\n * @param maxWait The maximum time `callback` is allowed to be delayed before\n * it's invoked. 0 means no max wait.\n /\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useDebouncedCallback<Fn extends (...args: any[]) => any>(\n callback: Fn,\n deps: DependencyList,\n delay: number,\n maxWait = 0,\n): DebouncedFunction<Fn> {\n const timeout = useRef<ReturnType<typeof setTimeout>>(undefined)\n const waitTimeout = useRef<ReturnType<typeof setTimeout>>(undefined)\n const cb = useRef(callback)\n const lastCall = useRef<{args: Parameters<Fn>; this: ThisParameterType<Fn>}>(undefined)\n\n const clear = () => {\n if (timeout.current) {\n clearTimeout(timeout.current)\n timeout.current = undefined\n }\n\n if (waitTimeout.current) {\n clearTimeout(waitTimeout.current)\n waitTimeout.current = undefined\n }\n }\n\n // Cancel scheduled execution on unmount\n useUnmountEffect(clear)\n\n useEffect(() => {\n cb.current = callback\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps)\n\n return useMemo(() => {\n const execute = () => {\n clear()\n\n // Barely possible to test this line\n / istanbul ignore next /\n if (!lastCall.current) return\n\n const context = lastCall.current\n lastCall.current = undefined\n\n cb.current.apply(context.this, context.args)\n }\n\n const wrapped = function (this, ...args) {\n if (timeout.current) {\n clearTimeout(timeout.current)\n }\n\n lastCall.current = {args, this: this}\n\n // Plan regular execution\n timeout.current = setTimeout(execute, delay)\n\n // Plan maxWait execution if required\n if (maxWait > 0 && !waitTimeout.current) {\n waitTimeout.current = setTimeout(execute, maxWait)\n }\n } as DebouncedFunction<Fn>\n\n Object.defineProperties(wrapped, {\n length: {value: callback.length},\n name: {value: `${callback.name \|\| 'anonymous'}__debounced__${delay}`},\n })\n\n return wrapped\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [delay, maxWait, ...deps])\n}\n","// copied from react-hookz/web\n// https://github.com/react-hookz/web/blob/579a445fcc9f4f4bb5b9d5e670b2e57448b4ee50/src/useResizeObserver/index.ts\nimport {type RefObject, useEffect, useRef} from 'react'\n\nconst isBrowser =\n typeof window !== 'undefined' &&\n typeof navigator !== 'undefined' &&\n typeof document !== 'undefined'\n\nexport type UseResizeObserverCallback = (entry: ResizeObserverEntry) => void\n\ntype ResizeObserverSingleton = {\n observer: ResizeObserver\n subscribe: (target: Element, callback: UseResizeObserverCallback) => void\n unsubscribe: (target: Element, callback: UseResizeObserverCallback) => void\n}\n\nlet observerSingleton: ResizeObserverSingleton\n\nfunction getResizeObserver(): ResizeObserverSingleton \| undefined {\n if (!isBrowser) return undefined\n\n if (observerSingleton) return observerSingleton\n\n const callbacks = new Map<Element, Set<UseResizeObserverCallback>>()\n\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries)\n callbacks.get(entry.target)?.forEach((cb) =>\n setTimeout(() => {\n cb(entry)\n }, 0),\n )\n })\n\n observerSingleton = {\n observer,\n subscribe(target, callback) {\n let cbs = callbacks.get(target)\n\n if (!cbs) {\n // If target has no observers yet - register it\n cbs = new Set<UseResizeObserverCallback>()\n callbacks.set(target, cbs)\n observer.observe(target)\n }\n\n // As Set is duplicate-safe - simply add callback on each call\n cbs.add(callback)\n },\n unsubscribe(target, callback) {\n const cbs = callbacks.get(target)\n\n // Else branch should never occur in case of normal execution\n // because callbacks map is hidden in closure - it is impossible to\n // simulate situation with non-existent `cbs` Set\n / istanbul ignore else /\n if (cbs) {\n // Remove current observer\n cbs.delete(callback)\n\n if (cbs.size === 0) {\n // If no observers left unregister target completely\n callbacks.delete(target)\n observer.unobserve(target)\n }\n }\n },\n }\n\n return observerSingleton\n}\n\n/\n Invokes a callback whenever ResizeObserver detects a change to target's size.\n \n @param target React reference or Element to track.\n * @param callback Callback that will be invoked on resize.\n * @param enabled Whether resize observer is enabled or not.\n /\nexport function useResizeObserver<T extends Element>(\n target: RefObject<T \| null>,\n callback: UseResizeObserverCallback,\n enabled = true,\n): void {\n const ro = enabled && getResizeObserver()\n const cb = useRef(callback)\n cb.current = callback\n\n const tgt = target && 'current' in target ? target.current : target\n\n useEffect(() => {\n // This secondary target resolve required for case when we receive ref object, which, most\n // likely, contains null during render stage, but already populated with element during\n // effect stage.\n\n const _tgt = target && 'current' in target ? target.current : target\n\n if (!ro \|\| !_tgt) return undefined\n\n // As unsubscription in internals of our ResizeObserver abstraction can\n // happen a bit later than effect cleanup invocation - we need a marker,\n // that this handler should not be invoked anymore\n let subscribed = true\n\n const handler: UseResizeObserverCallback = (...args) => {\n // It is reinsurance for the highly asynchronous invocations, almost\n // impossible to achieve in tests, thus excluding from LOC\n / istanbul ignore else /\n if (subscribed) {\n cb.current(...args)\n }\n }\n\n ro.subscribe(_tgt, handler)\n\n return () => {\n subscribed = false\n ro.unsubscribe(_tgt, handler)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [tgt, ro])\n}\n","import {getImageDimensions} from '@sanity/asset-utils'\nimport imageUrlBuilder from '@sanity/image-url'\nimport {Card, Flex, Stack} from '@sanity/ui'\nimport {randomKey} from '@sanity/util/content'\nimport {get} from 'lodash-es'\nimport {type MouseEvent, type ReactNode, useCallback, useMemo, useRef, useState} from 'react'\nimport {\n ArrayOfObjectsInputProps,\n ImageValue,\n insert,\n ObjectSchemaType,\n PatchEvent,\n SchemaType,\n set,\n setIfMissing,\n useClient,\n useFormValue,\n useResolveInitialValueForType,\n} from 'sanity'\n\nimport Feedback from './Feedback'\nimport {ImageHotspotOptions} from './plugin'\nimport Spot from './Spot'\nimport {useDebouncedCallback} from './useDebouncedCallback'\nimport {useResizeObserver} from './useResizeObserver'\n\nconst imageStyle = {width: `100%`, height: `auto`}\n\nconst VALID_ROOT_PATHS = ['document', 'parent']\n\nexport type FnHotspotMove = (key: string, x: number, y: number) => void\n\nexport type HotspotItem<HotspotFields = {[key: string]: unknown}> = {\n _key: string\n _type: string\n x: number\n y: number\n} & HotspotFields\n\nexport function ImageHotspotArray(\n props: ArrayOfObjectsInputProps<HotspotItem> & {imageHotspotOptions: ImageHotspotOptions},\n): ReactNode {\n const {value, onChange, imageHotspotOptions, schemaType, renderPreview} = props\n\n const sanityClient = useClient({apiVersion: '2022-01-01'})\n\n const imageHotspotPathRoot = useMemo(() => {\n const pathRoot = VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot ?? '')\n ? imageHotspotOptions.pathRoot\n : 'document'\n return pathRoot === 'document' ? [] : props.path.slice(0, -1)\n }, [imageHotspotOptions.pathRoot, props.path])\n\n const rootObject = useFormValue(imageHotspotPathRoot)\n\n const resolveInitialValueForType = useResolveInitialValueForType()\n const resolveInitialValue = useCallback(\n async (type: ObjectSchemaType) => {\n return resolveInitialValueForType(type as unknown as SchemaType, {})\n .then((initialValue) => {\n return initialValue\n })\n .catch(() => {\n return undefined\n })\n },\n [resolveInitialValueForType],\n )\n\n /\n Finding the image from the imageHotspotPathRoot (defaults to document),\n * using the path from the hotspot's `options` field\n \n when changes in imageHotspotPathRoot (e.g. document) occur,\n * check if there are any changes to the hotspotImage and update the reference\n /\n const hotspotImage = useMemo(() => {\n return (\n imageHotspotOptions.imagePath ? get(rootObject, imageHotspotOptions.imagePath) : rootObject\n ) as ImageValue \| undefined\n }, [rootObject, imageHotspotOptions.imagePath])\n\n const displayImage = useMemo(() => {\n const builder = imageUrlBuilder(sanityClient).dataset(sanityClient.config().dataset ?? '')\n const urlFor = (source: ImageValue) => builder.image(source)\n\n if (hotspotImage?.asset?._ref) {\n const {aspectRatio} = getImageDimensions(hotspotImage.asset._ref)\n const width = 1200\n const height = Math.round(width / aspectRatio)\n const url = urlFor(hotspotImage).width(width).url()\n\n return {width, height, url}\n }\n\n return null\n }, [hotspotImage, sanityClient])\n\n const handleHotspotImageClick = useCallback(\n async (event: MouseEvent<HTMLImageElement>) => {\n const {nativeEvent, currentTarget} = event\n\n // Calculate the x/y percentage of the click position\n const x = Number(((nativeEvent.offsetX 100) / currentTarget.width).toFixed(2))\n const y = Number(((nativeEvent.offsetY * 100) / currentTarget.height).toFixed(2))\n const description = `New Hotspot at ${x}% x ${y}%`\n\n const initialValues = await resolveInitialValue(schemaType.of[0].type as ObjectSchemaType)\n\n const newRow: HotspotItem = {\n _key: randomKey(12),\n _type: schemaType.of[0].name,\n ...initialValues,\n x,\n y,\n }\n\n if (imageHotspotOptions?.descriptionPath) {\n newRow[imageHotspotOptions.descriptionPath] = description\n }\n\n onChange(PatchEvent.from([setIfMissing([]), insert([newRow], 'after', [-1])]))\n },\n [imageHotspotOptions, onChange, resolveInitialValue, schemaType],\n )\n\n const handleHotspotMove: FnHotspotMove = useCallback(\n (key, x, y) => {\n onChange(\n PatchEvent.from([\n // Set the `x` value of this array key item\n set(x, [{_key: key}, 'x']),\n // Set the `y` value of this array key item\n set(y, [{_key: key}, 'y']),\n ]),\n )\n },\n [onChange],\n )\n\n const hotspotImageRef = useRef<HTMLImageElement \| null>(null)\n\n const [imageRect, setImageRect] = useState<DOMRectReadOnly>()\n\n useResizeObserver<HTMLImageElement>(\n hotspotImageRef,\n useDebouncedCallback(\n (e: ResizeObserverEntry) => setImageRect(e.contentRect),\n [setImageRect],\n 200,\n ),\n )\n\n return (\n <Stack space={[2, 2, 3]}>\n {displayImage?.url ? (\n <div style={{position: `relative`}}>\n {imageRect &&\n (value?.length ?? 0) > 0 &&\n value?.map((spot, index) => (\n <Spot\n index={index}\n key={spot._key}\n value={spot}\n bounds={imageRect}\n update={handleHotspotMove}\n hotspotDescriptionPath={imageHotspotOptions?.descriptionPath}\n tooltip={imageHotspotOptions?.tooltip}\n renderPreview={renderPreview}\n schemaType={schemaType.of[0] as ObjectSchemaType}\n />\n ))}\n\n <Card __unstable_checkered shadow={1}>\n <Flex align=\"center\" justify=\"center\">\n <img\n ref={hotspotImageRef}\n src={displayImage.url}\n width={displayImage.width}\n height={displayImage.height}\n alt=\"\"\n style={imageStyle}\n onClick={handleHotspotImageClick}\n />\n </Flex>\n </Card>\n </div>\n ) : (\n <Feedback>\n {imageHotspotOptions.imagePath ? (\n <>\n No Hotspot image found at path <code>{imageHotspotOptions.imagePath}</code>\n </>\n ) : (\n <>\n Define a path in this field using to the image field in this document at{' '}\n <code>options.hotspotImagePath</code>\n </>\n )}\n </Feedback>\n )}\n {imageHotspotOptions.pathRoot && !VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && (\n <Feedback>\n The supplied imageHotspotPathRoot "{imageHotspotOptions.pathRoot}" is not valid,\n falling back to "document". Available values are "\n {VALID_ROOT_PATHS.join(', ')}".\n </Feedback>\n )}\n {props.renderDefault(props as unknown as ArrayOfObjectsInputProps)}\n </Stack>\n )\n}\n","import {ComponentType} from 'react'\nimport {type ArrayOfObjectsInputProps, definePlugin} from 'sanity'\n\nimport {type HotspotItem, ImageHotspotArray} from './ImageHotspotArray'\nimport {type HotspotTooltipProps} from './Spot'\n\nexport interface ImageHotspotOptions<HotspotFields = {[key: string]: unknown}> {\n pathRoot?: 'document' \| 'parent'\n imagePath: string\n descriptionPath?: string\n tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n}\n\ndeclare module 'sanity' {\n export interface ArrayOptions {\n imageHotspot?: ImageHotspotOptions\n }\n}\n\nexport const imageHotspotArrayPlugin = definePlugin({\n name: 'image-hotspot-array',\n form: {\n components: {\n input: (props) => {\n if (props.schemaType.jsonType === 'array' && props.schemaType.options?.imageHotspot) {\n const imageHotspotOptions = props.schemaType.options?.imageHotspot\n if (imageHotspotOptions) {\n return (\n <ImageHotspotArray\n {...(props as unknown as ArrayOfObjectsInputProps<HotspotItem>)}\n imageHotspotOptions={imageHotspotOptions}\n />\n )\n }\n }\n return props.renderDefault(props)\n },\n },\n },\n})\n"],"names":[],"mappings":";;;;;;;;;AAEA,SAAwB,SAAS,EAAC,YAA2D;AAC3F,SACE,oBAAC,MAAA,EAAK,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAK,WAC3C,UAAA,oBAAC,MAAA,EAAM,UAAS,GAClB;AAEJ;ACQA,MAAM,YAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,OAAO;AACT,GAEM,qBAAoC;AAAA,EACxC,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,QAAQ;AACV,GAEM,sBAAqC;AAAA,EACzC,YAAY;AAAA,EACZ,QAAQ;AACV,GAEM,WAA0B;AAAA,EAC9B,UAAU;AAAA,EACV,MAAM;AAAA,EACN,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA;AAAA,EAEd,eAAe;AACjB,GAEM,sBAAqC;AAAA,EACzC,YAAY;AACd,GAEM,aAA4B;AAAA,EAChC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AACd,GAEM,wBAAuC;AAAA,EAC3C,YAAY;AACd,GAEM,QAAQ,CAAC,QAAgB,KAAK,MAAM,MAAM,GAAG,IAAI;AAmBvD,SAAwB,KAAK;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAK,GAC5C,CAAC,YAAY,aAAa,IAAI,SAAS,EAAK,GAG5C,IAAI,eAAe,MAAM,OAAO,SAAS,MAAM,IAAI,IAAI,CAAC,GACxD,IAAI,eAAe,MAAM,OAAO,UAAU,MAAM,IAAI,IAAI,CAAC;AAK/D,YAAU,MAAM;AACd,MAAE,IAAI,MAAM,OAAO,SAAS,MAAM,IAAI,IAAI,CAAC,GAC3C,EAAE,IAAI,MAAM,OAAO,UAAU,MAAM,IAAI,IAAI,CAAC;AAAA,EAC9C,GAAG,CAAC,GAAG,GAAG,OAAO,MAAM,CAAC;AAExB,QAAM,gBAAgB,YAAY,MAAM;AACtC,kBAAc,EAAK;AAGnB,UAAM,WAAW,EAAE,IAAA,GACb,WAAW,EAAE,OAGb,OAAO,MAAO,WAAW,MAAO,OAAO,KAAK,GAC5C,OAAO,MAAO,WAAW,MAAO,OAAO,MAAM,GAG7C,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,IAAI,CAAC,GACvC,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,IAAI,CAAC;AAE7C,WAAO,MAAM,MAAM,OAAO,KAAK;AAAA,EACjC,GAAG,CAAC,GAAG,GAAG,OAAO,QAAQ,MAAM,CAAC,GAC1B,kBAAkB,YAAY,MAAM,cAAc,EAAI,GAAG,CAAA,CAAE,GAE3D,mBAAmB,YAAY,MAAM,cAAc,EAAI,GAAG,CAAA,CAAE,GAC5D,iBAAiB,YAAY,MAAM,cAAc,EAAK,GAAG,CAAA,CAAE;AAEjE,SAAI,CAAC,KAAK,CAAC,IACF,OAIP;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,MAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,cAAc;AAAA,MACd,WAAW;AAAA,MACX,aAAa;AAAA,MACb,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,OAAO;AAAA,QACL,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,GAAI,cAAc,EAAC,GAAG,mBAAA;AAAA,QACtB,GAAI,cAAc,EAAC,GAAG,oBAAA;AAAA,MAAmB;AAAA,MAG3C,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,UAAU;AAAA,UACV,QAAM;AAAA,UACN,SACE,WAAW,OAAO,WAAY,aAC5B,cAAc,SAAS,EAAC,OAAO,eAAe,WAAA,CAAW,IAEzD,oBAAC,OAAI,SAAS,GAAG,OAAO,EAAC,UAAU,KAAK,eAAe,UACrD,UAAA,oBAAC,QAAK,cAAa,YAChB,mCACI,IAAI,OAAO,sBAAsB,IAClC,GAAG,MAAM,CAAC,OAAO,MAAM,CAAC,KAC9B,GACF;AAAA,UAIJ,+BAAC,OAAA,EAEC,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,kBACL,GAAG;AAAA,kBACH,IAAK,cAAc,eAAe,EAAC,GAAG,oBAAA;AAAA,gBAAmB;AAAA,cAC3D;AAAA,YAAA;AAAA,YAGF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,kBACL,GAAG;AAAA,kBACH,IAAK,cAAc,eAAe,EAAC,GAAG,sBAAA;AAAA,gBAAqB;AAAA,gBAG5D,UAAA,QAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,EAAA,CACF;AAAA,QAAA;AAAA,QAlCK,MAAM;AAAA,MAAA;AAAA,IAmCb;AAAA,EAAA;AAGN;AC/LO,SAAS,iBAAiB,QAAgC;AAC/D,QAAM,YAAY,OAAO,MAAM;AAC/B,YAAU,UAAU,QACpB,UAAU,MAAM,MAAM,UAAU,QAAA,GAAW,EAAE;AAC/C;AAmBO,SAAS,qBACd,UACA,MACA,OACA,UAAU,GACa;AACvB,QAAM,UAAU,OAAsC,MAAS,GACzD,cAAc,OAAsC,MAAS,GAC7D,KAAK,OAAO,QAAQ,GACpB,WAAW,OAA4D,MAAS,GAEhF,QAAQ,MAAM;AACd,YAAQ,YACV,aAAa,QAAQ,OAAO,GAC5B,QAAQ,UAAU,SAGhB,YAAY,YACd,aAAa,YAAY,OAAO,GAChC,YAAY,UAAU;AAAA,EAE1B;AAGA,SAAA,iBAAiB,KAAK,GAEtB,UAAU,MAAM;AACd,OAAG,UAAU;AAAA,EAEf,GAAG,IAAI,GAEA,QAAQ,MAAM;AACnB,UAAM,UAAU,MAAM;AAKpB,UAJA,MAAA,GAII,CAAC,SAAS,QAAS;AAEvB,YAAM,UAAU,SAAS;AACzB,eAAS,UAAU,QAEnB,GAAG,QAAQ,MAAM,QAAQ,MAAM,QAAQ,IAAI;AAAA,IAC7C,GAEM,UAAU,YAAmB,MAAM;AACnC,cAAQ,WACV,aAAa,QAAQ,OAAO,GAG9B,SAAS,UAAU,EAAC,MAAM,MAAM,KAAA,GAGhC,QAAQ,UAAU,WAAW,SAAS,KAAK,GAGvC,UAAU,KAAK,CAAC,YAAY,YAC9B,YAAY,UAAU,WAAW,SAAS,OAAO;AAAA,IAErD;AAEA,WAAA,OAAO,iBAAiB,SAAS;AAAA,MAC/B,QAAQ,EAAC,OAAO,SAAS,OAAA;AAAA,MACzB,MAAM,EAAC,OAAO,GAAG,SAAS,QAAQ,WAAW,gBAAgB,KAAK,GAAA;AAAA,IAAE,CACrE,GAEM;AAAA,EAET,GAAG,CAAC,OAAO,SAAS,GAAG,IAAI,CAAC;AAC9B;ACjGA,MAAM,YACJ,OAAO,SAAW,OAClB,OAAO,YAAc,OACrB,OAAO,WAAa;AAUtB,IAAI;AAEJ,SAAS,oBAAyD;AAChE,MAAI,CAAC,UAAW;AAEhB,MAAI,kBAAmB,QAAO;AAE9B,QAAM,gCAAgB,IAAA,GAEhB,WAAW,IAAI,eAAe,CAAC,YAAY;AAC/C,eAAW,SAAS;AAClB,gBAAU,IAAI,MAAM,MAAM,GAAG;AAAA,QAAQ,CAAC,OACpC,WAAW,MAAM;AACf,aAAG,KAAK;AAAA,QACV,GAAG,CAAC;AAAA,MAAA;AAAA,EAEV,CAAC;AAED,SAAA,oBAAoB;AAAA,IAClB;AAAA,IACA,UAAU,QAAQ,UAAU;AAC1B,UAAI,MAAM,UAAU,IAAI,MAAM;AAEzB,cAEH,MAAM,oBAAI,IAAA,GACV,UAAU,IAAI,QAAQ,GAAG,GACzB,SAAS,QAAQ,MAAM,IAIzB,IAAI,IAAI,QAAQ;AAAA,IAClB;AAAA,IACA,YAAY,QAAQ,UAAU;AAC5B,YAAM,MAAM,UAAU,IAAI,MAAM;AAM5B,cAEF,IAAI,OAAO,QAAQ,GAEf,IAAI,SAAS,MAEf,UAAU,OAAO,MAAM,GACvB,SAAS,UAAU,MAAM;AAAA,IAG/B;AAAA,EAAA,GAGK;AACT;AASO,SAAS,kBACd,QACA,UACA,UAAU,IACJ;AACN,QAAM,KAAK,WAAW,kBAAA,GAChB,KAAK,OAAO,QAAQ;AAC1B,KAAG,UAAU;AAEb,QAAM,MAAM,UAAU,aAAa,SAAS,OAAO,UAAU;AAE7D,YAAU,MAAM;AAKd,UAAM,OAAO,UAAU,aAAa,SAAS,OAAO,UAAU;AAE9D,QAAI,CAAC,MAAM,CAAC,KAAM;AAKlB,QAAI,aAAa;AAEjB,UAAM,UAAqC,IAAI,SAAS;AAIlD,oBACF,GAAG,QAAQ,GAAG,IAAI;AAAA,IAEtB;AAEA,WAAA,GAAG,UAAU,MAAM,OAAO,GAEnB,MAAM;AACX,mBAAa,IACb,GAAG,YAAY,MAAM,OAAO;AAAA,IAC9B;AAAA,EAEF,GAAG,CAAC,KAAK,EAAE,CAAC;AACd;AChGA,MAAM,aAAa,EAAC,OAAO,QAAQ,QAAQ,UAErC,mBAAmB,CAAC,YAAY,QAAQ;AAWvC,SAAS,kBACd,OACW;AACX,QAAM,EAAC,OAAO,UAAU,qBAAqB,YAAY,cAAA,IAAiB,OAEpE,eAAe,UAAU,EAAC,YAAY,cAAa,GAEnD,uBAAuB,QAAQ,OAClB,iBAAiB,SAAS,oBAAoB,YAAY,EAAE,IACzE,oBAAoB,WACpB,gBACgB,aAAa,CAAA,IAAK,MAAM,KAAK,MAAM,GAAG,EAAE,GAC3D,CAAC,oBAAoB,UAAU,MAAM,IAAI,CAAC,GAEvC,aAAa,aAAa,oBAAoB,GAE9C,6BAA6B,iCAC7B,sBAAsB;AAAA,IAC1B,OAAO,SACE,2BAA2B,MAA+B,EAAE,EAChE,KAAK,CAAC,iBACE,YACR,EACA,MAAM,MAAM;AAAA,IAEb,CAAC;AAAA,IAEL,CAAC,0BAA0B;AAAA,EAAA,GAUvB,eAAe,QAAQ,MAEzB,oBAAoB,YAAY,IAAI,YAAY,oBAAoB,SAAS,IAAI,YAElF,CAAC,YAAY,oBAAoB,SAAS,CAAC,GAExC,eAAe,QAAQ,MAAM;AACjC,UAAM,UAAU,gBAAgB,YAAY,EAAE,QAAQ,aAAa,OAAA,EAAS,WAAW,EAAE,GACnF,SAAS,CAAC,WAAuB,QAAQ,MAAM,MAAM;AAE3D,QAAI,cAAc,OAAO,MAAM;AAC7B,YAAM,EAAC,gBAAe,mBAAmB,aAAa,MAAM,IAAI,GAC1D,QAAQ,MACR,SAAS,KAAK,MAAM,QAAQ,WAAW,GACvC,MAAM,OAAO,YAAY,EAAE,MAAM,KAAK,EAAE,IAAA;AAE9C,aAAO,EAAC,OAAO,QAAQ,IAAA;AAAA,IACzB;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,YAAY,CAAC,GAEzB,0BAA0B;AAAA,IAC9B,OAAO,UAAwC;AAC7C,YAAM,EAAC,aAAa,kBAAiB,OAG/B,IAAI,QAAS,YAAY,UAAU,MAAO,cAAc,OAAO,QAAQ,CAAC,CAAC,GACzE,IAAI,QAAS,YAAY,UAAU,MAAO,cAAc,QAAQ,QAAQ,CAAC,CAAC,GAC1E,cAAc,kBAAkB,CAAC,OAAO,CAAC,KAEzC,gBAAgB,MAAM,oBAAoB,WAAW,GAAG,CAAC,EAAE,IAAwB,GAEnF,SAAsB;AAAA,QAC1B,MAAM,UAAU,EAAE;AAAA,QAClB,OAAO,WAAW,GAAG,CAAC,EAAE;AAAA,QACxB,GAAG;AAAA,QACH;AAAA,QACA;AAAA,MAAA;AAGE,2BAAqB,oBACvB,OAAO,oBAAoB,eAAe,IAAI,cAGhD,SAAS,WAAW,KAAK,CAAC,aAAa,CAAA,CAAE,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAAA,IAC/E;AAAA,IACA,CAAC,qBAAqB,UAAU,qBAAqB,UAAU;AAAA,EAAA,GAG3D,oBAAmC;AAAA,IACvC,CAAC,KAAK,GAAG,MAAM;AACb;AAAA,QACE,WAAW,KAAK;AAAA;AAAA,UAEd,IAAI,GAAG,CAAC,EAAC,MAAM,IAAA,GAAM,GAAG,CAAC;AAAA;AAAA,UAEzB,IAAI,GAAG,CAAC,EAAC,MAAM,IAAA,GAAM,GAAG,CAAC;AAAA,QAAA,CAC1B;AAAA,MAAA;AAAA,IAEL;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA,GAGL,kBAAkB,OAAgC,IAAI,GAEtD,CAAC,WAAW,YAAY,IAAI,SAAA;AAElC,SAAA;AAAA,IACE;AAAA,IACA;AAAA,MACE,CAAC,MAA2B,aAAa,EAAE,WAAW;AAAA,MACtD,CAAC,YAAY;AAAA,MACb;AAAA,IAAA;AAAA,EACF,wBAIC,OAAA,EAAM,OAAO,CAAC,GAAG,GAAG,CAAC,GACnB,UAAA;AAAA,IAAA,cAAc,MACb,qBAAC,OAAA,EAAI,OAAO,EAAC,UAAU,cACpB,UAAA;AAAA,MAAA,cACE,OAAO,UAAU,KAAK,KACvB,OAAO,IAAI,CAAC,MAAM,UAChB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UAEA,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,wBAAwB,qBAAqB;AAAA,UAC7C,SAAS,qBAAqB;AAAA,UAC9B;AAAA,UACA,YAAY,WAAW,GAAG,CAAC;AAAA,QAAA;AAAA,QAPtB,KAAK;AAAA,MAAA,CASb;AAAA,MAEH,oBAAC,MAAA,EAAK,sBAAoB,IAAC,QAAQ,GACjC,UAAA,oBAAC,MAAA,EAAK,OAAM,UAAS,SAAQ,UAC3B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,KAAK,aAAa;AAAA,UAClB,OAAO,aAAa;AAAA,UACpB,QAAQ,aAAa;AAAA,UACrB,KAAI;AAAA,UACJ,OAAO;AAAA,UACP,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb,EAAA,CACF;AAAA,IAAA,EAAA,CACF,IAEA,oBAAC,UAAA,EACE,UAAA,oBAAoB,YACnB,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MAC+B,oBAAC,QAAA,EAAM,UAAA,oBAAoB,UAAA,CAAU;AAAA,IAAA,EAAA,CACtE,IAEA,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MACyE;AAAA,MACzE,oBAAC,UAAK,UAAA,2BAAA,CAAwB;AAAA,IAAA,EAAA,CAChC,EAAA,CAEJ;AAAA,IAED,oBAAoB,YAAY,CAAC,iBAAiB,SAAS,oBAAoB,QAAQ,KACtF,qBAAC,UAAA,EAAS,UAAA;AAAA,MAAA;AAAA,MACiC,oBAAoB;AAAA,MAAS;AAAA,MAErE,iBAAiB,KAAK,IAAI;AAAA,MAAE;AAAA,IAAA,GAC/B;AAAA,IAED,MAAM,cAAc,KAA4C;AAAA,EAAA,GACnE;AAEJ;AChMO,MAAM,0BAA0B,aAAa;AAAA,EAClD,MAAM;AAAA,EACN,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,OAAO,CAAC,UAAU;AAChB,YAAI,MAAM,WAAW,aAAa,WAAW,MAAM,WAAW,SAAS,cAAc;AACnF,gBAAM,sBAAsB,MAAM,WAAW,SAAS;AACtD,cAAI;AACF,mBACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAI;AAAA,gBACL;AAAA,cAAA;AAAA,YAAA;AAAA,QAIR;AACA,eAAO,MAAM,cAAc,KAAK;AAAA,MAClC;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-hotspot-array",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "description": "A configurable Custom Input for Arrays that will add and update items by clicking on an Image",
   "keywords": [
     "sanity",
@@ -17,11 +17,11 @@
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
   "sideEffects": false,
-  "type": "commonjs",
+  "type": "module",
   "exports": {
     ".": {
       "source": "./src/index.ts",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
@@ -30,9 +30,7 @@
   "types": "./dist/index.d.ts",
   "files": [
     "src",
-    "dist",
-    "v2-incompatible.js",
-    "sanity.json"
+    "dist"
   ],
   "scripts": {
     "dev": "sanity dev",
@@ -49,10 +47,9 @@
   "browserslist": "extends @sanity/browserslist-config",
   "dependencies": {
     "@sanity/asset-utils": "^2.2.1",
-    "@sanity/image-url": "^1.1.0",
-    "@sanity/incompatible-plugin": "^1.0.5",
+    "@sanity/image-url": "^2.1.1",
     "@sanity/ui": "^3.0.6",
-    "@sanity/util": "^4.3.0",
+    "@sanity/util": "^6.0.0",
     "framer-motion": "^12.23.12",
     "lodash-es": "^4.17.21"
   },
@@ -60,8 +57,8 @@
     "@commitlint/cli": "^19.2.2",
     "@commitlint/config-conventional": "^19.2.2",
     "@sanity/browserslist-config": "^1.0.3",
-    "@sanity/pkg-utils": "^7.11.7",
-    "@sanity/plugin-kit": "^4.0.19",
+    "@sanity/pkg-utils": "^10.5.3",
+    "@sanity/plugin-kit": "^4.0.20",
     "@sanity/semantic-release-preset": "^4.1.7",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^19.2.3",
@@ -77,22 +74,23 @@
     "lint-staged": "^13.0.3",
     "prettier": "^3.6.2",
     "prettier-plugin-packagejson": "^2.5.19",
-    "react": "^19.2.3",
+    "react": "^19.2.7",
     "rimraf": "^5.0.5",
-    "sanity": "^5.0.1",
+    "sanity": "^6.0.0",
     "styled-components": "^6.1.19",
     "typescript": "5.9.2"
   },
   "peerDependencies": {
-    "react": "^18.3 || ^19",
-    "sanity": "^4 || ^5"
+    "react": "^19.2",
+    "sanity": "^6"
   },
   "engines": {
-    "node": ">=20.19 <22 || >=22.12"
+    "node": ">=22.12"
   },
   "sanityPlugin": {
     "verifyPackage": {
       "nodeEngine": false,
+      "sanityV2Json": false,
       "tsc": false
     }
   }

package/dist/index.d.mts DELETED Viewed

@@ -1,54 +0,0 @@
-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
-}
-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>>
-}
-export {}
-declare module 'sanity' {
-  interface ArrayOptions {
-    imageHotspot?: ImageHotspotOptions
-  }
-}

package/dist/index.mjs DELETED Viewed

@@ -1,308 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { getImageDimensions } from "@sanity/asset-utils";
-import imageUrlBuilder from "@sanity/image-url";
-import { Card, Text, Tooltip, Box, Stack, Flex } from "@sanity/ui";
-import { randomKey } from "@sanity/util/content";
-import { get } from "lodash-es";
-import { useState, useEffect, useCallback, createElement, 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 }) });
-}
-const dragStyle = {
-  width: "1.4rem",
-  height: "1.4rem",
-  position: "absolute",
-  boxSizing: "border-box",
-  top: 0,
-  left: 0,
-  margin: "-0.7rem 0 0 -0.7rem",
-  cursor: "pointer",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  borderRadius: "50%",
-  background: "#000",
-  color: "white"
-}, dragStyleWhileDrag = {
-  background: "rgba(0, 0, 0, 0.1)",
-  border: "1px solid #fff",
-  cursor: "none"
-}, dragStyleWhileHover = {
-  background: "rgba(0, 0, 0, 0.1)",
-  border: "1px solid #fff"
-}, dotStyle = {
-  position: "absolute",
-  left: "50%",
-  top: "50%",
-  height: "0.2rem",
-  width: "0.2rem",
-  margin: "-0.1rem 0 0 -0.1rem",
-  background: "#fff",
-  visibility: "hidden",
-  borderRadius: "50%",
-  // make sure pointer events only run on the parent
-  pointerEvents: "none"
-}, dotStyleWhileActive = {
-  visibility: "visible"
-}, labelStyle = {
-  color: "white",
-  fontSize: "0.7rem",
-  fontWeight: 600,
-  lineHeight: "1"
-}, 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(() => {
-    x.set(round(bounds.width * (value.x / 100))), y.set(round(bounds.height * (value.y / 100)));
-  }, [x, y, value, bounds]);
-  const handleDragEnd = useCallback(() => {
-    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
-      )
-    }
-  );
-}
-function useUnmountEffect(effect) {
-  const effectRef = useRef(effect);
-  effectRef.current = effect, useEffect(() => () => effectRef.current(), []);
-}
-function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
-  const timeout = useRef(void 0), waitTimeout = useRef(void 0), cb = useRef(callback), lastCall = useRef(void 0), clear = () => {
-    timeout.current && (clearTimeout(timeout.current), timeout.current = void 0), waitTimeout.current && (clearTimeout(waitTimeout.current), waitTimeout.current = void 0);
-  };
-  return useUnmountEffect(clear), useEffect(() => {
-    cb.current = callback;
-  }, deps), useMemo(() => {
-    const execute = () => {
-      if (clear(), !lastCall.current) return;
-      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));
-    };
-    return Object.defineProperties(wrapped, {
-      length: { value: callback.length },
-      name: { value: `${callback.name || "anonymous"}__debounced__${delay}` }
-    }), wrapped;
-  }, [delay, maxWait, ...deps]);
-}
-const isBrowser = typeof window < "u" && typeof navigator < "u" && typeof document < "u";
-let observerSingleton;
-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)
-      );
-  });
-  return observerSingleton = {
-    observer,
-    subscribe(target, callback) {
-      let cbs = callbacks.get(target);
-      cbs || (cbs = /* @__PURE__ */ new Set(), callbacks.set(target, cbs), observer.observe(target)), cbs.add(callback);
-    },
-    unsubscribe(target, callback) {
-      const cbs = callbacks.get(target);
-      cbs && (cbs.delete(callback), cbs.size === 0 && (callbacks.delete(target), observer.unobserve(target)));
-    }
-  }, observerSingleton;
-}
-function useResizeObserver(target, callback, enabled = !0) {
-  const ro = enabled && getResizeObserver(), cb = useRef(callback);
-  cb.current = callback;
-  const tgt = target && "current" in target ? target.current : target;
-  useEffect(() => {
-    const _tgt = target && "current" in target ? target.current : target;
-    if (!ro || !_tgt) return;
-    let subscribed = !0;
-    const handler = (...args) => {
-      subscribed && cb.current(...args);
-    };
-    return ro.subscribe(_tgt, handler), () => {
-      subscribed = !1, ro.unsubscribe(_tgt, handler);
-    };
-  }, [tgt, ro]);
-}
-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 };
-    }
-    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)
-  ] });
-}
-const imageHotspotArrayPlugin = definePlugin({
-  name: "image-hotspot-array",
-  form: {
-    components: {
-      input: (props) => {
-        if (props.schemaType.jsonType === "array" && props.schemaType.options?.imageHotspot) {
-          const imageHotspotOptions = props.schemaType.options?.imageHotspot;
-          if (imageHotspotOptions)
-            return /* @__PURE__ */ jsx(
-              ImageHotspotArray,
-              {
-                ...props,
-                imageHotspotOptions
-              }
-            );
-        }
-        return props.renderDefault(props);
-      }
-    }
-  }
-});
-export {
-  ImageHotspotArray,
-  imageHotspotArrayPlugin
-};
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"index.mjs","sources":["../src/Feedback.tsx","../src/Spot.tsx","../src/useDebouncedCallback.ts","../src/useResizeObserver.ts","../src/ImageHotspotArray.tsx","../src/plugin.tsx"],"sourcesContent":["import {Card, Text} from '@sanity/ui'\n\nexport default function Feedback({children}: {children: React.ReactNode}): React.JSX.Element {\n return (\n <Card padding={4} radius={2} shadow={1} tone=\"caution\">\n <Text>{children}</Text>\n </Card>\n )\n}\n","import {Box, Text, Tooltip} from '@sanity/ui'\nimport {motion, useMotionValue} from 'framer-motion'\nimport {get} from 'lodash-es'\nimport {\n ComponentType,\n createElement,\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useState,\n} from 'react'\nimport {type ObjectSchemaType, type RenderPreviewCallback} from 'sanity'\n\nimport {FnHotspotMove, HotspotItem} from './ImageHotspotArray'\n\nconst dragStyle: CSSProperties = {\n width: '1.4rem',\n height: '1.4rem',\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n margin: '-0.7rem 0 0 -0.7rem',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '50%',\n background: '#000',\n color: 'white',\n}\n\nconst dragStyleWhileDrag: CSSProperties = {\n background: 'rgba(0, 0, 0, 0.1)',\n border: '1px solid #fff',\n cursor: 'none',\n}\n\nconst dragStyleWhileHover: CSSProperties = {\n background: 'rgba(0, 0, 0, 0.1)',\n border: '1px solid #fff',\n}\n\nconst dotStyle: CSSProperties = {\n position: 'absolute',\n left: '50%',\n top: '50%',\n height: '0.2rem',\n width: '0.2rem',\n margin: '-0.1rem 0 0 -0.1rem',\n background: '#fff',\n visibility: 'hidden',\n borderRadius: '50%',\n // make sure pointer events only run on the parent\n pointerEvents: 'none',\n}\n\nconst dotStyleWhileActive: CSSProperties = {\n visibility: 'visible',\n}\n\nconst labelStyle: CSSProperties = {\n color: 'white',\n fontSize: '0.7rem',\n fontWeight: 600,\n lineHeight: '1',\n}\n\nconst labelStyleWhileActive: CSSProperties = {\n visibility: 'hidden',\n}\n\nconst round = (num: number) => Math.round(num * 100) / 100\n\nexport interface HotspotTooltipProps<HotspotFields = {[key: string]: unknown}> {\n value: HotspotItem<HotspotFields>\n schemaType: ObjectSchemaType\n renderPreview: RenderPreviewCallback\n}\n\ninterface HotspotProps<HotspotFields = {[key: string]: unknown}> {\n value: HotspotItem\n bounds: DOMRectReadOnly\n update: FnHotspotMove\n hotspotDescriptionPath?: string\n tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n index: number\n schemaType: ObjectSchemaType\n renderPreview: RenderPreviewCallback\n}\n\nexport default function Spot({\n value,\n bounds,\n update,\n hotspotDescriptionPath,\n tooltip,\n index,\n schemaType,\n renderPreview,\n}: HotspotProps): ReactNode {\n const [isDragging, setIsDragging] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n\n // x/y are stored as % but need to be converted to px\n const x = useMotionValue(round(bounds.width * (value.x / 100)))\n const y = useMotionValue(round(bounds.height * (value.y / 100)))\n\n /**\n * update x/y if the bounds change when resizing the window\n */\n useEffect(() => {\n x.set(round(bounds.width * (value.x / 100)))\n y.set(round(bounds.height * (value.y / 100)))\n }, [x, y, value, bounds])\n\n const handleDragEnd = useCallback(() => {\n setIsDragging(false)\n\n // get current values for x/y in px\n const currentX = x.get()\n const currentY = y.get()\n\n // Which we need to convert back to `%` to patch the document\n const newX = round((currentX * 100) / bounds.width)\n const newY = round((currentY * 100) / bounds.height)\n\n // Don't go below 0 or above 100\n const safeX = Math.max(0, Math.min(100, newX))\n const safeY = Math.max(0, Math.min(100, newY))\n\n update(value._key, safeX, safeY)\n }, [x, y, value, update, bounds])\n const handleDragStart = useCallback(() => setIsDragging(true), [])\n\n const handleHoverStart = useCallback(() => setIsHovering(true), [])\n const handleHoverEnd = useCallback(() => setIsHovering(false), [])\n\n if (!x || !y) {\n return null\n }\n\n return (\n <motion.div\n drag\n dragConstraints={bounds}\n dragElastic={0}\n dragMomentum={false}\n onDragEnd={handleDragEnd}\n onDragStart={handleDragStart}\n onHoverStart={handleHoverStart}\n onHoverEnd={handleHoverEnd}\n style={{\n ...dragStyle,\n x,\n y,\n ...(isDragging && {...dragStyleWhileDrag}),\n ...(isHovering && {...dragStyleWhileHover}),\n }}\n >\n <Tooltip\n key={value._key}\n disabled={isDragging}\n portal\n content={\n tooltip && typeof tooltip === 'function' ? (\n createElement(tooltip, {value, renderPreview, schemaType})\n ) : (\n <Box padding={2} style={{maxWidth: 200, pointerEvents: `none`}}>\n <Text textOverflow=\"ellipsis\">\n {hotspotDescriptionPath\n ? (get(value, hotspotDescriptionPath) as string)\n : `${value.x}% x ${value.y}%`}\n </Text>\n </Box>\n )\n }\n >\n <div>\n {/* Dot */}\n <Box\n style={{\n ...dotStyle,\n ...((isDragging || isHovering) && {...dotStyleWhileActive}),\n }}\n />\n {/* Label */}\n <div\n style={{\n ...labelStyle,\n ...((isDragging || isHovering) && {...labelStyleWhileActive}),\n }}\n >\n {index + 1}\n </div>\n </div>\n </Tooltip>\n </motion.div>\n )\n}\n","// copied from react-hookz/web\n// https://github.com/react-hookz/web/blob/579a445fcc9f4f4bb5b9d5e670b2e57448b4ee50/src/useDebouncedCallback/index.ts\nimport {type DependencyList, useEffect, useMemo, useRef} from 'react'\n\n/**\n * Run effect only when component is unmounted.\n *\n * @param effect Effector to run on unmount\n */\nexport function useUnmountEffect(effect: CallableFunction): void {\n const effectRef = useRef(effect)\n effectRef.current = effect\n useEffect(() => () => effectRef.current(), [])\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DebouncedFunction<Fn extends (...args: any[]) => any> = (\n this: ThisParameterType<Fn>,\n ...args: Parameters<Fn>\n) => void\n\n/**\n * Makes passed function debounced, otherwise acts like `useCallback`.\n *\n * @param callback Function that will be debounced.\n * @param deps Dependencies list when to update callback. It also replaces invoked\n * \tcallback for scheduled debounced invocations.\n * @param delay Debounce delay.\n * @param maxWait The maximum time `callback` is allowed to be delayed before\n * it's invoked. 0 means no max wait.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useDebouncedCallback<Fn extends (...args: any[]) => any>(\n callback: Fn,\n deps: DependencyList,\n delay: number,\n maxWait = 0,\n): DebouncedFunction<Fn> {\n const timeout = useRef<ReturnType<typeof setTimeout>>(undefined)\n const waitTimeout = useRef<ReturnType<typeof setTimeout>>(undefined)\n const cb = useRef(callback)\n const lastCall = useRef<{args: Parameters<Fn>; this: ThisParameterType<Fn>}>(undefined)\n\n const clear = () => {\n if (timeout.current) {\n clearTimeout(timeout.current)\n timeout.current = undefined\n }\n\n if (waitTimeout.current) {\n clearTimeout(waitTimeout.current)\n waitTimeout.current = undefined\n }\n }\n\n // Cancel scheduled execution on unmount\n useUnmountEffect(clear)\n\n useEffect(() => {\n cb.current = callback\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps)\n\n return useMemo(() => {\n const execute = () => {\n clear()\n\n // Barely possible to test this line\n /* istanbul ignore next */\n if (!lastCall.current) return\n\n const context = lastCall.current\n lastCall.current = undefined\n\n cb.current.apply(context.this, context.args)\n }\n\n const wrapped = function (this, ...args) {\n if (timeout.current) {\n clearTimeout(timeout.current)\n }\n\n lastCall.current = {args, this: this}\n\n // Plan regular execution\n timeout.current = setTimeout(execute, delay)\n\n // Plan maxWait execution if required\n if (maxWait > 0 && !waitTimeout.current) {\n waitTimeout.current = setTimeout(execute, maxWait)\n }\n } as DebouncedFunction<Fn>\n\n Object.defineProperties(wrapped, {\n length: {value: callback.length},\n name: {value: `${callback.name || 'anonymous'}__debounced__${delay}`},\n })\n\n return wrapped\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [delay, maxWait, ...deps])\n}\n","// copied from react-hookz/web\n// https://github.com/react-hookz/web/blob/579a445fcc9f4f4bb5b9d5e670b2e57448b4ee50/src/useResizeObserver/index.ts\nimport {type RefObject, useEffect, useRef} from 'react'\n\nconst isBrowser =\n typeof window !== 'undefined' &&\n typeof navigator !== 'undefined' &&\n typeof document !== 'undefined'\n\nexport type UseResizeObserverCallback = (entry: ResizeObserverEntry) => void\n\ntype ResizeObserverSingleton = {\n observer: ResizeObserver\n subscribe: (target: Element, callback: UseResizeObserverCallback) => void\n unsubscribe: (target: Element, callback: UseResizeObserverCallback) => void\n}\n\nlet observerSingleton: ResizeObserverSingleton\n\nfunction getResizeObserver(): ResizeObserverSingleton | undefined {\n if (!isBrowser) return undefined\n\n if (observerSingleton) return observerSingleton\n\n const callbacks = new Map<Element, Set<UseResizeObserverCallback>>()\n\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries)\n callbacks.get(entry.target)?.forEach((cb) =>\n setTimeout(() => {\n cb(entry)\n }, 0),\n )\n })\n\n observerSingleton = {\n observer,\n subscribe(target, callback) {\n let cbs = callbacks.get(target)\n\n if (!cbs) {\n // If target has no observers yet - register it\n cbs = new Set<UseResizeObserverCallback>()\n callbacks.set(target, cbs)\n observer.observe(target)\n }\n\n // As Set is duplicate-safe - simply add callback on each call\n cbs.add(callback)\n },\n unsubscribe(target, callback) {\n const cbs = callbacks.get(target)\n\n // Else branch should never occur in case of normal execution\n // because callbacks map is hidden in closure - it is impossible to\n // simulate situation with non-existent `cbs` Set\n /* istanbul ignore else */\n if (cbs) {\n // Remove current observer\n cbs.delete(callback)\n\n if (cbs.size === 0) {\n // If no observers left unregister target completely\n callbacks.delete(target)\n observer.unobserve(target)\n }\n }\n },\n }\n\n return observerSingleton\n}\n\n/**\n * Invokes a callback whenever ResizeObserver detects a change to target's size.\n *\n * @param target React reference or Element to track.\n * @param callback Callback that will be invoked on resize.\n * @param enabled Whether resize observer is enabled or not.\n */\nexport function useResizeObserver<T extends Element>(\n target: RefObject<T | null>,\n callback: UseResizeObserverCallback,\n enabled = true,\n): void {\n const ro = enabled && getResizeObserver()\n const cb = useRef(callback)\n cb.current = callback\n\n const tgt = target && 'current' in target ? target.current : target\n\n useEffect(() => {\n // This secondary target resolve required for case when we receive ref object, which, most\n // likely, contains null during render stage, but already populated with element during\n // effect stage.\n\n const _tgt = target && 'current' in target ? target.current : target\n\n if (!ro || !_tgt) return undefined\n\n // As unsubscription in internals of our ResizeObserver abstraction can\n // happen a bit later than effect cleanup invocation - we need a marker,\n // that this handler should not be invoked anymore\n let subscribed = true\n\n const handler: UseResizeObserverCallback = (...args) => {\n // It is reinsurance for the highly asynchronous invocations, almost\n // impossible to achieve in tests, thus excluding from LOC\n /* istanbul ignore else */\n if (subscribed) {\n cb.current(...args)\n }\n }\n\n ro.subscribe(_tgt, handler)\n\n return () => {\n subscribed = false\n ro.unsubscribe(_tgt, handler)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [tgt, ro])\n}\n","import {getImageDimensions} from '@sanity/asset-utils'\nimport imageUrlBuilder from '@sanity/image-url'\nimport {Card, Flex, Stack} from '@sanity/ui'\nimport {randomKey} from '@sanity/util/content'\nimport {get} from 'lodash-es'\nimport {type MouseEvent, type ReactNode, useCallback, useMemo, useRef, useState} from 'react'\nimport {\n ArrayOfObjectsInputProps,\n ImageValue,\n insert,\n ObjectSchemaType,\n PatchEvent,\n SchemaType,\n set,\n setIfMissing,\n useClient,\n useFormValue,\n useResolveInitialValueForType,\n} from 'sanity'\n\nimport Feedback from './Feedback'\nimport {ImageHotspotOptions} from './plugin'\nimport Spot from './Spot'\nimport {useDebouncedCallback} from './useDebouncedCallback'\nimport {useResizeObserver} from './useResizeObserver'\n\nconst imageStyle = {width: `100%`, height: `auto`}\n\nconst VALID_ROOT_PATHS = ['document', 'parent']\n\nexport type FnHotspotMove = (key: string, x: number, y: number) => void\n\nexport type HotspotItem<HotspotFields = {[key: string]: unknown}> = {\n _key: string\n _type: string\n x: number\n y: number\n} & HotspotFields\n\nexport function ImageHotspotArray(\n props: ArrayOfObjectsInputProps<HotspotItem> & {imageHotspotOptions: ImageHotspotOptions},\n): ReactNode {\n const {value, onChange, imageHotspotOptions, schemaType, renderPreview} = props\n\n const sanityClient = useClient({apiVersion: '2022-01-01'})\n\n const imageHotspotPathRoot = useMemo(() => {\n const pathRoot = VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot ?? '')\n ? imageHotspotOptions.pathRoot\n : 'document'\n return pathRoot === 'document' ? [] : props.path.slice(0, -1)\n }, [imageHotspotOptions.pathRoot, props.path])\n\n const rootObject = useFormValue(imageHotspotPathRoot)\n\n const resolveInitialValueForType = useResolveInitialValueForType()\n const resolveInitialValue = useCallback(\n async (type: ObjectSchemaType) => {\n return resolveInitialValueForType(type as unknown as SchemaType, {})\n .then((initialValue) => {\n return initialValue\n })\n .catch(() => {\n return undefined\n })\n },\n [resolveInitialValueForType],\n )\n\n /**\n * Finding the image from the imageHotspotPathRoot (defaults to document),\n * using the path from the hotspot's `options` field\n *\n * when changes in imageHotspotPathRoot (e.g. document) occur,\n * check if there are any changes to the hotspotImage and update the reference\n */\n const hotspotImage = useMemo(() => {\n return (\n imageHotspotOptions.imagePath ? get(rootObject, imageHotspotOptions.imagePath) : rootObject\n ) as ImageValue | undefined\n }, [rootObject, imageHotspotOptions.imagePath])\n\n const displayImage = useMemo(() => {\n const builder = imageUrlBuilder(sanityClient).dataset(sanityClient.config().dataset ?? '')\n const urlFor = (source: ImageValue) => builder.image(source)\n\n if (hotspotImage?.asset?._ref) {\n const {aspectRatio} = getImageDimensions(hotspotImage.asset._ref)\n const width = 1200\n const height = Math.round(width / aspectRatio)\n const url = urlFor(hotspotImage).width(width).url()\n\n return {width, height, url}\n }\n\n return null\n }, [hotspotImage, sanityClient])\n\n const handleHotspotImageClick = useCallback(\n async (event: MouseEvent<HTMLImageElement>) => {\n const {nativeEvent, currentTarget} = event\n\n // Calculate the x/y percentage of the click position\n const x = Number(((nativeEvent.offsetX * 100) / currentTarget.width).toFixed(2))\n const y = Number(((nativeEvent.offsetY * 100) / currentTarget.height).toFixed(2))\n const description = `New Hotspot at ${x}% x ${y}%`\n\n const initialValues = await resolveInitialValue(schemaType.of[0].type as ObjectSchemaType)\n\n const newRow: HotspotItem = {\n _key: randomKey(12),\n _type: schemaType.of[0].name,\n ...initialValues,\n x,\n y,\n }\n\n if (imageHotspotOptions?.descriptionPath) {\n newRow[imageHotspotOptions.descriptionPath] = description\n }\n\n onChange(PatchEvent.from([setIfMissing([]), insert([newRow], 'after', [-1])]))\n },\n [imageHotspotOptions, onChange, resolveInitialValue, schemaType],\n )\n\n const handleHotspotMove: FnHotspotMove = useCallback(\n (key, x, y) => {\n onChange(\n PatchEvent.from([\n // Set the `x` value of this array key item\n set(x, [{_key: key}, 'x']),\n // Set the `y` value of this array key item\n set(y, [{_key: key}, 'y']),\n ]),\n )\n },\n [onChange],\n )\n\n const hotspotImageRef = useRef<HTMLImageElement | null>(null)\n\n const [imageRect, setImageRect] = useState<DOMRectReadOnly>()\n\n useResizeObserver<HTMLImageElement>(\n hotspotImageRef,\n useDebouncedCallback(\n (e: ResizeObserverEntry) => setImageRect(e.contentRect),\n [setImageRect],\n 200,\n ),\n )\n\n return (\n <Stack space={[2, 2, 3]}>\n {displayImage?.url ? (\n <div style={{position: `relative`}}>\n {imageRect &&\n (value?.length ?? 0) > 0 &&\n value?.map((spot, index) => (\n <Spot\n index={index}\n key={spot._key}\n value={spot}\n bounds={imageRect}\n update={handleHotspotMove}\n hotspotDescriptionPath={imageHotspotOptions?.descriptionPath}\n tooltip={imageHotspotOptions?.tooltip}\n renderPreview={renderPreview}\n schemaType={schemaType.of[0] as ObjectSchemaType}\n />\n ))}\n\n <Card __unstable_checkered shadow={1}>\n <Flex align=\"center\" justify=\"center\">\n <img\n ref={hotspotImageRef}\n src={displayImage.url}\n width={displayImage.width}\n height={displayImage.height}\n alt=\"\"\n style={imageStyle}\n onClick={handleHotspotImageClick}\n />\n </Flex>\n </Card>\n </div>\n ) : (\n <Feedback>\n {imageHotspotOptions.imagePath ? (\n <>\n No Hotspot image found at path <code>{imageHotspotOptions.imagePath}</code>\n </>\n ) : (\n <>\n Define a path in this field using to the image field in this document at{' '}\n <code>options.hotspotImagePath</code>\n </>\n )}\n </Feedback>\n )}\n {imageHotspotOptions.pathRoot && !VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && (\n <Feedback>\n The supplied imageHotspotPathRoot "{imageHotspotOptions.pathRoot}" is not valid,\n falling back to "document". Available values are "\n {VALID_ROOT_PATHS.join(', ')}".\n </Feedback>\n )}\n {props.renderDefault(props as unknown as ArrayOfObjectsInputProps)}\n </Stack>\n )\n}\n","import {ComponentType} from 'react'\nimport {type ArrayOfObjectsInputProps, definePlugin} from 'sanity'\n\nimport {type HotspotItem, ImageHotspotArray} from './ImageHotspotArray'\nimport {type HotspotTooltipProps} from './Spot'\n\nexport interface ImageHotspotOptions<HotspotFields = {[key: string]: unknown}> {\n pathRoot?: 'document' | 'parent'\n imagePath: string\n descriptionPath?: string\n tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n}\n\ndeclare module 'sanity' {\n export interface ArrayOptions {\n imageHotspot?: ImageHotspotOptions\n }\n}\n\nexport const imageHotspotArrayPlugin = definePlugin({\n name: 'image-hotspot-array',\n form: {\n components: {\n input: (props) => {\n if (props.schemaType.jsonType === 'array' && props.schemaType.options?.imageHotspot) {\n const imageHotspotOptions = props.schemaType.options?.imageHotspot\n if (imageHotspotOptions) {\n return (\n <ImageHotspotArray\n {...(props as unknown as ArrayOfObjectsInputProps<HotspotItem>)}\n imageHotspotOptions={imageHotspotOptions}\n />\n )\n }\n }\n return props.renderDefault(props)\n },\n },\n },\n})\n"],"names":[],"mappings":"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"}

package/sanity.json DELETED Viewed

@@ -1,8 +0,0 @@
-{
-  "parts": [
-    {
-      "implements": "part:@sanity/base/sanity-root",
-      "path": "./v2-incompatible.js"
-    }
-  ]
-}

package/v2-incompatible.js DELETED Viewed

@@ -1,11 +0,0 @@
-const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
-const {name, version, sanityExchangeUrl} = require('./package.json')
-export default showIncompatiblePluginDialog({
-  name: name,
-  versions: {
-    v3: version,
-    v2: '^0.0.10',
-  },
-  sanityExchangeUrl,
-})