@cntrl-site/sdk-nextjs 0.27.1 → 0.28.0

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/Item.js

@@ -55,7 +55,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
     const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
     const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
-    const { top, left } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
+    const { top, left, bottom } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
     const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
     const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionHeight, sectionId);
     const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
@@ -99,7 +99,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
         top: `${stickyTop * 100}vw`,
         height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left, bottom }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: {
                             width: `${sizingAxis.x === 'manual'
                                 ? isRichText
                                     ? `${width * exemplary}px`
@@ -111,12 +111,12 @@ const Item = ({ item, sectionId, articleHeight }) => {
                         }, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
+                    const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
                     return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
               top: ${sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
               pointer-events: auto;
-              cursor: ${hoverParams ? 'pointer' : 'default'};
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
             }
@@ -134,7 +134,8 @@ const Item = ({ item, sectionId, articleHeight }) => {
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);
               pointer-events: none;
-              top: ${(0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
+              bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
+              top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               transition: ${(0, HoverStyles_1.getTransitions)(['left', 'top'], hoverParams)};
             }

package/lib/components/items/ImageItem.js

@@ -17,6 +17,7 @@ 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 useLayoutContext_1 = require("../useLayoutContext");
 const baseVariables = `precision mediump float;
 uniform sampler2D u_image;
 uniform sampler2D u_pattern;
@@ -26,9 +27,10 @@ uniform float u_time;
 uniform vec2 u_cursor;
 varying vec2 v_texCoord;`;
 const ImageItem = ({ item, sectionId, onResize }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const { radius, strokeWidth, opacity, strokeColor, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
@@ -44,21 +46,25 @@ const ImageItem = ({ item, sectionId, onResize }) => {
         return acc;
     }, {});
     const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
+    const area = layoutId ? item.area[layoutId] : null;
+    const exemplary = (_b = layouts === null || layouts === void 0 ? void 0 : layouts.find(l => l.id === layoutId)) === null || _b === void 0 ? void 0 : _b.exemplary;
+    const width = area && exemplary ? area.width * exemplary : 0;
+    const height = area && exemplary ? area.height * exemplary : 0;
     (0, useImageFx_1.useImageFx)(fxCanvas.current, hasGLEffect !== null && hasGLEffect !== void 0 ? hasGLEffect : false, {
         imageUrl: url,
         fragmentShader: fullShaderCode,
         cursor: item.commonParams.FXCursor,
         controls: controlValues
-    });
+    }, width, height);
     const rect = (0, useElementRect_1.useElementRect)(ref);
-    const rectWidth = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0);
-    const rectHeight = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0);
+    const rectWidth = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0);
+    const rectHeight = Math.floor((_d = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _d !== void 0 ? _d : 0);
     const inlineStyles = {
         borderRadius: `${radius * 100}vw`,
         borderWidth: `${strokeWidth * 100}vw`,
         borderColor: `${borderColor.toCss()}`
     };
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setRef, style: {
                         opacity: `${opacity}`,
                         transform: `rotate(${angle}deg)`,
                         filter: `blur(${blur * 100}vw)`

package/lib/components/useItemPosition.js

@@ -13,8 +13,12 @@ const useItemPosition = (item, sectionId) => {
         return item.area[layoutId];
     }, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
     const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
+    const positionType = layoutId ? item.area[layoutId].positionType : sdk_1.PositionType.ScreenBased;
+    // tp prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
+    const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
     return {
-        top: (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
+        bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
+        top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
         left: `${left * 100}vw`
     };
 };

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -167,17 +167,19 @@ class RichTextConverter {
         }
         return styleGroups;
     }
-    groupEntities(entitiesList, styleGroups) {
-        var _a, _b, _c, _d;
+    groupEntities(entities, styleGroups) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const entitiesGroups = [];
-        // some entities may have no data, need to filter them out (case with deleting a section/page that was linked to)
-        const entities = entitiesList.filter(e => e.hasOwnProperty('data'));
         if (!entities.length && !styleGroups)
             return;
         if (!styleGroups || styleGroups.length === 0) {
-            const dividersSet = entities.reduce((ds, s) => {
-                ds.add(s.start);
-                ds.add(s.end);
+            const dividersSet = entities.reduce((ds, e) => {
+                // some entities may have no data, need to filter them out
+                // (case with deleting a section/page that was linked to)
+                if (!e.hasOwnProperty('data'))
+                    return ds;
+                ds.add(e.start);
+                ds.add(e.end);
                 return ds;
             }, new Set([entities[0].start, entities[entities.length - 1].end]));
             const dividers = Array.from(dividersSet).sort((a, b) => a - b);
@@ -200,9 +202,11 @@ class RichTextConverter {
         }
         const start = entities[0].start < styleGroups[0].start ? entities[0].start : styleGroups[0].start;
         const end = entities[entities.length - 1].end > styleGroups[styleGroups.length - 1].end ? entities[entities.length - 1].end : styleGroups[styleGroups.length - 1].end;
-        const entitiesDividers = entities.reduce((ds, s) => {
-            ds.add(s.start);
-            ds.add(s.end);
+        const entitiesDividers = entities.reduce((ds, e) => {
+            if (!e.hasOwnProperty('data'))
+                return ds;
+            ds.add(e.start);
+            ds.add(e.end);
             return ds;
         }, new Set([start, end]));
         const entityDividers = Array.from(entitiesDividers).sort((a, b) => a - b);
@@ -211,7 +215,7 @@ class RichTextConverter {
             const end = entityDividers[i + 1];
             const entity = entities.find(e => e.start === start);
             entitiesGroups.push(Object.assign({ stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end), start,
-                end }, (entity && { link: entity.data.url, target: entity.data.target })));
+                end }, (entity && { link: (_f = (_e = entity.data) === null || _e === void 0 ? void 0 : _e.url) !== null && _f !== void 0 ? _f : '', target: (_h = (_g = entity.data) === null || _g === void 0 ? void 0 : _g.target) !== null && _h !== void 0 ? _h : '_self' })));
         }
         return entitiesGroups;
     }

package/lib/utils/effects/useImageFx.js

@@ -6,14 +6,14 @@ 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, cursor, controls }) {
+function useImageFx(canvas, enabled, { imageUrl, fragmentShader, cursor, controls }, width, height) {
     const mousePos = (0, react_1.useRef)([0.0, 0.0]);
     const imageFx = (0, react_1.useMemo)(() => {
         if (!imageUrl || !cursor)
             return undefined;
         const { type, x, y } = cursor;
-        return new effects_1.ImageEffect(imageUrl, PATTERN_URL, PATTERN_2_URL, fragmentShader, Object.assign({ time: 0, cursor: type === 'mouse' ? mousePos.current : [x, y] }, controls));
-    }, [imageUrl, fragmentShader]);
+        return new effects_1.ImageEffect(imageUrl, PATTERN_URL, PATTERN_2_URL, fragmentShader, Object.assign({ time: 0, cursor: type === 'mouse' ? mousePos.current : [x, y] }, controls), width, height);
+    }, [imageUrl, fragmentShader, width, height]);
     (0, react_1.useEffect)(() => {
         if (!cursor || cursor.type !== 'mouse' || !canvas || !imageFx)
             return;

package/package.json

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

package/src/components/Item.tsx

@@ -1,6 +1,7 @@
 import { ComponentType, FC, PropsWithChildren, useContext, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
+  AnchorSide,
   ArticleItemType,
   getLayoutStyles,
   Item as TItem,
@@ -76,7 +77,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const [itemHeight, setItemHeight] = useState<undefined | number>(undefined);
   const { scale, scaleAnchor } = useItemScale(item, sectionId);
-  const { top, left } = useItemPosition(item, sectionId);
+  const { top, left, bottom } = useItemPosition(item, sectionId);
   const sectionHeight = useSectionHeightData(sectionId);
   const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
   const { width, height } = useItemDimensions(item, sectionId);
@@ -128,7 +129,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
     <div
       className={`item-wrapper-${item.id}`}
       ref={itemWrapperRef}
-      style={isInitialRef.current ? {} : { top, left, ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}) }}
+      style={isInitialRef.current ? {} : { top, left, bottom, ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}) }}
     >
       <div
         suppressHydrationWarning={true}
@@ -156,12 +157,12 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
       <JSXStyle id={id}>{`
         ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
+        const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
           return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
               top: ${sticky ? `${getAnchoredItemTop(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
               pointer-events: auto;
-              cursor: ${hoverParams ? 'pointer' : 'default'};
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
             }
@@ -179,7 +180,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);
               pointer-events: none;
-              top: ${getItemTopStyle(area.top, area.anchorSide)};
+              bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
+              top: ${isScreenBasedBottom ? 'unset' : getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               transition: ${getTransitions(['left', 'top'], hoverParams)};
             }

package/src/components/items/ImageItem.tsx

@@ -11,6 +11,7 @@ import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverSty
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { useImageFx } from '../../utils/effects/useImageFx';
 import { useElementRect } from '../../utils/useElementRect';
+import { useLayoutContext } from '../useLayoutContext';
 
 const baseVariables = `precision mediump float;
 uniform sampler2D u_image;
@@ -24,6 +25,7 @@ varying vec2 v_texCoord;`;
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
+  const layoutId = useLayoutContext();
   const { radius, strokeWidth, opacity, strokeColor, blur } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
@@ -39,12 +41,22 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     return acc;
   }, {});
   const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
-  useImageFx(fxCanvas.current, hasGLEffect ?? false, {
-    imageUrl: url,
-    fragmentShader: fullShaderCode,
-    cursor: item.commonParams.FXCursor,
-    controls: controlValues
-  });
+  const area = layoutId ? item.area[layoutId] : null;
+  const exemplary = layouts?.find(l => l.id === layoutId)?.exemplary;
+  const width = area && exemplary ? area.width * exemplary : 0;
+  const height = area && exemplary ? area.height * exemplary : 0;
+  useImageFx(
+    fxCanvas.current,
+    hasGLEffect ?? false,
+    {
+      imageUrl: url,
+      fragmentShader: fullShaderCode,
+      cursor: item.commonParams.FXCursor,
+      controls: controlValues
+    },
+    width,
+    height
+  );
   const rect = useElementRect(ref);
   const rectWidth = Math.floor(rect?.width ?? 0);
   const rectHeight = Math.floor(rect?.height ?? 0);
@@ -81,7 +93,6 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
               src={item.commonParams.url}
             />
           )}
-
         </div>
         <JSXStyle id={id}>{`
         @supports not (color: oklch(42% 0.3 90 / 1)) {

package/src/components/useItemPosition.ts

@@ -1,4 +1,4 @@
-import { AnchorSide, ItemAny } from '@cntrl-site/sdk';
+import { AnchorSide, ItemAny, PositionType } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useLayoutContext } from './useLayoutContext';
@@ -16,8 +16,12 @@ export const useItemPosition = (item: ItemAny, sectionId: string) => {
     [layoutId]
   );
   const anchorSide = layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top;
+  const positionType = layoutId ? item.area[layoutId].positionType : PositionType.ScreenBased;
+  // tp prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
+  const isScreenBasedBottom = positionType === PositionType.ScreenBased && anchorSide === AnchorSide.Bottom;
   return {
-    top:  getItemTopStyle(top, anchorSide),
+    bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
+    top:  isScreenBasedBottom ? 'unset' : getItemTopStyle(top, anchorSide),
     left: `${left * 100}vw`
   };
 };

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -199,15 +199,16 @@ export class RichTextConverter {
     return styleGroups;
   }
 
-  private groupEntities(entitiesList: RichTextEntity[], styleGroups?: StyleGroup[]): EntitiesGroup[] | undefined {
+  private groupEntities(entities: RichTextEntity[], styleGroups?: StyleGroup[]): EntitiesGroup[] | undefined {
     const entitiesGroups: EntitiesGroup[] = [];
-    // some entities may have no data, need to filter them out (case with deleting a section/page that was linked to)
-    const entities = entitiesList.filter(e => e.hasOwnProperty('data'));
     if (!entities.length && !styleGroups) return;
     if (!styleGroups || styleGroups.length === 0) {
-      const dividersSet = entities.reduce((ds, s) => {
-        ds.add(s.start);
-        ds.add(s.end);
+      const dividersSet = entities.reduce((ds, e) => {
+        // some entities may have no data, need to filter them out
+        // (case with deleting a section/page that was linked to)
+        if (!e.hasOwnProperty('data')) return ds;
+        ds.add(e.start);
+        ds.add(e.end);
         return ds;
       }, new Set<number>([entities[0].start, entities[entities.length - 1].end]));
       const dividers = Array.from(dividersSet).sort((a, b) => a - b);
@@ -234,9 +235,10 @@ export class RichTextConverter {
     }
     const start = entities[0].start < styleGroups[0].start ? entities[0].start : styleGroups[0].start;
     const end = entities[entities.length - 1].end > styleGroups[styleGroups.length - 1].end ? entities[entities.length - 1].end : styleGroups[styleGroups.length - 1].end;
-    const entitiesDividers = entities.reduce((ds, s) => {
-      ds.add(s.start);
-      ds.add(s.end);
+    const entitiesDividers = entities.reduce((ds, e) => {
+      if (!e.hasOwnProperty('data')) return ds;
+      ds.add(e.start);
+      ds.add(e.end);
       return ds;
     }, new Set<number>([start, end]));
     const entityDividers = Array.from(entitiesDividers).sort((a, b) => a - b);
@@ -249,7 +251,7 @@ export class RichTextConverter {
         stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end),
         start,
         end,
-        ...(entity && { link: entity.data.url, target: entity.data.target })
+        ...(entity && { link: entity.data?.url ?? '', target: entity.data?.target ?? '_self' })
       });
     }
 

package/src/utils/effects/useImageFx.ts

@@ -27,7 +27,9 @@ export function useImageFx(
     fragmentShader,
     cursor,
     controls
-  }: FxParams
+  }: FxParams,
+  width: number,
+  height: number
 ): void {
   const mousePos = useRef<[number, number]>([0.0, 0.0]);
   const imageFx = useMemo<ImageEffect | undefined>(() => {
@@ -42,8 +44,11 @@ export function useImageFx(
         time: 0,
         cursor: type === 'mouse' ? mousePos.current : [x, y],
         ...controls
-      });
-  }, [imageUrl, fragmentShader]);
+      },
+      width,
+      height
+    );
+  }, [imageUrl, fragmentShader, width, height]);
 
   useEffect(() => {
     if (!cursor || cursor.type !== 'mouse' || !canvas || !imageFx) return;