@cntrl-site/sdk-nextjs 0.19.4 → 0.20.1

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,15 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="jsx" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

package/lib/components/items/ImageItem.js

@@ -15,8 +15,10 @@ const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
+const useImageFx_1 = require("../../utils/effects/useImageFx");
+const useElementRect_1 = require("../../utils/useElementRect");
 const ImageItem = ({ item, sectionId, onResize }) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, opacity, strokeColor, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
@@ -24,15 +26,25 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, ref: setRef, style: {
+    const { url, hasGLEffect, fragmentShader } = item.commonParams;
+    const fxCanvas = (0, react_1.useRef)(null);
+    (0, useImageFx_1.useImageFx)(fxCanvas.current, hasGLEffect !== null && hasGLEffect !== void 0 ? hasGLEffect : false, {
+        imageUrl: url,
+        fragmentShader
+    });
+    const rect = (0, useElementRect_1.useElementRect)(ref);
+    const rectWidth = Math.floor((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0);
+    const rectHeight = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0);
+    const inlineStyles = {
+        borderRadius: `${radius * 100}vw`,
+        borderWidth: `${strokeWidth * 100}vw`,
+        borderColor: `${borderColor.toCss()}`
+    };
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, ref: setRef, style: {
                         opacity: `${opacity}`,
                         transform: `rotate(${angle}deg)`,
                         filter: `blur(${blur * 100}vw)`
-                    } }, { children: (0, jsx_runtime_1.jsx)("img", { className: `image image-${item.id}`, style: {
-                            borderRadius: `${radius * 100}vw`,
-                            borderWidth: `${strokeWidth * 100}vw`,
-                            borderColor: `${borderColor.toCss()}`
-                        }, src: item.commonParams.url }) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+                    } }, { children: item.commonParams.hasGLEffect ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: "img-canvas", width: rectWidth, height: rectHeight })) : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .image-${item.id} {
             border-color: ${borderColor.fmt('rgba')};
@@ -53,6 +65,15 @@ const ImageItem = ({ item, sectionId, onResize }) => {
           pointer-events: none;
           border-style: solid;
           overflow: hidden;
+          box-sizing: border-box;
+        }
+        .img-canvas {
+          border: solid;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          border-width: 0;
+          box-sizing: border-box;
         }
         ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                         return (`

package/lib/utils/Animator/Animator.js

@@ -4,6 +4,7 @@ exports.Animator = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 const color_1 = require("@cntrl-site/color");
 const binSearchInsertAt_1 = require("../binSearchInsertAt");
+const rangeMap_1 = require("../rangeMap");
 const compare = (lhs, rhs) => lhs.position - rhs.position;
 const insertBin = (0, binSearchInsertAt_1.createInsert)(binSearchInsertAt_1.binSearchInsertAt, compare);
 class Animator {
@@ -28,8 +29,8 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            width: rangeMap(pos, start.position, end.position, start.value.width, end.value.width, true),
-            height: rangeMap(pos, start.position, end.position, start.value.height, end.value.height, true)
+            width: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.width, end.value.width, true),
+            height: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.height, end.value.height, true)
         };
     }
     getPositions(values, pos) {
@@ -45,8 +46,8 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            left: rangeMap(pos, start.position, end.position, start.value.left, end.value.left, true),
-            top: rangeMap(pos, start.position, end.position, start.value.top, end.value.top, true)
+            left: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.left, end.value.left, true),
+            top: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.top, end.value.top, true)
         };
     }
     getColor(values, pos) {
@@ -91,7 +92,7 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            radius: rangeMap(pos, start.position, end.position, start.value.radius, end.value.radius, true)
+            radius: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.radius, end.value.radius, true)
         };
     }
     getBorderWidth(values, pos) {
@@ -106,7 +107,7 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            borderWidth: rangeMap(pos, start.position, end.position, start.value.borderWidth, end.value.borderWidth, true)
+            borderWidth: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.borderWidth, end.value.borderWidth, true)
         };
     }
     getRotation(values, pos) {
@@ -121,7 +122,7 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            angle: rangeMap(pos, start.position, end.position, start.value.angle, end.value.angle, true)
+            angle: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.angle, end.value.angle, true)
         };
     }
     getOpacity(values, pos) {
@@ -136,7 +137,7 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            opacity: rangeMap(pos, start.position, end.position, start.value.opacity, end.value.opacity, true)
+            opacity: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.opacity, end.value.opacity, true)
         };
     }
     getScale(values, pos) {
@@ -151,7 +152,7 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            scale: rangeMap(pos, start.position, end.position, start.value.scale, end.value.scale, true)
+            scale: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.scale, end.value.scale, true)
         };
     }
     getBlur(values, pos) {
@@ -166,7 +167,7 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            blur: rangeMap(pos, start.position, end.position, start.value.blur, end.value.blur, true)
+            blur: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.blur, end.value.blur, true)
         };
     }
     getBackdropBlur(values, pos) {
@@ -181,7 +182,7 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            backdropBlur: rangeMap(pos, start.position, end.position, start.value.backdropBlur, end.value.backdropBlur, true)
+            backdropBlur: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.backdropBlur, end.value.backdropBlur, true)
         };
     }
     getTextColor(values, pos) {
@@ -211,7 +212,7 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            letterSpacing: rangeMap(pos, start.position, end.position, start.value.letterSpacing, end.value.letterSpacing, true)
+            letterSpacing: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.letterSpacing, end.value.letterSpacing, true)
         };
     }
     getWordSpacing(values, pos) {
@@ -226,7 +227,7 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            wordSpacing: rangeMap(pos, start.position, end.position, start.value.wordSpacing, end.value.wordSpacing, true)
+            wordSpacing: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.wordSpacing, end.value.wordSpacing, true)
         };
     }
     getStartEnd(position, keyframes) {
@@ -242,7 +243,7 @@ class Animator {
         }
     }
     getRangeColor(start, end, position) {
-        const rangeAmount = rangeMap(position, start.position, end.position, 0, 1, true);
+        const rangeAmount = (0, rangeMap_1.rangeMap)(position, start.position, end.position, 0, 1, true);
         const startColor = color_1.CntrlColor.parse(start.value.color);
         const endColor = color_1.CntrlColor.parse(end.value.color);
         const mixedColor = startColor.mix(endColor, rangeAmount);
@@ -268,11 +269,3 @@ function createKeyframesMap() {
         [sdk_1.KeyframeType.TextColor]: []
     };
 }
-function rangeMap(n, start1, stop1, start2, stop2, withinBounds = false) {
-    const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
-    if (withinBounds && n < start1)
-        return start2;
-    if (withinBounds && n > stop1)
-        return stop2;
-    return mapped;
-}

package/lib/utils/effects/useImageFx.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useImageFx = void 0;
+const react_1 = require("react");
+const effects_1 = require("@cntrl-site/effects");
+const rangeMap_1 = require("../rangeMap");
+const PATTERN_URL = 'https://cdn.cntrl.site/client-app-files/texture2.png';
+const PATTERN_2_URL = 'https://cdn.cntrl.site/client-app-files/bayer16.png';
+function useImageFx(canvas, enabled, { imageUrl, fragmentShader }) {
+    const cursor = (0, react_1.useRef)([0, 0]);
+    const imageFx = (0, react_1.useMemo)(() => {
+        if (!imageUrl)
+            return undefined;
+        return new effects_1.ImageEffect(imageUrl, PATTERN_URL, PATTERN_2_URL, fragmentShader, { time: 0, cursor: cursor.current });
+    }, [imageUrl, fragmentShader]);
+    (0, react_1.useEffect)(() => {
+        if (!canvas || !imageFx)
+            return;
+        const handleMouseMove = (evt) => {
+            const rect = canvas.getBoundingClientRect();
+            const x = (0, rangeMap_1.rangeMap)(evt.clientX, rect.left, rect.left + rect.width, 0, 1);
+            const y = (0, rangeMap_1.rangeMap)(evt.clientY, rect.top, rect.top + rect.height, 0, 1);
+            imageFx.setParam('cursor', [x, y]);
+        };
+        window.addEventListener('mousemove', handleMouseMove, { capture: true, passive: true });
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+        };
+    }, [canvas, imageFx]);
+    (0, react_1.useEffect)(() => {
+        const gl = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('webgl2');
+        if (!enabled || !canvas || !gl || !imageFx)
+            return;
+        let running = false;
+        let time = 0;
+        let frame;
+        const renderFrame = () => {
+            time += 0.1;
+            imageFx.setViewport(Math.floor(canvas.width), Math.floor(canvas.height));
+            imageFx.setParam('time', time);
+            imageFx.render(gl);
+            frame = requestAnimationFrame(renderFrame);
+        };
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting && !running) {
+                frame = requestAnimationFrame(renderFrame);
+                running = true;
+                return;
+            }
+            if (!entry.isIntersecting && running) {
+                window.cancelAnimationFrame(frame);
+                running = false;
+            }
+        });
+        observer.observe(canvas);
+        imageFx.prepare(gl);
+        return () => {
+            window.cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    }, [canvas, imageFx, enabled]);
+}
+exports.useImageFx = useImageFx;

package/lib/utils/rangeMap.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rangeMap = void 0;
+function rangeMap(n, start1, stop1, start2, stop2, withinBounds = false) {
+    const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+    if (withinBounds && n < start1)
+        return start2;
+    if (withinBounds && n > stop1)
+        return stop2;
+    return mapped;
+}
+exports.rangeMap = rangeMap;

package/lib/utils/useElementRect.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementRect = void 0;
+const react_1 = require("react");
+function useElementRect(element) {
+    const [rect, setRect] = (0, react_1.useState)(() => element === null || element === void 0 ? void 0 : element.getBoundingClientRect());
+    (0, react_1.useEffect)(() => {
+        if (!element)
+            return;
+        const observer = new ResizeObserver(entries => {
+            const el = entries.find(entry => entry.target === element);
+            if (!el) {
+                throw new Error('Element is not found in observed entries');
+            }
+            setRect(el.target.getBoundingClientRect());
+        });
+        observer.observe(element);
+        return () => {
+            observer.unobserve(element);
+            observer.disconnect();
+        };
+    }, [element]);
+    return rect;
+}
+exports.useElementRect = useElementRect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.19.4",
+  "version": "0.20.1",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -22,7 +22,8 @@
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/sdk": "^1.4.0",
+    "@cntrl-site/effects": "^1.0.5-1",
+    "@cntrl-site/sdk": "^1.4.1",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/components/items/ImageItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo, useState } from 'react';
+import { FC, useId, useMemo, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { CntrlColor } from '@cntrl-site/color';
 import { ArticleItemType, getLayoutStyles, ImageItem as TImageItem } from '@cntrl-site/sdk';
@@ -9,6 +9,8 @@ import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRegisterResize } from "../../common/useRegisterResize";
+import { useImageFx } from '../../utils/effects/useImageFx';
+import { useElementRect } from '../../utils/useElementRect';
 
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -18,6 +20,20 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
+  const { url, hasGLEffect, fragmentShader } = item.commonParams;
+  const fxCanvas = useRef<HTMLCanvasElement | null>(null);
+  useImageFx(fxCanvas.current, hasGLEffect ?? false, {
+    imageUrl: url,
+    fragmentShader
+  });
+  const rect = useElementRect(ref);
+  const rectWidth = Math.floor(rect?.width ?? 0);
+  const rectHeight = Math.floor(rect?.height ?? 0);
+  const inlineStyles = {
+    borderRadius: `${radius * 100}vw`,
+    borderWidth: `${strokeWidth * 100}vw`,
+    borderColor: `${borderColor.toCss()}`
+  };
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
@@ -30,15 +46,23 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
             filter: `blur(${blur * 100}vw)`
           }}
         >
-          <img
-            className={`image image-${item.id}`}
-            style={{
-              borderRadius: `${radius * 100}vw`,
-              borderWidth: `${strokeWidth * 100}vw`,
-              borderColor: `${borderColor.toCss()}`
-            }}
-            src={item.commonParams.url}
-          />
+          {item.commonParams.hasGLEffect ? (
+            <canvas
+              style={inlineStyles}
+              ref={fxCanvas}
+              className="img-canvas"
+              width={rectWidth}
+              height={rectHeight}
+            />
+          ) : (
+            <img
+              alt=""
+              className={`image image-${item.id}`}
+              style={inlineStyles}
+              src={item.commonParams.url}
+            />
+          )}
+
         </div>
         <JSXStyle id={id}>{`
         @supports not (color: oklch(42% 0.3 90 / 1)) {
@@ -61,6 +85,15 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
           pointer-events: none;
           border-style: solid;
           overflow: hidden;
+          box-sizing: border-box;
+        }
+        .img-canvas {
+          border: solid;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          border-width: 0;
+          box-sizing: border-box;
         }
         ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
           return (`

package/src/utils/Animator/Animator.ts

@@ -1,6 +1,7 @@
 import { KeyframeType, KeyframeValueMap } from '@cntrl-site/sdk';
 import { CntrlColor } from '@cntrl-site/color';
 import { binSearchInsertAt, createInsert } from '../binSearchInsertAt';
+import { rangeMap } from '../rangeMap';
 
 export interface AnimationData<T extends KeyframeType> {
   position: number;
@@ -348,17 +349,3 @@ function createKeyframesMap(): KeyframesMap {
     [KeyframeType.TextColor]: []
   };
 }
-
-function rangeMap(
-  n: number,
-  start1: number,
-  stop1: number,
-  start2: number,
-  stop2: number,
-  withinBounds: boolean = false
-): number {
-  const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
-  if (withinBounds && n < start1) return start2;
-  if (withinBounds && n > stop1) return stop2;
-  return mapped;
-}

package/src/utils/effects/useImageFx.ts

@@ -0,0 +1,80 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { ImageEffect } from '@cntrl-site/effects';
+import { rangeMap } from '../rangeMap';
+
+interface FxParams {
+  imageUrl?: string;
+  fragmentShader?: string;
+}
+
+const PATTERN_URL = 'https://cdn.cntrl.site/client-app-files/texture2.png';
+const PATTERN_2_URL = 'https://cdn.cntrl.site/client-app-files/bayer16.png';
+
+export function useImageFx(
+  canvas: HTMLCanvasElement | null | undefined,
+  enabled: boolean,
+  {
+    imageUrl,
+    fragmentShader
+  }: FxParams
+): void {
+  const cursor = useRef<[number, number]>([0, 0]);
+  const imageFx = useMemo<ImageEffect | undefined>(() => {
+    if (!imageUrl) return undefined;
+    return new ImageEffect(
+      imageUrl,
+      PATTERN_URL,
+      PATTERN_2_URL,
+      fragmentShader!,
+      { time: 0, cursor: cursor.current });
+  }, [imageUrl, fragmentShader]);
+
+  useEffect(() => {
+    if (!canvas || !imageFx) return;
+    const handleMouseMove = (evt: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = rangeMap(evt.clientX, rect.left, rect.left + rect.width, 0, 1);
+      const y = rangeMap(evt.clientY, rect.top, rect.top + rect.height, 0, 1);
+      imageFx.setParam('cursor', [x, y]);
+    };
+    window.addEventListener('mousemove', handleMouseMove, { capture: true, passive: true });
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [canvas, imageFx]);
+
+  useEffect(() => {
+    const gl = canvas?.getContext('webgl2');
+    if (!enabled || !canvas || !gl || !imageFx) return;
+    let running = false;
+    let time = 0;
+    let frame: number;
+
+    const renderFrame = () => {
+      time += 0.1;
+      imageFx.setViewport(Math.floor(canvas.width), Math.floor(canvas.height));
+      imageFx.setParam('time', time);
+      imageFx.render(gl);
+      frame = requestAnimationFrame(renderFrame);
+    };
+
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting && !running) {
+        frame = requestAnimationFrame(renderFrame);
+        running = true;
+        return;
+      }
+      if (!entry.isIntersecting && running) {
+        window.cancelAnimationFrame(frame);
+        running = false;
+      }
+    });
+    observer.observe(canvas);
+    imageFx.prepare(gl);
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [canvas, imageFx, enabled]);
+}

package/src/utils/rangeMap.ts

@@ -0,0 +1,13 @@
+export function rangeMap(
+  n: number,
+  start1: number,
+  stop1: number,
+  start2: number,
+  stop2: number,
+  withinBounds: boolean = false
+): number {
+  const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+  if (withinBounds && n < start1) return start2;
+  if (withinBounds && n > stop1) return stop2;
+  return mapped;
+}

package/src/utils/useElementRect.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+export function useElementRect(element: HTMLElement | null): DOMRect | undefined {
+  const [rect, setRect] = useState<DOMRect | undefined>(() => element?.getBoundingClientRect());
+
+  useEffect(() => {
+    if (!element) return;
+    const observer = new ResizeObserver(entries => {
+      const el = entries.find(entry => entry.target === element);
+      if (!el) {
+        throw new Error('Element is not found in observed entries');
+      }
+      setRect(el.target.getBoundingClientRect());
+    });
+    observer.observe(element);
+    return () => {
+      observer.unobserve(element);
+      observer.disconnect();
+    };
+  }, [element]);
+
+  return rect;
+}